ll

liukangdong

2024-12-17 3696ebf6880c87789305453e22c5538afd136388

 screen/src/views/EnergyConsum.vue

@@ -175,51 +175,54 @@
          </div>
          <div class="center_box_two">
            <img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
            <template v-if="data6 && data6.secondRegionDataList && data6.secondRegionDataList.length > 0">
              <div class="item item1">
                <div class="num fs_linear">{{ data6.secondRegionDataList[0].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6.secondRegionDataList[0].name }}</div>
            <template v-if="data6 && data6 && data6.length > 0">
              <div class="item item1" v-if="data6.length > 4">
                <div class="num fs_linear">{{ data6[4].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6[4].name }}</div>
                <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
              </div>
              <div class="item item2" v-if="data6.secondRegionDataList.length > 1">
                <div class="num fs_linear">{{ data6.secondRegionDataList[1].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6.secondRegionDataList[1].name }}</div>
              <div class="item item2" v-if="data6.length > 1">
                <div class="num fs_linear">{{ data6[1].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6[1].name }}</div>
                <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
              </div>
              <div class="item item3" v-if="data6.secondRegionDataList.length > 2">
                <div class="num fs_linear">{{ data6.secondRegionDataList[2].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6.secondRegionDataList[2].name }}</div>
              <div class="item item3" v-if="data6.length > 2">
                <div class="num fs_linear">{{ data6[2].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6[2].name }}</div>
                <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
              </div>
              <div class="item item4" v-if="data6.secondRegionDataList.length > 3">
                <div class="num fs_linear">{{ data6.secondRegionDataList[3].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6.secondRegionDataList[3].name }}</div>
              <div class="item item4" v-if="data6.length > 3">
                <div class="num fs_linear">{{ data6[3].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6[3].name }}</div>
                <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
              </div>
              <div class="item item5" v-if="data6.secondRegionDataList.length > 4">
                <div class="num fs_linear">{{ data6.secondRegionDataList[4].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6.secondRegionDataList[4].name }}</div>
              <div class="item item5">
                <div class="num fs_linear">{{ data6[0].value }}<span class="unit">kw·h</span></div>
                <div class="name">{{ data6[0].name }}</div>
                <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
              </div>
            </template>
            <div class="bottom_wrap" v-if="data1.yesterdayElectricity">
              <div class="bottom bottom1">
                <div class="num fs_linear">{{ data1.yesterdayElectricity.total || 0 }}</div>
              <div class="bottom bottom1" @click="changeacDay(3)">
                <div :class="{active: activeDays == 3}" class="num fs_linear">{{ data1.yesterdayElectricity.total || 0 }}</div>
                <div class="name">昨日用电</div>
                <div class="unit">kw·h</div>
                <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
                <img v-if="activeDays == 3" src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
                <img v-else src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
              </div>
              <div class="bottom bottom2">
                <div class="num">{{ data1.todayElectricity.total || 0 }}</div>
              <div class="bottom bottom2" @click="changeacDay(1)">
                <div :class="{active: activeDays == 1}" class="num">{{ data1.todayElectricity.total || 0 }}</div>
                <div class="name">今日用电</div>
                <div class="unit">kw·h</div>
                <img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
                <img v-if="activeDays == 1" src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
                <img v-else src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
              </div>
              <div class="bottom bottom3">
                <div class="num fs_linear">{{ data1.monthElectricity.total || 0 }}</div>
              <div class="bottom bottom3" @click="changeacDay(2)">
                <div :class="{active: activeDays == 2}" class="num fs_linear">{{ data1.monthElectricity.total || 0 }}</div>
                <div class="name">本月用电</div>
                <div class="unit">kw·h</div>
                <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
                <img v-if="activeDays == 2" src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
                <img v-else src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
              </div>
            </div>
          </div>
@@ -298,7 +301,8 @@
  zxenergyDataList,
  zxlastMonthOil,
  zxloadCurve,
  zxenergyRegionData
  zxenergyRegionData,
  regionDataRanking
} from '@/api'


@@ -546,13 +550,19 @@
    data1.value = result
  })
}
const activeDays = ref('1')
const data6 = ref({})
const changeacDay = (val) => {
  activeDays.value = val
  getData6()
}
const getData6 = () => {
  zxenergyRegionData().then(res => {
  regionDataRanking({type: activeDays.value}).then(res => {
    const result = res.data
    data6.value = result
  })
}


const activeTab2 = ref(0)
const tabsClick2 = (v) => {
@@ -888,7 +898,7 @@
        position: absolute;
        text-align: center;
        padding-top: 70px;

        cursor: pointer;
        .num {
          font-size: 24px;
          color: #D0FFFA;
@@ -904,6 +914,12 @@
        .unit {
          font-size: 14px;
          color: #D0FFFA;
        }
        .active {
          font-size: 36px;
          color: #01D9FE;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }

@@ -921,14 +937,8 @@
        bottom: -0px;
        left: 50%;
        transform: translate(-50%, 0);
        padding-top: 50px;
        /* padding-top: 50px; */

        .num {
          font-size: 36px;
          color: #01D9FE;
          line-height: 54px;
          font-weight: bold;
        }
      }
    }
  }