更新 天气信息;卸货信息显示

src/views/voyage/voyageDetail.vue

@@ -452,6 +452,85 @@
       </div>
     </div>
   </div>
+  <div class="container-title">天气信息</div>
+  <div
+    style="
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.2);
+      font-weight: normal;
+      margin-left: 25px;
+    "
+  >
+    天气信息为天气预报反应船舶所在区域即将发生天气情况
+    <br />
+    预报下雨情况为预警信息请联系船东拍摄现场实际情况。
+  </div>
+  <div class="line-container-p24">
+    <el-tabs
+      v-model="currentWeatherPortId"
+      type="card"
+      class="demo-tabs"
+      @tab-click="changeWeatherPortTab"
+    >
+      <el-tab-pane
+        v-for="(item, index) in weatherPortList"
+        :key="item"
+        :label="item.portName + ' # ' + (index + 1)"
+        :name="item.portId + ''"
+      ></el-tab-pane>
+    </el-tabs>
+    <el-table style="width: 1200px" :data="weatherTableData" stripe>
+      <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">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="weatherTotal"
+        @current-change="weatherPageChange"
+      ></el-pagination>
+    </div>
+    <div class="hr m30-0"></div>
+  </div>
   <div class="container-title">卸货信息</div>
   <div class="line-container-p24">
     <el-tabs
@@ -467,75 +546,6 @@
         :name="item.portId + ''"
       ></el-tab-pane>
     </el-tabs>
-    <div>
-      <div class="container-second-title df">
-        <div>天气信息</div>
-        <div
-          class="ml10"
-          style="
-            font-size: 12px;
-            color: rgba(0, 0, 0, 0.2);
-            font-weight: normal;
-            scale: 0.9;
-          "
-        >
-          天气信息为天气预报反应船舶所在区域即将发生天气情况
-          <br />
-          预报下雨情况为预警信息请联系船东拍摄现场实际情况。
-        </div>
-      </div>
-      <el-table style="width: 1200px" :data="weatherTableData" stripe>
-        <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">
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          :total="weatherTotal"
-          @current-change="weatherPageChange"
-        ></el-pagination>
-      </div>
-      <div class="hr m30-0"></div>
-    </div>
     <div v-auth="'LABDETAIL_DISABLE'">
       <div class="container-second-title df aic jcsb">
         <div>提单信息</div>
@@ -1266,7 +1276,12 @@ import { useRoute } from "vue-router";
 import _ from "lodash";
 import router from "../../router";
 import store from "../../store";
-import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import {
+  ElNotification,
+  ElMessageBox,
+  ElMessage,
+  ElLoading,
+} from "element-plus";
 import downloadBlobFile from "../../utils/downloadBlobFile";
 import url from "../../apis/config";
 import { subTimeStr } from "utils/utils";
@@ -1296,13 +1311,18 @@ async function getVoyageDetail(isInit) {
   policyList.value = [];
   voyageBill.value = [];
   previewSrcList.value = [];
-  fullscreenLoading.value = true;
+  let loading = ElLoading.service({
+    lock: true,
+    text: "正在加载...",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
   let res = await api.getVoyageDetail({
     type: localStorage.userType,
     voyageId: route.query.id,
     loginAccountId: localStorage.loginAccountId,
   });
-  fullscreenLoading.value = false;
+
   if (res.data.status == 0) {
     ElNotification({
       type: "success",
@@ -1316,6 +1336,19 @@ async function getVoyageDetail(isInit) {
     currentDiscPortId.value = voyage.value.voyageDetails[0].portId + "";
     medias.value = res.data.result.medias;
     shipAudits.value = res.data.result.shipAudits;
+    currentWeatherPortId.value = voyage.value.loadPortId + "";
+    weatherPortList.value = [
+      {
+        portName: voyage.value.loadPort,
+        portId: voyage.value.loadPortId,
+      },
+    ];
+    for (let i of voyage.value.voyageDetails || []) {
+      weatherPortList.value.push({
+        portName: i.portName,
+        portId: i.portId,
+      });
+    }
 
     for (let i of res.data.result.policys || []) {
       policyList.value.push({
@@ -1792,10 +1825,11 @@ async function downloadBillZip() {
 let weatherTableData = ref([]);
 let weatherCurrentPage = ref(1);
 let weatherTotal = ref(0);
+const weatherPortList = ref([]);
 async function getPortWeatherList() {
   let res = await api.getPortWeatherList({
     voyageId: route.query.id,
-    portId: currentDiscPortId.value,
+    portId: currentWeatherPortId.value,
     size: 10,
     currentPage: weatherCurrentPage.value,
   });
@@ -1851,8 +1885,6 @@ 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 = [];
@@ -1861,11 +1893,22 @@ function changeDiscPortTab(e) {
   truckTotal.value = 0;
   labCurrentPage.value = 1;
   dischargeCurrentPage.value = 1;
-  weatherCurrentPage.value = 1;
   truckCurrentPage.value = 1;
   getDischargeList();
   getTruckLoadRecord();
   getLabList();
+}
+
+const currentWeatherPortId = ref("");
+const currentWeatherPortIndex = ref(0);
+function changeWeatherPortTab(e) {
+  currentWeatherPortIndex.value = e.index;
+  currentWeatherPortId.value =
+    weatherPortList.value[currentWeatherPortIndex.value].portId + "";
+
+  weatherCurrentPage.value = 1;
+  weatherTableData.value = [];
+  weatherTotal.value = 0;
   getPortWeatherList();
 }