ll

liukangdong

2024-11-01 064128dfb784d9780aa4ac5dbd897c29d46a2666

 screen/src/views/EnergyConsum.vue

@@ -1,5 +1,5 @@
<template>
  <v-scale-screen width="1920" height="960" :fullScreen="true">
  <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">
@@ -48,11 +48,11 @@
                <div>月能耗分析</div>
              </div>
              <div class="tabs">
                <div class="tab active">用电</div>
                <div class="tab" :class="{ active: activeTab2 == 0 }" @click="tabsClick2(0)">用水</div>
                <div class="separate"></div>
                <div class="tab">用水</div>
                <div class="tab" :class="{ active: activeTab2 == 2 }" @click="tabsClick2(2)">用电</div>
                <div class="separate"></div>
                <div class="tab">用气</div>
                <div class="tab" :class="{ active: activeTab2 == 1 }" @click="tabsClick2(1)">用气</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
@@ -193,13 +193,13 @@
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="list">
              <div class="line" v-for="item, i in 6">
              <div class="line" v-for="item, i in data3">
                <div class="top"><span v-if="i < 3">top</span>{{ i }}</div>
                <div class="id_card">皖A12313</div>
                <div class="id_card">{{ item.carNo }}</div>
                <div class="wrap">
                  <ChargeRate :rate="15" :color />
                  <ChargeRate :rate="item.rate" :color />
                </div>
                <div class="num">1000</div>
                <div class="num">{{ item.quantity }}</div>
              </div>
            </div>
          </div>
@@ -276,7 +276,13 @@
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1, 2, 3, 4, 5, 5]
      data: data5.value.map(i => i.timeData)
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
    },
    yAxis: {
      type: 'value',
@@ -295,7 +301,7 @@
      }
    },
    grid: {
      top: '16%',
      top: '26%',
      left: '4%',
      right: '2%',
      bottom: '2%',
@@ -303,12 +309,7 @@
    },
    series: [
      {
        data: [1, 2, 3, 4, 4, 5].map(i => {
          return {
            name: i,
            value: i,
          }
        }),
        data: data5.value.map(i => i.energy),
        type: 'line',
        areaStyle: {
          normal: {
@@ -344,7 +345,7 @@
          width: 2, // 线条粗细
        },
        symbol: 'circle',
        symbolSize: 10,
        symbolSize: 6,
        itemStyle: {
          normal: {
            color: '#F3BD00', //折线点的颜色
@@ -364,27 +365,31 @@
  var myChart = echarts.init(document.querySelector('.loadRef'))
  // 绘制图表
  myChart.setOption({
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'line'
    //   },
    //   formatter: function (params) {
    //     setTimeout(() => {
    //       console.log('params', params)
    //     })
    //     return `
    //       <div style="background-color: #091123;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;">
    //         <div>${params[0].name}总销售额(万元)</div>
    //         <div style="display: flex;align-items: center;">
    //           <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #ebbf40;"></div>
    //           <div style="margin: 0 4px 0 6px;">总销售</div>
    //           <span style="color: #ebbf40;">${params[0].value}</span>
    //         </div>
    //       </div>
    //     `
    //   }
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      // trigger: 'axis',
      // axisPointer: {
      //   type: 'line'
      // },
      // formatter: function (params) {
      //   setTimeout(() => {
      //     console.log('params', params)
      //   })
      //   return `
      //     <div style="background-color: #091123;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;">
      //       <div>${params[0].name}总销售额(万元)</div>
      //       <div style="display: flex;align-items: center;">
      //         <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #ebbf40;"></div>
      //         <div style="margin: 0 4px 0 6px;">总销售</div>
      //         <span style="color: #ebbf40;">${params[0].value}</span>
      //       </div>
      //     </div>
      //   `
      // }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
@@ -407,7 +412,7 @@
      }
    },
    grid: {
      top: '16%',
      top: '26%',
      left: '4%',
      right: '2%',
      bottom: '2%',
@@ -426,7 +431,7 @@
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "rgba(192, 156, 53,.7)" // 0% 处的颜色
                color: "#2e6ab5" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#1b1b12" // 100% 处的颜色
@@ -443,18 +448,18 @@
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#F3BD00' // 0% 处的颜色
              offset: 0, color: '#2e6ab5' // 0% 处的颜色
            }, {
              offset: 1, color: '#F3BD00' // 100% 处的颜色
              offset: 1, color: '#2e6ab5' // 100% 处的颜色
            }],
          },
          width: 2, // 线条粗细
        },
        symbol: 'circle',
        symbolSize: 10,
        symbolSize: 0,
        itemStyle: {
          normal: {
            color: '#F3BD00', //折线点的颜色
            color: '#2e6ab5', //折线点的颜色
          },
        },
        smooth: true
@@ -466,14 +471,12 @@
    myChart.resize()
  })
}
const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // 绘制图表
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
    grid: {
      top: '20%',
      top: '26%',
      left: '2%',
      right: '2%',
      bottom: '4%',
@@ -487,7 +490,7 @@
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
      data: data2.value.map(i => i.timeData)
    },
    yAxis: {
      type: 'value',
@@ -505,7 +508,7 @@
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        data: data2.value.map(i => i.energy),
        type: 'bar',
        barWidth: 10,
        itemStyle: {
@@ -513,8 +516,8 @@
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
                { offset: 0, color: '#50afd3' },
                { offset: 1, color: '#1d4861' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
@@ -532,20 +535,32 @@
const getData1 = () => {
  zxcenterData().then(res => {
    const result = res.data
    data1.value = result
  })
}
const activeTab2 = ref(0)
const tabsClick2 = (v) => {
  activeTab2.value = v
  getData2()
}
const data2 = ref([])
const getData2 = () => {
  zxenergyDataList().then(res => {
  zxenergyDataList({type: activeTab2.value}).then(res => {
    const result = res.data
    data2.value = result
    initEnergy()
  })
}
const data3 = ref([])
const getData3 = () => {
  zxlastMonthOil().then(res => {
    const result = res.data
    data3.value = result
    const result = res.data || []
    data3.value = result.map(i => {
      if(i.quantity && i.maxOil){
        i.rate = ((i.quantity/i.maxOil) * 25).toFixed(0)
      }
      return i
    })
  })
}
const data4 = ref([])
@@ -557,11 +572,21 @@
  })
}

const data5 = ref([])
const getData5 = () => {
  zxenergyDataList({type: 3}).then(res => {
    const result = res.data
    data5.value = result
    initOperation()
  })
}

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

})

@@ -606,9 +631,7 @@

      .load_wrap {
        width: 100%;
        height: 210px;
        padding: 12px 12px;

        height: 250px;
        .loadRef {
          width: 100%;
          height: 100%;
@@ -619,7 +642,7 @@
    .left_box_three {
      .energy_wrap {
        width: 100%;
        height: 200px;
        height: 250px;

        .energyRef {
          width: 100%;
@@ -890,11 +913,9 @@

    .right_box_three {
      .wrap {
        padding: 8px;

        .analyseRef {
          width: 100%;
          height: 210px;
          height: 250px;
        }
      }
    }
@@ -934,7 +955,9 @@
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .tab{
      cursor: pointer;
    }
    .separate {
      width: 1px;
      height: 14px;