Compare commits

...

2 Commits

8 changed files with 349 additions and 273 deletions

View File

@ -2,13 +2,13 @@
* @Author: hisense.wuhongjian
* @Date: 2020-07-07 16:03:23
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-11-24 19:38:36
* @LastEditTime: 2022-11-27 23:42:04
* @Description: 系统静态参数配置
*/
var _global = {}
var CONFIGITEM = {
// version: 'qingdao', //
version: 'dev', // 西
version: 'xihaian', // 西
// version: 'dev', //
// version: 'zhanTingDev', // dev (2022-09-13:)
// version: 'qingdao', //

View File

@ -66,15 +66,6 @@ function createMarkerClusterLayer(layerClassName, mapObj) {
} else {
// 使
markerClusterLayer = L.markerClusterGroup({
// iconCreateFunction(cluster) {
// const markers = cluster.getAllChildMarkers()
// let n = 0
// for (let i = 0; i < markers.length; i++) {
// n += markers[i].number
// }
// return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
// },
// PolylineOptions spider
spiderfyOnMaxZoom: false,
//
showCoverageOnHover: true,

View File

@ -1651,8 +1651,9 @@
})
}
const showFlag = ref(true)
mybus.on('getCameraByParentId', (ids) => {
paramsGetResources2.value.regionId = ids
mybus.on('getCameraByParentId', (val) => {
console.log('倒腾位置2')
paramsGetResources2.value.regionId = val.id
getAppResources()
})
mybus.on('changeShowFlag', (flag) => {

View File

@ -224,19 +224,20 @@
}
)
},
//
videoPlay(playURL, index1) {
let that = this
this.realTime = true
mybus.emit('closeLoading', true)
setTimeout(() => {
mybus.emit('closeLoading', false)
if (!that.unStopable) {
message.warning('预览将在2s后停止')
setTimeout(() => {
that.stopAllPlay()
}, 6000)
}
}, 3000)
if (!that.unStopable) {
message.warning('预览将在约6s后停止')
setTimeout(() => {
that.stopAllPlay()
}, 6000)
}
this.mode = 0 //0 1
const { player, mode, urls } = this
// playURL = this.realplay

View File

@ -2,7 +2,11 @@
<div class="wrapper">
<div class="wrapper-title-left-tree" :key="showKey">
<div v-for="item in treeData" :key="item.id" class="primaryNode">
<div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
<div
class="top"
@click="showBottom(item)"
:class="item.show ? 'topSelect' : ''"
>
{{ item.name }}
({{ item.channelCount }})
<DownOutlined v-show="!item.show" />
@ -10,13 +14,28 @@
</div>
<div class="bottom" v-show="item.show">
<div v-for="val in item.children" :key="val.id" class="item">
<div class="up" :class="selectId == val.id ? 'select' : ''"
@click="showDown(item, val), onSelect(item, val)">
<div
class="up"
:class="selectId == val.id ? 'select' : ''"
@click="showDown(item, val), onSelect(item, val)"
>
<div>
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
v-show="selectId == val.id">
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
<svg
t="1654068878091"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2156"
width="0.25rem"
height="0.25rem"
v-show="selectId == val.id"
>
<path
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
p-id="2157"
fill="#0058e1"
></path>
</svg>
<span class="name">{{ val.name }}({{ val.channelCount }})</span>
</div>
@ -27,13 +46,30 @@
</span>
</div>
<div class="down" v-show="val.show">
<div v-for="child in val.children" :key="child.id" class="child"
:class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
<div
v-for="child in val.children"
:key="child.id"
class="child"
:class="selectId == child.id ? 'select2' : ''"
@click="onSelect(item, child, child)"
>
<div>
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
v-show="selectId == child.id">
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
<svg
t="1654068878091"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2156"
width="0.25rem"
height="0.25rem"
v-show="selectId == child.id"
>
<path
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
p-id="2157"
fill="#0058e1"
></path>
</svg>
<span class="name">
{{ child.name }}
@ -49,247 +85,198 @@
</div>
</template>
<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'
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
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'
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
export default defineComponent({
setup() {
const router = useRouter()
const whoShow1 = ref(whoShow)
const showKey = ref(0)
const treeData = ref([])
const selectId = ref('')
export default defineComponent({
setup() {
const router = useRouter()
const whoShow1 = ref(whoShow)
const showKey = ref(0)
const treeData = ref([])
const selectId = ref('')
//
const init = async () => {
treeData.value = []
console.log(
'router.currentRoute.value.query.select',
router.currentRoute.value.query.select
)
let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
if (select === '123') {
select = ''
//
const init = async () => {
treeData.value = []
console.log(
'router.currentRoute.value.query.select',
router.currentRoute.value.query.select
)
let select =
router.currentRoute.value.query.select ||
DETAIL_PAGE_CONTENT_DEFAULT_TAB
if (select === '123') {
select = ''
}
console.log(
'获取url中的select=====================>',
router.currentRoute.value.query.select
)
if (select == '基础设施') {
let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({
parentId: 'S4NbecfYB1DBH8HNULGS34',
})
} else {
// 西
res = await getCameraInfoByAreaId({
areaId: '70be8c5b664f4bcf869d82f2e8335051',
})
}
treeData.value = (res.data && res.data.data) || []
//
if (res.data && res.data.data.length == 1) {
showBottom(treeData.value[0])
}
}
}
console.log(
'获取url中的select=====================>',
router.currentRoute.value.query.select
)
if (select == '基础设施') {
let res = {};
mybus.on('getDeptList', () => {
init()
})
const onSelect = async (item, val, child) => {
console.log('item--------onSelect---->', item)
console.log('val------onSelect------>', val)
console.log('child-----onSelect------->', child)
mybus.emit('getCameraByParentId', {
id: val.id,
})
mybus.emit('getListByParentId', val.id)
let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
res = await getCameraAllOrgan({ parentId: val.id })
} else {
// 西
res = await getCameraInfoByAreaId({
areaId: '70be8c5b664f4bcf869d82f2e8335051',
})
res = await getCameraInfoByAreaId({ areaId: val.id })
}
treeData.value = res.data && res.data.data || []
//
if(res.data && res.data.data.length == 1) {
showBottom(treeData.value[0])
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
}
})
}
})
if (child) {
selectId.value = child.id
}
}
}
mybus.on('getDeptList', () => {
init()
})
const onSelect = async (item, val, child) => {
console.log('item--------onSelect---->', item);
console.log('val------onSelect------>', val);
console.log('child-----onSelect------->', child);
mybus.emit('getCameraByParentId', val.id)
mybus.emit('getListByParentId', val.id)
let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: val.id })
} else {
// 西
res = await getCameraInfoByAreaId({ areaId: val.id })
}
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
}
watch(selectId, (newVal) => {
if (newVal == '') {
mybus.emit('getCameraByParentId', {
id: '',
})
mybus.emit('getListByParentId', '')
}
})
if (child) {
selectId.value = child.id
}
}
watch(selectId, (newVal) => {
if (newVal == '') {
mybus.emit('getCameraByParentId', '')
mybus.emit('getListByParentId', '')
}
})
const showBottom = async (item) => {
item.show = !item.show;
let res = {};
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: item.id })
} else {
// 西
res = await getCameraInfoByAreaId({ areaId: item.id })
}
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {
treeData.value[index].children = res.data && res.data.data || []
console.log('treeData.value.[index]', treeData.value[index])
const showBottom = async (item) => {
item.show = !item.show
let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: item.id })
} else {
// 西
res = await getCameraInfoByAreaId({ areaId: item.id })
}
})
}
const showDown = (item, val) => {
selectId.value = val.id
console.log('item---showDown--------->', item);
console.log('val----showDown-------->', val);
if (item.children) {
val.show = !val.show;
//
if (!val.show) {
selectId.value = ''
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {
treeData.value[index].children = (res.data && res.data.data) || []
console.log('treeData.value.[index]', treeData.value[index])
}
})
}
const showDown = (item, val) => {
selectId.value = val.id
console.log('item---showDown--------->', item)
console.log('val----showDown-------->', val)
if (item.children) {
val.show = !val.show
//
if (!val.show) {
selectId.value = ''
}
}
}
}
return {
treeData,
showKey,
onSelect,
showBottom,
showDown,
selectId,
}
},
beforeUnmount() {
mybus.off('getDeptList')
console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
},
components: {
UpOutlined,
DownOutlined,
},
})
return {
treeData,
showKey,
onSelect,
showBottom,
showDown,
selectId,
}
},
beforeUnmount() {
mybus.off('getDeptList')
console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
},
components: {
UpOutlined,
DownOutlined,
},
})
</script>
<style lang="less" scoped>
.primaryNode {
.top {
width: 100%;
height: 0.4rem;
background: rgba(0, 135, 225, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.1rem;
margin-top: 0.08rem;
}
.top:hover {
cursor: pointer;
// 0058e1 0.5
background: rgba(0, 88, 225, 0.8);
color: white;
:deep(.anticon) {
color: white;
}
}
.topSelect {
background: #0058e1;
color: white;
:deep(.anticon) {
color: white;
}
}
.bottom {
width: 100%;
background: rgba(244, 245, 248, 0.8);
padding: 0 0.1rem;
// margin-bottom: .08rem;
.up {
cursor: pointer;
.primaryNode {
.top {
width: 100%;
height: 0.4rem;
background: rgba(0, 135, 225, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 0.01rem solid #ccc;
padding: 0 0.1rem;
margin-top: 0.08rem;
}
.top:hover {
cursor: pointer;
// 0058e1 0.5
background: rgba(0, 88, 225, 0.8);
color: white;
:deep(.anticon) {
color: white;
}
}
.topSelect {
background: #0058e1;
color: white;
:deep(.anticon) {
color: white;
}
}
.bottom {
width: 100%;
background: rgba(244, 245, 248, 0.8);
padding: 0 0.1rem;
&>div {
display: flex;
justify-content: flex-start;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
.up:hover {
.name {
color: #0058e1;
font-weight: 600;
}
span {
color: #0058e1;
font-weight: 600;
}
}
.select {
padding: 0 0.1rem 0 0;
.name {
width: 1.7rem;
color: #0058e1 !important;
font-weight: 600;
}
span {
color: #0058e1;
font-weight: 600;
}
}
.item:nth-of-type(1) .up {
border-top: none;
}
.down {
width: 100%;
.child {
// margin-bottom: .08rem;
.up {
cursor: pointer;
height: 0.4rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 0.01rem solid #ccc;
padding: 0 0.1rem;
&>div {
& > div {
display: flex;
justify-content: flex-start;
}
@ -304,7 +291,7 @@ export default defineComponent({
}
}
.child:hover {
.up:hover {
.name {
color: #0058e1;
font-weight: 600;
@ -316,10 +303,12 @@ export default defineComponent({
}
}
.select2 {
.select {
padding: 0 0.1rem 0 0;
.name {
width: 1.7rem;
color: #0058e1;
color: #0058e1 !important;
font-weight: 600;
}
@ -327,10 +316,65 @@ export default defineComponent({
color: #0058e1;
font-weight: 600;
}
}
padding: 0 0.1rem 0 0;
.item:nth-of-type(1) .up {
border-top: none;
}
.down {
width: 100%;
.child {
cursor: pointer;
height: 0.4rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.1rem;
& > div {
display: flex;
justify-content: flex-start;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
.child:hover {
.name {
color: #0058e1;
font-weight: 600;
}
span {
color: #0058e1;
font-weight: 600;
}
}
.select2 {
.name {
width: 1.7rem;
color: #0058e1;
font-weight: 600;
}
span {
color: #0058e1;
font-weight: 600;
}
padding: 0 0.1rem 0 0;
}
}
}
}
}
</style>

View File

@ -157,7 +157,9 @@
}
} else {
if (selectId.value !== '') {
mybus.emit('getCameraByParentId', selectId.value)
mybus.emit('getCameraByParentId', {
id: selectId.value,
})
} else {
mybus.emit('clearLeftSelect')
}
@ -228,14 +230,21 @@
selectId.value = ''
} else {
selectId.value = child.id
mybus.emit('getCameraByParentId', val.id)
//
const param = {
id: val.id,
reset: true,
}
mybus.emit('getCameraByParentId', param)
}
}
}
watch(selectId, (newVal) => {
if (newVal == '') {
mybus.emit('getCameraByParentId', '70be8c5b664f4bcf869d82f2e8335051')
mybus.emit('getCameraByParentId', {
id: '70be8c5b664f4bcf869d82f2e8335051',
})
}
})
@ -261,7 +270,9 @@
selectId.value = ''
// mybus.emit('clearLeftSelect')
} else {
mybus.emit('getCameraByParentId', val.id)
mybus.emit('getCameraByParentId', {
id: val.id,
})
}
}
}

View File

@ -403,7 +403,14 @@
</div>
<div v-if="room">
<!-- 地图 -->
<div class="map-contain" v-if="showMap">
<div
class="map-contain"
v-if="showMap"
v-loading="spinningHome"
element-loading-text="Loading..."
element-loading-svg-view-box="-10, -10, 50, 50"
element-loading-background="rgba(122, 122, 122, 0.8)"
>
<video-surveillance></video-surveillance>
</div>
<!-- 表格 -->
@ -692,6 +699,7 @@
import moment from 'moment'
import { useStore } from 'vuex'
import debounce from 'lodash/debounce'
import { stubFalse } from 'lodash'
const store = useStore()
const username = store.getters['user/username']
const props = defineProps({
@ -699,6 +707,7 @@
searchValue: { type: String, default: '' },
searchType: { type: String, default: '' },
})
const spinningHome = ref(false)
const current = ref(1)
const videoTotal = ref(0)
const router = useRouter()
@ -2036,9 +2045,12 @@
}
}
}
console.log('位置1')
spinningHome.value = true
getCameraByCondition(params)
.then((res) => {
console.log('res--查询摄像头---------->', res)
spinningHome.value = false
loadingCamera.value = false
dataSource.value = res.data.data
pagination.value.total = res.data.count

View File

@ -1,10 +1,19 @@
<template>
<div class="ucs-leaflet-map">
<div id="contain">
<div class="map-box">
<div id="contain" >
<div class="map-box" >
<div :id="mapId" class="normal-map-content">
<tiled-map :hi-map="hiMap" :map-id="mapId" />
<tiled-map v-loading="spinning" element-loading-text="Loading..."
element-loading-svg-view-box="-10, -10, 50, 50"
element-loading-background="rgba(122, 122, 122, 0.8)"
:hi-map="hiMap" :map-id="mapId" />
</div>
</div>
<div class="searchPoint">
@ -41,6 +50,7 @@
:fetch-suggestions="querySearch"
clearable
class="input-with-select"
@change = "changeComplete"
placeholder="请输入关键字"
@select="
(addressItem) => {
@ -92,7 +102,7 @@
data-spm-anchor-id="a313x.7781069.0.i0"
></path>
</svg>
<img class="icon-poylon" @click="areaMode()" src="~@/supermap/image/icon-poylon.png">
<img class="icon-poylon" @click="areaMode()" src="~@/supermap/image/icon-poylon.png">
</div>
<video-play
@ -104,7 +114,7 @@
</template>
<script>
import { ElMessage } from 'element-plus'
import { ElMessage, ElLoading } from 'element-plus'
import { message } from 'ant-design-vue'
import { HieimpMap } from '@/supermap/map-init'
import TiledMap from './components/tiledMap'
@ -134,6 +144,7 @@ import { ElMessage } from 'element-plus'
checkboxGroup: [],
tabList: [],
state: '',
spinning: false,
timeout: null,
camreaTree: [],
camreaTreeIsShow: true,
@ -193,9 +204,14 @@ import { ElMessage } from 'element-plus'
// this.getMapPoint()
// parentId
mybus.off('getCameraByParentId')
mybus.on('getCameraByParentId', (parentId) => {
mybus.on('getCameraByParentId', (val) => {
debugger
this.mapSearchParam.parentId = parentId
console.log('倒腾位置1')
//
if (val.reset) {
this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
}
this.mapSearchParam.parentId = val.id
this.mapSearchParam.type = "1"
this.mapSearchParam.pageSize = 10000
this.getCameraByParentId('','department')
@ -234,6 +250,12 @@ import { ElMessage } from 'element-plus'
})
},
methods: {
changeComplete(val) {
if (val === '') {
// console.log('')
this.hiMapFun.removeLayerByLayerName('potcon');
}
},
//
queryCameraConditionPlace(data) {
let params = {
@ -367,13 +389,6 @@ import { ElMessage } from 'element-plus'
this.mapSearchParam.gpsY = e.layer._latlng.lat
this.mapSearchParam.radius = radius
this.mapSearchParam.type = 1
const params = {
gpsX: this.mapSearchParam.gpsX,
gpsY: this.mapSearchParam.gpsY,
radius: radius,
type: this.mapSearchParam.type,
}
// mybus.emit('getListByMap', params)
this.getCameraByParentId('map')
}
}
@ -387,14 +402,11 @@ import { ElMessage } from 'element-plus'
this.addResourceTomap('videoMap', res.data.data)
})
} else {
this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
console.log('根据parent查询摄像头111111',this.mapSearchParam)
// this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
let params = {
regionId:
this.mapSearchParam.parentId ||
'70be8c5b664f4bcf869d82f2e8335051',
// pageNum: this.mapSearchParam.pageNum,
// pageSize: this.mapSearchParam.type!=0?this.mapSearchParam.pageSize:10,
name: this.mapSearchParam.cameraName || '',
longitude: this.mapSearchParam.gpsX || '',
latitude: this.mapSearchParam.gpsY || '',
@ -420,8 +432,11 @@ import { ElMessage } from 'element-plus'
if(dataName){
params.type='0';
}
console.log('位置2')
this.spinning = true;
getCameraByCondition(params).then((res) => {
//console.log('parent44444', res.data.data)
this.spinning = false;
if(type=='map'){
let params = this.mapSearchParam;
params.dataSource = res.data.data||0;
@ -429,11 +444,11 @@ import { ElMessage } from 'element-plus'
mybus.emit('getListByMap', params);
}
this.pointAllData = res.data.data;
if(this.mapSearchParam.type!=0)
// if(this.mapSearchParam.type!=0)
this.addResourceTomap('videoMap', res.data.data)
else
this.addResourceTomap('videoMap', []) //}
// else
// this.addResourceTomap('videoMap', []) //}
})
}
@ -509,6 +524,7 @@ import { ElMessage } from 'element-plus'
async searchAddressByKeyWord(queryString, cb, indexX) {
console.log('querySearch',queryString, cb,this.restaurants)
if(queryString){
console.log('位置3')
getCameraByCondition({
// pageNum: 1,
// pageSize: 40000,
@ -779,7 +795,7 @@ import { ElMessage } from 'element-plus'
.leaflet-control-attribution {
display: none;
}
svg,.icon-poylon {
.icon, .icon-poylon {
position: absolute;
bottom: 0.1rem;
right: 0.1rem;