确认弹窗

2024-11-14 14:20:57 +08:00
parent 09bec6775d
commit d2f016f90b
3 changed files with 83 additions and 39 deletions
--- a/src/main.js
+++ b/src/main.js
@@ -7,10 +7,11 @@ import store from './vuex/store'
 import '@config/rem.js'
 import '@style/reset.css'
 import '@style/layout.styl'
-import { Message, Select, Option } from 'element-ui'
+import { MessageBox, Message, Select, Option } from 'element-ui'
 import scroll from 'vue-seamless-scroll'
 import JSEncrypt from 'jsencrypt'

+Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$message = Message
 Vue.use(Select)
 Vue.use(Option)
--- a/src/pages/index1.vue
+++ b/src/pages/index1.vue
@@ -63,7 +63,7 @@
            </div>
          </div>
          <div class="zd-row jcflexend button-wrap">
-            <button class="button btn-primary" :class="{'btn-info': !sCode || !nCode || !mType}" :disabled="disabled1" @click="_callTask">确认下料</button>
+            <button class="button btn-primary" :class="{'btn-info': !sCode || !nCode || !mType}" :disabled="disabled1" @click="toCallTask">确认下料</button>
          </div>
        </div>
        <div class="item-wrap">
@@ -81,8 +81,8 @@
            </div>
          </div>
          <div class="zd-row jcflexend button-wrap">
-            <button class="button btn-primary" :class="{'btn-info': !code}" :disabled="disabled2" @click="_putAction('1')">放货确认</button>
-            <button class="button btn-primary" :class="{'btn-info': !code}" :disabled="disabled2" @click="_putAction('2')">卸货确认</button>
+            <button class="button btn-primary" :class="{'btn-info': !code}" :disabled="disabled2" @click="toPutAction('1')">放货确认</button>
+            <button class="button btn-primary" :class="{'btn-info': !code}" :disabled="disabled2" @click="toPutAction('2')">卸货确认</button>
          </div>
        </div>
        <div class="item-wrap">
@@ -100,8 +100,8 @@
            </div>
          </div>
          <div class="zd-row jcflexend button-wrap">
-            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled3" @click="_areaControl('0')">通道释放</button>
-            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled3" @click="_areaControl('1')">通道管控</button>
+            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled3" @click="toAreaControl('0')">通道释放</button>
+            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled3" @click="toAreaControl('1')">通道管控</button>
          </div>
        </div>
        <div class="item-wrap">
@@ -119,19 +119,19 @@
            </div>
          </div>
          <div class="zd-row jcflexend button-wrap">
-            <button class="button btn-primary" :class="{'btn-info': !task}" :disabled="disabled4" @click="_pdaCancel">取消操作</button>
-            <button class="button btn-primary" :class="{'btn-info': !task}" :disabled="disabled5" @click="_forceFinish">强制完成</button>
+            <button class="button btn-primary" :class="{'btn-info': !task}" :disabled="disabled4" @click="toPdaCancel">取消操作</button>
+            <button class="button btn-primary" :class="{'btn-info': !task}" :disabled="disabled5" @click="toForceFinish">强制完成</button>
          </div>
        </div>
      </div>
      <div class="zd-row flexcol jcflexend r-wrap">
        <!-- <t-canvas></t-canvas> -->
        <div class="relative canvas-wrap">
-          <div class="absolute car" :style="{'left': car1.x / 195 + 'px', 'top': 556 - car1.y / 250 + 'px'}">
+          <div class="absolute car" :style="{'left': car1.x / 1.95 + 'px', 'top': 556 - car1.y / 2.5 + 'px'}">
            <div class="car_img" :style="{'transform': 'rotate(-' + car1.angle + 'deg)'}"></div>
            <div class="absolute car_name">1</div>
          </div>
-          <div class="absolute car" :style="{'left': car2.x / 195 + 'px', 'top': 556 - car2.y / 250 + 'px'}">
+          <div class="absolute car" :style="{'left': car2.x / 1.95 + 'px', 'top': 556 - car2.y / 2.5 + 'px'}">
            <div class="car_img" :style="{'transform': 'rotate(-' + car2.angle + 'deg)'}"></div>
            <div class="absolute car_name">2</div>
          </div>
@@ -257,12 +257,23 @@ export default {
        this._queryTaskIds()
      }
    },
