司机首页添加状态，细节修改

qingyiay

2023-06-29 37a0b120e66bcda386b0a8c256ca0fe9f09b29cb

 pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue

@@ -17,17 +17,28 @@
            </view>
         </view>
         <view class="main-block">
            <view class="data-filter" @click="showPopup">
               <view class="search-icon"><u-icon name="search" color="#494949" size="50"></u-icon></view>
            <view class="data-filter"
               @click="showPopup">
               <view class="search-icon"><u-icon name="search"
                     color="#494949"
                     size="50"></u-icon></view>
               <view class="date-text">{{ dateselect }}</view>
               <view class="">
                  <view class="arrow-icon"><u-icon name="arrow-down-fill" color="#1481FF" size="50"></u-icon></view>
                  <view class="arrow-icon"><u-icon name="arrow-down-fill"
                        color="#1481FF"
                        size="50"></u-icon></view>
               </view>
            </view>
            <view class="filter-condition"></view>
            <view class="date-information">
               <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="filterList.length == 0"></u-empty>
               <view class="statistics-card" v-for="(item, index) in filterList" :key="index">
               <u-empty mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  textSize="30"
                  iconSize="1000"
                  v-if="filterList.length == 0"></u-empty>
               <view class="statistics-card"
                  v-for="(item, index) in filterList"
                  :key="index">
                  <view class="card-top">
                     <view class="left"><combined-title :title="item.condition"></combined-title></view>
                     <view class="card-top_num">
@@ -40,13 +51,18 @@
                        }}吨
                     </view>
                  </view>
                  <view class="card-main" v-for="(value, i) in item.taskCoalList" :key="i" @click="faYunDetail(value.id)">
                  <view class="card-main"
                     v-for="(value, i) in item.taskCoalList"
                     :key="i"
                     @click="faYunDetail(value.id)">
                     <view class="first-line">
                        <view class="main-information">
                           <view class="sign">装</view>
                           <view class="filedname">
                              <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName || '' }}</text>
                              <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.customerName || '' }}</text>
                              <text
                                 v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName || '' }}</text>
                              <text
                                 v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.customerName || '' }}</text>
                           </view>
                        </view>
                        <view class="main-divider"></view>
@@ -56,8 +72,10 @@
                        <view class="main-information">
                           <view class="sign">卸</view>
                           <view class="filedname">
                              <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.customerName || '' }}</text>
                              <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.deptName || '' }}</text>
                              <text
                                 v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.customerName || '' }}</text>
                              <text
                                 v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.deptName || '' }}</text>
                           </view>
                        </view>
                     </view>
@@ -65,33 +83,44 @@
                        <view class="coal-name">
                           <view class="">{{ value.coalName }}</view>
                           <view class="black-bar"></view>
                           <view class="coal-type" v-if="value.orderType">{{ value.orderType }}</view>
                           <view class="coal-type"
                              v-if="value.orderType">{{ value.orderType }}</view>
                        </view>
                        <!-- <view class="black-block"><view class="black-bar"></view></view>
                        <view class="coal-type">{{ value.orderType }}</view> -->
                     </view>
                     <view class="third-line">
                        <view class="carnum-icon"><image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png" mode="widthFix"></image></view>
                        <view class="carnum-icon">
                           <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png"
                              mode="widthFix"></image>
                        </view>
                        <view class="carnum-text">{{ value.carNo || '' }}</view>
                     </view>
                     <view class="fourth-line">
                        <view class="time-icon"><u-icon name="clock" color="#515151" size="28"></u-icon></view>
                        <view class="time-icon"><u-icon name="clock"
                              color="#515151"
                              size="28"></u-icon></view>
                        <view class="send-date">{{ value.sendDate }}</view>
                     </view>
                  </view>
               </view>
            </view>
         </view>
         <u-popup :show="conditinonShow" mode="bottom" :closeable="true" :closeOnClickOverlay="true" @close="conditinonclose">
            <scroll-view scroll-y="true" class="scroll-Y">
         <u-popup :show="conditinonShow"
            mode="bottom"
            :closeable="true"
            :closeOnClickOverlay="true"
            @close="conditinonclose">
            <scroll-view scroll-y="true"
               class="scroll-Y">
               <view class="filter-main">
                  <view class="filter-body date-button">
                     <view class="condition-name">日期</view>
                     <view class="filter-name">
                        <u-button :text="dateselect" @click="opencalendar"></u-button>
                        <u-button :text="dateselect"
                           @click="opencalendar"></u-button>
                        <view class="filter-button ">
                           <uni-calendar
                              ref="calendar"
                           <uni-calendar ref="calendar"
                              class="uni-calendar--hook"
                              :clear-date="true"
                              :date="info.date"
