<template> <div id="peripheralVideo"> <div id="LeftBox"> <div class="LeftType"> <div class="TypeBtn" :class="{ TypeBtnActive: AllData.ActiveKey == item.id }" v-for="item in AllData.leftTypeData" :key="item.id" @click="TypeBtnClick(item)" > {{ item.name }} </div> </div> <div class="RightConcent"> <div class="SearchBox1"> <!-- <div class="SelSearch1"> <span class="SearchLabel">类型:</span> <el-select v-model="AllData.SelTypeValue" clearable placeholder="请选择" style="width: 80px" @change="getVideoListDataToPage(true)" > <el-option v-for="dict in camera_access_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </div> <div class="SelSearch2"> <span class="SearchLabel">区域:</span> <el-select v-model="AllData.SelTypeValue2" clearable placeholder="请选择" style="width: 160px" @change="getVideoListDataToPage(true)" > <el-option v-for="item in AllData.SelTypeList2" :key="item.regionIndexCode" :label="item.name" :value="item.regionIndexCode" > </el-option> </el-select> </div> --> <div class="SelSearch3"> <span class="SearchLabel">名称:</span> <el-input placeholder="请输入名称" v-model="AllData.inputTypeValue" clearable style="width: 150px; float: left" > </el-input> <el-button type="primary" style="margin-left: 15px; float: left; background-color: #00a4ff" @click="getVideoListDataToPage(true)" >搜索</el-button > </div> </div> <div class="TongJiBox"> <div class="TongJiList" v-for="item in AllData.TongJiListData" :key="item" :class="{ StatusActive: AllData.statusValue === item.cameraStatus }" @click="statusValueChange(item.cameraStatus)" > {{ item.cameraStatusName }} <span :class=" item.cameraStatus === 1 ? 'TongJiList1' : item.cameraStatus === 0 ? 'TongJiList2' : 'TongJiList3' " > {{ item.number }}</span > </div> </div> <div class="TableBox"> <div id="TableHtml"> <div class="TableHeader"> <span class="TableSpan1">视频名称</span> <span class="TableSpan2">视频类型</span> <span class="TableSpan3">接入方式</span> <span class="TableSpan4">收藏</span> <span class="TableSpan5">负责人</span> <span class="TableSpan6">权属单位</span> </div> <div class="TableBody" v-loading="AllData.loading2" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" > <div class="TableBodyList" v-for="(item, index) in AllData.bodyData" :key="index" > <span class="TableSpan1" @click="handleNodeClick(item)"> <span v-show="item.cameraStatus == 1" style="color: #6cd877">{{ item.name }}</span> <span v-show="item.cameraStatus == 0" style="color: #ff4254">{{ item.name }}</span> </span> <span class="TableSpan2" @click="handleNodeClick(item)"> <img v-show="item.cameraType == 1" src="@/assets/images/Sponge_screen/qiangji.png" alt="" style="width: 18px; height: 16px; margin-top: 14px" /> <img v-show="item.cameraType == 2" src="@/assets/images/Sponge_screen/qiuji.png" alt="" style="width: 18px; height: 16px; margin-top: 14px" /> </span> <span class="TableSpan3" style="color: #c7dfee" @click="handleNodeClick(item)" > <dict-tag :options="camera_access_type" :value="item.access_type" /></span> <span class="TableSpan4"> <el-button type="text" @click.stop="() => collectFun(item)"> <el-icon v-if="item.collectFlag == '1'" style="color: #00a4ff; font-size: 20px" > <StarFilled /> </el-icon> <el-icon v-else style="color: #fff"> <Star /> </el-icon> </el-button> </span> <span class="TableSpan5">{{ item.cameraUserName }}</span> <span class="TableSpan6">{{ item.ownershipUnit }}</span> </div> </div> </div> </div> <div class="paginationBox"> <el-pagination layout="prev, pager, next" :pager-count="5" :total="AllData.TotalNum" @current-change="paginChange" v-model:current-page="AllData.current" /> </div> </div> </div> <div id="VideoBox"> <HKVideo v-if="AllData.DataOK" ref="video" :appkey="videoConfig.appKey" :secret="videoConfig.appSecret" :ip="videoConfig.ip" :port="videoConfig.port" :cameraIndexCode="AllData.cameraIndexCode" :layout="AllData.layout" :defaultList="AllData.defaultList" ></HKVideo> </div> </div> </template> <script setup name="peripheralVideo111"> import { ref, reactive, toRefs, onMounted } from "vue"; import { cameraGroupList, listCameraStatus, pageCameraInfoByCameraStatus, collect_uncollect, } from "@/api/videoApi/videoApi"; import HKVideo from "@/components/videoHK/index.vue"; import { HKconfig } from "@/utils/HKConfig"; import useUserStore from "@/store/modules/user"; const { proxy } = getCurrentInstance(); const AllData = reactive({ leftTypeData: [], //左侧分类数据 ActiveKey: "", //分类数据选中的key SelTypeValue: "", //顶部类型选择数据 SelTypeValue2: "", //顶部区域选择数据 SelTypeList2: [], //顶部区域的下拉数据集合 inputTypeValue: "", //顶部区域名称输入框 TongJiListData: [], //在线离线状态统计数据 statusValue: "", //在线离线状态选中的key, loading2: false, //加载动画的状态 bodyData: [], //摄像头列表数据 current: 1, pageSize: 10, TotalNum: 100, DataOK: true, cameraIndexCode: "0030845749854a8186d43306256112e7", layout: "1x1", defaultList: [ // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 }, // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 }, ], }); const videoConfig = reactive({ appKey: HKconfig.appkey, appSecret: HKconfig.secret, ip: HKconfig.ip, port: HKconfig.port, }); const { camera_access_type } = proxy.useDict("camera_access_type"); //获取接口返回字典数据 console.log(camera_access_type, `!!~~!!`); // 初始化左侧分组数据 const initTypeList = () => { cameraGroupList().then((res) => { if (res.code == 200) { AllData.leftTypeData = res.data; } console.log(AllData.leftTypeData); getCameraStatusData(); }); }; // 左侧分组点击事件 const TypeBtnClick = (item) => { AllData.ActiveKey = item.id; AllData.SelTypeValue2 = ""; AllData.SelTypeValue = ""; AllData.inputTypeValue = ""; getCameraStatusData(); AllData.bodyData = []; AllData.TongJiListData = []; }; // 选择视频类型或者区域 const getVideoListDataToPage = (bol) => { bol ? (AllData.current = 1) : ""; getCamearListData(); }; // 根据类型获取子分类 const getVideoGroup = () => { AllData.SelTypeList2 = []; AllData.SelTypeList2.unshift({ regionIndexCode: "", name: "全部", }); AllData.SelTypeValue2 = AllData.SelTypeList2[0].regionIndexCode; // queryRegionChildrenList({ // treeCode: this.ActiveKey, // }).then((res) => { // if (res.data.code == 200) { // this.SelTypeList2 = res.data.data; // } // this.SelTypeList2.unshift({ // regionIndexCode: "", // name: "全部", // }); // this.SelTypeValue2 = this.SelTypeList2[0].regionIndexCode; // }); }; // 获取当前分组下在线以及离线等分类统计数据 const getCameraStatusData = () => { listCameraStatus({ groupId: AllData.ActiveKey, }).then((res) => { if (res.code == 200) { AllData.TongJiListData = res.data; AllData.statusValue = AllData.TongJiListData[0].cameraStatus; getCamearListData(); } }); }; // 在线离线分组的点击切换事件 const statusValueChange = (item) => { AllData.statusValue = item; getCamearListData(); }; // 获取摄像头列表数据 const getCamearListData = () => { AllData.loading2 = true; pageCameraInfoByCameraStatus({ groupId: AllData.ActiveKey, cameraStatus: AllData.statusValue, name: AllData.inputTypeValue, pageNum: AllData.current, pageSize: AllData.pageSize, accessType: AllData.SelTypeValue, cameraUserId: useUserStore().userInfo.userId, }).then((res) => { AllData.loading2 = false; if (res.code == 200) { AllData.bodyData = res.data; AllData.TotalNum = res.total; } }); }; // 分页切换 const paginChange = () => { console.log(AllData.current, "~~"); getVideoListDataToPage(false); }; // 点击站点 const handleNodeClick = (item) => { AllData.cameraIndexCode = ""; AllData.cameraIndexCode = item.indexCode; }; // 收藏/取消收藏 const collectFun = (item) => { console.log(item); const userInfo = useUserStore().userInfo; console.log(userInfo); collect_uncollect({ cameraId: item.id, userId: userInfo.userId, }).then((res) => { if (res.code == 200 && res.data) { // 刷新 getVideoListDataToPage(false); } }); }; onMounted(() => { initTypeList(); }); </script> <style lang="scss" scoped> #peripheralVideo { width: 100%; height: 100%; #LeftBox { width: 415px; height: 100%; float: left; overflow: auto; display: flex; flex-direction: row; flex-wrap: nowrap; .LeftType { width: 50px; // height: calc(100% - 5px); height: 100%; overflow: auto; background: #002b46; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; .TypeBtn { color: #77abcb; font-size: 18px; box-sizing: border-box; padding: 10px 10px; width: 42px; cursor: pointer; border-bottom: 1px solid #063959; display: inline-block; &:hover { background: #046da694; } } .TypeBtnActive { border-left: 3px solid #00a4ff; color: #00a4ff; font-weight: bold; } } .RightConcent { // width: calc(100% - 50px); width: 100%; // height: calc(100% - 20px); height: 100%; overflow: auto; padding-left: 5px; .SearchBox1 { width: 100%; height: 70px; .SelSearch1 { width: calc(50% - 42px); height: 30px; float: left; } .SelSearch2 { width: calc(50% + 42px); height: 30px; float: left; } .SelSearch3 { width: 100%; height: 30px; float: left; margin-top: 10px; } .SearchLabel { width: 50px; text-align: center; height: 30px; line-height: 30px; color: #c7dfee; float: left; font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; } } .TongJiBox { width: 100%; height: 30px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; margin-top: 20px; .TongJiList { flex: 1; display: inline-block; height: 30px; line-height: 30px; text-align: center; cursor: pointer; font-size: 16px; background: #002b46; border-radius: 2px; font-size: 14px; font-family: Source Han Sans CN; font-weight: 500; color: #ffffff; margin: 0 10px; } .TongJiList1 { color: #6cd877; } .TongJiList2 { color: #ff4254; } .TongJiList3 { color: #00a4ff; } .StatusActive { border: 1px solid #00a4ff; } } .TableBox { width: 100%; height: calc(100% - 185px); margin-top: 10px; overflow: auto; #TableHtml { width: 565px; height: calc(100% - 0px); margin-top: 10px; .TableHeader { width: 100%; height: 44px; line-height: 42px; font-weight: bold; font-size: 14px; color: #FFFFFF; background: #153990; border-radius: 6px; } .TableBody { width: 100%; height: calc(100% - 45px); // overflow: auto; color: white; .TableBodyList { width: 100%; height: 44px; cursor: pointer; border-bottom: 1px solid #002b46; box-sizing: border-box; background: #051b30; &:hover { background-color: #0490db63; } } } .TableSpan1 { float: left; width: 180px; height: 44px; text-align: center; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .TableSpan2 { float: left; width: 70px; height: 44px; line-height: 42px; text-align: center; box-sizing: border-box; } .TableSpan3 { float: left; width: 70px; height: 44px; line-height: 42px; text-align: center; box-sizing: border-box; } .TableSpan4 { float: left; width: 50px; height: 44px; line-height: 42px; text-align: center; box-sizing: border-box; } .TableSpan5 { float: left; width: 60px; height: 44px; line-height: 42px; text-align: center; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .TableSpan6 { float: left; width: 120px; height: 44px; text-align: center; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } } } } } #VideoBox { width: calc(100% - 415px); height: 100%; float: left; } } </style>