update

src/router/index.js

@@ -77,12 +77,12 @@ export const constantRoutes = [
     hidden: true,
     redirect: 'noredirect',
     children: [
-      {
-        path: "/screen/R_D_Environment",
-        name: "R_D_Environment",
-        component: () => import("../views/screen/R_D_Environment/index.vue"),
-        hidden: true
-      },
+      // {
+      //   path: "/screen/R_D_Environment",
+      //   name: "R_D_Environment",
+      //   component: () => import("../views/screen/R_D_Environment/index.vue"),
+      //   hidden: true
+      // },
       {
         path: "/screen/R_D_Environment1",
         name: "R_D_Environment1",

src/utils/threejs.ts

@@ -32,7 +32,7 @@ export function findChildren (object3D: Object3D, callback: (obj: Object3D) => b
 
 export function checkNameIncludes (obj: Object3D, str: string): boolean {
   if (obj.name.includes(str)) {
-    console.log(obj.name);
+    // console.log(obj.name);
     
     return true;
   } else {

src/views/screen/R_D_Environment1/component/Lr3.vue

@@ -14,7 +14,8 @@
                 </svg>
                 <div class="text-label">
                     <div class="label-left">{{ prop.public_list.devName }}</div>
-                    <div class="label-right"><i class="value">{{ prop.public_list.data }}</i> dB</div>
+                    <div class="label-right"><i class="value" :style="{ color: checkCb(prop.public_list) }">{{
+                            prop.public_list.data }}</i> dB</div>
                 </div>
             </div>
             <Progress v-for="item in prop.office_list" :mdoelValue1="item" />
@@ -56,7 +57,14 @@ const prop = defineProps({
     },
 });
 
-
+//检测是否超标
+function checkCb(item) {
+    if (item.data > 85) {
+        return '#FF0000'
+    } else {
+        return '#2affff'
+    }
+}
 
 </script>
 
@@ -103,6 +111,7 @@ const prop = defineProps({
 
                 .label-right {
                     color: #2affff;
+
                     .value {
                         //color: #fff;
                     }

src/views/screen/R_D_Environment1/component/Lr4.vue

@@ -40,6 +40,7 @@ const options = computed(() => {
             bottom: '3%',
             containLabel: true
         },
+        backgroundColor: 'transparent',
         xAxis: {
             type: 'category',
             boundaryGap: false,

src/views/screen/R_D_Environment1/component/proge.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const prop = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return [
+        {
+          "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
+          "devName": "噪声监测7",
+          "label": "noise-7",
+          "place": null,
+          "data": 0,
+          "status": 0
+        }]
+    }
+  }
+});
+
+const bodyMax = 150;
+
+
+
+const options = computed(() => {
+
+
+  let xData = []
+  let seriesData = []
+  prop.data.forEach((item) => {
+    xData.push(item.devName);
+    seriesData.push(item.data);
+  });
+  const labelSetting = {
+    show: true,
+    position: 'top',
+    offset: [0, -20],
+    formatter: function (param) {
+      return xData[param.dataIndex] + '\r\n' + seriesData[param.dataIndex] + 'dB';
+    },
+    fontSize: 14,
+    fontFamily: 'Arial',
+    color: '#33FFFF'
+  };
+  return {
+    tooltip: {
+    },
+    backgroundColor: 'transparent',
+    xAxis: {
+      data: xData,
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { show: false }
+    },
+    yAxis: {
+      show: false,
+      max: bodyMax,
+      offset: 20,
+      splitLine: { show: false },
+    },
+    grid: {
+      top: 'center',
+      height: 230,
+      left: 0,
+      right: 0
+    },
+    markLine: {
+      z: -100
+    },
+    series: [
+      {
+        name: 'typeA',
+        type: 'pictorialBar',
+        symbolClip: true,
+        symbolBoundingData: bodyMax,
+        symbolRepeat: true, //图形是否重复
+        symbolSize: [25, 6], //图形元素的尺寸
+        itemStyle: {
+          color: '#33FFFF'
+        },
+        data: seriesData.map((item) => {
+          let dataobj = {
+            value: item
+          }
+          if (item > 100) {
+            dataobj.itemStyle = {
+              color: '#FF0000'
+            }
+            
+          }
+          return dataobj
+        }),
+        z: 10
+      },
+      {
+        name: 'full',
+        type: 'pictorialBar',
+        symbolBoundingData: bodyMax,
+        label: labelSetting,
+        animationDuration: 0,
+        symbolRepeat: true, //图形是否重复
+        symbolSize: [25, 6], //图形元素的尺寸
+        itemStyle: {
+          color: '#ccc'
+        },
+        data: prop.data.map(item => {
+          return {
+            value: 100,
+          }
+        })
+      }
+    ]
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/screen/R_D_Environment1/index.vue

@@ -427,9 +427,9 @@ onMounted(() => {
 
         }
 
-        if (deltaY.value >= 0) {
-            deltaY.value = 0
-        }
+        // if (deltaY.value >= 0) {
+        //     deltaY.value = 0
+        // }
     }, { passive: false });
 });
 </script>