U 按钮二次确认弹窗

whychw

2020-09-25 66145e79c85aa6eef15fb7e4c52ca992113dfbec

U 按钮二次确认弹窗

 src/script/directive.js

@@ -76,4 +76,18 @@
      }
    }
  }
});

// 按钮的二次确认
Vue.directive('btnConfirm', {
  bind(el, binding, vnode, oldVnode) {
    const cbFn = el.getAttribute('data-fn');
    const cbParam = JSON.parse(el.getAttribute('param'));
    const confirmTxt = el.getAttribute('data-confirmTxt');


    el.onclick = function () {
      binding.value({cbFn, cbParam, confirmTxt});
    }
  }
});

 src/views/chargePower/main.vue

@@ -26,21 +26,21 @@
        </div>
        <!-- 模式 -->
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setConsvol(item)">{{item}}恒压模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setConsvol" data-confirmTxt="模式切换确认" :param="JSON.stringify(item)">{{item}}恒压模式</div>
          <div class="center_con">{{model[item] ? '恒流' : '恒压'}}</div>
          <div class="btn_3d" @click="setConscurr(item)">{{item}}恒流模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setConscurr" data-confirmTxt="模式切换确认" :param="JSON.stringify(item)">{{item}}恒流模式</div>
        </div>
        <!-- 串并模式 -->
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="constantvol(item)">{{item}}机组切换为4并或2串2并模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="constantvol" data-confirmTxt="模式切换确认" :param="JSON.stringify(item)">{{item}}机组切换为4并或2串2并模式</div>
          <div class="center_con">{{item}}机组当前为{{constantvolflag.A ? '4并或2串2并模式' : '4并或2串2并之外模式'}}</div>
          <div class="btn_3d" @click="othermode(item)">{{item}}机组切换为4并或2串2并之外模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="othermode" data-confirmTxt="模式切换确认" :param="JSON.stringify(item)">{{item}}机组切换为4并或2串2并之外模式</div>
        </div>
        <!-- 遥控 上位机 -->
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setRemoteControl(item)">{{item}}机组切换到上位机控制</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setRemoteControl" data-confirmTxt="控制切换确认" :param="JSON.stringify(item)">{{item}}机组切换到上位机控制</div>
          <div class="center_con">{{local_remote_control[item] ? '上位机控制' : '触摸屏控制'}}</div>
          <div class="btn_3d" @click="setLocalControl(item)">{{item}}机组切换到就地控制</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setLocalControl" data-confirmTxt="控制切换确认" :param="JSON.stringify(item)">{{item}}机组切换到就地控制</div>
        </div>
        <div class="text_row vertical_middle">
          <div class="inner">
@@ -64,11 +64,11 @@
        </div>
        <!-- 启动停止 -->
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="remoteStart(item)">{{item}}启动</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="remoteStart" data-confirmTxt="启动确认" :param="JSON.stringify(item)">{{item}}启动</div>
          <div class="center_con">
            <div class="indicator" :class="{'status_normal': !0, 'status_error': !1}"></div>
          </div>
          <div class="btn_3d" @click="remoteStop(item)">{{item}}停止</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="remoteStop" data-confirmTxt="停止确认" :param="JSON.stringify(item)">{{item}}停止</div>
        </div>
      </div>
      <!-- 右侧按钮 -->
@@ -191,6 +191,17 @@
        </div>
      </div>
    </el-dialog>
    <!-- 按钮二次确认 -->
    <el-dialog
      :title="confirmTxt"
      :visible.sync="confirmVisible"
      width="30%">
      <!-- <span>{{}}</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="callBack">确 定</el-button>
      </span>
    </el-dialog>
    <!-- ROOTEND -->
  </div>
