<template> <div> <a-row :gutter="24"> <div class="col-sm-2" style="padding:5px;"> <a class="menuItem" href="/wms/inventory/inventoryTransaction"> <div class="total_box ys01"> <h1>{{ s1 }}</h1> <p>今日库存交易量</p> </div> </a> </div> <div class="col-sm-2" style="padding:5px;"> <a class="menuItem" href="/wms/receipt/receiptHeader/900/0"> <div class="total_box ys02"> <h1>{{ s2 }}</h1> <p>今日入库量</p> </div> </a> </div> <div class="col-sm-2" style="padding:5px;"> <a class="menuItem" href="/wms/shipment/shipmentHeader"> <div class="total_box ys03"> <h1>{{ s3 }}</h1> <p>今日出库量</p> </div> </a> </div> <div class="col-sm-2" style="padding:5px;"> <a class="menuItem" href="/wms/inventory/inventoryHeader"> <div class="total_box ys04"> <h1>{{ s4 }}</h1> <p>库存总量</p> </div> </a> </div> <div class="col-sm-2" style="padding:5px;"> <a class="menuItem" href="/wms/inventory/inventoryMaterialSummary"> <div class="total_box ys05"> <h1>{{ s5 }}</h1> <p>库内物料品数</p> </div> </a> </div> <div class="col-sm-2" style="padding:5px;"> <a class="menuItem" href="/wms/task/taskHeader?InternalTaskType=100"> <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 } }) } } } </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>