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

cxw-010203

Browse Source
prod
lily.zhang 4 years ago
parent 0256369031
commit 2f6c5bef65
11 changed files with 279 additions and 165 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 15:27:39
* @LastEditTime: 2021-10-21 17:32:22
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/home/index.js
@ -37,7 +37,15 @@ export function getHomeCount0528(params) {
params: obj
})
}
// 首页_热销排行-选择框
export function getCheZhuTime0528(params) {
let obj = Object.assign({action: 'getCheZhuTime0528'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_热销排行
export function getCheZhuBrandCount0528(params) {
let obj = Object.assign({action: 'getCheZhuBrandCount0528',sType: 'Home'}, params)
@ -115,4 +123,24 @@ export function getHomeBrandSourceType0528(params) {
method: 'get',
params: obj
})
}
// 首页_获取用户画像
export function getSexOrAttestationOrRegionHome0528(params) {
let obj = Object.assign({action: 'getSexOrAttestationOrRegionHome0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_全网传播数量详情数据
export function getHomeList0528(params) {
let obj = Object.assign({action: 'getHomeList0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}

33
src/components/v-echars/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-08 19:12:07
* @LastEditTime: 2021-10-13 17:28:06
* @LastEditTime: 2021-10-21 17:03:11
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edi
* @FilePath: /data-show/src/components/v-echars/index.vue
@ -33,6 +33,7 @@ export default {
} else {
this.myChart.setOption(val);
}
this.roundDefaultSelect(this.myChart);
this.$emit('echarsUpdate', this.myChart)
})
}
@ -46,10 +47,40 @@ export default {
}
},
methods: {
// 画图
drawFun(opt) {
let eRef = this.$refs.myChart;
this.myChart = echarts.init(eRef);
this.myChart.setOption(opt);
},
// 针对圆特定图形加个默认被选择
roundDefaultSelect(myChart) {
if(myChart.getOption().series[0].type != 'pie') {
return;
}
let index = 0;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
myChart.on("mouseover", function (e) {
if (e.dataIndex != index) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
myChart.on("mouseout", function (e) {
index = e.dataIndex;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
}
}
}

4
src/components/v-label-ctx/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-09 09:19:06
* @LastEditTime: 2021-10-12 14:59:47
* @LastEditTime: 2021-10-21 16:03:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-label-ctx/index.vue
@ -33,7 +33,7 @@ export default {
},
contLabel: {
type: String,
default: "销量"
default: "数量"
},
cont: {
type: [String, Number],

1
src/lycomponents/iHeader/index.vue
Unescape View File

@ -94,7 +94,6 @@ export default {
this.setCommTime({sTimeType: val});
if(this.sTimeType != this.selVal) {
this.setCommTime({sStartTime: "",sEndTime: ""});
console.log(this.getCommTime)
}
},
// 获取当前日期时间

3
src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:41:17
* @LastEditTime: 2021-10-15 14:37:24
* @LastEditTime: 2021-10-21 16:50:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@ -50,7 +50,6 @@ export default {
});
}
});
myChart.on("mouseout", function (e) {
index = e.dataIndex;
myChart.dispatchAction({

10
src/views/Index/dynamicNumber/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-09 14:25:05
* @LastEditTime: 2021-10-20 18:16:19
* @LastEditTime: 2021-10-21 17:54:25
* @LastEditors: Please set LastEditors
* @Description: 大数据统计gif
* @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
@ -44,7 +44,7 @@
</span>
<span class="s2">新闻</span>
</div>
<div class="d3">
<div class="d3" @click="handlerAllData">
<span class="s1">系统入库 数据总量</span>
<span class="s2">
<countTo :startVal='0' :endVal='form.total' :duration='3000'></countTo>
@ -79,6 +79,7 @@ export default {
this.getData()
},
methods: {
// 获取后台数据
getData() {
getHomeCount0528(this.getCommTime).then(res => {
let data = res.data;
@ -103,6 +104,10 @@ export default {
}
})
},
// 点击中间的全网数据显示
handlerAllData() {
this.$emit('allData')
}
}
}
@ -180,6 +185,7 @@ export default {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
.s1 {
display: block;
font-size: 18px;

47
src/views/Index/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-08 09:17:42
* @LastEditTime: 2021-10-13 14:51:05
* @LastEditTime: 2021-10-21 17:55:54
* @LastEditors: Please set LastEditors
* @Description: 行业洞察
* @FilePath: /data-show/src/views/Index/index.vue
@ -16,7 +16,7 @@
</div>
<div class="d2">
<div class="d2-top">
<dynamic-number></dynamic-number>
<dynamic-number @allData="handlerAllData"></dynamic-number>
</div>
<div class="d2-bottom">
<barometer></barometer>
@ -53,6 +53,7 @@ import barometer from "./barometer";
import tailInsight from "./tailInsight";
import hotDiscussionGraph from "./hotDiscussionGraph";
import dynamicNumber from "./dynamicNumber";
import {getHomeList0528} from "@/api/home";
export default {
name: "index",
components: {
@ -94,31 +95,27 @@ export default {
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"],
},
]
tbData: [],
form: {
RefreshTime: ""
}
};
},
created() {
},
methods: {
handlerAllData() {
this.modalObj.visible = true;
},
getTableList() {
let obj = Object.assign({}, this.getCommTime, this.form)
console.log(obj)
getHomeList0528(obj).then(res => {
console.log(res)
})
}
}
};
</script>

62
src/views/Index/salesRank/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-08 18:58:00
* @LastEditTime: 2021-10-20 18:52:14
* @LastEditTime: 2021-10-21 16:08:27
* @LastEditors: Please set LastEditors
* @Description: 热销排行
* @FilePath: /data-show/src/views/Index/salesRank/index.vue
@ -11,58 +11,84 @@
<v-label-div title="热销排行">
<div>
<v-tab-group :btns="['品牌', '车型']" @change="handlerTabChange"></v-tab-group>
<a-select v-model="form.sTimeType" style="width: 80px;margin-left: 16px">
<a-select-option v-for="item in selArr" :key="item.key" :value="item.key"> {{item.value}} </a-select-option>
<a-select v-model="selVal" style="width: 100px;margin-left: 16px" @change="handlerSelect">
<a-select-option v-for="item in selArr" :key="item.key" :value="item.key"> {{item.key}} </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>
<v-pagination :data="pdata" :style="{position: 'absolute', right: '2px', bottom: '11px'}" @change="handlerPage"></v-pagination>
</div>
</div>
</template>
<script>
import createOpt from "./opt";
import {getOneTime} from "@/api/comm"
import {getCheZhuBrandCount0528} from "@/api/home"
import {getCheZhuBrandCount0528, getCheZhuTime0528} from "@/api/home"
export default {
name: "sales-rank",
data() {
return {
selVal: "",
form: {
sQueryType: 1,
sTimeType: 34,
sType: 'Home'
sTimeType: 4,
sStartTime: "",
sEndTime: ""
},
selArr: [],
opt: createOpt(
["奥迪", "宝马", "奔驰", "吉利", "江淮"],
[120, 200, 150, 80, 70]
),
pdata: [],
opt:{},
};
},
created() {
this.getSelect();
this.getData()
},
methods: {
// 选择车型
handlerTabChange(n) {
this.form.sQueryType = n === 0 ? 1 : 2
this.form.sQueryType = n + 1;
this.getData();
},
// 选择时间
handlerSelect(key) {
let n = this.selArr.findIndex(ele => {
return ele.key === key
})
let obj = this.selArr[n];
this.form.sStartTime = obj.starttime;
this.form.sEndTime = obj.endtime;
this.getData();
},
// 获取选择时间的数据
getSelect() {
getOneTime().then(res => {
getCheZhuTime0528().then(res => {
this.selArr = res.data
this.selVal = this.selArr[0].key;
this.form.sStartTime = this.selArr[0].starttime;
this.form.sEndTime = this.selArr[0].endtime;
this.getData();
})
},
// 获取数据
getData() {
let obj = Object.assign({}, this.getCommTime, this.form)
getCheZhuBrandCount0528(obj).then(res => {
console.log(res)
getCheZhuBrandCount0528(this.form).then(res => {
let data = res.data;
this.pdata = data;
})
},
// 获取分页的数据
handlerPage(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)
}
},
};

13
src/views/Index/salesRank/opt.js
Unescape View File

@ -2,7 +2,7 @@
/*
* @Author: your name
* @Date: 2021-10-08 19:24:08
* @LastEditTime: 2021-10-09 16:45:39
* @LastEditTime: 2021-10-21 15:55:06
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/salesRank/opt.js
@ -11,10 +11,10 @@ import * as echarts from "echarts";
export default function createOpt(dx, ds) {
return {
grid: {
top: "16px",
left: "16px",
right: "28px",
bottom: "16px",
top: 16,
left: 16,
right: 28,
bottom: 16,
containLabel: true,
},
tooltip: {
@ -38,6 +38,9 @@ export default function createOpt(dx, ds) {
},
xAxis: {
type: "category",
axisLabel :{
interval:0
},
axisTick: {
show: false,
},

69
src/views/Index/userPortrait/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-09 09:04:01
* @LastEditTime: 2021-10-12 10:44:39
* @LastEditTime: 2021-10-21 18:03:22
* @LastEditors: Please set LastEditors
* @Description: 用户画像
* @FilePath: /data-show/src/views/Index/userPortrait/index.vue
@ -9,16 +9,14 @@
<template>
<div class="u-p-outter">
<v-label-div title="用户画像">
<v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
<v-tab-group :btns="['性别', '认证', '地区']" @change="handlerTab"></v-tab-group>
</v-label-div>
<div class="u-p-bd">
<div class="u-p-char">
<v-echarts :opt="opt"></v-echarts>
<v-echarts :opt="opt" ></v-echarts>
</div>
<div class="u-p-bd-1">
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC"></v-label-ctx>
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93"></v-label-ctx>
<v-label-ctx :label="item.key" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" v-for="(item,index) in labelData" :key="index"></v-label-ctx>
</div>
</div>
</div>
@ -26,13 +24,70 @@
<script>
import createOpt from "./opt"
import {getSexOrAttestationOrRegionHome0528} from "@/api/home"
export default {
name: "user-portrait",
data() {
return {
opt: createOpt()
attestation: [], // 认证
sex: [], // 性别
region: [], // 地区
opt: {},
labelData: [],
totalData: 0,
colors: ['#54BF93', '#3373CC', '#CC9D12','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
}
},
created() {
this.getData()
},
methods: {
// 切换数据
handlerTab(n) {
if(n === 0) {
this.labelData = this.sex;
let total = 0;
this.sex.forEach(ele => {
total+=ele.value;
})
this.totalData = total;
this.opt = createOpt(this.sex, ['#54BF93', '#3373CC', '#CC9D12']);
} else if(n === 1) {
this.labelData = this.attestation;
let total = 0;
this.attestation.forEach(ele => {
total+=ele.value;
})
this.totalData = total;
this.opt = createOpt(this.attestation, this.colors);
} else {
this.labelData = this.region;
let total = 0;
this.region.forEach(ele => {
total+=ele.value;
})
this.totalData = total;
this.opt = createOpt(this.region, this.colors);
}
},
// 获取远程数据
getData() {
getSexOrAttestationOrRegionHome0528(this.getCommTime).then(res => {
let data = res.data;
this.attestation = data.attestation;
this.sex = data.sex;
this.region = data.region;
let total = 0;
this.sex.forEach(ele => {
total+=ele.value;
})
this.totalData = total;
this.labelData = this.sex;
this.opt = createOpt(this.sex, ['#54BF93', '#3373CC', '#CC9D12']);
})
},
}
}
</script>

170
src/views/Index/userPortrait/opt.js
Unescape View File

@ -1,110 +1,80 @@
/*
* @Author: your name
* @Date: 2021-10-09 09:49:50
* @LastEditTime: 2021-10-09 10:38:26
* @LastEditTime: 2021-10-21 17:33:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/userPortrait/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
color: "#ffff",
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
},
{
name: 'Access From1',
type: 'pie',
radius: ['86%', '94%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
]
// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: colors[index]
}])
}
}
arr.push(obj)
})
return arr;
}
export default function createOpt(ds = [], color = []) {
const data = createData(ds, color);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '20',
color: "#ffff",
fontWeight: 'bold',
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data
},
{
name: 'Access From1',
type: 'pie',
radius: ['86%', '94%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

Write Preview
Loading…
Cancel
Save