update

src/api/screen/R_D_Environment.js

@@ -17,3 +17,16 @@ export function getTopData(query) {
         params: query
     })
 }
+
+/** 获取特定传感器数据
+ * @param {Object} query
+ * @param {'water_pressure'|'TVOC_CH2O'|'temp_humi'|'Smoke'|'noise'|'Methane'|'hydraulic_pressure'|'FIRE'|'dust'|'Current'} query.type 传感器类型
+ * @param {number} query.deptId 部门id
+ */
+export function getSensorDateHourByType(query) {
+    return request({
+        url: '/screen/goaSenso/getSensorDateHourByType',
+        method: 'get',
+        params: query
+    })
+}

src/views/screen/R_D_Environment/component/barChart.vue

@@ -0,0 +1,168 @@
+<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 {};
+        }
+    }
+});
+
+const options = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            borderColor: '#00c6ff',
+            borderWidth: 2,
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            },
+            formatter: function (params) {
+                let tooltipText = '';
+                let xAxisValue = params[0].name;
+                params.forEach((item) => {
+                    tooltipText += `<div style="padding: 2px 0;"><strong>${item.seriesName}:</strong> ${item.value}</div>`;
+                });
+                return `${xAxisValue}<br>${tooltipText}`;
+            },
+            padding: 10,
+            extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['办公室1', '办公室2', '办公室3', '办公室4', '办公室5'],
+            axisLabel: {
+                color: "#ffffff",
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#0091ea'
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: [{
+            name:'次',
+            type: 'value',
+            splitLine: {
+                show: false,
+                lineStyle: {
+                    color: '#1e90ff',
+                    type: 'dashed'
+                }
+            },
+            axisLabel: {
+                color: "#ffffff"
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#0091ea'
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        }, {
+            name:'kWh',
+            type: 'value',
+            splitLine: {
+                show: false,
+                lineStyle: {
+                    color: '#1e90ff',
+                    type: 'dashed'
+                }
+            },
+            axisLabel: {
+                color: "#ffffff"
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#0091ea'
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        }],
+        series: [
+            {
+                name: '开关次数',
+                data: [106, 90, 25, 0, 35],
+                type: 'bar',
+                barWidth: '20',
+                barCategoryGap: '10%',
+                showBackground: true,
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: '#00c6ff' },
+                            { offset: 1, color: '#0072ff' }
+                        ]
+                    },
+                    borderRadius: [60, 60, 60, 60],
+                    stroke: '#00c6ff',
+                    lineWidth: 2
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    color: '#ffffff'
+                },
+                backgroundStyle: {
+                    borderRadius: [60, 60, 60, 60],
+                }
+            },
+            {
+                name: '用电量',
+                data: [210, 30, 110, 80, 120],
+                yAxisIndex: 1,
+                type: 'bar',
+                barWidth: '20',
+                barCategoryGap: '10%',
+                showBackground: true,
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: '#00c6ff' },
+                            { offset: 1, color: '#0072ff' }
+                        ]
+                    },
+                    borderRadius: [60, 60, 60, 60],
+                    stroke: '#00c6ff',
+                    lineWidth: 2
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    color: '#ffffff'
+                },
+                backgroundStyle: {
+                    borderRadius: [60, 60, 60, 60],
+                }
+            },
+
+        ],
+    };;
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/screen/R_D_Environment/component/pm.vue

@@ -9,14 +9,8 @@ const prop = defineProps({
         type: Object,
         default: () => {
             return {
-                date: ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'],
+                pm25: 0,
-                series: [{
+                pm10: 0,
-                    type: '温度',
-                    value: [20, 22, 23, 24, 25, 26, 27]
-                }, {
-                    type: '湿度',
-                    value: [30, 32, 33, 34, 35, 36, 37]
-                }]
             };
         }
     }
@@ -102,7 +96,7 @@ const options = computed(() => {
                 },
                 data: [
                     {
-                        value: 80,
+                        value: prop.data.pm25,
                         name: "PM2.5",
                     },
                 ],
@@ -162,7 +156,7 @@ const options = computed(() => {
                 },
                 data: [
                     {
-                        value: 60,
+                        value: prop.data.pm10,
                         name: "PM10",
                     },
                 ],

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

@@ -100,22 +100,11 @@ const options = computed(() => {
         itemStyle: {
           color: '#ccc'
         },
-        data: [
+        data: prop.data.map(item => {
-          {
+          return {
-            value: 100,
-          }, {
-            value: 100,
-          }, {
-            value: 100,
-          }, {
-            value: 100,
-          }, {
-            value: 100,
-          }, {
             value: 100,
           }
-
+        })
-        ]
       }
     ]
   }

src/views/screen/R_D_Environment/index.vue

@@ -3,18 +3,18 @@
     <div class="abs-header">研发中心环境实时监测系统</div>
     <div class="l-box">
       <div class="lbox1">
-        <ItemVue title="温湿度">
+        <ItemVue title="温湿度监测">
           <Humiture />
         </ItemVue>
       </div>
       <div class="lbox1">
-        <ItemVue title="粉尘">
+        <ItemVue title="粉尘监测">
-          <PmVue />
+          <PmVue :data="dustData" />
         </ItemVue>
       </div>
       <div class="lbox1">
-        <ItemVue title="温湿度">
+        <ItemVue title="智能控制系统">
-          <LineChart />
+          <BarChart />
         </ItemVue>
       </div>
     </div>
@@ -22,7 +22,7 @@
       <div class="ct-sensor">
         <div class="sensor-item" v-for="item in sensor_list">   <!-- :style="{color:item.status == 'true'?'#469DE9':'gray'}" -->
           <component style="width: 75px;height: 75px;margin-top: 10px;"  :is="item.component"
-            :value="item.value" :color="item.status == 'true'?'#469DE9':'gray'" :unit="item.unit" /><!--  -->
+            :value="item.value" :color="checkCb(item)" :unit="item.unit" /><!-- item.status == 'true'?'#469DE9':'gray' -->
             
           <div style="margin: 10px 0">{{ item.value + item.unit }}</div>
           <div>{{ item.name }}</div>
@@ -32,12 +32,12 @@
     </div>
     <div class="cb-box">
       <div class="cbox">
-        <ItemVue title="温湿度">
+        <ItemVue title="甲醛监测">
           <LineChart />
         </ItemVue>
       </div>
       <div class="cbox">
-        <ItemVue title="温湿度">
+        <ItemVue title="TVOC监测">
           <LineChart />
         </ItemVue>
       </div>
@@ -72,6 +72,7 @@ import ItemVue from './component/item.vue';
 import Humiture from './component/humiture_line.vue';
 import PmVue from './component/pm.vue';
 import LineChart from './component/lineChart.vue';
+import BarChart from './component/barChart.vue';
 import ProgeChart from './component/proge.vue';
 import SvgFenchen from './component/svgFenchen.vue';
 import SvgPm25 from './component/svgPm25.vue';
@@ -82,7 +83,7 @@ import SvgTVOC from './component/svgTVOC.vue';
 import SvgShidu from './component/svgShidu.vue';
 import SvgWendu from './component/svgWendu.vue';
 import SvgYanwu from './component/svgYanwu.vue';
-import { getNoiseData,getTopData } from '@/api/screen/R_D_Environment';
+import { getNoiseData,getTopData,getSensorDateHourByType } from '@/api/screen/R_D_Environment';
 
 let noiseDataList = ref([
   {
@@ -102,6 +103,7 @@ let sensor_list = reactive([
     value: 20,
     unit: '℃',
     type: 'AirTemp_Reg',
+    limit: 30,
     status: "true"
   },
   {
@@ -111,6 +113,7 @@ let sensor_list = reactive([
     value: 20,
     unit: '%',
     type: 'AirHumi_Reg',
+    limit: 30,
     status: "true"
   },
   {
@@ -120,6 +123,7 @@ let sensor_list = reactive([
     value: 20,
     unit: 'mg/m³',
     type: 'CH2O',
+    limit: 30,
     status: "true"
   },
   {
@@ -129,6 +133,7 @@ let sensor_list = reactive([
     value: 20,
     unit: 'mg/m³',
     type: 'TVOC',
+    limit: 30,
     status: "true"
   },
   {
@@ -138,6 +143,7 @@ let sensor_list = reactive([
     value: 20,
     unit: 'mg/m³',
     type:'HIGH_PM25_Reg',
+    limit: 30,
     status: "true"
   },
   {
@@ -147,6 +153,7 @@ let sensor_list = reactive([
     value: 20,
     unit: 'mg/m³',
     type:'HIGH_PM10_Reg',
+    limit: 30,
     status: "true"
   },
   {
@@ -156,6 +163,7 @@ let sensor_list = reactive([
     value: 20,
     unit: 'dB',
     type:'Noise_Reg',
+    limit: 30,
     status: "true"
   },
   {
@@ -165,9 +173,24 @@ let sensor_list = reactive([
     value: 20,
     unit: 'mg/m³',
     type:'Smoke_Reg',
+    limit: 30,
     status: "true"
   }
 ])
+let dustData = reactive({
+  pm25: 0,
+  pm10: 0,
+})
+//检测是否超标
+function checkCb(item) {
+  if (item.status === 'false') {
+    return 'gray'
+  }else if (item.value > item.limit) {
+    return '#FF0000'
+  } else {
+    return '#469DE9'
+  }
+}
 
 
 // 获取各办公室噪音数据
@@ -187,12 +210,27 @@ function getTopDataList() {
         sensor_list[index].value = item.data
         sensor_list[index].id = item.id
         sensor_list[index].status = item.status
+        sensor_list[index].limit = item.limit
+        if (item.type === 'HIGH_PM25_Reg') {
+          dustData.pm25 = item.data
+        } else if (item.type === 'HIGH_PM10_Reg') {
+          dustData.pm10 = item.data
+          
+        }
 
       })
     }
   })
 }
 
+// 获取传感器数据
+function getSensorData(type) {
+  let query = {
+    type,
+    deptId: '100'
+  }
+  getSensorDateHourByType(query)
+}
 
 
 onMounted(() => {