435 lines
10 KiB
Vue
435 lines
10 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="设备分组" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||
height='36'></u-navbar>
|
||
<view class="fzbox">
|
||
<view class="card" :class="{fixed: index === 0}" v-for="(item,index) in groupList " :key="index" v-if="index==0">
|
||
<view class="card_left">
|
||
<view class="img">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u3jTlduBUSi1yA2H56m9" mode="" v-show="index === 0"></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uPN9ht93jyHZHQGzbsQC" mode="" v-show="index !== 0"></image>
|
||
</view>
|
||
<view class="txt">
|
||
{{item.groupName}}({{item.deviceCount}})
|
||
</view>
|
||
</view>
|
||
<view class="card_right">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uzgOF6t4abt95qDf111j" mode=""
|
||
style="width: 34rpx;height: 34rpx;margin-right: 30rpx;"></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u5rf4EUUv9e5KBef4efW" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<HM-dragSorts ref="dragSorts" :list="newobj" :autoScroll="true" :feedbackGenerator="false" @newList="handleNewList" rowHeight='50'
|
||
@change="change" @confirm="confirm" @onclick="onclick" :listBackgroundColor='F7FAFE'></HM-dragSorts>
|
||
|
||
</view>
|
||
<view class="btn" @click="sprice()">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uGAS855QnMnfJjPEKK5K" mode=""></image>
|
||
新建分组
|
||
</view>
|
||
<u-popup v-model="showpopup" mode="center" border-radius='20'>
|
||
<view class="popcard" v-if="showremake">
|
||
<view class="tit">
|
||
修改分组名称
|
||
</view>
|
||
<view class="ipt">
|
||
<u-input v-model="remake" placeholder=" " border='surround' placeholder-style='font-size: 24rpx;' />
|
||
</view>
|
||
<view class="btnbox">
|
||
<view class="btn2" @click="close()">
|
||
取消
|
||
</view>
|
||
<view class="btn1" @click="sub(1)">
|
||
确定
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="popcard" v-if="showpeice" >
|
||
<view class="tit">
|
||
新建分组
|
||
</view>
|
||
<view class="ipt">
|
||
<u-input v-model="price" placeholder="请输入分组名称" border='surround' placeholder-style='font-size: 24rpx;'/>
|
||
</view>
|
||
<view class="btnbox">
|
||
<view class="btn2" @click="close()">
|
||
取消
|
||
</view>
|
||
<view class="btn1" @click="sub(2)">
|
||
确定
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dragSorts from '@/components/HM-dragSorts/HM-dragSorts.vue'
|
||
export default {
|
||
components: {
|
||
'HM-dragSorts': dragSorts
|
||
},
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F7FAFE",
|
||
},
|
||
obj: [],
|
||
newobj:[],
|
||
cardHeight: 114,
|
||
touchStartIndex: -1,
|
||
startY: 0,
|
||
direction: 'vertical',
|
||
touchMoveTimer: null,
|
||
groupList:[],
|
||
showpopup:false,
|
||
remake:'',
|
||
price:'',
|
||
showpeice:false,
|
||
showremake:false,
|
||
firstlist:[]
|
||
|
||
|
||
};
|
||
},
|
||
computed: {
|
||
totalHeight() {
|
||
return this.obj.length * this.cardHeight;
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.getgroup();
|
||
},
|
||
methods: {
|
||
sub(num){
|
||
if(num==1){
|
||
let data ={
|
||
groupId:this.groupid,
|
||
groupName:this.remake
|
||
}
|
||
this.$u.put("/app/group",data).then((res) => {
|
||
// this.$forceUpdate()
|
||
if (res.code == 200) {
|
||
this.showpopup=false
|
||
this.showremake=false
|
||
this.getgroup();
|
||
|
||
// this.loadings=true
|
||
// this.initChart()
|
||
}
|
||
});
|
||
|
||
}else if(num==2){
|
||
let data ={
|
||
groupName:this.price,
|
||
groupSort:1
|
||
}
|
||
this.showpopup=false
|
||
this.showpeice=false
|
||
this.$u.post("/app/group",data).then((res) => {
|
||
// this.$forceUpdate()
|
||
if (res.code == 200) {
|
||
this.getgroup();
|
||
|
||
// this.loadings=true
|
||
// this.initChart()
|
||
}
|
||
});
|
||
|
||
}
|
||
},
|
||
getgroup(){
|
||
this.$u.get("/app/group/list").then((res) => {
|
||
// this.$forceUpdate()
|
||
if (res.code == 200) {
|
||
this.groupList=res.rows
|
||
this.firstlist= this.groupList[0]
|
||
this.newobj = this.groupList.slice(1);
|
||
this.remake=''
|
||
this.price=''
|
||
// this.loadings=true
|
||
// this.initChart()
|
||
}
|
||
});
|
||
},
|
||
delgroup(id){
|
||
|
||
this.$u.delete("/app/group/"+id).then((res) => {
|
||
// this.$forceUpdate()
|
||
if (res.code == 200) {
|
||
this.getgroup();
|
||
}
|
||
});
|
||
},
|
||
putgroupname(id){
|
||
this.groupid=id
|
||
this.sremake()
|
||
},
|
||
handleNewList(newList) {
|
||
|
||
|
||
|
||
let list = [this.firstlist, ...newList];
|
||
|
||
const newSortedList = list.map((item, index) => {
|
||
return {
|
||
groupId: item.groupId,
|
||
groupSort: index + 1 // 使用索引值加 1 作为 groupSort
|
||
};
|
||
});
|
||
console.log("新的排列数据:", newSortedList);
|
||
setTimeout(()=> {
|
||
this.$u.put("/app/group/changeSort",newSortedList).then((res) => {
|
||
// this.$forceUpdate()
|
||
if (res.code == 200) {
|
||
// this.getgroup()
|
||
}
|
||
});
|
||
}, 200);
|
||
|
||
// 在这里处理新的排列数据，可以将其存储到父组件的数据中，或者进行其他操作
|
||
},
|
||
sremake(){
|
||
this.showpopup=true
|
||
this.showremake=true
|
||
},
|
||
sprice(){
|
||
this.showpopup=true
|
||
this.showpeice=true
|
||
},
|
||
close() {
|
||
this.showpeice=false
|
||
this.showremake=false
|
||
this.showpopup=false
|
||
|
||
},
|
||
push() {
|
||
// 和数组的push使用方法一致，可以push单行，也可以push多行
|
||
this.$refs.dragSorts.push({
|
||
"name": "push行",
|
||
"icon": "/static/img/2.png"
|
||
});
|
||
},
|
||
unshift() {
|
||
// 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
|
||
this.$refs.dragSorts.unshift({
|
||
"name": "unshift行",
|
||
"icon": "/static/img/2.png"
|
||
});
|
||
},
|
||
splice() {
|
||
// 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
|
||
this.$refs.dragSorts.splice(1, 1, {
|
||
"name": "splice行",
|
||
"icon": "/static/img/2.png"
|
||
});
|
||
},
|
||
onclick(e) {
|
||
|
||
},
|
||
change(e) {
|
||
console.log('=== change start ===');
|
||
console.log("被拖动行: " + JSON.stringify(e.moveRow));
|
||
console.log('原始下标：', e.index);
|
||
console.log('移动到：', e.moveTo);
|
||
console.log('=== change end ===');
|
||
},
|
||
confirm(e) {
|
||
|
||
},
|
||
|
||
|
||
|
||
|
||
handleTouchStart(e) {
|
||
this.touchStartIndex = e.currentTarget.dataset.index;
|
||
this.startY = e.touches[0].clientY;
|
||
},
|
||
|
||
handleTouchMove(e) {
|
||
clearTimeout(this.touchMoveTimer);
|
||
|
||
this.touchMoveTimer = setTimeout(() => {
|
||
const deltaY = e.touches[0].clientY - this.startY;
|
||
const newIndex = Math.floor((this.obj[this.touchStartIndex].top + deltaY) / this.cardHeight);
|
||
const maxIndex = this.obj.length - 1;
|
||
|
||
if (newIndex >= 1 && newIndex <= maxIndex) {
|
||
this.obj[this.touchStartIndex].top += deltaY;
|
||
this.obj[newIndex].top -= deltaY;
|
||
|
||
this.startY = e.touches[0].clientY;
|
||
this.$nextTick(() => {
|
||
this.direction = 'vertical';
|
||
});
|
||
} else {
|
||
this.direction = 'none';
|
||
}
|
||
}, 16); // 控制触发频率，大约 60 帧每秒
|
||
},
|
||
|
||
handleTouchEnd() {
|
||
this.touchStartIndex = -1;
|
||
this.startY = 0;
|
||
},
|
||
|
||
handleMoveChange(e) {
|
||
this.obj = e.detail.source;
|
||
|
||
// 调整位置，防止重叠
|
||
this.obj.forEach((item, index) => {
|
||
// 添加保护，确保 item 存在
|
||
if (item) {
|
||
item.top = index * this.cardHeight;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F7FAFE;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
.popcard{
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
// padding: 40rpx;
|
||
width: 550rpx;
|
||
height: 400rpx;
|
||
border-radius: 20rpx;
|
||
.tit{
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
.ipt{
|
||
margin-top: 60rpx;
|
||
width: 80%;
|
||
// width: 60%;
|
||
.u-input::placeholder {
|
||
font-size: 20px;
|
||
color: red;
|
||
}
|
||
}
|
||
.btnbox{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
.btn2{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50%;
|
||
// justify-content: center;
|
||
|
||
// width: 200rpx;
|
||
// height: 70rpx;
|
||
// border-radius: 20rpx;
|
||
font-size: 32rpx;
|
||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
background-color: #2A82E4;
|
||
}
|
||
.btn1{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50%;
|
||
// justify-content: center;
|
||
|
||
// width: 200rpx;
|
||
// height: 70rpx;
|
||
// border-radius: 20rpx;
|
||
font-size: 32rpx;
|
||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||
font-weight: 400;
|
||
color: #000;
|
||
background-color: #fff;
|
||
border: 1rpx solid #ccc;
|
||
}
|
||
}
|
||
|
||
}
|
||
.fzbox {
|
||
|
||
.card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 32rpx auto 0;
|
||
width: 682rpx;
|
||
height: 114rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
|
||
.card_left {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
margin-left: 48rpx;
|
||
|
||
.img {
|
||
width: 35.3rpx;
|
||
height: 35.3rpx;
|
||
}
|
||
|
||
.txt {
|
||
margin-left: 52rpx;
|
||
font-size: 36rpx;
|
||
font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.card_right {
|
||
margin-right: 38rpx;
|
||
|
||
image {
|
||
width: 45.51rpx;
|
||
height: 31.86rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 32rpx auto 0;
|
||
border-radius: 30rpx;
|
||
width: 682rpx;
|
||
height: 114rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
|
||
image {
|
||
margin-right: 28rpx;
|
||
width: 39.92rpx;
|
||
height: 39.92rpx;
|
||
}
|
||
|
||
font-size: 36rpx;
|
||
font-family: Source Han Sans,
|
||
Source Han Sans;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
}
|
||
</style> |