GitBucket
Newer
<template>
<div id="szycfxJCFX">
<div id="HeaderEcharts"></div>
<el-divider>管网历史分析</el-divider>
<div id="BodyFenXi">
<div class="list1">
<div class="listLabel">问题日期</div>
<div class="listValue">2024年7月1日</div>
</div>
<div class="list1">
<div class="listLabel">天气情况</div>
<div class="listValue">暴雨(24小时降雨量100mm)</div>
</div>
<div class="list2">
<div class="listLabel">问题分析</div>
<div class="listValue">
<p>条件库：</p>
1、雨天降雨； 2、污水管正常满管运行；
3、降雨期间COD浓度降低，且降雨结束2小时后浓度回升雨前浓度
<p>推论库：</p>
疑似是雨水注入到污水管网所致
</div>
</div>
</div>
</div>
</template>
<script setup name="szycfxJCFX">
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getEchart } from "@/api/MonitorAssetsOnMap";
import { riskAnalysisReason } from "@/api/MonitoringAnalysis";
const props = defineProps({
// 数据id
dataID: {
type: String,
},
dataCode: {
type: String,
},
arrstcode: {
type: Array,
},
arrid: {
type: Array,
},
Getproperties: {
type: Object,
},
});
const AllData = reactive({
chart: null,
yAxis: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
],
yAxis_Name: "降雨量",
yAxis2: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
],
yAxis2_Name: "COD",
yAxis3: [
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
110,
111,
112,
113,
114,
115,
116,
117,
118,
119,
120,
121,
122,
123,
],
yAxis3_Name: "水深",
xAxis: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
],
});
const init = () => {
//先获取Dom上的实例
let chartDom = echarts.getInstanceByDom(document.getElementById("HeaderEcharts"));
//然后判断实例是否存在，如果不存在，就创建新实例
if (chartDom == null) {
chartDom = echarts.init(document.getElementById("HeaderEcharts"));
var option = {
tooltip: {
trigger: "axis",
backgroundColor: "#004284",
borderColor: "#0B9BFF",
borderRadius: 6, // 设置圆角大小
// 自定义提示框文本样
textStyle: {
// 字体颜色
color: "white",
// 字体大小
fontSize: 14,
},
},
legend: {
data: [AllData.yAxis_Name, AllData.yAxis2_Name, AllData.yAxis3_Name],
textStyle: {
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: 60,
right: 100,
bottom: 20,
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
data: AllData.xAxis,
axisLabel: {
color: "rgba(255,255,255,1)",
fontSize: 12,
fontFamily: "AlibabaPuHuiTi",
},
},
dataZoom: [
{
// show: true,
show: false,
height: 4,
bottom: 10,
start: 0,
end: 100,
handleSize: "100%",
fillerColor: "#94FA41",
borderColor: "transparent",
backgroundColor: "rgba(148, 250, 65, 0.2)",
handleStyle: {
color: "#94FA41",
},
moveHandleSize: 0,
textStyle: {
color: "#fff",
},
},
{
type: "inside",
show: true,
height: 15,
start: 0,
end: 100,
},
],
yAxis: [
{
name: AllData.yAxis_Name,
type: "value",
minInterval: 1,
axisLabel: {
color: "#AAC1CF",
show: true,
},
nameTextStyle: {
color: "#19D5FF",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#2161a8",
},
},
alignTicks: true,
position: "left",
offset: 60,
inverse: true,
nameLocation: "start",
},
{
name: AllData.yAxis2_Name,
type: "value",
minInterval: 1,
axisLabel: {
color: "#AAC1CF",
show: true,
},
nameTextStyle: {
color: "#FFC155",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#2161a8",
},
},
alignTicks: true,
position: "left",
offset: 0,
},
{
name: AllData.yAxis3_Name,
type: "value",
minInterval: 1,
axisLabel: {
color: "#AAC1CF",
show: true,
},
nameTextStyle: {
color: "#99FF55",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#2161a8",
},
},
alignTicks: true,
},
],
series: [
{
name: AllData.yAxis_Name,
type: "bar",
data: AllData.yAxis,
barWidth: "30%", // 可以是具体像素值 '20px' 或百分比 '50%'
// 修改数据点颜色
itemStyle: {
borderRadius: [0, 0, 50, 50],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#08B1FF" },
{ offset: 1, color: "#19D6FF" },
]), // 数据点颜色
},
},
{
name: AllData.yAxis2_Name,
type: "line",
data: AllData.yAxis2,
yAxisIndex: 1,
symbolSize: 7,
// 修改折线颜色
lineStyle: {
color: "#FFC155", // 折线颜色
width: 2, // 折线宽度
},
// 修改数据点颜色
itemStyle: {
color: "#FFC155", // 数据点颜色
width: 4,
},
},
{
name: AllData.yAxis3_Name,
type: "line",
data: AllData.yAxis3,
yAxisIndex: 2,
symbolSize: 7,
// 修改折线颜色
lineStyle: {
color: "#99FF55", // 折线颜色
width: 2, // 折线宽度
},
// 修改数据点颜色
itemStyle: {
color: "#99FF55", // 数据点颜色
},
},
],
};
option && chartDom.setOption(option, true);
AllData.chart = chartDom;
}
};
const resizeTheChart = () => {
if (AllData.chart) {
AllData.chart.resize();
}
};
const getChartsData = () => {
getEchart({
// stType: props.Getproperties.stType,
// stCode: props.Getproperties.stCode,
// dataCode: props.Getproperties.dataCode,
// start: "2024-07-01 00:00:00",
// end: "2024-07-01 23:59:59",
stType: "rainwater_pipeline_quality",
stCode: "0201460323",
dataCode: "pipePoint",
start: "2024-11-26 11:10:03",
end: "2024-11-27 11:10:03",
}).then((res) => {
if (res && res.code == 200) {
init();
}
});
};
const getFenXiData = () => {
console.log(props);
riskAnalysisReason({
startTime: "2024-07-01 00:00:00",
endTime: "2024-07-01 23:59:59",
stCode: "",
menuType: "",
}).then((res) => {});
};
onMounted(() => {
nextTick(() => {
getChartsData();
getFenXiData();
window.addEventListener("resize", resizeTheChart);
});
});
</script>
<style lang="scss" scoped>
#szycfxJCFX {
width: 100%;
height: 100%;
:v-deep(.el-divider__text) {
background-color: #0b9bff !important;
color: white !important;
}
#HeaderEcharts {
width: 1198px;
height: 320px;
}
#BodyFenXi {
width: 100%;
height: 250px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
align-items: center;
.list1 {
width: 50%;
height: 60px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
.listLabel {
width: 200px;
height: 40px;
text-align: right;
box-sizing: border-box;
padding-right: 30px;
line-height: 40px;
color: #ccdfff;
}
.listValue {
width: 250px;
height: 40px;
line-height: 40px;
box-sizing: border-box;
padding: 0 5px;
color: #8fbffe;
background: #0d2359;
border-radius: 5px;
border: 1px solid #0b9bff;
}
}
.list2 {
width: 100%;
height: 190px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
.listLabel {
width: 200px;
height: 170px;
line-height: 170px;
text-align: right;
box-sizing: border-box;
padding-right: 30px;
color: #ccdfff;
}
.listValue {
width: 825px;
height: 170px;
box-sizing: border-box;
padding: 5px;
color: #8fbffe;
background: #0d2359;
border-radius: 5px;
border: 1px solid #0b9bff;
}
}
}
}
</style>