<!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.leaderName}}
|
</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-yellow" style="height: 320px;margin-right: 20px;">
|
<div slot="header" class="clearfix">
|
<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>
|
|
</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="50">
|
</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>
|
</el-col>
|
|
</el-row>
|
</div>
|
|
|
<th:block th:include="include :: footer" />
|
|
<script th:inline="javascript">
|
var project =[[${project}]];
|
var projectId=[[${projectId}]];
|
var statusDatas = [[${@dict.getType('hole_status')}]];
|
var prefix = ctx + "geo/hole";
|
|
$(function() {
|
var url = prefix + "/holelist?projectId=" + projectId;
|
$.ajaxSettings.async = false;
|
$.get(url,{},function(res){
|
vm.holeData = res.data;
|
});
|
vm.project = project;
|
|
console.log(vm.project);
|
console.log(vm.holeData);
|
});
|
|
var vm = new Vue({
|
el: "#app",
|
data() {
|
return {
|
project: "",
|
holeData: [],
|
};
|
},
|
methods: {
|
}
|
});
|
|
//
|
// function map(){
|
// parent.$.modal.openTab("项目地图",ctx+"/geo/projectwork/map?id=" + project.ids);
|
// }
|
</script>
|
</body>
|
</html>
|
