更新
This commit is contained in:
parent
755fe3adab
commit
d4495e97f1
@ -26,22 +26,36 @@
|
||||
<div class="main-body">
|
||||
<div style="flex: 3" class="bz25-1"></div>
|
||||
<div style="flex: 5" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topNum">
|
||||
{{
|
||||
topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{ Number(topData.yestodayRatio).toFixed(1) }}%
|
||||
{{
|
||||
topData.yestodayRatio
|
||||
? Number(topData.yestodayRatio).toFixed(1)
|
||||
: '-'
|
||||
}}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
|
||||
<div class="topNum">
|
||||
{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
|
||||
</div>
|
||||
<div class="topText">本月总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-5 bz-top">
|
||||
<div class="topNum">
|
||||
{{ Number(topData.monthAreaCost).toFixed(1) }}
|
||||
{{
|
||||
topData.monthAreaCost
|
||||
? Number(topData.monthAreaCost).toFixed(1)
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
@ -81,7 +95,7 @@
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,7 +105,7 @@
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,7 +115,7 @@
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,22 +26,36 @@
|
||||
<div class="main-body">
|
||||
<div style="flex: 3" class="bz25-1"></div>
|
||||
<div style="flex: 5" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topNum">
|
||||
{{
|
||||
topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{ Number(topData.yestodayRatio).toFixed(1) }}%
|
||||
{{
|
||||
topData.yestodayRatio
|
||||
? Number(topData.yestodayRatio).toFixed(1)
|
||||
: '-'
|
||||
}}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
|
||||
<div class="topNum">
|
||||
{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
|
||||
</div>
|
||||
<div class="topText">本月总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-5 bz-top">
|
||||
<div class="topNum">
|
||||
{{ Number(topData.monthAreaCost).toFixed(1) }}
|
||||
{{
|
||||
topData.monthAreaCost
|
||||
? Number(topData.monthAreaCost).toFixed(1)
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
@ -73,13 +87,15 @@
|
||||
margin: 10px 30px;
|
||||
gap: 12px;
|
||||
">
|
||||
<div class="yanqi" style="width: 566px;">
|
||||
<div class="content middle2-left" style="margin-left: 50px;width: 210px;">
|
||||
<div class="yanqi" style="width: 566px">
|
||||
<div
|
||||
class="content middle2-left"
|
||||
style="margin-left: 50px; width: 210px">
|
||||
<el-image class="imageClass" :src="imgUrl.so2"></el-image>
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -89,7 +105,7 @@
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,7 +115,7 @@
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -352,37 +368,37 @@ export default {
|
||||
// 数据接收
|
||||
if ('factoryState' in dataJson) {
|
||||
this.topData = dataJson.factoryState;
|
||||
if(!this.permission){
|
||||
this.topData.monthAreaCost = '***'
|
||||
this.topData.monthSum = '***'
|
||||
this.topData.yestodaySum = '***'
|
||||
if (!this.permission) {
|
||||
this.topData.monthAreaCost = '***';
|
||||
this.topData.monthSum = '***';
|
||||
this.topData.yestodaySum = '***';
|
||||
}
|
||||
}
|
||||
if ('factoryCostTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.factoryCostTableList;
|
||||
if(!this.permission){
|
||||
this.tableData1.forEach(item=>{
|
||||
item.priceS = null
|
||||
item.matPriceS = null
|
||||
item.energyPriceS = null
|
||||
item.otherPriceS = null
|
||||
item.areaPriceS = null
|
||||
})
|
||||
if (!this.permission) {
|
||||
this.tableData1.forEach((item) => {
|
||||
item.priceS = null;
|
||||
item.matPriceS = null;
|
||||
item.energyPriceS = null;
|
||||
item.otherPriceS = null;
|
||||
item.areaPriceS = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('factoryEnergyTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.factoryEnergyTableList;
|
||||
if(!this.permission){
|
||||
this.tableData2.forEach(item=>{
|
||||
item.price = null
|
||||
})
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.price = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('factoryCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.factoryCostTrendList;
|
||||
this.$nextTick(()=>{
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
|
||||
@ -35,7 +35,6 @@ export default {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 1,
|
||||
permission: false,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
line1: {},
|
||||
@ -46,16 +45,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
@ -133,7 +123,6 @@ export default {
|
||||
console.log('websocket: [unable to msgData] : ', e.data);
|
||||
}
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
if (!this.permission) return;
|
||||
msgData.originRatioTables &&
|
||||
msgData.originRatioTables.forEach((item) => {
|
||||
item.lineName.includes('1') && (this.line1 = item);
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<div id="coldContainerB" ref="coldContainerB" style="width: 100%; height: 100%">
|
||||
<div id="coldContainer" class="coldContainer" style="width: 1920px; height: 1080px" :style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<div
|
||||
id="coldContainerB"
|
||||
ref="coldContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="coldContainer"
|
||||
class="coldContainer"
|
||||
style="width: 1920px; height: 1080px"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
topTitle="自贡冷端数据看板" />
|
||||
<DataBox title='原片产线1' position='lt' :msgData='line1' class="box1"/>
|
||||
<DataBox title='原片产线2' position='rt' :msgData='line2' class="box2"/>
|
||||
<DataBox title='原片产线3' position='lb' :msgData='line3' class="box3"/>
|
||||
<DataBox title='原片产线4' position='rb' :msgData='line4' class="box4"/>
|
||||
<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
|
||||
<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
|
||||
<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
|
||||
<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -22,33 +29,23 @@ export default {
|
||||
name: 'ColdDashboard',
|
||||
components: {
|
||||
KHeader,
|
||||
DataBox
|
||||
DataBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum:1,
|
||||
permission: false,
|
||||
scaleNum: 1,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
line1:{},
|
||||
line2:{},
|
||||
line3:{},
|
||||
line4:{}
|
||||
}
|
||||
line1: {},
|
||||
line2: {},
|
||||
line3: {},
|
||||
line4: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
@ -89,9 +86,7 @@ export default {
|
||||
screenfull.toggle(this.$refs.coldContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let coldContainerBox = document.getElementById(
|
||||
'coldContainer'
|
||||
);
|
||||
let coldContainerBox = document.getElementById('coldContainer');
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(coldContainerBox.style.width);
|
||||
@ -131,20 +126,20 @@ export default {
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let msgData = e.data
|
||||
let msgData = e.data;
|
||||
try {
|
||||
msgData = JSON.parse(e.data);
|
||||
} catch (error) {
|
||||
console.log("websocket: [unable to msgData] : ", e.data);
|
||||
console.log('websocket: [unable to msgData] : ', e.data);
|
||||
}
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
if (!this.permission) return
|
||||
msgData.originRatioTables && msgData.originRatioTables.forEach((item) => {
|
||||
msgData.originRatioTables &&
|
||||
msgData.originRatioTables.forEach((item) => {
|
||||
item.lineName.includes('1') && (this.line1 = item);
|
||||
item.lineName.includes('2') && (this.line2 = item);
|
||||
item.lineName.includes('3') && (this.line3 = item);
|
||||
item.lineName.includes('4') && (this.line4 = item);
|
||||
})
|
||||
});
|
||||
},
|
||||
websocketsend() {
|
||||
// 数据发送
|
||||
@ -159,10 +154,10 @@ export default {
|
||||
this.websock.close();
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.coldContainer {
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,7 +99,7 @@
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,7 +109,7 @@
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,7 +93,7 @@
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -103,7 +103,7 @@
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user