-    async _callTask () {
+    toCallTask () {
      this.disabled1 = true
      if (!this.sCode || !this.nCode || !this.mType) {
        this.disabled1 = false
        return
      }
+      this.$confirm('是否执行确认下料任务？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this._callTask()
+      }).catch(() => {
+        this.disabled1 = false
+      })
+    },
+    async _callTask () {
      try {
        let res = await callTask(this.mType, this.sCode, this.nCode)
        this.disabled1 = false
@@ -274,12 +285,23 @@ export default {
        this.disabled1 = false
      }
    },
-    async _putAction (type) {
+    toPutAction (type) {
      this.disabled2 = true
      if (!this.code) {
        this.disabled2 = false
        return
      }
+      this.$confirm(type === '1' ? '是否执行放货确认任务？' : '是否执行卸货确认任务？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this._putAction(type)
+      }).catch(() => {
+        this.disabled2 = false
+      })
+    },
+    async _putAction (type) {
      try {
        let res = await putAction(this.code, type)
        this.disabled2 = false
@@ -291,12 +313,23 @@ export default {
        this.disabled2 = false
      }
    },
-    async _areaControl (type) {
+    toAreaControl (type) {
      this.disabled3 = true
      if (!this.area) {
        this.disabled3 = false
        return
      }
+      this.$confirm(type === '0' ? '是否执行通道释放任务？' : '是否执行通道管控任务？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this._areaControl(type)
+      }).catch(() => {
+        this.disabled3 = false
+      })
+    },
+    async _areaControl (type) {
      try {
        let res = await areaControl(this.area, type)
        this.disabled3 = false
@@ -308,12 +341,23 @@ export default {
        this.disabled3 = false
      }
    },
-    async _pdaCancel () {
+    toPdaCancel () {
      this.disabled4 = true
      if (!this.task) {
        this.disabled4 = false
        return
      }
+      this.$confirm('是否执行取消操作任务？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this._pdaCancel()
+      }).catch(() => {
+        this.disabled4 = false
+      })
+    },
+    async _pdaCancel () {
      try {
        let res = await pdaCancel(this.task)
        this.disabled4 = false
@@ -325,12 +369,23 @@ export default {
        this.disabled4 = false
      }
    },
-    async _forceFinish () {
+    toForceFinish () {
      this.disabled5 = true
      if (!this.task) {
        this.disabled5 = false
        return
      }
+      this.$confirm('是否执行强制完成任务？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this._forceFinish()
+      }).catch(() => {
+        this.disabled5 = false
+      })
+    },
+    async _forceFinish () {
      try {
        let res = await forceFinish(this.task)
        this.disabled5 = false
@@ -347,26 +402,6 @@ export default {
      let res = await queryDevice(arr)
      this.car1 = res.one
      this.car2 = res.two
-      // console.log(this.car1)
-      // this.car1 = {cx: this.car1.x / 195, cy: 556 - this.car1.y / 250, angle: this.car1.angle}
-      // let obj = res.data.car1
-      // obj.x = obj.x / 195
-      // obj.y = 556 - obj.y / 250
-      // if (this.keyPoints.length <= 1) {
-      //   this.keyPoints.push(obj)
-      //   this.angle = res.data.car1.angle
-      //   const canvas = document.querySelector('#carCanvas')
-      //   this.ctx = canvas.getContext('2d')
-      //   this.handleCanvasCar1()
-      // } else if (this.keyPoints.length > 1) {
-      //   this.keyPoints.shift()
-      //   this.keyPoints.push(res.data.car1)
-      //   this.angle = res.data.car1.angle
-      //   const canvas = document.querySelector('#carCanvas')
-      //   this.ctx = canvas.getContext('2d')
-      //   this.ctx.clearRect(0, 0, 680, 467)
-      //   this.handleCanvasCar()
-      // }
    }
  }
 }
--- a/src/style/layout.styl
+++ b/src/style/layout.styl
@@ -77,6 +77,14 @@
 .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: rgba(7,31,62,0.95)
 }
+// 提示框
+.el-message-box {
+  background-color: rgba(7, 22, 69, .85);
+  border-color: #0b5deb;
+}
+.el-message-box__title, .el-message-box__headerbtn .el-message-box__close, .el-message-box__content {
+  color: #fff;
+}

 .button-wrap {
  margin-top: .16rem;
@@ -93,13 +101,13 @@
  margin-left: .1rem;
 }
 .btn-primary {
-  background: linear-gradient(0deg, #126AB2, #57BCF1);
+  background: linear-gradient(to bottom, #145df0,#04c4f8);
 }
 .btn-primary:disabled {
-  background: linear-gradient(0deg, #6f7f87, #a2a7a7);
+  background: #b6b9be
 }
 .btn-info {
-  background: linear-gradient(0deg, #6f7f87, #a2a7a7);
+  background: #b6b9be
 }
 .contianer
  _wh(100%, 100%)
@@ -165,4 +173,4 @@
  left: 0.2rem;
  top: 0.1rem;
  opacity: .2;
-  _font(.2rem,.2rem, #fff,,center)
+  _font(.2rem,.2rem, #fff,,center)