wms / wms4_wuhe · Files

<template>
  <div>
    <a-row :gutter="24">

      <div class="col-sm-2" style="padding:5px;">
        <a class="menuItem" @click="clickInventoryTransactionList()">

          <div class="total_box ys01">
            <h1>{{ s1 }}</h1>
            <p>今日库存交易量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2" style="padding:5px;">
        <a class="menuItem" @click="clickInventoryTransactionList()">
          <div class="total_box ys02">
            <h1>{{ s2 }}</h1>
            <p>今日入库量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2" style="padding:5px;">
        <a class="menuItem" @click="clickInventoryTransactionList()">
          <div class="total_box ys03">
            <h1>{{ s3 }}</h1>
            <p>今日出库量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2" style="padding:5px;">
        <a class="menuItem" @click="clickInventoryMaterialSummaryList()">
          <div class="total_box ys04">
            <h1>{{ s4 }}</h1>
            <p>库存总量</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2" style="padding:5px;">
        <a class="menuItem" @click="clickInventoryMaterialSummaryList()">
          <div class="total_box ys05">
            <h1>{{ s5 }}</h1>
            <p>库内物料品数</p>
          </div>
        </a>
      </div>
      <div class="col-sm-2" style="padding:5px;">
        <a class="menuItem" @click="clickAllTasks()" >
          <div class="total_box ys06">
            <h1>{{ s6 }}</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'

export default {
  name: 'Echartdemo',
  data() {
    return {
      msg: 'EChart demo',
      s1: "0",
      s2: "0",
      s3: "0",
      s4: "0",
      s5: "0",
      s6: "0"
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    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) {
          this.s1 = res.result.bllCount
          this.s2 = res.result.receiptTotal
          this.s3 = res.result.shipmentTotal
          this.s4 = res.result.inventoryTotal
          this.s5 = res.result.materialCount
          this.s6 = res.result.taskUncompletedTotal
        }
      })

    },
    clickAllTasks() {
      this.$router.push({path: '/system/task/AllTaskHeaderList'})
    },
    clickInventoryTransactionList() {
      this.$router.push({path: '/system/inventory/InventoryTransactionList'})
    },
    clickInventoryMaterialSummaryList() {
      this.$router.push({path: '/system/inventory/InventoryMaterialSummaryList'})
    }
  }
}
</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>