Browse Source

发布范围

old
jiangyy 4 years ago
parent
commit
0e046a1b48
  1. 1
      src/router/index.js
  2. 6
      src/views/form/editor/RightPanel.vue
  3. 287
      src/views/form/index.vue
  4. 184
      src/views/form/publish/index.vue
  5. 344
      src/views/form/statistics/analysis.vue
  6. 650
      src/views/form/statistics/chart.vue
  7. 596
      src/views/form/statistics/list.vue
  8. 310
      src/views/form/statistics/public.vue

1
src/router/index.js

@ -52,6 +52,7 @@ router.beforeEach((to, from, next) => {
console.log('ro.query', to.query) console.log('ro.query', to.query)
localStorage.setItem('loginSource', 'epmet') localStorage.setItem('loginSource', 'epmet')
localStorage.setItem('customerId', to.query.customerId)
store.dispatch('user/getUserInfo', to.query.token) store.dispatch('user/getUserInfo', to.query.token)
store.dispatch('user/setTokens', to.query.token) store.dispatch('user/setTokens', to.query.token)
next() next()

6
src/views/form/editor/RightPanel.vue

@ -971,6 +971,7 @@ export default {
loading: null, loading: null,
currentTab: "field", currentTab: "field",
currentNode: null, currentNode: null,
currentPID: Number,
dialogVisible: false, dialogVisible: false,
iconsVisible: false, iconsVisible: false,
currentIconModel: null, currentIconModel: null,
@ -1215,6 +1216,7 @@ export default {
}, },
addTreeItem () { addTreeItem () {
++this.idGlobal; ++this.idGlobal;
this.currentPID = 0
this.dialogVisible = true; this.dialogVisible = true;
this.currentNode = this.activeData.options; this.currentNode = this.activeData.options;
}, },
@ -1238,10 +1240,12 @@ export default {
); );
}, },
append (data) { append (data) {
if (!data.children) { if (!data.children) {
this.$set(data, "children", []); this.$set(data, "children", []);
} }
this.dialogVisible = true; this.dialogVisible = true;
this.currentPID = data.id
this.currentNode = data.children; this.currentNode = data.children;
}, },
remove (node, data) { remove (node, data) {
@ -1252,6 +1256,8 @@ export default {
children.splice(index, 1); children.splice(index, 1);
}, },
addNode (data) { addNode (data) {
debugger
data.pid = this.currentPID
this.currentNode.push(data); this.currentNode.push(data);
}, },
setOptionValue (item, val) { setOptionValue (item, val) {

287
src/views/form/index.vue

@ -1,6 +1,6 @@
<template> <template>
<div class="form-index-container"> <div class="form-index-container">
<!-- <el-card class="header-container"> <!-- <el-card class="header-container">
<el-row align="middle" type="flex" :gutter="5"> <el-row align="middle" type="flex" :gutter="5">
<i class="el-icon-back" @click="$router.back(-1)" /> <i class="el-icon-back" @click="$router.back(-1)" />
<img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})"> <img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})">
@ -13,43 +13,39 @@
</el-button> </el-button>
</el-row> </el-row>
</el-card> --> </el-card> -->
<div class="main-container"> <div class="main-container">
<div class="left-menu-container"> <div class="left-menu-container">
<el-menu :collapse="isCollapse" <el-menu :collapse="isCollapse"
:default-active="defaultActiveMenu" :default-active="defaultActiveMenu"
class="el-menu-vertical" class="el-menu-vertical">
> <el-menu-item v-for="menuItem in (publishStatus? menuItemList2:menuItemList)"
<el-menu-item v-for="menuItem in menuItemList" :key="menuItem.key"
:key="menuItem.key" :index="menuItem.route"
:index="menuItem.route" @click="menuSelectHandle(menuItem.route,menuItem.key)">
@click="menuSelectHandle(menuItem.route,menuItem.key)"
> <i :class="menuItem.icon" />
<i :class="menuItem.icon" /> <span slot="title">{{ menuItem.title }}</span>
<span slot="title">{{ menuItem.title }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<i v-if="!isCollapse" <i v-if="!isCollapse"
class="el-icon-d-arrow-left" class="el-icon-d-arrow-left"
@click="collapseHandle" @click="collapseHandle" />
/> <i v-else
<i v-else class="el-icon-d-arrow-right"
class="el-icon-d-arrow-right" @click="collapseHandle" />
@click="collapseHandle" </div>
/> <div class="right-content-container">
</div> <router-view />
<div class="right-content-container"> </div>
<router-view />
</div>
</div>
<el-dialog :visible.sync="previewDialogVisible"
destroy-on-close
fullscreen
>
<pre-view :key="previewKey"
:preview-qrcode="true"
/>
</el-dialog>
</div> </div>
<el-dialog :visible.sync="previewDialogVisible"
destroy-on-close
fullscreen>
<pre-view :key="previewKey"
:preview-qrcode="true" />
</el-dialog>
</div>
</template> </template>
<script> <script>
@ -57,104 +53,137 @@ import PreView from '@/views/form/preview'
import { formConf } from '@/components/generator/config' import { formConf } from '@/components/generator/config'
export default { export default {
name: 'NewIndex', name: 'NewIndex',
components: { PreView }, components: { PreView },
data() { data () {
return { return {
publishStatus: false,
previewKey: +new Date(), previewKey: +new Date(),
previewDialogVisible: false, previewDialogVisible: false,
defaultActiveMenu: '', defaultActiveMenu: '',
projectKey: null, projectKey: null,
isCollapse: false, isCollapse: false,
menuItemList: [ menuItemList: [
{ {
key: 'edit', key: 'edit',
title: '编辑', title: '编辑',
icon: 'el-icon-edit', icon: 'el-icon-edit',
route: '/project/form/editor' route: '/project/form/editor'
}, },
{ {
key: 'logic', key: 'logic',
title: '逻辑', title: '逻辑',
icon: 'el-icon-menu', icon: 'el-icon-menu',
route: '/project/form/logic' route: '/project/form/logic'
}, { }, {
key: 'view', key: 'view',
title: '外观', title: '外观',
icon: 'el-icon-view', icon: 'el-icon-view',
route: '/project/form/theme' route: '/project/form/theme'
}, },
{ {
key: 'set', key: 'set',
title: '设置', title: '设置',
icon: 'el-icon-setting', icon: 'el-icon-setting',
route: '/project/form/setting' route: '/project/form/setting'
}, },
{ {
key: 'publish', key: 'publish',
title: '发布', title: '发布',
icon: 'el-icon-video-play', icon: 'el-icon-video-play',
route: '/project/form/publish' route: '/project/form/publish'
}, { }, {
key: 'static', key: 'static',
title: '统计', title: '统计',
icon: 'el-icon-data-line', icon: 'el-icon-data-line',
route: '/project/form/statistics' route: '/project/form/statistics'
}, },
{ {
key: 'preview', key: 'preview',
title: '预览', title: '预览',
icon: 'el-icon-view' icon: 'el-icon-view'
}, },
{ {
key: 'save', key: 'save',
title: '保存', title: '保存',
icon: 'el-icon-folder-add' icon: 'el-icon-folder-add'
}, },
{ {
key: 'back', key: 'back',
title: '返回', title: '返回',
icon: 'el-icon-edit' icon: 'el-icon-edit'
}
]
} }
}, ],
async created() { menuItemList2: [
this.projectKey = this.$route.query.key {
this.defaultActiveMenu = this.$route.path key: 'static',
this.isCollapse = this.$store.state.form.isCollapse title: '统计',
icon: 'el-icon-data-line',
route: '/project/form/statistics'
},
{
key: 'preview',
title: '预览',
icon: 'el-icon-view'
},
{
key: 'back',
title: '返回',
icon: 'el-icon-edit'
}
]
}
},
async created () {
}, this.projectKey = this.$route.query.key
methods: { this.defaultActiveMenu = this.$route.path
this.isCollapse = this.$store.state.form.isCollapse
menuSelectHandle(route, key) { this.getProjectStatus()
if (key === 'preview') { },
this.previewDialogVisible = true methods: {
} else if (key === 'save') {
this.saveProjectAsTemplateHandle() getProjectStatus () {
} else if (key === 'back') { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
this.$router.back(-1)
} else { this.$router.replace({ path: route, query: { key: this.projectKey } }) } if (res.data.status == 1) {
this.publishStatus = false
} else {
this.publishStatus = true
},
openPreviewHandle() {
this.previewKey = +new Date()
this.previewDialogVisible = true
},
saveProjectAsTemplateHandle() {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/template/save`, { key: this.projectKey }).then(() => {
this.msgSuccess('保存成功')
})
},
collapseHandle() {
let isCollapse = !this.isCollapse
this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => {
this.isCollapse = isCollapse
})
} }
})
},
menuSelectHandle (route, key) {
if (key === 'preview') {
this.previewDialogVisible = true
} else if (key === 'save') {
this.saveProjectAsTemplateHandle()
} else if (key === 'back') {
this.$router.back(-1)
} else { this.$router.replace({ path: route, query: { key: this.projectKey } }) }
},
openPreviewHandle () {
this.previewKey = +new Date()
this.previewDialogVisible = true
},
saveProjectAsTemplateHandle () {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/template/save`, { key: this.projectKey }).then(() => {
this.msgSuccess('保存成功')
})
},
collapseHandle () {
let isCollapse = !this.isCollapse
this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => {
this.isCollapse = isCollapse
})
} }
}
} }
</script> </script>

184
src/views/form/publish/index.vue

@ -4,34 +4,40 @@
<div v-if="!publishStatus" <div v-if="!publishStatus"
class="publish-btn-view"> class="publish-btn-view">
<div> <div>
<el-form label-width="90px"> <el-form label-width="150px">
<el-form-item label="小程序端"> <el-form-item label="小程序端">
<el-radio-group v-model="clientType"> <el-radio-group class="form_item"
<el-radio-button label="resi">居民端</el-radio-button> @change="clientChange"
<el-radio-button label="work">工作端</el-radio-button> v-model="clientType">
<el-radio label="resi">居民端</el-radio>
<el-radio label="gov">工作端</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="发布范围"> <el-form-item label="发布范围">
<el-tree ref="tree" <el-tree class="form_item"
ref="tree"
style="background-color:#f7f7f7" style="background-color:#f7f7f7"
:props="props" :props="props"
:data="data" :data="data"
show-checkbox show-checkbox
:default-expand-all="true" :default-expand-all="true" />
@node-click="nodeClick"
@check="check"
@check-change="handleCheckChange" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div style="text-align:center"> <div style="text-align:left;margin-left:200px;margin-top:50px">
<el-button class="publish-btn" <el-button class="publish-btn"
size="medium" size="medium"
type="primary" type="primary"
@click="publishProject"> @click="publishProject">
<i class="el-icon-document-checked el-icon--right">开始发布</i> <i class="el-icon-document-checked el-icon--right">开始发布</i>
</el-button> </el-button>
<!-- <el-button class="publish-btn"
size="medium"
type="primary"
@click="resolveAgency">
<i class="el-icon-document-checked el-icon--right">获取组织</i>
</el-button> -->
</div> </div>
</div> </div>
<div v-if="publishStatus" <div v-if="publishStatus"
@ -64,19 +70,19 @@
<div> <div>
<p class="success-title">恭喜您发布成功</p> <p class="success-title">恭喜您发布成功</p>
</div> </div>
<!-- <div> <div>
<p class="link-text"> {{ writeLink }}</p> <p class="link-text"> {{ writeLink }}</p>
</div> --> </div>
<el-row> <el-row>
<!-- <el-col :offset="2" <el-col :offset="2"
:span="6"> :span="6">
<el-button v-clipboard:copy="writeLink" <!-- <el-button v-clipboard:copy="writeLink"
v-clipboard:error="()=>{this.msgError('复制失败')}" v-clipboard:error="()=>{this.msgError('复制失败')}"
v-clipboard:success="()=>{this.msgSuccess('复制成功')}" type="primary" v-clipboard:success="()=>{this.msgSuccess('复制成功')}"
> type="primary">
复制链接 复制链接
</el-button> </el-button> -->
</el-col> --> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-button type="danger" <el-button type="danger"
@click="stopPublishProject"> @click="stopPublishProject">
@ -115,71 +121,112 @@ export default {
clientType: 'resi', clientType: 'resi',
props: { props: {
// label: 'name', label: 'orgName',
// children: 'zones' children: 'subOrgList'
}, },
count: 1, count: 1,
data: [{ data: [{
id: 1, orgId: 1,
label: '一级 1', orgName: '一级 1',
children: [{ subOrgList: [{
id: 4, orgId: 4,
label: '二级 1-1', orgName: '二级 1-1',
children: [{ subOrgList: [{
id: 9, orgId: 9,
label: '三级 1-1-1' orgName: '三级 1-1-1'
}, { }, {
id: 10, orgId: 10,
label: '三级 1-1-2' orgName: '三级 1-1-2'
}] }]
}] }]
}, { }, {
id: 2, orgId: 2,
label: '一级 2', orgName: '一级 2',
children: [{ subOrgList: [{
id: 5, orgId: 5,
label: '二级 2-1' orgName: '二级 2-1'
}, { }, {
id: 6, orgId: 6,
label: '二级 2-2' orgName: '二级 2-2'
}] }]
}, { }, {
id: 3, orgId: 3,
label: '一级 3', orgName: '一级 3',
children: [{ subOrgList: [{
id: 7, orgId: 7,
label: '二级 3-1' orgName: '二级 3-1'
}, { }, {
id: 8, orgId: 8,
label: '二级 3-2' orgName: '二级 3-2'
}] }]
}] }],
selAgencyList: [],
agencyArrayCopy: []
} }
}, },
mounted () { mounted () {
this.projectKey = this.$route.query.key this.projectKey = this.$route.query.key
let url = window.location.protocol + '//' + window.location.host let url = window.location.protocol + '//' + window.location.host
this.writeLink = `${url}/s/${this.projectKey}` this.writeLink = `${url}/s/${this.projectKey}`
this.getProjectStatus() this.getProjectStatus()
}, },
methods: { methods: {
currentChange (data, node) {
console.log(data, node)
},
check () {
clientChange (label) {
this.clientType = label
this.loadAgencyList()
}, },
handleCheckChange (data, checked, indeterminate) {
data.select = true loadAgencyList () {
console.log(data, checked, indeterminate) const customerId = localStorage.getItem('customerId')
// console.log(''); let params = {
// console.log(this.data) client: this.clientType,
agencyId: customerId
}
this.$api.post(`/data/aggregator/org/agencytree`, params).then((res) => {
debugger
})
}, },
nodeClick (a, b, c) {
console.log(a, b, c) //
resolveAgency () {
let selAll = this.$refs.tree.getCheckedNodes(false, false)
// console.log(selAll)
this.selAgencyList = []
this.agencyArrayCopy = JSON.parse(JSON.stringify(this.data))
selAll.forEach(element => {
// debugger
let orgId = element.orgId
this.resursionTree(this.agencyArrayCopy, orgId)
});
console.log(this.selAgencyList)
}, },
handleNodeClick (data) {
// console.log(data); //
resursionTree (orgArray, orgId) {
for (let i = 0; i < orgArray.length; i++) {
let item = orgArray[i]
// debugger
if (item && item.orgId === orgId) {
// debugger
this.selAgencyList.push(orgArray[i])
orgArray[i] = {}
break
} else if (item.subOrgList && item.subOrgList.length > 0) {
// debugger
this.resursionTree(item.subOrgList, orgId)
}
}
// console.log(this.agencyArrayCopy)
}, },
getProjectStatus () { getProjectStatus () {
@ -188,16 +235,16 @@ export default {
this.publishStatus = true this.publishStatus = true
} else { } else {
this.publishStatus = false this.publishStatus = false
this.loadAgencyList()
} }
}) })
}, },
publishProject () { publishProject () {
const aaa = this.$refs.tree.getCheckedNodes(false, false)
console.log(aaa) this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`, { key: this.projectKey }).then(() => {
// this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`, { key: this.projectKey }).then(() => { this.publishStatus = true
// this.publishStatus = true this.msgSuccess('发布成功')
// this.msgSuccess('') })
// })
}, },
stopPublishProject () { stopPublishProject () {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, { 'key': this.projectKey }).then(res => { this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, { 'key': this.projectKey }).then(res => {
@ -284,4 +331,7 @@ export default {
font-size: 14px; font-size: 14px;
} }
} }
.form_item {
padding-left: 20px;
}
</style> </style>

344
src/views/form/statistics/analysis.vue

@ -1,192 +1,192 @@
<template> <template>
<div class="analysis"> <div class="analysis">
<div v-if="list.length && list.length !== 0"> <div v-if="list.length && list.length !== 0">
<div v-for="(item, index) in list" :key="index"> <div v-for="(item, index) in list"
<div class="content"> :key="index">
<div class="title"> <div class="content">
<span style="font-size: 16px">Q{{ item.label }}{{ item.type }}</span> <div class="title">
<span style="font-size: 16px">Q{{ item.label }}{{ item.type }}</span>
<div> <div>
<span>图表类型</span> <span>图表类型</span>
<el-select v-model="item.chartType" placeholder="请选择"> <el-select v-model="item.chartType"
<el-option placeholder="请选择">
v-for="subItem in options" <el-option v-for="subItem in options"
:key="subItem.value" :key="subItem.value"
:label="subItem.label" :label="subItem.label"
:value="subItem.value" :value="subItem.value" />
/> </el-select>
</el-select>
</div>
</div>
<line-chart
class="chart"
:chart-option="getCharData(item)"
:width="'90vw'"
/>
</div>
<el-divider />
</div> </div>
</div>
<line-chart class="chart"
:chart-option="getCharData(item)"
:width="'90vw'" />
</div> </div>
<data-empty v-else style="padding: 20px" desc="只有单选、多选、下拉框组件可以生成图表" /> <el-divider />
</div>
</div> </div>
<data-empty v-else
style="padding: 20px"
desc="只有单选、多选、下拉框组件可以生成图表" />
</div>
</template> </template>
<script> <script>
import LineChart from '@/components/echarts/LineChart' import LineChart from '@/components/echarts/LineChart'
export default { export default {
components: { components: {
LineChart LineChart
}, },
data() { data () {
return { return {
barChartOptionData: { barChartOptionData: {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black', color: 'black',
borderWidth: '1', borderWidth: '1',
borderColor: 'rgb(156,209,255)', borderColor: 'rgb(156,209,255)',
textStyle: { textStyle: {
color: 'black' color: 'black'
}, },
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
} }
} }
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value'
} }
], ],
series: [ series: [
{ {
name: '数量', name: '数量',
type: 'line', type: 'line',
barWidth: '40%', barWidth: '40%',
data: [10, 52, 200, 334, 390, 330, 220] data: [10, 52, 200, 334, 390, 330, 220]
} }
] ]
}, },
list: [], list: [],
options: [ options: [
{ {
value: 'pie', value: 'pie',
label: '饼图' label: '饼图'
}, },
/* { /* {
value: "ring", value: "ring",
label: "环形图", label: "环形图",
}, */ }, */
{ {
value: 'bar', value: 'bar',
label: '柱状图' label: '柱状图'
}, },
{ {
value: 'line', value: 'line',
label: '折线图' label: '折线图'
}
]
} }
]
}
},
mounted () {
this.getData()
},
methods: {
getData () {
this.$api
.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis`, {
params: { projectKey: this.$route.query.key }
})
.then(res => {
this.list = res.data
})
}, },
mounted() { getCharData (data) {
this.getData() const config = {
}, tooltip: {
methods: { backgroundColor: 'rgba(255,255,255,0.8)', // rgba
getData() { color: 'black',
this.$api borderWidth: '1',
.get('/user/project/report/analysis', { borderColor: 'rgb(156,209,255)',
params: { projectKey: this.$route.query.key } textStyle: {
}) color: 'black'
.then(res => { }
this.list = res.data
})
}, },
getCharData(data) { grid: {
const config = { left: '3%',
tooltip: { right: '4%',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba bottom: '3%',
color: 'black', containLabel: true
borderWidth: '1', },
borderColor: 'rgb(156,209,255)', xAxis: [
textStyle: { {
color: 'black' type: 'category',
} axisTick: {
}, alignWithLabel: true
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '数量',
type: 'pie',
barWidth: '40%'
}
]
} }
if (['bar', 'line'].includes(data.chartType)) { }
config.tooltip.axisPointer = { ],
type: 'line' yAxis: [
} {
config.tooltip.trigger = 'axis' type: 'value'
config.xAxis[0].data = data.fieldName }
config.series[0].data = data.data ],
config.series[0].type = data.chartType series: [
} else { {
// name: '数量',
/* if ("ring" === data.chartType) { type: 'pie',
config.series[0].radius = ["40%", "70%"]; barWidth: '40%'
}
]
}
if (['bar', 'line'].includes(data.chartType)) {
config.tooltip.axisPointer = {
type: 'line'
}
config.tooltip.trigger = 'axis'
config.xAxis[0].data = data.fieldName
config.series[0].data = data.data
config.series[0].type = data.chartType
} else {
//
/* if ("ring" === data.chartType) {
config.series[0].radius = ["40%", "70%"];
config.series[0].emphasis = { config.series[0].emphasis = {
label: { label: {
show: true, show: true,
fontSize: '25', fontSize: '25',
fontWeight: 'bold' fontWeight: 'bold'
}
}
}else{
delete config.series[0].radius
delete config.series[0].label
} */
config.series[0].data = []
Object.keys(data.map).forEach(key => {
config.series[0].data.push({ name: key, value: data.map[key] })
})
// config.series[0].data = data.map
}
return config
} }
} }
}else{
delete config.series[0].radius
delete config.series[0].label
} */
config.series[0].data = []
Object.keys(data.map).forEach(key => {
config.series[0].data.push({ name: key, value: data.map[key] })
})
// config.series[0].data = data.map
}
return config
}
}
} }
</script> </script>

650
src/views/form/statistics/chart.vue

@ -1,55 +1,63 @@
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<p class="tag-title">回收概览</p> <p class="tag-title">回收概览</p>
<el-divider /> <el-divider />
<div class="project-index-view"> <div class="project-index-view">
<div> <div>
<div> <div>
<p class="text-center">有效回收量</p> <p class="text-center">有效回收量</p>
<count-to :end-val="projectStats.completeCount" <count-to :end-val="projectStats.completeCount"
style="font-size: 20px;" style="font-size: 20px;" />
/>
</div>
<div>
<p>总浏览量</p>
<count-to :end-val="projectStats.viewCount" style="font-size: 20px;" />
</div>
<div>
<p>回收率</p>
<count-to :end-val="projectStats.completeRate" style="font-size: 20px;" />
%
</div>
<div>
<p>平均完成时间</p>
<span style="font-size: 20px;">
{{ projectStats.avgCompleteFormatStr }}
</span>
</div>
</div>
</div> </div>
<div class="line-chat"> <div>
<line-chart :width="'95vw'" :chart-option="lineChartOptionData" /> <p>总浏览量</p>
<count-to :end-val="projectStats.viewCount"
style="font-size: 20px;" />
</div> </div>
<p class="tag-title">表单提交地域分布图</p> <div>
<div style="width: 90%"> <p>回收率</p>
<map-chart :width="'100vw'" :chart-option="mapChartOptionData" :height="'450px'" /> <count-to :end-val="projectStats.completeRate"
style="font-size: 20px;" />
%
</div> </div>
<el-divider /> <div>
<div style="display: flex; flex-direction: row; justify-content: space-around;"> <p>平均完成时间</p>
<div style="width: 50%;"> <span style="font-size: 20px;">
<p class="tag-title">常用设备</p> {{ projectStats.avgCompleteFormatStr }}
<div> </span>
<pie-chart :width="'48vw'" :chart-option="pieChartOptionData" :height="'250px'" />
</div>
</div>
<div style="width: 50%;">
<p class="tag-title">来源渠道</p>
<div>
<bar-chart :width="'48vw'" :chart-option="barChartOptionData" :height="'250px'" />
</div>
</div>
</div> </div>
</div>
</div> </div>
<div class="line-chat">
<line-chart :width="'95vw'"
:chart-option="lineChartOptionData" />
</div>
<p class="tag-title">表单提交地域分布图</p>
<div style="width: 90%">
<map-chart :width="'100vw'"
:chart-option="mapChartOptionData"
:height="'450px'" />
</div>
<el-divider />
<div style="display: flex; flex-direction: row; justify-content: space-around;">
<div style="width: 50%;">
<p class="tag-title">常用设备</p>
<div>
<pie-chart :width="'48vw'"
:chart-option="pieChartOptionData"
:height="'250px'" />
</div>
</div>
<div style="width: 50%;">
<p class="tag-title">来源渠道</p>
<div>
<bar-chart :width="'48vw'"
:chart-option="barChartOptionData"
:height="'250px'" />
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import PieChart from '@/components/echarts/PieChart' import PieChart from '@/components/echarts/PieChart'
@ -57,300 +65,300 @@ import LineChart from '@/components/echarts/LineChart'
import MapChart from '@/components/echarts/MapChart' import MapChart from '@/components/echarts/MapChart'
import CountTo from '@/components/CountTo' import CountTo from '@/components/CountTo'
import BarChart from '@/components/echarts/BarChart' import BarChart from '@/components/echarts/BarChart'
import {timeFormat} from '@/utils' import { timeFormat } from '@/utils'
export default { export default {
name: 'StatisticsChart', name: 'StatisticsChart',
components: { components: {
CountTo, CountTo,
MapChart, MapChart,
PieChart, PieChart,
BarChart, BarChart,
LineChart LineChart
}, },
data() { data () {
return { return {
projectListData: null, projectListData: null,
projectStats: { projectStats: {
avgCompleteTime: 0, avgCompleteTime: 0,
avgCompleteFormatStr: 0, avgCompleteFormatStr: 0,
viewCount: 0, viewCount: 0,
completeCount: 0, completeCount: 0,
completeRate: 0 completeRate: 0
}, },
activeProjectKey: null, activeProjectKey: null,
// //
lineChartOptionData: { lineChartOptionData: {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisTick: { axisTick: {
show: false show: false
}, },
data: [] data: []
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black', color: 'black',
borderWidth: '1', borderWidth: '1',
borderColor: 'rgb(156,209,255)', borderColor: 'rgb(156,209,255)',
textStyle: { textStyle: {
color: 'black' color: 'black'
} }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
minInterval: 1 minInterval: 1
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
series: [{ series: [{
data: [], data: [],
name: '回收数', name: '回收数',
stack: '总量', stack: '总量',
type: 'line', type: 'line',
areaStyle: {} areaStyle: {}
}] }]
}, },
mapChartOptionData: { mapChartOptionData: {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black', color: 'black',
borderWidth: '1', borderWidth: '1',
borderColor: 'rgb(156,209,255)', borderColor: 'rgb(156,209,255)',
textStyle: { textStyle: {
color: 'black' color: 'black'
} }
}, },
visualMap: { visualMap: {
type: 'piecewise', type: 'piecewise',
show: false, show: false,
pieces: [ pieces: [
{min: 1500}, { min: 1500 },
{min: 900, max: 1500}, { min: 900, max: 1500 },
{min: 310, max: 1000}, { min: 310, max: 1000 },
{min: 1, max: 300} { min: 1, max: 300 }
], ],
color: ['#E0022B', '#E09107', '#A3E00B'] color: ['#E0022B', '#E09107', '#A3E00B']
}, },
toolbox: { toolbox: {
show: false, show: false,
orient: 'vertical', orient: 'vertical',
left: 'right', left: 'right',
top: 'center', top: 'center',
feature: { feature: {
restore: {}, restore: {},
saveAsImage: {} saveAsImage: {}
} }
}, },
series: [ series: [
{ {
name: '提交数', name: '提交数',
type: 'map', type: 'map',
mapType: 'china', mapType: 'china',
zoom: 1.4, zoom: 1.4,
roam: false, roam: false,
label: { label: {
show: false, show: false,
color: 'rgb(0,0,0)' color: 'rgb(0,0,0)'
},
data: []
}
]
},
barChartOptionData: {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black',
borderWidth: '1',
borderColor: 'rgb(156,209,255)',
textStyle: {
color: 'black'
},
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
interval: 1,
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: [0]
},
series: [
{
barWidth: 30,
name: '数量',
type: 'bar',
data: [0]
}
]
}, },
pieChartOptionData: { data: []
tooltip: { }
trigger: 'item', ]
backgroundColor: 'rgba(255,255,255,0.8)', // rgba },
color: 'black', barChartOptionData: {
borderWidth: '1', tooltip: {
borderColor: 'rgb(156,209,255)', trigger: 'axis',
textStyle: { backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black' color: 'black',
} borderWidth: '1',
}, borderColor: 'rgb(156,209,255)',
series: [ textStyle: {
{ color: 'black'
name: '设备类型', },
type: 'pie', axisPointer: {
radius: ['50%', '70%'], type: 'shadow'
avoidLabelOverlap: false, }
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [0]
}
]
}
}
},
created() {
this.activeProjectKey = this.$route.query.key
this.projectChangeHandle()
}, methods: {
projectChangeHandle() {
this.getProjectStats()
this.getProjectSituation()
this.getProjectSubmitPosition()
this.getProjectSubmitDevice()
this.getProjectSubmitSource()
}, },
getProjectStats() { grid: {
this.$api.get('/user/project/report/stats', {params: {projectKey: this.activeProjectKey}}).then(res => { left: '3%',
this.projectStats = res.data right: '4%',
if (this.projectStats.completeCount) { bottom: '3%',
let rate = this.projectStats.completeCount / this.projectStats.viewCount containLabel: true
this.projectStats.completeRate = rate > 1 ? 100 : rate * 100
this.projectStats.avgCompleteFormatStr = timeFormat(this.projectStats.avgCompleteTime)
} else {
this.projectStats.completeRate = 0
this.projectStats.avgCompleteFormatStr = 0
}
})
}, },
getProjectSituation() { xAxis: {
this.$api.get('/user/project/report/situation', {params: {projectKey: this.activeProjectKey}}).then(res => { type: 'value',
this.lineChartOptionData.xAxis.data = res.data.map(item => { interval: 1,
return item.createdTime boundaryGap: [0, 0.01]
})
this.lineChartOptionData.series = [{
data: res.data.map(item => {
return item.count
}),
name: '回收数',
stack: '总量',
type: 'line',
areaStyle: {}
}]
})
}, },
// yAxis: {
getProjectSubmitPosition() { type: 'category',
this.$api.get('/user/project/report/position', {params: {projectKey: this.activeProjectKey}}).then(res => { data: [0]
this.mapChartOptionData.series = [
{
name: '提交数',
type: 'map',
mapType: 'china',
zoom: 1.2,
roam: false,
label: {
show: false,
color: 'rgb(0,0,0)'
},
data: Object.keys(res.data).map(key => {
return {name: key.replace(/省(s?)|市(s?)|\//ig, ''), value: res.data[key]}
})
}
]
})
}, },
getProjectSubmitSource() { series: [
this.$api.get('/user/project/report/source', {params: {projectKey: this.activeProjectKey}}).then(res => { {
if (res.data && res.data.length) { barWidth: 30,
this.barChartOptionData.yAxis.data = res.data.map(item => { name: '数量',
return item.browserName ? item.browserName : '其他' type: 'bar',
}) data: [0]
this.barChartOptionData.series = [ }
{ ]
barWidth: 30, },
name: '数量', pieChartOptionData: {
type: 'bar', tooltip: {
data: res.data.map(item => { trigger: 'item',
return item.count backgroundColor: 'rgba(255,255,255,0.8)', // rgba
}) color: 'black',
} borderWidth: '1',
] borderColor: 'rgb(156,209,255)',
} textStyle: {
}) color: 'black'
}
}, },
getProjectSubmitDevice() { series: [
this.$api.get('/user/project/report/device', {params: {projectKey: this.activeProjectKey}}).then(res => { {
if (res.data && res.data.length) { name: '设备类型',
this.pieChartOptionData.series[0].data = res.data.map(item => { type: 'pie',
return {value: item.count, name: item.osName ? item.osName : '其他'} radius: ['50%', '70%'],
}) avoidLabelOverlap: false,
} label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [0]
}
]
}
}
},
created () {
this.activeProjectKey = this.$route.query.key
this.projectChangeHandle()
}, methods: {
projectChangeHandle () {
this.getProjectStats()
this.getProjectSituation()
this.getProjectSubmitPosition()
this.getProjectSubmitDevice()
this.getProjectSubmitSource()
},
getProjectStats () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/stats`, { params: { projectKey: this.activeProjectKey } }).then(res => {
this.projectStats = res.data
if (this.projectStats.completeCount) {
let rate = this.projectStats.completeCount / this.projectStats.viewCount
this.projectStats.completeRate = rate > 1 ? 100 : rate * 100
this.projectStats.avgCompleteFormatStr = timeFormat(this.projectStats.avgCompleteTime)
} else {
this.projectStats.completeRate = 0
this.projectStats.avgCompleteFormatStr = 0
}
})
},
getProjectSituation () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/situation`, { params: { projectKey: this.activeProjectKey } }).then(res => {
this.lineChartOptionData.xAxis.data = res.data.map(item => {
return item.createdTime
})
this.lineChartOptionData.series = [{
data: res.data.map(item => {
return item.count
}),
name: '回收数',
stack: '总量',
type: 'line',
areaStyle: {}
}]
})
},
//
getProjectSubmitPosition () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/position`, { params: { projectKey: this.activeProjectKey } }).then(res => {
this.mapChartOptionData.series = [
{
name: '提交数',
type: 'map',
mapType: 'china',
zoom: 1.2,
roam: false,
label: {
show: false,
color: 'rgb(0,0,0)'
},
data: Object.keys(res.data).map(key => {
return { name: key.replace(/省(s?)|市(s?)|\//ig, ''), value: res.data[key] }
}) })
}
]
})
},
getProjectSubmitSource () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/source`, { params: { projectKey: this.activeProjectKey } }).then(res => {
if (res.data && res.data.length) {
this.barChartOptionData.yAxis.data = res.data.map(item => {
return item.browserName ? item.browserName : '其他'
})
this.barChartOptionData.series = [
{
barWidth: 30,
name: '数量',
type: 'bar',
data: res.data.map(item => {
return item.count
})
}
]
}
})
},
getProjectSubmitDevice () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/device'`, { params: { projectKey: this.activeProjectKey } }).then(res => {
if (res.data && res.data.length) {
this.pieChartOptionData.series[0].data = res.data.map(item => {
return { value: item.count, name: item.osName ? item.osName : '其他' }
})
} }
})
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-container { .dashboard-container {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden!important; overflow-x: hidden !important;
} }
.tag-title { .tag-title {
font-size: 16px; font-size: 16px;
line-height: 25px; line-height: 25px;
margin-left: 20px; margin-left: 20px;
} }
.project-index-view { .project-index-view {
& > div { & > div {
display: flex; display: flex;
width: 80%; width: 80%;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
justify-content: space-between; justify-content: space-between;
} }
} }
</style> </style>

