img

src/pages/modules/home/home.vue

@@ -1,38 +1,45 @@
 <template>
-  <div class="main-container">
+  <div class="main-container box1">
     <div class="con1">
-      <button v-if="dataInfo.button_name" @click="clickSave">{{dataInfo.button_name}}</button>
+      <div class="tip">障碍物告警</div>
     </div>
     <div class="con2">
-      <div class="infoli">
+      <!-- <button v-if="dataInfo.button_name" @click="clickSave">{{dataInfo.button_name}}继续搬运</button> -->
-        <img src="../../../images/aio/icon2.png">
+      <div class="rt">
-        <span class="title">设备信息：</span>
+        <div class="rttxt">设备信息</div>
-        <span class="txt">{{dataInfo.device_info}}</span>
       </div>
-      <div class="infoli">
+      <div class="rc">
-        <img src="../../../images/aio/icon5.png">
+        <div class="infoli01">
-        <span class="title">当前任务：</span>
+          <span class="title">设备信息</span>
-        <span class="txt">{{dataInfo.task_name}}</span>
+          <span class="txt01">{{dataInfo.device_info}}</span>
-      </div>
+          <div class="line"></div>
-      <div class="infoli">
+        </div>
-        <img src="../../../images/aio/icon5.png">
+        <div class="infoli">
-        <span class="title">任务状态：</span>
+          <span class="title">当前任务</span>
-        <span class="txt">{{dataInfo.task_status}}</span>
+          <span class="txt">{{dataInfo.task_name}}</span>
-      </div>
+          <div class="line"></div>
-      <div class="infoli">
+        </div>
-        <img src="../../../images/aio/icon5.png">
+        <div class="infoli">
-        <span class="title">任务数量：</span>
+          <span class="title">任务状态</span>
-        <span class="txt">{{dataInfo.task_num}}</span>
+          <span class="txt">{{dataInfo.task_status}}</span>
-      </div>
+          <div class="line"></div>
-      <div class="infoli">
+        </div>
-        <img src="../../../images/aio/icon6.png">
+        <div class="infoli">
-        <span class="title">当前速度：</span>
+          <span class="title">任务数量</span>
-        <span class="txt">{{dataInfo.speed}}</span>
+          <span class="txt">{{dataInfo.task_num}}</span>
-      </div>
+          <div class="line"></div>
-      <div class="infoli">
+        </div>
-        <img src="../../../images/aio/icon4.png">
+        <div class="infoli infoli3">
-        <span class="title">AGV故障：</span>
+          <span class="title">当前速度</span>
-        <span class="txt">{{dataInfo.error_name}}</span>
+          <span class="txt">{{dataInfo.speed}}</span>
+          <div class="speed-bg"></div>
+          <div class="line" style="top: 110px"></div>
+        </div>
+        <div class="infoli infoli3">
+          <span class="title">AGV故障</span>
+          <span class="txt txt2">{{dataInfo.error_name}}</span>
+        </div>
+        <button class="btn" @click="clickSave">{{dataInfo.button_name}}继续搬运</button>
       </div>
     </div>
   </div>
@@ -50,12 +57,20 @@ export default {
     return {
       interTime: this.$store.getters.setTime,
       timer: null,
-      dataInfo: {}
+      // dataInfo: {}
+      dataInfo: {
+        device_info: 'NobleLiftPs10LMT_ HuaHai',
+        task_name: '无',
+        task_status: '有任务未执行',
+        task_num: '待执行',
+        speed: '0.0m/s',
+        error_name: '障碍物告警'
+      }
     }
   },
   created () {
-    this.initData()
+    // this.initData()
-    this.refresh()
+    // this.refresh()
   },
   beforeDestroy () {
     clearInterval(this.timer)
@@ -100,6 +115,8 @@ export default {
   color #fa6400
 .cgreen
   color #54C0B3
+.box1
+  background center / 100% 100% url(../../../images/new/bg-home.png) no-repeat
 .con0
   height 1rem
   margin-top .26rem
@@ -127,46 +144,100 @@ export default {
   width 4.5rem
   height 4.5rem
   // background center / 100% 100% url(../../../images/aio/car2.png) no-repeat
-  background center / 100% 100% url(../../../images/aio/AGV223.gif) no-repeat
+  background center / 100% 100% url(../../../images/new/car-home.png) no-repeat
+  // background center / 100% 100% url(../../../images/aio/AGV223.gif) no-repeat
   margin-left .95rem
   margin-right .95rem
-  margin-top 1.1rem
+  margin-top 1.5rem
-  button
+  .tip
-    box-sizing border-box
+    width 542px
-    border 8px solid #F1F1F5
+    height 120px
-    border-radius 16px
+    line-height 120px
-    font-size .3rem
+    color #FF907F
-    background #ffffff
+    font-style italic
-    padding 0.2rem
+    font-size 36px
-    font-size 24px
+    text-align center
+    background center / 100% 100% url(../../../images/new/bg-home-tip.png) no-repeat
 .con2
   float left
-  width 4.8rem
+  margin-top 100px
-  height 4.5rem
+.btn
-  background center / 100% 100% url(../../../images/aio/bg2.png) no-repeat
+  width 335px
-  padding-top .2rem
+  height 91px
-  margin-top 1.1rem
+  background center / 100% 100% url(../../../images/new/button.png) no-repeat
-  .infoli
+  margin-left 167px
-    width 4.5rem
+  position relative
-    line-height 0.65rem
+  top -20px
-    height 0.65rem
+.rt
-    background #ffffff
+  width 646px
-    margin 0 auto
+  height 102px
-    // margin-bottom 2px
+  font-size 36px
-    border-bottom 1px dotted #cccccc
+  font-style italic
-    img
+  color #F6F9FE
-      float left
+  background center / 100% 100% url(../../../images/new/bg-home-r1.png) no-repeat
-      margin .22rem .15rem 0 .31rem
+  .rttxt
-      width .22rem
+    margin-left 31px
-      height .22rem
+    padding-top 40px
-    .title
+.rc
-      float left
+  width 652px
-      display inline-block
+  height 697px
-      font-size .2rem
+  font-size 36px
-      color #323232
+  color #B4C1D8
-    .txt
+  background center / 100% 100% url(../../../images/new/bg-home-r2.png) no-repeat
-      float left
+.infoli01
-      display inline-block
+  width 542px
-      font-size .2rem
+  height 140px
-      color #FA6400
+  margin 0 auto
+  padding-top 45px
+  .title
+    float left
+    display inline-block
+    color #f6f9fe
+  .txt01
+    float left
+    display inline-block
+    color #3CC1FF
+    margin-left 54px
+    width 330px
+    line-height 36px
+.infoli
+  width 542px
+  line-height 94px
+  height 94px
+  margin 0 auto
+  .title
+    float left
+    display inline-block
+    color #f6f9fe
+  .txt
+    float left
+    display inline-block
+    color #3CC1FF
+    margin-left 54px
+.infoli3
+  line-height 94px
+  height 124px
+  .title
+    float left
+    display inline-block
+    color #f6f9fe
+  .txt
+    float left
+    display inline-block
+    color #3CC1FF
+    margin-left 54px
+.speed-bg
+  width 513px
+  height 12px
+  background center / 100% 100% url(../../../images/new/bg-home-r3.png) no-repeat
+  position relative
+  top 95px
+.line
+  width 543px
+  height 1px
+  background center / 100% 100% url(../../../images/new/bg-home-r4.png) no-repeat
+  position relative
+  top 92px
+.txt2
+  color #E54F29 !important
 </style>

src/pages/modules/taskmanage/CarryPoint.vue

@@ -2,14 +2,14 @@
 <div class="main-container">
   <div class="movepoint">
     <div class="con">
+      <div class="box0">
+        <div class="title">搬运起点</div>
+      </div>
       <div class="box1">
-        <div class="point fl" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
+        <div class="point fl" :class="{'statusbg': pkId === e.point_code}" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
       </div>
       <div class="box2">
-        <span class="span1">目标站点：</span>
+        <div class="btn" @click="toSure">定为目标站点</div>
-        <span class="span2">{{selectObj.code_name}}</span>
-        <button class="btn btn1" @click="toSure">确定</button>
-        <button class="btn btn2" @click="toClear">清除</button>
       </div>
     </div>
   </div>
@@ -22,51 +22,53 @@ export default {
   name: 'MovePoint',
   data () {
     return {
+      statusbg: false,
+      pkId: '',
       selectObj: {},
       // dataList: []
       dataList: [
         {
-          id: '1',
+          point_code: '1',
           code_name: 'A-ZD101'
         },
         {
-          id: '2',
+          point_code: '2',
           code_name: 'A-ZD102'
         },
         {
-          id: '3',
+          point_code: '3',
           code_name: 'A-ZD103'
         },
         {
-          id: '4',
+          point_code: '4',
           code_name: 'A-ZD101'
         },
         {
-          id: '5',
+          point_code: '5',
           code_name: 'A-ZD101'
         },
         {
-          id: '6',
+          point_code: '6',
           code_name: 'A-ZD101'
         },
         {
-          id: '7',
+          point_code: '7',
           code_name: 'A-ZD101'
         },
         {
-          id: '8',
+          point_code: '8',
           code_name: 'A-ZD101'
         },
         {
-          id: '9',
+          point_code: '9',
           code_name: 'A-ZD101'
         },
         {
-          id: '10',
+          point_code: '10',
           code_name: 'A-ZD101'
         },
         {
-          id: '11',
+          point_code: '11',
           code_name: 'A-ZD101'
         }
       ]
@@ -94,6 +96,7 @@ export default {
       }
     },
     toRadio (e) {
+      this.pkId = this.pkId === e.point_code ? '' : e.point_code
       this.selectObj = e
     },
     toSure () {
@@ -111,61 +114,65 @@ export default {
 <style lang="stylus" scoped>
 .con
   float left
-  margin-left .95rem
+.box0
-  margin-top .39rem
+  width 1586px
+  height 102px
+  background center / 100% 100% url(../../../images/new/bg-task-r1.png) no-repeat
+  .title
+    font-size 36px
+    color #F6F9FE
+    padding-left 39px
+    padding-top 48px
 .box1
-  width 10rem
+  width 1592px
-  // height 6.1rem
+  height 819px
+  background center / 100% 100% url(../../../images/new/bg-task-r2.png) no-repeat
+  padding 28px 41px
   .point
-    width 1.8rem
+    width 232px
-    line-height .9rem
+    height 120px
-    color #FA6400
+    line-height 120px
-    font-size .24rem
+    // width 246px
+    // height 134px
+    // line-height 134px
+    color #B4C1D8
+    font-size 36px
     text-align center
-    border .1rem solid #DFE1E6
+    margin-right 19px
-    border-radius .2rem
+    margin-bottom 20px
-    background #ffffff
+    background #3D486C
-    margin-right .2rem
+    border 1px solid #cccccc
-    margin-bottom .35rem
+    // margin-right 13px
+    // margin-bottom 13px
+    // background center / 100% 100% url(../../../images/new/bg2.png) no-repeat
+  .statusbg
+    // width 246px
+    // height 134px
+    // line-height 134px
+    width 232px
+    height 120px
+    line-height 120px
+    box-sizing border-box
+    color #3CC1FF
+    font-size 36px
+    text-align center
+    margin-right 19px
+    margin-bottom 20px
+    background #3D486C
+    border 1px solid #3CC1FF
+    // margin-right 13px
+    // margin-top -10px
+    // background center / 232px 120px url(../../../images/new/bg1.png) no-repeat !important
 .box2
   position fixed
-  bottom .5rem
+  left 935px
-  width 9.8rem
+  bottom 88px
-  height 1.5rem
-  border .16rem solid #DFE1E6
-  border-radius .2rem
   background #ffffff
-  .span1
-    position absolute
-    left .3rem
-    top .34rem
-    display inline-block
-    line-height .5rem
-    font-size .24rem
-    border-right 3px solid #FA6400
-    width 1.6rem
-    color #464646
-  .span2
-    position absolute
-    left 2.5rem
-    top .38rem
-    display inline-block
-    font-size .3rem
-    color #fa6400
   .btn
-    width 1.4rem
+    width 335px
-    line-height .88rem
+    line-height 91px
-    font-size .24rem
+    font-size 36px
-    border-radius .28rem
+    text-align center
-    color #ffffff
+    color #EFF2FF
-  .btn1
+    background center / 100% 100% url(../../../images/new/button.png) no-repeat
-    position absolute
-    left 6rem
-    top .15rem
-    background #FD6A35
-  .btn2
-    position absolute
-    left 7.6rem
-    top .15rem
-    background #989EBB
 </style>