large-vue/src/views/screen/building/energyRateDialog.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" v-if="flag >= 8">
      <div class="dialog-left">
        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">楼宇本周用电量</span>
            </div>
            <div class="leftNavList">           
              <div class="left-list" >
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>楼外设备用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'楼外设备')">{{ thisWeekElectricityList.total[1].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>充电桩用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'充电桩')">{{ thisWeekElectricityList.total[2].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list" >
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>地下室用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'地下室')">{{ thisWeekElectricityList.total[3].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>制冷机组用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'制冷机组')">{{ thisWeekElectricityList.total[4].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
            </div>

            <div class="leftNavList">
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>消防用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'消防')">{{ thisWeekElectricityList.total[5].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>电梯用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'电梯')">{{ thisWeekElectricityList.total[6].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>办公用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'办公')">{{ thisWeekElectricityList.total[7].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>公共照明用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'公共照明')">{{ thisWeekElectricityList.total[8].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
            </div>

            <div class="leftNavList">
              <div class="left-list" >
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>供热设备用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'供热设备')">{{ thisWeekElectricityList.total[9].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>厨房用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'厨房')">{{ thisWeekElectricityList.total[10].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div @mouseenter="macShow = true">机房总用电量</div>
                    <div class="arrow" @mouseenter="macShow = true"></div>
                    <!-- 机房总用电量 -->
                    <transition name="fade-grow">
                      <div class="machine" v-if="macShow" @mouseleave="macShow = false">
                        <div class="macBox">
                          <div class="content-title">
                            <span class="title">机房总用电量</span>
                          </div>
                          <div class="leftNavList">
                            <div class="left-list">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>信息UPS用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'信息UPS')">{{
                                  thisWeekElectricityList.room[0].num }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                            <div class="left-list" style="margin-right: 34px;">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>信息空调用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'信息空调')">{{ thisWeekElectricityList.room[4].num
                                  }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                          </div>
                          <div class="leftNavList">
                            <div class="left-list">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>调度UPS用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'调度UPS')">{{
                                  thisWeekElectricityList.room[1].num }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                            <div class="left-list" style="margin-right: 32px;">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>调度空调用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'调度空调')">{{ thisWeekElectricityList.room[5].num
                                  }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                          </div>
                          <div class="leftNavList">
                            <div class="left-list">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>通信UPS用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'通信UPS')">{{
                                  thisWeekElectricityList.room[2].num }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                            <div class="left-list" style="margin-right: 30px;">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>通信空调用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'通信空调')">{{ thisWeekElectricityList.room[6].num
                                  }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                          </div>
                          <div class="leftNavList">
                            <div class="left-list">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>交易机房用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'交易机房')">{{ thisWeekElectricityList.room[3].num
                                  }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                            <div class="left-list">
                              <div class="left-info">
                                <div class="name">
                                  <div> <img src="@/assets/images/service_new/quantity.png"></div>
                                  <div>管控机房空调用电量</div>
                                </div>
                                <div class="num" @click="abnormalClick(1,'管控机房空调')">{{
                                  thisWeekElectricityList.room[7].num }}<span class="unit">kWh</span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </transition>

                  </div>
                  <div class="num" @mouseenter="macShow = true">{{ thisWeekElectricityList.total[11].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>生活水泵用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'生活水泵')">{{ thisWeekElectricityList.total[12].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
            </div>

            <div class="leftNavList">
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>冷源泵用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'冷源泵')">{{ thisWeekElectricityList.total[13].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>热源泵用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'热源泵')">{{ thisWeekElectricityList.total[14].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>通信辅助设备用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'通信辅助设备')">{{ thisWeekElectricityList.total[15].num }}<span
                      class="unit">kWh</span></div>
                </div>
              </div>
              <div class="left-list" style="visibility: hidden;">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/service_new/quantity.png"></div>
                    <div>消防用电量</div>
                  </div>
                  <div class="num" @click="abnormalClick(1,'消防')">{{ thisWeekElectricityList.total[5].num }}<span
                      class="unit">kWh</span></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">
              <div style="display: flex;">
                <div style="width: 50%;">
                  <div class="cFox">
                    <div>
                      <div class="num" style="justify-content: center;">112<span class="unit">kWh</span></div>
                      <div><img src="@/assets/images/service_new/cicleFox.png"></div>
                      <div style="color: #fff;display: flex;justify-content: center;margin-top: 5px;">光伏发电量</div>
                    </div>
                    <div class="left-inf">
                      <div class="name">
                        <div> <img src="@/assets/images/service_new/quantity.png"></div>
                        <div style="padding-left: 5px;">薄膜发电量</div>
                      </div>
                      <div class="num">29<span class="unit">kWh</span></div>
                      <div class="name">
                        <div> <img src="@/assets/images/service_new/quantity.png"></div>
                        <div style="padding-left: 5px;">光伏板发电量</div>
                      </div>
                      <div class="num">29<span class="unit">kWh</span></div>
                    </div>

                  </div>
                  <div></div>
                </div>
                <div style="width: 50%;">
                  <div class="cFox">
                    <div>
                      <div class="num" style="justify-content: center;">{{ fllEleList.weekTotal }}<span class="unit">kWh</span></div>
                      <div><img src="@/assets/images/service_new/cicleFox.png"></div>
                      <div style="color: #fff;display: flex;justify-content: center;margin-top: 5px;">电梯能量回收</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="content">
              <line-chart :chart-data="buildLineData" :x-axis="buildLineAxis" :yAxis="buildLineYAxis"
                :legend="lineLegend" y-color="#FFF" l-color="#FFF" width="565px" height="240px" />
            </div>
          </div>
        </div>

        <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="yearLineData" :x-axis="yearLineAxis" :yAxis="yearLineYAxis" :legend="lineLegend"
                y-color="#FFF" l-color="#FFF" width="565px" height="240px" />
            </div>
          </div>
        </div>

        <div class="dialog-list">
              <div class="dialog-item wid100">
                <div class="content-title">
                  <span class="title">配电室重要回路负荷情况</span>
                </div>
                <div class="content" @click="abnormalClick(2)">
                  <bar-chart :chart-data="barData" :x-axis="barAxis" :y-axis="barYAxis" :grid="barGrid"
                    :legend="barLegend" y-color="#FFF" l-color="#FFF" width="560px" height="180px" />
                </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="total-cont">
              <span class="title">水浸总数</span>
            </div>
            <div class="rightList2">
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/building_guarantee/waterImmersion.png"></div>
                    <div class="num">{{ warnDeviceList.sj.total}}<span class="unit">个</span></div>
                  </div>

                </div>
              </div>

              <div class="right-Top">
                <div>
                  <div class="water-list">
                    <div class="left-info">
                      <div class="name">
                        <img src="@/assets/images/building_guarantee/immersion.png">
                        <div>空调水浸</div>
                      </div>
                      <div class="num">{{ warnDeviceList.sj.air}}<span class="unit">个</span></div>
                    </div>
                  </div>
                  <div class="water-list">
                    <div class="left-info">
                      <div class="name">
                        <img src="@/assets/images/building_guarantee/immersion.png">
                        <div>中控水浸</div>
                      </div>
                      <div class="num">{{ warnDeviceList.sj.control}}<span class="unit">个</span></div>
                    </div>
                  </div>
                </div>


                <div>
                  <div class="left-list1">
                    <div class="left-info">
                      <div class="name">
                        <div class="nor">{{ warnDeviceList.sj.zcdw}}</div>
                      </div>

                    </div>
                  </div>
                  <div class="left-list2" @click="abnormalClick(0,'水浸')">
                    <div class="left-info">
                      <div class="name">
                        <div class="dor">{{ warnDeviceList.sj.ycdw}}</div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <!-- 烟雾总数 -->
            <div class="total-cont">
              <span class="title">烟雾总数</span>
            </div>
            <div class="rightList2">
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/building_guarantee/smoke.png"></div>
                    <div class="num">{{ warnDeviceList.ywj.total}}<span class="unit">个</span></div>
                  </div>

                </div>
              </div>

              <div class="right-Top">
                <div class="left-list1">
                  <div class="left-info">
                    <div class="name">
                      <!-- <div> <img src="@/assets/images/building_guarantee/waterImmersion.png"></div>    -->
                      <div class="nor">{{ warnDeviceList.ywj.zcdw}}</div>
                    </div>

                  </div>
                </div>
                <div class="left-list2" @click="abnormalClick(0,'烟雾')">
                  <div class="left-info">
                    <div class="name">
                      <!-- <div> <img src="@/assets/images/building_guarantee/waterImmersion.png"></div>    -->
                      <div class="dor">{{ warnDeviceList.ywj.ycdw}}</div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!-- 电表总数 -->
            <div class="total-cont">
              <span class="title">电表总数</span>
            </div>
            <div class="rightList2">
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/building_guarantee/electricitymeter.png"></div>
                    <div class="num">{{ warnDeviceList.db.total}}<span class="unit">个</span></div>
                  </div>

                </div>
              </div>

              <div class="right-Top">
                <div class="left-list1">
                  <div class="left-info">
                    <div class="name">
                      <!-- <div> <img src="@/assets/images/building_guarantee/waterImmersion.png"></div>    -->
                      <div class="nor">{{ warnDeviceList.db.zcdw}}</div>
                    </div>

                  </div>
                </div>
                <div class="left-list2" @click="abnormalClick(0,'电表')">
                  <div class="left-info">
                    <div class="name">
                      <!-- <div> <img src="@/assets/images/building_guarantee/waterImmersion.png"></div>    -->
                      <div class="dor">{{ warnDeviceList.db.ycdw}}</div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!-- 液位总数 -->
            <div class="total-cont">
              <span class="title">液位总数</span>
            </div>
            <div class="rightList2">
              <div class="left-list">
                <div class="left-info">
                  <div class="name">
                    <div> <img src="@/assets/images/building_guarantee/liquidLevel.png"></div>
                    <div class="num">{{ warnDeviceList.yw.total}}<span class="unit">个</span></div>
                  </div>

                </div>
              </div>

              <div class="right-Top">
                <div class="left-list1">
                  <div class="left-info">
                    <div class="name">
                      <!-- <div> <img src="@/assets/images/building_guarantee/waterImmersion.png"></div>    -->
                      <div class="nor">{{ warnDeviceList.yw.zcdw}}</div>
                    </div>

                  </div>
                </div>
                <div class="left-list2" @click="abnormalClick(0,'液位')">
                  <div class="left-info">
                    <div class="name">
                      <!-- <div> <img src="@/assets/images/building_guarantee/waterImmersion.png"></div>    -->
                      <div class="dor">{{ warnDeviceList.yw.ycdw}}</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">
                  <line-chart :chart-data="giveLineData" :x-axis="giveLineAxis" :yAxis="giveLineYAxis"
                    :legend="lineLegend" y-color="#FFF" l-color="#FFF" width="565px" height="240px" />
                </div>
              </div>
            </div>

            <div class="dialog-list">
              <div class="dialog-item wid100">
                <div class="content-title">
                  <span class="title">水箱的水位情况</span>
                </div>
                <div class="tank">
                  <div class="ocBox">
                    <div class="water-cont">
                      <span class="title">23层生活水箱、消防水箱</span>
                    </div>
                    <!-- 水箱 -->
                    <!-- <div class="leftTank"></div> -->
                    <div class="content">
                      <cylinder-Chart :chart-data="waterData" :x-axis="waterAxis" :yAxis="waterYAxis" y-color="#FFF"
                        l-color="#FFF" width="100%" height="200px" />
                    </div>
                  </div>
                  <div class="ocBox">
                    <div class="water-cont">
                      <span class="title">负二层生活水箱</span>
                    </div>
                    <!-- 水箱 -->
                    <!-- <div class="rightTank"></div> -->
                    <div class="content">
                      <cylinder-Chart :chart-data="fireData" :x-axis="fireAxis" :yAxis="fireYAxis" y-color="#FFF"
                        l-color="#FFF" width="100%" height="200px" />
                    </div>
                  </div>
                </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 CylinderChart from "@/components/Echarts/cylinderChart.vue";
import echarts from "echarts";
import {

  thisWeekElectricity,controlElevator,todayElectricity,monthElectricity,roomLoad,warnDevice,warnEvent,waterState
} from "@/api/screen/service";

export default {
  name: "EnergyRateDialog",
  components: {
    BarChart,
    PieChart,
    LineChart,
    CylinderChart
  },
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  data() {
    return {
      flag: 0,
      thisWeekElectricityList:{},
      fllEleList:{},
      warnDeviceList:{},
      barWidth: 100,
      macShow: false,
      lineLegend: {
        top: 0,
        orient: "horizontal",
        right: 0,
        itemWidth: 17, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      //水箱
      waterTankFirst:{},
      waterTankSecond:{},
      // 二十三层生活水箱丶消防水箱
      waterData: [],
      waterAxis: {},
      waterYAxis: {},
      // 负二层生活水箱丶消防水箱
        // 二十三层生活水箱丶消防水箱
      fireData: [],
      fireAxis: {},
      fireYAxis: {},
      //楼宇每月用电量
      yearLineData: [],
      //楼宇今日总用电量
      buildLineData: [],
      //告警事件的历史统计
      giveLineData: [],
      //配电室重要回路负荷情况
      barData: [],
      barAxis: {},
      barYAxis: {},
      barGrid: {},
      barLegend: {},
      yearAllWaterChangeData: {
        value: 0
      },

      useElectricityBarData: [],
      useElectricityBarAxis: {},
      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,
        },
      ],


      emissionTableDataList: [
        {
          company: "单位名称",
          num: "56吨",
        },
        {
          company: "单位名称",
          num: "56吨",
        },
        {
          company: "单位名称",
          num: "56吨",
        },
      ],
      resourceDataList: [],
      // useHeatGasData: {
      //   water: {},
      //   hot: {},
      //   gas: {},
      // },
    };
  },
  created() {
    //楼宇本周用电量
    this.thisWeekElectricity()
     //电梯能量回收
     this.controlElevator()
    //楼宇每月用电量
    this.monthElectricity()
    //楼宇今日总用电量
    this.todayElectricity()
    //配电室重要抽屉负荷情况
    this.roomLoad();
    //楼宇中当前告警的设备
    this.warnDevice()
    //告警事件的历史统计
    this.warnEvent()
    this.waterState()
    // 二十三层生活水箱丶消防水箱
    // this.handleWaterData()
     //负二层生活水箱
     //this.handleFireData()
  
   
  },
  destroyed() { },
  beforeDestroy() { },
  mounted() {

  },
  methods: {
      //资产存量
      thisWeekElectricity() {
        thisWeekElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.thisWeekElectricityList=res.data;
          this.flag++
        }
      });
    },
       //电梯能量回收
       controlElevator() {
          controlElevator(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.fllEleList=res.data;
          this.flag++
        }
      });
    },
   
      //水箱
    // 二十三层生活水箱丶消防水箱
    waterState() {
        waterState(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.waterTankFirst=res.data.twentyThree;
          // 处理 shsx 数组
          this.waterTankFirst.shsx.forEach(item => {
            for (let key in item) {
              if (item.hasOwnProperty(key) && typeof item[key] === "string") {
                item[key] = item[key].replace(/m$/, ""); 
              }
            }
          });

          // 处理 xfsx 数组
          this.waterTankFirst.xfsx.forEach(item => {
            for (let key in item) {
              if (item.hasOwnProperty(key) && typeof item[key] === "string") {
                item[key] = item[key].replace(/m$/, ""); 
              }
            }
          });
         
           this.waterTankSecond=res.data.minusTwo;
            // 处理 gqsx 数组
          this.waterTankSecond.gqsx.forEach(item => {
            for (let key in item) {
              if (item.hasOwnProperty(key) && typeof item[key] === "string") {
                item[key] = item[key].replace(/m$/, ""); 
              }
            }
          });

          // 处理 dqsx 数组
          this.waterTankSecond.dqsx.forEach(item => {
            for (let key in item) {
              if (item.hasOwnProperty(key) && typeof item[key] === "string") {
                item[key] = item[key].replace(/m$/, ""); 
              }
            }
          });
        
          console.log('======================',this.waterTankSecond.dqsx);
          
      this.waterData = [
        
        //三个最底下的圆片
        {
          name: '',
          zlevel: 1,
          type: 'pictorialBar',
          symbolSize: [60, 25], //圆环宽度
          symbolOffset: [0, 10],
          z: 12,
          itemStyle: {
            opacity: 1,
            color: function (params) {
              var a = params.name.slice(0, 2);
              if (a === '生活') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1893BF' // 100% 处的颜色
                    }
                  ],
                  false
                );
              } else if (a === '消防') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#CCC147' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#CCC147' // 100% 处的颜色
                    }
                  ],
                  false
                );
              }
            }
          },
          tooltip: {
            show: false
          },
          data: [1, 1, 1, 1, 1]
        },

        //下半截柱状图(中间部分)
        {
          name: '',
          type: 'bar',
          barWidth: 60,
          zlevel: 1,
          barGap: '-100%',

          itemStyle: {
            //lenged文本
            opacity: 1,
            color: function (params) {
              var a = params.name.slice(0, 2);

              if (a === '生活') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1893BF' // 100% 处的颜色
                    }
                  ],
                  false
                );
              } else if (a === '消防') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#CCC147' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#CCC147' // 100% 处的颜色
                    }
                  ],
                  false
                );
              }
            }
          },
           data: [this.waterTankFirst.shsx[0].dqsw, this.waterTankFirst.xfsx[0].dqsw]
        },
        //中间最高刻度的圆形
        {
          name: '', //头部
          type: 'pictorialBar',
          zlevel: 1,
          symbolSize: [60, 25], //顶部刻度的圆形
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: 'end',

          itemStyle: {
            color: '#D0612C',
            opacity: 0.5,
            borderColor: '#DF3914', // 边框颜色
            borderWidth: 3,
            borderType: 'dashed',
            borderDashOffset: 1
          },
          tooltip: {
            show: true,
            formatter: function (params) {
              if (params.seriesName === '') { // 确保只对当前系列生效
                const value = params.value; // 获取当前数据值
                return `最高水位：${value} m`; // 自定义提示框内容
              }
              return '';
            },
          },
          data: [this.waterTankFirst.shsx[2].zgsw, this.waterTankFirst.xfsx[2].zgsw]
        },
        
           //中间最低刻度的圆形
           {
          name: '', //头部
          type: 'pictorialBar',
          zlevel: 1,
          symbolSize: [60, 25], //顶部刻度的圆形
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: 'end',

          itemStyle: {
            color: '#D0612C',
            opacity: 0.5,
            borderColor: '#DF3914', // 边框颜色
            borderWidth: 3,
            borderType: 'dashed',
            borderDashOffset: 1
          },
          tooltip: {
            show: true,
            formatter: function (params) {
              if (params.seriesName === '') { // 确保只对当前系列生效
                const value = params.value; // 获取当前数据值
                return `最低水位：${value} m`; // 自定义提示框内容
              }
              return '';
            },
          },
          data: [this.waterTankFirst.shsx[1].zdsw, this.waterTankFirst.xfsx[1].zdsw]
        },
       

        //底部外面刻度的圆形
        {
          name: '', //头部
          type: 'pictorialBar',
          symbolSize: [78, 45], //顶部刻度的圆形
          symbolOffset: [0, -25],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            color: '#0E3A60',
            opacity: 0.6,
            borderColor: '#2E87DE', // 边框颜色
            borderWidth: 3,
            borderType: 'solid',

          },
          tooltip: {
            show: false
          },
          data: [0.1, 0.1,]
        },
        //顶部刻度的圆形
        {
          name: '', //头部
          zlevel: 1,
          type: 'pictorialBar',
          symbolSize: [60, 25], //顶部刻度的圆形
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            color: '#0E3A60',
            opacity: 0.6,
            borderColor: '#2E87DE', // 边框颜色
            borderWidth: 3,
            borderType: 'dashed',
            borderDashOffset: 1
          },
          tooltip: {
            show: false
          },
          data: [4, 4,]
        },

        //刻度值处的圆形图标
        {
          name: '',
          zlevel: 1,
          type: 'pictorialBar',
          symbolSize: [60, 25],
          symbolOffset: [0, -10],
          z: 12,
          itemStyle: {
            opacity: 1,
            color: function (params) {
              var a = params.name.slice(0, 2);
              if (a === '生活') {

                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#26B3EA' // 100% 处的颜色

                    }
                  ],
                  false
                );
              } else if (a === '消防') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#E1D929' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F8EE20' // 100% 处的颜色
                    }
                  ],
                  false
                );
              }
            }
          },
          //显示当前数值
          label: {
            normal: {
              show: true,
              position: 'insideTop',
              "formatter": "{c}M",
              fontSize: 15,
              fontWeight: 'bold',
              color: '#ffffff'
            }
          },
          symbolPosition: 'end',
           data: [this.waterTankFirst.shsx[0].dqsw, this.waterTankFirst.xfsx[0].dqsw]
        },

        //最外层柱状体宽度、颜色设置
        {
          name: '',
          type: 'bar',
          barWidth: 60,
          barGap: '-100%',
          z: 0,
          itemStyle: {
            // color: '#0A2932',
            // 使用 linear-gradient 设置渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#0F3644' // 渐变色的开始颜色
                }, {
                    offset: 1,
                    color: '#194972' // 渐变色的结束颜色
                }]),
            opacity: 0.5
          },
          data: [4, 4]
        }

      ];
      this.waterAxis = {
        data: ['生活水箱', '消防水箱'],
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#fff',
            fontSize: 16
          },
          margin: 30 //刻度标签与轴线之间的距离。
        }
      };
      this.waterYAxis = {

        name: "",
        min: 0,
        max: 4,
        type: 'value',

        interval: 4,// 指定刻度间隔
        nameTextStyle: {
          color: "#fff",
        },
        splitArea: {
          show: false // 这里设置为false即可去掉Y轴的背景色
        },
        // 坐标轴在grid区域中的分隔线
        splitLine: {
          show: false,

        },
        axisTick: {
          inside: true,
          show: true, // 显示刻度线
          lineStyle: {
            color: "#fff",
            opacity: 0.5,
          },

        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            opacity: 0.5,
          },
        },
        axisLabel: {
          inside: true,
          formatter:'{value}M',

          textStyle: {
            color: '#68CDE9',
            fontSize: 12,
          },
        },

      }

       // 负二层生活水箱
       this.fireData = [
        //三个最底下的圆片
        {
          name: '',
          zlevel: 1,
          type: 'pictorialBar',
          symbolSize: [60, 25], //圆环宽度
          symbolOffset: [0, 10],
          z: 12,
          itemStyle: {
            opacity: 1,
            color: function (params) {
              var a = params.name.slice(0, 5);
              if (a === '高区水箱') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1893BF' // 100% 处的颜色
                    }
                  ],
                  false
                );
              } else if (a === '低区水箱') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1893BF' // 100% 处的颜色
                    }
                  ],
                  false
                );
              }
            }
          },
          tooltip: {
            show: false
          },
          data: [1, 1, 1, 1, 1]
        },

        //下半截柱状图(中间部分)
        {
          name: '',
          type: 'bar',
          barWidth: 60,
          zlevel: 1,
          barGap: '-100%',
          itemStyle: {
            //lenged文本
            opacity: 1,
            color: function (params) {
              var a = params.name.slice(0, 5);

              if (a === '高区水箱') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1893BF' // 100% 处的颜色
                    }
                  ],
                  false
                );
              } else if (a === '低区水箱') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1893BF' // 100% 处的颜色
                    }
                  ],
                  false
                );
              }
            }
          },
          data: [ this.waterTankSecond.gqsx[0].dqsw, this.waterTankSecond.dqsx[0].dqsw,]
        },
        //中间最高刻度的圆形
        {
          name: '', //头部
          type: 'pictorialBar',
          zlevel: 1,
          symbolSize: [60, 25], //顶部刻度的圆形
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: 'end',

          itemStyle: {
            color: '#D0612C',
            opacity: 0.5,
            borderColor: '#DF3914', // 边框颜色
            borderWidth: 3,
            borderType: 'dashed',
            borderDashOffset: 1
          },
          tooltip: {
            show: true,
            formatter: function (params) {
              if (params.seriesName === '') { // 确保只对当前系列生效
                const value = params.value; // 获取当前数据值
                return `最高水位：${value} m`; // 自定义提示框内容
              }
              return '';
            },
          },
          data: [this.waterTankSecond.gqsx[2].zgsw, this.waterTankSecond.dqsx[2].zgsw]
        },
    
           //中间最低刻度的圆形
           {
          name: '', //头部
          type: 'pictorialBar',
          zlevel: 1,
          symbolSize: [60, 25], //顶部刻度的圆形
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: 'end',

          itemStyle: {
            color: '#D0612C',
            opacity: 0.5,
            borderColor: '#DF3914', // 边框颜色
            borderWidth: 3,
            borderType: 'dashed',
            borderDashOffset: 1
          },
          tooltip: {
            show: true,
            formatter: function (params) {
              if (params.seriesName === '') { // 确保只对当前系列生效
                const value = params.value; // 获取当前数据值
                return `最低水位：${value} m`; // 自定义提示框内容
              }
              return '';
            },
          },
          data: [this.waterTankSecond.gqsx[1].zdsw, this.waterTankSecond.dqsx[1].zdsw]
        },
        

        //底部外面刻度的圆形
        {
          name: '', //头部
          type: 'pictorialBar',
          symbolSize: [78, 45], //顶部刻度的圆形
          symbolOffset: [0, -25],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            color: '#0E3A60',
            opacity: 0.6,
            borderColor: '#2E87DE', // 边框颜色
            borderWidth: 3,
            borderType: 'solid',
            borderDashOffset: 1
          },
          tooltip: {
            show: false
          },
          data: [0.1, 0.1,]
        },
        //顶部刻度的圆形
        {
          name: '', //头部
          zlevel: 2,
          type: 'pictorialBar',
          symbolSize: [60, 25], //顶部刻度的圆形
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            color: '#0E3A60',
            opacity: 0.6,
            borderColor: '#2E87DE', // 边框颜色
            borderWidth: 3,
            borderType: 'dashed',
            borderDashOffset: 1
          },
          tooltip: {
            show: false
          },
          data: [4, 4]
        },

        //刻度值处的圆形图标
        {
          name: '',
          zlevel: 1,
          type: 'pictorialBar',
          symbolSize: [60, 25],
          symbolOffset: [0, -10],
          z: 12,
          itemStyle: {
            opacity: 1,
            color: function (params) {
              var a = params.name.slice(0, 5);
              if (a === '高区水箱') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#26B3EA' // 100% 处的颜色
                    }
                  ],
                  false
                );
              } else if (a === '低区水箱') {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1893BF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#26B3EA' // 100% 处的颜色
                    }
                  ],
                  false
                );
              }
            }
          },
          //显示当前数值
          label: {
            normal: {
              show: true,
              position: 'insideTop',
              "formatter": "{c}M",
              fontSize: 15,
              fontWeight: 'bold',
              color: '#ffffff'
            }
          },
          symbolPosition: 'end',
          data: [ this.waterTankSecond.gqsx[0].dqsw, this.waterTankSecond.dqsx[0].dqsw,]
        },

        //最外层柱状体宽度、颜色设置
        {
          name: '',
          type: 'bar',
          barWidth: 60,
          barGap: '-100%',
          z: 0,
          itemStyle: {
            // color: '#0A2932',
            // 使用 linear-gradient 设置渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#0F3644' // 渐变色的开始颜色
                }, {
                    offset: 1,
                    color: '#194972' // 渐变色的结束颜色
                }]),
            opacity: 0.5
          },
          data: [4, 4]
        }
      ];
      this.fireAxis = {
        data: ['高区水箱', '低区水箱'],
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#fff',
            fontSize: 16
          },
          margin: 30 //刻度标签与轴线之间的距离。
        }
      };
      this.fireYAxis = {

        name: "",
        min: 0,
        max: 4,
        type: 'value',

        interval: 4,// 指定刻度间隔
        nameTextStyle: {
          color: "#fff",
        },
        splitArea: {
          show: false // 这里设置为false即可去掉Y轴的背景色
        },
        // 坐标轴在grid区域中的分隔线
        splitLine: {
          show: false,

        },
        axisTick: {
          inside: true,
          show: true, // 显示刻度线
          lineStyle: {
            color: "#fff",
            opacity: 0.5,
          },

        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            opacity: 0.5,
          },
        },
        axisLabel: {
          inside: true,
          formatter:'{value}M',
          textStyle: {
            color: '#68CDE9',
            fontSize: 12,
          },
        },

      }
      this.flag++
    }
  });
    },
   
   
    //楼宇每月用电量
    monthElectricity() {
      monthElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
        const buildLineDataFirstList= res.data.first.map(item => item.Kwh);
        const buildLineDataSecondList= res.data.second.map(item => item.Kwh);
        const buildLineDataThirdList= res.data.third.map(item => item.Kwh);
      this.yearLineData = [
        {
          name: "配电室一",
          type: "line",
          lineStyle: {
            width: 3, // 设置线宽
            color: "#00EBFC", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '#00EBFC', // 节点颜色
              borderColor: '#00EBFC', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: buildLineDataFirstList,
        },
        {
          name: "配电室二",
          type: "line",

          lineStyle: {
            width: 3, // 设置线宽
            color: "#00D390", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '"#00D390', // 节点颜色
              borderColor: '#00D390', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: buildLineDataSecondList,

        },
        {
          name: "配电室三",
          type: "line",
          lineStyle: {
            width: 3, // 设置线宽
            color: "#FFED00", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '"#FFED00', // 节点颜色
              borderColor: '#FFED00', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: buildLineDataThirdList,
        },

      ];
      this.yearLineAxis = {
        type: "category",
        data: [
          "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",
        ],
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#FFF",
          },
        },
        splitArea: false,
        boundaryGap: false,
      };
      this.yearLineYAxis = {
        name: 'Kwh',
        nameTextStyle: {
          color: '#fff',
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },

        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1D2F38', // 背景线颜色
            width: 1// 背景线宽度
          }
        },
        axisTick: {
          show: false,
        },
        splitArea: false
      }
      this.flag++
    }
  });
},

    //实例化柱状图
    roomLoad() {
      roomLoad(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
      this.barData = [
        {
          name: "配电室一",
          type: "bar",
          itemStyle: {
            color: "#00EBFC",
          },
          barWidth: 15,
          data: res.data.first,
        },
        {
          name: "配电室二",
          type: "bar",
          itemStyle: {
            color: "#FFB400",
          },
          barWidth: 15,
          data: res.data.second,
        },
        {
          name: "配电室三",
          type: "bar",
          itemStyle: {
            color: "#00D390",
          },
          barWidth: 15,
          data: res.data.third,
        },
      ];

      this.barGrid = {
        top: 30,
        bottom: 0,
        left: "2%",
        right: "2%",
        containLabel: true,
      };

      this.barLegend = {
        right: 0,
        top: 0,
        itemWidth: 17, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      };

      this.barAxis = {
        type: "category",
        data: [
          "重载",
          "轻载",
          "过载",
          "空载",
          "正常",
        ],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        axisLine: {
          lineStyle: {
            color: "#08595B"
          }
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      };

      this.barYAxis = {
        name: "数量(个)",
        nameTextStyle: {
          color: "#fff",
          padding: [0, 0, 0, 5],
          fontSize: 14,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#FFF",
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1D2F38', // 背景线颜色
            width: 1// 背景线宽度
          }
        },
        splitArea: false,
      };
      this.flag++
    }
  });
},

    //楼宇今日总用电量
    todayElectricity() {
      todayElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
        const buildLineDataList = res.data.map(item => item.Kwh);
        const buildLineDataTime = res.data.map(item => item.time);
      this.buildLineData = [
        {
          name: "当前楼宇",
          type: "line",
          // areaStyle: {
          //   opacity: 0.8,
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     {
          //       offset: 0.03,
          //       color: "rgba(30, 240, 215, 0.4196)",
          //     },
          //     {
          //       offset: 0.68,
          //       color: "rgba(23, 240, 240, 0)",
          //     },
          //   ]),
          // },
          lineStyle: {
            width: 3, // 设置线宽
            color: "#00EBFC", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '#00EBFC', // 节点颜色
              borderColor: '#00EBFC', // 节点边框颜色
              borderWidth: 4 ,// 节点边框宽度
            }
          },
          data: buildLineDataList,
        },



      ];
      this.buildLineAxis = {
        type: "category",
        data:buildLineDataTime,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#FFF",
          },
        },
        splitArea: false,
        boundaryGap: false,
      };
      this.buildLineYAxis = {
        name: 'Kwh',
        nameTextStyle: {
          color: '#fff',
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },

        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1D2F38', // 背景线颜色
            width: 1// 背景线宽度
          }
        },
        axisTick: {
          show: false,
        },
        splitArea: false
      }
      this.flag++
    }
    });
    },
   
    //点击楼宇中当前告警设备列表
    abnormalClick(e,f) {
      this.$emit("abnormalClick", e,f);
    },


    //告警事件的历史统计
    warnEvent() {
      warnEvent(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          const warnEventDbDataList = res.data.map(item => item.db);
          const warnEventSjDataList = res.data.map(item => item.sj);
          const warnEventYwDataList = res.data.map(item => item.yw);
          const warnEventYwjDataList = res.data.map(item => item.ywj);
          const warnEventMonthDataList = res.data.map(item =>`${item.month}月`);

      this.giveLineData = [
        {
          name: "电表",
          type: "line",

          lineStyle: {
            width: 3, // 设置线宽
            color: "#00EBFC", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '#00EBFC', // 节点颜色
              borderColor: '#00EBFC', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: warnEventDbDataList,
        },
        {
          name: "水浸",
          type: "line",

          lineStyle: {
            width: 3, // 设置线宽
            color: "#00D390", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '"#00D390', // 节点颜色
              borderColor: '#00D390', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: warnEventSjDataList,

        },
        {
          name: "烟雾",
          type: "line",

          lineStyle: {
            width: 3, // 设置线宽
            color: "#FFED00", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '"#FFED00', // 节点颜色
              borderColor: '#FFED00', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data:warnEventYwDataList,
        },
        {
          name: "液位",
          type: "line",

          lineStyle: {
            width: 3, // 设置线宽
            color: "#F3A141", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '"#F3A141', // 节点颜色
              borderColor: '#F3A141', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: warnEventYwjDataList,
        },

      ];
      this.giveLineAxis = {
        type: "category",
        data:warnEventMonthDataList,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#FFF",
          },
        },
        splitArea: false,
        boundaryGap: false,
      };
      this.giveLineYAxis = {
        name: '单位(次)',
        nameTextStyle: {
          color: '#fff',
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },

        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1D2F38', // 背景线颜色
            width: 1// 背景线宽度
          }
        },
        axisTick: {
          show: false,
        },
        splitArea: false
      }
      this.flag++
    }
  });
    },

       //楼宇中当前告警的设备
       warnDevice() {
        warnDevice(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.warnDeviceList=res.data;
          this.flag++
        }
      });
    },

    // //资源信息
    // 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)
    },
    // // 机房用电量列表显示隐藏
    // macBoxShow(){
    //   this.macShow=true
    // },
    // macBoxBlock(){
    //   this.macShow=false
    // },
    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;
      }
    }
  }

  .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;
    }
  }

  //左边菜单
  .leftNavList {
    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: 20px;
        height: 20px;
        margin-right: 2px;
      }

      .left-info {
        padding-left: 12px;

        .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;
        }

        .arrow {
          width: 0;
          height: 0;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 7px solid #00f0ff;
          margin-top: 6px;
          margin-left: 2px;
        }

        .machine {
          background: url("../../../assets/images/building_guarantee/machine.png") no-repeat;
          background-size: 100% 100%;
          width: 446px;
          height: 376px;
          position: absolute;
          margin-top: -60px;
          margin-left: 130px;

          .macBox {
            width: 325px;
            height: 330px;
            margin-top: 30px;
            margin-left: 108px;
            background: #062223;

            .content-title {
              width: 100%;
              height: 35px;
              background: url("../../../assets/images/main/title_pro_short.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;

              }
            }
          }

        }
      }
    }
  }

  //右边菜单
  .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: 40px;
          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;
      align-items: center;

      .water-list {
        width: 130px;
        height: 45px;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        margin-right: 55px;
        margin-top: 5px;
        justify-content: center;

        .left-info {
          padding-left: 12px;

          img {
            width: 25px;
          }

          .num {
            font-size: 30px;
            color: #00FFFF;
            font-family: "electronicFont";
            display: flex;
            flex-direction: row;
            align-items: baseline;

            .unit {
              font-size: 12px;
            }
          }

          .name {
            font-size: 15px;
            color: #FFFFFF;
            font-family: 'fashionZh';
            padding-top: 4px;
            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;
        }
      }
    }
  }

  .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;
        }
      }
    }
  }

  .camera-cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .camera-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;

      .num-info {
        display: flex;
        justify-content: center;
        align-items: center;

        .num {
          font-size: 30px;
          color: #00ffff;
          font-weight: bold;
          font-family: "electronicFont";
          padding-left: 4px;
        }

        .num2 {
          font-size: 30px;
          color: #00ffff;
          font-weight: bold;
          font-family: "electronicFont";
          padding-left: 4px;
          position: absolute;
          top: 20px;
        }

        .unit {
          font-size: 12px;
          color: #00ffff;
          font-weight: 500;
          position: relative;
          top: 3px;
        }
      }

      .icon {
        display: block;
        width: 46px;
        height: auto;
      }

      .icon2 {
        display: block;
        width: 101px;
        height: auto;
      }

      .title {
        font-size: 14px;
        color: #ffffff;
        margin-top: 6px;
        font-weight: normal;
        text-align: center;
      }
    }
  }

  .use-energy {
    width: 100%;
    padding: 0 15px;

    .use-energy-fir {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #ffffff;
      font-weight: 500;

      .num {
        font-weight: 900;
        color: #00ffff;
        padding: 0 8px;
        font-size: 18px;
      }
    }

    .use-energy-snd {
      width: 100%;
      margin-top: 15px;
      display: flex;
      align-items: center;

      .use-energy-snd-list {
        display: flex;
        align-items: center;

        .icon {
          display: block;
          width: 34px;
          height: 34px;
        }

        .use-energy-snd-info {
          padding-left: 4px;

          .desc {
            font-size: 12px;
            color: #ffffff;
          }

          .num-info {
            display: flex;
            align-items: center;

            .num {
              font-size: 20px;
              color: #00ffff;
              font-weight: bold;
              font-family: "electronicFont";
            }

            .unit {
              font-size: 10px;
              color: #00ffff;
              font-weight: 500;
              position: relative;
              top: 4px;
              left: 2px;
            }
          }
        }
      }

      .use-energy-snd-list:last-child {
        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;
  }

  .tank {
    display: flex;

    .ocBox {
      width: 50%;

      .water-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;
      }

      .leftTank {
        width: 100%;
        height: 180px;
        background: url("../../../assets/images/main/leftTank.png") no-repeat;
        background-size: 100% 100%;
        margin: 20px 10px 10px 10px;
      }

      .rightTank {
        width: 100%;
        height: 180px;
        background: url("../../../assets/images/main/rightTank.png") no-repeat;
        background-size: 100% 100%;
        margin: 20px 10px 10px 10px;
      }
    }

  }

  .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;
    }
  }
  .cFox{
       display: flex;
       justify-content: space-around;
    .num {
            font-size: 30px;
            color: #00FFFF;
            font-family: "electronicFont";
            display: flex;
            flex-direction: row;
            align-items: baseline;
    }
            .unit {
              font-size: 12px;
              font-family: 'element-icons';
            }
            .left-inf {
        // padding-left:12px;

        .num {
          font-size: 30px;
          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;
        }


      }
  }
  .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;
      }
    }
  }

  .table-cont .fir {
    width: 20%;
    text-align: left;
  }

  .table-cont .snd {
    width: 50%;
    text-align: center;
  }

  .table-cont .thd {
    width: 30%;
    text-align: right;
  }

  .fade-grow-enter-active,
  .fade-grow-leave-active {
    transition: all 1s ease;
  }

  .fade-grow-enter,
  .fade-grow-leave-to {
    opacity: 0;
    transform: scale(0);
  }

  .fade-grow-enter-to,
  .fade-grow-leave {
    opacity: 1;
    transform: scale(1);
  }

  ::-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>