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. 346
      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)
localStorage.setItem('loginSource', 'epmet')
localStorage.setItem('customerId', to.query.customerId)
store.dispatch('user/getUserInfo', to.query.token)
store.dispatch('user/setTokens', to.query.token)
next()

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

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

287
src/views/form/index.vue

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

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

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

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

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

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

@ -1,55 +1,63 @@
<template>
<div class="dashboard-container">
<p class="tag-title">回收概览</p>
<el-divider />
<div class="project-index-view">
<div>
<div>
<p class="text-center">有效回收量</p>
<count-to :end-val="projectStats.completeCount"
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 class="dashboard-container">
<p class="tag-title">回收概览</p>
<el-divider />
<div class="project-index-view">
<div>
<div>
<p class="text-center">有效回收量</p>
<count-to :end-val="projectStats.completeCount"
style="font-size: 20px;" />
</div>
<div class="line-chat">
<line-chart :width="'95vw'" :chart-option="lineChartOptionData" />
<div>
<p>总浏览量</p>
<count-to :end-val="projectStats.viewCount"
style="font-size: 20px;" />
</div>
<p class="tag-title">表单提交地域分布图</p>
<div style="width: 90%">
<map-chart :width="'100vw'" :chart-option="mapChartOptionData" :height="'450px'" />
<div>
<p>回收率</p>
<count-to :end-val="projectStats.completeRate"
style="font-size: 20px;" />
%
</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>
<p>平均完成时间</p>
<span style="font-size: 20px;">
{{ projectStats.avgCompleteFormatStr }}
</span>
</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>
<script>
import PieChart from '@/components/echarts/PieChart'
@ -57,300 +65,300 @@ import LineChart from '@/components/echarts/LineChart'
import MapChart from '@/components/echarts/MapChart'
import CountTo from '@/components/CountTo'
import BarChart from '@/components/echarts/BarChart'
import {timeFormat} from '@/utils'
import { timeFormat } from '@/utils'
export default {
name: 'StatisticsChart',
components: {
CountTo,
MapChart,
PieChart,
BarChart,
LineChart
},
data() {
return {
projectListData: null,
projectStats: {
avgCompleteTime: 0,
avgCompleteFormatStr: 0,
viewCount: 0,
completeCount: 0,
completeRate: 0
},
activeProjectKey: null,
//
lineChartOptionData: {
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false
},
data: []
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black',
borderWidth: '1',
borderColor: 'rgb(156,209,255)',
textStyle: {
color: 'black'
}
},
yAxis: {
type: 'value',
minInterval: 1
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
series: [{
data: [],
name: '回收数',
stack: '总量',
type: 'line',
areaStyle: {}
}]
},
mapChartOptionData: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black',
borderWidth: '1',
borderColor: 'rgb(156,209,255)',
textStyle: {
color: 'black'
}
},
visualMap: {
type: 'piecewise',
show: false,
pieces: [
{min: 1500},
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 1, max: 300}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '提交数',
type: 'map',
mapType: 'china',
zoom: 1.4,
roam: false,
label: {
show: false,
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]
}
]
name: 'StatisticsChart',
components: {
CountTo,
MapChart,
PieChart,
BarChart,
LineChart
},
data () {
return {
projectListData: null,
projectStats: {
avgCompleteTime: 0,
avgCompleteFormatStr: 0,
viewCount: 0,
completeCount: 0,
completeRate: 0
},
activeProjectKey: null,
//
lineChartOptionData: {
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false
},
data: []
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black',
borderWidth: '1',
borderColor: 'rgb(156,209,255)',
textStyle: {
color: 'black'
}
},
yAxis: {
type: 'value',
minInterval: 1
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
series: [{
data: [],
name: '回收数',
stack: '总量',
type: 'line',
areaStyle: {}
}]
},
mapChartOptionData: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black',
borderWidth: '1',
borderColor: 'rgb(156,209,255)',
textStyle: {
color: 'black'
}
},
visualMap: {
type: 'piecewise',
show: false,
pieces: [
{ min: 1500 },
{ min: 900, max: 1500 },
{ min: 310, max: 1000 },
{ min: 1, max: 300 }
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '提交数',
type: 'map',
mapType: 'china',
zoom: 1.4,
roam: false,
label: {
show: false,
color: 'rgb(0,0,0)'
},
pieChartOptionData: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black',
borderWidth: '1',
borderColor: 'rgb(156,209,255)',
textStyle: {
color: 'black'
}
},
series: [
{
name: '设备类型',
type: 'pie',
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()
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'
}
},
getProjectStats() {
this.$api.get('/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
}
})
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
getProjectSituation() {
this.$api.get('/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: {}
}]
})
xAxis: {
type: 'value',
interval: 1,
boundaryGap: [0, 0.01]
},
//
getProjectSubmitPosition() {
this.$api.get('/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]}
})
}
]
})
yAxis: {
type: 'category',
data: [0]
},
getProjectSubmitSource() {
this.$api.get('/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
})
}
]
}
})
series: [
{
barWidth: 30,
name: '数量',
type: 'bar',
data: [0]
}
]
},
pieChartOptionData: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.8)', // rgba
color: 'black',
borderWidth: '1',
borderColor: 'rgb(156,209,255)',
textStyle: {
color: 'black'
}
},
getProjectSubmitDevice() {
this.$api.get('/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 : '其他'}
})
}
series: [
{
name: '设备类型',
type: 'pie',
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>
<style lang="scss" scoped>
.dashboard-container {
margin: 0;
padding: 0;
overflow-x: hidden!important;
margin: 0;
padding: 0;
overflow-x: hidden !important;
}
.tag-title {
font-size: 16px;
line-height: 25px;
margin-left: 20px;
font-size: 16px;
line-height: 25px;
margin-left: 20px;
}
.project-index-view {
& > div {
display: flex;
width: 80%;
text-align: center;
margin: 0 auto;
justify-content: space-between;
}
& > div {
display: flex;
width: 80%;
text-align: center;
margin: 0 auto;
justify-content: space-between;
}
}
</style>

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

@ -1,326 +1,331 @@
<template>
<div class="statistics-container">
<div class="filter-table-view">
<el-form ref="filterForm" :inline="true">
<el-form-item label="提交时间" prop="endDateTime">
<el-date-picker
v-model="queryConditions.beginDateTime"
placeholder="开始时间"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
/>
<span> </span>
<el-date-picker
v-model="queryConditions.endDateTime"
:default-time="'23:59:59'"
placeholder="结束时间"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryProjectResult">查询</el-button>
<el-button type="primary" @click="conditionFilterHandle">条件</el-button>
<el-button type="success" @click="exportProjectResult">导出</el-button>
<el-button type="success" @click="downloadProjectResultFile">下载附件</el-button>
</el-form-item>
</el-form>
</div>
<div class="result-table-view">
<el-table
:data="projectResultList"
<div class="statistics-container">
<div class="filter-table-view">
<el-form ref="filterForm"
:inline="true">
<el-form-item label="提交时间"
prop="endDateTime">
<el-date-picker v-model="queryConditions.beginDateTime"
placeholder="开始时间"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" />
<span> </span>
<el-date-picker v-model="queryConditions.endDateTime"
:default-time="'23:59:59'"
placeholder="结束时间"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" />
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="queryProjectResult">查询</el-button>
<el-button type="primary"
@click="conditionFilterHandle">条件</el-button>
<el-button type="success"
@click="exportProjectResult">导出</el-button>
<el-button type="success"
@click="downloadProjectResultFile">下载附件</el-button>
</el-form-item>
</el-form>
</div>
<div class="result-table-view">
<el-table :data="projectResultList"
header-cell-class-name="data-table-header"
stripe
@row-dblclick="(row, column, event)=>{
this.openDetailDrawerHandle(row)
}"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column
v-for="col in fixedCustomColumns" :key="`t${col}`"
:label="fixedDefaultLabelFormColumn[col]"
>
<template slot-scope="scope">
{{ scope.row[col] }}
</template>
</el-table-column>
}">
<el-table-column type="selection"
width="55" />
<el-table-column v-for="col in fixedCustomColumns"
:key="`t${col}`"
:label="fixedDefaultLabelFormColumn[col]">
<template slot-scope="scope">
{{ scope.row[col] }}
</template>
</el-table-column>
<el-table-column
v-for="col in otherCustomColumns"
:key="col" :label="projectItemColumns[col]"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row['processData'][col] }}
</template>
</el-table-column>
<el-table-column v-for="col in otherCustomColumns"
:key="col"
:label="projectItemColumns[col]"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row['processData'][col] }}
</template>
</el-table-column>
<el-table-column
v-for="col in fixedFormTailColumns" :key="`t${col}`"
:label="fixedDefaultLabelFormTailColumn[col]"
>
<template slot-scope="scope">
{{ scope.row[col] }}
</template>
</el-table-column>
<el-table-column v-for="col in fixedFormTailColumns"
:key="`t${col}`"
:label="fixedDefaultLabelFormTailColumn[col]">
<template slot-scope="scope">
{{ scope.row[col] }}
</template>
</el-table-column>
<el-table-column
:render-header="renderHeader"
fixed="right"
width="50"
>
<template slot-scope="scope">
<el-button size="small" type="text" @click="openDetailDrawerHandle(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer
v-if="activeResultRow"
:visible.sync="detailDrawer"
:with-header="false"
>
<el-scrollbar style="height: 100%;">
<el-card class="detail-container">
<div slot="header" class="clearfix">
<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"
/>
<el-table-column :render-header="renderHeader"
fixed="right"
width="50">
<template slot-scope="scope">
<el-button size="small"
type="text"
@click="openDetailDrawerHandle(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer v-if="activeResultRow"
:visible.sync="detailDrawer"
:with-header="false">
<el-scrollbar style="height: 100%;">
<el-card class="detail-container">
<div slot="header"
class="clearfix">
<span>提交详情</span>
</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>
<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 />
<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>
</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 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>
<script>
import _ from 'lodash'
import ResultItem from './item'
import DataFilter from './filter'
import {getCheckedColumn, saveCheckedColumn} from '@/utils/db'
import { getCheckedColumn, saveCheckedColumn } from '@/utils/db'
//
const fixedDefaultFormColumn = ['serialNumber']
const fixedDefaultLabelFormColumn = {serialNumber: '提交序号'}
const fixedDefaultLabelFormColumn = { serialNumber: '提交序号' }
//
const fixedDefaultFormTailColumn = ['submitAddress', 'createdTime']
const fixedDefaultLabelFormTailColumn = { submitAddress: '提交地址', createdTime: '提交时间'}
const fixedDefaultLabelFormTailColumn = { submitAddress: '提交地址', createdTime: '提交时间' }
export default {
name: 'ProjectStatisticsList',
components: {
ResultItem,
DataFilter
name: 'ProjectStatisticsList',
components: {
ResultItem,
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() {
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
}
}
openDetailDrawerHandle (row) {
this.activeResultRow = row
this.detailDrawer = true
},
queryProject () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
this.projectData = res.data
})
},
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>
)
},
openDetailDrawerHandle(row) {
this.activeResultRow = row
this.detailDrawer = true
},
queryProject() {
this.$api.get(`/user/project/${this.projectKey}`).then(res => {
this.projectData = res.data
})
},
conditionFilterHandle() {
this.$refs.dataFilter.showDialogHandle()
},
dataFilterHandle(params, comparisons) {
this.queryConditions.extParams = params
this.queryConditions.extComparisons = comparisons
this.queryProjectResult()
},
queryProjectResult() {
this.$api.get('/user/project/result/page', {params: this.queryConditions}).then(res => {
let {records, total, size} = res.data
this.projectResultList = records
this.total = total
this.queryConditions.size = size
})
},
saveStatisticsCheckedColumns() {
this.customColumnDialogVisible = false
this.fixedCustomColumns = this.checkedFixedCustomColumns
this.otherCustomColumns = this.checkOtherCustomColumns
this.fixedFormTailColumns = this.checkedFixedTailCustomColumns
saveCheckedColumn(this.projectKey, {
fixedCustomColumns: this.fixedCustomColumns,
otherCustomColumns: this.otherCustomColumns,
fixedCustomTailColumns: this.fixedFormTailColumns
})
},
getDbCheckedColumns() {
let checkedColumn = getCheckedColumn(this.projectKey)
if (!checkedColumn) {
return
}
let {fixedCustomColumns, otherCustomColumns, fixedCustomTailColumns} = checkedColumn
if (fixedCustomColumns) {
this.fixedCustomColumns = fixedCustomColumns
this.checkedFixedCustomColumns = fixedCustomColumns
}
if (otherCustomColumns) {
this.otherCustomColumns = otherCustomColumns
this.checkOtherCustomColumns = otherCustomColumns
}
if (fixedCustomTailColumns) {
this.fixedCustomTailColumns = fixedCustomTailColumns
this.checkedFixedTailCustomColumns = fixedCustomTailColumns
}
},
downloadProjectResultFile() {
if (!this.total) {
this.$message.error('无附件,无法导出')
return
}
this.$api.get('/user/project/result/download/file', {
params: this.queryConditions
}).then(res => {
this.$process({
message: '附件导出中',
key: res.data
})
})
},
exportProjectResult() {
if (!this.total) {
this.$message.error('无表单有效反馈结果,无法导出')
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()
})
conditionFilterHandle () {
this.$refs.dataFilter.showDialogHandle()
},
dataFilterHandle (params, comparisons) {
this.queryConditions.extParams = params
this.queryConditions.extComparisons = comparisons
this.queryProjectResult()
},
queryProjectResult () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/page`, { params: this.queryConditions }).then(res => {
let { records, total, size } = res.data
this.projectResultList = records
this.total = total
this.queryConditions.size = size
})
},
saveStatisticsCheckedColumns () {
this.customColumnDialogVisible = false
this.fixedCustomColumns = this.checkedFixedCustomColumns
this.otherCustomColumns = this.checkOtherCustomColumns
this.fixedFormTailColumns = this.checkedFixedTailCustomColumns
saveCheckedColumn(this.projectKey, {
fixedCustomColumns: this.fixedCustomColumns,
otherCustomColumns: this.otherCustomColumns,
fixedCustomTailColumns: this.fixedFormTailColumns
})
},
getDbCheckedColumns () {
let checkedColumn = getCheckedColumn(this.projectKey)
if (!checkedColumn) {
return
}
let { fixedCustomColumns, otherCustomColumns, fixedCustomTailColumns } = checkedColumn
if (fixedCustomColumns) {
this.fixedCustomColumns = fixedCustomColumns
this.checkedFixedCustomColumns = fixedCustomColumns
}
if (otherCustomColumns) {
this.otherCustomColumns = otherCustomColumns
this.checkOtherCustomColumns = otherCustomColumns
}
if (fixedCustomTailColumns) {
this.fixedCustomTailColumns = fixedCustomTailColumns
this.checkedFixedTailCustomColumns = fixedCustomTailColumns
}
},
downloadProjectResultFile () {
if (!this.total) {
this.$message.error('无附件,无法导出')
return
}
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/download/file`, {
params: this.queryConditions
}).then(res => {
this.$process({
message: '附件导出中',
key: res.data
})
})
},
exportProjectResult () {
if (!this.total) {
this.$message.error('无表单有效反馈结果,无法导出')
return
}
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}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(`${process.env.VUE_APP_API_ROOT_TDUCK}/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()
})
}
}
}
</script>
@ -380,5 +385,4 @@ export default {
::v-deep .el-drawer__container ::-webkit-scrollbar {
display: none;
}
</style>

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

@ -1,40 +1,36 @@
<template>
<el-container>
<el-header class="el-page-header">
<h5 v-if="projectData">{{ projectData.name }}</h5>
<el-button type="primary" @click="openFormHandle">访问表单</el-button>
</el-header>
<el-main>
<el-table
:data="projectResultList"
class="public-result-table"
>
<el-table-column type="expand">
<template slot-scope="props">
<el-form class="public-table-expand" label-position="left">
<el-form-item v-for="item in projectItemList" :key="item.id" :label="item.label">
<result-item :field-item-id="item.formItemId" :project-item-data="item"
:result-data="props.row"
/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="提交序号"
prop="serialNumber"
/>
<el-table-column
label="提交地址"
prop="submitAddress"
/>
<el-table-column
label="提交时间"
prop="createdTime"
/>
</el-table>
</el-main>
</el-container>
<el-container>
<el-header class="el-page-header">
<h5 v-if="projectData">{{ projectData.name }}</h5>
<el-button type="primary"
@click="openFormHandle">访问表单</el-button>
</el-header>
<el-main>
<el-table :data="projectResultList"
class="public-result-table">
<el-table-column type="expand">
<template slot-scope="props">
<el-form class="public-table-expand"
label-position="left">
<el-form-item v-for="item in projectItemList"
:key="item.id"
:label="item.label">
<result-item :field-item-id="item.formItemId"
:project-item-data="item"
:result-data="props.row" />
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="提交序号"
prop="serialNumber" />
<el-table-column label="提交地址"
prop="submitAddress" />
<el-table-column label="提交时间"
prop="createdTime" />
</el-table>
</el-main>
</el-container>
</template>
<script>
@ -42,144 +38,142 @@ import _ from 'lodash'
import ResultItem from './item'
export default {
name: 'StatisticsPublic',
components: {
ResultItem
},
metaInfo: {
title: '反馈结果',
meta: [
{
name: 'viewport',
content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes'
}
]
name: 'StatisticsPublic',
components: {
ResultItem
},
metaInfo: {
title: '反馈结果',
meta: [
{
name: 'viewport',
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() {
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'
}]
}
queryProject () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
this.projectData = res.data
})
},
created() {
this.projectKey = this.$route.query.projectKey
this.queryConditions.projectKey = this.projectKey
this.queryProjectResult()
this.queryProjectItems()
this.queryProject()
queryProjectResult () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/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
})
},
methods: {
openFormHandle() {
this.$router.replace({path: `/s/${this.projectKey}`})
},
queryProject() {
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
})
queryProjectItems () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/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
})
}
}
}
</script>
<style lang="scss" scoped>
.el-header {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.el-button {
height: 50%;
}
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.el-button {
height: 50%;
}
}
.el-main {
background-color: rgba(247, 247, 247, 90);
height: calc(100vh - 60px);
background-color: rgba(247, 247, 247, 90);
height: calc(100vh - 60px);
}
@media screen and (max-width: 750px) {
.public-result-table {
width: 100% !important;
}
.el-header {
justify-content: space-between !important;
}
.public-result-table {
width: 100% !important;
}
.el-header {
justify-content: space-between !important;
}
}
.public-result-table {
width: 60%;
margin: 0 auto;
width: 60%;
margin: 0 auto;
}
.public-table-expand {
font-size: 0;
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
font-size: 0;
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
}
</style>

Loading…
Cancel
Save