城市应急事件

src/views/disasterRiskMonitor/cityEmergencyEvent.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="container">
-    <van-notice-bar
-      v-show="noticeBarState.show"
-      :left-icon="noticeImg"
-      scrollable
-      background="linear-gradient(180deg, #F3F7FF 0%, #FDFEFF 100%)"
-      mode="closeable"
-      :text="noticeBarState.event_title"
-      class="notice"
-      @click="handleNoticeBar"
-    />
+    <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 ref="searchBoxRef" class="search-box">
       <van-search
           v-model="queryParams.keywords"
@@ -44,34 +46,45 @@
         </van-list>
       </div>
     </div>
-    <Map
-      ref="mapRef"
-      class="map"
-      active-map="satellite"
-      :event-details="eventDetails"
-      @onLoadCompleted="initData"
-    />
-    <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"
+    <div class="content" style="margin-top: 0;">
+      <Map
+          ref="mapRef"
+          class="map"
+          active-map="satellite"
+          :event-details="eventDetails"
+          @onLoadCompleted="initData"
       />
-      <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 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
@@ -99,7 +112,8 @@ const router = useRouter();
 const noticeBarState = reactive({
   show: false,
   event_id: "",
-  event_title: ""
+  time: '2024-03-01 12:12:12',
+  event_title: "茂名市茂南区xxx高速路口发生交通事故，今日凌晨三点在xx高速路口，由于突降暴雨路面湿滑，导致路面积水严重，不少路过车辆都减速慢行…"
 });
 const handleNoticeBar = () => {};
 // 搜索
@@ -205,13 +219,13 @@ const onPickerConfirm = ({ selectedOptions }) => {
 };
 const initData = () => {
   const dom = mapRef.value;
-  getActiveEventList().then(res => {
-    if (res.data.event_id != noticeBarState.event_id) {
-      noticeBarState.show = true;
-      noticeBarState.event_id = res.data.event_id;
-      noticeBarState.event_title = res.data.event_title;
-    }
-  });
+  // getActiveEventList().then(res => {
+  //   if (res.data.event_id != noticeBarState.event_id) {
+  //     noticeBarState.show = true;
+  //     noticeBarState.event_id = res.data.event_id;
+  //     noticeBarState.event_title = res.data.event_title;
+  //   }
+  // });
   // 趋势统计
   option1.value.xAxis[0].data = [
     "2024-01",
@@ -374,9 +388,80 @@ const initData = () => {
     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 {
-  margin-bottom: 10px;
+  padding: 16px 16px 10px;
 }
 .search-list {
   position: absolute;
@@ -425,12 +510,78 @@ const initData = () => {
     color: #2c81ff;
   }
 }
-.box {
-  background-color: #fff;
-  padding: 10px;
-  .box-title {
-    font-size: 18px;
+.card {
+  background-color: #ffffff;
+  border: 1px solid #eaedf7;
+  box-shadow: 0 0 4px 0 #4554661a;
+  border-radius: 4px;
+  background-image: linear-gradient(
+          to bottom,
+          #f3f7fd 0%,
+          #f7fafe 20px,
+          #fcfdff 50px,
+          #ffffff 50px,
+          #ffffff 100%
+  );
+  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;
+    .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;
+    }
   }
 }
 </style>