From bc9f9097d1da4d431fdfe670d77521fd705baf53 Mon Sep 17 00:00:00 2001 From: suerwei <18810552194@163.com> Date: 星期二, 28 五月 2024 17:07:40 +0800 Subject: [PATCH] 首页,详情页,统计出入库 --- javaweb-plus/javaweb-admin/src/main/resources/templates/main.html | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 157 insertions(+), 21 deletions(-) diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html index fdb62d4..ff5859c 100644 --- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html +++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html @@ -85,11 +85,51 @@ padding: 0 40px; align-content: center; } - .ilblock span{ + .ilblock>span{ display: block; line-height: 30px; } + + <!-- 琛ㄦ牸鏍峰紡 --> + .el-table, .el-table__expanded-cell { + background-color: transparent; + color: #4D4D4D; + font-size: 13px; + } + + .el-table th, + .el-table tr, + .el-table td { + background-color: transparent; + border: 0px; + color: #4D4D4D; + font-size: 13px; + font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal; + font-weight: Normal; + } + .el-table::before { + height: 0px; + } + .el-table__body tr, + .el-table__body td { + padding: 0; + height: 22px; + } + .el-table__row.warning-row { + background:rgb(252,212,165); + } + .el-table__body-wrapper::-webkit-scrollbar-track { + background-color: rgb(252,212,165); + } + .el-table__body-wrapper::-webkit-scrollbar { + width: 10px; + opacity: 0.5; + } + .el-table__body-wrapper::-webkit-scrollbar-thumb { + border-radius: 15px; + background-color:rgb(252,212,165); + } </style> </head> @@ -110,19 +150,18 @@ </div> <div style="flex:6;" class="ilblock"> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 鍗忚皟涓� - <span style="float: right"> - {{indexDataCount.projectStatus0}} - </span> + <span style="float: right">{{indexDataCount.projectStatus0}}</span> <!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">--> + </span> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 寰呭紑宸� <span style="float: right">{{indexDataCount.projectStatus1}}</span> <!-- <li class="el-icon-caret-bottom" style="color: #e6a23c">--> </span> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 杩涜涓� <span style="float: right">{{indexDataCount.projectStatus2}}</span> <!-- <li class="el-icon-caret-top" style="color: #409eff">--> @@ -146,11 +185,11 @@ </div> <div style="flex:6;" class="ilblock"> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 鎬昏繘灏� <span style="float: right">{{indexDataCount.footageCount}}m</span> <!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">--> </span> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 宸插畬鎴� <span style="float: right">{{indexDataCount.footageCplCount}}m</span> <!-- <li class="el-icon-caret-bottom" style="color: #409eff">--> </span> @@ -175,11 +214,11 @@ <div> </div> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 宸插畨瑁� <span style="float: right">0</span> <!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">--> </span> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 鏈畨瑁� <span style="float: right">68</span> <!-- <li class="el-icon-caret-bottom" style="color: #409eff">--> </span> @@ -201,15 +240,15 @@ </div> <div style="flex:6;" class="ilblock"> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 鏂藉伐璧勬枡 <span style="float: right">0</span> <!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">--> </span> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 瀹夊叏璧勬枡 <span style="float: right">0</span> <!-- <li class="el-icon-caret-bottom" style="color: #409eff">--> </span> - <span style="color:rgba(0,0,0,.65);font-size: 15px;"> + <span style="color:rgba(0,0,0,.87);font-size: 15px;"> 璐ㄩ噺璧勬枡 <span style="float: right">0</span> <!-- <li class="el-icon-caret-bottom" style="color: #409eff">--> </span> @@ -221,13 +260,32 @@ <el-row> <el-col :span="16"> <el-card class="box-card"> - <div style="height: 200px;"> + <div style="height: 200px;width: 100%;"> <h3>鏉愭枡缁熻</h3> + <el-col :span="10" style="height: 200px;"> + <div style="margin-top: 15px"> + <template> + <el-table :data="tubLogs" border size="small" style="width: 100%" + :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}" + :row-class-name="tableRowClassName"> + <!-- <el-table-column prop="code" label="搴忓彿"></el-table-column>--> + <el-table-column prop="tubName" label="鍚嶇О"></el-table-column> + <el-table-column prop="inboundNumber" label="鍏ュ簱鏁伴噺"></el-table-column> + <el-table-column prop="outboundNumber" label="鍑哄簱鏁伴噺"></el-table-column> + <el-table-column prop="unit" label="鍗曚綅"></el-table-column> + + </el-table> + </template> + </div> + </el-col> + <el-col :span="14" style="height: 200px;"> + <div id="column-chart" style="height: 180px; width: 100%;"></div> + </el-col> </div> </el-card> <el-card class="box-card" style="margin-top: 20px;"> - <div id="map_div" style="width: 100%;height: 550px;"></div> + <div id="map_div" style="width: 100%;height: 550px;margin-top: -5px"></div> </el-card> </el-col> @@ -305,14 +363,84 @@ totalProcess(); stationProcess(); indexCount(); + tubLogs(); }) + //鍦哄湴鍜屽湴鍥剧偣鍑昏仈鍔� function viewStation(station) { var lng = station.lng; var lat = station.lat; map.centerAndZoom(new T.LngLat(lng, lat), 13); - // $.modal.openTab("鍦哄湴瀵艰埅",ctx+"/geo/project/navigate?ids="+id); } + function tubLogs() { + const chart = echarts.init(document.getElementById("column-chart")); + const option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: {}, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: [] + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: '鍑哄簱', + type: 'bar', + emphasis: { + focus: 'series' + }, + data: [] + }, + { + name: '鍏ュ簱', + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series' + }, + data: [] + }, + + ] + }; + + let url = ctx + "/system/tubLogData"; + $.ajaxSettings.async = false; + $.get(url,{},function(res){ + vm.tubLogs = res.tubLogs; + + res.tubLogs.forEach(function(value, index, array) { + const tubName = value.tubName; + const inboundNumber = value.inboundNumber; + const outboundNumber = value.outboundNumber; + const unit = value.unit; + option.xAxis[0].data[index] = tubName; + option.series[0].data[index] = outboundNumber; + option.series[1].data[index] = inboundNumber; + }); + chart.setOption(option, true); + }) + $.ajaxSettings.async = false; + } + + //棣栭〉绗竴琛屼釜鏁扮粺璁� function indexCount() { let url = ctx + "/system/indexDataCount"; $.ajaxSettings.async = false; @@ -320,8 +448,9 @@ vm.indexDataCount = res.data; }) $.ajaxSettings.async = false; - } + } + //鍦哄湴杩涘害 function stationProcess() { let url = ctx + "/system/projectProcess"; $.ajaxSettings.async = false; @@ -329,8 +458,6 @@ vm.stationProcessData = res.projectData; }) $.ajaxSettings.async = false; - console.log(vm.stationProcessData); - } var vm = new Vue({ el: "#app", @@ -338,9 +465,17 @@ return { stationProcessData: [], indexDataCount :"", + tubLogs:[], }; }, methods: { + tableRowClassName({ row, rowIndex }) { + if (rowIndex % 2 == 0) { + return ""; + } else { + return "warning-row"; + } + }, } }); // 鍔犺浇鍦板浘 @@ -471,7 +606,8 @@ $.get(url,{},function(res){ pointerData = res.pointerData; pointerData = (pointerData*100).toFixed(0); - }) + }); + $.ajaxSettings.async = false; var option = { backgroundColor: "#fff", -- Gitblit v1.9.1