flx：绑定总览大屏接口
This commit is contained in:
parent
f899a097d6
commit
f8296aa429
17
src/api/modules/agjtOverviewApi.ts
Normal file
17
src/api/modules/agjtOverviewApi.ts
Normal file
@ -0,0 +1,17 @@
|
||||
// AI预警接口API
|
||||
import http from "@/api";
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
|
||||
// 视频情况分析
|
||||
export const videoItemCountStatusApi = (params: {}, showLoading: boolean) => {
|
||||
return http.post(BASEURL + `/xmgl/videoItem/countStatus`, params, { headers: { noLoading: showLoading } });
|
||||
};
|
||||
|
||||
// 图像正常率
|
||||
export const videoHkVqdcountQualityApi = (params: {}, showLoading: boolean) => {
|
||||
return http.post(BASEURL + `/xmgl/projectVideoHkVqd/countQuality`, params, { headers: { noLoading: showLoading } });
|
||||
};
|
||||
// 图像正常率
|
||||
export const videoFullCountFullApi = (params: {}, showLoading: boolean) => {
|
||||
return http.post(BASEURL + `/xmgl/xzHikvisionVideoFull/countFull`, params, { headers: { noLoading: showLoading } });
|
||||
};
|
||||
@ -6,11 +6,11 @@
|
||||
<div class="video-list">
|
||||
<div class="video-title">
|
||||
<div>监控点总数</div>
|
||||
<div>125</div>
|
||||
<div>{{ videoInfo.videoItemCountInfo.total }}</div>
|
||||
</div>
|
||||
<div class="video-title">
|
||||
<div>在线监控点</div>
|
||||
<div>12</div>
|
||||
<div>{{ videoInfo.videoItemCountInfo.onlineNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-eacher">
|
||||
@ -21,11 +21,11 @@
|
||||
<div class="video-list">
|
||||
<div class="video-title">
|
||||
<div>离线监控点</div>
|
||||
<div>55</div>
|
||||
<div>{{ videoInfo.videoItemCountInfo.offlineNum }}</div>
|
||||
</div>
|
||||
<div class="video-title">
|
||||
<div>监控点在线率</div>
|
||||
<div>56%</div>
|
||||
<div>{{ videoInfo.videoItemCountInfo.onlineRatio }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-eacher">
|
||||
@ -42,6 +42,9 @@
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { videoItemCountStatusApi, videoHkVqdcountQualityApi, videoFullCountFullApi } from "@/api/modules/agjtOverviewApi";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
const videoInfo = reactive({
|
||||
dataList: [
|
||||
{
|
||||
@ -150,7 +153,10 @@ const videoInfo = reactive({
|
||||
color: "#A2A4AF"
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
normalNumRatio: 0,
|
||||
fullRatio: 0,
|
||||
videoItemCountInfo: {} as any
|
||||
});
|
||||
// 视频情况分析
|
||||
function getImageNormalityEchart() {
|
||||
@ -163,7 +169,7 @@ function getImageNormalityEchart() {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: "50%",
|
||||
text: `${videoInfo.normalNumRatio}%`,
|
||||
subtext: "图像正常率",
|
||||
x: "29%",
|
||||
y: "32%",
|
||||
@ -272,8 +278,8 @@ function getImageNormalityEchart() {
|
||||
}
|
||||
|
||||
function getVideoNormalityEchart() {
|
||||
console.log("我是图像正常率");
|
||||
const echartsTest = echarts.init(document.getElementById("eacherVideoNormality"));
|
||||
console.log("我是录像完整率");
|
||||
const echartsTest = echarts.init(document.getElementById("eacherVideoNormality") as any);
|
||||
let option = {
|
||||
color: ["#65D7F9", "#FFD15C", "#EA3941", "#A2A4AF", "#FDFDFC"],
|
||||
animation: false, // 取消动画
|
||||
@ -281,7 +287,7 @@ function getVideoNormalityEchart() {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: "50%",
|
||||
text: `${videoInfo.fullRatio}%`,
|
||||
subtext: "录像完整率",
|
||||
x: "29%",
|
||||
y: "32%",
|
||||
@ -388,12 +394,102 @@ function getVideoNormalityEchart() {
|
||||
console.log(echartsTest);
|
||||
}
|
||||
|
||||
const setIntervalFn = () => {
|
||||
// 视频点数
|
||||
const videoItemCountStatus = async (showLoading: boolean) => {
|
||||
const res: any = await videoItemCountStatusApi(
|
||||
{
|
||||
projectSn: store.sn
|
||||
},
|
||||
showLoading
|
||||
);
|
||||
if (res.result) {
|
||||
videoInfo.videoItemCountInfo = res.result;
|
||||
}
|
||||
};
|
||||
|
||||
// 图像正常率
|
||||
const videoHkVqdcountQuality = async (showLoading: boolean) => {
|
||||
const res: any = await videoHkVqdcountQualityApi(
|
||||
{
|
||||
projectSn: store.sn
|
||||
},
|
||||
showLoading
|
||||
);
|
||||
videoInfo.dataList = ["图像正常", "图像异常", "诊断失败", "未检测"].map((item, index) => {
|
||||
const colorList = ["#65D7F9", "#FFD15C", "#EA3941", "#A2A4AF"];
|
||||
let value = 0;
|
||||
if (index == 0) {
|
||||
value = res.result.normalNum;
|
||||
} else if (index == 1) {
|
||||
value = res.result.exceptionNum;
|
||||
} else if (index == 2) {
|
||||
value = res.result.failNum;
|
||||
} else if (index == 3) {
|
||||
value = res.result.notDetectNum;
|
||||
}
|
||||
return {
|
||||
enumType: "",
|
||||
value: value,
|
||||
show: true,
|
||||
name: item,
|
||||
greatFaultLevelNumJzrRate: "",
|
||||
rectificationNum: "",
|
||||
rectificationNumJzrRate: "",
|
||||
rectificationName: "",
|
||||
itemStyle: {
|
||||
color: colorList[index]
|
||||
}
|
||||
};
|
||||
});
|
||||
videoInfo.normalNumRatio = res.result.normalNumRatio;
|
||||
getImageNormalityEchart();
|
||||
};
|
||||
|
||||
// 录像完整率
|
||||
const videoFullCountFull = async (showLoading: boolean) => {
|
||||
const res: any = await videoFullCountFullApi(
|
||||
{
|
||||
projectSn: store.sn
|
||||
},
|
||||
showLoading
|
||||
);
|
||||
videoInfo.dataList2 = ["录像完整", "录像丢失", "诊断失败", "未检测"].map((item, index) => {
|
||||
const colorList = ["#65D7F9", "#FFD15C", "#EA3941", "#A2A4AF"];
|
||||
let value = 0;
|
||||
if (index == 0) {
|
||||
value = res.result.fullNum;
|
||||
} else if (index == 1) {
|
||||
value = res.result.loseNum;
|
||||
} else if (index == 2) {
|
||||
value = res.result.failNum;
|
||||
} else if (index == 3) {
|
||||
value = res.result.notDetectNum;
|
||||
}
|
||||
return {
|
||||
enumType: "",
|
||||
value: value,
|
||||
show: true,
|
||||
name: item,
|
||||
greatFaultLevelNumJzrRate: "",
|
||||
rectificationNum: "",
|
||||
rectificationNumJzrRate: "",
|
||||
rectificationName: "",
|
||||
itemStyle: {
|
||||
color: colorList[index]
|
||||
}
|
||||
};
|
||||
});
|
||||
videoInfo.fullRatio = res.result.fullRatio;
|
||||
getVideoNormalityEchart();
|
||||
};
|
||||
|
||||
const setIntervalFn = (showLoading: boolean) => {
|
||||
videoHkVqdcountQuality(showLoading);
|
||||
videoFullCountFull(showLoading);
|
||||
videoItemCountStatus(showLoading);
|
||||
};
|
||||
onMounted(async () => {
|
||||
setIntervalFn();
|
||||
setIntervalFn(false);
|
||||
// 定时三十秒刷新
|
||||
// setInterval(() => {
|
||||
// setIntervalFn(true);
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="left">
|
||||
<div class="line1" style="display: flex">
|
||||
<span style="margin-left: 15px">距离完工还有</span>
|
||||
<div class="numberCard" v-for="(item, i) in '204'" :key="i">{{ item }}</div>
|
||||
<div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">{{ item }}</div>
|
||||
<span style="margin-left: 5px">天</span>
|
||||
</div>
|
||||
<!-- @openDialog="openPeopleCountDialog" -->
|
||||
@ -27,13 +27,14 @@ import leftBottom from "@/views/overviewScreen/commandCenter/leftBottom.vue";
|
||||
import centerTop from "@/views/overviewScreen/commandCenter/centerTop.vue";
|
||||
import centerBottom from "@/views/overviewScreen/commandCenter/centerBottom.vue";
|
||||
import rightAll from "@/views/overviewScreen/commandCenter/rightAll.vue";
|
||||
// import { GlobalStore } from "@/stores";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getCountTaskProgressApi } from "@/api/modules/agjtCommandApi";
|
||||
// import dataDialog from "../dialogCompnnents/data-dialog.vue";
|
||||
// import * as mqtt from "mqtt/dist/mqtt.min";
|
||||
|
||||
// import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
|
||||
import { onMounted } from "vue";
|
||||
// const store = GlobalStore();
|
||||
import { onMounted, ref } from "vue";
|
||||
const store = GlobalStore();
|
||||
// const statisticsCount = ref(null as any);
|
||||
|
||||
// const projectData = ref(null as any);
|
||||
@ -91,7 +92,23 @@ import { onMounted } from "vue";
|
||||
// console.log("连接失败:", error);
|
||||
// });
|
||||
// };
|
||||
// 项目剩余天数
|
||||
let projectSurplusDayNum = ref("" as any);
|
||||
// 获取项目总进度/项目剩余天数
|
||||
const getCountTaskProgress = async (showLoading: boolean) => {
|
||||
const res: any = await getCountTaskProgressApi(
|
||||
{
|
||||
projectSn: store.sn
|
||||
},
|
||||
showLoading
|
||||
);
|
||||
if (res.result) {
|
||||
console.log("项目总进度/项目剩余天数", res);
|
||||
projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getCountTaskProgress(false);
|
||||
// mqttMSG();
|
||||
// setTimeout(() => {
|
||||
// openPeopleCountDialog({
|
||||
|
||||
@ -662,24 +662,24 @@ const queryCountEnterprise = async (showLoading: boolean) => {
|
||||
if (res.result) {
|
||||
console.log("总包进度列表", res);
|
||||
processList.value = res.result;
|
||||
processList.value = [
|
||||
{
|
||||
enterpriseName: "广东省某某科技有限公司(东北厂区)",
|
||||
changeAfter: 70
|
||||
},
|
||||
{
|
||||
enterpriseName: "广州市某公司名称(东北厂区)",
|
||||
changeAfter: 65
|
||||
},
|
||||
{
|
||||
enterpriseName: "企业名称(东北厂区)",
|
||||
changeAfter: 60
|
||||
},
|
||||
{
|
||||
enterpriseName: "这里是第四名企业名称(东北厂区)",
|
||||
changeAfter: 55
|
||||
}
|
||||
];
|
||||
// processList.value = [
|
||||
// {
|
||||
// enterpriseName: "广东省某某科技有限公司(东北厂区)",
|
||||
// changeAfter: 70
|
||||
// },
|
||||
// {
|
||||
// enterpriseName: "广州市某公司名称(东北厂区)",
|
||||
// changeAfter: 65
|
||||
// },
|
||||
// {
|
||||
// enterpriseName: "企业名称(东北厂区)",
|
||||
// changeAfter: 60
|
||||
// },
|
||||
// {
|
||||
// enterpriseName: "这里是第四名企业名称(东北厂区)",
|
||||
// changeAfter: 55
|
||||
// }
|
||||
// ];
|
||||
}
|
||||
};
|
||||
const setIntervalFn = (showLoading: boolean) => {
|
||||
@ -702,6 +702,7 @@ onMounted(async () => {
|
||||
height: 79%;
|
||||
padding: 10px 10px;
|
||||
margin-top: 1%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leftBottom {
|
||||
// background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user