扬尘前端页面

zmc

2023-10-12 ef10dea2a96d68a00a9a316f8594e0636103a6ab

 src/views/line_graph/DataRiskRank.vue

@@ -1,15 +1,18 @@
<script>
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
// import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
import {useCommonFunction} from '../../utils/common.js';
import requetsApi from '@/api/exportExcel/requetsApi.js'
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'

export default {
  components: {
    TimeSelectWithShortCuts,
    // InputSearch
    AreaAndmonitorType
    TimeShortCuts,
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick
  },
  data() {
    return {
@@ -20,16 +23,13 @@
      total: 0,
      //   表格数据
      tableData: [],
      isNoData: false,
      isNoData: true,
      loading: false,
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间

      // 统计分析按钮加载中
      queryButton:false,
      // 导出按钮加载中
      exportButton:false,
      form: {
        // 站点名称
        name: '',
        // 设备编号
        number: '',
        // 开始时间
        beginTime: '',
        // 结束时间
@@ -37,56 +37,55 @@
      }
    };
  },
  setup(){
     // 引入 百分号比较大小 导出功能
     const {cmpp,exportToExcel} = useCommonFunction()
    return {cmpp,exportToExcel} 
  setup() {
    // 引入 百分号比较大小 导出功能
    const { cmpp, exportToExcel } = useCommonFunction();
    return { cmpp, exportToExcel };
  },

  //   watch:{
  //     pageSize(){
  //         this.handleSizeChange()
  //     },
  //     currentPage(){
  //         this.handleCurrentChange()
  //     },
  //   },

  mounted() {
    console.log(this.$route.matched);
    this.form.name = '';
  },
  methods: {
    // 功能：导出为Excel
    exportData(){
      let params  ={
        'beginTime':this.form.beginTime,
        'endTime': this.form.endTime
      }
      requetsApi.fetchAllData(params).then(res => {
        const data = res.data.data
        console.log('长度：',data.length);
    exportData() {
      let params = {
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      };
      this.exportButton = true
      requetsApi.fetchAllData(params).then((res) => {
        const data = res.data.data;

        const  tableColumns = [
        'name',
        'mnCode',
        'lst',
        'dayAvg',
        'min',
        'max',
        'dayOnline',
        'dayValid',
        'dayExceeding',
      ]
      const excelColumns = [['A1','站点名称'],
      ['B1','设备编号'],['C1','监测日期'],['D1','平均值'],
      ['E1','最小值'],['F1','最大值'],['G1','在线率'],
      ['H1','有效率'],['I1','超标率']]
      this.exportToExcel(data,tableColumns,excelColumns,'分析表.xlsx')
      })
      
        const tableColumns = [
          'name',
          'mnCode',
          'lst',
          'dayAvg',
          'min',
          'max',
          'dayOnline',
          'dayValid',
          'dayExceeding'
        ];
        const excelColumns = [
          ['A1', '站点名称'],
          ['B1', '设备编号'],
          ['C1', '监测日期'],
          ['D1', '平均值'],
          ['E1', '最小值'],
          ['F1', '最大值'],
          ['G1', '在线率'],
          ['H1', '有效率'],
          ['I1', '超标率']
        ];
        this.exportToExcel(data, tableColumns, excelColumns, '分析表.xlsx');
        this.exportButton = false
      });
    },
    // 功能：改变表格某个单元格的颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
    tableCellClassName({ row, columnIndex }) {
      // 平均值不满足标准时
      if (columnIndex == 4) {
        if (row.dayAvg >= 0.8) {
@@ -96,12 +95,12 @@

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

    // 页号改变时触发
    handleCurrentChange(val) {
      console.log('当前页为：', val);
      // 将当前页号给currentPage
      this.currentPage = val;

@@ -136,7 +134,6 @@

    // 点击统计按钮
    fetchData() {
      console.log(this.form.name);
      let params = {};
      params['page'] = this.currentPage;
      params['pageSize'] = this.pageSize;
@@ -150,12 +147,13 @@
        params['endTime'] = this.form.endTime;
      }
      this.loading = true;
      this.queryButton = true
      this.$http
        .get('/dust/analysistime', { params: params })
        .then((response) => {
          this.tableData = response.data.data.rows;
          console.log(this.tableData);
          this.loading = false;
          this.queryButton = false
          if (response.data.data.total == 0) {
            this.isNoData = true;
            return;
@@ -163,7 +161,6 @@
          // 移除空数据状态
          this.isNoData = false;
          this.total = response.data.data.total;
          this.loading = false;
        });
    }
  }
@@ -174,109 +171,111 @@
  <div class="search-container">
    <el-container>
      <el-main>
        <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form :inline="true" :model="form">
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
          <!-- <el-form-item>
            <InputSearch  @submit-value="(n) => (form.name = n)"></InputSearch>
          </el-form-item> -->

          <el-form-item>
            <TimeSelectWithShortCuts
            <TimeShortCuts
            timeType="currentMonth"
              @submit-time="giveTime"
            ></TimeSelectWithShortCuts>
            ></TimeShortCuts>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="fetchData">统计分析</el-button>
            <el-button type="warning" @click="exportData">导出</el-button>
            <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-card>
          <el-empty v-show="isNoData" :image-size="200" />
          <!-- <LineChart :chartData="option"> </LineChart> -->
        <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-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>

          <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-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-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>

        <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-empty v-show="isNoData" :image-size="200" />
      </el-main>
    </el-container>
  </div>
@@ -290,7 +289,6 @@
  background-color: red;
}
.el-table {
  color: #000000;
  color: #333333;
}

</style>