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/energyanalysis/department/department.vue | 323 +++++++++++++++++++++++++----------------------------
1 files changed, 154 insertions(+), 169 deletions(-)
diff --git a/zhitan-vue/src/views/energyanalysis/department/department.vue b/zhitan-vue/src/views/energyanalysis/department/department.vue
index 26a605c..95ceea7 100644
--- a/zhitan-vue/src/views/energyanalysis/department/department.vue
+++ b/zhitan-vue/src/views/energyanalysis/department/department.vue
@@ -8,58 +8,56 @@
<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 label="鑳芥簮绫诲瀷" prop="energyType">
<el-select v-model="queryParams.energyType" placeholder="鑳芥簮绫诲瀷" clearable style="width: 120px">
- <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
- :key="item.enersno" @click="handleEnergyType(item)" />
+ <el-option
+ :label="item.enername"
+ :value="item.enersno"
+ v-for="item in energyTypeList"
+ :key="item.enersno"
+ @click="handleEnergyType(item)"
+ />
</el-select>
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">
- 鎼滅储
- </el-button>
- <el-button icon="Refresh" @click="resetQuery">閲嶇疆</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="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')">
- 鍚屾瘮
- </el-button>
- <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')">
- 鐜瘮
- </el-button>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Download" @click="handleExport">
- 瀵煎嚭
- </el-button>
+ <el-button type="warning" 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;
- " v-loading="loading">
- <!-- <el-row :gutter="24">
- <el-col :span="16"> -->
+ <div
+ style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
+ v-loading="loading"
+ >
+ <el-tabs v-model="queryParams.analysisType" type="card" @tab-change="handleAnalysisType">
+ <el-tab-pane label="鍚屾瘮" name="YOY"> </el-tab-pane>
+ <el-tab-pane label="鐜瘮" name="MOM"> </el-tab-pane>
+ </el-tabs>
<BaseCard :title="queryParams.nodeName + '-鍘傚尯鑳借�楀垎鏋�'">
<div class="chart-box">
<div id="Chart1" />
@@ -74,30 +72,45 @@
</BaseCard>
</el-col>
<el-col :span="24"> -->
- <BaseCard :title="queryParams.nodeName +
- '-鍘傚尯鑳借�楀垎鏋愮粺璁″垎鏋愯〃-' +
- queryParams.enername
- ">
+ <BaseCard :title="queryParams.nodeName + '-鍘傚尯鑳借�楀垎鏋愮粺璁″垎鏋愯〃-' + queryParams.enername">
<div class="table-box">
<el-table :data="departmentList" show-summary>
- <el-table-column label="鏈湡鏃堕棿" align="center" key="currentTime" prop="currentTime"
- :show-overflow-tooltip="true" />
- <el-table-column :label="'鏈湡鑰�' +
- queryParams.enername +
- '(' +
- queryParams.muid +
- ')'
- " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" />
- <el-table-column label="鍚屾湡鏃堕棿" align="center" key="compareTime" prop="compareTime"
- :show-overflow-tooltip="true" />
- <el-table-column :label="'鍚屾湡鑰�' +
- queryParams.enername +
- '(' +
- queryParams.muid +
- ')'
- " align="center" key="compareValue" prop="compareValue" :show-overflow-tooltip="true" />
- <el-table-column :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)'
- " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" />
+ <el-table-column
+ label="鏈湡鏃堕棿"
+ align="center"
+ key="currentTime"
+ prop="currentTime"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ :label="'鏈湡鑰�' + queryParams.enername + '(' + queryParams.muid + ')'"
+ align="center"
+ key="currentValue"
+ prop="currentValue"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="鍚屾湡鏃堕棿"
+ align="center"
+ key="compareTime"
+ prop="compareTime"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ :label="'鍚屾湡鑰�' + queryParams.enername + '(' + queryParams.muid + ')'"
+ align="center"
+ key="compareValue"
+ prop="compareValue"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)'"
+ align="center"
+ key="ratio"
+ prop="ratio"
+ :show-overflow-tooltip="true"
+ width="200"
+ />
</el-table>
</div>
</BaseCard>
@@ -110,26 +123,23 @@
</template>
<script setup name="department">
-import {
- listRegion,
- listDepartment,
-} from "@/api/energyAnalysis/energyAnalysis";
-import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
-import * as echarts from "echarts";
-const { proxy } = getCurrentInstance();
-const { period } = proxy.useDict("period");
-import { useRoute } from "vue-router";
-import useSettingsStore from "@/store/modules/settings";
-const settingsStore = useSettingsStore();
+import { listRegion, listDepartment } from "@/api/energyAnalysis/energyAnalysis"
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
+import * as echarts from "echarts"
+const { proxy } = getCurrentInstance()
+const { period } = proxy.useDict("period")
+import { useRoute } from "vue-router"
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
watch(
() => settingsStore.sideTheme,
(val) => {
- getList();
+ getList()
}
-);
-const energyTypeList = ref(undefined);
-const departmentList = ref([]);
-const loading = ref(false);
+)
+const energyTypeList = ref(undefined)
+const departmentList = ref([])
+const loading = ref(false)
const data = reactive({
queryParams: {
nodeId: null,
@@ -141,45 +151,45 @@
query: {
modelCode: null,
},
-});
-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);
+ queryParams.value.nodeId = data.id
+ queryParams.value.nodeName = data.label
+ handleTimeType(period.value[0].value)
listEnergyTypeList().then((res) => {
- energyTypeList.value = res.data;
- queryParams.value.energyType = energyTypeList.value[0].enersno;
- queryParams.value.enername = energyTypeList.value[0].enername;
- queryParams.value.muid = energyTypeList.value[0].muid;
- handleQuery();
- });
+ energyTypeList.value = res.data
+ queryParams.value.energyType = energyTypeList.value[0].enersno
+ queryParams.value.enername = energyTypeList.value[0].enername
+ queryParams.value.muid = energyTypeList.value[0].muid
+ 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 handleEnergyType(item) {
- queryParams.value.enername = item.enername;
- queryParams.value.muid = item.muid;
- handleQuery();
+ queryParams.value.enername = item.enername
+ queryParams.value.muid = item.muid
+ handleQuery()
}
function handleAnalysisType(analysisType) {
- queryParams.value.analysisType = analysisType;
- getList();
+ queryParams.value.analysisType = analysisType
+ getList()
}
// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-鍒楄〃
function getList() {
- loading.value = true;
+ loading.value = true
// 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛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"));
// }
- const myChart1 = echarts.init(document.getElementById("Chart1"));
+ const myChart1 = echarts.init(document.getElementById("Chart1"))
// const myChart2 = echarts.init(document.getElementById("Chart2"));
listRegion(
proxy.addDateRange({
@@ -188,35 +198,31 @@
})
).then((res) => {
if (!!res.code && res.code == 200) {
- loading.value = false;
- let xdata = [];
- let yvalue = [];
- let ycompareValue = [];
- let yqoq = [];
+ loading.value = false
+ let xdata = []
+ let yvalue = []
+ let ycompareValue = []
+ let yqoq = []
if (!!res.data.chartDataList) {
res.data.chartDataList.map((item) => {
xdata.push(
proxy
.dayjs(item.xdata)
.format(
- queryParams.value.timeType == "YEAR"
- ? "MM鏈�"
- : queryParams.value.timeType == "MONTH"
- ? "DD鏃�"
- : "HH鏃�"
+ queryParams.value.timeType == "YEAR" ? "MM鏈�" : queryParams.value.timeType == "MONTH" ? "DD鏃�" : "HH鏃�"
)
- );
- yvalue.push(!!item.yvalue ? item.yvalue : 0);
- ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0);
- yqoq.push(!!item.yqoq ? item.yqoq : 0);
- });
+ )
+ yvalue.push(!!item.yvalue ? item.yvalue : 0)
+ ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0)
+ yqoq.push(!!item.yqoq ? item.yqoq : 0)
+ })
}
setTimeout(() => {
myChart1.setOption({
color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
grid: {
- top: "45",
- left: "7%",
+ top: "60",
+ left: "5%",
right: "5%",
bottom: "10",
containLabel: true,
@@ -232,8 +238,7 @@
itemWidth: 14,
itemHeight: 10,
textStyle: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
xAxis: {
@@ -244,10 +249,7 @@
axisLine: {
show: true,
lineStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -260,8 +262,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'
@@ -271,17 +272,9 @@
yAxis: [
{
type: "value",
- name:
- "鑰�" +
- queryParams.value.enername +
- "閲�(" +
- queryParams.value.muid +
- ")",
+ name: "鑰�" + queryParams.value.enername + "閲�(" + queryParams.value.muid + ")",
nameTextStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
padding: [0, 0, 5, 0],
},
@@ -292,10 +285,7 @@
show: true,
lineStyle: {
type: "dashed",
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -305,10 +295,7 @@
show: false,
},
axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
},
@@ -317,10 +304,7 @@
name: queryParams.value.analysisType == "YOY" ? "鍚屾瘮(%)" : "鐜瘮(%)",
alignTicks: true,
nameTextStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
padding: [0, 0, 5, 0],
},
@@ -334,20 +318,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,
},
},
@@ -359,7 +337,7 @@
barWidth: "8",
tooltip: {
valueFormatter: function (value) {
- return value + queryParams.value.muid;
+ return value + queryParams.value.muid
},
},
itemStyle: {
@@ -379,7 +357,7 @@
barWidth: "8",
tooltip: {
valueFormatter: function (value) {
- return value + queryParams.value.muid;
+ return value + queryParams.value.muid
},
},
itemStyle: {
@@ -400,24 +378,24 @@
symbol: "none", // 璁剧疆涓� 'none' 鍘绘帀鍦嗙偣
tooltip: {
valueFormatter: function (value) {
- return value + "%";
+ return value + "%"
},
},
data: yqoq,
},
],
- });
- }, 100);
- departmentList.value = !!res.data.dataList ? res.data.dataList : [];
+ })
+ }, 100)
+ departmentList.value = !!res.data.dataList ? res.data.dataList : []
window.addEventListener(
"resize",
() => {
- myChart1.resize();
+ myChart1.resize()
},
{ passive: true }
- );
+ )
}
- });
+ })
// listDepartment(
// proxy.addDateRange({
// ...queryParams.value,
@@ -566,17 +544,17 @@
}
// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-鎼滅储
function handleQuery() {
- getList();
+ getList()
}
// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-閲嶇疆
function resetQuery() {
- proxy.resetForm("queryRef");
- handleTimeType(period.value[0].value);
- queryParams.value.energyType = energyTypeList.value[0].enersno;
- queryParams.value.enername = energyTypeList.value[0].enername;
- queryParams.value.muid = energyTypeList.value[0].muid;
- queryParams.value.analysisType = "YOY";
- handleQuery();
+ proxy.resetForm("queryRef")
+ handleTimeType(period.value[0].value)
+ queryParams.value.energyType = energyTypeList.value[0].enersno
+ queryParams.value.enername = energyTypeList.value[0].enername
+ queryParams.value.muid = energyTypeList.value[0].muid
+ queryParams.value.analysisType = "YOY"
+ handleQuery()
}
// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-瀵煎嚭
function handleExport() {
@@ -587,9 +565,16 @@
...query.value,
},
`${queryParams.value.nodeName}-鍘傚尯鑳借�楀垎鏋恄${new Date().getTime()}.xlsx`
- );
+ )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";
+.el-tabs {
+ padding: 0 12px;
+ margin-top: 12px;
+ :deep(.el-tabs__header) {
+ margin: 0;
+ }
+}
</style>
--
Gitblit v1.9.3