修改了获取风险值的请求接口

zmc

2023-11-14 0ee16e9f5dd31c6c98df1a5fdcf081c8eb7f80df

 src/views/line_graph/DataRiskRank.vue

@@ -1,9 +1,9 @@
<script>
import TimeShortCuts from '@/sfc/TimeShortCuts.vue';
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
import { useCommonFunction } from '../../utils/common.js';
import requetsApi from '@/api/exportExcel/requetsApi.js';
import dayjs from 'dayjs';
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'

@@ -26,26 +26,28 @@
      isNoData: true,
      loading: false,
      // 统计分析按钮加载中
      queryButton:false,
      queryButton: false,
      // 导出按钮加载中
      exportButton:false,
      exportButton: false,
      form: {
        // 开始时间
        beginTime: '',
        // 结束时间
        endTime: ''
      }
    };
      },
      tableHeight: '600'
    }
  },
  setup() {
    // 引入 百分号比较大小 导出功能
    const { cmpp, exportToExcel } = useCommonFunction();
    return { cmpp, exportToExcel };
    const { cmpp, exportToExcel } = useCommonFunction()
    return { cmpp, exportToExcel }
  },

  mounted() {
    console.log(this.$route.matched);
    this.form.name = '';
    this.form.name = ''
    this.fetchData()
    this.calTableHeight()
  },
  methods: {
    // 功能：导出为Excel
@@ -53,10 +55,10 @@
      let params = {
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      };
      }
      this.exportButton = true
      requetsApi.fetchAllData(params).then((res) => {
        const data = res.data.data;
        const data = res.data.data

        const tableColumns = [
          'name',
@@ -68,7 +70,7 @@
          'dayOnline',
          'dayValid',
          'dayExceeding'
        ];
        ]
        const excelColumns = [
          ['A1', '站点名称'],
          ['B1', '设备编号'],
@@ -79,209 +81,183 @@
          ['G1', '在线率'],
          ['H1', '有效率'],
          ['I1', '超标率']
        ];
        this.exportToExcel(data, tableColumns, excelColumns, '分析表.xlsx');
        ]
        this.exportToExcel(data, tableColumns, excelColumns, '分析表.xlsx')
        this.exportButton = false
      });
      })
    },

    // 功能：改变表格某个单元格的颜色
    tableCellClassName({ row, columnIndex }) {
      // 平均值不满足标准时
      if (columnIndex == 4) {
        if (row.dayAvg >= 0.8) {
          return 'warning-row';
          return 'warning-row'
        }
      }

      //  在线率，有效率 不满足标准时 变颜色
      if (columnIndex == 7) {
        if (!this.cmpp(row.dayOnline, '90%')) {
          return 'red-color';
          return 'red-color'
        }
      }
      if (columnIndex == 8) {
        if (!this.cmpp(row.dayValid, '90%')) {
          return 'red-color';
          return 'red-color'
        }
      }
    },

    // 功能：表格高度根据内容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$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`;
    },
    // 页大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageSize = val

      // 改变每页显示数目时跳到当前页
      this.handleCurrentChange(1);
      this.handleCurrentChange(1)
    },

    // 页号改变时触发
    handleCurrentChange(val) {
      // 将当前页号给currentPage
      this.currentPage = val;
      this.currentPage = val

      // 页面变化时调用 查询数据函数
      this.fetchData();
      this.fetchData()
    },
    //序号递增
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },

    giveTime(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');
      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() {
      let params = {};
      params['page'] = this.currentPage;
      params['pageSize'] = this.pageSize;
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      if (this.form.name) {
        params['siteName'] = this.form.name;
        params['siteName'] = this.form.name
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime;
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime;
        params['endTime'] = this.form.endTime
      }
      this.loading = true;
      this.loading = true
      this.queryButton = true
      this.$http
        .get('/dust/analysistime', { params: params })
        .then((response) => {
          this.tableData = response.data.data.rows;
          this.loading = false;
          this.queryButton = false
          if (response.data.data.total == 0) {
            this.isNoData = true;
            return;
          }
          // 移除空数据状态
          this.isNoData = false;
          this.total = response.data.data.total;
        });
      this.isNoData = false
      this.$http.get('/dust/analysistime', { params: params }).then((response) => {
        this.tableData = response.data.data.rows
        this.loading = false
        this.queryButton = false
        if (response.data.data.total == 0) {
          this.isNoData = true
          return
        }
        // 移除空数据状态
        this.isNoData = false
        this.total = response.data.data.total
      })
    }
  }
};
}
</script>

