样式调整

src/pages/components/self-ucharts.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="self-ucharts"><canvas canvas-id="shopecharts" id="shopecharts" class="shopecharts"></canvas></view>
+	<view class="self-ucharts"><canvas :canvas-id="canvasId" :id="canvasId" class="shopecharts"></canvas></view>
 </template>
 
 <script>
@@ -21,6 +21,10 @@ export default {
     type: {
       type: String,
       default: 'pie'
+    },
+    canvasId: {
+      type: String,
+      default: 'qwe666'
     }
   },
   watch: {
@@ -57,7 +61,8 @@ export default {
       if (_self.series === null) {
         return
       }
-      const canvasId = 'shopecharts'
+      const canvasId = this.canvasId
+      console.log(canvasId)
       const series = _self.series
       new uCharts({
         $this: _self,
@@ -115,7 +120,7 @@ export default {
       if (_self.datas === null) {
         return
       }
-      const canvasId = 'shopecharts'
+      const canvasId = this.canvasId
       const series = _self.datas
       console.log(JSON.stringify(series))
       new uCharts({
@@ -205,7 +210,8 @@ export default {
 
 <style>
 .self-ucharts .shopecharts {
-	width: 690upx;
-	height: 550upx;
+	z-index: 1;
+	width: 600upx;
+	height: 500upx;
 }
 </style>

src/pages/dataAnalyse/dataAnalyse.vue

@@ -34,133 +34,137 @@
 				</view>
 			</view>
 		</view>
+		<view style="position: fixed;top: 150rpx;width: 100vw;">
 
-		<view class="" style="height: 102rpx;"></view>
-		<view class="btnS">
-			<view class="btn" :class="activeBtn == 0 ? 'active_Btn' : ''" @tap="activeBtn = 0">售检分析</view>
-			<view class="btn" :class="activeBtn == 1 ? 'active_Btn' : ''" @tap="activeBtn = 1">用户分析</view>
-		</view>
-		<view class="sale_box" v-if="activeBtn == 0">
-			<view class="box" v-if="intradayData">
-				<view class="todo-list">
-					<view class="item">
-						<view class="title">预订人次</view>
-						<view class="num">{{ intradayData.ydrc }}</view>
+		<scroll-view scroll-y="true" style="height: calc(100vh - 160rpx - 110rpx);">
+			<!-- <view class="" style="height: 102rpx;"></view> -->
+			<view class="btnS">
+				<view class="btn" :class="activeBtn == 0 ? 'active_Btn' : ''" @tap="activeBtn = 0">售检分析</view>
+				<view class="btn" :class="activeBtn == 1 ? 'active_Btn' : ''" @tap="activeBtn = 1">用户分析</view>
+			</view>
+			<view class="sale_box" v-if="activeBtn == 0">
+				<view class="box" v-if="intradayData">
+					<view class="todo-list">
+						<view class="item">
+							<view class="title">预订人次</view>
+							<view class="num">{{ intradayData.ydrc }}</view>
+						</view>
+						<view class="item">
+							<view class="title">销售金额</view>
+							<view class="num">{{ xsje }}元</view>
+						</view>
+						<view class="item">
+							<view class="title">入园人次</view>
+							<view class="num">{{ intradayData.ryrc }}</view>
+						</view>
+						<view class="item">
+							<view class="title">核销金额</view>
+							<view class="num">{{ hxje }}元</view>
+						</view>
 					</view>
-					<view class="item">
-						<view class="title">销售金额</view>
-						<view class="num">{{ xsje}}元</view>
+				</view>
+				<view class="something">
+					<view v-if="0 === shopID && shopOrdersTop && shopOrdersTop.length > 0" class="piece">
+						<view class="title">店铺订单量排行榜</view>
+						<view class="todo-list">
+							<cmd-progress
+								v-for="(item, i) in shopOrdersTop"
+								class="cmd-progress"
+								:key="i"
+								:total="shopOrdersTop | getMax"
+								:value="item.data"
+								stroke-color="linear-gradient(to right, #FFE873, #FFD600)"
+								status="active"
+								stroke-shape="square"
+								:title="item.name"
+								stroke-width="20"
+							></cmd-progress>
+						</view>
 					</view>
-					<view class="item">
-						<view class="title">入园人次</view>
-						<view class="num">{{ intradayData.ryrc }}</view>
+					<view v-if="0 === shopID && shopCheckTop && shopCheckTop.length > 0" class="piece">
+						<view class="title">核销金额排行榜</view>
+						<view class="todo-list">
+							<cmd-progress
+								v-for="(item, i) in shopCheckTop"
+								class="cmd-progress"
+								:key="i"
+								:total="shopCheckTop | getMax"
+								:value="item.data"
+								stroke-color="linear-gradient(to right, #FFE873, #FFD600)"
+								status="active"
+								stroke-shape="square"
+								:title="item.name"
+								stroke-width="20"
+							></cmd-progress>
+						</view>
 					</view>
-					<view class="item">
-						<view class="title">核销金额</view>
-						<view class="num">{{ hxje }}元</view>
+					<view v-if="0 !== shopID && ticketsBooking && ticketsBooking.length > 0" class="piece">
+						<view class="title">门票预定占比</view>
+						<view class="todo-list"><self-ucharts :series="ticketsBooking"></self-ucharts></view>
 					</view>
-				</view>
-			</view>
-			<view class="something">
-				<view v-if="0 === shopID && shopOrdersTop && shopOrdersTop.length > 0" class="piece">
-					<view class="title">店铺订单量排行榜</view>
-					<view class="todo-list">
-						<cmd-progress
-							v-for="(item, i) in shopOrdersTop"
-							class="cmd-progress"
-							:key="i"
-							:total="shopOrdersTop | getMax"
-							:value="item.data"
-							stroke-color="linear-gradient(to right, #FFE873, #FFD600)"
-							status="active"
-							stroke-shape="square"
-							:title="item.name"
-							stroke-width="20"
-						></cmd-progress>
+					<view v-if="0 !== shopID && ticketsSalesAmount && ticketsSalesAmount.length > 0" class="piece">
+						<view class="title">门票销售占比</view>
+						<view class="todo-list"><self-ucharts :series="ticketsSalesAmount"></self-ucharts></view>
 					</view>
-				</view>
-				<view v-if="0 === shopID && shopCheckTop && shopCheckTop.length > 0" class="piece">
-					<view class="title">核销金额排行榜</view>
-					<view class="todo-list">
-						<cmd-progress
-							v-for="(item, i) in shopCheckTop"
-							class="cmd-progress"
-							:key="i"
-							:total="shopCheckTop | getMax"
-							:value="item.data"
-							stroke-color="linear-gradient(to right, #FFE873, #FFD600)"
-							status="active"
-							stroke-shape="square"
-							:title="item.name"
-							stroke-width="20"
-						></cmd-progress>
+					<view v-if="0 !== shopID && checkPoint && checkPoint.length > 0" class="piece">
+						<view class="title">核销点销售占比</view>
+						<view class="todo-list"><self-ucharts :series="checkPoint"></self-ucharts></view>
 					</view>
-				</view>
-				<view v-if="0 !== shopID && ticketsBooking && ticketsBooking.length > 0" class="piece">
-					<view class="title">门票预定占比</view>
-					<view class="todo-list"><self-ucharts :series="ticketsBooking"></self-ucharts></view>
-				</view>
-				<view v-if="0 !== shopID && ticketsSalesAmount && ticketsSalesAmount.length > 0" class="piece">
-					<view class="title">门票销售占比</view>
-					<view class="todo-list"><self-ucharts :series="ticketsSalesAmount"></self-ucharts></view>
-				</view>
-				<view v-if="0 !== shopID && checkPoint && checkPoint.length > 0" class="piece">
-					<view class="title">核销点销售占比</view>
-					<view class="todo-list"><self-ucharts :series="checkPoint"></self-ucharts></view>
-				</view>
-				<view class="piece">
-					<view class="title" v-if="shopSellData">
-						<view class="left"><text class="future">产品销售数量走势</text></view>
-						<view class="right">
-							<view class="today-icon"></view>
-							<text class="title">今日</text>
-							<view class="yesterday-icon"></view>
-							<text class="title">昨日</text>
+					<view class="piece">
+						<view class="title" v-if="shopSellData">
+							<view class="left"><text class="future">产品销售数量走势</text></view>
+							<view class="right">
+								<view class="today-icon"></view>
+								<text class="title">今日</text>
+								<view class="yesterday-icon"></view>
+								<text class="title">昨日</text>
+							</view>
 						</view>
+						<view class="todo-list"><self-ucharts :datas="shopSellData" type="line" canvasId="shopSellData"></self-ucharts></view>
 					</view>
-					<view class="todo-list"><self-ucharts :datas="shopSellData" type="line"></self-ucharts></view>
-				</view>
-				<view class="piece">
-					<view class="title" v-if="shopMoney">
-						<view class="left"><text class="future">产品销售金额走势</text></view>
-						<view class="right">
-							<view class="today-icon"></view>
-							<text class="title">今日</text>
-							<view class="yesterday-icon"></view>
-							<text class="title">昨日</text>
+					<view class="piece">
+						<view class="title" v-if="shopMoney">
+							<view class="left"><text class="future">产品销售金额走势</text></view>
+							<view class="right">
+								<view class="today-icon"></view>
+								<text class="title">今日</text>
+								<view class="yesterday-icon"></view>
+								<text class="title">昨日</text>
+							</view>
 						</view>
+						<view class="todo-list"><self-ucharts :datas="shopMoney" type="line"></self-ucharts></view>
 					</view>
-					<view class="todo-list"><self-ucharts :datas="shopMoney" type="line"></self-ucharts></view>
 				</view>
 			</view>
-		</view>
-		<view class="sale_box" v-else>
-			<view class="box">
-				<view class="todo-list">
-					<view class="item" style="width: 100%;">
-						<view class="title">今日新增用户</view>
-						<view class="num">{{ todayNewUser }}</view>
+			<view class="sale_box" v-else>
+				<view class="box">
+					<view class="todo-list">
+						<view class="item" style="width: 100%;">
+							<view class="title">今日新增用户</view>
+							<view class="num">{{ todayNewUser }}</view>
+						</view>
 					</view>
 				</view>
-			</view>
-			<view class="something">
-				<view class="piece">
-					<view class="title">
-						<view class="left"><text class="future">新增用户走势</text></view>
+				<view class="something">
+					<view class="piece">
+						<view class="title">
+							<view class="left"><text class="future">新增用户走势</text></view>
+						</view>
+						<view class="todo-list"><self-ucharts :datas="brandNewUser" type="line"></self-ucharts></view>
+					</view>
+					<view v-if="ageProportion && ageProportion.length > 0" class="piece">
+						<view class="title">用户年龄占比</view>
+						<view class="todo-list"><self-ucharts :series="ageProportion"></self-ucharts></view>
+					</view>
+					<view v-if="genderProportion && genderProportion.length > 0" class="piece">
+						<view class="title">用户男女占比</view>
+						<view class="todo-list"><self-ucharts :series="genderProportion"></self-ucharts></view>
 					</view>
-					<view class="todo-list"><self-ucharts :datas="brandNewUser" type="line"></self-ucharts></view>
-				</view>
-				<view v-if="ageProportion && ageProportion.length > 0" class="piece">
-					<view class="title">用户年龄占比</view>
-					<view class="todo-list"><self-ucharts :series="ageProportion"></self-ucharts></view>
-				</view>
-				<view v-if="genderProportion && genderProportion.length > 0" class="piece">
-					<view class="title">用户男女占比</view>
-					<view class="todo-list"><self-ucharts :series="genderProportion"></self-ucharts></view>
 				</view>
 			</view>
-		</view>
+		</scroll-view>
 
+		</view>
 		<rf-loading v-if="loading"></rf-loading>
 		<tabBar :currentIndex="typeNum"></tabBar>
 	</view>
@@ -432,6 +436,7 @@ export default {
 	top: 0;
 	box-sizing: border-box;
 	z-index: 99;
+	height: 150rpx;
 	.header-warp {
 		display: flex;
 		height: 80rpx;
@@ -584,6 +589,11 @@ export default {
 
 	.piece {
 		margin-bottom: 45rpx;
+		min-height:550upx;
+		background-color: #ffffff;
+		padding: 43rpx 10rpx;
+		box-sizing: border-box;
+
 		.right {
 			display: flex;
 			justify-content: center;
@@ -626,10 +636,10 @@ export default {
 		// justify-content: center;
 		align-items: center;
 		flex-wrap: wrap;
-		margin-top: 30rpx;
+		// margin-top: 30rpx;
 		background-color: #ffffff;
 		box-sizing: border-box;
-		padding: 43rpx 30rpx;
+		padding: 13rpx 30rpx 43rpx 10rpx;
 		border-radius: 10rpx;
 
 		.item {