You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
14 KiB
451 lines
14 KiB
<template>
|
|
<div class="registerList">
|
|
<el-card shadow="never"
|
|
class="aui-card--fill">
|
|
<div class="mod-demo__demo}">
|
|
<el-form :inline="true"
|
|
:model="tableParams"
|
|
@keyup.enter.native="loadData()">
|
|
|
|
<div>
|
|
<el-form-item label="选择客户"
|
|
:label-width="labelWidth">
|
|
<el-select v-model="tableParams.customerId"
|
|
placeholder="客户"
|
|
clearable>
|
|
<el-option v-for="(item,index) in customerList"
|
|
:key="index"
|
|
@click.native="handelChangeCustomer(index)"
|
|
:label="item.customerName"
|
|
:value="item.customerId">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="所属组织"
|
|
:label-width="labelWidth">
|
|
<el-cascader ref="myCascader"
|
|
v-model="agencyIdArray"
|
|
style="width:480px"
|
|
:key="iscascaderShow"
|
|
:options="options"
|
|
:props="optionProps"
|
|
@change="handleChange"
|
|
clearable></el-cascader>
|
|
</el-form-item>
|
|
|
|
<div>
|
|
<el-form-item label="统计类型"
|
|
:label-width="labelWidth">
|
|
<el-radio v-model="tableParams.type"
|
|
label="end">截止累计值</el-radio>
|
|
<el-radio v-model="tableParams.type"
|
|
label="Interval">区间新增值</el-radio>
|
|
|
|
<el-date-picker style="margin-left:30px"
|
|
v-if="tableParams.type==='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="tableParams.type==='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="loadData()"
|
|
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>
|
|
|
|
<c-table ref="table"
|
|
:url="tableUrl"
|
|
:params="tableParams"
|
|
keyword="operStaticList"
|
|
:operations="operations"
|
|
:tableHeight="tableHeight">
|
|
</c-table>
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CTable from '@c/CTable'
|
|
import util from '@js/util.js';
|
|
|
|
import { mapGetters } from 'vuex'
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
|
import { requestPost } from '@/js/dai/request'
|
|
// import { export_json_to_excel } from '@/vendor/Export2Excel'
|
|
|
|
let loading // 加载动画
|
|
const customerId = localStorage.getItem('customerId')
|
|
export default {
|
|
data () {
|
|
return {
|
|
|
|
tableData1: [
|
|
{ 'name': 'lgk', 'sex': '男', 'username': 'liqing' },
|
|
{ 'name': 'll', 'sex': '女', 'username': 'yaoyao' }
|
|
],
|
|
|
|
tableData: [],
|
|
|
|
downloadLoading: false,
|
|
|
|
//查询条件标题宽度
|
|
labelWidth: '70px',
|
|
|
|
options: [],
|
|
agencyIdArray: [],
|
|
customerList: [],
|
|
iscascaderShow: 0,
|
|
|
|
optionProps: {
|
|
value: 'agencyId',
|
|
label: 'agencyName',
|
|
children: 'subAgencyList',
|
|
checkStrictly: true
|
|
},
|
|
|
|
|
|
pickerOptions: { //控制时间范围
|
|
disabledDate (time) {
|
|
return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000))
|
|
}
|
|
},
|
|
|
|
// 列表相关
|
|
tableUrl: '/data/aggregator/datastats/operatedata',
|
|
// tableUrl: 'http://yapi.elinkservice.cn/mock/102/data/aggregator/datastats/operatedata',
|
|
tableParams: {
|
|
customerId: '', //客户Id
|
|
agencyId: '', //所选组织Id
|
|
type: 'end', //区间:Interval 截止:end
|
|
startTime: '', //开始时间【yyyymmdd】
|
|
endTime: '', //结束时间【yyyymmdd】
|
|
isPage: true
|
|
},
|
|
timeArray: ['', ''],
|
|
customerName: '',
|
|
agencyName: '',
|
|
startTimeShow: '',//导出表格标题处显示的内容
|
|
endTimeShow: '', //导出表格标题处显示的内容
|
|
endTimeModel: new Date() - 60 * 60 * 24 * 2,
|
|
|
|
operations: [
|
|
],
|
|
|
|
}
|
|
},
|
|
components: {
|
|
CTable
|
|
},
|
|
activated () {
|
|
this.$nextTick(() => {
|
|
this.$refs.table.doLayout() // 解决表格错位
|
|
})
|
|
},
|
|
mounted () {
|
|
this.initData()
|
|
},
|
|
computed: {
|
|
tableHeight () {
|
|
return this.clientHeight - 60 - 80 - 80 - 100
|
|
},
|
|
|
|
...mapGetters(['clientHeight', 'env'])
|
|
},
|
|
methods: {
|
|
async initData () {
|
|
this.startLoading()
|
|
this.initDate()
|
|
await this.loadCustomer()//获取客户列表
|
|
|
|
this.endLoading()
|
|
},
|
|
handleChange (value) {
|
|
this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
|
|
},
|
|
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] + '日'
|
|
},
|
|
|
|
loadData () {
|
|
if (this.validate()) {
|
|
this.tableParams.isPage = true
|
|
this.$refs.table.loadData()
|
|
}
|
|
},
|
|
|
|
//获取客户列表
|
|
async loadCustomer (row) {
|
|
const url = ' https://epmet-cloud.elinkservice.cn/api/third/pacustomer/registerbyauth'
|
|
const params = {
|
|
// workAuth: 1,
|
|
// resiAuth: 1,
|
|
source: this.env,
|
|
initState: 1
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
this.customerList = data
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
handelChangeCustomer (index) {
|
|
this.customerName = this.customerList[index].customerName
|
|
this.getAgencylist()//获取组织级别
|
|
|
|
},
|
|
|
|
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 = ''
|
|
}
|
|
|
|
},
|
|
|
|
async getAgencylist () {
|
|
const url = '/gov/org/customeragency/agencylist'
|
|
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
|
|
|
|
const params = {
|
|
customerId: this.tableParams.customerId
|
|
}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
++this.iscascaderShow
|
|
this.options = []
|
|
this.agencyIdArray.length = []
|
|
this.tableParams.agencyId = ''
|
|
if (data) {
|
|
this.options.push(data)
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
validate () {
|
|
|
|
if (!this.tableParams.customerId) {
|
|
this.$message.info("请选择客户")
|
|
return false
|
|
}
|
|
|
|
if (this.agencyIdArray.length == 0) {
|
|
this.$message.info("请选择组织")
|
|
return false
|
|
}
|
|
|
|
if (this.tableParams.type === 'Interval' && (!this.tableParams.endTime || !this.tableParams.startTime)) {
|
|
this.$message.info("请选择起止日期")
|
|
return false
|
|
}
|
|
|
|
if (this.tableParams.type === 'end' && !this.tableParams.endTime) {
|
|
this.$message.info("请选择结束日期")
|
|
return false
|
|
}
|
|
|
|
this.tableParams.agencyId = this.agencyIdArray[this.agencyIdArray.length - 1]
|
|
|
|
return true
|
|
},
|
|
|
|
//导出表格
|
|
async loadOutTableData () {
|
|
if (!this.validate()) {
|
|
return false
|
|
}
|
|
let title = this.agencyName
|
|
|
|
if (this.tableParams.type === 'Interval') {
|
|
title = title + ' ' + this.startTimeShow + '-' + this.endTimeShow + '区间增长值'
|
|
} else {
|
|
title = title + ' 截止至' + this.endTimeShow + '累计值'
|
|
}
|
|
console.log(title)
|
|
|
|
const url = "/data/aggregator/datastats/operateexport"
|
|
// const url = "http://yapi.elinkservice.cn/mock/102/data/aggregator/datastats/operateexport"
|
|
this.tableParams.isPage = false
|
|
// this.tableParams.agencyId = '30705f91f1295ae77d372b868596a5e7'
|
|
// this.tableParams = {
|
|
// "customerId": "613cc61a6b8ce4c70d21bd413dac72cc",
|
|
// "agencyId": "30705f91f1295ae77d372b868596a5e7",
|
|
// "type": "Interval",
|
|
// "isPage": true,
|
|
// "endTime": "20210909",
|
|
// "startTime": "20210901"
|
|
// }
|
|
|
|
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);
|
|
}
|
|
|
|
},
|
|
|
|
handleDownload () {
|
|
|
|
this.downloadLoading = true
|
|
require.ensure([], () => {
|
|
|
|
const multiHeader = [title, '', '', '', '', '', '', '', '', '', '']
|
|
const tHeader = ['组织', '用户数', '居民数', '党员数', '小组数', '话题数', '议题数', '项目数', '结案项目数', '巡查人数', '巡查次数', '巡查时长']
|
|
const filterVal = ['orgName', 'userCount', 'residentCount', 'partyMemberCount', 'groupCount', 'topicCount', 'issueCount', 'projectCount', 'closedProjectCount', 'patrolPeopleCount', 'patrolCount', 'patrolDuration']
|
|
const list = this.tableData
|
|
const data = this.formatJson(filterVal, list)
|
|
export_json_to_excel(multiHeader, tHeader, data, title)
|
|
this.downloadLoading = false
|
|
})
|
|
},
|
|
|
|
formatJson (filterVal, jsonData) {
|
|
return jsonData.map(v => filterVal.map(j => v[j]))
|
|
},
|
|
|
|
// 截取value值
|
|
cutValue (target, name) {
|
|
let arr = []
|
|
for (let i = 0; i < target.length; i++) {
|
|
arr.push(target[i][name])
|
|
}
|
|
return arr
|
|
},
|
|
|
|
// 开启加载动画
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: '正在加载……', // 加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
|
})
|
|
},
|
|
// 结束加载动画
|
|
endLoading () {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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>
|
|
|
|
|