<!-- 基础设施 -->
<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 v-if="!room" class="roomBox">
<div class="leftMake">
<div
class="leftTop"
@click="roomResults"
:class="roomYuyue ? 'roomBackground' : 'nullBackground'"
>
会议室预约
</div>
<div
class="leftBottom"
@click="result"
:class="roomResult ? 'roomBackground' : 'nullBackground'"
>
预约结果
</div>
</div>
<div class="roomSearch">
<span>会议室搜索</span>
<div class="searchInput">
<a-input-search
v-model:value="roomInput"
placeholder="请输入关键词"
enter-button="搜索"
size="large"
@search="onSearch"
/>
<a-button
style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
@click="reSetSearch"
>
重置
</a-button>
</div>
</div>
<div v-if="roomYuyue">
<div class="roomTableList">
<span>会议室列表</span>
<div class="roomTime">
<span>可用时间查询</span>
<a-space direction="vertical" class="roomSpace">
<a-date-picker
v-model:value="roomCerateDate"
placeholder="开始日期"
value-format="YYYY-MM-DD"
/>
<a-time-picker
v-model:value="roomCreateTime"
placeholder="开始时间"
value-format="HH:mm:ss"
:disabledHours="disabledStartHours"
:disabledMinutes="disabledStartMinutes"
:disabledSeconds="disabledStartSeconds"
/>
<a-time-picker
v-model:value="roomEndTime"
placeholder="结束时间"
value-format="HH:mm:ss"
:disabledHours="disabledEndHours"
:disabledMinutes="disabledEndMinutes"
:disabledSeconds="disabledEndSeconds"
/>
</a-space>
</div>
</div>
<div class="roomItem" v-for="item in roomList" :key="item.id">
<div class="leftImg">
<img
:src="
item.pic == null
? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fimages01%2F20201221%2F00885cf666cc4c2ab80c7b4e59259e85.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662707222&t=13d3246428ee80cc7519702d5eb6eb7d'
: `${item.pic}`
"
alt=""
/>
</div>
<div class="rightContent">
<div class="topContent">{{ item.name }}</div>
<div class="centerContent">
<span>房间号：{{ item.num }}</span>
<span>可容纳人数：{{ item.capacity }}人</span>
<span>面积：{{ item.area }}m²</span>
</div>
<div class="bottonmContent">
{{ item.description }}
</div>
</div>
<a-button
style="
margin-left: 0.8rem;
background: #e1edfa;
color: #0087ff;
border: none;
border-radius: 0.06rem;
"
@click="appointment(item)"
>
预约
</a-button>
</div>
<a-pagination
v-model:current="roomPage"
v-model:pageSize="roomLimit"
show-quick-jumper
:total="roomTotal"
:page-size-options="pageSizeOptions"
@change="onRoomChange"
@showSizeChange="onShowSizeChange"
show-size-changer
/>
</div>
<div v-if="roomResult" style="display: grid">
<a-table
:columns="columnsRomm"
:data-source="dataRoom"
:filterMultiple="false"
:align="center"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'bookDate'">
<span>
{{ record.bookDate }} {{ record.startTime }}-{{
record.endTime
}}
</span>
</template>
<template v-if="column.key === 'state'">
<span>
{{
record.state == 2
? '通过'
: record.state == 1
? '审核中'
: '不通过'
}}
</span>
</template>
<template v-if="column.key === 'action'">
<a @click="look(record)">查看详情</a>
</template>
</template>
</a-table>
<a-pagination
v-model:current="roomPage"
v-model:pageSize="roomLimit"
show-quick-jumper
:total="roomTotal"
:page-size-options="pageSizeOptionsChengguo"
@change="onRoomChangeChengguo"
@showSizeChange="onShowSizeChangeChengguo"
show-size-changer
/>
</div>
<a-modal
v-model:visible="visibleRoom"
width="10rem"
title="预约详情"
:body-style="bodystyle"
class="modalClass"
:footer="null"
>
<div class="modalResult" style="margin-bottom: 0.05rem">预约结果</div>
<div
style="
width: 100%;
height: 0.01rem;
border-top: 1px solid #ccc;
transform: scaleY(0.5);
"
></div>
<div
class="modalExamine"
style="display: flex; flex-direction: column; margin-top: 0.2rem"
>
<span style="margin-bottom: 0.2rem">
审核结果：{{
lookData.state == 2
? '通过'
: lookData.state == 1
? '审核中'
: '不通过'
}}
</span>
<span style="width: 8rem; margin-bottom: 0.3rem">
审核意见：{{ lookData.auditViem }}
</span>
</div>
<div class="modalYuyue" style="margin-bottom: 0.05rem">预约信息</div>
<div
style="
width: 100%;
height: 0.01rem;
border-top: 1px solid #ccc;
transform: scaleY(0.5);
"
></div>
<div class="modalTime" style="margin-top: 0.2rem">
<div>
预约时段：{{ lookData.bookDate }} {{ lookData.startTime }}-{{
lookData.endTime
}}
</div>
<div
class="modalContent"
style="
width: 7.5rem;
display: flex;
justify-content: space-between;
margin: 0.15rem 0 0.15rem 0;
"
>
<span>预约人：{{ lookData.name }}</span>
<span>联系方式：{{ lookData.phone }}</span>
<span>预约部门：{{ lookData.dept }}</span>
</div>
</div>
<div style="width: 8rem; margin-bottom: 0.3rem">
使用事项：{{ lookData.matter }}
</div>
</a-modal>
<a-modal
v-model:visible="appointmentRoom"
title="会议室预约"
width="10rem"
@ok="handleOk"
:body-style="bodystyle"
class="appModal"
:footer="null"
>
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finishFailed="onFinishFailed"
:labelAlign="labelPosition"
>
<a-row>
<a-col :span="8">
<a-form-item
name="bookDate"
label="预约日期"
v-bind="validateInfos.bookDate"
@blur="validate('create', { trigger: 'blur' }).catch(() => {})"
>
<a-date-picker
style="width: 72%"
v-model:value="formState.bookDate"
value-format="YYYY-MM-DD"
@change="handleChange"
/>
</a-form-item>
<div
:class="roomDateList[0] != null ? 'jinggaoD' : 'jinggaoNull'"
>
<div class="imgJinggao"></div>
<span style="color: #da2a13; font-size: 0.12rem">
当日会议室可用时段：{{ roomDateList[0] }}
</span>
</div>
</a-col>
<a-col :span="8">
<a-form-item
name="startTime"
label="预约时段"
v-bind="validateInfos.startTime"
style="display: flex"
>
<a-time-picker
v-model:value="formState.startTime"
placeholder="开始时间"
value-format="HH:mm:ss"
:disabledHours="disabledTimeHours"
:disabledMinutes="disabledTimeMinutes"
:disabledSeconds="disabledTimeSeconds"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-time-picker
v-model:value="formState.endTime"
placeholder="结束时间"
value-format="HH:mm:ss"
:disabledHours="disabledTimeEndHours"
:disabledMinutes="disabledTimeEndMinutes"
:disabledSeconds="disabledTimeEndSeconds"
/>
</a-col>
</a-row>
<a-row style="margin-top: 0.4rem">
<a-col :span="8">
<a-form-item
name="name"
label="预约人"
v-bind="validateInfos.name"
>
<a-input v-model:value="formState.name" style="width: 72%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item
name="phone"
label="联系电话"
v-bind="validateInfos.phone"
>
<a-input v-model:value="formState.phone" style="width: 72%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item
name="dept"
label="预约部门"
v-bind="validateInfos.dept"
>
<a-input v-model:value="formState.dept" style="width: 72%" />
</a-form-item>
</a-col>
</a-row>
<a-row style="margin-top: 0.4rem">
<a-col :span="24">
<a-form-item
name="matter"
v-bind="validateInfos.matter"
label="使用事项"
class="introduction"
>
<a-textarea v-model:value="formState.matter" />
</a-form-item>
</a-col>
</a-row>
<a-row style="margin-top: 0.4rem">
<a-col :span="24">
<a-form-item
name="uploadRoom"
label="附件上传"
class="introduction"
>
<a-upload
:max-count="1"
accept=".doc,.docx,pdf"
v-model:file-list="fileList"
:action="`${apiURL}/upload`"
@remove="handleRemove"
@change="roomUpload"
>
<a-button>
<upload-outlined>选择上传附件</upload-outlined>
</a-button>
<span>
支持doc、docx、PDF等格式支撑材料上传，文件大小不超过100M
</span>
</a-upload>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:wrapper-col="{ span: 14, offset: 4 }"
style="text-align: center; margin-top: 0.4rem"
>
<a-button @click="resetFields" type="primary" danger>取消</a-button>
<a-button
style="margin-left: 10px"
type="primary"
@click="onSubmit"
>
提交
</a-button>
</a-form-item>
</a-form>
</a-modal>
</div>
<div v-if="room">
<!-- 地图 -->
<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" v-if="isXiHaiAn">
<a-input-search
v-model:value="mapSearchParam.cameraName"
placeholder="请输入关键词"
enter-button="搜索"
size="large"
@change="(e) => getCamera(true, e.target.value)"
/>
<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"
v-if="isXiHaiAn"
>
批量预览
</a-button>
<!-- 批量预览 -->
<a-button
type="primary"
@click="batchPicturePreview"
class="buttonAdd"
v-else
>
批量预览
</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
v-if="isXiHaiAn"
@click="
openVideo(
record.channelCode ||
record.channelId ||
record.channelCode.channelId
)
"
>
预览
</a>
<a
v-else
@click="
openPicture(
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
wrapClassName="single-preview-modal"
v-model:visible="visible"
title="视频预览"
:width="960"
destroyOnClose
>
<template #footer></template>
<div style="width: 100%; display: flex; justify-content: center">
<div style="width: 100%; height: 100%">
<vue3VideoPlay v-bind="options"
@play="onPlay"
@pause="onPause"
@timeupdate="onTimeupdate"
@canplay="onCanplay"/>
</div>
</div>
</a-modal>
<!-- 图片预览 -->
<a-modal
wrapClassName="single-preview-modal"
v-model:visible="picVisible"
title="图片预览"
:width="960"
destroyOnClose
>
<template #footer></template>
<div style="width: 100%; display: flex; justify-content: center">
<a-image :src="options.src" />
</div>
</a-modal>
<!-- 批量预览图片弹窗 -->
<a-modal
wrapClassName="batch-preview-modal"
v-model:visible="batchPicVisible"
title="图片批量预览"
:width="1060"
destroyOnClose
@cancel="videoClean"
>
<template #footer></template>
<div class="batch-video">
<div
v-for="item in videoList"
:key="item.id"
style="width: 100%; height: 100%"
>
<a-image
width="500px"
height="281px"
:src="item.options.src"
fallback="data:image/png;base64,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"
/>
</div>
</div>
<a-pagination
v-model:current="current"
:total="videoTotal"
defaultPageSize="4"
:showSizeChanger="false"
@change="batchPicturePreview"
show-less-items
/>
</a-modal>
<!-- 批量预览视频弹窗 -->
<a-modal
wrapClassName="batch-preview-modal"
v-model:visible="batchVisible"
title="视频批量预览"
:width="1060"
destroyOnClose
@cancel="videoClean"
>
<template #footer></template>
<div class="batch-video">
<div
v-for="item in videoList"
:key="item.id"
style="width: 100%; height: 100%"
>
<p></p>
<vue3VideoPlay v-bind="item.options"/>
</div>
</div>
<a-pagination
v-model:current="current"
:total="videoTotal"
defaultPageSize="4"
:showSizeChanger="false"
@change="batchPreview"
show-less-items
/>
</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>
</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, Upload } from 'ant-design-vue'
import {
ref,
reactive,
onMounted,
defineProps,
watch,
defineComponent,
nextTick,
defineExpose,
} from 'vue'
import {
getCameraByParentId,
getStreamByChannelCode,
getCameraAllLabel,
selectByChannelCode,
} from '@/api/videoSurveillance'
import { getCameraByCondition } from '@/api/file'
import {
sgcInsert,
getRoomSearch,
getDate,
setSubmit,
getYuyue,
} from '@/api/home'
import mybus from '@/myplugins/mybus'
import dayjs from 'dayjs'
import { Form } from 'ant-design-vue'
import moment from 'moment'
const props = defineProps({
// 模糊查
searchValue: { type: String, default: '' },
})
const current = ref(1)
const videoTotal = ref(0)
const router = useRouter()
const whoShow1 = ref(whoShow)
const isXiHaiAn = whoShow1.value.itShowXiHaiAn
const options = reactive({
width: '912px', //播放器宽度
height: '513px', //播放器高度
color: '#409eff', //主题色
title: '', //视频名称
src: '', //视频源
type: 'm3u8', // 视频源类型
muted: false, //静音
webFullScreen: false,
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
// autoPlay: isXiHaiAn, //自动播放
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 picVisible = ref(false) // 图片预览
let batchVisible = ref(false) // 视频批量预览
let batchPicVisible = 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 paginationRoom = ref({
total: 0,
current: 1,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
})
const formState = reactive({
// name: '',
// iphone: '18264084961',
// group: '',
// create: '',
// cerateTime: '',
// endTime: '',
// introduction: '',
// uploadRoom: '',
roomId: '',
bookDate: '', //日期
startTime: '', //开始时间
endTime: '', //结束时间
name: '',
phone: '',
dept: '',
matter: '',
file: '',
roomName: '',
})
const fileList = ref([])
const useForm = Form.useForm
const roomInput = ref('')
const rulesRef = reactive({
bookDate: [
{
type: 'string',
required: true,
message: '请选择日期',
},
],
startTime: [
{
type: 'string',
required: true,
message: '请选择时间段',
},
],
name: [
{
required: true,
message: '请输入预约人',
},
],
matter: [{ min: 1, max: 500, required: true, message: '可输入500字内容' }],
phone: [
{
required: true,
pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号',
},
],
dept: [
{
required: true,
message: '请输入部门',
},
],
})
const { resetFields, validateInfos, validate } = useForm(formState, rulesRef)
const mapSearchParam = ref({
// 地图搜索初始化数据
parentId: '',
cameraName: '',
checkStatus: '1',
pageNum: pagination.value.current,
pageSize: pagination.value.pageSize,
gpsX: '',
gpsY: '',
radius: '',
labelCodes: [],
})
const showMap = ref(true)
const room = ref(true)
const roomResult = ref(true)
const roomYuyue = ref(true)
const visibleRoom = ref(false)
const appointmentRoom = ref(false)
const labelPosition = ref('left')
const apiURL = window.SITE_CONFIG.apiURL
const roomList = ref([])
const roomPage = ref(1)
const roomLimit = ref(5)
const roomTotal = ref(0)
const pageSizeOptions = ref(['5', '10', '20', '50'])
const pageSizeOptionsChengguo = ref(['5', '10', '20', '50'])
const dateId = ref(null)
const roomDateList = ref([])
//开始时间---结束时间
const roomCerateDate = ref('')
const roomCreateTime = ref('')
const roomEndTime = ref('')
const roomModalCreateTime = ref('')
const roomModalEndTime = ref('')
const lookData = ref({})
// console.log('模糊查传递', props.searchValue)
if (props.searchValue) {
// console.log('模糊查传递')
// eslint-disable-next-line vue/no-setup-props-destructure
mapSearchParam.value.cameraName = props.searchValue
}
//===========================
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: ['视频资源', '感知资源', '城市云脑会客厅']
// content: isXiHaiAn ? ['视频资源', '感知资源', '城市云脑会客厅'] : ['视频资源', '云资源', '感知资源', '城市云脑会客厅'],
},
{
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
// })
visible.value = true
options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
}
// 打开图片预览
const openPicture = (id) => {
console.log('打开图片', id)
const param = {
channelCode: id,
}
selectByChannelCode(param).then((res) => {
console.log(res)
if (res.data.data && res.data.data[0].picUrl) {
options.src = res.data.data[0].picUrl
picVisible.value = true
} else {
message.warning('该点位暂无预览图片！')
}
})
}
// 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()
//点击会议室左侧切换
const result = () => {
roomYuyue.value = false
roomResult.value = true
chengguoSearch()
}
const chengguoSearch = () => {
let query = {
page: roomPage.value,
limit: roomLimit.value,
roomName: roomInput.value,
}
getYuyue(query).then(({ data: res }) => {
dataRoom.value = res.data.list
roomTotal.value = res.data.total
})
}
const roomResults = () => {
roomYuyue.value = true
roomResult.value = false
}
// 查看详情
const look = (row) => {
visibleRoom.value = true
lookData.value = row
}
// 搜索
const onSearch = (searchValue) => {
searchData()
chengguoSearch()
}
//重置
const reSetSearch = () => {
roomInput.value = ''
searchData()
chengguoSearch()
}
// 时间选择器限制----可用时间查询
//获取不可选择的小时
const disabledStartHours = () => {
if (roomEndTime.value) {
console.log(roomEndTime.value, 5555555555)
let hours = []
let hour = roomEndTime.value.substr(0, 2)
console.log(hour, 888888888888)
for (let i = hour; i < 24; i++) {
hours.push(i)
}
return hours
}
}
//获取不可选择的分钟
const disabledStartMinutes = (selectedHour) => {
if (roomEndTime.value) {
let minutes = []
let hour = roomEndTime.value.substr(0, 2)
let minute = roomEndTime.value.substr(3, 2)
if (selectedHour == hour) {
for (let i = minute; i < 60; i++) {
minutes.push(i)
}
}
return minutes
}
}
//获取不可选择的秒
const disabledStartSeconds = (selectedHour, selectedMinute) => {
if (roomEndTime.value) {
let seconds = []
let hour = roomEndTime.value.substr(0, 2)
let minute = roomEndTime.value.substr(3, 2)
let second = roomEndTime.value.substr(6, 2)
if (selectedHour == hour && selectedMinute.value == minute) {
for (let i = second - 1; i < 60; i++) {
seconds.push(i)
}
}
return seconds
}
}
//获取不可选择的小时
const disabledEndHours = () => {
if (roomCreateTime.value) {
let hours = []
let hour = roomCreateTime.value.substr(0, 2)
for (let i = 0; i < hour; i++) {
hours.push(i)
}
return hours
}
}
//获取不可选择的分钟
const disabledEndMinutes = (selectedHour) => {
if (roomCreateTime.value) {
let minutes = []
let hour = roomCreateTime.value.substr(0, 2)
let minute = roomCreateTime.value.substr(3, 2)
if (selectedHour == hour) {
for (let i = 0; i < minute; i++) {
minutes.push(i)
}
}
return minutes
}
}
//获取不可选择的秒
const disabledEndSeconds = (selectedHour, selectedMinute) => {
if (roomCreateTime.value) {
let seconds = []
let hour = roomCreateTime.value.substr(0, 2)
let minute = roomCreateTime.value.substr(3, 2)
let second = roomCreateTime.value.substr(6, 2)
if (selectedHour == hour && selectedMinute.value == minute) {
for (let i = 0; i <= second; i++) {
seconds.push(i)
}
}
return seconds
}
}
// 时间选择器限制----会议室预约时段
//获取不可选择的小时
const disabledTimeHours = () => {
if (formState.endTime) {
let hours = []
let hour = formState.endTime.substr(0, 2)
for (let i = hour; i < 24; i++) {
hours.push(i)
}
return hours
}
}
//获取不可选择的分钟
const disabledTimeMinutes = (selectedHour) => {
if (formState.endTime) {
let minutes = []
let hour = formState.endTime.substr(0, 2)
let minute = formState.endTime.substr(3, 2)
if (selectedHour == hour) {
for (let i = minute; i < 60; i++) {
minutes.push(i)
}
}
return minutes
}
}
//获取不可选择的秒
const disabledTimeSeconds = (selectedHour, selectedMinute) => {
if (formState.endTime) {
let seconds = []
let hour = formState.endTime.substr(0, 2)
let minute = formState.endTime.substr(3, 2)
let second = formState.endTime.substr(6, 2)
if (selectedHour == hour && selectedMinute.value == minute) {
for (let i = second - 1; i < 60; i++) {
seconds.push(i)
}
}
return seconds
}
}
//获取不可选择的小时
const disabledTimeEndHours = () => {
if (formState.startTime) {
let hours = []
let hour = formState.startTime.substr(0, 2)
for (let i = 0; i < hour; i++) {
hours.push(i)
}
return hours
}
}
//获取不可选择的分钟
const disabledTimeEndMinutes = (selectedHour) => {
if (formState.startTime) {
let minutes = []
let hour = formState.startTime.substr(0, 2)
let minute = formState.startTime.substr(3, 2)
if (selectedHour == hour) {
for (let i = 0; i < minute; i++) {
minutes.push(i)
}
}
return minutes
}
}
//获取不可选择的秒
const disabledTimeEndSeconds = (selectedHour, selectedMinute) => {
if (formState.startTime) {
let seconds = []
let hour = formState.startTime.substr(0, 2)
let minute = formState.startTime.substr(3, 2)
let second = formState.startTime.substr(6, 2)
if (selectedHour == hour && selectedMinute.value == minute) {
for (let i = 0; i <= second; i++) {
seconds.push(i)
}
}
return seconds
}
}
//分页
const onRoomChange = (pageNumber) => {
roomPage.value = pageNumber
searchData()
}
const onShowSizeChange = (current, pageSize) => {
roomLimit.value = pageSize
searchData()
}
const onRoomChangeChengguo = (pageNumber) => {
roomPage.value = pageNumber
chengguoSearch()
}
const onShowSizeChangeChengguo = (current, pageSize) => {
roomLimit.value = pageSize
chengguoSearch()
}
//预约
const appointment = (item) => {
console.log(item, 8888888888)
dateId.value = item.id
formState.roomId = item.id
formState.roomName = item.name
appointmentRoom.value = true
}
//预约弹框 选择日期
const handleChange = (i) => {
let query = {
date: i, //查询的riqi
roomId: dateId.value, //会议室主键
}
getDate(query).then(({ data: res }) => {
roomDateList.value = res.data
})
}
const columnsRomm = [
{
title: '会议室名称',
dataIndex: 'roomName',
align: 'center',
},
{
title: '预约时段',
key: 'bookDate',
align: 'center',
},
{
title: '预约状态',
key: 'state',
align: 'center',
},
{
title: '预约详情',
key: 'action',
align: 'center',
},
]
const dataRoom = ref([])
const bodystyle = {
paddingTop: 0,
borderBottom: 0,
}
const handleOk = (e) => {
console.log(e)
}
//文件上传成功回调
const roomUpload = (response) => {
if (response.file.response !== undefined) {
fileList.value = response.fileList
formState.file = response.file.response.data
}
}
//提交预约
const onSubmit = () => {
validate()
.then(() => {
setSubmit(formState).then(({ data: res }) => {
appointmentRoom.value = false
rulesRef.bookDate = []
rulesRef.startTime = []
rulesRef.name = []
rulesRef.matter = []
rulesRef.phone = []
rulesRef.dept = []
formState.roomId = ''
formState.bookDate = ''
formState.startTime = '' //开始时间
formState.endTime = '' //结束时间
formState.name = ''
formState.phone = ''
formState.dept = ''
formState.matter = ''
formState.file = ''
fileList.value = []
searchData()
})
})
.catch((err) => {
console.log('error', err)
})
}
//会议室查询接口
const searchData = () => {
let query = {
bookDate: roomCerateDate.value, // 预约开始时间 年月日
startTime: roomCreateTime.value, //预约开始时 间时分秒
endTime: roomEndTime.value, // 预约结束时间
name: roomInput.value, //会议室名称
page: roomPage.value, //页码
limit: roomLimit.value, //每页条数
}
getRoomSearch(query).then(({ data: res }) => {
roomList.value = res.data.list
roomTotal.value = res.data.total
})
}
const emits = defineEmits(['add'])
//表格的高度
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 == '视频资源') {
room.value = true
tableHeight.value = 330
showMap.value = true
tabList.value[1].title = '视频标签'
} else if (name == '云资源') {
room.value = true
tableHeight.value = 600
showMap.value = false
dataSource.value = []
dataSource2.value = []
pagination.value.total = 0
tabList.value[1].title = '云资源分类'
} else if (name == '感知资源') {
room.value = true
tableHeight.value = 330
showMap.value = true
dataSource.value = []
dataSource2.value = []
pagination.value.total = 0
} else if (name == '城市云脑会客厅') {
// room.value = false
// wrjFlag.value = true
// showMap.value = false
// roomYuyue.value = true
// roomResult.value = false
// tabList.value[1] = []
// emits('add', 6)
// searchData()
}
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 = []
room.value = true
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 + ''
emits('add', 1)
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',
]
room.value = true
wrjFlag.value = false
emits('add', 2)
} 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 = []
room.value = true
wrjFlag.value = false
emits('add', 3)
} else if (name == '无人机') {
room.value = true
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 == '单兵设备') {
room.value = true
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 if (name == '城市云脑会客厅') {
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 = []
wrjFlag.value = true
room.value = false
// wrjFlag.value = true
// showMap.value = false
roomYuyue.value = true
roomResult.value = false
// tabList.value[1] = []
emits('add', 6)
searchData()
} 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 (page) {
if (page.layerX) {
page = 1
}
if (selectedList.value.length > 0) {
videoTotal.value = selectedList.value.length
const arr = JSON.parse(JSON.stringify(selectedList.value))
let start = (page - 1) * 4
let list = []
list = arr.splice(start, 4)
const length = list.length
videoList.value = []
for (let index = 0; index < length; index++) {
const param = {
key: list[index].channelId,
}
let ob = {
options: {
width: '512px', //播放器宽度
height: '288px', //播放器高度
color: '#409eff', //主题色
title: '', //视频名称
src: '', //视频源
type: 'm3u8', // 视频源类型
muted: false, //静音
webFullScreen: false,
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
autoPlay: isXiHaiAn, //自动播放
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 batchPicturePreview = async function (page) {
if (page.layerX) {
page = 1
}
if (selectedList.value.length > 0) {
videoTotal.value = selectedList.value.length
const arr = JSON.parse(JSON.stringify(selectedList.value))
let start = (page - 1) * 4
let list = []
list = arr.splice(start, 4)
const length = list.length
videoList.value = []
for (let index = 0; index < length; index++) {
const param = {
channelCode: list[index].channelId,
}
let ob = {
options: {
src: '', //图片源
},
}
selectByChannelCode(param).then((res) => {
ob.options.src = (res.data.data && res.data.data[0].picUrl) || ''
videoList.value.push(ob)
})
}
console.log('验证数据的准确性', videoList)
batchPicVisible.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 = []
current.value = 1
}
// 改变批量预览的分页
const changePage = (page) => {}
// 一键申请
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 wrjFlag = ref(false)
const getCamera = (flag, str) => {
console.log('mapSearchParam.value.cameraName------------>', mapSearchParam.value.cameraName);
if (flag) {
mapSearchParam.value.cameraName = str
console.log('赋值===============》', str, mapSearchParam.value)
}
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 {
console.log('mapSearchParam------------>', mapSearchParam);
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 || '',
status: 1,
name: mapSearchParam.value.cameraName
}
if (
params.regionId === '70be8c5b664f4bcf869d82f2e8335051' &&
!params.name &&
!params.longitude
) {
params.status = ''
}
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)
})
}
}
defineExpose({
getCamera,
})
//加入申购车
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()
}
// 视频播放 todo
// const vue3VideoPlay = ref(null)
const onPlay = (ev) => {
console.log('播放')
// message.warning('视频播放')
// nextTick(() => {
// // console.log('vue3VideoPlay.value.state------------>', vue3VideoPlay.value.state);
// })
}
const onPause = (ev) => {
console.log(ev, '暂停')
}
const onTimeupdate = (ev) => {
console.log(ev, '时间更新')
onPause(ev)
}
const onCanplay = (ev) => {
console.log(ev, '可以播放')
}
</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;
}
}
.roomBackground {
background: #0058e1;
color: #ffffff;
}
.nullBackground {
background: #f3f5f9;
color: #0087ff;
}
:deep(.ant-form-item-control-input-content) {
margin-left: 0.15rem;
}
:deep(.ant-col) {
.ant-form-item {
margin-bottom: 0;
}
}
.jinggaoD {
display: flex;
align-items: center;
}
.jinggaoNull {
display: none;
}
.imgJinggao {
width: 0.2rem;
height: 0.2rem;
background: url('~@/assets/home/jingao.png') no-repeat;
background-size: 100%;
}
.introduction {
:deep(.ant-form-item-control) {
margin-left: -2.1rem;
}
}
.roomBox {
.leftMake {
float: left;
margin-left: -1rem;
margin-top: -0.5rem;
font-size: 0.2rem;
cursor: pointer;
.leftTop {
width: 0.6rem;
height: 1.75rem;
border-top-left-radius: 0.08rem;
border-bottom-left-radius: 0.08rem;
padding: 0.13rem;
text-align: center;
}
.leftBottom {
width: 0.6rem;
height: 1.75rem;
border-top-left-radius: 0.08rem;
border-bottom-left-radius: 0.08rem;
padding: 0.2rem 0.13rem 0.1rem 0.1rem;
text-align: center;
}
}
.roomSearch {
display: flex;
align-items: center;
.searchInput {
display: flex;
margin-right: 0.2rem;
margin-left: 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.06rem;
font-size: 0.14rem;
}
}
:deep(.ant-btn) {
border-radius: 0.06rem;
}
}
}
.roomTableList {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.4rem 0 0.2rem 0;
.roomTime {
display: flex;
align-items: center;
:deep(.ant-space-vertical) {
flex-direction: inherit;
margin-left: 0.2rem;
}
}
}
.roomItem {
width: 10.3rem;
height: 2rem;
border-top: 1px #d5d4d4 solid;
display: flex;
align-items: center;
.leftImg {
width: 2.4rem;
height: 1.75rem;
margin: 0 0.3rem 0 0.15rem;
// background: url('~@/assets/home/yyzy_square.png') no-repeat;
background-size: 100%;
img {
width: 100%;
height: 100%;
}
}
.rightContent {
height: 1.75rem;
width: 5.8rem;
.topContent {
font-size: 0.2rem;
color: #000;
font-weight: 600;
}
.centerContent {
display: flex;
justify-content: space-between;
font-size: 0.14rem;
margin: 0.15rem 0 0.2rem 0;
}
}
}
:deep(.ant-pagination) {
float: right;
}
:deep(.ant-pagination) {
text-align: end;
}
}
</style>
<style lang="less">
.wrj {
.ant-modal-body {
height: 700px !important;
}
}
.modalClass {
.ant-modal-body {
height: 4rem !important;
overflow-y: scroll !important;
}
.ant-modal-title {
font-weight: 600;
}
.ant-modal-content {
.ant-modal-header {
border-bottom: 0 !important;
}
}
}
.appModal {
.ant-modal-body {
height: 4.8rem !important;
overflow-y: scroll !important;
}
.ant-modal-title {
font-weight: 600;
}
.ant-modal-content {
.ant-modal-header {
border-bottom: 0 !important;
}
}
}
.single-preview-modal {
.ant-modal-header {
background: url(~@/assets/home/video-background.png) no-repeat;
background-size: cover;
}
.ant-modal-title {
font-size: 0.16rem;
font-weight: 500;
color: #ffffff;
}
.anticon {
color: #ffffff;
}
}
.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: 10px;
grid-column-gap: 10px;
}
.ant-pagination-item-link {
background-color: #5580f7;
}
.ant-modal-header {
background: url(~@/assets/home/video-background.png) no-repeat;
background-size: cover;
}
.ant-modal-title {
font-size: 0.16rem;
font-weight: 500;
color: #ffffff;
}
.anticon {
color: #ffffff;
}
}
</style>