基础设施联调
This commit is contained in:
parent
c53e96d0c3
commit
4c77a55ae7
|
|
@ -22,6 +22,7 @@
|
||||||
"carddragger": "^0.3.6",
|
"carddragger": "^0.3.6",
|
||||||
"clipboard": "^2.0.6",
|
"clipboard": "^2.0.6",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
|
"crypto-js": "^4.1.1",
|
||||||
"echarts": "^4.7.0",
|
"echarts": "^4.7.0",
|
||||||
"element-ui": "^2.13.2",
|
"element-ui": "^2.13.2",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<!--
|
<!--
|
||||||
* @Author: hisense.wuhongjian
|
* @Author: hisense.wuhongjian
|
||||||
* @Date: 2022-03-29 16:45:25
|
* @Date: 2022-03-29 16:45:25
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-06-24 19:49:15
|
* @LastEditTime: 2022-06-28 16:52:46
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
@ -47,7 +47,8 @@
|
||||||
window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
||||||
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796';
|
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['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['backUrl'] = 'http://124.222.94.39:9797';
|
||||||
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
|
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
|
||||||
|
|
|
||||||
|
|
@ -1681,6 +1681,7 @@ export function MapFun(mapObj) {
|
||||||
// })
|
// })
|
||||||
|
|
||||||
// }
|
// }
|
||||||
|
_removeLayerByLayerName(layerName)
|
||||||
let layers = null
|
let layers = null
|
||||||
// 判断是否是聚合图层
|
// 判断是否是聚合图层
|
||||||
layers = createMarkerClusterLayer()
|
layers = createMarkerClusterLayer()
|
||||||
|
|
@ -1691,12 +1692,7 @@ export function MapFun(mapObj) {
|
||||||
features.map((feature) => {
|
features.map((feature) => {
|
||||||
var bounds = map.getBounds()
|
var bounds = map.getBounds()
|
||||||
// console.log("看看有没有坐标",feature.latLng);
|
// console.log("看看有没有坐标",feature.latLng);
|
||||||
if (
|
if ( feature.hasOwnProperty('latLng')) {
|
||||||
layerName == '全部'
|
|
||||||
? feature.hasOwnProperty('latLng') &&
|
|
||||||
bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))
|
|
||||||
: feature.hasOwnProperty('latLng')
|
|
||||||
) {
|
|
||||||
const marker = L.marker(feature.latLng, { icon })
|
const marker = L.marker(feature.latLng, { icon })
|
||||||
if (createPopupFun !== null) {
|
if (createPopupFun !== null) {
|
||||||
marker.uuid = feature.uuid || ''
|
marker.uuid = feature.uuid || ''
|
||||||
|
|
@ -1735,38 +1731,6 @@ export function MapFun(mapObj) {
|
||||||
})
|
})
|
||||||
featureGroup.addLayer(layers)
|
featureGroup.addLayer(layers)
|
||||||
layerGroup.set(layerName, 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)
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 点击展示弹窗
|
* 点击展示弹窗
|
||||||
|
|
|
||||||
|
|
@ -243,6 +243,8 @@
|
||||||
const selectId = ref('')
|
const selectId = ref('')
|
||||||
const onSelect = (item, val, child) => {
|
const onSelect = (item, val, child) => {
|
||||||
console.log('item, val, child', child)
|
console.log('item, val, child', child)
|
||||||
|
mybus.emit('getCameraByParentId', val.id)
|
||||||
|
mybus.emit('getListByParentId', val.id)
|
||||||
getCameraAllOrgan({ parentId: val.id }).then((res) => {
|
getCameraAllOrgan({ parentId: val.id }).then((res) => {
|
||||||
treeData.value.map((treeDataItem, index) => {
|
treeData.value.map((treeDataItem, index) => {
|
||||||
if (item.id == treeDataItem.id) {
|
if (item.id == treeDataItem.id) {
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 地图 -->
|
<!-- 地图 -->
|
||||||
<div class="map-contain">
|
<div class="map-contain" v-if="showMap">
|
||||||
<video-surveillance></video-surveillance>
|
<video-surveillance></video-surveillance>
|
||||||
</div>
|
</div>
|
||||||
<!-- 功能行 -->
|
<!-- 功能行 -->
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<div class="contentNum">
|
<div class="contentNum">
|
||||||
<p>
|
<p>
|
||||||
备选
|
备选
|
||||||
<span>{{ dataSource.length }}</span>
|
<span>{{ pagination.total }}</span>
|
||||||
个
|
个
|
||||||
</p>
|
</p>
|
||||||
<i class="boundary"></i>
|
<i class="boundary"></i>
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
</div>
|
</div>
|
||||||
<i class="boundary"></i>
|
<i class="boundary"></i>
|
||||||
<!-- 添加至购物车 -->
|
<!-- 添加至购物车 -->
|
||||||
<a-button type="primary" @click="addShopCar" class="buttonAdd">
|
<a-button type="primary" @click="addShoppingCart" class="buttonAdd">
|
||||||
添加至购物车
|
添加至购物车
|
||||||
</a-button>
|
</a-button>
|
||||||
<!-- 一键申请 -->
|
<!-- 一键申请 -->
|
||||||
|
|
@ -75,6 +75,7 @@
|
||||||
:dataSource="dataSource"
|
:dataSource="dataSource"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:scroll="{ y: tableHeight }"
|
:scroll="{ y: tableHeight }"
|
||||||
|
rowKey="channelId"
|
||||||
:rowClassName="
|
:rowClassName="
|
||||||
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
||||||
"
|
"
|
||||||
|
|
@ -93,9 +94,46 @@
|
||||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||||
import { dataType } from 'element-plus/es/components/table-v2/src/common'
|
import { dataType } from 'element-plus/es/components/table-v2/src/common'
|
||||||
import { ref, onMounted } from 'vue'
|
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(() => {
|
onMounted(() => {
|
||||||
tabClick(0, '视频资源')
|
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([
|
const tabList = ref([
|
||||||
{
|
{
|
||||||
title: '设施类型',
|
title: '设施类型',
|
||||||
|
|
@ -124,6 +162,10 @@
|
||||||
}
|
}
|
||||||
clickList.value.push(params)
|
clickList.value.push(params)
|
||||||
})
|
})
|
||||||
|
mybus.off('tranferToList')
|
||||||
|
mybus.on('tranferToList', (data) => {
|
||||||
|
console.log('获取到的列表数据')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
let clickList = ref([]) //存储点击的tab
|
let clickList = ref([]) //存储点击的tab
|
||||||
init()
|
init()
|
||||||
|
|
@ -134,10 +176,13 @@
|
||||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||||
if (name == '视频资源') {
|
if (name == '视频资源') {
|
||||||
tableHeight.value = 330
|
tableHeight.value = 330
|
||||||
|
showMap.value = true
|
||||||
} else if (name == '云资源') {
|
} else if (name == '云资源') {
|
||||||
tableHeight.value = 600
|
tableHeight.value = 600
|
||||||
|
showMap.value = false
|
||||||
} else if (name == '感知资源') {
|
} else if (name == '感知资源') {
|
||||||
tableHeight.value = 330
|
tableHeight.value = 330
|
||||||
|
showMap.value = true
|
||||||
}
|
}
|
||||||
clickList.value[indexFather].content.splice(
|
clickList.value[indexFather].content.splice(
|
||||||
clickList.value[indexFather].content.indexOf(name),
|
clickList.value[indexFather].content.indexOf(name),
|
||||||
|
|
@ -146,6 +191,7 @@
|
||||||
} else {
|
} else {
|
||||||
if (name == '视频资源') {
|
if (name == '视频资源') {
|
||||||
tableHeight.value = 330
|
tableHeight.value = 330
|
||||||
|
showMap.value = true
|
||||||
tabList.value[1].content = []
|
tabList.value[1].content = []
|
||||||
clickList.value[1].content = []
|
clickList.value[1].content = []
|
||||||
clickList.value[indexFather].content[0] = name
|
clickList.value[indexFather].content[0] = name
|
||||||
|
|
@ -161,6 +207,7 @@
|
||||||
})
|
})
|
||||||
} else if (name == '云资源') {
|
} else if (name == '云资源') {
|
||||||
tableHeight.value = 600
|
tableHeight.value = 600
|
||||||
|
showMap.value = false
|
||||||
clickList.value[1].content = []
|
clickList.value[1].content = []
|
||||||
clickList.value[indexFather].content[0] = name
|
clickList.value[indexFather].content[0] = name
|
||||||
tabList.value[1].content = [
|
tabList.value[1].content = [
|
||||||
|
|
@ -175,6 +222,7 @@
|
||||||
]
|
]
|
||||||
} else if (name == '感知资源') {
|
} else if (name == '感知资源') {
|
||||||
tableHeight.value = 330
|
tableHeight.value = 330
|
||||||
|
showMap.value = true
|
||||||
clickList.value[1].content = []
|
clickList.value[1].content = []
|
||||||
clickList.value[indexFather].content[0] = name
|
clickList.value[indexFather].content[0] = name
|
||||||
tabList.value[1].content = ['333333', '213124']
|
tabList.value[1].content = ['333333', '213124']
|
||||||
|
|
@ -207,138 +255,53 @@
|
||||||
const addShopCar = () => {
|
const addShopCar = () => {
|
||||||
console.log('添加至购物车')
|
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([
|
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 columns = ref([
|
const columns = ref([
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '名称',
|
||||||
dataIndex: 'name',
|
dataIndex: 'channelName',
|
||||||
key: 'name',
|
key: 'channelName',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '年龄',
|
title: '归属',
|
||||||
dataIndex: 'age',
|
dataIndex: 'nodeName',
|
||||||
key: 'age',
|
key: 'nodeName',
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '住址',
|
|
||||||
dataIndex: 'address',
|
|
||||||
key: 'address',
|
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
const allClick = ref([])
|
const allClick = ref([])
|
||||||
const onSelectChange = (selectedRowKeys) => {
|
const onSelectChange = (selectedRowKeys, selectedRows) => {
|
||||||
console.log('hahhahah', selectedRowKeys)
|
console.log('hahhahah', selectedRowKeys, selectedRows)
|
||||||
allClick.value = selectedRowKeys
|
selectedList.value = selectedRows
|
||||||
|
// allClick.value = selectedRowKeys
|
||||||
}
|
}
|
||||||
const pagination = ref({
|
|
||||||
total: 0,
|
|
||||||
pageSize: 10, //每页中显示10条数据
|
|
||||||
showSizeChanger: true,
|
|
||||||
pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
|
|
||||||
})
|
|
||||||
const handleTableChange = (val) => {
|
const handleTableChange = (val) => {
|
||||||
pagination.value.current = val.current
|
pagination.value.current = val.current
|
||||||
pagination.value.pageSize = val.pageSize
|
pagination.value.pageSize = val.pageSize
|
||||||
this.queryParam.page = val.current
|
mapSearchParam.value.pageNum = val.current
|
||||||
this.queryParam.size = val.pageSize
|
mapSearchParam.value.pageSize = val.pageSize
|
||||||
|
getCamera()
|
||||||
// this.getTableList()
|
// this.getTableList()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -8,31 +8,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="searchPoint">
|
<div class="searchPoint">
|
||||||
<a-auto-complete
|
<el-autocomplete
|
||||||
v-model:value="value"
|
v-model="address"
|
||||||
class="certain-category-search"
|
placeholder="请输入地址"
|
||||||
dropdown-class-name="certain-category-search-dropdown"
|
clearable
|
||||||
:dropdown-match-select-width="500"
|
:fetch-suggestions="((queryString,cb) =>{searchAddressByKeyWord(queryString,cb,i)})"
|
||||||
style="width: 250px"
|
:trigger-on-focus="false"
|
||||||
:options="dataSource"
|
:popper-append-to-body="false"
|
||||||
>
|
class="address-auto-complete-input"
|
||||||
<template #option="item">
|
@select="((addressItem) =>{selectedAddress(addressItem,i)})"
|
||||||
<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
|
<!-- <el-autocomplete
|
||||||
class="inline-input"
|
class="inline-input"
|
||||||
prefix-icon="Search"
|
prefix-icon="Search"
|
||||||
|
|
@ -83,6 +68,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
import { HieimpMap } from '@/supermap/map-init'
|
import { HieimpMap } from '@/supermap/map-init'
|
||||||
import TiledMap from './components/tiledMap'
|
import TiledMap from './components/tiledMap'
|
||||||
import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
||||||
|
|
@ -118,6 +104,18 @@
|
||||||
openVideo: false,
|
openVideo: false,
|
||||||
channelCode: [],
|
channelCode: [],
|
||||||
circleModeFlag: false,
|
circleModeFlag: false,
|
||||||
|
addressMatchUrl: '',
|
||||||
|
address: '',
|
||||||
|
mapSearchParam: {
|
||||||
|
// 地图搜索初始化数据
|
||||||
|
parentId: '',
|
||||||
|
checkStatus: '1',
|
||||||
|
pageNum: '1',
|
||||||
|
pageSize: '20000',
|
||||||
|
gpsX: '',
|
||||||
|
gpsY: '',
|
||||||
|
radius: ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -138,59 +136,135 @@
|
||||||
this.hiMapFun
|
this.hiMapFun
|
||||||
)
|
)
|
||||||
this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
|
this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
|
||||||
getCameraAllLabel().then((res) => {
|
this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
|
||||||
this.tabList = res.data.data
|
// 初始化地址检索服务
|
||||||
})
|
this.initAddressMatchService()
|
||||||
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.getMapPoint()
|
// this.getMapPoint()
|
||||||
// mybus.$off('openCurrentVideoSurveillance')
|
// 根据parentId查询摄像头列表
|
||||||
// mybus.$on('openCurrentVideoSurveillance', (channelCode) => {
|
mybus.off('getCameraByParentId')
|
||||||
// this.openVideo = true
|
mybus.on('getCameraByParentId', (parentId) => {
|
||||||
// this.channelCode.unshift(channelCode)
|
this.mapSearchParam.parentId = parentId
|
||||||
// })
|
this.getCameraByParentId()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
circleMode() {
|
||||||
// 转换圈选模式
|
// 转换圈选模式
|
||||||
this.circleModeFlag = !this.circleModeFlag
|
this.circleModeFlag = !this.circleModeFlag
|
||||||
if(this.circleModeFlag){
|
if(this.circleModeFlag){
|
||||||
// 打开圈选模式
|
// 打开圈选模式
|
||||||
|
this.circleSelectResource()
|
||||||
}else {
|
}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 = {
|
async searchAddressByKeyWord(queryString, cb, indexX) {
|
||||||
page: page,
|
this.disasterPointIndex = indexX;
|
||||||
pageSize: 20000,
|
/* 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) {
|
tabChange(item) {
|
||||||
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
||||||
if (item.labelName == '全部') {
|
if (item.labelName == '全部') {
|
||||||
|
|
@ -234,6 +308,7 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
console.log('上图数据', dataEvent)
|
||||||
this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
|
this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
|
||||||
},
|
},
|
||||||
getMapPoint(data, img, type) {
|
getMapPoint(data, img, type) {
|
||||||
|
|
@ -286,39 +361,7 @@
|
||||||
console.log(this.camreaTree)
|
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) {
|
treeCameraClick(data) {
|
||||||
console.log(data)
|
console.log(data)
|
||||||
if (data.channelCode) {
|
if (data.channelCode) {
|
||||||
|
|
@ -429,185 +472,12 @@
|
||||||
top: 0.1rem;
|
top: 0.1rem;
|
||||||
right: 0.1rem;
|
right: 0.1rem;
|
||||||
border-radius: 4px;
|
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 {
|
.reset-button {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 1008;
|
z-index: 1008;
|
||||||
}
|
}
|
||||||
.checkStatus {
|
|
||||||
.el-checkbox {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-radio {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -626,5 +496,12 @@
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.address-auto-complete-input {
|
||||||
|
width: 2.4rem;
|
||||||
|
}
|
||||||
|
::v-deep.el-autocomplete .el-popper{
|
||||||
|
width: auto !important;
|
||||||
|
max-width: 2.4rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue