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

2024-06-21

master
zelian_wu 2 years ago
parent
165d67f943
commit
1930bd2d8a
4 changed files with 88 additions and 51 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. BIN
      src/assets/img/ccl_logo.png
  2. 139
      src/views/modules/cdc/collectScreen.vue
  3. BIN
      static/img/ccl_logo.png
  4. BIN
      static/img/collect.jpg

BIN
src/assets/img/ccl_logo.png
View File

Side by Side

After

Width: 6741  |  Height: 2933  |  Size: 213 KiB

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

@ -1,13 +1,13 @@
<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: 20%"><img style="max-width: 30%;max-height: 100%;vertical-align:middle;" src="~@/assets/img/ccl.png" ></div>
<div style="width: 20%"><img style="max-width: 30%;max-height: 100%;vertical-align:middle;" src="../../../../static/img/ccl_logo.png" ></div>
<div style="width: 50%;text-align: center;font-size: 24px;font-weight: 400">CCL Coating 监控大屏/Monitor Platform</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="12" :offset="12"> <el-col :span="12" :offset="12">
<div>当前时间/Time:</div> <div>当前时间/Time:</div>
<div>{{dateFormat(this.newTime)}}</div>
<div>{{dateFormat(newTime)}}</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -20,13 +20,13 @@
<div class="pie_content" > <div class="pie_content" >
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/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;font-size: 10px">
<div v-for="item in line1"> <div v-for="item in line1">
<div> <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.itemValue >= item.maxValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height: 45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer"> <div class="pie_content pie_footer">
@ -38,18 +38,18 @@
<div class="pie_content" > <div class="pie_content" >
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/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;font-size: 10px">
<div v-for="item in lineGC1"> <div v-for="item in lineGC1">
<div> <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.itemValue >= item.maxValue || item.itemValue <= item.minValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height: 45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer" style="margin-top: 2%"> <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>上限/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>下限/Lower <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span>%</div>-->
</div> </div>
</div> </div>
</div> </div>
@ -61,13 +61,13 @@
<div class="pie_content"> <div class="pie_content">
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/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;font-size: 10px">
<div v-for="item in line2"> <div v-for="item in line2">
<div > <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.itemValue >= item.maxValue )?'red':'#ccc'};width: 60px;height:60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height:45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer"> <div class="pie_content pie_footer">
@ -79,25 +79,25 @@
<div class="pie_content"> <div class="pie_content">
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/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;font-size: 10px">
<div v-for="item in lineGC2"> <div v-for="item in lineGC2">
<div > <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.itemValue >= item.maxValue || item.itemValue <= item.minValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
<div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height:45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
</div> </div>
</div> </div>
<div class="pie_content pie_footer" style="margin-top: 2%">
<div class="pie_content pie_footer" style="margin-top: 5px">
<div>上限/Upper <span v-if="lineGC2.length !== 0">{{lineGC2[0].maxValue}}</span><span v-else>0</span>%</div> <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>下限/Lower <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>-->
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
配胶间/Mixing Room 配胶间/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: 31%">
<div style="width: 100%;height: 100%" id="main"> <div style="width: 100%;height: 100%" id="main">
</div> </div>
@ -113,54 +113,86 @@ export default {
name: 'collectScreen', name: 'collectScreen',
data(){ data(){
return{ return{
newTime:new Date(),
newTime:null,
dataList:[], dataList:[],
timeNum:null,
option : { option : {
title: { title: {
text: '浓度/Gas Concentration', text: '浓度/Gas Concentration',
left: 'center', left: 'center',
textStyle:{ textStyle:{
color: '#2f82d7', color: '#2f82d7',
fontWeight:'normal',
fontSize:12
} }
}, },
grid:{
top:'14%',
left:'5%',
right:'12%',
},
color: ['#2f82d7'], color: ['#2f82d7'],
xAxis: { xAxis: {
data: ['1#', '2#', '3#', '4#', '5#', '6#', '7#']
data: ['1#', '2#', '3#', '4#', '5#', '6#', '7#'],
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
},
},
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
min:0, min:0,
max:30, max:30,
interval:5, interval:5,
axisLabel: { axisLabel: {
textStyle: {
color: "#fff",
margin: 15
},
formatter: function (value, index) { formatter: function (value, index) {
return value + "%"; return value + "%";
} }
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
},
},
}, },
series: [ series: [
{ {
type: 'bar', type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25], data: [23, 24, 18, 25, 27, 28, 25],
barWidth: '20%', barWidth: '20%',
label: {
show: true,
position: 'top'
},
markLine:{ markLine:{
data : [ data : [
// {
// yAxis : 16,
// name : '下限/Lower 16%'
// },
{ {
yAxis : 16,
name : '下限/Lower 16%'
}, {
yAxis : 20, yAxis : 20,
name : '上限/Upper 20%' name : '上限/Upper 20%'
} }
], ],
label : {
normal : {
formatter :function (param) {
return param.name;
}
},
},
label:{
normal: {
show: true,
formatter: '2020年目标',
}
}
} }
} }
], ],
@ -201,22 +233,16 @@ export default {
} }
selectCollectRecordByItemList(params).then(({data})=>{ selectCollectRecordByItemList(params).then(({data})=>{
if (data && data.code === 0){ if (data && data.code === 0){
if (this.dataList.length !== 0){
this.dataList = data.rows;
if (!this.times){
this.newTime = new Date(data.time);
}
this.initCharts();
return
}
this.dataList = data.rows; this.dataList = data.rows;
this.timeNum = data.time;
this.initCharts();
} }
}).catch((error)=>{ }).catch((error)=>{
this.$message.error(error) this.$message.error(error)
}) })
}, },
dateFormat(){
return dayjs().format("YYYY-MM-DD HH:mm:ss")
dateFormat(date){
return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
}, },
initCharts(){ initCharts(){
let myChart = this.$echarts.init(document.getElementById('main')); let myChart = this.$echarts.init(document.getElementById('main'));
@ -231,14 +257,16 @@ export default {
this.option.series[0].data = val.map(item=>item.itemValue) this.option.series[0].data = val.map(item=>item.itemValue)
if (val.length !== 0){ if (val.length !== 0){
this.option.series[0].markLine.data = [ this.option.series[0].markLine.data = [
// {
// yAxis : val[0].minValue,
// name : `下限/Lower ${val[0].minValue} %`
// },
{ {
yAxis : 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} %`
} }
] ]
this.option.series[0].markLine.label.normal.formatter = `上限/Upper ${val[0].maxValue}%`
} }
this.option.xAxis = val.map(item=>item.deviceDesc) this.option.xAxis = val.map(item=>item.deviceDesc)
this.initCharts() this.initCharts()
@ -254,8 +282,9 @@ export default {
mounted() { mounted() {
this.initCharts(); this.initCharts();
this.timer = setInterval(()=>{ this.timer = setInterval(()=>{
this.newTime = new Date()
})
this.timeNum += 1000;
this.newTime = new Date(this.timeNum);
},1000)
}, },
beforeDestroy() { beforeDestroy() {
if (this.timer){ if (this.timer){
@ -270,28 +299,34 @@ export default {
<style scoped> <style scoped>
.echarts{ .echarts{
margin-top: 10px;
height:100vh; height:100vh;
padding: 5px;
//background: url(../../../../static/img/collect.jpg) no-repeat center/130%;
background: rgb(17,24,34);
padding: 10px 5px 5px;
color: #fff;
} }
.pie{ .pie{
display: flex;
gap: 10px;
display: grid;
//gap: 20px;
height: 28%; height: 28%;
grid-gap: 10px;
//grid-template-columns: repeat(2, auto);
grid-template-columns: 63% 36%;
} }
.pie_left{ .pie_left{
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 64%
//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: 46%
//width: 44%
} }
.pie_content{ .pie_content{
height: 15%; height: 15%;
@ -304,9 +339,11 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
font-size: 10px;
} }
.pie_chart{ .pie_chart{
margin-top: 2%;
//margin-top: 2%;
margin-top: 3px;
height: 65%; height: 65%;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;

BIN
static/img/ccl_logo.png
View File

Side by Side

After

Width: 698  |  Height: 304  |  Size: 6.6 KiB

BIN
static/img/collect.jpg
View File

Side by Side

After

Width: 10016  |  Height: 6688  |  Size: 1.1 MiB

Write Preview
Loading…
Cancel
Save