zmc
2023-11-16 73cb3ec2b1660610e3621d7614ad308f2c19331d
src/views/risk_assessment/SiteComprehensiveRskRanking.vue
ÎļþÃû´Ó src/views/line_graph/SiteComprehensiveRskRanking.vue ÐÞ¸Ä
@@ -1,25 +1,21 @@
<script>
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import exceptionApi from '@/api/exceptionApi.js'
import { useCommonFunction } from '../../utils/common.js'
import index from '@/utils/risk_estimate_common_function/index.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 SiteDetail from '@/views/line_graph/components/SiteDetail.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';
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 {
  components: {
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick,
    MonthSelect,
    SiteDetail,
  },
  data() {
    return {
@@ -40,7 +36,7 @@
        endTime: '',
        // é€‰æ‹©çš„æœˆä»½
        month:''
        month: ''
      },
      bill: {
        min: '',
@@ -60,7 +56,7 @@
      table: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 600,
      currentRow:[]
      currentRow: []
    }
  },
  setup() {
@@ -68,41 +64,37 @@
    const { exportToExcel } = useCommonFunction()
    return { exportToExcel }
  },
    computed: {
    ...mapStores(useLoadingStore),
  computed: {
    ...mapStores(useLoadingStore)
  },
  mounted(){
    //
  mounted() {
    //
    this.fetch()
    this.calTableHeight()
  },
  methods: {
    /**
     * å°†ä¸­å›½æ ‡å‡†æ—¶é—´è½¬ä¸ºæŒ‡å®šæ ¼å¼
     * @param:
     * @returns:
     */
     giveMonth(val){
    giveMonth(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
      this.form.month = dayjs(val).format('YYYY-MM-DD');
      // åŒæ—¶æ›´æ–°å¼€å§‹å’Œç»“束时间
      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);
      console.log(this.form.beginTime, this.form.endTime)
    },
     },
    // åŠŸèƒ½ï¼šæ”¹å˜è¡¨æ ¼æŸä¸ªå•å…ƒæ ¼çš„é¢œè‰²
    tableCellClassName({ row, columnIndex }) {
      // å¹³å‡å€¼ä¸æ»¡è¶³æ ‡å‡†æ—¶
      if (columnIndex == 4) {
        if (row.riskValue >= 0.8) {
          return 'warning-row';
          return 'warning-row'
        }
      }
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…å®¹è‡ªé€‚åº”
    calTableHeight() {
@@ -110,70 +102,28 @@
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px  - 40px - 40px - var(--el-main-padding) * 2`
    },
    // ç‚¹å‡»é£Žé™©æŽ’名按钮
    // fetchData() {
    //   this.loading = true
    //   this.queryButton = true
    //   exceptionApi
    //     .analysisdataByType(this.form.month, 'month')
    //     .then((response) => {
    //       this.chartData = response.data.data
    //       this.queryButton = false
    //       this.isNoData = false
    //       if (response.data.data.length == 0) {
    //         this.isNoData = true
    //         return
    //       }
    //       exceptionApi
    //         .exceptiondata1({
    //           siteName: '',
    //           beginTime: this.form.beginTime,
    //           endTime: this.form.endTime
    //         })
    //         .then((res) => {
    //           this.isNoData = false
    //           this.table = index.merge(
    //             this.chartData,
    //             res.data.data,
    //             this.form.beginTime,
    //             this.form.endTime
    //           )
    //           this.loading = false
    //           this.$nextTick(()=>{
    //           this.$refs.table.sort('riskValue','descending')
    //         })
    //         })
    //     })
    // },
     // ç‚¹å‡»é£Žé™©æŽ’名按钮
     fetchData() {
    fetchData() {
      this.loading = true
      this.queryButton = true
      riskApi
        .queryRiskValue('',this.form.month, 'month')
        .then((response) => {
          if (response.data.data.length == 0) {
            this.isNoData = true
            return
          }
      riskApi.queryRiskValue('', this.form.month, 'month').then((response) => {
        if (response.data.data.length == 0) {
          this.isNoData = true
          return
        }
          this.table = riskValue.calMonthlyRiskValue(response.data.data)
          this.queryButton = false
          this.isNoData = false
              this.$nextTick(()=>{
              this.$refs.table.sort('riskValue','descending')
        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')
        })
    })
  },
      })
    },
    /**
     * åˆå§‹åŠ è½½å‡½æ•°
@@ -183,6 +133,11 @@
      this.fetchData()
      // å¼‚常数据
      // this.exceptiondataCount()
    },
    // å•元格内容换行
    wrapIndex(index) {
      return index.replace(/\n/g, '<br/>')
    },
    /**
@@ -218,11 +173,10 @@
        ElMessage('无数据需要导出')
      }
    },
    openDetail(row){
      const encodedSiteName = encodeURIComponent(row.siteName);
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.siteName)
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}`)
      // this.$router.push(`/detail/${row.siteName}/${this.form.month}`)
    }
  }
}
@@ -237,7 +191,7 @@
        </el-form-item>
        <el-form-item>
          <MonthSelect  @submit-value="giveMonth"></MonthSelect>
          <MonthSelect @submit-value="giveMonth"></MonthSelect>
        </el-form-item>
        <el-form-item>
@@ -275,21 +229,26 @@
      type="index"
      prop="name"
      label="序号"
      :index="indexMethod"
      fixed
      align="center"
      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
        >
        <el-button type="primary" text class="table-button" @click="openDetail(row)">{{
          row.siteName
        }}</el-button>
      </template>
      </el-table-column>
    </el-table-column>
    <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="monitorType"
      label="检测类型"
      align="center"
      width="80"
      show-overflow-tooltip
    />
    <el-table-column
      prop="riskValue"
      label="风险值"
@@ -298,8 +257,18 @@
      width="100"
      show-overflow-tooltip
    />
    <el-table-column prop="riskGrage" label="风险等级" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="riskAdvice" label="管控措施" align="center" 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="开始日期"
@@ -318,9 +287,6 @@
    />
  </el-table>
  <el-empty v-show="isNoData" :image-size="200" />
</template>
<style scoped>
@@ -329,7 +295,7 @@
  margin: 10px 0px 0px 10px;
}
:deep(.el-table__row .warning-row){
:deep(.el-table__row .warning-row) {
  background-color: red;
  /* color: rgb(241, 236, 236); */
}
@@ -338,5 +304,7 @@
  text-decoration: underline;
  border-radius: 0px;
}
.el-table {
  color: #333333;
}
</style>