flying-monkey/pagesA/faultStatistics/projectOverview.vue

<template>
	<view class="content">
		<statusNav navBarTitle="数据看板"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: 0 -30rpx;">
				<view class="project-overview">
					<view class="settlement-type-title">项目概况</view>
					<view class="project-gross">
						<view class="project-gross-title">累计总项目量</view>
						<view class="project-gross-num">
							<view class="li">0</view>
							<view class="li">2</view>
							<view class="li">9</view>
							<view class="li">8</view>
							<view class="li">5</view>
						</view>
						<view class="project-gross-box">
							<view class="li">
								<view class="date">今日</view>
								<view class="date-con">
									<view class="date-con-li">
										<view class="text">新增项目量</view>
										<view class="single-amount">0单</view>
									</view>
									<view class="date-con-li">
										<view class="text">新增工单量</view>
										<view class="single-amount">0单</view>
									</view>
									<view class="date-con-li">
										<view class="text">项目维保率</view>
										<view class="single-amount">0单</view>
									</view>
								</view>
							</view>
							<view class="li">
								<view class="date">本周</view>
								<view class="date-con">
									<view class="date-con-li">
										<view class="text">新增项目量</view>
										<view class="single-amount">0单</view>
									</view>
									<view class="date-con-li">
										<view class="text">新增工单量</view>
										<view class="single-amount">0单</view>
									</view>
									<view class="date-con-li">
										<view class="text">项目维保率</view>
										<view class="single-amount">0单</view>
									</view>
								</view>
							</view>
							<view class="li">
								<view class="date">本月</view>
								<view class="date-con">
									<view class="date-con-li">
										<view class="text">新增项目量</view>
										<view class="single-amount">0单</view>
									</view>
									<view class="date-con-li">
										<view class="text">新增工单量</view>
										<view class="single-amount">0单</view>
									</view>
									<view class="date-con-li">
										<view class="text">项目维保率</view>
										<view class="single-amount">0单</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="data-icon">
					<view class="settlement-type-title">年度项目数据明细</view>
					<view class="">
						<view class="charts-box">
							<qiun-data-charts type="mix" :chartData="chartData" background="none" />
						</view>
					</view>
				</view>
				<view class="serve-data">
					<view class="settlement-type-title">服务数据</view>
					<view class="serve-data-box">
						<view class="serve-data-left">
							<view class="title">本月服务量</view>
							<view class="text-con">
								<view class="li">
									<view class="text">维保工单:</view>
									<view class="num">3</view>
								</view>
								<view class="li">
									<view class="text">巡检服务单:</view>
									<view class="num">65465</view>
								</view>
								<view class="li">
									<view class="text">移屏服务单:</view>
									<view class="num">32132</view>
								</view>
								<view class="li">
									<view class="text">拆屏工单:</view>
									<view class="num">32132</view>
								</view>
							</view>
						</view>
						<view class="serve-data-left">
							<view class="title">累计服务量</view>
							<view class="text-con">
								<view class="li">
									<view class="text">维保工单:</view>
									<view class="num">3</view>
								</view>
								<view class="li">
									<view class="text">巡检服务单:</view>
									<view class="num">65465</view>
								</view>
								<view class="li">
									<view class="text">移屏服务单:</view>
									<view class="num">32132</view>
								</view>
								<view class="li">
									<view class="text">拆屏工单:</view>
									<view class="num">32132</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="data-icon">
					<view class="settlement-type-title">年度服务数据汇总</view>
					<view class="">
						<view class="charts-box">
							<qiun-data-charts type="mix" :chartData="chartDataA" background="none" />
						</view>
					</view>
				</view>
				<view class="expire-project">
					<view class="settlement-type-title settlement-type-titlea">质保即将到期项目</view>
					<view class="expire-project-box">
						<view class="li-title li">
							<view class="name">项目名称</view>
							<view class="work-order">工单</view>
							<view class="date">日期</view>
						</view>
						<view class="li-text li">
							<view class="name">1.五岭新天地二期停车场xxxxxxxxxxxxx</view>
							<view class="work-order">6</view>
							<view class="date">22/2/24</view>
						</view>
						<view class="li-text li">
							<view class="name">1.五岭新天地二期停车场xxxxxxxxxxxxx</view>
							<view class="work-order">6</view>
							<view class="date">22/2/24</view>
						</view>
						<view class="li-text li">
							<view class="name">1.五岭新天地二期停车场xxxxxxxxxxxxx</view>
							<view class="work-order">6</view>
							<view class="date">22/2/24</view>
						</view>
						<view class="li-text li">
							<view class="name">1.五岭新天地二期停车场xxxxxxxxxxxxx</view>
							<view class="work-order">6</view>
							<view class="date">22/2/24</view>
						</view>
					</view>
				</view>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import statusNav from '../../components/status-nav.vue';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo
		},
		data() {
			return {
				chartDataA: {
					categories: ["1月","2月","3月","4月","5月","6月"],
					series: [
						{
							name: "",
							index: 1,
							data: [40,30,55,110,24,58],
							type: "column",
							"color": "#308de1"
						},
						{
							"name": "",
							"data": [40,30,55,110,24,58],
							"type": "line",
							"color": "#308de1"
						},
						{
							"name": "",
							"index": 2,
							"data": [40,30,55,110,24,58],
							"type": "point",
							"color": "#308de1"
						}

					]
				},
				chartData: {
					categories: ["1月","2月","3月","4月","5月","6月"],
					series: [
						{
							name: "",
							index: 1,
							data: [40,30,55,110,24,58],
							type: "column",
							"color": "#fe4141"
						},
						{
							"name": "",
							"data": [40,30,55,110,24,58],
							"type": "line",
							"color": "#fe4141"
						},
						{
							"name": "",
							"index": 2,
							"data": [40,30,55,110,24,58],
							"type": "point",
							"color": "#fe4141"
						}
					]
				},
			}
		},
		onLoad() {
			this.checkSJ();
		},
		methods: {
			// 查询数据看板数据
			checkSJ() {
				this.$requst.get('/universal/api.statistics/data_kanban').then(res=>{
					if(res.code) {
						
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		padding: 0rpx 10rpx;
	}

	.charts-box {
		width: 100%;
	}

	.settlement-type-title {
		font-size: 32rpx;
		color: #2c2c2c;
		display: flex;
		align-items: center;
		font-weight: bold;

	}

	.settlement-type-title::before {
		content: "";
		margin-right: 22rpx;
		width: 6rpx;
		display: block;
		height: 32rpx;
		border-radius: 50rpx;
		background: linear-gradient(#307ade, #08adf8)
	}

	.project-overview {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		padding: 26rpx 24rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.project-gross {
		margin-top: 25rpx;
	}

	.project-gross .project-gross-title {
		color: #2c2c2c;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;

	}

	.project-gross-num {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		margin-bottom: 27rpx;
	}

	.project-gross-num .li {
		width: 76rpx;
		height: 94rpx;
		text-align: center;
		font-size: 60rpx;
		color: #FFFFFF;
		line-height: 94rpx;
		margin: 0 4rpx;
		background-color: #00a0e9;
		border-radius: 10rpx;
	}

	.project-gross-box .li {
		margin-bottom: 50rpx;
	}

	.project-gross-box .li .date {
		color: #2C2C2C;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.project-gross-box .li .date::before {
		content: "";
		display: block;
		width: 10rpx;
		margin-right: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: #FFBB31;
	}

	.project-gross-box .li .date-con {
		display: flex;
		padding: 0 23rpx;
		padding-right: 0rpx;
		margin-top: 20rpx;
	}

	.project-gross-box .li .date-con .date-con-li {
		border-right: 2rpx solid #E6E6E6;
		padding-right: 58rpx;
		padding-left: 60rpx;
	}

	.project-gross-box .li .date-con .date-con-li:first-child {
		text-align: left;
		padding-left: 0rpx;
	}

	.project-gross-box .li .date-con .date-con-li:last-child {
		border: none;
	}

	.project-gross-box .li .date-con .date-con-li .text {
		font-size: 24rpx;
		color: #a2a2a2;
	}

	.project-gross-box .li .date-con .date-con-li .single-amount {
		font-size: 30rpx;
		color: #f8b21b;
		margin-top: 10rpx;
	}

	.data-icon {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		padding: 26rpx 24rpx;
		margin-top: 15rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.serve-data {
		padding: 26rpx 24rpx;
		margin-top: 27rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;
	}

	.serve-data-box {
		display: flex;
		margin-top: 27rpx;

	}

	.serve-data-box .serve-data-left {
		width: 50%;
	}

	.serve-data-box .serve-data-left .title {
		font-size: 28rpx;
		color: #2c2c2c;
		font-weight: bold;
		display: flex;
		align-items: center;

	}

	.serve-data-box .serve-data-left .title::before {
		content: "";
		width: 10rpx;
		display: block;
		border-radius: 50%;
		margin-right: 13rpx;
		height: 10rpx;
		background-image: linear-gradient(#5fc0f0, #297ddc);
	}

	.serve-data-box .serve-data-left .li {
		display: flex;
		margin-top: 40rpx;
	}

	.serve-data-box .serve-data-left .li .text {
		width: 130rpx;
		font-size: 24rpx;
		color: #a2a2a2;
		margin-right: 20rpx;
		text-align: right;
	}

	.serve-data-box .serve-data-left .li .num {
		width: 130rpx;
		font-size: 24rpx;
		color: #27cdc9;
		font-weight: bold;
	}

	.serve-data-box .serve-data-left:nth-child(2) {
		padding-left: 32rpx;
	}

	.expire-project {
		padding: 26rpx 24rpx;
		margin-top: 27rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		background-color: #FFFFFF;
	}

	.settlement-type-titlea::before {
		content: "";
		margin-right: 22rpx;
		width: 6rpx;
		display: block;
		height: 32rpx;
		border-radius: 50rpx;
		background: linear-gradient(#2ed5b6, #2fd9cf)
	}

	.expire-project-box .li-title {
		display: flex;
		width: 100%;
		font-size: 28rpx;
		color: #a2a2a2;
		margin-top: 20rpx;
	}

	.expire-project-box .li-title .name {
		padding-left: 80rpx;
		box-sizing: border-box;
	}

	.expire-project-box .li .name {
		width: 455rpx;
	}

	.expire-project-box .li .work-order {
		width: 80rpx;
		text-align: center;
	}

	.expire-project-box .li .date {
		flex: 1;
		text-align: center;
	}

	.expire-project-box .li-text {
		display: flex;
		padding: 17rpx 0rpx;
		font-size: 24rpx;
		border-bottom: 2rpx solid #E6E6E6;
		color: #27cdc9;
	}

	.expire-project-box .li-text .name {
		color: #333333;
	}

	.expire-project-box .li-text:last-child {
		border: none;
	}
</style>