提交大屏

This commit is contained in:
X_Rian 2024-06-03 16:55:51 +08:00
parent 375c04f7f2
commit 6b6af7efe9
4 changed files with 263 additions and 167 deletions

View File

@ -109,3 +109,13 @@ export const getInspectionRiskChartApi = (params: {}) => {
export const getSpecialCountAllSpecialApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/xzSpecial/countAllSpecial`, params);
};
// 应急类型统计(今日)
export const getCountEmergencyTypedApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countEmergencyTyped`, params);
};
// 应急处置(近七日)
export const getCountAlarmNumByEnterpriseApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countAlarmNumByEnterprise`, params);
};

View File

@ -5,7 +5,7 @@
<div class="cbHeaderInfo">
<!-- <div class="cubeIcon"></div> -->
<div class="cLeft title-tabs">
<div class="title-color">应急处置</div>
<div class="title-color">应急处置近七天</div>
<div>事故风险趋势预期</div>
</div>
</div>
@ -118,9 +118,9 @@
<script setup lang="ts">
import { getNoticeListApi } from "@/api/modules/projectOverview";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import Card from "@/components/card.vue";
import { ref, watch, onMounted } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
// import Card from "@/components/card.vue";
import { ref, onMounted } from "vue";
import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
@ -166,24 +166,77 @@ const getNoticeList = async () => {
console.log("================center================", listData.value);
};
const dataListAlarm = ref([]);
//
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]
// }
// ];
let option = {
tooltip: {
trigger: "axis"
},
// legend: {
// x: "right",
// textStyle: {
// color: "#fff"
// },
// itemHeight: 10,
// icon: "roundRect",
// data: ["", "", "", ""]
// },
legend: {
x: "center",
textStyle: {
color: "#fff"
},
icon: "rect",
data: 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%",
@ -195,18 +248,9 @@ function getMessEchart() {
xAxis: {
type: "category",
boundaryGap: false,
data: ["中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司"],
data: ["5.30", "5.31", "6.1", "6.2", "6.3", "6.4"],
axisLabel: {
color: "#fff",
formatter: function (params: any) {
let val = "";
if (params.length > 4) {
val = params.substr(0, 4) + "...";
return val;
} else {
return params;
}
}
color: "#fff"
},
axisTick: {
show: false
@ -242,41 +286,32 @@ function getMessEchart() {
}
// 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: [
{
name: "重大风险",
type: "line",
stack: "Total",
smooth: true,
symbol: "none",
data: [120, 132, 101, 134, 90, 230, 210]
}
]
// 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", () => {
@ -318,51 +353,53 @@ function Pie() {
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)"
}
}
]);
// 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: []
});
function getMessCountEchart() {
let echartsTest = echarts.init(document.getElementById("eacherMessCount"));
let option = {
@ -370,7 +407,7 @@ function getMessCountEchart() {
trigger: "item"
},
title: {
text: 120,
text: messCountType.value.count,
// text: '100%',
subtext: "今日应急次数",
x: "24%",
@ -404,7 +441,7 @@ function getMessCountEchart() {
itemHeight: 7, //
symbolKeepAspect: false,
textStyle: {
color: "#000",
color: "#fff",
rich: {
name: {
verticalAlign: "right",
@ -419,22 +456,20 @@ function getMessCountEchart() {
}
}
},
data: dataList2.value.map(item => {
data: messCountType.value.data.map((item: any) => {
if (item.show) {
return item.name;
}
}),
formatter: function (data: any) {
if (dataList2.value && dataList2.value.length) {
for (var i = 0; i < dataList2.value.length; i++) {
if (data === dataList2.value[i].name) {
var value = dataList2.value[i].value;
var percentage = value + "%";
return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}";
}
}
}
}
})
// formatter: function (params: any) {
// let val = "";
// if (params.length > 4) {
// val = params.substr(0, 5) + "...";
// return val;
// } else {
// return params;
// }
// }
},
series: [
// 线
@ -565,7 +600,7 @@ function getMessCountEchart() {
labelLine: {
show: false
},
data: dataList2.value
data: messCountType.value.data
},
{
type: "pie",
@ -585,10 +620,54 @@ function getMessCountEchart() {
});
}
const getMessCountEchartType = async () => {
const res: any = await getCountEmergencyTypedApi({
projectSn: store.sn,
type: 1
});
console.log("应急统计图", res);
messCountType.value.data = res.result.data.map((item: any) => {
return {
...item,
value: item.count,
show: true,
itemStyle: {
normal: {
// color: "#01d6f4",
borderWidth: 20
}
}
};
});
messCountType.value.count = res.result.count;
getMessCountEchart();
};
const getCountAlarmNumByEnterprise = async () => {
const res: any = await getCountAlarmNumByEnterpriseApi({
projectSn: store.sn,
type: 1
});
dataListAlarm.value = res.result.reduce((prev: any[], item: any) => {
console.log("1111", prev);
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;
}, []);
console.log("应急处置统计图", res);
getMessEchart();
};
onMounted(async () => {
await getNoticeList();
await getMessEchart();
await getMessCountEchart();
getCountAlarmNumByEnterprise();
getMessCountEchartType();
});
</script>
@ -610,17 +689,18 @@ onMounted(async () => {
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%);
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%);
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%;
@ -641,6 +721,7 @@ onMounted(async () => {
margin: -6% 30%;
}
}
.scroll {
height: 100%;
width: 100%;
@ -670,7 +751,7 @@ onMounted(async () => {
}
.ctContent {
height: 74%;
height: 85%;
// background-color: darkred;
}
}
@ -761,6 +842,7 @@ onMounted(async () => {
margin: 9px 0;
margin-left: 2px;
}
.itemHeadInner2 {
font-size: 16px;
border: 1px solid #f46649;
@ -771,6 +853,7 @@ onMounted(async () => {
margin: 9px 0;
margin-left: 2px;
}
.itemHeadInner3 {
font-size: 16px;
border: 1px solid #ecbe45;
@ -781,6 +864,7 @@ onMounted(async () => {
margin: 9px 0;
margin-left: 2px;
}
.itemHeadInner4 {
font-size: 16px;
border: 1px solid #5394f7;
@ -791,6 +875,7 @@ onMounted(async () => {
margin: 9px 0;
margin-left: 2px;
}
.itemHeadInner5 {
font-size: 16px;
border: 1px solid #9400d3;
@ -801,6 +886,7 @@ onMounted(async () => {
margin: 9px 0;
margin-left: 2px;
}
.itemHeadInner6 {
font-size: 16px;
border: 1px solid #00ced1;

View File

@ -16,7 +16,7 @@
</div>
</div>
<div class="content">
<div class="contentTop contentMiddle" style="height: 24%">
<div class="contentTop contentMiddle" style="height: 28%">
<div class="ctHead" @click="onEchartsSafeTab(1)">
<div>
重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
@ -55,10 +55,10 @@
</div>
</div>
</div> -->
<div class="contentTop contentMiddle" style="height: 23%; margin-top: 4px">
<div class="contentTop contentMiddle" style="height: 27%; margin-top: 10px">
<leftBottom @openDialog="openDialogData"></leftBottom>
</div>
<div class="contentTop contentBottom" style="height: 20.5%; margin-top: 10px">
<div class="contentTop contentBottom" style="height: 22.5%; margin-top: 10px">
<div class="cbHeader">
<div class="cbHeaderInfo">
<div class="cubeIcon"></div>
@ -391,7 +391,7 @@ function drawEchart() {
let percentage = dataList.value[i].greatFaultLevelNumJzrRate + "%";
const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
const templateString = greatFaultLevelNumJzrRate > 0 ? `color1|↑` : "color2|↓";
return "{name| " + data + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
return "{name| " + data + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
}
}
}
@ -457,7 +457,7 @@ function drawEchart() {
const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
//
return (
"{name| " + rectificationName + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
"{name| " + rectificationName + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
);
}
}
@ -998,18 +998,18 @@ const getSafeInfo = async () => {
dataList.value.push(obj);
}
questionTotal.value = result.result.dangerNum;
overdueMajorDangerCount.value = result.result.overdueRectificationNum;
overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
majorDangerCount.value = result.result.notCloseNum;
// overdueMajorDangerCount.value = result.result.overdueRectificationNum;
// overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
// majorDangerCount.value = result.result.notCloseNum;
// majorDangerRate.value = result.result.percent;
console.log("1111111111111", dataList.value);
// const res: any = await getCountDangerLevelApi({
// projectSn: store.sn,
// isOverdueRectification: 1,
// inspectStartTime: dateRange.value[0],
// inspectEndTime: dateRange.value[1]
// });
const res: any = await getCountDangerLevelApi({
projectSn: store.sn,
isOverdueRectification: 1,
inspectStartTime: dateRange.value[0],
inspectEndTime: dateRange.value[1]
});
// dataList.value = res.result.data.map((item: any, index: number) => {
// return {
// ...item,
@ -1026,10 +1026,10 @@ const getSafeInfo = async () => {
// questionTotal.value = res.result.count;
// console.log("", res);
// const filterResult = res.result.data.find((item: any) => item.enumType == 1);
const filterResult = res.result.data.find((item: any) => item.enumType == 1);
// overdueMajorDangerCount.value = filterResult.count;
// overdueMajorDangerRate.value = filterResult.percent;
overdueMajorDangerCount.value = filterResult.count;
overdueMajorDangerRate.value = filterResult.percent;
drawEchart();
};
@ -1312,20 +1312,20 @@ const qualityInfo = async () => {
inspectStartTime: dateRange.value[0],
inspectEndTime: dateRange.value[1]
});
dataList2.value = res.result.data.map((item: any, index: number) => {
return {
...item,
value: item.count,
show: true,
itemStyle: {
normal: {
color: classColorList.value[index],
borderWidth: 20
}
}
};
});
questionTotal.value = res.result.count;
// dataList2.value = res.result.data.map((item: any, index: number) => {
// return {
// ...item,
// value: item.count,
// show: true,
// itemStyle: {
// normal: {
// color: classColorList.value[index],
// borderWidth: 20
// }
// }
// };
// });
// questionTotal.value = res.result.count;
const filterResult = res.result.data.find((item: any) => item.enumType == 1);
majorDangerCount.value = filterResult.count;
@ -1435,14 +1435,14 @@ onMounted(async () => {
width: 140px;
text-align: center;
// background-color: #315296;
background: rgb(0,33,116);
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: rgb(0, 33, 116);
background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
}
}
@ -1506,7 +1506,7 @@ onMounted(async () => {
.content {
padding: 0 20px;
height: 100%;
height: calc(100% - 100px);
.contentTop {
margin-top: 10px;

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">
@ -555,7 +555,7 @@ onMounted(async () => {
// height: 10%;
.hLeft {
width: 50%;
width: 58%;
font-size: 20px;
font-weight: bold;
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
@ -565,7 +565,7 @@ onMounted(async () => {
}
.hRight {
width: 50%;
width: 42%;
}
}
@ -597,7 +597,7 @@ onMounted(async () => {
border-bottom: 1px solid #0059ff;
.hLeft {
width: 50%;
width: 58%;
font-size: 20px;
font-weight: bold;
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
@ -607,7 +607,7 @@ onMounted(async () => {
}
.hRight {
width: 50%;
width: 42%;
}
}