cxw-010203

src/api/comm/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-20 16:36:08
- * @LastEditTime: 2021-10-20 16:55:28
+ * @LastEditTime: 2021-10-22 10:15:00
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/comm/index.js
@@ -27,3 +27,31 @@ export function getTwoTime(params) {
         params: obj
     })
 }
+
+// 获取渠道
+export function getQuDao(params) {
+    let obj =  Object.assign({action: 'getQuDao'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+// 获取情感
+export function getQingGan(params) {
+    let obj =  Object.assign({action: 'getQingGan'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+// 负面等级
+export function getCrisis(params) {
+    let obj =  Object.assign({action: 'getCrisis'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}

src/components/v-loading/index.css

@@ -1,347 +0,0 @@
-.zh-load-mark {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
-}
-.zh-load-box {
-    position: fixed;
-    z-index: 3;
-    width: 7.6em;
-    min-height: 7.6em;
-    top: 180px;
-    left: 50%;
-    margin-left: -3.8em;
-    background: rgba(0, 0, 0, 0.7);
-    text-align: center;
-    border-radius: 5px;
-    color: #FFFFFF;
-}
-.zh-load-content {
-    margin-top: 64%;
-    font-size: 14px;
-}
-.zh-loading {
-    position: absolute;
-    width: 0px;
-    left: 50%;
-    top: 38%;
-}
-.loading_leaf {
-    position: absolute;
-    top: -1px;
-    opacity: 0.25;
-}
-.loading_leaf:before {
-    content: " ";
-    position: absolute;
-    width: 9.14px;
-    height: 3.08px;
-    background: #d1d1d5;
-    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
-    border-radius: 1px;
-    -webkit-transform-origin: left 50% 0px;
-    transform-origin: left 50% 0px;
-}
-.loading_leaf_0 {
-    -webkit-animation: opacity-0 1.25s linear infinite;
-    animation: opacity-0 1.25s linear infinite;
-}
-.loading_leaf_0:before {
-    -webkit-transform: rotate(0deg) translate(7.92px, 0px);
-    transform: rotate(0deg) translate(7.92px, 0px);
-}
-.loading_leaf_1 {
-    -webkit-animation: opacity-1 1.25s linear infinite;
-    animation: opacity-1 1.25s linear infinite;
-}
-.loading_leaf_1:before {
-    -webkit-transform: rotate(30deg) translate(7.92px, 0px);
-    transform: rotate(30deg) translate(7.92px, 0px);
-}
-.loading_leaf_2 {
-    -webkit-animation: opacity-2 1.25s linear infinite;
-    animation: opacity-2 1.25s linear infinite;
-}
-.loading_leaf_2:before {
-    -webkit-transform: rotate(60deg) translate(7.92px, 0px);
-    transform: rotate(60deg) translate(7.92px, 0px);
-}
-.loading_leaf_3 {
-    -webkit-animation: opacity-3 1.25s linear infinite;
-    animation: opacity-3 1.25s linear infinite;
-}
-.loading_leaf_3:before {
-    -webkit-transform: rotate(90deg) translate(7.92px, 0px);
-    transform: rotate(90deg) translate(7.92px, 0px);
-}
-.loading_leaf_4 {
-    -webkit-animation: opacity-4 1.25s linear infinite;
-    animation: opacity-4 1.25s linear infinite;
-}
-.loading_leaf_4:before {
-    -webkit-transform: rotate(120deg) translate(7.92px, 0px);
-    transform: rotate(120deg) translate(7.92px, 0px);
-}
-.loading_leaf_5 {
-    -webkit-animation: opacity-5 1.25s linear infinite;
-    animation: opacity-5 1.25s linear infinite;
-}
-.loading_leaf_5:before {
-    -webkit-transform: rotate(150deg) translate(7.92px, 0px);
-    transform: rotate(150deg) translate(7.92px, 0px);
-}
-.loading_leaf_6 {
-    -webkit-animation: opacity-6 1.25s linear infinite;
-    animation: opacity-6 1.25s linear infinite;
-}
-.loading_leaf_6:before {
-    -webkit-transform: rotate(180deg) translate(7.92px, 0px);
-    transform: rotate(180deg) translate(7.92px, 0px);
-}
-.loading_leaf_7 {
-    -webkit-animation: opacity-7 1.25s linear infinite;
-    animation: opacity-7 1.25s linear infinite;
-}
-.loading_leaf_7:before {
-    -webkit-transform: rotate(210deg) translate(7.92px, 0px);
-    transform: rotate(210deg) translate(7.92px, 0px);
-}
-.loading_leaf_8 {
-    -webkit-animation: opacity-8 1.25s linear infinite;
-    animation: opacity-8 1.25s linear infinite;
-}
-.loading_leaf_8:before {
-    -webkit-transform: rotate(240deg) translate(7.92px, 0px);
-    transform: rotate(240deg) translate(7.92px, 0px);
-}
-.loading_leaf_9 {
-    -webkit-animation: opacity-9 1.25s linear infinite;
-    animation: opacity-9 1.25s linear infinite;
-}
-.loading_leaf_9:before {
-    -webkit-transform: rotate(270deg) translate(7.92px, 0px);
-    transform: rotate(270deg) translate(7.92px, 0px);
-}
-.loading_leaf_10 {
-    -webkit-animation: opacity-10 1.25s linear infinite;
-    animation: opacity-10 1.25s linear infinite;
-}
-.loading_leaf_10:before {
-    -webkit-transform: rotate(300deg) translate(7.92px, 0px);
-    transform: rotate(300deg) translate(7.92px, 0px);
-}
-.loading_leaf_11 {
-    -webkit-animation: opacity-11 1.25s linear infinite;
-    animation: opacity-11 1.25s linear infinite;
-}
-.loading_leaf_11:before {
-    -webkit-transform: rotate(330deg) translate(7.92px, 0px);
-    transform: rotate(330deg) translate(7.92px, 0px);
-}
-@-webkit-keyframes opacity-0 {
-    0% {
-        opacity: 0.25;
-    }
-    0.01% {
-        opacity: 0.25;
-    }
-    0.02% {
-        opacity: 1;
-    }
-    60.01% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.25;
-    }
-}
-@-webkit-keyframes opacity-1 {
-    0% {
-        opacity: 0.25;
-    }
-    8.34333% {
-        opacity: 0.25;
-    }
-    8.35333% {
-        opacity: 1;
-    }
-    68.3433% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.25;
-    }
-}
-@-webkit-keyframes opacity-2 {
-    0% {
-        opacity: 0.25;
-    }
-    16.6767% {
-        opacity: 0.25;
-    }
-    16.6867% {
-        opacity: 1;
-    }
-    76.6767% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.25;
-    }
-}
-@-webkit-keyframes opacity-3 {
-    0% {
-        opacity: 0.25;
-    }
-    25.01% {
-        opacity: 0.25;
-    }
-    25.02% {
-        opacity: 1;
-    }
-    85.01% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.25;
-    }
-}
-@-webkit-keyframes opacity-4 {
-    0% {
-        opacity: 0.25;
-    }
-    33.3433% {
-        opacity: 0.25;
-    }
-    33.3533% {
-        opacity: 1;
-    }
-    93.3433% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.25;
-    }
-}
-@-webkit-keyframes opacity-5 {
-    0% {
-        opacity: 0.270958333333333;
-    }
-    41.6767% {
-        opacity: 0.25;
-    }
-    41.6867% {
-        opacity: 1;
-    }
-    1.67667% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.270958333333333;
-    }
-}
-@-webkit-keyframes opacity-6 {
-    0% {
-        opacity: 0.375125;
-    }
-    50.01% {
-        opacity: 0.25;
-    }
-    50.02% {
-        opacity: 1;
-    }
-    10.01% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.375125;
-    }
-}
-@-webkit-keyframes opacity-7 {
-    0% {
-        opacity: 0.479291666666667;
-    }
-    58.3433% {
-        opacity: 0.25;
-    }
-    58.3533% {
-        opacity: 1;
-    }
-    18.3433% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.479291666666667;
-    }
-}
-@-webkit-keyframes opacity-8 {
-    0% {
-        opacity: 0.583458333333333;
-    }
-    66.6767% {
-        opacity: 0.25;
-    }
-    66.6867% {
-        opacity: 1;
-    }
-    26.6767% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.583458333333333;
-    }
-}
-@-webkit-keyframes opacity-9 {
-    0% {
-        opacity: 0.687625;
-    }
-    75.01% {
-        opacity: 0.25;
-    }
-    75.02% {
-        opacity: 1;
-    }
-    35.01% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.687625;
-    }
-}
-@-webkit-keyframes opacity-10 {
-    0% {
-        opacity: 0.791791666666667;
-    }
-    83.3433% {
-        opacity: 0.25;
-    }
-    83.3533% {
-        opacity: 1;
-    }
-    43.3433% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.791791666666667;
-    }
-}
-@-webkit-keyframes opacity-11 {
-    0% {
-        opacity: 0.895958333333333;
-    }
-    91.6767% {
-        opacity: 0.25;
-    }
-    91.6867% {
-        opacity: 1;
-    }
-    51.6767% {
-        opacity: 0.25;
-    }
-    100% {
-        opacity: 0.895958333333333;
-    }
-}

