hi-ucs/front/src/views/home/infrastructurePage.vue

1015 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 基础设施 -->
<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>