|
|
@@ -0,0 +1,184 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="工单统计" title-color="#fff" :background="background" back-icon-color="#ffffff" ></u-navbar>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view class="tabs">
|
|
|
+ <view class="tabs-item item-checked">
|
|
|
+ 当天
|
|
|
+ </view>
|
|
|
+ <view class="tabs-item">
|
|
|
+ 一周
|
|
|
+ </view>
|
|
|
+ <view class="tabs-item">
|
|
|
+ 当天
|
|
|
+ </view>
|
|
|
+ <view class="tabs-item">
|
|
|
+ 自定义
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 数据统计 -->
|
|
|
+ <view class="data-statistics">
|
|
|
+ <view class="title">
|
|
|
+ 数据统计
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ <view class="state-item state1" >
|
|
|
+ <view class="state-classify">
|
|
|
+ 待指派
|
|
|
+ </view>
|
|
|
+ <view class="state-number">
|
|
|
+ 2
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="state-item state2" >
|
|
|
+ <view class="state-classify">
|
|
|
+ 进行中
|
|
|
+ </view>
|
|
|
+ <view class="state-number">
|
|
|
+ 3
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="state-item state3" >
|
|
|
+ <view class="state-classify">
|
|
|
+ 已解决
|
|
|
+ </view>
|
|
|
+ <view class="state-number">
|
|
|
+ 33
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="state-item state4" >
|
|
|
+ <view class="state-classify">
|
|
|
+ 已关闭
|
|
|
+ </view>
|
|
|
+ <view class="state-number">
|
|
|
+ 34
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 工单状态 -->
|
|
|
+ <view class="workOrder-state">
|
|
|
+ <view class="title">
|
|
|
+ 工单状态
|
|
|
+ </view>
|
|
|
+ <view class="progress">
|
|
|
+ <view class="progress-item">
|
|
|
+ <view class="circle-progress">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ 待指派
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ background:{
|
|
|
+ backgroundColor:'#1677FF'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /deep/.uicon-nav-back{
|
|
|
+ color: #FFF !important;
|
|
|
+
|
|
|
+ }
|
|
|
+ .main{
|
|
|
+ background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
|
|
|
+ height: 720rpx;
|
|
|
+ // 标签
|
|
|
+ .tabs{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ .tabs-item{
|
|
|
+ width: 144rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(255,255,255,0.6);
|
|
|
+ }
|
|
|
+ .item-checked{
|
|
|
+ border: 1px solid rgba(255,255,255,1);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 数据统计
|
|
|
+ .data-statistics{
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ padding: 24rpx;
|
|
|
+ .title{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .state{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .state-item{
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ text-align: center;
|
|
|
+ padding: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .state-classify{
|
|
|
+
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .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%);
|
|
|
+ }
|
|
|
+ .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%);
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
