|
|
@@ -1,15 +1,7 @@
|
|
|
<template>
|
|
|
- <div v-loading="isLoading">
|
|
|
- <div class="df">
|
|
|
- <div
|
|
|
- class="left-top"
|
|
|
- :style="{
|
|
|
- height:
|
|
|
- store.state.firstTitle == '主页'
|
|
|
- ? 'calc(100vh - 142px)'
|
|
|
- : 'calc(100vh - 238px)',
|
|
|
- }"
|
|
|
- >
|
|
|
+ <div v-loading="isLoading" style="height: 100%">
|
|
|
+ <div class="df main">
|
|
|
+ <div class="left">
|
|
|
<div id="map-container" class="map-container"></div>
|
|
|
<div class="df aic tabs">
|
|
|
<div
|
|
|
@@ -49,229 +41,248 @@
|
|
|
卸货中
|
|
|
</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;
|
|
|
- "
|
|
|
- >
|
|
|
- <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)"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in loadPortOptions"
|
|
|
- :key="item"
|
|
|
- :label="item.value"
|
|
|
- :value="item.key"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </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)"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in discPortOptions"
|
|
|
- :key="item"
|
|
|
- :label="item.value"
|
|
|
- :value="item.key"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </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>
|
|
|
- <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>
|
|
|
- <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)"
|
|
|
- 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"
|
|
|
+ <div class="df aic filter">
|
|
|
+ <div class="mr10 ml24">装货港</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 120px"
|
|
|
+ v-model="postData.loadPortId"
|
|
|
+ placeholder="装货港"
|
|
|
+ size="small"
|
|
|
+ @change="getIndexData(1)"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in loadPortOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div class="mr10 ml24">卸货港</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 120px"
|
|
|
+ v-model="postData.discPortId"
|
|
|
+ placeholder="卸货港"
|
|
|
size="small"
|
|
|
- type="primary"
|
|
|
+ @change="getIndexData(1)"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
>
|
|
|
- 全部
|
|
|
- </el-button>
|
|
|
+ <el-option
|
|
|
+ v-for="item in discPortOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div class="mr10 ml24">到港状态</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="mr10 ml24">航次状态</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="mr10 ml24">货种</div>
|
|
|
+ <el-select
|
|
|
+ style="width: 100px"
|
|
|
+ v-model="postData.cargoId"
|
|
|
+ placeholder="货种"
|
|
|
+ size="small"
|
|
|
+ @change="getIndexData(1)"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in cargoOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div @click="resetFilter" class="all ml24">全部</div>
|
|
|
</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
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 180px;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- "
|
|
|
+ <div class="right">
|
|
|
+ <div class="df jcfe">
|
|
|
+ <el-popover placement="bottom" :width="100" trigger="hover">
|
|
|
+ <template #reference>
|
|
|
+ <div class="export">导出报告</div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 180px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ v-auth="'DOWNLOADVOYAGELIST'"
|
|
|
+ @click="showExportModal('航次列表')"
|
|
|
+ >
|
|
|
+ 导出航次列表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ v-auth="'MULTDOWNLOADSHIPTRACK'"
|
|
|
+ @click="showExportModal('航次跟踪')"
|
|
|
+ >
|
|
|
+ 导出航次跟踪
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="showExportModal('卸货记录')"
|
|
|
+ v-auth="'MULTDOWNLOADDISCHARGE'"
|
|
|
+ >
|
|
|
+ 导出卸货记录
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ v-auth="'DOWNLOADFYDI'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="downloadFYDI"
|
|
|
+ >
|
|
|
+ 下载FYDI指数
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-dialog
|
|
|
+ v-model="exportModalVisable"
|
|
|
+ :title="exportModalTitle"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="isLoadingZip = false"
|
|
|
+ width="200px"
|
|
|
>
|
|
|
- <div>
|
|
|
+ <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"
|
|
|
- size="medium"
|
|
|
- v-auth="'DOWNLOADVOYAGELIST'"
|
|
|
- @click="showExportModal('航次列表')"
|
|
|
+ @click="exportZip"
|
|
|
+ :loading="isLoadingZip"
|
|
|
>
|
|
|
- 导出航次列表
|
|
|
+ 导出{{ exportModalTitle }}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <div class="data">
|
|
|
+ <div class="df">
|
|
|
+ <div class="shu"></div>
|
|
|
+ <div class="right-title">数据统计</div>
|
|
|
+ </div>
|
|
|
+ <div class="df data-line">
|
|
|
+ <div class="icon">船</div>
|
|
|
<div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="medium"
|
|
|
- v-auth="'MULTDOWNLOADSHIPTRACK'"
|
|
|
- @click="showExportModal('航次跟踪')"
|
|
|
- >
|
|
|
- 导出航次跟踪
|
|
|
- </el-button>
|
|
|
+ <div class="data-title">总航次数</div>
|
|
|
+ <div class="df">
|
|
|
+ <div class="num">3205</div>
|
|
|
+ <div class="unit">次</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="df data-line">
|
|
|
+ <div class="icon">锚</div>
|
|
|
<div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="medium"
|
|
|
- @click="showExportModal('卸货记录')"
|
|
|
- v-auth="'MULTDOWNLOADDISCHARGE'"
|
|
|
- >
|
|
|
- 导出卸货记录
|
|
|
- </el-button>
|
|
|
+ <div class="data-title">总实际装载吨数</div>
|
|
|
+ <div class="df">
|
|
|
+ <div class="num">12303.33</div>
|
|
|
+ <div class="unit">吨</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="df data-line">
|
|
|
+ <div class="icon">卸货</div>
|
|
|
<div>
|
|
|
- <el-button
|
|
|
- v-auth="'DOWNLOADFYDI'"
|
|
|
- type="primary"
|
|
|
- size="medium"
|
|
|
- @click="downloadFYDI"
|
|
|
- >
|
|
|
- 下载FYDI指数
|
|
|
- </el-button>
|
|
|
+ <div class="data-title">总已完成卸货吨位</div>
|
|
|
+ <div class="df">
|
|
|
+ <div class="num">345233.2</div>
|
|
|
+ <div class="unit">吨</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</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
|
|
|
- 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 class="df data-line">
|
|
|
+ <div class="icon">剩余</div>
|
|
|
+ <div>
|
|
|
+ <div class="data-title">总剩余卸货吨位</div>
|
|
|
+ <div class="df">
|
|
|
+ <div class="num">328192.33</div>
|
|
|
+ <div class="unit">吨</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div></div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="exportZip"
|
|
|
- :loading="isLoadingZip"
|
|
|
- >
|
|
|
- 导出{{ exportModalTitle }}
|
|
|
- </el-button>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </div>
|
|
|
+ <div class="pie">
|
|
|
+ <div class="shu"></div>
|
|
|
+ <div class="right-title">卸货占比</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="df old" style="background: #f4f5f6">
|
|
|
+ <div>
|
|
|
+ <div class="right-top">
|
|
|
+ <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>
|
|
|
+ <div id="pie" class="card-5">
|
|
|
+ <div>饼图</div>
|
|
|
+ <div>卸货</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -642,9 +653,13 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.old {
|
|
|
+ position: fixed;
|
|
|
+ top: -2000px;
|
|
|
+}
|
|
|
.map-container {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100% - 94px);
|
|
|
}
|
|
|
|
|
|
.tabs {
|
|
|
@@ -683,63 +698,95 @@ onMounted(() => {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-.left-top {
|
|
|
- width: calc(100% - 400px);
|
|
|
- height: calc(100vh - 238px);
|
|
|
- position: relative;
|
|
|
+:deep() .el-dialog {
|
|
|
+ width: 800px;
|
|
|
}
|
|
|
|
|
|
-.right-top {
|
|
|
- width: 400px;
|
|
|
- height: calc(100vh - 238px);
|
|
|
- background: #fff;
|
|
|
+.window-title {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.window-title:hover {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.export {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 14px;
|
|
|
+ width: 90px;
|
|
|
+ height: 32px;
|
|
|
+ background: #008efe;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
text-align: center;
|
|
|
- color: #3992de;
|
|
|
}
|
|
|
|
|
|
-.left-bottom {
|
|
|
- width: calc(100% - 400px);
|
|
|
- height: 80px;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+.main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f4f5f6;
|
|
|
}
|
|
|
|
|
|
-.right-bottom {
|
|
|
- width: 400px;
|
|
|
- height: 80px;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
+.left {
|
|
|
+ width: calc(100% - 315px);
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-:deep() .el-dialog {
|
|
|
- width: 800px;
|
|
|
+.filter {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #353a42;
|
|
|
+ width: calc(100vw - 320px);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 36px;
|
|
|
}
|
|
|
-.cards {
|
|
|
- height: 10%;
|
|
|
- border-bottom: 1px solid grey;
|
|
|
+
|
|
|
+.ml24 {
|
|
|
+ margin-left: 24px;
|
|
|
}
|
|
|
|
|
|
-.cards > div:first-child {
|
|
|
- font-size: 1.8vh;
|
|
|
- padding-top: 4%;
|
|
|
- padding-bottom: 2%;
|
|
|
+.all {
|
|
|
+ width: 60px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ background: #008efe;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
-.cards > div:last-child {
|
|
|
- font-size: 1.5vh;
|
|
|
+.right {
|
|
|
+ width: 267px;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ margin-left: 26px;
|
|
|
}
|
|
|
|
|
|
-.card-5 {
|
|
|
- height: 50%;
|
|
|
+.data {
|
|
|
+ width: 267px;
|
|
|
+ height: 466px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
}
|
|
|
|
|
|
-.window-title {
|
|
|
- display: none;
|
|
|
+.pie {
|
|
|
+ width: 267px;
|
|
|
+ height: 385px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
-.window-title:hover {
|
|
|
- display: block;
|
|
|
+
|
|
|
+.icon {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ background: #008efe;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
</style>
|
