wms / wms4_hunanhongwang · Files

<template>
  <div>
    <a-row :gutter="24">
      <div class="col-sm-2_5" style="padding:5px;">
        <a class="menuItem">
          <div class="total_box ys01">
            <h1>{{ charInfo.bllCount }}</h1>
            <p>今日库存交易量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2_5" style="padding:5px;">
        <a class="menuItem"  @click="test('InventoryTransactionReceipt')">
          <div class="total_box ys02">
            <h1>{{ charInfo.receiptTotal }}</h1>
            <p>今日入库量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2_5" style="padding:5px;">
        <a class="menuItem" @click="test('InventoryTransactionShipment')">
          <div class="total_box ys03">
            <h1>{{ charInfo.shipmentTotal }}</h1>
            <p>今日出库量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2_5" style="padding:5px;">
        <a class="menuItem" @click="test('InventoryTransactionCount')">
          <div class="total_box ys04">
            <h1>{{ charInfo.inventoryTotal }}</h1>
            <p>库存总量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2_5" style="padding:5px;">
        <a class="menuItem" @click="test('UncompletedTask')">
          <div class="total_box ys06">
            <h1>{{ charInfo.taskUncompletedTotal }}</h1>
            <p>待执行任务数</p>
          </div>
        </a>
      </div>

    </a-row>


    <a-row :gutter="24">
      <a-col :span="12">
        <a-card  :bordered="false" title="历史每日收发货量" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="19">
              <div id="chart1" class="flot-chart1">
                这里放图表
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card  :bordered="false" title="库位利用率" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="19">
              <div id="chart2" class="flot-chart1">
                这里放图表
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>


    <a-row :gutter="24">
      <a-col :span="12">
        <a-card  :bordered="false" title="在线库存状态" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="19">
              <div id="chart3" class="flot-chart1">
                这里放图表
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card  :bordered="false" title="库存概况" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="19">
              <div id="chart4" class="flot-chart1">
                这里放图表
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>


  </div>
</template>

<script language="javascript"  type="text/javascript">
import {inventoryOverview, deliveringAmount, inventoryUtilization, inventoryStatus, getCommonData} from '@/api/api'
import ACol from 'ant-design-vue/lib/grid/Col'
import ChartCard from '@comp/ChartCard.vue'
import moment from 'moment'

export default {
  name: 'Echartdemo',
  components: { ChartCard, ACol },
  data() {
    return {
      loading: true,
      charInfo: {
        bllCount: {
          type: Number,
          default: 0
        },
        receiptTotal: {
          type: Number,
          default: 0
        },
        shipmentTotal: {
          type: Number,
          default: 0
        },
        inventoryTotal: {
          type: Number,
          default: 0
        },
        materialCount: {
          type: Number,
          default: 0
        },
        taskUncompletedTotal: {
          type: Number,
          default: 0
        },
      },
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    test(pageName){
      let url;
      let queryParam = {};
      if (pageName == "workorder"){
        queryParam.createTime_begin = moment().day();
        queryParam.createTime_end = moment().day();
        url = "/workorder/workorder"
      }
      if (pageName == "InventoryTransactionShipment"){
        queryParam.createTime_begin = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
        queryParam.createTime_end = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
        queryParam.type = 20;
        url = "/system/inventory/InventoryTransactionList";
      }
      if (pageName == "InventoryTransactionReceipt"){
        queryParam.createTime_begin = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
        queryParam.createTime_end = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
        queryParam.type = 10;
        url = "/system/inventory/InventoryTransactionList";
      }
      if (pageName == "InventoryTransactionCount"){
        url = "/system/inventory/SimpleInventoryDetailList";
      }
      if (pageName == "UncompletedTask"){
        url = "/system/task/AllTaskHeaderList";
      }
      this.$router.replace({ path:  url,query: queryParam});
    },
    drawLine() {
      let chart1 = this.$echarts.init(document.getElementById('chart1'))
      let chart2 = this.$echarts.init(document.getElementById('chart2'))
      let chart3 = this.$echarts.init(document.getElementById('chart3'))
      let chart4 = this.$echarts.init(document.getElementById('chart4'))

      deliveringAmount().then((res) => {
        if (res.success) {
          chart1.setOption(JSON.parse(res.message));
        }
      })
      inventoryUtilization().then((res) => {
        if (res.success) {
          chart2.setOption(JSON.parse(res.message));
        }
      })
      inventoryStatus().then((res) => {
        if (res.success) {
          chart3.setOption(JSON.parse(res.message));
        }
      })
      inventoryOverview().then((res) => {
        if (res.success) {
          chart4.setOption(JSON.parse(res.message));
        }
      })
      getCommonData().then((res) => {
        if (res.success) {
          Object.assign(this.charInfo,res.result)
        }
      })

    }
  }
}
</script>

<style scoped>
@media (min-width: 768px) {
  .col-sm-2 {
    float: left
  }

  .col-sm-2 {
    width: 16.66666667%
  }

}

.panel-heading h1, .panel-heading h2 {
  margin-bottom: 5px
}

.ibox-content h1, .ibox-content h2, .ibox-content h3, .ibox-content h4, .ibox-content h5, .ibox-title h1, .ibox-title h2, .ibox-title h3, .ibox-title h4, .ibox-title h5 {
  margin-top: 5px
}

h1 {
  font-size: 30px;
  color: #fff;
}

.total_box {
  text-align: center;
  color: #fff;
  padding: 8px 0 10px 0;
}

.total_box:hover {
  opacity: 0.8;
}

.ys01 {
  background: #1ab394;
}

.ys02 {
  background: #23c6c8;
}

.ys03 {
  background: #1c84c6;
}

.ys04 {
  background: #8d95c5;
}

.ys05 {
  background: #e59aa6;
}

.ys06 {
  background: #f8ac59;
}

.flot-chart1 {
  height: 290px;
}
</style>