From 397ad870d0f146fd1b70e8887be534c6636f006e Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Tue, 14 May 2024 08:58:28 +0800
Subject: [PATCH] carrypoint

---
 src/pages/modules/taskmanage/CarryPoint.vue | 311 ++++++++++++--------
 1 file changed, 196 insertions(+), 115 deletions(-)

diff --git a/src/pages/modules/taskmanage/CarryPoint.vue b/src/pages/modules/taskmanage/CarryPoint.vue
index 08d1720..2fd6575 100644
--- a/src/pages/modules/taskmanage/CarryPoint.vue
+++ b/src/pages/modules/taskmanage/CarryPoint.vue
@@ -7,7 +7,15 @@
       </div>
       <div class="box1">
         <div class="point-box">
-          <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 class="point" :class="{'statusbg':startObj === e.point_code,'returnbg':returnObj === e.point_code}" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">
+            <div class="popover" v-if="hover.length > 20 && hover === e.code_name">
+              {{hover}}
+              <span class="popper_arrow"></span>
+            </div>
+              {{e.code_name}}
+              <!-- <span class="ellipsis">{{e.code_name}}</span> -->
+              <!-- <span style="display: inline-block; width: 0;">{{e.code_name}}</span> -->
+            </div>
         </div>
       </div>
       <div class="box2 buttons_wrapper">
@@ -15,7 +23,8 @@
         <button class="button_control" @click="toSure(selectObj.point_code, '4')"><p>{{ $t('carrypoint.button2') }}</p></button>
         <button class="button_control" @click="showDialog('1')"><p>{{ $t('carrypoint.button3') }}</p></button>
         <!-- <button class="button_control" @click="toSure(selectObj.point_code, '1')"><p>{{ $t('carrypoint.button4') }}</p></button> -->
-        <button class="button_control" @click="showDialog('2')"><p>{{ $t('carrypoint.button4') }}</p></button>
+        <!-- <button class="button_control" @click="showDialog('2')"><p>{{ $t('carrypoint.button4') }}</p></button> -->
+        <button class="button_control" @click="toSure(startObj, '1', returnObj)"><p>{{ $t('carrypoint.button4') }}</p></button>
       </div>
     </div>
     <jxDialog
@@ -107,115 +116,119 @@ export default {
       statusbg: false,
       pkId: '',
       selectObj: {},
+      startObj: '', // 起始点
+      returnObj: '', // 返回点
       value: '',
-      // dataList: []
-      dataList: [
-        {
-          point_code: '01',
-          code_name: '18-一线起升电机',
-          en_code_name: 'english-test'
-        },
-        {
-          point_code: '02',
-          code_name: 'A-ZD102'
-        },
-        {
-          point_code: '3',
-          code_name: 'A-ZD103'
-        },
-        {
-          point_code: '4',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '5',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '6',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '7',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '8',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '9',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '10',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '11',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '12',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '13',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '14',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '15',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '16',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '17',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '18',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '19',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '20',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '21',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '22',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '23',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '24',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '25',
-          code_name: 'A-ZD101'
-        },
-        {
-          point_code: '26',
-          code_name: 'A-ZD101'
-        }
-      ]
+      hover: '', // 隐藏内容
+      dataList: []
+      // dataList: [
+      //   {
+      //     point_code: '01',
+      //     code_name: '18-一线起升电机',
+      //     en_code_name: 'english-test'
+      //   },
+      //   {
+      //     point_code: '02',
+      //     code_name: 'A-ZD102',
+      //     en_code_name: 'english-002'
+      //   },
+      //   {
+      //     point_code: '3',
+      //     code_name: 'A-ZD103'
+      //   },
+      //   {
+      //     point_code: '4',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '5',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '6',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '7',
+      //     code_name: '二楼中间层休息点位与茶水间的充电桩交叉点1'
+      //   },
+      //   {
+      //     point_code: '8',
+      //     code_name: '我是一个超级长的标题，显示不下'
+      //   },
+      //   {
+      //     point_code: '9',
+      //     code_name: 'aaammm brown head big so daijgsd jigna whcignaig ijanoghoniojojio jsi '
+      //   },
+      //   {
+      //     point_code: '10',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '11',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '12',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '13',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '14',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '15',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '16',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '17',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '18',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '19',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '20',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '21',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '22',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '23',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '24',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '25',
+      //     code_name: 'A-ZD101'
+      //   },
+      //   {
+      //     point_code: '26',
+      //     code_name: 'A-ZD101'
+      //   }
+      // ]
     }
   },
   created () {
@@ -300,20 +313,48 @@ export default {
       this.$refs.child.disabled = false
     },
     toRadio (e) {
-      this.pkId = this.pkId === e.point_code ? '' : e.point_code
+      console.log('seletobj====', e)
+      // this.pkId = this.pkId === e.point_code ? '' : e.point_code
       this.selectObj = e
-      this.toast('终点已选中')
+      // this.toast('终点已选中')
+
+      if (this.startObj && this.returnObj) {
+        // 已选中情况下清空
+        this.startObj = ''
+        this.returnObj = ''
+        this.toast('已选点已清空')
+        return
+      }
+      if (!this.startObj) {
+        this.startObj = e.point_code
+        this.toast('终点已选中')
+        return
+      }
+      if (this.startObj && !this.returnObj) {
+        this.returnObj = e.point_code
+        this.toast('返回点已选中')
+      }
     },
-    toSure (pcode, type) {
-      this.confirmPoint(pcode, type)
+    toSure (pcode, type, ncode) {
+      this.confirmPoint(pcode, type, ncode)
     },
     toClear () {
       this.selectObj = {}
     }
+    // handleMouseenter (e) {
+    //   console.log('ee', e)
+    //   // this.hover = e.code_name
+    // }
   }
 }
 </script>
 <style lang="stylus" scoped>
+.ellipsis {
+  overflow: hidden; /* 确保超出容器的文本被裁剪 */
+  white-space: nowrap; /* 确保文本在一行内显示，不换行 */
+  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
+  width: 90%;
+}
 .con
   float left
 .box0
@@ -336,24 +377,64 @@ export default {
     width 100%
     height 600px
     overflow-y scroll
+    display flex
+    flex-wrap wrap
     .point
       width 248px
       height 134px
-      line-height 134px
       color #e1e9f4
       font-size 26px
       text-align center
       margin-right 3px
       margin-bottom 13px
       background center / 100% 100% url(../../../images/new/bg2.png) no-repeat
+      display flex
+      justify-content center
+      align-items center
+      position relative
+      overflow hidden
+      text-overflow ellipsis
     .statusbg
       box-sizing border-box
       color #58e9ff
       background center / 100% 100% url(../../../images/new/bg1.png) no-repeat !important
+    .returnbg
+      box-sizing border-box
+      color #ff0
+      background center / 100% 100% url(../../../images/new/bg1.png) no-repeat !important
 .box2
   position fixed
   left 310px
   bottom 50px
 .enClass .button_control p
   font-size 28px
+.popover
+  top 10px
+  width 240px
+  transform-origin center bottom
+  z-index 2099
+  // display none
+  padding 8px 20px
+  position absolute
+  background #fff
+  min-width 150px
+  border-radius 4px
+  border 1px solid #ebeef5
+  padding 12px
+  z-index 2000
+  color #606266
+  line-height 1.4
+  text-align justify
+  font-size 14px
+  box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
+  word-break break-all
+.popper_arrow
+  position relative
+  width 0px
+  height 0px
+  border-style solid
+  top 81px
+  left 50%
+  border-width 10px
+  border-color #fff transparent  transparent  transparent
 </style>