ll

liukangdong

2024-11-15 522877ae5bddcb27699b893c27f149d6a3c7e408

 screen/src/views/EnergyConsum.vue

@@ -1,5 +1,5 @@
<template>
  <v-scale-screen width="1920" height="960" >
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <img src="@/assets/images/bg_main_app.png" class="main_bg" alt="" />
      <div class="main_header">
@@ -25,7 +25,8 @@
              <img src="@/assets/images/nenghao_ic1.png" class="co2" alt="">
              <div>
                <div class="name">本年累计循环烟箱</div>
                <div><span class="num" v-if="data1.smokeBoxTotal">{{ data1.smokeBoxTotal.toLocaleString() }}</span><span>只</span></div>
                <div><span class="num" v-if="data1.smokeBoxTotal">{{ data1.smokeBoxTotal.toLocaleString()
                    }}</span><span>只</span></div>
              </div>
            </div>
          </div>
@@ -69,7 +70,8 @@
                  <img class="icon" src="@/assets/images/ic_yongdian@2x.png" alt="" />
                  <div class="content">
                    <div class="name">上月用电(kw·h)</div>
                    <div class="num" v-if="data1.electricityQuantity">{{ data1.electricityQuantity.toLocaleString() }}</div>
                    <div class="num" v-if="data1.electricityQuantity || data1.electricityQuantity == 0">{{ data1.electricityQuantity.toLocaleString() }}
                    </div>
                  </div>
                </div>
                <div class="static">
@@ -86,7 +88,7 @@
                  <img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" />
                  <div class="content">
                    <div class="name">上月用水(t)</div>
                    <div class="num" v-if="data1.waterQuantity">{{ data1.waterQuantity.toLocaleString() }}</div>
                    <div class="num" v-if="data1.waterQuantity || data1.waterQuantity == 0">{{ data1.waterQuantity.toLocaleString() }}</div>
                  </div>
                </div>
                <div class="static">
@@ -103,7 +105,7 @@
                  <img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" />
                  <div class="content">
                    <div class="name">上月用气(t)</div>
                    <div class="num" v-if="data1.gasQuantity">{{ data1.gasQuantity.toLocaleString() }}</div>
                    <div class="num" v-if="data1.gasQuantity || data1.gasQuantity == 0">{{ data1.gasQuantity.toLocaleString() }}</div>
                  </div>
                </div>
                <div class="static">
@@ -120,45 +122,45 @@
          <div class="center_box_two">
            <img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
            <div class="item item1">
              <div class="num fs_linear">{{ data1.workHouseQuantity }}<span class="unit">kw·h</span></div>
              <div class="num fs_linear">{{ data1.workHouseQuantity || 0 }}<span class="unit">kw·h</span></div>
              <div class="name">联合工房</div>
              <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
            </div>
            <div class="item item2">
              <div class="num fs_linear">{{ data1.officeQuantity }}<span class="unit">kw·h</span></div>
              <div class="num fs_linear">{{ data1.officeQuantity || 0 }}<span class="unit">kw·h</span></div>
              <div class="name">办公楼</div>
              <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
            </div>
            <div class="item item3">
              <div class="num fs_linear">{{ data1.parkQuantity }}<span class="unit">kw·h</span></div>
              <div class="num fs_linear">{{ data1.parkQuantity || 0 }}<span class="unit">kw·h</span></div>
              <div class="name">物流园区</div>
              <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
            </div>
            <div class="item item4">
              <div class="num fs_linear">{{ data1.productHouseQuantity }}<span class="unit">kw·h</span></div>
              <div class="num fs_linear">{{ data1.productHouseQuantity || 0 }}<span class="unit">kw·h</span></div>
              <div class="name">成品库</div>
              <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
            </div>
            <div class="item item5">
              <div class="num fs_linear">{{ data1.powerQuantity }}<span class="unit">kw·h</span></div>
              <div class="num fs_linear">{{ data1.powerQuantity || 0 }}<span class="unit">kw·h</span></div>
              <div class="name">动力站房</div>
              <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
            </div>
            <div class="bottom_wrap">
              <div class="bottom bottom1">
                <div class="num fs_linear">{{ data1.yesterdayElectricity }}</div>
                <div class="num fs_linear">{{ data1.yesterdayElectricity || 0 }}</div>
                <div class="name">昨日用电</div>
                <div class="unit">kw·h</div>
                <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
              </div>
              <div class="bottom bottom2">
                <div class="num">{{ data1.todayElectricity }}</div>
                <div class="num">{{ data1.todayElectricity || 0 }}</div>
                <div class="name">今日用电</div>
                <div class="unit">kw·h</div>
                <img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
              </div>
              <div class="bottom bottom3">
                <div class="num fs_linear">{{ data1.monthElectricity }}</div>
                <div class="num fs_linear">{{ data1.monthElectricity || 0 }}</div>
                <div class="name">本月用电</div>
                <div class="unit">kw·h</div>
                <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
