From 2f7623585f5ebbb11a40f7ded2ffe2ef4acf2b8e Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Mon, 26 Feb 2024 11:27:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=9A=E9=9B=86=E5=91=8A=E8=AD=A6=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E3=80=81=E8=81=9A=E9=9B=86=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/request/aggregation_management.js         |  10 +
 src/request/map_settings.js                   |   3 +-
 .../gathering_alarm_records/index.vue         |  63 +++
 .../gathering_overview/index.vue              | 452 ++++++++++++++++++
 .../map_settings/path_planning/index.vue      |   5 +-
 5 files changed, 530 insertions(+), 3 deletions(-)
 create mode 100644 src/request/aggregation_management.js
 create mode 100644 src/views/aggregation_management/gathering_alarm_records/index.vue
 create mode 100644 src/views/aggregation_management/gathering_overview/index.vue

diff --git a/src/request/aggregation_management.js b/src/request/aggregation_management.js
new file mode 100644
index 0000000..c6d5611
--- /dev/null
+++ b/src/request/aggregation_management.js
@@ -0,0 +1,10 @@
+import { post } from "@/request/axios.js";
+
+export const getGatheringAlarmRecordsList = (params) =>
+  post("/positAlarm/getAlarmRecordList", params); // 聚集告警记录列表
+export const getAggregationAlarmTrend = (params) =>
+  post("/positAlarm/aggregateAlarmTrends", params); // 聚集报警趋势
+export const getAggregatedDataStatistics = (params) =>
+  post("/positAlarm/aggregateDataStatistics", params); // 聚集区域统计
+export const getAggregationAreaStatistics = (params) =>
+  post("/positAlarm/aggregateDataStatisticsByGroup", params); // 聚集数据统计
diff --git a/src/request/map_settings.js b/src/request/map_settings.js
index 7349c7a..eb33b12 100644
--- a/src/request/map_settings.js
+++ b/src/request/map_settings.js
@@ -25,8 +25,7 @@ export const setAssignmentTicketAreaSettingsDelete = (params) =>
   post("/positAlarm/otherRegion/regionDelete", params); // 作业票区域设置删除
 export const setPosition = (params) =>
   post("/positAlarm/otherRegion/redrawTheArea", params); // 区域选点
-// TODO 接口不对
 export const getPathPlanningList = (params) =>
-  post("/positAlarm/coordinateLine/addCoordinateLine", params); // 路径规划列表
+  post("/positAlarm/coordinateLine/tree", params); // 路径规划列表
 export const setPathPlanningDelete = (params) =>
   post("/positAlarm/coordinateLine/batchDelete", params); // 路径规划删除
