自定义化

pages/index/index.vue

@@ -226,9 +226,39 @@
 						<view class="body5main">
 
 							<view id="body5echart" class="body5class">
-
+								
+							</view>
+							<view id="body5echartLine" class="body5classLine">
+								<view class="titleline">
+									<view class="item" v-for="(item,index) in body5data.data">
+										<view class="k" :style="{
+											'background-color':getColorMapColor(index),
+											'color':getColorMapColor(index)
+											
+										} "></view>
+										<view class="n">{{item.lockName}}</view>
+										
+									</view>
+								</view>
+								<view class="line" v-for="(kuai,index) in body5data.lineList" :key="index">
+									<view v-for="(item,i) in kuai" 
+									:class="'  linebool  linebool'+item.bool"
+									  @click="selectBar(index)"
+									:style="{
+										width:(item.num/12*99)+'%',
+										height: '20px',
+										'line-height': '20px',
+										'z-index': item.bool?9:1,
+										'background-color':item.bool?getColorMapColor(index):'rgba(228,228,228,1)' ,
+									}">
+										{{item.bool?item.str:''}}
+									</view>
+								</view>
+								<view class="imgclass">
+									<image class="img" src="@/assets/img/index/body5echart-1.png" mode=""></image>
+									
+								</view>
 							</view>
-
 						</view>
 
 
@@ -440,7 +470,17 @@
 
 		</view>
 		<tabbar :current="0"></tabbar>
-
+		<!-- 点击详情弹窗 -->
+		    <view 
+		      class="detail-popup"
+		      v-if="selectedItem"
+		      :style="{ opacity: popupOpacity, transform: 'translate(-50%, ' + (popupTop - 10) + 'px)' }"
+		    >
+		      <view class="popup-content">
+		       1234
+		      </view>
+		      <view class="popup-arrow"></view>
+		    </view>
 	</view>
 </template>
 
@@ -464,7 +504,10 @@
 			jpContent
 		},
 		data() {
-			return {
+			return {
+				 selectedItem: null,
+				      popupTop: 0,
+				      popupOpacity: 0,
 				current1: 0,
 				showselect1: false,
 				current2: 0,
@@ -523,7 +566,29 @@
 
 				body5data: {
 					query: {},
-					data: {},
+					data: {},
+					lineList:[],
+					colorMap : [
+					
+						'#FFA500',
+						'#00FF00',
+						'#F44336',
+						'#E91E63',
+						'#9C27B0',
+						'#673AB7',
+						'#3F51B5',
+						'#2196F3',
+						'#03A9F4',
+						'#00BCD4',
+						'#009688',
+						'#CDDC39',
+						'#FFEB3B',
+						'#FFC107',
+						'#FF9800',
+						'#FF5722',
+						'#795548',
+						'#607D8B'
+					],
 					vue: {
 						queryN: "",
 						show: false,
@@ -548,14 +613,20 @@
 					body8: 0,
 					body9: 0,
 					body10: 0,
-				}
-			}
+				},
+				
+
+			}
+			
 		},
 		onLoad() {
 
 		},
-		onReady() {
-			this.getfindByOpenId();
+		onReady() {
+			
+			this.getfindByOpenId();
+			   
+
 		},
 		computed: {
 			companyListTabs() {
@@ -600,8 +671,26 @@
 				return sz
 			},
 		},
-		methods: {
-
+		methods: {
+			selectBar(index) {
+			    this.selectedItem = true;
+			    
+			    // 获取点击位置
+			    const query = uni.createSelectorQuery().in(this);
+			    query.selectAll('.linebool').boundingClientRect(rects => {
+			      if (rects && rects[index]) {
+			        const barRect = rects[index];
+			        this.popupTop = barRect.top ;
+			        
+			       
+			      }
+			    }).exec(); 
+			      
+			},
+			getColorMapColor(i){
+				var index=i%this.body5data.colorMap.length
+				return this.body5data.colorMap[index]
+			},
 			showTime(time) {
 				if (time) {
 					return time.substr(5).replace('-', '.')
@@ -1086,8 +1175,71 @@
 					})
 
 				})
-			},
-			getbody5() {
+			},
+			getbody5() {
+				// 颜色映射
+				
+				var dataApi = this.body5data.data;
+				var lineList=[]
+				
+				dataApi.forEach(item => {
+					var line=[]
+					var bool =-1
+					var num=0;
+					var str=""
+					var obj={
+						num:0,
+						str:""
+					}
+					
+					item.timeUseList.forEach(item2 => {
+						
+						
+						
+						Object.keys(item2).forEach(key1 => {
+							
+							
+							if(bool==-1){
+								bool=item2[key1]
+								str=""
+								line.push(obj)
+							}
+							
+							if (item2[key1]==bool) {
+								str+=key1
+								num++;
+								var szsplit=str.split('-')
+								obj.str=szsplit[0]+"点-"+szsplit[szsplit.length-1]+"点"
+								obj.num=num
+								obj.bool=bool
+							}else{
+								
+								bool=item2[key1]
+								obj={
+									num:1,
+									str:key1,
+									bool:bool
+								}
+								num=1
+								var szsplit=key1.split('-')
+								obj.str=szsplit[0]+"点-"+szsplit[szsplit.length-1]+"点"
+								
+								
+								str=key1
+								line.push(obj)
+							}
+							
+						})
+					})
+					lineList.push(line)
+				})
+				console.log(lineList)
+				this.body5data.lineList=lineList
+				
+			},
+			
+			getbody5old() {
+				this.getbody5New()
 				// 颜色映射
 				var colorMap = [
 
@@ -1164,7 +1316,7 @@
 				
 					
 				})
-				console.log(szTimeShow,szTimeShowNum)
+				
 				
 				
 				
@@ -2312,5 +2464,47 @@
 			border-top: 0px;
 			padding-top: 0px;
 		}
-	}
+	}
+	.body5classLine{
+		.line{
+			display: flex;
+			margin: 16rpx 0;
+		}
+		 .titleline{
+			     display: flex;
+			     justify-content: space-around;
+				 margin-bottom: 40rpx;
+				.item{
+					display: flex;
+					align-items: center;
+					.k{
+						border-radius: 4px;
+						 height: 30rpx;
+						 width: 40rpx;
+						 
+					} 
+					.n{}
+				} 
+		 }
+		.linebooltrue{
+				 white-space: pre;
+				 border-radius: 4px;
+				 margin: 0 1px;
+				     text-align: center;
+					 font-size: 22rpx;
+		}
+		.lineboolfalse{
+			border-radius: 4px;
+			background-color: rgba(228,228,228,1);
+		}
+		.imgclass{
+			.img{
+				width: 100%;
+				height:70rpx;
+			}
+		}
+	}
+	
+	
+
 </style>