地图添加
This commit is contained in:
parent
aea65eb40c
commit
9d9a3a2278
|
|
@ -1605,8 +1605,9 @@
|
|||
}
|
||||
.top-content-father {
|
||||
width: 10.87rem;
|
||||
padding-left: 0.2rem;
|
||||
// padding-left: 0.2rem;
|
||||
// margin-bottom: .2rem;
|
||||
padding: 0.16rem;
|
||||
background: #f3f5f9;
|
||||
.top-content-son {
|
||||
background: #fff;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<div class="map-contain">
|
||||
<video-surveillance></video-surveillance>
|
||||
</div>
|
||||
<!-- 功能行 -->
|
||||
<div class="infrastructrue-content">
|
||||
<!-- 表格数据统计 -->
|
||||
|
|
@ -85,6 +89,7 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||
const tabList = ref([
|
||||
{
|
||||
title: '设施类型',
|
||||
|
|
@ -298,13 +303,15 @@
|
|||
</script>
|
||||
<style lang="less" scoped>
|
||||
.infrastructrueBox {
|
||||
width: 10.87rem;
|
||||
padding: 0.2rem;
|
||||
background: #f3f5f9;
|
||||
// background: #f3f5f9;
|
||||
background: #ffffff;
|
||||
/* padding: 0.16rem; */
|
||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
.infrastructrue-tab {
|
||||
background: #ffffff;
|
||||
padding: 0.2rem;
|
||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
// background: #ffffff;
|
||||
// padding: 0.2rem;
|
||||
// border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 0.24rem;
|
||||
|
|
@ -423,5 +430,11 @@
|
|||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
.map-contain {
|
||||
// width: 9.46rem;
|
||||
height: 4.1rem;
|
||||
margin-left: 0.16rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="ucs-leaflet-map">
|
||||
<div id="contain">
|
||||
<div class="map-box">
|
||||
<div :id="mapId" class="normal-map-content">
|
||||
|
|
@ -8,7 +8,32 @@
|
|||
</div>
|
||||
|
||||
<div class="searchPoint">
|
||||
<el-autocomplete
|
||||
<a-auto-complete
|
||||
v-model:value="value"
|
||||
class="certain-category-search"
|
||||
dropdown-class-name="certain-category-search-dropdown"
|
||||
:dropdown-match-select-width="500"
|
||||
style="width: 250px"
|
||||
:options="dataSource"
|
||||
>
|
||||
<template #option="item">
|
||||
<template>
|
||||
<span>
|
||||
{{ item.value }}
|
||||
<a
|
||||
style="float: right"
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<a-input-search placeholder="搜索地点" size="large"></a-input-search>
|
||||
</a-auto-complete>
|
||||
<!-- <el-autocomplete
|
||||
class="inline-input"
|
||||
prefix-icon="Search"
|
||||
v-model="state"
|
||||
|
|
@ -28,93 +53,26 @@
|
|||
</span>
|
||||
</template>
|
||||
<template v-slot:append>搜索</template>
|
||||
</el-autocomplete>
|
||||
</el-autocomplete> -->
|
||||
</div>
|
||||
|
||||
<aside class="tag-box">
|
||||
<div class="refresh" @click="refresh">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
</div>
|
||||
<el-tabs type="border-card" class="border-card">
|
||||
<el-tab-pane label="视频标签">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="Search"
|
||||
v-model="labelSearch"
|
||||
@input="searchLabel"
|
||||
></el-input>
|
||||
<el-checkbox-group v-model="checkboxGroup">
|
||||
<el-checkbox-button
|
||||
v-for="item in tabList"
|
||||
:label="item.labelName"
|
||||
:key="item.id"
|
||||
@change="tabChange(item)"
|
||||
>
|
||||
{{ item.labelName }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="视频列表">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="Search"
|
||||
v-model="labelSearch"
|
||||
@input="searchCameraTree"
|
||||
></el-input>
|
||||
<!-- <el-radio-group v-model="checkStatus">
|
||||
<el-radio :label="2">全部</el-radio>
|
||||
<el-radio :label="1">正常</el-radio>
|
||||
<el-radio :label="0">异常</el-radio>
|
||||
</el-radio-group>
|
||||
<span class="reset-button" @click="reset">重置</span> -->
|
||||
<el-tree
|
||||
id="tree"
|
||||
:data="camreaTree"
|
||||
:props="{ label: 'name', children: 'children', isLeaf: 'leaf' }"
|
||||
:load="loadNode"
|
||||
node-key="id"
|
||||
@node-click="treeCameraClick"
|
||||
empty-text="暂无数据"
|
||||
:filter-node-method="filterNode"
|
||||
lazy
|
||||
>
|
||||
<!-- 是否离线checkStatus -->
|
||||
<!-- <span
|
||||
:style="{
|
||||
backgroundColor: data?.checkStatus == 0 ? '#ccc' : '',
|
||||
}"
|
||||
slot-scope="{ node, data }"
|
||||
class="custom-tree-node"
|
||||
>
|
||||
<span>
|
||||
{{ data?.checkStatus == 0 ? `(离线)` : '' }}{{ data.name }}
|
||||
</span>
|
||||
</span> -->
|
||||
</el-tree>
|
||||
<!-- <el-tree
|
||||
v-show="!camreaTreeIsShow"
|
||||
ref="tree"
|
||||
:data="camreaTreeSingle"
|
||||
:props="{ label: 'channelName', children: 'children' }"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="treeCameraClick"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
backgroundColor: data?.checkStatus == 0 ? '#ccc' : '',
|
||||
}"
|
||||
slot-scope="{ node, data }"
|
||||
class="custom-tree-node"
|
||||
>
|
||||
<span>
|
||||
{{ data?.checkStatus == 0 ? `(离线)` : ''
|
||||
}}{{ data?.channelName }}
|
||||
</span>
|
||||
</span>
|
||||
</el-tree> -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</aside>
|
||||
<svg
|
||||
t="1656319660834"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1691"
|
||||
width="0.48rem"
|
||||
height="0.48rem"
|
||||
@click="circleMode()"
|
||||
>
|
||||
<path
|
||||
d="M736.21333333 638.08l69.76-54.08c5.22666667-4.05333333 8-10.45333333 7.46666667-17.06666667-0.53333333-6.61333333-4.37333333-12.48-10.24-15.57333333L450.02666666 361.38666666c-6.82666667-3.62666667-15.04-2.98666667-21.12 1.70666667-6.08 4.69333333-8.85333333 12.58666667-7.04 20.05333333l95.57333334 389.54666667c1.6 6.4 6.29333333 11.62666667 12.48 13.76 6.18666667 2.13333333 13.12 1.06666667 18.34666666-2.98666667l69.86666667-54.08L769.06666666 924.37333333c3.2 4.05333333 7.78666667 6.72 12.90666667 7.36 0.85333333 0.10666667 1.6 0.10666667 2.45333333 0.10666667 4.26666667 0 8.53333333-1.38666667 11.94666667-4.05333334l87.25333333-67.52c8.53333333-6.61333333 10.02666667-18.88 3.52-27.30666666L736.21333333 638.08zM178.24 282.02666666l-31.25333334-21.01333333c-14.61333333 21.76-27.30666667 44.90666667-37.86666666 68.90666667l34.56 15.14666666c9.6-21.86666667 21.22666667-43.09333333 34.56-63.04zM549.54666666 103.89333333l3.2-37.54666667c-26.02666667-2.24-52.69333333-2.13333333-78.50666666 0.21333334l3.41333333 37.54666666c23.57333333-2.13333333 48-2.24 71.89333333-0.21333333zM120.74666666 413.22666666l-36.69333333-8.74666666c-6.08 25.38666667-9.92 51.52-11.30666667 77.76l37.65333334 2.13333333c1.38666667-24 4.8-47.89333333 10.34666666-71.14666667zM112.64 556.26666666l-37.44 4.48c3.09333333 26.02666667 8.64 51.94666667 16.32 76.90666667l36.05333333-11.09333333c-7.04-22.82666667-12.05333333-46.50666667-14.93333333-70.29333334zM919.36 327.46666666c-10.66666667-23.89333333-23.46666667-46.93333333-38.29333334-68.58666666l-31.14666666 21.22666666c13.44 19.84 25.28 40.96 34.98666666 62.82666667l34.45333334-15.46666667zM831.36 197.97333333c-18.34666667-18.77333333-38.4-35.94666667-59.62666667-51.09333333L749.86666666 177.6c19.52 13.86666667 37.86666667 29.65333333 54.61333334 46.82666666l26.88-26.45333333zM703.89333333 107.09333333c-23.68-11.2-48.53333333-20.37333333-73.81333333-27.09333333l-9.81333334 36.37333333c23.14666667 6.18666667 45.86666667 14.61333333 67.52 24.85333333l16.10666667-34.13333333zM277.76 178.98666666l-22.08-30.50666666c-21.22666667 15.36-41.17333333 32.64-59.41333334 51.52l27.09333334 26.13333333c16.74666667-17.28 35.09333333-33.06666667 54.4-47.14666667zM348.90666666 918.08c24.32 9.81333333 49.6 17.49333333 75.2 22.82666666l7.68-36.90666666c-23.46666667-4.90666667-46.61333333-11.94666667-68.8-20.90666667l-14.08 34.98666667zM503.25333333 912.42666666l-1.06666667 37.65333334c4.16 0.10666667 8.42666667 0.21333333 12.58666667 0.21333333 21.97333333 0 44.16-1.6 65.81333333-4.90666667l-5.54666666-37.22666666c-23.57333333 3.52-47.89333333 4.90666667-71.78666667 4.26666666zM944.85333333 401.81333333l-36.58666667 8.96c5.65333333 23.14666667 9.28 47.14666667 10.77333334 71.04l37.65333333-2.34666667c-1.70666667-26.13333333-5.65333333-52.26666667-11.84-77.65333333zM396.8 80.64c-25.28 6.93333333-50.02666667 16.21333333-73.6 27.62666666l16.32 33.92c21.54666667-10.34666667 44.26666667-18.88 67.30666666-25.17333333L396.8 80.64zM121.17333333 710.4c11.94666667 23.25333333 26.13333333 45.54666667 42.13333333 66.34666666l29.86666667-22.93333333c-14.61333333-18.98666667-27.52-39.46666667-38.50666667-60.69333333L121.17333333 710.4zM216.42666666 834.66666666c19.30666667 17.70666667 40.42666667 33.70666667 62.50666667 47.68l20.05333333-31.89333333c-20.26666667-12.8-39.46666667-27.41333333-57.17333333-43.62666667l-25.38666667 27.84z"
|
||||
p-id="1692"
|
||||
fill="#1296db"
|
||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<video-play
|
||||
v-if="openVideo"
|
||||
|
|
@ -146,9 +104,7 @@
|
|||
return {
|
||||
hiMap: new HieimpMap(), // 地图全局对象
|
||||
mapId: 'map-single', // 地图容器的id
|
||||
|
||||
cameraAllData: [],
|
||||
|
||||
checkboxGroup: [],
|
||||
tabList: [],
|
||||
state: '',
|
||||
|
|
@ -161,6 +117,7 @@
|
|||
timer: null,
|
||||
openVideo: false,
|
||||
channelCode: [],
|
||||
circleModeFlag: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -209,6 +166,18 @@
|
|||
// })
|
||||
},
|
||||
methods: {
|
||||
circleMode() {
|
||||
// 转换圈选模式
|
||||
this.circleModeFlag = !this.circleModeFlag
|
||||
if(this.circleModeFlag){
|
||||
// 打开圈选模式
|
||||
|
||||
}else {
|
||||
// 关闭圈选模式，清空圈选内容，重新上图
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
getCameraAllPage(page) {
|
||||
let params = {
|
||||
page: page,
|
||||
|
|
@ -327,8 +296,8 @@
|
|||
if (res.data.data.length == 0) {
|
||||
const params = {
|
||||
parentId: node.data.id,
|
||||
checkStatus:'1'
|
||||
// this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
|
||||
checkStatus: '1',
|
||||
// this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
|
||||
}
|
||||
getCameraByParentId(params).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
|
|
@ -444,8 +413,8 @@
|
|||
<style scoped lang="less">
|
||||
.map-box {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: 624px;
|
||||
height: 100%;
|
||||
// height: 624px;
|
||||
position: absolute;
|
||||
.normal-map-content {
|
||||
width: 100%;
|
||||
|
|
@ -453,14 +422,14 @@
|
|||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
#contain {
|
||||
.searchPoint {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
left: 100px;
|
||||
top: 0.1rem;
|
||||
right: 0.1rem;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
// margin-top: 20px;
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #629ab8;
|
||||
border-radius: 20px;
|
||||
|
|
@ -642,3 +611,20 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.ucs-leaflet-map {
|
||||
.iclient-leaflet-logo {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-attribution {
|
||||
display: none;
|
||||
}
|
||||
svg {
|
||||
position: absolute;
|
||||
bottom: 0.1rem;
|
||||
right: 0.1rem;
|
||||
z-index: 1001;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue