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
Split 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>
<div class="echarts">
<div class="echarts" >
<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: 30%;font-size: 13px">
<el-row>
<el-col :span="12" :offset="12">
<div>当前时间/Time:</div>
<div>{{dateFormat(this.newTime)}}</div>
<div>{{dateFormat(newTime)}}</div>
</el-col>
</el-row>
</div>
@ -20,13 +20,13 @@
<div class="pie_content" >
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
</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>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</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 class="pie_content pie_footer">
@ -38,18 +38,18 @@
<div class="pie_content" >
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
</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>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</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 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>下限/Lower <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span>%</div>-->
</div>
</div>
</div>
@ -61,13 +61,13 @@
<div class="pie_content">
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
</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 >
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</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 class="pie_content pie_footer">
@ -79,25 +79,25 @@
<div class="pie_content">
<span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
</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 >
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</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 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>下限/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 class="content">
配胶间/Mixing Room
</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>
@ -113,54 +113,86 @@ export default {
name: 'collectScreen',
data(){
return{
newTime:new Date(),
newTime:null,
dataList:[],
timeNum:null,
option : {
title: {
text: '浓度/Gas Concentration',
left: 'center',
textStyle:{
color: '#2f82d7',
fontWeight:'normal',
fontSize:12
}
},
grid:{
top:'14%',
left:'5%',
right:'12%',
},
color: ['#2f82d7'],
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: {
type: 'value',
min:0,
max:30,
interval:5,
axisLabel: {
textStyle: {
color: "#fff",
margin: 15
},
formatter: function (value, index) {
return value + "%";
}
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
},
},
},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25],
barWidth: '20%',
label: {
show: true,
position: 'top'
},
markLine:{
data : [
// {
// yAxis : 16,
// name : '下限/Lower 16%'
// },
{
yAxis : 16,
name : '下限/Lower 16%'
}, {
yAxis : 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})=>{
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.timeNum = data.time;
this.initCharts();
}
}).catch((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(){
let myChart = this.$echarts.init(document.getElementById('main'));
@ -231,14 +257,16 @@ export default {
this.option.series[0].data = val.map(item=>item.itemValue)
if (val.length !== 0){
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,
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.initCharts()
@ -254,8 +282,9 @@ export default {
mounted() {
this.initCharts();
this.timer = setInterval(()=>{
this.newTime = new Date()
})
this.timeNum += 1000;
this.newTime = new Date(this.timeNum);
},1000)
},
beforeDestroy() {
if (this.timer){
@ -270,28 +299,34 @@ export default {
<style scoped>
.echarts{
margin-top: 10px;
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{
display: flex;
gap: 10px;
display: grid;
//gap: 20px;
height: 28%;
grid-gap: 10px;
//grid-template-columns: repeat(2, auto);
grid-template-columns: 63% 36%;
}
.pie_left{
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
width: 64%
//width: 64%
}
.pie_right{
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
width: 46%
//width: 44%
}
.pie_content{
height: 15%;
@ -304,9 +339,11 @@ export default {
display: flex;
align-items: center;
justify-content: space-around;
font-size: 10px;
}
.pie_chart{
margin-top: 2%;
//margin-top: 2%;
margin-top: 3px;
height: 65%;
display: flex;
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