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

<template>
  <div class="app-container bulletinBoard" style="background: #f0f2f5 !important;height:90vw">
      <div class="height100 component1" style="margin-left:10px;">
        <div class="type type1">
          <p class="color1">上海永天科技</p>
          <img src="@/assets/images/logo1.png" alt="">
          <p class="desc">站点名称</p>
        </div>
      </div>
      <div class="height100 component2">
        <div class="left">
          <p class="color2">0.98  <span>/0.88</span></p>
        </div>
        <div class="right">
          <p class="">平均功率因数</p>
          <p class="">2025年7月2日 起</p>
        </div>
      </div>
      <div class="height100 component1">
        <div class="type type1">
          <p class="color3">1023</p>
          <img src="@/assets/images/logo1.png" alt="">
          <p class="desc">运行天数</p>
        </div>
      </div>
      <div class="height100 component3" >
        <div class="type">
          <img src="@/assets/images/logo1.png" alt="">
          <div class="title color5">告警</div>
          <p class="desc3">平均功率因数</p>
        </div>
      </div>
      <div class="height100 component3">
        <div class="type">
          <img src="@/assets/images/logo1.png" alt="">
          <div class="title color1">在线</div>
          <p class="desc3">站点通讯状态</p>
        </div>
      </div>
      <div class="height100 component3">
        <div class="type">
          <img src="@/assets/images/logo1.png" alt="">
          <div class="title color1">正常</div>
          <p class="desc3">站点故障状态</p>
        </div>
      </div>
        <div class="height190 component4" style="margin-left:8px;">
            <div class="top">
              <p>今日用电<span>（kWh）</span></p>
              <img src="@/assets/images/day/31.png" alt="">
            </div>
            <div class="middle">
              1968
            </div>
            <div class="bottom">
              <p>昨日同期<span>2775</span></p>
              <p><span>28.32%</span><span></span></p>
            </div>
        </div>
        <div class="height190 component4" style="display: inline-block;">
          <div class="top">
            <p>本月用电<span>（kWh）</span></p>
            <img src="@/assets/images/month/7.png" alt="">
          </div>
          <div class="middle">
            247605
          </div>
          <div class="bottom">
            <p>上月同期<span>1322913</span></p>
            <p><span>28.32%</span><span></span></p>
          </div>
        </div>
      <div class="height190 component5 echarts" style="margin-top:-185px;width:62%;">
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>今日用电趋势</span>
        </div>
        <chart :data="ydqs"/>
      </div>
      <div class="height190 component6 echarts" style="margin-top:-185px;height:380px;">
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>告警处理统计</span>
        </div>
        <pie :data="alarm"/>
      </div>
      <div class="height190 component7 echarts" style="margin-left:10px;" >
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>支路用能占比</span>
        </div>
        <div class="time">
          <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">月</div>
          <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">年</div>
        </div>
        <pie :data="zlydzb"/>
      </div>
      <div class="height190 component7 echarts" style="height:375px;width:28.3%;">
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>事件告警列表</span>
        </div>
        <tableD :data="eventList"/>
      </div>
      <div class="height190 component5 echarts" style="height:375px !important;width:calc(50% - 23px)">
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>有功功率</span>
        </div>
        <chart :data="ydqs"/>
      </div>
      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>有功功率同比分析</span>
        </div>
        <chart :data="ydqs"/>
      </div>
      <div class="height190 component5 echarts" style="width:calc(50% - 23px)">
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>功率因数</span>
        </div>
        <chart :data="ydqs"/>
      </div>
      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
        <div class="top">
          <img src="@/assets/images/logo1.png" alt="">
          <span>环境温湿度</span>
        </div>
        <chart :data="ydqs"/>
      </div>
  </div>
</template>

<script setup>
import chart from './components/chart'
import pie from './components/pie'
import tableD from './components/tableD'
import { ref } from 'vue'

//用电趋势
const ydqs = 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:""
})
//告警统计
const alarm = ref({
  data:[
    {name: '未确认', value: 3},
    {name: '已确认', value: 3 },
  ],
  color:["red","#10aaeb"],
  type:"1"
})
//支路用电占比
const zlydzb = ref({
  data:[
    {name: '路灯照明', value: 3},
    {name: '站内用电', value: 4 },
    {name: '站外用电', value: 5 },
  ],
  color:["red","#10aaeb","#FF691C"],
  type:"2"
})
const dateType = ref(1)


//事件告警列表
const eventList = ref([
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"0" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
])

function dateSwitch(type){
  dateType.value = type
}
</script>

