界面改版 整合提交

whychw

2020-12-04 6557cf808e99a7c58f19f964c36f932a315d4432

 src/views/loadManager/manualload.vue

@@ -2,69 +2,76 @@
  <div class="main">
    <!-- <div class="title vertical_middle">负载柜手动加载画面</div> -->
    <div class="flex_contain">
      <div class="item" v-for="(item, index) in list" :key="index">
        <!-- 主开关 -->
        <div class="btn_main">
          <div class="lay_label vertical_middle">{{item.dev_name}}</div>
          <div class="lay_content vertical_middle">
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">全部分闸</div>
            <div class="btn_3d btn_export" @click="exportData(item)">数据导出</div>
      <div class="item border-angle" v-for="(item, index) in list" :key="index">
        <div class="item-inner">
          <!-- 主开关 -->
          <div class="btn_main">
            <div class="lay_label vertical_middle">{{item.dev_name}}</div>
            <div class="lay_content vertical_middle">
              <div class="btn" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">全部分闸</div>
              <div class="btn btn_export" @click="exportData(item)">数据导出</div>
            </div>
          </div>
        </div>
       <!-- 是否允许合闸 -->
        <div class="info_voltage">
          <div class="lay_label vertical_middle">
            是否允许合闸
                 <!-- 是否允许合闸 -->
          <div class="info_voltage">
            <div class="lay_label vertical_middle">
              是否允许合闸
            </div>
            <div class="lay_content vertical_middle">
              <div class="indicator" :class="{'status_off': !item.allow_close, 'status_normal': item.allow_close}"></div>
            </div>
          </div>
          <div class="lay_content vertical_middle">
            <div class="nowrap_indicator" :class="{'status_off': !item.allow_close, 'status_normal': item.allow_close}"></div>
                 <!-- 电压 -->
          <div class="info_voltage">
            <div class="lay_label vertical_middle">
              电压
            </div>
            <div class="lay_content txt_strong vertical_middle">
              {{item.actual_mov}} V
            </div>
          </div>
        </div>
       <!-- 电压 -->
        <div class="info_voltage">
          <div class="lay_label vertical_middle">
            电压
          <!-- 电流 -->
          <div class="info_electricity">
            <div class="lay_label vertical_middle">
              电流
            </div>
            <div class="lay_content txt_strong vertical_middle">
              {{item.actual_curr}} A
            </div>
          </div>
          <div class="lay_content vertical_middle">
            {{item.actual_mov}} V
          <!-- 已输出功率 -->
          <div class="info_power">
            <div class="lay_label bdb vertical_middle">
              已输出功率
            </div>
            <div class="lay_content txt_strong vertical_middle">
              {{item.output_power}} kVA
            </div>
          </div>
        </div>
        <!-- 电流 -->
        <div class="info_electricity">
          <div class="lay_label vertical_middle">
            电流
          </div>
          <div class="lay_content vertical_middle">
            {{item.actual_curr}} A
          </div>
        </div>
        <!-- 已输出功率 -->
        <div class="info_power">
          <div class="lay_label vertical_middle">
            已输出功率
          </div>
          <div class="lay_content vertical_middle">
            {{item.output_power}} kVA
          </div>
        </div>
        <!-- 状态 -->
        <div class="btn_sub_grp">
          <div class="row" v-for="idx of max_button_num" :key="idx">
            <div class="lay_label vertical_middle" v-if="idx <= item.FZ_button_num">KM{{idx}}&nbsp;({{item['FZ_b' +  idx + '_power']}}kVA)</div>
            <div class="lay_label vertical_middle" v-else></div>
            <div class="lay_content">
              <div class="vertical_middle">
                <div class="switch_3D" v-if="idx <= item.FZ_button_num">
                  <span></span>
                  <label class="checkbox">
                    <input type="checkbox" 
                    @click="switch3DHandle(item, idx)"
                    v-model="item['FZ_b' + idx]" value="1" class="control" />
                  </label>
          <!-- 状态 -->
          <div class="btn_sub_grp">
            <div class="row" v-for="idx of max_button_num" :key="idx">
              <div class="lay_label vertical_middle" v-if="idx <= item.FZ_button_num">KM{{idx}}&nbsp;({{item['FZ_b' +  idx + '_power']}}kVA)</div>
              <div class="lay_label vertical_middle" v-else></div>
              <div class="lay_content">
                <div class="vertical_middle">
                  <div class="switch_yc" v-if="idx <= item.FZ_button_num">
                    <label class="checkbox">
                      <input type="checkbox" 
                      @click="switch3DHandle(item, idx)"
                      v-model="item['FZ_b' + idx]" value="1" class="input" />
                      <span class="handle">
                        <span class="active">ON</span>
                        <span class="core"></span>
                        <span class="inactive">OFF</span>
                      </span>
                      <span class="bg"></span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="vertical_middle">
                <div class="indicator" v-if="idx <= item.FZ_button_num" :class="{'status_off': !item['FZ_fw' + idx], 'status_normal': item['FZ_fw' + idx]}"></div>
                <div class="vertical_middle">
                  <div class="indicator" v-if="idx <= item.FZ_button_num" :class="{'status_off': !item['FZ_fw' + idx], 'status_error': item['FZ_fw' + idx]}"></div>
                </div>
              </div>
            </div>
          </div>
