prod
lily.zhang 4 years ago
parent 84326f28d8
commit 1411c3f1a9

@ -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
})
}

@ -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;
}
}

@ -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);
}
});
}
}

@ -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>

@ -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'])
},

@ -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()
}
}

@ -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;
})
},
//

@ -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;
})
},
//

@ -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:

@ -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;
});
},
},

@ -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;
});
},
},

@ -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;
})
},
//

@ -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;
})
},
//

@ -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;
})
},
//

@ -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;
}
);
},

@ -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="i-d-e-outter">
<div class="i-d-e-inner">
<v-label-div title="行业数据">
<v-btn @click="handlerBack"></v-btn>
</v-label-div>
<div class="ide-d1">
<div class="ide-d1-dd1">
<span class="s1">时间</span>
<v-tab-group
:style="{ background: 'transparent' }"
:btns="['24小时', '近7天', '近30天', '自定义时间']"
></v-tab-group>
</div>
<div class="ide-d1-dd1" style="margin-top: 24px">
<span class="s1">渠道</span>
<a-checkbox-group
v-model="value1"
:options="plainOptions"
@change="onChange"
/>
</div>
<div class="ide-d1-dd1" style="margin-top: 24px">
<span class="s1">调性</span>
<a-checkbox-group
v-model="value2"
:options="plainOptions1"
@change="onChange"
/>
</div>
<div class="d-container">
<div class="i-d-e-outter">
<div class="i-d-e-inner">
<v-label-div title="行业数据">
<v-btn @click="handlerBack"></v-btn>
</v-label-div>
<div class="ide-d1">
<div class="ide-d1-dd1">
<span class="s1">时间</span>
<v-tab-group :style="{ background: 'transparent' }" :btns="['24小时', '近7天', '近30天', '自定义时间']"></v-tab-group>
<a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="sTimeType === selVal" @change="handlerChangeTime">
<a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>
</div>
<div class="ide-d1-dd1" style="margin-top: 24px">
<span class="s1">渠道</span>
<a-checkbox-group v-model="quDao" :options="plainOptions" @change="onChange" />
</div>
<div class="ide-d1-dd1" style="margin-top: 24px">
<span class="s1">情感</span>
<a-checkbox-group v-model="qingGan" :options="plainOptions1" @change="onChange" />
</div>
<div class="ide-d1-dd1" style="margin-top: 24px">
<span class="s1">负面等级</span>
<a-checkbox-group v-model="crisis" :options="plainOptions2" @change="onChange" />
</div>
</div>
<div class="ide-d2">
<span class="s1">共计<span class="ss1">10119</span>条数据已选中<span class="ss1">0</span>条数据</span>
<a-button type="primary" @click="handlerExport"></a-button>
</div>
<v-table :columns="columns" :data="tbData"></v-table>
</div>
</div>
<div class="ide-d2">
<span class="s1"
>共计<span class="ss1">10119</span>条数据已选中<span class="ss1"
>0</span
>条数据</span
>
<a-button type="primary" @click="handlerExport"></a-button>
</div>
<v-table :columns="columns" :data="tbData"></v-table>
</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="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",
data() {
return {
value1: [],
value2: [],
value3: [],
modalObj: {
title: "导出选项",
visible: false,
},
plainOptions: [
{ label: "全选", value: "1" },
{ label: "新闻(3456)", value: "2" },
{ label: "论坛(543)", value: "3" },
{ label: "评论(657)", value: "4" },
{ label: "微信(1149)", value: "5" },
{ label: "APP(5679)", value: "6" },
{ label: "其他(106)", value: "7" },
],
plainOptions1: [
{ label: "全选", value: "1" },
{ label: "正面", value: "2" },
{ label: "中性", value: "3" },
{ label: "负面", value: "4" },
{ label: "低级危机", value: "5" },
{ label: "中级危机", value: "6" },
{ label: "高级危机", value: "7" },
],
plainOptions2: [
{ label: "检测方案名称", value: "1" },
{ label: "标题", value: "2" },
{ label: "倾向性", value: "3" },
{ label: "发布媒体", value: "3" },
{ label: "链接地址", value: "4" },
{ label: "关键字", value: "5" },
{ label: "媒体类别", value: "6" },
{ label: "发表类型", value: "7" },
{ label: "作者", value: "8" },
{ label: "检测时间", value: "9" },
{ label: "发布时间", value: "10" },
{ label: "字数", value: "11" },
{ label: "浏览数", value: "12" },
{ label: "回复数", value: "13" },
{ label: "主体词词频", value: "14" },
{ label: "摘要", value: "15" },
{ label: "转载数", value: "16" },
{ label: "博文类型", value: "17" },
{ label: "博主粉丝数", value: "18" },
{ label: "阅读状态", value: "19" },
{ label: "点赞数", value: "20" },
{ label: "风险指数", value: "21" },
{ label: "影响力", value: "22" },
{ label: "分类标签", value: "23" },
{ label: "收藏数", value: "24" },
{ label: "分享数", value: "25" },
{ label: "原文标题", value: "26" },
],
columns: [
{
title: "标题及内容",
dataIndex: "a",
key: "a",
name: "IndustryDataExport",
data() {
return {
quDao: [],
qingGan: [],
crisis: [],
value3: [],
form: {
sStartTime: "",
sEndTime: "",
sQingGan: "",
sCrisis: "",
isSourcetype: [],
},
modalObj: {
title: "导出选项",
visible: false,
},
plainOptions: [],
plainOptions1: [],
plainOptions2: [],
plainOptions3: [
{ label: "检测方案名称", value: "1" },
{ label: "标题", value: "2" },
{ label: "倾向性", value: "3" },
{ label: "发布媒体", value: "3" },
{ label: "链接地址", value: "4" },
{ label: "关键字", value: "5" },
{ label: "媒体类别", value: "6" },
{ label: "发表类型", value: "7" },
{ label: "作者", value: "8" },
{ label: "检测时间", value: "9" },
{ label: "发布时间", value: "10" },
{ label: "字数", value: "11" },
{ label: "浏览数", value: "12" },
{ label: "回复数", value: "13" },
{ label: "主体词词频", value: "14" },
{ label: "摘要", value: "15" },
{ label: "转载数", value: "16" },
{ label: "博文类型", value: "17" },
{ label: "博主粉丝数", value: "18" },
{ label: "阅读状态", value: "19" },
{ label: "点赞数", value: "20" },
{ label: "风险指数", value: "21" },
{ label: "影响力", value: "22" },
{ label: "分类标签", value: "23" },
{ label: "收藏数", value: "24" },
{ label: "分享数", value: "25" },
{ label: "原文标题", value: "26" },
],
columns: [
{
title: "标题及内容",
dataIndex: "a",
key: "a",
},
{
title: "来源",
dataIndex: "address",
key: "address",
},
{
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: "来源",
dataIndex: "address",
key: "address",
//
handlerBack() {
this.$router.go(-1);
},
{
title: "作者",
dataIndex: "age",
key: "age",
//
getQuDao() {
return new Promise((resolve, reject) => {
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: "发布时间",
dataIndex: "d",
key: "d",
//
getQingGan() {
return new Promise((resolve, reject) => {
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: [],
};
},
methods: {
onChange() {},
handlerExport() {
this.modalObj.visible = true;
//
getCrisis() {
return new Promise((resolve, reject) => {
getCrisis()
.then((res) => {
let data = res.data;
let arr = [];
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%;
height: 960px;
border: 2px solid #0f2a4d;
background: #091e36;
width: 100%;
height: 960px;
border: 2px solid #0f2a4d;
background: #091e36;
}
.ide-d1 {
width: 100%;
margin-top: 22px;
margin-left: 20px;
.ide-d1-dd1 {
display: flex;
justify-content: flex-start;
align-items: center;
.s1 {
font-size: 14px;
color: #fff;
width: 100%;
margin-top: 22px;
margin-left: 20px;
.ide-d1-dd1 {
display: flex;
justify-content: flex-start;
align-items: center;
.s1 {
font-size: 14px;
color: #fff;
}
}
}
}
.ide-d2 {
display: flex;
justify-content: space-between;
padding: 24px 20px 10px 20px;
align-items: flex-end;
.s1 {
color: #fff;
.ss1 {
color: #2d6cc2;
display: flex;
justify-content: space-between;
padding: 24px 20px 10px 20px;
align-items: flex-end;
.s1 {
color: #fff;
.ss1 {
color: #2d6cc2;
}
}
}
}
</style>
Loading…
Cancel
Save