图片地址替换

qingyiay

2023-07-02 f5427eeb16cadd3b0534454ab3c92df6f0ec1536

 pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue

@@ -1,63 +1,83 @@
<template>
   <view class="bill-of-lading-details">
      <view class="top-banner"
         style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/loadingbanner.png') no-repeat;background-size: cover;">
         <view class="top-information">
            <view class="cutomer-name"
               v-if="orderType == '转入' || orderType == '转出'">煤场:{{ coalDetailsData.toFiledName || '' }}</view>
            <view class="cutomer-name"
               v-else>客户:{{ coalDetailsData.customerName || '' }}</view>
            <view class="fild-name">
               <view class="">矿场:{{ coalDetailsData.deptName || '暂无' }}</view>
               <view class=""
                  v-if="orderType == '转入' || orderType == '转出'">煤场:{{ coalDetailsData.filedName || '' }}</view>
               <view class=""
                  v-else>煤场:{{ coalDetailsData.filedName || '暂无' }}</view>
            </view>
         :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/loadingbanner.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
      </view>
      <view class="top-information">
         <view class="cutomer-name"
            v-if="orderType == '转入' || orderType == '转出'">煤场:{{ coalDetailsData.toFiledName || '' }}</view>
         <view class="cutomer-name"
            v-else>客户:{{ coalDetailsData.customerName || '' }}</view>
         <view class="fild-name">
            <view class="">矿场:{{ coalDetailsData.deptName || '暂无' }}</view>
            <view class=""
               v-if="orderType == '转入' || orderType == '转出'">煤场:{{ coalDetailsData.filedName || '' }}</view>
            <view class=""
               v-else>煤场:{{ coalDetailsData.filedName || '暂无' }}</view>
         </view>
         <view class="block-information">
            <view class="block-main">
               <view class="basic">
                  <view class="coalName">{{ coalDetailsData.coalName }}</view>
                  <view class="status-button"
                     style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/statusbutton.png') no-repeat;
                              background-size: cover;">
                     {{ coalStatus[coalDetailsData.status] || '' }}
                  </view>
      </view>
      <view class="block-information">
         <view class="block-main">
            <view class="basic">
               <view class="coalName">{{ coalDetailsData.coalName||'' }}</view>
               <view class="status-button"
                  :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/statusbutton.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
                  {{ coalStatus[coalDetailsData.statusWeigh] || '' }}
               </view>
               <view class="time">
                  <view class="time-icon"><u-icon name="clock"
                        color="#515151"
                        size="40"></u-icon></view>
                  <view class="send-date">{{ coalDetailsData.sendDate }}</view>
            </view>
            <view class="time">
               <view class="time-icon"><u-icon name="clock"
                     color="#515151"
                     size="40"></u-icon></view>
               <view class="send-date">{{ coalDetailsData.sendDate }}</view>
            </view>
            <view class="coal-code">提煤单编号:&nbsp;&nbsp;{{ coalDetailsData.code || '' }}</view>
            <view class="order-code">
               订单编号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ coalDetailsData.orderCode || '' }}</view>
            <view class="coal-code"
               @click="jumpWeighDetail"
               style="color: rgb(73, 123, 251);">
               查看明细
            </view>

         </view>
      </view>

      <!--  称重历史-->
      <view class="weigh-history"
         v-if="showWeigh.length!==0">
         <view class="block-main">
            <view class="weigh-item"
               v-for='item in showWeigh'
               :key="item.id">
               <view class="weigh-time">
                  <u-tag :text="item.createTime.slice(-8,-3)"
                     plain></u-tag>
               </view>
               <view class="coal-code">提煤单编号:&nbsp;&nbsp;{{ coalDetailsData.code || '' }}</view>
               <view class="order-code">
                  订单编号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ coalDetailsData.orderCode || '' }}</view>
               <view class="weigh-item">
               <view class="item-block">
                  <view class="item">
                     <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/skin.png') no-repeat;background-size: cover;">
                        :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/skin.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
                        皮</view>
                     <view class="num">{{ coalDetailsData.skin }}</view>
                     <view class="num">{{ item.skin }}</view>
                  </view>
                  <view class="item">
                     <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/hair.png') no-repeat;background-size: cover;">
                        :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/hair.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
                        毛</view>
                     <view class="num">{{ coalDetailsData.hair }}</view>
                     <view class="num">{{ item.hair }}</view>
                  </view>
                  <view class="item">
                     <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clean.png') no-repeat;background-size: cover;">
                        :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/clean.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
                        净</view>
                     <view class="num">{{ coalDetailsData.clean }}</view>
                     <view class="num">{{ item.clean }}</view>
                  </view>
               </view>
            </view>
         </view>
      </view>

      <!-- 时间线 -->
      <view class="timeLine">
         <u-steps :current="dayRZ.length - 1"
            direction="column"
