按开发清单已修改

zmc

2023-11-02 fd934f83afae1e3fce46db8610837d0e0f4d9393

 src/views/line_graph/SiteComprehensiveRskRanking.vue

@@ -1,36 +1,44 @@
<script>
import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
import InputSearch from '@/sfc/InputSearch.vue';
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
import exceptionApi from '@/api/exceptionApi.js';
import {useCommonFunction} from '../../utils/common.js';
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 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';
export default {
  components: {
    TimeSelectWithShortCuts,
    AreaAndmonitorType,
    InputSearch
    ButtonExportExcel,
    ButtonClick,
    MonthSelect,
    SiteDetail,
  },
  data() {
    return {
        // 当前页
        currentPage: 1,
      // 每页条数
      pageSize: 20,
      total: 0,
      //   表格数据
      tableData: [],
      isNoData: false,
      isNoData: true,
      loading: false,

      // 统计分析按钮加载中
      queryButton: false,
      // 导出按钮加载中
      exportButton: false,
      form: {
        // 站点名称
        name: '',
        // 开始时间
        beginTime: '',
        // 结束时间
        endTime: ''
        // // 结束时间
        endTime: '',

        // 选择的月份
        month:''
      },
      bill: {
        min: '',
@@ -43,228 +51,265 @@
        //  典型异常复现率
        exceptionRecurrence: '',
        // 异常类型据聚集度
        exceptionTypeAggregation: '',
        exceptionTypeAggregation: ''
      },
      // {
      //   siteName:'',
      //   region:'',
      //   monitorType:'',
      //   riskValue:'',
      //   riskGrage:'',
      //   riskAdvice:'',
      //   beginTime:'',
      //   endTime:'',
      // }
      table:[]
    };
  },
  setup(){
     // 引入 百分号比较大小 导出功能
     const {exportToExcel} = useCommonFunction()
    return {exportToExcel} 
  },

  computed: {
    weight() {
      return (
        (100 - this.bill.online) * 0.1 +
        (100 - this.bill.valid) * 0.2 +
        this.bill.exceeding * 0.2 +
        this.bill.exceptionTypeAggregation * 0.2 +
        this.bill.exceptionRecurrence * 0.3
      ).toFixed(2);
      // 表格数据
      table: [],
      // 表格高度
      tableHeight: 600,
      currentRow:[]
    }
  },
  watch:{
    weight(){
      this.table[0].riskValue = this.weight
    }
  setup() {
    // 引入 百分号比较大小 导出功能
    const { exportToExcel } = useCommonFunction()
    return { exportToExcel }
  },
    computed: {
    ...mapStores(useLoadingStore),
  },
  mounted(){
    // 
    this.fetch()
    this.calTableHeight()
  },
  methods: {

    /**
     * 将中国标准时间转为指定格式
     * @param：
     * @returns：
     */
     giveTime(val) {
     giveMonth(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() {
      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);

      let params = {};
      if (this.form.name) {
        params['siteName'] = this.form.name;
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime;
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime;
      }
      this.loading = true;
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
        .then((response) => {
          this.chartData = response.data.data;
          this.loading = false;
          if (response.data.data.length == 0) {
            this.isNoData = true;
            return;
          }
          // 移除空数据状态
          this.isNoData = false;
          let temp = index.calBillData(this.chartData,this.form.beginTime,this.form.endTime);
          this.bill.min = temp['min'];
          this.bill.max = temp['max'];

          this.bill.avg = temp['avg'];
          this.bill.online = temp['online'];
          this.bill.valid = temp['valid'];
          this.bill.exceeding = temp['exceeding'];

          this.begin = this.chartData[0].lst;
          this.end = this.chartData[this.chartData.length - 1].lst;
        const tempObj = {}
        tempObj.region = '金山区' 
        tempObj.monitorType = '扬尘' 
        tempObj.siteName = this.form.name
        tempObj.beginTime = this.form.beginTime
        tempObj.endTime = this.form.endTime

        // this.table[0].region = '金山区'  
        // this.table[0].monitorType = '扬尘'  
        // this.table[0].siteName = this.form.name
        // this.table[0].beginTime = this.form.beginTime
        // this.table[0].endTime = this.form.endTime

        if(this.weight>=0.6){
          tempObj.riskGrage = '高风险'
          tempObj.riskAdvice = '建议对该站点进行线下执法检查，专项数据对比'
          // this.table[0].riskGrage = '高风险'
          // this.table[0].riskAdvice = '建议对该站点进行线下执法检查，专项数据对比'
        }else if(this.weight<0.6 && this.weight>=0.2){
          tempObj.riskGrage = '中风险'
          tempObj.riskAdvice = '建议开展常态追踪分析'
          // this.table[0].riskGrage = '中风险'
          // this.table[0].riskAdvice = '建议开展常态追踪分析'
        }else {
          tempObj.riskGrage = '低风险'
          tempObj.riskAdvice = '建议引导企业长态保持'
          // this.table[0].riskGrage = '低风险'
          // this.table[0].riskAdvice = '建议引导企业长态保持'
     },
     
    // 功能：改变表格某个单元格的颜色
    tableCellClassName({ row, columnIndex }) {
      // 平均值不满足标准时
      if (columnIndex == 4) {
        if (row.riskValue >= 0.8) {
          return 'warning-row';
        }
        this.table.push(tempObj)
        });
    },
      }

    // 企业异常详情
    exceptiondataCount() {
     
    },
    // 功能：表格高度根据内容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      // 其中一个40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px  - 40px - 40px - var(--el-main-padding) * 2`
    },
    // 点击风险排名按钮
    fetchData() {
      this.loading = true
      this.queryButton = true
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        .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')
              
            })

            })
            
        })
        .then((res) => {
          let obj = index.calRecur(res.data.data);
          this.bill.exceptionRecurrence = obj['exceptionRecurrence'];
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'];
        });
    },

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

    /**
     * 导出为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.exportToExcel(this.table,tableColumns,excelColumns,'综合风险排名.xlsx')
      } 

    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){
      this.$router.push(`/detail/${row.siteName}/${this.form.month}`)
    }
  }
};
}
</script>

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

        <el-form-item>
            <InputSearch
              isNeedDefaultSite="1"
              @submit-value="(n) => (form.name = n)"
            ></InputSearch>
          </el-form-item>
        <el-form-item>
          <TimeSelectWithShortCuts
            @submit-time="giveTime"
          ></TimeSelectWithShortCuts>
          <MonthSelect  @submit-value="giveMonth"></MonthSelect>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="fetch">风险排名</el-button>
          <el-button type="warning" @click="exportData">导出</el-button>
          <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-row>
  </el-row>

  <el-table
          :data="table"
          height="600px"
          style="width: 100%"
          v-loading="loading"
          :cell-class-name="tableCellClassName"
    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="序号"
      :index="indexMethod"
      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
        >
        <el-table-column
            type="index"
            prop="name"
            label="序号"
            :index="indexMethod"
            fixed
            show-overflow-tooltip
          />
          <el-table-column prop="siteName" label="站点名称" show-overflow-tooltip />
          <el-table-column prop="region" label="区域" show-overflow-tooltip />
          <el-table-column prop="monitorType" label="检测类型" show-overflow-tooltip />
          <el-table-column prop="riskValue" label="风险值" show-overflow-tooltip />
          <el-table-column prop="riskGrage" label="风险等级" show-overflow-tooltip />
          <el-table-column prop="riskAdvice" label="管控措施" show-overflow-tooltip />
          <el-table-column prop="beginTime" label="开始日期" show-overflow-tooltip />
          <el-table-column prop="endTime" label="结束日期" show-overflow-tooltip />
      </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
      prop="riskValue"
      label="风险值"
      sortable
      align="center"
      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="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-row,.el-table  {
  margin: 10px 0px 0px 10px
.el-row,
.el-table {
  margin: 10px 0px 0px 10px;
}
.el-table{
 

: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;
}

</style>