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/energyStatistics/energyStatisticsTrend/EnergyIndex.vue | 517 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 295 insertions(+), 222 deletions(-)
diff --git a/energy_management_ui/src/views/energyStatistics/energyStatisticsTrend/EnergyIndex.vue b/energy_management_ui/src/views/energyStatistics/energyStatisticsTrend/EnergyIndex.vue
index 9bec9d0..a4e2464 100644
--- a/energy_management_ui/src/views/energyStatistics/energyStatisticsTrend/EnergyIndex.vue
+++ b/energy_management_ui/src/views/energyStatistics/energyStatisticsTrend/EnergyIndex.vue
@@ -1,9 +1,19 @@
<template>
<div class="dashboard-editor-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-select v-model="queryParams.procedure" placeholder="璇烽�夋嫨鎸囨爣" @change="currentSel">
- <el-option style="width: 150px"
+ <el-select
+ v-model="queryParams.procedure"
+ placeholder="璇烽�夋嫨鎸囨爣"
+ @change="currentSel"
+ >
+ <el-option
+ style="width: 150px"
v-for="dict in list"
:key="dict.indexId"
:label="dict.name"
@@ -13,22 +23,31 @@
</el-form-item>
<el-form-item label="鏃ユ湡" label-width="40px">
<el-radio-group v-model="queryParams.timeType">
- <el-radio style="margin-right: 10px" v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
+ <el-radio
+ style="margin-right: 10px"
+ v-for="dict in dateTypeOptions"
+ :key="dict.dictValue"
+ :label="dict.dictValue"
+ @change="handleTime(dict.dictValue)"
+ >{{ dict.dictLabel }}</el-radio
+ >
</el-radio-group>
- <el-date-picker
- v-model="queryParams.beginTime"
- :type="dateTypes"
- style="width: 150px"
- :value-format="valueFormat"
- placeholder="寮�濮嬫棩鏈�">
- </el-date-picker>
- 鍒�
+ <el-date-picker
+ v-model="queryParams.beginTime"
+ :type="dateTypes"
+ style="width: 150px"
+ :value-format="valueFormat"
+ placeholder="寮�濮嬫棩鏈�"
+ >
+ </el-date-picker>
+ 鍒�
<el-date-picker
v-model="queryParams.endTime"
:type="dateTypes"
style="width: 150px"
:value-format="valueFormat"
- placeholder="缁撴潫鏃ユ湡">
+ placeholder="缁撴潫鏃ユ湡"
+ >
</el-date-picker>
<!--<el-date-picker
v-model="dateRange"
@@ -43,51 +62,81 @@
></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 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="32">
- <el-col :xs="24" :sm="24" :lg="24" >
+ <el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
<line-chart ref="lineChart" :chart-data="lineChartData" />
</div>
</el-col>
</el-row>
<el-row :gutter="32">
- <el-col :xs="24" :sm="24" :lg="24" >
- <div class="chart-wrapper" >
- <h4 style="float: left; text-align:center;padding: 0;margin: 0;width: 90%;">{{title}}1</h4>
- <el-button type="warning" icon="el-icon-download" size="mini" style="float: right" @click="handleExport" >瀵煎嚭</el-button><!--v-hasPermi="['system:post:export']"-->
+ <el-col :xs="24" :sm="24" :lg="24">
+ <div class="chart-wrapper">
+ <h4
+ style="float: left; text-align:center;padding: 0;margin: 0;width: 90%;"
+ >
+ {{ title }}1
+ </h4>
+ <el-button
+ type="warning"
+ icon="el-icon-download"
+ size="mini"
+ style="float: right"
+ @click="handleExport"
+ >瀵煎嚭</el-button
+ ><!--v-hasPermi="['system:post:export']"-->
<el-table v-loading="loading" :data="arraylist">
- <el-table-column prop="dataTime" label="鏃ユ湡" align="center" width="150" show-overflow-tooltip>
+ <el-table-column
+ prop="dataTime"
+ label="鏃ユ湡"
+ align="center"
+ width="150"
+ show-overflow-tooltip
+ >
<template slot-scope="scope">
<span>{{ changeTime(parseTime(scope.row.dataTime)) }}</span>
</template>
</el-table-column>
- <el-table-column prop="currentValue" label="鏈湡鍊�" align="center">
+ <el-table-column prop="currentValue" label="鏈湡鍊�" align="center">
<template slot-scope="scope">
- <span>{{numFilter(scope.row.currentValue)}}</span>
+ <span>{{ numFilter(scope.row.currentValue) }}</span>
</template>
</el-table-column>
- <el-table-column prop="lastYearValue" label="鍚屾湡鍊�" align="center">
+ <el-table-column prop="lastYearValue" label="鍚屾湡鍊�" align="center">
<template slot-scope="scope">
- <span>{{numFilter(scope.row.lastYearValue)}}</span>
+ <span>{{ numFilter(scope.row.lastYearValue) }}</span>
</template>
</el-table-column>
- <el-table-column prop="yoy" label="鍚屾瘮" align="center">
+ <el-table-column prop="yoy" label="鍚屾瘮" align="center">
<template slot-scope="scope">
- <span>{{numFilter(scope.row.yoy)}}</span>
+ <span>{{ numFilter(scope.row.yoy) }}</span>
</template>
</el-table-column>
- <el-table-column v-if="queryParams.timeType ==='MONTH'" prop="qoq" label="鐜瘮" align="center">
+ <el-table-column
+ v-if="queryParams.timeType === 'MONTH'"
+ prop="qoq"
+ label="鐜瘮"
+ align="center"
+ >
<template slot-scope="scope">
- <span>{{numFilter(scope.row.qoq)}}</span>
+ <span>{{ numFilter(scope.row.qoq) }}</span>
</template>
</el-table-column>
- <el-table-column prop="minValue" label="鍘嗗彶鏈�浼�" align="center">
+ <el-table-column prop="minValue" label="鍘嗗彶鏈�浼�" align="center">
<template slot-scope="scope">
- <span>{{numFilter(scope.row.minValue)}}</span>
+ <span>{{ numFilter(scope.row.minValue) }}</span>
</template>
</el-table-column>
</el-table>
@@ -98,210 +147,234 @@
</template>
<script>
- import LineChart from './lineChart'
- import {getSettingIndex,getSettingEnergy,exportEnergyindex,getEnergyStatisticsTrend} from "@/api/energyStatistics/statistics";
+import LineChart from "./lineChart";
+import {
+ getSettingIndex,
+ getSettingEnergy,
+ exportEnergyindex,
+ getEnergyStatisticsTrend
+} from "@/api/energyStatistics/statistics";
- export default {
- name: 'EnergyIndex',
- name: 'Index',
- components: {LineChart},
- props: ["modelCode"],
- data() {
- return {
- // 閬僵灞�
- loading: true,
- total: 0,
- dateTypeOptions:[],
- // 鏌ヨ鍙傛暟
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- beginTime: undefined,
- endTime: undefined,
- dataTime: undefined,
- timeType:undefined,
- indexId: undefined,
- procedure: undefined,
- },
- list:[],
- arraylist:[],
- lineChartData:{
- newVisitis:null,
- },
- //dateTypes: 'monthrange',//鏃堕棿鑼冨洿
- dateTypes: 'month',
- valueFormat:'yyyy-MM',
- title:"",
- skinName:"",
+export default {
+ name: "EnergyIndex",
+ name: "Index",
+ components: { LineChart },
+ props: ["modelCode"],
+ data() {
+ return {
+ // 閬僵灞�
+ loading: true,
+ total: 0,
+ dateTypeOptions: [],
+ // 鏌ヨ鍙傛暟
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ beginTime: undefined,
+ endTime: undefined,
+ dataTime: undefined,
+ timeType: undefined,
+ indexId: undefined,
+ procedure: undefined
+ },
+ list: [],
+ arraylist: [],
+ lineChartData: {
+ newVisitis: null
+ },
+ //dateTypes: 'monthrange',//鏃堕棿鑼冨洿
+ dateTypes: "month",
+ valueFormat: "yyyy-MM",
+ title: "",
+ skinName: ""
+ };
+ },
+ watch: {
+ modelCode: {
+ deep: true,
+ handler(val) {
+ this.getList(val);
+ }
+ }
+ },
+ created() {
+ //this.getList();
+ this.getDicts("timeType").then(response => {
+ this.dateTypeOptions = response.data;
+ this.queryParams.timeType = this.dateTypeOptions.find(
+ f => f.isDefault === "Y"
+ ).dictValue;
+ });
+ this.getConfigKey("energyStatistics.energyStatisticsTrend").then(
+ response => {
+ this.skinName = response.msg;
+ }
+ );
+ let endTtime =
+ new Date().getFullYear() +
+ "-" +
+ (new Date().getMonth() + 1 > 9
+ ? new Date().getMonth() + 1
+ : "0" + (new Date().getMonth() + 1));
+ let starTtime =
+ new Date().getFullYear() -
+ 1 +
+ "-" +
+ (new Date().getMonth() + 1 > 9
+ ? new Date().getMonth() + 1
+ : "0" + (new Date().getMonth() + 1));
+ this.queryParams.beginTime = starTtime;
+ this.queryParams.endTime = endTtime;
+ },
+ methods: {
+ modelNodeChange(modelNode) {
+ this.queryParams.id = modelNode.id;
+ this.loading = true;
+ getSettingIndex(this.queryParams.id).then(response => {
+ let result = response.data;
+ this.list = result.filter(f => f.indexType === "STATISTIC");
+ this.loading = false;
+ if (this.list.length > 0) {
+ this.queryParams.procedure = this.list[0].indexId;
+ } else {
+ this.queryParams.procedure = "";
+ this.title = "";
+ }
+ if (this.queryParams.timeType == "YEAR") {
+ this.queryParams.beginTime =
+ this.queryParams.beginTime.substring(0, 4) + "-01-01";
+ this.queryParams.endTime =
+ this.queryParams.endTime.substring(0, 4) + "-01-01";
+ } else if (this.queryParams.timeType == "MONTH") {
+ this.queryParams.beginTime =
+ this.queryParams.beginTime.substring(0, 7) + "-01";
+ this.queryParams.endTime =
+ this.queryParams.endTime.substring(0, 7) + "-01";
+ }
+ this.getList();
+ });
+ },
+ getList() {
+ let source = [];
+ let xAxis = [];
+ this.queryParams.indexId = this.queryParams.procedure;
+ getEnergyStatisticsTrend(this.queryParams).then(response => {
+ this.arraylist = response.rows;
+ this.total = response.total;
+ let currentValue = [];
+ let lastYearValue = [];
+ let minValue = [];
+ for (let i = 0; i < this.arraylist.length; i++) {
+ currentValue.push(this.arraylist[i].currentValue);
+ lastYearValue.push(this.arraylist[i].lastYearValue);
+ minValue.push(this.arraylist[i].minValue);
+ if (this.queryParams.timeType == "MONTH") {
+ xAxis.push(this.arraylist[i].dataTime.substring(0, 7));
+ } else if (this.queryParams.timeType == "YEAR") {
+ xAxis.push(this.arraylist[i].dataTime.substring(0, 4));
+ }
+ }
+ source.push(currentValue);
+ source.push(lastYearValue);
+ let yAxis = "";
+ if (this.arraylist.length > 0) {
+ this.title =
+ this.arraylist[0].indexName + "(" + this.arraylist[0].unitId + ")";
+ yAxis = this.arraylist[0].unitId;
+ }
+ this.lineChartData.newVisitis = source;
+ this.lineChartData.actualData = ["鏈湡鍊�", "鍚屾湡鍊�"];
+ this.lineChartData.actual = minValue;
+ this.lineChartData.xAxis = xAxis;
+ this.lineChartData.title = this.title;
+ this.lineChartData.yAxis = yAxis;
+ this.$refs.lineChart.initChart(this.lineChartData);
+ });
+ },
+ numFilter(value) {
+ // 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅
+ let realVal = "";
+ if (!isNaN(value) && value !== "") {
+ realVal = parseFloat(value).toFixed(this.skinName);
+ } else {
+ realVal = "--";
+ }
+ return realVal;
+ },
+ currentSel(selVal) {
+ //鑾峰彇涓嬫媺妗嗙殑text
+ let obj = {};
+ obj = this.list.find(item => {
+ return item.indexId === selVal;
+ });
+ this.title = obj.name;
+ this.queryParams.procedure = obj.indexId;
+ },
+ handleTime(date) {
+ if (date == "YEAR") {
+ (this.dateTypes = "year"), (this.valueFormat = "yyyy");
+ } else if (date == "MONTH") {
+ //this.dateTypes='monthrange'
+ (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
}
},
- watch: {
- modelCode: {
- deep: true,
- handler(val) {
- this.getList(val)
- }
- },
+ /** 鎼滅储鎸夐挳鎿嶄綔 */
+ handleQuery() {
+ this.queryParams.pageNum = 1;
+ this.queryParams.title = this.title;
+ this.getList();
+ //this.modelNodeChange(this.queryParams);
},
- created() {
- //this.getList();
- this.getDicts("timeType").then(response => {
- this.dateTypeOptions = response.data;
- this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
- });
- this.getConfigKey("energyStatistics.energyStatisticsTrend").then(response => {
- this.skinName=response.msg;
- });
- let endTtime=(new Date().getFullYear()) +'-' +((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):"0"+(new Date().getMonth() + 1));
- let starTtime= (new Date().getFullYear()-1)+'-' +((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):"0"+(new Date().getMonth() + 1));
- this.queryParams.beginTime=starTtime;
- this.queryParams.endTime=endTtime;
+ /** 閲嶇疆鎸夐挳鎿嶄綔 */
+ resetQuery() {
+ this.resetForm("queryForm");
+ this.handleQuery();
},
- methods: {
- modelNodeChange(modelNode) {
- this.queryParams.id=modelNode.id;
- this.loading = true;
- getSettingIndex(this.queryParams.id).then(response => {
- let result=response.data;
- this.list = result.filter(f => f.indexType === 'STATISTIC');
- this.loading = false;
- if (this.list.length > 0) {
- this.queryParams.procedure = this.list[0].indexId;
- }else{
- this.queryParams.procedure = "";
- this.title="";
- }
- if(this.queryParams.timeType=='YEAR'){
- this.queryParams.beginTime=this.queryParams.beginTime.substring(0, 4)+'-01-01';
- this.queryParams.endTime=this.queryParams.endTime.substring(0, 4)+'-01-01';
- }else if(this.queryParams.timeType=='MONTH'){
- this.queryParams.beginTime=this.queryParams.beginTime.substring(0, 7)+'-01';
- this.queryParams.endTime=this.queryParams.endTime.substring(0, 7)+'-01';
- }
- this.getList();
- });
- },
- getList(){
- let source=[];
- let xAxis=[];
- this.queryParams.indexId=this.queryParams.procedure;
- getEnergyStatisticsTrend(this.queryParams).then(response => {
- this.arraylist=response.rows;
- this.total = response.total;
- let currentValue=[];
- let lastYearValue=[];
- let minValue=[];
- for(let i=0; i<this.arraylist.length; i++){
- currentValue.push(this.arraylist[i].currentValue);
- lastYearValue.push(this.arraylist[i].lastYearValue);
- minValue.push(this.arraylist[i].minValue);
- if(this.queryParams.timeType=='MONTH') {
- xAxis.push(this.arraylist[i].dataTime.substring(0, 7))
- }else if(this.queryParams.timeType=='YEAR'){
- xAxis.push(this.arraylist[i].dataTime.substring(0, 4))
- }
- }
- source.push(currentValue);
- source.push(lastYearValue);
- let yAxis="";
- if(this.arraylist.length>0){
- this.title=this.arraylist[0].indexName+"("+this.arraylist[0].unitId+")";
- yAxis=this.arraylist[0].unitId
- }
- this.lineChartData.newVisitis=source;
- this.lineChartData.actualData=['鏈湡鍊�','鍚屾湡鍊�'];
- this.lineChartData.actual=minValue;
- this.lineChartData.xAxis=xAxis;
- this.lineChartData.title=this.title;
- this.lineChartData.yAxis=yAxis;
- this.$refs.lineChart.initChart(this.lineChartData);
- });
- },
- numFilter(value) {// 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅
- let realVal = '' ;
- if (!isNaN(value) && value !== '') {
- realVal = parseFloat(value).toFixed(this.skinName)
- } else {
- realVal = '--'
- }
- return realVal
- },
- currentSel(selVal) {//鑾峰彇涓嬫媺妗嗙殑text
- let obj = {};
- obj = this.list.find((item) => {
- return item.indexId === selVal
- });
- this.title=obj.name;
- this.queryParams.procedure=obj.indexId;
- },
- handleTime(date){
- if(date=='YEAR'){
- this.dateTypes= 'year',
- this.valueFormat='yyyy'
- }else if(date=='MONTH'){
- //this.dateTypes='monthrange'
- this.dateTypes= 'month',
- this.valueFormat='yyyy-MM'
- }
- },
- /** 鎼滅储鎸夐挳鎿嶄綔 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.queryParams.title=this.title;
- this.getList();
- //this.modelNodeChange(this.queryParams);
- },
- /** 閲嶇疆鎸夐挳鎿嶄綔 */
- resetQuery() {
- this.resetForm("queryForm");
- this.handleQuery();
- },
- /** 瀵煎嚭鎸夐挳鎿嶄綔 */
- handleExport() {
- const queryParams = this.queryParams;
- this.$confirm('鏄惁纭瀵煎嚭鎵�鏈夎兘鑰楁寚鏍囪秼鍔垮垎鏋愭暟鎹」?', "璀﹀憡", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning"
- }).then(function () {
+ /** 瀵煎嚭鎸夐挳鎿嶄綔 */
+ handleExport() {
+ const queryParams = this.queryParams;
+ this.$confirm("鏄惁纭瀵煎嚭鎵�鏈夎兘鑰楁寚鏍囪秼鍔垮垎鏋愭暟鎹」?", "璀﹀憡", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ })
+ .then(function() {
return exportEnergyindex(queryParams);
- }).then(response => {
+ })
+ .then(response => {
this.download(response.msg);
- }).catch(function () {
- });
- },
- changeTime(time) {
- if (time !== null && time !== undefined && time !== "") {
- return time.substring(0, 10);
- } else {
- return "";
- }
+ })
+ .catch(function() {});
+ },
+ changeTime(time) {
+ if (time !== null && time !== undefined && time !== "") {
+ return time.substring(0, 10);
+ } else {
+ return "";
}
}
}
+};
</script>
<style lang="scss" scoped>
- .dashboard-editor-container {
- padding: 32px;
- background-color: rgb(240, 242, 245);
- position: relative;
- .chart-wrapper {
- background: #fff;
- padding: 16px 16px 0;
- margin-bottom: 32px;
- }
+.dashboard-editor-container {
+ padding: 32px;
+ position: relative;
+ .chart-wrapper {
+ padding: 16px 16px 0;
+ margin-bottom: 32px;
}
- .chart-title{
- display: block;
- background: #f2f6fc;
- height: 30px;
- line-height: 30px;
- padding: 0 10px;
+}
+.chart-title {
+ display: block;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+}
+@media (max-width: 1024px) {
+ .chart-wrapper {
+ padding: 8px;
}
- @media (max-width:1024px) {
- .chart-wrapper {
- padding: 8px;
- }
- }
+}
</style>
--
Gitblit v1.9.3