扬尘Vue代码

zmc

2023-08-30 d3d7dcf919eda40a415b6dc744fb0b347d4293a8

 src/views/line_graph/DataRiskRank.vue

ÎļþÃû´Ó src/views/line_graph/analysisData.vue ÐÞ¸Ä
@@ -3,7 +3,7 @@
// 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 dayjs from 'dayjs';
export default {
  components: {
@@ -22,8 +22,8 @@
      tableData: [],
      isNoData: false,
      loading: false,
      begin: '2023-05-01', //开始时间
      end: '2023-05-15', //结束时间
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间

      form: {
        // ç«™ç‚¹åç§°
@@ -38,9 +38,9 @@
    };
  },
  setup(){
    // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小
    const {cmpp} = useCommonFunction()
    return {cmpp} 
     // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小 å¯¼å‡ºåŠŸèƒ½
     const {cmpp,exportToExcel} = useCommonFunction()
    return {cmpp,exportToExcel} 
  },

  //   watch:{
@@ -56,6 +56,35 @@
    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);

        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')
      })
      
    },
    // åŠŸèƒ½ï¼šæ”¹å˜è¡¨æ ¼æŸä¸ªå•å…ƒæ ¼çš„颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      // å¹³å‡å€¼ä¸æ»¡è¶³æ ‡å‡†æ—¶
@@ -159,6 +188,7 @@
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchData">统计分析</el-button>
            <el-button type="warning" @click="exportData">导出</el-button>
          </el-form-item>
        </el-form>

@@ -199,40 +229,40 @@

          <el-table-column
            prop="dayAvg"
            label="平均值"
            label="日平均值"
            sortable
            show-overflow-tooltip
          />
          <el-table-column
            prop="min"
            label="最小值"
            label="日最小值"
            sortable
            show-overflow-tooltip
          />
          <el-table-column
            prop="max"
            label="最大值"
            label="日最大值"
            sortable
            show-overflow-tooltip
          />

          <el-table-column
            prop="dayOnline"
            label="在线率"
            label="日在线率"
            sortable
            show-overflow-tooltip
          />

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

          <el-table-column
            prop="dayExceeding"
            label="超标率"
            label="日超标率"
            sortable
            show-overflow-tooltip
          />
@@ -259,4 +289,8 @@
:deep().el-table__row .red-color {
  background-color: red;
}
.el-table {
  color: #000000;
}

</style>