qingyiay
2023-04-06 1ddeee845f9c7e4917d5c991820ed4d1baddfeae
pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue
@@ -1,51 +1,174 @@
<template>
   <view class="bill-of-lading-details">
      <view class="bangDanMessage"><text>磅单信息</text></view>
      <view class="timeLine" style="font-size: 16rpx;"><u-text v-for="(item, index) in dayRZ" :key="index" :text="item.taskStatusDes"></u-text></view>
      <view class="bangDanMessage">
         <view class="">
            <text>客户:{{ coalDetailsData.customerName || '' }}</text>
            <text>矿厂:{{ coalDetailsData.deptName || '' }}</text>
         </view>
         <view class="">
            <text>皮重:{{ coalDetailsData.skin || '' }}</text>
            <text>毛重:{{ coalDetailsData.hair || '' }}</text>
            <text>净重:{{ coalDetailsData.clean || '' }}</text>
         </view>
         <view class="">
            <text>磅单类型:{{ coalDetailsData.orderTye || '' }}</text>
            <text>状态:{{ coalStatus[coalDetailsData.status] }}</text>
         </view>
         <view class="">
            <text>煤场:{{ coalDetailsData.filedName || '' }}</text>
            <text>发运时间:{{ coalDetailsData.sendDate || '' }}</text>
            <text>提煤单编号:{{ coalDetailsData.code || '' }}</text>
            <text>订单编号:{{ coalDetailsData.orderCode || '' }}</text>
         </view>
      </view>
      <view class="timeLine" style="font-size: 16rpx;">
         <u--text type="primary" size="30" plain v-for="(item, index) in dayRZ" :key="index" :text="item.taskStatusDes"></u--text>
      </view>
      <view class="utilsBox">
         <view class="utils_chil utils_chilTop">
            <u-button text="签到" type="primary" @click="arriveClick"></u-button>
            <u-button text="入场申请" type="primary" @click="rcsqClick"></u-button>
            <u-button text="放空" type="primary"></u-button>
            <u-button text="呼叫客服" type="primary"></u-button>
            <u-button text="签到" type="primary" plain @click="arriveClick"></u-button>
            <u-button text="入场申请" type="primary" plain @click="rcsqClick"></u-button>
            <u-button text="放空" type="primary" plain @click="evacuation" throttleTime="500"></u-button>
            <u-button text="呼叫客服" type="primary" plain @click="callCustomerService"></u-button>
         </view>
         <view class="utils_chil"><u-button text="展示提煤单" @click="showCaolPickUpBill" type="primary"></u-button></view>
         <view class="utils_chil"><u-button text="上磅计量" @click="cengZhongClick" type="primary"></u-button></view>
      </view>
      <view class="evacuationModal">
         <u-modal
            :show="evacuationModalShow"
            :title="evacuationTitle"
            :content="evacuationContent"
            :showCancelButton="true"
            @confirm="evacuationConfirm"
            @cancel="evacuationCancel"
         ></u-modal>
      </view>
   </view>
