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

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,113 +1,119 @@
import * as XLSX from 'xlsx/xlsx.mjs';
export function useCommonFunction(){
    /**
     * description：判断起始时间跨度是否超过1个月
     * @param： å¼€å§‹æ—¶é—´ï¼Œç»“束时间
     * @createTime:2023-08-18
     * @returns：超过一个月返回true,不超过一个月则返回false
     */
import * as XLSX from 'xlsx/xlsx.mjs'
import dayjs from 'dayjs'

    function isExceedOneMonth(dateStr1, dateStr2) {
        // è¶…过一个月，返回True，否则返回False
        // å°†æ—¥æœŸå­—符串转为日期对象
        const date1 = new Date(dateStr1);
        const date2 = new Date(dateStr2);
  
        // èŽ·å–两个日期的年、月、日
        const year1 = date1.getFullYear();
        const month1 = date1.getMonth();
        const day1 = date1.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;
            }
          }
        } else if (Math.abs(year1 - year2) === 1) {
          // å¹´ä»½å·®å€¼ä¸º1，比较月份和日期
          if (
            (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
            (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
          ) {
            return true;
          }
export function useCommonFunction() {
  /**
   * description：判断起始时间跨度是否超过1个月
   * @param： å¼€å§‹æ—¶é—´ï¼Œç»“束时间
   * @createTime:2023-08-18
   * @returns：超过一个月返回true,不超过一个月则返回false
   */

  function isExceedOneMonth(dateStr1, dateStr2) {
    // è¶…过一个月，返回True，否则返回False
    // å°†æ—¥æœŸå­—符串转为日期对象
    const date1 = new Date(dateStr1)
    const date2 = new Date(dateStr2)

    // èŽ·å–两个日期的年、月、日
    const year1 = date1.getFullYear()
    const month1 = date1.getMonth()
    const day1 = date1.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
        }
  
        // é»˜è®¤è¿”回false，表示两个日期字符串不相差一个月
        return false;
      }

      /**
     * ç™¾åˆ†å·æ¯”较大小
     * @param： a是否大于b
     * @returns：大于，则返回true。否则返回false
     */
      function cmpp(a, b) {
        return Number(a.replace('%', '')) >= Number(b.replace('%', ''));
    } else if (Math.abs(year1 - year2) === 1) {
      // å¹´ä»½å·®å€¼ä¸º1，比较月份和日期
      if (
        (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
        (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
      ) {
        return true
      }
    }

      /**
     *导出为excel
     * @param： è¡¨æ ¼æ•°æ®ï¼Œå¾…导出的表格列，excel列，excel文件名
     * @returns
     */
     function exportToExcel(exportData,tableColumns,excelColumnsName,excelName='data.xlsx'){
      const itemsFormatted = exportData.map((item) => {
        const newItem = {};
        tableColumns.forEach((col) => {
          newItem[col] = item[col];
        });
        return newItem;
      });
      // åˆ›å»ºxlsx对象
      const xls = XLSX.utils.json_to_sheet(itemsFormatted);
     
     // ç¼–辑表头行       ä¿®æ”¹è¡¨å¤´
      excelColumnsName.forEach(item =>{
        xls[item[0]].v = item[1]
    // é»˜è®¤è¿”回false，表示两个日期字符串不相差一个月
    return false
  }

  /**
   * ç™¾åˆ†å·æ¯”较大小
   * @param： a是否大于b
   * @returns：大于，则返回true。否则返回false
   */
  function cmpp(a, b) {
    return Number(a.replace('%', '')) >= Number(b.replace('%', ''))
  }

  /**
   *导出为excel
   * @param： è¡¨æ ¼æ•°æ®ï¼Œå¾…导出的表格列，excel列，excel文件名
   * @returns
   */
  function exportToExcel(exportData, tableColumns, excelColumnsName, excelName = 'data.xlsx') {
    const itemsFormatted = exportData.map((item) => {
      const newItem = {}
      tableColumns.forEach((col) => {
        newItem[col] = item[col]
      })
      // åˆ›å»ºworkbook，并把sheet添加进去
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
      // å°†workbook转为二进制xlsx文件并下载
      XLSX.writeFile(wb, excelName);
    
    }
      return newItem
    })
    // åˆ›å»ºxlsx对象
    const xls = XLSX.utils.json_to_sheet(itemsFormatted)

     /**
     * description：返回时间数组，间隔15分钟。
     * @param： å¼‚常的开始,异常结束时间
     * @createTime:2023-08-17
     * @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 = [];
      if (begin == end) {
        time.push(begin);
        return time;
      }
      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);
      return time;
    }
    // ç¼–辑表头行       ä¿®æ”¹è¡¨å¤´
    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')
    // å°†workbook转为二进制xlsx文件并下载
    XLSX.writeFile(wb, excelName)
  }

    return {isExceedOneMonth,cmpp,exportToExcel,descFiftyTime}
  /**
   * description：返回时间数组，间隔15分钟。
   * @param： å¼‚常的开始,异常结束时间
   * @createTime:2023-08-17
   * @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 = []
    if (begin == end) {
      time.push(begin)
      return time
    }
    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)
    return time
  }

  /**
   * æ ¼å¼åŒ–为百分号
   * @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,92 +178,95 @@
      })
    },
    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}`)
    }
  }
}
</script>

<template>
    <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-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 width="300">
            <template #default="{ row }">
              <el-button type="primary" text   @click="openDetail(row)">
              <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>

      <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-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-card v-show="!isNoData">
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%"
      v-loading="loading"
      :cell-class-name="tableCellClassName"
      @sort-change="fetchData"
    >
      <el-table-column
        type="index"
        prop="name"
        label="序号"
        :index="indexMethod"
        fixed
        show-overflow-tooltip
      />
    </el-card>
    <el-empty v-show="isNoData" :image-size="200" />
      <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
          >
        </template>
      </el-table-column>
      <el-table-column prop="mnCode" label="设备编码" 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
      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>

 src/views/risk_assessment/components/SiteDetail.vue

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