From b2ce4cf46bda0570ad91636fab8760694cf0b3f0 Mon Sep 17 00:00:00 2001 From: zmk <496160012@qq.com> Date: 星期二, 28 五月 2024 18:47:58 +0800 Subject: [PATCH] 提交代码 --- javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html | 130 +++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 123 insertions(+), 7 deletions(-) diff --git a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html index 180fb5e..1b70522 100644 --- a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html +++ b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html @@ -77,6 +77,7 @@ </template> {{project.code}} </el-descriptions-item> + <el-descriptions-item> <template slot="label"> <i class="el-icon-map-location"></i> @@ -148,20 +149,41 @@ </div> <div> <div style="padding-left: 20%;"> - <el-progress type="dashboard" color="#FF0000" :percentage="50"> + <el-progress type="dashboard" color="#FF0000" :percentage=holeProcess> </el-progress> </div> </div> </el-card> </el-col> + + + </el-row> <el-row style="height: 200px;"> <el-col :span="24"> - <el-card class="box-card card-green" style="height: 320px;margin-top: 20px"> - <div slot="header" class="clearfix"> - <span>鏉愭枡淇℃伅</span> - </div> + + <el-card class="box-card card-yellow" style="height: 320px;margin-top: 20px"> + <div slot="header" class="clearfix"> + <span>鏉愭枡缁熻</span> + </div> + <el-col :span="10" style="height: 320px;"> + <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="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> + </el-col> + <el-col :span="14" style="height: 320px;"> + <div id="column-chart" style="height: 250px; width: 100%;"></div> + </el-col> </el-card> + + </el-col> </el-row> @@ -169,34 +191,128 @@ <th:block th:include="include :: footer" /> + <script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script> <script th:inline="javascript"> var project =[[${project}]]; var projectId=[[${projectId}]]; var statusDatas = [[${@dict.getType('hole_status')}]]; var prefix = ctx + "geo/hole"; + var prefix2 = ctx + "geo/TubLog"; $(function() { + //鍦哄湴閽诲瓟鍒楄〃 var url = prefix + "/holelist?projectId=" + projectId; $.ajaxSettings.async = false; $.get(url,{},function(res){ vm.holeData = res.data; }); vm.project = project; + //鍦哄湴杩涘害 + var url2 = prefix + "/holeProcess?projectId=" + projectId; + $.ajaxSettings.async = false; + $.get(url2,{},function(res){ + vm.holeProcess = res.data==null ? 0 :(res.data*100).toFixed(0); + }); - console.log(vm.project); - console.log(vm.holeData); + tubLogs(); }); + + 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: [], + itemStyle: { + // 淇敼鏌卞瓙鐨勯鑹� + color: '#e2b507' + } + }, + { + name: '鍏ュ簱', + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series' + }, + data: [], + itemStyle: { + // 淇敼鏌卞瓙鐨勯鑹� + color: '#2992c6' + } + }, + + ] + }; + + let url = prefix2 + "/countTubLogDate/" + projectId; + $.ajaxSettings.async = false; + $.get(url,{},function(res){ + vm.tubLogs = res.data; + + res.data.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; + } var vm = new Vue({ el: "#app", data() { return { + holeProcess:"", project: "", holeData: [], + tubLogs:[], }; }, methods: { + tableRowClassName({ row, rowIndex }) { + if (rowIndex % 2 == 0) { + return ""; + } else { + return "warning-row"; + } + }, } }); -- Gitblit v1.9.1