<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,
{
value: 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,
{
value: 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"
}
]
},
}
},
methods: {
}
}
</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>