mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

12.29

Browse Source
This commit is contained in:
朱菊兰
2023-12-29 09:26:07 +08:00
parent 9690ab4f70
commit 35bcb23920
23 changed files with 809 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/databoard/kiln/EnergeCost.vue
View File

@@ -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>

2
src/views/databoard/kiln/LeftFour.vue
View File

@@ -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 },

97
src/views/databoard/kiln/MaterialCost.vue
View File

@@ -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>

37
src/views/databoard/kiln/index.vue
View File

@@ -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>