<template> <div id="wholePlantContainerB" ref="wholePlantContainerB" style="width: 100%; height: 100%"> <div id="wholePlantContainer" ref="wholePlantContainer" class="wholePlantBoard" style=" position: absolute; transform-origin: 16px 8px; font-size: 16px; top: 0px; left: 0px; width: 1920px; height: 1080px; display: flex; flex-direction: column; gap: 24px; " :style="{ transform: 'scale(' + scaleNum + ')' }"> <KHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange" topTitle="自贡原片成本看板" /> <div class="main-body"> <div style="flex: 1" class="bz25-2 bz-top"> <div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div> <div class="topText">昨日总成本/万元</div> </div> <div style="flex: 1" class="bz25-3 bz-top"> <div class="topNum" style="margin-left: 50px">{{ Number(topData.yestodayRatio).toFixed(1) }}%</div> <div class="topText">昨日良品率</div> </div> <div style="flex: 1" class="bz25-5 bz-top"> <div class="topNum">{{ Number(topData.yestodayMat).toFixed(1) }}</div> <div class="topText">昨日原料成本/万元</div> </div> <div style="flex: 1" class="bz25-4 bz-top"> <div class="topNum">{{ Number(topData.monthOut).toFixed(1) }}</div> <div class="topText">本月原片产量/万m²</div> </div> <div style="flex: 1" class="bz25-7 bz-top"> <div class="topNum">{{ Number(topData.monthMat).toFixed(1) }}</div> <div class="topText">本月原料成本/万元</div> </div> <div style="flex: 1" class="bz25-8 bz-top"> <div class="topNum">{{ Number(topData.monthAreaCost).toFixed(1) }}</div> <div class="topText">本月每平米总成本/元</div> </div> </div> <div class="main-body"> <div style="flex: 2" class="middle middle1"> <div class="title"> <svg-icon icon-class="energy" /> 能源统计 </div> <base-table :id="'table1'" style="margin: 5px 12px 12px 12px" :table-props="tableProps1" :table-data="tableData1" :height="230"></base-table> </div> <div style="flex: 1" class="middle middle2"> <div class="title"> <svg-icon icon-class="yanqi" /> 烟气处理 </div> <div style=" display: flex; flex-wrap: wrap; margin: 10px 30px; gap: 12px; "> <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) }} <span style="font-size: 14px; line-height: 43px">mg/m³</span> </div> </div> <div class="yanqi"> <div class="content middle2-left"> <el-image class="imageClass" :src="imgUrl.fc"></el-image> 粉尘排放 </div> <div class="content middle2-right"> {{ Number(topData.fc).toFixed(1) }} <span style="font-size: 14px; line-height: 43px">mg/m³</span> </div> </div> <div class="yanqi"> <div class="content middle2-left"> <el-image class="imageClass" :src="imgUrl.no"></el-image> 氮氧化物 排放浓度 </div> <div class="content middle2-right"> {{ Number(topData.no).toFixed(1) }} <span style="font-size: 14px; line-height: 43px">mg/m³</span> </div> </div> </div> </div> </div> <div class="main-body"> <div style="flex: 2" class="footer footer1"> <div class="title"> <svg-icon icon-class="costchart" /> 近12个月成本 · 产量趋势 </div> <bar-chart ref="chartRef" style="margin-top: -50px" :echart-data="echartData"></bar-chart> </div> <div style="flex: 1" class="footer footer2"> <div class="title"> <svg-icon icon-class="cost" /> 成本及产量统计 </div> <base-table :id="'table2'" style="margin: 5px 12px 12px 12px" :table-props="tableProps2" :table-data="tableData2" :height="310"></base-table> </div> </div> </div> </div> </template> <script> import KHeader from '../components/Header'; import screenfull from 'screenfull'; import { debounce } from '@/utils/debounce'; import baseTable from '../components/baseTable.vue'; import BarChart from './BarChart.vue'; const tableProps1 = [ { prop: 'title', label: '', align: 'center', }, { prop: 'elec', label: '电消耗量', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, { prop: 'elecPrice', label: '电总价', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, { prop: 'gas', label: '气消耗量', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, { prop: 'gasPrice', label: '气总价', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, { prop: 'price', label: '能源总价', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, ]; const tableProps2 = [ { prop: 'title', label: '', align: 'center', }, { prop: 'priceO', label: '成本/万元', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, { prop: 'outO', label: '产量/万m²', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, { prop: 'ratioO', label: '良品率', filter: (val) => (val != null ? Number(val).toFixed(1) : '-'), }, ]; export default { name: '', components: { KHeader, baseTable, BarChart, }, // provide() { // return { // resizeChart: null, // }; // }, data() { return { isFullScreen: false, scaleNum: 0.8, url: process.env.VUE_APP_WS_API, websock: '', topData: {}, imgUrl: { fc: require('@/views/dashboard/assets/fc.png'), no: require('@/views/dashboard/assets/NO.png'), so2: require('@/views/dashboard/assets/SO2.png'), }, tableProps1, tableData1: [], tableProps2, tableData2: [], echartData: [], }; }, created() { this.init(); this.initWebSocket(); }, destroy() { this.destroy(); }, mounted() { this.boxReset(); window.addEventListener('resize', this.boxReset); }, destroyed() { window.removeEventListener('resize', this.boxReset); }, methods: { boxReset() { debounce(() => { this.resetSize(); }, 300)(); }, change() { this.isFullScreen = screenfull.isFullscreen; }, init() { if (screenfull.isEnabled) { screenfull.on('change', this.change); } }, destroy() { if (screenfull.isEnabled) { screenfull.off('change', this.change); } }, // 全屏 screenfullChange() { if (!screenfull.isEnabled) { this.$message({ message: 'you browser can not work', type: 'warning', }); return false; } screenfull.toggle(this.$refs.wholePlantContainerB); }, resetSize() { let wholePlantContainerBox = document.getElementById( 'wholePlantContainer' ); let rw = parseFloat(window.innerWidth); let rh = parseFloat(window.innerHeight); let bw = parseFloat(wholePlantContainerBox.style.width); let bh = parseFloat(wholePlantContainerBox.style.height); let wx = 0; let hx = 0; if (screenfull.isFullscreen) { wx = rw / bw; hx = rh / bh; } else { if (this.$store.state.app.sidebar.opened) { wx = (rw - 280) / bw; hx = (rh - 116) / bh; } else { wx = (rw - 85) / bw; hx = (rh - 116) / bh; } } this.scaleNum = wx; }, initWebSocket() { // 初始化weosocket const path = `${this.url}/websocket/message?userId=2`; this.websock = new WebSocket(path); this.websock.onmessage = this.websocketonmessage; this.websock.onopen = this.websocketonopen; this.websock.onerror = this.websocketonerror; this.websock.onclose = this.websocketclose; }, websocketonopen() { // 连接建立之后执行send方法发送数据 this.websocketsend(); }, websocketonerror() { // 连接建立失败重连 this.initWebSocket(); }, websocketonmessage(e) { let dataJson = JSON.parse(e.data); console.log(dataJson); // 数据接收 if ('OriginState' in dataJson) { this.topData = dataJson.OriginState; } if ('OriginEnergyTableList' in dataJson) { this.tableData1 = dataJson.OriginEnergyTableList; } if ('OriginCostTableList' in dataJson) { this.tableData2 = dataJson.OriginCostTableList; } if ('OriginCostTrendList' in dataJson) { this.echartData = dataJson.OriginCostTrendList; this.$nextTick(()=>{ this.$refs.chartRef.initChart(); }) } }, websocketsend(val) { // 数据发送 this.websock.send(val); }, websocketclose(e) { // 关闭 console.log('断开连接', e); }, }, }; </script> <style scoped lang="scss"> .wholePlantBoard { background: url(../assets/bg1.png) no-repeat; background-size: cover; background-position: 0 0; overflow: auto; } .main-body { display: flex; gap: 20px; padding: 0px 16px; } .bz-top { text-align: center; } .bz25-2 { background: url(../assets/bz25-2.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; height: 147px; margin-top: -17px; } .bz25-3 { background: url(../assets/bz25-3.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; height: 147px; margin-top: -17px; } .bz25-4 { background: url(../assets/bz25-4.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; height: 147px; margin-top: -17px; } .bz25-5 { background: url(../assets/bz25-5.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; height: 147px; margin-top: -17px; } .bz25-7 { background: url(../assets/bz25-7.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; height: 147px; margin-top: -17px; } .bz25-8 { background: url(../assets/bz25-8.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; height: 147px; margin-top: -17px; } .topNum { font-weight: 600; font-size: 44px; color: #ffffff; line-height: 43px; font-style: normal; margin-top: 50px; margin-left: 40px; } .topText { font-weight: 400; font-size: 18px; color: #95caff; line-height: 20px; font-style: normal; margin-top: 3px; margin-left: 40px; } .title { height: 50px; line-height: 50px; font-weight: 400; font-size: 22px; color: #ffffff; padding: 0 20px; } .middle { height: 322px; } .middle1 { background: url(../assets/1.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; } .middle2 { background: url(../assets/2.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; } .yanqi { width: 275px; height: 108px; background: url(../assets/yanqi.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; } .content { height: 108px; } .imageClass { width: 40px; height: 30px; display: block; margin: 8px auto; } .middle2-left { font-size: 18px; color: rgba(255, 255, 255, 0.9); line-height: 17px; letter-spacing: 5px; width: 110px; padding-top: 12px; padding-left: 12px; float: left; margin-right: 10px; } .middle2-right { font-weight: 600; font-size: 35px; color: #ffffff; line-height: 106px; } .footer { height: 410px; } .footer1 { background: url(../assets/3.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; } .footer2 { background: url(../assets/4.png) no-repeat; background-size: 100% 100%; border-radius: 5px; overflow: auto; height: 402px; } </style>