cxw-010203

src/api/home/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-20 16:17:39
- * @LastEditTime: 2021-10-21 12:04:50
+ * @LastEditTime: 2021-10-21 15:27:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/home/index.js
@@ -85,4 +85,34 @@ export function getWeiYiCountHome0528(params) {
         method: 'get',
         params: obj
     })
+}
+
+// 首页_晴雨表
+export function getAffections0528(params) {
+    let obj =  Object.assign({action: 'getAffections0528',sType: 'Home'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+
+// 首页_晴雨表-负面等级
+export function getCrisisTime(params) {
+    let obj =  Object.assign({action: 'getCrisisTime',sType: 'Home'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+
+// 首页_传播声量TOP10
+export function getHomeBrandSourceType0528(params) {
+    let obj =  Object.assign({action: 'getHomeBrandSourceType0528',sType: 'Home'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
 }

src/views/Index/barometer/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 11:28:39
- * @LastEditTime: 2021-10-12 10:42:35
+ * @LastEditTime: 2021-10-21 15:30:40
  * @LastEditors: Please set LastEditors
  * @Description: 晴雨表
  * @FilePath: /data-show/src/views/Index/barometer/index.vue
@@ -10,7 +10,7 @@
   <div class="bm-outter">
       <v-label-div title="晴雨表">
           <div>
-              <v-tab-group :btns="['正负调性', '负面等级']"></v-tab-group>
+              <v-tab-group :btns="['正负调性', '负面等级']" @change="handlerChange"></v-tab-group>
           </div>
       </v-label-div>
      <div class="bm-bd">
@@ -21,12 +21,56 @@
 
 <script>
 import createOpt from "./opt"
+import {getAffections0528, getCrisisTime} from "@/api/home"
 export default {
   name: "barometer",
   data() {
       return {
-          opt: createOpt()
+          opt: {}
       }
+  },
+  created() {
+    this.getData1()
+  },
+  methods: {
+    // 选择后台的数据
+    handlerChange(n) {
+      if(n === 0) {
+        this.getData1()
+      } else {
+        this.getData2()
+      }
+    },
+    // 获取正负调性
+    getData1() {
+      getAffections0528(this.getCommTime).then(res => {
+        let data = res.data;
+        let dx = [];
+        let ds = [];
+        data.forEach(ele => {
+          let Time = ele.Time;
+          let Data = ele.Data;
+          dx.push(Time);
+          ds.push(Data);
+        });
+        this.opt = createOpt(dx, ds)
+      })
+    },
+    // 获取负面等级
+    getData2() {
+      getCrisisTime(this.getCommTime).then(res => {
+        let data = res.data;
+        let dx = [];
+        let ds = [];
+        data.forEach(ele => {
+          let Time = ele.Time;
+          let Data = ele.Data;
+          dx.push(Time);
+          ds.push(Data);
+        });
+        this.opt = createOpt(dx, ds)
+      })
+    }
   }
 };
 </script>

src/views/Index/barometer/opt.js

@@ -2,12 +2,43 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:38:06
- * @LastEditTime: 2021-10-11 17:56:05
+ * @LastEditTime: 2021-10-21 15:20:11
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/barometer/opt.js
  */
-export default function createOpt() {
+function createData(ds = []) {
+    let arr = [];
+    for (let i = 0; i < ds.length; i++) {
+        let arr1 = ds[i];
+        for (let j = 0; j < arr1.length; j++) {
+            let n = arr.findIndex(ele => {
+                return ele.name === arr1[j].key;
+            })
+            if (n === -1) {
+                let obj =
+                {
+                    name: arr1[j].key,
+                    type: 'line',
+                    symbol: 'none',
+                    areaStyle: {
+                        opacity: 0.4
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [arr1[j].value]
+                }
+                arr.push(obj)
+            } else {
+                arr[n].data.push(arr1[j].value)
+            }
+        }
+    }
+    return arr;
+}
+export default function createOpt(dx = [],ds = []) {
+    const data = createData(ds);
     return {
         grid: {
             left: '3%',
@@ -16,6 +47,14 @@ export default function createOpt() {
             top: '22%',
             containLabel: true
         },
+        dataZoom: [{
+            type: 'inside', //1平移 缩放
+            throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
+            minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
+            start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
+            end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
+            zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
+          }],
         tooltip: {
             trigger: "axis",
             backgroundColor: "#08182F",
@@ -45,7 +84,7 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -62,47 +101,6 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
+        series: data
-            {
-                name: 'Email',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [120, 132, 101, 134, 90]
-            },
-            {
-                name: 'Union Ads',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [220, 182, 191, 234, 290]
-            },
-            {
-                name: 'Video Ads',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [150, 232, 201, 154, 190]
-            },
-
-        ]
     }
 }

src/views/Index/spreadTheSound/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 10:53:21
- * @LastEditTime: 2021-10-12 10:44:01
+ * @LastEditTime: 2021-10-21 14:53:06
  * @LastEditors: Please set LastEditors
  * @Description: 传播声量TOP10
  * @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
@@ -10,24 +10,59 @@
   <div class="st-outter">
       <v-label-div title="传播声量TOP10">
           <div>
-              <v-tab-group :btns="['品牌', '车型']"></v-tab-group>
+              <v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
           </div>
       </v-label-div>
       <div class="st-bd">
           <v-echarts :opt="opt"></v-echarts>
-          <v-pagination :style="{position: 'absolute', right: '2px', bottom: '2px'}"></v-pagination>
+          <v-pagination :data="pdata" :style="{position: 'absolute', right: '2px', bottom: '2px'}" @change="handlerData"></v-pagination>
       </div>
   </div>
 </template>
 
 <script>
 import createOpt from "./opt"
+import {getHomeBrandSourceType0528} from "@/api/home"
 export default {
   name: "spread-the-sound",
   data() {
       return {
-         opt: createOpt() 
+        form: {
+          sQueryType: 1
+        },
+         opt: {},
+         pdata: []
       }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    // 切换选择后台数据
+    handlerChange(n) {
+      this.form.sQueryType = n + 1;
+      this.getData()
+    },
+    // 获取数据
+    getData() {
+      let obj = Object.assign({}, this.getCommTime, this.form);
+      getHomeBrandSourceType0528(obj).then(res => {
+        let data = res.data;
+        this.pdata = data;
+      })
+    },
+    // 分页显示数据
+    handlerData(arr) {
+      let dx = [];
+      let ds = [];
+      arr.forEach(ele => {
+        let key = ele.key;
+        let value = ele.value;
+        dx.push(key);
+        ds.push(value);
+      })
+       this.opt = createOpt(dx,ds);
+    }
   }
 };
 </script>
@@ -39,7 +74,7 @@ export default {
   border: 2px solid #0f2a4d;
   margin-top: 16px;
   .st-bd {
-      position: relative;
+    position: relative;
     width: 100%;
     height: calc(100% - 48px);
   }

src/views/Index/spreadTheSound/opt.js

@@ -1,117 +1,95 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:01:19
- * @LastEditTime: 2021-10-09 16:52:04
+ * @LastEditTime: 2021-10-21 14:55:41
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-export default function createOpt() {
+function createData(ds = []) {
-    return {
+  let arr = [];
-        grid: {
+  for (let i = 0; i < ds.length; i++) {
-            left: '3%',
+    let arr1 = ds[i];
-            right: '6%',
+    for (let j = 0; j < arr1.length; j++) {
-            bottom: '3%',
+      let n = arr.findIndex(ele => {
-            top: '22%',
+        return ele.name === arr1[j].key;
-            containLabel: true
+      })
-        },
+      if(n === -1) {
-        tooltip: {
+        let obj =
-            trigger: "axis",
+        {
-            backgroundColor: "#08182F",
+          name: arr1[j].key,
-            color: "#fff",
+          type: 'bar',
-            borderColor: "#3373CC",
+          stack: 'total',
-            textStyle: {
+          barWidth: 24,
-                color: "#fff", //设置文字颜色
+          emphasis: {
-            },
+            focus: 'series'
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+          },
-        },
+          data: [arr1[j].value]
-        legend: {
+        }
-            textStyle: { //图例文字的样式
+        arr.push(obj)
-                color: '#fff'
+      } else {
-            },
+        arr[n].data.push(arr1[j].value)
-            y: 'top',
+      }
-            x: 0
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 40,
+      bottom: 10,
+      top: 60,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff'
+      },
+      y: 'top',
+      x: 0
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
         },
-        xAxis: {
+      },
-            type: 'category',
+      data: dx
-            axisTick: {
+    },
-                show: false,
+    yAxis: {
-            },
+      type: 'value',
-            axisLine: {
+      axisLine: {
-                show: false,
+        show: false,
-                lineStyle: {
+        lineStyle: {
-                    color: "#fff",
+          color: "#fff",
-                },
-            },
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
         },
-        yAxis: {
+      },
-            type: 'value',
+      splitLine: {
-            axisLine: {
+        lineStyle: {
-                show: false,
+          type: "dashed", // y轴分割线类型
-                lineStyle: {
+          color: "#012b4b",
-                    color: "#fff",
-                },
-            },
-            splitLine: {
-                lineStyle: {
-                    type: "dashed", // y轴分割线类型
-                    color: "#012b4b",
-                },
-            },
         },
-        series: [
+      },
-            {
+    },
-              name: 'Direct',
+    series: data
-              type: 'bar',
+  }
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [320, 302, 301, 334, 390]
-            },
-            {
-              name: 'Mail Ad',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [120, 132, 101, 134, 90]
-            },
-            {
-              name: 'Affiliate Ad',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [220, 182, 191, 234, 290]
-            },
-            {
-              name: 'Video Ad',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [150, 212, 201, 154, 190]
-            },
-            {
-              name: 'Search Engine',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [820, 832, 901, 934, 1290]
-            }
-          ]
-    }
 
 }

src/views/Index/tailInsight/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 11:56:50
- * @LastEditTime: 2021-10-21 13:24:45
+ * @LastEditTime: 2021-10-21 13:51:36
  * @LastEditors: Please set LastEditors
  * @Description: 尾翼洞察
  * @FilePath: /data-show/src/views/Index/tailInsight/index.vue
@@ -47,11 +47,9 @@ export default {
       // 获取后台数据
       getData() {
           let obj = Object.assign({}, this.getCommTime, this.form);
-        
           getWeiYiCountHome0528(obj).then(res => {
               let data = res.data;
               this.pdata = data;
-             
           })
       },
       // 获取分页数据