@@ -100,49 +129,71 @@
                              :startDate="info.startDate"
                              :endDate="info.endDate"
                              :range="info.range"
                              @confirm="confirm"
                           />
                              @confirm="confirm" />
                        </view>
                     </view>
                  </view>
                  <view class="filter-body">
                     <view class="condition-name">煤种</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)">
                           <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" :class="{ shadowactive: item.active }"></u-button>
                        <view class="filter-button"
                           v-for="(item, index) in coalList"
                           :key="index"
                           @click="filterCondition(0, index, item.condition)">
                           <u-button :text="item.condition"
                              :type="item.active ? 'primary' : ''"
                              size="small"
                              :class="{ shadowactive: item.active }"></u-button>
                        </view>
                        <!-- <view class="toggle-button">
                        <u-button :text="coalShow < coalTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button>
                     </view> -->
                     </view>
                  </view>
                  <view class="filter-body" v-if="typeList.length !== 0">
                  <view class="filter-body"
                     v-if="typeList.length !== 0">
                     <view class="condition-name">类型</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)">
                           <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                        <view class="filter-button"
                           v-for="(item, index) in typeList"
                           :key="index"
                           @click="filterCondition(1, index, item.condition)">
                           <u-button :text="item.condition"
                              :type="item.active ? 'primary' : ''"
                              size="small"></u-button>
                        </view>
                        <!-- <view class="toggle-button">
                        <u-button :text="typeShow < typeTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(1)" v-if="typeTotal > 3"></u-button>
                     </view> -->
                     </view>
                  </view>
                  <view class="filter-body" v-if="roleType !== 1">
                  <view class="filter-body"
                     v-if="roleType !== 1">
                     <view class="condition-name">客户</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)">
                           <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                        <view class="filter-button"
                           v-for="(item, index) in customerList"
                           :key="index"
                           @click="filterCondition(2, index, item.condition)">
                           <u-button :text="item.condition"
                              :type="item.active ? 'primary' : ''"
                              size="small"></u-button>
                        </view>
                        <!-- <view class="toggle-button">
                        <u-button :text="customerShow < customerTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(2)" v-if="customerTotal > 3"></u-button>
                     </view> -->
                     </view>
                  </view>
                  <view class="filter-body" v-if="roleType == 1">
                  <view class="filter-body"
                     v-if="roleType == 1">
                     <view class="condition-name">货代</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)">
                           <u-button :text="item.condition" :type="item.active ? 'primary' : ''"></u-button>
                        <view class="filter-button"
                           v-for="(item, index) in forwarderList"
                           :key="index"
                           @click="filterCondition(3, index, item.condition)">
                           <u-button :text="item.condition"
                              :type="item.active ? 'primary' : ''"></u-button>
                        </view>
                        <!-- <view class="toggle-button">
                        <u-button
@@ -155,11 +206,17 @@
                     </view> -->
                     </view>
                  </view>
                  <view class="filter-body" v-if="roleType != 3">
                  <view class="filter-body"
                     v-if="roleType != 3">
                     <view class="condition-name">车队</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)">
                           <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                        <view class="filter-button"
                           v-for="(item, index) in fleetList"
                           :key="index"
                           @click="filterCondition(4, index, item.condition)">
                           <u-button :text="item.condition"
                              :type="item.active ? 'primary' : ''"
                              size="small"></u-button>
                        </view>
                        <!-- <view class="toggle-button">
                        <u-button :text="fleetShow < fleetTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(4)" v-if="fleetTotal > 3"></u-button>
@@ -169,19 +226,31 @@
                  <view class="filter-body">
                     <view class="condition-name">矿场</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)">
                           <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                        <view class="filter-button"
                           v-for="(item, index) in filedList"
                           :key="index"
                           @click="filterCondition(5, index, item.condition)">
                           <u-button :text="item.condition"
                              :type="item.active ? 'primary' : ''"
                              size="small"></u-button>
                        </view>
                        <!-- <view class="toggle-button">
                        <u-button :text="filedShow < filedTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(5)" v-if="filedTotal > 3"></u-button>
                     </view> -->
                     </view>
                  </view>
                  <view class="filter-body" v-if="roleType == 2">
                  <view class="filter-body"
                     v-if="roleType == 2">
                     <view class="condition-name">车牌号</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in carNoList" :key="index" @click="filterCondition(6, index, item.condition)">
                           <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" v-if="index < carNoShow"></u-button>
                        <view class="filter-button"
                           v-for="(item, index) in carNoList"
                           :key="index"
                           @click="filterCondition(6, index, item.condition)">
                           <u-button :text="item.condition"
                              :type="item.active ? 'primary' : ''"
                              size="small"
                              v-if="index < carNoShow"></u-button>
                        </view>
                        <!-- <view class="toggle-button">
                        <u-button :text="carNoShow < carNoTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button>