src/components/v-loading/index.js

@@ -1,71 +0,0 @@
-/*
- * @Author: your name
- * @Date: 2021-10-21 13:16:41
- * @LastEditTime: 2021-10-21 13:16:43
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/components/v-loading/index.js
- */
- /*
-    自定义 loading 组件
-    调用
-    this.$loading('正在加载中...');
-    this.$loading.close();
-*/ 
-let _LOADING = {
-    show: false,     // Boolean loading显示状态
-    component: null  // Object loading组件
- };    
-export default {
-install(Vue) {
-    /*
-        text: String
-        type: String
-    */
-    Vue.prototype.$loading = function(text='正在加载中...', type) {
-        if (type == 'close') {
-            _LOADING.component.show = _LOADING.show = false;
-        } else {
-            if (_LOADING.show) {
-                return;
-            }
-            let LoadingCompoent = Vue.extend({
-                data: function() {
-                    return {
-                        show: _LOADING.show
-                    }
-                },
-                template: `<div v-show="show" class="zh-load-mark">
-                                <div class="zh-load-box">
-                                    <div class="zh-loading">
-                                        <div class="loading_leaf loading_leaf_0"></div>
-                                        <div class="loading_leaf loading_leaf_1"></div>
-                                        <div class="loading_leaf loading_leaf_2"></div>
-                                        <div class="loading_leaf loading_leaf_3"></div>
-                                        <div class="loading_leaf loading_leaf_4"></div>
-                                        <div class="loading_leaf loading_leaf_5"></div>
-                                        <div class="loading_leaf loading_leaf_6"></div>
-                                        <div class="loading_leaf loading_leaf_7"></div>
-                                        <div class="loading_leaf loading_leaf_8"></div>
-                                        <div class="loading_leaf loading_leaf_9"></div>
-                                        <div class="loading_leaf loading_leaf_10"></div>
-                                        <div class="loading_leaf loading_leaf_11"></div>
-                                    </div>
-                                    <div class="zh-load-content">${text}</div>
-                                </div>
-                            </div>`
-            });
-            _LOADING.component = new LoadingCompoent();
-            let element = _LOADING.component.$mount().$el;
-            document.body.appendChild(element);
-            _LOADING.component.show = _LOADING.show = true;
-        }
-    };
-    // 打开/关闭
-    ['open', 'close'].forEach(function(type) {
-        Vue.prototype.$loading[type] = function(text) {
-            return Vue.prototype.$loading(text, type);
-        }
-    });
-}
-}