@@ -132,6 +152,7 @@
</template>

<script>
   import { onlineurl } from '@/api/request.js'
   import { webSocketUrl } from '@/api/request.js';
   import { mapState, mapMutations } from 'vuex';
   export default {
@@ -174,9 +195,7 @@
               openId: null,
               openName: ''
            },
            coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请',
               '进入场院'
            ], // 状态
            coalStatus: ['未称重', '称重中', '验质中', '称重完成'], // 状态
            weighHouseCode: '',
            // 放空弹窗控制变量
            evacuationModalShow: false,
@@ -206,8 +225,10 @@
               clean: ""
            },
            completeOutSaleShow: false,
            overTmWaixiao: null

            overTmWaixiao: null,
            // 判读网络状态，
            normalCode: true,
            onlineurl,
         };
      },
      onShow() {
@@ -243,13 +264,16 @@
         },
         isapproach() {
            return this.currentPageCoalStatus !== 3;
         },
         // 展示皮毛净
         showWeigh() {
            return this.coalDetailsData.tmTaskCoalItems ? this.coalDetailsData.tmTaskCoalItems : []
         }
      },
      methods: {
         init() {
            this.$reqGet('coalDayPage', { id: this.orderPlanId }).then(res => {
               if (res.code == 0) {
                  // this.dayRZ = res.data;
                  this.dayRZ = res.data.map(v => {
                     let slicedate = v.taskStatusDes.slice(0, 10);
                     if (slicedate == this.currentDate) {
@@ -287,8 +311,8 @@
               title: '加载中'
            });
            this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
               uni.hideLoading();
               if (res.code == 0) {
                  uni.hideLoading();
                  console.log(res, '提煤单详情');
                  this.coalDetailsData = res.data;
                  this.orderType = this.coalDetailsData.orderType;
@@ -311,7 +335,7 @@
                  this.getServiceOpenid.deptId = this.coalDetailsData.deptId;
                  this.getServiceOpenid.filedId = this.coalDetailsData.filedId;
                  // 获取提煤单状态
                  this.currentPageCoalStatus = this.coalDetailsData.status;
                  this.currentPageCoalStatus = this.coalDetailsData.statusWeigh;
                  // 获取原发信息
                  this.primarySkin = this.coalDetailsData.skinTwo;
                  this.primaryHair = this.coalDetailsData.hairTwo;
@@ -339,24 +363,31 @@
         },
         // 日志查询
         coalDayPage() {
            this.interval = setInterval(() => {
               this.$reqGet('coalDayPage', { id: this.orderPlanId }).then(res => {
                  if (res.code == 0) {
                     // this.dayRZ = res.data;
                     this.dayRZ = res.data.map(v => {
                        let slicedate = v.taskStatusDes.slice(0, 10);
                        if (slicedate == this.currentDate) {
                           return {
                              ...v,
                              taskStatusDes: v.taskStatusDes.slice(10)
                           };
                        } else {
                           return { ...v }
                        }
                     });
                  }
               });
            }, 5000);
            if (this.normalCode) {
               this.interval = setInterval(() => {
                  this.$reqGet('coalDayPage', { id: this.orderPlanId }).then(res => {
                     if (res.code == 0) {
                        this.normalCode = true;
                        this.dayRZ = res.data.map(v => {
                           let slicedate = v.taskStatusDes.slice(0, 10);
                           if (slicedate == this.currentDate) {
                              return {
                                 ...v,
                                 taskStatusDes: v.taskStatusDes.slice(10)
                              };
                           } else {
                              return { ...v }
                           }
                        });
                     } else {
                        this.normalCode = false;
                     }
                  });
               }, 10000);
            } else {
               clearInterval(this.interval)
               this.$u.toast('服务器错误,请稍后重试')
            }
         },
         // 展示提煤单详情
         showCaolPickUpBill() {
@@ -493,6 +524,12 @@
         completeOutSaleCancel() {
            this.completeOutSaleShow = false
         },
         // 查看质量明细
         jumpWeighDetail() {
            uni.navigateTo({
               url: `/pages/driver-page/driver-index/bill-of-lading-details/weighDetail/weighDetail?orderPlanId=${this.orderPlanId}`
            })
         }
      }
   };
</script>
@@ -521,169 +558,195 @@

   ::v-deep.bill-of-lading-details {
      width: 100%;
      height: 100vh;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;

      .top-banner {
         width: 100%;
         height: 346rpx;
         position: fixed;
      }

         .top-information {
            width: 94%;
            margin: 0 auto;
            height: vww(52);
            @include flex position: relative;
            flex-direction: column;
      .top-information {
         width: 94%;
         margin: 0 auto;
         height: vww(52);
         @include flex position: relative;
         flex-direction: column;
         justify-content: space-between;
         align-items: flex-start;
         top: vww(25);
         color: #ffffff;
         font-size: 31rpx;
         font-weight: 300;


         .cutomer-name {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
         }

         .fild-name {
            @include flex;
            justify-content: space-between;
            align-items: flex-start;
            top: vww(25);
            color: #ffffff;
            font-size: 31rpx;
            font-weight: 300;
            width: 100%;

            .cutomer-name {
               width: 100%;
            view {
               min-width: 296rpx;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
            }
         }
      }

            .fild-name {
               @include flex;
               justify-content: space-between;
               width: 100%;
      .block-information {
         width: 690rpx;
         height: 100%;
         min-height: 420rpx;
         margin: vww(40) auto;
         background: #ffffff;
         box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
         border-radius: 20rpx;
         position: relative;
         font-size: 30rpx;
         font-weight: 300;
         color: #303030;
         overflow: hidden;

               view {
                  min-width: 296rpx;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
               }
         .block-main {
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: repeat(auto-fit, minmax(40rpx, 1fr));
            gap: auto 5rpx;
            width: 94%;
            height: 100%;
            min-height: 380rpx;
            margin: vww(18) vww(7) vww(11) vww(17);
         }

         .status-button {
            width: vww(71);
            height: vww(36);
            text-align: center;
            line-height: vww(33);
            font-size: 28rpx;
            font-weight: 300;
            position: absolute;
            right: vww(10);
            color: #fff;
         }

         .basic {
            width: 100%;
            height: vww(15);
            @include flex;
            justify-content: flex-start;

            .coalName,
            .order-type {
               width: 45%;
               height: 30rpx;
               font-size: 30rpx;
               font-weight: 300;
               color: #515151;
               position: relative;
            }

            .black-block {
               width: 2rpx;
               height: 30rpx;
               background: #515151;
               position: relative;
               top: vww(2);
            }
         }

         .block-information {
            width: 690rpx;
            height: 396rpx;
            margin: vww(40) auto;
            background: #ffffff;
            box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
            border-radius: 20rpx;
            position: relative;
            font-size: 30rpx;
            font-weight: 300;
            color: #303030;
            overflow: hidden;
         .time {
            width: 35%;
            height: vww(12);
            display: flex;
            justify-content: flex-start;

            .block-main {
               @include flex width: 94%;
               height: 336rpx;
               margin: vww(18) vww(7) vww(11) vww(17);
               flex-direction: column;
               justify-content: space-between;
               align-items: flex-start;
            }

            .status-button {
               width: vww(71);
               height: vww(36);
               text-align: center;
               line-height: vww(33);
               font-size: 28rpx;
               font-weight: 300;
               position: absolute;
               right: vww(10);
               color: #fff;
            }

            .basic {
               width: 100%;
               height: vww(15);
               @include flex;
               justify-content: flex-start;

               .coalName,
               .order-type {
                  width: 45%;
                  height: 30rpx;
                  font-size: 30rpx;
                  font-weight: 300;
                  color: #515151;
                  position: relative;
               }

               .black-block {
                  width: 2rpx;
                  height: 30rpx;
                  background: #515151;
                  position: relative;
                  top: vww(2);
               }
            }

            .time {
               width: 35%;
               height: vww(12);
               display: flex;
               justify-content: flex-start;

               .send-date {
                  width: 148rpx;
                  height: 24rpx;
                  margin-left: vww(14);
                  font-size: 28rpx;
                  font-weight: 300;
                  color: #515151;
               }
            }

            .coal-code,
            .order-code {
               width: 100%;
            .send-date {
               width: 148rpx;
               height: 24rpx;
               margin-left: vww(14);
               font-size: 28rpx;
               font-weight: 300;
               color: #7d7d7d;
               color: #515151;
            }
         }

         .coal-code,
         .order-code {
            width: 100%;
            height: 24rpx;
            font-size: 28rpx;
            font-weight: 300;
            color: #7d7d7d;
         }


      }

      // 称重历史
      .weigh-history {
         @extend .block-information;

         .block-main {
            @extend .block-main;
            gap: 10rpx 20rpx;

            .weigh-item {
               width: 100%;
               height: vww(36);
               height: vww(80);
               @include flex;
               flex-direction: column;
               justify-content: space-around;
               align-items: flex-start;

               .item {
                  min-width: vww(50);
                  height: vww(45);
                  font-size: 21rpx;
                  font-weight: 400;
                  color: #ffffff;
                  text-align: center;
                  line-height: vww(30);
               .item-block {
                  width: 100%;
                  height: vww(36);
                  @include flex;
                  justify-content: space-around;

                  .concrete {
                     width: vww(36);
                     height: vww(36);
                  }
                  .item {
                     min-width: vww(50);
                     height: vww(45);
                     font-size: 21rpx;
                     font-weight: 400;
                     color: #ffffff;
                     text-align: center;
                     line-height: vww(30);
                     @include flex;

                  .num {
                     font-size: 40rpx;
                     font-weight: 300;
                     color: #303030;
                     .concrete {
                        width: vww(36);
                        height: vww(36);
                     }

                     .num {
                        font-size: 40rpx;
                        font-weight: 300;
                        color: #303030;
                     }
                  }
               }
            }
         }
      }

      // 时间线
      .timeLine {
         height: 40%;
         height: 300rpx;
         min-height: 300rpx;
         margin: vww(20);
         position: relative;
         top: vww(120);
         // top: vww(120);
         overflow-y: overlay;
         padding: vww(20);

@@ -716,7 +779,7 @@
         width: 94%;
         margin: 0 auto;
         position: relative;
         top: vww(80);
         // top: vww(80);

         .utils_chil {
            width: 100%;
@@ -743,7 +806,7 @@
      .weigh-ability {
         width: 631rpx;
         height: vww(100);
         margin: vww(80) auto;
         margin: vww(20) auto;
         margin-bottom: vww(10);
         @include flex;
         flex-direction: column;