|
|
@ -1,53 +1,25 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="inspection-card"> |
|
|
<div class="inspection-card"> |
|
|
<div class="sy-water-cart-title">监管检查总览</div> |
|
|
<div class="sy-water-cart-title">堤防分类统计</div> |
|
|
<div class="card-item"> |
|
|
<div class="echart-wrapper" ref="chartRef"></div> |
|
|
<div class="left"> |
|
|
|
|
|
<div class="name">今日告警</div> |
|
|
|
|
|
<div class="count">{{ chartData.JRGJ_YCL + chartData.JRGJ_DCL }}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
|
|
|
<div class="ok"> |
|
|
|
|
|
<span class="name">已处理</span> |
|
|
|
|
|
<span class="count">{{ chartData.JRGJ_YCL }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="wait"> |
|
|
|
|
|
<span class="name">待处理</span> |
|
|
|
|
|
<span class="count">{{ chartData.JRGJ_DCL }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="card-item"> |
|
|
|
|
|
<div class="left"> |
|
|
|
|
|
<div class="name">本月告警</div> |
|
|
|
|
|
<div class="count">{{ chartData.BYGJ_YCL + chartData.BYGJ_DCL }}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
|
|
|
<div class="ok"> |
|
|
|
|
|
<span class="name">已处理</span> |
|
|
|
|
|
<span class="count">{{ chartData.BYGJ_YCL }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="wait"> |
|
|
|
|
|
<span class="name">待处理</span> |
|
|
|
|
|
<span class="count">{{ chartData.BYGJ_DCL }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { reactive, onMounted, onBeforeUnmount } from "vue"; |
|
|
import {reactive, onMounted, onBeforeUnmount, ref} from "vue"; |
|
|
import { getlStatisticChart } from "@/api/safety/index"; |
|
|
import { getlStatisticChart } from "@/api/safety/index"; |
|
|
|
|
|
import * as echarts from "echarts"; |
|
|
defineOptions({ |
|
|
defineOptions({ |
|
|
name: "InspectionCard", |
|
|
name: "InspectionCard", |
|
|
}); |
|
|
}); |
|
|
const chartData = reactive<any>({ |
|
|
const dailyData: any = ref([]); |
|
|
JRGJ_YCL: 0, |
|
|
const dailyCount = ref(0); |
|
|
JRGJ_DCL: 0, |
|
|
const chartRef = ref(); |
|
|
BYGJ_YCL: 0, |
|
|
|
|
|
BYGJ_DCL: 0, |
|
|
let chart: echarts.ECharts | undefined; |
|
|
}); |
|
|
const handleResize = () => { |
|
|
|
|
|
chart?.resize(); |
|
|
|
|
|
}; |
|
|
const queryData = (adcd: string = "") => { |
|
|
const queryData = (adcd: string = "") => { |
|
|
getlStatisticChart({ |
|
|
getlStatisticChart({ |
|
|
endTime: "", |
|
|
endTime: "", |
|
|
@ -55,31 +27,194 @@ const queryData = (adcd: string = "") => { |
|
|
adcd: adcd, |
|
|
adcd: adcd, |
|
|
group: "K3", |
|
|
group: "K3", |
|
|
}).then((res: any) => { |
|
|
}).then((res: any) => { |
|
|
const series = res?.data?.data?.yaxis?.[0]?.series; |
|
|
dailyCount.value = 0; |
|
|
if (!series) return; |
|
|
dailyData.value = []; |
|
|
series.forEach((item: any) => { |
|
|
if (res?.data?.data?.yaxis?.length) { |
|
|
if (item.code === "YZT_SUPERVISE_JRGJ_YCL_SUM") { |
|
|
let newArr = res.data.data.yaxis.flatMap((v: any) => v.series); |
|
|
chartData.JRGJ_YCL = +(+item.sum).toFixed(0); |
|
|
newArr.sort(function(a, b) { |
|
|
} |
|
|
if(a.sort < b.sort) return -1; |
|
|
if (item.code === "YZT_SUPERVISE_JRGJ_DCL_SUM") { |
|
|
if(a.sort > b.sort) return 1; |
|
|
chartData.JRGJ_DCL = +(+item.sum).toFixed(0); |
|
|
return 0; // 相等时保持原有顺序 |
|
|
} |
|
|
}); |
|
|
if (item.code === "YZT_SUPERVISE_BYGJ_YCL_SUM") { |
|
|
newArr?.forEach((item: any) => { |
|
|
chartData.BYGJ_YCL = +(+item.sum).toFixed(0); |
|
|
dailyData.value.push({ |
|
|
} |
|
|
name: item.name || "", |
|
|
if (item.code === "YZT_SUPERVISE_BYGJ_DCL_SUM") { |
|
|
value: Number(item.sum)?.toFixed(0) || 0, |
|
|
chartData.BYGJ_DCL = +(+item.sum).toFixed(0); |
|
|
unit: item.unit || "", |
|
|
} |
|
|
}); |
|
|
}); |
|
|
dailyCount.value += Number(item.sum) || 0; |
|
|
|
|
|
}); |
|
|
|
|
|
// dailyCount.value = newArr |
|
|
|
|
|
// .map((v: any) => Number(v.sum ?? null)) |
|
|
|
|
|
// .reduce((acc: any, cur: any) => { |
|
|
|
|
|
// return acc + cur; |
|
|
|
|
|
// }, 0); |
|
|
|
|
|
} else { |
|
|
|
|
|
// 默认数据 |
|
|
|
|
|
dailyData.value = [ |
|
|
|
|
|
{ |
|
|
|
|
|
name: "一般", |
|
|
|
|
|
value: 0, |
|
|
|
|
|
unit: "", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: "较大", |
|
|
|
|
|
value: 0, |
|
|
|
|
|
unit: "", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: "重大", |
|
|
|
|
|
value: 0, |
|
|
|
|
|
unit: "", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: "紧急", |
|
|
|
|
|
value: 0, |
|
|
|
|
|
unit: "", |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
} |
|
|
|
|
|
initChart() |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const initChart = () => { |
|
|
|
|
|
chart?.clear(); |
|
|
|
|
|
chart = echarts.init(chartRef.value); |
|
|
|
|
|
// ['一般', '较大', '重大', '紧急'] |
|
|
|
|
|
const pieName = dailyData.value.map((item: any) => item.name); |
|
|
|
|
|
|
|
|
|
|
|
const legendStyle = { |
|
|
|
|
|
type: "scroll", |
|
|
|
|
|
// orient: 'vertical', |
|
|
|
|
|
// height: '95%', |
|
|
|
|
|
width: "50%", |
|
|
|
|
|
left: "50%", |
|
|
|
|
|
textAlign: "left", |
|
|
|
|
|
align: "left", |
|
|
|
|
|
icon: "circle", //设置为圆，删除则为矩形 |
|
|
|
|
|
itemWidth: 10, |
|
|
|
|
|
itemHeight: 10, |
|
|
|
|
|
itemGap: 44, // 44 |
|
|
|
|
|
formatter: function (name: any) { |
|
|
|
|
|
for (var i = 0; i < pieName.length; i++) { |
|
|
|
|
|
if (name == dailyData.value[i].name) { |
|
|
|
|
|
return "{name|" + name + "}{rate|" + dailyData.value[i].value + "}"; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
rich: { |
|
|
|
|
|
name: { |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
fontWeight: 400, |
|
|
|
|
|
width: 60, |
|
|
|
|
|
height: 24, |
|
|
|
|
|
padding: [0, 0, 0, 5], |
|
|
|
|
|
color: "rgba(0, 0, 0, 0.55)", |
|
|
|
|
|
}, |
|
|
|
|
|
rate: { |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
fontFamily: "Microsoft YaHei", |
|
|
|
|
|
height: 24, |
|
|
|
|
|
width: 30, |
|
|
|
|
|
padding: [60, 0, 0, -60], |
|
|
|
|
|
color: "rgba(0, 0, 0, 0.9)", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
|
|
|
// Chart options |
|
|
|
|
|
const option = { |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
trigger: "item", |
|
|
|
|
|
// formatter: '{a} <br/>{b}: {c} ({d}%)' |
|
|
|
|
|
}, |
|
|
|
|
|
color: ["#28CE8E", "#FFDD77", "#FF9A23", "#F26161"], |
|
|
|
|
|
legend: [ |
|
|
|
|
|
{ |
|
|
|
|
|
top: "15%", |
|
|
|
|
|
// 显示前两个 |
|
|
|
|
|
data: pieName.slice(0, 2), |
|
|
|
|
|
...legendStyle, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
top: "55%", |
|
|
|
|
|
// 显示前两个 |
|
|
|
|
|
data: pieName.slice(2, 4), |
|
|
|
|
|
...legendStyle, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
// name: '问题类型', |
|
|
|
|
|
type: "pie", |
|
|
|
|
|
radius: ["52%", "70%"], |
|
|
|
|
|
center: ["20%", "50%"], |
|
|
|
|
|
avoidLabelOverlap: false, |
|
|
|
|
|
label: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
}, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
label: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
labelLine: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
}, |
|
|
|
|
|
data: dailyData.value, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
type: "pie", |
|
|
|
|
|
radius: ["52%", "70%"], |
|
|
|
|
|
center: ["20%", "50%"], |
|
|
|
|
|
z: 0, |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
color: "transparent", |
|
|
|
|
|
borderWidth: 0, |
|
|
|
|
|
borderColor: "#eee", |
|
|
|
|
|
}, |
|
|
|
|
|
label: { |
|
|
|
|
|
position: "center", |
|
|
|
|
|
formatter: function () { |
|
|
|
|
|
return ["{total|" + dailyCount.value + "}", "{label|堤防总数}"].join("\n"); |
|
|
|
|
|
}, |
|
|
|
|
|
rich: { |
|
|
|
|
|
total: { |
|
|
|
|
|
color: "#000", |
|
|
|
|
|
fontSize: 28, |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
fontFamily: "DIN", |
|
|
|
|
|
lineHeight: 34, |
|
|
|
|
|
}, |
|
|
|
|
|
label: { |
|
|
|
|
|
color: "rgba(0, 0, 0, 0.6)", |
|
|
|
|
|
fontSize: 14, |
|
|
|
|
|
lineHeight: 18, |
|
|
|
|
|
fontFamily: "Source Han Sans", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: [{ value: 1, name: "", tooltip: { show: false } }], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// Set options and render chart |
|
|
|
|
|
chart.setOption(option); |
|
|
|
|
|
}; |
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
queryData(); |
|
|
queryData() |
|
|
window.$bus.$on("inspection-card-query-data", queryData); |
|
|
// getChartData(props.timeRange); |
|
|
|
|
|
// getProgressData(props.timeRange); |
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", handleResize); |
|
|
}); |
|
|
}); |
|
|
onBeforeUnmount(() => { |
|
|
onBeforeUnmount(() => { |
|
|
// window.$bus.$off("inspection-card-query-data"); |
|
|
chart?.dispose(); |
|
|
|
|
|
window.removeEventListener("resize", handleResize); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
@ -89,85 +224,10 @@ onBeforeUnmount(() => { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
gap: 16px; |
|
|
gap: 16px; |
|
|
.card-item { |
|
|
.echart-wrapper { |
|
|
|
|
|
margin-top: 30px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
height: 164px + 16px + 32px; |
|
|
flex-direction: row; |
|
|
|
|
|
gap: 12px; |
|
|
|
|
|
.left { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
background: rgba(54, 178, 158, 0.1); |
|
|
|
|
|
border: 2px solid rgba(54, 178, 158, 0.6); |
|
|
|
|
|
width: 160px; |
|
|
|
|
|
.name { |
|
|
|
|
|
font-family: 思源黑体; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
font-weight: normal; |
|
|
|
|
|
line-height: normal; |
|
|
|
|
|
letter-spacing: 0em; |
|
|
|
|
|
|
|
|
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
|
|
} |
|
|
|
|
|
.count { |
|
|
|
|
|
font-family: DIN; |
|
|
|
|
|
font-size: 32px; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
letter-spacing: 0em; |
|
|
|
|
|
|
|
|
|
|
|
font-variation-settings: "opsz" auto; |
|
|
|
|
|
color: #36b29e; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.right { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
gap: 12px; |
|
|
|
|
|
.ok, |
|
|
|
|
|
.wait { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
width: 238px; |
|
|
|
|
|
padding: 8px 16px; |
|
|
|
|
|
height: 52px; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
.name { |
|
|
|
|
|
font-family: 思源黑体; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
font-weight: normal; |
|
|
|
|
|
line-height: normal; |
|
|
|
|
|
letter-spacing: 0em; |
|
|
|
|
|
|
|
|
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
|
|
} |
|
|
|
|
|
.count { |
|
|
|
|
|
font-family: 思源黑体; |
|
|
|
|
|
font-size: 24px; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
line-height: normal; |
|
|
|
|
|
letter-spacing: 0em; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.ok { |
|
|
|
|
|
background: rgba(40, 206, 142, 0.15); |
|
|
|
|
|
border: 1px solid #28ce8e; |
|
|
|
|
|
.count { |
|
|
|
|
|
color: #28ce8e; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.wait { |
|
|
|
|
|
background: rgba(250, 173, 16, 0.1); |
|
|
|
|
|
border: 1px solid #faad10; |
|
|
|
|
|
.count { |
|
|
|
|
|
color: #ff9a23; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
hejunjie
1 month ago