large-vue/src/views/screen/building/cameraDataDialog.vue

<template>
    <div class="main-data dialog-area" @click.stop="preventDefault"  @mouseleave="leaveFun">
      <div class="dialog-title">
        <img
          src="@/assets/images/main/cont_title_bg.png"
        />
        <div class="title">办公能耗</div>
      </div>
      <div class="dialog-cont">
        <div class="dialog-left">
          <div class="dialog-list">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">近一月楼宇能耗信息</span>
              </div>
              <div class="content">
                <div class="total-cot">
                    <div class="other-cont">
                    <img
                     src="@/assets/images/building_guarantee/img_1.png"
                     class="icon"
                   />
                      <div class="other-info">
                      <div class="desc">用水量</div>
                      <div class="num-info">
                      <div class="num">{{energyList[0].value}}</div>
                      <div class="unit">m³</div>
                      </div>
                     </div>
                  </div>

                  <div class="other-cou">
                    <img
                     src="@/assets/images/building_guarantee/img_1.png"
                     class="icon"
                   />
                      <div class="other-info">
                      <div class="desc">用电量</div>
                      <div class="num-info">
                      <div class="num">{{energyList[1].value}}</div>
                      <div class="unit">kWh</div>
                      </div>
                     </div>
                  </div>
                </div>
                 
              </div>
            </div>
          </div>

          <div class="dialog-list">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">空气概况</span>
              </div>
              <div class="leftNav">
                <div
              :class="['model1', 0 == curBodex ? 'cur' : '']"
              @click="chooseBox(0, 'indoor')"
            >
              室内
            </div>
            <div
              :class="['model1', 1 == curBodex ? 'cur' : '']"
              @click="chooseBox(1, 'outdoor')"
            >
             室外
            </div>
               </div>
               <!-- 室内 -->
              <div class="rightList1" v-if="showBox === 'indoor'" >
                  <div class="left-list" >                
                      <div class="left-info">
                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>                    
                      <div >
                        <div class="temelper">{{airOverviewList[0].name}}</div> 
                        <div class="num">{{airOverviewList[0].valueIn}}<span class="unit">°C</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[1].name}}</div>
                        <div class="num">{{airOverviewList[1].valueIn}}<span class="unit">%RH</span></div>
                      </div>
                    </div>
                   </div>
                   <div class="left-list">
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[2].name}}</div>
                        <div class="num">{{airOverviewList[2].valueIn}}<span class="unit">PPM</span></div>
                      </div>
                    </div>
                   </div>
                   <div class="left-list">
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[3].name}}</div>
                        <div class="num">{{airOverviewList[3].valueIn}}<span class="unit">ug/m³</span></div>
                      </div>
                    </div>
                   </div>
                   <div class="left-list">
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[4].name}}</div>
                        <div class="num">{{airOverviewList[4].valueIn}}<span class="unit">ug/m³</span></div>
                      </div>
                    </div>
                   </div>
                </div>

                    <!-- 室外 -->
              <div class="rightList1" v-else-if="showBox === 'outdoor'">
                  <div class="left-list">                
                      <div class="left-info">
                   
                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
                     
                      <div >
                        <div class="temelper">{{airOverviewList[0].name}}</div> 
                        <div class="num">{{airOverviewList[0].valueOut}}<span class="unit">°C</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[1].name}}</div> 
                        <div class="num">{{airOverviewList[1].valueOut}}<span class="unit">%RH</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[2].name}}</div> 
                        <div class="num">{{airOverviewList[2].valueOut}}<span class="unit">PPM</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[3].name}}</div> 
                        <div class="num">{{airOverviewList[3].valueOut}}<span class="unit">ug/m³</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">{{airOverviewList[4].name}}</div> 
                        <div class="num">{{airOverviewList[4].valueOut}}<span class="unit">ug/m³</span></div>
                      </div>                
                    </div>
                   </div>
                </div>

            </div>
          </div>
  
          <div class="dialog-list">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">定额指标</span>
              </div>
              <!-- <div class="content-Image"></div> -->
               <div class="pedestrianBox">
                  <div class="docWs">
                    <div class="yinBor"></div>
                    <div style="margin-left: 8px;">引导值</div>
                  </div>
                  <div class="docWs1">
                    <div class="jiBOX"></div>
                    <div style="margin-left: 8px;">基准值</div>
                  </div>
                  <div class="docWs2">
                    <div class="yuBox"></div>
                    <div style="margin-left: 8px;">约束值</div>
                  </div>
                  <div class="docWs3">
                    <div class="shiBox"></div>
                    <div style="margin-left: 8px;">实际进度</div>
                  </div>
               </div>
              <div class="charts-cont"> 
                <bar-chart
                :chart-data="pedestrianFlowBarData"
                :x-axis="pedestrianFlowBarAxis"
                :y-axis="pedestrianFlowBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="70px"
                      />
                </div> 
                <bar-chart
                :chart-data="waterFlowBarData"
                :x-axis="waterFlowBarAxis"
                :y-axis="waterFlowBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="70px"
                      />
                <bar-chart
                :chart-data="comprehensiveFlowBarData"
                :x-axis="comprehensiveFlowBarAxis"
                :y-axis="comprehensiveFlowBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="70px"
                      /> 
                <bar-chart
                :chart-data="perCapitaFlowBarData"
                :x-axis="perCapitaFlowBarAxis"
                :y-axis="perCapitaFlowBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="70px"
                      />
                <bar-chart
                :chart-data="powerFlowBarData"
                :x-axis="powerFlowBarAxis"
                :y-axis="powerFlowBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="70px"
                      />                         
                 <bar-chart
                :chart-data="exhaustFlowBarData"
                :x-axis="exhaustFlowBarAxis"
                :y-axis="exhaustFlowBarYaxis"
                y-color="#FFF"
                l-color="#FFF"
                width="515px"
                height="70px"
                      />  
                
                
            </div>
          </div>
  
          
          <div class="dialog-list">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">办公用电分项 (月)</span>
              </div>
              <div class="charts-cont"> 
                  <bar-chart
                    :chart-data="electricityAreaBarData"
                    :x-axis="electricityAreaBarAxis"
                    :yAxis="electricityAreaBarYaxis"
                    y-color="#FFF"
                    l-color="#FFF"
                    width="565px"
                    height="300px"
                  />
                </div>  

            </div>
          </div> 
  
          <div class="dialog-list">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">绿电比例</span>
              </div>
              <div class="energyBox">
                <StackedPieChart3D :IntionList="greenIntionList"/>
                <div class="routine">
                  <div class="routineNavBox">
                    <div class="imgBOX"> <img src="@/assets/images/building_guarantee/Path.png"></div>
                    <div class="greenName">常规电能</div>
                    <div class="greenNum">{{ greenIntionList.publicEnergy }}%</div>
                  </div>
                  <div class="greenPoxBOX">
                    <div class="imgBOX"> <img src="@/assets/images/building_guarantee/Path2.png"></div>
                    <div class="greenName" >绿电电能</div>
                    <div class="greenNum">{{ greenIntionList.grennEnergy }}%</div>
                  </div>
                </div>
              </div>
             
              
              <!-- <div id="wqo" style="width: 600px;height:400px;"></div> -->
            </div>
          </div>

          <!-- <div class="dialog-list">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">能耗设备</span>
              </div>
              <div class="rightList1">
                  <div class="left-list">                
                      <div class="left-info">
                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
                      <div >
                        <div class="temelper">空气质量监测仪</div> 
                        <div class="num">46<span class="unit">台</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">智能电表</div> 
                        <div class="num">78<span class="unit">台</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">液位传感器</div> 
                        <div class="num">71<span class="unit">台</span></div>
                      </div>                
                    </div>
                   </div>
                </div>

                <div class="rightList1">
                  <div class="left-list">                
                      <div class="left-info">
                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
                      <div >
                        <div class="temelper">电梯能量回收设备</div> 
                        <div class="num">83<span class="unit">台</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div >
                        <div class="temelper">水泵监测仪</div> 
                        <div class="num">74<span class="unit">台</span></div>
                      </div>                
                    </div>
                   </div>
                   <div class="left-list">                
                      <div class="left-info podTan">
                      <div class="airStation">
                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
                      </div>
                      <div>
                        <div class="temelper">智能水表</div> 
                        <div class="num">12<span class="unit">台</span></div>
                      </div>                
                    </div>
                   </div>
                </div>

            </div>
          </div> -->
        </div>
  
        <div class="dialog-right">
          <div class="dialog-list">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">碳排放量月度变化趋势图</span>
              </div>
              <div class="content">
                <line-chart
                  :chart-data="lineData"
                   :x-axis="lineAxis"
                   :yAxis="lineYAxis"
                     :legend="lineLegend"
                    y-color="#FFF"
                    l-color="#FFF"
                    width="565px"
                    height="240px"
                  />
              </div>

            <div class="dialog-list1">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">年度累计综合能耗</span>
              </div>
              <div class="content">
                <div class="total-cot1">
                    <div class="other-cont">
                    <img
                     src="@/assets/images/building_guarantee/img_1.png"
                     class="icon"
                   />
                      <div class="other-info">
                      <div class="desc">年度累计综合能耗</div>
                      <div class="num-info">
                      <div class="num">{{comprehensiveList.yearTotal}}</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>

                  <div class="other-cou1">
                      <div class="other-info">
                      <div class="num-info">
                        <div class="unit">同比减少</div>
                      <div class="num">{{comprehensiveList.yearGrowth}}</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>
                </div>
                <line-chart
                  :chart-data="comprehensiveData"
                   :x-axis="lineAxis"
                   :yAxis="lineYAxis"
                     :legend="lineLegend"
                    y-color="#FFF"
                    l-color="#FFF"
                    width="565px"
                    height="240px"
                  />
              </div>
            </div>
          </div>
          
          <div class="dialog-list1">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">年度累计电耗</span>
              </div>
              <div class="content">
                <div class="total-cot1">
                    <div class="other-cont">
                    <img
                     src="@/assets/images/building_guarantee/img_1.png"
                     class="icon"
                   />
                      <div class="other-info">
                      <div class="desc">年度累计电耗</div>
                      <div class="num-info">
                      <div class="num">{{electricityList.yearTotal}}</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>

                  <div class="other-cou1">
                      <div class="other-info">
                      <div class="num-info">
                        <div class="unit">同比减少</div>
                      <div class="num">{{electricityList.yearGrowth}}</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>
                </div>
                <line-chart
                  :chart-data="electricityData"
                   :x-axis="lineAxis"
                   :yAxis="lineYAxis"
                     :legend="lineLegend"
                    y-color="#FFF"
                    l-color="#FFF"
                    width="565px"
                    height="240px"
                  />
              </div>
            </div>
          </div>
          

          <div class="dialog-list1">
            <div class="dialog-item wid100">
              <div class="content-title">
                <span class="title">年度累计水耗</span>
              </div>
              <div class="content">
                <div class="total-cot1">
                    <div class="other-cont">
                    <img
                     src="@/assets/images/building_guarantee/img_1.png"
                     class="icon"
                   />
                      <div class="other-info">
                      <div class="desc">年度累计水耗</div>
                      <div class="num-info">
                      <div class="num">{{waterList.yearTotal}}</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>

                  <div class="other-cou1">
                      <div class="other-info">
                      <div class="num-info">
                        <div class="unit">同比减少</div>
                      <div class="num">{{waterList.yearGrowth}}</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>
                </div>
                <line-chart
                  :chart-data="waterData"
                   :x-axis="lineAxis"
                   :yAxis="lineYAxis"
                     :legend="lineLegend"
                    y-color="#FFF"
                    l-color="#FFF"
                    width="565px"
                    height="240px"
                  />
              </div>
            </div>
          </div>
        </div>
     
      
          </div>
  
    
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import LineChart from "@/components/Echarts/LineChart";
  import PieChart from "@/components/Echarts/PieChart";
  import BarChart from "@/components/Echarts/BarChart.vue";
  import StackedPieChart3D from '@/components/Echarts/StackedPieChart3D.vue';
  import echarts from "echarts";
  import 'echarts-gl';
  import {
    powerAndWaterMonth,airOverview,getTarget,useElectricity,carbon,energyYear,powerYear,waterYear,greenElectricity
  } from "@/api/screen/service";
  
  export default {
    name: "EnergyRateDialog",
    components: {
      BarChart,
      PieChart,
      LineChart,
      StackedPieChart3D
    },
    props: {
      appOrg: {
        type: String,
        default: "0000",
      },
    },
    data() {
      return {
        energyList:[{name: "water", value: 0}, {name: "power", value: 0}],
        airOverviewList:{},
        curBodex:0,
        showBox: "indoor",
        Boxtabs: [
        {
          name: "室内",
          tab: "indoor",
        },
        {
          name: "室外",
          tab: "outdoor",
        },
      ],
        lineLegend: {
          top: 0,
          orient: "horizontal",
          right: 0,
          itemWidth: 17, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            color: "#FFF",
          },
        },
        greenIntionList:{},
        //单位建筑面积电耗
      pedestrianFlowBarData: [],
      pedestrianFlowBarAxis: {},
      pedestrianFlowBarYaxis: {},
        //单位建筑面积水耗
        waterFlowBarData: [],
        waterFlowBarAxis: {},
        waterFlowBarYaxis: {},
        //单位建筑面积综合能耗
        comprehensiveFlowBarData: [],
        comprehensiveFlowBarAxis: {},
        comprehensiveFlowBarYaxis: {},
        //人均水耗
        perCapitaFlowBarData: [],
        perCapitaFlowBarAxis: {},
        perCapitaFlowBarYaxis: {},
        //人均电耗
        powerFlowBarData: [],
        powerFlowBarAxis: {},
        powerFlowBarYaxis: {},
        //人均综合能耗
        exhaustFlowBarData: [],
        exhaustFlowBarAxis: {},
        exhaustFlowBarYaxis: {},
        // 碳排放量月度变化趋势图
        lineData: [],
        // 年度累计综合能耗
        comprehensiveList:{},
        comprehensiveData:[],
        // 年度累计电耗
        electricityList:{},
        electricityData:[],
        // 年度累计水耗
        waterList:{},
        waterData:[],
        lineAxis: {
        type: "category",
          data: ["01月", "02月", "03月", "04月","05月","06月","07月","08月","09月","10月","11月","12月",],
          axisLabel: {
            color: "white", // 设置横坐标轴字体颜色为红色
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#465A64",
            },
          },
          boundaryGap: false,
      },
      lineYAxis: {
        name: "单位： 吨",
        nameTextStyle: {
          color: "#fff",
          padding: [0, 0, 0, 30],
        },
        axisLabel: {
          color: "#FFF",
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      
       //告警事件的历史统计
       giveLineData: [],
       //配电室重要抽屉负荷情况
       barData: [],
        barAxis: {},
        barYAxis: {},
        barLegend: {},
        yearAllWaterChangeData: {
          value: 0
        },
  
        useElectricityBarData: [],
     
        useElectricityBarYaxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          name: "kwh",
          nameTextStyle: {
            color: "#fff",
          },
          axisLine: {
            show:false
          },
          axisLabel: {
            color: "white", // 设置横坐标轴字体颜色为红色
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: false,
        },
        useElectricityBarLegend: {
          show: false,
        },

  
        pieData: [
          {
            name: "",
            value: 56,
          },
          {
            name: "",
            value: 44,
          },
        ],
  
        resourceDataList: [],
     //用电分项
     electricityAreaBarData: [],
      electricityAreaBarAxis: {
        type: "category",
        data: [
          "照明用电",
          "电梯用电",
          "办公用电",
          "其他用电",
        ],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
          rotate: 0,
          interval: 0
        },
        axisLine:{
          show:true
        },
        axisTick: {
          show: false,
        },
        splitArea:false
      },
      electricityAreaBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: '单位: kWh',
        nameTextStyle: {
          color: '#fff',
          padding: [0,0,0,30]
        },
        axisLine:{
          lineStyle:{
            color:"#465A64"
          }
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea:false
      },

      barGrid: {
        top: 10,
        left: "2%",
        right: "5%",
        containLabel: true,
        bottom: 0,
      },
      };
    },
    created() {
        //绿电比例
        this.greenElectricity();
      // 近一月楼宇能耗信息
      this.powerAndWaterMonth();
      //空气概况
      this.airOverview();
        //单位建筑面积电耗
    this.getTarget();
      //用电分项
      this.useElectricity();
      // 碳排放量月度变化趋势图
      this.carbon();
      //年度累计综合能耗
      this.energyYear();
      //年度累计电耗
      this.powerYear();
      //年度累计水耗
      this.waterYear();
    },
    destroyed() {},
    beforeDestroy() {},
    mounted() {
     
    },
    methods: {
       //近一月楼宇能耗信息
       powerAndWaterMonth() {
        powerAndWaterMonth(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.energyList=res.data; 
        }
      });
    },
      
     //空气概况
     airOverview() {
      airOverview(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.airOverviewList=res.data;
        }
      });
    },
   
        //单位建筑面积电耗
        getTarget() {
          getTarget(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.pedestrianFlowBarData = [
            {
              name: '',
              type: "bar",
              stack: "a",
             
              itemStyle: {
                color: '#2C5466',
                borderColor: '#2D82B6', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[0].guideValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#754F38',
                borderColor: '#A54110', // 边框颜色
                
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[0].tieValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#4B532A',
                borderColor: '#9D8B3A', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[0].datumValue],
            },
            {
              name: '',
              type: "bar",
              stack: "b",
              barGap:"-85%",
              itemStyle: {
                color: '#00F0FF',
              },
              barWidth: 2,
              data: [res.data[0].value],
            },
          ];
          this.pedestrianFlowBarYaxis = [
            {
              type: "category",
              data: ["单位建筑面积电耗(kW·h/m²)"],
              axisLabel: {
                show: true,
                inside: true,
                interval: 0,
                splitNumber: 50,
                textStyle: {
                  color: '#ffffff',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'left',
                  padding: [0, 0, 20, -5]
                }
              },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
          {
            type: "category",
            data: [res.data[0].value],
            axisLabel: {
              show: true,
              inside: true,
              interval: 0,
              splitNumber: 50,
              textStyle: {
                color: '#00F0FF',
                verticalAlign: 'bottom',
                fontSize: 16,
                align: 'right',
                padding: [0, 0, 20, -5]
         }
       },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
     ] 
          
          this.pedestrianFlowBarAxis = {
            max: res.data[0].total,// 设置最大值是多少
            splitNumber: 3,// 设置分几段显示
            type: 'value',
          show: false,
          
          minorSplitLine: {
            show: false
          }
          };
          //单位建筑面积水耗 
          this.waterFlowBarData = [
            {
              name: '',
              type: "bar",
              stack: "a",
             
              itemStyle: {
                color: '#2C5466',
                borderColor: '#2D82B6', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[1].guideValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#754F38',
                borderColor: '#A54110', // 边框颜色
                
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[1].tieValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#4B532A',
                borderColor: '#9D8B3A', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[1].datumValue],
            },
            {
              name: '',
              type: "bar",
              stack: "b",
              barGap:"-85%",
              itemStyle: {
                color: '#00F0FF',
              },
              barWidth: 2,
              data: [res.data[1].value],
            },
          ];
          this.waterFlowBarYaxis = [
            {
              type: "category",
              data: ["单位建筑面积水耗(kW·h/m²)"],
              axisLabel: {
                show: true,
                inside: true,
                interval: 0,
                splitNumber: 50,
                textStyle: {
                  color: '#ffffff',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'left',
                  padding: [0, 0, 20, -5]
                }
              },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
          {
            type: "category",
            data: [res.data[1].value],
            axisLabel: {
              show: true,
              inside: true,
              interval: 0,
              splitNumber: 50,
              textStyle: {
                color: '#00F0FF',
                verticalAlign: 'bottom',
                fontSize: 16,
                align: 'right',
                padding: [0, 0, 20, -5]
         }
       },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
     ]        
          this.waterFlowBarAxis = {
            max: res.data[1].total,// 设置最大值是多少
            splitNumber: 3,// 设置分几段显示
            type: 'value',
          show: false,
          
          minorSplitLine: {
            show: false
          }
          };
          //单位建筑面积综合能耗
          this.comprehensiveFlowBarData = [
            {
              name: '',
              type: "bar",
              stack: "a",
             
              itemStyle: {
                color: '#2C5466',
                borderColor: '#2D82B6', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[2].guideValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#754F38',
                borderColor: '#A54110', // 边框颜色
                
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[2].tieValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#4B532A',
                borderColor: '#9D8B3A', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[2].datumValue],
            },
            {
              name: '',
              type: "bar",
              stack: "b",
              barGap:"-85%",
              itemStyle: {
                color: '#00F0FF',
              },
              barWidth: 2,
              data: [res.data[2].value],
            },
          ];
          this.comprehensiveFlowBarYaxis = [
            {
              type: "category",
              data: ["单位建筑面积综合能耗(kW·h/m²)"],
              axisLabel: {
                show: true,
                inside: true,
                interval: 0,
                splitNumber: 50,
                textStyle: {
                  color: '#ffffff',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'left',
                  padding: [0, 0, 20, -5]
                }
              },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
          {
            type: "category",
            data: [res.data[2].value],
            axisLabel: {
              show: true,
              inside: true,
              interval: 0,
              splitNumber: 50,
              textStyle: {
                color: '#00F0FF',
                verticalAlign: 'bottom',
                fontSize: 16,
                align: 'right',
                padding: [0, 0, 20, -5]
         }
       },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
     ]        
          this.comprehensiveFlowBarAxis = {
            max: res.data[2].total,// 设置最大值是多少
            splitNumber: 3,// 设置分几段显示
            type: 'value',
          show: false,
          
          minorSplitLine: {
            show: false
          }
          };
           //人均水耗
           this.perCapitaFlowBarData = [
            {
              name: '',
              type: "bar",
              stack: "a",
             
              itemStyle: {
                color: '#2C5466',
                borderColor: '#2D82B6', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[4].guideValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#754F38',
                borderColor: '#A54110', // 边框颜色
                
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[4].tieValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#4B532A',
                borderColor: '#9D8B3A', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[4].datumValue],
            },
            {
              name: '',
              type: "bar",
              stack: "b",
              barGap:"-85%",
              itemStyle: {
                color: '#00F0FF',
              },
              barWidth: 2,
              data: [res.data[4].value],
            },
          ];
          this.perCapitaFlowBarYaxis = [
            {
              type: "category",
              data: ["人均水耗(kW·h/m²)"],
              axisLabel: {
                show: true,
                inside: true,
                interval: 0,
                splitNumber: 50,
                textStyle: {
                  color: '#ffffff',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'left',
                  padding: [0, 0, 20, -5]
                }
              },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
          {
            type: "category",
            data: [res.data[4].value],
            axisLabel: {
              show: true,
              inside: true,
              interval: 0,
              splitNumber: 50,
              textStyle: {
                color: '#00F0FF',
                verticalAlign: 'bottom',
                fontSize: 16,
                align: 'right',
                padding: [0, 0, 20, -5]
         }
       },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
       ]        
        this.perCapitaFlowBarAxis = {
          max: res.data[4].total,// 设置最大值是多少
          splitNumber: 3,// 设置分几段显示
          type: 'value',
          show: false,
          
          minorSplitLine: {
            show: false
          }
          };
           //人均电耗
           this.powerFlowBarData = [
            {
              name: '',
              type: "bar",
              stack: "a",
             
              itemStyle: {
                color: '#2C5466',
                borderColor: '#2D82B6', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[3].guideValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#754F38',
                borderColor: '#A54110', // 边框颜色
                
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[3].tieValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#4B532A',
                borderColor: '#9D8B3A', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[3].datumValue],
            },
            {
              name: '',
              type: "bar",
              stack: "b",
              barGap:"-85%",
              itemStyle: {
                color: '#00F0FF',
              },
              barWidth: 2,
              data: [res.data[3].value],
            },
          ];
          this.powerFlowBarYaxis = [
            {
              type: "category",
              data: ["人均电耗(kW·h/m²)"],
              axisLabel: {
                show: true,
                inside: true,
                interval: 0,
                splitNumber: 50,
                textStyle: {
                  color: '#ffffff',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'left',
                  padding: [0, 0, 20, -5]
                }
              },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
          {
            type: "category",
            data: [res.data[3].value],
            axisLabel: {
              show: true,
              inside: true,
              interval: 0,
              splitNumber: 50,
              textStyle: {
                color: '#00F0FF',
                verticalAlign: 'bottom',
                fontSize: 16,
                align: 'right',
                padding: [0, 0, 20, -5]
         }
       },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
       ]        
        this.powerFlowBarAxis = {
          max: res.data[3].total,// 设置最大值是多少
          splitNumber: 3,// 设置分几段显示
          type: 'value',
          show: false,
          
          minorSplitLine: {
            show: false
          }
          };
           //人均综合能耗
           this.exhaustFlowBarData = [
            {
              name: '',
              type: "bar",
              stack: "a",
             
              itemStyle: {
                color: '#2C5466',
                borderColor: '#2D82B6', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[5].guideValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#754F38',
                borderColor: '#A54110', // 边框颜色
                
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[5].tieValue],
            },
            {
              name: '',
              type: "bar",
              stack: "a",
              itemStyle: {
                color: '#4B532A',
                borderColor: '#9D8B3A', // 边框颜色
                borderWidth: 2,
                borderType: 'solid',
              },
              barWidth: 30,
              data: [res.data[5].datumValue],
            },
            {
              name: '',
              type: "bar",
              stack: "b",
              barGap:"-85%",
              itemStyle: {
                color: '#00F0FF',
              },
              barWidth: 2,
              data: [res.data[5].value],
            },
          ];
          this.exhaustFlowBarYaxis = [
            {
              type: "category",
              data: ["人均综合能耗(kW·h/m²)"],
              axisLabel: {
                show: true,
                inside: true,
                interval: 0,
                splitNumber: 50,
                textStyle: {
                  color: '#ffffff',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'left',
                  padding: [0, 0, 20, -5]
                }
              },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
          {
            type: "category",
            data: [res.data[5].value],
            axisLabel: {
              show: true,
              inside: true,
              interval: 0,
              splitNumber: 50,
              textStyle: {
                color: '#00F0FF',
                verticalAlign: 'bottom',
                fontSize: 16,
                align: 'right',
                padding: [0, 0, 20, -5]
         }
       },
            axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
          },
       ]        
        this.exhaustFlowBarAxis = {
          max: res.data[5].total,// 设置最大值是多少
          splitNumber: 3,// 设置分几段显示
          type: 'value',
          show: false,
          
          minorSplitLine: {
            show: false
          }
          };
        } else {

        }
      });
    },

    
    //办公用电分项
    useElectricity() {
      useElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          
          this.electricityAreaBarData = [
            {
              data: [{
                  value: res.data[0].itemValue,
                 
                },{
                  value: res.data[1].itemValue,
               
                },
                {
                  value: res.data[2].itemValue,
                 
                },{
                  value: res.data[3].itemValue,
                 
                }],
              type: "bar",
              barWidth: 30,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FCE0BB' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#D47F1C' // 100% 处的颜色
                    }
                  ]
                }
              },
            },
          ];
        } else {
          //构造默认数据

        }
      });
    },

     //绿电比例
     greenElectricity() {
            greenElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.greenIntionList=res.data; 
        }
      });
    },
      //切换菜单
      chooseBox(index) {
      this.curBodex = index;
      this.showBox = this.Boxtabs[index].tab;
    },
    // 碳排放量月度变化趋势图
    carbon() {
      carbon(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
      (this.lineData = [
        {
          name: res.data[0].year,
          type: "line",
        
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0.40,
                color: "#00FFFF",
              },
              {
                offset: 0.78,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#0AC1BD", // 设置线的颜色
          },

          smooth: true,
          data: res.data[0].monthData,
        },{
          name: res.data[1].year,
          type: "line",
          
       
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 5, 15, 20, [
              {
                offset: 0.95,
                color: "#645727",
              },
              
              {
                offset: 0.98,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#D67C15", // 设置线的颜色
          },

          smooth: true,
          data: res.data[1].monthData,
        },
      ])
      }
    });  
  },
    
  //年度累计综合能耗
  energyYear() {
    energyYear(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
        this.comprehensiveList=res.data;
      (this.comprehensiveData = [
        {
          name: "今年",
          type: "line",
         
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0.40,
                color: "#00FFFF",
              },
              {
                offset: 0.78,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#0AC1BD", // 设置线的颜色
          },

          smooth: true,
          data: res.data.year,
        },{
          name: "去年",
          type: "line",
          
    
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 5, 15, 20, [
              {
                offset: 0.95,
                color: "#645727",
              },
              
              {
                offset: 0.98,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#D67C15", // 设置线的颜色
          },

          smooth: true,
          data: res.data.lastYear,
        },
      ])
      }
    });  
  },

  //年度累计电耗
  powerYear() {
    powerYear(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
        this.electricityList=res.data;
      (this.electricityData = [
        {
          name: "今年",
          type: "line",
          // symbol: "none",
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0.40,
                color: "#00FFFF",
              },
              {
                offset: 0.78,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#0AC1BD", // 设置线的颜色
          },

          smooth: true,
          data: res.data.year,
        },{
          name: "去年",
          type: "line",
          
          // symbol: "none",
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 5, 15, 20, [
              {
                offset: 0.95,
                color: "#645727",
              },
              
              {
                offset: 0.98,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#D67C15", // 设置线的颜色
          },

          smooth: true,
          data: res.data.lastYear,
        },
      ])
      }
    });  
  },
    
  
  //年度累计水耗
  waterYear() {
    waterYear(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
        this.waterList=res.data;
      (this.waterData = [
        {
          name: "今年",
          type: "line",
          // symbol: "none",
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0.40,
                color: "#00FFFF",
              },
              {
                offset: 0.78,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#0AC1BD", // 设置线的颜色
          },

          smooth: true,
          data: res.data.year,
        },{
          name: "去年",
          type: "line",
          
          // symbol: "none",
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 5, 15, 20, [
              {
                offset: 0.95,
                color: "#645727",
              },
              
              {
                offset: 0.98,
                color: "#17231E",
              },
            ]),
          },
          lineStyle: {
            width: 2, // 设置线宽
            color: "#D67C15", // 设置线的颜色
          },

          smooth: true,
          data: res.data.lastYear,
        },
      ])
      }
    });  
  },
      
      // //资源信息
      // resourceInfo() {
      //   resourceInfo(this.$props.appOrg).then((res) => {
      //     if (Number(res.code) === 200) {
      //       let color = ["#00FFFF", "#2F82FE", "#12DB62", "#FFB948", "#FF4848"];
      //       let resourceDataList = [];
      //       res.data.forEach((item, index)=>{
      //         item.color = color[index];
      //         resourceDataList.push(item);
      //       })
      //       this.resourceDataList = resourceDataList;
      //     }
      //   });
      // },
  
      //鼠标移出
      leaveFun(){
        this.$emit("closeDialog")
        setTimeout(()=>{
          this.$emit("closeDialog")
        },200)
      },
  
      preventDefault() {
  
      },
  
      showContent(percent){
        return percent;
      }
    },
  };
  </script>
  
  <style lang="scss">
  .dialog-area {
    overflow: hidden;
    width: 1225px;
    height:920px;
    background: url("../../../assets/images/main/components_max_bg.png") no-repeat;
    background-size: cover;
    padding: 19px 15px 11px 15px;
    //backdrop-filter: blur(10px);
  
    .dialog-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 10px;
      img {
        width: 284px;
        height: 32px;
      }
      .title {
        font-size: 20px;
        font-weight: 900;
        font-family: "PingFangSC";
        width: 100%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -5px;
        color: #fff;
      }
    }
  
    .dialog-cont {
      width:100%;
      height: 850px;
      padding: 15px;
      overflow-y: scroll;
      background: url("../../../assets/images/main/components_max_cont.png") no-repeat;
      background-size: cover;
  
      .dialog-left{
        width: 570px;
        float: left;
      }
      .dialog-right{
        width: 570px;
        float: right;
      }
    }
  
    .dialog-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
  
      .dialog-item{
        width: calc(50% - 20px);
      }
  
      .dialog-item-cont{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:40px;
      }
  
      .wid100 {
        width: 100%;
  
        .content-title {
          width: 100%;
          background: url("../../../assets/images/main/title_pro_longer.png") no-repeat;
        }
      }
    }
    
    .dialog-list1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      margin-top: 20px;
      .dialog-item{
        width: calc(50% - 20px);
      }
  
      .dialog-item-cont{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:40px;
      }
  
      .wid100 {
        width: 100%;
  
        .content-title {
          width: 100%;
          background: url("../../../assets/images/main/title_pro_longer.png") no-repeat;
        }
      }
    }
    .content-title {
      width: 100%;
      height: 26px;
      background: url("../../../assets/images/main/title_pro.png") no-repeat;
      background-size: 100% 100%;
      font-family: "PingFangSC";
      font-size: 16px;
      font-weight: bold;
      color: #00ffff;
      padding-left: 25px;
      .title {
        display: block;
        position: relative;
        top:-5px;
      }
    }
    //左边菜单
    .rightList1{
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0px 0px 0px;
      justify-content: space-between;
      .left-list{
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          img{
            display: block;
            width:42px;
            height:45px;
            margin-right: 5px;
          }
          .left-info{
            display: flex;
            // padding-left:12px;
            .airStation{
              display: flex;
              align-items: center;
            }
            .temelper{
              font-size: 18px;
              color:#FFFFFF;
              font-family: "electronicFont";
            }
  
            .num{
              font-size: 30px;
              color:#00FFFF;
              font-family: "electronicFont";
              display: flex;
              flex-direction: row;
              align-items: baseline;
              .unit{
                font-size: 12px;
                font-family: 'PingFangSC';
              }
            }
            .name{
              display: flex;
              font-size: 14px;
              color:#FFFFFF;
              font-family: 'fashionZh';
              padding-top:4px;
            }
          
          }
          .podTan{
              margin-right: 17px;
            }
        }
    }
      //右边菜单
      .rightList2{
      display: flex;
      flex-wrap: wrap;
      padding: 10px 10px 0px 10px;
      justify-content: space-between;
      .left-list{
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          margin-left: 30px;
          img{
            display: block;
            // width:20px;
            // height:20px;
            margin-right: 5px;
          }
          .left-info{
           // padding-left:12px;
  
            .num{
              font-size: 34px;
              color:#00FFFF;
              font-family: "electronicFont";
              display: flex;
              flex-direction: row;
              align-items: center;
              .unit{
                font-size: 12px;
                font-family: 'PingFangSC';
                font-weight: bold;
                padding-top: 5px;
              }
            }
            .name{
              display: flex;
              font-size: 14px;
              color:#FFFFFF;
              font-family: 'fashionZh';
              padding-top:4px;
            }
          
          }
        }
        .right-Top{
          display: flex;
          .left-list1{
          width: 130px;
           height: 45px;
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          margin-right: 20px;
          margin-top: 5px;
          background: url("../../../assets/images/building_guarantee/normal.png") no-repeat;
          background-size: 100% 100%;
          justify-content: center;
          .nor{
              display: flex;
              font-size: 34px;
              color:#10D95F;
              font-family: "electronicFont";
              padding-top:4px;
              padding-left: 50px;
            }
        }
        .left-list2{
          width: 130px;
           height: 45px;
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          margin-right: 50px;
          margin-top: 5px;
          background: url("../../../assets/images/building_guarantee/danger.png") no-repeat;
          background-size: 100% 100%;
          justify-content: center;
          .dor{
              display: flex;
              font-size: 34px;
              color:#FF003D;
              font-family: "electronicFont";
              padding-top:4px;
              padding-left: 50px;
            }
        }
        }
   
    }
    .content {
      margin-top: 20px;
      .title-format {
        display: flex;
        flex-direction: row;
        align-items: center;
        img {
          width: 6px;
          height: 24px;
          margin-right: 6px;
        }
        .title-info {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          color: #ffffff;
          .title-en {
            font-size: 8px;
            color: #ffffff;
            opacity: 0.4;
          }
        }
      }
      .total-data {
        display: flex;
        align-items: baseline;
        color: #00ffff;
        margin-top: 4px;
        .total {
          font-size: 40px;
          font-family: "electronicFont";
        }
        .unit {
          font-size: 12px;
        }
      }
      .data-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        .data-item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 24px;
          img {
            width: 89px;
            height: 82px;
          }
          .desc {
            font-size: 14px;
            color: #ffffff;
            margin-top: 7px;
            opacity: 0.4;
          }
          .data {
            position: absolute;
            top: 20px;
            left: 0;
            width: 89px;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00ffff;
            font-family: "electronicFont";
          }
        }
        .data-item:nth-child(2n) {
          margin-right: 0;
        }
      }
      .data-list {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .data-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
          border-right: 1px solid rgba(25, 252, 222, 0.2);
          .data-detail {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            color: #00ffff;
            margin-top: 11px;
            font-size: 12px;
            .data {
              font-size: 30px;
              font-family: "electronicFont";
            }
          }
        }
        .data-item:last-child {
          border-right: none;
        }
      }
      .rate-area {
        position: relative;
        img {
          width: 198px;
          height: 114px;
        }
        .rate {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          color: #fff;
          .rate-data {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            color: #ffba44;
            .data {
              font-family: "electronicFont";
              font-size: 30px;
            }
            .unit {
              font-size: 12px;
            }
          }
          .desc {
            font-size: 12px;
            width: 58px;
            text-align: center;
          }
        }
      }
    }
    .charts-cont{
     width:100%;
    padding-top:10px;
  }

    .total-cot{
        display: flex;
        .other-cont {
      display: flex;
  
      .icon {
        display: block;
        width: 70px;
        height: auto;
      }
      .other-info {
        padding-left: 2px;
  
        .desc {
          font-size: 12px;
          color: #ffffff;
          font-weight: bold;
        }
        .num-info {
          width: 100%;
          padding-top: 2px;
          display: flex;
          align-items: center;
  
          .num {
            font-size: 30px;
            color: #00ffff;
            font-weight: bold;
            font-family: "electronicFont";
          }
          .unit {
            font-size: 12px;
            color: #00ffff;
            font-weight: 500;
            position: relative;
            top: 4px;
          }
          .mar {
            margin-left: 20px;
          }
        }
      }
    }
    .other-cou{
        display: flex;
        margin-left:60px;
  
  .icon {
    display: block;
    width: 70px;
    height: auto;
  }
  .other-info {
    padding-left: 2px;

    .desc {
      font-size: 12px;
      color: #ffffff;
      font-weight: bold;
    }
    .num-info {
      width: 100%;
      padding-top: 2px;
      display: flex;
      align-items: center;

      .num {
        font-size: 30px;
        color: #00ffff;
        font-weight: bold;
        font-family: "electronicFont";
      }
      .unit {
        font-size: 12px;
        color: #00ffff;
        font-weight: 500;
        position: relative;
        top: 4px;
      }
      .mar {
        margin-left: 20px;
      }
    }
  }
    }
   
    
}
 //年度累计综合能耗
 .total-cot1{
        display: flex;
        padding-left: 20px;
        .other-cont {
      display: flex;
  
      .icon {
        display: block;
        width: 70px;
        height: auto;
      }
      .other-info {
        padding-left: 2px;
  
        .desc {
          font-size: 12px;
          color: #ffffff;
          font-weight: bold;
        }
        .num-info {
          width: 100%;
          padding-top: 2px;
          display: flex;
          align-items: center;
  
          .num {
            font-size: 30px;
            color: #00ffff;
            font-weight: bold;
            font-family: "electronicFont";
          }
          .unit {
            font-size: 12px;
            color: #00ffff;
            font-weight: 500;
            position: relative;
            top: 4px;
          }
          .mar {
            margin-left: 20px;
          }
        }
      }
    }
    .other-cou1{
        display: flex;
        margin-left:30px;
        align-items: center;
  .icon {
    display: block;
    width: 70px;
    height: auto;
  }
  .other-info {
    padding-left: 2px;
    padding-top: 8px;
    .desc {
      font-size: 12px;
      color: #ffffff;
      font-weight: bold;
    }
    .num-info {
      width: 100%;
      padding-top: 2px;
      display: flex;
      align-items: center;

      .num {
        font-size: 30px;
        color: #00ffff;
        font-weight: bold;
        font-family: "electronicFont";
      }
      .unit {
        font-size: 12px;
        color: #00ffff;
        font-weight: 500;
        position: relative;
        top: 4px;
      }
      .mar {
        margin-left: 20px;
      }
    }
  }
    }
   
    
}
  
  
    .total-cont{
      width: 100%;
      height: 35px;
      background: url("../../../assets/images/main/lightLone.png") no-repeat;
      background-size: 100% 100%;
      font-family: "PingFangSC";
      font-size: 13px;
      font-weight: bold;
      color: #ffffff;
      padding-left: 25px;
      padding-top: 6px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      margin-left: 15px;
    }

    .circle-cont {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;
  
      .circle-list {
        width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
  
        .re-img{
          width: 100px;
          height: auto;
          position: relative;
        }
        .re-value{
          position: absolute;
          width: 100px;
          font-size: 30px;
          font-weight: bold;
          font-family: "electronicFont";
          color: #00FFFF;
          text-align: center;
          top: 5px;
          left: 0px;
        }
  
        .name {
          font-size: 12px;
          color: #ffffff;
          font-weight: 500;
          padding-top: 6px;
          width: 100%;
          overflow: hidden;
          text-align: center;
          white-space: nowrap;
          padding-left: 5px;
        }
      }
  
      .el-progress__text {
        font-size: 12px !important;
        color: #fff !important;
      }
    }
  
    .table-cont {
      width: 100%;
  
      .table-top {
        width: 100%;
        height: 26px;
        background: url("../../../assets/images/building_guarantee/img_11.png")
          no-repeat;
        background-size: 100% 100%;
        padding: 0 25px 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #00ffff;
      }
      .table-bot {
        width: 100%;
  
        .table-list {
          width: 100%;
          height: 38px;
          padding: 0 25px 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          color: #ffffff;
          font-weight: 500;
        }
      }
    }
    .other-cont {
    display: flex;

    .icon {
      display: block;
      width: 70px;
      height: auto;
    }
    .other-info {
      padding-left: 2px;

      .desc {
        font-size: 12px;
        color: #ffffff;
        font-weight: bold;
      }
      .num-info {
        width: 100%;
        padding-top: 2px;
        display: flex;
        align-items: center;

        .num {
          font-size: 30px;
          color: #00ffff;
          font-weight: bold;
          font-family: "electronicFont";
        }
        .unit {
          font-size: 12px;
          color: #00ffff;
          font-weight: 500;
          position: relative;
          top: 4px;
        }
        .mar {
          margin-left: 20px;
        }
      }
    }
  }
  .content-Image{
        width: 100%;
        height: 400px;
        background: url("../../../assets/images/building_guarantee/zhibiao.png")
          no-repeat;
        background-size: 100% 100%;
        margin: 10px 10px 10px 10px; 
  }
  .energyBox{
    display: flex;
    .routine{
    display: flex;
    width: 35%;
    align-items: center;
    color: #ffffff;
    flex-wrap: wrap;
    align-content: center;
    .routineNavBox{
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    .imgBOX{
      width: 25px;
      img{
        height: 15px;
      }
    }
    .greenName{
      font-size: 18px;
    }
    .greenNum{
      margin-left: 10px;
      color: #00ffff;
    }
    }
    .greenPoxBOX{
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    .imgBOX{
      width: 25px;
      img{
        height: 15px;
      }
    }
    .greenName{
      font-size: 18px;
    }
    .greenNum{
      margin-left: 10px;
      color: #00ffff;
    }
    }
    }
  }
  //绿电比例
  .greenElectricity{
        height: 100px;
        background: url("../../../assets/images/building_guarantee/greenElectricity.png")
          no-repeat;
        margin: 20px 20px 10px 20px; 
  }
  .leftNav{
    display: flex;
    margin: 15px 0px 0px 15px;
    .model1 {
          margin-right: 15px;
          width: 82px;
          height: 45px;
          line-height: 30px;
          text-align: center;
          font-family: "PingFangSc";
          font-size: 14px;
          font-weight: bold;
           background: url("../../../assets/images/main/choose_short_single.png") no-repeat;
         // background-size: 95% 95%;
          color: #CED6D6;
          cursor: pointer;
        }
        .model:last-child {
          margin-right: 0;
        }
        .cur {
          color: #05FEFE;
          //  background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
        }
  }
  .pedestrianBox{
    display: flex;
    color: #ffffff;
    cursor: pointer;
    margin: 15px 0 10px 9px;
    .docWs{
      display: flex;
    align-items: center;
    .yinBor{
      width: 15px;
    height: 15px;
    background: #2C5466;
    border: 2px solid #2D82B6;
    }
    }
    .docWs1{
      display: flex;
    align-items: center;
    margin-left: 25px;
    .jiBOX{
      width: 15px;
    height: 15px;
    background: #754F38;
    border: 2px solid #A54110;
    }
    }
    .docWs2{
      display: flex;
    align-items: center;
    margin-left: 25px;
    .yuBox{
      width: 15px;
    height: 15px;
    background: #4B532A;
    border: 2px solid #9D8B3A;
    }
    }
    .docWs3{
      display: flex;
    align-items: center;
    margin-left: 25px;
    .shiBox{
      width: 15px;
    height: 3px;
    background: #00f0ff;
    }
    }
  }
    .table-cont .fir {
      width: 20%;
      text-align: left;
    }
    .table-cont .snd {
      width: 50%;
      text-align: center;
    }
    .table-cont .thd {
      width: 30%;
      text-align: right;
    }
  
    ::-webkit-scrollbar {
      display: none;
      width: 3px;
      height: 3px;
    }
  
    ::-webkit-scrollbar-thumb {
      //滑块部分
      // border-radius: 5px;
      background-color: #58cbbb;
    }
  
    ::-webkit-scrollbar-track {
      //轨道部分
      // box-shadow: inset 0 0 5px #ddd;
      background: #ddd;
      // border-radius: 5px;
    }
  }
  </style>