hi-ucs/front/src/views/home/infrastructurePage.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>
            <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="getCamera"
            />
            <a-button
              type="primary"
              style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
              @click="clean"
            >
              重置
            </a-button>
          </div>
          <i class="boundary"></i>
          <!-- 批量预览 -->
          <a-button
            type="primary"
            @click="batchPreview"
            class="buttonAdd"
            v-if="isXiHaiAn"
          >
            批量预览
          </a-button>
          <!-- 批量预览 -->
          <a-button
            type="primary"
            @click="batchPicturePreview"
            class="buttonAdd"
            v-else
          >
            批量预览
          </a-button>
          <!-- 添加至申购车 -->
          <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
            添加至申购车
          </a-button>
          <!-- 一键申请 -->
          <a-button type="primary" @click="apply" class="buttonAdd">
            一键申请
          </a-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="infrastructrue-table" v-if="!wrjFlag">
        <a-table
          class="ant-table-striped"
          :dataSource="dataSource"
          :columns="columns"
          :scroll="{ y: tableHeight }"
          rowKey="channelId"
          :rowClassName="
            (record, index) => (index % 2 === 1 ? 'table-striped' : null)
          "
          :pagination="pagination"
          @change="handleTableChange"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            // onChange: onSelectChange,
            onSelect: onSelectChange,
            onSelectAll: onSelectAll,
          }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a
                v-if="isXiHaiAn"
                @click="
                  openVideo(
                    record.channelCode ||
                      record.channelId ||
                      record.channelCode.channelId
                  )
                "
              >
                预览
              </a>
              <a
                v-else
                @click="
                  openPicture(
                    record.channelCode ||
                      record.channelId ||
                      record.channelCode.channelId
                  )
                "
              >
                预览
              </a>
            </template>
          </template>
        </a-table>
      </div>
      <div class="infrastructrue-table" v-else-if="isXiHaiAn && wrjFlag">
        <a-table
          class="ant-table-striped"
          :dataSource="dataSource2"
          :columns="columns2"
          :scroll="{ y: tableHeight }"
          rowKey="channelId"
          :rowClassName="
            (record, index) => (index % 2 === 1 ? 'table-striped' : null)
          "
          :pagination="dataSource2.length"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a
                @click="goToWrj(record)"
                style="margin-right: 10px"
                v-if="record.type !== '单兵设备'"
              >
                控制台
              </a>
              <a @click="goToApply(record)" style="margin-right: 10px" v-else>
                申请
              </a>
              <a @click="showWrj(record)">详情</a>
            </template>
          </template>
        </a-table>
      </div>
      <!-- 单个预览弹窗 -->
      <a-modal
        wrapClassName="single-preview-modal"
        v-model:visible="visible"
        title="视频预览"
        :width="960"
        destroyOnClose
      >
        <template #footer></template>
        <div style="width: 100%; display: flex; justify-content: center">
          <div style="width: 100%; height: 100%">
            <vue3VideoPlay v-bind="options" />
          </div>
        </div>
      </a-modal>
      <!-- 图片预览 -->
      <a-modal
        wrapClassName="single-preview-modal"
        v-model:visible="picVisible"
        title="图片预览"
        :width="960"
        destroyOnClose
      >
        <template #footer></template>
        <div style="width: 100%; display: flex; justify-content: center">
          <a-image :src="options.src" />
        </div>
      </a-modal>
      <!-- 批量预览图片弹窗 -->
      <a-modal
        wrapClassName="batch-preview-modal"
        v-model:visible="batchPicVisible"
        title="图片批量预览"
        :width="1060"
        destroyOnClose
        @cancel="videoClean"
      >
        <template #footer></template>
        <div class="batch-video">
          <div
            v-for="item in videoList"
            :key="item.id"
            style="width: 100%; height: 100%"
          >
            <a-image
              width="500px"
              height="281px"
              :src="item.options.src"
              fallback="data:image/png;base64,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"
            />
          </div>
        </div>
        <a-pagination
          v-model:current="current"
          :total="videoTotal"
          defaultPageSize="4"
          :showSizeChanger="false"
          @change="batchPicturePreview"
          show-less-items
        />
      </a-modal>
      <!-- 批量预览视频弹窗 -->
      <a-modal
        wrapClassName="batch-preview-modal"
        v-model:visible="batchVisible"
        title="视频批量预览"
        :width="1060"
        destroyOnClose
        @cancel="videoClean"
      >
        <template #footer></template>
        <div class="batch-video">
          <div
            v-for="item in videoList"
            :key="item.id"
            style="width: 100%; height: 100%"
          >
            <p></p>
            <vue3VideoPlay v-bind="item.options" />
          </div>
        </div>
        <a-pagination
          v-model:current="current"
          :total="videoTotal"
          defaultPageSize="4"
          :showSizeChanger="false"
          @change="batchPreview"
          show-less-items
        />
      </a-modal>
      <a-modal
        wrapClassName="wrj"
        v-model:visible="wrjVisible"
        :width="1000"
        :title="wrjName + '详情'"
        @ok="wrjVisible = false"
      >
        <template v-if="dataSource2[0].type !== '单兵设备'">
          <div v-for="wrj in wrjData" :key="wrj.name">
            <div
              style="
                font-size: 20px;
                font-weight: 600;
                margin: 10px 0;
                text-align: center;
              "
            >
              {{ wrj.name }}
            </div>
            <div
              style="padding: 0 30px"
              v-for="(value, key) in wrj.attribute"
              :key="value"
            >
              {{ key + '：' + value }}
            </div>
          </div>
        </template>
        <template v-else>
          <div v-for="(db, key) in wrjData" :key="key">
            <template v-if="typeof db == 'object'">
              <div
                style="
                  font-size: 20px;
                  font-weight: 600;
                  margin: 10px 0;
                  text-align: center;
                "
              >
                {{ key }}
              </div>
              <div
                style="padding: 0 30px"
                v-for="(value, key2) in db"
                :key="value"
              >
                {{ key2 + '：' + value }}
              </div>
            </template>
            <template v-else>
              <div style="padding: 0 30px">
                {{ key + '：' + db }}
              </div>
            </template>
          </div>
        </template>
      </a-modal>
    </div>
  </div>
</template>
<script setup>
  import VideoSurveillance from '@/views/home/videoSurveillance'
  // import { getCategoryTreePage } from '@/api/personalCenter'
  // import { dataType } from 'element-plus/es/components/table-v2/src/common'
  import { useRouter } from 'vue-router'
  import { message, Upload } from 'ant-design-vue'
  import {
    ref,
    reactive,
    onMounted,
    defineProps,
    watch,
    defineComponent,
    nextTick,
    defineExpose,
  } from 'vue'
  import {
    getCameraByParentId,
    getStreamByChannelCode,
    getCameraAllLabel,
    selectByChannelCode,
  } from '@/api/videoSurveillance'
  import { getCameraByCondition } from '@/api/file'
  import {
    sgcInsert,
    getRoomSearch,
    getDate,
    setSubmit,
    getYuyue,
  } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  import dayjs from 'dayjs'
  import { Form } from 'ant-design-vue'
  import moment from 'moment'
  const props = defineProps({
    // 模糊查
    searchValue: { type: String, default: '' },
  })
  const current = ref(1)
  const videoTotal = ref(0)
  const router = useRouter()
  const whoShow1 = ref(whoShow)
  const isXiHaiAn = whoShow1.value.itShowXiHaiAn
  const options = reactive({
    width: '912px', //播放器宽度
    height: '513px', //播放器高度
    color: '#409eff', //主题色
    title: '', //视频名称
    src: '', //视频源
    type: 'm3u8', // 视频源类型
    muted: false, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: isXiHaiAn, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      'audioTrack',
      'quality',
      'speedRate',
      'volume',
      'setting',
      'pip',
      'pageFullScreen',
      'fullScreen',
    ], //显示所有按钮,
  })
  const videoList = ref([])
  let visible = ref(false) // 视频预览
  let picVisible = ref(false) // 图片预览
  let batchVisible = ref(false) // 视频批量预览
  let batchPicVisible = ref(false) // 图片批量预览
  const jcssType = ref(router.currentRoute.value.query.type)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10, //每页中显示10条数据
    showSizeChanger: true,
    pageSizeOptions: ['10', '30', '50', '100', '1000'], //每页中显示的数据
  })
  //会议室变量区域=======
  const paginationRoom = ref({
    total: 0,
    current: 1,
    pageSize: 10, //每页中显示10条数据
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
  })
  const formState = reactive({
    // name: '',
    // iphone: '18264084961',
    // group: '',
    // create: '',
    // cerateTime: '',
    // endTime: '',
    // introduction: '',
    // uploadRoom: '',
    roomId: '',
    bookDate: '', //日期
    startTime: '', //开始时间
    endTime: '', //结束时间
    name: '',
    phone: '',
    dept: '',
    matter: '',
    file: '',
  })
  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][0-9]\d{8}$/,
        message: '请输入正确的手机号',
      },
    ],
    dept: [
      {
        required: true,
        message: '请输入部门',
      },
    ],
  })
  const { resetFields, validateInfos, validate } = useForm(formState, rulesRef)
  const mapSearchParam = ref({
    // 地图搜索初始化数据
    parentId: '',
    cameraName: '',
    checkStatus: '1',
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    gpsX: '',
    gpsY: '',
    radius: '',
    labelCodes: [],
  })
  const showMap = ref(true)
  const room = ref(true)
  const roomResult = ref(true)
  const roomYuyue = ref(true)
  const visibleRoom = ref(false)
  const appointmentRoom = ref(false)
  const labelPosition = ref('left')
  const apiURL = window.SITE_CONFIG.apiURL
  const roomList = ref([])
  const roomPage = ref(1)
  const roomLimit = ref(5)
  const roomTotal = ref(0)
  const pageSizeOptions = ref(['5', '10', '20', '50'])
  const pageSizeOptionsChengguo = ref(['5', '10', '20', '50'])
  const dateId = ref(null)
  const roomDateList = ref([])
  //开始时间---结束时间
  const roomCerateDate = ref('')
  const roomCreateTime = ref('')
  const roomEndTime = ref('')
  const roomModalCreateTime = ref('')
  const roomModalEndTime = ref('')
  const lookData = ref({})

  // console.log('模糊查传递', props.searchValue)
  if (props.searchValue) {
    // console.log('模糊查传递')
    // eslint-disable-next-line vue/no-setup-props-destructure
    mapSearchParam.value.cameraName = props.searchValue
  }
  //===========================
  onMounted(() => {
    if (jcssType.value) {
      tabClick(0, jcssType.value)
      if (jcssType.value == '视频资源') {
        getCamera()
      }
    } else {
      tabClick(0, '视频资源')
      getCamera()
    }

    mybus.off('getListByParentId')
    mybus.on('getListByParentId', (parentId) => {
      mapSearchParam.value.parentId = parentId
      getCamera()
    })
    mybus.off('getListByMap')
    mybus.on('getListByMap', (param) => {
      mapSearchParam.value.gpsX = param.gpsX
      mapSearchParam.value.gpsY = param.gpsY
      mapSearchParam.value.radius = param.radius
      getCamera()
    })
  })
  const selectedList = ref([])
  const selectedRowKeys = ref([])
  const tabList = ref([
    {
      title: '设施类型',
      content: ['视频资源', '云资源', '感知资源', '城市云脑会客厅'],
    },
    {
      title: '视频标签',
      content: [],
    },
  ])
  const wrjVisible = ref(false)
  const wrjName = ref('')
  const wrjData = ref([])
  const showWrj = (data) => {
    wrjName.value = data.wrjName
    wrjData.value = data.details
    wrjVisible.value = true
  }
  const goToWrj = (data) => {
    window.open(data.url)
  }
  const goToApply = (data) => {
    console.log(data, dept)
    let arr = [
      {
        arr: [
          {
            description:
              '申请单兵手持便携终端，提告前端人员执法透明度，加强执法人员与指挥中心实时沟通。',
            resourceId: 'dbsb',
            resourceName: data.wrjName,
            type: '单兵设备',
          },
        ],
        deptId: dept.deptId,
        deptName: dept.deptName,
      },
    ]
    localStorage.setItem('applyList', JSON.stringify(arr))
    router.push({
      path: '/apply',
    })
  }
  if (whoShow1.value.itShowXiHaiAn) {
    tabList.value[0].content.push('无人机')
    tabList.value[0].content.push('单兵设备')
  }
  // 打开视频预览
  const openVideo = (id) => {
    console.log('打开视频', id)
    const param = {
      key: id,
    }
    getStreamByChannelCode(param).then((res) => {
      console.log(res)
      visible.value = true
      options.src = res.data.data
    })
  }
  // 打开图片预览
  const openPicture = (id) => {
    console.log('打开图片', id)
    const param = {
      channelCode: id,
    }
    selectByChannelCode(param).then((res) => {
      console.log(res)
      if (res.data.data && res.data.data[0].picUrl) {
        options.src = res.data.data[0].picUrl
        picVisible.value = true
      } else {
        message.warning('该点位暂无预览图片！')
      }
    })
  }
  // const dataTypeList = () => {
  //   if (tabList.value[0].content.indexOf('视频资源') != -1) {
  //     tabList.value[1].content = ['123344', '213124']
  //   }else if(tabList.value[0].content.indexOf('云资源') != -1){
  //     tabList.value[1].content = ['5555', '666']

  //   }
  // }
  // dataTypeList()
  //初始化数据
  const init = () => {
    tabList.value.map((item) => {
      let params = {
        title: item.title,
        content: [],
      }
      clickList.value.push(params)
    })
    mybus.off('tranferToList')
    mybus.on('tranferToList', () => {
      console.log('获取到的列表数据')
    })
  }
  let clickList = ref([]) //存储点击的tab
  init()
  //点击会议室左侧切换
  const result = () => {
    roomYuyue.value = false
    roomResult.value = true
    chengguoSearch()
  }
  const chengguoSearch = () => {
    let query = {
      page: roomPage.value,
      limit: roomLimit.value,
      roomName: roomInput.value,
    }
    getYuyue(query).then(({ data: res }) => {
      dataRoom.value = res.data.list
      roomTotal.value = res.data.total
    })
  }
  const roomResults = () => {
    roomYuyue.value = true
    roomResult.value = false
  }
  // 查看详情
  const look = (row) => {
    visibleRoom.value = true
    lookData.value = row
  }
  //   搜索
  const onSearch = (searchValue) => {
    searchData()
    chengguoSearch()
  }
  //重置
  const reSetSearch = () => {
    roomInput.value = ''
    searchData()
    chengguoSearch()
  }
  // 时间选择器限制----可用时间查询
  //获取不可选择的小时
  const disabledStartHours = () => {
    if (roomEndTime.value) {
      console.log(roomEndTime.value, 5555555555)
      let hours = []
      let hour = roomEndTime.value.substr(0, 2)
      console.log(hour, 888888888888)
      for (let i = hour; i < 24; i++) {
        hours.push(i)
      }
      return hours
    }
  }
  //获取不可选择的分钟
  const disabledStartMinutes = (selectedHour) => {
    if (roomEndTime.value) {
      let minutes = []
      let hour = roomEndTime.value.substr(0, 2)
      let minute = roomEndTime.value.substr(3, 2)
      if (selectedHour == hour) {
        for (let i = minute; i < 60; i++) {
          minutes.push(i)
        }
      }
      return minutes
    }
  }
  //获取不可选择的秒
  const disabledStartSeconds = (selectedHour, selectedMinute) => {
    if (roomEndTime.value) {
      let seconds = []
      let hour = roomEndTime.value.substr(0, 2)
      let minute = roomEndTime.value.substr(3, 2)
      let second = roomEndTime.value.substr(6, 2)
      if (selectedHour == hour && selectedMinute.value == minute) {
        for (let i = second - 1; i < 60; i++) {
          seconds.push(i)
        }
      }
      return seconds
    }
  }
  //获取不可选择的小时
  const disabledEndHours = () => {
    if (roomCreateTime.value) {
      let hours = []
      let hour = roomCreateTime.value.substr(0, 2)
      for (let i = 0; i < hour; i++) {
        hours.push(i)
      }
      return hours
    }
  }
  //获取不可选择的分钟
  const disabledEndMinutes = (selectedHour) => {
    if (roomCreateTime.value) {
      let minutes = []
      let hour = roomCreateTime.value.substr(0, 2)
      let minute = roomCreateTime.value.substr(3, 2)
      if (selectedHour == hour) {
        for (let i = 0; i < minute; i++) {
          minutes.push(i)
        }
      }
      return minutes
    }
  }
  //获取不可选择的秒
  const disabledEndSeconds = (selectedHour, selectedMinute) => {
    if (roomCreateTime.value) {
      let seconds = []
      let hour = roomCreateTime.value.substr(0, 2)
      let minute = roomCreateTime.value.substr(3, 2)
      let second = roomCreateTime.value.substr(6, 2)
      if (selectedHour == hour && selectedMinute.value == minute) {
        for (let i = 0; i <= second; i++) {
          seconds.push(i)
        }
      }
      return seconds
    }
  }
  // 时间选择器限制----会议室预约时段
  //获取不可选择的小时
  const disabledTimeHours = () => {
    if (formState.endTime) {
      let hours = []
      let hour = formState.endTime.substr(0, 2)
      for (let i = hour; i < 24; i++) {
        hours.push(i)
      }
      return hours
    }
  }
  //获取不可选择的分钟
  const disabledTimeMinutes = (selectedHour) => {
    if (formState.endTime) {
      let minutes = []
      let hour = formState.endTime.substr(0, 2)
      let minute = formState.endTime.substr(3, 2)
      if (selectedHour == hour) {
        for (let i = minute; i < 60; i++) {
          minutes.push(i)
        }
      }
      return minutes
    }
  }
  //获取不可选择的秒
  const disabledTimeSeconds = (selectedHour, selectedMinute) => {
    if (formState.endTime) {
      let seconds = []
      let hour = formState.endTime.substr(0, 2)
      let minute = formState.endTime.substr(3, 2)
      let second = formState.endTime.substr(6, 2)
      if (selectedHour == hour && selectedMinute.value == minute) {
        for (let i = second - 1; i < 60; i++) {
          seconds.push(i)
        }
      }
      return seconds
    }
  }
  //获取不可选择的小时
  const disabledTimeEndHours = () => {
    if (formState.startTime) {
      let hours = []
      let hour = formState.startTime.substr(0, 2)
      for (let i = 0; i < hour; i++) {
        hours.push(i)
      }
      return hours
    }
  }
  //获取不可选择的分钟
  const disabledTimeEndMinutes = (selectedHour) => {
    if (formState.startTime) {
      let minutes = []
      let hour = formState.startTime.substr(0, 2)
      let minute = formState.startTime.substr(3, 2)
      if (selectedHour == hour) {
        for (let i = 0; i < minute; i++) {
          minutes.push(i)
        }
      }
      return minutes
    }
  }
  //获取不可选择的秒
  const disabledTimeEndSeconds = (selectedHour, selectedMinute) => {
    if (formState.startTime) {
      let seconds = []
      let hour = formState.startTime.substr(0, 2)
      let minute = formState.startTime.substr(3, 2)
      let second = formState.startTime.substr(6, 2)
      if (selectedHour == hour && selectedMinute.value == minute) {
        for (let i = 0; i <= second; i++) {
          seconds.push(i)
        }
      }
      return seconds
    }
  }
  //分页
  const onRoomChange = (pageNumber) => {
    roomPage.value = pageNumber
    searchData()
  }
  const onShowSizeChange = (current, pageSize) => {
    roomLimit.value = pageSize
    searchData()
  }
  const onRoomChangeChengguo = (pageNumber) => {
    roomPage.value = pageNumber
    chengguoSearch()
  }
  const onShowSizeChangeChengguo = (current, pageSize) => {
    roomLimit.value = pageSize
    chengguoSearch()
  }
  //预约
  const appointment = (item) => {
    dateId.value = item.id
    formState.roomId = item.id
    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
          formState.roomId = ''
          formState.bookDate = ''
          formState.startTime = '' //开始时间
          formState.endTime = '' //结束时间
          formState.name = ''
          formState.phone = ''
          formState.dept = ''
          formState.matter = ''
          formState.file = ''
          fileList.value = []
          searchData()
        })
      })
      .catch((err) => {
        console.log('error', err)
      })
  }
  //会议室查询接口
  const searchData = () => {
    let query = {
      bookDate: roomCerateDate.value, //	预约开始时间 年月日
      startTime: roomCreateTime.value, //预约开始时 间时分秒
      endTime: roomEndTime.value, //	预约结束时间
      name: roomInput.value, //会议室名称
      page: roomPage.value, //页码
      limit: roomLimit.value, //每页条数
    }
    getRoomSearch(query).then(({ data: res }) => {
      roomList.value = res.data.list
      roomTotal.value = res.data.total
    })
  }
  const emits = defineEmits(['add'])
  //表格的高度
  let tableHeight = ref('600')
  //tab切换点击事件
  const tabClick = (indexFather, name) => {
    console.log(
      '点击tab================>',
      indexFather,
      name,
      clickList.value[indexFather]
    )
    selectedRowKeys.value = []
    selectedList.value = []
    if (clickList.value[indexFather].content.indexOf(name) != -1) {
      if (name == '视频资源') {
        room.value = true
        tableHeight.value = 330
        showMap.value = true
        tabList.value[1].title = '视频标签'
      } else if (name == '云资源') {
        room.value = true
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        tabList.value[1].title = '云资源分类'
      } else if (name == '感知资源') {
        room.value = true
        tableHeight.value = 330
        showMap.value = true
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
      } else if (name == '城市云脑会客厅') {
        //     room.value = false
        //     wrjFlag.value = true
        //     showMap.value = false
        // roomYuyue.value = true
        //     roomResult.value = false
        //     tabList.value[1] = []
        //     emits('add', 6)
        //     searchData()
      }
      clickList.value[indexFather].content.splice(
        clickList.value[indexFather].content.indexOf(name),
        1
      )
    } else {
      if (name == '视频资源') {
        wrjFlag.value = false
        tableHeight.value = 330
        showMap.value = true
        tabList.value[1].content = []
        clickList.value[1].content = []
        tabList.value[1].title = '视频标签'
        clickList.value[indexFather].content[0] = name
        dataSource.value = []
        dataSource2.value = []
        room.value = true
        getCameraAllLabel().then((res) => {
          res.data.data.forEach((val) => {
            tabList.value[1].content.push({
              labelCode: val.labelCode,
              labelName: val.labelName,
            })
          })
        })
        // 改变查询摄像头接口的labelCode数组
        mapSearchParam.value.labelCodes = []
        clickList.value[1].content.map((item) => {
          mapSearchParam.value.labelCodes.push(item.labelCode)
        })
        console.log('选中的标签code', mapSearchParam.value)
        mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
        emits('add', 1)
        getCamera()
      } else if (name == '云资源') {
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        clickList.value[1].content = []
        tabList.value[1].title = '云资源分类'
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = [
          '云主机',
          '算力主机',
          '对象存储',
          '堡垒机',
          '防火墙',
          '网闸',
          '负载均衡',
          '公网IP',
        ]
        room.value = true
        wrjFlag.value = false
        emits('add', 2)
      } else if (name == '感知资源') {
        tableHeight.value = 330
        showMap.value = true
        clickList.value[1].content = []
        pagination.value.total = 0
        tabList.value[1].title = '感知资源分类'
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = []
        dataSource.value = []
        dataSource2.value = []
        room.value = true
        wrjFlag.value = false
        emits('add', 3)
      } else if (name == '无人机') {
        room.value = true
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].title = ''
        tabList.value[1].content = []
        uavAndIndividualSoldier.uavList.map((wrj) => {
          dataSource2.value.push({
            wrjName: wrj.name,
            wrjState: '已申请',
            url: wrj.url,
            details: wrj.details,
          })
        })
        wrjFlag.value = true
      } else if (name == '单兵设备') {
        room.value = true
        tableHeight.value = 600
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].title = ''
        tabList.value[1].content = []
        uavAndIndividualSoldier.individualSoldier.map((db) => {
          dataSource2.value.push({
            wrjName: db.name,
            wrjState: '未申请',
            details: db.details,
            type: db.type,
          })
        })
        wrjFlag.value = true
      } else if (name == '城市云脑会客厅') {
        showMap.value = false
        dataSource.value = []
        dataSource2.value = []
        pagination.value.total = 0
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].title = ''
        tabList.value[1].content = []
        wrjFlag.value = true
        room.value = false
        // wrjFlag.value = true
        // showMap.value = false
        roomYuyue.value = true
        roomResult.value = false
        // tabList.value[1] = []
        emits('add', 6)
        searchData()
      } else {
        clickList.value[indexFather].content.push(name)
      }
    }
    // 改变查询摄像头接口的labelCode数组
    mapSearchParam.value.labelCodes = []
    clickList.value[1].content.map((item) => {
      mapSearchParam.value.labelCodes.push(item.labelCode)
    })
    console.log('选中的标签code', mapSearchParam.value)
    mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
    // let fatherName = ref('视频资源')
    // if (name == '视频资源' || name == '云资源' || name == '感知资源') {
    //   fatherName.value == name
    // }
    // if (fatherName.value == '视频资源') {
    //   getCamera()
    // } else {
    //   dataSource.value = []
    //   pagination.value.total = 0
    // }
    if (name == '云资源' || name == '感知资源') {
      dataSource.value = []
      dataSource2.value = []
      pagination.value.total = 0
    } else {
      if (name !== '无人机' && name !== '单兵设备') {
        getCamera()
      }
    }
  }
  // 打开视频批量预览
  const batchPreview = async function (page) {
    if (page.layerX) {
      page = 1
    }
    if (selectedList.value.length > 0) {
      videoTotal.value = selectedList.value.length
      const arr = JSON.parse(JSON.stringify(selectedList.value))
      let start = (page - 1) * 4
      let list = []
      list = arr.splice(start, 4)
      const length = list.length
      videoList.value = []
      for (let index = 0; index < length; index++) {
        const param = {
          key: list[index].channelId,
        }
        let ob = {
          options: {
            width: '512px', //播放器宽度
            height: '288px', //播放器高度
            color: '#409eff', //主题色
            title: '', //视频名称
            src: '', //视频源
            type: 'm3u8', // 视频源类型
            muted: false, //静音
            webFullScreen: false,
            speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
            autoPlay: isXiHaiAn, //自动播放
            loop: false, //循环播放
            mirror: false, //镜像画面
            ligthOff: false, //关灯模式
            volume: 0.3, //默认音量大小
            control: true, //是否显示控制
            controlBtns: [
              'audioTrack',
              'quality',
              'speedRate',
              'volume',
              'setting',
              'pip',
              'pageFullScreen',
              'fullScreen',
            ], //显示所有按钮,
          },
        }
        await getStreamByChannelCode(param).then((res) => {
          ob.options.src = res.data.data
          console.log('监测ob的变化', ob)
          videoList.value.push(ob)
        })
      }
      console.log('验证数据的准确性', videoList)
      batchVisible.value = true
    } else {
      message.error('请选择需要预览的数据')
    }
  }
  // 打开图片批量预览
  const batchPicturePreview = async function (page) {
    if (page.layerX) {
      page = 1
    }
    if (selectedList.value.length > 0) {
      videoTotal.value = selectedList.value.length
      const arr = JSON.parse(JSON.stringify(selectedList.value))
      let start = (page - 1) * 4
      let list = []
      list = arr.splice(start, 4)
      const length = list.length
      videoList.value = []
      for (let index = 0; index < length; index++) {
        const param = {
          channelCode: list[index].channelId,
        }
        let ob = {
          options: {
            src: '', //图片源
          },
        }
        selectByChannelCode(param).then((res) => {
          ob.options.src = (res.data.data && res.data.data[0].picUrl) || ''
          videoList.value.push(ob)
        })
      }
      console.log('验证数据的准确性', videoList)
      batchPicVisible.value = true
    } else {
      message.error('请选择需要预览的数据')
    }
  }
  // 清空
  const nullClick = () => {
    clickList.value[1].content = []
    mapSearchParam.value.labelCodes = ''
    getCamera()
    console.log('hhhhhhhh')
  }
  // 重置
  const clean = () => {
    mapSearchParam.value.cameraName = ''
    selectedList.value = []
    selectedRowKeys.value = []
    videoList.value = []
    pagination.value.current = 1
    mapSearchParam.value.pageNum = 1
    pagination.value.pageSize = 10
    getCamera()
  }
  const videoClean = () => {
    selectedList.value = []
    selectedRowKeys.value = []
    videoList.value = []
    current.value = 1
  }
  // 改变批量预览的分页
  const changePage = (page) => {}
  // 一键申请
  const dept = reactive({})
  // eslint-disable-next-line no-undef
  if (infrastructure) {
    // eslint-disable-next-line no-undef
    dept.deptId = infrastructure.deptId
    // eslint-disable-next-line no-undef
    dept.deptName = infrastructure.deptName
  }
  const apply = () => {
    if (selectedRowKeys.value.length != 0) {
      console.log('一键申请', selectedList.value)
      let arr = [
        {
          arr: [
            {
              description: '',
              note1: JSON.stringify(selectedList.value),
              resourceId: '1522550195055828996',
              resourceName: '摄像头列表',
              type: '基础设施',
            },
          ],
          deptId: dept.deptId,
          deptName: dept.deptName,
        },
      ]
      localStorage.setItem('applyList', JSON.stringify(arr))
      router.push({
        path: '/apply',
      })
    } else {
      message.error('请选择需要申请的数据')
    }
  }
  // // 添加至购物车
  // const addShopCar = () => {
  //   console.log('添加至购物车')
  // }
  const wrjFlag = ref(false)
  const getCamera = (flag, str) => {
    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 {
      let params = {
        regionId:
          mapSearchParam.value.parentId || '70be8c5b664f4bcf869d82f2e8335051',
        pageNum: mapSearchParam.value.pageNum,
        pageSize: mapSearchParam.value.pageSize,
        name: mapSearchParam.value.cameraName || '',
        longitude: mapSearchParam.value.gpsX || '',
        latitude: mapSearchParam.value.gpsY || '',
        radius: mapSearchParam.value.radius || '',
        status: 1,
      }
      if (
        params.regionId === '70be8c5b664f4bcf869d82f2e8335051' &&
        !params.name &&
        !params.longitude
      ) {
        params.status = ''
      }
      let paramsFather = ''
      let i = 1
      for (var key in params) {
        if (params[key] === '') {
          delete params[key]
        } else {
          if (i != 1) {
            paramsFather += `&${key}=` + params[key]
            i += 1
          } else if (i == 1) {
            paramsFather += `${key}=` + params[key]
            i += 1
          }
        }
      }
      getCameraByCondition(paramsFather).then((res) => {
        dataSource.value = res.data.data
        pagination.value.total = res.data.count
        console.log('根据parent查询摄像头', res.data.data)
      })
    }
  }
  defineExpose({
    getCamera,
  })
  //加入申购车
  const addShoppingCart = () => {
    if (selectedList.value.length > 0) {
      sgcInsert({
        delFlag: '0',
        resourceId: '8888888880000000001',
        note1: selectedList.value,
        // userId: userId.value,
      }).then((res) => {
        console.log(res)
        message.success('添加申购车成功！')
        mybus.emit('getSgcNum')
      })
    } else {
      message.error('请选择需要添加申购车的数据')
    }
  }
  // 表格
  const dataSource = ref([])
  const dataSource2 = ref([])
  const columns = ref([
    {
      title: '名称',
      dataIndex: 'channelName',
      key: 'channelName',
    },
    {
      title: '归属',
      dataIndex: 'nodeName',
      width: '60%',
      key: 'nodeName',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '10%',
      key: 'channelId',
    },
  ])
  const columns2 = ref([
    {
      title: '名称',
      dataIndex: 'wrjName',
      key: 'wrjName',
    },
    {
      title: '申请状态',
      dataIndex: 'wrjState',
      width: '60%',
      key: 'wrjState',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '20%',
      key: 'wrjName',
    },
  ])
  // const allClick = ref([])
  const onSelectChange = (record, selected, selectedRows, nativeEvent) => {
    console.log('hahhahah', record, selected, selectedRows, nativeEvent)
    if (selected) {
      if (selectedRowKeys.value.length == 1000) {
        message.warning('最多只能添加1000个摄像头！')
      } else {
        selectedList.value.push(record)
        selectedRowKeys.value.push(record.channelCode || record.channelId)
      }
    } else {
      selectedList.value = selectedList.value.filter(
        (item) => item.idtCameraChannel !== record.idtCameraChannel
      )
      selectedRowKeys.value.splice(
        selectedRowKeys.value.indexOf(record.channelCode || record.channelId),
        1
      )
    }
    console.log('已选中======================>', selectedList.value)
    // selectedList.value = selectedRows
    // allClick.value = selectedRowKeys
  }
  const onSelectAll = (selected, selectedRows, changeRows) => {
    if (selected) {
      changeRows.map((val) => {
        selectedList.value.push(val)
        selectedRowKeys.value.push(val.channelCode || val.channelId)
      })
      if (selectedRowKeys.value.length > 1000) {
        message.warning('最多只能添加1000个摄像头！')
        changeRows.map((val) => {
          selectedList.value = selectedList.value.filter(
            (item) => item.idtCameraChannel !== val.idtCameraChannel
          )
          selectedRowKeys.value.splice(
            selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
            1
          )
        })
      }
    } else {
      changeRows.map((val) => {
        selectedList.value = selectedList.value.filter(
          (item) => item.idtCameraChannel !== val.idtCameraChannel
        )
        selectedRowKeys.value.splice(
          selectedRowKeys.value.indexOf(val.channelCode || val.channelId),
          1
        )
      })
    }
    console.log('heiheiheiehiehei', selected, selectedRows, changeRows)
  }
  const handleTableChange = (val) => {
    pagination.value.current = val.current
    pagination.value.pageSize = val.pageSize
    mapSearchParam.value.pageNum = val.current
    mapSearchParam.value.pageSize = val.pageSize
    getCamera()
    // this.getTableList()
  }
