cxw-010203

src/api/BrandInsight/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-25 15:38:59
- * @LastEditTime: 2021-10-26 15:18:57
+ * @LastEditTime: 2021-10-26 16:27:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/BrandInsight/index.js

src/components/v-echars/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 19:12:07
- * @LastEditTime: 2021-10-26 11:40:23
+ * @LastEditTime: 2021-10-26 17:54:34
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edi
  * @FilePath: /data-show/src/components/v-echars/index.vue

src/lycomponents/iHeader/index.vue

@@ -24,7 +24,7 @@
             </a-dropdown>
             <span class="iH-left-s1">菜单</span>
 
-            <a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="sTimeType" @change="handleChange">
+            <a-select :default-value="1" :size="$vuiSize" class="selHead" v-model="sTimeType" @change="handleChange">
                 <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                     {{ item.value }}
                 </a-select-option>
@@ -34,13 +34,13 @@
             </a-range-picker>
         </div>
         <div class="iH-center">
-            <img src="../../assets/images/Index/img_toubuyi.png" width="100%" height="100%" />
+            <img src="../../assets/images/Index/img_toubuyi.png" width="100%"/>
         </div>
         <div class="iH-right">
             <span class="s1">{{ clock }}</span>
             <span class="s2">{{ sClock }}</span>
             <span class="s2">{{ week }}</span>
-            <img class="m1" src="../../assets/images/Index/ic_ry.png" width="24px" height="24px" />
+            <img class="m1" src="../../assets/images/Index/ic_ry.png"/>
             <span class="s3">{{getUser.UserName}}</span>
             <a-dropdown placement="bottomRight">
                 <a class="ant-dropdown-link">
