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

<template>
  <div class="view-container">
    <div class="date">
      <span>{{ date }}</span>
      <!-- 天气： 晴 -->
    </div>
    <div class="dateStatistics">
      <div @click="handleDayView">日统计</div>&nbsp;&nbsp;
      <div @click="handleMonthView">月统计</div>
    </div>
    <div class="adress">
      <div :class="current===1?'address-opt':''" @click="getDatas(1)">一路</div>
      <div :class="current===2?'address-opt':''" @click="getDatas(2)">二路</div>
      <div :class="current===3?'address-opt':''" @click="getDatas(3)">三路</div>
      <div :class="current===4?'address-opt':''" @click="getDatas(4)">四路</div>
      <div :class="current===5?'address-opt':''" @click="getDatas(5)">五路</div>
      <div :class="current===6?'address-opt':''" @click="getDatas(6)">六路</div>
    </div>
    <div class="sb">
      <a-row type="flex" justify="space-between" :gutter="[20,20]">
        <!--        <a-col :span="6">
          <div class="sb-info">
            <div class="sb-info-title">
              <span>{{ dataInfo.lineName }}</span>
            </div>
            <div class="sb-info-content">
              <div>
                <div style="display:flex;width:170px;align-items: center;padding: 15px 0;">
                  <div class="tixing1">
                    电压
                  </div>
                &nbsp;&nbsp;&nbsp;
                  <div class="sb-proportion-info">
                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                    <div style="font-size: 14px;color: #BDD4FF;">
                      1130
                    </div>
                  </div>&nbsp;
                  V
                </div>
                <div style="display:flex;width:170px;align-items: center;padding: 15px 0;">
                  <div class="tixing2">
                    电流
                  </div>
                &nbsp;&nbsp;&nbsp;
                  <div class="sb-proportion-info">
                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                    <div style="font-size: 14px;color: #BDD4FF;">
                      1130
                    </div>
                  </div>&nbsp;
                  A
                </div>
              </div>
              <div>
                <div style="display:flex;width:175px;align-items: center;padding: 15px 0;">
                  <div class="tixing1">
                    有功电度
                  </div>
                &nbsp;&nbsp;&nbsp;
                  <div class="sb-proportion-info">
                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                    <div style="font-size: 14px;color: #BDD4FF;">
                      1130
                    </div>
                  </div>&nbsp;
                  W
                </div>
                <div style="display:flex;width:175px;align-items: center;padding: 15px 0;">
                  <div class="tixing2">
                    无功电度
                  </div>
                &nbsp;&nbsp;&nbsp;
                  <div class="sb-proportion-info">
                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                    <div style="font-size: 14px;color: #BDD4FF;">
                      1130
                    </div>
                  </div>&nbsp;
                  W
                </div>
              </div>
            </div>
          </div>
        </a-col>-->
        <!-- <a-col :span="6" v-for="item in 7" :key="item" @click="handleView">
          <div class="sb-info">
            <div class="sb-info-title">
              <span>2G04</span>
              <span>10KV联合动力2#变压器</span>
            </div>
            <div class="sb-info-content">
              <div>高压</div>
              <div class="arrow">
                <div>
                  <div>电压：32V</div>
                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(40, 233, 108, 1)">
                  <div>电流：32A</div>
                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(255, 216, 0, 1)">
                  <div>有功电度：34V</div>
                  <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(248, 161, 161, 1)">
                  <div>温度：3℃</div>
                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
                </div>
              </div>
              <div><img src="../../assets/bgView/bianyaqi.png" width="87px" height="50px" alt=""></div>
              <div class="arrow">
                <div>
                  <div>电压：32V</div>
                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(40, 233, 108, 1)">
                  <div>电压：32V</div>
                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
                </div>
              </div>
              <div>低压</div>
            </div>
          </div>
        </a-col> -->
        <a-col :span="6" v-for="(item,i) in dataInfo.dataList" :key="i" @click="handleView(item)">
          <div class="sb-info">
            <div class="sb-info-title">
              <!-- <span>2G06</span> -->
              <span>{{ item.sbName }}</span>
            </div>
            <div class="sb-info-content">
              <div>高压</div>
              <div class="arrow">
                <div>
                  <div>Ua(KV)：{{ item.dianya }}</div>
                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(40, 233, 108, 1)">
                  <div>Ia(A)：{{ item.dianliu }}</div>
                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
                </div>
                <!--                <div style="color:rgba(255, 216, 0, 1)">
                  <div>有功电度：{{ item.yggl }}kW</div>
                  <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
                </div>-->
                <div v-if="item.wendu" style="color:rgba(255, 216, 0, 1)">
                  <div>温度：{{ item.wendu }}℃</div>
                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
                </div>
              </div>
              <div v-if="item.imgType === 1"><img src="../../assets/bgView/dianrong.png" width="153px" height="100px" alt=""></div>
              <div v-if="item.imgType === 2"><img src="../../assets/bgView/dianji.png" width="153px" height="100px" alt=""></div>
              <div v-if="item.imgType === 3"><img src="../../assets/bgView/bianyaqi.png" width="153px" height="100px" alt=""></div>
              <div v-if="item.imgType === 4"><img src="../../assets/bgView/img.png" width="153px" height="100px" alt=""></div>
            </div>
          </div>
        </a-col>
        <!-- <a-col :span="6" v-for="item in 4" :key="item">
          <div class="sb-info">
            <div class="sb-info-title">
              <span>2G06</span>
              <span>10KV联合动力2#电压器</span>
            </div>
            <div class="sb-info-content">
              <div>高压</div>
              <div class="arrow">
                <div>
                  <div>电压：32V</div>
                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(40, 233, 108, 1)">
                  <div>电流：32A</div>
                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(255, 216, 0, 1)">
                  <div>有功电度：34V</div>
                  <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
                </div>
                <div style="color:rgba(255, 216, 0, 1)">
                  <div>温度：3℃</div>
                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
                </div>
              </div>
              <div><img src="../../assets/bgView/shebei.png" width="153px" height="100px" alt=""></div>
            </div>
          </div>
        </a-col> -->
      </a-row>
    </div>
    <DetailModel ref="detailModel" @ok="handleOk"/>
  </div>
