From 75f043dfa6660716364e66ee0b3cf99f44255686 Mon Sep 17 00:00:00 2001
From: DYL0109 <dn18191638832@163.com>
Date: 星期三, 16 四月 2025 19:20:36 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop1.0' into dyl_dev
---
zhitan-vue/src/views/alarmmanage/energyconsumption/energyConsumption.vue | 415 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 216 insertions(+), 199 deletions(-)
diff --git a/zhitan-vue/src/views/alarmmanage/energyconsumption/energyConsumption.vue b/zhitan-vue/src/views/alarmmanage/energyconsumption/energyConsumption.vue
index 38a308a..4a3a835 100644
--- a/zhitan-vue/src/views/alarmmanage/energyconsumption/energyConsumption.vue
+++ b/zhitan-vue/src/views/alarmmanage/energyconsumption/energyConsumption.vue
@@ -8,16 +8,28 @@
<div class="form-card">
<el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
<el-form-item label="鏈熼棿" prop="timeType">
- <el-select v-model="queryParams.timeType" placeholder="鏈熼棿" clearable style="width: 100%"
- @change="handleTimeType">
+ <el-select
+ v-model="queryParams.timeType"
+ placeholder="鏈熼棿"
+ clearable
+ style="width: 100%"
+ @change="handleTimeType"
+ >
<el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="鏃堕棿">
- <el-date-picker v-model="queryParams.dataTime" :clearable="false"
+ <el-date-picker
+ v-model="queryParams.dataTime"
+ :clearable="false"
:type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
- :format="queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'"
- value-format="YYYY-MM-DD" placeholder="鏃堕棿" style="width: 100%" />
+ :format="
+ queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
+ "
+ value-format="YYYY-MM-DD"
+ placeholder="鏃堕棿"
+ style="width: 100%"
+ />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
@@ -55,70 +67,69 @@
</template>
<script setup>
-import * as echarts from 'echarts';
-import { onMounted, reactive, ref } from 'vue';
-import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
-const { proxy } = getCurrentInstance();
-const { period } = proxy.useDict("period");
-let { alarm_record_category } = proxy.useDict("alarm_record_category");
+import * as echarts from "echarts"
+import { onMounted, reactive, ref } from "vue"
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
+const { proxy } = getCurrentInstance()
+const { period } = proxy.useDict("period")
+let { alarm_record_category } = proxy.useDict("alarm_record_category")
let energyTypeList = ref([])
function getEnergyTypeList() {
listEnergyTypeList().then((res) => {
- energyTypeList.value = res.data;
- });
+ energyTypeList.value = res.data
+ })
}
getEnergyTypeList()
function formatterLabel(list, value) {
- console.log(list, value);
+ console.log(list, value)
- let dict = list.find(item => item.enersno == value)
- return dict ? dict.enername : ''
+ let dict = list.find((item) => item.enersno == value)
+ return dict ? dict.enername : ""
}
-
let queryParams = ref({
timeType: null,
dataTime: null,
- nodeId: null
+ nodeId: null,
})
-import { getByNodeId, getCountInfo } from "@/api/alarmManage/alarmManage";
-import { el } from 'element-plus/es/locales.mjs';
-let form = ref({});
+import { getByNodeId, getCountInfo } from "@/api/alarmManage/alarmManage"
+import { el } from "element-plus/es/locales.mjs"
+let form = ref({})
let currentNode = ref()
function handleTimeType(e) {
- queryParams.value.timeType = e;
- queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
+ queryParams.value.timeType = e
+ queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}
function handleNodeClick(e) {
currentNode.value = e
queryParams.value.nodeId = e.id
- handleTimeType('YEAR')
+ handleTimeType("YEAR")
getByNodeIdFun()
}
function getByNodeIdFun() {
- getByNodeId(queryParams.value).then(res => {
+ getByNodeId(queryParams.value).then((res) => {
let alarmList = []
let energyList = []
let alarmNumberList = {
data: [],
- xAxisData: []
+ xAxisData: [],
}
- console.log(111, res);
+ console.log(111, res)
if (res.code == 200) {
let { data } = res
- alarmList = data.alarmProportion.map(item => {
+ alarmList = data.alarmProportion.map((item) => {
return {
name: proxy.selectDictLabel(alarm_record_category.value, item.energyName),
- value: item.percentage
+ value: item.percentage,
}
})
- energyList = data.energyProportion.map(item => {
+ energyList = data.energyProportion.map((item) => {
return {
name: formatterLabel(energyTypeList.value, item.energyName),
- value: item.percentage
+ value: item.percentage,
}
})
for (const item of data.chartDataList) {
@@ -126,9 +137,9 @@
alarmNumberList.data.push(item.yvalue)
}
- pieChart('Chart1', alarmList, '鎶ヨ绫诲瀷鍗犳瘮')
- pieChart('Chart2', energyList, '鑳芥簮绫诲瀷鍗犳瘮')
- getChart('Chart3', alarmNumberList)
+ pieChart("Chart1", alarmList, "鎶ヨ绫诲瀷鍗犳瘮")
+ pieChart("Chart2", energyList, "鑳芥簮绫诲瀷鍗犳瘮")
+ getChart("Chart3", alarmNumberList)
}
})
}
@@ -138,227 +149,233 @@
getByNodeIdFun()
}
function resetQuery() {
- handleTimeType('YEAR')
+ handleTimeType("YEAR")
getByNodeIdFun()
}
-
function pieChart(Id, data, name) {
- let total = 0;
+ let total = 0
data.forEach(function (val, idx, arr) {
- total += val.value;
+ total += val.value
})
- const myChart = echarts.init(document.getElementById(Id));
+ const myChart = echarts.init(document.getElementById(Id))
myChart.setOption({
- color: ['#4D94FF', '#00C27C', '#F0142F', '#F2D261', '#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
+ color: [
+ "#4D94FF",
+ "#00C27C",
+ "#F0142F",
+ "#F2D261",
+ "#0E7CE2",
+ "#FF8352",
+ "#E271DE",
+ "#F8456B",
+ "#00FFFF",
+ "#4AEAB0",
+ ],
grid: {
- top: '20%',
- left: '1%',
- right: '1%',
- bottom: '0%',
- containLabel: true
+ top: "20%",
+ left: "1%",
+ right: "1%",
+ bottom: "0%",
+ containLabel: true,
},
tooltip: {
- trigger: 'item'
+ trigger: "item",
},
legend: {
- orient: 'vertical',
- top: 'center',
- icon: 'circle',
+ orient: "vertical",
+ top: "center",
+ icon: "circle",
itemWidth: 14,
itemHeight: 14,
- right: '2%',
+ right: "2%",
itemGap: 10,
textStyle: {
- align: 'left',
- verticalAlign: 'middle',
+ align: "left",
+ verticalAlign: "middle",
rich: {
name: {
- color: '#999',
+ color: "#999",
fontSize: 14,
},
value: {
- color: '#999',
+ color: "#999",
fontSize: 14,
},
rate: {
- color: '#999',
+ color: "#999",
fontSize: 14,
},
},
},
formatter: (name) => {
if (data.length) {
- let target, percent;
+ let target, percent
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
- target = data[i].value;
- percent = ((target / total) * 100).toFixed(2);
+ target = data[i].value
+ percent = ((target / total) * 100).toFixed(2)
}
}
- return `{name|${name} }{value| ${target}} {rate| ${percent}%}`;
-
+ return `{name|${name} }{value| ${target}} {rate| ${percent}%}`
} else {
- return `{name|${name} }{value| ${0}} {rate| ${0}%}`;
-
+ return `{name|${name} }{value| ${0}} {rate| ${0}%}`
}
},
},
- series: [{
- name,
- type: 'pie',
- radius: ['45%', '70%'],
- center: ['35%', '50%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- overflow: 'none',
- formatter: '{b} {d}% \n {c} tce',
+ series: [
+ {
+ name,
+ type: "pie",
+ radius: ["45%", "70%"],
+ center: ["35%", "50%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ overflow: "none",
+ formatter: "{b} {d}% \n {c} tce",
+ },
+ data,
},
- data,
- }]
+ ],
})
}
function getChart(Id, dataList) {
- const myChart3 = echarts.init(document.getElementById(Id));
- myChart3.setOption(
- {
-
- grid: {
- left: '3%',
- right: '2%',
- bottom: '2%',
- containLabel: true
+ const myChart3 = echarts.init(document.getElementById(Id))
+ myChart3.setOption({
+ grid: {
+ left: "3%",
+ right: "2%",
+ bottom: "2%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ xAxis: {
+ type: "category",
+ // boundaryGap: false,
+ data: dataList.xAxisData,
+ axisPointer: {
+ type: "shadow",
},
- tooltip: {
- trigger: 'axis',
-
+ axisTick: {
+ show: false,
+ alignWithLabel: true,
+ length: 5,
},
- xAxis: {
- type: 'category',
- // boundaryGap: false,
- data: dataList.xAxisData,
- axisPointer: {
- type: 'shadow'
+ // 鍧愭爣杞村埢搴︾嚎鏍峰紡
+ axisTick: {
+ show: false,
+ length: 5,
+ lineStyle: {
+ color: "#ddd",
},
- axisTick: {
- show: false,
- alignWithLabel: true,
- length: 5
- },
- // 鍧愭爣杞村埢搴︾嚎鏍峰紡
- axisTick: {
- show: false,
- length: 5,
- lineStyle: {
- color: '#ddd'
- }
- },
-
- // 鍒嗗壊绾�
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: 'rgba(220,222,226,0.4)'
- }
- },
- axisLabel: {
- color: '#999',
- fontSize: 14,
- padding: [5, 0, 0, 0],
- // formatter: '{value} ml'
- }
},
- yAxis: {
- type: 'value',
- name: '锛堟锛�',
- // 璁剧疆鍚嶇О鏍峰紡
- nameTextStyle: {
- color: ' #CEE3FF',
- fontSize: 14,
- padding: [0, 0, 5, 0],
- },
- // 鍧愭爣杞村埢搴�
- axisTick: {
- show: false,
- alignWithLabel: true,
- length: 5
- },
- // 鍧愭爣杞村埢搴︾嚎鏍峰紡
- axisTick: {
- show: false,
- length: 5,
- lineStyle: {
- color: ''
- }
- },
- // 鍒嗗壊绾�
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: 'rgba(220,222,226,0.4)'
- }
+ // 鍒嗗壊绾�
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: "dashed",
+ color: "rgba(220,222,226,0.4)",
},
-
- // 鍧愭爣杞村埢搴﹂棿闅�
- // interval: '50',
- // // 鍧愭爣杞存渶灏忓��
- // min: 'dataMin',
- // // 鍧愭爣杞存渶澶у��
- // max: 'dataMax',
- // // 鍧愭爣杞村皬鏁扮偣绮惧害
- // precision: 0,
- // // 鍧愭爣杞村埢搴︽枃鏈殑甯冨眬鏈濆悜
- // position: 'left'
- axisLabel: {
- color: '#B2B8C2',
- fontSize: 14,
- // formatter: '{value} ml'
- }
},
- series: [
- {
- name: "鎶ヨ娆℃暟",
- type: "bar",
- barWidth: '17',
- stack: 'number',
- data: dataList.data,
- tooltip: {
- show: false,
- }
+ axisLabel: {
+ color: "#999",
+ fontSize: 14,
+ padding: [5, 0, 0, 0],
+ // formatter: '{value} ml'
+ },
+ },
+ yAxis: {
+ type: "value",
+ name: "锛堟锛�",
+ // 璁剧疆鍚嶇О鏍峰紡
+ nameTextStyle: {
+ color: " #CEE3FF",
+ fontSize: 14,
+ padding: [0, 0, 5, 0],
+ },
+ // 鍧愭爣杞村埢搴�
+ axisTick: {
+ show: false,
+ alignWithLabel: true,
+ length: 5,
+ },
+ // 鍧愭爣杞村埢搴︾嚎鏍峰紡
+ axisTick: {
+ show: false,
+ length: 5,
+ lineStyle: {
+ color: "",
},
- {
- name: '鎶ヨ娆℃暟',
- type: 'line',
- symbol: 'none', // 璁剧疆涓� 'none' 鍘绘帀鍦嗙偣
- lineStyle: {
- color: '#EE0303'
- },
- data: dataList.data,
- },
- ]
- })
+ },
- window.addEventListener("resize", () => {
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- }, { passive: true });
+ // 鍒嗗壊绾�
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color: "rgba(220,222,226,0.4)",
+ },
+ },
+
+ // 鍧愭爣杞村埢搴﹂棿闅�
+ // interval: '50',
+ // // 鍧愭爣杞存渶灏忓��
+ // min: 'dataMin',
+ // // 鍧愭爣杞存渶澶у��
+ // max: 'dataMax',
+ // // 鍧愭爣杞村皬鏁扮偣绮惧害
+ // precision: 0,
+ // // 鍧愭爣杞村埢搴︽枃鏈殑甯冨眬鏈濆悜
+ // position: 'left'
+ axisLabel: {
+ color: "#B2B8C2",
+ fontSize: 14,
+ // formatter: '{value} ml'
+ },
+ },
+ series: [
+ {
+ name: "鎶ヨ娆℃暟",
+ type: "bar",
+ barWidth: "12",
+ stack: "number",
+ data: dataList.data,
+ tooltip: {
+ show: false,
+ },
+ },
+ {
+ name: "鎶ヨ娆℃暟",
+ type: "line",
+ symbol: "none", // 璁剧疆涓� 'none' 鍘绘帀鍦嗙偣
+ lineStyle: {
+ color: "#EE0303",
+ },
+ data: dataList.data,
+ },
+ ],
+ })
+
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize()
+ myChart2.resize()
+ myChart3.resize()
+ },
+ { passive: true }
+ )
}
-
-
-
-
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";
-
.chart-box {
- height: calc((100vh - 410px)/2) !important;
+ height: calc((100vh - 410px) / 2) !important;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3