<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
<head>
|
<th:block th:include="include :: header('基本信息')" />
|
<!-- <link th:href="@{/js/elementUI/index.css}" rel="stylesheet" />-->
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/js/vue.min.js}"></script>
|
<!-- <script th:src="@{/js/elementUI/index.js}"></script>-->
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
<style type="text/css">
|
body {
|
height: 100%;
|
}
|
.el-card__header{
|
height: 55px;
|
padding: 18px 20px;
|
color: #FFFFFF;
|
font-weight: 500;
|
font-size: 14px;
|
}
|
#app {
|
height: 100%;
|
padding: 20px;
|
}
|
.el-progress-circle{
|
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-col :span="8">
|
<el-card class="box-card card-blue" style="height: 320px;margin-right: 20px;">
|
<div slot="header" class="clearfix">
|
<span>场地简介</span>
|
</div>
|
<el-descriptions class="margin-top" title="" :column="1" size="small" border>
|
<el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-s-tools"></i>
|
项目名称
|
</template>
|
{{project.fullName}}
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-menu"></i>
|
场地编号
|
</template>
|
{{project.code}}
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-map-location"></i>
|
所在区域
|
</template>
|
{{project.district}}
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-location"></i>
|
场地位置
|
</template>
|
{{project.address}}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-user"></i>
|
负责人：
|
</template>
|
{{project.leader}}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-s-operation"></i>
|
当前进度
|
</template>
|
{{project.rate}}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<i class="el-icon-price-tag"></i>
|
劳务单位
|
</template>
|
{{project.laborUnit}}
|
</el-descriptions-item>
|
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
|
<el-col :span="10" >
|
<el-card class="box-card card-blue" style="height: 320px;margin-right: 20px;">
|
<div slot="header" class="clearfix">
|
<span>钻孔分布图</span>
|
</div>
|
<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 card-red" style="height: 320px;">
|
<div slot="header" class="clearfix">
|
<span>场地进度(%)</span>
|
</div>
|
<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="height: 200px;">
|
<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>
|
<div style="height: 250px;">
|
<template>
|
<el-table :data="holeData" size="small" style="width: 99%" height="250">
|
<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 style="height: 200px;">
|
<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>
|
</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);
|
});
|
|
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";
|
}
|
},
|
}
|
});
|
|
//
|
// function map(){
|
// parent.$.modal.openTab("项目地图",ctx+"/geo/projectwork/map?id=" + project.ids);
|
// }
|
</script>
|
</body>
|
</html>
|
