2654 lines
75 KiB
Vue
2654 lines
75 KiB
Vue
<!-- 基础设施 -->
|
||
<template>
|
||
<div class="infrastructrueBox">
|
||
<!-- 选项卡 -->
|
||
<div class="infrastructrue-tab">
|
||
<div v-for="(item, index) in tabList" :key="index" class="tabBox">
|
||
<b class="leftType">{{ item.title }}</b>
|
||
<el-button
|
||
@click="nullClick"
|
||
v-if="item.title == '视频标签'"
|
||
type="small"
|
||
>
|
||
清空
|
||
</el-button>
|
||
<span
|
||
v-for="itemContent in item.content"
|
||
:key="itemContent"
|
||
@click="tabClick(index, itemContent)"
|
||
:class="
|
||
clickList[index].content.indexOf(itemContent.labelName) != -1 ||
|
||
clickList[index].content.indexOf(itemContent) != -1
|
||
? 'down'
|
||
: ''
|
||
"
|
||
>
|
||
{{ itemContent.labelName || itemContent }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div 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>
|
||
<!-- v-bind="validateInfos.phone" -->
|
||
<a-col :span="8">
|
||
<a-form-item
|
||
name="phone"
|
||
label="联系电话"
|
||
>
|
||
<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 || 0 }}</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
|
||
v-if="isXiHaiAn"
|
||
type="primary"
|
||
@click="addShoppingCart"
|
||
class="buttonAdd"
|
||
>
|
||
添加至申购车
|
||
</a-button>
|
||
<!-- 一键申请 -->
|
||
<a-button
|
||
v-if="isXiHaiAn"
|
||
type="primary"
|
||
@click="apply"
|
||
class="buttonAdd"
|
||
>
|
||
一键申请
|
||
</a-button>
|
||
<a-button v-else type="primary" @click="goToWeb" class="buttonAdd">
|
||
我要申请{{ selectType }}
|
||
</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="isXiHaiAn && column.dataIndex === 'status'">
|
||
<span>{{ statusText[record.status] || '' }}</span>
|
||
</template>
|
||
<template v-if="column.dataIndex === 'operation'">
|
||
<a
|
||
@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">
|
||
<!-- 西海岸--预览视频--遮罩 todo-->
|
||
<div class="video-cover" @click="videoShowMsg" v-show="isXiHaiAn"></div>
|
||
<div class="waterMark waterMark-left-top" v-show="isXiHaiAn">
|
||
{{ userInfo.usernameShow }}
|
||
</div>
|
||
<div class="waterMark waterMark-right-top" v-show="isXiHaiAn">
|
||
{{ userInfo.realNameShow }}
|
||
</div>
|
||
<div class="waterMark waterMark-left-bottom" v-show="isXiHaiAn">
|
||
{{ userInfo.usernameShow }}
|
||
</div>
|
||
<div class="waterMark waterMark-right-bottom" v-show="isXiHaiAn">
|
||
{{ userInfo.realNameShow }}
|
||
</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)" v-show="isXiHaiAn"></div>
|
||
<div class="batch-waterMark batch-waterMark-left-top" v-show="isXiHaiAn">
|
||
{{ userInfo.usernameShow }}
|
||
</div>
|
||
<div class="batch-waterMark batch-waterMark-right-top" v-show="isXiHaiAn">
|
||
{{ userInfo.realNameShow }}
|
||
</div>
|
||
<div class="batch-waterMark batch-waterMark-left-bottom" v-show="isXiHaiAn">
|
||
{{ userInfo.usernameShow }}
|
||
</div>
|
||
<div class="batch-waterMark batch-waterMark-right-bottom" v-show="isXiHaiAn">
|
||
{{ userInfo.realNameShow }}
|
||
</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 { getUser, getUserInfo } from '@/api/home'
|
||
import {
|
||
getCameraByParentId,
|
||
getStreamByChannelCode,
|
||
getCameraAllLabel,
|
||
selectByChannelCode,
|
||
} from '@/api/videoSurveillance'
|
||
import { getCameraByCondition } from '@/api/file'
|
||
import {
|
||
sgcInsert,
|
||
getRoomSearch,
|
||
getDate,
|
||
setSubmit,
|
||
getYuyue,
|
||
getSoldierList,
|
||
getMaxApplyNum,
|
||
} 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
|
||
}
|
||
// 消息列表页面
|
||
let formPage = router.currentRoute.value.query.formPage || ''
|
||
onMounted(() => {
|
||
// 获取用户信息
|
||
handleUser()
|
||
|
||
if (jcssType.value) {
|
||
tabClick(0, jcssType.value)
|
||
if (jcssType.value == '视频资源') {
|
||
getCamera()
|
||
}
|
||
} else {
|
||
if (isXiHaiAn) {
|
||
let _obj = {
|
||
title: '视频标签',
|
||
content: ['视频资源'],
|
||
}
|
||
clickList.value.push(_obj)
|
||
tabClick(0, '视频资源')
|
||
} else {
|
||
// 默认选中
|
||
if(formPage && formPage == 'noticePage') {
|
||
tabClick(0, '城市云脑会客厅')
|
||
roomYuyue.value = false
|
||
roomResult.value = true
|
||
onSearch()
|
||
}else {
|
||
tabClick(0, '政务云资源')
|
||
}
|
||
}
|
||
}
|
||
|
||
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
|
||
mapSearchParam.value.type = param.type
|
||
mapSearchParam.value.borderPolygonList = param.borderPolygonList
|
||
mapSearchParam.value.pageSize = param.type != 0 ? 20000 : 10
|
||
selectedRowKeys.value = [] //清空选中的点位
|
||
selectedList.value = []
|
||
|
||
dataSource.value = param.dataSource
|
||
pagination.value.total = param.total
|
||
// getCamera()
|
||
})
|
||
//点位点击
|
||
mybus.off('pointMarkerClick')
|
||
mybus.on('pointMarkerClick', (point) => {
|
||
console.log('pointMarkerClick->point', selectedList.value, point)
|
||
let check = false //是否勾选
|
||
if (selectedList.value && selectedList.value.length > 0) {
|
||
selectedList.value.forEach((ele) => {
|
||
if (ele.channelCode == point.data.channelCode) {
|
||
check = true
|
||
}
|
||
})
|
||
}
|
||
let pointData = new Proxy(point.data, point)
|
||
onSelectChange(pointData, !check, '', '', 'proxy')
|
||
})
|
||
})
|
||
const selectedList = ref([])
|
||
const selectedRowKeys = ref([])
|
||
const tabList = ref([
|
||
{
|
||
title: '设施类型',
|
||
content: isXiHaiAn
|
||
? ['视频资源']
|
||
: ['政务云资源', '视频资源' /**',感知资源' */, '城市云脑会客厅'],
|
||
},
|
||
])
|
||
let clickList = ref([]) //存储点击的tab
|
||
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)
|
||
// 打开视频预览
|
||
const openVideo = (id, item) => {
|
||
// 单个预览
|
||
if (item && item.status != 1) {
|
||
rowClickData.value = item
|
||
return message.warning('当前设备离线！')
|
||
}
|
||
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('获取到的列表数据')
|
||
})
|
||
}
|
||
|
||
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'])
|
||
const selectType = ref('政务云资源')
|
||
//表格的高度
|
||
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 = '视频标签'
|
||
}
|
||
selectType.value = '视频资源'
|
||
console.log('444------------>', 444);
|
||
|
||
} 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 = '政务云资源分类'
|
||
}
|
||
selectType.value = '政务云资源'
|
||
} else if (name == '感知资源') {
|
||
room.value = true
|
||
tableHeight.value = 330
|
||
showMap.value = true
|
||
dataSource.value = []
|
||
dataSource2.value = []
|
||
pagination.value.total = 0
|
||
selectType.value = '感知资源'
|
||
} 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 == '视频资源') {
|
||
selectType.value = '视频资源'
|
||
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)
|
||
})
|
||
}
|
||
// todo
|
||
mapSearchParam.value.gpsX = ''
|
||
mapSearchParam.value.gpsY = ''
|
||
mapSearchParam.value.radius = ''
|
||
mapSearchParam.value.type = ''
|
||
console.log('mapSearchParam----->查询条件', mapSearchParam.value)
|
||
mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
|
||
emits('add', 1)
|
||
getCamera()
|
||
} else if (name == '政务云资源') {
|
||
selectType.value = '政务云资源'
|
||
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 == '感知资源') {
|
||
selectType.value = '感知资源'
|
||
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
|
||
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()
|
||
}
|
||
// 重置
|
||
const clean = () => {
|
||
mapSearchParam.value.cameraName = ''
|
||
selectedList.value = []
|
||
selectedRowKeys.value = []
|
||
videoList.value = []
|
||
pagination.value.current = 1
|
||
mapSearchParam.value.pageNum = 1
|
||
mapSearchParam.value.type = 0
|
||
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 judegNumber = () => {
|
||
return new Promise((resolve, reject) => {
|
||
getMaxApplyNum(selectedRowKeys.value.length)
|
||
.then((res) => {
|
||
resolve(res)
|
||
})
|
||
.catch((err) => {
|
||
reject(err)
|
||
})
|
||
})
|
||
}
|
||
|
||
const apply = async () => {
|
||
console.log('一键申请', selectedList.value)
|
||
if (selectedRowKeys.value.length != 0) {
|
||
// 判断最大数量
|
||
let maxNumRes = await judegNumber()
|
||
if (maxNumRes.data.code != 0) {
|
||
return
|
||
}
|
||
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 goToWeb = () => {
|
||
switch (selectType.value) {
|
||
case '政务云资源':
|
||
window.open('http://15.72.183.88:8760/yzy/login')
|
||
break
|
||
case '视频资源':
|
||
window.open('http://15.72.183.88:8860/video')
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
// // 添加至购物车
|
||
// 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,
|
||
longitude: mapSearchParam.value.gpsX || '',
|
||
latitude: mapSearchParam.value.gpsY || '',
|
||
radius: mapSearchParam.value.radius || '',
|
||
name: mapSearchParam.value.cameraName,
|
||
type: mapSearchParam.value.type,
|
||
borderPolygonList: mapSearchParam.value.borderPolygonList || [],
|
||
}
|
||
// 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(params).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) {
|
||
let _arr = []
|
||
selectedList.value.map(v => {
|
||
_arr.push({
|
||
delFlag: '0',
|
||
resourceId: v.idtCameraChannel,
|
||
note1: [v],
|
||
})
|
||
})
|
||
console.log('_arr------------>', _arr);
|
||
sgcInsert(_arr).then((res) => {
|
||
console.log('res------申购车------>', res);
|
||
if(res.data.code !== 0) {
|
||
return message.error(res.data.msg)
|
||
}
|
||
message.success('添加申购车成功！')
|
||
mybus.emit('getSgcNum')
|
||
})
|
||
} else {
|
||
message.error('请选择需要添加申购车的数据')
|
||
}
|
||
}
|
||
// 表格
|
||
const dataSource = ref([])
|
||
const dataSource2 = ref([])
|
||
const statusText = ref({
|
||
0: '离线',
|
||
1: '在线',
|
||
})
|
||
const columns = ref([
|
||
{
|
||
title: '名称',
|
||
dataIndex: 'channelName',
|
||
key: 'channelName',
|
||
},
|
||
{
|
||
title: '归属',
|
||
dataIndex: 'managementUnitName',
|
||
width: '60%',
|
||
key: 'managementUnitName',
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'operation',
|
||
width: '10%',
|
||
key: 'channelId',
|
||
},
|
||
])
|
||
// 西海岸--状态展示
|
||
if(isXiHaiAn) {
|
||
columns.value.splice(2, 0, {
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
width: '10%',
|
||
key: 'status',
|
||
})
|
||
}
|
||
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,
|
||
type
|
||
) => {
|
||
console.log('hahhahah', record, selected, selectedRows, nativeEvent)
|
||
record = JSON.parse(JSON.stringify(record))
|
||
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.forEach((ele, index) => {
|
||
if (ele.channelCode == record.channelCode) {
|
||
selectedList.value.splice(index, 1)
|
||
}
|
||
})
|
||
selectedRowKeys.value.splice(
|
||
selectedRowKeys.value.indexOf(record.channelCode || record.channelId),
|
||
1
|
||
)
|
||
}
|
||
mybus.emit('selectTablePoint', selectedList.value)
|
||
console.log('已选中======================>', selectedList.value)
|
||
}
|
||
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
|
||
// )
|
||
selectedList.value.forEach((ele, index) => {
|
||
if (ele.channelCode == record.channelCode) {
|
||
selectedList.value.splice(index, 1)
|
||
}
|
||
})
|
||
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)
|
||
mybus.emit('selectTablePoint', selectedList.value)
|
||
}
|
||
|
||
// 切换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)
|
||
}
|
||
|
||
// 获取用户信息
|
||
const userInfo = ref(null)
|
||
const handleUser = () => {
|
||
getUser()
|
||
.then((res) => {
|
||
if (res.data.code != 0) {
|
||
return message.warning(res.data.msg)
|
||
}
|
||
userInfo.value = res.data.data || {}
|
||
userInfo.value.usernameShow =
|
||
'西海岸能力超市' +
|
||
(userInfo.value.deptName || '') +
|
||
(userInfo.value.username || '')
|
||
userInfo.value.realNameShow =
|
||
'西海岸能力超市' +
|
||
(userInfo.value.deptName || '') +
|
||
(userInfo.value.realName || '')
|
||
})
|
||
.catch((err) => {
|
||
message.warning(err)
|
||
})
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.waterMark {
|
||
position: absolute;
|
||
z-index: 99999999;
|
||
color: #0058e1;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
opacity: 0.4;
|
||
transform: rotate(-25deg);
|
||
width: 470px;
|
||
}
|
||
|
||
// 左上
|
||
.waterMark-left-top {
|
||
left: 50px;
|
||
top: 100px;
|
||
text-align: left;
|
||
}
|
||
|
||
// 右上
|
||
.waterMark-right-top {
|
||
right: 50px;
|
||
top: 100px;
|
||
text-align: right;
|
||
}
|
||
|
||
// 左下
|
||
.waterMark-left-bottom {
|
||
left: 50px;
|
||
bottom: 100px;
|
||
text-align: left;
|
||
}
|
||
|
||
// 右下
|
||
.waterMark-right-bottom {
|
||
right: 50px;
|
||
bottom: 100px;
|
||
text-align: right;
|
||
}
|
||
|
||
// 批量
|
||
.batch-waterMark {
|
||
position: absolute;
|
||
z-index: 99999999;
|
||
color: #0058e1;
|
||
font-size: 14px;
|
||
opacity: 0.4;
|
||
transform: rotate(-25deg);
|
||
width: 200px;
|
||
}
|
||
|
||
// 左上
|
||
.batch-waterMark-left-top {
|
||
left: 30px;
|
||
top: 50px;
|
||
text-align: left;
|
||
}
|
||
|
||
// 右上
|
||
.batch-waterMark-right-top {
|
||
text-align: right;
|
||
right: 30px;
|
||
top: 80px;
|
||
}
|
||
|
||
// 左下
|
||
.batch-waterMark-left-bottom {
|
||
left: 30px;
|
||
bottom: 50px;
|
||
text-align: left;
|
||
}
|
||
|
||
// 右下
|
||
.batch-waterMark-right-bottom {
|
||
right: 20px;
|
||
bottom: 30px;
|
||
text-align: right;
|
||
}
|
||
</style>
|