newEdition/pages/mine/daily/dailyDetail.vue

<template>
	<view class="dailyDetail">
		<view class="title">
			<view class="text">
				<text class="h1">01月27日接待指标概览数据报告</text>
				<text class="h4">生成时间：2022-01-27 01：22</text>
			</view>
		</view>

		<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>

<script>
	export default {
		data() {
			return {
				donutChartData: {
					series: [{
							data: [{
									"name": "明显下跌",
									"value": 9
								},
								{
									"name": "明显上涨",
									"value": 8
								},
								{
									"name": "稳定",
									"value": 8
								}
							]
						}

					],
				},
				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-color: #f7f7f7;

		.title {
			padding: 26rpx 0 0;
			width: 100%;
			height: 150rpx;
			background-color: #008EF2;

			text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
			}

			.h1 {
				font-size: 40rpx;
				font-weight: bold;
			}

			.h4 {
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.donutChart {
			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>