更新 订单详情

src/App.vue

@@ -77,7 +77,6 @@ export default {
   margin: 24px 0 0 24px;
   height: calc(100vh - 136px);
   overflow-y: auto;
-  background: #fff;
   overflow-x: hidden;
 }
 

src/router/index.js

@@ -8,6 +8,7 @@ import Index from "../views/index/Index.vue";
 import Login from "../views/index/Login.vue";
 import VoyageList from "../views/voyage/voyageList.vue";
 import OrderList from "../views/order/orderList.vue";
+import OrderDetail from "../views/order/orderDetail.vue";
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -35,7 +36,7 @@ const router = createRouter({
         title: "航次详情",
         code: "VOYAGEDETAIL",
       },
-      component: () => import("../views/voyage/voyageDetail.vue"),
+      component: OrderDetail,
     },
     {
       path: "/voyage/voyageList",

src/views/order/orderDetail.vue

@@ -0,0 +1,3425 @@
+<template>
+  <div class="line-container-p24">
+    <i class="el-icon-arrow-left"></i>
+    <div
+      class="dib go-back ml8 pointer"
+      @click="router.replace('/voyage/voyageList')"
+    >
+      返回订单列表
+    </div>
+  </div>
+  <div class="container-title df aic jcsb" v-auth="'VOYAGEINFO'">
+    <div class="df aic">
+      <div class="mr30">订单信息</div>
+      <el-tooltip
+        v-if="blockchainInfo"
+        class="box-item"
+        effect="light"
+        :content="blockchainInfo.hash"
+        placement="top"
+      >
+        <div class="pointer" style="font-size: 14px; font-weight: normal">
+          汇很多科技区块链认证
+        </div>
+      </el-tooltip>
+    </div>
+  </div>
+  <div class="line-container-p24 mb20">
+    <div>
+      <div class="info-line">
+        <div class="info-line-title">订单编号</div>
+        <el-input
+          class="info-line-text"
+          v-model="orderDetail.code"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+    <div class="df aic">
+      <div class="info-line">
+        <div class="info-line-title">货主</div>
+        <el-input
+          class="info-line-text"
+          v-model="orderDetail.cargoOwnerName"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+    <div class="df aic">
+      <div class="info-line">
+        <div class="info-line-title">开始时间</div>
+        <el-input
+          class="info-line-text"
+          v-model="orderDetail.startTime"
+          disabled
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">结束时间</div>
+        <el-input
+          class="info-line-text"
+          v-model="orderDetail.endTime"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+
+    <div class="df aic">
+      <div class="info-line">
+        <div class="info-line-title">货种</div>
+        <el-input
+          class="info-line-text"
+          v-model="orderDetail.cargo"
+          disabled
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">货量/吨位</div>
+        <el-input
+          class="info-line-text"
+          v-model="orderDetail.tons"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+    <div class="df aic">
+      <div class="info-line">
+        <div class="info-line-title">货量/件</div>
+        <el-input
+          class="info-line-text"
+          v-model="orderDetail.pieces"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+  </div>
+  <div class="line-container-p24" v-auth="'VOYAGEINFO'">
+    <el-button-group>
+      <el-button
+        v-for="(item, index) in orderDetail.voyages"
+        size="small"
+        :type="index == currentVoyageIndex ? 'primary' : ''"
+        @click="changeVoyage(index)"
+      >
+        {{ orderDetail.voyages[index].shipName || "待选择船舶" }}
+      </el-button>
+    </el-button-group>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">船舶名称</div>
+        <el-input
+          class="info-line-text"
+          v-model="voyage.shipName"
+          disabled
+        ></el-input>
+      </div>
+      <div
+        class="info-gap"
+        v-if="shipAudits.length"
+        @click="isCertsVisable = true"
+      >
+        汇很多认证
+      </div>
+      <el-dialog
+        @open="showCerts"
+        v-model="isCertsVisable"
+        destroy-on-close
+        width="30%"
+      >
+        <Certs ref="certs"></Certs>
+      </el-dialog>
+      <div class="info-line">
+        <div class="info-line-title">MMSI</div>
+        <el-input
+          class="info-line-text"
+          v-model="voyage.shipMmsi"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+    <div :id="mapId" class="map-container"></div>
+    <div class="line" style="margin-top: 30px">
+      <div class="info-line">
+        <div class="info-line-title">开始时间</div>
+        <el-input
+          class="info-line-text"
+          v-model="voyage.startTime"
+          disabled
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">结束时间</div>
+        <el-input
+          class="info-line-text"
+          v-model="voyage.endTime"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">装货港</div>
+        <el-input
+          class="info-line-text"
+          v-model="voyage.loadPort"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div
+        class="info-line"
+        v-for="(item, index) in voyage.voyageDetails"
+        :key="item"
+      >
+        <div class="info-line-title">{{ "第 " + (index + 1) + " 卸货港" }}</div>
+        <el-input
+          class="info-line-text"
+          v-model="item.portName"
+          disabled
+        ></el-input>
+      </div>
+      <div v-if="voyage.voyageStatus != 2">
+        <div
+          class="info-line"
+          v-if="!insertDiscPortVisable"
+          v-auth="'ADDNEWDISCPORT'"
+          style="margin-left: 140px"
+        >
+          <el-button type="primary" @click="insertDiscPortVisable = true">
+            添加提前卸货港
+          </el-button>
+        </div>
+        <div class="info-line" v-else style="margin-left: 40px">
+          <div class="info-line-title" style="width: 80px">提前卸货港</div>
+          <el-autocomplete
+            class="info-line-text mr20"
+            v-model="toInsertDiscPortValue"
+            :fetch-suggestions="getCol"
+            @blur="clear('toInsertDiscPortId')"
+            placeholder="选择卸货港"
+            @select="selectToInsertDiscProt($event)"
+            style="width: 120px !important"
+          />
+          <el-button type="primary" @click="addNewPort">确认添加</el-button>
+          <el-button type="default" @click="cancelInsertDiscPort">
+            取消添加
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">货种</div>
+        <el-input
+          class="info-line-text"
+          v-model="voyage.cargo"
+          disabled
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div style="width: 120px !important" class="info-line-title">货量</div>
+        <el-input
+          style="width: 100px !important"
+          class="info-line-text"
+          v-model="voyage.tons"
+          disabled
+        ></el-input>
+        <span class="unit">吨</span>
+        <el-input
+          style="width: 80px !important"
+          class="info-line-text"
+          v-model="voyage.pieces"
+          disabled
+        ></el-input>
+        <span class="unit">件</span>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">合理卸货天数</div>
+        <el-input
+          class="info-line-text"
+          v-model="voyage.reasonableUnloadingDays"
+          disabled
+        ></el-input>
+      </div>
+    </div>
+    <div class="container-second-title df aic jcsb mt40">
+      <div>船舶运输记录详情</div>
+      <div class="df aic">
+        <div v-auth="'VOYAGEINFOUPDATE'" v-if="voyage.voyageStatus == 1">
+          <el-button
+            class="mr20"
+            v-if="disabledStatus"
+            type="primary"
+            @click="changeVoyageInfo"
+          >
+            修改航次
+          </el-button>
+          <div v-else>
+            <div>
+              <el-button class="ml20" @click="cancelVoyageChange">
+                取消修改
+              </el-button>
+              <el-button
+                class="ml20 mr20"
+                type="primary"
+                @click="submitVoyageChange"
+              >
+                提交修改
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <el-button
+          style="width: 160px"
+          type="primary"
+          @click="downloadExcel"
+          v-auth="'DOWNLOADSHIPTRACK'"
+          :loading="isLoadingExcel"
+        >
+          下载船舶跟踪表
+        </el-button>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">到达装货港时间</div>
+        <el-date-picker
+          class="info-line-text"
+          v-model="voyage.arrivalLoadPortTime"
+          type="datetime"
+          format="YYYY/MM/DD HH:mm"
+          value-format="YYYY/MM/DD HH:mm:ss"
+          placeholder="到达装货港时间"
+          :disabled="disabledStatus"
+        ></el-date-picker>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">实装货量</div>
+        <el-input
+          style="width: 100px !important"
+          class="info-line-text"
+          v-model="voyage.actualLoadTons"
+          :disabled="disabledStatus"
+          placeholder="实装吨位"
+        ></el-input>
+        <span class="unit">吨</span>
+        <el-input
+          style="width: 80px !important"
+          class="info-line-text"
+          v-model="voyage.actualLoadPieces"
+          :disabled="disabledStatus"
+          placeholder="实装件数"
+        ></el-input>
+        <span class="unit">件</span>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">装货开始时间</div>
+        <el-date-picker
+          class="info-line-text"
+          v-model="voyage.loadStartTime"
+          type="datetime"
+          format="YYYY/MM/DD HH:mm"
+          value-format="YYYY/MM/DD HH:mm:ss"
+          placeholder="装货开始时间"
+          :disabled="disabledStatus"
+        ></el-date-picker>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">装货结束时间</div>
+        <el-date-picker
+          class="info-line-text"
+          v-model="voyage.loadEndTime"
+          type="datetime"
+          format="YYYY/MM/DD HH:mm"
+          value-format="YYYY/MM/DD HH:mm:ss"
+          placeholder="装货开始时间"
+          :disabled="disabledStatus"
+        ></el-date-picker>
+      </div>
+    </div>
+    <el-tabs v-model="currentPortId" type="border-card" class="demo-tabs mb20">
+      <el-tab-pane
+        v-for="(item, index) in voyage.voyageDetails"
+        :key="item"
+        :label="item.portName + ' # ' + (index + 1)"
+        :name="item.portId + ''"
+      >
+        <div class="line">
+          <div class="info-line">
+            <div class="info-line-title">开航时间</div>
+            <el-date-picker
+              class="info-line-text"
+              v-model="item.setSailTime"
+              type="datetime"
+              @change="calExpectedArrivalTime(item.id, index)"
+              format="YYYY/MM/DD HH:mm"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="开航时间"
+              :disabled="disabledStatus"
+            ></el-date-picker>
+          </div>
+          <div class="info-line">
+            <div class="info-line-title">预计到港时间</div>
+            <el-date-picker
+              class="info-line-text"
+              v-model="item.expectedArrivalTime"
+              type="datetime"
+              format="YYYY/MM/DD"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="预计到港时间"
+              disabled
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="line">
+          <div class="info-line">
+            <div class="info-line-title">实际到港时间</div>
+            <el-date-picker
+              class="info-line-text"
+              v-model="item.actualArrivalTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="实际到港时间"
+              :disabled="disabledStatus"
+            ></el-date-picker>
+          </div>
+          <!-- <div class="info-line">
+        <div class="info-line-title">抵达目的地港时间</div>
+        <el-date-picker
+          class="info-line-text"
+          v-model="voyage.arrivalPortTime"
+          type="datetime"
+          format="YYYY/MM/DD HH:mm:ss"
+          value-format="YYYY/MM/DD HH:mm:ss"
+          placeholder="抵达目的地港时间"
+          :disabled="disabledStatus"
+        ></el-date-picker>
+      </div> -->
+        </div>
+        <div class="line">
+          <div class="info-line">
+            <div class="info-line-title">卸货开始时间</div>
+            <el-date-picker
+              class="info-line-text"
+              v-model="item.dischargeStartTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="卸货开始时间"
+              :disabled="disabledStatus"
+            ></el-date-picker>
+          </div>
+          <div class="info-line">
+            <div class="info-line-title">卸货结束时间</div>
+            <el-date-picker
+              class="info-line-text"
+              v-model="item.dischargeEndTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="卸货结束时间"
+              :disabled="disabledStatus"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="line">
+          <div class="info-line">
+            <div class="info-line-title">实际卸货量</div>
+            <el-input
+              style="width: 100px !important"
+              class="info-line-text"
+              placeholder="实际卸货吨位"
+              v-model="item.actualDischargeTons"
+              :disabled="disabledStatus"
+            ></el-input>
+            <span class="unit">吨</span>
+            <el-input
+              style="width: 80px !important"
+              class="info-line-text"
+              placeholder="实际卸货件数"
+              v-model="item.actualDischargePieces"
+              :disabled="disabledStatus"
+            ></el-input>
+            <span class="unit">件</span>
+          </div>
+          <!-- <div class="info-line">
+        <div class="info-line-title">是否购买保险</div>
+        <el-checkbox
+          v-model="voyage.hasInsurance"
+          :checked="voyage.hasInsurance == 1"
+          :disabled="disabledStatus"
+          label="购买保险"
+        ></el-checkbox>
+      </div> -->
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">备注</div>
+        <el-input
+          class="info-line-textarea"
+          v-model="voyage.remark"
+          autosize
+          type="textarea"
+          :disabled="disabledStatus"
+        ></el-input>
+      </div>
+    </div>
+  </div>
+  <div class="container-title" v-auth="'DISCHARGEINFO'">卸货信息</div>
+  <div class="line-container-p24" v-auth="'DISCHARGEINFO'">
+    <el-tabs
+      v-model="currentDiscPortId"
+      type="card"
+      class="demo-tabs"
+      @tab-click="changeDiscPortTab"
+    >
+      <el-tab-pane
+        v-for="(item, index) in voyage.voyageDetails"
+        :key="item"
+        :label="item.portName + ' # ' + (index + 1)"
+        :name="item.portId + ''"
+      ></el-tab-pane>
+    </el-tabs>
+    <div v-auth="'WEATHERRECORD'">
+      <div class="container-second-title df aic jcsb" v-auth="'WEATHERRECORD'">
+        <div>天气信息</div>
+      </div>
+      <el-table
+        style="width: 1200px"
+        :data="weatherTableData"
+        stripe
+        v-auth="'WEATHERRECORD'"
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="weather"
+          label="天气"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="temperature"
+          label="温度"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="winddirection"
+          label="风向"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="windpower"
+          label="风力"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="reporttime"
+          label="记录时间"
+          min-width="100"
+          align="center"
+        >
+          <template v-slot="scope">
+            {{ subTimeStr(scope.row.reporttime, 16) }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div
+        style="width: 1200px; text-align: right; margin-top: 43px"
+        v-auth="'WEATHERRECORD'"
+      >
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="weatherTotal"
+          @current-change="weatherPageChange"
+        ></el-pagination>
+      </div>
+      <div class="hr mt20"></div>
+    </div>
+    <div v-auth="'LABDETAIL_DISABLE'">
+      <div class="container-second-title df aic jcsb mt40">
+        <div>提单信息</div>
+        <div>
+          <el-button v-auth="'LABADD'" type="primary" @click="showAddLab()">
+            新增提单记录
+          </el-button>
+        </div>
+      </div>
+      <el-table :data="labTableData" stripe style="width: 90%">
+        <!-- <el-table-column
+          type="index"
+          label="序号"
+          min-width="120"
+          align="center"
+        ></el-table-column> -->
+        <el-table-column
+          prop="labNumber"
+          label="提货单编号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="billingDate"
+          label="开单日期"
+          min-width="120"
+          align="center"
+        >
+          <template v-slot="scope">
+            {{ subTimeStr(scope.row.billingDate, 10) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="cargo"
+          label="产品名称"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="carrier"
+          label="承运人"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="sentPieces"
+          label="应发件数"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="sentTons"
+          label="应发数量"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="actualPieces"
+          label="实发件数"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="actualTons"
+          label="实发数量"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="pickUpShip"
+          label="提货船舶"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="pickUpCompany"
+          label="提货单位"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="sapNo"
+          label="SAP号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="salesman"
+          label="业务员"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="单据" align="center">
+          <template v-slot="scope">
+            <el-button
+              @click="showLab(scope.row, scope.$index, '查看提单')"
+              type="primary"
+              size="small"
+            >
+              {{ scope.row.file ? "查看" : "上传" }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template v-slot="scope">
+            <!-- <el-button
+              v-auth="'LABUPDATE'"
+              @click="showLab(scope.row, scope.$index, '修改提单')"
+              type="primary"
+              size="small"
+            >
+              修改
+            </el-button> -->
+            <el-button
+              v-auth="'LABDELETE'"
+              @click="deleteLab(scope.row.id, scope.$index)"
+              type="danger"
+              size="small"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="text-align: right; margin-top: 43px; width: 1200px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="labTotal"
+          @current-change="labPageChange"
+        ></el-pagination>
+      </div>
+      <el-dialog
+        v-model="isAddLabVisable"
+        :title="labModalType"
+        width="780px"
+        center
+        @close="cancelUploadLab"
+        destroy-on-close
+      >
+        <el-form
+          :model="labForm"
+          inline
+          style="margin-bottom: 20px"
+          label-width="100px"
+        >
+          <!-- <el-form-item label="开单日期">
+            <el-date-picker
+              class="info-line-text"
+              v-model="labForm.billingDate"
+              type="date"
+              format="YYYY/MM/DD"
+              value-format="YYYY/MM/DD"
+              placeholder="开单日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="开单数量">
+            <el-input
+              style="width: 240px"
+              v-model="labForm.billingNum"
+              placeholder="开单数量"
+            ></el-input>
+          </el-form-item> -->
+          <el-form-item label="提单">
+            <Uploader
+              :actionUrl="store.state.wayBillUrl"
+              :uploaderId="'labLoad'"
+              :params="labParams"
+              @onSendFileList="getLabBillList"
+              :fileList="labBillList"
+              uploadText="上传提单"
+              :disabled="labModalType == '查看提单'"
+              :limit="1"
+            ></Uploader>
+          </el-form-item>
+        </el-form>
+
+        <template
+          #footer
+          v-if="labModalType != '查看提单' && labBillList.length"
+        >
+          <el-button @click="cancelUploadLab">取消</el-button>
+          <el-button
+            :loading="isLabLoading"
+            style="margin-left: 30px"
+            type="primary"
+            @click="addLab"
+          >
+            {{ isLabLoading ? "正在上传" : "提交" }}
+          </el-button>
+        </template>
+      </el-dialog>
+      <div class="hr mt20"></div>
+    </div>
+    <div v-auth="'SHIPDISCHARGE'">
+      <div class="container-second-title df aic jcsb">
+        <div>卸货记录</div>
+        <div>
+          <el-button
+            v-auth="'SHIPDISCHARGEADD'"
+            class="mr20"
+            type="primary"
+            @click="showAddPoundModal"
+          >
+            新增卸货记录
+          </el-button>
+          <el-button
+            v-auth="'DOWNLOADDISCHARGE'"
+            @click="exportDischargeExcel"
+            style="width: 160px"
+            type="primary"
+            :loading="isDischargeLoadingExcel"
+          >
+            下载卸货信息
+          </el-button>
+        </div>
+      </div>
+      <el-table
+        style="width: 1200px"
+        :data="dischargeList"
+        stripe
+        :disabled="disabledStatus"
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="dischargeTime"
+          label="卸货时间"
+          min-width="120"
+          align="center"
+        >
+          <template v-slot="scope">
+            {{ subTimeStr(scope.row.dischargeTime, 16) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="dischargeTons"
+          label="卸货吨位"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="dischargePieces"
+          label="卸货件数"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="磅单" min-width="150" align="center">
+          <template v-slot="scope">
+            <el-button
+              @click="showUpdateDischarge(scope.row, scope.$index, '查看记录')"
+              type="primary"
+              size="small"
+            >
+              {{ scope.row.files ? "查看" : "上传" }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="150" align="center">
+          <template v-slot="scope">
+            <el-button
+              v-auth="'SHIPDISCHARGEUPDATE'"
+              @click="showUpdateDischarge(scope.row, scope.$index, '修改记录')"
+              type="primary"
+              size="small"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-auth="'SHIPDISCHARGEDELETE'"
+              @click="deleteDischarge(scope.row.id, scope.$index)"
+              type="danger"
+              size="small"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="width: 1200px; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+      <div class="hr m30-0"></div>
+    </div>
+    <el-dialog
+      title="新增卸货记录"
+      v-model="isAddPoundVisable"
+      destroy-on-close
+    >
+      <el-form :model="formInline">
+        <el-form-item label="卸货时间">
+          <el-date-picker
+            class="info-line-text"
+            v-model="formInline.dischargeTime"
+            type="datetime"
+            format="YYYY/MM/DD HH:mm:ss"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            placeholder="卸货时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="卸货吨位">
+          <el-input
+            class="info-line-text"
+            v-model="formInline.dischargeTons"
+            placeholder="卸货吨位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="卸货件数">
+          <el-input
+            class="info-line-text"
+            v-model="formInline.dischargePieces"
+            placeholder="卸货件数"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="卸货记录">
+          <Uploader
+            :actionUrl="store.state.wayBillUrl"
+            :uploaderId="'pound'"
+            :params="poundParams"
+            @onSendFileList="getPoundBillList"
+            :fileList="poundBillList"
+            uploadText="拖拽或点击上传磅单"
+          ></Uploader>
+        </el-form-item>
+      </el-form>
+      <div class="df aic jcfe mb30">
+        <el-button type="primary" @click="addDischarge">新增</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      v-model="updateDischargeDialog"
+      :title="dischargeDialogTitle"
+      width="700px"
+      center
+      destroy-on-close
+    >
+      <el-form :model="updateForm" style="margin-bottom: 20px">
+        <!-- <el-form-item label="记录ID">
+            <span style="padding-left: 20px">{{ updateForm.id }}</span>
+          </el-form-item> -->
+        <el-form-item label="卸货时间">
+          <el-date-picker
+            class="info-line-text"
+            v-model="updateForm.dischargeTime"
+            type="datetime"
+            format="YYYY/MM/DD HH:mm:ss"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            placeholder="卸货时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="卸货吨位">
+          <el-input
+            style="width: 240px"
+            v-model="updateForm.dischargeTons"
+            placeholder="卸货吨位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="上传磅单">
+          <Uploader
+            :actionUrl="store.state.wayBillUrl"
+            :uploaderId="'updatePound'"
+            :params="updatePoundParams"
+            @onSendFileList="getupdatePoundBillList"
+            :fileList="updatePoundBillList"
+            uploadText="拖拽或点击上传磅单"
+            :disabled="dischargeDialogTitle == '查看记录'"
+          ></Uploader>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button
+          v-if="dischargeDialogTitle == '修改记录'"
+          @click="cancelUpdateDischarge"
+        >
+          取消
+        </el-button>
+        <el-button
+          style="margin-left: 30px"
+          type="primary"
+          @click="updateDischarge"
+          v-if="dischargeDialogTitle == '修改记录'"
+        >
+          提交
+        </el-button>
+      </template>
+    </el-dialog>
+    <el-dialog
+      v-model="dialogVisible"
+      title="图片预览"
+      width="30%"
+      destroy-on-close
+    >
+      <el-image
+        :src="dialogImageUrl"
+        style="height: 100%; width: 100%"
+      ></el-image>
+    </el-dialog>
+    <div v-auth="'CARLOAD'">
+      <div class="container-second-title df aic jcsb mt40">
+        <div>汽车装货记录详情</div>
+        <div>
+          <el-button
+            v-auth="'CARLOADADD'"
+            type="primary"
+            @click="showAddTruckRecord()"
+          >
+            新增汽车装货记录
+          </el-button>
+        </div>
+      </div>
+      <el-table :data="truckTableData" stripe>
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="portName"
+          label="港口名称"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="weighTime"
+          label="称重时间"
+          min-width="120"
+          align="center"
+        >
+          <template v-slot="scope">
+            {{ subTimeStr(scope.row.weighTime, 16) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="carNum"
+          label="车号"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="cargoName"
+          label="货物名称"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="shippingUnit"
+          label="发货单位"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="receivingUnit"
+          label="收货单位"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="grossWeight"
+          label="毛重"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="tare"
+          label="皮重"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="netWeight"
+          label="净重"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="shipName"
+          label="货船名称"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="weigher"
+          label="司磅员"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="单据" min-width="150" align="center">
+          <template v-slot="scope">
+            <el-button
+              @click="showTruckRecord(scope.row, scope.$index, '查看单据')"
+              type="primary"
+              size="small"
+            >
+              {{ scope.row.file ? "查看" : "上传" }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="150" align="center">
+          <template v-slot="scope">
+            <el-button
+              v-auth="'CARLOADUPDATE'"
+              @click="showTruckRecord(scope.row, scope.$index, '修改单据')"
+              type="primary"
+              size="small"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-auth="'CARLOADDELETE'"
+              @click="deleteTruckRecord(scope.row.id, scope.$index)"
+              type="danger"
+              size="small"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="truckTotal"
+          @current-change="truckPageChange"
+        ></el-pagination>
+      </div>
+      <div class="hr mt20"></div>
+    </div>
+    <div class="df aic jcfe mt20" v-if="voyage.voyageStatus == 1">
+      <el-button
+        v-auth="'CANCELVOYAGE'"
+        type="primary"
+        class="mr20"
+        @click="cancelVoyage"
+      >
+        取消航次
+      </el-button>
+      <el-button
+        v-if="voyage.canComplete && disabledStatus"
+        type="primary"
+        v-auth="'FINISHVOYAGE'"
+        @click="finishVoyage"
+      >
+        完成航次
+      </el-button>
+    </div>
+    <el-dialog
+      v-model="isAddTruckRecordVisable"
+      :title="truckRecordModalType"
+      width="780px"
+      center
+      @close="cancelUploadTruckRecord"
+      destroy-on-close
+    >
+      <el-form
+        :model="truckRecordForm"
+        inline
+        style="margin-bottom: 20px"
+        label-width="100px"
+      >
+        <el-form-item label="港口名称">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.portName"
+            placeholder="港口名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="称重时间">
+          <el-date-picker
+            class="info-line-text"
+            v-model="truckRecordForm.weighTime"
+            type="datetime"
+            format="YYYY/MM/DD HH:mm:ss"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            placeholder="称重时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="车号">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.carNum"
+            placeholder="车号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="货物名称">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.cargoName"
+            placeholder="货物名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="发货单位">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.shippingUnit"
+            placeholder="发货单位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="毛重">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.grossWeight"
+            placeholder="毛重"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="收货单位">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.receivingUnit"
+            placeholder="收货单位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="皮重">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.tare"
+            placeholder="皮重"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="运输单位">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.transUnit"
+            placeholder="运输单位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="净重">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.netWeight"
+            placeholder="净重"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="货船名称">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.shipName"
+            placeholder="货船名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="司磅员">
+          <el-input
+            style="width: 240px"
+            v-model="truckRecordForm.weigher"
+            placeholder="司磅员"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="汽车装货单">
+          <Uploader
+            :actionUrl="store.state.wayBillUrl"
+            :uploaderId="'truckLoad'"
+            :params="truckLoadParams"
+            @onSendFileList="getTruckLoadBillList"
+            :fileList="truckRecordBillList"
+            uploadText="上传装货单"
+            :disabled="truckRecordModalType == '查看单据'"
+            :limit="1"
+          ></Uploader>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button
+          v-if="truckRecordModalType != '查看单据'"
+          @click="cancelUploadTruckRecord"
+        >
+          取消
+        </el-button>
+        <el-button
+          v-if="truckRecordModalType != '查看单据'"
+          style="margin-left: 30px"
+          type="primary"
+          @click="addTruckLoadRecord"
+        >
+          提交
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+
+  <div class="container-title" v-auth="'BILLINFO'">单据信息</div>
+  <div class="line-container-p24" v-auth="'BILLINFO'">
+    <div class="line" v-auth="'POLICY'">
+      <div class="info-line">
+        <div class="info-line-title">保险单</div>
+        <el-upload
+          drag
+          multiple
+          :action="store.state.wayBillUrl"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemovePolicy"
+          :data="policyParams"
+          :on-success="policyUploadSuccess"
+          :file-list="policyFileList"
+          :disabled="isAuthDisabled('POLICYADD')"
+        >
+          <div class="upload-plus-icon">+</div>
+          <div class="upload-text">拖拽或点击上传</div>
+        </el-upload>
+      </div>
+    </div>
+    <div v-if="voyage.hasInsurance == 1">
+      <div class="hr mb20"></div>
+      <div class="df aic jcsb">
+        <div style="color: #0094fe">出险记录</div>
+        <!-- <el-button
+          type="primary"
+          @click="
+            (isAccidentVisable = true) && (accidentTitle = '新增出险记录')
+          "
+        >
+          新增出险记录
+        </el-button> -->
+      </div>
+      <el-table :data="accidentList" style="width: 800px">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="accidentTime"
+          label="出险时间"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="accidentTime"
+          label="操作"
+          min-width="100"
+          align="center"
+        >
+          <template v-slot="scope">
+            <el-button
+              type="primary"
+              size="small"
+              @click="checkAccident(scope.row, true)"
+            >
+              查看
+            </el-button>
+            <el-button
+              type="info"
+              size="small"
+              @click="checkAccident(scope.row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              @click="deleteAccident(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="df jcfe">
+        <el-pagination
+          class="mt20"
+          background
+          layout="prev, pager, next"
+          :total="accidentTotal"
+          :current-page="accidentCurrentPage"
+          @current-change="accidentPageChange"
+        ></el-pagination>
+      </div>
+      <el-dialog
+        :title="accidentTitle"
+        v-model="isAccidentVisable"
+        @close="resetAccidentForm"
+        destroy-on-close
+      >
+        <el-form :model="accidentForm" label-width="100px">
+          <el-form-item label="出险时间">
+            <el-date-picker
+              class="info-line-text"
+              v-model="accidentForm.accidentTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm:ss"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="出险时间"
+              :disabled="isAccidentCheck"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input
+              class="info-line-text"
+              v-model="accidentForm.remark"
+              placeholder="备注"
+              :disabled="isAccidentCheck"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="出险材料">
+            <div class="df">
+              <div
+                v-for="item in accidentForm.files"
+                v-bind:key="item.id"
+                style="position: relative"
+              >
+                <img
+                  v-if="item.mediaType == 1"
+                  style="
+                    height: 148px;
+                    width: 148px;
+                    object-fit: contain;
+                    margin-right: 10px;
+                  "
+                  @click="openMediaModal(item.viewUrl, 1, '图片查看')"
+                  :src="item.viewUrl"
+                  alt=""
+                />
+                <div v-else>
+                  <div style="height: 148px; width: 148px; margin-right: 10px">
+                    <video
+                      style="height: 100%; width: 100%"
+                      @click="openMediaModal(item.viewUrl, 2, '视频查看')"
+                      :src="item.viewUrl"
+                    ></video>
+                  </div>
+                </div>
+                <img
+                  v-if="item.mediaType == 2"
+                  @click="openMediaModal(item.viewUrl, 2, '视频查看')"
+                  src="../../assets/icon-player.png"
+                  style="
+                    object-fit: contain;
+                    width: 40px;
+                    height: 40px;
+                    position: absolute;
+                    z-index: 100;
+                    left: 50px;
+                    top: 50px;
+                    background: #fff;
+                    border-radius: 50%;
+                  "
+                  alt=""
+                />
+              </div>
+              <el-upload
+                drag
+                multiple
+                :action="store.state.accidentUrl"
+                list-type="picture-card"
+                :data="accidentParams"
+                :on-success="accidentUploadSuccess"
+                :show-file-list="false"
+                :file-list="accidentList"
+                :before-upload="accidentBeforeUpload"
+                v-if="!isAccidentCheck"
+              >
+                <div class="upload-plus-icon">+</div>
+                <div class="upload-text">拖拽或点击上传</div>
+              </el-upload>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div class="df aic jcfe mb30" v-if="!isAccidentCheck">
+          <el-button
+            type="primary"
+            v-if="accidentForm.id"
+            @click="addUpdateAccident"
+          >
+            修改
+          </el-button>
+          <el-button type="primary" v-else @click="addUpdateAccident">
+            新增
+          </el-button>
+        </div>
+      </el-dialog>
+      <div class="hr mt20 mb20"></div>
+    </div>
+    <div class="line" v-auth="'WAYBILL'">
+      <div class="info-line">
+        <div class="info-line-title">运单</div>
+        <el-upload
+          drag
+          multiple
+          :action="store.state.wayBillUrl"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemoveBill"
+          :data="billParams"
+          :on-success="billUploadSuccess"
+          :file-list="voyageBill"
+          :disabled="isAuthDisabled('WAYBILLADD')"
+        >
+          <div class="upload-plus-icon">+</div>
+          <div class="upload-text">拖拽或点击上传</div>
+        </el-upload>
+      </div>
+    </div>
+  </div>
+  <!-- <div class="container-title">运单列表</div>
+  <div class="line-container-p24">
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">上传航次运单</div>
+        <el-upload
+          drag
+          multiple
+          :action="store.state.wayBillUrl"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemoveBill"
+          :data="billParams"
+          :on-success="billUploadSuccess"
+          :file-list="voyageBill"
+        >
+          <div class="upload-plus-icon">+</div>
+          <div class="upload-text">拖拽或点击上传</div>
+        </el-upload>
+      </div>
+    </div>
+  </div> -->
+  <!-- <div class="container-title">磅单列表</div>
+  <div class="line-container-p24">
+    <div class="line" style="margin-bottom: 60px">
+      <div class="info-line">
+        <div class="info-line-title">上传磅单</div>
+        <el-upload
+          drag
+          multiple
+          :action="store.state.wayBillUrl"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemovePoundBill"
+          :data="poundParams"
+          :on-success="poundBillUploadSuccess"
+          :file-list="poundBill"
+        >
+          <div class="upload-plus-icon">+</div>
+          <div class="upload-text">拖拽或点击上传</div>
+        </el-upload>
+      </div>
+    </div>
+  </div> -->
+  <!-- <div class="container-title">船舶证书</div>
+  <div class="line-container-p24">
+    <Certs ref="certs"></Certs>
+  </div> -->
+  <div class="container-title df aic jcsb" v-auth="'BILLDISTRIBUTE'">
+    <div @click="getVoyageDetail()">单据图片分配</div>
+    <div>
+      <el-checkbox
+        v-model="isCheckAll"
+        @change="checkAll"
+        :indeterminate="isIndeterminate"
+        size="large"
+        style="margin-right: 20px"
+      >
+        全选
+      </el-checkbox>
+      <el-button
+        style="width: 220px; margin-right: 20px"
+        type="primary"
+        v-auth="'DOBILLDISTRIBUTE'"
+        @click="showDistributeModal"
+      >
+        分配单据
+      </el-button>
+    </div>
+  </div>
+  <div class="line-container-p24" v-auth="'BILLDISTRIBUTE'">
+    <div v-show="shipownerUploadFiles?.length" class="df aic fww">
+      <div
+        style="
+          width: 100px;
+          text-align: center;
+          margin-right: 20px;
+          margin-bottom: 20px;
+        "
+        v-for="item in shipownerUploadFiles"
+        :key="item"
+      >
+        <el-image
+          style="height: 100px; width: 100px"
+          fit="contain"
+          :src="item.viewUrl"
+          :preview-src-list="previewList"
+        ></el-image>
+        <div style="width: 100px; text-align: center; font-size: 12px">
+          {{ item.createTime }}
+        </div>
+        <div class="tac">
+          <el-checkbox
+            @change="checkItem"
+            v-model="item.checked"
+            size="large"
+          ></el-checkbox>
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="!shipownerUploadFiles?.length"
+      style="text-align: center; font-size: 24px; color: #ccc"
+    >
+      暂无单据图片
+    </div>
+  </div>
+  <el-dialog
+    title="单据分配"
+    v-model="isDistributeModalVisable"
+    @closed="distributeModalClose"
+    destroy-on-close
+    width="80%"
+  >
+    <h4 class="mb10">请选择卸货港:</h4>
+    <div class="df aic distribute-group">
+      <el-button
+        v-for="item in voyage.voyageDetails"
+        :key="item"
+        class="mr20"
+        :type="distributePortId == item.portId ? 'primary' : ''"
+        @click="distributePortId = item.portId"
+      >
+        {{ item.portName }}
+      </el-button>
+    </div>
+    <div class="hr m10-0"></div>
+    <h4 class="mb10">请选择单据类型:</h4>
+    <div class="df aic distribute-group">
+      <el-button
+        class="mr20"
+        :type="distributeType == 1 ? 'primary' : ''"
+        @click="distributeType = 1"
+      >
+        运单
+      </el-button>
+      <el-button
+        class="mr20"
+        :type="distributeType == 2 ? 'primary' : ''"
+        @click="distributeType = 2"
+      >
+        磅单
+      </el-button>
+      <el-button
+        :type="distributeType == 4 ? 'primary' : ''"
+        @click="distributeType = 4"
+      >
+        汽运装货单
+      </el-button>
+      <!-- <el-radio v-model="distributeType" label="1" size="large">运单</el-radio>
+      <el-radio v-model="distributeType" label="2" size="large">磅单</el-radio>
+      <el-radio v-model="distributeType" label="4" size="large"
+        >汽运装货单</el-radio
+      > -->
+    </div>
+    <div class="hr m10-0"></div>
+    <div class="df aic fww" style="max-height: 300px; overflow: scroll">
+      <div
+        style="
+          width: 100px;
+          text-align: center;
+          margin-right: 20px;
+          margin-bottom: 10px;
+          border: 2px solid #7598b1;
+        "
+        v-for="item in checkedImages"
+        :key="item"
+      >
+        <el-image
+          style="height: 100px; width: 100px"
+          fit="contain"
+          :src="item.viewUrl"
+          :preview-src-list="checkedPreviewList"
+        ></el-image>
+      </div>
+    </div>
+    <div class="hr m10-0"></div>
+    <div v-show="distributeType == 2">
+      <el-form inline :model="distributePoundForm">
+        <el-form-item label="卸货时间">
+          <el-date-picker
+            class="info-line-text"
+            v-model="distributePoundForm.dischargeTime"
+            type="datetime"
+            format="YYYY/MM/DD HH:mm:ss"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            placeholder="卸货时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="卸货吨位">
+          <el-input
+            class="info-line-text"
+            v-model="distributePoundForm.dischargeTons"
+            placeholder="卸货吨位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="卸货件数">
+          <el-input
+            class="info-line-text"
+            v-model="distributePoundForm.dischargePieces"
+            placeholder="卸货件数"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div v-show="distributeType == 4">
+      <div class="tar">
+        <el-button @click="ocr" :loading="ocrLoading" type="primary">
+          {{ ocrLoading ? "正在识别" : "开始识别" }}
+        </el-button>
+      </div>
+      <el-table :data="ocrTruckRecordTableData" stripe max-height="500">
+        <el-table-column label="港口名称" min-width="200" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.portName"></el-input>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="称重时间" min-width="200" align="center">
+          <template v-slot="scope">
+            <el-date-picker
+              size="small"
+              class="info-line-text"
+              v-model="scope.row.weighTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm:ss"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="称重时间"
+            ></el-date-picker>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="称重时间" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input
+              :input-style="
+                scope.row.weighTime ? {} : { border: '1px solid red' }
+              "
+              size="small"
+              v-model="scope.row.weighTime"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="车号" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input
+              :input-style="
+                scope.row.carNum?.length == 7 ? {} : { border: '1px solid red' }
+              "
+              size="small"
+              v-model="scope.row.carNum"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="货物名称" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.cargoName"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="发货单位" min-width="200" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.shippingUnit"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="收货单位" min-width="200" align="center">
+          <template v-slot="scope">
+            <el-input
+              :input-style="
+                scope.row.receivingUnit ? {} : { border: '1px solid red' }
+              "
+              size="small"
+              v-model="scope.row.receivingUnit"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="毛重" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input
+              :input-style="
+                scope.row.grossWeight ? {} : { border: '1px solid red' }
+              "
+              size="small"
+              v-model="scope.row.grossWeight"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="皮重" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input
+              :input-style="scope.row.tare ? {} : { border: '1px solid red' }"
+              size="small"
+              v-model="scope.row.tare"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="净重" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input
+              :input-style="
+                scope.row.netWeight ? {} : { border: '1px solid red' }
+              "
+              size="small"
+              v-model="scope.row.netWeight"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="货船名称" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.shipName"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="司磅员" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.weigher"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="查看" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-image
+              style="height: 40px; width: 60px"
+              fit="contain"
+              :src="scope.row.viewUrl"
+              :preview-src-list="ocrImageList"
+            ></el-image>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="操作" min-width="120" align="center">
+          <template v-slot="scope">
+            <el-button
+              size="small"
+              @click="deleteOcrRecord(scope.$index)"
+              type="danger"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column> -->
+      </el-table>
+    </div>
+    <div class="hr m10-0"></div>
+    <div class="tar">
+      <el-button @click="submitDistribute" type="primary">确定</el-button>
+    </div>
+  </el-dialog>
+  <div class="container-title" v-auth="'VOYAGEIMAGE'">航次图片</div>
+  <div class="line-container-p24" v-auth="'VOYAGEIMAGE'">
+    <div v-if="medias.length" class="medias-content df ffw">
+      <div class="pic-container">
+        <div v-for="(item, index) in medias" :key="item" class="pic-main">
+          <div
+            :class="[
+              'box',
+              index % 2 == 0 ? '' : 'bottom-box',
+              item.status == 1 ? 'now-box' : '',
+            ]"
+          >
+            <div class="card-note">
+              {{ item.shipName }} 拍摄于
+              <br />
+              {{ item.createTime }}
+              <br />
+              天气 : {{ item.weather?.weather }} - 气温 :
+              {{ item.weather?.temperature }}℃
+            </div>
+            <div class="medias-box mb10" style="position: relative">
+              <el-image
+                v-if="item.mediaType == 1"
+                style="width: 100%; height: 100%"
+                fit="contain"
+                :src="item.downloadUrl"
+                @click="openMediaModal(item.downloadUrl, 1, '图片审核')"
+              ></el-image>
+              <video
+                style="width: 100%; height: 100%"
+                v-else
+                :src="item.downloadUrl"
+              ></video>
+              <img
+                @click="openMediaModal(item.downloadUrl, 2, '视频审核')"
+                v-if="item.mediaType == 2"
+                src="../../assets/icon-player.png"
+                style="
+                  object-fit: contain;
+                  width: 40px;
+                  height: 40px;
+                  position: absolute;
+                  top: calc(50% - 20px);
+                  left: calc(50% - 20px);
+                  background: #fff;
+                  border-radius: 50%;
+                "
+                alt=""
+              />
+            </div>
+            <div
+              class="checkbox-group df aic jcsa mb10"
+              v-auth="'VOYAGEIMAGEAUDIT'"
+            >
+              <el-checkbox
+                @change="auditMedia(item.id, 1, index, item.mediaType)"
+                :model-value="item.audit == 1"
+                label="通过"
+              ></el-checkbox>
+              <el-checkbox
+                @change="auditMedia(item.id, 2, index, item.mediaType)"
+                :model-value="item.audit == 2"
+                label="未通过"
+              ></el-checkbox>
+            </div>
+            <div class="checkbox-group df aic jcsa" v-auth="'VOYAGEIMAGEAUDIT'">
+              <el-checkbox
+                @change="markMedia(item.id, 1, index, item.mediaType)"
+                :model-value="item.type == 1"
+                label="验仓"
+              ></el-checkbox>
+              <el-checkbox
+                @change="markMedia(item.id, 2, index, item.mediaType)"
+                :model-value="item.type == 2"
+                label="清仓"
+              ></el-checkbox>
+            </div>
+          </div>
+          <div
+            :class="[
+              's-line',
+              index % 2 == 0 ? '' : 'top210px',
+              item.status == 1 ? 'now-s-line' : '',
+            ]"
+          ></div>
+          <div :class="['point', item.status == 1 ? '' : 'now-point']"></div>
+          <div
+            :class="['l-line', item.status == 1 ? 'now-l-line' : '']"
+            v-if="index + 1 != medias.length"
+          ></div>
+        </div>
+        <el-dialog v-model="mediaModal" :title="modalTitle" destroy-on-close>
+          <el-image
+            v-if="modalType == 1"
+            style="height: 60vh; display: flex"
+            fit="contain"
+            :src="currentUrl"
+            :preview-src-list="modalPreview"
+          ></el-image>
+          <video
+            v-else
+            autoplay
+            controls
+            style="width: 100%; height: 60vh"
+            :src="currentUrl"
+          ></video>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import api from "../../apis/fetch";
+import { useRoute } from "vue-router";
+import _ from "lodash";
+import router from "../../router";
+import store from "../../store";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import downloadBlobFile from "../../utils/downloadBlobFile";
+import url from "../../apis/config";
+import { subTimeStr } from "utils/utils";
+import * as dayjs from "dayjs";
+import isAuthDisabled from "../../auth/isAuthDisabled";
+
+const route = useRoute();
+let map = ref({});
+let voyage = ref({});
+let medias = ref([]);
+let coordinates = ref([]);
+let previewSrcList = ref([]);
+let shipAudits = ref([]);
+let shipownerUploadFiles = ref([]);
+let voyageId = ref("");
+
+async function getVoyageDetail(isInit) {
+  previewList.value = [];
+  policyFileList.value = [];
+  voyageBill.value = [];
+  previewSrcList.value = [];
+  shipownerUploadFiles.value = [];
+  let res = await api.getVoyageDetail({
+    type: localStorage.userType,
+    voyageId: voyageId.value,
+  });
+  console.log(res.data.result);
+  if (res.data.status == 0) {
+    ElNotification({
+      type: "success",
+      title: res.data.msg,
+    });
+    blockchainInfo.value = res.data.result.blockChain;
+    coordinates.value = res.data.result.coordinates;
+    voyage.value = res.data.result.voyage;
+    voyage.value.startTime = voyage.value.startTime.substring(0, 16);
+    currentPortId.value = voyage.value.voyageDetails[0].portId + "";
+    currentDiscPortId.value = voyage.value.voyageDetails[0].portId + "";
+    medias.value = res.data.result.medias;
+    shipAudits.value = res.data.result.shipAudits;
+    shipownerUploadFiles.value = res.data.result?.shipownerUploadFiles;
+    for (let i of shipownerUploadFiles.value || []) {
+      previewList.value.push(i.viewUrl);
+    }
+    for (let i of res.data.result.policys || []) {
+      policyFileList.value.push({
+        ...i,
+        url: i.viewUrl,
+      });
+    }
+    for (let i of res.data.result.waybills) {
+      voyageBill.value.push({
+        ...i,
+        url: i.viewUrl,
+      });
+    }
+    for (let i of medias.value) {
+      previewSrcList.value.push(i.downloadUrl);
+    }
+    if (isInit) {
+      getDischargeList();
+      getTruckLoadRecord();
+      getLabList();
+      getPortWeatherList();
+      getAccidentList();
+      try {
+        initMap();
+      } catch (error) {}
+    }
+  } else {
+    console.log(res);
+    ElNotification({
+      type: "error",
+      title: res.data.msg,
+    });
+  }
+}
+let total = ref(0);
+function pageChange(e) {
+  dischargeCurrentPage.value = e;
+  getDischargeList();
+}
+async function addDischarge() {
+  if (!formInline.value.dischargeTime || !formInline.value.dischargeTons)
+    return;
+  let arr = [];
+
+  if (poundBillList.value.length) {
+    for (let i of poundBillList.value) {
+      arr.push(i.response.result.id);
+    }
+  }
+  let res = await api.addDischarge({
+    ...formInline.value,
+    voyageFileIds: arr.join(","),
+    voyageId: voyageId.value,
+    portId: currentDiscPortId.value,
+  });
+  if (res.data.status == 0) {
+    getDischargeList(1);
+    poundBillList.value = [];
+    formInline.value = {
+      dischargeTons: 0,
+      dischargePieces: 0,
+    };
+  } else {
+    console.log(res);
+  }
+  isAddPoundVisable.value = false;
+}
+async function deleteDischarge(id, index) {
+  let res = await api.deleteDischarge({
+    id,
+  });
+  if (res.data.status == 0) {
+    dischargeList.value.splice(index, 1);
+    ElNotification({
+      type: "success",
+      title: res.data.msg,
+    });
+  } else {
+    console.log(res);
+    ElNotification({
+      type: "error",
+      title: res.data.msg,
+    });
+  }
+}
+async function exportExcel() {}
+let dischargeCurrentPage = ref(1);
+let dischargeList = ref([]);
+let formInline = ref({
+  dischargeTons: 0,
+  dischargePieces: 0,
+});
+async function getDischargeList() {
+  let res = await api.getDischargeList({
+    voyageId: voyageId.value,
+    portId: currentDiscPortId.value,
+    currentPage: dischargeCurrentPage.value,
+    size: 10,
+  });
+  if (res.data.status == 0) {
+    dischargeList.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    console.log(res);
+  }
+}
+let updateForm = ref({});
+let updateDischargeDialog = ref(false);
+async function updateDischarge() {
+  let postData = {
+    ...updateForm.value,
+  };
+  let arr = [];
+  if (updatePoundBillList.value.length) {
+    for (let i of updatePoundBillList.value) {
+      arr.push(i.id || i.response.result.id);
+    }
+    postData.voyageFileIds = arr.join(",");
+  } else {
+    postData.voyageFileIds = "";
+  }
+  let res = await api.updateDischarge({
+    ...postData,
+  });
+  if (res.data.status == 0) {
+    getDischargeList();
+    cancelUpdateDischarge();
+    ElNotification({
+      type: "success",
+      title: res.data.msg,
+    });
+  } else {
+    console.log(res);
+    ElNotification({
+      type: "error",
+      title: res.data.msg,
+    });
+  }
+}
+let dischargeDialogTitle = ref("");
+function showUpdateDischarge(item, index, text) {
+  dischargeDialogTitle.value = text;
+  updateDischargeDialog.value = true;
+  updatePoundBillList.value = [];
+
+  let { id, dischargeTons, dischargeTime, voyageId, files } = item;
+  if (files && files.length) {
+    for (let i of files)
+      updatePoundBillList.value.push({ id: i.id, url: i.viewUrl });
+  }
+
+  updateForm.value = {
+    id,
+    dischargeTons,
+    dischargeTime,
+  };
+}
+function cancelUpdateDischarge() {
+  updateDischargeDialog.value = false;
+  updateForm.value = {};
+  updatePoundBillList.value = [];
+}
+let mapId = ref(`map-containter`);
+function initMap() {
+  let c;
+  let longitude = 121.524761;
+  let latitude = 31.228721;
+  if (medias.value.length) {
+    c = Math.floor(medias.value.length / 2);
+    longitude = medias.value[c].longitude;
+    latitude = medias.value[c].latitude;
+  }
+  map.value = new AMap.Map(mapId.value, {
+    zoom: 16, //级别
+    center: [longitude, latitude], //中心点坐标
+    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
+    zoomEnable: false,
+    dragEnable: false,
+  });
+  let toolBar = new AMap.ToolBar({
+    position: {
+      top: "40px",
+      right: "40px",
+    },
+  });
+  let hawkEye = new AMap.HawkEye({
+    opened: false,
+  });
+  map.value.addControl(toolBar);
+  map.value.addControl(hawkEye);
+  let markers = [];
+  for (let i of medias.value) {
+    let content = `<div style='width:160px'>
+        ${
+          i.audit == 1
+            ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
+            : ``
+        }
+        <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+      </div>`;
+
+    let marker = new AMap.Marker({
+      content,
+      zIndex: 10,
+      position: new AMap.LngLat(i.longitude, i.latitude),
+      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
+    });
+    if (i.audit == 1) {
+      marker.on("click", () => {
+        openMediaModal(i.viewUrl, 1, "航次图片", i);
+      });
+    }
+
+    markers.push(marker);
+  }
+  for (let i of coordinates.value) {
+    let content = `<div style='width:160px'>
+        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/green-circle.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+      </div>`;
+
+    let marker = new AMap.Marker({
+      content,
+      zIndex: 5,
+      position: new AMap.LngLat(i.longitude, i.latitude),
+      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
+    });
+    if (i.audit == 1) {
+      marker.on("click", () => {
+        openMediaModal(i.viewUrl, 1, "航次图片", i);
+      });
+    }
+
+    markers.push(marker);
+  }
+
+  let overlayGroups = new AMap.OverlayGroup(markers);
+  map.value.on("complete", function () {
+    let t = setTimeout(() => {
+      map.value.add(overlayGroups);
+      map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
+      clearTimeout(t);
+    }, 2000);
+  });
+}
+
+let disabledStatus = ref(true);
+let updateCache = {};
+function changeVoyageInfo() {
+  updateCache = _.cloneDeep(voyage.value);
+  disabledStatus.value = false;
+}
+function cancelVoyageChange() {
+  voyage.value = updateCache;
+  disabledStatus.value = true;
+}
+async function submitVoyageChange() {
+  let res = await api.updateVoyage({
+    ...voyage.value,
+    hasInsurance: Number(voyage.value.hasInsurance),
+  });
+  if (res.data.status == 0) {
+    ElNotification({
+      type: "success",
+      title: res.data.msg,
+    });
+    disabledStatus.value = true;
+  } else {
+    ElNotification({
+      type: "error",
+      title: res.data.msg,
+    });
+    console.log(res);
+  }
+  getVoyageDetail();
+}
+let options = ref([
+  { value: 0, label: "请选择" },
+  {
+    value: 1,
+    label: "航行",
+  },
+  {
+    value: 2,
+    label: "停泊",
+  },
+  {
+    value: 3,
+    label: "装货",
+  },
+  {
+    value: 4,
+    label: "运输中",
+  },
+  {
+    value: 5,
+    label: "卸货",
+  },
+]);
+
+async function finishVoyage() {
+  if (!voyage.value.canComplete) return;
+  let res = await api.finishVoyage({
+    voyageId: voyageId.value,
+  });
+
+  if (res.data.status == 0) {
+    ElNotification({
+      type: "success",
+      title: "航次已完成",
+    });
+  } else {
+    ElNotification({
+      type: "error",
+      title: res.data.msg,
+    });
+    console.log(res);
+  }
+  getVoyageDetail();
+}
+let currentUrl = ref("");
+let mediaModal = ref(false);
+let modalType = ref(1);
+let modalTitle = ref("");
+let modalPreview = ref([]);
+function openMediaModal(url, type, title, item = {}) {
+  modalPreview.value = [url];
+  modalTitle.value = title;
+  modalType.value = type;
+  currentUrl.value = url;
+  mediaModal.value = true;
+}
+
+async function auditMedia(mediaId, a, index, mediaType) {
+  console.log(mediaId, a, index, mediaType);
+  let res = await api.auditMedia({
+    mediaId,
+    audit: a,
+  });
+  if (res.data.status == 0) {
+    medias.value[index].audit = a;
+    ElNotification({
+      type: "success",
+      title: res.data.msg,
+    });
+  } else {
+    console.log(res);
+  }
+}
+
+async function markMedia(mediaId, type, index, mediaType) {
+  console.log(mediaId, type, index, mediaType);
+  let res = await api.markMedia({
+    mediaId,
+    type,
+  });
+  if (res.data.status == 0) {
+    medias.value[index].type = type;
+    ElNotification({
+      type: "success",
+      title: res.data.msg,
+    });
+  } else {
+    console.log(res);
+  }
+}
+let dialogImageUrl = ref("");
+let dialogVisible = ref(false);
+function handlePictureCardPreview(file) {
+  dialogVisible.value = true;
+  dialogImageUrl.value = file.url;
+}
+
+async function handleRemovePolicy(file, list) {
+  let cache = _.cloneDeep(policyFileList.value);
+  console.log(cache);
+  ElMessageBox.confirm("确认删除保险单?", "Warning", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      let { id } = file;
+      let res = await api.deleteWaybill({
+        id,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          message: "删除成功!",
+          type: "success",
+        });
+        policyFileList.value = list;
+      }
+    })
+    .catch(() => {
+      policyFileList.value = cache;
+      ElMessage({
+        type: "info",
+        message: "取消删除",
+      });
+    });
+}
+let policyFileList = ref([]);
+
+function policyUploadSuccess(response, file, list) {
+  list[list.length - 1] = {
+    ...response.result,
+    url: response.result.viewUrl,
+  };
+  console.log(list);
+  policyFileList.value = list;
+}
+
+let policyParams = ref({
+  voyageId: voyageId.value,
+  type: 3,
+});
+
+async function handleRemovePoundBill(file, list) {
+  let cache = _.cloneDeep(poundBill.value);
+  console.log(cache);
+  ElMessageBox.confirm("确认删除磅单?", "Warning", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      let { id } = file;
+      let res = await api.deleteWaybill({
+        id,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          message: "删除成功!",
+          type: "success",
+        });
+        poundBill.value = list;
+      }
+    })
+    .catch(() => {
+      poundBill.value = cache;
+      ElMessage({
+        type: "info",
+        message: "取消删除",
+      });
+    });
+}
+
+async function handleRemoveBill(file, list) {
+  let cache = _.cloneDeep(voyageBill.value);
+  console.log(cache);
+  ElMessageBox.confirm("确认删除运单?", "Warning", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      let { id } = file;
+      let res = await api.deleteWaybill({
+        id,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          message: "删除成功!",
+          type: "success",
+        });
+        voyageBill.value = list;
+      }
+    })
+    .catch(() => {
+      voyageBill.value = cache;
+      ElMessage({
+        type: "info",
+        message: "取消删除",
+      });
+    });
+}
+let voyageBill = ref([]);
+
+function billUploadSuccess(response, file, list) {
+  list[list.length - 1] = {
+    ...response.result,
+    url: response.result.viewUrl,
+  };
+  console.log(list);
+  voyageBill.value = list;
+}
+
+let billParams = ref({
+  voyageId: voyageId.value,
+  type: 1,
+});
+
+function getPoundBillList(list) {
+  console.log(list);
+  poundBillList.value = list;
+}
+let poundBillList = ref([]);
+
+let poundBill = ref([]);
+
+function poundBillUploadSuccess(response, file, list) {
+  list[list.length - 1] = {
+    ...response.result,
+    url: response.result.viewUrl,
+  };
+  console.log(list);
+  poundBill.value = list;
+}
+function previewPoundBill(url) {
+  console.log(url);
+}
+
+let updatePoundParams = ref({
+  voyageId: voyageId.value,
+  type: 2,
+});
+let updatePoundBillList = ref([]);
+function getupdatePoundBillList(list) {
+  console.log(list);
+  updatePoundBillList.value = list;
+}
+
+let previewPoundList = ref([]);
+
+let poundParams = ref({
+  voyageId: voyageId.value,
+  type: 2,
+});
+async function calExpectedArrivalTime(voyageDetailId, index) {
+  let res = await api.calExpectedArrivalTime({
+    voyageDetailId,
+    setSailTime: voyage.value.voyageDetails[index].setSailTime,
+  });
+  if (res.data.status == 0) {
+    voyage.value.voyageDetails[index].expectedArrivalTime = res.data.result;
+  } else {
+    ElMessage({
+      type: "error",
+      message: res.data.msg,
+    });
+  }
+}
+let isLoadingExcel = ref(false);
+async function downloadExcel() {
+  isLoadingExcel.value = true;
+  let res = await downloadBlobFile(
+    `${url.baseurl}/voyage/exportExcel`,
+    { voyageId: voyageId.value },
+    `${voyage.value.voyageName}-船舶跟踪表`,
+    "post",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
+  );
+  if (res) {
+    isLoadingExcel.value = false;
+  }
+}
+
+async function cancelVoyage() {
+  console.log("取消航次");
+  ElMessageBox.confirm("确认取消航次?", "确认操作", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消操作",
+    type: "warning",
+  })
+    .then(async (e) => {
+      console.log(e);
+      let res = await api.cancelVoyage({
+        id: voyageId.value,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          type: "success",
+          message: "航次取消成功!",
+        });
+        router.push("/voyageList");
+      } else {
+        console.log(res);
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+      ElMessage({
+        type: "info",
+        message: "取消操作",
+      });
+    });
+}
+let certs = ref(null);
+let isCertsVisable = ref(false);
+
+function showCerts() {
+  setTimeout(() => {
+    certs.value.initCerts(shipAudits.value);
+  });
+}
+let isDischargeLoadingExcel = ref(false);
+async function exportDischargeExcel() {
+  isDischargeLoadingExcel.value = true;
+  let res = await downloadBlobFile(
+    `${url.baseurl}/voyage/exportDischargeExcel`,
+    { voyageId: voyageId.value },
+    `${voyage.value.voyageName}-卸货记录表`,
+    "post",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
+  );
+  if (res) {
+    isDischargeLoadingExcel.value = false;
+  }
+}
+
+let isAddPoundVisable = ref(false);
+
+let isAddTruckRecordVisable = ref(false);
+let truckTableData = ref([]);
+let truckRecordForm = ref({});
+let truckRecordBillList = ref([]);
+let truckCurrentPage = ref(1);
+let truckTotal = ref(0);
+let truckLoadParams = ref({
+  voyageId: voyage,
+  type: 4,
+});
+function getTruckLoadBillList(list) {
+  truckRecordBillList.value = list;
+}
+function cancelUploadTruckRecord() {
+  isAddTruckRecordVisable.value = false;
+  truckRecordForm.value = {};
+  truckRecordBillList.value = [];
+  currentRecordId.value = -1;
+}
+let currentRecordId = ref(-1);
+async function addTruckLoadRecord() {
+  let postData = {};
+  if (truckRecordBillList.value.length) {
+    if (truckRecordBillList.value[0].viewUrl) {
+      let { fileKey, viewUrl, downloadUrl } = truckRecordBillList.value[0];
+      postData = {
+        fileKey,
+        viewUrl,
+        downloadUrl,
+      };
+    } else {
+      let { fileKey, viewUrl, downloadUrl } =
+        truckRecordBillList.value[0].response.result;
+      postData = {
+        fileKey,
+        viewUrl,
+        downloadUrl,
+      };
+    }
+  } else {
+    postData = {
+      fileKey: "",
+      viewUrl: "",
+      downloadUrl: "",
+    };
+  }
+  if (currentRecordId.value != -1) {
+    postData.recordId = currentRecordId.value;
+    delete truckRecordForm.value.file;
+    delete truckRecordForm.value.fileId;
+  }
+  let res = await api[
+    `${
+      truckRecordModalType.value == "新增记录"
+        ? "addTruckLoadRecord"
+        : "updateTruckLoadRecord"
+    }`
+  ]({
+    voyageId: voyageId.value,
+    portId: currentDiscPortId.value,
+    ...postData,
+    ...truckRecordForm.value,
+  });
+  cancelUploadTruckRecord();
+  getTruckLoadRecord();
+}
+function showAddTruckRecord() {
+  isAddTruckRecordVisable.value = true;
+  truckRecordModalType.value = "新增记录";
+}
+
+async function getTruckLoadRecord() {
+  let res = await api.getTruckLoadRecord({
+    voyageId: voyageId.value,
+    portId: currentDiscPortId.value,
+    currentPage: truckCurrentPage.value,
+    size: 10,
+  });
+  truckTableData.value = res.data.result;
+  truckTotal.value = res.data.total;
+}
+function truckPageChange(e) {
+  truckCurrentPage.value = e;
+  getTruckLoadRecord();
+}
+
+let truckRecordModalType = ref("");
+function showTruckRecord(item, index, text) {
+  isAddTruckRecordVisable.value = true;
+  currentRecordId.value = item.id;
+  truckRecordModalType.value = text;
+  if (item.file) {
+    truckRecordBillList.value[0] = {
+      ...item.file,
+      url: item.file.viewUrl,
+    };
+  }
+
+  truckRecordForm.value = { ...item };
+}
+async function deleteTruckRecord(id, index) {
+  console.log(id);
+  ElMessageBox.confirm("确认删除装货记录?", "Warning", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      let res = await api.deleteTruckLoadRecord({
+        id,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          message: "删除成功!",
+          type: "success",
+        });
+      }
+      getTruckLoadRecord();
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "取消删除",
+      });
+    });
+}
+
+let isDistributeModalVisable = ref(false);
+let previewList = ref([]);
+let checkedImages = ref([]);
+let distributeType = ref(-1);
+let distributePortId = ref(-1);
+let checkedPreviewList = ref([]);
+let recordIds = ref("");
+let ocrTruckRecordTableData = ref([]);
+function showDistributeModal() {
+  checkedImages.value = shipownerUploadFiles.value.filter((e) => e.checked);
+
+  if (!checkedImages.value.length) {
+    ElMessage({
+      type: "error",
+      message: "请选择要分配的图片!",
+    });
+    return;
+  }
+  let arr0 = [];
+  for (let i of checkedImages.value) {
+    checkedPreviewList.value.push(i.viewUrl);
+    arr0.push(i.id);
+  }
+  recordIds.value = arr0.join(",");
+  isDistributeModalVisable.value = true;
+}
+
+function distributeModalClose() {
+  isDistributeModalVisable.value = false;
+  distributeType.value = -1;
+  distributePortId.value = -1;
+  distributePoundForm.value = {
+    dischargeTime: "",
+    dischargeTons: "",
+    dischargePieces: "",
+  };
+  ocrTruckRecordTableData.value = [];
+}
+
+async function submitDistribute() {
+  if (distributePortId.value == -1) {
+    ElMessage({
+      type: "error",
+      message: "请选择要分配的港口!",
+    });
+    return;
+  }
+  if (distributeType.value == -1) {
+    ElMessage({
+      type: "error",
+      message: "请选择要分配类型!",
+    });
+    return;
+  }
+  let postData = {};
+  let type = distributeType.value;
+  if (2 == type) {
+    postData = {
+      poundBillData: {
+        ...distributePoundForm.value,
+        portId: distributePortId.value,
+      },
+    };
+  } else if (4 == type) {
+    for (let i of ocrTruckRecordTableData.value) {
+      i.portId = distributePortId.value;
+    }
+    postData = { carLoadDatas: ocrTruckRecordTableData.value };
+  }
+  let res = await api.distribute({
+    ...postData,
+    voyageId: voyageId.value,
+    recordIds: recordIds.value,
+    type,
+  });
+  console.log(res);
+  distributeModalClose();
+  getVoyageDetail();
+  if (2 == type) getDischargeList();
+  if (4 == type) getTruckLoadRecord();
+}
+
+async function deleteOcrRecord(index) {
+  console.log(index);
+  ocrTruckRecordTableData.value.splice(index, 1);
+}
+
+let distributePoundForm = ref({});
+async function ocr() {
+  ocrLoading.value = true;
+  ocrImageList.value = [];
+  let res = await api.ocr({
+    recordIds: recordIds.value,
+  });
+  ocrLoading.value = false;
+  ocrTruckRecordTableData.value = res.data.result;
+  for (let i of ocrTruckRecordTableData.value) {
+    if (i.weighTime) i.weighTime = i.weighTime.substring(0, 10);
+    ocrImageList.value.push(i.viewUrl);
+  }
+}
+let isCheckAll = ref(false);
+let isIndeterminate = ref(false);
+function checkAll(b) {
+  isIndeterminate.value = false;
+  shipownerUploadFiles.value.forEach((e) => {
+    e.checked = b;
+  });
+}
+function checkItem() {
+  let arr = shipownerUploadFiles.value.filter((e) => e.checked);
+  if (arr.length == shipownerUploadFiles.value.length) {
+    isCheckAll.value = true;
+    isIndeterminate.value = false;
+  } else if (arr.length == 0) {
+    isCheckAll.value = false;
+    isIndeterminate.value = false;
+  } else {
+    isIndeterminate.value = true;
+  }
+}
+
+let ocrLoading = ref(false);
+let ocrImageList = ref([]);
+let blockchainInfo = ref("");
+
+let isAddLabVisable = ref(false);
+let labTableData = ref([]);
+let labForm = ref({});
+let labBillList = ref([]);
+let labCurrentPage = ref(1);
+let labTotal = ref(0);
+let labParams = ref({
+  voyageId: voyageId.value,
+  type: 5,
+});
+function getLabBillList(list) {
+  labBillList.value = list;
+}
+function cancelUploadLab() {
+  isAddLabVisable.value = false;
+  labForm.value = {};
+  labBillList.value = [];
+  currentLabId.value = -1;
+}
+let currentLabId = ref(-1);
+let isLabLoading = ref(false);
+async function addLab() {
+  let postData = {
+    portId: currentDiscPortId.value,
+  };
+  if (labBillList.value.length) {
+    if (labBillList.value[0].viewUrl) {
+      let { fileKey, viewUrl, downloadUrl } = labBillList.value[0];
+      postData = {
+        ...postData,
+        fileKey,
+        viewUrl,
+        downloadUrl,
+      };
+    } else {
+      let { fileKey, viewUrl, downloadUrl } =
+        labBillList.value[0].response.result;
+      postData = {
+        ...postData,
+        fileKey,
+        viewUrl,
+        downloadUrl,
+      };
+    }
+  } else {
+    postData = {
+      ...postData,
+      fileKey: "",
+      viewUrl: "",
+      downloadUrl: "",
+    };
+  }
+  if (currentLabId.value != -1) {
+    postData.labId = currentLabId.value;
+    delete postData.portId;
+    delete labForm.value.file;
+    delete labForm.value.fileId;
+  }
+  isLabLoading.value = true;
+  let res = await api[
+    `${labModalType.value == "新增记录" ? "addLab" : "updateLab"}`
+  ]({
+    voyageId: voyageId.value,
+    ...postData,
+    ...labForm.value,
+  });
+  isLabLoading.value = false;
+  cancelUploadLab();
+  getLabList();
+}
+function showAddLab() {
+  isAddLabVisable.value = true;
+  labModalType.value = "新增记录";
+}
+
+async function getLabList() {
+  let res = await api.getLabList({
+    voyageId: voyageId.value,
+    portId: currentDiscPortId.value,
+    currentPage: labCurrentPage.value,
+    size: 10,
+  });
+  labTableData.value = res.data.result;
+  labTotal.value = res.data.total;
+}
+function labPageChange(e) {
+  labCurrentPage.value = e;
+  getLabList();
+}
+
+let labModalType = ref("");
+function showLab(item, index, text) {
+  isAddLabVisable.value = true;
+  currentLabId.value = item.id;
+  labModalType.value = text;
+  if (item.file) {
+    labBillList.value[0] = {
+      ...item.file,
+      url: item.file.viewUrl,
+    };
+  }
+
+  labForm.value = { ...item };
+}
+async function deleteLab(id, index) {
+  console.log(id);
+  ElMessageBox.confirm("确认删除装货记录?", "Warning", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      let res = await api.deleteLab({
+        id,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          message: "删除成功!",
+          type: "success",
+        });
+      }
+      getLabList();
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "取消删除",
+      });
+    });
+}
+
+let weatherTableData = ref([]);
+let weatherCurrentPage = ref(1);
+let weatherTotal = ref(0);
+async function getPortWeatherList() {
+  let res = await api.getPortWeatherList({
+    voyageId: voyageId.value,
+    portId: currentDiscPortId.value,
+    currentPage: weatherCurrentPage.value,
+    size: 10,
+  });
+  weatherTableData.value = res.data.result;
+  weatherTotal.value = res.data.total;
+}
+
+function weatherPageChange(e) {
+  weatherCurrentPage.value = e;
+  getPortWeatherList();
+}
+
+let currentPortId = ref("");
+let currentDiscPortId = ref("");
+let currentDiscPortIndex = ref(0);
+function changeDiscPortTab(e) {
+  currentDiscPortIndex.value = e.index;
+  currentDiscPortId.value =
+    voyage.value.voyageDetails[currentDiscPortIndex.value].portId + "";
+  weatherTableData.value = [];
+  weatherTotal.value = 0;
+  labTableData.value = [];
+  labTotal.value = 0;
+  dischargeList.value = [];
+  total.value = 0;
+  truckTableData.value = [];
+  truckTotal.value = 0;
+  labCurrentPage.value = 1;
+  dischargeCurrentPage.value = 1;
+  weatherCurrentPage.value = 1;
+  truckCurrentPage.value = 1;
+  getDischargeList();
+  getTruckLoadRecord();
+  getLabList();
+  getPortWeatherList();
+}
+
+let toInsertDiscPortId = ref("");
+let toInsertDiscPortValue = ref("");
+let getCol = _.debounce(
+  async (queryString, cb) => {
+    if (!queryString) return;
+    let res = await api.getCol({
+      term: queryString,
+    });
+    if (res.data.status == 0) {
+      cb(res.data.result);
+    }
+  },
+  1000,
+  { leading: true }
+);
+function clear(type) {
+  toInsertDiscPortId.value = "";
+  toInsertDiscPortValue.value = "";
+}
+let selectToInsertDiscProt = (item, index) => {
+  console.log(item);
+  toInsertDiscPortId.value = item.key;
+  toInsertDiscPortValue.value = item.value;
+};
+let insertDiscPortVisable = ref(false);
+async function addNewPort() {
+  if (!toInsertDiscPortId.value || !toInsertDiscPortValue.value) {
+    ElMessage({
+      message: "请选择提前卸货港!",
+      type: "warning",
+    });
+    return;
+  }
+  let res = await api.addNewPort({
+    voyageId: voyageId.value,
+    portId: toInsertDiscPortId.value,
+  });
+  if (res.data.status == 0) {
+    ElMessage({
+      message: "添加提前卸货港成功!",
+      type: "success",
+    });
+    getVoyageDetail(true);
+    cancelInsertDiscPort();
+  } else {
+    ElMessage({
+      message: res.data.msg,
+      type: "error",
+    });
+  }
+}
+
+function cancelInsertDiscPort() {
+  insertDiscPortVisable.value = false;
+  toInsertDiscPortId.value = "";
+  toInsertDiscPortValue.value = "";
+}
+
+function showAddPoundModal() {
+  isAddPoundVisable.value = true;
+  formInline.value.dischargeTime = dayjs().format("YYYY/MM/DD HH:mm:ss");
+}
+
+let isAccidentVisable = ref(false);
+let accidentForm = ref({
+  files: [],
+});
+let accidentParams = ref({
+  voyageId: voyageId.value,
+});
+let accidentCurrentPage = ref(1);
+let accidentTotal = ref(0);
+async function getAccidentList() {
+  let res = await api.getAccidentList({
+    voyageId: voyageId.value,
+    currentPage: accidentCurrentPage.value,
+    size: 10,
+  });
+  if (res.data.status == 0) {
+    accidentList.value = res.data.result;
+    accidentTotal.value = res.data.total;
+  } else {
+    accidentList.value = [];
+    accidentTotal.value = 0;
+    accidentCurrentPage.value = 1;
+  }
+}
+let accidentList = ref([]);
+async function addUpdateAccident() {
+  // console.log("accidentForm", accidentForm.value);
+  let { accidentTime, remark, files, id } = accidentForm.value;
+  let arr = [];
+  for (let i of files) {
+    arr.push(i.id);
+  }
+  let postData = {
+    loginAccountId: localStorage.loginAccountId,
+    voyageId: voyageId.value,
+    accidentTime,
+    remark,
+    voyageFileIds: arr.join(","),
+    id,
+  };
+  // console.log("postData", postData);
+  let res = await api[id ? "updateAccident" : "addAccident"](postData);
+  if (res.data.status == 0) {
+    resetAccidentForm();
+    isAccidentVisable.value = false;
+  }
+  getAccidentList();
+}
+function resetAccidentForm() {
+  isAccidentCheck.value = false;
+  accidentForm.value = {
+    files: [],
+  };
+}
+function accidentUploadSuccess(e) {
+  console.log(e);
+  accidentForm.value.files.push(e.result);
+}
+function accidentPageChange(e) {
+  accidentCurrentPage.value = e;
+  getAccidentList();
+}
+let accidentTitle = ref("");
+function accidentBeforeUpload(e) {
+  if (e.type.indexOf("image") != -1) {
+    accidentParams.value.mediaType = 1;
+  } else {
+    accidentParams.value.mediaType = 2;
+  }
+}
+let isAccidentCheck = ref(false);
+function checkAccident(item, boo) {
+  isAccidentCheck.value = boo;
+  if (boo) {
+    accidentTitle.value = "查看出险记录";
+  } else {
+    accidentTitle.value = "修改出险记录";
+  }
+  isAccidentVisable.value = true;
+  item.files = item.files || [];
+  accidentForm.value = item;
+}
+
+function deleteAccident(id) {
+  ElMessageBox.confirm("确认删除出险记录?", "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "info",
+  })
+    .then(async () => {
+      let res = await api.deleteAccident({
+        id,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          type: "success",
+          message: "删除成功!",
+        });
+      }
+      getAccidentList();
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "取消删除",
+      });
+    });
+}
+let orderDetail = ref({
+  id: 279,
+  code: "JJ11681400547",
+  cargoOwnerName: "嘉吉",
+  cargo: "粉末菜粕",
+  tons: 2,
+  pieces: 2,
+  startTime: "2023/04/06 00:00:00",
+  endTime: null,
+  createTime: "2023/04/13 23:42:27",
+  reserved: null,
+  orderStatus: 1,
+  voyages: [
+    {
+      id: 322,
+      code: "JJ11681400547-1",
+      voyageName: "-鄂州-11111-202304",
+      shipName: "11111",
+      shipMmsi: "1111",
+    },
+    {
+      id: 323,
+      code: "JJ11681400547-2",
+      voyageName: "-武汉汉南-555船-202304",
+      shipName: "555船",
+      shipMmsi: "55555555",
+    },
+  ],
+});
+async function getOrderDetail() {
+  //   let { data } = await api.getOrderDetail({
+  //     orderId:router.query.id,
+  //   });
+  //   orderDetail.value = data.result;
+  orderDetail.value.startTime = orderDetail.value.startTime.substring(0, 10);
+  voyageId.value = orderDetail.value.voyages[0].id;
+  console.log("orderDetail", orderDetail.value);
+  getVoyageDetail(true);
+}
+
+let currentVoyageIndex = ref(0);
+function changeVoyage(index) {
+  currentVoyageIndex.value = index;
+  voyageId.value = orderDetail.value.voyages[index].id;
+  getVoyageDetail();
+}
+onMounted(() => {
+  getOrderDetail();
+});
+</script>
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 500px;
+}
+
+.card-note {
+  height: 30px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #777777;
+}
+
+.medias-box {
+  width: 200px;
+  height: 200px;
+  margin-top: 20px;
+}
+
+.medias-content {
+  width: 100%;
+  height: 600px;
+  background: #f7f7f7;
+  border-radius: 2px;
+}
+
+.pic-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  padding: 30px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+.pic-main {
+  position: relative;
+  width: 120px;
+}
+.box {
+  position: absolute;
+  height: 255px;
+  width: 180px;
+  border: 5px solid #dddddd;
+  transition: all 0.5s;
+  background: #fff;
+  z-index: 10;
+}
+
+.point {
+  position: relative;
+  left: 93px;
+  top: 277px;
+  width: 16px;
+  height: 16px;
+  background-image: url(../../assets/blue-circle.png);
+}
+
+.s-line {
+  position: absolute;
+  left: 100px;
+  top: 261px;
+  height: 20px;
+  border-left: 2px dashed;
+  box-sizing: border-box;
+  border-color: #ddd;
+}
+
+.l-line {
+  position: relative;
+  bottom: 30px;
+  left: 111px;
+  top: 268px;
+  height: 3px;
+  width: 100px;
+  background-color: #dddddd;
+}
+
+.bottom-box {
+  top: 309px;
+}
+.top210px {
+  top: 289px;
+}
+
+.box:hover {
+  transform: scale(1.15);
+}
+
+.medias-box {
+  width: 80px;
+  height: 80px;
+  margin-top: 10px;
+}
+
+.card-note {
+  height: 30px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #777777;
+  padding: 10px 20px;
+}
+
+.medias-box {
+  width: 100%;
+  height: 100px;
+  margin-top: 20px;
+}
+
+.checkbox-group {
+  width: 180px;
+}
+
+.el-checkbox {
+  height: 20px;
+  margin-top: 15px;
+  margin-right: 0;
+}
+
+.now-box {
+  border: 5px solid #0094fe;
+}
+
+.now-l-line {
+  background-color: #0094fe;
+}
+
+.now-s-line {
+  border-color: #97caf6;
+}
+
+.now-point {
+  filter: grayscale(1);
+}
+
+.info-line-text-table {
+  width: 180px !important;
+}
+
+.upload-plus-icon {
+  height: 15%;
+  color: rgb(139, 147, 156);
+  line-height: 100px;
+  font-size: 40px;
+  font-weight: 200;
+}
+
+.upload-text {
+  height: 25%;
+  color: rgb(139, 147, 156);
+}
+.el-checkbox {
+  margin-top: 0;
+}
+
+:deep().el-upload-dragger {
+  width: 100%;
+  height: 148px !important;
+}
+
+.info-gap {
+  width: 40px;
+  font-size: 14px;
+  overflow: visible;
+  white-space: nowrap;
+  color: #006ebc;
+  cursor: pointer;
+}
+
+.unit {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #353a42;
+  line-height: 100%;
+  margin: 0 10px;
+}
+
+.line {
+  flex-wrap: wrap;
+  margin: 0 20px;
+}
+
+.info-line {
+  margin-bottom: 20px;
+}
+
+.ml50 {
+  margin-left: 140px;
+}
+</style>