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

<template>
  <div class="app-container fsyd">
    <div class="item">
      <div class="left">
        <div class="top">
          <el-row>
            <el-col :span="24">标签：<span>支路</span></el-col>
            <el-col :span="24">
              <div>电--支路 名称</div>
              <div class="right">
                <el-checkbox-group v-model="selectAll" style="margin-top: -10px;" @change="siteAllChange">
                  <el-checkbox :label="1" size="large" >全选</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="bottom">
          <el-checkbox-group v-model="siteSelectArray">
            <el-checkbox :label="item.value" size="large" v-for="item in siteList" :key="item.value" style="display: block;position: relative; " @change="siteClick">
              <div style="top:0px !important;position: absolute;">
                <img src="@/assets/images/site.png" alt="" style="width:15px;margin-right:8px;vertical-align: top;">{{ item.label }}
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <span>日期：</span>
          <el-date-picker
            v-model="time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            unlink-panels
          />
          <el-button type="primary" :icon="Search" style="margin-left:10px;">查询</el-button>
          <el-button type="warning" :icon="Bottom">导出</el-button>
          <div class="right">
            <div class="modeSwitching pob">
              <div @click="switchMode(1)" :class="{ active: mode == 1 }">
                表格
              </div>
              <div @click="switchMode(2)" :class="{ active: mode == 2 }">
                图表
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <tableD :data="tableData"  v-if="mode == 1" style="padding:10px;"/>
          <div v-if="mode == 2">
            <div class="echartWrap">
              <div class="top">
                <img src="@/assets/images/logo1.png" alt="">
                <span>告警处理统计</span>
              </div>
              <div class="pie"><pie :data="pieData1" /></div>
              <div class="pie"><pie :data="pieData2" /></div>
              <div class="right" style="padding:20px 10px;">
                <div class="modeSwitching">
                  <div @click="switchMode2(1)" :class="{ active2: mode2 == 1 }">
                    电量
                  </div>
                  <div @click="switchMode2(2)" :class="{ active2: mode2 == 2 }">
                    电费
                  </div>
                </div>
                <div class="chart">
                  <chart :data="chartData1" v-if="mode2 == 1"/>
                  <chart :data="chartData2" v-if="mode2 == 2"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref,onMounted } from "vue";
import tableD from "./components/tableD";
import chart from "./components/chart";
import pie from "@/views/starMarkingEquipment/components/pie";
onMounted(() => {
  init()
})
const selectAll = ref([]) //站点全选
const siteSelectArray = ref([]) //站点选中列表
const siteList = ref([
  { label:"站点1", value :1},
  { label:"站点2", value :2},
  { label:"站点3", value :3},
  { label:"站点4", value :4},
]) //站点列表
//初始化

const mode = ref(2) //模式 1:列表模式 2:模式图表
const mode2 = ref(1) //模式 1:电量模式 2:电费模式
const time = ref()


const tableData = ref([
  { a: 1000 },
  { a: 1000 },
]) //列表数据
const pieData1 = ref({
  data:[
    { value: 1048, name: '尖', unit:"kWh" },
    { value: 735, name: '峰', unit:"kWh" },
    { value: 580, name: '平', unit:"kWh" },
    { value: 484, name: '谷', unit:"kWh" }
  ],
  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
  type:"4"
}) //饼图数据
const pieData2 = ref({
  data:[
    { value: 48, name: '尖', unit:"元" },
    { value: 75, name: '峰', unit:"元" },
    { value: 580, name: '平', unit:"元" },
    { value: 484, name: '谷', unit:"元" }
  ],
  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
  type:"4"
}) //饼图数据

const chartData1 = ref({
  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
  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],
    [11,8,33,22,11,66,22,8,13,8,46,16],
    [50,51,15,20,45,35,35,40,45,20,15,6]
  ],
  unit:"kWh",
  title:"每日电量趋势"
})
const chartData2 = ref({
  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
  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],
    [11,8,33,22,11,66,22,8,13,8,46,16],
    [50,51,15,20,45,35,35,40,45,20,15,6]
  ],
  unit:"kWh",
  title:"每日电费趋势"
})

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>
.fsyd{
  height:100%;
  background: #F2F3F8;
  padding:0 !important;
  .item{
    >div{
      padding:10px;
      display: inline-block;
      vertical-align: top;
    }
    .left{
      width:20%;
      height:100%;
      margin-right:10px;
      font-size: 14px;
      background: #fff;
      border-radius: 4px;
      .top{
        padding-bottom:10px;
        border-bottom:1px solid #eee;
        .el-row{
          .el-col{
            margin-top:10px;
          }
          .el-col:nth-child(1){
            color:#333;
            span{
              padding:5px;
              font-size:12px;
              color:#fff;
              background:#48A4FF;
            }
          }
          .el-col:nth-child(2){
            >div{
              width:50%;
              height:20px;
              display: inline-block;
            }
            >div:nth-child(2){
              text-align: right;
            }
          }
        }
  
      }
      .bottom{
        padding:20px;
      }
    }
    >.right{
      width:calc(80% - 10px);
      .top{
        margin-top:-10px;
        font-size: 12px;
      }
      .comtent{
        height:calc(100% - 50px);
        background: #fff;
      }
    }
    .content{
     margin-top:20px;
     background: #fff;
     border-radius: 4px;
     .echartWrap{
      .pie{
        width:50%;
        display: inline-block;
      }
      .chart{
        width:100%;
      }
     }
     .top{
        background: #fafafa;
        padding:8px;
        img{
          width:25px;
        }
        img,span{
          display: inline-block;
          vertical-align: middle;
        }
        span{
          font-size: 16px;
          margin-left:10px;
        }
     }
    }
  }
}
.pob{
  position: absolute;
  z-index: 1;
  top:20px;
  right:20px;
  background: #fff !important;
}
.modeSwitching{
  width:116px;
  height:32px;
  display: flex;
  border-radius: 2px;
  background: #F2F3F8;
  cursor: pointer;
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
  >div{
    padding:8px 15px;
    display: inline-block;
    background: none;
    text-align: center;
    font-size: 14px;
    color:#333;
  }
  .active{
    background: #48A4FF;
    color:#fff;
  }
  .active2{
    background: #48A4FF;
    color:#fff;
  }
}
</style>