From 28cbf4f043cfc0a4621cc8683ba66bcbdd350eca Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期五, 01 十二月 2023 12:02:34 +0800 Subject: [PATCH] 1.增加了风险模型的弹出框组件 2.增加了用户可配置的页面 --- src/api/setting/requestTaskSetting.js | 14 src/api/setting/exceptionSetting.js | 14 src/api/audit/submitApi.js | 2 src/views/exception/FlightInspection.vue | 1330 +++++++++++++++++++++++++++++ src/views/data_management/ParameterConfiguration.vue | 215 ++++ src/sfc/TimeSinglePicker.vue | 65 + src/router/index.js | 10 /dev/null | 64 - src/views/exception/components/DustLineChart.vue | 202 ++-- src/views/data_management/components/CompEditRequest.vue | 248 +++++ src/utils/chartFunction/exceptionOption.js | 8 src/components/layout/AppAside.vue | 13 src/views/data_management/components/CompEditException.vue | 157 +++ vite.config.js | 3 src/views/exception/components/CompDialogDetail.vue | 350 +++++++ src/views/exception/components/CompFlightInspection.vue | 5 16 files changed, 2,513 insertions(+), 187 deletions(-) diff --git a/src/api/audit/submitApi.js b/src/api/audit/submitApi.js index 0d13a83..88b5ce1 100644 --- a/src/api/audit/submitApi.js +++ b/src/api/audit/submitApi.js @@ -14,6 +14,8 @@ exceptionId:id, auditStatus:status } + + if(reviewer == '' || reviewer == null){ params.checker = 'admin' }else{ diff --git a/src/api/setting/exceptionSetting.js b/src/api/setting/exceptionSetting.js new file mode 100644 index 0000000..53a1b46 --- /dev/null +++ b/src/api/setting/exceptionSetting.js @@ -0,0 +1,14 @@ +import { $http } from '@/api/index.js'; + +export default { + /** + * 鎻愪氦 鏁版嵁鑾峰彇鐨勯厤缃弬鏁颁慨鏀� + * @param锛� 閰嶇疆琛ㄥ搴旂殑瀛楁瀵硅薄 + * @returns锛� + */ + submitExceptionSetting(params){ + console.log('寮傚父閰嶇疆鎻愪氦鐨勫弬鏁颁负锛�',params); + return $http.post('/dust/requestSetting/modify',params) + } + +} \ No newline at end of file diff --git a/src/api/setting/requestTaskSetting.js b/src/api/setting/requestTaskSetting.js new file mode 100644 index 0000000..1013625 --- /dev/null +++ b/src/api/setting/requestTaskSetting.js @@ -0,0 +1,14 @@ +import { $http } from '@/api/index.js'; + +export default { + /** + * 鎻愪氦 鏁版嵁鑾峰彇鐨勯厤缃弬鏁颁慨鏀� + * @param锛� 閰嶇疆琛ㄥ搴旂殑瀛楁瀵硅薄 + * @returns锛� + */ + submitRequestSetting(params){ + console.log('璇锋眰閰嶇疆鎻愪氦鐨勫弬鏁颁负锛�',params); + // return $http.post('/dust/requestSetting/modify',params) + } + +} \ No newline at end of file diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue index 41853ac..60e0343 100644 --- a/src/components/layout/AppAside.vue +++ b/src/components/layout/AppAside.vue @@ -136,10 +136,15 @@ 鍘嗗彶鏁版嵁绠$悊 </el-menu-item> - <!-- <el-menu-item index="/management" > - <el-icon><i-ep-Histogram /></el-icon> - 鏁版嵁鎺ュ叆绠$悊 - </el-menu-item> --> + <el-menu-item index="/config" v-show="menu[6].avalue" @click="changeIcon(6)"> + <img src="@/assets/generalModel.png" height="23"> + 鍙傛暟閰嶇疆 + </el-menu-item> + + <el-menu-item index="/config" v-show="!menu[6].avalue" @click="changeIcon(6)"> + <img src="@/assets/generalModel2.png" height="23"> + 鍙傛暟閰嶇疆 + </el-menu-item> <!-- <el-menu-item index="report" > diff --git a/src/router/index.js b/src/router/index.js index d47d617..3201d5d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -63,12 +63,12 @@ component: () => import('@/views/data_management/DataAccessManagement.vue') }, - // 涓氬姟鎶ヨ〃 + // 鍙傛暟閰嶇疆 { - path: '/report', - name: 'report', - meta: { title: '涓氬姟鎶ヨ〃' }, - component: () => import('@/views/data_management/BusinessReport.vue') + path: '/config', + name: 'config', + meta: { title: '鍙傛暟閰嶇疆' }, + component: () => import('@/views/data_management/ParameterConfiguration.vue') }, // 鏁版嵁鎺ュ叆閰嶇疆 diff --git a/src/sfc/TimeSinglePicker.vue b/src/sfc/TimeSinglePicker.vue new file mode 100644 index 0000000..49e4819 --- /dev/null +++ b/src/sfc/TimeSinglePicker.vue @@ -0,0 +1,65 @@ +<!-- 鍗曚釜 鏃ユ湡鏃堕棿閫夋嫨鍣ㄧ粍浠� 甯︽棩鍛ㄦ湀蹇嵎閫夐」 + 鍓嶄竴澶╂槸褰撳墠鏃堕棿鐨勫墠涓�澶╃殑00鐐瑰埌23锛�59锛�59 + 鍓嶄竷澶� 鍜� 涓婁竴涓湀鍚屾牱 + 浼氬皢鍒濆榛樿鏃堕棿锛堜竴鍛ㄥ墠锛夊拰鏀瑰彉鐨勬椂闂撮�氳繃浜嬩欢鈥榮ubmitTime鈥欎紶閫掔粰鐖剁粍浠� + + 鍒濆娓叉煋鏃跺氨灏嗘椂闂翠紶閫掔粰鐖剁粍浠讹細 + ** + 鍦ㄧ埗缁勪欢涓缃� + <TimeSinglePicker @submit-time="(n) => (form.staticsDailyTime = n)" :selected-time="form.staticsDailyTime"/> + *** +--> + +<script> +import dayjs from 'dayjs' +export default { + props: { + // 鐖剁粍浠朵紶鍏ョ殑鏃堕棿 + selectedTime: { + type: String, + default: '' + }, + // 鏄惁璁剧疆鍙灞炴�� + readOnly: { + type: Boolean, + default: false + } + }, + emits: ['submitTime'], + data() { + return { + time: '', + shortcuts: [] + } + }, + // watch: { + // selectedTime(newVal) { + // console.log('time', this.selectedTime) + // if (newVal != '') { + // this.time = this.selectedTime + // } + // } + // }, + mounted() { + console.log('time', this.selectedTime) + + this.time = this.selectedTime + }, + methods: { + + } +} +</script> + +<template> + <el-date-picker + v-model="time" + type="datetime" + placeholder="閫夋嫨鏃堕棿" + :shortcuts="shortcuts" + value-format="YYYY-MM-DD HH:mm:ss" + @change="$emit('submitTime', time)" + /> +</template> + +<style scoped></style> diff --git a/src/utils/chartFunction/exceptionOption.js b/src/utils/chartFunction/exceptionOption.js index 65ff4c5..bc7133f 100644 --- a/src/utils/chartFunction/exceptionOption.js +++ b/src/utils/chartFunction/exceptionOption.js @@ -8,7 +8,7 @@ * @param锛氬紓甯哥被鍨� * @returns锛� */ - setExceptionChartOption( + setExceptionChartOption({ xData, yData, exceptionBeginTime, @@ -19,6 +19,7 @@ areaObj, lineColor, exceptionType + } ) { switch (exceptionType) { case '0': @@ -303,7 +304,7 @@ name: '棰楃矑鐗╂祿搴�', type: 'line', data: yData.map((item) => { - if (item <= 0.01) { + if (item <= 0.02) { return { value: item, itemStyle: { @@ -333,9 +334,8 @@ { name: '鏁版嵁瓒呬綆', type: 'average', - yAxis: 0.01, + yAxis: 0.02, lineStyle: { - // color: '#ff0000' color: 'red' } } diff --git a/src/views/data_management/BusinessReport.vue b/src/views/data_management/BusinessReport.vue deleted file mode 100644 index 93b0764..0000000 --- a/src/views/data_management/BusinessReport.vue +++ /dev/null @@ -1,64 +0,0 @@ -<script> -import MonthSelect from '@/sfc/MonthSelect.vue' -import exceptionApi from '@/api/exceptionApi.js' -import dayjs from 'dayjs' -export default { - components: { - MonthSelect - }, - data() { - return { - month: '' - } - }, - mounted() { - this.get() - }, - methods: { - giveTime(val) { - //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) - this.month = dayjs(val).format('YYYY-MM-DD HH:mm:ss') - }, - async getExceptionData() { - await exceptionApi - .exceptiondata1({ - siteName: '', - beginTime: '2023-07-01 00:00:00', - endTime: '2023-07-05 00:00:00' - }).then(res=>{ - console.log(res); - exceptionApi - .exceptiondata1({ - siteName: '', - beginTime: '2023-07-01 00:00:00', - endTime: '2023-07-05 00:00:00' - }) - // .then((res) => { - // const data = res.data.data - // console.log('data', data) - - // }) - return a - }) - - - }, - get() { - this.getExceptionData().then( b=>{ - console.log('b',b.data.data); - }) - - } - } -} -</script> - -<template> - <div> - 涓氬姟鎶ヨ〃 - <MonthSelect @submit-value="giveTime"></MonthSelect> - {{ month }} - </div> -</template> - -<style scoped></style> diff --git a/src/views/data_management/ParameterConfiguration.vue b/src/views/data_management/ParameterConfiguration.vue new file mode 100644 index 0000000..fbf1cd5 --- /dev/null +++ b/src/views/data_management/ParameterConfiguration.vue @@ -0,0 +1,215 @@ +<script> +import TimeSinglePicker from '@/sfc/TimeSinglePicker.vue' +import CompEditRequest from '@/views/data_management/components/CompEditRequest.vue' +import CompEditException from '@/views/data_management/components/CompEditException.vue' +export default { + components: { + TimeSinglePicker, + CompEditRequest, + CompEditException + }, + data() { + return { + activeName: 'first', + // 瀵硅瘽妗嗘樉绀� + dialog:{ + formRequestVisible: false, + formExceptionVisible: false + }, + request: [ + { + user: 'admin', + updateTime: '2023-10-10 09:16:41', + region: '閲戝北鍖�', + version: '1.0', + requestStartTime: '2023-10-12 08:43:00', + requestEndTime: null, + requestIntervalSeconds: 43200, + requestRangeHour: 8, + requestRangeIntervalSeconds: 5, + requestFailWaitSeconds: 120, + requestRetryTimes: 4, + requestCookieValidDuration: 48, + staticsDailyTime: '2023-10-11 09:00:00', + staticsMonthlyTime: '2023-10-01 10:00:00', + loginFailWaitSeconds: 5, + loginRetryTimes: 5, + taskRetryWaitSeconds: 120, + firstRequestOffsetDays: 30 + } + ], + exceptionSetting: [{ + user: 'admin', + updateTime: '2023-10-10 09:16:41', + region: '閲戝北鍖�', + version: '1.0', + missDataMinutes: 45, + dataLow: 0.02, + longTimeNoChange: 5, + mutationNum: 2, + mutationRate: 1, + nearExceedLowValue: 0.7, + nearExceedHighValue: 1, + nearExceedNum: 4, + dayExceedBorderlineLowNum: 6, + dayExceedBorderlineHighNum: 7, + changeTrendGroup: 12, + changeTrendInterval: 12, + changeTrendRate: 1, + changeTrendTimes: 3, + exceedingStandard: 1 + }], + form_1: { + user: '11', + requestStartTime: '', + requestEndTime: '', + staticsDailyTime: '', + staticsMonthlyTime: '' + }, + loading:false, + + } + }, + + mounted() {}, + methods: { + handleClick(tab, event) { + // console.log(tab, event) + }, + fetchData(){ + console.log('鑾峰彇琛ㄦ牸鏁版嵁'); + this.loading = true + setTimeout(() => { + this.loading = false + }, 700); + }, + // 鍙栨秷 + cancel_1() { + this.dialogTableVisible = false + }, + // 鎻愪氦 + submit() { + this.dialogTableVisible = false + }, + render() { + ElMessageBox.alert( + h('div', ['this is', h('em', { style: { color: 'teal', fontSize: '14px' } }, 'Vnode')]) + ) + }, + + } +} +</script> + + +<template> + <el-row> + <el-col> + <em>鍙傛暟閰嶇疆</em> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="鏁版嵁鑾峰彇" name="first" > + <div>灞曠ず</div> + <div>淇敼</div> + <el-table :data="request" border> + <el-table-column prop="user" label="鐢ㄦ埛鍚�"> </el-table-column> + <el-table-column prop="updateTime" label="鏇存柊鏃堕棿"> </el-table-column> + <el-table-column prop="region" label="鍖哄煙"> </el-table-column> + <el-table-column prop="version" label="鐗堟湰"> </el-table-column> + <el-table-column prop="requestStartTime" label="鏁版嵁鑾峰彇寮�濮嬫椂闂�"> </el-table-column> + <el-table-column prop="requestEndTime" label="鏁版嵁鑾峰彇缁撴潫鏃堕棿"> </el-table-column> + <el-table-column prop="requestIntervalSeconds" label="鏁版嵁鑾峰彇棰戠巼"> </el-table-column> + <el-table-column prop="requestRangeHour" label="浠诲姟鍒嗘鏃堕暱"> </el-table-column> + <el-table-column prop="requestRangeIntervalSeconds" label="鍒嗘鎵ц鏃剁殑姣忔鐨勯棿闅旀椂闂�"> </el-table-column> + <el-table-column prop="requestFailWaitSeconds" label="鑾峰彇鏁版嵁浠诲姟寮傚父鏃跺啀娆″皾璇曢棿闅�"> </el-table-column> + <el-table-column prop="requestRetryTimes" label="鑾峰彇鏁版嵁澶辫触鏃跺啀娆″皾璇曠殑鎬绘鏁�"> </el-table-column> + <el-table-column prop="requestCookieValidDuration" label="cookie鏈夋晥鏃跺父闀�"> </el-table-column> + <el-table-column prop="staticsDailyTime" label="鏃ョ粺璁℃墽琛屾椂闂�"> </el-table-column> + <el-table-column prop="staticsMonthlyTime" label="鏈堢粺璁℃墽琛屾椂闂�"> </el-table-column> + <el-table-column prop="loginFailWaitSeconds" label="鐧诲綍澶辫触绛夊緟鏃堕暱"> </el-table-column> + <el-table-column prop="loginRetryTimes" label="鐧诲綍澶辫触灏濊瘯娆℃暟"> </el-table-column> + <el-table-column prop="taskRetryWaitSeconds" label="鏁版嵁鑾峰彇浠诲姟閲嶆柊寮�濮嬪皾璇曠瓑寰呮椂闂�"> </el-table-column> + <el-table-column prop="firstRequestOffsetDays" label=" 鏁版嵁鑾峰彇寮�濮嬫椂闂寸浉瀵瑰綋鏃ュ線鍓嶅亸绉�"> </el-table-column> + </el-table> + <el-button type="primary" size="small" @click="dialog.formRequestVisible = !dialog.formRequestVisible"> + 淇敼閰嶇疆</el-button + > + + <CompEditRequest v-model="dialog.formRequestVisible" :tableData="request[0]"> + </CompEditRequest> + + </el-tab-pane> + + + <el-tab-pane label="寮傚父鍒嗘瀽" name="second" + ><div>灞曠ず</div> + <el-table :data="exceptionSetting" border> + <el-table-column prop="user" label="鐢ㄦ埛鍚�"> </el-table-column> + <el-table-column prop="updateTime" label="鏇存柊鏃堕棿"> </el-table-column> + <el-table-column prop="region" label="鍖哄煙"> </el-table-column> + <el-table-column prop="version" label="鐗堟湰"> </el-table-column> + + <el-table-column prop="missDataMinutes" label="鏁版嵁鑾峰彇寮�濮嬫椂闂�"> </el-table-column> + <el-table-column prop="dataLow" label="鏁版嵁鑾峰彇缁撴潫鏃堕棿"> </el-table-column> + <el-table-column prop="longTimeNoChange" label="鏁版嵁鑾峰彇棰戠巼"> </el-table-column> + <el-table-column prop="mutationNum" label="浠诲姟鍒嗘鏃堕暱"> </el-table-column> + <el-table-column prop="mutationRate" label="鍒嗘鎵ц鏃剁殑姣忔鐨勯棿闅旀椂闂�"> </el-table-column> + <el-table-column prop="nearExceedLowValue" label="鑾峰彇鏁版嵁浠诲姟寮傚父鏃跺啀娆″皾璇曢棿闅�"> </el-table-column> + <el-table-column prop="nearExceedHighValue" label="鑾峰彇鏁版嵁澶辫触鏃跺啀娆″皾璇曠殑鎬绘鏁�"> </el-table-column> + <el-table-column prop="nearExceedNum" label="cookie鏈夋晥鏃跺父闀�"> </el-table-column> + <el-table-column prop="dayExceedBorderlineLowNum" label="鏃ョ粺璁℃墽琛屾椂闂�"> </el-table-column> + <el-table-column prop="dayExceedBorderlineHighNum" label="鏈堢粺璁℃墽琛屾椂闂�"> </el-table-column> + <el-table-column prop="changeTrendGroup" label="鐧诲綍澶辫触绛夊緟鏃堕暱"> </el-table-column> + <el-table-column prop="changeTrendInterval" label="鐧诲綍澶辫触灏濊瘯娆℃暟"> </el-table-column> + <el-table-column prop="changeTrendRate" label="鏁版嵁鑾峰彇浠诲姟閲嶆柊寮�濮嬪皾璇曠瓑寰呮椂闂�"> </el-table-column> + <el-table-column prop="changeTrendTimes" label=" 鏁版嵁鑾峰彇寮�濮嬫椂闂寸浉瀵瑰綋鏃ュ線鍓嶅亸绉�"> </el-table-column> + <el-table-column prop="exceedingStandard" label=" 鏁版嵁鑾峰彇寮�濮嬫椂闂寸浉瀵瑰綋鏃ュ線鍓嶅亸绉�"> </el-table-column> + </el-table> + + + <div>淇敼</div> + + <CompEditException v-model="dialog.formExceptionVisible" ></CompEditException> + + <el-button type="primary" size="small" @click="dialog.formExceptionVisible = !dialog.formExceptionVisible"> + 淇敼閰嶇疆</el-button + > + </el-tab-pane> + </el-tabs> + + <!-- <el-button @click="render"> 娓叉煋html</el-button> --> + <!-- <el-button @click="addObj"> 澧炲姞瀵硅薄</el-button> --> + </el-col> + </el-row> +</template> + +<style scoped> +.el-row { + margin: 20px; +} +em { + font-size: 30px; + color: #333333; +} +</style> + +<!-- <script> + export default { + data() { + return{ + inputValue:null + } + }, + mounted() { + + }, + methods: { + + } +} +</script> + +<template> + {{inputValue}} + 杈撳叆<el-input v-model.number="inputValue" maxlength="10"> + </el-input> +</template> --> diff --git a/src/views/data_management/components/CompEditException.vue b/src/views/data_management/components/CompEditException.vue new file mode 100644 index 0000000..4e3d846 --- /dev/null +++ b/src/views/data_management/components/CompEditException.vue @@ -0,0 +1,157 @@ +<script> +import TimeSinglePicker from '@/sfc/TimeSinglePicker.vue' +export default { + props: ['modelValue'], + emits: ['update:modelValue'], + components: { + TimeSinglePicker + }, + computed: { + visible: { + get() { + return this.modelValue + }, + set(value) { + this.$emit('update:modelValue', value) + } + } + }, + data() { + return { + form: { + user: 'admin', + updateTime: '2023-10-10 09:16:41', + region: '閲戝北鍖�', + version: '1.0', + + missDataMinutes: 45, + dataLow: 0.02, + longTimeNoChange: 5, + mutationNum: 2, + mutationRate: 1, + nearExceedLowValue: 0.7, + nearExceedHighValue: 1, + nearExceedNum: 4, + dayExceedBorderlineLowNum: 6, + dayExceedBorderlineHighNum: 7, + changeTrendGroup: 12, + changeTrendInterval: 12, + changeTrendRate: 1, + changeTrendTimes: 3, + exceedingStandard: 1 + }, + describe: null + } + }, + + mounted() { + this.operation() + }, + methods: { + // 鎻愪氦 + submit() { + this.visible = false + }, + // 鍙栨秷 + cancel_1() { + this.visible = false + }, + // 瀵硅薄澶勭悊 + operation() { + // console.log(Object.keys(this.form)); + // console.log(Object.values(this.form)); + console.log(Object.entries(this.form)) + let temp = [] + let arr = Object.entries(this.form) + for (let item of arr) { + let obj = {} + obj.label = item[0] + obj.value = item[1] + temp.push(obj) + } + this.describe = temp + console.log(temp) + } + } +} +</script> +<template> + <el-dialog v-model="visible" title="璇锋眰鏁版嵁" align-center> + <el-form :model="form" label-width="120px"> + <el-form-item label="鐢ㄦ埛鍚�"> + <el-input v-model="form.user" disabled /> + </el-form-item> + <el-form-item label="寮�濮嬫椂闂�"> + <TimeSinglePicker @submit-time="(n) => (form.requestStartTime = n)"></TimeSinglePicker> + </el-form-item> + <el-form-item label="缁撴潫鏃堕棿"> + <TimeSinglePicker @submit-time="(n) => (form.requestEndTime = n)"></TimeSinglePicker> + </el-form-item> + <el-form-item label="鑾峰彇棰戠巼"> + <el-input-number v-model="num" :min="1" :max="24" @change="handleChange" /> + </el-form-item> + <el-form-item label="鍒嗘鏃堕暱"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + <el-form-item label="鍒嗘鎵ц鏃剁殑姣忔鐨勯棿闅旀椂闂�"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + <el-form-item label="鑾峰彇鏁版嵁浠诲姟寮傚父鏃跺啀娆″皾璇曢棿闅�"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + <el-form-item label="鑾峰彇鏁版嵁澶辫触鏃跺啀娆″皾璇曠殑鎬绘鏁�"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + <el-form-item label="鏃ョ粺璁�"> + <TimeSinglePicker @submit-time="(n) => (form.staticsDailyTime = n)" /> + </el-form-item> + <el-form-item label="鏈堢粺璁�"> + <TimeSinglePicker @submit-time="(n) => (form.staticsMonthlyTime = n)" /> + </el-form-item> + <el-form-item label="鐧诲綍澶辫触绛夊緟鏃堕暱"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + <el-form-item label="鐧诲綍澶辫触灏濊瘯娆℃暟"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + <el-form-item label="浠诲姟閲嶆柊寮�濮嬪皾璇曠瓑寰呮椂闂�"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + <el-form-item label="鏁版嵁鑾峰彇寮�濮嬫椂闂寸浉瀵瑰綋鏃ュ線鍓嶅亸绉�"> + <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> + </el-form-item> + </el-form> + + <template #footer> + <el-button @click="cancel_1">鍙栨秷</el-button> + <el-button type="primary" @click="submit">鎻愪氦</el-button> + </template> + </el-dialog> + + <!-- <el-button @click="operation">瀵硅薄澶勭悊</el-button> --> + + <el-descriptions title="寮傚父鍒嗘瀽閰嶇疆" :column="4" size="large" border> + <el-descriptions-item + v-for="item in describe" + :key="item.label" + :label="item.label" + label-align="left" + align="center" + class-name="content-text" + label-class-name="label-text" + > + {{ item.value }} + </el-descriptions-item> + </el-descriptions> +</template> + +<style scoped> +:deep(.label-text) { + font-size: 14px !important; + font-weight: bold !important; + color: #333333 !important; +} +:deep(.content-text) { + color: #333333 !important; +} +</style> diff --git a/src/views/data_management/components/CompEditRequest.vue b/src/views/data_management/components/CompEditRequest.vue new file mode 100644 index 0000000..65edd1b --- /dev/null +++ b/src/views/data_management/components/CompEditRequest.vue @@ -0,0 +1,248 @@ +<script> +import TimeSinglePicker from '@/sfc/TimeSinglePicker.vue' +import requestTaskSetting from '@/api/setting/requestTaskSetting.js' +export default { + components: { + TimeSinglePicker + }, + props: { + modelValue: { + type: Boolean, + default: false + }, + tableData: { + type: Object, + default: {} + } + }, + emits: ['update:modelValue'], + + computed: { + value: { + get() { + return this.modelValue + }, + set(value) { + this.$emit('update:modelValue', value) + } + }, + formDataAfterCal() { + return { + user: this.form.user, + updateTime: this.form.updateTime, + region: this.form.region, + version: this.form.version, + requestStartTime: this.form.requestStartTime, + requestEndTime: this.form.requestEndTime, + + requestIntervalSeconds: this.form.requestIntervalSeconds * 3600, + requestRangeHour: this.form.requestRangeHour, + requestRangeIntervalSeconds: this.form.requestRangeIntervalSeconds, + requestFailWaitSeconds: this.form.requestFailWaitSeconds, + requestRetryTimes: this.form.requestRetryTimes, + requestCookieValidDuration: this.form.requestCookieValidDuration, + staticsDailyTime: this.form.staticsDailyTime, + staticsMonthlyTime: this.form.staticsMonthlyTime, + loginFailWaitSeconds: this.form.loginFailWaitSeconds, + loginRetryTimes: this.form.loginRetryTimes, + taskRetryWaitSeconds: this.form.taskRetryWaitSeconds, + firstRequestOffsetDays: this.form.firstRequestOffsetDays + } + } + }, + + data() { + return { + form: { + user: 'admin', + updateTime: '2023-10-10 09:16:41', + region: '閲戝北鍖�', + version: '1.0', + requestStartTime: '2023-10-12 08:43:00', + requestEndTime: null, + requestIntervalSeconds: 12, + requestRangeHour: 8, + requestRangeIntervalSeconds: 5, + requestFailWaitSeconds: 120, + requestRetryTimes: 4, + requestCookieValidDuration: 48, + staticsDailyTime: '2023-10-11 09:00:00', + staticsMonthlyTime: '2023-10-01 10:00:00', + loginFailWaitSeconds: 5, + loginRetryTimes: 5, + taskRetryWaitSeconds: 120, + firstRequestOffsetDays: 30 + }, + rules: { + requestIntervalSeconds: [{ validator: this.checkRequestIntervalSeconds, trigger: 'blur' }], + requestRangeHour: [ + { type: 'number', pattern: '/^\d+$/', message: '璇疯緭鍏ユ暟瀛�', trigger: 'blur' } + // {pattern:'/^[0-9]+$/'} + ] + // requestRangeIntervalSeconds: [{ validator: this.checkRequestRangeIntervalSeconds, trigger: 'blur' }], + // requestFailWaitSeconds: [{ validator: this.checkRequestFailWaitSeconds, trigger: 'blur' }], + // requestRetryTimes: [{ validator: this.checkRequestRetryTimes, trigger: 'blur' }], + // loginFailWaitSeconds: [{ validator: this.checkLoginFailWaitSeconds, trigger: 'blur' }], + // loginRetryTimes: [{ validator: this.checkLoginRetryTimes, trigger: 'blur' }], + // taskRetryWaitSeconds: [{ validator: this.checkTaskRetryWaitSeconds, trigger: 'blur' }], + // firstRequestOffsetDays: [{ validator: this.checkFirstRequestOffsetDays, trigger: 'blur' }], + } + } + }, + + mounted() { + // const { ...temp } = this.tableData + // this.form = temp + }, + methods: { + // 鎻愪氦 + /* submitForm() { + // 鍙戦�佷慨鏀圭殑璇锋眰 + requestTaskSetting.submitRequestSetting(this.form) + + this.$message.success('鎻愪氦鎴愬姛') + + + this.value = false + + + + }, */ + + async submitForm(formEl) { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + console.log('submit!') + } else { + console.log('error submit!', fields) + } + }) + }, + + // 鍙栨秷 + cancel_1() { + this.value = false + }, + + checkRequestIntervalSeconds(rule, value, callback) { + if (!value) { + return callback(new Error('璇疯緭鍏ユ湁鏁堝��')) + } + setTimeout(() => { + if (!Number.isInteger(value)) { + callback(new Error('璇疯緭鍏ユ暟瀛�')) + } else { + if (value < 2 || value > 24) { + callback(new Error('鑼冨洿鍦�2~24')) + } else { + callback() + } + } + }, 300) + } + } +} +</script> +<template> + <el-dialog v-model="value" title="鏁版嵁鑾峰彇閰嶇疆鍙傛暟淇敼" close-delay="200" align-center> + <el-form :model="form" ref="ruleFormRef" label-width="210px" status-icon :rules="rules"> + <el-form-item label="鐢ㄦ埛鍚�"> + <el-input v-model="form.user" disabled /> + </el-form-item> + <el-form-item label="寮�濮嬫椂闂�"> + <TimeSinglePicker + :selectedTime="form.requestStartTime" + @submit-time="(n) => (form.requestStartTime = n)" + ></TimeSinglePicker> + </el-form-item> + <el-form-item label="缁撴潫鏃堕棿"> + <TimeSinglePicker + @submit-time="(n) => (form.requestEndTime = n)" + :selected-time="form.requestEndTime" + ></TimeSinglePicker> + </el-form-item> + + <!-- ---------------------------------------------------------- --> + <el-form-item label="鑾峰彇棰戠巼" prop="requestIntervalSeconds"> + <el-input v-model.number="form.requestIntervalSeconds"> + <template #append>灏忔椂/娆�</template> + </el-input> + </el-form-item> + + <el-form-item label="浠诲姟鍒嗘鏃堕暱" prop="requestRangeHour"> + <el-input v-model.number="form.requestRangeHour" :min="1" :max="10"> + <template #append>灏忔椂</template> + </el-input> + </el-form-item> + <el-form-item label="鍒嗘鎵ц鐨勯棿闅�" prop="requestRangeIntervalSeconds"> + <el-input v-model.number="form.requestRangeIntervalSeconds" :min="1" :max="10"> + <template #append>绉�</template> + </el-input> + </el-form-item> + <el-form-item label="鑾峰彇浠诲姟寮傚父鏃跺啀娆″皾璇曢棿闅�" prop="requestFailWaitSeconds"> + <el-input v-model.number="form.requestFailWaitSeconds" :min="1" :max="10"> + <template #append>绉�</template> + </el-input> + </el-form-item> + <el-form-item label="鑾峰彇澶辫触鏃跺啀娆″皾璇曠殑鎬绘鏁�" prop="requestRetryTimes"> + <el-input v-model.number="form.requestRetryTimes" :min="1" :max="10"> + <template #append>娆℃暟</template> + </el-input> + </el-form-item> + <el-form-item label="鏃ョ粺璁�"> + <TimeSinglePicker + @submit-time="(n) => (form.staticsDailyTime = n)" + :selected-time="form.staticsDailyTime" + /> + </el-form-item> + <el-form-item label="鏈堢粺璁�"> + <TimeSinglePicker + @submit-time="(n) => (form.staticsMonthlyTime = n)" + :selected-time="form.staticsMonthlyTime" + /> + </el-form-item> + <el-form-item label="鐧诲綍澶辫触绛夊緟鏃堕暱" prop="loginFailWaitSeconds"> + <el-input v-model.number="form.loginFailWaitSeconds" :min="1" :max="10"> + <template #append>绉�</template> + </el-input> + </el-form-item> + <el-form-item label="鐧诲綍澶辫触灏濊瘯娆℃暟" prop="loginRetryTimes"> + <el-input v-model.number="form.loginRetryTimes" :min="1" :max="10"> + <template #append>娆℃暟</template> + </el-input> + </el-form-item> + <el-form-item label="浠诲姟閲嶆柊寮�濮嬪皾璇曠瓑寰呮椂闂�" prop="taskRetryWaitSeconds"> + <el-input v-model.number="form.taskRetryWaitSeconds" :min="1" :max="10"> + <template #append>绉�</template> + </el-input> + </el-form-item> + <el-form-item label="鑾峰彇寮�濮嬫椂闂寸浉瀵瑰綋鏃ュ線鍓嶅亸绉�" prop="firstRequestOffsetDays"> + <el-input v-model.number="form.firstRequestOffsetDays" :min="1" :max="10"> + <template #append>澶�</template> + </el-input> + </el-form-item> + </el-form> + + <template #footer> + <el-button @click="cancel_1">鍙栨秷</el-button> + <el-button type="primary" @click="submitForm(ruleFormRef)">鎻愪氦</el-button> + </template> + </el-dialog> +</template> + +<style scoped> +/* .el-form { + display: flex; + flex-direction: column; + } + */ +/* .el-form-item { + display: flex; + margin-top: 5px; + } */ +/* .el-input { + width: 700px; + } + */ +</style> diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue index 184fc62..b10b218 100644 --- a/src/views/exception/FlightInspection.vue +++ b/src/views/exception/FlightInspection.vue @@ -1,4 +1,4 @@ -<script> +<!-- <script> import CompFlightInspection from '@/views/exception/components/CompFlightInspection.vue' export default { components: { @@ -24,4 +24,1330 @@ <style scoped> -</style> \ No newline at end of file +</style> --> + + + +<script> + import { defineAsyncComponent } from 'vue' + import TimeShortCuts from '@/sfc/TimeShortCuts.vue' + import { useCommonFunction } from '@/utils/common.js' + 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('@/views/exception/components/DustLineChart.vue')) + import exceptionApi from '@/api/exceptionApi.js' + import dayjs from 'dayjs' + import { ElMessage } from 'element-plus' + import AnalysisCard from '@/views/exception/components/AnalysisCard.vue' + import DutyCompany from '@/sfc/DutyCompany.vue' + import StreetInfo from '@/sfc/StreetInfo.vue' + import historyApi from '@/api/historyApi.js' + import time from '@/utils/time.js' + import lineChart from '@/utils/chartFunction/lineChart.js' + import exceptionOption from '@/utils/chartFunction/exceptionOption.js' + import exception0 from '@/assets/exception/exception0.png' + import exception1 from '@/assets/exception/exception1.png' + import exception2 from '@/assets/exception/exception2.png' + import exception3 from '@/assets/exception/exception3.png' + import exception4 from '@/assets/exception/exception4.png' + import exception5 from '@/assets/exception/exception5.png' + import exception6 from '@/assets/exception/exception6.png' + import exception7 from '@/assets/exception/exception7.png' + + import CompDialogDetail from '@/views/exception/components/CompDialogDetail.vue' + export default { + props: { + // 鐐逛綅鍚嶅瓧 + siteName: { + type: String, + default: '' + }, + // 鏃ユ椂闂存垨鑰呮湀鏃堕棿 + time:{ + type:String, + default:'' + }, + // 灞曠ず椤甸潰鐨勫叏閮� + showAll: { + type: Boolean, + default: true + }, + + // 0浠h〃鏃ユ椂闂达紝1浠h〃鏈堟椂闂� + timeType:{ + type:Number, + default:-1 + } + }, + components: { + TimeShortCuts, + DustLineChart, + ButtonClick, + AreaAndmonitorType, + AnalysisCard, + DutyCompany, + StreetInfo, + CompDialogDetail + }, + data() { + return { + // 琛ㄥ崟鍐呭 + form: { + // 绔欑偣鍚嶇О + name: '', + // 杩愮淮鍟� + dutyCompany: [], + // 琛楅亾 + street: [], + // 閫夋嫨鐨勫紓甯哥被鍨� + exceptionName: [] + }, + beginTime: '', + endTime: '', + // 杩斿洖鐨勬暟鎹� + tableData: [], + // 琛ㄦ牸灞曠ず鐨勬暟鎹� + displayData: [], + // 琛ㄦ牸楂樺害 + tableHeight: 400, + // 琛ㄦ牸鏄剧ず + isTableShow: false, + // 瀹℃牳杈呭姪鎸夐挳鏄剧ず + auditButton: false, + // 褰撳墠椤� + currentPage: 1, + // 姣忛〉鏉℃暟 + pageSize: 20, + // 琛ㄦ牸鐨勬�昏褰曟暟 + total: 0, + + // 鏌ヨ鎸夐挳鏃犳暟鎹椂 + isNoData: { + exception0: true, + exception1: true, + exception2: true, + exception3: true, + exception4: true, + exception5: true, + exception6: true, + exception7: true, + exception8: true + }, + // eslint-disable-next-line no-undef + // 瀵硅瘽妗嗘樉绀� + dialogTableVisible: false, + // 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿 + exception: { + // 鏂數鎴栨柇缃� + exception0: [], + // 鏁版嵁瓒呬綆 + exception1: [], + // 瓒呮爣 + exception2: [], + // 鏁版嵁闀挎椂娈垫棤娉㈠姩 + exception3: [], + // 閲忕骇绐佸彉寮傚父 + exception4: [], + // 涓磋繎瓒呮爣寮傚父 + exception5: [], + // 鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父 + exception6: [], + // 婊戝姩骞冲潎鍊煎紓甯� + exception7: [], + // 鏈夋晥鐜囧紓甯� + exception8: [], + + // 璇ユ椂娈电殑寮傚父鏁伴噺 + exception0Num: 0, + exception1Num: 0, + exception2Num: 0, + exception3Num: 0, + exception4Num: 0, + exception5Num: 0, + exception6Num: 0, + exception7Num: 0, + exception8Num: 0 + }, + // 绔欑偣鎬绘暟閲� + siteTotal: 0, + + // 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁 + tableCurrentRowData: null, + // 閫変腑琛ㄦ牸褰撳墠琛岀殑绱㈠紩 + selectedRowIndex: -2, + // 椤甸潰涓婄殑鎸夐挳鍔犺浇鐘舵�� + loading: { + // 鏌ヨ鎸夐挳 + queryButton: false, + // 琛ㄦ牸鍔犺浇涓� + tableLoading: false, + // 涓婁竴鏉℃寜閽� + preButton: false, + // 涓嬩竴鏉℃寜閽� + afterButton: false, + // 鎶樼嚎鍥� + lineChart: false + }, + + dialog: { + // 鎵撳紑瀵硅瘽妗嗚姹傝鍖洪棿鐨勫巻鍙叉暟鎹� + historyData: [], + // 璇ユ椂闂存鐨勫紓甯告潯鏁� + exceptionTotal: 0, + // 鎶樼嚎鍥鹃厤缃」 + option: {}, + // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵�� + isPreCantouch: false, + // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵�� + isNextCantouch: false, + // 寮傚父鐨勫墠涓悗鍖洪棿鎵�鏈夋暟鎹� + allExceptionTimeData: [] + }, + + // 鏍囪浣� + flag: { + // 鏁版嵁鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮 + banTouch: 0, + // 0浠h〃鍒嗛〉锛�1浠h〃涓嶅垎椤� + originClick: 0 + }, + areaColor: null + } + }, + setup() { + const { isExceedOneMonth } = useCommonFunction() + return { + isExceedOneMonth + } + }, + // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑� + watch: { + selectedRowIndex(newVaue) { + // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣 + if (newVaue === 0) { + this.dialog.isPreCantouch = true + //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿� + if (this.dialog.isNextCantouch == true) { + this.dialog.isNextCantouch = false + } + } + // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣 + else if (newVaue === this.displayData.length - 1) { + this.dialog.isNextCantouch = true + //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿� + if (this.dialog.isPreCantouch == true) { + this.dialog.isPreCantouch = false + } + } + // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬� + else { + this.dialog.isPreCantouch = false + this.dialog.isNextCantouch = false + } + }, + dialogTableVisible() { + window.addEventListener('resize', this.updateChart) + }, + + // 椤甸潰鍔犺浇鏃秙howAll鎵嶄細鍙樺寲涓�娆� + // 涓簍rue琛ㄧず鐨勯琛屽贰妫�椤甸潰 + showAll(){ + if(this.showAll){ + this.backExceptionDataAWeekAgo() + } + }, + // siteName(){ + // if(this.siteName!=''){ + // this.beginTime = dayjs(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss') + // this.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') + // this.backExceptionDataAWeekAgo() + // this.getShopNames() + // } + + // }, + + timeType(){ + if(this.timeType == '0'){ + this.beginTime = dayjs(this.time).format('YYYY-MM-DD 00:00:00') + this.endTime = dayjs(this.time).format('YYYY-MM-DD 23:59:59') + }else if(this.timeType == '1'){ + this.beginTime = dayjs(this.time).startOf('month').format('YYYY-MM-DD HH:mm:ss') + this.endTime = dayjs(this.time).endOf('month').format('YYYY-MM-DD HH:mm:ss') + } + this.backExceptionDataAWeekAgo() + this.getShopNames() + }, + watch:{ + dialogTableVisible:{ + handler(newValue){ + console.log('鐪熷亣1',this.dialogTableVisible); + } + } +}, + }, + computed: { + exceptionAllNum() { + let sum = + this.exception.exception0Num + + this.exception.exception1Num + + this.exception.exception2Num + + this.exception.exception3Num + + this.exception.exception4Num + + this.exception.exception5Num + + this.exception.exception6Num + + this.exception.exception7Num + + this.exception.exception8Num + if (sum == 0) { + return 1 + } else { + return sum + } + }, + long_time_notchange() { + let sum = + this.exception.exception0Num + + this.exception.exception1Num + + this.exception.exception2Num + + this.exception.exception3Num + + this.exception.exception4Num + + this.exception.exception5Num + + this.exception.exception6Num + + this.exception.exception7Num + + this.exception.exception8Num + if (sum == 0) { + return 0 + } else { + return ( + 100 - + (this.exception.exception0Num / this.exceptionAllNum) * 100 - + (this.exception.exception1Num / this.exceptionAllNum) * 100 - + (this.exception.exception2Num / this.exceptionAllNum) * 100 - + (this.exception.exception4Num / this.exceptionAllNum) * 100 - + (this.exception.exception5Num / this.exceptionAllNum) * 100 - + (this.exception.exception6Num / this.exceptionAllNum) * 100 - + (this.exception.exception7Num / this.exceptionAllNum) * 100 - + (this.exception.exception8Num / this.exceptionAllNum) * 100 + ).toFixed(1) + } + }, + // 绗竴鎺掑崱鐗� + cardRow() { + return [ + { + siteName: this.exception.exception4, + exceptionType: '4', + exceptionName: '閲忕骇绐佸彉', + iconSrc: exception4, + siteNum: this.exception.exception4.length, + exceptionNum: this.exception.exception4Num, + isNoDataStatus: this.isNoData.exception4, + span: 5 + }, + { + siteName: this.exception.exception5, + exceptionType: '5', + exceptionName: '涓磋繎瓒呮爣寮傚父', + iconSrc: exception5, + siteNum: this.exception.exception5.length, + exceptionNum: this.exception.exception5Num, + isNoDataStatus: this.isNoData.exception5, + span: 5 + }, + { + siteName: this.exception.exception8, + exceptionType: '8', + exceptionName: '鏈夋晥鐜囧紓甯�', + iconSrc: exception0, + siteNum: this.exception.exception8.length, + exceptionNum: this.exception.exception8Num, + isNoDataStatus: this.isNoData.exception8, + span: 5 + }, + { + siteName: this.exception.exception6, + exceptionType: '6', + exceptionName: '鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父', + iconSrc: exception6, + siteNum: this.exception.exception6.length, + exceptionNum: this.exception.exception6Num, + isNoDataStatus: this.isNoData.exception6, + span: 5 + }, + + { + siteName: this.exception.exception7, + exceptionType: '7', + exceptionName: '鍙樺寲瓒嬪娍寮傚父', + iconSrc: exception7, + siteNum: this.exception.exception7.length, + exceptionNum: this.exception.exception7Num, + isNoDataStatus: this.isNoData.exception7, + span: 4 + }, + { + siteName: this.exception.exception0, + exceptionType: '0', + exceptionName: '鏁版嵁缂哄け寮傚父', + iconSrc: exception0, + siteNum: this.exception.exception0.length, + exceptionNum: this.exception.exception0Num, + isNoDataStatus: this.isNoData.exception0, + span: 6 + }, + { + siteName: this.exception.exception1, + exceptionType: '1', + exceptionName: '鏁版嵁瓒呬綆', + iconSrc: exception1, + siteNum: this.exception.exception1.length, + exceptionNum: this.exception.exception1Num, + isNoDataStatus: this.isNoData.exception1, + span: 6 + }, + { + siteName: this.exception.exception2, + exceptionType: '2', + exceptionName: '瓒呮爣', + iconSrc: exception2, + siteNum: this.exception.exception2.length, + exceptionNum: this.exception.exception2Num, + isNoDataStatus: this.isNoData.exception2, + span: 6 + }, + { + siteName: this.exception.exception3, + exceptionType: '3', + exceptionName: '鏁版嵁闀挎椂娈垫棤娉㈠姩', + iconSrc: exception3, + siteNum: this.exception.exception3.length, + exceptionNum: this.exception.exception3Num, + isNoDataStatus: this.isNoData.exception3, + span: 6 + } + ] + }, + }, + mounted() { + + this.getSiteNume() + + // 椋炶宸℃椤甸潰锛岃繘鍘诲姞杞� + if(this.showAll == true){ + this.backExceptionDataAWeekAgo() + this.getShopNames() + } + }, + + methods: { + /** + * 鏈夋晥鐜囧紓甯� 璁剧疆鎶樼嚎鍥鹃厤缃」 + * @param锛� + * @returns锛� + */ + validProcess() { + // x杞存暟鎹� + let xList = time.ascTime( + this.tableCurrentRowData.beginTime, + this.tableCurrentRowData.endTime, + 15 + ) + + // y杞存暟鎹� + let yList = [] + xList.forEach((item) => { + // 鏌ユ壘璇ユ椂闂寸殑鏁版嵁 + let r = lineChart.findDate(this.dialog.historyData, item) + if (r) { + yList.push(r.dustValue) + } else { + yList.push(null) + } + }) + // 棰滆壊鑳屾櫙鍖洪棿 + // 寰楀埌鏃犳暟鎹殑鏃堕棿鐐规垨flag涓嶇瓑浜嶯鐨勬椂闂寸偣 + let noDataTime = time.invalidTime(this.dialog.historyData, xList) + let rangeTime = time.seriesTime(noDataTime, 15) + // let rangeTime_1 = time.splitTime(rangeTime) + // 寰楀埌鑳屾櫙鍖洪棿鐨勯厤缃� + let areaObj = lineChart.getMarkArea(rangeTime, '寮傚父') + // let lineColor = lineChart.getLineColor(rangeTime,xList) + let lineColor = [] + // console.log('绾挎',lineColor); + // 浼犲叆鍙傛暟 + this.dialog.option = exceptionOption.setExceptionChartOption( + xList, + yList, + '', + '', + '', + '', + this.tableCurrentRowData.exception, + areaObj, + lineColor, + this.tableCurrentRowData.exceptionType + ) + }, + + getImageUrl(name) { + return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href + }, + // 鏀惧洖绔欑偣鎬绘暟閲� + getSiteNume() { + exceptionApi.getSitesNum().then((res) => { + this.siteTotal = res.data.data.length + }) + }, + + /** + * description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹� + * @param锛� + * @createTime:2023-08-17 + * @returns锛� + */ + getAbnormalDataByClick(val) { + this.flag.originClick = 1 + // 鏄剧ず琛ㄦ牸 + this.isTableShow = true + this.tableData = val + this.total = this.tableData.length + // 榛樿鏄剧ず绗竴椤� + this.handleCurrentChange(1) + }, + // 鐐瑰嚮琛ㄦ牸鐨勮鏃� + selectTableRow() { + // 鑾峰彇褰撳墠琛岀殑绱㈠紩 + this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData) + }, + /** + * description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁 + */ + setOfflineTbleData() { + // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓 + const abnormalTimeTenMinute = index.descFiftyTime( + this.tableCurrentRowData.beginTime, + this.tableCurrentRowData.endTime + ) + // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟 + this.dialog.exceptionTotal = abnormalTimeTenMinute.length + + // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫�� + this.dialog.historyData = [] + + for (let i = 0; i < abnormalTimeTenMinute.length; i++) { + this.dialog.historyData.push({ + name: this.tableCurrentRowData.name, + mnCode: this.tableCurrentRowData.mnCode, + dutyCompany: this.tableCurrentRowData.dutyCompany, + lst: abnormalTimeTenMinute[i], + dustValue: '' + }) + } + }, + + // 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂� + + // 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂� + // 鍒ゆ柇鏄鐢垫垨鏂綉锛熸槸鍒欒姹傚墠鍚庡尯闂达紝鍚﹀垯鍙姹備竴娆″畬鏁寸殑 + // 寰楀埌鏈�缁堟暟鎹� + // 鍐嶅垽鏂紓甯哥绫� 锛岃繘琛岃缃厤缃」 + + /** + * description锛氫竴娆¤姹傚洖鍓嶄腑鍚庡尯闂寸殑鏁版嵁,瀵规暟鎹繘琛屽垎鏋� + * @param锛� 鍓嶄腑鍚庡尯闂寸殑璇锋眰鍙傛暟锛屽墠涓悗鐨勬�诲尯闂存椂闂达紝寮傚父寮�濮嬫椂闂达紝涓�鍦虹粨鏉熸椂闂� + */ + otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) { + // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 + this.loading.lineChart = true + + historyApi.queryHistoryData(allTimeArgs).then((result) => { + this.dialog.allExceptionTimeData = result.data.data + // 鏁版嵁缂哄け寮傚父鏃堕噸鏂拌缃〃鏍� + if (this.tableCurrentRowData.exceptionType == '0') { + this.setOfflineTbleData() + } + + // x杞存棩鏈熸椂闂� + let dateList = [] + // y杞� 瓒呮爣娌圭儫娴撳害 + let dustValue = [] + let timeAndValue = {} + + // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�15鍒嗛挓涓洪棿闅� + timeAndValue = index.keepContinuousByEachFiftyMinutes( + allTime[0], + allTime[3], + this.dialog.allExceptionTimeData + ) + dateList = timeAndValue['xAxis'] + dustValue = timeAndValue['yAxis'] + + // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩 + let startIndex = dateList.findIndex((item) => item === exceptionBT) + let endIndex = dateList.findIndex((item) => item === exceptionET) + + // 璁剧疆鎶樼嚎鍥鹃厤缃」 + // this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex) + this.dialog.option = exceptionOption.setExceptionChartOption( + dateList, + dustValue, + exceptionBT, + exceptionET, + startIndex, + endIndex, + this.tableCurrentRowData.exception, + '', + '', + this.tableCurrentRowData.exceptionType + ) + this.flag.banTouch = 0 + this.loading.lineChart = false + }) + }, + + /** + * description锛氬垝鍒嗗嚭寮傚父璧峰鏃堕棿锛屾瀯閫犺姹傚墠涓悗鐨勫弬鏁� + */ + timeAndDataProcessed() { + //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿 + let exceptionBeginTime = this.tableCurrentRowData.beginTime + let exceptionEndTime = this.tableCurrentRowData.endTime + + // beforeAndAfterTime[0]:鍓�45鍒嗛挓鐨勬椂闂寸偣 + // beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣 + // beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣 + // beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣 + let beforeAndAfterTime = index.before45AndAfter45(exceptionBeginTime, exceptionEndTime) + + // 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛� + let paramsAllTime = index.requestGetParms( + this.tableCurrentRowData.name, + beforeAndAfterTime[0], + beforeAndAfterTime[3] + ) + + // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤� + this.otherExceptionRequest( + paramsAllTime, + beforeAndAfterTime, + exceptionBeginTime, + exceptionEndTime + ) + }, + + /** + * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭� + */ + getPreviousRowData() { + // // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛� + if (this.selectedRowIndex < this.displayData.length - 1) { + // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 + this.flag.banTouch = 1 + + //寰楀埌涓婁竴琛屾暟鎹储寮� + this.selectedRowIndex = this.selectedRowIndex + 1 + + // 寰楀埌涓婁竴琛岀殑鏁版嵁 + this.tableCurrentRowData = this.displayData[this.selectedRowIndex] + + this.loading.preButton = true + + historyApi + .queryHistoryData({ + siteName: this.tableCurrentRowData.name, + beginTime: this.tableCurrentRowData.beginTime, + endTime: this.tableCurrentRowData.endTime + }) + .then((response) => { + // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� + this.dialog.historyData = response.data.data + this.dialog.exceptionTotal = response.data.data.length + // 閫昏緫澶勭悊 + + if (this.tableCurrentRowData.exceptionType != '8') { + this.timeAndDataProcessed() + } else { + this.loading.lineChart = true + this.validProcess() + this.loading.lineChart = false + this.flag.banTouch = 0 + } + this.loading.preButton = false + }) + } + }, + /** + * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭� + */ + getNextRowData() { + // 涓嶆槸琛ㄦ牸鐨勭涓�琛� + if (this.selectedRowIndex !== 0) { + // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 + this.flag.banTouch = 1 + + //寰楀埌涓婁竴琛屾暟鎹储寮� + this.selectedRowIndex = this.selectedRowIndex - 1 + + // 寰楀埌涓婁竴琛岀殑鏁版嵁 + this.tableCurrentRowData = this.displayData[this.selectedRowIndex] + + this.loading.afterButton = true + + historyApi + .queryHistoryData({ + siteName: this.tableCurrentRowData.name, + beginTime: this.tableCurrentRowData.beginTime, + endTime: this.tableCurrentRowData.endTime + }) + .then((response) => { + // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� + this.dialog.historyData = response.data.data + this.dialog.exceptionTotal = response.data.data.length + // 閫昏緫澶勭悊 + + if (this.tableCurrentRowData.exceptionType != '8') { + this.timeAndDataProcessed() + } else { + this.loading.lineChart = true + this.validProcess() + this.loading.lineChart = false + this.flag.banTouch = 0 + } + this.loading.afterButton = false + }) + } + }, + + /** + * description锛氫粠瀛愮粍浠惰幏寰楁煇绔欑偣璇ユ椂娈电殑寮傚父鏁版嵁 + * @createTime:2023-08-18 + */ + backExceptionData(val1, val2) { + this.displayData = val1 + this.total = val2 + }, + + // 鏌ヨ寮傚父鏁版嵁鐨勭珯鐐瑰悕瀛楀拰鏁伴噺 + queryExceptionSite(url, exceptionType) { + let params = {} + params['beginTime'] = this.beginTime + params['endTime'] = this.endTime + params['exceptionType'] = exceptionType + + if(this.siteName){ + params['siteName'] = this.siteName + } + // if (this.form.street.length != 0) { + // params['street'] = this.form.street.join() + // } + if (this.form.dutyCompany.length != 0) { + params['dutyCompany'] = this.form.dutyCompany.join() + } + return this.$http.get(url, { params: params }) + }, + + /** + * description锛氬綋鐢ㄦ埛鏀瑰彉鏌ヨ鐨勬椂闂村尯闂存椂锛屼細鏍规嵁璇ュ尯闂存煡璇㈠悇寮傚父鐨勭珯鐐癸紝鏌ヨ璇ユ椂闂村尯闂寸殑鍚勫紓甯告暟閲� + * @createTime:2023-08-18 + */ + getShopNames() { + /* 鏌ヨ寮傚父鐨勭珯鐐� */ + this.queryExceptionSite('/dust/sitenamecode', 0).then((result) => { + this.exception.exception0 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception0 = true + return + } + this.isNoData.exception0 = false + }) + this.queryExceptionSite('/dust/sitenamecode', 1).then((result) => { + this.exception.exception1 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception1 = true + return + } + this.isNoData.exception1 = false + }) + this.queryExceptionSite('/dust/sitenamecode', 2).then((result) => { + this.exception.exception2 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception2 = true + return + } + this.isNoData.exception2 = false + }) + + this.queryExceptionSite('/dust/sitenamecode', 3).then((result) => { + this.exception.exception3 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception3 = true + return + } + this.isNoData.exception3 = false + }) + + this.queryExceptionSite('/dust/sitenamecode', 4).then((result) => { + this.exception.exception4 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception4 = true + return + } + this.isNoData.exception4 = false + }) + this.queryExceptionSite('/dust/sitenamecode', 5).then((result) => { + this.exception.exception5 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception5 = true + return + } + this.isNoData.exception5 = false + }) + this.queryExceptionSite('/dust/sitenamecode', 6).then((result) => { + this.exception.exception6 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception6 = true + return + } + this.isNoData.exception6 = false + }) + this.queryExceptionSite('/dust/sitenamecode', 7).then((result) => { + this.exception.exception7 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception7 = true + return + } + this.isNoData.exception7 = false + }) + this.queryExceptionSite('/dust/sitenamecode', 8).then((result) => { + this.exception.exception8 = result.data.data + if (result.data.data.length == 0) { + this.isNoData.exception8 = true + return + } + + this.isNoData.exception8 = false + }) + + /* 寮傚父寮傚父鏁伴噺 */ + this.queryExceptionSite('/dust/exceptionnum', 0).then((result) => { + this.exception.exception0Num = result.data.data + }) + this.queryExceptionSite('/dust/exceptionnum', 1).then((result) => { + this.exception.exception1Num = result.data.data + }) + this.queryExceptionSite('/dust/exceptionnum', 2).then((result) => { + this.exception.exception2Num = result.data.data + }) + + this.queryExceptionSite('/dust/exceptionnum', 3).then((result) => { + this.exception.exception3Num = result.data.data + }) + + this.queryExceptionSite('/dust/exceptionnum', 4).then((result) => { + this.exception.exception4Num = result.data.data + }) + this.queryExceptionSite('/dust/exceptionnum', 5).then((result) => { + this.exception.exception5Num = result.data.data + }) + this.queryExceptionSite('/dust/exceptionnum', 6).then((result) => { + this.exception.exception6Num = result.data.data + }) + this.queryExceptionSite('/dust/exceptionnum', 7).then((result) => { + this.exception.exception7Num = result.data.data + }) + this.queryExceptionSite('/dust/exceptionnum', 8).then((result) => { + this.exception.exception8Num = result.data.data + }) + }, + + /** + * description锛氭樉绀哄璇濇,杩斿洖璇ュ紓甯告椂闂存鐨勬墍鏈夋暟鎹� + * @param锛氱偣鍑烩�樻煡鐪嬭鎯呪�欑殑璇ヨ鎵�鏈夊瓧娈垫暟鎹� + * @createTime:2023-08-18 + */ + showDialog(row) { + // 鎵撳紑瀵硅瘽妗� + this.dialogTableVisible = true + + // 淇濆瓨褰撳墠琛屾暟鎹� + this.tableCurrentRowData = row + + // // 鑾峰彇褰撳墠琛岀殑绱㈠紩 + // this.selectedRowIndex = this.displayData.indexOf(row) + + // //鏍规嵁褰撳墠琛岀殑缂栧彿锛岃捣濮嬫椂闂存潵 璇锋眰寮傚父鏁版嵁 + // // 瀵硅姹傚埌鐨勬暟鎹繘琛岄灏炬嫾鎺� + // // 寰楀埌鍓嶅悗瀹屾暣鏁版嵁杩涜缁樺埗鍥惧舰 + + // historyApi + // .queryHistoryData({ + // siteName: row.name, + // beginTime: row.beginTime, + // endTime: row.endTime + // }) + // .then((response) => { + // // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� + // this.dialog.historyData = response.data.data + // this.dialog.exceptionTotal = response.data.data.length + // // 閫昏緫澶勭悊 + + // if (this.tableCurrentRowData.exceptionType != '8') { + // this.timeAndDataProcessed() + // } else { + // this.loading.lineChart = true + // this.validProcess() + // this.loading.lineChart = false + // this.flag.banTouch = 0 + // } + // }) + }, + /** + * description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁 + * @createTime:2023-08-18 + */ + handleSubmit() { + if (this.isExceedOneMonth(this.beginTime, this.endTime)) { + alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀') + return + } + // 鏇存柊寮傚父鍒嗘瀽 + this.getShopNames() + + this.loading.queryButton = true + this.flag.originClick = 0 + this.loading.tableLoading = true + let params = {} + params['page'] = this.currentPage + params['pageSize'] = this.pageSize + if (this.siteName) { + params['siteName'] = this.siteName + } + // if (this.form.street.length != 0) { + // params['street'] = this.form.street.join() + // } + if (this.form.dutyCompany.length != 0) { + params['dutyCompany'] = this.form.dutyCompany.join() + } + params['beginTime'] = this.beginTime + params['endTime'] = this.endTime + + this.$http.get('/dust/exceptiondata2', { params: params }).then((response) => { + // 淇濆瓨杩斿洖鐨� + this.displayData = response.data.data.rows + this.loading.queryButton = false + this.loading.tableLoading = false + + if (response.data.data.total == 0) { + ElMessage('璇ユ椂娈垫棤鏁版嵁') + this.isTableShow = false + return + } + this.isTableShow = true + this.total = response.data.data.total + // 绉婚櫎绌烘暟鎹姸鎬� + }) + }, + + /** + * description锛氭墦寮�椤甸潰榛樿鍔犺浇鏈�杩戜竴鍛ㄧ殑寮傚父鏁版嵁 + * @createTime:2023-08-18 + */ + backExceptionDataAWeekAgo() { + this.loading.tableLoading = true + let params = {} + if (this.siteName) { + params['siteName'] = this.siteName + } + + params['beginTime'] = this.beginTime + params['endTime'] = this.endTime + console.log('name',this.siteName) + this.$http.get('/dust/exceptiondata', { params: params }).then((response) => { + // 淇濆瓨杩斿洖鐨� + // this.tableData = response.data.data.rows; + this.displayData = response.data.data.rows + this.loading.tableLoading = false + + if (response.data.data.total == 0) { + ElMessage('璇ユ椂娈垫棤鏁版嵁') + this.isTableShow = false + return + } + + this.isTableShow = true + this.total = response.data.data.total + }) + }, + + /** + * description锛氬皢涓浗鏍囧噯鏃堕棿杞负鎸囧畾鏍煎紡(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) + * @createTime:2023-08-17 + */ + giveTime(val) { + this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss') + this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss') + }, + + // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲 + calTableHeight() { + const h1 = this.$refs.h1.$el.offsetHeight + const h2 = this.$refs.h2.$el.offsetHeight + const h3 = this.$refs.h3.$el.offsetHeight + const h4 = this.$refs.h4.$el.offsetHeight + // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛 + this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)` + }, + + // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂 + handleSizeChange(val) { + this.pageSize = val + + // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉 + this.handleCurrentChange(1) + }, + + // 椤靛彿鏀瑰彉鏃惰Е鍙� + /** + * description锛氶〉鍙锋敼鍙樻椂瑙﹀彂 + * @param锛� 褰撳墠椤碉紝鏍囪浣嶏紙0浠h〃鏄偣鍑烩�樻煡璇⑩�欒Е鍙戠殑锛�1浠h〃鏃剁偣鍑诲紓甯哥珯鐐规枃鏈寜閽Е鍙戠殑锛� + * @createTime:2023-08-17 + * @returns锛� + */ + handleCurrentChange(val) { + // 灏嗗綋鍓嶉〉鍙风粰currentPage + this.currentPage = val + + // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟 + if (this.flag.originClick == 0) { + this.handleSubmit() + } else if (this.flag.originClick == 1) { + const startIndex = (val - 1) * this.pageSize + const endIndex = startIndex + this.pageSize + + this.displayData = this.tableData.slice(startIndex, endIndex) + } + }, + // 琛ㄦ牸搴忓彿閫掑 + indexMethod1(index) { + return index + 1 + (this.currentPage - 1) * this.pageSize + }, + // 琛ㄦ牸搴忓彿閫掑 + indexMethod2(index) { + return index + 1 + } + } + } + </script> + + <template> + <div class="all-container"> + <el-row ref="h1"> + <el-col> + <el-form :inline="true"> + <div class="head-container-text"> + <el-form-item> + <AreaAndmonitorType></AreaAndmonitorType> + </el-form-item> + + <el-form-item v-show="!showAll"> + <span class="site-text"> 鐐逛綅鍚嶇О:</span> + <span> {{ this.siteName }}</span> + </el-form-item> + + <el-form-item v-show="showAll"> + <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany> + </el-form-item> + + <!-- <el-form-item v-show="showAll"> + <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo> + </el-form-item> --> + + <el-form-item> + <TimeShortCuts timeType="day" @submit-time="giveTime" :beginAndEndTime="[beginTime,endTime]"></TimeShortCuts> + </el-form-item> + + <el-form-item> + <ButtonClick + content="椋庨櫓璇勪及" + type="warning" + color="rgb(12,104,165)" + :loading="loading.queryButton" + :havaIcon="false" + @do-search="handleSubmit" + ><img src="@/assets/exception/riskButton.png" height="24" class="img-button" + /></ButtonClick> + </el-form-item> + </div> + </el-form> + </el-col> + </el-row> + + <!-- 鏃堕棿鎽樿 --> + <el-row class="head-describtion-text" ref="h2"> + <el-row> + <span> 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span> + </el-row> + </el-row> + + <!-- 寮傚父鍒嗘瀽 --> + <el-row ref="h3"> + <el-col> + <el-card class="card-container"> + <template #header> + <div class="card-header">寮傚父鍒嗘瀽</div> + </template> + + <el-row :gutter="20"> + <el-col v-for="item in cardRow" :key="item.exceptionType" :span="item.span"> + <AnalysisCard + :site-name="item.siteName" + :exception-type="item.exceptionType" + :begin-time="beginTime" + :end-time="endTime" + :exception-name="item.exceptionName" + :site-num="item.siteNum" + :exception-num="item.exceptionNum" + :exception-all-num="exceptionAllNum" + :site-num-all="siteTotal" + :isNoDataStatus="item.isNoDataStatus" + :icon="item.iconSrc" + @get-abnormal-data-by-click="getAbnormalDataByClick" + class="card-row" + > + > + </AnalysisCard> + </el-col> + </el-row> + </el-card> + </el-col> + </el-row> + + <el-button-group> + <el-button color="#626aef" plain @click="isTableShow = true" v-show="!isTableShow"> + 鏄剧ず寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon> + </el-button> + <el-button color="#626aef" plain @click="isTableShow = false" v-show="isTableShow"> + 闅愯棌寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon> + </el-button> + </el-button-group> + + <!-- 琛ㄦ牸 --> + <el-row v-show="isTableShow"> + <el-col> + <el-table + ref="table" + :data="displayData" + :height="tableHeight" + :highlight-current-row="true" + size="default" + v-loading="loading.tableLoading" + border + > + <el-table-column + type="index" + label="搴忓彿" + width="60px" + align="center" + fixed + :index="indexMethod1" + /> + <el-table-column prop="name" label="鐐逛綅鍚嶇О" show-overflow-tooltip /> + <el-table-column prop="mnCode" label="璁惧缂栫爜" align="center" show-overflow-tooltip /> + <el-table-column prop="exception" label="寮傚父绫诲瀷" align="center" show-overflow-tooltip /> + <el-table-column prop="region" label="鍖哄幙" align="center" show-overflow-tooltip /> + <el-table-column prop="beginTime" label="寮�濮嬫椂闂�" align="center" show-overflow-tooltip /> + <el-table-column prop="endTime" label="缁撴潫鏃堕棿" align="center" show-overflow-tooltip /> + <el-table-column + prop="typename" + label="鍦烘櫙" + align="center" + width="82" + show-overflow-tooltip + /> + <el-table-column prop="address" label="鍦板潃" align="center" show-overflow-tooltip /> + <el-table-column prop="dutyCompany" label="杩愮淮鍟�" align="center" show-overflow-tooltip /> + + <el-table-column label="鎿嶄綔" align="center"> + <template #default="{ row }"> + <el-button type="primary" class="table-button" @click="showDialog(row)" + >鏌ョ湅璇︽儏</el-button + > + </template> + </el-table-column> + </el-table> + + <el-pagination + ref="h4" + background + layout="total, sizes, prev, pager, next, jumper" + v-model:current-page="currentPage" + v-model:page-size="pageSize" + :total="total" + :page-sizes="[10, 20, 50, 100]" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + > + </el-pagination> + </el-col> + </el-row> + + + + <CompDialogDetail :row="tableCurrentRowData" v-model="dialogTableVisible"/> + </div> + </template> + + <style lang="scss" scoped> + .el-row { + margin-left: 10px; + } + + /* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */ + .el-form { + margin: 10px; + } + img { + margin-right: 5px; + } + .head-container-search { + float: right; + } + + .head-describtion-text { + justify-content: flex-end; + margin-bottom: 2px; + margin-right: 20px; + font-size: 14px; + color: gray; + } + .button-set { + margin: 10px; + } + /* 鏉′欢鏌ヨ妯″潡缁撴潫 */ + + /* 寮傚父鍒嗘瀽妯″潡鐨勬牱寮� */ + + .card-text1 { + /* 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒� */ + margin: 10px; + } + .card-text1 + div { + /* 榛戜綋鐨勫紓甯稿悕瀛椾笅闈㈢殑 */ + margin: 12px; + } + .card-exception-buttom { + /* 寮傚父绔欑偣鏂囨湰鎸夐挳鍖哄煙 */ + padding: 11px; + } + .card-header { + margin-left: 5px; + font-size: 18px; + font-weight: bold; + } + .card-content-unnormal { + min-height: 200px; + border: 2px solid #ffcf8b; + border-radius: 20px; + } + .card-content-normal { + min-height: 200px; + border: 2px solid red; + border-radius: 20px; + } + + .card-header-text { + font-size: 16px; + font-weight: bold; + margin-top: 4px; + margin-left: 4px; + } + .card-content-text { + white-space: nowrap; + } + .card-exceptionname-text1 { + /* 寮傚父绔欑偣鍗犳瘮 */ + font-size: 14px; + white-space: nowrap; + } + + .card-exceptionname-text2 { + /* 寮傚父鏁板崰姣旂殑澶栬竟璺� */ + font-size: 14px; + white-space: nowrap; + } + .text-blank { + /* 閫楀彿 */ + margin-right: 10px; + color: #000000; + } + .card-row { + margin-bottom: 10px; + } + + /* 寮傚父鍒嗘瀽妯″潡缁撴潫 */ + + /* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮� */ + .el-button-group { + margin: 10px 0px 10px 10px; + } + .i-ep-Arrow { + margin-left: 6px; + margin-bottom: 2px; + font-size: 1.2em; + } + /* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮忕粨鏉� */ + + /* 琛ㄦ牸妯″潡鐨勬牱寮� */ + .el-table { + color: #333333; + } + /* 琛ㄦ牸妯″潡缁撴潫 */ + + + + /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */ + + .diag-head { + /* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */ + min-height: 200px; + } + .diag-head-text1 { + /* 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� */ + font-weight: bold; + } + + .diag-head-text > div { + /* 瀵硅瘽妗嗗紓甯告椂闂存 */ + margin-top: 15px; + } + .diag-head-text { + margin: 10px; + padding: 10px; + background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%); + border: 2px solid #7bc0fc; + } + .chart-jump-button { + display: flex; + justify-content: right; + } + + .mx-1 { + /* position: absolute; + left: 10px; + bottom: 10px; */ + justify-content: flex-start; + } + .dialog-footer{ + display: flex; + } + .dialog-footer-text { + justify-content: flex-end; + margin-left: auto; + font-size: 14px; + /* color: #333333; */ + } + /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */ + </style> + \ No newline at end of file diff --git a/src/views/exception/components/CompDialogDetail.vue b/src/views/exception/components/CompDialogDetail.vue new file mode 100644 index 0000000..67ef2a0 --- /dev/null +++ b/src/views/exception/components/CompDialogDetail.vue @@ -0,0 +1,350 @@ +<!-- 鐐瑰嚮 鈥濇煡鐪嬭缁嗏�� 鐨勫璇濇 --> +<!-- 涓婁竴鏉′笅涓�鏉$敱瀛愮粍浠朵紶閫掔粰鐖剁粍浠讹紝鐖剁粍浠剁洃鍚俊鍙� --> + +<script> +import exceptionOption from '@/utils/chartFunction/exceptionOption.js' +import index from '@/utils/exception_common_function/index.js' +import DustLineChart from '@/views/exception/components/DustLineChart.vue' +import historyApi from '@/api/historyApi.js' + +export default { + props: { + // 琛ㄦ牸鐨勪竴琛屾暟鎹� + row: { + type: Object, + default: {} + }, + // 瀵硅瘽妗嗘槸鍚︽樉绀� + dialogTableVisible: { + type: Boolean, + default: false + } + }, + components: { + DustLineChart + }, + emits: ['update:dialogTableVisible'], + computed: { + dialogTableVisible: { + get() { + return this.dialogTableVisible + }, + set(value) { + this.$emit('update:dialogTableVisible', value) + } + } + }, + watch: { + row: { + handler(newValue) { + this.display() + }, + deep: true + } + }, + data() { + return { + // 寮傚父琛ㄦ牸鐨勬暟鎹� + historyData: [], + // 鎶樼嚎鍥鹃厤缃」 + lineChartOption: {}, + loading: { + // 涓婁竴鏉℃寜閽� + preButton: false, + // 涓嬩竴鏉℃寜閽� + afterButton: false, + // 鎶樼嚎鍥� + lineChart: false + }, + + + // 鏍囪浣� + flag: { + // 鏁版嵁鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮 + banTouch: 0, + }, + + isPreCantouch:false, + isNextCantouch:false + + } + }, + + mounted() {}, + methods: { + display() { + // 琛ㄦ牸鏁版嵁 + this.getExceptionTableDataByCurrenrRow(this.row) + + // 鎶樼嚎鍥炬暟鎹� + this.setLineChart(this.row) + }, + + /** + * 寰楀埌寮傚父琛ㄦ牸鐨勬暟鎹� + * @param锛� 鐐逛綅鍚嶇О锛屽紓甯稿紑濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿 + * @returns锛� + */ + async getExceptionTableDataByCurrenrRow({ name, beginTime, endTime, exceptionType }) { + if (!name || !beginTime || !endTime) { + return + } + // 鏁版嵁缂哄け寮傚父鏃讹紝鏋勯�犺〃鏍兼暟鎹� + if (this.exceptionType == '0') { + this.setOfflineTbleData(this.row) + return + } + + // 鏍规嵁寮傚父鐨勭偣浣嶅悕绉般�佸紑濮嬨�佺粨鏉熸椂闂达紝鏌ヨ璇ユ椂娈电殑棰楃矑鐗╂祿搴︽暟鎹� + const response = await historyApi.queryHistoryData({ + siteName: name, + beginTime: beginTime, + endTime: endTime + }) + // 寮傚父琛ㄦ牸寰楀埌鏁版嵁 + this.historyData = response.data.data + }, + + /* *********************************************************************************** 鎶樼嚎鍥� */ + /** + * 璁剧疆鎶樼嚎鍥� + * @param锛� + * @returns锛� + */ + async setLineChart({ beginTime, endTime }) { + // 璁$畻寮傚父鍖洪棿鐨勫墠鍚�45鍒嗛挓 + const beforeAndAfterTime = index.before45AndAfter45(beginTime, endTime) + // 璇锋眰鏁存鏃堕棿娈电殑棰楃矑鐗╂祿搴︽暟鎹� + + + // 瀵硅姹傚洖鐨勬暟鎹繘琛屽垝鍒� + const chartParams = await this.organizeLineChartsOptionParams(beforeAndAfterTime, this.row) + this.lineChartOption = exceptionOption.setExceptionChartOption(chartParams) + + }, + + + + /** + * 鏋勫缓鎶樼嚎鍥剧殑閰嶇疆椤圭殑鍙傛暟 + * @param锛� 寮傚父鍖洪棿鍓嶅悗鏁版嵁鏃堕棿鐐癸紝 琛ㄦ牸褰撳墠琛屾暟鎹� + * @returns锛� + */ + async organizeLineChartsOptionParams( + time_point, + { name, beginTime, endTime, exception, exceptionType } + ) { + // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 + this.loading.lineChart = true + + // 璇锋眰鏁存棰楃矑鐗╂祿搴︾殑鏁版嵁 + const response = await historyApi.queryHistoryData({ + siteName: name, + beginTime: time_point[0], + endTime: time_point[3] + }) + + // 寮傚父鍖洪棿鏁版嵁鍔犱笂鍓嶅悗45鍒嗛挓鏁版嵁 + const allTimeData = response.data.data + + // x杞存棩鏈熸椂闂� + let xData = [] + // y杞� 瓒呮爣娌圭儫娴撳害 + let yData = [] + let timeAndValue = {} + + // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�15鍒嗛挓涓洪棿闅� + timeAndValue = index.keepContinuousByEachFiftyMinutes( + time_point[0], + time_point[3], + allTimeData + ) + xData = timeAndValue['xAxis'] + yData = timeAndValue['yAxis'] + + // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩 + let beginIndex = xData.findIndex((item) => item === beginTime) + let endIndex = xData.findIndex((item) => item === endTime) + + this.flag.banTouch = 0 + this.loading.lineChart = false + + // 杩斿洖鎶樼嚎鍥剧殑閰嶇疆椤圭殑鍙傛暟 + return { + xData, + yData, + exceptionBeginTime: beginTime, + exceptionEndTime: endTime, + beginIndex, + endIndex, + exceptionName: exception, + areaObj: '', + lineColor: '', + exceptionType + } + }, + + /** + * description锛氭暟鎹己澶卞紓甯告椂锛岃缃殑琛ㄦ牸鏁版嵁 + */ + setOfflineTbleData({ name, mnCode, dutyCompany, beginTime, endTime }) { + // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓 + const abnormalTimeTenMinute = index.descFiftyTime(beginTime, endTime) + + // 瀵硅〃鏍兼暟鎹繘琛岄噸鏋� + this.historyData = [] + for (let i = 0; i < abnormalTimeTenMinute.length; i++) { + this.historyData.push({ + name: name, + mnCode: mnCode, + dutyCompany: dutyCompany, + lst: abnormalTimeTenMinute[i], + yData: '' + }) + } + } + } +} +</script> + +<template> + <el-dialog + class="exception-dialog" + v-model="dialogTableVisible" + draggable + align-center + height="700px" + width="700px" + > + + + <!-- 澶� --> + <template #header> + <div class="diag-head"> + <div class="diag-head-text"> + <div><span class="diag-head-text1">绔欑偣鍚嶇О锛�</span>{{ row.name }}</div> + <div><span class="diag-head-text1">璁惧缂栧彿锛�</span>{{ row.mnCode }}</div> + <div><span class="diag-head-text1">杩愮淮鍟嗭細</span>{{ row.dutyCompany }}</div> + <div> + <span class="diag-head-text1">寮傚父鏃堕棿娈碉細</span>{{ row.beginTime }} ~ + {{ row.endTime }} + </div> + </div> + </div> + + + <!-- <div class="chart-jump-button"> + <el-button + type="danger" + :loading="loading.preButton" + :disabled="isPreCantouch || flag.banTouch" + @click="getNextRowData" + >涓婃潯寮傚父</el-button + > + <el-button + type="danger" + :loading="loading.afterButton" + :disabled="isNextCantouch || flag.banTouch" + @click="getPreviousRowData" + >涓嬫潯寮傚父</el-button + > + </div> --> + + + </template> + + + <!-- 鍥惧舰 --> + <DustLineChart :option="lineChartOption" v-loading="loading.lineChart"></DustLineChart> + + <!-- 琛ㄦ牸 --> + <div> + <el-table :data="historyData" size="default" height="200" border> + <el-table-column + type="index" + label="搴忓彿" + width="60px" + align="center" + fixed + ></el-table-column> + + <el-table-column prop="lst" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip /> + <el-table-column prop="yData" label="TSP(mg/m鲁)" align="center" show-overflow-tooltip /> + <el-table-column prop="flag" label="鏁版嵁鏍囪瘑" align="center" show-overflow-tooltip /> + </el-table> + </div> + + <template #footer> + <div class="dialog-footer"> + <el-tag type="success" class="mx-1" effect="dark" round + ><span class="table-line-lable" v-show="row.exceptionType == '0'">缂哄け鏁版嵁锛� </span> + <span + v-show=" + row.exceptionType == '1' || + row.exceptionType == '2' || + row.exceptionType == '3' || + row.exceptionType == '4' || + row.exceptionType == '5' || + row.exceptionType == '6' || + row.exceptionType == '7' || + row.exceptionType == '8' + " + >寮傚父鏁版嵁锛�</span + > + <span class="table-line-num">{{ historyData.length }}鏉�</span> + <span v-show="row.exceptionType == '0'"> (閫昏緫璁$畻)</span> + </el-tag> + <el-text v-show="row.exceptionType == '8'" type="warning" class="dialog-footer-text" + >鏁版嵁鏍囪瘑A涓烘暟鎹暱鏈熺己澶�,绯荤粺鑷姩琛ュ叏</el-text + > + </div> + </template> + + + </el-dialog> +</template> + +<style scoped> +/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */ + +.diag-head { + /* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */ + min-height: 200px; +} +.diag-head-text1 { + /* 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� */ + font-weight: bold; +} + +.diag-head-text > div { + /* 瀵硅瘽妗嗗紓甯告椂闂存 */ + margin-top: 15px; +} +.diag-head-text { + margin: 10px; + padding: 10px; + background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%); + border: 2px solid #7bc0fc; +} +.chart-jump-button { + display: flex; + justify-content: right; +} + +.mx-1 { + /* position: absolute; + left: 10px; + bottom: 10px; */ + justify-content: flex-start; +} +.dialog-footer { + display: flex; +} +.dialog-footer-text { + justify-content: flex-end; + margin-left: auto; + font-size: 14px; + /* color: #333333; */ +} +/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */ +</style> diff --git a/src/views/exception/components/CompFlightInspection.vue b/src/views/exception/components/CompFlightInspection.vue index b2dbd4f..b860699 100644 --- a/src/views/exception/components/CompFlightInspection.vue +++ b/src/views/exception/components/CompFlightInspection.vue @@ -176,7 +176,7 @@ // 鏍囪浣� flag: { - // 鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮 + // 鏁版嵁鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮 banTouch: 0, // 0浠h〃鍒嗛〉锛�1浠h〃涓嶅垎椤� originClick: 0 @@ -549,7 +549,6 @@ let endIndex = dateList.findIndex((item) => item === exceptionET) // 璁剧疆鎶樼嚎鍥鹃厤缃」 - // this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex) this.dialog.option = exceptionOption.setExceptionChartOption( dateList, dustValue, @@ -1363,6 +1362,8 @@ } /* 琛ㄦ牸妯″潡缁撴潫 */ + + /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */ .diag-head { diff --git a/src/views/exception/components/DustLineChart.vue b/src/views/exception/components/DustLineChart.vue index f7b0c85..66f55fd 100644 --- a/src/views/exception/components/DustLineChart.vue +++ b/src/views/exception/components/DustLineChart.vue @@ -4,112 +4,102 @@ **鐖剁粍浠� --> - <template> - <div id="main" class="line-chart-exception"></div> - - </template> - - <script> - import * as echarts from 'echarts'; - - export default { - props: { - option:{ - type:Object, - default(){ - return {} - } - }, - isOpenDialog:{ - type:Boolean - }, - - }, - data() { - return { - chart: null - }; - }, - mounted() { - // 鑾峰彇椤甸潰瀹藉害鐨勪竴鍗� - this.initChart(); - this.chart.clear - this.chart.setOption(this.option,true) - window.addEventListener('resize', this.resizeChart); - }, - watch: { - option(){ - // this.chart.clear - // 涓嶄笌涔嬪墠鐨刼ption杩涜鍚堝苟 - this.chart.setOption(this.option,true) - }, - isOpenDialog(){ - window.addEventListener('resize', this.resizeChart); - }, - }, - - methods: { - initChart() { - // 鍒涘缓echarts瀹炰緥 - this.chart = echarts.init(document.getElementById('main')); - // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹� - const option = { - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - tooltip: {}, - toolbox: { - // 宸ュ叿鏍� - feature: { - // dataZoom: { - // // 鍖哄煙缂╂斁 - // yAxisIndex: 'none' - // }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - type: 'time', - data: [], - }, - yAxis: { - type: 'value', - }, - series: [ - { - name: '棰楃矑鐗╂祿搴�', - type: 'line', - data: [] - } - ] - }; - // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃 - this.chart.setOption(option, true); - }, - - // 璺熼〉闈㈠搷搴斿紡鍙樺寲 - resizeChart() { - this.$nextTick(() => { - if (this.chart) { - this.chart.resize(); - } - }); +<template> + <div id="main" class="line-chart-exception"></div> +</template> + +<script> +import * as echarts from 'echarts' + +export default { + props: { + option: { + type: Object, + default() { + return {} } } - }; - </script> - - - <style scoped> - .line-chart-exception { - width: 600px; - height: 250px; - margin-bottom: 20px; - min-width: 500px; + }, + data() { + return { + chart: null + } + }, + mounted() { + // 鑾峰彇椤甸潰瀹藉害鐨勪竴鍗� + this.initChart() + this.chart.clear + this.chart.setOption(this.option, true) + window.addEventListener('resize', this.resizeChart) + }, + watch: { + option() { + // this.chart.clear + // 涓嶄笌涔嬪墠鐨刼ption杩涜鍚堝苟 + this.chart.setOption(this.option, true) + } + }, + + methods: { + initChart() { + // 鍒涘缓echarts瀹炰緥 + this.chart = echarts.init(document.getElementById('main')) + // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹� + const option = { + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + tooltip: {}, + toolbox: { + // 宸ュ叿鏍� + feature: { + // dataZoom: { + // // 鍖哄煙缂╂斁 + // yAxisIndex: 'none' + // }, + // 淇濆瓨涓哄浘鐗� + saveAsImage: {} + } + }, + xAxis: { + type: 'time', + data: [] + }, + yAxis: { + type: 'value' + }, + series: [ + { + name: '棰楃矑鐗╂祿搴�', + type: 'line', + data: [] + } + ] + } + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃 + this.chart.setOption(option, true) + }, + + // 璺熼〉闈㈠搷搴斿紡鍙樺寲 + resizeChart() { + this.$nextTick(() => { + if (this.chart) { + this.chart.resize() + } + }) + } } - </style> - \ No newline at end of file +} +</script> + +<style scoped> +.line-chart-exception { + width: 600px; + height: 250px; + margin-bottom: 20px; + min-width: 500px; +} +</style> diff --git a/vite.config.js b/vite.config.js index 587a16e..2e364ce 100644 --- a/vite.config.js +++ b/vite.config.js @@ -45,5 +45,8 @@ '@': fileURLToPath(new URL('./src', import.meta.url)) } }, + server: { + host: '0.0.0.0' + } }) -- Gitblit v1.9.3