Agency_WebApp/src/views/index/Index.vue

<template>
  <div v-loading="isLoading" style="height: 100%">
    <div class="df main">
      <div class="left">
        <AMapContainer
          ref="mapRef"
          class="map-container"
          :ships="ships"
          :showLabel="true"
          :handleAble="true"
        ></AMapContainer>
        <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>
        </div>
        <div class="df aic filter">
          <div class="mr4">装货港</div>
          <el-select
            style="width: 90px"
            v-model="postData.loadPortId"
            placeholder="装货港"
            size="mini"
            @change="getIndexData(1)"
            filterable
            clearable
          >
            <el-option
              v-for="item in loadPortOptions"
              :key="item"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
          <div class="mr4 mr10">卸货港</div>
          <el-select
            style="width: 90px"
            v-model="postData.discPortId"
            placeholder="卸货港"
            size="mini"
            @change="getIndexData(1)"
            filterable
            clearable
          >
            <el-option
              v-for="item in discPortOptions"
              :key="item"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
          <div class="mr4 mr10">到港状态</div>
          <el-select
            style="width: 90px"
            v-model="postData.isArrived"
            placeholder="到港状态"
            size="mini"
            @change="getIndexData(1)"
          >
            <el-option label="已到港" :value="0" />
            <el-option label="未到港" :value="1" />
          </el-select>
          <div class="mr4 mr10">航次状态</div>
          <el-select
            style="width: 90px"
            v-model="postData.abnormalStatus"
            placeholder="航次状态"
            size="mini"
            @change="getIndexData(1)"
          >
            <el-option label="正常" :value="0" />
            <el-option label="异常" :value="1" />
          </el-select>
          <div class="mr4 mr10">货种</div>
          <el-select
            style="width: 90px"
            v-model="postData.cargoId"
            placeholder="货种"
            size="mini"
            @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 mr10">全部</div>
        </div>
      </div>
      <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 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 class="data">
          <div class="df aic">
            <div class="shu"></div>
            <div class="right-title">数据统计</div>
          </div>
          <div class="df data-line">
            <img class="icon" src="../../assets/ship.png" />
            <div class="data-text">
              <div class="data-title">总航次数</div>
              <div class="df aib">
                <div class="num">{{ indexData.totalVoyageNum }}</div>
                <div class="unit">次</div>
              </div>
            </div>
          </div>
          <div class="df data-line">
            <img class="icon" src="../../assets/rubber.png" />
            <div class="data-text">
              <div class="data-title">总实际装载吨数</div>
              <div class="df aib">
                <div class="num">{{ indexData.totalLoadTons }}</div>
                <div class="unit">吨</div>
              </div>
            </div>
          </div>
          <div class="df data-line">
            <img class="icon" src="../../assets/unload.png" />
            <div class="data-text">
              <div class="data-title">总已完成卸货吨位</div>
              <div class="df aib">
                <div class="num">{{ indexData.finshDiscTons }}</div>
                <div class="unit">吨</div>
              </div>
            </div>
          </div>
          <div class="df data-line">
            <img class="icon" src="../../assets/chain.png" />
            <div class="data-text">
              <div class="data-title">总剩余卸货吨位</div>
              <div class="df aib">
                <div class="num">{{ indexData.unfinshDiscTons }}</div>
                <div class="unit">吨</div>
              </div>
            </div>
          </div>
        </div>
        <div class="pie">
          <div class="df aic">
            <div class="shu"></div>
            <div class="right-title">卸货占比</div>
          </div>
          <div id="pie" class="card-5">
            <div>饼图</div>
            <div>卸货</div>
          </div>
          <div class="df aic jcc mt10">
            <div class="pie-point"></div>
            <div class="pie-text mr20">已卸货吨位</div>
            <div class="pie-point" style="background: #58daea"></div>
            <div class="pie-text">剩余卸货吨位</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  inject,
  nextTick,
  onUnmounted,
} from "vue";
import { ElNotification } from "element-plus";
import store from "../../store";
import router from "../../router";

import md5 from "md5";
import api from "../../apis/fetch";
import downloadBlobFile from "../../utils/downloadBlobFile";
import url from "../../apis/config";
let map = ref({});
let cargoOwnerId = localStorage.userId;
let echarts = inject("ec");

let status = ref(3);
const mapRef = ref(null);
function changeVoyageType(s) {
  status.value = s;
  postData.value = {
    loadPortId: "",
    discPortId: "",
    isArrived: "",
    abnormalStatus: "",
    cargoId: "",
  };
  mapRef.value.clearMap();
  getIndexSelect();
  getIndexData();
}

let postData = ref({
  status: 0,
  loadPortId: "",
  discPortId: "",
  isArrived: "",
  abnormalStatus: "",
  cargoId: "",
});
let indexData = ref({
  finshDiscTons: "",
  mapPoints: [],
  totalLoadTons: "",
  totalVoyageNum: "",
  unfinshDiscTons: "",
});
let isLoading = ref(false);
const ships = ref([]);
async function getIndexData(type) {
  isLoading.value = true;
  postData.value.status = status.value;
  try {
    let res = await api.getIndexData({
      ...postData.value,
    });
    isLoading.value = false;
    if (res.data.status == 0) {
      indexData.value = res.data.result;
      ships.value = indexData.value.mapPoints;
      if (type == "init") {
        drawPie("init");
      } else {
        drawPie();
      }
      await nextTick();
      mapRef.value.drawMarkers();
    } else {
      indexData.value = {
        finshDiscTons: 0,
        mapPoints: [],
        totalLoadTons: 0,
        totalVoyageNum: 0,
        unfinshDiscTons: 0,
      };
      if (type == "init") {
        drawPie("init");
      } else {
        drawPie();
        mapRef.value.drawMarkers();
      }
    }
  } catch (error) {
    console.log(error);
    isLoading.value = false;
  }
}
let chartDom = ref({});
let myChart = ref({});

function drawPie(type) {
  if (!myChart.value.id) {
    chartDom.value = document.getElementById("pie");
    myChart.value = echarts.init(chartDom.value);
  }
  if (
    indexData.value.finshDiscTons == 0 &&
    indexData.value.unfinshDiscTons == 0
  ) {
    myChart.value.clear();
    return;
  }
  let option;
  option = {
    grid: {
      bottom: 500,
    },
    tooltip: {
      trigger: "item",
    },
    color: ["#0A6EFA", "#58DAEA"],
    series: [
      {
        center: ["50%", "50%"],
        type: "pie",
        radius: ["60%", "85%"],
        data: [
          { value: indexData.value.finshDiscTons, name: "已卸货吨位" },
          { value: indexData.value.unfinshDiscTons, name: "剩余卸货吨位" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        label: {
          show: true,
          position: "inner", // 数值显示在内部
          formatter: "{d}%", // 格式化数值百分比输出
        },
      },
    ],
  };
  myChart.value.setOption(option);
}

let portOptions = ref([]);
async function getPortSelect() {
  if (portOptions.value.length) return;
  let res = await api.getCol({
    term: "",
  });
  portOptions.value = res.data.result;
}

let loadPortOptions = ref([]);
let discPortOptions = ref([]);

let cargoOptions = ref([]);
async function getCargoSelect() {
  if (cargoOptions.value.length) return;
  let res = await api.getCargoSelect({
    status: 2,
    term: "",
  });
  cargoOptions.value = res.data.result;
}

async function downloadFYDI() {
  let res0 = await api.getFYFIDownloadUrl({
    loginAccountId: localStorage.loginAccountId,
  });

  if (res0.data.result == 1) {
    ElNotification({
      type: "info",
      title: "更新中",
    });
  } else {
    let url = res0.data.result;
    let a = document.createElement("a");
    a.setAttribute("href", url);
    a.click();
  }
}

let exportModalVisable = ref(false);
let exportModalTitle = ref("");
let currentMonth = ref("");

function showExportModal(type) {
  exportModalVisable.value = true;
  exportModalTitle.value = type;
}

let isLoadingZip = ref(false);

async function exportZip() {
  if (!currentMonth.value && exportModalTitle.value != "航次列表") return;

  isLoadingZip.value = true;
  let path = "";
  let type = "";
  let postData = {
    loginAccountId: localStorage.loginAccountId,
  };
  let title = "";
  switch (exportModalTitle.value) {
    case "航次列表": {
      if (localStorage.userId == 7) {
        path = "/voyage/exportVoyageReportExcel";
        postData.loginAccountId = localStorage.loginAccountId;
        postData.date = currentMonth.value;
      } else {
        path = "/voyage/exportListExcel";
        let arr = [];
        for (let i of tableData.value) {
          arr.push(i.id);
        }
        postData.voyageIds = arr.join(",");
      }
      type =
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
      title = `${exportModalTitle.value}`;
      break;
    }
    case "航次跟踪": {
      path = "/voyage/exportMultExcel";
      type = "application/zip";
      postData.date = currentMonth.value;
      title = `${exportModalTitle.value}${currentMonth.value}`;

      break;
    }
    case "卸货记录": {
      path = "/voyage/exportMultDischargeExcel";
      type = "application/zip";
      postData.date = currentMonth.value;
      title = `${exportModalTitle.value}${currentMonth.value}`;
      break;
    }
  }
  try {
    let res = await downloadBlobFile(
      `${url.baseurl}${path}`,
      postData,
      title,
      "post",
      type
    );
    if (res.status == 0) {
      ElNotification({
        title: "导出成功!",
        type: "success",
      });
    } else {
      ElNotification({
        title: "暂无数据",
      });
    }
  } catch (error) {
    ElNotification({
      title: "暂无数据",
    });
  } finally {
    isLoadingZip.value = false;
    currentMonth.value = "";
    exportModalVisable.value = false;
  }
}

function resetFilter() {
  postData.value = {
    loadPortId: "",
    discPortId: "",
    isArrived: "",
    abnormalStatus: "",
    cargoId: "",
  };
  getIndexData();
}

async function getIndexSelect() {
  let res = await api.getIndexSelect({
    status: status.value,
  });
  if (res.data.status == 0) {
    loadPortOptions.value = res.data.result.loadPortSelect;
    discPortOptions.value = res.data.result.discPortSelect;
    cargoOptions.value = res.data.result.cargoSelect;
  } else {
    loadPortOptions.value = [];
    discPortOptions.value = [];
    cargoOptions.value = [];
  }
}

// router.beforeEach(() => {
//   try {
//     myChart.value.dispose();
//   } catch (error) {}
// });

onUnmounted(() => {
  echarts.dispose(myChart.value); // 在组件销毁前销毁 ECharts 实例
});
onMounted(() => {
  getIndexData("init");
  getIndexSelect();
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: calc(100% - 94px);
}

.tabs {
  position: absolute;
  top: 20px;
  left: 25px;
}

.radio-btns {
  height: 30px;
  width: 60px;
  border: 1px solid #008efe;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  cursor: pointer;
  background: #fff;
}

.left-radius {
  /* border-top-left-radius: 15px;
    border-bottom-left-radius: 15px; */
  width: 80px;
}

.right-radius {
  /* border-top-right-radius: 15px; */
  /* border-bottom-right-radius: 15px; */
  width: 80px;
}
.currentbtn {
  background: #008efe;
  color: #fff;
}

:deep() .el-dialog {
  width: 800px;
}

.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;
}

.main {
  width: 100%;
  height: 100%;
  background: #f4f5f6;
}

.left {
  width: calc(100% - 315px);
  position: relative;
}

.filter {
  font-size: 12px;
  color: #353a42;
  width: calc(100vw - 320px);
  flex-wrap: wrap;
  margin-top: 36px;
}

.mr10 {
  margin-left: 14px;
}

.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;
}

.right {
  width: 267px;
  border-radius: 4px;
  height: calc(100% - 30px);
  margin-left: 26px;
  overflow-y: auto;
  overflow-x: clip;
}

.data {
  width: 267px;
  background: #ffffff;
  border-radius: 4px;
  margin-top: 12px;
  margin-bottom: 18px;
  padding-top: 16px;
  padding-left: 24px;
  padding-bottom: 20px;
  height: calc(50vh - 160px);
  min-height: 356px;
}

.pie {
  width: 267px;
  background: #ffffff;
  border-radius: 4px;
  padding-top: 24px;
  padding-left: 20px;
  height: calc(50vh - 206px);
  min-height: 260px;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  margin-right: 16px;
}

.data-line {
  align-items: center;
  width: 219px;
  border-bottom: 1px solid rgba(216, 216, 216, 0.24);
  padding: 12px 0;
}

.shu {
  width: 3px;
  height: 16px;
  background: #008efe;
  margin-right: 16px;
}

.right-title {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.data-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #616975;
}

.num {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 5px;
}

.unit {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353a42;
}

#pie {
  width: 220px;
  height: 200px;
  margin: 0 auto;
}

/* :deep().amap-marker-label {
    top: -22px;
    left: 41px;
    color: #fff !important;
    width: 74px;
    height: 28px;
    line-height: 22px;
    background: #212029;
    border: none;
    text-align: center;
    font-size: 12px !important;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  } */

.pie-point {
  width: 6px;
  height: 6px;
  background: #0a6efa;
  border-radius: 30%;
  margin-right: 6px;
}

.pie-text {
  height: 12px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #7d7d7d;
  line-height: 12px;
}

.aib {
  align-items: baseline;
}

.mr4 {
  margin-right: 4px;
}
</style>