Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
3672d8fbf8
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">概况和异常</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrapper {
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">请求分析</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrapper {
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">上边时间</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrapper {
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!-- 权限管理-能力运行监控 -->
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="capability-operation-monitoring-top">
|
||||||
|
<capability-operation-monitoring-time></capability-operation-monitoring-time>
|
||||||
|
</div>
|
||||||
|
<div class="capability-operation-monitoring-center">
|
||||||
|
<abnormal-situation></abnormal-situation>
|
||||||
|
</div>
|
||||||
|
<div class="capability-operation-monitoring-bottom">
|
||||||
|
<analysis-of-the-request></analysis-of-the-request>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AbnormalSituation from "./components/AbnormalSituation.vue";
|
||||||
|
import AnalysisOfTheRequest from "./components/AnalysisOfTheRequest.vue";
|
||||||
|
import CapabilityOperationMonitoringTime from "./components/CapabilityOperationMonitoringTime.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AbnormalSituation,
|
||||||
|
AnalysisOfTheRequest,
|
||||||
|
CapabilityOperationMonitoringTime,
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrapper {
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -104,6 +104,11 @@
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}的浏览量:</br> {c} 次',
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: datas.value,
|
data: datas.value,
|
||||||
|
|
|
@ -1605,8 +1605,9 @@
|
||||||
}
|
}
|
||||||
.top-content-father {
|
.top-content-father {
|
||||||
width: 10.87rem;
|
width: 10.87rem;
|
||||||
padding-left: 0.2rem;
|
// padding-left: 0.2rem;
|
||||||
// margin-bottom: .2rem;
|
// margin-bottom: .2rem;
|
||||||
|
padding: 0.16rem;
|
||||||
background: #f3f5f9;
|
background: #f3f5f9;
|
||||||
.top-content-son {
|
.top-content-son {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="wrapper-title-left-tree" :key="showKey">
|
<div class="wrapper-title-left-tree" :key="showKey">
|
||||||
<div v-for="item in treeData" :key="item.key" class="primaryNode">
|
<div v-for="item in treeData" :key="item.id" class="primaryNode">
|
||||||
<!-- <div v-if="!item.children || item.children.length == 0">
|
<!-- <div v-if="!item.children || item.children.length == 0">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</div> -->
|
</div> -->
|
||||||
|
@ -10,15 +10,15 @@
|
||||||
@click="showBottom(item)"
|
@click="showBottom(item)"
|
||||||
:class="item.show ? 'topSelect' : ''"
|
:class="item.show ? 'topSelect' : ''"
|
||||||
>
|
>
|
||||||
{{ item.title }}
|
{{ item.name }}
|
||||||
<DownOutlined v-show="!item.show" />
|
<DownOutlined v-show="!item.show" />
|
||||||
<UpOutlined v-show="item.show" />
|
<UpOutlined v-show="item.show" />
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-show="item.show">
|
<div class="bottom" v-show="item.show">
|
||||||
<div v-for="val in item.children" :key="val.key" class="item">
|
<div v-for="val in item.children" :key="val.id" class="item">
|
||||||
<div
|
<div
|
||||||
class="up"
|
class="up"
|
||||||
:class="selectId == val.key ? 'select' : ''"
|
:class="selectId == val.id ? 'select' : ''"
|
||||||
@click="showDown(item, val), onSelect(item, val)"
|
@click="showDown(item, val), onSelect(item, val)"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
p-id="2156"
|
p-id="2156"
|
||||||
width="0.25rem"
|
width="0.25rem"
|
||||||
height="0.25rem"
|
height="0.25rem"
|
||||||
v-show="selectId == val.key"
|
v-show="selectId == val.id"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
@ -40,10 +40,10 @@
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
{{ val.title }}
|
{{ val.name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span v-if="item.title !== '区级'">{{ val.total }}</span>
|
<span v-if="item.children.length < 0">{{ val.total }}</span>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<down-outlined v-show="!val.show" />
|
<down-outlined v-show="!val.show" />
|
||||||
<up-outlined v-show="val.show" />
|
<up-outlined v-show="val.show" />
|
||||||
|
@ -52,9 +52,9 @@
|
||||||
<div class="down" v-show="val.show">
|
<div class="down" v-show="val.show">
|
||||||
<div
|
<div
|
||||||
v-for="child in val.children"
|
v-for="child in val.children"
|
||||||
:key="child.key"
|
:key="child.id"
|
||||||
class="child"
|
class="child"
|
||||||
:class="selectId == child.key ? 'select2' : ''"
|
:class="selectId == child.id ? 'select2' : ''"
|
||||||
@click="onSelect(item, val, child)"
|
@click="onSelect(item, val, child)"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
@ -67,7 +67,7 @@
|
||||||
p-id="2156"
|
p-id="2156"
|
||||||
width="0.25rem"
|
width="0.25rem"
|
||||||
height="0.25rem"
|
height="0.25rem"
|
||||||
v-show="selectId == child.key"
|
v-show="selectId == child.id"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
@ -76,7 +76,7 @@
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
{{ child.title }}
|
{{ child.name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span>{{ child.total }}</span>
|
<span>{{ child.total }}</span>
|
||||||
|
@ -97,7 +97,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, watch } from 'vue'
|
import { defineComponent, ref, watch } from 'vue'
|
||||||
import { selectDeptList } from '@/api/home.js'
|
import { getCameraAllOrgan } from '@/api/videoSurveillance'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||||||
|
@ -127,43 +127,44 @@
|
||||||
'获取url中的select=====================>',
|
'获取url中的select=====================>',
|
||||||
router.currentRoute.value.query.select
|
router.currentRoute.value.query.select
|
||||||
)
|
)
|
||||||
if (
|
if (select == '基础设施') {
|
||||||
// select !== '基础设施' &&
|
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||||||
select !== '数据资源' &&
|
(res) => {
|
||||||
select !== '知识库'
|
treeData.value = res.data.data
|
||||||
) {
|
|
||||||
selectDeptList({ type: select }).then((res) => {
|
|
||||||
// console.log('区划数据=========================>', res.data.data)
|
|
||||||
res.data.data.forEach((val) => {
|
|
||||||
if (val.type !== '全部能力目录') {
|
|
||||||
let obj = {
|
|
||||||
title: val.type,
|
|
||||||
total: val.total,
|
|
||||||
show: val.type === '市级' ? true : false,
|
|
||||||
select: false,
|
|
||||||
key: val.type,
|
|
||||||
children: [],
|
|
||||||
}
|
}
|
||||||
switch (val.type) {
|
)
|
||||||
case '市级':
|
// selectDeptList({ type: select }).then((res) => {
|
||||||
case '其他':
|
// // console.log('区划数据=========================>', res.data.data)
|
||||||
generateChildren(val, obj)
|
// res.data.data.forEach((val) => {
|
||||||
break
|
// if (val.type !== '全部能力目录') {
|
||||||
case '区级':
|
// let obj = {
|
||||||
generateChildren2(val, obj)
|
// title: val.type,
|
||||||
break
|
// total: val.total,
|
||||||
}
|
// show: val.type === '市级' ? true : false,
|
||||||
treeData.value.push(obj)
|
// select: false,
|
||||||
}
|
// key: val.type,
|
||||||
})
|
// children: [],
|
||||||
// 排序
|
// }
|
||||||
const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
|
// switch (val.type) {
|
||||||
treeData.value.sort((a, b) => {
|
// case '市级':
|
||||||
return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
|
// case '其他':
|
||||||
})
|
// generateChildren(val, obj)
|
||||||
console.log('左侧树结构数据======================>', treeData.value)
|
// break
|
||||||
showKey.value++
|
// case '区级':
|
||||||
})
|
// generateChildren2(val, obj)
|
||||||
|
// break
|
||||||
|
// }
|
||||||
|
// treeData.value.push(obj)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// // 排序
|
||||||
|
// const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
|
||||||
|
// treeData.value.sort((a, b) => {
|
||||||
|
// return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
|
||||||
|
// })
|
||||||
|
// console.log('左侧树结构数据======================>', treeData.value)
|
||||||
|
// showKey.value++
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
mybus.on('getDeptList', () => {
|
mybus.on('getDeptList', () => {
|
||||||
|
@ -241,24 +242,22 @@
|
||||||
// }
|
// }
|
||||||
const selectId = ref('')
|
const selectId = ref('')
|
||||||
const onSelect = (item, val, child) => {
|
const onSelect = (item, val, child) => {
|
||||||
if (item.title === '区级') {
|
console.log('item, val, child', child)
|
||||||
|
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 (child) {
|
if (child) {
|
||||||
if (selectId.value !== child.key) {
|
selectId.value = child.id
|
||||||
mybus.emit('paramsGetResources', [child.key])
|
|
||||||
selectId.value = child.key
|
|
||||||
} else {
|
|
||||||
mybus.emit('paramsGetResources', [])
|
|
||||||
selectId.value = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (selectId.value !== val.key) {
|
|
||||||
mybus.emit('paramsGetResources', [val.key])
|
|
||||||
selectId.value = val.key
|
|
||||||
} else {
|
|
||||||
mybus.emit('paramsGetResources', [])
|
|
||||||
selectId.value = ''
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
watch(selectedKeys, () => {
|
watch(selectedKeys, () => {
|
||||||
|
@ -305,10 +304,18 @@
|
||||||
}
|
}
|
||||||
const showBottom = (item) => {
|
const showBottom = (item) => {
|
||||||
item.show = !item.show
|
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])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const showDown = (item, val) => {
|
const showDown = (item, val) => {
|
||||||
console.log('showDown', val)
|
console.log('showDown', val)
|
||||||
if (item.title === '区级') {
|
if (item.children) {
|
||||||
val.show = !val.show
|
val.show = !val.show
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
<div class="infrastructrue-tab">
|
<div class="infrastructrue-tab">
|
||||||
<div v-for="(item, index) in tabList" :key="index" class="tabBox">
|
<div v-for="(item, index) in tabList" :key="index" class="tabBox">
|
||||||
<b class="leftType">{{ item.title }}</b>
|
<b class="leftType">{{ item.title }}</b>
|
||||||
|
<button @click="nullClick" v-if="item.title == '视频细分'">清空</button>
|
||||||
<span
|
<span
|
||||||
v-for="itemContent in item.content"
|
v-for="itemContent in item.content"
|
||||||
:key="itemContent"
|
:key="itemContent"
|
||||||
|
@ -17,6 +18,10 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 地图 -->
|
||||||
|
<div class="map-contain">
|
||||||
|
<video-surveillance></video-surveillance>
|
||||||
|
</div>
|
||||||
<!-- 功能行 -->
|
<!-- 功能行 -->
|
||||||
<div class="infrastructrue-content">
|
<div class="infrastructrue-content">
|
||||||
<!-- 表格数据统计 -->
|
<!-- 表格数据统计 -->
|
||||||
|
@ -84,7 +89,13 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||||
|
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||||
|
import { dataType } from 'element-plus/es/components/table-v2/src/common'
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
onMounted(() => {
|
||||||
|
tabClick(0, '视频资源')
|
||||||
|
})
|
||||||
const tabList = ref([
|
const tabList = ref([
|
||||||
{
|
{
|
||||||
title: '设施类型',
|
title: '设施类型',
|
||||||
|
@ -92,18 +103,19 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '视频细分',
|
title: '视频细分',
|
||||||
content: [
|
content: [],
|
||||||
'云主机',
|
|
||||||
'算力主机',
|
|
||||||
'对象存储',
|
|
||||||
'堡垒机',
|
|
||||||
'防火墙',
|
|
||||||
'网闸',
|
|
||||||
'负载均衡',
|
|
||||||
'公网IP',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
]) //初始化数据
|
])
|
||||||
|
// const dataTypeList = () => {
|
||||||
|
// if (tabList.value[0].content.indexOf('视频资源') != -1) {
|
||||||
|
// tabList.value[1].content = ['123344', '213124']
|
||||||
|
// }else if(tabList.value[0].content.indexOf('云资源') != -1){
|
||||||
|
// tabList.value[1].content = ['5555', '666']
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// dataTypeList()
|
||||||
|
//初始化数据
|
||||||
const init = () => {
|
const init = () => {
|
||||||
tabList.value.map((item) => {
|
tabList.value.map((item) => {
|
||||||
let params = {
|
let params = {
|
||||||
|
@ -118,13 +130,13 @@
|
||||||
//表格的高度
|
//表格的高度
|
||||||
let tableHeight = ref('600')
|
let tableHeight = ref('600')
|
||||||
//tab切换点击事件
|
//tab切换点击事件
|
||||||
const tabClick = (indexFather, name, fatherName) => {
|
const tabClick = (indexFather, name) => {
|
||||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||||
if (fatherName == '视频资源') {
|
if (name == '视频资源') {
|
||||||
tableHeight.value = 330
|
tableHeight.value = 330
|
||||||
} else if (fatherName == '云资源') {
|
} else if (name == '云资源') {
|
||||||
tableHeight.value = 600
|
tableHeight.value = 600
|
||||||
} else if (fatherName == '感知资源') {
|
} else if (name == '感知资源') {
|
||||||
tableHeight.value = 330
|
tableHeight.value = 330
|
||||||
}
|
}
|
||||||
clickList.value[indexFather].content.splice(
|
clickList.value[indexFather].content.splice(
|
||||||
|
@ -132,17 +144,51 @@
|
||||||
1
|
1
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
if (fatherName == '视频资源') {
|
if (name == '视频资源') {
|
||||||
tableHeight.value = 330
|
tableHeight.value = 330
|
||||||
} else if (fatherName == '云资源') {
|
tabList.value[1].content = []
|
||||||
tableHeight.value = 600
|
clickList.value[1].content = []
|
||||||
} else if (fatherName == '感知资源') {
|
|
||||||
tableHeight.value = 330
|
|
||||||
}
|
|
||||||
clickList.value[indexFather].content[0] = name
|
clickList.value[indexFather].content[0] = name
|
||||||
|
const params = {
|
||||||
|
page: 1,
|
||||||
|
limit: 50,
|
||||||
|
dictTypeId: '1541336217898848257',
|
||||||
|
}
|
||||||
|
getCategoryTreePage(params).then((res) => {
|
||||||
|
res.data.data.list.forEach((val) => {
|
||||||
|
tabList.value[1].content.push(val.dictLabel)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else if (name == '云资源') {
|
||||||
|
tableHeight.value = 600
|
||||||
|
clickList.value[1].content = []
|
||||||
|
clickList.value[indexFather].content[0] = name
|
||||||
|
tabList.value[1].content = [
|
||||||
|
'云主机',
|
||||||
|
'算力主机',
|
||||||
|
'对象存储',
|
||||||
|
'堡垒机',
|
||||||
|
'防火墙',
|
||||||
|
'网闸',
|
||||||
|
'负载均衡',
|
||||||
|
'公网IP',
|
||||||
|
]
|
||||||
|
} else if (name == '感知资源') {
|
||||||
|
tableHeight.value = 330
|
||||||
|
clickList.value[1].content = []
|
||||||
|
clickList.value[indexFather].content[0] = name
|
||||||
|
tabList.value[1].content = ['333333', '213124']
|
||||||
|
} else {
|
||||||
|
clickList.value[indexFather].content.push(name)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
console.log('clickList.value', clickList.value)
|
console.log('clickList.value', clickList.value)
|
||||||
}
|
}
|
||||||
|
// 清空
|
||||||
|
const nullClick = () => {
|
||||||
|
clickList.value[1].content = []
|
||||||
|
console.log('hhhhhhhh')
|
||||||
|
}
|
||||||
const name = ref('')
|
const name = ref('')
|
||||||
// 搜索框
|
// 搜索框
|
||||||
const onSearch = (name) => {
|
const onSearch = (name) => {
|
||||||
|
@ -298,13 +344,15 @@
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.infrastructrueBox {
|
.infrastructrueBox {
|
||||||
width: 10.87rem;
|
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
background: #f3f5f9;
|
// background: #f3f5f9;
|
||||||
.infrastructrue-tab {
|
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
padding: 0.2rem;
|
/* padding: 0.16rem; */
|
||||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||||
|
.infrastructrue-tab {
|
||||||
|
// background: #ffffff;
|
||||||
|
// padding: 0.2rem;
|
||||||
|
// border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||||
span {
|
span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 0.24rem;
|
height: 0.24rem;
|
||||||
|
@ -326,7 +374,6 @@
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.tabBox {
|
.tabBox {
|
||||||
height: 0.3rem;
|
|
||||||
margin-bottom: 0.16rem;
|
margin-bottom: 0.16rem;
|
||||||
}
|
}
|
||||||
.tabBox:last-of-type {
|
.tabBox:last-of-type {
|
||||||
|
@ -423,5 +470,11 @@
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.map-contain {
|
||||||
|
// width: 9.46rem;
|
||||||
|
height: 4.1rem;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="ucs-leaflet-map">
|
||||||
<div id="contain">
|
<div id="contain">
|
||||||
<div class="map-box">
|
<div class="map-box">
|
||||||
<div :id="mapId" class="normal-map-content">
|
<div :id="mapId" class="normal-map-content">
|
||||||
|
@ -8,7 +8,32 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="searchPoint">
|
<div class="searchPoint">
|
||||||
<el-autocomplete
|
<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
|
||||||
class="inline-input"
|
class="inline-input"
|
||||||
prefix-icon="Search"
|
prefix-icon="Search"
|
||||||
v-model="state"
|
v-model="state"
|
||||||
|
@ -28,93 +53,26 @@
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:append>搜索</template>
|
<template v-slot:append>搜索</template>
|
||||||
</el-autocomplete>
|
</el-autocomplete> -->
|
||||||
</div>
|
</div>
|
||||||
|
<svg
|
||||||
<aside class="tag-box">
|
t="1656319660834"
|
||||||
<div class="refresh" @click="refresh">
|
class="icon"
|
||||||
<el-icon><Refresh /></el-icon>
|
viewBox="0 0 1024 1024"
|
||||||
</div>
|
version="1.1"
|
||||||
<el-tabs type="border-card" class="border-card">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<el-tab-pane label="视频标签">
|
p-id="1691"
|
||||||
<el-input
|
width="0.48rem"
|
||||||
placeholder="请输入关键词"
|
height="0.48rem"
|
||||||
suffix-icon="Search"
|
@click="circleMode()"
|
||||||
v-model="labelSearch"
|
|
||||||
@input="searchLabel"
|
|
||||||
></el-input>
|
|
||||||
<el-checkbox-group v-model="checkboxGroup">
|
|
||||||
<el-checkbox-button
|
|
||||||
v-for="item in tabList"
|
|
||||||
:label="item.labelName"
|
|
||||||
:key="item.id"
|
|
||||||
@change="tabChange(item)"
|
|
||||||
>
|
>
|
||||||
{{ item.labelName }}
|
<path
|
||||||
</el-checkbox-button>
|
d="M736.21333333 638.08l69.76-54.08c5.22666667-4.05333333 8-10.45333333 7.46666667-17.06666667-0.53333333-6.61333333-4.37333333-12.48-10.24-15.57333333L450.02666666 361.38666666c-6.82666667-3.62666667-15.04-2.98666667-21.12 1.70666667-6.08 4.69333333-8.85333333 12.58666667-7.04 20.05333333l95.57333334 389.54666667c1.6 6.4 6.29333333 11.62666667 12.48 13.76 6.18666667 2.13333333 13.12 1.06666667 18.34666666-2.98666667l69.86666667-54.08L769.06666666 924.37333333c3.2 4.05333333 7.78666667 6.72 12.90666667 7.36 0.85333333 0.10666667 1.6 0.10666667 2.45333333 0.10666667 4.26666667 0 8.53333333-1.38666667 11.94666667-4.05333334l87.25333333-67.52c8.53333333-6.61333333 10.02666667-18.88 3.52-27.30666666L736.21333333 638.08zM178.24 282.02666666l-31.25333334-21.01333333c-14.61333333 21.76-27.30666667 44.90666667-37.86666666 68.90666667l34.56 15.14666666c9.6-21.86666667 21.22666667-43.09333333 34.56-63.04zM549.54666666 103.89333333l3.2-37.54666667c-26.02666667-2.24-52.69333333-2.13333333-78.50666666 0.21333334l3.41333333 37.54666666c23.57333333-2.13333333 48-2.24 71.89333333-0.21333333zM120.74666666 413.22666666l-36.69333333-8.74666666c-6.08 25.38666667-9.92 51.52-11.30666667 77.76l37.65333334 2.13333333c1.38666667-24 4.8-47.89333333 10.34666666-71.14666667zM112.64 556.26666666l-37.44 4.48c3.09333333 26.02666667 8.64 51.94666667 16.32 76.90666667l36.05333333-11.09333333c-7.04-22.82666667-12.05333333-46.50666667-14.93333333-70.29333334zM919.36 327.46666666c-10.66666667-23.89333333-23.46666667-46.93333333-38.29333334-68.58666666l-31.14666666 21.22666666c13.44 19.84 25.28 40.96 34.98666666 62.82666667l34.45333334-15.46666667zM831.36 197.97333333c-18.34666667-18.77333333-38.4-35.94666667-59.62666667-51.09333333L749.86666666 177.6c19.52 13.86666667 37.86666667 29.65333333 54.61333334 46.82666666l26.88-26.45333333zM703.89333333 107.09333333c-23.68-11.2-48.53333333-20.37333333-73.81333333-27.09333333l-9.81333334 36.37333333c23.14666667 6.18666667 45.86666667 14.61333333 67.52 24.85333333l16.10666667-34.13333333zM277.76 178.98666666l-22.08-30.50666666c-21.22666667 15.36-41.17333333 32.64-59.41333334 51.52l27.09333334 26.13333333c16.74666667-17.28 35.09333333-33.06666667 54.4-47.14666667zM348.90666666 918.08c24.32 9.81333333 49.6 17.49333333 75.2 22.82666666l7.68-36.90666666c-23.46666667-4.90666667-46.61333333-11.94666667-68.8-20.90666667l-14.08 34.98666667zM503.25333333 912.42666666l-1.06666667 37.65333334c4.16 0.10666667 8.42666667 0.21333333 12.58666667 0.21333333 21.97333333 0 44.16-1.6 65.81333333-4.90666667l-5.54666666-37.22666666c-23.57333333 3.52-47.89333333 4.90666667-71.78666667 4.26666666zM944.85333333 401.81333333l-36.58666667 8.96c5.65333333 23.14666667 9.28 47.14666667 10.77333334 71.04l37.65333333-2.34666667c-1.70666667-26.13333333-5.65333333-52.26666667-11.84-77.65333333zM396.8 80.64c-25.28 6.93333333-50.02666667 16.21333333-73.6 27.62666666l16.32 33.92c21.54666667-10.34666667 44.26666667-18.88 67.30666666-25.17333333L396.8 80.64zM121.17333333 710.4c11.94666667 23.25333333 26.13333333 45.54666667 42.13333333 66.34666666l29.86666667-22.93333333c-14.61333333-18.98666667-27.52-39.46666667-38.50666667-60.69333333L121.17333333 710.4zM216.42666666 834.66666666c19.30666667 17.70666667 40.42666667 33.70666667 62.50666667 47.68l20.05333333-31.89333333c-20.26666667-12.8-39.46666667-27.41333333-57.17333333-43.62666667l-25.38666667 27.84z"
|
||||||
</el-checkbox-group>
|
p-id="1692"
|
||||||
</el-tab-pane>
|
fill="#1296db"
|
||||||
<el-tab-pane label="视频列表">
|
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||||
<el-input
|
></path>
|
||||||
placeholder="请输入关键词"
|
</svg>
|
||||||
suffix-icon="Search"
|
|
||||||
v-model="labelSearch"
|
|
||||||
@input="searchCameraTree"
|
|
||||||
></el-input>
|
|
||||||
<!-- <el-radio-group v-model="checkStatus">
|
|
||||||
<el-radio :label="2">全部</el-radio>
|
|
||||||
<el-radio :label="1">正常</el-radio>
|
|
||||||
<el-radio :label="0">异常</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
<span class="reset-button" @click="reset">重置</span> -->
|
|
||||||
<el-tree
|
|
||||||
id="tree"
|
|
||||||
:data="camreaTree"
|
|
||||||
:props="{ label: 'name', children: 'children', isLeaf: 'leaf' }"
|
|
||||||
:load="loadNode"
|
|
||||||
node-key="id"
|
|
||||||
@node-click="treeCameraClick"
|
|
||||||
empty-text="暂无数据"
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
lazy
|
|
||||||
>
|
|
||||||
<!-- 是否离线checkStatus -->
|
|
||||||
<!-- <span
|
|
||||||
:style="{
|
|
||||||
backgroundColor: data?.checkStatus == 0 ? '#ccc' : '',
|
|
||||||
}"
|
|
||||||
slot-scope="{ node, data }"
|
|
||||||
class="custom-tree-node"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{{ data?.checkStatus == 0 ? `(离线)` : '' }}{{ data.name }}
|
|
||||||
</span>
|
|
||||||
</span> -->
|
|
||||||
</el-tree>
|
|
||||||
<!-- <el-tree
|
|
||||||
v-show="!camreaTreeIsShow"
|
|
||||||
ref="tree"
|
|
||||||
:data="camreaTreeSingle"
|
|
||||||
:props="{ label: 'channelName', children: 'children' }"
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
@node-click="treeCameraClick"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
:style="{
|
|
||||||
backgroundColor: data?.checkStatus == 0 ? '#ccc' : '',
|
|
||||||
}"
|
|
||||||
slot-scope="{ node, data }"
|
|
||||||
class="custom-tree-node"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{{ data?.checkStatus == 0 ? `(离线)` : ''
|
|
||||||
}}{{ data?.channelName }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</el-tree> -->
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
<video-play
|
<video-play
|
||||||
v-if="openVideo"
|
v-if="openVideo"
|
||||||
|
@ -146,9 +104,7 @@
|
||||||
return {
|
return {
|
||||||
hiMap: new HieimpMap(), // 地图全局对象
|
hiMap: new HieimpMap(), // 地图全局对象
|
||||||
mapId: 'map-single', // 地图容器的id
|
mapId: 'map-single', // 地图容器的id
|
||||||
|
|
||||||
cameraAllData: [],
|
cameraAllData: [],
|
||||||
|
|
||||||
checkboxGroup: [],
|
checkboxGroup: [],
|
||||||
tabList: [],
|
tabList: [],
|
||||||
state: '',
|
state: '',
|
||||||
|
@ -161,6 +117,7 @@
|
||||||
timer: null,
|
timer: null,
|
||||||
openVideo: false,
|
openVideo: false,
|
||||||
channelCode: [],
|
channelCode: [],
|
||||||
|
circleModeFlag: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
@ -209,6 +166,18 @@
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
circleMode() {
|
||||||
|
// 转换圈选模式
|
||||||
|
this.circleModeFlag = !this.circleModeFlag
|
||||||
|
if(this.circleModeFlag){
|
||||||
|
// 打开圈选模式
|
||||||
|
|
||||||
|
}else {
|
||||||
|
// 关闭圈选模式,清空圈选内容,重新上图
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
getCameraAllPage(page) {
|
getCameraAllPage(page) {
|
||||||
let params = {
|
let params = {
|
||||||
page: page,
|
page: page,
|
||||||
|
@ -327,7 +296,7 @@
|
||||||
if (res.data.data.length == 0) {
|
if (res.data.data.length == 0) {
|
||||||
const params = {
|
const params = {
|
||||||
parentId: node.data.id,
|
parentId: node.data.id,
|
||||||
checkStatus:'1'
|
checkStatus: '1',
|
||||||
// this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
|
// this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
|
||||||
}
|
}
|
||||||
getCameraByParentId(params).then((res) => {
|
getCameraByParentId(params).then((res) => {
|
||||||
|
@ -444,8 +413,8 @@
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.map-box {
|
.map-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: 100%;
|
height: 100%;
|
||||||
height: 624px;
|
// height: 624px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
.normal-map-content {
|
.normal-map-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -453,14 +422,14 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#contain {
|
#contain {
|
||||||
.searchPoint {
|
.searchPoint {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
left: 100px;
|
top: 0.1rem;
|
||||||
|
right: 0.1rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-top: 20px;
|
// margin-top: 20px;
|
||||||
:deep(.el-input__wrapper) {
|
:deep(.el-input__wrapper) {
|
||||||
background: #629ab8;
|
background: #629ab8;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
@ -642,3 +611,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -32,7 +32,15 @@
|
||||||
<div class="img" :class="item.imgType"></div>
|
<div class="img" :class="item.imgType"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-right">
|
<div class="item-right">
|
||||||
<div class="fw">{{ select }}:{{ item.visits }}</div>
|
<div class="fw" v-if="select == '访问量'">
|
||||||
|
{{ select }}:{{ item.visits }}
|
||||||
|
</div>
|
||||||
|
<div class="fw" v-if="select == '申购量'">
|
||||||
|
{{ select }}:{{ item.applyCount }}
|
||||||
|
</div>
|
||||||
|
<div class="fw" v-if="select == '收藏量'">
|
||||||
|
{{ select }}:{{ item.collectCount }}
|
||||||
|
</div>
|
||||||
<div class="name">{{ item.name }}</div>
|
<div class="name">{{ item.name }}</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
{{ item.description || '暂无描述' }}
|
{{ item.description || '暂无描述' }}
|
||||||
|
|
|
@ -135,7 +135,7 @@
|
||||||
<a-upload
|
<a-upload
|
||||||
v-model:file-list="fileList"
|
v-model:file-list="fileList"
|
||||||
name="file"
|
name="file"
|
||||||
:action="`${window.SITE_CONFIG.apiURL}/upload`"
|
:action="upLoadUrl"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
>
|
>
|
||||||
|
@ -242,6 +242,7 @@
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const disabled = ref(false)
|
const disabled = ref(false)
|
||||||
|
const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
|
||||||
const formName = reactive({
|
const formName = reactive({
|
||||||
applyUserDeptId: '',
|
applyUserDeptId: '',
|
||||||
applyUserDeptName: '',
|
applyUserDeptName: '',
|
||||||
|
@ -346,6 +347,7 @@
|
||||||
disabled,
|
disabled,
|
||||||
signOut,
|
signOut,
|
||||||
processStartHandle,
|
processStartHandle,
|
||||||
|
upLoadUrl,
|
||||||
// baseURL,
|
// baseURL,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue