接口交互

src/pages/modules/building.vue

@@ -12,18 +12,51 @@
     <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" @click="connectPoints"><p>建图</p></button></el-row>
+    <el-row type="flex" justify="end"><button class="button_control" @click="_stopMapping"><p>建图</p></button></el-row>
+    <el-dialog
+      title="设置站点"
+      :visible.sync="dialogVisible"
+      width="50%">
+      <el-form :model="dataForm" ref="dataForm" :label-width="$i18n.locale === 'en-us' ? '' : '1.1rem'" size="mini">
+        <el-form-item label="站点名称" prop="point">
+          <el-input v-model="dataForm.point" id="point" @focus="show" data-layout="normal"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-row type="flex" justify="space-around" style="margin-top: .3rem">
+        <el-col :span="7"><button class="button_control button_control_disabled" @click="dialogVisible = false"><p>{{$t('Cancel')}}</p></button></el-col>
+        <el-col :span="7"><button class="button_control" @click="_setStation"><p>{{$t('Save')}}</p></button></el-col>
+      </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>
 </template>
 
 <script>
+import { startMapping, setStation, stopMapping } from '@config/getData.js'
 export default {
   data () {
     return {
+      dialogVisible: false,
+      dataForm: {
+        point: ''
+      },
+      keyPoints: [],
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      },
       points: [], // 存储所有点位坐标
       intervalId: null, // 用于存储定时器的 ID
       drawingPoints: true, // 是否继续绘制点位
-      scale: 1 // 缩放比例
+      scale: 1, // 缩放比例
+      gridColor: '#FFFFFF', // 线条颜色
+      gridLineWidth: 1, // 线条宽度
+      gridCellSize: 200, // 格子大小
+      dotColor: '#000000', // 圆点颜色
+      dotRadius: 5 // 圆点半径（直径为5px，半径为2.5px）
     }
   },
   beforeDestroy () {
@@ -31,8 +64,139 @@ export default {
       clearInterval(this.intervalId)
     }
   },