diff --git a/src/views/aggregation_management/gathering_alarm_records/index.vue b/src/views/aggregation_management/gathering_alarm_records/index.vue
new file mode 100644
index 0000000..e8a1061
--- /dev/null
+++ b/src/views/aggregation_management/gathering_alarm_records/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="60px"
+        @submit.prevent="fnResetPagination"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="关键字" prop="str">
+              <el-input v-model="searchForm.str" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="30px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnResetPagination">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <layout-table
+        v-model:pagination="pagination"
+        :data="list"
+        @get-data="fnGetData"
+      >
+        <el-table-column label="序号" width="70">
+          <template #default="{ $index }">
+            {{ serialNumber(pagination, $index) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="聚集地点" prop="regName" />
+        <el-table-column label="开始时间" prop="regName" />
+        <el-table-column label="结束时间" prop="regName" />
+        <el-table-column label="状态" prop="regName" />
+        <el-table-column label="操作" width="200">
+          <template #default="{ row }">
+            {{ row }}
+          </template>
+        </el-table-column>
+      </layout-table>
+    </layout-card>
+  </div>
+</template>
+
+<script setup>
+import useListData from "@/assets/js/useListData.js";
+import { serialNumber } from "@/assets/js/utils.js";
+import { getGatheringAlarmRecordsList } from "@/request/aggregation_management.js";
+
+const { list, searchForm, pagination, fnGetData, fnResetPagination } =
+  useListData(getGatheringAlarmRecordsList, {
+    otherParams: { status: "" },
+    key: "rows",
+  });
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/aggregation_management/gathering_overview/index.vue b/src/views/aggregation_management/gathering_overview/index.vue
new file mode 100644
index 0000000..693862c
--- /dev/null
+++ b/src/views/aggregation_management/gathering_overview/index.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="p-20">
+    <el-row>
+      <el-col :span="24">
+        <el-card body-class="p-0">
+          <div class="tabs">
+            <div
+              v-for="(item, index) in tabsList"
+              :key="item.label"
+              :class="['tab', { active: tabIndex === index + 1 }]"
+              @click="fnTabsChange(item.type)"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+          <el-form
+            :model="searchForm"
+            style="flex: 1"
+            class="ml-20"
+            @submit.prevent="fnGetData"
+          >
+            <el-row>
+              <el-col :span="4">
+                <el-form-item v-if="tabIndex === 1" prop="time">
+                  <el-date-picker
+                    v-model="searchForm.time"
+                    type="date"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                  />
+                </el-form-item>
+                <el-form-item v-if="tabIndex === 2" prop="time">
+                  <el-date-picker
+                    v-model="searchForm.time"
+                    type="week"
+                    format="YYYY 第ww周"
+                    value-format="YYYY-MM-DD"
+                  />
+                </el-form-item>
+                <el-form-item v-if="tabIndex === 3" prop="time">
+                  <el-date-picker
+                    v-model="searchForm.time"
+                    type="month"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM-DD"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label-width="10px">
+                  <el-button type="primary" native-type="submit"
+                    >搜索
+                  </el-button>
+                  <el-button native-type="reset" @click="fnGetData">
+                    重置
+                  </el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-card>
+      </el-col>
+      <el-col :span="24" class="mt-20">
+        <el-card>
+          <div class="main_title">聚集报警趋势</div>
+          <div id="main1"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="24" class="mt-20">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-card>
+              <div class="main_title">聚集数据统计</div>
+              <el-scrollbar style="height: 220px">
+                <div class="aggregated_data_statistics">
+                  <div
+                    v-for="(item, index) in aggregatedDataStatistics"
+                    :key="index"
+                    class="item"
+                  >
+                    <div
+                      class="title"
+                      :style="{ 'background-color': item.color }"
+                    >
+                      {{ item.title }}
+                    </div>
+                    <div class="content">
+                      <div class="value">报警数量：{{ item.num }}</div>
+                      <el-progress
+                        :percentage="
+                          item.value !== 0 ? item.num / item.value : 0
+                        "
+                        :color="item.color"
+                      />
+                      <div class="times">
+                        <div
+                          v-for="(item1, index1) in item.timeArr"
+                          :key="index1"
+                          class="time"
+                        >
+                          <div class="time_title">{{ item1.timeTitle }}：</div>
+                          <div class="time_value">{{ item1.timeValue }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-scrollbar>
+            </el-card>
+          </el-col>
+          <el-col :span="12">
+            <el-card>
+              <div class="main_title">聚集区域统计</div>
+              <el-scrollbar style="height: 220px">
+                <div class="aggregated-area-statistics">
+                  <div
+                    v-for="(item, index) in aggregatedAreaStatistics"
+                    :key="index"
+                    class="item"
+                  >
+                    <div class="value">
+                      <div class="title">{{ item.title }}</div>
+                      <div class="num">报警数量：{{ item.num }}</div>
+                    </div>
+                    <div class="alarms">
+                      <div
+                        v-for="(item1, index1) in item.alarmArr"
+                        :key="index1"
+                        class="alarm"
+                      >
+                        <div
+                          class="bg"
+                          :style="{ 'background-color': item1.color }"
+                        />
+                        <div class="alarm_title">{{ item1.alarmTitle }}</div>
+                        <div class="alarm_value">{{ item1.alarmValue }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-scrollbar>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import dayjs from "dayjs";
+import * as echarts from "echarts";
+import {
+  getAggregatedDataStatistics,
+  getAggregationAlarmTrend,
+  getAggregationAreaStatistics,
+} from "@/request/aggregation_management.js";
+
+let myChart1;
+const tabsList = [
+  { label: "每日统计", type: 1 },
+  { label: "每周统计", type: 2 },
+  { label: "每月统计", type: 3 },
+];
+const tabIndex = ref(1);
+const searchForm = ref({ time: dayjs().format("YYYY-MM-DD") });
+const aggregatedDataStatistics = ref([]);
+const aggregatedAreaStatistics = ref([]);
+const fnTabsChange = (event) => {
+  if (event === 1) searchForm.value.time = dayjs().format("YYYY-MM-DD");
+  if (event === 2) searchForm.value.time = dayjs().format("YYYY-MM-DD");
+  if (event === 3)
+    searchForm.value.time = dayjs().startOf("month").format("YYYY-MM-DD");
+  tabIndex.value = event;
+  fnGetData();
+};
+const fnGetData = async () => {
+  const aggregationAlarmTrendData = await getAggregationAlarmTrend({
+    type: tabIndex.value,
+    time: searchForm.value.time,
+  });
+  myChart1 && myChart1.dispose();
+  fnInitEcharts(aggregationAlarmTrendData.data);
+  const aggregatedDataStatisticsData = await getAggregatedDataStatistics({
+    type: tabIndex.value,
+    time: searchForm.value.time,
+  });
+  const aggregatedAreaStatisticsData = await getAggregationAreaStatistics({
+    type: tabIndex.value,
+    time: searchForm.value.time,
+  });
+  aggregatedDataStatistics.value = aggregatedDataStatisticsData.data;
+  aggregatedAreaStatistics.value = aggregatedAreaStatisticsData.data;
+};
+const fnInitEcharts = (data) => {
+  myChart1 = echarts.init(document.querySelector("#main1"));
+  const option = {
+    legend: {
+      data: ["一级聚集", "二级聚集", "三级聚集", "聚集总计"],
+      top: "0%",
+      textStyle: {
+        color: "#fff",
+      },
+    },
+    grid: {
+      left: "2%",
+      right: "2%",
+      bottom: "5%",
+      top: "13%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: data.xdata,
+      axisLabel: {
+        color: "#fff",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+    },
+    series: [
+      {
+        name: "一级聚集",
+        type: "line",
+        data: data.one,
+        itemStyle: {
+          normal: {
+            color: "red",
+            lineStyle: {
+              color: "red",
+            },
+          },
+        },
+      },
+      {
+        name: "二级聚集",
+        type: "line",
+        data: data.two,
+        itemStyle: {
+          normal: {
+            color: "orange",
+            lineStyle: {
+              color: "orange",
+            },
+          },
+        },
+      },
+      {
+        name: "三级聚集",
+        type: "line",
+        data: data.three,
+        itemStyle: {
+          normal: {
+            color: "#ffeb3b",
+            lineStyle: {
+              color: "#ffeb3b",
+            },
+          },
+        },
+      },
+      {
+        name: "聚集总计",
+        type: "line",
+        data: data.zong,
+        itemStyle: {
+          normal: {
+            color: "#0385f4",
+            lineStyle: {
+              color: "#0385f4",
+            },
+          },
+        },
+      },
+    ],
+  };
+  myChart1.setOption(option);
+};
+onMounted(() => {
+  fnGetData();
+  window.onresize = function () {
+    myChart1 && myChart1.resize();
+  };
+});
+onBeforeUnmount(() => {
+  myChart1 = null;
+});
+</script>
+
+<style scoped lang="scss">
+:deep {
+  .el-card__body {
+    padding: 18px !important;
+  }
+
+  .p-0 {
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+
+    .el-form-item {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.tabs {
+  display: flex;
+
+  .tab {
+    padding: 20px;
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      background-color: var(--el-fill-color-light);
+      color: var(--el-color-check);
+    }
+  }
+}
+
+.main_title {
+  padding: 0 18px 18px 18px;
+  border-bottom: 1px solid var(--el-card-border-color);
+  margin: 0 -18px;
+}
+
+#main1 {
+  width: 100%;
+  height: 300px;
+}
+
+.el-card {
+  margin: 0;
+}
+
+.aggregated_data_statistics {
+  font-size: 12px;
+
+  .item {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+
+    .title {
+      width: max-content;
+      padding: 5px;
+      border-radius: 4px;
+    }
+
+    .content {
+      margin-left: 10px;
+      flex: 1;
+
+      .value {
+        text-align: right;
+        padding-right: 50px;
+        margin-bottom: 5px;
+      }
+
+      .times {
+        margin-top: 5px;
+        display: flex;
+
+        .time {
+          display: flex;
+          margin-right: 10px;
+          background-color: #b0b0b0;
+          border-radius: 4px;
+          padding: 5px;
+
+          .time_value {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+}
+
+.aggregated-area-statistics {
+  font-size: 12px;
+
+  .item {
+    margin-top: 10px;
+    background-color: var(--el-fill-color-light);
+    padding: 10px;
+    border-radius: 4px;
+
+    .value {
+      display: flex;
+      justify-content: space-between;
+
+      .title {
+        margin-right: 10px;
+        font-weight: bold;
+      }
+
+      .num {
+        font-weight: bold;
+      }
+    }
+
+    .alarms {
+      display: flex;
+
+      .alarm {
+        margin-top: 10px;
+        margin-right: 10px;
+        display: flex;
+        align-items: center;
+        background-color: #b0b0b0;
+        border-radius: 4px;
+        padding: 5px;
+
+        .bg {
+          width: 10px;
+          height: 10px;
+          margin-right: 5px;
+        }
+
+        .alarm_title {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/map_settings/path_planning/index.vue b/src/views/map_settings/path_planning/index.vue
index bf4c839..fa4bfe4 100644
--- a/src/views/map_settings/path_planning/index.vue
+++ b/src/views/map_settings/path_planning/index.vue
@@ -86,7 +86,10 @@ import { reactive } from "vue";
 import Add from "./components/add.vue";
 
 const { list, searchForm, tableRef, pagination, fnGetData, fnResetPagination } =
-  useListData(getPathPlanningList);
+  useListData(getPathPlanningList, {
+    defaultSearchForm: { str: "" },
+    key: "rows",
+  });
 const data = reactive({
   addDialogVisible: false,
 });