596
src/views/form/statistics/list.vue

@ -1,326 +1,331 @@
<template> <template>
<div class="statistics-container"> <div class="statistics-container">
<div class="filter-table-view"> <div class="filter-table-view">
<el-form ref="filterForm" :inline="true"> <el-form ref="filterForm"
<el-form-item label="提交时间" prop="endDateTime"> :inline="true">
<el-date-picker <el-form-item label="提交时间"
v-model="queryConditions.beginDateTime" prop="endDateTime">
placeholder="开始时间" <el-date-picker v-model="queryConditions.beginDateTime"
type="datetime" placeholder="开始时间"
value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
/> value-format="yyyy-MM-dd HH:mm:ss" />
<span> </span> <span> </span>
<el-date-picker <el-date-picker v-model="queryConditions.endDateTime"
v-model="queryConditions.endDateTime" :default-time="'23:59:59'"
:default-time="'23:59:59'" placeholder="结束时间"
placeholder="结束时间" type="datetime"
type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
value-format="yyyy-MM-dd HH:mm:ss" </el-form-item>
/> <el-form-item>
</el-form-item> <el-button type="primary"
<el-form-item> @click="queryProjectResult">查询</el-button>
<el-button type="primary" @click="queryProjectResult">查询</el-button> <el-button type="primary"
<el-button type="primary" @click="conditionFilterHandle">条件</el-button> @click="conditionFilterHandle">条件</el-button>
<el-button type="success" @click="exportProjectResult">导出</el-button> <el-button type="success"
<el-button type="success" @click="downloadProjectResultFile">下载附件</el-button> @click="exportProjectResult">导出</el-button>
</el-form-item> <el-button type="success"
</el-form> @click="downloadProjectResultFile">下载附件</el-button>
</div> </el-form-item>
<div class="result-table-view"> </el-form>
<el-table </div>
:data="projectResultList" <div class="result-table-view">
<el-table :data="projectResultList"
header-cell-class-name="data-table-header" header-cell-class-name="data-table-header"
stripe stripe
@row-dblclick="(row, column, event)=>{ @row-dblclick="(row, column, event)=>{
this.openDetailDrawerHandle(row) this.openDetailDrawerHandle(row)
}" }">
> <el-table-column type="selection"
<el-table-column width="55" />
type="selection" <el-table-column v-for="col in fixedCustomColumns"
width="55" :key="`t${col}`"
/> :label="fixedDefaultLabelFormColumn[col]">
<el-table-column <template slot-scope="scope">
v-for="col in fixedCustomColumns" :key="`t${col}`" {{ scope.row[col] }}
:label="fixedDefaultLabelFormColumn[col]" </template>
> </el-table-column>
<template slot-scope="scope">
{{ scope.row[col] }}
</template>
</el-table-column>
<el-table-column <el-table-column v-for="col in otherCustomColumns"
v-for="col in otherCustomColumns" :key="col"
:key="col" :label="projectItemColumns[col]" :label="projectItemColumns[col]"
show-overflow-tooltip show-overflow-tooltip>
> <template slot-scope="scope">
<template slot-scope="scope"> {{ scope.row['processData'][col] }}
{{ scope.row['processData'][col] }} </template>
</template> </el-table-column>
</el-table-column>
<el-table-column <el-table-column v-for="col in fixedFormTailColumns"
v-for="col in fixedFormTailColumns" :key="`t${col}`" :key="`t${col}`"
:label="fixedDefaultLabelFormTailColumn[col]" :label="fixedDefaultLabelFormTailColumn[col]">
> <template slot-scope="scope">
<template slot-scope="scope"> {{ scope.row[col] }}
{{ scope.row[col] }} </template>
</template> </el-table-column>
</el-table-column>
<el-table-column <el-table-column :render-header="renderHeader"
:render-header="renderHeader" fixed="right"
fixed="right" width="50">
width="50" <template slot-scope="scope">
> <el-button size="small"
<template slot-scope="scope"> type="text"
<el-button size="small" type="text" @click="openDetailDrawerHandle(scope.row)">查看</el-button> @click="openDetailDrawerHandle(scope.row)">查看</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-drawer <el-drawer v-if="activeResultRow"
v-if="activeResultRow" :visible.sync="detailDrawer"
:visible.sync="detailDrawer" :with-header="false">
:with-header="false" <el-scrollbar style="height: 100%;">
> <el-card class="detail-container">
<el-scrollbar style="height: 100%;"> <div slot="header"
<el-card class="detail-container"> class="clearfix">
<div slot="header" class="clearfix"> <span>提交详情</span>
<span>提交详情</span>
</div>
<div>
<div v-for="item in projectItemList" :key="item.id">
<h4>{{ item.label }}</h4>
<result-item :field-item-id="item.formItemId" :project-item-data="item"
:result-data="activeResultRow"
/>
<el-divider />
</div>
</div>
</el-card>
</el-scrollbar>
</el-drawer>
<div style="display: flex; justify-content: center; margin-top: 10px;">
<el-pagination
v-if="total>10"
:current-page.sync="queryConditions.current"
:page-size.sync="queryConditions.size"
:total="total"
background
layout="total, prev, pager, next"
@current-change="queryProjectResult"
/>
</div> </div>
</div> <div>
<div class="custom-col-container"> <div v-for="item in projectItemList"
<el-dialog :visible.sync="customColumnDialogVisible" center title="自定义显示列"> :key="item.id">
<el-row> <h4>{{ item.label }}</h4>
<el-col :span="3"> <result-item :field-item-id="item.formItemId"
<span>显示列</span> :project-item-data="item"
</el-col> :result-data="activeResultRow" />
</el-row>
<el-divider />
<el-checkbox-group v-model="checkedFixedCustomColumns">
<el-row>
<el-col v-for="(val, key) in fixedDefaultLabelFormColumn" :key="key" :span="4">
<el-checkbox :label="key">{{ val }}</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
<el-divider /> <el-divider />
<el-checkbox-group v-model="checkOtherCustomColumns"> </div>
<el-row> </div>
<el-col v-for="(val, key) in projectItemColumns" :key="key" :span="8"> </el-card>
<el-checkbox :label="key">{{ val }}</el-checkbox> </el-scrollbar>
</el-col> </el-drawer>
</el-row> <div style="display: flex; justify-content: center; margin-top: 10px;">
</el-checkbox-group> <el-pagination v-if="total>10"
<el-divider /> :current-page.sync="queryConditions.current"
<el-checkbox-group v-model="checkedFixedTailCustomColumns"> :page-size.sync="queryConditions.size"
<el-row> :total="total"
<el-col v-for="(val, key) in fixedDefaultLabelFormTailColumn" :key="key" :span="4"> background
<el-checkbox :label="key">{{ val }}</el-checkbox> layout="total, prev, pager, next"
</el-col> @current-change="queryProjectResult" />
</el-row> </div>
</el-checkbox-group>
<span slot="footer" class="dialog-footer">
<el-button @click="customColumnDialogVisible = false"> </el-button>
<el-button type="primary" @click="saveStatisticsCheckedColumns"> </el-button>
</span>
</el-dialog>
</div>
<data-filter ref="dataFilter" :fields="projectItemList" @filter="dataFilterHandle" />
</div> </div>
<div class="custom-col-container">
<el-dialog :visible.sync="customColumnDialogVisible"
center
title="自定义显示列">
<el-row>
<el-col :span="3">
<span>显示列</span>
</el-col>
</el-row>
<el-divider />
<el-checkbox-group v-model="checkedFixedCustomColumns">
<el-row>
<el-col v-for="(val, key) in fixedDefaultLabelFormColumn"
:key="key"
:span="4">
<el-checkbox :label="key">{{ val }}</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
<el-divider />
<el-checkbox-group v-model="checkOtherCustomColumns">
<el-row>
<el-col v-for="(val, key) in projectItemColumns"
:key="key"
:span="8">
<el-checkbox :label="key">{{ val }}</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
<el-divider />
<el-checkbox-group v-model="checkedFixedTailCustomColumns">
<el-row>
<el-col v-for="(val, key) in fixedDefaultLabelFormTailColumn"
:key="key"
:span="4">
<el-checkbox :label="key">{{ val }}</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
<span slot="footer"
class="dialog-footer">
<el-button @click="customColumnDialogVisible = false"> </el-button>
<el-button type="primary"
@click="saveStatisticsCheckedColumns"> </el-button>
</span>
</el-dialog>
</div>
<data-filter ref="dataFilter"
:fields="projectItemList"
@filter="dataFilterHandle" />
</div>
</template> </template>
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import ResultItem from './item' import ResultItem from './item'
import DataFilter from './filter' import DataFilter from './filter'
import {getCheckedColumn, saveCheckedColumn} from '@/utils/db' import { getCheckedColumn, saveCheckedColumn } from '@/utils/db'
// //
const fixedDefaultFormColumn = ['serialNumber'] const fixedDefaultFormColumn = ['serialNumber']
const fixedDefaultLabelFormColumn = {serialNumber: '提交序号'} const fixedDefaultLabelFormColumn = { serialNumber: '提交序号' }
// //
const fixedDefaultFormTailColumn = ['submitAddress', 'createdTime'] const fixedDefaultFormTailColumn = ['submitAddress', 'createdTime']
const fixedDefaultLabelFormTailColumn = { submitAddress: '提交地址', createdTime: '提交时间'} const fixedDefaultLabelFormTailColumn = { submitAddress: '提交地址', createdTime: '提交时间' }
export default { export default {
name: 'ProjectStatisticsList', name: 'ProjectStatisticsList',
components: { components: {
ResultItem, ResultItem,
DataFilter DataFilter
},
data () {
return {
projectKey: null,
customFilterDialogVisible: false,
customColumnDialogVisible: false,
checkedFilterColumns: [],
//
fixedCustomColumns: fixedDefaultFormColumn,
fixedFormTailColumns: fixedDefaultFormTailColumn,
//
checkedFixedCustomColumns: fixedDefaultFormColumn,
fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn,
checkedFixedTailCustomColumns: fixedDefaultFormTailColumn,
fixedDefaultLabelFormTailColumn: fixedDefaultLabelFormTailColumn,
//
checkOtherCustomColumns: [],
otherCustomColumns: [],
projectResultList: [],
projectItemList: [],
projectData: null,
projectItemColumns: {},
total: 0,
detailDrawer: false,
activeResultRow: null,
//
queryConditions: {
current: 1,
size: 10,
projectKey: '',
beginDateTime: '',
endDateTime: '',
extParams: null,
extComparisons: null
}
}
},
mounted () {
this.projectKey = this.$route.query.key
this.queryConditions.projectKey = this.projectKey
this.queryProjectResult()
this.queryProjectItems()
this.queryProject()
}, methods: {
renderHeader () {
return (
<i class="el-icon-setting" style="color:currentColor"
onClick={() => this.customColumnDialogVisible = true}></i>
)
}, },
data() { openDetailDrawerHandle (row) {
return { this.activeResultRow = row
projectKey: null, this.detailDrawer = true
customFilterDialogVisible: false, },
customColumnDialogVisible: false, queryProject () {
checkedFilterColumns: [], this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
// this.projectData = res.data
fixedCustomColumns: fixedDefaultFormColumn, })
fixedFormTailColumns: fixedDefaultFormTailColumn,
//
checkedFixedCustomColumns: fixedDefaultFormColumn,
fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn,
checkedFixedTailCustomColumns: fixedDefaultFormTailColumn,
fixedDefaultLabelFormTailColumn: fixedDefaultLabelFormTailColumn,
//
checkOtherCustomColumns: [],
otherCustomColumns: [],
projectResultList: [],
projectItemList: [],
projectData: null,
projectItemColumns: {},
total: 0,
detailDrawer: false,
activeResultRow: null,
//
queryConditions: {
current: 1,
size: 10,
projectKey: '',
beginDateTime: '',
endDateTime: '',
extParams: null,
extComparisons: null
}
}
}, },
mounted() { conditionFilterHandle () {
this.projectKey = this.$route.query.key this.$refs.dataFilter.showDialogHandle()
this.queryConditions.projectKey = this.projectKey },
this.queryProjectResult() dataFilterHandle (params, comparisons) {
this.queryProjectItems() this.queryConditions.extParams = params
this.queryProject() this.queryConditions.extComparisons = comparisons
}, methods: { this.queryProjectResult()
renderHeader() { },
return ( queryProjectResult () {
<i class="el-icon-setting" style="color:currentColor" this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/page`, { params: this.queryConditions }).then(res => {
onClick={() => this.customColumnDialogVisible = true}></i> let { records, total, size } = res.data
) this.projectResultList = records
}, this.total = total
openDetailDrawerHandle(row) { this.queryConditions.size = size
this.activeResultRow = row })
this.detailDrawer = true },
}, saveStatisticsCheckedColumns () {
queryProject() { this.customColumnDialogVisible = false
this.$api.get(`/user/project/${this.projectKey}`).then(res => { this.fixedCustomColumns = this.checkedFixedCustomColumns
this.projectData = res.data this.otherCustomColumns = this.checkOtherCustomColumns
}) this.fixedFormTailColumns = this.checkedFixedTailCustomColumns
}, saveCheckedColumn(this.projectKey, {
conditionFilterHandle() { fixedCustomColumns: this.fixedCustomColumns,
this.$refs.dataFilter.showDialogHandle() otherCustomColumns: this.otherCustomColumns,
}, fixedCustomTailColumns: this.fixedFormTailColumns
dataFilterHandle(params, comparisons) { })
this.queryConditions.extParams = params },
this.queryConditions.extComparisons = comparisons getDbCheckedColumns () {
this.queryProjectResult() let checkedColumn = getCheckedColumn(this.projectKey)
}, if (!checkedColumn) {
queryProjectResult() { return
this.$api.get('/user/project/result/page', {params: this.queryConditions}).then(res => { }
let {records, total, size} = res.data let { fixedCustomColumns, otherCustomColumns, fixedCustomTailColumns } = checkedColumn
this.projectResultList = records if (fixedCustomColumns) {
this.total = total this.fixedCustomColumns = fixedCustomColumns
this.queryConditions.size = size this.checkedFixedCustomColumns = fixedCustomColumns
}) }
}, if (otherCustomColumns) {
saveStatisticsCheckedColumns() { this.otherCustomColumns = otherCustomColumns
this.customColumnDialogVisible = false this.checkOtherCustomColumns = otherCustomColumns
this.fixedCustomColumns = this.checkedFixedCustomColumns }
this.otherCustomColumns = this.checkOtherCustomColumns if (fixedCustomTailColumns) {
this.fixedFormTailColumns = this.checkedFixedTailCustomColumns this.fixedCustomTailColumns = fixedCustomTailColumns
saveCheckedColumn(this.projectKey, { this.checkedFixedTailCustomColumns = fixedCustomTailColumns
fixedCustomColumns: this.fixedCustomColumns, }
otherCustomColumns: this.otherCustomColumns, },
fixedCustomTailColumns: this.fixedFormTailColumns downloadProjectResultFile () {
}) if (!this.total) {
}, this.$message.error('无附件,无法导出')
getDbCheckedColumns() { return
let checkedColumn = getCheckedColumn(this.projectKey) }
if (!checkedColumn) { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/download/file`, {
return params: this.queryConditions
} }).then(res => {
let {fixedCustomColumns, otherCustomColumns, fixedCustomTailColumns} = checkedColumn this.$process({
if (fixedCustomColumns) { message: '附件导出中',
this.fixedCustomColumns = fixedCustomColumns key: res.data
this.checkedFixedCustomColumns = fixedCustomColumns })
} })
if (otherCustomColumns) { },
this.otherCustomColumns = otherCustomColumns exportProjectResult () {
this.checkOtherCustomColumns = otherCustomColumns if (!this.total) {
} this.$message.error('无表单有效反馈结果,无法导出')
if (fixedCustomTailColumns) { return
this.fixedCustomTailColumns = fixedCustomTailColumns }
this.checkedFixedTailCustomColumns = fixedCustomTailColumns this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}user/project/result/export`, {
} params: this.queryConditions,
}, responseType: 'blob'
downloadProjectResultFile() { }).then(res => {
if (!this.total) { let blob = res
this.$message.error('无附件,无法导出') let downloadElement = document.createElement('a')
return let href = window.URL.createObjectURL(blob) //
} downloadElement.href = href
this.$api.get('/user/project/result/download/file', { downloadElement.download = this.projectData.name + this.$dayjs().format('YYYYMMDDHHMM') + '.xls' //
params: this.queryConditions document.body.appendChild(downloadElement)
}).then(res => { downloadElement.click() //
this.$process({ document.body.removeChild(downloadElement) //
message: '附件导出中', window.URL.revokeObjectURL(href) // blob
key: res.data })
}) },
}) queryProjectItems () {
}, this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/list`, { params: { key: this.projectKey, displayType: false } }).then(res => {
exportProjectResult() { if (res.data) {
if (!this.total) { res.data.map(item => {
this.$message.error('无表单有效反馈结果,无法导出') _.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
return })
}
this.$api.get('user/project/result/export', {
params: this.queryConditions,
responseType: 'blob'
}).then(res => {
let blob = res
let downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob) //
downloadElement.href = href
downloadElement.download = this.projectData.name + this.$dayjs().format('YYYYMMDDHHMM') + '.xls' //
document.body.appendChild(downloadElement)
downloadElement.click() //
document.body.removeChild(downloadElement) //
window.URL.revokeObjectURL(href) // blob
})
},
queryProjectItems() {
this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: false}}).then(res => {
if (res.data) {
res.data.map(item => {
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
})
}
this.projectItemList = res.data
this.getDbCheckedColumns()
})
} }
this.projectItemList = res.data
this.getDbCheckedColumns()
})
} }
}
} }
</script> </script>
@ -380,5 +385,4 @@ export default {
::v-deep .el-drawer__container ::-webkit-scrollbar { ::v-deep .el-drawer__container ::-webkit-scrollbar {
display: none; display: none;
} }
</style> </style>

310
src/views/form/statistics/public.vue

@ -1,40 +1,36 @@
<template> <template>
<el-container> <el-container>
<el-header class="el-page-header"> <el-header class="el-page-header">
<h5 v-if="projectData">{{ projectData.name }}</h5> <h5 v-if="projectData">{{ projectData.name }}</h5>
<el-button type="primary" @click="openFormHandle">访问表单</el-button> <el-button type="primary"
</el-header> @click="openFormHandle">访问表单</el-button>
<el-main> </el-header>
<el-table <el-main>
:data="projectResultList" <el-table :data="projectResultList"
class="public-result-table" class="public-result-table">
> <el-table-column type="expand">
<el-table-column type="expand"> <template slot-scope="props">
<template slot-scope="props"> <el-form class="public-table-expand"
<el-form class="public-table-expand" label-position="left"> label-position="left">
<el-form-item v-for="item in projectItemList" :key="item.id" :label="item.label"> <el-form-item v-for="item in projectItemList"
<result-item :field-item-id="item.formItemId" :project-item-data="item" :key="item.id"
:result-data="props.row" :label="item.label">
/> <result-item :field-item-id="item.formItemId"
</el-form-item> :project-item-data="item"
</el-form> :result-data="props.row" />
</template> </el-form-item>
</el-table-column> </el-form>
<el-table-column </template>
label="提交序号" </el-table-column>
prop="serialNumber" <el-table-column label="提交序号"
/> prop="serialNumber" />
<el-table-column <el-table-column label="提交地址"
label="提交地址" prop="submitAddress" />
prop="submitAddress" <el-table-column label="提交时间"
/> prop="createdTime" />
<el-table-column </el-table>
label="提交时间" </el-main>
prop="createdTime" </el-container>
/>
</el-table>
</el-main>
</el-container>
</template> </template>
<script> <script>
@ -42,144 +38,142 @@ import _ from 'lodash'
import ResultItem from './item' import ResultItem from './item'
export default { export default {
name: 'StatisticsPublic', name: 'StatisticsPublic',
components: { components: {
ResultItem ResultItem
}, },
metaInfo: { metaInfo: {
title: '反馈结果', title: '反馈结果',
meta: [ meta: [
{ {
name: 'viewport', name: 'viewport',
content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes'
} }
] ]
},
data () {
return {
projectResultList: [],
projectItemList: [],
projectData: null,
projectItemColumns: {},
//
queryConditions: {
current: 1,
size: 10,
projectKey: '',
beginDateTime: '',
endDateTime: ''
},
projectKey: null,
tableData: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}]
}
},
created () {
this.projectKey = this.$route.query.projectKey
this.queryConditions.projectKey = this.projectKey
this.queryProjectResult()
this.queryProjectItems()
this.queryProject()
},
methods: {
openFormHandle () {
this.$router.replace({ path: `/s/${this.projectKey}` })
}, },
data() { queryProject () {
return { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
projectResultList: [], this.projectData = res.data
projectItemList: [], })
projectData: null,
projectItemColumns: {},
//
queryConditions: {
current: 1,
size: 10,
projectKey: '',
beginDateTime: '',
endDateTime: ''
},
projectKey: null,
tableData: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}]
}
}, },
created() { queryProjectResult () {
this.projectKey = this.$route.query.projectKey this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/public/page`, { params: this.queryConditions }).then(res => {
this.queryConditions.projectKey = this.projectKey let { records, total, size } = res.data
this.queryProjectResult() this.projectResultList = records
this.queryProjectItems() this.total = total
this.queryProject() this.queryConditions.size = size
})
}, },
methods: { queryProjectItems () {
openFormHandle() { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/item/list`, { params: { key: this.projectKey, displayType: true } }).then(res => {
this.$router.replace({path: `/s/${this.projectKey}`}) if (res.data) {
}, res.data.map(item => {
queryProject() { _.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
this.$api.get(`/user/project/${this.projectKey}`).then(res => { })
this.projectData = res.data
})
},
queryProjectResult() {
this.$api.get('/user/project/result/public/page', {params: this.queryConditions}).then(res => {
let {records, total, size} = res.data
this.projectResultList = records
this.total = total
this.queryConditions.size = size
})
},
queryProjectItems() {
this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: true}}).then(res => {
if (res.data) {
res.data.map(item => {
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
})
}
this.projectItemList = res.data
})
} }
this.projectItemList = res.data
})
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-header { .el-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.el-button { .el-button {
height: 50%; height: 50%;
} }
} }
.el-main { .el-main {
background-color: rgba(247, 247, 247, 90); background-color: rgba(247, 247, 247, 90);
height: calc(100vh - 60px); height: calc(100vh - 60px);
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
.public-result-table { .public-result-table {
width: 100% !important; width: 100% !important;
} }
.el-header { .el-header {
justify-content: space-between !important; justify-content: space-between !important;
} }
} }
.public-result-table { .public-result-table {
width: 60%; width: 60%;
margin: 0 auto; margin: 0 auto;
} }
.public-table-expand { .public-table-expand {
font-size: 0; font-size: 0;
label { label {
width: 90px; width: 90px;
color: #99a9bf; color: #99a9bf;
} }
.el-form-item { .el-form-item {
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
width: 50%; width: 50%;
} }
} }
</style> </style>

Loading…
Cancel
Save