root/apt-nl-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carrypoint

Browse Source
This commit is contained in:
xiangxy
2024-05-14 08:58:28 +08:00
parent 45f60763cc
commit 397ad870d0
1 changed files with 196 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
src/pages/modules/taskmanage/CarryPoint.vue
View File

@@ -7,7 +7,15 @@
</div> </div>
<div class="box1"> <div class="box1">
<div class="point-box"> <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> </div>
<div class="box2 buttons_wrapper"> <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="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="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="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>
</div> </div>
<jxDialog <jxDialog
@@ -107,115 +116,119 @@ export default {
statusbg: false, statusbg: false,
pkId: '', pkId: '',
selectObj: {}, selectObj: {},
startObj: '', // 起始点
returnObj: '', // 返回点
value: '', value: '',
// dataList: [] hover: '', // 隐藏内容
dataList: [ dataList: []
{ // dataList: [
point_code: '01', // {
code_name: '18-一线起升电机', // point_code: '01',
en_code_name: 'english-test' // code_name: '18-一线起升电机',
}, // en_code_name: 'english-test'
{ // },
point_code: '02', // {
code_name: 'A-ZD102' // point_code: '02',
}, // code_name: 'A-ZD102',
{ // en_code_name: 'english-002'
point_code: '3', // },
code_name: 'A-ZD103' // {
}, // point_code: '3',
{ // code_name: 'A-ZD103'
point_code: '4', // },
code_name: 'A-ZD101' // {
}, // point_code: '4',
{ // code_name: 'A-ZD101'
point_code: '5', // },
code_name: 'A-ZD101' // {
}, // point_code: '5',
{ // code_name: 'A-ZD101'
point_code: '6', // },
code_name: 'A-ZD101' // {
}, // point_code: '6',
{ // code_name: 'A-ZD101'
point_code: '7', // },
code_name: 'A-ZD101' // {
}, // point_code: '7',
{ // code_name: '二楼中间层休息点位与茶水间的充电桩交叉点1'
point_code: '8', // },
code_name: 'A-ZD101' // {
}, // point_code: '8',
{ // code_name: '我是一个超级长的标题，显示不下'
point_code: '9', // },
code_name: 'A-ZD101' // {
}, // point_code: '9',
{ // code_name: 'aaammm brown head big so daijgsd jigna whcignaig ijanoghoniojojio jsi '
point_code: '10', // },
code_name: 'A-ZD101' // {
}, // point_code: '10',
{ // code_name: 'A-ZD101'
point_code: '11', // },
code_name: 'A-ZD101' // {
}, // point_code: '11',
{ // code_name: 'A-ZD101'
point_code: '12', // },
code_name: 'A-ZD101' // {
}, // point_code: '12',
{ // code_name: 'A-ZD101'
point_code: '13', // },
code_name: 'A-ZD101' // {
}, // point_code: '13',
{ // code_name: 'A-ZD101'
point_code: '14', // },
code_name: 'A-ZD101' // {
}, // point_code: '14',
{ // code_name: 'A-ZD101'
point_code: '15', // },
code_name: 'A-ZD101' // {
}, // point_code: '15',
{ // code_name: 'A-ZD101'
point_code: '16', // },
code_name: 'A-ZD101' // {
}, // point_code: '16',
{ // code_name: 'A-ZD101'
point_code: '17', // },
code_name: 'A-ZD101' // {
}, // point_code: '17',
{ // code_name: 'A-ZD101'
point_code: '18', // },
code_name: 'A-ZD101' // {
}, // point_code: '18',
{ // code_name: 'A-ZD101'
point_code: '19', // },
code_name: 'A-ZD101' // {
}, // point_code: '19',
{ // code_name: 'A-ZD101'
point_code: '20', // },
code_name: 'A-ZD101' // {
}, // point_code: '20',
{ // code_name: 'A-ZD101'
point_code: '21', // },
code_name: 'A-ZD101' // {
}, // point_code: '21',
{ // code_name: 'A-ZD101'
point_code: '22', // },
code_name: 'A-ZD101' // {
}, // point_code: '22',
{ // code_name: 'A-ZD101'
point_code: '23', // },
code_name: 'A-ZD101' // {
}, // point_code: '23',
{ // code_name: 'A-ZD101'
point_code: '24', // },
code_name: 'A-ZD101' // {
}, // point_code: '24',
{ // code_name: 'A-ZD101'
point_code: '25', // },
code_name: 'A-ZD101' // {
}, // point_code: '25',
{ // code_name: 'A-ZD101'
point_code: '26', // },
code_name: 'A-ZD101' // {
} // point_code: '26',
] // code_name: 'A-ZD101'
// }
// ]
} }
}, },
created () { created () {
@@ -300,20 +313,48 @@ export default {
this.$refs.child.disabled = false this.$refs.child.disabled = false
}, },
toRadio (e) { 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.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) { toSure (pcode, type, ncode) {
this.confirmPoint(pcode, type) this.confirmPoint(pcode, type, ncode)
}, },
toClear () { toClear () {
this.selectObj = {} this.selectObj = {}
} }
// handleMouseenter (e) {
// console.log('ee', e)
// // this.hover = e.code_name
// }
} }
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.ellipsis {
overflow: hidden; /* 确保超出容器的文本被裁剪 */
white-space: nowrap; /* 确保文本在一行内显示，不换行 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
width: 90%;
}
.con .con
float left float left
.box0 .box0
@@ -336,24 +377,64 @@ export default {
width 100% width 100%
height 600px height 600px
overflow-y scroll overflow-y scroll
display flex
flex-wrap wrap
.point .point
width 248px width 248px
height 134px height 134px
line-height 134px
color #e1e9f4 color #e1e9f4
font-size 26px font-size 26px
text-align center text-align center
margin-right 3px margin-right 3px
margin-bottom 13px margin-bottom 13px
background center / 100% 100% url(../../../images/new/bg2.png) no-repeat 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 .statusbg
box-sizing border-box box-sizing border-box
color #58e9ff color #58e9ff
background center / 100% 100% url(../../../images/new/bg1.png) no-repeat !important 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 .box2
position fixed position fixed
left 310px left 310px
bottom 50px bottom 50px
.enClass .button_control p .enClass .button_control p
font-size 28px 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> </style>