<template>
|
<div class="app-container">
|
<el-card class="box-card" style="width: 100%" shadow="never">
|
<div class="f-r f-r-between">
|
<div class="total-item" :class="{'total-active':curId ==null}" @click.stop="changeType(null)">
|
<div class="total-title">项目总数</div>
|
<div class="total-num">{{ topInfo.projectTotal }}</div>
|
</div>
|
<div class="total-item" :class="{'total-active':curId ==0}" @click="changeType(0)">
|
<div class="total-title">未开工</div>
|
<div class="total-num">{{ topInfo.awaitNum }}</div>
|
</div>
|
<div class="total-item" :class="{'total-active':curId ==1}" @click="changeType(1)">
|
<div class="total-title">进行中</div>
|
<div class="total-num">{{ topInfo.ingNum }}</div>
|
</div>
|
<div class="total-item" :class="{'total-active':curId ==4}" @click="changeType(4)">
|
<div class="total-title">已延期</div>
|
<div class="total-num">{{ topInfo.postponeNum }}</div>
|
</div>
|
<div class="total-item" :class="{'total-active':curId ==2}" @click="changeType(2)">
|
<div class="total-title">已完成</div>
|
<div class="total-num">{{ topInfo.endNum }}</div>
|
</div>
|
<div class="total-item" :class="{'total-active':curId ==3}" @click="changeType(3)">
|
<div class="total-title">已取消</div>
|
<div class="total-num">{{ topInfo.cancelNum }}</div>
|
</div>
|
</div>
|
</el-card>
|
<el-card class="box-card" style="width: 100%;margin-top: 8px" shadow="never">
|
<!--搜索条件-->
|
<div class="filter-container">
|
<my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
|
</div>
|
<el-row style="margin-top: 15px">
|
<el-col>
|
<div>
|
<el-table
|
v-loading="loading"
|
:show-header="false"
|
:data="tableData"
|
fit
|
size="medium"
|
style="width: 100%">
|
<el-table-column
|
fixed="left"
|
width="240">
|
<template slot-scope="scope">
|
<div class="f-r">
|
<div>
|
<div class="project-name" @click="toDetail(scope.row.id)">{{ scope.row.projectName }}</div>
|
<div class="font-13 color-666">{{ scope.row.projectCode }}</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
fixed="left"
|
width="200">
|
<template slot-scope="scope">
|
<div>
|
<el-progress :percentage="scope.row.progressRate"></el-progress>
|
<div class="m-t-10 f-r f-r-between">
|
<el-tag :type="getStatusText(scope.row.status).type">{{getStatusText(scope.row.status).text}}</el-tag>
|
<div class="font-13 color-999">
|
当前进度
|
<span class="color-red">{{ scope.row.progressRate }}%</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
width="180">
|
<template slot-scope="scope">
|
<div class="font-13 color-666 text-center">类型</div>
|
<div class="font-13 color-333 text-center m-t-10">{{ scope.row.projectCategoryName }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
width="180">
|
<template slot-scope="scope">
|
<div class="font-13 color-666 text-center">建设单位</div>
|
<div class="font-13 color-333 text-center m-t-10">{{ scope.row.buildOrgName }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
width="180">
|
<template slot-scope="scope">
|
<div class="font-13 color-666 text-center">批复时间</div>
|
<div class="font-13 color-333 text-center m-t-10">{{ scope.row.approvalDate }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
width="180">
|
<template slot-scope="scope">
|
<div class="font-13 color-666 text-center">创建时间</div>
|
<div class="font-13 color-333 text-center m-t-10">{{ scope.row.createTime }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
width="180">
|
<template slot-scope="scope">
|
<div class="font-13 color-666 text-center">临期预警</div>
|
<div class="m-t-10 f-r f-r-center">
|
<el-switch
|
:disabled="scope.row.status===3"
|
v-model="scope.row.expirationNotifyStatus===1?true:false"
|
active-color="#13ce66"
|
@change="updateStatus(scope.row)">
|
</el-switch>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
align="center"
|
width="300">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="success"
|
v-if="scope.row.status!==3"
|
@click="warnSetting(scope.row)">预警设置
|
</el-button>
|
<el-button
|
v-if="scope.row.status!==3"
|
size="mini"
|
@click="sendCode(scope.row.id)">发送短信
|
</el-button>
|
<el-button
|
size="mini"
|
type="warning"
|
@click="moneySetting(scope.row.id)">下达投资
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="f-r f-r-end page-box">
|
<el-pagination
|
:current-page="page.pageNum"
|
:page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
|
:page-size="page.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="page.total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
<!-- 预警设置 -->
|
<warning-setting v-if="warningShow" :setting="comSetting" @close="warningShow=false" @search="search(1)"></warning-setting>
|
<!-- 下达投资 -->
|
<money-setting v-if="moneyShow" :setting="comSetting" @close="moneyShow=false" @search="search(1)"></money-setting>
|
<!-- 详情 -->
|
<detail v-if="detailShow" :setting="comSetting" @close="detailShow=false"></detail>
|
</div>
|
</template>
|
|
<script>
|
import items from './items'
|
import * as information from '@/api/projectManage/information'
|
import warningSetting from '@/views/projectManage/information/components/warningSetting'
|
import moneySetting from '@/views/projectManage/information/components/moneySetting'
|
import detail from '@/views/projectManage/information/detail'
|
import * as classify from "@/api/projectManage/classify";
|
import {updateInfoStatus} from "@/api/projectManage/information";
|
export default {
|
name: "index",
|
components: { warningSetting,moneySetting,detail },
|
data() {
|
return {
|
loading:false,
|
warningShow:false, // 预警设置
|
moneyShow:false, // 下达投资
|
detailShow:false, // 详情
|
comSetting:{
|
id:"",
|
title:""
|
},
|
curId:null, // 当前顶部类型Id
|
// 搜索框
|
items: items,
|
// 树数据
|
treeDataList: [],
|
// 搜索条件
|
filterFrom: {
|
projectName: null, // 项目总数
|
projectCode: null, // 项目编号
|
projectCategoryId: null, // 类型
|
buildOrgId: null, // 建设单位
|
expirationNotifyStatus: null, // 临时预警 0关闭 1开启
|
approvalDate: null, // 批复时间
|
createTime: null // 创建时间
|
},
|
topInfo: {
|
projectTotal: 0, // 项目总数
|
awaitNum: 0, // 未开工
|
ingNum: 0, // 进行中
|
postponeNum: 0, // 已延期
|
endNum: 0, // 已完成
|
cancelNum: 0, // 已取消
|
},
|
page: {
|
pageNum: 1,
|
pageSize: 10,
|
total: 0
|
},
|
tableData: [] // 列表数据
|
}
|
},
|
mounted() {
|
this.getTopInfo()
|
this.search(1)
|
},
|
methods: {
|
// 修改当前行预警状态
|
updateStatus(row){
|
let vm = this
|
let text = row.expirationNotifyStatus == 1 ? "关闭" : "开启";
|
vm.$modal.confirm('确认要' + text +'吗？').then(function() {
|
let params = Object.assign({},row)
|
params.status = row.expirationNotifyStatus == 1 ? 0 : 1
|
information.updateInfoStatus(params).then(res=>{
|
if(res){
|
row.status = row.expirationNotifyStatus == 1 ? 0 : 1
|
vm.$message.success(text + "成功");
|
vm.search()
|
}
|
})
|
})
|
},
|
// 详情
|
toDetail(id){
|
this.comSetting = {
|
id,
|
title:'项目详情'
|
}
|
this.detailShow = true
|
},
|
changeType(e){
|
this.curId = e
|
},
|
getTopInfo() {
|
information.getTotal().then(res => {
|
this.topInfo = res
|
})
|
},
|
//分页
|
handleSizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
this.search(1);
|
},
|
handleCurrentChange(pageNum) {
|
this.page.pageNum = pageNum;
|
this.search(1);
|
},
|
// 查询table列表
|
search(pageNum) {
|
if(pageNum){
|
this.page.pageNum = pageNum
|
}
|
this.loading = true
|
let params = Object.assign(this.filterFrom, this.page)
|
information.getInfolist(params).then(res => {
|
this.tableData = res.datas
|
this.page = {
|
pageIndex: res.pageIndex,
|
pageSize: res.pageSize,
|
totalRows: res.totalRows
|
}
|
this.loading = false
|
})
|
},
|
fifterForm(params) {
|
this.filterFrom = Object.assign(this.filterFrom, params)
|
this.search(1)
|
},
|
getStatusText(state) {
|
// 0 未开工 1 进行中 2 已完成 3 已取消 4 已延期
|
let obj = {
|
text: '',
|
type: 'success'
|
}
|
switch (state) {
|
case 0:
|
obj.text = '未开工'
|
obj.type = 'info'
|
break
|
case 1:
|
obj.text = '进行中'
|
obj.type = 'primary'
|
break
|
case 2:
|
obj.text = '已完成'
|
obj.type = 'success'
|
break
|
case 3:
|
obj.text = '已取消'
|
obj.type = 'warning'
|
break
|
case 4:
|
obj.text = '已延期'
|
obj.type = 'danger'
|
break
|
}
|
return obj
|
},
|
warnSetting(row){
|
this.comSetting = {
|
id:row.id,
|
createOrgId:row.createOrgId,
|
tempExpirationNotifyId: row.tempExpirationNotifyId,
|
title:'预警设置'
|
}
|
this.warningShow = true
|
},
|
sendCode(){
|
|
},
|
// 下达投资
|
moneySetting(id){
|
this.comSetting = {
|
id,
|
title:'下达投资'
|
}
|
this.moneyShow = true
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.total-item {
|
width: 15%;
|
padding: 12px 20px;
|
border-radius: 8px;
|
background-color: #eeeeee;
|
}
|
|
.total-item:hover {
|
cursor: pointer;
|
background-color: #0D997C;
|
}
|
.total-item:hover .total-num,.total-item:hover .total-title {
|
color: #ffffff;
|
}
|
.total-active{
|
background-color: #0D997C;
|
}
|
.total-active .total-num,.total-active .total-title{
|
color: #ffffff;
|
}
|
.total-title {
|
font-size: 14px;
|
color: #666;
|
text-align: center;
|
}
|
|
.total-num {
|
font-size: 22px;
|
margin-top: 5px;
|
color: #333;
|
font-weight: bold;
|
text-align: center;
|
}
|
.project-name {
|
letter-spacing: 1px;
|
font-size: 16px;
|
color: #333333;
|
cursor: pointer;
|
}
|
.project-name:hover{
|
color: #0D997C;
|
}
|
.m-t-10 {
|
margin-top: 10px;
|
}
|
</style>
|
