烟花爆竹事故应急

src/router/routes.ts

@@ -160,6 +160,26 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
+  {
+    path: "/fireworksEmergency",
+    name: "FireworksEmergency",
+    component: () =>
+      import("@/views/disasterRiskMonitor/fireworksEmergency.vue"),
+    meta: {
+      title: "烟花爆竹事故应急",
+      noCache: true
+    }
+  },
+  {
+    path: "/emergencyTrafficAccidents",
+    name: "EmergencyTrafficAccidents",
+    component: () =>
+      import("@/views/disasterRiskMonitor/emergencyTrafficAccidents.vue"),
+    meta: {
+      title: "重大交通事故应急",
+      noCache: true
+    }
+  },
   {
     path: "/forestFirePrevention",
     name: "ForestFirePrevention",
@@ -278,6 +298,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
+  {
+    path: "/event/add",
+    name: "Add",
+    component: () => import("@/views/event/add.vue"),
+    meta: {
+      title: "事件接报",
+      noCache: true
+    }
+  },
   {
     path: "/event/add",
     name: "EventAdd",

src/views/disasterRiskMonitor/chartOptions.ts

@@ -1,524 +1,798 @@
-import {graphic} from "echarts";
+import { graphic } from "echarts";
 
 export const chartOption1 = {
-    legend: {},
-    grid: {
-        top: '40px',
-        left: '30px',
-        right: '20px',
-        bottom: '30px',
-        // containLabel: true
-    },
-    tooltip: {
+  legend: {},
+  grid: {
+    top: "40px",
+    left: "30px",
+    right: "20px",
+    bottom: "30px"
+    // containLabel: true
+  },
+  tooltip: {
+    show: true,
+    trigger: "axis"
+  },
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        textStyle: {
+          color: "#414F64",
+          fontSize: 10
+        }
+      },
+      axisLine: {
+        show: true
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      data: []
+    }
+  ],
+
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: true
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#414F64",
+          fontSize: 10
+        }
+      },
+      axisTick: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      name: "自然灾害",
+      type: "line",
+      smooth: true, //是否平滑
+      showAllSymbol: true,
+      symbol: "circle",
+      symbolSize: 6,
+      lineStyle: {
+        color: "#00b3f4"
+      },
+      label: {
         show: true,
-        trigger: 'axis'
+        position: "top",
+        textStyle: {
+          color: "#00b3f4",
+          fontSize: 10
+        }
+      },
+      itemStyle: {
+        color: "#00b3f4",
+        borderColor: "#fff",
+        borderWidth: 1
+      },
+      areaStyle: {
+        normal: {
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(0,179,244,0.3)"
+              },
+              {
+                offset: 1,
+                color: "rgba(0,179,244,0)"
+              }
+            ],
+            false
+          ),
+          shadowColor: "rgba(0,179,244, 0.9)",
+          shadowBlur: 20
+        }
+      },
+      data: []
     },
-    xAxis: [{
-        type: 'category',
-        axisLabel: {
-            textStyle: {
-                color: '#414F64',
-                fontSize: 10
-            }
-        },
-        axisLine: {
-            show: true
-        },
-        splitLine: {
-            show: false
-        },
-        axisTick: {
-            show: false,
-        },
-        data: []
-    }],
-
-    yAxis: [{
-        type: 'value',
-        splitLine: {
-            show: true,
-        },
-        axisLine: {
-            show: false,
-        },
-        axisLabel: {
-            textStyle: {
-                color: '#414F64',
-                fontSize: 10
-            }
-        },
-        axisTick: {
-            show: false,
+    {
+      name: "事故灾害",
+      type: "line",
+      smooth: true, //是否平滑
+      showAllSymbol: true,
+      symbol: "circle",
+      symbolSize: 6,
+      lineStyle: {
+        color: "#00ca95"
+      },
+      label: {
+        show: true,
+        position: "top",
+        textStyle: {
+          color: "#00ca95",
+          fontSize: 10
         }
-    }],
-    series: [
-        {
-            name: '自然灾害',
-            type: 'line',
-            smooth: true, //是否平滑
-            showAllSymbol: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: {
-                color: "#00b3f4"
-            },
-            label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                    color: '#00b3f4',
-                    fontSize: 10
-                }
-            },
-            itemStyle: {
-                color: "#00b3f4",
-                borderColor: "#fff",
-                borderWidth: 1,
-            },
-            areaStyle: {
-                normal: {
-                    color: new graphic.LinearGradient(0, 0, 0, 1, [{
-                        offset: 0,
-                        color: 'rgba(0,179,244,0.3)'
-                    },
-                        {
-                            offset: 1,
-                            color: 'rgba(0,179,244,0)'
-                        }
-                    ], false),
-                    shadowColor: 'rgba(0,179,244, 0.9)',
-                    shadowBlur: 20
-                }
-            },
-            data: []
-        },
-        {
-            name: '事故灾害',
-            type: 'line',
-            smooth: true, //是否平滑
-            showAllSymbol: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: {
-                color: "#00ca95"
-            },
-            label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                    color: '#00ca95',
-                    fontSize: 10
-                }
-            },
+      },
 
-            itemStyle: {
-                color: "#00ca95",
-                borderColor: "#fff",
-                borderWidth: 1
-            },
-            areaStyle: {
-                normal: {
-                    color: new graphic.LinearGradient(0, 0, 0, 1, [{
-                        offset: 0,
-                        color: 'rgba(0,202,149,0.3)'
-                    },
-                        {
-                            offset: 1,
-                            color: 'rgba(0,202,149,0)'
-                        }
-                    ], false),
-                    shadowColor: 'rgba(0,202,149, 0.9)',
-                    shadowBlur: 20
-                }
-            },
-            data: []
+      itemStyle: {
+        color: "#00ca95",
+        borderColor: "#fff",
+        borderWidth: 1
+      },
+      areaStyle: {
+        normal: {
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(0,202,149,0.3)"
+              },
+              {
+                offset: 1,
+                color: "rgba(0,202,149,0)"
+              }
+            ],
+            false
+          ),
+          shadowColor: "rgba(0,202,149, 0.9)",
+          shadowBlur: 20
         }
-    ]
-}
+      },
+      data: []
+    }
+  ]
+};
 
 export const chartOption2 = {
-    grid: {
-        top: "25%",
-        bottom: "10%"//也可设置left和right设置距离来控制图表的大小
+  grid: {
+    top: "25%",
+    bottom: "10%" //也可设置left和right设置距离来控制图表的大小
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+      label: {
+        show: true
+      }
     },
-    tooltip: {
-        trigger: "axis",
-        axisPointer: {
-            type: "shadow",
-            label: {
-                show: true
-            }
-        },
-        formatter: (params) => {
-            let result = '';
-            // 遍历每个轴上的数据点
-            params.forEach(function (item) {
-                if (item.seriesName === '温度') {
-                    result += '<div>' + item.marker + item.seriesName + item.value + '℃</div>';
-                } else {
-                    result += '<div>' + item.marker + item.seriesName + item.value + 'mm</div>';
-                }
-            });
-            return result;
+    formatter: params => {
+      let result = "";
+      // 遍历每个轴上的数据点
+      params.forEach(function (item) {
+        if (item.seriesName === "温度") {
+          result +=
+            "<div>" + item.marker + item.seriesName + item.value + "℃</div>";
+        } else {
+          result +=
+            "<div>" + item.marker + item.seriesName + item.value + "mm</div>";
         }
+      });
+      return result;
+    }
+  },
+  legend: {
+    data: ["温度", "降水"],
+    top: "15%",
+    textStyle: {
+      color: "#7F8B9F"
+    }
+  },
+  xAxis: {
+    data: [],
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#eaeef7"
+      }
+    },
+    axisTick: {
+      show: true
     },
-    legend: {
-        data: ["温度", "降水"],
-        top: "15%",
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#7F8B9F"
+      }
+    }
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "单位：℃",
+      nameTextStyle: {
+        color: "#7F8B9F"
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
+        }
+      },
+      axisLabel: {
+        show: true,
         textStyle: {
-            color: "#7F8B9F"
+          color: "#7F8B9F"
         }
+      }
     },
-    xAxis: {
-        data: [],
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        axisTick: {
-            show: true
-        },
-        axisLabel: {
-            show: true,
-            textStyle: {
-                color: "#7F8B9F"
-            }
-        },
-
-    },
-    yAxis: [{
-        type: "value",
-        name: "单位：℃",
-        nameTextStyle: {
-            color: "#7F8B9F"
-        },
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        axisTick: {
-            show: false
-        },
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        axisLabel: {
-            show: true,
-            textStyle: {
-                color: "#7F8B9F"
-            }
-        },
-
-    },
-        {
-            type: "value",
-            name: "单位：mm",
-            nameTextStyle: {
-                color: "#7F8B9F"
-            },
-            position: "right",
-            splitLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#eaeef7'
-                }
-            },
-            axisLabel: {
-                show: true,
-                textStyle: {
-                    color: "#7F8B9F"
-                }
-            }
+    {
+      type: "value",
+      name: "单位：mm",
+      nameTextStyle: {
+        color: "#7F8B9F"
+      },
+      position: "right",
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
         }
-    ],
-    series: [
-        {
-            name: "温度",
-            type: "line",
-            smooth: true, //平滑曲线显示
-            showSymbol: false,
-            itemStyle: {
-                color: new graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: "#9bbdf4"
-                },
-                    {
-                        offset: 1,
-                        color: "#2a72e9"
-                    }
-                ])
-            },
-            data: []
-        }, {
-            name: "降水",
-            type: "line",
-            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-            smooth: true, //平滑曲线显示
-            // showSymbol: false,
-            itemStyle: {
-                //折线拐点标志的样式
-                color: "#feaf00"
-            },
-            lineStyle: {
-                color: new graphic.LinearGradient(0, 0, 1, 0, [{
-                    offset: 0,
-                    color: "#f9df83"
-                },
-                    {
-                        offset: 1,
-                        color: "#f7983f"
-                    }
-                ])
-            },
-            // areaStyle:{
-            //     color: new graphic.LinearGradient(0, 0, 0, 1, [
-            //         {
-            //             offset: 0,
-            //             color: "rgba(155, 189, 244, 0.8)"
-            //         },
-            //
-            //         {
-            //             offset: 1,
-            //             color: "rgba(155, 189, 244, 0)"
-            //         }
-            //     ])
-            // },
-            data: []
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#7F8B9F"
         }
-    ]
+      }
+    }
+  ],
+  series: [
+    {
+      name: "温度",
+      type: "line",
+      smooth: true, //平滑曲线显示
+      showSymbol: false,
+      itemStyle: {
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#9bbdf4"
+          },
+          {
+            offset: 1,
+            color: "#2a72e9"
+          }
+        ])
+      },
+      data: []
+    },
+    {
+      name: "降水",
+      type: "line",
+      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+      smooth: true, //平滑曲线显示
+      // showSymbol: false,
+      itemStyle: {
+        //折线拐点标志的样式
+        color: "#feaf00"
+      },
+      lineStyle: {
+        color: new graphic.LinearGradient(0, 0, 1, 0, [
+          {
+            offset: 0,
+            color: "#f9df83"
+          },
+          {
+            offset: 1,
+            color: "#f7983f"
+          }
+        ])
+      },
+      // areaStyle:{
+      //     color: new graphic.LinearGradient(0, 0, 0, 1, [
+      //         {
+      //             offset: 0,
+      //             color: "rgba(155, 189, 244, 0.8)"
+      //         },
+      //
+      //         {
+      //             offset: 1,
+      //             color: "rgba(155, 189, 244, 0)"
+      //         }
+      //     ])
+      // },
+      data: []
+    }
+  ]
 };
 
 export const chartOption3 = {
-    grid: {
-        top: "30px",
-        bottom: "50px"//也可设置left和right设置距离来控制图表的大小
+  grid: {
+    top: "30px",
+    bottom: "50px" //也可设置left和right设置距离来控制图表的大小
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+      label: {
+        show: true
+      }
     },
-    tooltip: {
-        trigger: "axis",
-        axisPointer: {
-            type: "shadow",
-            label: {
-                show: true
-            }
-        },
-        formatter: (params) => {
-            let result = '';
-            // 遍历每个轴上的数据点
-            params.forEach(function (item) {
-                console.log(item)
-                result += '<div style="display: flex"><div style="color: #3177ec;font-size: 16px;font-weight: bold">' + item.value + '</div>个</div>';
-            });
-            return result;
-        }
+    formatter: params => {
+      let result = "";
+      // 遍历每个轴上的数据点
+      params.forEach(function (item) {
+        console.log(item);
+        result +=
+          '<div style="display: flex"><div style="color: #3177ec;font-size: 16px;font-weight: bold">' +
+          item.value +
+          "</div>个</div>";
+      });
+      return result;
+    }
+  },
+  xAxis: {
+    data: [],
+    offset: 20,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#eaeef7"
+      }
     },
-    xAxis: {
-        data: [],
-        offset: 20,
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        axisTick: {
-            show: false
-        },
-        axisLabel: {
-            show: true,
-            textStyle: {
-                color: "#7F8B9F"
-            }
-        },
-
+    axisTick: {
+      show: false
     },
-    yAxis: [{
-        type: "value",
-        name: "单位：个",
-        nameTextStyle: {
-            color: "#7F8B9F"
-        },
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        axisTick: {
-            show: false
-        },
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        axisLabel: {
-            show: true,
-            textStyle: {
-                color: "#7F8B9F"
-            }
-        },
-    }],
-    series: [
-        {
-            name: '非某矿山行业重大事故隐患',
-            type: "line",
-            smooth: true, //平滑曲线显示
-            showSymbol: false,
-            itemStyle: {
-                color: new graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: "#92E1E5"
-                },
-                    {
-                        offset: 1,
-                        color: "#00BBC4"
-                    }
-                ])
-            },
-            areaStyle: {
-                color: new graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: "rgba(0, 187, 196, 0.5)"
-                    },
-
-                    {
-                        offset: 1,
-                        color: "rgba(0, 187, 196, 0)"
-                    }
-                ])
-            },
-            data: []
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#7F8B9F"
+      }
+    }
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "单位：个",
+      nameTextStyle: {
+        color: "#7F8B9F"
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
         }
-    ]
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#eaeef7"
+        }
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#7F8B9F"
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: "非某矿山行业重大事故隐患",
+      type: "line",
+      smooth: true, //平滑曲线显示
+      showSymbol: false,
+      itemStyle: {
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#92E1E5"
+          },
+          {
+            offset: 1,
+            color: "#00BBC4"
+          }
+        ])
+      },
+      areaStyle: {
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(0, 187, 196, 0.5)"
+          },
+
+          {
+            offset: 1,
+            color: "rgba(0, 187, 196, 0)"
+          }
+        ])
+      },
+      data: []
+    }
+  ]
 };
 
 export const chartOption4 = {
-    grid: {
-        top: '0',
-        left: '10px',
-        right: '40px',
-        bottom: '20px',
-        containLabel: true
+  grid: {
+    top: "0",
+    left: "10px",
+    right: "40px",
+    bottom: "20px",
+    containLabel: true
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow"
+    }
+  },
+  xAxis: {
+    type: "value",
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#7F8B9F"
+      }
     },
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow'
-        }
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#eaeef7"
+      }
     },
-    xAxis: {
-        type: 'value',
-        axisLabel: {
-            show: true,
-            textStyle: {
-                color: '#7F8B9F'
-            }
-        },
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        splitLine: {
-            show: false
-        }
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "category",
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#7F8B9F"
+      }
     },
-    yAxis: {
-        type: 'category',
-        axisLabel: {
-            show: true,
-            textStyle: {
-                color: '#7F8B9F'
-            }
-        },
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: '#eaeef7'
-            }
-        },
-        axisTick: {
-            show: false
-        },
-        data: [
-            '信宜市',
-            '高州市',
-            '化州市',
-            '电白区',
-            '茂南区',
-            '滨海新区',
-            '高新区'
-        ]
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#eaeef7"
+      }
     },
-    series: [
-        {
-            name: '2011',
-            type: 'bar',
-            label: {
-                show: true,
-                position: 'right',
-                fontSize: '12px',
-                color: '#2C81FF'
-            },
-            data: [],
-            itemStyle: {
-                color: new graphic.LinearGradient(0, 0, 1, 0, [
-                    {
-                        offset: 0,
-                        color: '#266FE8'
-                    },
-                    {
-                        offset: 1,
-                        color: '#A1C0F5'
-                    }
-                ])
-            }
-        }
+    axisTick: {
+      show: false
+    },
+    data: [
+      "信宜市",
+      "高州市",
+      "化州市",
+      "电白区",
+      "茂南区",
+      "滨海新区",
+      "高新区"
     ]
-}
+  },
+  series: [
+    {
+      name: "2011",
+      type: "bar",
+      label: {
+        show: true,
+        position: "right",
+        fontSize: "12px",
+        color: "#2C81FF"
+      },
+      data: [],
+      itemStyle: {
+        color: new graphic.LinearGradient(0, 0, 1, 0, [
+          {
+            offset: 0,
+            color: "#266FE8"
+          },
+          {
+            offset: 1,
+            color: "#A1C0F5"
+          }
+        ])
+      }
+    }
+  ]
+};
 
 export const chartOption5 = {
-    color: ['#8984ff', '#56e09f', '#2c81ff', '#fab21b', '#ff7a0d'],
-    tooltip: {
+  color: ["#8984ff", "#56e09f", "#2c81ff", "#fab21b", "#ff7a0d"],
+  tooltip: {
+    show: false
+  },
+  toolbox: {
+    show: false
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      clockWise: false,
+      radius: [60, 65],
+      width: 280,
+      height: 252,
+      hoverAnimation: false,
+      center: ["17%", "55%"],
+      left: "20%",
+      top: "center",
+      itemStyle: {
+        normal: {
+          label: {
+            show: false
+          }
+        }
+      },
+      data: []
+    }
+  ]
+};
+
+export const chartOption6 = {
+  legend: {},
+  grid: {
+    top: "40px",
+    left: "30px",
+    right: "20px",
+    bottom: "30px"
+    // containLabel: true
+  },
+  tooltip: {
+    show: true,
+    trigger: "axis"
+  },
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        textStyle: {
+          color: "#414F64",
+          fontSize: 10
+        }
+      },
+      axisLine: {
+        show: true
+      },
+      splitLine: {
         show: false
-    },
-    toolbox: {
+      },
+      axisTick: {
+        show: false
+      },
+      data: []
+    }
+  ],
+
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: true
+      },
+      axisLine: {
         show: false
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#414F64",
+          fontSize: 10
+        }
+      },
+      axisTick: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      name: "一般事故",
+      type: "line",
+      smooth: true, //是否平滑
+      showAllSymbol: true,
+      symbol: "circle",
+      symbolSize: 6,
+      lineStyle: {
+        color: "#00b3f4"
+      },
+      label: {
+        show: true,
+        position: "top",
+        textStyle: {
+          color: "#00b3f4",
+          fontSize: 10
+        }
+      },
+      itemStyle: {
+        color: "#00b3f4",
+        borderColor: "#fff",
+        borderWidth: 1
+      },
+      areaStyle: {
+        normal: {
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(0,179,244,0.3)"
+              },
+              {
+                offset: 1,
+                color: "rgba(0,179,244,0)"
+              }
+            ],
+            false
+          ),
+          shadowColor: "rgba(0,179,244, 0.9)",
+          shadowBlur: 20
+        }
+      },
+      data: []
+    },
+    {
+      name: "重大事故",
+      type: "line",
+      smooth: true, //是否平滑
+      showAllSymbol: true,
+      symbol: "circle",
+      symbolSize: 6,
+      lineStyle: {
+        color: "#00ca95"
+      },
+      label: {
+        show: true,
+        position: "top",
+        textStyle: {
+          color: "#00ca95",
+          fontSize: 10
+        }
+      },
+
+      itemStyle: {
+        color: "#00ca95",
+        borderColor: "#fff",
+        borderWidth: 1
+      },
+      areaStyle: {
+        normal: {
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(0,202,149,0.3)"
+              },
+              {
+                offset: 1,
+                color: "rgba(0,202,149,0)"
+              }
+            ],
+            false
+          ),
+          shadowColor: "rgba(0,202,149, 0.9)",
+          shadowBlur: 20
+        }
+      },
+      data: []
+    }
+  ]
+};
+
+export const chartOption7 = {
+  grid: {
+    top: "0",
+    left: "10px",
+    right: "40px",
+    bottom: "20px",
+    containLabel: true
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow"
+    }
+  },
+  xAxis: {
+    type: "value",
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#7F8B9F"
+      }
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#eaeef7"
+      }
+    },
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "category",
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#7F8B9F"
+      }
     },
-    series: [{
-        name: '',
-        type: 'pie',
-        clockWise: false,
-        radius: [60, 65],
-        width:280,
-        height:252,
-        hoverAnimation: false,
-        center: ['17%', '55%'],
-        left:"20%",
-        top:"center",
-        itemStyle: {
-            normal:{
-                label: {
-                    show:false
-                }
-            }
-        },
-        data: []
-    }]
-}
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#eaeef7"
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    data: [
+      "超速",
+      "酒驾",
+      "疲劳驾驶",
+      "闯红灯",
+      "恶劣天气",
+      "道路设计缺陷",
+      "路面障碍物",
+      "车辆问题"
+    ]
+  },
+  series: [
+    {
+      name: "2011",
+      type: "bar",
+      label: {
+        show: true,
+        position: "right",
+        fontSize: "12px",
+        color: "#2C81FF"
+      },
+      data: [],
+      itemStyle: {
+        color: new graphic.LinearGradient(0, 0, 1, 0, [
+          {
+            offset: 0,
+            color: "#266FE8"
+          },
+          {
+            offset: 1,
+            color: "#A1C0F5"
+          }
+        ])
+      }
+    }
+  ]
+};

