| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div style="width: 100%;margin-top: 15%;height: 40%;"> |
| | | <div style="width: 100%;margin-top: 15%;height: 50%;"> |
| | | <div class="layui-card-header"> |
| | | <img src="../../img/console/xiexian.png" style="height: 20px;"> |
| | | 库存质量状态分布 |
| | |
| | | <!-- 右 --> |
| | | <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> |
| | |
| | | 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('获取总量列表信息失败!', { |
| | |
| | | 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' }, |
| | | ]] |
| | | }; |