You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
262 lines
7.7 KiB
262 lines
7.7 KiB
2 years ago
|
<template>
|
||
|
|
<view class="home_page_container">
|
||
|
|
<view :style="{paddingTop:styles.top+styles.height + 'px'}" class="home_page_header">
|
||
|
|
<view class="home_page_header_title">
|
||
|
|
{{user.name?`Hi ,${user.name}` : user.userPhone?user.userPhone:'暂未设置'}}
|
||
|
|
<uni-icons @tap.stop='close()' class="iconclass" color="#ffffff" custom-prefix="iconfont" type="iconkaiguan" size="35">
|
||
|
|
</uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="home_page_header_identity">{{user.roles[0].roleName}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view :style="{transform:`rotate(${180}deg)`}" class="home_page_menu">
|
||
|
|
<view class="home_page_menu_name">
|
||
|
|
{{menuList[menuIndex].name?menuList[menuIndex].name:''}}
|
||
|
|
</view>
|
||
|
|
<view class="bgtracking"></view>
|
||
|
|
<view class="bj"></view>
|
||
|
|
<view :style="{transform:`rotate(${trackingPosition.angle}deg)`}" @click="gestureAnalysis"
|
||
|
|
class="home_page_menu_circular">
|
||
|
|
<view @click="menuClick(index)" class="home_page_menu_item" v-for="(item,index) in menuList"
|
||
|
|
:style="{left:item.x,top:item.y,transform:`rotate(${180+trackingPosition.fangle}deg)`}">
|
||
|
|
<uni-icons class="menu_icon" :style="{transform:`scale(${menuIndex==index?1.2:1})`}"
|
||
|
|
:color="menuIndex==index? '#2866FF': '#ffffff'" custom-prefix="iconfont" :type="item.icon"
|
||
|
|
size="25"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view :style="{transform:`translateY(${menuIndex!==null&&Submenu?0:-433}rpx)`}" class="Submenu">
|
||
|
|
<view @tap.stop="jump(item)" v-if="user.authList.includes(item.lable)" v-for="(item,index) in menuList[menuIndex].submenu" class="Submenu_item">
|
||
|
|
<view @tap.stop="collectionFn(item)" class="label">
|
||
|
|
<uni-icons :color=" iconFn(item) " custom-prefix="iconfont" type="iconshoucang-yishoucang" size="30"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="Submenu_item_name">{{item.name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="collection">
|
||
|
|
<view @tap.stop="jump(item)" v-for="(item,index) in collection" class="collection_item">
|
||
|
|
<view @tap.stop="remove(item)" class="tip">
|
||
|
|
<uni-icons custom-prefix="iconfont" color="#ffffff" type="iconchiping" size="20"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="collection_item_name">
|
||
|
|
<uni-icons custom-prefix="iconfont" color="#2866FF" :type="item.icon" size="30"></uni-icons>
|
||
|
|
<view class="collection_item_text">{{item.name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="collectionbg">
|
||
|
|
<view v-for="(item,index) in 3" class="collection_itembg">
|
||
|
|
<view>
|
||
|
|
<text>点击</text> <uni-icons style="margin-left: 10rpx;" color="#bbbbbb" custom-prefix="iconfont" type="iconshoucang-yishoucang" size="12"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view>收藏</view>
|
||
|
|
<!--
|
||
|
|
<view>Here</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import menus from './menu'
|
||
|
|
import oilIdentityApi from '@/api/oil-identity'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
user:null,
|
||
|
|
collection:[],
|
||
|
|
menuList: [],
|
||
|
|
trackingPosition: {
|
||
|
|
angle: 0,
|
||
|
|
fangle: 0
|
||
|
|
},
|
||
|
|
Submenu: false,
|
||
|
|
menuIndex: 0,
|
||
|
|
styles: null,
|
||
|
|
mousePosition: 0,
|
||
|
|
circle_w: 520, //圆盘的宽
|
||
|
|
circle_h: 600, //圆盘的高
|
||
|
|
PI: 360, //分布角度，默认为360deg
|
||
|
|
stard: 360, //起始角度
|
||
|
|
stard_s: null, //用来默认储存第一个初始值
|
||
|
|
boxNum: 5, //圆盘上覆盖的小圆点个数
|
||
|
|
descTitle: '', //模块描述标题
|
||
|
|
descContent: '', //模块描述内容
|
||
|
|
activeIndex: 1, //默认下标
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.styles = uni.getMenuButtonBoundingClientRect();
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.initFn();
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
collection:function(n,o){
|
||
|
|
uni.setStorageSync('collection',n);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
close() {
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '确认退出登录',
|
||
|
|
success: function (res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
oilIdentityApi.logoutAuthSystem().then(res => {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '../login/login?type=1'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
} else if (res.cancel) {
|
||
|
|
console.log('用户点击取消');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
jump(e){
|
||
|
|
if(this.user.authList.includes(e.lable)){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:e.router,
|
||
|
|
fail(e) {
|
||
|
|
console.log('失败')
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
title:'暂无权限',
|
||
|
|
icon:'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
remove(e){
|
||
|
|
let indexk ;
|
||
|
|
this.collection.forEach((item,index)=>{
|
||
|
|
if(e.name==item.name){
|
||
|
|
indexk = index
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.collection.splice(indexk,1);
|
||
|
|
},
|
||
|
|
iconFn(e){
|
||
|
|
return this.collection.filter((item)=>e.name==item.name).length==0?'#bbbbbb':'#FFB730';
|
||
|
|
},
|
||
|
|
initFn() {
|
||
|
|
this.menuList = menus
|
||
|
|
this.menuList.forEach((item, index) => {
|
||
|
|
item = Object.assign(item, this.circularPositioning(index))
|
||
|
|
})
|
||
|
|
this.trackingPosition.x = this.menuList[0].x;
|
||
|
|
this.trackingPosition.y = this.menuList[0].y;
|
||
|
|
this.collection = uni.getStorageSync('collection')||[];
|
||
|
|
this.user = uni.getStorageSync('user');
|
||
|
|
},
|
||
|
|
collectionFn(e){
|
||
|
|
console.log(this.collection)
|
||
|
|
if(this.collection.length==0){
|
||
|
|
this.collection.unshift(e)
|
||
|
|
}else{
|
||
|
|
let repeatTest = this.collection.filter((item)=>e.name==item.name).length==0?true:false;
|
||
|
|
if(repeatTest){
|
||
|
|
if(this.collection.length>=3){
|
||
|
|
this.collection.splice(this.collection.length-1,1)
|
||
|
|
}
|
||
|
|
this.collection.unshift(e)
|
||
|
|
}else{
|
||
|
|
this.remove(e)
|
||
|
|
// uni.showToast({
|
||
|
|
// title:'无需重复添加',
|
||
|
|
// icon:'none'
|
||
|
|
// })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
gestureAnalysis(e) {
|
||
|
|
console.log(e, '*****')
|
||
|
|
},
|
||
|
|
indexDis(e){
|
||
|
|
let x = this.menuIndex
|
||
|
|
let y = e
|
||
|
|
console.log(x,y)
|
||
|
|
let average = 360 / this.menuList.length;
|
||
|
|
let a = x-y;
|
||
|
|
let b = this.menuList.length - 1 - (x-y-1);
|
||
|
|
let deg = a>b?b*average:a*average;
|
||
|
|
if(b>a){
|
||
|
|
this.trackingPosition.angle = deg*-1
|
||
|
|
}else{
|
||
|
|
this.trackingPosition.angle = deg
|
||
|
|
}
|
||
|
|
console.log(this.trackingPosition.angle)
|
||
|
|
|
||
|
|
this.menuIndex = null
|
||
|
|
setTimeout(() => {
|
||
|
|
this.menuIndex = e
|
||
|
|
}, 500);
|
||
|
|
},
|
||
|
|
menuClick(index) {
|
||
|
|
// let newList = []
|
||
|
|
// // let arrayList = this.menuList.length
|
||
|
|
// let arrayList = 8
|
||
|
|
// let alient = 0
|
||
|
|
// if (arrayList % 2 == 0){
|
||
|
|
// alient = Math.floor(arrayList/2)
|
||
|
|
// }else{
|
||
|
|
// alient = Math.floor(arrayList/2)+1
|
||
|
|
// }
|
||
|
|
// let bbb = 7;
|
||
|
|
// index =6;
|
||
|
|
// console.log("index:{}alient:{},menuIndex{}arrayList{}",index,alient,bbb,arrayList);
|
||
|
|
// // // 计算当前坐标点和目标左边点差值0
|
||
|
|
// for(let i = 0; i <= arrayList-1; i++){
|
||
|
|
// let aaa = bbb;
|
||
|
|
// if(i<=alient){
|
||
|
|
// aaa = bbb-(alient-i);
|
||
|
|
// if(aaa < 0){
|
||
|
|
// aaa = arrayList-aaa
|
||
|
|
// console.log("1inde:{},aaa:{}",i,aaa)
|
||
|
|
// }else{
|
||
|
|
// console.log("2inde:{},aaa:{}",i,aaa)
|
||
|
|
// }
|
||
|
|
// }else{
|
||
|
|
// aaa = bbb+(i-alient);
|
||
|
|
// if(aaa >= arrayList){
|
||
|
|
// aaa = aaa-arrayList
|
||
|
|
// console.log("3inde:{},aaa:{}",i,aaa)
|
||
|
|
// }else{
|
||
|
|
// console.log("4inde:{},aaa:{}",i,aaa)
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// }
|
||
|
|
// // NO=8
|
||
|
|
this.Submenu = true
|
||
|
|
let average = 360 / this.menuList.length;
|
||
|
|
this.trackingPosition.angle = index * average;
|
||
|
|
this.trackingPosition.fangle = -this.trackingPosition.angle;
|
||
|
|
this.menuIndex = null
|
||
|
|
setTimeout(() => {
|
||
|
|
this.menuIndex = index
|
||
|
|
}, 500);
|
||
|
|
|
||
|
|
},
|
||
|
|
circularPositioning(index, position) {
|
||
|
|
let avd = this.PI / this.menuList.length //每一个 img-box 对应的角度
|
||
|
|
let ahd = (avd * Math.PI) / 180 //每一个 img-box 对应的弧度
|
||
|
|
let radius = this.circle_w / 2 //圆的半径
|
||
|
|
let x = (Math.sin(ahd * index) * radius) - 30 + 300 + 'rpx'
|
||
|
|
let y = (Math.cos(ahd * index) * radius) - 30 + 300 + 'rpx'
|
||
|
|
return {
|
||
|
|
x,
|
||
|
|
y
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@import url("./newindex.css");
|
||
|
|
</style>
|