src/views/risk_assessment/SiteComprehensiveRskRanking.vue
@@ -6,8 +6,6 @@
import ButtonClick from '@/sfc/ButtonClick.vue'
import { ElMessage } from 'element-plus'
import MonthSelect from '@/sfc/MonthSelect.vue'
import { useLoadingStore } from '@/stores/loadingStore'
import { mapStores } from 'pinia'
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
export default {
@@ -15,7 +13,7 @@
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick,
    MonthSelect,
    MonthSelect
  },
  data() {
    return {
@@ -65,7 +63,50 @@
    return { exportToExcel }
  },
  computed: {
    ...mapStores(useLoadingStore)
    // 计算高中低站点数量
    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() {
    //
@@ -112,13 +153,11 @@
          this.isNoData = true
          return
        }
        this.table = riskValue.backComprehensiveRiskTableData(response.data.data)
        console.log('表', this.table)
        this.queryButton = false
        this.isNoData = false
        this.loading = false
        this.$nextTick(() => {
          this.$refs.table.sort('riskValue', 'descending')
        })
@@ -175,8 +214,8 @@
    },
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.siteName)
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}`)
      let titleName = '站点风险数据详情'
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`)
    }
  }
}
@@ -184,7 +223,7 @@
<template>
  <el-row ref="h1">
    <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="form">
        <el-form-item>
          <AreaAndmonitorType></AreaAndmonitorType>
@@ -210,8 +249,19 @@
          ></ButtonExportExcel>
        </el-form-item>
      </el-form>
    </el-row>
    </el-col>
    <el-col :span="24" class="tag">
      <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-col>
  </el-row>
  <el-table
    ref="table"
@@ -234,14 +284,15 @@
      width="55"
      show-overflow-tooltip
    />
    <el-table-column prop="siteName" label="站点名称" align="center" 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="region" label="区域" align="center" width="80" show-overflow-tooltip />
    <el-table-column prop="region" label="区县" align="center" width="80" show-overflow-tooltip />
    <el-table-column
      prop="monitorType"
      label="检测类型"
@@ -271,20 +322,20 @@
    </el-table-column>
    <el-table-column
      prop="beginTime"
      label="开始日期"
      label="日期"
      sortable
      align="center"
      width="160"
      show-overflow-tooltip
    />
    <el-table-column
    <!-- <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>
@@ -307,4 +358,14 @@
.el-table {
  color: #333333;
}
.analysis-info {
  margin-right: 20px;
}
.tag{
  margin: 10px 5px 5px 1px;
}
.el-tag {
  font-size: 14px;
  vertical-align: baseline;
}
</style>