hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改环境 实时监测系统页面布局 首页添加

Browse Source
This commit is contained in:
hzz 2023-06-08 10:43:27 +08:00
parent 9b53b17d86
commit 9b27dae485
10 changed files with 383 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/indexImg/generalEnvironmentMechanical.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

42
src/store/moduleSocketMechanics.ts
View File

@ -19,13 +19,15 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang, {
// 4、通过action修改
state: () => {
return {
humiture: [
{ "devId": "c6f036c0-33fc-11ed-a7e1-fd42bca6c8c6", "name": "精饰车间", "temp": "33.4", "humidity": "30.9" },
{ "devId": "c651b930-3b15-11ed-b6af-15994988a6b3", "name": "精加车间", "temp": "26.1", "humidity": "47" },
{ "devId": "9c4be1e0-33fb-11ed-a7e1-fd42bca6c8c6", "name": "焊接车间", "temp": "29.3", "humidity": "37.6" },
{ "devId": "0e77f0b0-33fc-11ed-a7e1-fd42bca6c8c6", "name": "大件车间", "temp": "28.6", "humidity": "38.4" },
{ "devId": "91f6d000-33fc-11ed-a7e1-fd42bca6c8c6", "name": "机加车间", "temp": "29.9", "humidity": "36.2" }
],
// humiture: [
// { "devId": "c6f036c0-33fc-11ed-a7e1-fd42bca6c8c6", "name": "精饰车间", "temp": "33.4", "humidity": "30.9" },
// { "devId": "c651b930-3b15-11ed-b6af-15994988a6b3", "name": "精加车间", "temp": "26.1", "humidity": "47" },
// { "devId": "9c4be1e0-33fb-11ed-a7e1-fd42bca6c8c6", "name": "焊接车间", "temp": "29.3", "humidity": "37.6" },
// { "devId": "0e77f0b0-33fc-11ed-a7e1-fd42bca6c8c6", "name": "大件车间", "temp": "28.6", "humidity": "38.4" },
// { "devId": "91f6d000-33fc-11ed-a7e1-fd42bca6c8c6", "name": "机加车间", "temp": "29.9", "humidity": "36.2" }
// ],
humiture:{Humiture:[],bottom:{humidity:null,temp:null,name:null},top:{humidity:null,temp:null,name:null}}, //温湿度
pm: [
{ "devId": "01336fd0-1fa0-11ed-9223-7db1174970a8", "name": "大件车间粉尘", "pm2": "26", "pm10": "33" },
{ "devId": "083e3900-3435-11ed-a7e1-fd42bca6c8c6", "name": "焊接车间粉尘", "pm2": "46", "pm10": "59" },
@ -165,6 +167,30 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang, {
this.newVerticalNum[pIndex].value[cIndex].val = val.data.val
this.newVerticalNum[pIndex].value[cIndex].status = true
}
}
},
/**
* @函数功能:
* @param {*} val 温湿度数据
* @出口参数:
* @函数备注:
*/
changeHumiture(val){
// console.log(this.humiture.Humiture);
if(this.humiture.Humiture.length==0){
this.humiture=val
}else{
val.Humiture.forEach(res=>{
this.humiture.Humiture.forEach(ele=>{
if(res.name==ele.name){
ele.humidity=res.humidity
ele.temp=res.temp
}
})
})
}
},
}
})

4
src/views/InPlantProducts/index.vue
View File

@ -8,8 +8,8 @@
:height="'150px'"
:title="t('messages.InPlantProducts')"
:titleTip="titleTip"
:typeFun="['AbnormalData','time']"
:alarmType="['inplant']"
:typeFun="['time']"
:alarmType="[]"
></header2>
<!-- <div class="tip" style="display: flex;">
<span class="tipspan"><div class="red"></div><span class="tipstring">网关离线</span></span>

4
src/views/generalEnvironmentMechanical/components/gas.vue
View File