@@ -182,18 +182,20 @@ export default {
 <style lang="less" scoped>
 .iH-outter {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     width: 100%;
-    height: 90px;
-    background: url("../../assets/images/Index/img_toubuer.png");
+    height: auto;
+    background-image: url("../../assets/images/Index/img_toubuer.png");
+    background-repeat: no-repeat;
+    background-size: cover;
     .iH-left {
         display: flex;
-        width: 572px;
-        height: 60px;
-        margin-left: 22px;
+        height: 100%;
+        width: 430px;
+        margin-left: 16px;
         justify-content: flex-start;
-        align-items: center;
-        flex-shrink: 0;
+        margin-top: 18px;
+        width: 400px;
         .iH-left-img1 {
             width: 24px;
             height: 24px;
@@ -205,26 +207,20 @@ export default {
             font-weight: bold;
             color: #ffffff;
             margin-left: 8px;
+             margin-top: 2px;
         }
     }
     .iH-center {
-        position: absolute;
         width: 606px;
-        height: 80px;
-        top: 0px;
-        left: 50%;
-        transform: translate(-50%, 0);
+        height: auto;
     }
     .iH-right {
-        position: absolute;
         display: flex;
-        width: 436px;
-        height: 60px;
+        height: 100%;
+        width: 430px;
         justify-content: flex-start;
-        align-items: center;
-        top: 0px;
-        right: 19px;
-        flex-shrink: 0;
+        margin-right: 16px;
+        margin-top: 18px;
         .s1 {
             display: inline-block;
             font-size: 16px;
@@ -244,8 +240,10 @@ export default {
         }
         .m1 {
             display: inline-block;
-            margin-left: 74px;
+            margin-left: 60px;
             margin-right: 8px;
+            width: 24px;
+            height: 24px;
         }
     }
 }
@@ -254,7 +252,12 @@ export default {
     margin-left: 11px;
     /deep/ .anticon svg {
         font-size: 20px !important;
-        margin-top: 5px;
+        margin-top: 0px;
     }
 }
+.selHead {
+    width: 120px; 
+    margin-left: 40px; 
+    margin-right: 8px;
+}
 </style>

src/lycomponents/iHeaderMa/index.vue

@@ -24,7 +24,7 @@
             </a-dropdown>
             <span class="iH-left-s1">菜单</span>
 
-            <a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="selVal" @change="handlerSelect">
+            <a-select :default-value="1" :size="$vuiSize" class="selHead" v-model="selVal" @change="handlerSelect">
                 <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                     {{ item.key }}
                 </a-select-option>
@@ -38,7 +38,7 @@
             <span class="s1">{{ clock }}</span>
             <span class="s2">{{ sClock }}</span>
             <span class="s2">{{ week }}</span>
-            <img class="m1" src="../../assets/images/Index/ic_ry.png" width="24px" height="24px" />
+            <img class="m1" src="../../assets/images/Index/ic_ry.png"/>
             <span class="s3">{{getUser.UserName}}</span>
             <a-dropdown placement="bottomRight">
                 <a class="ant-dropdown-link">
@@ -177,18 +177,19 @@ export default {
 <style lang="less" scoped>
 .iH-outter {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     width: 100%;
-    height: 90px;
-    background: url("../../assets/images/Index/img_toubuer.png");
+    height: auto;
+    background-image: url("../../assets/images/Index/img_toubuer.png");
+    background-repeat: no-repeat;
+    background-size: cover;
     .iH-left {
         display: flex;
-        width: 572px;
-        height: 60px;
-        margin-left: 22px;
+        height: 100%;
+        margin-left: 16px;
         justify-content: flex-start;
-        align-items: center;
-        flex-shrink: 0;
+        margin-top: 18px;
+        width: 430px;
         .iH-left-img1 {
             width: 24px;
             height: 24px;
@@ -200,26 +201,20 @@ export default {
             font-weight: bold;
             color: #ffffff;
             margin-left: 8px;
+            margin-top: 2px;
         }
     }
     .iH-center {
-        position: absolute;
         width: 606px;
-        height: 80px;
-        top: 0px;
-        left: 50%;
-        transform: translate(-50%, 0);
+        height: auto;
     }
     .iH-right {
-        position: absolute;
         display: flex;
-        width: 436px;
-        height: 60px;
+        width: 430px;
+        height: 100%;
         justify-content: flex-start;
-        align-items: center;
-        top: 0px;
-        right: 19px;
-        flex-shrink: 0;
+        margin-right: 16px;
+        margin-top: 18px;
         .s1 {
             display: inline-block;
             font-size: 16px;
@@ -239,8 +234,10 @@ export default {
         }
         .m1 {
             display: inline-block;
-            margin-left: 74px;
+            margin-left: 60px;
             margin-right: 8px;
+            width: 24px;
+            height: 24px;
         }
     }
 }
@@ -249,7 +246,12 @@ export default {
     margin-left: 11px;
     /deep/ .anticon svg {
         font-size: 20px !important;
-        margin-top: 5px;
+        margin-top: 0px;
     }
 }
+.selHead {
+    width: 120px; 
+    margin-left: 40px; 
+    margin-right: 8px;
+}
 </style>

src/request/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-13 09:28:02
- * @LastEditTime: 2021-10-23 09:35:20
+ * @LastEditTime: 2021-10-26 16:36:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/request/index.js

src/views/BrandInsight/forumHotTopicDirection/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 16:48:36
- * @LastEditTime: 2021-10-26 14:33:20
+ * @LastEditTime: 2021-10-26 16:30:34
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/forumHotTopicDirection/index.vue
@@ -61,7 +61,6 @@ export default {
                 let groupedArray = this.group(data, 5);
                 this.d1 = groupedArray[0];
                 this.d2 = groupedArray[1];
-                console.log(this.d1)
             });
         },
     },

src/views/BrandInsight/popularEvents/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 11:06:58
- * @LastEditTime: 2021-10-25 19:06:12
+ * @LastEditTime: 2021-10-26 17:55:46
  * @LastEditors: Please set LastEditors
  * @Description: 热门事件
  * @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
 -->
 <template>
-    <div class="pe-outter">
+    <div class="pe-outter" v-loading="load">
         <v-label-div title="热点事件" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
         <div class="pe-inner">
             <v-echarts :opt="opt"></v-echarts>
@@ -23,11 +23,12 @@ export default {
     props: ["brand"],
     data() {
         return {
+            load: false,
             form: {
                 sBrand: "",
                 token: "",
             },
-            opt: createOpt(),
+            opt:{},
         };
     },
      created() {
@@ -38,8 +39,21 @@ export default {
     methods: {
         getData() {
             let obj = Object.assign({}, this.getCommTime, this.form);
+            this.load = true;
             getHotEventsType(obj).then((res) => {
-                console.log(res);
+                let data = res.data;
+                let arr = data.Data || [];
+                let type = data.Type || {};
+                let obj = {}
+                Object.keys(type).forEach(ele => {
+                    obj[ele] = []
+                })
+                arr.forEach(ele => {
+                    let a = [ele.minSourcetime, ele.events_count*1, ele.events_influence, ele.events_brand, ele.events_title, ele.events_type, ele.maxSourcetime, ele.summary ]
+                   obj[ele.events_type].push(a);
+                })
+                this.opt = createOpt(obj);
+                this.load = false;
             });
         },
     },

src/views/BrandInsight/popularEvents/opt.js

@@ -1,21 +1,38 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 11:16:44
- * @LastEditTime: 2021-10-12 13:19:28
+ * @LastEditTime: 2021-10-26 17:48:58
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/popularEvents/opt.js
  */
-import * as echarts from "echarts";
-const data = [
-    [['24:00',37.5,100000000,'A7','车展'],['16:00',11.46,100000000,'A5','车展'],['12:00',16,100000000,'A4','车展'],['08:00',16.92,100000000,'A3','车展'],['04:00',22.5,100000000,'A2','车展'],['00:00',11.11,100000000,'A1','车展']],
-    [['24:00',48.21,150000000,'B7','新车上市'],['20:00',50,150000000,'B6','新车上市'],['16:00',67.7,150000000,'B5','新车上市'],['12:00',31,150000000,'B4','新车上市'],['08:00',43.85,150000000,'B3','新车上市'],['04:00',39.17,150000000,'B2','新车上市'],['00:00',46.67,150000000,'B1','新车上市']],
-    [['24:00',10.71,200000000,'C7','3-5年经验'],['20:00',50,200000000,'C6','3-5年经验'],['16:00',14.58,200000000,'C5','3-5年经验'],['12:00',37,200000000,'C4','3-5年经验'],['08:00',24.62,200000000,'C3','3-5年经验'],['04:00',28.33,200000000,'C2','3-5年经验'],['00:00',31.11,200000000,'C1','3-5年经验']],
-    [['24:00',3.57,250000000,'D7','5-7年经验'],['16:00',5.21,250000000,'D5','5-7年经验'],['12:00',12,250000000,'D4','5-7年经验'],['08:00',12.31,250000000,'D3','5-7年经验'],['04:00',6.67,250000000,'D2','5-7年经验'],['00:00',11.11,250000000,'D1','5-7年经验']],
-    [['12:00',4,300000000,'E4','7-10年经验'],['08:00',0.77,300000000,'E3','7-10年经验'],['04:00',0.83,300000000,'E2','7-10年经验']],
-    [['16:00',1.04,350000000,'F5','10年以上经验'],['08:00',1.54,350000000,'F3','10年以上经验'],['04:00',2.5,350000000,'F2','10年以上经验']],
-];
-export default function createOpt() {
+// import * as echarts from "echarts";
+// const data = [
+//     [['24:00',37.5,100000000,'A7','车展'],['16:00',11.46,100000000,'A5','车展'],['12:00',16,100000000,'A4','车展'],['08:00',16.92,100000000,'A3','车展'],['04:00',22.5,100000000,'A2','车展'],['00:00',11.11,100000000,'A1','车展']],
+//     [['24:00',48.21,150000000,'B7','新车上市'],['20:00',50,150000000,'B6','新车上市'],['16:00',67.7,150000000,'B5','新车上市'],['12:00',31,150000000,'B4','新车上市'],['08:00',43.85,150000000,'B3','新车上市'],['04:00',39.17,150000000,'B2','新车上市'],['00:00',46.67,150000000,'B1','新车上市']],
+//     [['24:00',10.71,200000000,'C7','3-5年经验'],['20:00',50,200000000,'C6','3-5年经验'],['16:00',14.58,200000000,'C5','3-5年经验'],['12:00',37,200000000,'C4','3-5年经验'],['08:00',24.62,200000000,'C3','3-5年经验'],['04:00',28.33,200000000,'C2','3-5年经验'],['00:00',31.11,200000000,'C1','3-5年经验']],
+//     [['24:00',3.57,250000000,'D7','5-7年经验'],['16:00',5.21,250000000,'D5','5-7年经验'],['12:00',12,250000000,'D4','5-7年经验'],['08:00',12.31,250000000,'D3','5-7年经验'],['04:00',6.67,250000000,'D2','5-7年经验'],['00:00',11.11,250000000,'D1','5-7年经验']],
+//     [['12:00',4,300000000,'E4','7-10年经验'],['08:00',0.77,300000000,'E3','7-10年经验'],['04:00',0.83,300000000,'E2','7-10年经验']],
+//     [['16:00',1.04,350000000,'F5','10年以上经验'],['08:00',1.54,350000000,'F3','10年以上经验'],['04:00',2.5,350000000,'F2','10年以上经验']],
+// ];
+function createData(obj = {}) {
+    let arr = [];
+    for (let key in obj) {
+        let o = {
+            name: key,
+            data: obj[key],
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            }
+        }
+        arr.push(o)
+    }
+    return arr
+}
+export default function createOpt(ds = {}) {
+    const data = createData(ds)
+    console.log(data)
     return {
         title: {
             show: false,
@@ -27,8 +44,7 @@ export default function createOpt() {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
                 color: '#fff'
-            },
-            data: ['车展', '新车上市','3-5年经验','5-7年经验','7-10年经验','10年以上经验']
+            }
         },
         grid: {
             left: '3%',
@@ -45,7 +61,11 @@ export default function createOpt() {
             textStyle: {
                 color: "#fff", //设置文字颜色
             },
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: (p) => {
+                let data = p.data;
+                return `<span>${data[5]}-${data[3]}</span><br><span>${data[4]}</span><br><span>时间：${data[0]} ~ ${data[6]}</span><br/><span>影响力：${data[2]}</span>`;
+            }
         },
         xAxis: {
             type: 'category',
@@ -59,7 +79,12 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            axisLabel : {
+                formatter: (value) => {
+                    let str = value.substring(10,16)
+                    return str;
+                }
+            },
         },
         yAxis: {
             type: 'value',
@@ -76,56 +101,7 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
-             
-        {
-            name: '车展',
-            data: data[0],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
-            },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(251, 118, 123, 0.5)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(251, 118, 123)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(251, 118, 123)'
-                    }])
-                }
-            }
-        }, 
-         
-        {
-            name: '新车上市',
-            data: data[1],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
-            },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(237, 125, 49, 0.5)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(237, 125, 49)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(237, 125, 49)'
-                    }])
-                }
-            }
-        },
-         
-         
-        ]
+        series: data
     };
 
 