</template>

<script>
import { getMeasureByLine } from '@/api/big/screen'
import DetailModel from './modules/DetailModel'
export default {
  components: {
    DetailModel
  },
  data () {
    return {
      date: null,
      current: 1,
      dataInfo: {},
      time: null
    }
  },
  created () {
    this.timer1 = setInterval(() => {
      this.getDatas(this.current)
    }, 5000)
    this.timer2 = setInterval(() => {
      this.date = this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN_CHINESE)
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer1) {
      clearInterval(this.timer1)
    }
    if (this.timer2) {
      clearInterval(this.timer2)
    }
  },
  methods: {
    getDatas (lineNum) {
      this.current = lineNum
      getMeasureByLine({ lineNum: lineNum }).then(res => {
        this.dataInfo = res.data
        this.dataInfo.dataList.forEach(item => {
          // 截取名称字符串，去掉威胜多功能表
          item.sbName = item.sbName.replace('威胜多功能表', '')
          const dianya = item.measureList.find(li => li.type === 5)
          const dianliu = item.measureList.find(li => li.type === 1)
          const yggl = item.measureList.find(li => li.type === 12)
          item.dianya = dianya == null ? '##' : dianya.result
          item.dianliu = dianya == null ? '##' : dianliu.result
          item.yggl = dianya == null ? '##' : yggl.result
          item.wendu = item.measureList.find(li => li.type === 16) ? item.measureList.find(li => li.type === 16).result : null
        })
      })
    },
    handleView (item) {
      // const a = document.createElement('a')
      // a.href = '/TransformerDetailBigScreen'
      // a.target = '_blank'
      // a.click()
      this.$refs.detailModel.base(item.measureList)
    },
    handleDayView () {
      const a = document.createElement('a')
      a.href = '/DayStatistics'
      a.target = '_blank'
      a.click()
    },
    handleMonthView () {
      const a = document.createElement('a')
      a.target = '_blank'
      a.href = '/MonthStatistics'
      a.click()
    },
    handleOk () {

    }
  }
}
</script>
<style lang="less" scoped>
.view-container {
width:1920px;
height:1080px;
font-family: PingFang SC;
padding: 80px 67px;
&::after {
  content: "";
  width:1920px;
  height:1080px;
  background: url(../../assets/bgView/SwitchingRoomBG.png);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
}
.dateStatistics{
  width: 300px;
  color: #FFFFFF;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top:58px;
  right:96px;
  div {
    width: 173px;
    height: 58px;
    line-height: 50px;
    text-align: center;
    border: 2px solid #0089D8;
    border-radius: 9px;
    &:hover{
      cursor: pointer;
    }
  }
}
.date{
  width: 300px;
  color: #FFFFFF;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top:58px;
  left:96px;
}
.adress{
  width: 1000px;
  margin: 20px auto;
  font-size: 30px;
  font-weight: bold;
  color: #FFFFFF;
  display:flex;
  justify-content: space-between;
  div {
    width: 173px;
    height: 58px;
    line-height: 50px;
    text-align: center;
    border: 2px solid #0089D8;
    border-radius: 9px;
    &:hover{
      cursor: pointer;
    }
  }
  .address-opt {
    box-shadow: 0px 0px 40px 0px rgba(0, 137, 216, 0.8) inset;
    color:#28E96C;
  }
}
.sb{
  color:#fff;
  margin-top: 30px;
}
.sb-info{
  width: 424px;
  height:185px;
  background: url(../../assets/bgView/sbInfoBg.png) no-repeat;
  position: relative;
  .sb-info-title{
    // width: 208px;
    font-size: 13px;
    font-weight: bold;
    color: RGBA(192, 231, 247, 1);
    display: flex;
    justify-content:space-between;
    position: absolute;
    top:16px;
    left:18px;
    &::before{
      content: '';
      width: 5px;
      height: 10px;
      background: #5ACCF8;
      position: absolute;
      top:5px;
      left:2px;
    }
    span:first-child{
      color:#5ACCF8;
      padding-left:10px;
      overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    }
  }
  .sb-info-content{
    display: flex;
    justify-content: space-around;
    align-items:center;
    font-size: 14px;
    font-weight: 500;
    color: #5ACCF8;
    padding: 44px 10px 10px 7px;
    .arrow{
      font-size:12px;
      transform:scale(.8);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

.sb-proportion-info{
   position: relative;
   width: 66px;
   height: 30px;
   text-align: center;
   font-size:12px;
   line-height: 32px;
   background: rgba(0, 186, 255, 0.1);
}
.top-left-two{
    width: 5px;
    height: 5px;
    display: block;
    border-top: 1px solid #02E8FF;
    border-left: 1px solid #02E8FF;
    position: absolute;
    top: -1px;
    left: -1px;
  }
  .bottom-left-two{
    width: 5px;
    height: 5px;
    display: block;
    border-bottom: 1px solid #02E8FF;
    border-left: 1px solid #02E8FF;
    position: absolute;
    bottom: -1px;;
    left: -1px;;
  }
  .top-right-two{
     width: 5px;
    height: 5px;
    display: block;
    border-top: 1px solid #02E8FF;
    border-right: 1px solid #02E8FF;
    position: absolute;
    top: -1px;;
    right: -1px;;
  }
  .bottom-right-two {
     width: 5px;
    height: 5px;
    display: block;
   border-bottom: 1px solid #02E8FF;
    border-right: 1px solid #02E8FF;
    position: absolute;
    bottom: -1px;;
    right: -1px;;
  }
.tixing1 {
    line-height: 30px;
    text-align: center;
    width: 72px;
    height: 30px;
    font-size:12px;
    background: #00E4FF;
    position: relative;
    z-index: 9;
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 80% 100%, 0% 100%);
    &::after{
      content:"";
      position: absolute;
      left: 1px;
      top:1px;
      width: 70px;
      height: 28px;
      z-index: -9;
      background: #13154c;
      clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 80% 100%, 0% 100%);
    }
}

.tixing2 {
    line-height: 30px;
    text-align: center;
    width: 72px;
    height: 30px;
    font-size:12px;
    background: #00E4FF;
    position: relative;
    z-index: 9;
    clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 100% 100%, 0% 100%);
    &::after{
      content:"";
      position: absolute;
      left: 1px;
      top:1px;
      width: 70px;
      height: 28px;
      z-index: -9;
      background: #13154c;
      clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 100% 100%, 0% 100%);
    }
}
</style>