界面改版 整合提交

whychw

2020-12-04 6557cf808e99a7c58f19f964c36f932a315d4432

 src/views/loadManager/autoload.vue

@@ -2,67 +2,69 @@
  <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="item_title vertical_middle">{{item.dev_name}}<div class="btn_3d btn_export" @click="exportData(item)">数据导出</div></div>
        <!-- 按钮组 -->
        <div class="item_btn_grp">
          <div class="vertical_middle">
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="startLoad" data-confirmTxt="启动加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">启动加减载</div>
          </div>
          <div class="vertical_middle">
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="stopLoad" data-confirmTxt="停止加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">停止加减载</div>
          </div>
          <div class="vertical_middle">
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">全部分闸</div>
          </div>
        </div>
        <!-- 自动流程 -->
        <div class="indicator_row">
          <div class="label vertical_middle">自动流程</div>
          <div class="indicator_grp">
            <div v-for="index of 5" :key="index" class="wrap_indicator vertical_middle" :class="{'status_off': !item['FZ_autostate' + index], 'status_normal': item['FZ_autostate' + index]}"><div><span>{{index}}</span></div></div>
          </div>
        </div>
        <!-- 数据 -->
        <div class="data_contain">
          <!-- 是否允许合闸 -->
          <div class="row">
            <div class="label vertical_middle">是否允许合闸</div>
            <div class="data vertical_middle">
              <div class="nowrap_indicator" :class="{'status_off': !item.allow_close, 'status_normal': item.allow_close}"></div>
      <div class="item border-angle" v-for="(item, index) in list" :key="index">
        <div class="item-inner">
          <div class="item_title vertical_middle">{{item.dev_name}}<div class="btn-wrap"><div class="btn btn_export" @click="exportData(item)">数据导出</div></div></div>
          <!-- 按钮组 -->
          <div class="item_btn_grp">
            <div class="vertical_middle">
              <div class="btn" v-btn-confirm="handleConfirm" data-fn="startLoad" data-confirmTxt="启动加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">启动加减载</div>
            </div>
            <div class="vertical_middle">
              <div class="btn" v-btn-confirm="handleConfirm" data-fn="stopLoad" data-confirmTxt="停止加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">停止加减载</div>
            </div>
            <div class="vertical_middle">
              <div class="btn" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">全部分闸</div>
            </div>
          </div>
          <div class="row">
            <div class="label vertical_middle">设定功率</div>
            <div class="data editable vertical_middle" title="点击修改" @click="setPower(item)">{{item.set_power}}  kVA</div>
          <!-- 自动流程 -->
          <div class="indicator_row">
            <div class="label vertical_middle">自动流程</div>
            <div class="indicator_grp">
              <div v-for="index of 5" :key="index" class="wrap_indicator vertical_middle" :class="{'status_off': !item['FZ_autostate' + index], 'status_normal': item['FZ_autostate' + index]}"><div><span>{{index}}</span></div></div>
            </div>
          </div>
          <div class="row">
            <div class="label vertical_middle">间隔时间</div>
            <div class="data editable vertical_middle" title="点击修改" @click="setDelay(item)">{{item.interval_time}}  (× 0.1s)</div>
          <!-- 数据 -->
          <div class="data_contain">
            <!-- 是否允许合闸 -->
            <div class="row">
              <div class="label vertical_middle">是否允许合闸</div>
              <div class="data vertical_middle">
                <div class="nowrap_indicator" :class="{'status_off': !item.allow_close, 'status_normal': item.allow_close}"></div>
              </div>
            </div>
            <div class="row">
              <div class="label vertical_middle">设定功率</div>
              <div class="data editable txt_strong vertical_middle" title="点击修改" @click="setPower(item)">{{item.set_power}}  kVA</div>
            </div>
            <div class="row">
              <div class="label vertical_middle">间隔时间</div>
              <div class="data editable txt_strong vertical_middle" title="点击修改" @click="setDelay(item)">{{item.interval_time}}  (× 0.1s)</div>
            </div>
            <div class="row">
              <div class="label vertical_middle">已输出功率</div>
              <div class="data txt_strong vertical_middle">{{item.output_power}}  kVA</div>
            </div>
            <div class="row">
              <div class="label vertical_middle">电压</div>
              <div class="data txt_strong vertical_middle">{{item.actual_mov}}  V</div>
            </div>
            <div class="row">
              <div class="label vertical_middle">电流</div>
              <div class="data txt_strong vertical_middle">{{item.actual_curr}}  A</div>
            </div>
          </div>
          <div class="row">
            <div class="label vertical_middle">已输出功率</div>
            <div class="data vertical_middle">{{item.output_power}}  kVA</div>
          </div>
          <div class="row">
            <div class="label vertical_middle">电压</div>
            <div class="data vertical_middle">{{item.actual_mov}}  V</div>
          </div>
          <div class="row">
            <div class="label vertical_middle">电流</div>
            <div class="data vertical_middle">{{item.actual_curr}}  A</div>
          </div>
        </div>
        <!-- 状态 -->
        <div class="item_status">
          <div class="column" v-for="index of 2" :key="index">
            <div class="sub_item" v-for="idx of 6" :key="idx">
              <div class="cell vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">KM{{(index - 1) * 6 + idx}}</div>
              <div class="cell vertical_middle" v-else></div>
              <div class="cell vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">{{item['FZ_b' + ((index - 1) * 6 + idx) + '_power']}}kVA</div>
              <div class="cell vertical_middle" v-else></div>
              <div class="cell_indicator vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num"><div :class="{'status_off': !item['FZ_fw' + ((index - 1) * 6 + idx)], 'status_normal': item['FZ_fw' + ((index - 1) * 6 + idx)]}"></div></div>
              <div class="cell_indicator vertical_middle" v-else></div>
          <!-- 状态 -->
          <div class="item_status">
            <div class="column" v-for="index of 2" :key="index">
              <div class="sub_item" v-for="idx of 6" :key="idx">
                <div class="cell vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">KM{{(index - 1) * 6 + idx}}</div>
                <div class="cell vertical_middle" v-else></div>
                <div class="cell power txt_strong vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">{{item['FZ_b' + ((index - 1) * 6 + idx) + '_power']}}kVA</div>
                <div class="cell vertical_middle" v-else></div>
                <div class="cell_indicator vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num"><div :class="{'status_off': !item['FZ_fw' + ((index - 1) * 6 + idx)], 'status_normal': item['FZ_fw' + ((index - 1) * 6 + idx)]}"></div></div>
                <div class="cell_indicator vertical_middle" v-else></div>
              </div>
            </div>
          </div>
        </div>
