城市应急

src/views/disasterRiskMonitor/chartOptions.ts

@@ -1,176 +1,120 @@
 import {graphic} from "echarts";
 
 export const chartOption1 = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            lineStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0,
-                        color: 'rgba(0, 255, 233,0)'
-                    }, {
-                        offset: 0.5,
-                        color: 'rgba(255, 255, 255,1)',
-                    }, {
-                        offset: 1,
-                        color: 'rgba(0, 255, 233,0)'
-                    }],
-                    global: false
-                }
-            },
-        },
-    },
+    legend: {},
     grid: {
-        top: '15%',
-        left: '5%',
-        right: '5%',
-        bottom: '15%',
+        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
         },
-        splitArea: {
-            // show: true,
-            color: '#f00',
-            lineStyle: {
-                color: '#f00'
-            },
-        },
-        axisLabel: {
-            color: '#fff'
-        },
         splitLine: {
             show: false
         },
-        boundaryGap: false,
-        data: ['A', 'B', 'C', 'D', 'E', 'F'],
-
+        axisTick: {
+            show: false,
+        },
+        data: []
     }],
 
     yAxis: [{
         type: 'value',
-        min: 0,
-        // max: 140,
-        splitNumber: 4,
         splitLine: {
             show: true,
-            lineStyle: {
-                color: 'rgba(255,255,255,0.1)'
-            }
         },
         axisLine: {
             show: false,
         },
         axisLabel: {
-            show: false,
-            margin: 20,
             textStyle: {
-                color: '#d1e6eb',
-
-            },
+                color: '#414F64',
+                fontSize: 10
+            }
         },
         axisTick: {
             show: false,
-        },
+        }
     }],
-    series: [{
-        name: '注册总量',
-        type: 'line',
-        smooth: true, //是否平滑
-        showAllSymbol: true,
-        // symbol: 'image://./static/images/guang-circle.png',
-        symbol: 'circle',
-        symbolSize: 15,
-        lineStyle: {
-            normal: {
+    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",
-                shadowColor: 'rgba(0, 0, 0, .3)',
-                shadowBlur: 0,
-                shadowOffsetY: 5,
-                shadowOffsetX: 5,
+                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: []
         },
-        label: {
-            show: true,
-            position: 'top',
-            textStyle: {
-                color: '#00b3f4',
-            }
-        },
-        itemStyle: {
-            color: "#00b3f4",
-            borderColor: "#fff",
-            borderWidth: 3,
-            shadowColor: 'rgba(0, 0, 0, .3)',
-            shadowBlur: 0,
-            shadowOffsetY: 2,
-            shadowOffsetX: 2,
-        },
-        tooltip: {
-            show: false
-        },
-        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: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
-    },
         {
-            name: '注册总量',
+            name: '事故灾害',
             type: 'line',
             smooth: true, //是否平滑
             showAllSymbol: true,
-            // symbol: 'image://./static/images/guang-circle.png',
             symbol: 'circle',
-            symbolSize: 15,
+            symbolSize: 6,
             lineStyle: {
-                normal: {
-                    color: "#00ca95",
-                    shadowColor: 'rgba(0, 0, 0, .3)',
-                    shadowBlur: 0,
-                    shadowOffsetY: 5,
-                    shadowOffsetX: 5,
-                },
+                color: "#00ca95"
             },
             label: {
                 show: true,
                 position: 'top',
                 textStyle: {
                     color: '#00ca95',
+                    fontSize: 10
                 }
             },
 
             itemStyle: {
                 color: "#00ca95",
                 borderColor: "#fff",
-                borderWidth: 3,
-                shadowColor: 'rgba(0, 0, 0, .3)',
-                shadowBlur: 0,
-                shadowOffsetY: 2,
-                shadowOffsetX: 2,
-            },
-            tooltip: {
-                show: false
+                borderWidth: 1
             },
             areaStyle: {
                 normal: {
@@ -187,7 +131,7 @@ export const chartOption1 = {
                     shadowBlur: 20
                 }
             },
-            data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
-        },
+            data: []
+        }
     ]
 }

src/views/disasterRiskMonitor/cityEmergencyEvent.vue

@@ -43,7 +43,35 @@
       </div>
     </div>
     <Map ref="mapRef" class="map" active-map="vectorgraph" :point-type="pointType" :event-details="eventDetails" />
