地址灾害

src/views/disasterRiskMonitor/geologicalDisaster.vue

@@ -88,6 +88,58 @@
             </div>
           </div>
         </div>
+        <div class="card-box2">
+          <div v-for="(item, index) in menu1" :key="index" :class="item.checked ? 'card-item checked' : 'card-item'" @click="handleClick(item)">
+            <i class="icon" :style="{ backgroundImage: 'url('+ item.icon +')'}" />
+            <div class="text1">{{ item.name }}</div>
+            <div>{{ item.num }}</div>
+          </div>
+          <div class="card-item" @click="showMenu = !showMenu">
+            <i class="icon" :style="{ backgroundImage: 'url('+ getImageUrl('icon5.png') +')'}" />
+            <div class="text1" style="color: #2C81FF">{{ showMenu ? '收起' : '展开' }}</div>
+          </div>
+        </div>
+        <div v-show="showMenu" class="card-box2">
+          <div v-for="(item, index) in menu2" :key="index" :class="item.checked ? 'card-item checked' : 'card-item'" @click="handleClick(item)">
+            <i class="icon" :style="{ backgroundImage: 'url('+ item.icon +')'}" />
+            <div class="text1">{{ item.name }}</div>
+            <div>{{ item.num }}</div>
+          </div>
+        </div>
+        <el-table :data="detailsData.dataList" border table-layout='auto' header-cell-class-name="common-table-header" :row-class-name="getTableRowClass" class="common-table">
+          <el-table-column label="县区" prop="area" align="center">
+            <template #header>
+              <div class="table-line" @click="showPicker = true">
+                <div>{{ labelData.area ? labelData.area : '县区' }}</div>
+                <i class="icon-down" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="镇街" prop="area" align="center">
+            <template #header>
+              <div class="table-line" @click="showPicker2 = true">
+                <div>{{ labelData.country ? labelData.country : '镇街' }}</div>
+                <i class="icon-down" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="隐患点名称" prop="address" align="center" width="160px" />
+          <el-table-column label="隐患类型" prop="speed" align="center" />
+        </el-table>
+        <van-popup v-model:show="showPicker" round position="bottom">
+          <van-picker
+              :columns="columns"
+              @cancel="showPicker = false"
+              @confirm="onSelectLevelConfirm"
+          />
+        </van-popup>
+        <van-popup v-model:show="showPicker2" round position="bottom">
+          <van-picker
+              :columns="columns2"
+              @cancel="showPicker2 = false"
+              @confirm="onSelectLevelConfirm2"
+          />
+        </van-popup>
       </div>
     </div>
   </div>
@@ -96,14 +148,64 @@
 <script lang="ts" setup name="geologicalDisaster">
 import searchImg from "@/assets/images/search.png";
 import {onMounted, reactive, ref} from "vue";
