605 lines
14 KiB
Vue
605 lines
14 KiB
Vue
<!-- 统计页 -->
|
|
<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',
|
|
})
|
|
console.log(res);
|
|
// this.chartData.series[0].data = res.data.list
|
|
},
|
|
async getstatisticsMid(){
|
|
let res = await request({
|
|
url:'/appInspection/order/statisticsMid',
|
|
method: 'get',
|
|
})
|
|
console.log(res);
|
|
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
|
|
})
|
|
console.log('全部机构列表',res);
|
|
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
|
|
})
|
|
console.log('获取柱形图',res);
|
|
|
|
},
|
|
async getstatisticsOrder(){
|
|
let res = await request({
|
|
url:'/appInspection/order/statisticsOrder',
|
|
method: 'get',
|
|
})
|
|
console.log('获取排行榜',res);
|
|
this.phb = res.data
|
|
|
|
},
|
|
// 123123
|
|
closexl(e){
|
|
this.xling = false
|
|
console.log('n');
|
|
|
|
},
|
|
openxl(e){
|
|
console.log('y');
|
|
},
|
|
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
|
|
console.log(rex);
|
|
this.opts.subtitle.name = rex.data.list[0].value
|
|
let res = {
|
|
series: [
|
|
{
|
|
data : rex.data.list
|
|
// data: [{"name":"通过","value":70},{"name":"未通过","value":30},]
|
|
}
|
|
]
|
|
};
|
|
console.log('官方格式',JSON.parse(JSON.stringify(res)));
|
|
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> |