视频资源

2022-06-29 18:36:50 +08:00 · 2022-06-29 18:36:50 +08:00 · ffaabe340a
parent d4a8ebf34f
commit ffaabe340a
4 changed files with 127 additions and 42 deletions
--- a/front/public/index.html
+++ b/front/public/index.html
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-03-29 16:45:25
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-28 16:52:46
+ * @LastEditTime: 2022-06-29 16:00:06
 * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
--- a/front/src/supermap/advance-init.js
+++ b/front/src/supermap/advance-init.js
@ -1726,6 +1726,9 @@ export function MapFun(mapObj) {
            }
          })
        }
+        marker.on('click', e=>{
+          console.log('点位数据', e)
+        })
        layers.addLayer(marker)
      }
    })
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@ -11,10 +11,13 @@
          :key="itemContent"
          @click="tabClick(index, itemContent, itemContent)"
          :class="
-            clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
+            clickList[index].content.indexOf(itemContent.labelName) != -1 ||
+            clickList[index].content.indexOf(itemContent) != -1
+              ? 'down'
+              : ''
          "
        >
-          {{ itemContent }}
+          {{ itemContent.labelName || itemContent }}
        </span>
      </div>
    </div>
@ -43,11 +46,11 @@
        <!-- 搜索@search="onSearch" -->
        <div class="searchInput">
          <a-input-search
-            v-model:value="name"
+            v-model:value="mapSearchParam.cameraName"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
-            @change="onSearch"
+            @change="getCamera"
          />
          <a-button
            type="primary"
@ -85,20 +88,70 @@
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
-      ></a-table>
+      >
+        <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, onMounted } from 'vue'
-  import { getCameraByParentId } from '@/api/videoSurveillance'
+  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,
@ -109,12 +162,14 @@
  const mapSearchParam = ref({
    // 地图搜索初始化数据
    parentId: '',
+    cameraName: '',
    checkStatus: '1',
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    gpsX: '',
    gpsY: '',
    radius: '',
+    labelCodes: [],
  })
  const showMap = ref(true)
  onMounted(() => {
@ -144,6 +199,17 @@
      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']
@ -173,6 +239,7 @@
  let tableHeight = ref('600')
  //tab切换点击事件
  const tabClick = (indexFather, name) => {
+    debugger
    if (clickList.value[indexFather].content.indexOf(name) != -1) {
      if (name == '视频资源') {
        tableHeight.value = 330
@ -195,14 +262,12 @@
        tabList.value[1].content = []
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
-        const params = {
-          page: 1,
-          limit: 50,
-          dictTypeId: '1541336217898848257',
-        }
-        getCategoryTreePage(params).then((res) => {
-          res.data.data.list.forEach((val) => {
-            tabList.value[1].content.push(val.dictLabel)
+        getCameraAllLabel().then((res) => {
+          res.data.data.forEach((val) => {
+            tabList.value[1].content.push({
+              labelCode: val.labelCode,
+              labelName: val.labelName,
+            })
          })
        })
      } else if (name == '云资源') {
@ -230,22 +295,26 @@
        clickList.value[indexFather].content.push(name)
      }
    }
-    console.log('clickList.value', clickList.value)
+    // 改变查询摄像头接口的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 name = ref('')
-  // 搜索框
-  const onSearch = (name) => {
-    name.value = name
-    console.log(name.value)
-  }
  // 重置
  const clean = () => {
-    name.value = ''
+    mapSearchParam.value.cameraName = ''
+    getCamera()
  }
  // 一键申请
  const apply = () => {
@ -287,8 +356,15 @@
    {
      title: '归属',
      dataIndex: 'nodeName',
+      width: '60%',
      key: 'nodeName',
    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      width: '10%',
+      key: 'channelId',
+    },
  ])
  const allClick = ref([])
  const onSelectChange = (selectedRowKeys, selectedRows) => {
--- a/front/src/views/home/videoSurveillance/index.vue
+++ b/front/src/views/home/videoSurveillance/index.vue
@ -139,6 +139,9 @@
      this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
      // 初始化地址检索服务
      this.initAddressMatchService()
+      this.getCameraAllLabel()
+      // 初始化展示所有摄像头
+      // this.getCameraAllPage()
      // this.getMapPoint()
      // 根据parentId查询摄像头列表
      mybus.off('getCameraByParentId')
@ -169,7 +172,7 @@
        const type = e.layerType;
        const circleLayer = e.layer;
        if (type === 'circle') {
-          const radius = (e.layer._mRadius).toFixed(2)
+          const radius = (e.layer._mRadius)
          if (radius > 5000) {
            message.info('最大支持5km范围的圈选')
          } else {
@ -177,8 +180,8 @@
            this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer);
            this.hiMap.mapObj.layerGroup.set('circlePloygonLayer', circlePloygonLayer);
            console.log('查询图层为何发生了改变', e.layer);
-            this.mapSearchParam.gpsX = e.layer._latlng.lng.toFixed(2)
-            this.mapSearchParam.gpsY = e.layer._latlng.lat.toFixed(2)
+            this.mapSearchParam.gpsX = e.layer._latlng.lng
+            this.mapSearchParam.gpsY = e.layer._latlng.lat
            this.mapSearchParam.radius = radius
            const params = {
              gpsX: this.mapSearchParam.gpsX,
@ -251,20 +254,23 @@
          this.addressMatchService.code(geoCodeParam, match);
        }
      },
-      // getCameraAllPage(page) {
-      //   let params = {
-      //     name: '',
-      //     page: page,
-      //     pageSize: 20000,
-      //   }
-      //   selectByChannelName(params).then((res) => {
-      //     // let t1 = new Date().getTime();
+      getCameraAllPage(page) {
+        let params = {
+          name: '',
+          page: page,
+          pageSize: 20000,
+        }
+        getCameraAll(params).then((res) => {
+          // let t1 = new Date().getTime();
          // this.cameraAllData = res.data.data
-      //     this.addResourceTomap('全部', res.data.data)
-      //     // let t2 = new Date().getTime();
-      //     // console.log("时间#############" + (t2 - t1));
-      //   })
-      // },
+          this.addResourceTomap('videoMap', res.data)
+          // let t2 = new Date().getTime();
+          // console.log("时间#############" + (t2 - t1));
+        })
+      },
+      getCameraAllLabel() {
+
+      },
      tabChange(item) {
        if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
          if (item.labelName == '全部') {