src/views/disasterRiskMonitor/emergencyTrafficAccidents.vue

@@ -0,0 +1,747 @@
+<template>
+  <div class="container">
+    <div class="event-box">
+      <div class="box-header">
+        <div class="title-box">
+          <div class="title"><i class="icon-speaker" />重大事件信息</div>
+        </div>
+        <div class="more">查看更多>></div>
+      </div>
+      <div class="event-content">
+        <div class="text1">{{ noticeBarState.event_title }}</div>
+        <div class="text2">{{ noticeBarState.time }}</div>
+      </div>
+    </div>
+    <div class="content" style="margin-top: 0">
+      <div class="card-box">
+        <div class="card-item">
+          <div class="text1">事故数量</div>
+          <div class="text-box">
+            <div class="text2">47</div>
+            <div class="text3">起</div>
+          </div>
+        </div>
+        <div class="card-item">
+          <div class="text1">伤亡人数</div>
+          <div class="text-box">
+            <div class="text2">1,302</div>
+            <div class="text3">人</div>
+          </div>
+        </div>
+        <div class="card-item">
+          <div class="text1">经济损失</div>
+          <div class="text-box">
+            <div class="text2">221</div>
+            <div class="text3">万</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content" style="margin-top: 0">
+      <div class="card">
+        <div class="card-header">
+          <i class="icon-line" />
+          <div class="text">交通事故隐患点情况</div>
+        </div>
+        <div class="card-content2">
+          <div class="card1">
+            <div class="text1">交通事故隐患点总数</div>
+            <div class="text-box">
+              <div class="text-blue">10</div>
+              <div class="text2">个</div>
+            </div>
+          </div>
+          <div class="flex-box">
+            <div class="card2">
+              <div class="text1">高风险</div>
+              <div class="text-box">
+                <div class="text-red">2</div>
+                <div class="text2">个</div>
+              </div>
+            </div>
+            <div class="card3">
+              <div class="text1">中风险</div>
+              <div class="text-box">
+                <div class="text-orange">3</div>
+                <div class="text2">个</div>
+              </div>
+            </div>
+            <div class="card4">
+              <div class="text1">低风险</div>
+              <div class="text-box">
+                <div class="text-green">5</div>
+                <div class="text2">个</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="card">
+        <div class="card-header">
+          <i class="icon-line" />
+          <div class="text">事故原因统计</div>
+        </div>
+        <Chart :option="option1" style="height: 200px" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="card">
+        <div class="card-header">
+          <i class="icon-line" />
+          <div class="text">事件列表</div>
+        </div>
+        <div class="select-box" @click="showPicker = true">
+          <div class="text1">年度</div>
+          <div class="select-item">
+            <div class="label">{{ yearLabel ? yearLabel : "请选择" }}</div>
+            <i class="icon-down" />
+          </div>
+        </div>
+        <el-table :data="detailsData.dataList" border table-layout="auto">
+          <el-table-column label="类别" prop="data1" align="center" />
+          <el-table-column label="位置" prop="data2" align="center" />
+          <el-table-column label="发生时间" prop="data3" align="center" />
+          <el-table-column label="受伤人数" prop="data4" align="center" />
+          <el-table-column label="死亡人数" prop="data5" align="center" />
+        </el-table>
+      </div>
+    </div>
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onPickerConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="cityEmergencyEvent">
+import { reactive, ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { chartOption7 } from "@/views/disasterRiskMonitor/chartOptions";
+import { ElTable, ElTableColumn } from "element-plus";
+const noticeBarState = reactive({
+  show: false,
+  event_id: "",
+  time: "2024-03-01 12:12:12",
+  event_title:
+    "2025年3月24日，S10山海高速五指山往保亭方向32km+300m路段。一辆白色小型普通客车在快车道行驶时，突然向左偏离方向剐蹭了中央护栏…"
+});
+// 搜索
+const searchBoxRef = ref();
+let showSearch = ref();
+const queryParams = reactive({
+  page: 0,
+  page_size: 10,
+  year: "",
+  keywords: ""
+});
+let yearLabel = ref("");
+onClickOutside(searchBoxRef, event => {
+  showSearch.value = false;
+});
+
+let detailsData = ref({
+  dataList: []
+});
+const option1 = ref(chartOption7);
+let showPicker = ref(false);
+let columns = reactive([
+  { text: "2024年", value: "2024" },
+  { text: "2023年", value: "2023" },
+  { text: "2022年", value: "2022" },
+  { text: "2021年", value: "2021" }
+]);
+const getImageUrl = name => {
+  return new URL(
+    `../../assets/images/disasterRiskMonitor/cityEmergencyEvent/${name}`,
+    import.meta.url
+  ).href;
+};
+let iconList = reactive({
+  "1": {
+    image: getImageUrl("icon2.png"),
+    size: [20, 20]
+  },
+  "2": {
+    image: getImageUrl("icon1.png"),
+    size: [20, 20]
+  }
+});
+const onPickerConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  yearLabel.value = selectedOptions[0].text;
+  queryParams.year = selectedOptions[0].value;
+};
+const initData = () => {
+  option1.value.xAxis.data = [
+    "2024-01",
+    "2024-02",
+    "2024-03",
+    "2024-04",
+    "2024-05",
+    "2024-06"
+  ];
+  option1.value.series[0].data = [
+    502.84, 205.97, 332.79, 281.55, 398.35, 214.02
+  ];
+  // 事件列表
+  detailsData.value.dataList = [
+    {
+      data1: "一般事故",
+      data2: "茂名市电白区黄岭镇石头村",
+      data3: "2024-12-14 12:12:13",
+      data4: 1,
+      data5: 0,
+      longitude: "110.719914",
+      latitude: "21.609269",
+      dataType: "1"
+    },
+    {
+      data1: "重大事故",
+      data2: "茂名市茂南区羊角镇",
+      data3: "2024-10-07 08:00:00",
+      data4: 2,
+      data5: 0,
+      longitude: "110.984948",
+      latitude: "21.669318",
+      dataType: "1"
+    }
+  ];
+  detailsData.value.dataList.forEach(item => {
+    const icon =
+      item.dataType && !!iconList[item.dataType].image
+        ? iconList[item.dataType].image
+        : "";
+    item.icon = icon;
+    item.image = icon;
+    item.imageHover = icon;
+    item.size = iconList[item.dataType].size;
+    item.lnglat = [item.longitude, item.latitude];
+  });
+};
+initData();
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .map {
+    width: 100%;
+    height: 250px;
+  }
+  .event-box {
+    position: relative;
+    width: 375px;
+    height: 117px;
+    background: url("@/assets/images/disasterRiskMonitor/cityEmergencyEvent/box1.png")
+      no-repeat;
+    background-size: 100% 100%;
+    box-shadow: 0 2px 4px 0 rgba(228, 240, 255, 1);
+    .box-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 6px;
+      .more {
+        font-size: 12px;
+        color: #2c81ff;
+      }
+    }
+    .title-box {
+      height: 30px;
+      background-color: #ffffff; /* 背景颜色 */
+      transform: skewX(-20deg); /* 斜切变形 */
+      box-shadow: 0 2px 4px 0 rgba(250, 217, 97, 0.18);
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      border-radius: 2px;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: -6px;
+        transform: skewX(20deg);
+        width: 11px;
+        height: 27px;
+        background: url("@/assets/images/disasterRiskMonitor/riverMonitor/thickness.png")
+          no-repeat;
+        background-size: 100% 100%;
+      }
+      .title {
+        font-size: 14px;
+        color: #ffaf00;
+        transform: skewX(20deg);
+        display: flex;
+        align-items: center;
+        .icon-speaker {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          background: url("@/assets/images/disasterRiskMonitor/riverMonitor/speaker.png")
+            no-repeat;
+          background-size: 100% 100%;
+          margin-right: 5px;
+        }
+      }
+    }
+    .event-content {
+      padding: 0 10px;
+    }
+    .text1 {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      color: #414f64;
+    }
+    .text2 {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+      text-align: right;
+    }
+  }
+}
+.search-box {
+  padding: 16px 16px 10px;
+}
+.search-list {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  height: calc(100vh - 400px);
+  overflow-y: auto;
+  background-color: #ffffff;
+  border-top: 1px solid #eeeeee;
+  .item {
+    padding: 8px 15px;
+    border-bottom: 1px solid #eeeeee;
+  }
+}
+.common-search {
+  border: 1px solid #dce0ee;
+  border-radius: 2px;
+  padding: 0;
+  :deep(.van-field__control) {
+    &::placeholder {
+      color: #c9cfd9;
+    }
+  }
+  :deep(.van-search__content) {
+    background-color: #ffffff;
+    border: none !important;
+  }
+  :deep(.van-field__left-icon) {
+    .van-icon__image {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  :deep(.van-field__right-icon) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    .van-icon__image {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .search-btn {
+    font-size: 14px;
+    color: #2c81ff;
+  }
+}
+.card {
+  background-color: #ffffff;
+  border: 1px solid #eaedf7;
+  border-radius: 4px;
+  padding: 2px;
+  margin-top: 16px;
+  &:first-child {
+    margin-top: 0;
+  }
+  .card-header {
+    font-size: 16px;
+    color: #414f64;
+    font-weight: bold;
+    line-height: 26px;
+    padding: 11px 10px;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+    .icon-line {
+      display: inline-block;
+      width: 6px;
+      height: 16px;
+      background: url("@/assets/images/line.jpg") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 3px;
+    }
+  }
+}
+.content {
+  padding: 0 16px;
+  margin-top: 16px;
+}
+.select-box {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-right: 20px;
+  .text1 {
+    font-size: 14px;
+    color: #414f64;
+    margin-right: 5px;
+  }
+  .select-item {
+    background-color: #f4f7fc;
+    padding: 5px;
+    min-width: 92px;
+    height: 32px;
+    border-raduis: 4px;
+    font-size: 14px;
+    color: #414f64;
+    display: flex;
+    align-items: center;
+    .label {
+      flex: 1;
+    }
+    .icon-down {
+      flex-shrink: 0;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: url("@/assets/images/down.png") no-repeat;
+      background-size: 100% 100%;
+      margin-left: 5px;
+    }
+  }
+}
+.card-box {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 10px;
+  .card-item {
+    width: 101px;
+    height: 104px;
+    background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card3.png")
+      no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 9px;
+    &:nth-child(2) {
+      background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card4.png")
+        no-repeat;
+      background-size: 100% 100%;
+    }
+    &:nth-child(3) {
+      background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card5.png")
+        no-repeat;
+      background-size: 100% 100%;
+    }
+    .text1 {
+      font-size: 14px;
+      color: #414f64;
+      line-height: 26px;
+    }
+    .text-box {
+      display: flex;
+      align-items: baseline;
+      .text2 {
+        font-size: 24px;
+        font-weight: bold;
+        color: #ff2f3c;
+      }
+      .text3 {
+        font-size: 12px;
+        color: #414f64;
+        line-height: 26px;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+.card {
+  background-color: #ffffff;
+  border: 1px solid #eaedf7;
+  box-shadow: 0 0 4px 0 #4554661a;
+  border-radius: 4px;
+  padding: 2px;
+  margin-top: 16px;
+  &:first-child {
+    margin-top: 0;
+  }
+  .card-header {
+    font-size: 16px;
+    color: #414f64;
+    font-weight: bold;
+    line-height: 26px;
+    padding: 11px 10px;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+    .flex {
+      display: flex;
+      align-items: center;
+    }
+    .icon-line {
+      display: inline-block;
+      width: 6px;
+      height: 16px;
+      background: url("@/assets/images/line.jpg") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 3px;
+    }
+  }
+  .sub-text {
+    font-size: 12px;
+    padding: 0 5px;
+    color: rgba(0, 0, 0, 0.45);
+    margin-top: -7px;
+  }
+  .sub-text2 {
+    font-size: 12px;
+    font-weight: normal;
+    padding: 0 5px;
+    color: #7f8b9f;
+  }
+  .card-content {
+    padding: 0 5px 13px 8px;
+    //padding-bottom: 13px;
+    display: flex;
+    justify-content: space-between;
+    .card1 {
+      width: 147px;
+      height: 99px;
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card5.png")
+        no-repeat;
+      background-size: 100% 100%;
+      box-shadow: 0 2px 11px 0 rgba(44, 129, 255, 0.1);
+      padding: 5px 15px;
+      color: #ff2f3c;
+      .text1 {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .text2 {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .text {
+        font-size: 14px;
+      }
+    }
+    .card2 {
+      width: 169px;
+      height: 99px;
+      padding: 5px 8px;
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card6.png")
+        no-repeat;
+      background-size: 100% 100%;
+      box-shadow: 0 2px 11px 0 rgba(44, 129, 255, 0.1);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .tr {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &:nth-child(1) {
+          color: #ff2f3c;
+        }
+        &:nth-child(2) {
+          color: #ff7d00;
+        }
+        &:nth-child(3) {
+          color: #ffd45e;
+        }
+        .text1 {
+        }
+        .td {
+          margin: 0 2px;
+          font-size: 13px;
+          &:nth-child(3) {
+            font-size: 15px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+  .card-content2 {
+    padding-bottom: 7px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .card1 {
+      width: 341px;
+      height: 84px;
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card1.png")
+        no-repeat;
+      background-size: 100% 100%;
+      padding: 5px 185px 5px 27px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .text1 {
+      font-size: 14px;
+      color: #414f64;
+      line-height: 26px;
+    }
+    .text-box {
+      display: flex;
+      align-items: center;
+      .text-blue {
+        font-size: 24px;
+        color: #2c81ff;
+        font-width: bold;
+      }
+      .text-red {
+        font-size: 24px;
+        color: #ff2f3c;
+        font-width: bold;
+      }
+      .text-orange {
+        font-size: 24px;
+        color: #ffaf00;
+        font-width: bold;
+      }
+      .text-green {
+        font-size: 24px;
+        color: #40c75f;
+        font-width: bold;
+      }
+      .text2 {
+        font-size: 12px;
+        color: #414f64;
+      }
+    }
+    .flex-box {
+      width: 328px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .card2 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card2.png")
+        no-repeat;
+    }
+    .card3 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card3.png")
+        no-repeat;
+      box-shadow: 0 1px 6px 0 rgba(245, 225, 160, 0.24);
+    }
+    .card4 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card4.png")
+        no-repeat;
+      box-shadow: 0 0 4px 0 rgba(69, 84, 102, 0.1);
+    }
+    .card2,
+    .card3,
+    .card4 {
+      width: 106px;
+      height: 71px;
+      background-position: center center;
+      background-size: 118px 84px;
+      padding: 5px 27px 5px 27px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .card-content3 {
+    .box1 {
+      display: flex;
+      align-items: center;
+      margin: 12px 12px 12px 16px;
+      .select-box {
+        width: 80px;
+        margin-left: 10px;
+        display: flex;
+        align-items: center;
+        .icon-down {
+          margin-left: 3px;
+          display: inline-block;
+          flex-shrink: 0;
+          width: 14px;
+          height: 14px;
+          background: url("@/assets/images/down.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .box2 {
+      padding: 0 30px;
+      display: flex;
+      justify-content: space-between;
+      .box-item {
+        .icon1 {
+          background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon1.png")
+            no-repeat;
+        }
+        .icon2 {
+          background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon2.png")
+            no-repeat;
+        }
+        .icon3 {
+          background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon3.png")
+            no-repeat;
+        }
+        .icon1,
+        .icon2,
+        .icon3 {
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          background-size: 100% 100%;
+          box-shadow:
+            0 2px 1px -1px #bcd7ffb5,
+            inset 0 1px 3px 6px #ace2ff08;
+          border-radius: 11px;
+        }
+        .text1 {
+          font-size: 14px;
+          color: #414f64;
+          line-height: 26px;
+        }
+        .text-box {
+          display: flex;
+          align-items: center;
+          .text-blue {
+            font-size: 24px;
+            margin-right: 5px;
+            color: #80c2ff;
+          }
+          .text-orange {
+            font-size: 24px;
+            margin-right: 5px;
+            color: #ffaf00;
+          }
+          .text-red {
+            font-size: 24px;
+            margin-right: 5px;
+            color: #ff2f3c;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/disasterRiskMonitor/fireworksEmergency.vue

@@ -0,0 +1,792 @@
+<template>
+  <div class="container">
+    <div class="event-box">
+      <div class="box-header">
+        <div class="title-box">
+          <div class="title"><i class="icon-speaker" />重大事件信息</div>
+        </div>
+        <div class="more">查看更多>></div>
+      </div>
+      <div class="event-content">
+        <div class="text1">{{ noticeBarState.event_title }}</div>
+        <div class="text2">{{ noticeBarState.time }}</div>
+      </div>
+    </div>
+    <div class="content" style="margin-top: 0">
+      <div class="card-box">
+        <div class="card-item">
+          <div class="text1">事故数量</div>
+          <div class="text-box">
+            <div class="text2">47</div>
+            <div class="text3">起</div>
+          </div>
+        </div>
+        <div class="card-item">
+          <div class="text1">威胁人口</div>
+          <div class="text-box">
+            <div class="text2">1,302</div>
+            <div class="text3">人</div>
+          </div>
+        </div>
+        <div class="card-item">
+          <div class="text1">潜在经济损失</div>
+          <div class="text-box">
+            <div class="text2">34,221</div>
+            <div class="text3">万</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content" style="margin-top: 0">
+      <div class="card">
+        <div class="card-header">
+          <i class="icon-line" />
+          <div class="text">烟花爆竹隐患点情况</div>
+        </div>
+        <div class="card-content2">
+          <div class="card1">
+            <div class="text1">烟花爆竹隐患点总数</div>
+            <div class="text-box">
+              <div class="text-blue">10</div>
+              <div class="text2">个</div>
+            </div>
+          </div>
+          <div class="flex-box">
+            <div class="card2">
+              <div class="text1">高风险</div>
+              <div class="text-box">
+                <div class="text-red">2</div>
+                <div class="text2">个</div>
+              </div>
+            </div>
+            <div class="card3">
+              <div class="text1">中风险</div>
+              <div class="text-box">
+                <div class="text-orange">3</div>
+                <div class="text2">个</div>
+              </div>
+            </div>
+            <div class="card4">
+              <div class="text1">低风险</div>
+              <div class="text-box">
+                <div class="text-green">5</div>
+                <div class="text2">个</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="card">
+        <div class="card-header">
+          <i class="icon-line" />
+          <div class="text">事故统计</div>
+        </div>
+        <Chart :option="option1" style="height: 200px" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="card">
+        <div class="card-header">
+          <i class="icon-line" />
+          <div class="text">事件列表</div>
+        </div>
+        <div class="select-box" @click="showPicker = true">
+          <div class="text1">年度</div>
+          <div class="select-item">
+            <div class="label">{{ yearLabel ? yearLabel : "请选择" }}</div>
+            <i class="icon-down" />
+          </div>
+        </div>
+        <el-table :data="detailsData.dataList" border table-layout="auto">
+          <el-table-column label="类别" prop="data1" align="center" />
+          <el-table-column label="位置" prop="data2" align="center" />
+          <el-table-column label="发生时间" prop="data3" align="center" />
+          <el-table-column label="受伤人数" prop="data4" align="center" />
+          <el-table-column label="死亡人数" prop="data5" align="center" />
+        </el-table>
+      </div>
+    </div>
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onPickerConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="cityEmergencyEvent">
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import searchImg from "@/assets/images/search.png";
+import { getPointInfoComprehensiveSearch } from "@/api/globalMap";
+import { onClickOutside } from "@vueuse/core";
+import { chartOption6 } from "@/views/disasterRiskMonitor/chartOptions";
+import { ElTable, ElTableColumn } from "element-plus";
+const noticeBarState = reactive({
+  show: false,
+  event_id: "",
+  time: "2024-03-01 12:12:12",
+  event_title:
+    "茂名市茂南区xxx发生烟花爆竹事故，今日凌晨三点在xx，发生原因是，事发当时地表温度高，收取的单基火药粉处于干燥状态，导致事故发生。…"
+});
+// 搜索
+const searchBoxRef = ref();
+let showSearch = ref();
+const total = ref(0);
+let loading = ref(false);
+let error = ref(false);
+let finished = ref(false);
+const queryParams = reactive({
+  page: 0,
+  page_size: 10,
+  year: "",
+  keywords: ""
+});
+let yearLabel = ref("");
+const searchList = ref([]);
+onClickOutside(searchBoxRef, event => {
+  showSearch.value = false;
+});
+const getSearchList = () => {
+  if (!queryParams.keywords) {
+    return (loading.value = false);
+  }
+  queryParams.page++;
+  getPointInfoComprehensiveSearch(queryParams)
+    .then(res => {
+      const items = res.data.list || [];
+      total.value = res.data.total;
+      if (queryParams.page == 1) {
+        searchList.value = [];
+      }
+      items.forEach(val => {
+        searchList.value.push(val);
+      });
+      if (queryParams.page_size * queryParams.page >= total.value) {
+        finished.value = true;
+      } else {
+        finished.value = false;
+      }
+      showSearch.value = true;
+    })
+    .catch(() => {
+      error.value = true;
+      finished.value = false;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const onSearchKeyword = val => {
+  queryParams.keywords = val;
+  queryParams.page = 0;
+  getSearchList();
+};
+const handleClickItem = item => {
+  showSearch.value = false;
+  queryParams.keywords = "";
+  queryParams.page = 0;
+  finished.value = false;
+  searchList.value = [];
+};
+let eventDetails = ref({});
+let detailsData = ref({
+  dataList: []
+});
+const option1 = ref(chartOption6);
+let showPicker = ref(false);
+let columns = reactive([
+  { text: "2024年", value: "2024" },
+  { text: "2023年", value: "2023" },
+  { text: "2022年", value: "2022" },
+  { text: "2021年", value: "2021" }
+]);
+const getImageUrl = name => {
+  return new URL(
+    `../../assets/images/disasterRiskMonitor/cityEmergencyEvent/${name}`,
+    import.meta.url
+  ).href;
+};
+let iconList = reactive({
+  "1": {
+    image: getImageUrl("icon2.png"),
+    size: [20, 20]
+  },
+  "2": {
+    image: getImageUrl("icon1.png"),
+    size: [20, 20]
+  }
+});
+const onPickerConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  yearLabel.value = selectedOptions[0].text;
+  queryParams.year = selectedOptions[0].value;
+};
+const initData = () => {
+  option1.value.xAxis[0].data = [
+    "2024-01",
+    "2024-02",
+    "2024-03",
+    "2024-04",
+    "2024-05",
+    "2024-06"
+  ];
+  option1.value.series[0].data = [
+    502.84, 205.97, 332.79, 281.55, 398.35, 214.02
+  ];
+  option1.value.series[1].data = [
+    281.55, 398.35, 214.02, 179.55, 289.57, 356.14
+  ];
+  // 事件列表
+  detailsData.value.dataList = [
+    {
+      data1: "一般事故",
+      data2: "茂名市电白区黄岭镇石头村",
+      data3: "2024-12-14 12:12:13",
+      data4: 1,
+      data5: 0,
+      longitude: "110.719914",
+      latitude: "21.609269",
+      dataType: "1"
+    },
+    {
+      data1: "重大事故",
+      data2: "茂名市茂南区羊角镇",
+      data3: "2024-10-07 08:00:00",
+      data4: 2,
+      data5: 0,
+      longitude: "110.984948",
+      latitude: "21.669318",
+      dataType: "1"
+    }
+  ];
+  detailsData.value.dataList.forEach(item => {
+    const icon =
+      item.dataType && !!iconList[item.dataType].image
+        ? iconList[item.dataType].image
+        : "";
+    item.icon = icon;
+    item.image = icon;
+    item.imageHover = icon;
+    item.size = iconList[item.dataType].size;
+    item.lnglat = [item.longitude, item.latitude];
+  });
+};
+initData();
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .map {
+    width: 100%;
+    height: 250px;
+  }
+  .event-box {
+    position: relative;
+    width: 375px;
+    height: 117px;
+    background: url("@/assets/images/disasterRiskMonitor/cityEmergencyEvent/box1.png")
+      no-repeat;
+    background-size: 100% 100%;
+    box-shadow: 0 2px 4px 0 rgba(228, 240, 255, 1);
+    .box-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 6px;
+      .more {
+        font-size: 12px;
+        color: #2c81ff;
+      }
+    }
+    .title-box {
+      height: 30px;
+      background-color: #ffffff; /* 背景颜色 */
+      transform: skewX(-20deg); /* 斜切变形 */
+      box-shadow: 0 2px 4px 0 rgba(250, 217, 97, 0.18);
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      border-radius: 2px;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: -6px;
+        transform: skewX(20deg);
+        width: 11px;
+        height: 27px;
+        background: url("@/assets/images/disasterRiskMonitor/riverMonitor/thickness.png")
+          no-repeat;
+        background-size: 100% 100%;
+      }
+      .title {
+        font-size: 14px;
+        color: #ffaf00;
+        transform: skewX(20deg);
+        display: flex;
+        align-items: center;
+        .icon-speaker {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          background: url("@/assets/images/disasterRiskMonitor/riverMonitor/speaker.png")
+            no-repeat;
+          background-size: 100% 100%;
+          margin-right: 5px;
+        }
+      }
+    }
+    .event-content {
+      padding: 0 10px;
+    }
+    .text1 {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      color: #414f64;
+    }
+    .text2 {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+      text-align: right;
+    }
+  }
+}
+.search-box {
+  padding: 16px 16px 10px;
+}
+.search-list {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  height: calc(100vh - 400px);
+  overflow-y: auto;
+  background-color: #ffffff;
+  border-top: 1px solid #eeeeee;
+  .item {
+    padding: 8px 15px;
+    border-bottom: 1px solid #eeeeee;
+  }
+}
+.common-search {
+  border: 1px solid #dce0ee;
+  border-radius: 2px;
+  padding: 0;
+  :deep(.van-field__control) {
+    &::placeholder {
+      color: #c9cfd9;
+    }
+  }
+  :deep(.van-search__content) {
+    background-color: #ffffff;
+    border: none !important;
+  }
+  :deep(.van-field__left-icon) {
+    .van-icon__image {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  :deep(.van-field__right-icon) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    .van-icon__image {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .search-btn {
+    font-size: 14px;
+    color: #2c81ff;
+  }
+}
+.card {
+  background-color: #ffffff;
+  border: 1px solid #eaedf7;
+  border-radius: 4px;
+  padding: 2px;
+  margin-top: 16px;
+  &:first-child {
+    margin-top: 0;
+  }
+  .card-header {
+    font-size: 16px;
+    color: #414f64;
+    font-weight: bold;
+    line-height: 26px;
+    padding: 11px 10px;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+    .icon-line {
+      display: inline-block;
+      width: 6px;
+      height: 16px;
+      background: url("@/assets/images/line.jpg") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 3px;
+    }
+  }
+}
+.content {
+  padding: 0 16px;
+  margin-top: 16px;
+}
+.select-box {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-right: 20px;
+  .text1 {
+    font-size: 14px;
+    color: #414f64;
+    margin-right: 5px;
+  }
+  .select-item {
+    background-color: #f4f7fc;
+    padding: 5px;
+    min-width: 92px;
+    height: 32px;
+    border-raduis: 4px;
+    font-size: 14px;
+    color: #414f64;
+    display: flex;
+    align-items: center;
+    .label {
+      flex: 1;
+    }
+    .icon-down {
+      flex-shrink: 0;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: url("@/assets/images/down.png") no-repeat;
+      background-size: 100% 100%;
+      margin-left: 5px;
+    }
+  }
+}
+.card-box {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 10px;
+  .card-item {
+    width: 101px;
+    height: 104px;
+    background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card3.png")
+    no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 9px;
+    &:nth-child(2) {
+      background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card4.png")
+      no-repeat;
+      background-size: 100% 100%;
+    }
+    &:nth-child(3) {
+      background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card5.png")
+      no-repeat;
+      background-size: 100% 100%;
+    }
+    .text1 {
+      font-size: 14px;
+      color: #414f64;
+      line-height: 26px;
+    }
+    .text-box {
+      display: flex;
+      align-items: baseline;
+      .text2 {
+        font-size: 24px;
+        font-weight: bold;
+        color: #ff2f3c;
+      }
+      .text3 {
+        font-size: 12px;
+        color: #414f64;
+        line-height: 26px;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+.card {
+  background-color: #ffffff;
+  border: 1px solid #EAEDF7;
+  box-shadow: 0 0 4px 0 #4554661a;
+  border-radius: 4px;
+  padding: 2px;
+  margin-top: 16px;
+  &:first-child {
+    margin-top: 0;
+  }
+  .card-header {
+    font-size: 16px;
+    color: #414f64;
+    font-weight: bold;
+    line-height: 26px;
+    padding: 11px 10px;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
+    .flex {
+      display: flex;
+      align-items: center;
+    }
+    .icon-line {
+      display: inline-block;
+      width: 6px;
+      height: 16px;
+      background: url("@/assets/images/line.jpg") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 3px;
+    }
+  }
+  .sub-text {
+    font-size: 12px;
+    padding: 0 5px;
+    color: rgba(0, 0, 0, 0.45);
+    margin-top: -7px;
+  }
+  .sub-text2 {
+    font-size: 12px;
+    font-weight: normal;
+    padding: 0 5px;
+    color: #7f8b9f;
+  }
+  .card-content {
+    padding: 0 5px 13px 8px;
+    //padding-bottom: 13px;
+    display: flex;
+    justify-content: space-between;
+    .card1 {
+      width: 147px;
+      height: 99px;
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card5.png") no-repeat;
+      background-size: 100% 100%;
+      box-shadow: 0 2px 11px 0 rgba(44, 129, 255, 0.1);
+      padding: 5px 15px;
+      color: #ff2f3c;
+      .text1 {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .text2 {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .text {
+        font-size: 14px;
+      }
+    }
+    .card2 {
+      width: 169px;
+      height: 99px;
+      padding: 5px 8px;
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card6.png") no-repeat;
+      background-size: 100% 100%;
+      box-shadow: 0 2px 11px 0 rgba(44, 129, 255, 0.1);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .tr {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &:nth-child(1) {
+          color: #ff2f3c;
+        }
+        &:nth-child(2) {
+          color: #ff7d00;
+        }
+        &:nth-child(3) {
+          color: #ffd45e;
+        }
+        .text1 {
+        }
+        .td {
+          margin: 0 2px;
+          font-size: 13px;
+          &:nth-child(3) {
+            font-size: 15px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+  .card-content2 {
+    padding-bottom: 7px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .card1 {
+      width: 341px;
+      height: 84px;
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card1.png")
+      no-repeat;
+      background-size: 100% 100%;
+      padding: 5px 185px 5px 27px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .text1 {
+      font-size: 14px;
+      color: #414f64;
+      line-height: 26px;
+    }
+    .text-box {
+      display: flex;
+      align-items: center;
+      .text-blue {
+        font-size: 24px;
+        color: #2c81ff;
+        font-width: bold;
+      }
+      .text-red {
+        font-size: 24px;
+        color: #ff2f3c;
+        font-width: bold;
+      }
+      .text-orange {
+        font-size: 24px;
+        color: #ffaf00;
+        font-width: bold;
+      }
+      .text-green {
+        font-size: 24px;
+        color: #40c75f;
+        font-width: bold;
+      }
+      .text2 {
+        font-size: 12px;
+        color: #414f64;
+      }
+    }
+    .flex-box {
+      width: 328px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .card2 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card2.png") no-repeat;
+    }
+    .card3 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card3.png") no-repeat;
+      box-shadow: 0 1px 6px 0 rgba(245, 225, 160, 0.24);
+    }
+    .card4 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card4.png") no-repeat;
+      box-shadow: 0 0 4px 0 rgba(69, 84, 102, 0.1);
+    }
+    .card2,
+    .card3,
+    .card4 {
+      width: 106px;
+      height: 71px;
+      background-position: center center;
+      background-size: 118px 84px;
+      padding: 5px 27px 5px 27px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .card-content3 {
+    .box1 {
+      display: flex;
+      align-items: center;
+      margin: 12px 12px 12px 16px;
+      .select-box {
+        width: 80px;
+        margin-left: 10px;
+        display: flex;
+        align-items: center;
+        .icon-down {
+          margin-left: 3px;
+          display: inline-block;
+          flex-shrink: 0;
+          width: 14px;
+          height: 14px;
+          background: url("@/assets/images/down.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .box2 {
+      padding: 0 30px;
+      display: flex;
+      justify-content: space-between;
+      .box-item {
+        .icon1 {
+          background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon1.png") no-repeat;
+        }
+        .icon2 {
+          background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon2.png") no-repeat;
+        }
+        .icon3 {
+          background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon3.png") no-repeat;
+        }
+        .icon1,
+        .icon2,
+        .icon3 {
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          background-size: 100% 100%;
+          box-shadow:
+              0 2px 1px -1px #bcd7ffb5,
+              inset 0 1px 3px 6px #ace2ff08;
+          border-radius: 11px;
+        }
+        .text1 {
+          font-size: 14px;
+          color: #414f64;
+          line-height: 26px;
+        }
+        .text-box {
+          display: flex;
+          align-items: center;
+          .text-blue {
+            font-size: 24px;
+            margin-right: 5px;
+            color: #80c2ff;
+          }
+          .text-orange {
+            font-size: 24px;
+            margin-right: 5px;
+            color: #ffaf00;
+          }
+          .text-red {
+            font-size: 24px;
+            margin-right: 5px;
+            color: #ff2f3c;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/event/ViewPage.vue

@@ -77,7 +77,6 @@
               <van-field
                 v-model="form.fieldValue"
                 class="common-field"
-                :right-icon="selectIcon"
                 readonly
                 placeholder="选择城市"
                 @click="showPicker = true"
@@ -161,7 +160,7 @@ import { PickerConfirmEventParams, showToast } from "vant";
 
 const forms = ref([
   {
-    fieldValue: "maoming",
+    fieldValue: "茂名市",
     death_toll: "1",
     injured_num: "1",
     missing_num: "1",
@@ -169,7 +168,7 @@ const forms = ref([
     unit_name: "1"
   },
   {
-    fieldValue: "xinyi",
+    fieldValue: "信宜市",
     death_toll: "1",
     injured_num: "1",
     missing_num: "1",
@@ -177,7 +176,7 @@ const forms = ref([
     unit_name: "1"
   },
   {
-    fieldValue: "xinyi",
+    fieldValue: "电白区",
     death_toll: "1",
     injured_num: "1",
     missing_num: "1",

src/views/leader/index.vue

@@ -151,7 +151,9 @@ const menu2 = ref([
       { name: "城市应急", icon: "city", url: "CityEmergencyEvent" },
       { name: "隐患点雨量", icon: "geologicalDisasterRainfall", url: "RainfallMonitoring" },
       { name: "雨窝点雨量", icon: "rainShelter", url: "RainfallInRainShelter" },
-      { name: "危化企业雨量", icon: "hazardousChemicalEnterprises", url: "HazardousChemicalEnterprises" }
+      { name: "危化企业雨量", icon: "hazardousChemicalEnterprises", url: "HazardousChemicalEnterprises" },
+      { name: "烟花事故", icon: "hazardousChemicalEnterprises", url: "FireworksEmergency" },
+      { name: "交通事故", icon: "hazardousChemicalEnterprises", url: "EmergencyTrafficAccidents" }
     ]
   }
 ]);
@@ -410,7 +412,7 @@ onUnmounted(() => {
   .box,
   .box2 {
     width: 100%;
-    height: 152px;
+    height: 210px;
     background: url("@/assets/images/index/boxBg.png") no-repeat;
     background-size: 100% 100%;
     margin-bottom: 12px;

src/views/worker/eventManagement/eventList.vue

@@ -223,9 +223,8 @@ const handleEventDetail = index => {
 };
 
 const handleEventAdd = () => {
-  router.push("/event/add");
-}
-
+  router.push({ name: "Add" });
+};
 </script>
 
 <style lang="scss" scoped>