@@ -191,8 +260,16 @@
               </view>
            </scroll-view>
            <view class="utils-button">
               <view class="reset-button"><u-button type="default" text="重置" :plain="true" shape="circle" @click="resetCondition"></u-button></view>
               <view class="confirm-button"><u-button type="primary" text="确定" :plain="true" shape="circle" @click="confirmCondition"></u-button></view>
               <view class="reset-button"><u-button type="default"
                     text="重置"
                     :plain="true"
                     shape="circle"
                     @click="resetCondition"></u-button></view>
               <view class="confirm-button"><u-button type="primary"
                     text="确定"
                     :plain="true"
                     shape="circle"
                     @click="confirmCondition"></u-button></view>
            </view>
         </u-popup>
         <tab-bar :current="1"></tab-bar>
@@ -252,7 +329,7 @@
         // 点击右箭头详情弹窗
         faYunDetailobj: {},
         modalShow: false,
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请', '进入场院']
            coalStatus: ['未称重', '称重中', '验质中', '称重完成']
      };
   },
   onShow() {
@@ -420,7 +497,8 @@
               condition: val.condition,
               conditionId: val.conditionId,
               conditionType: val.conditionType,
               taskCoalList: val.taskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key => mapping[key](v, conditionMapping[key])))
                  taskCoalList: val.taskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key =>
                     mapping[key](v, conditionMapping[key])))
            };
         });
         if (this.filterList.length != 0) {
@@ -601,12 +679,14 @@
};
</script>

<style lang="scss" scoped>
<style lang="scss"
   scoped>
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

@mixin firstLine {
   width: 80%;
   height: vww(68);
@@ -614,25 +694,30 @@
   display: flex;
   justify-content: space-between;
}

::v-deep .toggle-button .u-button {
   width: vww(40);
}

.scroll-Y {
   height: 1000rpx;
   position: relative;
   top: 20rpx;
}

.utils-button {
   width: 94%;
   height: vww(30);
   margin: vww(50) auto;
   @include flex;

   .reset-button {
      /deep/ .u-button {
         border: 1px solid #c5c5c5;
         outline: none;
      }
   }

   .confirm-button {
      /deep/ .u-button {
         border: 1px solid #3b56eb;
@@ -640,20 +725,24 @@
         color: #3b56eb;
      }
   }

   /deep/ .u-button {
      width: 279rpx;
      height: 60rpx;
      font-size: 28rpx;
   }
}

.white-block {
   width: 100%;
   height: vww(50);
   margin-top: vww(10);
}

.main {
   width: 100%;
   margin: 0 auto;

   /*顶部统计栏*/
   .top-statistics {
      width: 100%;
@@ -661,6 +750,7 @@
      background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
      display: flex;
      justify-content: center;

      .top-body {
         width: 690rpx;
         height: 220rpx;
@@ -668,6 +758,7 @@
         display: flex;
         justify-content: space-between;
         flex-direction: column;

         .content-statistics {
            width: 690rpx;
            height: 140rpx;
@@ -677,12 +768,14 @@
            display: flex;
            justify-content: space-evenly;
            align-items: center;

            .content-text {
               height: vww(40);
               @include flex;
               flex-direction: column;
               margin-top: 31rpx;
               margin-bottom: 31rpx;

               .content-container {
                  width: 100%;
                  min-height: vww(16);
@@ -691,6 +784,7 @@
                  color: #3b56eb;
                  text-align: center;
               }

               .content-num {
                  width: 96rpx;
                  min-height: 24rpx;
@@ -700,6 +794,7 @@
               }
            }
         }

         .content-title {
            width: 160rpx;
            height: 38rpx;
@@ -711,6 +806,7 @@
         }
      }
   }

   .main-block {
      width: 690rpx;
      margin: vww(12) vww(15) auto vww(15);
@@ -722,6 +818,7 @@
      overflow: hidden;
      position: relative;
      top: -145rpx;

      .data-filter {
         width: 635rpx;
         height: 68rpx;
@@ -730,6 +827,7 @@
         border-radius: 34rpx;
         margin-top: vww(21);
         padding: 0 vww(5);

         @include flex .date-text {
            width: 330rpx;
            height: 40rpx;
@@ -738,6 +836,7 @@
            color: #494949;
         }
      }

      .filter-condition {
         width: 100%;
         height: 54rpx;
@@ -745,10 +844,12 @@
         @include flex;
         margin-top: vww(15);
      }

      .date-information {
         width: 635rpx;
         background: #f6faff;
         border-radius: 20rpx;

         .statistics-card {
            width: 100%;
            min-height: vww(120);
@@ -757,6 +858,7 @@
            margin-top: vww(5);
            margin-bottom: vww(5);
            overflow: hidden;

            &:last-child {
               .card-main {
                  &:last-child {
@@ -764,20 +866,24 @@
                  }
               }
            }

            .card-top {
               width: 96%;
               @include flex;

               .left {
                  font-size: 30rpx;
                  font-weight: 400;
                  color: #494949;
               }

               .card-top_num {
                  font-size: 40rpx;
                  font-weight: 400;
                  color: #6074ee;
               }
            }

            .card-main {
               width: 100%;
               height: vww(150);
@@ -788,6 +894,7 @@
               position: relative;
               @include flex flex-direction: column;
               align-items: flex-start;

               .first-line {
                  width: 80%;
                  height: vww(32);
@@ -795,12 +902,14 @@
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .main-information {
                     width: 88%;
                     height: vww(28);
                     display: flex;
                     justify-content: flex-start;
                     align-items: center;

                     .sign {
                        width: vww(28);
                        height: vww(28);
@@ -814,6 +923,7 @@
                        margin-right: vww(20);
                     }
                  }

                  .main-divider {
                     width: 530rpx;
                     height: 1rpx;
@@ -822,6 +932,7 @@
                     top: 80rpx;
                     left: vww(50);
                  }

                  .point-number {
                     width: 20%;
                     font-size: 40rpx;
@@ -833,15 +944,18 @@
                     flex-wrap: wrap;
                  }
               }

               .first-extra {
                  @include firstLine;
                  height: vww(32);

                  .main-information {
                     width: 100%;
                     height: vww(28);
                     display: flex;
                     justify-content: flex-start;
                     align-items: center;

                     .sign {
                        width: vww(28);
                        height: vww(28);
@@ -856,12 +970,14 @@
                     }
                  }
               }

               .second-line {
                  width: 100%;
                  height: vww(15);
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .coal-name {
                     flex-grow: 1;
                     height: 30rpx;
@@ -871,12 +987,14 @@
                     position: relative;
                     display: flex;
                     align-items: center;

                     .black-bar {
                        width: 2rpx;
                        height: 30rpx;
                        background: #515151;
                        margin-left: vww(12);
                     }

                     .coal-type {
                        margin-left: vww(12);
                        min-width: vww(50);
@@ -888,27 +1006,32 @@
                     }
                  }
               }

               .third-line {
                  width: 40%;
                  min-height: vww(15);
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-start;

                  .carnum-icon {
                     width: 28rpx;
                     height: 28rpx;
                     margin-right: vww(10);

                     image {
                        width: 28rpx;
                        height: 28rpx;
                     }
                  }

                  .carnum-text {
                     font-size: 28rpx;
                     font-weight: 300;
                     color: #515151;
                  }
               }

               .fourth-line {
                  width: 40%;
                  height: vww(14);
@@ -916,6 +1039,7 @@
                  justify-content: flex-start;
                  align-items: center;
                  color: #515151;

                  .time-icon {
                     margin-right: vww(10);
                  }
@@ -924,32 +1048,38 @@
         }
      }
   }

   .filter-main {
      min-height: 950rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .date-button {
         width: 80%;
         height: vww(80);
         margin: vww(5) auto;

         .condition-name {
            margin-bottom: vww(10);
         }
      }

      .filter-body {
         width: 100%;
         position: relative;
         display: flex;
         justify-content: flex-start;
         flex-wrap: wrap;

         .condition-name {
            margin-left: vww(15);
            margin-top: vww(10);
            font-size: vww(16);
            color: #686868;
         }

         .filter-name {
            width: 94%;
            margin: 0 auto;
@@ -965,11 +1095,13 @@
               padding: vww(8);
               margin: vww(5) vww(5);
               margin-bottom: vww(10);

               /deep/ .shadowactive {
                  background: linear-gradient(90deg, rgba(73, 123, 251, 0.32), rgba(72, 16, 255, 0.32));
                  box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
               }
            }

            .toggle-button {
               width: 30%;
               display: flex;
@@ -981,6 +1113,7 @@
         }
      }
   }

   // 日期发运
   // .date-information {
   //    width: 100%;