|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title="工单统计" title-color="#fff" :background="background" back-icon-color="#ffffff" ></u-navbar>
|
|
|
-
|
|
|
+ <u-navbar title="工单统计" title-color="#fff" :background="background" back-icon-color="#ffffff"></u-navbar>
|
|
|
+
|
|
|
<view class="main">
|
|
|
<!-- 标签 -->
|
|
|
<view class="tabs">
|
|
|
@@ -24,7 +24,7 @@
|
|
|
数据统计
|
|
|
</view>
|
|
|
<view class="state">
|
|
|
- <view class="state-item state1" >
|
|
|
+ <view class="state-item state1">
|
|
|
<view class="state-classify">
|
|
|
待指派
|
|
|
</view>
|
|
|
@@ -32,7 +32,7 @@
|
|
|
2
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="state-item state2" >
|
|
|
+ <view class="state-item state2">
|
|
|
<view class="state-classify">
|
|
|
进行中
|
|
|
</view>
|
|
|
@@ -40,7 +40,7 @@
|
|
|
3
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="state-item state3" >
|
|
|
+ <view class="state-item state3">
|
|
|
<view class="state-classify">
|
|
|
已解决
|
|
|
</view>
|
|
|
@@ -48,7 +48,7 @@
|
|
|
33
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="state-item state4" >
|
|
|
+ <view class="state-item state4">
|
|
|
<view class="state-classify">
|
|
|
已关闭
|
|
|
</view>
|
|
|
@@ -66,12 +66,12 @@
|
|
|
<view class="progress">
|
|
|
<view class="progress-item">
|
|
|
<view class="circle-progress">
|
|
|
- <u-circle-progress active-color="#FF7B00" width="136" :percent="12" >
|
|
|
- <view class="u-progress-content">
|
|
|
-
|
|
|
- <text class='u-progress-info1'>12%</text>
|
|
|
- </view>
|
|
|
- </u-circle-progress>
|
|
|
+ <u-circle-progress active-color="#FF7B00" width="136" :percent="12">
|
|
|
+ <view class="u-progress-content">
|
|
|
+
|
|
|
+ <text class='u-progress-info1'>12%</text>
|
|
|
+ </view>
|
|
|
+ </u-circle-progress>
|
|
|
</view>
|
|
|
<view class="state">
|
|
|
待指派
|
|
|
@@ -80,11 +80,11 @@
|
|
|
<view class="progress-item">
|
|
|
<view class="circle-progress">
|
|
|
<u-circle-progress active-color="#008FA9" width="136" :percent="15">
|
|
|
- <view class="u-progress-content">
|
|
|
-
|
|
|
- <text class='u-progress-info2'>15%</text>
|
|
|
- </view>
|
|
|
- </u-circle-progress>
|
|
|
+ <view class="u-progress-content">
|
|
|
+
|
|
|
+ <text class='u-progress-info2'>15%</text>
|
|
|
+ </view>
|
|
|
+ </u-circle-progress>
|
|
|
</view>
|
|
|
<view class="state">
|
|
|
进行中
|
|
|
@@ -93,11 +93,11 @@
|
|
|
<view class="progress-item">
|
|
|
<view class="circle-progress">
|
|
|
<u-circle-progress active-color="#18C272" width="136" :percent="73">
|
|
|
- <view class="u-progress-content">
|
|
|
-
|
|
|
- <text class='u-progress-info3'>73%</text>
|
|
|
- </view>
|
|
|
- </u-circle-progress>
|
|
|
+ <view class="u-progress-content">
|
|
|
+
|
|
|
+ <text class='u-progress-info3'>73%</text>
|
|
|
+ </view>
|
|
|
+ </u-circle-progress>
|
|
|
</view>
|
|
|
<view class="state">
|
|
|
已解决
|
|
|
@@ -105,7 +105,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
<!-- 每月工单数量 -->
|
|
|
<view class="workOrder-amount">
|
|
|
@@ -113,166 +113,256 @@
|
|
|
每月工单数量
|
|
|
</view>
|
|
|
<view class="chat">
|
|
|
-
|
|
|
- <image class="chat-img" src="@/assets/img/AUgyKM0@1x2.png" mode=""></image>
|
|
|
-
|
|
|
+ <view id="barEcharts" style="min-height:692rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- <image class="chat-img" src="@/assets/img/AUgyKM0@1x2.png" mode=""></image> -->
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- background:{
|
|
|
- backgroundColor:'#1677FF'
|
|
|
+ myChart: null,
|
|
|
+ background: {
|
|
|
+ backgroundColor: '#1677FF'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ onReady() {
|
|
|
+ this.getBarCharts();
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
+ getBarCharts(list) {
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
|
|
|
+ width: uni.upx2px(700),
|
|
|
+ height: uni.upx2px(692)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.myChart.clear();
|
|
|
+
|
|
|
+ var data1 = ['1月','2月','3月','4月','5月','6月'];
|
|
|
+ var dataX = [2,1,0,1,3,0];
|
|
|
+ var dataC = [3,1,1,0,2,1];
|
|
|
+ var dataS = [5,2,1,1,5,1];
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ top: '6%',
|
|
|
+ left: '3%',
|
|
|
+ right: '8%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1
|
|
|
+ },
|
|
|
+ barGap: '0',
|
|
|
+ series: [{
|
|
|
+ name: '新增工单',
|
|
|
+ type: 'bar',
|
|
|
+ data: dataX
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '处理工单',
|
|
|
+ type: 'bar',
|
|
|
+ data: dataC
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '剩余工单',
|
|
|
+ type: 'bar',
|
|
|
+ data: dataS
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ console.log(option)
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- page{
|
|
|
+ page {
|
|
|
padding-bottom: 100rpx;
|
|
|
}
|
|
|
- /deep/.uicon-nav-back{
|
|
|
+
|
|
|
+ /deep/.uicon-nav-back {
|
|
|
color: #FFF !important;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .main{
|
|
|
- background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
|
|
|
+
|
|
|
+ .main {
|
|
|
+ background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(22, 119, 255, 0) 100%);
|
|
|
height: 720rpx;
|
|
|
+
|
|
|
// 标签
|
|
|
- .tabs{
|
|
|
+ .tabs {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 24rpx 32rpx;
|
|
|
- .tabs-item{
|
|
|
+
|
|
|
+ .tabs-item {
|
|
|
width: 144rpx;
|
|
|
line-height: 56rpx;
|
|
|
text-align: center;
|
|
|
- color: rgba(255,255,255,0.6);
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
}
|
|
|
- .item-checked{
|
|
|
- border: 1px solid rgba(255,255,255,1);
|
|
|
- color: rgba(255,255,255,1);
|
|
|
+
|
|
|
+ .item-checked {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
border-radius: 50px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 数据统计
|
|
|
- .data-statistics{
|
|
|
+ .data-statistics {
|
|
|
margin: 24rpx 32rpx;
|
|
|
border-radius: 8px;
|
|
|
- background-color: rgba(255,255,255,1);
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
padding: 24rpx;
|
|
|
- .title{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- .state{
|
|
|
+
|
|
|
+ .state {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 24rpx;
|
|
|
- .state-item{
|
|
|
+
|
|
|
+ .state-item {
|
|
|
width: 144rpx;
|
|
|
height: 144rpx;
|
|
|
border-radius: 8px;
|
|
|
- color: rgba(255,255,255,1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
text-align: center;
|
|
|
padding: 24rpx;
|
|
|
font-weight: bold;
|
|
|
- .state-classify{
|
|
|
-
|
|
|
+
|
|
|
+ .state-classify {
|
|
|
+
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
- .state-number{
|
|
|
+
|
|
|
+ .state-number {
|
|
|
margin-top: 8rpx;
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
- .state1{
|
|
|
- background: linear-gradient(180deg, rgba(255,174,0,1) 0%,rgba(255,123,0,1) 100%);
|
|
|
+
|
|
|
+ .state1 {
|
|
|
+ background: linear-gradient(180deg, rgba(255, 174, 0, 1) 0%, rgba(255, 123, 0, 1) 100%);
|
|
|
}
|
|
|
- .state2{
|
|
|
- background: linear-gradient(178.54deg, rgba(50,204,213,1) 0%,rgba(0,143,169,1) 99.73%);
|
|
|
+
|
|
|
+ .state2 {
|
|
|
+ background: linear-gradient(178.54deg, rgba(50, 204, 213, 1) 0%, rgba(0, 143, 169, 1) 99.73%);
|
|
|
}
|
|
|
- .state3{
|
|
|
- background: linear-gradient(180deg, rgba(24,194,114,1) 0%,rgba(0,148,79,1) 100%);
|
|
|
+
|
|
|
+ .state3 {
|
|
|
+ background: linear-gradient(180deg, rgba(24, 194, 114, 1) 0%, rgba(0, 148, 79, 1) 100%);
|
|
|
}
|
|
|
- .state4{
|
|
|
- background: linear-gradient(180deg, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
|
|
|
+
|
|
|
+ .state4 {
|
|
|
+ background: linear-gradient(180deg, rgba(187, 187, 187, 1) 0%, rgba(153, 153, 153, 1) 100%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- // 工单状态
|
|
|
- .workOrder-state{
|
|
|
- border-radius: 8px;
|
|
|
- background-color: rgba(255,255,255,1);
|
|
|
- margin: 24rpx 32rpx;
|
|
|
- padding: 24rpx;
|
|
|
- .title{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .progress{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 24rpx;
|
|
|
- .progress-item{
|
|
|
- text-align: center;
|
|
|
- .state{
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- margin-top: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .u-progress-info1{
|
|
|
- color:#FF7B00;
|
|
|
-
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .u-progress-info2{
|
|
|
- color:#008FA9;
|
|
|
-
|
|
|
+
|
|
|
+ // 工单状态
|
|
|
+ .workOrder-state {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- .u-progress-info3{
|
|
|
- color:#18C272;
|
|
|
-
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .progress-item {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-progress-info1 {
|
|
|
+ color: #FF7B00;
|
|
|
+
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-progress-info2 {
|
|
|
+ color: #008FA9;
|
|
|
+
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-progress-info3 {
|
|
|
+ color: #18C272;
|
|
|
+
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+
|
|
|
// 每月工单数量
|
|
|
-.workOrder-amount{
|
|
|
+ .workOrder-amount {
|
|
|
border-radius: 8px;
|
|
|
- background-color: rgba(255,255,255,1);
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
margin: 24rpx 32rpx;
|
|
|
padding: 24rpx 0;
|
|
|
- .title{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
padding: 0 24rpx;
|
|
|
}
|
|
|
- .chat{
|
|
|
+
|
|
|
+ .chat {
|
|
|
width: 100%;
|
|
|
height: 692rpx;
|
|
|
margin-top: 54rpx;
|
|
|
- .chat-img{
|
|
|
+
|
|
|
+ .chat-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
wkyy