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

<template>
  <div class="main-data data-camera-operation">
<!--    <div class="title-area">摄像头接入情况</div>-->
    <div class="content-area">
      <div class="content-title">
        <span class="title">近一月楼宇能耗信息</span>
      </div>
      <div class="content">
                <div class="total-cot">
                    <div class="other-cont">
                    <img
                     src="@/assets/images/building_guarantee/img_1.png"
                     class="icon"
                   />
                      <div class="other-info">
                      <div class="desc">用水量</div>
                      <div class="num-info">
                      <div class="num">{{energyList[0].value}}</div>
                      <div class="unit">m³</div>
                      </div>
                     </div>
                  </div>

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

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

                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>

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

    </div>
  </div>
</template>

<script>
import LineChart from "@/components/Echarts/LineChart.vue";
import PieChart from "@/components/Echarts/PieChart.vue";
import BarChart from "@/components/Echarts/BarChart.vue";
import {
    powerAndWaterMonth,airOverview
  } from "@/api/screen/service";

export default {
  name: "CameraData",
  components: { BarChart, PieChart, LineChart },
  props:{
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newVal, oldVal){
      this.handleData();
    }
  },
  data() {
    return {
      energyList:{},
      airOverviewList:{},
      curBodex:0,
        showBox: "indoor",
        Boxtabs: [
        {
          name: "室内",
          tab: "indoor",
        },
        {
          name: "室外",
          tab: "outdoor",
        },
      ],
      cameraDataList: [
        {
          name: "设备总数量",
          num: 56,
        },
        {
          name: "故障设备数量",
          num: 56,
        },
        {
          name: "停运设备数量",
          num: 56,
        },
        {
          name: "在线设备数量",
          num: 56,
        },
      ],
      cameraOtherList: [
        {
          name: "巡检异常数量",
          num: 56,
          unit: "",
        },
        {
          name: "巡检计划数量",
          num: 56,
          unit: "",
        },
        {
          name: "巡检执行数量",
          num: 56,
          unit: "",
        },
      ],
    };
  },
  created() {
     // 近一月楼宇能耗信息
     this.powerAndWaterMonth();
     //空气概况
     this.airOverview();
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
     //近一月楼宇能耗信息
     powerAndWaterMonth() {
        powerAndWaterMonth(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.energyList=res.data;
        }
      });
    },
      //空气概况
      airOverview() {
      airOverview(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.airOverviewList=res.data;
        }
      });
    },
     //切换菜单
     chooseBox(index) {
      this.curBodex = index;
      this.showBox = this.Boxtabs[index].tab;
    },
    //初始化
    handleData() {
      this.cameraDataList = [];
      this.cameraOtherList = [];
      setTimeout(()=>{
        this.cameraDataList = [
          {
            name: "设备总数量",
            num: 56,
          },
          {
            name: "故障设备数量",
            num: 56,
          },
          {
            name: "停运设备数量",
            num: 56,
          },
          {
            name: "在线设备数量",
            num: 56,
          },
        ];

        this.cameraOtherList = [
          {
            name: "巡检异常数量",
            num: 56,
            unit: "",
          },
          {
            name: "巡检计划数量",
            num: 56,
            unit: "",
          },
          {
            name: "巡检执行数量",
            num: 56,
            unit: "",
          },
        ];
      },100)
    },
  },
};
</script>

<style lang="scss">
.data-camera-operation {
  .content-area {
    display: flex;
    flex-direction: column;
    padding: 15px 20px 0 15px;
  }

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

  .content-title1 {
    margin-top: 15px;
    width: 100%;
    height: 26px;
    background: url("../../../assets/images/main/title_pro_long.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;
    }
  }

  .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;
        }
  }
      //左边菜单
      .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;
            }
        }
    }
  .content {
    margin-top: 20px;

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

  }
  ::-webkit-scrollbar {
    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;
  }

  .unit-label {
    color: rgba(255, 255, 255, 0) !important;
  }
}
</style>