<style lang="scss" scoped>
.bulletinBoard{
  padding:0;
  .height100{
    height:100px;
    margin-top:10px;
    margin-right:10px;
    border-radius: 6px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    .type{
      padding:10px 8px;
    }
    .type1{
      img{
        position: absolute;
        right:8px;;
        top:25px;
      }
      p:nth-child(1){
        font-size: 24px;
      }
      
      .desc{
        position: absolute;
        bottom:-5px;
        color:#fff;
      }
      .desc2{
        position: absolute;
        bottom:15px;
      }
      .time{
        position: absolute;
        bottom:-5px;
        font-size: 12px;
        color:#333;
      }
    }
  }
  .component1{
    width:24.3%;
    background: linear-gradient(to right bottom, rgb(56, 148, 190), rgb(80, 227, 194));
  }
  .component2{
    width:24.3%;
    background:linear-gradient(to right bottom, rgb(27, 40, 52), rgb(27, 40, 52));
    >div{
      width:50%;
      display: inline-block;
    }
    .left{
      font-size: 40px;
      color:rgb(80, 227, 194);
      text-align: center;
      vertical-align: middle;
      margin-top:25px;
      span{
        font-size: 14px;
        color:rgb(126, 147, 166);
        vertical-align: top;
        margin-top:10px;
        display: inline-block;
      }
    }
    .right{
      color:rgb(126, 147, 166);

      vertical-align: middle;

    }
  }
  .component3{
    width:7.5%;
    background: #fff;
    text-align: center;
    .title{
      font-weight: 600;
      margin:6px 0;
    }
    
  }
  .height100:last-child{
    margin-right:0;
  }
  .component4{
    width:15%;
    height:185px;
    margin-top:10px;
    margin-right:10px;
    margin-left:10px;
    background: #fff;
    // display: inline-block;
    >div{
      height: 50px;
    }
    .top{
      position: relative;
      padding:15px;
      p{
        font-size: 20px;
        span{
          font-size: 12px;
        }
      }
      img{
        position: absolute;
        width:40px;
        top:15px;
        right:15px;
      }
    }
    .middle{
      font-size:34px;
      color:#10aaeb;
      padding:15px 15px 40px 15px;
      border-bottom:2px solid #eee;
    }
    .bottom{
      padding:15px;
      color:rgba(0,0,0,0.65);
      p:nth-child(1){
        span:nth-child(1){
          margin-left:10px;
        }
      }
      p:nth-child(2){
        span{
          vertical-align: middle;
        }
        span:nth-child(1){
          color:#1BCCC1;
        }
        span:nth-child(2){
          margin-left:10px;
          margin-top:-4px;
          display: inline-block;
        }
        span:nth-child(2)::after{
          display: inline-block;
          content: ""; /* 伪元素不包含内容 */
          width: 0; /* 必须设置为0，因为我们不显示宽度 */
          height: 0; /* 必须设置为0，因为我们不显示高度 */
          margin-left: -5px; /* 根据需要调整，这里是让箭头中心对齐 */
          margin-top:-10px;
          border-left: 5px solid transparent; /* 左边框透明 */
          border-right: 5px solid transparent; /* 右边框透明 */
          border-top: 5px solid #08b762; /* 上边框是三角形的颜色 */
        }
      }
    }
  }
  .component5{
    width:49%;
    height:380px !important;
    display: inline-block;
    vertical-align: top;
  }
  .component6{
    width:20%;
  }
  .component7{
    width:20%;
    .time{
      margin:6px;
      .switch{
        width:40px;
        height:30px;
        line-height: 26px;
        text-align: center;
        margin-right:6px;
        padding:2px;
        color:rgba(0,0,0,0.65);
        border: 1px solid #ccc;
        display: inline-block;
        cursor: pointer;
      }
      .active{
        background: #6c7fff;
        color:#fff;
      }
    }
  }
}
.echarts{
  margin-top:10px;
  margin-right:10px;
  display: inline-block;
  vertical-align: top;
  border-top:solid 1px #1890ff;
  background: #fff;
  .top{
      background: #fafafa;
      padding:8px;
      img{
        width:25px;
      }
      img,span{
        display: inline-block;
        vertical-align: middle;
      }
      span{
        font-size: 16px;
        margin-left:10px;
      }
    }
}
.color1{
  color:#1BCCC1;
}
.color2{
  color:#FF691C ;
}
.color3{
  color:#8942F5 ;
}
.color4{
  color:#FF397F ;
  span{
    color:#333;
    margin-left:10px;
  }
}
.color5{
  color:red
}
</style>