<!-- 基础设施 --> <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, record ) "> 预览 </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="pagination" @change="handleTableChange"> <template #bodyCell="{ column, record }"> <template v-if="column.dataIndex === 'operation'"> <a-button @click="goToApply(record)" type="link" :disabled="record.state != 1"> 申请 </a-button> <a-button @click="showWrj(record)" type="link"> 详情 </a-button> </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%;position:relative"> <!-- 预览视频--遮罩 --> <div class="video-cover" @click="videoShowMsg"></div> <vue3VideoPlay v-bind="options" /> </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, index) in videoList" :key="item.id" style="width: 100%; height: 100%;position:relative"> <!-- 批量预览视频--遮罩 --> <div class="batch-video-cover" @click="videoShowMsg(index)"></div> <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"> <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; "> {{ db.attrType || '--' }} </div> <template v-if="db.attrValue"> <div style="padding: 0 30px" v-for="(value, key2) in JSON.parse(db.attrValue)" :key="value"> {{ key2 + ':' + value }} </div> </template> </template> </div> </a-modal> </div> </div> </template> <script setup> import VideoSurveillance from '@/views/home/videoSurveillance' import { useRouter } from 'vue-router' import { message, Upload } from 'ant-design-vue' import { ref, reactive, onMounted, defineProps, watch, defineComponent, nextTick, defineExpose, computed, } from 'vue' import { getCameraByParentId, getStreamByChannelCode, getCameraAllLabel, selectByChannelCode, } from '@/api/videoSurveillance' import { getCameraByCondition } from '@/api/file' import { sgcInsert, getRoomSearch, getDate, setSubmit, getYuyue, getSoldierList, } 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 ? false : true, //自动播放 loop: false, //循环播放 mirror: false, //镜像画面 ligthOff: false, //关灯模式 volume: 0.3, //默认音量大小 control: isXiHaiAn ? false : true, //是否显示控制 controlBtns: isXiHaiAn ? [] : [ '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({ 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) { 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: isXiHaiAn ? ['视频资源'] : ['视频资源', '云资源', '感知资源', '城市云脑会客厅'], }, ]) if (!isXiHaiAn) { tabList.value.push({ title: '视频标签', content: [], }) } const wrjVisible = ref(false) const wrjName = ref('') const wrjData = ref([]) // 单兵、无人机-详情 const showWrj = (data) => { wrjName.value = data.wrjName wrjData.value = data.deviceAttrDTOList || [] wrjVisible.value = true } const goToWrj = (data) => { window.open(data.url) } // 西海岸-无人机、单兵设备申请 const goToApply = (data) => { console.log(data, dept) let arr = [ { arr: [ { // description: // '申请单兵手持便携终端,提告前端人员执法透明度,加强执法人员与指挥中心实时沟通。', // resourceId: 'dbsb', // type: '单兵设备', description: data.description, resourceId: data.id, resourceName: data.wrjName, type: data.type, }, ], deptId: dept.deptId || data.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 rowClickData = ref(null) // 打开视频预览 todo1 const openVideo = (id, item) => { if(item) { rowClickData.value = item; } 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 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) { let hours = [] let hour = roomEndTime.value.substr(0, 2) 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) => { 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 if (tabList.value[1]) { tabList.value[1].title = '视频标签' } } else if (name == '云资源') { room.value = true tableHeight.value = 600 showMap.value = false dataSource.value = [] dataSource2.value = [] pagination.value.total = 0 if (tabList.value[1]) { 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 if (tabList.value[1]) { tabList.value[1].content = [] tabList.value[1].title = '视频标签' } if (clickList.value[1]) { clickList.value[1].content = [] } clickList.value[indexFather].content[0] = name dataSource.value = [] dataSource2.value = [] room.value = true getCameraAllLabel().then((res) => { res.data.data.forEach((val) => { if (tabList.value[1]) { tabList.value[1].content.push({ labelCode: val.labelCode, labelName: val.labelName, }) } }) }) // 改变查询摄像头接口的labelCode数组 mapSearchParam.value.labelCodes = [] if (clickList.value[1]) { 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 if (clickList.value[1]) { clickList.value[1].content = [] } clickList.value[indexFather].content[0] = name if (tabList.value[1]) { tabList.value[1].title = '云资源分类' tabList.value[1].content = [ '云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP', ] } room.value = true wrjFlag.value = false emits('add', 2) } else if (name == '感知资源') { tableHeight.value = 330 showMap.value = true if (clickList.value[1]) { clickList.value[1].content = [] } pagination.value.total = 0 clickList.value[indexFather].content[0] = name if (tabList.value[1]) { tabList.value[1].content = [] tabList.value[1].title = '感知资源分类' } dataSource.value = [] dataSource2.value = [] room.value = true wrjFlag.value = false emits('add', 3) } else if (name == '无人机') { pagination.value.current = 1; getSoldierData(indexFather, name) } else if (name == '单兵设备') { pagination.value.current = 1; getSoldierData(indexFather, name) } else if (name == '城市云脑会客厅') { showMap.value = false dataSource.value = [] dataSource2.value = [] pagination.value.total = 0 if (clickList.value[1]) { clickList.value[1].content = [] } clickList.value[indexFather].content[0] = name if (tabList.value[1]) { tabList.value[1].content = [] tabList.value[1].title = '' } wrjFlag.value = true room.value = false roomYuyue.value = true roomResult.value = false emits('add', 6) searchData() } else { if (clickList.value[indexFather]) { clickList.value[indexFather].content.push(name) } } } // 改变查询摄像头接口的labelCode数组 mapSearchParam.value.labelCodes = [] if (clickList.value[1]) { clickList.value[1].content.map((item) => { mapSearchParam.value.labelCodes.push(item.labelCode) }) } console.log('选中的标签code', mapSearchParam.value) mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + '' if (name == '云资源' || name == '感知资源') { dataSource.value = [] dataSource2.value = [] pagination.value.total = 0 } else { if (name !== '无人机' && name !== '单兵设备') { getCamera() } } } // 无人机、单兵设备状态 const wrjStateObj = { 0: '待审批', 1: '未申请', 2: '通过', 3: '未通过' } // 获取无人机、单兵设备 const getSoldierData = (indexFather, name) => { room.value = true tableHeight.value = 600 showMap.value = false dataSource.value = [] dataSource2.value = [] if (clickList.value[1]) { clickList.value[1].content = [] } clickList.value[indexFather].content[0] = name if (tabList.value[1]) { tabList.value[1].title = '' tabList.value[1].content = [] } wrjFlag.value = true let _params = { type: name, page: pagination.value.current, limit: pagination.value.pageSize, } getSoldierList(_params).then(res => { console.log('res---获取无人机、单兵设备--------->', res); if (res.data.code !== 0) { return message.error(res.data.msg) } let { list = [], total = 0 } = res.data.data; console.log('total------------>', total); pagination.value.total = total if (name == '无人机') { list.map((wrj) => { dataSource2.value.push({ wrjName: wrj.name, wrjState: wrjStateObj[wrj.state], url: wrj.url, details: wrj.details, ...wrj }) }) } if (name == '单兵设备') { list.map((db) => { dataSource2.value.push({ wrjName: db.name, wrjState: wrjStateObj[db.state], details: db.details, type: db.type, ...db }) }) } }).catch(err => { message.error(err) }) } // 打开视频批量预览 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 ? false : true, //自动播放 loop: false, //循环播放 mirror: false, //镜像画面 ligthOff: false, //关灯模式 volume: 0.3, //默认音量大小 control: isXiHaiAn ? false : true, //是否显示控制 controlBtns: isXiHaiAn ? [] : [ 'audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen', ], //显示所有按钮, }, } await getStreamByChannelCode(param).then((res) => { // 视频测试 // ob.options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8' 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 = () => { if (clickList.value[1]) { 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) { console.log('infrastructure------------>', 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 || '', name: mapSearchParam.value.cameraName } // todo-临时放开 // 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', align: 'center' }, { title: '申请状态', dataIndex: 'wrjState', width: '60%', key: 'wrjState', align: 'center' }, { title: '操作', dataIndex: 'operation', width: '20%', key: 'wrjName', align: 'center' }, ]) // 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) } // 切换tab const handleTableChange = (val) => { pagination.value.current = val.current pagination.value.pageSize = val.pageSize mapSearchParam.value.pageNum = val.current mapSearchParam.value.pageSize = val.pageSize let _arr = clickList.value.filter(v => v.content.includes('单兵设备') || v.content.includes('无人机')) || [] let _tab_name = _arr[0] && _arr[0].content && _arr[0].content[0] // 无人机、单兵设备 if (_tab_name) { getSoldierData(0, _tab_name) } else { getCamera() } } // 视频预览 提示 const videoShowMsg = (index) => { let itemData = null; if (index) { itemData = selectedList.value[index] } let msg = '请申请后在我的申请中预览视频!' if ((itemData && itemData.status != 1) || (rowClickData.value && rowClickData.value.status != 1)) { msg = '当前视频离线不可预览!' } else { msg = '请申请后在我的申请中预览视频!' } message.warning(msg) } </script> <style lang="less" scoped> .infrastructrueBox { padding: 0.2rem; background: #ffffff; border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3); .infrastructrue-tab { 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 { padding-bottom: 0.16rem; } } .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; overflow-y: auto; } } .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; } } /*禁用video的controls(要慎重!不要轻易隐藏掉,会导致点击视频不能播放)*/ video::-webkit-media-controls { display: none !important; } .video-cover { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: transparent; z-index: 99999999; cursor: pointer; } .batch-video-cover { position: absolute; left: 0; top: 0; background: transparent; height: 288px; z-index: 99999999; width: 512px; margin-top: 14px; cursor: pointer; } </style>