projects/mesxc-zjl #163
@ -1,6 +1,10 @@
|
|||||||
const state = {
|
const state = {
|
||||||
fanFrequencyInfo:{},
|
fanFrequencyInfo:{},// 分机运行频率
|
||||||
kilnInfo:{}
|
kilnInfo:{},// 窑炉信息
|
||||||
|
gasInfo:{},// 天然气
|
||||||
|
|
||||||
|
israKiln:[],// ISRA缺陷检测
|
||||||
|
material:[]// 原料
|
||||||
};
|
};
|
||||||
const mutations = {
|
const mutations = {
|
||||||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
|
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
|
||||||
@ -8,6 +12,17 @@ const mutations = {
|
|||||||
},
|
},
|
||||||
SET_KILNINFO: (state, kilnInfo) => {
|
SET_KILNINFO: (state, kilnInfo) => {
|
||||||
state.kilnInfo = 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 = {
|
const actions = {
|
||||||
@ -16,7 +31,18 @@ const actions = {
|
|||||||
},
|
},
|
||||||
setKilnInfo({ commit }, kilnInfo) {
|
setKilnInfo({ commit }, kilnInfo) {
|
||||||
commit('SET_KILNINFO', kilnInfo.payload)
|
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 {
|
export default {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
|
|||||||
@ -116,6 +116,9 @@ export default {
|
|||||||
sidebarStatus() {
|
sidebarStatus() {
|
||||||
return this.$store.state.app.sidebar.opened;
|
return this.$store.state.app.sidebar.opened;
|
||||||
},
|
},
|
||||||
|
gasChartMsg() {
|
||||||
|
return this.$store.state.websocket.gasInfo
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
sidebarStatus(val) {
|
sidebarStatus(val) {
|
||||||
@ -127,6 +130,14 @@ export default {
|
|||||||
this.chart.setOption(this.option);
|
this.chart.setOption(this.option);
|
||||||
}, 500);
|
}, 500);
|
||||||
},
|
},
|
||||||
|
gasChartMsg: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
console.log(newVal)
|
||||||
|
// this.chartData = newVal
|
||||||
|
console.log('newVal============')
|
||||||
|
// this.updateChart()
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$el.addEventListener('resize', () => {
|
this.$el.addEventListener('resize', () => {
|
||||||
|
|||||||
@ -7,9 +7,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="kiln-header">
|
<header class="kiln-header">
|
||||||
<h1>
|
<h1>{{topTitle}}</h1>
|
||||||
窑炉生产运行驾驶舱
|
|
||||||
</h1>
|
|
||||||
<!-- left: 312px; -->
|
<!-- left: 312px; -->
|
||||||
<div
|
<div
|
||||||
class="firm">
|
class="firm">
|
||||||
@ -38,7 +36,9 @@ export default {
|
|||||||
name: 'KilnHeader',
|
name: 'KilnHeader',
|
||||||
// components: { DateBtnGroup },
|
// components: { DateBtnGroup },
|
||||||
props: {
|
props: {
|
||||||
isFullScreen:false
|
isFullScreen:false,
|
||||||
|
topTitle: ''
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -21,8 +21,9 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
|
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||||
|
chartData: [],
|
||||||
option: {
|
option: {
|
||||||
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
@ -35,7 +36,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: 11234,
|
text: 0,
|
||||||
subtext: '总数',
|
subtext: '总数',
|
||||||
top: '43%',
|
top: '43%',
|
||||||
left: '49%',
|
left: '49%',
|
||||||
@ -47,11 +48,62 @@ export default {
|
|||||||
},
|
},
|
||||||
subtextStyle: {
|
subtextStyle: {
|
||||||
fontSize: 16,
|
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',
|
name: 'Access From',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['45%', '65%'],
|
radius: ['45%', '65%'],
|
||||||
@ -60,10 +112,6 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
position: 'outside',
|
position: 'outside',
|
||||||
formatter: ({ dataIndex, percent }) => {
|
formatter: ({ dataIndex, percent }) => {
|
||||||
// console.log(
|
|
||||||
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
|
|
||||||
// percent
|
|
||||||
// );
|
|
||||||
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
|
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
|
||||||
return `{${styleName}|${percent}%}`;
|
return `{${styleName}|${percent}%}`;
|
||||||
},
|
},
|
||||||
@ -98,141 +146,28 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderRadius: 12,
|
borderRadius: 12
|
||||||
// borderColor: 'transparent',
|
|
||||||
// borderWidth: 20
|
|
||||||
},
|
},
|
||||||
data: [
|
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||||
{
|
name:item.name,
|
||||||
value: 1048,
|
value: item.num,
|
||||||
name: '缺陷1',
|
itemStyle:{
|
||||||
itemStyle: {
|
color:{
|
||||||
color: {
|
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
x: 1,
|
x: 1,
|
||||||
y: 1,
|
y: 1,
|
||||||
x2: 0,
|
x2: 0,
|
||||||
y2: 0,
|
y2: 0,
|
||||||
colorStops: [
|
global: false,
|
||||||
{
|
colorStops:[
|
||||||
offset: 0,
|
{offset: 0,color: this.colors[index%4]},
|
||||||
color: '#2760ff', // 0% 处的颜色
|
{offset: 1,color: this.colors[index%4]+'33'}
|
||||||
},
|
]
|
||||||
// {
|
}
|
||||||
// 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);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -29,7 +29,9 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {},
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
29
src/views/databoard/deepProcessing/BottomTwo.vue
Normal file
29
src/views/databoard/deepProcessing/BottomTwo.vue
Normal file
@ -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>
|
||||||
14
src/views/databoard/deepProcessing/OrderStatus.vue
Normal file
14
src/views/databoard/deepProcessing/OrderStatus.vue
Normal file
@ -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>
|
||||||
29
src/views/databoard/deepProcessing/TopThree.vue
Normal file
29
src/views/databoard/deepProcessing/TopThree.vue
Normal file
@ -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>
|
||||||
14
src/views/databoard/deepProcessing/YieldRate.vue
Normal file
14
src/views/databoard/deepProcessing/YieldRate.vue
Normal file
@ -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>
|
||||||
145
src/views/databoard/deepProcessing/index.vue
Normal file
145
src/views/databoard/deepProcessing/index.vue
Normal file
@ -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;
|
justify-content: space-between;
|
||||||
">
|
">
|
||||||
<SelectorBtnGroup
|
<SelectorBtnGroup
|
||||||
:options="['电耗能', '天然气I', '天然气II']" />
|
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
|
||||||
<SelectorBtnGroup :options="['周', '月', '年']" />
|
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
<div class="chart" style="height: 200px; margin-top: 8px;">
|
||||||
<GasChart />
|
<GasChart />
|
||||||
@ -65,7 +65,16 @@ export default {
|
|||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {},
|
methods: {
|
||||||
|
// 切换能源
|
||||||
|
toggleType() {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 切换时间
|
||||||
|
toggleDate() {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
import MaterialCost from './MaterialCost.vue';
|
import MaterialCost from './MaterialCost.vue';
|
||||||
import FanSequence from './FanSequence.vue';
|
import FanSequence from './FanSequence.vue';
|
||||||
import IsraCheck from './IsraCheck.vue';
|
import IsraCheck from './IsraCheck.vue';
|
||||||
import EnergeCost from './EnergeCost.vue';
|
import EnergeCost from './EnergeCost';
|
||||||
export default {
|
export default {
|
||||||
name: 'LeftFour',
|
name: 'LeftFour',
|
||||||
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
|
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
|
||||||
|
|||||||
@ -7,36 +7,66 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container name="原料用量统计" size="middle" style="">
|
<Container name="原料用量统计" size="middle" style="">
|
||||||
|
<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
|
||||||
<div
|
<div
|
||||||
class="absolute"
|
class="absolute"
|
||||||
style="
|
style="
|
||||||
padding: 12px;
|
flex:3;
|
||||||
|
padding: 12px 12px 0 12px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
grid-auto-rows: auto;
|
grid-auto-rows: repeat(4, 1fr);
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
">
|
">
|
||||||
<ShadowRect v-for="n in 9" :key="n" :rounded="false">
|
<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
|
||||||
<div
|
<div
|
||||||
class="material"
|
class="material"
|
||||||
style="
|
style="
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 12px 6px 20px;
|
padding-bottom: 3px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
">
|
">
|
||||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
|
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||||
234
|
{{item.materialUsed}}
|
||||||
</span>
|
</span>
|
||||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||||
- 原料1/吨 -
|
- {{item.materialName}} -
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</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>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -50,7 +80,14 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {
|
||||||
|
materialMsg1() {
|
||||||
|
return this.$store.state.websocket.material.slice(0,9)
|
||||||
|
},
|
||||||
|
materialMsg2() {
|
||||||
|
return this.$store.state.websocket.material.slice(9)
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -6,9 +6,9 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id='kilnContainer' style="width: 100%;height: 100%;">
|
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
|
||||||
<div
|
<div
|
||||||
id='kilnContainerB'
|
id='kilnContainer'
|
||||||
ref='kilnContainer'
|
ref='kilnContainer'
|
||||||
class="KilnDataBoard"
|
class="KilnDataBoard"
|
||||||
style="
|
style="
|
||||||
@ -24,7 +24,7 @@
|
|||||||
gap: 24px;
|
gap: 24px;
|
||||||
"
|
"
|
||||||
:style="{transform:'scale('+scaleNum+')'}">
|
:style="{transform:'scale('+scaleNum+')'}">
|
||||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange'/>
|
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
|
||||||
<div
|
<div
|
||||||
class="main-body"
|
class="main-body"
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||||
@ -45,7 +45,7 @@ import LeftFour from './LeftFour';
|
|||||||
import RightTwo from './RightTwo.vue';
|
import RightTwo from './RightTwo.vue';
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull'
|
||||||
import { debounce } from '@/utils/debounce'
|
import { debounce } from '@/utils/debounce'
|
||||||
import { getDcsMsg } from './../utils/dcs'
|
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'KilnDataBoard',
|
name: 'KilnDataBoard',
|
||||||
@ -82,6 +82,7 @@ export default {
|
|||||||
// this.getMes()
|
// this.getMes()
|
||||||
// closeWebsocket()
|
// closeWebsocket()
|
||||||
getDcsMsg()
|
getDcsMsg()
|
||||||
|
// getMesMsg()
|
||||||
console.log('mounted...........')
|
console.log('mounted...........')
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
@ -112,13 +113,10 @@ export default {
|
|||||||
})
|
})
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
screenfull.toggle(this.$refs.kilnContainer)
|
screenfull.toggle(this.$refs.kilnContainerB)
|
||||||
console.log('11111')
|
|
||||||
// this.resetSize()
|
|
||||||
console.log('2222')
|
|
||||||
},
|
},
|
||||||
resetSize() {
|
resetSize() {
|
||||||
let kilnContainerBox = document.querySelector('#kilnContainerB')
|
let kilnContainerBox = document.querySelector('#kilnContainer')
|
||||||
let rw = parseFloat(window.innerWidth)
|
let rw = parseFloat(window.innerWidth)
|
||||||
let rh = parseFloat(window.innerHeight)
|
let rh = parseFloat(window.innerHeight)
|
||||||
let bw = parseFloat(kilnContainerBox.style.width)
|
let bw = parseFloat(kilnContainerBox.style.width)
|
||||||
@ -142,25 +140,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.scaleNum = wx
|
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)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
100
src/views/databoard/utils/wsInterface.js
Normal file
100
src/views/databoard/utils/wsInterface.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
29
src/views/databoard/wholePlant/LeftTwo.vue
Normal file
29
src/views/databoard/wholePlant/LeftTwo.vue
Normal file
@ -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>
|
||||||
29
src/views/databoard/wholePlant/MiddleTwo.vue
Normal file
29
src/views/databoard/wholePlant/MiddleTwo.vue
Normal file
@ -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>
|
||||||
14
src/views/databoard/wholePlant/OrderStatus.vue
Normal file
14
src/views/databoard/wholePlant/OrderStatus.vue
Normal file
@ -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>
|
||||||
29
src/views/databoard/wholePlant/RightTwo.vue
Normal file
29
src/views/databoard/wholePlant/RightTwo.vue
Normal file
@ -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>
|
||||||
14
src/views/databoard/wholePlant/YieldRate.vue
Normal file
14
src/views/databoard/wholePlant/YieldRate.vue
Normal file
@ -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>
|
||||||
150
src/views/databoard/wholePlant/index.vue
Normal file
150
src/views/databoard/wholePlant/index.vue
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user