From 5aec5e91091045030052123119e142156704cb9e Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Mon, 8 Aug 2022 15:56:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/getData2.js          |  36 +++++-
 src/main.js                     |   3 +-
 src/pages/proj/HomePage.vue     |   1 +
 src/pages/proj/TaskGenerate.vue | 209 ++++++++++++++++++++++++++++++++
 src/router/index.js             |   5 +
 src/style/layout.styl           | 184 ++++++++++++++++++++++++----
 6 files changed, 410 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/proj/TaskGenerate.vue

diff --git a/src/config/getData2.js b/src/config/getData2.js
index b9feea4..298e283 100644
--- a/src/config/getData2.js
+++ b/src/config/getData2.js
@@ -1,12 +1,40 @@
 import {post} from '@config/http.js'
-// import store from '../vuex/store'
 
+/** 任务生成 */
 // 1.1查询所有区域信息
-export const handArea = (type) => post('api/anjyf/hand/area', {
-  area_flag: type
+export const handArea = () => post('api/anjyf/hand/area', {
 })
-
+// export const handArea = () => {
+//   let res = {
+//     code: '1',
+//     desc: '',
+//     result: [{region_id: '1', region_name: 'a'}]
+//   }
+//   return res
+// }
 // 1.2根据区域查询设备编号及状态
 export const handPoint = (reg) => post('api/anjyf/hand/point', {
   region: reg
 })
+// export const handPoint = (reg) => {
+//   let res = {
+//     code: '1',
+//     desc: '',
+//     result: [{status: '1', device_name: 'a'}, {status: '2', device_name: 'aa'}, {status: '2', device_name: 'aa'}, {status: '2', device_name: 'aa'}, {status: '2', device_name: 'aa'}]
+//   }
+//   return res
+// }
+// 1.3创建任务（确定起点、终点）
+export const handTask = (scode, ncode, type, batch) => post('api/anjyf/hand/task', {
+  start_devicecode: scode,
+  next_devicecode: ncode,
+  material_type: type,
+  batch: batch
+})
+// export const handTask = (scode, ncode, type, batch) => {
+//   let res = {
+//     code: '1',
+//     desc: 'ok'
+//   }
+//   return res
+// }
diff --git a/src/main.js b/src/main.js
index c1c2be4..f7ca8da 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,8 +5,7 @@ import App from './App'
 import router from './router'
 import store from './vuex/store'
 import '@style/reset.css'
-// import '@style/layout.styl'
-import '@style/common.styl'
+import '@style/layout.styl'
 import fastClick from 'fastclick'
 import infiniteScroll from 'vue-infinite-scroll'
 import vuescroll from 'vuescroll/dist/vuescroll-native'
diff --git a/src/pages/proj/HomePage.vue b/src/pages/proj/HomePage.vue
index d64db38..7c723b6 100644
--- a/src/pages/proj/HomePage.vue
+++ b/src/pages/proj/HomePage.vue
@@ -13,6 +13,7 @@
       <ul>
         <li @click="toSure('zlmanage')">指令管理</li>
         <li @click="toSure('taskmanage')">任务管理</li>
+        <li @click="toSure('TaskGenerate')">任务生成</li>
       </ul>
     </div>
   </div>
diff --git a/src/pages/proj/TaskGenerate.vue b/src/pages/proj/TaskGenerate.vue
new file mode 100644
index 0000000..2a70016
--- /dev/null
+++ b/src/pages/proj/TaskGenerate.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="inner-wrap">
+    <nav-bar title="任务生成"></nav-bar>
+    <div class="clear container">
+      <div class="fl left_block">
+        <div class="item_block" :class="reg === e.region_id ? 'item_block_focus' : ''" v-for="e in areaArr" :key="e.region_id" @click="getPoint(e)"><p>{{e.region_name}}</p></div>
+      </div>
+      <div class="fl right_block">
+        <div class="clear icons">
+          <div class="fl item_icon">
+            <div class="color_icon gray"></div>
+            <div class="font_icon">空</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon orange"></div>
+            <div class="font_icon">空载具</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon green"></div>
+            <div class="font_icon">有货有载具</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon blue"></div>
+            <div class="font_icon">有任务</div>
+          </div>
+        </div>
+        <div class="locate_block">
+          <div class="item_locate" v-for="(e, i) in pointArr" :key="i" :class="['gray', 'orange', 'green', 'blue'][Number(e.status)]" @click="setInfo(e)">
+            <p>站点：{{e.device_name}}</p>
+          </div>
+        </div>
+        <div class="clear bottom_block">
+          <div class="fl dot_item">
+            <p class="p1">起始点</p>
+            <p class="p2">设备号：{{scodeObj.device_name}}</p>
+          </div>
+          <div class="fl dot_item">
+            <p class="p1">目标点</p>
+            <p class="p2">设备号：{{ncodeObj.device_name}}</p>
+          </div>
+          <div class="fr btn_block">
+            <button class="btn btn1 mgb20" @click="cancle">清空</button>
+            <button class="btn btn1" :class="{'btn-disabled': JSON.stringify(scodeObj) === '{}' || JSON.stringify(ncodeObj) === '{}'}"  :disabled="disabled1" @click="toSure">确认</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@components/NavBar.vue'
+import {handArea, handPoint, handTask} from '@config/getData2'
+export default {
+  name: 'TaskGenerate',
+  components: {
+    NavBar
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      areaArr: [],
+      pointArr: [],
+      reg: '',
+      scodeObj: {},
+      ncodeObj: {},
+      disabled1: false
+    }
+  },
+  mounted () {
+    this.initArea()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    refresh (id) {
+      this.timer = setInterval(() => {
+        this.initPonit(id)
+      }, this.interTime)
+    },
+    /** 查询区域 */
+    async initArea () {
+      let res = await handArea()
+      if (res.code === '1') {
+        this.areaArr = [...res.result]
+        if (this.areaArr.length > 0) {
+          this.initPonit(this.areaArr[0].region_id)
+        }
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    async initPonit (reg) {
+      let res = await handPoint(reg)
+      if (res.code === '1') {
+        this.pointArr = [...res.result]
+        this.reg = reg
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 根据区域查询设备编号及状态 */
+    getPoint (e) {
+      clearInterval(this.timer)
+      this.timer = null
+      this.initPonit(e.region_id)
+      this.refresh(e.region_id)
+    },
+    /** 选择起始点目标点 */
+    setInfo (e) {
+      if (JSON.stringify(this.scodeObj) === '{}') {
+        this.scodeObj = e
+      } else if (JSON.stringify(this.ncodeObj) === '{}') {
+        this.ncodeObj = e
+      }
+    },
+    /** 清空 */
+    cancle () {
+      this.scodeObj = {}
+      this.ncodeObj = {}
+      this.disabled1 = false
+    },
+    /** 确定 */
+    toSure () {
+      this.disabled1 = true
+      if (JSON.stringify(this.scodeObj) === '{}') {
+        this.toast('起始点不能为空')
+        this.disabled1 = false
+        return
+      }
+      if (JSON.stringify(this.ncodeObj) === '{}') {
+        this.toast('目标点不能为空')
+        this.disabled1 = false
+        return
+      }
+      this.sureTask()
+    },
+    async sureTask () {
+      try {
+        let res = await handTask(this.scodeObj.device_code, this.ncodeObj.device_code, '', '')
+        if (res.code === '1') {
+          this.toast(res.desc)
+          setTimeout(() => {
+            this.getPoint(this.reg)
+            this.scodeObj = {}
+            this.ncodeObj = {}
+          }, 2000)
+        } else {
+          this.Dialog(res.desc)
+        }
+        this.disabled1 = false
+      } catch (err) {
+        this.disabled1 = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.item_locate
+  _fj(center)
+.i_block
+  _fj()
+  _wh(100%, .6rem)
+  padding  0 .1rem
+.chose_block
+  _fj()
+  _wh(100%, .4rem)
+.chose_btn
+  cursor pointer
+  _wh(50%, .4rem)
+  _font(.14rem, .4rem, #fff,,center)
+  background-color #F56C6C
+.chose_btn1
+  background-color #fff
+  color #F56C6C
+.white
+  background-color #fff
+  color $green
+.locate_block
+  height calc(100% - 1.4rem)
+.bottom_block
+  _fj()
+  width 100%
+  height 1rem
+  padding 0 .2rem
+  border-top 2px solid #e5e5e5
+.btn_block
+  width 1.4rem
+  height 100%
+  _fj(center,)
+  flex-direction column
+.btn1
+  width 1rem
+  height .3rem
+  line-height .3rem
+  font-size 14px
+  text-align center
+.mgb20
+  margin-bottom .1rem
+button:disabled
+  background-color #e1e1e1
+  color #444
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index e3900fb..2677ec1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ const Login = r => require.ensure([], () => r(require('@page/Login')), 'Login')
 const HomePage = r => require.ensure([], () => r(require('@page/proj/HomePage')), 'HomePage')
 const ZlManage = r => require.ensure([], () => r(require('@page/proj/ZlManage')), 'ZlManage')
 const TaskManage = r => require.ensure([], () => r(require('@page/proj/TaskManage')), 'TaskManage')
+const TaskGenerate = r => require.ensure([], () => r(require('@page/proj/TaskGenerate')), 'TaskGenerate')
 
 Vue.use(Router)
 
@@ -31,6 +32,10 @@ export default new Router({
     {
       path: '/taskmanage',
       component: TaskManage
+    },
+    {
+      path: '/TaskGenerate',
+      component: TaskGenerate
     }
   ]
 })
diff --git a/src/style/layout.styl b/src/style/layout.styl
index 70eef37..36cf6c9 100644
--- a/src/style/layout.styl
+++ b/src/style/layout.styl
@@ -554,13 +554,14 @@ header
     vertical-align middle
 .msg_box
   display inline-block
-  width 420px
-  padding 25px
+  width 4.2rem
+  min-width 360px
+  padding .25rem
   vertical-align middle
   background-color #fff
-  border-radius 4px
+  border-radius .04rem
   border 1px solid #ebeef5
-  font-size 18px
+  font-size .18rem
   box-shadow 0 2px 12px 0 rgb(0 0 0 / 10%)
   text-align left
   overflow hidden
@@ -575,39 +576,57 @@ header
   background #000
   z-index 99
 .msg_item
-  height 50px
-  line-height 50px
+  height .4rem
+  line-height .4rem
+  margin-bottom .07rem
 .label_item
   display inline-block
-  width 90px
-  font-size 16px
+  width .9rem
+  font-size .16rem
   line-height inherit
 .from_item
   display inline-block
-  width calc(100% - 100px)
+  width calc(100% - 1rem)
   line-height inherit
 .from_item .el-select
   width 100%
 .from_item .el-input
-  font-size 14px
+  font-size .14rem
 .from_item .el-input__inner
-  height 50px
+  height .4rem
   line-height inherit
+.el-select .el-input.is-focus .el-input__inner
+  border-color #e74f1a
 .el-select-dropdown__item span
-  font-size 14px !important
+  font-size .14rem !important
 .el-select .el-input .el-select__caret
-  line-height 50px
+  line-height .4rem
+.el-input__inner
+  padding 0 .15rem
+.el-input--suffix .el-input__inner
+  padding-right .3rem
+.el-input__suffix
+  right .05rem
+.el-select .el-input .el-select__caret
+  font-size .14rem
+.el-input__icon
+  width .25rem
 .msg_btns
-  height 35px
-  line-height 35px
-  width 300px
-  margin 25px auto 0
+  _wh(3rem, .35rem)
+  line-height .35rem
+  margin .2rem auto 0
   _fj()
+.msg_input
+  _wh(100%, .4rem)
+  padding 0 .15rem
+  border-radius 4px
+  border 1px solid #DCDFE6
+  _font(.14rem,.4rem,#606266,,)
 .msg_btn
-  width 80px
-  height 35px
-  line-height 35px
-  font-size 14px
+  width .8rem
+  height .35rem
+  line-height .35rem
+  font-size .14rem
   color #fff
   background-color #d7592f
   border-radius 5px
@@ -625,4 +644,125 @@ header
   margin 0 auto
   cursor pointer
   border-radius 2px
-  background-color #e1e1e1
\ No newline at end of file
+  background-color #e1e1e1
+// el-radio
+.el-radio
+  margin-right .1rem
+.el-radio__inner
+  _wh(.14rem, .14rem)
+  border .01rem solid #DCDFE6
+  &::after
+    _wh(.04rem, .04rem)
+.el-radio__label
+  font-size .14rem
+  padding-left .1rem
+.el-radio__input
+  vertical-align text-bottom
+// 区域样式
+.container
+  width 100%
+  height calc(100% - .4rem)
+.left_block
+  width 15%
+  height 100%
+  overflow-y scroll
+  background-color #f7f7f7
+.item_block
+  _fj(center,)
+  width 95%
+  height .7rem
+  border-bottom .02rem solid #e5e5e5
+  margin 0 auto
+  padding 0 20%
+  &:hover
+    background-color #eaeaea
+  p
+    _font(.16rem,.22rem,#444,,center)
+.item_block_focus
+  background-color #e1e1e1
+.right_block
+  width 85%
+  height 100%
+  overflow hidden
+.icons
+  height .4rem
+  line-height .4rem
+  padding-left .2rem
+.item_icon
+  _fj(flex-start)
+.color_icon
+  _wh(.15rem, .15rem)
+  border-radius 4px
+.font_icon
+  _font(.14rem,.4rem,#666,,)
+  padding 0 .2rem 0 .1rem
+.blue
+  background-color $blue
+  border .01rem solid $blue
+.green
+  background-color $green
+  border .01rem solid $green
+.orange
+  background-color #E6A23C
+  border .01rem solid #E6A23C
+.gray
+  background-color $gray
+  border .01rem solid $gray
+.red
+  background-color $red
+  border .01rem solid $red
+.locate_block
+  width calc(100% - .4rem)
+  height calc(100% - .6rem)
+  margin 0 .2rem
+  overflow-y scroll
+.item_locate
+  float left
+  _wh(23%, .72rem)
+  margin 0 2% .1rem 0
+  border-radius .1rem
+  overflow hidden
+  _fj()
+  padding 0 .1rem
+  p
+    _font(.16rem,.24rem,#fff,,center)
+.bottom_block
+  _fj()
+  width 100%
+  height 1rem
+  padding 0 .2rem
+  border-top 2px solid #e5e5e5
+.p1
+  display block
+  width 2rem
+  border-bottom .01rem solid #fff
+  _font(.15rem, .3rem, $red,,center)
+  background-color #e5e5e5
+.p2
+  display block
+  _wh(2rem, .5rem)
+  box-sizing border-box
+  padding 0 .04rem
+  background-color #e5e5e5
+  _font(.15rem, .25rem, #464646,,left)
+  word-break break-all
+  text-overflow ellipsis
+  overflow-y auto
+  _fj()
+  justify-content center
+.btn_block
+  width 1.4rem
+  height 100%
+  _fj(center,)
+  flex-direction column
+.btn1
+  width 1rem
+  height .3rem
+  line-height .3rem
+  font-size 14px
+  text-align center
+.mgb20
+  margin-bottom .1rem
+button:disabled
+  background-color #e1e1e1
+  color #444
\ No newline at end of file