@@ -75,10 +82,10 @@
    </div>
    <div class="footer">
      <div class="btn-grp">
        <div class="btn_3d" @click="goTo('/load/main')">主画面</div>
        <div class="btn_3d">手动加载</div>
        <div class="btn_3d" @click="goTo('/load/auto')">自动加载</div>
        <div class="btn_3d" @click="goTo('/load/burst')">突加突卸</div>
        <div class="btn" @click="goTo('/load/main')">主画面</div>
        <div class="btn">手动加载</div>
        <div class="btn" @click="goTo('/load/auto')">自动加载</div>
        <div class="btn" @click="goTo('/load/burst')">突加突卸</div>
      </div>
    </div>
    <!-- 弹窗 -->
@@ -136,12 +143,14 @@

<script>

import FlexLayout from '@/components/FlexLayout'
import ProgressLoad from '@/components/ProgressLoad'

export default {
  name: 'ManualLoad',
  components: {
    ProgressLoad
    ,FlexLayout
  },
  data () {
    return {
@@ -270,6 +279,7 @@
                // 更改 FZ_b 的值 2,0 => false    1 => true
                let reg = /^FZ_b\d+$/;
                Object.keys(data).forEach((val) => {
                      // debugger;
                  if (reg.test(val)) {
                    if (this.checkFzBIgnore(data.dev_id, val)) {
                      // 赋值
@@ -327,7 +337,8 @@
      return flag;
    }
    // KM开关切换
    ,switch3DHandle(item, index) {
    ,switch3DHandle (item, index) {
      console.log('-=-=-=-=-');
      // 根据机柜信息和点击的按钮的编号构造查询条件
      let searchParams = {
        dev_id: item.dev_id,
@@ -361,6 +372,7 @@
          });
          // 删除等待指定的等待按钮
          delete this.FzBList[FzB+item.dev_id];
          // debugger;
          // 加状态 延时轮询 5秒内的查询忽略此条
          this.$set(this.FzBIgnore, FzB+item.dev_id, {time: 5, value: searchParams[FzB] == 1});
        }else {
@@ -539,30 +551,54 @@
  }
  .item {
    flex: auto;
    margin: 10px;
    border: 2px #fff solid;
    margin: 8px;
    /*border: 2px #fff solid;*/
    /*color: #6963bd;*/
    font-size: .16rem;
    background: linear-gradient(0deg, rgba(0, 247, 249, .3) 0, rgba(0, 247, 249, .1) 50%, rgba(0, 247, 249, .3) 100%);
    /*padding: 14px;*/
    position: relative;
  }
  .item-inner {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    bottom: 14px;
    border: 1px #00f7f9 solid;
    display: -webkit-flex;
    display: flex;
    /*color: #6963bd;*/
    flex-direction: column;
    text-align: center;
    font-size: .16rem;
    
  }
  .btn_sub_grp .row:nth-child(2n-1),
  .item-inner > div:nth-child(2n) {
    background: rgba(0, 247, 249, .1);
  }


  .lay_label {
    flex: 1;
    border-right: 1px #fff solid;
    border-right: 1px #00f7f9 solid;
    justify-content: flex-start;
    padding-left: .4em;
  }
  .lay_content {
    flex: 1.6;
  }
  .btn_sub_grp .row,
  .info_power,
  .info_electricity,
  .btn_main,
  .info_voltage,
  .btn_main {
    border-bottom: 1px #fff solid;
  .info_electricity,
  .btn_sub_grp .row,
  .bdb {
    border-bottom: 1px solid #083458;
  }
/*   .btn_sub_grp .row,
.info_electricity,
.info_voltage, */
  .info_power .lay_content {
    border-bottom: 1px #00f7f9 solid;
  }
  .btn_sub_grp .row:last-of-type {
    border: 0 none;
@@ -576,7 +612,7 @@
    flex: 1;
  }
  .btn_sub_grp .row .lay_content > div:first-of-type {
    border-right: 1px #fff solid;
    border-right: 1px #00f7f9 solid;
  }

  .btn_main {
@@ -612,30 +648,10 @@
  }
  .indicator,
  .nowrap_indicator {
    width: 40px;
    height: 40px;
    width: 18px;
    height: 18px;
  }

/*   .nowrap_indicator.status_normal,
.cell_indicator div.status_normal,
.indicator.status_normal {
  background: url(~@/assets/images/light_g.png) 50% 50% / 80% auto no-repeat;
}
.nowrap_indicator.status_warn,
.cell_indicator div.status_warn,
.indicator.status_warn {
  background: url(~@/assets/images/light_y.png) 50% 50% / 80% auto no-repeat;
}
.nowrap_indicator.status_error,
.cell_indicator div.status_error,
.indicator.status_error {
  background: url(~@/assets/images/light_r.png) 50% 50% / 80% auto no-repeat;
}
.nowrap_indicator.status_off,
.cell_indicator div.status_off,
.indicator.status_off {
  background: url(~@/assets/images/light_off.png) 50% 50% / 80% auto no-repeat;
} */
  .footer {
    height: 58px;
    /*background: rgba(0, 0, 0, .3);*/
@@ -652,45 +668,24 @@
    justify-content: space-around;
    padding: 0 18%;
  }


.btn_3d {
  position: relative;
  /*text-decoration: none;*/
  background-color: #25a5c2;
  /*font-family: 'Yanone Kaffeesatz';*/
  font-size: .14rem;
  color: #fff;
  font-weight: 700;
  /*font-size: 3em;*/
  display: block;
  padding: 4px 6px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(0,126,152,1), 0px 9px 25px rgba(0,0,0,.7);
  -moz-box-shadow: 0px 9px 0px rgba(0,126,152,1), 0px 9px 25px rgba(0,0,0,.7);
  box-shadow: 0px 9px 0px rgba(0,126,152,1), 0px 9px 25px rgba(0,0,0,.7);
  /*margin: 100px auto;*/
  /*width: 160px;*/
.btn {
  display: inline-block;
  background: #f69f41;
  color: #041b3f;
  width: 6em;
  height: 30px;
  line-height: 30px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.footer .btn-grp .btn {
  height: 40px;
  line-height: 40px;
  text-align: center;
  
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
  top: -4px;
}
.btn_3d:active {
  -webkit-box-shadow: 0px 3px 0px rgba(0,126,152,1), 0px 3px 6px rgba(0,0,0,.9);
  -moz-box-shadow: 0px 3px 0px rgba(0,126,152,1), 0px 3px 6px rgba(0,0,0,.9);
  box-shadow: 0px 3px 0px rgba(0,126,152,1), 0px 3px 6px rgba(0,0,0,.9);
  position: relative;
  top: 2px;
}
.footer .btn-grp .btn_3d {
  padding: 6px 16px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #90ed7d;
  color: #041b3f;
}
.dialog_content {
  color: #333;
@@ -701,164 +696,11 @@
  text-align: right;
}

  /*3d switch*/
.switch_3D {
  height: 30px;
  width: 64px;
  position: relative;
  /*top: 50%;
  left: 50%;*/
  
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-color: #d1d1d1;
  
  background-image: -webkit-linear-gradient(top, #d1d1d1 0%, #fefbf7 100%);
  background-image: linear-gradient(to bottom, #d1d1d1 0%, #fefbf7 100%);
}
.switch_3D:after {
  height: 26px;
  width: 60px;
  position: absolute;
  top: 2px;
  left: 2px;
  content: '';
  z-index: 2;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-color: #a5a5a5;
  background-image: -webkit-linear-gradient(top, #a5a5a5 0%, #e8d7be 100%);
  background-image: linear-gradient(to bottom, #a5a5a5 0%, #e8d7be 100%);
}

.switch_3D .checkbox {
  height: 22px;
  width: 56px;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 100;
  -webkit-border-radius: 11px;
  border-radius: 11px;
  -webkit-box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
  box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
  background-color: #f28a00;
  background-image: -webkit-linear-gradient(top, #f28a00 0%, #fb2522 67%, #fb1010 100%);
  background-image: linear-gradient(to bottom, #f28a00 0%, #fb2522 67%, #fb1010 100%);
}
.switch_3D .checkbox:after {
  height: 22px;
  width: 28px;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  z-index: 99;
  -webkit-border-radius: 11px;
  border-radius: 11px 0 0 11px;
  -webkit-box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
  box-shadow: inset 0px 9px 15px rgba(0, 0, 0, 0.53), inset 0 -8px 10px rgba(0, 0, 0, 0.14);
  background-color: #b1dd00;
  background-image: -webkit-linear-gradient(top, #b1dd00 0%, #07b85e 67%, #07b85e 100%);
  background-image: linear-gradient(to bottom, #b1dd00 0%, #07b85e 67%, #07b85e 100%);
}

.switch_3D .control {
  height: 24px;
  width: 36px;
  outline: 0;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 101;
  -webkit-appearance: none;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.55), inset 0 2px 0 #fafafa, inset 0 -2px 0 #ada39d;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.55), inset 0 2px 0 #fafafa, inset 0 -2px 0 #ada39d;
  background-color: #efefef;
  background-image: -webkit-linear-gradient(top, #efefef 32%, #bcb9b8 100%);
  background-image: linear-gradient(to bottom, #efefef 32%, #bcb9b8 100%);
  -webkit-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}
.switch_3D .control:checked {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
  /*left: 91px;*/
}
.switch_3D .control:after {
  height: 12px;
  width: 12px;
  position: absolute;
  right: 4px;
  top: 6px;
  content: '';
  z-index: 101;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #c2c0be;
  background-image: -webkit-linear-gradient(top, #c2c0be 0%, #d7d7d7 72%);
  background-image: linear-gradient(to bottom, #c2c0be 0%, #d7d7d7 72%);
}
.btn_wait:before,
.btn_wait::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 199;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  border: 2px solid #15e3f3;
  animation: borderAround 1.5s infinite linear;
}
.switch_3D span {
  display: none;
}
.btn_wait span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 109;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background: rgba(0, 0, 0, .2);
}
@-webkit-keyframes borderAround {
  0%, 100% {
    clip: rect(0 64px 4px 0);
  }
  33.2% {
    clip: rect(0 64px 30px 60px);
  }
  49.8% {
    clip: rect(26px 64px 30px 0);
  }
  83% {
    clip: rect(0 4px 64px 0);
  }
}
@keyframes borderAround {
  0%, 100% {
    clip: rect(0 64px 4px 0);
  }
  33.2% {
    clip: rect(0 64px 30px 60px);
  }
  49.8% {
    clip: rect(26px 64px 30px 0);
  }
  83% {
    clip: rect(0 4px 64px 0);
  }
}
.btn_3d.btn_export {
 
.btn.btn_export {
  margin-left: 1em;
}
.btn_sub_grp {
  background-color: transparent;
}
</style>