</template>
<script>
let socket = null;
import { webSocketUrl } from '@/api/request.js';
export default {
   onLoad(value) {
      console.log('页面加载', value);
      if (value.orderPlanId && value.yyId) {
         this.orderPlanId = value.orderPlanId;
         this.yyId = value.yyId;
      }
      // wx.startRecord();
   },
   data() {
      return {
         orderPlanId: null,
         yyId: null,
         dayRZ: []
         dayRZ: [],
         coalDetailsData: {}, // 提煤单详情
         currentPageCoalStatus: 0, // 当前页面提煤单状态
         // 获取所在磅房参数
         getWeightHouseObj: {
            deptId: '',
            filedId: '',
            tmId: '',
            tmCode: '',
            carNo: ''
         },
         // 获取入场申请的列表页面参数
         getYuYueDataParams: {
            deptId: '',
            filedId: '',
            sendDate: ''
         },
         // 获取客服openid参数
         getServiceOpenid: {
            deptId: '',
            filedId: ''
         },
         // 客服信息
         serviceInfoObj: {
            openId: null,
            openName: ''
         },
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤场', '出煤仓', '放空'], // 状态
         weighHouseCode: '',
         // 放空弹窗控制变量
         evacuationModalShow: false,
         evacuationTitle: '放空确认',
         evacuationContent: '是否确认放空',
         // 第一次放空参数
         weighData: {
            sceneId: '',
            gateCameraId: '',
            equipmentCode: '',
            weigh: 30
         }
      };
   },
   onShow() {
      this.init();
   },
   computed: {
      name() {
         return uni.getStorageSync('name');
      },
      openid() {
         return uni.getStorageSync('openid');
      }
   },
   methods: {
      init() {
         this.coalDayPage();
         this.coalDayPage(); //获取日志
         this.getTakeCoal(); //获取提煤单详情
         this.getgetService(); //获取客服
      },
      // 日志查询
      coalDayPage() {
         this.$reqGet('coalDayPage').then(res => {
            if (res.code == 0) {
               this.dayRZ = res.data.records;
      // 获取客服openid
      getgetService() {
         this.$reqGet('getCallOutList', this.getServiceOpenid).then(res => {
            console.log(res, '客服openid');
            if (res.code != 0) {
               this.$u.toast('获取客服信息失败');
            } else {
               if (res.data.length > 0) {
                  this.serviceInfoObj.openId = res.data[0].openId;
                  this.serviceInfoObj.openName = res.data[0].openName;
                  uni.setStorageSync('customeropenId', this.serviceInfoObj.openId);
                  uni.setStorageSync('customerName', this.serviceInfoObj.openName);
               }
            }
         });
      },
      // 获取提煤单详情
      getTakeCoal() {
         this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
            if (res.code == 0) {
               this.coalDetailsData = res.data[0];
               // 获取所在磅房参数赋值
               this.getWeightHouseObj.deptId = this.coalDetailsData.deptId;
               this.getWeightHouseObj.filedId = this.coalDetailsData.filedId;
               this.getWeightHouseObj.tmId = this.coalDetailsData.id;
               this.getWeightHouseObj.tmCode = this.coalDetailsData.code;
               this.getWeightHouseObj.carNo = this.coalDetailsData.carNo;
               // 获取入场申请操作后的预约列表的参数
               this.getYuYueDataParams.deptId = this.coalDetailsData.deptId;
               this.getYuYueDataParams.filedId = this.coalDetailsData.filedId;
               this.getYuYueDataParams.sendDate = this.coalDetailsData.sendDate;
               // 获取客服openId参数赋值
               this.getServiceOpenid.deptId = this.coalDetailsData.deptId;
               this.getServiceOpenid.filedId = this.coalDetailsData.filedId;
               // 获取提煤单状态
               this.currentPageCoalStatus = this.coalDetailsData.status;
            }
         });
      },
      // 日志查询
      coalDayPage() {
         this.$reqGet('coalDayPage', { id: this.orderPlanId }).then(res => {
            if (res.code == 0) {
               this.dayRZ = res.data;
            }
         });
      },
      // 展示提煤单详情
      showCaolPickUpBill() {
         uni.navigateTo({
            url: `/pages/driver-page/driver-index/bill-of-lading-details/coal-pick-up-bill/coal-pick-up-bill?orderPlanId=${this.orderPlanId}`
@@ -53,19 +176,147 @@
      },
      // 签到
      arriveClick() {
         this.$reqPost('arrive', { id: this.orderPlanId }, 'params').then(res => {
            console.log(res, '签到');
         uni.navigateTo({
            url: `/pages/driver-page/driver-index/bill-of-lading-details/punchTheClock/punchTheClock?orderPlanId=${this.orderPlanId}&coalStatus=${
               this.currentPageCoalStatus
            }&tmId=${this.getWeightHouseObj.tmId}`
         });
      },
      // 入场申请
      rcsqClick() {
         uni.navigateTo({
            url: `/pages/driver-page/appointment/appointment?takeCoalId=${this.orderPlanId}&type=入场申请&yyId=${this.yyId}`
            url: `/pages/driver-page/appointment/appointment?type=入场申请&takeCoalId=${this.orderPlanId}&yyId=${this.yyId}&filedId=${this.getYuYueDataParams.filedId}&deptId=${
               this.getYuYueDataParams.deptId
            }&sendDate=${this.getYuYueDataParams.sendDate}`
         });
      },
      cengZhongClick() {}
      // 呼叫客服
      callCustomerService() {
         // if (!this.serviceInfoObj.openId) {
         // this.$u.toast('无客服信息');
         // }
         wx.getSetting({
            success(res) {
               console.log('授权success', res);
               if (!res.authSetting['scope.camera'] || !res.authSetting['scope.record']) {
                  if (!res.authSetting['scope.camera']) {
                     uni.showToast({
                        title: '无相机权限'
                     });
                  } else if (!res.authSetting['scope.record']) {
                     uni.showToast({
                        title: '无麦克风权限'
                     });
                  }
               } else {
                  wx.join1v1Chat({
                     caller: { nickname: uni.getStorageSync('name'), openid: uni.getStorageSync('openid') },
                     listener: { nickname: uni.getStorageSync('customerName'), openid: uni.getStorageSync('customeropenId') }, // 这里的openid是fyy的,充当固定的客服openid
                     backgroundType: 2,
                     roomType: 'voice',
                     success() {
                        console.log('一对一成功');
                     },
                     fail(err) {
                        console.log('一对一失败', err);
                     }
                  });
               }
            },
            fail() {
               console.log('获取失败');
            }
         });
      },
      calling() {
         // wx.join1v1Chat({
         //    caller: { nickname: this.name, openid: this.openid }, //oZjXk5RRmbroAfl1m5aZ6hRNvqh4
         //    listener: { nickname: this.serviceInfoObj.openName, openid: 'orutI5YT0yEvARVngdsTmBpisWmw' }, // 这里的openid是fyy的,充当固定的客服openid
         //    backgroundType: 2,
         //    roomType: 'voice'
         // });
      },
      // 称重
      cengZhongClick() {
         this.$reqGet('getWeighHouse', this.getWeightHouseObj).then(res => {
            console.log(res, '获取磅房');
            if (res.code == 0) {
               this.weighData.sceneId = res.data.id;
               this.weighData.gateCameraId = res.data.lastEquipmentId;
               this.weighData.equipmentCode = res.data.lastEquipmentCode;
               this.weighHouseCode = res.data.code;
               uni.navigateTo({
                  url: `/pages/driver-page/driver-index/bill-of-lading-details/weighingDevice/weighingDevice?takeCoalId=${this.orderPlanId}&sceneId=${
                     res.data.id
                  }&gateCameraId=${res.data.lastEquipmentId}&gateCameraCode=${res.data.lastEquipmentCode}&weighHouseCode=${res.data.code}&getWeightHouseObj=${JSON.stringify(
                     this.getWeightHouseObj
                  )}`
               });
            } else {
               this.$u.toast('未在磅房,请前往磅房后再试!!');
            }
         });
      },
      /**
       * @desc 等待取煤单接口
       * */
       * 初始化 weoSocket
       */
      initWebSocket() {
         let wsUrl = `${webSocketUrl}?access_token=${uni.getStorageSync('token')}`;
         socket = uni.connectSocket({
            url: wsUrl,
            header: {
               CLIENT_TOC: 'Y'
            },
            complete: res => {
               console.log(res, 'socket结果');
            }
         });
         socket.onOpen(() => {
            console.log('onOpen');
         });
         // 获取服务器传来的数据,做相应处理
         socket.onMessage(res => {
            console.log('socketWeigh', res);
            let nowWeighObj = JSON.parse(res.data.slice(7));
            if (nowWeighObj.eqCode == this.weighHouseCode) {
               if (nowWeighObj.eqInfraredStatus) {
                  this.weighData.weigh = nowWeighObj.weigh;
               } else {
                  this.weighData.weigh = nowWeighObj.weigh;
               }
            }
         });
         socket.onClose(() => {
            console.log('webSocketClose');
            this.$u.toast('磅房中断');
         });
         socket.onError(err => {
            console.log('socket报错', err);
            this.$u.toast('出现错误,请重新进入该页面,重试!!');
         });
      },
      // 放空
      evacuation() {
         this.evacuationModalShow = true;
      },
      // 放空弹窗确认
      evacuationConfirm() {
         let mix = Object.assign(this.weighData, this.getWeightHouseObj);
         this.$reqPost('getOneEvacuation', mix, 'json').then(res => {
            console.log(res, '第一次放空');
            if (res.code == 0) {
               this.$u.toast('已放空');
               this.evacuationModalShow = false;
            } else {
               this.$u.toast('放空失败,请稍后重试');
               this.evacuationModalShow = false;
            }
         });
      },
      // 放空弹窗取消
      evacuationCancel() {
         this.evacuationModalShow = false;
      }
   }
};
</script>
@@ -77,30 +328,64 @@
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   .bangDanMessage {
      font-size: vww(20);
      font-weight: 500;
      border: vww(1) solid #dddddd;
      padding: vww(10);
      border: vww(2) solid #dddddd;
      border-radius: vww(20);
      margin: vww(20);
      margin-bottom: vww(10);
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 40%;
      font-size: vww(18);
      font-weight: 600;
      view {
         margin-bottom: vww(10);
      }
      view:nth-of-type(1) {
         display: flex;
         text {
            width: 50%;
            text-align: center;
         }
      }
      view:nth-of-type(2) {
         display: flex;
         text {
            width: 33%;
            text-align: center;
         }
      }
      view:nth-of-type(3) {
         display: flex;
         text {
            width: 50%;
            text-align: center;
         }
      }
      view:nth-of-type(4) {
         display: flex;
         flex-direction: column;
         text {
            margin-bottom: vww(10);
            text-align: center;
         }
      }
   }
   .timeLine {
      height: 25%;
      margin: vww(20);
      margin-top: vww(10);
      margin-bottom: vww(10);
      border: vww(1) solid #dddddd;
      border: vww(2) solid #dddddd;
      border-radius: vww(20);
      flex: 2;
      padding: vww(20);
      box-sizing: border-box;
      overflow-y: overlay; //行为与 auto 相同,但是滚动条绘制在内容之上,而不是占据空间。
      .u-text {
         margin-bottom: vww(5) !important;
      }
   }
   .utilsBox {
      padding: vww(20);
      padding: vww(10) vww(20);
      flex: 1;
      display: flex;
      flex-direction: column;