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

基础设施联调

This commit is contained in:
wuhongjian 2022-06-28 22:24:05 +08:00
parent c53e96d0c3
commit 4c77a55ae7
6 changed files with 241 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
back/package.json
View File

@ -22,6 +22,7 @@
"carddragger": "^0.3.6",
"clipboard": "^2.0.6",
"core-js": "^3.6.5",
"crypto-js": "^4.1.1",
"echarts": "^4.7.0",
"element-ui": "^2.13.2",
"file-saver": "^2.0.5",

7
front/public/index.html
View File

@ -1,8 +1,8 @@
<!--
* @Author: hisense.wuhongjian
* @Date: 2022-03-29 16:45:25
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-24 19:49:15
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-28 16:52:46
* @Description: 告诉大家这是什么
-->
<!DOCTYPE html>
@ -47,7 +47,8 @@
window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796';
window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.239:8888/renren-admin';
window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// 穿透版本
// window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';

40
front/src/supermap/advance-init.js
View File

@ -1681,6 +1681,7 @@ export function MapFun(mapObj) {
// })
// }
_removeLayerByLayerName(layerName)
let layers = null
// 判断是否是聚合图层
layers = createMarkerClusterLayer()
@ -1691,12 +1692,7 @@ export function MapFun(mapObj) {
features.map((feature) => {
var bounds = map.getBounds()
// console.log("看看有没有坐标",feature.latLng);
if (
layerName == '全部'
? feature.hasOwnProperty('latLng') &&
bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))
: feature.hasOwnProperty('latLng')
) {
if ( feature.hasOwnProperty('latLng')) {
const marker = L.marker(feature.latLng, { icon })
if (createPopupFun !== null) {
marker.uuid = feature.uuid || ''
@ -1735,38 +1731,6 @@ export function MapFun(mapObj) {
})
featureGroup.addLayer(layers)
layerGroup.set(layerName, layers)
// map.on('zoom', () => {
// _removeLayerByLayerName(layerName)
// let layers = null
// // 判断是否是聚合图层
// layers = createMarkerClusterLayer()
// features.map(feature => {
// var bounds = map.getBounds()
// // console.log("看看有没有坐标",feature.latLng);
// if (feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))) {
// const marker = L.marker(feature.latLng, { icon })
// if (createPopupFun !== null) {
// marker.uuid = feature.uuid || ''
// marker.resId = feature.resId || ''
// marker.on('click', async e => {
// if (feature.resourceName === 'video') {
// const params = [feature.indexCode]
// DS.openVideo(params)
// } else {
// const elementHtml = createPopupFun(feature)
// if (elementHtml) {
// console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map)
// L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
// }
// }
// })
// }
// layers.addLayer(marker)
// }
// })
// featureGroup.addLayer(layers)
// layerGroup.set(layerName, layers)
// })
}
/**
* 点击展示弹窗

2
front/src/views/home/detailsPageInfrastructureTree.vue
View File

@ -243,6 +243,8 @@
const selectId = ref('')
const onSelect = (item, val, child) => {
console.log('item, val, child', child)
mybus.emit('getCameraByParentId', val.id)
mybus.emit('getListByParentId', val.id)
getCameraAllOrgan({ parentId: val.id }).then((res) => {
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {

209
front/src/views/home/infrastructurePage.vue
View File

@ -19,7 +19,7 @@
</div>
</div>
<!-- 地图 -->
<div class="map-contain">
<div class="map-contain" v-if="showMap">
<video-surveillance></video-surveillance>
</div>
<!-- 功能行 -->
@ -28,7 +28,7 @@
<div class="contentNum">
<p>
备选
<span>{{ dataSource.length }}</span>
<span>{{ pagination.total }}</span>
个
</p>
<i class="boundary"></i>
@ -59,7 +59,7 @@
</div>
<i class="boundary"></i>
<!-- 添加至购物车 -->
<a-button type="primary" @click="addShopCar" class="buttonAdd">
<a-button type="primary" @click="addShoppingCart" class="buttonAdd">
添加至购物车
</a-button>
<!-- 一键申请 -->
@ -75,6 +75,7 @@
:dataSource="dataSource"
:columns="columns"
:scroll="{ y: tableHeight }"
rowKey="channelId"
:rowClassName="
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
"
@ -93,9 +94,46 @@
import { getCategoryTreePage } from '@/api/personalCenter'
import { dataType } from 'element-plus/es/components/table-v2/src/common'
import { ref, onMounted } from 'vue'
import { getCameraByParentId } from '@/api/videoSurveillance'
import { sgcInsert } from '@/api/home'
import { message } from 'ant-design-vue'
import mybus from '@/myplugins/mybus'
const pagination = ref({
total: 0,
current: 1,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
})
const mapSearchParam = ref({
// 地图搜索初始化数据
parentId: '',
checkStatus: '1',
pageNum: pagination.value.current,
pageSize: pagination.value.pageSize,
gpsX: '',
gpsY: '',
radius: '',
})
const showMap = ref(true)
onMounted(() => {
tabClick(0, '视频资源')
getCamera()
mybus.off('getListByParentId')
mybus.on('getListByParentId', (parentId) => {
mapSearchParam.value.parentId = parentId
getCamera()
})
mybus.off('getListByMap')
mybus.on('getListByMap', (param) => {
mapSearchParam.value.gpsX = param.gpsX
mapSearchParam.value.gpsY = param.gpsY
mapSearchParam.value.radius = param.radius
getCamera()
})
})
const selectedList = ref([])
const tabList = ref([
{
title: '设施类型',
@ -124,6 +162,10 @@
}
clickList.value.push(params)
})
mybus.off('tranferToList')
mybus.on('tranferToList', (data) => {
console.log('获取到的列表数据')
})
}
let clickList = ref([]) //存储点击的tab
init()
@ -134,10 +176,13 @@
if (clickList.value[indexFather].content.indexOf(name) != -1) {
if (name == '视频资源') {
tableHeight.value = 330
showMap.value = true
} else if (name == '云资源') {
tableHeight.value = 600
showMap.value = false
} else if (name == '感知资源') {
tableHeight.value = 330
showMap.value = true
}
clickList.value[indexFather].content.splice(
clickList.value[indexFather].content.indexOf(name),
@ -146,6 +191,7 @@
} else {
if (name == '视频资源') {
tableHeight.value = 330
showMap.value = true
tabList.value[1].content = []
clickList.value[1].content = []
clickList.value[indexFather].content[0] = name
@ -161,6 +207,7 @@
})
} else if (name == '云资源') {
tableHeight.value = 600
showMap.value = false
clickList.value[1].content = []
clickList.value[indexFather].content[0] = name
tabList.value[1].content = [
@ -175,6 +222,7 @@
]
} else if (name == '感知资源') {
tableHeight.value = 330
showMap.value = true
clickList.value[1].content = []
clickList.value[indexFather].content[0] = name
tabList.value[1].content = ['333333', '213124']
@ -207,138 +255,53 @@
const addShopCar = () => {
console.log('添加至购物车')
}
const getCamera = () => {
console.log('初始化调用')
getCameraByParentId(mapSearchParam.value).then((res) => {
console.log('RRRRRRRRRR', res.data.data)
dataSource.value = res.data.data
pagination.value.total = res.data.count
})
}
//加入申购车
const addShoppingCart = () => {
sgcInsert({
delFlag: '0',
resourceId: '8888888880000000001',
note1: selectedList.value,
// userId: userId.value,
}).then((res) => {
console.log(res)
message.success('添加申购车成功！')
mybus.emit('getSgcNum')
})
}
// 表格
const dataSource = ref([
{
key: '1',
name: '沈腾',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '3',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '4',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '5',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '6',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '7',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '8',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '9',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '10',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '11',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '12',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '13',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '14',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '15',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '16',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
])
const dataSource = ref([])
const columns = ref([
{
title: '姓名',
dataIndex: 'name',
key: 'name',
title: '名称',
dataIndex: 'channelName',
key: 'channelName',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
title: '归属',
dataIndex: 'nodeName',
key: 'nodeName',
},
])
const allClick = ref([])
const onSelectChange = (selectedRowKeys) => {
console.log('hahhahah', selectedRowKeys)
allClick.value = selectedRowKeys
const onSelectChange = (selectedRowKeys, selectedRows) => {
console.log('hahhahah', selectedRowKeys, selectedRows)
selectedList.value = selectedRows
// allClick.value = selectedRowKeys
}
const pagination = ref({
total: 0,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
})
const handleTableChange = (val) => {
pagination.value.current = val.current
pagination.value.pageSize = val.pageSize
this.queryParam.page = val.current
this.queryParam.size = val.pageSize
mapSearchParam.value.pageNum = val.current
mapSearchParam.value.pageSize = val.pageSize
getCamera()
// this.getTableList()
}
</script>

415
front/src/views/home/videoSurveillance/index.vue
View File

@ -8,31 +8,16 @@
</div>
<div class="searchPoint">
<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
v-model="address"
placeholder="请输入地址"
clearable
:fetch-suggestions="((queryString,cb) =>{searchAddressByKeyWord(queryString,cb,i)})"
:trigger-on-focus="false"
:popper-append-to-body="false"
class="address-auto-complete-input"
@select="((addressItem) =>{selectedAddress(addressItem,i)})"
/>
<!-- <el-autocomplete
class="inline-input"
prefix-icon="Search"
@ -83,6 +68,7 @@
</template>
<script>
import { message } from 'ant-design-vue';
import { HieimpMap } from '@/supermap/map-init'
import TiledMap from './components/tiledMap'
import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
@ -118,6 +104,18 @@
openVideo: false,
channelCode: [],
circleModeFlag: false,
addressMatchUrl: '',
address: '',
mapSearchParam: {
// 地图搜索初始化数据
parentId: '',
checkStatus: '1',
pageNum: '1',
pageSize: '20000',
gpsX: '',
gpsY: '',
radius: ''
}
}
},
components: {
@ -138,59 +136,135 @@
this.hiMapFun
)
this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
getCameraAllLabel().then((res) => {
this.tabList = res.data.data
})
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
this.camreaTree = res.data.data
res.data.data.forEach((item) => {
this.camreaTreeSingle.push({
channelName: item.name,
children: [],
})
})
})
getCameraAll().then((res) => {
let t1 = new Date().getTime()
this.cameraAllData = res.data
this.addResourceTomap('全部', res.data)
let t2 = new Date().getTime()
console.log('时间#############' + (t2 - t1))
})
this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
// 初始化地址检索服务
this.initAddressMatchService()
// this.getMapPoint()
// mybus.$off('openCurrentVideoSurveillance')
// mybus.$on('openCurrentVideoSurveillance', (channelCode) => {
// this.openVideo = true
// this.channelCode.unshift(channelCode)
// })
// 根据parentId查询摄像头列表
mybus.off('getCameraByParentId')
mybus.on('getCameraByParentId', (parentId) => {
this.mapSearchParam.parentId = parentId
this.getCameraByParentId()
})
},
methods: {
selectedAddress(item,index) {
// 跳转到相应经纬度
console.log('跳转', item)
const latLng = {
lat: item.location.y,
lng: item.location.x
}
this.hiMapFun.mapFlyTo(latLng)
},
// 圈选方法
circleSelectResource() {
L.drawLocal.draw.handlers.circle.tooltip.start = '请圈选区域';
L.drawLocal.draw.handlers.circle.radius = '半径';
L.drawLocal.draw.handlers.circle.tooltip.end = '松开绘制完成';
this.hiMap.mapObj.map.off('draw:created');
this.hiMap.mapObj.drawCircle.enable();
this.hiMap.mapObj.map.once('draw:created', (e) => {
const type = e.layerType;
const circleLayer = e.layer;
if (type === 'circle') {
const radius = (e.layer._mRadius).toFixed(2)
if (radius > 5000) {
message.info('最大支持5km范围的圈选')
} else {
const circlePloygonLayer = this.multiScreenFun.createCircleLayer(circleLayer);
this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer);
this.hiMap.mapObj.layerGroup.set('circlePloygonLayer', circlePloygonLayer);
console.log('查询图层为何发生了改变', e.layer);
this.mapSearchParam.gpsX = e.layer._latlng.lng.toFixed(2)
this.mapSearchParam.gpsY = e.layer._latlng.lat.toFixed(2)
this.mapSearchParam.radius = radius
const params = {
gpsX: this.mapSearchParam.gpsX,
gpsY: this.mapSearchParam.gpsY,
radius: radius
}
mybus.emit('getListByMap', params)
this.getCameraByParentId()
}
}
});
},
getCameraByParentId() {
getCameraByParentId(this.mapSearchParam).then((res) => {
console.log('根据parent查询摄像头', res.data.data)
this.addResourceTomap('videoMap', res.data.data)
})
},
// 初始化地址匹配服务
initAddressMatchService() {
this.L = window.L || {};
this.addressMatchService = L.supermap.addressMatchService(this.addressMatchUrl);
},
circleMode() {
// 转换圈选模式
this.circleModeFlag = !this.circleModeFlag
if(this.circleModeFlag){
// 打开圈选模式
this.circleSelectResource()
}else {
// 关闭圈选模式，清空圈选内容，重新上图
this.hiMapFun.removeLayerByLayerName('circlePloygonLayer')
// 重置内容
this.mapSearchParam.gpsX = ''
this.mapSearchParam.gpsY = ''
this.mapSearchParam.radius = ''
this.getCameraByParentId()
const params = {
gpsX: this.mapSearchParam.gpsX,
gpsY: this.mapSearchParam.gpsY,
radius: this.mapSearchParam.radius
}
mybus.emit('getListByMap', params)
}
},
getCameraAllPage(page) {
let params = {
page: page,
pageSize: 20000,
//查询地址建议匹配
async searchAddressByKeyWord(queryString, cb, indexX) {
this.disasterPointIndex = indexX;
/* const res = await bdPlaceSearch({ searchKey: queryString });
if (res.data) {
for(var i=0;i<res.data.length;i++){
res.data[i].value = res.data[i].name;
}
cb(res.data);
}*/
const match = function(obj) {
//console.log('ooooo',obj);
obj.result.map(item => {
item.value = item.address;
});
cb(obj.result);
};
if (!queryString) {
cb([]);
} else {
var geoCodeParam = new SuperMap.GeoCodingParameter({
'address': queryString,
});
this.addressMatchService.code(geoCodeParam, match);
}
getCameraAll(params).then((res) => {
// let t1 = new Date().getTime();
this.cameraAllData = res.data.data
this.addResourceTomap('全部', res.data.data)
// let t2 = new Date().getTime();
// console.log("时间#############" + (t2 - t1));
})
},
// getCameraAllPage(page) {
// let params = {
// name: '',
// page: page,
// pageSize: 20000,
// }
// selectByChannelName(params).then((res) => {
// // let t1 = new Date().getTime();
// this.cameraAllData = res.data.data
// this.addResourceTomap('全部', res.data.data)
// // let t2 = new Date().getTime();
// // console.log("时间#############" + (t2 - t1));
// })
// },
tabChange(item) {
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
if (item.labelName == '全部') {
@ -234,6 +308,7 @@
})
}
})
console.log('上图数据', dataEvent)
this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
},
getMapPoint(data, img, type) {
@ -286,39 +361,7 @@
console.log(this.camreaTree)
})
},
loadNode(node, resolve) {
// if (node.level === 0) {
// return resolve([{ name: 'region' }]);
// }
if (node.level > 0) {
let subData = []
getCameraAllOrgan({ parentId: node.data.id }).then((res) => {
if (res.data.data.length == 0) {
const params = {
parentId: node.data.id,
checkStatus: '1',
// this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
}
getCameraByParentId(params).then((res) => {
res.data.data.forEach((item) => {
subData.push({
name: item.channelName,
gpsX: item.gpsX,
gpsY: item.gpsY,
channelCode: item.channelCode,
checkStatus: item.checkStatus,
leaf: true,
})
})
return resolve(subData)
})
} else {
subData = res.data.data
return resolve(subData)
}
})
}
},
treeCameraClick(data) {
console.log(data)
if (data.channelCode) {
@ -429,185 +472,12 @@
top: 0.1rem;
right: 0.1rem;
border-radius: 4px;
// margin-top: 20px;
:deep(.el-input__wrapper) {
background: #629ab8;
border-radius: 20px;
}
:deep(.el-input__inner) {
color: #fff;
background: #629ab8;
width: 255px;
height: 44px;
border-radius: 20px;
&::placeholder {
color: #fff;
}
}
:deep(.el-input__prefix) {
top: 2px;
}
:deep(.el-input-group__append) {
width: 54px;
min-height: unset;
height: 30px;
position: absolute;
right: 6px;
top: 6px;
border-radius: 20px;
line-height: 30px;
text-indent: -4px;
color: #5e9bbd;
font-size: 14px;
cursor: pointer;
}
:deep(.my-autocomplete) {
top: 20px !important;
z-index: -1 !important;
width: 250px !important;
left: 2px !important;
background: #3c657c;
border-radius: 0 0 20px 20px;
li {
color: #fff;
&:hover {
background: #41738f;
}
}
}
:deep(.el-popper) {
width: 300px !important;
}
}
.tag-box {
position: absolute;
right: 30px;
// top: 138px;
margin-top: 20px;
z-index: 1000;
width: 350px;
height: 500px;
border-radius: 5px;
background-color: #25536d;
.refresh {
position: absolute;
right: 15px;
top: 10px;
color: #fff;
cursor: pointer;
z-index: 1008;
}
:deep(.el-tabs) {
background: transparent;
// width: 300px;
height: 500px;
border: none;
.el-tabs__header {
background: transparent;
.el-tabs__item {
width: 150px;
text-align: center;
}
.el-tabs__item.is-active {
background: rgba(27, 255, 255, 0.2);
color: #fff;
background-image: url('~@/assets/img/picture_left.png'),
url('~@/assets/img/picture_right.png');
background-repeat: no-repeat;
background-position: 6% 55%, 94% 55%;
background-size: 20% 20%;
}
}
.el-input__inner {
background-color: #51758a;
border-radius: 5px;
border: none;
}
.el-input__wrapper {
background-color: #51758a;
}
.el-input__suffix {
.el-input__icon {
color: #72c7f5;
}
}
.el-tree {
margin-top: 15px;
height: 320px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px;
background-color: #456d83;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #708fa3 !important;
}
}
}
:deep(.el-checkbox-group) {
height: 360px;
overflow-y: auto;
margin-top: 22px;
&::-webkit-scrollbar {
width: 4px;
background-color: #456d83;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #708fa3 !important;
}
}
:deep(.el-checkbox-button) {
border-radius: 20px;
margin: 10px;
.el-checkbox-button__inner {
height: 30px;
}
.el-checkbox-button__inner {
border-radius: 20px;
background-color: rgba(116, 204, 252, 0.4);
color: #fff;
border: none;
}
.el-checkbox-button__inner:hover {
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
}
}
:deep(.el-checkbox-button.is-checked) {
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
}
:deep(.el-tabs__item) {
color: #d1ced5;
}
.el-tree {
background: transparent;
color: #fff;
}
:deep(.el-tree-node__content:hover) {
background: rgba(27, 255, 255, 0.2);
}
:deep(.el-tree-node:focus) > .el-tree-node__content {
background-color: rgba(27, 255, 255, 0.2);
color: #fff;
}
.reset-button {
margin-left: 20px;
color: #fff;
cursor: pointer;
z-index: 1008;
}
.checkStatus {
.el-checkbox {
color: #fff;
}
}
.el-radio {
color: #fff;
}
}
}
</style>
@ -626,5 +496,12 @@
z-index: 1001;
cursor: pointer;
}
.address-auto-complete-input {
width: 2.4rem;
}
::v-deep.el-autocomplete .el-popper{
width: auto !important;
max-width: 2.4rem;
}
}
</style>