修改指标排序界面相关逻辑

riku

2023-11-23 348d29c1cd601e269eae92e6ec55d31e77b3ecd0

修改指标排序界面相关逻辑

 src/api/index.js

@@ -1,27 +1,25 @@
import axios from 'axios';
import { setInterceptors } from './config';
import axios from 'axios'
import { setInterceptors } from './config'

// const url = 'http://localhost:8081/';
// éƒ¨ç½²
const url = 'http://114.215.109.124:8803/';
// const url = 'http://192.168.1.8:8081/';
// const url = 'http://192.168.0.123:8081/'

//飞羽监管
const $http = axios.create({
  baseURL: url,
  timeout: 10000
});


})

/* Python后台 */
const url_py = 'http://127.0.0.1:8089/'
const $http_py = axios.create({
  baseURL: url_py,
  timeout: 10000
});
})

//添加拦截器
setInterceptors($http,$http_py);
setInterceptors($http, $http_py)

export { $http,$http_py,url};
export { $http, $http_py, url }

 src/api/statistic/statisticApi.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,27 @@
import { $http } from '@/api/index.js'
export default {

  /**
   * æŒ‰ç…§è‡ªå®šä¹‰æŽ’序获取日统计数据
   */
  fetchDayStatisticByOrder({
    page,
    pageSize,
    siteName = '',
    beginTime = null,
    endTime = null,
    orderProp,
    asc = true
  }) {
    let params = {
      page: page,
      pageSize: pageSize,
      siteName: siteName,
      beginTime: beginTime,
      endTime: endTime,
      orderProp: orderProp,
      asc: asc
    }
    return $http.get('/dust/analysistime', { params: params })
  }
}

 src/router/index.js

@@ -79,14 +79,6 @@
          component: () => import('@/views/setting/SetConfiguration.vue')
        },

        //  é£Žé™©æ¨¡åž‹åµŒå…¥è¿‡æ¸¡é¡µé¢
        {
          path: '/detail/:siteName/:month/:titleName',
          name: 'RiskModelDetail',
          meta: { title: '站点具体信息', transition: 'slide-left' },
          component: () => import('@/views/risk_assessment/components/SiteDetail.vue')
        },

        // é£Žé™©æ¨¡åž‹åµŒå…¥
        {
          path: '/subRiskModel',

 src/utils/common.js

@@ -1,4 +1,6 @@
import * as XLSX from 'xlsx/xlsx.mjs';
import * as XLSX from 'xlsx/xlsx.mjs'
import dayjs from 'dayjs'

export function useCommonFunction(){
    /**
     * description：判断起始时间跨度是否超过1个月
@@ -10,28 +12,25 @@
    function isExceedOneMonth(dateStr1, dateStr2) {
        // è¶…过一个月，返回True，否则返回False
        // å°†æ—¥æœŸå­—符串转为日期对象
        const date1 = new Date(dateStr1);
        const date2 = new Date(dateStr2);
    const date1 = new Date(dateStr1)
    const date2 = new Date(dateStr2)
  
        // èŽ·å–两个日期的年、月、日
        const year1 = date1.getFullYear();
        const month1 = date1.getMonth();
        const day1 = date1.getDate();
    const year1 = date1.getFullYear()
    const month1 = date1.getMonth()
    const day1 = date1.getDate()
  
        const year2 = date2.getFullYear();
        const month2 = date2.getMonth();
        const day2 = date2.getDate();
    const year2 = date2.getFullYear()
    const month2 = date2.getMonth()
    const day2 = date2.getDate()
  
        // åˆ¤æ–­ä¸¤ä¸ªæ—¥æœŸæ˜¯å¦ç›¸å·®ä¸€ä¸ªæœˆ
        if (year1 === year2) {
          // å¹´ä»½ç›¸ç­‰ï¼Œæ¯”较月份差值
          if (Math.abs(month1 - month2) === 1) {
            // æœˆä»½å·®å€¼ä¸º1，还需要判断具体日期
            if (
              (month1 < month2 && day1 < day2) ||
              (month1 > month2 && day1 > day2)
            ) {
              return true;
        if ((month1 < month2 && day1 < day2) || (month1 > month2 && day1 > day2)) {
          return true
            }
          }
        } else if (Math.abs(year1 - year2) === 1) {
@@ -40,12 +39,12 @@
            (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
            (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
          ) {
            return true;
        return true
          }
        }
  
        // é»˜è®¤è¿”回false，表示两个日期字符串不相差一个月
        return false;
    return false
      }

      /**
@@ -54,7 +53,7 @@
     * @returns：大于，则返回true。否则返回false
     */
      function cmpp(a, b) {
        return Number(a.replace('%', '')) >= Number(b.replace('%', ''));
    return Number(a.replace('%', '')) >= Number(b.replace('%', ''))
      }

      /**
@@ -64,25 +63,24 @@
     */
     function exportToExcel(exportData,tableColumns,excelColumnsName,excelName='data.xlsx'){
      const itemsFormatted = exportData.map((item) => {
        const newItem = {};
      const newItem = {}
        tableColumns.forEach((col) => {
          newItem[col] = item[col];
        });
        return newItem;
      });
        newItem[col] = item[col]
      })
      return newItem
    })
      // åˆ›å»ºxlsx对象
      const xls = XLSX.utils.json_to_sheet(itemsFormatted);
    const xls = XLSX.utils.json_to_sheet(itemsFormatted)
     
     // ç¼–辑表头行       ä¿®æ”¹è¡¨å¤´
      excelColumnsName.forEach(item =>{
    excelColumnsName.forEach((item) => {
        xls[item[0]].v = item[1]
      })
      // åˆ›å»ºworkbook，并把sheet添加进去
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, xls, 'Sheet1')
      // å°†workbook转为二进制xlsx文件并下载
      XLSX.writeFile(wb, excelName);
    
    XLSX.writeFile(wb, excelName)
    }

     /**
@@ -92,22 +90,30 @@
     * @returns：比如12:00:00-13:00:00 æ‰€ä»¥è¿”回的数组元素是 12:00:00 ,12:15:00,12:30:00,12:45:00，13:00:00
     */
     function  descFiftyTime(begin, end) {
      let time = [];
    let time = []
      if (begin == end) {
        time.push(begin);
        return time;
      time.push(begin)
      return time
      }
      time.push(begin);
      let temp = dayjs(begin).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
    time.push(begin)
    let temp = dayjs(begin).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss')
      while (temp != end) {
        time.push(temp);
        temp = dayjs(temp).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
      time.push(temp)
      temp = dayjs(temp).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss')
      }
      // åŠ ä¸Šå¼‚常的结束时间
      time.push(temp);
      return time;
    time.push(temp)
    return time
    }

    return {isExceedOneMonth,cmpp,exportToExcel,descFiftyTime}
  /**
   * æ ¼å¼åŒ–为百分号
   * @param {*} v 
   * @returns 
   */
  function percentFormatter(v) {
    return v * 100 + '%'
}

  return { isExceedOneMonth, cmpp, exportToExcel, descFiftyTime, percentFormatter }
}

 src/views/risk_assessment/DataIndexRank.vue

@@ -3,6 +3,7 @@
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import statisticApi from '@/api/statistic/statisticApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
@@ -40,8 +41,8 @@
  },
  setup() {
    // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小 å¯¼å‡ºåŠŸèƒ½
    const { cmpp, exportToExcel } = useCommonFunction()
    return { cmpp, exportToExcel }
    const { cmpp, exportToExcel, percentFormatter } = useCommonFunction()
    return { cmpp, exportToExcel, percentFormatter }
  },

  mounted() {
@@ -97,12 +98,12 @@

      //  åœ¨çº¿çŽ‡ï¼Œæœ‰æ•ˆçŽ‡ ä¸æ»¡è¶³æ ‡å‡†æ—¶ å˜é¢œè‰²
      if (columnIndex == 7) {
        if (!this.cmpp(row.dayOnline, '90%')) {
        if (row.dayOnline < 0.9) {
          return 'red-color'
        }
      }
      if (columnIndex == 8) {
        if (!this.cmpp(row.dayValid, '90%')) {
        if (row.dayValid < 0.9) {
          return 'red-color'
        }
      }
@@ -111,9 +112,9 @@
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$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`;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`
    },
    // é¡µå¤§å°æ”¹å˜æ—¶è§¦å‘
    handleSizeChange(val) {
@@ -143,21 +144,27 @@
    },

    // ç‚¹å‡»ç»Ÿè®¡æŒ‰é’®
    fetchData() {
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      params['siteName'] = ''
    fetchData(p) {
      const { prop, order } = p ? p : { prop: 'dayAvg', order: 'descending' }
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        siteName: '',
        orderProp: prop,
        //排序 ascending æ­£åºï¼Œdescending é™åº
        asc: order == 'ascending'
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }

      this.loading = true
      this.queryButton = true
      this.isNoData = false
      this.$http.get('/dust/analysistime', { params: params }).then((response) => {
      statisticApi.fetchDayStatisticByOrder(params).then((response) => {
        this.tableData = response.data.data.rows
        this.loading = false
        this.queryButton = false
@@ -171,9 +178,8 @@
      })
    },
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.siteName)
      let titleName = '站点风险数据详情'
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`)
      const encodedSiteName = encodeURIComponent(row.name)
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${row.lst}`)
    }
  }
}
@@ -184,11 +190,9 @@
      <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"
@@ -205,7 +209,6 @@
        ></ButtonExportExcel>
      </el-form-item>
    </el-form>

    <el-card v-show="!isNoData">
      <el-table
        :data="tableData"
@@ -213,6 +216,7 @@
        style="width: 100%"
        v-loading="loading"
        :cell-class-name="tableCellClassName"
      @sort-change="fetchData"
      >
        <el-table-column
          type="index"
@@ -225,24 +229,30 @@
        <el-table-column prop="name" label="点位名称" show-overflow-tooltip width="300">
            <template #default="{ row }">
              <el-button type="primary" text   @click="openDetail(row)">
              <span class="rank-site">{{row.name
              }}</span></el-button>
            <span class="rank-site">{{ row.name }}</span></el-button
          >
            </template>
        </el-table-column>

        <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-column prop="lst" label="监测日期" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayAvg" label="日平均值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="min" label="日最小值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="max" label="日最大值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayOnline" label="日在线率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayOnline) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayValid" label="日有效率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayValid) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayExceeding" label="日超标率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayExceeding) }}
        </template>
      </el-table-column>
      </el-table>

      <el-pagination

 src/views/risk_assessment/components/SiteDetail.vue

@@ -10,8 +10,6 @@
    return {
      siteName: '',
      month: '',
      // é¡µæ ‡é¢˜
      title:''
    }
  },
  watch: {},