From fe0bb897ab59994f54dcf8f637019bf5c7124f55 Mon Sep 17 00:00:00 2001
From: 23688nl <329261568@qq.com>
Date: Wed, 7 Sep 2022 09:33:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=EF=BC=9B=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/bigscLocation/indexV_3.vue     |   4 +
 src/views/bigScreen/v3/index.vue              |   1 +
 src/views/bigScreen/v3/profile/mapWrap.vue    |   3 +-
 .../SafetyTemplate/ELeakageDetail.vue         | 318 ++++++++++++++++++
 4 files changed, 325 insertions(+), 1 deletion(-)
 create mode 100644 src/views/iot/project/profileV2/SafetyTemplate/ELeakageDetail.vue

diff --git a/src/components/Amap/components/bigscLocation/indexV_3.vue b/src/components/Amap/components/bigscLocation/indexV_3.vue
index b6a329a7..e621ba2d 100644
--- a/src/components/Amap/components/bigscLocation/indexV_3.vue
+++ b/src/components/Amap/components/bigscLocation/indexV_3.vue
@@ -35,6 +35,10 @@ export default {
       type: Array,
       default: [],
     },
+    selectProjectId: {
+      type: [String, Number],
+      default: null
+    }
   },
   data() {
     return {
diff --git a/src/views/bigScreen/v3/index.vue b/src/views/bigScreen/v3/index.vue
index 2124d32c..b30486ef 100644
--- a/src/views/bigScreen/v3/index.vue
+++ b/src/views/bigScreen/v3/index.vue
@@ -64,6 +64,7 @@
               :result="alarmInfoResult"
               @eventFullscreen="eventFullscreenMap"
               :projectList="projectList"
+              :selectProjectId="projectId"
             ></map-wrap>
 
             <map-wrap-personal
diff --git a/src/views/bigScreen/v3/profile/mapWrap.vue b/src/views/bigScreen/v3/profile/mapWrap.vue
index 3aebd08a..213d87bb 100644
--- a/src/views/bigScreen/v3/profile/mapWrap.vue
+++ b/src/views/bigScreen/v3/profile/mapWrap.vue
@@ -23,6 +23,7 @@
           style="position: relative;top: -45px;"
           ref="bigscLocationMap"
           :projectList="projectList"
+          :selectProjectId="selectProjectId"
         ></amap-wrap>
       </div>
     </nav-temp>
@@ -39,7 +40,7 @@ export default {
     amapWrap,
     NavTemp,
   },
-  props: ["countResult", "projectList", "fullscreen", 'result'],
+  props: ["countResult", "projectList", "fullscreen", 'result', 'selectProjectId'],
   data() {
     return {
       imgs,
diff --git a/src/views/iot/project/profileV2/SafetyTemplate/ELeakageDetail.vue b/src/views/iot/project/profileV2/SafetyTemplate/ELeakageDetail.vue
new file mode 100644
index 00000000..6595f2e9
--- /dev/null
+++ b/src/views/iot/project/profileV2/SafetyTemplate/ELeakageDetail.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="e-leakage-detail">
+    <div class="e-form-heard">
+      <div class="heard-query">
+        <div
+          @click="
+            () => {
+              queryParams.timeType = 'day';
+            }
+          "
+          :class="
+            queryParams.timeType === 'day'
+              ? 'data-type data-type-selected'
+              : 'data-type'
+          "
+        >
+          日
+        </div>
+        <div
+          @click="
+            () => {
+              queryParams.timeType = 'month';
+            }
+          "
+          :class="
+            queryParams.timeType === 'month'
+              ? 'data-type data-type-selected'
+              : 'data-type'
+          "
+          class="data-type"
+        >
+          月
+        </div>
+        <div class="other-query">
+          <span>日期</span>
+          <el-date-picker
+            v-if="queryParams.timeType === 'day'"
+            v-model="time"
+            type="date"
+            style="width: 150px"
+            placeholder="选择日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd 00:00:00"
+            :clearable="false"
+          >
+          </el-date-picker>
+          <el-date-picker
+            v-model="time"
+            v-if="queryParams.timeType === 'month'"
+            type="month"
+            style="width: 150px"
+            format="yyyy-MM"
+            value-format="yyyy-MM-01 00:00:00"
+            :clearable="false"
+            placeholder="选择月"
+          >
+          </el-date-picker>
+          <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="e-alarm-echarts">
+      <e-echarts-line
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        ref="echartsLineDetail"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        :eId="echartsOption.eId"
+        :option="resultOption"
+      ></e-echarts-line>
+    </div>
+  </div>
+</template>
+<script>
+import EEchartsLine from "@/components/Echarts/EEchartsLine";
+import * as echarts from "echarts";
+import { projectLeakageChart } from "@/api/iot/project_new";
+export default {
+  name: "ELeakageDetail",
+  props: {
+    sourceId: {
+      type: [Number, String],
+      require: true,
+    },
+    tempType: {
+      type: String,
+      require: true,
+    },
+    deviceId: {
+      type: [Number, String],
+      require: true
+    }
+  },
+  components: {
+    EEchartsLine
+  },
+  data() {
+    return {
+      time: "",
+      queryParams: {
+        timeType: "day",
+        time: "",
+        deviceId: "",
+      },
+      echartsOption: {
+        styles: "width: 100%; height: 100%;",
+        colorList: ["#EE6666", "#FFCC00"],
+        eId: "ELeakageDetailEchart",
+      },
+      title: "24小时报警情况",
+      typeName: "alarm",
+      resultOption: {
+        color: ["#EE6666", "#FFC900"],
+        title: {
+          text: "",
+          show: false,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          bottom: 0,
+          data: ["预警", "报警"],
+          textStyle: {
+            color: "#344567",
+            fontSize: 14,
+            fontWeight: 400,
+          },
+        },
+        grid: {
+          left: "20",
+          right: "20",
+          bottom: "35",
+          top: 30,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          show: true,
+          data: [],
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606266",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606266",
+            },
+          },
+        },
+        series: [
+          {
+            name: "--",
+            type: "line",
+            smooth: false,
+            symbolSize: 2,
+            markPoint: {
+              symbolSize: 35,
+              data: [
+                { type: "max", name: "Max" },
+                { type: "min", name: "Min" },
+              ],
+            },
+            label: {
+              show: false,
+              formatter: function (params) {
+                return echarts.format.formatTime("yyyy-MM-dd", params.value);
+              },
+              backgroundColor: "#7581BD",
+            },
+            data: [],
+          },
+        ],
+      },
+      loading: false
+    };
+  },
+  created() {
+    this.time =
+        this.queryParams.timeType === "day"
+          ? this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00")
+          : this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
+    this.handleQuery();
+  },
+  methods: {
+    handleQuery() {
+      this.loading = true
+      this.queryParams.deviceId = this.deviceId;
+      this.time =
+        this.queryParams.timeType === "day"
+          ? this.parseTime(new Date(this.time), "{y}-{m}-{d} 00:00:00")
+          : this.parseTime(new Date(this.time), "{y}-{m}-01 00:00:00");
+      this.getDeviceRecordEcharts();
+    },
+    // 查询 图表 数据
+    getDeviceRecordEcharts() {
+      projectLeakageChart(
+        Object.assign(this.queryParams, {
+          projectId: this.sourceId,
+          time: this.time,
+          typeCode: this.tempType,
+        })
+      ).then((res) => {
+        this.resultOption.xAxis.data = res.data["name"];
+        this.resultOption.legend.data = Object.keys(res.data).filter((v) => {
+          v !== "name";
+        });
+        var list = Object.keys(res.data).map((v) => {
+          if (v !== "name") {
+            return {
+              name: v,
+              type: "line",
+              smooth: false,
+              symbolSize: 2,
+              markPoint: {
+                symbolSize: 35,
+                data: [
+                  { type: "max", name: "Max" },
+                  { type: "min", name: "Min" },
+                ],
+              },
+              label: {
+                show: false,
+                formatter: function (params) {
+                  return echarts.format.formatTime("yyyy-MM-dd", params.value);
+                },
+                backgroundColor: "#7581BD",
+              },
+              data: res.data[v],
+            };
+          }
+        });
+        this.resultOption.series = [...list];
+        this.updateEcharts();
+      });
+    },
+    // 类型发生变化根据新数据刷新 图表信息
+    updateEcharts() {
+      this.loading = false;
+      this.$refs.echartsLineDetail.updateEchart();
+    },
+  },
+};
+</script>
+<style lang="scss">
+.e-leakage-detail {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .e-form-heard {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .heard-query {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .data-type {
+        width: 42px;
+        height: 32px;
+        background: #f4f5f7;
+        border-radius: 50%;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 300;
+        color: #6b778c;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 5px;
+        cursor: default;
+      }
+      .data-type-selected {
+        background: #1890ff;
+        color: #f4f5f7;
+      }
+      .other-query {
+        display: flex;
+        width: 420px;
+        justify-content: space-evenly;
+        align-items: center;
+      }
+      .other-print {
+        font-size: 20px;
+      }
+      .other-print:hover {
+        color: #1890ff;
+      }
+    }
+  }
+  .e-alarm-echarts {
+    width: 100%;
+    height: 300px;
+  }
+}
+</style>