|
@@ -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;
|