| | |
| | | <div class="layui-row layui-col-space15 p-top"> |
| | | <div class="layui-col-sm3 layui-col-xs6"> |
| | | <div class="console-link-block"> |
| | | <div class="console-link-block-num">2</div> |
| | | <div class="console-link-block-num" th:text="${mainData.orderNum}">2</div> |
| | | <div class="console-link-block-text">待办工单</div> |
| | | <i class="console-link-block-icon layui-icon layui-icon-survey"></i> |
| | | <div class="console-link-block-band">待处理</div> |
| | |
| | | </div> |
| | | <div class="layui-col-sm3 layui-col-xs6"> |
| | | <div class="console-link-block"> |
| | | <div class="console-link-block-num">0</div> |
| | | <div class="console-link-block-num" th:text="${mainData.inSum}">0</div> |
| | | <div class="console-link-block-text">今日入库(吨)</div> |
| | | <i class="console-link-block-icon layui-icon layui-icon-form"></i> |
| | | <div class="console-link-block-band">去查看</div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-sm3 layui-col-xs6"> |
| | | <div class="layui-col-sm3 layui-col-xs6"> |
| | | <div class="console-link-block"> |
| | | <div class="console-link-block-num">0</div> |
| | | <div class="console-link-block-num" th:text="${mainData.outSum}">0</div> |
| | | <div class="console-link-block-text">今日出库(吨)</div> |
| | | <i class="console-link-block-icon layui-icon layui-icon-form"></i> |
| | | <div class="console-link-block-band">去查看</div> |
| | |
| | | </div> |
| | | <div class="layui-col-sm3 layui-col-xs6"> |
| | | <div class="console-link-block"> |
| | | <div class="console-link-block-num">0</div> |
| | | <div class="console-link-block-num" th:text="${mainData.aiNum}">0</div> |
| | | <div class="console-link-block-text">AI事件(近7天)</div> |
| | | <i class="console-link-block-icon layui-icon layui-icon-chart"></i> |
| | | <div class="console-link-block-band">去查看</div> |
| | |
| | | <div class="layui-row layui-col-space15"> |
| | | <div class="layui-col-md4 layui-col-sm6"> |
| | | <div class="layui-card" style="overflow: hidden;"> |
| | | <div class="layui-card-header">日出库统计</div> |
| | | <div class="layui-card-header">日出入库统计</div> |
| | | <div class="layui-card-body"> |
| | | <div id="consoleChartsDay" style="height: 300px;"></div> |
| | | <div style="color: #10B4E8;font-size: 18px;position: absolute;bottom: 85px;left: 0;right:0;text-align: center;cursor: pointer;"> |
| | | 出入库明细<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div class="layui-col-md4 layui-col-sm6"> |
| | | <div class="layui-card" style="overflow: hidden;"> |
| | | <div class="layui-card-header">热门搜索</div> |
| | | <div class="layui-col-md6"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">近7天AI事件统计</div> |
| | | <div class="layui-card-body"> |
| | | <div id="consoleChartsWord" style="height: 300px;"></div> |
| | | <div id="aiChartsWeek" style="height: 300px;"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="layui-col-md8 layui-col-sm12"> |
| | | <div class="layui-card" style="overflow: hidden;"> |
| | | <div class="layui-card-header">用户分布</div> |
| | | <div class="layui-col-md6"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">近7天抓拍统计</div> |
| | | <div class="layui-card-body"> |
| | | <div class="layui-row"> |
| | | <div class="layui-col-md8 layui-col-sm7"> |
| | | <div id="consoleChartsMap" style="height: 300px;"></div> |
| | | </div> |
| | | <div class="layui-col-md4 layui-col-sm5"> |
| | | <table class="layui-table" lay-skin="line" style="margin-top: 15px;"> |
| | | <thead> |
| | | <tr> |
| | | <td>排名</td> |
| | | <td>地区</td> |
| | | <td>人数</td> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr> |
| | | <td>1</td> |
| | | <td>浙江</td> |
| | | <td>62310</td> |
| | | </tr> |
| | | <tr> |
| | | <td>2</td> |
| | | <td>上海</td> |
| | | <td>59190</td> |
| | | </tr> |
| | | <tr> |
| | | <td>3</td> |
| | | <td>广东</td> |
| | | <td>55891</td> |
| | | </tr> |
| | | <tr> |
| | | <td>4</td> |
| | | <td>北京</td> |
| | | <td>51919</td> |
| | | </tr> |
| | | <tr> |
| | | <td>5</td> |
| | | <td>山东</td> |
| | | <td>39231</td> |
| | | </tr> |
| | | <tr> |
| | | <td>6</td> |
| | | <td>湖北</td> |
| | | <td>37109</td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | <div id="snapChartsWeek" style="height: 300px;"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <!-- js部分 --> |
| | | <script th:src="@{/ajax/libs/layui-ruoyi/layui.js}"></script> |
| | | <!--<script src="${ctxPath}/assets/js/common.js"></script>--> |
| | | <script th:src="@{/ajax/libs/echarts/echarts.min.js}"></script> |
| | | <script th:src="@{/ajax/libs/echarts/china.js}"></script> |
| | | <script th:src="@{/ajax/libs/echarts/echarts-wordcloud.min.js}"></script> |
| | | <script> |
| | | <script th:inline="javascript"> |
| | | var mainData = [[${mainData}]]; |
| | | layui.use(['layer'], function () { |
| | | var $ = layui.jquery; |
| | | var layer = layui.layer; |
| | |
| | | var myCharts1 = echarts.init(document.getElementById('consoleChartsDay')); |
| | | var options1 = { |
| | | title: { |
| | | text: '入库数量/出库数量', x: 'center', y: '32%', |
| | | text: '入库车次/出库车次', x: 'center', y: '32%', |
| | | textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'}, |
| | | subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20 |
| | | }, |
| | |
| | | tooltip: {trigger: 'item'}, |
| | | legend: { |
| | | orient: 'vertical', right: '0px', top: '0px', |
| | | data: ['入库数量', '出库数量'], textStyle: {color: '#595959'} |
| | | data: ['入库车次', '出库车次'], textStyle: {color: '#595959'} |
| | | }, |
| | | series: [{name: '数量', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}] |
| | | }; |
| | | myCharts1.setOption(options1); |
| | | // 赋值 |
| | | myCharts1.setOption({ |
| | | title: {subtext: '38/60'}, series: [{data: [{name: '入库数量', value: 38}, {name: '出库数量', value: 22}]}] |
| | | title: {subtext: mainData.inNumDay + "/" + mainData.outNumDay}, series: [{data: [{name: '入库车次', value: mainData.inNumDay}, {name: '出库车次', value: mainData.outNumDay}]}] |
| | | }); |
| | | |
| | | /** 渲染周统计图表 */ |
| | |
| | | color: ['#10B4E8', '#FFA800'], |
| | | legend: { |
| | | orient: 'vertical', right: '0px', top: '0px', |
| | | data: ['入库数量', '出库数量'], textStyle: {color: '#595959'} |
| | | data: ['入库车次', '出库车次'], textStyle: {color: '#595959'} |
| | | }, |
| | | grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'}, |
| | | xAxis: { |
| | | name: '星期', |
| | | name: '日期', |
| | | nameTextStyle: {color: '#595959'}, |
| | | type: 'category', |
| | | data: ['周一', '周二', '周三', '周四', '周五'], |
| | | data: mainData.weekDateList, |
| | | axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]}, |
| | | axisLabel: {color: '#8c8c8c'}, |
| | | axisTick: {alignWithLabel: true} |
| | |
| | | minInterval: 1 |
| | | }, |
| | | series: [{ |
| | | name: '入库数量', type: 'bar', stack: 'one', barMaxWidth: '30px', |
| | | name: '入库车次', type: 'bar', stack: 'one', barMaxWidth: '30px', |
| | | label: {normal: {show: true, position: 'inside'}} |
| | | }, { |
| | | name: '出库数量', type: 'bar', stack: 'one', barMaxWidth: '30px', |
| | | name: '出库车次', type: 'bar', stack: 'one', barMaxWidth: '30px', |
| | | label: {normal: {show: true, position: 'inside'}} |
| | | }] |
| | | }; |
| | | myCharts2.setOption(options2); |
| | | // 赋值 |
| | | myCharts2.setOption({series: [{data: [5, 9, 6, 3, 10]}, {data: [10, 6, 9, 12, 5]}]}); |
| | | myCharts2.setOption({series: [{data: mainData.weekInNumList}, {data: mainData.weekOutNumList}]}); |
| | | |
| | | /** 渲染月统计图表 */ |
| | | var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth')); |
| | |
| | | color: ['#10B4E8', '#FFA800'], |
| | | legend: { |
| | | orient: 'vertical', right: '0px', top: '0px', |
| | | data: ['入库数量', '出库数量'], textStyle: {color: '#595959'} |
| | | data: ['入库车次', '出库车次'], textStyle: {color: '#595959'} |
| | | }, |
| | | grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'}, |
| | | xAxis: { |
| | | name: '日期', |
| | | nameTextStyle: {color: '#595959'}, |
| | | type: 'category', |
| | | data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], |
| | | data: mainData.monthDateList, |
| | | axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]}, |
| | | axisLabel: { |
| | | color: '#8c8c8c', interval: function (index, value) { |
| | |
| | | minInterval: 1 |
| | | }, |
| | | series: [ |
| | | {name: '入库数量', type: 'line', smooth: false}, |
| | | {name: '出库数量', type: 'line', smooth: false} |
| | | {name: '入库车次', type: 'line', smooth: false}, |
| | | {name: '出库车次', type: 'line', smooth: false} |
| | | ] |
| | | }; |
| | | myCharts3.setOption(options3); |
| | | // 赋值 |
| | | myCharts3.setOption({ |
| | | series: [ |
| | | {data: [15, 14, 13, 13, 13, 14, 15, 16, 17, 18, 19, 18, 18, 19, 20, 19, 18, 16, 14, 12, 10, 10, 12, 14, 16, 16, 14, 13, 12, 11, 10]}, |
| | | {data: [24, 22, 20, 18, 16, 14, 13, 12, 11, 11, 10, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 23, 24, 25, 26, 26, 24, 22, 20, 18, 16]} |
| | | {data: mainData.monthInNumList}, |
| | | {data: mainData.monthOutNumList} |
| | | ] |
| | | }); |
| | | |
| | | /** 渲染地图图表 */ |
| | | var myCharts4 = echarts.init(document.getElementById('consoleChartsMap')); |
| | | /** 渲染周统计图表 */ |
| | | var myCharts4 = echarts.init(document.getElementById('aiChartsWeek')); |
| | | var options4 = { |
| | | tooltip: {trigger: 'item'}, |
| | | dataRange: { |
| | | min: 0, max: 6e4, text: ['高', '低'], color: ['#2395FF', '#f2f2f2'], itemHeight: 60, itemWidth: 12 |
| | | }, series: [{ |
| | | name: '出库数量', type: 'map', mapType: "china", |
| | | itemStyle: {normal: {label: {show: true, color: '#262626'}, borderColor: '#dddddd'}}, |
| | | emphasis: {label: {show: true, color: '#fff'}, itemStyle: {areaColor: '#FACF20'}}, |
| | | top: '0px', left: '15px', bottom: '0px' |
| | | tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}}, |
| | | color: ['#10B4E8'], |
| | | legend: { |
| | | orient: 'vertical', right: '0px', top: '0px', |
| | | data: ['AI事件数'], textStyle: {color: '#595959'} |
| | | }, |
| | | grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'}, |
| | | xAxis: { |
| | | name: '日期', |
| | | nameTextStyle: {color: '#595959'}, |
| | | type: 'category', |
| | | data: mainData.weekAiDateList, |
| | | axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]}, |
| | | axisLabel: {color: '#8c8c8c'}, |
| | | axisTick: {alignWithLabel: true} |
| | | }, |
| | | yAxis: { |
| | | name: '数量', |
| | | nameTextStyle: {color: '#595959'}, |
| | | type: 'value', |
| | | boundaryGap: ['0', '20%'], |
| | | axisTick: {show: false}, |
| | | axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]}, |
| | | axisLabel: {color: '#8c8c8c'}, |
| | | splitLine: {show: false}, |
| | | splitArea: {show: false}, |
| | | minInterval: 1 |
| | | }, |
| | | series: [{ |
| | | name: 'AI事件', type: 'bar', stack: 'one', barMaxWidth: '30px', |
| | | label: {normal: {show: true, position: 'inside'}} |
| | | }] |
| | | }; |
| | | myCharts4.setOption(options4); |
| | | // 赋值 |
| | | myCharts4.setOption({ |
| | | series: [{ |
| | | data: [ |
| | | {name: "西藏", value: 60}, |
| | | {name: "青海", value: 167}, |
| | | {name: "宁夏", value: 210}, |
| | | {name: "海南", value: 252}, |
| | | {name: "甘肃", value: 502}, |
| | | {name: "贵州", value: 570}, |
| | | {name: "新疆", value: 661}, |
| | | {name: "云南", value: 8890}, |
| | | {name: "重庆", value: 10010}, |
| | | {name: "吉林", value: 5056}, |
| | | {name: "山西", value: 2123}, |
| | | {name: "天津", value: 9130}, |
| | | {name: "江西", value: 10170}, |
| | | {name: "广西", value: 6172}, |
| | | {name: "陕西", value: 9251}, |
| | | {name: "黑龙江", value: 5125}, |
| | | {name: "内蒙古", value: 1435}, |
| | | {name: "安徽", value: 9530}, |
| | | {name: "北京", value: 51919}, |
| | | {name: "福建", value: 3756}, |
| | | {name: "上海", value: 59190}, |
| | | {name: "湖北", value: 37109}, |
| | | {name: "湖南", value: 8966}, |
| | | {name: "四川", value: 31020}, |
| | | {name: "辽宁", value: 7222}, |
| | | {name: "河北", value: 3451}, |
| | | {name: "河南", value: 9693}, |
| | | {name: "浙江", value: 62310}, |
| | | {name: "山东", value: 39231}, |
| | | {name: "江苏", value: 35911}, |
| | | {name: "广东", value: 55891} |
| | | ] |
| | | }] |
| | | }); |
| | | myCharts4.setOption({series: [{data: mainData.weekAiNumList}]}); |
| | | |
| | | /** 渲染词云图表 */ |
| | | var myCharts5 = echarts.init(document.getElementById('consoleChartsWord')); |
| | | /** 渲染周统计图表 */ |
| | | var myCharts5 = echarts.init(document.getElementById('snapChartsWeek')); |
| | | var options5 = { |
| | | tooltip: {show: true}, |
| | | tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}}, |
| | | color: ['#FFA800'], |
| | | legend: { |
| | | orient: 'vertical', right: '0px', top: '0px', |
| | | data: ['抓拍数'], textStyle: {color: '#595959'} |
| | | }, |
| | | grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'}, |
| | | xAxis: { |
| | | name: '日期', |
| | | nameTextStyle: {color: '#595959'}, |
| | | type: 'category', |
| | | data: mainData.weekSnapDateList, |
| | | axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]}, |
| | | axisLabel: {color: '#8c8c8c'}, |
| | | axisTick: {alignWithLabel: true} |
| | | }, |
| | | yAxis: { |
| | | name: '数量', |
| | | nameTextStyle: {color: '#595959'}, |
| | | type: 'value', |
| | | boundaryGap: ['0', '20%'], |
| | | axisTick: {show: false}, |
| | | axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]}, |
| | | axisLabel: {color: '#8c8c8c'}, |
| | | splitLine: {show: false}, |
| | | splitArea: {show: false}, |
| | | minInterval: 1 |
| | | }, |
| | | series: [{ |
| | | name: "搜索量", |
| | | type: 'wordCloud', |
| | | shape: 'diamond', |
| | | width: '100%', |
| | | height: '100%', |
| | | sizeRange: [12, 23], |
| | | gridSize: 6, |
| | | textStyle: { |
| | | normal: { |
| | | color: function () { |
| | | return 'rgb(' + [ |
| | | Math.round(Math.random() * 160), |
| | | Math.round(Math.random() * 160), |
| | | Math.round(Math.random() * 160) |
| | | ].join(',') + ')'; |
| | | } |
| | | }, |
| | | emphasis: {shadowBlur: 10, shadowColor: '#666'} |
| | | }, data: [] |
| | | name: '抓拍信息', type: 'bar', stack: 'one', barMaxWidth: '30px', |
| | | label: {normal: {show: true, position: 'inside'}} |
| | | }] |
| | | }; |
| | | myCharts5.setOption(options5); |
| | | // 赋值 |
| | | myCharts5.setOption({ |
| | | series: [{ |
| | | data: [ |
| | | {name: "软妹子", value: 23}, |
| | | {name: "汪星人", value: 23}, |
| | | {name: "长腿欧巴", value: 23}, |
| | | {name: "萝莉", value: 22}, |
| | | {name: "辣~", value: 22}, |
| | | {name: "K歌", value: 22}, |
| | | {name: "大长腿", value: 21}, |
| | | {name: "川妹子", value: 21}, |
| | | {name: "女神", value: 21}, |
| | | {name: "米粉", value: 20}, |
| | | {name: "专注设计", value: 20}, |
| | | {name: "逛街", value: 20}, |
| | | {name: "黑长直", value: 20}, |
| | | {name: "海纳百川", value: 19}, |
| | | {name: "萌萌哒", value: 19}, |
| | | {name: "坚持", value: 19}, |
| | | {name: "话唠", value: 19}, |
| | | {name: "果粉", value: 18}, |
| | | {name: "喵星人", value: 18}, |
| | | {name: "花粉", value: 18}, |
| | | {name: "衬衫控", value: 18}, |
| | | {name: "宅男", value: 17}, |
| | | {name: "小清新", value: 17}, |
| | | {name: "眼镜男", value: 17}, |
| | | {name: "琼瑶", value: 17}, |
| | | {name: "穷游党", value: 16}, |
| | | {name: "铲屎官", value: 16}, |
| | | {name: "正太", value: 16}, |
| | | {name: "中二病", value: 16}, |
| | | {name: "夜猫子", value: 15}, |
| | | {name: "逗比", value: 15}, |
| | | {name: "腹黑", value: 15}, |
| | | {name: "吃鸡", value: 15}, |
| | | {name: "为了联盟", value: 14}, |
| | | {name: "背包客", value: 14}, |
| | | {name: "民谣", value: 14}, |
| | | {name: "为了部落", value: 14}, |
| | | {name: "懒癌患者", value: 13}, |
| | | {name: "追剧", value: 13}, |
| | | {name: "IT民工", value: 13}, |
| | | {name: "CNB成员", value: 13}, |
| | | {name: "选择困难", value: 12}, |
| | | {name: "锤粉", value: 12}, |
| | | {name: "欧皇", value: 12}, |
| | | {name: "仙气十足", value: 12} |
| | | ] |
| | | }] |
| | | }); |
| | | myCharts5.setOption({series: [{data: mainData.weekSnapNumList}]}); |
| | | |
| | | /** 窗口大小改变事件 */ |
| | | window.onresize = function () { |
| | |
| | | }; |
| | | |
| | | }); |
| | | |
| | | </script> |
| | | </body> |
| | | </html> |