src/components/v-loading/index.vue

@@ -0,0 +1,97 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-22 10:26:07
+ * @LastEditTime: 2021-10-22 12:19:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-loading/index.vue
+-->
+<template>
+    <div class="load-outter" v-show="visible">
+        <div class="load-inner">
+            <span style="color: ">
+                <div class="loading">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "v-loading",
+    data() {
+        return {
+            visible: true,
+        };
+    },
+};
+</script>
+<style lang="less" scoped>
+.load-outter {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    top: 0;
+    bottom: 0;
+    z-index: auto;
+    background: rgba(1, 11, 25, 0.9);
+    .load-inner {
+        position: absolute;
+        width: auto;
+        height: auto;
+        left: 50%;
+        top: 50%;
+        color: #fff;
+        font-size: 14px;
+        transform: translate(-50%, -50%);
+    }
+}
+.loading{
+            width: 150px;
+            height: 15px;
+            margin: 0 auto;
+            position: relative;
+            margin-top:100px;
+        }
+        .loading span{
+            position: absolute;
+            width: 15px;
+            height: 100%;
+            border-radius: 50%;
+            background: lightgreen;
+            -webkit-animation: load 1.04s ease-in infinite alternate;
+        }
+        @-webkit-keyframes load{
+            0%{
+                opacity: 1;
+                -webkit-transform: translate(0px);
+            }
+            100%{
+                opacity: 0.2;
+                -webkit-transform: translate(150px);
+            }
+        }
+        .loading span:nth-child(1){
+            -webkit-animation-delay:0.13s;
+        }
+        .loading span:nth-child(2){
+            -webkit-animation-delay:0.26s;
+        }
+        .loading span:nth-child(3){
+            -webkit-animation-delay:0.39s;
+        }
+        .loading span:nth-child(4){
+            -webkit-animation-delay:0.52s;
+        }
+        .loading span:nth-child(5){
+            -webkit-animation-delay:0.65s;
+        }
+</style>

src/mixins/index.js

@@ -1,16 +1,19 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-10-20 16:54:05
+ * @LastEditTime: 2021-10-22 10:46:21
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
  */
 import { mapGetters, mapActions } from "vuex";
