Skip to content

H
hu-shoujijingfen-h5
Commit b1b79dd0 by chenweisong
Options

营销模块改bug

parent 90898223
Showing with 156 additions and 33 deletions
src/views/app/gridMarketing2.vue
......@@ -68,6 +68,11 @@
v-if="popObjMouth.visable"
:obj="popObjMouth"></Popup>
</div>
<div class="select-bar">
<select @change="handleSelect">
<option :key="i" v-for="(item,i) in categories" :value="item.id">{{item.name}}</option>
</select>
</div>
</div>
<div ref="kpiRef" class="kpis">
<div class="kpi" :style="{width: kpiWidth}">
......@@ -90,12 +95,13 @@
<table v-if="isShowTable" class="table" cellpadding="0" cellspacing="0" ref="table">
<thead ref="theadDetails">
<tr>
<th width="33.33333%" class="rows cross">区域</th>
<th width="25%" class="rows cross">区域</th>
<template v-if="tabActive === 1">
<th class="rows" v-if="!hide">目标值</th>
<th width="33.33333%" class="rows">完成值</th>
<th width="25%" class="rows">完成值</th>
<th class="rows" v-if="!hide">完成进度</th>
<th width="33.33333%" class="rows">环比</th>
<th width="25%" class="rows">环比</th>
<th width="25%" class="rows">在网用户数</th>
<th v-if=" !hide && selectArea.level >= 1" class="rows">省内排名</th>
<th v-if=" !hide && selectArea.level >= 2" class="rows">市内排名</th>
<th v-if=" !hide && selectArea.level >= 3" class="rows">县内排名</th>
......@@ -126,6 +132,7 @@
<td>{{b.complete}}</td>
<td v-if="!hide">{{b.rate }}</td>
<td>{{b.ratio }}</td>
<td>{{b.cust_num }}</td>
</template>
<template v-if="tabActive === 2">
<td v-if="!hide">{{b.month_task_value}}</td>
......@@ -174,11 +181,13 @@
computed: {
hide() {
let item = this.activeKpiItem;
return !!item.hide;
return item && !!item.hide;
}
},
data() {
return {
categories: [],
categoriesOrigin: [],
public: true,
tabActive: REAL_TIME,
showUpperLevel: false,
......@@ -293,6 +302,37 @@
}
},
methods: {
handleSelect(e) {
let id = parseInt(e.target.value);
this.kpiList = [];
this.bodyList = [];
this.activeKpiItem = {};
this.activeKpiCode = "";
let category = this.categories.find((iten) => {
return iten.id === id
});
if (category.children && category.children.length) {
this.kpiList = category.children;
if (this.kpiList.length) {
this.activeKpiItem = this.kpiList[0];
this.activeKpiCode = this.kpiList[0].kpi_code;
this.getData();
}
setTimeout(() => {
let len = 0;
let doms = document.getElementsByClassName("kpi-item");
let length = doms.length;
for (let i = 0; i < doms.length; i++) {
len += doms[i].offsetWidth;
}
let width = window.screen.width;
this.kpiWidth = len <= width ? width + "px" : len + length + "px";
}, 20);
} else {
Toast("指标开发中，敬请期待");
}
},
hidePop(type) {
this.popObjMouth.visable = false;
this.popObjMouth.remark = "";
......@@ -415,6 +455,7 @@
this.getData();
},
// eslint-disable-next-line no-unused-vars
clickKpi(kpiItem, index) {
// console.log({ kpiItem, index })
this.activeKpiItem = kpiItem;
......@@ -424,16 +465,38 @@
clickTab(type) {
this.tabActive = type;
this.kpiList = [];
this.bodyList = [];
this.activeKpiItem = {};
this.activeKpiCode = "";
this.categories = [];
this.$nextTick(() => {
for (let i = 0; i < this.kpiListOrigin.length; i++) {
const kpi = this.kpiListOrigin[i];
if (kpi.type === type) {
this.kpiList.push(kpi);
this.categories = JSON.parse(JSON.stringify(this.categoriesOrigin)).filter((k) => {
return k.type === type;
});
let kpiListOrigin = JSON.parse(JSON.stringify(this.kpiListOrigin)).filter((k) => {
return k.type === type;
});
this.categories.forEach((c) => {
let kpis = kpiListOrigin.filter((k) => {
return k.pid === c.id;
});
if (!c.children) {
c.children = [];
}
}
if (this.kpiList.length) {
c.children = kpis;
})
if (this.categories[0].children.length) {
this.kpiList = [];
this.kpiList = this.categories[0].children;
this.activeKpiItem = this.kpiList[0];
this.activeKpiCode = this.kpiList[0].kpi_code;
this.showSelectDateValue = formatDateTime(
type === REAL_TIME ? this.activeDate : this.mouthActiveDate,
"YYYY-MM-DD mm:ss"
).slice(0, 10);
this.getData();
} else {
Toast("指标开发中，敬请期待");
}
setTimeout(() => {
let len = 0;
......@@ -446,13 +509,8 @@
this.kpiWidth = len <= width ? width + "px" : len + length + "px";
// console.log('tabWidth :', this.tabWidth)
}, 20);
this.showSelectDateValue = formatDateTime(
type === REAL_TIME ? this.activeDate : this.mouthActiveDate,
"YYYY-MM-DD mm:ss"
).slice(0, 10);
this.getData();
console.log(this.categories[0].children);
})
},
async fetch() {
let res = null;
......@@ -465,31 +523,62 @@
}
// Indicator.close();
if (res === null) return;
this.kpiListOrigin = res;
this.kpiList = [];
for (let i = 0; i < res.length; i++) {
const r = res[i];
if (r.type === REAL_TIME) {
this.kpiList.push(r);
this.categories.forEach(category => {
if (category.id === r.pid) {
if (!category.children) {
category.children = [];
}
category.children.push(r);
}
})
// if (r.type === REAL_TIME) {
// this.kpiList.push(r);
// }
}
if (this.categories.length && this.categories[0].children) {
this.kpiList = this.categories[0].children;
if (this.kpiList.length) {
this.activeKpiItem = this.kpiList[0];
this.activeKpiCode = this.kpiList[0].kpi_code;
}
setTimeout(() => {
let len = 0;
let doms = document.getElementsByClassName("kpi-item");
let length = doms.length;
for (let i = 0; i < doms.length; i++) {
len += doms[i].offsetWidth;
}
let width = window.screen.width;
this.kpiWidth = len <= width ? width + "px" : len + length + "px";
// console.log('tabWidth :', this.tabWidth)
}, 20);
} else {
Toast("指标开发中，敬请期待");
}
if (this.kpiList.length) {
this.activeKpiItem = this.kpiList[0];
this.activeKpiCode = this.kpiList[0].kpi_code;
// console.log('res :', res)
},
async fetchCategory() {
let res = null;
try {
res = await this.post(this.public ? this.$urls.data402 : this.$urls.dataPublic402, {});
} catch (error) {
console.log("error :", error);
Indicator.close();
return;
}
setTimeout(() => {
let len = 0;
let doms = document.getElementsByClassName("kpi-item");
let length = doms.length;
for (let i = 0; i < doms.length; i++) {
len += doms[i].offsetWidth;
// Indicator.close();
if (res === null) return;
this.categoriesOrigin = res;
res.forEach((c) => {
if (c.type == REAL_TIME) {
this.categories.push(c);
}
let width = window.screen.width;
this.kpiWidth = len <= width ? width + "px" : len + length + "px";
// console.log('tabWidth :', this.tabWidth)
}, 20);
// console.log('res :', res)
})
},
async getData() {
if (!this.activeKpiCode) {
......@@ -855,6 +944,7 @@
this.public = true;
this.isExistedCollect();
}
await this.fetchCategory();
await this.fetch();
await this.getData();
}
......@@ -986,12 +1076,45 @@
}
.select-bar {
position: absolute;
top: 0.21rem;
left: .15rem;
height: 0.5rem;
color: #999;
select {
border: none;
/* //清除select聚焦时候的边框颜色 */
outline: none;
line-height: 0.3rem;
/* //隐藏select的下拉图标 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* //通过padding-left的值让文字居中 */
text-align: center;
background: transparent;
color: #2b90fa;
font-size: .05rem;
width: 1.58rem;
height: 100%;
option {
font-size: .05rem;
}
}
}
.bore {
position: absolute;
top: 0.3rem;
right: .35rem;
height: 0.5rem;
color: #999;
font-size: .05rem;
.question {
display: inline-block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment