jiangyy
4 years ago
3 changed files with 1267 additions and 0 deletions
@ -0,0 +1,433 @@ |
|||
<template> |
|||
<div> |
|||
<div v-if="flag==='classify'"> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__demo}"> |
|||
<el-form :inline="true" |
|||
:model="tableParams" |
|||
@keyup.enter.native="loadTable()"> |
|||
|
|||
<div> |
|||
|
|||
<el-form-item label="所属组织" |
|||
:label-width="labelWidth"> |
|||
<el-cascader ref="myCascader" |
|||
v-model="agencyIdArray" |
|||
style="width:480px" |
|||
:key="iscascaderShow" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
@change="handleChange" |
|||
clearable></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<div> |
|||
<el-form-item label="统计类型" |
|||
:label-width="labelWidth"> |
|||
<el-radio v-model="staticType" |
|||
label="end">截止累计值</el-radio> |
|||
<el-radio v-model="staticType" |
|||
label="Interval">区间新增值</el-radio> |
|||
|
|||
<el-date-picker style="margin-left:30px" |
|||
v-if="staticType==='Interval'" |
|||
v-model="timeArray" |
|||
type="daterange" |
|||
range-separator="至" |
|||
@change="handleTimeChange" |
|||
format="yyyy-MM-dd" |
|||
:picker-options="pickerOptions" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
|
|||
<el-date-picker style="margin-left:30px" |
|||
v-if="staticType==='end'" |
|||
v-model="endTimeModel" |
|||
@change="handleEndTimeChange" |
|||
:picker-options="pickerOptions" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="loadTable()" |
|||
type="primary">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="loadOutTableData()" |
|||
type="primary">导出</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-form> |
|||
|
|||
<el-table :data="tableData" |
|||
ref="ref_table" |
|||
style="width: 100%;margin-bottom: 20px;" |
|||
row-key="categoryCode" |
|||
border |
|||
default-expand-all |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"> |
|||
<el-table-column prop="categoryName" |
|||
label="所属类别" |
|||
min-width="280px" |
|||
header-align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="projectTotal" |
|||
label="项目总数" |
|||
header-align="center" |
|||
align="center" |
|||
min-width="180px"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" |
|||
style="color:#1C6AFD;" |
|||
size="small" |
|||
@click="handleToProjectList(scope.row,'all')">{{scope.row.projectTotal}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="totalRatio" |
|||
header-align="center" |
|||
align="center" |
|||
min-width="180px" |
|||
label="项目总数占比"> |
|||
</el-table-column> |
|||
<el-table-column prop="closedProjectTotal" |
|||
header-align="center" |
|||
align="center" |
|||
min-width="180px" |
|||
label="结案项目数"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" |
|||
style="color:#1C6AFD;" |
|||
size="small" |
|||
@click="handleToProjectList(scope.row,'closed')">{{scope.row.projectTotal}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="closedRatio" |
|||
header-align="center" |
|||
align="center" |
|||
min-width="180px" |
|||
label="项目结案率"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
</el-card> |
|||
</div> |
|||
<project-list ref="ref_projectList" |
|||
v-if="flag==='project'" |
|||
@back="backToClassify"></project-list> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@js/util.js'; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import ProjectList from "./projectList" |
|||
|
|||
let loading // 加载动画 |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
flag: "classify",//页面标识 |
|||
tableData: [], |
|||
|
|||
downloadLoading: false, |
|||
|
|||
//查询条件标题宽度 |
|||
labelWidth: '70px', |
|||
|
|||
casOptions: [], |
|||
agencyIdArray: [], |
|||
selAgencyObj: {}, |
|||
iscascaderShow: 0, |
|||
|
|||
optionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
pickerOptions: { //控制时间范围 |
|||
disabledDate (time) { |
|||
return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000)) |
|||
} |
|||
}, |
|||
|
|||
staticType: 'end', |
|||
tableParams: { |
|||
orgId: '', //组织ID |
|||
orgType: '', //组织类型 组织：agency，网格：grid |
|||
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
|||
endTime: '', //结束时间【yyyymmdd】, |
|||
}, |
|||
timeArray: ['', ''], |
|||
|
|||
//导出表格部分 |
|||
agencyName: '', |
|||
startTimeShow: '',//导出表格标题处显示的内容 |
|||
endTimeShow: '', //导出表格标题处显示的内容 |
|||
endTimeModel: new Date() - 60 * 60 * 24 * 2, |
|||
|
|||
} |
|||
}, |
|||
|
|||
mounted () { |
|||
this.customerId = localStorage.getItem('customerId') |
|||
this.initData() |
|||
}, |
|||
|
|||
methods: { |
|||
async initData () { |
|||
this.startLoading() |
|||
this.initDate() |
|||
await this.getAgencylist()//获取组织级联列表 |
|||
await this.loadTable()//获取组织级联列表 |
|||
this.endLoading() |
|||
}, |
|||
|
|||
async getAgencylist () { |
|||
const url = '/gov/org/customeragency/orgtree' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist' |
|||
|
|||
const params = { |
|||
customerId: this.customerId |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
++this.iscascaderShow |
|||
this.casOptions = [] |
|||
this.agencyIdArray.length = [] |
|||
this.tableParams.orgId = '' |
|||
if (data) { |
|||
this.casOptions.push(data) |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async loadTable () { |
|||
if (this.validate()) { |
|||
// const url = '/data/report/screenproject/selectprojectcategory' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/data/report/screenproject/selectprojectcategory' |
|||
|
|||
if (this.staticType === 'end') { |
|||
this.tableParams.startTime = '' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, this.tableParams) |
|||
if (code === 0) { |
|||
this.tableData = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
//跳转到项目列表页面 |
|||
handleToProjectList (row, type) { |
|||
this.flag = "project" |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_projectList.initData(this.agencyIdArray, row, type, this.casOptions, this.selAgencyObj) |
|||
}) |
|||
}, |
|||
|
|||
//返回 |
|||
backToClassify () { |
|||
this.flag = "classify" |
|||
}, |
|||
|
|||
handleChange (value) { |
|||
if (value && value.length > 0) { |
|||
this.selAgencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
|||
this.tableParams.orgId = this.selAgencyObj.agencyId |
|||
this.tableParams.orgType = this.selAgencyObj.level |
|||
this.agencyName = this.selAgencyObj.agencyName |
|||
} else { |
|||
this.selAgencyObj = {} |
|||
this.tableParams.orgId = '' |
|||
this.tableParams.orgType = '' |
|||
this.agencyName = '' |
|||
} |
|||
}, |
|||
|
|||
initDate () { |
|||
//设置默认结束日期为前一天 |
|||
const date = new Date() |
|||
const month = date.getMonth() + 1 > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1) |
|||
const day = date.getDate() - 1 > 9 ? (date.getDate() - 1) : '0' + (date.getDate() - 1) |
|||
const yesterday = date.getFullYear() + '-' + month + '-' + day |
|||
this.timeArray = ['', yesterday] |
|||
this.endTimeModel = yesterday |
|||
|
|||
let yesterdayArray = yesterday.split('-') |
|||
|
|||
this.tableParams.endTime = yesterdayArray[0] + yesterdayArray[1] + yesterdayArray[2] |
|||
|
|||
this.endTimeShow = yesterdayArray[0] + '年' + yesterdayArray[1] + '月' + yesterdayArray[2] + '日' |
|||
}, |
|||
|
|||
|
|||
handleEndTimeChange (item) { |
|||
if (item) { |
|||
const endTimeArray = util.dateFormatter(item, 'date').split('-') |
|||
this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2] |
|||
this.endTime = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日' |
|||
} else { |
|||
this.tableParams.endTime = '' |
|||
this.endTimeShow = '' |
|||
} |
|||
}, |
|||
|
|||
handleTimeChange (time) { |
|||
if (time) { |
|||
const startTimeArray = util.dateFormatter(time[0], 'date').split('-') |
|||
const endTimeArray = util.dateFormatter(time[1], 'date').split('-') |
|||
|
|||
this.tableParams.startTime = startTimeArray[0] + startTimeArray[1] + startTimeArray[2] |
|||
this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2] |
|||
|
|||
this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日' |
|||
this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日' |
|||
} else { |
|||
this.tableParams.startTime = '' |
|||
this.tableParams.endTime = '' |
|||
this.startTimeShow = '' |
|||
this.endTimeShow = '' |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
validate () { |
|||
|
|||
if (this.staticType === 'end' && !this.tableParams.endTime) { |
|||
this.$message.info("请选择结束日期") |
|||
return false |
|||
} |
|||
|
|||
return true |
|||
}, |
|||
|
|||
//导出表格 |
|||
async loadOutTableData () { |
|||
if (!this.validate()) { |
|||
return false |
|||
} |
|||
let title = this.agencyName |
|||
|
|||
if (this.staticType === 'Interval') { |
|||
title = title + ' ' + this.startTimeShow + '-' + this.endTimeShow + '区间增长值' |
|||
} else { |
|||
title = title + ' 截止至' + this.endTimeShow + '累计值' |
|||
} |
|||
console.log(title) |
|||
|
|||
|
|||
const url = "/data/report/screenproject/selectprojectcategory/export" |
|||
|
|||
|
|||
console.log(this.tableParams) |
|||
app.ajax.exportFilePost( |
|||
url, |
|||
this.tableParams, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.clientHeight - 60 - 80 - 80 - 100 |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'env']) |
|||
}, |
|||
components: { |
|||
ProjectList |
|||
}, |
|||
activated () { |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_table.doLayout() // 解决表格错位 |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="css" scoped> |
|||
.myNote { |
|||
display: -webkit-box; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
/* .register .el-table .el-table__header-wrapper { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
}*/ |
|||
/* |
|||
.register .el-table .el-table__fixed-body-wrapper { |
|||
height: calc(100% - 44px); |
|||
margin-top: 44px; |
|||
overflow-y: auto !important; |
|||
} */ |
|||
</style> |
|||
|
|||
@ -0,0 +1,373 @@ |
|||
<template> |
|||
<div> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__demo}"> |
|||
|
|||
<div class="div_info_item"> |
|||
<span class="span_item_title">项目标题：</span> |
|||
<span>{{info.projectTitle}}</span> |
|||
</div> |
|||
|
|||
<div class="div_info_item"> |
|||
<span class="span_item_title">项目内容：</span> |
|||
<span v-if="info.projectContent">{{info.projectContent}}</span> |
|||
<span v-else>无</span> |
|||
</div> |
|||
|
|||
<div class="div_info_item"> |
|||
<span class="span_item_title">上报时间：</span> |
|||
|
|||
<span v-if="info.reportTime">{{info.reportTime}}</span> |
|||
<span v-else>无</span> |
|||
</div> |
|||
<div class="div_info_item"> |
|||
<span class="span_item_title">上报人：</span> |
|||
<span v-if="info.reportUserName">{{info.reportUserName}}</span> |
|||
<span v-else>无</span> |
|||
</div> |
|||
<div class="div_info_item"> |
|||
<span class="span_item_title">电话：</span> |
|||
<span v-if="info.mobile">{{info.mobile}}</span> |
|||
<span v-else>无</span> |
|||
</div> |
|||
<div class="div_info_item"> |
|||
<span class="span_item_title">地点：</span> |
|||
<span v-if="info.reportAddress">{{info.reportAddress}}</span> |
|||
<span v-else>无</span> |
|||
</div> |
|||
<div class="div_info_item"> |
|||
<span class="span_item_title">所属分类：</span> |
|||
<span v-if="info.categoryName">{{info.categoryName}}</span> |
|||
<span v-else>无</span> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="div_process"> |
|||
<div class="m-list" |
|||
v-show="info.processList.length>0"> |
|||
<div class="title">处理进展</div> |
|||
<div class="list"> |
|||
<div :class="['item',{'z-on': index===0}]" |
|||
v-for="(item,index) in info.processList" |
|||
:key="index"> |
|||
|
|||
<div class="name">【{{ item.operationShow}}】</div> |
|||
<div class="date"> |
|||
<span>{{ item.reponseTime }}</span> |
|||
|
|||
</div> |
|||
<div class="detail"> |
|||
<span class="detail-field">处理部门：</span> |
|||
<span class="detail-value">{{ item. handleDeptName }}</span> |
|||
</div> |
|||
|
|||
<div class="detail"> |
|||
<span class="detail-field">处理意见：</span> |
|||
<span class="detail-value"> |
|||
<span>{{ item.suggestion}}</span> |
|||
</span> |
|||
</div> |
|||
<div class="detail"> |
|||
<el-upload class="upload-demo" |
|||
action="" |
|||
:on-preview="handleFileDownload" |
|||
:limit="50" |
|||
:file-list="fileList"> |
|||
|
|||
</el-upload> |
|||
<!-- <attachment-list list="{{item.attachments}}" /> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</el-card> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
let loading // 加载动画 |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
projectId: "",//项目id |
|||
formData: {}, |
|||
|
|||
//查询条件标题宽度 |
|||
labelWidth: '100px', |
|||
|
|||
info: { |
|||
projectTitle: "",//标题 |
|||
projectId: "",//项目id |
|||
projectContent: "",//议题内容，其实就是项目内容 |
|||
imgList: "",//图片列表 |
|||
reportTime: "",//上报时间，对应的是立项时间;格式：yyyy-MM-dd HH:mm |
|||
categoryName: "",//所属类别名称 |
|||
reportUserId: "",//上报人Id |
|||
reportUserRoleSet: "",//上报人角色列表，grid_member:网格员； |
|||
reportUserName: "",//上报人名称；山东路-尹女士 |
|||
mobile: "",//上报人电话 |
|||
reportAddress: "",//上报位置 |
|||
processList: [],// |
|||
}, |
|||
fileList: [ |
|||
// { |
|||
// name: 'food.jpeg', |
|||
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
// }, { |
|||
// name: 'food2.jpeg', |
|||
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
// } |
|||
], |
|||
} |
|||
}, |
|||
|
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
async initData (projectId) { |
|||
this.startLoading() |
|||
this.projectId = projectId |
|||
await this.loadDetail()//获取项目详情 |
|||
this.endLoading() |
|||
}, |
|||
|
|||
async loadDetail () { |
|||
|
|||
const url = '/data/report/screen/project/projectdetailv2' |
|||
|
|||
// const params = { |
|||
// projectId: this.projectId |
|||
// } |
|||
const params = { |
|||
projectId: "440dfb6f22d9860fb1c2d1fc044a901f" |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
|
|||
if (msg === "success" && code === 0 && data.length > 0) { |
|||
this.info = data[0] |
|||
// info = copyKeyHave(info, data[0]); |
|||
|
|||
this.info.processList.forEach(element => { |
|||
//关闭：close; 回应 response，结案closed_case，退回return，部门流转transfer，创建项目created |
|||
if (element.operation === 'close') { |
|||
element.operationShow = '关闭' |
|||
} else if (element.operation === 'response') { |
|||
element.operationShow = '回应' |
|||
} else if (element.operation === 'closed_case') { |
|||
element.operationShow = '结案' |
|||
} else if (element.operation === 'return') { |
|||
element.operationShow = '退回' |
|||
} else if (element.operation === 'transfer') { |
|||
element.operationShow = '部门流转' |
|||
} else if (element.operation === 'created') { |
|||
element.operationShow = '创建项目' |
|||
} |
|||
}); |
|||
|
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.clientHeight - 60 - 80 - 80 - 100 |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'env']) |
|||
}, |
|||
components: {}, |
|||
activated () { |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_table.doLayout() // 解决表格错位 |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.div_info_item { |
|||
line-height: 25px; |
|||
padding: 10px; |
|||
font-size: 15px; |
|||
display: flex; |
|||
.span_item_title { |
|||
flex: 0 0 100px; |
|||
|
|||
text-align: right; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
.div_process { |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.m-list { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
padding-bottom: 15px; |
|||
background-color: #ffffff; |
|||
|
|||
.title { |
|||
line-height: 40px; |
|||
border-bottom: 1px solid #e7eeee; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
.more-btn { |
|||
position: absolute; |
|||
z-index: 1; |
|||
top: 10px; |
|||
right: 10px; |
|||
line-height: 25px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(12, 74, 157, 1); |
|||
} |
|||
|
|||
.list { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
margin-top: 15px; |
|||
margin-left: 25px; |
|||
padding: 0 0 0 15px; |
|||
border-left: 1px solid #e7eeee; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
z-index: 1; |
|||
display: block; |
|||
top: -1px; |
|||
left: -1px; |
|||
width: 2px; |
|||
height: 10px; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.item { |
|||
position: relative; |
|||
z-index: 2; |
|||
margin-bottom: 5px; |
|||
padding-bottom: 5px; |
|||
border-bottom: 1px solid #e7eeee; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
display: block; |
|||
position: absolute; |
|||
top: 9px; |
|||
left: -20px; |
|||
width: 10px; |
|||
height: 10px; |
|||
background: #999; |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
&.z-on { |
|||
&::before { |
|||
background: rgba(230, 0, 0, 1); |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 47px; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
background: rgba(255, 255, 255, 1); |
|||
border: 1px solid rgba(153, 153, 153, 1); |
|||
border-radius: 10px; |
|||
font-size: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.name { |
|||
position: relative; |
|||
margin-bottom: 5px; |
|||
margin-left: -7px; |
|||
line-height: 25px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
.date { |
|||
line-height: 20px; |
|||
font-size: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.detail { |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
line-height: 25px; |
|||
|
|||
.detail-field { |
|||
width: 22%; |
|||
text-align: justify; |
|||
text-align-last: justify; |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
.detail-value { |
|||
width: 78%; |
|||
color: #333333; |
|||
.detail-link { |
|||
display: inline; |
|||
color: #0c4a9d; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,461 @@ |
|||
<template> |
|||
<div> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__demo}"> |
|||
<el-form :inline="true" |
|||
:model="tableParams" |
|||
@keyup.enter.native="loadTable()"> |
|||
|
|||
<div> |
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="handleBack()" |
|||
type="primary">返回</el-button> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="所属组织" |
|||
:label-width="labelWidth"> |
|||
<el-cascader ref="myCascader" |
|||
v-model="agencyIdArray" |
|||
style="width:480px" |
|||
:key="iscascaderShow" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
@change="handleChange" |
|||
clearable></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<div> |
|||
<el-form-item label="统计类型" |
|||
:label-width="labelWidth"> |
|||
<el-radio v-model="staticType" |
|||
label="end">截止累计值</el-radio> |
|||
<el-radio v-model="staticType" |
|||
label="Interval">区间新增值</el-radio> |
|||
|
|||
<el-date-picker style="margin-left:30px" |
|||
v-if="staticType==='Interval'" |
|||
v-model="timeArray" |
|||
type="daterange" |
|||
range-separator="至" |
|||
@change="handleTimeChange" |
|||
format="yyyy-MM-dd" |
|||
:picker-options="pickerOptions" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
|
|||
<el-date-picker style="margin-left:30px" |
|||
v-if="staticType==='end'" |
|||
v-model="endTimeModel" |
|||
@change="handleEndTimeChange" |
|||
:picker-options="pickerOptions" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="loadTable()" |
|||
type="primary">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="loadOutTableData()" |
|||
type="primary">导出</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-form> |
|||
|
|||
<el-table :data="tableData" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column prop="category" |
|||
label="类别" |
|||
min-width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="projectTitle" |
|||
label="项目标题" |
|||
min-width="260"> |
|||
</el-table-column> |
|||
<el-table-column prop="gridName" |
|||
label="所属网格" |
|||
min-width="240"> |
|||
</el-table-column> |
|||
<el-table-column prop="projectStatus" |
|||
label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.projectStatus==='pending'" |
|||
style="color:#feb349;" |
|||
size="small">处理中</span> |
|||
<span v-if="scope.row.projectStatus==='closed'" |
|||
style="color:#00A7A9;" |
|||
size="small">已结案</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" |
|||
label="创建时间" |
|||
min-width="140"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" |
|||
style="color:#D51010;" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看详情</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="tableParams.pageNo" |
|||
:page-sizes="[20, 30, 50]" |
|||
:page-size="tableParams.pageSize" |
|||
layout="sizes, prev, pager, next" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-card> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="diaShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'项目详情'" |
|||
top="5vh" |
|||
width="50%" |
|||
@closed="diaClose"> |
|||
<project-Detail ref="ref_projectDetail"> |
|||
|
|||
</project-Detail> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@js/util.js'; |
|||
import ProjectDetail from "./projectDetail" |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
let loading // 加载动画 |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
tableData: [], |
|||
|
|||
downloadLoading: false, |
|||
|
|||
//查询条件标题宽度 |
|||
labelWidth: '70px', |
|||
casOptions: [], |
|||
agencyIdArray: [], |
|||
selAgencyObj: {}, |
|||
iscascaderShow: 0, |
|||
|
|||
optionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
pickerOptions: { //控制时间范围 |
|||
disabledDate (time) { |
|||
return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000)) |
|||
} |
|||
}, |
|||
staticType: 'end', |
|||
tableParams: { |
|||
status: '', //项目状态：closed：已结案，all：全部 |
|||
categoryCode: '', //分类code |
|||
orgId: '', //组织ID |
|||
pageSize: 20, |
|||
pageNo: 1, |
|||
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
|||
endTime: '', //结束时间【yyyymmdd】, |
|||
}, |
|||
total: 0, |
|||
timeArray: ['', ''], |
|||
|
|||
agencyName: '', |
|||
startTimeShow: '',//导出表格标题处显示的内容 |
|||
endTimeShow: '', //导出表格标题处显示的内容 |
|||
endTimeModel: new Date() - 60 * 60 * 24 * 2, |
|||
|
|||
//弹出详情相关 |
|||
diaShow: false, |
|||
|
|||
} |
|||
}, |
|||
|
|||
mounted () { |
|||
this.customerId = localStorage.getItem('customerId') |
|||
}, |
|||
|
|||
methods: { |
|||
async initData (agencyIdArray, row, type, casOptions, selAgencyObj) { |
|||
this.startLoading() |
|||
//初始化日期 |
|||
this.initDate() |
|||
|
|||
//初始化组织数据 |
|||
this.initAgencyList(casOptions) |
|||
|
|||
this.tableParams.status = type |
|||
this.tableParams.categoryCode = row.categoryCode |
|||
this.agencyIdArray = agencyIdArray |
|||
this.selAgencyObj = selAgencyObj |
|||
this.tableParams.orgId = this.selAgencyObj.agencyId |
|||
|
|||
await this.loadTable()//获取组织级联列表 |
|||
|
|||
this.endLoading() |
|||
}, |
|||
|
|||
initAgencyList (casOptions) { |
|||
++this.iscascaderShow |
|||
this.casOptions = [] |
|||
this.agencyIdArray.length = [] |
|||
this.tableParams.orgId = '' |
|||
if (casOptions) { |
|||
this.casOptions = casOptions |
|||
} |
|||
}, |
|||
|
|||
async loadTable () { |
|||
if (this.validate()) { |
|||
// const url = '/data/report/screenproject/selectcategoryprojectlist' |
|||
const url = 'http://yapi.elinkservice.cn/mock/102/data/report/screenproject/selectcategoryprojectlist' |
|||
|
|||
if (this.staticType === 'end') { |
|||
this.tableParams.startTime = '' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, this.tableParams) |
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.tableData = data.list |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
//跳转到项目列表页面 |
|||
handleDetail (row) { |
|||
this.diaShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_projectDetail.initData(row.projectId) |
|||
}) |
|||
}, |
|||
|
|||
//关闭详情 |
|||
diaClose () { |
|||
this.diaShow = false |
|||
}, |
|||
|
|||
handleChange (value) { |
|||
if (value && value.length > 0) { |
|||
this.selAgencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
|||
this.tableParams.orgId = this.selAgencyObj.agencyId |
|||
this.agencyName = this.selAgencyObj.agencyName |
|||
} else { |
|||
this.selAgencyObj = {} |
|||
this.tableParams.orgId = '' |
|||
this.agencyName = '' |
|||
} |
|||
}, |
|||
|
|||
initDate () { |
|||
//设置默认结束日期为前一天 |
|||
const date = new Date() |
|||
const month = date.getMonth() + 1 > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1) |
|||
const day = date.getDate() - 1 > 9 ? (date.getDate() - 1) : '0' + (date.getDate() - 1) |
|||
const yesterday = date.getFullYear() + '-' + month + '-' + day |
|||
this.timeArray = ['', yesterday] |
|||
this.endTimeModel = yesterday |
|||
|
|||
let yesterdayArray = yesterday.split('-') |
|||
this.tableParams.endTime = yesterdayArray[0] + yesterdayArray[1] + yesterdayArray[2] |
|||
this.endTimeShow = yesterdayArray[0] + '年' + yesterdayArray[1] + '月' + yesterdayArray[2] + '日' |
|||
}, |
|||
|
|||
|
|||
handleEndTimeChange (item) { |
|||
if (item) { |
|||
const endTimeArray = util.dateFormatter(item, 'date').split('-') |
|||
this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2] |
|||
this.endTime = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日' |
|||
} else { |
|||
this.tableParams.endTime = '' |
|||
this.endTimeShow = '' |
|||
} |
|||
}, |
|||
|
|||
handleTimeChange (time) { |
|||
if (time) { |
|||
const startTimeArray = util.dateFormatter(time[0], 'date').split('-') |
|||
const endTimeArray = util.dateFormatter(time[1], 'date').split('-') |
|||
|
|||
this.tableParams.startTime = startTimeArray[0] + startTimeArray[1] + startTimeArray[2] |
|||
this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2] |
|||
|
|||
this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日' |
|||
this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日' |
|||
} else { |
|||
this.tableParams.startTime = '' |
|||
this.tableParams.endTime = '' |
|||
this.startTimeShow = '' |
|||
this.endTimeShow = '' |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.tableParams.pageSize = val |
|||
this.tableParams.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.tableParams.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
handleBack () { |
|||
this.$emit('back') |
|||
}, |
|||
validate () { |
|||
|
|||
if (this.staticType === 'end' && !this.tableParams.endTime) { |
|||
this.$message.info("请选择结束日期") |
|||
return false |
|||
} |
|||
|
|||
return true |
|||
}, |
|||
|
|||
//导出表格 |
|||
async loadOutTableData () { |
|||
if (!this.validate()) { |
|||
return false |
|||
} |
|||
let title = this.agencyName |
|||
|
|||
if (this.staticType === 'Interval') { |
|||
title = title + ' ' + this.startTimeShow + '-' + this.endTimeShow + '区间增长值' |
|||
} else { |
|||
title = title + ' 截止至' + this.endTimeShow + '累计值' |
|||
} |
|||
console.log(title) |
|||
|
|||
const url = "/data/report/screenproject/selectcategoryprojectlist/export" |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
this.tableParams, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.clientHeight - 60 - 80 - 80 - 100 |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'env']) |
|||
}, |
|||
components: { |
|||
ProjectDetail |
|||
}, |
|||
activated () { |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_table.doLayout() // 解决表格错位 |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="css" scoped> |
|||
.myNote { |
|||
display: -webkit-box; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
/* .register .el-table .el-table__header-wrapper { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
}*/ |
|||
/* |
|||
.register .el-table .el-table__fixed-body-wrapper { |
|||
height: calc(100% - 44px); |
|||
margin-top: 44px; |
|||
overflow-y: auto !important; |
|||
} */ |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue