488 lines
13 KiB
Vue
488 lines
13 KiB
Vue
<template>
|
|
<view class="content">
|
|
<statusNav navBarTitle="故障统计"></statusNav>
|
|
|
|
<container-subgroup-two>
|
|
<view slot="content" style="margin: 0 -30rpx;">
|
|
<view class="faultStatistics-nav">
|
|
<view class="li" @click="navlistIndexFun(index)" :class="navlistIndex==index?'on':''"
|
|
v-for="(item,index) in navlist">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view class="settlement-type">
|
|
<view class="settlement-type-title">
|
|
结算类型
|
|
</view>
|
|
|
|
<view class="settlement-type-content">
|
|
<view class="li liB">
|
|
<view class="text">
|
|
单次收费
|
|
</view>
|
|
<view class="num">
|
|
20
|
|
</view>
|
|
</view>
|
|
|
|
<view class="li liC">
|
|
<view class="text">
|
|
验收扫尾
|
|
</view>
|
|
<view class="num">
|
|
3
|
|
</view>
|
|
</view>
|
|
<view class="li liD">
|
|
<view class="text">
|
|
质保免费
|
|
</view>
|
|
<view class="num">
|
|
46
|
|
</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="text">
|
|
包年签单
|
|
</view>
|
|
<view class="num">
|
|
10
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fault-type">
|
|
<view class="settlement-type-title">
|
|
故障类型
|
|
</view>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="ring" :chartData="chartData" background="none" />
|
|
</view>
|
|
</view>
|
|
<view class="brand-analysis">
|
|
<view class="settlement-type-title">
|
|
品牌分析
|
|
</view>
|
|
|
|
<view class="brand-analysis-box">
|
|
<view class="li">
|
|
<view class="serial-number">
|
|
1
|
|
</view>
|
|
|
|
<view class="brand-analysis-center">
|
|
<view class="title-box">
|
|
<view class="title">
|
|
海康威视
|
|
</view>
|
|
<view class="cor">
|
|
10
|
|
</view>
|
|
<view class="cor1">
|
|
23.3%
|
|
</view>
|
|
</view>
|
|
|
|
<view class="percentage">
|
|
<view class="percentage-box" :style="{width:getPercentage(33,900)}">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<image class="icon" src="../../static/iocn/xl.png" mode=""></image>
|
|
</view>
|
|
<view class="li">
|
|
<view class="serial-number">
|
|
2
|
|
</view>
|
|
|
|
<view class="brand-analysis-center">
|
|
<view class="title-box">
|
|
<view class="title">
|
|
海康威视
|
|
</view>
|
|
<view class="cor">
|
|
10
|
|
</view>
|
|
<view class="cor1">
|
|
23.3%
|
|
</view>
|
|
</view>
|
|
|
|
<view class="percentage">
|
|
<view class="percentage-box" :style="{width:getPercentage(33,900)}">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<image class="icon" src="../../static/iocn/xl.png" mode=""></image>
|
|
</view>
|
|
<view class="li">
|
|
<view class="serial-number">
|
|
3
|
|
</view>
|
|
|
|
<view class="brand-analysis-center">
|
|
<view class="title-box">
|
|
<view class="title">
|
|
海康威视
|
|
</view>
|
|
<view class="cor">
|
|
10
|
|
</view>
|
|
<view class="cor1">
|
|
23.3%
|
|
</view>
|
|
</view>
|
|
|
|
<view class="percentage">
|
|
<view class="percentage-box" :style="{width:getPercentage(33,900)}">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<image class="icon" src="../../static/iocn/xl.png" mode=""></image>
|
|
</view>
|
|
<view class="li">
|
|
<view class="serial-number">
|
|
4
|
|
</view>
|
|
|
|
<view class="brand-analysis-center">
|
|
<view class="title-box">
|
|
<view class="title">
|
|
海康威视
|
|
</view>
|
|
<view class="cor">
|
|
10
|
|
</view>
|
|
<view class="cor1">
|
|
23.3%
|
|
</view>
|
|
</view>
|
|
|
|
<view class="percentage">
|
|
<view class="percentage-box percentage-box-ber" :style="{width:getPercentage(33,80)}">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<image class="icon" src="../../static/iocn/xl.png" mode=""></image>
|
|
</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 {
|
|
navlistIndex: 0,
|
|
navlist: [{
|
|
title: "全部",
|
|
},
|
|
|
|
{
|
|
title: "按时间段",
|
|
},
|
|
{
|
|
title: "昨日",
|
|
},
|
|
{
|
|
title: "本周",
|
|
},
|
|
{
|
|
title: "本月",
|
|
},
|
|
],
|
|
|
|
|
|
chartData: {
|
|
series: [{
|
|
|
|
format: "tooltipDemo1",
|
|
data: [{
|
|
name: "网络故障",
|
|
value: 50,
|
|
style: "straight",
|
|
color: "#7F90A4"
|
|
},
|
|
{
|
|
name: "模组故障",
|
|
value: 30,
|
|
style: "straight",
|
|
color: "#67E0FF",
|
|
style: "straight",
|
|
},
|
|
{
|
|
name: "网络错误",
|
|
value: 20,
|
|
style: "straight",
|
|
color: "#2D8DFE"
|
|
},
|
|
{
|
|
name: "信息错误",
|
|
value: 18,
|
|
color: "#44D2C1",
|
|
style: "straight",
|
|
},
|
|
{
|
|
name: "供电不足",
|
|
value: 8,
|
|
style: "straight",
|
|
color: "#F47936"
|
|
}
|
|
]
|
|
}]
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log(this.getPercentage(33, 66))
|
|
},
|
|
methods: {
|
|
navlistIndexFun(index) {
|
|
this.navlistIndex = index
|
|
},
|
|
getPercentage(num, max) {
|
|
return Math.ceil(((num - 0) / (max - 0)) * 100) + "%"
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
padding: 0rpx 15rpx;
|
|
}
|
|
|
|
|
|
.faultStatistics-nav {
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
margin-top: 25rpx;
|
|
color: #958b8b;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.faultStatistics-nav .li {
|
|
padding: 8rpx 13rpx;
|
|
box-sizing: border-box;
|
|
border: 2rpx solid #F5F5F5;
|
|
}
|
|
|
|
.faultStatistics-nav .on {
|
|
color: #FF5400;
|
|
border: 2rpx solid #FF5400;
|
|
border-radius: 15rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.settlement-type {
|
|
width: 100%;
|
|
border-radius: 25rpx;
|
|
height: 400rpx;
|
|
margin-top: 29rpx;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.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)
|
|
}
|
|
|
|
.settlement-type-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.settlement-type-content .li {
|
|
width: 50%;
|
|
text-align: center;
|
|
padding-bottom: 20rpx;
|
|
padding-top: 26rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.settlement-type-content .li .text {
|
|
color: #888888;
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.settlement-type-content .li .num {
|
|
color: #0ba9f8;
|
|
font-size: 46rpx;
|
|
|
|
}
|
|
|
|
.settlement-type-content .liB::after {
|
|
content: "";
|
|
width: 2rpx;
|
|
height: 88rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
right: 0rpx;
|
|
top: 0rpx;
|
|
}
|
|
|
|
.settlement-type-content .liB::before {
|
|
content: "";
|
|
width: 245rpx;
|
|
height: 2rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -123rpx;
|
|
bottom: 0rpx;
|
|
}
|
|
|
|
.settlement-type-content .liC::before {
|
|
content: "";
|
|
width: 245rpx;
|
|
height: 2rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -123rpx;
|
|
bottom: 0rpx;
|
|
}
|
|
|
|
.settlement-type-content .liD::before {
|
|
content: "";
|
|
width: 2rpx;
|
|
height: 88rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
right: 0rpx;
|
|
margin-left: -123rpx;
|
|
bottom: 10rpx;
|
|
}
|
|
|
|
.fault-type {
|
|
width: 100%;
|
|
padding: 24rpx 21rpx;
|
|
box-sizing: border-box;
|
|
height: 500rpx;
|
|
border-radius: 15rpx;
|
|
margin-top: 30rpx;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.charts-box {
|
|
margin: auto;
|
|
margin-top: 50rpx;
|
|
width: 100%;
|
|
height: 330rpx;
|
|
}
|
|
|
|
.brand-analysis {
|
|
padding: 24rpx 21rpx;
|
|
background-color: #FFFFFF;
|
|
width: 100%;
|
|
border-radius: 15rpx;
|
|
padding-bottom: 120rpx;
|
|
box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.brand-analysis-box .li {
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
padding: 27rpx 0rpx;
|
|
padding-left: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.brand-analysis-box .li .serial-number {
|
|
color: #958b8b;
|
|
font-size: 28rpx;
|
|
margin-right: 34rpx;
|
|
}
|
|
|
|
.brand-analysis-center {
|
|
flex: 1;
|
|
}
|
|
|
|
.brand-analysis-center .title-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
font-size: 24rpx
|
|
}
|
|
|
|
.brand-analysis-center .title-box .title {
|
|
color: #333333;
|
|
font-size: 26rpx
|
|
}
|
|
|
|
.cor {
|
|
color: #2d8dfe;
|
|
}
|
|
|
|
.cor1 {
|
|
color: #999999;
|
|
}
|
|
|
|
.percentage {
|
|
width: 100%;
|
|
margin-top: 11rpx;
|
|
background-color: #EDEDED;
|
|
height: 20rpx;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
.brand-analysis-box .icon {
|
|
width: 16rpx;
|
|
height: 31rpx;
|
|
margin-left: 37rpx;
|
|
}
|
|
|
|
.percentage-box {
|
|
height: 100%;
|
|
background-color: #2d8efd;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
.percentage-box-ber {
|
|
background-color: #ffb503;
|
|
}
|
|
</style>
|