+  mounted () {
+    // this.drawGrid()
+    this._startMapping()
+  },
   methods: {
+    show (e) {
+      // 关闭中文keyboard
+      let arr = document.querySelectorAll('.hg-theme-default')
+      arr.forEach((ele) => {
+        ele.style.visibility = 'hidden'
+      })
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
+    },
+    async _startMapping () {
+      try {
+        let res = await startMapping('apt_map_' + new Date().getTime())
+        if (res) {
+          if (res.code !== 200) {
+            this.$message.error(res.message)
+          }
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
     addPoint () {
+      this.dialogVisible = true
+      this.dataForm.point = 'B' + (this.keyPoints.length + 1)
+    },
+    async _setStation () {
+      try {
+        let res = await setStation(this.dataForm.point)
+        if (res) {
+          if (res.code === 200) {
+            this.$message({
+              type: 'success',
+              message: res.message
+            })
+            this.keyPoints.push(this.dataForm.point)
+          } else {
+            this.$message.error(res.message)
+          }
+        }
+        this.visible = false
+      } catch (e) {
+        this.$message.error(e)
+        this.visible = false
+      }
+    },
+    async _stopMapping () {
+      try {
+        let res = await stopMapping()
+        if (res) {
+          if (res.code === 200) {
+            this.$message({
+              type: 'success',
+              message: res.message
+            })
+          } else {
+            this.$message.error(res.message)
+          }
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    drawGrid () {
+      const canvas = this.$refs.canvas
+      const ctx = canvas.getContext('2d')
+      const width = canvas.width
+      const height = canvas.height
+
+      // 清空画布
+      ctx.clearRect(0, 0, width, height)
+
+      // 绘制格子
+      for (let x = 0; x <= width; x += this.gridCellSize * this.scale) {
+        ctx.beginPath()
+        ctx.moveTo(x, 0)
+        ctx.lineTo(x, height)
+        ctx.strokeStyle = this.gridColor
+        ctx.lineWidth = this.gridLineWidth
+        ctx.stroke()
+      }
+
+      for (let y = 0; y <= height; y += this.gridCellSize * this.scale) {
+        ctx.beginPath()
+        ctx.moveTo(0, y)
+        ctx.lineTo(width, y)
+        ctx.strokeStyle = this.gridColor
+        ctx.lineWidth = this.gridLineWidth
+        ctx.stroke()
+      }
+
+      // 绘制圆点
+      for (let x = 0; x < width; x += this.gridCellSize * this.scale) {
+        for (let y = 0; y < height; y += this.gridCellSize * this.scale) {
+          if (x > 0 && y > 0) {
+            ctx.beginPath()
+            ctx.arc(x, y, this.dotRadius, 0, Math.PI * 2)
+            ctx.fillStyle = this.dotColor
+            ctx.fill()
+          }
+        }
+      }
+    },
+    addPoint2 () {
       this.points = [] // 清空白色点位数组
       this.drawingPoints = true // 重新开始绘制点位
       this.drawPoints() // 重新绘制画布

src/pages/modules/device.vue

@@ -1,35 +1,30 @@
 <template>
   <div class="page_container">
     <div class="t_box">
-      <el-tabs tab-position="left" @tab-click="tabClick">
-        <el-tab-pane label="自定义">
+      <el-tabs tab-position="left" v-model="activeName" @tab-click="tabClick">
+        <el-tab-pane label="自定义" name="zdy">
           <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="e in dataList" :key="e.point_code">
+            <el-col class="point_item" v-for="(e, i) in dataList" :key="'zdy' + i">
               <el-popover
                 placement="bottom"
-                trigger="click"
-                :value="popId === e.point_code"
-                @show="popId = e.point_code"
-                @hide="popId = null">
-                <el-row type="flex">
-                  <el-button class="task_button" v-for="e in radioOption" :key="e.value" @click="radioInput(e.value)">{{ e.label }}</el-button>
+                trigger="manual"
+                :ref="`popover-${i}`">
+                <el-row type="flex" justify="space-between" align="middle" style="margin-bottom: .1rem">
+                  <el-col :span="18"><el-input placeholder="修改名称" v-model="stationName" @focus="show" data-layout="normal"></el-input></el-col>
+                  <el-button type="success" icon="el-icon-check" size="mini" style="height: .3rem" :disabled="disabled" @click="_updateStation(e, i)"></el-button>
                 </el-row>
-                <div slot="reference" class="zbox point_item_i"><p>{{ e.point_code }}</p></div>
+                <el-row type="flex" justify="space-between">
+                  <el-button class="task_button" :class="{'task_checked': e.action_type === el.value}" v-for="el in radioOption" :key="el.value" @click="radioInput(e, i, el.value)">{{ el.label }}</el-button>
+                </el-row>
+                <div slot="reference" class="zbox point_item_i" @click="openPopover(i)"><p>{{ e.station_name }}</p></div>
               </el-popover>
             </el-col>
           </el-row>
         </el-tab-pane>
-        <el-tab-pane label="任务链">
+        <el-tab-pane label="任务链" name="rwl">
           <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="e in linkData" :key="e.point_code">
-              <div class="zbox point_item_i" @click="handleLinkCheck(e)"><p>{{ e.point_code }}</p></div>
-            </el-col>
-          </el-row>
-        </el-tab-pane>
-        <el-tab-pane label="标准任务">
-          <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="(e, i) in dataList" :key="i">
-              <div class="zbox point_item_i" @click="handleCheck(e)"><p>{{ e.point_code }}</p></div>
+            <el-col class="point_item" v-for="(e, i) in linkData" :key="'rwl' + i">
+              <div class="zbox point_item_i" @click="handleLinkCheck(e)"><p>{{ e.chain_name }}</p></div>
             </el-col>
           </el-row>
         </el-tab-pane>
@@ -38,14 +33,14 @@
     <el-row type="flex" class="result_w" justify="space-between" align="middle">
       <el-col :span="15" class="result_items_w">
         <el-row type="flex" class="result_items" justify="start" align="top">
-          <el-col class="pp_item" v-for="(e, i) in newData" :key="e.point_code">
+          <el-col class="pp_item" v-for="(e, i) in newData" :key="'new' + i">
             <el-row type="flex" align="middle">
               <div class="point_item point_checked">
                 <el-row type="flex" align="middle" class="zbox">
                   <el-col :span="18">
-                    <p style="padding-left: 0.02rem;">{{ e.point_code }}</p>
+                    <p style="padding-left: 0.02rem;">{{ e.station_name }}</p>
                   </el-col>
-                  <el-col :span="6" style="border-left: 1px solid #fff;"><p style="font-size: .12rem;font-weight: 700;text-align: center;padding-right: 0.02rem;">{{ e.radio }}</p></el-col>
+                  <el-col :span="6" style="border-left: 1px solid #fff;"><p style="font-size: .12rem;font-weight: 700;text-align: center;padding-right: 0.02rem;">{{ radioOption | findByValue(e.action_type) }}</p></el-col>
                 </el-row>
               </div>
               <i class="el-icon-caret-right icon-caret-right" :style="i === newData.length - 1 ? 'visibility: hidden' : ''"></i>
@@ -55,66 +50,288 @@
       </el-col>
       <el-col :span="8">
         <el-row type="flex" justify="space-between" style="flex-wrap: wrap" >
-          <el-col :span="11" style="margin-bottom: .08rem"><button class="button_control button_control_disabled" @click="newData = []"><p>删除任务链</p></button></el-col>
-          <el-col :span="11" style="margin-bottom: .08rem"><button class="button_control button_control_disabled"><p>取消任务</p></button></el-col>
-          <el-col :span="11"><button class="button_control"><p>保存任务</p></button></el-col>
-          <el-col :span="11"><button class="button_control"><p>发送任务</p></button></el-col>
+          <el-col v-if="activeName === 'rwl'" :span="11" style="margin-bottom: .08rem"><button class="button_control" :class="{'button_control_disabled': !chainId}" :disabled="disabled" @click="_deleteTaskChain"><p>删除任务链</p></button></el-col>
+          <el-col v-if="activeName === 'zdy'" :span="11" style="margin-bottom: .08rem"><button class="button_control" :class="{'button_control_disabled': !newData.length}" @click="newData = []"><p>清空</p></button></el-col>
+          <el-col :span="11" style="margin-bottom: .08rem"><button class="button_control" :disabled="disabled" @click="_cancelTask"><p>取消任务</p></button></el-col>
+          <el-col v-if="activeName === 'zdy'" :span="11"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_saveTask"><p>保存任务</p></button></el-col>
+          <el-col :span="11"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_sendTask"><p>发送任务</p></button></el-col>
         </el-row>
-        <!-- <button class="button_control button_control_disabled" style="margin-bottom: .08rem" @click="newData = []"><p>{{$t('Empty')}}</p></button>
-        <button class="button_control"><p :style="$i18n.locale === 'en-us' ? 'font-size: 0.19rem;' : 'font-size: 0.22rem;'">{{$t('SendTask')}}</p></button> -->
       </el-col>
     </el-row>
+    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
   </div>
 </template>
 
 <script>
+import { queryStation, queryTaskChain, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
 export default {
   data () {
     return {
-      popId: null,
-      radioOption: [{label: '取货', value: '取'}, {label: '放货', value: '放'}, {label: '移动', value: '移'}, {label: '返回点', value: '返'}],
-      dataList: [{point_code: 'A', radio: ''}, {point_code: 'B', radio: ''}, {point_code: 'C', radio: ''}, {point_code: 'D', radio: ''}, {point_code: 'E', radio: ''}, {point_code: 'F', radio: ''}],
+      activeName: 'zdy',
+      stationName: '',
+      radioOption: [{label: '取货', text: '取', value: 'Ascend'}, {label: '放货', text: '放', value: 'Descend'}, {label: '移动', text: '移', value: 'Move'}, {label: '返回点', text: '返', value: 'Customize'}],
+      dataList: [],
       newData: [],
-      linkData: [{point_code: 'A-B-C', radio: '取-放-移'}]
+      linkData: [],
+      chainId: null,
+      disabled: false,
+      loading: null,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
     }
   },
+  mounted () {
+    this._queryStation()
+  },
   methods: {
+    // 站点查询
+    async _queryStation () {
+      try {
+        let res = await queryStation()
+        if (res && res.data) {
+          this.dataList = [...res.data]
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    // 任务链查询
+    async _queryTaskChain () {
+      this.chainId = null
+      try {
+        let res = await queryTaskChain()
+        if (res && res.data) {
+          this.linkData = [...res.data]
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    // 点击自定义站点
+    openPopover (index) {
+      const popover = this.$refs[`popover-${index}`]
+      if (popover && popover[0]) {
+        popover[0].doShow()
+        this.stationName = ''
+      }
+    },
+    // 关闭弹窗
+    closePopover (index) {
+      const popover = this.$refs[`popover-${index}`]
+      if (popover && popover[0]) {
+        popover[0].doClose()
+      }
+    },
+    // 修改站点名称
+    async _updateStation (e, i) {
+      this.disabled = true
+      if (this.stationName === '') {
+        this.disabled = false
+        this.closePopover(i)
+        this.visible = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await updateStation(e.station_code, this.stationName)
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+        }
+        this.loading.close()
+        this.disabled = false
+        this.closePopover(i)
+        this.visible = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+        this.closePopover(i)
+        this.visible = false
+      }
+    },
+    // 切换标签
     tabClick () {
       this.newData = []
+      this.chainId = null
+      if (this.activeName === 'zdy') {
+        this._queryStation()
+      } else if (this.activeName === 'rwl') {
+        this._queryTaskChain()
+      }
     },
-    radioInput (e) {
-      const lastItem = this.newData.length > 0 ? this.newData[this.newData.length - 1].point_code : null
-      if (lastItem === this.popId) {
+    // 选取动作类型
+    radioInput (e, i, value) {
+      const lastItem = this.newData.length > 0 ? this.newData[this.newData.length - 1].station_code : null
+      if (lastItem === e.station_code) {
         this.$message('相邻的两个站点不能相同')
-        this.popId = ''
+        this.closePopover(i)
         return
       }
       if (this.newData.length > 4) {
         this.$message('最多选取5个站点')
-        this.popId = ''
+        this.closePopover(i)
         return
       }
-      this.newData.push({point_code: this.popId, radio: e})
-      this.popId = ''
-    },
-    handleCheck (e) {
-      if (this.newData.length > 3) {
-        return
-      }
-      if (this.newData.length === 0) {
-        this.newData.push({point_code: e.point_code, radio: '起'})
-      } else if (this.newData.length === 1) {
-        this.newData.push({point_code: e.point_code, radio: '终'})
-      } else if (this.newData.length === 2) {
-        this.newData.push({point_code: e.point_code, radio: '停'})
-      }
+      e.action_type = value
+      this.newData.push({station_code: e.station_code, station_name: e.station_name, action_type: e.action_type})
+      this.closePopover(i)
     },
+    // 点击任务链点位
     handleLinkCheck (e) {
-      const data = e.point_code.split('-')
-      const radio = e.radio.split('-')
-      data.map((e, i) => {
-        this.newData.push({point_code: e, radio: radio[i]})
+      const code = e.chain_point.split('-')
+      const cname = e.chain_name.split('-')
+      const type = e.action_type.split('-')
+      code.map((e, i) => {
+        this.newData.push({station_code: e, station_name: cname[i], action_type: type[i]})
       })
+      this.chainId = e.chain_id
+    },
+    // 发送任务
+    async _sendTask () {
+      this.disabled = true
+      if (!this.newData.length) {
+        this.disabled = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await sendTask(this.newData)
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+          this.newData = []
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    // 保存任务
+    async _saveTask () {
+      this.disabled = true
+      if (!this.newData.length) {
+        this.disabled = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await saveTask(this.newData)
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+          this.newData = []
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    // 取消任务
+    async _cancelTask () {
+      this.disabled = true
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await cancelTask()
+        if (res) {
+          this.$message(res.message)
+          this._queryStation()
+          this.newData = []
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    // 删除任务链
+    async _deleteTaskChain () {
+      this.disabled = true
+      if (!this.chainId) {
+        this.disabled = false
+        return
+      }
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await deleteTaskChain(this.chainId)
+        if (res) {
+          this.$message(res.message)
+          this._queryTaskChain()
+        }
+        this.loading.close()
+        this.disabled = false
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+        this.disabled = false
+      }
+    },
+    show (e) {
+      // 关闭中文keyboard
+      let arr = document.querySelectorAll('.hg-theme-default')
+      arr.forEach((ele) => {
+        ele.style.visibility = 'hidden'
+      })
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
     }
   }
 }
@@ -147,7 +364,6 @@ export default {
     line-height .2rem
     color #B4C1D8
     text-align center
-    display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3; /* 定义显示的行数 */
     overflow: hidden;
@@ -201,6 +417,9 @@ export default {
   &:active, &:hover
     border-color #146fd0
     border-left 1px solid #146fd0
+.task_button_checked
+  border-color #146fd0
+  border-left 1px solid #146fd0
 .task_checked
   color #FFF
   background-color #409EFF

src/pages/modules/login/login.vue

@@ -64,7 +64,7 @@
 
 <script>
 import KeyboardInput from '@components/keyboard-input'
-import {authlogin} from '@config/getData2.js'
+import {authlogin} from '@config/getData.js'
 import {encrypt} from '../../../main.js'
 export default {
   components: {