更新
This commit is contained in:
parent
94874a9d76
commit
d380907298
@ -69,6 +69,26 @@ export const constantRoutes = [
|
||||
component: (resolve) => require(['@/views/print/design'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/allDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/allDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/rawDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/rawDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/deepDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/deepDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/coldDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/coldDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
component: Layout,
|
||||
|
||||
544
src/views/dashboard/allDashboard/index-model.vue
Normal file
544
src/views/dashboard/allDashboard/index-model.vue
Normal file
@ -0,0 +1,544 @@
|
||||
<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" />
|
||||
<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="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" 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: 5" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ 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) }}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
<div style="flex: 3" class="bz25-6"></div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="middle middle1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="cost" />
|
||||
成本统计
|
||||
<span style="float: right">成本单位:万元 | 产量单位:万平方米</span>
|
||||
</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="energy" />
|
||||
能源统计
|
||||
</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';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceS',
|
||||
label: '总成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outO',
|
||||
label: '原片产量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioO',
|
||||
label: '原片良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outD',
|
||||
label: '深加工产量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioD',
|
||||
label: '深加工良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'matPriceS',
|
||||
label: '原料成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'energyPriceS',
|
||||
label: '能源成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'otherPriceS',
|
||||
label: '其他成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'areaPriceS',
|
||||
label: '每平米成本/元',
|
||||
width: 140,
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'gas',
|
||||
label: '气消耗量/m³',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'price',
|
||||
label: '总价/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
KHeader,
|
||||
baseTable,
|
||||
BarChart,
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
scaleNum: 0.8,
|
||||
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: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
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();
|
||||
});
|
||||
},
|
||||
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;
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=1`;
|
||||
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 ('factoryState' in dataJson) {
|
||||
this.topData = dataJson.factoryState;
|
||||
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 ('factoryEnergyTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.factoryEnergyTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.price = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('factoryCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.factoryCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg.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-1 {
|
||||
background: url(../assets/bz25-1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 130px;
|
||||
}
|
||||
.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-6 {
|
||||
background: url(../assets/bz25-6.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 130px;
|
||||
}
|
||||
.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>
|
||||
195
src/views/dashboard/coldDashboard/index-model.vue
Normal file
195
src/views/dashboard/coldDashboard/index-model.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<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 + ')' }">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import DataBox from './components/dataBox';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
export default {
|
||||
name: 'ColdDashboard',
|
||||
components: {
|
||||
KHeader,
|
||||
DataBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 1,
|
||||
permission: false,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
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();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
this.websocketclose();
|
||||
},
|
||||
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.coldContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let coldContainerBox = document.getElementById('coldContainer');
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(coldContainerBox.style.width);
|
||||
let bh = parseFloat(coldContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=4`;
|
||||
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 msgData = e.data;
|
||||
try {
|
||||
msgData = JSON.parse(e.data);
|
||||
} catch (error) {
|
||||
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);
|
||||
item.lineName.includes('2') && (this.line2 = item);
|
||||
item.lineName.includes('3') && (this.line3 = item);
|
||||
item.lineName.includes('4') && (this.line4 = item);
|
||||
});
|
||||
},
|
||||
websocketsend() {
|
||||
// 数据发送
|
||||
this.websock.send('');
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
this.websock.close();
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.coldContainer {
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url(../assets/bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
.box1 {
|
||||
position: absolute;
|
||||
top: 141px;
|
||||
left: 40px;
|
||||
}
|
||||
.box2 {
|
||||
position: absolute;
|
||||
top: 141px;
|
||||
right: 40px;
|
||||
}
|
||||
.box3 {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
left: 40px;
|
||||
}
|
||||
.box4 {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
515
src/views/dashboard/deepDashboard/index-model.vue
Normal file
515
src/views/dashboard/deepDashboard/index-model.vue
Normal file
@ -0,0 +1,515 @@
|
||||
<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-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodayOut).toFixed(1) }}</div>
|
||||
<div class="topText">昨日深加工产量/万m²</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-7 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthSum).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="line" />
|
||||
各产线产量及良品率
|
||||
<span style="float: right">产量单位:万平方米</span>
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table3'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps3"
|
||||
:table-data="tableData3"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
<div style="flex: 1" class="middle middle2">
|
||||
<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>
|
||||
<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';
|
||||
import interval from './interval.vue';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'yure',
|
||||
label: '余热发电量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'elecPrice',
|
||||
label: '总价/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceD',
|
||||
label: '成本/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outD',
|
||||
label: '产量/万m²',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioD',
|
||||
label: '良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
const tableProps3 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '1',
|
||||
label: '产线1',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '2',
|
||||
label: '产线2',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '3',
|
||||
label: '产线3',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '4',
|
||||
label: '产线4',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '5',
|
||||
label: '产线5',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
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: {
|
||||
o2: require('@/views/dashboard/assets/O2.png'),
|
||||
no: require('@/views/dashboard/assets/NO.png'),
|
||||
so2: require('@/views/dashboard/assets/SO2.png'),
|
||||
no2: require('@/views/dashboard/assets/NO2.png'),
|
||||
},
|
||||
tableProps1,
|
||||
tableData1: [],
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
tableProps3,
|
||||
tableData3: [],
|
||||
echartData: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
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();
|
||||
});
|
||||
},
|
||||
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;
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=3`;
|
||||
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 ('DeepState' in dataJson) {
|
||||
this.topData = dataJson.DeepState;
|
||||
if (!this.permission) {
|
||||
this.topData.yestodaySum = '***';
|
||||
this.topData.monthSum = '***';
|
||||
this.topData.monthAreaCost = '***';
|
||||
}
|
||||
}
|
||||
if ('DeepEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.DeepEnergyTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData1.forEach((item) => {
|
||||
item.elecPrice = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('DeepCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.DeepCostTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.priceD = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('DeepPdTables' in dataJson) {
|
||||
this.tableData3 = dataJson.DeepPdTables;
|
||||
}
|
||||
if ('DeepCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.DeepCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
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-d-1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-3 {
|
||||
background: url(../assets/bz25-d-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-4 {
|
||||
background: url(../assets/bz25-d-3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-7 {
|
||||
background: url(../assets/bz25-d-4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-8 {
|
||||
background: url(../assets/bz25-d-5.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;
|
||||
text-align: center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
font-size: 38px;
|
||||
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>
|
||||
532
src/views/dashboard/rawDashboard/index-model.vue
Normal file
532
src/views/dashboard/rawDashboard/index-model.vue
Normal file
@ -0,0 +1,532 @@
|
||||
<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';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
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: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
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();
|
||||
});
|
||||
},
|
||||
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;
|
||||
wx = rw / bw;
|
||||
hx = rh / 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 (!this.permission) {
|
||||
this.topData.monthAreaCost = '***';
|
||||
this.topData.monthMat = '***';
|
||||
this.topData.yestodaySum = '***';
|
||||
this.topData.yestodayMat = '***';
|
||||
}
|
||||
}
|
||||
if ('OriginEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.OriginEnergyTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData1.forEach((item) => {
|
||||
item.elecPrice = null;
|
||||
item.gasPrice = null;
|
||||
item.price = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('OriginCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.OriginCostTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.priceO = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('OriginCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.OriginCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
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>
|
||||
@ -108,13 +108,13 @@
|
||||
</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-cont" style="margin-top: 60px;">
|
||||
<div class="form-cont" style="margin-top: 60px">
|
||||
<!-- <el-tabs
|
||||
class="form"
|
||||
v-model="loginForm.loginType"
|
||||
style="float: none">
|
||||
<el-tab-pane label="账号密码登录" name="uname"></el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane> -->
|
||||
<!-- </el-tabs> -->
|
||||
<div style="">
|
||||
<el-form
|
||||
@ -207,12 +207,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 下方的登录按钮 -->
|
||||
<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
|
||||
<el-form-item
|
||||
id="button-form-item"
|
||||
style="width: 100%; margin-top: 32px">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width: 100%; height: 66px; font-size: 18px;"
|
||||
style="width: 100%; height: 66px; font-size: 18px"
|
||||
@click.native.prevent="getCode">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
@ -285,13 +287,13 @@ export default {
|
||||
mobileCodeTimer: 0,
|
||||
loginForm: {
|
||||
loginType: 'uname',
|
||||
username: '',//admin
|
||||
password: '',//admin123 kszny123456
|
||||
username: '', //admin
|
||||
password: '', //admin123 kszny123456
|
||||
captchaVerification: '',
|
||||
mobile: '',
|
||||
mobileCode: '',
|
||||
rememberMe: false,
|
||||
tenantName: '技术中心',//技术中心
|
||||
tenantName: '技术中心', //技术中心
|
||||
},
|
||||
scene: 21,
|
||||
|
||||
@ -345,7 +347,21 @@ export default {
|
||||
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.redirect = to.query.redirect
|
||||
? decodeURIComponent(to.query.redirect)
|
||||
: undefined;
|
||||
this.getURL();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 验证码开关
|
||||
this.captchaEnable = false;
|
||||
// 重定向地址
|
||||
this.redirect = this.$route.query.redirect
|
||||
? decodeURIComponent(this.$route.query.redirect)
|
||||
: undefined;
|
||||
// 租户开关
|
||||
this.tenantEnable = getTenantEnable();
|
||||
if (this.tenantEnable) {
|
||||
@ -354,18 +370,28 @@ export default {
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
setTenantId(tenantId);
|
||||
this.getURL();
|
||||
}
|
||||
});
|
||||
}
|
||||
// 验证码开关
|
||||
this.captchaEnable = false;
|
||||
// 重定向地址
|
||||
this.redirect = this.$route.query.redirect
|
||||
? decodeURIComponent(this.$route.query.redirect)
|
||||
: undefined;
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getURL() {
|
||||
const params = {};
|
||||
const urlObj = new URL('https://' + this.redirect);
|
||||
|
||||
urlObj.searchParams.forEach((value, key) => {
|
||||
params[key] = value;
|
||||
});
|
||||
if (this.redirect && Object.keys(params).length !== 0) {
|
||||
this.loginForm.username = params.username;
|
||||
this.loginForm.password = params.password;
|
||||
this.$nextTick(() => {
|
||||
this.getCode();
|
||||
});
|
||||
}
|
||||
},
|
||||
getCode() {
|
||||
// 情况一，未开启：则直接登录
|
||||
if (!this.captchaEnable) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user