jiangyy
4 years ago
13 changed files with 3823 additions and 405 deletions
@ -0,0 +1,578 @@ |
|||||
|
<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"></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" |
||||
|
v-loading="tableLoading" |
||||
|
style="width: 100%;margin-bottom: 20px;" |
||||
|
:height="tableHeight" |
||||
|
border> |
||||
|
<el-table-column prop="staffName" |
||||
|
label="姓名" |
||||
|
align="center" |
||||
|
min-width="80px" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="mobile" |
||||
|
label="手机号" |
||||
|
align="center" |
||||
|
min-width="110px" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="orgName" |
||||
|
label="所属网格" |
||||
|
align="center" |
||||
|
min-width="190px" |
||||
|
header-align="center"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="patrolTimes" |
||||
|
label="巡查次数" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="100px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" |
||||
|
style="color:#1C6AFD;" |
||||
|
size="small" |
||||
|
@click="handleToPatrolList(scope.row,'all')">{{scope.row.patrolTimes}}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="totalTime" |
||||
|
label="巡查时长" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="130px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" |
||||
|
style="color:#1C6AFD;" |
||||
|
size="small" |
||||
|
@click="handleToPatrolList(scope.row)">{{scope.row.totalTime}}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="patrolRoutineWorkTimes" |
||||
|
label="例行工作次数" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="120px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" |
||||
|
style="color:#1C6AFD;" |
||||
|
size="small" |
||||
|
@click="handleToWorkList(scope.row)">{{scope.row.patrolRoutineWorkTimes}}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="projectCount" |
||||
|
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)">{{scope.row.projectCount}}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="closedIssueCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="100px" |
||||
|
label="议题关闭数"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="issueToProjectCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="130px" |
||||
|
label="议题转项目事件数"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="projectResponseCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="120px" |
||||
|
label="项目事件响应数"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="projectTransferCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="120px" |
||||
|
label="项目事件吹哨数"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="projectClosedCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="120px" |
||||
|
label="项目事件结案数"> |
||||
|
</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="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-card> |
||||
|
</div> |
||||
|
<patrol-list ref="ref_patrolList" |
||||
|
v-if="flag==='patrol'" |
||||
|
@back="backToClassify"></patrol-list> |
||||
|
<work-list ref="ref_workList" |
||||
|
v-if="flag==='work'" |
||||
|
@back="backToClassify"></work-list> |
||||
|
<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 PatrolList from "./patrolList" |
||||
|
import WorkList from "./workList" |
||||
|
import ProjectList from "./projectList" |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
|
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
flag: "classify",//页面标识 |
||||
|
tableData: [], |
||||
|
tableLoading: false, |
||||
|
|
||||
|
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', |
||||
|
total: 0, |
||||
|
tableParams: { |
||||
|
orgId: '', //组织ID |
||||
|
orgType: '', //组织类型 组织：agency，网格：grid |
||||
|
startTime: '', //开始时间【yyyy-mm-dd】 ,截止累计值 |
||||
|
endTime: '', //结束时间【yyyy-mm-dd】, |
||||
|
pageSize: 20, |
||||
|
pageNo: 1, |
||||
|
}, |
||||
|
timeArray: ['', ''], |
||||
|
endTimeModel: new Date() - 60 * 60 * 24 * 2, |
||||
|
|
||||
|
//导出表格部分 |
||||
|
startTimeShow: '',//导出表格标题处显示的内容 |
||||
|
endTimeShow: '', //导出表格标题处显示的内容 |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
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/agencygridtree' |
||||
|
// 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 = [] |
||||
|
this.tableParams.orgId = '' |
||||
|
if (data) { |
||||
|
//默认级联选中父级 |
||||
|
this.selAgencyObj = { |
||||
|
agencyId: data.agencyId, |
||||
|
agencyName: data.agencyName, |
||||
|
level: data.level, |
||||
|
pid: data.pid, |
||||
|
} |
||||
|
|
||||
|
this.casOptions.push(data) |
||||
|
this.agencyIdArray.push(data.agencyId) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
async loadTable () { |
||||
|
if (this.validate()) { |
||||
|
const url = '/data/aggregator/org/pcwork/gridmember-analysis' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/102/data/aggregator/org/pcwork/gridmember-analysis' |
||||
|
|
||||
|
this.tableLoading = true |
||||
|
if (this.staticType === 'end') { |
||||
|
this.tableParams.startTime = '' |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, this.tableParams) |
||||
|
this.tableLoading = false |
||||
|
if (code === 0) { |
||||
|
this.total = 0 |
||||
|
this.tableData = [] |
||||
|
if (data) { |
||||
|
if (data.total) { |
||||
|
this.total = data.total |
||||
|
} |
||||
|
|
||||
|
if (data.list) { |
||||
|
this.tableData = data.list |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//跳转到巡查列表页面 |
||||
|
handleToPatrolList (row) { |
||||
|
this.flag = "patrol" |
||||
|
this.$nextTick(() => { |
||||
|
|
||||
|
this.$refs.ref_patrolList.loadDate(row, this.selAgencyObj, this.tableParams, this.staticType, this.startTimeShow, this.endTimeShow) |
||||
|
// this.$refs.ref_patrolList.loadDate(this.selAgencyObj, this.tableParams, this.staticType, this.timeArray, this.endTimeModel, this.startTimeShow, this.endTimeShow) |
||||
|
// //初始化表格 |
||||
|
// this.$refs.ref_patrolList.initTable(this.agencyIdArray, row, this.casOptions, this.selAgencyObj.agencyName) |
||||
|
}) |
||||
|
}, |
||||
|
//跳转到工作列表页面 |
||||
|
handleToWorkList (row) { |
||||
|
this.flag = "work" |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_workList.loadDate(row, this.selAgencyObj, this.tableParams, this.staticType, this.startTimeShow, this.endTimeShow) |
||||
|
// this.$refs.ref_workList.loadDate(this.selAgencyObj, this.tableParams, this.staticType, this.timeArray, this.endTimeModel, this.startTimeShow, this.endTimeShow) |
||||
|
// //初始化表格 |
||||
|
// this.$refs.ref_workList.initTable(this.agencyIdArray, row, this.casOptions, this.selAgencyObj.agencyName) |
||||
|
}) |
||||
|
}, |
||||
|
//跳转到项目列表页面 |
||||
|
handleToProjectList (row) { |
||||
|
this.flag = "project" |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_projectList.loadDate(row, this.selAgencyObj, this.tableParams, this.staticType, this.startTimeShow, this.endTimeShow) |
||||
|
// this.$refs.ref_projectList.loadDate(this.tableParams, this.staticType, this.timeArray, this.endTimeModel, this.startTimeShow, this.endTimeShow) |
||||
|
// //初始化表格 |
||||
|
// this.$refs.ref_projectList.initTable(this.agencyIdArray, row, this.casOptions, this.selAgencyObj.agencyName) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//返回 |
||||
|
backToClassify () { |
||||
|
this.flag = "classify" |
||||
|
}, |
||||
|
|
||||
|
handleChange (value) { |
||||
|
if (value && value.length > 0) { |
||||
|
this.selAgencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
||||
|
|
||||
|
} else { |
||||
|
this.selAgencyObj = {} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleSizeChange (val) { |
||||
|
this.tableParams.pageSize = val |
||||
|
this.tableParams.pageNo = 1 |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
handleCurrentChange (val) { |
||||
|
this.tableParams.pageNo = val |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
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.tableParams.startTime = util.dateFormatter(time[0], 'date') |
||||
|
// this.tableParams.endTime = util.dateFormatter(time[1], 'date') |
||||
|
|
||||
|
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 === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) { |
||||
|
this.$message.info("请选择起止日期") |
||||
|
return false |
||||
|
} |
||||
|
if (this.staticType === 'end' && !this.tableParams.endTime) { |
||||
|
this.$message.info("请选择结束日期") |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
if (this.selAgencyObj) { |
||||
|
this.tableParams.orgId = this.selAgencyObj.agencyId |
||||
|
this.tableParams.orgName = this.selAgencyObj.agencyName |
||||
|
this.tableParams.orgType = this.selAgencyObj.level === 'grid' ? 'grid' : 'agency' |
||||
|
} else { |
||||
|
|
||||
|
this.tableParams.orgId = '' |
||||
|
this.tableParams.orgType = '' |
||||
|
} |
||||
|
|
||||
|
return true |
||||
|
}, |
||||
|
|
||||
|
//导出表格 |
||||
|
async loadOutTableData () { |
||||
|
if (!this.validate()) { |
||||
|
return false |
||||
|
} |
||||
|
let title = this.tableParams.orgName |
||||
|
|
||||
|
if (this.staticType === 'Interval') { |
||||
|
title = title + ' 工作 ' + this.startTimeShow + '-' + this.endTimeShow + '区间增长值' |
||||
|
} else { |
||||
|
title = title + ' 工作 截止至' + this.endTimeShow + '累计值' |
||||
|
} |
||||
|
console.log(title) |
||||
|
|
||||
|
const url = "/data/report/screen/project/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']) |
||||
|
}, |
||||
|
components: { |
||||
|
PatrolList, WorkList, 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,467 @@ |
|||||
|
<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()" |
||||
|
size="mini" |
||||
|
icon="el-icon-back" |
||||
|
type="warning" |
||||
|
plain>返回</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"></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 |
||||
|
v-loading="tableLoading" |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column prop="staffName" |
||||
|
label="网格员" |
||||
|
align="center" |
||||
|
min-width="80"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" |
||||
|
label="所属网格" |
||||
|
align="center" |
||||
|
min-width="200"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="statusName" |
||||
|
label="巡查状态" |
||||
|
align="center" |
||||
|
min-width="150"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="patrolStartTime" |
||||
|
label="巡查开始时间" |
||||
|
align="center" |
||||
|
min-width="140"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="patrolEndTime" |
||||
|
label="巡查结束时间" |
||||
|
align="center" |
||||
|
min-width="140"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="totalTime" |
||||
|
label="巡查时长" |
||||
|
align="center" |
||||
|
min-width="130px"> |
||||
|
</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="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-card> |
||||
|
|
||||
|
</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' |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
|
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
tableData: [], |
||||
|
tableLoading: false, |
||||
|
|
||||
|
downloadLoading: false, |
||||
|
|
||||
|
//查询条件标题宽度 |
||||
|
labelWidth: '70px', |
||||
|
casOptions: [], |
||||
|
selAgencyObj: {}, |
||||
|
agencyIdArray: [], |
||||
|
|
||||
|
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: { |
||||
|
staffId: '', //巡查工作人员ID |
||||
|
orgId: '', //组织ID |
||||
|
orgType: '', //组织类型 组织：agency，网格：grid |
||||
|
pageSize: 20, |
||||
|
pageNo: 1, |
||||
|
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
||||
|
endTime: '', //结束时间【yyyymmdd】, |
||||
|
}, |
||||
|
total: 0, |
||||
|
timeArray: ['', ''], |
||||
|
|
||||
|
agencyName: '', |
||||
|
startTimeShow: '',//导出表格标题处显示的内容 |
||||
|
endTimeShow: '', //导出表格标题处显示的内容 |
||||
|
endTimeModel: new Date() - 60 * 60 * 24 * 2, |
||||
|
|
||||
|
//弹出详情相关 |
||||
|
diaShow: false, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
//初始化数据 |
||||
|
loadDate (selAgencyObj, tableParams, staticType, timeArray, endTimeModel, startTimeShow, endTimeShow) { |
||||
|
debugger |
||||
|
//初始化日期 |
||||
|
this.initDate() |
||||
|
this.selAgencyObj = JSON.parse(JSON.stringify(selAgencyObj)) |
||||
|
let params = JSON.parse(JSON.stringify(tableParams)) |
||||
|
Object.assign(this.tableParams, params) |
||||
|
this.staticType = staticType |
||||
|
|
||||
|
this.timeArray = JSON.parse(JSON.stringify(timeArray)) |
||||
|
this.endTimeModel = JSON.parse(JSON.stringify(endTimeModel)) |
||||
|
this.startTimeShow = startTimeShow |
||||
|
this.endTimeShow = endTimeShow |
||||
|
|
||||
|
}, |
||||
|
async initTable (agencyIdArray, row, casOptions, agencyName) { |
||||
|
this.startLoading() |
||||
|
|
||||
|
//初始化组织数据 |
||||
|
this.initAgencyList(casOptions) |
||||
|
this.tableParams.staffId = row.staffId |
||||
|
this.agencyIdArray = agencyIdArray |
||||
|
this.agencyName = agencyName |
||||
|
|
||||
|
await this.loadTable()//获取组织级联列表 |
||||
|
|
||||
|
this.endLoading() |
||||
|
}, |
||||
|
|
||||
|
initAgencyList (casOptions) { |
||||
|
++this.iscascaderShow |
||||
|
this.casOptions = [] |
||||
|
this.agencyIdArray = [] |
||||
|
if (casOptions) { |
||||
|
this.casOptions = casOptions |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async loadTable () { |
||||
|
if (this.validate()) { |
||||
|
const url = '/epmetuser/staffpatrol/pcwork/record-list' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/102/epmetuser/staffpatrol/pcwork/record-list' |
||||
|
|
||||
|
if (this.staticType === 'end') { |
||||
|
this.tableParams.startTime = '' |
||||
|
} |
||||
|
this.tableLoading = true |
||||
|
const { data, code, msg } = await requestPost(url, this.tableParams) |
||||
|
this.tableLoading = false |
||||
|
if (code === 0) { |
||||
|
this.total = 0 |
||||
|
this.tableData = [] |
||||
|
if (data) { |
||||
|
if (data.total) { |
||||
|
this.total = data.total |
||||
|
} |
||||
|
|
||||
|
if (data.list) { |
||||
|
this.tableData = data.list |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleChange (value) { |
||||
|
|
||||
|
if (value && value.length > 0) { |
||||
|
this.selAgencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
||||
|
|
||||
|
} else { |
||||
|
this.selAgencyObj = {} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
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 === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) { |
||||
|
this.$message.info("请选择起止日期") |
||||
|
return false |
||||
|
} |
||||
|
if (this.staticType === 'end' && !this.tableParams.endTime) { |
||||
|
this.$message.info("请选择结束日期") |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
if (this.selAgencyObj) { |
||||
|
this.agencyName = this.selAgencyObj.agencyName |
||||
|
this.tableParams.orgId = this.selAgencyObj.agencyId |
||||
|
this.tableParams.orgType = this.selAgencyObj.level === 'grid' ? 'grid' : 'agency' |
||||
|
} else { |
||||
|
this.tableParams.orgId = '' |
||||
|
this.tableParams.orgType = '' |
||||
|
} |
||||
|
|
||||
|
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 = "/epmetuser/staffpatrol/pcwork/record-list/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']) |
||||
|
}, |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
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,320 @@ |
|||||
|
<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()" |
||||
|
size="mini" |
||||
|
type="warning" |
||||
|
plain>返回</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="margin-left:10px"> |
||||
|
<el-button @click="loadOutTableData()" |
||||
|
size="mini" |
||||
|
type="primary">导出</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table :data="tableData" |
||||
|
border |
||||
|
v-loading="tableLoading" |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column prop="staffName" |
||||
|
label="网格员" |
||||
|
align="center" |
||||
|
min-width="80"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" |
||||
|
label="所属网格" |
||||
|
align="center" |
||||
|
min-width="200"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="statusName" |
||||
|
label="巡查状态" |
||||
|
align="center" |
||||
|
min-width="150"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="patrolStartTime" |
||||
|
label="巡查开始时间" |
||||
|
align="center" |
||||
|
min-width="140"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="patrolEndTime" |
||||
|
label="巡查结束时间" |
||||
|
align="center" |
||||
|
min-width="140"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="totalTime" |
||||
|
label="巡查时长" |
||||
|
align="center" |
||||
|
min-width="130px"> |
||||
|
</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="total"> |
||||
|
</el-pagination> |
||||
|
</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 { |
||||
|
tableData: [], |
||||
|
tableLoading: false, |
||||
|
|
||||
|
downloadLoading: false, |
||||
|
|
||||
|
//查询条件标题宽度 |
||||
|
labelWidth: '70px', |
||||
|
selAgencyObj: {}, |
||||
|
|
||||
|
staticType: 'end', |
||||
|
|
||||
|
tableParams: { |
||||
|
staffId: '', //巡查工作人员ID |
||||
|
orgId: '', //组织ID |
||||
|
orgType: '', //组织类型 组织：agency，网格：grid |
||||
|
pageSize: 20, |
||||
|
pageNo: 1, |
||||
|
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
||||
|
endTime: '', //结束时间【yyyymmdd】, |
||||
|
}, |
||||
|
total: 0, |
||||
|
|
||||
|
agencyName: '', |
||||
|
startTimeShow: '',//导出表格标题处显示的内容 |
||||
|
endTimeShow: '', //导出表格标题处显示的内容 |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
//初始化数据 |
||||
|
async loadDate (row, selAgencyObj, tableParams, staticType, startTimeShow, endTimeShow) { |
||||
|
|
||||
|
//初始化日期 |
||||
|
this.selAgencyObj = JSON.parse(JSON.stringify(selAgencyObj)) |
||||
|
this.agencyName = selAgencyObj.agencyName |
||||
|
let params = JSON.parse(JSON.stringify(tableParams)) |
||||
|
Object.assign(this.tableParams, params) |
||||
|
//初始化组织数据 |
||||
|
this.tableParams.staffId = row.staffId |
||||
|
this.staticType = staticType |
||||
|
|
||||
|
this.startTimeShow = startTimeShow |
||||
|
this.endTimeShow = endTimeShow |
||||
|
await this.loadTable()//获取组织级联列表 |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
async loadTable () { |
||||
|
|
||||
|
const url = '/epmetuser/staffpatrol/pcwork/record-list' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/102/epmetuser/staffpatrol/pcwork/record-list' |
||||
|
|
||||
|
if (this.staticType === 'end') { |
||||
|
this.tableParams.startTime = '' |
||||
|
} |
||||
|
this.tableLoading = true |
||||
|
const { data, code, msg } = await requestPost(url, this.tableParams) |
||||
|
this.tableLoading = false |
||||
|
if (code === 0) { |
||||
|
this.total = 0 |
||||
|
this.tableData = [] |
||||
|
if (data) { |
||||
|
if (data.total) { |
||||
|
this.total = data.total |
||||
|
} |
||||
|
|
||||
|
if (data.list) { |
||||
|
this.tableData = data.list |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
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 === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) { |
||||
|
this.$message.info("请选择起止日期") |
||||
|
return false |
||||
|
} |
||||
|
if (this.staticType === 'end' && !this.tableParams.endTime) { |
||||
|
this.$message.info("请选择结束日期") |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
if (this.selAgencyObj) { |
||||
|
this.agencyName = this.selAgencyObj.agencyName |
||||
|
this.tableParams.orgId = this.selAgencyObj.agencyId |
||||
|
this.tableParams.orgType = this.selAgencyObj.level === 'grid' ? 'grid' : 'agency' |
||||
|
} else { |
||||
|
this.tableParams.orgId = '' |
||||
|
this.tableParams.orgType = '' |
||||
|
} |
||||
|
|
||||
|
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 = "/epmetuser/staffpatrol/pcwork/record-list/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 - 80 - 80 - 100 |
||||
|
}, |
||||
|
|
||||
|
...mapGetters(['clientHeight']) |
||||
|
}, |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
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,417 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-show="showDetail"> |
||||
|
<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" |
||||
|
:disabled="true" |
||||
|
action="" |
||||
|
:on-preview="handleFileDownload" |
||||
|
:limit="50" |
||||
|
:file-list="item.attachments"> |
||||
|
|
||||
|
</el-upload> |
||||
|
<!-- <attachment-list list="{{item.attachments}}" /> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div v-show="!showDetail"> |
||||
|
<el-button class="btn_close" |
||||
|
@click="closePic()" |
||||
|
type="primary">返回</el-button> |
||||
|
<img :src="previewPath" |
||||
|
alt="" |
||||
|
style="width:100%;height:100%" /> |
||||
|
<!-- <vedio :src="previewPath"></vedio> --> |
||||
|
|
||||
|
</div> |
||||
|
</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: {}, |
||||
|
showDetail: true, |
||||
|
|
||||
|
//查询条件标题宽度 |
||||
|
labelWidth: '100px', |
||||
|
|
||||
|
info: { |
||||
|
projectTitle: "",//标题 |
||||
|
projectId: "",//项目id |
||||
|
projectContent: "",//议题内容，其实就是项目内容 |
||||
|
imgList: "",//图片列表 |
||||
|
reportTime: "",//上报时间，对应的是立项时间;格式：yyyy-MM-dd HH:mm |
||||
|
categoryName: "",//所属类别名称 |
||||
|
reportUserId: "",//上报人Id |
||||
|
reportUserRoleSet: "",//上报人角色列表，grid_member:网格员； |
||||
|
reportUserName: "",//上报人名称；山东路-尹女士 |
||||
|
mobile: "",//上报人电话 |
||||
|
reportAddress: "",//上报位置 |
||||
|
processList: [],// |
||||
|
}, |
||||
|
previewPath: '' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
setShowDetail () { |
||||
|
if (!this.showDetail) { |
||||
|
this.showDetail = true |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
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 = '创建项目' |
||||
|
} |
||||
|
element.attachments.forEach(attachItem => { |
||||
|
attachItem.name = attachItem.fileName |
||||
|
attachItem.url = attachItem.attachmentUrl |
||||
|
attachItem.type = attachItem.attachmentType |
||||
|
attachItem.format = attachItem.attachmentFormat |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//下载 |
||||
|
handleFileDownload (file) { |
||||
|
|
||||
|
// if (file.format === 'jpg' || file.format === 'png' || file.format === 'gif') { |
||||
|
// this.showDetail = false |
||||
|
// this.previewPath = file.url |
||||
|
// } else { |
||||
|
var a = document.createElement('a'); |
||||
|
var event = new MouseEvent('click'); |
||||
|
a.download = file.name; |
||||
|
a.target = "_blank"//打开新的标签页 |
||||
|
|
||||
|
a.href = file.url; |
||||
|
a.dispatchEvent(event); |
||||
|
// } |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
closePic () { |
||||
|
this.showDetail = true |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn_close { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,493 @@ |
|||||
|
<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()" |
||||
|
size="mini" |
||||
|
icon="el-icon-back" |
||||
|
type="warning" |
||||
|
plain>返回</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"></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="title" |
||||
|
label="项目事件标题" |
||||
|
align="center" |
||||
|
min-width="280"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="projectCategory" |
||||
|
label="项目事件类别" |
||||
|
align="center" |
||||
|
min-width="200"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="locateAddress" |
||||
|
label="发生地点" |
||||
|
align="center" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="happenTime" |
||||
|
label="发生日期" |
||||
|
align="center" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="staffName" |
||||
|
label="网格员" |
||||
|
align="center" |
||||
|
min-width="80"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" |
||||
|
label="所属网格" |
||||
|
align="center" |
||||
|
min-width="150"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="createdTime" |
||||
|
label="提交日期" |
||||
|
align="center" |
||||
|
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="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: [], |
||||
|
|
||||
|
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: { |
||||
|
staffId: '', //员工id |
||||
|
agencyId: '', //组织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: { |
||||
|
//初始化日期 |
||||
|
loadDate (tableParams, staticType, timeArray, endTimeModel, startTimeShow, endTimeShow) { |
||||
|
//初始化日期 |
||||
|
this.initDate() |
||||
|
let params = JSON.parse(JSON.stringify(tableParams)) |
||||
|
Object.assign(this.tableParams, params) |
||||
|
this.timeArray = JSON.parse(JSON.stringify(timeArray)) |
||||
|
this.endTimeModel = JSON.parse(JSON.stringify(endTimeModel)) |
||||
|
this.startTimeShow = startTimeShow |
||||
|
this.endTimeShow = endTimeShow |
||||
|
this.staticType = staticType |
||||
|
|
||||
|
}, |
||||
|
async initTable (agencyIdArray, row, casOptions, agencyName) { |
||||
|
this.startLoading() |
||||
|
|
||||
|
//初始化组织数据 |
||||
|
this.initAgencyList(casOptions) |
||||
|
|
||||
|
this.tableParams.staffId = row.staffId |
||||
|
this.agencyIdArray = agencyIdArray |
||||
|
this.agencyName = agencyName |
||||
|
|
||||
|
|
||||
|
await this.loadTable()//获取组织级联列表 |
||||
|
|
||||
|
this.endLoading() |
||||
|
}, |
||||
|
|
||||
|
initAgencyList (casOptions) { |
||||
|
++this.iscascaderShow |
||||
|
this.casOptions = [] |
||||
|
this.agencyIdArray = [] |
||||
|
if (casOptions) { |
||||
|
this.casOptions = casOptions |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async loadTable () { |
||||
|
if (this.validate()) { |
||||
|
// const url = '/gov/project/trace/pcwork/approvaled-list' |
||||
|
const url = 'http://yapi.elinkservice.cn/mock/102/gov/project/trace/pcwork/approvaled-list' |
||||
|
|
||||
|
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.$refs.ref_projectDetail.setShowDetail() |
||||
|
this.diaShow = false |
||||
|
}, |
||||
|
|
||||
|
handleChange (value) { |
||||
|
if (value && value.length > 0) { |
||||
|
let agencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
||||
|
this.tableParams.agencyId = agencyObj.agencyId |
||||
|
this.agencyName = agencyObj.agencyName |
||||
|
} else { |
||||
|
|
||||
|
this.tableParams.agencyId = '' |
||||
|
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 === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) { |
||||
|
this.$message.info("请选择起止日期") |
||||
|
return false |
||||
|
} |
||||
|
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 params = { |
||||
|
staffId: this.tableParams.staffId, |
||||
|
agencyId: this.tableParams.agencyId, |
||||
|
startTime: this.tableParams.startTime, |
||||
|
endTime: this.tableParams.endTime, |
||||
|
orgName: this.agencyName |
||||
|
} |
||||
|
|
||||
|
const url = "/data/report/screen/project/selectcategoryprojectlist/export" |
||||
|
|
||||
|
app.ajax.exportFilePost( |
||||
|
url, |
||||
|
params, |
||||
|
(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> |
||||
|
|
||||
@ -0,0 +1,353 @@ |
|||||
|
<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()" |
||||
|
size="mini" |
||||
|
type="warning" |
||||
|
plain>返回</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="margin-left:10px"> |
||||
|
<el-button @click="loadOutTableData()" |
||||
|
size="mini" |
||||
|
type="primary">导出</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table :data="tableData" |
||||
|
border |
||||
|
v-loading="tableLoading" |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column prop="title" |
||||
|
label="项目事件标题" |
||||
|
align="center" |
||||
|
min-width="280"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="projectCategory" |
||||
|
label="项目事件类别" |
||||
|
align="center" |
||||
|
min-width="200"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="locateAddress" |
||||
|
label="发生地点" |
||||
|
align="center" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="happenTime" |
||||
|
label="发生日期" |
||||
|
align="center" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="staffName" |
||||
|
label="网格员" |
||||
|
align="center" |
||||
|
min-width="80"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" |
||||
|
label="所属网格" |
||||
|
align="center" |
||||
|
min-width="150"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="createdTime" |
||||
|
label="提交日期" |
||||
|
align="center" |
||||
|
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="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: [], |
||||
|
tableLoading: false, |
||||
|
|
||||
|
downloadLoading: false, |
||||
|
|
||||
|
//查询条件标题宽度 |
||||
|
labelWidth: '70px', |
||||
|
selAgencyObj: {}, |
||||
|
staticType: 'end', |
||||
|
|
||||
|
tableParams: { |
||||
|
staffId: '', //巡查工作人员ID |
||||
|
orgId: '', //组织ID |
||||
|
orgType: '', //组织类型 组织：agency，网格：grid |
||||
|
pageSize: 20, |
||||
|
pageNo: 1, |
||||
|
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
||||
|
endTime: '', //结束时间【yyyymmdd】, |
||||
|
}, |
||||
|
total: 0, |
||||
|
|
||||
|
agencyName: '', |
||||
|
startTimeShow: '',//导出表格标题处显示的内容 |
||||
|
endTimeShow: '', //导出表格标题处显示的内容 |
||||
|
|
||||
|
|
||||
|
//弹出详情相关 |
||||
|
diaShow: false, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
//初始化数据 |
||||
|
async loadDate (row, selAgencyObj, tableParams, staticType, startTimeShow, endTimeShow) { |
||||
|
|
||||
|
//初始化日期 |
||||
|
this.selAgencyObj = JSON.parse(JSON.stringify(selAgencyObj)) |
||||
|
this.agencyName = selAgencyObj.agencyName |
||||
|
let params = JSON.parse(JSON.stringify(tableParams)) |
||||
|
Object.assign(this.tableParams, params) |
||||
|
//初始化组织数据 |
||||
|
this.tableParams.staffId = row.staffId |
||||
|
this.staticType = staticType |
||||
|
|
||||
|
this.startTimeShow = startTimeShow |
||||
|
this.endTimeShow = endTimeShow |
||||
|
await this.loadTable()//获取组织级联列表 |
||||
|
}, |
||||
|
|
||||
|
async loadTable () { |
||||
|
// if (this.validate()) { |
||||
|
// return false |
||||
|
// } |
||||
|
const url = '/gov/project/trace/pcwork/approvaled-list' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/project/trace/pcwork/approvaled-list' |
||||
|
|
||||
|
if (this.staticType === 'end') { |
||||
|
this.tableParams.startTime = '' |
||||
|
} |
||||
|
this.tableLoading = true |
||||
|
const { data, code, msg } = await requestPost(url, this.tableParams) |
||||
|
this.tableLoading = false |
||||
|
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.$refs.ref_projectDetail.setShowDetail() |
||||
|
this.diaShow = false |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
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 === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) { |
||||
|
this.$message.info("请选择起止日期") |
||||
|
return false |
||||
|
} |
||||
|
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 = "/gov/project/trace/pcwork/approvaled-list/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> |
||||
|
|
||||
@ -0,0 +1,322 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-show="showDetail"> |
||||
|
<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.title}}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">事项类别：</span> |
||||
|
<span v-if="info.workTypeName">{{info.workTypeName}}</span> |
||||
|
<span v-else>无</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">有无异常：</span> |
||||
|
|
||||
|
<span v-if="info.isNormalShow">{{info.isNormalShow}}</span> |
||||
|
<span v-else>--</span> |
||||
|
</div> |
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">网格员：</span> |
||||
|
<span v-if="info.staffName">{{info.staffName}}</span> |
||||
|
<span v-else>无</span> |
||||
|
</div> |
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">所属网格：</span> |
||||
|
<span v-if="info.gridName">{{info.gridName}}</span> |
||||
|
<span v-else>无</span> |
||||
|
</div> |
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">发生地点：</span> |
||||
|
<span v-if="info.happenAddress">{{info.happenAddress}}</span> |
||||
|
<span v-else>无</span> |
||||
|
</div> |
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">发生日期：</span> |
||||
|
<span v-if="info.happenTime">{{info.happenTime}}</span> |
||||
|
<span v-else>无</span> |
||||
|
</div> |
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">提交日期：</span> |
||||
|
<span v-if="info.createdTime">{{info.createdTime}}</span> |
||||
|
<span v-else>无</span> |
||||
|
</div> |
||||
|
<div class="div_info_item"> |
||||
|
<span class="span_item_title">项目内容：</span> |
||||
|
<span v-if="info.workContent">{{info.workContent}}</span> |
||||
|
<span v-else>无</span> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div v-show="!showDetail"> |
||||
|
<el-button class="btn_close" |
||||
|
@click="closePic()" |
||||
|
type="primary">返回</el-button> |
||||
|
<img :src="previewPath" |
||||
|
alt="" |
||||
|
style="width:100%;height:100%" /> |
||||
|
<!-- <vedio :src="previewPath"></vedio> --> |
||||
|
|
||||
|
</div> |
||||
|
</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: {}, |
||||
|
showDetail: true, |
||||
|
|
||||
|
//查询条件标题宽度 |
||||
|
labelWidth: '100px', |
||||
|
|
||||
|
info: { |
||||
|
title: "",//事项名称 |
||||
|
workTypeName: "",//事项类型码 |
||||
|
isNormalShow: "",//有无异常 |
||||
|
staffName: "",//人员姓名 |
||||
|
happenAddress: "",//发生地点 |
||||
|
happenTime: "",//发生时间 返回返回格式化字符串,yyyy-MM-dd |
||||
|
gridName: "",//网格名 |
||||
|
createdTime: "",//提交日期 返回返回格式化字符串,yyyy-MM-dd HH:mm:ss |
||||
|
workContent: "",//工作内容 |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
previewPath: '' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
setShowDetail () { |
||||
|
if (!this.showDetail) { |
||||
|
this.showDetail = true |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
async initData (row) { |
||||
|
|
||||
|
this.info = JSON.parse(JSON.stringify(row)) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
closePic () { |
||||
|
this.showDetail = true |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn_close { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,505 @@ |
|||||
|
<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()" |
||||
|
size="mini" |
||||
|
icon="el-icon-back" |
||||
|
type="warning" |
||||
|
plain>返回</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"></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="title" |
||||
|
label="事件名称" |
||||
|
align="center" |
||||
|
min-width="480"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="workTypeName" |
||||
|
label="事件类别" |
||||
|
align="center" |
||||
|
min-width="200"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="isNormalShow" |
||||
|
label="有无异常" |
||||
|
align="center" |
||||
|
min-width="80"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="happenAddress" |
||||
|
label="发生地点" |
||||
|
align="center" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="happenTime" |
||||
|
label="发生日期" |
||||
|
align="center" |
||||
|
min-width="140px"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="staffName" |
||||
|
label="网格员" |
||||
|
align="center" |
||||
|
min-width="80px"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" |
||||
|
label="所属网格" |
||||
|
align="center" |
||||
|
min-width="190px"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createdTime" |
||||
|
label="提交日期" |
||||
|
align="center" |
||||
|
min-width="140px"> |
||||
|
</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="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"> |
||||
|
<work-Detail ref="ref_workDetail"> |
||||
|
|
||||
|
</work-Detail> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@js/util.js'; |
||||
|
import WorkDetail from "./workDetail" |
||||
|
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: [], |
||||
|
|
||||
|
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', |
||||
|
|
||||
|
categoryName: '', |
||||
|
parentCategoryName: '', |
||||
|
tableParams: { |
||||
|
staffId: '', //人员id |
||||
|
agencyId: '', //组织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 () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
//初始化日期 |
||||
|
loadDate (tableParams, staticType, timeArray, endTimeModel, startTimeShow, endTimeShow) { |
||||
|
//初始化日期 |
||||
|
this.initDate() |
||||
|
let params = JSON.parse(JSON.stringify(tableParams)) |
||||
|
Object.assign(this.tableParams, params) |
||||
|
this.timeArray = JSON.parse(JSON.stringify(timeArray)) |
||||
|
this.endTimeModel = JSON.parse(JSON.stringify(endTimeModel)) |
||||
|
this.startTimeShow = startTimeShow |
||||
|
this.endTimeShow = endTimeShow |
||||
|
this.staticType = staticType |
||||
|
|
||||
|
}, |
||||
|
async initTable (agencyIdArray, row, casOptions, agencyName) { |
||||
|
this.startLoading() |
||||
|
|
||||
|
//初始化组织数据 |
||||
|
this.initAgencyList(casOptions) |
||||
|
this.tableParams.staffId = row.staffId |
||||
|
this.agencyIdArray = agencyIdArray |
||||
|
this.agencyName = agencyName |
||||
|
|
||||
|
|
||||
|
await this.loadTable()//获取组织级联列表 |
||||
|
|
||||
|
this.endLoading() |
||||
|
}, |
||||
|
|
||||
|
initAgencyList (casOptions) { |
||||
|
++this.iscascaderShow |
||||
|
this.casOptions = [] |
||||
|
this.agencyIdArray = [] |
||||
|
if (casOptions) { |
||||
|
this.casOptions = casOptions |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async loadTable () { |
||||
|
if (this.validate()) { |
||||
|
// const url = '/epmetuser/patrolroutinework/pcwork/list' |
||||
|
const url = 'http://yapi.elinkservice.cn/mock/102/epmetuser/patrolroutinework/pcwork/list' |
||||
|
|
||||
|
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 |
||||
|
this.tableData.forEach(element => { |
||||
|
if (element.isNormal) { |
||||
|
element.isNormalShow = '有' |
||||
|
} else { |
||||
|
element.isNormalShow = '无' |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//跳转到项目列表页面 |
||||
|
handleDetail (row) { |
||||
|
this.diaShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_workDetail.initData(row) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//关闭详情 |
||||
|
diaClose () { |
||||
|
this.$refs.ref_workDetail.setShowDetail() |
||||
|
this.diaShow = false |
||||
|
}, |
||||
|
|
||||
|
handleChange (value) { |
||||
|
if (value && value.length > 0) { |
||||
|
let agencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
||||
|
this.tableParams.agencyId = agencyObj.agencyId |
||||
|
this.agencyName = agencyObj.agencyName |
||||
|
} else { |
||||
|
|
||||
|
this.tableParams.agencyId = '' |
||||
|
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 === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) { |
||||
|
this.$message.info("请选择起止日期") |
||||
|
return false |
||||
|
} |
||||
|
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 params = { |
||||
|
staffId: this.tableParams.staffId, |
||||
|
agencyId: this.tableParams.agencyId, |
||||
|
startTime: this.tableParams.startTime, |
||||
|
endTime: this.tableParams.endTime, |
||||
|
orgName: this.agencyName |
||||
|
} |
||||
|
|
||||
|
const url = "/data/report/screen/project/selectcategoryprojectlist/export" |
||||
|
|
||||
|
app.ajax.exportFilePost( |
||||
|
url, |
||||
|
params, |
||||
|
(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']) |
||||
|
}, |
||||
|
components: { |
||||
|
WorkDetail |
||||
|
}, |
||||
|
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,364 @@ |
|||||
|
<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()" |
||||
|
size="mini" |
||||
|
type="warning" |
||||
|
plain>返回</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item style="margin-left:10px"> |
||||
|
<el-button @click="loadOutTableData()" |
||||
|
size="mini" |
||||
|
type="primary">导出</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table :data="tableData" |
||||
|
border |
||||
|
v-loading="tableLoading" |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column prop="title" |
||||
|
label="事件名称" |
||||
|
align="center" |
||||
|
min-width="480"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="workTypeName" |
||||
|
label="事件类别" |
||||
|
align="center" |
||||
|
min-width="200"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="isNormalShow" |
||||
|
label="有无异常" |
||||
|
align="center" |
||||
|
min-width="80"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="happenAddress" |
||||
|
label="发生地点" |
||||
|
align="center" |
||||
|
min-width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="happenTime" |
||||
|
label="发生日期" |
||||
|
align="center" |
||||
|
min-width="140px"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="staffName" |
||||
|
label="网格员" |
||||
|
align="center" |
||||
|
min-width="80px"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" |
||||
|
label="所属网格" |
||||
|
align="center" |
||||
|
min-width="190px"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createdTime" |
||||
|
label="提交日期" |
||||
|
align="center" |
||||
|
min-width="140px"> |
||||
|
</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="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"> |
||||
|
<work-Detail ref="ref_workDetail"> |
||||
|
|
||||
|
</work-Detail> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@js/util.js'; |
||||
|
import WorkDetail from "./workDetail" |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { requestPost } from '@/js/dai/request' |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
|
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
tableData: [], |
||||
|
tableLoading: false, |
||||
|
downloadLoading: false, |
||||
|
|
||||
|
//查询条件标题宽度 |
||||
|
labelWidth: '70px', |
||||
|
selAgencyObj: {}, |
||||
|
staticType: 'end', |
||||
|
|
||||
|
|
||||
|
tableParams: { |
||||
|
staffId: '', //人员id |
||||
|
agencyId: '', //组织ID |
||||
|
pageSize: 20, |
||||
|
pageNo: 1, |
||||
|
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
||||
|
endTime: '', //结束时间【yyyymmdd】, |
||||
|
}, |
||||
|
total: 0, |
||||
|
|
||||
|
|
||||
|
agencyName: '', |
||||
|
startTimeShow: '',//导出表格标题处显示的内容 |
||||
|
endTimeShow: '', //导出表格标题处显示的内容 |
||||
|
|
||||
|
|
||||
|
//弹出详情相关 |
||||
|
diaShow: false, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
//初始化数据 |
||||
|
async loadDate (row, selAgencyObj, tableParams, staticType, startTimeShow, endTimeShow) { |
||||
|
|
||||
|
//初始化日期 |
||||
|
this.selAgencyObj = JSON.parse(JSON.stringify(selAgencyObj)) |
||||
|
this.agencyName = selAgencyObj.agencyName |
||||
|
let params = JSON.parse(JSON.stringify(tableParams)) |
||||
|
Object.assign(this.tableParams, params) |
||||
|
//初始化组织数据 |
||||
|
this.tableParams.staffId = row.staffId |
||||
|
this.staticType = staticType |
||||
|
|
||||
|
this.startTimeShow = startTimeShow |
||||
|
this.endTimeShow = endTimeShow |
||||
|
await this.loadTable()//获取组织级联列表 |
||||
|
}, |
||||
|
|
||||
|
async loadTable () { |
||||
|
// if (!this.validate()) { |
||||
|
// return false |
||||
|
// } |
||||
|
const url = '/epmetuser/patrolroutinework/pcwork/list' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/102/epmetuser/patrolroutinework/pcwork/list' |
||||
|
|
||||
|
if (this.staticType === 'end') { |
||||
|
this.tableParams.startTime = '' |
||||
|
} |
||||
|
this.tableLoading = true |
||||
|
const { data, code, msg } = await requestPost(url, this.tableParams) |
||||
|
this.tableLoading = false |
||||
|
if (code === 0) { |
||||
|
this.total = data.total |
||||
|
this.tableData = data.list |
||||
|
this.tableData.forEach(element => { |
||||
|
if (element.isNormal) { |
||||
|
element.isNormalShow = '有' |
||||
|
} else { |
||||
|
element.isNormalShow = '无' |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//跳转到项目列表页面 |
||||
|
handleDetail (row) { |
||||
|
this.diaShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_workDetail.initData(row) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//关闭详情 |
||||
|
diaClose () { |
||||
|
this.$refs.ref_workDetail.setShowDetail() |
||||
|
this.diaShow = false |
||||
|
}, |
||||
|
|
||||
|
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 === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) { |
||||
|
this.$message.info("请选择起止日期") |
||||
|
return false |
||||
|
} |
||||
|
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 = "/epmetuser/patrolroutinework/pcwork/list/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 - 80 - 80 - 100 |
||||
|
}, |
||||
|
|
||||
|
...mapGetters(['clientHeight']) |
||||
|
}, |
||||
|
components: { |
||||
|
WorkDetail |
||||
|
}, |
||||
|
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> |
||||
|
|
||||
@ -1,182 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div v-if="flag==='classify'"> |
|
||||
|
|
||||
<el-table :data="tableData" |
|
||||
ref="ref_table" |
|
||||
style="width: 100%;margin-bottom: 20px;" |
|
||||
row-key="categoryCode" |
|
||||
border |
|
||||
:default-expand-all="false" |
|
||||
: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.closedProjectTotal}}</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> |
|
||||
<project-list ref="ref_projectList" |
|
||||
v-if="flag==='project'" |
|
||||
@back="backToClassify"></project-list> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
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: [], |
|
||||
|
|
||||
|
|
||||
tableParams: { |
|
||||
orgId: '', //组织ID |
|
||||
orgType: '', //组织类型 组织：agency，网格：grid |
|
||||
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
|
||||
endTime: '', //结束时间【yyyymmdd】, |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
mounted () { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
async loadTable (tableParams) { |
|
||||
this.startLoading() |
|
||||
this.tableParams = JSON.parse(JSON.stringify(tableParams)) |
|
||||
|
|
||||
const url = '/data/report/screen/project/selectprojectcategory' |
|
||||
|
|
||||
const { data, code, msg } = await requestPost(url, tableParams) |
|
||||
this.endLoading() |
|
||||
|
|
||||
if (code === 0) { |
|
||||
this.tableData = data |
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
//跳转到项目列表页面 |
|
||||
handleToProjectList (row, type) { |
|
||||
this.flag = "project" |
|
||||
this.$emit("changeSource", 'project') |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.ref_projectList.initData(row, type, this.tableParams) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
//返回 |
|
||||
backToClassify () { |
|
||||
this.flag = "classify" |
|
||||
}, |
|
||||
|
|
||||
// 开启加载动画 |
|
||||
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> |
|
||||
|
|
||||
@ -1,219 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
|
|
||||
<el-table :data="tableData" |
|
||||
border |
|
||||
style="width: 100%"> |
|
||||
<el-table-column prop="category" |
|
||||
label="类别" |
|
||||
min-width="280"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="projectTitle" |
|
||||
label="项目标题" |
|
||||
min-width="200"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="gridName" |
|
||||
label="所属网格" |
|
||||
min-width="200"> |
|
||||
</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> |
|
||||
|
|
||||
<!-- 修改弹出框 --> |
|
||||
<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: [], |
|
||||
|
|
||||
tableParams: { |
|
||||
status: '', //项目状态：closed：已结案，all：全部 |
|
||||
categoryCode: '', //分类code |
|
||||
orgId: '', //组织ID |
|
||||
pageSize: 20, |
|
||||
pageNo: 1, |
|
||||
startTime: '', //开始时间【yyyymmdd】 ,截止累计值 |
|
||||
endTime: '', //结束时间【yyyymmdd】, |
|
||||
}, |
|
||||
total: 0, |
|
||||
|
|
||||
//弹出详情相关 |
|
||||
diaShow: false, |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
mounted () { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
async initData (row, type, params) { |
|
||||
this.startLoading() |
|
||||
Object.assign(this.tableParams, params) |
|
||||
|
|
||||
this.tableParams.status = type |
|
||||
this.tableParams.categoryCode = row.categoryCode |
|
||||
|
|
||||
await this.loadTable()//获取组织级联列表 |
|
||||
|
|
||||
this.endLoading() |
|
||||
}, |
|
||||
|
|
||||
async loadTable (params) { |
|
||||
const url = '/data/report/screen/project/selectcategoryprojectlist' |
|
||||
Object.assign(this.tableParams, params) |
|
||||
|
|
||||
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.$refs.ref_projectDetail.setShowDetail() |
|
||||
this.diaShow = false |
|
||||
}, |
|
||||
|
|
||||
handleSizeChange (val) { |
|
||||
this.tableParams.pageSize = val |
|
||||
this.tableParams.pageNo = 1 |
|
||||
this.loadTable() |
|
||||
}, |
|
||||
handleCurrentChange (val) { |
|
||||
this.tableParams.pageNo = val |
|
||||
this.loadTable() |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
// 开启加载动画 |
|
||||
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