parent
54efb6867e
commit
ee412c49be
@ -0,0 +1,3 @@
|
||||
NOOE_ENV = development
|
||||
VUE_APP_API_URL = ''
|
||||
VUE_APP_ENV_DESC = 开发环境
|
||||
@ -0,0 +1,3 @@
|
||||
NOOE_ENV = production
|
||||
VUE_APP_API_URL = ''
|
||||
VUE_APP_ENV_DESC = 正式环境
|
||||
@ -1,28 +1,62 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 08:41:57
|
||||
* @LastEditTime: 2021-10-12 13:59:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/App.vue
|
||||
-->
|
||||
<template>
|
||||
<a-config-provider :locale="locale">
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
data() {
|
||||
return {
|
||||
locale: zhCN,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.changeZoom()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changeZoom() {
|
||||
let w = window.screen.width;
|
||||
let zoom = 1;
|
||||
if (1300 < w && w <= 1920) {
|
||||
zoom = w / 1920;
|
||||
} else if(w < 1300) {
|
||||
zoom = 1300 / 1920;
|
||||
} else {
|
||||
zoom = 1;
|
||||
}
|
||||
document.body.style.zoom = zoom;
|
||||
this.setZoom(zoom);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
|
||||
font-size: 62.5%;
|
||||
background: #010B19;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #010B19;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 12 MiB |
|
After Width: | Height: | Size: 288 B |
|
After Width: | Height: | Size: 564 B |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:28:00
|
||||
* @LastEditTime: 2021-10-12 10:38:21
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/index.js
|
||||
*/
|
||||
import vLabelDiv from "@/components/v-labelDiv";
|
||||
import vModal from "@/components/v-modal";
|
||||
import vTable from "@/components/v-table";
|
||||
import vTabGroup from "@/components/v-tab-group";
|
||||
import vEcharts from "@/components/v-echars";
|
||||
import vBtn from "@/components/v-btn";
|
||||
import vLabelCtx from "@/components/v-label-ctx"
|
||||
import vPagination from "@/components/v-pagination"
|
||||
import vRanking from "@/components/v-ranking";
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.mixin({
|
||||
components: {
|
||||
vLabelDiv,
|
||||
vModal,
|
||||
vTable,
|
||||
vTabGroup,
|
||||
vEcharts,
|
||||
vBtn,
|
||||
vLabelCtx,
|
||||
vPagination,
|
||||
vRanking
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 18:03:53
|
||||
* @LastEditTime: 2021-10-12 14:15:27
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-btn/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="v-btn-outter" @click="handlerClick">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-btn",
|
||||
methods: {
|
||||
handlerClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-btn-outter {
|
||||
display: inline-block;
|
||||
background-image: url('../../assets/images/Index/back.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 48px;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: #63AECC;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 19:12:07
|
||||
* @LastEditTime: 2021-10-13 17:28:06
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edi
|
||||
* @FilePath: /data-show/src/components/v-echars/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="echars-cont" ref="myChart">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: "v-echarts",
|
||||
props: {
|
||||
opt: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
opt: {
|
||||
handler(val) {
|
||||
if(JSON.stringify(val) != "{}") {
|
||||
this.$nextTick(() => {
|
||||
if(!this.myChart) {
|
||||
this.drawFun(val)
|
||||
} else {
|
||||
this.myChart.setOption(val);
|
||||
}
|
||||
this.$emit('echarsUpdate', this.myChart)
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawFun(opt) {
|
||||
let eRef = this.$refs.myChart;
|
||||
this.myChart = echarts.init(eRef);
|
||||
this.myChart.setOption(opt);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.echars-cont {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,110 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 09:19:06
|
||||
* @LastEditTime: 2021-10-12 14:59:47
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-label-ctx/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-l-c-outter" :style="eStyle">
|
||||
<div class="d1">
|
||||
<span class="s1" :style="{background: color}"></span>
|
||||
<span class="s2">{{label}}</span>
|
||||
</div>
|
||||
<div class="d2">
|
||||
<span class="s1">{{contLabel}}</span>
|
||||
<span class="s2">{{cont}}</span>
|
||||
</div>
|
||||
<div class="d3">
|
||||
<span class="s1">占比</span>
|
||||
<span class="s2">{{percentage}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-label-ctx",
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
contLabel: {
|
||||
type: String,
|
||||
default: "销量"
|
||||
},
|
||||
cont: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
percentage: {
|
||||
type: String,
|
||||
default: "0%"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#3373CC"
|
||||
},
|
||||
eStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-l-c-outter {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #0F2A4D;
|
||||
.d1 {
|
||||
width: 28px;
|
||||
.s1 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: red;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.d2 {
|
||||
.s1 {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #7a8289;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
font-family: Bebas;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.d3 {
|
||||
.s1 {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #7a8289;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
font-family: Bebas;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:01:05
|
||||
* @LastEditTime: 2021-10-12 11:11:51
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-labelDiv/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-label-container" ref="vlc" :style="eStyle">
|
||||
<span ref="titleRef">{{title}}</span>
|
||||
<div class="gx" v-if="showLine"></div>
|
||||
<div class="v-l-right">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-label-div",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
showLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
eStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-label-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 48px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border-bottom: 2px solid #0F2A4D;
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.gx {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background: linear-gradient(270deg, #45B5F4 0%, #0A1E38 100%);
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.v-l-right {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,107 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-11 10:42:36
|
||||
* @LastEditTime: 2021-10-11 13:22:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-modal/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-m-ouuter" v-show="show">
|
||||
<div class="v-m-inner" :style="eleStyle">
|
||||
<v-label-div :title="title">
|
||||
<span class="iconfont icon-guanbi v-m-close" @click="handlerClose"></span>
|
||||
</v-label-div>
|
||||
<div class="v-m-body">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div class="v-m-footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vLabelDiv from "@/components/v-labelDiv";
|
||||
export default {
|
||||
name: "v-modal",
|
||||
props: {
|
||||
eleStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val) {
|
||||
this.show = val ? true : false;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
vLabelDiv
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlerClose() {
|
||||
this.show = false;
|
||||
this.$emit("update:visible", this.show);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-m-ouuter {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 200;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
overflow: auto;
|
||||
}
|
||||
.v-m-inner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
border-radius: 2px;
|
||||
transform: translate(-50%, 90px);
|
||||
background: #0C2342;
|
||||
min-width: 400px;
|
||||
min-height: 300px;
|
||||
.v-m-close {
|
||||
color: #3373CC;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.v-m-body {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.v-m-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 16:08:39
|
||||
* @LastEditTime: 2021-10-09 16:44:16
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-pagination/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-p-outter">
|
||||
<span class="iconfont icon-shang1 s1"></span>
|
||||
<span class="s2">1/3</span>
|
||||
<span class="iconfont icon-xia1 s3"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-pagination"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-p-outter {
|
||||
width: auto;
|
||||
height: auto;
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
color: #7f868e;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #2d6abb;
|
||||
}
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.s3 {
|
||||
display: inline-block;
|
||||
color: #7f868e;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #2d6abb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,229 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:44:08
|
||||
* @LastEditTime: 2021-10-12 16:59:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-ranking/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-r-container">
|
||||
<div class="v-r-line" v-if="lineShow"></div>
|
||||
<div class="v-r-inner">
|
||||
<div :class="ls">
|
||||
<span class="s1">{{ num|numStr }}</span>
|
||||
</div>
|
||||
<div :class="rs">
|
||||
<span class="v-r-label">{{label}}</span>
|
||||
<div class="v-r-res">
|
||||
<span class="s1">传播量</span>
|
||||
<span class="s2">{{val}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-ranking",
|
||||
props: {
|
||||
num: {
|
||||
type: [String, Number],
|
||||
default: 1,
|
||||
},
|
||||
val: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
lineShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
num: {
|
||||
handler(val) {
|
||||
if(val == 1) {
|
||||
this.ls = "v-r-left-1"
|
||||
this.rs = "v-r-right-1"
|
||||
} else if(val == 2) {
|
||||
this.ls = "v-r-left-2"
|
||||
this.rs = "v-r-right-2"
|
||||
} else if(val == 3) {
|
||||
this.ls = "v-r-left-3"
|
||||
this.rs = "v-r-right-3"
|
||||
} else {
|
||||
this.ls = "v-r-left"
|
||||
this.rs = "v-r-right"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ls: "v-r-left",
|
||||
rs: "v-r-right"
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numStr(val) {
|
||||
let str = ""
|
||||
if(0<val && val<10) {
|
||||
str = '0' + val
|
||||
} else {
|
||||
str = val + ''
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-r-container {
|
||||
width: 206px;
|
||||
height: auto;
|
||||
.v-r-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background:#0a1d3b;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.v-r-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 6px;
|
||||
color: #fff;
|
||||
background: #0a1d3b;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.v-r-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-r-res {
|
||||
margin-right: 16px;
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.s1 {
|
||||
color: #9ba4af;
|
||||
}
|
||||
.s2 {
|
||||
color: #fff;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right {
|
||||
position: absolute;
|
||||
width: 185px;
|
||||
height: 40px;
|
||||
border-top: 2px solid transparent;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #cc9d12;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #cc9d12;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-1 {
|
||||
position: absolute;
|
||||
width: 185px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #CC9D12;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #3373CC;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #3373CC;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-2 {
|
||||
position: absolute;
|
||||
width: 185px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #3373CC;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #54BF93;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #54BF93;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-3 {
|
||||
position: absolute;
|
||||
width: 185px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #54BF93;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 19:06:37
|
||||
* @LastEditTime: 2021-10-08 19:21:19
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-tab-group/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-t-g-container" ref="V-t-g">
|
||||
<span v-for="(item,index) in btns" :key="index" :class="activeInex === index ? 'v-g-item v-g-item-active' : 'v-g-item'" @click="handlerClick(index)">{{item}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-tab-group",
|
||||
props: {
|
||||
btns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeInex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlerClick(n) {
|
||||
this.activeInex = n;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-t-g-container {
|
||||
display: inline-block;
|
||||
background: #1B4163;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v-g-item {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
color: #63AECC;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.v-g-item-active {
|
||||
background: linear-gradient(180deg, #00498C 0%, #002343 100%);
|
||||
border: 1px solid #63AECC;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 18:16:42
|
||||
* @LastEditTime: 2021-10-11 10:22:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-table/index.vue
|
||||
-->
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-table",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
columns: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
this.tbColumns = [...val];
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
data: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
this.tbData = [...val];
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tbData: [],
|
||||
tbColumns: [],
|
||||
};
|
||||
},
|
||||
render () {
|
||||
const on = {
|
||||
...this.$listeners
|
||||
}
|
||||
const props = {
|
||||
...this.$attrs,
|
||||
...this.$props,
|
||||
...{
|
||||
dataSource: this.tbData,
|
||||
columns: this.tbColumns
|
||||
}
|
||||
}
|
||||
const isRedRow = this.isRedRow;
|
||||
const slots = Object.keys(this.$slots).map(slot => {
|
||||
return (
|
||||
<template slot={slot}>{this.$slots[slot]}</template>
|
||||
)
|
||||
})
|
||||
const table = (
|
||||
<a-table props={props} scopedSlots={this.$scopedSlots} on={on} row-class-name={isRedRow}>
|
||||
{slots}
|
||||
</a-table>
|
||||
)
|
||||
return (
|
||||
<div class="v-table">{table}</div>
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
isRedRow(record, index) {
|
||||
let className = "";
|
||||
className = index % 2 === 0 ? "evenRow" : "oddRow";
|
||||
return className;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-table {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,228 @@
|
||||
|
||||
<template>
|
||||
<div class="iH-outter">
|
||||
<div class="iH-left">
|
||||
<img class="iH-left-img1" src="../../assets/images/Index/ic_cd.png" />
|
||||
<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="handleChange"
|
||||
>
|
||||
<a-select-option
|
||||
:style="{ color: '#fff' }"
|
||||
v-for="item in selDatas"
|
||||
:value="item.key"
|
||||
:key="item.key"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="selVal === 4">
|
||||
<a-icon slot="suffixIcon" type="calendar" />
|
||||
</a-range-picker>
|
||||
</div>
|
||||
<div class="iH-center">
|
||||
<img
|
||||
src="../../assets/images/Index/img_toubuyi.png"
|
||||
width="100%"
|
||||
height="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"
|
||||
/>
|
||||
<span class="s3">张三</span>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a class="ant-dropdown-link">
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<span @click="handlerMyself">个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<span>退出</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "iHeader",
|
||||
data() {
|
||||
return {
|
||||
selVal: 1,
|
||||
clock: "",
|
||||
sClock: "",
|
||||
week: "",
|
||||
intDt: null,
|
||||
selDatas: [
|
||||
{
|
||||
key: 1,
|
||||
label: "24小时",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
label: "最近7天",
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
label: "最近30天",
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
label: "自定义",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.intDt = self.setInterval(() => {
|
||||
this.getDatetime();
|
||||
}, 1000);
|
||||
},
|
||||
destroyed() {
|
||||
if (this.intDt) {
|
||||
self.clearInterval(this.intDt);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
// 获取当前日期时间
|
||||
getDatetime() {
|
||||
let now = new Date();
|
||||
let weeks = new Array(
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六"
|
||||
);
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
let day = now.getDate();
|
||||
let hh = now.getHours();
|
||||
let mm = now.getMinutes();
|
||||
let ss = now.getSeconds();
|
||||
let clock = year + "-";
|
||||
let sClock = "";
|
||||
let dayw = now.getDay();
|
||||
let week = weeks[dayw];
|
||||
if (month < 10) clock += "0";
|
||||
clock += month + "-";
|
||||
if (day < 10) clock += "0";
|
||||
clock += day + " ";
|
||||
if (hh < 10) sClock += "0";
|
||||
sClock += hh + ":";
|
||||
if (mm < 10) sClock += "0";
|
||||
sClock += mm + ":";
|
||||
if (ss < 10) sClock += "0";
|
||||
sClock += ss;
|
||||
this.clock = clock;
|
||||
this.sClock = sClock;
|
||||
this.week = week;
|
||||
return { clock: clock, sClock: sClock, week: week };
|
||||
},
|
||||
// 点击个人中心
|
||||
handlerMyself() {
|
||||
this.$router.push('/myself');
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.iH-outter {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background: url("../../assets/images/Index/img_toubuer.png");
|
||||
.iH-left {
|
||||
display: flex;
|
||||
width: 572px;
|
||||
height: 60px;
|
||||
margin-left: 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.iH-left-img1 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.iH-left-s1 {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.iH-center {
|
||||
position: absolute;
|
||||
width: 606px;
|
||||
height: 80px;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.iH-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 436px;
|
||||
height: 60px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
top: 0px;
|
||||
right: 19px;
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.s3 {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.m1 {
|
||||
display: inline-block;
|
||||
margin-left: 80px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-dropdown-link {
|
||||
color:#63AECC;
|
||||
margin-left: 11px;
|
||||
/deep/ .anticon svg{
|
||||
font-size: 20px !important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 14:25:26
|
||||
* @LastEditTime: 2021-10-13 14:52:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/lycomponents/iLayout/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<iHeader></iHeader>
|
||||
<div class="layout-body">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "iLayout"
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.layout-container {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
min-height: 900px;
|
||||
background: #010B19;
|
||||
border-top: 1px solid transparent;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.layout-body {
|
||||
width: 100%;
|
||||
height: calc(100% - 90px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:28:00
|
||||
* @LastEditTime: 2021-10-12 10:38:21
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/index.js
|
||||
*/
|
||||
import iHeader from "@/lycomponents/iHeader";
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.mixin({
|
||||
components: {
|
||||
iHeader
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,34 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 08:41:57
|
||||
* @LastEditTime: 2021-10-12 14:01:23
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/main.js
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import 'normalize.css/normalize.css';
|
||||
import './styles/index.less';
|
||||
import Antd from 'ant-design-vue';
|
||||
import 'ant-design-vue/dist/antd.css';
|
||||
import router from "@/permission";
|
||||
import store from "@/store";
|
||||
import gol from "@/utils/gol"
|
||||
import dataV from '@jiaminghi/data-view';
|
||||
import selfUi from "@/components/index.js";
|
||||
import compon from "@/lycomponents/index.js";
|
||||
import mixins from "@/mixins"
|
||||
Vue.use(Antd);
|
||||
Vue.use(gol);
|
||||
Vue.use(dataV);
|
||||
Vue.use(selfUi);
|
||||
Vue.use(compon);
|
||||
Vue.use(mixins);
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router,
|
||||
store
|
||||
}).$mount('#app')
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 13:56:13
|
||||
* @LastEditTime: 2021-10-12 13:58:22
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/mixins/index.js
|
||||
*/
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.mixin({
|
||||
computed: {
|
||||
...mapGetters(['getZoom'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setZoom"])
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import router from "@/router"
|
||||
import NProgress from "nprogress"
|
||||
import "nprogress/nprogress.css"
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// console.log(to,from, next)
|
||||
NProgress.start()
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done()
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,82 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 09:26:29
|
||||
* @LastEditTime: 2021-10-13 16:22:58
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/router/index.js
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import Router from "vue-router"
|
||||
|
||||
Vue.use(Router)
|
||||
const originalPush = Router.prototype.push
|
||||
|
||||
Router.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => err)
|
||||
}
|
||||
import Index from "@/views/Index"
|
||||
import Myself from "@/views/Myself"
|
||||
import IndustryDataExport from "@/views/IndustryDataExport"
|
||||
import BrandInsight from "@/views/BrandInsight"
|
||||
import EventDetails from "@/views/EventDetails"
|
||||
import iLayout from "@/lycomponents/iLayout"
|
||||
import ForumDetails from "@/views/ForumDetails"
|
||||
import TailInsightDetails from "@/views/TailInsightDetails"
|
||||
const router = [
|
||||
{
|
||||
path: "/",
|
||||
name: "iLayout",
|
||||
component: iLayout,
|
||||
redirect: '/index',
|
||||
children: [
|
||||
{
|
||||
path: "/index",
|
||||
name: "index",
|
||||
desc: "行业洞察",
|
||||
component: Index
|
||||
},
|
||||
{
|
||||
path: "/myself",
|
||||
name: "myself",
|
||||
desc: "个人中心",
|
||||
component: Myself
|
||||
},
|
||||
{
|
||||
path: '/industryDataExport',
|
||||
name: "industryDataExport",
|
||||
desc: "行业数据",
|
||||
component: IndustryDataExport
|
||||
},
|
||||
{
|
||||
path: '/brandInsight',
|
||||
name: "brandInsight",
|
||||
desc: "品牌洞察",
|
||||
component: BrandInsight
|
||||
},
|
||||
{
|
||||
path: '/eventDetails',
|
||||
name: "eventDetails",
|
||||
desc: "事件详情",
|
||||
component: EventDetails
|
||||
},
|
||||
{
|
||||
path: '/forumDetails',
|
||||
name: "forumDetails",
|
||||
desc: "论坛详情",
|
||||
component: ForumDetails
|
||||
},
|
||||
{
|
||||
path: '/tailInsightDetails',
|
||||
name: "tailInsightDetails",
|
||||
desc: "尾翼详情",
|
||||
component: TailInsightDetails
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
export default new Router({
|
||||
routes: router
|
||||
})
|
||||
@ -0,0 +1,14 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 13:36:49
|
||||
* @LastEditTime: 2021-10-12 13:41:21
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/store/actions.js
|
||||
*/
|
||||
const actions = {
|
||||
setZoom: ({commit}, log) => {
|
||||
commit('setZoom', log)
|
||||
}
|
||||
}
|
||||
export default actions
|
||||
@ -0,0 +1,14 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 13:37:06
|
||||
* @LastEditTime: 2021-10-12 13:41:51
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/store/getters.js
|
||||
*/
|
||||
const getters = {
|
||||
getZoom(state) {
|
||||
return state.$zoom
|
||||
}
|
||||
}
|
||||
export default getters
|
||||
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 13:43:03
|
||||
* @LastEditTime: 2021-10-12 13:48:24
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/store/index.js
|
||||
*/
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
Vue.use(Vuex);
|
||||
|
||||
import actions from "./actions";
|
||||
import mutations from "./mutations";
|
||||
import getters from "./getters";
|
||||
import state from "./state";
|
||||
const store = new Vuex.Store({
|
||||
state,
|
||||
actions,
|
||||
mutations,
|
||||
getters
|
||||
})
|
||||
export default store
|
||||
@ -0,0 +1,15 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 13:37:35
|
||||
* @LastEditTime: 2021-10-12 13:39:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/store/mutations.js
|
||||
*/
|
||||
const mutations = {
|
||||
setZoom: (state, log) => {
|
||||
state.$zoom = log;
|
||||
}
|
||||
}
|
||||
|
||||
export default mutations;
|
||||
@ -0,0 +1,12 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 13:37:50
|
||||
* @LastEditTime: 2021-10-12 13:37:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/store/state.js
|
||||
*/
|
||||
const state = {
|
||||
$zoom: 1
|
||||
}
|
||||
export default state;
|
||||
Binary file not shown.
@ -0,0 +1,200 @@
|
||||
|
||||
.ant-select-selection {
|
||||
background: #1B4163 !important;
|
||||
border: 1px solid #63AECC !important;
|
||||
&:hover {
|
||||
background-color: #010B19 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.ant-select-arrow .ant-select-arrow-icon svg {
|
||||
color: #63AECC;
|
||||
}
|
||||
.ant-select {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-select-dropdown{
|
||||
background-color:#010B19 !important;
|
||||
box-shadow: 0px 0px 10px 0px #3373CC !important;
|
||||
overflow: hidden;
|
||||
.ant-select-dropdown-menu,.ant-select-dropdown-menu-root,.ant-select-dropdown-menu-vertical{
|
||||
li{// 鼠标 hover 效果
|
||||
color: #fff;
|
||||
border-top: 1px solid #3373CC !important;
|
||||
background-color:#010B19 !important;
|
||||
&:hover {
|
||||
color: #63AECC;
|
||||
background-color:#010B19 !important;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-style: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.ant-select-dropdown-menu-item-active{
|
||||
background-color:#010B19 !important; // 展开时。默认选中option的背景色
|
||||
color: #63AECC !important;
|
||||
}
|
||||
}
|
||||
.ant-input {
|
||||
background-color: #1B4163 !important;
|
||||
border: 1px solid #63AECC !important;
|
||||
}
|
||||
.ant-calendar-range-picker-input {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-range-picker-separator {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-picker-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-table-thead > tr > th {
|
||||
background: #14325d !important;
|
||||
color: #3373CC !important;
|
||||
border-style: none !important;
|
||||
}
|
||||
.evenRow{
|
||||
background: #010e1f;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.oddRow {
|
||||
background: #14325d;
|
||||
color: #fff;
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
border-style: none !important;
|
||||
}
|
||||
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
||||
background: #2668c2 !important;
|
||||
}
|
||||
.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link {
|
||||
background: linear-gradient(180deg, #00498C 0%, #002343 100%) !important;
|
||||
border: 1px solid #63AECC !important;
|
||||
}
|
||||
.ant-pagination-disabled a, .ant-pagination-disabled:hover a, .ant-pagination-disabled:focus a, .ant-pagination-disabled .ant-pagination-item-link, .ant-pagination-disabled:hover .ant-pagination-item-link, .ant-pagination-disabled:focus .ant-pagination-item-link {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-pagination-item {
|
||||
border: 1px solid #1EC8FA !important;
|
||||
background-color: #010B19 !important;
|
||||
color: #1EC8FA !important;
|
||||
}
|
||||
.ant-pagination-item-active {
|
||||
background: linear-gradient(180deg, #00498C 0%, #002343 100%) !important;
|
||||
border: 1px solid #63AECC !important;
|
||||
}
|
||||
.ant-btn-primary {
|
||||
color: #4f95b7 !important;
|
||||
background: linear-gradient(180deg, #00498C 0%, #002343 100%) !important;
|
||||
border: 1px solid #4f95b7 !important;
|
||||
}
|
||||
.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
|
||||
color: #3373CC !important;
|
||||
}
|
||||
.ant-steps-item-wait .ant-steps-item-icon {
|
||||
background: #0c2242 !important;
|
||||
border-color: #3373CC !important;
|
||||
}
|
||||
.ant-steps-item-process .ant-steps-item-icon {
|
||||
background: #0c2242 !important;
|
||||
}
|
||||
.ant-steps-item-finish .ant-steps-item-icon{
|
||||
background: #0c2242 !important;
|
||||
}
|
||||
.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
|
||||
color: #acb0b4 !important;
|
||||
}
|
||||
.ant-form-item-label > label {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-input {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-input-group-addon {
|
||||
background: transparent !important;
|
||||
border-style: none !important;
|
||||
}
|
||||
.ant-checkbox-wrapper {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-checkbox-inner {
|
||||
border: 1px solid #3373CC !important;
|
||||
background: #010e1f !important;
|
||||
}
|
||||
.ant-table-placeholder {
|
||||
background: transparent !important;
|
||||
border-style: none !important;
|
||||
}
|
||||
.ant-empty-description {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-dropdown-menu {
|
||||
background: #010e1f !important;
|
||||
border: 1px solid #3373CC !important;
|
||||
box-shadow: 0px 0px 10px 0px #3373CC !important;
|
||||
li {
|
||||
color: #fff;
|
||||
border-top: 1px solid #3373CC !important;
|
||||
background-color:#010B19 !important;
|
||||
&:first-child {
|
||||
border-top-style: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-calendar{
|
||||
background: #010e1f !important;
|
||||
border: 1px solid #3373CC !important;
|
||||
box-shadow: 0px 0px 10px 0px #3373CC !important;
|
||||
}
|
||||
.ant-calendar-picker-container {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-date {
|
||||
color: #fff !important;
|
||||
&:hover {
|
||||
background: transparent !important;
|
||||
border: 1px solid #3373CC !important;
|
||||
}
|
||||
}
|
||||
.ant-calendar-range .ant-calendar-in-range-cell::before {
|
||||
background: #1990fe !important;
|
||||
}
|
||||
.ant-calendar-cell ant-calendar-in-range-cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
.ant-calendar-range .ant-calendar-input, .ant-calendar-range .ant-calendar-time-picker-input {
|
||||
background: #010e1f !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-input-wrap {
|
||||
border-bottom: 1px solid #3373CC !important;
|
||||
}
|
||||
.ant-calendar-range .ant-calendar-body {
|
||||
border-top: 1px solid #3373CC !important;
|
||||
}
|
||||
.ant-calendar-header .ant-calendar-century-select, .ant-calendar-header .ant-calendar-decade-select, .ant-calendar-header .ant-calendar-year-select, .ant-calendar-header .ant-calendar-month-select {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-pagination-item a {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-pagination-next a {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-pagination-prev a {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-pagination-total-text {
|
||||
color: #3373CC !important;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
.dv-scroll-board .header .header-item {
|
||||
color: #3373CC;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
@import "./antd.less";
|
||||
@import "./datav.less";
|
||||
@import "//at.alicdn.com/t/font_2847898_ypiobcj3ve.css";
|
||||
@font-face {
|
||||
font-family: "Bebas";
|
||||
src: url("./BEBAS_.TTF");
|
||||
}
|
||||
.d-container {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
background: #010B19;
|
||||
border-top: 1px solid transparent;
|
||||
margin-top: -1px;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 10:13:32
|
||||
* @LastEditTime: 2021-10-08 10:59:10
|
||||
* @LastEditors: your name
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/utils/gol/index.js
|
||||
*/
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.prototype.$vuiSize = "small"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-11 18:42:58
|
||||
* @LastEditTime: 2021-10-12 10:38:41
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 品牌数据
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandData/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bd-outter">
|
||||
<v-label-div title="品牌数据"></v-label-div>
|
||||
<div class="bd-inner">
|
||||
<div class="bd-o-d1">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_cb.png"/>
|
||||
<span class="s1">传播数据总量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,195</span>
|
||||
</div>
|
||||
<div class="bd-o-d1" style="margin-top: 16px">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png"/>
|
||||
<span class="s1">舆情整体调性</span>
|
||||
</div>
|
||||
<span class="s2">
|
||||
<span class="s2-s1"></span>
|
||||
<span class="s2-s1" style="width: 104px;background: #54BF93;"></span>
|
||||
<span class="s2-s1" style="width: 68px; background: #CC9D12"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "brandData",
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 620px;
|
||||
height: 272px;
|
||||
border: 2px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bd-inner {
|
||||
padding: 16px;
|
||||
.bd-o-d1 {
|
||||
width: 588px;
|
||||
height: 88px;
|
||||
border: 1px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.m1 {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.s1 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
font-family: Bebas;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 276px;
|
||||
.s2-s1 {
|
||||
display: block;
|
||||
width: 102px;
|
||||
height: 36px;
|
||||
background: #3373CC;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 09:03:51
|
||||
* @LastEditTime: 2021-10-12 10:38:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 品牌TOP车型
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandTop/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bt-outter">
|
||||
<v-label-div title="品牌TOP车型"></v-label-div>
|
||||
<div class="bt-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "brand-top",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(["奥迪", "宝马", "奔驰", "吉利", "江淮"],[2200, 1900, 1800, 1600, 1400])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bt-outter {
|
||||
width: 620px;
|
||||
height: 272px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 09:12:13
|
||||
* @LastEditTime: 2021-10-12 09:17:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt(dx,ds) {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (params) {
|
||||
var result = "";
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||
params.forEach(function (item) {
|
||||
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "2001",
|
||||
data: ds,
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:33:38
|
||||
* @LastEditTime: 2021-10-12 16:42:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="fct-outter">
|
||||
<v-label-div title="论坛传播态势" :showLine="false" :eStyle="{ 'border-style': 'none' }"/>
|
||||
<div class="fct-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "forum-communication-trend",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fct-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.fct-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:40:53
|
||||
* @LastEditTime: 2021-10-12 16:44:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: "#51bc91",
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#51bc91'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:48:36
|
||||
* @LastEditTime: 2021-10-12 17:32:46
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumHotTopicDirection/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="fhtd-outter">
|
||||
<v-label-div title="论坛热议话题方向" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
|
||||
<div class="fhtd-inner">
|
||||
<div class="d1">
|
||||
<v-ranking-fhtd :num="1" label="辅助" val="594614" :lineShow="false" ></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="2" label="刹车" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="3" label="舒适度" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="4" label="操控" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="5" label="油耗" val="594614"></v-ranking-fhtd>
|
||||
</div>
|
||||
<div class="d2" style="margin-left: 16px">
|
||||
<v-ranking-fhtd :num="6" label="性价比" val="594614" :lineShow="false"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="7" label="空间" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="8" label="动力" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="9" label="外观" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="10" label="内饰" val="594614"></v-ranking-fhtd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vRankingFhtd from "./v-ranking-fhtd"
|
||||
export default {
|
||||
name: "forumHotTopicDirection",
|
||||
components: {
|
||||
"v-ranking-fhtd": vRankingFhtd
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fhtd-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.fhtd-inner {
|
||||
padding: 0px 16px 16px 16px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,230 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:44:08
|
||||
* @LastEditTime: 2021-10-12 17:35:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-ranking/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-r-container">
|
||||
<div class="v-r-line" v-if="lineShow"></div>
|
||||
<div class="v-r-inner">
|
||||
<div :class="ls">
|
||||
<span class="s1">{{ num|numStr }}</span>
|
||||
</div>
|
||||
<div :class="rs">
|
||||
<span class="v-r-label">{{label}}</span>
|
||||
<div class="v-r-res">
|
||||
<span class="s1">传播量</span>
|
||||
<span class="s2">{{val}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-ranking-fhtd",
|
||||
props: {
|
||||
num: {
|
||||
type: [String, Number],
|
||||
default: 1,
|
||||
},
|
||||
val: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
lineShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
num: {
|
||||
handler(val) {
|
||||
if(val == 1) {
|
||||
this.ls = "v-r-left-1"
|
||||
this.rs = "v-r-right-1"
|
||||
} else if(val == 2) {
|
||||
this.ls = "v-r-left-2"
|
||||
this.rs = "v-r-right-2"
|
||||
} else if(val == 3) {
|
||||
this.ls = "v-r-left-3"
|
||||
this.rs = "v-r-right-3"
|
||||
} else {
|
||||
this.ls = "v-r-left"
|
||||
this.rs = "v-r-right"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ls: "v-r-left",
|
||||
rs: "v-r-right"
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numStr(val) {
|
||||
let str = ""
|
||||
if(0<val && val<10) {
|
||||
str = '0' + val
|
||||
} else {
|
||||
str = val + ''
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-r-container {
|
||||
width: 305px;
|
||||
height: auto;
|
||||
.v-r-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background:#0a1d3b;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.v-r-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-top: 6px;
|
||||
color: #fff;
|
||||
background: #0a1d3b;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.v-r-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-r-res {
|
||||
margin-right: 16px;
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.s1 {
|
||||
color: #9ba4af;
|
||||
}
|
||||
.s2 {
|
||||
color: #fff;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-left {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid transparent;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-1 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #cc9d12;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #cc9d12;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-1 {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #CC9D12;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-2 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #3373CC;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #3373CC;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-2 {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #3373CC;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-3 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #54BF93;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #54BF93;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-3 {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #54BF93;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,187 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-11 17:59:49
|
||||
* @LastEditTime: 2021-10-13 16:23:29
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 品牌洞察
|
||||
* @FilePath: /data-show/src/views/BrandInsight/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="bdl-ouuter">
|
||||
<div class="bdl-d1">
|
||||
<div class="bdl-d1-dd1">
|
||||
<brand-data></brand-data>
|
||||
<brand-top></brand-top>
|
||||
</div>
|
||||
<div class="bdl-d1-dd2">
|
||||
<div class="bdl-d1-dd2-d1">
|
||||
<span class="bdl-d1-dd2-d1-s1">奥迪</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d1-dd3">
|
||||
<titsopo></titsopo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d2">
|
||||
<v-label-div title="事件洞察">
|
||||
<v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d2-bd">
|
||||
<popular-events-list></popular-events-list>
|
||||
<popular-events></popular-events>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d3">
|
||||
<v-label-div title="微博洞察">
|
||||
<v-btn>微博详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d3-bd">
|
||||
<weibo-Kol></weibo-Kol>
|
||||
<weibo-portraits></weibo-portraits>
|
||||
<weibo-volume-trend></weibo-volume-trend>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d4">
|
||||
<v-label-div title="论坛洞察">
|
||||
<v-btn @click="goRouter('/forumDetails')">论坛详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d4-bd">
|
||||
<forumCommunicationTrend></forumCommunicationTrend>
|
||||
<forumHotTopicDirection></forumHotTopicDirection>
|
||||
<spreadTOPmodels></spreadTOPmodels>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d5">
|
||||
<v-label-div title="尾翼洞察">
|
||||
<v-btn @click="goRouter('/tailInsightDetails')">尾翼详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d5-bd">
|
||||
<rearWingPropagationSituation></rearWingPropagationSituation>
|
||||
<keyMedia></keyMedia>
|
||||
<popularwordCloud></popularwordCloud>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import brandData from "./brandData";
|
||||
import brandTop from "./brandTop";
|
||||
import titsopo from "./titsopo";
|
||||
import popularEventsList from "./popularEventsList";
|
||||
import popularEvents from "./popularEvents";
|
||||
import weiboKol from "./weiboKol";
|
||||
import weiboPortraits from "./weiboPortraits";
|
||||
import weiboVolumeTrend from "./weiboVolumeTrend";
|
||||
import forumCommunicationTrend from "./forumCommunicationTrend";
|
||||
import forumHotTopicDirection from "./forumHotTopicDirection";
|
||||
import spreadTOPmodels from "./spreadTOPmodels";
|
||||
import rearWingPropagationSituation from "./rearWingPropagationSituation"
|
||||
import keyMedia from "./keyMedia"
|
||||
import popularwordCloud from "./popularwordCloud"
|
||||
export default {
|
||||
name: "BrandInsight",
|
||||
components: {
|
||||
brandData, // 品牌数据
|
||||
brandTop, // 品牌top车型
|
||||
titsopo, //舆情传播趋势
|
||||
popularEventsList, //热门事件列表
|
||||
popularEvents, // 热点事件
|
||||
weiboKol, // 微博KOL
|
||||
weiboPortraits, // 微博人物画像
|
||||
weiboVolumeTrend, // 微博声量趋势
|
||||
forumCommunicationTrend, //论坛传播态势
|
||||
forumHotTopicDirection, // 论坛热议话题方向
|
||||
spreadTOPmodels, // 传播TOP车型
|
||||
rearWingPropagationSituation, // 尾翼传播态势
|
||||
keyMedia, // 重点媒体
|
||||
popularwordCloud // 热门词云
|
||||
},
|
||||
methods: {
|
||||
goRouter(path, query = {}) {
|
||||
this.$router.push({path: path, query: query});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bdl-ouuter {
|
||||
position: relative;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
.bdl-d1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.bdl-d1-dd2 {
|
||||
position: relative;
|
||||
width: 620px;
|
||||
height: 560px;
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.bdl-d1-dd2-d1 {
|
||||
width: 470px;
|
||||
height: 520px;
|
||||
background-image: url("../../assets/images/BrandInsight/img_tz.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
.bdl-d1-dd2-d1-s1 {
|
||||
display: block;
|
||||
font-size: 40px;
|
||||
color: #b2daf7;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bdl-d2 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bdl-d2-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
.bdl-d3 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
.bdl-d3-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
.bdl-d4 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bdl-d4-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
.bdl-d5 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bdl-d5-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:43:22
|
||||
* @LastEditTime: 2021-10-12 19:15:28
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/keyMedia/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="km-outter">
|
||||
<v-label-div title="重点媒体" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="km-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<v-pagination :style="{position: 'absolute', left: '16px', bottom: '12px'}"></v-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "keyMedia",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.km-outter {
|
||||
position: relative;
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.km-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
|
||||
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 12:38:34
|
||||
* @LastEditTime: 2021-10-12 19:13:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
top: "1%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['懂车帝', '天眼查', '新浪网', '微信', '今日头条'],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011',
|
||||
type: 'bar',
|
||||
barWidth: 24,
|
||||
data: [500, 1000, 2220, 3000, 4000],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: '#010B19'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#51bc91'
|
||||
}]),
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 11:06:58
|
||||
* @LastEditTime: 2021-10-12 11:20:47
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 热门事件
|
||||
* @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="pe-outter">
|
||||
<v-label-div title="热点事件" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="pe-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "popularEvents",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pe-outter {
|
||||
width: 928px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.pe-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,231 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 11:16:44
|
||||
* @LastEditTime: 2021-10-12 13:19:28
|
||||
* @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 = [
|
||||
[['10000人以上',37.5,100000000,'A7','无工作经验'],['1000-5000人',11.46,100000000,'A5','无工作经验'],['500-1000人',16,100000000,'A4','无工作经验'],['150-500人',16.92,100000000,'A3','无工作经验'],['50-150人',22.5,100000000,'A2','无工作经验'],['少于50人',11.11,100000000,'A1','无工作经验']],
|
||||
[['10000人以上',48.21,150000000,'B7','1-3年经验'],['5000-10000人',50,150000000,'B6','1-3年经验'],['1000-5000人',67.7,150000000,'B5','1-3年经验'],['500-1000人',31,150000000,'B4','1-3年经验'],['150-500人',43.85,150000000,'B3','1-3年经验'],['50-150人',39.17,150000000,'B2','1-3年经验'],['少于50人',46.67,150000000,'B1','1-3年经验']],
|
||||
[['10000人以上',10.71,200000000,'C7','3-5年经验'],['5000-10000人',50,200000000,'C6','3-5年经验'],['1000-5000人',14.58,200000000,'C5','3-5年经验'],['500-1000人',37,200000000,'C4','3-5年经验'],['150-500人',24.62,200000000,'C3','3-5年经验'],['50-150人',28.33,200000000,'C2','3-5年经验'],['少于50人',31.11,200000000,'C1','3-5年经验']],
|
||||
[['10000人以上',3.57,250000000,'D7','5-7年经验'],['1000-5000人',5.21,250000000,'D5','5-7年经验'],['500-1000人',12,250000000,'D4','5-7年经验'],['150-500人',12.31,250000000,'D3','5-7年经验'],['50-150人',6.67,250000000,'D2','5-7年经验'],['少于50人',11.11,250000000,'D1','5-7年经验']],
|
||||
[['500-1000人',4,300000000,'E4','7-10年经验'],['150-500人',0.77,300000000,'E3','7-10年经验'],['50-150人',0.83,300000000,'E2','7-10年经验']],
|
||||
[['1000-5000人',1.04,350000000,'F5','10年以上经验'],['150-500人',1.54,350000000,'F3','10年以上经验'],['50-150人',2.5,350000000,'F2','10年以上经验']],
|
||||
];
|
||||
export default function createOpt() {
|
||||
return {
|
||||
title: {
|
||||
show: false,
|
||||
text: '湘西自治州不同规模企业对岗位工作经验要求情况'
|
||||
},
|
||||
legend: {
|
||||
y: 'top',
|
||||
x: 16,
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
data: ['无工作经验', '1-3年经验','3-5年经验','5-7年经验','7-10年经验','10年以上经验']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '2%',
|
||||
bottom: '4%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
data:['少于50人','50-150人','150-500人','500-1000人','1000-5000人','5000-10000人','10000人以上'],
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "#012b4b",
|
||||
}
|
||||
},
|
||||
scale: true,
|
||||
axisLabel : {
|
||||
formatter: '{value} %'
|
||||
},
|
||||
},
|
||||
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: '1-3年经验',
|
||||
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)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '3-5年经验',
|
||||
data: data[2],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(255, 192, 0, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 192, 0)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(255, 192, 0)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '5-7年经验',
|
||||
data: data[3],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(91, 155, 213, 0.)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(91, 155, 213)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(91, 155, 213)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '7-10年经验',
|
||||
data: data[4],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(112, 173, 71, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(112, 173, 71)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(112, 173, 71)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '10年以上经验',
|
||||
data: data[5],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(129, 227, 238, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 19:16:46
|
||||
* @LastEditTime: 2021-10-12 19:21:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/popularwordCloud/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="pwc-outter">
|
||||
<v-label-div title="热门词云" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="pwd-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "popularwordCloud",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pwc-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.pwd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:35:53
|
||||
* @LastEditTime: 2021-10-12 18:42:20
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/rearWingPropagationSituation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="rwps-outter">
|
||||
<v-label-div title="尾翼传播态势" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="rwps-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "rearWingPropagationSituation",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rwps-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.rwps-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:40:53
|
||||
* @LastEditTime: 2021-10-12 16:44:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: "#51bc91",
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#51bc91'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:18:20
|
||||
* @LastEditTime: 2021-10-12 18:29:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="stm-outter">
|
||||
<v-label-div title="传播TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="stm-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "spreadTOPmodels",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(["奥迪A8", "奥迪A6", "奥迪Q3", "奥迪Q4", "奥迪Q5"],[2200, 1900, 1800, 1600, 1400])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.stm-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.stm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:23:25
|
||||
* @LastEditTime: 2021-10-12 18:31:20
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt(dx,ds) {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (params) {
|
||||
var result = "";
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||
params.forEach(function (item) {
|
||||
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "2001",
|
||||
data: ds,
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#51bc8f", // 100% 处的颜色#3373CC
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 09:32:35
|
||||
* @LastEditTime: 2021-10-12 10:39:10
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 舆情传播趋势
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="tit-outter">
|
||||
<div class="tit-header">
|
||||
<a-button type="primary" size="small">进入数据列表页</a-button>
|
||||
<a-button type="primary" style="margin-left: 16px;margin-right: 16px;" size="small">导出报告</a-button>
|
||||
</div>
|
||||
<div class="tit-inner">
|
||||
<vLabel-div title="舆情传播趋势"></vLabel-div>
|
||||
<div class="tit-bd">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "titsopo",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tit-outter {
|
||||
width: 618px;
|
||||
height: 560px;
|
||||
margin-left: 16px;
|
||||
.tit-header {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: linear-gradient(270deg, #07192f 0%, #010B19 100%);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.tit-inner {
|
||||
width: 100%;
|
||||
height: 490px;
|
||||
margin-top: 16px;
|
||||
border: 2px solid #0F2A4D;
|
||||
.tit-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,134 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-13 16:04:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '新闻',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: '论坛',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: '微信',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '微博',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: 'APP',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 14:19:53
|
||||
* @LastEditTime: 2021-10-12 15:22:09
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 微博KOL
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="wk-outter">
|
||||
<div class="wk-inner">
|
||||
<div class="wk-in-d1">
|
||||
<v-label-div title="微博KOL" :showLine="false" :eStyle="{ 'border-style': 'none' }"></v-label-div>
|
||||
<div class="wk-in-d1-dd1">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wk-in-d2">
|
||||
<v-label-ctx label="名人" cont="2000" percentage="25%" color="#3373CC" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="政府" cont="2000" percentage="25%" color="#518ea9" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="大V" cont="1000" percentage="25%" color="#54BF93" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="企业" cont="1000" percentage="25%" color="#b38b14" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="其他" cont="2000" percentage="25%" color="#b56a2f" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "weiboKol",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wk-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.wk-inner {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.wk-in-d1 {
|
||||
width: 310px;
|
||||
height: 100%;
|
||||
.wk-in-d1-dd1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
.wk-in-d2 {
|
||||
width: 310px;
|
||||
height: auto;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:06:47
|
||||
* @LastEditTime: 2021-10-12 17:39:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wp-outter">
|
||||
<v-label-div title="微博人物画像" :showLine="false" :eStyle="{ 'border-style': 'none' }">
|
||||
<v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="wp-inner">
|
||||
<div class="wp-in-d1">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<div class="wp-in-d2">
|
||||
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '121px' }"></v-label-ctx>
|
||||
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12" :eStyle="{ height: '121px' }"></v-label-ctx>
|
||||
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93" :eStyle="{ height: '121px' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "weiboPortraits",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wp-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.wp-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.wp-in-d1 {
|
||||
width: 310px;
|
||||
height: 100%;
|
||||
}
|
||||
.wp-in-d2 {
|
||||
width: 310px;
|
||||
height: auto;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:24:48
|
||||
* @LastEditTime: 2021-10-12 15:34:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wvt-outter">
|
||||
<v-label-div title="微博声量趋势" :showLine="false" :eStyle="{ 'border-style': 'none' }">
|
||||
</v-label-div>
|
||||
<div class="wvt-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "weibo-volume-trend",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wvt-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.wvt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:32:24
|
||||
* @LastEditTime: 2021-10-12 16:47:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: '#546fc5',
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#546fc5'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 14:14:49
|
||||
* @LastEditTime: 2021-10-13 14:22:35
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventDetails/distributionOfHotEventChannels/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="doe-outter">
|
||||
<v-label-div title="热点事件渠道分布" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
|
||||
<div class="doe-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "distributionOfHotEventChannels",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.doe-outter {
|
||||
width: 944px;
|
||||
height: 344px;
|
||||
margin-left: 16px;
|
||||
.doe-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 11:01:19
|
||||
* @LastEditTime: 2021-10-13 14:21:44
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
top: '16%',
|
||||
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: 23
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['产品代言', '新车上市', '新品发布', '领导人', '维权']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '新闻',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 302, 301, 334, 390]
|
||||
},
|
||||
{
|
||||
name: '论坛',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90]
|
||||
},
|
||||
{
|
||||
name: '微信',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290]
|
||||
},
|
||||
{
|
||||
name: '微博',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 212, 201, 154, 190]
|
||||
},
|
||||
{
|
||||
name: 'APP',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [820, 832, 901, 934, 1290]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 13:47:46
|
||||
* @LastEditTime: 2021-10-13 14:11:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventDetails/distributionOfTOPModelsOfHotEvents/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="dotop-outter">
|
||||
<v-label-div title="热点事件TOP车型分布" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
|
||||
<div class="dotop-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
<v-pagination :style="{position: 'absolute', right: '5px', bottom: '6px'}"></v-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "distributionOfTOPModelsOfHotEvents",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dotop-outter {
|
||||
position: relative;
|
||||
width: 944px;
|
||||
height: 344px;
|
||||
.dotop-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 11:01:19
|
||||
* @LastEditTime: 2021-10-13 14:08:29
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
top: '16%',
|
||||
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: 23
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['奥迪A4', '奥迪A3', '奥迪A6', '奥迪A8', '奥迪Q3']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '产品代言',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 302, 301, 334, 390]
|
||||
},
|
||||
{
|
||||
name: '新车上市',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90]
|
||||
},
|
||||
{
|
||||
name: '新品发布',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290]
|
||||
},
|
||||
{
|
||||
name: '领导人',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 212, 201, 154, 190]
|
||||
},
|
||||
{
|
||||
name: '维权',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [820, 832, 901, 934, 1290]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 11:31:08
|
||||
* @LastEditTime: 2021-10-13 15:14:23
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventDetails/eventCorrelation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="ec-outter">
|
||||
<div class="ec-top" align="center">
|
||||
<v-btn @click="goback">返回品牌洞察</v-btn>
|
||||
</div>
|
||||
<div class="ec-inner">
|
||||
<span class="ec-label">奥迪</span>
|
||||
<div class="ec-footer">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_glsl.png" />
|
||||
<div class="d1">
|
||||
<span class="s1">74,073,195</span>
|
||||
<span class="s2">事件关联数量(条)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "eventCorrelation",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ec-outter {
|
||||
display: flex;
|
||||
width: 620px;
|
||||
height: 560px;
|
||||
justify-content: center;
|
||||
margin-left: 16px;
|
||||
.ec-top {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.ec-inner {
|
||||
position: relative;
|
||||
width: 470px;
|
||||
height: 520px;
|
||||
margin-top: 38px;
|
||||
background-image: url("../../../assets/images/BrandInsight/img_tz.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
.ec-label {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 40px;
|
||||
color: #b2daf7;
|
||||
margin-top: 110px;
|
||||
}
|
||||
.ec-footer {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
bottom: 16px;
|
||||
left: 96px;
|
||||
.m1 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.d1 {
|
||||
margin-left: 20px;
|
||||
.s1 {
|
||||
display: block;
|
||||
font-family: Bebas;
|
||||
font-size: 38px;
|
||||
color: #fff;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
color: #afb2b7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 08:59:57
|
||||
* @LastEditTime: 2021-10-13 09:18:58
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 热点事件传播导向
|
||||
* @FilePath: /data-show/src/views/EventDetails/hotEventPropagationOriented/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="hepo-outter">
|
||||
<v-label-div title="热点事件传播导向" />
|
||||
<div class="hepo-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "hotEventPropagationOriented",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.hepo-outter {
|
||||
width: 620px;
|
||||
height: 560px;
|
||||
border: 2px solid #0F2A4D;
|
||||
.hepo-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,94 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 09:09:51
|
||||
* @LastEditTime: 2021-10-13 11:05:48
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventDetails/hotEventPropagationOriented/opt.js
|
||||
*/
|
||||
const citylist = [
|
||||
{name: '领导人'},
|
||||
{name: '自然'},
|
||||
{name: '明星代言人'},
|
||||
{name: '车展'},
|
||||
{name: '新车上市'},
|
||||
{name: '新闻'},
|
||||
{name: '论坛'},
|
||||
{name: '微博'},
|
||||
{name: 'APP'},
|
||||
{name: '短视频'},
|
||||
{name: '吉利'},
|
||||
{name: '奔驰'},
|
||||
{name: '宝马'},
|
||||
{name: '特斯拉'},
|
||||
{name: '奥迪'},
|
||||
{name: '女车主表态'},
|
||||
{name: '广州车展'},
|
||||
{name: '销量大增'},
|
||||
];
|
||||
const population=[
|
||||
{source: "领导人", target: "APP", value: 2000},
|
||||
{source: "APP", target: "宝马", value: 3000},
|
||||
//
|
||||
{source: "明星代言人", target: "论坛", value: 1000},
|
||||
//
|
||||
{source: "自然", target: "论坛", value: 2100},
|
||||
{source: "论坛", target: "宝马", value: 3100},
|
||||
{source: "宝马", target: "广州车展", value: 5100},
|
||||
//
|
||||
{source: "自然", target: "新闻", value: 3234},
|
||||
{source: "新闻", target: "吉利", value: 3000},
|
||||
{source: "吉利", target: "销量大增", value: 6000},
|
||||
//
|
||||
{source: "车展", target: "微博", value: 1234},
|
||||
{source: "微博", target: "特斯拉", value: 3234},
|
||||
{source: "特斯拉", target: "销量大增", value: 4234},
|
||||
//
|
||||
{source: "新车上市", target: "APP", value: 1234},
|
||||
{source: "APP", target: "宝马", value: 1234},
|
||||
//
|
||||
{source: "新车上市", target: "短视频", value: 2234},
|
||||
{source: "短视频", target: "奔驰", value: 2234},
|
||||
{source: "奔驰", target: "广州车展", value: 2234},
|
||||
//
|
||||
{source: "APP", target: "奥迪", value: 2234},
|
||||
{source: "奥迪", target: "销量大增", value: 2234},
|
||||
//
|
||||
{source: "奔驰", target: "女车主表态", value: 5234},
|
||||
];
|
||||
export default function createOpt() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
triggerOn: 'mousemove',
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
data: citylist,
|
||||
links: population,
|
||||
focusNodeAdjacency: 'allEdges', //鼠标悬停到节点或边上，相邻接的节点和边高亮显示
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'target',
|
||||
curveness: 0.5,
|
||||
opacity:0.5
|
||||
},
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 08:53:49
|
||||
* @LastEditTime: 2021-10-13 14:33:43
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 事件详情
|
||||
* @FilePath: /data-show/src/views/EventDetails/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="ed-d1">
|
||||
<hotEventPropagationOriented></hotEventPropagationOriented>
|
||||
<eventCorrelation></eventCorrelation>
|
||||
<hotOther></hotOther>
|
||||
</div>
|
||||
<div class="ed-d2">
|
||||
<div class="ed-d2-inner">
|
||||
<v-label-div title="事件洞察"/>
|
||||
<div class="ed-d2-bd">
|
||||
<distributionOfTOPModelsOfHotEvents></distributionOfTOPModelsOfHotEvents>
|
||||
<distributionOfHotEventChannels></distributionOfHotEventChannels>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import hotEventPropagationOriented from "./hotEventPropagationOriented"
|
||||
import eventCorrelation from "./eventCorrelation"
|
||||
import hotOther from "./hotOther"
|
||||
import distributionOfTOPModelsOfHotEvents from "./distributionOfTOPModelsOfHotEvents"
|
||||
import distributionOfHotEventChannels from "./distributionOfHotEventChannels"
|
||||
export default {
|
||||
name: "event-details",
|
||||
components: {
|
||||
hotEventPropagationOriented, // 热点事件传播导向桑基图
|
||||
eventCorrelation, // 中间
|
||||
hotOther, // 热点事件传播导向列表
|
||||
distributionOfTOPModelsOfHotEvents, // 热点事件TOP车型分布
|
||||
distributionOfHotEventChannels // 热点事件渠道分布
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ed-d1 {
|
||||
display: flex;
|
||||
padding: 0px 16px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ed-d2 {
|
||||
padding: 0px 16px;
|
||||
height: 392px;
|
||||
margin-top: 16px;
|
||||
.ed-d2-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #0F2A4D;
|
||||
.ed-d2-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:32:24
|
||||
* @LastEditTime: 2021-10-13 15:54:53
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOptD1() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: '#546fc5',
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#546fc5'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-13 16:04:16
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
export default function createOptD2() {
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
bottom: 16,
|
||||
top: 50,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'A4',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: 'Q5',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: 'A3',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: 'Q7',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: 'Q3',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-09 11:28:39
|
||||
* @LastEditTime: 2021-10-12 10:42:35
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 晴雨表
|
||||
* @FilePath: /data-show/src/views/Index/barometer/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bm-outter">
|
||||
<v-label-div title="晴雨表">
|
||||
<div>
|
||||
<v-tab-group :btns="['正负调性', '负面等级']"></v-tab-group>
|
||||
</div>
|
||||
</v-label-div>
|
||||
<div class="bm-bd">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "barometer",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bm-outter {
|
||||
width: 460px;
|
||||
height: 312px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bm-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 11:38:06
|
||||
* @LastEditTime: 2021-10-11 17:56:05
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/barometer/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
top: '22%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 'top',
|
||||
x: 0
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
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]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,155 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-09 14:25:05
|
||||
* @LastEditTime: 2021-10-11 18:11:01
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 大数据统计gif
|
||||
* @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dy-outter">
|
||||
<div class="d1">
|
||||
<span class="s1">APP</span>
|
||||
<span class="s2">
|
||||
<countTo :startVal='0' :endVal='1320897' :duration='3000'></countTo>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d1" :style="{top: '340px', left: '0px'}">
|
||||
<span class="s1">其他</span>
|
||||
<span class="s2">
|
||||
<countTo :startVal='0' :endVal='822588' :duration='3000'></countTo>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d1" :style="{top: '91px', left: '426px'}">
|
||||
<span class="s1">微信</span>
|
||||
<span class="s2">
|
||||
<countTo :startVal='0' :endVal='658345' :duration='3000'></countTo>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d2" :style="{top: '240px', left: '656px'}">
|
||||
<span class="s1">
|
||||
<countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
|
||||
</span>
|
||||
<span class="s2">论坛</span>
|
||||
</div>
|
||||
<div class="d2" :style="{top: '340px', left: '656px'}">
|
||||
<span class="s1">
|
||||
<countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
|
||||
</span>
|
||||
<span class="s2">微博</span>
|
||||
</div>
|
||||
<div class="d2" :style="{top: '490px', left: '246px'}">
|
||||
<span class="s1">
|
||||
<countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
|
||||
</span>
|
||||
<span class="s2">新闻</span>
|
||||
</div>
|
||||
<div class="d3">
|
||||
<span class="s1">系统入库 数据总量</span>
|
||||
<span class="s2">
|
||||
<countTo :startVal='0' :endVal='274073195' :duration='3000'></countTo>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countTo from 'vue-count-to';
|
||||
export default {
|
||||
name: "dynamic-number",
|
||||
components: {
|
||||
countTo
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dy-outter {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../../../assets/images/Index/d3.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
.d1 {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
height: 60px;
|
||||
background-image: url('../../../assets/images/Index/img_jbtter.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
top: 240px;
|
||||
left: 0px;
|
||||
.s1 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
margin-left: 32px;
|
||||
color: #d2dadf;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-family: Bebas;
|
||||
color: #FFFFFF;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
.d2 {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
height: 60px;
|
||||
background-image: url('../../../assets/images/Index/img_jbtter.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
top: 240px;
|
||||
left: 0px;
|
||||
.s2 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
margin-left: 32px;
|
||||
color: #d2dadf;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.s1 {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-family: Bebas;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.d3 {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 82px;
|
||||
background-image: url('../../../assets/images/Index/img_jbtt.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
left: 308px;
|
||||
top: 323px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.s1 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #d2dadf;
|
||||
width: 72px;
|
||||
margin-left: 38px;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-family: Bebas;
|
||||
color: #FFFFFF;
|
||||
margin-left: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-09 13:25:49
|
||||
* @LastEditTime: 2021-10-12 10:42:58
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 热议图谱
|
||||
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="hdg-ouuter">
|
||||
<v-label-div title="热议图谱">
|
||||
<v-tab-group :btns="['热门', '正面', '负面']"></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="hdg-bd">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "hot-discussion-graph",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.hdg-ouuter {
|
||||
width: 460px;
|
||||
height: 312px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
margin-left: 16px;
|
||||
.hdg-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-08 09:17:42
|
||||
* @LastEditTime: 2021-10-13 14:51:05
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 行业洞察
|
||||
* @FilePath: /data-show/src/views/Index/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="In-body">
|
||||
<div class="d1">
|
||||
<real-time-event></real-time-event>
|
||||
<key-communication-positions></key-communication-positions>
|
||||
<spread-the-sound></spread-the-sound>
|
||||
</div>
|
||||
<div class="d2">
|
||||
<div class="d2-top">
|
||||
<dynamic-number></dynamic-number>
|
||||
</div>
|
||||
<div class="d2-bottom">
|
||||
<barometer></barometer>
|
||||
<tail-insight></tail-insight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d3">
|
||||
<sales-rank></sales-rank>
|
||||
<user-portrait></user-portrait>
|
||||
<hot-discussion-graph></hot-discussion-graph>
|
||||
</div>
|
||||
</div>
|
||||
<!--对话框-->
|
||||
<v-modal
|
||||
:eleStyle="{ width: '1200px', height: '720px' }"
|
||||
:visible.sync="modalObj.visible"
|
||||
:title="modalObj.title"
|
||||
>
|
||||
<div slot="body" :style="{padding: '16px'}">
|
||||
<v-table :columns="columns" :data="tbData" :pagination="false"> </v-table>
|
||||
</div>
|
||||
|
||||
</v-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import realTimeEvent from "./realTimeEvent";
|
||||
import keyCommunicationPositions from "./keyCommunicationPositions";
|
||||
import salesRank from "./salesRank";
|
||||
import userPortrait from "./userPortrait";
|
||||
import spreadTheSound from "./spreadTheSound";
|
||||
import barometer from "./barometer";
|
||||
import tailInsight from "./tailInsight";
|
||||
import hotDiscussionGraph from "./hotDiscussionGraph";
|
||||
import dynamicNumber from "./dynamicNumber";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
realTimeEvent, // 实时事件
|
||||
keyCommunicationPositions, // 传播重点阵地
|
||||
salesRank, // 热销排行
|
||||
userPortrait, // 用户画像
|
||||
spreadTheSound, // 传播声量TOP10
|
||||
barometer, // 晴雨表
|
||||
tailInsight, // 尾翼洞察
|
||||
hotDiscussionGraph, // 热议图谱
|
||||
dynamicNumber, // 中间大数据
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modalObj: {
|
||||
title: "全网数据实时动态",
|
||||
visible: false,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "标题",
|
||||
key: "name",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
},
|
||||
{
|
||||
title: "作者",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
},
|
||||
{
|
||||
title: "来源",
|
||||
dataIndex: "laiyuan",
|
||||
key: "laiyuan",
|
||||
},
|
||||
],
|
||||
tbData: [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York No. 1 Lake Park",
|
||||
tags: ["nice", "developer"],
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 42,
|
||||
address: "London No. 1 Lake Park",
|
||||
tags: ["loser"],
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
tags: ["cool", "teacher"],
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.In-body {
|
||||
padding: 0px 16px 16px 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d2 {
|
||||
width: 936px;
|
||||
margin-left: 16px;
|
||||
.d2-top {
|
||||
width: 100%;
|
||||
height: 644px;
|
||||
}
|
||||
.d2-bottom {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-08 16:37:30
|
||||
* @LastEditTime: 2021-10-12 10:43:12
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 传播重点阵地
|
||||
* @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="kcp-outter">
|
||||
<v-label-div title="传播重点阵地"></v-label-div>
|
||||
<div class="kcp-inner">
|
||||
<div class="d1">
|
||||
<v-ranking :num="1" label="懂车帝" val="594614" :lineShow="false"></v-ranking>
|
||||
<v-ranking :num="2" label="今日头条" val="594614"></v-ranking>
|
||||
<v-ranking :num="3" label="汽车之家" val="594614"></v-ranking>
|
||||
<v-ranking :num="4" label="抖音" val="594614"></v-ranking>
|
||||
<v-ranking :num="5" label="新浪微博" val="594614"></v-ranking>
|
||||
</div>
|
||||
<div class="d1" style="margin-left: 14px">
|
||||
<v-ranking :num="6" label="懂车帝" val="594614" :lineShow="false"></v-ranking>
|
||||
<v-ranking :num="7" label="今日头条" val="594614"></v-ranking>
|
||||
<v-ranking :num="8" label="汽车之家" val="594614"></v-ranking>
|
||||
<v-ranking :num="9" label="抖音" val="594614"></v-ranking>
|
||||
<v-ranking :num="10" label="新浪微博" val="594614"></v-ranking>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "key-communication-positions",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.kcp-outter {
|
||||
width: 460px;
|
||||
height: 316px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.kcp-inner {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,65 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-08 18:58:00
|
||||
* @LastEditTime: 2021-10-12 10:43:37
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 热销排行
|
||||
* @FilePath: /data-show/src/views/Index/salesRank/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="sr-outter">
|
||||
<v-label-div title="热销排行">
|
||||
<div>
|
||||
<v-tab-group :btns="['品牌', '车型']"></v-tab-group>
|
||||
<a-select
|
||||
default-value="lucy"
|
||||
style="width: 80px;margin-left: 16px"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-select-option value="jack"> Jack </a-select-option>
|
||||
<a-select-option value="lucy"> Lucy </a-select-option>
|
||||
<a-select-option value="disabled" disabled>
|
||||
Disabled
|
||||
</a-select-option>
|
||||
<a-select-option value="Yiminghe"> yiminghe </a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</v-label-div>
|
||||
<div class="sr-bd">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
<v-pagination :style="{position: 'absolute', right: '2px', bottom: '11px'}"></v-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "sales-rank",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(["奥迪", "宝马", "奔驰", "吉利", "江淮"],[120, 200, 150, 80, 70])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sr-outter {
|
||||
width: 460px;
|
||||
height: 312px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.sr-bd {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,97 @@
|
||||
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 19:24:08
|
||||
* @LastEditTime: 2021-10-09 16:45:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/salesRank/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt(dx, ds) {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (params) {
|
||||
var result = "";
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||
params.forEach(function (item) {
|
||||
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "2001",
|
||||
data: ds,
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-09 10:53:21
|
||||
* @LastEditTime: 2021-10-12 10:44:01
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 传播声量TOP10
|
||||
* @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="st-outter">
|
||||
<v-label-div title="传播声量TOP10">
|
||||
<div>
|
||||
<v-tab-group :btns="['品牌', '车型']"></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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "spread-the-sound",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.st-outter {
|
||||
width: 460px;
|
||||
height: 312px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.st-bd {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue