修改指标排序界面相关逻辑

riku

2023-11-23 348d29c1cd601e269eae92e6ec55d31e77b3ecd0

 src/views/risk_assessment/DataIndexRank.vue

@@ -3,6 +3,7 @@
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import statisticApi from '@/api/statistic/statisticApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
@@ -40,8 +41,8 @@
  },
  setup() {
    // 引入 百分号比较大小 导出功能
    const { cmpp, exportToExcel } = useCommonFunction()
    return { cmpp, exportToExcel }
    const { cmpp, exportToExcel, percentFormatter } = useCommonFunction()
    return { cmpp, exportToExcel, percentFormatter }
  },

  mounted() {
@@ -97,12 +98,12 @@

      //  在线率，有效率 不满足标准时 变颜色
      if (columnIndex == 7) {
        if (!this.cmpp(row.dayOnline, '90%')) {
        if (row.dayOnline < 0.9) {
          return 'red-color'
        }
      }
      if (columnIndex == 8) {
        if (!this.cmpp(row.dayValid, '90%')) {
        if (row.dayValid < 0.9) {
          return 'red-color'
        }
      }
@@ -111,9 +112,9 @@
    // 功能：表格高度根据内容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$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`;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`
    },
    // 页大小改变时触发
    handleSizeChange(val) {
@@ -143,21 +144,27 @@
    },

    // 点击统计按钮
    fetchData() {
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      params['siteName'] = ''
    fetchData(p) {
      const { prop, order } = p ? p : { prop: 'dayAvg', order: 'descending' }
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        siteName: '',
        orderProp: prop,
        //排序 ascending 正序，descending 降序
        asc: order == 'ascending'
      }
      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) => {
      statisticApi.fetchDayStatisticByOrder(params).then((response) => {
        this.tableData = response.data.data.rows
        this.loading = false
        this.queryButton = false
@@ -171,9 +178,8 @@
      })
    },
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.siteName)
      let titleName = '站点风险数据详情'
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`)
      const encodedSiteName = encodeURIComponent(row.name)
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${row.lst}`)
    }
  }
}
@@ -184,11 +190,9 @@
      <el-form-item>
        <AreaAndmonitorType></AreaAndmonitorType>
      </el-form-item>

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

      <el-form-item>
        <ButtonClick
          style="margin-right: 12px"
@@ -205,7 +209,6 @@
        ></ButtonExportExcel>
      </el-form-item>
    </el-form>

    <el-card v-show="!isNoData">
      <el-table
        :data="tableData"
@@ -213,6 +216,7 @@
        style="width: 100%"
        v-loading="loading"
        :cell-class-name="tableCellClassName"
      @sort-change="fetchData"
      >
        <el-table-column
          type="index"
@@ -225,24 +229,30 @@
        <el-table-column prop="name" label="点位名称" show-overflow-tooltip width="300">
            <template #default="{ row }">
              <el-button type="primary" text   @click="openDetail(row)">
              <span class="rank-site">{{row.name
              }}</span></el-button>
            <span class="rank-site">{{ row.name }}</span></el-button
          >
            </template>
        </el-table-column>

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

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

        <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-column prop="dayExceeding" label="日超标率" sortable show-overflow-tooltip />
      <el-table-column prop="lst" label="监测日期" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayAvg" label="日平均值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="min" label="日最小值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="max" label="日最大值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayOnline" label="日在线率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayOnline) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayValid" label="日有效率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayValid) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayExceeding" label="日超标率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayExceeding) }}
        </template>
      </el-table-column>
      </el-table>

      <el-pagination