日报详情页面

pages/mine/daily/dailyDetail.vue

@@ -6,17 +6,116 @@
 				<text class="h4">生成时间：2022-01-27 01：22</text>
 			</view>
 		</view>
-		
-		<view class="donutChart">
-			  <qiun-data-charts
-			  	:key="000" 
-			  	type="ring" 
-			  	:chartData="chartData"
-			  	:canvas2d="true" 
-			  	:canvasId='wangxiaohuahahahahaha000'
-			  	:opts='opts'
-			    background="#FFFFFF"/>
+
+		<view class="donutChart">
+			<qiun-data-charts :key="000" type="ring" :chartData="donutChartData" :canvas2d="true"
+				:canvasId='wangxiaohuahahahahaha000' :opts='donutChartOpts' background="#FFFFFF" />
 		</view>
+
+		<view class="tit">异动指标</view>
+
+		<view class="lineChart">
+			<view class="lineT">平均执行率 ：98%</view>
+			<view class="lineChart">
+				<qiun-data-charts type="line" :chartData="lineChartData1" :opts='lineChartOpts' background="none"
+					:ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
+			</view>
+			<view class="details">
+				<view class="statusIcon down"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="lineChart">
+			<view class="lineT">平均接待时长 ：66min</view>
+			<view class="lineChart">
+				<qiun-data-charts type="line" :chartData="lineChartData2" :opts='lineChartOpts' background="none"
+					:ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyiccc" :canvas2d="true" />
+			</view>
+			<view class="details">
+				<view class="statusIcon down"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+
+		<view class="tit">稳定指标</view>
+
+		<view class="stabilityItem">
+			<view class="T">平均执行率 ：98%</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="stabilityItem">
+			<view class="T">最低执行率 ：28%</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="stabilityItem">
+			<view class="T">平均执行率 ：98%</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="stabilityItem">
+			<view class="T">设备使用率 ：75%(在线15，离线5)</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="stabilityItem">
+			<view class="T">接待量 ：35</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="stabilityItem">
+			<view class="T">有效接待 ：18</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="stabilityItem">
+			<view class="T">违禁接待次数 ：18</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+		<view class="stabilityItem">
+			<view class="T">接待顾问数 ：18</view>
+			<view class="details">
+				<view class="statusIcon up"></view>
+				<text class="textInfo">
+					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
+				</text>
+			</view>
+		</view>
+	
 	</view>
 </template>
 
@@ -24,7 +123,7 @@
 	export default {
 		data() {
 			return {
-				chartData: {
+				donutChartData: {
 					series: [{
 							data: [{
 									"name": "明显下跌",
@@ -42,58 +141,74 @@
 						}
 
 					],
-				},
-				opts:{
-					"legend":{
-						"show": false,
-					},
-					"title": {
-						"name": "总共",
-						"fontSize": 18,
-						"color": "#666666"
-					},
-					"subtitle":{
-						"name": "9个",
-						"fontSize": 14,
-					},
-					"extra": {
-						"title": {
-						        "name": "总共",
-						    },
-					        "ring": {
-					            "ringWidth":50,
-					            "centerColor": "#FFFFFF",
-					            "activeOpacity": 0.5,
-					            "activeRadius": 10,
-					            "offsetAngle": 0,
-					            "customRadius": 0,
-					            "labelWidth": 12,
-					            "border": false,
-					            "borderWidth": 3,
-					            "borderColor": "#FFFFFF",
-					            "linearType": "none",
-					        },
-					}
+				},
+				donutChartOpts: {
+					"legend": {
+						"show": false,
+					},
+					"title": {
+						"name": "总共",
+						"fontSize": 18,
+						"color": "#666666"
+					},
+					"subtitle": {
+						"name": "9个",
+						"fontSize": 14,
+					},
+					"extra": {
+						"title": {
+							"name": "总共",
+						},
+						"ring": {
+							"ringWidth": 50,
+							"centerColor": "#FFFFFF",
+							"activeOpacity": 0.5,
+							"activeRadius": 10,
+							"offsetAngle": 0,
+							"customRadius": 0,
+							"labelWidth": 12,
+							"border": false,
+							"borderWidth": 3,
+							"borderColor": "#FFFFFF",
+							"linearType": "none",
+						},
+					}
+				},
+				lineChartData1: {
+					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
+					"series": [{
+						"name": "执行率",
+						"data": [35, 8, 25, 37, 4, 20]
+					}]
+				},
+				lineChartData2: {
+					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
+					"series": [{
+						"name": "时长",
+						"data": [35, 8, 25, 37, 4, 20]
+					}]
+				},
+				lineChartOpts: {
+					"legend": {
+						"show": false,
+					},
 				}
 			}
 		},
 		methods: {
-			
+
 		}
 	}
 </script>
 
 <style lang="scss">
 	.dailyDetail {
-		background: #F3F3F3;
-		// position: relative;
+		background-color: #f7f7f7;
 
 		.title {
-			// position: fixed;
-			top: 0;
 			padding: 26rpx 0 0;
 			width: 100%;
-			height: 300rpx;
+			height: 150rpx;
 			background-color: #008EF2;
 
 			text {
@@ -116,7 +231,107 @@
 		}
 
 		.donutChart {
-			width: 100%;
+			width: 90%;
+			margin: 0 auto;
+		}
+
+		.tit {
+			width: 220rpx;
+			margin: 30rpx auto;
+			text-align: center;
+			font-size: 40rpx;
+			font-weight: bold;
+			border-bottom: 1rpx solid #3A8EED;
+		}
+
+		.lineChart {
+			background-color: #FFFFFF;
+			margin: 20rpx 0;
+			padding: 20rpx;
+
+			.lineT {
+				font-size: 34rpx;
+				font-weight: bold;
+			}
+
+			.lineChart {
+				margin: 30rpx 0;
+			}
+
+			.details {
+				display: flex;
+
+				.statusIcon {
+					width: 92rpx;
+					height: 48rpx;
+				}
+
+				.up {
+					background: url(img/up.png) no-repeat;
+					background-size: 100%;
+				}
+
+				.down {
+					background: url(img/down.png) no-repeat;
+					background-size: 100%;
+				}
+
+				.textInfo {
+					font-size: 30rpx;
+
+					.upText {
+						color: red;
+					}
+
+					.downText {
+						color: green;
+					}
+				}
+			}
+		
 		}
+	
+		.stabilityItem{
+			background-color: #FFFFFF;
+			margin: 20rpx 0;
+			padding: 20rpx;
+			
+			.T {
+				font-size: 34rpx;
+				font-weight: bold;
+				margin-bottom: 24rpx;
+			}
+			.details {
+				display: flex;
+			
+				.statusIcon {
+					width: 92rpx;
+					height: 48rpx;
+				}
+			
+				.up {
+					background: url(img/up.png) no-repeat;
+					background-size: 100%;
+				}
+			
+				.down {
+					background: url(img/down.png) no-repeat;
+					background-size: 100%;
+				}
+			
+				.textInfo {
+					font-size: 30rpx;
+			
+					.upText {
+						color: red;
+					}
+			
+					.downText {
+						color: green;
+					}
+				}
+			}
+					
+		}
 	}
 </style>