微工厂环境大屏
This commit is contained in:
hzz
parent
0878434b03
commit
5c00f76020
BIN
src/assets/indexImg/MicEnvironment.png
Normal file
BIN
src/assets/indexImg/MicEnvironment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
@ -33,3 +33,11 @@ export function getCuttingLineHistogramData(){
|
|||||||
export function getActivationData(){
|
export function getActivationData(){
|
||||||
return get('/device/getActivation')
|
return get('/device/getActivation')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 微工厂环境
|
||||||
|
*/
|
||||||
|
export function getSensorByDeptId(data){
|
||||||
|
return get('/device/getSensorByDeptId',data)
|
||||||
|
}
|
||||||
|
|||||||
67
src/store/moduleSocketMicEnvironment.ts
Normal file
67
src/store/moduleSocketMicEnvironment.ts
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
/*
|
||||||
|
* @FilePath: \wwwd:\code\screenFront\src\store\moduleSocketjixie.ts
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-02-06 15:58:13
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
*/
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { Names } from '@/store/storeName'
|
||||||
|
import { gettime, clacendTime } from "@/utils/time"
|
||||||
|
export const useSocketStore = defineStore(Names.socketMicEnvironment, {
|
||||||
|
// 使用方式
|
||||||
|
// const Index= useIndexStore()
|
||||||
|
// 1、Index.{数据}++
|
||||||
|
// 2、Index.$patch({数据:??})
|
||||||
|
// 3、Index.$patch((state)=>{ state.数据=??})
|
||||||
|
// 4、通过action修改
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
humiture:
|
||||||
|
{ "devId": "", "name": "温湿度", "temp": "0", "humidity": "0" },
|
||||||
|
|
||||||
|
// humiture:{Humiture:[],bottom:{humidity:null,temp:null,name:null},top:{humidity:null,temp:null,name:null}}, //温湿度
|
||||||
|
pm: { "devId": "", "name": "粉尘", "pm25": "0", "pm10": "0" },
|
||||||
|
verticalArr:[]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//computed 修改一些值
|
||||||
|
//需要使用return将数据抛出
|
||||||
|
//getters内可相互使用计算结果
|
||||||
|
//使用时可直接放入标签内<div>Index.方法()</div>
|
||||||
|
getters: {
|
||||||
|
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
//初始化
|
||||||
|
setVerticalArr(val){
|
||||||
|
this.verticalArr=val
|
||||||
|
},
|
||||||
|
sethumiture(val){
|
||||||
|
this.humiture=val
|
||||||
|
},
|
||||||
|
setpm(val){
|
||||||
|
this.pm=val
|
||||||
|
},
|
||||||
|
changehumiture(val){
|
||||||
|
this.humiture.temp = val.temp
|
||||||
|
this.humiture.humidity = val.humidity
|
||||||
|
},
|
||||||
|
changePm(val){
|
||||||
|
this.pm.pm25 = val.pm25
|
||||||
|
this.pm.pm10 = val.pm10
|
||||||
|
},
|
||||||
|
changeVerticalArr(val){
|
||||||
|
this.verticalArr.forEach(res=>{
|
||||||
|
if(res.id==val.devId&&res.item.type==val.type){
|
||||||
|
res.item.val=val.val
|
||||||
|
res.item.status = val.status
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
@ -28,4 +28,5 @@ export const enum Names{
|
|||||||
MechanicalViewJingjia="MechanicalViewJingjia",
|
MechanicalViewJingjia="MechanicalViewJingjia",
|
||||||
MechanicalViewJingshi="MechanicalViewJingshi",
|
MechanicalViewJingshi="MechanicalViewJingshi",
|
||||||
socketMechanics='socketMechanics',
|
socketMechanics='socketMechanics',
|
||||||
|
socketMicEnvironment='socketMicEnvironment',
|
||||||
}
|
}
|
||||||
232
src/views/MicEnvironment/components/humidity.vue
Normal file
232
src/views/MicEnvironment/components/humidity.vue
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<border13>
|
||||||
|
<div class="container">
|
||||||
|
<div class="echartbox" ref="humiture"></div>
|
||||||
|
</div>
|
||||||
|
</border13>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch, onUnmounted,computed } from "vue";
|
||||||
|
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
|
||||||
|
import border13 from '@/components/border/Border13.vue'
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
const store = useSocketStore();
|
||||||
|
let index = 0;
|
||||||
|
let humiture = ref();
|
||||||
|
let chart = null
|
||||||
|
// const props = defineProps<{
|
||||||
|
// top: any;
|
||||||
|
// bottom: any;
|
||||||
|
// }>();
|
||||||
|
const borderColor = ["#E43961","#E43961"]
|
||||||
|
function init() {
|
||||||
|
|
||||||
|
if (!chart) {
|
||||||
|
chart = proxy.$echarts.init(humiture.value, 'dark');
|
||||||
|
}
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: store.humiture.name,
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
top: '2%'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
top: "0px",
|
||||||
|
left: "0px",
|
||||||
|
right: "0px",
|
||||||
|
bottom: "0px",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
center: ["50%", "90%"],
|
||||||
|
startAngle: 190,
|
||||||
|
endAngle: -10,
|
||||||
|
radius: "50%",
|
||||||
|
min: -30,
|
||||||
|
max: 50,
|
||||||
|
splitNumber: 10,
|
||||||
|
progress: {
|
||||||
|
show: false,
|
||||||
|
width: 5
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
itemStyle: {
|
||||||
|
color: 'inherit'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//刻度轴宽
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
color: [
|
||||||
|
[0.575, '#1089E7'],
|
||||||
|
[0.725, '#7CFFB2'],
|
||||||
|
[1, '#FF6E76']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//刻度线
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
distance: -5,
|
||||||
|
splitNumber: 5,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//刻度线
|
||||||
|
splitLine: {
|
||||||
|
distance: 5,
|
||||||
|
length: 3,
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//表刻度值
|
||||||
|
axisLabel: {
|
||||||
|
distance: 15,
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
// width: '10%',
|
||||||
|
// lineHeight: 5,
|
||||||
|
// borderRadius: 8,
|
||||||
|
offsetCenter: [0, '25%'],
|
||||||
|
fontSize: 15,
|
||||||
|
// fontWeight: 'bolder',
|
||||||
|
formatter: '{value} °C',
|
||||||
|
color: 'inherit'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: store.humiture.temp
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
center: ["50%", "55%"],
|
||||||
|
startAngle: 200,
|
||||||
|
endAngle: -20,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
progress: {
|
||||||
|
show: false,
|
||||||
|
width: 5
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
itemStyle: {
|
||||||
|
color: 'inherit'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//刻度轴宽
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
color: [
|
||||||
|
[0.4, '#FF6E76'],
|
||||||
|
[0.7, '#7CFFB2'],
|
||||||
|
[1, '#1089E7']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//刻度线
|
||||||
|
axisTick: {
|
||||||
|
distance: 0,
|
||||||
|
splitNumber: 5,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//刻度线
|
||||||
|
splitLine: {
|
||||||
|
distance: 5,
|
||||||
|
length: 3,
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance: 15,
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
offsetCenter: [0, '15%'],
|
||||||
|
fontSize: 20,
|
||||||
|
formatter: '{value} %RH',
|
||||||
|
color: 'inherit'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: store.humiture.humidity
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => store.humiture,
|
||||||
|
(newData) => {
|
||||||
|
init()
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
onMounted(() => {
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.errList {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.echartbox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
125
src/views/MicEnvironment/components/lineChart.vue
Normal file
125
src/views/MicEnvironment/components/lineChart.vue
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="chart" ref="chart"></div>
|
||||||
|
<div class="math-box">
|
||||||
|
<div class="math-content">
|
||||||
|
<div style="height: 25%;"> </div>
|
||||||
|
<div class="key">最大值</div>
|
||||||
|
<div class="key">最小值</div>
|
||||||
|
<div class="key">平均值</div>
|
||||||
|
</div>
|
||||||
|
<div class="math-content" v-for="(item,index) in calc.math">
|
||||||
|
<div :style="{color:color[index]}">{{ item.key }}</div>
|
||||||
|
<div>{{ item.value.max }}</div>
|
||||||
|
<div>{{ item.value.min }}</div>
|
||||||
|
<div>{{ item.value.avg }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref, onMounted, onUpdated, getCurrentInstance, watch } from "vue"
|
||||||
|
const prop = defineProps<{
|
||||||
|
calc: {
|
||||||
|
name: string,
|
||||||
|
math: {
|
||||||
|
key: string,
|
||||||
|
value: {
|
||||||
|
max: number,
|
||||||
|
min: number,
|
||||||
|
avg: number,
|
||||||
|
data: any[]
|
||||||
|
}
|
||||||
|
}[],
|
||||||
|
data: any
|
||||||
|
}
|
||||||
|
}>()
|
||||||
|
const { proxy } = getCurrentInstance() as any
|
||||||
|
const chart = ref()
|
||||||
|
let myChart = null
|
||||||
|
let data = prop.calc.data
|
||||||
|
let color = ['#4281E5','#78F7AE','#FF6E40']
|
||||||
|
function init() {
|
||||||
|
myChart = proxy.$echarts.init(chart.value, 'dark');
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: prop.calc.name,
|
||||||
|
top: "5%",
|
||||||
|
left: "5%"
|
||||||
|
},
|
||||||
|
color: color,
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "15%",
|
||||||
|
left: "5%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "5%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: data
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => prop.calc.data, (newVal) => {
|
||||||
|
data = newVal
|
||||||
|
myChart.setOption({
|
||||||
|
series: data
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: rgb(2, 106, 181) 0px 8px 8px;
|
||||||
|
}
|
||||||
|
.container:hover {
|
||||||
|
box-shadow: rgb(2, 106, 181) 0px 8px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
height: calc(100% - 90px);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.math-box {
|
||||||
|
height: 90px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.math-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.key {
|
||||||
|
color: #ff6e40;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
225
src/views/MicEnvironment/components/pm.vue
Normal file
225
src/views/MicEnvironment/components/pm.vue
Normal file
@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<border13>
|
||||||
|
<div class="container">
|
||||||
|
<div class="echartbox" ref="dust">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border13>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { getCurrentInstance, markRaw, onMounted, onUnmounted, reactive, ref, watch,computed } from "vue";
|
||||||
|
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
|
||||||
|
import border13 from '@/components/border/Border13.vue'
|
||||||
|
import { number } from "echarts/core";
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
const store = useSocketStore();
|
||||||
|
let index = 0;
|
||||||
|
let dust = ref();
|
||||||
|
let chart = ref(null)
|
||||||
|
const props = defineProps({
|
||||||
|
pm10limit:{
|
||||||
|
type:Number,
|
||||||
|
default:150
|
||||||
|
},
|
||||||
|
pm25limit:{
|
||||||
|
type:Number,
|
||||||
|
default:75
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const borderColor = ["#E43961","#E43961"]
|
||||||
|
function init() {
|
||||||
|
if (!chart.value) {
|
||||||
|
chart.value = proxy.$echarts.init(dust.value, 'dark');
|
||||||
|
}
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: store.pm.name,
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
top: '2%'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
top: "0px",
|
||||||
|
left: "0px",
|
||||||
|
right: "0px",
|
||||||
|
bottom: "0px",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
center: ["50%", "90%"],
|
||||||
|
startAngle: 190,
|
||||||
|
endAngle: -10,
|
||||||
|
radius: "50%",
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
splitNumber: 10,
|
||||||
|
pointer: {
|
||||||
|
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
|
||||||
|
length: "12%",
|
||||||
|
width: 10,
|
||||||
|
offsetCenter: [0, "-40%"],
|
||||||
|
itemStyle: {
|
||||||
|
color: "inherit",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 8,
|
||||||
|
color: [
|
||||||
|
[0.35, "#7CFFB2"],
|
||||||
|
[0.75, "#FDDD60"],
|
||||||
|
[1, "#FF6E76"],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
distance: 0,
|
||||||
|
splitNumber: 5,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
distance: 5,
|
||||||
|
length: 8,
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance: 12,
|
||||||
|
color: "#999",
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
width: "60%",
|
||||||
|
lineHeight: 20,
|
||||||
|
borderRadius: 8,
|
||||||
|
offsetCenter: [0, "20%"],
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: "bolder",
|
||||||
|
formatter: "{value} μg/m3",
|
||||||
|
color: "inherit",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
// show: false,
|
||||||
|
offsetCenter: [0, "-20%"],
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: store.pm.pm25,
|
||||||
|
name: "PM2.5",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
center: ["50%", "55%"],
|
||||||
|
startAngle: 200,
|
||||||
|
endAngle: -20,
|
||||||
|
min: 0,
|
||||||
|
max: 200,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
color: [
|
||||||
|
[0.35, "#7CFFB2"],
|
||||||
|
[0.75, "#FDDD60"],
|
||||||
|
[1, "#FF6E76"],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
itemStyle: {
|
||||||
|
color: "inherit",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
distance: -10,
|
||||||
|
length: 6,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
distance: -10,
|
||||||
|
length: 10,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
width: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "inherit",
|
||||||
|
distance: 20,
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
offsetCenter: [0, "20%"],
|
||||||
|
fontSize: 20,
|
||||||
|
formatter: "{value} μg/m3",
|
||||||
|
color: "inherit",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
offsetCenter: [0, "-50%"],
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: store.pm.pm10,
|
||||||
|
name: "PM10",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chart.value.setOption(option);
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => store.pm,
|
||||||
|
(newData) => {
|
||||||
|
init()
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
onMounted(() => {
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echartbox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-red {
|
||||||
|
color: #e43961;
|
||||||
|
animation: redstart 2s infinite;
|
||||||
|
font-size: 14px;
|
||||||
|
/* position: relative; */
|
||||||
|
/* top: -15px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
199
src/views/MicEnvironment/components/verticalNum.vue
Normal file
199
src/views/MicEnvironment/components/verticalNum.vue
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \gitscreenFront\src\views\PaintShopView\components\verticalNum.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-02-13 08:22:35
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div ref="numBox1" :style="{ height: '100%', width: '100%' }">
|
||||||
|
<border6 ref="refborder3">
|
||||||
|
<template v-slot>
|
||||||
|
<div class="box" ref="classBox1">
|
||||||
|
<h2>{{ props.title }}</h2>
|
||||||
|
<h5 v-if="props.unit">{{ `${t('messages.NormalValue')}0-${props.quota}${props.unit}` }}</h5>
|
||||||
|
<h5 v-else> </h5>
|
||||||
|
<i :class="['iconfont', 'iconbig-size', icon, iconcolor]"></i>
|
||||||
|
<p class="unit" v-if="props.unit && item.status">
|
||||||
|
<p class="num">{{ item.val }} </p>
|
||||||
|
<span>{{ props.unit }}</span>
|
||||||
|
</p>
|
||||||
|
<p class="unit" v-else>
|
||||||
|
<p class="num"> </p>
|
||||||
|
<span> </span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</border6>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
|
||||||
|
import border6 from "@/components/borderBox/border6.vue";
|
||||||
|
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let { t } = useI18n();
|
||||||
|
type itemType = {
|
||||||
|
'id': string;
|
||||||
|
"name": string;
|
||||||
|
"val": string;
|
||||||
|
"type": string;
|
||||||
|
"status": boolean };
|
||||||
|
let props = defineProps<{
|
||||||
|
title: string;
|
||||||
|
item:itemType;
|
||||||
|
unit:string;
|
||||||
|
quota:number | null;
|
||||||
|
iconname:string;
|
||||||
|
}>();
|
||||||
|
let i = ref(0)
|
||||||
|
let icon = computed(() => {
|
||||||
|
return props.iconname
|
||||||
|
});
|
||||||
|
let iconcolor = computed(() => {
|
||||||
|
//开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
|
||||||
|
if (props.item) {
|
||||||
|
return props.item.status ? +props.item.val > +props.quota ? "icon-red" : "icon-blue" : "icon-grey";
|
||||||
|
} else {
|
||||||
|
return "icon-grey"
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
let refborder3 = ref();
|
||||||
|
let numBox1 = ref();
|
||||||
|
const classBox1 = ref()
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "@/assets/css/iconfont.css";
|
||||||
|
|
||||||
|
|
||||||
|
.box {
|
||||||
|
height: 50%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.box>h5 {
|
||||||
|
font-size: 15px;
|
||||||
|
/* margin-bottom: 20px; */
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .contentbox{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
} */
|
||||||
|
h2 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-red {
|
||||||
|
font-size: 100px;
|
||||||
|
color: #E43961;
|
||||||
|
animation: redstart 2s infinite;
|
||||||
|
/* position: relative; */
|
||||||
|
/* top: -15px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-blue {
|
||||||
|
font-size: 100px;
|
||||||
|
color: #20AEC5;
|
||||||
|
/* position: relative; */
|
||||||
|
/* top: -15px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-grey {
|
||||||
|
color: rgb(167, 166, 189);
|
||||||
|
font-size: 100px;
|
||||||
|
/* position: relative; */
|
||||||
|
/* top: -15px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconsmall-size {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 5;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box>h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.icontip {
|
||||||
|
display: flex;
|
||||||
|
margin-top: -60px;
|
||||||
|
width: 100px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icontipBox li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icontipBox li p:nth-child(1) {
|
||||||
|
width: 40%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icontipBox li p:nth-child(2) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes redstart {
|
||||||
|
0% {}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
text-shadow: #fff 1px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
334
src/views/MicEnvironment/index.vue
Normal file
334
src/views/MicEnvironment/index.vue
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.微工厂环境实时监测系统')"
|
||||||
|
:titleTip="titleTip" :typeFun="['time']" :alarmType="[]"></header2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content" ref="Acontent">
|
||||||
|
<div class="top">
|
||||||
|
<div v-for="items in store.verticalArr" class="top-box-item">
|
||||||
|
<verticalNum :title="items.name" :iconname="items.iconname" :item="items.item" :unit="items.unit"
|
||||||
|
:quota="items.quota"></verticalNum>
|
||||||
|
</div>
|
||||||
|
<div class="top-box-item">
|
||||||
|
<pm :pm10limit="150" :pm25limit="75"></pm>
|
||||||
|
</div>
|
||||||
|
<div class="top-box-item">
|
||||||
|
<humidity></humidity>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<lineChart v-for="(calc, index) in calcArr"
|
||||||
|
:style="{ width: width + 'px', height: height + 'px', 'min-width': 'calc(25% - 20px)' }" :calc="calc">
|
||||||
|
</lineChart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import header2 from '@/components/headerBox/header2.vue'
|
||||||
|
import verticalNum from './components/verticalNum.vue'
|
||||||
|
import pm from './components/pm.vue';
|
||||||
|
import humidity from './components/humidity.vue';
|
||||||
|
import lineChart from './components/lineChart.vue';
|
||||||
|
import { getSensorByDeptId } from '@/http/MicrofactoryDev'
|
||||||
|
import { getCurrent24Trend } from '@/http/Trend/index'
|
||||||
|
import { onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
|
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let { t } = useI18n();
|
||||||
|
const store = useSocketStore();
|
||||||
|
|
||||||
|
let titleTip = [
|
||||||
|
{
|
||||||
|
color: "#E43961",
|
||||||
|
name: t('messages.abnormal'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "#20AEC5",
|
||||||
|
name: t('messages.NoAbnormal'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "#A7A6BD",
|
||||||
|
name: t('messages.disconnection'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const sensor_config: any = {
|
||||||
|
'Noise_Reg': { 'icon': 'icon-shengyin', 'unit': 'dB', 'quota': 80, 'name': '噪声监测传感器', 'type': 'noise' },
|
||||||
|
'Smoke_Reg': { 'icon': 'icon-yanwubaojingqi', 'unit': 'ppm', 'quota': 100, 'name': '烟雾监测传感器', 'type': 'smoke' },
|
||||||
|
'CH2O': { 'icon': 'icon-app_icons--', 'unit': 'mg/m³', 'quota': 0.08, 'name': '甲醛监测传感器', 'type': 'CH2O' },
|
||||||
|
'TVOC': { 'icon': 'icon-TVOC-Outlined', 'unit': 'mg/m³', 'quota': 0.5, 'name': 'TVOC监测传感器', 'type': 'TVOC' },
|
||||||
|
'Methane_Reg': { 'icon': 'icon-ranqi', 'unit': '', 'quota': 0, 'name': '燃气监测传感器', 'type': 'Gas' },
|
||||||
|
}
|
||||||
|
let width = ref(1500)
|
||||||
|
let height = ref(580)
|
||||||
|
let trendObj = {}
|
||||||
|
let sensor_arr = [];
|
||||||
|
const sensor_keys = Object.keys(sensor_config)
|
||||||
|
let noise_id = ''
|
||||||
|
let timer = null;
|
||||||
|
//趋势图
|
||||||
|
type calcType = {
|
||||||
|
name: string,
|
||||||
|
math: {
|
||||||
|
key: string,
|
||||||
|
value: {
|
||||||
|
max: number,
|
||||||
|
min: number,
|
||||||
|
avg: number,
|
||||||
|
data: any[]
|
||||||
|
}
|
||||||
|
}[],
|
||||||
|
data: any[]
|
||||||
|
}
|
||||||
|
let calcArr = ref<calcType[]>()
|
||||||
|
async function getSensorData() {
|
||||||
|
let res: any = await getSensorByDeptId({ ids: '20' })
|
||||||
|
if (res.code === 200) {
|
||||||
|
let data = res.data
|
||||||
|
let temp_vertical = []
|
||||||
|
let humiture = { "devId": "", "name": "温湿度", "temp": "", "humidity": "" }
|
||||||
|
let pm = { "devId": "", "name": "粉尘", "pm25": "", "pm10": "" }
|
||||||
|
|
||||||
|
data.forEach(element => {
|
||||||
|
if (sensor_keys.includes(element.type)) {
|
||||||
|
sensor_arr.push(element.id)
|
||||||
|
temp_vertical.push({
|
||||||
|
id: element.id,
|
||||||
|
name: sensor_config[element.type].name,
|
||||||
|
iconname: sensor_config[element.type].icon,
|
||||||
|
item: { "name": element.name, "val": element.data, "type": sensor_config[element.type].type, "status": JSON.parse(element.status) },
|
||||||
|
unit: sensor_config[element.type].unit,
|
||||||
|
quota: sensor_config[element.type].quota,
|
||||||
|
})
|
||||||
|
if (sensor_config[element.type].type == 'noise') {
|
||||||
|
noise_id = element.id
|
||||||
|
trendObj[element.id] = sensor_config[element.type].unit
|
||||||
|
}
|
||||||
|
if (sensor_config[element.type].type == 'CH2O') {
|
||||||
|
trendObj[element.id] = sensor_config[element.type].unit
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (element.type == 'HIGH_PM10_Reg') {
|
||||||
|
pm.devId = element.id
|
||||||
|
pm.pm10 = element.data
|
||||||
|
trendObj[element.id] = 'μg/m3'
|
||||||
|
}
|
||||||
|
if (element.type == 'HIGH_PM25_Reg') {
|
||||||
|
pm.devId = element.id
|
||||||
|
pm.pm25 = element.data
|
||||||
|
}
|
||||||
|
if (element.type == 'AirHumi_Reg') {
|
||||||
|
humiture.devId = element.id
|
||||||
|
humiture.humidity = element.data
|
||||||
|
trendObj[element.id] = '℃/%RH'
|
||||||
|
}
|
||||||
|
if (element.type == 'AirTemp_Reg') {
|
||||||
|
humiture.devId = element.id
|
||||||
|
humiture.temp = element.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
store.setVerticalArr(temp_vertical)
|
||||||
|
store.sethumiture(humiture)
|
||||||
|
store.setpm(pm)
|
||||||
|
get24Trend()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function get24Trend() {
|
||||||
|
let trendIds = Object.keys(trendObj).toString()
|
||||||
|
let trend: any = await getCurrent24Trend(trendIds)
|
||||||
|
if (trend.code === 200) {
|
||||||
|
let tempData = {}
|
||||||
|
trend.data.forEach((item: any) => {
|
||||||
|
if (trendObj[item.id]) {
|
||||||
|
item.name = item.name + '(' + trendObj[item.id] + ')'
|
||||||
|
}
|
||||||
|
if (tempData.hasOwnProperty(item.id)) {
|
||||||
|
let seriesData: any = {
|
||||||
|
name: item.type,
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
data: item.date.map((key, value) => [key, item.value[value]]),
|
||||||
|
smooth: true,
|
||||||
|
}
|
||||||
|
tempData[item.id].data.push(seriesData)
|
||||||
|
tempData[item.id].math.push({
|
||||||
|
key: item.type,
|
||||||
|
value: {
|
||||||
|
max: item.max,
|
||||||
|
min: item.min,
|
||||||
|
avg: item.avg
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
tempData[item.id] = {
|
||||||
|
name: item.name,
|
||||||
|
data: [{
|
||||||
|
name: item.type,
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
data: item.date.map((key, value) => [key, item.value[value]]),
|
||||||
|
smooth: true,
|
||||||
|
}],
|
||||||
|
math: [{
|
||||||
|
key: item.type,
|
||||||
|
value: {
|
||||||
|
max: item.max,
|
||||||
|
min: item.min,
|
||||||
|
avg: item.avg
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let data: any = Object.values(tempData)
|
||||||
|
calcArr.value = data
|
||||||
|
width.value = 1900 / data.length - (data.length - 1) * 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWebsocket(val) {
|
||||||
|
try {
|
||||||
|
let data = JSON.parse(val);
|
||||||
|
|
||||||
|
//燃气监测
|
||||||
|
if (data.type == "Gas") {
|
||||||
|
if (sensor_arr.includes(data.msg.devId)) {
|
||||||
|
store.changeVerticalArr({ devId: data.msg.devId, val: data.msg.methane.value, type: "Gas", status: true })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//甲醛TVOC
|
||||||
|
if (data.type == "TVOC_CH2O") {
|
||||||
|
if (sensor_arr.includes(data.msg.CH2O.devId)) {
|
||||||
|
store.changeVerticalArr({ devId: data.msg.CH2O.devId, val: data.msg.CH2O.value, type: "CH2O", status: true })
|
||||||
|
store.changeVerticalArr({ devId: data.msg.TVOC.devId, val: data.msg.TVOC.value, type: "TVOC", status: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//声音
|
||||||
|
if (data.type == "noise") {
|
||||||
|
data.msg.listData.forEach(item => {
|
||||||
|
if (item.devId == noise_id) {
|
||||||
|
store.changeVerticalArr({ devId: item.devId, val: item.value, type: "noise", status: item.status })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
//烟雾传感器
|
||||||
|
if (data.type == "smoke") {
|
||||||
|
if (sensor_arr.includes(data.msg.devId)) {
|
||||||
|
store.changeVerticalArr({ devId: data.msg.devId, val: data.msg.smoke.value, type: "smoke", status: true })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//温湿度
|
||||||
|
if (data.type == "humiture") {
|
||||||
|
data.msg.Humiture.forEach(item => {
|
||||||
|
if (item.devId == store.humiture.devId) {
|
||||||
|
store.changehumiture(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//粉尘
|
||||||
|
if (data.type == "dust") {
|
||||||
|
if (data.msg.devId == store.pm.devId) {
|
||||||
|
store.changePm(data.msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err, "报错了大哥", console.log(val) );
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function errWebsocket(val) {
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getSensorData()
|
||||||
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
|
timer = setInterval(() => {
|
||||||
|
get24Trend()
|
||||||
|
}, 1000 * 60 * 10)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer)
|
||||||
|
closeWebsocket()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #20aec5;
|
||||||
|
background-color: #100c2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title>h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
--header: 150px;
|
||||||
|
height: calc(1080px - var(--header))
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 330px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-box-item {
|
||||||
|
width: 14%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 5px 10px 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
@ -170,7 +170,7 @@ async function getWaterFlowInfoFun() {
|
|||||||
if (code == 200) {
|
if (code == 200) {
|
||||||
allData.in = data.in
|
allData.in = data.in
|
||||||
allData.out = data.out
|
allData.out = data.out
|
||||||
allData.use = data.use
|
allData.use = data.use.toFixed(2)
|
||||||
allData.currentCount = data.currentCount
|
allData.currentCount = data.currentCount
|
||||||
allData.xl = data.xl.toFixed(1)
|
allData.xl = data.xl.toFixed(1)
|
||||||
allData.xy = data.xy.toFixed(1)
|
allData.xy = data.xy.toFixed(1)
|
||||||
|
|||||||
@ -286,6 +286,12 @@ let routerList = [
|
|||||||
title: '智能货架物联管理系统',
|
title: '智能货架物联管理系统',
|
||||||
url: require("../assets/indexImg/intelligentShelves.png"),
|
url: require("../assets/indexImg/intelligentShelves.png"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 33,
|
||||||
|
path: "/MicEnvironment",
|
||||||
|
title: '微工厂环境实时监测系统',
|
||||||
|
url: require("../assets/indexImg/MicEnvironment.png"),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
let lang = ref(getStoredLanguage() || '简体中文')
|
let lang = ref(getStoredLanguage() || '简体中文')
|
||||||
function changelang(val) {
|
function changelang(val) {
|
||||||
@ -314,7 +320,7 @@ onUnmounted(() => { });
|
|||||||
}
|
}
|
||||||
|
|
||||||
.itemlist {
|
.itemlist {
|
||||||
height: 1030px;
|
height: 990px;
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
color: #20aec5;
|
color: #20aec5;
|
||||||
background-color: #100c2a;
|
background-color: #100c2a;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user