From 41750848c6cc6506fa107036d04b28c0f28cfba8 Mon Sep 17 00:00:00 2001 From: zmk <496160012@qq.com> Date: 星期三, 03 七月 2024 16:19:07 +0800 Subject: [PATCH] 提交 --- javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html | 199 +++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 173 insertions(+), 26 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..567316f 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 @@ -55,7 +55,7 @@ </head> <body> <div id="app" v-cloak> - <el-row style="height: 200px;"> + <el-row> <el-col :span="8"> <el-card class="box-card card-blue" style="height: 320px;margin-right: 20px;"> <div slot="header" class="clearfix"> @@ -77,6 +77,7 @@ </template> {{project.code}} </el-descriptions-item> + <el-descriptions-item> <template slot="label"> <i class="el-icon-map-location"></i> @@ -97,7 +98,7 @@ <i class="el-icon-user"></i> 璐熻矗浜猴細 </template> - {{project.leaderName}} + {{project.leader}} </el-descriptions-item> <el-descriptions-item> <template slot="label"> @@ -119,25 +120,18 @@ </el-col> <el-col :span="10" > - <el-card class="box-card card-yellow" style="height: 320px;margin-right: 20px;"> + <el-card class="box-card card-blue" style="height: 320px;margin-right: 20px;"> <div slot="header" class="clearfix"> - <span>閽诲瓟杩涘害</span> + <span>閽诲瓟鍒嗗竷鍥�</span> </div> - <template> - <el-table :data="holeData" size="small" style="width: 100%"> - <el-table-column prop="code" label="缂栧彿"></el-table-column> - <el-table-column prop="type" label="绫诲瀷"></el-table-column> - <el-table-column prop="footage" label="鎬昏繘灏�(m)"></el-table-column> - <el-table-column prop="footageCpl" label="宸插畬鎴�(m)"></el-table-column> - <el-table-column label="杩涘害(%)"> - <template slot-scope="scope"> - <el-progress :percentage=(scope.row.rate*100).toFixed(0) ></el-progress> - </template> - </el-table-column> - - </el-table> - </template> - + <div> + <el-image :src="src" + :preview-src-list="srcList"> + <div slot="placeholder" class="image-slot"> + 鍔犺浇涓�<span class="dot">...</span> + </div> + </el-image> + </div> </el-card> </el-col> @@ -148,20 +142,67 @@ </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"> + + <el-row style="margin-top: 10px;"> + <el-col :span="24" > + <el-card class="box-card card-blue" style="height: 400px;"> <div slot="header" class="clearfix"> - <span>鏉愭枡淇℃伅</span> + <span>閽诲瓟杩涘害</span> + </div> + <div style="height: 320px;"> + <template> + <el-table :data="holeData" size="small" style="width: 99%" height="320"> + <el-table-column prop="code" label="缂栧彿"></el-table-column> + <el-table-column prop="type" label="绫诲瀷"></el-table-column> + <el-table-column prop="footage" label="鎬昏繘灏�(m)"></el-table-column> + <el-table-column prop="footageCpl" label="宸插畬鎴�(m)"></el-table-column> + <el-table-column label="杩涘害(%)"> + <template slot-scope="scope"> + <el-progress :percentage=(scope.row.rate*100).toFixed(0) ></el-progress> + </template> + </el-table-column> + + </el-table> + </template> + </div> </el-card> + </el-col> + + </el-row> + + <el-row> + <el-col :span="24"> + <el-card class="box-card card-blue" 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: 99%" + :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 +210,140 @@ <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 winURL = window.location.protocol + "//" + window.location.host + "/bjfw/profile"; + console.log(winURL) + + var projectUrl = winURL + project.url; + var arrayImg= new Array(); + arrayImg.push(projectUrl); + 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); + vm.src = projectUrl; + vm.srcList = arrayImg; + 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:[], + src:"", + srcList:[], }; }, methods: { + tableRowClassName({ row, rowIndex }) { + if (rowIndex % 2 == 0) { + return ""; + } else { + return "warning-row"; + } + }, } }); -- Gitblit v1.9.1