|
|
@@ -0,0 +1,191 @@
|
|
|
+const app = new Vue({
|
|
|
+ el:'#app',
|
|
|
+ data:{
|
|
|
+ group_datas: [],
|
|
|
+ user_groups: [],
|
|
|
+ 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: [],
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ checkback(num) {
|
|
|
+ if(num > 700) {
|
|
|
+ return 'dark-2'
|
|
|
+ } else if (num > 500) {
|
|
|
+ return 'dark-1'
|
|
|
+ } else if (num > 300) {
|
|
|
+ return 'lighten-1'
|
|
|
+ } else {
|
|
|
+ return 'lighten-2'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showModal(keywords) {
|
|
|
+ $('#exampleModalCenter').modal('show');
|
|
|
+ this.tempkeywords = keywords;
|
|
|
+ },
|
|
|
+ check(num, grpdata) {
|
|
|
+ let total = 0;
|
|
|
+ grpdata.trends.forEach(item => {
|
|
|
+ item.forEach(single => {
|
|
|
+ total += single.times;
|
|
|
+ })
|
|
|
+ });
|
|
|
+ let threshold = total / 12;
|
|
|
+ if(num > threshold) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ axios.get('http://www.googo.org:8050/api/group_datas/').then(res => {
|
|
|
+ this.group_datas = res.data;
|
|
|
+ //console.log(this.group_datas);
|
|
|
+ // this.trends = this.json.filter(item => item['data_type'] === 'trends');
|
|
|
+ //this.keywords = this.json.filter(item => item['data_type'] === 'suggests');
|
|
|
+
|
|
|
+ });
|
|
|
+ axios.get('http://www.googo.org:8050/api/user_groups/').then(res => {
|
|
|
+ //console.log(res.data);
|
|
|
+ this.user_groups = res.data;
|
|
|
+ this.user_groups.forEach(item => {
|
|
|
+ this.group_datas.forEach(d => {
|
|
|
+ if(d.group_id === item.id) {
|
|
|
+ d.group_chinese_name = item.group_chinese_name;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ //console.log(this.group_datas);
|
|
|
+ this.trends = this.group_datas.filter(item => item['data_type'] === 'trends');
|
|
|
+ this.keywords = this.group_datas.filter(item => item['data_type'] === 'suggests');
|
|
|
+ this.trends.forEach(item => {
|
|
|
+ item.times = this.GetObjVal(item.data.data);
|
|
|
+ let newD = [];
|
|
|
+ item.times.forEach((k, i) => {
|
|
|
+ if(i%3===0){
|
|
|
+ newD.push([]);
|
|
|
+ }
|
|
|
+ const page = parseInt(i/3);
|
|
|
+ newD[page].push({times:k});
|
|
|
+ console.log(newD);
|
|
|
+ item.final = newD;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log(this.trends);
|
|
|
+ console.log(this.keywords);
|
|
|
+ this.user_groups.forEach(item => {
|
|
|
+ this.group_datas.forEach(d => {
|
|
|
+ if(d.group_id == item.id) {
|
|
|
+ if(d['data_type'] == 'suggests') {
|
|
|
+ item.suggests = d.data.data;
|
|
|
+ console.log(item.suggests);
|
|
|
+ };
|
|
|
+ if(d['data_type'] == 'trends') {
|
|
|
+ item.trends = d.data.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.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;
|
|
|
+ });
|
|
|
+ } 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}]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(this.user_groups);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mergeData() {
|
|
|
+ this.user_groups.forEach(item => {
|
|
|
+ this.group_datas.forEach(d => {
|
|
|
+ if(d['data_type'] == 'suggests') {
|
|
|
+ item.suggests = d.data.data;
|
|
|
+ };
|
|
|
+ if(d['data_type'] == 'trends') {
|
|
|
+ item.trends = d.data.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const d = new Date();
|
|
|
+ const m = d.getMonth();
|
|
|
+ if(m >= 0 && m < 3) {
|
|
|
+ this.selected = 0;
|
|
|
+ } else if(m >=3 && m < 6) {
|
|
|
+ this.selected = 1;
|
|
|
+ } else if(m >=6 && m < 9) {
|
|
|
+ this.selected = 2;
|
|
|
+ } else {
|
|
|
+ this.selected = 3;
|
|
|
+ };
|
|
|
+ this.getData();
|
|
|
+ //this.getPack();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
huaisianhuang