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>
        <button @click="nullClick" v-if="item.title == '视频细分'">清空</button>
        <span
          v-for="itemContent in item.content"
          :key="itemContent"
          @click="tabClick(index, itemContent, itemContent)"
          :class="
            clickList[index].content.indexOf(itemContent.labelName) != -1 ||
            clickList[index].content.indexOf(itemContent) != -1
              ? 'down'
              : ''
          "
        >
          {{ itemContent.labelName || itemContent }}
        </span>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map-contain" v-if="showMap">
      <video-surveillance></video-surveillance>
    </div>
    <!-- 功能行 -->
    <div class="infrastructrue-content">
      <!-- 表格数据统计 -->
      <div class="contentNum">
        <p>
          备选
          <span>{{ pagination.total }}</span>
          个
        </p>
        <i class="boundary"></i>
        <p>
          已选
          <span>{{ allClick.length }}</span>
          个
        </p>
      </div>
      <!-- 右侧 -->
      <div class="contentRight">
        <!-- 搜索@search="onSearch" -->
        <div class="searchInput">
          <a-input-search
            v-model:value="mapSearchParam.cameraName"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @change="getCamera"
          />
          <a-button
            type="primary"
            style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
            @click="clean"
          >
            重置
          </a-button>
        </div>
        <i class="boundary"></i>
        <!-- 添加至购物车 -->
        <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
          添加至购物车
        </a-button>
        <!-- 一键申请 -->
        <a-button type="primary" @click="apply" class="buttonAdd">
          一键申请
        </a-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="infrastructrue-table">
      <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,
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a @click="openVideo(record.channelCode)">预览</a>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:visible="visible"
      title="视频预览"
      :width="750"
      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>
  </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 { ref, reactive, onMounted } from 'vue'
  import {
    getCameraByParentId,
    getStreamByChannelCode,
    getCameraAllLabel,
  } from '@/api/videoSurveillance'
  import { sgcInsert } from '@/api/home'
  import { message } from 'ant-design-vue'
  import mybus from '@/myplugins/mybus'
  const options = reactive({
    width: '700px', //播放器宽度
    height: '400px', //播放器高度
    color: '#409eff', //主题色
    title: '', //视频名称
    src: '', //视频源
    type: 'm3u8', // 视频源类型
    muted: false, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      'audioTrack',
      'quality',
      'speedRate',
      'volume',
      'setting',
      'pip',
      'pageFullScreen',
      'fullScreen',
    ], //显示所有按钮,
  })
  let visible = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10, //每页中显示10条数据
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
  })
  const mapSearchParam = ref({
    // 地图搜索初始化数据
    parentId: '',
    cameraName: '',
    checkStatus: '1',
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    gpsX: '',
    gpsY: '',
    radius: '',
    labelCodes: [],
  })
  const showMap = ref(true)
  onMounted(() => {
    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 tabList = ref([
    {
      title: '设施类型',
      content: ['视频资源', '云资源', '感知资源'],
    },
    {
      title: '视频细分',
      content: [],
    },
  ])
  const openVideo = (id) => {
    console.log('打开视频', id)
    const param = {
      channelCode: id,
    }
    getStreamByChannelCode(param).then((res) => {
      console.log(res)
      visible.value = true
      options.value.src = res.data.data
    })
  }
  // const dataTypeList = () => {
  //   if (tabList.value[0].content.indexOf('视频资源') != -1) {
  //     tabList.value[1].content = ['123344', '213124']
  //   }else if(tabList.value[0].content.indexOf('云资源') != -1){
  //     tabList.value[1].content = ['5555', '666']

  //   }
  // }
  // dataTypeList()
  //初始化数据
  const init = () => {
    tabList.value.map((item) => {
      let params = {
        title: item.title,
        content: [],
      }
      clickList.value.push(params)
    })
    mybus.off('tranferToList')
    mybus.on('tranferToList', (data) => {
      console.log('获取到的列表数据')
    })
  }
  let clickList = ref([]) //存储点击的tab
  init()
  //表格的高度
  let tableHeight = ref('600')
  //tab切换点击事件
  const tabClick = (indexFather, name) => {
    debugger
    if (clickList.value[indexFather].content.indexOf(name) != -1) {
      if (name == '视频资源') {
        tableHeight.value = 330
        showMap.value = true
      } else if (name == '云资源') {
        tableHeight.value = 600
        showMap.value = false
      } else if (name == '感知资源') {
        tableHeight.value = 330
        showMap.value = true
      }
      clickList.value[indexFather].content.splice(
        clickList.value[indexFather].content.indexOf(name),
        1
      )
    } else {
      if (name == '视频资源') {
        tableHeight.value = 330
        showMap.value = true
        tabList.value[1].content = []
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        getCameraAllLabel().then((res) => {
          res.data.data.forEach((val) => {
            tabList.value[1].content.push({
              labelCode: val.labelCode,
              labelName: val.labelName,
            })
          })
        })
      } else if (name == '云资源') {
        tableHeight.value = 600
        showMap.value = false
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = [
          '云主机',
          '算力主机',
          '对象存储',
          '堡垒机',
          '防火墙',
          '网闸',
          '负载均衡',
          '公网IP',
        ]
      } else if (name == '感知资源') {
        tableHeight.value = 330
        showMap.value = true
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = ['333333', '213124']
      } 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 + ''
    getCamera()
  }
  // 清空
  const nullClick = () => {
    clickList.value[1].content = []
    mapSearchParam.value.labelCodes = ''
    getCamera()
    console.log('hhhhhhhh')
  }
  // 重置
  const clean = () => {
    mapSearchParam.value.cameraName = ''
    getCamera()
  }
  // 一键申请
  const apply = () => {
    console.log('一键申请')
  }
  // 添加至购物车
  const addShopCar = () => {
    console.log('添加至购物车')
  }
  const getCamera = () => {
    console.log('初始化调用')
    getCameraByParentId(mapSearchParam.value).then((res) => {
      console.log('RRRRRRRRRR', res.data.data)
      dataSource.value = res.data.data
      pagination.value.total = res.data.count
    })
  }
  //加入申购车
  const addShoppingCart = () => {
    sgcInsert({
      delFlag: '0',
      resourceId: '8888888880000000001',
      note1: selectedList.value,
      // userId: userId.value,
    }).then((res) => {
      console.log(res)
      message.success('添加申购车成功！')
      mybus.emit('getSgcNum')
    })
  }
  // 表格
  const dataSource = ref([])
  const columns = ref([
    {
      title: '名称',
      dataIndex: 'channelName',
      key: 'channelName',
    },
    {
      title: '归属',
      dataIndex: 'nodeName',
      width: '60%',
      key: 'nodeName',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '10%',
      key: 'channelId',
    },
  ])
  const allClick = ref([])
  const onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('hahhahah', selectedRowKeys, selectedRows)
    selectedList.value = selectedRows
    // allClick.value = selectedRowKeys
  }
  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.1rem 0;
      }
      .down {
        background: #0087ff;
        color: #ffffff;
      }
      .tabBox {
        margin-bottom: 0.16rem;
      }
      .tabBox:last-of-type {
        margin-bottom: 0;
      }
    }
    .infrastructrue-content {
      display: flex;
      justify-content: space-between;
      padding: 0.14rem 0.2rem 0.1rem;
      background: #ffffff;
      .contentNum {
        position: relative;
        display: flex;
        p {
          color: #666666;
          padding: 0;
          margin: 0;
          span {
            color: #0087ff;
            font-size: 0.2rem;
            font-weight: 500;
          }
        }
        p:first-of-type {
          padding-right: 0.16rem;
          margin-right: 0.16rem;
        }
        .boundary {
          position: absolute;
          left: 0.9rem;
          top: 0.07rem;
          display: block;
          width: 0.02rem;
          border-radius: 0.01rem;
          height: 0.2rem;
          background: rgba(150, 144, 144, 0.3);
        }
      }
      .contentRight {
        position: relative;
        display: flex;
        justify-content: space-between;
        .boundary {
          position: absolute;
          left: 3.74rem;
          top: 0.07rem;
          display: block;
          width: 0.02rem;
          border-radius: 0.01rem;
          height: 0.2rem;
          background: rgba(150, 144, 144, 0.3);
        }
        .searchInput {
          display: flex;
          margin-right: 0.2rem;
          .ant-input-search {
            max-width: 4rem;
          }
          :deep(.ant-input) {
            width: 2rem;
            height: 0.36rem;
            font-size: 0.14rem;
            color: #b2b2b2;
            background: #f5f5f5;
          }
          :deep(.ant-input-group-addon) {
            display: inline-block;
            margin-left: 0.1rem;
            .ant-input-search-button {
              width: 0.8rem;
              height: 0.36rem;
              background: #0558e1;
              border-radius: 0.04rem;
              font-size: 0.14rem;
            }
          }
          :deep(.ant-btn) {
            background: #0558e1;
            border-radius: 0.04rem;
          }
        }
        .buttonAdd {
          background: #0558e1;
          border-radius: 0.04rem;
          height: 0.36rem;
          border-color: #0558e1;
          margin-left: 0.1rem;
        }
      }
    }
    .infrastructrue-table {
      .ant-table-striped :deep(.table-striped) td {
        background-color: #fafafa;
      }
    }
    .map-contain {
      // width: 9.46rem;
      height: 4.1rem;
      margin-left: 0.16rem;
      position: relative;
    }
  }
</style>