|
|
@@ -1,275 +1,281 @@
|
|
|
<template>
|
|
|
- <div class="df">
|
|
|
- <div
|
|
|
- class="left-top"
|
|
|
- :style="{
|
|
|
- height:
|
|
|
- store.state.firstTitle == '主页'
|
|
|
- ? 'calc(100vh - 142px)'
|
|
|
- : 'calc(100vh - 238px)',
|
|
|
- }"
|
|
|
- >
|
|
|
- <div id="map-container" class="map-container"></div>
|
|
|
- <div class="df aic tabs">
|
|
|
- <div
|
|
|
- @click="changeVoyageType(0)"
|
|
|
- :class="
|
|
|
- status == 0
|
|
|
- ? 'currentbtn radio-btns left-radius'
|
|
|
- : 'radio-btns left-radius'
|
|
|
- "
|
|
|
- >
|
|
|
- 全部航次
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style="border-left: none"
|
|
|
- @click="changeVoyageType(1)"
|
|
|
- :class="status == 1 ? 'currentbtn radio-btns' : 'radio-btns'"
|
|
|
- >
|
|
|
- 装货中
|
|
|
- </div>
|
|
|
+ <div v-loading="isLoading">
|
|
|
+ <div class="df">
|
|
|
+ <div
|
|
|
+ class="left-top"
|
|
|
+ :style="{
|
|
|
+ height:
|
|
|
+ store.state.firstTitle == '主页'
|
|
|
+ ? 'calc(100vh - 142px)'
|
|
|
+ : 'calc(100vh - 238px)',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div id="map-container" class="map-container"></div>
|
|
|
+ <div class="df aic tabs">
|
|
|
+ <div
|
|
|
+ @click="changeVoyageType(0)"
|
|
|
+ :class="
|
|
|
+ status == 0
|
|
|
+ ? 'currentbtn radio-btns left-radius'
|
|
|
+ : 'radio-btns left-radius'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 全部航次
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="border-left: none"
|
|
|
+ @click="changeVoyageType(1)"
|
|
|
+ :class="status == 1 ? 'currentbtn radio-btns' : 'radio-btns'"
|
|
|
+ >
|
|
|
+ 装货中
|
|
|
+ </div>
|
|
|
|
|
|
- <div
|
|
|
- style="border-left: none"
|
|
|
- @click="changeVoyageType(2)"
|
|
|
- :class="status == 2 ? 'currentbtn radio-btns' : 'radio-btns'"
|
|
|
- >
|
|
|
- 运输中
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style="border-left: none"
|
|
|
- @click="changeVoyageType(3)"
|
|
|
- :class="
|
|
|
- status == 3
|
|
|
- ? 'currentbtn radio-btns right-radius'
|
|
|
- : 'radio-btns right-radius '
|
|
|
- "
|
|
|
- >
|
|
|
- 卸货中
|
|
|
+ <div
|
|
|
+ style="border-left: none"
|
|
|
+ @click="changeVoyageType(2)"
|
|
|
+ :class="status == 2 ? 'currentbtn radio-btns' : 'radio-btns'"
|
|
|
+ >
|
|
|
+ 运输中
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="border-left: none"
|
|
|
+ @click="changeVoyageType(3)"
|
|
|
+ :class="
|
|
|
+ status == 3
|
|
|
+ ? 'currentbtn radio-btns right-radius'
|
|
|
+ : 'radio-btns right-radius '
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 卸货中
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="right-top"
|
|
|
- :style="{
|
|
|
- height:
|
|
|
- store.state.firstTitle == '主页'
|
|
|
- ? 'calc(100vh - 142px)'
|
|
|
- : 'calc(100vh - 238px)',
|
|
|
- }"
|
|
|
- >
|
|
|
- <div class="cards card-1">
|
|
|
- <div>总航次数</div>
|
|
|
- <div>{{ indexData.totalVoyageNum }}</div>
|
|
|
- </div>
|
|
|
- <div class="cards card-2">
|
|
|
- <div>总实际装载吨位</div>
|
|
|
- <div>{{ indexData.totalLoadTons }}</div>
|
|
|
- </div>
|
|
|
- <div class="cards card-3">
|
|
|
- <div>总已完成卸货吨位</div>
|
|
|
- <div>{{ indexData.finshDiscTons }}</div>
|
|
|
- </div>
|
|
|
- <div class="cards card-4">
|
|
|
- <div>总剩余卸货吨位</div>
|
|
|
- <div>{{ indexData.unfinshDiscTons }}</div>
|
|
|
- </div>
|
|
|
- <div id="pie" class="card-5">
|
|
|
- <div>饼图</div>
|
|
|
- <div>卸货</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="df">
|
|
|
- <div class="left-bottom">
|
|
|
<div
|
|
|
- class="df aic jcfs mt20"
|
|
|
- style="
|
|
|
- font-size: 14px;
|
|
|
- color: #333;
|
|
|
- width: calc(100vw - 300px);
|
|
|
- flex-wrap: wrap;
|
|
|
- "
|
|
|
+ class="right-top"
|
|
|
+ :style="{
|
|
|
+ height:
|
|
|
+ store.state.firstTitle == '主页'
|
|
|
+ ? 'calc(100vh - 142px)'
|
|
|
+ : 'calc(100vh - 238px)',
|
|
|
+ }"
|
|
|
>
|
|
|
- <div class="df jcsb aic mb10 mr20 ml20">
|
|
|
- <div class="mr10">装货港:</div>
|
|
|
- <el-select
|
|
|
- style="width: 120px"
|
|
|
- v-model="postData.loadPortId"
|
|
|
- placeholder="装货港"
|
|
|
- size="small"
|
|
|
- @change="getIndexData(1)"
|
|
|
- @focus="getPortSelect"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in portOptions"
|
|
|
- :key="item"
|
|
|
- :label="item.value"
|
|
|
- :value="item.key"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <div class="cards card-1">
|
|
|
+ <div>总航次数</div>
|
|
|
+ <div>{{ indexData.totalVoyageNum }}</div>
|
|
|
</div>
|
|
|
- <div class="df jcsb aic mb10 mr20">
|
|
|
- <div class="mr10">卸货港:</div>
|
|
|
- <el-select
|
|
|
- style="width: 120px"
|
|
|
- v-model="postData.discPortId"
|
|
|
- placeholder="卸货港"
|
|
|
- size="small"
|
|
|
- @change="getIndexData(1)"
|
|
|
- @focus="getPortSelect"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in portOptions"
|
|
|
- :key="item"
|
|
|
- :label="item.value"
|
|
|
- :value="item.key"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <div class="cards card-2">
|
|
|
+ <div>总实际装载吨位</div>
|
|
|
+ <div>{{ indexData.totalLoadTons }}</div>
|
|
|
</div>
|
|
|
- <div class="df jcsb aic mb10 mr20">
|
|
|
- <div class="mr10">到港状态:</div>
|
|
|
- <el-select
|
|
|
- style="width: 120px"
|
|
|
- v-model="postData.isArrived"
|
|
|
- placeholder="到港状态"
|
|
|
- size="small"
|
|
|
- @change="getIndexData(1)"
|
|
|
- >
|
|
|
- <el-option label="已到港" :value="0" />
|
|
|
- <el-option label="未到港" :value="1" />
|
|
|
- </el-select>
|
|
|
+ <div class="cards card-3">
|
|
|
+ <div>总已完成卸货吨位</div>
|
|
|
+ <div>{{ indexData.finshDiscTons }}</div>
|
|
|
</div>
|
|
|
- <div class="df jcsb aic mb10 mr20">
|
|
|
- <div class="mr10">航次状态:</div>
|
|
|
- <el-select
|
|
|
- style="width: 120px"
|
|
|
- v-model="postData.abnormalStatus"
|
|
|
- placeholder="航次状态"
|
|
|
- size="small"
|
|
|
- @change="getIndexData(1)"
|
|
|
- >
|
|
|
- <el-option label="正常" :value="0" />
|
|
|
- <el-option label="异常" :value="1" />
|
|
|
- </el-select>
|
|
|
+ <div class="cards card-4">
|
|
|
+ <div>总剩余卸货吨位</div>
|
|
|
+ <div>{{ indexData.unfinshDiscTons }}</div>
|
|
|
</div>
|
|
|
- <div class="df jcsb aic mb10 mr20">
|
|
|
- <div class="mr10">货种:</div>
|
|
|
- <el-select
|
|
|
- style="width: 100px"
|
|
|
- v-model="postData.cargoId"
|
|
|
- placeholder="货种"
|
|
|
- size="small"
|
|
|
- @change="getIndexData(1)"
|
|
|
- @focus="getCargoSelect"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in cargoOptions"
|
|
|
- :key="item"
|
|
|
- :label="item.value"
|
|
|
- :value="item.key"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <div id="pie" class="card-5">
|
|
|
+ <div>饼图</div>
|
|
|
+ <div>卸货</div>
|
|
|
</div>
|
|
|
- <el-button
|
|
|
- @click="resetFilter"
|
|
|
- class="mb10"
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- >
|
|
|
- 全部
|
|
|
- </el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right-bottom">
|
|
|
- <el-popover placement="top" :width="100" trigger="hover">
|
|
|
- <template #reference>
|
|
|
- <el-button size="large" type="primary">导出报告</el-button>
|
|
|
- </template>
|
|
|
+ <div class="df">
|
|
|
+ <div class="left-bottom">
|
|
|
<div
|
|
|
+ class="df aic jcfs mt20"
|
|
|
style="
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 180px;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ width: calc(100vw - 300px);
|
|
|
+ flex-wrap: wrap;
|
|
|
"
|
|
|
>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="medium"
|
|
|
- v-auth="'DOWNLOADVOYAGELIST'"
|
|
|
- @click="showExportModal('航次列表')"
|
|
|
+ <div class="df jcsb aic mb10 mr20 ml20">
|
|
|
+ <div class="mr10">装货港:</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 120px"
|
|
|
+ v-model="postData.loadPortId"
|
|
|
+ placeholder="装货港"
|
|
|
+ size="small"
|
|
|
+ @change="getIndexData(1)"
|
|
|
+ @focus="getPortSelect"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
>
|
|
|
- 导出航次列表
|
|
|
- </el-button>
|
|
|
+ <el-option
|
|
|
+ v-for="item in portOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="medium"
|
|
|
- v-auth="'MULTDOWNLOADSHIPTRACK'"
|
|
|
- @click="showExportModal('航次跟踪')"
|
|
|
+ <div class="df jcsb aic mb10 mr20">
|
|
|
+ <div class="mr10">卸货港:</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 120px"
|
|
|
+ v-model="postData.discPortId"
|
|
|
+ placeholder="卸货港"
|
|
|
+ size="small"
|
|
|
+ @change="getIndexData(1)"
|
|
|
+ @focus="getPortSelect"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
>
|
|
|
- 导出航次跟踪
|
|
|
- </el-button>
|
|
|
+ <el-option
|
|
|
+ v-for="item in portOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="medium"
|
|
|
- @click="showExportModal('卸货记录')"
|
|
|
- v-auth="'MULTDOWNLOADDISCHARGE'"
|
|
|
+ <div class="df jcsb aic mb10 mr20">
|
|
|
+ <div class="mr10">到港状态:</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 120px"
|
|
|
+ v-model="postData.isArrived"
|
|
|
+ placeholder="到港状态"
|
|
|
+ size="small"
|
|
|
+ @change="getIndexData(1)"
|
|
|
>
|
|
|
- 导出卸货记录
|
|
|
- </el-button>
|
|
|
+ <el-option label="已到港" :value="0" />
|
|
|
+ <el-option label="未到港" :value="1" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- v-auth="'DOWNLOADFYDI'"
|
|
|
- type="primary"
|
|
|
- size="medium"
|
|
|
- @click="downloadFYDI"
|
|
|
+ <div class="df jcsb aic mb10 mr20">
|
|
|
+ <div class="mr10">航次状态:</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 120px"
|
|
|
+ v-model="postData.abnormalStatus"
|
|
|
+ placeholder="航次状态"
|
|
|
+ size="small"
|
|
|
+ @change="getIndexData(1)"
|
|
|
>
|
|
|
- 下载FYDI指数
|
|
|
- </el-button>
|
|
|
+ <el-option label="正常" :value="0" />
|
|
|
+ <el-option label="异常" :value="1" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="df jcsb aic mb10 mr20">
|
|
|
+ <div class="mr10">货种:</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 100px"
|
|
|
+ v-model="postData.cargoId"
|
|
|
+ placeholder="货种"
|
|
|
+ size="small"
|
|
|
+ @change="getIndexData(1)"
|
|
|
+ @focus="getCargoSelect"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in cargoOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
+ <el-button
|
|
|
+ @click="resetFilter"
|
|
|
+ class="mb10"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
+ 全部
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
- </el-popover>
|
|
|
- <el-dialog
|
|
|
- v-model="exportModalVisable"
|
|
|
- :title="exportModalTitle"
|
|
|
- :close-on-click-modal="false"
|
|
|
- @close="isLoadingZip = false"
|
|
|
- width="200px"
|
|
|
- >
|
|
|
- <div class="df aic jcsb">
|
|
|
+ </div>
|
|
|
+ <div class="right-bottom">
|
|
|
+ <el-popover placement="top" :width="100" trigger="hover">
|
|
|
+ <template #reference>
|
|
|
+ <el-button size="large" type="primary">导出报告</el-button>
|
|
|
+ </template>
|
|
|
<div
|
|
|
- v-if="exportModalTitle != '航次列表' || cargoOwnerId == 7"
|
|
|
- class="df aic"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 180px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
>
|
|
|
- <div class="mr20">请选择月份:</div>
|
|
|
- <el-date-picker
|
|
|
- v-model="currentMonth"
|
|
|
- type="month"
|
|
|
- placeholder="请选择年月"
|
|
|
- value-format="YYYYMM"
|
|
|
- :disabled="isLoadingZip"
|
|
|
- />
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ v-auth="'DOWNLOADVOYAGELIST'"
|
|
|
+ @click="showExportModal('航次列表')"
|
|
|
+ >
|
|
|
+ 导出航次列表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ v-auth="'MULTDOWNLOADSHIPTRACK'"
|
|
|
+ @click="showExportModal('航次跟踪')"
|
|
|
+ >
|
|
|
+ 导出航次跟踪
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ @click="showExportModal('卸货记录')"
|
|
|
+ v-auth="'MULTDOWNLOADDISCHARGE'"
|
|
|
+ >
|
|
|
+ 导出卸货记录
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ v-auth="'DOWNLOADFYDI'"
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ @click="downloadFYDI"
|
|
|
+ >
|
|
|
+ 下载FYDI指数
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div></div>
|
|
|
- <el-button type="primary" @click="exportZip" :loading="isLoadingZip">
|
|
|
- 导出{{ exportModalTitle }}
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
+ </el-popover>
|
|
|
+ <el-dialog
|
|
|
+ v-model="exportModalVisable"
|
|
|
+ :title="exportModalTitle"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="isLoadingZip = false"
|
|
|
+ width="200px"
|
|
|
+ >
|
|
|
+ <div class="df aic jcsb">
|
|
|
+ <div
|
|
|
+ v-if="exportModalTitle != '航次列表' || cargoOwnerId == 7"
|
|
|
+ class="df aic"
|
|
|
+ >
|
|
|
+ <div class="mr20">请选择月份:</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="currentMonth"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择年月"
|
|
|
+ value-format="YYYYMM"
|
|
|
+ :disabled="isLoadingZip"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="exportZip"
|
|
|
+ :loading="isLoadingZip"
|
|
|
+ >
|
|
|
+ 导出{{ exportModalTitle }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -373,37 +379,45 @@ let indexData = ref({
|
|
|
totalVoyageNum: "",
|
|
|
unfinshDiscTons: "",
|
|
|
});
|
|
|
+let isLoading = ref(false);
|
|
|
async function getIndexData(type) {
|
|
|
+ isLoading.value = true;
|
|
|
postData.value.status = status.value;
|
|
|
- let res = await api.getIndexData({
|
|
|
- ...postData.value,
|
|
|
- });
|
|
|
- if (res.data.status == 0) {
|
|
|
- indexData.value = res.data.result;
|
|
|
- if (type == "init") {
|
|
|
- initMap();
|
|
|
- drawPie("init");
|
|
|
- } else {
|
|
|
- map.value.clearMap();
|
|
|
- drawMarkers();
|
|
|
- drawPie();
|
|
|
- }
|
|
|
- } else {
|
|
|
- indexData.value = {
|
|
|
- finshDiscTons: 0,
|
|
|
- mapPoints: [],
|
|
|
- totalLoadTons: 0,
|
|
|
- totalVoyageNum: 0,
|
|
|
- unfinshDiscTons: 0,
|
|
|
- };
|
|
|
- if (type == "init") {
|
|
|
- initMap();
|
|
|
- drawPie("init");
|
|
|
+ try {
|
|
|
+ let res = await api.getIndexData({
|
|
|
+ ...postData.value,
|
|
|
+ });
|
|
|
+ isLoading.value = false;
|
|
|
+ if (res.data.status == 0) {
|
|
|
+ indexData.value = res.data.result;
|
|
|
+ if (type == "init") {
|
|
|
+ initMap();
|
|
|
+ drawPie("init");
|
|
|
+ } else {
|
|
|
+ map.value.clearMap();
|
|
|
+ drawMarkers();
|
|
|
+ drawPie();
|
|
|
+ }
|
|
|
} else {
|
|
|
- map.value.clearMap();
|
|
|
- drawMarkers();
|
|
|
- drawPie();
|
|
|
+ indexData.value = {
|
|
|
+ finshDiscTons: 0,
|
|
|
+ mapPoints: [],
|
|
|
+ totalLoadTons: 0,
|
|
|
+ totalVoyageNum: 0,
|
|
|
+ unfinshDiscTons: 0,
|
|
|
+ };
|
|
|
+ if (type == "init") {
|
|
|
+ initMap();
|
|
|
+ drawPie("init");
|
|
|
+ } else {
|
|
|
+ map.value.clearMap();
|
|
|
+ drawMarkers();
|
|
|
+ drawPie();
|
|
|
+ }
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ isLoading.value = false;
|
|
|
}
|
|
|
}
|
|
|
let chartDom = ref({});
|
wzh