wilson
/
ccl_plm-vue
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2024-06-14

master
zelian_wu 2 years ago
parent
1a60076e21
commit
165d67f943
1 changed files with 59 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      src/views/modules/cdc/collectScreen.vue

95
src/views/modules/cdc/collectScreen.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="echarts"> <div class="echarts">
<div class="header " style="display: flex;justify-content: space-between;align-items: center;height: 6%;padding: 5px"> <div class="header " style="display: flex;justify-content: space-between;align-items: center;height: 6%;padding: 5px">
<div style="width: 30%"><img style="max-width: 20%;max-height: 100%;vertical-align:middle;" src="~@/assets/img/ccl.png" ></div>
<div style="width: 40%;text-align: center;font-size: 24px;font-weight: 400">CCL Coating 监控大屏/Monitor Platform</div>
<div style="width: 20%"><img style="max-width: 30%;max-height: 100%;vertical-align:middle;" src="~@/assets/img/ccl.png" ></div>
<div style="width: 50%;text-align: center;font-size: 24px;font-weight: 400">CCL Coating 监控大屏/Monitor Platform</div>
<div style="width: 30%;font-size: 13px"> <div style="width: 30%;font-size: 13px">
<el-row> <el-row>
<el-col :span="6" :offset="18">
<el-col :span="12" :offset="12">
<div>当前时间/Time:</div> <div>当前时间/Time:</div>
<div>{{dateFormat(this.newTime)}}</div> <div>{{dateFormat(this.newTime)}}</div>
</el-col> </el-col>
@ -18,38 +18,38 @@
<div class="pie"> <div class="pie">
<div class="pie_left"> <div class="pie_left">
<div class="pie_content" > <div class="pie_content" >
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/Static Electricity</span>
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
</div> </div>
<div class="pie_chart" style="text-align: center;"> <div class="pie_chart" style="text-align: center;">
<div v-for="item in line1"> <div v-for="item in line1">
<div style="margin-bottom: 20px">
<div>
<div>{{ item.deviceDesc.split(';')[0] }}</div> <div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div> <div>{{ item.deviceDesc.split(';')[1] }}</div>
</div> </div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer"> <div class="pie_content pie_footer">
<div>上限/Upper <span v-if="line1.length !== 0">{{line1[0].maxValue}}</span><span v-else>0</span></div> <div>上限/Upper <span v-if="line1.length !== 0">{{line1[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="line1.length !== 0">{{line1[0].minValue}}</span><span v-else>0</span></div>
<!-- <div>下限/Lower <span v-if="line1.length !== 0">{{line1[0].minValue}}</span><span v-else>0</span></div>-->
</div> </div>
</div> </div>
<div class="pie_right"> <div class="pie_right">
<div class="pie_content">
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/Gas Concentration</span>
<div class="pie_content" >
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
</div> </div>
<div class="pie_chart" style="text-align: center;"> <div class="pie_chart" style="text-align: center;">
<div v-for="item in lineGC1"> <div v-for="item in lineGC1">
<div style="margin-bottom: 20px">
<div>
<div>{{ item.deviceDesc.split(';')[0] }}</div> <div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div> <div>{{ item.deviceDesc.split(';')[1] }}</div>
</div> </div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue || item.itemValue <= item.minValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer">
<div>上限/Upper <span v-if="lineGC1.length !== 0">{{lineGC1[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span></div>
<div class="pie_content pie_footer" style="margin-top: 2%">
<div>上限/Upper <span v-if="lineGC1.length !== 0">{{lineGC1[0].maxValue}}</span><span v-else>0</span>%</div>
<div>下限/Lower <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span>%</div>
</div> </div>
</div> </div>
</div> </div>
@ -59,43 +59,43 @@
<div class="pie"> <div class="pie">
<div class="pie_left"> <div class="pie_left">
<div class="pie_content"> <div class="pie_content">
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/Static Electricity</span>
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
</div> </div>
<div class="pie_chart" style="text-align: center;"> <div class="pie_chart" style="text-align: center;">
<div v-for="item in line2"> <div v-for="item in line2">
<div style="margin-bottom: 20px">
<div >
<div>{{ item.deviceDesc.split(';')[0] }}</div> <div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div> <div>{{ item.deviceDesc.split(';')[1] }}</div>
</div> </div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 60px;height:60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer"> <div class="pie_content pie_footer">
<div>上限/Upper <span v-if="line2.length !== 0">{{line2[0].maxValue}}</span><span v-else>0</span></div> <div>上限/Upper <span v-if="line2.length !== 0">{{line2[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>
<!-- <div>下限/Lower <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>-->
</div> </div>
</div> </div>
<div class="pie_right"> <div class="pie_right">
<div class="pie_content"> <div class="pie_content">
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/Gas Concentration</span>
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
</div> </div>
<div class="pie_chart" style="text-align: center;"> <div class="pie_chart" style="text-align: center;">
<div v-for="item in lineGC2"> <div v-for="item in lineGC2">
<div style="margin-bottom: 20px">
<div >
<div>{{ item.deviceDesc.split(';')[0] }}</div> <div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div> <div>{{ item.deviceDesc.split(';')[1] }}</div>
</div> </div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue || item.itemValue <= item.minValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer">
<div>上限/Upper <span v-if="lineGC2.length !== 0">{{lineGC2[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="lineGC2.length !== 0">{{lineGC2[0].minValue}}</span><span v-else>0</span></div>
<div class="pie_content pie_footer" style="margin-top: 2%">
<div>上限/Upper <span v-if="lineGC2.length !== 0">{{lineGC2[0].maxValue}}</span><span v-else>0</span>%</div>
<div>下限/Lower <span v-if="lineGC2.length !== 0">{{lineGC2[0].minValue}}</span><span v-else>0</span>%</div>
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
配妆间/Adhensive Workshop
配胶间/Mixing Room
</div> </div>
<div style="border: 1px solid #ccc;padding: 0 10px;height: 34%"> <div style="border: 1px solid #ccc;padding: 0 10px;height: 34%">
<div style="width: 100%;height: 100%" id="main"> <div style="width: 100%;height: 100%" id="main">
@ -119,14 +119,25 @@ export default {
option : { option : {
title: { title: {
text: '浓度/Gas Concentration', text: '浓度/Gas Concentration',
left: 'center'
left: 'center',
textStyle:{
color: '#2f82d7',
}
}, },
color: ['#2f82d7'], color: ['#2f82d7'],
xAxis: { xAxis: {
data: ['1#', '2#', '3#', '4#', '5#', '6#', '7#'] data: ['1#', '2#', '3#', '4#', '5#', '6#', '7#']
}, },
yAxis: { yAxis: {
type: 'value'
type: 'value',
min:0,
max:30,
interval:5,
axisLabel: {
formatter: function (value, index) {
return value + "%";
}
}
}, },
series: [ series: [
{ {
@ -137,10 +148,10 @@ export default {
data : [ data : [
{ {
yAxis : 16, yAxis : 16,
name : '下限/Lower 16'
name : '下限/Lower 16%'
}, { }, {
yAxis : 20, yAxis : 20,
name : '上限/Upper 20'
name : '上限/Upper 20%'
} }
], ],
label : { label : {
@ -192,6 +203,9 @@ export default {
if (data && data.code === 0){ if (data && data.code === 0){
if (this.dataList.length !== 0){ if (this.dataList.length !== 0){
this.dataList = data.rows; this.dataList = data.rows;
if (!this.times){
this.newTime = new Date(data.time);
}
this.initCharts(); this.initCharts();
return return
} }
@ -219,10 +233,10 @@ export default {
this.option.series[0].markLine.data = [ this.option.series[0].markLine.data = [
{ {
yAxis : val[0].minValue, yAxis : val[0].minValue,
name : `下限/Lower ${val[0].minValue}`
name : `下限/Lower ${val[0].minValue} %`
}, { }, {
yAxis : val[0].maxValue, yAxis : val[0].maxValue,
name : `上限/Lower ${val[0].maxValue}`
name : `上限/Lower ${val[0].maxValue} %`
} }
] ]
} }
@ -233,6 +247,9 @@ export default {
}, },
created() { created() {
this.getDataList(); this.getDataList();
this.times = setInterval(() => {
this.getDataList();
}, 1000 * 30);
}, },
mounted() { mounted() {
this.initCharts(); this.initCharts();
@ -244,12 +261,16 @@ export default {
if (this.timer){ if (this.timer){
clearInterval(this.timer) clearInterval(this.timer)
} }
if (this.times){
clearInterval(this.times)
}
} }
} }
</script> </script>
<style scoped> <style scoped>
.echarts{ .echarts{
margin-top: 10px;
height:100vh; height:100vh;
padding: 5px; padding: 5px;
} }
@ -263,28 +284,30 @@ export default {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 62%
width: 64%
} }
.pie_right{ .pie_right{
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 48%
width: 46%
} }
.pie_content{ .pie_content{
height: 15%; height: 15%;
text-align: center; text-align: center;
padding: 10px;
line-height: 1.5
padding: 0;
line-height: 1
} }
.pie_footer{ .pie_footer{
margin-top: 1%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
.pie_chart{ .pie_chart{
height: 70%;
margin-top: 2%;
height: 65%;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;

Write Preview
Loading…
Cancel
Save