地级大屏页面初始化3
This commit is contained in:
parent
26c4fc819a
commit
5853f12ce8
|
|
@ -8,9 +8,9 @@
|
|||
<div class="content-view">
|
||||
<div class="topView">
|
||||
<div style="width: 25%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
|
||||
<div class="topTab1 fs-24">线路</div>
|
||||
<div class="topTab2 fs-24">变电</div>
|
||||
<div class="topTab3 fs-24">电缆</div>
|
||||
<div :class="tabIndex==1?'topTab1 fs-24 active1':'topTab1 fs-24'" @click="changTab(1)">线路</div>
|
||||
<div :class="tabIndex==2?'topTab2 fs-24 active2':'topTab2 fs-24'" @click="changTab(2)">变电</div>
|
||||
<div :class="tabIndex==3?'topTab3 fs-24 active3':'topTab3 fs-24'" @click="changTab(3)">电缆</div>
|
||||
</div>
|
||||
<div style="width: 45%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
|
||||
<div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
|
||||
|
|
@ -70,6 +70,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabIndex:1,
|
||||
tableList:[
|
||||
{
|
||||
major:"变电站工程",
|
||||
|
|
@ -163,11 +164,13 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changTab(index){
|
||||
this.tabIndex=index
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -198,7 +201,7 @@ export default {
|
|||
}
|
||||
.topView{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
height: 16%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -239,7 +242,15 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.active1{
|
||||
background-image: url("../../../../../assets/cityScreen/tab12.png");
|
||||
}
|
||||
.active2{
|
||||
background-image: url("../../../../../assets/cityScreen/tab22.png");
|
||||
}
|
||||
.active3{
|
||||
background-image: url("../../../../../assets/cityScreen/tab32.png");
|
||||
}
|
||||
|
||||
.text{
|
||||
color: #C0C2C6;
|
||||
|
|
@ -270,7 +281,7 @@ export default {
|
|||
}
|
||||
.tableBox{
|
||||
width: 100%;
|
||||
height: 68%;
|
||||
height: 78%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tableTr{
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export default {
|
|||
size:[40, 20],
|
||||
Offset1:[-0, 10],
|
||||
Offset2:[-0, -10],
|
||||
fontSize:20
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -32,8 +33,9 @@ export default {
|
|||
if(window.innerWidth<3000){
|
||||
this.barWidth=20
|
||||
this.size=[20, 5]
|
||||
this.Offset1=[-0, 2]
|
||||
this.Offset2=[-0, -2]
|
||||
this.Offset1=[-0, 3]
|
||||
this.Offset2=[-0, -3]
|
||||
this.fontSize=10
|
||||
}
|
||||
this.InitEChartsOne()
|
||||
},
|
||||
|
|
@ -41,6 +43,14 @@ export default {
|
|||
InitEChartsOne() {
|
||||
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
var option = {
|
||||
grid: {
|
||||
show: true,
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
top: '20%',
|
||||
bottom: '15%',
|
||||
borderColor: "transparent"
|
||||
},
|
||||
xAxis: {
|
||||
data: ['在用', '在库', '在修', '共享'],
|
||||
axisTick: {
|
||||
|
|
@ -52,17 +62,17 @@ export default {
|
|||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
color: '#ccc',
|
||||
fontSize: this.fontSize,
|
||||
},
|
||||
margin: 26, //刻度标签与轴线之间的距离。
|
||||
margin: 10, //刻度标签与轴线之间的距离。
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
// name:"单位：t",
|
||||
nameTextStyle:{
|
||||
color: '#fff',
|
||||
fontSize:15,
|
||||
color: '#ccc',
|
||||
fontSize:this.fontSize ,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
|
@ -75,8 +85,8 @@ export default {
|
|||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
color: '#ccc',
|
||||
fontSize: this.fontSize,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
@ -117,8 +127,8 @@ export default {
|
|||
show: true,
|
||||
position: 'top',
|
||||
offset: 0,
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
fontSize: this.fontSize,
|
||||
color: '#ccc',
|
||||
formatter: function(params) {
|
||||
console.log(params)
|
||||
var str = "" + params.value + "\n\n";
|
||||
|
|
@ -136,34 +146,34 @@ export default {
|
|||
"symbolOffset": this.Offset1,
|
||||
"z": 1,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#217CA7',
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#217CA7'
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#2B9CCC'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2B9CCC'
|
||||
}
|
||||
],
|
||||
},
|
||||
color: {
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#217CA7',
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#217CA7'
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#2B9CCC'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2B9CCC'
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
"data": [1, 1, 1, 1]
|
||||
"data": [1, 1, 1, 1]
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.main-view {
|
||||
height: 50vh;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3300px) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue