styleFix

src/api/index.js

@@ -269,6 +269,15 @@ export function getWarningMessageList(params) {
 }
 
 
+export function getRecent30DayNoiseDataList(params) {
+    return request({
+        url: '/pweb/s/env/day/noise/list',
+        method: 'get',
+        params
+    })
+}
+
+
 
 // safecap
 export function getSafeCapDeviceList(params) {

src/components/noise/Index.vue

@@ -71,9 +71,18 @@
           "
         >
           <div style="display: flex">
+            <noise-dialog
+              :visible="noiseVisible"
+              :data="noiseWarningData"
+              @changeVisible="(val) => (noiseVisible = val)"
+            ></noise-dialog>
             <div class="chart-container">
               <div ref="noiseChart" id="noise-chart"></div>
-              <div class="title">
+              <div
+                class="title"
+                @click="showNoiseDialog"
+                style="cursor: pointer"
+              >
                 <div class="sub-title">近30日</div>
                 <div class="sub-title">噪音情况</div>
               </div>
@@ -299,11 +308,13 @@ import {
   getTodayAqiLineChartData,
   getWarningMessageList,
   getWarningLogDetail,
+  getRecent30DayNoiseDataList,
 } from "@/api/index";
 import WarningDialog from "@/components/earlywarning/WarningDialog";
+import NoiseDialog from "./noiseDialog";
 export default {
   name: "Noise",
-  components: { WarningDialog },
+  components: { WarningDialog, NoiseDialog },
   data() {
     return {
       pieChartData: [],
@@ -326,6 +337,8 @@ export default {
       warningData: {},
       warningDialogVisible: false,
       warning_line: 0,
+      noiseWarningData: [],
+      noiseVisible: false,
     };
   },
   computed: {},
@@ -487,6 +500,13 @@ export default {
               color: "rgba(95, 120, 144, 0.4)",
             },
           },
+          max: (value) => {
+            if (value.max > this.warning_line) {
+              return Math.ceil(value.max);
+            } else {
+              return this.warning_line;
+            }
+          },
         },
 
         series: [
@@ -648,6 +668,12 @@ export default {
         this.warningDialogVisible = true;
       });
     },
+    showNoiseDialog() {
+      getRecent30DayNoiseDataList().then((res) => {
+        this.noiseWarningData = res.data;
+        this.noiseVisible = true;
+      });
+    },
   },
   mounted() {
     this.getNoiseData();
@@ -1039,9 +1065,9 @@ export default {
     &.active {
       background: linear-gradient(
         90deg,
-        rgba(39, 172, 251, 0) 0%,
-        rgba(39, 172, 251, 0.69) 50%,
-        rgba(39, 172, 251, 0) 100%
+        rgba(225, 169, 0, 0) 0%,
+        rgba(225, 169, 0, 0.68) 51%,
+        rgba(225, 169, 0, 0) 100%
       );
       color: #fff;
     }

src/components/noise/noiseDialog.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    title="近30日项目噪音监测情况"
+    width="1200px"
+    top="0"
+    append-to-body
+  >
+    <div class="warning-table-header">
+      <div>检测时间</div>
+      <div>最大检测值/dB</div>
+      <div>是否超标</div>
+    </div>
+    <div class="warning-table-list">
+      <div
+        class="warning-table-column"
+        v-for="(column, index) in noiseData"
+        :key="index"
+      >
+        <div>{{ column.date }}</div>
+        <div>{{ column.max_noise }}</div>
+        <div :style="{ color: column.status == 2 ? '#FF5C5C' : '#5CFF6B' }">
+          {{ column.status_text }}
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  name: "NoiseDialog",
+  data() {
+    return {
+      noiseData: [],
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("changeVisible", val);
+      },
+    },
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val) {
+        this.noiseData = this.data;
+        console.log(this.noiseData);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.warning-table-header {
+  background: #0e3c75;
+  display: flex;
+  padding: 12px 0;
+  font-weight: bold;
+  font-size: 14px;
+  text-align: center;
+  color: #c6def9;
+  justify-content: space-around;
+  div {
+    width: calc(100% / 3);
+  }
+}
+.warning-table-column {
+  font-size: 14px;
+  text-align: center;
+  color: #c6def9;
+  padding: 12px 0;
+  background: rgba(14, 60, 117, 0.2);
+  display: flex;
+  cursor: pointer;
+  justify-content: space-around;
+  &:nth-child(2n) {
+    background: rgba(14, 60, 117, 0.4);
+  }
+  div {
+    width: calc(100% / 3);
+  }
+}
+.warning-table-list {
+  height: 60vh;
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file

src/components/unloadingplatform/Index.vue

@@ -873,9 +873,9 @@ export default {
     &.active {
       background: linear-gradient(
         90deg,
-        rgba(39, 172, 251, 0) 0%,
-        rgba(39, 172, 251, 0.69) 50%,
-        rgba(39, 172, 251, 0) 100%
+        rgba(225, 169, 0, 0) 0%,
+        rgba(225, 169, 0, 0.68) 51%,
+        rgba(225, 169, 0, 0) 100%
       );
       color: #fff;
     }