@@ -179,7 +181,8 @@
              <img src="@/assets/images/ic_co2@2x.png" class="co2" alt="">
              <div>
                <div class="name">本月累计碳排放</div>
                <div><span class="num" v-if="data1.carbon">{{ data1.carbon.toLocaleString() }}</span><span>吨</span></div>
                <div><span class="num" v-if="data1.carbon">{{ data1.carbon.toLocaleString() }}</span><span>吨</span>
                </div>
              </div>
            </div>
          </div>
@@ -197,7 +200,7 @@
                <div class="top"><span v-if="i < 3">top</span>{{ i }}</div>
                <div class="id_card">{{ item.carNo }}</div>
                <div class="wrap">
                  <ChargeRate :rate="item.rate" :color="i > 2 ? 'cyan': '#e3a83a'" />
                  <ChargeRate :rate="item.rate" :color="i > 2 ? 'cyan' : '#e3a83a'" />
                </div>
                <div class="num">{{ item.quantity }}</div>
              </div>
@@ -420,7 +423,7 @@
    },
    series: [
      {
        data:  data4.value.map(i => i.energy),
        data: data4.value.map(i => i.energy),
        type: 'line',
        areaStyle: {
          normal: {
@@ -545,7 +548,7 @@
}
const data2 = ref([])
const getData2 = () => {
  zxenergyDataList({type: activeTab2.value}).then(res => {
  zxenergyDataList({ type: activeTab2.value }).then(res => {
    const result = res.data
    data2.value = result
    initEnergy()
@@ -553,11 +556,26 @@
}
const data3 = ref([])
const getData3 = () => {
  data3.value = [
    { carNo: '皖A87772', maxOil: 50, quantity: 50 },
    { carNo: '皖A81222', maxOil: 50, quantity: 26 },
    { carNo: '皖A85035', maxOil: 50, quantity: 24 },
    { carNo: '皖A86057', maxOil: 50, quantity: 14 },
    { carNo: '皖A81272', maxOil: 50, quantity: 9 },
    { carNo: '皖A87772', maxOil: 50, quantity: 1 },
  ]
  data3.value = data3.value.map(i => {
    if (i.quantity && i.maxOil) {
      i.rate = ((i.quantity / i.maxOil) * 25).toFixed(0)
    }
    return i
  })
  return
  zxlastMonthOil().then(res => {
    const result = res.data || []
    data3.value = result.map(i => {
      if(i.quantity && i.maxOil){
        i.rate = ((i.quantity/i.maxOil) * 25).toFixed(0)
      if (i.quantity && i.maxOil) {
        i.rate = ((i.quantity / i.maxOil) * 25).toFixed(0)
      }
      return i
    })
@@ -574,7 +592,7 @@

const data5 = ref([])
const getData5 = () => {
  zxenergyDataList({type: 3}).then(res => {
  zxenergyDataList({ type: 3 }).then(res => {
    const result = res.data
    data5.value = result
    initOperation()
@@ -632,6 +650,7 @@
      .load_wrap {
        width: 100%;
        height: 250px;

        .loadRef {
          width: 100%;
          height: 100%;
@@ -955,9 +974,11 @@
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;
    .tab{

    .tab {
      cursor: pointer;
    }

    .separate {
      width: 1px;
      height: 14px;
@@ -1052,6 +1073,7 @@
  height: 980px;
  color: #ffffff;
  position: relative;

  .main_bg {
    position: absolute;
    left: 0;