From 8b421fb49a874f54e85f9cbf51c8bfa2f90d5c4c Mon Sep 17 00:00:00 2001 From: ali <ali9696@163.com> Date: 星期一, 10 二月 2025 10:32:43 +0800 Subject: [PATCH] barWidth --- zhitan-vue/src/views/alarmmanage/energyconsumption/energyConsumption.vue | 415 ++++++----- zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue | 286 +++---- zhitan-vue/src/views/alarmmanage/measuremen/measuremen.vue | 417 ++++++----- zhitan-vue/src/views/carbonemission/carbonEmission.vue | 268 +++---- zhitan-vue/src/views/peakvalley/period/period.vue | 308 +++----- zhitan-vue/src/views/peakvalley/timeSharing/timeSharing.vue | 329 ++------ 6 files changed, 893 insertions(+), 1,130 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> diff --git a/zhitan-vue/src/views/alarmmanage/measuremen/measuremen.vue b/zhitan-vue/src/views/alarmmanage/measuremen/measuremen.vue index b46e7a2..cbd3852 100644 --- a/zhitan-vue/src/views/alarmmanage/measuremen/measuremen.vue +++ b/zhitan-vue/src/views/alarmmanage/measuremen/measuremen.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: 120px" - @change="handleTimeType"> + <el-select + v-model="queryParams.timeType" + placeholder="鏈熼棿" + clearable + style="width: 120px" + @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> @@ -27,8 +39,10 @@ </div> <div class="mt20 mb20 text-center data-item"> - 鏈敤鑳藉崟鍏冩寚鏍�<span>{{ dataArray.indexCount }}</span>涓紝 - 鏈勾搴︽姤璀�<span>{{ dataArray.yearCount }}</span>娆★紝鏈湀<span>{{ dataArray.monthCount }}</span>娆� + 鏈敤鑳藉崟鍏冩寚鏍�<span>{{ dataArray.indexCount }}</span + >涓紝 鏈勾搴︽姤璀�<span>{{ dataArray.yearCount }}</span + >娆★紝鏈湀<span>{{ dataArray.monthCount }}</span + >娆� </div> <el-row :gutter="24" class="mb20"> <el-col :span="12"> @@ -60,71 +74,70 @@ </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; - queryParams.value.energyType = energyTypeList.value[0].enersno; - }); + energyTypeList.value = res.data + queryParams.value.energyType = energyTypeList.value[0].enersno + }) } getEnergyTypeList() function formatterLabel(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(period.value[0].value); + handleTimeType(period.value[0].value) getByNodeIdFun() } function getByNodeIdFun() { - getByNodeId(queryParams.value).then(res => { + getByNodeId(queryParams.value).then((res) => { let alarmList = [] let energyList = [] let alarmNumberList = { data: [], - xAxisData: [] + xAxisData: [], } 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.count, - percentage: item.percentage + percentage: item.percentage, } }) - energyList = data.energyProportion.map(item => { + energyList = data.energyProportion.map((item) => { return { name: formatterLabel(energyTypeList.value, item.energyName), value: item.count, - percentage: item.percentage + percentage: item.percentage, } }) for (const item of data.chartDataList) { @@ -132,9 +145,9 @@ alarmNumberList.data.push(item.yvalue) } - pieChart('Chart1', alarmList, '鎶ヨ绫诲瀷鍗犳瘮') - pieChart('Chart2', energyList, '鑳芥簮绫诲瀷鍗犳瘮') - getChart('Chart3', alarmNumberList) + pieChart("Chart1", alarmList, "鎶ヨ绫诲瀷鍗犳瘮") + pieChart("Chart2", energyList, "鑳芥簮绫诲瀷鍗犳瘮") + getChart("Chart3", alarmNumberList) } }) } @@ -144,16 +157,16 @@ getByNodeIdFun() } function resetQuery() { - handleTimeType('YEAR') + handleTimeType("YEAR") getByNodeIdFun() } let dataArray = ref({ indexCount: 0, yearCount: 0, - monthCount: 0 + monthCount: 0, }) function getCountInfoFun() { - getCountInfo(queryParams.value).then(res => { + getCountInfo(queryParams.value).then((res) => { if (res.code == 200) { dataArray.value = res.data } @@ -163,45 +176,56 @@ getCountInfoFun() function pieChart(Id, data, name) { console.log(data) - 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, }, }, @@ -209,167 +233,165 @@ formatter: (name) => { for (let i = 0; i < data.length; i++) { if (data[i].name === name) { - return `{name|${data[i].name} }{value| ${data[i].value}} {rate| ${data[i].percentage}%}`; + return `{name|${data[i].name} }{value| ${data[i].value}} {rate| ${data[i].percentage}%}` } } }, }, - 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; } .data-item { @@ -378,7 +400,7 @@ font-weight: bold; span { - color: #397AEE; + color: #397aee; margin: 0 5px; } } @@ -390,10 +412,9 @@ font-weight: bold; span { - color: #397AEE; + color: #397aee; margin: 0 5px; } } - } -</style> \ No newline at end of file +</style> diff --git a/zhitan-vue/src/views/carbonemission/carbonEmission.vue b/zhitan-vue/src/views/carbonemission/carbonEmission.vue index 8d49140..550abd7 100644 --- a/zhitan-vue/src/views/carbonemission/carbonEmission.vue +++ b/zhitan-vue/src/views/carbonemission/carbonEmission.vue @@ -8,42 +8,40 @@ <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true"> <el-form-item label="鏈熼棿" prop="timeType"> - <el-select v-model="queryParams.timeType" placeholder="鏈熼棿" clearable style="width: 120px" - @change="handleTimeType"> + <el-select + v-model="queryParams.timeType" + placeholder="鏈熼棿" + clearable + style="width: 120px" + @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" :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%" /> + <el-date-picker + v-model="queryParams.dataTime" + :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%" + /> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> <el-form-item> - <el-button type="primary" icon="Download" @click="handleExport"> - 瀵煎嚭 - </el-button> + <el-button type="primary" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> </el-form-item> </el-form> </div> - <div style=" - height: calc(100vh - 220px) !important; - max-height: calc(100vh - 220px) !important; - overflow-y: auto; - "> + <div + style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto" + > <div class="card-list" v-if="listTop.length > 1"> <el-button @click="dialogVisible = true"> 鏌ョ湅鏇村 </el-button> </div> @@ -52,9 +50,12 @@ <template v-for="(item, index) in row" :key="index"> <div class="card-list-item"> <div class="item-top"> - <div class="top-icon" :style="{ - backgroundImage: 'url(' + bgList[index].icon + ')', - }" /> + <div + class="top-icon" + :style="{ + backgroundImage: 'url(' + bgList[index].icon + ')', + }" + /> <div class="top-right"> {{ item.allEneryType }} </div> @@ -69,12 +70,10 @@ <div class="bottom-left">鍚屾瘮</div> <div class="bottom-right" :style="{ color: bgList[index].color }"> {{ Math.abs(item.yoyEnery) }}% - <el-icon v-if="!!item.yoyEnery" :color="item.yoyEnery > 0 - ? 'green' - : item.yoyEnery < 0 - ? 'red' - : '' - "> + <el-icon + v-if="!!item.yoyEnery" + :color="item.yoyEnery > 0 ? 'green' : item.yoyEnery < 0 ? 'red' : ''" + > <Top v-if="item.yoyEnery > 0" /> <Bottom v-if="item.yoyEnery < 0" /> </el-icon> @@ -84,25 +83,23 @@ </template> </div> </template> - <BaseCard :title="queryParams.nodeName + - '-纰虫帓鏀鹃噺鍚岀幆姣�(' + - queryParams.dataTime + - ')' - "> + <BaseCard :title="queryParams.nodeName + '-纰虫帓鏀鹃噺鍚岀幆姣�(' + queryParams.dataTime + ')'"> <div class="chart-box" v-loading="loading"> <div id="Chart1" /> </div> </BaseCard> - <BaseCard :title="queryParams.nodeName + - '-纰虫帓鏀鹃噺缁熻鍒嗘瀽琛�(' + - queryParams.dataTime + - ')' - "> + <BaseCard :title="queryParams.nodeName + '-纰虫帓鏀鹃噺缁熻鍒嗘瀽琛�(' + queryParams.dataTime + ')'"> <div class="table-box"> <el-table :data="listBottom" v-loading="loading"> <el-table-column label="鏃堕棿" align="center" key="xaxis" prop="xaxis" :show-overflow-tooltip="true" /> - <el-table-column label="鐮存帓鏀鹃噺(tCO鈧俥) - " align="center" key="yaxis" prop="yaxis" :show-overflow-tooltip="true" /> + <el-table-column + label="鐮存帓鏀鹃噺(tCO鈧俥) + " + align="center" + key="yaxis" + prop="yaxis" + :show-overflow-tooltip="true" + /> <el-table-column label="鍚屾瘮" align="center" key="yoy" prop="yoy" :show-overflow-tooltip="true" /> <el-table-column label="鐜瘮" align="center" key="qoq" prop="qoq" :show-overflow-tooltip="true" /> </el-table> @@ -117,9 +114,12 @@ <template v-for="(item, index) in row" :key="index"> <div class="card-list-item"> <div class="item-top"> - <div class="top-icon" :style="{ - backgroundImage: 'url(' + bgList[index].icon + ')', - }" /> + <div + class="top-icon" + :style="{ + backgroundImage: 'url(' + bgList[index].icon + ')', + }" + /> <div class="top-right"> {{ item.allEneryType }} </div> @@ -134,12 +134,7 @@ <div class="bottom-left">鍚屾瘮</div> <div class="bottom-right" :style="{ color: bgList[index].color }"> {{ Math.abs(item.yoyEnery) }}% - <el-icon v-if="!!item.yoyEnery" :color="item.yoyEnery > 0 - ? 'green' - : item.yoyEnery < 0 - ? 'red' - : '' - "> + <el-icon v-if="!!item.yoyEnery" :color="item.yoyEnery > 0 ? 'green' : item.yoyEnery < 0 ? 'red' : ''"> <Top v-if="item.yoyEnery > 0" /> <Bottom v-if="item.yoyEnery < 0" /> </el-icon> @@ -153,29 +148,26 @@ </div> </template> <script setup name="carbonEmission"> -import { - listUpCarbonemission, - listMiddleCarbonemission, -} from "@/api/carbonemission/carbonemission"; -import * as echarts from "echarts"; -const { proxy } = getCurrentInstance(); -import { useRoute } from "vue-router"; -const { period } = proxy.useDict("period"); -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); +import { listUpCarbonemission, listMiddleCarbonemission } from "@/api/carbonemission/carbonemission" +import * as echarts from "echarts" +const { proxy } = getCurrentInstance() +import { useRoute } from "vue-router" +const { period } = proxy.useDict("period") +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() watch( () => settingsStore.sideTheme, (val) => { - getList(); + getList() } -); -const loading = ref(false); -const dialogVisible = ref(false); -import icon1 from "@/assets/images/period/icon1.png"; -import icon2 from "@/assets/images/period/icon2.png"; -import icon3 from "@/assets/images/period/icon3.png"; -import icon4 from "@/assets/images/period/icon4.png"; -import icon5 from "@/assets/images/period/icon5.png"; +) +const loading = ref(false) +const dialogVisible = ref(false) +import icon1 from "@/assets/images/period/icon1.png" +import icon2 from "@/assets/images/period/icon2.png" +import icon3 from "@/assets/images/period/icon3.png" +import icon4 from "@/assets/images/period/icon4.png" +import icon5 from "@/assets/images/period/icon5.png" const bgList = ref([ { icon: icon1, @@ -197,9 +189,9 @@ icon: icon5, color: "#78e801", }, -]); -const listTop = ref([]); -const listBottom = ref([]); +]) +const listTop = ref([]) +const listBottom = ref([]) const data = reactive({ queryParams: { nodeId: null, @@ -208,23 +200,23 @@ dataTime: null, }, query: { ...useRoute().query }, -}); -const { queryParams, query } = toRefs(data); +}) +const { queryParams, query } = toRefs(data) /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; - handleTimeType(period.value[0].value); - handleQuery(); + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + handleTimeType(period.value[0].value) + handleQuery() } 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 getList() { - loading.value = true; - listTop.value = []; + loading.value = true + listTop.value = [] listUpCarbonemission( proxy.addDateRange({ ...queryParams.value, @@ -233,15 +225,15 @@ ).then((res) => { res.data.upData.map((item, index) => { if (index % 5 === 0) { - listTop.value.push(res.data.upData.slice(index, index + 5)); + listTop.value.push(res.data.upData.slice(index, index + 5)) } - }); - }); + }) + }) // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛dispose鏃х殑瀹炰緥 if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { - echarts.dispose(document.getElementById("Chart1")); + echarts.dispose(document.getElementById("Chart1")) } - const myChart1 = echarts.init(document.getElementById("Chart1")); + const myChart1 = echarts.init(document.getElementById("Chart1")) listMiddleCarbonemission( proxy.addDateRange({ emissionType: "allType", @@ -250,19 +242,19 @@ }) ).then((res) => { if (!!res.code && res.code == 200) { - loading.value = false; - let xaxis = []; - let yaxis = []; - let yoy = []; - let qoq = []; + loading.value = false + let xaxis = [] + let yaxis = [] + let yoy = [] + let qoq = [] if (!!res.data) { res.data.map((item) => { - xaxis.push(item.xaxis); - yaxis.push(!!item.yaxis ? item.yaxis : 0); - yoy.push(!!item.yoy ? item.yoy : 0); - qoq.push(!!item.qoq ? item.qoq : 0); - }); - listBottom.value = res.data; + xaxis.push(item.xaxis) + yaxis.push(!!item.yaxis ? item.yaxis : 0) + yoy.push(!!item.yoy ? item.yoy : 0) + qoq.push(!!item.qoq ? item.qoq : 0) + }) + listBottom.value = res.data } setTimeout(() => { myChart1.setOption({ @@ -273,10 +265,7 @@ type: "shadow", textStyle: { fontSize: 14, - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, }, @@ -292,8 +281,7 @@ itemWidth: 14, itemHeight: 10, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, xAxis: { @@ -304,10 +292,7 @@ axisLine: { show: true, lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -320,8 +305,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [5, 0, 0, 0], // formatter: '{value} ml' @@ -333,10 +317,7 @@ name: "tCO鈧俥", type: "value", nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -347,10 +328,7 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -360,10 +338,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, @@ -372,10 +347,7 @@ name: "%", alignTicks: true, nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -389,20 +361,14 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, splitArea: { show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, @@ -411,7 +377,7 @@ { name: "纰虫帓鏀鹃噺", type: "bar", - barWidth: "27", + barWidth: "12", itemStyle: { borderRadius: [15, 15, 0, 0], }, @@ -438,29 +404,29 @@ data: qoq, }, ], - }); - }, 100); + }) + }, 100) window.addEventListener( "resize", () => { - myChart1.resize(); + myChart1.resize() }, { passive: true } - ); + ) } - }); + }) } // 纰虫帓鏀剧鐞�-纰虫帓鏀鹃噺鏍哥畻-鎼滅储 function handleQuery() { - getList(); + getList() } // 纰虫帓鏀剧鐞�-纰虫帓鏀鹃噺鏍哥畻-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - queryParams.value.timeType = null; - queryParams.value.dataTime = null; - handleTimeType(period.value[0].value); - handleQuery(); + proxy.resetForm("queryRef") + queryParams.value.timeType = null + queryParams.value.dataTime = null + handleTimeType(period.value[0].value) + handleQuery() } // 纰虫帓鏀剧鐞�-纰虫帓鏀鹃噺鏍哥畻-瀵煎嚭 function handleExport() { @@ -472,7 +438,7 @@ ...query.value, }, `${queryParams.value.nodeName}-纰虫帓鏀鹃噺鏍哥畻_${new Date().getTime()}.xlsx` - ); + ) } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/peakvalley/period/period.vue b/zhitan-vue/src/views/peakvalley/period/period.vue index c550828..749fa2e 100644 --- a/zhitan-vue/src/views/peakvalley/period/period.vue +++ b/zhitan-vue/src/views/peakvalley/period/period.vue @@ -6,11 +6,7 @@ </div> <div class="page-container-right"> <div class="form-card"> - <el-form - :model="queryParams" - ref="queryRef" - :inline="true" - > + <el-form :model="queryParams" ref="queryRef" :inline="true"> <el-form-item label="鏃堕棿" prop="queryTime"> <el-date-picker v-model="queryParams.queryTime" @@ -22,39 +18,22 @@ /> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> </el-form> </div> <div - style=" - height: calc(100vh - 205px) !important; - max-height: calc(100vh - 205px) !important; - overflow-y: auto; - " + style="height: calc(100vh - 205px) !important; max-height: calc(100vh - 205px) !important; overflow-y: auto" v-loading="loading" > <div class="card-list"> - <div - class="card-list-item" - v-for="item in periodList" - :key="item.title" - > + <div class="card-list-item" v-for="item in periodList" :key="item.title"> <div class="item-top"> - <div - class="icon" - :style="{ backgroundImage: 'url(' + item.icon + ')' }" - ></div> + <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div> <div class="name">{{ item.title }}</div> </div> - <div - class="item-bottom" - v-for="(node, nodeIndex) in item.data" - :key="nodeIndex" - > + <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex"> <div class="bottom-left">{{ node.label }}</div> <div class="bottom-right" :style="{ color: item.color }"> {{ node.value }} @@ -62,12 +41,12 @@ </div> </div> </div> - <BaseCard :title="queryParams.nodeName+'-灏栧嘲骞宠胺鐢甸噺鍥�'"> + <BaseCard :title="queryParams.nodeName + '-灏栧嘲骞宠胺鐢甸噺鍥�'"> <div class="chart-box"> <div id="Chart1" /> </div> </BaseCard> - <BaseCard :title="queryParams.nodeName+'-灏栧嘲骞宠胺鐢佃垂鍥�'"> + <BaseCard :title="queryParams.nodeName + '-灏栧嘲骞宠胺鐢佃垂鍥�'"> <div class="chart-box"> <div id="Chart2" /> </div> @@ -78,24 +57,24 @@ </div> </template> <script setup name="period"> -import { listPeriod } from "@/api/peakValley/period"; -import * as echarts from "echarts"; -const { proxy } = getCurrentInstance(); -import { useRoute } from "vue-router"; -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); +import { listPeriod } from "@/api/peakValley/period" +import * as echarts from "echarts" +const { proxy } = getCurrentInstance() +import { useRoute } from "vue-router" +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() watch( () => settingsStore.sideTheme, (val) => { - getList(); + getList() } -); -const loading = ref(false); -import icon1 from "@/assets/images/period/icon1.png"; -import icon2 from "@/assets/images/period/icon2.png"; -import icon3 from "@/assets/images/period/icon3.png"; -import icon4 from "@/assets/images/period/icon4.png"; -import icon5 from "@/assets/images/period/icon5.png"; +) +const loading = ref(false) +import icon1 from "@/assets/images/period/icon1.png" +import icon2 from "@/assets/images/period/icon2.png" +import icon3 from "@/assets/images/period/icon3.png" +import icon4 from "@/assets/images/period/icon4.png" +import icon5 from "@/assets/images/period/icon5.png" const periodList = ref([ { icon: icon1, @@ -204,7 +183,7 @@ }, ], }, -]); +]) const data = reactive({ queryParams: { nodeId: null, @@ -213,121 +192,90 @@ queryTime: null, }, query: { ...useRoute().query }, -}); -const { queryParams, query } = toRefs(data); +}) +const { queryParams, query } = toRefs(data) /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; - queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM"); - handleQuery(); + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM") + handleQuery() } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋锋椂娈电粺璁�-鍒楄〃 function getList() { - loading.value = true; + loading.value = true listPeriod( proxy.addDateRange({ ...queryParams.value, ...query.value, }) ).then((res) => { - loading.value = false; + loading.value = false if (!!res.code && res.code == 200) { if (!!res.data.totalVO) { - periodList.value[0].data[0].value = !!res.data.totalVO - .totalPowerConsumption + periodList.value[0].data[0].value = !!res.data.totalVO.totalPowerConsumption ? res.data.totalVO.totalPowerConsumption - : 0; - periodList.value[0].data[1].value = !!res.data.totalVO.totalCost - ? res.data.totalVO.totalCost - : 0; + : 0 + periodList.value[0].data[1].value = !!res.data.totalVO.totalCost ? res.data.totalVO.totalCost : 0 - periodList.value[1].data[0].value = !!res.data.totalVO - .tipPowerConsumption + periodList.value[1].data[0].value = !!res.data.totalVO.tipPowerConsumption ? res.data.totalVO.tipPowerConsumption - : 0; + : 0 periodList.value[1].data[1].value = - (!!res.data.totalVO.tipPowerProportion - ? res.data.totalVO.tipPowerProportion - : 0) + "%"; - periodList.value[1].data[2].value = !!res.data.totalVO.tipPowerCost - ? res.data.totalVO.tipPowerCost - : 0; + (!!res.data.totalVO.tipPowerProportion ? res.data.totalVO.tipPowerProportion : 0) + "%" + periodList.value[1].data[2].value = !!res.data.totalVO.tipPowerCost ? res.data.totalVO.tipPowerCost : 0 periodList.value[1].data[3].value = - (!!res.data.totalVO.tipPowerCostProportion - ? res.data.totalVO.tipPowerCostProportion - : 0) + "%"; + (!!res.data.totalVO.tipPowerCostProportion ? res.data.totalVO.tipPowerCostProportion : 0) + "%" - periodList.value[2].data[0].value = !!res.data.totalVO - .peakPowerConsumption + periodList.value[2].data[0].value = !!res.data.totalVO.peakPowerConsumption ? res.data.totalVO.peakPowerConsumption - : 0; + : 0 periodList.value[2].data[1].value = - (!!res.data.totalVO.peakPowerProportion - ? res.data.totalVO.peakPowerProportion - : 0) + "%"; - periodList.value[2].data[2].value = !!res.data.totalVO.peakPowerCost - ? res.data.totalVO.peakPowerCost - : 0; + (!!res.data.totalVO.peakPowerProportion ? res.data.totalVO.peakPowerProportion : 0) + "%" + periodList.value[2].data[2].value = !!res.data.totalVO.peakPowerCost ? res.data.totalVO.peakPowerCost : 0 periodList.value[2].data[3].value = - (!!res.data.totalVO.peakPowerCostProportion - ? res.data.totalVO.peakPowerCostProportion - : 0) + "%"; + (!!res.data.totalVO.peakPowerCostProportion ? res.data.totalVO.peakPowerCostProportion : 0) + "%" - periodList.value[3].data[0].value = !!res.data.totalVO - .flatPowerConsumption + periodList.value[3].data[0].value = !!res.data.totalVO.flatPowerConsumption ? res.data.totalVO.flatPowerConsumption - : 0; + : 0 periodList.value[3].data[1].value = - (!!res.data.totalVO.flatPowerProportion - ? res.data.totalVO.flatPowerProportion - : 0) + "%"; - periodList.value[3].data[2].value = !!res.data.totalVO.flatPowerCost - ? res.data.totalVO.flatPowerCost - : 0; + (!!res.data.totalVO.flatPowerProportion ? res.data.totalVO.flatPowerProportion : 0) + "%" + periodList.value[3].data[2].value = !!res.data.totalVO.flatPowerCost ? res.data.totalVO.flatPowerCost : 0 periodList.value[3].data[3].value = - (!!res.data.totalVO.flatPowerCostProportion - ? res.data.totalVO.flatPowerCostProportion - : 0) + "%"; + (!!res.data.totalVO.flatPowerCostProportion ? res.data.totalVO.flatPowerCostProportion : 0) + "%" - periodList.value[4].data[0].value = !!res.data.totalVO - .troughPowerConsumption + periodList.value[4].data[0].value = !!res.data.totalVO.troughPowerConsumption ? res.data.totalVO.troughPowerConsumption - : 0; + : 0 periodList.value[4].data[1].value = - (!!res.data.totalVO.troughPowerProportion - ? res.data.totalVO.troughPowerProportion - : 0) + "%"; - periodList.value[4].data[2].value = !!res.data.totalVO.troughPowerCost - ? res.data.totalVO.troughPowerCost - : 0; + (!!res.data.totalVO.troughPowerProportion ? res.data.totalVO.troughPowerProportion : 0) + "%" + periodList.value[4].data[2].value = !!res.data.totalVO.troughPowerCost ? res.data.totalVO.troughPowerCost : 0 periodList.value[4].data[3].value = - (!!res.data.totalVO.troughPowerCostProportion - ? res.data.totalVO.troughPowerCostProportion - : 0) + "%"; + (!!res.data.totalVO.troughPowerCostProportion ? res.data.totalVO.troughPowerCostProportion : 0) + "%" } // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛dispose鏃х殑瀹炰緥 if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { - echarts.dispose(document.getElementById("Chart1")); + echarts.dispose(document.getElementById("Chart1")) } if (echarts.getInstanceByDom(document.getElementById("Chart2"))) { - echarts.dispose(document.getElementById("Chart2")); + echarts.dispose(document.getElementById("Chart2")) } - const myChart1 = echarts.init(document.getElementById("Chart1")); - const myChart2 = echarts.init(document.getElementById("Chart2")); + const myChart1 = echarts.init(document.getElementById("Chart1")) + const myChart2 = echarts.init(document.getElementById("Chart2")) if (!!res.data.powerConsumptionList) { - let xdata = []; - let ytip = []; - let ypeak = []; - let yflat = []; - let ytrough = []; + let xdata = [] + let ytip = [] + let ypeak = [] + let yflat = [] + let ytrough = [] res.data.powerConsumptionList.map((item) => { - xdata.push(Number(item.xdata.slice(-2)) + "鏃�"); - ytip.push(!!item.ytip ? item.ytip : 0); - ypeak.push(!!item.ypeak ? item.ypeak : 0); - yflat.push(!!item.yflat ? item.yflat : 0); - ytrough.push(!!item.ytrough ? item.ytrough : 0); - }); + xdata.push(Number(item.xdata.slice(-2)) + "鏃�") + ytip.push(!!item.ytip ? item.ytip : 0) + ypeak.push(!!item.ypeak ? item.ypeak : 0) + yflat.push(!!item.yflat ? item.yflat : 0) + ytrough.push(!!item.ytrough ? item.ytrough : 0) + }) myChart1.setOption({ color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"], tooltip: { @@ -336,10 +284,7 @@ type: "shadow", textStyle: { fontSize: 14, - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, }, @@ -356,8 +301,7 @@ itemHeight: 10, // right: 0, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, xAxis: { @@ -365,10 +309,7 @@ axisLine: { show: true, lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -381,8 +322,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [5, 0, 0, 0], // formatter: '{value} ml' @@ -393,8 +333,7 @@ name: "鑰楃數閲�(KWH)", type: "value", nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -405,10 +344,7 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -418,8 +354,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, // formatter: '{value} ml' }, @@ -429,46 +364,46 @@ name: "灏�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: ytip, }, { name: "宄�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: ypeak, }, { name: "骞�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: yflat, }, { name: "璋�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: ytrough, }, ], - }); + }) } if (!!res.data.costList) { - let xdata = []; - let ytip = []; - let ypeak = []; - let yflat = []; - let ytrough = []; + let xdata = [] + let ytip = [] + let ypeak = [] + let yflat = [] + let ytrough = [] res.data.costList.map((item) => { - xdata.push(Number(item.xdata.slice(-2)) + "鏃�"); - ytip.push(!!item.ytip ? item.ytip : 0); - ypeak.push(!!item.ypeak ? item.ypeak : 0); - yflat.push(!!item.yflat ? item.yflat : 0); - ytrough.push(!!item.ytrough ? item.ytrough : 0); - }); + xdata.push(Number(item.xdata.slice(-2)) + "鏃�") + ytip.push(!!item.ytip ? item.ytip : 0) + ypeak.push(!!item.ypeak ? item.ypeak : 0) + yflat.push(!!item.yflat ? item.yflat : 0) + ytrough.push(!!item.ytrough ? item.ytrough : 0) + }) myChart2.setOption({ color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"], tooltip: { @@ -477,10 +412,7 @@ type: "shadow", textStyle: { fontSize: 14, - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, }, @@ -497,8 +429,7 @@ itemHeight: 10, // right: 0, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, xAxis: { @@ -506,10 +437,7 @@ axisLine: { show: true, lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -522,8 +450,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [5, 0, 0, 0], // formatter: '{value} ml' @@ -534,8 +461,7 @@ name: "鐢佃垂(鍏�)", type: "value", nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -546,10 +472,7 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -559,8 +482,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, // formatter: '{value} ml' }, @@ -570,49 +492,53 @@ name: "灏�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: ytip, }, { name: "宄�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: ypeak, }, { name: "骞�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: yflat, }, { name: "璋�", type: "bar", stack: "total", - barWidth: "27", + barWidth: "12", data: ytrough, }, ], - }); + }) } - window.addEventListener("resize", () => { - myChart1.resize(); - myChart2.resize(); - },{passive: true}); + window.addEventListener( + "resize", + () => { + myChart1.resize() + myChart2.resize() + }, + { passive: true } + ) } - }); + }) } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋锋椂娈电粺璁�-鎼滅储 function handleQuery() { - getList(); + getList() } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋锋椂娈电粺璁�-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM"); - handleQuery(); + proxy.resetForm("queryRef") + queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM") + handleQuery() } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/peakvalley/timeSharing/timeSharing.vue b/zhitan-vue/src/views/peakvalley/timeSharing/timeSharing.vue index 7acba9e..091d88f 100644 --- a/zhitan-vue/src/views/peakvalley/timeSharing/timeSharing.vue +++ b/zhitan-vue/src/views/peakvalley/timeSharing/timeSharing.vue @@ -17,24 +17,16 @@ /> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> <el-form-item> - <el-button type="primary" icon="Download" @click="handleExport"> - 瀵煎嚭 - </el-button> + <el-button type="primary" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> </el-form-item> </el-form> </div> <div - style=" - height: calc(100vh - 205px) !important; - max-height: calc(100vh - 205px) !important; - overflow-y: auto; - " + style="height: calc(100vh - 205px) !important; max-height: calc(100vh - 205px) !important; overflow-y: auto" v-loading="loading" > <el-row> @@ -55,16 +47,8 @@ <el-col :span="24"> <BaseCard :title="queryParams.nodeName + '-宄板钩璋峰垎鏃剁粺璁�'"> <div class="table-box"> - <el-table - :data="timeSharingList" - style="width: 100%" - show-summary - > - <el-table-column - label="鏃堕棿" - align="center" - show-overflow-tooltip - > + <el-table :data="timeSharingList" style="width: 100%" show-summary> + <el-table-column label="鏃堕棿" align="center" show-overflow-tooltip> <template #default="scope"> {{ proxy.dayjs(scope.row.time).format("HH鏃�") }} </template> @@ -77,12 +61,7 @@ show-overflow-tooltip width="120" /> - <el-table-column - prop="sharpFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - /> + <el-table-column prop="sharpFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip /> </el-table-column> <el-table-column label="宄�" align="center"> <el-table-column @@ -92,12 +71,7 @@ show-overflow-tooltip width="120" /> - <el-table-column - prop="peakFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - /> + <el-table-column prop="peakFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip /> </el-table-column> <el-table-column label="骞�" align="center"> <el-table-column @@ -107,12 +81,7 @@ show-overflow-tooltip width="120" /> - <el-table-column - prop="flatFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - /> + <el-table-column prop="flatFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip /> </el-table-column> <el-table-column label="璋�" align="center"> <el-table-column @@ -122,12 +91,7 @@ show-overflow-tooltip width="120" /> - <el-table-column - prop="valleyFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - /> + <el-table-column prop="valleyFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip /> </el-table-column> <el-table-column label="鍚堣" align="center"> <el-table-column @@ -137,12 +101,7 @@ show-overflow-tooltip width="120" /> - <el-table-column - prop="totalFee" - label="鎬荤數璐�(鍏�)" - align="center" - show-overflow-tooltip - /> + <el-table-column prop="totalFee" label="鎬荤數璐�(鍏�)" align="center" show-overflow-tooltip /> </el-table-column> <!-- <el-table-column label="鎿嶄綔" align="center"> <template #default="scope"> @@ -159,84 +118,27 @@ </div> </div> </div> - <el-dialog - v-model="timeSharingDialogTableVisible" - title="鏌ョ湅鍒嗘椂缁熻璇︽儏" - width="1300" - > + <el-dialog v-model="timeSharingDialogTableVisible" title="鏌ョ湅鍒嗘椂缁熻璇︽儏" width="1300"> <div class="table-box"> <el-table :data="viewTimeSharingList" style="width: 100%" height="420"> - <el-table-column - label="鏃堕棿" - align="center" - show-overflow-tooltip - width="200" - > + <el-table-column label="鏃堕棿" align="center" show-overflow-tooltip width="200"> <template #default="scope"> {{ scope.row.time }}鏃� </template> </el-table-column> <el-table-column label="灏�" align="center"> - <el-table-column - prop="sharpPower" - label="鑰楃數閲�(kWh)" - align="center" - show-overflow-tooltip - width="120" - /> - <el-table-column - prop="sharpFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - width="90" - /> + <el-table-column prop="sharpPower" label="鑰楃數閲�(kWh)" align="center" show-overflow-tooltip width="120" /> + <el-table-column prop="sharpFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip width="90" /> </el-table-column> <el-table-column label="宄�" align="center"> - <el-table-column - prop="peakPower" - label="鑰楃數閲�(kWh)" - align="center" - show-overflow-tooltip - width="120" - /> - <el-table-column - prop="peakFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - width="90" - /> + <el-table-column prop="peakPower" label="鑰楃數閲�(kWh)" align="center" show-overflow-tooltip width="120" /> + <el-table-column prop="peakFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip width="90" /> </el-table-column> <el-table-column label="骞�" align="center"> - <el-table-column - prop="flatPower" - label="鑰楃數閲�(kWh)" - align="center" - show-overflow-tooltip - width="120" - /> - <el-table-column - prop="flatFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - width="90" - /> + <el-table-column prop="flatPower" label="鑰楃數閲�(kWh)" align="center" show-overflow-tooltip width="120" /> + <el-table-column prop="flatFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip width="90" /> </el-table-column> <el-table-column label="璋�" align="center"> - <el-table-column - prop="valleyPower" - label="鑰楃數閲�(kWh)" - align="center" - show-overflow-tooltip - width="120" - /> - <el-table-column - prop="valleyFee" - label="鐢佃垂(鍏�)" - align="center" - show-overflow-tooltip - width="90" - /> + <el-table-column prop="valleyPower" label="鑰楃數閲�(kWh)" align="center" show-overflow-tooltip width="120" /> + <el-table-column prop="valleyFee" label="鐢佃垂(鍏�)" align="center" show-overflow-tooltip width="90" /> </el-table-column> <el-table-column label="鍚堣" align="center"> <el-table-column @@ -247,38 +149,16 @@ width="120" > <template #default="scope"> - {{ - scope.row.sharpPower + - scope.row.peakPower + - scope.row.flatPower + - scope.row.valleyPower - }} + {{ scope.row.sharpPower + scope.row.peakPower + scope.row.flatPower + scope.row.valleyPower }} </template> </el-table-column> - <el-table-column - prop="totalCost" - label="鎬荤數璐�(鍏�)" - align="center" - show-overflow-tooltip - width="100" - > + <el-table-column prop="totalCost" label="鎬荤數璐�(鍏�)" align="center" show-overflow-tooltip width="100"> <template #default="scope"> - {{ - scope.row.sharpFee + - scope.row.peakFee + - scope.row.flatFee + - scope.row.valleyFee - }} + {{ scope.row.sharpFee + scope.row.peakFee + scope.row.flatFee + scope.row.valleyFee }} </template> </el-table-column> </el-table-column> - <el-table-column - prop="nodeName" - label="鐢ㄨ兘鍗曞厓" - align="center" - show-overflow-tooltip - width="200" - /> + <el-table-column prop="nodeName" label="鐢ㄨ兘鍗曞厓" align="center" show-overflow-tooltip width="200" /> </el-table> </div> </el-dialog> @@ -286,23 +166,23 @@ </template> <script setup name="timeSharing"> -import { listTimeSharing } from "@/api/peakValley/timeSharing"; -import * as echarts from "echarts"; -const { proxy } = getCurrentInstance(); -import { useRoute } from "vue-router"; -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); +import { listTimeSharing } from "@/api/peakValley/timeSharing" +import * as echarts from "echarts" +const { proxy } = getCurrentInstance() +import { useRoute } from "vue-router" +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() watch( () => settingsStore.sideTheme, (val) => { - getList(); + getList() } -); -const loading = ref(false); -const timeSharingList = ref([]); -const timeSharingDialogTableVisible = ref(false); -const viewTimeSharingList = ref([]); -const nodeOptions = ref(undefined); +) +const loading = ref(false) +const timeSharingList = ref([]) +const timeSharingDialogTableVisible = ref(false) +const viewTimeSharingList = ref([]) +const nodeOptions = ref(undefined) const data = reactive({ queryParams: { nodeId: null, @@ -311,52 +191,52 @@ queryTime: null, }, query: { ...useRoute().query }, -}); -const { queryParams, query } = toRefs(data); +}) +const { queryParams, query } = toRefs(data) /** 閫氳繃鏉′欢杩囨护鑺傜偣 */ const filterNode = (value, data) => { - if (!value) return true; - return data.label.indexOf(value) !== -1; -}; + if (!value) return true + return data.label.indexOf(value) !== -1 +} function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; - queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD"); - handleQuery(); + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD") + handleQuery() } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋峰垎鏃剁粺璁�-鍒楄〃 function getList() { - loading.value = true; + loading.value = true listTimeSharing( proxy.addDateRange({ ...queryParams.value, ...query.value, }) ).then((res) => { - loading.value = false; + loading.value = false if (!!res.code && res.code == 200) { // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛dispose鏃х殑瀹炰緥 if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { - echarts.dispose(document.getElementById("Chart1")); + echarts.dispose(document.getElementById("Chart1")) } if (echarts.getInstanceByDom(document.getElementById("Chart2"))) { - echarts.dispose(document.getElementById("Chart2")); + echarts.dispose(document.getElementById("Chart2")) } - const myChart1 = echarts.init(document.getElementById("Chart1")); - const myChart2 = echarts.init(document.getElementById("Chart2")); + const myChart1 = echarts.init(document.getElementById("Chart1")) + const myChart2 = echarts.init(document.getElementById("Chart2")) if (!!res.data.lineChat) { - let xdata = []; - let ytip = []; - let ypeak = []; - let yflat = []; - let ytrough = []; + let xdata = [] + let ytip = [] + let ypeak = [] + let yflat = [] + let ytrough = [] res.data.lineChat.map((item) => { - xdata.push(Number(item.xdata.slice(-8).substring(0, 2)) + "鏃�"); - ytip.push(!!item.ytip ? item.ytip : 0); - ypeak.push(!!item.ypeak ? item.ypeak : 0); - yflat.push(!!item.yflat ? item.yflat : 0); - ytrough.push(!!item.ytrough ? item.ytrough : 0); - }); + xdata.push(Number(item.xdata.slice(-8).substring(0, 2)) + "鏃�") + ytip.push(!!item.ytip ? item.ytip : 0) + ypeak.push(!!item.ypeak ? item.ypeak : 0) + yflat.push(!!item.yflat ? item.yflat : 0) + ytrough.push(!!item.ytrough ? item.ytrough : 0) + }) myChart1.setOption({ color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"], grid: { @@ -378,8 +258,7 @@ itemHeight: 10, // right: 0, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, // data: ['灏�', '宄�', '骞�', '璋�'] }, @@ -388,10 +267,7 @@ axisLine: { show: true, lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -404,8 +280,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [5, 0, 0, 0], // formatter: '{value} ml' @@ -416,8 +291,7 @@ name: "鑰楃數閲�(KWH)", type: "value", nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -428,10 +302,7 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -441,8 +312,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, // formatter: '{value} ml' }, @@ -451,33 +321,33 @@ { name: "灏�", // ytip type: "bar", - barWidth: "27", + barWidth: "12", stack: "total", data: ytip, }, { name: "宄�", // ypeak type: "bar", - barWidth: "27", + barWidth: "12", stack: "total", data: ypeak, }, { name: "骞�", // yflat type: "bar", - barWidth: "27", + barWidth: "12", stack: "total", data: yflat, }, { name: "璋�", // ytrough type: "bar", - barWidth: "27", + barWidth: "12", stack: "total", data: ytrough, }, ], - }); + }) } if (!!res.data.pieChat) { myChart2.setOption({ @@ -492,8 +362,7 @@ itemGap: 10, // right: 0, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, series: [ @@ -505,70 +374,58 @@ label: { overflow: "none", formatter: "{b} {c}% ", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, data: [ { - value: !!res.data.pieChat.tip - ? Number(res.data.pieChat.tip) - : 0, + value: !!res.data.pieChat.tip ? Number(res.data.pieChat.tip) : 0, name: "灏�", }, { - value: !!res.data.pieChat.peak - ? Number(res.data.pieChat.peak) - : 0, + value: !!res.data.pieChat.peak ? Number(res.data.pieChat.peak) : 0, name: "宄�", }, { - value: !!res.data.pieChat.flat - ? Number(res.data.pieChat.flat) - : 0, + value: !!res.data.pieChat.flat ? Number(res.data.pieChat.flat) : 0, name: "骞�", }, { - value: !!res.data.pieChat.trough - ? Number(res.data.pieChat.trough) - : 0, + value: !!res.data.pieChat.trough ? Number(res.data.pieChat.trough) : 0, name: "璋�", }, ], }, ], - }); + }) } if (!!res.data.dataList) { - timeSharingList.value = !!res.data.dataList ? res.data.dataList : []; + timeSharingList.value = !!res.data.dataList ? res.data.dataList : [] } window.addEventListener( "resize", () => { - myChart1.resize(); - myChart2.resize(); + myChart1.resize() + myChart2.resize() }, { passive: true } - ); + ) } - }); + }) } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋峰垎鏃剁粺璁�-鏌ョ湅 function handleView(row) { - queryParams.value.key = row.timeStr; - timeSharingDialogTableVisible.value = true; - viewTimeSharingList.value = [row]; + queryParams.value.key = row.timeStr + timeSharingDialogTableVisible.value = true + viewTimeSharingList.value = [row] } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋峰垎鏃剁粺璁�-鎼滅储 function handleQuery() { - getList(); + getList() } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋峰垎鏃剁粺璁�-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - (queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")), - handleQuery(); + proxy.resetForm("queryRef") + ;(queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")), handleQuery() } // 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋峰垎鏃剁粺璁�-瀵煎嚭 function handleExport() { @@ -579,7 +436,7 @@ ...query.value, }, `${queryParams.value.nodeName}_宄板钩璋峰垎鏃剁粺璁${new Date().getTime()}.xlsx` - ); + ) } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue b/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue index c1fde4f..1c4a4ab 100644 --- a/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue +++ b/zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue @@ -4,19 +4,20 @@ <div class="page"> <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px"> <el-form-item label="鏃ユ湡绛涢��" prop="dataTime"> - <el-date-picker v-model="queryParams.dataTime" value-format="YYYY-MM-DD 00:00:00" type="date" - placeholder="鏃ユ湡绛涢��" style="width: 100%" /> + <el-date-picker + v-model="queryParams.dataTime" + value-format="YYYY-MM-DD 00:00:00" + type="date" + placeholder="鏃ユ湡绛涢��" + style="width: 100%" + /> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> <el-form-item> - <el-button type="primary" icon="Download" @click="handleExport"> - 瀵煎嚭 - </el-button> + <el-button type="primary" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> </el-form-item> </el-form> <div class="chart-box" v-loading="loading"> @@ -28,173 +29,148 @@ </template> <script setup name="chartModal"> -import * as echarts from "echarts"; -import { getEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor"; -const { proxy } = getCurrentInstance(); -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); -const dialogTableVisible = ref(false); +import * as echarts from "echarts" +import { getEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor" +const { proxy } = getCurrentInstance() +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() +const dialogTableVisible = ref(false) const data = reactive({ title: null, queryParams: { tagCode: null, dataTime: null, }, -}); -const { queryParams, title } = toRefs(data); -const loading = ref(false); -defineExpose({ handleOpen }); +}) +const { queryParams, title } = toRefs(data) +const loading = ref(false) +defineExpose({ handleOpen }) function handleOpen(row) { - title.value = row.name; - dialogTableVisible.value = true; - queryParams.value.nodeName = row.nodeName; - queryParams.value.tagCode = row.indexCode; - queryParams.value.unit = row.unit; - queryParams.value.name = row.name; - queryParams.value.dataTime = proxy - .dayjs(new Date()) - .format("YYYY-MM-DD 00:00:00"); - getList(); + title.value = row.name + dialogTableVisible.value = true + queryParams.value.nodeName = row.nodeName + queryParams.value.tagCode = row.indexCode + queryParams.value.unit = row.unit + queryParams.value.name = row.name + queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00") + getList() } function handleClose() { - dialogTableVisible.value = false; + dialogTableVisible.value = false } // 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-鍒楄〃 function getList() { - loading.value = true; - getEnergyRealTimeMonitor(proxy.addDateRange(queryParams.value)).then( - (res) => { - const myChart1 = echarts.init(document.getElementById("Chart1")); - if (!!res.code && res.code == 200) { - if (!!res.data) { - let xdata = []; - let ydata = []; - res.data.map((item) => { - xdata.push(proxy.dayjs(item.name).format("HH:mm")); - ydata.push(!!item.value ? item.value : 0); - }); - loading.value = false; - myChart1.setOption({ - color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], - grid: { - top: "45", - left: "6%", - right: "5%", - bottom: "10", - containLabel: true, - }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, - }, - xAxis: { - type: "category", - axisLine: { - show: true, - lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", - }, - }, - axisTick: { - show: false, - }, - splitArea: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", - fontSize: 14, - padding: [5, 0, 0, 0], - // formatter: '{value} ml' - }, - data: xdata, - }, - yAxis: { - type: "value", - name: - queryParams.value.name + - (!!queryParams.value.unit - ? "(" + queryParams.value.unit + ")" - : ""), - nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", - fontSize: 14, - padding: [0, 0, 5, 0], - }, - axisLine: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", - }, - }, - axisTick: { - show: false, - }, - splitArea: { - show: false, - }, - axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", - fontSize: 14, - }, - }, - series: [ - { - name: title.value + "鍘嗗彶鏁版嵁鏌ヨ", // ytip - type: "line", - barWidth: "27", - stack: "total", - data: ydata, - }, - ], - }); - } - window.addEventListener( - "resize", - () => { - myChart1.resize(); + loading.value = true + getEnergyRealTimeMonitor(proxy.addDateRange(queryParams.value)).then((res) => { + const myChart1 = echarts.init(document.getElementById("Chart1")) + if (!!res.code && res.code == 200) { + if (!!res.data) { + let xdata = [] + let ydata = [] + res.data.map((item) => { + xdata.push(proxy.dayjs(item.name).format("HH:mm")) + ydata.push(!!item.value ? item.value : 0) + }) + loading.value = false + myChart1.setOption({ + color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], + grid: { + top: "45", + left: "6%", + right: "5%", + bottom: "10", + containLabel: true, }, - { passive: true } - ); + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + xAxis: { + type: "category", + axisLine: { + show: true, + lineStyle: { + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + }, + }, + axisTick: { + show: false, + }, + splitArea: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + fontSize: 14, + padding: [5, 0, 0, 0], + // formatter: '{value} ml' + }, + data: xdata, + }, + yAxis: { + type: "value", + name: queryParams.value.name + (!!queryParams.value.unit ? "(" + queryParams.value.unit + ")" : ""), + nameTextStyle: { + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + fontSize: 14, + padding: [0, 0, 5, 0], + }, + axisLine: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + }, + }, + axisTick: { + show: false, + }, + splitArea: { + show: false, + }, + axisLabel: { + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + fontSize: 14, + }, + }, + series: [ + { + name: title.value + "鍘嗗彶鏁版嵁鏌ヨ", // ytip + type: "line", + barWidth: "12", + stack: "total", + data: ydata, + }, + ], + }) } + window.addEventListener( + "resize", + () => { + myChart1.resize() + }, + { passive: true } + ) } - ); + }) } // 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-鎼滅储 function handleQuery() { - getList(); + getList() } // 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - (queryParams.value.dataTime = proxy - .dayjs(new Date()) - .format("YYYY-MM-DD 00:00:00")), - handleNodeClick(nodeOptions.value[0]); + proxy.resetForm("queryRef") + ;(queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00")), + handleNodeClick(nodeOptions.value[0]) } // 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-瀵煎嚭 function handleExport() { @@ -202,7 +178,7 @@ "rtdb/realtimeTrend/export", queryParams.value, `${queryParams.value.nodeName}-${queryParams.value.name}_鑳芥簮瀹炴椂鐩戞帶_${new Date().getTime()}.xlsx` - ); + ) } </script> <style scoped lang="scss"> -- Gitblit v1.9.3