视频监测

src/api/home-video.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 视频监测 ---- 设备列表接口  左2
+export function getVideoDeviceListAPI(data) {
+    return request({
+        url: '/smart-site/videoDetection/getVideoDeviceList',
+        method: 'post',
+        data,
+    })
+}
+

src/views/home-video/components/left-two-model.vue

@@ -2,17 +2,27 @@
     <!-- 监控列表 -->
     <div style="height: 100%">
         <ChartsBox :boxTitle="`监控列表`">
+            <div class="ball-box">
+                <div
+                    class="ball-item"
+                    :class="index === activeIndex ? 'active' : ''"
+                    v-for="(item, index) in ballHeadCameraList"
+                    :key="index"
+                    @click="handleDevice(item, index)"
+                >
+                    {{ item.name }}
+                </div>
+            </div>
             <div class="container">
                 <div class="list-box">
                     <div v-for="(item, index) in deviceList" :key="index">
                         <span>------</span>
                         <span>
-                            {{ item.name }}
+                            {{ item.devName }}
                         </span>
                     </div>
-
-                    <div class="icon"></div>
                 </div>
+                <div class="icon"></div>
             </div>
         </ChartsBox>
     </div>
@@ -20,28 +30,79 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getVideoDeviceListAPI } from '@/api/home-video'
+
 export default {
     components: { ChartsBox },
     data() {
         return {
-            deviceList: [
-                { name: '' },
-                { name: '一号塔吊' },
-                { name: '二号塔吊' },
+            // 球机类型
+            ballHeadCameraList: [
+                { name: '球机', value: '0' },
+                { name: '枪机', value: '1' },
+                { name: '半球', value: '2' },
+                { name: '无人机', value: '3' },
+                { name: '智能球机', value: '4' },
+                { name: '固定球机', value: '5' },
             ],
+
+            deviceList: [],
+            activeIndex: 0,
         }
     },
+    created() {
+        this.getDeviceList()
+    },
+    methods: {
+        // 获取设备列表
+        async getDeviceList() {
+            try {
+                this.deviceList = []
+                const params = {
+                    ballCode: String(this.activeIndex),
+                }
+                const res = await getVideoDeviceListAPI(params)
+                this.deviceList = res.data
+                this.deviceList.unshift({ devName: '' })
+            } catch (error) {
+                console.log('🚀 ~ getDeviceList ~ error:', error)
+            }
+        },
+        // 点击设备
+        handleDevice(item, index) {
+            // console.log('🚀 ~ handleDevice ~ item:', item)
+            this.activeIndex = index
+            this.getDeviceList()
+        },
+    },
 }
 </script>
 
 <style lang="scss" scoped>
-.container {
-    height: 100%;
-    padding: 6px 14px 0 40px;
+.ball-box {
+    height: 55px;
     display: flex;
-    // justify-content: space-around;
+    justify-content: space-around;
     align-items: center;
     color: #fff;
+    .ball-item {
+        padding: 0 10px;
+        line-height: 1.8;
+        font-size: 18px;
+        border-radius: 6px;
+        background: #234d8d;
+        z-index: 9;
+        cursor: pointer;
+    }
+}
+.container {
+    height: calc(100% - 100px);
+    padding: 56px 14px 0 40px;
+    display: flex;
+    // justify-content: space-around;
+    /* align-items: center; */
+    color: #fff;
+    position: relative;
 
     .list-box {
         width: 100%;
@@ -51,6 +112,7 @@ export default {
         align-items: center;
         font-size: 16px;
         border-left: 2px solid #234d8d;
+        overflow: auto;
 
         div {
             width: 100%;
@@ -75,20 +137,19 @@ export default {
             visibility: hidden;
             height: 10px;
         }
-
-        .icon {
-            position: absolute;
-            top: -56px;
-            left: -28px;
-            width: 56px;
-            height: 56px;
-            border-radius: 50%;
-            background: url('@/assets/image/home-video/monitor.png') no-repeat;
-            background-size: 100% 100%;
-        }
-
-        .active {
-        }
+    }
+    .icon {
+        position: absolute;
+        top: 0;
+        left: 14px;
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: url('@/assets/image/home-video/monitor.png') no-repeat;
+        background-size: 100% 100%;
     }
 }
+.active {
+    color: #409eff;
+}
 </style>