</script>
<style lang="less" scoped>
  .infrastructrueBox {
    padding: 0.2rem;
    // background: #f3f5f9;
    background: #ffffff;
    /* padding: 0.16rem; */
    border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
    .infrastructrue-tab {
      // background: #ffffff;
      // padding: 0.2rem;
      // border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
      span {
        display: inline-block;
        height: 0.24rem;
        font-size: 0.14rem;
        line-height: 0.24rem;
        border: 0;
        border-radius: 0.12rem;
        margin-left: 0.1rem;
        text-align: center;
        color: #666666;
        cursor: pointer;
        padding: 0 0.08rem;
      }
      .leftType {
        margin: 0.2rem 0;
        margin-right: 0.06rem;
      }
      .down {
        background: #0087ff;
        color: #ffffff;
      }
      .tabBox {
        margin-bottom: 0.16rem;
      }
      .tabBox:last-of-type {
        margin-bottom: 0;
      }
    }
    .infrastructrue-content {
      display: flex;
      justify-content: space-between;
      padding: 0.14rem 0.2rem 0.1rem;
      background: #ffffff;
      .contentNum {
        position: relative;
        display: flex;
        p {
          color: #666666;
          padding: 0;
          margin: 0;
          span {
            color: #0087ff;
            font-size: 0.2rem;
            font-weight: 500;
          }
        }
        p:first-of-type {
          padding-right: 0.16rem;
          margin-right: 0.16rem;
        }
        .boundary {
          position: absolute;
          left: 0.9rem;
          top: 0.07rem;
          display: block;
          width: 0.02rem;
          border-radius: 0.01rem;
          height: 0.2rem;
          background: rgba(150, 144, 144, 0.3);
        }
      }
      .contentRight {
        position: relative;
        display: flex;
        justify-content: space-between;
        .boundary {
          position: absolute;
          left: 3.74rem;
          top: 0.07rem;
          display: block;
          width: 0.02rem;
          border-radius: 0.01rem;
          height: 0.2rem;
          background: rgba(150, 144, 144, 0.3);
        }
        .searchInput {
          display: flex;
          margin-right: 0.2rem;
          .ant-input-search {
            max-width: 4rem;
          }
          :deep(.ant-input) {
            width: 2rem;
            height: 0.36rem;
            font-size: 0.14rem;
            color: #b2b2b2;
            background: #f5f5f5;
          }
          :deep(.ant-input-group-addon) {
            display: inline-block;
            margin-left: 0.1rem;
            .ant-input-search-button {
              width: 0.8rem;
              height: 0.36rem;
              background: #0558e1;
              border-radius: 0.04rem;
              font-size: 0.14rem;
            }
          }
          :deep(.ant-btn) {
            background: #0558e1;
            border-radius: 0.04rem;
          }
        }
        .buttonAdd {
          background: #0558e1;
          border-radius: 0.04rem;
          height: 0.36rem;
          border-color: #0558e1;
          margin-left: 0.1rem;
        }
      }
    }
    .infrastructrue-table {
      .ant-table-striped :deep(.table-striped) td {
        background-color: #fafafa;
      }
    }
    .map-contain {
      // width: 9.46rem;
      height: 4.1rem;
      margin-left: 0.16rem;
      position: relative;
    }
  }
  .roomBackground {
    background: #0058e1;
    color: #ffffff;
  }
  .nullBackground {
    background: #f3f5f9;
    color: #0087ff;
  }
  :deep(.ant-form-item-control-input-content) {
    margin-left: 0.15rem;
  }
  :deep(.ant-col) {
    .ant-form-item {
      margin-bottom: 0;
    }
  }
  .jinggaoD {
    display: flex;
    align-items: center;
  }
  .jinggaoNull {
    display: none;
  }
  .imgJinggao {
    width: 0.2rem;
    height: 0.2rem;
    background: url('~@/assets/home/jingao.png') no-repeat;
    background-size: 100%;
  }
  .introduction {
    :deep(.ant-form-item-control) {
      margin-left: -2.1rem;
    }
  }
  .roomBox {
    .leftMake {
      float: left;
      margin-left: -1rem;
      margin-top: -0.5rem;
      font-size: 0.2rem;
      cursor: pointer;
      .leftTop {
        width: 0.6rem;
        height: 1.75rem;
        border-top-left-radius: 0.08rem;
        border-bottom-left-radius: 0.08rem;
        padding: 0.13rem;
        text-align: center;
      }
      .leftBottom {
        width: 0.6rem;
        height: 1.75rem;
        border-top-left-radius: 0.08rem;
        border-bottom-left-radius: 0.08rem;
        padding: 0.2rem 0.13rem 0.1rem 0.1rem;
        text-align: center;
      }
    }
    .roomSearch {
      display: flex;
      align-items: center;
      .searchInput {
        display: flex;
        margin-right: 0.2rem;
        margin-left: 0.2rem;
        // .ant-input-search {
        //   max-width: 4rem;
        // }
        :deep(.ant-input) {
          width: 2rem;
          height: 0.36rem;
          font-size: 0.14rem;
          color: #b2b2b2;
          background: #f5f5f5;
        }
        :deep(.ant-input-group-addon) {
          display: inline-block;
          margin-left: 0.1rem;
          .ant-input-search-button {
            width: 0.8rem;
            height: 0.36rem;
            background: #0558e1;
            border-radius: 0.06rem;
            font-size: 0.14rem;
          }
        }
        :deep(.ant-btn) {
          border-radius: 0.06rem;
        }
      }
    }
    .roomTableList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.4rem 0 0.2rem 0;
      .roomTime {
        display: flex;
        align-items: center;
        :deep(.ant-space-vertical) {
          flex-direction: inherit;
          margin-left: 0.2rem;
        }
      }
    }
    .roomItem {
      width: 10.3rem;
      height: 2rem;
      border-top: 1px #d5d4d4 solid;
      display: flex;
      align-items: center;
      .leftImg {
        width: 2.4rem;
        height: 1.75rem;
        margin: 0 0.3rem 0 0.15rem;

        // background: url('~@/assets/home/yyzy_square.png') no-repeat;
        background-size: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightContent {
        height: 1.75rem;
        width: 5.8rem;
        .topContent {
          font-size: 0.2rem;
          color: #000;
          font-weight: 600;
        }
        .centerContent {
          display: flex;
          justify-content: space-between;
          font-size: 0.14rem;
          margin: 0.15rem 0 0.2rem 0;
        }
      }
    }
    :deep(.ant-pagination) {
      float: right;
    }
    :deep(.ant-pagination) {
      text-align: end;
    }
  }
</style>
<style lang="less">
  .wrj {
    .ant-modal-body {
      height: 700px !important;
    }
  }
  .modalClass {
    .ant-modal-body {
      height: 4rem !important;
      overflow-y: scroll !important;
    }
    .ant-modal-title {
      font-weight: 600;
    }
    .ant-modal-content {
      .ant-modal-header {
        border-bottom: 0 !important;
      }
    }
  }
  .appModal {
    .ant-modal-body {
      height: 4.8rem !important;
      overflow-y: scroll !important;
    }
    .ant-modal-title {
      font-weight: 600;
    }
    .ant-modal-content {
      .ant-modal-header {
        border-bottom: 0 !important;
      }
    }
  }
  .single-preview-modal {
    .ant-modal-header {
      background: url(~@/assets/home/video-background.png) no-repeat;
      background-size: cover;
    }
    .ant-modal-title {
      font-size: 0.16rem;
      font-weight: 500;
      color: #ffffff;
    }
    .anticon {
      color: #ffffff;
    }
  }
  .batch-preview-modal {
    .batch-video {
      width: 100%;
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: 50% 50%;
      justify-content: center;
      grid-row-gap: 10px;
      grid-column-gap: 10px;
    }
    .ant-pagination-item-link {
      background-color: #5580f7;
    }
    .ant-modal-header {
      background: url(~@/assets/home/video-background.png) no-repeat;
      background-size: cover;
    }
    .ant-modal-title {
      font-size: 0.16rem;
      font-weight: 500;
      color: #ffffff;
    }
    .anticon {
      color: #ffffff;
    }
  }
</style>