yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cxw-010203

Browse Source
prod
lily.zhang 3 years ago
parent c4b9d8c8bc
commit 0256369031
6 changed files with 245 additions and 162 deletions
Show Stats Download Patch File Download Diff File

32
src/api/home/index.js
Unescape View File

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

50
src/views/Index/barometer/index.vue
Unescape View File

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

88
src/views/Index/barometer/opt.js
Unescape View File

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

45
src/views/Index/spreadTheSound/index.vue
Unescape View File

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

188
src/views/Index/spreadTheSound/opt.js
Unescape View File

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

4
src/views/Index/tailInsight/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save