1015 lines
29 KiB
Vue
1015 lines
29 KiB
Vue
<!-- 基础设施 -->
|
||
<template>
|
||
<div class="infrastructrueBox">
|
||
<!-- 选项卡 -->
|
||
<div class="infrastructrue-tab">
|
||
<div v-for="(item, index) in tabList" :key="index" class="tabBox">
|
||
<b class="leftType">{{ item.title }}</b>
|
||
<el-button
|
||
@click="nullClick"
|
||
v-if="item.title == '视频标签'"
|
||
type="small"
|
||
>
|
||
清空
|
||
</el-button>
|
||
<span
|
||
v-for="itemContent in item.content"
|
||
:key="itemContent"
|
||
@click="tabClick(index, itemContent)"
|
||
:class="
|
||
clickList[index].content.indexOf(itemContent.labelName) != -1 ||
|
||
clickList[index].content.indexOf(itemContent) != -1
|
||
? 'down'
|
||
: ''
|
||
"
|
||
>
|
||
{{ itemContent.labelName || itemContent }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- 地图 -->
|
||
<div class="map-contain" v-if="showMap">
|
||
<video-surveillance></video-surveillance>
|
||
</div>
|
||
<!-- 功能行 -->
|
||
<div class="infrastructrue-content" v-if="!wrjFlag">
|
||
<!-- 表格数据统计 -->
|
||
<div class="contentNum">
|
||
<p>
|
||
备选
|
||
<span>{{ pagination.total }}</span>
|
||
个
|
||
</p>
|
||
<!-- <i class="boundary"></i> -->
|
||
<p>
|
||
已选
|
||
<span>{{ selectedRowKeys.length }}</span>
|
||
个
|
||
</p>
|
||
</div>
|
||
<!-- 右侧 -->
|
||
<div class="contentRight">
|
||
<!-- 搜索@search="onSearch" -->
|
||
<div class="searchInput">
|
||
<a-input-search
|
||
v-model:value="mapSearchParam.cameraName"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@change="getCamera"
|
||
/>
|
||
<a-button
|
||
type="primary"
|
||
style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
|
||
@click="clean"
|
||
>
|
||
重置
|
||
</a-button>
|
||
</div>
|
||
<i class="boundary"></i>
|
||
<!-- 批量预览 -->
|
||
<a-button type="primary" @click="batchPreview" class="buttonAdd">
|
||
批量预览
|
||
</a-button>
|
||
<!-- 添加至申购车 -->
|
||
<a-button type="primary" @click="addShoppingCart" class="buttonAdd">
|
||
添加至申购车
|
||
</a-button>
|
||
<!-- 一键申请 -->
|
||
<a-button type="primary" @click="apply" class="buttonAdd">
|
||
一键申请
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<div class="infrastructrue-table" v-if="!wrjFlag">
|
||
<a-table
|
||
class="ant-table-striped"
|
||
:dataSource="dataSource"
|
||
:columns="columns"
|
||
:scroll="{ y: tableHeight }"
|
||
rowKey="channelId"
|
||
:rowClassName="
|
||
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
||
"
|
||
:pagination="pagination"
|
||
@change="handleTableChange"
|
||
:row-selection="{
|
||
selectedRowKeys: selectedRowKeys,
|
||
// onChange: onSelectChange,
|
||
onSelect: onSelectChange,
|
||
onSelectAll: onSelectAll,
|
||
}"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.dataIndex === 'operation'">
|
||
<a
|
||
@click="
|
||
openVideo(
|
||
record.channelCode ||
|
||
record.channelId ||
|
||
record.channelCode.channelId
|
||
)
|
||
"
|
||
>
|
||
预览
|
||
</a>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
<div class="infrastructrue-table" v-else-if="isXiHaiAn && wrjFlag">
|
||
<a-table
|
||
class="ant-table-striped"
|
||
:dataSource="dataSource2"
|
||
:columns="columns2"
|
||
:scroll="{ y: tableHeight }"
|
||
rowKey="channelId"
|
||
:rowClassName="
|
||
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
||
"
|
||
:pagination="dataSource2.length"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.dataIndex === 'operation'">
|
||
<a
|
||
@click="goToWrj(record)"
|
||
style="margin-right: 10px"
|
||
v-if="record.type !== '单兵设备'"
|
||
>
|
||
控制台
|
||
</a>
|
||
<a @click="goToApply(record)" style="margin-right: 10px" v-else>
|
||
申请
|
||
</a>
|
||
<a @click="showWrj(record)">详情</a>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
<!-- 单个预览弹窗 -->
|
||
<a-modal
|
||
v-model:visible="visible"
|
||
title="视频预览"
|
||
:width="950"
|
||
destroyOnClose
|
||
>
|
||
<template #footer></template>
|
||
<div style="width: 100%; display: flex; justify-content: center">
|
||
<div style="width: 100%; height: 100%">
|
||
<vue3VideoPlay v-bind="options" />
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!-- 批量预览弹窗 -->
|
||
<a-modal
|
||
wrapClassName="batch-preview-modal"
|
||
v-model:visible="batchVisible"
|
||
title="视频批量预览"
|
||
:width="1250"
|
||
destroyOnClose
|
||
@cancel="videoClean"
|
||
>
|
||
<template #footer></template>
|
||
<div class="batch-video">
|
||
<div
|
||
v-for="item in videoList"
|
||
:key="item.id"
|
||
style="width: 100%; height: 100%"
|
||
>
|
||
<vue3VideoPlay v-bind="item.options" />
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<a-modal
|
||
wrapClassName="wrj"
|
||
v-model:visible="wrjVisible"
|
||
:width="1000"
|
||
:title="wrjName + '详情'"
|
||
@ok="wrjVisible = false"
|
||
>
|
||
<template v-if="dataSource2[0].type !== '单兵设备'">
|
||
<div v-for="wrj in wrjData" :key="wrj.name">
|
||
<div
|
||
style="
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
"
|
||
>
|
||
{{ wrj.name }}
|
||
</div>
|
||
<div
|
||
style="padding: 0 30px"
|
||
v-for="(value, key) in wrj.attribute"
|
||
:key="value"
|
||
>
|
||
{{ key + '：' + value }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div v-for="(db, key) in wrjData" :key="key">
|
||
<template v-if="typeof db == 'object'">
|
||
<div
|
||
style="
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
"
|
||
>
|
||
{{ key }}
|
||
</div>
|
||
<div
|
||
style="padding: 0 30px"
|
||
v-for="(value, key2) in db"
|
||
:key="value"
|
||
>
|
||
{{ key2 + '：' + value }}
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div style="padding: 0 30px">
|
||
{{ key + '：' + db }}
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import VideoSurveillance from '@/views/home/videoSurveillance'
|
||
// import { getCategoryTreePage } from '@/api/personalCenter'
|
||
// import { dataType } from 'element-plus/es/components/table-v2/src/common'
|
||
import { useRouter } from 'vue-router'
|
||
import { message } from 'ant-design-vue'
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import {
|
||
getCameraByParentId,
|
||
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: '900px', //播放器宽度
|
||
height: '400px', //播放器高度
|
||
color: '#409eff', //主题色
|
||
title: '', //视频名称
|
||
src: '', //视频源
|
||
type: 'm3u8', // 视频源类型
|
||
muted: false, //静音
|
||
webFullScreen: false,
|
||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||
autoPlay: false, //自动播放
|
||
loop: false, //循环播放
|
||
mirror: false, //镜像画面
|
||
ligthOff: false, //关灯模式
|
||
volume: 0.3, //默认音量大小
|
||
control: true, //是否显示控制
|
||
controlBtns: [
|
||
'audioTrack',
|
||
'quality',
|
||
'speedRate',
|
||
'volume',
|
||
'setting',
|
||
'pip',
|
||
'pageFullScreen',
|
||
'fullScreen',
|
||
], //显示所有按钮,
|
||
})
|
||
const videoList = ref([])
|
||
let visible = ref(false)
|
||
let batchVisible = ref(false)
|
||
const jcssType = ref(router.currentRoute.value.query.type)
|
||
const pagination = ref({
|
||
total: 0,
|
||
current: 1,
|
||
pageSize: 10, //每页中显示10条数据
|
||
showSizeChanger: true,
|
||
pageSizeOptions: ['10', '30', '50', '100', '1000'], //每页中显示的数据
|
||
})
|
||
const mapSearchParam = ref({
|
||
// 地图搜索初始化数据
|
||
parentId: '',
|
||
cameraName: '',
|
||
checkStatus: '1',
|
||
pageNum: pagination.value.current,
|
||
pageSize: pagination.value.pageSize,
|
||
gpsX: '',
|
||
gpsY: '',
|
||
radius: '',
|
||
labelCodes: [],
|
||
})
|
||
const showMap = ref(true)
|
||
onMounted(() => {
|
||
if (jcssType.value) {
|
||
tabClick(0, jcssType.value)
|
||
if (jcssType.value == '视频资源') {
|
||
getCamera()
|
||
}
|
||
} else {
|
||
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 selectedRowKeys = ref([])
|
||
const tabList = ref([
|
||
{
|
||
title: '设施类型',
|
||
content: ['视频资源', '云资源', '感知资源'],
|
||
},
|
||
{
|
||
title: '视频标签',
|
||
content: [],
|
||
},
|
||
])
|
||
const wrjVisible = ref(false)
|
||
const wrjName = ref('')
|
||
const wrjData = ref([])
|
||
const showWrj = (data) => {
|
||
wrjName.value = data.wrjName
|
||
wrjData.value = data.details
|
||
wrjVisible.value = true
|
||
}
|
||
const goToWrj = (data) => {
|
||
window.open(data.url)
|
||
}
|
||
const goToApply = (data) => {
|
||
console.log(data, dept)
|
||
let arr = [
|
||
{
|
||
arr: [
|
||
{
|
||
description:
|
||
'申请单兵手持便携终端，提告前端人员执法透明度，加强执法人员与指挥中心实时沟通。',
|
||
resourceId: 'dbsb',
|
||
resourceName: data.wrjName,
|
||
type: '单兵设备',
|
||
},
|
||
],
|
||
deptId: dept.deptId,
|
||
deptName: dept.deptName,
|
||
},
|
||
]
|
||
localStorage.setItem('applyList', JSON.stringify(arr))
|
||
router.push({
|
||
path: '/apply',
|
||
})
|
||
}
|
||
if (whoShow1.value.itShowXiHaiAn) {
|
||
tabList.value[0].content.push('无人机')
|
||
tabList.value[0].content.push('单兵设备')
|
||
}
|
||
const openVideo = (id) => {
|
||
console.log('打开视频', id)
|
||
const param = {
|
||
key: id,
|
||
}
|
||
getStreamByChannelCode(param).then((res) => {
|
||
console.log(res)
|
||
visible.value = true
|
||
options.src = res.data.data
|
||
})
|
||
}
|
||
// 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 = () => {
|
||
tabList.value.map((item) => {
|
||
let params = {
|
||
title: item.title,
|
||
content: [],
|
||
}
|
||
clickList.value.push(params)
|
||
})
|
||
mybus.off('tranferToList')
|
||
mybus.on('tranferToList', () => {
|
||
console.log('获取到的列表数据')
|
||
})
|
||
}
|
||
let clickList = ref([]) //存储点击的tab
|
||
init()
|
||
//表格的高度
|
||
let tableHeight = ref('600')
|
||
//tab切换点击事件
|
||
const tabClick = (indexFather, name) => {
|
||
console.log(
|
||
'点击tab================>',
|
||
indexFather,
|
||
name,
|
||
clickList.value[indexFather]
|
||
)
|
||
selectedRowKeys.value = []
|
||
selectedList.value = []
|
||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||
if (name == '视频资源') {
|
||
tableHeight.value = 330
|
||
showMap.value = true
|
||
tabList.value[1].title = '视频标签'
|
||
} else if (name == '云资源') {
|
||
tableHeight.value = 600
|
||
showMap.value = false
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
pagination.value.total = 0
|
||
tabList.value[1].title = '云资源分类'
|
||
} else if (name == '感知资源') {
|
||
tableHeight.value = 330
|
||
showMap.value = true
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
pagination.value.total = 0
|
||
}
|
||
clickList.value[indexFather].content.splice(
|
||
clickList.value[indexFather].content.indexOf(name),
|
||
1
|
||
)
|
||
} else {
|
||
if (name == '视频资源') {
|
||
wrjFlag.value = false
|
||
tableHeight.value = 330
|
||
showMap.value = true
|
||
tabList.value[1].content = []
|
||
clickList.value[1].content = []
|
||
tabList.value[1].title = '视频标签'
|
||
clickList.value[indexFather].content[0] = name
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
getCameraAllLabel().then((res) => {
|
||
res.data.data.forEach((val) => {
|
||
tabList.value[1].content.push({
|
||
labelCode: val.labelCode,
|
||
labelName: val.labelName,
|
||
})
|
||
})
|
||
})
|
||
// 改变查询摄像头接口的labelCode数组
|
||
mapSearchParam.value.labelCodes = []
|
||
clickList.value[1].content.map((item) => {
|
||
mapSearchParam.value.labelCodes.push(item.labelCode)
|
||
})
|
||
console.log('选中的标签code', mapSearchParam.value)
|
||
mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
|
||
getCamera()
|
||
} else if (name == '云资源') {
|
||
tableHeight.value = 600
|
||
showMap.value = false
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
pagination.value.total = 0
|
||
clickList.value[1].content = []
|
||
tabList.value[1].title = '云资源分类'
|
||
clickList.value[indexFather].content[0] = name
|
||
tabList.value[1].content = [
|
||
'云主机',
|
||
'算力主机',
|
||
'对象存储',
|
||
'堡垒机',
|
||
'防火墙',
|
||
'网闸',
|
||
'负载均衡',
|
||
'公网IP',
|
||
]
|
||
wrjFlag.value = false
|
||
} else if (name == '感知资源') {
|
||
tableHeight.value = 330
|
||
showMap.value = true
|
||
clickList.value[1].content = []
|
||
pagination.value.total = 0
|
||
tabList.value[1].title = '感知资源分类'
|
||
clickList.value[indexFather].content[0] = name
|
||
tabList.value[1].content = []
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
wrjFlag.value = false
|
||
} else if (name == '无人机') {
|
||
tableHeight.value = 600
|
||
showMap.value = false
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
pagination.value.total = 0
|
||
clickList.value[1].content = []
|
||
clickList.value[indexFather].content[0] = name
|
||
tabList.value[1].title = ''
|
||
tabList.value[1].content = []
|
||
uavAndIndividualSoldier.uavList.map((wrj) => {
|
||
dataSource2.value.push({
|
||
wrjName: wrj.name,
|
||
wrjState: '已申请',
|
||
url: wrj.url,
|
||
details: wrj.details,
|
||
})
|
||
})
|
||
wrjFlag.value = true
|
||
} else if (name == '单兵设备') {
|
||
tableHeight.value = 600
|
||
showMap.value = false
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
pagination.value.total = 0
|
||
clickList.value[1].content = []
|
||
clickList.value[indexFather].content[0] = name
|
||
tabList.value[1].title = ''
|
||
tabList.value[1].content = []
|
||
uavAndIndividualSoldier.individualSoldier.map((db) => {
|
||
dataSource2.value.push({
|
||
wrjName: db.name,
|
||
wrjState: '未申请',
|
||
details: db.details,
|
||
type: db.type,
|
||
})
|
||
})
|
||
wrjFlag.value = true
|
||
} else {
|
||
clickList.value[indexFather].content.push(name)
|
||
}
|
||
}
|
||
// 改变查询摄像头接口的labelCode数组
|
||
mapSearchParam.value.labelCodes = []
|
||
clickList.value[1].content.map((item) => {
|
||
mapSearchParam.value.labelCodes.push(item.labelCode)
|
||
})
|
||
console.log('选中的标签code', mapSearchParam.value)
|
||
mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
|
||
// let fatherName = ref('视频资源')
|
||
// if (name == '视频资源' || name == '云资源' || name == '感知资源') {
|
||
// fatherName.value == name
|
||
// }
|
||
// if (fatherName.value == '视频资源') {
|
||
// getCamera()
|
||
// } else {
|
||
// dataSource.value = []
|
||
// pagination.value.total = 0
|
||
// }
|
||
if (name == '云资源' || name == '感知资源') {
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
pagination.value.total = 0
|
||
} else {
|
||
if (name !== '无人机' && name !== '单兵设备') {
|
||
getCamera()
|
||
}
|
||
}
|
||
}
|
||
const batchPreview = async function () {
|
||
if (selectedList.value.length > 0) {
|
||
const list = selectedList.value.splice(0, 4)
|
||
const length = list.length
|
||
videoList.value = []
|
||
for (let index = 0; index < length; index++) {
|
||
const param = {
|
||
key: list[index].channelId,
|
||
}
|
||
let ob = {
|
||
options: {
|
||
width: '600px', //播放器宽度
|
||
height: '350px', //播放器高度
|
||
color: '#409eff', //主题色
|
||
title: '', //视频名称
|
||
src: '', //视频源
|
||
type: 'm3u8', // 视频源类型
|
||
muted: false, //静音
|
||
webFullScreen: false,
|
||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||
autoPlay: false, //自动播放
|
||
loop: false, //循环播放
|
||
mirror: false, //镜像画面
|
||
ligthOff: false, //关灯模式
|
||
volume: 0.3, //默认音量大小
|
||
control: true, //是否显示控制
|
||
controlBtns: [
|
||
'audioTrack',
|
||
'quality',
|
||
'speedRate',
|
||
'volume',
|
||
'setting',
|
||
'pip',
|
||
'pageFullScreen',
|
||
'fullScreen',
|
||
], //显示所有按钮,
|
||
},
|
||
}
|
||
await getStreamByChannelCode(param).then((res) => {
|
||
ob.options.src = res.data.data
|
||
console.log('监测ob的变化', ob)
|
||
videoList.value.push(ob)
|
||
})
|
||
}
|
||
console.log('验证数据的准确性', videoList)
|
||
batchVisible.value = true
|
||
} else {
|
||
message.error('请选择需要预览的数据')
|
||
}
|
||
}
|
||
// 清空
|
||
const nullClick = () => {
|
||
clickList.value[1].content = []
|
||
mapSearchParam.value.labelCodes = ''
|
||
getCamera()
|
||
console.log('hhhhhhhh')
|
||
}
|
||
// 重置
|
||
const clean = () => {
|
||
mapSearchParam.value.cameraName = ''
|
||
selectedList.value = []
|
||
selectedRowKeys.value = []
|
||
videoList.value = []
|
||
pagination.value.current = 1
|
||
mapSearchParam.value.pageNum = 1
|
||
pagination.value.pageSize = 10
|
||
getCamera()
|
||
}
|
||
const videoClean = () => {
|
||
selectedList.value = []
|
||
selectedRowKeys.value = []
|
||
videoList.value = []
|
||
}
|
||
// 一键申请
|
||
const dept = reactive({})
|
||
// eslint-disable-next-line no-undef
|
||
if (infrastructure) {
|
||
// eslint-disable-next-line no-undef
|
||
dept.deptId = infrastructure.deptId
|
||
// eslint-disable-next-line no-undef
|
||
dept.deptName = infrastructure.deptName
|
||
}
|
||
const apply = () => {
|
||
if (selectedRowKeys.value.length != 0) {
|
||
console.log('一键申请', selectedList.value)
|
||
let arr = [
|
||
{
|
||
arr: [
|
||
{
|
||
description: '',
|
||
note1: JSON.stringify(selectedList.value),
|
||
resourceId: '1522550195055828996',
|
||
resourceName: '摄像头列表',
|
||
type: '基础设施',
|
||
},
|
||
],
|
||
deptId: dept.deptId,
|
||
deptName: dept.deptName,
|
||
},
|
||
]
|
||
localStorage.setItem('applyList', JSON.stringify(arr))
|
||
router.push({
|
||
path: '/apply',
|
||
})
|
||
} else {
|
||
message.error('请选择需要申请的数据')
|
||
}
|
||
}
|
||
// // 添加至购物车
|
||
// const addShopCar = () => {
|
||
// console.log('添加至购物车')
|
||
// }
|
||
const isXiHaiAn = whoShow1.value.itShowXiHaiAn
|
||
const wrjFlag = ref(false)
|
||
const getCamera = () => {
|
||
console.log('初始化调用')
|
||
console.log('不选左侧树的时候不调用接口', mapSearchParam.value)
|
||
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.cameraName || '',
|
||
longitude: mapSearchParam.value.gpsX || '',
|
||
latitude: 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 = () => {
|
||
if (selectedList.value.length > 0) {
|
||
sgcInsert({
|
||
delFlag: '0',
|
||
resourceId: '8888888880000000001',
|
||
note1: selectedList.value,
|
||
// userId: userId.value,
|
||
}).then((res) => {
|
||
console.log(res)
|
||
message.success('添加申购车成功！')
|
||
mybus.emit('getSgcNum')
|
||
})
|
||
} else {
|
||
message.error('请选择需要添加申购车的数据')
|
||
}
|
||
}
|
||
// 表格
|
||
const dataSource = ref([])
|
||
const dataSource2 = ref([])
|
||
const columns = ref([
|
||
{
|
||
title: '名称',
|
||
dataIndex: 'channelName',
|
||
key: 'channelName',
|
||
},
|
||
{
|
||
title: '归属',
|
||
dataIndex: 'nodeName',
|
||
width: '60%',
|
||
key: 'nodeName',
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'operation',
|
||
width: '10%',
|
||
key: 'channelId',
|
||
},
|
||
])
|
||
const columns2 = ref([
|
||
{
|
||
title: '名称',
|
||
dataIndex: 'wrjName',
|
||
key: 'wrjName',
|
||
},
|
||
{
|
||
title: '申请状态',
|
||
dataIndex: 'wrjState',
|
||
width: '60%',
|
||
key: 'wrjState',
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'operation',
|
||
width: '20%',
|
||
key: 'wrjName',
|
||
},
|
||
])
|
||
// const allClick = ref([])
|
||
const onSelectChange = (record, selected, selectedRows, nativeEvent) => {
|
||
console.log('hahhahah', record, selected, selectedRows, nativeEvent)
|
||
if (selected) {
|
||
if (selectedRowKeys.value.length == 1000) {
|
||
message.warning('最多只能添加1000个摄像头！')
|
||
} else {
|
||
selectedList.value.push(record)
|
||
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 || record.channelId),
|
||
1
|
||
)
|
||
}
|
||
console.log('已选中======================>', selectedList.value)
|
||
// selectedList.value = selectedRows
|
||
// allClick.value = selectedRowKeys
|
||
}
|
||
const onSelectAll = (selected, selectedRows, changeRows) => {
|
||
if (selected) {
|
||
changeRows.map((val) => {
|
||
selectedList.value.push(val)
|
||
selectedRowKeys.value.push(val.channelCode || val.channelId)
|
||
})
|
||
if (selectedRowKeys.value.length > 1000) {
|
||
message.warning('最多只能添加1000个摄像头！')
|
||
changeRows.map((val) => {
|
||
selectedList.value = selectedList.value.filter(
|
||
(item) => item.idtCameraChannel !== val.idtCameraChannel
|
||
)
|
||
selectedRowKeys.value.splice(
|
||
selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
|
||
1
|
||
)
|
||
})
|
||
}
|
||
} else {
|
||
changeRows.map((val) => {
|
||
selectedList.value = selectedList.value.filter(
|
||
(item) => item.idtCameraChannel !== val.idtCameraChannel
|
||
)
|
||
selectedRowKeys.value.splice(
|
||
selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
|
||
1
|
||
)
|
||
})
|
||
}
|
||
console.log('heiheiheiehiehei', selected, selectedRows, changeRows)
|
||
}
|
||
const handleTableChange = (val) => {
|
||
pagination.value.current = val.current
|
||
pagination.value.pageSize = val.pageSize
|
||
mapSearchParam.value.pageNum = val.current
|
||
mapSearchParam.value.pageSize = val.pageSize
|
||
getCamera()
|
||
// this.getTableList()
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.infrastructrueBox {
|
||
padding: 0.2rem;
|
||
// background: #f3f5f9;
|
||
background: #ffffff;
|
||
/* padding: 0.16rem; */
|
||
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 {
|
||
display: inline-block;
|
||
height: 0.24rem;
|
||
font-size: 0.14rem;
|
||
line-height: 0.24rem;
|
||
border: 0;
|
||
border-radius: 0.12rem;
|
||
margin-left: 0.1rem;
|
||
text-align: center;
|
||
color: #666666;
|
||
cursor: pointer;
|
||
padding: 0 0.08rem;
|
||
}
|
||
.leftType {
|
||
margin: 0.2rem 0;
|
||
margin-right: 0.06rem;
|
||
}
|
||
.down {
|
||
background: #0087ff;
|
||
color: #ffffff;
|
||
}
|
||
.tabBox {
|
||
margin-bottom: 0.16rem;
|
||
}
|
||
.tabBox:last-of-type {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.infrastructrue-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0.14rem 0.2rem 0.1rem;
|
||
background: #ffffff;
|
||
.contentNum {
|
||
position: relative;
|
||
display: flex;
|
||
p {
|
||
color: #666666;
|
||
padding: 0;
|
||
margin: 0;
|
||
span {
|
||
color: #0087ff;
|
||
font-size: 0.2rem;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
p:first-of-type {
|
||
padding-right: 0.16rem;
|
||
margin-right: 0.16rem;
|
||
}
|
||
.boundary {
|
||
position: absolute;
|
||
left: 0.9rem;
|
||
top: 0.07rem;
|
||
display: block;
|
||
width: 0.02rem;
|
||
border-radius: 0.01rem;
|
||
height: 0.2rem;
|
||
background: rgba(150, 144, 144, 0.3);
|
||
}
|
||
}
|
||
.contentRight {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.boundary {
|
||
position: absolute;
|
||
left: 3.74rem;
|
||
top: 0.07rem;
|
||
display: block;
|
||
width: 0.02rem;
|
||
border-radius: 0.01rem;
|
||
height: 0.2rem;
|
||
background: rgba(150, 144, 144, 0.3);
|
||
}
|
||
.searchInput {
|
||
display: flex;
|
||
margin-right: 0.2rem;
|
||
.ant-input-search {
|
||
max-width: 4rem;
|
||
}
|
||
:deep(.ant-input) {
|
||
width: 2rem;
|
||
height: 0.36rem;
|
||
font-size: 0.14rem;
|
||
color: #b2b2b2;
|
||
background: #f5f5f5;
|
||
}
|
||
:deep(.ant-input-group-addon) {
|
||
display: inline-block;
|
||
margin-left: 0.1rem;
|
||
.ant-input-search-button {
|
||
width: 0.8rem;
|
||
height: 0.36rem;
|
||
background: #0558e1;
|
||
border-radius: 0.04rem;
|
||
font-size: 0.14rem;
|
||
}
|
||
}
|
||
:deep(.ant-btn) {
|
||
background: #0558e1;
|
||
border-radius: 0.04rem;
|
||
}
|
||
}
|
||
.buttonAdd {
|
||
background: #0558e1;
|
||
border-radius: 0.04rem;
|
||
height: 0.36rem;
|
||
border-color: #0558e1;
|
||
margin-left: 0.1rem;
|
||
}
|
||
}
|
||
}
|
||
.infrastructrue-table {
|
||
.ant-table-striped :deep(.table-striped) td {
|
||
background-color: #fafafa;
|
||
}
|
||
}
|
||
.map-contain {
|
||
// width: 9.46rem;
|
||
height: 4.1rem;
|
||
margin-left: 0.16rem;
|
||
position: relative;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.wrj {
|
||
.ant-modal-body {
|
||
height: 700px !important;
|
||
overflow-y: scroll !important;
|
||
}
|
||
}
|
||
.batch-preview-modal {
|
||
.batch-video {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: 50% 50%;
|
||
grid-template-rows: 50% 50%;
|
||
justify-content: center;
|
||
grid-row-gap: 14px;
|
||
grid-column-gap: 20px;
|
||
}
|
||
}
|
||
</style>
|