From 931f827913133bf3032a1083cba40c5c5b6dc7cb Mon Sep 17 00:00:00 2001
From: zmk <496160012@qq.com>
Date: 星期四, 18 七月 2024 16:50:50 +0800
Subject: [PATCH] 提交代码
---
javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html | 244 +++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 215 insertions(+), 29 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 b8aa1a6..41acdbf 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
@@ -13,8 +13,11 @@
height: 100%;
}
.el-card__header{
- height: 40px;
- padding: 8px 20px;
+ height: 55px;
+ padding: 18px 20px;
+ color: #FFFFFF;
+ font-weight: 500;
+ font-size: 14px;
}
#app {
height: 100%;
@@ -24,13 +27,37 @@
width: 180px !important;
height: 180px !important;
}
+ .card1{
+ height: 320px;margin-right: 20px;
+ }
+ .card-blue .el-card__header{
+ height: 40px;
+ padding: 8px 20px;
+ background: #1894F6;
+ }
+ .card-yellow .el-card__header{
+ height: 40px;
+ padding: 8px 20px;
+ background: #F7931E;
+ }
+ .card-red .el-card__header{
+ height: 40px;
+ padding: 8px 20px;
+ background: #FF0000;
+ }
+ .card-green .el-card__header{
+ height: 40px;
+ padding: 8px 20px;
+ background: #67C23A;
+ }
+
</style>
</head>
<body>
<div id="app" v-cloak>
- <el-row style="height: 200px;">
+ <el-row>
<el-col :span="8">
- <el-card class="box-card" style="height: 320px;">
+ <el-card class="box-card card-blue" style="height: 320px;margin-right: 20px;">
<div slot="header" class="clearfix">
<span>鍦哄湴绠�浠�</span>
</div>
@@ -50,6 +77,7 @@
</template>
{{project.code}}
</el-descriptions-item>
+
<el-descriptions-item>
<template slot="label">
<i class="el-icon-map-location"></i>
@@ -70,7 +98,7 @@
<i class="el-icon-user"></i>
璐熻矗浜猴細
</template>
- {{project.leaderName}}
+ {{project.leader}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
@@ -92,72 +120,230 @@
</el-col>
<el-col :span="10" >
- <el-card class="box-card" style="height: 320px;">
+ <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>
<el-col :span="6" >
- <el-card class="box-card" style="height: 320px;">
+ <el-card class="box-card card-red" style="height: 320px;">
<div slot="header" class="clearfix">
- <span>鍦哄湴杩涘害</span>
+ <span>鍦哄湴杩涘害(%)</span>
</div>
- <div style="">
- <el-progress type="dashboard" :percentage="50">
- </el-progress>
+ <div>
+ <div style="padding-left: 20%;">
+ <el-progress type="dashboard" color="#FF0000" :percentage=holeProcess>
+ </el-progress>
+ </div>
</div>
</el-card>
</el-col>
+
+ </el-row>
+
+ <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>
+ </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%;" height="250"
+ :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>
</div>
<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