|
|
@@ -1,32 +1,68 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <van-search
|
|
|
- v-model="keyword"
|
|
|
- class="common-search"
|
|
|
- :left-icon="searchImg"
|
|
|
- :right-icon="closeImg"
|
|
|
- :clearable="false"
|
|
|
- @search="onSearchKeyword"
|
|
|
- @click-right-icon.stop="onSearchCancel"
|
|
|
- />
|
|
|
+ <div class="box1">
|
|
|
+ <van-search
|
|
|
+ v-model="keyword"
|
|
|
+ placeholder="请输入位置信息"
|
|
|
+ class="common-search"
|
|
|
+ :left-icon="searchImg"
|
|
|
+ show-action
|
|
|
+ @search="onSearchKeyword"
|
|
|
+ >
|
|
|
+ <template #action>
|
|
|
+ <div class="search-btn" @click="onSearchKeyword">搜索</div>
|
|
|
+ </template>
|
|
|
+ </van-search>
|
|
|
+ </div>
|
|
|
<Map ref="mapRef" class="map" active-map="satellite" :point-type="pointType" :event-details="eventDetails" />
|
|
|
- <van-text-ellipsis class="text-box" :content="detailsData.text" rows="3" expand-text="展开" collapse-text="收起" />
|
|
|
- <div class="checked-box">
|
|
|
+ <div class="box2">
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="title"><i class="icon-speaker" />详情信息</div>
|
|
|
+ </div>
|
|
|
+ <van-text-ellipsis class="text-box" :content="detailsData.text" rows="2" expand-text="展开" collapse-text="收起" />
|
|
|
+ </div>
|
|
|
+ <div class="card-box2">
|
|
|
<div
|
|
|
- v-for="(item, index) in tags"
|
|
|
+ v-for="(item, index) in menu1"
|
|
|
:key="index"
|
|
|
- :class="item.checked ? 'tag-box tag-box-active': 'tag-box'"
|
|
|
- @click="handleClickTag(item)"
|
|
|
+ :class="item.checked ? 'card-item checked' : 'card-item'"
|
|
|
+ @click="handleClick(item)"
|
|
|
>
|
|
|
- <div class="tag">
|
|
|
- <i :class="item.icon" />
|
|
|
- <van-icon v-show="!!item.checked" class="checked-icon" name="checked" />
|
|
|
+ <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(' + getImageUrl1('icon5') + ')'
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ <div class="text1" style="color: #2c81ff">
|
|
|
+ {{ showMenu ? "收起" : "展开" }}
|
|
|
</div>
|
|
|
- <div class="text">{{ item.name }}</div>
|
|
|
- <div class="text">{{ '(' + item.num + ')' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-table :data="detailsData.dataList" border>
|
|
|
+ <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" table-layout="auto" header-cell-class-name="common-table-header" :row-class-name="getTableRowClass">
|
|
|
<el-table-column label="站点" prop="data1" align="center" />
|
|
|
<el-table-column label="政区" prop="data2" align="center" />
|
|
|
<el-table-column label="时间" prop="data3" align="center" />
|
|
|
@@ -38,22 +74,36 @@
|
|
|
|
|
|
<script lang="ts" setup name="reservoirMonitor">
|
|
|
import searchImg from "@/assets/images/search.png";
|
|
|
-import closeImg from "@/assets/images/close.png";
|
|
|
import {onMounted, reactive, ref} from "vue";
|
|
|
import {ElTable, ElTableColumn} from "element-plus";
|
|
|
|
|
|
+const getImageUrl1 = name => {
|
|
|
+ return new URL(
|
|
|
+ `../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}.png`,
|
|
|
+ import.meta.url
|
|
|
+ ).href;
|
|
|
+};
|
|
|
+const getImageUrl2 = name => {
|
|
|
+ return new URL(
|
|
|
+ `../../assets/images/disasterRiskMonitor/reservoirMonitor/${name}.png`,
|
|
|
+ import.meta.url
|
|
|
+ ).href;
|
|
|
+};
|
|
|
let pointType = ref([]);
|
|
|
let eventDetails = ref({});
|
|
|
let keyword = ref('');
|
|
|
-let tags = reactive([
|
|
|
- { name: '大型', num: 0, icon: 'icon1', checked: true },
|
|
|
- { name: '中型', num: 0, icon: 'icon2', checked: true },
|
|
|
- { name: '小I型', num: 0, icon: 'icon3', checked: true },
|
|
|
- { name: '小II型', num: 0, icon: 'icon4', checked: false },
|
|
|
- { name: '超汛限', num: 0, icon: 'icon5', checked: false },
|
|
|
- { name: '低旱警', num: 0, icon: 'icon5', checked: false },
|
|
|
- { name: '病险', num: 0, icon: 'icon5', checked: false },
|
|
|
- { name: '在建', num: 0, icon: 'icon5', checked: false },
|
|
|
+let menu1 = ref([
|
|
|
+ { name: '大型', num: 0, icon: getImageUrl1('icon1'), checked: true },
|
|
|
+ { name: '中型', num: 0, icon: getImageUrl1('icon2'), checked: true },
|
|
|
+ { name: '小I型', num: 0, icon: getImageUrl1('icon3'), checked: true },
|
|
|
+ { name: '小II型', num: 0, icon: getImageUrl1('icon4'), checked: false },
|
|
|
+]);
|
|
|
+let showMenu = ref(true);
|
|
|
+let menu2 = ref([
|
|
|
+ { name: '超汛限', num: 0, icon: getImageUrl2('icon1'), checked: false },
|
|
|
+ { name: '低旱警', num: 0, icon: getImageUrl2('icon2'), checked: false },
|
|
|
+ { name: '病险', num: 0, icon: getImageUrl2('icon3'), checked: false },
|
|
|
+ { name: '在建', num: 0, icon: getImageUrl2('icon4'), checked: false }
|
|
|
]);
|
|
|
const detailsData = ref({
|
|
|
text: '',
|
|
|
@@ -69,9 +119,9 @@ const onSearchCancel = () => {
|
|
|
keyword.value = '';
|
|
|
initData();
|
|
|
}
|
|
|
-const handleClickTag = (item) => {
|
|
|
+const handleClick = item => {
|
|
|
item.checked = !item.checked;
|
|
|
-}
|
|
|
+};
|
|
|
const initData = () => {
|
|
|
detailsData.value = {
|
|
|
text: '就诞生了附件两款发动机了解案件来看世界分手机否结束骄傲就开了房间离开家可怜见立刻就杀了对方吉林省大家逻辑了及时了解多方了解逻辑范德萨发给收到发给对方独放个',
|
|
|
@@ -81,7 +131,10 @@ const initData = () => {
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+// table样式
|
|
|
+const getTableRowClass = ({ rowIndex }) => {
|
|
|
+ return rowIndex % 2 === 0 ? "" : "common-table-tr";
|
|
|
+};
|
|
|
onMounted(() => {
|
|
|
initData();
|
|
|
})
|
|
|
@@ -90,9 +143,129 @@ onMounted(() => {
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
+ padding: 16px;
|
|
|
+ .box1 {
|
|
|
+ padding: 13px 9px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .box2 {
|
|
|
+ position: relative;
|
|
|
+ width: 344px;
|
|
|
+ min-height: 114px;
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/riverMonitor/box1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-shadow:0 2px 4px 0 rgba(228, 240, 255, 1);
|
|
|
+ padding: 35px 0 0 0;
|
|
|
+ .title-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 5px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-box2 {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 20px 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.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;
|
|
|
+ }
|
|
|
:deep(.van-field__left-icon) {
|
|
|
-
|
|
|
.van-icon__image {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
@@ -107,6 +280,10 @@ onMounted(() => {
|
|
|
height: 30px;
|
|
|
}
|
|
|
}
|
|
|
+ .search-btn {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2c81ff;
|
|
|
+ }
|
|
|
}
|
|
|
.map {
|
|
|
width: 100%;
|
|
|
@@ -114,7 +291,6 @@ onMounted(() => {
|
|
|
}
|
|
|
.text-box {
|
|
|
padding: 10px;
|
|
|
- background-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
.checked-box {
|
|
|
@@ -161,4 +337,24 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.icon1 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon1.png') no-repeat;
|
|
|
+}
|
|
|
+.icon2 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon2.png') no-repeat;
|
|
|
+}
|
|
|
+.icon3 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon3.png') no-repeat;
|
|
|
+}
|
|
|
+.icon4 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon4.png') no-repeat;
|
|
|
+}
|
|
|
+.icon5 {
|
|
|
+ background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon5.png') no-repeat;
|
|
|
+}
|
|
|
+.icon1, .icon2, .icon3, .icon4, .icon5 {
|
|
|
+ width: 32px;
|
|
|
+ height: 33px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
</style>
|
