508 lines
12 KiB
Vue
508 lines
12 KiB
Vue
<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>
|