修改LineChart.vue位置

zmc

2023-12-01 d404f7f0ffb8b7b8b930a2b583afe2037cffc3f8

 src/views/risk_assessment/DataRiskRank.vue

@@ -1,26 +1,22 @@
<script>
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'

import { ElMessage } from 'element-plus'
import MonthSelect from '@/sfc/MonthSelect.vue'
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
export default {
  components: {
    TimeShortCuts,
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick
    ButtonClick,
    MonthSelect
  },
  data() {
    return {
      // 当前页
      currentPage: 1,
      // 每页条数
      pageSize: 20,
      total: 0,
      //   表格数据
      tableData: [],
      isNoData: true,
@@ -30,238 +26,348 @@
      // 导出按钮加载中
      exportButton: false,
      form: {
        // 站点名称
        name: '',
        // 开始时间
        beginTime: '',
        // 结束时间
        endTime: ''
        // // 结束时间
        endTime: '',

        // 选择的月份
        month: ''
      },
      tableHeight: '600'
      bill: {
        min: '',
        max: '',
        avg: '',
        online: '',
        valid: '',
        exceeding: '',

        //  典型异常复现率
        exceptionRecurrence: '',
        // 异常类型据聚集度
        exceptionTypeAggregation: ''
      },

      // 表格数据
      table: [],
      // 表格高度
      tableHeight: 600,
      currentRow: []
    }
  },
  setup() {
    // 引入 百分号比较大小 导出功能
    const { cmpp, exportToExcel } = useCommonFunction()
    return { cmpp, exportToExcel }
    const { exportToExcel } = useCommonFunction()
    return { exportToExcel }
  },

  computed: {
    // 计算高中低站点数量
    riskGradeNum() {
      let riskGrade = {}
      if (this.table) {
        let highRisk = 0
        let middleRisk = 0
        let lowRisk = 0
        this.table.forEach((item) => {
          switch (item.riskGrade) {
            case '高风险':
              highRisk++
              break
            case '中风险':
              middleRisk++
              break
            case '低风险':
              lowRisk++
              break
          }
        })
        riskGrade.high = highRisk
        riskGrade.middle = middleRisk
        riskGrade.low = lowRisk
      }
      return riskGrade
    },
    // 高中低风险比例
    riskGradeRate() {
      let rate = {
        high:0,
        middle:0,
        low:0
      }
      if (this.table.length !=0 ) {
        let num = this.table.length
        let highGrade = ((this.riskGradeNum.high / num)*100).toFixed(2)
        let middleGrade = ((this.riskGradeNum.middle / num)*100).toFixed(2)
        let lowGrade = ((this.riskGradeNum.low / num)*100).toFixed(2)
        rate.high = highGrade
        rate.middle = middleGrade
        rate.low = lowGrade
      }
      return rate
    }
  },
  mounted() {
    this.fetchData()
    //
    this.fetch()
    this.calTableHeight()
  },
  methods: {
    // 功能：导出为Excel
    exportData() {
      let params = {
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      }
      this.exportButton = true
      requetsApi.fetchAllData(params).then((res) => {
        const data = res.data.data

        const tableColumns = [
          'name',
          'mnCode',
          'lst',
          'dayAvg',
          'min',
          'max',
          'dayOnline',
          'dayValid',
          'dayExceeding'
        ]
        const excelColumns = [
          ['A1', '站点名称'],
          ['B1', '设备编号'],
          ['C1', '监测日期'],
          ['D1', '平均值'],
          ['E1', '最小值'],
          ['F1', '最大值'],
          ['G1', '在线率'],
          ['H1', '有效率'],
          ['I1', '超标率']
        ]
        this.exportToExcel(data, tableColumns, excelColumns, '分析表.xlsx')
        this.exportButton = false
      })
    /**
     * 将中国标准时间转为指定格式
     * @param：
     * @returns：
     */
    giveMonth(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.month = dayjs(val).format('YYYY-MM-DD')
      // 同时更新开始和结束时间
      this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      console.log(this.form.beginTime, this.form.endTime)
    },

    // 功能：改变表格某个单元格的颜色
    tableCellClassName({ row, columnIndex }) {
      // 平均值不满足标准时
      if (columnIndex == 4) {
        if (row.dayAvg >= 0.8) {
        if (row.riskValue >= 0.8) {
          return 'warning-row'
        }
      }

      //  在线率，有效率 不满足标准时 变颜色
      if (columnIndex == 7) {
        if (!this.cmpp(row.dayOnline, '90%')) {
          return 'red-color'
        }
      }
      if (columnIndex == 8) {
        if (!this.cmpp(row.dayValid, '90%')) {
          return 'red-color'
        }
      }
    },

    // 功能：表格高度根据内容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight;
      // 其中一个40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`;
    },
    // 页大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val

      // 改变每页显示数目时跳到当前页
      this.handleCurrentChange(1)
      this.tableHeight = `calc(100vh - ${h1}px  - 40px - 40px - var(--el-main-padding) * 2`
    },

    // 页号改变时触发
    handleCurrentChange(val) {
      // 将当前页号给currentPage
      this.currentPage = val

      // 页面变化时调用 查询数据函数
      this.fetchData()
    },
    //序号递增
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },

    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },

    // 点击统计按钮
    // 点击风险排名按钮
    fetchData() {
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      params['siteName'] = ''
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.loading = true
      this.queryButton = true
      this.isNoData = false
      this.$http.get('/dust/analysistime', { params: params }).then((response) => {
        this.tableData = response.data.data.rows
      riskApi.queryRiskValue('', this.form.month, 'month').then((response) => {
        this.loading = false
        this.queryButton = false
        if (response.data.data.total == 0) {
        if (response.data.data.length == 0) {
          this.isNoData = true
          return
        }
        // 移除空数据状态
        
        this.table = riskValue.backComprehensiveRiskTableData(response.data.data)
        this.queryButton = false
        this.isNoData = false
        this.total = response.data.data.total
        this.loading = false
        this.$nextTick(() => {
          this.$refs.table.sort('riskValue', 'descending')
        })
      })
    },

    /**
     * 初始加载函数
     */
    fetch() {
      // 分析数据
      this.fetchData()
      // 异常数据
      // this.exceptiondataCount()
    },

    // 单元格内容换行
    wrapIndex(index) {
      return index.replace(/\n/g, '<br/>')
    },

    /**
     * 导出为Excel

     */
    exportData() {
      if (this.table.length != 0) {
        const tableColumns = [
          'siteName',
          'region',
          'monitorType',
          'riskValue',
          'riskGrage',
          'riskAdvice',
          'beginTime',
          'endTime'
        ]
        const excelColumns = [
          ['A1', '站点名称'],
          ['B1', '区域'],
          ['C1', '监测类型'],
          ['D1', '风险值'],
          ['E1', '风险等级'],
          ['F1', '管控措施'],
          ['G1', '开始日期'],
          ['H1', '结束日期']
        ]
        this.exportButton = true
        this.exportToExcel(this.table, tableColumns, excelColumns, '综合风险排名.xlsx')
        this.exportButton = false
      } else {
        ElMessage('无数据需要导出')
      }
    },
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.siteName)
      const jumpPage = 1 
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.form.month}/1/${jumpPage}`)
    }
  }
}
</script>

<template>
    <el-form :inline="true" :model="form" ref="h1">
      <el-form-item>
        <AreaAndmonitorType></AreaAndmonitorType>
      </el-form-item>
  <el-row ref="h1">
    <el-col :span="24">
      <el-form :inline="true" :model="form">
        <el-form-item>
          <AreaAndmonitorType></AreaAndmonitorType>
        </el-form-item>

      <el-form-item>
        <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
      </el-form-item>
        <el-form-item>
          <MonthSelect @submit-value="giveMonth"></MonthSelect>
        </el-form-item>

      <el-form-item>
        <ButtonClick
          style="margin-right: 12px"
          content="数据排名"
          type="primary"
          :loading="queryButton"
          @do-search="fetchData"
        ></ButtonClick>
        <ButtonExportExcel
          content="导出数据"
          type="success"
          :loading="exportButton"
          @do-export="exportData"
        ></ButtonExportExcel>
      </el-form-item>
    </el-form>
        <el-form-item>
          <ButtonClick
            style="margin-right: 12px"
            content="风险排名"
            type="primary"
            :loading="queryButton"
            @do-search="fetch"
          ></ButtonClick>
          <ButtonExportExcel
            content="导出数据"
            type="success"
            :loading="exportButton"
            @do-export="exportData"
          ></ButtonExportExcel>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" class="tag">

    <el-card v-show="!isNoData">
      <el-table
        :data="tableData"
        :height="tableHeight"
        style="width: 100%"
        v-loading="loading"
        :cell-class-name="tableCellClassName"
      >
        <el-table-column
          type="index"
          prop="name"
          label="序号"
          :index="indexMethod"
          fixed
          show-overflow-tooltip
        />
        <el-table-column prop="name" label="点位名称" show-overflow-tooltip />
      <el-tag type="primary"> 参评站点数</el-tag><span class="analysis-info">{{ table.length }}</span>
      <el-tag type="danger"> 高风险数</el-tag>  <span class="analysis-info">{{ riskGradeNum.high }} ({{ riskGradeRate.high }}%)</span>
      <el-tag type="warning"> 中风险数</el-tag>  <span class="analysis-info">{{ riskGradeNum.middle }} ({{ riskGradeRate.middle }}%)</span> 
      <el-tag type="success"> 低风险数</el-tag> <span class="analysis-info">{{ riskGradeNum.low }} ({{ riskGradeRate.low }}%)</span> 

        <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip />

        <el-table-column prop="lst" label="监测日期" sortable show-overflow-tooltip />
    </el-col>
  </el-row>

        <el-table-column prop="dayAvg" label="日平均值" sortable show-overflow-tooltip />
        <el-table-column prop="min" label="日最小值" sortable show-overflow-tooltip />
        <el-table-column prop="max" label="日最大值" sortable show-overflow-tooltip />

        <el-table-column prop="dayOnline" label="日在线率" sortable show-overflow-tooltip />

        <el-table-column prop="dayValid" label="日有效率" sortable show-overflow-tooltip />
  <el-table
    ref="table"
    :data="table"
    :height="tableHeight"
    v-loading="loading"
    element-loading-text="后台分析中..."
    style="width: 98%"
    :cell-class-name="tableCellClassName"
    :default-sort="{ prop: 'riskValue', order: 'descending' }"
    v-show="!isNoData"
    border
  >
    <el-table-column
      type="index"
      prop="name"
      label="序号"
      fixed
      align="center"
      width="55"
      show-overflow-tooltip
    />
    <el-table-column prop="siteName" label="点位名称" align="center" show-overflow-tooltip>
      <template #default="{ row }">
        <el-button type="primary" text class="table-button" @click="openDetail(row)">{{
          row.siteName
        }}</el-button>
      </template>
    </el-table-column>

        <el-table-column prop="dayExceeding" label="日超标率" sortable show-overflow-tooltip />
      </el-table>

      <el-pagination
        ref="h2"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total,sizes, prev, pager, next, jumper"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </el-card>
    <el-empty v-show="isNoData" :image-size="200" />
    <el-table-column prop="region" label="区县" align="center" width="80" show-overflow-tooltip />
    <el-table-column
      prop="monitorType"
      label="检测类型"
      align="center"
      width="80"
      show-overflow-tooltip
    />
    <el-table-column
      prop="riskValue"
      label="风险值"
      sortable
      align="center"
      width="100"
      show-overflow-tooltip
    />
    <el-table-column
      prop="riskGrade"
      label="风险等级"
      align="center"
      width="100"
      show-overflow-tooltip
    />
    <el-table-column prop="riskAdvice" label="管控措施" show-overflow-tooltip>
      <template #default="scope">
        <div v-html="wrapIndex(scope.row.riskAdvice)"></div>
      </template>
    </el-table-column>
    <el-table-column
      prop="beginTime"
      label="日期"
      sortable
      align="center"
      width="160"
      show-overflow-tooltip
    />
    <!-- <el-table-column
      prop="endTime"
      label="结束日期"
      sortable
      align="center"
      width="160"
      show-overflow-tooltip
    /> -->
  </el-table>
  <el-empty v-show="isNoData" :image-size="200" />
</template>

<style scoped>
.el-form {
  margin: 20px;
.el-row,
.el-table {
  margin: 10px 0px 0px 10px;
}
.el-card {
  margin: 20px 20px 0px 20px;
}
:deep().el-table__row .warning-row {
  background-color: #f7ba1e;
}
:deep().el-table__row .red-color {

:deep(.el-table__row .warning-row) {
  background-color: red;
  /* color: rgb(241, 236, 236); */
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  border-radius: 0px;
}
.el-table {
  color: #333333;
}
.analysis-info {
  margin-right: 20px;
}
.tag{
  margin: 10px 5px 5px 1px;
}
.el-tag {
  font-size: 14px;
  vertical-align: baseline;
}
</style>