src/views/Index/dynamicNumber/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 14:25:05
- * @LastEditTime: 2021-10-26 12:19:13
+ * @LastEditTime: 2021-10-26 18:38:12
  * @LastEditors: Please set LastEditors
  * @Description: 大数据统计gif
  * @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
@@ -14,31 +14,31 @@
                 <countTo :startVal='form.app-100 >= 0 ? form.app-100 : 0' :endVal='form.app' :duration='3000'></countTo>
             </span>
         </div>
-        <div class="d1" :style="{top: '340px', left: '0px'}">
+        <div class="d1 dd1">
             <span class="s1">其他</span>
             <span class="s2">
                 <countTo :startVal='form.other-100 >= 0 ? form.other-100 : 0' :endVal='form.other' :duration='3000'></countTo>
             </span>
         </div>
-        <div class="d1" :style="{top: '60px', left: '426px'}">
+        <div class="d1 dd2">
             <span class="s1">微信</span>
             <span class="s2">
                 <countTo :startVal='form.wecat-100 >= 0 ? form.wecat-100 : 0' :endVal='form.wecat' :duration='3000'></countTo>
             </span>
         </div>
-        <div class="d2" :style="{top: '220px', left: '582px'}">
+        <div class="d2 dd3">
             <span class="s1">
                 <countTo :startVal='form.forum-100 >= 0 ? form.forum-100 : 0' :endVal='form.forum' :duration='3000'></countTo>
             </span>
             <span class="s2">论坛</span>
         </div>
-        <div class="d2" :style="{top: '340px', left: '582px'}">
+        <div class="d2 dd4">
             <span class="s1">
                 <countTo :startVal='form.weipo-100 >= 0 ? form.weipo-100 : 0' :endVal='form.weipo' :duration='3000'></countTo>
             </span>
             <span class="s2">微博</span>
         </div>
-        <div class="d2" :style="{top: '420px', left: '246px'}">
+        <div class="d2 dd5">
             <span class="s1">
                 <countTo :startVal='form.news-100 >= 0 ? form.news-100 : 0' :endVal='form.news' :duration='3000'></countTo>
             </span>
@@ -235,4 +235,24 @@ export default {
         }
     }
 }
+.dd1 {
+    top: 360px !important;
+    left: 0px !important;
+}
+.dd2 {
+    top: 60px !important;
+    left: 456px !important;
+}
+.dd3 {
+    top: 220px !important;
+    left: 622px !important;
+}
+.dd4 {
+    top: 360px !important;
+    left: 622px !important;
+}
+.dd5 {
+    top: 460px !important;
+    left: 250px !important;
+}
 </style>