747 lines
17 KiB
Vue
747 lines
17 KiB
Vue
<template>
|
||
<div class="leftTop">
|
||
<Card title="隐患智能统计分析">
|
||
<div class="hRight">
|
||
<el-date-picker
|
||
style="width: 90%"
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
</div>
|
||
<div class="box-content">
|
||
<div class="contentTop contentMiddle">
|
||
<div class="ctHead">
|
||
<div>
|
||
质量重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
|
||
>个，占比<text>{{ overdueMajorDangerRate }}%</text>
|
||
</div>
|
||
</div>
|
||
<div class="cmHead">
|
||
<div>
|
||
安全重大隐患未销项<text>{{ majorDangerCount }}</text
|
||
>个，占比<text>{{ majorDangerRate }}%</text>
|
||
</div>
|
||
</div>
|
||
<div class="ctContent" style="position: relative">
|
||
<div id="echartsSafe" style="width: 100%; height: 100%;"></div>
|
||
<div class="safetext1" v-if="dataList.length != 0">状态统计（较昨日）</div>
|
||
<div class="safetext2" v-if="dataList.length != 0">风险统计（较昨日）</div>
|
||
<div class="notoDta" v-if="dataList.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Card from "@/components/card.vue";
|
||
import { onMounted, ref, watch } from "vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import * as echarts from "echarts";
|
||
import {
|
||
getCountDangerLevelApi,
|
||
getInspectionSelectQualityApi
|
||
} from "@/api/modules/projectOverview";
|
||
const store = GlobalStore();
|
||
const dateRange = ref([] as any);
|
||
const echartsTest = ref();
|
||
const majorDangerCount = ref(0 as any);
|
||
const majorDangerRate = ref(0 as any);
|
||
const overdueMajorDangerCount = ref(0 as any);
|
||
const overdueMajorDangerRate = ref(0 as any);
|
||
const questionTotal = ref(0 as any);
|
||
const classColorList = ref(["#EC6266", "#6375C7", "#038cf5", "#01d6f4"]);
|
||
let dataList = ref([
|
||
{
|
||
enumType: "",
|
||
value: 30,
|
||
show: true,
|
||
name: "重大隐患",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#EC6266",
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 70,
|
||
show: true,
|
||
name: "一般隐患",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#6375C7",
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
}
|
||
]);
|
||
const qualityInfo = async (showLoading: boolean) => {
|
||
// const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
|
||
// dataList2.value[0].value = res.result.total.rectificationNum;
|
||
// dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
|
||
// questionTotal.value = res.result.total.totalNum;
|
||
|
||
const res: any = await getCountDangerLevelApi(
|
||
{
|
||
projectSn: store.sn,
|
||
isNotQualified: 1,
|
||
inspectStartTime: dateRange.value[0],
|
||
inspectEndTime: dateRange.value[1]
|
||
},
|
||
showLoading
|
||
);
|
||
// 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;
|
||
majorDangerRate.value = filterResult.percent;
|
||
|
||
// drawEchart2();
|
||
};
|
||
const getSafeInfo = async (showLoading: boolean) => {
|
||
// const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
|
||
// safeData.value = res.result;
|
||
// dataList.value[0].value = res.result.rectificationNum;
|
||
// dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
|
||
const result: any = await getInspectionSelectQualityApi(
|
||
{
|
||
projectSn: store.sn,
|
||
inspectStartTime: dateRange.value[0],
|
||
inspectEndTime: dateRange.value[1]
|
||
},
|
||
showLoading
|
||
);
|
||
|
||
dataList.value = [];
|
||
for (let index = 0; index < 5; index++) {
|
||
let obj = {
|
||
enumType: "",
|
||
value: 30,
|
||
show: true,
|
||
name: "重大隐患",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: classColorList.value[index],
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
};
|
||
if (index == 0) {
|
||
obj.value = result.result.greatFaultLevelNum;
|
||
obj.greatFaultLevelNumJzrRate = result.result.greatFaultLevelNumJzrRate;
|
||
obj.rectificationNum = result.result.rectificationNum;
|
||
obj.rectificationNumJzrRate = result.result.rectificationNumYesterday;
|
||
obj.rectificationName = "未整改";
|
||
} else if (index == 1) {
|
||
obj.name = "较大隐患";
|
||
obj.value = result.result.largerRiskNum;
|
||
obj.greatFaultLevelNumJzrRate = result.result.largerRiskNumJzrRate;
|
||
obj.rectificationNum = result.result.reviewNum;
|
||
obj.rectificationNumJzrRate = result.result.reviewNumYesterday;
|
||
obj.rectificationName = "未复查";
|
||
} else if (index == 2) {
|
||
obj.name = "一般隐患";
|
||
obj.value = result.result.generalRiskNum;
|
||
obj.greatFaultLevelNumJzrRate = result.result.generalRiskNumJzrRate;
|
||
obj.rectificationNum = result.result.verificationNum;
|
||
obj.rectificationNumJzrRate = result.result.verificationNumJzrRate;
|
||
obj.rectificationName = "未核验";
|
||
} else if (index == 3) {
|
||
obj.name = "低隐患";
|
||
obj.value = result.result.lowRiskNum;
|
||
obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
|
||
obj.rectificationNum = result.result.closeInspectionNum;
|
||
obj.rectificationNumJzrRate = result.result.closeInspectionNumJzrRate;
|
||
obj.rectificationName = "合格";
|
||
} else if (index == 4) {
|
||
obj.name = "无";
|
||
obj.value = result.result.lowRiskNum;
|
||
obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
|
||
obj.rectificationNum = result.result.overdueNotCloseNum;
|
||
obj.rectificationNumJzrRate = result.result.overdueNotCloseNumYesterday;
|
||
obj.rectificationName = "超期未关闭";
|
||
}
|
||
|
||
dataList.value.push(obj);
|
||
}
|
||
questionTotal.value = result.result.dangerNum;
|
||
// overdueMajorDangerCount.value = result.result.overdueRectificationNum;
|
||
// overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
|
||
// majorDangerCount.value = result.result.notCloseNum;
|
||
// majorDangerRate.value = result.result.percent;
|
||
|
||
const res: any = await getCountDangerLevelApi(
|
||
{
|
||
projectSn: store.sn,
|
||
isOverdueRectification: 1,
|
||
inspectStartTime: dateRange.value[0],
|
||
inspectEndTime: dateRange.value[1]
|
||
},
|
||
showLoading
|
||
);
|
||
// dataList.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);
|
||
|
||
overdueMajorDangerCount.value = filterResult.count;
|
||
overdueMajorDangerRate.value = filterResult.percent;
|
||
|
||
drawEchart();
|
||
};
|
||
const 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;
|
||
}
|
||
const drawEchart = () => {
|
||
echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
|
||
let option = {
|
||
animation: false, // 取消动画
|
||
tooltip: {
|
||
trigger: "item",
|
||
// position: ['50%','50%']
|
||
},
|
||
title: {
|
||
text: questionTotal.value,
|
||
subtext: "累计隐患总数",
|
||
x: "17%",
|
||
y: "36%",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
// align: "center",
|
||
fontFamily: "sadigitalNumber"
|
||
},
|
||
subtextStyle: {
|
||
color: "#ccc",
|
||
fontSize: 10,
|
||
fontWeight: "normal"
|
||
// align: "center"
|
||
}
|
||
},
|
||
legend: [
|
||
{
|
||
title: "风险图",
|
||
selectedMode: true, // 取消图例上的点击事件
|
||
icon: "rect",
|
||
type: "plain",
|
||
orient: "vertical",
|
||
right: "0%",
|
||
top: "25%",
|
||
align: "left",
|
||
itemGap: 14,
|
||
itemWidth: 8, // 设置宽度
|
||
itemHeight: 7, // 设置高度
|
||
symbolKeepAspect: false,
|
||
textStyle: {
|
||
color: "#000",
|
||
rich: {
|
||
name: {
|
||
verticalAlign: "right",
|
||
align: "left",
|
||
fontSize: 10,
|
||
color: "#FFFFFF"
|
||
},
|
||
value: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#FFFFFF"
|
||
},
|
||
color1: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#0063C4"
|
||
},
|
||
color2: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#D81E06"
|
||
},
|
||
value1: {
|
||
align: "left",
|
||
fontSize: 12,
|
||
color: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
data: dataList.value.map((item, index) => {
|
||
if (item.show && index != 4) {
|
||
return item.name;
|
||
}
|
||
}),
|
||
formatter: function (data: any) {
|
||
if (dataList.value && dataList.value.length) {
|
||
for (let i = 0; i < dataList.value.length; i++) {
|
||
if (data === dataList.value[i].name) {
|
||
if (data == "无") return;
|
||
let value = dataList.value[i].value;
|
||
const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
|
||
let percentage =
|
||
greatFaultLevelNumJzrRate >= 0
|
||
? greatFaultLevelNumJzrRate + "%"
|
||
: greatFaultLevelNumJzrRate.toString().substr(1) + "%";
|
||
|
||
const templateString = greatFaultLevelNumJzrRate > 0 ? `color1|↑` : "color2|↓";
|
||
return "{name| " + data + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: "状态统计（较昨日）",
|
||
selectedMode: false, // 取消图例上的点击事件
|
||
icon: "none",
|
||
type: "plain",
|
||
orient: "vertical",
|
||
left: "35%",
|
||
top: "25%",
|
||
align: "left",
|
||
itemGap: 8.5,
|
||
itemWidth: 8, // 设置宽度
|
||
itemHeight: 7, // 设置高度
|
||
symbolKeepAspect: false,
|
||
textStyle: {
|
||
color: "#000",
|
||
rich: {
|
||
name: {
|
||
verticalAlign: "right",
|
||
align: "left",
|
||
fontSize: 10,
|
||
color: "#FFFFFF"
|
||
},
|
||
value: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#FFFFFF"
|
||
},
|
||
color1: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#0063C4"
|
||
},
|
||
color2: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#D81E06"
|
||
},
|
||
value1: {
|
||
align: "left",
|
||
fontSize: 12,
|
||
color: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
data: dataList.value.map(item => {
|
||
if (item.show) {
|
||
return item.name;
|
||
}
|
||
}),
|
||
formatter: function (data: any) {
|
||
if (dataList.value && dataList.value.length) {
|
||
for (let i = 0; i < dataList.value.length; i++) {
|
||
if (data === dataList.value[i].name) {
|
||
let value = dataList.value[i].rectificationNum;
|
||
let rectificationName = dataList.value[i].rectificationName;
|
||
const rectificationNumJzrRate = Number(dataList.value[i].rectificationNumJzrRate);
|
||
let percentage =
|
||
rectificationNumJzrRate >= 0
|
||
? rectificationNumJzrRate.toFixed(2) + "%"
|
||
: rectificationNumJzrRate.toFixed(2).toString().substr(1) + "%";
|
||
const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
|
||
// ↓
|
||
return (
|
||
"{name| " + rectificationName + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
// 外侧光线
|
||
{
|
||
name: "",
|
||
type: "gauge",
|
||
center: ["18%", "52%"],
|
||
radius: "88%",
|
||
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: ["18%", "52%"],
|
||
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: 1,
|
||
color: "#52bef0"
|
||
},
|
||
{
|
||
offset: 0,
|
||
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: ["18%", "52%"],
|
||
hoverAnimation: true,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderWidth: 10
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: dataList.value
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["57", "60"],
|
||
center: ["18%", "52%"],
|
||
label: {
|
||
show: false
|
||
},
|
||
data: Pie()
|
||
}
|
||
]
|
||
};
|
||
echartsTest.value.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
echartsTest.value.resize();
|
||
});
|
||
|
||
//图例点击事件
|
||
// echartsTest.value.on("legendselectchanged", (params: any) => {
|
||
// echartsTest.value.setOption({
|
||
// legend: { selected: { [params.name]: true } }
|
||
// });
|
||
|
||
// emits("openDialog", {
|
||
// index: 7,
|
||
// title: params.name + "超期未整改",
|
||
// majorInfo: {
|
||
// isOverdueRectification: 1,
|
||
// isNotQualified: 0,
|
||
// enumType: dataList.value.find(item => item.name == params.name)?.enumType,
|
||
// inspectStartTime: dateRange.value[0],
|
||
// inspectEndTime: dateRange.value[1]
|
||
// }
|
||
// });
|
||
// });
|
||
}
|
||
watch(
|
||
dateRange,
|
||
() => {
|
||
if (dateRange.value == null) {
|
||
dateRange.value = [];
|
||
}
|
||
getSafeInfo(true);
|
||
qualityInfo(true);
|
||
// await getSelectQualityStatisticsNum();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
const setIntervalFn = (showLoading: boolean) => {
|
||
getSafeInfo(showLoading);
|
||
qualityInfo(showLoading);
|
||
};
|
||
|
||
onMounted(async () => {
|
||
setIntervalFn(false);
|
||
setInterval(() => {
|
||
setIntervalFn(true);
|
||
}, 30000);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.safetext1 {
|
||
position: absolute;
|
||
top: 6%;
|
||
color: white;
|
||
left: 42%;
|
||
}
|
||
.safetext2 {
|
||
position: absolute;
|
||
top: 6%;
|
||
color: white;
|
||
right: 3%;
|
||
}
|
||
.leftTop {
|
||
width: 100%;
|
||
height: 100%;
|
||
.hRight {
|
||
width: 40%;
|
||
position: absolute;
|
||
top: 1%;
|
||
right: 0;
|
||
}
|
||
.box-content {
|
||
height: 100%;
|
||
.contentTop {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.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: 68%;
|
||
// background-color: darkred;
|
||
}
|
||
}
|
||
|
||
.contentMiddle {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.cmHead {
|
||
background-color: #002f69;
|
||
padding-bottom: 5px;
|
||
color: #fff;
|
||
height: 13%;
|
||
font-size: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
margin-top: 1%;
|
||
cursor: pointer;
|
||
|
||
text {
|
||
font-size: 24px;
|
||
color: #0db027;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.notoDta {
|
||
top: 8%;
|
||
width: 50%;
|
||
// left: 40%;
|
||
position: absolute;
|
||
text-align: center;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
img {
|
||
width: 40%;
|
||
margin: 5% 30%;
|
||
}
|
||
|
||
p {
|
||
color: #fff;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
margin: -6% 30%;
|
||
}
|
||
}
|
||
::v-deep .h-card .content {
|
||
height: 80%;
|
||
}
|
||
::v-deep .h-card {
|
||
position: relative;
|
||
}
|
||
:deep() {
|
||
.el-input__wrapper{
|
||
width: 80%;
|
||
height: 0%;
|
||
background: #0d2956;
|
||
box-shadow: 0 0 0 1px #007AFF inset;
|
||
}
|
||
.el-range-separator {
|
||
color: #ccc;
|
||
font-size: 12px;
|
||
}
|
||
.el-range-input {
|
||
color: #ccc;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style>
|