|
|
@@ -1,6 +1,23 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center
|
|
|
+ <div class="form-group form-group-center" v-if="!table_show">
|
|
|
+ <label for="exampleFormControlSelect1" class="mb-2">請選擇您的產業別</label>
|
|
|
+ <select class="form-control mb-3" id="exampleFormControlSelect1" v-model="serviceSelected">
|
|
|
+ <option disabled value>產業別</option>
|
|
|
+ <option v-for="li in servicelist" :key="li.id" :value="li.name">{{ li.name }}</option>
|
|
|
+ </select>
|
|
|
+ <button @click.prevent="submit_type" class="btn__kw">送出</button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>產業別： <span>{{ serviceSelected }}</span></p>
|
|
|
+ </div>
|
|
|
+ <Loading :active.sync="isLoading" :opacity="0.8">
|
|
|
+ <template slot="default">
|
|
|
+ <img src="../assets/ajax-loader.gif">
|
|
|
+ </template>
|
|
|
+ </Loading>
|
|
|
+ <template v-if="serviceSelected && table_show">
|
|
|
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center
|
|
|
pb-2 mb-3">
|
|
|
<h1 class="h2">近一季行銷建議</h1>
|
|
|
<div class="d-flex">
|
|
|
@@ -24,13 +41,13 @@
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
- <tr v-for="(item ,k) in user_groups" :key="`hhh-${k}`">
|
|
|
- <th>{{ item.group_chinese_name }}</th>
|
|
|
- <td v-for="(t,idx) in item.trends[i]" :key="idx">
|
|
|
+ <tr v-for="item in customData" :key="`gr-${item.id}`">
|
|
|
+ <th>{{ item.groups.group_chinese_name }}</th>
|
|
|
+ <td v-for="(t,idx) in item.groups.trends[i]" :key="idx">
|
|
|
<button type="button" class="btn__kw" data-toggle="modal"
|
|
|
data-target="#exampleModalCenter"
|
|
|
- @click.prevent="showModal(item.suggests)">關鍵字</button>
|
|
|
- <div class="highTrend dark-1 p-2 mt-2" v-if="check(t.times, item)">Popular</div>
|
|
|
+ @click.prevent="showModal(item.groups.data_suggests)">關鍵字</button>
|
|
|
+ <div class="highTrend dark-1 p-2 mt-2" v-if="check(t.popularity, item.groups)">Popular</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr v-for="(item ,it) in json" :key="it">
|
|
|
@@ -42,6 +59,8 @@
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
|
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
|
<div class="modal-content">
|
|
|
@@ -52,9 +71,12 @@
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
- <div v-for="(word, i) in tempkeywords" :key="i" class="mb-3">
|
|
|
- <span class="d-flex mb-2"><i class="fas fa-clock d-inline-block mr-1"></i>日期：{{ word.start }} - {{ word.end}}</span>
|
|
|
- <template v-for="(each, idx) in word.words">
|
|
|
+ <div v-for="(word, i) in tempkeywords" :key="i" class="mb-3 words__block">
|
|
|
+ <div class="d-flex justify-content-between align-items-center">
|
|
|
+ <span class="d-flex mb-2"><i class="fas fa-clock d-inline-block mr-1"></i>日期：{{ word.start }} - {{ word.end}}</span>
|
|
|
+ <span class="openWords" @click="openWords"><i class="fas fa-chevron-down"></i></span>
|
|
|
+ </div>
|
|
|
+ <template v-for="(each, idx) in word.suggests">
|
|
|
<span class="badge badge-warning" :key="idx">{{ each }}</span>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -83,25 +105,13 @@ export default {
|
|
|
isLoading: false,
|
|
|
ex: [],
|
|
|
month: [['Jan', 'Feb', 'Mar'], ['Apr', 'May', 'Jun'], ['Jul', 'Aug', 'Sep'], ['Oct', 'Nov', 'Dec']],
|
|
|
- trends: [
|
|
|
- {
|
|
|
- group: '婚禮',
|
|
|
- data:[
|
|
|
- [{month: 'Jan', times: 782}, {month: "Feb", times: 752} , {month: 'Mar', times: 909}],
|
|
|
- [{month: 'Apr', times: 880}, {month: 'May', times: 929}, {month: "Jun", times: 883} ],
|
|
|
- [{month: 'Jul', times: 855}, {month: 'Aug', times: 776}, {month: 'Sep', times: 1020}],
|
|
|
- [{month: "Oct", times: 1206} , {month: 'Nov', times: 1042}, {month: 'Dec', times: 1051}]
|
|
|
- ]
|
|
|
- },
|
|
|
- ],
|
|
|
- keywords: [
|
|
|
- { group: "婚禮", words: ['婚禮穿搭', '婚禮穿搭男', '婚禮穿搭dcard', '婚禮穿搭禁忌', ' 婚禮穿搭褲裝', '婚禮穿搭牛仔褲', '婚禮穿搭女', '婚禮穿搭ptt', '婚禮穿搭夏天', '婚禮穿搭 冬天'] },
|
|
|
- { group: "蔬食", words: ['健康蔬食', '蔬食食譜','素食蔬食']},
|
|
|
- { group: "室內設計", words: ['室內設計風格', '室內設計圖','室內設計網站']}
|
|
|
- ],
|
|
|
tempkeywords: [],
|
|
|
selected: 0,
|
|
|
json: [],
|
|
|
+ customData: [],
|
|
|
+ servicelist: [],
|
|
|
+ serviceSelected: '',
|
|
|
+ table_show: false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -118,13 +128,13 @@ export default {
|
|
|
},
|
|
|
showModal(keywords) {
|
|
|
$('#exampleModalCenter').modal('show');
|
|
|
- this.tempkeywords = keywords;
|
|
|
+ this.tempkeywords = keywords.reverse();
|
|
|
},
|
|
|
check(num, grpdata) {
|
|
|
let total = 0;
|
|
|
grpdata.trends.forEach(item => {
|
|
|
item.forEach(single => {
|
|
|
- total += single.times;
|
|
|
+ total += single.popularity;
|
|
|
})
|
|
|
});
|
|
|
let threshold = total / 12;
|
|
|
@@ -135,6 +145,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getcalData() {
|
|
|
+ this.isLoading = true;
|
|
|
this.$http.get('http://www.googo.org:8050/api/get_2020_marketing_cal').then(res => {
|
|
|
console.log(res.data);
|
|
|
this.json = res.data;
|
|
|
@@ -153,65 +164,51 @@ export default {
|
|
|
});
|
|
|
item['orgData'].splice(0, 1);
|
|
|
})
|
|
|
- console.log(this.json[2]);
|
|
|
+ this.isLoading = false;
|
|
|
});
|
|
|
},
|
|
|
- getData() {
|
|
|
- const vm = this;
|
|
|
- this.isLoading = true;
|
|
|
- this.$http.get('http://www.googo.org:8050/api/group_datas/').then(res => {
|
|
|
- this.group_datas = res.data;
|
|
|
- vm.$http.get('http://www.googo.org:8050/api/user_groups/').then(res => {
|
|
|
- //console.log(res.data);
|
|
|
- vm.user_groups = res.data;
|
|
|
- vm.user_groups.forEach(item => {
|
|
|
- vm.group_datas.forEach(d => {
|
|
|
- if(d.group_id === item.id) {
|
|
|
- d.group_chinese_name = item.group_chinese_name;
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- vm.user_groups.forEach(item => {
|
|
|
- let arr = [];
|
|
|
- vm.group_datas.forEach(d => {
|
|
|
- if(d.group_id == item.id) {
|
|
|
- if(d['data_type'] == 'suggests') {
|
|
|
- arr.push({start: d.start, end: d.end, words: d.data.data});
|
|
|
- item.suggests = arr;
|
|
|
- console.log(item.suggests);
|
|
|
- };
|
|
|
- if(d['data_type'] == 'trends') {
|
|
|
- item.trends = d.data.data;
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- arr.reverse();
|
|
|
- });
|
|
|
- vm.user_groups.forEach(item => {
|
|
|
- if(item.trends) {
|
|
|
- const temp = this.GetObjVal(item.trends);
|
|
|
- let newD = [];
|
|
|
- temp.forEach((k, i) => {
|
|
|
- if(i%3===0){
|
|
|
- newD.push([]);
|
|
|
- }
|
|
|
- const page = parseInt(i/3);
|
|
|
- newD[page].push({times:k});
|
|
|
- item.trends = newD;
|
|
|
- });
|
|
|
+ getCustomData() {
|
|
|
+ this.$http.get('http://www.googo.org:8050/api/user_groups_data/1').then(res => {
|
|
|
+ this.customData = res.data;
|
|
|
+ /* this.customData.forEach((el, i) => {
|
|
|
+ let dateArr = [];
|
|
|
+ el.groups.data_suggests.forEach((item, idx) => {
|
|
|
+ dateArr.push(item.start);
|
|
|
+ });
|
|
|
+ //console.log(dateArr);
|
|
|
+ let dateset = new Set(dateArr);
|
|
|
+ console.log(Array.from(dateset));
|
|
|
+ dateset = Array.from(dateset);
|
|
|
+ console.log(dateset);
|
|
|
+
|
|
|
+ }); */
|
|
|
+
|
|
|
+ /* this.customData.forEach((item, idx) => {
|
|
|
+ let arr = [];
|
|
|
+ item.groups.data_suggests.forEach((d, i) => {
|
|
|
+ if(d['data_type'] == 'suggests'){
|
|
|
+ arr.push({start: d.start, end: d.end, words: d.data.data});
|
|
|
} else {
|
|
|
- item.trends = [
|
|
|
- [{times: 0}, {times: 0}, {times: 0}],
|
|
|
- [{times: 0}, {times: 0}, {times: 0}],
|
|
|
- [{times: 0}, {times: 0}, {times: 0}],
|
|
|
- [{times: 0}, {times: 0}, {times: 0}]
|
|
|
- ]
|
|
|
+ item.groups.trends = d.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ arr.reverse();
|
|
|
+ item.groups.suggests = arr;
|
|
|
+ }); */
|
|
|
+ this.customData.forEach((item, idx) => {
|
|
|
+ const temp = this.GetObjVal(item.groups.data_trends);
|
|
|
+ let newD = [];
|
|
|
+ item.groups.data_trends.forEach((k, i) => {
|
|
|
+ if(i%3===0){
|
|
|
+ newD.push([]);
|
|
|
}
|
|
|
+ const page = parseInt(i/3);
|
|
|
+ newD[page].push(k);
|
|
|
+ item.groups.trends = newD;
|
|
|
});
|
|
|
- console.log(this.user_groups);
|
|
|
- this.isLoading = false;
|
|
|
- })
|
|
|
+ console.log(this.customData);
|
|
|
});
|
|
|
+ });
|
|
|
},
|
|
|
mergeData() {
|
|
|
this.user_groups.forEach(item => {
|
|
|
@@ -225,32 +222,37 @@ export default {
|
|
|
})
|
|
|
});
|
|
|
},
|
|
|
- getPack() {
|
|
|
- for(let i = 1;i < 5;i++) {
|
|
|
- axios.get(`http://www.googo.org:8050/api/group_datas/group/${i}/`).then(res => {
|
|
|
- console.log(res.data);
|
|
|
- const add = [...res.data];
|
|
|
- this.ex.push(add);
|
|
|
- //this.trends = this.json.filter(item => item['data_type'] === 'trends');
|
|
|
- //this.keywords = this.json.filter(item => item['data_type'] === 'suggests');
|
|
|
- console.log(this.ex);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- filter() {
|
|
|
- this.user_groups .forEach(item => {
|
|
|
- this.group_datas.forEach(d => {
|
|
|
- if(d.group_id === item.id) {
|
|
|
- d.group_chinese_name = item.group_chinese_name;
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
GetObjVal(val) {
|
|
|
return Object.values(val);
|
|
|
},
|
|
|
GetObjKey(val) {
|
|
|
return Object.keys(val)[0];
|
|
|
+ },
|
|
|
+ openWords(e) {
|
|
|
+ const { currentTarget } = e;
|
|
|
+ $(currentTarget).parent().parent().toggleClass('autoHeight');
|
|
|
+ if($(currentTarget).children().hasClass('fa-chevron-down')){
|
|
|
+ $(currentTarget).children().removeClass();
|
|
|
+ $(currentTarget).children().addClass('fas fa-chevron-up');
|
|
|
+ } else{
|
|
|
+ $(currentTarget).children().removeClass();
|
|
|
+ $(currentTarget).children().addClass('fas fa-chevron-down');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getServTypeLi() {
|
|
|
+ this.$http.get('http://www.googo.org:8050/api/service_type/').then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ this.servicelist = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit_type() {
|
|
|
+ // console.log(this.serviceSelected);
|
|
|
+ const vm = this;
|
|
|
+ this.$http.post('http://www.googo.org:8050/api/users_groups/1',
|
|
|
+ { service_type: this.serviceSelected }).then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ vm.table_show = true;
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -265,8 +267,11 @@ export default {
|
|
|
} else {
|
|
|
this.selected = 3;
|
|
|
};
|
|
|
- this.getData();
|
|
|
- this.getcalData();
|
|
|
- },
|
|
|
+ // this.getcalData();
|
|
|
+ // $('#enterModalCenter').modal('show');
|
|
|
+ this.getServTypeLi();
|
|
|
+ this.getCustomData();
|
|
|
+ }
|
|
|
};
|
|
|
+
|
|
|
</script>
|
huaisianhuang
