环保

2023-12-12 10:56:25 +08:00
parent 8fdaa3e968
commit 1661615af4
13 changed files with 661 additions and 153 deletions
--- a/src/views/safetyEnvironmental/environmental/wasteWater/wasteWaterDetectionHistory/index.vue
+++ b/src/views/safetyEnvironmental/environmental/wasteWater/wasteWaterDetectionHistory/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container wasteWaterHis">
    <!-- 搜索工作栏 -->
    <search-bar
      :formConfigs="formConfig"
@@ -13,6 +13,7 @@
      :table-props="tableProps"
      :table-data="list"
      :max-height="tableH"
+      :row-class-name="tableRowClassName"
    />
    <pagination
      :page.sync="queryParams.pageNo"
@@ -72,14 +73,15 @@ export default {
          type: 'select',
          label: '指标名称',
          selectOptions: [],
-          param: 'checkId'
+          param: 'checkId',
+          filterable: true
        },
        {
          type: 'datePicker',
          label: '检测时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
-          valueFormat: "yyyy-MM-dd HH:mm:ss",
+          valueFormat: "timestamp",
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
@@ -94,10 +96,10 @@ export default {
          color: 'primary'
        },
        {
-          type: this.$auth.hasPermi('base:order-manage:create') ? 'separate' : '',
+          type: this.$auth.hasPermi('base:waste-water:export') ? 'separate' : '',
        },
        {
-          type: this.$auth.hasPermi('base:order-manage:create') ? 'button' : '',
+          type: this.$auth.hasPermi('base:waste-water:export') ? 'button' : '',
          btnName: '导出',
          name: 'export',
          color: 'primary',
@@ -110,7 +112,8 @@ export default {
        pageSize: 20,
        checkId: null,
        checkType: 1,
-        // checkTime: [],
+        startTime: null,
+        endTime: null
      },
      tableProps,
      list: [],
@@ -122,11 +125,11 @@ export default {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
-    let end = moment().format('YYYY-MM-DD 23:59:59')
-    let start = moment().format('YYYY-MM-DD 00:00:00')
+    let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf()
+    let start = moment(moment().format('YYYY-MM-DD 00:00:00')).valueOf()
    this.formConfig[1].defaultSelect = [start, end]
-    this.queryParams.checkTime[0] = start
-    this.queryParams.checkTime[1] = end
+    this.queryParams.startTime = start
+    this.queryParams.endTime = end
    this.getSelectList()
    this.getList()
  },
@@ -134,12 +137,8 @@ export default {
    buttonClick(val) {
      this.queryParams.pageNo = 1;
      this.queryParams.checkId = val.checkId
-      // this.queryParams.checkTime[0] = val.timeVal ? val.timeVal[0] : null
-      // this.queryParams.checkTime[1] = val.timeVal ? val.timeVal[1] : null
-      // this.queryParams.checkTime[0] = 1701014400000
-      // this.queryParams.checkTime[1] = 1701100800000
-      this.queryParams.startTime = 1701014400000
-      this.queryParams.endTime = 1701100800000
+      this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
+      this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
      if (val.btnName === 'search') {
        this.getList()
      } else {
@@ -165,7 +164,22 @@ export default {
        console.log(res)
        this.formConfig[0].selectOptions = res.data.list || []
      })
+    },
+    tableRowClassName({row, rowIndex}) {
+      console.log(row)
+      if (row.markRed) {
+        return 'warning-row'
+      }else {
+        return ''
+      }
    }
  }
 }
-</script>
+</script>
+<style lang='scss'>
+.wasteWaterHis {
+  .el-table .warning-row {
+    background: #fee1e1;
+  }
+}
+</style>
--- a/src/views/safetyEnvironmental/environmental/wasteWater/wasteWaterManagement/components/lineChart.vue
+++ b/src/views/safetyEnvironmental/environmental/wasteWater/wasteWaterManagement/components/lineChart.vue
@@ -1,128 +0,0 @@
-<template>
-  <div
-    id="wasteWaterLine"
-    style="width: 100%"
-    :style="{ height: chartHeight + 'px' }"
-  ></div>
-</template>
-<script>
-import * as echarts from 'echarts'
-import resize from '@/utils/chartMixins/resize'
-export default {
-  name: "LineChart",
-  mixins: [resize],
-  data() {
-    return {
-      chartDom: '',
-      chart: '',
-      chartHeight: this.tableHeight(420)
-    }
-  },
-  mounted() {
-    window.addEventListener('resize', () => {
-      this.chartHeight = this.tableHeight(420)
-    })
-    this.getChart()
-  },
-  methods: {
-    getChart() {
-      var chartDom = document.getElementById('wasteWaterLine');
-      var myChart = echarts.init(chartDom);
-      var option = {
-          tooltip: {
-            trigger: 'axis',
-            formatter: function (params) {
-              return (
-                params[0].axisValue +
-                `<br>` +
-                params
-                  .map((item) => {
-                    let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
-                    let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
-                    let value = item.value ? item.value : '-';
-                    let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
-                    return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
-                    <span>${str}${seriesNameStr}</span>
-                    <span>${valueStr}</span>
-                  </span>`;
-                  })
-                  .join(``)
-              );
-            }
-          },
-          legend: {
-            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
-            right: '1%',
-            icon: 'rect',
-            itemHeight: 8,
-            itemWidth: 8
-          },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: {}
-            }
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-          },
-          yAxis: {
-            type: 'value'
-          },
-          axisPointer: {
-            type: 'line',
-            lineStyle: {
-              color: 'rgba(11, 88, 255, 1)'
-            }
-          },
-          series: [
-            {
-              name: 'Email',
-              type: 'line',
-              stack: 'Total',
-              symbol: 'none',
-              data: [120, 132, 101, 134, 90, 230, 210]
-            },
-            {
-              name: 'Union Ads',
-              type: 'line',
-              stack: 'Total',
-              symbol: 'none',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            },
-            {
-              name: 'Video Ads',
-              type: 'line',
-              stack: 'Total',
-              symbol: 'none',
-              data: [150, 232, 201, 154, 190, 330, 410]
-            },
-            {
-              name: 'Direct',
-              type: 'line',
-              stack: 'Total',
-              symbol: 'none',
-              data: [320, 332, 301, 334, 390, 330, 320]
-            },
-            {
-              name: 'Search Engine',
-              type: 'line',
-              stack: 'Total',
-              symbol: 'none',
-              data: [820, 932, 901, 934, 1290, 1330, 1320]
-            }
-          ]
-        };
-
-        option && myChart.setOption(option);
-    }
-  }
-}
-</script>
--- a/src/views/safetyEnvironmental/environmental/wasteWater/wasteWaterManagement/index.vue
+++ b/src/views/safetyEnvironmental/environmental/wasteWater/wasteWaterManagement/index.vue
@@ -22,18 +22,17 @@
        <span>检测指标趋势图</span>
      </div>
      <!-- 搜索工作栏 -->
-      <search-bar
-        :formConfigs="formConfig"
-        ref="searchBarForm"
-        @headBtnClick="buttonClick"
-      />
-      <line-chart />
+      <search-area @submit="getTrend"/>
+      <line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim"/>
+      <!-- 没有数据 -->
+      <div class="no-data-bg" v-show='Object.keys(chartData).length === 0'></div>
    </div>
  </div>
 </template>
 <script>
 import { environmentalCheckRealtime, environmentalCheckRealtimeTrend } from '@/api/safetyEnvironmental/environmental'
-import LineChart from './components/lineChart'
+import LineChart from './../../components/lineChart'
+import SearchArea from './../../components/searchArea'
 export default {
  name: 'WasteWaterManagement',
  data(){
@@ -44,39 +43,10 @@ export default {
        timeDim: null,
        timeRange: []
      },
-      formConfig: [
-        {
-          type: 'select',
-          label: '时间维度',
-          selectOptions: this.getDictDatas(this.DICT_TYPE.TIME_DIM),
-          labelField: 'label',
-          valueField: 'value',
-          param: 'timeDim',
-          width: 100
-        },
-        {
-          type: 'datePicker',
-          label: '时间范围',
-          dateType: 'daterange',
-          format: 'yyyy-MM-dd',
-          valueFormat: "yyyy-MM-dd",
-          rangeSeparator: '-',
-          startPlaceholder: '开始时间',
-          endPlaceholder: '结束时间',
-          param: 'timeVal',
-          defaultSelect: [],
-          width: 250
-        },
-        {
-          type: 'button',
-          btnName: '查询',
-          name: 'search',
-          color: 'primary'
-        }
-      ],
+      chartData: {}
    }
  },
-  components: { LineChart },
+  components: { LineChart, SearchArea },
  mounted() {
    this.getMsg()
  },
@@ -87,9 +57,18 @@ export default {
        this.realtimeList = res.data || []
      })
    },
-    getTrend() {
+    getTrend(params) {
+      console.log(params)
+      this.queryParams.timeDim = params.timeDim
+      this.queryParams.timeRange[0] = params.startTime
+      this.queryParams.timeRange[1] = params.endTime
      environmentalCheckRealtimeTrend({...this.queryParams}).then(res => {
        console.log(res)
+        if (res.code === 0) {
+          this.chartData = res.data
+        } else {
+          this.chartData = {}
+        }
      })
    }
  }