- <template>
- <div id="wszrfxJCFX">
- <div id="HeaderEcharts"></div>
- <el-divider>管网历史分析</el-divider>
- <div id="BodyFenXi">
- <div class="list1">
- <div class="listLabel">问题日期</div>
- <div class="listValue">{{ AllData.WTRQ }}</div>
- </div>
- <div class="list1">
- <div class="listLabel">天气情况</div>
- <div class="listValue">{{ AllData.TQ }}</div>
- </div>
- <div class="list2">
- <div class="listLabel">问题分析</div>
- <div class="listValue">
- <p>条件库:</p>
- {{ AllData.TJK }}
- <p>推论库:</p>
- {{ AllData.TLK }}
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="wszrfxJCFX">
- import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
- import * as echarts from "echarts";
- import { getEchart } from "@/api/MonitorAssetsOnMap";
- import { riskAnalysisReason } from "@/api/MonitoringAnalysis";
- import { rainCalendar } from "@/api/FloodControlAndDrainage";
-
- import moment from "moment";
- 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: [],
- yAxis_Name: "降雨量",
- yAxis2: [],
- yAxis2_Name: "流速",
- yAxis3: [],
- yAxis3_Name: "水深",
- yAxis4: [],
- yAxis4_Name: "电导率",
- xAxis: [],
- TJK: "",
- TLK: "",
- WTRQ: "",
- TQ: "",
- });
- const Timers = ref([
- moment().subtract(3, "day").format("YYYY-MM-DD HH:mm:ss"),
- moment().format("YYYY-MM-DD HH:mm:ss"),
- ]);
- 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,
- AllData.yAxis4_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,
- min: 0,
- axisLabel: {
- color: "#AAC1CF",
- show: true,
- formatter: function (value) {
- return value.toFixed(2); // 保留两位小数
- },
- },
- nameTextStyle: {
- color: "#19D5FF",
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#2161a8",
- },
- },
- alignTicks: true,
- position: "left",
- inverse: true,
- nameLocation: "start",
- offset: 60,
- },
- {
- name: AllData.yAxis2_Name,
- type: "value",
- // minInterval: 1,
- min: 0,
- axisLabel: {
- color: "#AAC1CF",
- show: true,
- formatter: function (value) {
- return value.toFixed(2); // 保留两位小数
- },
- },
- nameTextStyle: {
- color: "#55FFC5",
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#2161a8",
- },
- },
- alignTicks: true,
- position: "right",
- offset: 60,
- },
- {
- name: AllData.yAxis3_Name,
- type: "value",
- // minInterval: 1,
- min: 0,
- axisLabel: {
- color: "#AAC1CF",
- show: true,
- formatter: function (value) {
- return value.toFixed(2); // 保留两位小数
- },
- },
- nameTextStyle: {
- color: "#99FF55",
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#2161a8",
- },
- },
- alignTicks: true,
- offset: 0,
- },
-
- {
- name: AllData.yAxis4_Name,
- type: "value",
- // minInterval: 1,
- min: 0,
- axisLabel: {
- color: "#AAC1CF",
- show: true,
- formatter: function (value) {
- return value.toFixed(2); // 保留两位小数
- },
- },
- nameTextStyle: {
- color: "#FFC155",
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#2161a8",
- },
- },
- alignTicks: true,
- position: "left",
- offset: 0,
- },
- ],
- 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: "#55FFC5", // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: "#55FFC5", // 数据点颜色
- width: 4,
- },
- },
- {
- name: AllData.yAxis3_Name,
- type: "line",
- data: AllData.yAxis3,
- yAxisIndex: 2,
- // 修改折线颜色
- lineStyle: {
- color: "#99FF55", // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: "#99FF55", // 数据点颜色
- },
- },
- {
- name: AllData.yAxis4_Name,
- type: "line",
- data: AllData.yAxis4,
- yAxisIndex: 3,
- // 修改折线颜色
- lineStyle: {
- color: "#FFC155", // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: "#FFC155", // 数据点颜色
- },
- },
- ],
- };
- 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: Timers.value[0],
- end: Timers.value[1],
- }).then((res) => {
- if (res && res.code == 200) {
- AllData.xAxis = res.data.times;
- res.data.datas.forEach((element) => {
- switch (element.dataKey) {
- case "cond":
- AllData.yAxis4 = element.datas;
- break;
- case "z":
- AllData.yAxis3 = element.datas;
- break;
- case "va":
- AllData.yAxis2 = element.datas;
- break;
- case "pn05":
- AllData.yAxis = element.datas;
- break;
- }
- });
- init();
- }
- });
- };
- const getFenXiData = () => {
- console.log(props);
-
- riskAnalysisReason({
- startTime: Timers.value[0],
- endTime: Timers.value[1],
- stCode: props.Getproperties.stCode,
- dataCode: props.Getproperties.dataCode,
- menuType: "wszrfxJCFX",
- }).then((res) => {
- if (res && res.code == 200) {
- let A = 1;
- let AFont = "";
- let B = 1;
- let BFont = "";
- if (res.data.reasonList.length > 0) {
- res.data.reasonList.forEach((element) => {
- AFont += `${A}:${element},`;
- A++;
- });
- } else {
- AFont = "无";
- }
- // debugger;
- if (res.data.inferList.length > 0) {
- res.data.inferList.forEach((element) => {
- BFont += `${B}:${element},`;
- B++;
- });
- } else {
- BFont = "无";
- }
-
- AllData.TJK = AFont;
- AllData.TLK = BFont;
- }
- });
- };
- const getWatherData = () => {
- AllData.WTRQ = moment(Timers.value[0]).format("YYYY-MM-DD");
- rainCalendar({
- queryTime: AllData.WTRQ,
- }).then((res) => {
- console.log(res);
- res.forEach((element) => {
- if (element.date == AllData.WTRQ) {
- AllData.TQ =
- element.value == 0
- ? element.weather
- : element.weather + "(" + element.value + "mm)";
- }
- });
- });
- };
- onMounted(() => {
- nextTick(() => {
- if (props.Getproperties.daterange) {
- Timers.value = props.Getproperties.daterange;
- }
- getChartsData();
- getFenXiData();
- getWatherData();
- window.addEventListener("resize", resizeTheChart);
- });
- });
- </script>
-
- <style lang="scss" scoped>
- #wszrfxJCFX {
- width: 100%;
- height: 100%;
- #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>