mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

更新

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/dashboard/allDashboard/index-model.vue
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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</span>
</div> </div>
</div> </div>

82
src/views/dashboard/allDashboard/index.vue
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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</span>
</div> </div>
</div> </div>
@ -260,7 +276,7 @@ export default {
} else { } else {
this.permission = false; this.permission = false;
} }
this.initWebSocket(); this.initWebSocket();
}); });
}, },
destroy() { destroy() {
@ -352,37 +368,37 @@ 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) {
@ -525,7 +541,7 @@ export default {
padding-top: 12px; padding-top: 12px;
padding-left: 12px; padding-left: 12px;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.middle2-right { .middle2-right {
font-weight: 600; font-weight: 600;

13
src/views/dashboard/coldDashboard/index-model.vue
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; this.initWebSocket();
getUserProfile().then((response) => {
const user = response.data;
if (user.roles[0].name !== 'dashborad') {
this.permission = true;
} else {
this.permission = false;
}
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);

161
src/views/dashboard/coldDashboard/index.vue
View File

@ -1,16 +1,23 @@
<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"
<KHeader ref="coldContainerB"
style="width: 100%; height: 100%">
<div
id="coldContainer"
class="coldContainer"
style="width: 1920px; height: 1080px"
:style="{ transform: 'scale(' + scaleNum + ')' }">
<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>
<script> <script>
import KHeader from '../components/Header'; import KHeader from '../components/Header';
@ -19,38 +26,28 @@ import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce'; import { debounce } from '@/utils/debounce';
import { getUserProfile } from '@/api/system/user'; import { getUserProfile } from '@/api/system/user';
export default { 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; this.initWebSocket();
getUserProfile().then((response) => {
const user = response.data;
if (user.roles[0].name !== 'dashborad') {
this.permission = true;
} else {
this.permission = false;
}
this.initWebSocket();
});
}, },
mounted() { mounted() {
this.boxReset(); this.boxReset();
window.addEventListener('resize', this.boxReset); window.addEventListener('resize', this.boxReset);
}, },
@ -58,13 +55,13 @@ export default {
window.removeEventListener('resize', this.boxReset); window.removeEventListener('resize', this.boxReset);
this.websocketclose(); this.websocketclose();
}, },
methods: { methods: {
boxReset() { boxReset() {
debounce(() => { debounce(() => {
this.resetSize(); this.resetSize();
}, 300)(); }, 300)();
}, },
change() { change() {
this.isFullScreen = screenfull.isFullscreen; this.isFullScreen = screenfull.isFullscreen;
}, },
init() { init() {
@ -77,7 +74,7 @@ export default {
screenfull.off('change', this.change); screenfull.off('change', this.change);
} }
}, },
// 全屏 // 全屏
screenfullChange() { screenfullChange() {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
this.$message({ this.$message({
@ -88,10 +85,8 @@ 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,41 +154,41 @@ 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;
font-size: 16px; font-size: 16px;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
background: url(../assets/bg1.png) no-repeat; background: url(../assets/bg1.png) no-repeat;
background-size: cover; background-size: cover;
background-position: 0 0; background-position: 0 0;
overflow: auto; overflow: auto;
.box1 { .box1 {
position: absolute; position: absolute;
top: 141px; top: 141px;
left: 40px; left: 40px;
} }
.box2 { .box2 {
position: absolute; position: absolute;
top: 141px; top: 141px;
right: 40px; right: 40px;
} }
.box3 { .box3 {
position: absolute; position: absolute;
bottom: 66px; bottom: 66px;
left: 40px; left: 40px;
} }
.box4 { .box4 {
position: absolute; position: absolute;
bottom: 66px; bottom: 66px;
right: 40px; right: 40px;
} }
} }
</style> </style>

6
src/views/dashboard/rawDashboard/index-model.vue
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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</span>
</div> </div>
</div> </div>

6
src/views/dashboard/rawDashboard/index.vue
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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</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/m³</span> <span style="font-size: 14px; line-height: 43px">mg/m³</span>
</div> </div>
</div> </div>