</template>
@@ -206,6 +217,10 @@
  },
  data () {
    return {
      confirmTxt: '',
      confirmVisible: false,
      cbFn: null,
      cbParam: null,
      timer: new Timeout(),
      faultVisible: false,
      fault_tableData: [],
@@ -264,6 +279,17 @@
    goTo (path) {
      this.$router.push({path});
    }
    ,callBack () {
      this.confirmVisible = false;
      this[this.cbFn](this.cbParam);
    }
    ,handleConfirm (obj) {
      // console.log(obj, 9090);
      this.confirmTxt = obj.confirmTxt;
      this.cbFn = obj.cbFn;
      this.cbParam = obj.cbParam;
      this.confirmVisible = true;
    }
    // 获取机组列表信息 A B
    ,getList () {
      return this.$api.chargepower.getList().then((res) => {

 src/views/loadManager/autoload.vue

@@ -7,13 +7,13 @@
        <!-- 按钮组 -->
        <div class="item_btn_grp">
          <div class="vertical_middle">
            <div class="btn_3d" @click="startLoad(item)">启动加减载</div>
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="startLoad" data-confirmTxt="启动加减载确认" :param="JSON.stringify(item)">启动加减载</div>
          </div>
          <div class="vertical_middle">
            <div class="btn_3d" @click="stopLoad(item)">停止加减载</div>
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="stopLoad" data-confirmTxt="停止加减载确认" :param="JSON.stringify(item)">停止加减载</div>
          </div>
          <div class="vertical_middle">
            <div class="btn_3d" @click="switchOff(item)">全部分闸</div>
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(item)">全部分闸</div>
          </div>
        </div>
        <!-- 自动流程 -->
@@ -122,6 +122,17 @@
            </div>
        </flex-layout>
    </el-dialog>
    <!-- 按钮二次确认 -->
    <el-dialog
      :title="confirmTxt"
      :visible.sync="confirmVisible"
      width="30%">
      <!-- <span>{{}}</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="callBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

@@ -135,6 +146,10 @@
  },
  data () {
    return {
      confirmTxt: '',
      confirmVisible: false,
      cbFn: null,
      cbParam: null,
      timer: new this.$common.Timeout(),
      info: [],
      list: [],
@@ -198,6 +213,17 @@
    goTo (path) {
      this.$router.push({path});
    }
    ,callBack () {
      this.confirmVisible = false;
      this[this.cbFn](this.cbParam);
    }
    ,handleConfirm (obj) {
      // console.log(obj, 9090);
      this.confirmTxt = obj.confirmTxt;
      this.cbFn = obj.cbFn;
      this.cbParam = obj.cbParam;
      this.confirmVisible = true;
    }
    ,getInfo () {
      return this.$api.load.getInfo().then((res) => {
        res = JSON.parse(res.data.result);

 src/views/loadManager/burstload.vue

@@ -2,8 +2,8 @@
  <div class="main">
    <!-- <div class="title vertical_middle">负载柜突加突卸画面</div> -->
    <div class="header">
      <div class="btn_3d" @click="allSuddenChange">总突变加减载</div>
      <div class="btn_3d" @click="switchOffAll">总全部分闸</div>
      <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="allSuddenChange" data-confirmTxt="总突变加减载确认" :param="JSON.stringify(null)">总突变加减载</div>
      <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="switchOffAll" data-confirmTxt="总全部分闸确认" :param="JSON.stringify(null)">总全部分闸</div>
    </div>
    <div class="flex_contain">
      <div class="item" v-for="(item, itemIndex) in list" :key="itemIndex">
@@ -12,10 +12,10 @@
        <!-- 按钮组 -->
        <div class="item_btn_grp">
          <div class="vertical_middle">
            <div class="btn_3d" @click="suddenChange(item)">突变加减载</div>
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="suddenChange" data-confirmTxt="突变加减载确认" :param="JSON.stringify(item)">突变加减载</div>
          </div>
          <div class="vertical_middle">
            <div class="btn_3d" @click="switchOff(item)">全部分闸</div>
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(item)">全部分闸</div>
          </div>
        </div>
        <!-- 数据 -->
@@ -92,6 +92,17 @@
            </div>
        </flex-layout>
    </el-dialog>
    <!-- 按钮二次确认 -->
    <el-dialog
      :title="confirmTxt"
      :visible.sync="confirmVisible"
      width="30%">
      <!-- <span>{{}}</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="callBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

@@ -105,6 +116,10 @@
  },
  data () {
    return {
      confirmTxt: '',
      confirmVisible: false,
      cbFn: null,
      cbParam: null,
      timer: new this.$common.Timeout(),
      info: [],
      list: [],
@@ -142,6 +157,17 @@
    goTo (path) {
      this.$router.push({path});
    }
    ,callBack () {
      this.confirmVisible = false;
      this[this.cbFn](this.cbParam);
    }
    ,handleConfirm (obj) {
      // console.log(obj, 9090);
      this.confirmTxt = obj.confirmTxt;
      this.cbFn = obj.cbFn;
      this.cbParam = obj.cbParam;
      this.confirmVisible = true;
    }
    ,getInfo () {
      return this.$api.load.getInfo().then((res) => {
        res = JSON.parse(res.data.result);

 src/views/loadManager/manualload.vue

@@ -7,7 +7,7 @@
        <div class="btn_main">
          <div class="lay_label vertical_middle">{{item.dev_name}}</div>
          <div class="lay_content vertical_middle">
            <div class="btn_3d" @click="switchOff(item)">全部分闸</div>
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(item)">全部分闸</div>
          </div>
        </div>
       <!-- 是否允许合闸 -->
@@ -96,6 +96,17 @@
            </div>
        </flex-layout>
    </el-dialog>
    <!-- 按钮二次确认 -->
    <el-dialog
      :title="confirmTxt"
      :visible.sync="confirmVisible"
      width="30%">
      <!-- <span>{{}}</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="callBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

@@ -105,6 +116,10 @@
  name: 'ManualLoad',
  data () {
    return {
      confirmTxt: '',
      confirmVisible: false,
      cbFn: null,
      cbParam: null,
      max_button_num: 0,
      timer: new this.$common.Timeout(),
      info: [],
@@ -127,6 +142,17 @@
    goTo (path) {
      this.$router.push({path});
    }
    ,callBack () {
      this.confirmVisible = false;
      this[this.cbFn](this.cbParam);
    }
    ,handleConfirm (obj) {
      // console.log(obj, 9090);
      this.confirmTxt = obj.confirmTxt;
      this.cbFn = obj.cbFn;
      this.cbParam = obj.cbParam;
      this.confirmVisible = true;
    }
    ,getInfo () {
      return this.$api.load.getInfo().then((res) => {
        res = JSON.parse(res.data.result);

 src/views/rectifier/group.vue

@@ -55,16 +55,16 @@
      </div>
      <div class="item">
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setGroupPos(item1, 1)">恒压模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="模式切换确认" :param="JSON.stringify([item1, 1])">恒压模式</div>
          <div class="center_con" v-if="item1.data.consvolcurrflag">恒流</div>
          <div class="center_con" v-else>恒压</div>
          <div class="btn_3d" @click="setGroupPos(item1, 2)">恒流模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="模式切换确认" :param="JSON.stringify([item1, 2])">恒流模式</div>
        </div>
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setGroupPos(item1, 3)">并联模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="模式切换确认" :param="JSON.stringify([item1, 3])">并联模式</div>
          <div class="center_con" v-if="item1.state.conn_flag">串联</div>
          <div class="center_con" v-else>并联</div>
          <div class="btn_3d" @click="setGroupPos(item1, 4)">串联模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="模式切换确认" :param="JSON.stringify([item1, 4])">串联模式</div>
        </div>
        <div class="group_set">
          <div class="part_left">
@@ -80,32 +80,32 @@
            </div>
          </div>
          <div class="vertical_middle">
            <div class="btn_3d" @click="giveValService">给定确认</div>
            <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="giveValService" data-confirmTxt="给定确认" :param="JSON.stringify([null])">给定确认</div>
          </div>
        </div>
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setGroupPos(item1, 7)">{{item1.name}}套输出合闸</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="输出合闸确认" :param="JSON.stringify([item1, 7])">{{item1.name}}套输出合闸</div>
          <div class="center_con">
            <div class="indicator" :class="{'status_normal': !item1.state.qs1_state, 'status_error': item1.state.qs1_state}"><span>{{k_name1}}</span></div>
            <div class="indicator" :class="{'status_normal': !item1.state.qs2_state, 'status_error': item1.state.qs2_state}"><span>{{k_name2}}</span></div>
          </div>
          <div class="btn_3d" @click="setGroupPos(item1, 9)">{{item1.name}}套输出分闸</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="输出分闸确认" :param="JSON.stringify([item1, 9])">{{item1.name}}套输出分闸</div>
        </div>
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setGroupPos(item1, 8)">{{item2.name}}套输出合闸</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="输出合闸确认" :param="JSON.stringify([item1, 8])">{{item2.name}}套输出合闸</div>
          <div class="center_con">
            <div class="indicator" :class="{'status_normal': !item2.state.qs1_state, 'status_error': item2.state.qs1_state}"><span>{{k_name3}}</span></div>
            <div class="indicator" :class="{'status_normal': !item2.state.qs2_state, 'status_error': item2.state.qs2_state}"><span>{{k_name4}}</span></div>
          </div>
          <div class="btn_3d" @click="setGroupPos(item1, 10)">{{item2.name}}套输出分闸</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="输出分闸确认" :param="JSON.stringify([item1, 10])">{{item2.name}}套输出分闸</div>
        </div>
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setGroupPos(item1, 11)">{{groupname}}启动</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="启动确认" :param="JSON.stringify([item1, 11])">{{groupname}}启动</div>
          <div class="center_con">
            <div class="indicator" :class="{'status_normal': !item1.data.powerstartflag, 'status_error': item1.data.powerstartflag}"></div>
            <div class="indicator" :class="{'status_normal': !item2.data.powerstartflag, 'status_error': item2.data.powerstartflag}"></div>
          </div>
          <div class="btn_3d" @click="setGroupPos(item1, 12)">{{groupname}}停止</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setGroupPos" data-confirmTxt="停止确认" :param="JSON.stringify([item1, 12])">{{groupname}}停止</div>
        </div>
      </div>
      <div class="item">
@@ -367,6 +367,17 @@
        </div>
      </div>
    </el-dialog>
    <!-- 按钮二次确认 -->
    <el-dialog
      :title="confirmTxt"
      :visible.sync="confirmVisible"
      width="30%">
      <!-- <span>{{}}</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="callBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

@@ -391,6 +402,10 @@
  data () {
    let itemName = this.$route.query.group.split('');
    return {
      confirmTxt: '',
      confirmVisible: false,
      cbFn: null,
      cbParam: null,
      timer: new Timeout(),
      alarmTimer: new Timeout(),
      faultVisible: false,
@@ -639,6 +654,17 @@
    goBack () {
      this.$router.push({name: 'RectifierMain'});
    }
    ,callBack () {
      this.confirmVisible = false;
      this[this.cbFn](...this.cbParam);
    }
    ,handleConfirm (obj) {
      // console.log(obj, 9090);
      this.confirmTxt = obj.confirmTxt;
      this.cbFn = obj.cbFn;
      this.cbParam = obj.cbParam;
      this.confirmVisible = true;
    }
    ,changeSize () {
      this.isMaxSize = !this.isMaxSize;
    }

 src/views/rectifier/main.vue

@@ -33,10 +33,10 @@
        </div>
        <!-- 模式 -->
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setPos(item, 3)">{{item.idx}}恒压模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setPos" data-confirmTxt="切换模式确认" :param="JSON.stringify([item, 3])">{{item.idx}}恒压模式</div>
          <div class="center_con" v-if="item.data.consvolcurrflag">恒流</div>
          <div class="center_con" v-else>恒压</div>
          <div class="btn_3d" @click="setPos(item, 4)">{{item.idx}}恒流模式</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setPos" data-confirmTxt="切换模式确认" :param="JSON.stringify([item, 4])">{{item.idx}}恒流模式</div>
        </div>
        <!-- A设定电压 -->
        <div class="text_row vertical_middle">
@@ -52,20 +52,20 @@
        </div>
        <!-- A套输出合分闸 -->
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setPos(item, 15)">{{item.idx}}套输出合闸</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setPos" data-confirmTxt="合闸确认" :param="JSON.stringify([item, 15])">{{item.idx}}套输出合闸</div>
          <div class="center_con">
            <div class="indicator" :class="{'status_normal': !item.state.qs1_state, 'status_error': item.state.qs1_state}"><span>{{item.k_name1}}</span></div>
            <div class="indicator" :class="{'status_normal': !item.state.qs2_state, 'status_error': item.state.qs2_state}"><span>{{item.k_name2}}</span></div>
          </div>
          <div class="btn_3d" @click="setPos(item, 16)">{{item.idx}}套输出分闸</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setPos" data-confirmTxt="分闸确认" :param="JSON.stringify([item, 16])">{{item.idx}}套输出分闸</div>
        </div>
        <!-- A启动停止 -->
        <div class="flex_2btn_grp vertical_middle">
          <div class="btn_3d" @click="setPos(item, 7)">{{item.idx}}启动</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setPos" data-confirmTxt="启动确认" :param="JSON.stringify([item, 7])">{{item.idx}}启动</div>
          <div class="center_con">
            <div class="indicator" :class="{'status_normal': !item.data.powerstartflag, 'status_error': item.data.powerstartflag}"></div>
          </div>
          <div class="btn_3d" @click="setPos(item, 8)">{{item.idx}}停止</div>
          <div class="btn_3d" v-btn-confirm="handleConfirm" data-fn="setPos" data-confirmTxt="停止确认" :param="JSON.stringify([item, 8])">{{item.idx}}停止</div>
        </div>
      </div>
    </div>
@@ -309,6 +309,17 @@
        <el-button type="primary" @click="faultVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 按钮二次确认 -->
    <el-dialog
      :title="confirmTxt"
      :visible.sync="confirmVisible"
      width="30%">
      <!-- <span>{{}}</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="callBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

@@ -330,6 +341,10 @@
  },
  data () {
    return {
      confirmTxt: '',
      confirmVisible: false,
      cbFn: null,
      cbParam: null,
      timer: new Timeout(),
      alarmTimer: new Timeout(),
      faultVisible: false,
@@ -666,6 +681,17 @@
      }
      this.$router.push(obj);
    }
    ,callBack () {
      this.confirmVisible = false;
      this[this.cbFn](...this.cbParam);
    }
    ,handleConfirm (obj) {
      // console.log(obj, 9090);
      this.confirmTxt = obj.confirmTxt;
      this.cbFn = obj.cbFn;
      this.cbParam = obj.cbParam;
      this.confirmVisible = true;
    }
    ,changeSize () {
      this.isMaxSize = !this.isMaxSize;
    }