From 348d29c1cd601e269eae92e6ec55d31e77b3ecd0 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 23 十一月 2023 13:21:46 +0800
Subject: [PATCH] 修改指标排序界面相关逻辑
---
src/views/risk_assessment/components/SiteDetail.vue | 2
src/utils/common.js | 214 +++++++++++++-------------
src/api/index.js | 16 -
src/api/statistic/statisticApi.js | 27 +++
src/views/risk_assessment/DataIndexRank.vue | 192 ++++++++++++-----------
src/router/index.js | 8 -
6 files changed, 245 insertions(+), 214 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index e4deb55..2ae6d75 100644
--- a/src/api/index.js
+++ b/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 }
diff --git a/src/api/statistic/statisticApi.js b/src/api/statistic/statisticApi.js
new file mode 100644
index 0000000..bb5d1d2
--- /dev/null
+++ b/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 })
+ }
+}
diff --git a/src/router/index.js b/src/router/index.js
index 4473a9a..2ffa963 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/utils/common.js b/src/utils/common.js
index f88dfe1..54f6dae 100644
--- a/src/utils/common.js
+++ b/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,涓嶈秴杩囦竴涓湀鍒欒繑鍥瀎alse
- */
+import * as XLSX from 'xlsx/xlsx.mjs'
+import dayjs from 'dayjs'
- function isExceedOneMonth(dateStr1, dateStr2) {
- // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse
- // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄
- 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,涓嶈秴杩囦竴涓湀鍒欒繑鍥瀎alse
+ */
+
+ function isExceedOneMonth(dateStr1, dateStr2) {
+ // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse
+ // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄
+ 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锛氬ぇ浜庯紝鍒欒繑鍥瀟rue銆傚惁鍒欒繑鍥瀎alse
- */
- 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
}
+ }
- /**
- *瀵煎嚭涓篹xcel
- * @param锛� 琛ㄦ牸鏁版嵁锛屽緟瀵煎嚭鐨勮〃鏍煎垪锛宔xcel鍒楋紝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锛氬ぇ浜庯紝鍒欒繑鍥瀟rue銆傚惁鍒欒繑鍥瀎alse
+ */
+ function cmpp(a, b) {
+ return Number(a.replace('%', '')) >= Number(b.replace('%', ''))
+ }
+
+ /**
+ *瀵煎嚭涓篹xcel
+ * @param锛� 琛ㄦ牸鏁版嵁锛屽緟瀵煎嚭鐨勮〃鏍煎垪锛宔xcel鍒楋紝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锛屽苟鎶妔heet娣诲姞杩涘幓
- const wb = XLSX.utils.book_new();
- XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
- // 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
- 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锛屽苟鎶妔heet娣诲姞杩涘幓
+ const wb = XLSX.utils.book_new()
+ XLSX.utils.book_append_sheet(wb, xls, 'Sheet1')
+ // 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
+ 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 }
}
-
diff --git a/src/views/risk_assessment/DataIndexRank.vue b/src/views/risk_assessment/DataIndexRank.vue
index ab31486..04cbec1 100644
--- a/src/views/risk_assessment/DataIndexRank.vue
+++ b/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 姝ｅ簭锛宒escending 闄嶅簭
+ 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>
diff --git a/src/views/risk_assessment/components/SiteDetail.vue b/src/views/risk_assessment/components/SiteDetail.vue
index aba9e90..56c77b5 100644
--- a/src/views/risk_assessment/components/SiteDetail.vue
+++ b/src/views/risk_assessment/components/SiteDetail.vue
@@ -10,8 +10,6 @@
return {
siteName: '',
month: '',
- // 椤垫爣棰�
- title:''
}
},
watch: {},
--
Gitblit v1.9.3