hitch-sb-antd/src/views/statisticView/DayStatistics.vue

<template>
  <div class="view-container">
    <div class="title"><span>时代思康用电量日报</span></div>
    <div class="content">
      <div class="history">
        <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
        <div class="history-title">
          <div>
            <a-date-picker
              v-model="time"
              :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
              @change="onDateChange"
              @ok="onOk">
              <span class="date">
                <a-icon type="calendar" theme="filled" />
              </span>
            </a-date-picker>
            {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
          </div>
        </div>
        <div class="body">
          <table>
            <thead>
              <tr >
                <th rowspan="2" class="list-header" style="color:#fff">时间</th>
                <th colspan="2" class="list-header" style="color:#fff" v-for="i in 6" :key="i"> 1G0{{ i }}时代思康{{ i }}回</th>
              </tr>
              <tr>
                <template v-for="i in 6 ">
                  <th class="list-header" style="color:#fff">正向有功(kwh)</th>
                  <th class="list-header" style="color:#fff">正向无功(kwh)</th>
                </template>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in 24" :key="i">
                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + ':00' }}</td>
                <template v-for="i in 6 ">
                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
                </template>
              </tr>
              <tr>
                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">日用电总</td>
                <template v-for="i in 6 ">
                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00*24 }}</td>
                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;"></td>
                </template>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      time: '',
      dateVisual: true,
      details: [{ 'title': '状态', 'value': '开机' }, { 'title': '总电压', 'value': '220V' },
        { 'title': '电流', 'value': '30A' }, { 'title': '总能耗', 'value': '3256kwh' },
        { 'title': '日能耗', 'value': '300kwh' }, { 'title': '月能耗', 'value': '300kwh' },
        { 'title': '温度', 'value': '56度' }, { 'title': '预警次数', 'value': '10次' }]
    }
  },
  methods: {
    onDateChange (value, dateString) {
      this.dateVisual = true
    },
    onMonthChange (value, dateString) {
      this.dateVisual = false
    },
    onOk (value) {
      console.log('onOk: ', value)
    }
  }
}
</script>

<style lang="less" scoped>
.view-container {
width:1920px;
height:1080px;
font-family: PingFang SC;
padding: 15px 37px;
&::after {
  content: "";
  width:1920px;
  height:1080px;
  background: url(../../assets/bgView/TransformerDetail.png);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
}
.title{
  display: flex;
  justify-content: center;
  width: 600px;
  margin:0 auto;
  font-size: 42px;
  font-weight: bold;
  text-shadow: 0px 2px 4px rgba(4,0,0,0.3);
  background: linear-gradient(0deg, #BCBCBC 1.123046875%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content{
  display: flex;
  justify-content: space-between;
}
.info{
  color:#5ACCF8;
  width: 766px;
   height:950px;
   position: relative;
   border: 2px solid #045693;
   padding:30px;
   margin-top:30px;
   .sb-proportion-info{
   position: relative;
display: flex;
flex-direction:column;
align-items: center;
justify-content:center;
position: relative;
// width: 141px;
height: 150px;
background: rgba(0, 186, 255, 0.1);
   }
}
.history{
  color:#A8E6F3 ;
  width: 100%;
   height:950px;
   position: relative;
   border: 2px solid #045693;
   padding:0 30px;
   margin-top:28px;
   .history-title{
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    font-weight: bold;
    margin:18px 0;
    color: #fff;
    .month{
      color:#01D4F9;
      font-size:40px;
      position: relative;
      &::before{
        content:'月';
        color:#fff;
        font-size:16px;
        top: 23px;
        left: 12px;
        bottom: 0;
        right: 0;
        position: absolute;
      }
    }
    .date{
      color:#01D4F9;
      font-size:40px;
      position: relative;
      &::before{
        content:'日';
        color:#fff;
        font-size:16px;
        top: 23px;
        left: 12px;
        bottom: 0;
        right: 0;
        position: absolute;
      }
    }
   }

   table{
    width: 100%;
        margin: 0 auto;
        border: 1px solid #01D4F9;
        border-collapse: collapse;
        th,
    td {
        border: 1px solid #01D4F9;
    }
   }
   .list-header{
     padding: 0;
      width: 180px;
height: 30px;
line-height:30px;
font-size: 16px;
font-weight: bold;
margin: 10px;

font-family: Microsoft YaHei;
background: rgba(2, 205, 255, 0);
box-shadow: 0px 0px 40px 0px rgba(0, 122, 162, 0.8) inset;
text-align: center;
   }
}
.top-left{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    top: -6px;
    left: -6px;
  }
  .bottom-left{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    bottom: -6px;
    left: -6px;
  }
  .top-right{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    top: -6px;
    right: -6px;
  }
  .bottom-right {
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    bottom: -6px;
    right: -6px;
  }
    .top-left-two{
    width: 15px;
    height: 15px;
    display: block;
    border-top: 2px solid #02E8FF;
    border-left: 2px solid #02E8FF;
    position: absolute;
    top: -2px;
    left: -2px;
  }
  .bottom-left-two{
    width: 15px;
    height: 15px;
    display: block;
    border-bottom: 2px solid #02E8FF;
    border-left: 2px solid #02E8FF;
    position: absolute;
    bottom: -2px;;
    left: -2px;;
  }
  .top-right-two{
     width: 15px;
    height: 15px;
    display: block;
    border-top: 2px solid #02E8FF;
    border-right: 2px solid #02E8FF;
    position: absolute;
    top: -2px;;
    right: -2px;;
  }
  .bottom-right-two {
     width: 15px;
    height: 15px;
    display: block;
   border-bottom: 2px solid #02E8FF;
    border-right: 2px solid #02E8FF;
    position: absolute;
    bottom: -2px;;
    right: -2px;;
  }
  ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

</style>