From c2f95b0b9090a2394b5b068582b932a5e57b86aa Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 05 九月 2023 18:19:37 +0800
Subject: [PATCH] 雷达图 新增综合风险排名 数据接入配置
---
src/views/exception/FlightInspection.vue | 297 +++++++++++++++++++----------------------------------------
1 files changed, 95 insertions(+), 202 deletions(-)
diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue
index a64ed4e..b4d4d3c 100644
--- a/src/views/exception/FlightInspection.vue
+++ b/src/views/exception/FlightInspection.vue
@@ -1,25 +1,27 @@
<script>
-import InputSearch from '../../sfc/InputSearch.vue';
-import ExceptionType from '../../sfc/ExceptionType.vue';
-import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
-import DustExceptionText from '../../sfc/DustExceptionText.vue';
+import InputSearch from '@/sfc/InputSearch.vue';
+import ExceptionType from '@/sfc/ExceptionType.vue';
+import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
+import DustExceptionText from './components/DustExceptionText.vue';
import { useFetch } from '../../utils/fetch.js';
import { useCommonFunction } from '../../utils/common.js';
-import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'
-
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+import index from '@/utils/exception_common_function/index.js'
// 寮傚父鍥惧舰寮傛缁勪欢
const DustLineChart = defineAsyncComponent(() =>
- import('../../sfc/DustLineChart.vue')
+ import('./components/DustLineChart.vue')
);
-
+import exceptionApi from '@/api/exceptionApi.js';
import dayjs from 'dayjs';
export default {
components: {
ExceptionType,
- InputSearch,
+ // InputSearch,
TimeSelectWithShortCuts,
DustExceptionText,
DustLineChart,
+ ButtonClick,
AreaAndmonitorType
},
data() {
@@ -40,15 +42,17 @@
displayData: [],
// 琛ㄦ牸楂樺害
tableHeight: 400,
- // 琛ㄦ牸鏁版嵁
+ // 琛ㄦ牸鏄剧ず
+ isTableShow:false,
// 褰撳墠椤�
currentPage: 1,
// 姣忛〉鏉℃暟
pageSize: 20,
+ // 琛ㄦ牸鐨勬�昏褰曟暟
total: 0,
// 琛ㄦ牸鏌ヨ鏃犳暟鎹椂
- isNoData: false,
+ // isNoData: false,
// 瀵硅瘽妗嗘樉绀�
dialogTableVisible: false,
// 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
@@ -84,8 +88,6 @@
// 绔欑偣鎬绘暟閲�
siteTotal: 0,
- // 寮傚父鐨勭珯鐐规�绘暟閲�
- // exceptionSiteNum:0,
// 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁
tableCurrentRowData: null,
@@ -127,8 +129,9 @@
banTouch:0,
// 0浠ｈ〃鍒嗛〉锛�1浠ｈ〃涓嶅垎椤�
originClick:0
- }
-
+ },
+ // 鏉′欢鏌ヨ瀵硅瘽妗�
+ conditionDialogVisible:false
};
},
setup() {
@@ -169,7 +172,6 @@
},
// 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
-
beginTime() {
this.getShopNames();
},
@@ -181,31 +183,21 @@
}
},
mounted() {
- // 娴嬭瘯缁勫悎寮忓嚱鏁�
- // let param = {
- // siteName: '閲戝北鍖洪噾灞辨柊鍩嶫SC1-0401鍗曞厓1-11-01鍦板潡椤圭洰09',
- // beginTime: '2023-07-01 00:00:00',
- // endTime: '2023-07-10 00:00:00'
- // };
- // this.backData = this.request('/dust/history1', param);
- // console.log('鍘嗗彶鏁版嵁涓猴細', this.backData.value);
-
this.backExceptionDataAWeekAgo();
- // this.calTableHeight();
// 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺
this.getShopNames();
- // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
- // console.log('寮傚父鏁版嵁涓猴細',this.exception.exception0);
+ this.getSiteNume()
},
methods: {
+ // 鏀惧洖绔欑偣鎬绘暟閲�
+ getSiteNume(){
+ exceptionApi.getSitesNum().then(res => {
+ this.siteTotal = res.data.data.length
+ })
+
+ },
-
- // getExceptionSiteNum(){
- // this.$http.get('/dust/exceptionsitenum').then(result => {
- // this.exceptionSiteNum = result.data.data.length
- // })
- // },
/**
* description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹�
* @param锛�
@@ -226,35 +218,12 @@
this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData);
},
-
- /**
- * 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
- */
- descTenTime(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;
- },
/**
* description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁
*/
setOfflineTbleData(){
// 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓
- const abnormalTimeTenMinute = this.descTenTime(
+ const abnormalTimeTenMinute = index.descFiftyTime(
this.tableCurrentRowData.beginTime,
this.tableCurrentRowData.endTime
);
@@ -275,63 +244,9 @@
this.exceptionTotal = abnormalTimeTenMinute.length;
},
- /**
- * description锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�45鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗45鍒嗛挓鐨勬椂闂寸偣
- * @param锛� 寮傚父鐨勫紑濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬��
- * @returns锛氭暟缁勩�倀ime[0],time[1],time[2],time[3]鍒嗗埆浠ｈ〃寮傚父鍖洪棿鍓�45鍒嗛挓鐨勬椂闂寸偣锛屽墠15鍒嗛挓鐨勬椂闂寸偣,鍚�15鍒嗛挓鐨勬椂闂寸偣锛屽悗45鍒嗛挓鐨勬椂闂寸偣
- */
- before45AndAfter45(begin, end) {
- let time = [];
- // 鍓嶄竴娈电殑寮�濮嬫椂闂�
- const before45MinBegin = dayjs(begin)
- .subtract(45, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- // 鍓嶄竴娈电殑缁撴潫鏃堕棿
- const before15MinBegin = dayjs(begin)
- .subtract(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
+
- // 鍚庝竴娈电殑寮�濮嬫椂闂�
- const after15MinBegin = dayjs(end)
- .add(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- // 寰�鍚�40鍒嗛挓
- const after45MinEnd = dayjs(end)
- .add(45, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- time.push(before45MinBegin);
- time.push(before15MinBegin);
- time.push(after15MinBegin);
- time.push(after45MinEnd);
- return time;
- },
- /**
- * description锛氳繑鍥炴煇绔欑偣鍦ㄨ鏃舵鍘嗗彶鏁版嵁鐨刧et璇锋眰鍙傛暟
- * @param锛� 绔欑偣鍚嶇О锛� 寮�濮嬫椂闂达紝 缁撴潫鏃堕棿
- * @returns锛氬璞�
- */
- requestGetParms(name, begin, end) {
- return {
- siteName: name,
- beginTime: begin,
- endTime: end
- };
- },
- /**
- * description锛氱浉宸灏戜釜15鍒嗛挓 璁＄畻涓寘鎷紑濮嬫椂闂达紝缁撴潫鏃堕棿銆�
- * @param锛� 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿
- * @returns锛氭暣鏁�
- */
- diffFiftyMinutesNum(beginNormal, endNormal) {
- // 灏嗗紑濮嬫椂闂村拰缁撴潫鏃堕棿杞崲涓篸ayjs瀵硅薄
- const start = dayjs(beginNormal).subtract(15, 'minute');
- const end = dayjs(endNormal);
- // 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
- const diffInMinutes = end.diff(start, 'minute');
- const diffInTenMinutes = Math.floor(diffInMinutes / 15);
- return diffInTenMinutes;
- },
// 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂�
// 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂�
@@ -362,7 +277,7 @@
let timeAndValue = {};
// 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
- timeAndValue = this.keepContinuousByEachFiftyMinutes(
+ timeAndValue = index.keepContinuousByEachFiftyMinutes(
allTime[0],
allTime[3],
this.dialog.allExceptionTimeData
@@ -384,59 +299,7 @@
});
},
- /**
- * description锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
- * @param锛� 鍔犱笂鍓嶅悗鍖洪棿鐨勫紓甯告暟鎹紝鏃堕棿瀛楃涓�
- * @returns锛�
- */
- findTimeInExceptionData(data, time) {
- for (let i = 0; i < data.length; i++) {
- if (data[i] == null) {
- continue;
- }
- if (data[i]['lst'] == time) {
- return data[i]['dustValue'];
- }
- }
- return -1;
- },
- /**
- * description锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�15鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
- * @param锛� 鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
- * @returns锛氬璞°�傚寘鍚簡鎶樼嚎鍥剧殑x杞达紝y杞寸殑閰嶇疆鏁版嵁
- */
- keepContinuousByEachFiftyMinutes(
- intervalStarTime,
- intervalEndTime,
- headAndTailExceptionData
- ) {
- let xAxis = [];
- let yAxis = [];
- let obj = {};
- let current = intervalStarTime;
- let tail = dayjs(intervalEndTime)
- .add(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- while (current != tail) {
- let value = this.findTimeInExceptionData(
- headAndTailExceptionData,
- current
- );
- if (value != -1) {
- xAxis.push(current);
- yAxis.push(value);
- } else {
- xAxis.push(current);
- yAxis.push(null);
- }
- current = dayjs(current)
- .add(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- }
- obj['xAxis'] = xAxis;
- obj['yAxis'] = yAxis;
- return obj;
- },
+
/**
* description锛氱粯鍒舵姌绾垮浘
@@ -891,13 +754,13 @@
// beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣
- let beforeAndAfterTime = this.before45AndAfter45(
+ let beforeAndAfterTime = index.before45AndAfter45(
exceptionBeginTime,
exceptionEndTime
);
// 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛�
- let paramsAllTime = this.requestGetParms(
+ let paramsAllTime = index.requestGetParms(
this.tableCurrentRowData.name,
beforeAndAfterTime[0],
beforeAndAfterTime[3]
@@ -924,7 +787,7 @@
// 寰楀埌涓婁竴琛岀殑鏁版嵁
this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
- let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
+ let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
this.loading.preButton = true
this.$http
.get('/dust/history', { params: params })
@@ -960,7 +823,7 @@
// 寰楀埌涓婁竴琛岀殑鏁版嵁
this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
- let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
+ let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
this.loading.afterButton = true
this.$http
.get('/dust/history', { params: params })
@@ -1243,15 +1106,18 @@
this.displayData = response.data.data.rows;
this.loading.queryButton = false
this.loading.tableLoading = false;
+
if (response.data.data.total == 0) {
ElMessage('璇ユ椂娈垫棤鏁版嵁');
- this.isNoData = true;
+ this.isTableShow = false
return;
}
+ this.isTableShow = true
this.total = response.data.data.total;
// 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false;
});
+
+ this.conditionDialogVisible = false
},
/**
@@ -1279,9 +1145,10 @@
if (response.data.data.total == 0) {
ElMessage('璇ユ椂娈垫棤鏁版嵁');
- this.isNoData = true;
+ this.isTableShow = false
return;
}
+ this.isTableShow = true
this.total = response.data.data.total;
this.loading.tableLoading = false;
});
@@ -1350,7 +1217,16 @@
</script>
<template>
-
+ <el-button type="primary" @click="conditionDialogVisible = true">
+ 鎼滅储鏉′欢
+ </el-button>
+
+ <el-dialog
+ v-model="conditionDialogVisible"
+ title="Tips"
+ width="30%"
+ class="condition-dialog"
+ >
<el-row ref="h1">
<el-col>
<el-form :inline="true">
@@ -1358,36 +1234,56 @@
<el-form-item >
<AreaAndmonitorType ></AreaAndmonitorType>
</el-form-item>
- <el-form-item>
+
+ <!-- <el-form-item>
<InputSearch
- :isNeedDefaultSite="0"
+ isNeedDefaultSite="0"
@submit-value="(n) => (form.name = n)"
@submit-site-Nums="(n) => (siteTotal = n)"
>
</InputSearch>
- </el-form-item>
-
-
+ </el-form-item> -->
<el-form-item>
- <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
+ <TimeSelectWithShortCuts timeType="day" @submit-time="giveTime" ></TimeSelectWithShortCuts>
</el-form-item>
-
+
<el-form-item>
<ExceptionType
@submit-value="(n) => form.exceptionName = n"
></ExceptionType>
</el-form-item>
+
+
</div>
<div class="head-container-search">
<el-form-item>
- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button>
+ <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button> -->
+ <ButtonClick content="鍒嗘瀽" type="warning" :loading="loading.queryButton" @do-search="handleSubmit"></ButtonClick>
</el-form-item>
</div>
</el-form>
</el-col>
</el-row>
+
+
+<!--
+ <template #footer>
+
+ <span class="dialog-footer">
+ <el-button @click="dialogVisible = false">Cancel</el-button>
+ <el-button type="primary" @click="dialogVisible = false">
+ Confirm
+ </el-button>
+ </span>
+ </template> -->
+ </el-dialog>
+
+
+
+
+
<el-row class="head-describtion-text" ref="h2">
<el-row>
@@ -2005,13 +1901,13 @@
</el-col>
</el-row>
- <el-row>
- <el-col v-show="!isNoData">
+ <el-row v-show="isTableShow">
+ <el-col >
<el-table
ref="table"
:data="displayData"
:height="tableHeight"
- highlight-current-row="true"
+ :highlight-current-row="true"
size="default"
v-loading="loading.tableLoading"
border
@@ -2100,7 +1996,6 @@
</el-col>
</el-row>
- <el-empty v-show="isNoData" :image-size="200" />
<el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
<!-- 澶� -->
@@ -2243,9 +2138,19 @@
</template>
<style lang="scss" scoped>
+
.el-row {
margin-left: 10px;
}
+/* 涓嬫媺鑿滃崟寮�濮� */
+.example-showcase .el-dropdown-link {
+ cursor: pointer;
+ color: var(--el-color-primary);
+ display: flex;
+ align-items: center;
+}
+
+/* 涓嬫媺鑿滃崟缁撴潫 */
/* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */
.head-container-search {
@@ -2335,9 +2240,7 @@
/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */
-:deep(.el-dialog) {
- // 瀵硅瘽妗嗛珮搴�
-}
+
.diag-head {
// 瀵硅瘽妗嗗ご閮ㄥ尯鍩�
min-height: 200px;
@@ -2362,20 +2265,10 @@
border: 2px solid #7bc0fc;
}
.chart-jump-button {
- // 鈥樹笂涓�鏉♀�欙紝鈥樹笅涓�鏉♀�� 鎸夐挳
- // border: 1px solid #fdc2db;
- min-height: 30px;
- width: 200px;
- float: right;
+ display: flex;
+ justify-content: right;
}
-.line-chart {
- // 寮傚父鎶樼嚎鍥�
- width: 920px;
- height: 300px;
- margin-bottom: 20px;
- min-width: 600px;
-}
.mx-1 {
position: absolute;
left: 10px;
--
Gitblit v1.9.3