<template>
|
<div>
|
<transition name="el-zoom-in-right">
|
<div class="project-main">
|
<div>
|
<div class="f-r f-r-between project-top">
|
<div class="font-14 search-switch" @click="formShow=true">
|
条件筛选 <i style="font-size: 16px" class="el-icon-arrow-down"></i>
|
</div>
|
<div class="font-14 color-333">全部{{total}}条结果</div>
|
</div>
|
<!-- 列表 -->
|
<div class="com-c-box" :loading="loading">
|
<div class="info-main">
|
<div class="p-item f-r f-r-top" v-for="(t,index) in projectLists" :key="index">
|
<img :src="typeIcon(t.type)" class="t-icon"/>
|
<div class="f-1">
|
<div class="font-18 project-name font-bold">{{t.projectName}}</div>
|
<div style="color:#235686" class="font-12">{{t.projectCategoryName}}</div>
|
<div class="f-r f-r-between">
|
<div class="font-14 color-999">建设单位</div>
|
<div class="font-14 color-333">{{t.buildOrgName}}</div>
|
</div>
|
<div class="f-r f-r-between">
|
<div class="font-14 color-999">建设起止年限</div>
|
<div class="font-14 color-333">{{t.buildYearStart}}-{{t.buildYearEnd}}</div>
|
</div>
|
<div class="f-r f-r-between">
|
<div class="font-14 color-999">主要建设内容</div>
|
<div class="font-14 color-333">{{t.detail}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="f-r f-r-center btn-bot">
|
<!-- 分页-->
|
<el-pagination
|
small
|
:current-page="page.pageNum"
|
:page-size="page.pageSize"
|
layout="prev, pager, next"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</transition>
|
<searchForm v-if="formShow" @close="formShow=false"></searchForm>
|
</div>
|
</template>
|
|
<script>
|
import searchForm from "@/views/home/searchForm";
|
export default {
|
name: "projectList",
|
components:{ searchForm },
|
data(){
|
return {
|
loading:false, // 列表加载
|
formShow:false, // 右侧表单
|
total:23,
|
page:{
|
pageNum:1,
|
pageSize:10
|
},
|
projectLists:[
|
{ projectName:'xxxxx固定资产项目一',projectCategoryName:'综合业务楼',buildOrgName:'许昌尉氏县分公司',buildYearStart:2023,buildYearEnd:2025,detail:'建设规模5200平法米'},
|
{ projectName:'xxxxx固定资产项目一',projectCategoryName:'综合业务楼',buildOrgName:'许昌尉氏县分公司',buildYearStart:2023,buildYearEnd:2025,detail:'建设规模5200平法米'},
|
{ projectName:'xxxxx固定资产项目一',projectCategoryName:'综合业务楼',buildOrgName:'许昌尉氏县分公司',buildYearStart:2023,buildYearEnd:2025,detail:'建设规模5200平法米'},
|
{ projectName:'xxxxx固定资产项目一',projectCategoryName:'综合业务楼',buildOrgName:'许昌尉氏县分公司',buildYearStart:2023,buildYearEnd:2025,detail:'建设规模5200平法米'},
|
{ projectName:'xxxxx固定资产项目一',projectCategoryName:'综合业务楼',buildOrgName:'许昌尉氏县分公司',buildYearStart:2023,buildYearEnd:2025,detail:'建设规模5200平法米'},
|
{ projectName:'xxxxx固定资产项目一',projectCategoryName:'综合业务楼',buildOrgName:'许昌尉氏县分公司',buildYearStart:2023,buildYearEnd:2025,detail:'建设规模5200平法米'},
|
{ projectName:'xxxxx固定资产项目一',projectCategoryName:'综合业务楼',buildOrgName:'许昌尉氏县分公司',buildYearStart:2023,buildYearEnd:2025,detail:'建设规模5200平法米'},
|
]
|
}
|
},
|
methods:{
|
close(){
|
this.$emit('close')
|
},
|
// 展示不同图标
|
typeIcon(type) {
|
// type 1 未进行 2已完成 3进行中 4已取消
|
let src = require('@/assets/images/map/wait.png')
|
switch (type) {
|
case 1:
|
src = require("@/assets/images/map/wait.png")
|
break
|
case 2:
|
src = require("@/assets/images/map/end.png")
|
break
|
case 3:
|
src = require("@/assets/images/map/ing.png")
|
break
|
default:
|
src = require("@/assets/images/map/cancel.png")
|
break
|
}
|
return src
|
},
|
search(pageNum){
|
if(pageNum){
|
this.page.pageNum = pageNum
|
}
|
this.loading = true
|
},
|
//分页
|
handleSizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
this.search(1);
|
},
|
handleCurrentChange(pageNum) {
|
this.page.pageNum = pageNum;
|
this.search(1);
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.project-main{
|
position: absolute;
|
top:0;
|
right: 0;
|
bottom: 0;
|
width: 400px;
|
background-color: #FFFFFF;
|
}
|
.project-top{
|
padding:15px;
|
}
|
.search-switch{
|
width: 100px;
|
line-height: 32px;
|
border-radius: 4px;
|
text-align: center;
|
cursor: pointer;
|
border: 1px solid #c8ced5;
|
}
|
.com-c-box{
|
overflow-y: auto;
|
max-height: calc(100vh - 240px);
|
}
|
>>>.com-c-box::-webkit-scrollbar {
|
display: none;
|
}
|
.info-main{
|
padding: 15px;
|
position: relative;
|
}
|
.t-icon{
|
min-width: 40px;
|
max-width: 40px;
|
height: 40px;
|
margin-right: 10px;
|
}
|
.p-item{
|
line-height: 24px;
|
padding:15px 0;
|
border-top: 1px solid #eeeeee;
|
}
|
.project-name{
|
color: #333333;
|
}
|
.project-name:hover{
|
color: #0D997C;
|
cursor: pointer;
|
}
|
</style>
|
