GitBucket
Newer
<template>
<div id="ShiPingJianKong">
<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: 220px; 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"
: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 id="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="ShiPingJianKong">
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>
#ShiPingJianKong {
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);
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);
height: calc(100% - 5px);
overflow: auto;
.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% - 165px);
margin-top: 10px;
overflow: auto;
#TableHtml {
width: 565px;
height: calc(100% - 0px);
margin-top: 10px;
.TableHeader {
width: 100%;
height: 44px;
line-height: 42px;
color: #00a4ff;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #00a4ff;
background: #082138;
}
.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;
}
}
}
#paginationBox {
text-align: center;
width: calc(100% - 10px);
height: 32px;
position: relative;
.el-pagination {
justify-content: center;
}
}
}
}
#VideoBox {
width: calc(100% - 415px);
height: 100%;
float: left;
}
}
</style>