163 lines
4.2 KiB
Vue
163 lines
4.2 KiB
Vue
<template>
|
|
<div :class="`layer-list-container ${openLayer? '': 'layer-list-container-close'}`" >
|
|
<div class="title">
|
|
图层资源
|
|
<div class="hidden-button" @click="openLayer = !openLayer">
|
|
<img v-if="openLayer" src="/public/map/top.png" alt="">
|
|
<img v-else src="/public/map/bottom.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="layers-container">
|
|
<p class="cate-name">数据图层</p>
|
|
<div class="case-list">
|
|
<div class="case-item" v-for="(item,index) in dataLayerList" :key="index" >
|
|
<img src="/statistical/prove-icon.png" alt="" />
|
|
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'dataLayer')" >
|
|
<span style="color:#fff;">{{item.name}}</span>
|
|
</a-checkbox>
|
|
</div>
|
|
<div class="case-item">
|
|
<img src="/statistical/prove-icon.png" alt="" />
|
|
<a-checkbox v-model:checked="tiandituLabelOpen" @change="labelChange" >
|
|
<span style="color:#fff;">地图注记</span>
|
|
</a-checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {
|
|
defineEmits,
|
|
ref,
|
|
} from 'vue'
|
|
import { layers } from '@/views/sys/exception/util'
|
|
const emits = defineEmits(['changeLayer','changeLabel'])
|
|
const openLayer = ref(true)
|
|
const tiandituLabelOpen = ref(false)
|
|
const dataLayerList = ref(layers)
|
|
|
|
const layerChange = (item,type)=>{
|
|
let showLayer = dataLayerList.value.filter(itemLayer => itemLayer.checked).map(itemLayer => itemLayer.id)
|
|
emits("changeLayer",showLayer);
|
|
}
|
|
const labelChange = () => {
|
|
emits("changeLabel",tiandituLabelOpen.value);
|
|
}
|
|
</script>
|
|
<style type="less" scoped>
|
|
.layer-list-container-close{
|
|
height: 41px !important;
|
|
}
|
|
.layer-list-container {
|
|
width: 285px;
|
|
height: 600px;
|
|
background: #041b36;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
transition: 0.5s;
|
|
&::before {
|
|
content: '';
|
|
height: 26px;
|
|
width: 26px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
background: url('/map/layer-center-left.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&::after {
|
|
content: '';
|
|
height: 26px;
|
|
width: 26px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
background: url('/map/layer-center-right.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.layers-container{
|
|
width:100%;
|
|
height: calc( 100% - 60px);
|
|
overflow-y:auto;
|
|
}
|
|
.title {
|
|
width: 100%;
|
|
height: 40px;
|
|
background-image: url('/videosupervision/title.png');
|
|
background-size: 100% 100%;
|
|
line-height: 40px;
|
|
text-indent: 18px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
.hidden-button{
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
z-index: 2;
|
|
}
|
|
.switch-button {
|
|
float: right;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
.case-list {
|
|
padding: 10px 24px;
|
|
overflow: auto;
|
|
.case-item {
|
|
cursor:pointer;
|
|
border-bottom: 1px dashed #1d60b4;
|
|
color:#fff;
|
|
padding: 5px 0;
|
|
height:40px;
|
|
overflow:hidden;
|
|
img {
|
|
width: 15px;
|
|
margin-right:12px;
|
|
}
|
|
span {
|
|
color: #7ebbff;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .ant-empty-image{
|
|
height:50px;
|
|
position:relative;
|
|
}
|
|
::v-deep .ant-empty-description{
|
|
color:#fff;
|
|
}
|
|
|
|
.cate-name{
|
|
color:#fff;
|
|
padding:12px;
|
|
font-size:14px;
|
|
margin-bottom:0px;
|
|
background:rgba(0, 0, 0, 0.2)
|
|
}
|
|
|
|
::v-deeep .ant-empty-image img{
|
|
width:50px;
|
|
height:50px;
|
|
}
|
|
|
|
::v-deep .ant-checkbox-wrapper{
|
|
width: calc( 100% - 40px);
|
|
height: 20px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
|