From 34257f504330191b1a698eb48b52217095db47fe Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期一, 04 九月 2023 18:10:46 +0800 Subject: [PATCH] 扬尘vue --- src/views/exception/FlightInspection.vue | 200 --- src/views/line_graph/DataRiskModel.vue | 22 src/views/setting/SetConfiguration.vue | 76 + src/utils/exception_common_function/index.js | 138 ++ src/views/exception/SiteAuditAssistance.vue | 1269 +++++++++++------------ src/views/data_management/BusinessReport.vue | 32 src/stores/counter.js | 9 src/views/login/LoginSystem.vue | 1 src/utils/test.js | 5 src/views/line_graph/DataRiskRank.vue | 25 auto-imports.d.ts | 1 src/router/index.ts | 131 +- src/views/data_management/HistoryData.vue | 328 ++++++ src/sfc/TimeSelectWithShortCuts.vue | 175 +- src/views/pass_login/LoginAndGetData.vue | 25 src/views/exception/components/DustExceptionText.vue | 0 src/api/audit/submitApi.js | 62 + src/views/line_graph/SiteComprehensiveRskRanking.vue | 2 .eslintrc-auto-import.json | 3 components.d.ts | 5 src/sfc/BreadCrumb.vue | 42 src/views/line_graph/components/LineChart.vue | 10 src/main.ts | 12 /dev/null | 385 ------- src/api/exportExcel/requetsApi.js | 5 src/sfc/ButtonExportExcel.vue | 49 src/utils/common.js | 38 src/views/exception/components/DustLineChart.vue | 0 src/components/layout/AppHeader.vue | 16 src/components/layout/AppAside.vue | 56 src/views/data_management/DataAccessManagement.vue | 0 src/sfc/ButtonClick.vue | 50 32 files changed, 1,726 insertions(+), 1,446 deletions(-) diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json index 1078dcf..cb5e860 100644 --- a/.eslintrc-auto-import.json +++ b/.eslintrc-auto-import.json @@ -59,6 +59,7 @@ "watchEffect": true, "watchPostEffect": true, "watchSyncEffect": true, - "ElMessage": true + "ElMessage": true, + "ElMessageBox": true } } diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 44c3335..3cabe28 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -6,6 +6,7 @@ declare global { const EffectScope: typeof import('vue')['EffectScope'] const ElMessage: typeof import('element-plus/es')['ElMessage'] + const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const computed: typeof import('vue')['computed'] const createApp: typeof import('vue')['createApp'] const customRef: typeof import('vue')['customRef'] diff --git a/components.d.ts b/components.d.ts index f4d5460..733691a 100644 --- a/components.d.ts +++ b/components.d.ts @@ -13,6 +13,8 @@ ElAside: typeof import('element-plus/es')['ElAside'] ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete'] ElAvatar: typeof import('element-plus/es')['ElAvatar'] + ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] + ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] ElCard: typeof import('element-plus/es')['ElCard'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] @@ -42,6 +44,7 @@ ElSelect: typeof import('element-plus/es')['ElSelect'] ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] ElSpace: typeof import('element-plus/es')['ElSpace'] + ElStatistic: typeof import('element-plus/es')['ElStatistic'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] @@ -57,10 +60,12 @@ IEpArrowDown: typeof import('~icons/ep/arrow-down')['default'] IEpBell: typeof import('~icons/ep/bell')['default'] IEpDataLine: typeof import('~icons/ep/data-line')['default'] + IEpDownload: typeof import('~icons/ep/download')['default'] IEpExpand: typeof import('~icons/ep/expand')['default'] IEpFold: typeof import('~icons/ep/fold')['default'] IEpHistogram: typeof import('~icons/ep/histogram')['default'] IEpMonitor: typeof import('~icons/ep/monitor')['default'] + IEpSearch: typeof import('~icons/ep/search')['default'] IEpStopwatch: typeof import('~icons/ep/stopwatch')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] diff --git a/src/api/audit/submitApi.js b/src/api/audit/submitApi.js new file mode 100644 index 0000000..9e34fa5 --- /dev/null +++ b/src/api/audit/submitApi.js @@ -0,0 +1,62 @@ +import { $http } from '@/api/index.js'; + +export default { + /** + * 鎻愪氦瀹℃牳 + * @param锛� 瀹℃牳浜猴紝瀹℃牳浜哄娉紝浼佷笟澶囨敞锛屽紓甯歌褰曠紪鍙凤紝 璇ユ潯寮傚父鐨勫鏍哥姸鎬� + * @returns锛� + */ + submitAudit(reviewer,checkerNotes,enterpriseNotes,id,status){ + const params = { + // checker:reviewer, + checkerContent:checkerNotes, + enterpriseContent:enterpriseNotes, + exceptionId:id, + auditStatus:status + } + if(reviewer == '' || reviewer == null){ + params.checker = 'admin' + }else{ + params.checker = reviewer + } + return $http.post('/dust/audit',params) + }, + + /** + * 杩斿洖瀹℃牳琛ㄦ墍鏈夋暟鎹� + * @param锛� + * @returns锛� + */ + backAuditAllData(){ + return $http.get('dust/auditAllData') + }, + + /** + * 鏇存柊瀹℃牳璁板綍 + * @param锛� 寮傚父缂栧彿Id锛屽鏍镐汉澶囨敞锛屼紒涓氬娉紝璇ユ潯寮傚父鐨勫鏍哥姸鎬� + * @returns锛� + */ + updateAudit(id,checkerContent,enterpriseContent,auditStatus){ + const params = { + exceptionId:id, + auditStatus:auditStatus, + } + if(checkerContent){ + params.checkerContent = checkerContent + } + if(enterpriseContent){ + params.enterpriseContent = enterpriseContent + } + return $http.put('/dust/auditUpdate',params) + }, + getAuditNumByTime(beginTime,endTime){ + if(beginTime!='' || endTime!=''){ + const params = { + beginTime:beginTime, + endTime:endTime + } + return $http.get('/dust/auditnum',{params:params}) + } + + } +}; diff --git a/src/api/exportExcel/requetsApi.js b/src/api/exportExcel/requetsApi.js index 6757fc1..bd25edc 100644 --- a/src/api/exportExcel/requetsApi.js +++ b/src/api/exportExcel/requetsApi.js @@ -10,6 +10,11 @@ return $http.get('dust/analysisall',{params:argsObj}); }, + /** + * 鏍规嵁绔欑偣锛屾椂闂存鏌ヨ鍘嗗彶琛ㄤ腑鎵�鏈夋暟鎹� + * @param锛� + * @returns锛� + */ fetchAlSiteData(argsObj){ return $http.get('dust/historyall',{params:argsObj}); diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue index 80fabe8..184e19d 100644 --- a/src/components/layout/AppAside.vue +++ b/src/components/layout/AppAside.vue @@ -11,6 +11,7 @@ optionClick: [ ' 鏁版嵁椋庨櫓妯″瀷', '鏁版嵁椋庨櫓鎺掑悕', + '绔欑偣缁煎悎椋庨櫓鎺掑悕', '椋炶宸℃', '绔欑偣瀹℃牳杈呭姪', '鍘嗗彶鏁版嵁绠$悊', @@ -23,11 +24,13 @@ methods:{ calMenuHeight() { const h1 = this.$refs.headerRef.$el.offsetHeight; - return `calc(100vh - ${h1}px `; + return `calc(100vh - ${h1}px - 8px`; }, }, mounted(){ this.menuHeight = this.calMenuHeight(); + console.log('meta:',this.$route.matched); + } }; </script> @@ -41,24 +44,17 @@ class="el-menu-vertical-demo" default-active="2" text-color="#fff" - @open="handleOpen" - @close="handleClose" router :collapse="isCollapseAside" > <el-row ref="headerRef" class="header"> - <el-space> <el-link href="/hdata" class="logo" > - <!-- <img src="@/assets/companylogo.png" alt="" /> --> <h1>鍦ㄧ嚎鐩戞祴鏁版嵁璐ㄩ噺璇勪及涓庨闄╁垎鏋�</h1> - </el-link> - - </el-space> - <div class="line"> - </div> + </el-row> + <hr/> <el-scrollbar :height="menuHeight"> <el-sub-menu index="1"> @@ -74,7 +70,12 @@ <el-menu-item index="analysis" @click="selected = optionClick[1]"> <el-icon><i-ep-Stopwatch /></el-icon> 鏁版嵁椋庨櫓鎺掑悕 + </el-menu-item><el-menu-item index="riskrank" @click="selected = optionClick[2]"> + <el-icon><i-ep-Stopwatch /></el-icon> + 绔欑偣缁煎悎椋庨櫓鎺掑悕 </el-menu-item> + + </el-sub-menu> @@ -83,12 +84,12 @@ <el-icon><i-ep-Histogram /></el-icon> <span class="parent-title">绾夸笂宸℃</span> </template> - <el-menu-item index="edata" @click="selected = optionClick[2]"> + <el-menu-item index="edata" @click="selected = optionClick[3]"> <el-icon><i-ep-Bell /></el-icon> 椋炶宸℃ </el-menu-item> - <el-menu-item index="testdata" @click="selected = optionClick[3]"> + <el-menu-item index="testData" @click="selected = optionClick[4]"> <el-icon><i-ep-Bell /></el-icon> 绔欑偣瀹℃牳杈呭姪 </el-menu-item> @@ -106,18 +107,18 @@ <el-icon><i-ep-Histogram /></el-icon> 鍘嗗彶鏁版嵁绠$悊 </el-menu-item> - <!-- <el-menu-item index="management" @click="selected = optionClick[5]"> + <el-menu-item index="management" @click="selected = optionClick[5]"> <el-icon><i-ep-Histogram /></el-icon> 鏁版嵁鎺ュ叆绠$悊 </el-menu-item> <el-menu-item index="report" @click="selected = optionClick[6]"> <el-icon><i-ep-Histogram /></el-icon> 涓氬姟鎶ヨ〃 - </el-menu-item> --> + </el-menu-item> </el-sub-menu> - <!-- <el-sub-menu index="4"> + <el-sub-menu index="4"> <template #title> <el-icon><i-ep-DataLine /></el-icon> <span class="parent-title">閰嶇疆绠$悊</span> @@ -127,7 +128,7 @@ <el-icon><i-ep-Histogram /></el-icon> 鏁版嵁鎺ュ叆閰嶇疆 </el-menu-item> - </el-sub-menu> --> + </el-sub-menu> </el-scrollbar> </el-menu> @@ -137,8 +138,6 @@ <style lang="scss" scoped> .el-aside { background-color: #2876aa; - - height: 100vh; width: auto; } @@ -148,16 +147,17 @@ width: 220px; border-right: none; - &.el-menu--collapse { //渚ц竟鏍忔姌鍙犳椂鐨勬牱寮� width: 65px; - & h1 { //鎶樺彔鏃堕殣钘廻1鏂囧瓧 display: none; } & span { + display: none; + } + & hr { display: none; } } @@ -171,10 +171,11 @@ text-decoration: none; color: black; margin-left: 20px; - img { - width: 32px; - height: 32px; - } + margin-right: 20px; + // img { + // width: 32px; + // height: 32px; + // } } @@ -188,10 +189,5 @@ font-weight: bold; font-size: 18px; } -// .line { -// width: 180px; -// border: 1px solid rgb(255,255,255,0.2); -// margin: 0px; -// padding: 0px; -// } + </style> diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue index 9c51934..54e7f4a 100644 --- a/src/components/layout/AppHeader.vue +++ b/src/components/layout/AppHeader.vue @@ -1,8 +1,11 @@ <script > import { isCollapse } from './isCollapse' import { selectedName } from './selectName' + import BreadCrumb from '@/sfc/BreadCrumb.vue' export default { - + components:{ + BreadCrumb, + }, data() { return{ isCollapseHeader: isCollapse , //鎶樺彔 @@ -37,16 +40,11 @@ <i-ep-Expand v-show="isCollapseHeader" /> <i-ep-Fold v-show="!isCollapseHeader"/> </el-icon> - {{ selected }} + <!-- {{ selected }} --> <!-- 闈㈠寘灞� --> - <!-- <el-breadcrumb separator="/"> - <el-breadcrumb-item :to="{ path: '/hdata' }">涓婚〉</el-breadcrumb-item> - <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item> --> - <!-- <el-breadcrumb-item>promotion list</el-breadcrumb-item> - <el-breadcrumb-item>promotion detail</el-breadcrumb-item> --> - <!-- </el-breadcrumb> --> - + + <BreadCrumb></BreadCrumb> <!-- 涓嬫媺鑿滃崟 --> <el-dropdown> diff --git a/src/main.ts b/src/main.ts index 3d9bbbc..bc891f6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,11 +14,21 @@ const app = createApp(App) +function SecretPiniaPlugin() { + return { secret: 'the cake is a lie',vue:'333.0' } + } + + const pinia = createPinia() + // 灏嗘彃浠舵彁渚涚粰 pinia + pinia.use(SecretPiniaPlugin) + // pinia.use(() => ({'澶�':'闆ㄥぉ'})) + + // axios.defaults.baseURL = 'http://192.168.1.4:8081' axios.defaults.baseURL = 'http://localhost:8081' app.config.globalProperties.$http = axios -app.use(createPinia()) +app.use(pinia) app.use(router) diff --git a/src/router/index.ts b/src/router/index.ts index e80b211..b7232a0 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,77 +7,92 @@ { path: '/layout', name: 'home', + meta: { title: '棣栭〉' }, component: () => import('@/components/layout/AppLayout.vue'), children: [ - // 鏁版嵁鍒嗛櫓妯″瀷 - { - path:"/avgDay", - name:'avgDay', - component: () => import('@/views/line_graph/DataRiskModel.vue') - }, + + // 鏁版嵁鍒嗛櫓妯″瀷 + { + path: "/avgDay", + name: 'avgDay', + meta: { title: '鏁版嵁鍒嗛櫓妯″瀷' }, + component: () => import('@/views/line_graph/DataRiskModel.vue') + }, + // 鏁版嵁椋庨櫓鎺掑悕 + { + path: "/analysis", + name: 'analysis', + meta: { title: '鏁版嵁椋庨櫓鎺掑悕' }, + component: () => import('@/views/line_graph/DataRiskRank.vue') + }, + // 鏁版嵁椋庨櫓鎺掑悕 + { + path: "/riskrank", + name: 'riskrank', + meta: { title: '鏁版嵁椋庨櫓鎺掑悕' }, + component: () => import('@/views/line_graph/SiteComprehensiveRskRanking.vue') + }, + + // 椋炶宸℃ + { + path: "/edata", + name: 'edata', + meta: { title: '椋炶宸℃' }, + component: () => import('@/views/exception/FlightInspection.vue') + }, - // 鏁版嵁椋庨櫓鎺掑悕 - { - path:"/analysis", - name:'analysis', - component: () => import('@/views/line_graph/DataRiskRank.vue') - }, - - // 鍘嗗彶鏁版嵁绠$悊 - { - path:"/hdata", - name:'hdata', - component: () => import('@/views/origin_data/HistoryData.vue') - }, - - // 椋炶宸℃ - { - path:"/edata", - name:'edata', - component: () => import('@/views/exception/FlightInspection.vue') - }, - - // 绔欑偣瀹℃牳杈呭姪 - { - path:"/testdata", - name:'testdata', - component: () => import('@/views/exception/SiteAuditAssistance.vue') - }, + // 绔欑偣瀹℃牳杈呭姪 + { + path: "/testData", + name: 'testData', + meta: { title: '绔欑偣瀹℃牳杈呭姪' }, + component: () => import('@/views/exception/SiteAuditAssistance.vue') + }, - // 鏁版嵁鎺ュ叆閰嶇疆 - { - path:"/setting", - name:'setting', - component: () => import('@/views/setting/SetConfiguration.vue') - }, + + { + path: "/hdata", + name: 'hdata', + meta: { title: '鍘嗗彶鏁版嵁绠$悊' }, + component: () => import('@/views/data_management/HistoryData.vue') + }, + // 鏁版嵁鎺ュ叆绠$悊 + { + path: "/management", + name: 'management', + meta: { title: '鏁版嵁鎺ュ叆绠$悊' }, + component: () => import('@/views/data_management/DataAccessManagement.vue') + }, - // 鏁版嵁鎺ュ叆绠$悊 - { - path:"/management", - name:'management', - component: () => import('@/views/origin_data/DataAccessManagement.vue') - }, - - // 涓氬姟鎶ヨ〃 - { - path:"/report", - name:'report', - component: () => import('@/views/origin_data/BusinessReport.vue') - }, - + // 涓氬姟鎶ヨ〃 + { + path: "/report", + name: 'report', + meta: { title: '涓氬姟鎶ヨ〃' }, + component: () => import('@/views/data_management/BusinessReport.vue') + }, + + // 鏁版嵁鎺ュ叆閰嶇疆 + { + path: "/setting", + name: 'setting', + meta: { title: '鏁版嵁鎺ュ叆閰嶇疆' }, + component: () => import('@/views/setting/SetConfiguration.vue') + }, + ], }, // 鐧婚檰椤甸潰 { - path:"/login", - name:'fst', + path: "/login", + name: 'fst', component: () => import('@/views/login/LoginSystem.vue') - }, - { + }, + { path: '/', - redirect:'/hdata' + redirect: '/edata' }, ] }) diff --git a/src/sfc/BreadCrumb.vue b/src/sfc/BreadCrumb.vue new file mode 100644 index 0000000..cfa6250 --- /dev/null +++ b/src/sfc/BreadCrumb.vue @@ -0,0 +1,42 @@ +<!-- 闈㈠寘灞� --> +<script> +import { ArrowRight } from '@element-plus/icons-vue' +export default { + data(){ + return{ + list:[] + } + }, + setup(){ + return {ArrowRight} + }, + watch:{ + $route(to,from){ + this.list = to.matched + } + }, + mounted (){ + this.list = this.$route.matched + }, + methods:{ + } +} +</script> + +<template> + <el-breadcrumb :separator-icon="ArrowRight"> + <el-breadcrumb-item v-for="item in list" :key="item.path" :to="{ path: '/' }"> + <router-link :to="item.path">{{ item.meta.title }}</router-link> + </el-breadcrumb-item> + </el-breadcrumb> +</template> +<style scoped> +.el-breadcrumb__inner a { + font-weight: 500; + color: rgba(0, 0, 0); +} + +.el-breadcrumb__item:last-child .el-breadcrumb__inner a { + color: rgb(209, 207, 207); +} +</style> \ No newline at end of file diff --git a/src/sfc/ButtonClick.vue b/src/sfc/ButtonClick.vue new file mode 100644 index 0000000..35a9fc2 --- /dev/null +++ b/src/sfc/ButtonClick.vue @@ -0,0 +1,50 @@ +<!-- + 鎼滅储鎸夐挳 + 鐐瑰嚮鎸夐挳鍚庯紝鍚戠埗缁勪欢鍙戠敓鐐瑰嚮浜嬩欢锛岀敱鐖剁粍浠舵潵瀹屾垚鐐瑰嚮鍚庣殑鍏蜂綋鎵ц + + **鐖剁粍浠� + <ButtonClick content="鎼滅储" type="warning" :loading="loading.queryButton" @do-search="doSearch"></ButtonClick> + --> +<script> +export default { + props:{ + // 鎸夐挳鏂囧瓧 + content:{ + type:String, + default:'鐐瑰嚮' + }, + // 鎸夐挳鏍峰紡 + type:{ + type:String, + default:'success' + }, + // 鍔犺浇鏁堟灉 + loading:{ + type:Boolean, + default:false + }, + size:{ + type:String, + default:'default' + } + }, + emits:['doSearch' ], +} +</script> + +<template> + <div> + <el-button :type="type" :loading="loading" :size="size" @click="$emit('doSearch')"> + <el-icon > + <i-ep-Search/> + </el-icon> + {{ content }} + </el-button> + </div> +</template> +<style scoped> +.el-icon { + margin-right: 6px; + font-size: 1.2em; +} +</style> \ No newline at end of file diff --git a/src/sfc/ButtonExportExcel.vue b/src/sfc/ButtonExportExcel.vue new file mode 100644 index 0000000..cf368ee --- /dev/null +++ b/src/sfc/ButtonExportExcel.vue @@ -0,0 +1,49 @@ +<!-- + 瀵煎嚭鎴怑xcel缁勪欢 + + **鐖剁粍浠� + <ButtonExportExcel content="瀵煎嚭鏁版嵁" type="success" :loading="exportButton" @do-export="exportDom"></ButtonExportExcel> + --> +<script> +export default { + props: { + // 鎸夐挳鏂囧瓧 + content: { + type: String, + default: '瀵煎嚭鏁版嵁' + }, + // 鎸夐挳鏍峰紡 + type: { + type: String, + default: 'success' + }, + // 鍔犺浇鏁堟灉 + loading: { + type: Boolean, + default: false + }, + size: { + type: String, + default: 'default' + } + }, + emits: ['doExport'], +} +</script> + +<template> + <el-button :type="type" :size="size" @click="$emit('doExport')" :loading="loading" round> + <el-icon > + <i-ep-Download/> + </el-icon> + {{ content }} + </el-button> +</template> +<style scoped> + .el-icon { + margin-right: 6px; + margin-bottom:2px; + font-size: 1.2em; + } + +</style> \ No newline at end of file diff --git a/src/sfc/ExportExcel.vue b/src/sfc/ExportExcel.vue deleted file mode 100644 index 3965ce1..0000000 --- a/src/sfc/ExportExcel.vue +++ /dev/null @@ -1,27 +0,0 @@ -<script > - export default { - props:['tableData'], - data() { - return{ - - } - }, - methods: { - fun(){ - - } - } -} -</script> - -<template> - <div> - <export> - - </export> - </div> -</template> - -<style lang="scss" scoped> - -</style> \ No newline at end of file diff --git a/src/sfc/FanPurifierChart.vue b/src/sfc/FanPurifierChart.vue deleted file mode 100644 index 3540ddc..0000000 --- a/src/sfc/FanPurifierChart.vue +++ /dev/null @@ -1,124 +0,0 @@ -<!-- 娌圭儫娴撳害琛� --> -<script> -import * as echarts from 'echarts'; -export default { - // 浠庡垎閽熸暟鎹〃涓殑鏁版嵁 - props: ['minuteData'], - data() { - return {}; - }, - watch:{ - // MinuteData鍙戠敓鏀瑰彉鏃� 閲嶆柊鍔犺浇鍥惧舰 - minuteData(newMinute){ - if(newMinute){ - this.drawChart() - } - } - }, - methods: { - //鍐欏ソ鍚庣瀵瑰簲鍗冲彲 - drawChart() { - console.log('浼犻�掓暟鎹负椋庢満搴�', this.minuteData); - // x杞存棩鏈熸椂闂� - let dateList = []; - // 鍘嗗彶椋庢満鐢� - let mvFanElectricity = []; - // 鍑�鍖栧櫒鐢垫祦 - let mvPurifierElectricity = []; - - // item涓庡悗绔疄浣撶被鐨勫搴� - // 姣旂巼 - this.minuteData.forEach((item) => { - //x杞存棩鏈� - dateList.push(item.mvDataTime); - // 鍘嗗彶椋庢満鐢� - mvFanElectricity.push(item.mvFanElectricity); - // 鍑�鍖栧櫒鐢垫祦 - mvPurifierElectricity.push(item.mvPurifierElectricity); - }); - - let chart = echarts.init(this.$refs.chart); - chart.setOption({ - title: { - text: '鐩戞祴鏁版嵁' - //left: 'center' - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - tooltip: {}, - - legend: { - data: ['椋庢満鐢垫祦', '鍑�鍖栧櫒鐢垫祦'] - }, - toolbox: { - // 宸ュ叿鏍� - feature: { - dataZoom: { - // 鍖哄煙缂╂斁 - yAxisIndex: 'none' - }, - // 閰嶇疆椤硅繕鍘� - restore: {}, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - data: dateList, - name: '鏃堕棿' - }, - - yAxis: { - type: 'value', - axisLabel: { - show: true, - interval: 'auto' - }, - name: 'A' - }, - series: [ - { - name: '椋庢満鐢垫祦', - type: 'line', - data: mvFanElectricity - }, - { - name: '鍑�鍖栧櫒鐢垫祦', - type: 'line', - data: mvPurifierElectricity - } - ] - },true); - // // 鑷�傚簲鍥捐〃澶у皬 - // window.addEventListener('resize', function() { - // chart.resize(); - // }); - }, - - - }, - mounted() { - - setTimeout(() => { - this.drawChart(); - }, 300); - - } -}; -</script> - -<template> - <div ref="chart" class="fume-constration"></div> -</template> - -<style scoped> -.fume-constration { - width:100%; - height: 500px; - margin-top: 25px; -} -</style> diff --git a/src/sfc/FumeFanPurifierChart.vue b/src/sfc/FumeFanPurifierChart.vue deleted file mode 100644 index ce1f156..0000000 --- a/src/sfc/FumeFanPurifierChart.vue +++ /dev/null @@ -1,118 +0,0 @@ -<!-- 鍘嗗彶娌圭儫 椋庢満鐢� 鍑�鍖栧櫒 鎶樼嚎鍥剧粍浠� -瀛愮粍浠舵湁鍩烘湰鐨勬牱寮� -浣跨敤鍚屼竴涓浘褰㈠疄渚嬶紝鎺ュ彈鐖剁粍浠朵紶鍏ョ殑鎶樼嚎鍥緊ption - -**鐖剁粍浠� -const lineChart = defineAsyncComponent(() => - import('../sfc/FumeFanPurifierChart.vue') -) - -<lineChart :chartData="options"></lineChart> - --> - <template> - <div ref="chart" class="line-chart"></div> -</template> - -<script> -import * as echarts from 'echarts'; - -export default { - props: { - chartData: { - type: Array, - required: true - } - }, - data() { - return { - chart: null - }; - }, - mounted() { - this.renderChart(); - this.chart.setOption(this.chartData) - window.addEventListener('resize',this.resizeChart) - }, - watch: { - chartData() { - // this.renderChart(); - this.chart.setOption(this.chartData) - } - - }, - beforeUnmount() { - if (this.chart) { - this.chart.dispose(); - } - }, - methods: { - renderChart() { - if (this.chart) { - // this.chart.dispose(); - // this.chart.setOption(this.chartData); - } - - // 鍒涘缓echarts瀹炰緥 - this.chart = echarts.init(this.$refs.chart); - - // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹� - const option = { - title: { - // text: '寮傛鏁版嵁鍔犺浇绀轰緥' - }, - tooltip: {}, - - toolbox: { - // 宸ュ叿鏍� - feature: { - dataZoom: { - // 鍖哄煙缂╂斁 - yAxisIndex: 'none' - }, - - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - name: '鏃堕棿', - data: [] - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - interval: 'auto' - }, - name: 'mg/m鲁' - }, - series: [ - { - name: 'fume', - type: 'line', - data: [] - } - ] - }; - - // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃 - this.chart.setOption(option, true); - // this.chart.setOption(this.chartData, true); - }, - - // 璺熼〉闈㈠搷搴斿紡鍙樺寲 - resizeChart(){ - this.chart.resize() - } - } -}; -</script> - -<style> -.line-chart { - width: 100%; - height: 500px; - margin-top: 25px; -} - -</style> diff --git a/src/sfc/TableD.vue b/src/sfc/TableD.vue deleted file mode 100644 index 7b90494..0000000 --- a/src/sfc/TableD.vue +++ /dev/null @@ -1,42 +0,0 @@ -<!-- 琛ㄦ牸缁勪欢 --> -<!-- 璁炬垚缁勪欢 鍒楀悕涓嶈兘闅忔剰璋冩暣椤哄簭浜� -鎴栬�呯敱鐖剁粍浠朵紶閫掑垪鍚嶅氨鍙互璋冩暣椤哄簭 --> -<script> - export default { - props:{ - tableData :{ - type: Array, - required:true - } - }, - data() { - return{ - column:[] - } - }, - mounted() { - - }, - methods: { - - // 鑾峰彇琛ㄦ牸鐨勫垪瀛楁 - getColumnName(){ - if(tableData){ - this.column = tableData[0].keys() - } - } - } -} -</script> - -<template> - <div> - <el-table :data="tableData" height="600px" style="width: 100%;"> - <el-table-column :prop="item" label="a" v-for="item in column" :key="item" width="100%"/> - </el-table> - </div> -</template> - -<style lang="scss" scoped> - -</style> \ No newline at end of file diff --git a/src/sfc/TimeSelectWithShortCuts.vue b/src/sfc/TimeSelectWithShortCuts.vue index 5cf713a..01b6bc1 100644 --- a/src/sfc/TimeSelectWithShortCuts.vue +++ b/src/sfc/TimeSelectWithShortCuts.vue @@ -13,83 +13,110 @@ *** --> <script> -import dayjs from 'dayjs' - export default { - emits: ['submitTime'], - data() { - return{ - //淇濆瓨寮�濮嬪拰缁撴潫鏃堕棿 - // 闅忎究璁剧疆鍒濆鍊� 锛宮ounted鏃跺啀璁炬纭殑锛岀洰鐨勬槸鏀瑰彉鏃堕棿浜嗚Е鍙慶hange - time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'], - shortcuts:[], - } - }, - mounted() { - this.initShortCuts() - this.initOneWeekAgoTime() - this.$emit('submitTime', this.time); - }, - methods: { - initShortCuts(){ - this.shortcuts = [ - { - text: '鍓嶄竴鏃�', - value: () => { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24) - return [start, end] - }, - }, - - { - text: '鍓�7澶�', - value: () => { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) - return [start, end] - }, - }, - { - text: '鍓嶄竴鏈�', - value: () => { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) - return [start, end] - }, - }, - -] - }, - initOneWeekAgoTime(){ - // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂翠负涓�鍛ㄥ墠 - this.time[0] = dayjs().subtract(6, 'week').format('YYYY-MM-DD HH:mm:ss'); - this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss'); +import dayjs from 'dayjs'; +export default { + props: { + timeType: { + type: String, + default: 'month' } - } -} + }, + emits: ['submitTime'], + data() { + return { + //淇濆瓨寮�濮嬪拰缁撴潫鏃堕棿 + // 闅忎究璁剧疆鍒濆鍊� 锛宮ounted鏃跺啀璁炬纭殑锛岀洰鐨勬槸鏀瑰彉鏃堕棿浜嗚Е鍙慶hange + time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'], + shortcuts: [] + }; + }, + mounted() { + this.initShortCuts(); + this.initOneWeekAgoTime(); + this.$emit('submitTime', this.time); + }, + methods: { + initShortCuts() { + this.shortcuts = [ + { + text: '鍓嶄竴鏃�', + value: () => { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24); + return [start, end]; + } + }, + + { + text: '鍓�7澶�', + value: () => { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); + return [start, end]; + } + }, + { + text: '鍓嶄竴鏈�', + value: () => { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); + return [start, end]; + } + } + ]; + }, + initOneWeekAgoTime() { + switch (this.timeType) { + case 'day': + this.time[0] = dayjs() + .subtract(1, 'day') + .format('YYYY-MM-DD HH:mm:ss'); + this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss'); + break; + case 'week': + this.time[0] = dayjs() + .subtract(1, 'week') + .format('YYYY-MM-DD HH:mm:ss'); + this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss'); + break; + case 'month': + this.time[0] = dayjs() + .subtract(1, 'month') + .format('YYYY-MM-DD HH:mm:ss'); + this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss'); + break; + default: + this.time[0] = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'); + this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss'); + } + } + } +}; </script> <template> - <div class="block"> - <span class="demonstration">璧锋鏃堕棿锛�</span> - <el-date-picker - v-model="time" - type="datetimerange" - :shortcuts="shortcuts" - range-separator="~" - start-placeholder="寮�濮嬫椂闂�" - end-placeholder="缁撴潫鏃堕棿" - value-format="YYYY-MM-DD HH:mm:ss" - @change="$emit('submitTime', time)" - class="pick-date" - /> + <div class="block"> + <span class="demonstration">璧锋鏃堕棿锛�</span> + <div class="pick-date"> + <el-date-picker + v-model="time" + type="datetimerange" + :shortcuts="shortcuts" + range-separator="~" + start-placeholder="寮�濮嬫椂闂�" + end-placeholder="缁撴潫鏃堕棿" + value-format="YYYY-MM-DD HH:mm:ss" + @change="$emit('submitTime', time)" + + /> + </div> </div> </template> -<style scoped> +<style scoped> .block { display: flex; width: 570px; @@ -101,7 +128,7 @@ font-size: 16px; } -.pick-date { - margin-top: 5px; -} -</style> \ No newline at end of file +/* .pick-date { + width: 200px; +} */ +</style> diff --git a/src/stores/counter.ts b/src/stores/counter.js similarity index 73% rename from src/stores/counter.ts rename to src/stores/counter.js index b6757ba..fb8a7a3 100644 --- a/src/stores/counter.ts +++ b/src/stores/counter.js @@ -1,11 +1,12 @@ -import { ref, computed } from 'vue' import { defineStore } from 'pinia' - export const useCounterStore = defineStore('counter', () => { + + const count = ref(0) const doubleCount = computed(() => count.value * 2) - function increment() { - count.value++ + function increment(num) { + count.value = num + count.value + 1 + return 1 } return { count, doubleCount, increment } diff --git a/src/test/TestDrawer.vue b/src/test/TestDrawer.vue deleted file mode 100644 index c129336..0000000 --- a/src/test/TestDrawer.vue +++ /dev/null @@ -1,548 +0,0 @@ -<!-- 瀹炴椂鐩戞祴 --> - -<script> -import axiosInstanceInstance from '../utils/request.js'; -// 寮傛缁勪欢 -const DashBoard = defineAsyncComponent(() => - import('../sfc/DashboardChart.vue') -) -export default { - components:{ - DashBoard - }, - data() { - return { - // 榛樿鎵撳紑鐨勬姌鍙犻潰鏉� - activeNames:'1', - // 瀹炴椂鏇存柊闂撮殧 60绉� - timeInterval:60000, - // 澶栭儴璁惧 - outside: { - // 鎼滅储 - searchText:'', - isall:false, - isLoading:false, - // 璁惧淇℃伅琛ㄧ殑鏁版嵁 - shopnames: [], - // 褰撳墠灞曠ず鐨勫閫夋缁勫�� - displayedShopnames:[], - // 褰撳墠椤� - currentPage:1, - // 姣忛〉鏄剧ず鐨勬暟閲� - pageSize:5, - // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹� - allDataLoaded:false, - // 鏄惁鍏ㄩ�� - checkAll: false, - isIndeterminate: false, - // 宸查�夋嫨搴楅摵 - checkedShops: [], - //杩斿洖閫夋嫨鐨勬墍鏈夊簵閾虹殑鏁版嵁 - realTimeData: [] - }, - - // 鍐呴儴璁惧 - inner: { - searchText:'', - isall:false, - isLoading:false, - // 鍐呴儴鎺ュ彛杩斿洖鐨勬墍鏈夋暟鎹� - getData:[], - // 閫変腑鐨勫簵閾哄搴斿叏閮ㄥ瓧娈典俊鎭� - inFumeValue:[], - // 鎵�鏈夊簵閾哄悕瀛� - shopnames: [], - // 褰撳墠灞曠ず鐨勫閫夋缁勫�� - displayedShopnames:[], - // 褰撳墠椤� - currentPage:1, - // 姣忛〉鏄剧ず鐨勬暟閲� - pageSize:2, - // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹� - allDataLoaded:false, - // 鏄惁鍏ㄩ�� - checkAll: false, - isIndeterminate: false, - // 宸查�夋嫨搴楅摵 - checkedShops: [] - }, - - // chartInstance: [] - // // 鍐呴儴璁惧 - // devices: [] - }; - }, - watch:{ - // 'outside.checkedShops'(){ - // this.saveOutsideData() - // console.log('111'); - // } - }, - methods: { - //鑾峰彇鎵�鏈夊簵閾哄悕瀛� - getDeviceInfo() { - // 鑾峰彇鎵�鏈夊閮ㄨ澶囩殑搴楅摵鍚嶇О - axiosInstanceInstance.get('/fume/device').then((result) => { - result.data.data.forEach((item) => { - this.outside.shopnames.push(item.diName); - }); - this.outside.displayedShopnames = this.outside.shopnames.slice(0, this.outside.pageSize); - if (this.outside.shopnames.length <= this.outside.pageSize) { - this.outside.allDataLoaded = true; - } - }); - - //浠庡唴閮ㄦ帴鍙h幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉� - axiosInstanceInstance - .get('https://fyami.com.cn/device/min/value/real_time', { - params: { page: 1, per_page: 20 } - }) - .then((result) => { - // 淇濆瓨鍐呴儴鎺ュ彛鑾峰彇鐨勬墍鏈変俊鎭� - this.getData = result.data.data - result.data.data.forEach((item) => { - this.inner.shopnames.push(item.siteName); - }); - this.inner.displayedShopnames = this.inner.shopnames.slice(0, this.inner.pageSize); - if (this.inner.shopnames.length <= this.inner.pageSize) { - this.inner.allDataLoaded = true; - } - - }); - }, - loadMore() { - this.outside.isLoading = true - setTimeout(() => { - const startIndex = this.outside.currentPage * this.outside.pageSize; - const endIndex = startIndex + this.outside.pageSize; - this.outside.displayedShopnames = this.outside.displayedShopnames.concat(this.outside.shopnames.slice(startIndex, endIndex)); - this.outside.currentPage++; - if (this.outside.displayedShopnames.length === this.outside.shopnames.length) { - this.outside.allDataLoaded = true; - this.outside.isall = true - } - this.outside.isLoading = false - }, 100); - }, - loadMoreInner() { - this.inner.isLoading = true - setTimeout(() => { - const startIndex = this.inner.currentPage * this.inner.pageSize; - const endIndex = startIndex + this.inner.pageSize; - this.inner.displayedShopnames = this.inner.displayedShopnames.concat(this.inner.shopnames.slice(startIndex, endIndex)); - this.inner.currentPage++; - if (this.inner.displayedShopnames.length === this.inner.shopnames.length) { - this.inner.allDataLoaded = true; - this.inner.isall = true - } - this.inner.isLoading = false - }, 100); - }, - // 杩囨护鏁版嵁 - filterData (keyword) { - return this.outside.shopnames.filter((item) => item.includes(keyword)); - }, - - // 澶勭悊鎼滅储 - handleSearch (){ - if(this.outside.searchText != ''){ - this.outside.displayedShopnames = this.filterData(this.outside.searchText); - this.outside.currentPage = 1; // 閲嶇疆椤电爜 - this.outside.allDataLoaded = this.outside.displayedShopnames === this.outside.shopnames.length; - } - else - { - // 鍔犺浇榛樿鏁伴噺鐨� - this.outside.displayedShopnames = this.outside.shopnames.slice(0, this.outside.pageSize); - if(this.outside.shopnames.length <= this.outside.pageSize){ - this.outside.allDataLoaded.value = true; - } - this.outside.checkedShops = [] - } - }, - - // 澶勭悊鎼滅储 - handleSearchInner(){ - if(this.inner.searchText != ''){ - this.inner.displayedShopnames = this.filterData(this.inner.searchText); - this.inner.currentPage = 1; // 閲嶇疆椤电爜 - this.inner.allDataLoaded = this.inner.displayedShopnames === this.inner.shopnames.length; - } - else - { - // 鍔犺浇榛樿鏁伴噺鐨� - this.inner.displayedShopnames = this.inner.shopnames.slice(0, this.inner.pageSize); - if(this.inner.shopnames.length <= this.inner.pageSize){ - this.inner.allDataLoaded.value = true; - } - this.inner.checkedShops = [] - } - }, - // 澶栭儴璁惧鍏ㄩ�� - handleCheckAllChangeOutside(val) { - this.outside.checkedShops = val ? this.outside.displayedShopnames : []; - this.outside.isIndeterminate = false; - }, - handleCheckedCitiesChangOutside(value) { - const checkedCount = value.length; - this.outside.checkAll = checkedCount === this.outside.displayedShopnames.length; - this.outside.isIndeterminate = - checkedCount > 0 && checkedCount < this.outside.displayedShopnames.length; - }, - - // 鍐呴儴璁惧鍏ㄩ�� - handleCheckAllChangeInner(val) { - this.inner.checkedShops = val ? this.inner.shopnames : []; - this.inner.isIndeterminate = false; - }, - handleCheckedCitiesChangeInner(value) { - const checkedCount = value.length; - this.inner.checkAll = checkedCount === this.inner.shopnames.length; - this.inner.isIndeterminate = - checkedCount > 0 && checkedCount < this.inner.shopnames.length; - }, - - // 鍒ゆ柇涓�涓暟缁勬槸鍚﹀寘鍚鍏冪礌 - hasElement(array, element) { - return array.includes(element); - }, - - - //鏍规嵁鎵�閫夊簵閾烘眰璇峰苟娓叉煋浠〃鐩� - request() { - if(this.outside.checkedShops.length!=0){ - let temp = this.outside.checkedShops.join(); - let params = {}; - if (this.outside.checkedShops.length != 0) { - params['shops'] = temp; - } - axiosInstanceInstance.get('/fume/lastest', { params: params }).then((result) => { - this.outside.realTimeData = result.data.data; - console.log('66', this.outside.realTimeData); - // console.log('闀垮害涓猴細',this.outside.realTimeData.length); - // 娓叉煋鎶樼嚎鍥� - // this.updateCharts(); - }); - } - - // 閫夋嫨浜嗗唴閮ㄨ澶� - if(this.inner.checkedShops.length!=0){ - // 娓呯┖鏁版嵁 - this.inner.inFumeValue=[] - this.getData.forEach(item=>{ - let itemOne = item.siteName - // 鎷垮埌閫変腑鐨勫簵閾哄搴旂殑娴撳害鍊� - if(this.hasElement(this.inner.checkedShops,itemOne)){ - this.inner.inFumeValue.push(item) - } - }) - console.log(this.inner.inFumeValue); - } - console.log('璋冪敤浜�'); - }, - - // 鐐瑰嚮鎸夐挳瑙﹀彂 - show() { - // 褰撳彇娑堥�夋嫨鏃讹紝闃叉鍥惧舰杩樹繚鐣欏湪椤甸潰銆� - if(this.outside.checkedShops.length==0){ - this.outside.realTimeData = [] - } - if(this.inner.checkedShops.length == 0){ - this.inner.inFumeValue = [] - } - // 鏍规嵁鎵�閫夌殑搴楅摵璇锋眰鏁版嵁 - this.request(); - setInterval(() => { - this.request(); - }, this.timeInterval); - - // 寰楀埌瑕佸睍绀虹殑浠〃鐩樻暟閲� - // this.totalCharts = - // this.outside.checkedShops.length + this.inner.checkedShops.length; - }, - // saveOutsideData(){ - // let temp = JSON.parse(localStorage.getItem('outsideData')); - // if(temp!=null && temp.length!=0){ - // temp.concat(this.outside.checkedShops) - // localStorage.setItem('outsideData', JSON.stringify(temp)); - // }else{ - // localStorage.setItem('outsideData', JSON.stringify(this.outside.checkedShops)); - // } - // }, - // getOutsideData () { - // const data = localStorage.getItem('outsideData'); - // this.outside.displayedShopnames = JSON.parse(data); - - // } - }, - mounted() { - // 鑾峰彇鎵�鏈夊簵閾哄悕瀛� - this.getDeviceInfo(); - // 浼樺厛灞曠ず娴忚鍣ㄧ紦瀛樹腑鐨� - // this.getOutsideData() - } - - - -} -</script> - - -<template> - <div> - - <el-collapse v-model="activeNames" > - <el-collapse-item name="1"> - <template #title> - <el-tooltip - class="box-item" - effect="dark" - content="鐐瑰嚮鍙姌鍙�" - placement="right-start" - > - <h2 style="margin-left: 10px;">鐩戞祴绔欑偣閫夋嫨</h2> - </el-tooltip> - </template> - <el-card shadow="always" class="form-card"> - <el-form label-width="120px"> - <el-form-item label="鍏朵粬璁惧"> - <el-checkbox - v-model="outside.checkAll" - :indeterminate="outside.isIndeterminate" - @change="handleCheckAllChangeOutside" - >鍏ㄩ��</el-checkbox - > - - <el-checkbox-group - v-model="outside.checkedShops" - @change="handleCheckedCitiesChangOutside" - > - - <el-checkbox - v-for="shop in outside.displayedShopnames" - :key="shop" - :label="shop" - >{{ shop }} - </el-checkbox> - </el-checkbox-group> - </el-form-item> - -<div class="input-search"> - <el-input type="text" v-model="outside.searchText" placeholder="鎼滅储搴楅摵鍚嶇О" @input="handleSearch" /> -</div> - - - <div> - <el-button type="primary" v-if="!outside.allDataLoaded && !outside.isLoading && !outside.isall" @click="loadMore">鍔犺浇鏇村</el-button> - <el-button type="primary" loading v-if="!outside.allDataLoaded && outside.isLoading " @click="loadMore">鍔犺浇鏇村</el-button> - <div>宸查�夋嫨鍏朵粬璁惧鏁伴噺涓猴細{{outside.checkedShops.length}}</div> - </div> -<br/> -<hr/> -<br/> - - <el-form-item label="璇曠偣璁惧"> - <el-checkbox - v-model="inner.checkAll" - :indeterminate="inner.isIndeterminate" - @change="handleCheckAllChangeInner" - >鍏ㄩ��</el-checkbox - > - <el-checkbox-group - v-model="inner.checkedShops" - @change="handleCheckedCitiesChangeInner" - class="inner-checkbox-group" - > - - <el-checkbox v-for="shop in inner.displayedShopnames" :key="shop" :label="shop" - >{{ shop }} - </el-checkbox> - </el-checkbox-group> - </el-form-item> - <div class="input-search"> - <el-input type="text" v-model="inner.searchText" placeholder="鎼滅储搴楅摵鍚嶇О" @input="handleSearchInner" /> - -</div> - - <div> - <el-button type="primary" v-if="!inner.allDataLoaded && !inner.isLoading && !inner.isall" @click="loadMoreInner">鍔犺浇鏇村</el-button> -<el-button type="primary" loading v-if="!inner.allDataLoaded && inner.isLoading " @click="loadMoreInner">鍔犺浇鏇村</el-button> - <div>宸查�夋嫨璇曠偣璁惧鏁伴噺涓猴細{{inner.checkedShops.length}}</div> - </div> - <!-- <el-form-item > --> - - <div class="time-interval"> - 瀹炴椂鏇存柊闂撮殧涓猴細{{timeInterval/1000}}绉� - </div> - - <!-- </el-form-item> --> - </el-form> - </el-card> -</el-collapse-item> - </el-collapse> - </div> - - -<div> - <el-tooltip - class="box-item" - effect="dark" - content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁" - placement="top-start" - > - <el-button type="success" @click="show" style="margin-left: 10px;"> 灞曠ず </el-button> - </el-tooltip> - </div> - - - - <!-- 浠〃鐩� --> - <!-- <div class="charts-container" v-for="(device,index) in outside.realTimeData" :key="device.mvStatCode"> - <div ref="chartsOutside" class="echarts" :id="`chartAP-${index}`"></div> - </div> --> -<div class="dashBorder-area"> -<h3 v-show="outside.realTimeData.length" class="outside-leble">澶栭儴璁惧锛�</h3> -<div v-if="outside.realTimeData"> - <el-row :gutter="20"> - <el-col :span="6" v-for="device in outside.realTimeData" :key="device.mvStatCode"> - <el-card> - <template #header> - <div class="card-header">{{ device.diName }}</div> - </template> - <DashBoard :data="device.mvFumeConcentration2"></DashBoard> - <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div> - <hr class="divider-margin"/> - <divr class="data">椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity}} </divr> - <hr class="divider-margin"> - <div class="data">鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity}}</div> - <hr class="divider-margin"/> - <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div> - <div class="status" :class="{'exceed': device.mvFumeConcentration2 >= 1}"> {{ device.mvFumeConcentration2 >= 1 ? '瓒呮爣' : '' }}</div> - <!-- <div class="status1" :class="{'exceed1': device.mvFumeConcentration2 < 1}"> {{ device.mvFumeConcentration2 < 1 ? '鏈秴鏍�' : '' }}</div> --> - </el-card> - </el-col> - </el-row> -</div> - -<hr v-show="outside.realTimeData.length && inner.inFumeValue.length" class="line-marign"/> -<h3 v-show="inner.inFumeValue.length" class="inner-leble">鍐呴儴璁惧锛�</h3> -<div v-if="inner.inFumeValue"> - <el-row :gutter="20"> - <el-col :span="6" v-for="device in inner.inFumeValue" :key="device.mnCode"> - <el-card> - <template #header> - <div class="card-header">{{ device.siteName }}</div> - </template> - <DashBoard :data="device.value"></DashBoard> - <div>璁惧缂栧彿锛歿{ device.mnCode }}</div> - <hr class="divider-margin"/> - <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div> - <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '瓒呮爣' : '' }}</div> - <!-- <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '鏈秴鏍�' : '' }}</div> --> - </el-card> - </el-col> - </el-row> -</div> -</div> -</template> - -<style lang="scss" scoped> -// 鏇存柊鏃堕棿 -.time-interval { - display: flex; - justify-content: right; - font-size: 16px; -} -.form-card { - margin: 20px 10px; - // width: 96%; - border:1px solid #ebeef5; - border-radius: 4px; -} -.inner-checkbox-group { - margin-left: 15px; -} -.el-card { - margin-bottom: 10px; -} -.card-header { - // display: flex; - // align-items: center; - // position: center; - text-align: center; -} -.outside-leble { - margin-top: 10px; -} -.inner-leble { - margin-top: 10px; -} -// 鍒嗗壊绾� -.line-marign { - margin: 20px 0; -} -.el-dialog { - width: 700px; -} -.dashBorder-area { - margin-left: 10px; -} -.dashboard { - margin-bottom: 20px; - border: #1de01d; -} - -.dashboard-title { - font-size: 20px; - text-align: center; - padding: 10px 0; - background-color: #f5f7fa; -} - -.echarts { - height: 300px; -} - -/* 瓒呮爣 鏂囧瓧鏁堟灉*/ -.status { - font-size: 18px; - color: #ff4d4f; - font-weight: bold; -} - -.exceed { - color: #ff4d4f; -} - -/* 鏈秴鏍� */ -.status1 { - font-size: 18px; - color: #1de01d; - font-weight: bold; -} - -.exceed1 { - color: #1de01d; -} -.blank { - height: 200px; -} - -// 鎸夐挳 -.el-button { - margin-top: 20px; -} -// 鍒嗗壊绾夸笂涓嬭窛绂� -.divider-margin { - margin: 3px 0px ; -} -.el-input { - width: calc(100% / 6); - // margin-left: 70px; - -} -// .input-search { -// display: flex; -// justify-content: left; -// } -</style> diff --git a/src/test/TestNoData.vue b/src/test/TestNoData.vue deleted file mode 100644 index 24b9247..0000000 --- a/src/test/TestNoData.vue +++ /dev/null @@ -1,149 +0,0 @@ - -<template> - <div> - <div style="margin: 5px;"> - <span style="color: #b1b3b8;" >瀹炴椂鏁版嵁</span> - </div> - - <hr style="margin-top: 10px;"/> - <div v-loading="loading"> - <el-row :gutter="20"> - <el-col :span="8" v-for="device in devices" :key="device.id"> - <div class="dashboard"> - <div class="dashboard-title">璁惧缂栧彿涓猴細{{ device.mnCode }}</div> - <div ref="charts" class="echarts"></div> - <div> - <div class="data">褰撳墠鏁板�硷細{{ device.value }}</div> - <div class="data">浜х敓鏃堕棿锛歿{ device.time }}</div> - <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '瓒呮爣' : '' }}</div> - <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '鏈秴鏍�' : '' }}</div> - </div> - </div> - - - </el-col> - </el-row> - 鍔犺浇 - </div> - </div> -</template> - -<script> - -import * as echarts from 'echarts' -import axiosInstance from 'axiosInstance' - -export default { - data() { - return { - devices: [], - loading:false, //鍔犺浇涓� - } - }, - methods: { - fetchData() { - const params = { - params: { - page: 1, - per_page: 10 - } - } - axiosInstance.get('https://fyami.com.cn/device/min/value/real_time', params) - .then(response => { - this.devices = response.data.data - }) - .catch(error => { - console.error(error) - }) - }, - updateCharts() { - for (let i = 0; i < this.devices.length; i++) { - const device = this.devices[i] - const chart = echarts.init(this.$refs.charts[i]) - - const option = { - title: { - // text: '瀹炴椂鏁版嵁' - }, - tooltip: { - formatter: '{a} <br/>{b} : {c}' - }, - series: [ - { - name: '瀹炴椂鏁版嵁', - type: 'gauge', - detail: { formatter: '{value}' }, - data: [{ - value: device.value, - name: '娌圭儫娴撳害' , - itemStyle: { - color:device.value >= 1?'red' :'green' - } - }], - max:2 - } - ] - } - - chart.setOption(option) - } - console.log('璋冪敤浜嗭紒'); - } - }, - mounted() { - this.fetchData() - this.loading = true - setInterval(() => { - this.updateCharts() - }, 30000) //姣忓垎閽燂紙30绉掞級璋冪敤涓�娆� - this.loading = false - }, - created() { - // 鐩戝惉绐楀彛澶у皬鍙樺寲锛屽姩鎬佽皟鏁翠华琛ㄧ洏甯冨眬 - window.addEventListener('resize', this.updateCharts) - }, - beforeUnmount() { - // 绉婚櫎绐楀彛澶у皬鍙樺寲鐨勭洃鍚� - window.removeEventListener('resize', this.updateCharts) - } -} -</script> - -<style scoped> -.dashboard { - margin-bottom: 20px; -} - -.dashboard-title { - font-size: 20px; - text-align: center; - padding: 10px 0; - background-color: #f5f7fa; -} - -.echarts { - height: 300px; -} - -/* 瓒呮爣 鏂囧瓧鏁堟灉*/ -.status { - font-size: 18px; - color: #FF4D4F; - font-weight: bold; - } - - .exceed { - color: #FF4D4F; - } - -/* 鏈秴鏍� */ - .status1 { - font-size: 18px; - color: #1de01d; - font-weight: bold; - } - - .exceed1 { - color: #1de01d; - } -</style> diff --git a/src/test/TestSelect.vue b/src/test/TestSelect.vue deleted file mode 100644 index a4a938a..0000000 --- a/src/test/TestSelect.vue +++ /dev/null @@ -1,171 +0,0 @@ -<!-- 鑷姩浠庢帴鍙h幏鍙栨暟鎹� 鐢熸垚浠〃鐩� --> - -<script lang="ts"> -import axiosInstance from 'axiosInstance'; -import * as echarts from 'echarts'; - -export default { - data() { - return { - loading:false, - smogData: [],//浠庡悗绔斁鍥炵殑鍊� - chartData: [], //浠庡浘鍍忚繑鍥炵殑鍊� - }; - }, - mounted() { - this.loading = true - //鑷姩鑾峰彇鎺ュ彛鍏ㄩ儴鏁版嵁 - axiosInstance.get('https://fyami.com.cn/device/min/value/real_time', { params: { "page": 1, "per_page": 20 } }).then((result) => { - this.smogData = result.data.data - console.log(this.smogData); - this.loading = false - }); - - - }, - - methods: { - showMore(){ - this.smogData.forEach((device) => { - const chartDom = document.querySelector(`#chart-${device.mnCode}`) //鏍规嵁閫夋嫨鍣ㄨ幏鍙栧厓绱狅紝骞朵笖鍙繑鍥炲厓绱犱腑鐨勭涓�涓� - const chart = echarts.init(chartDom) - - this.chartData = { - value: device.value, - axisLabel: { - show: true, - textStyle: { - color: '#666' - }, - formatter: function (value) { - return value; - } - }, - detail: { - formatter: function (value) { - return value + 'mg/m鲁'; - }, - textStyle: { - fontSize: 10, - fontWeight: 'bold' - }, - offsetCenter: [0, '30%'] - }, - title: { - show: true, - text: '璁惧娌圭儫娴撳害', - textStyle: { - color: '#999', - fontSize: 14 - }, - offsetCenter: [0, '-30%'] - }, - axisLine: { - lineStyle: { - width: 10, - color: [ - [0.2, '#67e0e3'], - [0.8, '#37a2da'], - [1, '#fd666d'] - ] - } - }, - splitLine: { - show: true, - length: 10, - lineStyle: { - color: 'auto', - } - }, - axisTick: { - show: true, - length: 15, - lineStyle: { - color: 'auto', - } - } - }; - - chart.setOption({ - tooltip: { - formatter: '{a}: <br/> {c}mg/m鲁' - }, - series: [ - { - name: '娌圭儫娴撳害', - type: 'gauge', - min: 0, - max: 2, - splitNumber: 10, - axisLabel: this.chartData.axisLabel, - detail: this.chartData.detail, - data: [{ value: this.chartData.value, name: '' }], - title: this.chartData.title, - axisLine: this.chartData.axisLine, - splitLine: this.chartData.splitLine, - axisTick: this.chartData.axisTick - } - ] - }); - }) - } - - }, - } -</script> - -<template> - <div style="margin: 5px;"> - <span style="color: #b1b3b8;" >瀹炴椂鏁版嵁</span> - </div> - - <hr style="margin-top: 10px;"/> - - <div > - <el-button @click="showMore" style="margin-top: 20px;margin-left: 20px">灞曠ず</el-button> - - </div> - <div v-loading="loading" > - <!-- 鏍规嵁璁惧缂栧彿涓暟鍔ㄦ�佺敓鎴愪华琛ㄧ洏 --> - <el-row :gutter="20"> - <el-col :span="12" v-for="device in smogData" :key="device.mnCode"> - <div class="chart-container"> - <div class="chart-title">璁惧{{ device.mnCode }}</div> - <div class="chart-content"> - <div :id="'chart-' + device.mnCode" class="chartClass"></div> - </div> - <div> - <span>娴撳害鍊间负锛歿{ device.value }}</span> - <br/> - 浜х敓鏃堕棿:{{ device.time}} - </div> - </div> - <!-- <br v-if="index % 4 == 0"/> --> - </el-col> - </el-row> - </div> -</template> - - - - -<style lang="scss" scoped> -.chart-container { - background-color: #f9f9f9; - padding: 20px; - border-radius: 4px; -} - -.chart-title { - font-size: 16px; - font-weight: 600; -} - -.chart-content { - margin-top: 10px; -} - -.chartClass { - height: 300px; -} -</style> \ No newline at end of file diff --git a/src/test/TestWa.vue b/src/test/TestWa.vue deleted file mode 100644 index 9556095..0000000 --- a/src/test/TestWa.vue +++ /dev/null @@ -1,382 +0,0 @@ -<!-- 鏁版嵁鐖彇 --> -<script> -// import ShopNameSelect from '../sfc/ShopNameSelect.vue' -import ShopNameCheckBox from '../sfc/ShopNameCheckBox.vue'; -import TimeSelectCrawling from '../sfc/TimeSelectCrawling.vue'; - -import axios from 'axios'; -import dayjs from 'dayjs'; - -export default { - components: { - // ShopNameSelect, - ShopNameCheckBox, - TimeSelectCrawling - }, - data() { - return { - iframeSrc: '/api/sys_login.jsp?from=/sys/index.jsp', - isShowIframe: false, - // 宸查�変腑鐨勫簵閾哄悕 - form: { - selectedShopNames: [], - cookie: '', - beginTime: '', - endTime: '' - }, - percentage: Number(60), - countdownTime: Date.now() + 1000 * 60 * 60 * 24 * 2, - // 鐖彇鍙嶉鐨勭粨鏋� - result: '', - // 淇℃伅 - allData: [], - // 閲嶅鐨勬暟鎹� - duplicateData: [], - // 涓嶉噸澶嶇殑鏁版嵁 - newData: [], - // 閲嶅鏁版嵁灞曠ず鐨勮〃鏍� - displayData:[], - loading: false, - loadingToMysql:null, - // 浣嗘湁閲嶅鐨勬暟鎹椂锛屼袱涓寜閽彧鑳介�夊叾涓竴涓紝鍙嶄箣鍐嶆閲嶅鍏ュ簱 - buttonFlag:-1 - }; - }, - methods: { - openFullScreen () { - this.loadingToMysql = ElLoading.service({ - lock: true, - text: 'Loading', - background: 'rgba(0, 0, 0, 0.7)', - }) -}, - // 鍙戦�佹暟鎹� - sendData() { - this.result = ''; - this.allData = []; - let form = {}; - form['selectedShopNames'] = this.form.selectedShopNames; - form['cookie'] = this.form.cookie; - if (this.form.beginTime) { - form['beginTime'] = dayjs(this.form.beginTime).format('YYYY-MM-DD'); - } - if (this.form.endTime) { - form['endTime'] = dayjs(this.form.endTime).format('YYYY-MM-DD'); - } - this.loading = true; - // 寰楀埌鍙嶉淇℃伅 鎵�鏈夋暟鎹� - axios.post('http://127.0.0.1:5000/hello', form).then((response) => { - console.log(response.data); - response.data.info.forEach((item) => { - // 鎹㈣鏄剧ず - this.result = this.result + item + '\n'; - }); - - // response.data.allData.forEach(item=>{ - // this.allData =this.allData+item+'\n' - // this.allData =this.allData+'\n' - // }); - this.allData = response.data.allData; - this.duplicateData = response.data.duplicate; - console.log('閲嶅鐨勬暟鎹负锛�', this.duplicateData); - this.newData = response.data.newData; - console.log('鏂版暟鎹潯鏁颁负锛�',this.newData.length); - this.loading = false; - - this.displayData = this.arrToObject(this.duplicateData); - console.log('杞崲鍚庣殑瀵硅薄鏁扮粍涓猴細',this.displayData); - - this.result=this.result+'\n閲嶅鐨勬暟閲忎负锛�'+this.duplicateData.length - }); - }, - arrToObject(arr) { - let displayData = []; - arr.forEach((item) => { - let tempObject = {}; - tempObject['渚涘簲鍟�'] = item[0]; - tempObject['椁愰ギ搴�'] = item[1]; - tempObject['璁惧缂栧彿'] = item[2]; - tempObject['绔欑偣鍚嶇О'] = item[3]; - tempObject['杩涚儫娴撳害'] = item[4]; - tempObject['鎺掔儫娴撳害'] = item[5]; - tempObject['椋庢満鐢�'] = item[6]; - tempObject['鍑�鍖栧櫒'] = item[7]; - tempObject['绾у埆'] = item[8]; - tempObject['闇�鎶ヨ'] = item[9]; - tempObject['宸叉姤璀�'] = item[10]; - tempObject['褰掑睘鏃堕棿'] = item[11]; - tempObject['涓婃姤鏃堕棿'] = item[12]; - tempObject['鏁版嵁鏃堕棿'] = item[13]; - tempObject['閲嶅娆℃暟'] = item[14]; - displayData.push(tempObject) - }); - return displayData - }, - - // 鏃犻噸澶嶆暟鎹椂锛岀粨鏋滃叆搴� - storeAllToMySql() { - if(this.allData.length==0){ - alert('璇峰厛鑾峰彇鏁版嵁') - return - } - this.openFullScreen() - axios.post('http://127.0.0.1:5000/store', {'allData':this.allData}).then((response) => { - console.log(response.data); - ElMessage.success(response.data) - this.loadingToMysql.close() - }) - }, - - // 鍏ュ簱鏂版暟鎹紙鍙啓鍏ユ柊鏁版嵁锛� - storeNewToMySql() { - if(this.buttonFlag != -1){ - alert('宸插叆搴擄紝涓嶈兘鍐嶉噸澶嶅叆搴�') - return - } - this.buttonFlag = 1 - this.openFullScreen() - axios - .post('http://127.0.0.1:5000/store', { 'allData': this.newData }) - .then((response) => { - console.log(response.data); - ElMessage.success(response.data) - this.loadingToMysql.close() - }); - }, - - - // 鍏ㄩ儴鏁版嵁鍏ュ簱锛屽寘鎷噸澶嶇殑锛堝厛鍐欏叆閲嶅鐨勬暟鎹紝閲嶅鐨勬暟鎹彧鍐欏叆鍘嗗彶鏁版嵁琛� - // 鍐嶆妸鏂扮殑鏁版嵁鍐欏叆4寮犺〃涓級 - storeDupAllMySql() { - if(this.buttonFlag != -1){ - alert('宸插叆搴擄紝涓嶈兘鍐嶉噸澶嶅叆搴�') - return - } - this.buttonFlag = 1 - this.openFullScreen() - // 閲嶅鏁版嵁鍐欏叆鍒嗛挓鏁版嵁琛� - axios - .post('http://127.0.0.1:5000/minute', { 'allData': this.duplicateData }) - .then((response) => { - console.log(response.data); - }); - // 鏂版暟鎹啓鍏�4寮犺〃 - if(this.newData.length != 0){ - setTimeout(() => { - axios - .post('http://127.0.0.1:5000/store', { 'allData': this.newData }) - .then((response) => { - console.log(response.data); - ElMessage.success(response.data) - this.loadingToMysql.close() - }); - }, 2000); - } - else{ - this.loadingToMysql.close() - ElMessage.success('鍐欏叆瀹屾垚锛�') - } - }, - giveTime(val) { - //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) - this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'); - this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss'); - }, - cardShow() { - this.isShowIframe = !this.isShowIframe; - } - } -}; -</script> - -<template> - <!-- <el-card > - <span>浣跨敤璇存槑锛�</span> - <br/> - <a href="http://xhhb.senzly.cn/main/sys_login.jsp?from=/sys/index.jsp" target="_blank">鐐瑰嚮姝ょ綉椤�</a> - <div> - 杈撳叆璐﹀彿锛屽瘑鐮侊紝楠岃瘉鐮佷箣鍚庣偣鍑�'绔嬪嵆鐧诲綍' - </div> - <div > - 杩涘叆椤甸潰鍚庯紝鎸夐敭鐩樼殑鈥楩12鈥� - </div> - <div> - 鐐瑰嚮寮瑰嚭鐨勯〉闈㈢殑宸ュ叿鏍忕殑鈥樼綉缁溾�欐垨鑰呪�榥etwork鈥�,閫夋嫨涓嬮潰浠�.jsp缁撳熬鐨勬枃浠� - </div> - <div> - 寰�涓嬫壘璇锋眰琛ㄥご涓殑鈥楥ookie鈥欙紝鍏ㄩ儴澶嶅埗 - </div> - </el-card> --> - <div> - <iframe - :src="iframeSrc" - frameborder="0" - width="100%" - height="500" - v-if="isShowIframe" - v-cloak - ></iframe> - - <div class="header-button"> - <el-button type="primary" @click="cardShow"> 鎵撳紑缃戦〉 </el-button> - <el-button type="primary" @click="autoLogin"> 妯℃嫙鐧诲綍 </el-button> - </div> - - <el-card> - <!-- <ShopNameSelect @submit-shops="(n)=>selectedShopNames=n"></ShopNameSelect> --> - <ShopNameCheckBox - @submit-shops="(n) => (form.selectedShopNames = n)" - ></ShopNameCheckBox> - <!-- {{ selectedShopNames }} --> - </el-card> - - <div class="input-cookie"> - <span class="input-cookie-label">cookie</span> - <el-input - v-model="form.cookie" - rows="4" - type="textarea" - class="input-cookie-textarea" - ></el-input> - </div> - - <div class="time-select"> - <TimeSelectCrawling @submit-time="giveTime"> </TimeSelectCrawling> - </div> - - <div class="getdata-button"> - <el-button color="#626aef" :dark="isDark" plain @click="sendData" - >鑾峰彇鏁版嵁</el-button - > - </div> - <div class="result-textarea" element-loading-text="鑾峰彇鏁版嵁涓�..." v-loading="loading" > - <el-input - v-model="result" - rows="6" - type="textarea" - class="result-textarea-textarea" - placeholder="鐖彇缁撴灉" - ></el-input> - </div> - - <!-- <div class="progress-percentage"> -<el-progress :text-inside="true" :percentage="percentage" stroke-width="15" status="warning" striped striped-flow duration="5"></el-progress> -</div> - - -<div class="countdown-time"> - <el-countdown - title="棰勮杩橀渶瑕佺埇鍙栫殑鏃堕棿" - format="HH:mm:ss" - :value="countdownTime" - /> -</div> --> - - <!-- <div class="result-textarea-data" v-loading="loading"> - <div>鏁版嵁</div> - <el-input v-model="allData" rows="6" type="textarea" class="result-textarea-textarea" placeholder="鏁版嵁"></el-input> - <div>鑾峰彇鐨勬暟鎹暟涓猴細{{ allData.length }}</div> -</div> --> - - <div class="result-textarea-duplication"> - <div>閲嶅鐨勬暟鎹�</div> - <!-- <el-input - v-model="duplicateData" - rows="6" - type="textarea" - class="result-textarea-textarea" - placeholder="閲嶅鐨勬暟鎹�" - ></el-input> --> - <el-table :data="displayData" height="250" style="width: 100%"> - <el-table-column prop="椁愰ギ搴�" label="椁愰ギ搴�" width="180" fixed /> - <el-table-column prop="渚涘簲鍟�" label="渚涘簲鍟�" width="180" /> - <el-table-column prop="璁惧缂栧彿" label="璁惧缂栧彿" /> - <el-table-column prop="绔欑偣鍚嶇О" label="璁惧缂栧彿" /> - <el-table-column prop="杩涚儫娴撳害" label="杩涚儫娴撳害(mg/m鲁)" /> - <el-table-column prop="鎺掔儫娴撳害" label="鎺掔儫娴撳害mg/m鲁)" /> - <el-table-column prop="椋庢満搴�" label="椋庢満搴�(A)" /> - <el-table-column prop="鍑�鍖栧櫒" label="鍑�鍖栧櫒(A)" /> - <el-table-column prop="绾у埆" label="绾у埆" /> - <el-table-column prop="闇�鎶ヨ" label="闇�鎶ヨ" /> - <el-table-column prop="宸叉姤璀�" label="宸叉姤璀�" /> - <el-table-column prop="褰掑睘鏃堕棿" label="褰掑睘鏃堕棿" /> - <el-table-column prop="涓婃姤鏃堕棿" label="涓婃姤鏃堕棿" /> - <el-table-column prop="鏁版嵁鏃堕棿" label="鏁版嵁鏃堕棿" /> - <el-table-column prop="閲嶅娆℃暟" label="閲嶅娆℃暟" /> - </el-table> - </div> - - <!-- <div class="result-textarea"> - <span >閲嶅鏁伴噺涓猴細{{ duplicateData.length }}</span> - </div> --> - - <div class="store-button" > - <el-button - type="warning" - @click="storeAllToMySql" - v-if="duplicateData.length == 0" - >缁撴灉鍏ュ簱</el-button - > - <el-button type="warning" @click="storeNewToMySql" v-if="duplicateData.length != 0" - >鍙叆搴撴柊鏁版嵁</el-button - > - <el-button type="warning" @click="storeDupAllMySql" v-if="duplicateData.length != 0" - >鍏ㄩ儴鏁版嵁鍏ュ簱(鍖呮嫭閲嶅鏁版嵁)</el-button - > - </div> - </div> -</template> - -<style lang="scss" scoped> -.header-button { - margin-top: 10px; -} -.el-card { - width: 60%; - border-radius: 9px; -} -.input-cookie { - display: flex; - margin-top: 20px; -} -.input-cookie-label { - margin-right: 10px; - margin-top: 10px; -} -.input-cookie-textarea { - width: 45%; -} -.time-select { - margin-top: 20px; -} -.getdata-button { - margin-top: 20px; -} -.result-textarea { - margin-top: 20px; -} -.result-textarea-textarea { - width: 50%; -} -.progress-percentage { - width: 50%; - margin-top: 20px; -} -.countdown-time { - margin-top: 20px; -} -.restore-button { - margin-top: 20px; -} -.result-textarea-data { - margin-top: 20px; - width: 2100px; -} -.result-textarea-duplication { - margin-top: 20px; - width: 90%; -} -* { - margin-left: 10px; -} -</style> diff --git a/src/utils/common.js b/src/utils/common.js index d105ca4..574bf73 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -6,6 +6,7 @@ * @createTime:2023-08-18 * @returns锛氳秴杩囦竴涓湀杩斿洖true,涓嶈秴杩囦竴涓湀鍒欒繑鍥瀎alse */ + function isExceedOneMonth(dateStr1, dateStr2) { // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄 @@ -48,8 +49,8 @@ return false; } - /** - * description锛氱櫨鍒嗗彿姣旇緝澶у皬 + /** + * 鐧惧垎鍙锋瘮杈冨ぇ灏� * @param锛� a鏄惁澶т簬b * @returns锛氬ぇ浜庯紝鍒欒繑鍥瀟rue銆傚惁鍒欒繑鍥瀎alse */ @@ -57,7 +58,7 @@ return Number(a.replace('%', '')) >= Number(b.replace('%', '')); } - /** + /** *瀵煎嚭涓篹xcel * @param锛� 琛ㄦ牸鏁版嵁锛屽緟瀵煎嚭鐨勮〃鏍煎垪锛宔xcel鍒楋紝excel鏂囦欢鍚� * @returns @@ -73,12 +74,6 @@ // 鍒涘缓xlsx瀵硅薄 const xls = XLSX.utils.json_to_sheet(itemsFormatted); - // xls['A1'].v = '璁惧缂栧彿'; - // xls['B1'].v = '寮傚父绫诲瀷'; - // xls['C1'].v = '鍦板尯'; - // xls['D1'].v = '寮�濮嬫椂闂�'; - // xls['E1'].v = '缁撴潫鏃堕棿'; - // 缂栬緫琛ㄥご琛� 淇敼琛ㄥご excelColumnsName.forEach(item =>{ xls[item[0]].v = item[1] @@ -91,6 +86,29 @@ } - return {isExceedOneMonth,cmpp,exportToExcel} + /** + * 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; + } + + return {isExceedOneMonth,cmpp,exportToExcel,descFiftyTime} } diff --git a/src/utils/exception_common_function/index.js b/src/utils/exception_common_function/index.js new file mode 100644 index 0000000..0311b9b --- /dev/null +++ b/src/utils/exception_common_function/index.js @@ -0,0 +1,138 @@ +import dayjs from 'dayjs' +export default { + /** + * 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 + */ + 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; + }, + + /** + * description锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�45鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗45鍒嗛挓鐨勬椂闂寸偣 + * @param锛� 寮傚父鐨勫紑濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬�� + * @returns锛氭暟缁勩�倀ime[0],time[1],time[2],time[3]鍒嗗埆浠h〃寮傚父鍖洪棿鍓�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; + }, + /** + * 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; + }, + +} \ No newline at end of file diff --git a/src/utils/test.js b/src/utils/test.js new file mode 100644 index 0000000..a758e3f --- /dev/null +++ b/src/utils/test.js @@ -0,0 +1,5 @@ +export default { + add(a,b){ + return a+b + } +} \ No newline at end of file diff --git a/src/views/data_management/BusinessReport.vue b/src/views/data_management/BusinessReport.vue new file mode 100644 index 0000000..95e582d --- /dev/null +++ b/src/views/data_management/BusinessReport.vue @@ -0,0 +1,32 @@ +<script> +import {useCounterStore} from '@/stores/counter'; +export default { + data(){ + return{ + + } + }, + setup(){ + const store = useCounterStore() + return{ + store + } + }, + mounted() { + + }, + methods: { + + } +} +</script> + +<template> + <div> + 涓氬姟鎶ヨ〃 {{ store.count }} + </div> +</template> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/views/origin_data/DataAccessManagement.vue b/src/views/data_management/DataAccessManagement.vue similarity index 100% rename from src/views/origin_data/DataAccessManagement.vue rename to src/views/data_management/DataAccessManagement.vue diff --git a/src/views/data_management/HistoryData.vue b/src/views/data_management/HistoryData.vue new file mode 100644 index 0000000..19f4f5d --- /dev/null +++ b/src/views/data_management/HistoryData.vue @@ -0,0 +1,328 @@ +<script> +import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue'; +import ScenarioType from '@/sfc/ScenarioType.vue'; +import InputSearch from '@/sfc/InputSearch.vue'; + +import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' + +import { useCommonFunction } from '../../utils/common.js'; +import requetsApi from '@/api/exportExcel/requetsApi.js' +import ButtonClick from '@/sfc/ButtonClick.vue' +import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue' +import dayjs from 'dayjs'; + +export default { + components: { + TimeSelectWithShortCuts, + ScenarioType, + InputSearch, + ButtonClick, + ButtonExportExcel, + AreaAndmonitorType + }, + data() { + return { + form: { + // 绔欑偣鍚嶇О + name: '', + // 璁惧缂栧彿 + number: '', + // 寮�濮嬫椂闂� + beginTime: '', + // 缁撴潫鏃堕棿 + endTime: '' + }, + // 杩斿洖鐨勬暟鎹� + tableData: [], + // 琛ㄦ牸鏁版嵁 + displayData: [], + // 褰撳墠椤� + currentPage: 1, + // 姣忛〉鏉℃暟 + pageSize: 20, + total: 0, + // 鍔犺浇涓� + loading: false, + queryButton: false, + exportButton:false, + // 绌虹姸鎬� + isNoData: false, + // 宸查�変腑鐨勫満鏅被鍨� + scenarioType: [], + // 琛ㄦ牸楂樺害 + tableHeight: '500' + }; + }, + setup() { + const { isExceedOneMonth, exportToExcel } = useCommonFunction() + return { isExceedOneMonth, exportToExcel } + }, + mounted() { + this.backMinuteDataAWeekAgo(); + this.calTableHeight(); + }, + + methods: { + exportDom() { + + let params = { + 'beginTime': this.form.beginTime, + 'endTime': this.form.endTime, + } + if (this.form.name) { + params['siteName'] = this.form.name; + } + if (this.form.number) { + params['mnCode'] = this.form.numbe; + } + if (this.scenarioType.length != 0) { + params['scenarioType'] = this.scenarioType; + } + this.exportButton = true + requetsApi.fetchAlSiteData(params).then(res => { + const data = res.data.data + if (data.length != 0) { + const tableColumns = [ + 'name', + 'address', + 'dutyCompany', + 'mnCode', + 'typeName', + 'dustValue', + 'noiseValue', + 'lst', + 'quality', + 'groupName', + + ] + const excelColumns = [['A1', '绔欑偣鍚嶇О'], + ['B1', '鍦板潃'], ['C1', '渚涘簲鍟�'], ['D1', '璁惧缂栧彿'], + ['E1', '绫诲瀷'], ['F1', '鎵皹娴撳害(mg/m鲁)'], ['G1', '鍣0(dB)'], + ['H1', '閲囬泦鏃堕棿'], ['I1', '绛夌骇'], ['J1', '鎵�鍦ㄥ尯鍘�']] + this.exportToExcel(data, tableColumns, excelColumns, '鍘嗗彶鏁版嵁琛�.xlsx') + }else{ + ElMessage('鏃犳暟鎹渶瑕佸鍑�') + } + this.exportButton = false + }) + }, + // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲 + calTableHeight() { + const h1 = this.$refs.h1.$el.offsetHeight; + const h2 = this.$refs.h2.$el.offsetHeight; + // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛 + this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 40px - var(--el-main-padding) * 2`; + }, + giveTime(val) { + //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) + this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'); + this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss'); + }, + // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂 + handleSizeChange(val) { + this.pageSize = val; + + // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉 + this.handleCurrentChange(1); + }, + + // 椤靛彿鏀瑰彉鏃惰Е鍙� + handleCurrentChange(val) { + console.log('褰撳墠椤典负锛�', val); + // 灏嗗綋鍓嶉〉鍙风粰currentPage + this.currentPage = val; + + // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟 + this.handleSubmit(); + }, + //搴忓彿閫掑 + indexMethod(index) { + return index + 1 + (this.currentPage - 1) * this.pageSize; + }, + + // 鏌ヨ鏁版嵁 + handleSubmit() { + // if (this.isExceedOneMonth(this.form.beginTime, this.form.endTime)) { + // alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀'); + // return; + // } + this.loading = true; + this.queryButton = true + let params = {}; + params['page'] = this.currentPage; + params['pageSize'] = this.pageSize; + if (this.form.name) { + params['siteName'] = this.form.name; + } + if (this.form.number) { + params['mnCode'] = this.form.number; + } + params['beginTime'] = this.form.beginTime; + params['endTime'] = this.form.endTime; + if (this.scenarioType.length != 0) { + params['scenarioType'] = this.scenarioType.join(); + } + + this.$http.get('/dust/history1', { params: params }).then((response) => { + // 淇濆瓨杩斿洖鐨� + this.tableData = response.data.data.rows; + this.displayData = this.tableData; + this.loading = false; + this.queryButton = false + if (response.data.data.total == 0) { + ElMessage('璇ユ椂娈垫棤鏁版嵁'); + this.loading = false; + this.queryButton = false + this.isNoData = true; + return; + } + this.total = response.data.data.total; + // 绉婚櫎绌烘暟鎹姸鎬� + this.isNoData = false; + }); + }, + backMinuteDataAWeekAgo() { + // 鎵撳紑椤甸潰鍔犺浇鏈�杩戜竴鍛ㄧ殑鏁版嵁 + this.loading = true; + // 缁欒緭鍏ユ璁剧疆榛樿鐨勯�夋嫨椤� + + let params = {}; + params['siteName'] = this.form.name; + params['beginTime'] = this.form.beginTime; + params['endTime'] = this.form.endTime; + + this.$http.get('/dust/history1', { params: params }).then((response) => { + // 淇濆瓨杩斿洖鐨� + this.tableData = response.data.data.rows; + this.displayData = this.tableData; + + if (response.data.data.total == 0) { + ElMessage('璇ユ椂娈垫棤鏁版嵁'); + this.isNoData = true; + return; + } + this.total = response.data.data.total; + this.loading = false; + }); + } + } +}; +</script> + +<template> + <el-row> + <el-col ref="h1" class="head-row"> + <el-card> + <el-form :inline="true"> + <div class="demo-form-inline"> + <el-row> + <el-col> + + <el-form-item> + <AreaAndmonitorType></AreaAndmonitorType> + </el-form-item> + <el-form-item> + <template #label> </template> + <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)"> + </InputSearch> + </el-form-item> + <el-form-item> + <template #label> + <span class="font-label">璁惧缂栧彿:</span> + </template> + <el-input v-model="form.number" clearable placeholder="璇疯緭鍏�"></el-input> + </el-form-item> + <el-form-item> + <ScenarioType @submitScenarioType="(val) => (scenarioType = val)"> + </ScenarioType> + </el-form-item> + </el-col> + <el-form-item> + <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts> + </el-form-item> + </el-row> + </div> + <div class="button-and-export"> + <el-form-item> + <!-- <el-button + type="primary" + @click="handleSubmit" + style="margin-left: 10px" + ><el-icon style="margin-right: 6px;font-size: 1.2em;"><i-ep-Search/></el-icon>鏌ヨ</el-button + > + <el-button type="success" @click="exportDom" round><el-icon style="margin-right: 6px;margin-bottom:2px;font-size: 1.2em;"><i-ep-Download ></i-ep-Download></el-icon>瀵煎嚭鏁版嵁</el-button> --> + <ButtonClick style="margin-right: 12px;" content="鎼滅储" type="primary" :loading="queryButton" @do-search="handleSubmit"></ButtonClick> + <ButtonExportExcel content="瀵煎嚭鏁版嵁" type="success" :loading="exportButton" @do-export="exportDom"></ButtonExportExcel> + </el-form-item> + </div> + </el-form> + </el-card> + </el-col> + </el-row> + + <el-row> + <el-col v-show="!isNoData"> + + <el-table border size="default" :highlight-current-row="true" :data="displayData" :height="tableHeight" + v-loading="loading"> + <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣--> + <el-table-column type="index" label="搴忓彿" align="center" fixed :index="indexMethod"></el-table-column> + <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip></el-table-column> + <el-table-column prop="address" label="鍦板潃" align="center" show-overflow-tooltip></el-table-column> + <el-table-column prop="dutyCompany" label="渚涘簲鍟�" align="center" show-overflow-tooltip></el-table-column> + <el-table-column prop="mnCode" label="璁惧缂栧彿" show-overflow-tooltip></el-table-column> + <el-table-column prop="typeName" label="绫诲瀷" align="center" show-overflow-tooltip></el-table-column> + <el-table-column prop="dustValue" label="鎵皹娴撳害(mg/m鲁)" align="center" sortable + show-overflow-tooltip></el-table-column> + <el-table-column prop="noiseValue" label="鍣0(dB)" align="center" sortable show-overflow-tooltip></el-table-column> + <el-table-column prop="lst" label="閲囬泦鏃堕棿" sortable align="center" show-overflow-tooltip></el-table-column> + <el-table-column prop="quality" label="绛夌骇" align="center" show-overflow-tooltip></el-table-column> + <el-table-column prop="groupName" label="鎵�鍦ㄥ尯鍘�" align="center" show-overflow-tooltip> + </el-table-column> + </el-table> + <!--size-change 鏄痯ageSize 鏀瑰彉鏃朵細瑙﹀彂鐨勪簨浠�,handleSizeChange鏄簨浠跺鐞嗗嚱鏁� + current-change 鏄痗urrentPage 鏀瑰彉鏃朵細瑙﹀彂鐨勪簨浠� --> + + <el-pagination ref="h2" background @size-change="handleSizeChange" @current-change="handleCurrentChange" + :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" + layout="total,sizes, prev, pager, next, jumper" :current-page="currentPage"></el-pagination> + + </el-col> + <el-empty v-show="isNoData" :image-size="200" /> + + </el-row> +</template> + +<style lang="scss" scoped> +// 鏁翠綋宸﹀杈硅窛 +.el-row { + margin-left: 10px; +} + +.head-row { + margin: 10px 0px; +} + +.el-card { + border-radius: 9px; +} + +.font-label { + margin-top: 3px; + font-weight: bold; +} + +.demo-form-inline { + display: flex; +} + +.button-and-export { + display: flex; + justify-content: flex-end; + /* 浠庤灏句綅缃紑濮嬫帓鍒� */ +} + +.el-pagination { + margin: 10px 0px; +} +</style> diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue index 1e3ac41..dd60dfe 100644 --- a/src/views/exception/FlightInspection.vue +++ b/src/views/exception/FlightInspection.vue @@ -1,15 +1,16 @@ <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 dayjs from 'dayjs'; @@ -20,6 +21,7 @@ TimeSelectWithShortCuts, DustExceptionText, DustLineChart, + ButtonClick, AreaAndmonitorType }, data() { @@ -169,7 +171,6 @@ }, // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲 - beginTime() { this.getShopNames(); }, @@ -181,31 +182,14 @@ } }, 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); + }, methods: { - - // getExceptionSiteNum(){ - // this.$http.get('/dust/exceptionsitenum').then(result => { - // this.exceptionSiteNum = result.data.data.length - // }) - // }, /** * description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹� * @param锛� @@ -226,35 +210,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 +236,9 @@ this.exceptionTotal = abnormalTimeTenMinute.length; }, - /** - * description锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�45鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗45鍒嗛挓鐨勬椂闂寸偣 - * @param锛� 寮傚父鐨勫紑濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬�� - * @returns锛氭暟缁勩�倀ime[0],time[1],time[2],time[3]鍒嗗埆浠h〃寮傚父鍖洪棿鍓�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 +269,7 @@ let timeAndValue = {}; // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅� - timeAndValue = this.keepContinuousByEachFiftyMinutes( + timeAndValue = index.keepContinuousByEachFiftyMinutes( allTime[0], allTime[3], this.dialog.allExceptionTimeData @@ -384,59 +291,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 +746,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 +779,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 +815,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 }) @@ -1360,7 +1215,7 @@ </el-form-item> <el-form-item> <InputSearch - :isNeedDefaultSite="0" + isNeedDefaultSite="0" @submit-value="(n) => (form.name = n)" @submit-site-Nums="(n) => (siteTotal = n)" > @@ -1380,7 +1235,8 @@ <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> @@ -1608,7 +1464,7 @@ <!-- 鏍囧ご --> <div class="card-text1"> <image class="card-header-image"></image> - <span class="card-header-text">婊戝姩骞冲潎鍊煎紓甯�</span> + <span class="card-header-text">鍙樺寲瓒嬪娍寮傚父</span> </div> <div class="card-content-text"> @@ -1745,7 +1601,7 @@ <!-- 鏍囧ご --> <div class="card-text1"> <image class="card-header-image"></image> - <span class="card-header-text">鏂數鎴栨柇缃�</span> + <span class="card-header-text">鏁版嵁缂哄け寮傚父</span> </div> <div class="card-content-text"> @@ -2009,7 +1865,7 @@ ref="table" :data="displayData" :height="tableHeight" - highlight-current-row="true" + :highlight-current-row="true" size="default" v-loading="loading.tableLoading" border @@ -2333,10 +2189,7 @@ /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */ -:deep(.el-dialog) { - // 瀵硅瘽妗嗛珮搴� -} .diag-head { // 瀵硅瘽妗嗗ご閮ㄥ尯鍩� min-height: 200px; @@ -2361,11 +2214,6 @@ border: 2px solid #7bc0fc; } .chart-jump-button { - // 鈥樹笂涓�鏉♀�欙紝鈥樹笅涓�鏉♀�� 鎸夐挳 - // border: 1px solid #fdc2db; - // min-height: 30px; - // width: 200px; - // float: right; display: flex; justify-content: right; } diff --git a/src/views/exception/SiteAuditAssistance.vue b/src/views/exception/SiteAuditAssistance.vue index 303f548..49f083e 100644 --- a/src/views/exception/SiteAuditAssistance.vue +++ b/src/views/exception/SiteAuditAssistance.vue @@ -1,25 +1,25 @@ <script> -import InputSearch from '../../sfc/InputSearch.vue'; -import ExceptionType from '../../sfc/ExceptionType.vue'; -import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'; -import { useFetch } from '../../utils/fetch.js'; +import InputSearch from '@/sfc/InputSearch.vue'; +import ExceptionType from '@/sfc/ExceptionType.vue'; +import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue'; import { useCommonFunction } from '../../utils/common.js'; -import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue' - +import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'; // 寮傚父鍥惧舰寮傛缁勪欢 const DustLineChart = defineAsyncComponent(() => - import('../../sfc/DustLineChart.vue') + import('./components/DustLineChart.vue') ); - +import submitApi from '@/api/audit/submitApi.js'; import dayjs from 'dayjs'; +import ButtonClick from '@/sfc/ButtonClick.vue'; +import index from '@/utils/exception_common_function/index.js'; export default { components: { ExceptionType, InputSearch, TimeSelectWithShortCuts, - DustLineChart, - AreaAndmonitorType + AreaAndmonitorType, + ButtonClick }, data() { return { @@ -28,8 +28,7 @@ // 绔欑偣鍚嶇О name: '', // 閫夋嫨鐨勫紓甯哥被鍨� - exceptionName: [], - + exceptionName: [] }, beginTime: '', endTime: '', @@ -37,6 +36,8 @@ tableData: [], // 琛ㄦ牸灞曠ず鐨勬暟鎹� displayData: [], + // 琛ㄦ牸鍒楀閫� + multipleSelection: [], // 琛ㄦ牸楂樺害 tableHeight: 400, // 琛ㄦ牸鏁版嵁 @@ -45,64 +46,30 @@ // 姣忛〉鏉℃暟 pageSize: 20, total: 0, - + // 琛ㄦ牸鏌ヨ鏃犳暟鎹椂 isNoData: false, // 瀵硅瘽妗嗘樉绀� dialogTableVisible: false, // 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿 - exception: { - // 鏂數鎴栨柇缃� - exception0: [], - // 鏁版嵁瓒呬綆 - exception1: [], - // 瓒呮爣 - exception2: [], - // 鏁版嵁闀挎椂娈垫棤娉㈠姩 - exception3: [], - // 閲忕骇绐佸彉寮傚父 - exception4: [], - // 涓磋繎瓒呮爣寮傚父 - exception5: [], - // 鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父 - exception6: [], - // 婊戝姩骞冲潎鍊煎紓甯� - exception7: [], - - - // 璇ユ椂娈电殑寮傚父鏁伴噺 - exception0Num: 0, - exception1Num: 0, - exception2Num: 0, - exception3Num: 0, - exception4Num: 0, - exception5Num: 0, - exception6Num: 0, - exception7Num: 0, - }, - // 绔欑偣鎬绘暟閲� - siteTotal: 0, - - // 寮傚父鐨勭珯鐐规�绘暟閲� - // exceptionSiteNum:0, // 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁 tableCurrentRowData: null, // 閫変腑琛ㄦ牸褰撳墠琛岀殑绱㈠紩 - selectedRowIndex:-2, + selectedRowIndex: -2, // 椤甸潰涓婄殑鎸夐挳鍔犺浇鐘舵�� loading: { + submitAudit: false, // 鏌ヨ鎸夐挳 - queryButton:false, - // 琛ㄦ牸鍔犺浇涓� - tableLoading: false, + queryButton: false, + // 琛ㄦ牸鍔犺浇涓� + tableLoading: false, // 涓婁竴鏉℃寜閽� preButton: false, // 涓嬩竴鏉℃寜閽� afterButton: false, // 鎶樼嚎鍥� - lineChart: false, - + lineChart: false }, dialog: { @@ -121,23 +88,27 @@ }, // 鏍囪浣� - flag:{ + flag: { // 鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮 - banTouch:0, + banTouch: 0, // 0浠h〃鍒嗛〉锛�1浠h〃涓嶅垎椤� - originClick:0 - } - + originClick: 0 + }, + auditDialog: { + visible: false, + // 瀹℃牳浜� + checker: 'admin', + checkDate: '', + checkerNotes: '', + enterpriseNotes: '' + }, + auditTableData: [], + auditNumByTime: 0 }; }, setup() { - // provide('search',readonly(form)) - const { backData, error, request } = useFetch(); const { isExceedOneMonth } = useCommonFunction(); return { - backData, - error, - request, isExceedOneMonth }; }, @@ -167,79 +138,295 @@ } }, - // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲 - - beginTime() { - this.getShopNames(); - }, - endTime() { - this.getShopNames(); - }, dialogTableVisible() { window.addEventListener('resize', this.updateChart); } }, + computed: { + unCheckedNUm() { + return this.total - this.auditNumByTime; + }, + // 瀹℃牳姣斾緥 + checkedRate() { + return (this.auditNumByTime / this.total) * 100; + } + }, mounted() { - - this.backExceptionDataAWeekAgo(); this.calTableHeight(); - // 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺 - this.getShopNames(); - }, methods: { + /** + * 鏌ョ湅璇ユ鏃堕棿鍐呭凡瀹℃牳鐨勬暟閲� + * @param锛� + * @returns锛� + */ + gethasCheckedNumByTime() { + submitApi.getAuditNumByTime(this.beginTime, this.endTime).then((res) => { + this.auditNumByTime = res.data.data.length; + }); + }, + /** + * 澶氶�夊垪锛堝凡瀹℃牳鐨勮涓嶄細鍔犲叆鍏朵腑锛� + * @param + * @returns + */ + handleSelectionChange(val) { + console.log('閫変腑鐨勮涓猴細', val); + this.multipleSelection = val.filter((row) => row.auditStatus != 3); + }, + /** + * 瑙﹀彂鎵归噺瀹℃牳 + * @param锛� + * @returns锛� + */ + quickReview() { + if (this.multipleSelection.length != 0) { + ElMessageBox.confirm('纭畾瑕佹壒閲忓鏍稿悧?', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + center: true + }).then(() => { + this.noNoteCheck(this.multipleSelection); + setTimeout(() => { + this.gethasCheckedNumByTime(); + ElMessage.success('鎵归噺瀹℃牳瀹屾垚'); + }, 1500); + }); + } else { + ElMessage('鏈�変腑琛ㄦ牸鐨勮'); + } + }, + /** + * 娓呴櫎宸查�変腑鐨勮〃鏍艰锛� + * @param锛� + * @returns锛� + */ + clearSelected() { + this.$refs.table.clearSelection(); + }, + toggleSelection() { + this.$refs.table.clearSelection(); + }, + /** + *鎻愪氦鎵归噺瀹℃牳銆傞粯璁ゅ鏍镐汉锛岀┖澶囨敞 + * @param锛� 闇�瑕佸揩閫熷鏍哥殑琛� + * @returns锛� + */ + noNoteCheck(rows) { + rows.forEach((item) => { + submitApi.submitAudit('admin', '鏃�', '鏃�', item.id, 3); + item.auditStatus = 3; + }); + }, + close() { + // if (this.auditDialog.checkerNotes || this.auditDialog.enterpriseNotes) { + // ElMessageBox.confirm('杩欏皢浼氾紝纭畾瑕佸叧闂悧', '鎻愮ず', + // { + // confirmButtonText: '纭畾', + // cancelButtonText: '鍙栨秷', + // type: 'warning', + // center :'true', + // icon: markRaw(Delete), + // draggable: true, + // }).then(() => { + // ElMessage({ + // type: 'success', + // message: '宸插叧闂�', + // }) + // this.auditDialog.visible = false + // }) + // }else{ + // this.auditDialog.visible = false + // } + this.auditDialog.visible = false; + }, + // 琛ㄦ牸琛岀殑棰滆壊 + tableRowClassName({ row }) { + if (row.auditStatus == 0) { + return 'black-row'; + } else if (row.auditStatus == 1 || row.auditStatus == 2) { + return 'deep-gray-row'; + } else { + return 'complete--gray-row'; + } + }, + /** + * 鍙戣姹� + * @param锛氬鏍镐汉锛屽鏍镐汉澶囨敞锛屼紒涓氬娉紝寮傚父璁板綍缂栧彿 璇ユ潯寮傚父鐨勫鏍哥姸鎬� + * @returns锛� + */ + sendAudit(user, checker, enterprise, exceptionId, status) { + submitApi + .submitAudit( + user, + this.auditDialog.checkerNotes, + this.auditDialog.enterpriseNotes, + exceptionId, + status + ) + .then((res) => { + if (res.data.code == 1) { + ElMessage.success('鎻愪氦鎴愬姛'); + this.tableCurrentRowData.auditStatus = status; + this.tableCurrentRowData.checker = user; + if (checker) { + this.tableCurrentRowData.checkerContent = checker; + } + if (enterprise) { + this.tableCurrentRowData.enterpriseContent = enterprise; + } + } else { + ElMessage.warning('鎻愪氦澶辫触'); + } + this.loading.submitAudit = false; + this.auditDialog.visible = false; + }); + }, + // 鏇存柊瀹℃牳鍐呭 + updateAud(exceptionId, checkerContent, enterpriseContent, auditStatus) { + submitApi + .updateAudit( + exceptionId, + checkerContent, + enterpriseContent, + auditStatus + ) + .then((res) => { + if (res.data.code == 1) { + ElMessage.success('鎻愪氦鎴愬姛'); + this.tableCurrentRowData.auditStatus = auditStatus; + + if (checkerContent) { + this.tableCurrentRowData.checkerContent = checkerContent; + } + if (enterpriseContent) { + this.tableCurrentRowData.enterpriseContent = enterpriseContent; + } + } else { + ElMessage.warning('鎻愪氦澶辫触'); + } + this.loading.submitAudit = false; + this.auditDialog.visible = false; + }); + }, + /** + * 鎻愪氦瀹℃牳 + * @param锛� + * @returns锛� + */ + submitAudit() { + // 鍚屾椂濉啓浜嗗鏍镐汉鍛樺拰浼佷笟鐨勫娉� + this.loading.submitAudit = true; + if (this.auditDialog.checkerNotes && this.auditDialog.enterpriseNotes) { + this.sendAudit( + this.auditDialog.checker, + this.auditDialog.checkerNotes, + this.auditDialog.enterpriseNotes, + this.tableCurrentRowData.id, + 3 + ); + } + // 鍙~浜嗗鏍镐汉鍛樺娉� + else if ( + this.auditDialog.checkerNotes && + !this.auditDialog.enterpriseNotes + ) { + // 绗竴娆″垱寤� + if (this.tableCurrentRowData.auditStatus == 0) { + this.sendAudit( + this.auditDialog.checker, + this.auditDialog.checkerNotes, + this.auditDialog.enterpriseNotes, + this.tableCurrentRowData.id, + 1 + ); + } + // 鍙洿鏂� + else { + this.updateAud( + this.tableCurrentRowData.id, + this.auditDialog.checkerNotes, + this.auditDialog.enterpriseNotes, + 3 + ); + } + } + // 鍙~浜嗕紒涓氬娉ㄥ娉� + else if ( + this.auditDialog.enterpriseNotes && + !this.auditDialog.checkerNotes + ) { + // 绗竴娆″垱寤� + if (this.tableCurrentRowData.auditStatus == 0) { + this.sendAudit( + this.auditDialog.checker, + this.auditDialog.checkerNotes, + this.auditDialog.enterpriseNotes, + this.tableCurrentRowData.id, + 2 + ); + } else { + // 鍙洿鏂� + this.updateAud( + this.tableCurrentRowData.id, + this.auditDialog.checkerNotes, + this.auditDialog.enterpriseNotes, + 3 + ); + } + } else { + ElMessage.warning('璇峰~鍐欏畬鏁存墠鑳芥彁浜�'); + } + + this.loading.submitAudit = false; + // 娓呴櫎 + this.auditDialog.checkerNotes = ''; + this.auditDialog.enterpriseNotes = ''; + }, + + /** + * 寮瑰嚭瀵硅瘽妗嗗苟涓斾繚瀛樺綋鍓嶈鏁版嵁 + * @param锛� + * @createTime:2023-08-17 + * @returns锛� + */ + openAuditDiag(row) { + this.auditDialog.visible = true; + this.tableCurrentRowData = row; + console.log(row); + }, /** * description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹� - * @param锛� + * @param锛� * @createTime:2023-08-17 * @returns锛� */ getAbnormalDataByClick(val) { - this.flag.originClick = 1 + this.flag.originClick = 1; - this.tableData = val - this.total = this.tableData.length + this.tableData = val; + this.total = this.tableData.length; // 榛樿鏄剧ず绗竴椤� this.handleCurrentChange(1); }, - // 鐐瑰嚮琛ㄦ牸鐨勮鏃� - selectTableRow() { + // 鐐瑰嚮琛ㄦ牸鐨勮鏃� + selectTableRow() { // 鑾峰彇褰撳墠琛岀殑绱㈠紩 - this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData); - + 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(){ + setOfflineTbleData() { // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓 - const abnormalTimeTenMinute = this.descTenTime( + const abnormalTimeTenMinute = index.descFiftyTime( this.tableCurrentRowData.beginTime, this.tableCurrentRowData.endTime ); @@ -250,7 +437,7 @@ this.dialog.historyData.push({ name: this.tableCurrentRowData.name, mnCode: this.tableCurrentRowData.mnCode, - dutyCompany:this.tableCurrentRowData.dutyCompany, + dutyCompany: this.tableCurrentRowData.dutyCompany, lst: abnormalTimeTenMinute[i], dustValue: '' }); @@ -260,63 +447,6 @@ this.exceptionTotal = abnormalTimeTenMinute.length; }, - /** - * description锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�45鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗45鍒嗛挓鐨勬椂闂寸偣 - * @param锛� 寮傚父鐨勫紑濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬�� - * @returns锛氭暟缁勩�倀ime[0],time[1],time[2],time[3]鍒嗗埆浠h〃寮傚父鍖洪棿鍓�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; - }, // 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂� // 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂� @@ -328,99 +458,48 @@ * description锛氫竴娆¤姹傚洖鍓嶄腑鍚庡尯闂寸殑鏁版嵁,瀵规暟鎹繘琛屽垎鏋� * @param锛� 鍓嶄腑鍚庡尯闂寸殑璇锋眰鍙傛暟锛屽墠涓悗鐨勬�诲尯闂存椂闂达紝寮傚父寮�濮嬫椂闂达紝涓�鍦虹粨鏉熸椂闂� */ - otherExceptionRequest(allTimeArgs,allTime,exceptionBT,exceptionET) { - // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 - this.loading.lineChart = true + otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) { + // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 + this.loading.lineChart = true; this.$http .get('/dust/history', { params: allTimeArgs }) .then((result) => { this.dialog.allExceptionTimeData = result.data.data; - // 鏂數鎴栨柇缃戞椂閲嶆柊璁剧疆琛ㄦ牸 - if(this.tableCurrentRowData.exceptionType == '0'){ - this.setOfflineTbleData() - } + // 鏂數鎴栨柇缃戞椂閲嶆柊璁剧疆琛ㄦ牸 + if (this.tableCurrentRowData.exceptionType == '0') { + this.setOfflineTbleData(); + } - // x杞存棩鏈熸椂闂� - let dateList = []; - // y杞� 瓒呮爣娌圭儫娴撳害 - let dustValue = []; - let timeAndValue = {}; + // x杞存棩鏈熸椂闂� + let dateList = []; + // y杞� 瓒呮爣娌圭儫娴撳害 + let dustValue = []; + let timeAndValue = {}; - // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅� - timeAndValue = this.keepContinuousByEachFiftyMinutes( + // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅� + 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); + ); + dateList = timeAndValue['xAxis']; + dustValue = timeAndValue['yAxis']; - // 璁剧疆鎶樼嚎鍥鹃厤缃」 - this.reSetChart(dateList,dustValue,exceptionBT, exceptionET, - startIndex, - endIndex) - this.loading.lineChart = false - }); - - }, - /** - * 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; + // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩 + let startIndex = dateList.findIndex((item) => item === exceptionBT); + let endIndex = dateList.findIndex((item) => item === exceptionET); + + // 璁剧疆鎶樼嚎鍥鹃厤缃」 + this.reSetChart( + dateList, + dustValue, + exceptionBT, + exceptionET, + startIndex, + endIndex + ); + this.loading.lineChart = false; + }); }, /** @@ -491,7 +570,7 @@ ] }; break; - // 瓒呮爣 + // 瓒呮爣 case '2': this.dialog.option = { tooltip: {}, @@ -605,7 +684,7 @@ break; // 鏁版嵁瓒呬綆 鍙湁鏃堕棿鐐� case '1': - this.dialog.option = { + this.dialog.option = { tooltip: {}, toolbox: { // 宸ュ叿鏍� @@ -646,7 +725,7 @@ } return item; }), - + markLine: { symbol: 'none', itemStyle: { @@ -699,7 +778,7 @@ } }; break; - case '3' : + case '3': this.dialog.option = { tooltip: {}, toolbox: { @@ -784,7 +863,7 @@ }; break; case '4': - this.dialog.option = { + this.dialog.option = { tooltip: {}, toolbox: { // 宸ュ叿鏍� @@ -831,8 +910,7 @@ } ] ] - }, - + } } ], // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊 @@ -859,15 +937,14 @@ }; break; default: - console.log('娌℃湁璁剧疆璇ュ紓甯哥被鍨嬶紒');; + console.log('娌℃湁璁剧疆璇ュ紓甯哥被鍨嬶紒'); } - this.flag.banTouch = 0 + this.flag.banTouch = 0; }, /** * description锛氬垝鍒嗗嚭寮傚父璧峰鏃堕棿锛屾瀯閫犺姹傚墠涓悗鐨勫弬鏁� */ timeAndDataProcessed() { - //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿 let exceptionBeginTime = this.tableCurrentRowData.beginTime; let exceptionEndTime = this.tableCurrentRowData.endTime; @@ -876,30 +953,35 @@ // 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] ); - // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤� + // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤� - this.otherExceptionRequest(paramsAllTime,beforeAndAfterTime,exceptionBeginTime,exceptionEndTime) + this.otherExceptionRequest( + paramsAllTime, + beforeAndAfterTime, + exceptionBeginTime, + exceptionEndTime + ); }, /** * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭� */ getPreviousRowData() { - // // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛� + // // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛� if (this.selectedRowIndex < this.displayData.length - 1) { // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 - this.flag.banTouch = 1 + this.flag.banTouch = 1; //寰楀埌涓婁竴琛屾暟鎹储寮� this.selectedRowIndex = this.selectedRowIndex + 1; @@ -908,255 +990,55 @@ // this.setinfo(this.selectedRowIndex); // 寰楀埌涓婁竴琛岀殑鏁版嵁 - this.tableCurrentRowData = this.displayData[this.selectedRowIndex] - let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime) - this.loading.preButton = true - this.$http - .get('/dust/history', { params: params }) - .then((response) => { - // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� - this.dialog.historyData = response.data.data; - this.dialog.exceptionTotal = response.data.data.length; - // 閫昏緫澶勭悊 - this.timeAndDataProcessed() - this.loading.preButton = false - }); + this.tableCurrentRowData = this.displayData[this.selectedRowIndex]; + let params = index.requestGetParms( + this.tableCurrentRowData.name, + this.tableCurrentRowData.beginTime, + this.tableCurrentRowData.endTime + ); + this.loading.preButton = true; + this.$http.get('/dust/history', { params: params }).then((response) => { + // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� + this.dialog.historyData = response.data.data; + this.dialog.exceptionTotal = response.data.data.length; + // 閫昏緫澶勭悊 + this.timeAndDataProcessed(); + this.loading.preButton = false; + }); } - - //寰楀埌涓婁竴琛屾暟鎹储寮� - // this.selectedRowIndex = this.selectedRowIndex + 1; - // this.tableCurrentRowData = this.displayData[this.selectedRowIndex] - // console.log('褰撳墠琛屾暟鎹负:',this.tableCurrentRowData); }, /** * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭� */ getNextRowData() { - // 涓嶆槸琛ㄦ牸鐨勭涓�琛� + // 涓嶆槸琛ㄦ牸鐨勭涓�琛� if (this.selectedRowIndex !== 0) { // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 - this.flag.banTouch = 1 + this.flag.banTouch = 1; //寰楀埌涓婁竴琛屾暟鎹储寮� this.selectedRowIndex = this.selectedRowIndex - 1; //璇锋眰鏁版嵁 鏀瑰彉exceedingData - // this.setinfo(this.selectedRowIndex); - // 寰楀埌涓婁竴琛岀殑鏁版嵁 - this.tableCurrentRowData = this.displayData[this.selectedRowIndex] + // 寰楀埌涓婁竴琛岀殑鏁版嵁 + this.tableCurrentRowData = this.displayData[this.selectedRowIndex]; - let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime) - this.loading.afterButton = true - this.$http - .get('/dust/history', { params: params }) - .then((response) => { - // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� - this.dialog.historyData = response.data.data; - this.dialog.exceptionTotal = response.data.data.length; - // 閫昏緫澶勭悊 - this.timeAndDataProcessed() - this.loading.afterButton = false - }); + let params = index.requestGetParms( + this.tableCurrentRowData.name, + this.tableCurrentRowData.beginTime, + this.tableCurrentRowData.endTime + ); + this.loading.afterButton = true; + this.$http.get('/dust/history', { params: params }).then((response) => { + // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� + this.dialog.historyData = response.data.data; + this.dialog.exceptionTotal = response.data.data.length; + // 閫昏緫澶勭悊 + this.timeAndDataProcessed(); + this.loading.afterButton = false; + }); } }, - - /** - * description锛氫粠瀛愮粍浠惰幏寰楁煇绔欑偣璇ユ椂娈电殑寮傚父鏁版嵁 - * @createTime:2023-08-18 - */ - backExceptionData(val1, val2) { - this.displayData = val1; - this.total = val2; - }, - - /** - * description锛氬綋鐢ㄦ埛鏀瑰彉鏌ヨ鐨勬椂闂村尯闂存椂锛屼細鏍规嵁璇ュ尯闂存煡璇㈠悇寮傚父鐨勭珯鐐癸紝鏌ヨ璇ユ椂闂村尯闂寸殑鍚勫紓甯告暟閲� - * @createTime:2023-08-18 - */ - getShopNames() { - /* 鏌ヨ寮傚父鐨勭珯鐐� */ - this.$http - .get('/dust/sitenamecode', { - params: { - exceptionType: '0', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception0 = result.data.data; - }); - this.$http - .get('/dust/sitenamecode', { - params: { - exceptionType: '1', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception1 = result.data.data; - }); - this.$http - .get('/dust/sitenamecode', { - params: { - exceptionType: '2', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception2 = result.data.data; - }); - - this.$http - .get('/dust/sitenamecode', { - params: { - exceptionType: '3', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception3 = result.data.data; - }); - - this.$http - .get('/dust/sitenamecode', { - params: { - exceptionType: '4', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception4 = result.data.data; - }); - this.$http - .get('/dust/sitenamecode', { - params: { - exceptionType: '5', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception5 = result.data.data; - }); - this.$http - .get('/dust/sitenamecode', { - params: { - exceptionType: '6', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception6 = result.data.data; - }); - - - - /* 寮傚父寮傚父鏁伴噺 */ - this.$http - .get('/dust/exceptionnum', { - params: { - exceptionType: '0', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception0Num = result.data.data; - }); - this.$http - .get('/dust/exceptionnum', { - params: { - exceptionType: '1', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception1Num = result.data.data; - }); - this.$http - .get('/dust/exceptionnum', { - params: { - exceptionType: '2', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception2Num = result.data.data; - }); - - this.$http - .get('/dust/exceptionnum', { - params: { - exceptionType: '3', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception3Num = result.data.data; - }); - - this.$http - .get('/dust/exceptionnum', { - params: { - exceptionType: '4', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception4Num = result.data.data; - }); - this.$http - .get('/dust/exceptionnum', { - params: { - exceptionType: '5', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception5Num = result.data.data; - }); - this.$http - .get('/dust/exceptionnum', { - params: { - exceptionType: '6', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception.exception6Num = result.data.data; - }); - }, - - /** - * description锛氳姹傚紓甯哥殑搴楅摵鍚嶅瓧 - * @param锛氬紓甯哥被鍨嬶紝寮�濮嬫椂闂达紝缁撴潫鏃堕棿 - * @createTime:2023-08-18 - * @returns锛� 寮傚父鐨勬暟鎹� - */ - // getSiteNameByExceptionType(exception, beginT, endT) { - // let param = { - // exceptionType: exception, - // beginTime: beginT, - // endTime: endT - // }; - - // this.$http.get('/dust/sitenamecode', { params: param }).then((res) => { - // return res.data.data; - // }); - // return; - // }, /** * description锛氭樉绀哄璇濇,杩斿洖璇ュ紓甯告椂闂存鐨勬墍鏈夋暟鎹� @@ -1166,7 +1048,7 @@ showDialog(row) { // 鎵撳紑瀵硅瘽妗� this.dialogTableVisible = true; - + // 淇濆瓨褰撳墠琛屾暟鎹� this.tableCurrentRowData = row; @@ -1193,9 +1075,10 @@ this.dialog.historyData = response.data.data; this.dialog.exceptionTotal = response.data.data.length; // 閫昏緫澶勭悊 - this.timeAndDataProcessed() + this.timeAndDataProcessed(); }); }, + /** * description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁 * @createTime:2023-08-18 @@ -1205,9 +1088,9 @@ alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀'); return; } - this.loading.queryButton = true - this.flag.originClick = 0 - this.loading.tableLoading = true; + + this.flag.originClick = 0; + let params = {}; params['page'] = this.currentPage; params['pageSize'] = this.pageSize; @@ -1219,24 +1102,27 @@ } params['beginTime'] = this.beginTime; params['endTime'] = this.endTime; - + this.loading.tableLoading = true; + this.loading.queryButton = true; this.$http .get('/dust/exceptiondata', { params: params }) .then((response) => { // 淇濆瓨杩斿洖鐨� // this.tableData = response.data.data.rows; this.displayData = response.data.data.rows; - this.loading.queryButton = false - this.loading.tableLoading = false; + this.loading.queryButton = false; + if (response.data.data.total == 0) { ElMessage('璇ユ椂娈垫棤鏁版嵁'); this.isNoData = true; return; } this.total = response.data.data.total; + this.loading.tableLoading = false; // 绉婚櫎绌烘暟鎹姸鎬� this.isNoData = false; }); + this.gethasCheckedNumByTime(); }, /** @@ -1264,12 +1150,14 @@ if (response.data.data.total == 0) { ElMessage('璇ユ椂娈垫棤鏁版嵁'); + this.loading.tableLoading = false; this.isNoData = true; return; } - this.total = response.data.data.total; this.loading.tableLoading = false; + this.total = response.data.data.total; }); + this.gethasCheckedNumByTime(); }, /** @@ -1287,7 +1175,8 @@ const h2 = this.$refs.h2.$el.offsetHeight; const h4 = this.$refs.h4.$el.offsetHeight; // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛 - this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h4}px - 100px - var(--el-main-padding) * 2)`; + this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h4}px - 20px - 100px - var(--el-main-padding) * 2)`; + // this.tableHeight = `calc(100vh - ${h1}px - ${h4}px - 100px - var(--el-main-padding) * 2)`; }, // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂 @@ -1310,11 +1199,10 @@ // 灏嗗綋鍓嶉〉鍙风粰currentPage this.currentPage = val; - // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟 - if(this.flag.originClick==0){ + if (this.flag.originClick == 0) { this.handleSubmit(); - }else if(this.flag.originClick ==1){ + } else if (this.flag.originClick == 1) { const startIndex = (val - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; @@ -1334,51 +1222,81 @@ </script> <template> - <el-row ref="h1"> <el-col> <el-form :inline="true"> <div class="head-container-text"> - <el-form-item > - <AreaAndmonitorType ></AreaAndmonitorType> + <el-form-item> + <AreaAndmonitorType></AreaAndmonitorType> </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> - <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts> + <TimeSelectWithShortCuts + @submit-time="giveTime" + timeType="month" + ></TimeSelectWithShortCuts> </el-form-item> <el-form-item> <ExceptionType - @submit-value="(n) => form.exceptionName = n" + @submit-value="(n) => (form.exceptionName = n)" ></ExceptionType> </el-form-item> </div> <div class="head-container-search"> + <span class="head-describtion-text"> + 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span + > <el-form-item> - <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button> + <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit"><el-icon + style="margin-right: 6px;font-size: 1.2em;"><i-ep-Search /></el-icon>鏌ヨ</el-button> --> + <ButtonClick + content="鎼滅储" + type="warning" + :loading="loading.queryButton" + @do-search="handleSubmit" + ></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 class="anasysis" ref="h2"> + <el-col :span="6"> + <el-card> + <el-statistic title="鍏ㄩ儴瀹℃牳鏁�" :value="total" /> + </el-card> + </el-col> + <el-col :span="6"> + <el-card> + <el-statistic title="寰呭鏍告暟" :value="unCheckedNUm"> </el-statistic> + </el-card> + </el-col> + + <el-col :span="6"> + <el-card> + <el-statistic title="宸插鏍告暟" :value="auditNumByTime" /> + </el-card> + </el-col> + + <el-col :span="6"> + <el-card> + <el-statistic title="瀹℃牳姣斾緥" :value="checkedRate"> + <template #suffix> % </template> + </el-statistic> + </el-card> + </el-col> + </el-row> <el-row> <el-col v-show="!isNoData"> @@ -1386,11 +1304,14 @@ ref="table" :data="displayData" :height="tableHeight" - highlight-current-row="true" + :highlight-current-row="true" + :row-class-name="tableRowClassName" size="default" v-loading="loading.tableLoading" + @selection-change="handleSelectionChange" border > + <el-table-column type="selection" width="55" align="center" /> <el-table-column type="index" label="搴忓彿" @@ -1448,17 +1369,60 @@ align="center" show-overflow-tooltip /> - <el-table-column label="鎿嶄綔" align="center"> + <el-table-column label="鎿嶄綔" align="center" width="200" fixed="right"> <template #default="{ row }"> + <el-button type="primary" @click="showDialog(row)"> + 鏌ョ湅璇︽儏 + </el-button> <el-button - type="primary" - class="table-button" - @click="showDialog(row)" - >鏌ョ湅璇︽儏</el-button + v-if="row.auditStatus == 3" + size="default" + type="info" + @click="openAuditDiag(row)" + >宸插鏍�</el-button > + <el-button + type="success" + size="default" + plain + v-else-if="row.auditStatus == 1 || row.auditStatus == 2" + @click="openAuditDiag(row)" + >瀹℃牳</el-button + > + + <el-button + v-else + size="default" + type="danger" + @click="openAuditDiag(row)" + >瀹℃牳</el-button + > + <!-- <span v-if="row.auditStatus == 3">宸插鏍�</span + ><span v-else>瀹℃牳</span> --> </template> </el-table-column> </el-table> + + <!-- <el-row ref="h2"> + <el-row> --> + <div class="check-button"> + <el-button + type="primary" + size="small" + :disabled="multipleSelection.length == 0" + @click="quickReview" + >鎵归噺瀹℃牳</el-button + > + <el-button + type="primary" + size="small" + :disabled="multipleSelection.length == 0" + @click="clearSelected" + >娓呴櫎閫変腑</el-button + > + </div> + <!-- </el-row> + </el-row> --> <el-pagination ref="h4" @@ -1477,38 +1441,102 @@ <el-empty v-show="isNoData" :image-size="200" /> + <el-dialog v-model="auditDialog.visible" :show-close="false" draggable> + <template #header> + <!-- <div class="title-text">娣诲姞澶囨敞</div> --> + <span class="title-text">{{ tableCurrentRowData.name }}</span + ><span>绔欑偣寮傚父鏁版嵁瀹℃牳</span> + </template> + + <el-form label-position="top"> + <el-form-item label="瀹℃牳浜�"> + <el-input v-model="auditDialog.checker"></el-input> + </el-form-item> + <el-form-item label="瀹℃牳鎯呭喌"> + <el-input + v-model="auditDialog.checkerNotes" + type="textarea" + :autosize="true" + placeholder="瀹℃牳浜哄憳濉啓" + :disabled="tableCurrentRowData.auditStatus == 1" + /> + </el-form-item> + <el-form-item label="浼佷笟鍙嶉"> + <el-input + v-model="auditDialog.enterpriseNotes" + type="textarea" + :autosize="true" + placeholder="浼佷笟濉啓" + :disabled="tableCurrentRowData.auditStatus == 2" + /> + </el-form-item> + </el-form> + <el-card> + <template #header>瀹℃牳璇︽儏</template> + <el-form> + <el-form-item label="瀹℃牳浜�">{{ + tableCurrentRowData.checker + }}</el-form-item> + <el-form-item label="瀹℃牳鎯呭喌">{{ + tableCurrentRowData.checkerContent + }}</el-form-item> + <el-form-item label="瀹℃牳浜哄憳">{{ + tableCurrentRowData.enterpriseContent + }}</el-form-item> + </el-form> + </el-card> + <template #footer> + <span class="dialog-footer"> + <el-button @click="close">鍙栨秷</el-button> + <el-button + type="primary" + :loading="loading.submitAudit" + :disabled="tableCurrentRowData.auditStatus == 3" + @click="submitAudit" + > + 鎻愪氦 + </el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="dialogTableVisible" draggable align-center height="300px"> <!-- 澶� --> <template #header> <div class="diag-head"> <div class="diag-head-text"> <div> - <span class="diag-head-text1">绔欑偣鍚嶇О锛�</span - >{{ tableCurrentRowData.name }} + <span class="diag-head-text1">绔欑偣鍚嶇О锛�</span + >{{ tableCurrentRowData.name }} </div> <div> - <span class="diag-head-text1">寮傚父绫诲瀷锛�</span> - <span v-if="tableCurrentRowData.exceptionType == '0'" - >鏂數鎴栨柇缃�</span - > - <span v-else-if="tableCurrentRowData.exceptionType == '1'" - >鏁版嵁瓒呬綆</span - > - <span v-else-if="tableCurrentRowData.exceptionType == '2'">瓒呮爣</span> - <span v-else-if="tableCurrentRowData.exceptionType == '3'" - >鏁版嵁闀挎椂闂存棤娉㈠姩</span - > - <span v-else-if="tableCurrentRowData.exceptionType == '4'" - >閲忕骇绐佸彉寮傚父</span - > <span v-else-if="tableCurrentRowData.exceptionType == '5'" - >涓磋繎瓒呮爣寮傚父</span - > <span v-else-if="tableCurrentRowData.exceptionType == '6'" - >鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父</span - > <span v-else-if="tableCurrentRowData.exceptionType == '7'" - >婊戝姩骞冲潎鍊煎紓甯�</span - > - </div> + <span class="diag-head-text1">寮傚父绫诲瀷锛�</span> + <span v-if="tableCurrentRowData.exceptionType == '0'" + >鏂數鎴栨柇缃�</span + > + <span v-else-if="tableCurrentRowData.exceptionType == '1'" + >鏁版嵁瓒呬綆</span + > + <span v-else-if="tableCurrentRowData.exceptionType == '2'" + >瓒呮爣</span + > + <span v-else-if="tableCurrentRowData.exceptionType == '3'" + >鏁版嵁闀挎椂闂存棤娉㈠姩</span + > + <span v-else-if="tableCurrentRowData.exceptionType == '4'" + >閲忕骇绐佸彉寮傚父</span + > + <span v-else-if="tableCurrentRowData.exceptionType == '5'" + >涓磋繎瓒呮爣寮傚父</span + > + <span v-else-if="tableCurrentRowData.exceptionType == '6'" + >鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父</span + > + <span v-else-if="tableCurrentRowData.exceptionType == '7'" + >婊戝姩骞冲潎鍊煎紓甯�</span + > + </div> <div> <span class="diag-head-text1">寮傚父鏃堕棿娈碉細</span @@ -1536,14 +1564,13 @@ </div> </template> - <!-- :option="dialog.option" --> - <!-- 鍥惧舰 --> <DustLineChart :option="dialog.option" :is-open-dialog="dialogTableVisible" v-loading="loading.lineChart" - ></DustLineChart> + > + </DustLineChart> <!-- 琛ㄦ牸 --> <div> @@ -1600,16 +1627,12 @@ tableCurrentRowData.exceptionType == '1' || tableCurrentRowData.exceptionType == '2' || tableCurrentRowData.exceptionType == '3' || - tableCurrentRowData.exceptionType == '4' + tableCurrentRowData.exceptionType == '4' " >寮傚父鏁版嵁锛�</span > <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span> - <span - v-show=" - tableCurrentRowData.exceptionType === '0' - " - > + <span v-show="tableCurrentRowData.exceptionType === '0'"> (閫昏緫璁$畻)</span > </el-tag> @@ -1619,14 +1642,14 @@ <style lang="scss" scoped> .el-row { - margin-left: 10px; + margin-left: 20px; } /* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */ .head-container-search { - // display: flex; - // justify-content: flex-end; - float: right; + display: flex; + justify-content: space-between; + // float: right; } .head-describtion-text { @@ -1635,110 +1658,73 @@ font-size: 14px; color: gray; } + /* 鏉′欢鏌ヨ妯″潡缁撴潫 */ - - - -/* 寮傚父鍒嗘瀽妯″潡鐨勬牱寮� */ -.card-text1 { - // 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒� - margin: 10px; +/*鍒嗘瀽 */ +.anasysis { + margin-bottom: 20px; } -.card-text1 + div { - // 榛戜綋鐨勫紓甯稿悕瀛椾笅闈㈢殑 - margin: 12px; -} -.card-exception-buttom { - // 寮傚父绔欑偣鏂囨湰鎸夐挳鍖哄煙 - padding: 11px; -} -.card-header { - margin-left: 5px; - font-size: 18px; +:deep(.el-statistic__head) { 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-image { -} -.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 { - // 寮傚父鏁板崰姣旂殑澶栬竟璺� - // margin-left: 50px; - font-size: 14px; - white-space: nowrap; -} -.text-blank { - // 閫楀彿 - margin-right: 10px; - color: #000000; -} -.card-row { - margin-bottom: 10px; -} - -/* 寮傚父鍒嗘瀽妯″潡缁撴潫 */ +/* 鍒嗘瀽缁撴潫 */ /* 琛ㄦ牸妯″潡鐨勬牱寮� */ +:global(.el-table .black-row) { + color: black; +} + +:global(.el-table .complete--gray-row) { + color: #86909c; +} +:global(.el-table .deep-gray-row) { + color: #7f9fcf; +} +//瀵硅瘽妗嗘爣棰� +.el-form-item__labe { + font-weight: bold; +} +.title-text { + font-weight: bold; + margin-right: 20px; +} +.check-button { + // justify-content: flex-end; + float: right; + margin-top: 10px; + margin-right: 20px; +} + /* 琛ㄦ牸妯″潡缁撴潫 */ - - - - /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */ -:deep(.el-dialog) { - // 瀵硅瘽妗嗛珮搴� -} .diag-head { // 瀵硅瘽妗嗗ご閮ㄥ尯鍩� min-height: 200px; // border: 1px solid #fdc2db; } + .diag-head-text1 { // 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� font-weight: bold; } -.diag-head-text span:nth-child(2) { - // 瀵硅瘽妗嗗ご閮ㄢ�樺紓甯哥被鍨嬧�欏睘鎬� - // margin-left: 150px; -} + .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 { // 鈥樹笂涓�鏉♀�欙紝鈥樹笅涓�鏉♀�� 鎸夐挳 - // border: 1px solid #fdc2db; min-height: 30px; width: 200px; float: right; @@ -1751,11 +1737,12 @@ margin-bottom: 20px; min-width: 600px; } + .mx-1 { position: absolute; left: 10px; bottom: 10px; - } + /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */ </style> diff --git a/src/sfc/DustExceptionText.vue b/src/views/exception/components/DustExceptionText.vue similarity index 100% rename from src/sfc/DustExceptionText.vue rename to src/views/exception/components/DustExceptionText.vue diff --git a/src/sfc/DustLineChart.vue b/src/views/exception/components/DustLineChart.vue similarity index 100% rename from src/sfc/DustLineChart.vue rename to src/views/exception/components/DustLineChart.vue diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue index 8f32e7c..aaf2359 100644 --- a/src/views/line_graph/DataRiskModel.vue +++ b/src/views/line_graph/DataRiskModel.vue @@ -1,8 +1,8 @@ <!-- 鏃ュ潎鍊� --> <script> -import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'; -import InputSearch from '../../sfc/InputSearch.vue'; -import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'; +import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue'; +import InputSearch from '@/sfc/InputSearch.vue'; +import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'; import DustRadarChart from './components/DustRadarChart.vue'; import exceptionApi from '@/api/exceptionApi.js'; @@ -354,14 +354,14 @@ <el-container> <el-main> - <el-form :inline="true" :model="form"> + <el-form :inline="true" :model="form" > <el-form-item> <AreaAndmonitorType></AreaAndmonitorType> </el-form-item> <el-form-item> <InputSearch - :isNeedDefaultSite="1" + isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch> </el-form-item> @@ -388,7 +388,10 @@ shadow="never" > <DustRadarChart :name="['鏁版嵁鏈夋晥鐜�','鍏稿瀷寮傚父澶嶇幇鐜�','寮傚父绫诲瀷鑱氶泦搴�','鏁版嵁瓒呮爣鐜�','鏁版嵁鍦ㄧ嚎鐜�']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart> + 鏉冮噸锛歿{ ((bill.online*0.1+bill.valid*0.2+bill.exceeding*0.2+bill.exceptionTypeAggregation*0.2+bill.exceptionRecurrence*0.3)*0.01).toFixed(2) }} </el-card> + + </el-col> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4"> @@ -420,14 +423,7 @@ {{ bill.exceptionRecurrence*100 }}% </el-form-item> </el-form> - <!-- <div class="date-text">鏈�澶у��:{{ bill.max }} mg/m鲁</div> --> - <!-- <div>鏈�灏忓��:{{ bill.min }} mg/m鲁</div> - <div>鍧囧��:{{ bill.avg }} mg/m鲁</div> - <div>鏁版嵁鏈夋晥鐜�:{{ bill.online }}%</div> - <div>鏁版嵁鍦ㄧ嚎鐜�:{{ bill.valid }}%</div> - <div>鏁版嵁瓒呮爣鐜�:{{ bill.exceeding }}%</div> - <div>寮傚父绫诲瀷鑱氶泦搴�:{{ bill.exceptionTypeAggregation*100 }}%</div> - <div>鍏稿瀷寮傚父澶嶇幇鐜�:{{ bill.exceptionRecurrence*100 }}%</div> --> + </el-card> </el-col> diff --git a/src/views/line_graph/DataRiskRank.vue b/src/views/line_graph/DataRiskRank.vue index 56824f2..8ee4838 100644 --- a/src/views/line_graph/DataRiskRank.vue +++ b/src/views/line_graph/DataRiskRank.vue @@ -1,14 +1,12 @@ <script> -import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'; -// import InputSearch from '../../sfc/InputSearch.vue'; -import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'; +import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue'; +import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'; import {useCommonFunction} from '../../utils/common.js'; import requetsApi from '@/api/exportExcel/requetsApi.js' import dayjs from 'dayjs'; export default { components: { TimeSelectWithShortCuts, - // InputSearch AreaAndmonitorType }, data() { @@ -26,10 +24,6 @@ // end: '2023-05-15', //缁撴潫鏃堕棿 form: { - // 绔欑偣鍚嶇О - name: '', - // 璁惧缂栧彿 - number: '', // 寮�濮嬫椂闂� beginTime: '', // 缁撴潫鏃堕棿 @@ -43,14 +37,6 @@ return {cmpp,exportToExcel} }, - // watch:{ - // pageSize(){ - // this.handleSizeChange() - // }, - // currentPage(){ - // this.handleCurrentChange() - // }, - // }, mounted() { this.form.name = ''; @@ -174,13 +160,11 @@ <div class="search-container"> <el-container> <el-main> - <el-form :inline="true" :model="form" class="demo-form-inline"> + <el-form :inline="true" :model="form" > <el-form-item> <AreaAndmonitorType></AreaAndmonitorType> </el-form-item> - <!-- <el-form-item> - <InputSearch @submit-value="(n) => (form.name = n)"></InputSearch> - </el-form-item> --> + <el-form-item> <TimeSelectWithShortCuts @submit-time="giveTime" @@ -194,7 +178,6 @@ <el-card> <el-empty v-show="isNoData" :image-size="200" /> - <!-- <LineChart :chartData="option"> </LineChart> --> </el-card> <el-table diff --git a/src/views/origin_data/BusinessReport.vue b/src/views/line_graph/SiteComprehensiveRskRanking.vue similarity index 88% rename from src/views/origin_data/BusinessReport.vue rename to src/views/line_graph/SiteComprehensiveRskRanking.vue index 7bc7900..fccc0d1 100644 --- a/src/views/origin_data/BusinessReport.vue +++ b/src/views/line_graph/SiteComprehensiveRskRanking.vue @@ -16,7 +16,7 @@ <template> <div> - 涓氬姟鎶ヨ〃 +绔欑偣缁煎悎椋庨櫓鎺掑悕 </div> </template> diff --git a/src/views/line_graph/components/LineChart.vue b/src/views/line_graph/components/LineChart.vue index 71bf7f5..9c2ef43 100644 --- a/src/views/line_graph/components/LineChart.vue +++ b/src/views/line_graph/components/LineChart.vue @@ -53,11 +53,11 @@ }, }, - beforeUnmount() { - if (this.chart) { - this.chart.dispose(); - } - }, + // beforeUnmount() { + // if (this.chart) { + // this.chart.dispose(); + // } + // }, methods: { intiChart() { // 鍒涘缓echarts瀹炰緥 diff --git a/src/views/login/LoginSystem.vue b/src/views/login/LoginSystem.vue index 8b89e3f..49a19c4 100644 --- a/src/views/login/LoginSystem.vue +++ b/src/views/login/LoginSystem.vue @@ -20,6 +20,7 @@ placeholder="璇疯緭鍏ュ瘑鐮�" type="password" size="large" + show-password ></el-input> </el-form-item> diff --git a/src/views/origin_data/HistoryData.vue b/src/views/origin_data/HistoryData.vue deleted file mode 100644 index c3205da..0000000 --- a/src/views/origin_data/HistoryData.vue +++ /dev/null @@ -1,385 +0,0 @@ -<script> -import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'; -import ScenarioType from '../../sfc/ScenarioType.vue'; -import InputSearch from '../../sfc/InputSearch.vue'; -import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue' - -import {useCommonFunction} from '../../utils/common.js'; -import requetsApi from '@/api/exportExcel/requetsApi.js' - -import dayjs from 'dayjs'; - -export default { - components: { - TimeSelectWithShortCuts, - ScenarioType, - InputSearch, - AreaAndmonitorType - }, - data() { - return { - form: { - // 绔欑偣鍚嶇О - name: '', - // 璁惧缂栧彿 - number: '', - // 寮�濮嬫椂闂� - beginTime: '', - // 缁撴潫鏃堕棿 - endTime: '' - }, - // 杩斿洖鐨勬暟鎹� - tableData: [], - // 琛ㄦ牸鏁版嵁 - displayData: [], - // 褰撳墠椤� - currentPage: 1, - // 姣忛〉鏉℃暟 - pageSize: 20, - total: 0, - // 鍔犺浇涓� - loading: false, - // 绌虹姸鎬� - isNoData: false, - // 宸查�変腑鐨勫満鏅被鍨� - scenarioType: [], - // 琛ㄦ牸楂樺害 - tableHeight: 500 - }; - }, - setup(){ - const {isExceedOneMonth,exportToExcel} = useCommonFunction() - return {isExceedOneMonth,exportToExcel} - }, - mounted() { - this.backMinuteDataAWeekAgo(); - this.calTableHeight(); - }, - - methods: { - exportDom(){ - - let params ={ - 'beginTime':this.form.beginTime, - 'endTime': this.form.endTime, - } - if (this.form.name) { - params['siteName'] = this.form.name; - } - if (this.form.number) { - params['mnCode'] = this.form.numbe; - } - if (this.scenarioType.length != 0) { - params['scenarioType'] = this.scenarioType; - } - requetsApi.fetchAlSiteData(params).then(res => { - const data = res.data.data - console.log('闀垮害锛�',data.length); - - const tableColumns = [ - 'name', - 'address', - 'dutyCompany', - 'mnCode', - 'typeName', - 'dustValue', - 'noiseValue', - 'lst', - 'quality', - 'groupName', - - ] - const excelColumns = [['A1','绔欑偣鍚嶇О'], - ['B1','鍦板潃'],['C1','渚涘簲鍟�'],['D1','璁惧缂栧彿'], - ['E1','绫诲瀷'],['F1','鎵皹娴撳害(mg/m鲁)'],['G1','鍣0(dB)'], - ['H1','閲囬泦鏃堕棿'],['I1','绛夌骇'],['J1','鎵�鍦ㄥ尯鍘�']] - this.exportToExcel(data,tableColumns,excelColumns,'鍘嗗彶鏁版嵁琛�.xlsx') - }) - }, - // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲 - calTableHeight() { - const h1 = this.$refs.h1.$el.offsetHeight; - const h2 = this.$refs.h2.$el.offsetHeight; - // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛 - this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 40px - var(--el-main-padding) * 2`; - }, - giveTime(val) { - //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) - this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'); - this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss'); - }, - // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂 - handleSizeChange(val) { - this.pageSize = val; - - // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉 - this.handleCurrentChange(1); - }, - - // 椤靛彿鏀瑰彉鏃惰Е鍙� - handleCurrentChange(val) { - console.log('褰撳墠椤典负锛�', val); - // 灏嗗綋鍓嶉〉鍙风粰currentPage - this.currentPage = val; - - // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟 - this.handleSubmit(); - }, - //搴忓彿閫掑 - indexMethod(index) { - return index + 1 + (this.currentPage - 1) * this.pageSize; - }, - - // 鏌ヨ鏁版嵁 - handleSubmit() { - // if (this.isExceedOneMonth(this.form.beginTime, this.form.endTime)) { - // alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀'); - // return; - // } - this.loading = true; - let params = {}; - params['page'] = this.currentPage; - params['pageSize'] = this.pageSize; - if(this.form.name){ - params['siteName'] = this.form.name; - } - if(this.form.number){ - params['mnCode'] = this.form.number; - } - params['beginTime'] = this.form.beginTime; - params['endTime'] = this.form.endTime; - if (this.scenarioType.length != 0) { - params['scenarioType'] = this.scenarioType.join(); - } - - this.$http.get('/dust/history1', { params: params }).then((response) => { - // 淇濆瓨杩斿洖鐨� - this.tableData = response.data.data.rows; - this.displayData = this.tableData; - - if (response.data.data.total == 0) { - ElMessage('璇ユ椂娈垫棤鏁版嵁'); - this.isNoData = true; - return; - } - - this.total = response.data.data.total; - this.loading = false; - // 绉婚櫎绌烘暟鎹姸鎬� - this.isNoData = false; - }); - }, - backMinuteDataAWeekAgo() { - // 鎵撳紑椤甸潰鍔犺浇鏈�杩戜竴鍛ㄧ殑鏁版嵁 - this.loading = true; - // 缁欒緭鍏ユ璁剧疆榛樿鐨勯�夋嫨椤� - - let params = {}; - params['siteName'] = this.form.name; - params['beginTime'] = this.form.beginTime; - params['endTime'] = this.form.endTime; - - this.$http.get('/dust/history1', { params: params }).then((response) => { - // 淇濆瓨杩斿洖鐨� - this.tableData = response.data.data.rows; - this.displayData = this.tableData; - - if (response.data.data.total == 0) { - ElMessage('璇ユ椂娈垫棤鏁版嵁'); - this.isNoData = true; - return; - } - this.total = response.data.data.total; - this.loading = false; - }); - } - } -}; -</script> - -<template> - <el-row> - <el-col ref="h1" class="head-row"> - <el-card > - <el-form :inline="true"> - <div class="demo-form-inline"> - <el-row> - <el-col> - - <el-form-item> - <AreaAndmonitorType ></AreaAndmonitorType> - </el-form-item> - <el-form-item> - <template #label> </template> - <InputSearch :isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)"> - </InputSearch> - </el-form-item> - <el-form-item> - <template #label> - <span class="font-label">璁惧缂栧彿:</span> - </template> - <el-input - v-model="form.number" - clearable - placeholder="璇疯緭鍏�" - ></el-input> - </el-form-item> - <el-form-item> - <ScenarioType @submitScenarioType="(val) => (scenarioType = val)"> - </ScenarioType> - </el-form-item> - </el-col> - <el-form-item> - <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts> - </el-form-item> - </el-row> - </div> - <div class="button-and-export"> - <el-form-item> - <el-button - type="primary" - @click="handleSubmit" - style="margin-left: 10px" - >鏌ヨ</el-button - > - - <el-button type="success" @click="exportDom">瀵煎嚭鏁版嵁</el-button> - </el-form-item> - </div> - </el-form> - </el-card> - </el-col> - </el-row> - -<el-row> - <el-col v-show="!isNoData" > - - <el-table - border - size="default" - highlight-current-row="true" - :data="displayData" - :height="tableHeight" - v-loading="loading" - table-layout="auto" - > - <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣--> - <el-table-column - type="index" - label="搴忓彿" - align="center" - fixed - :index="indexMethod" - - ></el-table-column> - <el-table-column - prop="name" - label="绔欑偣鍚嶇О" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="address" - label="鍦板潃" - align="center" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="dutyCompany" - label="渚涘簲鍟�" - align="center" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="mnCode" - label="璁惧缂栧彿" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="typeName" - label="绫诲瀷" - align="center" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="dustValue" - label="鎵皹娴撳害(mg/m鲁)" - align="center" - sortable - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="noiseValue" - label="鍣0(dB)" - align="center" - sortable - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="lst" - label="閲囬泦鏃堕棿" - sortable - align="center" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="quality" - label="绛夌骇" - align="center" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="groupName" - label="鎵�鍦ㄥ尯鍘�" - align="center" - show-overflow-tooltip - > - </el-table-column> - </el-table> - <!--size-change 鏄痯ageSize 鏀瑰彉鏃朵細瑙﹀彂鐨勪簨浠�,handleSizeChange鏄簨浠跺鐞嗗嚱鏁� - current-change 鏄痗urrentPage 鏀瑰彉鏃朵細瑙﹀彂鐨勪簨浠� --> - - <el-pagination - ref="h2" - background - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :page-sizes="[10, 20, 50, 100]" - :page-size="pageSize" - :total="total" - layout="total,sizes, prev, pager, next, jumper" - :current-page="currentPage" - ></el-pagination> - - </el-col> - <el-empty v-show="isNoData" :image-size="200" /> - - </el-row> - -</template> - -<style lang="scss" scoped> -// 鏁翠綋宸﹀杈硅窛 -.el-row { - margin-left: 10px; -} -.head-row { - margin: 10px 0px; -} -.el-card { - border-radius: 9px; -} -.font-label { - margin-top: 3px; - font-weight: bold; -} -.demo-form-inline { - display: flex; -} -.button-and-export { - display: flex; - justify-content: flex-end; /* 浠庤灏句綅缃紑濮嬫帓鍒� */ -} -.el-pagination { - margin: 10px 0px; -} -</style> diff --git a/src/views/pass_login/LoginAndGetData.vue b/src/views/pass_login/LoginAndGetData.vue index e69de29..e848234 100644 --- a/src/views/pass_login/LoginAndGetData.vue +++ b/src/views/pass_login/LoginAndGetData.vue @@ -0,0 +1,25 @@ +<script> + export default { + data() { + return{ + + } + }, + mounted() { + + }, + methods: { + + } +} +</script> + +<template> + <div> + 妯℃嫙鐧诲綍 + </div> +</template> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/views/setting/SetConfiguration.vue b/src/views/setting/SetConfiguration.vue index 7f7df82..d8d07c5 100644 --- a/src/views/setting/SetConfiguration.vue +++ b/src/views/setting/SetConfiguration.vue @@ -1,34 +1,76 @@ <script> -// import DustRadarChart from '../../sfc/DustRadarChart.vue'; -// import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue' -import dayjs from 'dayjs'; - export default { - components :{ - // DustRadarChart, - // TimeSelectWithShortCuts - }, - data() { +import {useCounterStore} from '@/stores/counter'; +export default { + data(){ return{ } - }, - mounted() { + }, + setup(){ + const store = useCounterStore() + const unsubscribe = store.$onAction( + ({ + name, // action 鐨勫悕瀛� + store, // store 瀹炰緥 + args, // 璋冪敤杩欎釜 action 鐨勫弬鏁� + after, // 鍦ㄨ繖涓� action 鎵ц瀹屾瘯涔嬪悗锛屾墽琛岃繖涓嚱鏁� + onError, // 鍦ㄨ繖涓� action 鎶涘嚭寮傚父鐨勬椂鍊欙紝鎵ц杩欎釜鍑芥暟 + }) => { + // 璁板綍寮�濮嬬殑鏃堕棿鍙橀噺 + const startTime = Date.now() + // 杩欏皢鍦� `store` 涓婄殑鎿嶄綔鎵ц涔嬪墠瑙﹀彂 + console.log(`Start "${name}" with params [${args.join(', ')}].`) + // 濡傛灉 action 鎴愬姛骞朵笖瀹屽叏杩愯鍚庯紝after 灏嗚Е鍙戙�� + // 瀹冨皢绛夊緟浠讳綍杩斿洖鐨� promise + after((result) => { + console.log( + `Finished "${name}" after ${ + Date.now() - startTime + }ms.\nResult: ${result}.` + ) + }) + + // 濡傛灉 action 鎶涘嚭鎴栬繑鍥� Promise.reject 锛宱nError 灏嗚Е鍙� + onError((error) => { + console.warn( + `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.` + ) + }) + } +) + return{ + store,unsubscribe + } + }, + computed:{ + a(){ + return this.store.doubleCount*2 }, - methods: { - } + }, + mounted(){ + + }, + methods:{ + doThing(){ + this.store.increment(5) + this.store.doubleCount + } + } } </script> <template> <div> - 鏁版嵁鎺ュ叆閰嶇疆 + <el-button type="primary" @click="doThing">鐐瑰嚮{{ store.doubleCount }}</el-button> </div> - + <div>{{ a }}</div> + <div>{{ store.secret }}</div> + <div>{{ store.vue }}</div> + <div>{{ store.澶� }}</div> </template> - -<style scoped> +<style scoped> </style> \ No newline at end of file -- Gitblit v1.9.3