This commit is contained in:
X_Rian 2024-06-03 17:52:59 +08:00
parent c7a46f4765
commit 01cc615d49
4 changed files with 151 additions and 104 deletions

View File

@ -6,25 +6,26 @@
<!-- <div class="cubeIcon"></div> --> <!-- <div class="cubeIcon"></div> -->
<div class="cLeft title-tabs"> <div class="cLeft title-tabs">
<div class="title-color">应急处置近七天</div> <div class="title-color">应急处置近七天</div>
<div>事故风险趋势预期</div> <div>事故风险预测趋势</div>
</div> </div>
</div> </div>
<div class="cbHeaderLine" style="margin-top: 1%"></div> <div class="cbHeaderLine" style="margin-top: 1%"></div>
</div> </div>
<div class="ctContent" style="margin-top: 1%; display: flex"> <div class="ctContent" style="margin-top: 1%; display: flex">
<div style="width: 50%"> <div style="width: 50%; position: relative">
<div id="eacherMess" style="width: 100%; height: 100%"></div> <div id="eacherMess" style="width: 100%; height: 100%"></div>
<!-- <div class="notoDta" v-if="dataList.length == 0"> <div class="right-dap" @click="onPageMess" v-if="dataListAlarm.length != 0"></div>
<div class="notoDta" v-if="dataListAlarm.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
</div> --> </div>
</div> </div>
<div style="width: 50%"> <div style="width: 50%">
<div id="eacherMessCount" style="width: 100%; height: 100%"></div> <div id="eacherMessCount" style="width: 100%; height: 100%"></div>
<!-- <div class="notoDta" v-if="dataList.length == 0"> <div class="notoDta" v-if="messCountType.data.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
</div> --> </div>
</div> </div>
</div> </div>
</div> </div>
@ -119,7 +120,7 @@
import { getNoticeListApi } from "@/api/modules/projectOverview"; import { getNoticeListApi } from "@/api/modules/projectOverview";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// import Card from "@/components/card.vue"; // import Card from "@/components/card.vue";
import { ref, onMounted } from "vue"; import { ref, onMounted, reactive } from "vue";
import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview"; import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
@ -167,55 +168,74 @@ const getNoticeList = async () => {
console.log("================center================", listData.value); console.log("================center================", listData.value);
}; };
const dataListAlarm = ref([]); const dataListAlarm = ref([]);
const pageInfo = reactive({
dataListAlarmPage: [] as any[],
page: 0
});
const spArr = (arr: any[], num: number) => {
let newArr = [];
for (let i = 0; i < arr.length; ) {
newArr.push(arr.slice(i, (i += num)));
}
return newArr;
};
const onPageMess = () => {
pageInfo.page += 1;
if (pageInfo.page >= pageInfo.dataListAlarmPage.length) {
pageInfo.page = 0;
}
getMessEchart();
};
// //
function getMessEchart() { function getMessEchart() {
console.log("我是应急处置11"); console.log("我是应急处置11");
const echartsTest = echarts.init(document.getElementById("eacherMess")); const echartsTest = echarts.init(document.getElementById("eacherMess"));
// // pageInfo.dataListAlarmPage = spArr(
const dataList = dataListAlarm.value.map((item: any) => { // [
return { // {
name: item.enterpriseName, // name: "1",
type: "line", // type: "line",
stack: "Total", // stack: "Total",
smooth: true, // smooth: true,
symbol: "none", // symbol: "none",
data: item.dataList // data: [120, 132, 101, 134, 90, 230, 210]
}; // },
}); // {
// const dataList = [ // name: "2",
// { // type: "line",
// name: "1", // stack: "Total",
// type: "line", // smooth: true,
// stack: "Total", // symbol: "none",
// smooth: true, // data: [120, 99, 101, 78, 90, 230, 210]
// symbol: "none", // },
// data: [120, 132, 101, 134, 90, 230, 210] // {
// }, // name: "3",
// { // type: "line",
// name: "2", // stack: "Total",
// type: "line", // smooth: true,
// stack: "Total", // symbol: "none",
// smooth: true, // data: [120, 57, 101, 134, 78, 230, 210]
// symbol: "none", // },
// data: [120, 99, 101, 78, 90, 230, 210] // {
// }, // name: "4",
// { // type: "line",
// name: "3", // stack: "Total",
// type: "line", // smooth: true,
// stack: "Total", // symbol: "none",
// smooth: true, // data: [120, 42, 42, 14, 90, 230, 210]
// symbol: "none", // },
// data: [120, 57, 101, 134, 78, 230, 210] // {
// }, // name: "5",
// { // type: "line",
// name: "4", // stack: "Total",
// type: "line", // smooth: true,
// stack: "Total", // symbol: "none",
// smooth: true, // data: [120, 42, 42, 14, 90, 230, 210]
// symbol: "none", // }
// data: [120, 42, 42, 14, 90, 230, 210] // ],
// } // 4
// ]; // );
const dataList = pageInfo.dataListAlarmPage[pageInfo.page];
let option = { let option = {
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
@ -225,6 +245,8 @@ function getMessEchart() {
textStyle: { textStyle: {
color: "#fff" color: "#fff"
}, },
itemHeight: 8,
itemWidth: 8,
icon: "rect", icon: "rect",
data: dataList.map((item: any) => item.name), data: dataList.map((item: any) => item.name),
formatter: function (params: any) { formatter: function (params: any) {
@ -660,6 +682,18 @@ const getCountAlarmNumByEnterprise = async () => {
}); });
return prev; return prev;
}, []); }, []);
//
const dataList = dataListAlarm.value.map((item: any) => {
return {
name: item.enterpriseName,
type: "line",
stack: "Total",
smooth: true,
symbol: "none",
data: item.dataList
};
});
pageInfo.dataListAlarmPage = spArr(dataList, 4);
console.log("应急处置统计图", res); console.log("应急处置统计图", res);
getMessEchart(); getMessEchart();
}; };
@ -672,6 +706,17 @@ onMounted(async () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.right-dap {
width: 18px;
height: 18px;
background-image: url(@/assets/images/right-dap.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 4px;
right: 25px;
cursor: pointer;
}
.title-tabs { .title-tabs {
width: initial !important; width: initial !important;
display: flex; display: flex;

View File

@ -39,9 +39,15 @@
<span></span> <span></span>
</div> </div>
<div class="count-div-item"> <div class="count-div-item">
<span>相较上月{{ statScore.radio > 0 ? '上升' + statScore.radio : '下降' + (statScore.radio && statScore.radio.toString().substr(1)) }} %</span> <span
<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? '↑' >相较上月{{
: '↓' }} </span> statScore.radio > 0
? "上升" + (statScore.radio ? statScore.radio : 0)
: "下降" + (statScore.radio ? statScore.radio.toString().substr(1) : 0)
}}
%</span
>
<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? "↑" : "↓" }} </span>
</div> </div>
</div> </div>
<div class="score-div" @click="openDialogData({ index: 9, title: '月度安全综合评分' })"> <div class="score-div" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
@ -53,28 +59,26 @@
</div> </div>
<div class="classify-div"> <div class="classify-div">
<div class="classify-div-item" @click="openDialogData({ index: 1, title: '危大工程' })"> <div class="classify-div-item" @click="openDialogData({ index: 1, title: '危大工程' })">
<span <span style="font-size: 12px">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
style="font-size: 12px;">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })"> <div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })">
<span <span style="font-size: 12px">安全教育&nbsp;&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
style="font-size: 12px;">安全教育&nbsp;&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
</div> </div>
<div class="classify-div-item" style="width: 280px;" @click="openDialogData({ index: 3, title: '影响进度计划因素' })"> <div class="classify-div-item" style="width: 280px" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
<span <span style="font-size: 12px">影响进度计划因素&nbsp;&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
style="font-size: 12px;">影响进度计划因素&nbsp;&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })"> <div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
<span <span style="font-size: 12px"
style="font-size: 12px;">风险统计&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span> >风险统计&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })"> <div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
<span <span style="font-size: 12px"
style="font-size: 12px;">安全隐患&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span> >安全隐患&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })"> <div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
<span <span style="font-size: 12px">AI警报&nbsp;&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
style="font-size: 12px;">AI警报&nbsp;&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
</div> </div>
</div> </div>
<div class="background-title"> <div class="background-title">
@ -96,7 +100,7 @@ import { selectLiveVideoListApi } from "@/api/modules/video";
import ckplayerComp from "./ckplayerComp.vue"; import ckplayerComp from "./ckplayerComp.vue";
import { COMPANY } from "@/config/config"; import { COMPANY } from "@/config/config";
const emits = defineEmits(["openDialog"]) const emits = defineEmits(["openDialog"]);
const store = GlobalStore(); const store = GlobalStore();
const videoList = ref([] as any); const videoList = ref([] as any);
// ts // ts
@ -111,8 +115,8 @@ const props = withDefaults(defineProps<Props>(), {
const projectData = ref({} as any); const projectData = ref({} as any);
// //
const openDialogData = (obj: any) => { const openDialogData = (obj: any) => {
emits("openDialog", obj) emits("openDialog", obj);
} };
watch( watch(
() => props.projectData, () => props.projectData,
newVal => { newVal => {
@ -150,14 +154,14 @@ const getVideoList = async () => {
let res: any = await selectLiveVideoListApi({ let res: any = await selectLiveVideoListApi({
projectSn: store.sn projectSn: store.sn
}); });
console.log(res, '445566') console.log(res, "445566");
if (res.result && res.result.extend1) { if (res.result && res.result.extend1) {
videoList.value = JSON.parse(res.result.extend1).result.videoList; videoList.value = JSON.parse(res.result.extend1).result.videoList;
console.log(videoList.value, '112233') console.log(videoList.value, "112233");
// 使 // 使
setTimeout(() => { setTimeout(() => {
// video // video
var videos = document.querySelectorAll(".href-content video") var videos = document.querySelectorAll(".href-content video");
// var videos = document.getElementsByTagName("video"); // var videos = document.getElementsByTagName("video");
// video // video
for (var i = 0; i < videos.length; i++) { for (var i = 0; i < videos.length; i++) {
@ -172,24 +176,23 @@ let statsDirectorateBigScreen = ref({} as any);
//centerTop //centerTop
const getStatsDirectorateBigScreen = async () => { const getStatsDirectorateBigScreen = async () => {
const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn }); const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn });
statsDirectorateBigScreen.value = res.result statsDirectorateBigScreen.value = res.result;
}; };
let statScore = ref({ let statScore = ref({
dangerEngScore: 0, dangerEngScore: 0,
hiddenDangerScore: 0, hiddenDangerScore: 0,
aiScore: 0, aiScore: 0,
riskScore: 0, riskScore: 0,
total:0, total: 0,
lastMonthTotal:0, lastMonthTotal: 0
} as any); } as any);
//centerTop //centerTop
const getStatScore = async () => { const getStatScore = async () => {
const res = await getStatScoreApi({ projectSn: store.sn }); const res = await getStatScoreApi({ projectSn: store.sn });
console.log("获取项目信息6666666666666666666666666666666666", res); console.log("获取项目信息6666666666666666666666666666666666", res);
statScore.value = res.result statScore.value = res.result;
}; };
function boxStyle(item: any) { function boxStyle(item: any) {
if (item.isActive) { if (item.isActive) {
let choiseStyle = { let choiseStyle = {
@ -210,7 +213,7 @@ function activeBtn(item: any) {
tabIndex.value = item.id; tabIndex.value = item.id;
} }
showVideo.value = item.id; showVideo.value = item.id;
console.log(showVideo.value) console.log(showVideo.value);
} }
const uploadFail = () => { const uploadFail = () => {
@ -262,7 +265,7 @@ function saveOrDeleteVideo(url) {
// //
defineExpose({ defineExpose({
getQueryBySnData getQueryBySnData
}) });
onMounted(async () => { onMounted(async () => {
await getVideoList(); await getVideoList();
getQueryBySnData(); getQueryBySnData();
@ -273,7 +276,6 @@ onMounted(async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.centerTop { .centerTop {
// background-color: darkred; // background-color: darkred;
.top-content { .top-content {
height: 100%; height: 100%;
@ -310,7 +312,7 @@ onMounted(async () => {
} }
} }
>span { > span {
margin-top: 10px; margin-top: 10px;
color: white; color: white;
} }
@ -366,8 +368,8 @@ onMounted(async () => {
&-item { &-item {
font-size: 14px; font-size: 14px;
>span:nth-child(2) { > span:nth-child(2) {
color: #2983E1; color: #2983e1;
} }
} }
} }
@ -395,7 +397,7 @@ onMounted(async () => {
} }
} }
>span { > span {
color: white; color: white;
font-size: 18px; font-size: 18px;
} }
@ -436,7 +438,7 @@ onMounted(async () => {
position: absolute; position: absolute;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
color: #00E2F9; color: #00e2f9;
font-size: 14px; font-size: 14px;
bottom: -10px; bottom: -10px;
left: 0px; left: 0px;

View File

@ -2,7 +2,7 @@
<template> <template>
<div class="rightAll"> <div class="rightAll">
<div class="header"> <div class="header">
<div class="hLeft">隐患统计智能分析</div> <div class="hLeft">隐患智能统计分析</div>
<div class="hRight"> <div class="hRight">
<el-date-picker <el-date-picker
style="width: 85%" style="width: 85%"
@ -31,8 +31,8 @@
</div> </div>
<div class="ctContent" style="position: relative"> <div class="ctContent" style="position: relative">
<div id="echartsSafe" style="width: 100%; height: 100%"></div> <div id="echartsSafe" style="width: 100%; height: 100%"></div>
<div class="safetext1">状态统计较昨日</div> <div class="safetext1" v-if="dataList.length == 0">状态统计较昨日</div>
<div class="safetext2">风险统计较昨日</div> <div class="safetext2" v-if="dataList.length == 0">风险统计较昨日</div>
<div class="notoDta" v-if="dataList.length == 0"> <div class="notoDta" v-if="dataList.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
@ -64,14 +64,14 @@
<div class="cubeIcon"></div> <div class="cubeIcon"></div>
<div class="cLeft title-tabs"> <div class="cLeft title-tabs">
<div class="title-color">风险走势图</div> <div class="title-color">风险走势图</div>
<div>隐患风险趋势预期</div> <div>隐患风险预测趋势</div>
</div> </div>
</div> </div>
<div class="cbHeaderLine"></div> <div class="cbHeaderLine"></div>
</div> </div>
<div class="ctContent cbContent" style="margin-top: 1%; height: 78%"> <div class="ctContent cbContent" style="margin-top: 1%; height: 78%">
<div id="eacherRisk" style="width: 100%; height: 100%"></div> <div id="eacherRisk" style="width: 100%; height: 100%"></div>
<div class="notoDta" v-if="dataList.length == 0"> <div class="notoDta" v-if="riskList.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
</div> </div>
@ -83,14 +83,14 @@
<div class="cubeIcon"></div> <div class="cubeIcon"></div>
<div class="cLeft title-tabs"> <div class="cLeft title-tabs">
<div class="title-color">特殊作业统计分析</div> <div class="title-color">特殊作业统计分析</div>
<div>特殊作业风险趋势预期</div> <div>特殊作业风险预测趋势</div>
</div> </div>
</div> </div>
<div class="cbHeaderLine"></div> <div class="cbHeaderLine"></div>
</div> </div>
<div class="ctContent" style="margin-top: 1%; height: 73%"> <div class="ctContent" style="margin-top: 1%; height: 73%">
<div id="eacherSpecial" style="width: 100%; height: 100%"></div> <div id="eacherSpecial" style="width: 100%; height: 100%"></div>
<div class="notoDta" v-if="dataList.length == 0"> <div class="notoDta" v-if="specialList.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
</div> </div>
@ -266,7 +266,7 @@ const onEchartsSafeTab = (type: number) => {
resultInfo.majorInfo.isNotQualified = 0; resultInfo.majorInfo.isNotQualified = 0;
emits("openDialog", resultInfo); emits("openDialog", resultInfo);
} else if (type == 2) { } else if (type == 2) {
resultInfo.title = "未销项"; resultInfo.title = "未销项";
resultInfo.majorInfo.isOverdueRectification = 0; resultInfo.majorInfo.isOverdueRectification = 0;
resultInfo.majorInfo.isNotQualified = 1; resultInfo.majorInfo.isNotQualified = 1;
emits("openDialog", resultInfo); emits("openDialog", resultInfo);
@ -339,7 +339,7 @@ function drawEchart() {
icon: "rect", icon: "rect",
type: "plain", type: "plain",
orient: "vertical", orient: "vertical",
right: "0%", right: "-1%",
top: "20%", top: "20%",
align: "left", align: "left",
itemGap: 14, itemGap: 14,
@ -403,10 +403,10 @@ function drawEchart() {
icon: "none", icon: "none",
type: "plain", type: "plain",
orient: "vertical", orient: "vertical",
left: "31%", left: "35%",
top: "20%", top: "20%",
align: "left", align: "left",
itemGap: 12, itemGap: 14,
itemWidth: 8, // itemWidth: 8, //
itemHeight: 7, // itemHeight: 7, //
symbolKeepAspect: false, symbolKeepAspect: false,
@ -983,8 +983,8 @@ const getSafeInfo = async () => {
obj.name = "低隐患"; obj.name = "低隐患";
obj.value = result.result.lowRiskNum; obj.value = result.result.lowRiskNum;
obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate; obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
obj.rectificationNum = result.result.closeNum; obj.rectificationNum = result.result.closeInspectionNum;
obj.rectificationNumJzrRate = result.result.closeNumJzrRate; obj.rectificationNumJzrRate = result.result.closeInspectionNumJzrRate;
obj.rectificationName = "合格"; obj.rectificationName = "合格";
} else if (index == 4) { } else if (index == 4) {
obj.name = "无"; obj.name = "无";
@ -1378,7 +1378,7 @@ watch(
const getInspectionRiskChart = async () => { const getInspectionRiskChart = async () => {
const res: any = await getInspectionRiskChartApi({ const res: any = await getInspectionRiskChartApi({
projectSn: store.sn, projectSn: store.sn,
type: 1 queryType: 1
}); });
console.log("风险走势图", res); console.log("风险走势图", res);
riskList.value = res.result; riskList.value = res.result;
@ -1410,7 +1410,7 @@ onMounted(async () => {
position: absolute; position: absolute;
top: 6%; top: 6%;
color: white; color: white;
left: 40%; left: 44%;
} }
.safetext2 { .safetext2 {
position: absolute; position: absolute;

View File

@ -4,7 +4,7 @@
<div class="header"> <div class="header">
<div class="cbHeaderInfo hLeft"> <div class="cbHeaderInfo hLeft">
<div class="cubeIcon"></div> <div class="cubeIcon"></div>
<div class="cLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">责任单位隐患整改统计</div> <div class="cLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">责任单位隐患整改统计</div>
</div> </div>
<!-- <div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div> --> <!-- <div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div> -->
<div class="hRight"> <div class="hRight">
@ -685,7 +685,7 @@ onMounted(async () => {
p { p {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
margin: -6% 37%; margin: -6% 30%;
} }
} }
} }