elink-star
/
tduck-front
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

发布范围

old
jiangyy 4 years ago
parent
b1c4210b99
commit
0e046a1b48
8 changed files with 1236 additions and 1144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/router/index.js
  2. 6
      src/views/form/editor/RightPanel.vue
  3. 69
      src/views/form/index.vue
  4. 178
      src/views/form/publish/index.vue
  5. 38
      src/views/form/statistics/analysis.vue
  6. 66
      src/views/form/statistics/chart.vue
  7. 172
      src/views/form/statistics/list.vue
  8. 64
      src/views/form/statistics/public.vue

1
src/router/index.js
View File

@ -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
View File

@ -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) {

69
src/views/form/index.vue
View File

@ -17,25 +17,23 @@
<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>
<div class="right-content-container"> <div class="right-content-container">
<router-view /> <router-view />
@ -43,11 +41,9 @@
</div> </div>
<el-dialog :visible.sync="previewDialogVisible" <el-dialog :visible.sync="previewDialogVisible"
destroy-on-close destroy-on-close
fullscreen fullscreen>
>
<pre-view :key="previewKey" <pre-view :key="previewKey"
:preview-qrcode="true" :preview-qrcode="true" />
/>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -59,9 +55,9 @@ 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: '',
@ -117,18 +113,51 @@ export default {
title: '返回', title: '返回',
icon: 'el-icon-edit' icon: 'el-icon-edit'
} }
],
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() { async created () {
this.projectKey = this.$route.query.key this.projectKey = this.$route.query.key
this.defaultActiveMenu = this.$route.path this.defaultActiveMenu = this.$route.path
this.isCollapse = this.$store.state.form.isCollapse this.isCollapse = this.$store.state.form.isCollapse
this.getProjectStatus()
}, },
methods: { methods: {
menuSelectHandle(route, key) { 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
}
})
},
menuSelectHandle (route, key) {
if (key === 'preview') { if (key === 'preview') {
this.previewDialogVisible = true this.previewDialogVisible = true
@ -139,16 +168,16 @@ export default {
} else { this.$router.replace({ path: route, query: { key: this.projectKey } }) } } else { this.$router.replace({ path: route, query: { key: this.projectKey } }) }
}, },
openPreviewHandle() { openPreviewHandle () {
this.previewKey = +new Date() this.previewKey = +new Date()
this.previewDialogVisible = true this.previewDialogVisible = true
}, },
saveProjectAsTemplateHandle() { saveProjectAsTemplateHandle () {
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/template/save`, { key: this.projectKey }).then(() => { this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/template/save`, { key: this.projectKey }).then(() => {
this.msgSuccess('保存成功') this.msgSuccess('保存成功')
}) })
}, },
collapseHandle() { collapseHandle () {
let isCollapse = !this.isCollapse let isCollapse = !this.isCollapse
this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => { this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => {
this.isCollapse = isCollapse this.isCollapse = isCollapse

178
src/views/form/publish/index.vue
View File

@ -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>

38
src/views/form/statistics/analysis.vue
View File

@ -1,33 +1,33 @@
<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"
:key="index">
<div class="content"> <div class="content">
<div class="title"> <div class="title">
<span style="font-size: 16px">Q：{{ item.label }}（{{ item.type }}）</span> <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>
</div> </div>
<line-chart <line-chart class="chart"
class="chart"
:chart-option="getCharData(item)" :chart-option="getCharData(item)"
:width="'90vw'" :width="'90vw'" />
/>
</div> </div>
<el-divider /> <el-divider />
</div> </div>
</div> </div>
<data-empty v-else style="padding: 20px" desc="只有单选、多选、下拉框组件可以生成图表" /> <data-empty v-else
style="padding: 20px"
desc="只有单选、多选、下拉框组件可以生成图表" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
components: { components: {
LineChart LineChart
}, },
data() { data () {
return { return {
barChartOptionData: { barChartOptionData: {
tooltip: { tooltip: {
@ -91,7 +91,7 @@ export default {
/* { /* {
value: "ring", value: "ring",
label: "环形图", label: "环形图",
}, */ }, */
{ {
value: 'bar', value: 'bar',
label: '柱状图' label: '柱状图'
@ -103,20 +103,20 @@ export default {
] ]
} }
}, },
mounted() { mounted () {
this.getData() this.getData()
}, },
methods: { methods: {
getData() { getData () {
this.$api this.$api
.get('/user/project/report/analysis', { .get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis`, {
params: { projectKey: this.$route.query.key } params: { projectKey: this.$route.query.key }
}) })
.then(res => { .then(res => {
this.list = res.data this.list = res.data
}) })
}, },
getCharData(data) { getCharData (data) {
const config = { const config = {
tooltip: { tooltip: {
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
@ -174,10 +174,10 @@ export default {
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
}else{ }else{
delete config.series[0].radius delete config.series[0].radius
delete config.series[0].label delete config.series[0].label
} */ } */
config.series[0].data = [] config.series[0].data = []
Object.keys(data.map).forEach(key => { Object.keys(data.map).forEach(key => {
config.series[0].data.push({ name: key, value: data.map[key] }) config.series[0].data.push({ name: key, value: data.map[key] })

66
src/views/form/statistics/chart.vue
View File

@ -7,16 +7,17 @@
<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>
<div> <div>
<p>总浏览量</p> <p>总浏览量</p>
<count-to :end-val="projectStats.viewCount" style="font-size: 20px;" /> <count-to :end-val="projectStats.viewCount"
style="font-size: 20px;" />
</div> </div>
<div> <div>
<p>回收率</p> <p>回收率</p>
<count-to :end-val="projectStats.completeRate" style="font-size: 20px;" /> <count-to :end-val="projectStats.completeRate"
style="font-size: 20px;" />
% %
</div> </div>
<div> <div>
@ -28,24 +29,31 @@
</div> </div>
</div> </div>
<div class="line-chat"> <div class="line-chat">
<line-chart :width="'95vw'" :chart-option="lineChartOptionData" /> <line-chart :width="'95vw'"
:chart-option="lineChartOptionData" />
</div> </div>
<p class="tag-title">表单提交地域分布图</p> <p class="tag-title">表单提交地域分布图</p>
<div style="width: 90%"> <div style="width: 90%">
<map-chart :width="'100vw'" :chart-option="mapChartOptionData" :height="'450px'" /> <map-chart :width="'100vw'"
:chart-option="mapChartOptionData"
:height="'450px'" />
</div> </div>
<el-divider /> <el-divider />
<div style="display: flex; flex-direction: row; justify-content: space-around;"> <div style="display: flex; flex-direction: row; justify-content: space-around;">
<div style="width: 50%;"> <div style="width: 50%;">
<p class="tag-title">常用设备</p> <p class="tag-title">常用设备</p>
<div> <div>
<pie-chart :width="'48vw'" :chart-option="pieChartOptionData" :height="'250px'" /> <pie-chart :width="'48vw'"
:chart-option="pieChartOptionData"
:height="'250px'" />
</div> </div>
</div> </div>
<div style="width: 50%;"> <div style="width: 50%;">
<p class="tag-title">来源渠道</p> <p class="tag-title">来源渠道</p>
<div> <div>
<bar-chart :width="'48vw'" :chart-option="barChartOptionData" :height="'250px'" /> <bar-chart :width="'48vw'"
:chart-option="barChartOptionData"
:height="'250px'" />
</div> </div>
</div> </div>
</div> </div>
@ -57,7 +65,7 @@ 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',
@ -68,7 +76,7 @@ export default {
BarChart, BarChart,
LineChart LineChart
}, },
data() { data () {
return { return {
projectListData: null, projectListData: null,
projectStats: { projectStats: {
@ -132,10 +140,10 @@ export default {
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']
}, },
@ -239,20 +247,20 @@ export default {
} }
} }
}, },
created() { created () {
this.activeProjectKey = this.$route.query.key this.activeProjectKey = this.$route.query.key
this.projectChangeHandle() this.projectChangeHandle()
}, methods: { }, methods: {
projectChangeHandle() { projectChangeHandle () {
this.getProjectStats() this.getProjectStats()
this.getProjectSituation() this.getProjectSituation()
this.getProjectSubmitPosition() this.getProjectSubmitPosition()
this.getProjectSubmitDevice() this.getProjectSubmitDevice()
this.getProjectSubmitSource() this.getProjectSubmitSource()
}, },
getProjectStats() { getProjectStats () {
this.$api.get('/user/project/report/stats', {params: {projectKey: this.activeProjectKey}}).then(res => { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/stats`, { params: { projectKey: this.activeProjectKey } }).then(res => {
this.projectStats = res.data this.projectStats = res.data
if (this.projectStats.completeCount) { if (this.projectStats.completeCount) {
let rate = this.projectStats.completeCount / this.projectStats.viewCount let rate = this.projectStats.completeCount / this.projectStats.viewCount
@ -264,8 +272,8 @@ export default {
} }
}) })
}, },
getProjectSituation() { getProjectSituation () {
this.$api.get('/user/project/report/situation', {params: {projectKey: this.activeProjectKey}}).then(res => { 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 => { this.lineChartOptionData.xAxis.data = res.data.map(item => {
return item.createdTime return item.createdTime
}) })
@ -281,8 +289,8 @@ export default {
}) })
}, },
// 项目提交地址 // 项目提交地址
getProjectSubmitPosition() { getProjectSubmitPosition () {
this.$api.get('/user/project/report/position', {params: {projectKey: this.activeProjectKey}}).then(res => { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/position`, { params: { projectKey: this.activeProjectKey } }).then(res => {
this.mapChartOptionData.series = [ this.mapChartOptionData.series = [
{ {
name: '提交数', name: '提交数',
@ -295,14 +303,14 @@ export default {
color: 'rgb(0,0,0)' color: 'rgb(0,0,0)'
}, },
data: Object.keys(res.data).map(key => { data: Object.keys(res.data).map(key => {
return {name: key.replace(/省(s?)|市(s?)|\//ig, ''), value: res.data[key]} return { name: key.replace(/省(s?)|市(s?)|\//ig, ''), value: res.data[key] }
}) })
} }
] ]
}) })
}, },
getProjectSubmitSource() { getProjectSubmitSource () {
this.$api.get('/user/project/report/source', {params: {projectKey: this.activeProjectKey}}).then(res => { 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) { if (res.data && res.data.length) {
this.barChartOptionData.yAxis.data = res.data.map(item => { this.barChartOptionData.yAxis.data = res.data.map(item => {
return item.browserName ? item.browserName : '其他' return item.browserName ? item.browserName : '其他'
@ -320,11 +328,11 @@ export default {
} }
}) })
}, },
getProjectSubmitDevice() { getProjectSubmitDevice () {
this.$api.get('/user/project/report/device', {params: {projectKey: this.activeProjectKey}}).then(res => { 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) { if (res.data && res.data.length) {
this.pieChartOptionData.series[0].data = res.data.map(item => { this.pieChartOptionData.series[0].data = res.data.map(item => {
return {value: item.count, name: item.osName ? item.osName : '其他'} return { value: item.count, name: item.osName ? item.osName : '其他' }
}) })
} }
}) })
@ -337,7 +345,7 @@ export default {
.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;

172
src/views/form/statistics/list.vue
View File

@ -1,98 +1,93 @@
<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">
<el-date-picker v-model="queryConditions.beginDateTime"
placeholder="开始时间" placeholder="开始时间"
type="datetime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" 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-form-item>
<el-button type="primary" @click="queryProjectResult">查询</el-button> <el-button type="primary"
<el-button type="primary" @click="conditionFilterHandle">条件</el-button> @click="queryProjectResult">查询</el-button>
<el-button type="success" @click="exportProjectResult">导出</el-button> <el-button type="primary"
<el-button type="success" @click="downloadProjectResultFile">下载附件</el-button> @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-item>
</el-form> </el-form>
</div> </div>
<div class="result-table-view"> <div class="result-table-view">
<el-table <el-table :data="projectResultList"
: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
v-for="col in fixedCustomColumns" :key="`t${col}`"
:label="fixedDefaultLabelFormColumn[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 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"> <template slot-scope="scope">
<el-button size="small" type="text" @click="openDetailDrawerHandle(scope.row)">查看</el-button> <el-button size="small"
type="text"
@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-scrollbar style="height: 100%;">
<el-card class="detail-container"> <el-card class="detail-container">
<div slot="header" class="clearfix"> <div slot="header"
class="clearfix">
<span>提交详情</span> <span>提交详情</span>
</div> </div>
<div> <div>
<div v-for="item in projectItemList" :key="item.id"> <div v-for="item in projectItemList"
:key="item.id">
<h4>{{ item.label }}</h4> <h4>{{ item.label }}</h4>
<result-item :field-item-id="item.formItemId" :project-item-data="item" <result-item :field-item-id="item.formItemId"
:result-data="activeResultRow" :project-item-data="item"
/> :result-data="activeResultRow" />
<el-divider /> <el-divider />
</div> </div>
</div> </div>
@ -100,19 +95,19 @@
</el-scrollbar> </el-scrollbar>
</el-drawer> </el-drawer>
<div style="display: flex; justify-content: center; margin-top: 10px;"> <div style="display: flex; justify-content: center; margin-top: 10px;">
<el-pagination <el-pagination v-if="total>10"
v-if="total>10"
:current-page.sync="queryConditions.current" :current-page.sync="queryConditions.current"
:page-size.sync="queryConditions.size" :page-size.sync="queryConditions.size"
:total="total" :total="total"
background background
layout="total, prev, pager, next" layout="total, prev, pager, next"
@current-change="queryProjectResult" @current-change="queryProjectResult" />
/>
</div> </div>
</div> </div>
<div class="custom-col-container"> <div class="custom-col-container">
<el-dialog :visible.sync="customColumnDialogVisible" center title="自定义显示列"> <el-dialog :visible.sync="customColumnDialogVisible"
center
title="自定义显示列">
<el-row> <el-row>
<el-col :span="3"> <el-col :span="3">
<span>显示列：</span> <span>显示列：</span>
@ -121,7 +116,9 @@
<el-divider /> <el-divider />
<el-checkbox-group v-model="checkedFixedCustomColumns"> <el-checkbox-group v-model="checkedFixedCustomColumns">
<el-row> <el-row>
<el-col v-for="(val, key) in fixedDefaultLabelFormColumn" :key="key" :span="4"> <el-col v-for="(val, key) in fixedDefaultLabelFormColumn"
:key="key"
:span="4">
<el-checkbox :label="key">{{ val }}</el-checkbox> <el-checkbox :label="key">{{ val }}</el-checkbox>
</el-col> </el-col>
</el-row> </el-row>
@ -129,7 +126,9 @@
<el-divider /> <el-divider />
<el-checkbox-group v-model="checkOtherCustomColumns"> <el-checkbox-group v-model="checkOtherCustomColumns">
<el-row> <el-row>
<el-col v-for="(val, key) in projectItemColumns" :key="key" :span="8"> <el-col v-for="(val, key) in projectItemColumns"
:key="key"
:span="8">
<el-checkbox :label="key">{{ val }}</el-checkbox> <el-checkbox :label="key">{{ val }}</el-checkbox>
</el-col> </el-col>
</el-row> </el-row>
@ -137,18 +136,24 @@
<el-divider /> <el-divider />
<el-checkbox-group v-model="checkedFixedTailCustomColumns"> <el-checkbox-group v-model="checkedFixedTailCustomColumns">
<el-row> <el-row>
<el-col v-for="(val, key) in fixedDefaultLabelFormTailColumn" :key="key" :span="4"> <el-col v-for="(val, key) in fixedDefaultLabelFormTailColumn"
:key="key"
:span="4">
<el-checkbox :label="key">{{ val }}</el-checkbox> <el-checkbox :label="key">{{ val }}</el-checkbox>
</el-col> </el-col>
</el-row> </el-row>
</el-checkbox-group> </el-checkbox-group>
<span slot="footer" class="dialog-footer"> <span slot="footer"
class="dialog-footer">
<el-button @click="customColumnDialogVisible = false">取 消</el-button> <el-button @click="customColumnDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button> <el-button type="primary"
@click="saveStatisticsCheckedColumns">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
<data-filter ref="dataFilter" :fields="projectItemList" @filter="dataFilterHandle" /> <data-filter ref="dataFilter"
:fields="projectItemList"
@filter="dataFilterHandle" />
</div> </div>
</template> </template>
@ -156,14 +161,14 @@
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',
@ -171,7 +176,7 @@ export default {
ResultItem, ResultItem,
DataFilter DataFilter
}, },
data() { data () {
return { return {
projectKey: null, projectKey: null,
customFilterDialogVisible: false, customFilterDialogVisible: false,
@ -207,45 +212,45 @@ export default {
} }
} }
}, },
mounted() { mounted () {
this.projectKey = this.$route.query.key this.projectKey = this.$route.query.key
this.queryConditions.projectKey = this.projectKey this.queryConditions.projectKey = this.projectKey
this.queryProjectResult() this.queryProjectResult()
this.queryProjectItems() this.queryProjectItems()
this.queryProject() this.queryProject()
}, methods: { }, methods: {
renderHeader() { renderHeader () {
return ( return (
<i class="el-icon-setting" style="color:currentColor" <i class="el-icon-setting" style="color:currentColor"
onClick={() => this.customColumnDialogVisible = true}></i> onClick={() => this.customColumnDialogVisible = true}></i>
) )
}, },
openDetailDrawerHandle(row) { openDetailDrawerHandle (row) {
this.activeResultRow = row this.activeResultRow = row
this.detailDrawer = true this.detailDrawer = true
}, },
queryProject() { queryProject () {
this.$api.get(`/user/project/${this.projectKey}`).then(res => { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
this.projectData = res.data this.projectData = res.data
}) })
}, },
conditionFilterHandle() { conditionFilterHandle () {
this.$refs.dataFilter.showDialogHandle() this.$refs.dataFilter.showDialogHandle()
}, },
dataFilterHandle(params, comparisons) { dataFilterHandle (params, comparisons) {
this.queryConditions.extParams = params this.queryConditions.extParams = params
this.queryConditions.extComparisons = comparisons this.queryConditions.extComparisons = comparisons
this.queryProjectResult() this.queryProjectResult()
}, },
queryProjectResult() { queryProjectResult () {
this.$api.get('/user/project/result/page', {params: this.queryConditions}).then(res => { 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 let { records, total, size } = res.data
this.projectResultList = records this.projectResultList = records
this.total = total this.total = total
this.queryConditions.size = size this.queryConditions.size = size
}) })
}, },
saveStatisticsCheckedColumns() { saveStatisticsCheckedColumns () {
this.customColumnDialogVisible = false this.customColumnDialogVisible = false
this.fixedCustomColumns = this.checkedFixedCustomColumns this.fixedCustomColumns = this.checkedFixedCustomColumns
this.otherCustomColumns = this.checkOtherCustomColumns this.otherCustomColumns = this.checkOtherCustomColumns
@ -256,12 +261,12 @@ export default {
fixedCustomTailColumns: this.fixedFormTailColumns fixedCustomTailColumns: this.fixedFormTailColumns
}) })
}, },
getDbCheckedColumns() { getDbCheckedColumns () {
let checkedColumn = getCheckedColumn(this.projectKey) let checkedColumn = getCheckedColumn(this.projectKey)
if (!checkedColumn) { if (!checkedColumn) {
return return
} }
let {fixedCustomColumns, otherCustomColumns, fixedCustomTailColumns} = checkedColumn let { fixedCustomColumns, otherCustomColumns, fixedCustomTailColumns } = checkedColumn
if (fixedCustomColumns) { if (fixedCustomColumns) {
this.fixedCustomColumns = fixedCustomColumns this.fixedCustomColumns = fixedCustomColumns
this.checkedFixedCustomColumns = fixedCustomColumns this.checkedFixedCustomColumns = fixedCustomColumns
@ -275,12 +280,12 @@ export default {
this.checkedFixedTailCustomColumns = fixedCustomTailColumns this.checkedFixedTailCustomColumns = fixedCustomTailColumns
} }
}, },
downloadProjectResultFile() { downloadProjectResultFile () {
if (!this.total) { if (!this.total) {
this.$message.error('无附件，无法导出') this.$message.error('无附件，无法导出')
return return
} }
this.$api.get('/user/project/result/download/file', { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/result/download/file`, {
params: this.queryConditions params: this.queryConditions
}).then(res => { }).then(res => {
this.$process({ this.$process({
@ -289,12 +294,12 @@ export default {
}) })
}) })
}, },
exportProjectResult() { exportProjectResult () {
if (!this.total) { if (!this.total) {
this.$message.error('无表单有效反馈结果，无法导出') this.$message.error('无表单有效反馈结果，无法导出')
return return
} }
this.$api.get('user/project/result/export', { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}user/project/result/export`, {
params: this.queryConditions, params: this.queryConditions,
responseType: 'blob' responseType: 'blob'
}).then(res => { }).then(res => {
@ -309,8 +314,8 @@ export default {
window.URL.revokeObjectURL(href) // 释放掉blob对象 window.URL.revokeObjectURL(href) // 释放掉blob对象
}) })
}, },
queryProjectItems() { queryProjectItems () {
this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: false}}).then(res => { 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) { if (res.data) {
res.data.map(item => { res.data.map(item => {
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label) _.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
@ -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>

64
src/views/form/statistics/public.vue
View File

@ -2,36 +2,32 @@
<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"
@click="openFormHandle">访问表单</el-button>
</el-header> </el-header>
<el-main> <el-main>
<el-table <el-table :data="projectResultList"
: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" label-position="left"> <el-form class="public-table-expand"
<el-form-item v-for="item in projectItemList" :key="item.id" :label="item.label"> label-position="left">
<result-item :field-item-id="item.formItemId" :project-item-data="item" <el-form-item v-for="item in projectItemList"
:result-data="props.row" :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-item>
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="提交序号"
label="提交序号" prop="serialNumber" />
prop="serialNumber" <el-table-column label="提交地址"
/> prop="submitAddress" />
<el-table-column <el-table-column label="提交时间"
label="提交地址" prop="createdTime" />
prop="submitAddress"
/>
<el-table-column
label="提交时间"
prop="createdTime"
/>
</el-table> </el-table>
</el-main> </el-main>
</el-container> </el-container>
@ -55,7 +51,7 @@ export default {
} }
] ]
}, },
data() { data () {
return { return {
projectResultList: [], projectResultList: [],
projectItemList: [], projectItemList: [],
@ -105,7 +101,7 @@ export default {
}] }]
} }
}, },
created() { created () {
this.projectKey = this.$route.query.projectKey this.projectKey = this.$route.query.projectKey
this.queryConditions.projectKey = this.projectKey this.queryConditions.projectKey = this.projectKey
this.queryProjectResult() this.queryProjectResult()
@ -113,24 +109,24 @@ export default {
this.queryProject() this.queryProject()
}, },
methods: { methods: {
openFormHandle() { openFormHandle () {
this.$router.replace({path: `/s/${this.projectKey}`}) this.$router.replace({ path: `/s/${this.projectKey}` })
}, },
queryProject() { queryProject () {
this.$api.get(`/user/project/${this.projectKey}`).then(res => { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
this.projectData = res.data this.projectData = res.data
}) })
}, },
queryProjectResult() { queryProjectResult () {
this.$api.get('/user/project/result/public/page', {params: this.queryConditions}).then(res => { 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 let { records, total, size } = res.data
this.projectResultList = records this.projectResultList = records
this.total = total this.total = total
this.queryConditions.size = size this.queryConditions.size = size
}) })
}, },
queryProjectItems() { queryProjectItems () {
this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: true}}).then(res => { 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) { if (res.data) {
res.data.map(item => { res.data.map(item => {
_.set(this.projectItemColumns, `field${item.formItemId}`, item.label) _.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
@ -143,7 +139,6 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-header { .el-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -181,5 +176,4 @@ export default {
width: 50%; width: 50%;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save