wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

添加地图分区摄像头数量

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/supermap/config/coordinateConfig.js
View File

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

110
front/src/views/instructionManual/components/abilityDocTree.vue
View File

@ -1,60 +1,83 @@
<template> <template>
<div class="list-box"> <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> <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
<div :class="[newClickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']" <div
class="list-text"> :class="[
newClickData.title === item.title ? 'select' : '',
level === 1 ? 'parent' : '',
judgeLeaf(item) ? 'leaf' : '',
]"
class="list-text"
>
{{ item.title }} {{ item.title }}
<DownOutlined v-show="!item.show && !judgeLeaf(item)" /> <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
<UpOutlined v-show="item.show && !judgeLeaf(item)" /> <UpOutlined v-show="item.show && !judgeLeaf(item)" />
</div> </div>
</a-tooltip> </a-tooltip>
<div style="margin-left:10px" v-if="!judgeLeaf(item) && item.show"> <div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
<abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData" <abilityDocTree
:level="newLevel + 1"> :dataList="item.children"
</abilityDocTree> @tree-click="handleTreeItem"
:clickData="newClickData"
:level="newLevel + 1"
></abilityDocTree>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineComponent, onMounted, ref, watch, defineProps, nextTick } from 'vue'; import {
import { getDevelopDocTree } from '@/api/home' defineComponent,
import { message } from 'ant-design-vue' onMounted,
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue' 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: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
level: { level: {
type: Number, type: Number,
default: 1 default: 1,
}, },
clickData: { clickData: {
type: Object, type: Object,
default: () => { title: '' } default: () => {
title: ''
}, },
}) },
})
// 数组 // 数组
const newDataList = ref(props.dataList) const newDataList = ref(props.dataList)
// 级别 // 级别
const newLevel = ref(props.level) 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) { if (item.children && item.children.length > 0) {
return false return false
} else { } else {
return true return true
} }
} }
const showChildren = (item) => { const showChildren = (item) => {
if (!(item.children && item.children.length > 0)) { if (!(item.children && item.children.length > 0)) {
if (newClickData.value.title !== '') { if (newClickData.value.title !== '') {
handleTreeItem(item) handleTreeItem(item)
@ -63,36 +86,35 @@ const showChildren = (item) => {
} }
} }
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
item.show = !item.show; item.show = !item.show
}
} }
}
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
newDataList.value = val newDataList.value = val
} }
} }
) )
watch( watch(
() => props.clickData, () => props.clickData,
(val) => { (val) => {
if (val) { if (val) {
newClickData.value = 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.list-text { .list-text {
font-size: 16px; font-size: 16px;
color: #333; color: #333;
padding: 10px 0; padding: 10px 0;
@ -109,9 +131,9 @@ const handleTreeItem = (item) => {
color: #0058e1; color: #0058e1;
cursor: pointer; cursor: pointer;
} }
} }
.parent { .parent {
margin-bottom: 10px; margin-bottom: 10px;
background: rgba(0, 135, 225, 0.1); background: rgba(0, 135, 225, 0.1);
color: #333; color: #333;
@ -121,17 +143,17 @@ const handleTreeItem = (item) => {
background: #0058e1; background: #0058e1;
cursor: pointer; cursor: pointer;
} }
} }
.leaf { .leaf {
font-size: 14px; font-size: 14px;
color: #555; color: #555;
cursor: pointer; cursor: pointer;
} }
.select { .select {
color: #0058e1; color: #0058e1;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
</style> </style>

177
front/src/views/instructionManual/index.vue
View File

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