整体样式修改

ali

2024-09-03 0ae83a895e80a4b9777a27f613d721a7e5e2ac18

 energy_management_ui/src/views/energyStatistics/energyConsumption/consumption.vue

@@ -1,35 +1,77 @@
<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-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"
          :value-format="valueFormat"
          placeholder="开始日期">
          placeholder="开始日期"
        >
        </el-date-picker>
        到
        <el-date-picker
          v-model="queryParams.endTime"
          :type="dateTypes"
          :value-format="valueFormat"
          placeholder="结束日期">
          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 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-item>
        <router-link :to="'/energyConsumption/listEnergyConsumption/'+queryParams.timeType+'/'+queryParams.beginTime+'/'+queryParams.endTime+'/'+queryParams.indexCode+'/'+queryParams.id+'/'+titleName"  class="link-type">
        <router-link
          :to="
            '/energyConsumption/listEnergyConsumption/' +
              queryParams.timeType +
              '/' +
              queryParams.beginTime +
              '/' +
              queryParams.endTime +
              '/' +
              queryParams.indexCode +
              '/' +
              queryParams.id +
              '/' +
              titleName
          "
          class="link-type"
        >
          <el-button size="mini">能源消费成本分时分析报表</el-button>
        </router-link>
      </el-form-item>
    </el-form>
    <h4 style="float: left; text-align:center;padding: 0;margin: 0px 0px 10px;width: 90%;">生产企业能源消耗成本分析</h4>
    <h4
      style="color:#fff;float: left; text-align:center;padding: 0;margin: 0px 0px 10px;width: 90%;"
    >
      生产企业能源消耗成本分析
    </h4>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12" style="padding-right: 0">
        <div class="chart-wrapper" >
@@ -45,20 +87,48 @@
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12" style="padding-right: 0">
        <div class="chart-wrapper" >
          <span style="display: block;color: #333;">能源消费结构情况对比</span>
          <el-checkbox-group v-model="checkList1" style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"  @change="handleCheckedCitiesChange1"><!--clickMe -->
            <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">全选</el-checkbox>
            <el-checkbox v-for="dict in list" :key="dict.code" :label="dict.code">{{dict.name}}</el-checkbox>
          <span style="display: block;color: #fff;">能源消费结构情况对比</span>
          <el-checkbox-group
            v-model="checkList1"
            style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"
            @change="handleCheckedCitiesChange1"
            ><!--clickMe -->
            <el-checkbox
              :indeterminate="isIndeterminate1"
              v-model="checkAll1"
              @change="handleCheckAllChange1"
              >全选</el-checkbox
            >
            <el-checkbox
              v-for="dict in list"
              :key="dict.code"
              :label="dict.code"
              >{{ dict.name }}</el-checkbox
            >
          </el-checkbox-group>
          <bar-chart ref="BarChart" :chart-data="lineChartData2"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" style="padding-right: 0">
        <div class="chart-wrapper">
          <span style="display: block;color: #333;">能源消费成本情况对比</span>
          <el-checkbox-group v-model="checkList2" style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"  @change="handleCheckedCitiesChange2"><!--clickMe -->
            <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">全选</el-checkbox>
            <el-checkbox v-for="dict in list" :key="dict.code" :label="dict.code">{{dict.name}}</el-checkbox>
          <span style="display: block;color: #fff;">能源消费成本情况对比</span>
          <el-checkbox-group
            v-model="checkList2"
            style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"
            @change="handleCheckedCitiesChange2"
            ><!--clickMe -->
            <el-checkbox
              :indeterminate="isIndeterminate2"
              v-model="checkAll2"
              @change="handleCheckAllChange2"
              >全选</el-checkbox
            >
            <el-checkbox
              v-for="dict in list"
              :key="dict.code"
              :label="dict.code"
              >{{ dict.name }}</el-checkbox
            >
          </el-checkbox-group>
         <!-- <el-checkbox-group v-model="checkList2" style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"  @change="clickMe(2)">
            <el-checkbox v-for="dict in list" :key="dict.code" :label="dict.code">{{dict.name}}</el-checkbox>
@@ -71,14 +141,18 @@
</template>

<script>
  import BarChart from './BarChart'
  import BarCharts from './BarCharts'
  import PieChart from './PieChart'
  import pieChartCost from './pieChartCost'
  import {getEnergyConstitute,getEnergyConsumption,getSettingIndex} from "@/api/energyStatistics/statistics";
import BarChart from "./BarChart";
import BarCharts from "./BarCharts";
import PieChart from "./PieChart";
import pieChartCost from "./pieChartCost";
import {
  getEnergyConstitute,
  getEnergyConsumption,
  getSettingIndex
} from "@/api/energyStatistics/statistics";
  export default {
    name: 'consumption',
    name: 'Index',
  name: "consumption",
  name: "Index",
    components: {BarChart,BarCharts,PieChart,pieChartCost},
    props: ["modelCode"],
    data() {
@@ -96,11 +170,11 @@
          beginTime: undefined,
          endTime: undefined,
          dataTime: undefined,
          timeType:'MONTH',
        timeType: "MONTH",
          indexId: undefined,
          procedure: undefined,
          indexCode: "",
          id: undefined,
        id: undefined
        },
        list:[],
        arraylist1:[],
@@ -111,50 +185,65 @@
        xAxisListXFCB:[],
        xAxisListZBL:[],
        lineChartData:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData1:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData2:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData3:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData4:{
          newVisitis:null,
        newVisitis: null
        },
        //dateTypes: 'monthrange',//时间范围
        dateTypes: 'month',
        valueFormat:'yyyy-MM',
      dateTypes: "month",
      valueFormat: "yyyy-MM",
        title:"",
        titleName: "",
        checkAll1: false,
        checkAll2: false,
        isIndeterminate1: true,
        isIndeterminate2: true,
      }
      isIndeterminate2: true
    };
    },
    watch: {
      modelCode: {
        deep: true,
        handler(val) {
          this.getList(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.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
      });
      this.getConfigKey("energyStatistics.energyStatisticConsum").then(response => {
    this.getConfigKey("energyStatistics.energyStatisticConsum").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));
      }
    );
    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;
    },
@@ -174,10 +263,17 @@
        let title=[];
        for (let i=0; i<this.arraylist1.length;i++){
          title.push(this.arraylist1[i].indexName);
          unitId.push({"name":this.arraylist1[i].indexName,"value":this.numFilter(this.arraylist1[i].value),"unitId":this.arraylist1[i].unitId});
        };
          unitId.push({
            name: this.arraylist1[i].indexName,
            value: this.numFilter(this.arraylist1[i].value),
            unitId: this.arraylist1[i].unitId
          });
        }
        for (let i=0; i<this.arraylist2.length;i++){
         source.push({"name":this.arraylist2[i].indexName,"value":this.numFilter(this.arraylist2[i].value)});
          source.push({
            name: this.arraylist2[i].indexName,
            value: this.numFilter(this.arraylist2[i].value)
          });
        }
        this.lineChartData.datas=unitId;
        this.lineChartData.title=title;
@@ -188,8 +284,15 @@
        let sourceXFCB=[];
        let titleXFCB=[];
        for (let i=0; i<this.arraylist4.length;i++){
          sourceXFCB.push({"name":this.arraylist4[i].indexName,"value":this.numFilter(this.arraylist4[i].value)});
          unitIdXFCB.push({"name":this.arraylist4[i].indexName,"value":this.numFilter(this.arraylist4[i].value),"unitId":"万元"});
          sourceXFCB.push({
            name: this.arraylist4[i].indexName,
            value: this.numFilter(this.arraylist4[i].value)
          });
          unitIdXFCB.push({
            name: this.arraylist4[i].indexName,
            value: this.numFilter(this.arraylist4[i].value),
            unitId: "万元"
          });
          titleXFCB +=this.numFilter(this.arraylist4[i].value);
        }
        this.lineChartData1.title=titleXFCB;
