接口

src/config/getData.js

@@ -11,20 +11,13 @@ export const setStation = (sn) => post('teaching/setStation?stationName=' + sn,
 export const stopMapping = () => post('teaching/stopMapping', {})
 export const getLocalMaps = () => post('teaching/getLocalMaps', {})
 export const oneClickDeployment = (map) => post('teaching/oneClickDeployment?mapName=' + map, {})
-// export const getLocalMaps = () => post('teaching/getLocalMaps', {})
-// export const synchronzieMap = (map) => post('teaching/synchronzieMap', {
-//   mapName: map
-// })
-// export const restart = () => post('teaching/restart', {})
-// export const relocate = (x, y, angle) => post('teaching/relocate', {
-//   x: x,
-//   y: x,
-//   angle: angle
-// })
 
 // 操作
 export const queryStation = () => post('api/operate/queryStation', {})
 export const queryTaskChain = () => post('api/operate/queryTaskChain', {})
+export const queryTaskChainDtl = (id) => post('api/operate/queryTaskChainDtl', {
+  chain_id: id
+})
 export const sendTask = (data) => post('api/operate/sendTask', {
   data: data
 })

src/pages/modules/building.vue

@@ -12,7 +12,10 @@
     <div class="canvas-container">
       <canvas id="canvas" ref="canvas" width="1920" height="1080"></canvas>
     </div>
-    <el-row type="flex" justify="end"><button class="button_control" :disabled="disabled" @click="_stopMapping"><p>结束建图</p></button></el-row>
+    <el-row type="flex" justify="end">
+      <button class="button_control" @click="$router.push('/index/home')"><p>放弃建图</p></button>
+      <button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="_stopMapping"><p>结束建图</p></button>
+    </el-row>
     <el-dialog
       title="设置站点"
       :visible.sync="dialogVisible"
@@ -28,15 +31,29 @@
       </el-row>
       <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
     </el-dialog>
-    <div v-if="message" class="message_wrap">
+    <transition name="custom-message">
-      <div class="message">{{ message }}</div>
+      <div v-if="message" class="message">
-    </div>
+        <i class="el-icon-success"></i>
+        <p>{{ message }}</p>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
 import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment } from '@config/getData.js'
 export default {
+  beforeRouteLeave (to, from, next) {
+    this.$confirm('是否放弃本次建图?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      next() // 允许离开
+    }).catch(() => {
+      next(false) // 阻止离开
+    })
+  },
   data () {
     return {
       mapName: '',
@@ -63,7 +80,7 @@ export default {
       clearInterval(this.intervalId)
     }
   },
-  mounted () {
+  created () {
     this._startMapping()
   },
   methods: {
@@ -104,16 +121,23 @@ export default {
     // 开始建图
     async _startMapping () {
       try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
         const getTimestamp = new Date().getTime()
         this.mapName = `apt_map_${getTimestamp}`
         let res = await startMapping(this.mapName)
-        if (res) {
+        if (res && res.code === 200) {
-          if (res.code !== 200) {
+          this.message = '小车正在建图中'
-            this.$message.error(res.message)
+        } else {
-          }
+          this.$message.error(res.message)
         }
+        this.loading.close()
       } catch (e) {
         this.$message.error(e)
+        this.loading.close()
       }
     },
     // 打点
@@ -151,24 +175,28 @@ export default {
     async _stopMapping () {
       this.disabled = true
       try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
         let res = await stopMapping()
-        if (res) {
+        if (res && res.code === 200) {
-          if (res.code === 200) {
+          this.message = '正在建图，请等待。。。'
-            this.$message({
+          this.startTime = Date.now() // 记录开始时间
-              type: 'success',
+          this._getLocalMaps()
-              message: res.message
+          this.intervalId = setInterval(this._getLocalMaps, 3000) // 每5秒检查一次
-            })
+        } else {
-            this.message = '正在建图，请等待。。。'
+          this.$message.error(res.message)
-            this.startTime = Date.now() // 记录开始时间
+          this.message = ''
-            this.intervalId = setInterval(this._getLocalMaps, 3000) // 每5秒检查一次
+          this.disabled = false
-          } else {
+          this.loading.close()
-            this.$message.error(res.message)
-            this.disabled = false
-          }
         }
       } catch (e) {
         this.$message.error(e)
+        this.message = ''
         this.disabled = false
+        this.loading.close()
       }
     },
     async _getLocalMaps () {
@@ -191,6 +219,7 @@ export default {
               this.message = ''
               this.$message.error('建图失败，请重新建图')
               this.disabled = false
+              this.loading.close()
             }
           }
         } else {
@@ -198,33 +227,36 @@ export default {
           this.message = ''
           this.$message.error('建图失败，请重新建图')
           this.disabled = false
+          this.loading.close()
         }
       } catch (e) {
         clearInterval(this.intervalId) // 出错时停止定时器
         this.message = ''
         this.disabled = false
         this.$message.error(e)
+        this.loading.close()
       }
     },
     async _oneClickDeployment () {
       try {
         let res = await oneClickDeployment(this.mapName)
-        if (res) {
+        if (res && res.code === 200) {
-          if (res.code === 200) {
+          this.$message({
-            this.$message({
+            type: 'success',
-              type: 'success',
+            message: res.message
-              message: res.message
+          })
-            })
+          this.$router.push('/index/home')
-          } else {
+        } else {
-            this.$message.error(res.message)
+          this.$message.error(res.message)
-          }
-          this.message = ''
-          this.disabled = false
         }
+        this.message = ''
+        this.disabled = false
+        this.loading.close()
       } catch (e) {
         this.$message.error(e)
         this.message = ''
         this.disabled = false
+        this.loading.close()
       }
     },
     // 放大
@@ -252,20 +284,27 @@ export default {
 #canvas
   width 100%
   height 100%
-.message_wrap
+.message
+  min-width 380px
+  border 1px solid #e1f3d8
+  border-radius 4px
   position fixed
-  left 0
+  left 50%
-  top 0
+  top .87rem
-  width 100%
+  transform translateX(-50%)
-  height 100%
+  background-color #f0f9eb
+  transition opacity .3s,transform .4s
+  overflow hidden
+  padding 8px 15px
   z-index 2025
-  background center center / 40% auto url(../../images/new/popover.png) no-repeat
   display flex
-  justify-content center
   align-items center
-  .message
+  font-size .16rem
-    width 30%
+  list-height 1
-    font-size .18rem
+  color #67C23A
-    list-height .2rem
+  p
-    color #fff
+    margin-left 10px
+.custom-message-enter, .custom-message-leave-to
+  opacity 0
+  transform translate(-50%,-100%)
 </style>

src/pages/modules/device.vue

@@ -65,7 +65,7 @@
 
 <script>
 import SaveChain from './save-chain.vue'
-import { queryStation, queryTaskChain, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
+import { queryStation, queryTaskChain, queryTaskChainDtl, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
 export default {
   components: {
     SaveChain
@@ -194,13 +194,24 @@ export default {
     },
     // 点击任务链点位
     handleLinkCheck (e) {
-      const code = e.chain_point.split('-')
+      this._queryTaskChainDtl(e.chain_id)
-      const cname = e.chain_name.split('-')
+    },
-      const type = e.action_type.split('-')
+    // 任务链明细
-      code.map((e, i) => {
+    async _queryTaskChainDtl (id) {
-        this.newData.push({station_code: e, station_name: cname[i], action_type: type[i]})
+      try {
-      })
+        let res = await queryTaskChainDtl(id)
-      this.chainId = e.chain_id
+        if (res && res.data) {
+          this.newData = [...res.data]
+          this.chainId = id
+        } else {
+          this.newData = []
+          this.chainId = ''
+        }
+      } catch (e) {
+        this.$message.error(e)
+        this.newData = []
+        this.chainId = ''
+      }
     },
     // 发送任务
     async _sendTask () {

src/style/common.styl

@@ -224,5 +224,5 @@
   height calc(100% - 1.18rem)
 .page_container
   _wh(96%, 100%)
-  padding 1%
+  padding .09rem
   margin 0 auto