From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 14 八月 2023 17:11:48 +0800
Subject: [PATCH] 油烟监测系统 Vue代码
---
src/assets/purifier.jpg | 0
vue.config.js | 6
src/test/TestNoData.vue | 1075 ++++++----
src/assets/inner_device.jpg | 0
.eslintrc-auto-import.json | 3
components.d.ts | 5
src/sfc/ExceptionTypeLineChart.vue | 115 +
src/views/getdata/GetData.vue | 30
src/sfc/TimeSelect.vue | 2
src/test/TestSelect.vue | 139
src/utils/request.js | 4
src/views/IndexView.vue | 92
src/sfc/ShopNameAndID.vue | 32
src/views/ExceedingFume.vue | 1589 ++++++++-------
src/views/HistoryFume.vue | 169 -
src/views/analysis/HomePage.vue | 4
src/test/TestDrawer.vue | 2162 +++++++++++++++++-----
src/assets/wind.jpg | 0
src/components/layout/AppAside.vue | 106
src/router/index.ts | 4
src/sfc/DashboardChart.vue | 153
21 files changed, 3,598 insertions(+), 2,092 deletions(-)
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 3f78fe7..1078dcf 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -59,7 +59,6 @@
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true,
- "ElMessage": true,
- "ElLoading": true
+ "ElMessage": true
}
}
diff --git a/components.d.ts b/components.d.ts
index ff1f1e1..8275814 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -60,6 +60,8 @@
IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
IEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
IEpBell: typeof import('~icons/ep/bell')['default']
+ IEpDataAnalysis: typeof import('~icons/ep/data-analysis')['default']
+ IEpDataBoard: typeof import('~icons/ep/data-board')['default']
IEpDataLine: typeof import('~icons/ep/data-line')['default']
IEpDownload: typeof import('~icons/ep/download')['default']
IEpExpand: typeof import('~icons/ep/expand')['default']
@@ -69,13 +71,16 @@
IEpHistogram: typeof import('~icons/ep/histogram')['default']
IEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
IEpLock: typeof import('~icons/ep/lock')['default']
+ IEpMoney: typeof import('~icons/ep/money')['default']
IEpMonitor: typeof import('~icons/ep/monitor')['default']
IEpNotebook: typeof import('~icons/ep/notebook')['default']
IEpSearch: typeof import('~icons/ep/search')['default']
IEpSetting: typeof import('~icons/ep/setting')['default']
IEpShop: typeof import('~icons/ep/shop')['default']
IEpStopwatch: typeof import('~icons/ep/stopwatch')['default']
+ IEpTrendCharts: typeof import('~icons/ep/trend-charts')['default']
IEpUser: typeof import('~icons/ep/user')['default']
+ IEpWindPower: typeof import('~icons/ep/wind-power')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
diff --git a/src/assets/inner_device.jpg b/src/assets/inner_device.jpg
new file mode 100644
index 0000000..740ac83
--- /dev/null
+++ b/src/assets/inner_device.jpg
Binary files differ
diff --git a/src/assets/purifier.jpg b/src/assets/purifier.jpg
new file mode 100644
index 0000000..c04884d
--- /dev/null
+++ b/src/assets/purifier.jpg
Binary files differ
diff --git a/src/assets/wind.jpg b/src/assets/wind.jpg
new file mode 100644
index 0000000..a72cb6a
--- /dev/null
+++ b/src/assets/wind.jpg
Binary files differ
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index b3f3a00..9cbde1f 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -12,13 +12,12 @@
optionClick: [
'瀹炴椂鐩戞帶',
'寮傚父鍒嗘瀽',
- '鏁版嵁缁熻鍒嗘瀽',
+ '鏁版嵁璐ㄩ噺鍒嗘瀽',
'鍏ㄨ绱犲垎鏋�',
- '娌圭儫娴撳害鏃ユ暟鎹�',
+ '娌圭儫娴撳害鍒嗘瀽',
'鐩戞祴璁惧鍦ㄧ嚎鐜�',
'鍑�鍖栧櫒寮�鍚巼',
'娌圭儫鏃舵瓒呮爣鐜�',
- '娌圭儫娴撳害鍧囧��',
'绗笁鏂规暟鎹幏鍙�',
'鍘嗗彶鏁版嵁',
]
@@ -41,8 +40,8 @@
<el-aside>
<!-- text-color="#fff" -->
<el-menu
- background-color="#0DA5AA"
- active-text-color="#F77234"
+ background-color="rgb(50,155,185)"
+ active-text-color="rgb(255, 242, 0)"
class="el-menu-vertical-demo"
default-active="2"
@open="handleOpen"
@@ -64,13 +63,13 @@
<el-sub-menu index="1">
<template #title>
<el-icon><i-ep-Monitor /></el-icon>
- <span>鍦ㄧ嚎鐩戞帶</span>
+ <span class="menu-text">鍦ㄧ嚎鐩戞帶</span>
<!-- @click="handleClick(optionClick[0])" -->
</template>
<el-menu-item index="ndata" @click="selected = optionClick[0]">
<el-icon><i-ep-Stopwatch /></el-icon>
- <template #title>瀹炴椂鐩戞帶</template>
+ <template #title >瀹炴椂鐩戞帶</template>
</el-menu-item>
@@ -83,7 +82,7 @@
<el-menu-item index="analysisOrigin" @click="selected = optionClick[2]">
<el-icon><i-ep-Search /></el-icon>
- <template #title>鏁版嵁缁熻鍒嗘瀽</template>
+ <template #title>鏁版嵁璐ㄩ噺鍒嗘瀽</template>
</el-menu-item>
</el-sub-menu>
@@ -91,8 +90,8 @@
<el-sub-menu index="2">
<template #title>
- <el-icon><i-ep-Histogram /></el-icon>
- <span>鍒嗘椂娈靛垎鏋�</span>
+ <el-icon><i-ep-DataAnalysis /></el-icon>
+ <span class="menu-text">鍒嗘椂娈靛垎鏋�</span>
</template>
<el-menu-item index="allData" @click="selected = optionClick[3]">
@@ -101,7 +100,7 @@
</el-menu-item>
<el-sub-menu index="3">
<template #title>
- <el-icon><i-ep-DataLine /></el-icon>
+ <el-icon><i-ep-DataBoard /></el-icon>
<span>鍒嗚绱犲垎鏋�</span>
</template>
@@ -110,71 +109,35 @@
<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-icon><i-ep-TrendCharts /></el-icon>
+ <template #title>娌圭儫娴撳害鍒嗘瀽</template>
</el-menu-item>
<el-menu-item index="monitor" @click="selected = optionClick[5]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>鐩戞祴璁惧鍦ㄧ嚎鐜�</template>
</el-menu-item>
<el-menu-item index="purifier" @click="selected = optionClick[6]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>鍑�鍖栧櫒寮�鍚巼</template>
</el-menu-item>
<el-menu-item index="exceed" @click="selected = optionClick[7]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>娌圭儫鏃舵瓒呮爣鐜�</template>
</el-menu-item>
- <el-menu-item index="average" @click="selected = optionClick[8]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <!-- <el-menu-item index="average" @click="selected = optionClick[8]">
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>娌圭儫娴撳害鍧囧��</template>
- </el-menu-item>
+ </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>
+ <el-icon><i-ep-DataLine /></el-icon>
+ <span class="menu-text">澶氭簮鏁版嵁绠＄悊</span>
</template>
@@ -182,12 +145,12 @@
<el-icon><i-ep-Bell/></el-icon> <span>鏁版嵁鑾峰彇TestWa</span>
</el-menu-item> -->
- <el-menu-item index="getdata" @click="selected = optionClick[9]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-menu-item index="getdata" @click="selected = optionClick[8]">
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>绗笁鏂规暟鎹幏鍙�</template>
</el-menu-item>
- <el-menu-item index="hdata" @click="selected = optionClick[10]">
+ <el-menu-item index="hdata" @click="selected = optionClick[9]">
<el-icon><i-ep-Histogram /></el-icon>
<template #title>鍘嗗彶鏁版嵁</template>
</el-menu-item>
@@ -205,6 +168,11 @@
<el-menu-item index="tsdata">
<el-icon><i-ep-Bell/></el-icon> <span>娴嬭瘯2</span>
</el-menu-item>
+
+ <el-menu-item index="test1">
+ <el-icon><i-ep-Bell/></el-icon> <span>娴嬭瘯3</span>
+ </el-menu-item>
+
</el-sub-menu> -->
@@ -217,8 +185,8 @@
<style lang="scss" scoped>
.el-aside {
- // background-color: #545c64;
- background-color: #0DA5AA;
+ // background-color: #013335;
+ background-color: rgb(50,155,185);
height: 100vh;
width: auto;
@@ -226,8 +194,8 @@
.el-menu {
// background-color: rgb(41,45,62);
- background-color: #0DA5AA;
- width: 220px;
+ background-color: rgb(50,155,185);
+ width: 200px;
border-right: none;
&.el-menu--collapse {
@@ -257,13 +225,15 @@
height: 32px;
}
}
-// .el-menu-item {
-// background-color: rgb(41,45,62);
-// }
+
* {
- color: black;
+ color: rgb(252, 255, 255);
}
.slot-lable {
color: bisque;
+ // color: rgb(13, 193, 224);
+}
+.menu-text {
+ font-size: 16px;
}
</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index f387d8e..34c8d47 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -121,6 +121,10 @@
path: '/tte',
component: () => import('@/views/getdata/TestZm.vue')
},
+ {
+ path: '/test1',
+ component: () => import('@/test/TestDrawer.vue')
+ },
],
},
diff --git a/src/sfc/DashboardChart.vue b/src/sfc/DashboardChart.vue
index a1d3b7d..e54969d 100644
--- a/src/sfc/DashboardChart.vue
+++ b/src/sfc/DashboardChart.vue
@@ -8,95 +8,110 @@
</template>
<script>
-
import * as echarts from 'echarts';
export default {
props: ['data'],
data() {
- return {
- chart: null
- }
+ return {
+ chart: null
+ };
},
// 鐖剁粍浠惰缃簡瀹炴椂鏇存柊 褰撴簮鏁版嵁鍙戠敓鍙樺寲鏄� 鐩戝惉鍒扮珛鍗虫洿鏂颁华琛ㄧ洏
- watch:{
- data(newValue){
- this.chart.setOption({
- series: [
- {
- name: '瀹炴椂鏁版嵁',
- type: 'gauge',
- detail: { formatter: '{value} mg/m鲁', fontSize : 17},
- axisLine: {
- lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
- },
- data: [{
- value: newValue,
- name: '娌圭儫娴撳害',
- itemStyle: {
- color: newValue >= 1 ? 'red' : 'green'
- },
-
- }],
-
- max: 2
+ watch: {
+ data(newValue) {
+ this.chart.setOption({
+ series: [
+ {
+ name: '瀹炴椂鏁版嵁',
+ type: 'gauge',
+ detail: { formatter: '{value} mg/m鲁', fontSize: 17 },
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#67e0e3'],
+ [0.5, '#37a2da'],
+ [1, '#fd666d']
+ ],
+ width: 15
}
- ]
- })
- }
- },
- mounted() {
- // 椤甸潰鍔犺浇瀹屾垚鍚庤皟鐢ㄤ华琛ㄧ洏
- this.init()
- window.addEventListener('resize',this.updateChart)
+ },
+ data: [
+ {
+ value: newValue,
+ name: '娌圭儫娴撳害',
+ itemStyle: {
+ color: newValue >= 1 ? 'red' : 'green'
+ }
+ }
+ ],
+
+ max: 2
+ }
+ ]
+ });
+ }
},
- methods:{
- // 鍒濆鍖栦华琛ㄧ洏
- init(){
- this.chart = echarts.init(this.$refs.chartContainer);
+ mounted() {
+ // 椤甸潰鍔犺浇瀹屾垚鍚庤皟鐢ㄤ华琛ㄧ洏
+ this.init();
+ window.addEventListener('resize', this.updateChart);
+ },
+ methods: {
+ // 鍒濆鍖栦华琛ㄧ洏
+ init() {
+ this.chart = echarts.init(this.$refs.chartContainer);
// 璁剧疆榛樿鐨勭┖鏁版嵁浠〃鐩�
this.chart.setOption({
- // 浣犵殑浠〃鐩橀厤缃」
- series: [
- {
- name: '瀹炴椂鏁版嵁',
- type: 'gauge',
- detail: { formatter: '{value} mg/m鲁', fontSize : 17},
- axisLine: {
- lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
- },
- data: [{
- value: this.data,
- name: '娌圭儫娴撳害',
- itemStyle: {
- color: this.data >= 1 ? 'red' : 'green'
- }
- }],
- max: 2
+ // 浣犵殑浠〃鐩橀厤缃」
+ series: [
+ {
+ name: '瀹炴椂鏁版嵁',
+ type: 'gauge',
+ detail: { formatter: '{value} mg/m鲁', fontSize: 17 },
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#67e0e3'],
+ [0.5, '#37a2da'],
+ [1, '#fd666d']
+ ],
+ width: 15
}
- ]
+ },
+ data: [
+ {
+ value: this.data,
+ name: '娌圭儫娴撳害',
+ itemStyle: {
+ color: this.data >= 1 ? 'red' : 'green'
+ }
+ }
+ ],
+ max: 2
+ }
+ ]
});
- },
- updateChart(){
- this.$nextTick(() => {
- if (this.chart) {
- this.chart.resize();
- }
- });
- }
+ },
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ }
},
beforeUnmount() {
- // 閿�姣佷华琛ㄧ洏瀹炰緥
- this.chart.dispose();
- },
-
+ // 閿�姣佷华琛ㄧ洏瀹炰緥
+ this.chart.dispose();
+ }
};
</script>
<style>
.dashboard-item {
- width:100%;
+ width: 100%;
height: 300px;
/* margin: 10px; */
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/sfc/ExceptionTypeLineChart.vue b/src/sfc/ExceptionTypeLineChart.vue
new file mode 100644
index 0000000..316d062
--- /dev/null
+++ b/src/sfc/ExceptionTypeLineChart.vue
@@ -0,0 +1,115 @@
+<!-- 寮傚父鎯呭喌鐨� 鎶樼嚎鍥剧粍浠�
+瀛愮粍浠舵湁鍩烘湰鐨勬牱寮�
+浣跨敤鍚屼竴涓浘褰㈠疄渚嬶紝鎺ュ彈鐖剁粍浠朵紶鍏ョ殑鎶樼嚎鍥緊ption
+**鐖剁粍浠�
+
+ -->
+<template>
+ <div id="main" class="line-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+ props: {
+ option:{
+ type:Object,
+ default(){
+ return {}
+ }
+ },
+ isOpenDialog:{
+ type:Boolean
+ }
+ },
+ data() {
+ return {
+ chart: null
+ };
+ },
+ mounted() {
+ this.initChart();
+ this.chart.clear
+ this.chart.setOption(this.option,true)
+ window.addEventListener('resize', this.resizeChart);
+ },
+ watch: {
+ option(){
+ // this.chart.dispose;
+ // this.initChart();
+ // this.chart.clear
+ // 涓嶄笌涔嬪墠鐨刼ption杩涜鍚堝苟
+ this.chart.setOption(this.option,true)
+ },
+ isOpenDialog(){
+ window.addEventListener('resize', this.resizeChart);
+ console.log('璋冪敤浜�');
+ }
+ },
+ beforeUnmount() {
+ if (this.chart) {
+ this.chart.dispose;
+ }
+ },
+ methods: {
+ initChart() {
+ // 鍒涘缓echarts瀹炰緥
+ this.chart = echarts.init(document.getElementById('main'));
+ // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ const option = {
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'time',
+ data: [],
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ name: '娌圭儫娴撳害',
+ type: 'line',
+ data: []
+ }
+ ]
+ };
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
+ this.chart.setOption(option, true);
+ },
+
+ // 璺熼〉闈㈠搷搴斿紡鍙樺寲
+ resizeChart() {
+ this.chart.resize();
+ }
+ }
+};
+</script>
+
+
+<style>
+.line-chart {
+ width: 100%;
+ height: 300px;
+ margin-bottom: 20px;
+ margin-left: 10px;
+ min-width: 350px;
+}
+</style>
diff --git a/src/sfc/ShopNameAndID.vue b/src/sfc/ShopNameAndID.vue
index 7fcfa4d..e2b164a 100644
--- a/src/sfc/ShopNameAndID.vue
+++ b/src/sfc/ShopNameAndID.vue
@@ -5,14 +5,16 @@
import axiosInstanceInstance from '../utils/request.js'
export default {
// 榛樿閫夋嫨涓�涓�
- // props:{
- // devId:{
- // type: Array,
- // default: ['鍏ㄩ儴','鍏ㄩ儴'],
- // }
+ props:{
+ devId:{
+ type: Array,
+ default(){
+ return ['鍏ㄩ儴','鍏ㄩ儴']
+ }
+ }
- // }
- props:['devId'],
+ },
+ // props:['devId'],
emits: ['submitId'],
data() {
return {
@@ -55,7 +57,15 @@
// 鎵撳紑鏃堕粯璁ゅ睍绀轰竴涓簵閾�
this.deviceId = this.devId
- }
+ },
+ changeDev(){
+ if(this.deviceId == null){
+ this.deviceId = ['','']
+ this.$emit('submitId', this.deviceId[1])
+ }else{
+ this.$emit('submitId', this.deviceId[1])
+ }
+ },
}
};
</script>
@@ -67,11 +77,11 @@
v-model="deviceId"
:options="optionsShop"
:props="{ expandTrigger: 'hover' }"
-
- @change="$emit('submitId', deviceId[1])"
+ @change="changeDev"
placeholder="鍏ㄩ儴"
+ clearable
/>
- <!-- @visible-change="getDeviceInfo" -->
+ <!-- @change="$emit('submitId', deviceId[1])" @change="changeDev"-->
</span>
</div>
</template>
diff --git a/src/sfc/TimeSelect.vue b/src/sfc/TimeSelect.vue
index 45bd3cc..61d49bf 100644
--- a/src/sfc/TimeSelect.vue
+++ b/src/sfc/TimeSelect.vue
@@ -34,7 +34,7 @@
methods:{
initOneWeekAgoTime(){
// 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂翠负涓�鍛ㄥ墠
- this.time[0] = dayjs().subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss');
+ this.time[0] = dayjs().subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss');
this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
}
}
diff --git a/src/test/TestDrawer.vue b/src/test/TestDrawer.vue
index c129336..c9ec6fb 100644
--- a/src/test/TestDrawer.vue
+++ b/src/test/TestDrawer.vue
@@ -1,298 +1,60 @@
-<!-- 瀹炴椂鐩戞祴 -->
-
-<script>
-import axiosInstanceInstance from '../utils/request.js';
-// 寮傛缁勪欢
-const DashBoard = defineAsyncComponent(() =>
- import('../sfc/DashboardChart.vue')
-)
-export default {
- components:{
- DashBoard
- },
- data() {
- return {
- // 榛樿鎵撳紑鐨勬姌鍙犻潰鏉�
- activeNames:'1',
- // 瀹炴椂鏇存柊闂撮殧 60绉�
- timeInterval:60000,
- // 澶栭儴璁惧
- outside: {
- // 鎼滅储
- searchText:'',
- isall:false,
- isLoading:false,
- // 璁惧淇℃伅琛ㄧ殑鏁版嵁
- shopnames: [],
- // 褰撳墠灞曠ず鐨勫閫夋缁勫��
- displayedShopnames:[],
- // 褰撳墠椤�
- currentPage:1,
- // 姣忛〉鏄剧ず鐨勬暟閲�
- pageSize:5,
- // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹�
- allDataLoaded:false,
- // 鏄惁鍏ㄩ��
- checkAll: false,
- isIndeterminate: false,
- // 宸查�夋嫨搴楅摵
- checkedShops: [],
- //杩斿洖閫夋嫨鐨勬墍鏈夊簵閾虹殑鏁版嵁
- realTimeData: []
- },
-
- // 鍐呴儴璁惧
- inner: {
- searchText:'',
- isall:false,
- isLoading:false,
- // 鍐呴儴鎺ュ彛杩斿洖鐨勬墍鏈夋暟鎹�
- getData:[],
- // 閫変腑鐨勫簵閾哄搴斿叏閮ㄥ瓧娈典俊鎭�
- inFumeValue:[],
- // 鎵�鏈夊簵閾哄悕瀛�
- shopnames: [],
- // 褰撳墠灞曠ず鐨勫閫夋缁勫��
- displayedShopnames:[],
- // 褰撳墠椤�
- currentPage:1,
- // 姣忛〉鏄剧ず鐨勬暟閲�
- pageSize:2,
- // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹�
- allDataLoaded:false,
- // 鏄惁鍏ㄩ��
- checkAll: false,
- isIndeterminate: false,
- // 宸查�夋嫨搴楅摵
- checkedShops: []
- },
-
- // chartInstance: []
- // // 鍐呴儴璁惧
- // devices: []
- };
- },
- watch:{
- // 'outside.checkedShops'(){
- // this.saveOutsideData()
- // console.log('111');
- // }
- },
- methods: {
- //鑾峰彇鎵�鏈夊簵閾哄悕瀛�
- getDeviceInfo() {
- // 鑾峰彇鎵�鏈夊閮ㄨ澶囩殑搴楅摵鍚嶇О
- axiosInstanceInstance.get('/fume/device').then((result) => {
- result.data.data.forEach((item) => {
- this.outside.shopnames.push(item.diName);
- });
- this.outside.displayedShopnames = this.outside.shopnames.slice(0, this.outside.pageSize);
- if (this.outside.shopnames.length <= this.outside.pageSize) {
- this.outside.allDataLoaded = true;
- }
- });
-
- //浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
- axiosInstanceInstance
- .get('https://fyami.com.cn/device/min/value/real_time', {
- params: { page: 1, per_page: 20 }
- })
- .then((result) => {
- // 淇濆瓨鍐呴儴鎺ュ彛鑾峰彇鐨勬墍鏈変俊鎭�
- this.getData = result.data.data
- result.data.data.forEach((item) => {
- this.inner.shopnames.push(item.siteName);
- });
- this.inner.displayedShopnames = this.inner.shopnames.slice(0, this.inner.pageSize);
- if (this.inner.shopnames.length <= this.inner.pageSize) {
- this.inner.allDataLoaded = true;
- }
-
- });
- },
- loadMore() {
- this.outside.isLoading = true
- setTimeout(() => {
- const startIndex = this.outside.currentPage * this.outside.pageSize;
- const endIndex = startIndex + this.outside.pageSize;
- this.outside.displayedShopnames = this.outside.displayedShopnames.concat(this.outside.shopnames.slice(startIndex, endIndex));
- this.outside.currentPage++;
- if (this.outside.displayedShopnames.length === this.outside.shopnames.length) {
- this.outside.allDataLoaded = true;
- this.outside.isall = true
- }
- this.outside.isLoading = false
- }, 100);
- },
- loadMoreInner() {
- this.inner.isLoading = true
- setTimeout(() => {
- const startIndex = this.inner.currentPage * this.inner.pageSize;
- const endIndex = startIndex + this.inner.pageSize;
- this.inner.displayedShopnames = this.inner.displayedShopnames.concat(this.inner.shopnames.slice(startIndex, endIndex));
- this.inner.currentPage++;
- if (this.inner.displayedShopnames.length === this.inner.shopnames.length) {
- this.inner.allDataLoaded = true;
- this.inner.isall = true
- }
- this.inner.isLoading = false
- }, 100);
- },
- // 杩囨护鏁版嵁
- filterData (keyword) {
- return this.outside.shopnames.filter((item) => item.includes(keyword));
- },
-
- // 澶勭悊鎼滅储
- handleSearch (){
- if(this.outside.searchText != ''){
- this.outside.displayedShopnames = this.filterData(this.outside.searchText);
- this.outside.currentPage = 1; // 閲嶇疆椤电爜
- this.outside.allDataLoaded = this.outside.displayedShopnames === this.outside.shopnames.length;
- }
- else
- {
- // 鍔犺浇榛樿鏁伴噺鐨�
- this.outside.displayedShopnames = this.outside.shopnames.slice(0, this.outside.pageSize);
- if(this.outside.shopnames.length <= this.outside.pageSize){
- this.outside.allDataLoaded.value = true;
- }
- this.outside.checkedShops = []
- }
- },
-
- // 澶勭悊鎼滅储
- handleSearchInner(){
- if(this.inner.searchText != ''){
- this.inner.displayedShopnames = this.filterData(this.inner.searchText);
- this.inner.currentPage = 1; // 閲嶇疆椤电爜
- this.inner.allDataLoaded = this.inner.displayedShopnames === this.inner.shopnames.length;
- }
- else
- {
- // 鍔犺浇榛樿鏁伴噺鐨�
- this.inner.displayedShopnames = this.inner.shopnames.slice(0, this.inner.pageSize);
- if(this.inner.shopnames.length <= this.inner.pageSize){
- this.inner.allDataLoaded.value = true;
- }
- this.inner.checkedShops = []
- }
- },
- // 澶栭儴璁惧鍏ㄩ��
- handleCheckAllChangeOutside(val) {
- this.outside.checkedShops = val ? this.outside.displayedShopnames : [];
- this.outside.isIndeterminate = false;
- },
- handleCheckedCitiesChangOutside(value) {
- const checkedCount = value.length;
- this.outside.checkAll = checkedCount === this.outside.displayedShopnames.length;
- this.outside.isIndeterminate =
- checkedCount > 0 && checkedCount < this.outside.displayedShopnames.length;
- },
-
- // 鍐呴儴璁惧鍏ㄩ��
- handleCheckAllChangeInner(val) {
- this.inner.checkedShops = val ? this.inner.shopnames : [];
- this.inner.isIndeterminate = false;
- },
- handleCheckedCitiesChangeInner(value) {
- const checkedCount = value.length;
- this.inner.checkAll = checkedCount === this.inner.shopnames.length;
- this.inner.isIndeterminate =
- checkedCount > 0 && checkedCount < this.inner.shopnames.length;
- },
-
- // 鍒ゆ柇涓�涓暟缁勬槸鍚﹀寘鍚鍏冪礌
- hasElement(array, element) {
- return array.includes(element);
- },
-
-
- //鏍规嵁鎵�閫夊簵閾烘眰璇峰苟娓叉煋浠〃鐩�
- request() {
- if(this.outside.checkedShops.length!=0){
- let temp = this.outside.checkedShops.join();
- let params = {};
- if (this.outside.checkedShops.length != 0) {
- params['shops'] = temp;
- }
- axiosInstanceInstance.get('/fume/lastest', { params: params }).then((result) => {
- this.outside.realTimeData = result.data.data;
- console.log('66', this.outside.realTimeData);
- // console.log('闀垮害涓猴細',this.outside.realTimeData.length);
- // 娓叉煋鎶樼嚎鍥�
- // this.updateCharts();
- });
- }
-
- // 閫夋嫨浜嗗唴閮ㄨ澶�
- if(this.inner.checkedShops.length!=0){
- // 娓呯┖鏁版嵁
- this.inner.inFumeValue=[]
- this.getData.forEach(item=>{
- let itemOne = item.siteName
- // 鎷垮埌閫変腑鐨勫簵閾哄搴旂殑娴撳害鍊�
- if(this.hasElement(this.inner.checkedShops,itemOne)){
- this.inner.inFumeValue.push(item)
- }
- })
- console.log(this.inner.inFumeValue);
- }
- console.log('璋冪敤浜�');
- },
-
- // 鐐瑰嚮鎸夐挳瑙﹀彂
- show() {
- // 褰撳彇娑堥�夋嫨鏃讹紝闃叉鍥惧舰杩樹繚鐣欏湪椤甸潰銆�
- if(this.outside.checkedShops.length==0){
- this.outside.realTimeData = []
- }
- if(this.inner.checkedShops.length == 0){
- this.inner.inFumeValue = []
- }
- // 鏍规嵁鎵�閫夌殑搴楅摵璇锋眰鏁版嵁
- this.request();
- setInterval(() => {
- this.request();
- }, this.timeInterval);
-
- // 寰楀埌瑕佸睍绀虹殑浠〃鐩樻暟閲�
- // this.totalCharts =
- // this.outside.checkedShops.length + this.inner.checkedShops.length;
- },
- // saveOutsideData(){
- // let temp = JSON.parse(localStorage.getItem('outsideData'));
- // if(temp!=null && temp.length!=0){
- // temp.concat(this.outside.checkedShops)
- // localStorage.setItem('outsideData', JSON.stringify(temp));
- // }else{
- // localStorage.setItem('outsideData', JSON.stringify(this.outside.checkedShops));
- // }
- // },
- // getOutsideData () {
- // const data = localStorage.getItem('outsideData');
- // this.outside.displayedShopnames = JSON.parse(data);
-
- // }
- },
- mounted() {
- // 鑾峰彇鎵�鏈夊簵閾哄悕瀛�
- this.getDeviceInfo();
- // 浼樺厛灞曠ず娴忚鍣ㄧ紦瀛樹腑鐨�
- // this.getOutsideData()
- }
-
-
-
-}
-</script>
-
-
<template>
- <div>
+ <el-row ref="h1">
+ <el-col>
+ <!-- 鑿滃崟璇绘爣棰� -->
+ <div ref="h1" class="header-container">
+ <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
+ <!-- 搴楅摵鍚� 绾ц仈 -->
+ <ShopNameAndID
+ @submit-id="(n) => (deviceId[1] = n)"
+ ></ShopNameAndID>
- <el-collapse v-model="activeNames" >
- <el-collapse-item name="1">
+ <!-- 寮傚父绫诲瀷閫夋嫨 -->
+ <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
+ </ExceptionType>
+
+ <TimeSelect @submit-time="giveTime"></TimeSelect>
+ <!-- </div> -->
+ </div>
+ <div
+ ref="h2"
+ style="display: flex; margin-top: 2px; justify-content: right"
+ >
+
+ <el-button
+ type="primary"
+ plain
+ @click="showTable"
+ 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>
+ <div style="display: flex; justify-content: right;margin-right:40px">
+ <span class="collapse-header-text">
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ >
+ </div>
+ <br />
+
+ <el-collapse ref="h3" v-model="activeNames">
+ <el-collapse-item name="1">
<template #title>
<el-tooltip
class="box-item"
@@ -300,249 +62,1643 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <h2 style="margin-left: 10px;">鐩戞祴绔欑偣閫夋嫨</h2>
+ <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
+ <el-icon class="header-icon">
+ <i-ep-info-filled />
+ </el-icon>
+ </el-tooltip>
+
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ content="鐐瑰嚮鍙姌鍙�"
+ placement="right-start"
+ >
</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-card class="box-card">
+ <el-row :gutter="25">
+ <el-col :span="8">
+ <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>
- <el-checkbox-group
- v-model="outside.checkedShops"
- @change="handleCheckedCitiesChangOutside"
- >
+ <div class="box-card-label">
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception0.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception0.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
+ </div>
- <el-checkbox
- v-for="shop in outside.displayedShopnames"
- :key="shop"
- :label="shop"
- >{{ shop }}
- </el-checkbox>
- </el-checkbox-group>
- </el-form-item>
+ <hr />
+ <div class="box-card-butcontainer">
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <ExceptionText
+ v-for="(item, index) in exception0"
+ :key="item"
+ :devId="item.devId"
+ exception-value="0"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span
+ v-if="index < exception0.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </ExceptionText>
+ </el-scrollbar>
+ </el-card>
+ </div>
+ </el-col>
-<div class="input-search">
- <el-input type="text" v-model="outside.searchText" placeholder="鎼滅储搴楅摵鍚嶇О" @input="handleSearch" />
-</div>
+ <el-col :span="8">
+ <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">
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception1.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception1.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
+ </div>
+ <hr />
- <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/>
+ <div>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <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-scrollbar>
+ </el-card>
+ </div>
+ </el-col>
- <el-form-item label="璇曠偣璁惧">
- <el-checkbox
- v-model="inner.checkAll"
- :indeterminate="inner.isIndeterminate"
- @change="handleCheckAllChangeInner"
- >鍏ㄩ��</el-checkbox
- >
- <el-checkbox-group
- v-model="inner.checkedShops"
- @change="handleCheckedCitiesChangeInner"
- class="inner-checkbox-group"
- >
-
- <el-checkbox v-for="shop in inner.displayedShopnames" :key="shop" :label="shop"
- >{{ shop }}
- </el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- <div class="input-search">
- <el-input type="text" v-model="inner.searchText" placeholder="鎼滅储搴楅摵鍚嶇О" @input="handleSearchInner" />
-
-</div>
-
- <div>
- <el-button type="primary" v-if="!inner.allDataLoaded && !inner.isLoading && !inner.isall" @click="loadMoreInner">鍔犺浇鏇村</el-button>
-<el-button type="primary" loading v-if="!inner.allDataLoaded && inner.isLoading " @click="loadMoreInner">鍔犺浇鏇村</el-button>
- <div>宸查�夋嫨璇曠偣璁惧鏁伴噺涓猴細{{inner.checkedShops.length}}</div>
- </div>
- <!-- <el-form-item > -->
-
- <div class="time-interval">
- 瀹炴椂鏇存柊闂撮殧涓猴細{{timeInterval/1000}}绉�
- </div>
-
- <!-- </el-form-item> -->
- </el-form>
- </el-card>
-</el-collapse-item>
- </el-collapse>
- </div>
-
-
-<div>
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁"
- placement="top-start"
+ <el-col :span="8">
+ <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">
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception2.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception2.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
+ </div>
+ <hr />
+ <div>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <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-scrollbar>
+ </el-card>
+ </div>
+ </el-col>
+ </el-row>
+ </el-card>
+ </el-collapse-item>
+ </el-collapse>
+ <!-- <hr/>
+ <br> -->
+ <h4 class="table-text">寮傚父鏁版嵁</h4>
+ <!-- -->
+ </el-col>
+</el-row>
+ <el-card class="table-page" v-show="!isNoData">
+ <el-table
+ ref="tableH"
+ v-loading="loading"
+ :data="displayData"
+ style="width: 100%"
+ stripe
+ border
+ :height="tableHeight"
>
- <el-button type="success" @click="show" style="margin-left: 10px;"> 灞曠ず </el-button>
- </el-tooltip>
- </div>
+ <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" >
+ <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="璁惧缂栧彿" >
+ <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="寮傚父鍒嗙被" >
+ <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="寮傚父绫诲瀷" >
+ <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="鍦板尯" >
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.region">
+ <div class="cell ellipsis">{{ row.region }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
- <!-- 浠〃鐩� -->
- <!-- <div class="charts-container" v-for="(device,index) in outside.realTimeData" :key="device.mvStatCode">
- <div ref="chartsOutside" class="echarts" :id="`chartAP-${index}`"></div>
- </div> -->
-<div class="dashBorder-area">
-<h3 v-show="outside.realTimeData.length" class="outside-leble">澶栭儴璁惧锛�</h3>
-<div v-if="outside.realTimeData">
- <el-row :gutter="20">
- <el-col :span="6" v-for="device in outside.realTimeData" :key="device.mvStatCode">
- <el-card>
- <template #header>
- <div class="card-header">{{ device.diName }}</div>
- </template>
- <DashBoard :data="device.mvFumeConcentration2"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
- <hr class="divider-margin"/>
- <divr class="data">椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity}} </divr>
- <hr class="divider-margin">
- <div class="data">鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity}}</div>
- <hr class="divider-margin"/>
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
- <div class="status" :class="{'exceed': device.mvFumeConcentration2 >= 1}"> {{ device.mvFumeConcentration2 >= 1 ? '瓒呮爣' : '' }}</div>
- <!-- <div class="status1" :class="{'exceed1': device.mvFumeConcentration2 < 1}"> {{ device.mvFumeConcentration2 < 1 ? '鏈秴鏍�' : '' }}</div> -->
- </el-card>
- </el-col>
- </el-row>
-</div>
+ <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="鎿嶄綔" >
+ <template #default="{ row }">
+ <el-button type="warning" @click="showDrawer(row)"
+ >鏌ョ湅璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
-<hr v-show="outside.realTimeData.length && inner.inFumeValue.length" class="line-marign"/>
-<h3 v-show="inner.inFumeValue.length" class="inner-leble">鍐呴儴璁惧锛�</h3>
-<div v-if="inner.inFumeValue">
- <el-row :gutter="20">
- <el-col :span="6" v-for="device in inner.inFumeValue" :key="device.mnCode">
- <el-card>
- <template #header>
- <div class="card-header">{{ device.siteName }}</div>
- </template>
- <DashBoard :data="device.value"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mnCode }}</div>
- <hr class="divider-margin"/>
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
- <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '瓒呮爣' : '' }}</div>
- <!-- <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '鏈秴鏍�' : '' }}</div> -->
+ <el-pagination
+ ref="h4"
+ background
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :total="total"
+ :page-size="pageSize"
+ layout="total,prev, pager, next, jumper"
+ />
</el-card>
- </el-col>
- </el-row>
-</div>
-</div>
+ <el-empty v-show="isNoData" :image-size="200" />
+ <!-- 瀵硅瘽妗� -->
+ <div>
+ <el-dialog v-model="centerDialogVisible" draggable align-center>
+ <template #header>
+ <div 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>
+ <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>
+
+ <!-- 瓒呮爣鏁版嵁鏃� -->
+ <!-- 鎶樼嚎鍥� -->
+
+ <!-- 鎺夌嚎 -->
+ <!-- <div
+ ref="ref"
+ v-show="isOfflineShow"
+ style="
+ width: 100%;
+ height: 300px;
+ /* min-width: 100px; */
+ margin-bottom: 20px;
+ margin-left: 10px;
+ min-width: 350px;
+ "
+ ></div> -->
+
+ <ExceptionTypeLineChart :option="option" :is-open-dialog="centerDialogVisible" ></ExceptionTypeLineChart>
+
+ <!-- -->
+ <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
+ <el-table
+ :data="exceedingData"
+ height="360"
+ border
+ style="margin-top: 25px"
+ >
+ <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鲁)"
+ />
+ </el-table>
+ </div>
+
+ <el-tag type="success" class="mx-1" effect="dark" round
+ ><span class="table-line-lable" v-show="rowExceptionType == '0'">寮傚父璁板綍锛� </span>
+ <span v-show="rowExceptionType == '1' || rowExceptionType == '2'">缂哄け鏁版嵁锛�</span>
+ <span class="table-line-num">{{ exceptionTotal }}鏉�</span>
+ <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
+ (閫昏緫璁＄畻)</span
+ >
+ </el-tag>
+ </el-dialog>
+ </div>
</template>
-<style lang="scss" scoped>
-// 鏇存柊鏃堕棿
-.time-interval {
+<script>
+import ExceptionType from '../sfc/ExceptionType.vue';
+import TimeSelect from '../sfc/TimeSelect.vue';
+import ExceptionText from '../sfc/ExceptionText.vue';
+import * as echarts from 'echarts';
+import * as XLSX from 'xlsx/xlsx.mjs';
+import dayjs from 'dayjs';
+import axiosInstanceInstance from '../utils/request.js';
+
+const ShopNameAndID = defineAsyncComponent(() =>
+ import('../sfc/../sfc/ShopNameAndID.vue')
+);
+
+// 寮傚父鍥惧舰寮傛缁勪欢
+const ExceptionTypeLineChart = defineAsyncComponent(() =>
+ import('../sfc/ExceptionTypeLineChart.vue')
+);
+export default {
+ name: 'TablePage',
+ components: {
+ ExceptionType,
+ TimeSelect,
+ ShopNameAndID,
+ ExceptionText,
+ ExceptionTypeLineChart
+ },
+ data() {
+ return {
+ // 寮傚父鎶樼嚎鍥剧殑閰嶇疆
+ option: {},
+ // 鎶樼嚎鍥惧睍绀�
+ isChartShow: false,
+ // table鍏冪礌
+ tableRef: null,
+ // 寮傚父琛ㄦ牸鏁版嵁
+ tableHeight: 300,
+ // 绌烘暟鎹姸鎬�
+ isNoData: false,
+ // 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
+ exceptionTotal: 0,
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁勶紝鍏冪礌鐩稿樊10鍒嗛挓
+ // abnormalTimeTenMinute: [],
+ // 搴楅摵鎬绘暟
+ shopsTotal: 0,
+
+ // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+ isPreCantouch: false,
+ // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+ isNextCantouch: false,
+
+ // 瀵硅瘽妗嗘槸鍚﹀睍绀�
+ centerDialogVisible: false,
+
+ // 鎶藉眽澶撮儴淇℃伅
+ // 鎶樼嚎鍥惧搴旂殑褰撳墠琛ㄦ牸琛屾暟鎹�
+ // 搴楅摵鍚�
+ rowShopName: '',
+ // 寮傚父绫诲瀷
+ rowExceptionType: '',
+ // 寮傚父寮�濮嬫椂闂�
+ rowBeginTime: '',
+ // 寮傚父缁撴潫鏃堕棿
+ rowEndTime: '',
+ // 寮傚父鐨勮澶囩紪鍙�
+ rowMvStatCode: '',
+
+ // 琛ㄦ牸鐨勪竴琛屾暟鎹�
+ rowTable: [],
+ //鎷兼帴鐨勬墍鏈夋暟鎹�
+ allExceptionTimeData: [],
+ // 鏃犳暟鎹椂澧炲姞鐨勫墠30鍒嗛挓鏁版嵁
+ beforeData: [],
+ // 鏃犳暟鎹椂澧炲姞鐨勫悗40鍒嗛挓鏁版嵁
+ afterData: [],
+
+ // -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮
+ selectedRowIndex: -1,
+
+ // 榛樿閫夋嫨鐨勬姌鍙犻潰鏉跨紪鍙�
+ activeNames: ['1'],
+ // 寮傚父鏃剁殑琛ㄦ牸
+ abnormalTb: [],
+ // 寮傚父鐨勮捣姝㈡椂闂�
+ abnormalBt: '',
+ abnormalEt: '',
+ // 鏄惁灞曠ず鏃堕棿杞� 鍚�
+ isAbnormal: false,
+ // 淇濆瓨鐫�寮傚父绫诲瀷0瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+ exception0: [],
+ // 淇濆瓨鐫�寮傚父绫诲瀷1瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+ exception1: [],
+ // 淇濆瓨鐫�寮傚父绫诲瀷2瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+ exception2: [],
+ // 鍔犺浇鍔ㄧ敾
+ 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: [],
+ };
+ },
+ // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
+ watch: {
+ selectedRowIndex(newVaue) {
+ // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ if (newVaue === this.displayData.length - 1) {
+ this.isPreCantouch = true;
+ //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isNextCantouch == true) {
+ this.isNextCantouch = false;
+ }
+ }
+ // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+ else if (newVaue === 0) {
+ this.isNextCantouch = true;
+ //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isPreCantouch == true) {
+ this.isPreCantouch = false;
+ }
+ }
+ // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬�
+ else {
+ this.isPreCantouch = false;
+ this.isNextCantouch = false;
+ }
+ },
+
+ // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
+ beginTime() {
+ this.getShopNames();
+ },
+ endTime() {
+ this.getShopNames();
+ },
+ centerDialogVisible() {
+ window.addEventListener('resize', this.updateChart);
+ }
+ },
+
+ mounted() {
+ // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
+ this.getDeviceInfo();
+ // 灞曠ず鏈�杩�7澶╂暟鎹�
+ this.getRecentSevenDays();
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
+ this.getShopNames();
+ this.calcTableHeight()
+ window.addEventListener('resize', this.updateChart);
+
+ },
+ methods: {
+ // 鍔ㄦ�佽绠楄〃鏍奸珮搴�
+ calcTableHeight(){
+ const h1 = this.$refs.h1.$el.offsetHeight;
+ const h2 = this.$refs.h4.$el.offsetHeight;
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
+ },
+
+ // 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
+ isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
+ const date1 = new Date(dateString1);
+ const date2 = new Date(dateString2);
+
+ // 璁＄畻涓や釜鏃ユ湡鐨勬椂闂村樊锛堟绉掞級
+ const timeDifferenceMs = Math.abs(date1 - date2);
+
+ // 杞崲涓哄垎閽�
+ const timeDifferenceMinutes = Math.floor(timeDifferenceMs / (1000 * 60));
+
+ // 鍒ゆ柇鏃堕棿宸槸鍚﹀ぇ浜�10鍒嗛挓
+ return timeDifferenceMinutes > 10;
+ },
+
+ // 浠�10鍒嗛挓涓洪棿闅旇繑鍥炴椂闂村瓧绗︿覆鏁扮粍
+ generateTimePoints(timePoints, yAxisData) {
+ let updatedTimePoints = [];
+ let yAxisDataAdressed = [];
+ for (let i = 0; i < timePoints.length; i++) {
+ updatedTimePoints.push(timePoints[i]);
+ yAxisDataAdressed.push(yAxisData[i]);
+ if (i < timePoints.length - 1) {
+ let current = timePoints[i];
+ let next = timePoints[i + 1];
+ while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
+ console.log('generateTimePoints');
+ current = dayjs(current)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ updatedTimePoints.push(current);
+ yAxisDataAdressed.push(null);
+ }
+ }
+ }
+ let obj = {};
+ obj['time'] = updatedTimePoints;
+ obj['data'] = yAxisDataAdressed;
+ return obj;
+ },
+
+ isExceedOneMonth(dateStr1, dateStr2) {
+ // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse
+ // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄
+ const date1 = new Date(dateStr1);
+ const date2 = new Date(dateStr2);
+
+ // 鑾峰彇涓や釜鏃ユ湡鐨勫勾銆佹湀銆佹棩
+ const year1 = date1.getFullYear();
+ const month1 = date1.getMonth();
+ const day1 = date1.getDate();
+
+ const year2 = date2.getFullYear();
+ const month2 = date2.getMonth();
+ const day2 = date2.getDate();
+ console.log(month1, month2);
+
+ // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
+ if (year1 === year2) {
+ // 骞翠唤鐩哥瓑锛屾瘮杈冩湀浠藉樊鍊�
+ if (Math.abs(month1 - month2) === 1) {
+ // 鏈堜唤宸�间负1锛岃繕闇�瑕佸垽鏂叿浣撴棩鏈�
+ if (
+ (month1 < month2 && day1 < day2) ||
+ (month1 > month2 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+ } else if (Math.abs(year1 - year2) === 1) {
+ // 骞翠唤宸�间负1锛屾瘮杈冩湀浠藉拰鏃ユ湡
+ if (
+ (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
+ (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+
+ // 榛樿杩斿洖false锛岃〃绀轰袱涓棩鏈熷瓧绗︿覆涓嶇浉宸竴涓湀
+ return false;
+ },
+
+ // 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
+ // 鍥惧舰鍝嶅簲寮忓彉鍖�
+ // updateChart() {
+ // this.$nextTick(() => {
+ // if (this.chart1) {
+ // this.chart1.resize();
+ // }
+ // if (this.chart2) {
+ // this.chart2.resize();
+ // }
+ // });
+ // },
+ // 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
+ 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');
+ },
+
+ // 鍙傛暟锛氬紓甯哥殑寮�濮嬪拰缁撴潫鏃堕棿銆傝繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�10鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€��
+ // 姣斿12:00:00-13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:10:00 ,12:20:00,12:30:00....13:00:00
+ descTenTime(begin, end) {
+ let time = [];
+ if(begin == end){
+ time.push(begin)
+ return time
+ }
+ // 淇濈暀缁撴灉 00 10 20 30
+ 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;
+ },
+
+ //鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
+ setExceptionData() {
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
+ const abnormalTimeTenMinute = this.descTenTime(
+ this.rowBeginTime,
+ this.rowEndTime
+ )
+ // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
+ this.exceedingData = []
+
+ 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);
+ },
+
+ // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
+ getNextRowData() {
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ if (this.selectedRowIndex !== 0) {
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+ this.selectedRowIndex = this.selectedRowIndex - 1;
+ //璇锋眰鏁版嵁 鏀瑰彉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;
+ }
+
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ // this.chart = null;
+ // this.drawChart();
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ });
+ }
+ //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
+ else{
+ console.log(null);
+ }
+ },
+
+ // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
+ getPreviousRowData() {
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ if (this.selectedRowIndex < this.displayData.length - 1) {
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+
+ this.selectedRowIndex = this.selectedRowIndex + 1;
+ console.log('涓�', 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;
+ }
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ console.log(this.exceedingData);
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ });
+ }
+ //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
+ else {
+ console.log(null);
+ }
+ },
+
+ // 鈥樻煡鐪嬭鎯呪�� 寮瑰嚭妗嗛儴鍒�
+ showDrawer(row) {
+ // 璁＄畻褰撳墠琛岀殑绱㈠紩
+ this.selectTableRow(row);
+
+ this.rowTable = row;
+
+ // 琛ㄦ牸鐨勮鏁版嵁浠ュ璞″舰寮忕粰drawerData
+ this.drawerData = row;
+
+ this.centerDialogVisible = true;
+
+ // 鏍规嵁琛屾暟鎹姹傝缁嗚秴鏍囨暟鎹覆鏌撴姌绾垮浘
+ 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;
+ }
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ });
+ },
+
+ // 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
+ showTable() {
+ if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
+ alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
+ return;
+ }
+ let params = {};
+
+ 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;
+ 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) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false;
+ this.handleCurrentChange(1);
+ console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
+ console.log('闀垮害', response.data.data.total);
+ });
+ },
+ handleSizeChange(val) {
+ this.pageSize = val;
+ // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒扮涓�椤�
+ this.handleCurrentChange(1);
+ },
+ handleCurrentChange(val) {
+ const startIndex = (val - 1) * this.pageSize;
+ const endIndex = startIndex + this.pageSize;
+
+ this.displayData = this.abnormalData.slice(startIndex, endIndex);
+ },
+
+ //鐩稿樊澶氬皯涓崄鍒嗛挓 璁＄畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
+ 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;
+ },
+
+ // 鍙傛暟锛氬紓甯哥殑寮�濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬��
+ // 鍔熻兘锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�30鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗40鍒嗛挓鐨勬椂闂寸偣
+ before30AndAfter40(begin, end) {
+ let time = [];
+ const before30MinBegin = dayjs(begin)
+ .subtract(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ // 鍚庝竴娈电殑寮�濮嬫椂闂�
+ const after10MinBegin = dayjs(end)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ // 寰�鍚�40鍒嗛挓
+ const after40MinEnd = dayjs(end)
+ .add(40, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ time.push(before30MinBegin);
+ time.push(after10MinBegin);
+ time.push(after40MinEnd);
+ return time;
+ },
+
+ // 鍙傛暟锛氳澶囩紪鍙凤紝 寮�濮嬫椂闂达紝 缁撴潫鏃堕棿
+ // 鍔熻兘锛氳繑鍥炴煇璁惧鍦ㄨ鏃舵鍘嗗彶鏁版嵁鐨刧et璇锋眰鍙傛暟銆�
+ requestGetParms(devnum, begin, end) {
+ return {
+ devId: devnum,
+ beginTime: begin,
+ endTime: end
+ };
+ },
+ // 鍙傛暟锛氬璞℃暟缁�(璇ュ璞′腑鐨勫睘鎬т笉鑳芥槸寮曠敤绫诲瀷锛屽惁鍒欐嫹璐濈殑鍊艰繕鏄細鐩镐簰褰卞搷)
+ // 鍔熻兘锛氭嫹璐濊瀵硅薄鏁扮粍銆�
+ shallowCopyList(itemIsObjOfList) {
+ let tempList = [];
+ itemIsObjOfList.forEach((item) => {
+ tempList.push({ ...item });
+ });
+ return tempList;
+ },
+
+ // 鍙傛暟锛氭坊鍔犻灏炬椂闂存暟鎹殑寮傚父鏁版嵁鏁扮粍(鍏冪礌涓哄璞�)
+ // 鍔熻兘锛氬涓棿寮傚父鍖洪棿鏃堕棿鍜屽�艰繘琛岃ˉ鍏咃紝杩斿洖澶勭悊鍚庣殑缁撴灉
+ // 璇︾粏鎻忚堪锛氶亶鍘嗘暟缁勶紝褰撳彂鐜版暟缁勫厓绱犱负绌烘椂锛岃缃鍏冪礌鐨勬椂闂翠负涓婁竴涓厓绱犳椂闂寸殑鍚�10鍒嗛挓锛屽苟鎶婃祿搴﹀�艰缃负null(涓婁釜鍏冪礌鐨勬椂闂翠竴瀹氫笉涓虹┖锛屾棤闇�鍐嶅幓鍒ゆ柇涓婁釜鍏冪礌涓虹┖鐨勬儏鍐�)銆�
+ addTenMinutes(exceptionDataArr) {
+ // x杞� 鏃ユ湡鏃堕棿
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ let obj = {};
+ for (let i = 0; i < exceptionDataArr.length; i++) {
+ if (exceptionDataArr[i] == null) {
+ //x杞存棩鏈熴�傚厓绱犱负null鏃讹紝 璁剧疆璇ュ厓绱犵殑鏃堕棿涓哄墠涓�鍏冪礌鐨勬椂闂村悗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(exceptionDataArr[i].mvDataTime);
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding.push(exceptionDataArr[i].mvFumeConcentration2);
+ }
+ }
+ obj['dateList'] = dateList;
+ obj['fumeExceeding'] = fumeExceeding;
+ return obj;
+ },
+
+ // 鍙傛暟锛氬姞涓婂墠鍚庡尯闂寸殑寮傚父鏁版嵁锛屾椂闂村瓧绗︿覆
+ // 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
+ findTimeInExceptionData(data, time) {
+ for (let i = 0; i < data.length; i++) {
+ if(data[i]==null){
+ continue
+ }
+ if (data[i]['mvDataTime'] == time) {
+ return data[i]['mvFumeConcentration2'];
+ }
+ }
+ return -1;
+ },
+ // 鍙傛暟:鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
+ // 鍔熻兘锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�10鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
+ keepContinuousByEachTenMinutes(
+ intervalStarTime,
+ intervalEndTime,
+ headAndTailExceptionData
+ ) {
+ let xAxis = [];
+ let yAxis = [];
+ let obj = {};
+ let current = intervalStarTime;
+ let tail = dayjs(intervalEndTime)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ while (current != tail) {
+ let value = this.findTimeInExceptionData(
+ headAndTailExceptionData,
+ current
+ );
+ if (value != -1) {
+ xAxis.push(current);
+ yAxis.push(value);
+ } else {
+ xAxis.push(current);
+ yAxis.push(null);
+ }
+ current = dayjs(current)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+
+ }
+ obj['xAxis'] = xAxis;
+ obj['yAxis'] = yAxis;
+ return obj;
+ },
+
+ // 鍙傛暟锛氳秴鏍囨暟鎹墠闈㈠尯闂寸殑鏁版嵁
+ // 鍔熻兘锛氳繑鍥為櫎鍘绘渶鍚庝竴涓厓绱犵殑鏁扮粍
+ removeLastItemOfBeforeData(beforeDataOfExceeding){
+ let tempList = [];
+ if(beforeDataOfExceeding.length ==1){
+ return tempList
+ }else{
+ for(let i=0;i<beforeDataOfExceeding.length-1;i++){
+ tempList.push({ ...beforeDataOfExceeding[i]})
+ }
+ return tempList;
+ }
+ },
+
+
+
+ // 璁剧疆option
+ // 鍙傛暟锛歺杞存椂闂达紝 y杞存补鐑熸祿搴︼紝 寮傚父绫诲埆(0浠ｈ〃瓒呮爣锛�1浠ｈ〃渚涚數寮傚父鍜屾帀绾�), 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣
+ setOption(
+ xData,
+ yData,
+ exceptionCategory,
+ exceptionBeginTime,
+ exceptionEndTime,
+ beginIndex,
+ endIndex
+ ) {
+ this.option = {}
+ // 瓒呮爣
+ if (exceptionCategory == 0) {
+ this.option = {
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3);
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'mg/m鲁',
+ },
+ series: [
+ {
+ name: '娌圭儫娴撳害',
+ type: 'line',
+ data: yData.map((item) => {
+ if (item >= 1) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
+ }
+ };
+ }
+ return item;
+ }),
+ // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [
+ [
+ {
+ name: '瓒呮爣鏃堕棿娈�',
+ xAxis: exceptionBeginTime,
+ },
+ {
+ xAxis: exceptionEndTime,
+ }
+ ]
+ ]
+ },
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '瓒呮爣',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ],
+ // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: beginIndex,
+ color: 'green'
+ },
+ {
+ gt: beginIndex,
+ lte: endIndex,
+ color: 'red'
+ },
+ {
+ gt: endIndex,
+ lte: xData.length - 1,
+ color: 'green'
+ }
+ ]
+ }
+ };
+ }
+ // 渚涚數寮傚父鍜屾帀绾�
+ else if (exceptionCategory == 1) {
+ this.option = {
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3);
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'mg/m鲁'
+ },
+ series: [
+ {
+ name: '娌圭儫鏁版嵁',
+ type: 'line',
+ data: yData,
+ markLine: {
+ silent: true,
+ data: [
+ // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
+ {
+ name: '鏃犳暟鎹�',
+ xAxis: exceptionBeginTime
+ },
+ {
+ xAxis: exceptionEndTime
+ }
+ ],
+ lineStyle: {
+ color: 'red'
+ }
+ }
+ }
+ ]
+ };
+ }
+ },
+
+
+ // 鍔熻兘锛氱偣鍑� 鈥樻煡鐪嬭鎯呪�欙紝 鈥樹笅涓�鏉♀�欐寜閽椂浼� 鍏堥�昏緫璁＄畻銆傛渶鍚庡睍绀哄浘褰�
+ drawChartTest() {
+ this.beforeData = []
+ this.afterData= []
+ this.allExceptionTimeData = []
+ //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
+ let exceptionBeginTime =this.rowBeginTime
+ let exceptionEndTime = this.rowEndTime
+
+ // beforeAndAfterTime[0]:鍓�30鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[1]:鍚�10鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[2]:鍚�40鍒嗛挓鐨勬椂闂寸偣
+ let beforeAndAfterTime = this.before30AndAfter40(
+ exceptionBeginTime,
+ exceptionEndTime
+ );
+
+ // 鏋勯�犲紓甯告椂闂村墠鐨勫尯闂存暟鎹姹傚弬鏁�
+ let paramsBefore = this.requestGetParms(
+ this.displayData[this.selectedRowIndex].devId,
+ beforeAndAfterTime[0],
+ this.displayData[this.selectedRowIndex].beginTime
+ );
+
+ // 鏋勯�犲紓甯告椂闂村悗鐨勫尯闂存暟鎹姹傚弬鏁�
+ let paramsAfter = this.requestGetParms(
+ this.displayData[this.selectedRowIndex].devId,
+ beforeAndAfterTime[1],
+ beforeAndAfterTime[2]
+ );
+
+ // 璇锋眰鍓嶅崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
+ .then((result1) => {
+ this.beforeData = result1.data.data;
+ console.log('beforeData:',this.beforeData);
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result2) => {
+ this.afterData = result2.data.data;
+ console.log('afterData:',this.afterData);
+ //淇濆瓨寮傚父鍖洪棿鐨勫��
+ let tempArr = [];
+ // 淇濆瓨寮傚父鍖洪棿鍓嶅悗鐨勫��
+ let before = [];
+ let after = [];
+
+ // 鍒ゆ柇鏄惁鏄緵鐢靛紓甯告垨鎺夌嚎
+ if (
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ // 閲嶆瀯琛ㄦ牸 缂哄け寮傚父鏁版嵁鑷姩濉厖
+ this.setExceptionData();
+
+ //鐩稿樊鍑犱釜10鍒嗛挓
+ const TenMinuteNum = this.diffTenMinutesNum(
+ exceptionBeginTime,
+ exceptionEndTime
+ );
+ //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂�
+ for (let i = 0; i < TenMinuteNum; i++) {
+ tempArr.push(null);
+ }
+ before = this.shallowCopyList(this.beforeData);
+
+ after = this.shallowCopyList(this.afterData);
+ // after = this.afterData
+ console.log('after:',after);
+ }
+ // 瓒呮爣
+ else {
+ let beforeTemp = this.removeLastItemOfBeforeData(this.beforeData)
+ // 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
+ for (let i = beforeTemp.length - 1; i >= 0; i--) {
+ if (beforeTemp[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (beforeTemp[i].mvFumeConcentration2 < 1) {
+ before.unshift(this.beforeData[i]);
+ }
+ }
+
+ for (let i = 0; i<this.afterData.length; i++) {
+ if (this.afterData[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (this.afterData[i].mvFumeConcentration2 < 1) {
+ after.unshift(this.afterData[i]);
+ }
+ }
+ tempArr = this.shallowCopyList(this.exceedingData);
+ }
+
+ // 灏嗗墠鍚庡尯闂存暟鎹� 涓� 寮傚父鍖洪棿鏁版嵁 鍚堝苟
+ this.allExceptionTimeData = [...before, ...tempArr, ...after];
+ console.log('缁勫悎鏁版嵁锛�',this.allExceptionTimeData);
+ // x杞存棩鏈熸椂闂�
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ let timeAndValue = {};
+
+ // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
+ timeAndValue = this.keepContinuousByEachTenMinutes(
+ beforeAndAfterTime[0],
+ beforeAndAfterTime[2],
+ this.allExceptionTimeData
+ );
+
+ dateList = timeAndValue['xAxis'];
+ fumeExceeding = timeAndValue['yAxis'];
+
+ console.log('dateList:',dateList);
+ console.log('fumeExceeding:',fumeExceeding);
+
+ // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ let startIndex = dateList.findIndex(
+ (item) => item === exceptionBeginTime
+ );
+ let endIndex = dateList.findIndex(
+ (item) => item === exceptionEndTime
+ );
+
+ // 渚涚數寮傚父鍜屾帀绾挎儏鍐� 瓒呮爣鎯呭喌
+ if (
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ this.setOption(
+ dateList,
+ fumeExceeding,
+ 1,
+ exceptionBeginTime,
+ exceptionEndTime,
+ startIndex,
+ endIndex
+ );
+ } else {
+ // 瓒呮爣鎯呭喌
+ this.setOption(
+ dateList,
+ fumeExceeding,
+ 0,
+ exceptionBeginTime,
+ exceptionEndTime,
+ startIndex,
+ endIndex
+ );
+ }
+ });
+ });
+ },
+
+ getDeviceInfo() {
+ // 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
+ axiosInstanceInstance.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');
+ },
+
+ getAbnormalDataByClick(val) {
+ this.abnormalData = val;
+ this.total = this.abnormalData.length;
+ // 榛樿鏄剧ず绗竴椤�
+ this.handleCurrentChange(1);
+ },
+
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙�
+ // 姣斿娌圭儫瓒呮爣瀵瑰簲鐨勬墍鏈夊簵閾哄悕绉板拰璁惧缂栧彿锛堝凡鍘婚櫎閲嶅鐨勫簵閾哄悕锛�
+ getShopNames() {
+ axiosInstanceInstance
+ .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);
+ });
+ axiosInstanceInstance
+ .get('/fume/shopname', {
+ params: {
+ exceptionType: '1',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception1 = result.data.data;
+ });
+ axiosInstanceInstance
+ .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'];
+ console.log(this.currentDateTime, this.oneWeekAgoDateTime);
+ let params = {};
+ params['beginTime'] = this.beginTime;
+ params['endTime'] = this.endTime;
+ axiosInstanceInstance
+ .get('/fume/abnormalone', { params: params })
+ .then((response) => {
+ if (response.data.data.length == 0) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
+ return;
+ }
+ // 淇濆瓨杩斿洖鐨�
+ this.abnormalData = response.data.data;
+ // 鍒嗛〉
+ this.total = this.abnormalData.length;
+ // 榛樿鏄剧ず绗竴椤�
+ this.handleCurrentChange(1);
+ this.loading = false;
+ });
+ }
+ }
+};
+</script>
+
+<style scoped>
+/* .exception-root-container {
+ margin: 20px;
+ padding: 10px;
+ border: 1px;
+ height: 615px;
+
+} */
+.header-container {
display: flex;
- justify-content: right;
- font-size: 16px;
+ margin-left: 20px;
+ /* flex-wrap: wrap;
+ align-items: center; */
}
-.form-card {
- margin: 20px 10px;
- // width: 96%;
- border:1px solid #ebeef5;
- border-radius: 4px;
+.ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
-.inner-checkbox-group {
- margin-left: 15px;
+
+.iconExcel {
+ font-size: 25px;
+ margin-left: 20px;
+ bottom: -6px;
}
-.el-card {
- margin-bottom: 10px;
+
+/* 鍙紶鏍囩澶村彉涓哄彲鐐瑰嚮鐘舵�� */
+.clickable {
+ cursor: pointer;
}
.card-header {
- // display: flex;
- // align-items: center;
- // position: center;
+ margin: 0;
+}
+
+body {
+ margin: 0;
+}
+.exception-divider-rowline {
+ margin: 10px 0px;
+}
+/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
+.exception-container {
+ display: flex;
+ /* direction: column; */
+ /* flex-grow: 2,1; */
+}
+.example-showcase .el-loading-mask {
+ z-index: 9;
+}
+
+.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);
}
-.outside-leble {
- margin-top: 10px;
-}
-.inner-leble {
- margin-top: 10px;
-}
-// 鍒嗗壊绾�
-.line-marign {
- margin: 20px 0;
-}
-.el-dialog {
- width: 700px;
-}
-.dashBorder-area {
- margin-left: 10px;
-}
-.dashboard {
- margin-bottom: 20px;
- border: #1de01d;
-}
-
-.dashboard-title {
- font-size: 20px;
- text-align: center;
- padding: 10px 0;
- background-color: #f5f7fa;
-}
-
-.echarts {
- height: 300px;
-}
-
-/* 瓒呮爣 鏂囧瓧鏁堟灉*/
-.status {
+.collapse-header {
+ margin-left: 5px;
font-size: 18px;
- color: #ff4d4f;
+}
+.collapse-header-text {
+ /* margin-right: 150px; */
+ margin-top: 5px;
+ font-size: 14px;
+ color: gray;
+}
+
+.box-card-label {
+ font-size: 14px;
+ white-space: nowrap;
+ /* overflow-x: auto; */
+}
+:deep().el-card {
+ border-radius: 9px;
+}
+/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
+:deep().el-dialog {
+ height: 98%;
+ /* 涓嶅嚭鐜版粴鍔ㄦ潯 */
+ overflow-y: hidden;
+ border-radius: 9px;
+}
+.table-page {
+ margin-left: 20px;
+}
+:deep().table-page .el-card__body {
+ /* padding: 0px; */
+}
+.table-text {
+ font-size: 18px;
+ margin: 5px 0px 10px 20px;
+}
+.text-blank {
+ margin-right: 10px;
+}
+/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
+.describe-info {
+ margin-top: 5px;
+ font-weight: bold;
+ white-space: nowrap;
+}
+/* 鏃堕棿閫夋嫨鏂囨湰 */
+.describe-time-text {
+ margin-left: 30px;
+ margin-top: 5px;
font-weight: bold;
}
-.exceed {
- color: #ff4d4f;
-}
-
-/* 鏈秴鏍� */
-.status1 {
- font-size: 18px;
- color: #1de01d;
+/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
+.table-line-num {
font-weight: bold;
+ color: black;
}
-
-.exceed1 {
- color: #1de01d;
+.button_info.el-button_inner {
+ text-align: left;
}
-.blank {
- height: 200px;
+.el-collapse {
+ margin-left: 20px;
}
-
-// 鎸夐挳
-.el-button {
- margin-top: 20px;
+:deep().el-collapse .el-collapse-item__content {
+ padding-bottom: 0px;
}
-// 鍒嗗壊绾夸笂涓嬭窛绂�
-.divider-margin {
- margin: 3px 0px ;
+.box-card {
+ height: 190px;
}
-.el-input {
- width: calc(100% / 6);
- // margin-left: 70px;
-
+:deep().box-card .el-card__body {
+ /* padding: 5px; */
}
-// .input-search {
-// display: flex;
-// justify-content: left;
-// }
+.sub-box-card {
+ height: 100px;
+ 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/test/TestNoData.vue b/src/test/TestNoData.vue
index 959c747..dc4111d 100644
--- a/src/test/TestNoData.vue
+++ b/src/test/TestNoData.vue
@@ -19,7 +19,10 @@
<TimeSelect @submit-time="giveTime"></TimeSelect>
<!-- </div> -->
</div>
- <div ref="h2" style="display: flex; margin-top: 2px; justify-content: right">
+ <div
+ ref="h2"
+ style="display: flex; margin-top: 2px; justify-content: right"
+ >
<!-- <span class="collapse-header-text">
闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
> -->
@@ -31,13 +34,14 @@
style="margin-left: 20px"
>鏌ヨ</el-button
>
- <el-button
+
+ <!-- <el-button
type="warning"
plain
@click="getAllData"
style="margin-left: 20px"
>鏌ヨ鍏ㄩ儴</el-button
- >
+ > -->
<el-tooltip
class="box-item"
@@ -58,8 +62,8 @@
</div>
<div style="display: flex; justify-content: right">
<span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
- >
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ >
</div>
<br />
@@ -72,7 +76,7 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <h4 class="collapse-header"> 寮傚父鍒嗘瀽</h4>
+ <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
<el-icon class="header-icon">
<i-ep-info-filled />
</el-icon>
@@ -84,119 +88,172 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
-
</el-tooltip>
</template>
<el-card class="box-card">
<el-row :gutter="25">
<el-col :span="8">
- <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 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
- >
- <span style="margin-left: 150px; font-size: 14px">
- 鍗犳瘮锛歿{
- ((exception0.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- >
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception0.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception0.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
</div>
<hr />
<div class="box-card-butcontainer">
- <el-card class="sub-box-card">
- <ExceptionText
- v-for="(item,index) in exception0"
- :key="item"
- :devId="item.devId"
- exception-value="0"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >
- {{ item.diName }}
- <span v-if="index<exception0.length-1" class="text-blank"> , </span>
- </ExceptionText>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <ExceptionText
+ v-for="(item, index) in exception0"
+ :key="item"
+ :devId="item.devId"
+ exception-value="0"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span
+ v-if="index < exception0.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </ExceptionText>
+ </el-scrollbar>
</el-card>
</div>
</el-col>
<el-col :span="8">
- <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 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
- >
- <span style="margin-left: 150px; font-size: 14px">
- 鍗犳瘮锛歿{
- ((exception1.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- >
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception1.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception1.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
</div>
<hr />
<div>
-
- <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>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <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-scrollbar>
+ </el-card>
</div>
</el-col>
<el-col :span="8">
- <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 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
- >
- <span style="margin-left: 150px; font-size: 14px">
- 鍗犳瘮锛歿{
- ((exception2.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- >
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception2.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception2.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
</div>
<hr />
<div>
- <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 class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <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-scrollbar>
</el-card>
</div>
</el-col>
@@ -204,19 +261,19 @@
</el-card>
</el-collapse-item>
</el-collapse>
- <!-- <hr/>
+ <!-- <hr/>
<br> -->
- <h4 class="table-text"> 寮傚父鏁版嵁</h4>
+ <h4 class="table-text">寮傚父鏁版嵁</h4>
<el-card class="table-page" v-show="!isNoData">
-
<el-table
+ ref="tableH"
v-loading="loading"
:data="displayData"
style="width: 100%"
:row-class-name="tableRowClassName"
stripe
- border
- :height=tableHeight
+ border
+ :height="tableHeight"
>
<el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340">
<template #default="{ row }">
@@ -323,8 +380,11 @@
<!-- 瓒呮爣鏁版嵁鏃� -->
<!-- 鎶樼嚎鍥� -->
+
+ <!-- 鎺夌嚎 -->
<div
- ref="chart"
+ ref="chart1"
+ v-show="isOfflineShow"
style="
width: 100%;
height: 300px;
@@ -335,8 +395,20 @@
"
></div>
- <!-- v-show="!isAbnormal" -->
- <!-- 琛ㄦ牸 -->
+ <!-- 瓒呮爣 -->
+ <div
+ ref="chart2"
+ v-show="isExceedShow"
+ style="
+ width: 100%;
+ height: 300px;
+ /* min-width: 100px; */
+ margin-bottom: 20px;
+ margin-left: 10px;
+ min-width: 350px;
+ "
+ ></div>
+ <!-- <ExceptionTypeLineChart :allData="allChartData"></ExceptionTypeLineChart> -->
<!-- -->
<div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
@@ -373,7 +445,6 @@
</template>
<script>
-
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
import ExceptionText from '../sfc/ExceptionText.vue';
@@ -385,22 +456,31 @@
const ShopNameAndID = defineAsyncComponent(() =>
import('../sfc/../sfc/ShopNameAndID.vue')
);
+
+// 寮傛缁勪欢
+// const ExceptionTypeLineChart = defineAsyncComponent(() =>
+// import('../sfc/ExceptionTypeLineChart.vue')
+// )
export default {
-
name: 'TablePage',
components: {
ExceptionType,
TimeSelect,
ShopNameAndID,
ExceptionText
+ // ExceptionTypeLineChart
},
data() {
return {
-
+ //鎺夌嚎鎴栬秴鏍囩殑鍥惧舰灞曠ず
+ isOfflineShow: false,
+ isExceedShow: false,
+ // 鎶樼嚎鍥惧睍绀�
+ isChartShow: false,
// table鍏冪礌
- tableRef:null,
+ tableRef: null,
// 寮傚父琛ㄦ牸鏁版嵁
- tableHeight:300,
+ tableHeight: 300,
// 绌烘暟鎹姸鎬�
isNoData: false,
// 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
@@ -441,7 +521,8 @@
afterData: [],
// 鎶樼嚎鍥惧疄渚�
- chart: null,
+ chart1: null,
+ chart2: null,
// -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮
selectedRowIndex: -1,
@@ -531,7 +612,7 @@
this.isNextCantouch = false;
}
}
- // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+ // 澶勪簬琛ㄦ牸鏈�鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
else if (newVaue === this.displayData.length - 1) {
this.isNextCantouch = true;
//鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
@@ -552,11 +633,13 @@
},
endTime() {
this.getShopNames();
+ },
+ centerDialogVisible() {
+ window.addEventListener('resize', this.updateChart);
}
},
mounted() {
-
// 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
this.getDeviceInfo();
@@ -566,28 +649,99 @@
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
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)`;
- // },
+ // 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
+ isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
+ const date1 = new Date(dateString1);
+ const date2 = new Date(dateString2);
- warn() {
- alert('鐐瑰嚮浜�');
+ // 璁＄畻涓や釜鏃ユ湡鐨勬椂闂村樊锛堟绉掞級
+ const timeDifferenceMs = Math.abs(date1 - date2);
+
+ // 杞崲涓哄垎閽�
+ const timeDifferenceMinutes = Math.floor(timeDifferenceMs / (1000 * 60));
+
+ // 鍒ゆ柇鏃堕棿宸槸鍚﹀ぇ浜�10鍒嗛挓
+ return timeDifferenceMinutes > 10;
},
+
+ // 浠�10鍒嗛挓涓洪棿闅旇繑鍥炴椂闂村瓧绗︿覆鏁扮粍
+ generateTimePoints(timePoints,yAxisData) {
+ let updatedTimePoints = [];
+ let yAxisDataAdressed = []
+ for (let i = 0; i < timePoints.length; i++) {
+ updatedTimePoints.push(timePoints[i]);
+ yAxisDataAdressed.push(yAxisData[i])
+ if (i < timePoints.length - 1) {
+ let current = timePoints[i];
+ let next = timePoints[i + 1];
+ while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
+ current = dayjs(current)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ updatedTimePoints.push(current);
+ yAxisDataAdressed.push(null)
+ }
+ }
+ }
+ let obj = {}
+ obj['time'] = updatedTimePoints
+ obj['data'] = yAxisDataAdressed
+ return obj;
+ },
+
+ isExceedOneMonth(dateStr1, dateStr2) {
+ // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse
+ // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄
+ const date1 = new Date(dateStr1);
+ const date2 = new Date(dateStr2);
+
+ // 鑾峰彇涓や釜鏃ユ湡鐨勫勾銆佹湀銆佹棩
+ const year1 = date1.getFullYear();
+ const month1 = date1.getMonth();
+ const day1 = date1.getDate();
+
+ const year2 = date2.getFullYear();
+ const month2 = date2.getMonth();
+ const day2 = date2.getDate();
+ console.log(month1, month2);
+
+ // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
+ if (year1 === year2) {
+ // 骞翠唤鐩哥瓑锛屾瘮杈冩湀浠藉樊鍊�
+ if (Math.abs(month1 - month2) === 1) {
+ // 鏈堜唤宸�间负1锛岃繕闇�瑕佸垽鏂叿浣撴棩鏈�
+ if (
+ (month1 < month2 && day1 < day2) ||
+ (month1 > month2 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+ } else if (Math.abs(year1 - year2) === 1) {
+ // 骞翠唤宸�间负1锛屾瘮杈冩湀浠藉拰鏃ユ湡
+ if (
+ (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
+ (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+
+ // 榛樿杩斿洖false锛岃〃绀轰袱涓棩鏈熷瓧绗︿覆涓嶇浉宸竴涓湀
+ return false;
+ },
+
// 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
// 鍥惧舰鍝嶅簲寮忓彉鍖�
updateChart() {
this.$nextTick(() => {
- if (this.chart) {
- this.chart.resize();
+ if (this.chart1) {
+ this.chart1.resize();
+ }
+ if (this.chart2) {
+ this.chart2.resize();
}
});
},
@@ -637,6 +791,7 @@
this.rowBeginTime,
this.rowEndTime
);
+
for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
this.exceedingData.push({
mvStatCode: this.rowMvStatCode,
@@ -645,6 +800,22 @@
mvFumeConcentration2: ''
});
}
+
+ // 鍏ㄩ儴鏁版嵁鍔犲叆
+ // for (let i = 0; i < data.length; i++) {
+ // if (data[i] == null) {
+ // this.exceedingData.push({
+ // mvStatCode: this.rowMvStatCode,
+ // diName: this.rowShopName,
+ // mvDataTime: abnormalTimeTenMinute[i],
+ // mvFumeConcentration2: ''
+ // });
+ // }
+ // else {
+ // this.exceedingData.push(data[i]);
+ // }
+ // }
+
// 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
this.exceptionTotal = abnormalTimeTenMinute.length;
},
@@ -688,7 +859,7 @@
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
- this.chart = null;
+ // this.chart = null;
this.drawChart();
this.exceptionTotal = this.exceedingData.length;
});
@@ -696,12 +867,6 @@
//琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
else if (this.selectedRowIndex === 0) {
console.log(null);
- // 璀﹀憡
- // ElMessage.warn('宸叉槸绗竴鏉℃暟鎹�');
- // ElMessage.info('宸叉槸璇ラ〉绗竴鏉℃暟鎹�');
-
- // 鈥欎笂涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
- // this.isPreCantouch = true
}
},
@@ -737,7 +902,6 @@
this.exceedingData = response.data.data;
console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
console.log(this.exceedingData);
- this.chart = null;
this.drawChart();
this.exceptionTotal = this.exceedingData.length;
});
@@ -747,7 +911,6 @@
console.log(null);
// 璀﹀憡
// ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�');
-
// 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
// this.isNextCantouch = true
}
@@ -796,8 +959,8 @@
// 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
showTable() {
- if (this.beginTime > this.endTime) {
- alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿');
+ if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
+ alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
return;
}
let params = {};
@@ -825,7 +988,7 @@
this.total = this.abnormalData.length;
this.loading = false;
if (response.data.data.length == 0) {
- alert('璇ユ椂娈垫棤鏁版嵁');
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
this.isNoData = true;
return;
}
@@ -842,19 +1005,10 @@
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);
+ this.displayData = this.abnormalData.slice(startIndex, endIndex);
},
//鐩稿樊澶氬皯涓崄鍒嗛挓 璁＄畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
@@ -872,25 +1026,15 @@
// 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥�
linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
- this.chart = echarts.init(this.$refs.chart);
- // $('#ModalGrade').on('shown.bs.modal', function(){
- // this.chart.resize()
- // })
- this.chart.setOption({
- title: {
- // text: '娌圭儫瓒呮爣鏁版嵁',
- // left: 'center'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
+ // 瓒呮爣鍥惧舰chart2瀹炰緥涓虹┖
+ if (this.chart2 != null) {
+ this.chart2 == null;
+ }
+ if (this.chart1 == null) {
+ this.chart1 = echarts.init(this.$refs.chart1);
+ }
+ this.chart1.setOption({
tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
toolbox: {
// 宸ュ叿鏍�
feature: {
@@ -904,14 +1048,8 @@
}
},
xAxis: {
- // type: 'time',
- // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
data: xAxisData1,
name: '鏃堕棿'
- // axisLabel: {
- // interval:3,
- // rotate:40
- // }
},
yAxis: {
type: 'value',
@@ -924,7 +1062,7 @@
},
series: [
{
- name: '娌圭儫瓒呮爣鏁版嵁',
+ name: '娌圭儫鏁版嵁',
type: 'line',
data: fumeExceeding,
markLine: {
@@ -951,15 +1089,16 @@
// 灞曠ず鎶樼嚎鍥�
drawChart() {
- // 褰撳嚭鐜颁緵鐢靛紓甯稿拰鎺夌嚎鏃讹紝鏃舵鏃犳暟鎹� 鍒欐嫾鎺ュ墠鍚庢鏁版嵁
if (
this.exceedingData.length === 0 ||
this.rowExceptionType === '1' ||
this.rowExceptionType === '2'
) {
- // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
- this.setExceptionData();
+ this.isOfflineShow = true;
+ this.isExceedShow = false;
+ // // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
+ // this.setExceptionData();
// 灞曠ず
this.isAbnormal = true;
// 鎷兼帴鏃ユ湡
@@ -998,83 +1137,121 @@
beginTime: after10MinBegin,
endTime: after40MinEnd
};
+
// 璇锋眰鍓嶅崐娈�
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;
+ //鐢╪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);
+
+ console.log('鍓嶅悗鏁版嵁涓猴細', this.beforeData, this.afterData);
+ this.allExceptionTimeData = [
+ ...this.beforeData,
+ ...tempArr,
+ ...this.afterData
+ ];
+ console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData);
+
+ // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
+ this.setExceptionData(this.allExceptionTimeData);
+
+ //灞曠ず鍥惧舰
+ // x杞存棩鏈熸椂闂�
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ // 杩炵画鐨勬椂闂�
+ let dateListTemp = []
+ let fumeExceedingTemp = []
+
+ 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
+ );
+ }
+ }
+ // 鏃堕棿杩炵画
+ // for(let i =0;i<dateList.length-1;i++){
+ // if(this.isTimeDifferenceGreaterThan10Minutes(dateList[i],dateList[i+1])){
+ // dateListTemp.push(dayjs(dateList[i]).add(10,'minute').format('YYYY-MM-DD HH:mm:ss'))
+ // fumeExceedingTemp.push(null)
+ // }else{
+ // dateListTemp.push(dateList[i])
+ // fumeExceedingTemp.push(fumeExceeding[i])
+ // }
+ // }
+ // 鏃堕棿杩炵画
+ let objData= this.generateTimePoints(dateList,fumeExceeding);
+ dateListTemp = objData['time']
+ fumeExceedingTemp = objData['data']
+
+ //灞曠ず鎶樼嚎鍥�
+ // this.chart = null;
+ // console.log('x杞寸殑鏃ユ湡涓猴細',dateList);
+ // console.log('寮�濮嬪拰缁撴潫鏃ユ湡涓猴細',this.abnormalBt,this.abnormalEt);
+ let dateList1 = [];
+ dateListTemp.forEach((item) => {
+ dateList1.push(dayjs(item).format('HH:mm'));
+ });
+ this.abnormalBt = dayjs(this.abnormalBt).format('HH:mm');
+ this.abnormalEt = dayjs(this.abnormalEt).format('HH:mm');
+
+ // console.log('鍙樺寲鐨勬暟鎹細',dateList1);
+ // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalBt);
+ // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalEt);
+
+ if (this.char1) {
+ this.char1.dispose();
+ }
+
+ this.linechart(
+ dateList1,
+ this.abnormalBt,
+ this.abnormalEt,
+ fumeExceedingTemp
+ );
+ });
});
- // 璇锋眰鍚庡崐娈�
- axiosInstanceInstance
- .get('/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.isExceedShow = true;
+ this.isOfflineShow = false;
// // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
// this.abnormalTimeTenMinute = []
this.isAbnormal = false;
@@ -1094,6 +1271,8 @@
let beginTime = new Date(dateList[0]);
const endTime = new Date(dateList[dateList.length - 1]);
+ let beginT = dayjs(beginTime).format('HH:mm');
+ let endT = dayjs(endTime).format('HH:mm');
// 寰�鍓�30鍒嗛挓
const before30MinBegin = dayjs(beginTime)
.subtract(30, 'minute')
@@ -1109,7 +1288,7 @@
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,
@@ -1125,167 +1304,213 @@
.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;
- });
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result) => {
+ this.afterData = result.data.data;
+ let before = [];
+ let after = [];
+ console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData);
- 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
- );
- }
- }
-
- // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
- 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
- },
- tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
- // 淇濆瓨涓哄浘鐗�
- 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'
+ // 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
+ for (let i = this.beforeData.length - 1; i >= 0; i--) {
+ if (this.beforeData[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (this.beforeData[i].mvFumeConcentration2 < 1) {
+ before.unshift(this.beforeData[i]);
+ }
}
- ]
- },
- series: [
- {
- name: '娌圭儫瓒呮爣鏁版嵁',
- type: 'line',
- data: fumeExceeding1,
+ console.log('before:', before);
+ for (let i = this.afterData.length - 1; i >= 0; i--) {
+ if (this.afterData[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (this.afterData[i].mvFumeConcentration2 < 1) {
+ after.unshift(this.afterData[i]);
+ }
+ }
+ console.log('after:', after);
+ this.allExceptionTimeData = [
+ ...before,
+ ...this.exceedingData,
+ ...after
+ ];
- // 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'
+ // x杞存棩鏈熸椂闂�
+ let dateList1 = [];
+
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding1 = [];
+ 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
+ );
+ }
+ }
+ let dateListLine = [];
+ let fumeExceedingTemp = [];
+
+ console.log('澶勭悊鍓嶆暟鎹负锛�', dateList1);
+
+
+ // 棰楃矑搴�10鍒嗛挓鏃堕棿杩炵画
+ let objData= this.generateTimePoints(dateList1,fumeExceeding1);
+ dateListLine = objData['time']
+ fumeExceedingTemp = objData['data']
+
+ console.log('澶勭悊鍚庢椂闂翠负锛�', dateListLine);
+ console.log('澶勭悊鍚庢暟鎹负锛�', fumeExceedingTemp);
+
+ // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ let startIndex = dateListLine.findIndex(
+ (item) => item === dateList[0]
+ );
+ let endIndex = dateListLine.findIndex(
+ (item) => item === dateList[dateList.length - 1]
+ );
+
+ let dateListTemp = [];
+ dateListLine.forEach((item) => {
+ dateListTemp.push(dayjs(item).format('HH:mm'));
+ });
+
+ // 渚涚數寮傚父鎴栨帀绾垮浘褰hart1瀹炰緥涓虹┖
+ if (this.chart1 != null) {
+ this.chart1 == null;
+ }
+ if (this.chart2 == null || this.chart2 == undefined) {
+ this.chart2 = echarts.init(this.$refs.chart2);
+ }
+ console.log(dateListTemp);
+ console.log(fumeExceedingTemp)
+ let temp = fumeExceedingTemp.map((item) => {
+ if (item >= 1) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
+ }
+ };
+ }
+ return item;
+ })
+ console.log(temp);
+ this.chart2.setOption({
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
},
- label: {
- show: true,
- position: 'end',
- formatter: '{b}'
- }
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
}
},
- data: [
- {
- name: '棰勮',
- type: 'average',
- yAxis: 1,
- lineStyle: {
- // color: '#ff0000'
+ xAxis: {
+ data: dateListTemp,
+ 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: temp,
+
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [
+ [
+ {
+ name: '瓒呮爣鏃堕棿娈�',
+ xAxis: beginT
+ },
+ {
+ xAxis: endT
+ }
+ ]
+ ]
+ },
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '瓒呮爣',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
}
}
]
- }
- }
- ]
+ });
+ });
});
- }, 500);
}
},
getDeviceInfo() {
@@ -1341,32 +1566,32 @@
},
// 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
- getAllData() {
- this.isNoData = false;
- this.loading = true;
- 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);
- });
+ // getAllData() {
+ // this.isNoData = false;
+ // this.loading = true;
+ // 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) {
+ // ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ // this.isNoData = true;
+ // return;
+ // }
+ // this.isNoData = false;
+ // // 榛樿鏄剧ず绗竴椤�
+ // this.handleCurrentChange(1);
+ // });
- // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
- setTimeout(() => {
- 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);
- });
- }, 500);
- },
+ // // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
+ // setTimeout(() => {
+ // 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);
+ // });
+ // }, 500);
+ // },
getAbnormalDataByClick(val) {
this.abnormalData = val;
@@ -1414,7 +1639,7 @@
this.exception2 = result.data.data;
});
},
-
+
// 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁
getRecentSevenDays() {
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
@@ -1435,7 +1660,7 @@
.get('/fume/abnormalone', { params: params })
.then((response) => {
if (response.data.data.length == 0) {
- alert('璇ユ椂娈垫棤鏁版嵁');
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
return;
}
// 淇濆瓨杩斿洖鐨�
@@ -1447,17 +1672,15 @@
this.loading = false;
});
}
- },
-
+ }
};
</script>
<style scoped>
-
.exception-root-container {
margin: 20px;
padding: 10px;
- border: 1px;
+ border: 1px;
height: 615px;
/* min-height: 80vh;
min-width: 100vh; */
@@ -1515,6 +1738,7 @@
color: var(--el-color-primary);
}
.collapse-header {
+ margin-left: 5px;
font-size: 18px;
}
.collapse-header-text {
@@ -1527,11 +1751,10 @@
.box-card-label {
font-size: 14px;
white-space: nowrap;
- overflow-x: auto;
+ /* overflow-x: auto; */
}
:deep().el-card {
border-radius: 9px;
-
}
/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
:deep().el-dialog {
@@ -1541,14 +1764,14 @@
border-radius: 9px;
}
:deep().table-page .el-card__body {
- padding: 0px;
+ /* padding: 0px; */
}
.table-text {
font-size: 18px;
- margin-bottom: 10px;
+ margin: 5px 0px 10px 4px;
}
.text-blank {
- margin-left: 10px;
+ margin-right: 10px;
}
/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
.describe-info {
@@ -1563,7 +1786,6 @@
font-weight: bold;
}
-
/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
.table-line-num {
font-weight: bold;
@@ -1572,22 +1794,21 @@
.button_info.el-button_inner {
text-align: left;
}
-:deep().el-collapse .el-collapse-item__content{
+:deep().el-collapse .el-collapse-item__content {
padding-bottom: 0px;
}
.box-card {
height: 190px;
}
:deep().box-card .el-card__body {
- padding: 5px;
+ /* padding: 5px; */
}
.sub-box-card {
height: 100px;
- overflow-y: auto;
border: 0px;
}
:deep().sub-box-card .el-card__body {
- padding: 0px;
+ /* padding: 0px; */
}
.mx-1 {
margin-bottom: 0px;
diff --git a/src/test/TestSelect.vue b/src/test/TestSelect.vue
index 6273f74..03d495f 100644
--- a/src/test/TestSelect.vue
+++ b/src/test/TestSelect.vue
@@ -1,60 +1,99 @@
-<!-- <script >
-import {store} from '../utils/status.js'
- export default {
- data() {
- return{
- store
- }
- },
- methods: {
-
+<script>
+import ExceptionTypeLineChart from '../sfc/ExceptionTypeLineChart.vue';
+import dayjs from 'dayjs';
+export default {
+ components: {
+ ExceptionTypeLineChart
+ },
+ data() {
+ return {
+ xAxis: [
+ '2023-07-20 12:00:00',
+ '2023-07-20 12:10:00',
+ '2023-07-20 12:20:00',
+ '2023-07-20 12:30:00',
+ '2023-07-20 12:40:00'
+ ],
+ yAxis: [0.4, 0.9, 0.1, 1.5, 0.3]
+ };
+ },
+ mounted() {
+ this.descTenTime()
+ },
+ methods: {
+ findTimeInExceptionData(data,time){
+ for(let i=0;i<data.length;i++){
+ if(data[i]['mvDataTime'] == time) {
+ return data[i]['mvFumeConcentration2']
+ }
}
-}
+ return -1
+ },
+ // 鍙傛暟锛氬姞涓婂墠鍚庡尯闂寸殑寮傚父鏁版嵁锛屾椂闂村瓧绗︿覆
+ // 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
+
+ // 鍙傛暟:鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
+ // 鍔熻兘锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�10鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
+ keepContinuousByEachTenMinutes(intervalStarTime,intervalEndTime,headAndTailExceptionData){
+ let xAxis = []
+ let yAxis = []
+ let obj = {}
+ let current = intervalStarTime
+ let tail = dayjs(intervalEndTime).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')
+ while(current != tail){
+ let value = this.findTimeInExceptionData(headAndTailExceptionData,current)
+ if(value!= -1){
+ xAxis.push(current)
+ yAxis.push(value)
+ }else {
+ xAxis.push(current)
+ yAxis.push(null)
+ }
+ current = dayjs(current).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')
+ }
+ obj['xAxis'] = xAxis
+ obj['yAxis'] = yAxis
+ return obj
+ },
+ test(){
+ let data = [
+ { mvDataTime: '2023-07-20 12:30:00', mvFumeConcentration2: '0.2' },
+ { mvDataTime: '2023-07-20 12:40:00', mvFumeConcentration2: '0.3' },
+ { mvDataTime: '2023-07-20 12:50:00', mvFumeConcentration2: '0.2' },
+ { mvDataTime: '2023-07-20 13:10:00', mvFumeConcentration2: '0.9' },
+ ];
+let obj = this.keepContinuousByEachTenMinutes('2023-07-20 12:00:00','2023-07-20 13:50:00',data)
+console.log(obj)
+ },
+ descTenTime(begin, end) {
+ let time = [];
+ if(begin == end){
+ time.push(begin)
+ return time
+ }
+ // 淇濈暀缁撴灉 00 10 20 30
+ 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;
+ },
+ }
+};
</script>
<template>
<div>
- <el-button @click="store.increment()">澧炲姞</el-button>
- <div>count:{{ store.count }}</div>
+ <ExceptionTypeLineChart
+ :xData="xAxis"
+ :yData="yAxis"
+ ></ExceptionTypeLineChart>
</div>
</template>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-</style> -->
-
-<!-- <script setup>
-
-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
- }
- }
-
-}
-</script>
diff --git a/src/utils/request.js b/src/utils/request.js
index 1bfe086..13d5b5a 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,7 +1,7 @@
import axios from 'axios'
-const baseUrl = 'http://114.215.109.124:8803' // 鍩虹URL
-// const baseUrl = 'http://localhost:8081' // 鍩虹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/views/ExceedingFume.vue b/src/views/ExceedingFume.vue
index 959c747..a95ec8f 100644
--- a/src/views/ExceedingFume.vue
+++ b/src/views/ExceedingFume.vue
@@ -1,42 +1,32 @@
<template>
- <div class="exception-root-container">
+ <el-row ref="h1">
+ <el-col>
<!-- 鑿滃崟璇绘爣棰� -->
<div ref="h1" class="header-container">
<span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
<!-- 搴楅摵鍚� 绾ц仈 -->
<ShopNameAndID
@submit-id="(n) => (deviceId[1] = n)"
- :devId="鍏ㄩ儴"
></ShopNameAndID>
<!-- 寮傚父绫诲瀷閫夋嫨 -->
<ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
</ExceptionType>
- <!-- <div style="display: flex"> -->
- <!-- <span class="describe-time-text">璧锋鏃堕棿锛�</span> -->
- <!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
<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
- > -->
- <!-- 鍋氭垚琛ㄥ崟 -->
+ <div
+ ref="h2"
+ style="display: flex; margin-top: 2px; justify-content: right"
+ >
+
<el-button
type="primary"
plain
@click="showTable"
style="margin-left: 20px"
>鏌ヨ</el-button
- >
- <el-button
- type="warning"
- plain
- @click="getAllData"
- style="margin-left: 20px"
- >鏌ヨ鍏ㄩ儴</el-button
>
<el-tooltip
@@ -56,10 +46,10 @@
</el-icon>
</el-tooltip>
</div>
- <div style="display: flex; justify-content: right">
+ <div style="display: flex; justify-content: right;margin-right:40px">
<span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
- >
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ >
</div>
<br />
@@ -72,7 +62,7 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <h4 class="collapse-header"> 寮傚父鍒嗘瀽</h4>
+ <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
<el-icon class="header-icon">
<i-ep-info-filled />
</el-icon>
@@ -84,119 +74,172 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
-
</el-tooltip>
</template>
<el-card class="box-card">
<el-row :gutter="25">
<el-col :span="8">
- <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 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
- >
- <span style="margin-left: 150px; font-size: 14px">
- 鍗犳瘮锛歿{
- ((exception0.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- >
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception0.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception0.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
</div>
<hr />
<div class="box-card-butcontainer">
- <el-card class="sub-box-card">
- <ExceptionText
- v-for="(item,index) in exception0"
- :key="item"
- :devId="item.devId"
- exception-value="0"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >
- {{ item.diName }}
- <span v-if="index<exception0.length-1" class="text-blank"> , </span>
- </ExceptionText>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <ExceptionText
+ v-for="(item, index) in exception0"
+ :key="item"
+ :devId="item.devId"
+ exception-value="0"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span
+ v-if="index < exception0.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </ExceptionText>
+ </el-scrollbar>
</el-card>
</div>
</el-col>
<el-col :span="8">
- <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 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
- >
- <span style="margin-left: 150px; font-size: 14px">
- 鍗犳瘮锛歿{
- ((exception1.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- >
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception1.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception1.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
</div>
<hr />
<div>
-
- <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>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <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-scrollbar>
+ </el-card>
</div>
</el-col>
<el-col :span="8">
- <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 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
- >
- <span style="margin-left: 150px; font-size: 14px">
- 鍗犳瘮锛歿{
- ((exception2.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- >
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception2.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception2.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
</div>
<hr />
<div>
- <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 class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <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-scrollbar>
</el-card>
</div>
</el-col>
@@ -204,21 +247,23 @@
</el-card>
</el-collapse-item>
</el-collapse>
- <!-- <hr/>
+ <!-- <hr/>
<br> -->
- <h4 class="table-text"> 寮傚父鏁版嵁</h4>
+ <h4 class="table-text">寮傚父鏁版嵁</h4>
+ <!-- -->
+ </el-col>
+</el-row>
<el-card class="table-page" v-show="!isNoData">
-
<el-table
+ ref="tableH"
v-loading="loading"
:data="displayData"
style="width: 100%"
- :row-class-name="tableRowClassName"
stripe
- border
- :height=tableHeight
+ border
+ :height="tableHeight"
>
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340">
+ <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" >
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.diName">
<div class="cell ellipsis">{{ row.diName }}</div>
@@ -226,7 +271,7 @@
</template>
</el-table-column>
- <el-table-column prop="devId" label="璁惧缂栧彿" width="230">
+ <el-table-column prop="devId" label="璁惧缂栧彿" >
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.devId">
<div class="cell ellipsis">{{ row.devId }}</div>
@@ -234,21 +279,21 @@
</template>
</el-table-column>
- <el-table-column prop="exception" label="寮傚父鍒嗙被" width="150">
+ <el-table-column prop="exception" label="寮傚父鍒嗙被" >
<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">
+ <el-table-column label="寮傚父绫诲瀷" >
<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">
+ <el-table-column prop="region" label="鍦板尯" >
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.region">
<div class="cell ellipsis">{{ row.region }}</div>
@@ -270,7 +315,7 @@
</el-tooltip>
</template>
</el-table-column>
- <el-table-column label="鎿嶄綔" width="200">
+ <el-table-column label="鎿嶄綔" >
<template #default="{ row }">
<el-button type="warning" @click="showDrawer(row)"
>鏌ョ湅璇︽儏</el-button
@@ -292,11 +337,11 @@
<el-empty v-show="isNoData" :image-size="200" />
<!-- 瀵硅瘽妗� -->
<div>
- <el-dialog v-model="centerDialogVisible" draggable align-center>
+ <el-dialog v-model="centerDialogVisible" draggable align-center>
<template #header>
<div style="font-size: 17px">
搴楅摵鍚嶏細{{ rowShopName }}
- <di style="margin-left: 40px">寮傚父绫诲瀷锛�</di>
+ <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>
@@ -323,8 +368,11 @@
<!-- 瓒呮爣鏁版嵁鏃� -->
<!-- 鎶樼嚎鍥� -->
- <div
- ref="chart"
+
+ <!-- 鎺夌嚎 -->
+ <!-- <div
+ ref="ref"
+ v-show="isOfflineShow"
style="
width: 100%;
height: 300px;
@@ -333,10 +381,9 @@
margin-left: 10px;
min-width: 350px;
"
- ></div>
+ ></div> -->
- <!-- v-show="!isAbnormal" -->
- <!-- 琛ㄦ牸 -->
+ <ExceptionTypeLineChart :option="option" :is-open-dialog="centerDialogVisible"></ExceptionTypeLineChart>
<!-- -->
<div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
@@ -358,26 +405,21 @@
</div>
<el-tag type="success" class="mx-1" effect="dark" round
- ><span class="table-line-lable">寮傚父璁板綍锛� </span>
+ ><span class="table-line-lable" v-show="rowExceptionType == '0'">寮傚父璁板綍锛� </span>
+ <span v-show="rowExceptionType == '1' || rowExceptionType == '2'">缂哄け鏁版嵁锛�</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 ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
import ExceptionText from '../sfc/ExceptionText.vue';
-import * as echarts from 'echarts';
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstanceInstance from '../utils/request.js';
@@ -385,22 +427,30 @@
const ShopNameAndID = defineAsyncComponent(() =>
import('../sfc/../sfc/ShopNameAndID.vue')
);
+
+// 寮傚父鍥惧舰寮傛缁勪欢
+const ExceptionTypeLineChart = defineAsyncComponent(() =>
+ import('../sfc/ExceptionTypeLineChart.vue')
+);
export default {
-
name: 'TablePage',
components: {
ExceptionType,
TimeSelect,
ShopNameAndID,
- ExceptionText
+ ExceptionText,
+ ExceptionTypeLineChart
},
data() {
return {
-
+ // 寮傚父鎶樼嚎鍥剧殑閰嶇疆
+ option: {},
+ // 鎶樼嚎鍥惧睍绀�
+ isChartShow: false,
// table鍏冪礌
- tableRef:null,
+ tableRef: null,
// 寮傚父琛ㄦ牸鏁版嵁
- tableHeight:300,
+ tableHeight: 300,
// 绌烘暟鎹姸鎬�
isNoData: false,
// 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
@@ -440,8 +490,6 @@
// 鏃犳暟鎹椂澧炲姞鐨勫悗40鍒嗛挓鏁版嵁
afterData: [],
- // 鎶樼嚎鍥惧疄渚�
- chart: null,
// -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮
selectedRowIndex: -1,
@@ -465,7 +513,8 @@
// 鎶藉眽鍔犺浇鍔ㄧ敾
loadingDrawer: true,
// 鍒嗛〉灞曠ず鏁版嵁
- // 姣忛〉灞曠ず鐨勬暟鎹�
+
+ // 寮傚父琛ㄧ殑鏁版嵁
displayData: [],
// 瀛樻斁鍚庣杩斿洖鐨刯son鏁版嵁
jsonData: [],
@@ -485,7 +534,7 @@
endTime: '',
// 寮傚父琛ㄦ暟鎹�
abnormalData: [],
- // 璇ユ椂娈电殑璇︾粏瓒呮爣鏁版嵁
+ // 寮瑰嚭鐨勫璇濇涓殑寮傚父琛ㄦ牸鏁版嵁
exceedingData: [],
drawerVisible: false,
// 琛ㄦ牸鐨勪竴琛屾暟鎹�
@@ -504,38 +553,24 @@
optionsShop: [],
// 寮傚父绫诲瀷閫夋嫨鍣�
exceptionValue: [],
- exceptionOptions: [
- {
- value: '0',
- label: '娌圭儫娴撳害瓒呮爣'
- },
- {
- value: '1',
- label: '鐤戜技渚涚數寮傚父'
- },
- {
- value: '2',
- label: '鎺夌嚎'
- }
- ]
};
},
// 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
watch: {
selectedRowIndex(newVaue) {
- // 澶勪簬琛ㄦ牸鐨勭涓�鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
- if (newVaue === 0) {
+ // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ if (newVaue === this.displayData.length - 1) {
this.isPreCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
- if (this.isNextCantouch == true) {
+ //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isNextCantouch == true) {
this.isNextCantouch = false;
}
}
- // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
- else if (newVaue === this.displayData.length - 1) {
+ // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+ else if (newVaue === 0) {
this.isNextCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
- if (this.isPreCantouch == true) {
+ //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isPreCantouch == true) {
this.isPreCantouch = false;
}
}
@@ -552,45 +587,126 @@
},
endTime() {
this.getShopNames();
+ },
+ centerDialogVisible() {
+ window.addEventListener('resize', this.updateChart);
}
},
mounted() {
-
// 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
this.getDeviceInfo();
-
// 灞曠ず鏈�杩�7澶╂暟鎹�
this.getRecentSevenDays();
-
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
this.getShopNames();
+ this.calcTableHeight()
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('鐐瑰嚮浜�');
+ // 鍔ㄦ�佽绠楄〃鏍奸珮搴�
+ calcTableHeight(){
+ const h1 = this.$refs.h1.$el.offsetHeight;
+ const h2 = this.$refs.h4.$el.offsetHeight;
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
},
+
+ // 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
+ isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
+ const date1 = new Date(dateString1);
+ const date2 = new Date(dateString2);
+
+ // 璁＄畻涓や釜鏃ユ湡鐨勬椂闂村樊锛堟绉掞級
+ const timeDifferenceMs = Math.abs(date1 - date2);
+
+ // 杞崲涓哄垎閽�
+ const timeDifferenceMinutes = Math.floor(timeDifferenceMs / (1000 * 60));
+
+ // 鍒ゆ柇鏃堕棿宸槸鍚﹀ぇ浜�10鍒嗛挓
+ return timeDifferenceMinutes > 10;
+ },
+
+ // 浠�10鍒嗛挓涓洪棿闅旇繑鍥炴椂闂村瓧绗︿覆鏁扮粍
+ generateTimePoints(timePoints, yAxisData) {
+ let updatedTimePoints = [];
+ let yAxisDataAdressed = [];
+ for (let i = 0; i < timePoints.length; i++) {
+ updatedTimePoints.push(timePoints[i]);
+ yAxisDataAdressed.push(yAxisData[i]);
+ if (i < timePoints.length - 1) {
+ let current = timePoints[i];
+ let next = timePoints[i + 1];
+ while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
+ console.log('generateTimePoints');
+ current = dayjs(current)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ updatedTimePoints.push(current);
+ yAxisDataAdressed.push(null);
+ }
+ }
+ }
+ let obj = {};
+ obj['time'] = updatedTimePoints;
+ obj['data'] = yAxisDataAdressed;
+ return obj;
+ },
+
+ isExceedOneMonth(dateStr1, dateStr2) {
+ // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse
+ // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄
+ const date1 = new Date(dateStr1);
+ const date2 = new Date(dateStr2);
+
+ // 鑾峰彇涓や釜鏃ユ湡鐨勫勾銆佹湀銆佹棩
+ const year1 = date1.getFullYear();
+ const month1 = date1.getMonth();
+ const day1 = date1.getDate();
+
+ const year2 = date2.getFullYear();
+ const month2 = date2.getMonth();
+ const day2 = date2.getDate();
+ console.log(month1, month2);
+
+ // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
+ if (year1 === year2) {
+ // 骞翠唤鐩哥瓑锛屾瘮杈冩湀浠藉樊鍊�
+ if (Math.abs(month1 - month2) === 1) {
+ // 鏈堜唤宸�间负1锛岃繕闇�瑕佸垽鏂叿浣撴棩鏈�
+ if (
+ (month1 < month2 && day1 < day2) ||
+ (month1 > month2 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+ } else if (Math.abs(year1 - year2) === 1) {
+ // 骞翠唤宸�间负1锛屾瘮杈冩湀浠藉拰鏃ユ湡
+ if (
+ (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
+ (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+
+ // 榛樿杩斿洖false锛岃〃绀轰袱涓棩鏈熷瓧绗︿覆涓嶇浉宸竴涓湀
+ return false;
+ },
+
// 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
// 鍥惧舰鍝嶅簲寮忓彉鍖�
- updateChart() {
- this.$nextTick(() => {
- if (this.chart) {
- this.chart.resize();
- }
- });
- },
+ // updateChart() {
+ // this.$nextTick(() => {
+ // if (this.chart1) {
+ // this.chart1.resize();
+ // }
+ // if (this.chart2) {
+ // this.chart2.resize();
+ // }
+ // });
+ // },
// 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
@@ -598,11 +714,15 @@
this.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
+ // 鍙傛暟锛氬紓甯哥殑寮�濮嬪拰缁撴潫鏃堕棿銆傝繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�10鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€��
+ // 姣斿12:00:00-13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:10:00 ,12:20:00,12:30:00....13:00:00
descTenTime(begin, end) {
- // 淇濈暀缁撴灉
let time = [];
+ if(begin == end){
+ time.push(begin)
+ return time
+ }
+ // 淇濈暀缁撴灉 00 10 20 30
let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
while (temp != end) {
time.push(temp);
@@ -610,7 +730,6 @@
}
// 鍔犱笂寮傚父鐨勭粨鏉熸椂闂�
time.push(temp);
-
return time;
},
@@ -621,22 +740,18 @@
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(
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
+ const abnormalTimeTenMinute = this.descTenTime(
this.rowBeginTime,
this.rowEndTime
- );
+ )
+ // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
+ this.exceedingData = []
+
for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
this.exceedingData.push({
mvStatCode: this.rowMvStatCode,
@@ -645,6 +760,7 @@
mvFumeConcentration2: ''
});
}
+
// 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
this.exceptionTotal = abnormalTimeTenMinute.length;
},
@@ -654,69 +770,54 @@
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;
- }
-
- axiosInstanceInstance
- .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
-
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ if (this.selectedRowIndex !== 0) {
//寰楀埌涓婁竴琛屾暟鎹储寮�
+ this.selectedRowIndex = this.selectedRowIndex - 1;
+ //璇锋眰鏁版嵁 鏀瑰彉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;
+ }
+
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ // this.chart = null;
+ // this.drawChart();
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ });
+ }
+ //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
+ else{
+ console.log(null);
+ }
+ },
+
+ // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
+ getPreviousRowData() {
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ if (this.selectedRowIndex < this.displayData.length - 1) {
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+
this.selectedRowIndex = this.selectedRowIndex + 1;
console.log('涓�', this.selectedRowIndex);
- console.log(this.displayData[this.selectedRowIndex]);
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
this.setinfo(this.selectedRowIndex);
let params = {};
@@ -735,21 +836,14 @@
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
- console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
console.log(this.exceedingData);
- this.chart = null;
- this.drawChart();
+ this.drawChartTest();
this.exceptionTotal = this.exceedingData.length;
});
}
//琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
else {
console.log(null);
- // 璀﹀憡
- // ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�');
-
- // 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
- // this.isNextCantouch = true
}
},
@@ -759,15 +853,12 @@
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) {
@@ -784,25 +875,19 @@
.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.drawChartTest();
this.exceptionTotal = this.exceedingData.length;
});
},
// 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
showTable() {
- if (this.beginTime > this.endTime) {
- alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿');
+ if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
+ alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
return;
}
let params = {};
- // params['page'] = this.startIndex
- // params['pageSize'] = 10
+
if (this.deviceId[1]) {
params['devId'] = this.deviceId[1];
}
@@ -825,7 +910,7 @@
this.total = this.abnormalData.length;
this.loading = false;
if (response.data.data.length == 0) {
- alert('璇ユ椂娈垫棤鏁版嵁');
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
this.isNoData = true;
return;
}
@@ -842,19 +927,10 @@
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);
+ this.displayData = this.abnormalData.slice(startIndex, endIndex);
},
//鐩稿樊澶氬皯涓崄鍒嗛挓 璁＄畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
@@ -870,424 +946,479 @@
return diffInTenMinutes;
},
- // 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥�
- linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
- this.chart = echarts.init(this.$refs.chart);
- // $('#ModalGrade').on('shown.bs.modal', function(){
- // this.chart.resize()
- // })
- this.chart.setOption({
- title: {
- // text: '娌圭儫瓒呮爣鏁版嵁',
- // left: 'center'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
+ // 鍙傛暟锛氬紓甯哥殑寮�濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬��
+ // 鍔熻兘锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�30鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗40鍒嗛挓鐨勬椂闂寸偣
+ before30AndAfter40(begin, end) {
+ let time = [];
+ const before30MinBegin = dayjs(begin)
+ .subtract(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ // 鍚庝竴娈电殑寮�濮嬫椂闂�
+ const after10MinBegin = dayjs(end)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ // 寰�鍚�40鍒嗛挓
+ const after40MinEnd = dayjs(end)
+ .add(40, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ time.push(before30MinBegin);
+ time.push(after10MinBegin);
+ time.push(after40MinEnd);
+ return time;
+ },
+
+ // 鍙傛暟锛氳澶囩紪鍙凤紝 寮�濮嬫椂闂达紝 缁撴潫鏃堕棿
+ // 鍔熻兘锛氳繑鍥炴煇璁惧鍦ㄨ鏃舵鍘嗗彶鏁版嵁鐨刧et璇锋眰鍙傛暟銆�
+ requestGetParms(devnum, begin, end) {
+ return {
+ devId: devnum,
+ beginTime: begin,
+ endTime: end
+ };
+ },
+ // 鍙傛暟锛氬璞℃暟缁�(璇ュ璞′腑鐨勫睘鎬т笉鑳芥槸寮曠敤绫诲瀷锛屽惁鍒欐嫹璐濈殑鍊艰繕鏄細鐩镐簰褰卞搷)
+ // 鍔熻兘锛氭嫹璐濊瀵硅薄鏁扮粍銆�
+ shallowCopyList(itemIsObjOfList) {
+ let tempList = [];
+ itemIsObjOfList.forEach((item) => {
+ tempList.push({ ...item });
+ });
+ return tempList;
+ },
+
+ // 鍙傛暟锛氭坊鍔犻灏炬椂闂存暟鎹殑寮傚父鏁版嵁鏁扮粍(鍏冪礌涓哄璞�)
+ // 鍔熻兘锛氬涓棿寮傚父鍖洪棿鏃堕棿鍜屽�艰繘琛岃ˉ鍏咃紝杩斿洖澶勭悊鍚庣殑缁撴灉
+ // 璇︾粏鎻忚堪锛氶亶鍘嗘暟缁勶紝褰撳彂鐜版暟缁勫厓绱犱负绌烘椂锛岃缃鍏冪礌鐨勬椂闂翠负涓婁竴涓厓绱犳椂闂寸殑鍚�10鍒嗛挓锛屽苟鎶婃祿搴﹀�艰缃负null(涓婁釜鍏冪礌鐨勬椂闂翠竴瀹氫笉涓虹┖锛屾棤闇�鍐嶅幓鍒ゆ柇涓婁釜鍏冪礌涓虹┖鐨勬儏鍐�)銆�
+ addTenMinutes(exceptionDataArr) {
+ // x杞� 鏃ユ湡鏃堕棿
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ let obj = {};
+ for (let i = 0; i < exceptionDataArr.length; i++) {
+ if (exceptionDataArr[i] == null) {
+ //x杞存棩鏈熴�傚厓绱犱负null鏃讹紝 璁剧疆璇ュ厓绱犵殑鏃堕棿涓哄墠涓�鍏冪礌鐨勬椂闂村悗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(exceptionDataArr[i].mvDataTime);
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding.push(exceptionDataArr[i].mvFumeConcentration2);
+ }
+ }
+ obj['dateList'] = dateList;
+ obj['fumeExceeding'] = fumeExceeding;
+ return obj;
+ },
+
+ // 鍙傛暟锛氬姞涓婂墠鍚庡尯闂寸殑寮傚父鏁版嵁锛屾椂闂村瓧绗︿覆
+ // 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
+ findTimeInExceptionData(data, time) {
+ for (let i = 0; i < data.length; i++) {
+ if(data[i]==null){
+ continue
+ }
+ if (data[i]['mvDataTime'] == time) {
+ return data[i]['mvFumeConcentration2'];
+ }
+ }
+ return -1;
+ },
+ // 鍙傛暟:鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
+ // 鍔熻兘锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�10鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
+ keepContinuousByEachTenMinutes(
+ intervalStarTime,
+ intervalEndTime,
+ headAndTailExceptionData
+ ) {
+ let xAxis = [];
+ let yAxis = [];
+ let obj = {};
+ let current = intervalStarTime;
+ let tail = dayjs(intervalEndTime)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ while (current != tail) {
+ let value = this.findTimeInExceptionData(
+ headAndTailExceptionData,
+ current
+ );
+ if (value != -1) {
+ xAxis.push(current);
+ yAxis.push(value);
+ } else {
+ xAxis.push(current);
+ yAxis.push(null);
+ }
+ current = dayjs(current)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+
+ }
+ obj['xAxis'] = xAxis;
+ obj['yAxis'] = yAxis;
+ return obj;
+ },
+
+ // 鍙傛暟锛氳秴鏍囨暟鎹墠闈㈠尯闂寸殑鏁版嵁
+ // 鍔熻兘锛氳繑鍥為櫎鍘绘渶鍚庝竴涓厓绱犵殑鏁扮粍
+ removeLastItemOfBeforeData(beforeDataOfExceeding){
+ let tempList = [];
+ if(beforeDataOfExceeding.length ==1){
+ return tempList
+ }else{
+ for(let i=0;i<beforeDataOfExceeding.length-1;i++){
+ tempList.push({ ...beforeDataOfExceeding[i]})
+ }
+ return tempList;
+ }
+ },
+
+
+
+ // 璁剧疆option
+ // 鍙傛暟锛歺杞存椂闂达紝 y杞存补鐑熸祿搴︼紝 寮傚父绫诲埆(0浠ｈ〃瓒呮爣锛�1浠ｈ〃渚涚數寮傚父鍜屾帀绾�), 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣
+ setOption(
+ xData,
+ yData,
+ exceptionCategory,
+ exceptionBeginTime,
+ exceptionEndTime,
+ beginIndex,
+ endIndex
+ ) {
+ this.option = {}
+ // 瓒呮爣
+ if (exceptionCategory == 0) {
+ this.option = {
+ tooltip: {},
toolbox: {
// 宸ュ叿鏍�
feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
-
+ // 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} %'
+ xAxis: {
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3);
+ }
+ }
},
- 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
- };
- // 璇锋眰鍓嶅崐娈�
- 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;
- });
-
- //鐢╪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]);
-
- // 寰�鍓�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
- );
- }
- }
-
- // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
- 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
- },
- tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
- // 淇濆瓨涓哄浘鐗�
- 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}'
- }
+ yAxis: {
+ type: 'value',
+ name: 'mg/m鲁',
+ },
+ series: [
+ {
+ name: '娌圭儫娴撳害',
+ type: 'line',
+ data: yData.map((item) => {
+ if (item >= 1) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
}
- },
- data: [
+ };
+ }
+ return item;
+ }),
+ // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [
+ [
{
- name: '棰勮',
- type: 'average',
- yAxis: 1,
- lineStyle: {
- // color: '#ff0000'
- color: 'red'
- }
+ name: '瓒呮爣鏃堕棿娈�',
+ xAxis: exceptionBeginTime,
+ },
+ {
+ xAxis: exceptionEndTime,
}
]
- }
+ ]
+ },
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '瓒呮爣',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ],
+ // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: beginIndex,
+ color: 'green'
+ },
+ {
+ gt: beginIndex,
+ lte: endIndex,
+ color: 'red'
+ },
+ {
+ gt: endIndex,
+ lte: xData.length - 1,
+ color: 'green'
}
]
- });
- }, 500);
+ }
+ };
+ }
+ // 渚涚數寮傚父鍜屾帀绾�
+ else if (exceptionCategory == 1) {
+ this.option = {
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3);
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'mg/m鲁'
+ },
+ series: [
+ {
+ name: '娌圭儫鏁版嵁',
+ type: 'line',
+ data: yData,
+ markLine: {
+ silent: true,
+ data: [
+ // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
+ {
+ name: '鏃犳暟鎹�',
+ xAxis: exceptionBeginTime
+ },
+ {
+ xAxis: exceptionEndTime
+ }
+ ],
+ lineStyle: {
+ color: 'red'
+ }
+ }
+ }
+ ]
+ };
}
},
+
+
+ // 鍔熻兘锛氱偣鍑� 鈥樻煡鐪嬭鎯呪�欙紝 鈥樹笅涓�鏉♀�欐寜閽椂浼� 鍏堥�昏緫璁＄畻銆傛渶鍚庡睍绀哄浘褰�
+ drawChartTest() {
+ this.beforeData = []
+ this.afterData= []
+ this.allExceptionTimeData = []
+ //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
+ let exceptionBeginTime =this.rowBeginTime
+ let exceptionEndTime = this.rowEndTime
+
+ // beforeAndAfterTime[0]:鍓�30鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[1]:鍚�10鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[2]:鍚�40鍒嗛挓鐨勬椂闂寸偣
+ let beforeAndAfterTime = this.before30AndAfter40(
+ exceptionBeginTime,
+ exceptionEndTime
+ );
+
+ // 鏋勯�犲紓甯告椂闂村墠鐨勫尯闂存暟鎹姹傚弬鏁�
+ let paramsBefore = this.requestGetParms(
+ this.displayData[this.selectedRowIndex].devId,
+ beforeAndAfterTime[0],
+ this.displayData[this.selectedRowIndex].beginTime
+ );
+
+ // 鏋勯�犲紓甯告椂闂村悗鐨勫尯闂存暟鎹姹傚弬鏁�
+ let paramsAfter = this.requestGetParms(
+ this.displayData[this.selectedRowIndex].devId,
+ beforeAndAfterTime[1],
+ beforeAndAfterTime[2]
+ );
+
+ // 璇锋眰鍓嶅崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
+ .then((result1) => {
+ this.beforeData = result1.data.data;
+ console.log('beforeData:',this.beforeData);
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result2) => {
+ this.afterData = result2.data.data;
+ console.log('afterData:',this.afterData);
+ //淇濆瓨寮傚父鍖洪棿鐨勫��
+ let tempArr = [];
+ // 淇濆瓨寮傚父鍖洪棿鍓嶅悗鐨勫��
+ let before = [];
+ let after = [];
+
+ // 鍒ゆ柇鏄惁鏄緵鐢靛紓甯告垨鎺夌嚎
+ if (
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ // 閲嶆瀯琛ㄦ牸 缂哄け寮傚父鏁版嵁鑷姩濉厖
+ this.setExceptionData();
+
+ //鐩稿樊鍑犱釜10鍒嗛挓
+ const TenMinuteNum = this.diffTenMinutesNum(
+ exceptionBeginTime,
+ exceptionEndTime
+ );
+ //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂�
+ for (let i = 0; i < TenMinuteNum; i++) {
+ tempArr.push(null);
+ }
+ before = this.shallowCopyList(this.beforeData);
+
+ after = this.shallowCopyList(this.afterData);
+ // after = this.afterData
+ console.log('after:',after);
+ }
+ // 瓒呮爣
+ else {
+ let beforeTemp = this.removeLastItemOfBeforeData(this.beforeData)
+ // 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
+ for (let i = beforeTemp.length - 1; i >= 0; i--) {
+ if (beforeTemp[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (beforeTemp[i].mvFumeConcentration2 < 1) {
+ before.unshift(this.beforeData[i]);
+ }
+ }
+
+ for (let i = 0; i<this.afterData.length; i++) {
+ if (this.afterData[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (this.afterData[i].mvFumeConcentration2 < 1) {
+ after.unshift(this.afterData[i]);
+ }
+ }
+ tempArr = this.shallowCopyList(this.exceedingData);
+ }
+
+ // 灏嗗墠鍚庡尯闂存暟鎹� 涓� 寮傚父鍖洪棿鏁版嵁 鍚堝苟
+ this.allExceptionTimeData = [...before, ...tempArr, ...after];
+ console.log('缁勫悎鏁版嵁锛�',this.allExceptionTimeData);
+ // x杞存棩鏈熸椂闂�
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ let timeAndValue = {};
+
+ // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
+ timeAndValue = this.keepContinuousByEachTenMinutes(
+ beforeAndAfterTime[0],
+ beforeAndAfterTime[2],
+ this.allExceptionTimeData
+ );
+
+ dateList = timeAndValue['xAxis'];
+ fumeExceeding = timeAndValue['yAxis'];
+
+ console.log('dateList:',dateList);
+ console.log('fumeExceeding:',fumeExceeding);
+
+ // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ let startIndex = dateList.findIndex(
+ (item) => item === exceptionBeginTime
+ );
+ let endIndex = dateList.findIndex(
+ (item) => item === exceptionEndTime
+ );
+
+ // 渚涚數寮傚父鍜屾帀绾挎儏鍐� 瓒呮爣鎯呭喌
+ if (
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ this.setOption(
+ dateList,
+ fumeExceeding,
+ 1,
+ exceptionBeginTime,
+ exceptionEndTime,
+ startIndex,
+ endIndex
+ );
+ } else {
+ // 瓒呮爣鎯呭喌
+ this.setOption(
+ dateList,
+ fumeExceeding,
+ 0,
+ exceptionBeginTime,
+ exceptionEndTime,
+ startIndex,
+ endIndex
+ );
+ }
+ });
+ });
+ },
+
getDeviceInfo() {
// 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
axiosInstanceInstance.get('/fume/device').then((result) => {
@@ -1340,34 +1471,6 @@
XLSX.writeFile(wb, '鍒嗘瀽鏁版嵁.xlsx');
},
- // 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
- getAllData() {
- this.isNoData = false;
- this.loading = true;
- 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);
- });
-
- // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
- setTimeout(() => {
- 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);
- });
- }, 500);
- },
-
getAbnormalDataByClick(val) {
this.abnormalData = val;
this.total = this.abnormalData.length;
@@ -1414,19 +1517,11 @@
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;
@@ -1435,7 +1530,7 @@
.get('/fume/abnormalone', { params: params })
.then((response) => {
if (response.data.data.length == 0) {
- alert('璇ユ椂娈垫棤鏁版嵁');
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
return;
}
// 淇濆瓨杩斿洖鐨�
@@ -1447,23 +1542,21 @@
this.loading = false;
});
}
- },
-
+ }
};
</script>
<style scoped>
-
-.exception-root-container {
+/* .exception-root-container {
margin: 20px;
padding: 10px;
- border: 1px;
+ border: 1px;
height: 615px;
- /* min-height: 80vh;
- min-width: 100vh; */
-}
+
+} */
.header-container {
display: flex;
+ margin-left: 20px;
/* flex-wrap: wrap;
align-items: center; */
}
@@ -1515,6 +1608,7 @@
color: var(--el-color-primary);
}
.collapse-header {
+ margin-left: 5px;
font-size: 18px;
}
.collapse-header-text {
@@ -1527,11 +1621,10 @@
.box-card-label {
font-size: 14px;
white-space: nowrap;
- overflow-x: auto;
+ /* overflow-x: auto; */
}
:deep().el-card {
border-radius: 9px;
-
}
/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
:deep().el-dialog {
@@ -1540,15 +1633,18 @@
overflow-y: hidden;
border-radius: 9px;
}
+.table-page {
+ margin-left: 20px;
+}
:deep().table-page .el-card__body {
- padding: 0px;
+ /* padding: 0px; */
}
.table-text {
font-size: 18px;
- margin-bottom: 10px;
+ margin: 5px 0px 10px 20px;
}
.text-blank {
- margin-left: 10px;
+ margin-right: 10px;
}
/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
.describe-info {
@@ -1563,7 +1659,6 @@
font-weight: bold;
}
-
/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
.table-line-num {
font-weight: bold;
@@ -1572,22 +1667,24 @@
.button_info.el-button_inner {
text-align: left;
}
-:deep().el-collapse .el-collapse-item__content{
+.el-collapse {
+ margin-left: 20px;
+}
+:deep().el-collapse .el-collapse-item__content {
padding-bottom: 0px;
}
.box-card {
height: 190px;
}
:deep().box-card .el-card__body {
- padding: 5px;
+ /* padding: 5px; */
}
.sub-box-card {
height: 100px;
- overflow-y: auto;
border: 0px;
}
:deep().sub-box-card .el-card__body {
- padding: 0px;
+ /* padding: 0px; */
}
.mx-1 {
margin-bottom: 0px;
diff --git a/src/views/HistoryFume.vue b/src/views/HistoryFume.vue
index 1d24f06..390c5e4 100644
--- a/src/views/HistoryFume.vue
+++ b/src/views/HistoryFume.vue
@@ -89,158 +89,7 @@
],
// 閫夋嫨搴楅摵鍚�
devId: [null,null],
- optionsShop: [
- {
- value: '浠樺皬濮愬湪鎴愰兘',
- label: '浠樺皬濮愬湪鎴愰兘',
- children: [
- {
- value: 'qinshi_31010320210010',
- label: 'qinshi_31010320210010'
- }
- ]
- },
- {
- value: '鍚夊埢鑱旂洘',
- label: '鍚夊埢鑱旂洘 ',
- children: [
- {
- value: 'qinshi_31010320200006',
- label: 'qinshi_31010320200006'
- }
- ]
- },
- {
- value: '瀹跺湪濉斿暒',
- label: '瀹跺湪濉斿暒',
- children: [
- {
- value: 'hengzhiyuan_64480047347215',
- label: 'hengzhiyuan_64480047347215'
- }
- ]
- },
- {
- value: '鐙兼潵浜�',
- label: '鐙兼潵浜� ',
- children: [
- {
- value: 'zhuoquan_31011020175012',
- label: 'zhuoquan_31011020175012'
- }
- ]
- },
- {
- value: '涔愬嚡鎾掓槦娓稿簵',
- label: '涔愬嚡鎾掓槦娓稿簵',
- children: [
- {
- value: 'qinshi_31010320200007',
- label: 'qinshi_31010320200007'
- }
- ]
- },
- {
- value: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- label: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- children: [
- {
- value: 'hengzhiyuan_64480047078091',
- label: 'hengzhiyuan_64480047078091'
- }
- ]
- },
- {
- value: '妫掔害缈�',
- label: '妫掔害缈�',
- children: [
- {
- value: 'qinshi_31010320190005',
- label: 'qinshi_31010320190005'
- }
- ]
- },
- {
- value: '寮勫爞鍜亾',
- label: '寮勫爞鍜亾',
- children: [
- {
- value: 'zhuoquan_31011020175008',
- label: 'zhuoquan_31011020175008'
- }
- ]
- },
- {
- value: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- label: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- children: [
- {
- value: 'zhuoquan_31011020175002',
- label: 'zhuoquan_31011020175002'
- }
- ]
- },
- {
- value: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- label: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- children: [
- {
- value: 'GLHB00000000016004',
- label: 'GLHB00000000016004'
- }
- ]
- },
- {
- value: '缂樺',
- label: '缂樺',
- children: [
- {
- value: 'fucheng310104200914',
- label: 'fucheng310104200914'
- }
- ]
- },
- {
- value: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- label: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- children: [
- {
- value: 'GLHB00000000016155',
- label: 'GLHB00000000016155'
- }
- ]
- },
- {
- value: '涓拌寕鐑や覆',
- label: '涓拌寕鐑や覆',
- children: [
- {
- value: 'GLHB00000000016011',
- label: 'GLHB00000000016011'
- }
- ]
- },
- {
- value: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- label: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- children: [
- {
- value: 'GLHB00000000010279',
- label: 'GLHB00000000010279'
- }
- ]
- },
- {
- value: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- label: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- children: [
- {
- value: 'GLHB00000000010504',
- label: 'GLHB00000000010504'
- }
- ]
- }
- ]
+
};
},
@@ -402,10 +251,6 @@
},
// 杩斿洖鍓嶄竴鍛ㄥ垎閽熸暟鎹〃鏁版嵁
backMinuteDataAWeekAgo() {
-
-
- // 鎵撳紑椤甸潰鍔犺浇鏈�杩戜竴鍛ㄧ殑鏁版嵁
- this.loading = true;
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
this.beginShowShopName = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
@@ -423,17 +268,19 @@
params['devId'] = 'qinshi_31010320210010';
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
-
+ 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('璇ユ椂娈垫棤鏁版嵁')
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
this.isNoData = true
return
}
- // 淇濆瓨杩斿洖鐨�
- this.exceedingData = response.data.data;
+
// 鍒嗛〉
this.total = this.exceedingData.length;
// 榛樿鏄剧ず绗竴椤�
@@ -474,7 +321,7 @@
this.loading=false
if(response.data.data.length==0){
- alert('璇ユ椂娈垫棤鏁版嵁')
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
this.isNoData = true
return
}
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 3a608c3..74fa822 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -97,7 +97,6 @@
this.outside.allDataLoaded = true;
}
});
-
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
@@ -464,12 +463,17 @@
<!-- 鍐呴儴璁惧 -->
<el-card v-if="index < inner.inFumeValue.length" height="1900px">
<template #header>
- <div class="card-header">{{ device.siteName }}</div>
+ <div class="card-header">{{ device.siteName }}
+ <img src="@/assets/inner_device.jpg" class="icon-inner"/>
+ </div>
+
</template>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
<DashBoard :data="device.value"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mnCode }}</div>
- <hr class="divider-margin" />
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
+ <div >璁惧缂栧彿锛歿{ device.mnCode }}</div>
+ <!-- <hr class="divider-margin" /> -->
+ <div class="horizontal-line"></div>
+
<div class="status" :class="{ exceed: device.value > 1 }">
{{ device.value >= 1 ? '瓒呮爣' : '' }}
</div>
@@ -482,27 +486,27 @@
<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>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
<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">
+
+ <div class="imag-container">
+ <img src="@/assets/wind.jpg" class="image"/>
+ <span class="chart-below-text"> 椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity }} </span>
+
+ <span class="chart-below-text2">
+ <img src="@/assets/purifier.jpg" class="image"/>
鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity }}
- </div>
- <hr class="divider-margin" />
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
+ </span>
+ </div>
+ <div class="horizontal-line"></div>
+ <!-- <hr class="divider-margin" /> -->
+
+ <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
+ <div class="horizontal-line"></div>
+ <!-- <hr class="divider-margin" /> -->
+ <div>璁惧渚涘簲鍟嗭細{{ device.diSupplier }}</div>
<div
class="status"
:class="{ exceed: device.mvFumeConcentration2 >= 1 }"
@@ -534,13 +538,15 @@
}
.el-card {
margin-bottom: 10px;
- border-radius: 9px;
+ border-radius: 15px;
+ margin-left: 5px;
}
.card-header {
// display: flex;
// align-items: center;
// position: center;
text-align: center;
+ position: relative;
}
.card-header-item {
display: flex;
@@ -567,7 +573,19 @@
margin-bottom: 20px;
border: #1de01d;
}
-
+.chart-below-text2{
+ float: right;
+}
+.image {
+ height: 18px;
+}
+.icon-inner {
+ position: relative;
+ top: -20px;
+ right: -115px;
+ width: 50px;
+ height: 50px;
+}
.dashboard-title {
font-size: 20px;
text-align: center;
@@ -575,11 +593,20 @@
background-color: #f5f7fa;
}
+.report-time-text {
+ font-size: 12px;
+ color: #999999;
+}
+
+
+
+
/* 瓒呮爣 鏂囧瓧鏁堟灉*/
.status {
font-size: 18px;
color: #ff4d4f;
font-weight: bold;
+ margin-top: 5px;
}
.exceed {
@@ -606,7 +633,8 @@
}
// 鍒嗗壊绾夸笂涓嬭窛绂�
.divider-margin {
- margin-top: 3px;
+ margin: 10px 0px;
+ border: 1px solid gray;
}
.el-input {
@@ -625,4 +653,18 @@
padding: 0px;
margin: 0px;
}
+.horizontal-line {
+ position: relative;
+ height: 1px;
+ margin: 10px 0px;
+}
+.horizontal-line::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: rgb(221, 217, 217);
+}
</style>
diff --git a/src/views/analysis/HomePage.vue b/src/views/analysis/HomePage.vue
index 74738ed..e864a56 100644
--- a/src/views/analysis/HomePage.vue
+++ b/src/views/analysis/HomePage.vue
@@ -153,9 +153,7 @@
</div>
</div>
</transition>
- <!-- </el-main> -->
</div>
- <!-- </div> -->
<el-empty v-show="isNoData" :image-size="200" />
</template>
@@ -166,7 +164,7 @@
export default {
data() {
return {
- isNoData:false,
+ isNoData:true,
loading:false,
radio: '閫変腑涓旂鐢�',
gapT:0, //鍒嗘瀽鐨勮繃绋嬫柟娉曡�楁椂
diff --git a/src/views/getdata/GetData.vue b/src/views/getdata/GetData.vue
index c7e91a4..0d8361c 100644
--- a/src/views/getdata/GetData.vue
+++ b/src/views/getdata/GetData.vue
@@ -40,7 +40,7 @@
// 妯℃嫙鐧婚檰鎸夐挳鍔犺浇涓姸鎬�
login_loading:false,
// 鏃犳暟鎹椂鐨勫浘鐗�
- isNoData:false
+ isNoData:true
};
},
methods: {
@@ -251,29 +251,11 @@
<!-- 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%">
+ <div>閲嶅鐨勬暟鎹�:</div>
+ <div v-show="!isNoData">
+ <el-table :data="displayData" height="200" 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"/>
@@ -290,8 +272,8 @@
<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>
+ <el-empty v-show="isNoData" :image-size="150" />
</div>
<!-- <div class="result-textarea">
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..caeba9e
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,6 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+ configureWebpack: {
+ devtool: 'source-map'
+ }
+ }
\ No newline at end of file
--
Gitblit v1.9.3