@ -119,9 +119,7 @@ const change = (item:EDataPersonItem) => {
item.box = Ebox;
};
onUpdated(() => {
console.log('数据更新');
onUpdated(() => {
setData()
})
// watch(() => props.value, (val) => {

198
src/views/generalEnvironmentMechanical/components/humidityBar.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<div class="content-big" ref="humiture"></div>
</template>
<script setup lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const { proxy } = getCurrentInstance() as any;
const props = defineProps<{
title: any;
data: any;
bottom: any;
top: any;
}>();
let humiture = ref();
let chart = null
watch(() => props, (val) => {
init()
}, { deep: true })
function init() {
if (!chart) {
chart = proxy.$echarts.init(humiture.value, "dark");
}
let option = {
title: {
text: props.title,
top: '2%'
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
// bottom: "3%",
top: '6%'
},
grid: {
top: "15%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
color: ["#4992FF", "#7CFFB2", "#FF6E76"],
xAxis: {
type: "category",
data: props.data.list,
axisLabel: {
interval: 0
}
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01],
axisLabel: {
formatter: "{value} (°C/%RH)",
},
},
series: [
{
name: `${t('messages.TemperatureRange')}(°C)(${t('messages.fanwei')}：${props.bottom.temp}°C - ${props.top.temp}°C)`,
type: "bar",
data: props.data.temp,
barWidth: '30%',
itemStyle: {
color: function (params) {
var index_color = params.value;
if (
index_color <= props.bottom.temp ||
index_color >= props.top.temp
) {
return "#FF6E76";
} else {
return "#4992FF";
}
},
},
label: {
formatter: "{c} °C",
show: true,
position: "top",
textStyle: {
color: "rgb(255,255,255,0.9)",
},
},
markLine: {
// 设置最大值和最小值
silent: true, //基线显示 隐藏
symbol: "none", // 不显示箭头和圆点
data: [
{
name: t('messages.TemperatureRange'),
yAxis: props.bottom.temp,
label: {
formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${props.bottom.temp} °C`,
position: "middle",
},
lineStyle: {
color: "yellow", // 这儿设置安全基线颜色
},
},
{
name: t('messages.TemperatureRange'),
yAxis: props.top.temp,
label: {
formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_up')}：${props.top.temp} °C`,
position: "middle",
},
lineStyle: {
color: "yellow", // 这儿设置安全基线颜色
},
},
],
},
},
{
name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${props.bottom.humidity}%RH - ${props.top.humidity}%RH)`,
type: "bar",
data: props.data.humidity,
barWidth: '30%',
itemStyle: {
color: function (params) {
var index_color = params.value;
if (
index_color <= props.bottom.humidity ||
index_color >= props.top.humidity
) {
return "#FF6E76";
} else {
return "#7CFFB2";
}
},
},
label: {
formatter: "{c} %RH",
show: true,
position: "top",
textStyle: {
color: "rgb(255,255,255,0.9)",
},
},
markLine: {
// 设置最大值和最小值
silent: true, //基线显示 隐藏
symbol: "none", // 不显示箭头和圆点
data: [
{
name: "湿度",
yAxis: props.bottom.humidity,
label: {
formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：` + props.bottom.humidity + "%RH",
position: "middle",
},
lineStyle: {
color: "red", // 这儿设置安全基线颜色
},
},
{
name: "湿度",
yAxis: props.top.humidity,
label: {
formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：` + props.top.humidity + "%RH",
position: "middle",
},
lineStyle: {
color: "red", // 这儿设置安全基线颜色
},
},
],
},
},
{
name: t('messages.TemperatureHumidityexceeded'),
type: "bar",
color: '#FF6E76'
}
],
};
chart.setOption(option);
}
onMounted(() => {
// init()
})
</script>
<style scoped>
.content-big {
width: 100%;
height: 100%;
}
</style>

1
src/views/generalEnvironmentMechanical/components/pipe.vue
View File

@ -31,7 +31,6 @@ const setData = () => {
let x = [];
let y = [];
let sumx = [];
console.log(props.value,"ddd");
props.value.listData.forEach((res) => {

2
src/views/generalEnvironmentMechanical/components/power2023.vue
View File

@ -37,7 +37,6 @@ const echartsData = reactive<EDataPerson>({
const initEchart = () => {
if (props.httpValue.listData) {
console.log('zhixingle');
let series = [];
props.httpValue.listData.forEach((res) => {
@ -181,7 +180,6 @@ const clacChartsSum = (option: any, value: any) => {
}
return datavalue ? datavalue.toLocaleString() : null;
}
console.log(series);
if (series.length) {
series[series.length - 1].label.formatter = getSum2;

266
src/views/generalEnvironmentMechanical/index.vue
View File

@ -17,14 +17,15 @@
<div style="width: 12%;height: 250px;margin-bottom: 10px;">
<border13>
<template v-slot>
<pm :value="{two:store.pm[pmindex].pm10,ten:store.pm[pmindex].pm2}" :title="store.pm[pmindex].name"></pm>
<pm :value="{ two: store.pm[pmindex].pm10, ten: store.pm[pmindex].pm2 }"
:title="store.pm[pmindex].name"></pm>
</template>
</border13>
</div>
<div style="width: 12%;height: 250px;margin-bottom: 10px;">
<border13>
<template v-slot>
<humidity :value="{c:store.humiture[humitureindex].temp,h:store.humiture[humitureindex].humidity}" :title="store.humiture[humitureindex].name+'温湿度'"></humidity>
<gas :title="t('messages.gashistory')" :value="gasData"></gas>
</template>
</border13>
</div>
@ -32,7 +33,8 @@
<div class="bottom-box">
<div style="width: 33%;height: 100%;">
<border13>
<power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value"></power>
<power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value">
</power>
</border13>
</div>
<div style="width: 33%;height: 100%;">
@ -42,7 +44,8 @@
</div>
<div style="width: 33%;height: 100%;">
<border13>
<gas :title="t('messages.gashistory')" :value="gasData"></gas>
<humidityBar :title="'温湿度'" :data="humidityData" :bottom="humidityBottom" :top="humidityTop">
</humidityBar>
</border13>
</div>
</div>
@ -51,19 +54,19 @@
</template>
<script setup lang='ts'>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import header2 from '@/components/headerBox/header2.vue'
import verticalNumLoop from './components/verticalNumLoop.vue'
import power from './components/power2023.vue';
import pm from './components/pm.vue';
import humidity from './components/humidity.vue';
import humidityBar from './components/humidityBar.vue';
import gas from './components/gas.vue'
import pipe from './components/pipe.vue'
import border13 from '@/components/border/Border13.vue'
import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
import { getnoiseData } from "@/http/generalEnvironment";
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
import { getPowerData,getconsumeDetail } from "@/http/energyConsume";
import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
import { useSocketStore } from "@/store/moduleSocketMechanics";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { gettime, clacendTime } from "@/utils/time"
@ -95,11 +98,11 @@ const verticalType = {
'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
}
/**用电量 */
let powerData=ref({value:{name:[]},seriesVal:[],title:t('messages.Powerto2023')})
let powerData = ref({ value: { name: [] }, seriesVal: [], title: t('messages.Powerto2023') })
let gasData=ref(0)
let gasData = ref(0)
let pipeData=ref({listData:[],top:0})
let pipeData = ref({ listData: [], top: 0 })
let headerref = ref()
let verticalList: any[] = reactive([])
@ -160,144 +163,150 @@ async function getSensorData() {
store.setNewVerticalNum(handle_vertical)
}
//获取温湿度数据
let humitureindex = ref(0);
async function gethumitureData() {
let result: any = await getHumitureData({ deptIds })
let result: any = await getHumitureData({ deptIds })
if (result.code == 200) {
store.$patch((state) => {
state.humiture = result.data.Humiture
})
}
humittimer = setInterval(()=>{
humitureindex.value++
if(humitureindex.value>=store.humiture.length){
humitureindex.value=0
if (result.code == 200) {
store.$patch((state) => {
state.humiture = result.data
})
}
},5000)
}
let humidityData = ref({})
let humidityBottom = ref({})
let humidityTop = ref({})
watch(() => store.humiture, (newVal, oldVal) => {
let data = { list: [], temp: [], humidity: [] }
newVal.Humiture.forEach((res) => {
data.list.push(res.name);
data.temp.push(res.temp);
data.humidity.push(res.humidity);
});
humidityData.value = data;
humidityBottom.value = newVal.bottom;
humidityTop.value = newVal.top;
}, { deep: true, immediate: true })
//获取粉尘数据
let pmindex = ref(0);
async function getPmData() {
let resulttwo: any = await getPmtwoData()
let resultten: any = await getPmtenData()
let arr = [
'01336fd0-1fa0-11ed-9223-7db1174970a8',
'083e3900-3435-11ed-a7e1-fd42bca6c8c6',
'270e1500-eee1-11ed-b2ee-2d727e0cafab',
'54058c30-eee3-11ed-b2ee-2d727e0cafab',
'76efb040-eee3-11ed-b2ee-2d727e0cafab',
'a6020310-eee3-11ed-b2ee-2d727e0cafab',
'bcbfb530-88b2-11ed-a926-570995ad0254'
]
let data = {}
if (resulttwo) {
resulttwo.data.forEach(ele => {
if (arr.indexOf(ele.devId) >-1 ) {
data[ele.devId] = {
devId: ele.devId,
name: ele.name + '粉尘',
pm2: ele.value,
pm10: null
let resulttwo: any = await getPmtwoData()
let resultten: any = await getPmtenData()
let arr = [
'01336fd0-1fa0-11ed-9223-7db1174970a8',
'083e3900-3435-11ed-a7e1-fd42bca6c8c6',
'270e1500-eee1-11ed-b2ee-2d727e0cafab',
'54058c30-eee3-11ed-b2ee-2d727e0cafab',
'76efb040-eee3-11ed-b2ee-2d727e0cafab',
'a6020310-eee3-11ed-b2ee-2d727e0cafab',
'bcbfb530-88b2-11ed-a926-570995ad0254'
]
let data = {}
if (resulttwo) {
resulttwo.data.forEach(ele => {
if (arr.indexOf(ele.devId) > -1) {
data[ele.devId] = {
devId: ele.devId,
name: ele.name + '粉尘',
pm2: ele.value,
pm10: null
}
}
}
})
}
if (resultten) {
resultten.data.forEach(ele => {
if (data.hasOwnProperty(ele.devId)) {
data[ele.devId].pm10 = ele.value
}
})
}
store.$patch((state) => {
state.pm = Object.values(data)
})
pmtimer = setInterval(()=>{
pmindex.value++
if(pmindex.value>=store.pm.length){
pmindex.value=0
})
}
},5000)
if (resultten) {
resultten.data.forEach(ele => {
if (data.hasOwnProperty(ele.devId)) {
data[ele.devId].pm10 = ele.value
}
})
}
store.$patch((state) => {
state.pm = Object.values(data)
})
pmtimer = setInterval(() => {
pmindex.value++
if (pmindex.value >= store.pm.length) {
pmindex.value = 0
}
}, 5000)
}
//获取用电量数据
async function getPower_data() {
let result: any = await getPowerData({ time: 1 });
let result: any = await getPowerData({ time: 1 });
if (result.code == 200) {
let series = [];
result.data.listData.forEach((res) => {
if (res.years == 2023) {
for (let key in res.month) {
series.push({
name: key + "月",
type: "bar",
stack: res.years,
emphasis: {
focus: "coordinateSystem",
label: {
show: true,
formatter: function (value, index) {
return value.value.toLocaleString();
},
},
},
data: res.month[key],
if (result.code == 200) {
let series = [];
result.data.listData.forEach((res) => {
if (res.years == 2023) {
for (let key in res.month) {
series.push({
name: key + "月",
type: "bar",
stack: res.years,
emphasis: {
focus: "coordinateSystem",
label: {
show: true,
formatter: function (value, index) {
return value.value.toLocaleString();
},
},
},
data: res.month[key],
});
}
}
});
}
}
});
//data0用于初始化计算的数据
let data0 = [];
//data0用于初始化计算的数据
let data0 = [];
for (let i = 1; i <= result.data.name.length; i++) {
data0.push(0);
}
series.push({
name: "",
type: "bar",
data: data0,
color: "#bbf",
stack: result.data.listData[1].years,
barWidth: 40,
label: {
show: true,
position: "right",
color: "#fff",
},
});
powerData.value.value=result.data
powerData.value.seriesVal=series
powerData.value.title='机械分厂用电量'
}
}
async function getconsumeDetailfun(){
let result:any = await getconsumeDetail()
if(result.code==200){
result.data.forEach(res=>{
if(res.deptName=='喷漆车间' && res.type=='GasDetail'){
gasData.value=res.usageNum
for (let i = 1; i <= result.data.name.length; i++) {
data0.push(0);
}
})
}
series.push({
name: "",
type: "bar",
data: data0,
color: "#bbf",
stack: result.data.listData[1].years,
barWidth: 40,
label: {
show: true,
position: "right",
color: "#fff",
},
});
powerData.value.value = result.data
powerData.value.seriesVal = series
powerData.value.title = '机械分厂用电量'
}
}
async function getconsumeDetailfun() {
let result: any = await getconsumeDetail()
if (result.code == 200) {
result.data.forEach(res => {
if (res.deptName == '喷漆车间' && res.type == 'GasDetail') {
gasData.value = res.usageNum
}
})
}
}
async function getpipeDatafun() {
let pageValue = '6,7,9,10,11'
let result: any = await getpipeData({ deptIds: pageValue })
let pageValue = '6,7,9,10,11'
let result: any = await getpipeData({ deptIds: pageValue })
if (result.code == 200) {
pipeData.value.listData=result.data.listData
pipeData.value.top=result.data.top
}
if (result.code == 200) {
pipeData.value.listData = result.data.listData
pipeData.value.top = result.data.top
}
}
function getWebsocket(val) {
@ -337,6 +346,9 @@ function getWebsocket(val) {
// if (data.type == "waterPressure") {
// store.changePipe(data.msg);
// }
if (data.type == "humiture") {
store.changeHumiture(data.msg);
}
} catch (err) {
console.log(err, "报错了大哥", console.log(val)

7
src/views/index.vue
View File

@ -218,6 +218,13 @@ let routerList = [
title: t("messages.generalEnvironmentjixiefenchang"),
url: require("../assets/indexImg/generalEnvironment.png"),
},
{
id: 31,
isLink: false,
path: "/generalEnvironmentMechanical",
title: t("messages.环境 实时监测系统"),
url: require("../assets/indexImg/generalEnvironmentMechanical.png"),
},
{
id: 24,
isLink: false,

4
vue.config.js
View File

@ -1,5 +1,5 @@
/*
* @FilePath: \daping\vue.config.js
* @FilePath: \screenFront\vue.config.js
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-01-29 15:16:36
@ -14,7 +14,7 @@ module.exports = defineConfig(
devServer: {
proxy: {
[process.env.VUE_APP_BASE_API]: {
// target: 'http://192.168.2.125:2222', // 想要请求的url地址
// target: 'http://192.168.3.175:9015', // 想要请求的url地址
target: 'http://8.130.165.100:9015',
// target: 'http://192.168.110.238:9015',
ws: true, // 是否要开启代理