1
This commit is contained in:
parent
0bb434bc22
commit
41e1f46cfc
12
src/assets/icons/svg/fullScreenView.svg
Normal file
12
src/assets/icons/svg/fullScreenView.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 54</title>
|
||||
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
|
||||
<g id="编组-54" transform="translate(1866.000000, 36.000000)">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
|
||||
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@ -1 +0,0 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
|
||||
|
Before Width: | Height: | Size: 421 B |
10
src/assets/icons/svg/unFullScreenView.svg
Normal file
10
src/assets/icons/svg/unFullScreenView.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 54备份</title>
|
||||
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-54备份">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
|
||||
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@ -19,6 +19,9 @@ const getters = {
|
||||
sidebarRouters:state => state.permission.sidebarRouters,
|
||||
choicepart: state => state.app.choicepart,
|
||||
// 数据字典
|
||||
dict_datas: state => state.dict.dictDatas
|
||||
dict_datas: state => state.dict.dictDatas,
|
||||
//ws
|
||||
fanFrequencyInfo: state => state.websocket.FanFrequencyInfo,
|
||||
kilnInfo: state => state.websocket.kilnInfo,
|
||||
}
|
||||
export default getters
|
||||
|
||||
@ -6,6 +6,7 @@ import tagsView from './modules/tagsView'
|
||||
import permission from './modules/permission'
|
||||
import settings from './modules/settings'
|
||||
import dict from './modules/dict'
|
||||
import websocket from './modules/websocket'
|
||||
import getters from './getters'
|
||||
|
||||
Vue.use(Vuex)
|
||||
@ -17,7 +18,8 @@ const store = new Vuex.Store({
|
||||
tagsView,
|
||||
permission,
|
||||
settings,
|
||||
dict
|
||||
dict,
|
||||
websocket
|
||||
},
|
||||
getters
|
||||
})
|
||||
|
||||
26
src/store/modules/websocket.js
Normal file
26
src/store/modules/websocket.js
Normal file
@ -0,0 +1,26 @@
|
||||
const state = {
|
||||
fanFrequencyInfo:{},
|
||||
kilnInfo:{}
|
||||
};
|
||||
const mutations = {
|
||||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
|
||||
state.fanFrequencyInfo = fanFrequencyInfo
|
||||
},
|
||||
SET_KILNINFO: (state, kilnInfo) => {
|
||||
state.kilnInfo = kilnInfo
|
||||
}
|
||||
};
|
||||
const actions = {
|
||||
setFanFrequencyInfo({ commit }, fanFrequencyInfo) {
|
||||
commit('SET_FANFREQUENCYINFO', fanFrequencyInfo.payload)
|
||||
},
|
||||
setKilnInfo({ commit }, kilnInfo) {
|
||||
commit('SET_KILNINFO', kilnInfo.payload)
|
||||
}
|
||||
};
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
}
|
||||
BIN
src/views/databoard/assets/check.png
Normal file
BIN
src/views/databoard/assets/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 B |
BIN
src/views/databoard/assets/energeCost.png
Normal file
BIN
src/views/databoard/assets/energeCost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
BIN
src/views/databoard/assets/msg.png
Normal file
BIN
src/views/databoard/assets/msg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 507 B |
@ -11,12 +11,12 @@
|
||||
<i
|
||||
class=""
|
||||
style="display: inline-block; margin-left: 12px; padding-top: 4px">
|
||||
<img :src="imgSrc" width="18" height="16" alt="" />
|
||||
<img :src="imgSrc" width="20" height="20" alt="" />
|
||||
</i>
|
||||
<span
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
line-height: 2;
|
||||
margin-left: 6px;
|
||||
display: inline-block;
|
||||
@ -48,11 +48,11 @@ export default {
|
||||
case '风机运行频率':
|
||||
return require('../assets/flow.png');
|
||||
case 'ISRA缺陷检测':
|
||||
return require('../assets/gas.png');
|
||||
return require('../assets/check.png');
|
||||
case '能耗':
|
||||
return require('../assets/gas.png');
|
||||
return require('../assets/energeCost.png');
|
||||
case '窑炉信息':
|
||||
return require('../assets/gas.png');
|
||||
return require('../assets/msg.png');
|
||||
case '烟气处理':
|
||||
return require('../assets/gas.png');
|
||||
}
|
||||
|
||||
@ -11,9 +11,11 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'GasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
@ -110,7 +112,6 @@ export default {
|
||||
},
|
||||
};
|
||||
},
|
||||
inject: ['resizeChart'],
|
||||
computed: {
|
||||
sidebarStatus() {
|
||||
return this.$store.state.app.sidebar.opened;
|
||||
@ -126,10 +127,6 @@ export default {
|
||||
this.chart.setOption(this.option);
|
||||
}, 500);
|
||||
},
|
||||
// resizeChart(val) {
|
||||
// console.log('resizeChart', val);
|
||||
// val && this.chart && this.chart.resize();
|
||||
// },
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
|
||||
@ -7,69 +7,93 @@
|
||||
|
||||
<template>
|
||||
<header class="kiln-header">
|
||||
<h1
|
||||
style="
|
||||
font-size: 32px;
|
||||
margin-bottom: 36px;
|
||||
color: #0ee8e4;
|
||||
letter-spacing: 5px;
|
||||
">
|
||||
<h1>
|
||||
窑炉生产运行驾驶舱
|
||||
</h1>
|
||||
<!-- left: 312px; -->
|
||||
<div
|
||||
class="firm"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 16.5vw;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
class="firm">
|
||||
单位: 河南汇融科技服务有限公司
|
||||
</div>
|
||||
<div
|
||||
class="datetime"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
right: 15.5vw;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
">
|
||||
<DateBtnGroup />
|
||||
class="datetime">
|
||||
<!-- <DateBtnGroup /> -->
|
||||
{{ new Date().toLocaleString() }}
|
||||
</div>
|
||||
<el-button
|
||||
type="text"
|
||||
class="screen-btn"
|
||||
@click="changeFullScreen"
|
||||
>
|
||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||
<svg-icon v-else icon-class="fullScreenView" />
|
||||
</el-button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DateBtnGroup from './DateBtnGroup.vue';
|
||||
// import DateBtnGroup from './DateBtnGroup.vue';
|
||||
|
||||
export default {
|
||||
name: 'KilnHeader',
|
||||
components: { DateBtnGroup },
|
||||
props: {},
|
||||
// components: { DateBtnGroup },
|
||||
props: {
|
||||
isFullScreen:false
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
changeFullScreen() {
|
||||
this.$emit('screenfullChange')
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.kiln-header {
|
||||
background: url('../assets/head.png') no-repeat;
|
||||
height: 88px;
|
||||
height: 96px;
|
||||
background-size: 100%;
|
||||
background-position: 0 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
h1{
|
||||
font-size: 32px;
|
||||
margin-bottom: 36px;
|
||||
color: #0ee8e4;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
.firm{
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 325px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.datetime {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 240px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.screen-btn{
|
||||
color: #00fff0;
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top:28px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,9 +11,11 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'ISRAChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
@ -24,6 +26,14 @@ export default {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
bottom: '3%',
|
||||
left: 'center',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 11234,
|
||||
subtext: '总数',
|
||||
@ -44,7 +54,7 @@ export default {
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '85%'],
|
||||
radius: ['45%', '65%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
@ -60,25 +70,25 @@ export default {
|
||||
rich: {
|
||||
a: {
|
||||
color: '#2760ff',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
b: {
|
||||
color: '#518eec',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
c: {
|
||||
color: '#0ee8e4',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
d: {
|
||||
color: '#ddb523',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
.switcher {
|
||||
:deep(.el-switch__core) {
|
||||
border: none;
|
||||
background-color: #213d566b;
|
||||
background-color:rgba(3, 35, 60, 1);
|
||||
|
||||
&::after {
|
||||
background-color: #02457e;
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
:deep(.is-checked) {
|
||||
.el-switch__core {
|
||||
border: none;
|
||||
background-color: #b4fffc;
|
||||
background-color: rgba(180, 255, 252, 0.71);
|
||||
|
||||
&::after {
|
||||
background-color: #08d8cd;
|
||||
|
||||
@ -12,13 +12,13 @@
|
||||
<div class="" style="flex: 2; padding: 8px">
|
||||
<div
|
||||
class="header-line"
|
||||
style="margin-bottom: 8px; display: flex; align-items: center">
|
||||
style="margin: 8px 0 16px; display: flex; align-items: center">
|
||||
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
||||
烟气趋势图
|
||||
能耗趋势图
|
||||
</h2>
|
||||
<Switcher />
|
||||
<!-- <Switcher /> -->
|
||||
<div>
|
||||
<span class="lgd lgd-total">总量</span>
|
||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
||||
<!-- <span class="lgd lgd-day">白班</span>
|
||||
<span class="lgd lgd-night">夜班</span> -->
|
||||
</div>
|
||||
@ -31,10 +31,10 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
|
||||
:options="['电耗能', '天然气I', '天然气II']" />
|
||||
<SelectorBtnGroup :options="['周', '月', '年']" />
|
||||
</div>
|
||||
<div class="chart" style="height: 150px; margin-top: 8px;">
|
||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
||||
<GasChart />
|
||||
</div>
|
||||
</div>
|
||||
@ -45,8 +45,8 @@
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import SplitLine from '../components/line';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import EnergeTop from './EnergeTop.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
import EnergeTop from './EnergeTop';
|
||||
import GasChart from '../components/GasChart.vue';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||
export default {
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
grid-template-rows: auto;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
margin-bottom: 6px;
|
||||
">
|
||||
<ShadowRect
|
||||
style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<template>
|
||||
<Container name="风机运行频率" size="middle" style="">
|
||||
<div class="" style="position: absolute; top: 18px; left: 180px">
|
||||
<div class="" style="position: absolute; top: 26px; left: 220px">
|
||||
<Switcher />
|
||||
</div>
|
||||
<div
|
||||
@ -17,22 +17,22 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
">
|
||||
<ShadowRect v-for="n in 14" :key="n" :rounded="false">
|
||||
<ShadowRect v-for="(value, key, i) in fanFrequencyInfo" :key="i" :rounded="false">
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.24;
|
||||
flex: 1.2;
|
||||
font-size: 18px;
|
||||
line-height: 1.1;
|
||||
flex: 3.5;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
{{ n }}#风机
|
||||
{{ key }}:
|
||||
</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">
|
||||
{{ Math.floor(Math.random() * 100) }}Hz
|
||||
<span style="font-size: 20px; line-height: 1; flex: 1">
|
||||
{{ value }}Hz
|
||||
</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
@ -42,16 +42,24 @@
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
export default {
|
||||
name: 'FanSequence',
|
||||
components: { Container, ShadowRect, Switcher },
|
||||
computed: {
|
||||
fanFrequencyInfo() {
|
||||
return this.$store.state.websocket.fanFrequencyInfo
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<ShadowRect>
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.24;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@ -30,12 +30,12 @@
|
||||
">
|
||||
氧气含量
|
||||
</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect>
|
||||
<div
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@ -45,13 +45,13 @@
|
||||
<p style="margin: 0; line-height: inherit">一氧化氮</p>
|
||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
<div
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@ -61,13 +61,13 @@
|
||||
<p style="margin: 0; line-height: inherit">二氧化硫</p>
|
||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">59mg/m³</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
<div
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@ -77,22 +77,22 @@
|
||||
<p style="margin: 0; line-height: inherit">二氧化氮</p>
|
||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
<KilnLine :horizontal="true" />
|
||||
<div class="" style="flex: 2; padding: 8px">
|
||||
<div
|
||||
class="header-line"
|
||||
style="margin-bottom: 8px; display: flex; align-items: center">
|
||||
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
||||
style="margin-bottom: 10px; display: flex; align-items: center">
|
||||
<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
|
||||
烟气趋势图
|
||||
</h2>
|
||||
<Switcher />
|
||||
<!-- <Switcher /> -->
|
||||
<div>
|
||||
<span class="lgd lgd-total">总量</span>
|
||||
<span class="lgd lgd-day">白班</span>
|
||||
<span class="lgd lgd-night">夜班</span>
|
||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
||||
<!-- <span class="lgd lgd-day">白班</span>
|
||||
<span class="lgd lgd-night">夜班</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -103,10 +103,10 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氮', '二氧化氮']" />
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
|
||||
</div>
|
||||
<div class="chart" style="height: 220px">
|
||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
||||
<GasChart />
|
||||
</div>
|
||||
</div>
|
||||
@ -118,7 +118,7 @@
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import KilnLine from '../components/line';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||
import GasChart from '../components/GasChart.vue';
|
||||
|
||||
|
||||
@ -7,9 +7,10 @@
|
||||
|
||||
<template>
|
||||
<Container name="ISRA缺陷检测" size="middle" style="">
|
||||
<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
|
||||
<div class="f" style="flex: 9;">
|
||||
<ISRAChart />
|
||||
<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
|
||||
<div class="f" style="flex: 9;">
|
||||
|
||||
</div>
|
||||
<ul
|
||||
class="legend"
|
||||
@ -27,7 +28,7 @@
|
||||
<li class="fault-3">缺陷3</li>
|
||||
<li class="fault-4">缺陷4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
|
||||
@ -17,22 +17,37 @@
|
||||
grid-auto-rows: auto;
|
||||
gap: 8px;
|
||||
">
|
||||
<ShadowRect v-for="info in kilnInfo" :key="info.name" :rounded="false">
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
{{ info.name }}
|
||||
</span>
|
||||
<span style="font-size: 16px; line-height: 1.45; flex: 1">
|
||||
{{ info.value }}
|
||||
<!-- {{ Math.floor(Math.random() * 100) }}Hz -->
|
||||
</span>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">窑炉压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.kilnPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">循环水温度:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterTemp }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">循环水流量:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterFlow }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">循环水压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">助燃风压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.combustionAirPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">碹顶加权温度:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.topTemp }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">压缩气压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.compressedAirPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">熔化加权温度:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.meltTemp }}</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
</Container>
|
||||
@ -48,24 +63,26 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
kilnInfo: [
|
||||
{ name: '窑炉压力', value: '83Kpa' },
|
||||
{ name: '循环水温度', value: '53℃' },
|
||||
{ name: '循环水流量', value: '23m³/h' },
|
||||
{ name: '循环水压力', value: '33Kpa' },
|
||||
{ name: '助燃风压力', value: '12Kpa' },
|
||||
{ name: '碹顶加权温度', value: '32℃' },
|
||||
{ name: '压缩气压力', value: '83Kpa' },
|
||||
{ name: '融化加权温度', value: '123℃' },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
kilnInfoMsg() {
|
||||
return this.$store.state.websocket.kilnInfo
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.kiln-info {
|
||||
.kiln-info-item {
|
||||
font-size: 20px;
|
||||
line-height: 1.7;
|
||||
flex: 1.5;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<MaterialCost />
|
||||
<IsraCheck />
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
class="material"
|
||||
style="
|
||||
flex: 1;
|
||||
padding: 6px;
|
||||
padding: 12px 6px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
@ -31,7 +31,7 @@
|
||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
|
||||
234
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
|
||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||
- 原料1/吨 -
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,11 @@
|
||||
<template>
|
||||
<div
|
||||
class="right-two"
|
||||
style="display: flex; gap: 16px; flex-direction: column">
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 320px 605px;
|
||||
">
|
||||
<KilnInfo />
|
||||
<GasHandle />
|
||||
</div>
|
||||
@ -18,7 +22,7 @@
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import KilnLine from '../components/line';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||
import KilnInfo from './KilnInfo.vue';
|
||||
import GasHandle from './GasHandle.vue';
|
||||
|
||||
@ -6,22 +6,28 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div id='kilnContainer' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
id='kilnContainerB'
|
||||
ref='kilnContainer'
|
||||
class="KilnDataBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
width: calc(100% + 28px);
|
||||
height: calc(100% + 38px);
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
">
|
||||
<KHeader />
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 16px; padding: 8px 16px">
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 2">
|
||||
<LeftFour />
|
||||
</div>
|
||||
@ -30,12 +36,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header.vue';
|
||||
import LeftFour from './LeftFour.vue';
|
||||
import KHeader from '../components/Header';
|
||||
import LeftFour from './LeftFour';
|
||||
import RightTwo from './RightTwo.vue';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg } from './../utils/dcs'
|
||||
|
||||
export default {
|
||||
name: 'KilnDataBoard',
|
||||
@ -49,15 +59,110 @@ export default {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
mounted() {
|
||||
// this.$el.addEventListener('resize', () => {
|
||||
// console.log('resizzzze...')
|
||||
// this.resizeChart = Math.random();
|
||||
// });
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
destroy() {
|
||||
this.destroy()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// this.getMes()
|
||||
// closeWebsocket()
|
||||
getDcsMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed...........')
|
||||
},
|
||||
methods: {
|
||||
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.kilnContainer)
|
||||
console.log('11111')
|
||||
// this.resetSize()
|
||||
console.log('2222')
|
||||
},
|
||||
resetSize() {
|
||||
let kilnContainerBox = document.querySelector('#kilnContainerB')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(kilnContainerBox.style.width)
|
||||
let bh = parseFloat(kilnContainerBox.style.height)
|
||||
let wx = 0
|
||||
let hx = 0
|
||||
if (screenfull.isFullscreen) {
|
||||
console.log('全屏')
|
||||
wx = rw / bw
|
||||
hx = rh / bh
|
||||
console.log(this.scaleNum)
|
||||
}else{
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx
|
||||
},
|
||||
// 获取ws
|
||||
getMes() {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('成功的回调函数, 接收到的data数据: ', data)
|
||||
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -66,5 +171,6 @@ export default {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
55
src/views/databoard/mixins/resize.js
Normal file
55
src/views/databoard/mixins/resize.js
Normal file
@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/views/databoard/utils/dcs.js
Normal file
34
src/views/databoard/utils/dcs.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { connectWebsocket, closeWebsocket } from './../utils/websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
export const getDcsMsg = () => {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
console.log('++++++++')
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
34
src/views/databoard/utils/mes.js
Normal file
34
src/views/databoard/utils/mes.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { connectWebsocket, closeWebsocket } from './../utils/websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
export const getDcsMsg = () => {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
console.log('++++++++')
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
204
src/views/databoard/utils/websocket.js
Normal file
204
src/views/databoard/utils/websocket.js
Normal file
@ -0,0 +1,204 @@
|
||||
// websocket实例
|
||||
let wsObj = null;
|
||||
// ws连接地址
|
||||
let wsUrl = null;
|
||||
// let userId = null;
|
||||
// 是否执行重连 true/不执行 ； false/执行
|
||||
let lockReconnect = false;
|
||||
// 重连定时器
|
||||
let wsCreateHandler = null;
|
||||
// 连接成功，执行回调函数
|
||||
let messageCallback = null;
|
||||
// 连接失败，执行回调函数
|
||||
let errorCallback = null;
|
||||
// 发送给后台的数据
|
||||
let sendDatas = {};
|
||||
|
||||
|
||||
/**
|
||||
* 发起websocket请求函数
|
||||
* @param {string} url ws连接地址
|
||||
* @param {Object} agentData 传给后台的参数
|
||||
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
|
||||
* @param {function} errCallback ws连接错误的回调函数
|
||||
*/
|
||||
export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
|
||||
wsUrl = url;
|
||||
createWebSoket();
|
||||
messageCallback = successCallback;
|
||||
errorCallback = errCallback;
|
||||
sendDatas = agentData;
|
||||
}
|
||||
|
||||
// 手动关闭websocket （这里手动关闭会执行onclose事件）
|
||||
export const closeWebsocket = () => {
|
||||
if (wsObj) {
|
||||
writeToScreen('手动关闭websocket');
|
||||
wsObj.close() // 关闭websocket
|
||||
// wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
||||
// 关闭重连
|
||||
lockReconnect = true;
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
// 关闭心跳检查
|
||||
heartCheck.stop();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建ws函数
|
||||
const createWebSoket = () => {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
|
||||
return false
|
||||
}
|
||||
// const host = window.location.host;
|
||||
// userId = GetQueryString("userId");
|
||||
// wsUrl = "ws://" + host + "/websoket" + userId;
|
||||
|
||||
try {
|
||||
wsObj = new WebSocket(wsUrl);
|
||||
initWsEventHandle();
|
||||
} catch (e) {
|
||||
writeToScreen("连接异常，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
|
||||
const initWsEventHandle = () => {
|
||||
try {
|
||||
// 连接成功
|
||||
wsObj.onopen = (event) => {
|
||||
onWsOpen(event);
|
||||
heartCheck.start();
|
||||
}
|
||||
|
||||
// 监听服务器端返回的信息
|
||||
wsObj.onmessage = (event) => {
|
||||
onWsMessage(event);
|
||||
heartCheck.start();
|
||||
}
|
||||
|
||||
wsObj.onclose = (event) => {
|
||||
writeToScreen('onclose执行关闭事件');
|
||||
onWsClose(event);
|
||||
}
|
||||
|
||||
wsObj.onerror = (event) => {
|
||||
writeToScreen('onerror执行error事件，开始重连');
|
||||
onWsError(event);
|
||||
reconnect();
|
||||
}
|
||||
} catch (err) {
|
||||
writeToScreen('绑定事件没有成功，开始重连');
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
|
||||
const onWsOpen = (event) => {
|
||||
writeToScreen('CONNECT');
|
||||
// // 客户端与服务器端通信
|
||||
// wsObj.send('我发送消息给服务端');
|
||||
// 添加状态判断，当为OPEN时，发送消息
|
||||
if (wsObj.readyState === wsObj.OPEN) { // wsObj.OPEN = 1
|
||||
// 发给后端的数据需要字符串化
|
||||
wsObj.send(JSON.stringify(sendDatas));
|
||||
}
|
||||
if (wsObj.readyState === wsObj.CLOSED) { // wsObj.CLOSED = 3
|
||||
writeToScreen('wsObj.readyState=3, ws连接异常，开始重连');
|
||||
reconnect();
|
||||
errorCallback(event);
|
||||
}
|
||||
}
|
||||
const onWsMessage = (event) => {
|
||||
const jsonStr = event.data;
|
||||
writeToScreen('onWsMessage接收到服务器的数据: ', jsonStr);
|
||||
messageCallback(jsonStr);
|
||||
}
|
||||
const onWsClose = (event) => {
|
||||
writeToScreen('DISCONNECT');
|
||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
||||
// e.code !== 1000 表示非正常关闭。
|
||||
console.log('onclose event: ', event)
|
||||
if (event && event.code !== 1000) {
|
||||
writeToScreen('非正常关闭');
|
||||
errorCallback(event);
|
||||
// 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
const onWsError = (event) => {
|
||||
writeToScreen('onWsError: ', event.data);
|
||||
errorCallback(event);
|
||||
}
|
||||
|
||||
const writeToScreen = (massage) => {
|
||||
console.log(massage);
|
||||
}
|
||||
|
||||
// 重连函数
|
||||
const reconnect = () => {
|
||||
if (lockReconnect) {
|
||||
return;
|
||||
}
|
||||
writeToScreen('3秒后重连');
|
||||
lockReconnect = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
wsCreateHandler = setTimeout(() => {
|
||||
writeToScreen('重连...' + wsUrl);
|
||||
createWebSoket();
|
||||
lockReconnect = false;
|
||||
writeToScreen('重连完成');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 从浏览器地址中获取对应参数
|
||||
const GetQueryString = (name) => {
|
||||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
// 获取url中 ? 符后的字符串并正则匹配
|
||||
let r = window.location.search.substr(1).match(reg);
|
||||
let context = "";
|
||||
r && (context = r[2]);
|
||||
reg = null;
|
||||
r = null;
|
||||
return context;
|
||||
}
|
||||
|
||||
|
||||
// 心跳检查（看看websocket是否还在正常连接中）
|
||||
let heartCheck = {
|
||||
timeout: 15000,
|
||||
timeoutObj: null,
|
||||
serverTimeoutObj: null,
|
||||
// 重启
|
||||
reset() {
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
this.start();
|
||||
},
|
||||
// 停止
|
||||
stop() {
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
},
|
||||
// 开启定时器
|
||||
start() {
|
||||
this.timeoutObj && clearTimeout(this.timeoutObj);
|
||||
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||||
// 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
|
||||
this.timeoutObj = setTimeout(() => {
|
||||
writeToScreen("心跳检查，发送ping到后台");
|
||||
try {
|
||||
const datas = { ping: true };
|
||||
wsObj.send(JSON.stringify(datas));
|
||||
} catch (err) {
|
||||
writeToScreen("发送ping异常");
|
||||
}
|
||||
console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj)
|
||||
// 内嵌定时器
|
||||
this.serverTimeoutObj = setTimeout(() => {
|
||||
writeToScreen("没有收到后台的数据，重新连接");
|
||||
reconnect();
|
||||
}, this.timeout)
|
||||
}, this.timeout)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user