admin-fiveFollowing/src/views/electricityFeeAnalysis/index.vue

<template>
  <div class="app-container electricityFeeAnalysis">
      <div class="top">
        <div class="search">
          <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">年度</div>
          <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">任意时段</div>
          <div class="date">
            <el-date-picker
              v-model="year"
              type="year"
              v-if="dateType == 1"
              :picker-options="pickerOptions"
              :disabled-date="disabledDate"
              style="width:100px;margin-top:-4px;display: inline-block;"
            />
            <el-date-picker
              v-model="day"
              type="datetimerange"
              v-if="dateType == 2"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width:350px;margin-top:-4px;display: inline-block;"
            />
          </div>
          <div style="display: inline-block;">
            <el-button type="primary" @click="search" style="margin-top:-4px;">查询</el-button>
            <el-button type="warning" @click="export" style="margin-top:-4px;">导出</el-button>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="chart">
          <div class="top">
            <img src="@/assets/images/time.png" alt="">
            <span>每日总电费趋势</span>
          </div>
          <chart :data="dfqs"/>
        </div>
        <div class="table">
          <tableD :data="tableData"/>
        </div>
      </div>
  </div>
</template>

<script setup>

import { ref,onMounted } from "vue";
import tableD from "./components/tableD";
import chart from "./components/chart";
onMounted(() => {
  init()
})

const dateType = ref(1) //日期类型 1:年度 2:任意时段
const year = ref(new Date().getFullYear().toString()) //年份
const day = ref() //日期
const pickerOptions = {
  disabledDate(time) {
    return time.getFullYear() > new Date().getFullYear();  // 禁止选择当前年份之后的年份
  }
}
const dfqs = ref({
  xAxis:["2025-1", "2025-2", "2025-3", "2025-4", "2025-5", "2025-6", "2025-7", "2025-8", "2025-9", "2025-10", "2025-11", "2025-12"],
  type:["电度电费","基本电费","力调电费"],
  data:[
    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
    [100,89,101,110,99,94,45,89,99,100,110,102],
  ],
  unit:"元",
  color:["#41BED8","#FCD011","#9283EA"]
})

const tableData = ref([
  { a: 1000 },
  { a: 1000 },
]) //列表数据
function dateSwitch(val){
  dateType.value = val
}







function init(){

}

/**
 * 切换模式
 * @param {Number} val 1:表格模式 2:图表模式
 */
function switchMode(val) {
  mode.value = val
  // if(val == 1){
  //   setTimeout(() => {
  //     init()
  //     site(1)
  //   })
  // }
}

/**
 * 切换模式
 * @param {Number} val 1:电量模式 2:电费模式
 */
 function switchMode2(val) {
  mode2.value = val

}



/**
 * 全选事件
 */
function siteAllChange(){
  if(selectAll.value[0]){
    siteSelectArray.value = [1,2,3,4]
  }else{
    siteSelectArray.value = []
  }
}

/**
 * 站点列表点击事件
 * @param val 
 */
function siteClick(val){
  if(siteSelectArray.value.length == siteList.value.length){
    selectAll.value = [1]
    console.log(selectAll.value)
  }else{
    selectAll.value = []
  }
}

</script>
<style lang="scss" scoped>
.electricityFeeAnalysis{
  background: none !important;
  padding:0 !important;
}
.search{
  .switch{
    text-align: center;
    margin-right:16px;
    padding:6px 8px;
    background: #fff;
    color:rgba(0,0,0,0.65);
    border: 1px solid #d9d9d9;
    display: inline-block;
    cursor: pointer;
  }
  .active{
    background: #6c7fff;
    color:#fff;
  }
  .date{
    display: inline-block;
    margin-right:16px;
    >span{
      vertical-align: middle;
      display: inline-block;
      margin-top:-5px;
    }
    >div:first-child{
      width:60px;
    }
    >div:last-child{
      width:calc(100% - 70px);
    }
  }
}
.content{
  margin-top:16px;
  background: #fff;
  .chart{
    .top{
        background: #fafafa;
        padding:8px;
        img{
          width:20px;
        }
        img,span{
          display: inline-block;
          vertical-align: middle;
        }
        span{
          font-size: 16px;
          margin-left:10px;
        }
      }
  }
  .table{
    padding:10px;
  }
}
</style>