1130 lines
29 KiB
Vue
1130 lines
29 KiB
Vue
<template>
|
||
<div class="centerBottom">
|
||
<div class="contentTop">
|
||
<div class="cbHeader">
|
||
<div class="cbHeaderInfo">
|
||
<!-- <div class="cubeIcon"></div> -->
|
||
<div class="cLeft title-tabs">
|
||
<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="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">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
<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="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cbHeader">
|
||
<div class="cbHeaderInfo">
|
||
<div class="cubeIcon"></div>
|
||
<!-- <div class="cLeft">公告提示</div> -->
|
||
<div class="cLeft">隐患检查推送</div>
|
||
</div>
|
||
<div class="cbHeaderLine"></div>
|
||
</div>
|
||
<div class="cbContent">
|
||
<div v-if="listData.length < 5 && listData.length !== 0">
|
||
<div class="item" v-for="(item, index) in listData" :key="index">
|
||
<div class="itemHead">
|
||
<div>
|
||
<!-- <div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && !JSON.parse(item.payload).overTime">未整改</div>
|
||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3 && !JSON.parse(item.payload).overTime">未复查</div>
|
||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4 && !JSON.parse(item.payload).overTime">未核验</div>
|
||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && JSON.parse(item.payload).overTime">超期未整改</div>
|
||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3 && JSON.parse(item.payload).overTime">超期未复查</div>
|
||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4 && JSON.parse(item.payload).overTime">超期未核验</div> -->
|
||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2">未整改</div>
|
||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3">未复查</div>
|
||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4">未核验</div>
|
||
<!-- <div class="itemHeadInner6" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 5">合格</div>
|
||
<div class="itemHeadInner3" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 6">已撤回</div>
|
||
<div class="itemHeadInner2" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 7">超期未关闭</div> -->
|
||
</div>
|
||
<div v-if="JSON.parse(item.payload).level">
|
||
<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
|
||
<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
|
||
<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
|
||
<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
|
||
</div>
|
||
<div v-else>
|
||
<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
|
||
<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
|
||
<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
|
||
</div>
|
||
<div class="itemContent">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
|
||
<text style="margin-left: 10px">{{ item.msg }}</text>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="itemContent">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
|
||
{{item.content}}
|
||
</el-tooltip>
|
||
</div> -->
|
||
<div class="itemTime">
|
||
<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<vue3-seamless-scroll
|
||
v-if="listData.length > 0"
|
||
:speed="1"
|
||
:list="listData"
|
||
:limitScrollNum="5"
|
||
:step="0.3"
|
||
:hover="true"
|
||
class="scroll"
|
||
>
|
||
<div class="item" v-for="(item, index) in listData" :key="index">
|
||
<div class="itemHead">
|
||
<div>
|
||
<!-- <div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && !JSON.parse(item.payload).overTime">未整改</div>
|
||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3 && !JSON.parse(item.payload).overTime">未复查</div>
|
||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4 && !JSON.parse(item.payload).overTime">未核验</div>
|
||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && JSON.parse(item.payload).overTime">超期未整改</div>
|
||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3 && JSON.parse(item.payload).overTime">超期未复查</div>
|
||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4 && JSON.parse(item.payload).overTime">超期未核验</div> -->
|
||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2">未整改</div>
|
||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3">未复查</div>
|
||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4">未核验</div>
|
||
<!-- <div class="itemHeadInner6" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 5">合格</div>
|
||
<div class="itemHeadInner3" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 6">已撤回</div>
|
||
<div class="itemHeadInner2" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 7">超期未关闭</div> -->
|
||
</div>
|
||
<div v-if="JSON.parse(item.payload).level">
|
||
<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
|
||
<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
|
||
<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
|
||
<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
|
||
</div>
|
||
<div v-else>
|
||
<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
|
||
<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
|
||
<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
|
||
</div>
|
||
<div class="itemContent" style="margin-left: 10px">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
|
||
<div>{{ item.msg }}</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="itemContent">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
|
||
{{item.content}}
|
||
</el-tooltip>
|
||
</div> -->
|
||
<div class="itemTime">
|
||
<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
|
||
</div>
|
||
</div>
|
||
</vue3-seamless-scroll>
|
||
</div>
|
||
<div class="notoDta" v-if="listData.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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";
|
||
import { ref, onMounted, reactive } from "vue";
|
||
import { getRiskTrendByProjectApi, getRiskTrendByMainEnterpriseApi } from "@/api/modules/agjtCommandApi";
|
||
import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview";
|
||
import * as echarts from "echarts";
|
||
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",
|
||
fontSize: 12,
|
||
isLegend: "right",
|
||
radarCenter: ["34%", "50%"],
|
||
radius: "63%",
|
||
dataList: [
|
||
{
|
||
value: [0, 0, 0, 0, 0],
|
||
name: "项目事故风险概率预测"
|
||
// areaStyle: {}
|
||
}
|
||
],
|
||
indicator: [
|
||
{ name: "恶劣天气占比", max: 1 },
|
||
{ name: "人员风险概率", max: 1 },
|
||
{ name: "特殊作业风险概率", max: 1 },
|
||
{ name: "月度安全评分", max: 1 },
|
||
{ name: "隐患未闭合占比", max: 1 }
|
||
],
|
||
titleInfo: {
|
||
titleLeft: "未来三天事故风险概率预测",
|
||
titleRight: "查看各企业应急事故风险概率预测",
|
||
percentage: 0
|
||
},
|
||
workerFlag: true,
|
||
workerList: [] as any[]
|
||
});
|
||
//切换tab
|
||
const handleTab = (val: number) => {
|
||
if (val == activeIfo.activeIndex) return;
|
||
if (activeIfo.activeIndex == 1) {
|
||
activeIfo.activeIndex = val;
|
||
getCountAlarmNumByEnterprise(false);
|
||
} else if (activeIfo.activeIndex == 0) {
|
||
getRiskTrendByProject(false, 1);
|
||
}
|
||
};
|
||
const emits = defineEmits(["openDialog"]);
|
||
|
||
// 打开弹窗
|
||
const openDialogData = async () => {
|
||
console.log("我打开了!!!!!!!!!!11");
|
||
// 人员风险趋势
|
||
const res: any = await getRiskTrendByMainEnterpriseApi(
|
||
{
|
||
projectSn: store.sn
|
||
},
|
||
false
|
||
);
|
||
const resultList = [] as any[];
|
||
if (res.result) {
|
||
console.log("事故风险预测趋势", res.result);
|
||
res.result.forEach((item: any, index: number) => {
|
||
resultList.push({
|
||
id: `list${index}`,
|
||
fontSize: 12,
|
||
radius: "70%",
|
||
isLegend: "top",
|
||
radarCenter: ["50%", "60%"],
|
||
dataList: [
|
||
{
|
||
value: [
|
||
item.severeWeatherRate,
|
||
item.totalPersonnelRiskRate,
|
||
item.totalSpecialOperationsRiskRate,
|
||
item.monthlySafetyScoreRate,
|
||
item.unclosedHiddenDangersRate
|
||
],
|
||
name: item.enterpriseName
|
||
// areaStyle: {}
|
||
}
|
||
],
|
||
indicator: [
|
||
{ name: "恶劣天气占比", max: 1 },
|
||
{ name: "人员风险概率", max: 1 },
|
||
{ name: "特殊作业风险概率", max: 1 },
|
||
{ name: "月度安全评分", max: 1 },
|
||
{ name: "隐患未闭合占比", max: 1 }
|
||
],
|
||
titleInfo: {
|
||
titleLeft: "未来三天事故风险概率预测",
|
||
// titleRight: "查看各企业应急事故风险概率预测",
|
||
percentage: item.area
|
||
},
|
||
workerFlag: true,
|
||
workerList: [
|
||
item.severeWeatherRate,
|
||
item.totalPersonnelRiskRate,
|
||
item.totalSpecialOperationsRiskRate,
|
||
item.monthlySafetyScoreRate,
|
||
item.unclosedHiddenDangersRate
|
||
]
|
||
});
|
||
});
|
||
}
|
||
const resultInfo = {
|
||
index: 11,
|
||
title: "总包单位应急事故概率分析",
|
||
radarType: 2,
|
||
randerList: resultList
|
||
};
|
||
emits("openDialog", resultInfo);
|
||
};
|
||
|
||
// 事故风险预测趋势
|
||
const getRiskTrendByProject = async (showLoading: boolean, val: number) => {
|
||
const res: any = await getRiskTrendByProjectApi(
|
||
{
|
||
projectSn: store.sn
|
||
},
|
||
showLoading
|
||
);
|
||
if (res.result) {
|
||
console.log("事故风险预测趋势", res.result);
|
||
randerInfo.dataList[0].value = [
|
||
res.result.severeWeatherRate,
|
||
res.result.totalPersonnelRiskRate,
|
||
res.result.totalSpecialOperationsRiskRate,
|
||
res.result.monthlySafetyScoreRate,
|
||
res.result.unclosedHiddenDangersRate
|
||
];
|
||
randerInfo.workerList = [
|
||
res.result.severeWeatherRate,
|
||
res.result.totalPersonnelRiskRate,
|
||
res.result.totalSpecialOperationsRiskRate,
|
||
res.result.monthlySafetyScoreRate,
|
||
res.result.unclosedHiddenDangersRate
|
||
];
|
||
randerInfo.titleInfo.percentage = res.result.area;
|
||
}
|
||
activeIfo.activeIndex = val;
|
||
};
|
||
|
||
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);
|
||
|
||
// listData.value = res.result.records;
|
||
// listData.value = res.result.page.records;
|
||
console.log(333333333, 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 ? "整改！":""
|
||
// enterpriseName
|
||
let tempMsg = `【${item.mainEnterpriseName}】的${item.regionName}责任区域内有一条${item.dangerItemContent}的隐患${statusMsg1}，请注意监督${statusMsg2}`;
|
||
return {
|
||
msg: tempMsg,
|
||
payload: JSON.stringify({ status: item.status, level: item.level, time: item.inspectTime, overTime: item.overTime })
|
||
};
|
||
});
|
||
// listData.value.push({
|
||
// accountId:"1779721457571291137",
|
||
// id:"1789601398432559107",
|
||
// imageUrl:null,
|
||
// isRead:0,
|
||
// msg:"区域1检查到一条四川成润智慧科技的雨落管安全隐患问题，请注意监督整改！",
|
||
// payload:"{\"level\":4,\"time\":\"2024-05-12 18:19:40\"}",
|
||
// sendTime: "2024-05-12 18:19:57",
|
||
// title: "大屏通知",
|
||
// type: "31",
|
||
// })
|
||
};
|
||
const dataListAlarm = ref([]);
|
||
const pageInfo = reactive({
|
||
dataListAlarmPage: [] as any[],
|
||
page: 0,
|
||
dataListAlarm: []
|
||
});
|
||
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() {
|
||
const echartsTest = echarts.init(document.getElementById("eacherMess"));
|
||
const dataList = pageInfo.dataListAlarmPage[pageInfo.page];
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis"
|
||
},
|
||
legend: {
|
||
x: "center",
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemHeight: 8,
|
||
itemWidth: 8,
|
||
icon: "rect",
|
||
data: dataList && dataList.map((item: any) => item.name),
|
||
formatter: function (params: any) {
|
||
let val = "";
|
||
if (params.length > 4) {
|
||
val = params.substr(0, 4) + "...";
|
||
return val;
|
||
} else {
|
||
return params;
|
||
}
|
||
}
|
||
},
|
||
color: ["#FF3232", "#FF9901", "#FFE500", "#3A3AE7"],
|
||
grid: {
|
||
left: "3%",
|
||
right: "8%",
|
||
bottom: "4%",
|
||
top: "18%",
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: pageInfo.dataListAlarm.map((item: any) => item.date),
|
||
axisLabel: {
|
||
color: "#fff"
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
// name: "数量",
|
||
nameTextStyle: {
|
||
color: "#fff"
|
||
},
|
||
axisLabel: {
|
||
color: "#fff"
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
}
|
||
// type: 'value'
|
||
},
|
||
// dataZoom: [
|
||
// {
|
||
// id: "dataZoomX",
|
||
// type: "inside",
|
||
// xAxisIndex: [0],
|
||
// brushSelect: false,
|
||
// zoomOnMouseWheel: false,
|
||
// moveOnMouseWheel: true, // 开启滚轮平移
|
||
// moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||
// preventDefaultMouseMove: false,
|
||
// // start:100,
|
||
// startValue: 1,
|
||
// endValue: 4,
|
||
// // 滚动条高度
|
||
// width: 8,
|
||
// // 滚动条显示位置
|
||
// // height: "80%",
|
||
// // 距离右边
|
||
// right: 3,
|
||
// // 控制手柄的尺寸
|
||
// handleSize: 0,
|
||
// filterMode: "empty"
|
||
// // top: "top",
|
||
// }
|
||
// ],
|
||
series: dataList
|
||
};
|
||
echartsTest.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
echartsTest.resize();
|
||
});
|
||
}
|
||
|
||
function Pie() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 150; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#7cf4f1",
|
||
borderWidth: 0,
|
||
borderColor: "#7f6546"
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)"
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
}
|
||
|
||
// let dataList2 = ref([
|
||
// {
|
||
// enumType: "",
|
||
// value: 30,
|
||
// show: true,
|
||
// name: "重大隐患",
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "#038cf5",
|
||
// borderWidth: 20
|
||
// }
|
||
// }
|
||
// },
|
||
// {
|
||
// enumType: "",
|
||
// value: 2,
|
||
// show: false,
|
||
// name: "",
|
||
// itemStyle: {
|
||
// color: "rgba(0,0,0,0)"
|
||
// }
|
||
// },
|
||
// {
|
||
// value: 70,
|
||
// show: true,
|
||
// name: "一般隐患",
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "#01d6f4",
|
||
// borderWidth: 20
|
||
// }
|
||
// }
|
||
// },
|
||
// {
|
||
// enumType: "",
|
||
// value: 2,
|
||
// show: false,
|
||
// name: "",
|
||
// itemStyle: {
|
||
// color: "rgba(0,0,0,0)"
|
||
// }
|
||
// }
|
||
// ]);
|
||
const messCountType = ref({
|
||
count: 0,
|
||
data: [],
|
||
code: 200
|
||
});
|
||
function getMessCountEchart() {
|
||
let echartsTest = echarts.init(document.getElementById("eacherMessCount"));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
title: {
|
||
text: messCountType.value.count,
|
||
// text: '100%',
|
||
subtext: "今日应急次数",
|
||
x: "24%",
|
||
y: "center",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
// align: "center",
|
||
// width: "200px",
|
||
fontFamily: "sadigitalNumber"
|
||
},
|
||
subtextStyle: {
|
||
color: "#ccc",
|
||
fontSize: 12,
|
||
fontWeight: "normal"
|
||
// align: "center",
|
||
}
|
||
},
|
||
legend: {
|
||
selectedMode: true, // 取消图例上的点击事件
|
||
icon: "rect",
|
||
type: "plain",
|
||
orient: "vertical",
|
||
left: "55%",
|
||
top: "20%",
|
||
align: "left",
|
||
itemGap: 20,
|
||
itemWidth: 8, // 设置宽度
|
||
itemHeight: 7, // 设置高度
|
||
symbolKeepAspect: false,
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
name: {
|
||
verticalAlign: "right",
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#FFFFFF"
|
||
},
|
||
value: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
data: messCountType.value.data.map((item: any) => {
|
||
if (item.show) {
|
||
return item.name;
|
||
}
|
||
}),
|
||
formatter: function (params: any) {
|
||
// let val = "";
|
||
// if (params.length > 4) {
|
||
// val = params.substr(0, 5) + "...";
|
||
// return val;
|
||
// } else {
|
||
// return params;
|
||
// }
|
||
if (messCountType.value.data && messCountType.value.data.length) {
|
||
for (let i = 0; i < messCountType.value.data.length; i++) {
|
||
if (params === messCountType.value.data[i].name) {
|
||
return messCountType.value.data[i].name + "\t" + messCountType.value.data[i].count;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
// 外侧光线
|
||
{
|
||
name: "",
|
||
type: "gauge",
|
||
center: ["25%", "55%"],
|
||
radius: "80%",
|
||
startAngle: 235,
|
||
endAngle: -50,
|
||
min: 0,
|
||
max: 100,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: [
|
||
[
|
||
100 / 100,
|
||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#526277"
|
||
},
|
||
{
|
||
offset: 0.25,
|
||
color: "rgba(4, 14, 54,0.4)"
|
||
},
|
||
{
|
||
offset: 0.7,
|
||
color: "rgba(4, 14, 54,0.4)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#526277"
|
||
}
|
||
])
|
||
],
|
||
[1, "rgba(255,255,255,0)"]
|
||
]
|
||
}
|
||
},
|
||
|
||
axisTick: {
|
||
show: 0
|
||
},
|
||
splitLine: {
|
||
show: 0
|
||
},
|
||
axisLabel: {
|
||
show: 0
|
||
},
|
||
pointer: {
|
||
show: 0
|
||
},
|
||
detail: {
|
||
show: 0
|
||
}
|
||
},
|
||
{
|
||
name: "",
|
||
type: "gauge",
|
||
center: ["25%", "55%"],
|
||
radius: "80%",
|
||
startAngle: 245,
|
||
endAngle: -115,
|
||
min: 0,
|
||
max: 100,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: [
|
||
[
|
||
200 / 100,
|
||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0.8,
|
||
color: "#52bef0"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#13356b"
|
||
}
|
||
])
|
||
],
|
||
[1, "rgba(255,255,255,0)"]
|
||
]
|
||
}
|
||
},
|
||
|
||
axisTick: {
|
||
show: 0
|
||
},
|
||
splitLine: {
|
||
show: 0
|
||
},
|
||
axisLabel: {
|
||
show: 0
|
||
},
|
||
pointer: {
|
||
show: 0
|
||
},
|
||
detail: {
|
||
show: 0
|
||
}
|
||
},
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: [65, 75],
|
||
center: ["25%", "55%"],
|
||
hoverAnimation: true,
|
||
// padAngle: 20,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderWidth: 10
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: messCountType.value.data
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["57", "60"],
|
||
center: ["25%", "55%"],
|
||
label: {
|
||
show: false
|
||
},
|
||
|
||
data: Pie()
|
||
}
|
||
]
|
||
};
|
||
echartsTest.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
echartsTest.resize();
|
||
});
|
||
}
|
||
|
||
const getMessCountEchartType = async (showLoading: boolean) => {
|
||
const res: any = await getCountEmergencyTypedApi(
|
||
{
|
||
projectSn: store.sn,
|
||
type: 1
|
||
},
|
||
showLoading
|
||
);
|
||
messCountType.value.data = res.result.data.map((item: any) => {
|
||
return {
|
||
...item,
|
||
value: item.count,
|
||
show: true,
|
||
itemStyle: {
|
||
normal: {
|
||
// color: "#01d6f4",
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
};
|
||
});
|
||
messCountType.value.code = res.code;
|
||
messCountType.value.count = res.result.count;
|
||
getMessCountEchart();
|
||
};
|
||
|
||
const getCountAlarmNumByEnterprise = async (showLoading: boolean) => {
|
||
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);
|
||
if (findIndex == -1) {
|
||
prev.push({ ...ele, dataList: [ele.alarmNum] });
|
||
} else {
|
||
prev[findIndex].dataList.push(ele.alarmNum);
|
||
}
|
||
});
|
||
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);
|
||
pageInfo.dataListAlarm = res.result;
|
||
getMessEchart();
|
||
};
|
||
const setIntervalFn = (showLoading: boolean) => {
|
||
getNoticeList(showLoading);
|
||
if (activeIfo.activeIndex == 0) {
|
||
getCountAlarmNumByEnterprise(showLoading);
|
||
}
|
||
getMessCountEchartType(showLoading);
|
||
};
|
||
onMounted(async () => {
|
||
setIntervalFn(false);
|
||
// 定时三十秒刷新
|
||
setInterval(() => {
|
||
setIntervalFn(true);
|
||
}, 30000);
|
||
});
|
||
</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;
|
||
align-items: center;
|
||
// margin-left: 4%;
|
||
color: white !important;
|
||
|
||
> div {
|
||
// padding: 2px 0;
|
||
height: 13%;
|
||
// font-size: 16px;
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
line-height: 25px;
|
||
width: 140px;
|
||
text-align: center;
|
||
// background-color: #315296;
|
||
background: rgb(0, 33, 116);
|
||
background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.title-color {
|
||
// background-color: #1449b6;
|
||
background: rgb(0, 33, 116);
|
||
background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
|
||
}
|
||
}
|
||
|
||
.notoDta {
|
||
top: 50%;
|
||
// width: 50%;
|
||
// left: 40%;
|
||
position: absolute;
|
||
text-align: center;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
img {
|
||
width: 30%;
|
||
margin: 5% 22%;
|
||
}
|
||
|
||
p {
|
||
color: #fff;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
margin: -6% 30%;
|
||
}
|
||
}
|
||
|
||
.scroll {
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contentTop {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
height: 55%;
|
||
|
||
.ctHead {
|
||
background-color: #002f69;
|
||
padding-bottom: 5px;
|
||
color: #fff;
|
||
height: 13%;
|
||
font-size: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
cursor: pointer;
|
||
|
||
text {
|
||
font-size: 24px;
|
||
color: #fc4c4c;
|
||
}
|
||
}
|
||
|
||
.ctContent {
|
||
height: 85%;
|
||
// background-color: darkred;
|
||
}
|
||
}
|
||
|
||
.centerBottom {
|
||
background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
|
||
// background: #fff;
|
||
background-size: 100% 100%;
|
||
// width: 100%;
|
||
// height: 60%;
|
||
// background-color: #fff;
|
||
padding: 10px 20px;
|
||
position: relative;
|
||
|
||
// padding-top: 15px;
|
||
.cbHeader {
|
||
width: 100%;
|
||
height: 40px;
|
||
|
||
// background-color: darkred;
|
||
.cbHeaderInfo {
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.cLeft {
|
||
width: 50%;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.cubeIcon {
|
||
width: 36px;
|
||
height: 36px;
|
||
// background-color: #fff;
|
||
background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
// margin-left: -5px;
|
||
margin: 0 3px 0 -5px;
|
||
}
|
||
}
|
||
|
||
.cbHeaderLine {
|
||
height: 4px;
|
||
width: 100%;
|
||
// background-color: darkblue;
|
||
background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.cbContent {
|
||
width: 100%;
|
||
height: calc(45% - 55px);
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
// background: #fff;
|
||
.item {
|
||
width: 100%;
|
||
line-height: 110%;
|
||
display: flex;
|
||
// align-items: center;
|
||
// justify-content: flex-start;
|
||
justify-content: space-between;
|
||
// background-color: green;
|
||
color: #fff;
|
||
|
||
.itemHead {
|
||
white-space: nowrap;
|
||
display: flex;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
font-size: 16px;
|
||
width: 80%;
|
||
|
||
.itemHeadInner1 {
|
||
border: 1px solid #e02020;
|
||
box-shadow: 0 0 0 1px #e02020;
|
||
background: rgba(224, 32, 32, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
// margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.itemHeadInner2 {
|
||
font-size: 16px;
|
||
border: 1px solid #f46649;
|
||
box-shadow: 0 0 0 1px #f46649;
|
||
background: rgba(244, 102, 73, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
// margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.itemHeadInner3 {
|
||
font-size: 16px;
|
||
border: 1px solid #ecbe45;
|
||
box-shadow: 0 0 0 1px #ecbe45;
|
||
background: rgba(236, 190, 69, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
// margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.itemHeadInner4 {
|
||
font-size: 16px;
|
||
border: 1px solid #5394f7;
|
||
box-shadow: 0 0 0 1px #5394f7;
|
||
background: rgba(83, 148, 247, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
// margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.itemHeadInner5 {
|
||
font-size: 16px;
|
||
border: 1px solid #9400d3;
|
||
box-shadow: 0 0 0 1px #9400d3;
|
||
background: rgba(148, 0, 211, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
// margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.itemHeadInner6 {
|
||
font-size: 16px;
|
||
border: 1px solid #00ced1;
|
||
box-shadow: 0 0 0 1px #00ced1;
|
||
background: rgba(0, 206, 209, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
// margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
> div:not(.itemContent) {
|
||
margin-top: 10px;
|
||
}
|
||
.itemContent {
|
||
margin-left: 10px;
|
||
font-size: 15px;
|
||
// white-space: nowrap;
|
||
overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
white-space: normal;
|
||
width: 100%;
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
|
||
.itemTime {
|
||
// background-color: #fff;
|
||
width: 20%;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
.timeInfo {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
// margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|