projects/mesxc-zhp #161
							
								
								
									
										4
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										4
									
								
								.env.dev
									
									
									
									
									
								
							@@ -13,14 +13,14 @@ VUE_APP_TITLE = MES系统
 | 
			
		||||
 | 
			
		||||
# 芋道管理系统/开发环境
 | 
			
		||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.56:48082'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.1.62:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
 | 
			
		||||
 | 
			
		||||
# 积木报表指向地址
 | 
			
		||||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
 | 
			
		||||
 
 | 
			
		||||
@@ -10,11 +10,11 @@ export function environmentalCheckRealtime(query) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获得环保检测指标趋势数据
 | 
			
		||||
export function environmentalCheckRealtimeTrend(query) {
 | 
			
		||||
export function environmentalCheckRealtimeTrend(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/environmental-check-record/trend',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -64,20 +64,20 @@ export function environmentalCheckDelete(query) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获得环保检测记录分页
 | 
			
		||||
export function environmentalCheckRecordPage(query) {
 | 
			
		||||
export function environmentalCheckRecordPage(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/environmental-check-record/page',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 导出环保检测记录 Excel
 | 
			
		||||
export function environmentalCheckRecordExport(query) {
 | 
			
		||||
export function environmentalCheckRecordExport(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/environmental-check-record/export-excel',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query,
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data,
 | 
			
		||||
    responseType: 'blob'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -221,18 +221,30 @@ export default {
 | 
			
		||||
    timeSelect() {
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (!this.timeValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为7天,请重新选择')
 | 
			
		||||
            this.timeValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (!this.dateValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59
 | 
			
		||||
            this.dateValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':
 | 
			
		||||
          if (!this.monthValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面
 | 
			
		||||
            this.monthValue = []
 | 
			
		||||
@@ -338,7 +350,7 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (this.timeValue.length > 0) {
 | 
			
		||||
          if (this.timeValue && this.timeValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.timeValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.timeValue[1] // 不用转
 | 
			
		||||
          } else {
 | 
			
		||||
 
 | 
			
		||||
@@ -8,7 +8,6 @@
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LineChart",
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
 
 | 
			
		||||
@@ -207,18 +207,30 @@ export default {
 | 
			
		||||
    timeSelect() {
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (!this.timeValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为7天,请重新选择')
 | 
			
		||||
            this.timeValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (!this.dateValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59
 | 
			
		||||
            this.dateValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':
 | 
			
		||||
          if (!this.monthValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面
 | 
			
		||||
            this.monthValue = []
 | 
			
		||||
@@ -307,7 +319,7 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (this.timeValue.length > 0) {
 | 
			
		||||
          if (this.timeValue && this.timeValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.timeValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.timeValue[1] // 不用转
 | 
			
		||||
          } else {
 | 
			
		||||
@@ -316,7 +328,7 @@ export default {
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (this.dateValue.length > 0) {
 | 
			
		||||
          if (this.dateValue && this.dateValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.dateValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
 | 
			
		||||
          } else {
 | 
			
		||||
@@ -336,7 +348,7 @@ export default {
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':// 转为本月最后一天的最后一秒
 | 
			
		||||
          if (this.monthValue.length > 0) {
 | 
			
		||||
          if (this.monthValue && this.monthValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.monthValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.transformTime(this.monthValue[1])
 | 
			
		||||
          } else {
 | 
			
		||||
 
 | 
			
		||||
@@ -18,17 +18,74 @@ export default {
 | 
			
		||||
      chartHeight: this.tableHeight(420)
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    chartData: {
 | 
			
		||||
      type: Object,
 | 
			
		||||
      required: true,
 | 
			
		||||
      default: () => {
 | 
			
		||||
        return {}
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    timeDim: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: ''
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(420)
 | 
			
		||||
    })
 | 
			
		||||
    this.getChart()
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    chartData: function () {
 | 
			
		||||
      this.getChart()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getChart() {
 | 
			
		||||
      var chartDom = document.getElementById('wasteWaterLine');
 | 
			
		||||
      var myChart = echarts.init(chartDom);
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('wasteWaterLine');
 | 
			
		||||
      this.chart = echarts.init(this.chartDom);
 | 
			
		||||
      if (Object.keys(this.chartData).length === 0) {
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      let legendData = []
 | 
			
		||||
      let xData = []
 | 
			
		||||
      let seriesData = []
 | 
			
		||||
      for (let item in this.chartData) {
 | 
			
		||||
        legendData.push(item)
 | 
			
		||||
        let obj = {}
 | 
			
		||||
        let data = []
 | 
			
		||||
        for (let subItem in this.chartData[item]) {
 | 
			
		||||
          data.push(this.chartData[item][subItem].checkValue)
 | 
			
		||||
        }
 | 
			
		||||
        obj.name = item
 | 
			
		||||
        obj.type = 'line'
 | 
			
		||||
        obj.stack = 'Total'
 | 
			
		||||
        obj.symbol = 'none'
 | 
			
		||||
        obj.data = data
 | 
			
		||||
        seriesData.push(obj)
 | 
			
		||||
      }
 | 
			
		||||
      for (let i = 0; i < this.chartData[legendData[0]].length; i++) {
 | 
			
		||||
        let time = ""
 | 
			
		||||
        if (this.timeDim === '3') {
 | 
			
		||||
          let year = this.chartData[legendData[0]][i].axisTime.slice(0,4)
 | 
			
		||||
          let weak = this.chartData[legendData[0]][i].axisTime.slice(6,8)
 | 
			
		||||
          time = year+' 第 '+weak+' 周'
 | 
			
		||||
        } else {
 | 
			
		||||
          time = this.chartData[legendData[0]][i].axisTime
 | 
			
		||||
        }
 | 
			
		||||
        xData.push(time)
 | 
			
		||||
      }
 | 
			
		||||
      var option = {
 | 
			
		||||
        color: ['#63BDFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'],
 | 
			
		||||
          tooltip: {
 | 
			
		||||
            trigger: 'axis',
 | 
			
		||||
            formatter: function (params) {
 | 
			
		||||
@@ -51,27 +108,28 @@ export default {
 | 
			
		||||
            }
 | 
			
		||||
          },
 | 
			
		||||
          legend: {
 | 
			
		||||
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
 | 
			
		||||
            right: '1%',
 | 
			
		||||
            data: legendData,
 | 
			
		||||
            right: '2%',
 | 
			
		||||
            icon: 'rect',
 | 
			
		||||
            itemHeight: 8,
 | 
			
		||||
            itemWidth: 8
 | 
			
		||||
            itemWidth: 8,
 | 
			
		||||
            textStyle: {
 | 
			
		||||
              color: 'auto'
 | 
			
		||||
            }
 | 
			
		||||
          },
 | 
			
		||||
          grid: {
 | 
			
		||||
            left: '3%',
 | 
			
		||||
            right: '4%',
 | 
			
		||||
            right: '2%',
 | 
			
		||||
            bottom: '3%',
 | 
			
		||||
            containLabel: true
 | 
			
		||||
          },
 | 
			
		||||
          toolbox: {
 | 
			
		||||
            feature: {
 | 
			
		||||
              saveAsImage: {}
 | 
			
		||||
            }
 | 
			
		||||
          },
 | 
			
		||||
          xAxis: {
 | 
			
		||||
            type: 'category',
 | 
			
		||||
            boundaryGap: false,
 | 
			
		||||
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 | 
			
		||||
            data: xData,
 | 
			
		||||
            axisLabel: {
 | 
			
		||||
              rotate: "45"
 | 
			
		||||
            }
 | 
			
		||||
          },
 | 
			
		||||
          yAxis: {
 | 
			
		||||
            type: 'value'
 | 
			
		||||
@@ -82,46 +140,10 @@ export default {
 | 
			
		||||
              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]
 | 
			
		||||
            }
 | 
			
		||||
          ]
 | 
			
		||||
          series: seriesData
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        option && myChart.setOption(option);
 | 
			
		||||
        option && this.chart.setOption(option);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -0,0 +1,378 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="searchBarBox divHeight" ref="searchBarRef">
 | 
			
		||||
    <el-form :inline="true" class="demo-form-inline">
 | 
			
		||||
      <el-form-item label="时间维度" required>
 | 
			
		||||
        <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;" size="small">
 | 
			
		||||
          <el-option
 | 
			
		||||
            v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
 | 
			
		||||
            :key="item.value"
 | 
			
		||||
            :label="item.label"
 | 
			
		||||
            :value="item.value"
 | 
			
		||||
            size="small">
 | 
			
		||||
          </el-option>
 | 
			
		||||
        </el-select>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
      <el-form-item label="时间范围" required>
 | 
			
		||||
        <div v-show="queryParams.timeDim === '1'">
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            v-model="timeValue"
 | 
			
		||||
            type="datetimerange"
 | 
			
		||||
            range-separator="至"
 | 
			
		||||
            start-placeholder="开始日期"
 | 
			
		||||
            end-placeholder="结束日期"
 | 
			
		||||
            format="yyyy-MM-dd HH:mm"
 | 
			
		||||
            value-format="timestamp"
 | 
			
		||||
            :picker-options="pickerOptions"
 | 
			
		||||
            popper-class="noneMinute"
 | 
			
		||||
            @change="timeSelect"
 | 
			
		||||
            size="small"
 | 
			
		||||
            style='width:350px;'
 | 
			
		||||
            >
 | 
			
		||||
          </el-date-picker>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div v-show="queryParams.timeDim === '2'">
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            v-model="dateValue"
 | 
			
		||||
            type="daterange"
 | 
			
		||||
            range-separator="至"
 | 
			
		||||
            start-placeholder="开始日期"
 | 
			
		||||
            end-placeholder="结束日期"
 | 
			
		||||
            value-format="timestamp"
 | 
			
		||||
            :picker-options="pickerOptions"
 | 
			
		||||
            @change="timeSelect"
 | 
			
		||||
            size="small"
 | 
			
		||||
            style='width:350px;'
 | 
			
		||||
            >
 | 
			
		||||
          </el-date-picker>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div v-show="queryParams.timeDim === '3'">
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            v-model="weekValue1"
 | 
			
		||||
            type="week"
 | 
			
		||||
            format="yyyy 第 WW 周"
 | 
			
		||||
            style='width:170px;'
 | 
			
		||||
            :picker-options="pickerOptionsWeek"
 | 
			
		||||
            @change="startWeek"
 | 
			
		||||
            size="small"
 | 
			
		||||
            placeholder="选择周">
 | 
			
		||||
          </el-date-picker>-
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            v-model="weekValue2"
 | 
			
		||||
            type="week"
 | 
			
		||||
            format="yyyy 第 WW 周"
 | 
			
		||||
            :picker-options="pickerOptionsWeek"
 | 
			
		||||
            style='width:170px;'
 | 
			
		||||
            @change="endWeek"
 | 
			
		||||
            size="small"
 | 
			
		||||
            placeholder="选择周">
 | 
			
		||||
          </el-date-picker>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div v-show="queryParams.timeDim === '4'">
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            v-model="monthValue"
 | 
			
		||||
            type="monthrange"
 | 
			
		||||
            range-separator="至"
 | 
			
		||||
            start-placeholder="开始日期"
 | 
			
		||||
            end-placeholder="结束日期"
 | 
			
		||||
            value-format="timestamp"
 | 
			
		||||
            :picker-options="pickerOptions"
 | 
			
		||||
            size="small"
 | 
			
		||||
            style='width:350px;'
 | 
			
		||||
            @change="timeSelect"
 | 
			
		||||
            >
 | 
			
		||||
          </el-date-picker>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div v-show="queryParams.timeDim === '5'">
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            style='width:170px;'
 | 
			
		||||
            v-model="yearValue1"
 | 
			
		||||
            type="year"
 | 
			
		||||
            :picker-options="pickerOptions"
 | 
			
		||||
            value-format="timestamp"
 | 
			
		||||
            placeholder="选择年"
 | 
			
		||||
            size="small"
 | 
			
		||||
            @change="startYear"
 | 
			
		||||
          >
 | 
			
		||||
          </el-date-picker>-
 | 
			
		||||
          <el-date-picker
 | 
			
		||||
            style='width:170px;'
 | 
			
		||||
            v-model="yearValue2"
 | 
			
		||||
            type="year"
 | 
			
		||||
            :picker-options="pickerOptions"
 | 
			
		||||
            value-format="timestamp"
 | 
			
		||||
            placeholder="选择年"
 | 
			
		||||
            size="small"
 | 
			
		||||
            @change="endYear"
 | 
			
		||||
          >
 | 
			
		||||
          </el-date-picker>
 | 
			
		||||
        </div>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
      <el-form-item>
 | 
			
		||||
        <el-button type="primary" size="small" @click="search">查询</el-button>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
    </el-form>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'SearchArea',
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        timeDim: null,
 | 
			
		||||
        startTime: null,
 | 
			
		||||
        endTime: null
 | 
			
		||||
      },
 | 
			
		||||
      timeValue: [],// 最大7天只能整点
 | 
			
		||||
      dateValue: [],// 最大30天
 | 
			
		||||
      weekValue1: null,//最多24周
 | 
			
		||||
      weekValue2: null,
 | 
			
		||||
      monthValue: [],//最多24月
 | 
			
		||||
      yearValue1: null,//最多10年
 | 
			
		||||
      yearValue2: null,
 | 
			
		||||
      pickerOptions: {
 | 
			
		||||
        disabledDate(date) {
 | 
			
		||||
          return date.getTime() > Date.now()
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      pickerOptionsWeek: {
 | 
			
		||||
        disabledDate(time) {
 | 
			
		||||
          let day = Date.now()
 | 
			
		||||
          let limitTime = moment(day).day(-1)
 | 
			
		||||
          return time.getTime() > new Date(limitTime).getTime()
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
 | 
			
		||||
    this.timeValue = [moment().startOf('day'), moment().endOf('day')-59*61*1000]
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    // 范围选择器
 | 
			
		||||
    timeSelect() {
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (!this.timeValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为7天,请重新选择')
 | 
			
		||||
            this.timeValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (!this.dateValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59
 | 
			
		||||
            this.dateValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':
 | 
			
		||||
          if (!this.monthValue) {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
 | 
			
		||||
            this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面
 | 
			
		||||
            this.monthValue = []
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
          default:
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 年选择器
 | 
			
		||||
    startYear() {
 | 
			
		||||
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
 | 
			
		||||
        this.$modal.msgError('开始时间不能晚于结束时间,请重新选择')
 | 
			
		||||
        this.yearValue1 = null
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为10年,请重新选择')
 | 
			
		||||
          this.yearValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    endYear() {
 | 
			
		||||
      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
 | 
			
		||||
        this.$modal.msgError('结束时间不能早于开始时间,请重新选择')
 | 
			
		||||
        this.yearValue2 = null
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为10年,请重新选择')
 | 
			
		||||
          this.yearValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 周选择器
 | 
			
		||||
    startWeek() {
 | 
			
		||||
      if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
        let a = new Date(this.weekValue1).getTime()
 | 
			
		||||
        let b = new Date(this.weekValue2).getTime()
 | 
			
		||||
        if (a > b) {
 | 
			
		||||
          this.$modal.msgError('开始时间不能晚于结束时间,请重新选择')
 | 
			
		||||
          this.weekValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
        if (b - a > 167*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为24周,请重新选择')
 | 
			
		||||
          this.weekValue1 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    endWeek() {
 | 
			
		||||
      if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
        let a = new Date(this.weekValue1).getTime()
 | 
			
		||||
        let b = new Date(this.weekValue2).getTime()
 | 
			
		||||
        if (a > b) {
 | 
			
		||||
          this.$modal.msgError('结束时间不能早于开始时间,请重新选择')
 | 
			
		||||
          this.weekValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
        if (b - a > 167*24*3600000) {
 | 
			
		||||
          this.$modal.msgError('最大时间范围为24周,请重新选择')
 | 
			
		||||
          this.weekValue2 = null
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 查询
 | 
			
		||||
    search() {
 | 
			
		||||
      if (!this.queryParams.timeDim) {
 | 
			
		||||
        this.$modal.msgError('请选择时间维度')
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
      switch (this.queryParams.timeDim) {
 | 
			
		||||
        case '1':
 | 
			
		||||
          if (this.timeValue && this.timeValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.timeValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.timeValue[1] // 不用转
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('时间范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '2':
 | 
			
		||||
          if (this.dateValue && this.dateValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.dateValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('日范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '3':
 | 
			
		||||
          if (this.weekValue1 && this.weekValue2) {
 | 
			
		||||
            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
 | 
			
		||||
            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
            this.queryParams.startTime = new Date(a).getTime()
 | 
			
		||||
            this.queryParams.endTime = new Date(b).getTime()
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('周范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        case '4':// 转为本月最后一天的最后一秒
 | 
			
		||||
          if (this.monthValue && this.monthValue.length > 0) {
 | 
			
		||||
            this.queryParams.startTime = this.monthValue[0]
 | 
			
		||||
            this.queryParams.endTime = this.transformTime(this.monthValue[1])
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('月范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        default://本年最后一天
 | 
			
		||||
          if (this.yearValue1 && this.yearValue2) {
 | 
			
		||||
            if (this.yearValue2 < this.yearValue1) {
 | 
			
		||||
              this.$modal.msgError('结束时间不能早于开始时间')
 | 
			
		||||
              return false
 | 
			
		||||
            } else {
 | 
			
		||||
              this.queryParams.startTime = this.yearValue1
 | 
			
		||||
              this.queryParams.endTime = this.transformYear(this.yearValue2)
 | 
			
		||||
            }
 | 
			
		||||
          } else {
 | 
			
		||||
            this.$modal.msgError('年范围不能为空')
 | 
			
		||||
            return false
 | 
			
		||||
          }
 | 
			
		||||
      }
 | 
			
		||||
      this.queryParams.startTime = this.queryParams.startTime + ''
 | 
			
		||||
      this.queryParams.endTime = this.queryParams.endTime + ''
 | 
			
		||||
      this.$emit('submit', this.queryParams)
 | 
			
		||||
    },
 | 
			
		||||
    transformTime(timeStamp) {// 本月最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let month = moment(timeStamp).format('MM')
 | 
			
		||||
      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    },
 | 
			
		||||
    transformYear(timeStamp) {// 本年最后一天
 | 
			
		||||
      let year = moment(timeStamp).format('YYYY')
 | 
			
		||||
      let newData = year+'-12-31 23:59:59'
 | 
			
		||||
      let value = new Date(newData).getTime()
 | 
			
		||||
      return value
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style lang='scss'>
 | 
			
		||||
/* 级联选择器 */
 | 
			
		||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
/* 时间整点 */
 | 
			
		||||
.noneMinute .el-time-spinner__wrapper {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
.noneMinute .el-scrollbar:nth-of-type(2) {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
.demo-form-inline {
 | 
			
		||||
  .el-date-editor .el-range__icon {
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
    color: #0B58FF;
 | 
			
		||||
  }
 | 
			
		||||
  .el-input__prefix .el-icon-date {
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
    color: #0B58FF;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.searchBarBox .foldClass {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: 14px;
 | 
			
		||||
  right: 0;
 | 
			
		||||
  cursor: pointer;
 | 
			
		||||
  font-size: 12px;
 | 
			
		||||
  color:#0B58FF;
 | 
			
		||||
}
 | 
			
		||||
.searchBarBox .foldClass .iconfont {
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
}
 | 
			
		||||
.divHeight {
 | 
			
		||||
  height: 45px;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
.separateStyle {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 1px;
 | 
			
		||||
  height: 24px;
 | 
			
		||||
  background: #E8E8E8;
 | 
			
		||||
  vertical-align: middle;
 | 
			
		||||
  margin: 0 10px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
  <div class="app-container vocHis">
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <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:voc:export') ? 'separate' : '',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: this.$auth.hasPermi('base:order-manage:create') ? 'button' : '',
 | 
			
		||||
          type: this.$auth.hasPermi('base:voc:export') ? 'button' : '',
 | 
			
		||||
          btnName: '导出',
 | 
			
		||||
          name: 'export',
 | 
			
		||||
          color: 'primary',
 | 
			
		||||
@@ -110,7 +112,8 @@ export default {
 | 
			
		||||
        pageSize: 20,
 | 
			
		||||
        checkId: null,
 | 
			
		||||
        checkType: 3,
 | 
			
		||||
        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,8 +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.startTime = val.timeVal ? val.timeVal[0] : null
 | 
			
		||||
      this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
 | 
			
		||||
      if (val.btnName === 'search') {
 | 
			
		||||
        this.getList()
 | 
			
		||||
      } else {
 | 
			
		||||
@@ -161,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'>
 | 
			
		||||
.vocHis {
 | 
			
		||||
  .el-table .warning-row {
 | 
			
		||||
    background: #fee1e1;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -23,18 +23,32 @@
 | 
			
		||||
        <span class="blueTitle"></span>
 | 
			
		||||
        <span>检测指标趋势图</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <!-- 搜索工作栏 -->
 | 
			
		||||
      <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 } from '@/api/safetyEnvironmental/environmental'
 | 
			
		||||
import { environmentalCheckRealtime, environmentalCheckRealtimeTrend } from '@/api/safetyEnvironmental/environmental'
 | 
			
		||||
import LineChart from './../../components/lineChart'
 | 
			
		||||
import SearchArea from './../../components/searchArea'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'Voc',
 | 
			
		||||
  data(){
 | 
			
		||||
    return {
 | 
			
		||||
      realtimeList:[]
 | 
			
		||||
      realtimeList:[],
 | 
			
		||||
      queryParams:{
 | 
			
		||||
        checkType: 1,
 | 
			
		||||
        timeDim: null,
 | 
			
		||||
        timeRange: []
 | 
			
		||||
      },
 | 
			
		||||
      chartData: {}
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  components: { LineChart, SearchArea },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getMsg()
 | 
			
		||||
  },
 | 
			
		||||
@@ -44,6 +58,20 @@ export default {
 | 
			
		||||
        console.log(res)
 | 
			
		||||
        this.realtimeList = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    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 = {}
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
  <div class="app-container wasteGasHis">
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <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-gas:export') ? 'separate' : '',
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: this.$auth.hasPermi('base:order-manage:create') ? 'button' : '',
 | 
			
		||||
          type: this.$auth.hasPermi('base:waste-gas:export') ? 'button' : '',
 | 
			
		||||
          btnName: '导出',
 | 
			
		||||
          name: 'export',
 | 
			
		||||
          color: 'primary',
 | 
			
		||||
@@ -110,7 +112,8 @@ export default {
 | 
			
		||||
        pageSize: 20,
 | 
			
		||||
        checkId: null,
 | 
			
		||||
        checkType: 2,
 | 
			
		||||
        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,15 +137,15 @@ 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.startTime = val.timeVal ? val.timeVal[0] : null
 | 
			
		||||
      this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
 | 
			
		||||
      if (val.btnName === 'search') {
 | 
			
		||||
        this.getList()
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$modal.confirm('是否确认导出').then(() => {
 | 
			
		||||
            return environmentalCheckRecordExport({...this.queryParams});
 | 
			
		||||
          }).then(response => {
 | 
			
		||||
            this.$download.excel(response, '废水检测历史记录.xls');
 | 
			
		||||
            this.$download.excel(response, '废气检测历史记录.xls');
 | 
			
		||||
          }).catch(() => {})
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
@@ -161,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'>
 | 
			
		||||
.wasteGasHis {
 | 
			
		||||
  .el-table .warning-row {
 | 
			
		||||
    background: #fee1e1;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -23,18 +23,32 @@
 | 
			
		||||
        <span class="blueTitle"></span>
 | 
			
		||||
        <span>检测指标趋势图</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <!-- 搜索工作栏 -->
 | 
			
		||||
      <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 } from '@/api/safetyEnvironmental/environmental'
 | 
			
		||||
import { environmentalCheckRealtime, environmentalCheckRealtimeTrend } from '@/api/safetyEnvironmental/environmental'
 | 
			
		||||
import LineChart from './../../components/lineChart'
 | 
			
		||||
import SearchArea from './../../components/searchArea'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'WasteGasManagement',
 | 
			
		||||
  data(){
 | 
			
		||||
    return {
 | 
			
		||||
      realtimeList:[]
 | 
			
		||||
      realtimeList:[],
 | 
			
		||||
      queryParams:{
 | 
			
		||||
        checkType: 2,
 | 
			
		||||
        timeDim: null,
 | 
			
		||||
        timeRange: []
 | 
			
		||||
      },
 | 
			
		||||
      chartData: {}
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  components: { LineChart, SearchArea },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.getMsg()
 | 
			
		||||
  },
 | 
			
		||||
@@ -44,6 +58,20 @@ export default {
 | 
			
		||||
        console.log(res)
 | 
			
		||||
        this.realtimeList = res.data || []
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    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 = {}
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
@@ -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 = {}
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user