增加路线规划，样式修改

qingyiay

2023-05-15 6087ba7d24f2353c2d01a5e5a384d5a20f97a19b

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

@@ -26,6 +26,7 @@
            </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">
                  <view class="card-top">
                     <view class="left"><combined-title :title="item.condition"></combined-title></view>
@@ -39,7 +40,19 @@
                  </view>
                  <view class="card-main" v-for="(value, i) in item.taskCoalList" :key="i" @click="faYunDetail(value.id)">
                     <view class="first-line">
                        <view class="dispatch-receive">
                        <view class="main-information">
                           <view class="sign">装</view>
                           <view class="filedname">
                              <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName.slice(0, 16) }}</text>
                              <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">
                                 {{ value.customerName.slice(0, 16) }}
                              </text>
                              <text v-show="value.deptName.length >= 15 || value.customerName.length >= 15">...</text>
                           </view>
                        </view>
                        <view class="main-divider"></view>
                        <view class="point-number">{{ value.clean.toFixed(2) || 0 }}</view>
                        <!-- <view class="dispatch-receive">
                           <view v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'" class="container">
                              <view class="dispatch">{{ value.deptName }}</view>
                              <view class="receive-icon"></view>
@@ -50,8 +63,22 @@
                              <view class="receive-icon"></view>
                              <view class="receive">{{ value.deptName }}</view>
                           </view>
                        </view> -->
                        <!-- <view class="point-number">{{ value.clean.toFixed(2) || 0 }}</view> -->
                     </view>
                     <view class="first-extra">
                        <view class="main-information">
                           <view class="sign">卸</view>
                           <view class="filedname">
                              <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">
                                 {{ value.customerName.slice(0, 16) }}
                              </text>
                              <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">
                                 {{ value.deptName.slice(0, 16) }}
                              </text>
                              <text v-show="value.customerName.length >= 15 || value.deptName.length >= 15">...</text>
                           </view>
                        </view>
                        <view class="point-number">{{ value.clean.toFixed(2) || 0 }}</view>
                     </view>
                     <view class="second-line">
                        <view class="coal-name">
@@ -218,6 +245,8 @@
         },
         first: '',
         last: '',
         firstFilter: '',
         lastFilter: '',
         taskList: [],
         filterList: [],
         totalLength: 0,
@@ -242,7 +271,7 @@
         // 点击右箭头详情弹窗
         faYunDetailobj: {},
         modalShow: false,
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤场', '出煤仓']
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请', '进入场院']
      };
   },
   onShow() {
@@ -258,6 +287,7 @@
         let d = '01';
         m = m < 10 ? '0' + m : m; //月份补 0
         this.first = [y, m, d].join('-');
         this.firstFilter = [y, m, d].join('-');
      },
      lastDate() {
         let y = new Date().getFullYear(); //获取年份
@@ -266,6 +296,7 @@
         m = m < 10 ? '0' + m : m; //月份补 0
         d = d < 10 ? '0' + d : d; //日数补 0
         this.last = [y, m, d].join('-');
         this.lastFilter = [y, m, d].join('-');
      },
      // 筛选条件
      getShipping() {
@@ -431,19 +462,8 @@
      // 重置筛选
      resetCondition() {
         this.conditinonShow = false;
         this.filterList = this.taskList;
         if (this.filterList.length != 0) {
            this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
            this.totalTon = this.filterList.map(v =>
               v.taskCoalList.reduce((prev, cur) => {
                  return cur.clean + prev;
               }, 0)
            );
            this.totalTon = this.totalTon.reduce((x, y) => x + y);
         } else {
            this.totalLength = 0;
            this.totalTon = 0;
         }
         this.first = this.dateRange.slice(0, 10);
         this.last = this.dateRange.slice(11);
         this.coalList.forEach(v => {
            v.active = false;
         });
@@ -560,7 +580,7 @@
         return uni.getStorageSync('roleType');
      },
      dateRange() {
         return `日期:${this.first}-${this.last}`;
         return `${this.firstFilter}-${this.lastFilter}`;
      },
      dateselect() {
         return `${this.first}-${this.last}`;
@@ -605,6 +625,13 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
}
@mixin firstLine {
   width: 80%;
   height: vww(68);
   margin: vww(10) vww(16) 0 0;
   display: flex;
   justify-content: space-between;
}
::v-deep .toggle-button .u-button {
   width: vww(40);
@@ -674,7 +701,6 @@
                  width: 100%;
                  height: vww(16);
                  font-size: 40rpx;
                  font-family: Source Han Sans CN;
                  font-weight: bold;
                  color: #3b56eb;
                  text-align: center;
@@ -683,7 +709,6 @@
                  width: 96rpx;
                  height: 24rpx;
                  font-size: 24rpx;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #333333;
               }
@@ -693,7 +718,6 @@
            width: 160rpx;
            height: 38rpx;
            font-size: 40rpx;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #ffffff;
            line-height: 69rpx;
@@ -724,7 +748,6 @@
            width: 330rpx;
            height: 40rpx;
            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #494949;
         }
@@ -751,20 +774,18 @@
               @include flex;
               .left {
                  font-size: 30rpx;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #494949;
               }
               .card-top_num {
                  font-size: 40rpx;
                  font-family: CTCuHeiSJ;
                  font-weight: 400;
                  color: #6074ee;
               }
            }
            .card-main {
               width: 100%;
               height: vww(120);
               height: vww(150);
               border-bottom: vww(1) solid #d6d6d6;
               margin-top: vww(12);
               padding-bottom: vww(12);
@@ -772,46 +793,71 @@
               @include flex flex-direction: column;
               align-items: flex-start;
               .first-line {
                  width: 94%;
                  width: 80%;
                  height: vww(32);
                  color: #303030;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .dispatch-receive {
                     width: 90%;
                  .main-information {
                     width: 88%;
                     height: vww(28);
                     display: flex;
                     justify-content: space-between;
                     justify-content: flex-start;
                     align-items: center;
                     margin-right: vww(12);
                     .container {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                     .sign {
                        width: vww(28);
                        height: vww(28);
                        line-height: vww(28);
                        text-align: center;
                        background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }
                     .receive-icon {
                        width: 62rpx;
                        height: 14rpx;
                        border-bottom: 3px solid #275fa5;
                        position: relative;
                        &:after {
                           content: '';
                           position: absolute;
                           width: 3px;
                           height: 10px;
                           background-color: #275fa5;
                           right: 0;
                           transform: rotate(-45deg);
                        }
                     }
                  }
                  .main-divider {
                     width: 548rpx;
                     height: 1rpx;
                     background: #e3e3e3;
                     position: absolute;
                     top: 80rpx;
                     left: vww(50);
                  }
                  .point-number {
                     width: 20%;
                     font-size: 40rpx;
                     font-family: CTCuHeiSJ;
                     font-weight: 400;
                     color: #f81414;
                     position: absolute;
                     right: -10rpx;
                     display: flex;
                     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);
                        line-height: vww(28);
                        text-align: center;
                        background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }
                  }
               }
               .second-line {
@@ -824,7 +870,6 @@
                     flex-grow: 1;
                     height: 30rpx;
                     font-size: 30rpx;
                     font-family: Microsoft YaHei;
                     font-weight: 300;
                     color: #515151;
                     position: relative;
@@ -842,7 +887,6 @@
                        height: 30rpx;
                        line-height: 30rpx;
                        font-size: 30rpx;
                        font-family: Microsoft YaHei;
                        font-weight: 300;
                        color: #515151;
                     }
@@ -865,7 +909,6 @@
                  }
                  .carnum-text {
                     font-size: 28rpx;
                     font-family: Microsoft YaHei;
                     font-weight: 300;
                     color: #515151;
                  }