@@ -70,10 +72,10 @@
    </div>
    <div class="footer">
      <div class="btn-grp">
        <div class="btn_3d" @click="goTo('/load/main')">主画面</div>
        <div class="btn_3d" @click="goTo('/load/manual')">手动加载</div>
        <div class="btn_3d">自动加载</div>
        <div class="btn_3d" @click="goTo('/load/burst')">突加突卸</div>
        <div class="btn" @click="goTo('/load/main')">主画面</div>
        <div class="btn" @click="goTo('/load/manual')">手动加载</div>
        <div class="btn">自动加载</div>
        <div class="btn" @click="goTo('/load/burst')">突加突卸</div>
      </div>
    </div>
    <!-- 弹窗 -->
@@ -619,26 +621,43 @@
    }*/
    .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;
      
    }
    .item_title {
      text-align: center;
      border-bottom: 1px #fff solid;
      justify-content: flex-start;
      border-bottom: 1px #00f7f9 solid;
      flex: auto;
      text-indent: .4em;
    }
    .btn-wrap {
      flex: 1;
      text-align: center;
    }
    .item_btn_grp {
      flex: auto;
      display: -webkit-flex;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px #fff solid;
      border-bottom: 1px #00f7f9 solid;
    }
    .item_btn_grp > div {
      flex: auto;
@@ -646,7 +665,7 @@
    }
    .indicator_row {
      flex: 1.5 1.5 auto;
      border-bottom: 1px #fff solid;
      border-bottom: 1px #083458 solid;
      display: -webkit-flex;
      display: flex;
      /*flex-direction: column;*/
@@ -657,18 +676,23 @@
      display: flex;
    }
    .indicator_row .label {
      border-right: 1px #fff solid;
      width: 80px;
      flex-shrink: 0;
      border-right: 1px #00f7f9 solid;
      /*width: 80px;*/
      flex: 2.2;
      justify-content: flex-start;
      text-indent: .4em;
      /*flex-shrink: 0;*/
    }
    .indicator_row .data {
      flex: auto;
      flex: 4.2;
      padding-right: 1px;
    }
    .indicator_grp {
      flex: auto;
      flex: 4.2;
      padding-right: 1px;
      display: -webkit-flex;
      display: flex;
      padding: 0 10px;
      /*padding: 0 10px;*/
      justify-content: space-around;
    }
    .indicator_grp .indicator {
@@ -677,40 +701,28 @@
    .indicator_grp .wrap_indicator div {
      position: relative;
      /*margin-top: 4px;*/
      height: 40px;
      width: 40px;
      /* height: 18px;
      width: 18px;
      -webkit-border-radius: 50%;
      border-radius: 50%; */
      top: 8px;
    }
    .nowrap_indicator {
      width: 40px;
      height: 40px;
    }
    /* .nowrap_indicator.status_normal,
    .cell_indicator div.status_normal,
    .indicator_grp .indicator.status_normal div {
      background: url(~@/assets/images/light_g.png) 50% 50% / 80% auto no-repeat;
    }
    .cell_indicator div.status_warn,
    .indicator_grp .indicator.status_warn div {
      background: url(~@/assets/images/light_y.png) 50% 50% / 80% auto no-repeat;
    }
    .cell_indicator div.status_error,
    .indicator_grp .indicator.status_error div {
      background: url(~@/assets/images/light_r.png) 50% 50% / 80% auto no-repeat;
    }
    .nowrap_indicator.status_off,
    .cell_indicator div.status_off,
    .indicator_grp .indicator.status_off div {
      background: url(~@/assets/images/light_off.png) 50% 50% / 80% auto no-repeat;
    /* .nowrap_indicator {
      width: 18px;
      height: 18px;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    } */
    .cell_indicator {
      text-align: center;
    }
    .cell_indicator div {
      width: 40px;
      height: 40px;
    /* .cell_indicator div {
      width: 18px;
      height: 18px;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      display: inline-block;
    }
    } */
    .indicator_grp .wrap_indicator div span {
      position: absolute;
      left: 50%;
@@ -726,16 +738,19 @@
    }
    .data_contain .row {
      flex: auto;
      border-bottom: 1px #fff solid;
      /*border-bottom: 1px #fff solid;*/
      display: -webkit-flex;
      display: flex;
    }
    .data_contain .data {
      flex: 2.2;
      flex: 4.2;
      padding-right: 1px;
    }
    .data_contain .label {
      flex: 1;
      border-right: 1px #fff solid;
      flex: 2.2;
      justify-content: flex-start;
      text-indent: .4em;
      border-right: 1px #00f7f9 solid;
    }
    .item_status {
      font-size: .16rem;
@@ -753,21 +768,23 @@
      flex: 1;
      display: -webkit-flex;
      display: flex;
      border-bottom: 1px #fff solid;
      border-bottom: 1px #083458 solid;
    }
    .item_status .sub_item:last-of-type {
      border-bottom: 0 none;
    }
    .item_status .cell {
      flex: 1;
      border-right: 1px #fff solid;
      border-right: 1px #00f7f9 solid;
    }
    .item_status .cell:nth-of-type(2) {
      flex: 1.2;
      justify-content: flex-start;
      text-indent: .4em;
    }
    .item_status .cell_indicator {
      flex: 1;
      border-right: 1px #fff solid;
      border-right: 1px #00f7f9 solid;
    }
    .item_status .column:last-of-type .cell_indicator {
      border: 0 none;
@@ -788,44 +805,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;
    }
    .updateDelay,
    .updateSetPower {
@@ -850,4 +847,21 @@
    .btn_3d.btn_export {
      margin-left: 1em;
    }
  .data_contain .row,
  .bdb {
    border-bottom: 1px solid #083458;
  }
  .data_contain .row:last-child {
    border-bottom: 1px solid #00f7f9;
  }
  .item_title,
  .indicator_row,
  .data_contain .row:nth-child(2n),
  .sub_item:nth-child(2n) {
    background: rgba(0, 247, 249, .1);
  }
  .cell.power {
    font-weight: normal;
    font-size: .16rem;
  }
</style>