-
+import Loading from './loading'
 export default {
     install(Vue) {
         Vue.mixin({
+            directives: {
+               'loading': Loading
+            },
             computed: {
                 ...mapGetters(['getZoom','getToken', 'getUser', 'getAccount', 'getCommTime'])
             },

src/mixins/loading.js

@@ -0,0 +1,64 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-22 10:41:53
+ * @LastEditTime: 2021-10-22 11:42:48
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/mixins/loading.js
+ */
+// src/directive/loading/index.js
+
+import Vue from 'vue'
+import Loading from '@/components/v-loading'
+/**
+ * Vue.extend 接受参数并返回一个构造器，new 该构造器可以返回一个组件实例
+ * 当我们 new Mask() 的时候，把该组件实例挂载到一个 div 上
+ **/
+const Mask = Vue.extend(Loading)
+
+// 更新是否显示
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    Vue.nextTick(() => {
+        let style = el.currentStyle || document.defaultView.getComputedStyle(el, '');
+        if(style.position != 'relative' || style.position != 'absolute') {
+            el.style.position = 'relative';
+        }
+      // 控制loading组件显示
+      el.instance.visible = true
+      // 插入到目标元素
+      insertDom(el, el, binding)
+    })
+  } else {
+    el.instance.visible = false
+  }
+}
+
+ // 插入到目标元素
+const insertDom = (parent, el) => {
+  parent.appendChild(el.mask)
+}
+export default {
+  //第一次绑定到元素时调用
+  bind: function (el, binding) {
+    const mask = new Mask({
+      el: document.createElement('div'),
+      data () {}
+    })
+    //用一个变量接住mask实例
+    el.instance = mask
+    el.mask = mask.$el
+    el.maskStyle = {}
+    binding.value && toggleLoading(el, binding)
+  },
+  //所在组件的 VNode 更新时调用--比较更新前后的值
+  update: function (el, binding) {
+    if (binding.oldValue !== binding.value) {
+      toggleLoading(el, binding)
+    }
+  },
+  //指令与元素解绑时调用
+  unbind: function (el) {
+    el.instance && el.instance.$destroy()
+  }
+}

src/views/Index/barometer/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 11:28:39
- * @LastEditTime: 2021-10-22 09:31:42
+ * @LastEditTime: 2021-10-22 12:18:33
  * @LastEditors: Please set LastEditors
  * @Description: 晴雨表
  * @FilePath: /data-show/src/views/Index/barometer/index.vue
 -->
 <template>
-  <div class="bm-outter">
+  <div class="bm-outter" v-loading="load">
       <v-label-div title="晴雨表" @click="handlerClick">
           <div>
               <v-tab-group :btns="['正负调性', '负面等级']" @change="handlerChange"></v-tab-group>
@@ -26,6 +26,7 @@ export default {
   name: "barometer",
   data() {
       return {
+          load: false,
           opt: {}
       }
   },
@@ -43,6 +44,7 @@ export default {
     },
     // 获取正负调性
     getData1() {
+      this.load = true;
       getAffections0528(this.getCommTime).then(res => {
         let data = res.data;
         let dx = [];
@@ -54,10 +56,12 @@ export default {
           ds.push(Data);
         });
         this.opt = createOpt(dx, ds)
+        this.load = false;
       })
     },
     // 获取负面等级
     getData2() {
+      this.load = true;
       getCrisisTime(this.getCommTime).then(res => {
         let data = res.data;
         let dx = [];
@@ -69,6 +73,7 @@ export default {
           ds.push(Data);
         });
         this.opt = createOpt(dx, ds)
+        this.load = false;
       })
     },
     // 跳转到行业数据

src/views/Index/dynamicNumber/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 14:25:05
- * @LastEditTime: 2021-10-21 17:54:25
+ * @LastEditTime: 2021-10-22 12:09:41
  * @LastEditors: Please set LastEditors
  * @Description: 大数据统计gif
  * @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
 -->
 <template>
-    <div class="dy-outter">
+    <div class="dy-outter" v-loading="load">
         <div class="d1">
             <span class="s1">APP</span>
             <span class="s2">
@@ -63,6 +63,7 @@ export default {
     },
     data() {
         return {
+            load: false,
             form: {
                 total: 0,
                 app: 0,
@@ -81,6 +82,7 @@ export default {
     methods: {
         // 获取后台数据
         getData() {
+            this.load = true;
             getHomeCount0528(this.getCommTime).then(res => {
                 let data = res.data;
                 this.form.total = data.count;
@@ -102,7 +104,7 @@ export default {
                         }
                     })
                 }
-               
+                this.load = false;
             })
         },
         // 点击中间的全网数据显示

src/views/Index/hotDiscussionGraph/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 13:25:49
- * @LastEditTime: 2021-10-21 11:45:00
+ * @LastEditTime: 2021-10-22 12:11:24
  * @LastEditors: Please set LastEditors
  * @Description: 热议图谱
  * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/index.vue
 -->
 <template>
-    <div class="hdg-ouuter">
+    <div class="hdg-ouuter" v-loading="load">
         <v-label-div title="热议图谱">
             <v-tab-group :btns="['热门', '正面', '负面']" @change="handlerChange"></v-tab-group>
         </v-label-div>
@@ -24,6 +24,7 @@ export default {
     name: "hot-discussion-graph",
     data() {
         return {
+            load: false,
             opt: {},
             type: 0,
         };
@@ -38,23 +39,27 @@ export default {
         },
         // 获取后台数据
         getData() {
+            this.load = true;
             switch (this.type) {
                 case 0:
                     getHotWordHome(this.getCommTime).then((res) => {
                         let data = res.data;
                         this.opt = createWordCloud(data);
+                        this.load = false;
                     });
                     break;
                 case 1:
                     getPositive0528(this.getCommTime).then((res) => {
                         let data = res.data;
                         this.opt = createWordCloud(data);
+                        this.load = false;
                     });
                     break;
                 case 2:
                     getNegative0528(this.getCommTime).then((res) => {
                         let data = res.data;
                         this.opt = createWordCloud(data);
+                        this.load = false;
                     });
                     break;
                 default:

src/views/Index/keyCommunicationPositions/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 16:37:30
- * @LastEditTime: 2021-10-20 17:55:49
+ * @LastEditTime: 2021-10-22 12:07:14
  * @LastEditors: Please set LastEditors
  * @Description: 传播重点阵地
  * @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue
 -->
 <template>
-    <div class="kcp-outter">
+    <div class="kcp-outter" v-loading="load">
         <v-label-div title="传播重点阵地"></v-label-div>
         <div class="kcp-inner">
             <div class="d1">
@@ -26,6 +26,7 @@ export default {
     name: "key-communication-positions",
     data() {
         return {
+            load: false,
             d1: [],
             d2: [],
         };
@@ -45,6 +46,7 @@ export default {
         },
         // 获取数据
         getData() {
+          this.load = true;
             getWebsiteHome0528(this.getCommTime).then((res) => {
                 let data = res.data;
                 let vals = [];
@@ -55,6 +57,7 @@ export default {
                 let groupedArray = this.group(vals, 5);
                 this.d1 = groupedArray[0];
                 this.d2 = groupedArray[1];
+                this.load = false;
             });
         },
     },

src/views/Index/realTimeEvent/index.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 15:56:35
- * @LastEditTime: 2021-10-20 17:30:28
+ * @LastEditTime: 2021-10-22 12:05:49
  * @LastEditors: Please set LastEditors
  * @Description: 实时事件
  * @FilePath: /data-show/src/views/Index/realTimeEvent/index.vue
 -->
 
 <template>
-    <div class="rte-outter">
+    <div class="rte-outter" v-loading="load">
         <v-label-div title="实时事件"></v-label-div>
         <div class="rte-tb">
             <dv-scroll-board :config="config" :style="{ width: '100%', height: '230px' }" />
@@ -22,6 +22,7 @@ export default {
     name: "real-time-event",
     data() {
         return {
+            load: false,
             config: {},
         };
     },
@@ -30,6 +31,7 @@ export default {
     },
     methods: {
         getData() {
+          this.load = true;
             getEventsListH(this.getCommTime).then((res) => {
                 let arr = [];
                 if (Array.isArray(res.data)) {
@@ -50,6 +52,7 @@ export default {
                         data: arr,
                     };
                 }
+                this.load = false;
             });
         },
     },

src/views/Index/salesRank/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 18:58:00
- * @LastEditTime: 2021-10-21 16:08:27
+ * @LastEditTime: 2021-10-22 12:14:08
  * @LastEditors: Please set LastEditors
  * @Description: 热销排行
  * @FilePath: /data-show/src/views/Index/salesRank/index.vue
 -->
 <template>
-    <div class="sr-outter">
+    <div class="sr-outter" v-loading="load">
         <v-label-div title="热销排行">
             <div>
                 <v-tab-group :btns="['品牌', '车型']" @change="handlerTabChange"></v-tab-group>
@@ -30,6 +30,7 @@ export default {
     name: "sales-rank",
     data() {
         return {
+            load: false,
             selVal: "",
             form: {
                 sQueryType: 1,
@@ -63,6 +64,7 @@ export default {
         },
         // 获取选择时间的数据
         getSelect() {
+          this.load = true;
           getCheZhuTime0528().then(res => {
             this.selArr = res.data
             this.selVal = this.selArr[0].key;
@@ -73,9 +75,11 @@ export default {
         },
         // 获取数据
         getData() {
+          this.load = true;
           getCheZhuBrandCount0528(this.form).then(res => {
             let data = res.data;
             this.pdata = data;
+            this.load = false;
           })
         },
         // 获取分页的数据

src/views/Index/spreadTheSound/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 10:53:21
- * @LastEditTime: 2021-10-21 14:53:06
+ * @LastEditTime: 2021-10-22 11:59:54
  * @LastEditors: Please set LastEditors
  * @Description: 传播声量TOP10
  * @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
 -->
 <template>
-  <div class="st-outter">
+  <div class="st-outter" v-loading="load">
       <v-label-div title="传播声量TOP10">
           <div>
               <v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
@@ -27,6 +27,7 @@ export default {
   name: "spread-the-sound",
   data() {
       return {
+        load: false,
         form: {
           sQueryType: 1
         },
@@ -45,10 +46,12 @@ export default {
     },
     // 获取数据
     getData() {
+      this.load = true;
       let obj = Object.assign({}, this.getCommTime, this.form);
       getHomeBrandSourceType0528(obj).then(res => {
         let data = res.data;
         this.pdata = data;
+        this.load = false;
       })
     },
     // 分页显示数据

src/views/Index/tailInsight/index.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 11:56:50
- * @LastEditTime: 2021-10-21 13:51:36
+ * @LastEditTime: 2021-10-22 12:16:10
  * @LastEditors: Please set LastEditors
  * @Description: 尾翼洞察
  * @FilePath: /data-show/src/views/Index/tailInsight/index.vue
 -->
 
 <template>
-  <div class="tl-outter">
+  <div class="tl-outter" v-loading="load">
       <vLabel-div title="尾翼洞察">
           <div>
               <v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
@@ -28,6 +28,7 @@ export default {
   name: "tail-insight",
   data() {
       return {
+          load: false,
           form: {
               sQueryType: 1
           },
@@ -46,10 +47,12 @@ export default {
       },
       // 获取后台数据
       getData() {
+          this.load = true;
           let obj = Object.assign({}, this.getCommTime, this.form);
           getWeiYiCountHome0528(obj).then(res => {
               let data = res.data;
               this.pdata = data;
+              this.load = false;
           })
       },
       // 获取分页数据

src/views/Index/userPortrait/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 09:04:01
- * @LastEditTime: 2021-10-22 09:29:49
+ * @LastEditTime: 2021-10-22 12:14:55
  * @LastEditors: Please set LastEditors
  * @Description: 用户画像
  * @FilePath: /data-show/src/views/Index/userPortrait/index.vue
 -->
 <template>
-    <div class="u-p-outter">
+    <div class="u-p-outter" v-loading="load">
         <v-label-div title="用户画像">
             <v-tab-group :btns="['性别', '认证', '地区']" @change="handlerTab"></v-tab-group>
         </v-label-div>
@@ -31,6 +31,7 @@ export default {
     name: "user-portrait",
     data() {
         return {
+            load: false,
             attestation: [], // 认证
             sex: [], // 性别
             region: [], // 地区
@@ -89,6 +90,7 @@ export default {
         },
         // 获取远程数据
         getData() {
+            this.load = true;
             getSexOrAttestationOrRegionHome0528(this.getCommTime).then(
                 (res) => {
                     let data = res.data;
@@ -106,6 +108,7 @@ export default {
                         "#3373CC",
                         "#CC9D12",
                     ]);
+                    this.load = false;
                 }
             );
         },

src/views/IndustryDataExport/index.vue

@@ -1,214 +1,261 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-11 14:11:04
- * @LastEditTime: 2021-10-13 14:50:42
+ * @LastEditTime: 2021-10-22 10:16:54
  * @LastEditors: Please set LastEditors
  * @Description: 行业数据导出
  * @FilePath: /data-show/src/views/IndustryDataExport/index.vue
 -->
 <template>
-  <div class="d-container">
+    <div class="d-container">
-    <div class="i-d-e-outter">
+        <div class="i-d-e-outter">
-      <div class="i-d-e-inner">
+            <div class="i-d-e-inner">
-        <v-label-div title="行业数据">
+                <v-label-div title="行业数据">
-          <v-btn @click="handlerBack">返回</v-btn>
+                    <v-btn @click="handlerBack">返回</v-btn>
-        </v-label-div>
+                </v-label-div>
-        <div class="ide-d1">
+                <div class="ide-d1">
-          <div class="ide-d1-dd1">
+                    <div class="ide-d1-dd1">
-            <span class="s1">时间：</span>
+                        <span class="s1">时间：</span>
-            <v-tab-group
+                        <v-tab-group :style="{ background: 'transparent' }" :btns="['24小时', '近7天', '近30天', '自定义时间']"></v-tab-group>
-              :style="{ background: 'transparent' }"
+                        <a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="sTimeType === selVal" @change="handlerChangeTime">
-              :btns="['24小时', '近7天', '近30天', '自定义时间']"
+                            <a-icon slot="suffixIcon" type="calendar" />
-            ></v-tab-group>
+                        </a-range-picker>
-          </div>
+                    </div>
-          <div class="ide-d1-dd1" style="margin-top: 24px">
+                    <div class="ide-d1-dd1" style="margin-top: 24px">
-            <span class="s1">渠道：</span>
+                        <span class="s1">渠道：</span>
-            <a-checkbox-group
+                        <a-checkbox-group v-model="quDao" :options="plainOptions" @change="onChange" />
-              v-model="value1"
+                    </div>
-              :options="plainOptions"
+                    <div class="ide-d1-dd1" style="margin-top: 24px">
-              @change="onChange"
+                        <span class="s1">情感：</span>
-            />
+                        <a-checkbox-group v-model="qingGan" :options="plainOptions1" @change="onChange" />
-          </div>
+                    </div>
-          <div class="ide-d1-dd1" style="margin-top: 24px">
+                    <div class="ide-d1-dd1" style="margin-top: 24px">
-            <span class="s1">调性：</span>
+                        <span class="s1">负面等级：</span>
-            <a-checkbox-group
+                        <a-checkbox-group v-model="crisis" :options="plainOptions2" @change="onChange" />
-              v-model="value2"
+                    </div>
-              :options="plainOptions1"
+                </div>
-              @change="onChange"
+                <div class="ide-d2">
-            />
+                    <span class="s1">共计<span class="ss1">10119</span>条数据，已选中<span class="ss1">0</span>条数据</span>
-          </div>
+                    <a-button type="primary" @click="handlerExport">导出数据</a-button>
+                </div>
+                <v-table :columns="columns" :data="tbData"></v-table>
+            </div>
         </div>
-        <div class="ide-d2">
+        <v-modal :title="modalObj.title" :visible.sync="modalObj.visible" :eleStyle="{ width: '1200px', height: '531px' }">
-          <span class="s1"
+            <div slot="body" style="padding: 0px 24px 24px 24px">
-            >共计<span class="ss1">10119</span>条数据，已选中<span class="ss1"
+                <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 8 }">
-              >0</span
+                    <a-form-item label="文件名称">
-            >条数据</span
+                        <a-input placeholder="请输入文件名称"></a-input>
-          >
+                    </a-form-item>
-          <a-button type="primary" @click="handlerExport">导出数据</a-button>
+                    <a-form-item label="导出格式">
-        </div>
+                        <span style="color: #63aecc; font-size: 14px">xlsz</span>
-        <v-table :columns="columns" :data="tbData"></v-table>
+                    </a-form-item>
-      </div>
+                    <a-form-item label="导出字段" :wrapper-col="{ span: 22 }">
+                        <a-checkbox-group v-model="value1" :options="plainOptions3" @change="onChange" />
+                    </a-form-item>
+                    <a-form-item label="导出条数">
+                        <span style="color: #63aecc; font-size: 14px">2条</span>
+                    </a-form-item>
+                </a-form>
+            </div>
+        </v-modal>
     </div>
-    <v-modal
-      :title="modalObj.title"
-      :visible.sync="modalObj.visible"
-      :eleStyle="{ width: '1200px', height: '531px' }"
-    >
-      <div slot="body" style="padding: 0px 24px 24px 24px">
-        <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 8 }">
-          <a-form-item label="文件名称">
-            <a-input placeholder="请输入文件名称"></a-input>
-          </a-form-item>
-          <a-form-item label="导出格式">
-            <span style="color: #63aecc; font-size: 14px">xlsz</span>
-          </a-form-item>
-          <a-form-item label="导出字段" :wrapper-col="{ span: 22 }">
-            <a-checkbox-group
-              v-model="value1"
-              :options="plainOptions2"
-              @change="onChange"
-            />
-          </a-form-item>
-           <a-form-item label="导出条数">
-               <span style="color: #63aecc; font-size: 14px">2条</span>
-           </a-form-item>
-        </a-form>
-      </div>
-    </v-modal>
-  </div>
 </template>
 
 <script>
-
+import { getQuDao, getQingGan, getCrisis } from "@/api/comm";
 export default {
-  name: "IndustryDataExport",
+    name: "IndustryDataExport",
-  data() {
+    data() {
-    return {
+        return {
-      value1: [],
+            quDao: [],
-      value2: [],
+            qingGan: [],
-      value3: [],
+            crisis: [],
-      modalObj: {
+            value3: [],
-        title: "导出选项",
+            form: {
-        visible: false,
+                sStartTime: "",
-      },
+                sEndTime: "",
-      plainOptions: [
+                sQingGan: "",
-        { label: "全选", value: "1" },
+                sCrisis: "",
-        { label: "新闻(3456)", value: "2" },
+                isSourcetype: [],
-        { label: "论坛(543)", value: "3" },
+            },
-        { label: "评论(657)", value: "4" },
+            modalObj: {
-        { label: "微信(1149)", value: "5" },
+                title: "导出选项",
-        { label: "APP(5679)", value: "6" },
+                visible: false,
-        { label: "其他(106)", value: "7" },
+            },
-      ],
+            plainOptions: [],
-      plainOptions1: [
+            plainOptions1: [],
-        { label: "全选", value: "1" },
+            plainOptions2: [],
-        { label: "正面", value: "2" },
+            plainOptions3: [
-        { label: "中性", value: "3" },
+                { label: "检测方案名称", value: "1" },
-        { label: "负面", value: "4" },
+                { label: "标题", value: "2" },
-        { label: "低级危机", value: "5" },
+                { label: "倾向性", value: "3" },
-        { label: "中级危机", value: "6" },
+                { label: "发布媒体", value: "3" },
-        { label: "高级危机", value: "7" },
+                { label: "链接地址", value: "4" },
-      ],
+                { label: "关键字", value: "5" },
-      plainOptions2: [
+                { label: "媒体类别", value: "6" },
-        { label: "检测方案名称", value: "1" },
+                { label: "发表类型", value: "7" },
-        { label: "标题", value: "2" },
+                { label: "作者", value: "8" },
-        { label: "倾向性", value: "3" },
+                { label: "检测时间", value: "9" },
-        { label: "发布媒体", value: "3" },
+                { label: "发布时间", value: "10" },
-        { label: "链接地址", value: "4" },
+                { label: "字数", value: "11" },
-        { label: "关键字", value: "5" },
+                { label: "浏览数", value: "12" },
-        { label: "媒体类别", value: "6" },
+                { label: "回复数", value: "13" },
-        { label: "发表类型", value: "7" },
+                { label: "主体词词频", value: "14" },
-        { label: "作者", value: "8" },
+                { label: "摘要", value: "15" },
-        { label: "检测时间", value: "9" },
+                { label: "转载数", value: "16" },
-        { label: "发布时间", value: "10" },
+                { label: "博文类型", value: "17" },
-        { label: "字数", value: "11" },
+                { label: "博主粉丝数", value: "18" },
-        { label: "浏览数", value: "12" },
+                { label: "阅读状态", value: "19" },
-        { label: "回复数", value: "13" },
+                { label: "点赞数", value: "20" },
-        { label: "主体词词频", value: "14" },
+                { label: "风险指数", value: "21" },
-        { label: "摘要", value: "15" },
+                { label: "影响力", value: "22" },
-        { label: "转载数", value: "16" },
+                { label: "分类标签", value: "23" },
-        { label: "博文类型", value: "17" },
+                { label: "收藏数", value: "24" },
-        { label: "博主粉丝数", value: "18" },
+                { label: "分享数", value: "25" },
-        { label: "阅读状态", value: "19" },
+                { label: "原文标题", value: "26" },
-        { label: "点赞数", value: "20" },
+            ],
-        { label: "风险指数", value: "21" },
+            columns: [
-        { label: "影响力", value: "22" },
+                {
-        { label: "分类标签", value: "23" },
+                    title: "标题及内容",
-        { label: "收藏数", value: "24" },
+                    dataIndex: "a",
-        { label: "分享数", value: "25" },
+                    key: "a",
-        { label: "原文标题", value: "26" },
+                },
-      ],
+                {
-      columns: [
+                    title: "来源",
-        {
+                    dataIndex: "address",
-          title: "标题及内容",
+                    key: "address",
-          dataIndex: "a",
+                },
-          key: "a",
+                {
+                    title: "作者",
+                    dataIndex: "age",
+                    key: "age",
+                },
+                {
+                    title: "发布时间",
+                    dataIndex: "d",
+                    key: "d",
+                },
+            ],
+            tbData: [],
+        };
+    },
+    created() {
+      Promise.all([this.getQuDao(),this.getQingGan(), this.getCrisis()])
+    },
+    methods: {
+        onChange() {},
+        handlerExport() {
+            this.modalObj.visible = true;
         },
-        {
+        // 返回
-          title: "来源",
+        handlerBack() {
-          dataIndex: "address",
+            this.$router.go(-1);
-          key: "address",
         },
-        {
+        // 获取渠道
-          title: "作者",
+        getQuDao() {
-          dataIndex: "age",
+            return new Promise((resolve, reject) => {
-          key: "age",
+                getQuDao()
+                    .then((res) => {
+                        let data = res.data;
+                        let arr = [];
+                        data.forEach((ele) => {
+                            let obj = {
+                                label: ele.value,
+                                value: ele.key,
+                            };
+                            arr.push(obj);
+                        });
+                        this.plainOptions = arr;
+                        resolve(arr);
+                    })
+                    .catch(() => {
+                        reject(false);
+                    });
+            });
         },
-        {
+        // 获取情感
-          title: "发布时间",
+        getQingGan() {
-          dataIndex: "d",
+            return new Promise((resolve, reject) => {
-          key: "d",
+                getQingGan()
+                    .then((res) => {
+                        let data = res.data;
+                        let arr = [];
+                        data.forEach((ele) => {
+                            let obj = {
+                                label: ele.value,
+                                value: ele.key,
+                            };
+                            arr.push(obj);
+                        });
+                        this.plainOptions1 = arr;
+                        resolve(arr);
+                    })
+                    .catch(() => {
+                        reject(false);
+                    });
+            });
         },
-      ],
+        // 获取负面等级
-      tbData: [],
+        getCrisis() {
-    };
+          return new Promise((resolve, reject) => {
-  },
+                getCrisis()
-  methods: {
+                    .then((res) => {
-    onChange() {},
+                        let data = res.data;
-    handlerExport() {
+                        let arr = [];
-        this.modalObj.visible = true;
+                        data.forEach((ele) => {
+                            let obj = {
+                                label: ele.value,
+                                value: ele.key,
+                            };
+                            arr.push(obj);
+                        });
+                        this.plainOptions2 = arr;
+                        resolve(arr);
+                    })
+                    .catch(() => {
+                        reject(false);
+                    });
+            });
+        }
     },
-    handlerBack() {
-       this.$router.go(-1); 
-    }
-  },
 };
 </script>
 
 <style lang="less" scoped>
 .i-d-e-outter {
-  padding: 0px 16px 16px 16px;
+    padding: 0px 16px 16px 16px;
 }
 .i-d-e-inner {
-  width: 100%;
+    width: 100%;
-  height: 960px;
+    height: 960px;
-  border: 2px solid #0f2a4d;
+    border: 2px solid #0f2a4d;
-  background: #091e36;
+    background: #091e36;
 }
 .ide-d1 {
-  width: 100%;
+    width: 100%;
-  margin-top: 22px;
+    margin-top: 22px;
-  margin-left: 20px;
+    margin-left: 20px;
-  .ide-d1-dd1 {
+    .ide-d1-dd1 {
-    display: flex;
+        display: flex;
-    justify-content: flex-start;
+        justify-content: flex-start;
-    align-items: center;
+        align-items: center;
-    .s1 {
+        .s1 {
-      font-size: 14px;
+            font-size: 14px;
-      color: #fff;
+            color: #fff;
+        }
     }
-  }
 }
 .ide-d2 {
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  padding: 24px 20px 10px 20px;
+    padding: 24px 20px 10px 20px;
-  align-items: flex-end;
+    align-items: flex-end;
-  .s1 {
+    .s1 {
-    color: #fff;
+        color: #fff;
-    .ss1 {
+        .ss1 {
-      color: #2d6cc2;
+            color: #2d6cc2;
+        }
     }
-  }
 }
 </style>