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 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>