595 lines
14 KiB
Vue
595 lines
14 KiB
Vue
<template>
|
|
<view class="content">
|
|
<statusNav navBarTitle="数据看板" returnColor="#c2c2c2"></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">{{projectCount[4] || 0}}</view>
|
|
<view class="li">{{projectCount[3] || 0}}</view>
|
|
<view class="li">{{projectCount[2] || 0}}</view>
|
|
<view class="li">{{projectCount[1] || 0}}</view>
|
|
<view class="li">{{projectCount[0] || 0}}</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">{{today.project_count}}单</view>
|
|
</view>
|
|
<view class="date-con-li">
|
|
<view class="text">新增工单量</view>
|
|
<view class="single-amount">{{today.order_count}}单</view>
|
|
</view>
|
|
<view class="date-con-li">
|
|
<view class="text">项目维保率</view>
|
|
<view class="single-amount">{{today.project_rate}}</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">{{week.project_count}}单</view>
|
|
</view>
|
|
<view class="date-con-li">
|
|
<view class="text">新增工单量</view>
|
|
<view class="single-amount">{{week.order_count}}单</view>
|
|
</view>
|
|
<view class="date-con-li">
|
|
<view class="text">项目维保率</view>
|
|
<view class="single-amount">{{week.project_rate}}</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">{{month.project_count}}单</view>
|
|
</view>
|
|
<view class="date-con-li">
|
|
<view class="text">新增工单量</view>
|
|
<view class="single-amount">{{month.order_count}}单</view>
|
|
</view>
|
|
<view class="date-con-li">
|
|
<view class="text">项目维保率</view>
|
|
<view class="single-amount">{{month.project_rate}}</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" :opts="opts" :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" v-for="(item,index) in serviceData.month" :key="index">
|
|
<view class="text">{{item.title}}:</view>
|
|
<view class="num">{{item.num}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="serve-data-left">
|
|
<view class="title">累计服务量</view>
|
|
<view class="text-con">
|
|
<view class="li" v-for="(item,index) in serviceData.allArr" :key="index">
|
|
<view class="text">{{item.title}}:</view>
|
|
<view class="num">{{item.num}}</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" :opts="opts2" :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" v-for="(item,index) in warranty_expires" :key="index">
|
|
<view class="name">{{index+1}}、{{item.project_name}}</view>
|
|
<view class="work-order">{{item.order_count}}</view>
|
|
<view class="date">{{item.joint_end_time.slice(2)}}</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 {
|
|
projectCount:[],//累计总项目量
|
|
today:'',//今日数据
|
|
week:'',//本周数据
|
|
month:'',//本月数据
|
|
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"
|
|
}
|
|
]
|
|
},
|
|
opts: {
|
|
padding: [15,15,0,15],
|
|
legend: {},
|
|
fontColor:'#FF0000',
|
|
yAxis: {
|
|
disabled: false,
|
|
disableGrid: false,
|
|
splitNumber: 5,
|
|
gridType: "solid",
|
|
dashLength: 4,
|
|
gridColor: "#CCCCCC",
|
|
padding: 10,
|
|
showTitle: true,
|
|
data: [
|
|
{
|
|
min: 0,
|
|
max: 5000,
|
|
},
|
|
{
|
|
min: 0,
|
|
max: 5000,
|
|
},
|
|
{
|
|
min: 0,
|
|
max: 5000,
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
mix: {
|
|
column: {
|
|
linearType:"custom",
|
|
width: 20,
|
|
linearOpacity:0.6,
|
|
customColor:["#FF0000","#fc7575"],
|
|
},
|
|
}
|
|
},
|
|
},
|
|
serviceData:{month:[],allArr:[]},//服务数据
|
|
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"
|
|
}
|
|
|
|
]
|
|
},
|
|
opts2: {
|
|
padding: [15,15,0,15],
|
|
legend: {},
|
|
fontColor:'#308de1',
|
|
yAxis: {
|
|
disabled: false,
|
|
disableGrid: false,
|
|
splitNumber: 5,
|
|
gridType: "solid",
|
|
dashLength: 4,
|
|
gridColor: "#CCCCCC",
|
|
padding: 10,
|
|
showTitle: true,
|
|
data: [
|
|
{
|
|
min: 0,
|
|
max: 5000,
|
|
},
|
|
{
|
|
min: 0,
|
|
max: 5000,
|
|
},
|
|
{
|
|
min: 0,
|
|
max: 5000,
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
mix: {
|
|
column: {
|
|
linearType:"custom",
|
|
width: 20,
|
|
linearOpacity:0.6,
|
|
customColor:["#308de1","#5bc2f2"],
|
|
},
|
|
}
|
|
},
|
|
},
|
|
// 质保即将到期项目
|
|
warranty_expires:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.checkSJ();
|
|
},
|
|
methods: {
|
|
// 查询数据看板数据
|
|
checkSJ() {
|
|
this.$requst.get('/universal/api.statistics/data_kanban').then(res=>{
|
|
if(res.code) {
|
|
// 累计总项目量
|
|
let projectCountNum = res.data.project_count.toString().split(',');
|
|
if(projectCountNum.length > 1) {
|
|
this.projectCount = projectCountNum.reverse();
|
|
} else {
|
|
this.projectCount = projectCountNum;
|
|
}
|
|
// 今日数据
|
|
this.today = res.data.today;
|
|
// 本周数据
|
|
this.week = res.data.week;
|
|
// 本月数据
|
|
this.month = res.data.month;
|
|
// 年度项目数据明细
|
|
let yearProject = [[],[]];
|
|
res.data.project_month.forEach((item,index)=>{
|
|
if(index < 12) {
|
|
yearProject[0].push(item.name+'月');
|
|
yearProject[1].push(item.value);
|
|
}
|
|
})
|
|
this.chartData.categories = yearProject[0];
|
|
this.chartData.series[0].data = yearProject[1];
|
|
this.chartData.series[1].data = yearProject[1];
|
|
this.chartData.series[2].data = yearProject[1];
|
|
let maxNum = Math.max.apply(null, yearProject[1]);
|
|
// 服务数据：本月服务量
|
|
for (let key in res.data.service.month) {
|
|
this.serviceData.month.push({title: key,num:res.data.service.month[key]});
|
|
}
|
|
// 服务数据：累计服务量
|
|
for (let key in res.data.service.all) {
|
|
this.serviceData.allArr.push({title: key,num:res.data.service.all[key]});
|
|
}
|
|
// 年度服务数据汇总
|
|
let yearService = [[],[]];
|
|
res.data.order_month.forEach((item,index)=>{
|
|
if(index < 12) {
|
|
yearService[0].push(item.name+'月');
|
|
yearService[1].push(item.value);
|
|
}
|
|
})
|
|
this.chartDataA.categories = yearService[0];
|
|
this.chartDataA.series[0].data = yearService[1];
|
|
this.chartDataA.series[1].data = yearService[1];
|
|
this.chartDataA.series[2].data = yearService[1];
|
|
let maxNum2 = Math.max.apply(null, yearService[1]);
|
|
// 质保即将到期项目
|
|
this.warranty_expires = res.data.warranty_expires;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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>
|