tire-platform-ui/src/views/wel/home/landTransportation/components/sales-reached.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div class="title">
        <span>
          今日业务总量
        </span>
        <span>
          <i
              class="el-icon-refresh-right"
              style="cursor: pointer;font-size:20px"
              @click="refresh"
          ></i>
        </span>
      </div>
      <div class="content" v-loading="loading">
        <div style="width: 100%;height: 300px;display: flex;justify-content: space-around;flex-wrap: wrap">
          <div id="totalContainer" style="width: 26%;height: 210px;"></div>
          <div id="totalBulkCargo" style="width: 26%;height: 210px;"></div>
          <div id="specialTotal" style="width: 26%;height: 210px;"></div>
<!--          <div id="totalContainerTwo" style="width: 26%;height: 210px;"></div>-->
<!--          <div id="totalBulkCargoTwo" style="width: 26%;height: 210px;"></div>-->
<!--          <div id="specialTotalTwo" style="width: 26%;height: 210px;"></div>-->
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {bizCount} from "@/api/wel";

export default {
  name: "basicContainer",
  data() {
    return {
      loading: false,
      tradeType: null,
      tableData: []
    };
  },
  created() {
    this.getSysType();
  },
  mounted() {
    this.getSysType();
  },
  methods: {
    //点击获取图表数据
    handleMousedown(params){
      this.$emit('handleMousedown',params.data)
    },
    //箱分布图表
    rankingTwo(id, name, data) {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById(id));
      // 绘制图表
      myChart.setOption(
          {
            title: {
              text: name,
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: 'bottom'
            },
            series: [
              {
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
      );
      myChart.on("click", this.handleMousedown);
    },
    init() {
      this.getSysType();
    },
    getSysType() {
      this.loading = true
      bizCount({mold:1}).then(res=>{
        this.rankingTwo('totalContainer', '集装箱:'+res.data.data.flow.all, res.data.data.flow.list)
        // this.rankingTwo('totalContainerTwo', '集装箱总量:'+res.data.data.dept.all, res.data.data.dept.list)
      })
      bizCount({mold:2}).then(res=>{
        this.rankingTwo('totalBulkCargo', '散货:'+res.data.data.flow.all,  res.data.data.flow.list)
        // this.rankingTwo('totalBulkCargoTwo', '散货总量:'+res.data.data.dept.all, res.data.data.dept.list)
      })
      bizCount({mold:3}).then(res=>{
        this.rankingTwo('specialTotal', '特种车辆:'+res.data.data.flow.all,res.data.data.flow.list)
        // this.rankingTwo('specialTotalTwo', '特种车辆总量:'+res.data.data.dept.all,res.data.data.dept.list)
      })
      this.loading = false
    },
    //刷新按钮
    refresh() {
      this.init();
    },
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;
  }
}

.content {
  display: flex;

  &_item {
    margin-top: 20px;

    .divider {
      display: block;
      height: 0px;
      width: 12vw;
      border-top: 1px dashed #dcdfe6;
    }

    &_num {
      font-size: 18px;
      font-weight: 600;
    }

    &_text {
      color: #909399;
    }
  }
}
</style>