From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改
---
energy_management_ui/src/views/energyPlan/energyMonitoring/energyMonitoring.vue | 166 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 98 insertions(+), 68 deletions(-)
diff --git a/energy_management_ui/src/views/energyPlan/energyMonitoring/energyMonitoring.vue b/energy_management_ui/src/views/energyPlan/energyMonitoring/energyMonitoring.vue
index 82a2766..11f963a 100644
--- a/energy_management_ui/src/views/energyPlan/energyMonitoring/energyMonitoring.vue
+++ b/energy_management_ui/src/views/energyPlan/energyMonitoring/energyMonitoring.vue
@@ -1,66 +1,97 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+ <el-form
+ :model="queryParams"
+ ref="queryForm"
+ :inline="true"
+ label-width="68px"
+ >
<el-form-item label="鎶ヨ〃绫诲瀷">
<el-radio-group v-model="queryParams.timeType">
- <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
+ <el-radio
+ v-for="dict in dateTypeOptions"
+ :key="dict.dictValue"
+ :label="dict.dictValue"
+ @change="handleTime(dict.dictValue)"
+ >{{ dict.dictLabel }}</el-radio
+ >
</el-radio-group>
</el-form-item>
<el-form-item label="缁熻鍖洪棿">
- <el-date-picker clearable size="small" style="width: 200px"
- v-model="queryParams.dataTime"
- :type="dateTypes"
- :value-format="valueFormat"
- placeholder="閫夋嫨鏃ユ湡">
+ <el-date-picker
+ clearable
+ size="small"
+ style="width: 200px"
+ v-model="queryParams.dataTime"
+ :type="dateTypes"
+ :value-format="valueFormat"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
</el-date-picker>
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button>
+ <el-button
+ type="primary"
+ icon="el-icon-search"
+ size="mini"
+ @click="handleQuery"
+ >鎼滅储</el-button
+ >
</el-form-item>
</el-form>
- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
- <line-chart ref="LineChart" :chart-data="lineChartData"/>
+ <el-row style="padding:16px 16px 0;margin-bottom:32px;">
+ <line-chart ref="LineChart" :chart-data="lineChartData" />
</el-row>
- <el-table :data="energyEenchmarkingList" @selection-change="handleSelectionChange">
- <el-table-column prop="label" align="center" label="鐢ㄨ兘鍗曞厓">{{label}}</el-table-column>
+ <el-table
+ :data="energyEenchmarkingList"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column prop="label" align="center" label="鐢ㄨ兘鍗曞厓">{{
+ label
+ }}</el-table-column>
<el-table-column label="浜у搧浜ч噺" align="center">
- <el-table-column label="浜у搧绉嶇被" align="center" prop="productname"/>
- <el-table-column label="璁￠噺鍗曚綅" align="center" prop="muid" :formatter="unitIdFormat"/>
+ <el-table-column label="浜у搧绉嶇被" align="center" prop="productname" />
+ <el-table-column
+ label="璁￠噺鍗曚綅"
+ align="center"
+ prop="muid"
+ :formatter="unitIdFormat"
+ />
<el-table-column label="璁″垝鍊�" align="center" prop="planValue" />
<el-table-column label="瀹為檯鍊�" align="center" prop="actualValue" />
</el-table-column>
<el-table-column label="鐢碉紙鍗冪摝鏃讹級" align="center">
- <el-table-column label="璁″垝鍊�" align="center" prop="poValue"/>
- <el-table-column label="瀹為檯鍊�" align="center" prop="peValue"/>
+ <el-table-column label="璁″垝鍊�" align="center" prop="poValue" />
+ <el-table-column label="瀹為檯鍊�" align="center" prop="peValue" />
</el-table-column>
<el-table-column label="姘达紙绔嬫柟绫筹級" align="center">
- <el-table-column label="璁″垝鍊�" align="center" prop="poWaterValue"/>
- <el-table-column label="瀹為檯鍊�" align="center" prop="peWaterValue"/>
+ <el-table-column label="璁″垝鍊�" align="center" prop="poWaterValue" />
+ <el-table-column label="瀹為檯鍊�" align="center" prop="peWaterValue" />
</el-table-column>
<el-table-column label="鐓ゆ皵锛堢珛鏂圭背锛�" align="center">
- <el-table-column label="璁″垝鍊�" align="center" prop="poCoalValue"/>
- <el-table-column label="瀹為檯鍊�" align="center" prop="peCoalValue"/>
+ <el-table-column label="璁″垝鍊�" align="center" prop="poCoalValue" />
+ <el-table-column label="瀹為檯鍊�" align="center" prop="peCoalValue" />
</el-table-column>
<el-table-column label="钂告苯锛堢珛鏂圭背锛�" align="center">
- <el-table-column label="璁″垝鍊�" align="center" prop="poSteamValue"/>
- <el-table-column label="瀹為檯鍊�" align="center" prop="peSteamValue"/>
+ <el-table-column label="璁″垝鍊�" align="center" prop="poSteamValue" />
+ <el-table-column label="瀹為檯鍊�" align="center" prop="peSteamValue" />
</el-table-column>
</el-table>
</div>
</template>
<script>
- import { listEnergyMonitoring } from "@/api/plannedOutput/energyMonitoring";
- import LineChart from './LineChart'
- export default {
- components: {LineChart},
+import { listEnergyMonitoring } from "@/api/plannedOutput/energyMonitoring";
+import LineChart from "./LineChart";
+export default {
+ components: { LineChart },
data() {
return {
// 閬僵灞�
//loading: true,
// 閫変腑鏁扮粍
ids: [],
- radio: '1',
+ radio: "1",
// 闈炲崟涓鐢�
single: true,
// 闈炲涓鐢�
@@ -69,19 +100,19 @@
total: 0,
// energy_benchmarking琛ㄦ牸鏁版嵁
- energyEenchmarkingList:[],
- dateTypeOptions:[],
+ energyEenchmarkingList: [],
+ dateTypeOptions: [],
// 鏌ヨ鍙傛暟
queryParams: {
pageNum: 1,
pageSize: 10,
dataTime: undefined,
- timeType:"DAY",
+ timeType: "DAY"
},
- dateTypes: 'date',
- valueFormat:"yyyy-MM-dd",
- label:"",
- lineChartData:{expectedData: [],actualData: [],expecteData:[]},
+ dateTypes: "date",
+ valueFormat: "yyyy-MM-dd",
+ label: "",
+ lineChartData: { expectedData: [], actualData: [], expecteData: [] }
};
},
created() {
@@ -91,30 +122,32 @@
});
this.getDicts("energyPlan").then(response => {
this.dateTypeOptions = response.data;
- this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
+ this.queryParams.timeType = this.dateTypeOptions.find(
+ f => f.isDefault === "Y"
+ ).dictValue;
});
},
methods: {
modelNodeChange(modelNode) {
- this.queryParams.indexCode=modelNode.id;
- this.label=modelNode.label
- this.getList(this.queryParams)
+ this.queryParams.indexCode = modelNode.id;
+ this.label = modelNode.label;
+ this.getList(this.queryParams);
},
getList() {
this.loading = true;
listEnergyMonitoring(this.queryParams).then(response => {
- this.energyEenchmarkingList=response.data;
- let actualData=[];
- let expectedData=[];
- let expecteData=[];
+ this.energyEenchmarkingList = response.data;
+ let actualData = [];
+ let expectedData = [];
+ let expecteData = [];
this.energyEenchmarkingList.forEach(item => {
actualData.push(item.productname);
expectedData.push(item.planValue);
expecteData.push(item.actualValue);
- })
- this.lineChartData.actualData=actualData;
- this.lineChartData.expectedData=expectedData;
- this.lineChartData.expecteData=expecteData;
+ });
+ this.lineChartData.actualData = actualData;
+ this.lineChartData.expectedData = expectedData;
+ this.lineChartData.expecteData = expecteData;
this.$refs.LineChart.initChart(this.lineChartData);
});
},
@@ -153,31 +186,28 @@
},
// 澶氶�夋閫変腑鏁版嵁
handleSelectionChange(selection) {
- this.ids = selection.map(item => item.id)
- this.single = selection.length!=1
- this.multiple = !selection.length
+ this.ids = selection.map(item => item.id);
+ this.single = selection.length != 1;
+ this.multiple = !selection.length;
},
- handleTime(date){
- if(date=='YEAR'){
- this.dateTypes= 'year',
- this.valueFormat='yyyy'
- }else if(date=='MONTH'){
- this.dateTypes= 'month',
- this.valueFormat='yyyy-MM'
- }else{
- this.dateTypes= 'date',
- this.valueFormat='yyyy-MM-dd'
+ handleTime(date) {
+ if (date == "YEAR") {
+ (this.dateTypes = "year"), (this.valueFormat = "yyyy");
+ } else if (date == "MONTH") {
+ (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
+ } else {
+ (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
}
},
- getTime(){
- var date = new Date()
- var year = date.getFullYear()
- var month = date.getMonth() + 1
- var date = date.getDate()
- month = month < 10 ? '0' + month : month
- date = date < 10 ? '0' + date : date
- this.queryParams.dataTime = year + '-' + month + '-' + date
- },
+ getTime() {
+ var date = new Date();
+ var year = date.getFullYear();
+ var month = date.getMonth() + 1;
+ var date = date.getDate();
+ month = month < 10 ? "0" + month : month;
+ date = date < 10 ? "0" + date : date;
+ this.queryParams.dataTime = year + "-" + month + "-" + date;
+ }
}
};
</script>
--
Gitblit v1.9.3