<!-- 统计页 -->
<template>
<view class="content">
<view class="c-top">
<view class="" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
<view class="c-title">检测统计</view>
<view class=""></view>
</view>
<view class="ail">
<view class="top-box">
<view class="t-top">
<view class="sis">
<view class="t-title">检测总数</view>
<view class="t-num">{{sum}}</view>
</view>
<view class="sis">
<view class="t-title">检测通过</view>
<view class="t-num" >{{countPass}}</view>
</view>
<view class="sis">
<view class="t-title">检测未通过</view>
<view class="t-num">{{countNoPass}}</view>
</view>
</view>
<view class="t-bottom">
<qiun-data-charts
:ontouch='true'
type="ring"
:opts="opts"
:chartData="chartData"
/>
</view>
</view>
<view class="cont-box">
<view class="cont-title">车辆类型统计</view>
<view class="wrap-box" >
<view class="w-box" v-for="(item,index) in carlist" :key="index">
<view class="imgicon">
<image :src="baseUrl + item.image" ></image>
</view>
<view class="t-zhong">{{item.name}}</view>
<view class="lanbnum">
{{item.value}}
</view>
</view>
</view>
</view>
<view class="cont-box">
<view class="cont-title">机构检测统计</view>
<view class="dis-t">
<view class="lank" @click="xling = true">{{name}}</view>
<view class="lan-you">
<view class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex(index,item.value)"> {{item.text}}</view>
</view>
</view>
<qiun-data-charts
:ontouch='true'
type="column"
:opts="dopts"
:chartData="chartData1"
/>
</view>
<view class="cont-box">
<view class="b-title">
<view class="b-zuo">排名</view>
<view class="b-zhong">机构名称</view>
<view class="b-you">数量</view>
</view>
<view class="b-title" v-for="(item,index) in phb" :key="index">
<view class="b-zuo">
<view class="one">{{index + 1}}</view>
<!-- <view class="two">1</view>
<view class="three">3</view> -->
</view>
<view class="b-zhong">
<view class="touxiang">
<img :src=" baseUrl + item.logo" alt="">
</view>
<text>{{item.partnerName}}</text>
</view>
<view class="b-you">{{item.total}}</view>
</view>
</view>
</view>
<u-popup :show="xling" @close="closexl" :round="10" @open="openxl">
<view class="popup-box">
<view class="sousuo">
<uni-icons type="search" size="22"></uni-icons>
<input type="text" v-model="searchValue" placeholder="请输入机构">
<text @click="getgetPartnerList()" >搜索 </text>
</view>
<view class="list-box">
<scroll-view class="list_scroll" scroll-y="true" >
<view class="list-qiu" v-for="(item,index) in qubu" :key="index">
<view class=""> <text class="tel">{{item.partnerName}}</text> </view>
<view class="banniu">
<text @click="xinxuanze(item.partnerId,item.partnerName)">选择</text>
</view>
</view>
</scroll-view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import config from '@/config'
import request from '../../utils/request';
export default{
data(){
return{
name:'全部机构',
partnerId:'',
searchValue:'',
baseUrl:this.$baseUrl,
xling:false,
earchValue:'',
countdown: 3,
qhindex:0,
countNoPass:0,
countPass:0,
sum:0,
qubu:[],
phb:[],
zilist:[
{text:'周',value:'week'},
{text:'月',value:'month'},
{text:'年',value:'year'},
],
carlist:[],
value:'week',
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
rotate: false,
rotateLock: false,
color: ["#5266FF","#FF787E",],
padding: [5,5,5,5],
dataLabel: true,
enableScroll: false,
legend: {
show: true,
position: "right",
lineHeight: 25
},
title: {
name: "通过率",
fontSize: 10,
color: "#666666"
},
subtitle: {
name: "70%",
fontSize: 10,
color: "#7cb5ec"
},
extra: {
ring: {
ringWidth: 10,
activeOpacity: 0.5,
activeRadius: 20,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
},
// sdada
chartData1: {},
dopts: {
color: ["#0D2E8D","#3CBC6F","#FF571A","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,15,0,5],
touchMoveLimit: 24,
enableScroll: true,
legend: {},
xAxis: {
disableGrid: true,
scrollShow: true,
itemCount: 4
},
yAxis: {
data: [
{
min: 0
}
]
},
extra: {
column: {
type: "group",
width: 15,
activeBgColor: "#000000",
activeBgOpacity: 0.08
}
}
}
}
},
onLoad() {
this.getServerData();
this.getServerData1();
},
onShow() {
// this.getstatisticsTop()
this.getstatisticsMid()
this. getgetPartnerList()
this.getstatisticsZXT()
this.getstatisticsOrder()
},
methods:{
getback(){
uni.navigateBack()
},
xinxuanze(id ,name){
this.name = name
this.partnerId = id
this.xling = false
this.getServerData1()
},
async getstatisticsTop(){
let res = await request({
url:'/appInspection/order/statisticsTop',
method: 'get',
})
// this.chartData.series[0].data = res.data.list
},
async getstatisticsMid(){
let res = await request({
url:'/appInspection/order/statisticsMid',
method: 'get',
})
this.carlist = res.data
},
gbindex(index,value){
this.qhindex = index
this.value = value
this.getServerData1()
},
async getgetPartnerList(){
let data = {
partnerName : this.searchValue
}
let res = await request({
url:'/appInspection/order/getPartnerList',
method: 'get',
params: data
})
this.qubu = res.data
},
async getstatisticsZXT(){
let data = {
partnerId:this.partnerId,
type : this.value
}
let res = await request({
url:'/appInspection/order/statisticsZXT',
method: 'get',
params: data
})
},
async getstatisticsOrder(){
let res = await request({
url:'/appInspection/order/statisticsOrder',
method: 'get',
})
this.phb = res.data
},
// 123123
closexl(e){
this.xling = false
},
openxl(e){
},
async getServerData() {
let rex = await request({
url:'/appInspection/order/statisticsTop',
method: 'get',
})
this.countNoPass = rex.data.countNoPass
this.countPass = rex.data.countPass
this.sum = rex.data.sum
this.opts.subtitle.name = rex.data.list[0].value
let res = {
series: [
{
data : rex.data.list
// data: [{"name":"通过","value":70},{"name":"未通过","value":30},]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
// this.getstatisticsTop()
},
async getServerData1() {
let data = {
type : this.value
}
let rex = await request({
url:'/appInspection/order/statisticsZXT',
method: 'get',
params: data
})
let res = rex.data
this.chartData1 = JSON.parse(JSON.stringify(res));
},
},
}
</script>
<style scoped lang="scss">
.content{
width: 100%;
height: calc(100vh);
background-color: #F6F6F6;
box-sizing: border-box;
// padding-top: 45px;
}
.c-top{
width: 100%;
box-sizing: border-box;
padding: 15px;
padding-top: 55px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.c-title{
font-size: 18px;
font-weight: bold
}
.ail{
width: 100%;
background-color: #F6F6F6;
}
.top-box{
width: 95%;
border-radius: 5px;
box-sizing: border-box;
padding: 18px;
background-color: white;
margin: 10px auto;
}
.cont-box{
width: 100%;
border-radius: 5px;
box-sizing: border-box;
padding: 18px;
background-color: white;
margin: 10px auto;
}
.charts-box {
width: 100%;
height: 300px;
}
.t-bottom{
width: 100%;
height: 130px;
border-top: 1px solid #EEEEEE;
box-sizing: border-box;
// padding: 20px;
}
.t-top{
width: 100%;
// height: 130px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 15px;
}
.sis{
width: 33%;
}
.t-title{
width: 100%;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 14px;
}
.t-num{
width: 100%;
text-align: center;
font-size: 26px;
font-weight: bold;
color: #0D2E8D;
line-height: 26px;
margin: 5px auto;
}
.cont-title{
font-size: 16px;
font-weight: 500;
color: #333333;
}
.charts-box {
width: 100%;
height: 300px;
}
.wrap-box{
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
margin: 10px auto;
}
.w-box{
width: 33%;
box-sizing: border-box;
text-align: center;
margin-bottom: 10px;
}
.imgicon{
width: 33px;
height: 28px;
margin: 0 auto;
image{
width: 100%;
height: 100%;
}
}
.t-zhong{
font-size: 14px;
font-weight: 400;
color: #333333;
margin: 3px auto;
}
.lanbnum{
font-size: 26px;
font-weight: bold;
color: #0D2E8D;
}
.b-title{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
color: #666666;
margin-bottom: 10px;
}
.b-zuo{
width: 20%;
}
.b-zhong{
text-align: left;
width: 60%;
display: flex;
align-items: center;
}
.b-you{
width: 20%;
}
.touxiang{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
overflow: hidden;
margin-right: 10px;
image{
width: 100%;
height: 100%;
}
}
.one{
width: 24px;
height: 24px;
border-radius: 50%;
background: #FEB947;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.dis-t{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px auto;
}
.lank{
width: 102px;
height: 27px;
border-radius: 14px ;
border: 1px solid #0D2E8D;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 400;
color: #0D2E8D;
}
.lan-you{
display: flex;
align-items: center;
}
.yi{
font-size: 15px;
font-weight: 400;
color: #666666;
line-height: 15px;
margin-right: 15px;
}
.er{
width: 25px;
height: 25px;
background: #0D2E8D;
border-radius: 3px ;
display: flex;
align-items: center;
justify-content: center;
color: white !important;
}
// ----------------------
.popup-box{
overflow: hidden;
border-radius: 8px;
box-sizing: border-box;
padding: 15px;
width: 100%;
background-color: white;
}
.sousuo{
width: 95%;
margin: 0 auto;
margin-left: 0px;
height: 30px;
background: #F0F0F0;
border-radius: 50px;
color: #999999;
box-sizing: border-box;
padding:0 10px;
display: flex;
align-items: center;
justify-content: space-between;
input{
width: 80%;
}
}
.list-box{
width: 100%;
height: 300px;
overflow: hidden;
box-sizing: border-box;
}
.list_scroll{
height: 100%; // 需设置高度
display: flex;
flex-direction: column;
}
.list-qiu{
width: 95%;
border-bottom: 1px solid #EEEEEE;
box-sizing: border-box;
padding: 10px 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tel{
margin-left: 5px;
font-size: 15px;
font-weight: 400;
color: #666666;
}
</style>