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

提交大屏

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

10
src/api/modules/projectOverview.ts
View File

@ -109,3 +109,13 @@ export const getInspectionRiskChartApi = (params: {}) => {
export const getSpecialCountAllSpecialApi = (params: {}) => { export const getSpecialCountAllSpecialApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/xzSpecial/countAllSpecial`, 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);
};

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

@ -5,7 +5,7 @@
<div class="cbHeaderInfo"> <div class="cbHeaderInfo">
<!-- <div class="cubeIcon"></div> --> <!-- <div class="cubeIcon"></div> -->
<div class="cLeft title-tabs"> <div class="cLeft title-tabs">
<div class="title-color">应急处置</div> <div class="title-color">应急处置（近七天）</div>
<div>事故风险趋势预期</div> <div>事故风险趋势预期</div>
</div> </div>
</div> </div>
@ -118,9 +118,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { getNoticeListApi } from "@/api/modules/projectOverview"; import { getNoticeListApi } from "@/api/modules/projectOverview";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import Card from "@/components/card.vue"; // import Card from "@/components/card.vue";
import { ref, watch, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { getStageOption } from "@/api/modules/projectOverview"; import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
const store = GlobalStore(); const store = GlobalStore();
@ -166,24 +166,77 @@ const getNoticeList = async () => {
console.log("================center================", listData.value); console.log("================center================", listData.value);
}; };
const dataListAlarm = ref([]);
// 应急处置 // 应急处置
function getMessEchart() { function getMessEchart() {
console.log("我是应急处置11"); console.log("我是应急处置11");
const echartsTest = echarts.init(document.getElementById("eacherMess")); 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 = { let option = {
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
}, },
// legend: { legend: {
// x: "right", x: "center",
// textStyle: { textStyle: {
// color: "#fff" color: "#fff"
// }, },
// itemHeight: 10, icon: "rect",
// icon: "roundRect", data: dataList.map((item: any) => item.name),
// data: ["重大风险", "较大风险", "一般风险", "低风险"] 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"], color: ["#FF3232", "#FF9901", "#FFE500", "#3A3AE7"],
grid: { grid: {
left: "3%", left: "3%",
@ -195,18 +248,9 @@ function getMessEchart() {
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: ["中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司"], data: ["5.30", "5.31", "6.1", "6.2", "6.3", "6.4"],
axisLabel: { axisLabel: {
color: "#fff", color: "#fff"
formatter: function (params: any) {
let val = "";
if (params.length > 4) {
val = params.substr(0, 4) + "...";
return val;
} else {
return params;
}
}
}, },
axisTick: { axisTick: {
show: false show: false
@ -242,41 +286,32 @@ function getMessEchart() {
} }
// type: 'value' // type: 'value'
}, },
dataZoom: [ // dataZoom: [
{ // {
id: "dataZoomX", // id: "dataZoomX",
type: "inside", // type: "inside",
xAxisIndex: [0], // xAxisIndex: [0],
brushSelect: false, // brushSelect: false,
zoomOnMouseWheel: false, // zoomOnMouseWheel: false,
moveOnMouseWheel: true, // 开启滚轮平移 // moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移 // moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
preventDefaultMouseMove: false, // preventDefaultMouseMove: false,
// start:100, // // start:100,
startValue: 1, // startValue: 1,
endValue: 4, // endValue: 4,
// 滚动条高度 // // 滚动条高度
width: 8, // width: 8,
// 滚动条显示位置 // // 滚动条显示位置
// height: "80%", // // height: "80%",
// 距离右边 // // 距离右边
right: 3, // right: 3,
// 控制手柄的尺寸 // // 控制手柄的尺寸
handleSize: 0, // handleSize: 0,
filterMode: "empty" // filterMode: "empty"
// top: "top", // // top: "top",
} // }
], // ],
series: [ series: dataList
{
name: "重大风险",
type: "line",
stack: "Total",
smooth: true,
symbol: "none",
data: [120, 132, 101, 134, 90, 230, 210]
}
]
}; };
echartsTest.setOption(option, true); echartsTest.setOption(option, true);
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
@ -318,51 +353,53 @@ function Pie() {
return dataArr; return dataArr;
} }
// let dataList2 = ref([
let dataList2 = ref([ // {
{ // enumType: "",
enumType: "", // value: 30,
value: 30, // show: true,
show: true, // name: "重大隐患",
name: "重大隐患", // itemStyle: {
itemStyle: { // normal: {
normal: { // color: "#038cf5",
color: "#038cf5", // borderWidth: 20
borderWidth: 20 // }
} // }
} // },
}, // {
{ // enumType: "",
enumType: "", // value: 2,
value: 2, // show: false,
show: false, // name: "",
name: "", // itemStyle: {
itemStyle: { // color: "rgba(0,0,0,0)"
color: "rgba(0,0,0,0)" // }
} // },
}, // {
{ // value: 70,
value: 70, // show: true,
show: true, // name: "一般隐患",
name: "一般隐患", // itemStyle: {
itemStyle: { // normal: {
normal: { // color: "#01d6f4",
color: "#01d6f4", // borderWidth: 20
borderWidth: 20 // }
} // }
} // },
}, // {
{ // enumType: "",
enumType: "", // value: 2,
value: 2, // show: false,
show: false, // name: "",
name: "", // itemStyle: {
itemStyle: { // color: "rgba(0,0,0,0)"
color: "rgba(0,0,0,0)" // }
} // }
} // ]);
]); const messCountType = ref({
count: 0,
data: []
});
function getMessCountEchart() { function getMessCountEchart() {
let echartsTest = echarts.init(document.getElementById("eacherMessCount")); let echartsTest = echarts.init(document.getElementById("eacherMessCount"));
let option = { let option = {
@ -370,7 +407,7 @@ function getMessCountEchart() {
trigger: "item" trigger: "item"
}, },
title: { title: {
text: 120, text: messCountType.value.count,
// text: '100%', // text: '100%',
subtext: "今日应急次数", subtext: "今日应急次数",
x: "24%", x: "24%",
@ -404,7 +441,7 @@ function getMessCountEchart() {
itemHeight: 7, // 设置高度 itemHeight: 7, // 设置高度
symbolKeepAspect: false, symbolKeepAspect: false,
textStyle: { textStyle: {
color: "#000", color: "#fff",
rich: { rich: {
name: { name: {
verticalAlign: "right", verticalAlign: "right",
@ -419,22 +456,20 @@ function getMessCountEchart() {
} }
} }
}, },
data: dataList2.value.map(item => { data: messCountType.value.data.map((item: any) => {
if (item.show) { if (item.show) {
return item.name; return item.name;
} }
}), })
formatter: function (data: any) { // formatter: function (params: any) {
if (dataList2.value && dataList2.value.length) { // let val = "";
for (var i = 0; i < dataList2.value.length; i++) { // if (params.length > 4) {
if (data === dataList2.value[i].name) { // val = params.substr(0, 5) + "...";
var value = dataList2.value[i].value; // return val;
var percentage = value + "%"; // } else {
return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}"; // return params;
} // }
} // }
}
}
}, },
series: [ series: [
// 外侧光线 // 外侧光线
@ -565,7 +600,7 @@ function getMessCountEchart() {
labelLine: { labelLine: {
show: false show: false
}, },
data: dataList2.value data: messCountType.value.data
}, },
{ {
type: "pie", 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 () => { onMounted(async () => {
await getNoticeList(); await getNoticeList();
await getMessEchart(); getCountAlarmNumByEnterprise();
await getMessCountEchart(); getMessCountEchartType();
}); });
</script> </script>
@ -621,6 +700,7 @@ onMounted(async () => {
background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%); background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
} }
} }
.notoDta { .notoDta {
top: 50%; top: 50%;
// width: 50%; // width: 50%;
@ -641,6 +721,7 @@ onMounted(async () => {
margin: -6% 30%; margin: -6% 30%;
} }
} }
.scroll { .scroll {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -670,7 +751,7 @@ onMounted(async () => {
} }
.ctContent { .ctContent {
height: 74%; height: 85%;
// background-color: darkred; // background-color: darkred;
} }
} }
@ -761,6 +842,7 @@ onMounted(async () => {
margin: 9px 0; margin: 9px 0;
margin-left: 2px; margin-left: 2px;
} }
.itemHeadInner2 { .itemHeadInner2 {
font-size: 16px; font-size: 16px;
border: 1px solid #f46649; border: 1px solid #f46649;
@ -771,6 +853,7 @@ onMounted(async () => {
margin: 9px 0; margin: 9px 0;
margin-left: 2px; margin-left: 2px;
} }
.itemHeadInner3 { .itemHeadInner3 {
font-size: 16px; font-size: 16px;
border: 1px solid #ecbe45; border: 1px solid #ecbe45;
@ -781,6 +864,7 @@ onMounted(async () => {
margin: 9px 0; margin: 9px 0;
margin-left: 2px; margin-left: 2px;
} }
.itemHeadInner4 { .itemHeadInner4 {
font-size: 16px; font-size: 16px;
border: 1px solid #5394f7; border: 1px solid #5394f7;
@ -791,6 +875,7 @@ onMounted(async () => {
margin: 9px 0; margin: 9px 0;
margin-left: 2px; margin-left: 2px;
} }
.itemHeadInner5 { .itemHeadInner5 {
font-size: 16px; font-size: 16px;
border: 1px solid #9400d3; border: 1px solid #9400d3;
@ -801,6 +886,7 @@ onMounted(async () => {
margin: 9px 0; margin: 9px 0;
margin-left: 2px; margin-left: 2px;
} }
.itemHeadInner6 { .itemHeadInner6 {
font-size: 16px; font-size: 16px;
border: 1px solid #00ced1; border: 1px solid #00ced1;

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

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="contentTop contentMiddle" style="height: 24%"> <div class="contentTop contentMiddle" style="height: 28%">
<div class="ctHead" @click="onEchartsSafeTab(1)"> <div class="ctHead" @click="onEchartsSafeTab(1)">
<div> <div>
重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text 重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
@ -55,10 +55,10 @@
</div> </div>
</div> </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> <leftBottom @openDialog="openDialogData"></leftBottom>
</div> </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="cbHeader">
<div class="cbHeaderInfo"> <div class="cbHeaderInfo">
<div class="cubeIcon"></div> <div class="cubeIcon"></div>
@ -998,18 +998,18 @@ const getSafeInfo = async () => {
dataList.value.push(obj); dataList.value.push(obj);
} }
questionTotal.value = result.result.dangerNum; questionTotal.value = result.result.dangerNum;
overdueMajorDangerCount.value = result.result.overdueRectificationNum; // overdueMajorDangerCount.value = result.result.overdueRectificationNum;
overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio; // overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
majorDangerCount.value = result.result.notCloseNum; // majorDangerCount.value = result.result.notCloseNum;
// majorDangerRate.value = result.result.percent; // majorDangerRate.value = result.result.percent;
console.log("1111111111111", dataList.value); console.log("1111111111111", dataList.value);
// const res: any = await getCountDangerLevelApi({ const res: any = await getCountDangerLevelApi({
// projectSn: store.sn, projectSn: store.sn,
// isOverdueRectification: 1, isOverdueRectification: 1,
// inspectStartTime: dateRange.value[0], inspectStartTime: dateRange.value[0],
// inspectEndTime: dateRange.value[1] inspectEndTime: dateRange.value[1]
// }); });
// dataList.value = res.result.data.map((item: any, index: number) => { // dataList.value = res.result.data.map((item: any, index: number) => {
// return { // return {
// ...item, // ...item,
@ -1026,10 +1026,10 @@ const getSafeInfo = async () => {
// questionTotal.value = res.result.count; // questionTotal.value = res.result.count;
// console.log("饼图", res); // 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; overdueMajorDangerCount.value = filterResult.count;
// overdueMajorDangerRate.value = filterResult.percent; overdueMajorDangerRate.value = filterResult.percent;
drawEchart(); drawEchart();
}; };
@ -1312,20 +1312,20 @@ const qualityInfo = async () => {
inspectStartTime: dateRange.value[0], inspectStartTime: dateRange.value[0],
inspectEndTime: dateRange.value[1] inspectEndTime: dateRange.value[1]
}); });
dataList2.value = res.result.data.map((item: any, index: number) => { // dataList2.value = res.result.data.map((item: any, index: number) => {
return { // return {
...item, // ...item,
value: item.count, // value: item.count,
show: true, // show: true,
itemStyle: { // itemStyle: {
normal: { // normal: {
color: classColorList.value[index], // color: classColorList.value[index],
borderWidth: 20 // borderWidth: 20
} // }
} // }
}; // };
}); // });
questionTotal.value = res.result.count; // questionTotal.value = res.result.count;
const filterResult = res.result.data.find((item: any) => item.enumType == 1); const filterResult = res.result.data.find((item: any) => item.enumType == 1);
majorDangerCount.value = filterResult.count; majorDangerCount.value = filterResult.count;
@ -1506,7 +1506,7 @@ onMounted(async () => {
.content { .content {
padding: 0 20px; padding: 0 20px;
height: 100%; height: calc(100% - 100px);
.contentTop { .contentTop {
margin-top: 10px; margin-top: 10px;

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

@ -4,7 +4,7 @@
<div class="header"> <div class="header">
<div class="cbHeaderInfo hLeft"> <div class="cbHeaderInfo hLeft">
<div class="cubeIcon"></div> <div class="cubeIcon"></div>
<div class="cLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div> <div class="cLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">责任单位隐患整改统计</div>
</div> </div>
<!-- <div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div> --> <!-- <div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div> -->
<div class="hRight"> <div class="hRight">
@ -555,7 +555,7 @@ onMounted(async () => {
// height: 10%; // height: 10%;
.hLeft { .hLeft {
width: 50%; width: 58%;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff); background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
@ -565,7 +565,7 @@ onMounted(async () => {
} }
.hRight { .hRight {
width: 50%; width: 42%;
} }
} }
@ -597,7 +597,7 @@ onMounted(async () => {
border-bottom: 1px solid #0059ff; border-bottom: 1px solid #0059ff;
.hLeft { .hLeft {
width: 50%; width: 58%;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff); background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
@ -607,7 +607,7 @@ onMounted(async () => {
} }
.hRight { .hRight {
width: 50%; width: 42%;
} }
} }