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">568371</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">83</div>
                      <div class="unit">m³</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">温度</div> 
                        <div class="num">56<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">湿度</div> 
                        <div class="num">84<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">二氧化碳</div> 
                        <div class="num">33<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">PM2.5</div> 
                        <div class="num">38<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">PM10</div> 
                        <div class="num">26<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">温度</div> 
                        <div class="num">52<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">湿度</div> 
                        <div class="num">40<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">二氧化碳</div> 
                        <div class="num">23<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">PM2.5</div> 
                        <div class="num">64<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">PM10</div> 
                        <div class="num">39<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>
          </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="greenElectricity"> 
                    
              </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">838230</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">41</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>
                </div>
                <line-chart
                  :chart-data="lineData"
                   :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">657219</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">51</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>
                </div>
                <line-chart
                  :chart-data="lineData"
                   :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">382121</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">64</div>
                      <div class="unit">万吨</div>
                      </div>
                     </div>
                  </div>
                </div>
                <line-chart
                  :chart-data="lineData"
                   :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 echarts from "echarts";
  import {

    powerForYear, resourceInfo, airOverview
  } from "@/api/screen/service";
  
  export default {
    name: "EnergyRateDialog",
    components: {
      BarChart,
      PieChart,
      LineChart,
    },
    props: {
      appOrg: {
        type: String,
        default: "0000",
      },
    },
    data() {
      return {
        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",
          },
        },
        lineData: [],
      lineAxis: {},
      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: {},
        barGrid: {},
        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,
        },
        barGrid: {
          top: 30,
          left: "2%",
          right: "2%",
          containLabel: true,
          bottom: 0,
        },
  
  
        pieData: [
          {
            name: "",
            value: 56,
          },
          {
            name: "",
            value: 44,
          },
        ],
  
        resourceDataList: [],
     //用电分项
     electricityAreaBarData: [
        {
          name: "",
          type: "bar",
          itemStyle: {
            color: "#ECAA5A",
            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
          },
          barWidth: 30,
          data: [20, 30, 15,30],
        },
      ],
      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
      },
      };
    },
    created() {

        this.handleCurrentArea();
       //空气概况
       this.airOverview();

      //资源信息
      this.resourceInfo();
    },
    destroyed() {},
    beforeDestroy() {},
    mounted() {
  
    },
    methods: {
            //切换菜单
      chooseBox(index) {
      this.curBodex = index;
      this.showBox = this.Boxtabs[index].tab;
    },
        handleCurrentArea() {
      (this.lineData = [
        {
          name: "2024年",
          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: "rgba(23, 240, 240, 0)",
              },
            ]),
          },
          lineStyle: {
            width: 3, // 设置线宽
            color: "#0AC1BD", // 设置线的颜色
          },

          smooth: true,
          data: [11, 12, 8, 7,9,11,13,13,6,8,14,13],
        },{
          name: "2023年",
          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: "rgba(23, 240, 240, 0)",
              },
            ]),
          },
          lineStyle: {
            width: 3, // 设置线宽
            color: "#D67C15", // 设置线的颜色
          },

          smooth: true,
 
          data: [19, 17, 20, 21,22,18,15,17,16,18,17,16],
        },
      ]),
        (this.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,
        });
    },
    
           //资源信息
           airOverview() {
            airOverview(this.$props.appOrg).then((res) => {
           if (Number(res.code) === 200) {
               console.log(res.code,'999222');
          }
        });
      },

      //资源信息
      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; 
  }
  //绿电比例
  .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;
        }
  }
    .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>