添加地图分区摄像头数量

This commit is contained in:
wuhongjian 2022-07-14 17:02:42 +08:00
parent 1f7a02927e
commit 29b20ce55b
3 changed files with 300 additions and 253 deletions

View File

@ -2,14 +2,14 @@
* @Author: hisense.wuhongjian
* @Date: 2021-10-13 09:30:54
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2021-10-13 15:04:58
* @LastEditTime: 2022-07-14 16:28:27
* @Description: 点位-位置匹配
*/
const DIVISION = {
qingdao: [
{
districtName: '城阳区',
name: '城阳区',
name: '城阳区(约1.5万)',
districtCOde: '',
latLng: {
lat: 36.31,
@ -18,7 +18,7 @@ const DIVISION = {
},
{
districtName: '李沧区',
name: '李沧区',
name: '李沧区(约0.6万)',
districtCOde: '',
latLng: {
lat: 36.17,
@ -27,7 +27,7 @@ const DIVISION = {
},
{
districtName: '市北区',
name: '市北区',
name: '市北区(约0.7万)',
districtCOde: '',
latLng: {
lat: 36.1,
@ -36,7 +36,7 @@ const DIVISION = {
},
{
districtName: '市南区',
name: '市南区',
name: '市南区(约0.4万)',
districtCOde: '',
latLng: {
lat: 36.06,
@ -45,7 +45,7 @@ const DIVISION = {
},
{
districtName: '崂山区',
name: '崂山区',
name: '崂山区(约2.0万)',
districtCOde: '',
latLng: {
lat: 36.11,
@ -54,7 +54,7 @@ const DIVISION = {
},
{
districtName: '即墨区',
name: '即墨区',
name: '即墨区(约1.4万)',
districtCOde: '',
latLng: {
lat: 36.39,
@ -63,7 +63,7 @@ const DIVISION = {
},
{
districtName: '胶州市',
name: '胶州市',
name: '胶州市(约1.5万)',
districtCOde: '',
latLng: {
lat: 36.27,
@ -72,7 +72,7 @@ const DIVISION = {
},
{
districtName: '平度市',
name: '平度市',
name: '平度市(约1.6万)',
districtCOde: '',
latLng: {
lat: 36.78,
@ -81,7 +81,7 @@ const DIVISION = {
},
{
districtName: '莱西市',
name: '莱西市',
name: '莱西市(约1.0万)',
districtCOde: '',
latLng: {
lat: 36.89,
@ -90,7 +90,7 @@ const DIVISION = {
},
{
districtName: '西海岸新区',
name: '西海岸新区',
name: '西海岸新区(约4.1万)',
districtCOde: '',
latLng: {
lat: 35.99,

View File

@ -1,98 +1,120 @@
<template>
<div class="list-box">
<div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
<a-tooltip placement="top" :title="item.title" arrow-point-at-center>
<div :class="[newClickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
class="list-text">
{{ item.title }}
<DownOutlined v-show="!item.show && !judgeLeaf(item)" />
<UpOutlined v-show="item.show && !judgeLeaf(item)" />
</div>
</a-tooltip>
<div style="margin-left:10px" v-if="!judgeLeaf(item) && item.show">
<abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
:level="newLevel + 1">
</abilityDocTree>
</div>
<div class="list-box">
<div
class="list-item"
v-for="(item, i) in newDataList"
:key="i"
@click.stop="showChildren(item)"
>
<a-tooltip placement="top" :title="item.title" arrow-point-at-center>
<div
:class="[
newClickData.title === item.title ? 'select' : '',
level === 1 ? 'parent' : '',
judgeLeaf(item) ? 'leaf' : '',
]"
class="list-text"
>
{{ item.title }}
<DownOutlined v-show="!item.show && !judgeLeaf(item)" />
<UpOutlined v-show="item.show && !judgeLeaf(item)" />
</div>
</a-tooltip>
<div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
<abilityDocTree
:dataList="item.children"
@tree-click="handleTreeItem"
:clickData="newClickData"
:level="newLevel + 1"
></abilityDocTree>
</div>
</div>
</div>
</template>
<script setup>
import { defineComponent, onMounted, ref, watch, defineProps, nextTick } from 'vue';
import { getDevelopDocTree } from '@/api/home'
import { message } from 'ant-design-vue'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
import {
defineComponent,
onMounted,
ref,
watch,
defineProps,
nextTick,
} from 'vue'
import { getDevelopDocTree } from '@/api/home'
import { message } from 'ant-design-vue'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
const props = defineProps({
const props = defineProps({
dataList: {
type: Array,
default: () => []
type: Array,
default: () => [],
},
level: {
type: Number,
default: 1
type: Number,
default: 1,
},
clickData: {
type: Object,
default: () => { title: '' }
type: Object,
default: () => {
title: ''
},
},
})
})
//
const newDataList = ref(props.dataList)
//
const newLevel = ref(props.level)
//
const newDataList = ref(props.dataList)
//
const newLevel = ref(props.level)
const newClickData = ref(props.clickData)
const newClickData = ref(props.clickData)
//
const judgeLeaf = (item) => {
//
const judgeLeaf = (item) => {
if (item.children && item.children.length > 0) {
return false
return false
} else {
return true
return true
}
}
}
const showChildren = (item) => {
const showChildren = (item) => {
if (!(item.children && item.children.length > 0)) {
if (newClickData.value.title !== '') {
handleTreeItem(item)
} else {
handleTreeItem({ title: '' })
}
if (newClickData.value.title !== '') {
handleTreeItem(item)
} else {
handleTreeItem({ title: '' })
}
}
if (item.children && item.children.length > 0) {
item.show = !item.show;
item.show = !item.show
}
}
}
watch(
watch(
() => props.dataList,
(val) => {
if (val) {
newDataList.value = val
}
if (val) {
newDataList.value = val
}
}
)
)
watch(
watch(
() => props.clickData,
(val) => {
if (val) {
newClickData.value = val
}
if (val) {
newClickData.value = val
}
}
)
const emit = defineEmits(['treeClick'])
const handleTreeItem = (item) => {
emit('tree-click', item);
}
)
const emit = defineEmits(['treeClick'])
const handleTreeItem = (item) => {
emit('tree-click', item)
}
</script>
<style lang="less" scoped>
.list-text {
.list-text {
font-size: 16px;
color: #333;
padding: 10px 0;
@ -106,32 +128,32 @@ const handleTreeItem = (item) => {
text-overflow: ellipsis;
&:hover {
color: #0058e1;
cursor: pointer;
color: #0058e1;
cursor: pointer;
}
}
}
.parent {
.parent {
margin-bottom: 10px;
background: rgba(0, 135, 225, 0.1);
color: #333;
&:hover {
color: #fff;
background: #0058e1;
cursor: pointer;
color: #fff;
background: #0058e1;
cursor: pointer;
}
}
}
.leaf {
.leaf {
font-size: 14px;
color: #555;
cursor: pointer;
}
}
.select {
.select {
color: #0058e1;
font-weight: 600;
cursor: pointer;
}
}
</style>

View File

@ -4,214 +4,239 @@
<div id="container" class="content-menu">
<div class="rela">
<div class="left">
<div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
<div
class="first-title-text"
v-for="(data, i) in titleList"
:key="i"
@click="changeName(data)"
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
>
<div class="img" :class="data.className"></div>
{{ data.name }}
</div>
<abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
<abilityDocTree
:dataList="treeArray"
@treeClick="treeClick"
:clickData="clickData"
></abilityDocTree>
</div>
<div class="right">
<div class="new-menu-box" style="height:100%" v-if="titleData.name === '新手指引'">
<div
class="new-menu-box"
style="height: 100%"
v-if="titleData.name === '新手指引'"
>
<!-- 新手指引 -->
<a-empty description="新手指引" />
</div>
<div v-else style="height:100%">
<iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
:src="clickData.doc"></iframe>
<div v-else style="height: 100%">
<iframe
name="iframeName"
width="1000"
height="100%"
id="iframeId"
:frameborder="0"
:src="clickData.doc"
></iframe>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import abilityDocTree from './components/abilityDocTree'
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { Empty, message } from 'ant-design-vue'
import { getDevelopDocTree } from '@/api/home'
import flatten from '@turf/flatten'
import HomeHeader from '@/views/home/components/header'
import abilityDocTree from './components/abilityDocTree'
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { Empty, message } from 'ant-design-vue'
import { getDevelopDocTree } from '@/api/home'
import flatten from '@turf/flatten'
const titleList = ref([
{
name: '新手指引',
className: 'newGuide'
},
{
name: '技术文档',
className: 'doc'
const titleList = ref([
{
name: '新手指引',
className: 'newGuide',
},
{
name: '技术文档',
className: 'doc',
},
])
const titleData = ref(titleList.value[0])
const clickData = ref({})
const treeArray = ref([])
const treeArrayCopy = ref([])
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
const treeClick = (item) => {
clickData.value = item
console.log('clickData------------>', item)
titleData.value = titleList.value[1]
}
])
const titleData = ref(titleList.value[0])
const clickData = ref({})
const treeArray = ref([])
const treeArrayCopy = ref([])
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
const treeClick = (item) => {
clickData.value = item;
console.log('clickData------------>', item);
titleData.value = titleList.value[1]
}
const getTreeData = () => {
getDevelopDocTree({}).then((res) => {
console.log('res------文档树------>', res);
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
treeArray.value = res.data.data || [];
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
}).catch((err) => {
message.error(err)
});
}
const changeName = (item) => {
titleData.value = item;
if (item.name == '新手指引') {
clickData.value = {}
}
if (item.name == '技术文档') {
if (!clickData.value.title) {
clickData.value = {}
treeArray.value = [];
treeArrayCopy.value.map((val, i) => {
let obj = Object.assign({}, val, {
title: val.title,
show: (i === 0 && val.children && val.children.length > 0) || typeList.includes(val.title) ? true : false,
children: []
})
formData(val.children, obj)
treeArray.value.push(obj)
const getTreeData = () => {
getDevelopDocTree({})
.then((res) => {
console.log('res------文档树------>', res)
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
treeArray.value = res.data.data || []
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
})
getFirstData(treeArrayCopy.value[0] || {})
.catch((err) => {
message.error(err)
})
}
const changeName = (item) => {
titleData.value = item
if (item.name == '新手指引') {
clickData.value = {}
}
if (item.name == '技术文档') {
if (!clickData.value.title) {
clickData.value = {}
treeArray.value = []
treeArrayCopy.value.map((val, i) => {
let obj = Object.assign({}, val, {
title: val.title,
show:
(i === 0 && val.children && val.children.length > 0) ||
typeList.includes(val.title)
? true
: false,
children: [],
})
formData(val.children, obj)
treeArray.value.push(obj)
})
getFirstData(treeArrayCopy.value[0] || {})
}
}
}
}
const formData = (children = [], dataItem) => {
children.map((item, index) => {
let _obj = Object.assign({}, item, {
title: item.title,
show: (index === 0 && item.children && item.children.length > 0) || typeList.includes(item.title) ? true : false,
children: []
const formData = (children = [], dataItem) => {
children.map((item, index) => {
let _obj = Object.assign({}, item, {
title: item.title,
show:
(index === 0 && item.children && item.children.length > 0) ||
typeList.includes(item.title)
? true
: false,
children: [],
})
if (item.children && item.children.length > 0) {
formData(item.children, _obj)
}
dataItem.children.push(_obj)
})
if (item.children && item.children.length > 0) {
formData(item.children, _obj)
}
dataItem.children.push(_obj)
})
}
const getFirstData = (firstObj = {}) => {
if (firstObj && firstObj.children && firstObj.children.length > 0) {
getFirstData(firstObj.children[0])
} else {
clickData.value = firstObj
}
}
onMounted(() => {
getTreeData()
})
const getFirstData = (firstObj = {}) => {
if (firstObj && firstObj.children && firstObj.children.length > 0) {
getFirstData(firstObj.children[0])
} else {
clickData.value = firstObj
}
}
onMounted(() => {
getTreeData()
})
</script>
<style scoped lang="less">
.menu-box {
// overflow: hidden;
height: 100%;
}
.first-title-text {
cursor: pointer;
font-size: 18px;
color: #333;
padding-bottom: 10px;
display: flex;
align-items: center;
&:hover {
color: #0058e1;
.menu-box {
// overflow: hidden;
height: 100%;
}
}
.content-menu {
width: 1240px;
display: flex;
justify-content: flex-start;
margin: 0 auto;
margin-top: 74px;
box-sizing: border-box;
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%);
top: 0.6rem;
top: 0;
}
.first-title-text {
cursor: pointer;
font-size: 18px;
color: #333;
padding-bottom: 10px;
display: flex;
align-items: center;
.left {
width: 240px;
padding: 20px;
height: 600px;
margin-right: 20px;
background: rgba(244, 245, 248, 0.8);
overflow-y: scroll;
position: absolute;
top: 10px;
left: 0;
}
&:hover {
color: #0058e1;
}
}
.right {
width: 870px;
height: calc(100% - 20px);
.content-menu {
width: 1240px;
display: flex;
justify-content: flex-start;
margin: 0 auto;
margin-top: 74px;
box-sizing: border-box;
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%);
top: 0.6rem;
top: 0;
}
position: absolute;
top: 10px;
left: 260px;
}
.left {
width: 240px;
padding: 20px;
height: 600px;
margin-right: 20px;
background: rgba(244, 245, 248, 0.8);
overflow-y: scroll;
position: absolute;
top: 10px;
left: 0;
}
.sidebar {
right: 0 !important;
}
.right {
width: 870px;
height: calc(100% - 20px);
.content {
right: 16rem !important;
left: 0 !important;
}
position: absolute;
top: 10px;
left: 260px;
}
.img {
height: 20px;
width: 20px;
margin-right: 8px;
}
.sidebar {
right: 0 !important;
}
.doc {
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
background-size: 100%;
}
.content {
right: 16rem !important;
left: 0 !important;
}
.newGuide {
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
background-size: 100%;
}
.img {
height: 20px;
width: 20px;
margin-right: 8px;
}
.new-menu-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.doc {
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
background-size: 100%;
}
.rela {
width: 100%;
height: 100%;
position: relative;
}
.newGuide {
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
background-size: 100%;
}
.new-menu-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.rela {
width: 100%;
height: 100%;
position: relative;
}
</style>