diff --git a/front/public/index.html b/front/public/index.html
index afc695e8..2f1af54c 100644
--- 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>
diff --git a/front/src/supermap/advance-init.js b/front/src/supermap/advance-init.js
index 9671313f..0be17a7a 100644
--- 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)
       }
     })
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index ecc029c5..e68ecad9 100644
--- 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) => {
diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue
index 300cf7df..ecb113e3 100644
--- 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();
-      //     this.cameraAllData = res.data.data
-      //     this.addResourceTomap('全部', res.data.data)
-      //     // let t2 = new Date().getTime();
-      //     // console.log("时间#############" + (t2 - t1));
-      //   })
-      // },
+      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('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 == '全部') {