-    <Chart :option="option1" style="height: 200px" />
+    <div class="box">
+      <div class="box-title">趋势统计</div>
+      <Chart :option="option1" style="height: 200px;" />
+    </div>
+    <div class="box">
+      <div class="box-title">事件列表</div>
+      <van-field
+          v-model="yearLabel"
+          is-link
+          readonly
+          label="年度"
+          placeholder="请选择"
+          @click="showPicker = true"
+      />
+      <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>
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+          :columns="columns"
+          @cancel="showPicker = false"
+          @confirm="onPickerConfirm"
+      />
+    </van-popup>
   </div>
 </template>
 
@@ -57,6 +85,7 @@ import closeImg from "@/assets/images/close.png";
 import {getPointInfoComprehensiveSearch} from "@/api/globalMap";
 import {onClickOutside} from "@vueuse/core";
 import {chartOption1} from "@/views/disasterRiskMonitor/chartOptions";
+import {ElTable, ElTableColumn} from "element-plus";
 
 const router = useRouter();
 const noticeBarState = reactive({
@@ -77,8 +106,10 @@ 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;
@@ -134,6 +165,23 @@ const handleClickItem = item => {
 };
 let pointType = ref([]);
 let eventDetails = ref({});
+let detailsData = ref({
+  dataList: []
+})
+const option1 = ref(chartOption1);
+let showPicker = ref(false);
+let columns = reactive([
+  { text: '2024年', value: '2024' },
+  { text: '2023年', value: '2023' },
+  { text: '2022年', value: '2022' },
+  { text: '2021年', value: '2021' }
+])
+
+const onPickerConfirm = ({selectedOptions}) => {
+  showPicker.value = false;
+  yearLabel.value = selectedOptions[0].text;
+  queryParams.year = selectedOptions[0].value;
+}
 const initData = () => {
   // 通知栏数据
   getActiveEventList().then(res => {
@@ -143,11 +191,16 @@ const initData = () => {
       noticeBarState.event_title = res.data.event_title;
     }
   });
-  // 菜单数据
+  // 趋势统计
+  option1.value.xAxis[0].data = ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-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 }
+  ]
 };
 
-const option1 = ref(chartOption1);
-
 onMounted(() => {
   initData();
 });
@@ -196,4 +249,12 @@ onMounted(() => {
     }
   }
 }
+.box {
+  background-color: #fff;
+  padding: 10px;
+  .box-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+}
 </style>

src/views/disasterRiskMonitor/galeDisaster.vue

@@ -26,7 +26,7 @@
     </div>
     <van-image :src="detailsData.img" style="display: block;" />
     <van-text-ellipsis class="text-box" :content="detailsData.text" rows="3" expand-text="展开" collapse-text="收起" />
-    <el-table :data="detailsData.dataList" table-layout='auto'>
+    <el-table :data="detailsData.dataList" border table-layout='auto'>
       <el-table-column label="地区" prop="area" align="center" />
       <el-table-column prop="level" align="center">
         <template #header>

src/views/disasterRiskMonitor/hydrologicalMonitor/reservoirMonitor.vue

@@ -26,7 +26,7 @@
         <div class="text">{{ '(' + item.num + ')' }}</div>
       </div>
     </div>
-    <el-table :data="detailsData.dataList">
+    <el-table :data="detailsData.dataList" border>
       <el-table-column label="站点" prop="data1" align="center" />
       <el-table-column label="政区" prop="data2" align="center" />
       <el-table-column label="时间" prop="data3" align="center" />

src/views/disasterRiskMonitor/hydrologicalMonitor/riverMonitor.vue

@@ -26,7 +26,7 @@
         <div class="text">{{ '(' + item.num + ')' }}</div>
       </div>
     </div>
-    <el-table :data="detailsData.dataList">
+    <el-table :data="detailsData.dataList" border>
       <el-table-column label="站点" prop="data1" align="center" />
       <el-table-column label="河流" prop="data2" align="center" />
       <el-table-column label="时间" prop="data3" align="center" />

src/views/disasterRiskMonitor/warningSituation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <van-image :src="detailsData.img" />
-    <el-table :data="detailsData.dataList" table-layout='auto'>
+    <el-table :data="detailsData.dataList" border table-layout='auto'>
       <el-table-column prop="type" align="center">
         <template #header>
           <div class="table-line" @click="showTypePicker = true">

src/views/worker/index.vue

@@ -266,7 +266,7 @@ onMounted(() => {
 .container-header {
   width: 100%;
   height: 370px;
-  background: url("@/assets/images/") no-repeat;
+  background: url("@/assets/images/index/banner.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;