feat：新增指挥部大屏雷达图展示
This commit is contained in:
parent
74c403ecee
commit
cabb608193
BIN
src/assets/images/commandScreen/radar-right.png
Normal file
BIN
src/assets/images/commandScreen/radar-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 455 B |
@ -5,14 +5,21 @@
|
||||
<div class="cbHeaderInfo">
|
||||
<!-- <div class="cubeIcon"></div> -->
|
||||
<div class="cLeft title-tabs">
|
||||
<div class="title-color">应急处置（近七天）</div>
|
||||
<div>事故风险预测趋势</div>
|
||||
<div
|
||||
:class="{ 'title-color': activeIfo.activeIndex == index }"
|
||||
v-for="(item, index) in activeIfo.activeTitleList"
|
||||
:key="item.id"
|
||||
@click="handleTab(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</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%; position: relative">
|
||||
<div class="ctContent" style="display: flex">
|
||||
<div style="width: 55%; position: relative" v-if="activeIfo.activeIndex == 0">
|
||||
<div id="eacherMess" style="width: 100%; height: 100%"></div>
|
||||
<div class="right-dap" @click="onPageMess" v-if="dataListAlarm.length != 0"></div>
|
||||
<div class="notoDta" v-if="dataListAlarm.length == 0">
|
||||
@ -20,7 +27,10 @@
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50%; position: relative">
|
||||
<div style="width: 55%; position: relative" v-else-if="activeIfo.activeIndex == 1">
|
||||
<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
|
||||
</div>
|
||||
<div style="width: 45%; position: relative">
|
||||
<div id="eacherMessCount" style="width: 100%; height: 100%"></div>
|
||||
<div class="notoDta" v-if="messCountType.code != 200">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
@ -145,6 +155,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
|
||||
import { getNoticeListApi } from "@/api/modules/projectOverview";
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
// import Card from "@/components/card.vue";
|
||||
@ -155,34 +166,92 @@ import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
|
||||
let listData = ref([]);
|
||||
const activeIfo = reactive({
|
||||
activeIndex: 0,
|
||||
activeTitleList: [
|
||||
{
|
||||
id: 1,
|
||||
title: "应急处置（近七天）"
|
||||
},
|
||||
{ id: 2, title: "事故风险预测趋势" }
|
||||
]
|
||||
});
|
||||
const randerInfo = reactive({
|
||||
id: "radarMap2",
|
||||
isLegend: "right",
|
||||
radarCenter: ["34%", "50%"],
|
||||
radius: "63%",
|
||||
dataList: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000],
|
||||
name: "项目事故风险概率预测"
|
||||
// areaStyle: {}
|
||||
}
|
||||
],
|
||||
indicator: [
|
||||
{ name: "恶劣天气占比", max: 6500 },
|
||||
{ name: "人员风险概率", max: 16000 },
|
||||
{ name: "特殊作业风险概率", max: 30000 },
|
||||
{ name: "月度安全评分", max: 38000 },
|
||||
{ name: "隐患未整改占比", max: 52000 }
|
||||
],
|
||||
titleInfo: {
|
||||
titleLeft: "未来三天事故风险概率预测",
|
||||
titleRight: "查看各企业应急事故风险概率预测",
|
||||
percentage: 80
|
||||
}
|
||||
});
|
||||
//切换tab
|
||||
const handleTab = (val: number) => {
|
||||
activeIfo.activeIndex = val;
|
||||
if (activeIfo.activeIndex == 0) {
|
||||
getCountAlarmNumByEnterprise(false);
|
||||
}
|
||||
};
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
|
||||
// 打开弹窗
|
||||
const openDialogData = () => {
|
||||
console.log("我打开了!!!!!!!!!!11");
|
||||
const resultInfo = {
|
||||
index: 11,
|
||||
title: "总包单位应急事故概率分析",
|
||||
radarType: 2
|
||||
};
|
||||
emits("openDialog", resultInfo);
|
||||
};
|
||||
|
||||
const getNoticeList = async (showLoading: boolean) => {
|
||||
// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
|
||||
// const res: any = await getNoticeListApi({ isBigScreen: 1, type: 32 }); // 公告
|
||||
const res: any = await getNoticeListApi({ orderBy: 2, projectSn: store.sn, status:60 }, showLoading);
|
||||
const res: any = await getNoticeListApi({ orderBy: 2, projectSn: store.sn, status: 60 }, showLoading);
|
||||
|
||||
// listData.value = res.result.records;
|
||||
// listData.value = res.result.page.records;
|
||||
listData.value = res.result.page.records.map((item: any) => {
|
||||
let statusMsg1 = item.status == 2 ? "未整改":
|
||||
item.status == 3 ? "未复查":
|
||||
item.status == 4 ? "未核验":""
|
||||
// item.status == 5 ? "合格":
|
||||
// item.status == 6 ? "已撤回":
|
||||
// item.status == 7 ? "超期未整改":""
|
||||
let statusMsg2 = item.status == 2 ? "整改！":
|
||||
item.status == 3 ? "复查！":
|
||||
item.status == 4 ? "核验！":""
|
||||
// item.status == 5 ? "合格":
|
||||
// item.status == 6 ? "已撤回":
|
||||
// item.status == 7 ? "整改！":""
|
||||
let tempMsg = item.enterpriseName + "的" + item.regionName + "责任区域内有一条" + item.dangerItemContent + "的隐患"
|
||||
+ statusMsg1 + "，请注意监督" + statusMsg2
|
||||
let statusMsg1 = item.status == 2 ? "未整改" : item.status == 3 ? "未复查" : item.status == 4 ? "未核验" : "";
|
||||
// item.status == 5 ? "合格":
|
||||
// item.status == 6 ? "已撤回":
|
||||
// item.status == 7 ? "超期未整改":""
|
||||
let statusMsg2 = item.status == 2 ? "整改！" : item.status == 3 ? "复查！" : item.status == 4 ? "核验！" : "";
|
||||
// item.status == 5 ? "合格":
|
||||
// item.status == 6 ? "已撤回":
|
||||
// item.status == 7 ? "整改！":""
|
||||
let tempMsg =
|
||||
item.enterpriseName +
|
||||
"的" +
|
||||
item.regionName +
|
||||
"责任区域内有一条" +
|
||||
item.dangerItemContent +
|
||||
"的隐患" +
|
||||
statusMsg1 +
|
||||
"，请注意监督" +
|
||||
statusMsg2;
|
||||
return {
|
||||
msg:tempMsg,
|
||||
payload: JSON.stringify({status:item.status, level:item.level, time:item.inspectTime,overTime:item.overTime})
|
||||
}
|
||||
})
|
||||
msg: tempMsg,
|
||||
payload: JSON.stringify({ status: item.status, level: item.level, time: item.inspectTime, overTime: item.overTime })
|
||||
};
|
||||
});
|
||||
// listData.value.push({
|
||||
// accountId:"1779721457571291137",
|
||||
// id:"1789601398432559107",
|
||||
@ -194,7 +263,6 @@ const getNoticeList = async (showLoading: boolean) => {
|
||||
// title: "大屏通知",
|
||||
// type: "31",
|
||||
// })
|
||||
|
||||
};
|
||||
const dataListAlarm = ref([]);
|
||||
const pageInfo = reactive({
|
||||
@ -403,7 +471,7 @@ function Pie() {
|
||||
const messCountType = ref({
|
||||
count: 0,
|
||||
data: [],
|
||||
code: 0
|
||||
code: 200
|
||||
});
|
||||
function getMessCountEchart() {
|
||||
let echartsTest = echarts.init(document.getElementById("eacherMessCount"));
|
||||
@ -633,10 +701,13 @@ function getMessCountEchart() {
|
||||
}
|
||||
|
||||
const getMessCountEchartType = async (showLoading: boolean) => {
|
||||
const res: any = await getCountEmergencyTypedApi({
|
||||
projectSn: store.sn,
|
||||
type: 1
|
||||
},showLoading);
|
||||
const res: any = await getCountEmergencyTypedApi(
|
||||
{
|
||||
projectSn: store.sn,
|
||||
type: 1
|
||||
},
|
||||
showLoading
|
||||
);
|
||||
messCountType.value.data = res.result.data.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
@ -656,10 +727,14 @@ const getMessCountEchartType = async (showLoading: boolean) => {
|
||||
};
|
||||
|
||||
const getCountAlarmNumByEnterprise = async (showLoading: boolean) => {
|
||||
const res: any = await getCountAlarmNumByEnterpriseApi({
|
||||
projectSn: store.sn,
|
||||
type: 1
|
||||
},showLoading);
|
||||
const res: any = await getCountAlarmNumByEnterpriseApi(
|
||||
{
|
||||
projectSn: store.sn,
|
||||
type: 1
|
||||
},
|
||||
showLoading
|
||||
);
|
||||
res.result = res.result && res.result.length > 0 ? res.result : [];
|
||||
dataListAlarm.value = res.result.reduce((prev: any[], item: any) => {
|
||||
item.list.forEach((ele: any) => {
|
||||
const findIndex = prev.findIndex((option: any) => option.enterpriseId == ele.enterpriseId);
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div class="center">
|
||||
<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop>
|
||||
<centerBottom class="centerBottom"></centerBottom>
|
||||
<centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom>
|
||||
</div>
|
||||
<div class="right">
|
||||
<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
|
||||
@ -177,8 +177,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.centerBottom {
|
||||
height: 45.85%;
|
||||
margin: 2% 0 0 0;
|
||||
height: 46.85%;
|
||||
margin: 1% 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
s<template>
|
||||
s
|
||||
<template>
|
||||
<div class="leftBottom">
|
||||
<div class="header">
|
||||
<div class="hLeft">项目人员考勤</div>
|
||||
@ -34,17 +35,22 @@ s<template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line2">
|
||||
<div :class="['line2Item', activeIndex === '0' ? 'activeTab' : '']" @click="handleTab('0')">总包出勤情况分析</div>
|
||||
<div :class="['line2Item', activeIndex === '1' ? 'activeTab' : '']" @click="handleTab('1')">人员风险趋势分析</div>
|
||||
<div :class="['line2Item', activeIndex == 0 ? 'activeTab' : '']" @click="handleTab(0)">总包出勤情况分析</div>
|
||||
<div :class="['line2Item', activeIndex === 1 ? 'activeTab' : '']" @click="handleTab(1)">人员风险趋势分析</div>
|
||||
</div>
|
||||
<div class="barContent" v-if="isFlag">
|
||||
<div id="bar" style="width: 98%; height: 100%" ref="bar"></div>
|
||||
</div>
|
||||
<div class="cbProcess" v-if="!isFlag">
|
||||
<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
|
||||
<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
|
||||
<p>暂无数据</p>
|
||||
<div class="barContent1" v-if="activeIndex == 0">
|
||||
<div class="barContent" v-if="isFlag">
|
||||
<div id="bar" style="width: 98%; height: 100%" ref="bar"></div>
|
||||
</div>
|
||||
<div class="cbProcess" v-if="!isFlag">
|
||||
<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
|
||||
<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="barContent1" v-else-if="activeIndex == 1">
|
||||
<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerBottom">
|
||||
@ -137,7 +143,7 @@ s<template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import ECharts from "vue-echarts";
|
||||
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
|
||||
@ -151,9 +157,49 @@ import type { TabsPaneContext, ElMessageBox } from "element-plus";
|
||||
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
|
||||
const store = GlobalStore();
|
||||
|
||||
const randerInfo = reactive({
|
||||
id: "radarMap1",
|
||||
isLegend: "right",
|
||||
radarCenter: ["34%", "50%"],
|
||||
radius: "65%",
|
||||
dataList: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||
name: "项目人员风险"
|
||||
// areaStyle: {}
|
||||
}
|
||||
],
|
||||
indicator: [
|
||||
{ name: "高龄人员总数", max: 6500 },
|
||||
{ name: "人员总数", max: 16000 },
|
||||
{ name: "未闭合隐患", max: 30000 },
|
||||
{ name: "特殊工种人员", max: 38000 },
|
||||
{ name: "平均安全绩效评分", max: 52000 },
|
||||
{ name: "平均培训通过率", max: 25000 }
|
||||
],
|
||||
titleInfo: {
|
||||
titleLeft: "未来三天人员风险概率预测",
|
||||
titleRight: "查看各企业人员风险概率预测",
|
||||
percentage: 1
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
|
||||
// 打开弹窗
|
||||
const openDialogData = () => {
|
||||
console.log("我打开了!!!!!!!!!!11");
|
||||
const resultInfo = {
|
||||
index: 11,
|
||||
title: "总包单位人员风险概率分析",
|
||||
radarType: 1
|
||||
};
|
||||
emits("openDialog", resultInfo);
|
||||
};
|
||||
const activeName = ref("总包出勤情况分析");
|
||||
const activeIndex = ref("0" as any);
|
||||
const activeIndex = ref(0 as any);
|
||||
//出勤人员数据
|
||||
let totalPerson = ref("" as any);
|
||||
//考勤日环比
|
||||
@ -197,17 +243,20 @@ const queryAttendanceOfEachCompany = async (showLoading: boolean) => {
|
||||
xData.value = projectCompanyWorkTotalList.value.map(item => item.enterpriseName.substring(0, 4));
|
||||
yData.value = projectCompanyWorkTotalList.value.map(item => item.attendancePersonNum);
|
||||
if (projectCompanyWorkTotalList.value.length > 0) {
|
||||
isFlag = true;
|
||||
isFlag.value = true;
|
||||
drawBar();
|
||||
} else {
|
||||
isFlag = false;
|
||||
isFlag.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//切换tab
|
||||
const handleTab = (val: string) => {
|
||||
const handleTab = (val: number) => {
|
||||
activeIndex.value = val;
|
||||
if (isFlag.value && activeIndex.value == 0) {
|
||||
queryAttendanceOfEachCompany(false);
|
||||
}
|
||||
};
|
||||
|
||||
//绘画柱状图
|
||||
@ -308,9 +357,11 @@ function drawBar() {
|
||||
if (!attendanceRhbRate) {
|
||||
attendanceRhbRate = "--";
|
||||
} else {
|
||||
if(attendanceRhbRate > 0) attendanceRhbRate = "<span style='color:blue;margin-right:5px'>↑</span>"+Math.abs(attendanceRhbRate)+"%"
|
||||
if(attendanceRhbRate < 0) attendanceRhbRate = "<span style='color:darkred;margin-right:5px'>↓</span>"+Math.abs(attendanceRhbRate)+"%"
|
||||
if(attendanceRhbRate == 0) attendanceRhbRate = "0%"
|
||||
if (attendanceRhbRate > 0)
|
||||
attendanceRhbRate = "<span style='color:blue;margin-right:5px'>↑</span>" + Math.abs(attendanceRhbRate) + "%";
|
||||
if (attendanceRhbRate < 0)
|
||||
attendanceRhbRate = "<span style='color:darkred;margin-right:5px'>↓</span>" + Math.abs(attendanceRhbRate) + "%";
|
||||
if (attendanceRhbRate == 0) attendanceRhbRate = "0%";
|
||||
// attendanceRhbRate = attendanceRhbRate + "%";
|
||||
}
|
||||
return (
|
||||
@ -495,8 +546,12 @@ onMounted(async () => {
|
||||
background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
|
||||
}
|
||||
}
|
||||
.barContent {
|
||||
|
||||
.barContent1 {
|
||||
height: calc(100% - 65px);
|
||||
.barContent {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctContent" style="position: relative">
|
||||
<div id="echartsSafe" style="width: 100%; height: 100%;transform:translateY(-13px)"></div>
|
||||
<div id="echartsSafe" style="width: 100%; height: 100%; transform: translateY(-13px)"></div>
|
||||
<div class="safetext1" v-if="dataList.length != 0">状态统计（较昨日）</div>
|
||||
<div class="safetext2" v-if="dataList.length != 0">风险统计（较昨日）</div>
|
||||
<div class="notoDta" v-if="dataCode != 200">
|
||||
@ -56,45 +56,63 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="contentTop contentMiddle" style="height: 27%; margin-top: 10px">
|
||||
<leftBottom @openDialog="openDialogData"></leftBottom>
|
||||
<leftBottom @openDialogData="openDialogData"></leftBottom>
|
||||
</div>
|
||||
<div class="contentTop contentBottom" style="height: 22.5%; margin-top: 10px">
|
||||
<div class="cbHeader">
|
||||
<div class="cbHeaderInfo">
|
||||
<div class="cubeIcon"></div>
|
||||
<div class="cLeft title-tabs">
|
||||
<div class="title-color">风险走势图</div>
|
||||
<div>隐患风险预测趋势</div>
|
||||
<div
|
||||
:class="{ 'title-color': activeIfo.activeIndex == index }"
|
||||
v-for="(item, index) in activeIfo.activeTitleList"
|
||||
:key="item.id"
|
||||
@click="handleTab(index, 1)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cbHeaderLine"></div>
|
||||
</div>
|
||||
<div class="ctContent cbContent" style="margin-top: 1%; height: 78%">
|
||||
<div v-if="activeIfo.activeIndex == 0" class="ctContent cbContent" style="margin-top: 1%; height: 78%">
|
||||
<div id="eacherRisk" style="width: 100%; height: 100%"></div>
|
||||
<div class="notoDta" v-if="riskList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="activeIfo.activeIndex == 1" class="ctContent cbContent" style="height: 78%">
|
||||
<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentTop contentBottom" style="margin-top: 4px">
|
||||
<div class="cbHeader">
|
||||
<div class="cbHeaderInfo">
|
||||
<div class="cubeIcon"></div>
|
||||
<div class="cLeft title-tabs">
|
||||
<div class="title-color">特殊作业统计分析</div>
|
||||
<div>特殊作业风险预测趋势</div>
|
||||
<div
|
||||
:class="{ 'title-color': activeIfo.activeIndex2 == index }"
|
||||
v-for="(item, index) in activeIfo.activeTitleList2"
|
||||
:key="item.id"
|
||||
@click="handleTab(index, 2)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cbHeaderLine"></div>
|
||||
</div>
|
||||
<div class="ctContent" style="margin-top: 1%; height: 73%">
|
||||
<div v-if="activeIfo.activeIndex2 == 0" class="ctContent" style="margin-top: 1%; height: 73%">
|
||||
<div id="eacherSpecial" style="width: 100%; height: 100%"></div>
|
||||
<div class="notoDta" v-if="specialList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="activeIfo.activeIndex2 == 1" class="ctContent" style="height: 73%">
|
||||
<radarMapOption :randerInfo="randerInfo2" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="contentBottom">
|
||||
<div class="cbHeader">
|
||||
@ -162,9 +180,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
|
||||
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
// import Card from "@/components/card.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { onMounted, ref, watch, reactive } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import leftBottom from "@/views/commandScreen/components/leftBottom.vue";
|
||||
import {
|
||||
@ -186,8 +205,99 @@ let questionTotal = ref(0 as any);
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
|
||||
// 打开弹窗
|
||||
const openDialogData = (obj: any) => {
|
||||
emits("openDialog", obj);
|
||||
const openDialogData = () => {
|
||||
console.log("我打开了!!!!!!!!!!11");
|
||||
const resultInfo = {
|
||||
index: 11,
|
||||
title: "总包单位安全隐患概率分析",
|
||||
radarType: 3
|
||||
};
|
||||
emits("openDialog", resultInfo);
|
||||
};
|
||||
|
||||
const activeIfo = reactive({
|
||||
activeIndex: 1,
|
||||
activeTitleList: [
|
||||
{
|
||||
id: 1,
|
||||
title: "风险走势图"
|
||||
},
|
||||
{ id: 2, title: "隐患风险预测趋势" }
|
||||
],
|
||||
activeIndex2: 0,
|
||||
activeTitleList2: [
|
||||
{
|
||||
id: 1,
|
||||
title: "特殊作业统计分析"
|
||||
},
|
||||
{ id: 2, title: "特殊作业风险预测趋势" }
|
||||
]
|
||||
});
|
||||
const randerInfo = reactive({
|
||||
id: "radarMap3",
|
||||
isLegend: "right",
|
||||
radarCenter: ["34%", "50%"],
|
||||
radius: "55%",
|
||||
dataList: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000],
|
||||
name: "项目安全隐患风险概率预测"
|
||||
// areaStyle: {}
|
||||
}
|
||||
],
|
||||
indicator: [
|
||||
{ name: "隐患未闭合", max: 6500 },
|
||||
{ name: "平均安全绩效评分", max: 16000 },
|
||||
{ name: "重大、较大隐患", max: 30000 },
|
||||
{ name: "隐患超期整改", max: 38000 }
|
||||
],
|
||||
titleInfo: {
|
||||
titleLeft: "未来三天安全隐患风险概率预测",
|
||||
titleRight: "查看各企业安全隐患风险概率预测",
|
||||
percentage: 80
|
||||
}
|
||||
});
|
||||
const randerInfo2 = reactive({
|
||||
id: "radarMap4",
|
||||
isLegend: "right",
|
||||
radarCenter: ["34%", "50%"],
|
||||
radius: "55%",
|
||||
dataList: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 6500, 6500, 18000, 18000],
|
||||
name: "恶劣天气影响风险概率预测"
|
||||
// areaStyle: {}
|
||||
}
|
||||
],
|
||||
indicator: [
|
||||
{ name: "动火作业", max: 6500 },
|
||||
{ name: "高处作业", max: 16000 },
|
||||
{ name: "盲板抽堵作业", max: 30000 },
|
||||
{ name: "受限空间作业", max: 38000 },
|
||||
{ name: "断路作业", max: 6500 },
|
||||
{ name: "临时用电", max: 16000 },
|
||||
{ name: "吊装安全作业", max: 30000 },
|
||||
{ name: "动土作业", max: 38000 }
|
||||
],
|
||||
titleInfo: {
|
||||
titleLeft: "未来三天特殊作业风险概率预测",
|
||||
// titleRight: "查看各企业特殊作业风险概率预测",
|
||||
percentage: 80
|
||||
}
|
||||
});
|
||||
//切换tab
|
||||
const handleTab = (val: number, type: number) => {
|
||||
if (type == 1) {
|
||||
activeIfo.activeIndex = val;
|
||||
if (activeIfo.activeIndex == 0) {
|
||||
getInspectionRiskChart(false);
|
||||
}
|
||||
} else if (type == 2) {
|
||||
activeIfo.activeIndex2 = val;
|
||||
if (activeIfo.activeIndex2 == 0) {
|
||||
getCountAllSpecial(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let dateRange = ref([] as any);
|
||||
@ -298,7 +408,7 @@ function drawEchart() {
|
||||
let option = {
|
||||
animation: false, // 取消动画
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
trigger: "item"
|
||||
// position: ['50%','50%']
|
||||
},
|
||||
title: {
|
||||
@ -803,43 +913,60 @@ function getSpecialEchart() {
|
||||
},
|
||||
// confine:true,
|
||||
// position:['50%','50%'],
|
||||
appendToBody:true,
|
||||
appendToBody: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: '3px'
|
||||
fontSize: "3px"
|
||||
},
|
||||
// backgroundColor: "#F3F3F3",
|
||||
extraCssText: "width:220px;white-space:pre-wrap;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);",
|
||||
formatter: function (params: any) {
|
||||
const obj = safeList[params.dataIndex];
|
||||
// 当鼠标悬停在柱子上时，显示实际数值和百分比
|
||||
return '<div>'+safeList[params.dataIndex].x+'</div>'+
|
||||
// return '<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：'+obj.xzGroundSafetNum+'</div>'+
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：'+obj.xzGroundSafetNum+'</div>'+
|
||||
'<div><span style="color:#91cc75;line-height:3px;font-weight:bolder;">●</span>用电安全作业：'+obj.xzTemporaryElectricitySafeNum+'</div></div>'+
|
||||
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fac858;line-height:3px;font-weight:bolder;">●</span>高处作业作业：'+obj.xzHighJobSafeNum+'</div>'+
|
||||
'<div><span style="color:#ee6666;line-height:3px;font-weight:bolder;">●</span>盲板抽堵作业：'+obj.xzBlindPlatePlugSafeNum+'</div></div>'+
|
||||
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#73c0de;line-height:3px;font-weight:bolder;">●</span>动火安全作业：'+obj.xzSpecialOperationFireSafetyNum+'</div>'+
|
||||
'<div><span style="color:#3ba272;line-height:3px;font-weight:bolder;">●</span>断路安全作业：'+obj.xzOpenCircuitSafeNum+'</div></div>'+
|
||||
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fc8452;line-height:3px;font-weight:bolder;">●</span>吊装安全作业：'+obj.xzHoistSafetyWorkNum+'</div>'+
|
||||
'<div><span style="color:#9a60b4;line-height:3px;font-weight:bolder;">●</span>受限空间作业：'+obj.xzLimitSpaceSafeNum+'</div></div>';
|
||||
return (
|
||||
"<div>" +
|
||||
safeList[params.dataIndex].x +
|
||||
"</div>" +
|
||||
// return '<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：'+obj.xzGroundSafetNum+'</div>'+
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：' +
|
||||
obj.xzGroundSafetNum +
|
||||
"</div>" +
|
||||
'<div><span style="color:#91cc75;line-height:3px;font-weight:bolder;">●</span>用电安全作业：' +
|
||||
obj.xzTemporaryElectricitySafeNum +
|
||||
"</div></div>" +
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fac858;line-height:3px;font-weight:bolder;">●</span>高处作业作业：' +
|
||||
obj.xzHighJobSafeNum +
|
||||
"</div>" +
|
||||
'<div><span style="color:#ee6666;line-height:3px;font-weight:bolder;">●</span>盲板抽堵作业：' +
|
||||
obj.xzBlindPlatePlugSafeNum +
|
||||
"</div></div>" +
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#73c0de;line-height:3px;font-weight:bolder;">●</span>动火安全作业：' +
|
||||
obj.xzSpecialOperationFireSafetyNum +
|
||||
"</div>" +
|
||||
'<div><span style="color:#3ba272;line-height:3px;font-weight:bolder;">●</span>断路安全作业：' +
|
||||
obj.xzOpenCircuitSafeNum +
|
||||
"</div></div>" +
|
||||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fc8452;line-height:3px;font-weight:bolder;">●</span>吊装安全作业：' +
|
||||
obj.xzHoistSafetyWorkNum +
|
||||
"</div>" +
|
||||
'<div><span style="color:#9a60b4;line-height:3px;font-weight:bolder;">●</span>受限空间作业：' +
|
||||
obj.xzLimitSpaceSafeNum +
|
||||
"</div></div>"
|
||||
);
|
||||
// return `动火安全作业：${obj.xzSpecialOperationFireSafetyNum}\n盲板抽堵作业：${obj.xzBlindPlatePlugSafeNum}\n动土安全作业：${obj.xzGroundSafetNum}\n高处作业作业：${obj.xzHighJobSafeNum}\n吊装安全作业：${obj.xzHoistSafetyWorkNum}\n受限空间作业：${obj.xzLimitSpaceSafeNum}\n断路安全作业：${obj.xzOpenCircuitSafeNum}\n用电安全作业：${obj.xzTemporaryElectricitySafeNum}`;
|
||||
}
|
||||
},
|
||||
legend:{
|
||||
show:true,
|
||||
itemWidth:10,
|
||||
itemHeight:5,
|
||||
legend: {
|
||||
show: true,
|
||||
itemWidth: 10,
|
||||
itemHeight: 5,
|
||||
// x:'right',
|
||||
textStyle:{
|
||||
fontSize:'3px',
|
||||
color:'#FFF'
|
||||
textStyle: {
|
||||
fontSize: "3px",
|
||||
color: "#FFF"
|
||||
},
|
||||
// x:'left',
|
||||
data: ["动土作业", "临时用电", "高处作业", "盲板抽堵","动火作业", "断路作业", "吊装作业", "受限空间"],
|
||||
data: ["动土作业", "临时用电", "高处作业", "盲板抽堵", "动火作业", "断路作业", "吊装作业", "受限空间"]
|
||||
// icon: 'circle'
|
||||
},
|
||||
grid: {
|
||||
@ -934,140 +1061,140 @@ function getSpecialEchart() {
|
||||
series: [
|
||||
//动土作业
|
||||
{
|
||||
name:'动土作业',
|
||||
name: "动土作业",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzGroundSafetNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#5470c6",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
emphasis: { focus: "series" }
|
||||
},
|
||||
//临时用电
|
||||
{
|
||||
name:'临时用电',
|
||||
name: "临时用电",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzTemporaryElectricitySafeNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#91cc75",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
emphasis: { focus: "series" }
|
||||
},
|
||||
//高处作业
|
||||
{
|
||||
name:'高处作业',
|
||||
name: "高处作业",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzHighJobSafeNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#fac858",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
emphasis: { focus: "series" }
|
||||
},
|
||||
//盲板抽堵
|
||||
{
|
||||
name:'盲板抽堵',
|
||||
name: "盲板抽堵",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzBlindPlatePlugSafeNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#ee6666",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
emphasis: { focus: "series" }
|
||||
},
|
||||
//动火作业
|
||||
{
|
||||
name:'动火作业',
|
||||
name: "动火作业",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzSpecialOperationFireSafetyNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#73c0de",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
emphasis: { focus: "series" }
|
||||
},
|
||||
//断路作业
|
||||
{
|
||||
name:'断路作业',
|
||||
name: "断路作业",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzOpenCircuitSafeNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#3ba272",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
emphasis: { focus: "series" }
|
||||
},
|
||||
//吊装作业
|
||||
{
|
||||
name:'吊装作业',
|
||||
name: "吊装作业",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzHoistSafetyWorkNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#fc8452",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
emphasis: { focus: "series" }
|
||||
},
|
||||
//受限空间
|
||||
{
|
||||
name:'受限空间',
|
||||
name: "受限空间",
|
||||
// data: safeList.map(item => item.y),
|
||||
data: specialList.value.map((item: any) => item.xzLimitSpaceSafeNum),
|
||||
type: "bar",
|
||||
barWidth: "65%",
|
||||
color: "#9a60b4",
|
||||
stack: 'total',
|
||||
stack: "total",
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
fontSize:'3px'
|
||||
textStyle: {
|
||||
fontSize: "3px"
|
||||
}
|
||||
},
|
||||
emphasis:{focus: 'series'}
|
||||
},
|
||||
emphasis: { focus: "series" }
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
@ -1651,7 +1778,7 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #0059ff;
|
||||
|
||||
.hLeft {
|
||||
@ -1666,12 +1793,14 @@ onMounted(async () => {
|
||||
|
||||
.hRight {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 20px;
|
||||
height: calc(100% - 100px);
|
||||
height: calc(100% - 80px);
|
||||
|
||||
.contentTop {
|
||||
margin-top: 10px;
|
||||
|
||||
182
src/views/commandScreen/components/radarMapOption.vue
Normal file
182
src/views/commandScreen/components/radarMapOption.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="radarMapOption">
|
||||
<div class="header">
|
||||
<div style="display: flex">
|
||||
<span>{{ props.randerInfo.titleInfo.titleLeft }}:</span>
|
||||
<div class="numberCard" v-for="(item, i) in props.randerInfo.titleInfo.percentage.toString()" :key="i">
|
||||
{{ item }}
|
||||
</div>
|
||||
<span style="margin-left: 5px">%</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.randerInfo.titleInfo.titleRight"
|
||||
style="display: flex; align-items: center; cursor: pointer"
|
||||
@click="onRadarDialog()"
|
||||
>
|
||||
<span style="margin-left: 15px; color: #47bcec">{{ props.randerInfo.titleInfo.titleRight }}</span>
|
||||
<div class="radar-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div :id="props.randerInfo.id" style="width: 98%; height: 100%" ref="radarMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { GlobalStore } from "@/stores";
|
||||
// const store = GlobalStore();
|
||||
const emits = defineEmits(["openRadarDialog"]);
|
||||
const props = defineProps({
|
||||
randerInfo: {
|
||||
type: Object,
|
||||
// eslint-disable-next-line vue/require-valid-default-prop
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
function radarMapEchart() {
|
||||
let echartsTest = echarts.init(document.getElementById(props.randerInfo.id) as any);
|
||||
let isTooltip =
|
||||
props.randerInfo.indicator.length > 7
|
||||
? {
|
||||
extraCssText: "width:300px;white-space:pre-wrap;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);",
|
||||
formatter: function (params: any) {
|
||||
// const obj = safeList[params.dataIndex];
|
||||
|
||||
const textHTML = params.value
|
||||
.map((item: any, index: number) => {
|
||||
let htmlobj = "";
|
||||
if (index == 0) {
|
||||
htmlobj = "<div>" + params.name + "</div>";
|
||||
}
|
||||
if (index % 2 == 0) {
|
||||
htmlobj =
|
||||
htmlobj +
|
||||
'<div style="display:flex;justify-content:space-between;"><div>' +
|
||||
props.randerInfo.indicator[index].name +
|
||||
"：" +
|
||||
item +
|
||||
"</div>";
|
||||
} else {
|
||||
htmlobj = "<div>" + props.randerInfo.indicator[index].name + "：" + item + "</div></div>";
|
||||
}
|
||||
return htmlobj;
|
||||
})
|
||||
.join("");
|
||||
console.log(11111111, textHTML);
|
||||
return textHTML;
|
||||
}
|
||||
}
|
||||
: {};
|
||||
let isLegend =
|
||||
props.randerInfo.isLegend == "right"
|
||||
? {
|
||||
right: "0%",
|
||||
top: "25%",
|
||||
align: "left",
|
||||
position: "inside"
|
||||
}
|
||||
: { top: "2%" };
|
||||
let option = {
|
||||
legend: {
|
||||
...isLegend,
|
||||
textStyle: {
|
||||
color: "#AAAAAA",
|
||||
fontSize: 10
|
||||
},
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
data: props.randerInfo.dataList.map((item: any) => item.name)
|
||||
},
|
||||
color: ["#4992FF"],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
confine: true,
|
||||
...isTooltip
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
radius: props.randerInfo.radius ? props.randerInfo.radius : "75%",
|
||||
center: props.randerInfo.radarCenter,
|
||||
indicator: props.randerInfo.indicator,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#AAAAAA"
|
||||
}
|
||||
},
|
||||
axisName: {
|
||||
color: "#AAAAAA",
|
||||
fontSize: 10
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ["#3F3C54", "#373551"],
|
||||
shadowColor: "rgba(0, 0, 0, 0.2)",
|
||||
shadowBlur: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Budget vs spending",
|
||||
type: "radar",
|
||||
data: props.randerInfo.dataList
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
window.addEventListener("resize", () => {
|
||||
echartsTest.resize();
|
||||
});
|
||||
}
|
||||
|
||||
const onRadarDialog = () => {
|
||||
console.log("我被点击了!!!");
|
||||
emits("openRadarDialog");
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
radarMapEchart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.radarMapOption {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.header {
|
||||
color: #fff;
|
||||
padding-top: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
font-size: 11px;
|
||||
|
||||
.numberCard {
|
||||
font-size: 12px;
|
||||
padding: 0 8px;
|
||||
margin-left: 3px;
|
||||
font-weight: bold;
|
||||
color: #47bcec;
|
||||
background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.radar-right {
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
margin-left: 6px;
|
||||
background: url("@/assets/images/commandScreen/radar-right.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -52,6 +52,9 @@
|
||||
<div class="political-outlook" v-if="showIndex == 9">
|
||||
<monthSafeScore ref="historyAlarmList" tip="月度安全综合评分"></monthSafeScore>
|
||||
</div>
|
||||
<div class="political-outlook" v-if="showIndex == 11">
|
||||
<radarMapList ref="historyAlarmList" :randerDetail="postData" :tip="postData.title"></radarMapList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="showIndex == 10">
|
||||
@ -92,6 +95,7 @@ import safeEducationDialog from "./safe-education-dialog.vue";
|
||||
import majorHidder from "./major-hidder.vue";
|
||||
import monthSafeScore from "./month-safe-score.vue";
|
||||
import myMap from "./my-map.vue";
|
||||
import radarMapList from "./radar-map-list.vue";
|
||||
import { log } from "console";
|
||||
|
||||
// import { GlobalStore } from "@/stores";
|
||||
|
||||
90
src/views/commandScreen/dialogCompnnents/radar-map-list.vue
Normal file
90
src/views/commandScreen/dialogCompnnents/radar-map-list.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="political-outlook">
|
||||
<el-scrollbar class="scrollbar" ref="refScrollbar">
|
||||
<div class="radar-map_list">
|
||||
<div class="map-list" v-for="item in randerInfo.randerList" :key="item.id">
|
||||
<radarMapOption :randerInfo="item" />
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// import { GlobalStore } from "@/stores";
|
||||
// const store = GlobalStore();
|
||||
const props = defineProps(["tip", "randerDetail"]);
|
||||
|
||||
const randerInfo = reactive({
|
||||
randerList: [] as any[],
|
||||
randerTitleList: ["未来三天人员风险概率预测", "未来三天事故风险概率预测", "未来三天安全隐患风险概率预测"],
|
||||
moreScroll: true
|
||||
});
|
||||
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||||
onMounted(async () => {
|
||||
console.log(props.randerDetail);
|
||||
for (let index = 0; index < 4; index++) {
|
||||
randerInfo.randerList.push({
|
||||
id: `list${index}`,
|
||||
radius: "70%",
|
||||
isLegend: "top",
|
||||
radarCenter: ["50%", "60%"],
|
||||
dataList: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000],
|
||||
name: "项目事故风险概率预测"
|
||||
// areaStyle: {}
|
||||
}
|
||||
],
|
||||
indicator: [
|
||||
{ name: "恶劣天气占比", max: 6500 },
|
||||
{ name: "人员风险概率", max: 16000 },
|
||||
{ name: "特殊作业风险概率", max: 30000 },
|
||||
{ name: "月度安全评分", max: 38000 },
|
||||
{ name: "隐患未整改占比", max: 52000 }
|
||||
],
|
||||
titleInfo: {
|
||||
titleLeft: randerInfo.randerTitleList[props.randerDetail.radarType - 1],
|
||||
// titleRight: "查看各企业应急事故风险概率预测",
|
||||
percentage: 80
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
const scrollTop = e.target.scrollTop;
|
||||
const scrollHeight = e.target.scrollHeight;
|
||||
const clientHeight = e.target.clientHeight;
|
||||
// 向上加载更多
|
||||
if (scrollTop >= scrollHeight - clientHeight - 1) {
|
||||
if (randerInfo.moreScroll) {
|
||||
// getMemberCountList("more");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.political-outlook {
|
||||
height: 97%;
|
||||
margin: 50px 60px 0;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
.radar-map_list {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.map-list {
|
||||
width: 33%;
|
||||
height: 290px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user