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/energyBalance/energyBalance/energyBalance.vue | 290 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 166 insertions(+), 124 deletions(-)
diff --git a/energy_management_ui/src/views/energyBalance/energyBalance/energyBalance.vue b/energy_management_ui/src/views/energyBalance/energyBalance/energyBalance.vue
index 2955bcf..dd0f813 100644
--- a/energy_management_ui/src/views/energyBalance/energyBalance/energyBalance.vue
+++ b/energy_management_ui/src/views/energyBalance/energyBalance/energyBalance.vue
@@ -1,20 +1,43 @@
<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-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-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button>
+ <el-button
+ type="primary"
+ icon="el-icon-search"
+ size="mini"
+ @click="handleQuery"
+ >鎼滅储</el-button
+ >
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+ >閲嶇疆</el-button
+ >
</el-form-item>
</el-form>
<el-row :gutter="20">
@@ -25,73 +48,94 @@
</el-col>
</el-row>
<el-table :data="list" border>
- <el-table-column label="鍚嶇О" align="center" prop="label">{{label}}</el-table-column>
- <el-table-column label="浜у嚭" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_CC)}}</template></el-table-column>
- <el-table-column label="娑堣��" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_XH)}}</template></el-table-column>
- <el-table-column label="澶栦緵" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_WG)}}</template></el-table-column>
- <el-table-column label="鎹熻��" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_SH)}}</template></el-table-column>
+ <el-table-column label="鍚嶇О" align="center" prop="label">{{
+ label
+ }}</el-table-column>
+ <el-table-column label="浜у嚭" align="center">
+ <template slot-scope="scope">{{
+ numFilter(scope.row.value_CC)
+ }}</template></el-table-column
+ >
+ <el-table-column label="娑堣��" align="center">
+ <template slot-scope="scope">{{
+ numFilter(scope.row.value_XH)
+ }}</template></el-table-column
+ >
+ <!-- <el-table-column label="澶栦緵" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_WG)}}</template></el-table-column> -->
+ <el-table-column label="鎹熻��" align="center">
+ <template slot-scope="scope">{{
+ numFilter(scope.row.value_SH)
+ }}</template></el-table-column
+ >
</el-table>
</div>
</template>
<script>
- import {energyBalanceList,energyBalanceTable} from '@/api/energyBalance/energyBalance'
- import LineChart from './LineChart'
+import {
+ energyBalanceList,
+ energyBalanceTable
+} from "@/api/energyBalance/energyBalance";
+import LineChart from "./LineChart";
export default {
- components: {LineChart},
+ components: { LineChart },
data() {
return {
- dateTypeOptions:[],
- list:[],
+ dateTypeOptions: [],
+ list: [],
// 鏌ヨ鍙傛暟
queryParams: {
pageNum: 1,
pageSize: 10,
indexCode: undefined,
- timeType:"DAY",
- dataTime: undefined,
+ timeType: "DAY",
+ dataTime: undefined
},
- dateTypes: 'date',
- valueFormat:"yyyy-MM-dd",
- skinName:"",
- label:"",
- lineChartData:{expectedData: [],
- actualData: [],label:""},
+ dateTypes: "date",
+ valueFormat: "yyyy-MM-dd",
+ skinName: "",
+ label: "",
+ lineChartData: { expectedData: [], actualData: [], label: "" }
};
},
created() {
this.getTime();
this.getDicts("energyBalance").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;
});
this.getConfigKey("energyBalance").then(response => {
- this.skinName=response.msg;
+ this.skinName = response.msg;
});
},
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() {
energyBalanceList(this.queryParams).then(response => {
//this.plannedOutputList = response.rows;
- let expectedData=[];
- let actualData=[];
- let total="";
+ let expectedData = [];
+ let actualData = [];
+ let total = "";
response.data.forEach(item => {
- actualData.push(item.indexName)
- expectedData.push({"name":item.indexName,"value":this.numFilter(item.value)});
- })
- this.lineChartData.actualData=actualData;
- this.lineChartData.expectedData=expectedData;
- this.lineChartData.title=this.label;
+ actualData.push(item.indexName);
+ expectedData.push({
+ name: item.indexName,
+ value: this.numFilter(item.value)
+ });
+ });
+ this.lineChartData.actualData = actualData;
+ this.lineChartData.expectedData = expectedData;
+ this.lineChartData.title = this.label;
this.$refs.LineChart.initChart(this.lineChartData);
});
energyBalanceTable(this.queryParams).then(response => {
- this.list=response.data;
+ this.list = response.data;
});
},
/** 鎼滅储鎸夐挳鎿嶄綔 */
@@ -104,102 +148,100 @@
this.resetForm("queryForm");
this.handleQuery();
},
- 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-1)
- },
- numFilter(value) {// 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅
- let realVal = '' ;
- if (!isNaN(value) && value !== '' && value !== null) {
- realVal = parseFloat(value).toFixed(this.skinName)
+ handleTime(date) {
+ if (date == "YEAR") {
+ (this.dateTypes = "year"), (this.valueFormat = "yyyy");
+ } else if (date == "MONTH") {
+ (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
} else {
- realVal = '--'
+ (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
}
- return realVal
},
+ 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 - 1);
+ },
+ numFilter(value) {
+ // 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅
+ let realVal = "";
+ if (!isNaN(value) && value !== "" && value !== null) {
+ realVal = parseFloat(value).toFixed(this.skinName);
+ } else {
+ realVal = "--";
+ }
+ return realVal;
+ }
}
};
</script>
<style lang="scss" scoped>
- .dashboard-editor-container {
- padding: 32px;
- background-color: rgb(240, 242, 245);
- position: relative;
+.dashboard-editor-container {
+ padding: 32px;
+ background-color: rgb(240, 242, 245);
+ position: relative;
- .chart-wrapper {
- background: #fff;
- padding: 16px 16px 0;
- margin-bottom: 32px;
- }
+ .chart-wrapper {
+ background: #fff;
+ padding: 16px 16px 0;
+ margin-bottom: 32px;
}
+}
- @media (max-width:1024px) {
- .chart-wrapper {
- padding: 8px;
- }
+@media (max-width: 1024px) {
+ .chart-wrapper {
+ padding: 8px;
}
- .live{
- position: fixed;
- right: 0px;
- top:70px;
- display: flex;
- flex-direction:column;
- justify-content:center;
- align-items:center;
- width: 100px;
- height: 60px;
- background-color: red;
- animation: fade 600ms infinite;
- -webkit-animation: fade 600ms infinite;
+}
+.live {
+ position: fixed;
+ right: 0px;
+ top: 70px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100px;
+ height: 60px;
+ background-color: red;
+ animation: fade 600ms infinite;
+ -webkit-animation: fade 600ms infinite;
+}
+.live_content {
+ font-size: 18px;
+ color: white;
+ font-weight: bold;
+}
+.live_number {
+ font-size: 32px;
+ color: white;
+ font-weight: bolder;
+}
+@keyframes fade {
+ from {
+ opacity: 1;
}
- .live_content{
- font-size: 18px;
- color: white;
- font-weight: bold;
+ 50% {
+ opacity: 0.4;
}
- .live_number{
- font-size: 32px;
- color: white;
- font-weight: bolder;
+ to {
+ opacity: 1;
}
- @keyframes fade {
- from {
- opacity: 1.0;
- }
- 50% {
- opacity: 0.4;
- }
- to {
- opacity: 1.0;
- }
- }
+}
- @-webkit-keyframes fade {
- from {
- opacity: 1.0;
- }
- 50% {
- opacity: 0.4;
- }
- to {
- opacity: 1.0;
- }
+@-webkit-keyframes fade {
+ from {
+ opacity: 1;
}
+ 50% {
+ opacity: 0.4;
+ }
+ to {
+ opacity: 1;
+ }
+}
</style>
--
Gitblit v1.9.3