task#14504, 分数文字右对齐，分数左对齐，订单相关的页面，全部加上分页，搜索服务商，加清除键

src/views/kpi/kpiIndex.vue

@@ -15,6 +15,7 @@
             filterable
             remote
             reserve-keyword
+            clearable
             placeholder="请输入后选择"
             :remote-method="remoteMethod"
             @change="selectSupplierNameHanldle"
@@ -44,11 +45,11 @@
           </div>
           <div class="center common" @click="clickJumpHandle(5)">
             <div class="num">{{ indexData && indexData.refuseOrderRate }}%</div>
-            <div class="itemTitle">拒单率 ></div>
+            <div class="itemTitle" style="cursor: pointer">拒单率 ></div>
           </div>
           <div class="right common" @click="clickJumpHandle(6)">
             <div class="num">{{ indexData && indexData.timeoutOrderRate }}%</div>
-            <div class="itemTitle">超时率 ></div>
+            <div class="itemTitle"  style="cursor: pointer">超时率 ></div>
           </div>
         </div>
       </div>
@@ -101,14 +102,41 @@
         </div>
         <div class="storeWrap" v-if="indexData">
           <circle-char v-if="showScoreChart"  ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
-          <div v-else>
+          <div v-else class="detailScore">
-            <div><span class="defen">接单得分:</span>{{ indexData.orderScore }}</div>
+            <div class="left">
-            <div><span class="defen">接单时效得分:</span>{{ indexData.orderAgeingScore }}</div>
+              <div>
-            <div><span class="defen">到达时效得分:</span>{{ indexData.arriveAgeingScore }}</div>
+                <span class="defen">接单得分:</span>
-            <div><span class="defen">聚合成功率得分:</span>{{ indexData.polymerizationSuccessScore }}</div>
+              </div>
-            <div><span class="defen">APP使用率得分:</span>{{ indexData.appUseScore }}</div>
+              <div>
-            <div><span class="defen">催促率得分:</span>{{ indexData.urgeScore }}</div>
+                <span class="defen">接单时效得分:</span>
-            <div><span class="defen">投诉率得分:</span>{{ indexData.complainScore }}</div>
+              </div>
+              <div>
+                <span class="defen">到达时效得分:</span>
+              </div>
+              <div><span class="defen">聚合成功率得分:</span>
+              </div>
+              <div><span class="defen">APP使用率得分:</span>
+              </div>
+              <div><span class="defen">催促率得分:</span>
+              </div>
+              <div><span class="defen">投诉率得分:</span>
+              </div>
+            </div>
+            <div class="right">
+              <div>
+                <span>{{ indexData.orderScore }}</span>
+              </div>
+              <div>
+                <span>{{ indexData.orderAgeingScore }}</span>
+              </div>
+              <div>
+                <span>{{ indexData.arriveAgeingScore }}</span>
+              </div>
+              <div> <span>{{ indexData.polymerizationSuccessScore }}</span></div>
+              <div> <span>{{ indexData.appUseScore }}</span></div>
+              <div> <span>{{ indexData.urgeScore }}</span></div>
+              <div><span>{{ indexData.complainScore }}</span></div>
+            </div>
           </div>
         </div>
       </div>
@@ -212,7 +240,7 @@
         <noFit-table :active='active'  :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
                      :loading="loading"></noFit-table>
       </div>
-      <el-pagination
+<!--      <el-pagination
           small
           :current-page.sync="pageNum"
           :page-size.sync="pageSize"
@@ -220,6 +248,16 @@
           @size-change="getKpiData"
           layout="prev, pager, next"
           :total="total">
+      </el-pagination>-->
+      <el-pagination
+          small
+          :page-sizes="[20, 50, 100]"
+          :current-page.sync="pageNum"
+          :page-size.sync="pageSize"
+          @current-change="getKpiData"
+          @size-change="getKpiData"
+          layout="prev, pager, next,sizes"
+          :total="total">
       </el-pagination>
     </div>
   </div>
@@ -313,6 +351,7 @@ export default {
   },
   methods: {
     async selectSupplierNameHanldle(){
+      console.log("supplierId",this.supplierId)
       await this.getData()
       setTimeout(()=>{
         this.$refs.Doughnut1.initCircle()
@@ -322,7 +361,7 @@ export default {
         this.$refs.Doughnut5.initCircle()
         this.$refs.Doughnut6.initCircle()
         this.$refs.Doughnut7.initCircle()
-      },500)
+      },1000)
     },
     async remoteMethod(query) {
       if (query !== '') {
@@ -816,6 +855,12 @@ export default {
           this.supplierName=res.data?.supplierName
           this.indexData.refuseOrderRate=this.indexData.refuseOrderRate*100
           this.indexData.timeoutOrderRate=this.indexData.timeoutOrderRate*100
+          if (this.indexData.refuseOrderRate % 1 !== 0) {
+            this.indexData.refuseOrderRate = this.indexData.refuseOrderRate.toFixed(2);
+          }
+          if (this.indexData.timeoutOrderRate % 1 !== 0) {
+            this.indexData.timeoutOrderRate = this.indexData.timeoutOrderRate.toFixed(2);
+          }
           this.indexData.complainOrderRate=this.indexData.complainOrderRate*100
           this.indexData.customerSatisfaction=this.indexData.customerSatisfaction*100
           this.indexData.threeMinutesContactRate=this.indexData.threeMinutesContactRate*100
@@ -1478,10 +1523,25 @@ export default {
     .storeWrap {
       width: 100%;
       text-align: center;
-      .defen{
+      .detailScore{
+        display: flex;
+        justify-content:center;
+      }
+
+     /* .defen{
         display: inline-block;
-        width: 92px;
+        //width: 92px;
+        //text-align: right;
+      }*/
+      .left{
         text-align: right;
+        padding-right: 5px;
+      }
+      .right{
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        text-align: left;
       }
     }