@@ -215,7 +318,9 @@
            let xAxis=[];
            for(let i=0; i<this.arraylist3.length; i++){
              currentValue.push(this.numFilter(this.arraylist3[i].currentValue));
              lastYearValue.push(this.numFilter(this.arraylist3[i].lastYearValue));
            lastYearValue.push(
              this.numFilter(this.arraylist3[i].lastYearValue)
            );
            }
            resultZBL.push(currentValue);
            resultZBL.push(lastYearValue);
@@ -225,7 +330,7 @@
            }
            this.lineChartData2.xAxis=xAxis;
            this.lineChartData2.newVisitis=resultZBL;
            this.lineChartData2.actualData=['本期','同期'];
          this.lineChartData2.actualData = ["本期", "同期"];
            this.$refs.BarChart.initChart(this.lineChartData2);
            //能耗消费成本 对比
            let resultXFCB=[];
@@ -248,9 +353,9 @@
            }
            this.lineChartData3.xAxis=xAxisXFCB;
            this.lineChartData3.newVisitis=resultXFCB;
            this.lineChartData3.actualData=['本期','同期','预算'];
          this.lineChartData3.actualData = ["本期", "同期", "预算"];
            this.$refs.BarCharts.initChart(this.lineChartData3);
          })
        });
        });
      },

@@ -266,7 +371,8 @@
      handleCheckedCitiesChange1(value) {
        let checkedCount = value.length;
        this.checkAll1 = checkedCount === this.list.length;
        this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.list.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.list.length;
        this.resultListZBL(value);
      },
      handleCheckAllChange2(val) {
@@ -282,10 +388,11 @@
        this.resultListXFCB(value);
        let checkedCount = value.length;
        this.checkAll2 = checkedCount === this.list.length;
        this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.list.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.list.length;
      },
      resultListZBL(value){
        this.queryParams.indexName=value.join(',');
      this.queryParams.indexName = value.join(",");
        getEnergyConsumption(this.queryParams).then(response => {
          this.arraylist3=response.data.resultListZBL;//折标量
          //能耗消费结构 对比
@@ -306,12 +413,12 @@
          }
          this.lineChartData2.xAxis=xAxis;
          this.lineChartData2.newVisitis=resultZBL;
          this.lineChartData2.actualData=['本期','同期'];
        this.lineChartData2.actualData = ["本期", "同期"];
          this.$refs.BarChart.initChart(this.lineChartData2);
        });
      },
      resultListXFCB(value){
        this.queryParams.indexName=value.join(',');
      this.queryParams.indexName = value.join(",");
        //能源消费成本情况
        getEnergyConsumption(this.queryParams).then(response => {
          this.arraylist5=response.data.resultListXFCB;//折标量
@@ -336,7 +443,7 @@
          }
          this.lineChartData3.xAxis=xAxisXFCB;
          this.lineChartData3.newVisitis=resultXFCB;
          this.lineChartData3.actualData=['本期','同期','预算'];
        this.lineChartData3.actualData = ["本期", "同期", "预算"];
          this.$refs.BarCharts.initChart(this.lineChartData3);
        });
      },
@@ -355,51 +462,52 @@
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          frontMonth: nowDate.getMonth(),
        }
        if(data=='YEAR'){
          this.dateTypes= 'year',
          this.valueFormat='yyyy'
        }else if(data=='MONTH'){
        frontMonth: nowDate.getMonth()
      };
      if (data == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (data == "MONTH") {
          //this.dateTypes='monthrange'
          this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
        }
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有能耗指标趋势分析数据项?', "警告", {
      this.$confirm("是否确认导出所有能耗指标趋势分析数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
      })
        .then(function() {
          //return exportEnergyindex(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
        })
        .catch(function() {});
      },
      numFilter(value) {// 截取当前数据到小数点后的几位
        let realVal = '' ;
        if (!isNaN(value) && value !== '') {
          realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // 截取当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(this.skinName);
        } else {
          realVal = '--'
        realVal = "--";
        }
        return realVal
      },
      return realVal;
    }
  }
};
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
  // background-color: rgb(240, 242, 245);
    position: relative;
    .chart-wrapper {
      background: #fff;
    // background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }