From 4c6f2df21a29048440a85e34dadcd4f1c75c179c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 13 十一月 2023 17:32:24 +0800
Subject: [PATCH] 页面优化
---
src/views/smoke/realTime/components/tenHourData.vue | 83 +++++++
src/views/smoke/realTime/index.vue | 33 ++
src/assets/icons/svg/dailySum.svg | 1
src/assets/icons/svg/devices.svg | 1
src/assets/icons/svg/intimeData.svg | 1
src/assets/icons/svg/tenMinData.svg | 1
src/assets/icons/svg/tenHourData.svg | 1
src/views/smoke/realTime/components/intimeData.vue | 160 ++++++++++++++
src/api/smoke/statistics.js | 6
src/assets/imgs/normalLocale.png | 0
src/views/smoke/realTime/components/detectorDailySumDays.vue | 77 ++++++
src/views/smoke/realTime/components/devices.vue | 159 ++++++++++++++
src/views/smoke/realTime/components/tenMinData.vue | 106 +++++++++
13 files changed, 606 insertions(+), 23 deletions(-)
diff --git a/src/api/smoke/statistics.js b/src/api/smoke/statistics.js
index 3f5c296..4e50688 100644
--- a/src/api/smoke/statistics.js
+++ b/src/api/smoke/statistics.js
@@ -13,6 +13,10 @@
// 鐩戞祴鎶ヨ缁熻&杩愮淮鎯呭喌鎶ヨ〃
findCurAlarmList: (params) => {
return http.get('/sccg/smoke/statistics/listCurAlarm', params);
- }
+ },
+ // 妫�娴嬩华鎬讳綋鎯呭喌鎶ヨ〃 妗ｆ
+ getDocument: (params) => {
+ return http.get('/sccg/smoke/statistics/detectorDailyStats/document', params);
+ }
}
\ No newline at end of file
diff --git a/src/assets/icons/svg/dailySum.svg b/src/assets/icons/svg/dailySum.svg
new file mode 100644
index 0000000..78faeaa
--- /dev/null
+++ b/src/assets/icons/svg/dailySum.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699864983138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4031" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M839.647708 1016.974416H184.352292a98.358181 98.358181 0 0 1-97.719492-98.358182V107.480583A98.358181 98.358181 0 0 1 184.352292 9.122402h383.213694a97.080802 97.080802 0 0 1 63.868948 24.90889l275.27517 243.979385a95.803423 95.803423 0 0 1 32.573164 72.810602v567.794955a98.358181 98.358181 0 0 1-99.63556 98.358182zM184.352292 74.907419a32.573164 32.573164 0 0 0-32.573164 32.573164v811.135651a32.573164 32.573164 0 0 0 32.573164 32.573164h655.295416a32.573164 32.573164 0 0 0 32.573164-32.573164V350.821279a30.657095 30.657095 0 0 0-10.857722-23.631512l-274.63648-243.979384a35.127922 35.127922 0 0 0-21.715442-8.302964z" fill="#323333" p-id="4032"></path><path d="M448.131051 354.653416H288.458679a33.211853 33.211853 0 0 1 0-63.868949H448.131051a33.211853 33.211853 0 1 1 0 63.868949zM667.840235 547.537641H288.458679a32.573164 32.573164 0 0 1 0-63.868949h379.381556a32.573164 32.573164 0 0 1 0 63.868949zM667.840235 741.060556H288.458679a33.211853 33.211853 0 0 1 0-63.868949h379.381556a33.211853 33.211853 0 0 1 0 63.868949zM883.078593 359.124242h-319.344744a32.573164 32.573164 0 0 1-33.211854-32.573164V42.334255a33.211853 33.211853 0 1 1 63.868949 0v251.643659h285.494202a32.573164 32.573164 0 1 1 0 63.868949z" fill="#323333" p-id="4033"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/devices.svg b/src/assets/icons/svg/devices.svg
new file mode 100644
index 0000000..5502266
--- /dev/null
+++ b/src/assets/icons/svg/devices.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865143316" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14890" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M827.733333 989.866667h-631.466666c-39.253333 0-71.68-32.426667-71.68-69.973334V172.373333C124.586667 133.12 157.013333 102.4 196.266667 102.4h158.72c13.653333 0 25.6 11.946667 25.6 25.6V170.666667h266.24V128c0-13.653333 11.946667-25.6 25.6-25.6h158.72c39.253333 0 71.68 32.426667 71.68 69.973333v745.813334c-3.413333 39.253333-35.84 71.68-75.093334 71.68z m-631.466666-836.266667c-10.24 0-20.48 8.533333-20.48 18.773333v745.813334c0 10.24 8.533333 18.773333 20.48 18.773333h633.173333c10.24 0 20.48-8.533333 20.48-18.773333V172.373333c0-10.24-8.533333-18.773333-20.48-18.773333h-133.12v42.666667c0 13.653333-11.946667 25.6-25.6 25.6H353.28c-13.653333 0-25.6-11.946667-25.6-25.6V153.6h-131.413333z" fill="#333333" p-id="14891"></path><path d="M670.72 221.866667H353.28c-13.653333 0-25.6-11.946667-25.6-25.6v-136.533334c0-13.653333 11.946667-25.6 25.6-25.6h317.44c13.653333 0 25.6 11.946667 25.6 25.6v136.533334c0 13.653333-11.946667 25.6-25.6 25.6z m-291.84-51.2h266.24V85.333333H378.88v85.333334zM443.733333 786.773333c-6.826667 0-13.653333-1.706667-18.773333-6.826666-10.24-10.24-10.24-25.6 0-35.84l136.533333-136.533334h-163.84c-10.24 0-20.48-6.826667-23.893333-15.36s-1.706667-20.48 5.12-27.306666l180.906667-180.906667c10.24-10.24 25.6-10.24 35.84 0s10.24 25.6 0 35.84l-136.533334 136.533333h163.84c10.24 0 20.48 6.826667 23.893334 15.36s1.706667 20.48-5.12 27.306667L462.506667 778.24c-5.12 5.12-11.946667 8.533333-18.773334 8.533333z" fill="#333333" p-id="14892"></path><path d="M723.626667 952.32H209.92c-20.48 0-35.84-17.066667-35.84-35.84V310.613333c0-20.48 17.066667-35.84 35.84-35.84h513.706667c20.48 0 35.84 17.066667 35.84 35.84v605.866667c0 20.48-15.36 35.84-35.84 35.84z" fill="#333333" opacity=".3" p-id="14893"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/intimeData.svg b/src/assets/icons/svg/intimeData.svg
new file mode 100644
index 0000000..2f612af
--- /dev/null
+++ b/src/assets/icons/svg/intimeData.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865041092" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M832 128v768H256V128h576m64-64H192v896h704V64z" p-id="9030"></path><path d="M161.3 296.2v-0.2H320v-40H161.3c-35.5 0-64.3 28.7-64.3 64s28.8 64 64.3 64h90v-40h-90v-0.2c-13.3 0-24.1-10.7-24.1-23.8 0-13.1 10.8-23.8 24.1-23.8zM161.3 488.2v-0.2H320v-40H161.3c-35.5 0-64.3 28.7-64.3 64s28.8 64 64.3 64h90v-40h-90v-0.2c-13.3 0-24.1-10.7-24.1-23.8 0-13.1 10.8-23.8 24.1-23.8zM161.3 680.2v-0.2H320v-40H161.3c-35.5 0-64.3 28.7-64.3 64s28.8 64 64.3 64h90v-40h-90v-0.2c-13.3 0-24.1-10.7-24.1-23.8 0-13.1 10.8-23.8 24.1-23.8z" p-id="9031"></path><path d="M320 277m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="9032"></path><path d="M320 469m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="9033"></path><path d="M320 662m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="9034"></path><path d="M384 256h385v40H384zM384 384h385v40H384zM384 512h385v40H384zM384 640h256v40H384z" p-id="9035"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tenHourData.svg b/src/assets/icons/svg/tenHourData.svg
new file mode 100644
index 0000000..70bc8ec
--- /dev/null
+++ b/src/assets/icons/svg/tenHourData.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865094403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12027" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M896 928H128a32 32 0 0 1-32-32V128a32 32 0 0 1 64 0v736H896a32 32 0 0 1 0 64z" fill="#4D4D4D" p-id="12028"></path><path d="M352 896a32 32 0 0 1-32-32v-320a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zM576 896a32 32 0 0 1-32-32V448a32 32 0 0 1 64 0v416a32 32 0 0 1-32 32zM800 896a32 32 0 0 1-32-32V384a32 32 0 0 1 64 0v480a32 32 0 0 1-32 32zM256 416a32.64 32.64 0 0 1-25.6-12.8 32 32 0 0 1 6.4-44.8l256-192a31.36 31.36 0 0 1 41.6 0l108.8 108.16L876.8 102.4a32 32 0 1 1 38.4 51.2l-256 192a31.36 31.36 0 0 1-41.6-3.2L512 234.24 275.2 409.6a31.36 31.36 0 0 1-19.2 6.4z" fill="#4D4D4D" p-id="12029"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tenMinData.svg b/src/assets/icons/svg/tenMinData.svg
new file mode 100644
index 0000000..adcb928
--- /dev/null
+++ b/src/assets/icons/svg/tenMinData.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865071125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10975" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M426.666667 170.666667v682.666666h170.666666V170.666667h-170.666666zM170.666667 384v469.333333h170.666666V384H170.666667z m512 170.666667v298.666666h170.666666v-298.666666h-170.666666z" p-id="10976"></path></svg>
\ No newline at end of file
diff --git a/src/assets/imgs/normalLocale.png b/src/assets/imgs/normalLocale.png
new file mode 100644
index 0000000..0f54981
--- /dev/null
+++ b/src/assets/imgs/normalLocale.png
Binary files differ
diff --git a/src/views/smoke/realTime/components/detectorDailySumDays.vue b/src/views/smoke/realTime/components/detectorDailySumDays.vue
index 17bcab3..12e8fd8 100644
--- a/src/views/smoke/realTime/components/detectorDailySumDays.vue
+++ b/src/views/smoke/realTime/components/detectorDailySumDays.vue
@@ -1,13 +1,84 @@
<template>
-
+ <div>
+ <el-descriptions>
+ <el-descriptions-item label="椁愰ギ浼佷笟鍚嶇О:">{{
+ localeInfo.customer.Name
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鑱旂郴浜�:">{{
+ localeInfo.customer.Contact
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鑱旂郴鐢佃瘽:">{{
+ localeInfo.customer.Mobile
+ }}</el-descriptions-item>
+ <el-descriptions-item label="璇︾粏鍦板潃:">
+ {{ localeInfo.customer.Address }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鐩戞祴鐐圭被鍨�:">
+ {{
+ localeInfo.customer.Typ == 4 ? '涓�鑸娴嬬偣' : '鍏朵粬'
+ }}</el-descriptions-item
+ >
+ <el-descriptions-item label="鎵�灞炲崟浣�:">
+ {{ localeInfo.customer.Org }}</el-descriptions-item
+ >
+ <el-descriptions-item label="鑿滅郴:"></el-descriptions-item>
+ <el-descriptions-item label="椋庨��:">
+ {{ localeInfo.locale.FanSpeed }}m/s
+ </el-descriptions-item>
+ <el-descriptions-item label="椋庨噺:">
+ {{ localeInfo.locale.FanQuantity }}m鲁/h</el-descriptions-item
+ >
+ <el-descriptions-item label="绠￠亾鎴潰闈㈢Н:">
+ {{ localeInfo.locale.PipeArea }}m虏</el-descriptions-item
+ >
+ <el-descriptions-item label="鐏跺ご鏁伴噺:">
+ {{ localeInfo.locale.StoveNum }}涓�</el-descriptions-item
+ >
+ <el-descriptions-item label="闆嗘皵缃╅潰绉�:">
+ {{ localeInfo.locale.StoveArea }}m虏</el-descriptions-item
+ >
+ </el-descriptions>
+ </div>
</template>
<script>
+import statisticsApi from "@/api/smoke/statistics";
export default {
+ data() {
+ return {
+ localeInfo: {}
+ }
+ },
+ created() {
+ this.getData();
+ },
+ methods: {
+ getData() {
+ let param = {
+ field: "detectorDailySumDays",
+ localeId: this.inTimeData.Lid
+ }
+ statisticsApi.getDocument(param).then(jsonStr => {
+ const res = JSON.parse(jsonStr)
+ debugger
+ this.localeInfo = res.Data
+ })
+
+ },
+
+ // 璁剧疆琛ㄦ牸鏂戦┈绾�
+ tableRowClassName({ row, rowIndex }) {
+ if ((rowIndex + 1) % 2 == 0) {
+ return "warning-row";
+ } else {
+ return "success-row";
+ }
+ return "";
+ },
+ },
+ props: ['inTimeData']
}
</script>
-
<style>
-
</style>
\ No newline at end of file
diff --git a/src/views/smoke/realTime/components/devices.vue b/src/views/smoke/realTime/components/devices.vue
index 17bcab3..20757f5 100644
--- a/src/views/smoke/realTime/components/devices.vue
+++ b/src/views/smoke/realTime/components/devices.vue
@@ -1,13 +1,166 @@
<template>
-
+ <div>
+ <div class="title">璁惧淇℃伅</div>
+ <div style="width: 100%; overflow-x: scroll">
+ <el-table
+ border
+ stripe
+ ref="multipleTable"
+ :header-cell-style="{
+ background: '#F5F5F5',
+ 'font-weight': '650',
+ 'line-height': '45px'
+ }"
+ :data="tableData"
+ :row-class-name="tableRowClassName"
+ >
+ <el-table-column prop="MN" label="璁惧缂栫爜" min-width="120px">
+ </el-table-column>
+ <el-table-column
+ prop="Locale.Name"
+ label="鐩戞祴鐐�"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="LocaleNameStr"
+ label="鎵�灞炲崟浣�"
+ min-width="120px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="SubtypeStr"
+ label="璁惧绫诲瀷"
+ min-width="120px"
+ >
+ </el-table-column>
+ <el-table-column prop="ModelStr" label="鍨嬪彿" min-width="95px">
+ </el-table-column>
+ <el-table-column prop="Brand" label="鍝佺墝" min-width="95px">
+ </el-table-column>
+ <el-table-column prop="Sim" label="SIM鍗�" min-width="95px">
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <div class="title">鐩戞祴鐐硅繍缁存儏鍐�</div>
+ <div style="width: 100%; overflow-x: scroll">
+ <el-table
+ border
+ stripe
+ ref="multipleTable"
+ :header-cell-style="{
+ background: '#F5F5F5',
+ 'font-weight': '650',
+ 'line-height': '45px'
+ }"
+ :data="tableData2"
+ :row-class-name="tableRowClassName"
+ >
+ <el-table-column prop="hour_str" label="鐩戞祴鐐�" width="100px">
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="鐩戞祴鐐瑰湴鍧�"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="缁存姢绫诲瀷"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="璁惧缂栧彿"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="娲惧崟鏃ユ湡"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="澶勭悊鏃ユ湡"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="杩愮淮浜哄憳"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="鎿嶄綔鐘舵��"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hour_str"
+ label="鏌ョ湅璇︽儏"
+ min-width="150px"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
</template>
<script>
+import statisticsApi from "@/api/smoke/statistics";
export default {
+ data() {
+ return {
+ tableData: [],
+ tableData2: []
+ }
+ },
+ created() {
+ this.getData();
+ },
+ methods: {
+ getData() {
+ let param = {
+ field: "devices",
+ localeId: this.inTimeData.Lid
+ }
+ statisticsApi.getDocument(param).then(jsonStr => {
+ const res = JSON.parse(jsonStr)
+ let list = res.Data
+ list.forEach(o => {
+ o.LocaleNameStr = o.Locale.Name.substring(0, o.Locale.Name.length - 3)
+ o.SubtypeStr = o.Subtype == 3 ? '妫�娴嬩华璁惧' : '-'
+ o.ModelStr = o.Model == 2 ? 'MRJC-YY-A01' : '-'
+ });
+ this.tableData = list
+ })
+
+ },
+ // 璁剧疆琛ㄦ牸鏂戦┈绾�
+ tableRowClassName({ row, rowIndex }) {
+ if ((rowIndex + 1) % 2 == 0) {
+ return "warning-row";
+ } else {
+ return "success-row";
+ }
+ return "";
+ },
+ },
+ props: ['inTimeData']
}
</script>
-
<style>
-
+.title {
+ line-height: 1;
+ text-align: left;
+ font-size: 20px;
+ margin: 5px 0px;
+}
</style>
\ No newline at end of file
diff --git a/src/views/smoke/realTime/components/intimeData.vue b/src/views/smoke/realTime/components/intimeData.vue
index 17bcab3..c3bca4b 100644
--- a/src/views/smoke/realTime/components/intimeData.vue
+++ b/src/views/smoke/realTime/components/intimeData.vue
@@ -1,13 +1,169 @@
<template>
-
+ <div>
+ <div style="width: 100%; overflow-x: scroll">
+ <el-table
+ border
+ stripe
+ ref="multipleTable"
+ :header-cell-style="{
+ background: '#F5F5F5',
+ 'font-weight': '650',
+ 'line-height': '45px'
+ }"
+ :data="tableData"
+ :row-class-name="tableRowClassName"
+ >
+ <el-table-column label="搴忓彿" type="index" width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="acquit_at_str"
+ label="閲囬泦鏃堕棿"
+ min-width="150px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="fan_status_str"
+ label="椋庢満鐘舵��"
+ min-width="120px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hydrocarbon_conc"
+ label="椋庢満鐢垫祦锛圓锛�"
+ min-width="120px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="filter_status"
+ label="鍑�鍖栧櫒鐘舵��"
+ min-width="95px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="emissions_conc"
+ label="娌圭儫娴撳害(mg/m鲁)"
+ min-width="180px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="granule_conc"
+ label="棰楃矑鐗╂祿搴�(mg/m鲁)"
+ min-width="180px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hydrocarbon_conc"
+ label="闈炵敳鐑锋�荤儍娴撳害(mg/m鲁)"
+ min-width="190px"
+ >
+ </el-table-column>
+ <el-table-column prop="status" label="璁惧鐘舵��" width="120px">
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="tools">
+ <div class="pagination">
+ <el-pagination
+ background
+ @prev-click="handlePrev"
+ @next-click="handleNext"
+ :current-page="currentPage"
+ layout="prev, pager, next"
+ :total="totalNum"
+ :page-size="pageSize"
+ @current-change="changeCurrentPage"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import statisticsApi from "@/api/smoke/statistics";
export default {
+ data() {
+ return {
+ currentPage: 1,
+ pageSize: 20,
+ totalNum: 0,
+ tableData: []
+ }
+ },
+ created() {
+ this.getRealTimeList();
+ },
+ methods: {
+ getRealTimeList() {
+ let param = {
+ field: "intimeData",
+ localeId: this.inTimeData.Lid
+ }
+ statisticsApi.getDocument(param).then(jsonStr => {
+ const res = JSON.parse(jsonStr)
+ let list = res.Data.content
+ list.forEach(o => {
+ o.acquit_at_str = this.dateFormat(
+ "YYYY-mm-dd HH:MM:SS",
+ new Date(o.acquit_at * 1000)
+ );
+ o.fan_status_str = o.fan_status == '1' ? '寮�' : '鍏�'
+ o.status = '杈炬爣'
+ });
+ this.tableData = list
+ this.totalNum = res.Data.total
+ })
+ },
+ // 璁剧疆琛ㄦ牸鏂戦┈绾�
+ tableRowClassName({ row, rowIndex }) {
+ if ((rowIndex + 1) % 2 === 0) {
+ return "warning-row";
+ } else {
+ return "success-row";
+ }
+ },
+ // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
+ changeCurrentPage(page) {
+ this.currentPage = page;
+ this.getRealTimeList();
+ },
+ // 涓婁竴椤电偣鍑讳簨浠�
+ handlePrev(page) {
+ this.currentPage = page;
+ this.getRealTimeList();
+ },
+ // 涓嬩竴椤电偣鍑讳簨浠�
+ handleNext(page) {
+ this.currentPage = page;
+ this.getRealTimeList();
+ },
+ dateFormat(fmt, date) {
+ let ret;
+ const opt = {
+ "Y+": date.getFullYear().toString(), // 骞�
+ "m+": (date.getMonth() + 1).toString(), // 鏈�
+ "d+": date.getDate().toString(), // 鏃�
+ "H+": date.getHours().toString(), // 鏃�
+ "M+": date.getMinutes().toString(), // 鍒�
+ "S+": date.getSeconds().toString(), // 绉�
+ // 鏈夊叾浠栨牸寮忓寲瀛楃闇�姹傚彲浠ョ户缁坊鍔狅紝蹇呴』杞寲鎴愬瓧绗︿覆
+ };
+ for (let k in opt) {
+ ret = new RegExp("(" + k + ")").exec(fmt);
+ if (ret) {
+ fmt = fmt.replace(
+ ret[1],
+ ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
+ );
+ }
+ }
+ return fmt;
+ },
+ },
+ props: ['inTimeData']
}
</script>
<style>
-
</style>
\ No newline at end of file
diff --git a/src/views/smoke/realTime/components/tenHourData.vue b/src/views/smoke/realTime/components/tenHourData.vue
index 17bcab3..28e89c2 100644
--- a/src/views/smoke/realTime/components/tenHourData.vue
+++ b/src/views/smoke/realTime/components/tenHourData.vue
@@ -1,13 +1,90 @@
<template>
-
+ <div style="width: 100%; overflow-x: scroll">
+ <el-table
+ border
+ stripe
+ ref="multipleTable"
+ :header-cell-style="{
+ background: '#F5F5F5',
+ 'font-weight': '650',
+ 'line-height': '45px'
+ }"
+ :data="tableData"
+ :row-class-name="tableRowClassName"
+ >
+ <el-table-column label="搴忓彿" type="index" width="60px">
+ </el-table-column>
+ <el-table-column prop="hour_str" label="鏃堕棿" min-width="150px">
+ </el-table-column>
+ <el-table-column
+ prop="emissions_conc"
+ label="娌圭儫鎶樼畻娴撳害"
+ min-width="120px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="granule_conc"
+ label="棰楃矑鐗╂姌绠楁祿搴�"
+ min-width="120px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="hydrocarbon_conc"
+ label="闈炵敳鐑锋姌绠楁祿搴�"
+ min-width="95px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="status_str"
+ label="鎺掓斁鐘舵��"
+ min-width="180px"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
</template>
<script>
+import statisticsApi from "@/api/smoke/statistics";
export default {
+ data() {
+ return {
+ tableData: []
+ }
+ },
+ created() {
+ this.getData();
+ },
+ methods: {
+ getData() {
+ let param = {
+ field: "tenHourData",
+ localeId: this.inTimeData.Lid
+ }
+ statisticsApi.getDocument(param).then(jsonStr => {
+ const res = JSON.parse(jsonStr)
+ let list = res.Data.list
+ list.forEach(o => {
+ o.hour_str = o.hour + '-' + (o.hour + 1) + '鐐�'
+ o.status_str = o.status == '0' ? '杈炬爣' : '瓒呮爣'
+ o.status = '杈炬爣'
+ });
+ this.tableData = list
+ })
+
+ },
+ // 璁剧疆琛ㄦ牸鏂戦┈绾�
+ tableRowClassName({ row, rowIndex }) {
+ if ((rowIndex + 1) % 2 === 0) {
+ return "warning-row";
+ } else {
+ return "success-row";
+ }
+ },
+ },
+ props: ['inTimeData']
}
</script>
-
<style>
-
</style>
\ No newline at end of file
diff --git a/src/views/smoke/realTime/components/tenMinData.vue b/src/views/smoke/realTime/components/tenMinData.vue
index 17bcab3..5ea24df 100644
--- a/src/views/smoke/realTime/components/tenMinData.vue
+++ b/src/views/smoke/realTime/components/tenMinData.vue
@@ -1,13 +1,113 @@
<template>
-
+ <div id="mychart" class="echart-foot"></div>
</template>
<script>
+import * as echarts from "echarts";
+import statisticsApi from "@/api/smoke/statistics";
export default {
+ data() {
+ return {
+ echarts: null,
+ }
+ },
+ created() {
+ this.getData();
+ },
+ methods: {
+ getData() {
+ let param = {
+ field: "tenMinData",
+ localeId: this.inTimeData.Lid
+ }
+ statisticsApi.getDocument(param).then(jsonStr => {
+ const res = JSON.parse(jsonStr)
+ let list = res.Data
+
+ let myecharts = echarts.init(document.getElementById("mychart"));
+
+ let times = this.getTimer('2020-01-01 00:00:00', 10, 144);
+ let data1 = [] // 娌圭儫娴撳害
+ let data2 = [] // 棰楃矑鐗╂祿搴�
+ let data3 = [] // 闈炵敳鐑锋�荤儍娴撳害
+ times.forEach((o, index) => {
+ if (list[index]) {
+ data1.push(list[index].emissions_conc);
+ data2.push(list[index].granule_conc);
+ data3.push(list[index].hydrocarbon_conc);
+ }
+ else {
+ data1.push(0);
+ data2.push(0);
+ data3.push(0);
+
+ }
+ });
+ // 缁樺埗鍥捐〃
+ myecharts.setOption({
+ title: {
+ text: '骞冲潎娴撳害mg/m鲁'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['娌圭儫娴撳害', '棰楃矑鐗╂祿搴�', '闈炵敳鐑锋�荤儍娴撳害']
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: times
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '娌圭儫娴撳害',
+ data: data1,
+ stack: 'Total',
+ type: "line",
+ },
+ {
+ name: '棰楃矑鐗╂祿搴�',
+ data: data2, stack: 'Total',
+ type: "line"
+ },
+ {
+ name: '闈炵敳鐑锋�荤儍娴撳害', stack: 'Total',
+ data: data3,
+ type: "line"
+ },
+ ],
+ });
+
+ })
+
+ },
+
+ getTimer(start, Timer, length) {
+ var lists = [];
+ var count = 0; //鍒濆鍊间负0
+ for (let j = 0; j < length; j++) {
+ count += 1;
+ var seconds = Date.parse(start); //鏍囧噯鏃堕棿杞绉掓暟
+ var totals = j * Timer * 60 * 1000 + seconds; //鍥哄畾鏃堕棿闂撮殧+寮�濮嬫椂闂寸殑鎬绘绉掓暟
+ var res = new Date(totals).toString().split(' ')[4];//姣鏁拌浆瀛楃涓诧紝鎴彇锛屽彇鍊�
+
+ lists.push(res)
+ }
+ return lists;
+ }
+
+ },
+ props: ['inTimeData']
}
</script>
-
<style>
-
+.echart-foot {
+ height: 400px;
+ width: 100%;
+}
</style>
\ No newline at end of file
diff --git a/src/views/smoke/realTime/index.vue b/src/views/smoke/realTime/index.vue
index c220764..d705494 100644
--- a/src/views/smoke/realTime/index.vue
+++ b/src/views/smoke/realTime/index.vue
@@ -17,11 +17,11 @@
>
<el-table-column label="搴忓彿" type="index" width="60px">
</el-table-column>
- <el-table-column prop="Locale" label="鐩戞祴鐐�" width="120px">
+ <el-table-column prop="Locale" label="鐩戞祴鐐�" min-width="120px">
</el-table-column>
- <el-table-column prop="Addr" label="瀹夎鍦板潃" width="180px">
+ <el-table-column prop="Addr" label="瀹夎鍦板潃" min-width="180px">
</el-table-column>
- <el-table-column prop="AcquitAtStr" label="閲囬泦鏃堕棿" width="100px">
+ <el-table-column prop="AcquitAtStr" label="閲囬泦鏃堕棿" min-width="100px">
</el-table-column>
<el-table-column prop="FanStatusStr" label="椋庢満鐘舵��" width="80px">
</el-table-column>
@@ -67,11 +67,20 @@
</el-table-column>
<el-table-column prop="OnlineStatusStr" label="鏁翠綋鐘舵��" width="80px">
</el-table-column>
- <el-table-column prop="operation" label="鎿嶄綔" width="550px">
+ <el-table-column prop="operation" label="鎿嶄綔" width="180px">
<template slot-scope="scope">
<div class="operation">
- <span @click="handleDetectorDailySumDays(scope.row)"
- >涓�鐐逛竴妗�</span
+ <i class="el-icon-document" @click="handleDetectorDailySumDays(scope.row)" title="涓�鐐逛竴妗�"></i>
+ <span class="line">|</span>
+ <i class="el-icon-notebook-1" @click="handleIntimeData(scope.row)" title="鏌ョ湅姣忓垎閽熸暟鎹�"></i>
+ <span class="line">|</span>
+ <i class="el-icon-s-data" @click="handleTenMinData(scope.row)" title="鏌ョ湅10min娴撳害"></i>
+ <span class="line">|</span>
+ <i class="el-icon-data-analysis" @click="handleTenHourData(scope.row)" title="鏌ョ湅灏忔椂鎶樼畻娴撳害"></i>
+ <span class="line">|</span>
+ <i class="el-icon-monitor" @click="handleDevices(scope.row)" title="鐩戞祴鐐硅澶囩鐞�"></i>
+ <!-- <span @click="handleDetectorDailySumDays(scope.row)"
+ ></span
>
<span class="line">|</span>
<span @click="handleIntimeData(scope.row)">鏌ョ湅姣忓垎閽熸暟鎹�</span>
@@ -82,7 +91,7 @@
>鏌ョ湅灏忔椂鎶樼畻娴撳害</span
>
<span class="line">|</span>
- <span @click="handleDevices(scope.row)">鐩戞祴鐐硅澶囩鐞�</span>
+ <span @click="handleDevices(scope.row)">鐩戞祴鐐硅澶囩鐞�</span> -->
</div>
</template>
</el-table-column>
@@ -109,6 +118,7 @@
width="80%"
>
<DetectorDailySumDays
+ title="涓�鐐逛竴妗�"
v-if="dialogDetectorDailySumDays"
@closeDialog="closeDialog"
:inTimeData="inTimeData"
@@ -123,6 +133,7 @@
>
<IntimeData
v-if="dialogIntimeData"
+ title="鍒嗛挓閲囬泦鏁版嵁"
@closeDialog="closeDialog"
:inTimeData="inTimeData"
></IntimeData>
@@ -136,6 +147,7 @@
>
<TenMinData
v-if="dialogTenMinData"
+ title="10min娴撳害鏇茬嚎"
@closeDialog="closeDialog"
:inTimeData="inTimeData"
></TenMinData>
@@ -143,6 +155,7 @@
<el-dialog
:destroy-on-close="true"
+ title="灏忔椂鎶樼畻娴撳害"
:visible.sync="dialogTenHourData"
width="80%"
>
@@ -156,6 +169,7 @@
<el-dialog
:destroy-on-close="true"
+ title="鐩戞祴鐐硅澶囩鐞�"
:visible.sync="dialogDevices"
width="80%"
>
@@ -409,11 +423,14 @@
.el-table {
.operation {
display: flex;
- color: var(--operation-color);
+ // color: var(--operation-color);
.line {
padding: 0 5px;
}
+ font-size: 20px;
+ cursor: pointer;
+ color: #666;
span:hover {
cursor: pointer;
}
--
Gitblit v1.8.0