| | |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | <div style="width: 100%;height: 38.33%;"> |
| | | <div style="width: 100%;height: 40%;"> |
| | | <div class="layui-card-header"> |
| | | <img src="../../img/console/xiexian.png" style="height: 20px;"> |
| | | 库存物料类型分布 |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div style="width: 100%;height: 38.33%;"> |
| | | <div style="width: 100%;margin-top: 15%;height: 50%;"> |
| | | <div class="layui-card-header"> |
| | | <img src="../../img/console/xiexian.png" style="height: 20px;"> |
| | | 库存质量状态分布 |
| | | </div> |
| | | <div class="layui-card-body" style="margin-top: 10%;padding: 0;height: 90%;"> |
| | | <div class="layui-card-body" style="margin-top: 5%;height: 90%;"> |
| | | <div id="yuanOrder" |
| | | style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;"> |
| | | </div> |
| | |
| | | <!-- 右 --> |
| | | <div class="layui-col-md4" style="height: 100%;margin-top: 10px;"> |
| | | <div class="layui-card" style="height: 100%;border-radius: 15px;box-shadow: 0px 0px 10px 1px #a4a3a3;"> |
| | | <div style="width: 100%;height: 33.33%;"> |
| | | <div style="width: 100%;height: 45%;"> |
| | | <div class="layui-card-header"> |
| | | <img src="../../img/console/xiexian.png" style="height: 20px;"> |
| | | 近一月热度物料 |
| | | </div> |
| | | <div class="layui-card-body" style="padding: 0;height: 90%;width: 90%;margin-left: 5%;"> |
| | | <div class="layui-card-body" style="height: 90%;width: 90%;margin-left: 5%;"> |
| | | <table id="LAY-app-content-list" lay-filter="LAY-app-content-list" border="0" |
| | | cellpadding="0" cellspacing="0"></table> |
| | | </div> |
| | | </div> |
| | | <div style="width: 100%;height: 33.33%;"> |
| | | <div style="width: 100%;height: 45%;"> |
| | | <div class="layui-card-header"> |
| | | <img src="../../img/console/xiexian.png" style="height: 20px;"> |
| | | 安全库存预警 |
| | | </div> |
| | | <div class="layui-card-body" style="padding: 0;height: 90%;width: 90%;margin-left: 5%;"> |
| | | <div class="layui-card-body" style="height: 90%;width: 90%;margin-left: 5%;"> |
| | | <table id="LAY-app-content-list2" lay-filter="LAY-app-content-list2"></table> |
| | | </div> |
| | | </div> |
| | | <div style="width: 100%;height: 33.33%;"> |
| | | <!-- <div style="width: 100%;height: 33.33%;"> |
| | | <div class="layui-card-header"> |
| | | <img src="../../img/console/xiexian.png" style="height: 20px;"> |
| | | 月度出入库趋势 |
| | |
| | | style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | sendData(IP + "/Statistical/GetQualityStatusFb", param, 'get', function (res) { |
| | | if (res.code == 0) { //成功 |
| | | //库存质量状态分布(饼状) |
| | | this.chartYuan = echarts.init(document.getElementById("yuanOrder")); |
| | | var chartYuan = echarts.init(document.getElementById("yuanOrder")); |
| | | var option2 = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | top: '5%', |
| | | top: '0%', |
| | | left: 'center' |
| | | }, |
| | | series: [{ |
| | | name: '数量', |
| | | type: 'pie', |
| | | radius: ['40%', '75%'], |
| | | avoidLabelOverlap: false, |
| | | radius: ['30%', '60%'], |
| | | avoidLabelOverlap: true,//自动避免重叠 |
| | | itemStyle: { |
| | | borderRadius: 10, |
| | | borderColor: '#fff', |
| | |
| | | label: { |
| | | show: true, // 显示标签 |
| | | position: 'outside', // 标签位置在饼图外部 |
| | | formatter: '{b}: {c} ({d}%)' // 标签格式,显示名称、值和百分比 |
| | | //formatter: '{b}:{c} ({d}%)' // 标签格式,显示名称、值和百分比 |
| | | formatter: '{b}:({d}%)' // 标签格式,显示名称、值和百分比 |
| | | }, |
| | | labelLine: { |
| | | show: true, // 显示引导线 |
| | | length: 20, // 第一段引导线的长度 |
| | | length2: 30 // 第二段引导线的长度 |
| | | // length: 20, // 第一段引导线的长度 |
| | | // length2: 30 // 第二段引导线的长度 |
| | | }, |
| | | data: res.data.map(function (item) { |
| | | return { |
| | |
| | | }) |
| | | }] |
| | | }; |
| | | this.chartYuan.setOption(option2); |
| | | chartYuan.setOption(option2); |
| | | } |
| | | else { //不成功 |
| | | layer.msg('获取总量列表信息失败!', { |
| | |
| | | }; |
| | | |
| | | |
| | | //获取月度出入库趋势(折线) |
| | | this.chartXian = echarts.init(document.getElementById("xianOrder")); |
| | | var option3; |
| | | // //获取月度出入库趋势(折线) |
| | | // this.chartXian = echarts.init(document.getElementById("xianOrder")); |
| | | // var option3; |
| | | |
| | | option3 = { |
| | | title: { |
| | | text: '' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | legend: { |
| | | data: ['入库', '出库'] |
| | | }, |
| | | grid: { |
| | | top: '15%', |
| | | left: '5%', |
| | | bottom: '15%', |
| | | containLabel: true |
| | | }, |
| | | toolbox: { |
| | | feature: { |
| | | //saveAsImage: {}//保存图片 |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
| | | axisLine: { show: false }, // 隐藏 x 轴线 |
| | | axisTick: { show: false }, // 隐藏 x 轴刻度线 |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '入库', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: [120, 132, 101, 134, 90, 230, 210] |
| | | }, |
| | | { |
| | | name: '出库', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: [220, 182, 191, 234, 290, 330, 310] |
| | | } |
| | | ] |
| | | }; |
| | | this.chartXian.setOption(option3); |
| | | // option3 = { |
| | | // title: { |
| | | // text: '' |
| | | // }, |
| | | // tooltip: { |
| | | // trigger: 'axis' |
| | | // }, |
| | | // legend: { |
| | | // data: ['入库', '出库'] |
| | | // }, |
| | | // grid: { |
| | | // top: '15%', |
| | | // left: '5%', |
| | | // bottom: '15%', |
| | | // containLabel: true |
| | | // }, |
| | | // toolbox: { |
| | | // feature: { |
| | | // //saveAsImage: {}//保存图片 |
| | | // } |
| | | // }, |
| | | // xAxis: { |
| | | // type: 'category', |
| | | // boundaryGap: false, |
| | | // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
| | | // axisLine: { show: false }, // 隐藏 x 轴线 |
| | | // axisTick: { show: false }, // 隐藏 x 轴刻度线 |
| | | // }, |
| | | // yAxis: { |
| | | // type: 'value' |
| | | // }, |
| | | // series: [ |
| | | // { |
| | | // name: '入库', |
| | | // type: 'line', |
| | | // stack: 'Total', |
| | | // data: [120, 132, 101, 134, 90, 230, 210] |
| | | // }, |
| | | // { |
| | | // name: '出库', |
| | | // type: 'line', |
| | | // stack: 'Total', |
| | | // data: [220, 182, 191, 234, 290, 330, 310] |
| | | // } |
| | | // ] |
| | | // }; |
| | | // this.chartXian.setOption(option3); |
| | | |
| | | |
| | | //仓库状况总 |
| | |
| | | function refreshTable() { |
| | | infoOptions = { |
| | | elem: '#LAY-app-content-list', |
| | | height: 'full-600', |
| | | //height: 'full-600', |
| | | height: '270%', |
| | | id: 'LAY-app-content-list', |
| | | page: false, |
| | | limit: pageCnt, |
| | |
| | | function refreshTable2() { |
| | | infoOptions2 = { |
| | | elem: '#LAY-app-content-list2', |
| | | height: 'full-600', |
| | | //height: 'full-600', |
| | | height: '270%', |
| | | id: 'LAY-app-content-list2', |
| | | page: false, |
| | | limit: pageCnt, |
| | |
| | | { field: '', title: '序号', type: 'numbers', fixed: 'left', "disabled": true }, |
| | | { field: 'SkuNo', title: '物料编码', align: 'center' }, |
| | | { field: 'SkuName', title: '物料名称', align: 'center' }, |
| | | { title: '批次', field: 'LotNo', align: 'center' }, |
| | | { field: 'LotNo', title: '批次', align: 'center' }, |
| | | { field: 'ResidueQty', title: '剩余数量', align: 'center' }, |
| | | ]] |
| | | }; |