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

Merge branch 'dev_ljj' of http://git.elinkit.com.cn:7070/r/tduck-front into dev_ljj

old
jiangyy 4 years ago
parent
d7829676b0 9333c94440
commit
394fd992dc
5 changed files with 297 additions and 205 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      .env.development
  2. 2
      .env.production
  3. 4
      src/api/index.js
  4. 1
      src/components/form/ProvinceCity/index.vue
  5. 489
      src/views/form/statistics/analysis.vue

6
.env.development
View File

@ -2,10 +2,10 @@
VUE_APP_TITLE = 问卷调查测试环境
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VUE_APP_API_ROOT_TDUCK = /tduck-api
VUE_APP_API_ROOT = http://192.168.1.140/api
VUE_APP_API_ROOT = http://192.158.1.140/api
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VUE_APP_DEBUG_TOOL =
# 高德地图key
VUE_APP_DEBUG_TOOL =
# 高德地图key 暂时没有用到
VUE_APP_MAP_KEY = f2200337d0d08538e78729572749882d
# 微信功能开关 开启设置 ON，关闭设置 OFF
VUE_APP_WX = OFF

2
.env.production
View File

@ -4,7 +4,7 @@ VUE_APP_TITLE = 问卷调查
VUE_APP_API_ROOT = /tduck-api
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VUE_APP_DEBUG_TOOL =
# 高德地图key
# 高德地图key 暂时没有用到
VUE_APP_MAP_KEY = f2200337d0d08538e78729572749882d
# 微信功能开关 开启设置 ON，关闭设置 OFF
VUE_APP_WX = ON

4
src/api/index.js
View File

