mt-fe-group/dezhou-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb
2023-05-11 16:05:55 +08:00
parent bdccab85c9
commit 6ef1d50911
13 changed files with 273 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/boxes/FanRuntime.vue
View File

@@ -6,7 +6,7 @@
<table class="table-1 flex-1 align-start">
<thead>
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
<tr>
<tr class="t-row">
<th>序号</th>
<th>设备名称</th>
<th>运行频率</th>
@@ -38,7 +38,7 @@
<div class="vertical-line"></div>
<table class="table-2 flex-1 align-start">
<thead>
<tr>
<tr class="t-row">
<th>序号</th>
<th>设备名称</th>
<th>运行频率</th>

2
src/components/boxes/HistoryTemp.vue
View File

@@ -37,6 +37,6 @@ h3 {
font-size: adjust(10px);
letter-spacing: adjust(1px);
color: #52fff8;
margin: 8px 0;
margin: adjust(12px) 0;
}
</style>

15
src/components/boxes/TopTemp.vue
View File

@@ -3,9 +3,9 @@
<Container usage="Charts">
<SubContainer title="窑顶温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" />
<LineChart key="1" id="line-chart-5" class="flex-1" :legend="Object.keys(chartOne)" :series="chartOne" />
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-6" class="flex-1" :config="chartConfig" />
<LineChart key="2" id="line-chart-6" class="flex-1" :legend="Object.keys(chartTwo)" :series="chartTwo" />
</div>
</SubContainer>
</Container>
@@ -18,7 +18,16 @@ import SubContainer from "../layout/SubContainer.vue";
export default {
name: "TopTemp",
props: {},
props: {
chartOne: {
type: Object,
default: () => ({})
},
chartTwo: {
type: Object,
default: () => ({})
}
},
components: { Container, SubContainer, LineChart },
data() {
return {

1
src/components/charts/BarChart.vue
View File

@@ -76,6 +76,7 @@ export default {
color: "#ffffff",
fontSize: adjust(7),
lineHeight: adjust(1),
margin: adjust(8)
},
},
yAxis: {

132
src/components/charts/LineChart.vue
View File

@@ -1,17 +1,31 @@
<template>
<!-- line chart -->
<div class="line-chart__wrapper">
<div class="line-chart__custom-legend flex">
<span>产线1 - 产线5</span>
<div class="line-chart__wrapper" style="overflow: hidden;">
<div class="line-chart__custom-legend flex" v-if="legend.length">
<!-- <span>产线1 - 产线5</span> -->
<ul style="" class="flex">
<li>产线1</li>
<li>产线2</li>
<li>产线3</li>
<li>产线4</li>
<li>产线5</li>
<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
</ul>
</div>
<div :id="id" style="width: 100%; height: 100%"></div>
<div
v-show="legend.length === 0"
style="
position: absolute;
top: 0;
left: 0;
background: #eee0;
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-size: 24px;
color: #eee8;
user-select: none;
"
>
无数据
</div>
</div>
</template>
@@ -56,6 +70,14 @@ export default {
title: { text: "default chart" },
}),
},
legend: {
type: Array,
default: () => [],
},
series: {
type: Object,
default: () => ({}),
},
},
data() {
return {
@@ -66,7 +88,7 @@ export default {
"#F31868",
"#30E89A",
"#2760FF",
"#2f0fff",
"#723fff",
"#ee3fff",
"#800f77",
"#f77",
@@ -84,30 +106,18 @@ export default {
if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
// title: {
// text: "ECharts 入门示例",
// },
grid: {
top: adjust(32),
left: adjust(32),
bottom: adjust(24),
right: adjust(12),
},
// tooltip: {
// trigger: "axis",
// axisPointer: {
// lineStyle: {
// color: "#eee3",
// },
// },
// },
xAxis: {
data: Array(31)
data: Array(24)
.fill(1)
.map((_, index) => index + 1),
axisLine: {
lineStyle: {
// width: 1,
color: "#5982b2a0",
},
},
@@ -118,6 +128,7 @@ export default {
color: "#ffffff",
fontSize: adjust(6),
lineHeight: adjust(1),
margin: adjust(8),
},
},
yAxis: {
@@ -126,9 +137,6 @@ export default {
nameTextStyle: {
color: "#fff9",
fontSize: adjust(6),
// lineHeight: 6,
// height: 6,
// padding: 0,
align: "right",
},
axisLine: {
@@ -154,10 +162,34 @@ export default {
// data: [100, 200, 300, 400, 500],
},
color: this.colors,
series: Array(5)
// series: Array(5)
// .fill(1)
// .map((_, index) => ({
// name: Math.random(),
// type: "line",
// symbol: "circle",
// symbolSize: adjust(3),
// lineStyle: {
// width: adjust(1),
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: this.colors[index] + "33" },
// { offset: 1, color: "transparent" },
// ]),
// },
// data: Array(31)
// .fill(1)
// .map(() => {
// let v = Math.floor(Math.random() * 5000);
// while (v < 3000) v = Math.floor(Math.random() * 5000);
// return v;
// }),
// })),
series: Array(this.legend)
.fill(1)
.map((_, index) => ({
name: Math.random(),
.map((lgd, index) => ({
name: lgd,
type: "line",
symbol: "circle",
symbolSize: adjust(3),
@@ -165,35 +197,12 @@ export default {
width: adjust(1),
},
areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: this.colors[index]+'66',
// },
// // { offset: 0.3, color: this.colors[index]+'aa' },
// // { offset: 0.35, color: this.colors[index]+'77' },
// // { offset: 1, color: this.colors[index]+'00' },
// { offset: .5, color: 'transparent' },
// ],
// },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.colors[index] + "33" },
{ offset: 1, color: "transparent" },
]),
},
data: Array(31)
.fill(1)
.map(() => {
let v = Math.floor(Math.random() * 5000);
while (v < 3000) v = Math.floor(Math.random() * 5000);
return v;
}),
data: this.series[this.legend],
})),
});
},
@@ -253,30 +262,33 @@ li:nth-child(1)::before {
background: #18c7f3;
}
li:nth-child(2)::before {
background: #f31868;
background: #ffd160;
}
li:nth-child(3)::before {
background: #30e89a;
background: #f31868;
}
li:nth-child(4)::before {
background: #2760ff;
background: #30e89a;
}
li:nth-child(5)::before {
background: #ee3fff;
background: #2760ff;
}
li:nth-child(6)::before {
background: #2f0fff;
background: #723fff;
}
li:nth-child(7)::before {
background: #800f77;
background: #ee3fff;
}
li:nth-child(8)::before {
background: #f77;
background: #800f77;
}
li:nth-child(9)::before {
background: #19f;
background: #f77;
}
li:nth-child(10)::before {
background: #19f;
}
li:nth-child(11)::before {
background: #98f;
}

14
src/components/icons/clockSvg.vue
View File

@@ -1,7 +1,7 @@
<template>
<svg
width="adjust(64px)"
height="adjust(64px)"
:width="adjust('64px')"
:height="adjust('64px')"
viewBox="0 0 95 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,13 @@
</g>
</svg>
</template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

14
src/components/icons/fireSvg.vue
View File

@@ -1,7 +1,7 @@
<template>
<svg
width="adjust(64px)"
height="adjust(64px)"
:width="adjust('64px')"
:height="adjust('64px')"
viewBox="0 0 94 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,13 @@
</g>
</svg>
</template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

14
src/components/icons/sandSvg.vue
View File

@@ -1,7 +1,7 @@
<template>
<svg
width="adjust(64px)"
height="adjust(64px)"
:width="adjust('64px')"
:height="adjust('64px')"
viewBox="0 0 95 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,13 @@
</g>
</svg>
</template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

14
src/components/icons/switchSvg.vue
View File

@@ -1,7 +1,7 @@
<template>
<svg
width="adjust(64px)"
height="adjust(64px)"
:width="adjust('64px')"
:height="adjust('64px')"
viewBox="0 0 122 122"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@@ -97,3 +97,13 @@
</g>
</svg>
</template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

13
src/components/icons/tempSvg.vue
View File

@@ -1,7 +1,7 @@
<template>
<svg
width="adjust(64px)"
height="adjust(64px)"
:width="adjust('64px')"
:height="adjust('64px')"
viewBox="0 0 94 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@@ -78,3 +78,12 @@
</g>
</svg>
</template>
<script>
export default {
methods: {
adjust(v) {
return +(v.slice(0, -2)) * 2 + 'px' ;
},
},
};
</script>

34
src/components/layout/Main.vue
View File

@@ -47,7 +47,7 @@
<GasFlow />
</div>
<div class="absolute left top-temp">
<TopTemp />
<TopTemp :chart-one="kilnTop1" :chart-two="kilnTop2" />
</div>
<div class="absolute left bottom-temp">
<BottomTemp />
@@ -77,12 +77,10 @@ import OutWater from "../boxes/OutWater.vue";
import FanRuntime from "../boxes/FanRuntime.vue";
import AreaOne from "../isolate-area-1/Area.vue";
// import Container from './Container.vue'
import { mapMutations, mapState } from "vuex";
import WsClient from "../../utils/wsClass";
const wsc = new WsClient();
wsc.registerListeners();
export default {
name: "Main",
components: {
@@ -102,6 +100,34 @@ export default {
data() {
return {};
},
computed: mapState([
"kilnPressure",
"oilTable1",
"oilTable2",
"gasTable1",
"gasTable2",
"kilnTop1",
"kilnTop2",
"kilnBtm1",
"kilnBtm2",
"xiCao1",
"xiCao2",
"kilnWaterIn",
"kilnWaterOut",
]),
mounted() {
const wsc = new WsClient(this);
wsc.registerListeners();
},
// watch: {
// // works
// 'kilnTop1': val => {
// console.log('val', val)
// }
// },
methods: {
...mapMutations(["update"]),
},
};
</script>

78
src/store/index.js
View File

@@ -5,10 +5,88 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
kilnPressure: 999,
oilTable1: {},
oilTable2: {},
gasTable1: {},
gasTable2: {},
kilnTop1: {},
kilnTop2: {},
kilnBtm1: {},
kilnBtm2: {},
xiCao1: {},
xiCao2: {},
kilnWaterIn: {},
kilnWaterOut: {}
},
getters: {
},
mutations: {
update(state, payload) {
switch (payload.target) {
case 'oil-1': {
state.oilTable1 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'oil-2': {
state.oilTable2 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'gas-1': {
state.gasTable1 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'gas-2': {
state.gasTable2 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'kiln-top-1': {
state.kilnTop1 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'kiln-top-2': {
state.kilnTop2 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'kiln-btm-1': {
state.kilnBtm1 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'kiln-btm-2': {
state.kilnBtm2 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'kiln-water-in': {
state.kilnWaterIn = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'kiln-water-out': {
state.kilnWaterOut = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'xicao-1': {
state.xiCao1 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
case 'xicao-2': {
state.xiCao2 = payload.data
console.log('更换' + payload.target + '的数据')
break
}
}
}
},
actions: {
},

22
src/utils/wsClass.js
View File

@@ -10,8 +10,9 @@ function handleData(e) {
try {
const latestData = JSON.parse(e.data)
console.log('处理数据: ', latestData)
for ([value, key] in Object.entries(latestData)) {
console.log('k, v', key, value)
for (const [key, value] of Object.entries(latestData)) {
console.log('kkk', key, WsClient.tableMap[key])
this.update({ target: WsClient.tableMap[key], data: value })
}
} catch (err) {
console.log(e)
@@ -36,11 +37,24 @@ export default class WsClient {
static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
static tableMap = {
// 窑顶温度
'kilnTempTopT1': 'kiln-top-1',
'kilnTempTopT2': 'kiln-top-2',
'kilnTempBottomT1': 'kiln-btm-1',
'kilnTempBottomT2': 'kiln-btm-2',
'kilnTempWaterT1': 'kiln-water-in',
'kilnTempWaterT2': 'kiln-water-out',
'kilnTempTinbathT1': 'kiln-water-in',
'kilnTempTinbathT2': 'kiln-water-out',
'kilnGasT1': 'gas-1',
'kilnGasT2': 'gas-2',
'kilnOilT1': 'oil-1',
'kilnOilT2': 'oil-2',
}
static socket = null
constructor() {
constructor(vm) {
WsClient.socket = WsClient.createSocket()
this.vueInstance = vm
}
closeSocket() {
@@ -53,7 +67,7 @@ export default class WsClient {
WsClient.createSocket()
}
if (!WsClient.socket.onopen) WsClient.socket.onopen = handleOpen
if (!WsClient.socket.onmessage) WsClient.socket.onmessage = handleData
if (!WsClient.socket.onmessage) WsClient.socket.onmessage = handleData.bind(this.vueInstance)
if (!WsClient.socket.onerror) WsClient.socket.onerror = handleError
if (!WsClient.socket.onclose) WsClient.socket.onclose = handleClose
}