zmc
2023-11-14 0ee16e9f5dd31c6c98df1a5fdcf081c8eb7f80df
src/views/line_graph/SiteComprehensiveRskRanking.vue
@@ -8,14 +8,19 @@
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';
export default {
  components: {
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick,
    MonthSelect
    MonthSelect,
    SiteDetail,
  },
  data() {
    return {
      //   表格数据
@@ -54,13 +59,17 @@
      // 表格数据
      table: [],
      // 表格高度
      tableHeight: 600
      tableHeight: 600,
      currentRow:[]
    }
  },
  setup() {
    // 引入 百分号比较大小 导出功能
    const { exportToExcel } = useCommonFunction()
    return { exportToExcel }
  },
    computed: {
    ...mapStores(useLoadingStore),
  },
  mounted(){
    // 
@@ -101,63 +110,70 @@
      // 其中一个40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px  - 40px - 40px - var(--el-main-padding) * 2`
    },
    // 点击展示按钮
    fetchData() {
    // 点击风险排名按钮
    // 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() {
      this.loading = true
      this.queryButton = true
      exceptionApi
        .analysisdataByType(this.form.month, 'month')
      riskApi
        .queryRiskValue('',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: this.form.name,
              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.table = riskValue.calMonthlyRiskValue(response.data.data)
          this.queryButton = false
          this.isNoData = false
              this.$nextTick(()=>{
              this.$refs.table.sort('riskValue','descending')
            })
            })
        })
    },
    // 企业异常详情
    // exceptiondataCount() {
    //   exceptionApi
    //     .exceptiondata1({
    //       // siteName: this.form.name,
    //       siteName: '',
    //       beginTime: this.form.beginTime,
    //       endTime: this.form.endTime
    //     })
    //     .then((res) => {
    //       let obj = index.calRecur(res.data.data)
    //       this.bill.exceptionRecurrence = obj['exceptionRecurrence']
    //       this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
    //     })
    // },
    })
  },
    /**
     * 初始加载函数
@@ -201,6 +217,12 @@
      } else {
        ElMessage('无数据需要导出')
      }
    },
    openDetail(row){
      const encodedSiteName = encodeURIComponent(row.siteName);
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}`)
      // this.$router.push(`/detail/${row.siteName}/${this.form.month}`)
    }
  }
}
@@ -214,12 +236,8 @@
          <AreaAndmonitorType></AreaAndmonitorType>
        </el-form-item>
        <!-- <el-form-item>
          <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)"></InputSearch>
        </el-form-item> -->
        <el-form-item>
          <MonthSelect @submit-value="giveMonth"></MonthSelect>
          <MonthSelect  @submit-value="giveMonth"></MonthSelect>
        </el-form-item>
        <el-form-item>
@@ -246,6 +264,7 @@
    :data="table"
    :height="tableHeight"
    v-loading="loading"
    element-loading-text="后台分析中..."
    style="width: 98%"
    :cell-class-name="tableCellClassName"
    :default-sort="{ prop: 'riskValue', order: 'descending' }"
@@ -262,7 +281,13 @@
      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="monitorType" label="检测类型" align="center" width="80" show-overflow-tooltip />
    <el-table-column
@@ -293,6 +318,9 @@
    />
  </el-table>
  <el-empty v-show="isNoData" :image-size="200" />
</template>
<style scoped>
@@ -305,5 +333,10 @@
  background-color: red;
  /* color: rgb(241, 236, 236); */
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  border-radius: 0px;
}
</style>