@@ -1,6 +1,10 @@ | |||
const state = { | |||
fanFrequencyInfo:{}, | |||
kilnInfo:{} | |||
fanFrequencyInfo:{},// 分机运行频率 | |||
kilnInfo:{},// 窑炉信息 | |||
gasInfo:{},// 天然气 | |||
israKiln:[],// ISRA缺陷检测 | |||
material:[]// 原料 | |||
}; | |||
const mutations = { | |||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => { | |||
@@ -8,6 +12,17 @@ const mutations = { | |||
}, | |||
SET_KILNINFO: (state, kilnInfo) => { | |||
state.kilnInfo = kilnInfo | |||
}, | |||
SET_GASINFO: (state, gasInfo) => { | |||
state.gasInfo = gasInfo | |||
}, | |||
SET_ISRAKILN: (state, israKiln) => { | |||
state.israKiln = israKiln | |||
}, | |||
SET_MATERIAL: (state, material) => { | |||
state.material = material | |||
} | |||
}; | |||
const actions = { | |||
@@ -16,7 +31,18 @@ const actions = { | |||
}, | |||
setKilnInfo({ commit }, kilnInfo) { | |||
commit('SET_KILNINFO', kilnInfo.payload) | |||
} | |||
}, | |||
setGasInfo({ commit }, gasInfo) { | |||
commit('SET_GASINFO', gasInfo.payload) | |||
}, | |||
setIsraKiln({ commit }, israKiln) { | |||
commit('SET_ISRAKILN', israKiln.payload) | |||
}, | |||
setMaterial({ commit }, material) { | |||
commit('SET_MATERIAL', material.payload) | |||
}, | |||
}; | |||
export default { | |||
namespaced: true, | |||
@@ -116,6 +116,9 @@ export default { | |||
sidebarStatus() { | |||
return this.$store.state.app.sidebar.opened; | |||
}, | |||
gasChartMsg() { | |||
return this.$store.state.websocket.gasInfo | |||
} | |||
}, | |||
watch: { | |||
sidebarStatus(val) { | |||
@@ -127,6 +130,14 @@ export default { | |||
this.chart.setOption(this.option); | |||
}, 500); | |||
}, | |||
gasChartMsg: { | |||
handler(newVal, oldVal) { | |||
console.log(newVal) | |||
// this.chartData = newVal | |||
console.log('newVal============') | |||
// this.updateChart() | |||
} | |||
} | |||
}, | |||
mounted() { | |||
this.$el.addEventListener('resize', () => { | |||
@@ -7,9 +7,7 @@ | |||
<template> | |||
<header class="kiln-header"> | |||
<h1> | |||
窑炉生产运行驾驶舱 | |||
</h1> | |||
<h1>{{topTitle}}</h1> | |||
<!-- left: 312px; --> | |||
<div | |||
class="firm"> | |||
@@ -38,7 +36,9 @@ export default { | |||
name: 'KilnHeader', | |||
// components: { DateBtnGroup }, | |||
props: { | |||
isFullScreen:false | |||
isFullScreen:false, | |||
topTitle: '' | |||
}, | |||
data() { | |||
return { | |||
@@ -21,8 +21,9 @@ export default { | |||
data() { | |||
return { | |||
chart: null, | |||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], | |||
chartData: [], | |||
option: { | |||
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], | |||
tooltip: { | |||
trigger: 'item', | |||
}, | |||
@@ -35,7 +36,7 @@ export default { | |||
} | |||
}, | |||
title: { | |||
text: 11234, | |||
text: 0, | |||
subtext: '总数', | |||
top: '43%', | |||
left: '49%', | |||
@@ -47,11 +48,62 @@ export default { | |||
}, | |||
subtextStyle: { | |||
fontSize: 16, | |||
color: '#fff7', | |||
color: '#fff00', | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
series: [] | |||
}, | |||
}; | |||
}, | |||
mounted() { | |||
this.initChart(); | |||
}, | |||
activated() { | |||
}, | |||
computed: { | |||
israChartMsg() { | |||
return this.$store.state.websocket.israKiln | |||
} | |||
}, | |||
watch: { | |||
israChartMsg: { | |||
handler(newVal, oldVal) { | |||
console.log(newVal) | |||
this.chartData = newVal | |||
console.log('newVal============') | |||
this.updateChart() | |||
} | |||
} | |||
}, | |||
methods: { | |||
initChart() { | |||
this.chart = echarts.init(this.$el); | |||
this.chart.setOption(this.option); | |||
}, | |||
updateChart() { | |||
console.log('update') | |||
let num = 0 | |||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => { | |||
num+=i.num | |||
}) | |||
this.chart.setOption({ | |||
title:{ | |||
text: num, | |||
subtext: '总数', | |||
top: '43%', | |||
left: '49%', | |||
textAlign: 'center', | |||
textStyle: { | |||
fontSize: 32, | |||
lineHeight: 16, | |||
color: '#fff', | |||
}, | |||
subtextStyle: { | |||
fontSize: 16, | |||
color: '#fff00', | |||
}, | |||
}, | |||
series:[{ | |||
name: 'Access From', | |||
type: 'pie', | |||
radius: ['45%', '65%'], | |||
@@ -60,10 +112,6 @@ export default { | |||
show: true, | |||
position: 'outside', | |||
formatter: ({ dataIndex, percent }) => { | |||
// console.log( | |||
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4], | |||
// percent | |||
// ); | |||
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4]; | |||
return `{${styleName}|${percent}%}`; | |||
}, | |||
@@ -98,141 +146,28 @@ export default { | |||
show: true, | |||
}, | |||
itemStyle: { | |||
borderRadius: 12, | |||
// borderColor: 'transparent', | |||
// borderWidth: 20 | |||
borderRadius: 12 | |||
}, | |||
data: [ | |||
{ | |||
value: 1048, | |||
name: '缺陷1', | |||
itemStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 1, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#2760ff', // 0% 处的颜色 | |||
}, | |||
// { | |||
// offset: 0.6, | |||
// color: 'transparent', // 80% 处的颜色 | |||
// }, | |||
{ | |||
offset: 1, | |||
color: '#2760ff33', // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
}, | |||
{ | |||
value: 735, | |||
name: '缺陷2', | |||
itemStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 0, | |||
x2: 1, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#518eec', // 0% 处的颜色 | |||
}, | |||
// { | |||
// offset: 0.6, | |||
// color: 'transparent', // 80% 处的颜色 | |||
// }, | |||
{ | |||
offset: 1, | |||
color: '#518eec33', // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
}, | |||
{ | |||
value: 580, | |||
name: '缺陷3', | |||
itemStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 0, | |||
x2: 1, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#0ee8e4', // 0% 处的颜色 | |||
}, | |||
// { | |||
// offset: 0.6, | |||
// color: 'transparent', // 80% 处的颜色 | |||
// }, | |||
{ | |||
offset: 1, | |||
color: '#0ee8e433', // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
}, | |||
{ | |||
value: 484, | |||
name: '缺陷4', | |||
itemStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 1, | |||
y: 0, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#ddb523', // 0% 处的颜色 | |||
}, | |||
// { | |||
// offset: 0.6, | |||
// color: 'transparent', // 70% 处的颜色 | |||
// }, | |||
{ | |||
offset: 1, | |||
color: '#ddb52333', // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
}, | |||
], | |||
}, | |||
], | |||
}, | |||
}; | |||
}, | |||
mounted() { | |||
this.initChart(); | |||
}, | |||
activated() { | |||
// this.initChart(); | |||
}, | |||
computed: {}, | |||
methods: { | |||
initChart() { | |||
this.chart = echarts.init(this.$el); | |||
this.chart.setOption(this.option); | |||
}, | |||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ | |||
name:item.name, | |||
value: item.num, | |||
itemStyle:{ | |||
color:{ | |||
type: 'linear', | |||
x: 1, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
global: false, | |||
colorStops:[ | |||
{offset: 0,color: this.colors[index%4]}, | |||
{offset: 1,color: this.colors[index%4]+'33'} | |||
] | |||
} | |||
} | |||
}))}] | |||
}) | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -29,7 +29,9 @@ export default { | |||
}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
methods: { | |||
}, | |||
}; | |||
</script> | |||
@@ -0,0 +1,29 @@ | |||
<template> | |||
<div | |||
class="bottom-two" | |||
style=" | |||
display: grid; | |||
gap: 16px; | |||
grid-template-rows: 462px 462px; | |||
"> | |||
<OrderStatus /> | |||
<YieldRate /> | |||
</div> | |||
</template> | |||
<script> | |||
import OrderStatus from './OrderStatus.vue'; | |||
import YieldRate from './YieldRate.vue'; | |||
export default { | |||
name: 'BottomTwo', | |||
components: { OrderStatus, YieldRate }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,14 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="订单完成情况" size="small" style=""> | |||
digndna | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
export default { | |||
name: 'OrderStatus', | |||
components: { Container }, | |||
} | |||
</script> |
@@ -0,0 +1,29 @@ | |||
<template> | |||
<div | |||
class="top-three" | |||
style=" | |||
display: grid; | |||
gap: 16px; | |||
grid-template-rows: 462px 462px; | |||
"> | |||
<OrderStatus /> | |||
<YieldRate /> | |||
</div> | |||
</template> | |||
<script> | |||
import OrderStatus from './OrderStatus.vue'; | |||
import YieldRate from './YieldRate.vue'; | |||
export default { | |||
name: 'TopThree', | |||
components: { OrderStatus, YieldRate }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,14 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="本日生产良品率" size="small" style=""> | |||
0000987 | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
export default { | |||
name: 'YieldRate', | |||
components: { Container }, | |||
} | |||
</script> |
@@ -0,0 +1,145 @@ | |||
<template> | |||
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;"> | |||
<div | |||
id='deepProcessingContainer' | |||
ref='deepProcessingContainer' | |||
class="deepProcessingBoard" | |||
style=" | |||
position: absolute; | |||
transform-origin: 16px 8px; | |||
font-size: 16px; | |||
top: -8px; | |||
left: -16px; | |||
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" | |||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> | |||
<div class="left-side" style="flex: 1"> | |||
<TopThree /> | |||
</div> | |||
<div class="middle-side" style="flex: 1"> | |||
<BottomTwo /> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import KHeader from '../components/Header'; | |||
import TopThree from './TopThree'; | |||
import BottomTwo from './BottomTwo'; | |||
import screenfull from 'screenfull' | |||
import { debounce } from '@/utils/debounce' | |||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface' | |||
export default { | |||
name: 'deepProcessingBoard', | |||
components: { | |||
KHeader, | |||
TopThree, | |||
BottomTwo | |||
}, | |||
// provide() { | |||
// return { | |||
// resizeChart: null, | |||
// }; | |||
// }, | |||
data() { | |||
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() | |||
}) | |||
// closeWebsocket() | |||
// getDcsMsg() | |||
// getMesMsg() | |||
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.wholePlantContainerB) | |||
}, | |||
resetSize() { | |||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer') | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(wholePlantContainerBox.style.width) | |||
let bh = parseFloat(wholePlantContainerBox.style.height) | |||
let wx = 0 | |||
let hx = 0 | |||
if (screenfull.isFullscreen) { | |||
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 | |||
} | |||
} | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.deepProcessingBoard { | |||
background: url(../assets/bg.png) no-repeat; | |||
background-size: cover; | |||
background-position: 0 0; | |||
overflow: auto; | |||
} | |||
</style> |
@@ -31,8 +31,8 @@ | |||
justify-content: space-between; | |||
"> | |||
<SelectorBtnGroup | |||
:options="['电耗能', '天然气I', '天然气II']" /> | |||
<SelectorBtnGroup :options="['周', '月', '年']" /> | |||
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/> | |||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/> | |||
</div> | |||
<div class="chart" style="height: 200px; margin-top: 8px;"> | |||
<GasChart /> | |||
@@ -65,7 +65,16 @@ export default { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
methods: { | |||
// 切换能源 | |||
toggleType() { | |||
}, | |||
// 切换时间 | |||
toggleDate() { | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -25,7 +25,7 @@ | |||
import MaterialCost from './MaterialCost.vue'; | |||
import FanSequence from './FanSequence.vue'; | |||
import IsraCheck from './IsraCheck.vue'; | |||
import EnergeCost from './EnergeCost.vue'; | |||
import EnergeCost from './EnergeCost'; | |||
export default { | |||
name: 'LeftFour', | |||
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence }, | |||
@@ -7,36 +7,66 @@ | |||
<template> | |||
<Container name="原料用量统计" size="middle" style=""> | |||
<div | |||
class="absolute" | |||
style=" | |||
padding: 12px; | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
grid-auto-rows: auto; | |||
gap: 8px; | |||
"> | |||
<ShadowRect v-for="n in 9" :key="n" :rounded="false"> | |||
<div | |||
class="material" | |||
style=" | |||
flex: 1; | |||
padding: 12px 6px 20px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 4px; | |||
align-items: center; | |||
justify-content: center; | |||
"> | |||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px"> | |||
234 | |||
</span> | |||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px"> | |||
- 原料1/吨 - | |||
</span> | |||
</div> | |||
</ShadowRect> | |||
<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;"> | |||
<div | |||
class="absolute" | |||
style=" | |||
flex:3; | |||
padding: 12px 12px 0 12px; | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
grid-auto-rows: repeat(4, 1fr); | |||
gap: 8px; | |||
"> | |||
<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false"> | |||
<div | |||
class="material" | |||
style=" | |||
flex: 1; | |||
padding-bottom: 3px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 4px; | |||
align-items: center; | |||
justify-content: center; | |||
"> | |||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"> | |||
{{item.materialUsed}} | |||
</span> | |||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px"> | |||
- {{item.materialName}} - | |||
</span> | |||
</div> | |||
</ShadowRect> | |||
</div> | |||
<div style="flex:1; | |||
padding: 0 12px 12px 12px; | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 8px;"> | |||
<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false"> | |||
<div | |||
class="material" | |||
style=" | |||
flex: 1; | |||
padding-bottom: 3px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 4px; | |||
align-items: center; | |||
justify-content: center; | |||
"> | |||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"> | |||
{{item.materialUsed}} | |||
</span> | |||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px"> | |||
- {{item.materialName}} - | |||
</span> | |||
</div> | |||
</ShadowRect> | |||
</div> | |||
</div> | |||
</Container> | |||
</template> | |||
@@ -50,7 +80,14 @@ export default { | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
computed: { | |||
materialMsg1() { | |||
return this.$store.state.websocket.material.slice(0,9) | |||
}, | |||
materialMsg2() { | |||
return this.$store.state.websocket.material.slice(9) | |||
} | |||
}, | |||
methods: {}, | |||
}; | |||
</script> | |||
@@ -6,9 +6,9 @@ | |||
--> | |||
<template> | |||
<div id='kilnContainer' style="width: 100%;height: 100%;"> | |||
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;"> | |||
<div | |||
id='kilnContainerB' | |||
id='kilnContainer' | |||
ref='kilnContainer' | |||
class="KilnDataBoard" | |||
style=" | |||
@@ -24,7 +24,7 @@ | |||
gap: 24px; | |||
" | |||
:style="{transform:'scale('+scaleNum+')'}"> | |||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange'/> | |||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/> | |||
<div | |||
class="main-body" | |||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> | |||
@@ -45,7 +45,7 @@ import LeftFour from './LeftFour'; | |||
import RightTwo from './RightTwo.vue'; | |||
import screenfull from 'screenfull' | |||
import { debounce } from '@/utils/debounce' | |||
import { getDcsMsg } from './../utils/dcs' | |||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface' | |||
export default { | |||
name: 'KilnDataBoard', | |||
@@ -82,6 +82,7 @@ export default { | |||
// this.getMes() | |||
// closeWebsocket() | |||
getDcsMsg() | |||
// getMesMsg() | |||
console.log('mounted...........') | |||
}, | |||
destroyed() { | |||
@@ -112,13 +113,10 @@ export default { | |||
}) | |||
return false | |||
} | |||
screenfull.toggle(this.$refs.kilnContainer) | |||
console.log('11111') | |||
// this.resetSize() | |||
console.log('2222') | |||
screenfull.toggle(this.$refs.kilnContainerB) | |||
}, | |||
resetSize() { | |||
let kilnContainerBox = document.querySelector('#kilnContainerB') | |||
let kilnContainerBox = document.querySelector('#kilnContainer') | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(kilnContainerBox.style.width) | |||
@@ -142,26 +140,7 @@ export default { | |||
} | |||
} | |||
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> | |||
@@ -1,34 +0,0 @@ | |||
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) | |||
} | |||
) | |||
} |
@@ -1,34 +0,0 @@ | |||
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) | |||
} | |||
) | |||
} |
@@ -0,0 +1,100 @@ | |||
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('dcs成功的回调函数, 接收到的data数据: ', data) | |||
let msgData = JSON.parse(data) | |||
if (msgData == null) return; | |||
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; | |||
} | |||
case "GasInfo": { | |||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data}) | |||
break; | |||
} | |||
default: | |||
} | |||
}, | |||
// websocket连接失败的回调函数 | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
} | |||
// 创建mes链接 | |||
export const getMesMsg = () => { | |||
const sj = new Date().getTime() | |||
// ISRA | |||
connectWebsocket( | |||
// 测试地址 | |||
'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
(data) => { | |||
console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data) | |||
let msgData = JSON.parse(data) | |||
if (msgData == null) return; | |||
switch (msgData?.type) { | |||
case "israKiln": { | |||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic}) | |||
break; | |||
} | |||
// case "KilnInfo": { | |||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) | |||
// break; | |||
// } | |||
default: | |||
} | |||
}, | |||
// websocket连接失败的回调函数 | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
// 原料 MA | |||
connectWebsocket( | |||
// 测试地址 | |||
'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
(data) => { | |||
console.log('mes 原料成功的回调函数, 接收到的data数据: ', data) | |||
let msgData = JSON.parse(data) | |||
if (msgData == null) return; | |||
switch (msgData?.type) { | |||
case "material": { | |||
store.dispatch({type: "websocket/setMaterial", payload:msgData.data}) | |||
break; | |||
} | |||
// case "KilnInfo": { | |||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) | |||
// break; | |||
// } | |||
default: | |||
} | |||
}, | |||
// websocket连接失败的回调函数 | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
} |
@@ -0,0 +1,29 @@ | |||
<template> | |||
<div | |||
class="left-two" | |||
style=" | |||
display: grid; | |||
gap: 16px; | |||
grid-template-rows: 462px 462px; | |||
"> | |||
<OrderStatus /> | |||
<YieldRate /> | |||
</div> | |||
</template> | |||
<script> | |||
import OrderStatus from './OrderStatus.vue'; | |||
import YieldRate from './YieldRate.vue'; | |||
export default { | |||
name: 'LeftFour', | |||
components: { OrderStatus, YieldRate }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,29 @@ | |||
<template> | |||
<div | |||
class="middle-two" | |||
style=" | |||
display: grid; | |||
gap: 16px; | |||
grid-template-rows: 462px 462px; | |||
"> | |||
<OrderStatus /> | |||
<YieldRate /> | |||
</div> | |||
</template> | |||
<script> | |||
import OrderStatus from './OrderStatus.vue'; | |||
import YieldRate from './YieldRate.vue'; | |||
export default { | |||
name: 'MiddleFour', | |||
components: { OrderStatus, YieldRate }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,14 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="订单完成情况" size="small" style=""> | |||
digndna | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
export default { | |||
name: 'OrderStatus', | |||
components: { Container }, | |||
} | |||
</script> |
@@ -0,0 +1,29 @@ | |||
<template> | |||
<div | |||
class="right-two" | |||
style=" | |||
display: grid; | |||
gap: 16px; | |||
grid-template-rows: 462px 462px; | |||
"> | |||
<OrderStatus /> | |||
<YieldRate /> | |||
</div> | |||
</template> | |||
<script> | |||
import OrderStatus from './OrderStatus.vue'; | |||
import YieldRate from './YieldRate.vue'; | |||
export default { | |||
name: 'RightFour', | |||
components: { OrderStatus, YieldRate }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,14 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="本日生产良品率" size="small" style=""> | |||
0000987 | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
export default { | |||
name: 'YieldRate', | |||
components: { Container }, | |||
} | |||
</script> |
@@ -0,0 +1,150 @@ | |||
<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: -8px; | |||
left: -16px; | |||
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" | |||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> | |||
<div class="left-side" style="flex: 1"> | |||
<LeftTwo /> | |||
</div> | |||
<div class="middle-side" style="flex: 1"> | |||
<MiddleTwo /> | |||
</div> | |||
<div class="right-side" style="flex: 1"> | |||
<RightTwo /> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import KHeader from '../components/Header'; | |||
import LeftTwo from './LeftTwo'; | |||
import MiddleTwo from './MiddleTwo'; | |||
import RightTwo from './RightTwo'; | |||
import screenfull from 'screenfull' | |||
import { debounce } from '@/utils/debounce' | |||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface' | |||
export default { | |||
name: 'wholePlantBoard', | |||
components: { | |||
KHeader, | |||
LeftTwo, | |||
MiddleTwo, | |||
RightTwo | |||
}, | |||
// provide() { | |||
// return { | |||
// resizeChart: null, | |||
// }; | |||
// }, | |||
data() { | |||
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() | |||
}) | |||
// closeWebsocket() | |||
// getDcsMsg() | |||
// getMesMsg() | |||
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.wholePlantContainerB) | |||
}, | |||
resetSize() { | |||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer') | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(wholePlantContainerBox.style.width) | |||
let bh = parseFloat(wholePlantContainerBox.style.height) | |||
let wx = 0 | |||
let hx = 0 | |||
if (screenfull.isFullscreen) { | |||
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 | |||
} | |||
} | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.wholePlantBoard { | |||
background: url(../assets/bg.png) no-repeat; | |||
background-size: cover; | |||
background-position: 0 0; | |||
overflow: auto; | |||
} | |||
</style> |