提交大屏
This commit is contained in:
parent
375c04f7f2
commit
6b6af7efe9
@ -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);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -621,6 +700,7 @@ onMounted(async () => {
|
||||
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;
|
||||
|
||||
@ -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>
|
||||
@ -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;
|
||||
@ -1506,7 +1506,7 @@ onMounted(async () => {
|
||||
|
||||
.content {
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
height: calc(100% - 100px);
|
||||
|
||||
.contentTop {
|
||||
margin-top: 10px;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user