<template>
  <div class="search-container">
    <el-container>
      <el-main>
        <el-form :inline="true" :model="form">
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
    <el-form :inline="true" :model="form" ref="h1">
      <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;" content="风险排名" type="primary" :loading="queryButton" @do-search="fetchData" ></ButtonClick>
            <ButtonExportExcel  content="导出数据" type="success" :loading="exportButton" @do-export="exportData"></ButtonExportExcel>
          </el-form-item>
        </el-form>
      <el-form-item>
        <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
      </el-form-item>

        <el-card v-show="!isNoData">
          <el-table
            :data="tableData"
            height="600px"
            style="width: 100%"
            v-loading="loading"
            :cell-class-name="tableCellClassName"
          >
            <el-table-column
              type="index"
              prop="name"
              label="序号"
              :index="indexMethod"
              fixed
              show-overflow-tooltip
            />
            <el-table-column
              prop="name"
              label="站点名称"
              show-overflow-tooltip
            />
      <el-form-item>
        <ButtonClick
          style="margin-right: 12px"
          content="数据排名"
          type="primary"
          :loading="queryButton"
          @do-search="fetchData"
        ></ButtonClick>
        <ButtonExportExcel
          content="导出数据"
          type="success"
          :loading="exportButton"
          @do-export="exportData"
        ></ButtonExportExcel>
      </el-form-item>
    </el-form>

            <el-table-column
              prop="mnCode"
              label="设备编号"
              show-overflow-tooltip
            />
    <el-card v-show="!isNoData">
      <el-table
        :data="tableData"
        :height="tableHeight"
        style="width: 100%"
        v-loading="loading"
        :cell-class-name="tableCellClassName"
      >
        <el-table-column
          type="index"
          prop="name"
          label="序号"
          :index="indexMethod"
          fixed
          show-overflow-tooltip
        />
        <el-table-column prop="name" label="站点名称" show-overflow-tooltip />

            <el-table-column
              prop="lst"
              label="监测日期"
              sortable
              show-overflow-tooltip
            />
        <el-table-column prop="mnCode" label="设备编号" 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="lst" label="监测日期" sortable show-overflow-tooltip />

            <el-table-column
              prop="dayOnline"
              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="dayValid"
              label="日有效率"
              sortable
              show-overflow-tooltip
            />
        <el-table-column prop="dayOnline" label="日在线率" sortable show-overflow-tooltip />

            <el-table-column
              prop="dayExceeding"
              label="日超标率"
              sortable
              show-overflow-tooltip
            />
          </el-table>
        <el-table-column prop="dayValid" label="日有效率" sortable show-overflow-tooltip />

          <el-pagination
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total,sizes, prev, pager, next, jumper"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            @update:current-page="handleCurrentChange"
            @update:page-size="handleSizeChange"
          />
        </el-card>
        <el-empty v-show="isNoData" :image-size="200" />
      </el-main>
    </el-container>
  </div>
        <el-table-column prop="dayExceeding" label="日超标率" sortable show-overflow-tooltip />
      </el-table>

      <el-pagination
        ref="h2"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total,sizes, prev, pager, next, jumper"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </el-card>
    <el-empty v-show="isNoData" :image-size="200" />
</template>

<style scoped>
.el-form {
  margin: 20px;
}
.el-card {
  margin: 20px 20px 0px 20px;
}
:deep().el-table__row .warning-row {
  background-color: #f7ba1e;
}