update

src/http/config/index.ts

@@ -0,0 +1,6 @@
+import {get,post} from "@/utils/http"
+
+// 根据参数键名查询参数值
+export function getConfigKey(configKey) {
+    return get('/system/config/configKey/' + configKey)
+  }

src/store/module/offsite.ts

@@ -41,19 +41,27 @@ export const Offsite = defineStore(Names.offsite, {
           title: "在线产品",
           type: "在线产品",
           num: 0,
-          status:null
+          status: null
         },
         {
           title: "离线产品",
           type: "离线产品",
           num: 13,
-          status:null
+          status: null
         },
       ],
-      offsitegatewayStatus:[],
+      offsitegatewayStatus: [],
       devtype: [],
       devlist: [],
-      EquipmentStatusDiagram:[]
+      EquipmentStatusDiagram: [],
+      limit: {
+        temp_bottom: -11,
+        temp_top: 45,
+        humidity_bottom: 15,
+        humidity_top: 75,
+        dust10: 150,
+        dust25: 75,
+      }
     };
   },
   //computed 修改一些值
@@ -101,14 +109,14 @@ export const Offsite = defineStore(Names.offsite, {
         });
       });
     },
-    setoffsitegatewayStatus(val:any){
+    setoffsitegatewayStatus(val: any) {
-      this.offsitegatewayStatus=val
+      this.offsitegatewayStatus = val
     },
-    changeoffsitegatewayStatus(val:any){
+    changeoffsitegatewayStatus(val: any) {
 
     },
-    changeEquipmentStatusDiagram(val:any){
+    changeEquipmentStatusDiagram(val: any) {
-      this.EquipmentStatusDiagram=val
+      this.EquipmentStatusDiagram = val
     },
     //重置store数据
     resetAllData() {

src/views/Temp/GetonAgain/chart/humidity.vue

@@ -15,7 +15,10 @@
 <script setup lang="ts">
 import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
 import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
+import { Offsite } from "@/store/module/offsite";
 const { proxy } = getCurrentInstance() as any;
+
+let store = Offsite();
 let props = defineProps<{
   name: String;
   title: any;
@@ -29,6 +32,19 @@ const echartsData = reactive<EDataPerson>({
     box: null,
   },
 });
+
+
+function calculateRatio(min, max, limit) {
+    if (max === min) {
+        return 0; // 处理max等于min的情况，返回0
+    }
+    let ratio = (limit - min) / (max - min);
+    ratio = Math.max(0, Math.min(1, ratio)); // 限制比例在0到1之间
+    ratio = Math.round(ratio * 100) / 100; // 四舍五入到两位小数
+    return ratio;
+}
+
+
 /**
  * @函数功能:
  * @param {*} value 需要设置的数据
@@ -47,7 +63,7 @@ const setData = (value: any) => {
         color: "#fff",
         fontSize: 20,
       },
-      top:5
+      top: 5
     },
     grid: {
       // 让图表占满容器
@@ -66,73 +82,73 @@ const setData = (value: any) => {
         min: -30,
         max: 70,
         splitNumber: 10,
-      progress: {
+        progress: {
-        show: false,
+          show: false,
-        width: 5
+          width: 5
-      },
+        },
-      pointer: {
+        pointer: {
-        itemStyle: {
+          itemStyle: {
+            color: 'inherit'
+          }
+        },
+        //刻度轴宽
+        axisLine: {
+          lineStyle: {
+            width: 5,
+            color: [
+              [calculateRatio(-30,70,store.limit.temp_bottom), '#FF6E76'],
+              [calculateRatio(-30,70,store.limit.temp_top), '#7CFFB2'],
+              [1, '#FF6E76']
+            ]
+          }
+        },
+        //刻度线
+        axisTick: {
+          show: false,
+          distance: -5,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: '#999'
+          }
+        },
+        //刻度线
+        splitLine: {
+          distance: -10,
+          length: 3,
+          lineStyle: {
+            width: 3,
+            color: '#999'
+          }
+        },
+        //表刻度值
+        axisLabel: {
+          distance: -20,
+          color: '#999',
+          fontSize: 12
+        },
+        anchor: {
+          show: false
+        },
+        title: {
+          show: false
+        },
+        detail: {
+          valueAnimation: true,
+          // width: '10%',
+          // lineHeight: 5,
+          // borderRadius: 8,
+          // offsetCenter: [0, '-15%'],
+          fontSize: 12,
+          // fontWeight: 'bolder',
+          formatter: '{value} °C',
           color: 'inherit'
-        }
+        },
-      },
+        data: [
-      //刻度轴宽
+          {
-      axisLine: {
+            value: value.c
-        lineStyle: {
+          }
-          width: 5,
+        ]
-          color: [
-            [0.15, '#FF6E76'],
-            [0.75, '#7CFFB2'],
-            [1, '#FF6E76']
-          ]
-        }
-      },
-      //刻度线
-      axisTick: {
-        show:false,
-        distance: -5,
-        splitNumber: 5,
-        lineStyle: {
-          width: 2,
-          color: '#999'
-        }
-      },
-      //刻度线
-      splitLine: {
-        distance: -10,
-        length: 3,
-        lineStyle: {
-          width: 3,
-          color: '#999'
-        }
-      },
-      //表刻度值
-      axisLabel: {
-        distance: -20,
-        color: '#999',
-        fontSize: 12
-      },
-      anchor: {
-        show: false
-      },
-      title: {
-        show: false
-      },
-      detail: {
-        valueAnimation: true,
-        // width: '10%',
-        // lineHeight: 5,
-        // borderRadius: 8,
-        // offsetCenter: [0, '-15%'],
-        fontSize: 12,
-        // fontWeight: 'bolder',
-        formatter: '{value} °C',
-        color: 'inherit'
-      },
-      data: [
-        {
-          value: value.c
-        }
-      ]
       },
       {
         type: "gauge",
@@ -142,70 +158,70 @@ const setData = (value: any) => {
         min: 0,
         max: 100,
         progress: {
-        show: false,
+          show: false,
-        width: 5
+          width: 5
-      },
+        },
-      pointer: {
+        pointer: {
-        itemStyle: {
+          itemStyle: {
+            color: 'inherit'
+          }
+        },
+        //刻度轴宽
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [calculateRatio(0,100,store.limit.humidity_bottom), '#FF6E76'],
+              [calculateRatio(0,100,store.limit.humidity_top), '#7CFFB2'],
+              [1, '#FF6E76']
+            ]
+          }
+        },
+        //刻度线
+        axisTick: {
+          distance: 0,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: '#999'
+          }
+        },
+        //刻度线
+        splitLine: {
+          distance: 5,
+          length: 3,
+          lineStyle: {
+            width: 3,
+            color: '#999'
+          }
+        },
+        axisLabel: {
+          distance: -30,
+          color: '#999',
+          fontSize: 20
+        },
+        anchor: {
+          show: false
+        },
+        title: {
+          show: false
+        },
+        detail: {
+          valueAnimation: true,
+          offsetCenter: [0, '15%'],
+          fontSize: 15,
+          formatter: '{value} %RH',
           color: 'inherit'
-        }
+        },
-      },
+        data: [
-      //刻度轴宽
+          {
-      axisLine: {
+            value: value.h
-        lineStyle: {
+          }
-          width: 10,
+        ]
-          color: [
-            [0.15, '#FF6E76'],
-            [0.75, '#7CFFB2'],
-            [1, '#FF6E76']
-          ]
-        }
-      },
-       //刻度线
-      axisTick: {
-        distance: 0,
-        splitNumber: 5,
-        lineStyle: {
-          width: 2,
-          color: '#999'
-        }
-      },
-       //刻度线
-      splitLine: {
-        distance: 5,
-        length: 3,
-        lineStyle: {
-          width: 3,
-          color: '#999'
-        }
-      },
-      axisLabel: {
-        distance: -30,
-        color: '#999',
-        fontSize: 20
-      },
-      anchor: {
-        show: false
-      },
-      title: {
-        show: false
-      },
-      detail: {
-        valueAnimation: true,
-     offsetCenter: [0, '15%'],
-        fontSize: 15,
-        formatter: '{value} %RH',
-        color: 'inherit'
-      },
-      data: [
-        {
-          value: value.h
-        }
-      ]
       },
     ],
   };
-    change(echartsData.humiture);
+  change(echartsData.humiture);
 };
 
 const change = (item: EDataPersonItem) => {
@@ -227,7 +243,7 @@ const updata = (item: EDataPersonItem) => {
 function setchartWH(width: any, height: any) {
   echartsData.humiture!.div = humiture.value;
   humiture.value.style.height = height + "px";
-  humiture.value.style.width = width  + "px";
+  humiture.value.style.width = width + "px";
   if (echartsData.humiture.box) {
     echartsData.humiture.box.resize();
   }
@@ -244,7 +260,7 @@ defineExpose({
 </script>
 
 <style scope>
-.content-small{
+.content-small {
   margin-right: 3px;
 }
 </style>

src/views/Temp/GetonAgain/chart/pm.vue

@@ -14,13 +14,28 @@
 
 <script setup lang="ts">
 import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
+import { Offsite } from "@/store/module/offsite";
 import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
 const { proxy } = getCurrentInstance() as any;
+let store = Offsite();
 let props = defineProps<{
   name: String;
   title: any;
 }>();
 let humiture = ref();
+
+
+
+function calculateRatio(min, max, limit) {
+    if (max === min) {
+        return 0; // 处理max等于min的情况，返回0
+    }
+    let ratio = (limit - min) / (max - min);
+    ratio = Math.max(0, Math.min(1, ratio)); // 限制比例在0到1之间
+    ratio = Math.round(ratio * 100) / 100; // 四舍五入到两位小数
+    return ratio;
+}
+
 const echartsData = reactive<EDataPerson>({
   humiture: {
     div: null,
@@ -37,6 +52,9 @@ const echartsData = reactive<EDataPerson>({
  * @函数备注:
  */
 const setData = (value: any) => {
+
+  let pmmax = props.title=="PM10"?200:100;
+  let pmratemax = props.title=="PM10"?store.limit.dust10:store.limit.dust25;
   echartsData.humiture!.div = humiture.value;
   echartsData.humiture!.title = props.title;
   echartsData.humiture!.data = {
@@ -70,7 +88,7 @@ const setData = (value: any) => {
             width: 10,
             color: [
               [0.35, "#7CFFB2"],
-              [0.75, "#FDDD60"],
+              [calculateRatio(0,pmmax,pmratemax), "#FDDD60"],
               [1, "#FF6E76"],
             ],
           },

src/views/Temp/GetonAgain/index.vue

@@ -64,6 +64,7 @@ import { calcWH } from "@/components/ts/selfAdaption";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { Offsite } from "@/store/module/offsite";
 import { getSensorByDept } from "@/http/PaintShopView/index";
+import { getConfigKey } from "@/http/config/index";
 import bottom from "./bottom.vue";
 import right from "./right.vue";
 import top from "./top.vue";
@@ -110,6 +111,32 @@ async function getSensorByDeptfun() {
     rightref.value.setcontentData(result.data);
   }
 }
+
+function getConfigKeyFun() {
+  let axios_arr = [
+    getConfigKey("temp_bottom"),
+    getConfigKey("temp_top"),
+    getConfigKey("humidity_bottom"),
+    getConfigKey("humidity_top"),
+    getConfigKey("dust10"),
+    getConfigKey("dust25"),
+  ]
+
+  Promise.all(axios_arr).then((res:any) => {
+    let limit = {
+      temp_bottom: res[0].msg,
+      temp_top: res[1].msg,
+      humidity_bottom: res[2].msg,
+      humidity_top: res[3].msg,
+      dust10: res[4].msg,
+      dust25: res[5].msg,
+    }
+    store.limit = limit;
+    
+  });
+  
+}
+
 function getWebsocket(val) {
   // headerref.value.HeadergetWebsocket(val)
   try {
@@ -147,6 +174,7 @@ onMounted(() => {
       WH(contentBox);
     }, 1000);
   });
+  getConfigKeyFun();
   getSensorByDeptfun();
   connectWebsocket(null, null, getWebsocket, errWebsocket);
 });

src/views/Temp/GetonAgain/right.vue

@@ -50,7 +50,6 @@
   import border6 from "@/components/borderBox/border6.vue";
   import border3 from "@/components/borderBox/border3.vue";
   import pm from "./chart/pm.vue";
-  import power from "./chart/power2023.vue";
   import chart from "@/components/assembly/chart2.vue";
   import { useRoute, useRouter } from "vue-router";
   import { useEnergyConsumeStore } from "@/store/module/energyConsume";