七参数大屏-塔吊监测/升降机监测/视频管理页面接口对接
This commit is contained in:
jxj_yjl
parent
728eca0ad9
commit
67f6aea684
48
src/api/modules/elevator.ts
Normal file
48
src/api/modules/elevator.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import http from "@/api";
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
|
||||
// 今日累积运行次数
|
||||
export const getLifterWorkCycleApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/lifterWorkCycle/queryStatisticsElevatorOperationsNum`, params);
|
||||
};
|
||||
|
||||
|
||||
// 今日违章次数
|
||||
export const getLifterViolationApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/lifterViolation/queryStatisticsViolationNum`, params);
|
||||
};
|
||||
|
||||
|
||||
// 设备列表
|
||||
export const getLifterListApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/lifter/list`, params);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 电梯报警分析
|
||||
export const getAlarmTypeApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/lifterAlarm/queryAlarmsDistinguishedNumberByAlarmType`, params);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 右中下数据
|
||||
export const getNewestLifterApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/lifterCurrentData/getNewestLifterCurrentData`, params);
|
||||
};
|
||||
|
||||
// 运行状态
|
||||
export const getQueryTodayOperatingApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/lifter/queryTodayOperatingStatusStatistics`, params);
|
||||
};
|
||||
|
||||
|
||||
// 司机信息
|
||||
export const getRelatedInfoApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/lifter/getRelatedInfo`, params);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
@ -14,3 +14,24 @@ export const getDistinguishedNumApi = (params: {}) => {
|
||||
export const getQueryByIdApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/tower/queryById`, params);
|
||||
};
|
||||
|
||||
// 中间 塔吊信息-实时数据
|
||||
export const getNewestTowerApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/towerCurrentData/getNewestTowerCurrentData`, params);
|
||||
};
|
||||
|
||||
// 右边-运行状态
|
||||
export const getTowerCurrentCountApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/tower/selectTowerCurrentCount`, params);
|
||||
};
|
||||
|
||||
// 右边-司机信息
|
||||
export const getRelatedInfoApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/tower/getRelatedInfo`, params);
|
||||
};
|
||||
|
||||
|
||||
// 右下-实时数据
|
||||
export const getNewestDataApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/towerCurrentData/getNewestTowerCurrentData`, params);
|
||||
};
|
||||
@ -20,14 +20,14 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
title: "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: () => import("@/views/login/index.vue"),
|
||||
meta: {
|
||||
title: "登录"
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: "/login",
|
||||
// name: "login",
|
||||
// component: () => import("@/views/login/index.vue"),
|
||||
// meta: {
|
||||
// title: "登录"
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: "/large",
|
||||
name: "大屏",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:size="size"
|
||||
@change="timeValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="textInfo">
|
||||
@ -16,35 +16,15 @@
|
||||
>本周期内出现倾斜、风速、上限位、下限位、人数、载重、超速报警，请重点关注施工电梯过程中的维保并加强塔司、班组人员...</span
|
||||
>
|
||||
</div>
|
||||
<p style="color: #fff; font-size: 14px; margin-left: 5%">报警总数:24</p>
|
||||
<p style="color: #fff; font-size: 14px; margin-left: 5%">报警总数:{{ alarmTotal || 0 }}</p>
|
||||
<div class="carBox">
|
||||
<span class="carNum">
|
||||
<!-- <span class="carNum">
|
||||
<div class="num">5</div>
|
||||
<div class="text">倾斜</div>
|
||||
</span>
|
||||
<span class="carNum">
|
||||
<div class="num2">1</div>
|
||||
<div class="text2">风速</div>
|
||||
</span>
|
||||
<span class="carNum">
|
||||
<div class="num">2</div>
|
||||
<div class="text">上限位</div>
|
||||
</span>
|
||||
<span class="carNum">
|
||||
<div class="num2">4</div>
|
||||
<div class="text2">下限位</div>
|
||||
</span>
|
||||
<span class="carNum">
|
||||
<div class="num">3</div>
|
||||
<div class="text">人数</div>
|
||||
</span>
|
||||
<span class="carNum">
|
||||
<div class="num2">4</div>
|
||||
<div class="text2">载重</div>
|
||||
</span>
|
||||
<span class="carNum">
|
||||
<div class="num">5</div>
|
||||
<div class="text">超速</div>
|
||||
</span> -->
|
||||
<span class="carNum" v-for="(item, index) in listData" :key="index">
|
||||
<div class="num2">{{ item.num }}</div>
|
||||
<div class="text2">{{ item.typeName }}</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,10 +32,29 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
const size = (ref < "default") | "large" | ("small" > "default");
|
||||
import { getAlarmTypeApi } from "@/api/modules/elevator";
|
||||
import { GlobalStore } from "@/stores";
|
||||
|
||||
const store = GlobalStore();
|
||||
const value1 = ref("");
|
||||
let listData = ref([] as any);
|
||||
let alarmTotal = ref("" as any);
|
||||
|
||||
//获取报警分析数据
|
||||
const getAlarmTypeList = async () => {
|
||||
const res = await getAlarmTypeApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
alarmTotal.value = res.result.alarmNum;
|
||||
listData.value = res.result.typeNumList.slice(0, 7);
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getAlarmTypeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -86,6 +85,8 @@ const value1 = ref("");
|
||||
height: 40%;
|
||||
margin: -1% 0% 2% 5%;
|
||||
display: flex;
|
||||
// overflow: scroll;
|
||||
// white-space: nowrap;
|
||||
.carNum {
|
||||
width: 13%;
|
||||
height: 90%;
|
||||
|
||||
@ -5,19 +5,19 @@
|
||||
<div class="menu">
|
||||
<div class="menStyle">
|
||||
<span class="text1">今日累积运行次数</span>
|
||||
<span class="num1 num" style="color: #65d7f9">32</span>
|
||||
<span class="num1 num" style="color: #65d7f9">{{ workCycleList.todayRunNum || 0 }}</span>
|
||||
</div>
|
||||
<div class="menStyle">
|
||||
<span class="text">相比昨日同一时段</span>
|
||||
<span class="num2 num">
|
||||
<span style="color: #82fbea; margin-right: 15%">15</span>
|
||||
<span style="color: #82fbea; margin-right: 15%">{{ workCycleList.todayRunNumCompareYesterday || 0 }}</span>
|
||||
<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/bottom.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="menStyle">
|
||||
<span class="text">相比过去30日平均值</span>
|
||||
<span class="num3 num">
|
||||
<span style="color: #ec6266; margin-right: 15%">1.3</span>
|
||||
<span style="color: #ec6266; margin-right: 15%">{{ workCycleList.todayRunNumCompareLast30Day || 0 }}</span>
|
||||
<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
@ -25,49 +25,59 @@
|
||||
<div class="menu">
|
||||
<div class="menStyle">
|
||||
<span class="text1">今日违章总数</span>
|
||||
<span class="num1 numMax" style="color: #ec6266">3</span>
|
||||
<span class="num1 numMax" style="color: #ec6266">{{ ViolationList.todayViolationNum || 0 }}</span>
|
||||
</div>
|
||||
<div class="menStyle">
|
||||
<span class="text">相比昨日同一时段</span>
|
||||
<span class="num2 numMax">
|
||||
<span style="color: #ec6266; margin-right: 15%">12</span>
|
||||
<span style="color: #ec6266; margin-right: 15%">{{ ViolationList.todayViolationNumCompareYesterday || 0 }}</span>
|
||||
<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="menStyle">
|
||||
<span class="text">相比过去30日平均值</span>
|
||||
<span class="num3 numMax">
|
||||
<span style="color: #ec6266; margin-right: 15%">7.9</span>
|
||||
<span style="color: #ec6266; margin-right: 15%">{{ ViolationList.todayViolationNumCompareLast30Day }}</span>
|
||||
<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 4%" class="bottomData">
|
||||
<div class="text1" style="margin-left: 10%; margin-top: 10%">
|
||||
设备数据<span class="num1 num" style="color: #65d7f9; left: 7%">5</span>
|
||||
设备数据<span class="num1 num" style="color: #65d7f9; left: 7%">{{getNumberOne}}</span>
|
||||
</div>
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%">1#电梯</div>
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%">2#塔吊</div>
|
||||
<el-scrollbar style="height: 50%">
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%" v-for="(item, index) in totalNumber" :key="index">
|
||||
{{ item.devName }}
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div style="position: absolute; left: 6.8%; top: 32.5%">
|
||||
<img style="width: 46%" src="@/assets/images/elevatorMonitoring/oneImg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 4%" class="bottomData">
|
||||
<div class="text1" style="margin-left: 10%; margin-top: 10%">
|
||||
当前在线<span class="num1 num" style="color: #82fbea; left: 15.5%">3</span>
|
||||
当前在线<span class="num1 num" style="color: #82fbea; left: 15.5%">{{getNumberTwo}}</span>
|
||||
</div>
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%">3#塔吊</div>
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%">4#塔吊</div>
|
||||
<el-scrollbar style="height: 50%">
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%" v-for="(item, index) in lineEquipment" :key="index">
|
||||
{{ item.devName }}
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
<div style="position: absolute; left: 14.8%; top: 32.5%">
|
||||
<img style="width: 46%" src="@/assets/images/elevatorMonitoring/twoImg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 4%" class="bottomData">
|
||||
<div class="text1" style="margin-left: 10%; margin-top: 10%">
|
||||
当前离线<span class="num1 num" style="color: #889fca; left: 24%">2</span>
|
||||
当前离线<span class="num1 num" style="color: #889fca; left: 24%">{{getNumberThree}}</span>
|
||||
</div>
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%">1#塔吊</div>
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%">2#塔吊</div>
|
||||
<el-scrollbar style="height: 50%">
|
||||
<div class="text" style="margin-left: 10%; margin-top: 4%" v-for="(item, index) in offEquipment" :key="index">
|
||||
{{ item.devName }}
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div style="position: absolute; left: 23%; top: 32.5%">
|
||||
<img style="width: 46%" src="@/assets/images/elevatorMonitoring/threeImg.png" alt="" />
|
||||
</div>
|
||||
@ -79,6 +89,66 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import {
|
||||
getLifterWorkCycleApi, //今日累积运行次数
|
||||
getLifterViolationApi, //今日违章次数
|
||||
getLifterListApi //设备列表
|
||||
} from "@/api/modules/elevator";
|
||||
const store = GlobalStore();
|
||||
|
||||
//获取今日累计运行次数
|
||||
let workCycleList = ref({} as any);
|
||||
const getWorkCycleList = async () => {
|
||||
const res = await getLifterWorkCycleApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
workCycleList.value = res.result;
|
||||
}
|
||||
};
|
||||
//获取今日违章次数
|
||||
let ViolationList = ref({} as any);
|
||||
const getViolationList = async () => {
|
||||
const res = await getLifterViolationApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
ViolationList.value = res.result;
|
||||
}
|
||||
};
|
||||
|
||||
//获取设备列表
|
||||
let totalNumber = ref([] as any); //设备总数
|
||||
let lineEquipment = ref([] as any); //在线设备
|
||||
let offEquipment = ref([] as any); //离线设备
|
||||
let getNumberOne = ref("" as any);//设备总数
|
||||
let getNumberTwo = ref("" as any);//在线总数
|
||||
let getNumberThree = ref("" as any);//离线总数
|
||||
const getLifterList = async () => {
|
||||
const res = await getLifterListApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
totalNumber.value = res.result;
|
||||
totalNumber.value.forEach((item: any) => {
|
||||
if (item.devOnline == 1) {
|
||||
lineEquipment.value.push(item);
|
||||
} else if (item.devOnline == 0) {
|
||||
offEquipment.value.push(item);
|
||||
}
|
||||
});
|
||||
getNumberOne.value = totalNumber.value.length;
|
||||
getNumberTwo.value = lineEquipment.value.length;
|
||||
getNumberThree.value = offEquipment.value.length;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getWorkCycleList();
|
||||
getViolationList();
|
||||
getLifterList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -3,8 +3,14 @@
|
||||
<div class="title"><i>设备监控信息</i></div>
|
||||
<div class="content">
|
||||
<div class="selectRight">
|
||||
<el-select v-model="value" class="m-2" placeholder="Select" size="small">
|
||||
<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-select v-model="lifeValue" class="m-2" placeholder="Select" size="small">
|
||||
<el-option
|
||||
v-for="(item, index) in noiseList"
|
||||
:key="index"
|
||||
:label="item.devName"
|
||||
:value="item.id"
|
||||
@click="checkItem(item.devSn)"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="contentSmall">
|
||||
@ -16,20 +22,20 @@
|
||||
<div class="lineA"><img src="@/assets/images/elevatorMonitoring/lineA.png" alt="" /></div>
|
||||
<div class="lineAdata">
|
||||
<div>载重</div>
|
||||
<div style="color: #65d7f9">3kg</div>
|
||||
<div style="color: #65d7f9">{{elevatorList.loading||0}}kg</div>
|
||||
</div>
|
||||
<div class="lineAdata" style="left: 62%">
|
||||
<div>速度</div>
|
||||
<div style="color: #65d7f9">2m/s</div>
|
||||
<div style="color: #65d7f9">{{elevatorList.speed||0}}m/s</div>
|
||||
</div>
|
||||
<div class="lineB"><img src="@/assets/images/elevatorMonitoring/lineB.png" alt="" /></div>
|
||||
<div class="lineBdata">
|
||||
<div>X倾角</div>
|
||||
<div style="color: #ec6266">9.59°</div>
|
||||
<div style="color: #ec6266">{{elevatorList.dipAngleX||0}}°</div>
|
||||
</div>
|
||||
<div class="lineBdata" style="left: 61%">
|
||||
<div>Y倾角</div>
|
||||
<div style="color: #ec6266">15.18°</div>
|
||||
<div style="color: #ec6266">{{elevatorList.dipAngleY}}°</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightVideo">
|
||||
@ -41,14 +47,14 @@
|
||||
<div class="titleStatus">运行状态</div>
|
||||
<div class="infoBox">
|
||||
<div style="color: #65d7f9">人脸识别系统</div>
|
||||
<div><span class="textColor"> 今日工作时长：</span>2h 20min</div>
|
||||
<div><span class="textColor"> 今日装载次数：</span>10次</div>
|
||||
<div><span class="textColor"> 今日装载工效：</span>1kg/min</div>
|
||||
<div><span class="textColor"> 今日装载重量：</span>10kg</div>
|
||||
<div><span class="textColor"> 今日违章次数：</span>0次</div>
|
||||
<div><span class="textColor"> 今日工作时长：</span>{{lifeList.workTime||0}}min</div>
|
||||
<div><span class="textColor"> 今日装载次数：</span>{{lifeList.loadingNum||0}}次</div>
|
||||
<div><span class="textColor"> 今日装载工效：</span>{{lifeList.loadingErgonomic||0}}kg/min</div>
|
||||
<div><span class="textColor"> 今日装载重量：</span>{{lifeList.loadingWeight||0}}kg</div>
|
||||
<div><span class="textColor"> 今日违章次数：</span>{{lifeList.violationNum||0}}次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightInfo">
|
||||
<div class="rightInfo" v-for="(item,index) in driverInfo" :key="index">
|
||||
<div class="titleStatus">
|
||||
司机信息
|
||||
<span
|
||||
@ -57,78 +63,146 @@
|
||||
<span style="margin-left: 6%; color: #ccc">设备信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<div><span class="textColor"> 认证状态：</span>-</div>
|
||||
<div><span class="textColor"> 姓名：</span>马三</div>
|
||||
<div><span class="textColor"> 性别：</span>男</div>
|
||||
<div><span class="textColor"> 年龄：</span>41</div>
|
||||
<div><span class="textColor"> 工作年限：</span>12年</div>
|
||||
<div><span class="textColor">认证状态：</span>-</div>
|
||||
<div><span class="textColor"> 姓名：</span>{{ item.workerName||'未知'}}</div>
|
||||
<div><span class="textColor"> 性别：</span>{{ item.sex==1?'男':item.sex==2?'女':'未知'}}</div>
|
||||
<div><span class="textColor"> 年龄：</span>{{ item.age||'未知'}}</div>
|
||||
<div><span class="textColor"> 工作年限：</span>{{item.workYear||0}}年</div>
|
||||
<div>
|
||||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||||
身份证号:</span
|
||||
>51180220150114147888
|
||||
>{{ item.idCard||'未知' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="driverPhoto"><img src="@/assets/images/elevatorMonitoring/testImg.png" alt="" /></div>
|
||||
<div class="driverPhoto"><img :src="item.imageUrl" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomList" v-for="item in list">
|
||||
<p>{{ item.devName }}</p>
|
||||
<p class="number">{{ item.statusNumber }}</p>
|
||||
<div class="bottomList">
|
||||
<p>上限位</p>
|
||||
<p class="number">正常</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>下限位</p>
|
||||
<p class="number">{{elevatorList.bottomAlarm==1?'报警':'正常'}}</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>速度</p>
|
||||
<p class="number">{{elevatorList.speed||0}}m/s</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>载重</p>
|
||||
<p class="number">{{elevatorList.loading||0}}kg</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>X倾角</p>
|
||||
<p class="number">{{elevatorList.dipAngleX||0}}°</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>Y倾角</p>
|
||||
<p class="number">{{elevatorList.dipAngleY||0}}°</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>前门锁</p>
|
||||
<p class="number">正常</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>后门锁</p>
|
||||
<p class="number">正常</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Monitor from "@/views/sevenLargeScreen/elevatorMonitoring/eleMonitor.vue";
|
||||
import { ref, reactive } from "vue";
|
||||
const value = ref("1#电梯");
|
||||
const noiseList = [
|
||||
{
|
||||
value: 0,
|
||||
label: "2#电梯"
|
||||
import {
|
||||
getLifterListApi,
|
||||
getNewestLifterApi,
|
||||
getQueryTodayOperatingApi,
|
||||
getRelatedInfoApi
|
||||
} from "@/api/modules/elevator";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
const lifeValue = ref("" as any);
|
||||
const noiseList = ref([] as any);
|
||||
let lifterDevSn = ref("" as any);
|
||||
|
||||
// 下拉框选中
|
||||
function checkItem(val: any) {
|
||||
lifterDevSn.value = val;
|
||||
getLifterList()
|
||||
}
|
||||
|
||||
//获取设备下拉列表
|
||||
const getLifterList = async () => {
|
||||
const res = await getLifterListApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
noiseList.value = res.result;
|
||||
lifeValue.value = res.result[0].id;
|
||||
lifterDevSn.value=res.result[0].devSn
|
||||
}
|
||||
];
|
||||
const list = reactive([
|
||||
{
|
||||
devName: "上限位",
|
||||
statusNumber: "正常"
|
||||
},
|
||||
{
|
||||
devName: "下限位",
|
||||
statusNumber: "正常"
|
||||
},
|
||||
{
|
||||
devName: "速度",
|
||||
statusNumber: "2m/s"
|
||||
},
|
||||
{
|
||||
devName: "载重",
|
||||
statusNumber: "3kg"
|
||||
},
|
||||
{
|
||||
devName: "X倾角",
|
||||
statusNumber: "9.59°"
|
||||
},
|
||||
{
|
||||
devName: "Y倾角",
|
||||
statusNumber: "15.18°"
|
||||
},
|
||||
{
|
||||
devName: "前门锁",
|
||||
statusNumber: "正常"
|
||||
},
|
||||
{
|
||||
devName: "后门锁",
|
||||
statusNumber: "正常"
|
||||
await getLifterData();
|
||||
await getSelectTower();
|
||||
await getDriverInfoList();
|
||||
};
|
||||
|
||||
//获取升降机实时数据
|
||||
let elevatorList = ref({} as any);
|
||||
const getLifterData = async () => {
|
||||
const res = await getNewestLifterApi({
|
||||
devSn: lifterDevSn.value
|
||||
});
|
||||
if(res.result){
|
||||
elevatorList.value=res.result
|
||||
}
|
||||
]);
|
||||
console.log("获取升降机实时数据", elevatorList.value);
|
||||
};
|
||||
|
||||
//获取运行状态
|
||||
let lifeList = ref({} as any);
|
||||
const getSelectTower = async () => {
|
||||
const res = await getQueryTodayOperatingApi({
|
||||
projectSn: store.sn,
|
||||
devSn:lifeValue.value
|
||||
});
|
||||
if (res.result) {
|
||||
console.log('获取运行状态',res);
|
||||
lifeList.value=res.result
|
||||
}
|
||||
};
|
||||
|
||||
//获取司机信息
|
||||
let driverInfo = ref([] as any);
|
||||
const getDriverInfoList = async () => {
|
||||
const res = await getRelatedInfoApi({
|
||||
devSn: lifterDevSn.value
|
||||
});
|
||||
if (res.result) {
|
||||
driverInfo.value=res.result.devWorker.workerList
|
||||
console.log('获取司机信息',res);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getLifterList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -12,13 +12,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, watch, Ref } from "vue";
|
||||
import { ElMessage, ElMessageBox, ElStep } from "element-plus";
|
||||
import { ref,onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
|
||||
import { ElMessage} from "element-plus";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import { selectProjectVideoListApi} from "@/api/modules/video";
|
||||
|
||||
let shipinList = ref([] as any);
|
||||
|
||||
const store = GlobalStore();
|
||||
const parentTitle = ref<string>("");
|
||||
const playWndBox = ref(null);
|
||||
let playWndHeight = ref("");
|
||||
let playWndWidth = ref("");
|
||||
@ -27,47 +28,37 @@ let initCount = ref(0);
|
||||
let oWebControl = ref(null);
|
||||
let cameraIndexCode = ref<Array<string>>([]);
|
||||
let objData = ref({
|
||||
appkey: "24017757", //海康提供的appkey
|
||||
ip: "182.101.141.23", //海康提供的ip
|
||||
secret: "VJz0FbzmE6drPQ7egsBi", //海康提供的secret
|
||||
port: 18443,
|
||||
appkey: "23914849", //海康提供的appkey
|
||||
ip: "221.12.137.200", //海康提供的ip
|
||||
secret: "UV4xyujBtOGA4D0kvXG7", //海康提供的secret
|
||||
port: 444,
|
||||
playMode: 0, // 0 预览 1回放
|
||||
layout: "1x1" //页面展示的模块数【16】
|
||||
});
|
||||
|
||||
const changeTreeFilter = async (item: {
|
||||
data: { code: string | null; title: any; children: any[] };
|
||||
parent: { data: { title: any } };
|
||||
}) => {
|
||||
console.log("我是你要的数据", item);
|
||||
//给该方法传入监控编码
|
||||
cameraIndexCode.value = [item.data.code];
|
||||
parentTitle.value = item.parent.data.title || item.data.title;
|
||||
// //设备列表的点击操作
|
||||
// const checkVideo = async (item: any) => {
|
||||
// cameraIndexCode.value = item.serialNumber;
|
||||
// previewVideo(cameraIndexCode.value);
|
||||
// };
|
||||
//获取视频列表
|
||||
const getVideoList = async () => {
|
||||
const res = await selectProjectVideoListApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
shipinList.value = res.result.videoList[0].list;
|
||||
objData.value.appkey = res.result.videoList[0].list[0].appId;
|
||||
objData.value.ip = res.result.videoList[0].list[0].account;
|
||||
objData.value.secret = res.result.videoList[0].list[0].appSecret;
|
||||
objData.value.port = res.result.videoList[0].list[0].password;
|
||||
cameraIndexCode.value = res.result.videoList[0].list[0].serialNumber;
|
||||
console.log("视频列表", res);
|
||||
previewVideo(res.result.videoList[0].list[0].serialNumber);
|
||||
};
|
||||
// 获取视频流
|
||||
const getVideo = async () => {
|
||||
// await sendRequest({ code: cameraIndexCode.value });
|
||||
// await getpreviewURL({ cameraIndexCode: cameraIndexCode.value });
|
||||
};
|
||||
|
||||
// 监听修改密码的弹窗
|
||||
watch(
|
||||
() => store.editPassword,
|
||||
val => {
|
||||
val ? oWebControl.JS_HideWnd() : oWebControl.JS_ShowWnd();
|
||||
}
|
||||
// {
|
||||
// immediate: true
|
||||
// }
|
||||
);
|
||||
|
||||
/** 设备列表的点击操作 */
|
||||
|
||||
// window.addEventListener("keyup", () => {
|
||||
// oWebControl.JS_CuttingPartWindow(0, 0, 20, 20);
|
||||
// });
|
||||
|
||||
onMounted(async () => {
|
||||
setTimeout(() => {
|
||||
getVideoList();
|
||||
}, 1500);
|
||||
// 获取页面的实例对象 ee
|
||||
const pageInstance = getCurrentInstance();
|
||||
// 获取dom节点对象
|
||||
@ -79,7 +70,6 @@ onMounted(async () => {
|
||||
window.addEventListener("scroll", () => {
|
||||
if (oWebControl.value == undefined) {
|
||||
oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
@ -95,8 +85,8 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
// 初始化播放器插件
|
||||
nextTick(() => {
|
||||
initPlugin();
|
||||
nextTick(async() => {
|
||||
await initPlugin();
|
||||
});
|
||||
});
|
||||
|
||||
@ -213,6 +203,7 @@ const init = (callback: (() => void) | undefined) => {
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
// ip: ip + ":" + port, //API网关IP地址
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
@ -287,6 +278,7 @@ const previewVideo = (data: string | null) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
border-radius: 8px;
|
||||
|
||||
@ -39,35 +39,36 @@
|
||||
<div class="lineD" v-show="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineD.png" alt="" /></div>
|
||||
<div class="lineAdata" v-show="dataShow">
|
||||
<div>荷载比</div>
|
||||
<div style="color: #65d7f9">0.2%</div>
|
||||
<!-- 后端没有该字段，待定 -->
|
||||
<div style="color: #65d7f9">0%</div>
|
||||
</div>
|
||||
<div class="lineAdata" v-show="dataShow" style="left: 38%">
|
||||
<div>力矩比</div>
|
||||
<div style="color: #65d7f9">0.2%</div>
|
||||
<div style="color: #65d7f9">{{ towerDetail.torqueRatio || 0 }}%</div>
|
||||
</div>
|
||||
<div class="lineAdata" v-show="dataShow" style="left: 31%; top: 71%">
|
||||
<div>吊重</div>
|
||||
<div style="color: #65d7f9">1.0t</div>
|
||||
<div style="color: #65d7f9">{{ towerDetail.loading || 0 }}t</div>
|
||||
</div>
|
||||
<div class="lineAdata" v-show="dataShow" style="left: 36%; top: 71%">
|
||||
<div>幅度</div>
|
||||
<div style="color: #65d7f9">0.2m</div>
|
||||
<div style="color: #65d7f9">{{ towerDetail.ranger || 0 }}m</div>
|
||||
</div>
|
||||
<div class="lineAdata" v-show="dataShow" style="left: 41%; top: 71%">
|
||||
<div>高度</div>
|
||||
<div style="color: #65d7f9">16.5m</div>
|
||||
<div style="color: #65d7f9">{{ towerDetail.height || 0 }}m</div>
|
||||
</div>
|
||||
<div class="lineAdata" v-show="dataShow" style="left: 69.7%; top: 40%">
|
||||
<div>风速</div>
|
||||
<div style="color: #65d7f9">2m/s</div>
|
||||
<div style="color: #65d7f9">{{ towerDetail.windspeed || 0 }}m/s</div>
|
||||
</div>
|
||||
<div class="lineAdata" v-show="dataShow" style="left: 65%; top: 71%">
|
||||
<div>转角</div>
|
||||
<div style="color: #65d7f9">100°</div>
|
||||
<div style="color: #65d7f9">{{ towerDetail.angle || 0 }}°</div>
|
||||
</div>
|
||||
<div class="lineBdata" v-show="dataShow">
|
||||
<div>倾角</div>
|
||||
<div style="color: #ec6266">15°</div>
|
||||
<div style="color: #ec6266">{{ towerDetail.obliguity || 0 }}°</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightVideo">
|
||||
@ -77,17 +78,17 @@
|
||||
<div class="devInfo">
|
||||
<div class="leftInfo">
|
||||
<div class="titleStatus">运行状态</div>
|
||||
<div class="infoBox">
|
||||
<div class="infoBox" v-for="(item, index) in towerList" :key="index">
|
||||
<div style="color: #65d7f9">人脸识别系统</div>
|
||||
<div style="color: #65d7f9">塔吊考勤记录</div>
|
||||
<div><span class="textColor"> 工作时长：</span>2h 20min</div>
|
||||
<div><span class="textColor"> 今日吊次：</span>10次</div>
|
||||
<div><span class="textColor"> 今日吊重：</span>140.00T</div>
|
||||
<div><span class="textColor"> 工作时长：</span>{{ item.runMinuteTime || "未知" }}</div>
|
||||
<div><span class="textColor"> 今日吊次：</span>{{ item.cycleNum || 0 }}次</div>
|
||||
<div><span class="textColor"> 今日吊重：</span>{{ item.totalLoading || 0 }}T</div>
|
||||
<!-- <div><span class="textColor"> 今日工效：</span>1T/min</div> -->
|
||||
<div><span class="textColor"> 今日报警：</span>10次</div>
|
||||
<div><span class="textColor"> 今日报警：</span>{{ item.alarmNum || 0 }}次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightInfo">
|
||||
<div class="rightInfo" v-for="(item, index) in driverInfo" :key="index">
|
||||
<div class="titleStatus">
|
||||
司机信息
|
||||
<span
|
||||
@ -95,34 +96,91 @@
|
||||
</span>
|
||||
<span style="margin-left: 6%; color: #ccc">设备信息</span>
|
||||
</div>
|
||||
|
||||
<div class="infoBox">
|
||||
<div><span class="textColor"> 姓名：</span>蔡广源</div>
|
||||
<div><span class="textColor"> 性别：</span>男</div>
|
||||
<div><span class="textColor"> 年龄：</span>28</div>
|
||||
<div><span class="textColor"> 工作年限：</span>8年</div>
|
||||
<div><span class="textColor"> 本次连续工作时长：</span>9h</div>
|
||||
<div><span class="textColor"> 姓名：</span>{{ item.workerName || "未知" }}</div>
|
||||
<div><span class="textColor"> 性别：</span>{{ item.sex == 1 ? "男" : item.sex == 2 ? "女" : "未知" }}</div>
|
||||
<div><span class="textColor"> 年龄：</span>{{ item.age || "未知" }}</div>
|
||||
<div><span class="textColor"> 工作年限：</span>{{ item.workYear || "未知" }}</div>
|
||||
<div><span class="textColor"> 本次连续工作时长：</span>{{ item.continuousWorkingTime || "未知" }}</div>
|
||||
<div>
|
||||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||||
身份证号:</span
|
||||
>51180220150114147888
|
||||
>{{ item.idCard || "未知" }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||||
特种资格证书编号:</span
|
||||
>1541325622
|
||||
>{{ item.specialCertificateNumber || "未知" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="driverPhoto"><img src="@/assets/images/towerCraneMonitoring/driverPhoto.png" alt="" /></div>
|
||||
<div class="driverPhoto"><img :src="item.imageUrl" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomList" v-for="item in list">
|
||||
<p>{{ item.devName }}</p>
|
||||
<p class="number">{{ item.statusNumber }}</p>
|
||||
<div class="bottomList">
|
||||
<p>力矩</p>
|
||||
<p class="number">{{list.torque||0}}%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>高度</p>
|
||||
<p class="number">{{list.height||0}}m</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>幅度</p>
|
||||
<p class="number">{{list.ranger||0}}m</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>吊钩限位</p>
|
||||
<p class="number">0.2%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>小车限位</p>
|
||||
<p class="number">0.2%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>回转限位</p>
|
||||
<p class="number">0.2%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>塔机间碰撞</p>
|
||||
<p class="number">0.2%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>障碍物碰撞</p>
|
||||
<p class="number">0.2%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>进入禁行区</p>
|
||||
<p class="number">0.2%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>传感器故障</p>
|
||||
<p class="number">0.2%</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>风速</p>
|
||||
<p class="number">{{list.windspeed||0}}m/s</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="bottomList">
|
||||
<p>倾角</p>
|
||||
<p class="number">{{list.obliguity||0}}°</p>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,9 +191,14 @@
|
||||
import Monitor from "@/views/sevenLargeScreen/towerCraneMonitoring/monitor.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
// import * as echarts from "echarts";
|
||||
import { getQueryByIdApi, getTowerNumAndAlarmApi } from "@/api/modules/tower";
|
||||
// import Card from "@/components/card.vue";
|
||||
// import Card from "@/components/card.vue";
|
||||
import {
|
||||
getQueryByIdApi,
|
||||
getTowerNumAndAlarmApi,
|
||||
getNewestTowerApi,
|
||||
getTowerCurrentCountApi,
|
||||
getRelatedInfoApi,
|
||||
getNewestDataApi
|
||||
} from "@/api/modules/tower";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let towerValue = ref("" as any);
|
||||
@ -158,65 +221,18 @@ function moveAnimation() {
|
||||
towerA.style.transform = "translateX(-250px)";
|
||||
image.src = "src/assets/images/towerCraneMonitoring/towerB.png";
|
||||
}
|
||||
getTowerData();
|
||||
}
|
||||
let list = ref([
|
||||
{
|
||||
devName: "力矩",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "高度",
|
||||
statusNumber: "16.5m"
|
||||
},
|
||||
{
|
||||
devName: "幅度",
|
||||
statusNumber: "21.7m"
|
||||
},
|
||||
{
|
||||
devName: "吊钩限位",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "小车限位",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "回转限位",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "塔机间碰撞",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "障碍物碰撞",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "进入禁行区",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "传感器故障",
|
||||
statusNumber: "0.2%"
|
||||
},
|
||||
{
|
||||
devName: "风速",
|
||||
statusNumber: "2m/s"
|
||||
},
|
||||
{
|
||||
devName: "倾角",
|
||||
statusNumber: "15°"
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
// 下拉框选中
|
||||
function selectTower(e: any) {
|
||||
console.log("选中", e);
|
||||
getTowerDetail();
|
||||
getTowerData();
|
||||
}
|
||||
|
||||
// 获取塔吊详情
|
||||
let towerDevSn = ref("" as any);
|
||||
let towerDetailData = ref(null as any);
|
||||
const getTowerDetail = async () => {
|
||||
const res: any = await getQueryByIdApi({
|
||||
@ -225,12 +241,23 @@ const getTowerDetail = async () => {
|
||||
});
|
||||
if (res.result) {
|
||||
towerDetailData.value = res.result;
|
||||
towerDevSn.value = res.result.devSn;
|
||||
console.log("塔吊信息详情", res.result);
|
||||
}
|
||||
};
|
||||
//获取塔吊实时数据
|
||||
let towerDetail = ref(null as any);
|
||||
const getTowerData = async () => {
|
||||
const res = await getNewestTowerApi({
|
||||
devSn: towerDevSn.value
|
||||
});
|
||||
if (res.result) {
|
||||
towerDetail.value = res.result;
|
||||
}
|
||||
console.log("获取塔吊实时数据", res);
|
||||
};
|
||||
|
||||
// 获取塔吊列表
|
||||
// let towerList = ref(null as any);
|
||||
const getTowerNumAndAlarmList = async () => {
|
||||
const res: any = await getTowerNumAndAlarmApi({
|
||||
projectSn: store.sn
|
||||
@ -245,11 +272,52 @@ const getTowerNumAndAlarmList = async () => {
|
||||
console.log("塔吊option", noiseList.value);
|
||||
towerValue.value = noiseList.value[0].value;
|
||||
await getTowerDetail();
|
||||
await getTowerData();
|
||||
await getSelectTower();
|
||||
await getDriverInfoList();
|
||||
await getNewestData()
|
||||
}
|
||||
};
|
||||
|
||||
//获取运行状态
|
||||
let towerList = ref([] as any);
|
||||
const getSelectTower = async () => {
|
||||
const res = await getTowerCurrentCountApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
res.result.forEach((item: any) => {
|
||||
if (item.devSn == towerDevSn.value) {
|
||||
towerList.value.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//获取司机信息
|
||||
let driverInfo = ref([] as any);
|
||||
const getDriverInfoList = async () => {
|
||||
const res = await getRelatedInfoApi({
|
||||
devSn: towerDevSn.value
|
||||
});
|
||||
if (res.result) {
|
||||
driverInfo.value = res.result.devWorker.workerList;
|
||||
}
|
||||
};
|
||||
|
||||
//获取右下实时数据
|
||||
let list= ref({} as any)
|
||||
const getNewestData = async () => {
|
||||
const res = await getNewestDataApi({
|
||||
devSn: towerDevSn.value
|
||||
});
|
||||
if(res.result){
|
||||
list.value=res.result
|
||||
}
|
||||
console.log("获取右下实时数据", res);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// await getTowerDetail();
|
||||
await getTowerNumAndAlarmList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,22 +1,310 @@
|
||||
<template>
|
||||
<div class="videoManage">
|
||||
<div class="left">
|
||||
<VideoList></VideoList>
|
||||
<div class="videoListBig">
|
||||
<div class="title"><i>监控设备列表</i></div>
|
||||
<el-scrollbar style="height: 100%">
|
||||
<div class="content">
|
||||
<div class="decivList">
|
||||
<div
|
||||
class="menuDev"
|
||||
v-for="item in shipinList"
|
||||
:key="item.id"
|
||||
:class="item.deviceState == 1 ? 'online' : 'offline'"
|
||||
@click="checkVideo(item)"
|
||||
>
|
||||
<div class="decName">
|
||||
<span style="white-space: nowrap"> {{ item.videoName }}</span>
|
||||
</div>
|
||||
<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<VideoPlayer></VideoPlayer>
|
||||
<div class="videoPlayerBig">
|
||||
<div class="title"><i>视频监控</i></div>
|
||||
<div class="content">
|
||||
<div ref="playWndBox" style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="playWnd"
|
||||
class="playWnd"
|
||||
:style="{
|
||||
height: playWndHeight + 'px',
|
||||
width: playWndWidth + 'px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoList from "@/views/sevenLargeScreen/videoManagement/videoList.vue";
|
||||
import VideoPlayer from "@/views/sevenLargeScreen/videoManagement/videoPlayer.vue";
|
||||
export default {
|
||||
components: {
|
||||
VideoList,
|
||||
VideoPlayer
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { selectProjectVideoListApi} from "@/api/modules/video";
|
||||
let shipinList = ref([] as any);
|
||||
const store = GlobalStore();
|
||||
const playWndBox = ref(null);
|
||||
let playWndHeight = ref("");
|
||||
let playWndWidth = ref("");
|
||||
let pubKey = ref("");
|
||||
let initCount = ref(0);
|
||||
let oWebControl = ref(null);
|
||||
let cameraIndexCode = ref<Array<string>>([]);
|
||||
let objData = ref({
|
||||
appkey: "23914849", //海康提供的appkey
|
||||
ip: "221.12.137.200", //海康提供的ip
|
||||
secret: "UV4xyujBtOGA4D0kvXG7", //海康提供的secret
|
||||
port: 444,
|
||||
playMode: 0, // 0 预览 1回放
|
||||
layout: "2x2" //页面展示的模块数【16】
|
||||
});
|
||||
|
||||
//设备列表的点击操作
|
||||
const checkVideo = async (item: any) => {
|
||||
cameraIndexCode.value = item.serialNumber;
|
||||
previewVideo(cameraIndexCode.value);
|
||||
};
|
||||
//获取视频列表
|
||||
const getVideoList = async () => {
|
||||
const res = await selectProjectVideoListApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
shipinList.value = res.result.videoList[0].list;
|
||||
objData.value.appkey = res.result.videoList[0].list[0].appId;
|
||||
objData.value.ip = res.result.videoList[0].list[0].account;
|
||||
objData.value.secret = res.result.videoList[0].list[0].appSecret;
|
||||
objData.value.port = res.result.videoList[0].list[0].password;
|
||||
cameraIndexCode.value = res.result.videoList[0].list[0].serialNumber;
|
||||
console.log("视频列表", res);
|
||||
previewVideo(res.result.videoList[0].list[0].serialNumber);
|
||||
};
|
||||
onMounted(async () => {
|
||||
setTimeout(() => {
|
||||
getVideoList();
|
||||
}, 1500);
|
||||
// 获取页面的实例对象 ee
|
||||
const pageInstance = getCurrentInstance();
|
||||
// 获取dom节点对象
|
||||
const tagDomObj = pageInstance?.refs.playWndBox;
|
||||
playWndHeight.value = tagDomObj?.clientHeight;
|
||||
playWndWidth.value = tagDomObj?.clientWidth;
|
||||
|
||||
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("scroll", () => {
|
||||
if (oWebControl.value == undefined) {
|
||||
oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("resize", e => {
|
||||
if (oWebControl.value == undefined) {
|
||||
// console.log("wwwww", e);
|
||||
|
||||
oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化播放器插件
|
||||
nextTick(async() => {
|
||||
await initPlugin();
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (oWebControl.value === undefined) {
|
||||
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_HideWnd();
|
||||
// 销毁当前播放的视频
|
||||
oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
|
||||
// 断开与插件服务连接
|
||||
oWebControl.JS_Disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
const initPlugin = () => {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15900,
|
||||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: () => {
|
||||
// 创建WebControl实例成功
|
||||
oWebControl
|
||||
.JS_StartService("window", {
|
||||
// WebControl实例创建成功后需要启动服务
|
||||
// 值"./VideoPluginConnect.dll"写死
|
||||
dllPath: "./VideoPluginConnect.dll"
|
||||
})
|
||||
.then(
|
||||
function () {
|
||||
// 设置消息回调
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
// cbIntegrationCallBack: cbIntegrationCallBack,
|
||||
});
|
||||
//JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
oWebControl
|
||||
.JS_CreateWnd("playWnd", 1000, 600, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
|
||||
.then(function () {
|
||||
// 创建播放实例成功后初始化
|
||||
init();
|
||||
});
|
||||
},
|
||||
function () {
|
||||
// 启动插件服务失败
|
||||
}
|
||||
);
|
||||
},
|
||||
// 创建WebControl实例失败
|
||||
cbConnectError: function () {
|
||||
// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
|
||||
// console.log(0);
|
||||
// oWebControl.value = null;
|
||||
console.log(oWebControl.value);
|
||||
// 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
window.WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||
initCount.value++;
|
||||
if (initCount.value < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000);
|
||||
}
|
||||
// else {
|
||||
// setTimeout(function () {
|
||||
// setTimeout(function () {
|
||||
// router.push("/home");
|
||||
// }, 4000);
|
||||
// }, 4000);
|
||||
// }
|
||||
if (initCount.value < 2) {
|
||||
oWebControl.value = null;
|
||||
ElMessage.warning("插件未启动，正在尝试启动，请稍候...");
|
||||
// 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
window.WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||
setTimeout(() => {
|
||||
initPlugin();
|
||||
}, 3000);
|
||||
initCount.value++;
|
||||
}
|
||||
// else {
|
||||
// window.location.href = this.videoWebPluginUrl;
|
||||
// }
|
||||
// console.log(oWebControl.value);
|
||||
},
|
||||
cbConnectClose: () => {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
// console.log("cbConnectClose");
|
||||
oWebControl.value = null;
|
||||
}
|
||||
});
|
||||
// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
|
||||
};
|
||||
|
||||
// 初始化
|
||||
const init = (callback: (() => void) | undefined) => {
|
||||
getPubKey(() => {
|
||||
let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
|
||||
let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
|
||||
let ip = objData.value.ip; //综合安防管理平台IP地址，必填
|
||||
let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
|
||||
let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
let snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
let layout = objData.value.layout; //playMode指定模式的布局
|
||||
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
let encryptedFields = "secret"; //加密字段，默认加密领域为secret
|
||||
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
|
||||
let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
|
||||
oWebControl
|
||||
?.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
// ip: ip + ":" + port, //API网关IP地址
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs //自定义工具条按钮
|
||||
})
|
||||
})
|
||||
.then(function (oData: any) {
|
||||
oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
// 隐藏
|
||||
// oWebControl.JS_HideWnd()
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// RSA 加密
|
||||
let setEncrypt = (value: string) => {
|
||||
let encrypt = new window.JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
};
|
||||
// 获取公钥
|
||||
const getPubKey = (callback: { (): void; (): void }) => {
|
||||
oWebControl
|
||||
.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
})
|
||||
.then(function (oData: { responseMsg: { data: Ref<string> } }) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 调用这个函数可进行视频播放
|
||||
// 视频预览功能
|
||||
const previewVideo = (data: string | null) => {
|
||||
let cameraIndexCode = data; // 获取输入的监控点编号值，必填
|
||||
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
|
||||
let transMode = 1; // 传输协议：0-UDP，1-TCP
|
||||
let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
|
||||
let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
oWebControl
|
||||
.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode: cameraIndexCode, // 监控点编号
|
||||
streamMode: streamMode, // 主子码流标识
|
||||
transMode: transMode, // 传输协议
|
||||
gpuMode: gpuMode, // 是否开启GPU硬解
|
||||
wndId: wndId // 可指定播放窗口
|
||||
})
|
||||
})
|
||||
.then(function () {
|
||||
oWebControl.JS_SetWindowControlCallback({});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -29,11 +317,107 @@ export default {
|
||||
width: 17%;
|
||||
height: 100%;
|
||||
// background: pink;
|
||||
.videoListBig {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 15%;
|
||||
.title {
|
||||
position: fixed;
|
||||
top: 12%;
|
||||
height: 5%;
|
||||
line-height: 45px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleImg.webp") no-repeat;
|
||||
background-size: 150% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 800px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
}
|
||||
}
|
||||
.decivList {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
.menuDev {
|
||||
height: 6%;
|
||||
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
line-height: 35px;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: 2% 3%;
|
||||
cursor: pointer;
|
||||
.decName {
|
||||
width: 30%;
|
||||
span {
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
margin-left: 56%;
|
||||
}
|
||||
}
|
||||
.menuDev:hover {
|
||||
height: 6%;
|
||||
background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.online {
|
||||
.status {
|
||||
color: #65d7f9;
|
||||
}
|
||||
}
|
||||
.offline {
|
||||
.status {
|
||||
color: #ec6266;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
margin-left: 1%;
|
||||
width: 83%;
|
||||
height: 100%;
|
||||
.videoPlayerBig {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 5%;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.main {
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
height: 80vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,121 +0,0 @@
|
||||
<template>
|
||||
<div class="videoListBig">
|
||||
<div class="title"><i>监控设备列表</i></div>
|
||||
<vue-scroll style="height: 500px;">
|
||||
<div class="content">
|
||||
<div class="decivList">
|
||||
<div class="menuDev" v-for="item in videoList" :key="item.id" :class="item.deviceState == 1 ? 'online' : 'offline'">
|
||||
<div class="decName">
|
||||
<!-- <span v-show="item.deviceState == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span> -->
|
||||
<!-- <span v-show="item.deviceState == 2"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span> -->
|
||||
<span style="white-space: nowrap"> {{ item.videoName }}</span>
|
||||
</div>
|
||||
<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
// import { useRouter } from "vue-router";
|
||||
import { selectProjectVideoListApi, selectUserVideoListApi } from "@/api/modules/video";
|
||||
// const router = useRouter();
|
||||
const store = GlobalStore();
|
||||
|
||||
let videoList = ref([] as any);
|
||||
|
||||
function loadData() {
|
||||
selectProjectVideoListApi({
|
||||
projectSn: store.sn
|
||||
}).then(res => {
|
||||
videoList.value = res.result.videoList[0].list;
|
||||
console.log("视频列表", res);
|
||||
});
|
||||
}
|
||||
function loadData2() {
|
||||
selectUserVideoListApi({
|
||||
projectSn: store.sn
|
||||
// userId: store.userId
|
||||
}).then(res => {
|
||||
console.log("子账号视频列表", res);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadData();
|
||||
loadData2();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videoListBig {
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
.title {
|
||||
height: 5%;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleImg.webp") no-repeat;
|
||||
background-size: 150% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 800px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
}
|
||||
}
|
||||
.decivList {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
.menuDev {
|
||||
height: 6%;
|
||||
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
line-height: 35px;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: 2% 3%;
|
||||
cursor: pointer;
|
||||
.decName {
|
||||
width: 30%;
|
||||
span {
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
margin-left: 56%;
|
||||
}
|
||||
}
|
||||
.menuDev:hover {
|
||||
height: 6%;
|
||||
background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.online {
|
||||
.status {
|
||||
color: #65d7f9;
|
||||
}
|
||||
}
|
||||
.offline {
|
||||
.status {
|
||||
color: #ec6266;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,328 +0,0 @@
|
||||
<template>
|
||||
<div class="videoListBig">
|
||||
<div class="title"><i>视频监控</i></div>
|
||||
<div class="content">
|
||||
<div ref="playWndBox" class="main">
|
||||
<div
|
||||
id="playWnd"
|
||||
class="playWnd"
|
||||
:style="{
|
||||
height: playWndHeight + 'px',
|
||||
width: playWndWidth + 'px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, watch, Ref } from "vue";
|
||||
import { ElMessage, ElMessageBox, ElStep } from "element-plus";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const store = GlobalStore();
|
||||
const parentTitle = ref<string>("");
|
||||
const playWndBox = ref(null);
|
||||
let playWndHeight = ref("");
|
||||
let playWndWidth = ref("");
|
||||
let pubKey = ref("");
|
||||
let initCount = ref(0);
|
||||
let oWebControl = ref(null);
|
||||
let cameraIndexCode = ref<Array<string>>([]);
|
||||
let objData = ref({
|
||||
appkey: "24017757", //海康提供的appkey
|
||||
ip: "182.101.141.23", //海康提供的ip
|
||||
secret: "VJz0FbzmE6drPQ7egsBi", //海康提供的secret
|
||||
port: 18443,
|
||||
playMode: 0, // 0 预览 1回放
|
||||
layout: "2x2" //页面展示的模块数【16】
|
||||
});
|
||||
|
||||
const changeTreeFilter = async (item: {
|
||||
data: { code: string | null; title: any; children: any[] };
|
||||
parent: { data: { title: any } };
|
||||
}) => {
|
||||
console.log("我是你要的数据", item);
|
||||
//给该方法传入监控编码
|
||||
cameraIndexCode.value = [item.data.code];
|
||||
parentTitle.value = item.parent.data.title || item.data.title;
|
||||
};
|
||||
// 获取视频流
|
||||
const getVideo = async () => {
|
||||
// await sendRequest({ code: cameraIndexCode.value });
|
||||
// await getpreviewURL({ cameraIndexCode: cameraIndexCode.value });
|
||||
};
|
||||
|
||||
// 监听修改密码的弹窗
|
||||
watch(
|
||||
() => store.editPassword,
|
||||
val => {
|
||||
val ? oWebControl.JS_HideWnd() : oWebControl.JS_ShowWnd();
|
||||
}
|
||||
// {
|
||||
// immediate: true
|
||||
// }
|
||||
);
|
||||
|
||||
/** 设备列表的点击操作 */
|
||||
|
||||
// window.addEventListener("keyup", () => {
|
||||
// oWebControl.JS_CuttingPartWindow(0, 0, 20, 20);
|
||||
// });
|
||||
|
||||
onMounted(async () => {
|
||||
// 获取页面的实例对象 ee
|
||||
const pageInstance = getCurrentInstance();
|
||||
// 获取dom节点对象
|
||||
const tagDomObj = pageInstance?.refs.playWndBox;
|
||||
playWndHeight.value = tagDomObj?.clientHeight;
|
||||
playWndWidth.value = tagDomObj?.clientWidth;
|
||||
|
||||
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("scroll", () => {
|
||||
if (oWebControl.value == undefined) {
|
||||
oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("resize", e => {
|
||||
if (oWebControl.value == undefined) {
|
||||
// console.log("wwwww", e);
|
||||
|
||||
oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化播放器插件
|
||||
nextTick(() => {
|
||||
initPlugin();
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (oWebControl.value === undefined) {
|
||||
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_HideWnd();
|
||||
// 销毁当前播放的视频
|
||||
oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
|
||||
// 断开与插件服务连接
|
||||
oWebControl.JS_Disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
const initPlugin = () => {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15900,
|
||||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: () => {
|
||||
// 创建WebControl实例成功
|
||||
oWebControl
|
||||
.JS_StartService("window", {
|
||||
// WebControl实例创建成功后需要启动服务
|
||||
// 值"./VideoPluginConnect.dll"写死
|
||||
dllPath: "./VideoPluginConnect.dll"
|
||||
})
|
||||
.then(
|
||||
function () {
|
||||
// 设置消息回调
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
// cbIntegrationCallBack: cbIntegrationCallBack,
|
||||
});
|
||||
//JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
oWebControl
|
||||
.JS_CreateWnd("playWnd", 1000, 600, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
|
||||
.then(function () {
|
||||
// 创建播放实例成功后初始化
|
||||
init();
|
||||
});
|
||||
},
|
||||
function () {
|
||||
// 启动插件服务失败
|
||||
}
|
||||
);
|
||||
},
|
||||
// 创建WebControl实例失败
|
||||
cbConnectError: function () {
|
||||
// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
|
||||
// console.log(0);
|
||||
// oWebControl.value = null;
|
||||
console.log(oWebControl.value);
|
||||
// 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
window.WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||
initCount.value++;
|
||||
if (initCount.value < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000);
|
||||
}
|
||||
// else {
|
||||
// setTimeout(function () {
|
||||
// setTimeout(function () {
|
||||
// router.push("/home");
|
||||
// }, 4000);
|
||||
// }, 4000);
|
||||
// }
|
||||
if (initCount.value < 2) {
|
||||
oWebControl.value = null;
|
||||
ElMessage.warning("插件未启动，正在尝试启动，请稍候...");
|
||||
// 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
window.WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||
setTimeout(() => {
|
||||
initPlugin();
|
||||
}, 3000);
|
||||
initCount.value++;
|
||||
}
|
||||
// else {
|
||||
// window.location.href = this.videoWebPluginUrl;
|
||||
// }
|
||||
// console.log(oWebControl.value);
|
||||
},
|
||||
cbConnectClose: () => {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
// console.log("cbConnectClose");
|
||||
oWebControl.value = null;
|
||||
}
|
||||
});
|
||||
// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
|
||||
};
|
||||
|
||||
// 初始化
|
||||
const init = (callback: (() => void) | undefined) => {
|
||||
getPubKey(() => {
|
||||
let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
|
||||
let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
|
||||
let ip = objData.value.ip; //综合安防管理平台IP地址，必填
|
||||
let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
|
||||
let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
let snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
let layout = objData.value.layout; //playMode指定模式的布局
|
||||
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
let encryptedFields = "secret"; //加密字段，默认加密领域为secret
|
||||
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
|
||||
let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
|
||||
oWebControl
|
||||
?.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs //自定义工具条按钮
|
||||
})
|
||||
})
|
||||
.then(function (oData: any) {
|
||||
oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
// 隐藏
|
||||
// oWebControl.JS_HideWnd()
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// RSA 加密
|
||||
let setEncrypt = (value: string) => {
|
||||
let encrypt = new window.JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
};
|
||||
// 获取公钥
|
||||
const getPubKey = (callback: { (): void; (): void }) => {
|
||||
oWebControl
|
||||
.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
})
|
||||
.then(function (oData: { responseMsg: { data: Ref<string> } }) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 调用这个函数可进行视频播放
|
||||
// 视频预览功能
|
||||
const previewVideo = (data: string | null) => {
|
||||
let cameraIndexCode = data; // 获取输入的监控点编号值，必填
|
||||
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
|
||||
let transMode = 1; // 传输协议：0-UDP，1-TCP
|
||||
let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
|
||||
let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
oWebControl
|
||||
.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode: cameraIndexCode, // 监控点编号
|
||||
streamMode: streamMode, // 主子码流标识
|
||||
transMode: transMode, // 传输协议
|
||||
gpuMode: gpuMode, // 是否开启GPU硬解
|
||||
wndId: wndId // 可指定播放窗口
|
||||
})
|
||||
})
|
||||
.then(function () {
|
||||
oWebControl.JS_SetWindowControlCallback({});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videoListBig {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 5%;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// color: #fff;
|
||||
// display: flex;
|
||||
// font-size: calc(100vw * 14 / 1920);
|
||||
.main {
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
height: 80vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user