Commit db074cd4 authored by liudong1993's avatar liudong1993
parents 088cca40 3c4bfc2f
...@@ -49,10 +49,10 @@ ...@@ -49,10 +49,10 @@
font-family:'方正宋三简体'; font-family:'方正宋三简体';
src:url('../webfont/FZSSJ.ttf') format('truetype') src:url('../webfont/FZSSJ.ttf') format('truetype')
} }
@font-face{ /* @font-face{
font-family:'PingFang SC'; font-family:'PingFang SC';
src:url('../webfont/Semibold.woff') format('woff') src:url('../webfont/Semibold.woff') format('woff')
} } */
@font-face{ @font-face{
font-family:'PingFang SC Regular'; font-family:'PingFang SC Regular';
src:url('../webfont/pingfang.ttf') format('truetype') src:url('../webfont/pingfang.ttf') format('truetype')
......
...@@ -192,12 +192,13 @@ ...@@ -192,12 +192,13 @@
</td> </td>
<td>{{item.expirationDate}}</td> <td>{{item.expirationDate}}</td>
<td> <td>
<span v-if="item.couponsUseScope == 1">{{$t('MarketingActi.alltongyong')}}</span> {{item.couponsUseScope.couponsUseScope}}
<!-- <span v-if="item.couponsUseScope == 1">{{$t('MarketingActi.alltongyong')}}</span>
<span v-if="item.couponsUseScope == 2">{{$t('active.cl_team')}}</span> <span v-if="item.couponsUseScope == 2">{{$t('active.cl_team')}}</span>
<span v-if="item.couponsUseScope == 3">{{$t('active.cl_qianzheng')}}</span> <span v-if="item.couponsUseScope == 3">{{$t('active.cl_qianzheng')}}</span>
<span v-if="item.couponsUseScope == 4">{{$t('active.cl_jipiao')}}</span> <span v-if="item.couponsUseScope == 4">{{$t('active.cl_jipiao')}}</span>
<span v-if="item.couponsUseScope == 5">{{$t('scen.sc_piao')}}</span> <span v-if="item.couponsUseScope == 5">{{$t('scen.sc_piao')}}</span>
<span v-if="item.couponsUseScope == 6">{{$t('MarketingActi.car')}}</span> <span v-if="item.couponsUseScope == 6">{{$t('MarketingActi.car')}}</span> -->
</td> </td>
<td> <td>
<span v-if="item.couponStatus == 1" style="color: green">{{$t('pub.normalSel')}}</span> <span v-if="item.couponStatus == 1" style="color: green">{{$t('pub.normalSel')}}</span>
......
<template>
<div id="citiesCount" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('citiesCount');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'item'
},
color: [
'#04cf89', '#6184fa', '#faa42e', '#ffd1ce',
'#8dd1e1', '#f95d6a', '#2ca02c', '#ff7f0e',
'#9467bd', '#bcbd22'
],
grid: {
left: 0,
right: 0,
top: 3,
bottom: 3,
containLabel: true,
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['70%', '90%'], // 饼图内外半径
avoidLabelOverlap: false, // 避免标签重叠
itemStyle: {
barBorderRadius: [10, 10, 0, 0],
borderWidth: 5, // 设置扇形之间的间隙宽度
borderColor: '#fff', // 扇形间隙颜色(通常设置为白色以突出间隙)
},
label: {
show: false, // 默认不显示标签
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 15,
FontFace: 'PingFang SC Regular'
}
},
labelLine: {
show: false // 不显示标签指示线
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
<template>
<div id="coreview" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
lineData: {
name: '新增激活数',
data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05',
'11/06', '11/07', '11/08', '11/09', '11/10',
'11/11', '11/12', '11/13', '11/14', '11/15',
'11/16', '11/17', '11/18', '11/19', '11/20',
'11/21', '11/22', '11/23', '11/24', '11/25',
'11/26', '11/27', '11/28', '11/29', '11/30'
],
unit: '人'
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('coreview');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
axisPointer: {
type: 'line', // 使用竖线跟随鼠标
lineStyle: {
color: '#00000022',
width: 1,
type: 'dashed',
}
},
},
grid: {
left: 0,
right: 0,
top: 10,
bottom: 0,
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
xAxisLabel: {
show: true,
color: '#999',
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length)
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line'
}
},
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.lineData.name,
type: 'line',
smooth: true,
areaStyle: {
// Add gradient color for the area
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#e4f9f0' },
{ offset: 1, color: '#ffffff' }
]),
},
lineStyle: {
color: '#04cf89',
width: 2,
},
itemStyle: {
color: '#04cf89',
},
symbol: 'circle',
symbolSize: 2,
data: this.lineData.data,
},
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
<template>
<div id="chart" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [],
},
lineData: {
name: '新增激活数',
data: [],
},
xAxisData: [],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
watch: {
chartData: function (old, val) {
if (this.chartData) {
this.barData.data = this.chartData.customerYData;
this.lineData.data = this.chartData.activationYData;
this.xAxisData = this.chartData.xData;
}
this.initChart();
}
},
mounted() {
// this.unit = this.chartData.unit;
if (this.chartData) {
this.barData.data = this.chartData.customerYData;
this.lineData.data = this.chartData.activationYData;
this.xAxisData = this.chartData.xData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('chart');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
axisPointer: {
type: 'line', // 使用竖线跟随鼠标
lineStyle: {
color: '#00000022',
width: 1,
type: 'dashed',
}
},
},
legend: {
bottom: 10,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
},
data: [this.barData.name, this.lineData.name],
},
grid: {
left: 0,
right: 0,
top: 30,
bottom: 40,
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
xAxisLabel: {
show: true,
color: '#999',
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length)
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line'
}
},
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [{
name: this.barData.name,
type: 'bar',
barWidth: 20,
itemStyle: {
color: '#6184fa',
barBorderRadius: [4, 4, 0, 0]
},
data: this.barData.data,
},
{
name: this.lineData.name,
type: 'line',
smooth: true,
lineStyle: {
color: '#04cf89',
width: 2,
},
itemStyle: {
color: '#04cf89',
},
symbol: 'circle',
symbolSize: 2,
data: this.lineData.data,
},
],
};
this.chart.setOption(option);
},
setOpacity(seriesName) {
const option = this.chart.getOption();
option.series.forEach((series) => {
console.log(series.name, seriesName + '----')
if (seriesName == '') {
if (series.itemStyle) series.itemStyle.opacity = 1;
if (series.lineStyle) series.lineStyle.opacity = 1;
} else if (series.name != seriesName) {
if (series.itemStyle) series.itemStyle.opacity = 0.1;
if (series.lineStyle) series.lineStyle.opacity = 0.1;
}
});
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
<template>
<div id="pageChart" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05','11/06', '11/07', '11/08', '11/09', '11/10','11/11', '11/12'
],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('pageChart');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
axisPointer: {
type: 'line', // 使用竖线跟随鼠标
lineStyle: {
color: '#00000022',
width: 1,
type: 'dashed',
}
},
},
grid: {
right: 0,
top: 0,
bottom: 0,
},
yAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
xAxisLabel: {
show: true,
color: '#999',
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length)
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line'
}
},
xAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.barData.name,
type: 'bar',
barWidth: 10,
itemStyle: {
color: '#04cf89',
barBorderRadius: [0, 4, 4, 0]
},
data: this.barData.data,
}
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
<template>
<div id="tradecount" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199, 125, 291, 187, 92, 243, 148, 212, 117, 279, 103, 137, 256, 221, 193, 88, 283, 165, 111, 239, 107],
},
lineData: {
name: '新增激活数',
data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05',
'11/06', '11/07', '11/08', '11/09', '11/10',
'11/11', '11/12', '11/13', '11/14', '11/15',
'11/16', '11/17', '11/18', '11/19', '11/20',
'11/21', '11/22', '11/23', '11/24', '11/25',
'11/26', '11/27', '11/28', '11/29', '11/30'
],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('tradecount');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 鼠标悬浮时触发
axisPointer: {
type: 'shadow', // 使用阴影指示
},
},
legend: {
bottom: 10,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
},
data: [this.barData.name, this.lineData.name],
},
grid: {
left: 0,
right: 0,
top: 30,
bottom: 40,
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length),
},
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.barData.name,
type: 'bar',
stack: 'total', // 设置堆叠
barWidth: 10,
itemStyle: {
color: '#6184fa',
arBorderRadius: [2, 2, 0, 0]
},
data: this.barData.data,
},
{
name: this.lineData.name,
type: 'bar',
stack: 'total', // 设置堆叠
barWidth: 10,
itemStyle: {
color: '#04cf89',
barBorderRadius: [2, 2, 0, 0]
},
data: this.lineData.data,
},
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#tradecount {
width: 100%;
height: 100%;
}
</style>
This diff is collapsed.
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
let isOnline = 0; //0-本地测试,1-线上 let isOnline = 0; //0-本地测试,1-线上
let ocrUrl = "http://192.168.5.46:8888"; let ocrUrl = "http://192.168.5.46:8888";
domainUrl = "http://192.168.5.39:8083"; domainUrl = "http://192.168.5.39:8083";
domainUrl = "http://192.168.5.56"; domainUrl = "http://192.168.5.46:8501";
// domainUrl = "http://reborn.oytour.com"; // domainUrl = "http://reborn.oytour.com";
let crmLocalFileStreamDownLoadUrl = ""; let crmLocalFileStreamDownLoadUrl = "";
crmLocalFileStreamDownLoadUrl = locationName.indexOf('oytour') !== -1 ? "http://crm.oytour.com" : "http://testcrm.oytour.com"; crmLocalFileStreamDownLoadUrl = locationName.indexOf('oytour') !== -1 ? "http://crm.oytour.com" : "http://testcrm.oytour.com";
......
...@@ -6285,7 +6285,15 @@ export default { ...@@ -6285,7 +6285,15 @@ export default {
meta: { meta: {
title: '维护教育视频' title: '维护教育视频'
}, },
} },
{
path: '/data_count', //维护教育视频
name: 'data_count',
component: resolve => require(['@/components/rank/dataCount'], resolve),
meta: {
title: '客户运营数据统计'
},
},
] ]
}, },
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment