ll

liukangdong

2024-10-10 021962cf0957d6332e33f7f32d6ae92d0cc9f12c

 screen/src/views/EnergyConsum.vue

@@ -2,11 +2,7 @@
  <div class="main_app">
    <img src="@/assets/images/bg_main_app.png" class="main_bg" alt="" />
    <div class="main_header">
      <img
        src="@/assets/images/maintitle@2x.png"
        class="main_header_bg"
        alt=""
      />
      <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
      <div class="title">安泰智慧物流园区-绿色低碳运营</div>
      <div class="time">
        <span class="date">{{ date }}</span>
@@ -59,6 +55,9 @@
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="load_wrap">
            <div class="loadRef"></div>
          </div>
        </div>
        <div class="left_box_three">
          <div class="com_header">
@@ -75,6 +74,9 @@
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="energy_wrap">
            <div class="energyRef"></div>
          </div>
        </div>
      </div>
      <div class="center_box">
@@ -82,11 +84,7 @@
          <div class="list">
            <div class="item">
              <div class="header">
                <img
                  class="icon"
                  src="@/assets/images/ic_yongdian@2x.png"
                  alt=""
                />
                <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>
@@ -103,11 +101,7 @@
            </div>
            <div class="item">
              <div class="header">
                <img
                  class="icon"
                  src="@/assets/images/ic_yongshui@2x.png"
                  alt=""
                />
                <img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" />
                <div class="content">
                  <div class="name">上月用水(t)</div>
                  <div class="num">450</div>
@@ -124,11 +118,7 @@
            </div>
            <div class="item">
              <div class="header">
                <img
                  class="icon"
                  src="@/assets/images/ic_yongqi@2x.png"
                  alt=""
                />
                <img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" />
                <div class="content">
                  <div class="name">上月用气(t)</div>
                  <div class="num">450</div>
@@ -195,17 +185,65 @@
        </div>
      </div>
      <div class="right_box">
        <div class="right_box_one"></div>
        <div class="right_box_two"></div>
        <div class="right_box_three"></div>
        <div class="right_box_one">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>本月碳排放量统计</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="content">
            <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>
          </div>
        </div>
        <div class="right_box_two">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>上月油耗排行统计</div>
            </div>
            <div class="tabs">油耗：L</div>
            <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="top"><span v-if="i < 3">top</span>{{ i }}</div>
              <div class="id_card">皖A12313</div>
              <div class="wrap">
                <ChargeRate :rate="15" :color />
              </div>
              <div class="num">1000</div>
            </div>
          </div>
        </div>
        <div class="right_box_three">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>月油耗分析</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="wrap">
            <div class="analyseRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import ChargeRate from '@/components/ChargeRate.vue'
import * as echarts from 'echarts'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -218,29 +256,329 @@

}, 1000)


const initOperation = () => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.analyseRef'))
  // 绘制图表
  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>
    //     `
    //   }
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1,2,3,4,5,5]
    },
    yAxis: {
      type: 'value',
      name: '单位：L',
      nameTextStyle: {
        padding: [0, 0, 0, -16]    // 四个数字分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
          type: 'dashed',
        },
        splitNumber: 4
      }
    },
    grid: {
      top: '16%',
      left: '4%',
      right: '2%',
      bottom: '2%',
      containLabel: true
    },
    series: [
      {
        data: [1,2,3,4,4,5].map(i => {
          return {
            name: i,
            value: i,
          }
        }),
        type: 'line',
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "rgba(192, 156, 53,.7)" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#1b1b12" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        },
        lineStyle: { // 线条样式
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#F3BD00' // 0% 处的颜色
            }, {
              offset: 1, color: '#F3BD00' // 100% 处的颜色
            }],
          },
          width: 2, // 线条粗细
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            color: '#F3BD00', //折线点的颜色
          },
        },
        smooth: true
      }
    ]
  })

  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}
const initLoadReal = () => {
  // 基于准备好的dom，初始化echarts实例
  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>
    //     `
    //   }
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1,2,3,4,5,5]
    },
    yAxis: {
      type: 'value',
      name: '单位：kw·h',
      nameTextStyle: {
        padding: [0, 0, 0, -16]    // 四个数字分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
          type: 'dashed',
        },
        splitNumber: 4
      }
    },
    grid: {
      top: '16%',
      left: '4%',
      right: '2%',
      bottom: '2%',
      containLabel: true
    },
    series: [
      {
        data: [1,2,3,4,4,4000].map(i => {
          return {
            name: i,
            value: i,
          }
        }),
        type: 'line',
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "rgba(192, 156, 53,.7)" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#1b1b12" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        },
        lineStyle: { // 线条样式
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#F3BD00' // 0% 处的颜色
            }, {
              offset: 1, color: '#F3BD00' // 100% 处的颜色
            }],
          },
          width: 2, // 线条粗细
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            color: '#F3BD00', //折线点的颜色
          },
        },
        smooth: true
      }
    ]
  })

  window.addEventListener('resize', function () {//执行
    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%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
    },
    xAxis: {
      type: 'category',
      data: [1,2,3,4,4,5]
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // 四个数字分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
      }
    },
    series: [
      {
        data: [1,2,3,4,5],
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
      }
    ]
  })
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}

onMounted(() => {
  initOperation()
  initLoadReal()
  initEnergy()
}) 


</script>

