From 2b6f255b97dba15d22b86319e2f38f6efac417cc Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 13 十一月 2023 23:23:27 +0800
Subject: [PATCH] 一点一档
---
src/views/smoke/realTime/components/detectorDailySumDays.vue | 428 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 329 insertions(+), 99 deletions(-)
diff --git a/src/views/smoke/realTime/components/detectorDailySumDays.vue b/src/views/smoke/realTime/components/detectorDailySumDays.vue
index b7c3ab4..f6a4a3e 100644
--- a/src/views/smoke/realTime/components/detectorDailySumDays.vue
+++ b/src/views/smoke/realTime/components/detectorDailySumDays.vue
@@ -1,121 +1,351 @@
<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 class="body">
+ <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="鑿滅郴">
+ {{ this.getCuisineName(localeInfo.locale.Cuisine) }}
+ </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 class="title">涓�銆佹妧鏈寚瀵硷細</div>
- <el-table :data="tableData1" style="width: 100%">
- <el-table-column prop="date" label="鑿滅郴" width="180">
- </el-table-column>
- <el-table-column prop="name" label="寤鸿浣跨敤鐨勫噣鍖栬鏂�" width="180">
- </el-table-column>
- <el-table-column prop="address" label="鍑�鍖栧櫒鍥剧墖">
- </el-table-column>
- <el-table-column prop="address" label="鍟嗗鍑�鍖栧櫒娆惧紡">
- </el-table-column>
- <el-table-column prop="address" label="娌圭儫鎺掓斁鎯呭喌">
- </el-table-column>
- </el-table>
+ <div class="title">涓�銆佹妧鏈寚瀵硷細</div>
+ <el-table :data="tableData1" style="width: 100%">
+ <el-table-column prop="cuisine" label="鑿滅郴" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="寤鸿浣跨敤鐨勫噣鍖栬鏂�" width="180">
+ </el-table-column>
+ <el-table-column prop="img" label="鍑�鍖栧櫒鍥剧墖">
+ <template slot-scope="scope">
+ <img ref="scope.img" />
+ </template>
+ </el-table-column>
+ <el-table-column prop="model" label="鍟嗗鍑�鍖栧櫒娆惧紡"> </el-table-column>
+ <el-table-column prop="status" label="娌圭儫鎺掓斁鎯呭喌"> </el-table-column>
+ </el-table>
- <div class="title">浜屻�侀楗紒涓氬湪绾跨洃娴嬫儏鍐垫眹鎬伙細</div>
+ <div class="title">浜屻�侀楗紒涓氬湪绾跨洃娴嬫儏鍐垫眹鎬伙細</div>
- <div class="title">涓夈�侀楗紒涓氬仴搴锋儏鍐靛睍绀猴細</div>
+ <div id="myChart1" class="echart-foot"></div>
- <div class="title">鍥涖�佺幇鍦虹収鐗囷細</div>
+ <div id="myChart2" class="echart-foot"></div>
- <div class="title">浜斻�佸噣鍖栬澶囨竻娲楃淮淇濊褰曪細</div>
+ <div class="title">涓夈�侀楗紒涓氬仴搴锋儏鍐靛睍绀猴細</div>
+ <el-table :data="tableData2" style="width: 100%">
+ <el-table-column prop="localeName" label="鐩戞祴鐐�" width="180">
+ </el-table-column>
+ <el-table-column prop="mn" label="璁惧缂栧彿" width="180">
+ </el-table-column>
+ <el-table-column prop="complianceDays" label="杈炬爣澶╂暟">
+ </el-table-column>
+ <el-table-column prop="excessDays" label="瓒呮爣澶╂暟"> </el-table-column>
+ <el-table-column prop="filterAbnormallyUsedDays" label="鍑�鍖栧櫒涓嶆甯稿ぉ鏁�">
+ </el-table-column>
+ <el-table-column prop="abnormalOfflineDays" label="搴楀鍘熷洜绂荤嚎澶╂暟">
+ </el-table-column>
+ <el-table-column prop="healthCodeColor" label="娌圭儫鍋ュ悍鐮�">
+ </el-table-column>
+ </el-table>
- <div class="title">鍏�佹暣鏀硅褰曪細</div>
+ <div class="title small_title">鍑�鍖栧櫒闇�娓呮礂榛勭爜鎶ヨ鎻愮ず锛�</div>
+ <el-table :data="tableData3" style="width: 100%">
+ <el-table-column prop="localeName" label="鐩戞祴鐐�" width="180">
+ </el-table-column>
+ <el-table-column prop="mn" label="璁惧缂栧彿" width="180">
+ </el-table-column>
+ <el-table-column prop="dayttt" label="鍑�鍖栧櫒闇�娓呮礂"> </el-table-column>
+ <el-table-column prop="dayttt" label="鍑�鍖栧櫒鏈竻娲楀鑷磋秴鏍�">
+ </el-table-column>
+ <el-table-column prop="dayttt" label="鍑�鍖栧櫒娓呮礂澶╂暟"> </el-table-column>
+ <el-table-column prop="dayttt" label="鍑�鍖栧櫒宸叉礂澶╂暟"> </el-table-column>
+ </el-table>
- <div class="title">涓冦�佹墽娉曠鐞嗚褰曪細</div>
- </div>
+ <div class="title small_title">瓒呮爣锛岃澶囨崯鍧忕孩鐮佹姤璀︽彁绀猴細</div>
+ <el-table :data="tableData4" style="width: 100%">
+ <el-table-column prop="localeName" label="鐩戞祴鐐�" width="180">
+ </el-table-column>
+ <el-table-column prop="mn" label="璁惧缂栧彿" width="180">
+ </el-table-column>
+ <el-table-column prop="dayttt2" label="瓒呮爣鍘熷洜"> </el-table-column>
+ <el-table-column prop="dayttt2" label="璁惧鎹熷潖鍘熷洜"> </el-table-column>
+ <el-table-column prop="dayttt2" label="绠＄悊閮ㄩ棬"> </el-table-column>
+ <el-table-column prop="dayttt2" label="鍟嗗杩涜鏁存敼"> </el-table-column>
+ <el-table-column prop="dayttt2" label="鏁存敼瀹屾垚"> </el-table-column>
+ </el-table>
+ <div class="title">鍥涖�佺幇鍦虹収鐗囷細</div>
+ <div>鏈笂浼犵幇鍦虹収鐗�</div>
+ <div class="title">浜斻�佸噣鍖栬澶囨竻娲楃淮淇濊褰曪細</div>
+
+ <el-table :data="tableData5" style="width: 100%">
+ <el-table-column prop="cuisine" label="鐩戞祴鐐�" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="瀹夎鍦板潃" width="180">
+ </el-table-column>
+ <el-table-column prop="cuisine" label="鎻愪氦鏃ユ湡" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="璧峰鏃ユ湡" width="180">
+ </el-table-column>
+ <el-table-column prop="img" label="缁堟鏃ユ湡"> </el-table-column>
+ <el-table-column prop="model" label="娓呮礂鐓х墖"> </el-table-column>
+ </el-table>
+ <div class="title">鍏�佹暣鏀硅褰曪細</div>
+
+ <el-table :data="tableData6" style="width: 100%">
+ <el-table-column prop="cuisine" label="鐩戞祴鐐�" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="瀹夎鍦板潃" width="180">
+ </el-table-column>
+ <el-table-column prop="cuisine" label="鏁存敼寮�濮嬫棩鏈�" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="鏁存敼缁撴潫鏃ユ湡" width="180">
+ </el-table-column>
+ <el-table-column prop="img" label="鏁存敼缁撴灉"> </el-table-column>
+ <el-table-column prop="model" label="璇︽儏"> </el-table-column>
+ </el-table>
+ <div class="title">涓冦�佹墽娉曠鐞嗚褰曪細</div>
+
+ <el-table :data="tableData7" style="width: 100%">
+ <el-table-column prop="cuisine" label="鐩戞祴鐐�" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="瀹夎鍦板潃" width="180">
+ </el-table-column>
+ <el-table-column prop="img" label="澶勭悊鏃ユ湡"> </el-table-column>
+ <el-table-column prop="model" label="绠＄悊绫诲瀷"> </el-table-column>
+ <el-table-column prop="status" label="澶勭悊浜哄憳"> </el-table-column>
+ <el-table-column prop="status" label="澶勭悊缁撴灉"> </el-table-column>
+ <el-table-column prop="status" label="璇︽儏"> </el-table-column>
+ </el-table>
+ </div>
</template>
<script>
+import * as echarts from "echarts";
import statisticsApi from "@/api/smoke/statistics";
export default {
- data() {
- return {
- localeInfo: {},
- tableData1:[],
- tableData2:[],
- tableData3:[],
- tableData4:[],
- tableData5:[],
- tableData6:[],
- tableData7:[]
+ data() {
+ return {
+ localeInfo: {},
+ listLocale: [],
+ tableData1: [],
+ tableData2: [],
+ tableData3: [],
+ tableData4: [],
+ tableData5: [],
+ tableData6: [],
+ tableData7: [],
+ };
+ },
+
+ created() {
+ this.getData();
+ },
+ methods: {
+ getData() {
+ let param = {
+ field: "detectorDailySumDays",
+ localeId: this.inTimeData.Lid,
+ };
+ statisticsApi.getDocument(param).then((jsonStr) => {
+ const res = JSON.parse(jsonStr);
+
+ this.localeInfo = JSON.parse(res.detectorDailySumDays).Data;
+ this.listLocale = JSON.parse(res.listLocale).Data.content;
+
+ this.listLocale.forEach((l) => {
+ this.tableData1.push({
+ cuisine: this.getCuisineName(l.Cuisine),
+ name: "浣庣┖鍑�鍖栧櫒",
+ img: "../../../../imgs/normalLocale.png",
+ model: "浣庣┖鍑�鍖栧櫒",
+ status: "杈炬爣",
+ });
+ });
+
+ this.tableData2.push(this.localeInfo);
+
+ this.localeInfo.dayttt = 0;
+ this.tableData3.push(this.localeInfo);
+
+ this.localeInfo.dayttt2 = "-";
+ this.tableData4.push(this.localeInfo);
+
+ let ten_min_data = JSON.parse(res.tenMinData);
+ let detector_daily = JSON.parse(res.detectorDaily);
+ setTimeout(() => {
+ this.initLineChart(ten_min_data.Data);
+ this.initColumnarChart(detector_daily.Data);
+ }, 3000);
+ });
+ },
+ initLineChart(list) {
+ let myecharts = echarts.init(document.getElementById("myChart1"));
+
+ 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);
}
- },
-
- 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
- })
-
+ });
+ // 缁樺埗鍥捐〃
+ myecharts.setOption({
+ title: {
+ text: "骞冲潎娴撳害mg/m鲁",
},
-
- // 璁剧疆琛ㄦ牸鏂戦┈绾�
- tableRowClassName({ row, rowIndex }) {
- if ((rowIndex + 1) % 2 == 0) {
- return "warning-row";
- } else {
- return "success-row";
- }
- return "";
+ 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",
+ },
+ ],
+ });
},
- props: ['inTimeData']
-}
+ initColumnarChart(list) {
+ let myecharts = echarts.init(document.getElementById("myChart2"));
+ let dataSource = [
+ ["product", "娌圭儫娴撳害", "棰楃矑鐗╂祿搴�", "闈炵敳鐑锋�荤儍娴撳害"],
+ ];
+ list.forEach((e) => {
+ dataSource.push([
+ e.AcquitDate.split(' ')[0],
+ e.CEmissions,
+ e.CGranule,
+ e.CHydrocarbon,
+ ]);
+ });
+
+ let option = {
+ legend: {},
+ tooltip: {},
+ dataset: {
+ source: dataSource,
+ },
+ xAxis: { type: "category" },
+ yAxis: {},
+ // Declare several bar series, each will be mapped
+ // to a column of dataset.source by default.
+ series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
+ };
+ myecharts.setOption(option);
+ },
+ // 璁剧疆琛ㄦ牸鏂戦┈绾�
+ tableRowClassName({ row, rowIndex }) {
+ if ((rowIndex + 1) % 2 == 0) {
+ return "warning-row";
+ } else {
+ return "success-row";
+ }
+ },
+ getCuisineName(cuisine) {
+ switch (cuisine) {
+ case 1:
+ return "鐑х儰";
+ case 3:
+ return "宸濇箻鑿�";
+ case 7:
+ return "瀹跺父鑿�";
+
+ default:
+ return "";
+ }
+ },
+
+ 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>
+.body {
+ line-height: 1;
+}
.title {
- font-size: 20px;
- text-align: left;
+ line-height: 1;
+ font-size: 20px;
+ text-align: left;
+ margin: 10px 0px;
+}
+.small_title {
+ font-size: 18px !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0