ll

liukangdong

2024-10-31 3b2791d8a76d96c698990b2fe1fbe443fa8bd8de

 screen/src/views/EnergyConsum.vue

@@ -17,34 +17,15 @@
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>实时三相电流/电压</div>
                <div>本年累计循环烟箱</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="content">
              <div class="item">
                <div class="lab">A相电流(A)</div>
                <div class="val">60</div>
              </div>
              <div class="item">
                <div class="lab">B相电流(A)</div>
                <div class="val">60</div>
              </div>
              <div class="item">
                <div class="lab">C相电流(A)</div>
                <div class="val">60</div>
              </div>
              <div class="item">
                <div class="lab">有功功率(KW)</div>
                <div class="val">60</div>
              </div>
              <div class="item">
                <div class="lab">功率因数</div>
                <div class="val">60</div>
              </div>
              <div class="item">
                <div class="lab">有功电度(°)</div>
                <div class="val">60</div>
              <img src="@/assets/images/nenghao_ic1.png" class="co2" alt="">
              <div>
                <div class="name">本年累计循环烟箱</div>
                <div><span class="num">{{ data1.smokeBoxTotal }}</span><span>只</span></div>
              </div>
            </div>
          </div>
@@ -88,16 +69,16 @@
                  <img class="icon" src="@/assets/images/ic_yongdian@2x.png" alt="" />
                  <div class="content">
                    <div class="name">上月用电(kw·h)</div>
                    <div class="num">450</div>
                    <div class="num">{{ data1.electricityQuantity }}</div>
                  </div>
                </div>
                <div class="static">
                  <span class="lab">同比</span>
                  <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
                  <span class="val">11</span>
                  <span class="val">{{ data1.electricityYear }}</span>
                  <span class="lab">环比</span>
                  <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
                  <span class="val">11</span>
                  <span class="val">{{ data1.gasMonth }}</span>
                </div>
              </div>
              <div class="item">
@@ -105,16 +86,16 @@
                  <img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" />
                  <div class="content">
                    <div class="name">上月用水(t)</div>
                    <div class="num">450</div>
                    <div class="num">{{ data1.waterQuantity }}</div>
                  </div>
                </div>
                <div class="static">
                  <span class="lab">同比</span>
                  <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
                  <span class="val">11</span>
                  <span class="val">{{ data1.waterMonth }}</span>
                  <span class="lab">环比</span>
                  <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
                  <span class="val">11</span>
                  <span class="val">{{ data1.waterYear }}</span>
                </div>
              </div>
              <div class="item">
@@ -122,16 +103,16 @@
                  <img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" />
                  <div class="content">
                    <div class="name">上月用气(t)</div>
                    <div class="num">450</div>
                    <div class="num">{{ data1.gasQuantity }}</div>
                  </div>
                </div>
                <div class="static">
                  <span class="lab">同比</span>
                  <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
                  <span class="val">11</span>
                  <span class="val">{{ data1.gasMonth }}</span>
                  <span class="lab">环比</span>
                  <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
                  <span class="val">11</span>
                  <span class="val">{{ data1.gasYear }}</span>
                </div>
              </div>
            </div>
@@ -139,45 +120,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">240<span class="unit">kw·h</span></div>
              <div class="num fs_linear">{{ data1.workHouseQuantity }}<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">240<span class="unit">kw·h</span></div>
              <div class="name">联合工房</div>
              <div class="num fs_linear">{{ data1.officeQuantity }}<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">240<span class="unit">kw·h</span></div>
              <div class="name">联合工房</div>
              <div class="num fs_linear">{{ data1.parkQuantity }}<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">240<span class="unit">kw·h</span></div>
              <div class="name">联合工房</div>
              <div class="num fs_linear">{{ data1.productHouseQuantity }}<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">240<span class="unit">kw·h</span></div>
              <div class="name">联合工房</div>
              <div class="num fs_linear">{{ data1.powerQuantity }}<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">240</div>
                <div class="num fs_linear">{{ data1.yesterdayElectricity }}</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">240</div>
                <div class="num">{{ data1.todayElectricity }}</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">240</div>
                <div class="num fs_linear">{{ data1.monthElectricity }}</div>
                <div class="name">本月用电</div>
                <div class="unit">kw·h</div>
                <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
@@ -198,7 +179,7 @@
              <img src="@/assets/images/ic_co2@2x.png" class="co2" alt="">
              <div>
                <div class="name">本月累计碳排放</div>
                <div><span class="num">22.22</span><span>吨</span></div>
                <div><span class="num">{{ data1.carbon }}</span><span>吨</span></div>
              </div>
            </div>
          </div>
@@ -246,6 +227,12 @@
import ChargeRate from '@/components/ChargeRate.vue'
import * as echarts from 'echarts'
import VScaleScreen from 'v-scale-screen'
import {
  zxcenterData,
  zxenergyDataList,
  zxlastMonthOil,
  zxloadCurve,
} from '@/api'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
@@ -401,7 +388,7 @@
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1, 2, 3, 4, 5, 5]
      data: data4.value.map(i => i.timeData)
    },
    yAxis: {
      type: 'value',
@@ -428,12 +415,7 @@
    },
    series: [
      {
        data: [1, 2, 3, 4, 4, 4000].map(i => {
          return {
            name: i,
            value: i,
          }
        }),
        data:  data4.value.map(i => i.energy),
        type: 'line',
        areaStyle: {
          normal: {
@@ -546,10 +528,41 @@
  })
}

onMounted(() => {
  initOperation()
const data1 = ref({})
const getData1 = () => {
  zxcenterData().then(res => {
    const result = res.data
  })
}
const data2 = ref([])
const getData2 = () => {
  zxenergyDataList().then(res => {
    const result = res.data
    data2.value = result
  })
}
const data3 = ref([])
const getData3 = () => {
  zxlastMonthOil().then(res => {
    const result = res.data
    data3.value = result
  })
}
const data4 = ref([])
const getData4 = () => {
  zxloadCurve().then(res => {
    const result = res.data
    data4.value = result
  initLoadReal()
  initEnergy()
  })
}

onMounted(() => {
  getData1()
  getData2()
  getData3()
  getData4()

})


@@ -568,26 +581,22 @@
      margin-bottom: 20px;

      .content {
        width: 100%;
        padding: 24px 5%;
        height: 164px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        .item {
          width: 33.3%;
          margin-bottom: 12px;

          .lab {
            font-size: 14px;
            color: #ffffff;
        .co2 {
          width: 100px;
          margin-right: 30px;
          }

          .val {
        .num {
          margin-top: 10px;
          color: #01D9FE;
            font-weight: 600;
            font-size: 20px;
            color: #01d9fe;
            margin-top: 4px;
          }
          font-size: 36px;
          margin-right: 2px;
        }
      }
    }