暂存
This commit is contained in:
211
src/views/dashboard/coldDashboard/index.vue
Normal file
211
src/views/dashboard/coldDashboard/index.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<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' class="box1"/>
|
||||
<DataBox title='冷端2线' position='rt' class="box2"/>
|
||||
<DataBox title='冷端3线' position='lb' class="box3"/>
|
||||
<DataBox title='冷端4线' position='rb' 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: '',
|
||||
}
|
||||
},
|
||||
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);
|
||||
},
|
||||
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;
|
||||
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=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 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 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>
|
||||
Reference in New Issue
Block a user