<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../common/common-meta-include.jsp"></jsp:include>
<jsp:include page="../common/common-js-include.jsp"></jsp:include>
<jsp:include page="../common/common-css-include.jsp"></jsp:include>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.table_box .table_process .layui-table-cell {
/*height: 75px;*/
}
.layui-table-col-special .layui-table-cell{
display:flex;
justify-content:space-between;
}
/*.layui-table-view .layui-table td >div{*/
/* height: 75px !important;*/
/* line-height: 22px !important;*/
/* white-space: normal;*/
/*}*/
</style>
</head>
<body>
<div id="app"></div>
<template id="template">
<div class="layui-layout layui-layout-admin pd0">
<!-- 内容区域 -->
<div class="right_title">
<span class="txt">周调度图片<div class="top-breadcrumb"></div></span>
<div class="layui-collapse search_form">
<div class="layui-colla-item">
<%-- <h2 class="layui-colla-title">筛选</h2>--%>
<div class="layui-colla-content layui-show">
<form class="layui-form" lay-filter="searchForm">
<div class="layui-row">
<div class="layui-col-xs3 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label required">项目名称</label>
<div class="layui-input-block">
<input type="text" name="subName" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-xs3 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label required">项目属地</label>
<div class="layui-input-block">
<select name="subjectId">
<option value="">请选择</option>
<c:forEach items="${JSDD }" var="hy">
<option value="${hy.code }">${hy.title }</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="layui-col-xs3 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label required">行业类别</label>
<div class="layui-input-block">
<select name="indusKind" v-model="indusKind" id="indusKind" lay-search="">
<option value="">请选择</option>
<c:forEach items="${HYFL }" var="hy">
<option value="${hy.id }">${hy.title }</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="layui-col-xs3 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">进度范围(%)</label>
<div class="layui-input-block time_box">
<input type="number" name="numBlMin" placeholder="最小进度比例" autocomplete="off" class="layui-input" style="width:130px">
<span class="split_txt">至</span>
<input type="number" name="numBlMax" placeholder="最大进度比例" autocomplete="off" class="layui-input" style="width:130px">
</div>
</div>
</div>
<div class="layui-col-xs3 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label required">建设性质</label>
<div class="layui-input-block">
<select name="propKind">
<option value="">请选择</option>
<c:forEach items="${JSXZ}" var="js">
<option value="${js.code }">${js.title }</option>
</c:forEach>
</select>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
<div class="layui-form-item">
<button type="button" class="layui-btn layui-btn-normal" @click="search">查询</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="table_box" style="padding-top: 0;">
<div class="table_process">
<table id="table1" lay-filter="test"></table>
<div class="pagination-box" id="pagination"></div>
</div>
</div>
<div style="height: 20px;"></div>
</div>
</template>
<script type="text/html" id="subName">
<span title="{{d.subName}}">{{d.subName}}</span>
</script>
<script type="text/html" id="amt">
<span title="">总投资：{{d.amtTotal||0}}万元</span>
</script>
<script type="text/html" id="amtYear">
{{# var computedPer = function(total, now){
return (total == 0) ? 0 : parseInt(now * 100 / total +0.5);
};
}}
<span title="">
<span class="qianse">年度计划投资：</span><strong class="lanse">{{d.yearAmt||0}}</strong> 万元 <br/>
<span class="qianse">年度完成投资：</span><strong class="lanse">{{d.yearAmtSj||0}}</strong> 万元(<i class="lanse">{{computedPer(d.yearAmt||0, d.yearAmtSj||0)}} %</i> )
</span>
</script>
<script type="text/html" id="date">
<div title="">
<div class="line"><span class="qianse">计划开工：</span><span class="shense">{{d.beginDate}}</span>
</div>
<div class="line"><span class="qianse">计划竣工：</span><span class="shense">{{d.endDate}}</span>
</div>
</div>
</script>
<script type="text/html" id="toolBar">
<div class="toolBar">
<span lay-event="toDetail">周调度图片展示</span>
</div>
</script>
<script>
new Vue({
el: "#app",
template: "#template",
data: {
winH: 0,
dataList : [],
pageNo : 1,
kind: {},
tableName: 'test',
sort: {field: "amtTotal", type:""},
pageSize : 10
},
mounted : function() {
this.init()
},
methods: {
init : function() {
this.winH = document.body.clientHeight
var xmlx = [];
<c:forEach items="${XMLX}" var="xm">
xmlx.push({value:"${xm.code}", name:"${xm.title}"});
</c:forEach>
this.kind = layui.xmSelect.render({
el: "#kind",
language:'zn',
data:xmlx
});
this.getData();
window.toDetail = this.toDetail;
window.showImage = this.showImage;
},
getData : function(){
var self = this;
var param = layui.form.getValue("searchForm");
param.kind = "";
param.pageNo = this.pageNo;
param.pageSize = this.pageSize;
param.orderBy = this.sort.field;
param.orderType = this.sort.type || null;
App.postJson("/api/graphicProgress/list",param, function(res){
self.dataList = res.rows;
self.loadPage(res.total);
self.loadTable();
});
},
loadTable : function(){
for(var i=0;i<this.dataList.length;i++){
var tem = this.dataList[i];
switch(tem.status){
case '0':
tem.statusName = '暂存';
break;
case '1':
tem.statusName = '项目前期';
break;
case '6':
tem.statusName = '待开工';
break;
case '7':
tem.statusName = '施工中';
break;
case '8':
tem.statusName = '暂停施工';
break;
case 'A':
tem.statusName = '已竣工';
break;
}
}
var self = this;
layui.table.render({
elem: '#table1', // 指定原始表格元素选择器（推荐id选择器）
even: true,
autoSort: false,
initSort: self.sort,
cols: [[ // 设置表头
{type: 'numbers', fixed: 'left', align: 'center',title:'序号',width:50},
{field: 'subName', fixed: 'left', title: '项目名称', minWidth: 300, templet: '#subName'},
{field: 'amtTotal', title: '总投资额', minWidth: 162, templet: '#amt' },
{field: 'amtYear', title: '计划/完成投资', minWidth: 231, templet: '#amtYear',sort:"amtYear"},
{field: 'beginDate', title: '计划日期', minWidth: 180, templet: '#date'},
{field: 'statusName', title: '项目进度', minWidth: 100},
{field: 'num_bl', title: '进度比例-%', width: 120},
{field: 'unitName', title: '项目单位', minWidth: 200},
{title: '操作', width: 120, align:'center', toolbar: '#toolBar', fixed: 'right'},
]],
fixed:true,
height:window.screen.availHeight-400,
data : self.dataList,
done: function (res, curr, count) {
res.data.forEach(function (item, index) {
$(".layui-table-body tr").resize(function () {
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});
});
//初始化高度，使得冻结行表体高度一致
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});
});
}
});
layui.table.on('tool('+this.tableName+')', function(obj){
var event = obj.event;
self[event].call(this, obj);
});
layui.table.on('sort('+this.tableName+')', function(obj) {
self.sort = obj;
self.getData();
return;
})
},
loadPage : function(totalCount){
var self = this;
layui.laypage.render({
elem: 'pagination',
count: totalCount,
curr : self.pageNo,
limit : self.pageSize,
layout: ['count', 'prev', 'page', 'next', 'skip'],
jump: function(obj, first) {
//首次不执行
if(!first) {
self.pageNo = obj.curr;
self.getData();
}
}
});
},
toDetail : function(obj){
//详情
var index = layer.open({
type: 2,
area: ['1000px', '800px'],
title:obj.data.subName||"",
content: App.getUrl("/graphicProgress/detail?subId="+ obj.data.id),
});
layui.layer.full(index);
},
search : function(){
var param = layui.form.getValue("searchForm");
this.pageNo = 1;
this.getData();
}
}
});
</script>
</body>
</html>