zx-微博详情-车型热度，词云分布，kol

public/index.html

@@ -12,6 +12,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="referrer" content="no-referrer">
     <link rel="icon" href="<%= BASE_URL %>sws_32.ico">
     <title>硕为思汽车智能洞察系统</title>
   </head>

src/api/WeiboDetails/index.js

@@ -84,4 +84,94 @@ export function getRegionWeiBo(params) {
             'content-type': 'application/x-www-form-urlencoded'
         }
     })
+}
+
+//正面词云
+export function getPositive(params) {
+    let obj =  Object.assign({action: 'getPositive', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//负面词云
+export function getNegative(params) {
+    let obj =  Object.assign({action: 'getNegative', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//正面观点KOL
+export function getCoreDiffuseWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getCoreDiffuseWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//调性分布
+export function getBoauthenAffectionsWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getBoauthenAffectionsWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//车型热度-热门车型
+export function getCartypeWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getCartypeWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+//车型热度-热赞/热议/热转车型
+export function getTopCarseriesObj(params) {
+    let obj =  Object.assign({action: 'getTopCarseriesObj', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//微博传播裂变
+export function getDiffuseZhuTi(params) {
+    let obj =  Object.assign({action: 'getDiffuseZhuTi', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
 }

src/views/WeiboDetails/modelPopularity/index.vue

@@ -8,39 +8,173 @@
 -->
 
 <template>
-    <div class="mp-outter">
-        <v-label-div title="车型热度">
-           <div>
-              <v-tab-group :btns="['热门', '热赞', '热议','热转']"></v-tab-group>
-          </div>
-        </v-label-div>
-        <div class="mp-inner">
-            <v-ranking-mpth :num="1" label="奥迪A4" val="594614" :lineShow="false"></v-ranking-mpth>
-            <v-ranking-mpth :num="2" label="奥迪A1" val="594614"></v-ranking-mpth>
-            <v-ranking-mpth :num="3" label="奥迪S3" val="594614"></v-ranking-mpth>
-            <v-ranking-mpth :num="4" label="奥迪A6" val="594614"></v-ranking-mpth>
-            <v-ranking-mpth :num="5" label="奥迪S5" val="594614"></v-ranking-mpth>
-        </div>
+  <div class="mp-outter">
+    <v-label-div title="车型热度">
+      <div>
+        <v-tab-group
+          :btns="['热门', '热赞', '热议', '热转']"
+          @change="handlerTab"
+        ></v-tab-group>
+      </div>
+    </v-label-div>
+    <div class="mp-inner">
+      <v-ranking-mpth
+        v-for="(item, index) in labelArr"
+        :key="index"
+        :num="index + 1"
+        :label="item.key"
+        :val="item.value"
+      ></v-ranking-mpth>
     </div>
+  </div>
 </template>
 
 <script>
-import vRankingMpth from "./v-ranking-mpth"
+import { getCartypeWeiBo0528 } from "@/api/WeiboDetails/index.js";
+import { getTopCarseriesObj } from "@/api/WeiboDetails/index.js";
+import vRankingMpth from "./v-ranking-mpth";
 export default {
-    name: "modelPopularity",
-    components: {
-        vRankingMpth
-    }
-}
+  name: "modelPopularity",
+  data() {
+    return {
+      form: {
+        sBrand: "",
+        token: "",
+        iType: "",
+      },
+      labelArr: [],
+      hotSeries: [],
+      hotTypes: [],
+      hotComs: [],
+      hotTrans: [],
+    };
+  },
+  components: {
+    vRankingMpth,
+  },
+
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+
+  methods: {
+    getData() {
+      Promise.all([
+        this.getHotSeries(),
+        this.getHotTypes(),
+        this.getHotComs(),
+        this.getHotTrans(),
+      ]).then(() => {
+        // 什么也不执行
+        this.handlerTab(0);
+      });
+    },
+    //热门
+    getHotSeries() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = "";
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getCartypeWeiBo0528(obj)
+          .then((res) => {
+            let data = res.data || {};
+            this.hotSeries = this.toArr(data);
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    //热赞
+    getHotTypes() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = 1; //改变参数写在里面
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getTopCarseriesObj(obj)
+          .then((res) => {
+            this.hotTypes = res.data;
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    //热议
+    getHotComs() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = 2;
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getTopCarseriesObj(obj)
+          .then((res) => {
+            this.hotComs = res.data;
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    //热转
+    getHotTrans() {
+      return new Promise((resolve, reject) => {
+        this.form.iType = 3;
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getTopCarseriesObj(obj)
+          .then((res) => {
+            this.hotTrans = res.data;
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          key: key,
+          value: obj[key],
+        };
+        arr.push(o);
+      }
+      return arr;
+    },
+    // 切换数据
+    handlerTab(n) {
+      switch (n) {
+        case 0:
+          this.labelArr = this.hotSeries;
+          break;
+        case 1:
+          this.labelArr = this.hotTypes;
+          break;
+        case 2:
+          this.labelArr = this.hotComs;
+          break;
+        case 3:
+          this.labelArr = this.hotTrans;
+          break;
+        default:
+          this.labelArr = this.hotSeries;
+          break;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .mp-outter {
-    width: 460px;
-    height: 460px;
-    border: 2px solid #0f2a4d;
-    .mp-inner {
-        padding: 0px 16px 16px 16px;
-    }
+  width: 460px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .mp-inner {
+    padding: 0px 16px 16px 16px;
+  }
 }
 </style>

src/views/WeiboDetails/negativeOpinionKOL/index.vue

@@ -11,8 +11,10 @@
         <v-label-div title="负面观点KOL">
         </v-label-div>
         <div class="pv-inner">
-            <div class="pv-item" v-for="(item,index) in list" :key="index">
-                <div class="dm"></div>
+            <div class="pv-item" v-for="(item,index) in ds" :key="index">
+                <div class="dm">
+                    <img class="dm-m1" :src="item.url"/>
+                </div>
                 <div class="d-f">
                     <div class="d1">{{item.title}}</div>
                     <div class="d2">粉丝数：<span class="d2-s1">{{item.fans}}</span></div>
@@ -23,37 +25,45 @@
 </template>
 
 <script>
+import {getCoreDiffuseWeiBo0528} from "@/api/WeiboDetails"
 export default {
     name: "negativeOpinionKOL",
     data() {
         return {
-            list: [
-                {
-                    title: "汽车之家",
-                    fans: '1106w'
-                },
-                {
-                    title: "爱卡汽车",
-                    fans: '1326w'
-                },
-                {
-                    title: "新浪汽车",
-                    fans: '1326w'
-                },
-                {
-                    title: "车评人",
-                    fans: '1326w'
-                },
-                {
-                    title: "汽车专家",
-                    fans: '1326w'
-                },
-                 {
-                    title: "萝卜报告",
-                    fans: '1326w'
-                }
-            ]
+            ds:[],
+            form: {
+                sBrand: "",
+                sQingGan: "2",
+                iSize: 6,
+                token: "",
+            },
         }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || this.brand;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getCoreDiffuseWeiBo0528(obj).then(res => {
+                let data = res.data || [];
+                //用户名: data._sourse.user_author
+                //粉丝数: data._sourse.weibofans
+                //头像: data._sourse.profileimgurl
+                let arr = [];
+                data.forEach((ele) => {
+                    let o={
+                        title: ele._source.user_author,
+                        fans: ele._source.weibofans,
+                        url: ele._source.profileimgurl
+                    };
+                    arr.push(o);
+                })
+                this.ds = arr;
+            });
+        },
     }
 };
 </script>
@@ -90,6 +100,11 @@ export default {
                 top: 0px;
                 background-color: #fff;
                 z-index: 10;
+                .dm-m1 {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 100%;
+                }
             }
             .d-f {
                 position: absolute;

src/views/WeiboDetails/positiveViewKOL/index.vue

@@ -7,113 +7,129 @@
  * @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
 -->
 <template>
-    <div class="pv-outter">
-        <v-label-div title="正面观点KOL">
-        </v-label-div>
-        <div class="pv-inner">
-            <div class="pv-item" v-for="(item,index) in list" :key="index">
-                <div class="dm"></div>
-                <div class="d-f">
-                    <div class="d1">{{item.title}}</div>
-                    <div class="d2">粉丝数：<span class="d2-s1">{{item.fans}}</span></div>
-                </div>
-            </div>
+  <div class="pv-outter">
+    <v-label-div title="正面观点KOL"> </v-label-div>
+    <div class="pv-inner">
+      <div class="pv-item" v-for="(item, index) in ds" :key="index">
+        <div class="dm">
+          <img class="dm-m1" :src="item.url"/>
         </div>
+        <div class="d-f">
+          <div class="d1">{{ item.title }}</div>
+          <div class="d2">
+            粉丝数：<span class="d2-s1">{{ item.fans }}</span>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
+import { getCoreDiffuseWeiBo0528 } from "@/api/WeiboDetails";
 export default {
-    name: "positiveViewKOL",
-    data() {
-        return {
-            list: [
-                {
-                    title: "新浪汽车",
-                    fans: '1106w'
-                },
-                {
-                    title: "易车",
-                    fans: '1326w'
-                },
-                {
-                    title: "主编说车",
-                    fans: '1326w'
-                },
-                {
-                    title: "我是评车人",
-                    fans: '1326w'
-                },
-                {
-                    title: "汽车老手",
-                    fans: '1326w'
-                },
-                 {
-                    title: "艾兰汽车",
-                    fans: '1326w'
-                }
-            ]
-        }
-    }
+  name: "positiveViewKOL",
+  data() {
+    return {
+      ds: [],
+      form: {
+        sBrand: "",
+        sQingGan: "1",
+        iSize: 6,
+        token: "",
+      },
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getCoreDiffuseWeiBo0528(obj).then((res) => {
+        let data = res.data || [];
+        //用户名: data._sourse.user_author
+        //粉丝数: data._sourse.weibofans
+        //头像: data._sourse.profileimgurl
+        let arr = [];
+        data.forEach((ele) => {
+          let o = {
+            title: ele._source.user_author,
+            fans: ele._source.weibofans,
+            url: ele._source.profileimgurl,
+          };
+          arr.push(o);
+        });
+        this.ds = arr;
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .pv-outter {
-    width: 936px;
-    height: 246px;
-    border: 2px solid #0f2a4d;
-    .pv-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        padding: 0px 0px 16px 16px;
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        .pv-item {
-            width: 285px;
-            height: 72px;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            position: relative;
-            margin-right: 16px;
-            margin-top: 16px;
-            .dm {
-                position: absolute;
-                width: 72px;
-                height: 72px;
-                border-radius: 72px;
-                border: 1px solid #ccc;
-                left: 0px;
-                top: 0px;
-                background-color: #fff;
-                z-index: 10;
-            }
-            .d-f {
-                position: absolute;
-                width: 249px;
-                height: 64px;
-                left: 36px;
-                padding-left: 65px;
-                background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
-                .d1 {
-                    font-size: 14px;
-                    color: #fff;
-                    font-weight: 500;
-                    margin-top: 10px;
-                }
-                .d2 {
-                    color: #70869a;
-                    font-size: 12px;
-                    .d2-s1 {
-                        font-size: 12px;
-                        font-family: Bebas;
-                        color: #f49847;
-                    }
-                }
-            }
+  width: 936px;
+  height: 246px;
+  border: 2px solid #0f2a4d;
+  .pv-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    padding: 0px 0px 16px 16px;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    .pv-item {
+      width: 285px;
+      height: 72px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      position: relative;
+      margin-right: 16px;
+      margin-top: 16px;
+      .dm {
+        position: absolute;
+        width: 72px;
+        height: 72px;
+        border-radius: 72px;
+        border: 1px solid #ccc;
+        left: 0px;
+        top: 0px;
+        background-color: #fff;
+        z-index: 10;
+        .dm-m1 {
+            width: 100%;
+            height: 100%;
+            border-radius: 100%;
+        }
+      }
+      .d-f {
+        position: absolute;
+        width: 249px;
+        height: 64px;
+        left: 36px;
+        padding-left: 65px;
+        background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
+        .d1 {
+          font-size: 14px;
+          color: #fff;
+          font-weight: 500;
+          margin-top: 10px;
+        }
+        .d2 {
+          color: #70869a;
+          font-size: 12px;
+          .d2-s1 {
+            font-size: 12px;
+            font-family: Bebas;
+            color: #f49847;
+          }
         }
+      }
     }
+  }
 }
 </style>

src/views/WeiboDetails/weiboWordCloud/index.vue

@@ -7,39 +7,107 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue
 -->
 <template>
-    <div class="wwc-outter">
-        <v-label-div title="词云分布">
-           <div>
-              <v-tab-group :btns="['正面', '负面']"></v-tab-group>
-          </div>
-        </v-label-div>
-        <div class="wwc-inner">
-           <v-echarts :opt="opt"></v-echarts> 
-        </div>
+  <div class="wwc-outter" v-loading="load">
+    <v-label-div title="词云分布">
+      <div>
+        <v-tab-group
+          :btns="['正面', '负面']"
+          @change="handlerTab"
+        ></v-tab-group>
+      </div>
+    </v-label-div>
+    <div class="wwc-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getNegative } from "@/api/WeiboDetails";
+import { getPositive } from "@/api/WeiboDetails";
+import createWordCloud from "@/utils/gol/bubbleWord";
+//import createOpt from "./opt";
 export default {
-    name: "weiboWordCloud",
-    data() {
-        return {
-            opt: createOpt()
-        }
-    }
-}
+  name: "weiboWordCloud",
+  data() {
+    return {
+      opt: {},
+      load: false,
+      positiveData: {},
+      negativeData: {},
+      form: {
+        sBrand: "",
+        token: "",
+      },
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.load = true;
+      Promise.all([this.getH(),this.getF()]).then(() => {
+          // 什么也不执行
+          this.handlerTab(0)
+          this.load = false;
+      })
+    },
+    // 正面
+    getH() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getPositive(obj)
+          .then((res) => {
+            this.positiveData = res.data || {};
+            resolve(res);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 负面
+    getF() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getNegative(obj).then((res) => {
+          this.negativeData = res.data || {};
+          resolve(res)
+        }).catch(() => {
+            reject(false);
+        });
+      });
+    },
+    // 切换数据
+    handlerTab(n) {
+      switch (n) {
+        case 0:
+          this.opt = createWordCloud(this.positiveData);
+          break;
+        case 1:
+          this.opt = createWordCloud(this.negativeData);
+          break;
+        default:
+          this.opt = createWordCloud(this.positiveData);
+          break;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.wwc-outter{
-    width: 460px;
-    height: 460px;
-    border: 2px solid #0f2a4d;
-    margin-left: 16px;
-    .wwc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+.wwc-outter {
+  width: 460px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .wwc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>