From a3de2600c11922ce0fa454b452df4b8939828b55 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Fri, 22 Mar 2024 16:47:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/api/manualWarning/index.js       |  27 ++
 .../components/channelAnalytics/index.vue     |   4 -
 .../eventTypeAnalysis/assets/charts.js        |  28 +-
 .../pages/control/manual/events/index.vue     |   1 -
 .../components/Eventfiltering/index.vue       | 243 ++++++++++++++++++
 .../Eventfiltering/trafficIncidentsCharts.js  |  95 +++++++
 .../trafficIncidentsChartsPie.js              | 230 +++++++++++++++++
 .../components/Sitefiltering/index.vue        |  46 ++++
 .../components/Timefiltering/index.vue        |  46 ++++
 .../pages/control/manual/statistic/index.vue  |  69 +++--
 10 files changed, 751 insertions(+), 38 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue

diff --git a/ruoyi-ui/src/api/manualWarning/index.js b/ruoyi-ui/src/api/manualWarning/index.js
index 89af92ca..59e8dc4c 100644
--- a/ruoyi-ui/src/api/manualWarning/index.js
+++ b/ruoyi-ui/src/api/manualWarning/index.js
@@ -8,3 +8,30 @@ export function perceivedEventsList(data) {
     data,
   });
 }
+
+// 非机预警类型查询
+export function nonAutomaticWarningType(data) {
+  return request({
+    url: "/perceivedEvents/warning/nonAutomaticWarningType",
+    method: "post",
+    data,
+  });
+}
+
+// 非机预警收费站统计
+export function nonAutomaticWarningFacility(data) {
+  return request({
+    url: "/perceivedEvents/warning/nonAutomaticWarningFacility",
+    method: "post",
+    data,
+  });
+}
+
+// 非机预警时间统计
+export function nonAutomaticWarningTimeType(data) {
+  return request({
+    url: "/perceivedEvents/warning/nonAutomaticWarningTimeType",
+    method: "post",
+    data,
+  });
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue
index d1f91e4e..c5cbc548 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue
@@ -39,14 +39,10 @@ export default {
         }
         console.log("total", total);
         for (let i = 0; i < data.length; i++) {
-          //   if (i % 2 === 0) {
-          //     data.splice(i + 1, 0, newObj)
-          //   }
           if (data[i].name != "") {
             nameData.push(data[i].name);
           }
         }
-        console.log(6666, data, nameData);
         chartsStatistics.legend.formatter = function (name) {
           let tarValue = 0;
           for (let i = 0; i < response.data.length; i++) {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
index 71eb3844..84bca3e3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
@@ -12,20 +12,20 @@ let colors = [
   "#219F73",
   "#7CEDD5",
 ];
-let colorend = [
-  "#4278F8",
-  "#5372C4",
-  "#0046FF",
-  "#FB9434",
-  "#854101",
-  "#05E599",
-  "#219F73",
-  "#7CEDD5",
-  "#854101",
-  "#05E599",
-  "#219F73",
-  "#7CEDD5",
-];
+// let colorend = [
+//   "#4278F8",
+//   "#5372C4",
+//   "#0046FF",
+//   "#FB9434",
+//   "#854101",
+//   "#05E599",
+//   "#219F73",
+//   "#7CEDD5",
+//   "#854101",
+//   "#05E599",
+//   "#219F73",
+//   "#7CEDD5",
+// ];
 
 let legendData = [];
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue
index 6c7c7e3f..f5896c15 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue
@@ -102,7 +102,6 @@ export default {
     onRefresh() {},
     initData() {
       perceivedEventsList(this.searchData).then((res) => {
-        console.log("res", res);
         if (res.code != 200) return Message.error(res?.msg);
         this.total = res.total;
         res.rows.forEach((it) => {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue
new file mode 100644
index 00000000..69eeab38
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="Eventfiltering">
+    <InputSearch
+      class="search-box"
+      :formList="searchFormList"
+      @handleSearch="handleSearch"
+    />
+    <div class="Eventfiltering-content">
+      <div class="Eventfiltering-left" id="trafficIncidents"></div>
+      <div class="Eventfiltering-right" id="trafficIncidentsPie"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import InputSearch from "@screen/components/InputSearch/index.vue";
+import trafficIncidentsCharts from "./trafficIncidentsCharts.js";
+import trafficIncidentsChartsPie from "./trafficIncidentsChartsPie.js";
+import { nonAutomaticWarningType } from "@/api/manualWarning/index.js";
+import * as echarts from "echarts";
+import moment from "moment";
+const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
+  ctx.beginPath();
+  ctx.fillStyle = gr;
+  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
+  ctx.lineTo(width - radius + x, y);
+  ctx.arc(
+    width - radius + x,
+    radius + y,
+    radius,
+    (Math.PI * 3) / 2,
+    Math.PI * 2
+  );
+  ctx.lineTo(width + x, height + y - radius);
+  ctx.arc(
+    width - radius + x,
+    height - radius + y,
+    radius,
+    0,
+    (Math.PI * 1) / 2
+  );
+  ctx.lineTo(radius + x, height + y);
+  ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
+  ctx.closePath();
+  //ctx.stroke();
+  ctx.fill();
+};
+
+export default {
+  name: "Eventfiltering",
+  components: {
+    InputSearch,
+  },
+  data() {
+    return {
+      formData: {
+        type: "day",
+        warningTime: "",
+      },
+      searchFormList: [
+        {
+          label: "事件类型:",
+          key: "type",
+          type: "select",
+          default: "day",
+          options: {
+            clearable: true,
+            options: [
+              {
+                key: "day",
+                label: "天",
+              },
+              {
+                key: "month",
+                label: "月",
+              },
+              {
+                key: "year",
+                label: "年",
+              },
+            ],
+          },
+        },
+        {
+          label: "日期:",
+          key: "warningTime",
+          required: true,
+          type: "datePicker",
+          options: {
+            valueFormat: "yyyy-MM-dd",
+          },
+          visible: (data) => {
+            if (data.type == "day") {
+              return true;
+            }
+          },
+        },
+        {
+          label: "日期:",
+          key: "warningTime",
+          required: true,
+          type: "datePicker",
+          options: {
+            type: "month",
+            valueFormat: "yyyy-MM-dd",
+          },
+          visible: (data) => {
+            if (data.type == "month") {
+              return true;
+            }
+          },
+        },
+        {
+          label: "日期:",
+          key: "warningTime",
+          required: true,
+          type: "datePicker",
+          options: {
+            type: "year",
+            valueFormat: "yyyy-MM-dd",
+          },
+          visible: (data) => {
+            if (data.type == "year") {
+              return true;
+            }
+          },
+        },
+      ],
+    };
+  },
+  async mounted() {
+    (this.formData.warningTime =
+      moment(new Date()).format("YYYY-MM-DD") + " 00:00:01"),
+      await this.getNonAutomaticWarningType(this.formData);
+    var trafficIncidents = echarts.init(
+      document.getElementById("trafficIncidents")
+    );
+    trafficIncidents.setOption(trafficIncidentsCharts);
+    var trafficIncidentsPie = echarts.init(
+      document.getElementById("trafficIncidentsPie")
+    );
+    trafficIncidentsPie.setOption(trafficIncidentsChartsPie);
+  },
+  methods: {
+    getNonAutomaticWarningType(data) {
+      return nonAutomaticWarningType(data).then((res) => {
+        let newData = res.data;
+        let seriesData = [];
+        let xData = [];
+        let pieData = [];
+        let total = null;
+        console.log("++++++++++++", newData);
+        newData.forEach((item) => {
+          seriesData.push(item.number);
+          xData.push(item.subclass);
+          pieData.push({
+            value: item.number,
+            name: item.subclass,
+          });
+          total += item.number;
+        });
+        trafficIncidentsCharts.series[0].data = seriesData;
+        trafficIncidentsCharts.xAxis.data = xData;
+
+        trafficIncidentsChartsPie.legend.formatter = function (name) {
+          let tarValue = 0;
+          for (let i = 0; i < newData.length; i++) {
+            if (newData[i].subclass === name) {
+              tarValue = newData[i].number;
+            }
+          }
+          var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+          return `{text|${name}} {number|${tarValue} 起  } {number|${percert}%}`;
+        };
+        trafficIncidentsChartsPie.legend.data = xData;
+        trafficIncidentsChartsPie.title[0].text = total;
+        trafficIncidentsChartsPie.series[2].data = seriesData;
+
+        // const domMap = document.getElementById("trafficIncidentsPie");
+        // let parentDiv = domMap.firstChild;
+        // console.log("parentDiv", parentDiv);
+        // // 创建canvas;
+        // let canvas = document.createElement("canvas");
+        // canvas.width = parentDiv.offsetWidth;
+        // canvas.height = parentDiv.offsetHeight;
+        // parentDiv.appendChild(canvas);
+        // const context = canvas.getContext("2d");
+
+        // // 填充渐变颜色
+        // let gr = context.createLinearGradient(240, 0, 450, 0);
+        // gr.addColorStop(1, "rgba(92,197,255,0)");
+        // gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        // context.lineWidth = 1; // 设置线段宽度
+        // drawRoundRect(context, 100, 8, 280, 50, 12, gr);
+        // drawRoundRect(context, 202, 32, 280, 20, 10, gr);
+        // drawRoundRect(context, 202, 56, 280, 20, 10, gr);
+        // drawRoundRect(context, 202, 80, 280, 20, 10, gr);
+        // drawRoundRect(context, 202, 104, 280, 20, 10, gr);
+        // drawRoundRect(context, 202, 128, 280, 20, 10, gr);
+        // drawRoundRect(context, 202, 152, 280, 20, 10, gr);
+
+        // this.myChart = myChart;
+      });
+    },
+    handleSearch(value) {
+      value.warningTime = value.warningTime + " 00:00:01";
+      this.formData = { ...value };
+      this.getNonAutomaticWarningType(this.formData);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.Eventfiltering {
+  width: 99%;
+  height: 94%;
+  margin: auto;
+
+  .search-box {
+    width: 402px !important;
+    float: right;
+  }
+
+  .Eventfiltering-content {
+    width: 100%;
+    height: 96%;
+    display: flex;
+    justify-content: space-between;
+
+    .Eventfiltering-left {
+      width: 65%;
+      height: 100%;
+    }
+
+    .Eventfiltering-right {
+      width: 32%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js
new file mode 100644
index 00000000..215c85d8
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js
@@ -0,0 +1,95 @@
+var options = {
+  title: {
+    //  text: '单位/%',
+    top: "0%",
+    left: "0%",
+    textStyle: {
+      fontSize: "10px",
+      fontWeight: 300,
+      color: "#B5C5D4",
+      opacity: 0.8,
+    },
+  },
+  tooltip: {
+    valueFormatter: function (value) {
+      return value + " 起";
+    },
+  },
+  grid: {
+    left: "30px",
+    right: "0%",
+    top: "50px",
+    bottom: "5%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    axisLine: {
+      lineStyle: {
+        color: "rgba(49, 217, 255, 0.8)",
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: "18px",
+    },
+  },
+  yAxis: [
+    {
+      // type: 'value',
+      // min: function (value) {
+      //   return value.min*0.9;
+      // },
+      name: "交通事件（起）",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 18,
+        align: "center",
+      },
+      type: "value",
+      axisLine: {
+        show: false,
+        lineStyle: {
+          width: 1,
+          color: "#545454",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "rgba(49, 217, 255, 0.5)",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#fff",
+        fontSize: "18px",
+        formatter: (value) => {
+          return value;
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      //  name: '审限内结案率',
+      data: [5, 10, 20, 30],
+      type: "pictorialBar",
+      symbol: "roundRect",
+      symbolRepeat: true,
+      symbolSize: [13, 4],
+      // symbolOffset: symbolOffset,
+      // barWidth:'40%',
+      itemStyle: {
+        color: "#20E7FF",
+      },
+    },
+  ],
+};
+
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js
new file mode 100644
index 00000000..6e352490
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js
@@ -0,0 +1,230 @@
+let colors = [
+  "#4278F8",
+  "#5372C4",
+  "#0046FF",
+  "#FB9434",
+  "#854101",
+  "#05E599",
+  "#219F73",
+  "#7CEDD5",
+  "#854101",
+  "#05E599",
+  "#219F73",
+  "#7CEDD5",
+];
+var legendData = [];
+
+var options = {
+  title: [
+    {
+      text: "999",
+      top: "25%",
+      textAlign: "center",
+      left: "48%",
+      textStyle: {
+        color: "#ffffff",
+        fontSize: 30,
+        fontFamily: "SourceHanSansCN",
+      },
+    },
+    {
+      text: "总数",
+      top: "38%",
+      textAlign: "center",
+      left: "48%",
+      textStyle: {
+        color: "rgba(242, 252, 253, 0.84)",
+        fontSize: 16,
+        fontFamily: "SourceHanSansCN",
+      },
+    },
+  ],
+  grid: {
+    top: "38%",
+    left: "6%",
+    right: "6%",
+    bottom: "3%",
+    containLabel: true,
+  },
+  tooltip: {
+    show: true,
+    valueFormatter: function (value) {
+      return value + " 起";
+    },
+  },
+  legend: {
+    width: "300px",
+    height: "120px",
+    orient: "vertical",
+    icon: "circle",
+    top: "60%",
+    itemWidth: 10,
+    itemHeight: 10,
+    textStyle: {
+      color: "#ffffff",
+      fontSize: 14,
+      lineHeight: 22,
+      rich: {
+        text: {
+          width: 100,
+          marginLeft: 32,
+          fontSize: 14,
+        },
+        number: {
+          fontSize: 14,
+          color: "#37E7FF",
+          marginLeft: 32,
+          fontWeight: "bold",
+        },
+        unit: {
+          fontSize: 14,
+        },
+      },
+    },
+    data: legendData,
+    pageIconColor: "#fff",
+    pageIconSize: 10,
+    pageTextStyle: {
+      color: "#fff",
+    },
+    type: "scroll",
+    pageButtonPosition: "end",
+  },
+  series: [
+    /** 饼图上刻度 */
+    {
+      type: "gauge",
+      center: ["50%", "35%"],
+      radius: "46%", // 错位调整此处
+      startAngle: 0,
+      endAngle: 360,
+      splitNumber: 52,
+      axisLine: { show: false },
+      splitLine: {
+        // length: 39,
+        length: "2",
+        lineStyle: {
+          width: 5,
+          color: "#5CC5FF",
+        },
+      },
+      axisTick: { show: false },
+      axisLabel: { show: false },
+    },
+    {
+      name: "总数",
+      tooltip: false,
+      type: "gauge",
+      radius: "30%",
+      center: ["50%", "35%"],
+      startAngle: 0,
+      endAngle: 360,
+      axisLine: {
+        lineStyle: {
+          color: [[1, "#0AFFE950"]],
+          width: 1,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        show: false,
+      },
+      pointer: {
+        show: false,
+      },
+      progress: {
+        show: true,
+        width: 80,
+        itemStyle: {
+          color: {
+            type: "radial",
+            x: 0.5,
+            y: 0.5,
+            r: 0.5,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgb(0, 224, 205, 0)",
+              },
+              {
+                offset: 0.7,
+                color: "rgba(0, 224, 205, 0)",
+              },
+              {
+                offset: 1,
+                color: "rgba(10, 255, 233, 0.5)",
+              },
+            ],
+          },
+        },
+      },
+      data: [
+        {
+          value: 100,
+        },
+      ],
+      tooltip: {
+        backgroundColor: "rgba(50,50,50,0)",
+        formatter: " ",
+        borderWidth: 0,
+        textStyle: {
+          textShadowColor: "rgba(50,50,50,0)",
+        },
+      },
+    },
+    {
+      type: "pie",
+      radius: ["40%", "50%"],
+      center: ["50%", "35%"],
+      z: 10,
+      label: {
+        show: false,
+      },
+      data: [],
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+          borderRadius: "5",
+          borderWidth: 2,
+          borderType: "solid",
+          borderCap: "round",
+          borderJoin: "round",
+          borderColor: "#064258",
+          borderMiterLimit: "20",
+          color: function (params) {
+            return {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: colors[params.dataIndex], // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: colors[params.dataIndex], // 100% 处的颜色
+                },
+              ],
+              globalCoord: false, // 缺省为 false
+            };
+          },
+        },
+      },
+    },
+  ],
+};
+
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue
new file mode 100644
index 00000000..0a48f804
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="Eventfiltering">
+    <div class="Eventfiltering-left" id="trafficIncidentsCharts"></div>
+    <div class="Eventfiltering-right"></div>
+  </div>
+</template>
+
+<script>
+//   import trafficIncidentsCharts from "./trafficIncidentsCharts.js";
+//   import * as echarts from "echarts";
+
+//   export default {
+//     name: "Eventfiltering",
+//     components: { trafficIncidentsCharts },
+//     data() {
+//       return {};
+//     },
+//     mounted() {
+//       var trafficIncidentsCharts = echarts.init(
+//         document.getElementById("trafficIncidentsCharts")
+//       );
+//       trafficIncidentsCharts.setOption(trafficIncidentsCharts);
+//     },
+//     methods: {},
+//   };
+</script>
+
+<style lang="scss" scoped>
+.Eventfiltering {
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+}
+.Eventfiltering-left {
+  width: 60%;
+  height: 100%;
+  background-color: #fff;
+}
+.Eventfiltering-right {
+  width: 40%;
+  height: 100%;
+  background-color: #fff;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue
new file mode 100644
index 00000000..0a48f804
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="Eventfiltering">
+    <div class="Eventfiltering-left" id="trafficIncidentsCharts"></div>
+    <div class="Eventfiltering-right"></div>
+  </div>
+</template>
+
+<script>
+//   import trafficIncidentsCharts from "./trafficIncidentsCharts.js";
+//   import * as echarts from "echarts";
+
+//   export default {
+//     name: "Eventfiltering",
+//     components: { trafficIncidentsCharts },
+//     data() {
+//       return {};
+//     },
+//     mounted() {
+//       var trafficIncidentsCharts = echarts.init(
+//         document.getElementById("trafficIncidentsCharts")
+//       );
+//       trafficIncidentsCharts.setOption(trafficIncidentsCharts);
+//     },
+//     methods: {},
+//   };
+</script>
+
+<style lang="scss" scoped>
+.Eventfiltering {
+  width: 99%;
+  height: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+}
+.Eventfiltering-left {
+  width: 60%;
+  height: 100%;
+  background-color: #fff;
+}
+.Eventfiltering-right {
+  width: 40%;
+  height: 100%;
+  background-color: #fff;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue
index a8787fbb..6ac52b5e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue
@@ -1,42 +1,73 @@
 <template>
-  <div class='comp_box'>
-    <img src="./img.png" />
+  <div class="comp_box">
+    <el-tabs class="footTabs" v-model="activeName">
+      <el-tab-pane label="按事件分类" name="first">
+        <Eventfiltering />
+      </el-tab-pane>
+      <el-tab-pane label="按卡口" name="second">
+        <Sitefiltering />
+      </el-tab-pane>
+      <el-tab-pane label="按日期" name="third">
+        <Timefiltering />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
+import Eventfiltering from "./components/Eventfiltering/index.vue";
+import Sitefiltering from "./components/Sitefiltering/index.vue";
+import Timefiltering from "./components/Timefiltering/index.vue";
 
 export default {
-  name: 'InDevelopment',
+  name: "StatisticalAnalysis",
   components: {
+    Eventfiltering,
+    Sitefiltering,
+    Timefiltering,
   },
-  props:{
-    text:{
-      type:String,
-      default:"暂无数据"
-    }
+  data() {
+    return {
+      activeName: "first",
+    };
   },
-  mounted() {
-  }
-}
+  props: {
+    text: {
+      type: String,
+      default: "暂无数据",
+    },
+  },
+  methods: {
+    // changeTabs(tab, event) {
+    //   console.log(tab, event);
+    //   // this.activeName = value;
+    // },
+  },
+  mounted() {},
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .comp_box {
   // padding-top:160px;
   width: 100%;
   height: 100%;
-  color: #8A9EAA;
+  color: #8a9eaa;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-  img{
-    position: absolute;
-    left: 0;
-    top:0;
-    bottom: 0;
-    right: 0;
+  padding: 15px 25px;
+  .footTabs {
+    display: inline;
+    width: 99%;
+    height: 100%;
+  }
+  ::v-deep .el-tabs__content {
+    height: 100%;
+  }
+  ::v-deep .el-tab-pane {
+    height: 100%;
   }
 }
 </style>