admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/commandScreen/commandCenter/centerBottom.vue
View File

@ -6,25 +6,26 @@
<!-- <div class="cubeIcon"></div> -->
<div class="cLeft title-tabs">
<div class="title-color">应急处置（近七天）</div>
<div>事故风险趋势预期</div>
<div>事故风险预测趋势</div>
</div>
</div>
<div class="cbHeaderLine" style="margin-top: 1%"></div>
</div>
<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 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="" />
<p>暂无数据</p>
</div> -->
</div>
</div>
<div style="width: 50%">
<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="" />
<p>暂无数据</p>
</div> -->
</div>
</div>
</div>
</div>
@ -119,7 +120,7 @@
import { getNoticeListApi } from "@/api/modules/projectOverview";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// 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 * as echarts from "echarts";
import { GlobalStore } from "@/stores";
@ -167,55 +168,74 @@ const getNoticeList = async () => {
console.log("================center================", listData.value);
};
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() {
console.log("我是应急处置11");
const echartsTest = echarts.init(document.getElementById("eacherMess"));
// 抽出企业
const dataList = dataListAlarm.value.map((item: any) => {
return {
name: item.enterpriseName,
type: "line",
stack: "Total",
smooth: true,
symbol: "none",
data: item.dataList
};
});
// const dataList = [
// {
// name: "中东责任有限公司1",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// name: "中东责任有限公司2",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 99, 101, 78, 90, 230, 210]
// },
// {
// name: "中东责任有限公司3",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 57, 101, 134, 78, 230, 210]
// },
// {
// name: "中东责任有限公司4",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 42, 42, 14, 90, 230, 210]
// }
// ];
// pageInfo.dataListAlarmPage = spArr(
// [
// {
// name: "中东责任有限公司1",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// name: "中东责任有限公司2",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 99, 101, 78, 90, 230, 210]
// },
// {
// name: "中东责任有限公司3",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 57, 101, 134, 78, 230, 210]
// },
// {
// name: "中东责任有限公司4",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 42, 42, 14, 90, 230, 210]
// },
// {
// name: "中东责任有限公司5",
// type: "line",
// stack: "Total",
// smooth: true,
// symbol: "none",
// data: [120, 42, 42, 14, 90, 230, 210]
// }
// ],
// 4
// );
const dataList = pageInfo.dataListAlarmPage[pageInfo.page];
let option = {
tooltip: {
trigger: "axis"
@ -225,6 +245,8 @@ function getMessEchart() {
textStyle: {
color: "#fff"
},
itemHeight: 8,
itemWidth: 8,
icon: "rect",
data: dataList.map((item: any) => item.name),
formatter: function (params: any) {
@ -660,6 +682,18 @@ const getCountAlarmNumByEnterprise = async () => {
});
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);
getMessEchart();
};
@ -672,6 +706,17 @@ onMounted(async () => {
</script>
<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 {
width: initial !important;
display: flex;

72
src/views/commandScreen/commandCenter/centerTop.vue
View File

@ -39,9 +39,15 @@
<span>分</span>
</div>
<div class="count-div-item">
<span>相较上月{{ statScore.radio > 0 ? '上升' + statScore.radio : '下降' + (statScore.radio && statScore.radio.toString().substr(1)) }} %</span>
<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? '↑'
: '↓' }} </span>
<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 class="score-div" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
@ -53,28 +59,26 @@
</div>
<div class="classify-div">
<div class="classify-div-item" @click="openDialogData({ index: 1, title: '危大工程' })">
<span
style="font-size: 12px;">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
<span style="font-size: 12px">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
</div>
<div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })">
<span
style="font-size: 12px;">安全教育&nbsp;&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
<span style="font-size: 12px">安全教育&nbsp;&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
</div>
<div class="classify-div-item" style="width: 280px;" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
<span
style="font-size: 12px;">影响进度计划因素&nbsp;&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
<div class="classify-div-item" style="width: 280px" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
<span style="font-size: 12px">影响进度计划因素&nbsp;&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
</div>
<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
<span
style="font-size: 12px;">风险统计&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
<span style="font-size: 12px"
>风险统计&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
>
</div>
<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
<span
style="font-size: 12px;">安全隐患&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
<span style="font-size: 12px"
>安全隐患&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
>
</div>
<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
<span
style="font-size: 12px;">AI警报&nbsp;&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
<span style="font-size: 12px">AI警报&nbsp;&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
</div>
</div>
<div class="background-title">
@ -96,7 +100,7 @@ import { selectLiveVideoListApi } from "@/api/modules/video";
import ckplayerComp from "./ckplayerComp.vue";
import { COMPANY } from "@/config/config";
const emits = defineEmits(["openDialog"])
const emits = defineEmits(["openDialog"]);
const store = GlobalStore();
const videoList = ref([] as any);
// ts
@ -111,8 +115,8 @@ const props = withDefaults(defineProps<Props>(), {
const projectData = ref({} as any);
// 打开弹窗
const openDialogData = (obj: any) => {
emits("openDialog", obj)
}
emits("openDialog", obj);
};
watch(
() => props.projectData,
newVal => {
@ -150,14 +154,14 @@ const getVideoList = async () => {
let res: any = await selectLiveVideoListApi({
projectSn: store.sn
});
console.log(res, '445566')
console.log(res, "445566");
if (res.result && res.result.extend1) {
videoList.value = JSON.parse(res.result.extend1).result.videoList;
console.log(videoList.value, '112233')
console.log(videoList.value, "112233");
// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
setTimeout(() => {
// 获取所有的 video 元素
var videos = document.querySelectorAll(".href-content video")
var videos = document.querySelectorAll(".href-content video");
// var videos = document.getElementsByTagName("video");
// 遍历所有的 video 元素
for (var i = 0; i < videos.length; i++) {
@ -172,24 +176,23 @@ let statsDirectorateBigScreen = ref({} as any);
//获取centerTop底部按钮显示数据
const getStatsDirectorateBigScreen = async () => {
const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn });
statsDirectorateBigScreen.value = res.result
statsDirectorateBigScreen.value = res.result;
};
let statScore = ref({
dangerEngScore: 0,
hiddenDangerScore: 0,
aiScore: 0,
riskScore: 0,
total:0,
lastMonthTotal:0,
total: 0,
lastMonthTotal: 0
} as any);
//获取centerTop底部按钮显示数据
const getStatScore = async () => {
const res = await getStatScoreApi({ projectSn: store.sn });
console.log("获取项目信息6666666666666666666666666666666666", res);
statScore.value = res.result
statScore.value = res.result;
};
function boxStyle(item: any) {
if (item.isActive) {
let choiseStyle = {
@ -210,7 +213,7 @@ function activeBtn(item: any) {
tabIndex.value = item.id;
}
showVideo.value = item.id;
console.log(showVideo.value)
console.log(showVideo.value);
}
const uploadFail = () => {
@ -262,7 +265,7 @@ function saveOrDeleteVideo(url) {
//将方法暴露给父组件
defineExpose({
getQueryBySnData
})
});
onMounted(async () => {
await getVideoList();
getQueryBySnData();
@ -273,7 +276,6 @@ onMounted(async () => {
<style lang="scss" scoped>
.centerTop {
// background-color: darkred;
.top-content {
height: 100%;
@ -310,7 +312,7 @@ onMounted(async () => {
}
}
>span {
> span {
margin-top: 10px;
color: white;
}
@ -366,8 +368,8 @@ onMounted(async () => {
&-item {
font-size: 14px;
>span:nth-child(2) {
color: #2983E1;
> span:nth-child(2) {
color: #2983e1;
}
}
}
@ -395,7 +397,7 @@ onMounted(async () => {
}
}
>span {
> span {
color: white;
font-size: 18px;
}
@ -436,7 +438,7 @@ onMounted(async () => {
position: absolute;
text-align: center;
line-height: 50px;
color: #00E2F9;
color: #00e2f9;
font-size: 14px;
bottom: -10px;
left: 0px;

30
src/views/commandScreen/commandCenter/rightAll.vue
View File

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

4
src/views/commandScreen/components/leftBottom.vue
View File

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