基础设施
This commit is contained in:
851673013@qq.com
parent
03bfdd1d14
commit
44e2d6a9b9
|
|
@ -61,11 +61,11 @@ export function count() {
|
|||
export function getVideoList(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.9:8001/hx-weather-warning/camera/getCameraListByName?name=' +
|
||||
params.name +
|
||||
'&pageNo=' +
|
||||
params.pageNo +
|
||||
'&pageSize=' +
|
||||
params.pageSize,
|
||||
params.name +
|
||||
'&pageNo=' +
|
||||
params.pageNo +
|
||||
'&pageSize=' +
|
||||
params.pageSize,
|
||||
config2
|
||||
)
|
||||
}
|
||||
|
|
@ -73,17 +73,17 @@ export function getVideoList(params) {
|
|||
export function getRecord(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.24:30090/api/share-portal/platform/catalogue/query?serviceName=' +
|
||||
params.serviceName +
|
||||
'&orderField=' +
|
||||
params.orderField +
|
||||
'&orderType=' +
|
||||
params.orderType +
|
||||
'&pageNum=' +
|
||||
params.pageNum +
|
||||
'&pageSize=' +
|
||||
params.pageSize +
|
||||
'&serviceType=' +
|
||||
params.serviceType,
|
||||
params.serviceName +
|
||||
'&orderField=' +
|
||||
params.orderField +
|
||||
'&orderType=' +
|
||||
params.orderType +
|
||||
'&pageNum=' +
|
||||
params.pageNum +
|
||||
'&pageSize=' +
|
||||
params.pageSize +
|
||||
'&serviceType=' +
|
||||
params.serviceType,
|
||||
config2
|
||||
)
|
||||
}
|
||||
|
|
@ -91,9 +91,24 @@ export function getRecord(params) {
|
|||
export function getHls(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.9:8001/hx-weather-warning/camera/getCameraLiveStreamByCode?cameraCode=' +
|
||||
params.cameraId +
|
||||
'&protocol=' +
|
||||
params.protocol,
|
||||
params.cameraId +
|
||||
'&protocol=' +
|
||||
params.protocol,
|
||||
config2
|
||||
)
|
||||
}
|
||||
//能力集市基础设施-左侧列表
|
||||
export function getCameraInfoByAreaId(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.92:9537/data_service/getCamera/getCameraInfoByAreaId?areaId=' +
|
||||
params.areaId,
|
||||
config2
|
||||
)
|
||||
}
|
||||
//能力集市基础设施-摄像头
|
||||
export function getCameraByCondition(params) {
|
||||
return axios.get(
|
||||
'http://10.134.135.92:9537/data_service/getCamera/getCameraByCondition?' + params,
|
||||
config2
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -232,10 +232,13 @@
|
|||
v-else-if="whoShow1 && whoShow1.itShowXiHaiAn"
|
||||
>
|
||||
<home-header></home-header>
|
||||
<div class="details-pageconetent-left">
|
||||
<div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
|
||||
<detailsPageconetentTree />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库'">
|
||||
<div class="details-pageconetent-left" v-else>
|
||||
<detailsPageInfrastructureTree />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
|
|
@ -247,12 +250,12 @@
|
|||
class="photo"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.photo}) `,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索框 -->
|
||||
<div class="resultListSearchInput-father">
|
||||
<div class="resultListSearchInput-son">
|
||||
模糊搜索
|
||||
|
|
@ -266,10 +269,17 @@
|
|||
class="resultListSearchInput"
|
||||
/>
|
||||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||||
<button
|
||||
v-if="Cardsname == '应用资源'"
|
||||
class="button-reset"
|
||||
@click="applyAll()"
|
||||
style="margin-left: 0.1rem"
|
||||
>
|
||||
全部申请
|
||||
</button>
|
||||
<div class="hengxian"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分类 -->
|
||||
<div class="top-content-father" :key="listKey">
|
||||
<template
|
||||
v-if="
|
||||
|
|
@ -324,7 +334,10 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="top-content" v-if="Cardsname == '组件服务'">
|
||||
<!-- <div
|
||||
class="top-content"
|
||||
v-if="Cardsname == '组件服务' || Cardsname == '应用资源'"
|
||||
>
|
||||
<span class="top-content-title">共享条件</span>
|
||||
<div class="leixingsumfather">
|
||||
<div class="leixingsum">
|
||||
|
|
@ -340,7 +353,7 @@
|
|||
:checked="tagFlag == '免批申请'"
|
||||
@change="() => chagneTag('免批申请')"
|
||||
>
|
||||
免批申请
|
||||
免批
|
||||
</a-checkable-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -348,7 +361,6 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 中心内容 -->
|
||||
<searchResultList
|
||||
v-show="resourceList.data && resourceList.data.length > 0"
|
||||
:key="listKey2"
|
||||
|
|
@ -356,7 +368,6 @@
|
|||
:resourceTotal="resourceTotal"
|
||||
:select-cardsname="Cardsname"
|
||||
/>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<a-pagination
|
||||
v-if="resourceList.data && resourceList.data.length > 0"
|
||||
|
|
@ -373,11 +384,33 @@
|
|||
</div>
|
||||
<div
|
||||
v-if="resourceList.data && resourceList.data.length <= 0"
|
||||
style="margin-top: 200px"
|
||||
style="margin-top: 2rem"
|
||||
>
|
||||
<a-empty />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else-if="Cardsname === '基础设施'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
:key="item.name"
|
||||
:class="item.name === Cardsname ? 'sel' : ''"
|
||||
@click="changeCards(item.name)"
|
||||
>
|
||||
<span
|
||||
class="photo"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.photo}) `,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-content-father">
|
||||
<infrastructurePage />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else>
|
||||
<div class="top-title">
|
||||
<div
|
||||
|
|
@ -390,6 +423,7 @@
|
|||
class="photo"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.photo}) `,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
|
|
@ -741,7 +775,13 @@
|
|||
orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
||||
orderType: 'DESC', // ASC 升序 DESC 降序
|
||||
}
|
||||
|
||||
//西海岸查询参数
|
||||
let paramsGetResources2 = ref({
|
||||
regionId: '70be8c5b664f4bcf869d82f2e8335051',
|
||||
pageNum: 1,
|
||||
pageSize: currentPageSize.value,
|
||||
name: '',
|
||||
})
|
||||
// 查询
|
||||
const onSearch = () => {
|
||||
loading.value = true
|
||||
|
|
@ -820,6 +860,12 @@
|
|||
currentPage.value = 1
|
||||
currentPageSize.value = 5
|
||||
// 重置查询条件
|
||||
paramsGetResources2.value = {
|
||||
regionId: '70be8c5b664f4bcf869d82f2e8335051',
|
||||
pageNum: 1,
|
||||
pageSize: currentPageSize.value,
|
||||
name: '',
|
||||
}
|
||||
paramsGetResources.districtId = ''
|
||||
paramsGetResources.deptIds = []
|
||||
paramsGetResources.pageNum = 1
|
||||
|
|
@ -955,12 +1001,18 @@
|
|||
searchValue.value,
|
||||
searchValue.value.length
|
||||
)
|
||||
if (searchValue.value.length >= 2) {
|
||||
if (
|
||||
searchValue.value.length >= 2 &&
|
||||
paramsGetResources.type !== '基础设施'
|
||||
) {
|
||||
str = searchValue.value.substring(0, 2)
|
||||
console.log('str================>', str)
|
||||
r = re.test(str)
|
||||
}
|
||||
if (searchValue.value.length > 1 && r) {
|
||||
if (
|
||||
(searchValue.value.length > 1 && r) ||
|
||||
paramsGetResources.type === '基础设施'
|
||||
) {
|
||||
//switchIndex这个参数是下面的分页传过来的参数
|
||||
paramsGetResources.name = searchValue.value
|
||||
paramsGetResources.type = Cardsname.value
|
||||
|
|
@ -1016,7 +1068,11 @@
|
|||
loading.value = false
|
||||
}
|
||||
})
|
||||
} else if (paramsGetResources.type !== '数据资源') {
|
||||
} else if (
|
||||
paramsGetResources.type !== '数据资源' &&
|
||||
(paramsGetResources.type !== '基础设施' ||
|
||||
!whoShow1.value.itShowXiHaiAn)
|
||||
) {
|
||||
if (switchIndex != '分页查询') {
|
||||
paramsGetResources.pageNum = 1
|
||||
}
|
||||
|
|
@ -1038,6 +1094,16 @@
|
|||
// getShoppingCartList(res.data.data.records)
|
||||
}
|
||||
})
|
||||
} else if (
|
||||
paramsGetResources.type === '基础设施' &&
|
||||
whoShow1.value.itShowXiHaiAn
|
||||
) {
|
||||
if (switchIndex != '分页查询') {
|
||||
paramsGetResources.pageNum = 1
|
||||
}
|
||||
paramsGetResources2.value.pageNum = paramsGetResources.pageNum
|
||||
paramsGetResources2.value.pageSize = paramsGetResources.pageSize
|
||||
paramsGetResources2.value.name = paramsGetResources.name
|
||||
}
|
||||
} else {
|
||||
message.error('请以两位以上汉字或数字开头')
|
||||
|
|
@ -1098,7 +1164,11 @@
|
|||
loading.value = false
|
||||
}
|
||||
})
|
||||
} else if (paramsGetResources.type !== '数据资源') {
|
||||
} else if (
|
||||
paramsGetResources.type !== '数据资源' &&
|
||||
(paramsGetResources.type !== '基础设施' ||
|
||||
!whoShow1.value.itShowXiHaiAn)
|
||||
) {
|
||||
if (switchIndex != '分页查询') {
|
||||
paramsGetResources.pageNum = 1
|
||||
}
|
||||
|
|
@ -1116,6 +1186,15 @@
|
|||
// getShoppingCartList(res.data.data.records)
|
||||
}
|
||||
})
|
||||
} else if (
|
||||
paramsGetResources.type === '基础设施' ||
|
||||
whoShow1.value.itShowXiHaiAn
|
||||
) {
|
||||
if (switchIndex != '分页查询') {
|
||||
paramsGetResources.pageNum = 1
|
||||
}
|
||||
paramsGetResources2.value.pageNum = paramsGetResources.pageNum
|
||||
paramsGetResources2.value.pageSize = paramsGetResources.pageSize
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1141,6 +1220,10 @@
|
|||
resourceList.data = list
|
||||
})
|
||||
}
|
||||
mybus.on('getCameraByParentId', (ids) => {
|
||||
paramsGetResources2.value.regionId = ids
|
||||
getAppResources()
|
||||
})
|
||||
mybus.on('paramsGetResources', (ids) => {
|
||||
if (ids && ids.length > 0) {
|
||||
paramsGetResources.deptIds = ids
|
||||
|
|
@ -1333,6 +1416,7 @@
|
|||
detailsPageInfrastructureTree,
|
||||
},
|
||||
beforeUnmount() {
|
||||
mybus.off('getCameraByParentId')
|
||||
mybus.off('selectCardsitem')
|
||||
mybus.off('paramsGetResources')
|
||||
mybus.off('changeCondition')
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@
|
|||
<script>
|
||||
import { defineComponent, ref, watch } from 'vue'
|
||||
import { getCameraAllOrgan } from '@/api/videoSurveillance'
|
||||
import { getCameraInfoByAreaId } from '@/api/file'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||||
|
|
@ -109,6 +110,7 @@
|
|||
children: 'children',
|
||||
title: 'name',
|
||||
}
|
||||
const whoShow1 = ref(whoShow)
|
||||
const showKey = ref(0)
|
||||
const treeData = ref([])
|
||||
const init = () => {
|
||||
|
|
@ -126,11 +128,19 @@
|
|||
router.currentRoute.value.query.select
|
||||
)
|
||||
if (select == '基础设施') {
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||||
(res) => {
|
||||
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||||
(res) => {
|
||||
treeData.value = res.data.data
|
||||
}
|
||||
)
|
||||
} else {
|
||||
getCameraInfoByAreaId({
|
||||
areaId: '70be8c5b664f4bcf869d82f2e8335051',
|
||||
}).then((res) => {
|
||||
treeData.value = res.data.data
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
// selectDeptList({ type: select }).then((res) => {
|
||||
// // console.log('区划数据=========================>', res.data.data)
|
||||
// res.data.data.forEach((val) => {
|
||||
|
|
@ -240,23 +250,41 @@
|
|||
// }
|
||||
const selectId = ref('')
|
||||
const onSelect = (item, val, child) => {
|
||||
debugger
|
||||
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) {
|
||||
treeData.value[index].children.map((childItem, childIndex) => {
|
||||
if (childItem.id == val.id) {
|
||||
treeData.value[index].children[childIndex].children =
|
||||
res.data.data
|
||||
}
|
||||
})
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
||||
getCameraAllOrgan({ parentId: val.id }).then((res) => {
|
||||
treeData.value.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
treeData.value[index].children.map((childItem, childIndex) => {
|
||||
if (childItem.id == val.id) {
|
||||
treeData.value[index].children[childIndex].children =
|
||||
res.data.data
|
||||
}
|
||||
})
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
getCameraInfoByAreaId({
|
||||
areaId: val.id,
|
||||
}).then((res) => {
|
||||
treeData.value.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
treeData.value[index].children.map((childItem, childIndex) => {
|
||||
if (childItem.id == val.id) {
|
||||
treeData.value[index].children[childIndex].children =
|
||||
res.data.data
|
||||
}
|
||||
})
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (child) {
|
||||
selectId.value = child.id
|
||||
}
|
||||
|
|
@ -305,14 +333,27 @@
|
|||
}
|
||||
const showBottom = (item) => {
|
||||
item.show = !item.show
|
||||
getCameraAllOrgan({ parentId: item.id }).then((res) => {
|
||||
treeData.value.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
treeData.value[index].children = res.data.data
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
||||
getCameraAllOrgan({ parentId: item.id }).then((res) => {
|
||||
treeData.value.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
treeData.value[index].children = res.data.data
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
getCameraInfoByAreaId({
|
||||
areaId: item.id,
|
||||
}).then((res) => {
|
||||
treeData.value.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
treeData.value[index].children = res.data.data
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const showDown = (item, val) => {
|
||||
console.log('showDown', val)
|
||||
|
|
|
|||
|
|
@ -93,7 +93,13 @@
|
|||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'operation'">
|
||||
<a @click="openVideo(record.channelCode)">预览</a>
|
||||
<a
|
||||
@click="
|
||||
openVideo(record.channelCode || record.channelCode.channelId)
|
||||
"
|
||||
>
|
||||
预览
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
|
@ -125,9 +131,11 @@
|
|||
getStreamByChannelCode,
|
||||
getCameraAllLabel,
|
||||
} from '@/api/videoSurveillance'
|
||||
import { getCameraByCondition } from '@/api/file'
|
||||
import { sgcInsert } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const whoShow1 = ref(whoShow)
|
||||
const options = reactive({
|
||||
width: '700px', //播放器宽度
|
||||
height: '400px', //播放器高度
|
||||
|
|
@ -415,13 +423,44 @@
|
|||
const getCamera = () => {
|
||||
console.log('初始化调用')
|
||||
console.log('不选左侧树的时候不调用接口', mapSearchParam.value)
|
||||
// if (mapSearchParam.value.parentId) {
|
||||
getCameraByParentId(mapSearchParam.value).then((res) => {
|
||||
console.log('RRRRRRRRRR', res.data.data)
|
||||
dataSource.value = res.data.data
|
||||
pagination.value.total = res.data.count
|
||||
})
|
||||
// }
|
||||
if (!whoShow1.value.itShowXiHaiAn) {
|
||||
getCameraByParentId(mapSearchParam.value).then((res) => {
|
||||
console.log('RRRRRRRRRR', res.data.data)
|
||||
dataSource.value = res.data.data
|
||||
pagination.value.total = res.data.count
|
||||
})
|
||||
} else {
|
||||
let params = {
|
||||
regionId:
|
||||
mapSearchParam.value.parentId || '70be8c5b664f4bcf869d82f2e8335051',
|
||||
pageNum: mapSearchParam.value.pageNum,
|
||||
pageSize: mapSearchParam.value.pageSize,
|
||||
name: mapSearchParam.value.name || '',
|
||||
longitude: mapSearchParam.value.gpsX || '',
|
||||
atitude: mapSearchParam.value.gpsY || '',
|
||||
radius: mapSearchParam.value.radius || '',
|
||||
}
|
||||
let paramsFather = ''
|
||||
let i = 1
|
||||
for (var key in params) {
|
||||
if (params[key] === '') {
|
||||
delete params[key]
|
||||
} else {
|
||||
if (i != 1) {
|
||||
paramsFather += `&${key}=` + params[key]
|
||||
i += 1
|
||||
} else if (i == 1) {
|
||||
paramsFather += `${key}=` + params[key]
|
||||
i += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
getCameraByCondition(paramsFather).then((res) => {
|
||||
dataSource.value = res.data.data
|
||||
pagination.value.total = res.data.count
|
||||
console.log('根据parent查询摄像头', res.data.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
//加入申购车
|
||||
const addShoppingCart = () => {
|
||||
|
|
@ -469,14 +508,14 @@
|
|||
message.warning('最多只能添加10个摄像头！')
|
||||
} else {
|
||||
selectedList.value.push(record)
|
||||
selectedRowKeys.value.push(record.channelCode)
|
||||
selectedRowKeys.value.push(record.channelCode || record.channelId)
|
||||
}
|
||||
} else {
|
||||
selectedList.value = selectedList.value.filter(
|
||||
(item) => item.idtCameraChannel !== record.idtCameraChannel
|
||||
)
|
||||
selectedRowKeys.value.splice(
|
||||
selectedRowKeys.value.indexOf(record.channelCode),
|
||||
selectedRowKeys.value.indexOf(record.channelCode || record.channelId),
|
||||
1
|
||||
)
|
||||
}
|
||||
|
|
@ -488,7 +527,7 @@
|
|||
if (selected) {
|
||||
changeRows.map((val) => {
|
||||
selectedList.value.push(val)
|
||||
selectedRowKeys.value.push(val.channelCode)
|
||||
selectedRowKeys.value.push(val.channelCode || val.channelId)
|
||||
})
|
||||
if (selectedRowKeys.value.length > 10) {
|
||||
message.warning('最多只能添加10个摄像头！')
|
||||
|
|
@ -497,7 +536,7 @@
|
|||
(item) => item.idtCameraChannel !== val.idtCameraChannel
|
||||
)
|
||||
selectedRowKeys.value.splice(
|
||||
selectedRowKeys.value.indexOf(val.channelCode),
|
||||
selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
|
||||
1
|
||||
)
|
||||
})
|
||||
|
|
@ -508,7 +547,7 @@
|
|||
(item) => item.idtCameraChannel !== val.idtCameraChannel
|
||||
)
|
||||
selectedRowKeys.value.splice(
|
||||
selectedRowKeys.value.indexOf(val.channelCode),
|
||||
selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
|
||||
1
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,16 +8,24 @@
|
|||
</div>
|
||||
|
||||
<div class="searchPoint">
|
||||
<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
|
||||
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"
|
||||
|
|
@ -68,7 +76,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue'
|
||||
import { HieimpMap } from '@/supermap/map-init'
|
||||
import TiledMap from './components/tiledMap'
|
||||
import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
||||
|
|
@ -83,6 +91,7 @@
|
|||
selectByLabelName,
|
||||
selectByChannelName,
|
||||
} from '@/api/videoSurveillance'
|
||||
import { getCameraByCondition } from '@/api/file'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
|
||||
export default {
|
||||
|
|
@ -106,6 +115,7 @@
|
|||
circleModeFlag: false,
|
||||
addressMatchUrl: '',
|
||||
address: '',
|
||||
whoShow1: whoShow,
|
||||
mapSearchParam: {
|
||||
// 地图搜索初始化数据
|
||||
parentId: '',
|
||||
|
|
@ -114,8 +124,8 @@
|
|||
pageSize: '20000',
|
||||
gpsX: '',
|
||||
gpsY: '',
|
||||
radius: ''
|
||||
}
|
||||
radius: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -136,7 +146,7 @@
|
|||
this.hiMapFun
|
||||
)
|
||||
this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
|
||||
this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
|
||||
this.addressMatchUrl = window.SITE_CONFIG.POI_URL
|
||||
// 初始化地址检索服务
|
||||
this.initAddressMatchService()
|
||||
this.getCameraAllLabel()
|
||||
|
|
@ -146,72 +156,113 @@
|
|||
// 根据parentId查询摄像头列表
|
||||
mybus.off('getCameraByParentId')
|
||||
mybus.on('getCameraByParentId', (parentId) => {
|
||||
this.mapSearchParam.parentId = parentId
|
||||
this.getCameraByParentId()
|
||||
this.mapSearchParam.parentId = parentId
|
||||
this.getCameraByParentId()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
selectedAddress(item,index) {
|
||||
selectedAddress(item, index) {
|
||||
// 跳转到相应经纬度
|
||||
console.log('跳转', item)
|
||||
const latLng = {
|
||||
lat: item.location.y,
|
||||
lng: item.location.x
|
||||
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 = '松开绘制完成';
|
||||
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)
|
||||
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
|
||||
this.mapSearchParam.gpsY = e.layer._latlng.lat
|
||||
this.mapSearchParam.radius = radius
|
||||
const params = {
|
||||
gpsX: this.mapSearchParam.gpsX,
|
||||
gpsY: this.mapSearchParam.gpsY,
|
||||
radius: radius
|
||||
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
|
||||
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
|
||||
this.mapSearchParam.gpsY = e.layer._latlng.lat
|
||||
this.mapSearchParam.radius = radius
|
||||
const params = {
|
||||
gpsX: this.mapSearchParam.gpsX,
|
||||
gpsY: this.mapSearchParam.gpsY,
|
||||
radius: radius,
|
||||
}
|
||||
mybus.emit('getListByMap', params)
|
||||
this.getCameraByParentId()
|
||||
}
|
||||
mybus.emit('getListByMap', params)
|
||||
this.getCameraByParentId()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getCameraByParentId() {
|
||||
})
|
||||
},
|
||||
getCameraByParentId() {
|
||||
if (!this.whoShow1.itShowXiHaiAn) {
|
||||
debugger
|
||||
getCameraByParentId(this.mapSearchParam).then((res) => {
|
||||
debugger
|
||||
console.log('根据parent查询摄像头', res.data.data)
|
||||
this.addResourceTomap('videoMap', res.data.data)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
let params = {
|
||||
regionId:
|
||||
this.mapSearchParam.parentId ||
|
||||
'70be8c5b664f4bcf869d82f2e8335051',
|
||||
pageNum: this.mapSearchParam.pageNum,
|
||||
pageSize: this.mapSearchParam.pageSize,
|
||||
name: this.mapSearchParam.name || '',
|
||||
longitude: this.mapSearchParam.gpsX || '',
|
||||
atitude: this.mapSearchParam.gpsY || '',
|
||||
radius: this.mapSearchParam.radius || '',
|
||||
}
|
||||
let paramsFather = ''
|
||||
let i = 1
|
||||
for (var key in params) {
|
||||
if (params[key] === '') {
|
||||
delete params[key]
|
||||
} else {
|
||||
if (i != 1) {
|
||||
paramsFather += `&${key}=` + params[key]
|
||||
i += 1
|
||||
} else if (i == 1) {
|
||||
paramsFather += `${key}=` + params[key]
|
||||
i += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
getCameraByCondition(paramsFather).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);
|
||||
this.L = window.L || {}
|
||||
this.addressMatchService = L.supermap.addressMatchService(
|
||||
this.addressMatchUrl
|
||||
)
|
||||
},
|
||||
circleMode() {
|
||||
// 转换圈选模式
|
||||
this.circleModeFlag = !this.circleModeFlag
|
||||
if(this.circleModeFlag){
|
||||
if (this.circleModeFlag) {
|
||||
// 打开圈选模式
|
||||
this.circleSelectResource()
|
||||
}else {
|
||||
} else {
|
||||
// 关闭圈选模式，清空圈选内容，重新上图
|
||||
this.hiMapFun.removeLayerByLayerName('circlePloygonLayer')
|
||||
// 重置内容
|
||||
|
|
@ -220,38 +271,37 @@
|
|||
this.mapSearchParam.radius = ''
|
||||
this.getCameraByParentId()
|
||||
const params = {
|
||||
gpsX: this.mapSearchParam.gpsX,
|
||||
gpsY: this.mapSearchParam.gpsY,
|
||||
radius: this.mapSearchParam.radius
|
||||
}
|
||||
mybus.emit('getListByMap', params)
|
||||
gpsX: this.mapSearchParam.gpsX,
|
||||
gpsY: this.mapSearchParam.gpsY,
|
||||
radius: this.mapSearchParam.radius,
|
||||
}
|
||||
mybus.emit('getListByMap', params)
|
||||
}
|
||||
|
||||
},
|
||||
//查询地址建议匹配
|
||||
async searchAddressByKeyWord(queryString, cb, indexX) {
|
||||
this.disasterPointIndex = indexX;
|
||||
/* const res = await bdPlaceSearch({ searchKey: queryString });
|
||||
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) {
|
||||
const match = function (obj) {
|
||||
//console.log('ooooo',obj);
|
||||
obj.result.map(item => {
|
||||
item.value = item.address;
|
||||
});
|
||||
cb(obj.result);
|
||||
};
|
||||
obj.result.map((item) => {
|
||||
item.value = item.address
|
||||
})
|
||||
cb(obj.result)
|
||||
}
|
||||
if (!queryString) {
|
||||
cb([]);
|
||||
cb([])
|
||||
} else {
|
||||
var geoCodeParam = new SuperMap.GeoCodingParameter({
|
||||
'address': queryString,
|
||||
});
|
||||
this.addressMatchService.code(geoCodeParam, match);
|
||||
address: queryString,
|
||||
})
|
||||
this.addressMatchService.code(geoCodeParam, match)
|
||||
}
|
||||
},
|
||||
getCameraAllPage(page) {
|
||||
|
|
@ -268,9 +318,7 @@
|
|||
// console.log("时间#############" + (t2 - t1));
|
||||
})
|
||||
},
|
||||
getCameraAllLabel() {
|
||||
|
||||
},
|
||||
getCameraAllLabel() {},
|
||||
tabChange(item) {
|
||||
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
||||
if (item.labelName == '全部') {
|
||||
|
|
@ -488,26 +536,26 @@
|
|||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.ucs-leaflet-map {
|
||||
.iclient-leaflet-logo {
|
||||
display: none;
|
||||
.ucs-leaflet-map {
|
||||
.iclient-leaflet-logo {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-attribution {
|
||||
display: none;
|
||||
}
|
||||
svg {
|
||||
position: absolute;
|
||||
bottom: 0.1rem;
|
||||
right: 0.1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.leaflet-control-attribution {
|
||||
display: none;
|
||||
}
|
||||
svg {
|
||||
position: absolute;
|
||||
bottom: 0.1rem;
|
||||
right: 0.1rem;
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue