web-trackMangaer/src/views/dashboard/index.vue

/** // author：zhangb // time:2022-10-19 // desc:可视化组件图标部分拆解 */
<template>
  <div class="dashboard">
    <!-- 顶部卡片汇总 -->
    <div class="top_card_border">
      <card-box
        :startCor="'#fe8e82'"
        :endCor="'#ff6fb7'"
        @click="router.push('/trackManager/waybillManager')"
        :boxWidth="'19%'"
        :numValue="waybillData.length"
        :mainTitle="'运单数量'"
        :numUnit="'条'"
      ></card-box>

      <card-box
        :boxWidth="'19%'"
        @click="router.push('/trackManager/deviceAbnormality')"
        :numValue="exceptionWaybillStatistics.device"
        :mainTitle="'设备异常'"
        :numUnit="'条'"
      ></card-box>
      <card-box
        :startCor="'#f382ee'"
        :endCor="'#7d7cfe'"
        :boxWidth="'19%'"
        @click="router.push('/trackManager/loadDeviation')"
        :numValue="exceptionWaybillStatistics.loading"
        :mainTitle="'装货地异常'"
        :numUnit="'条'"
      ></card-box>
      <card-box
        :startCor="'#40ecb0'"
        :endCor="'#0eb4e8'"
        @click="router.push('/trackManager/abnormalWaybill')"
        :boxWidth="'19%'"
        :numValue="exceptionWaybillStatistics.unload"
        :mainTitle="'卸货地异常'"
        :numUnit="'条'"
      ></card-box>
      <card-box
        :startCor="'#fe8e82'"
        :endCor="'#ff6fb7'"
        :boxWidth="'19%'"
        :numValue="exceptionRate"
        :mainTitle="'运单运输异常率'"
        :numUnit="'%'"
      ></card-box>
    </div>
    <div class="mid_content">
      <!-- 核心可视化地图内容 -->
      <div class="map_style">
        <map-chart :heightStyle="'height:800px;'"></map-chart>
      </div>
      <div class="right_step">
        <div class="title">运单数据排行榜</div>
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column label="供应商" prop="supplierName" width=""></el-table-column>
          <el-table-column label="运单数" prop="waybillCount" width=""></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { tms } from '@/request/api'
import cardBox from './components/cardBox.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import mapChart from './components/mapChart.vue'
const router = useRouter()
// 异常运单统计
const exceptionWaybillStatistics = ref({
  device: 0,
  loading: 0,
  unload: 0,
}) // 异常运单统计
const getData = async () => {
  const response = await tms.queryExceptionWaybillStatistics()
  if (response.code === 101) {
    exceptionWaybillStatistics.value.device = response.data.find(item => item.type === 'DEVICE').count
    exceptionWaybillStatistics.value.loading = response.data.find(item => item.type === 'LOADING').count
    exceptionWaybillStatistics.value.unload = response.data.find(item => item.type === 'UNLOAD').count
  }
}

const waybillData = ref([]) // 运单数据
// 获取运单发货地运力地图数据
const getWaybillData = async () => {
  const res = await tms.queryAllWaybill()
  if (res.code === 101) {
    waybillData.value = res.data
  }
}

const tableData = ref([]) // 运单数据排行
// 查看供应商数据排行
const getSupplierData = async () => {
  const res = await tms.querySupplierRanking()
  if (res.code === 101) {
    console.log(res.data, '数据排行')
    tableData.value = res.data
  }
}

const exceptionRate = ref(0) // 运单号
// 订单运输异常率
const getExceptionRate = async () => {
  const res = await tms.queryExceptionRate()
  if (res.code === 101) {
    console.log(res.data, '订单运输异常率')
    exceptionRate.value = res.data.exceptionWaybillCount / res.data.totalWaybillCount * 100
  }
}

onMounted(() => {
  getData()
  getWaybillData()
  getSupplierData()
  getExceptionRate()
})
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 1em;
  width: 100%;
  .top_card_border {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .mid_content {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    .let_step {
      // border: 1px solid #000;
      display: flex;
      justify-content: space-between;
      width: 55%;
      height: calc(35vh);
      flex-wrap: wrap;
    }
    .right_step {
      text-align: center;
      width: 25%;
      padding-top: 30px;
      padding-left: 10px;
      .title {
        font-size: 20px;
        font-weight: 600;
        color: #000;
        margin-bottom: 20px;
      }
    }
  }
  .map_style {
    width: 75%;
    border: 1px solid #309ef3;
    margin-top: 30px;
    // height: calc(100vh * 0.7);
  }
}
</style>