<style lang="scss" scoped>
.main_content {
  display: flex;
  padding: 20px 24px 0;

  .left_box {
    flex: 4;

    .left_box_one {
      width: 100%;
      margin-bottom: 20px;

      .content {
        width: 100%;
        padding: 24px 5%;
        display: flex;
        flex-wrap: wrap;

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

          .lab {
            font-size: 14px;
            color: #ffffff;
          }

          .val {
            font-weight: 600;
            font-size: 20px;
@@ -250,37 +588,64 @@
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;
      .load_wrap{
        width: 100%;
        height: 210px;
        padding: 12px 12px;
        .loadRef{
          width: 100%;
          height: 100%;
        }
      }
    }

    .left_box_three {
      .energy_wrap{
        width: 100%;
        height: 200px;
        .energyRef{
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .center_box {
    flex: 9;
    padding: 0 60px;

    .center_box_one {
      padding: 30px 18px;
      margin-bottom: 18px;

      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
          flex: 1;

          .header {
            display: flex;
            margin-bottom: 14px;

            .icon {
              width: 70px;
              height: 73px;
              margin-right: 20px;
            }

            .content {
              .name {
                font-size: 16px;
                color: #d2e0ff;
              }

              .num {
                font-weight: bold;
                font-size: 36px;
@@ -289,17 +654,21 @@
              }
            }
          }

          .static {
            font-size: 12px;
            display: flex;
            align-items: center;

            .lab {
              color: #869cc9;
            }

            .val {
              color: #d2e0ff;
              margin-right: 20px;
            }

            .icon {
              width: 12px;
              height: 12px;
@@ -309,99 +678,119 @@
        }
      }
    }

    .center_box_two {
      position: relative;
      width: 100%;
      height: 544px;

      .item {
        width: 120px;
        height: 112px;
        position: absolute;
        text-align: center;

        .num {
          font-size: 35px;
          line-height: 50px;
          height: 50px;
          font-weight: 600;

          .unit {
            font-size: 13px;
          }
        }

        .name {
          font-weight: 500;
          font-size: 17px;
          color: #ffffff;
        }

        .bg {
          width: 120px;
          height: 88px;
          top: 24px;
        }
      }
      .item1{

      .item1 {
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
      }
      .item2{

      .item2 {
        top: 112px;
        left: 106px;
      }
      .item3{

      .item3 {
        top: 112px;
        right: 106px;
      }
      .item4{

      .item4 {
        top: 291px;
        left: 56px;
      }
      .item5{

      .item5 {
        top: 291px;
        right: 56px;
      }
      .bottom_wrap{

      .bottom_wrap {
        position: absolute;
        bottom:-110px;
        bottom: -110px;
        left: 50%;
        width: 600px;
        height: 100px;
        transform: translate(-50%, 0);
      }
      .bottom{

      .bottom {
        width: 140px;
        height: 194px;
        position: absolute;
        text-align: center;
        padding-top: 70px;
        .num{

        .num {
          font-size: 24px;
          color: #D0FFFA;
          line-height: 33px;
        }
        .name{

        .name {
          font-size: 15px;
          color: #D0FFFA;
          line-height: 21px;
        }
        .unit{

        .unit {
          font-size: 14px;
          color: #D0FFFA;
        }
      }
      .bottom1{

      .bottom1 {
        bottom: -0px;
        left: 40px;  
        left: 40px;
      }
      .bottom3{

      .bottom3 {
        bottom: -0px;
        right: 40px;  
        right: 40px;
      }
      .bottom2{

      .bottom2 {
        bottom: -0px;
        left: 50%;  
        left: 50%;
        transform: translate(-50%, 0);
        padding-top: 50px;
        .num{

        .num {
          font-size: 36px;
          color: #01D9FE;
          line-height: 54px;
@@ -410,10 +799,83 @@
      }
    }
  }

  .right_box {
    flex: 4;

    .right_box_one {
      margin-bottom: 20px;
      .content {
        height: 164px;
        display: flex;
        align-items: center;
        justify-content: center;

        .co2 {
          width: 102px;
          margin-right: 30px;
        }

        .num {
          margin-top: 10px;
          color: #01D9FE;
          font-weight: 600;
          font-size: 36px;
          margin-right: 2px;
        }
      }
    }
    .right_box_two{
      margin-bottom: 20px;
      .list{
        padding: 20px 24px 4px;
        .line{
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          .top{
            font-weight: 500;
            font-size: 12px;
            width: 33px;
            height: 19px;
            line-height: 19px;
            text-align: center;
            color: #DBEAEA;
            box-shadow: inset 0px 0px 3px 0px #01D9FE;
            margin-right: 10px;
          }
          .id_card{
            color: #DBEAEA;
            font-weight: 500;
            margin-right: 14px;
            font-size: 14px;
          }
          .num{
            font-weight: 500;
            font-size: 13px;
            color: #DBEAEA;
            margin-left: 15px;
          }
          .wrap{
            flex: 1;
            height: 20px;
            border: 1px solid #686B6B;
          }
        }
      }
    }
    .right_box_three{
      .wrap{
        padding: 8px;
        .analyseRef{
          width: 100%;
          height: 210px;
        }
      }
    }
  }
}

.com_header {
  height: 40px;
  display: flex;
@@ -421,44 +883,46 @@
  align-items: center;
  padding: 0 15px 0 13px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    background-image: -webkit-linear-gradient(
      top,
      #ffffff 0%,
      #c8ddff 66%,
      #85b4ff 72%,
      #74a9ff 100%
    );
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 14px;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    .tab {
      font-size: 14px;
      color: #d2e0ff;
    }
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.bg {
  position: absolute;
  left: 0;
@@ -468,17 +932,17 @@
  object-fit: cover;
  z-index: -1;
}

.fs_linear {
  background-image: -webkit-linear-gradient(
    top,
    #ffffff 0%,
    #c8ddff 70%,
    #85b4ff 80%,
    #74a9ff 100%
  );
  background-image: -webkit-linear-gradient(top,
      #ffffff 0%,
      #c8ddff 70%,
      #85b4ff 80%,
      #74a9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main_header {
  display: flex;
  justify-content: space-between;
@@ -488,31 +952,30 @@
  padding: 0px 40px 16px;
  font-weight: 600;
  font-size: 36px;

  .title {
    background-image: -webkit-linear-gradient(
      top,
      #ffffff 0%,
      #c8ddff 70%,
      #85b4ff 80%,
      #74a9ff 100%
    );
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 70%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(
      top,
      #ffffff 0%,
      #c8ddff 50%,
      #85b4ff 80%,
      #74a9ff 100%
    );
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 50%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;

    .time {
      width: 180px;
      display: flex;
@@ -520,10 +983,12 @@
      padding-bottom: 10px;
      font-size: 36px;
    }

    .week {
      margin-left: 36px;
    }
  }

  .main_header_bg {
    position: absolute;
    left: 0;
@@ -534,11 +999,13 @@
    z-index: -1;
  }
}

.main_app {
  width: 100%;
  min-height: 100vh;
  color: #ffffff;
  position: relative;

  .main_bg {
    position: absolute;
    left: 0;