yudao-dev/src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue

<template>
  <el-drawer
    title="发货进度"
    :visible.sync="centervisible"
    size="80%"
    class="deliveryLogDetail"
    @close='closeA'>
    <div class="box1">
      <div class="box_col">
        <div class="blodTip">订单名</div>
        <div class="lightTip">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</div>
      </div>
      <div class="box_col">
        <div class="blodTip">订单数量</div>
        <div class="lightTip">{{orderMsg.orderNum ? orderMsg.orderNum : '-'}}</div>
      </div>
      <div class="box_col">
        <div class="blodTip">装货数量</div>
        <div class="lightTip">{{orderMsg.num ? orderMsg.num : '-'}}</div>
      </div>
      <div class="box_col">
        <div class="blodTip">累积占比(%)</div>
        <div class="lightTip">{{orderMsg.rate ? orderMsg.rate : '-'}}</div>
      </div>
      <div class="box_col">
        <div class="blodTip">累积运输费用</div>
        <div class="lightTip">{{orderMsg.cost ? orderMsg.cost : '-'}}</div>
      </div>
    </div>
    <div class="box2">
      <div class="boxTitle">
        <span class="blueTitle"></span>
        <span>发货清单</span>
      </div>
      <el-tabs v-model="activeName" @tab-click="toggleTab">
        <el-tab-pane label="数据列表" name="dataList">
          <!-- 列表 -->
          <div v-if="activeName === 'dataList'">
            <base-table
              :page="queryParams.pageNo"
              :limit="queryParams.pageSize"
              :table-props="tableProps"
              :table-data="tableData"
              :max-height="tableH"
            >
              <method-btn
                v-if="tableBtn.length"
                slot="handleBtn"
                :width="150"
                label="操作"
                :method-list="tableBtn"
                @clickBtn="viewDetDetail"
              />
            </base-table>
            <pagination
              :page.sync="queryParams.pageNo"
              :limit.sync="queryParams.pageSize"
              :total="total"
              @pagination="getList"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="环形图" name="barChart">
          <div v-if="activeName === 'barChart'">
            <div 
              id="logDetPieBar"
              style="width: 100%"
              :style="{ height: chartHeight + 'px' }"
            ></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 详情抽屉 -->
    <el-drawer
      title="发货详情"
      size="60%"
      :append-to-body="true"
      :visible.sync="innerDrawer"
      @close='closeB'>
      <div class="box3">
        <el-row>
          <el-col :span='12'>
            <span class="title">订单名：</span>
            <span class="text">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</span>
          </el-col>
          <el-col :span='12'>
            <span class="title">发货单号：</span>
            <span class="text">{{logCode ? logCode : '-'}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="box4">
        <div class="boxTitle">
          <span class="blueTitle"></span>
          <span>详情</span>
        </div>
        <base-table
          :page="queryParams2.pageNo"
          :limit="queryParams2.pageSize"
          :table-props="tableProps2"
          :table-data="tableData2"
          :max-height="tableH2"
        />
        <pagination
          :page.sync="queryParams2.pageNo"
          :limit.sync="queryParams2.pageSize"
          :total="total2"
          @pagination="getList2"
        />
      </div>
    </el-drawer>
  </el-drawer>
</template>
<script>
import { deliveryLogPage, deliveryLogDetPage } from '@/api/base/delivery'
import { parseTime } from '@/utils/ruoyi'
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
const tableProps = [
  {
    prop: 'deliveryTime',
    label: '发货时间',
    filter: parseTime,
    minWidth: 150
  },
  {
    prop: 'code',
    label: '发货单号',
    showOverflowtooltip: true
  },
  {
    prop: 'orderNum',
    label: '订单数量'
  },
  {
    prop: 'num',
    label: '发货数量'
  },
  {
    prop: 'rate',
    label: '发货比列(%)'
  },
  {
    prop: 'principalCost',
    label: '运输费用'
  }
]
const tableProps2 = [
  {
    prop: 'createTime',
    label: '添加时间',
    filter: parseTime,
    minWidth: 150
  },
  {
    prop: 'deliveryCarCode',
    label: '装车单号',
    showOverflowtooltip: true
  },
  {
    prop: 'loadTime',
    label: '装车时间',
    filter: parseTime,
    minWidth: 150
  },
  {
    prop: 'productName',
    label: '装车产品',
    showOverflowtooltip: true
  },
  {
    prop: 'packagingSize',
    label: '装箱规格（片/箱）'
  },
  {
    prop: 'packagingNum',
    label: '箱数'
  },
  {
    prop: 'quantity',
    label: '装车总量'
  },
  {
    prop: 'productDate',
    label: '产品批次',
    showOverflowtooltip: true
  }
]
export default {
  name: 'DeliveryLogDetDetail',
  mixins: [resize],
  data() {
    return {
      centervisible: false,
      activeName: 'dataList',
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 100,
        orderId: ''
      },
      orderMsg: {},
      tableProps,
      tableData: [],
      total: 0,
      tableH: this.tableHeight(350),
      tableBtn: [
        this.$auth.hasPermi('base:group-team:update')
          ? {
              type: 'detDetail',
              btnName: '查看发货详情'
            }
          : undefined
      ].filter((v) => v),
      innerDrawer: false,
      // 详情
      queryParams2: {
        pageNo: 1,
        pageSize: 20,
        logId: ''
      },
      tableProps2,
      tableData2: [],
      tableH2: this.tableHeight(275),
      total2: 0,
      logCode: '',
      // 图
      chartDom: '',
      chart: '',
      chartHeight: this.tableHeight(300)
    }
  },
  // watch: {
  //   chartData: function () {
  //     this.getChart()
  //   }
  // },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(350)
    })
    window.addEventListener('resize', () => {
      this.tableH2 = this.tableHeight(275)
    })
    window.addEventListener('resize', () => {
      this.chartHeight = this.tableHeight(300)
    })
  },
  methods: {
    init(params) {
      this.queryParams.orderId = params.orderId
      this.orderMsg = params
      this.centervisible = true
      this.getList()
    },
    getList() {
      deliveryLogPage({...this.queryParams}).then(res => {
        this.tableData = res.data.list || []
        this.taotal = res.data.total || 0
      })
    },
    toggleTab() {
      if (this.activeName  === 'barChart') {
        this.$nextTick(() => {
          this.getBar()
        })
      }
    },
    getBar() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
      this.chartDom = document.getElementById('logDetPieBar')
      this.chart = echarts.init(this.chartDom)
      let seriesData = []
      let sumData = 0
      this.tableData && this.tableData.map(item =>{
        let obj = {}
        obj.value = item.rate
        obj.name = item.name
        seriesData.push(obj)
        sumData+=item.rate
      })
      if (sumData < 100) {
        let obj = {}
        obj.value = 100 - sumData
        obj.name = "未发货"
        seriesData.push(obj)
      }
      var option = {
        color: ['#B0EB42', '#FF9747', '#FF6860', '#7164FF', '#288AFF', '#63BDFF', '#73DE93', '#FFCE6A'],
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${params.color};"></span>`
            return `<span>
                <span style="color:rgba(0,0,0,0.85);">${str}${params.name}</span>
                <span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${params.percent}</span>
              </span>`
          }
        },
        legend: {
          bottom: '5%',
          left: 'center',
          icon: 'rect',
          itemHeight: 8,
          itemWidth: 8
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              },
              scale: true ,
              scaleSize: 20 ,
            },
            labelLine: {
              show: false
            },
            data: seriesData
          }
        ]
      };

      option && this.chart.setOption(option);
    },
    viewDetDetail(val) {
      this.logCode = val.data.code
      this.innerDrawer = true
      this.queryParams2.logId = val.data.id
      this.getList2()
    },
    closeA() {
      // 清空数据
      this.activeName = 'dataList'
      this.queryParams.orderId = ''
      this.tableData = []
      this.orderMsg = {}
      this.innerDrawer = false
    },
    getList2() {
      deliveryLogDetPage({...this.queryParams2}).then(res => {
        this.tableData2 = res.data.list || []
        this.total2 = res.data.total || 0
      })
    },
    closeB() {
      this.logCode = ''
      this.queryParams2.pageNo = 1
      this.queryParams2.pageSize = 20
      this.queryParams2.logId = ''
      this.tableData2 = []
      this.total2 = 0
    }
  }
}
</script>
<style scoped lang='scss'>
.box1 {
  height: 56px;
  .box_col {
    display: inline-block;
    width: 20%;
    padding: 8px 8px 8px 40px;
    .blodTip {
      height: 16px;
      font-weight: 600;
      color: rgba(0,0,0,0.85);
      margin-bottom: 8px;
    }
    .lightTip {
      height: 16px;
      font-weight: 400;
      color: rgba(102,102,102,0.75);
    }
  }
}
.box2 {
    padding:32px 32px 30px 30px;
    height: calc(100vh - 150px);
}
.boxTitle {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  margin:0 10px 10px 0;
}
.blueTitle {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: #0B58FF;
  border-radius: 1px;
  margin-right: 8px;
  vertical-align: bottom;
}
.box3 {
  padding: 8px 8px 8px 40px;
  .title {
    height: 16px;
    font-weight: 600;
    color: rgba(0,0,0,0.85);
  }
  .text {
    height: 16px;
    font-weight: 400;
    color: rgba(102,102,102,0.75);
  }
}
.box4 {
  padding:32px 32px 30px 30px;
  height: calc(100vh - 125px);
}
</style>
<style lang='scss'>
.deliveryLogDetail {
  .el-tabs__nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    /* z-index: 1; */
  }
  .el-tabs__nav-wrap::after {
    width: 0;
  }
  .el-tabs__item {
    padding: 0 10px;
  }
  .el-tabs__item:hover {
    color: rgba(0, 0, 0, 0.85);
  }
  .el-tabs__item.is-active {
    color: rgba(0, 0, 0, 0.85);
  }
  .el-tabs__item {
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>