+import {ElTable, ElTableColumn} from "element-plus";
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}`, import.meta.url).href;
+};
 const queryParams = reactive({
   keyword: '',
   page: 0,
   pageSize: 10
 });
 let mapRef = ref();
+let menu1 = ref([
+  { name: '特大型', icon: getImageUrl('icon1.png'), num: 0, checked: true },
+  { name: '大型', icon: getImageUrl('icon2.png'), num: 0, checked: true },
+  { name: '中型', icon: getImageUrl('icon3.png'), num: 0, checked: true },
+  { name: '小型', icon: getImageUrl('icon4.png'), num: 0, checked: true },
+]);
+let showMenu = ref(true);
+let menu2 = ref([
+  { name: '地面沉降', icon: getImageUrl('icon6.png'), num: 0, checked: true },
+  { name: '不稳定斜坡', icon: getImageUrl('icon7.png'), num: 0, checked: true },
+  { name: '地裂缝', icon: getImageUrl('icon8.png'), num: 0, checked: true },
+  { name: '地面塌陷', icon: getImageUrl('icon9.png'), num: 0, checked: true },
+  { name: '泥石流', icon: getImageUrl('icon10.png'), num: 0, checked: true },
+  { name: '崩塌', icon: getImageUrl('icon11.png'), num: 0, checked: true },
+  { name: '滑坡', icon: getImageUrl('icon12.png'), num: 0, checked: true }
+]);
 let pointData = ref([]);
 let eventDetails = ref({});
+const labelData = reactive({
+  area: '',
+  country: ''
+})
+const columns = ref([
+  { text: '全部', value: '' },
+  { text: '滨海新区', value: '0' },
+  { text: '信宜', value: '1' },
+  { text: '电白', value: '2' },
+  { text: '高州', value: '3' }
+])
+const columns2 = ref([
+  { text: '全部', value: '' },
+  { text: '滨海新区2', value: '0' },
+  { text: '信宜2', value: '1' },
+  { text: '电白2', value: '2' },
+  { text: '高州2', value: '3' }
+])
+let showPicker = ref(false);
+let showPicker2 = ref(false);
+const queryParams2 = reactive({
+  area: '',
+  country: ''
+});
+let detailsData = ref({
+  dataList: []
+})
+const handleClick = (item) => {
+  item.checked = !item.checked;
+};
 const getList = () => {
 
 }
@@ -124,8 +226,17 @@ const onSearchCancel = () => {
   // 刷新列表数据
   getList();
 }
-const getImageUrl = (name) => {
-  return new URL(`../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}`, import.meta.url).href;
+const onSelectLevelConfirm  = ({selectedOptions}) => {
+  showPicker.value = false;
+  labelData.area = selectedOptions[0].text === '全部' ? '县区' :selectedOptions[0].text;
+  queryParams2.area = selectedOptions[0].value;
+  initData();
+};
+const onSelectLevelConfirm2  = ({selectedOptions}) => {
+  showPicker2.value = false;
+  labelData.country = selectedOptions[0].text === '全部' ? '镇街' :selectedOptions[0].text;
+  queryParams2.country = selectedOptions[0].value;
+  initData();
 };
 let iconList = reactive({
   '1': {
@@ -177,6 +288,18 @@ const initData = () => {
   });
   dom.addMarker(data);
 }
+const getTableData = () => {
+  detailsData.value.dataList = [
+    { area: '电白', type: '滨海新区', address: '但是看了放进塑料袋发艰苦拉萨的飞机快乐设计逻辑地', speed: '12.1' },
+  ]
+}
+// table样式
+const getTableRowClass = ({rowIndex}) => {
+  return rowIndex % 2 === 0 ? '' : 'common-table-tr';
+}
+onMounted(() => {
+  getTableData()
+})
 </script>
 
 <style scoped lang="scss">
@@ -322,39 +445,116 @@ const initData = () => {
         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;
-        .text1 {
-          font-size: 14px;
-          color: #414F64;
-          line-height: 26px;
-        }
-        .text-box {
+        .card-item {
+          width: 101px;
+          height: 104px;
+          background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card3.png") no-repeat;
+          background-size: 100% 100%;
           display: flex;
-          align-items: baseline;
-          .text2 {
-            font-size: 24px;
-            color: #FF2F3C;
+          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%;
           }
-          .text3 {
-            font-size: 12px;
+          .text1 {
+            font-size: 14px;
             color: #414F64;
             line-height: 26px;
-            margin-left: 5px;
+          }
+          .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-box2 {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0 10px;
+        .card-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          font-size: 12px;
+          color: #7F8B9F;
+          margin-right: 14px;
+          &:nth-child(1n) {
+            width: 48px;
+          }
+          &:nth-child(2n) {
+            width: 60px;
+          }
+          &:nth-child(3n) {
+            width: 48px;
+          }
+          &:nth-child(4n) {
+            width: 60px;
+          }
+          &:nth-child(5n) {
+            width: 48px;
+            margin-right: 0;
+          }
+          .icon {
+            display: inline-block;
+            width: 32px;
+            height: 32px;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+          }
+          .text1 {
+            margin-top: 6px;
+          }
+        }
+        .checked {
+          color: #2C81FF;
+          .icon {
+            position: relative;
+            &::before {
+              content: '';
+              width: 10px;
+              height: 11px;
+              background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/checked.png") no-repeat;
+              background-size: 100% 100%;
+              position: absolute;
+              top: 0;
+              right: 0;
+            }
           }
         }
       }
     }
   }
+  .table-line {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    .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%;
+    }
+  }
 }
 .common-search {
   border: 1px solid #DCE0EE;