From 7852ccae5aeaeb365e8aa95bd2967c1ce18a1f6c Mon Sep 17 00:00:00 2001 From: suerwei <18810552194@163.com> Date: 星期二, 28 五月 2024 18:00:06 +0800 Subject: [PATCH] 修改柱子颜色 --- javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html | 137 +++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 130 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 dcd8d16..f544be0 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 @@ -161,11 +161,49 @@ </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-green" 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-card class="box-card card-green" style="height: 320px;margin-top: 20px">--> +<!-- <div slot="header" class="clearfix">--> +<!-- <span>鏉愭枡淇℃伅</span>--> +<!-- </div>--> +<!-- <div>--> +<!-- <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-card>--> + + + </el-col> </el-row> @@ -173,12 +211,14 @@ <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; @@ -187,10 +227,85 @@ vm.holeData = res.data; }); vm.project = project; - - 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", @@ -198,9 +313,17 @@ return { project: "", holeData: [], + tubLogs:[], }; }, methods: { + tableRowClassName({ row, rowIndex }) { + if (rowIndex % 2 == 0) { + return ""; + } else { + return "warning-row"; + } + }, } }); -- Gitblit v1.9.1