<template>
<div>
<template v-for="(seriesValue, seriesKey) in queryParam">
<a-row class="row-class">
<!--领域-businessArea-->
<a-col :span="2" class="left-msg">业务领域:</a-col>
<a-col :span="2">
<a-select v-model="seriesValue['businessArea']" class="select-width">
<a-select-option :value="businessAreaItem.value"
v-for="(businessAreaItem, businessAreaIndex) in queryParamModule" :key="businessAreaIndex">
{{ businessAreaItem.name }}
</a-select-option>
</a-select>
</a-col>
<!--主题-topic-->
<template v-if="seriesValue['businessArea']">
<a-col :span="1" class="left-msg">主题:</a-col>
<a-col :span="2">
<a-select v-model="seriesValue['topic']" class="select-width">
<a-select-option :value="topicItem.value"
v-for="(topicItem, topicIndex) in forTopic(seriesKey)"
:key="topicIndex">
{{ topicItem.name }}
</a-select-option>
</a-select>
</a-col>
</template>
<!-- 维度-xType -->
<template v-if="seriesValue['topic']">
<a-col :span="1" class="left-msg">维度:</a-col>
<a-col :span="2">
<a-select v-model="seriesValue['xType']" class="select-width">
<a-select-option :value="xTypeItem.value"
v-for="(xTypeItem, xTypeIndex) in forXType(seriesKey)"
:key="xTypeIndex">
{{ xTypeItem.name }}
</a-select-option>
</a-select>
</a-col>
</template>
<!-- 指标-target -->
<template v-if="seriesValue['topic']">
<a-col :span="1" class="left-msg">指标:</a-col>
<a-col :span="2">
<a-select v-model="seriesValue['target']" class="select-width">
<a-select-option :value="targetItem.value"
v-for="(targetItem, targetIndex) in forTarget(seriesKey)"
:key="targetIndex">
{{ targetItem.name }}
</a-select-option>
</a-select>
</a-col>
</template>
</a-row>
</template>
<a-row class="row-class">
<a-col :span="2" class="left-msg">图表:</a-col>
<a-col :span="22">
<a-radio-group v-model="chart">
<a-radio :value="index" v-for="(item, index) in { 'a' : '线性图', 'b' : '柱状图','c':'条形图','d':'饼图'}" :key="index">
{{ item }}
</a-radio>
</a-radio-group>
</a-col>
</a-row>
<a-row>
<a-col :span="22">
</a-col>
<a-col :span="2">
<a-button type="primary" @click="onSubmit">统计</a-button>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: 'headTab',
watch: {},
created () {
Object.keys(this.queryParam).forEach(item => {
this.watchCallBack.push(this.$watch(`queryParam.${item}.businessArea`, function (v) {
if (v) {
this.$set(this.queryParam[item], 'topic', undefined)
this.$set(this.queryParam[item], 'xType', undefined)
this.$set(this.queryParam[item], 'target', undefined)
}
}, { deep: true, immediate: true }));
this.watchCallBack.push(this.$watch(`queryParam.${item}.topic`, function (v) {
if (v) {
this.$set(this.queryParam[item], 'xType', undefined)
this.$set(this.queryParam[item], 'target', undefined)
}
}, { deep: true, immediate: true }));
})
},
computed: {
forTopic () {
return (series) => {
return this.queryParamModule[this.queryParam[series]['businessArea'] - 1]['topic']
}
},
forXType () {
return (series) => {
return this.queryParamModule[this.queryParam[series]['businessArea'] - 1]['topic'][this.queryParam[series]['topic'] - 1]['xType']
}
},
forTarget () {
return (series) => {
return this.queryParamModule[this.queryParam[series]['businessArea'] - 1]['topic'][this.queryParam[series]['topic'] - 1]['target']
}
}
},
data () {
return {
watchCallBack: [],
queryParamModule: [
/*
用户领域-businessArea-1
主题-topic 维度-xType 指标-target
平台访问-1 日期-1 访问人数-1
月份-2 注册人数-2
溯源人数-3
抽奖人数-4
阅读人数-5
会员分布-2 省份-1 会员人数-1
产品-2
农作物-3
*/
{
'name': '用户领域',
'value': '1',
'topic': [
{
'name': '平台访问',
'value': '1',
'xType': [
{ 'name': '日期', 'value': '1' },
{ 'name': '月份', 'value': '2' },
{ 'name': '溯源人数', 'value': '3' },
{ 'name': '抽奖人数', 'value': '4' },
{ 'name': '阅读人数', 'value': '5' }
],
'target': [
{ 'name': '访问人数', 'value': '1' },
{ 'name': '注册人数', 'value': '2' }
]
},
{
'name': '会员分布',
'value': '2',
'xType': [
{ 'name': '省份', 'value': '1' },
{ 'name': '产品', 'value': '2' },
{ 'name': '农作物', 'value': '3' }
],
'target': [
{ 'name': '会员人数', 'value': '1' }
]
}
]
}
/*
渠道领域-businessArea-2
主题-topic 维度-xType 指标-target
渠道分析-1 省份-1 门店数量-1
溯源分析-2 日期-1 溯源次数-1
月份-2
产品-3
经销商-4
产品分类-5
*/
],
chart: '',
queryParam: {
data1Request: {
businessArea: undefined,
topic: undefined,
xType: undefined,
target: undefined
},
data2Request: {
businessArea: undefined,
topic: undefined,
xType: undefined,
target: undefined
}
}
}
},
methods: {
onSubmit () {
let series = ['businessArea', 'topic', 'xType', 'target']
let pass1 = series.every(value => {
return this.queryParam.data1Request[value] != undefined
})
if (!pass1) {
this.$message.info('请选择完整')
return false
}
this.$emit('onSubmit', this.queryParam)
}
},
beforeDestroy () {
this.watchCallBack.forEach(item => item());
}
}
</script>
<style scoped>
.left-msg {
color: #000;
text-align: right;
padding-right: 10px;
}
.row-class {
min-height: 32px;
margin: 8px 0;
display: flex;
align-items: center;
}
.select-width {
width: 140px;
}
</style>
2021-03-25
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
