Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改显示

Browse Source
yangwl
夜笙歌 3 days ago
parent 7f2e0234b0
commit 9d297d9ea9
3 changed files with 124 additions and 118 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/board/cs3/bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 219 KiB

BIN
src/assets/board/cs3/bg1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

242
src/views/cs/index3.vue
Unescape Escape View File

@ -7,18 +7,18 @@
<!-- <div class="modelTitle" style="top:65%;left:32%">近7天产量</div>-->
<div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>
<div class="modelTitle" style="top:65%;left:71%">计划达成率</div>
<div class="title1" style="top:24%;left:34%">成型机产量：</div>
<div class="title1" style="top:24%;left:52.5%">烘房产量：</div>
<div class="title1" style="top:45%;left:34%">烘房耗电量：</div>
<div class="title1" style="top:45%;left:52.5%">AGV开动数量：</div>
<div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>
<div class="unit1" style="top: 31.3%;left: 63.5%">车</div>
<div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>
<div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>
<div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>
<div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>
<div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>
<div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>
<!-- <div class="title1" style="top:24%;left:34%">成型机产量：</div>-->
<!-- <div class="title1" style="top:24%;left:52.5%">烘房产量：</div>-->
<!-- <div class="title1" style="top:45%;left:34%">烘房耗电量：</div>-->
<!-- <div class="title1" style="top:45%;left:52.5%">AGV开动数量：</div>-->
<!-- <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>-->
<!-- <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>-->
<!-- <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>-->
<!-- <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>-->
<!-- <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
<!-- <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
<!-- <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>-->
<!-- <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>-->
<div class="title2" style="top: 73.5%;left: 86.8%;">计划生产数量：</div>
<div class="title2" style="top: 85.3%;left: 86.8%;">实际生产数量：</div>
<div class="unit2" style="top: 76.5%;left: 95%;">车</div>
@ -84,6 +84,7 @@
</div>
<Chart ref="chart1" class="chart1"></Chart>
<Chart ref="chart2" class="chart2"></Chart>
<Chart ref="chart3" class="chart3"></Chart>
</div>
</template>
<script>
@ -139,6 +140,104 @@ export default {
})
EnergyExpend().then(e => {
this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
let option2 = {
grid: {
top: '15%',
bottom: '10%',
// left: '5%',
right: '3%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
legend: {
right: 0,
textStyle: {
color: '#eee'
}
},
xAxis: {
data: e.map(v => v.monitorName.split(' - ')?.[1]?.split('(')?.[0]),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#fff'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisLabel: {
interval:0,
show: true,
textStyle: {
color: '#fff' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '单位：KWh',
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
}
],
series: [
{
label: {
show: true,
position: 'top',
formatter: "{c}",
color: "#fff"
},
name: '耗电量',
type: 'bar',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "emptyCircle", //标记的图形为实心圆
symbolSize: 5, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: e.map(v => parseFloat(v.expend)),
},
]
};
this.$refs.chart3.setData(option2)
})
agvdata().then(e => {
console.log(e)
@ -259,8 +358,7 @@ export default {
this.$refs.chart1.setData(option)
})
EnergyExpend().then(e => {
console.log(e)
getHourProductionLists().then(e => {
let option1 = {
grid: {
top: '15%',
@ -284,7 +382,7 @@ export default {
}
},
xAxis: {
data: e.map(v => v.monitorName.split(' - ')?.[1]?.split('(')?.[0]),
data: e.map(v => v.pdate),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
@ -295,7 +393,6 @@ export default {
show: true //隐藏X轴刻度
},
axisLabel: {
interval:0,
show: true,
textStyle: {
color: '#fff' //X轴文字颜色
@ -337,8 +434,8 @@ export default {
formatter: "{c}",
color: "#fff"
},
name: '耗电量',
type: 'bar',
name: '产量',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "emptyCircle", //标记的图形为实心圆
@ -353,110 +450,12 @@ export default {
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: e.map(v => parseFloat(v.expend)),
data: e.map(v => parseFloat(v.quantity)),
},
]
};
this.$refs.chart2.setData(option1)
})
getHourProductionLists().then(e => {
// let option1 = {
// grid: {
// top: '15%',
// bottom: '10%',
// // left: '5%',
// right: '3%'
// },
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// label: {
// show: true
// }
// }
// },
// legend: {
// right: 0,
// textStyle: {
// color: '#eee'
// }
// },
// xAxis: {
// data: e.map(v => v.pdate),
// axisLine: {
// show: true, //隐藏X轴轴线
// lineStyle: {
// color: '#fff'
// }
// },
// axisTick: {
// show: true //隐藏X轴刻度
// },
// axisLabel: {
// show: true,
// textStyle: {
// color: '#fff' //X轴文字颜色
// }
// }
// },
// yAxis: [
// {
// type: 'value',
// name: '单位：车',
// nameTextStyle: {
// color: '#fff'
// },
// splitLine: {
// show: false
// },
// axisTick: {
// show: true
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#fff'
// }
// },
// axisLabel: {
// show: true,
// textStyle: {
// color: '#fff'
// }
// }
// }
// ],
// series: [
// {
// label: {
// show: true,
// position: 'top',
// formatter: "{c}",
// color: "#fff"
// },
// name: '产量',
// type: 'line',
// smooth: true, //平滑曲线显示
// showAllSymbol: true, //显示所有图形。
// symbol: "emptyCircle", //标记的图形为实心圆
// symbolSize: 5, //标记的大小
// // itemStyle: {
// // //折线拐点标志的样式
// // color: "#058cff",
// // },
// // lineStyle: {
// // color: "#058cff",
// // },
// // areaStyle: {
// // color: "rgba(5,140,255, 0.2)",
// // },
// data: e.map(v => parseFloat(v.quantity)),
// },
// ]
// };
// this.$refs.chart2.setData(option1)
})
},
},
}
@ -592,9 +591,16 @@ export default {
top: 67.6%;
left: 31.3%;
}
.chart3 {
position: absolute;
width: 37.4%;
height: 42.5%;
top: 17.6%;
left: 31.3%;
}
.case-item {
.case-item {
border: 2px solid #0c61ad;
border-radius: 2px;
margin: 8px 0 0 0;

Write Preview
Loading…
Cancel
Save