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

src/views/voyage/voyageDetail.vue

@@ -441,6 +441,93 @@
       </div>
     </div>
   </div>
+  <div class="container-title" v-auth="'WEATHERRECORD'">天气信息</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" v-auth="'WEATHERRECORD'">
+    <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
+      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 class="container-title" v-auth="'DISCHARGEINFO'">卸货信息</div>
   <div class="line-container-p24" v-auth="'DISCHARGEINFO'">
     <el-tabs
@@ -456,83 +543,6 @@
         :name="item.portId + ''"
       ></el-tab-pane>
     </el-tabs>
-    <div v-auth="'WEATHERRECORD'">
-      <div class="container-second-title df" v-auth="'WEATHERRECORD'">
-        <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
-        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>
@@ -1955,6 +1965,19 @@ async function getVoyageDetail(isInit) {
     medias.value = res.data.result.medias;
     shipAudits.value = res.data.result.shipAudits;
     shipownerUploadFiles.value = res.data.result?.shipownerUploadFiles;
+    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 shipownerUploadFiles.value || []) {
       previewList.value.push(i.viewUrl);
     }
@@ -2956,10 +2979,11 @@ async function deleteLab(id, index) {
 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,
     currentPage: weatherCurrentPage.value,
     size: 10,
   });
@@ -2979,8 +3003,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 = [];
@@ -2989,11 +3011,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();
 }