修改机械分厂环境大屏 调整温湿度和用气量位置

告警红色图标改为文字显示
粉尘添加报警框并添加报警文字提示
添加机械分厂用水量

src/store/moduleSocketMechanics.ts

@@ -10,7 +10,7 @@
 import { defineStore } from "pinia";
 import { Names } from '@/store/storeName'
 import { gettime, clacendTime } from "@/utils/time"
-export const useSocketStore = defineStore(Names.socketjixiefenchang, {
+export const useSocketStore = defineStore(Names.socketMechanics, {
     // 使用方式
     // const Index= useIndexStore()
     // 1、Index.{数据}++
@@ -19,23 +19,58 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang, {
     // 4、通过action修改
     state: () => {
         return {
-            // humiture: [
+            humiture: [
-            //     { "devId": "c6f036c0-33fc-11ed-a7e1-fd42bca6c8c6", "name": "精饰车间", "temp": "33.4", "humidity": "30.9" },
+                { "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": "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": "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": "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" }
+                { "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}}, //温湿度
+            // 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" }, 
+                    "devId": "01336fd0-1fa0-11ed-9223-7db1174970a8",
-                { "devId": "270e1500-eee1-11ed-b2ee-2d727e0cafab", "name": "精加车间粉尘", "pm2": "131", "pm10": "155" }, 
+                    "name": "大件车间中部粉尘",
-                { "devId": "54058c30-eee3-11ed-b2ee-2d727e0cafab", "name": "机加车间粉尘", "pm2": "38", "pm10": "44" }, 
+                    "pm25": "45",
-                { "devId": "76efb040-eee3-11ed-b2ee-2d727e0cafab", "name": "大件车间粉尘", "pm2": "52", "pm10": "67" }, 
+                    "pm10": "53"
-                { "devId": "a6020310-eee3-11ed-b2ee-2d727e0cafab", "name": "大件车间粉尘", "pm2": "42", "pm10": "52" }, 
+                },
-                { "devId": "bcbfb530-88b2-11ed-a926-570995ad0254", "name": "精饰车间粉尘", "pm2": "9", "pm10": "12" }
+                {
+                    "devId": "083e3900-3435-11ed-a7e1-fd42bca6c8c6",
+                    "name": "焊接车间粉尘",
+                    "pm25": "30",
+                    "pm10": "36"
+                },
+                {
+                    "devId": "270e1500-eee1-11ed-b2ee-2d727e0cafab",
+                    "name": "精加车间粉尘",
+                    "pm25": "71",
+                    "pm10": "84"
+                },
+                {
+                    "devId": "54058c30-eee3-11ed-b2ee-2d727e0cafab",
+                    "name": "机加车间粉尘",
+                    "pm25": "22",
+                    "pm10": "26"
+                },
+                {
+                    "devId": "76efb040-eee3-11ed-b2ee-2d727e0cafab",
+                    "name": "大件车间东部粉尘",
+                    "pm25": "53",
+                    "pm10": "60"
+                },
+                {
+                    "devId": "a6020310-eee3-11ed-b2ee-2d727e0cafab",
+                    "name": "大件车间西部粉尘",
+                    "pm25": "66",
+                    "pm10": "75"
+                },
+                {
+                    "devId": "bcbfb530-88b2-11ed-a926-570995ad0254",
+                    "name": "精饰车间粉尘",
+                    "pm25": "6",
+                    "pm10": "7"
+                }
             ],
             newVerticalNum: [
                 {
@@ -177,20 +212,28 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang, {
         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=>{
+                this.humiture.forEach(ele => {
-                        if(res.name==ele.name){
+                    if (res.devId == ele.devId) {
                         ele.humidity = res.humidity
                         ele.temp = res.temp
                     }
                 })
             })
-            }
 
         },
+        /**
+         * 更新粉尘数据
+         */
+        changeDust(val) {
+            this.pm.forEach(res => {
+                if (res.devId == val.devId) {
+                    res.pm25 = val.pm25
+                    res.pm10 = val.pm10
+                }
+            })
+        }
     }
 
 })

src/store/storeName.ts

@@ -27,4 +27,5 @@ export const enum Names{
     MechanicalViewJijia="MechanicalViewJijia",
     MechanicalViewJingjia="MechanicalViewJingjia",
     MechanicalViewJingshi="MechanicalViewJingshi",
+    socketMechanics='socketMechanics',
 }

src/views/generalEnvironmentMechanical/components/gas.vue

@@ -21,6 +21,12 @@ const { proxy } = getCurrentInstance() as any;
 let props=defineProps<{
       title:string,
       value:any;
+      color:{
+        step0:string,
+        step1:string,
+        border:string
+        color:string
+      };
       }>()
 let gas=ref()
 
@@ -65,11 +71,11 @@ const setData=()=>{
         colorStops: [
           {
             offset: 0,
-            color: '#186945',
+            color: props.color.step0,
           },
           {
             offset: 1,
-            color: '#1b7a4f',
+            color: props.color.step1,
           },
         ],
         globalCoord: false,
@@ -79,8 +85,8 @@ const setData=()=>{
     amplitude: 10, //振幅
     backgroundStyle: {
       borderWidth: 2, //边框大小
-      borderColor:'rgba(8, 206, 120, 0.8)',//边框颜色
+      borderColor:props.color.border,//边框颜色
-      color: 'rgba(8, 206, 120, 0.4)',
+      color: props.color.color, //背景色
     },
     label: {
       normal: {

src/views/generalEnvironmentMechanical/components/humidity.vue

@@ -1,26 +1,46 @@
 <template>
-  <div class="container" ref="humiture">
+  <border13  :color="errList.length>0?borderColor:[]">
+  <div class="container">
+    <div class="errList">
+      <div class="err-item icon-red" v-for="item in errList">{{ item.name }}</div>
     </div>
+    <div class="echartbox" ref="humiture"></div>
+  </div>
+</border13>
 </template>
   
 <script setup lang='ts'>
-import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
+import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch, onUnmounted,computed } from "vue";
+import { useSocketStore } from "@/store/moduleSocketMechanics";
+import border13 from '@/components/border/Border13.vue'
 const { proxy } = getCurrentInstance() as any;
-const props = defineProps<{
+const store = useSocketStore();
-  title: String;
+let index = 0;
-  value: any;
-}>();
 let humiture = ref();
 let chart = null
-watch(props, (newVal) => {
+let timer = null
-  init()
+const props = defineProps<{
-}, { deep: true, })
+  top: any;
+  bottom: any;
+}>();
+let errList = computed(() => {
+  let arr = JSON.parse(JSON.stringify(store.humiture.filter(item=>{
+    return item.temp>props.top.temp||item.temp<props.bottom.temp||item.humidity>props.top.hum||item.humidity<props.bottom.hum
+  }))).map(item=>{
+    item.name = item.name.split('车间')[0]
+    return item
+  })
+  return arr;
+})
+const borderColor = ["#E43961","#E43961"]
 function init() {
 
-  const chart = proxy.$echarts.init(humiture.value, 'dark');
+  if (!chart) {
+    chart = proxy.$echarts.init(humiture.value, 'dark');
+  }
   let option = {
     title: {
-      text: props.title,
+      text: store.humiture[index].name+"温湿度",
       show: true,
       textStyle: {
         color: "#fff",
@@ -109,7 +129,7 @@ function init() {
         },
         data: [
           {
-            value: props.value.c
+            value: store.humiture[index].temp
           }
         ]
       },
@@ -178,7 +198,7 @@ function init() {
         },
         data: [
           {
-            value: props.value.h
+            value: store.humiture[index].humidity
           }
         ]
       },
@@ -190,6 +210,16 @@ function init() {
 
 onMounted(() => {
   init();
+  timer = setInterval(() => {
+    index = index + 1;
+    if (index >= store.humiture.length) {
+      index = 0;
+    }
+    init();
+  }, 5000);
+});
+onUnmounted(() => {
+  clearInterval(timer);
 });
 </script>
   
@@ -198,5 +228,39 @@ onMounted(() => {
   width: 100%;
   height: 100%;
 }
+
+.errList {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.echartbox {
+  width: 100%;
+  height: calc(100% - 50px);
+}
+
+.icon-red {
+  color: #e43961;
+  animation: redstart 2s infinite;
+  font-size: 14px;
+  /* position: relative; */
+  /* top: -15px; */
+}
+.err-item {
+  margin: 0 10px;
+}
+
+@keyframes redstart {
+  0% {}
+
+  50% {
+    text-shadow: #fff 1px 0 10px;
+  }
+
+  100% {}
+}
 </style>
   

src/views/generalEnvironmentMechanical/components/pm.vue

@@ -1,27 +1,53 @@
 <template>
-  <div class="container" ref="dust">
+  <border13  :color="errList.length>0?borderColor:[]">
+  <div class="container">
+    <div class="errList">
+      <div class="err-item icon-red" v-for="item in errList">{{ item.name }}</div>
     </div>
+    <div class="echartbox" ref="dust">
+    </div>
+  </div>
+</border13>
 </template>
 
 <script setup lang='ts'>
-import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
+import { getCurrentInstance, markRaw, onMounted, onUnmounted, reactive, ref, watch,computed } from "vue";
+import { useSocketStore } from "@/store/moduleSocketMechanics";
+import border13 from '@/components/border/Border13.vue'
+import { number } from "echarts/core";
 const { proxy } = getCurrentInstance() as any;
-const props = defineProps<{
+const store = useSocketStore();
-  title: String;
+let index = 0;
-  value: any;
-}>();
 let dust = ref();
 let chart = ref(null)
-watch(props,(newVal)=>{
+let timer = null
-  init()
+const props = defineProps({
-}, { deep: true,})
+  pm10limit:{
+    type:Number,
+    default:150
+  },
+  pm25limit:{
+    type:Number,
+    default:75
+  }
+})
+let errList = computed(() => {
+  let arr = JSON.parse(JSON.stringify(store.pm.filter(item=>{
+    return +item.pm10>props.pm10limit||+item.pm25>props.pm25limit
+  }))).map(item=>{
+    item.name = item.name.split('车间')[0]
+    return item
+  })
+  return arr;
+})
+const borderColor = ["#E43961","#E43961"]
 function init() {
   if (!chart.value) {
     chart.value = proxy.$echarts.init(dust.value, 'dark');
   }
   let option = {
     title: {
-      text: props.title,
+      text: store.pm[index].name,
       show: true,
       textStyle: {
         color: "#fff",
@@ -106,7 +132,7 @@ function init() {
         },
         data: [
           {
-            value: props.value.two,
+            value: store.pm[index].pm25,
             name: "PM2.5",
           },
         ],
@@ -166,7 +192,7 @@ function init() {
         },
         data: [
           {
-            value: props.value.ten,
+            value: store.pm[index].pm10,
             name: "PM10",
           },
         ],
@@ -179,7 +205,17 @@ function init() {
 
 onMounted(() => {
   init();
+  timer = setInterval(() => {
+    index = index + 1;
+    if (index >= store.humiture.length) {
+      index = 0;
+    }
+    init();
+  }, 5000);
 });
+onUnmounted(() => {
+  clearInterval(timer);
+})
 </script>
 
 <style scoped>
@@ -187,4 +223,38 @@ onMounted(() => {
   width: 100%;
   height: 100%;
 }
+
+.errList {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.echartbox {
+  width: 100%;
+  height: calc(100% - 50px);
+}
+
+.icon-red {
+  color: #e43961;
+  animation: redstart 2s infinite;
+  font-size: 14px;
+  /* position: relative; */
+  /* top: -15px; */
+}
+.err-item {
+  margin: 0 10px;
+}
+
+@keyframes redstart {
+  0% {}
+
+  50% {
+    text-shadow: #fff 1px 0 10px;
+  }
+
+  100% {}
+}
 </style>

src/views/generalEnvironmentMechanical/components/verticalNumLoop.vue

@@ -30,10 +30,14 @@
                   </li>
                 </ul>
                 <template #reference>
-                  <i :class="+items.val > +limit
+                  <!-- <i :class="+items.val > +limit
                       ? 'iconfont ' + icon + ' icon-red iconsmall-size'
                       : 'iconfont ' + icon + ' icon-blue iconsmall-size'
-                    "></i>
+                    "></i> -->
+                    <text :class="+items.val > +limit
+                      ? ' icon-red iconsmall-size cursor'
+                      : ' icon-blue iconsmall-size'
+                    ">{{ items.name.split('车间')[0]}}</text>
                 </template>
               </el-popover>
             </div>
@@ -140,7 +144,10 @@ p {
 }
 
 .iconsmall-size {
-  font-size: 20px;
+  font-size: 14px;
+}
+.cursor {
+  cursor: pointer;
 }
 
 .icon-red {
@@ -181,7 +188,7 @@ p {
 .icontip {
   display: flex;
   margin-top: -60px;
-  width: 100px;
+  width: 150px;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;

src/views/generalEnvironmentMechanical/index.vue

@@ -9,34 +9,18 @@
         </div>
         <div class="content" ref="Acontent">
             <div class="top-box">
-                <div style="width: 12%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
+                <div class="top-box-item" v-for="item in store.newVerticalNum">
-                    v-for="item in store.newVerticalNum">
+                    <verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
-                    <verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit"
+                        :limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
-                        :value="item.value"></verticalNumLoop>
                 </div>
-                <div style="width: 12%;height: 250px;margin-bottom: 10px;" @click="gotoTrendChart(store.pm, 'μg/m3')">
+                <div class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3')">
-                    <border13>
+                    <pm :pm10limit="150" :pm25limit="75"></pm>
-                        <template v-slot>
-                            <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;">
+                <div class="top-box-item"  @click="gotoTrendChart(store.humiture, '℃/%RH')">
-                    <border13>
+                    <humidity :top="humidityTop" :bottom="humidityBottom"></humidity>
-                        <template v-slot>
-                            <gas :title="t('messages.gashistory')" :value="gasData"></gas>
-                        </template>
-                    </border13>
                 </div>
             </div>
             <div class="bottom-box">
-                <div style="width: 33%;height: 100%;">
-                    <border13>
-                        <power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value">
-                        </power>
-                    </border13>
-                </div>
                 <div style="width: 33%;height: 100%;">
                     <border13>
                         <pipe :title="t('messages.PipelinePressure_Mpa')" :value="pipeData"></pipe>
@@ -44,8 +28,24 @@
                 </div>
                 <div style="width: 33%;height: 100%;">
                     <border13>
-                        <humidityBar :title="'温湿度'" :data="humidityData" :bottom="humidityBottom" :top="humidityTop">
+                        <power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value">
-                        </humidityBar>
+                        </power>
+                    </border13>
+                </div>
+                <div style="width: 16%;height: 100%;">
+                    <border13>
+                        <!-- <humidityBar :title="'温湿度'" :data="humidityData" :bottom="humidityBottom" :top="humidityTop">
+                        </humidityBar> -->
+                        <gas :title="t('messages.gashistory')" :value="gasData" 
+                        :color="gascolor"></gas>
+                    </border13>
+                </div>
+                <div style="width: 16%;height: 100%;">
+                    <border13>
+                        <!-- <humidityBar :title="'温湿度'" :data="humidityData" :bottom="humidityBottom" :top="humidityTop">
+                        </humidityBar> -->
+                        <gas :title="t('messages.waterhistory')" :value="waterData" 
+                        :color="watercolor"></gas>
                     </border13>
                 </div>
             </div>
@@ -61,6 +61,7 @@ import verticalNumLoop from './components/verticalNumLoop.vue'
 import power from './components/power2023.vue';
 import pm from './components/pm.vue';
 import humidityBar from './components/humidityBar.vue';
+import humidity from './components/humidity.vue';
 import gas from './components/gas.vue'
 import pipe from './components/pipe.vue'
 import border13 from '@/components/border/Border13.vue'
@@ -73,6 +74,7 @@ import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { gettime, clacendTime } from "@/utils/time"
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { hu } from 'element-plus/es/locale';
 let { t } = useI18n();
 let router = useRouter()
 const store = useSocketStore();
@@ -104,13 +106,14 @@ const verticalType = {
 let powerData = ref({ value: { name: [] }, seriesVal: [], title: t('messages.Powerto2023') })
 
 let gasData = ref(0)
-
+let waterData = ref(0)
 let pipeData = ref({ listData: [], top: 0 })
 
 let headerref = ref()
 let verticalList: any[] = reactive([])
 let pmtimer = null
-let humittimer = null
+let humidityTop = ref({})
+let humidityBottom = ref({})
 
 /**
  * 跳转到趋势图
@@ -194,10 +197,13 @@ async function gethumitureData() {
 
     if (result.code == 200) {
         store.$patch((state) => {
-            state.humiture = result.data
+            state.humiture = result.data.Humiture
         })
+        humidityBottom.value = result.data.bottom
+        humidityTop.value = result.data.top
     }
 }
+/**用电量柱状图
 let humidityData = ref({})
 let humidityBottom = ref({})
 let humidityTop = ref({})
@@ -212,7 +218,7 @@ watch(() => store.humiture, (newVal, oldVal) => {
     humidityBottom.value = newVal.bottom;
     humidityTop.value = newVal.top;
 }, { deep: true, immediate: true })
-
+ */
 //获取粉尘数据
 let pmindex = ref(0);
 async function getPmData() {
@@ -233,8 +239,8 @@ async function getPmData() {
             if (arr.indexOf(ele.devId) > -1) {                
                 data[ele.devId] = {
                     devId: ele.devId,
-                    name: ele.name + '粉尘',
+                    name: ele.devName.split('监测')[0],
-                    pm2: ele.value,
+                    pm25: ele.value,
                     pm10: null
                 }
             }
@@ -249,15 +255,10 @@ async function getPmData() {
 
         })
     }
+    
     store.$patch((state) => {
         state.pm = Object.values(data)
     })
-    pmtimer = setInterval(() => {
-        pmindex.value++
-        if (pmindex.value >= store.pm.length) {
-            pmindex.value = 0
-        }
-    }, 5000)
 
 }
 //获取用电量数据
@@ -314,6 +315,10 @@ async function getPower_data() {
         powerData.value.title = '机械分厂用电量'
     }
 }
+
+let gascolor = {step0:'#186945',step1:'#1b7a4f',border:'rgba(8, 206, 120, 0.8)',color:'rgba(8, 206, 120, 0.4)'}
+let watercolor = {step0:'#0D73B3',step1:'#1176C6',border:'#1E4D7B',color:'#0F2A57'}
+//获取用气量数据
 async function getconsumeDetailfun() {
     let result: any = await getconsumeDetail()
     if (result.code == 200) {
@@ -321,6 +326,9 @@ async function getconsumeDetailfun() {
             if (res.deptName == '喷漆车间' && res.type == 'GasDetail') {
                 gasData.value = res.usageNum
             }
+            if (res.deptName == '生产区' && res.type == 'WaterDetail') {
+                waterData.value = res.usageNum
+            }
         })
 
     }
@@ -334,7 +342,8 @@ async function getpipeDatafun() {
         pipeData.value.top = result.data.top
     }
 }
-
+/************************************************************ */
+//socket
 function getWebsocket(val) {
     headerref.value.HeadergetWebsocket(val)
     try {
@@ -376,9 +385,12 @@ function getWebsocket(val) {
             store.changeHumiture(data.msg);
         }
 
+        if (data.type == "dust") {
+            store.changeDust(data.msg);
+        }
+
     } catch (err) {
-        console.log(err, "报错了大哥", console.log(val)
+        console.log(err, "报错了大哥", console.log(val));
-        );
 
     }
 }
@@ -399,7 +411,6 @@ onMounted(() => {
 })
 onUnmounted(() => {
     closeWebsocket();
-    clearInterval(pmtimer)
 })
 </script>
 
@@ -424,15 +435,24 @@ onUnmounted(() => {
 
 .top-box {
     width: 1920px;
-    height: 290px;
+    height: 340px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
+.top-box-item {
+    width: 12%;
+    height: 300px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
 .bottom-box {
     width: 1920px;
-    height: 630px;
+    height: 580px;
     display: flex;
     justify-content: space-between;
     align-items: center;