From 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 07 八月 2023 17:55:21 +0800
Subject: [PATCH] 油烟检测系统
---
src/utils/status1.js | 35
src/views/LoginInterface.vue | 20
src/utils/requestPy.js | 10
src/sfc/ExceptionType.vue | 15
src/sfc/TimeSelect.vue | 17
src/views/analysis/graph/PuOpeningRate.vue | 503 ++-
src/test/TestWa.vue | 1744 ++-----------
src/views/HistoryFume.vue | 50
auto-imports.d.ts | 1
src/assets/login.jpg | 0
src/sfc/FumeFanPurifierChart.vue | 2
src/router/index.ts | 36
src/sfc/ExceptionText.vue | 36
src/sfc/ShopNameCheckBox.vue | 65
src/views/analysis/graph/OnlineRate.vue | 29
src/assets/exceed.jpg | 0
src/sfc/ShopNameAndID.vue | 4
src/views/analysis/graph/IndexPage.vue | 6
tsconfig.json | 10
src/assets/exception.jpg | 0
src/views/analysis/graph/DayAverage.vue | 24
src/components/layout/AppAside.vue | 400 +-
src/views/analysis/graph/DayData.vue | 425 +-
dist.zip | 0
package-lock.json | 25
src/sfc/DateSelect.vue | 77
src/sfc/ExceptionButton.vue | 9
src/views/RealTimeShop.vue | 22
src/test/TestSelect.vue | 244 -
src/views/analysis/DataShow.vue | 16
src/views/IndexView.vue | 588 +++-
vite.config.ts | 25
src/sfc/MainTest.vue | 24
src/sfc/ShopNameSelect.vue | 50
src/views/ExceedingFume.vue | 903 ++++---
src/views/analysis/HomePage.vue | 114
src/test/TestDrawer.vue | 329 +
src/sfc/DashboardChart.vue | 18
src/components/layout/AppLayout.vue | 7
src/views/getdata/TestZm.vue | 24
src/test/TestNoData.vue | 165 -
.eslintrc-auto-import.json | 3
components.d.ts | 20
src/views/getdata/GetData.vue | 362 +++
src/main.ts | 2
src/utils/request.js | 3
/dev/null | 0
src/views/analysis/graph/AllRate.vue | 43
test.html | 15
package.json | 3
src/views/analysis/graph/ExceedingRate.vue | 498 ++-
src/assets/offline.jpg | 0
src/components/layout/AppHeader.vue | 13
src/sfc/TimeSelectCrawling.vue | 90
src/App.vue | 2
src/utils/status.js | 6
56 files changed, 3,730 insertions(+), 3,402 deletions(-)
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 1078dcf..3f78fe7 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,
+ "ElLoading": true
}
}
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 44c3335..72e2689 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -5,6 +5,7 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
+ const ElLoading: typeof import('element-plus/es')['ElLoading']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
diff --git a/components.d.ts b/components.d.ts
index 06712ea..ff1f1e1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,7 +13,6 @@
ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
- ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCard: typeof import('element-plus/es')['ElCard']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
@@ -25,17 +24,17 @@
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
- ElDivided: typeof import('element-plus/es')['ElDivided']
ElDivider: typeof import('element-plus/es')['ElDivider']
- ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+ ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
+ ElLink: typeof import('element-plus/es')['ElLink']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -47,18 +46,13 @@
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
- ElStatistic: typeof import('element-plus/es')['ElStatistic']
+ ElSpace: typeof import('element-plus/es')['ElSpace']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
- ElSubMenuItem: typeof import('element-plus/es')['ElSubMenuItem']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']
- ElTimeline: typeof import('element-plus/es')['ElTimeline']
- ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
- ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
- HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
@@ -71,23 +65,19 @@
IEpExpand: typeof import('~icons/ep/expand')['default']
IEpFold: typeof import('~icons/ep/fold')['default']
IEpGrid: typeof import('~icons/ep/grid')['default']
+ IEpHelp: typeof import('~icons/ep/help')['default']
IEpHistogram: typeof import('~icons/ep/histogram')['default']
IEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
- IEpList: typeof import('~icons/ep/list')['default']
IEpLock: typeof import('~icons/ep/lock')['default']
IEpMonitor: typeof import('~icons/ep/monitor')['default']
IEpNotebook: typeof import('~icons/ep/notebook')['default']
IEpSearch: typeof import('~icons/ep/search')['default']
- IEpSeting: typeof import('~icons/ep/seting')['default']
IEpSetting: typeof import('~icons/ep/setting')['default']
+ IEpShop: typeof import('~icons/ep/shop')['default']
IEpStopwatch: typeof import('~icons/ep/stopwatch')['default']
- IEpSunrise: typeof import('~icons/ep/sunrise')['default']
- IEpTrendCharts: typeof import('~icons/ep/trend-charts')['default']
IEpUser: typeof import('~icons/ep/user')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
- TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
- WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
}
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
diff --git a/dist.zip b/dist.zip
new file mode 100644
index 0000000..ac1f868
--- /dev/null
+++ b/dist.zip
Binary files differ
diff --git a/package-lock.json b/package-lock.json
index 6007383..8c2b467 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"axios": "^1.4.0",
+ "axiosInstance": "^1.4.0",
"echarts": "^5.4.2",
"element-plus": "^2.3.6",
"pinia": "^2.1.3",
@@ -1818,7 +1819,7 @@
},
"peerDependencies": {
"async-validator": "*",
- "axios": "*",
+ "axiosInstance": "*",
"change-case": "*",
"drauu": "*",
"focus-trap": "*",
@@ -1834,7 +1835,7 @@
"async-validator": {
"optional": true
},
- "axios": {
+ "axiosInstance": {
"optional": true
},
"change-case": {
@@ -2136,6 +2137,16 @@
"node_modules/axios": {
"version": "1.4.0",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
+ "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+ "dependencies": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
+ "node_modules/axiosInstance": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmmirror.com/axiosInstance/-/axiosInstance-1.4.0.tgz",
"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
"dependencies": {
"follow-redirects": "^1.15.0",
@@ -8298,6 +8309,16 @@
"proxy-from-env": "^1.1.0"
}
},
+ "axiosInstance": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmmirror.com/axiosInstance/-/axiosInstance-1.4.0.tgz",
+ "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+ "requires": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
"babel-walk": {
"version": "3.0.0-canary-5",
"resolved": "https://registry.npmmirror.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
diff --git a/package.json b/package.json
index d200ac1..3584f60 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"private": true,
"scripts": {
"dev": "vite",
- "build": "run-p type-check build-only",
+ "build": "run-p build-only",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
@@ -14,6 +14,7 @@
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"axios": "^1.4.0",
+ "axiosInstance": "^1.4.0",
"echarts": "^5.4.2",
"element-plus": "^2.3.6",
"pinia": "^2.1.3",
diff --git a/src/App.vue b/src/App.vue
index ac0d733..91588e8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
</el-config-provider>
</template>
-<style scoped>
+<style >
html, body, #app {
height: 100vh;
margin: 0;
diff --git a/src/assets/exceed.jpg b/src/assets/exceed.jpg
new file mode 100644
index 0000000..32ac32f
--- /dev/null
+++ b/src/assets/exceed.jpg
Binary files differ
diff --git a/src/assets/exception.jpg b/src/assets/exception.jpg
new file mode 100644
index 0000000..110ebdd
--- /dev/null
+++ b/src/assets/exception.jpg
Binary files differ
diff --git a/src/assets/login.jpg b/src/assets/login.jpg
new file mode 100644
index 0000000..8bf924c
--- /dev/null
+++ b/src/assets/login.jpg
Binary files differ
diff --git a/src/assets/offline.jpg b/src/assets/offline.jpg
new file mode 100644
index 0000000..84e9184
--- /dev/null
+++ b/src/assets/offline.jpg
Binary files differ
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index a725a6e..a23db30 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -1,206 +1,280 @@
-<script >
-import { isCollapse } from './isCollapse'
-import { selectedName } from './selectName'
+<script>
+import { isCollapse } from './isCollapse';
+import { selectedName } from './selectName';
export default {
-
- data() {
- return {
- isCollapseAside: isCollapse,
- selected: selectedName,
- optionClick:['鍘嗗彶鏁版嵁','寮傚父鍒嗘瀽','瀹炴椂鐩戞祴','娌圭儫鏁版嵁','缁熻鍒嗘瀽','缁熻鏁版嵁','娌圭儫娴撳害鏃ユ暟鎹�','鐩戞祴璁惧鍦ㄧ嚎鐜�','鍑�鍖栧櫒寮�鍚巼','娌圭儫鏃舵瓒呮爣鐜�','娌圭儫娴撳害鍧囧��']
- }
+ data() {
+ return {
+ menuHeight: '600px',
+ isCollapseAside: isCollapse,
+ selected: selectedName,
+ // optionClick: [
+ // '鍘嗗彶鏁版嵁',
+ // '寮傚父鍒嗘瀽',
+ // '瀹炴椂鐩戞帶',
+ // '娌圭儫鏁版嵁',
+ // '缁熻鍒嗘瀽',
+ // '缁熻鏁版嵁',
+ // '娌圭儫娴撳害鏃ユ暟鎹�',
+ // '鐩戞祴璁惧鍦ㄧ嚎鐜�',
+ // '鍑�鍖栧櫒寮�鍚巼',
+ // '娌圭儫鏃舵瓒呮爣鐜�',
+ // '娌圭儫娴撳害鍧囧��',
+ // '鑾峰彇鏁版嵁'
+ // ],
+ optionClick: [
+ '瀹炴椂鐩戞帶',
+ '寮傚父鍒嗘瀽',
+ '鏁版嵁缁熻鍒嗘瀽',
+ '鍏ㄨ绱犲垎鏋�',
+ '娌圭儫娴撳害鏃ユ暟鎹�',
+ '鐩戞祴璁惧鍦ㄧ嚎鐜�',
+ '鍑�鍖栧櫒寮�鍚巼',
+ '娌圭儫鏃舵瓒呮爣鐜�',
+ '娌圭儫娴撳害鍧囧��',
+ '绗笁鏂规暟鎹幏鍙�',
+ '鍘嗗彶鏁版嵁',
+ ]
+ };
+ },
+ methods:{
+ calMenuHeight() {
+ const h1 = this.$refs.headerRef.$el.offsetHeight;
+ // const h2 = this.$refs.subTitleRef.$el.offsetHeight;
+ return `calc(100vh - ${h1}px `;
},
-
-}
+ },
+ mounted(){
+ this.menuHeight = this.calMenuHeight();
+ }
+};
</script>
<template>
- <el-aside>
- <el-scrollbar>
- <el-menu active-text-color="#ffd04b"
+ <el-aside>
+ <!-- text-color="#fff" -->
+ <el-menu
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
- text-color="#fff"
@open="handleOpen"
- @close="handleClose"
- router :collapse="isCollapseAside">
- <!-- :collapse="isCollapse" -->
- <a href="/" class="logo">
- <img src="@/assets/companylogo.png" alt="" />
- <h1>娌圭儫鍦ㄧ嚎鐩戞祴</h1>
- </a>
- <el-sub-menu index="1">
- <template #title>
- <el-icon><i-ep-Monitor /></el-icon>
- <scan >鐩戞祴鏁版嵁绠＄悊</scan>
- <!-- @click="handleClick(optionClick[0])" -->
- </template>
+ @close="handleClose"
+ router
+ :collapse="isCollapseAside"
+ >
+ <el-row ref="headerRef" class="header">
+ <el-space>
+ <!-- :collapse="isCollapse" -->
+ <a href="/hdata" class="logo" >
+ <!-- <img src="@/assets/companylogo.png" alt="" /> -->
+ <h1 style="margin-left: 30px;">娌圭儫鍦ㄧ嚎鐩戞祴</h1>
+ </a>
+ </el-space>
- <el-menu-item index="hdata" >
- <el-icon><i-ep-Histogram /></el-icon>
- <scan @click="selected = optionClick[0]">鍘嗗彶鏁版嵁</scan>
- </el-menu-item>
+ </el-row>
+ <el-scrollbar :height="menuHeight">
+ <el-sub-menu index="1">
+ <template #title>
+ <el-icon><i-ep-Monitor /></el-icon>
+ <span>鍦ㄧ嚎鐩戞帶</span>
+ <!-- @click="handleClick(optionClick[0])" -->
+ </template>
- <el-menu-item index="edata">
- <el-icon><i-ep-Bell /></el-icon>
- <scan @click="selected = optionClick[1]">寮傚父鍒嗘瀽</scan>
- </el-menu-item>
+ <el-menu-item index="ndata" @click="selected = optionClick[0]">
+ <el-icon><i-ep-Stopwatch /></el-icon>
+ <template #title>瀹炴椂鐩戞帶</template>
- <el-menu-item index="ndata">
- <el-icon><i-ep-Stopwatch /></el-icon>
- <scan @click="selected = optionClick[2]">瀹炴椂鐩戞祴</scan>
- </el-menu-item>
+ </el-menu-item>
- <!-- <el-menu-item index="rdata">
- <el-icon><i-ep-Stopwatch /></el-icon>
- <scan>瀹炴椂鏁版嵁搴�</scan>
- </el-menu-item> -->
- </el-sub-menu>
+ <el-menu-item index="edata" @click="selected = optionClick[1]">
+ <el-icon><i-ep-Bell /></el-icon>
+ <template #title>寮傚父鍒嗘瀽</template>
+ </el-menu-item>
+
- <!-- <el-sub-menu index=2>
- <template #title>
- <el-icon><i-ep-Bell/></el-icon> <scan>娴嬭瘯</scan>
- </template>
+ <el-menu-item index="analysisOrigin" @click="selected = optionClick[2]">
+ <el-icon><i-ep-Search /></el-icon>
+ <template #title>鏁版嵁缁熻鍒嗘瀽</template>
+ </el-menu-item>
+
+ </el-sub-menu>
- <el-menu-item index="tdata">
- <el-icon><i-ep-Bell/></el-icon> <scan>瓒呮爣鏁版嵁</scan>
- </el-menu-item>
- </el-sub-menu> -->
- <el-sub-menu index="2">
- <template #title>
- <el-icon><i-ep-Histogram /></el-icon>
- <scan >娌圭儫鏁版嵁鍒嗘瀽</scan>
- </template>
-
- <el-menu-item index="origin">
- <el-icon><i-ep-List /></el-icon>
- <scan @click="selected = optionClick[3]">娌圭儫鏁版嵁</scan>
- </el-menu-item>
-
- <el-menu-item index="analysisOrigin">
- <el-icon><i-ep-Search /></el-icon>
- <scan @click="selected = optionClick[4]">缁熻鍒嗘瀽</scan>
- </el-menu-item>
- </el-sub-menu>
-
- <el-sub-menu index="3">
- <template #title>
- <el-icon><i-ep-DataLine /></el-icon>
- <scan>缁熻鏁版嵁鎶樼嚎鍥�</scan>
- </template>
- <el-menu-item-group>
- <template #title>
- <span class="slot-lable"> 鏁翠綋鏁版嵁</span>
- </template>
- <el-menu-item index="allData">
- <el-icon><i-ep-TrendCharts /></el-icon>
- <scan @click="selected = optionClick[5]">缁熻鏁版嵁</scan>
- </el-menu-item>
- </el-menu-item-group>
-
- <el-menu-item-group >
- <template #title>
- <span class="slot-lable"> 璇︾粏鏁版嵁</span>
- </template>
- <el-menu-item index="day">
- <el-icon><i-ep-Notebook /></el-icon>
- <scan @click="selected = optionClick[6]">娌圭儫娴撳害鏃ユ暟鎹�</scan>
- </el-menu-item>
- <el-menu-item index="monitor">
- <el-icon><i-ep-Notebook /></el-icon>
- <scan @click="selected = optionClick[7]">鐩戞祴璁惧鍦ㄧ嚎鐜�</scan>
- </el-menu-item>
- <el-menu-item index="purifier">
- <el-icon><i-ep-Notebook /></el-icon>
- <scan @click="selected = optionClick[8]">鍑�鍖栧櫒寮�鍚巼</scan>
- </el-menu-item>
-
- <el-menu-item index="exceed">
- <el-icon><i-ep-Notebook /></el-icon>
- <scan @click="selected = optionClick[9]">娌圭儫鏃舵瓒呮爣鐜�</scan>
- </el-menu-item>
-
- <el-menu-item index="average">
- <el-icon><i-ep-Notebook /></el-icon>
- <scan @click="selected = optionClick[10]">娌圭儫娴撳害鍧囧��</scan>
- </el-menu-item>
-
- </el-menu-item-group>
- </el-sub-menu>
-
- <!-- <el-sub-menu index="4">-->
-
- <!-- 娴嬭瘯鍗曠嫭椤规ā鍧� -->
- <!-- <el-menu-item index="tdata">
- <el-icon><i-ep-Bell/></el-icon> <scan>鍑芥暟娴嬭瘯</scan>
+
+ <el-sub-menu index="2">
+ <template #title>
+ <el-icon><i-ep-Histogram /></el-icon>
+ <span>鍒嗘椂娈靛垎鏋�</span>
+ </template>
+
+ <el-menu-item index="allData" @click="selected = optionClick[3]">
+ <el-icon><i-ep-Help /></el-icon>
+ <template #title>鍏ㄨ绱犲垎鏋�</template>
+ </el-menu-item>
+ <el-sub-menu index="3">
+ <template #title>
+ <el-icon><i-ep-DataLine /></el-icon>
+ <span>鍒嗚绱犲垎鏋�</span>
+ </template>
+
+ <el-menu-item-group>
+ <!-- <template #title>
+ <span class="slot-lable"> 璇︾粏鏁版嵁</span>
+ </template> -->
+ <el-menu-item index="day" @click="selected = optionClick[4]">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <template #title>娌圭儫娴撳害鏃ユ暟鎹�</template>
</el-menu-item>
-
- <el-menu-item index="abc">
- <el-icon><i-ep-Bell/></el-icon> <scan>鎶藉眽</scan>
+ <el-menu-item index="monitor" @click="selected = optionClick[5]">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <template #title>鐩戞祴璁惧鍦ㄧ嚎鐜�</template>
+ </el-menu-item>
+ <el-menu-item index="purifier" @click="selected = optionClick[6]">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <template #title>鍑�鍖栧櫒寮�鍚巼</template>
+ </el-menu-item>
+
+ <el-menu-item index="exceed" @click="selected = optionClick[7]">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <template #title>娌圭儫鏃舵瓒呮爣鐜�</template>
+ </el-menu-item>
+
+ <el-menu-item index="average" @click="selected = optionClick[8]">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <template #title>娌圭儫娴撳害鍧囧��</template>
+ </el-menu-item>
+ </el-menu-item-group>
+ </el-sub-menu>
+
+ </el-sub-menu>
+
+ <!-- <el-sub-menu index="3">
+ <template #title>
+ <el-icon><i-ep-DataLine /></el-icon>
+ <span>鍒嗚绱犲垎鏋�</span>
+ </template>
+
+ <el-menu-item-group>
+
+ <el-menu-item index="day">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <span @click="selected = optionClick[6]">娌圭儫娴撳害鏃ユ暟鎹�</span>
+ </el-menu-item>
+ <el-menu-item index="monitor">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <span @click="selected = optionClick[7]">鐩戞祴璁惧鍦ㄧ嚎鐜�</span>
+ </el-menu-item>
+ <el-menu-item index="purifier">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <span @click="selected = optionClick[8]">鍑�鍖栧櫒寮�鍚巼</span>
+ </el-menu-item>
+
+ <el-menu-item index="exceed">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <span @click="selected = optionClick[9]">娌圭儫鏃舵瓒呮爣鐜�</span>
+ </el-menu-item>
+
+ <el-menu-item index="average">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <span @click="selected = optionClick[10]">娌圭儫娴撳害鍧囧��</span>
+ </el-menu-item>
+ </el-menu-item-group>
+ </el-sub-menu> -->
+
+
+
+ <el-sub-menu index="4">
+ <template #title>
+ <el-icon><i-ep-Histogram /></el-icon>
+ <span>澶氭簮鏁版嵁绠＄悊</span>
+ </template>
+
+
+ <!-- <el-menu-item index="abc">
+ <el-icon><i-ep-Bell/></el-icon> <span>鏁版嵁鑾峰彇TestWa</span>
</el-menu-item> -->
- <!-- <el-menu-item index="analysis">
- <el-icon><i-ep-Bell/></el-icon> <scan>鍘熷鏁版嵁鍒嗘瀽</scan>
- </el-menu-item> -->
+ <el-menu-item index="getdata" @click="selected = optionClick[9]">
+ <el-icon><i-ep-Notebook /></el-icon>
+ <template #title>绗笁鏂规暟鎹幏鍙�</template>
+ </el-menu-item>
+
+ <el-menu-item index="hdata" @click="selected = optionClick[10]">
+ <el-icon><i-ep-Histogram /></el-icon>
+ <template #title>鍘嗗彶鏁版嵁</template>
+ </el-menu-item>
+ </el-sub-menu>
+
+ <!-- <el-sub-menu index="5">
+ <template #title>
+ <el-icon><i-ep-Histogram /></el-icon>
+ <span>娴嬭瘯</span>
+ </template>
+
+ <el-menu-item index="tdata">
+ <el-icon><i-ep-Bell/></el-icon> <span>娴嬭瘯1</span>
+ </el-menu-item>
+ <el-menu-item index="tsdata">
+ <el-icon><i-ep-Bell/></el-icon> <span>娴嬭瘯2</span>
+ </el-menu-item>
+
+ </el-sub-menu> -->
- </el-menu>
- </el-scrollbar>
- </el-aside>
+ </el-scrollbar>
+
+ </el-menu>
+ </el-aside>
</template>
<style lang="scss" scoped>
.el-aside {
- background-color:#545c64;
- height: 100vh;
- // background-color: rgb(41,45,62);
- width: auto;
-
+ background-color: #545c64;
+ height: 100vh;
+ // background-color: rgb(41,45,62);
+ width: auto;
}
.el-menu {
- // background-color: rgb(41,45,62);
- background-color:#545c64;
- width: 220px;
- border-right: none;
+ // background-color: rgb(41,45,62);
+ background-color: #545c64;
+ width: 220px;
+ border-right: none;
- &.el-menu--collapse {
- //渚ц竟鏍忔姌鍙犳椂鐨勬牱寮�
- width: 65px;
-
- & h1 {
- //鎶樺彔鏃堕殣钘廻1鏂囧瓧
- display: none;
- }
- & scan {
- display: none;
- }
+ &.el-menu--collapse {
+ //渚ц竟鏍忔姌鍙犳椂鐨勬牱寮�
+ width: 65px;
+
+ & h1 {
+ //鎶樺彔鏃堕殣钘廻1鏂囧瓧
+ display: none;
}
+ & span {
+ display: none;
+ }
+ }
}
.logo {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 60px;
- text-decoration: none;
- color: black;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 60px;
+ text-decoration: none;
+ color: black;
- img {
- width: 32px;
- height: 32px;
- }
+ img {
+ width: 32px;
+ height: 32px;
+ }
}
// .el-menu-item {
// background-color: rgb(41,45,62);
// }
* {
- color: white;
+ color: white;
}
.slot-lable {
- color: bisque;
+ color: bisque;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 3cb63ef..4476ab8 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -37,7 +37,8 @@
<i-ep-Expand v-show="isCollapseHeader" />
<i-ep-Fold v-show="!isCollapseHeader"/>
</el-icon>
- {{ selected }}
+ <span class="head-text">{{ selected }}</span>
+
<!-- 闈㈠寘灞� -->
<!-- <el-breadcrumb separator="/">
@@ -76,14 +77,16 @@
display: flex;
align-items: center;
// background-color: #606266;
- background-color: #606266;
- color: white;
-
+ background-color: #EBEDF0;
+ color: black;
+#c6e2ff
.el-icon {
margin-right: 17px;
}
}
-
+.head-text {
+ margin-left: 10px;
+}
.el-dropdown {
margin-left: auto;
.el-dropdown-link {
diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue
index f50be8b..662ca7b 100644
--- a/src/components/layout/AppLayout.vue
+++ b/src/components/layout/AppLayout.vue
@@ -21,7 +21,7 @@
<AppAside/>
<el-container class="header-and-main">
<AppHeader/>
- <el-main>
+ <el-main class="main-content">
<RouterView/>
</el-main>
</el-container>
@@ -36,8 +36,11 @@
height: 100vh;
}
.el-main {
- background-color: #f4f4f5;
+ // background-color: gainsboro;
+ background-color: rgb(240, 242, 245);
+ // background-color: red;
padding: 0;
}
+
</style>
diff --git a/src/main.ts b/src/main.ts
index 1840b8c..37a42d1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,8 @@
// import EventBus from './utils/EventBus'
+
+
const app = createApp(App)
app.use(createPinia())
diff --git a/src/router/index.ts b/src/router/index.ts
index 4113b58..9eb7b67 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,9 +1,8 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-
+import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
- history: createWebHistory(import.meta.env.BASE_URL),
+ // history: createWebHistory(import.meta.env.BASE_URL),
+ history: createWebHashHistory(),
routes: [
{
path: '/layout',
@@ -36,24 +35,16 @@
name: "ErrorPage",
component: () => import('@/views/ErrorPage.vue')
},
- {
- path: '/about',
- name: 'about',
- // route level code-splitting
- // this generates a separate chunk (About.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import('../views/AboutView.vue')
- },
{
- path:"/graph",
- name:'fst',
+ path:"/tsdata",
+ name:'fst1',
component: () => import('@/test/TestSelect.vue')
},
{
path:"/tdata",
name:'test1',
- component: () => import('@/test/TestDrawer.vue')
+ component: () => import('@/test/TestNoData.vue')
},
{
@@ -120,7 +111,16 @@
component: () => import('@/views/analysis/graph/DayAverage.vue')
},
-
+ {
+ path: '/getdata',
+ component: () => import('@/views/getdata/GetData.vue')
+
+ },
+
+ {
+ path: '/tte',
+ component: () => import('@/views/getdata/TestZm.vue')
+ },
],
},
@@ -139,8 +139,8 @@
{
path: '/sfc',
component: () => import('@/sfc/MainTest.vue')
-
- }
+ },
+
]
})
diff --git a/src/sfc/DashboardChart.vue b/src/sfc/DashboardChart.vue
index c9211af..a1d3b7d 100644
--- a/src/sfc/DashboardChart.vue
+++ b/src/sfc/DashboardChart.vue
@@ -1,6 +1,7 @@
<!-- 浠〃鐩樼粍浠�
鐖剁粍浠朵紶鍏ユ暟鎹簮涓巇ata缁戝畾鍚� 鑷姩娓叉煋
鐖剁粍浠舵渶濂藉惎鍔ㄥ紓姝ョ粍浠�
+ 鍝嶅簲寮忓彉鍖栧ぇ灏�
-->
<template>
<div class="dashboard-item" ref="chartContainer"></div>
@@ -47,6 +48,7 @@
mounted() {
// 椤甸潰鍔犺浇瀹屾垚鍚庤皟鐢ㄤ华琛ㄧ洏
this.init()
+ window.addEventListener('resize',this.updateChart)
},
methods:{
// 鍒濆鍖栦华琛ㄧ洏
@@ -74,19 +76,27 @@
}
]
});
- }
+ },
+ updateChart(){
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ }
},
beforeUnmount() {
// 閿�姣佷华琛ㄧ洏瀹炰緥
this.chart.dispose();
- }
+ },
+
};
</script>
<style>
.dashboard-item {
- width: 400px;
+ width:100%;
height: 300px;
- margin: 10px;
+ /* margin: 10px; */
}
</style>
\ No newline at end of file
diff --git a/src/sfc/DateSelect.vue b/src/sfc/DateSelect.vue
new file mode 100644
index 0000000..bba5dd3
--- /dev/null
+++ b/src/sfc/DateSelect.vue
@@ -0,0 +1,77 @@
+<!-- 鏃ユ湡閫夋嫨鍣ㄧ粍浠�
+ 浼氬皢鍒濆榛樿鏃堕棿锛堜竴鍛ㄥ墠锛夊拰鏀瑰彉鐨勬椂闂撮�氳繃浜嬩欢鈥榮ubmitTime鈥欎紶閫掔粰鐖剁粍浠�
+
+ 鍒濆娓叉煋鏃跺氨灏嗘椂闂翠紶閫掔粰鐖剁粍浠讹細
+ **
+ 鍦ㄧ埗缁勪欢涓缃�
+ <TimeSelect @submit-time="giveTime"></TimeSelect>
+ giveTime(val) {
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
+ this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+ },
+ ***
+-->
+<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']
+ };
+ },
+
+ // 灏嗗垵濮嬮粯璁ゅ紑濮嬪拰缁撴潫鏃堕棿浼犻�掔粰鐖剁粍浠�
+ mounted() {
+ this,this.initOneWeekAgoTime()
+ this.$emit('submitTime', this.time);
+ },
+
+ methods:{
+ initOneWeekAgoTime(){
+ // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂翠负涓�鍛ㄥ墠
+ this.time[0] = dayjs().subtract(2, 'week').format('YYYY-MM-DD');
+ this.time[1] = dayjs().format('YYYY-MM-DD');
+ }
+ }
+};
+</script>
+
+<template>
+ <!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
+ <div class="block">
+ <span class="demonstration">璧锋鏃堕棿锛�</span>
+ <el-date-picker
+ v-model="time"
+ type="daterange"
+ range-separator="To"
+ start-placeholder="Start date"
+ end-placeholder="End date"
+ @change="$emit('submitTime', time)"
+ class="pick-date"
+
+ />
+ </div>
+</template>
+
+<style>
+.demonstration {
+ margin-left: 30px;
+ margin-top: 5px;
+ font-weight: bold;
+ white-space: nowrap;
+}
+.block {
+ display: flex;
+ justify-content: center;
+ /* width: 50%; */
+ white-space: nowrap;
+}
+.pick-date {
+ width: 100%;
+
+}
+</style>
diff --git a/src/sfc/ExceptionButton.vue b/src/sfc/ExceptionButton.vue
index fec0199..143747e 100644
--- a/src/sfc/ExceptionButton.vue
+++ b/src/sfc/ExceptionButton.vue
@@ -2,7 +2,7 @@
鏍规嵁鐖剁粍浠朵紶閫掔殑璁惧缂栧彿鍜屽紓甯哥被鍨嬶紝寮傚父寮�濮嬫椂闂村拰缁撴潫鏃堕棿
杩斿洖瀵瑰簲鐨勫紓甯镐俊鎭� -->
<script >
-import axios from 'axios';
+import axiosInstance from '../utils/request.js'
export default {
props:{
@@ -21,7 +21,7 @@
methods: {
requestExceptionData(){
- axios.get('http://localhost:8080/fume/abnormaltwo',{params:{"devId":this.devId,"exceptionValue":this.exceptionValue,"beginTime":this.beginTime,"endTime":this.endTime }}).then(result =>{
+ axiosInstance.get('/fume/abnormaltwo',{params:{"devId":this.devId,"exceptionValue":this.exceptionValue,"beginTime":this.beginTime,"endTime":this.endTime }}).then(result =>{
//灏嗚繑鍥炵殑缁撴灉浼犻�掔粰鐖剁粍浠�
this.$emit('submitExceptionData',result.data.data)
})
@@ -32,10 +32,7 @@
</script>
<template>
- <!-- <button @click="requestExceptionData">
- <slot/>
- </button> -->
- <el-button class="button_info" type='' @click="requestExceptionData">
+ <el-button class="button_info" type='' text @click="requestExceptionData">
<slot/>
</el-button>
</template>
diff --git a/src/sfc/ExceptionText.vue b/src/sfc/ExceptionText.vue
new file mode 100644
index 0000000..c08b719
--- /dev/null
+++ b/src/sfc/ExceptionText.vue
@@ -0,0 +1,36 @@
+<script >
+import axiosInstance from '../utils/request.js'
+ export default {
+ props:{
+ devId:String,
+ exceptionValue:String,
+ beginTime:String,
+ endTime:String,
+ },
+ emits:['submitExceptionData'],
+ data() {
+ return{
+ //鏌愪釜寮傚父绫诲瀷鐨勫叏閮ㄦ暟鎹�
+ exceptionData:[]
+ }
+ },
+ methods: {
+
+ requestExceptionData(){
+ axiosInstance.get('/fume/abnormaltwo',{params:{"devId":this.devId,"exceptionValue":this.exceptionValue,"beginTime":this.beginTime,"endTime":this.endTime }}).then(result =>{
+ //灏嗚繑鍥炵殑缁撴灉浼犻�掔粰鐖剁粍浠�
+ this.$emit('submitExceptionData',result.data.data)
+ })
+ }
+
+ }
+}
+</script>
+
+<template>
+ <el-link @click="requestExceptionData"><slot/></el-link>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/sfc/ExceptionType.vue b/src/sfc/ExceptionType.vue
index d89eea5..20d4b84 100644
--- a/src/sfc/ExceptionType.vue
+++ b/src/sfc/ExceptionType.vue
@@ -3,8 +3,8 @@
灏嗛�変腑鐨勫涓紓甯镐互鏁扮粍褰㈠紡杩斿洖缁欑埗缁勪欢
-->
<script>
-// import axios from 'axios';
-import axiosInstance from '../utils/request.js'
+// import axiosInstance from 'axiosInstance';
+import axiosInstanceInstance from '../utils/request.js'
export default {
emits:['submitExceptionType'],
data() {
@@ -18,7 +18,7 @@
methods: {
//鑾峰彇涓嶅悓鐨勫紓甯哥被鍨�
getShopName() {
- axiosInstance.get('/fume/exceptiontype').then(result => {
+ axiosInstanceInstance.get('/fume/exceptiontype').then(result => {
this.exceptionType = result.data.data
});
@@ -38,6 +38,7 @@
<div class="container">
<span class="text">寮傚父绫诲瀷锛�</span>
+ <div class="exception-type">
<el-checkbox-group v-model="checkedList" :change="$emit('submitExceptionType',checkedList)">
<el-checkbox :label="item.exceptionType" v-for="(item,index) in exceptionType" :key="index">
<template #default>
@@ -48,17 +49,23 @@
</el-checkbox>
</el-checkbox-group>
</div>
+</div>
</template>
<style scoped>
/* 涓嶈兘瀵� */
.container {
display: flex;
- flex-wrap: wrap;
+ /* flex-wrap: wrap; */
}
.text {
margin-top: 5px;
margin-right: 10px;
+ margin-left: 20px;
font-weight: bolder;
+ white-space: nowrap;
+}
+.exception-type {
+ white-space: nowrap;
}
</style>
diff --git a/src/sfc/FumeFanPurifierChart.vue b/src/sfc/FumeFanPurifierChart.vue
index d9ee75b..24bf8d4 100644
--- a/src/sfc/FumeFanPurifierChart.vue
+++ b/src/sfc/FumeFanPurifierChart.vue
@@ -51,7 +51,7 @@
// 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
const option = {
title: {
- text: '寮傛鏁版嵁鍔犺浇绀轰緥'
+ // text: '寮傛鏁版嵁鍔犺浇绀轰緥'
},
tooltip: {},
diff --git a/src/sfc/MainTest.vue b/src/sfc/MainTest.vue
index d8f4bfa..30de8c7 100644
--- a/src/sfc/MainTest.vue
+++ b/src/sfc/MainTest.vue
@@ -1,4 +1,4 @@
-<script>
+<!-- <script>
import ImportedTest from './ImportedTest.vue';
import TimeTest from './TimeTest.vue';
import ShopNameAndID from './ShopNameAndID.vue';
@@ -106,4 +106,26 @@
<div v-for="item in exceptionData" :key="item">
{{ item }}
</div>
+</template> -->
+<script >
+ export default {
+ data() {
+ return{
+
+ }
+ },
+ methods: {
+
+ }
+}
+</script>
+
+<template>
+ <div>
+
+ </div>
</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/sfc/ShopNameAndID.vue b/src/sfc/ShopNameAndID.vue
index 62efda0..7fcfa4d 100644
--- a/src/sfc/ShopNameAndID.vue
+++ b/src/sfc/ShopNameAndID.vue
@@ -2,7 +2,7 @@
灏嗛�夋嫨鐨勮澶囩紪鍙疯繑鍥炵粰鐖剁粍浠�
-->
<script>
-import axiosInstance from '../utils/request.js'
+import axiosInstanceInstance from '../utils/request.js'
export default {
// 榛樿閫夋嫨涓�涓�
// props:{
@@ -36,7 +36,7 @@
methods: {
getDeviceInfo() {
// 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
- axiosInstance.get('/fume/device').then((result) => {
+ axiosInstanceInstance.get('/fume/device').then((result) => {
this.deviceInfo = result.data.data;
this.deviceInfo.forEach((item) => {
this.optionsShop[this.optionsShop.length] = {
diff --git a/src/sfc/ShopNameCheckBox.vue b/src/sfc/ShopNameCheckBox.vue
new file mode 100644
index 0000000..83dc604
--- /dev/null
+++ b/src/sfc/ShopNameCheckBox.vue
@@ -0,0 +1,65 @@
+<!-- 澶氶�夋鏄剧ず搴楅摵鍚嶇О
+杩斿洖鐖剁粍浠跺凡閫夋嫨鐨勫簵閾�
+
+-->
+<script>
+import axiosInstance from '../utils/request.js'
+export default {
+emits:['submitShops'],
+ data() {
+ return {
+ checkAll: false,
+ isIndeterminate: false,
+ selectedShopName: [],
+ shopNames: []
+ };
+ },
+ mounted(){
+ this.getAllShopNames()
+ },
+ methods: {
+ getAllShopNames(){
+ axiosInstance.get('/fume/shopnamepy').then(response =>{
+ response.data.data.forEach(item => {
+ this.shopNames.push(item.diName)
+ }
+ );
+ })
+ },
+ handleCheckAllChange(val) {
+ this.selectedShopName = val ? this.shopNames : [];
+ this.isIndeterminate = false;
+ this.$emit('submitShops',this.selectedShopName)
+ },
+ handleCheckedCitiesChange(value) {
+ const checkedCount = value.length;
+ this.checkAll = checkedCount === this.shopNames.length;
+ this.isIndeterminate =
+ checkedCount > 0 && checkedCount < this.shopNames.length;
+ this.$emit('submitShops',this.selectedShopName)
+ }
+ }
+};
+</script>
+
+<template>
+ <div>
+ <el-checkbox
+ v-model="checkAll"
+ :indeterminate="isIndeterminate"
+ @change="handleCheckAllChange"
+
+ >鍏ㄩ��</el-checkbox
+ >
+ <el-checkbox-group
+ v-model="selectedShopName"
+ @change="handleCheckedCitiesChange"
+ >
+ <el-checkbox v-for="shop in shopNames" :key="shop" :label="shop"
+ >{{ shop }}
+ </el-checkbox>
+ </el-checkbox-group>
+ </div>
+</template>
+
+
diff --git a/src/sfc/ShopNameSelect.vue b/src/sfc/ShopNameSelect.vue
new file mode 100644
index 0000000..8c3274b
--- /dev/null
+++ b/src/sfc/ShopNameSelect.vue
@@ -0,0 +1,50 @@
+<!--涓嬫媺妗嗘樉绀哄簵閾哄悕绉�
+ 鍙閫�
+杩斿洖鐖剁粍浠跺凡閫夋嫨鐨勫簵閾�
+-->
+<script >
+import axiosInstance from '../utils/request.js'
+ export default {
+ emits:['submitShops'],
+ data() {
+ return{
+ selectedShopNames:[],
+ shopNames:[]
+ }
+ },
+ mounted(){
+ this.getAllShopNames()
+ },
+ methods: {
+ getAllShopNames(){
+ axiosInstance.get('/fume/device').then(response =>{
+ response.data.data.forEach(item => {
+ this.shopNames.push(item.diName)
+ }
+ );
+ console.log(response.data.data);
+ })
+ }
+ }
+
+}
+</script>
+
+<template>
+ <div>
+ <el-select
+ v-model="selectedShopNames"
+ multiple
+ placeholder="Select"
+ style="width: 400px"
+ @change="$emit('submitShops',this.selectedShopNames)"
+ >
+ <el-option
+ v-for="item in shopNames"
+ :key="item"
+ :label="item"
+ :value="item"
+ />
+ </el-select>
+ </div>
+</template>
diff --git a/src/sfc/TimeSelect.vue b/src/sfc/TimeSelect.vue
index 6656a04..45bd3cc 100644
--- a/src/sfc/TimeSelect.vue
+++ b/src/sfc/TimeSelect.vue
@@ -34,7 +34,7 @@
methods:{
initOneWeekAgoTime(){
// 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂翠负涓�鍛ㄥ墠
- this.time[0] = dayjs().subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss');
+ 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');
}
}
@@ -48,10 +48,12 @@
<el-date-picker
v-model="time"
type="datetimerange"
- range-separator="To"
+ range-separator="~"
start-placeholder="Start date"
end-placeholder="End date"
@change="$emit('submitTime', time)"
+ class="pick-date"
+
/>
</div>
</template>
@@ -61,5 +63,16 @@
margin-left: 30px;
margin-top: 5px;
font-weight: bold;
+ white-space: nowrap;
}
+.block {
+ display: flex;
+ justify-content: center;
+ /* width: 50%; */
+ white-space: nowrap;
+}
+.pick-date {
+ width: 100%;
+
+}
</style>
diff --git a/src/sfc/TimeSelectCrawling.vue b/src/sfc/TimeSelectCrawling.vue
new file mode 100644
index 0000000..88900d0
--- /dev/null
+++ b/src/sfc/TimeSelectCrawling.vue
@@ -0,0 +1,90 @@
+<!-- 鏃ユ湡鏃堕棿閫夋嫨鍣ㄧ粍浠� --鐢ㄤ笌Python鐖櫕椤甸潰
+
+ 寮�濮嬫椂闂达細鏁版嵁搴撴渶鏂颁竴鏉℃暟鎹椂闂淬��
+ 缁撴潫鏃堕棿锛氬綋鍓嶆椂闂�
+ 浼氬皢璧峰鏃堕棿鍜屾敼鍙樼殑鏃堕棿閫氳繃浜嬩欢鈥榮ubmitTime鈥欎紶閫掔粰鐖剁粍浠�
+
+ 鍒濆娓叉煋鏃跺氨灏嗘椂闂翠紶閫掔粰鐖剁粍浠讹細
+ **
+ 鍦ㄧ埗缁勪欢涓缃�
+ <TimeSelectCrawling @submit-time="giveTime"></TimeSelectCrawling>
+ giveTime(val) {
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
+ this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+ },
+ ***
+-->
+<script>
+import axiosInstance from '../utils/request.js'
+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']
+ };
+ },
+
+ // 灏嗗垵濮嬮粯璁ゅ紑濮嬪拰缁撴潫鏃堕棿浼犻�掔粰鐖剁粍浠�
+ mounted() {
+ this.initOneWeekAgoTime()
+ setTimeout(() => {
+ this.$emit('submitTime', this.time);
+ }, 500);
+ },
+
+ methods:{
+ initOneWeekAgoTime(){
+ // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂翠负涓�鍛ㄥ墠
+ // this.time[0] = dayjs().subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss');
+ this.getLastestTimeFromMySql()
+ this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
+ },
+ getLastestTimeFromMySql(){
+ axiosInstance.get('/fume/lastesttime').then(response=>{
+ this.time[0] = response.data.data[0].mvDataTime
+ })
+ }
+ }
+};
+</script>
+
+<template>
+ <!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
+ <div class="block">
+ <span class="demonstration">璧锋鏃堕棿锛�</span>
+ <el-date-picker
+ v-model="time"
+ type="datetimerange"
+ range-separator="~"
+ start-placeholder="Start date"
+ end-placeholder="End date"
+ @change="$emit('submitTime', time)"
+ class="pick-date"
+
+ />
+ </div>
+</template>
+
+<style>
+.demonstration {
+ margin-top: 5px;
+ font-weight: bold;
+ white-space: nowrap;
+}
+.block {
+ display: flex;
+ justify-content: center;
+ /* width: 50%; */
+ white-space: nowrap;
+ width: 40%;
+}
+.pick-date {
+ width: 100%;
+
+}
+</style>
diff --git a/src/test/TestDrawer.vue b/src/test/TestDrawer.vue
index 16b283f..c129336 100644
--- a/src/test/TestDrawer.vue
+++ b/src/test/TestDrawer.vue
@@ -1,9 +1,10 @@
<!-- 瀹炴椂鐩戞祴 -->
+
<script>
-import axiosInstance from '../utils/request.js';
+import axiosInstanceInstance from '../utils/request.js';
// 寮傛缁勪欢
const DashBoard = defineAsyncComponent(() =>
- import('../sfc/DashBoardTest.vue')
+ import('../sfc/DashboardChart.vue')
)
export default {
components:{
@@ -11,36 +12,55 @@
},
data() {
return {
- // 鍗＄墖澶у皬
- cardSize: 'medium',
// 榛樿鎵撳紑鐨勬姌鍙犻潰鏉�
activeNames:'1',
- // isShow:false,
- // 瑕佸睍绀虹殑浠〃鐩樻暟閲�
- // totalCharts: 0,
- // 瀹炴椂鏇存柊闂撮殧 3绉�
+ // 瀹炴椂鏇存柊闂撮殧 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,
// 宸查�夋嫨搴楅摵
@@ -52,75 +72,28 @@
// devices: []
};
},
- computed: {
- cardStyle() {
- let width = '400px';
- let height = '500px';
- if (this.cardSize === 'small') {
- width = '200px';
- height = '200px';
- } else if (this.cardSize === 'large') {
- width = '600px';
- height = '600px';
- }
- return {
- width,
- height
- };
- },
-
+ watch:{
+ // 'outside.checkedShops'(){
+ // this.saveOutsideData()
+ // console.log('111');
+ // }
},
methods: {
- // 鍚屾鏀瑰彉浠〃鐩樺ぇ灏�
- getDashBoardStyle() {
- if (this.cardSize === 'small') {
- return {
- width: '180px',
- height: '120px',
- margin: '10px'
- };
- } else if (this.cardSize === 'large') {
- return {
- width: '380px',
- height: '220px',
- margin: '10px'
- };
- } else {
- return {
- width: '280px',
- height: '170px',
- margin: '10px'
- };
- }
- },
- // 鏀瑰彉甯冨眬澶у皬 浠庤�屽疄鐜版瘡琛屾斁缃华琛ㄧ洏鏁伴噺澧炲
- getColSpan(){
- if (this.cardSize === 'small') {
- return 3
- } else if (this.cardSize === 'medium') {
- return 4
- }
- else if (this.cardSize === 'large'){
- return 8
- }
- return 6
- },
-
- // 鏀瑰彉鍗＄墖澶у皬
- changeCardSize(size) {
- this.cardSize = size;
- },
//鑾峰彇鎵�鏈夊簵閾哄悕瀛�
getDeviceInfo() {
- // 鑾峰彇澶栭儴璁惧鐨勫簵閾哄悕绉�
- axiosInstance.get('/fume/device').then((result) => {
+ // 鑾峰彇鎵�鏈夊閮ㄨ澶囩殑搴楅摵鍚嶇О
+ 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;
+ }
});
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
- axiosInstance
+ axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
params: { page: 1, per_page: 20 }
})
@@ -128,21 +101,93 @@
// 淇濆瓨鍐呴儴鎺ュ彛鑾峰彇鐨勬墍鏈変俊鎭�
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.shopnames : [];
+ this.outside.checkedShops = val ? this.outside.displayedShopnames : [];
this.outside.isIndeterminate = false;
},
handleCheckedCitiesChangOutside(value) {
const checkedCount = value.length;
- this.outside.checkAll = checkedCount === this.outside.shopnames.length;
+ this.outside.checkAll = checkedCount === this.outside.displayedShopnames.length;
this.outside.isIndeterminate =
- checkedCount > 0 && checkedCount < this.outside.shopnames.length;
+ checkedCount > 0 && checkedCount < this.outside.displayedShopnames.length;
},
// 鍐呴儴璁惧鍏ㄩ��
@@ -171,7 +216,7 @@
if (this.outside.checkedShops.length != 0) {
params['shops'] = temp;
}
- axiosInstance.get('/fume/lastest', { params: params }).then((result) => {
+ 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);
@@ -179,7 +224,7 @@
// this.updateCharts();
});
}
-
+
// 閫夋嫨浜嗗唴閮ㄨ澶�
if(this.inner.checkedShops.length!=0){
// 娓呯┖鏁版嵁
@@ -210,21 +255,42 @@
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>
@@ -234,36 +300,48 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <h2>閫夋嫨鏌愪釜璁惧鐨勫疄鏃舵暟鎹細</h2>
+ <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-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.shopnames"
+ v-for="shop in outside.displayedShopnames"
:key="shop"
:label="shop"
>{{ shop }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
- <el-form-item>
- <div>宸查�夋嫨澶栭儴璁惧鏁伴噺涓猴細{{outside.checkedShops.length}}</div>
- </el-form-item>
- <!-- ------------------------------- -->
- <el-form-item label="鍐呴儴璁惧">
+<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"
@@ -276,68 +354,69 @@
class="inner-checkbox-group"
>
- <el-checkbox v-for="shop in inner.shopnames" :key="shop" :label="shop"
+ <el-checkbox v-for="shop in inner.displayedShopnames" :key="shop" :label="shop"
>{{ shop }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
- <el-form-item>
- <div>宸查�夋嫨鍐呴儴璁惧鏁伴噺涓猴細{{inner.checkedShops.length}}</div>
- </el-form-item>
- <el-form-item >
- <!-- <div class="right-form"> -->
+ <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>
- <!-- </div> -->
- </el-form-item>
+
+ <!-- </el-form-item> -->
</el-form>
</el-card>
</el-collapse-item>
</el-collapse>
</div>
+
- <div>
+<div>
<el-tooltip
class="box-item"
effect="dark"
content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁"
placement="top-start"
>
- <el-button type="success" @click="show"> 灞曠ず </el-button>
+ <el-button type="success" @click="show" style="margin-left: 10px;"> 灞曠ず </el-button>
</el-tooltip>
</div>
-<!--
- {{ outside.checkedShops }}
- <br />
- {{ inner.checkedShops }} -->
- <!-- 浠〃鐩� -->
+
+
+ <!-- 浠〃鐩� -->
<!-- <div class="charts-container" v-for="(device,index) in outside.realTimeData" :key="device.mvStatCode">
<div ref="chartsOutside" class="echarts" :id="`chartAP-${index}`"></div>
</div> -->
- <el-button-group>
- <el-button @click="changeCardSize('small')">缂╁皬</el-button>
- <el-button @click="changeCardSize('medium')">涓瓑</el-button>
- <el-button @click="changeCardSize('large')">鏀惧ぇ</el-button>
- </el-button-group>
-
+<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="getColSpan" v-for="device in outside.realTimeData" :key="device.mvStatCode">
- <el-card :style="cardStyle">
+ <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 :styleDashB="cardSize" :data="device.mvFumeConcentration2"></DashBoard>
+ <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>鏁版嵁鍙戝竷鏃堕棿锛歿{ 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>
@@ -345,9 +424,8 @@
</el-row>
</div>
-
<hr v-show="outside.realTimeData.length && inner.inFumeValue.length" class="line-marign"/>
-<h3 v-show="inner.inFumeValue.length">鍐呴儴璁惧锛�</h3>
+<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">
@@ -358,17 +436,23 @@
<DashBoard :data="device.value"></DashBoard>
<div>璁惧缂栧彿锛歿{ device.mnCode }}</div>
<hr class="divider-margin"/>
- <div>浜х敓鏃堕棿:{{ device.time }}</div>
+ <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%;
@@ -390,12 +474,18 @@
.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;
@@ -446,4 +536,13 @@
.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
index f2d4534..b641644 100644
--- a/src/test/TestNoData.vue
+++ b/src/test/TestNoData.vue
@@ -1,149 +1,34 @@
+<script >
+import {store} from '../utils/status.js'
+import {useCount} from '../utils/status1.js'
+ export default {
+ data() {
+ return{
+ store,
-<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 axios from 'axios'
-
-export default {
- data() {
- return {
- devices: [],
- loading:false, //鍔犺浇涓�
- }
- },
- methods: {
- fetchData() {
- const params = {
- params: {
- page: 1,
- per_page: 10
- }
+ localCount:0
}
- axios.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)
- }
+ mounted(){
+ this.localCount = useCount()
+ },
+ methods: {
+
+ }
}
</script>
-<style scoped>
-.dashboard {
- margin-bottom: 20px;
-}
+<template>
+ <div>
+ <el-button @click="store.increment()">澧炲姞</el-button>
+ <div>count:{{ store.count }}</div>
-.dashboard-title {
- font-size: 20px;
- text-align: center;
- padding: 10px 0;
- background-color: #f5f7fa;
-}
+ <!-- <div>{{ globalCount.value }}</div> -->
+ <div>{{ localCount.localCount }}</div>
-.echarts {
- height: 300px;
-}
+ </div>
+</template>
-/* 瓒呮爣 鏂囧瓧鏁堟灉*/
-.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>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/test/TestSelect.vue b/src/test/TestSelect.vue
index 0f57761..6273f74 100644
--- a/src/test/TestSelect.vue
+++ b/src/test/TestSelect.vue
@@ -1,208 +1,60 @@
-<!-- 鑷姩浠庢帴鍙ｈ幏鍙栨暟鎹� 鐢熸垚浠〃鐩� -->
-
-<script lang="ts">
-import axios from 'axios';
-import * as echarts from 'echarts';
-
-export default {
- data() {
- return {
- loading:false,
- smogData: [
- // {
- // "time": "2023-06-24 13:23",
- // "value": 0.04,
- // "mnCode": "31011020175002"
- // },
- // {
- // "time": "2023-06-24 00:42",
- // "value": 0.04,
- // "mnCode": "31011020175004"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.06,
- // "mnCode": "31011020175008"
- // },
- // {
- // "time": "2023-06-24 13:38",
- // "value": 0.66,
- // "mnCode": "64480047078091"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.8,
- // "mnCode": "31011020175006"
- // },
- // {
- // "time": "2023-06-24 13:38",
- // "value": 0.69,
- // "mnCode": "64480047078099"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.8,
- // "mnCode": "31011020175026"
- // },
-
- ],//浠庡悗绔斁鍥炵殑鍊�
- chartData: [], //浠庡浘鍍忚繑鍥炵殑鍊�
- };
- },
- mounted() {
- this.loading = true
- //鑷姩鑾峰彇鎺ュ彛鍏ㄩ儴鏁版嵁
- axios.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 >
+import {store} from '../utils/status.js'
+ export default {
+ data() {
+ return{
+ store
+ }
},
- }
+ methods: {
+
+ }
+}
</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>
+ <el-button @click="store.increment()">澧炲姞</el-button>
+ <div>count:{{ store.count }}</div>
</div>
</template>
-
-
-
<style lang="scss" scoped>
-.chart-container {
- background-color: #f9f9f9;
- padding: 20px;
- border-radius: 4px;
-}
-.chart-title {
- font-size: 16px;
- font-weight: 600;
-}
+</style> -->
-.chart-content {
- margin-top: 10px;
-}
+<!-- <script setup>
-.chartClass {
- height: 300px;
+import { useMouse } from '../utils/status1.js'
+const { x, y } = useMouse()
+
+</script> -->
+
+<template>
+Mouse position is at: {{ x }}, {{ y }}
+<div>{{ c }}</div>
+<div>{{ d }}</div>
+</template>
+
+<script >
+import { useMouse } from '../utils/status1.js'
+export default {
+ setup() {
+ const { x, y } = useMouse()
+ return { x, y }
+ },
+ data(){
+ return{
+ c:'濂界殑',
+ d:1
+ }
+ },
+ watch:{
+ x(){
+ this.d = this.x
+ }
+ }
+
}
-</style>
\ No newline at end of file
+</script>
+
diff --git a/src/test/TestWa.vue b/src/test/TestWa.vue
index ffdcc27..9556095 100644
--- a/src/test/TestWa.vue
+++ b/src/test/TestWa.vue
@@ -1,1456 +1,382 @@
-<!-- app -->
-<!-- -->
-<template>
- <!-- solid #000000 -->
- <div style="margin: 20px; padding: 10px; border: 1px; height: 815px">
- <!-- <div style="margin-bottom: 20px; display: flex; white-space: nowrap">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�
- </div> -->
- <!-- 鑿滃崟璇绘爣棰� -->
-
- <div style="display: flex">
- <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
-
- <!-- 搴楅摵鍚� 绾ц仈 -->
- <ShopNameAndID
- @submit-id="(n) => (deviceId[1] = n)"
- :devId="鍏ㄩ儴"
- ></ShopNameAndID>
- <!-- {{ deviceId }} -->
- <!-- 鍐欏嚭缁勪欢 -->
- <!-- 杩涙潵灏卞姞杞� -->
- <!-- <span style="margin-right: 15px">
- <el-cascader
- v-model="deviceId"
- :options="optionsShop"
- :props="{ expandTrigger: 'hover' }"
- placeholder="鍏ㄩ儴"
- />
- </span> -->
- <!-- @visible-change="getDeviceInfo" -->
- <!-- 寮傚父绫诲瀷閫夋嫨 -->
- <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
- </ExceptionType>
-
- <span class="describe-time-text">璧锋鏃堕棿锛�</span>
- <!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
- <!-- <el-date-picker
- v-model="beginTime"
- type="datetime"
- placeholder="寮�濮嬫椂闂�"
- value-format="YYYY-MM-DD HH:mm:ss"
- />
- <span>~ </span>
- <el-date-picker
- v-model="endTime"
- type="datetime"
- placeholder="缁撴潫鏃堕棿"
- value-format="YYYY-MM-DD HH:mm:ss"
- /> -->
- <TimeSelect @submit-time="giveTime"></TimeSelect>
-
- <!-- 鍋氭垚琛ㄥ崟 -->
- <el-button
- type="primary"
- plain
- @click="showTable"
- style="margin-left: 20px"
- >鏌ヨ</el-button
- >
- <el-button
- type="primary"
- plain
- @click="getAllData"
- style="margin-left: 20px"
- >鏌ヨ鍏ㄩ儴</el-button
- >
-
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙鍑篍xcel鏂囦欢"
- placement="top-start"
- >
- <!-- 鍋氭垚鍑芥暟js鏂囦欢 -->
- <el-icon
- class="iconExcel clickable"
- title="瀵煎嚭Excel鏂囦欢"
- @click="exportDom"
- >
- <i-ep-Download />
- <!-- 瀵煎嚭涓篍xcel -->
- </el-icon>
- </el-tooltip>
- </div>
- <br />
-
- <el-collapse v-model="activeNames">
- <el-collapse-item name="1">
- <template #title>
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙姌鍙�"
- placement="right-start"
- >
- <span class="collapse-header"> 寮傚父鐨勫簵閾烘暟閲忓垎鏋�</span>
- <el-icon class="header-icon">
- <i-ep-info-filled />
- </el-icon>
- </el-tooltip>
-
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙姌鍙�"
- placement="right-start"
- >
- <span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
- >
- </el-tooltip>
- </template>
- <el-card class="box-card">
- <el-row :gutter="25">
- <el-col :span="8">
- <el-statistic :value="exception0.length">
- <template #title
- ><span style="color: red; font-size: 15px">娌圭儫娴撳害瓒呮爣</span>
- </template>
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception0.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
- >
- </el-statistic>
- <hr />
- <div class="box-card-butcontainer">
- <el-scrollbar height="130px">
- <!-- <button
- v-for="item in this.exception0"
- :key="item"
- class="scrollbar-demo-item"
- >
- {{ item.diName }}
-
- <br />
- </button> -->
-
- <div v-for="item in exception0" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exception-value="0"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
- </div>
- </el-col>
-
- <el-col :span="8">
- <el-statistic :value="exception1.length">
- <template #title
- ><span style="color: rgb(181, 14, 247); font-size: 15px"
- >渚涚數寮傚父</span
- ></template
- >
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception1.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
- >
- </el-statistic>
- <hr />
-
- <div>
- <el-scrollbar height="130px">
- <div v-for="item in exception1" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exceptionValue="1"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
- </div>
- </el-col>
-
- <el-col :span="8">
- <el-statistic :value="exception2.length">
- <template #title
- ><span style="color: rgb(185, 96, 11); font-size: 15px"
- >鎺夌嚎</span
- ></template
- >
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception2.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
- >
- </el-statistic>
- <hr />
- <div>
- <el-scrollbar height="130px">
- <!-- <span
- v-for="item in this.exception2"
- :key="item"
- class="scrollbar-demo-item"
- >
- {{ item.diName }}
- <br />
- </span> -->
-
- <div v-for="item in exception2" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exceptionValue="2"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
- </div>
- </el-col>
- </el-row>
- </el-card>
- </el-collapse-item>
- </el-collapse>
-
- <br />
- <hr />
- <div class="table-page">
- <el-table
- v-loading="loading"
- :data="displayData"
- style="width: 100%"
- height="400"
- >
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.diName">
- <div class="cell ellipsis">{{ row.diName }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="devId" label="璁惧缂栧彿" width="230">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.devId">
- <div class="cell ellipsis">{{ row.devId }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="exception" label="寮傚父鍒嗙被" width="150">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.exception">
- <div class="cell ellipsis">{{ row.exception }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
- <el-table-column label="寮傚父绫诲瀷" width="150">
- <template #default="{ row }">
- <span v-if="row.exceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
- <span v-else-if="row.exceptionType == '1'">鐤戜技渚涚數寮傚父</span>
- <span v-else-if="row.exceptionType == '2'">鎺夌嚎</span>
- </template>
- </el-table-column>
- <el-table-column prop="region" label="鍦板尯" width="150">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.region">
- <div class="cell ellipsis">{{ row.region }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="beginTime" label="寮�濮嬫椂闂�">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.beginTime">
- <div class="cell ellipsis">{{ row.beginTime }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
- <el-table-column prop="endTime" label="缁撴潫鏃堕棿">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.endTime">
- <div class="cell ellipsis">{{ row.endTime }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
- <el-table-column label="鎿嶄綔" width="200">
- <template #default="{ row }">
- <el-button type="warning" @click="showDrawer(row)"
- >鏌ョ湅璇︽儏</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <el-pagination
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :total="total"
- :page-size="pageSize"
- layout="total,prev, pager, next, jumper"
- />
- </div>
-
- <!-- 瀵硅瘽妗� -->
- <div style="width: 600px;">
- <el-dialog v-model="centerDialogVisible" title="Warning" align-center>
- <template #header="{ titleId, titleClass }">
- <div :id="titleId" :class="titleClass" style="font-size: 17px">
- 搴楅摵鍚嶏細{{ rowShopName }}
- <span style="margin-left: 40px">寮傚父绫诲瀷锛�</span>
- <span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
- <span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
- <span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
- <div style="margin-top: 10px">
- 寮傚父鏃堕棿娈碉細{{ rowBeginTime }} ~
- {{ rowEndTime }}
- </div>
- </div>
- </template>
-
- <el-button
- type="danger"
- :disabled="isPreCantouch"
- @click="getPreviousRowData"
- >涓婁竴鏉�</el-button
- >
- <el-button
- type="danger"
- :disabled="isNextCantouch"
- @click="getNextRowData"
- >涓嬩竴鏉�</el-button
- >
- <!-- 瓒呮爣鏁版嵁鏃� -->
- <!-- 鎶樼嚎鍥� -->
- <div
- ref="chart"
- style="
- width: 800px;
- height: 300px;
- margin-bottom: 20px;
- margin-left: 10px;
- "
- ></div>
-
- <!-- v-show="!isAbnormal" -->
- <!-- 琛ㄦ牸 -->
- <div style="margin-top: 40px;margin-bottom: 5px; border: 1px solid #000000">
- <el-table
- :data="exceedingData"
- height="360"
- border
- style="width: 100%; margin-top: 25px"
- >
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" />
- <el-table-column
-
- prop="mvStatCode"
- label="璁惧缂栧彿"
- width="240"
- />
-
- <el-table-column prop="mvDataTime" label="鎶ヨ鏃堕棿" width="220" />
- <el-table-column
- prop="mvFumeConcentration2"
- label="娌圭儫娴撳害(mg/m鲁)"
- width="150"
- />
- </el-table>
- </div>
-
- <el-tag
- type="success"
- class="mx-1"
- effect="dark"
- round
- ><span class="table-line-lable">琛ㄦ牸琛屾暟锛� </span> <span class="table-line-num" >{{exceptionTotal }}</span></el-tag
- >
- </el-dialog>
- </div>
- </div>
-</template>
-
+<!-- 鏁版嵁鐖彇 -->
<script>
-import ExceptionButton from '../sfc/ExceptionButton.vue';
-import ExceptionType from '../sfc/ExceptionType.vue';
-import TimeSelect from '../sfc/TimeSelect.vue';
+// import ShopNameSelect from '../sfc/ShopNameSelect.vue'
+import ShopNameCheckBox from '../sfc/ShopNameCheckBox.vue';
+import TimeSelectCrawling from '../sfc/TimeSelectCrawling.vue';
-// import axios from 'axios';
-import * as echarts from 'echarts';
-import * as XLSX from 'xlsx/xlsx.mjs';
+import axios from 'axios';
import dayjs from 'dayjs';
-import axiosInstance from '../utils/request.js';
-const ShopNameAndID = defineAsyncComponent(() =>
- import('../sfc/../sfc/ShopNameAndID.vue')
-);
export default {
- name: 'TablePage',
components: {
- ExceptionButton,
- ExceptionType,
- TimeSelect,
- ShopNameAndID
+ // ShopNameSelect,
+ ShopNameCheckBox,
+ TimeSelectCrawling
},
data() {
return {
- // 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
- exceptionTotal:0,
- // 鏃犳暟鎹椂鐨勬椂闂存暟缁勶紝鍏冪礌鐩稿樊10鍒嗛挓
- // abnormalTimeTenMinute: [],
- // 搴楅摵鎬绘暟
- shopsTotal: 0,
-
- // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
- isPreCantouch: false,
- // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
- isNextCantouch: false,
-
- // 瀵硅瘽妗嗘槸鍚﹀睍绀�
- centerDialogVisible: false,
-
- // 鎶藉眽澶撮儴淇℃伅
- // 鎶樼嚎鍥惧搴旂殑褰撳墠琛ㄦ牸琛屾暟鎹�
- // 搴楅摵鍚�
- rowShopName: '',
- // 寮傚父绫诲瀷
- rowExceptionType: '',
- // 寮傚父寮�濮嬫椂闂�
- rowBeginTime: '',
- // 寮傚父缁撴潫鏃堕棿
- rowEndTime: '',
- // 寮傚父鐨勮澶囩紪鍙�
- rowMvStatCode: '',
-
- // 琛ㄦ牸鐨勪竴琛屾暟鎹�
- rowTable: [],
- //鎷兼帴鐨勬墍鏈夋暟鎹�
- allExceptionTimeData: [],
- // 鏃犳暟鎹椂澧炲姞鐨勫墠30鍒嗛挓鏁版嵁
- beforeData: [],
- // 鏃犳暟鎹椂澧炲姞鐨勫悗40鍒嗛挓鏁版嵁
- afterData: [],
-
- // 鎶樼嚎鍥惧疄渚�
- chart: null,
- // -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮
- selectedRowIndex: -1,
-
- // 榛樿閫夋嫨鐨勬姌鍙犻潰鏉跨紪鍙�
- activeNames: ['1'],
- // 寮傚父鏃剁殑琛ㄦ牸
- abnormalTb: [],
- // 寮傚父鐨勮捣姝㈡椂闂�
- abnormalBt: '',
- abnormalEt: '',
- // 鏄惁灞曠ず鏃堕棿杞� 鍚�
- isAbnormal: false,
- // 淇濆瓨鐫�寮傚父绫诲瀷0瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
- exception0: [],
- // 淇濆瓨鐫�寮傚父绫诲瀷1瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
- exception1: [],
- // 淇濆瓨鐫�寮傚父绫诲瀷2瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
- exception2: [],
- // 鍔犺浇鍔ㄧ敾
+ 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,
- // 鎶藉眽鍔犺浇鍔ㄧ敾
- loadingDrawer: true,
- // 鍒嗛〉灞曠ず鏁版嵁
- // 姣忛〉灞曠ず鐨勬暟鎹�
- displayData: [],
- // 瀛樻斁鍚庣杩斿洖鐨刯son鏁版嵁
- jsonData: [],
- // 鍒嗛〉鐨勮捣濮嬬储寮�
- startIndex: 0,
- // 褰撳墠椤�
- currentPage: 1,
- // 姣忛〉鏉℃暟
- pageSize: 10,
- total: 0,
- // 閫夋嫨搴楅摵鍚�
- deviceId: [],
- deviceInfo: [],
- // 鏃堕棿閫夋嫨鍣ㄥ紑濮嬫椂闂�
- beginTime: '',
- // 鏃堕棿閫夋嫨鍣ㄧ粨鏉熸椂闂�
- endTime: '',
- // 寮傚父琛ㄦ暟鎹�
- abnormalData: [],
- // 璇ユ椂娈电殑璇︾粏瓒呮爣鏁版嵁
- exceedingData: [],
- drawerVisible: false,
- // 琛ㄦ牸鐨勪竴琛屾暟鎹�
- drawerData: {},
- // 鎶藉眽鏂瑰悜锛屼粠鍙冲悜宸︽墦寮�
- drawerDirection: 'rtl',
- optionsTime: [
- // 鏃堕棿棰楃矑搴�
- {
- value: '10',
- label: '10鍒嗛挓鏁版嵁',
- disabled: true
- }
- ],
- // 搴楅摵鍚� 绾ц仈閫夋嫨鍣�
- optionsShop: [],
- // 寮傚父绫诲瀷閫夋嫨鍣�
- exceptionValue: [],
- exceptionOptions: [
- {
- value: '0',
- label: '娌圭儫娴撳害瓒呮爣'
- },
- {
- value: '1',
- label: '鐤戜技渚涚數寮傚父'
- },
- {
- value: '2',
- label: '鎺夌嚎'
- }
- ]
+ loadingToMysql:null,
+ // 浣嗘湁閲嶅鐨勬暟鎹椂锛屼袱涓寜閽彧鑳介�夊叾涓竴涓紝鍙嶄箣鍐嶆閲嶅鍏ュ簱
+ buttonFlag:-1
};
},
- // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
- watch: {
- selectedRowIndex(newVaue) {
- // 澶勪簬琛ㄦ牸鐨勭涓�鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
- if (newVaue === 0) {
- this.isPreCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
- if (this.isNextCantouch == true) {
- this.isNextCantouch = false;
- }
+ 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');
}
- // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
- else if (newVaue === this.displayData.length - 1) {
- this.isNextCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
- if (this.isPreCantouch == true) {
- this.isPreCantouch = false;
- }
+ if (this.form.endTime) {
+ form['endTime'] = dayjs(this.form.endTime).format('YYYY-MM-DD');
}
- // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬�
- else {
- this.isPreCantouch = false;
- this.isNextCantouch = false;
- }
+ 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
},
- // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
- beginTime() {
- this.getShopNames();
+ // 鏃犻噸澶嶆暟鎹椂锛岀粨鏋滃叆搴�
+ 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()
+ })
},
- endTime() {
- this.getShopNames();
+
+ // 鍏ュ簱鏂版暟鎹紙鍙啓鍏ユ柊鏁版嵁锛�
+ 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);
}
- },
- methods: {
- // 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
+ else{
+ this.loadingToMysql.close()
+ ElMessage.success('鍐欏叆瀹屾垚锛�')
+ }
+ },
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
- this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
- this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+ 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');
},
-
- // 寮傚父鐨勫紑濮嬪拰缁撴潫鏃堕棿銆傝繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�10鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€��
- // 姣斿12:00:00 -13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:10:00 ,12:20:00,12:30:00....13:00:00
- descTenTime(begin, end) {
- // 淇濈暀缁撴灉
- let time = [];
- let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
- while (temp != end) {
- time.push(temp);
- temp = dayjs(temp).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
- }
- // 鍔犱笂寮傚父鐨勭粨鏉熸椂闂�
- time.push(temp);
-
- return time;
- },
-
- // 淇濆瓨褰撳墠閫夋嫨鐨勮鎵�鏈変俊鎭�
- setinfo(index) {
- this.rowShopName = this.displayData[index].diName;
- this.rowExceptionType = this.displayData[index].exceptionType;
- this.rowBeginTime = this.displayData[index].beginTime;
- this.rowEndTime = this.displayData[index].endTime;
- this.rowMvStatCode = this.displayData[index].devId;
- console.log('琛屽悕瀛楋細', this.rowShopName);
- console.log('琛屽悕瀛楋細', this.rowExceptionType);
- console.log('琛屽悕瀛楋細', this.rowBeginTime);
- console.log('琛屽悕瀛楋細', this.rowEndTime);
- },
- // 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
- setExceptionData() {
- // 娓呯┖锛岃鍘嗗彶鏁版嵁鏉℃暟闅愯棌锛屼娇鏃犳暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
- // this.exceedingData=[]
- // 娓呯┖涓婃鐨勬暟鎹紝闃叉褰卞搷鏈鐨勫睍绀烘暟
- // this.abnormalTimeTenMinute = [];
- // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
- const abnormalTimeTenMinute = this.descTenTime(
- this.rowBeginTime,
- this.rowEndTime
- );
- for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
- this.exceedingData.push({
- mvStatCode: this.rowMvStatCode,
- diName: this.rowShopName,
- mvDataTime: abnormalTimeTenMinute[i],
- mvFumeConcentration2: '绌烘暟鎹�'
- });
- }
- // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
- this.exceptionTotal = abnormalTimeTenMinute.length
- },
- // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
- selectTableRow(row) {
- // 鑾峰彇褰撳墠琛岀殑绱㈠紩
- this.selectedRowIndex = this.displayData.indexOf(row);
- // 杩涘叆鎶藉眽椤甸潰鏇存柊澶撮儴鏁版嵁
- this.setinfo(this.selectedRowIndex);
- console.log('閫夋嫨涓锛�', this.selectedRowIndex);
- },
-
- // 鑾峰彇鑾峰彇琛ㄦ牸涓婁竴琛屾暟鎹�
- getPreviousRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
- if (this.selectedRowIndex !== 0) {
- // 鈥欎笅涓�鏉♀�樼殑鎸夐挳鎭㈠鐐瑰嚮
- // this.isNextCantouch = false
-
- //寰楀埌涓婁竴琛屾暟鎹储寮�
- this.selectedRowIndex = this.selectedRowIndex - 1;
- console.log('涓�', this.selectedRowIndex);
-
- console.log(this.displayData[this.selectedRowIndex]);
- //璇锋眰鏁版嵁 鏀瑰彉exceedingData
- this.setinfo(this.selectedRowIndex);
- let params = {};
- if (this.drawerData.devId) {
- params['devId'] = this.displayData[this.selectedRowIndex].devId;
- }
- if (this.drawerData.beginTime) {
- params['beginTime'] =
- this.displayData[this.selectedRowIndex].beginTime;
- }
- if (this.drawerData.endTime) {
- params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
- }
-
- axiosInstance
- .get('/fume/exceed', { params: params })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.exceedingData = response.data.data;
- this.chart = null;
- this.drawChart();
- this.exceptionTotal = this.exceedingData.length
- });
- }
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else if (this.selectedRowIndex === 0) {
- console.log(null);
- // 璀﹀憡
- // ElMessage.warn('宸叉槸绗竴鏉℃暟鎹�');
- // ElMessage.info('宸叉槸璇ラ〉绗竴鏉℃暟鎹�');
-
- // 鈥欎笂涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
- // this.isPreCantouch = true
- }
- },
-
- // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
- getNextRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
- if (this.selectedRowIndex < this.displayData.length - 1) {
- // 鈥欎笂涓�鏉♀�樼殑鎸夐挳鎭㈠鐐瑰嚮
- // this.isPreCantouch = false
-
- //寰楀埌涓婁竴琛屾暟鎹储寮�
- this.selectedRowIndex = this.selectedRowIndex + 1;
- console.log('涓�', this.selectedRowIndex);
-
- console.log(this.displayData[this.selectedRowIndex]);
- //璇锋眰鏁版嵁 鏀瑰彉exceedingData
- this.setinfo(this.selectedRowIndex);
- let params = {};
- if (this.drawerData.devId) {
- params['devId'] = this.displayData[this.selectedRowIndex].devId;
- }
- if (this.drawerData.beginTime) {
- params['beginTime'] =
- this.displayData[this.selectedRowIndex].beginTime;
- }
- if (this.drawerData.endTime) {
- params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
- }
- axiosInstance
- .get('/fume/exceed', { params: params })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.exceedingData = response.data.data;
- console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
- console.log(this.exceedingData);
- this.chart = null;
- this.drawChart();
- this.exceptionTotal = this.exceedingData.length
- });
- }
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else {
- console.log(null);
- // 璀﹀憡
- // ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�');
-
- // 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
- // this.isNextCantouch = true
- }
- },
-
- // 鈥樻煡鐪嬭鎯呪�� 寮瑰嚭妗嗛儴鍒�
- showDrawer(row) {
- // 璁＄畻褰撳墠琛岀殑绱㈠紩
- this.selectTableRow(row);
-
- this.rowTable = row;
- console.log('璧嬪�煎悗row', this.rowTable);
- console.log('璧嬪�煎悗row', this.rowTable);
- // 灞曞紑鎶藉眽
- // 琛ㄦ牸鐨勮鏁版嵁浠ュ璞″舰寮忕粰drawerData
- this.drawerData = row;
-
- this.centerDialogVisible = true;
- // this.drawerVisible = true;
- console.log(this.drawerData);
- // 鏍规嵁琛屾暟鎹姹傝缁嗚秴鏍囨暟鎹覆鏌撴姌绾垮浘
- let params = {};
- if (this.drawerData.devId) {
- params['devId'] = this.drawerData.devId;
- }
- if (this.drawerData.beginTime) {
- params['beginTime'] = this.drawerData.beginTime;
- }
- if (this.drawerData.endTime) {
- params['endTime'] = this.drawerData.endTime;
- }
- axiosInstance.get('/fume/exceed', { params: params }).then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.exceedingData = response.data.data;
- this.loadingDrawer = !this.loadingDrawer;
- // this.total = this.exceedingData.length;
- // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
- console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
- console.log(this.exceedingData);
- this.drawChart();
- this.exceptionTotal = this.exceedingData.length
- });
- },
-
- // 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
- showTable() {
- if (this.beginTime > this.endTime) {
- alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿');
- return;
- }
- let params = {};
- // params['page'] = this.startIndex
- // params['pageSize'] = 10
- if (this.deviceId[1]) {
- params['devId'] = this.deviceId[1];
- }
- if (this.exceptionValue.length != 0) {
- params['exceptionValue'] = this.exceptionValue.join();
- }
- console.log('鍘�', this.exceptionValue);
- console.log('澶勭悊', this.exceptionValue.join());
- if (this.beginTime) {
- params['beginTime'] = this.beginTime;
- }
- if (this.endTime) {
- params['endTime'] = this.endTime;
- }
- this.loading = true;
- axiosInstance
- .get('/fume/abnormalthree', { params: params })
- .then((response) => {
- this.abnormalData = response.data.data;
- this.total = this.abnormalData.length;
- this.handleCurrentChange(1);
- console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
- console.log('闀垮害', response.data.data.total);
- this.loading = false;
- });
- },
- handleSizeChange(val) {
- this.pageSize = val;
- // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒扮涓�椤�
- this.handleCurrentChange(1);
- },
- handleCurrentChange(val) {
- // this.startIndex = (val - 1) * this.pageSize;
- // const endIndex = this.startIndex + this.pageSize;
-
- const startIndex = (val - 1) * this.pageSize;
- const endIndex = startIndex + this.pageSize;
- // console.log('璧峰绱㈠紩涓�:',this.startIndex)
- // console.log('椤甸潰澶у皬涓�:',this.pageSize)
- this.displayData = this.abnormalData.slice(startIndex, endIndex);
- // setTimeout(() => {
- // this.displayData = this.abnormalData
-
- // }, 1000);
- // console.log(this.displayData);
- },
-
- //鐩稿樊澶氬皯涓崄鍒嗛挓 璁＄畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
- diffTenMinutesNum(beginNormal, endNormal) {
- // 灏嗗紑濮嬫椂闂村拰缁撴潫鏃堕棿杞崲涓篸ayjs瀵硅薄
- const start = dayjs(beginNormal);
- const end = dayjs(endNormal);
-
- // 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
- const diffInMinutes = end.diff(start, 'minute');
- const diffInTenMinutes = Math.floor(diffInMinutes / 10);
- console.log('鍑犱釜10鍒嗛挓', diffInTenMinutes);
- return diffInTenMinutes;
- },
-
- // 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥�
- linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
- this.chart = echarts.init(this.$refs.chart, null, {
- width: 800,
- height: 300
- });
- this.chart.setOption({
- title: {
- // text: '娌圭儫瓒呮爣鏁版嵁',
- // left: 'center'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
-
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- // type: 'time',
- // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
- data: xAxisData1,
- name: '鏃堕棿'
- // axisLabel: {
- // interval:3,
- // rotate:40
- // }
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- // formatter:'{value} %'
- },
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '娌圭儫瓒呮爣鏁版嵁',
- type: 'line',
- data: fumeExceeding,
- markLine: {
- silent: true,
-
- data: [
- // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
- {
- name: '鏃犳暟鎹�',
- xAxis: abnormalBeginTime
- },
- {
- xAxis: abnormalEndTime
- }
- ],
- lineStyle: {
- color: 'red'
- }
- }
- }
- ]
- });
- },
-
- // 灞曠ず鎶樼嚎鍥�
- drawChart() {
- // 褰撳嚭鐜颁緵鐢靛紓甯稿拰鎺夌嚎鏃讹紝鏃舵鏃犳暟鎹� 鍒欐嫾鎺ュ墠鍚庢鏁版嵁
- if (
- this.exceedingData.length === 0 ||
- this.rowExceptionType === '1' ||
- this.rowExceptionType === '2'
- ) {
- // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
- this.setExceptionData();
-
- // 灞曠ず
- this.isAbnormal = true;
- // 鎷兼帴鏃ユ湡
- //寮傚父鐨勫紑濮嬫椂闂�
- this.abnormalBt = this.displayData[this.selectedRowIndex].beginTime;
- //寮傚父鐨勭粨鏉熸椂闂�
- this.abnormalEt = this.displayData[this.selectedRowIndex].endTime;
- console.log(
- '渚涚數寮�濮�',
- this.displayData[this.selectedRowIndex].beginTime
- );
- console.log(
- '渚涚數缁撴潫',
- this.displayData[this.selectedRowIndex].endTime
- );
- // 寰�鍓�30鍒嗛挓
- const before30MinBegin = dayjs(this.abnormalBt)
- .subtract(30, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- // 鍚庝竴娈电殑寮�濮嬫椂闂�
- const after10MinBegin = dayjs(this.abnormalEt)
- .add(10, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- // 寰�鍚�40鍒嗛挓
- const after40MinEnd = dayjs(this.abnormalEt)
- .add(40, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
-
- let paramsBefore = {
- devId: this.displayData[this.selectedRowIndex].devId,
- beginTime: before30MinBegin,
- endTime: this.displayData[this.selectedRowIndex].beginTime
- };
- let paramsAfter = {
- devId: this.displayData[this.selectedRowIndex].devId,
- beginTime: after10MinBegin,
- endTime: after40MinEnd
- };
- // 璇锋眰鍓嶅崐娈�
- axiosInstance
- .get('http://localhost:8080/fume/history', { params: paramsBefore })
- .then((result) => {
- this.beforeData = result.data.data;
- });
-
- // 璇锋眰鍚庡崐娈�
- axiosInstance
- .get('http://localhost:8080/fume/history', { params: paramsAfter })
- .then((result) => {
- this.afterData = result.data.data;
- });
-
- //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂�
- //鐩稿樊鍑犱釜10鍒嗛挓
- const TenMinuteNum = this.diffTenMinutesNum(
- this.abnormalBt,
- this.abnormalEt
- );
- //淇濆瓨绌哄��
- let tempArr = [];
- for (let i = 0; i < TenMinuteNum; i++) {
- tempArr.push(null);
- }
- console.log('濉厖鏁扮粍涓猴細', tempArr);
-
- //鍚堝苟鏁扮粍
- setTimeout(() => {
- this.allExceptionTimeData = [
- ...this.beforeData,
- ...tempArr,
- ...this.afterData
- ];
- console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData);
- //灞曠ず鍥惧舰
- // x杞存棩鏈熸椂闂�
- let dateList = [];
- // y杞� 瓒呮爣娌圭儫娴撳害
- let fumeExceeding = [];
- for (let i = 0; i < this.allExceptionTimeData.length; i++) {
- if (this.allExceptionTimeData[i] == null) {
- //x杞存棩鏈�
- //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
- dateList.push(
- dayjs(dateList[dateList.length - 1])
- .add(10, 'minute')
- .format('YYYY-MM-DD HH:mm:ss')
- );
- // 瓒呮爣娌圭儫娴撳害
- fumeExceeding.push(null);
- } else {
- //x杞存棩鏈�
- dateList.push(this.allExceptionTimeData[i].mvDataTime);
- // 瓒呮爣娌圭儫娴撳害
- fumeExceeding.push(
- this.allExceptionTimeData[i].mvFumeConcentration2
- );
- }
- }
- console.log('x:', dateList);
- console.log('fume:', fumeExceeding);
-
- //灞曠ず鎶樼嚎鍥�
- this.chart = null;
- this.linechart(
- dateList,
- this.abnormalBt,
- this.abnormalEt,
- fumeExceeding
- );
- }, 500);
-
- // ----------------------------------------
- }
- // 娌圭儫娴撳害瓒呮爣鏃剁殑鎶樼嚎鍥�
- else {
- // // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
- // this.abnormalTimeTenMinute = []
- this.isAbnormal = false;
- // x杞存棩鏈熸椂闂�
- let dateList = [];
- // y杞� 瓒呮爣娌圭儫娴撳害
- let fumeExceeding = [];
- this.exceedingData.forEach((item) => {
- //x杞存棩鏈�
- dateList.push(item.mvDataTime);
- // 瓒呮爣娌圭儫娴撳害
- fumeExceeding.push(item.mvFumeConcentration2);
- });
- // 瀛樻斁璇ユ椂闂存姣忛殧鍗佸垎閽熶竴娆＄殑鏃堕棿鐐�
- const xAxisData = [];
- const xAxisData1 = [];
- let beginTime = new Date(dateList[0]);
- const endTime = new Date(dateList[dateList.length - 1]);
- // console.log(beginTime,endTime);
- while (beginTime <= endTime) {
- xAxisData.push(beginTime);
- // 澧炲姞10鍒嗛挓
- beginTime = new Date(beginTime.getTime() + 10 * 60 * 1000);
- }
- // console.log(xAxisData);
- // 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮忕殑瀛楃涓�
- xAxisData.forEach((item, index) => {
- // 鑾峰彇鍒嗛挓鏁�
- let M = item.getMinutes();
- // 濡傛灉鍒嗛挓灏忎簬10,鍒欏湪鍓嶉潰鍔�0琛ュ厖涓轰袱浣嶆暟瀛�
- M = M > 9 ? M : '0' + M;
- xAxisData1[index] =
- item.getFullYear() +
- '-' +
- (item.getMonth() + 1) +
- '-' +
- item.getDate() +
- ' ' +
- item.getHours() +
- ':' +
- M +
- ':0' +
- item.getSeconds();
- });
- console.log(xAxisData1);
- this.chart = echarts.init(this.$refs.chart);
- this.chart.setOption({
- title: {
- // text: '娌圭儫瓒呮爣鏁版嵁',
- // left: 'center'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- // type: 'time',
- // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
- data: xAxisData1,
- name: '鏃堕棿'
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- // formatter:'{value} %'
- },
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '娌圭儫瓒呮爣鏁版嵁',
- type: 'line',
- data: fumeExceeding,
- markLine: {
- itemStyle: {
- // 鍩虹嚎鍏叡鏍峰紡
- normal: {
- lineStyle: {
- // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎
- type: 'dashed'
- },
- label: {
- show: true,
- position: 'end',
- formatter: '{b}{c}'
- }
- }
- },
- data: [
- {
- name: '棰勮',
- type: 'average',
- yAxis: 1,
- lineStyle: {
- color: '#ff0000'
- }
- }
- ]
- }
- }
- ]
- });
- }
- },
- getDeviceInfo() {
- // 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
- axiosInstance.get('/fume/device').then((result) => {
- this.deviceInfo = result.data.data;
- // 鑾峰彇鍒版�荤殑搴楅摵鏁伴噺
- this.shopsTotal = result.data.data.length;
- this.deviceInfo.forEach((item) => {
- this.optionsShop[this.optionsShop.length] = {
- value: item.diName,
- label: item.diName,
- children: [
- {
- value: item.diCode,
- label: item.diCode
- }
- ]
- };
- });
- console.log(this.optionsShop);
- });
- },
- exportDom() {
- // 瀵煎嚭涓篍xcel鏂囦欢
- const fields = [
- 'devId',
- 'exceptionType',
- 'region',
- 'beginTime',
- 'endTime'
- ];
- const itemsFormatted = this.abnormalData.map((item) => {
- const newItem = {};
- fields.forEach((field) => {
- newItem[field] = item[field];
- });
- return newItem;
- });
- // 鍒涘缓xlsx瀵硅薄
- const xls = XLSX.utils.json_to_sheet(itemsFormatted);
- // 缂栬緫琛ㄥご琛� 淇敼琛ㄥご
- xls['A1'].v = '璁惧缂栧彿';
- xls['B1'].v = '寮傚父绫诲瀷';
- xls['C1'].v = '鍦板尯';
- xls['D1'].v = '寮�濮嬫椂闂�';
- xls['E1'].v = '缁撴潫鏃堕棿';
- // 鍒涘缓workbook锛屽苟鎶妔heet娣诲姞杩涘幓
- const wb = XLSX.utils.book_new();
- XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
- // 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
- XLSX.writeFile(wb, '鍒嗘瀽鏁版嵁.xlsx');
- },
- // 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
- getAllData() {
- this.loading = true;
- axiosInstance.get('/fume/abnormal').then((result) => {
- this.abnormalData = result.data.data;
- this.total = this.abnormalData.length;
- // 榛樿鏄剧ず绗竴椤�
- this.handleCurrentChange(1);
- this.loading = false;
- });
-
- // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
- setTimeout(() => {
- axiosInstance.get('/fume/time').then((result) => {
- this.beginTime = result.data.data[0].beginTime;
- this.endTime = result.data.data[0].endTime;
- // console.log('be,end',this.beginTime,this.endTime);
- });
- }, 500);
- },
-
- getAbnormalDataByClick(val) {
- this.abnormalData = val;
- this.total = this.abnormalData.length;
- // 榛樿鏄剧ず绗竴椤�
- this.handleCurrentChange(1);
- },
-
- // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙�
- // 姣斿娌圭儫瓒呮爣瀵瑰簲鐨勬墍鏈夊簵閾哄悕绉板拰璁惧缂栧彿锛堝凡鍘婚櫎閲嶅鐨勫簵閾哄悕锛�
- getShopNames() {
- axiosInstance
- .get('/fume/shopname', {
- params: {
- exceptionType: '0',
- beginTime: this.beginTime,
- endTime: this.endTime
- }
- })
- .then((result) => {
- this.exception0 = result.data.data;
- console.log('寮傚父0', this.exception0);
- console.log('寮傚父0鏁伴噺', this.exception0.length);
- });
- axiosInstance
- .get('/fume/shopname', {
- params: {
- exceptionType: '1',
- beginTime: this.beginTime,
- endTime: this.endTime
- }
- })
- .then((result) => {
- this.exception1 = result.data.data;
- });
- axiosInstance
- .get('/fume/shopname', {
- params: {
- exceptionType: '2',
- beginTime: this.beginTime,
- endTime: this.endTime
- }
- })
- .then((result) => {
- this.exception2 = result.data.data;
- });
- },
- // 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁
- getRecentSevenDays() {
- // 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
- this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
- // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂�
- // this.beginTime = dayjs()
- // .subtract(3, 'week')
- // .format('YYYY-MM-DD HH:mm:ss');
- // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
-
- // this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
- // this.oneWeekAgoDateTime = dayjs().subtract(1,'week').format('YYYY-MM-DD HH:mm:ss')
- console.log(this.currentDateTime, this.oneWeekAgoDateTime);
- let params = {};
- params['beginTime'] = this.beginTime;
- params['endTime'] = this.endTime;
- axiosInstance
- .get('/fume/abnormalone', { params: params })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨�
- this.abnormalData = response.data.data;
- // 鍒嗛〉
- this.total = this.abnormalData.length;
- // 榛樿鏄剧ず绗竴椤�
- this.handleCurrentChange(1);
- this.loading = false;
- });
+ cardShow() {
+ this.isShowIframe = !this.isShowIframe;
}
- },
- mounted() {
- // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
- this.getDeviceInfo();
-
- // 灞曠ず鏈�杩�7澶╂暟鎹�
- this.getRecentSevenDays();
-
- // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
- this.getShopNames();
}
};
</script>
-<style scoped>
-.ellipsis {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
+<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>
-.iconExcel {
- font-size: 25px;
- margin-left: 20px;
- bottom: -6px;
-}
+ <div class="header-button">
+ <el-button type="primary" @click="cardShow"> 鎵撳紑缃戦〉 </el-button>
+ <el-button type="primary" @click="autoLogin"> 妯℃嫙鐧诲綍 </el-button>
+ </div>
-/* 鍙紶鏍囩澶村彉涓哄彲鐐瑰嚮鐘舵�� */
-.clickable {
- cursor: pointer;
-}
-.card-header {
- margin: 0;
-}
+ <el-card>
+ <!-- <ShopNameSelect @submit-shops="(n)=>selectedShopNames=n"></ShopNameSelect> -->
+ <ShopNameCheckBox
+ @submit-shops="(n) => (form.selectedShopNames = n)"
+ ></ShopNameCheckBox>
+ <!-- {{ selectedShopNames }} -->
+ </el-card>
-/* .el-pagination {
- position: fixed;
- bottom: 0;
- left: 50;
- right: 50;
- height: 60px;
- line-height: 60px;
- background-color: #f2f2f2;
- text-align: right;
- padding-right: 20px;
-} */
+ <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>
-body {
- margin: 0;
+ <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;
}
-.exception-divider-rowline {
- margin: 10px 0px;
+.el-card {
+ width: 60%;
+ border-radius: 9px;
}
-/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
-.exception-container {
+.input-cookie {
display: flex;
- /* direction: column; */
- /* flex-grow: 2,1; */
+ margin-top: 20px;
}
-.example-showcase .el-loading-mask {
- z-index: 9;
+.input-cookie-label {
+ margin-right: 10px;
+ margin-top: 10px;
}
-
-.scrollbar-demo-item {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 20px;
- margin: 10px;
- text-align: center;
- border-radius: 4px;
- background: var(--el-color-primary-light-9);
- color: var(--el-color-primary);
+.input-cookie-textarea {
+ width: 45%;
}
-.collapse-header {
- font-size: 18px;
- color: burlywood;
+.time-select {
+ margin-top: 20px;
}
-.collapse-header-text {
- margin-left: 60px;
- font-size: 16px;
- color: blue;
+.getdata-button {
+ margin-top: 20px;
}
-/* .el-dialog {
- height: 70%;
-} */
-
-.box-card-label {
- font-size: 17px;
+.result-textarea {
+ margin-top: 20px;
}
-/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
-:deep().el-dialog {
- height: 98%;
- /* 涓嶅嚭鐜版粴鍔ㄦ潯 */
- overflow-y: hidden
+.result-textarea-textarea {
+ width: 50%;
}
-
-/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
-.describe-info {
- margin-top: 5px;
- font-weight: bold;
+.progress-percentage {
+ width: 50%;
+ margin-top: 20px;
}
-/* 鏃堕棿閫夋嫨鏂囨湰 */
-.describe-time-text {
- margin-left: 30px;
- margin-top: 5px;
- font-weight: bold;
+.countdown-time {
+ margin-top: 20px;
}
-
-/* 寮傚父鍒嗘瀽鎸夐挳瀹瑰櫒 */
-.box-card-butcontainer {
- /* display: flex;
- direction: column; */
- width: 68.5%;
+.restore-button {
+ margin-top: 20px;
}
-.table-line-lable{
- /* color: black; */
+.result-textarea-data {
+ margin-top: 20px;
+ width: 2100px;
}
-/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
-.table-line-num {
- font-weight: bold;
- color: black;
+.result-textarea-duplication {
+ margin-top: 20px;
+ width: 90%;
}
-.button_info.el-button_inner {
- text-align: left;
-}
-.box-card {
- height: 205px;
-}
-.mx-1 {
- margin-bottom: 0px;
+* {
+ margin-left: 10px;
}
</style>
diff --git a/src/utils/request.js b/src/utils/request.js
index ed01760..13d5b5a 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,6 +1,7 @@
import axios from 'axios'
-const baseUrl = 'http://localhost:8080' // 鍩虹URL
+// const baseUrl = 'http://114.215.109.124:8803' // 鍩虹URL
+const baseUrl = 'http://localhost:8081' // 鍩虹URL
const axiosInstance = axios.create({
baseURL: baseUrl
diff --git a/src/utils/requestPy.js b/src/utils/requestPy.js
new file mode 100644
index 0000000..72ec133
--- /dev/null
+++ b/src/utils/requestPy.js
@@ -0,0 +1,10 @@
+import axios from 'axios'
+
+// const baseUrl = 'http://114.215.109.124:8805' // 鍩虹URL
+const baseUrl = ' http://127.0.0.1:8089' // 鍩虹URL
+
+const axiosInstancePy = axios.create({
+ baseURL: baseUrl
+})
+
+export default axiosInstancePy
\ No newline at end of file
diff --git a/src/utils/requests.ts b/src/utils/requests.ts
deleted file mode 100644
index 973086e..0000000
--- a/src/utils/requests.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// import axios from "axios"
-
-// const request = axios.create({
-// // baseURL: import.meta.env.VITE_APT_URL,
-// baseURL:'http://39.97.218.60/'
-// })
-
-// export default request
\ No newline at end of file
diff --git a/src/utils/status.js b/src/utils/status.js
new file mode 100644
index 0000000..47a55d4
--- /dev/null
+++ b/src/utils/status.js
@@ -0,0 +1,6 @@
+export const store = reactive({
+ count:0,
+ increment(){
+ this.count++
+ }
+})
\ No newline at end of file
diff --git a/src/utils/status1.js b/src/utils/status1.js
new file mode 100644
index 0000000..b311a58
--- /dev/null
+++ b/src/utils/status1.js
@@ -0,0 +1,35 @@
+
+// 鍏ㄥ眬鐘舵�侊紝鍒涘缓鍦ㄦā鍧椾綔鐢ㄥ煙涓�
+
+export function useCount() {
+ // 灞�閮ㄧ姸鎬侊紝姣忎釜缁勪欢閮戒細鍒涘缓
+ const localCount = ref(1)
+
+
+ return {
+
+ localCount
+ }
+}
+
+
+// 鎸夌収鎯緥锛岀粍鍚堝紡鍑芥暟鍚嶄互鈥渦se鈥濆紑澶�
+export function useMouse() {
+ // 琚粍鍚堝紡鍑芥暟灏佽鍜岀鐞嗙殑鐘舵��
+ const x = ref(0)
+ const y = ref(0)
+
+ // 缁勫悎寮忓嚱鏁板彲浠ラ殢鏃舵洿鏀瑰叾鐘舵�併��
+ function update(event) {
+ x.value = event.pageX
+ y.value = event.pageY
+ }
+
+ // 涓�涓粍鍚堝紡鍑芥暟涔熷彲浠ユ寕闈犲湪鎵�灞炵粍浠剁殑鐢熷懡鍛ㄦ湡涓�
+ // 鏉ュ惎鍔ㄥ拰鍗歌浇鍓綔鐢�
+ onMounted(() => window.addEventListener('mousemove', update))
+ onUnmounted(() => window.removeEventListener('mousemove', update))
+
+ // 閫氳繃杩斿洖鍊兼毚闇叉墍绠＄悊鐨勭姸鎬�
+ return { x, y }
+}
\ No newline at end of file
diff --git a/src/views/ExceedingFume.vue b/src/views/ExceedingFume.vue
index cd7a76a..959c747 100644
--- a/src/views/ExceedingFume.vue
+++ b/src/views/ExceedingFume.vue
@@ -1,54 +1,28 @@
-<!-- app -->
-<!-- -->
<template>
- <!-- solid #000000 -->
<div class="exception-root-container">
- <!-- <div style="margin-bottom: 20px; display: flex; white-space: nowrap">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�
- </div> -->
<!-- 鑿滃崟璇绘爣棰� -->
-
- <div style="display: flex">
+ <div ref="h1" class="header-container">
<span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
-
<!-- 搴楅摵鍚� 绾ц仈 -->
<ShopNameAndID
@submit-id="(n) => (deviceId[1] = n)"
:devId="鍏ㄩ儴"
></ShopNameAndID>
- <!-- {{ deviceId }} -->
- <!-- 鍐欏嚭缁勪欢 -->
- <!-- 杩涙潵灏卞姞杞� -->
- <!-- <span style="margin-right: 15px">
- <el-cascader
- v-model="deviceId"
- :options="optionsShop"
- :props="{ expandTrigger: 'hover' }"
- placeholder="鍏ㄩ儴"
- />
- </span> -->
- <!-- @visible-change="getDeviceInfo" -->
+
<!-- 寮傚父绫诲瀷閫夋嫨 -->
<ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
</ExceptionType>
- <span class="describe-time-text">璧锋鏃堕棿锛�</span>
+ <!-- <div style="display: flex"> -->
+ <!-- <span class="describe-time-text">璧锋鏃堕棿锛�</span> -->
<!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
- <!-- <el-date-picker
- v-model="beginTime"
- type="datetime"
- placeholder="寮�濮嬫椂闂�"
- value-format="YYYY-MM-DD HH:mm:ss"
- />
- <span>~ </span>
- <el-date-picker
- v-model="endTime"
- type="datetime"
- placeholder="缁撴潫鏃堕棿"
- value-format="YYYY-MM-DD HH:mm:ss"
- /> -->
<TimeSelect @submit-time="giveTime"></TimeSelect>
-
+ <!-- </div> -->
+ </div>
+ <div ref="h2" style="display: flex; margin-top: 2px; justify-content: right">
+ <!-- <span class="collapse-header-text">
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ > -->
<!-- 鍋氭垚琛ㄥ崟 -->
<el-button
type="primary"
@@ -58,7 +32,7 @@
>鏌ヨ</el-button
>
<el-button
- type="primary"
+ type="warning"
plain
@click="getAllData"
style="margin-left: 20px"
@@ -82,9 +56,14 @@
</el-icon>
</el-tooltip>
</div>
+ <div style="display: flex; justify-content: right">
+ <span class="collapse-header-text">
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ >
+ </div>
<br />
- <el-collapse v-model="activeNames">
+ <el-collapse ref="h3" v-model="activeNames">
<el-collapse-item name="1">
<template #title>
<el-tooltip
@@ -93,7 +72,7 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <span class="collapse-header"> 寮傚父鐨勫簵閾烘暟閲忓垎鏋�</span>
+ <h4 class="collapse-header"> 寮傚父鍒嗘瀽</h4>
<el-icon class="header-icon">
<i-ep-info-filled />
</el-icon>
@@ -105,151 +84,139 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
- >
+
</el-tooltip>
</template>
<el-card class="box-card">
<el-row :gutter="25">
<el-col :span="8">
- <el-statistic :value="exception0.length">
- <template #title
- ><span style="color: red; font-size: 15px">娌圭儫娴撳害瓒呮爣</span>
- </template>
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception0.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
+ <div style="display: flex;">
+ <img src="@/assets/exceed.jpg" style="width: 25px;height: 25px;margin-top: 5px;" />
+ <span style="font-size: 16px;font-weight: bold;margin-top: 4px;margin-left: 4px;">娌圭儫娴撳害瓒呮爣</span>
+ </div>
+
+ <div class="box-card-label">
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception0.length }} /{{ shopsTotal }}</span
>
- </el-statistic>
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception0.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </div>
+
<hr />
<div class="box-card-butcontainer">
- <el-scrollbar height="130px">
-
- <!-- <button
- v-for="item in this.exception0"
+ <el-card class="sub-box-card">
+ <ExceptionText
+ v-for="(item,index) in exception0"
:key="item"
- class="scrollbar-demo-item"
+ :devId="item.devId"
+ exception-value="0"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
>
{{ item.diName }}
-
- <br />
- </button> -->
- <div v-for="item in exception0" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exception-value="0"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
+ <span v-if="index<exception0.length-1" class="text-blank"> , </span>
+ </ExceptionText>
+ </el-card>
</div>
</el-col>
<el-col :span="8">
- <el-statistic :value="exception1.length">
- <template #title
- ><span style="color: rgb(181, 14, 247); font-size: 15px"
- >渚涚數寮傚父</span
- ></template
+ <div style="display: flex;">
+ <img src="@/assets/exception.jpg" style="width: 25px;height: 25px;margin-top: 5px;" />
+ <span style=" font-size: 16px;font-weight: bold;margin-top: 5px;margin-left: 4px;"
+ >渚涚數寮傚父</span
+ >
+ </div>
+ <div class="box-card-label">
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception1.length }} /{{ shopsTotal }}</span
>
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception1.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception1.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
>
- </el-statistic>
+ </div>
+
<hr />
<div>
- <el-scrollbar height="130px">
- <div v-for="item in exception1" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exceptionValue="1"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
+
+ <el-card class="sub-box-card">
+ <ExceptionText
+ v-for="(item,index) in exception1"
+ :key="item"
+ :devId="item.devId"
+ exception-value="1"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span v-if="index < exception1.length-1" class="text-blank"> , </span>
+ </ExceptionText>
+ </el-card>
</div>
</el-col>
<el-col :span="8">
- <el-statistic :value="exception2.length">
- <template #title
- ><span style="color: rgb(185, 96, 11); font-size: 15px"
- >鎺夌嚎</span
- ></template
+ <div style="display: flex;">
+ <img src="@/assets/offline.jpg" style="width: 25px;height: 25px;margin-top: 5px;" />
+ <span style=" font-size: 16px;font-weight: bold;margin-top: 5px;margin-left: 4px;">鎺夌嚎</span>
+ </div>
+ <div class="box-card-label">
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception2.length }} /{{ shopsTotal }}</span
>
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception2.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception2.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
>
- </el-statistic>
+ </div>
<hr />
<div>
- <el-scrollbar height="130px">
- <!-- <span
- v-for="item in this.exception2"
- :key="item"
- class="scrollbar-demo-item"
- >
- {{ item.diName }}
- <br />
- </span> -->
-
- <div v-for="item in exception2" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exceptionValue="2"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
+ <el-card class="sub-box-card">
+ <ExceptionText
+ v-for="(item,index) in exception2"
+ :key="item"
+ :devId="item.devId"
+ exception-value="2"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span v-if="index<exception2.length-1" class="text-blank"> , </span>
+ </ExceptionText>
+ </el-card>
</div>
</el-col>
</el-row>
</el-card>
</el-collapse-item>
</el-collapse>
-
- <br />
- <hr />
- <div class="table-page">
+ <!-- <hr/>
+ <br> -->
+ <h4 class="table-text"> 寮傚父鏁版嵁</h4>
+ <el-card class="table-page" v-show="!isNoData">
+
<el-table
v-loading="loading"
:data="displayData"
style="width: 100%"
- height="400"
+ :row-class-name="tableRowClassName"
+ stripe
+ border
+ :height=tableHeight
>
<el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340">
<template #default="{ row }">
@@ -313,6 +280,7 @@
</el-table>
<el-pagination
+ ref="h4"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -320,15 +288,15 @@
:page-size="pageSize"
layout="total,prev, pager, next, jumper"
/>
- </div>
-
+ </el-card>
+ <el-empty v-show="isNoData" :image-size="200" />
<!-- 瀵硅瘽妗� -->
- <div style="width: 600px;">
- <el-dialog v-model="centerDialogVisible" title="Warning" align-center>
- <template #header="{ titleId, titleClass }">
- <div :id="titleId" :class="titleClass" style="font-size: 17px">
+ <div>
+ <el-dialog v-model="centerDialogVisible" draggable align-center>
+ <template #header>
+ <div style="font-size: 17px">
搴楅摵鍚嶏細{{ rowShopName }}
- <span style="margin-left: 40px">寮傚父绫诲瀷锛�</span>
+ <di style="margin-left: 40px">寮傚父绫诲瀷锛�</di>
<span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
<span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
<span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
@@ -337,96 +305,106 @@
{{ rowEndTime }}
</div>
</div>
+ <div class="dialog-button-position">
+ <el-button
+ type="danger"
+ :disabled="isPreCantouch"
+ @click="getPreviousRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="danger"
+ :disabled="isNextCantouch"
+ @click="getNextRowData"
+ >涓嬫潯寮傚父</el-button
+ >
+ </div>
</template>
- <el-button
- type="danger"
- :disabled="isPreCantouch"
- @click="getPreviousRowData"
- >涓婁竴鏉�</el-button
- >
- <el-button
- type="danger"
- :disabled="isNextCantouch"
- @click="getNextRowData"
- >涓嬩竴鏉�</el-button
- >
<!-- 瓒呮爣鏁版嵁鏃� -->
<!-- 鎶樼嚎鍥� -->
<div
ref="chart"
style="
- width: 800px;
+ width: 100%;
height: 300px;
+ /* min-width: 100px; */
margin-bottom: 20px;
margin-left: 10px;
+ min-width: 350px;
"
></div>
<!-- v-show="!isAbnormal" -->
<!-- 琛ㄦ牸 -->
- <div style="margin-top: 40px;margin-bottom: 5px; border: 1px solid #000000">
+
+ <!-- -->
+ <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
<el-table
:data="exceedingData"
height="360"
border
- style="width: 100%; margin-top: 25px"
+ style="margin-top: 25px"
>
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" />
- <el-table-column
-
- prop="mvStatCode"
- label="璁惧缂栧彿"
- width="240"
- />
-
- <el-table-column prop="mvDataTime" label="鎶ヨ鏃堕棿" width="220" />
+ <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" />
+ <el-table-column prop="mvStatCode" label="璁惧缂栧彿" />
+
+ <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿" />
<el-table-column
prop="mvFumeConcentration2"
label="娌圭儫娴撳害(mg/m鲁)"
- width="150"
/>
</el-table>
</div>
- <el-tag
- type="success"
- class="mx-1"
- effect="dark"
- round
- ><span class="table-line-lable">琛ㄦ牸琛屾暟锛� </span> <span class="table-line-num" >{{exceptionTotal }}</span></el-tag
- >
+ <el-tag type="success" class="mx-1" effect="dark" round
+ ><span class="table-line-lable">寮傚父璁板綍锛� </span>
+ <span class="table-line-num">{{ exceptionTotal }}鏉�</span>
+ <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
+ (閫昏緫璁＄畻)</span
+ >
+ </el-tag>
+ <!-- <el-tag type="success" class="mx-1" effect="dark" round v-show="rowExceptionType === '1'"
+ ><span class="table-line-lable">琛ㄦ牸琛屾暟锛� </span>
+ <span class="table-line-num">{{ exceptionTotal }}</span></el-tag> -->
</el-dialog>
</div>
</div>
</template>
<script>
-import ExceptionButton from '../sfc/ExceptionButton.vue';
+
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
-
-// import axios from 'axios';
+import ExceptionText from '../sfc/ExceptionText.vue';
import * as echarts from 'echarts';
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
-import axiosInstance from '../utils/request.js';
+import axiosInstanceInstance from '../utils/request.js';
const ShopNameAndID = defineAsyncComponent(() =>
import('../sfc/../sfc/ShopNameAndID.vue')
);
export default {
+
name: 'TablePage',
components: {
- ExceptionButton,
ExceptionType,
TimeSelect,
- ShopNameAndID
+ ShopNameAndID,
+ ExceptionText
},
data() {
return {
+
+ // table鍏冪礌
+ tableRef:null,
+ // 寮傚父琛ㄦ牸鏁版嵁
+ tableHeight:300,
+ // 绌烘暟鎹姸鎬�
+ isNoData: false,
// 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
- exceptionTotal:0,
+ exceptionTotal: 0,
// 鏃犳暟鎹椂鐨勬椂闂存暟缁勶紝鍏冪礌鐩稿樊10鍒嗛挓
// abnormalTimeTenMinute: [],
// 搴楅摵鎬绘暟
@@ -576,7 +554,43 @@
this.getShopNames();
}
},
+
+ mounted() {
+
+ // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
+ this.getDeviceInfo();
+
+ // 灞曠ず鏈�杩�7澶╂暟鎹�
+ this.getRecentSevenDays();
+
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
+ this.getShopNames();
+ window.addEventListener('resize', this.updateChart);
+ // this.tableHeight = this.calcTableHeight()
+
+ },
methods: {
+ // calcTableHeight() {
+ // const h1 = this.$refs.h1.offsetHeight;
+ // const h2 = this.$refs.h2.offsetHeight;
+ // const h3 = this.$refs.h3.$el.offsetHeight;
+ // const h4 = this.$refs.h4.$el.offsetHeight;
+ // // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
+ // return `calc(100vh - ${h1}px - ${h2}px- ${h3}px - ${h4}px - 60px - var(--el-main-padding) * 2)`;
+ // },
+
+ warn() {
+ alert('鐐瑰嚮浜�');
+ },
+ // 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
+ // 鍥惧舰鍝嶅簲寮忓彉鍖�
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ },
// 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
@@ -628,11 +642,11 @@
mvStatCode: this.rowMvStatCode,
diName: this.rowShopName,
mvDataTime: abnormalTimeTenMinute[i],
- mvFumeConcentration2: '绌烘暟鎹�'
+ mvFumeConcentration2: ''
});
}
// 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
- this.exceptionTotal = abnormalTimeTenMinute.length
+ this.exceptionTotal = abnormalTimeTenMinute.length;
},
// 鐐瑰嚮琛ㄦ牸鐨勮鏃�
selectTableRow(row) {
@@ -669,14 +683,14 @@
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
- axiosInstance
+ axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
this.chart = null;
this.drawChart();
- this.exceptionTotal = this.exceedingData.length
+ this.exceptionTotal = this.exceedingData.length;
});
}
//琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
@@ -716,7 +730,7 @@
if (this.drawerData.endTime) {
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
- axiosInstance
+ axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
@@ -725,7 +739,7 @@
console.log(this.exceedingData);
this.chart = null;
this.drawChart();
- this.exceptionTotal = this.exceedingData.length
+ this.exceptionTotal = this.exceedingData.length;
});
}
//琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
@@ -765,17 +779,19 @@
if (this.drawerData.endTime) {
params['endTime'] = this.drawerData.endTime;
}
- axiosInstance.get('/fume/exceed', { params: params }).then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.exceedingData = response.data.data;
- this.loadingDrawer = !this.loadingDrawer;
- // this.total = this.exceedingData.length;
- // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
- console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
- console.log(this.exceedingData);
- this.drawChart();
- this.exceptionTotal = this.exceedingData.length
- });
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ this.loadingDrawer = !this.loadingDrawer;
+ // this.total = this.exceedingData.length;
+ // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
+ console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
+ console.log(this.exceedingData);
+ this.drawChart();
+ this.exceptionTotal = this.exceedingData.length;
+ });
},
// 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
@@ -802,15 +818,22 @@
params['endTime'] = this.endTime;
}
this.loading = true;
- axiosInstance
+ axiosInstanceInstance
.get('/fume/abnormalthree', { params: params })
.then((response) => {
this.abnormalData = response.data.data;
this.total = this.abnormalData.length;
+ this.loading = false;
+ if (response.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false;
this.handleCurrentChange(1);
console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
console.log('闀垮害', response.data.data.total);
- this.loading = false;
});
},
handleSizeChange(val) {
@@ -849,10 +872,10 @@
// 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥�
linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
- this.chart = echarts.init(this.$refs.chart, null, {
- width: 800,
- height: 300
- });
+ this.chart = echarts.init(this.$refs.chart);
+ // $('#ModalGrade').on('shown.bs.modal', function(){
+ // this.chart.resize()
+ // })
this.chart.setOption({
title: {
// text: '娌圭儫瓒呮爣鏁版嵁',
@@ -875,7 +898,7 @@
// 鍖哄煙缂╂斁
yAxisIndex: 'none'
},
-
+
// 淇濆瓨涓哄浘鐗�
saveAsImage: {}
}
@@ -976,15 +999,15 @@
endTime: after40MinEnd
};
// 璇锋眰鍓嶅崐娈�
- axiosInstance
- .get('http://localhost:8080/fume/history', { params: paramsBefore })
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
.then((result) => {
this.beforeData = result.data.data;
});
// 璇锋眰鍚庡崐娈�
- axiosInstance
- .get('http://localhost:8080/fume/history', { params: paramsAfter })
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
.then((result) => {
this.afterData = result.data.data;
});
@@ -1051,7 +1074,7 @@
// ----------------------------------------
}
// 娌圭儫娴撳害瓒呮爣鏃剁殑鎶樼嚎鍥�
- else {
+ else {
// // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
// this.abnormalTimeTenMinute = []
this.isAbnormal = false;
@@ -1065,119 +1088,209 @@
// 瓒呮爣娌圭儫娴撳害
fumeExceeding.push(item.mvFumeConcentration2);
});
- // 瀛樻斁璇ユ椂闂存姣忛殧鍗佸垎閽熶竴娆＄殑鏃堕棿鐐�
- const xAxisData = [];
- const xAxisData1 = [];
+ // // 瀛樻斁璇ユ椂闂存姣忛殧鍗佸垎閽熶竴娆＄殑鏃堕棿鐐�
+ // const xAxisData = [];
+ // const xAxisData1 = [];
let beginTime = new Date(dateList[0]);
const endTime = new Date(dateList[dateList.length - 1]);
- // console.log(beginTime,endTime);
- while (beginTime <= endTime) {
- xAxisData.push(beginTime);
- // 澧炲姞10鍒嗛挓
- beginTime = new Date(beginTime.getTime() + 10 * 60 * 1000);
- }
- // console.log(xAxisData);
- // 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮忕殑瀛楃涓�
- xAxisData.forEach((item, index) => {
- // 鑾峰彇鍒嗛挓鏁�
- let M = item.getMinutes();
- // 濡傛灉鍒嗛挓灏忎簬10,鍒欏湪鍓嶉潰鍔�0琛ュ厖涓轰袱浣嶆暟瀛�
- M = M > 9 ? M : '0' + M;
- xAxisData1[index] =
- item.getFullYear() +
- '-' +
- (item.getMonth() + 1) +
- '-' +
- item.getDate() +
- ' ' +
- item.getHours() +
- ':' +
- M +
- ':0' +
- item.getSeconds();
- });
- console.log(xAxisData1);
- this.chart = echarts.init(this.$refs.chart);
- this.chart.setOption({
- title: {
- // text: '娌圭儫瓒呮爣鏁版嵁',
- // left: 'center'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
+
+ // 寰�鍓�30鍒嗛挓
+ const before30MinBegin = dayjs(beginTime)
+ .subtract(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ const before10MinBegin = dayjs(beginTime)
+ .subtract(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+
+ // 寰�鍚�40鍒嗛挓
+ const after30MinEnd = dayjs(endTime)
+ .add(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ const after10MinEnd = dayjs(endTime)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ console.log('鍓嶅悗鏃堕棿涓�', before30MinBegin, after30MinEnd);
+ let paramsBefore = {
+ devId: this.displayData[this.selectedRowIndex].devId,
+ beginTime: before30MinBegin,
+ endTime: before10MinBegin
+ };
+ let paramsAfter = {
+ devId: this.displayData[this.selectedRowIndex].devId,
+ beginTime: after10MinEnd,
+ endTime: after30MinEnd
+ };
+ // 璇锋眰鍓嶅崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
+ .then((result) => {
+ this.beforeData = result.data.data;
+ });
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result) => {
+ this.afterData = result.data.data;
+ });
+
+ setTimeout(() => {
+ console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData);
+ this.allExceptionTimeData = [
+ ...this.beforeData,
+ ...this.exceedingData,
+ ...this.afterData
+ ];
+ // x杞存棩鏈熸椂闂�
+ let dateList1 = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding1 = [];
+ console.log('鎵�鏈夋暟鎹暱搴�', this.allExceptionTimeData.length);
+ console.log('鎵�鏈夋暟鎹�', this.allExceptionTimeData);
+ for (let i = 0; i < this.allExceptionTimeData.length; i++) {
+ if (this.allExceptionTimeData[i] == null) {
+ //x杞存棩鏈�
+ //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
+ dateList1.push(
+ dayjs(dateList1[dateList1.length - 1])
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss')
+ );
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding1.push(null);
+ } else {
+ //x杞存棩鏈�
+ dateList1.push(this.allExceptionTimeData[i].mvDataTime);
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding1.push(
+ this.allExceptionTimeData[i].mvFumeConcentration2
+ );
}
- },
- xAxis: {
- // type: 'time',
- // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
- data: xAxisData1,
- name: '鏃堕棿'
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- // formatter:'{value} %'
+ }
+
+ // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ var startIndex = dateList1.findIndex((item) => item === dateList[0]);
+ var endIndex = dateList1.findIndex(
+ (item) => item === dateList[dateList.length - 1]
+ );
+
+ this.chart = echarts.init(this.$refs.chart);
+ this.chart.setOption({
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
},
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '娌圭儫瓒呮爣鏁版嵁',
- type: 'line',
- data: fumeExceeding,
- markLine: {
- itemStyle: {
- // 鍩虹嚎鍏叡鏍峰紡
- normal: {
- lineStyle: {
- // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎
- type: 'dashed'
- },
- label: {
- show: true,
- position: 'end',
- formatter: '{b}{c}'
- }
- }
+ tooltip: {},
+ // legend: {
+ // data: ['娌圭儫瓒呮爣鏁版嵁']
+ // },
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
},
- data: [
- {
- name: '棰勮',
- type: 'average',
- yAxis: 1,
- lineStyle: {
- color: '#ff0000'
- }
- }
- ]
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
}
- }
- ]
- });
+ },
+ xAxis: {
+ // type: 'time',
+ // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
+ data: dateList1,
+ name: '鏃堕棿'
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto'
+ // formatter:'{value} %'
+ },
+ name: 'mg/m鲁'
+ },
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: startIndex,
+ color: 'green'
+ },
+ {
+ gt: startIndex,
+ lte: endIndex,
+ color: 'red'
+ },
+ {
+ gt: endIndex,
+ lte: dateList1.length - 1,
+ color: 'green'
+ }
+ ]
+ },
+ series: [
+ {
+ name: '娌圭儫瓒呮爣鏁版嵁',
+ type: 'line',
+ data: fumeExceeding1,
+
+ // markArea: {
+ // itemStyle: {
+ // color: 'rgba(255, 173, 177, 0.4)'
+ // },
+ // data: [
+ // [
+ // {
+ // name: '娴撳害瓒呮爣',
+ // xAxis: dateList[0]
+ // },
+ // {
+ // xAxis: dateList[dateList.length - 1]
+ // }
+ // ]
+ // ]
+ // },
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ // show:false,
+ // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '棰勮',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ]
+ });
+ }, 500);
}
},
getDeviceInfo() {
// 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
- axiosInstance.get('/fume/device').then((result) => {
+ axiosInstanceInstance.get('/fume/device').then((result) => {
this.deviceInfo = result.data.data;
// 鑾峰彇鍒版�荤殑搴楅摵鏁伴噺
this.shopsTotal = result.data.data.length;
@@ -1226,20 +1339,28 @@
// 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
XLSX.writeFile(wb, '鍒嗘瀽鏁版嵁.xlsx');
},
+
// 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
getAllData() {
+ this.isNoData = false;
this.loading = true;
- axiosInstance.get('/fume/abnormal').then((result) => {
+ axiosInstanceInstance.get('/fume/abnormal').then((result) => {
this.abnormalData = result.data.data;
+ this.loading = false;
this.total = this.abnormalData.length;
+ if (result.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ this.isNoData = false;
// 榛樿鏄剧ず绗竴椤�
this.handleCurrentChange(1);
- this.loading = false;
});
// 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
setTimeout(() => {
- axiosInstance.get('/fume/time').then((result) => {
+ axiosInstanceInstance.get('/fume/time').then((result) => {
this.beginTime = result.data.data[0].beginTime;
this.endTime = result.data.data[0].endTime;
// console.log('be,end',this.beginTime,this.endTime);
@@ -1257,7 +1378,7 @@
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙�
// 姣斿娌圭儫瓒呮爣瀵瑰簲鐨勬墍鏈夊簵閾哄悕绉板拰璁惧缂栧彿锛堝凡鍘婚櫎閲嶅鐨勫簵閾哄悕锛�
getShopNames() {
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '0',
@@ -1270,7 +1391,7 @@
console.log('寮傚父0', this.exception0);
console.log('寮傚父0鏁伴噺', this.exception0.length);
});
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '1',
@@ -1281,7 +1402,7 @@
.then((result) => {
this.exception1 = result.data.data;
});
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '2',
@@ -1293,6 +1414,7 @@
this.exception2 = result.data.data;
});
},
+
// 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁
getRecentSevenDays() {
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
@@ -1309,9 +1431,13 @@
let params = {};
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
- axiosInstance
+ axiosInstanceInstance
.get('/fume/abnormalone', { params: params })
.then((response) => {
+ if (response.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ return;
+ }
// 淇濆瓨杩斿洖鐨�
this.abnormalData = response.data.data;
// 鍒嗛〉
@@ -1322,31 +1448,24 @@
});
}
},
- mounted() {
- // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
- this.getDeviceInfo();
-
- // 灞曠ず鏈�杩�7澶╂暟鎹�
- this.getRecentSevenDays();
-
- // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
- this.getShopNames();
- }
+
};
</script>
<style scoped>
-/* .exception-container {
- margin: 20px;
- padding: 10px;
- border: 1px;
- height: 815px;
-} */
+
.exception-root-container {
- margin: 20px;
- padding: 10px;
+ margin: 20px;
+ padding: 10px;
border: 1px;
- height: 815px;
+ height: 615px;
+ /* min-height: 80vh;
+ min-width: 100vh; */
+}
+.header-container {
+ display: flex;
+ /* flex-wrap: wrap;
+ align-items: center; */
}
.ellipsis {
white-space: nowrap;
@@ -1367,18 +1486,6 @@
.card-header {
margin: 0;
}
-
-/* .el-pagination {
- position: fixed;
- bottom: 0;
- left: 50;
- right: 50;
- height: 60px;
- line-height: 60px;
- background-color: #f2f2f2;
- text-align: right;
- padding-right: 20px;
-} */
body {
margin: 0;
@@ -1409,31 +1516,45 @@
}
.collapse-header {
font-size: 18px;
- color: burlywood;
}
.collapse-header-text {
- margin-left: 60px;
- font-size: 16px;
- color: blue;
+ /* margin-right: 150px; */
+ margin-top: 5px;
+ font-size: 14px;
+ color: gray;
}
-/* .el-dialog {
- height: 70%;
-} */
.box-card-label {
- font-size: 17px;
+ font-size: 14px;
+ white-space: nowrap;
+ overflow-x: auto;
+}
+:deep().el-card {
+ border-radius: 9px;
+
}
/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
:deep().el-dialog {
height: 98%;
/* 涓嶅嚭鐜版粴鍔ㄦ潯 */
- overflow-y: hidden
+ overflow-y: hidden;
+ border-radius: 9px;
}
-
+:deep().table-page .el-card__body {
+ padding: 0px;
+}
+.table-text {
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+.text-blank {
+ margin-left: 10px;
+}
/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
.describe-info {
margin-top: 5px;
font-weight: bold;
+ white-space: nowrap;
}
/* 鏃堕棿閫夋嫨鏂囨湰 */
.describe-time-text {
@@ -1442,15 +1563,7 @@
font-weight: bold;
}
-/* 寮傚父鍒嗘瀽鎸夐挳瀹瑰櫒 */
-/* .box-card-butcontainer {
- display: flex;
- direction: column;
- width: 68.5%;
-} */
-.table-line-lable{
- /* color: black; */
-}
+
/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
.table-line-num {
font-weight: bold;
@@ -1459,11 +1572,35 @@
.button_info.el-button_inner {
text-align: left;
}
+:deep().el-collapse .el-collapse-item__content{
+ padding-bottom: 0px;
+}
.box-card {
- height: 205px;
+ height: 190px;
+}
+:deep().box-card .el-card__body {
+ padding: 5px;
+}
+.sub-box-card {
+ height: 100px;
+ overflow-y: auto;
+ border: 0px;
+}
+:deep().sub-box-card .el-card__body {
+ padding: 0px;
}
.mx-1 {
margin-bottom: 0px;
}
-
+.dialog-button-position {
+ display: flex;
+ justify-content: right;
+ margin-bottom: 10px;
+}
+.el-table .warning-row {
+ --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+.el-table .success-row {
+ --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
</style>
diff --git a/src/views/HistoryFume.vue b/src/views/HistoryFume.vue
index 4396b51..1d24f06 100644
--- a/src/views/HistoryFume.vue
+++ b/src/views/HistoryFume.vue
@@ -2,7 +2,7 @@
<script >
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
-import axiosInstance from '../utils/request.js'
+import axiosInstanceInstance from '../utils/request.js'
import TimeSelect from '../sfc/TimeSelect.vue';
// import ShopNameAndID from '../sfc/TimeSelect.vue';
@@ -23,6 +23,8 @@
},
data() {
return {
+ // 绌虹姸鎬�
+ isNoData:false,
// 涓嬫媺妗嗕竴寮�濮嬪睍绀虹殑鍚嶅瓧
beginShowShopName:[],
options: {},
@@ -256,8 +258,7 @@
beforeRouteUpdate(to, from, next) {
if (to.name === this.$route.name) {
- this.backMinuteDataAWeekAgo();
-
+ this.backMinuteDataAWeekAgo();
}
next();
},
@@ -401,7 +402,7 @@
},
// 杩斿洖鍓嶄竴鍛ㄥ垎閽熸暟鎹〃鏁版嵁
backMinuteDataAWeekAgo() {
-
+
// 鎵撳紑椤甸潰鍔犺浇鏈�杩戜竴鍛ㄧ殑鏁版嵁
this.loading = true;
@@ -412,7 +413,9 @@
// 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂�
// this.beginTime = dayjs().subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss');
// this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
-
+ // 灏嗘椂闂村悓姝ョ粰瀵煎嚭鏃堕棿
+ this.exportBeginTime =this.beginTime
+ this.exportEndTime = this.endTime
console.log(this.currentDateTime, this.oneWeekAgoDateTime);
@@ -421,9 +424,14 @@
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
- axiosInstance
+ axiosInstanceInstance
.get('/fume/history', { params: params })
.then((response) => {
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
// 淇濆瓨杩斿洖鐨�
this.exceedingData = response.data.data;
// 鍒嗛〉
@@ -443,6 +451,9 @@
alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
return;
}
+ // 灏嗘椂闂村悓姝ョ粰瀵煎嚭鏃堕棿
+ this.exportBeginTime =this.beginTime
+ this.exportEndTime = this.endTime
let params = {};
if (this.devId[1]) {
params['devId'] = this.devId[1];
@@ -453,11 +464,22 @@
if (this.endTime) {
params['endTime'] = this.endTime;
}
- axiosInstance
+ this.loading=true
+ axiosInstanceInstance
.get('/fume/history', { params: params })
.then((response) => {
+
// 淇濆瓨杩斿洖鐨�
this.exceedingData = response.data.data;
+ this.loading=false
+
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
// this.displayData = response.data.data //琛ㄦ牸娓叉煋
// 鍒嗛〉
this.total = this.exceedingData.length;
@@ -497,7 +519,7 @@
params['exportEndTime'] = this.exportEndTime;
}
- axiosInstance.get('/fume/export', { params: params }).then((result) => {
+ axiosInstanceInstance.get('/fume/export', { params: params }).then((result) => {
this.exportData = result.data.data;
console.log(this.exportData);
});
@@ -524,7 +546,7 @@
// 缂栬緫琛ㄥご琛� 淇敼琛ㄥご
xls['A1'].v = '璁惧缂栧彿';
xls['B1'].v = '搴楅摵鍚嶇О';
- xls['C1'].v = '鎶ヨ鏃堕棿';
+ xls['C1'].v = '閲囬泦鏃堕棿';
xls['D1'].v = '椋庢満鐢垫祦(A)';
xls['E1'].v = '鍑�鍖栧櫒鐢垫祦(A)';
xls['F1'].v = '娌圭儫娴撳害(mg/m鲁)';
@@ -691,12 +713,12 @@
</div>
- <div v-show="!isSwitch" class="chart-container">
+ <div v-show="!isSwitch && !isNoData" v-loading="loading" class="chart-container">
<lineChart :chartData="options"></lineChart>
</div>
<!-- 琛ㄦ牸鏁版嵁 -->
- <div v-show="isSwitch" class="container">
+ <div v-show="isSwitch && !isNoData" v-loading="loading" class="container">
<el-table :data="displayData" style="width: 100%; margin-top: 25px" height="500px" table-layout="auto">
<el-table-column fixed prop="mvStatCode" label="璁惧缂栧彿">
<template #default="{ row }">
@@ -713,7 +735,7 @@
</template>
</el-table-column>
- <el-table-column prop="mvDataTime" label="閲囨牱鏃堕棿">
+ <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿">
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.mvDataTime">
<div class="cell ellipsis">{{ row.mvDataTime }}</div>
@@ -747,6 +769,7 @@
<!-- layout="total, sizes, prev, pager, next, jumper" -->
</div>
+ <el-empty v-show="isNoData" :image-size="200" />
</div>
</template>
@@ -804,6 +827,9 @@
flex-direction: column;
height: 100vh;
}
+:deep().el-dialog {
+ border-radius: 9px;
+}
@media screen and (max-width: 768px) {
/* 鍦ㄥ皬灞忓箷涓婂簲鐢ㄧ殑鏍峰紡 */
}
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 4bd8f60..3a608c3 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -1,90 +1,219 @@
<!-- 瀹炴椂鐩戞祴 -->
<script>
-import axiosInstance from '../utils/request.js';
+import axiosInstanceInstance from '../utils/request.js';
// 寮傛缁勪欢
const DashBoard = defineAsyncComponent(() =>
import('../sfc/DashboardChart.vue')
-)
+);
export default {
- components:{
+ components: {
DashBoard
},
data() {
return {
+ totalData: [],
+ // 淇濆瓨璁剧疆
+ save: false,
// 榛樿鎵撳紑鐨勬姌鍙犻潰鏉�
- activeNames:'1',
- // isShow:false,
- // 瑕佸睍绀虹殑浠〃鐩樻暟閲�
- // totalCharts: 0,
- // 瀹炴椂鏇存柊闂撮殧 3绉�
- timeInterval:60000,
+ 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:[],
+ getData: [],
// 閫変腑鐨勫簵閾哄搴斿叏閮ㄥ瓧娈典俊鎭�
- inFumeValue:[],
- // 搴楅摵鍚嶅瓧
+ 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() {
- // 鑾峰彇澶栭儴璁惧鐨勫簵閾哄悕绉�
- axiosInstance.get('/fume/device').then((result) => {
+ // 鑾峰彇鎵�鏈夊閮ㄨ澶囩殑搴楅摵鍚嶇О
+ 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;
+ }
});
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
- axiosInstance
+ axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
params: { page: 1, per_page: 20 }
})
.then((result) => {
// 淇濆瓨鍐呴儴鎺ュ彛鑾峰彇鐨勬墍鏈変俊鎭�
- this.getData = result.data.data
+ 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.shopnames : [];
+ this.outside.checkedShops = val ? this.outside.displayedShopnames : [];
this.outside.isIndeterminate = false;
},
handleCheckedCitiesChangOutside(value) {
const checkedCount = value.length;
- this.outside.checkAll = checkedCount === this.outside.shopnames.length;
+ this.outside.checkAll =
+ checkedCount === this.outside.displayedShopnames.length;
this.outside.isIndeterminate =
- checkedCount > 0 && checkedCount < this.outside.shopnames.length;
+ checkedCount > 0 &&
+ checkedCount < this.outside.displayedShopnames.length;
},
// 鍐呴儴璁惧鍏ㄩ��
@@ -100,76 +229,86 @@
},
// 鍒ゆ柇涓�涓暟缁勬槸鍚﹀寘鍚鍏冪礌
- hasElement(array, element) {
+ hasElement(array, element) {
return array.includes(element);
},
-
//鏍规嵁鎵�閫夊簵閾烘眰璇峰苟娓叉煋浠〃鐩�
request() {
- if(this.outside.checkedShops.length!=0){
+ // 澶栭儴璁惧
+ if (this.outside.checkedShops.length != 0) {
let temp = this.outside.checkedShops.join();
let params = {};
if (this.outside.checkedShops.length != 0) {
params['shops'] = temp;
}
- axiosInstance.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();
- });
+ 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){
+ if (this.inner.checkedShops.length != 0) {
// 娓呯┖鏁版嵁
- this.inner.inFumeValue=[]
- this.getData.forEach(item=>{
- let itemOne = item.siteName
+ this.inner.inFumeValue = [];
+ this.getData.forEach((item) => {
+ let itemOne = item.siteName;
// 鎷垮埌閫変腑鐨勫簵閾哄搴旂殑娴撳害鍊�
- if(this.hasElement(this.inner.checkedShops,itemOne)){
- this.inner.inFumeValue.push(item)
+ if (this.hasElement(this.inner.checkedShops, itemOne)) {
+ this.inner.inFumeValue.push(item);
}
- })
+ });
console.log(this.inner.inFumeValue);
}
+
+ // 鍚堝苟
+ setTimeout(() => {
+ // 璇曠偣璁惧鎺掑湪鍓嶉潰
+ this.totalData = [
+ ...this.inner.inFumeValue,
+ ...this.outside.realTimeData
+ ];
+ console.log('鎬婚�夋暟鎹�', this.totalData);
+ console.log('闀垮害涓猴細', this.totalData.length);
+ }, 200);
console.log('璋冪敤浜�');
},
// 鐐瑰嚮鎸夐挳瑙﹀彂
show() {
// 褰撳彇娑堥�夋嫨鏃讹紝闃叉鍥惧舰杩樹繚鐣欏湪椤甸潰銆�
- if(this.outside.checkedShops.length==0){
- this.outside.realTimeData = []
+ if (this.outside.checkedShops.length == 0) {
+ this.outside.realTimeData = [];
}
- if(this.inner.checkedShops.length == 0){
- this.inner.inFumeValue = []
+ 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;
}
},
mounted() {
// 鑾峰彇鎵�鏈夊簵閾哄悕瀛�
this.getDeviceInfo();
+ // 浼樺厛灞曠ず娴忚鍣ㄧ紦瀛樹腑鐨�
+ // this.getOutsideData()
}
-}
+};
</script>
-
<template>
-
<div>
- <el-collapse v-model="activeNames" >
- <el-collapse-item name="1">
+ <el-collapse v-model="activeNames">
+ <el-collapse-item name="1">
<template #title>
<el-tooltip
class="box-item"
@@ -177,144 +316,225 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <h2>閫夋嫨鏌愪釜璁惧鐨勫疄鏃舵暟鎹細</h2>
+ <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.shopnames"
- :key="shop"
- :label="shop"
- >{{ shop }}
- </el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- <el-form-item>
- <div>宸查�夋嫨澶栭儴璁惧鏁伴噺涓猴細{{outside.checkedShops.length}}</div>
- </el-form-item>
+ <el-card shadow="always" class="form-card">
+ <h1>鐩戞祴鐐归厤缃�</h1>
+ <br />
+ <el-form label-width="120px">
+ <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>
- <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.shopnames" :key="shop" :label="shop"
- >{{ shop }}
- </el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- <el-form-item>
- <div>宸查�夋嫨鍐呴儴璁惧鏁伴噺涓猴細{{inner.checkedShops.length}}</div>
- </el-form-item>
- <el-form-item >
-
- <div class="time-interval">
- 瀹炴椂鏇存柊闂撮殧涓猴細{{timeInterval/1000}}绉�
- </div>
-
- </el-form-item>
- </el-form>
- </el-card>
-</el-collapse-item>
- </el-collapse>
+ <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>
+ <br />
+ <hr />
+ <br />
+
+ <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>
+ <!-- <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"> 灞曠ず </el-button>
- </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>
+ <el-switch
+ v-model="save"
+ class="save-switch"
+ active-text="淇濆瓨璁剧疆"
+ inactive-text="涓嶄繚瀛樿缃�"
+ >
+ </el-switch>
</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> -->
-<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">鍐呴儴璁惧锛�</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>
+ <el-row :gutter="20">
+ <el-col
+ :span="6"
+ v-for="(device, index) in totalData"
+ :key="device.mvStatCode"
+ >
+ <!-- 鍐呴儴璁惧 -->
+ <el-card v-if="index < inner.inFumeValue.length" height="1900px">
+ <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>
+ <br />
+ <br />
+ <br />
+ </el-card>
+ <!-- 澶栭儴璁惧 -->
+ <el-card v-else>
+ <template #header>
+ <div class="card-header">
+ {{ device.diName }}
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ content="鍏朵粬璁惧"
+ placement="top-start"
+ >
+ <i-ep-Shop></i-ep-Shop>
+ </el-tooltip>
+ <span> </span>
+ </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>
+ </el-card>
+ </el-col>
+ </el-row>
+ </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: 1px solid #ebeef5;
border-radius: 4px;
+
}
.inner-checkbox-group {
margin-left: 15px;
}
.el-card {
margin-bottom: 10px;
+ border-radius: 9px;
}
.card-header {
// display: flex;
@@ -322,7 +542,15 @@
// position: center;
text-align: center;
}
+.card-header-item {
+ display: flex;
+ text-align: right;
+}
+
.outside-leble {
+ margin-top: 10px;
+}
+.inner-leble {
margin-top: 10px;
}
// 鍒嗗壊绾�
@@ -331,6 +559,9 @@
}
.el-dialog {
width: 700px;
+}
+.dashBorder-area {
+ margin-left: 10px;
}
.dashboard {
margin-bottom: 20px;
@@ -342,10 +573,6 @@
text-align: center;
padding: 10px 0;
background-color: #f5f7fa;
-}
-
-.echarts {
- height: 300px;
}
/* 瓒呮爣 鏂囧瓧鏁堟灉*/
@@ -379,6 +606,23 @@
}
// 鍒嗗壊绾夸笂涓嬭窛绂�
.divider-margin {
- margin: 3px 0px ;
+ margin-top: 3px;
+}
+
+.el-input {
+ width: calc(100% / 6);
+ // margin-left: 70px;
+}
+// .input-search {
+// display: flex;
+// justify-content: left;
+// }
+.save-switch {
+ margin-top: 20px;
+ margin-left: 20px;
+}
+:deep() .el-card_body {
+ padding: 0px;
+ margin: 0px;
}
</style>
diff --git a/src/views/LoginInterface.vue b/src/views/LoginInterface.vue
index 0ddaec7..d1636c3 100644
--- a/src/views/LoginInterface.vue
+++ b/src/views/LoginInterface.vue
@@ -21,7 +21,9 @@
style="margin-left: 20px;"
></el-input>
</div>
+ <div >
<el-button type="primary" class="login-btn" @click="login">鐧诲綍</el-button>
+ </div>
</el-card>
</div>
</template>
@@ -52,7 +54,7 @@
<style scoped>
.login-container {
- background-image: url('../assets/bg1.png');
+ background-image: url('../assets/login.jpg');
/*鐢ㄤ簬涓轰竴涓厓绱犺缃竴涓垨鑰呭涓儗鏅浘鍍忋�� */
background-size: cover; /* 灏嗚儗鏅浘鍍忕瓑姣旂缉鏀惧埌瀹屽叏瑕嗙洊瀹瑰櫒锛岃儗鏅浘鍍忔湁鍙兘瓒呭嚭瀹瑰櫒銆�*/
background-position: center; /* 涓烘瘡涓�涓儗鏅浘鐗囪缃垵濮嬩綅缃�傝繖涓綅缃槸鐩稿浜庣敱 background-origin 瀹氫箟鐨勪綅缃浘灞傜殑 閿瓧 center锛岀敤鏉ュ眳涓儗鏅浘鐗囥��*/
@@ -101,8 +103,20 @@
}
.login-btn {
- width:40%;
- margin-left: 155px;
+ /* position: absolute;
+ width:calc(100% - 20px);
+ left: 40px;
+ margin-top: 30px;
+ display: flex; */
+ /* justify-content: center; */
+ /* margin-left: 155px; */
+ position: absolute;
+ left: 85px;
+ width: calc(100% - 150px);
+ padding: 6px;
+ text-align: center;
+ box-sizing: border-box;
+ margin-top: 30px;
}
.ab {
margin-top: 100px;
diff --git a/src/views/RealTimeShop.vue b/src/views/RealTimeShop.vue
index e69de29..c347a79 100644
--- a/src/views/RealTimeShop.vue
+++ b/src/views/RealTimeShop.vue
@@ -0,0 +1,22 @@
+<script >
+ export default {
+ data() {
+ return{
+
+ }
+ },
+ methods: {
+
+ }
+}
+</script>
+
+<template>
+ <div>
+
+ </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/analysis/DataShow.vue b/src/views/analysis/DataShow.vue
index 10dce8f..a70a23d 100644
--- a/src/views/analysis/DataShow.vue
+++ b/src/views/analysis/DataShow.vue
@@ -205,9 +205,9 @@
</template>
<script>
-import axios from 'axios';
+import axiosInstanceInstance from '../../utils/request.js'
import * as XLSX from 'xlsx/xlsx.mjs';
-// import { saveAs } from 'file-saver';
+
export default {
data() {
return {
@@ -274,13 +274,7 @@
},
mounted() {
- //鍙戦�佷竴閮ㄨ姹傦紝鑾峰彇鏁版嵁
- // axios.get('http://192.168.0.144:8080/web/findall',{params:{}}).then((result) => {
- // this.tableData = result.data.data;
- // //this.tableData=result.data.data.rows 褰撹闂�/tiaojian 鏃�
- // this.total = this.tableData.length;
- // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
- // });
+
// 榛樿鍔犺浇 鈥樼嫾鏉ヤ簡鈥欙紝 05-01鍒�05-15鏃堕棿娈�
this.handleSubmit()
@@ -331,8 +325,8 @@
params['end'] = this.form.end;
}
- axios
- .get('http://localhost:8080/web/form', {
+ axiosInstanceInstance
+ .get('/web/form', {
params: params
})
.then((response) => {
diff --git a/src/views/analysis/HomePage.vue b/src/views/analysis/HomePage.vue
index ba8ce9d..74738ed 100644
--- a/src/views/analysis/HomePage.vue
+++ b/src/views/analysis/HomePage.vue
@@ -1,16 +1,15 @@
<template>
- <div>
- <!-- <el-header> -->
- <el-card class="box-card">
- <el-form :inline="true" class="demo-form-inline">
-
- <el-radio disabled v-model="radio" label="閫変腑涓旂鐢�" style="margin-top: 15px;">寰愭眹鍖� 澶╄��妗� 鐢颁笂鍧�</el-radio>
- <el-form-item label="搴楅摵鍚�" class="form-lable">
- <el-input v-model="shopname" placeholder="搴楅摵鍚�"></el-input>
- </el-form-item>
+ <div class="page-header">
- <el-select v-model="value" placeholder="璇烽�夋嫨" >
+ <el-radio disabled v-model="radio" label="閫変腑涓旂鐢�" >寰愭眹鍖� 澶╄��妗� 鐢颁笂鍧�</el-radio>
+
+ <div class="page-label" >
+ <span class="shop-label">搴楅摵鍚�</span>
+ <div>
+ <el-input v-model="shopname" placeholder="搴楅摵鍚�"></el-input>
+ </div>
+ <el-select v-model="value" placeholder="璇烽�夋嫨" >
<el-option
v-for="item in options"
:key="item.value"
@@ -18,29 +17,34 @@
:value="item.value">
</el-option>
</el-select>
-
- <el-form-item label="寮�濮嬫棩鏈�" class="form-time-lable1">
+ </div>
+ <!-- <el-form-item label="寮�濮嬫棩鏈�" class="form-time-lable1"> -->
+ <div class="time-label">
+ <span>寮�濮嬫棩鏈� </span>
<el-date-picker
v-model="begin"
- type="date"
+ type="datetime"
placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
+ value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
- </el-form-item>
-
- <el-form-item label="缁撴潫鏃ユ湡" class="form-time-lable2">
+</div>
+<div class="time-label">
+ <!-- </el-form-item> -->
+ <span>缁撴潫鏃ユ湡 </span>
+ <!-- <el-form-item label="缁撴潫鏃ユ湡" class="form-time-lable2"> -->
<el-date-picker
v-model="end"
- type="date"
+ type="datetime"
placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
+ value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
- </el-form-item>
-
- <el-form-item>
+</div>
+ <!-- </el-form-item> -->
+</div>
+ <div style="display: flex; justify-content: right; margin-right: 160px;">
<el-button type="primary" @click="isRepeat">缁熻鍒嗘瀽</el-button>
<el-button type="primary" @click="toSql">鍏ュ簱绠＄悊</el-button>
- </el-form-item>
+</div>
<!-- <span style="margin-left: 200px; ">鍒嗘瀽鑰楁椂锛歿{gapT}}ms</span>
@@ -49,20 +53,20 @@
<el-divider direction="vertical"></el-divider>
<span>宸插啓鍏ユ暟鎹簱锛歿{isWrite}}</span> -->
<!-- <br/> -->
- <div>
- <span style="margin-left: 1400px; ">鍒嗘瀽鑰楁椂锛歿{gapT}}ms</span>
+ <div style="display: flex; justify-content: right; margin-right: 110px;">
+ <span >鍒嗘瀽鑰楁椂锛歿{gapT}}ms</span>
<el-divider direction="vertical"></el-divider>
<span>缁撴灉鏉℃暟锛歿{total}}</span>
<el-divider direction="vertical"></el-divider>
</div>
<br/>
- </el-form>
- </el-card>
+ <!-- </el-form> -->
+ <!-- </el-card> -->
<!-- </el-header> -->
<!-- <el-main> -->
- <div class="table">
- <el-table :data="displayData" border="" id="table" ref="table" height="650px" >
+ <div class="table" v-show="!isNoData">
+ <el-table :data="displayData" border="" id="table" ref="table" height="500px" v-loading="loading" >
<el-table-column type="index" label="搴忓彿" :index="indexMethod" v-if="showColumn.num"> </el-table-column> <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣-->
<el-table-column prop="fumeDevId" label="璁惧缂栧彿" v-if="showColumn.deviceid" fixed> </el-table-column>
<el-table-column prop="fumeDate" label="鏃ユ湡" v-if="showColumn.date"> </el-table-column>
@@ -151,17 +155,19 @@
</transition>
<!-- </el-main> -->
</div>
- </div>
-
+ <!-- </div> -->
+ <el-empty v-show="isNoData" :image-size="200" />
</template>
<script>
-import axios from 'axios'
+import axiosInstanceInstance from '../../utils/request.js'
export default {
data() {
return {
+ isNoData:false,
+ loading:false,
radio: '閫変腑涓旂鐢�',
gapT:0, //鍒嗘瀽鐨勮繃绋嬫柟娉曡�楁椂
isRepeated:0, //0 涓嶉噸澶� 1閲嶅
@@ -289,8 +295,6 @@
//鍒嗘瀽鏁版嵁
analysisData(){
-
-
let startTime=new Date().getTime();
let params = {}
if (this.shopname) {
@@ -306,10 +310,18 @@
params['end'] = this.end
}
-axios.get('http://localhost:8080/data/input',{params:params})
+ axiosInstanceInstance.get('/data/input',{params:params})
.then(response => {
this.afterAnalysis = response.data.data
+ this.loading = false
console.log('杩斿洖鐨勬暟鎹负',response.data.data);
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
this.total = this.afterAnalysis.length;
this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
@@ -322,6 +334,10 @@
//鏄惁閲嶅
isRepeat(){
+ if (this.begin > this.end) {
+ alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿');
+ return;
+ }
let params = {}
if (this.shopname) {
params['shopname'] = this.shopname;
@@ -332,7 +348,8 @@
if(this.end){
params['end'] = this.end
}
- axios.get('http://localhost:8080/data/search',{params:params})
+ this.loading=true
+ axiosInstanceInstance.get('/data/search',{params:params})
.then(response => {
this.isRepeated=response.data.data
console.log('璇锋眰',this.isRepeated);
@@ -358,7 +375,7 @@
console.log(item);
let jsonData=JSON.stringify(item)
console.log(jsonData);
- axios.post('http://localhost:8080/data/tosql',jsonData,{headers:{
+ axiosInstanceInstance.post('/data/tosql',jsonData,{headers:{
'Content-Type':'application/json'
}}).then((result)=>{
console.log(result);
@@ -431,7 +448,28 @@
/* 鍗＄墖 */
.box-card {
/* width: 1700px; */
- height: 150px;
+ height: 180px;
+}
+.el-radio {
+ margin-top: 15px;
+ margin-left: 5px;
+}
+.page-header {
+ display: flex;
+}
+.page-label {
+ display: flex;
+ margin-top: 15px;
+ margin-right: 3px;
+}
+.shop-label {
+ margin-top: 5px;
+}
+/* 鏃堕棿閫夋嫨 */
+.time-label {
+ margin-top: 15px;
+ margin-left: 20px;
+ white-space: nowrap;
}
/* 琛ㄦ牸 */
.table {
diff --git a/src/views/analysis/graph/AllRate.vue b/src/views/analysis/graph/AllRate.vue
index 7992bda..b1139a3 100644
--- a/src/views/analysis/graph/AllRate.vue
+++ b/src/views/analysis/graph/AllRate.vue
@@ -45,9 +45,11 @@
</el-form-item>
</el-form>
- <el-card>
- <div class="chart-container" ref="chart"></div>
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="lineChart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
</el-card>
+
</el-main>
</el-container>
</div>
@@ -56,10 +58,13 @@
<script>
import * as echarts from 'echarts'
-import axiosInstance from '../../../utils/request.js'
+import axiosInstanceInstance from '../../../utils/request.js'
export default {
data() {
return {
+ isNoData:false,
+ chart:null,
+ loading:false,
chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
//devId:'', //璁惧缂栧彿
begin:'2023-05-01', //寮�濮嬫椂闂�
@@ -192,6 +197,7 @@
mounted(){
// 榛樿鍔犺浇浠樺皬濮愬湪鎴愰兘 5鏈�1鍙峰埌15鍙风殑
this.fetchData()
+ window.addEventListener('resize',this.updateChart)
},
methods: {
@@ -215,10 +221,18 @@
if(this.end){
params['end'] = this.end
}
-
- axiosInstance.get('/data/id',{params:params})
+ this.loading = true
+ axiosInstanceInstance.get('/data/id',{params:params})
.then(response => {
this.chartData = response.data.data
+ this.loading = false
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
this.drawChart()
})
},
@@ -271,8 +285,8 @@
keyExceeding.push(item.keyExceedingRate.slice(0,-1))
})
- let chart = echarts.init(this.$refs.chart)
- chart.setOption({
+ this.chart = echarts.init(this.$refs.lineChart)
+ this.chart.setOption({
title: {
text: '姣旂巼',
//left: 'center'
@@ -394,12 +408,12 @@
type: 'line',
data: keyExceeding
},
-
-
-
]
})
+ },
+ updateChart(){
+ this.chart.resize()
}
}
}
@@ -407,12 +421,13 @@
<style scoped>
.el-card {
- margin-top: 40px;
+ margin-top: 50px;
+ width:90%;
+ border-radius: 9px;
}
.chart-container {
- width: 100%;
- height: 600px;
-
+ width:100%;
+ height: 540px;
}
.el-header {
background-color: #010408;
diff --git a/src/views/analysis/graph/DayAverage.vue b/src/views/analysis/graph/DayAverage.vue
index 3236b72..85135e3 100644
--- a/src/views/analysis/graph/DayAverage.vue
+++ b/src/views/analysis/graph/DayAverage.vue
@@ -52,8 +52,9 @@
</el-form-item>
</el-form>
- <el-card>
- <div class="chart-container" ref="chart"></div>
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="chart" v-show="!isNoData"></div >
+ <el-empty v-show="isNoData" :image-size="200" />
</el-card>
</el-main>
</el-container>
@@ -62,10 +63,12 @@
<script>
import * as echarts from 'echarts'
- import axiosInstance from '../../../utils/request.js'
+ import axiosInstanceInstance from '../../../utils/request.js'
export default {
data() {
return {
+ isNoData:false,
+ loading:false,
chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
//devId:'', //璁惧缂栧彿
begin:'2023-05-01', //寮�濮嬫椂闂�
@@ -218,10 +221,18 @@
if(this.end){
params['end'] = this.end
}
-
- axiosInstance.get('/data/id',{params:params})
+ this.loading=true
+ axiosInstanceInstance.get('/data/id',{params:params})
.then(response => {
this.chartData = response.data.data
+ this.loading=false
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
this.drawChart()
})
@@ -288,10 +299,11 @@
<style scoped>
.el-card {
margin-top: 40px;
+ border-radius: 9px;
}
.chart-container {
width: 100%;
- height: 600px;
+ height: 540px;
}
.el-header {
diff --git a/src/views/analysis/graph/DayData.vue b/src/views/analysis/graph/DayData.vue
index 80e9256..940909e 100644
--- a/src/views/analysis/graph/DayData.vue
+++ b/src/views/analysis/graph/DayData.vue
@@ -1,17 +1,15 @@
<template>
<div class="search-container">
<el-container>
- <!-- <el-header>
+ <!-- <el-header>
<el-header style="text-align:right; font-size:15px ">
<i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i>
<span style="color:rgb(226,207,207);">鏃ユ暟鎹�</span>
</el-header>
</el-header> -->
-
-
- <el-main>
- <el-form :inline="true" :model="form" class="demo-form-inline">
+ <el-main>
+ <el-form :inline="true" :model="form" class="demo-form-inline">
<!-- <el-form-item label="璁惧缂栧彿">
<el-select class="checkbox" v-model="devId" placeholder="璇烽�夋嫨璁惧缂栧彿">
<el-option
@@ -21,186 +19,223 @@
:value="item.label">
</el-option>
</el-select> -->
- <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
- <el-cascader
- :options="options"
- :show-all-levels="false"
- :props="{expandTrigger:'hover'}"
- placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
- v-model="value"
- style="margin-right:32px">
- </el-cascader>
- </el-form-item>
-
- <el-form-item label="寮�濮嬫棩鏈�">
- <el-date-picker
- v-model="begin"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item label="缁撴潫鏃ユ湡">
- <el-date-picker
- v-model="end"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="fetchData">灞曠ず鍥�</el-button>
- </el-form-item>
- </el-form>
+ <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
+ <el-cascader
+ :options="options"
+ :show-all-levels="false"
+ :props="{ expandTrigger: 'hover' }"
+ placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
+ v-model="value"
+ style="margin-right: 32px"
+ >
+ </el-cascader>
+ </el-form-item>
- <el-card>
- <div class="chart-container" ref="chart"></div>
- </el-card>
- </el-main>
- </el-container>
+ <el-form-item label="寮�濮嬫棩鏈�">
+ <el-date-picker
+ v-model="begin"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item label="缁撴潫鏃ユ湡">
+ <el-date-picker
+ v-model="end"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item>
+ <el-button type="primary" @click="fetchData">灞曠ず鍥�</el-button>
+ </el-form-item>
+ </el-form>
+
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="chart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
+ </el-card>
+ </el-main>
+ </el-container>
</div>
</template>
<script>
-import * as echarts from 'echarts'
-import axiosInstance from '../../../utils/request.js'
+import * as echarts from 'echarts';
+import axiosInstanceInstance from '../../../utils/request.js';
export default {
data() {
return {
- chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
- devId:'', //璁惧缂栧彿
- begin:'2023-05-01', //寮�濮嬫椂闂�
- end:'2023-05-15', //缁撴潫鏃堕棿
- value:['浠樺皬濮愬湪鎴愰兘','qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
- options: [{
+ isNoData:false,
+ loading: false,
+ chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
+ devId: '', //璁惧缂栧彿
+ begin: '2023-05-01', //寮�濮嬫椂闂�
+ end: '2023-05-15', //缁撴潫鏃堕棿
+ value: ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
+ options: [
+ {
value: '浠樺皬濮愬湪鎴愰兘',
label: '浠樺皬濮愬湪鎴愰兘',
- children: [{
- value: 'qinshi_31010320210010',
- label: 'qinshi_31010320210010',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320210010',
+ label: 'qinshi_31010320210010'
+ }
+ ]
},
{
value: '鍚夊埢鑱旂洘',
label: '鍚夊埢鑱旂洘 ',
- children: [{
- value: 'qinshi_31010320200006',
- label: 'qinshi_31010320200006',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200006',
+ label: 'qinshi_31010320200006'
+ }
+ ]
},
{
value: '瀹跺湪濉斿暒',
label: '瀹跺湪濉斿暒',
- children: [{
- value: 'hengzhiyuan_64480047347215',
- label: 'hengzhiyuan_64480047347215',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047347215',
+ label: 'hengzhiyuan_64480047347215'
+ }
+ ]
},
{
value: '鐙兼潵浜�',
label: '鐙兼潵浜� ',
- children: [{
- value: 'zhuoquan_31011020175012',
- label: 'zhuoquan_31011020175012',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175012',
+ label: 'zhuoquan_31011020175012'
+ }
+ ]
},
{
value: '涔愬嚡鎾掓槦娓稿簵',
label: '涔愬嚡鎾掓槦娓稿簵',
- children: [{
- value: 'qinshi_31010320200007',
- label: 'qinshi_31010320200007',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200007',
+ label: 'qinshi_31010320200007'
+ }
+ ]
},
{
value: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
label: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- children: [{
- value: 'hengzhiyuan_64480047078091',
- label: 'hengzhiyuan_64480047078091',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047078091',
+ label: 'hengzhiyuan_64480047078091'
+ }
+ ]
},
{
value: '妫掔害缈�',
label: '妫掔害缈�',
- children: [{
- value: 'qinshi_31010320190005',
- label: 'qinshi_31010320190005',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320190005',
+ label: 'qinshi_31010320190005'
+ }
+ ]
},
{
value: '寮勫爞鍜亾',
label: '寮勫爞鍜亾',
- children: [{
- value: 'zhuoquan_31011020175008',
- label: 'zhuoquan_31011020175008',
- }]
- },{
+ children: [
+ {
+ value: 'zhuoquan_31011020175008',
+ label: 'zhuoquan_31011020175008'
+ }
+ ]
+ },
+ {
value: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
label: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- children: [{
- value: 'zhuoquan_31011020175002',
- label: 'zhuoquan_31011020175002',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175002',
+ label: 'zhuoquan_31011020175002'
+ }
+ ]
},
{
value: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
label: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- children: [{
- value: 'GLHB00000000016004',
- label: 'GLHB00000000016004',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016004',
+ label: 'GLHB00000000016004'
+ }
+ ]
},
{
value: '缂樺',
label: '缂樺',
- children: [{
- value: 'fucheng310104200914',
- label: 'fucheng310104200914',
- }]
+ children: [
+ {
+ value: 'fucheng310104200914',
+ label: 'fucheng310104200914'
+ }
+ ]
},
{
value: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
label: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- children: [{
- value: 'GLHB00000000016155',
- label: 'GLHB00000000016155',
- }]
- },{
+ children: [
+ {
+ value: 'GLHB00000000016155',
+ label: 'GLHB00000000016155'
+ }
+ ]
+ },
+ {
value: '涓拌寕鐑や覆',
label: '涓拌寕鐑や覆',
- children: [{
- value: 'GLHB00000000016011',
- label: 'GLHB00000000016011',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016011',
+ label: 'GLHB00000000016011'
+ }
+ ]
},
{
value: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
label: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- children: [{
- value: 'GLHB00000000010279',
- label: 'GLHB00000000010279',
- }]
+ children: [
+ {
+ value: 'GLHB00000000010279',
+ label: 'GLHB00000000010279'
+ }
+ ]
},
{
value: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
label: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- children: [{
- value: 'GLHB00000000010504',
- label: 'GLHB00000000010504',
- }]
- },
-
- ],
-
- }
+ children: [
+ {
+ value: 'GLHB00000000010504',
+ label: 'GLHB00000000010504'
+ }
+ ]
+ }
+ ]
+ };
},
- mounted(){
+ mounted() {
// 榛樿鍔犺浇浠樺皬濮愬湪鎴愰兘 5鏈�1鍙峰埌15鍙风殑
- this.fetchData()
- },
+ this.fetchData();
+ },
methods: {
fetchData() {
if (
@@ -211,45 +246,52 @@
alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
return;
}
- let params = {}
+ let params = {};
if (this.value[1]) {
params['devId'] = this.value[1];
}
- if(this.begin){
- params['begin']=this.begin
+ if (this.begin) {
+ params['begin'] = this.begin;
}
- if(this.end){
- params['end'] = this.end
+ if (this.end) {
+ params['end'] = this.end;
}
-
- axiosInstance.get('/data/id',{params:params})
- .then(response => {
- this.chartData = response.data.data
- this.drawChart()
- })
- .catch(error => {
- console.log(error)
- })
+ this.loading = true;
+ axiosInstanceInstance
+ .get('/data/id', { params: params })
+ .then((response) => {
+
+ this.chartData = response.data.data;
+ this.loading = false;
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
+ this.drawChart();
+ });
},
drawChart() {
- let dateList = []
- let dayMin = []
- let dayMax = []
- let dayAverage = []
- let minuteExceeding=[]
+ let dateList = [];
+ let dayMin = [];
+ let dayMax = [];
+ let dayAverage = [];
+ let minuteExceeding = [];
this.chartData.forEach((item) => {
- dateList.push(item.fumeDate)
- dayMin.push(item.fumeDayMin)
- dayMax.push(item.fumeDayMax)
- dayAverage.push(item.fumeDayAverage)
- minuteExceeding.push(item.fumeMinuteExceedingNum)
- })
+ dateList.push(item.fumeDate);
+ dayMin.push(item.fumeDayMin);
+ dayMax.push(item.fumeDayMax);
+ dayAverage.push(item.fumeDayAverage);
+ minuteExceeding.push(item.fumeMinuteExceedingNum);
+ });
- let chart = echarts.init(this.$refs.chart)
+ let chart = echarts.init(this.$refs.chart);
chart.setOption({
title: {
- text: '鏃ュ彉鍖�',
+ text: '鏃ュ彉鍖�'
//left: 'center'
},
grid: {
@@ -259,66 +301,65 @@
containLabel: true
},
tooltip: {},
-
+
legend: {
- data: ['鏃ユ渶灏忓��','鏃ユ渶澶у��','鏃ュ潎鍊�','鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟']
+ data: ['鏃ユ渶灏忓��', '鏃ユ渶澶у��', '鏃ュ潎鍊�', '鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟']
},
- toolbox: { //宸ュ叿鏍�
+ toolbox: {
+ //宸ュ叿鏍�
feature: {
- dataZoom: { //鍖哄煙缂╂斁
- yAxisIndex: "none"
+ dataZoom: {
+ //鍖哄煙缂╂斁
+ yAxisIndex: 'none'
},
- restore: {}, //閰嶇疆椤硅繕鍘�
- saveAsImage: {}, //淇濆瓨涓哄浘鐗�
+ restore: {}, //閰嶇疆椤硅繕鍘�
+ saveAsImage: {} //淇濆瓨涓哄浘鐗�
}
},
xAxis: {
data: dateList
},
yAxis: {},
- series: [{
- name: '鏃ユ渶灏忓��',
- type: 'line',
- data: dayMin
- },
- {
- name: '鏃ユ渶澶у��',
- type: 'line',
- data: dayMax
- },
- {
- name: '鏃ュ潎鍊�',
- type: 'line',
- data: dayAverage
- },
- {
- name: '鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟',
- type: 'line',
- data: minuteExceeding
- },
-
-
- ]
-
- })
+ series: [
+ {
+ name: '鏃ユ渶灏忓��',
+ type: 'line',
+ data: dayMin
+ },
+ {
+ name: '鏃ユ渶澶у��',
+ type: 'line',
+ data: dayMax
+ },
+ {
+ name: '鏃ュ潎鍊�',
+ type: 'line',
+ data: dayAverage
+ },
+ {
+ name: '鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟',
+ type: 'line',
+ data: minuteExceeding
+ }
+ ]
+ });
}
}
-}
-
-
+};
</script>
<style scoped>
- .el-card {
- margin-top: 40px;
- }
+.el-card {
+ margin-top: 40px;
+ border-radius: 9px;
+}
.chart-container {
- width: 100%;
- height: 600px;
+ width: 100%;
+ height: 540px;
}
.el-header {
- background-color: #010408;
- color: #333;
- line-height: 60px;
- }
+ background-color: #010408;
+ color: #333;
+ line-height: 60px;
+}
</style>
diff --git a/src/views/analysis/graph/ExceedingRate.vue b/src/views/analysis/graph/ExceedingRate.vue
index e6b5cc9..0dd1fac 100644
--- a/src/views/analysis/graph/ExceedingRate.vue
+++ b/src/views/analysis/graph/ExceedingRate.vue
@@ -1,15 +1,15 @@
<template>
- <div>
- <el-container>
- <!-- <el-header style="text-align:right; font-size:15px ">
+ <div>
+ <el-container>
+ <!-- <el-header style="text-align:right; font-size:15px ">
<i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i>
<span style="color:rgb(226,207,207);">鏁版嵁瓒呮爣鐜�</span>
</el-header> -->
-
- <el-main>
+
+ <el-main>
<el-form :inline="true" :model="form" class="demo-form-inline">
- <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
- <!-- <el-select class="checkbox" v-model="devId" placeholder="璇烽�夋嫨璁惧缂栧彿">
+ <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
+ <!-- <el-select class="checkbox" v-model="devId" placeholder="璇烽�夋嫨璁惧缂栧彿">
<el-option
v-for="item in options"
:key="item.label"
@@ -17,189 +17,225 @@
:value="item.label">
</el-option>
</el-select> -->
- <el-cascader
- :options="options"
- :show-all-levels="false"
- :props="{expandTrigger:'hover'}"
- placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
- v-model="value"
- style="margin-right:32px">
- </el-cascader>
- </el-form-item>
-
- <el-form-item label="寮�濮嬫棩鏈�">
- <el-date-picker
- v-model="begin"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item label="缁撴潫鏃ユ湡">
- <el-date-picker
- v-model="end"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="fetchData">灞曠ず鍥�</el-button>
- </el-form-item>
- </el-form>
+ <el-cascader
+ :options="options"
+ :show-all-levels="false"
+ :props="{ expandTrigger: 'hover' }"
+ placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
+ v-model="value"
+ style="margin-right: 32px"
+ >
+ </el-cascader>
+ </el-form-item>
- <el-card>
- <div class="chart-container" ref="chart"></div>
- </el-card>
- </el-main>
- </el-container>
- </div>
- </template>
-
- <script>
- import * as echarts from 'echarts'
- import axiosInstance from '../../../utils/request.js'
- export default {
- data() {
- return {
- chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
- //devId:'', //璁惧缂栧彿
- begin:'2023-05-01', //寮�濮嬫椂闂�
- end:'2023-05-15', //缁撴潫鏃堕棿
- value:['浠樺皬濮愬湪鎴愰兘','qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
- options: [{
+ <el-form-item label="寮�濮嬫棩鏈�">
+ <el-date-picker
+ v-model="begin"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item label="缁撴潫鏃ユ湡">
+ <el-date-picker
+ v-model="end"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item>
+ <el-button type="primary" @click="fetchData">灞曠ず鍥�</el-button>
+ </el-form-item>
+ </el-form>
+
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="chart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
+ </el-card>
+ </el-main>
+ </el-container>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import axiosInstanceInstance from '../../../utils/request.js';
+export default {
+ data() {
+ return {
+ isNoData:false,
+ loading: false,
+ chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
+ //devId:'', //璁惧缂栧彿
+ begin: '2023-05-01', //寮�濮嬫椂闂�
+ end: '2023-05-15', //缁撴潫鏃堕棿
+ value: ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
+ options: [
+ {
value: '浠樺皬濮愬湪鎴愰兘',
label: '浠樺皬濮愬湪鎴愰兘',
- children: [{
- value: 'qinshi_31010320210010',
- label: 'qinshi_31010320210010',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320210010',
+ label: 'qinshi_31010320210010'
+ }
+ ]
},
{
value: '鍚夊埢鑱旂洘',
label: '鍚夊埢鑱旂洘 ',
- children: [{
- value: 'qinshi_31010320200006',
- label: 'qinshi_31010320200006',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200006',
+ label: 'qinshi_31010320200006'
+ }
+ ]
},
{
value: '瀹跺湪濉斿暒',
label: '瀹跺湪濉斿暒',
- children: [{
- value: 'hengzhiyuan_64480047347215',
- label: 'hengzhiyuan_64480047347215',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047347215',
+ label: 'hengzhiyuan_64480047347215'
+ }
+ ]
},
{
value: '鐙兼潵浜�',
label: '鐙兼潵浜� ',
- children: [{
- value: 'zhuoquan_31011020175012',
- label: 'zhuoquan_31011020175012',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175012',
+ label: 'zhuoquan_31011020175012'
+ }
+ ]
},
{
value: '涔愬嚡鎾掓槦娓稿簵',
label: '涔愬嚡鎾掓槦娓稿簵',
- children: [{
- value: 'qinshi_31010320200007',
- label: 'qinshi_31010320200007',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200007',
+ label: 'qinshi_31010320200007'
+ }
+ ]
},
{
value: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
label: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- children: [{
- value: 'hengzhiyuan_64480047078091',
- label: 'hengzhiyuan_64480047078091',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047078091',
+ label: 'hengzhiyuan_64480047078091'
+ }
+ ]
},
{
value: '妫掔害缈�',
label: '妫掔害缈�',
- children: [{
- value: 'qinshi_31010320190005',
- label: 'qinshi_31010320190005',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320190005',
+ label: 'qinshi_31010320190005'
+ }
+ ]
},
{
value: '寮勫爞鍜亾',
label: '寮勫爞鍜亾',
- children: [{
- value: 'zhuoquan_31011020175008',
- label: 'zhuoquan_31011020175008',
- }]
- },{
+ children: [
+ {
+ value: 'zhuoquan_31011020175008',
+ label: 'zhuoquan_31011020175008'
+ }
+ ]
+ },
+ {
value: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
label: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- children: [{
- value: 'zhuoquan_31011020175002',
- label: 'zhuoquan_31011020175002',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175002',
+ label: 'zhuoquan_31011020175002'
+ }
+ ]
},
{
value: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
label: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- children: [{
- value: 'GLHB00000000016004',
- label: 'GLHB00000000016004',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016004',
+ label: 'GLHB00000000016004'
+ }
+ ]
},
{
value: '缂樺',
label: '缂樺',
- children: [{
- value: 'fucheng310104200914',
- label: 'fucheng310104200914',
- }]
+ children: [
+ {
+ value: 'fucheng310104200914',
+ label: 'fucheng310104200914'
+ }
+ ]
},
{
value: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
label: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- children: [{
- value: 'GLHB00000000016155',
- label: 'GLHB00000000016155',
- }]
- },{
+ children: [
+ {
+ value: 'GLHB00000000016155',
+ label: 'GLHB00000000016155'
+ }
+ ]
+ },
+ {
value: '涓拌寕鐑や覆',
label: '涓拌寕鐑や覆',
- children: [{
- value: 'GLHB00000000016011',
- label: 'GLHB00000000016011',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016011',
+ label: 'GLHB00000000016011'
+ }
+ ]
},
{
value: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
label: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- children: [{
- value: 'GLHB00000000010279',
- label: 'GLHB00000000010279',
- }]
+ children: [
+ {
+ value: 'GLHB00000000010279',
+ label: 'GLHB00000000010279'
+ }
+ ]
},
{
value: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
label: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- children: [{
- value: 'GLHB00000000010504',
- label: 'GLHB00000000010504',
- }]
- },
-
- ]
-
- }
-
- },
- mounted(){
+ children: [
+ {
+ value: 'GLHB00000000010504',
+ label: 'GLHB00000000010504'
+ }
+ ]
+ }
+ ]
+ };
+ },
+ mounted() {
// 榛樿鍔犺浇浠樺皬濮愬湪鎴愰兘 5鏈�1鍙峰埌15鍙风殑
- this.fetchData()
- },
- methods: {
- fetchData() {
- if (
+ this.fetchData();
+ },
+ methods: {
+ fetchData() {
+ if (
this.begin >= this.end &&
(this.begin != null || this.end != null) &&
(this.begin != '' || this.end != '')
@@ -207,82 +243,90 @@
alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
return;
}
- let params = {}
- if (this.value[1]) {
- params['devId'] = this.value[1];
+ let params = {};
+ if (this.value[1]) {
+ params['devId'] = this.value[1];
+ }
+ if (this.begin) {
+ params['begin'] = this.begin;
+ }
+ if (this.end) {
+ params['end'] = this.end;
+ }
+ this.loading = true;
+ axiosInstanceInstance
+ .get('/data/id', { params: params })
+ .then((response) => {
+
+ this.chartData = response.data.data;
+ this.loading = false;
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
}
- if(this.begin){
- params['begin']=this.begin
- }
- if(this.end){
- params['end'] = this.end
- }
-
- axiosInstance.get('/data/id',{params:params})
- .then(response => {
- this.chartData = response.data.data
- this.drawChart()
- })
- .catch(error => {
- console.log(error)
- })
- },
- drawChart() {
- let dateList = []
-
- let noonExceeding = []
- let nightExceeding = []
- let keyExceeding = []
-
- //姣旂巼
- this.chartData.forEach((item) => {
- dateList.push(item.fumeDate) //x杞存棩鏈�
-
- noonExceeding.push(item.noonExceedingNum.slice(0,-1))
- nightExceeding.push(item.nightExceedingNum.slice(0,-1))
- keyExceeding.push(item.keyExceedingRate.slice(0,-1))
- })
-
- 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"
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
+ this.drawChart();
+ });
+ },
+ drawChart() {
+ let dateList = [];
+
+ let noonExceeding = [];
+ let nightExceeding = [];
+ let keyExceeding = [];
+
+ //姣旂巼
+ this.chartData.forEach((item) => {
+ dateList.push(item.fumeDate); //x杞存棩鏈�
+
+ noonExceeding.push(item.noonExceedingNum.slice(0, -1));
+ nightExceeding.push(item.nightExceedingNum.slice(0, -1));
+ keyExceeding.push(item.keyExceedingRate.slice(0, -1));
+ });
+
+ 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
- },
-
- yAxis: {
- type: 'value',
- axisLabel:{
- show:true,
- interval:'auto',
- formatter:'{value} %'
- }
-
- },
- series: [
+ restore: {}, //閰嶇疆椤硅繕鍘�
+ saveAsImage: {} //淇濆瓨涓哄浘鐗�
+ }
+ },
+ xAxis: {
+ data: dateList
+ },
+
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto',
+ formatter: '{value} %'
+ }
+ },
+ series: [
{
name: '涓崍瓒呮爣鐜�',
type: 'line',
@@ -297,26 +341,26 @@
name: '閲嶇偣鏃舵瓒呮爣鐜�',
type: 'line',
data: keyExceeding
- },
+ }
]
-
- })
- }
+ });
}
}
- </script>
-
- <style scoped>
- .el-card {
- margin-top: 40px;
- }
-.chart-container {
- width: 100%;
- height: 600px;
+};
+</script>
+
+<style scoped>
+.el-card {
+ margin-top: 40px;
+ border-radius: 9px;
}
- .el-header {
- background-color: #010408;
- color: #333;
- line-height: 60px;
- }
- </style>
\ No newline at end of file
+.chart-container {
+ width: 100%;
+ height: 540px;
+}
+.el-header {
+ background-color: #010408;
+ color: #333;
+ line-height: 60px;
+}
+</style>
diff --git a/src/views/analysis/graph/IndexPage.vue b/src/views/analysis/graph/IndexPage.vue
index c658507..1dd5dc4 100644
--- a/src/views/analysis/graph/IndexPage.vue
+++ b/src/views/analysis/graph/IndexPage.vue
@@ -192,7 +192,7 @@
</template>
<script>
- import axiosInstance from '../../../utils/request.js'
+ import axiosInstanceInstance from '../../../utils/request.js'
import * as XLSX from 'xlsx/xlsx.mjs';
export default {
data() {
@@ -362,7 +362,7 @@
},
mounted(){
//鍙戦�佷竴閮ㄨ姹傦紝鑾峰彇鏁版嵁
- axiosInstance.get("/data/id").then((result)=>{
+ axiosInstanceInstance.get("/data/id").then((result)=>{
this.tableData=result.data.data
//this.tableData=result.data.data.rows 褰撹闂�/tiaojian 鏃�
this.total = this.tableData.length;
@@ -419,7 +419,7 @@
params['end'] = this.form.end;
}
- axiosInstance.get('http://192.168.0.144:8080/data/id', {
+ axiosInstanceInstance.get('/data/id', {
params: params
}).then(response => {
this.tableData = response.data.data;
diff --git a/src/views/analysis/graph/OnlineRate.vue b/src/views/analysis/graph/OnlineRate.vue
index 84390c9..b1d220c 100644
--- a/src/views/analysis/graph/OnlineRate.vue
+++ b/src/views/analysis/graph/OnlineRate.vue
@@ -52,8 +52,9 @@
</el-form-item>
</el-form>
- <el-card>
- <div class="chart-container" ref="chart"></div>
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="chart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
</el-card>
</el-main>
</el-container>
@@ -62,10 +63,12 @@
<script>
import * as echarts from 'echarts'
- import axiosInstance from '../../../utils/request.js'
+ import axiosInstanceInstance from '../../../utils/request.js'
export default {
data() {
return {
+ isNoData:false,
+ loading:false,
chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
//devId:'', //璁惧缂栧彿
begin:'2023-05-01', //寮�濮嬫椂闂�
@@ -219,15 +222,22 @@
if(this.end){
params['end'] = this.end
}
-
- axiosInstance.get('/data/id',{params:params})
+ this.loading=true
+ axiosInstanceInstance.get('/data/id',{params:params})
.then(response => {
+
this.chartData = response.data.data
+ this.loading= false
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
this.drawChart()
})
- .catch(error => {
- console.log(error)
- })
+
},
drawChart() {
let dateList = []
@@ -323,10 +333,11 @@
<style scoped>
.el-card {
margin-top: 40px;
+ border-radius: 9px;
}
.chart-container {
width: 100%;
- height: 600px;
+ height: 540px;
}
.el-header {
background-color: #010408;
diff --git a/src/views/analysis/graph/PuOpeningRate.vue b/src/views/analysis/graph/PuOpeningRate.vue
index 9620765..b7e884c 100644
--- a/src/views/analysis/graph/PuOpeningRate.vue
+++ b/src/views/analysis/graph/PuOpeningRate.vue
@@ -1,14 +1,14 @@
<template>
- <div>
- <el-container>
- <!-- <el-header style="text-align:right; font-size:15px ">
+ <div>
+ <el-container>
+ <!-- <el-header style="text-align:right; font-size:15px ">
<i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i>
<span style="color:rgb(226,207,207);">鍑�鍖栧櫒寮�鍚巼</span>
</el-header> -->
-
- <el-main>
+
+ <el-main>
<el-form :inline="true" :model="form" class="demo-form-inline">
- <!-- <el-form-item label="璁惧缂栧彿">
+ <!-- <el-form-item label="璁惧缂栧彿">
<el-select class="checkbox" v-model="devId" placeholder="璇烽�夋嫨璁惧缂栧彿">
<el-option
v-for="item in options"
@@ -17,295 +17,336 @@
:value="item.label">
</el-option>
</el-select> -->
- <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
- <el-cascader
- :options="options"
- :show-all-levels="false"
- :props="{expandTrigger:'hover'}"
- placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
- v-model="value"
- style="margin-right:32px">
- </el-cascader>
- </el-form-item>
-
- <el-form-item label="寮�濮嬫棩鏈�">
- <el-date-picker
- v-model="begin"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item label="缁撴潫鏃ユ湡">
- <el-date-picker
- v-model="end"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="fetchData">鐢熸垚鎶樼嚎鍥�</el-button>
- </el-form-item>
- </el-form>
+ <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
+ <el-cascader
+ :options="options"
+ :show-all-levels="false"
+ :props="{ expandTrigger: 'hover' }"
+ placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
+ v-model="value"
+ style="margin-right: 32px"
+ >
+ </el-cascader>
+ </el-form-item>
- <el-card>
- <div class="chart-container" ref="chart"></div>
- </el-card>
- </el-main>
- </el-container>
- </div>
- </template>
-
- <script>
- import * as echarts from 'echarts'
- import axiosInstance from '../../../utils/request.js'
- export default {
- data() {
- return {
- chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
- devId:'', //璁惧缂栧彿
- begin:'2023-05-01', //寮�濮嬫椂闂�
- end:'2023-05-15', //缁撴潫鏃堕棿
- value:['浠樺皬濮愬湪鎴愰兘','qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
- options: [{
+ <el-form-item label="寮�濮嬫棩鏈�">
+ <el-date-picker
+ v-model="begin"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item label="缁撴潫鏃ユ湡">
+ <el-date-picker
+ v-model="end"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item>
+ <el-button type="primary" @click="fetchData">鐢熸垚鎶樼嚎鍥�</el-button>
+ </el-form-item>
+ </el-form>
+
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="chart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
+ </el-card>
+ </el-main>
+ </el-container>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import axiosInstanceInstance from '../../../utils/request.js';
+export default {
+ data() {
+ return {
+ isNoData:false,
+ loading: false,
+ chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
+ devId: '', //璁惧缂栧彿
+ begin: '2023-05-01', //寮�濮嬫椂闂�
+ end: '2023-05-15', //缁撴潫鏃堕棿
+ value: ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
+ options: [
+ {
value: '浠樺皬濮愬湪鎴愰兘',
label: '浠樺皬濮愬湪鎴愰兘',
- children: [{
- value: 'qinshi_31010320210010',
- label: 'qinshi_31010320210010',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320210010',
+ label: 'qinshi_31010320210010'
+ }
+ ]
},
{
value: '鍚夊埢鑱旂洘',
label: '鍚夊埢鑱旂洘 ',
- children: [{
- value: 'qinshi_31010320200006',
- label: 'qinshi_31010320200006',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200006',
+ label: 'qinshi_31010320200006'
+ }
+ ]
},
{
value: '瀹跺湪濉斿暒',
label: '瀹跺湪濉斿暒',
- children: [{
- value: 'hengzhiyuan_64480047347215',
- label: 'hengzhiyuan_64480047347215',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047347215',
+ label: 'hengzhiyuan_64480047347215'
+ }
+ ]
},
{
value: '鐙兼潵浜�',
label: '鐙兼潵浜� ',
- children: [{
- value: 'zhuoquan_31011020175012',
- label: 'zhuoquan_31011020175012',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175012',
+ label: 'zhuoquan_31011020175012'
+ }
+ ]
},
{
value: '涔愬嚡鎾掓槦娓稿簵',
label: '涔愬嚡鎾掓槦娓稿簵',
- children: [{
- value: 'qinshi_31010320200007',
- label: 'qinshi_31010320200007',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200007',
+ label: 'qinshi_31010320200007'
+ }
+ ]
},
{
value: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
label: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- children: [{
- value: 'hengzhiyuan_64480047078091',
- label: 'hengzhiyuan_64480047078091',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047078091',
+ label: 'hengzhiyuan_64480047078091'
+ }
+ ]
},
{
value: '妫掔害缈�',
label: '妫掔害缈�',
- children: [{
- value: 'qinshi_31010320190005',
- label: 'qinshi_31010320190005',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320190005',
+ label: 'qinshi_31010320190005'
+ }
+ ]
},
{
value: '寮勫爞鍜亾',
label: '寮勫爞鍜亾',
- children: [{
- value: 'zhuoquan_31011020175008',
- label: 'zhuoquan_31011020175008',
- }]
- },{
+ children: [
+ {
+ value: 'zhuoquan_31011020175008',
+ label: 'zhuoquan_31011020175008'
+ }
+ ]
+ },
+ {
value: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
label: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- children: [{
- value: 'zhuoquan_31011020175002',
- label: 'zhuoquan_31011020175002',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175002',
+ label: 'zhuoquan_31011020175002'
+ }
+ ]
},
{
value: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
label: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- children: [{
- value: 'GLHB00000000016004',
- label: 'GLHB00000000016004',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016004',
+ label: 'GLHB00000000016004'
+ }
+ ]
},
{
value: '缂樺',
label: '缂樺',
- children: [{
- value: 'fucheng310104200914',
- label: 'fucheng310104200914',
- }]
+ children: [
+ {
+ value: 'fucheng310104200914',
+ label: 'fucheng310104200914'
+ }
+ ]
},
{
value: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
label: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- children: [{
- value: 'GLHB00000000016155',
- label: 'GLHB00000000016155',
- }]
- },{
+ children: [
+ {
+ value: 'GLHB00000000016155',
+ label: 'GLHB00000000016155'
+ }
+ ]
+ },
+ {
value: '涓拌寕鐑や覆',
label: '涓拌寕鐑や覆',
- children: [{
- value: 'GLHB00000000016011',
- label: 'GLHB00000000016011',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016011',
+ label: 'GLHB00000000016011'
+ }
+ ]
},
{
value: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
label: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- children: [{
- value: 'GLHB00000000010279',
- label: 'GLHB00000000010279',
- }]
+ children: [
+ {
+ value: 'GLHB00000000010279',
+ label: 'GLHB00000000010279'
+ }
+ ]
},
{
value: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
label: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- children: [{
- value: 'GLHB00000000010504',
- label: 'GLHB00000000010504',
- }]
- },
-
- ]
-
- }
-
- },
- mounted(){
+ children: [
+ {
+ value: 'GLHB00000000010504',
+ label: 'GLHB00000000010504'
+ }
+ ]
+ }
+ ]
+ };
+ },
+ mounted() {
// 榛樿鍔犺浇浠樺皬濮愬湪鎴愰兘 5鏈�1鍙峰埌15鍙风殑
- this.fetchData()
- },
- methods: {
- fetchData() {
- if (
+ this.fetchData();
+ },
+ methods: {
+ fetchData() {
+ if (
this.begin >= this.end &&
(this.begin != null || this.end != null) &&
(this.begin != '' || this.end != '')
- ) {
- alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
- return;
+ ) {
+ alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
+ return;
+ }
+ let params = {};
+ if (this.value[1]) {
+ params['devId'] = this.value[1];
+ }
+ if (this.begin) {
+ params['begin'] = this.begin;
+ }
+ if (this.end) {
+ params['end'] = this.end;
+ }
+ this.loading = true;
+ axiosInstanceInstance
+ .get('data/id', { params: params })
+ .then((response) => {
+ this.chartData = response.data.data;
+ this.loading = false;
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
}
- let params = {}
- if (this.value[1]) {
- params['devId'] = this.value[1];
- }
- if(this.begin){
- params['begin']=this.begin
- }
- if(this.end){
- params['end'] = this.end
- }
-
- axiosInstance.get('data/id',{params:params})
- .then(response => {
- this.chartData = response.data.data
- this.drawChart()
- })
- .catch(error => {
- console.log(error)
- })
- },
- drawChart() {
- let dateList = []
-
- let puOpenRate = []
-
-
- //姣旂巼
- this.chartData.forEach((item) => {
- dateList.push(item.fumeDate) //x杞存棩鏈�
-
- puOpenRate.push(item.purifierOpenRate.slice(0,-1))
- })
-
- 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
- },
-
- yAxis: {
- type: 'value',
- axisLabel:{
- show:true,
- interval:'auto',
- formatter:'{value} %'
- }
-
- },
- series: [
- {
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
+ this.drawChart();
+ });
+ },
+ drawChart() {
+ let dateList = [];
+
+ let puOpenRate = [];
+
+ //姣旂巼
+ this.chartData.forEach((item) => {
+ dateList.push(item.fumeDate); //x杞存棩鏈�
+
+ puOpenRate.push(item.purifierOpenRate.slice(0, -1));
+ });
+
+ 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
+ },
+
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto',
+ formatter: '{value} %'
+ }
+ },
+ series: [
+ {
name: '鍑�鍖栧櫒寮�鍚巼',
type: 'line',
data: puOpenRate
- },
+ }
]
-
- })
- }
+ });
}
}
- </script>
-
- <style scoped>
- .el-card {
- margin-top: 40px;
- }
-.chart-container {
- width: 100%;
- height: 600px;
-}
- .el-header {
- background-color: #000205;
- color: #333;
- line-height: 60px;
- }
+};
+</script>
- </style>
\ No newline at end of file
+<style scoped>
+.el-card {
+ margin-top: 40px;
+ border-radius: 9px;
+}
+.chart-container {
+ width: 100%;
+ height: 540px;
+}
+.el-header {
+ background-color: #000205;
+ color: #333;
+ line-height: 60px;
+}
+</style>
diff --git a/src/views/getdata/GetData.vue b/src/views/getdata/GetData.vue
new file mode 100644
index 0000000..c7e91a4
--- /dev/null
+++ b/src/views/getdata/GetData.vue
@@ -0,0 +1,362 @@
+<script>
+import axiosInstancePy from '../../utils/requestPy'
+// import ShopNameSelect from '../sfc/ShopNameSelect.vue'
+import ShopNameCheckBox from '../../sfc/ShopNameCheckBox.vue';
+import TimeSelectCrawling from '../../sfc/TimeSelectCrawling.vue';
+
+import dayjs from 'dayjs';
+
+export default {
+ components: {
+ // ShopNameSelect,
+ ShopNameCheckBox,
+ TimeSelectCrawling
+ },
+ data() {
+ return {
+ // 宸查�変腑鐨勫簵閾哄悕
+ 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,
+ // 妯℃嫙鐧婚檰鎸夐挳鍔犺浇涓姸鎬�
+ login_loading:false,
+ // 鏃犳暟鎹椂鐨勫浘鐗�
+ isNoData:false
+ };
+ },
+ methods: {
+ openFullScreen () {
+ this.loadingToMysql = ElLoading.service({
+ lock: true,
+ text: 'Loading',
+ background: 'rgba(0, 0, 0, 0.7)',
+ })
+},
+
+
+ // 鑷姩鐧婚檰
+ autoLogin(){
+ this.login_loading = true
+ axiosInstancePy.get('/autologin').then(response =>{
+ console.log('鐧婚檰缁撴灉涓猴細',response.data);
+ ElMessage.success(response.data)
+ this.login_loading = false
+ })
+ },
+
+ // 鍙戦�佹暟鎹�
+ 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;
+ // 寰楀埌鍙嶉淇℃伅 鎵�鏈夋暟鎹�
+ axiosInstancePy.post('/getData', form).then((response) => {
+ console.log(response.data);
+ if(response.data == '-1'){
+ this.loading = false;
+ // ElMessage.warning('璇峰厛鐐瑰嚮鐧婚檰')
+ alert('璇峰厛鐧婚檰')
+ return
+ }
+ if(response.data == '-2'){
+ this.loading = false;
+ // ElMessage.warning('鐧婚檰韬唤杩囨湡锛岃閲嶆柊鐐瑰嚮鐧婚檰')
+ alert('鐧婚檰韬唤杩囨湡锛岃閲嶆柊鐧婚檰')
+ return
+ }
+ 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()
+ axiosInstancePy.post('/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()
+ axiosInstancePy
+ .post('/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()
+ // 閲嶅鏁版嵁鍐欏叆鍒嗛挓鏁版嵁琛�
+ axiosInstancePy
+ .post('/minute', { 'allData': this.duplicateData })
+ .then((response) => {
+ console.log(response.data);
+ });
+ // 鏂版暟鎹啓鍏�4寮犺〃
+ if(this.newData.length != 0){
+ setTimeout(() => {
+ axiosInstancePy
+ .post('/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');
+ },
+ }
+};
+</script>
+
+<template>
+
+ <div class="root-container">
+ <div class="header-button">
+ <el-button type="primary" :loading="login_loading" @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="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"
+
+ type="textarea"
+ class="result-textarea-textarea"
+ placeholder="鐖彇缁撴灉"
+ autosize
+ ></el-input>
+ <!-- rows="6" -->
+ </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>
+ <!-- <div></div> -->
+ <el-table :data="displayData" height="250" style="width: 100%">
+ <el-table-column prop="椁愰ギ搴�" label="椁愰ギ搴�" width="180" fixed show-overflow-tooltip="true"/>
+ <el-table-column prop="渚涘簲鍟�" label="渚涘簲鍟�" width="180" show-overflow-tooltip="true"/>
+ <el-table-column prop="璁惧缂栧彿" label="璁惧缂栧彿" show-overflow-tooltip="true"/>
+ <el-table-column prop="绔欑偣鍚嶇О" label="璁惧缂栧彿" show-overflow-tooltip="true"/>
+ <el-table-column prop="杩涚儫娴撳害" label="杩涚儫娴撳害(mg/m鲁)" show-overflow-tooltip="true"/>
+ <el-table-column prop="鎺掔儫娴撳害" label="鎺掔儫娴撳害mg/m鲁)" show-overflow-tooltip="true"/>
+ <el-table-column prop="椋庢満搴�" label="椋庢満搴�(A)" show-overflow-tooltip="true"/>
+ <el-table-column prop="鍑�鍖栧櫒" label="鍑�鍖栧櫒(A)" show-overflow-tooltip="true"/>
+ <el-table-column prop="绾у埆" label="绾у埆" show-overflow-tooltip="true"/>
+ <el-table-column prop="闇�鎶ヨ" label="闇�鎶ヨ" show-overflow-tooltip="true"/>
+ <el-table-column prop="宸叉姤璀�" label="宸叉姤璀�" show-overflow-tooltip="true"/>
+ <el-table-column prop="褰掑睘鏃堕棿" label="褰掑睘鏃堕棿" show-overflow-tooltip="true"/>
+ <el-table-column prop="涓婃姤鏃堕棿" label="涓婃姤鏃堕棿" show-overflow-tooltip="true"/>
+ <el-table-column prop="鏁版嵁鏃堕棿" label="鏁版嵁鏃堕棿" show-overflow-tooltip="true"/>
+ <el-table-column prop="閲嶅娆℃暟" label="閲嶅娆℃暟" show-overflow-tooltip="true"/>
+ </el-table>
+
+ <el-empty v-show="isNoData" :image-size="200" />
+ </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;
+}
+
+.time-select {
+ margin-top: 20px;
+}
+.getdata-button {
+ margin-top: 20px;
+}
+.result-textarea {
+ margin-top: 20px;
+ width: 50%;
+}
+// .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/views/getdata/TestZm.vue b/src/views/getdata/TestZm.vue
new file mode 100644
index 0000000..0141cb4
--- /dev/null
+++ b/src/views/getdata/TestZm.vue
@@ -0,0 +1,24 @@
+<script >
+ export default {
+ data() {
+ return{
+
+ }
+ },
+ methods: {
+ get(){
+
+ }
+ }
+}
+</script>
+
+<template>
+ <div>
+
+ </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..73d6769
--- /dev/null
+++ b/test.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+</head>
+<body onload="alert('hello')">
+
+</body>
+<script>
+
+</script>
+</html>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..71e9262
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+
+ "module": "esnext",
+ "strict": false,
+ "jsx": "preserve",
+ "moduleResolution": "node"
+ }
+ }
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 74b5331..604daf0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,18 +12,19 @@
// https://vitejs.dev/config/
export default defineConfig({
- // server: {
- // proxy: {
- // "/front": {
- // target: "http://39.97.218.60/",
- // changeOrigin: true,
- // },
- // "/boss": {
- // target: "http://39.97.218.60/",
- // changeOrigin: true,
- // },
- // }
- // },
+ server: {
+ proxy: {
+ "^/api": {
+ target: 'http://xhhb.senzly.cn',
+ changeOrigin: true,
+ rewrite: (path) => path.replace(/^\/api/, '/main')
+ },
+ "/boss": {
+ target: "http://39.97.218.60/",
+ changeOrigin: true,
+ },
+ }
+ },
plugins: [
vue(),
AutoImport({
diff --git a/vue3-0707.zip b/vue3-0707.zip
deleted file mode 100644
index 2541e7b..0000000
--- a/vue3-0707.zip
+++ /dev/null
Binary files differ
--
Gitblit v1.9.3