wms / wms4_changqingjingxia · 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' }"
        >
          <template #extra>
            <a-select
              v-model="userdef1"
              style="width: 120px"
              @change="onTimeChange"
            >
              <a-select-option
                v-for="item in timeOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </template>

          <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",
      userdef1: 'today',
      timeOptions: [
        { label: '今天', value: 'today' },
        { label: '近7天', value: '7d' },
        { label: '近30天', value: '30d' },
        { label: '近半年', value: '180d' }
      ]
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      this.loadInventoryStatus()

      let chart1 = this.$echarts.init(document.getElementById('chart1'))
      let chart2 = this.$echarts.init(document.getElementById('chart2'))
      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))
      })

      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
        }
      })
    },
    onTimeChange() {
      this.loadInventoryStatus()
    },

    loadInventoryStatus() {
      // inventoryStatus(this.userdef1).then(res => {
      //   if (res.success) chart4.setOption(JSON.parse(res.message))
      // })
      let chart3 = this.$echarts.init(document.getElementById('chart3'))

      const formData = new FormData()
      formData.append('userdef1', this.userdef1)
      this.$http.post('/sys/home/inventoryStatus', formData).then(res => {
        chart3.clear()
        if (res.success) {
          chart3.setOption(JSON.parse(res.message))
          chart3.resize()
        }
      })
    },
    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>