@ -32,7 +32,7 @@ api.interceptors.request.use(
* 以下代码为示例，在登录状态下，分别对 post 和 get 请求加上 token 参数
*/
if (store.getters['user/isLogin']) {
request.headers.token = store.state.user.token
request.headers.token = store.state.user.token
// request.headers.token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJhcHAiOiJnb3YiLCJjbGllbnQiOiJ3ZWIiLCJleHAiOjE2MzI5NjYwODEsInVzZXJJZCI6Ijg0ODg3ZDQzMjEzN2EzMGI3YWJhYWM1MDY5ODZkNDYxIiwiaWF0IjoxNjMyMzYxMjgxfQ.CDYJNfuF7gRRDwwmB9dJQjVOj_t_3xdrgwMqxHNAleZuQHkPMu9fI32at2aPjprhN4yBc_KT_3_Yhh30SF7YzA'
// request.headers.Authorization = store.state.user.token
}
@ -66,7 +66,7 @@ api.interceptors.response.use(
* 请求出错时 msg 会返回错误信息
* 则代码如下
*/
let errCodes = [500, 405, 403]
let errCodes = [8000, 405, 403]
const res = response.data
if (res.code === 200) {
return Promise.resolve(res)

1
src/components/form/ProvinceCity/index.vue
View File

@ -16,6 +16,7 @@ export default {
name: 'ProvinceCity',
data() {
return {
value: '',
options: city,
props: {
label: 'n',

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

@ -1,12 +1,14 @@
<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; font-weight: bold;">Q{{ index + 1 }} ：{{ 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; font-weight: bold"
>Q{{ index + 1 }} ：{{ item.label }}（{{ item.type }}）</span
>
<!-- <div>
<!-- <div>
<span>图表类型：</span>
<el-select v-model="item.chartType" placeholder="请选择">
<el-option
@ -17,201 +19,234 @@
/>
</el-select>
</div> -->
</div>
<!-- <line-chart
</div>
<!-- <line-chart
class="chart"
:chart-option="getCharData(item)"
:width="'90vw'"
/> -->
<div v-if="computedCount(item.type)" class="cell-type">
<span>共收集 {{ item.detail.collectionTotal }} 条，</span>
<span>有效 {{ item.detail.validTotal }} 条</span>
<span v-if="item.type === 'NUMBER_INPUT'">，总计 {{ item.detail.sumTotal }} </span>
<span v-if="item.type === 'SWITCH'">，开 {{ item.detail.openTotal }} 条，关 {{ item.detail.closedTotal }} 条</span>
</div>
<div v-else-if="item.type === 'RATE'" class="cell-rate">
<div v-for="(n, i) in item.detail.maxStarNum" :key="i" class="rate-item">
<div class="rate-item-icon">
<el-rate
:value="n"
disabled
text-color="#ff9900"
>
</el-rate>
</div>
<div class="rate-item-num">{{ item.detail.starProfile[n] || 0 }} 次</div>
</div>
<div class="rate-item">
<div class="rate-item-avg">平均星数</div>
<div class="rate-item-icon">
<el-rate
:value="item.detail.avgStarNum"
disabled
text-color="#ff9900"
>
</el-rate>
</div>
</div>
</div>
<div v-else-if="item.type === 'RADIO' || item.type === 'CHECKBOX' || item.type === 'SELECT'" class="cell-wrapper">
<div v-for="(n, i) in item.detail.options" :key="i" class="cell">
<div class="cell-label">{{ n.label }}</div>
<div class="cell-value">
<div class="cell-progress">
<el-progress :stroke-width="20" :show-text="false" :percentage="computedPercent(n.currentCount, item.detail.totalCount)" />
</div>
<div class="cell-percent">
{{ computedPercent(n.currentCount, item.detail.totalCount).toFixed(2) }}%
</div>
<div class="cell-num">{{ n.currentCount }}次</div>
</div>
</div>
</div>
<div v-if="computedCount(item.type)" class="cell-type" @click="handleOpen(item)">
<span>共收集 {{ item.detail.collectionTotal }} 条，</span>
<span>有效 {{ item.detail.validTotal }} 条</span>
<span v-if="item.type === 'NUMBER_INPUT'"
>，总计 {{ item.detail.sumTotal }}
</span>
<span v-if="item.type === 'SWITCH'"
>，开 {{ item.detail.openTotal }} 条，关
{{ item.detail.closedTotal }} 条</span
>
</div>
<div v-else-if="item.type === 'RATE'" class="cell-rate">
<div
v-for="(n, i) in item.detail.maxStarNum"
:key="i"
class="rate-item"
>
<div class="rate-item-icon">
<el-rate :value="n" disabled text-color="#ff9900"> </el-rate>
</div>
<div class="rate-item-num">
{{ item.detail.starProfile[n] || 0 }} 次
</div>
</div>
<div class="rate-item">
<div class="rate-item-avg">平均星数</div>
<div class="rate-item-icon">
<el-rate
:value="item.detail.avgStarNum"
disabled
text-color="#ff9900"
>
</el-rate>
</div>
</div>
</div>
<div
v-else-if="
item.type === 'RADIO' ||
item.type === 'CHECKBOX' ||
item.type === 'SELECT'
"
class="cell-wrapper"
>
<div v-for="(n, i) in item.detail.options" :key="i" class="cell">
<div class="cell-label">{{ n.label }}</div>
<div class="cell-value">
<div class="cell-progress">
<el-progress
:stroke-width="20"
:show-text="false"
:percentage="computedPercent(n.currentCount, item.detail.totalCount)"
/>
</div>
<el-divider />
<div class="cell-percent">
{{ computedPercent(n.currentCount, item.detail.totalCount).toFixed(2) }}%
</div>
<div class="cell-num">{{ n.currentCount }}次</div>
</div>
</div>
</div>
</div>
<data-empty v-else style="padding: 20px" desc="暂无数据分析" />
<el-divider />
</div>
</div>
<data-empty v-else style="padding: 20px" desc="暂无数据分析" />
<el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :close-on-click-modal="false" @close="handleClose">
<el-table :data="dialogData" max-height="400" border>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column v-for="item in dialogHeader" :key="item.formItemId" :prop="item.formItemId" :label="item.label" />
<!-- <el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column> -->
</el-table>
</el-dialog>
</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: '饼图'
},
/* {
components: {
LineChart
},
data() {
return {
dialogTableVisible: false,
dialogTitle: '',
dialogData: [],
dialogHeader: [],
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: '折线图'
}
]
{
value: 'bar',
label: '柱状图'
},
{
value: 'line',
label: '折线图'
}
]
}
},
mounted() {
this.getData()
},
methods: {
getData() {
// `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis`
// params: { projectKey: this.$route.query.key }
this.$api
.post('/data/aggregator/questionnaire/analysisreport', {
projectKey: this.$route.query.key
})
.then((res) => {
this.list = res.data
})
},
mounted() {
this.getData()
},
methods: {
getData() {
// `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis`
// params: { projectKey: this.$route.query.key }
this.$api
.post('/data/aggregator/questionnaire/analysisreport', {
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%'
}
]
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
}
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) {
}
],
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 = {
@ -225,22 +260,79 @@ export default {
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
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
},
getInputList(id, type) {
this.$api
.post('/data/aggregator/questionnaire/itemresdetail-list', {
projectKey: this.$route.query.key,
formItemId: id,
type
})
.then((res) => {
this.dialogData = res.data.map(item => {
return {
[id]: item
}
return config
},
computedCount(type) {
const arr = ['PROVINCE_CITY', 'NUMBER_INPUT', 'SWITCH', 'INPUT', 'TEXTAREA', 'INPUT_MAP', 'TIME', 'DATE_RANGE', 'DATE', 'TIME_RANGE']
return arr.includes(type)
},
computedPercent(num, count) {
return ((num * 100) / count)
}
})
})
},
getConcatList() {
this.$api
.post('/data/aggregator/questionnaire/itemresdetail-concat', {
projectKey: this.$route.query.key
})
.then((res) => {
this.dialogData = res.data.dataMap
this.dialogHeader = res.data.tableHeaderList
})
},
async handleOpen(item) {
if (item.type === 'SWITCH' || item.type === 'NUMBER_INPUT') return false
this.dialogTitle = item.label
if (item.moduleType && item.moduleType === 'concat') {
await this.getConcatList()
} else {
this.dialogHeader.push(item)
await this.getInputList(item.formItemId, item.type)
}
this.dialogTableVisible = true
},
handleClose() {
this.dialogHeader = []
this.dialogTitle = ''
this.dialogData = []
this.dialogTableVisible = false
},
computedCount(type) {
const arr = [
'PROVINCE_CITY',
'NUMBER_INPUT',
'SWITCH',
'INPUT',
'TEXTAREA',
'INPUT_MAP',
'TIME',
'DATE_RANGE',
'DATE',
'TIME_RANGE'
]
return arr.includes(type)
},
computedPercent(num, count) {
return (num * 100) / count
}
}
}
</script>
@ -275,7 +367,8 @@ export default {
.cell-wrapper {
width: 100%;
border: 1px solid #eee;
.cell, .cell-value {
.cell,
.cell-value {
widows: 100%;
display: flex;
align-items: center;
@ -289,7 +382,6 @@ export default {
width: 60%;
box-sizing: border-box;
padding-left: 10px;
}
.cell-value {
width: 40%;
@ -325,6 +417,5 @@ export default {
font-size: 14rpx;
}
}
</style>

Write Preview
Loading…
Cancel
Save