This commit is contained in:
朱文强 2025-07-03 11:08:05 +08:00
parent 755fe3adab
commit d4495e97f1
6 changed files with 155 additions and 141 deletions

View File

@ -26,22 +26,36 @@
<div class="main-body"> <div class="main-body">
<div style="flex: 3" class="bz25-1"></div> <div style="flex: 3" class="bz25-1"></div>
<div style="flex: 5" class="bz25-2 bz-top"> <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 class="topText">昨日总成本/万元</div>
</div> </div>
<div style="flex: 5" class="bz25-3 bz-top"> <div style="flex: 5" class="bz25-3 bz-top">
<div class="topNum" style="margin-left: 50px"> <div class="topNum" style="margin-left: 50px">
{{ Number(topData.yestodayRatio).toFixed(1) }}% {{
topData.yestodayRatio
? Number(topData.yestodayRatio).toFixed(1)
: '-'
}}%
</div> </div>
<div class="topText">昨日良品率</div> <div class="topText">昨日良品率</div>
</div> </div>
<div style="flex: 5" class="bz25-4 bz-top"> <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 class="topText">本月总成本/万元</div>
</div> </div>
<div style="flex: 5" class="bz25-5 bz-top"> <div style="flex: 5" class="bz25-5 bz-top">
<div class="topNum"> <div class="topNum">
{{ Number(topData.monthAreaCost).toFixed(1) }} {{
topData.monthAreaCost
? Number(topData.monthAreaCost).toFixed(1)
: '-'
}}
</div> </div>
<div class="topText">本月每平米总成本/</div> <div class="topText">本月每平米总成本/</div>
</div> </div>
@ -81,7 +95,7 @@
二氧化硫 排放浓度 二氧化硫 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -91,7 +105,7 @@
粉尘排放 粉尘排放
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -101,7 +115,7 @@
氮氧化物 排放浓度 氮氧化物 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>

View File

@ -26,22 +26,36 @@
<div class="main-body"> <div class="main-body">
<div style="flex: 3" class="bz25-1"></div> <div style="flex: 3" class="bz25-1"></div>
<div style="flex: 5" class="bz25-2 bz-top"> <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 class="topText">昨日总成本/万元</div>
</div> </div>
<div style="flex: 5" class="bz25-3 bz-top"> <div style="flex: 5" class="bz25-3 bz-top">
<div class="topNum" style="margin-left: 50px"> <div class="topNum" style="margin-left: 50px">
{{ Number(topData.yestodayRatio).toFixed(1) }}% {{
topData.yestodayRatio
? Number(topData.yestodayRatio).toFixed(1)
: '-'
}}%
</div> </div>
<div class="topText">昨日良品率</div> <div class="topText">昨日良品率</div>
</div> </div>
<div style="flex: 5" class="bz25-4 bz-top"> <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 class="topText">本月总成本/万元</div>
</div> </div>
<div style="flex: 5" class="bz25-5 bz-top"> <div style="flex: 5" class="bz25-5 bz-top">
<div class="topNum"> <div class="topNum">
{{ Number(topData.monthAreaCost).toFixed(1) }} {{
topData.monthAreaCost
? Number(topData.monthAreaCost).toFixed(1)
: '-'
}}
</div> </div>
<div class="topText">本月每平米总成本/</div> <div class="topText">本月每平米总成本/</div>
</div> </div>
@ -73,13 +87,15 @@
margin: 10px 30px; margin: 10px 30px;
gap: 12px; gap: 12px;
"> ">
<div class="yanqi" style="width: 566px;"> <div class="yanqi" style="width: 566px">
<div class="content middle2-left" style="margin-left: 50px;width: 210px;"> <div
class="content middle2-left"
style="margin-left: 50px; width: 210px">
<el-image class="imageClass" :src="imgUrl.so2"></el-image> <el-image class="imageClass" :src="imgUrl.so2"></el-image>
二氧化硫 排放浓度 二氧化硫 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -89,7 +105,7 @@
粉尘排放 粉尘排放
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -99,7 +115,7 @@
氮氧化物 排放浓度 氮氧化物 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -353,36 +369,36 @@ export default {
if ('factoryState' in dataJson) { if ('factoryState' in dataJson) {
this.topData = dataJson.factoryState; this.topData = dataJson.factoryState;
if (!this.permission) { if (!this.permission) {
this.topData.monthAreaCost = '***' this.topData.monthAreaCost = '***';
this.topData.monthSum = '***' this.topData.monthSum = '***';
this.topData.yestodaySum = '***' this.topData.yestodaySum = '***';
} }
} }
if ('factoryCostTableList' in dataJson) { if ('factoryCostTableList' in dataJson) {
this.tableData1 = dataJson.factoryCostTableList; this.tableData1 = dataJson.factoryCostTableList;
if (!this.permission) { if (!this.permission) {
this.tableData1.forEach(item=>{ this.tableData1.forEach((item) => {
item.priceS = null item.priceS = null;
item.matPriceS = null item.matPriceS = null;
item.energyPriceS = null item.energyPriceS = null;
item.otherPriceS = null item.otherPriceS = null;
item.areaPriceS = null item.areaPriceS = null;
}) });
} }
} }
if ('factoryEnergyTableList' in dataJson) { if ('factoryEnergyTableList' in dataJson) {
this.tableData2 = dataJson.factoryEnergyTableList; this.tableData2 = dataJson.factoryEnergyTableList;
if (!this.permission) { if (!this.permission) {
this.tableData2.forEach(item=>{ this.tableData2.forEach((item) => {
item.price = null item.price = null;
}) });
} }
} }
if ('factoryCostTrendList' in dataJson) { if ('factoryCostTrendList' in dataJson) {
this.echartData = dataJson.factoryCostTrendList; this.echartData = dataJson.factoryCostTrendList;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.chartRef.initChart(!this.permission); this.$refs.chartRef.initChart(!this.permission);
}) });
} }
}, },
websocketsend(val) { websocketsend(val) {

View File

@ -35,7 +35,6 @@ export default {
return { return {
isFullScreen: false, isFullScreen: false,
scaleNum: 1, scaleNum: 1,
permission: false,
url: process.env.VUE_APP_WS_API, url: process.env.VUE_APP_WS_API,
websock: '', websock: '',
line1: {}, line1: {},
@ -46,16 +45,7 @@ export default {
}, },
created() { created() {
this.init(); 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(); this.initWebSocket();
});
}, },
mounted() { mounted() {
this.boxReset(); this.boxReset();
@ -133,7 +123,6 @@ export default {
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 (!Object.prototype.toString.call(msgData).includes('Object')) return;
if (!this.permission) return;
msgData.originRatioTables && msgData.originRatioTables &&
msgData.originRatioTables.forEach((item) => { msgData.originRatioTables.forEach((item) => {
item.lineName.includes('1') && (this.line1 = item); item.lineName.includes('1') && (this.line1 = item);

View File

@ -1,14 +1,21 @@
<template> <template>
<div id="coldContainerB" ref="coldContainerB" style="width: 100%; height: 100%"> <div
<div id="coldContainer" class="coldContainer" style="width: 1920px; height: 1080px" :style="{ transform: 'scale(' + scaleNum + ')' }"> id="coldContainerB"
ref="coldContainerB"
style="width: 100%; height: 100%">
<div
id="coldContainer"
class="coldContainer"
style="width: 1920px; height: 1080px"
:style="{ transform: 'scale(' + scaleNum + ')' }">
<KHeader <KHeader
:isFullScreen="isFullScreen" :isFullScreen="isFullScreen"
@screenfullChange="screenfullChange" @screenfullChange="screenfullChange"
topTitle="自贡冷端数据看板" /> topTitle="自贡冷端数据看板" />
<DataBox title='原片产线1' position='lt' :msgData='line1' class="box1"/> <DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
<DataBox title='原片产线2' position='rt' :msgData='line2' class="box2"/> <DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
<DataBox title='原片产线3' position='lb' :msgData='line3' class="box3"/> <DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
<DataBox title='原片产线4' position='rb' :msgData='line4' class="box4"/> <DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
</div> </div>
</div> </div>
</template> </template>
@ -22,33 +29,23 @@ export default {
name: 'ColdDashboard', name: 'ColdDashboard',
components: { components: {
KHeader, KHeader,
DataBox DataBox,
}, },
data() { data() {
return { return {
isFullScreen: false, isFullScreen: false,
scaleNum: 1, scaleNum: 1,
permission: false,
url: process.env.VUE_APP_WS_API, url: process.env.VUE_APP_WS_API,
websock: '', websock: '',
line1: {}, line1: {},
line2: {}, line2: {},
line3: {}, line3: {},
line4:{} line4: {},
} };
}, },
created() { created() {
this.init(); 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(); this.initWebSocket();
});
}, },
mounted() { mounted() {
this.boxReset(); this.boxReset();
@ -89,9 +86,7 @@ export default {
screenfull.toggle(this.$refs.coldContainerB); screenfull.toggle(this.$refs.coldContainerB);
}, },
resetSize() { resetSize() {
let coldContainerBox = document.getElementById( let coldContainerBox = document.getElementById('coldContainer');
'coldContainer'
);
let rw = parseFloat(window.innerWidth); let rw = parseFloat(window.innerWidth);
let rh = parseFloat(window.innerHeight); let rh = parseFloat(window.innerHeight);
let bw = parseFloat(coldContainerBox.style.width); let bw = parseFloat(coldContainerBox.style.width);
@ -131,20 +126,20 @@ export default {
this.initWebSocket(); this.initWebSocket();
}, },
websocketonmessage(e) { websocketonmessage(e) {
let msgData = e.data let msgData = e.data;
try { try {
msgData = JSON.parse(e.data); msgData = JSON.parse(e.data);
} catch (error) { } 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 (!Object.prototype.toString.call(msgData).includes('Object')) return;
if (!this.permission) return msgData.originRatioTables &&
msgData.originRatioTables && msgData.originRatioTables.forEach((item) => { msgData.originRatioTables.forEach((item) => {
item.lineName.includes('1') && (this.line1 = item); item.lineName.includes('1') && (this.line1 = item);
item.lineName.includes('2') && (this.line2 = item); item.lineName.includes('2') && (this.line2 = item);
item.lineName.includes('3') && (this.line3 = item); item.lineName.includes('3') && (this.line3 = item);
item.lineName.includes('4') && (this.line4 = item); item.lineName.includes('4') && (this.line4 = item);
}) });
}, },
websocketsend() { websocketsend() {
// //
@ -159,10 +154,10 @@ export default {
this.websock.close(); this.websock.close();
console.log('断开连接', e); console.log('断开连接', e);
}, },
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.coldContainer { .coldContainer {
position: absolute; position: absolute;
transform-origin: 16px 8px; transform-origin: 16px 8px;

View File

@ -89,7 +89,7 @@
二氧化硫 排放浓度 二氧化硫 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -99,7 +99,7 @@
粉尘排放 粉尘排放
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -109,7 +109,7 @@
氮氧化物 排放浓度 氮氧化物 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>

View File

@ -83,7 +83,7 @@
二氧化硫 排放浓度 二氧化硫 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -93,7 +93,7 @@
粉尘排放 粉尘排放
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>
@ -103,7 +103,7 @@
氮氧化物 排放浓度 氮氧化物 排放浓度
</div> </div>
<div class="content middle2-right"> <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/</span> <span style="font-size: 14px; line-height: 43px">mg/</span>
</div> </div>
</div> </div>