添加地图分区摄像头数量
This commit is contained in:
parent
1f7a02927e
commit
29b20ce55b
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,60 +1,83 @@
|
|||
<template>
|
||||
<div class="list-box">
|
||||
<div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
|
||||
<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">
|
||||
<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 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: () => []
|
||||
default: () => [],
|
||||
},
|
||||
level: {
|
||||
type: Number,
|
||||
default: 1
|
||||
default: 1,
|
||||
},
|
||||
clickData: {
|
||||
type: Object,
|
||||
default: () => { title: '' }
|
||||
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
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const showChildren = (item) => {
|
||||
const showChildren = (item) => {
|
||||
if (!(item.children && item.children.length > 0)) {
|
||||
if (newClickData.value.title !== '') {
|
||||
handleTreeItem(item)
|
||||
|
|
@ -63,36 +86,35 @@ const showChildren = (item) => {
|
|||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.clickData,
|
||||
(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;
|
||||
|
|
@ -109,9 +131,9 @@ const handleTreeItem = (item) => {
|
|||
color: #0058e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parent {
|
||||
.parent {
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0, 135, 225, 0.1);
|
||||
color: #333;
|
||||
|
|
@ -121,17 +143,17 @@ const handleTreeItem = (item) => {
|
|||
background: #0058e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaf {
|
||||
.leaf {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
.select {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,85 +4,109 @@
|
|||
<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([
|
||||
const titleList = ref([
|
||||
{
|
||||
name: '新手指引',
|
||||
className: 'newGuide'
|
||||
className: 'newGuide',
|
||||
},
|
||||
{
|
||||
name: '技术文档',
|
||||
className: 'doc'
|
||||
}
|
||||
])
|
||||
const titleData = ref(titleList.value[0])
|
||||
const clickData = ref({})
|
||||
const treeArray = ref([])
|
||||
const treeArrayCopy = ref([])
|
||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
|
||||
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);
|
||||
const treeClick = (item) => {
|
||||
clickData.value = item
|
||||
console.log('clickData------------>', item)
|
||||
titleData.value = titleList.value[1]
|
||||
}
|
||||
}
|
||||
|
||||
const getTreeData = () => {
|
||||
getDevelopDocTree({}).then((res) => {
|
||||
console.log('res------文档树------>', res);
|
||||
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 || [];
|
||||
treeArray.value = res.data.data || []
|
||||
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
|
||||
}).catch((err) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error(err)
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeName = (item) => {
|
||||
titleData.value = item;
|
||||
const changeName = (item) => {
|
||||
titleData.value = item
|
||||
if (item.name == '新手指引') {
|
||||
clickData.value = {}
|
||||
}
|
||||
if (item.name == '技术文档') {
|
||||
if (!clickData.value.title) {
|
||||
clickData.value = {}
|
||||
treeArray.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: []
|
||||
show:
|
||||
(i === 0 && val.children && val.children.length > 0) ||
|
||||
typeList.includes(val.title)
|
||||
? true
|
||||
: false,
|
||||
children: [],
|
||||
})
|
||||
formData(val.children, obj)
|
||||
treeArray.value.push(obj)
|
||||
|
|
@ -90,45 +114,46 @@ const changeName = (item) => {
|
|||
getFirstData(treeArrayCopy.value[0] || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const formData = (children = [], dataItem) => {
|
||||
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: []
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getFirstData = (firstObj = {}) => {
|
||||
const getFirstData = (firstObj = {}) => {
|
||||
if (firstObj && firstObj.children && firstObj.children.length > 0) {
|
||||
getFirstData(firstObj.children[0])
|
||||
} else {
|
||||
clickData.value = firstObj
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
getTreeData()
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.menu-box {
|
||||
.menu-box {
|
||||
// overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.first-title-text {
|
||||
.first-title-text {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
|
|
@ -139,9 +164,9 @@ onMounted(() => {
|
|||
&:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-menu {
|
||||
.content-menu {
|
||||
width: 1240px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -154,9 +179,9 @@ onMounted(() => {
|
|||
transform: translateX(-50%);
|
||||
top: 0.6rem;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
.left {
|
||||
width: 240px;
|
||||
padding: 20px;
|
||||
height: 600px;
|
||||
|
|
@ -166,52 +191,52 @@ onMounted(() => {
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.right {
|
||||
width: 870px;
|
||||
height: calc(100% - 20px);
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.sidebar {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.content {
|
||||
right: 16rem !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
.img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
.doc {
|
||||
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.newGuide {
|
||||
.newGuide {
|
||||
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.new-menu-box {
|
||||
.new-menu-box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.rela {
|
||||
.rela {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue