From f3acb8ce787f3df0eda633031473be4e6a9ff448 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 12 十月 2023 16:56:28 +0800
Subject: [PATCH] 油烟 更新了实时监控页面
---
src/views/analysis/graph/DayData.vue | 2
dist.zip | 0
src/views/LoginInterface.vue | 4
vue3-project-1.zip | 0
src/utils/requestPy.js | 7
src/sfc/ExceptionType.vue | 3
src/sfc/TimeSelect.vue | 2
src/test/TestSelect.vue | 1763 +++++++++++++++++++++++++++++-
src/views/analysis/DataShow.vue | 35
src/views/IndexView.vue | 46
src/sfc/ShopNameSelect.vue | 1
src/views/ExceedingFume.vue | 177 ++
src/views/HistoryFume.vue | 18
src/views/analysis/HomePage.vue | 79
src/test/TestDrawer.vue | 1154 ++++++++++---------
src/router/index.ts | 1
src/sfc/ExceptionText.vue | 2
src/components/layout/AppLayout.vue | 2
src/assets/login.png | 0
src/sfc/ExceptionTypeLineChart.vue | 27
src/views/getdata/GetData.vue | 27
src/utils/request.js | 7
/dev/null | 0
src/views/analysis/graph/AllRate.vue | 7
src/sfc/FumeConcentrationChart.vue | 1
src/sfc/ShopNameAndID.vue | 1
src/sfc/FanPurifierChart.vue | 1
src/components/layout/AppAside.vue | 2
28 files changed, 2,593 insertions(+), 776 deletions(-)
diff --git a/dist.zip b/dist.zip
index 8e66661..1dfa39c 100644
--- a/dist.zip
+++ b/dist.zip
Binary files differ
diff --git a/src/assets/login.jpg b/src/assets/login.jpg
deleted file mode 100644
index 8bf924c..0000000
--- a/src/assets/login.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/login.png b/src/assets/login.png
new file mode 100644
index 0000000..b29e1d1
--- /dev/null
+++ b/src/assets/login.png
Binary files differ
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index 9cbde1f..f60b771 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -54,7 +54,7 @@
<!-- :collapse="isCollapse" -->
<a href="/hdata" class="logo" >
<!-- <img src="@/assets/companylogo.png" alt="" /> -->
- <h1 style="margin-left: 30px;">娌圭儫鍦ㄧ嚎鐩戞祴</h1>
+ <h1 style="margin-left: 30px;">椁愰ギ娌圭儫鍦ㄧ嚎鐩戞祴</h1>
</a>
</el-space>
diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue
index 662ca7b..9118f15 100644
--- a/src/components/layout/AppLayout.vue
+++ b/src/components/layout/AppLayout.vue
@@ -22,7 +22,7 @@
<el-container class="header-and-main">
<AppHeader/>
<el-main class="main-content">
- <RouterView/>
+ <RouterView/>
</el-main>
</el-container>
</el-container>
diff --git a/src/router/index.ts b/src/router/index.ts
index 34c8d47..2fd9cce 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,6 @@
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
- // history: createWebHistory(import.meta.env.BASE_URL),
history: createWebHashHistory(),
routes: [
{
diff --git a/src/sfc/ExceptionText.vue b/src/sfc/ExceptionText.vue
index e93e9ce..f0c6023 100644
--- a/src/sfc/ExceptionText.vue
+++ b/src/sfc/ExceptionText.vue
@@ -17,7 +17,7 @@
methods: {
requestExceptionData(){
- axiosInstance.get('/fume/abnormaltwo',{params:{"devId":this.devId,"exceptionValue":this.exceptionValue,"beginTime":this.beginTime,"endTime":this.endTime }}).then(result =>{
+ axiosInstance.get('/fume/abnormalthree',{params:{"devId":this.devId,"exceptionValue":this.exceptionValue,"beginTime":this.beginTime,"endTime":this.endTime }}).then(result =>{
//灏嗚繑鍥炵殑缁撴灉浼犻�掔粰鐖剁粍浠�
this.$emit('submitExceptionData',result.data.data)
})
diff --git a/src/sfc/ExceptionType.vue b/src/sfc/ExceptionType.vue
index 20d4b84..c4956ca 100644
--- a/src/sfc/ExceptionType.vue
+++ b/src/sfc/ExceptionType.vue
@@ -27,9 +27,6 @@
},
mounted(){
this.getShopName()
- setTimeout(() => {
- console.log(this.exceptionType);
- }, 1000);
}
};
</script>
diff --git a/src/sfc/ExceptionTypeLineChart.vue b/src/sfc/ExceptionTypeLineChart.vue
index 316d062..75576f2 100644
--- a/src/sfc/ExceptionTypeLineChart.vue
+++ b/src/sfc/ExceptionTypeLineChart.vue
@@ -2,7 +2,11 @@
瀛愮粍浠舵湁鍩烘湰鐨勬牱寮�
浣跨敤鍚屼竴涓浘褰㈠疄渚嬶紝鎺ュ彈鐖剁粍浠朵紶鍏ョ殑鎶樼嚎鍥緊ption
**鐖剁粍浠�
-
+ <ExceptionTypeLineChart
+ :option="option"
+ :is-open-dialog="centerDialogVisible"
+ v-loading="chartLoading"
+ ></ExceptionTypeLineChart>
-->
<template>
<div id="main" class="line-chart"></div>
@@ -21,7 +25,8 @@
},
isOpenDialog:{
type:Boolean
- }
+ },
+
},
data() {
return {
@@ -29,6 +34,8 @@
};
},
mounted() {
+ // 鑾峰彇椤甸潰瀹藉害鐨勪竴鍗�
+
this.initChart();
this.chart.clear
this.chart.setOption(this.option,true)
@@ -44,8 +51,7 @@
},
isOpenDialog(){
window.addEventListener('resize', this.resizeChart);
- console.log('璋冪敤浜�');
- }
+ },
},
beforeUnmount() {
if (this.chart) {
@@ -97,7 +103,12 @@
// 璺熼〉闈㈠搷搴斿紡鍙樺寲
resizeChart() {
- this.chart.resize();
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ // this.chart.resize();
}
}
};
@@ -106,10 +117,10 @@
<style>
.line-chart {
- width: 100%;
+ width:920px;
height: 300px;
margin-bottom: 20px;
- margin-left: 10px;
- min-width: 350px;
+ /* margin-left: 10px; */
+ min-width: 600px;
}
</style>
diff --git a/src/sfc/FanPurifierChart.vue b/src/sfc/FanPurifierChart.vue
index 3540ddc..e8afeda 100644
--- a/src/sfc/FanPurifierChart.vue
+++ b/src/sfc/FanPurifierChart.vue
@@ -18,7 +18,6 @@
methods: {
//鍐欏ソ鍚庣瀵瑰簲鍗冲彲
drawChart() {
- console.log('浼犻�掓暟鎹负椋庢満搴�', this.minuteData);
// x杞存棩鏈熸椂闂�
let dateList = [];
// 鍘嗗彶椋庢満鐢�
diff --git a/src/sfc/FumeConcentrationChart.vue b/src/sfc/FumeConcentrationChart.vue
index da56d6e..b86c621 100644
--- a/src/sfc/FumeConcentrationChart.vue
+++ b/src/sfc/FumeConcentrationChart.vue
@@ -20,7 +20,6 @@
methods: {
//鍐欏ソ鍚庣瀵瑰簲鍗冲彲
drawChart() {
- console.log('浼犻�掓暟鎹负', this.minuteData);
// x杞存棩鏈熸椂闂�
let dateList = [];
// 鍘嗗彶娌圭儫娴撳害
diff --git a/src/sfc/ShopNameAndID.vue b/src/sfc/ShopNameAndID.vue
index e2b164a..fef27ec 100644
--- a/src/sfc/ShopNameAndID.vue
+++ b/src/sfc/ShopNameAndID.vue
@@ -52,7 +52,6 @@
]
};
});
- console.log(this.optionsShop);
});
// 鎵撳紑鏃堕粯璁ゅ睍绀轰竴涓簵閾�
diff --git a/src/sfc/ShopNameSelect.vue b/src/sfc/ShopNameSelect.vue
index 8c3274b..deeb8e9 100644
--- a/src/sfc/ShopNameSelect.vue
+++ b/src/sfc/ShopNameSelect.vue
@@ -22,7 +22,6 @@
this.shopNames.push(item.diName)
}
);
- console.log(response.data.data);
})
}
}
diff --git a/src/sfc/TimeSelect.vue b/src/sfc/TimeSelect.vue
index fc71402..c2834ac 100644
--- a/src/sfc/TimeSelect.vue
+++ b/src/sfc/TimeSelect.vue
@@ -34,7 +34,7 @@
methods:{
initOneWeekAgoTime(){
// 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂翠负涓�鍛ㄥ墠
- this.time[0] = dayjs().subtract(3, 'week').format('YYYY-MM-DD HH:mm:ss');
+ this.time[0] = dayjs().subtract(4, '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 c9ec6fb..abfbfd1 100644
--- a/src/test/TestDrawer.vue
+++ b/src/test/TestDrawer.vue
@@ -1,429 +1,438 @@
<template>
<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-col>
+ <!-- 鑿滃崟璇绘爣棰� -->
+ <div ref="h1" class="header-container">
+ <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
+ <!-- 搴楅摵鍚� 绾ц仈 -->
+ <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID>
- <!-- 寮傚父绫诲瀷閫夋嫨 -->
- <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
- </ExceptionType>
+ <!-- 寮傚父绫诲瀷閫夋嫨 -->
+ <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
+ <TimeSelect @submit-time="giveTime"></TimeSelect>
+ </div>
+ <div
+ ref="h2"
+ style="display: flex; margin-top: 2px; justify-content: right"
>
-
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙鍑篍xcel鏂囦欢"
- placement="top-start"
- >
- <!-- 鍋氭垚鍑芥暟js鏂囦欢 -->
- <el-icon
- class="iconExcel clickable"
- title="瀵煎嚭Excel鏂囦欢"
- @click="exportDom"
+ <el-button
+ type="primary"
+ plain
+ @click="showTable"
+ style="margin-left: 20px"
+ :loading="button.queryButton"
+ >鏌ヨ</el-button
>
- <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"
- effect="dark"
- content="鐐瑰嚮鍙姌鍙�"
- placement="right-start"
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ content="鐐瑰嚮鍙鍑篍xcel鏂囦欢"
+ placement="top-start"
+ >
+ <!-- 鍋氭垚鍑芥暟js鏂囦欢 -->
+ <el-icon
+ class="iconExcel clickable"
+ title="瀵煎嚭Excel鏂囦欢"
+ @click="exportDom"
>
- <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
- <el-icon class="header-icon">
- <i-ep-info-filled />
- </el-icon>
- </el-tooltip>
+ <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-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙姌鍙�"
- placement="right-start"
- >
+ <el-collapse ref="h3" v-model="activeNames">
+ <el-collapse-item name="1">
+ <template #title>
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ content="鐐瑰嚮鍙姌鍙�"
+ placement="right-start"
+ >
+ <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 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>
+
+ <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>
+
+ <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>
+
+ <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-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>
+ <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>
+
+ <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%"
+ border
+ :height="tableHeight"
+ :cell-class-name="tableCellClassName"
+
+ >
+ <el-table-column prop="diName" label="搴楅摵鍚嶇О">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.diName">
+ <div class="cell ellipsis">{{ row.diName }}</div>
</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>
+ </el-table-column>
- <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>
-
- <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>
-
- <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-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>
- <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-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>
-
- <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>
-
- <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-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>
+ <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
- ref="ref"
- v-show="isOfflineShow"
+ <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="primary"
+ class="table-button"
+ @click="showDrawer(row)"
+ >鏌ョ湅璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <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-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"
+ :loading="button.preButton"
+ :disabled="isPreCantouch || banTouch"
+ @click="getPreviousRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="danger"
+ :loading="button.afterButton"
+ :disabled="isNextCantouch || banTouch"
+ @click="getNextRowData"
+ >涓嬫潯寮傚父</el-button
+ >
+ </div>
+ </template>
+
+ <!-- 瓒呮爣鏁版嵁鏃� -->
+ <!-- 鎶樼嚎鍥� -->
+
+ <!-- 鎺夌嚎 -->
+ <div
+ ref="lineChart"
+ class="line-chart"
style="
width: 100%;
height: 300px;
- /* min-width: 100px; */
margin-bottom: 20px;
- margin-left: 10px;
- min-width: 350px;
+ /* margin-left: 10px;
+ min-width: 350px; */
"
- ></div> -->
+ ></div>
- <ExceptionTypeLineChart :option="option" :is-open-dialog="centerDialogVisible" ></ExceptionTypeLineChart>
+ <!-- <ExceptionTypeLineChart
+ :option="option"
+ :is-open-dialog="centerDialogVisible"
+ v-loading="chartLoading"
+ ></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="璁惧缂栧彿" />
+ <!-- -->
+ <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-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>
+ <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>
<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';
+import * as echarts from 'echarts';
const ShopNameAndID = defineAsyncComponent(() =>
import('../sfc/../sfc/ShopNameAndID.vue')
@@ -440,10 +449,23 @@
TimeSelect,
ShopNameAndID,
ExceptionText,
- ExceptionTypeLineChart
+ // ExceptionTypeLineChart
},
data() {
return {
+ chart: null,
+ // 鎶樼嚎鍥惧姞杞戒腑
+ chartLoading:false,
+ button:{
+ // 鏌ヨ鎸夐挳
+ queryButton:false,
+ // 涓婁竴鏉℃寜閽�
+ preButton:false,
+ // 涓嬩竴鏉℃寜閽�
+ afterButton:false,
+ //
+ banTouch:0
+ },
// 寮傚父鎶樼嚎鍥剧殑閰嶇疆
option: {},
// 鎶樼嚎鍥惧睍绀�
@@ -553,7 +575,7 @@
// 搴楅摵鍚� 绾ц仈閫夋嫨鍣�
optionsShop: [],
// 寮傚父绫诲瀷閫夋嫨鍣�
- exceptionValue: [],
+ exceptionValue: []
};
},
// 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
@@ -562,16 +584,16 @@
// 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
if (newVaue === this.displayData.length - 1) {
this.isPreCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
- if (this.isNextCantouch == 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) {
+ //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isPreCantouch == true) {
this.isPreCantouch = false;
}
}
@@ -590,6 +612,8 @@
this.getShopNames();
},
centerDialogVisible() {
+ // this.initChart();
+ // this.chart.clear
window.addEventListener('resize', this.updateChart);
}
},
@@ -601,19 +625,88 @@
this.getRecentSevenDays();
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
this.getShopNames();
- this.calcTableHeight()
+ this.calcTableHeight();
+
window.addEventListener('resize', this.updateChart);
-
+ },
+ beforeUnmount() {
+ if (this.chart) {
+ this.chart.dispose;
+ }
},
methods: {
- // 鍔ㄦ�佽绠楄〃鏍奸珮搴�
- calcTableHeight(){
+ calDialogWidth(){
+
+ },
+ // 鍔熻兘锛氬垵濮嬪寲鎶樼嚎鍥�
+ initChart() {
+ // 鍒涘缓echarts瀹炰緥
+ this.chart = echarts.init(this.$refs.lineChart);
+ // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ 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();
+ },
+ // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
+ tableCellClassName({ row, column, rowIndex, columnIndex }) {
+ if(columnIndex == 3){
+ if (row.exceptionType == '0') {
+ return 'exceeding-row';
+ } else if (row.exceptionType == '1') {
+ return 'abnormal-power-supply';
+ } else if (row.exceptionType == '2') {
+ return 'disconnect';
+ }
+ }
+
+ },
+
+ //鍔熻兘锛� 鍔ㄦ�佽绠楄〃鏍奸珮搴�
+ 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))`;
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
},
-
- // 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
+
+ //鍔熻兘锛� 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
const date1 = new Date(dateString1);
const date2 = new Date(dateString2);
@@ -639,7 +732,6 @@
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');
@@ -668,7 +760,6 @@
const year2 = date2.getFullYear();
const month2 = date2.getMonth();
const day2 = date2.getDate();
- console.log(month1, month2);
// 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
if (year1 === year2) {
@@ -698,16 +789,14 @@
// 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
// 鍥惧舰鍝嶅簲寮忓彉鍖�
- // updateChart() {
- // this.$nextTick(() => {
- // if (this.chart1) {
- // this.chart1.resize();
- // }
- // if (this.chart2) {
- // this.chart2.resize();
- // }
- // });
- // },
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ },
+
// 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
@@ -719,9 +808,9 @@
// 姣斿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
+ 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');
@@ -743,15 +832,15 @@
this.rowMvStatCode = this.displayData[index].devId;
},
- //鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
+ //鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
setExceptionData() {
- // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
- const abnormalTimeTenMinute = this.descTenTime(
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
+ const abnormalTimeTenMinute = this.descTenTime(
this.rowBeginTime,
this.rowEndTime
- )
+ );
// 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
- this.exceedingData = []
+ this.exceedingData = [];
for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
this.exceedingData.push({
@@ -775,8 +864,11 @@
// 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
getNextRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
if (this.selectedRowIndex !== 0) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.banTouch = 1
+
//寰楀埌涓婁竴琛屾暟鎹储寮�
this.selectedRowIndex = this.selectedRowIndex - 1;
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
@@ -792,32 +884,29 @@
if (this.drawerData.endTime) {
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
-
+ this.button.afterButton = true
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;
+ this.button.afterButton = false
});
}
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else{
- console.log(null);
- }
+
},
// 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
getPreviousRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
if (this.selectedRowIndex < this.displayData.length - 1) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.banTouch = 1
+
//寰楀埌涓婁竴琛屾暟鎹储寮�
-
this.selectedRowIndex = this.selectedRowIndex + 1;
- console.log('涓�', this.selectedRowIndex);
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
this.setinfo(this.selectedRowIndex);
@@ -832,19 +921,16 @@
if (this.drawerData.endTime) {
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
+ this.button.preButton = true
axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
- console.log(this.exceedingData);
this.drawChartTest();
this.exceptionTotal = this.exceedingData.length;
+ this.button.preButton = false
});
- }
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else {
- console.log(null);
}
},
@@ -860,6 +946,10 @@
this.centerDialogVisible = true;
+ // 鍒濆鍖栨姌绾垮浘
+ this.initChart();
+ // this.chart.clear
+
// 鏍规嵁琛屾暟鎹姹傝缁嗚秴鏍囨暟鎹覆鏌撴姌绾垮浘
let params = {};
if (this.drawerData.devId) {
@@ -871,6 +961,7 @@
if (this.drawerData.endTime) {
params['endTime'] = this.drawerData.endTime;
}
+
axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
@@ -895,8 +986,7 @@
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;
}
@@ -904,12 +994,15 @@
params['endTime'] = this.endTime;
}
this.loading = true;
+ this.button.queryButton = true
+
axiosInstanceInstance
.get('/fume/abnormalthree', { params: params })
.then((response) => {
this.abnormalData = response.data.data;
this.total = this.abnormalData.length;
this.loading = false;
+ this.button.queryButton = false
if (response.data.data.length == 0) {
ElMessage('璇ユ椂娈垫棤鏁版嵁');
this.isNoData = true;
@@ -918,8 +1011,7 @@
// 绉婚櫎绌烘暟鎹姸鎬�
this.isNoData = false;
this.handleCurrentChange(1);
- console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
- console.log('闀垮害', response.data.data.total);
+
});
},
handleSizeChange(val) {
@@ -943,7 +1035,6 @@
// 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
const diffInMinutes = end.diff(start, 'minute');
const diffInTenMinutes = Math.floor(diffInMinutes / 10);
- console.log('鍑犱釜10鍒嗛挓', diffInTenMinutes);
return diffInTenMinutes;
},
@@ -1022,8 +1113,8 @@
// 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
findTimeInExceptionData(data, time) {
for (let i = 0; i < data.length; i++) {
- if(data[i]==null){
- continue
+ if (data[i] == null) {
+ continue;
}
if (data[i]['mvDataTime'] == time) {
return data[i]['mvFumeConcentration2'];
@@ -1060,7 +1151,6 @@
current = dayjs(current)
.add(10, 'minute')
.format('YYYY-MM-DD HH:mm:ss');
-
}
obj['xAxis'] = xAxis;
obj['yAxis'] = yAxis;
@@ -1069,19 +1159,17 @@
// 鍙傛暟锛氳秴鏍囨暟鎹墠闈㈠尯闂寸殑鏁版嵁
// 鍔熻兘锛氳繑鍥為櫎鍘绘渶鍚庝竴涓厓绱犵殑鏁扮粍
- removeLastItemOfBeforeData(beforeDataOfExceeding){
+ 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;
+ 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浠ｈ〃渚涚數寮傚父鍜屾帀绾�), 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣
@@ -1094,21 +1182,21 @@
beginIndex,
endIndex
) {
- this.option = {}
+ this.option = {};
// 瓒呮爣
if (exceptionCategory == 0) {
- this.option = {
+ this.chart.setOption({
tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // dataZoom: {
- // yAxisIndex: 'none'
- // },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
xAxis: {
type: 'category',
data: xData,
@@ -1121,7 +1209,7 @@
},
yAxis: {
type: 'value',
- name: 'mg/m鲁',
+ name: 'mg/m鲁'
},
series: [
{
@@ -1147,10 +1235,10 @@
[
{
name: '瓒呮爣鏃堕棿娈�',
- xAxis: exceptionBeginTime,
+ xAxis: exceptionBeginTime
},
{
- xAxis: exceptionEndTime,
+ xAxis: exceptionEndTime
}
]
]
@@ -1205,23 +1293,23 @@
}
]
}
- };
+ });
}
// 渚涚數寮傚父鍜屾帀绾�
else if (exceptionCategory == 1) {
- this.option = {
+ this.chart.setOption( {
tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // dataZoom: {
- // // 鍖哄煙缂╂斁
- // yAxisIndex: 'none'
- // },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
xAxis: {
type: 'category',
data: xData,
@@ -1259,19 +1347,19 @@
}
}
]
- };
+ });
}
+ this.banTouch = 0
},
-
// 鍔熻兘锛氱偣鍑� 鈥樻煡鐪嬭鎯呪�欙紝 鈥樹笅涓�鏉♀�欐寜閽椂浼� 鍏堥�昏緫璁＄畻銆傛渶鍚庡睍绀哄浘褰�
drawChartTest() {
- this.beforeData = []
- this.afterData= []
- this.allExceptionTimeData = []
+ this.beforeData = [];
+ this.afterData = [];
+ this.allExceptionTimeData = [];
//寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
- let exceptionBeginTime =this.rowBeginTime
- let exceptionEndTime = this.rowEndTime
+ let exceptionBeginTime = this.rowBeginTime;
+ let exceptionEndTime = this.rowEndTime;
// beforeAndAfterTime[0]:鍓�30鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[1]:鍚�10鍒嗛挓鐨勬椂闂寸偣
@@ -1295,18 +1383,18 @@
beforeAndAfterTime[2]
);
+ // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
+ this.chartLoading = true
// 璇锋眰鍓嶅崐娈�
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 = [];
// 淇濆瓨寮傚父鍖洪棿鍓嶅悗鐨勫��
@@ -1334,11 +1422,12 @@
after = this.shallowCopyList(this.afterData);
// after = this.afterData
- console.log('after:',after);
- }
+ }
// 瓒呮爣
else {
- let beforeTemp = this.removeLastItemOfBeforeData(this.beforeData)
+ let beforeTemp = this.removeLastItemOfBeforeData(
+ this.beforeData
+ );
// 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
for (let i = beforeTemp.length - 1; i >= 0; i--) {
if (beforeTemp[i].mvFumeConcentration2 >= 1) {
@@ -1349,7 +1438,7 @@
}
}
- for (let i = 0; i<this.afterData.length; i++) {
+ for (let i = 0; i < this.afterData.length; i++) {
if (this.afterData[i].mvFumeConcentration2 >= 1) {
break;
}
@@ -1362,7 +1451,6 @@
// 灏嗗墠鍚庡尯闂存暟鎹� 涓� 寮傚父鍖洪棿鏁版嵁 鍚堝苟
this.allExceptionTimeData = [...before, ...tempArr, ...after];
- console.log('缁勫悎鏁版嵁锛�',this.allExceptionTimeData);
// x杞存棩鏈熸椂闂�
let dateList = [];
// y杞� 瓒呮爣娌圭儫娴撳害
@@ -1378,9 +1466,6 @@
dateList = timeAndValue['xAxis'];
fumeExceeding = timeAndValue['yAxis'];
-
- console.log('dateList:',dateList);
- console.log('fumeExceeding:',fumeExceeding);
// 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
let startIndex = dateList.findIndex(
@@ -1389,7 +1474,7 @@
let endIndex = dateList.findIndex(
(item) => item === exceptionEndTime
);
-
+
// 渚涚數寮傚父鍜屾帀绾挎儏鍐� 瓒呮爣鎯呭喌
if (
this.rowExceptionType === '1' ||
@@ -1416,6 +1501,7 @@
endIndex
);
}
+ this.chartLoading = false
});
});
},
@@ -1438,7 +1524,6 @@
]
};
});
- console.log(this.optionsShop);
});
},
exportDom() {
@@ -1492,8 +1577,6 @@
})
.then((result) => {
this.exception0 = result.data.data;
- console.log('寮傚父0', this.exception0);
- console.log('寮傚父0鏁伴噺', this.exception0.length);
});
axiosInstanceInstance
.get('/fume/shopname', {
@@ -1523,7 +1606,6 @@
getRecentSevenDays() {
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
- console.log(this.currentDateTime, this.oneWeekAgoDateTime);
let params = {};
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
@@ -1548,13 +1630,7 @@
</script>
<style scoped>
-/* .exception-root-container {
- margin: 20px;
- padding: 10px;
- border: 1px;
- height: 615px;
-} */
.header-container {
display: flex;
margin-left: 20px;
@@ -1590,8 +1666,6 @@
/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
.exception-container {
display: flex;
- /* direction: column; */
- /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
z-index: 9;
@@ -1613,7 +1687,6 @@
font-size: 18px;
}
.collapse-header-text {
- /* margin-right: 150px; */
margin-top: 5px;
font-size: 14px;
color: gray;
@@ -1622,7 +1695,6 @@
.box-card-label {
font-size: 14px;
white-space: nowrap;
- /* overflow-x: auto; */
}
:deep().el-card {
border-radius: 9px;
@@ -1637,15 +1709,14 @@
.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;
+ color: #000000;
}
/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
.describe-info {
@@ -1677,16 +1748,12 @@
.box-card {
height: 190px;
}
-:deep().box-card .el-card__body {
- /* padding: 5px; */
-}
+
.sub-box-card {
height: 100px;
border: 0px;
}
-:deep().sub-box-card .el-card__body {
- /* padding: 0px; */
-}
+
.mx-1 {
margin-bottom: 0px;
}
@@ -1695,10 +1762,31 @@
justify-content: right;
margin-bottom: 10px;
}
-.el-table .warning-row {
- --el-table-tr-bg-color: var(--el-color-warning-light-9);
+
+:deep().el-table__row .exceeding-row{
+ background-color: #F53F3F;
}
-.el-table .success-row {
- --el-table-tr-bg-color: var(--el-color-success-light-9);
+:deep().el-table__row .abnormal-power-supply{
+ background-color: #FDF4BF;
}
+:deep().el-table__row .disconnect{
+ background-color: #F7BA1E;
+}
+
+
+.el-table {
+ color: #000000;
+}
+/* 琛ㄦ牸鐨勫唴杈硅窛 */
+:deep().el-table .el-table__cell {
+ padding: 2px;
+}
+
+
+/* 琛ㄦ牸涓殑鎸夐挳瀹藉害閾烘弧 */
+.table-button {
+ width: 100%;
+}
+
</style>
+
diff --git a/src/test/TestSelect.vue b/src/test/TestSelect.vue
index 03d495f..919d833 100644
--- a/src/test/TestSelect.vue
+++ b/src/test/TestSelect.vue
@@ -1,75 +1,777 @@
+<!-- 鍔ㄦ�佽绠楁姌绾垮浘瀹藉害 -->
+<template>
+ <el-row ref="h1">
+ <el-col>
+ {{ windowWidth }}
+ <!-- 鑿滃崟璇绘爣棰� -->
+ <div ref="h1" class="header-container">
+ <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
+ <!-- 搴楅摵鍚� 绾ц仈 -->
+ <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID>
+
+ <!-- 寮傚父绫诲瀷閫夋嫨 -->
+ <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
+ </ExceptionType>
+
+ <TimeSelect @submit-time="giveTime"></TimeSelect>
+ </div>
+ <div
+ ref="h2"
+ style="display: flex; margin-top: 2px; justify-content: right"
+ >
+ <el-button
+ type="primary"
+ plain
+ @click="showTable"
+ style="margin-left: 20px"
+ :loading="button.queryButton"
+ >鏌ヨ</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"
+ effect="dark"
+ content="鐐瑰嚮鍙姌鍙�"
+ placement="right-start"
+ >
+ <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 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>
+
+ <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>
+
+ <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>
+
+ <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-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>
+ <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>
+
+ <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%"
+ border
+ :height="tableHeight"
+ :cell-class-name="tableCellClassName"
+
+ >
+ <el-table-column 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>
+
+ <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="primary"
+ class="table-button"
+ @click="showDrawer(row)"
+ >鏌ョ湅璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <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-empty v-show="isNoData" :image-size="200" />
+ <!-- 瀵硅瘽妗� -->
+ <div>
+ <el-dialog ref="diag" 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"
+ :loading="button.preButton"
+ :disabled="isPreCantouch || banTouch"
+ @click="getPreviousRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="danger"
+ :loading="button.afterButton"
+ :disabled="isNextCantouch || banTouch"
+ @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"
+ v-loading="chartLoading"
+ ></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>
+
<script>
-import ExceptionTypeLineChart from '../sfc/ExceptionTypeLineChart.vue';
+import ExceptionType from '../sfc/ExceptionType.vue';
+import TimeSelect from '../sfc/TimeSelect.vue';
+import ExceptionText from '../sfc/ExceptionText.vue';
+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 {
- 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'
+ // 椤甸潰绐楀彛瀹藉害
+ windowWidth:0,
+ // 椤甸潰绐楀彛楂樺害
+ windowHeight:0,
+
+ // 瀵硅瘽妗嗙殑瀹藉害
+ dialogW:'',
+ // 鎶樼嚎鍥惧姞杞戒腑
+ chartLoading:false,
+ button:{
+ // 鏌ヨ鎸夐挳
+ queryButton:false,
+ // 涓婁竴鏉℃寜閽�
+ preButton:false,
+ // 涓嬩竴鏉℃寜閽�
+ afterButton:false,
+ //
+ banTouch:0
+ },
+ // 寮傚父鎶樼嚎鍥剧殑閰嶇疆
+ 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
+ }
],
- yAxis: [0.4, 0.9, 0.1, 1.5, 0.3]
+ // 搴楅摵鍚� 绾ц仈閫夋嫨鍣�
+ 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.descTenTime()
+ // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
+ this.getDeviceInfo();
+ // 灞曠ず鏈�杩�7澶╂暟鎹�
+ this.getRecentSevenDays();
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
+ this.getShopNames();
+ this.calcTableHeight();
+ window.addEventListener('resize', this.updateChart);
+ window.onresize = () => {
+ return (() => {
+ //绐楀彛缂╂斁鑷姩鑾峰彇椤甸潰瀹介珮
+ this.windowWidth = document.documentElement.clientWidth; //瀹�
+ this.windowHeight = document.documentElement.clientHeight;; //楂�
+ })()
+ }
+
},
methods: {
- findTimeInExceptionData(data,time){
- for(let i=0;i<data.length;i++){
- if(data[i]['mvDataTime'] == time) {
- return data[i]['mvFumeConcentration2']
+ // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
+ tableCellClassName({ row, column, rowIndex, columnIndex }) {
+ if(columnIndex == 3){
+ if (row.exceptionType == '0') {
+ return 'exceeding-row';
+ } else if (row.exceptionType == '1') {
+ return 'abnormal-power-supply';
+ } else if (row.exceptionType == '2') {
+ return 'disconnect';
}
}
- return -1
+
},
- // 鍙傛暟锛氬姞涓婂墠鍚庡尯闂寸殑寮傚父鏁版嵁锛屾椂闂村瓧绗︿覆
- // 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
+ // 鍔熻兘锛氬姩鎬佽绠楀璇濇鐨勫搴�
+ calDialogWidth(){
+
+ // this.dialogW = `calc(100vw-)`
+ // console.log('瀹藉害涓�',w);
+ },
+ //鍔熻兘锛� 鍔ㄦ�佽绠楄〃鏍奸珮搴�
+ 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鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
- 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)
+ //鍔熻兘锛� 鏃堕棿鏄惁瓒呰繃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)) {
+ current = dayjs(current)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ updatedTimePoints.push(current);
+ yAxisDataAdressed.push(null);
+ }
}
- current = dayjs(current).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')
}
- obj['xAxis'] = xAxis
- obj['yAxis'] = yAxis
- return obj
+ let obj = {};
+ obj['time'] = updatedTimePoints;
+ obj['data'] = yAxisDataAdressed;
+ 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)
+
+ 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();
+
+ // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
+ 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(() => {
+ this.calDialogWidth()
+ });
+ },
+
+ // 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
+ 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
+ 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');
@@ -81,19 +783,966 @@
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.banTouch = 1
+
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+ 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;
+ }
+ this.button.afterButton = true
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ this.button.afterButton = false
+ });
+ }
+
+ },
+
+ // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
+ getPreviousRowData() {
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ if (this.selectedRowIndex < this.displayData.length - 1) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.banTouch = 1
+
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+ 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;
+ }
+ this.button.preButton = true
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ this.button.preButton = false
+ });
+ }
+ },
+
+ // 鈥樻煡鐪嬭鎯呪�� 寮瑰嚭妗嗛儴鍒�
+ 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();
+ }
+
+ if (this.beginTime) {
+ params['beginTime'] = this.beginTime;
+ }
+ if (this.endTime) {
+ params['endTime'] = this.endTime;
+ }
+ this.loading = true;
+ this.button.queryButton = true
+
+ axiosInstanceInstance
+ .get('/fume/abnormalthree', { params: params })
+ .then((response) => {
+ this.abnormalData = response.data.data;
+ this.total = this.abnormalData.length;
+ this.loading = false;
+ this.button.queryButton = false
+ if (response.data.data.length == 0) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false;
+ this.handleCurrentChange(1);
+
+ });
+ },
+ 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);
+ 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'
+ }
+ }
+ }
+ ]
+ };
+ }
+ this.banTouch = 0
+ },
+
+ // 鍔熻兘锛氱偣鍑� 鈥樻煡鐪嬭鎯呪�欙紝 鈥樹笅涓�鏉♀�欐寜閽椂浼� 鍏堥�昏緫璁＄畻銆傛渶鍚庡睍绀哄浘褰�
+ 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]
+ );
+
+ // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
+ this.chartLoading = true
+ // 璇锋眰鍓嶅崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
+ .then((result1) => {
+ this.beforeData = result1.data.data;
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result2) => {
+ this.afterData = result2.data.data;
+ //淇濆瓨寮傚父鍖洪棿鐨勫��
+ 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
+ }
+ // 瓒呮爣
+ 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];
+ // x杞存棩鏈熸椂闂�
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ let timeAndValue = {};
+
+ // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
+ timeAndValue = this.keepContinuousByEachTenMinutes(
+ beforeAndAfterTime[0],
+ beforeAndAfterTime[2],
+ this.allExceptionTimeData
+ );
+
+ dateList = timeAndValue['xAxis'];
+ fumeExceeding = timeAndValue['yAxis'];
+
+ // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ 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
+ );
+ }
+ this.chartLoading = false
+ });
+ });
+ },
+
+ 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
+ }
+ ]
+ };
+ });
+ });
+ },
+ 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;
+ });
+ 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'];
+ 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>
-<template>
- <div>
- <ExceptionTypeLineChart
- :xData="xAxis"
- :yData="yAxis"
- ></ExceptionTypeLineChart>
- </div>
-</template>
+<style scoped>
-<style lang="scss" scoped></style>
+.header-container {
+ display: flex;
+ margin-left: 20px;
+ /* flex-wrap: wrap;
+ align-items: center; */
+}
+.ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.iconExcel {
+ font-size: 25px;
+ margin-left: 20px;
+ bottom: -6px;
+}
+
+/* 鍙紶鏍囩澶村彉涓哄彲鐐瑰嚮鐘舵�� */
+.clickable {
+ cursor: pointer;
+}
+.card-header {
+ margin: 0;
+}
+
+body {
+ margin: 0;
+}
+.exception-divider-rowline {
+ margin: 10px 0px;
+}
+/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
+.exception-container {
+ display: flex;
+}
+.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);
+}
+.collapse-header {
+ margin-left: 5px;
+ font-size: 18px;
+}
+.collapse-header-text {
+ margin-top: 5px;
+ font-size: 14px;
+ color: gray;
+}
+
+.box-card-label {
+ font-size: 14px;
+ white-space: nowrap;
+}
+:deep().el-card {
+ border-radius: 9px;
+}
+/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
+:deep().el-dialog {
+ height: 98%;
+ /* 涓嶅嚭鐜版粴鍔ㄦ潯 */
+ overflow-y: hidden;
+ border-radius: 9px;
+}
+.table-page {
+ margin-left: 20px;
+}
+
+.table-text {
+ font-size: 18px;
+ margin: 5px 0px 10px 20px;
+}
+.text-blank {
+ margin-right: 10px;
+ color: #000000;
+}
+/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
+.describe-info {
+ margin-top: 5px;
+ font-weight: bold;
+ white-space: nowrap;
+}
+/* 鏃堕棿閫夋嫨鏂囨湰 */
+.describe-time-text {
+ margin-left: 30px;
+ margin-top: 5px;
+ font-weight: bold;
+}
+
+/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
+.table-line-num {
+ font-weight: bold;
+ color: black;
+}
+.button_info.el-button_inner {
+ text-align: left;
+}
+.el-collapse {
+ margin-left: 20px;
+}
+:deep().el-collapse .el-collapse-item__content {
+ padding-bottom: 0px;
+}
+.box-card {
+ height: 190px;
+}
+
+.sub-box-card {
+ height: 100px;
+ border: 0px;
+}
+
+.mx-1 {
+ margin-bottom: 0px;
+}
+.dialog-button-position {
+ display: flex;
+ justify-content: right;
+ margin-bottom: 10px;
+}
+
+:deep().el-table__row .exceeding-row{
+ background-color: #F53F3F;
+}
+:deep().el-table__row .abnormal-power-supply{
+ background-color: #FDF4BF;
+}
+:deep().el-table__row .disconnect{
+ background-color: #F7BA1E;
+}
+
+
+.el-table {
+ color: #000000;
+}
+/* 琛ㄦ牸鐨勫唴杈硅窛 */
+:deep().el-table .el-table__cell {
+ padding: 2px;
+}
+
+
+/* 琛ㄦ牸涓殑鎸夐挳瀹藉害閾烘弧 */
+.table-button {
+ width: 100%;
+}
+
+</style>
diff --git a/src/utils/request.js b/src/utils/request.js
index 13d5b5a..b9d625e 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,7 +1,10 @@
import axios from 'axios'
-// const baseUrl = 'http://114.215.109.124:8803' // 鍩虹URL
-const baseUrl = 'http://localhost:8081' // 鍩虹URL
+// 閮ㄧ讲URL
+// const baseUrl = 'http://114.215.109.124:8803'
+
+ // 鏈湴URL
+const baseUrl = 'http://localhost:8081'
const axiosInstance = axios.create({
baseURL: baseUrl
diff --git a/src/utils/requestPy.js b/src/utils/requestPy.js
index 52c0b9a..5b3d64c 100644
--- a/src/utils/requestPy.js
+++ b/src/utils/requestPy.js
@@ -1,7 +1,10 @@
import axios from 'axios'
-const baseUrl = 'http://114.215.109.124:8805' // 鍩虹URL
-// const baseUrl = ' http://127.0.0.1:8089' // 鍩虹URL
+// 閮ㄧ讲URL
+// const baseUrl = 'http://114.215.109.124:8089'
+
+// 鏈湴URL
+const baseUrl = 'http://127.0.0.1:8089'
const axiosInstancePy = axios.create({
baseURL: baseUrl
diff --git a/src/views/ExceedingFume.vue b/src/views/ExceedingFume.vue
index f732802..279424f 100644
--- a/src/views/ExceedingFume.vue
+++ b/src/views/ExceedingFume.vue
@@ -20,9 +20,9 @@
<el-button
type="primary"
plain
- @click="showTable"
style="margin-left: 20px"
:loading="button.queryButton"
+ @click="showTable"
>鏌ヨ</el-button
>
@@ -45,7 +45,7 @@
</div>
<div style="display: flex; justify-content: right; margin-right: 40px">
<span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫鐩戞祴寮傚父淇℃伅姹囨��</span
>
</div>
<br />
@@ -94,15 +94,20 @@
<div class="box-card-label">
<el-scrollbar>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span class="box-card-label">寮傚父搴楅摵鍗犳瘮锛�</span>
<span style="font-size: 20px"
- >{{ exception0.length }} /{{ shopsTotal }}</span
+ >{{ exception0.length }} /{{ shopsTotal }}
+ </span
>
- <span style="margin-left: 150px; font-size: 14px">
- 鍗犳瘮锛歿{
- ((exception0.length / shopsTotal) * 100).toFixed(1)
- }}%</span
+ <span style="font-size: 17px">
+ ({{
+ ((exception0.length/shopsTotal)*100).toFixed(1)
+ }}%)</span
>
+ {{ shopsTotal}}
+ <span class="right-text">
+ 寮傚父鏁板崰姣旓細{{ ((exception0Num/exceptionAllNum) * 100).toFixed(1) }}%
+ </span>
</el-scrollbar>
</div>
@@ -149,15 +154,18 @@
</div>
<div class="box-card-label">
<el-scrollbar>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <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
+ <span style="font-size: 17px">
+ ({{
+ ((exception1.length/shopsTotal)*100).toFixed(1)
+ }}%)</span
>
+ <span class="right-text">
+ 寮傚父鏁板崰姣旓細{{ ((exception1Num/exceptionAllNum) * 100).toFixed(1) }}%
+ </span>
</el-scrollbar>
</div>
@@ -200,20 +208,23 @@
margin-top: 5px;
margin-left: 4px;
"
- >鎺夌嚎</span
+ >鑱旂綉寮傚父</span
>
</div>
<div class="box-card-label">
<el-scrollbar>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <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
+ <span style="font-size: 17px">
+ ({{
+ (((exception2.length)/shopsTotal)*100).toFixed(1)
+ }}%)</span
>
+ <span class="right-text">
+ 寮傚父鏁板崰姣旓細{{ connectException }}%
+ </span>
</el-scrollbar>
</div>
<hr />
@@ -252,6 +263,7 @@
<el-card class="table-page" v-show="!isNoData">
<el-table
ref="tableH"
+ size="small"
v-loading="loading"
:data="displayData"
style="width: 100%"
@@ -260,7 +272,7 @@
:cell-class-name="tableCellClassName"
>
- <el-table-column prop="diName" label="搴楅摵鍚嶇О">
+ <el-table-column prop="diName" label="搴楅摵鍚嶇О" align="center">
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.diName">
<div class="cell ellipsis">{{ row.diName }}</div>
@@ -268,7 +280,7 @@
</template>
</el-table-column>
- <el-table-column prop="devId" label="璁惧缂栧彿">
+ <el-table-column prop="devId" label="璁惧缂栧彿" align="center">
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.devId">
<div class="cell ellipsis">{{ row.devId }}</div>
@@ -276,21 +288,30 @@
</template>
</el-table-column>
- <el-table-column prop="exception" label="寮傚父鍒嗙被">
+ <el-table-column prop="diSupplier" label="渚涘簲鍟�" align="center">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.diSupplier">
+ <div class="cell ellipsis">{{ row.diSupplier }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+
+
+ <el-table-column prop="exception" label="寮傚父鍒嗙被" align="center">
<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="寮傚父绫诲瀷">
+ <el-table-column label="寮傚父绫诲瀷" align="center">
<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="鍦板尯">
+ <el-table-column prop="region" label="鍦板尯" align="center">
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.region">
<div class="cell ellipsis">{{ row.region }}</div>
@@ -298,21 +319,21 @@
</template>
</el-table-column>
- <el-table-column prop="beginTime" label="寮�濮嬫椂闂�">
+ <el-table-column prop="beginTime" label="寮�濮嬫椂闂�" align="center">
<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="缁撴潫鏃堕棿">
+ <el-table-column prop="endTime" label="缁撴潫鏃堕棿" align="center">
<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="鎿嶄綔">
+ <el-table-column label="鎿嶄綔" align="center">
<template #default="{ row }">
<el-button
type="primary"
@@ -350,6 +371,7 @@
{{ rowEndTime }}
</div>
</div>
+
<div class="dialog-button-position">
<el-button
type="danger"
@@ -399,13 +421,25 @@
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
+ type="index"
+ label="搴忓彿"
+ width="60px"
+ align="center"
+ fixed
+ :index="indexMethod"
+
+ ></el-table-column>
+ <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" show-overflow-tooltip/>
+ <el-table-column prop="mvStatCode" label="璁惧缂栧彿" align="center" show-overflow-tooltip/>
+ <el-table-column prop="diSupplier" label="渚涘簲鍟�" align="center" show-overflow-tooltip/>
+ <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip/>
+
<el-table-column
prop="mvFumeConcentration2"
label="娌圭儫娴撳害(mg/m鲁)"
+ align="center"
+ show-overflow-tooltip
/>
</el-table>
</div>
@@ -430,6 +464,7 @@
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
import ExceptionText from '../sfc/ExceptionText.vue';
+
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstanceInstance from '../utils/request.js';
@@ -453,6 +488,9 @@
},
data() {
return {
+ exception0Num:0,
+ exception1Num:0,
+ exception2Num:0,
// 鎶樼嚎鍥惧姞杞戒腑
chartLoading:false,
button:{
@@ -502,7 +540,8 @@
rowEndTime: '',
// 寮傚父鐨勮澶囩紪鍙�
rowMvStatCode: '',
-
+ // 渚涘簲鍟�
+ rowDiSupplier:'',
// 琛ㄦ牸鐨勪竴琛屾暟鎹�
rowTable: [],
//鎷兼帴鐨勬墍鏈夋暟鎹�
@@ -614,7 +653,21 @@
window.addEventListener('resize', this.updateChart);
}
},
-
+ computed:{
+ exceptionAllNum(){
+ let sum = this.exception0Num+this.exception1Num+this.exception2Num
+ return sum == 0?1:sum
+ },
+ connectException(){
+ let sum = this.exception0Num+this.exception1Num+this.exception2Num
+ if(sum == 0){
+ return 0
+ }
+ else{
+ return (100 - ((exception0Num/sum) * 100) - ((exception1Num/sum) * 100)).toFixed(1)
+ }
+ }
+ },
mounted() {
// 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
this.getDeviceInfo();
@@ -626,9 +679,15 @@
window.addEventListener('resize', this.updateChart);
},
methods: {
+ // 鍔熻兘锛氬璇濇琛ㄦ牸搴忓彿閫掑
+ // 鏃堕棿锛�2023-8-17
+ indexMethod(index) {
+ return index + 1 ;
+ },
+
// 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
tableCellClassName({ row, column, rowIndex, columnIndex }) {
- if(columnIndex == 3){
+ if(columnIndex == 4){
if (row.exceptionType == '0') {
return 'exceeding-row';
} else if (row.exceptionType == '1') {
@@ -774,6 +833,7 @@
this.rowBeginTime = this.displayData[index].beginTime;
this.rowEndTime = this.displayData[index].endTime;
this.rowMvStatCode = this.displayData[index].devId;
+ this.rowDiSupplier = this.displayData[index].diSupplier
},
//鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
@@ -790,6 +850,7 @@
this.exceedingData.push({
mvStatCode: this.rowMvStatCode,
diName: this.rowShopName,
+ diSupplier:this.rowDiSupplier,
mvDataTime: abnormalTimeTenMinute[i],
mvFumeConcentration2: ''
});
@@ -1540,6 +1601,41 @@
.then((result) => {
this.exception2 = result.data.data;
});
+
+ /* 寮傚父鏁伴噺 */
+ axiosInstanceInstance
+ .get('/fume/exceptionnum', {
+ params: {
+ exceptionType: '0',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception0Num = result.data.data;
+ });
+ axiosInstanceInstance
+ .get('/fume/exceptionnum', {
+ params: {
+ exceptionType: '1',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception1Num = result.data.data;
+ });
+ axiosInstanceInstance
+ .get('/fume/exceptionnum', {
+ params: {
+ exceptionType: '2',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception2Num = result.data.data;
+ });
},
// 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁
@@ -1550,7 +1646,7 @@
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
axiosInstanceInstance
- .get('/fume/abnormalone', { params: params })
+ .get('/fume/abnormalthree', { params: params })
.then((response) => {
if (response.data.data.length == 0) {
ElMessage('璇ユ椂娈垫棤鏁版嵁');
@@ -1636,9 +1732,16 @@
font-size: 14px;
white-space: nowrap;
}
+
+.right-text {
+ /* float :right; */
+ /* text-align: right; */
+ margin-left:80px;
+}
:deep().el-card {
border-radius: 9px;
}
+
/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
:deep().el-dialog {
height: 98%;
@@ -1716,10 +1819,6 @@
.el-table {
color: #000000;
-}
-/* 琛ㄦ牸鐨勫唴杈硅窛 */
-:deep().el-table .el-table__cell {
- padding: 2px;
}
diff --git a/src/views/HistoryFume.vue b/src/views/HistoryFume.vue
index 58bf326..ec814a2 100644
--- a/src/views/HistoryFume.vue
+++ b/src/views/HistoryFume.vue
@@ -5,7 +5,6 @@
import axiosInstanceInstance from '../utils/request.js'
import TimeSelect from '../sfc/TimeSelect.vue';
-// import ShopNameAndID from '../sfc/TimeSelect.vue';
const ShopNameAndID = defineAsyncComponent(() =>
import('../sfc/../sfc/ShopNameAndID.vue')
@@ -163,7 +162,6 @@
}
]
}
- console.log('option涓猴細',this.options);
}
else if (this.radio == 2) {
// x杞存棩鏈熸椂闂�
@@ -201,7 +199,6 @@
]
}
- console.log('option涓猴細',this.options);
}
else {
// x杞存棩鏈熸椂闂�
@@ -245,11 +242,8 @@
]
}
}
- console.log('option涓猴細',this.options);
}
- else{
- console.log('exceedingData鏃犳暟鎹�');
- }
+
},
@@ -266,7 +260,6 @@
this.exportBeginTime =this.beginTime
this.exportEndTime = this.endTime
- console.log(this.currentDateTime, this.oneWeekAgoDateTime);
let params = {};
params['devId'] = 'qinshi_31010320210010';
@@ -289,9 +282,6 @@
this.total = this.exceedingData.length;
// 榛樿鏄剧ず绗竴椤�
this.handleCurrentChange(1);
- // this.drawChart();
- this.loading = false;
- console.log('鍘嗗彶鏁版嵁涓猴細', this.exceedingData);
})
},
@@ -370,7 +360,6 @@
axiosInstanceInstance.get('/fume/export', { params: params }).then((result) => {
this.exportData = result.data.data;
- console.log(this.exportData);
});
},
exportExcel() {
@@ -434,7 +423,6 @@
const year2 = date2.getFullYear();
const month2 = date2.getMonth();
const day2 = date2.getDate();
- console.log(month1, month2);
// 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
if (year1 === year2) {
@@ -682,4 +670,8 @@
.el-table {
color: #000000;
}
+.chart-container {
+ height: 60vh;
+ width:80vw
+}
</style>
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 0e9f87d..66aac82 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -240,10 +240,7 @@
.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();
+
});
}
@@ -258,7 +255,6 @@
this.inner.inFumeValue.push(item);
}
});
- console.log(this.inner.inFumeValue);
}
// 鍚堝苟
@@ -268,10 +264,8 @@
...this.inner.inFumeValue,
...this.outside.realTimeData
];
- console.log('鎬婚�夋暟鎹�', this.totalData);
- console.log('闀垮害涓猴細', this.totalData.length);
+
}, 200);
- console.log('璋冪敤浜�');
},
// 鐐瑰嚮鎸夐挳瑙﹀彂
@@ -427,12 +421,7 @@
<!-- </el-form-item> -->
</el-form>
- </el-card>
- </el-collapse-item>
- </el-collapse>
- </div>
-
- <div>
+ <div>
<el-tooltip
class="box-item"
effect="dark"
@@ -452,6 +441,13 @@
</el-switch>
</div>
+ </el-card>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+
+
+
<div>
<el-row :gutter="20">
<el-col
@@ -465,26 +461,35 @@
<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 class="imag-container">
+ <img src="@/assets/wind.jpg" class="image"/>
+ <span class="chart-below-text"> 椋庢満鐢垫祦(A)锛�0 </span>
+
+ <span class="chart-below-text2">
+ <img src="@/assets/purifier.jpg" class="image"/>
+ 鍑�鍖栧櫒鐢垫祦(A)锛�0
+ </span>
+ </div>
+ <div class="horizontal-line"></div>
<div >璁惧缂栧彿锛歿{ device.mnCode }}</div>
-
<div class="horizontal-line"></div>
<div class="status" :class="{ exceed: device.value > 1 }">
{{ device.value >= 1 ? '瓒呮爣' : '' }}
</div>
<br />
- <br />
- <br />
+
</el-card>
+
+
<!-- 澶栭儴璁惧 -->
<el-card v-else class="card-font-color">
<template #header>
- <div class="card-header">
+ <div class="card-header out-device">
{{ device.diName }}
</div>
</template>
@@ -669,4 +674,7 @@
height: 1px;
background-color: rgb(221, 217, 217);
}
+.out-device {
+ margin-top:34px;
+}
</style>
diff --git a/src/views/LoginInterface.vue b/src/views/LoginInterface.vue
index d1636c3..0702b3d 100644
--- a/src/views/LoginInterface.vue
+++ b/src/views/LoginInterface.vue
@@ -42,7 +42,7 @@
if (this.username === 'admin' && this.password === 'admin123') {
ElMessage.success('鐧诲綍鎴愬姛');
// 鐧诲綍鎴愬姛锛岃烦杞埌瀵瑰簲椤甸潰
- this.$router.push('/hdata') // 鍋囪鐧诲綍鎴愬姛鍚庤烦杞埌 '/dashboard' 椤甸潰
+ this.$router.push('/ndata') // 鍋囪鐧诲綍鎴愬姛鍚庤烦杞埌 '/dashboard' 椤甸潰
} else {
// console.log('Login Failed!')
ElMessage.error('璐﹀彿鎴栧瘑鐮侀敊璇�');
@@ -54,7 +54,7 @@
<style scoped>
.login-container {
- background-image: url('../assets/login.jpg');
+ background-image: url('../assets/login.png');
/*鐢ㄤ簬涓轰竴涓厓绱犺缃竴涓垨鑰呭涓儗鏅浘鍍忋�� */
background-size: cover; /* 灏嗚儗鏅浘鍍忕瓑姣旂缉鏀惧埌瀹屽叏瑕嗙洊瀹瑰櫒锛岃儗鏅浘鍍忔湁鍙兘瓒呭嚭瀹瑰櫒銆�*/
background-position: center; /* 涓烘瘡涓�涓儗鏅浘鐗囪缃垵濮嬩綅缃�傝繖涓綅缃槸鐩稿浜庣敱 background-origin 瀹氫箟鐨勪綅缃浘灞傜殑 閿瓧 center锛岀敤鏉ュ眳涓儗鏅浘鐗囥��*/
diff --git a/src/views/analysis/DataShow.vue b/src/views/analysis/DataShow.vue
index a70a23d..1815eab 100644
--- a/src/views/analysis/DataShow.vue
+++ b/src/views/analysis/DataShow.vue
@@ -54,7 +54,7 @@
<!-- <el-main> -->
<div class="table">
<el-table :data="displayData" border="" id="table" ref="table" table-layout="auto" >
- <!-- <el-table-column prop="id" label="搴忓彿" width="60"></el-table-column> -->
+
<el-table-column
type="index"
label="搴忓彿"
@@ -88,7 +88,7 @@
label="渚涘簲鍟�"
v-if="showColumn.privides"
></el-table-column>
- <!-- <el-table-column prop="smokePushDensity" label="杩涚儫娴撳害mg/m鲁" width="130"> </el-table-column> -->
+
<el-table-column
prop="smokePopDensity"
label="娌圭儫娴撳害(mg)"
@@ -131,7 +131,7 @@
v-if="showColumn.attributiontime"
>
</el-table-column>
- <!-- <el-table-column prop="reportingTime" label="涓婃姤鏃堕棿" width="100"> </el-table-column> -->
+
<el-table-column fixed="right" width="100" align="center">
<template v-slot:header>
@@ -141,13 +141,7 @@
@click="showColumnOption">
</i-ep-setting>
</template>
- <!-- <template v-slot:header>
- <i
- class="el-icon-setting"
- style="font-size: 22px; cursor: pointer"
- @click="showColumnOption"
- ></i>
- </template> -->
+
</el-table-column>
</el-table>
@@ -199,8 +193,7 @@
</div>
</transition>
</div>
- <!-- </el-main> -->
- <!-- </el-container> -->
+
</div>
</template>
@@ -387,17 +380,7 @@
// 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
XLSX.writeFile(wb, '椤甸潰鏁版嵁.xlsx');
- // this.jsonData=this.tableData
- // const sheetName = '鏁版嵁琛�';
- // const worksheet = XLSX.utils.json_to_sheet(this.jsonData);
-
- // // 瀵煎嚭Excel鏂囦欢
- // const workbook = XLSX.utils.book_new();
- // XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
- // const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
- // const fileName = '椤甸潰鏁版嵁.xlsx';
- // const file = new Blob([excelBuffer], {type: 'application/octet-stream'});
- // saveAs(file, fileName);
+
},
handleSizeChange(val) {
this.pageSize = val;
@@ -407,12 +390,10 @@
const startIndex = (val - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
this.displayData = this.tableData.slice(startIndex, endIndex);
- // this.indexMethod(this.pageSize)
},
//搴忓彿閫掑
indexMethod(index) {
- // let limitpage = this.pageSize; // 姣忛〉鏉℃暟
- // let curpage = this.currentPage; // 褰撳墠椤电爜
+
return index + 1 + (this.currentPage - 1) * this.pageSize;
},
@@ -432,7 +413,6 @@
// 鐩戝惉澶嶉�夋閰嶇疆鍒楁墍鏈夌殑鍙樺寲
checkList: {
handler: function (newnew) {
- // console.log(newnew);
this.showColumn = newnew;
// 杩欓噷闇�瑕佽琛ㄦ牸閲嶆柊缁樺埗涓�涓嬶紝鍚﹀垯浼氫骇鐢熷浐瀹氬垪閿欎綅鐨勬儏鍐�
this.$nextTick(() => {
@@ -449,7 +429,6 @@
<style>
/* 琛ㄦ牸 */
.table {
- /* margin: 10px,0px,10px,10px; */
margin: 10px;
}
.button-and-export {
diff --git a/src/views/analysis/HomePage.vue b/src/views/analysis/HomePage.vue
index 91ad87c..0161f33 100644
--- a/src/views/analysis/HomePage.vue
+++ b/src/views/analysis/HomePage.vue
@@ -2,7 +2,7 @@
<template>
<div class="page-header">
- <el-radio disabled v-model="radio" label="閫変腑涓旂鐢�" >寰愭眹鍖� 澶╄��妗� 鐢颁笂鍧�</el-radio>
+ <el-radio disabled v-model="radio" label="閫変腑涓旂鐢�" >寰愭眹鍖� 澶╅挜妗� 鐢板皻鍧�</el-radio>
<div class="page-label" >
<span class="shop-label">搴楅摵鍚�</span>
@@ -18,7 +18,6 @@
</el-option>
</el-select>
</div>
- <!-- <el-form-item label="寮�濮嬫棩鏈�" class="form-time-lable1"> -->
<div class="time-label">
<span>寮�濮嬫棩鏈� </span>
<el-date-picker
@@ -29,9 +28,7 @@
</el-date-picker>
</div>
<div class="time-label">
- <!-- </el-form-item> -->
<span>缁撴潫鏃ユ湡 </span>
- <!-- <el-form-item label="缁撴潫鏃ユ湡" class="form-time-lable2"> -->
<el-date-picker
v-model="end"
type="datetime"
@@ -47,12 +44,7 @@
</div>
- <!-- <span style="margin-left: 200px; ">鍒嗘瀽鑰楁椂锛歿{gapT}}ms</span>
- <el-divider direction="vertical"></el-divider>
- <span>缁撴灉鏉℃暟锛歿{total}}</span>
- <el-divider direction="vertical"></el-divider>
- <span>宸插啓鍏ユ暟鎹簱锛歿{isWrite}}</span> -->
- <!-- <br/> -->
+
<div style="display: flex; justify-content: right; margin-right: 110px;">
<span >鍒嗘瀽鑰楁椂锛歿{gapT}}ms</span>
<el-divider direction="vertical"></el-divider>
@@ -60,15 +52,12 @@
<el-divider direction="vertical"></el-divider>
</div>
<br/>
- <!-- </el-form> -->
- <!-- </el-card> -->
- <!-- </el-header> -->
- <!-- <el-main> -->
<div class="table" v-show="!isNoData" v-loading="loading">
<el-table :data="displayData" border="" id="table" ref="table" height="500px" >
- <el-table-column type="index" label="搴忓彿" :index="indexMethod" v-if="showColumn.num"> </el-table-column> <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣-->
- <el-table-column prop="fumeDevId" label="璁惧缂栧彿" v-if="showColumn.deviceid" fixed> </el-table-column>
+ <el-table-column type="index" label="搴忓彿" :index="indexMethod" v-if="showColumn.num" fixed> </el-table-column> <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣-->
+ <el-table-column prop="diName" label="搴楅摵鍚嶇О" v-if="showColumn.diName"> </el-table-column>
+ <el-table-column prop="fumeDevId" label="璁惧缂栧彿" v-if="showColumn.deviceid" > </el-table-column>
<el-table-column prop="fumeDate" label="鏃ユ湡" v-if="showColumn.date"> </el-table-column>
<el-table-column prop="fumeDayMin" label="鏃ユ渶灏忓��" v-if="showColumn.min"></el-table-column>
<el-table-column prop="fumeDayMax" label="鏃ユ渶澶у��" v-if="showColumn.max"> </el-table-column>
@@ -121,6 +110,7 @@
<div class="head">閫夋嫨鏄剧ず瀛楁</div>
<div class="body">
<el-checkbox v-model="checkList.num" disabled>缂栧彿</el-checkbox>
+ <el-checkbox v-model="checkList.diName" disabled>搴楅摵鍚嶇О</el-checkbox>
<el-checkbox v-model="checkList.deviceid" disabled>璁惧缂栧彿</el-checkbox>
<el-checkbox v-model="checkList.date">鏃ユ湡</el-checkbox>
<el-checkbox v-model="checkList.min">鏃ユ渶灏忓��</el-checkbox>
@@ -188,6 +178,7 @@
checkList: {},
showColumn: {
num:true,
+ diName:true,
deviceid:true,
date:true,
min:true,
@@ -268,6 +259,7 @@
this.checkList = {
num:true,
deviceid:true,
+ diName:true,
date:true,
min:true,
max:true,
@@ -326,6 +318,7 @@
}
// 绉婚櫎绌烘暟鎹姸鎬�
this.isNoData = false
+ this.isRepeated = 0
this.total = this.afterAnalysis.length;
this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
@@ -334,6 +327,10 @@
let endTime=new Date().getTime()
this.gapT=endTime-startTime
+},
+
+getHasExisitedData(){
+
},
//鏄惁閲嶅
@@ -359,12 +356,21 @@
this.loading=true
this.button.statisticsButton = true
axiosInstanceInstance.get('/data/search',{params:params}).then(response => {
- this.isRepeated=response.data.data
- if(this.isRepeated>0){
+ // this.isRepeated=response.data.data
+ if(response.data.data.length>0){
alert('璇ュ簵閾虹殑鏃舵宸插瓨鍦ㄥ垎鏋愭暟鎹�,璇烽噸鏂伴�夋嫨')
+ this.isRepeated = 1
+ this.loading=false
+ this.isNoData = false
this.button.statisticsButton = false
+ this.afterAnalysis = response.data.data
+ this.total = this.afterAnalysis.length;
+ // 榛樿鏄剧ず绗竴椤�
+ this.handleCurrentChange(1);
return
- }else{
+ }
+ // 璇锋眰宸插瓨鍦ㄧ殑鏁版嵁
+ else{
this.analysisData()
this.button.statisticsButton = false
}
@@ -373,23 +379,27 @@
},
+
//鍐欏叆MySql
toSql(){
- this.button.WarehousingButton = true
- this.afterAnalysis.forEach((item)=>{
- console.log(item);
- let jsonData=JSON.stringify(item)
- console.log(jsonData);
- axiosInstanceInstance.post('/data/tosql',jsonData,{headers:{
- 'Content-Type':'application/json'
- }}).then((result)=>{
- console.log(result);
+ if(this.isRepeated == 0){
+ this.button.WarehousingButton = true
+ this.afterAnalysis.forEach((item)=>{
+ let jsonData=JSON.stringify(item)
+ // axiosInstanceInstance.post('/data/tosql',jsonData,{headers:{
+ // 'Content-Type':'application/json'
+ // }}).then((result)=>{
+ // // console.log(result);
+ // })
+
})
-
- })
- alert('宸叉垚鍔熷啓鍏ユ暟鎹簱')
- this.button.WarehousingButton = fasle
- this.isWrite='鏄�'
+ alert('宸叉垚鍔熷啓鍏ユ暟鎹簱')
+ this.button.WarehousingButton = fasle
+ this.isWrite='鏄�'
+ }else{
+ alert('閲嶅鍊间笉鍙啓鍏ユ暟鎹簱')
+ }
+
},
@@ -399,6 +409,7 @@
},
handleCurrentChange(val) {
const startIndex = (val - 1) * this.pageSize;
+
const endIndex = startIndex + this.pageSize;
this.displayData = this.afterAnalysis.slice(startIndex, endIndex);
@@ -450,7 +461,7 @@
</script>
-<style>
+<style lang="scss">
/* 鍗＄墖 */
.box-card {
/* width: 1700px; */
diff --git a/src/views/analysis/graph/AllRate.vue b/src/views/analysis/graph/AllRate.vue
index 793398e..5dda4e8 100644
--- a/src/views/analysis/graph/AllRate.vue
+++ b/src/views/analysis/graph/AllRate.vue
@@ -289,10 +289,7 @@
this.chart = echarts.init(this.$refs.lineChart)
this.chart.setOption({
- title: {
- text: '姣旂巼',
- //left: 'center'
- },
+
grid: {
left: '3%',
right: '4%',
@@ -303,7 +300,7 @@
legend: {
data: ['鍑�鍖栧櫒寮�鍚巼','瓒呮爣鐜�','鏁版嵁鏈夋晥鐜�','鏃ュ湪绾跨巼','涓崍鍦ㄧ嚎鐜�','鏅氫笂鍦ㄧ嚎鐜�','閲嶇偣鏃舵鍦ㄧ嚎鐜�','涓崍鏈夋晥鐜�','鏅氫笂鏈夋晥鐜�','閲嶇偣鏃舵鏈夋晥鐜�','涓崍寮�鍚巼','鏅氫笂寮�鍚巼','閲嶇偣鏃舵寮�鍚巼','涓崍瓒呮爣鐜�','鏅氫笂瓒呮爣鐜�','閲嶇偣鏃舵瓒呮爣鐜�'],
- //type: "scroll"
+
},
toolbox: { //宸ュ叿鏍�
top:20,
diff --git a/src/views/analysis/graph/DayData.vue b/src/views/analysis/graph/DayData.vue
index 6bc06c1..f9f263c 100644
--- a/src/views/analysis/graph/DayData.vue
+++ b/src/views/analysis/graph/DayData.vue
@@ -38,7 +38,7 @@
</el-form-item>
<el-form-item>
- <el-button type="primary" loading="button.showChartButton" @click="fetchData">灞曠ず鍥�</el-button>
+ <el-button type="primary" :loading="button.showChartButton" @click="fetchData">灞曠ず鍥�</el-button>
</el-form-item>
</el-form>
diff --git a/src/views/getdata/GetData.vue b/src/views/getdata/GetData.vue
index aa103e7..da13397 100644
--- a/src/views/getdata/GetData.vue
+++ b/src/views/getdata/GetData.vue
@@ -56,7 +56,6 @@
autoLogin(){
this.login_loading = true
axiosInstancePy.get('/autologin').then(response =>{
- console.log('鐧婚檰缁撴灉涓猴細',response.data);
ElMessage.success(response.data)
this.login_loading = false
})
@@ -78,7 +77,6 @@
this.loading = true;
// 寰楀埌鍙嶉淇℃伅 鎵�鏈夋暟鎹�
axiosInstancePy.post('/getData', form).then((response) => {
- console.log(response.data);
if(response.data == '-1'){
this.loading = false;
// ElMessage.warning('璇峰厛鐐瑰嚮鐧婚檰')
@@ -96,19 +94,13 @@
this.result = this.result + item + '\n';
});
- // response.data.allData.forEach(item=>{
- // this.allData =this.allData+item+'\n'
- // this.allData =this.allData+'\n'
- // });
+
this.allData = response.data.allData;
this.duplicateData = response.data.duplicate;
- console.log('閲嶅鐨勬暟鎹负锛�', this.duplicateData);
this.newData = response.data.newData;
- console.log('鏂版暟鎹潯鏁颁负锛�',this.newData.length);
this.loading = false;
this.displayData = this.arrToObject(this.duplicateData);
- console.log('杞崲鍚庣殑瀵硅薄鏁扮粍涓猴細',this.displayData);
this.result=this.result+'\n閲嶅鐨勬暟閲忎负锛�'+this.duplicateData.length
});
@@ -146,7 +138,6 @@
}
this.openFullScreen()
axiosInstancePy.post('/store', {'allData':this.allData}).then((response) => {
- console.log(response.data);
ElMessage.success(response.data)
this.loadingToMysql.close()
})
@@ -164,7 +155,6 @@
axiosInstancePy
.post('/store', { 'allData': this.newData })
.then((response) => {
- console.log(response.data);
ElMessage.success(response.data)
this.loadingToMysql.close()
});
@@ -193,7 +183,6 @@
axiosInstancePy
.post('/store', { 'allData': this.newData })
.then((response) => {
- console.log(response.data);
ElMessage.success(response.data)
this.loadingToMysql.close()
});
@@ -221,11 +210,11 @@
</div>
<el-card>
- <!-- <ShopNameSelect @submit-shops="(n)=>selectedShopNames=n"></ShopNameSelect> -->
+
<ShopNameCheckBox
@submit-shops="(n) => (form.selectedShopNames = n)"
></ShopNameCheckBox>
- <!-- {{ selectedShopNames }} -->
+
</el-card>
@@ -247,7 +236,7 @@
placeholder="鐖彇缁撴灉"
autosize
></el-input>
- <!-- rows="6" -->
+
</div>
@@ -275,9 +264,7 @@
<el-empty v-show="isNoData" :image-size="150" />
</div>
- <!-- <div class="result-textarea">
- <span >閲嶅鏁伴噺涓猴細{{ duplicateData.length }}</span>
- </div> -->
+
<div class="store-button" >
<el-button
@@ -316,9 +303,7 @@
margin-top: 20px;
width: 50%;
}
-// .result-textarea-textarea {
-// // width: 50%;
-// }
+
.progress-percentage {
width: 50%;
margin-top: 20px;
diff --git a/vue3-project-1.zip b/vue3-project-1.zip
new file mode 100644
index 0000000..2e10f4e
--- /dev/null
+++ b/vue3-project-1.zip
Binary files differ
--
Gitblit v1.9.3