销售分析数据对接
This commit is contained in:
@@ -20,27 +20,27 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-wrapper">
|
<div class="stat-wrapper">
|
||||||
<span class="stat-value"><span>121</span>%</span>
|
<span class="stat-value"><span>{{statsData['市场渗透率']}}</span>%</span>
|
||||||
<div class="stat-bar">
|
<div class="stat-bar">
|
||||||
<div class="bar-fill" style="width: 85%"></div>
|
<div class="bar-fill" :style="'width: '+ (statsData['市场渗透率']>100?100:statsData['市场渗透率'])+'%'"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-row">
|
<div class="stat-row">
|
||||||
<span class="stat-label">回款率</span>
|
<span class="stat-label">回款率</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-wrapper">
|
<div class="stat-wrapper">
|
||||||
<span class="stat-value"><span>62</span>%</span>
|
<span class="stat-value"><span>{{statsData['回款率']}}</span>%</span>
|
||||||
<div class="stat-bar">
|
<div class="stat-bar">
|
||||||
<div class="bar-fill" style="width: 62%"></div>
|
<div class="bar-fill" :style="'width: '+ (statsData['回款率']>100?100:statsData['回款率'])+'%'"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-row">
|
<div class="stat-row">
|
||||||
<span class="stat-label">目标达成率</span>
|
<span class="stat-label">目标达成率</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-wrapper">
|
<div class="stat-wrapper">
|
||||||
<span class="stat-value"><span>62</span>%</span>
|
<span class="stat-value"><span>{{statsData['目标达成率']}}</span>%</span>
|
||||||
<div class="stat-bar">
|
<div class="stat-bar">
|
||||||
<div class="bar-fill" style="width: 62%"></div>
|
<div class="bar-fill" :style="'width: '+ (statsData['目标达成率']>100?100:statsData['目标达成率'])+'%'"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
|
|
||||||
<div class="panel-card line-card">
|
<div class="panel-card line-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<span class="card-title">重点客户分析</span>
|
<span class="card-title">重点客户分析(销售额、毛利)</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="lineChart" class="line-container"></div>
|
<div ref="lineChart" class="line-container"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -137,21 +137,21 @@
|
|||||||
<aside class="right-panel">
|
<aside class="right-panel">
|
||||||
<div class="panel-card product-card">
|
<div class="panel-card product-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<span class="card-title">重点产品分析</span>
|
<span class="card-title">重点产品分析(销售额、毛利)</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="productBarChart" class="product-bar"></div>
|
<div ref="productBarChart" class="product-bar"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel-card product-card">
|
<div class="panel-card product-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<span class="card-title">重点产品分析</span>
|
<span class="card-title">重点产品分析(销量、增长率)</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="productLineChart" class="product-line"></div>
|
<div ref="productLineChart" class="product-line"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel-card product-card">
|
<div class="panel-card product-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<span class="card-title">重点产品分析</span>
|
<span class="card-title">重点客户分析(销量、增长率)</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="trendChart" class="trend-container"></div>
|
<div ref="trendChart" class="trend-container"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -162,12 +162,13 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
|
import {getData} from '@/api/bigscreen'
|
||||||
export default {
|
export default {
|
||||||
name: 'SalesDashboard',
|
name: 'SalesDashboard',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
charts: {}
|
charts: {},
|
||||||
|
statsData: {'市场渗透率':0,'回款率':0,'目标达成率':0}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -200,9 +201,21 @@ export default {
|
|||||||
this.initProductBarChart()
|
this.initProductBarChart()
|
||||||
this.initProductLineChart()
|
this.initProductLineChart()
|
||||||
this.initTrendChart()
|
this.initTrendChart()
|
||||||
|
this.initStats()
|
||||||
},
|
},
|
||||||
|
async initStats(){
|
||||||
|
|
||||||
initMainRingChart() {
|
|
||||||
|
},
|
||||||
|
async initMainRingChart() {
|
||||||
|
const params={"chartProperties":{"总销售额_万元":"text"},"setCode":"zhibiao","chartType":"widget-text","contextData":{"reportCode":"salesAnalysis2026"}}
|
||||||
|
const {code, data} = await getData(params);
|
||||||
|
if(code != 200){
|
||||||
|
console.error('[Viewer] 获取大屏数据失败:', code);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ringData = [{name:'销售额',value:data[0]['总销售额_万元'].split('万')[0]},{name:'毛利',value:data[0]['毛利'].split('万')[0]},{name:'增长率',value:data[0]['增长率']}]
|
||||||
const chart = echarts.init(this.$refs.mainRingChart)
|
const chart = echarts.init(this.$refs.mainRingChart)
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
@@ -215,7 +228,7 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
data: ["销售额", "毛利", "完后率"]
|
data: ringData.map(item => item.name)
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: 0,
|
top: 0,
|
||||||
@@ -247,18 +260,17 @@ export default {
|
|||||||
},
|
},
|
||||||
color: ["#109BDC", "#FBB900", "#FF4D4F"],
|
color: ["#109BDC", "#FBB900", "#FF4D4F"],
|
||||||
radius: ['65%', '60%'],
|
radius: ['65%', '60%'],
|
||||||
data: [{ value: 1600,name:'销售额' },{ value: 1008,name:'毛利' },{ value: 98,name:'完后率' }]
|
data: ringData
|
||||||
|
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
chart.setOption(option)
|
chart.setOption(option)
|
||||||
this.charts.mainRing = chart
|
this.charts.mainRing = chart
|
||||||
// 数据列表
|
// 数据列表
|
||||||
const dataList = [
|
const dataList = ringData.map(item => ({
|
||||||
{ name: '销售额', target: 1600 },
|
name: item.name,
|
||||||
{ name: '毛利', target: 1008 },
|
target: item.value
|
||||||
{ name: '完成率', target: 98 }
|
}))
|
||||||
]
|
|
||||||
|
|
||||||
let curIndex = 0
|
let curIndex = 0
|
||||||
let timer = null
|
let timer = null
|
||||||
@@ -280,7 +292,7 @@ export default {
|
|||||||
chart.setOption({
|
chart.setOption({
|
||||||
series: [{
|
series: [{
|
||||||
label: {
|
label: {
|
||||||
formatter: `{a|${now+(name=='完成率'?'%':'万')}}\n\n{b|${name}}`
|
formatter: `{a|${now+(name=='增长率'?'%':'万')}}\n\n{b|${name}}`
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
})
|
})
|
||||||
@@ -490,12 +502,15 @@ export default {
|
|||||||
timer = setInterval(loopSwitch, 2000)
|
timer = setInterval(loopSwitch, 2000)
|
||||||
},
|
},
|
||||||
|
|
||||||
initMapChart() {
|
async initMapChart() {
|
||||||
|
const worldMap = await axios.get('../../../../static/world.json');
|
||||||
|
echarts.registerMap('world', worldMap.data);
|
||||||
const chart = echarts.init(this.$refs.mapChart)
|
const chart = echarts.init(this.$refs.mapChart)
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
geo: {
|
geo: {
|
||||||
map: 'world',
|
map: 'world',
|
||||||
|
name: '世界地图',
|
||||||
roam: false,
|
roam: false,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
areaColor: 'rgba(45, 65, 85, 0.6)',
|
areaColor: 'rgba(45, 65, 85, 0.6)',
|
||||||
@@ -529,7 +544,8 @@ export default {
|
|||||||
rippleEffect: {
|
rippleEffect: {
|
||||||
brushType: 'stroke'
|
brushType: 'stroke'
|
||||||
}
|
}
|
||||||
}, {
|
}
|
||||||
|
, {
|
||||||
type: 'lines',
|
type: 'lines',
|
||||||
coordinateSystem: 'geo',
|
coordinateSystem: 'geo',
|
||||||
data: [
|
data: [
|
||||||
@@ -554,18 +570,23 @@ export default {
|
|||||||
trailLength: 0.5,
|
trailLength: 0.5,
|
||||||
color: '#ffc107'
|
color: '#ffc107'
|
||||||
}
|
}
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
chart.setOption(option)
|
chart.setOption(option)
|
||||||
this.charts.map = chart
|
this.charts.map = chart
|
||||||
},
|
},
|
||||||
|
|
||||||
initBarChart() {
|
async initBarChart() {
|
||||||
const chart = echarts.init(this.$refs.barChart)
|
const chart = echarts.init(this.$refs.barChart)
|
||||||
const regions = ['北区', '南区', '东区', '西区', '华东', '华南', '华北', '西南', '西北', '东北', '华中', '海外']
|
const params={"chartProperties":{"业务区域":"xAxis","销量":"bar"},"setCode":"scfx_zdqy","chartType":"widget-barchart","contextData":{"reportCode":"salesAnalysis2026"}}
|
||||||
const salesData = [68, 65, 62, 58, 55, 52, 48, 45, 42, 38, 35, 30]
|
const {code,data} = await getData(params)
|
||||||
const profitData = [25, 22, 18, 15, 12, 8, 5, 3, 2, 1, 0, 0]
|
if(code != 200){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const regions =data.map(item => item['业务区域'])
|
||||||
|
const salesData = data.map(item => item['销量'])
|
||||||
|
const profitData = data.map(item => null)
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
grid: {
|
grid: {
|
||||||
@@ -582,7 +603,7 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'
|
formatter: '{b}<br/>{a0}:{c0}万元<br/>{a1}:{c1}万元'
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
@@ -649,12 +670,17 @@ export default {
|
|||||||
this.charts.bar = chart
|
this.charts.bar = chart
|
||||||
},
|
},
|
||||||
|
|
||||||
initLineChart() {
|
async initLineChart() {
|
||||||
const chart = echarts.init(this.$refs.lineChart)
|
const chart = echarts.init(this.$refs.lineChart)
|
||||||
const dates = ['2019/07/01', '2019/07/02', '2019/07/03', '2019/07/04', '2019/07/05', '2019/07/06', '2019/07/07', '2019/07/08', '2019/07/09', '2019/07/10']
|
const params={"chartProperties":{"毛利":"line","销售额":"bar","客户名称":"xAxis"},"setCode":"xsfx_khjg","chartType":"widget-barlinechart","contextData":{"reportCode":"salesAnalysis2026"}}
|
||||||
const salesData = [1, 3350, 3280, 3420, 3380, 3500, 3450, 3520, 3480, 3550]
|
const {code,data} = await getData(params)
|
||||||
const profitData = [4, 2950, 2880, 3020, 2980, 3100, 3050, 3120, 3080, 3150]
|
if(code != 200){
|
||||||
|
console.error('[Viewer] 获取大屏数据失败:', code);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const salesData = data.map(item => item['销售额'])
|
||||||
|
const dates = data.map(item => item['客户名称'])
|
||||||
|
const profitData = data.map(item => item['毛利'])
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
grid: {
|
grid: {
|
||||||
@@ -664,21 +690,46 @@ export default {
|
|||||||
bottom: '15%',
|
bottom: '15%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
|
graphic: {
|
||||||
|
type: 'text',
|
||||||
|
left: '10px',
|
||||||
|
top: '10px',
|
||||||
|
style: {
|
||||||
|
text: '单位:万元',
|
||||||
|
fontSize: 12,
|
||||||
|
fill: '#fff',
|
||||||
|
fontFamily: 'Microsoft YaHei'
|
||||||
|
}
|
||||||
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||||
borderColor: 'rgba(255,255,255,0.2)',
|
borderColor: 'rgba(255,255,255,0.2)',
|
||||||
|
confine: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'
|
formatter: '{b}<br/>{a0}:{c0}万<br/>{a1}:{c1}万'
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: dates,
|
data: dates,
|
||||||
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: { color: '#fff', fontSize: 12 }
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
hideOverlap: false,
|
||||||
|
interval: 0,
|
||||||
|
fontSize: 12,
|
||||||
|
margin: 8,
|
||||||
|
// 👇 核心:超出自动省略 + 鼠标悬浮显示完整
|
||||||
|
formatter: function (value) {
|
||||||
|
if (value.length > 5) {
|
||||||
|
return value.slice(0,5) + '...';
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
top: '10px',
|
top: '10px',
|
||||||
@@ -743,17 +794,23 @@ export default {
|
|||||||
this.charts.line = chart
|
this.charts.line = chart
|
||||||
},
|
},
|
||||||
|
|
||||||
initProductBarChart() {
|
async initProductBarChart() {
|
||||||
const chart = echarts.init(this.$refs.productBarChart)
|
const chart = echarts.init(this.$refs.productBarChart)
|
||||||
const products = ['胶囊', '片剂', '针', '14', '4', '粉剂', '2#', '4#', '8#', '9#', '10#']
|
const params={"chartProperties":{"毛利":"line","销售额":"bar","货品名称":"xAxis"},"setCode":"chan_ping_fen_xi","chartType":"widget-barlinechart","contextData":{"month":"1","year":"2026","pageSize":"8","currentPage":"1","reportCode":"salesAnalysis2026"}}
|
||||||
const values = [50, 80, 45, 120, 90, 150, 200, 280, 320, 380, 520]
|
const {code,data} = await getData(params)
|
||||||
|
if(code != 200){
|
||||||
|
console.error('[Viewer] 获取大屏数据失败:', code);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const salesData = data.map(item => item['销售额'])
|
||||||
|
const dates = data.map(item => item['货品名称'])
|
||||||
|
const profitData = data.map(item => item['毛利'])
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
grid: {
|
grid: {
|
||||||
left: '20px',
|
left: '20px',
|
||||||
right: '10px',
|
right: '10px',
|
||||||
top: '20px',
|
top: '40px',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
@@ -764,14 +821,49 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
formatter: '{b}<br/>{a0}:{c0}'
|
formatter: '{b}<br/>{a0}:{c0}万<br/>{a1}:{c1}万'
|
||||||
|
},
|
||||||
|
graphic: {
|
||||||
|
type: 'text',
|
||||||
|
left: '10px',
|
||||||
|
top: '10px',
|
||||||
|
style: {
|
||||||
|
text: '单位:万元',
|
||||||
|
fontSize: 12,
|
||||||
|
fill: '#fff',
|
||||||
|
fontFamily: 'Microsoft YaHei'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '10px',
|
||||||
|
left: 'center',
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['销售额', '毛利']
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: products,
|
data: dates,
|
||||||
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: { color: '#fff', fontSize: 12 }
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
hideOverlap: false,
|
||||||
|
interval: 0,
|
||||||
|
fontSize: 12,
|
||||||
|
margin: 8,
|
||||||
|
// 👇 核心:超出自动省略 + 鼠标悬浮显示完整
|
||||||
|
formatter: function (value) {
|
||||||
|
if (value.length > 5) {
|
||||||
|
return value.slice(0,5) + '...';
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
@@ -783,11 +875,12 @@ export default {
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
series: [{
|
series: [{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
name: '销售量',
|
name: '销售额',
|
||||||
stack: 'a',
|
stack: 'a',
|
||||||
data: values,
|
data: salesData,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#1890ff',
|
color: '#1890ff',
|
||||||
borderRadius: [2, 2, 0, 0]
|
borderRadius: [2, 2, 0, 0]
|
||||||
@@ -796,8 +889,8 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
name: '销售量',
|
name: '毛利',
|
||||||
data: [null,null,null, 120, 90, 150, 200, 280, 320, 380, 520],
|
data: profitData,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#C93536',
|
color: '#C93536',
|
||||||
},
|
},
|
||||||
@@ -812,21 +905,47 @@ export default {
|
|||||||
this.charts.productBar = chart
|
this.charts.productBar = chart
|
||||||
},
|
},
|
||||||
|
|
||||||
initProductLineChart() {
|
async initProductLineChart() {
|
||||||
const chart = echarts.init(this.$refs.productLineChart)
|
const chart = echarts.init(this.$refs.productLineChart)
|
||||||
const hours = ['0','1','2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '18', '24']
|
const params={"chartProperties":{"毛利":"line","销售额":"bar","货品名称":"xAxis"},"setCode":"chan_ping_fen_xi","chartType":"widget-barlinechart","contextData":{"month":"1","year":"2026","pageSize":"8","currentPage":"1","reportCode":"salesAnalysis2026"}}
|
||||||
const data1 = [20, 45, 65, 80, 95, 85, 70, 55, 45, 50, 60, 75, 85, 90, 88, 80, 70, 60, 50, 45, 40, 35, 30, 25]
|
const {code,data} = await getData(params)
|
||||||
const data2 = [15, 30, 45, 55, 70, 65, 55, 45, 40, 42, 50, 62, 72, 78, 75, 68, 58, 48, 42, 38, 35, 32, 28, 22]
|
if(code != 200){
|
||||||
|
console.error('[Viewer] 获取大屏数据失败:', code);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data1 = data.map(item => item['销量'])
|
||||||
|
const hours = data.map(item => item['货品名称'])
|
||||||
|
const data2 = data.map(item => item['增长率'])
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
grid: {
|
grid: {
|
||||||
left: '10px',
|
left: '10px',
|
||||||
right: '10px',
|
right: '10px',
|
||||||
top: '30px',
|
top: '40px',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
|
graphic: [{
|
||||||
|
type: 'text',
|
||||||
|
left: '10px',
|
||||||
|
top: '10px',
|
||||||
|
style: {
|
||||||
|
text: '单位:万',
|
||||||
|
fontSize: 12,
|
||||||
|
fill: '#fff',
|
||||||
|
fontFamily: 'Microsoft YaHei'
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
type: 'text',
|
||||||
|
right: '15px',
|
||||||
|
top: '10px',
|
||||||
|
style: {
|
||||||
|
text: '单位:%',
|
||||||
|
fontSize: 12,
|
||||||
|
fill: '#fff',
|
||||||
|
fontFamily: 'Microsoft YaHei'
|
||||||
|
}
|
||||||
|
}],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||||
@@ -834,24 +953,67 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'
|
formatter: '{b}<br/>{a0}:{c0}万<br/>{a1}:{c1}%'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '10px',
|
||||||
|
left: 'center',
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['销量', '增长率']
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: hours,
|
data: hours,
|
||||||
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: { color: '#fff', fontSize: 12 }
|
axisLabel: {
|
||||||
},
|
color: '#fff',
|
||||||
yAxis: {
|
hideOverlap: false,
|
||||||
type: 'value',
|
interval: 0,
|
||||||
show: false
|
fontSize: 12,
|
||||||
|
margin: 8,
|
||||||
|
// 👇 核心:超出自动省略 + 鼠标悬浮显示完整
|
||||||
|
formatter: function (value) {
|
||||||
|
if (value.length > 5) {
|
||||||
|
return value.slice(0,5) + '...';
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'left',
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
name: '销售额',
|
name: '销量',
|
||||||
data: data1,
|
data: data1,
|
||||||
|
yAxisIndex: 0,
|
||||||
itemStyle: { color: '#1890ff' },
|
itemStyle: { color: '#1890ff' },
|
||||||
lineStyle: { width: 2 },
|
lineStyle: { width: 2 },
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
@@ -868,8 +1030,9 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
name: '销售量',
|
name: '增长率',
|
||||||
data: data2,
|
data: data2,
|
||||||
|
yAxisIndex: 1,
|
||||||
itemStyle: { color: '#ff4d4f' },
|
itemStyle: { color: '#ff4d4f' },
|
||||||
lineStyle: { width: 2 },
|
lineStyle: { width: 2 },
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
@@ -890,18 +1053,76 @@ export default {
|
|||||||
this.charts.productLine = chart
|
this.charts.productLine = chart
|
||||||
},
|
},
|
||||||
|
|
||||||
initTrendChart() {
|
async initTrendChart() {
|
||||||
const chart = echarts.init(this.$refs.trendChart)
|
const chart = echarts.init(this.$refs.trendChart)
|
||||||
const days = ['1', '2', '3', '4', '5', '6', '7']
|
const params={"chartProperties":{"毛利":"line","销售额":"bar","客户名称":"xAxis"},"setCode":"xsfx_khjg","chartType":"widget-barlinechart","contextData":{"reportCode":"salesAnalysis2026"}}
|
||||||
const data1 = [350, 200, 150, 100, 450, 200, 150]
|
const {code,data} = await getData(params)
|
||||||
const data2 = [200, 220, 180, 100, 250, 200, 125]
|
if(code != 200){
|
||||||
|
console.error('[Viewer] 获取大屏数据失败:', code);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data1 = data.map(item => item['销量'])
|
||||||
|
const days = data.map(item => item['客户名称'])
|
||||||
|
const data2 = data.map(item => item['增长率_百分比'])
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
|
graphic: [{
|
||||||
|
type: 'text',
|
||||||
|
left: '10px',
|
||||||
|
top: '10px',
|
||||||
|
style: {
|
||||||
|
text: '单位:万',
|
||||||
|
fontSize: 12,
|
||||||
|
fill: '#fff',
|
||||||
|
fontFamily: 'Microsoft YaHei'
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
type: 'text',
|
||||||
|
right: '15px',
|
||||||
|
top: '10px',
|
||||||
|
style: {
|
||||||
|
text: '单位:%',
|
||||||
|
fontSize: 12,
|
||||||
|
fill: '#fff',
|
||||||
|
fontFamily: 'Microsoft YaHei'
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
legend: {
|
||||||
|
top: '10px',
|
||||||
|
left: 'center',
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['销量', '增长率']
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
||||||
|
axisLabel: { color: '#fff', fontSize: 12 },
|
||||||
|
splitLine: {
|
||||||
|
show: true, // 显示横线
|
||||||
|
lineStyle: { color: 'rgba(107, 140, 174, 0.2)' },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
grid: {
|
grid: {
|
||||||
left: '10px',
|
left: '10px',
|
||||||
right: '10px',
|
right: '10px',
|
||||||
top: '20px',
|
top: '40px',
|
||||||
bottom: '10px',
|
bottom: '10px',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
@@ -912,32 +1133,36 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'
|
formatter: '{b}<br/>{a0}:{c0}万<br/>{a1}:{c1}%'
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: days,
|
data: days,
|
||||||
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: { color: '#fff', fontSize: 12 }
|
axisLabel: {
|
||||||
},
|
color: '#fff',
|
||||||
yAxis: {
|
hideOverlap: false,
|
||||||
type: 'value',
|
interval: 0,
|
||||||
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
|
fontSize: 12,
|
||||||
axisLabel: { color: '#fff', fontSize: 12 },
|
margin: 8,
|
||||||
splitLine: {
|
// 👇 核心:超出自动省略 + 鼠标悬浮显示完整
|
||||||
show: true, // 显示横线
|
formatter: function (value) {
|
||||||
lineStyle: { color: 'rgba(107, 140, 174, 0.2)' },
|
if (value.length > 5) {
|
||||||
|
return value.slice(0,5) + '...';
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
name: '销售额',
|
name: '销量',
|
||||||
data: data1,
|
data: data1,
|
||||||
itemStyle: { color: '#20AFB1' },
|
itemStyle: { color: '#20AFB1' },
|
||||||
lineStyle: { width: 2 },
|
lineStyle: { width: 2 },
|
||||||
|
yAxisIndex: 0,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@@ -953,10 +1178,11 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
name: '销售量',
|
name: '增长率',
|
||||||
data: data2,
|
data: data2,
|
||||||
itemStyle: { color: '#ff9f43' },
|
itemStyle: { color: '#ff9f43' },
|
||||||
lineStyle: { width: 2 },
|
lineStyle: { width: 2 },
|
||||||
|
yAxisIndex: 1,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@@ -980,6 +1206,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.sales-dashboard {
|
.sales-dashboard {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -1222,15 +1449,46 @@ export default {
|
|||||||
|
|
||||||
.form-dots .dot.active {
|
.form-dots .dot.active {
|
||||||
background: #1890ff;
|
background: #1890ff;
|
||||||
box-shadow: 0 0 3px 3px rgba(24,144,255, 0.4) !important;
|
box-shadow: 0 0 3px 3px rgba(24,144,255, 0.4) ;
|
||||||
|
animation: breathBlue 1s infinite alternate;
|
||||||
}
|
}
|
||||||
.form-dots .dot:nth-of-type(1).active {
|
.form-dots .dot:nth-of-type(1).active {
|
||||||
background: #E23C62;
|
background: #E23C62;
|
||||||
box-shadow: 0 0 3px 3px rgba(226, 60, 98, 0.4) !important;
|
box-shadow: 0 0 3px 3px rgba(226, 60, 98, 0.4) ;
|
||||||
|
animation: breathRed 1s infinite alternate;
|
||||||
}
|
}
|
||||||
.form-dots .dot:nth-of-type(3).active {
|
.form-dots .dot:nth-of-type(3).active {
|
||||||
background: #F5B500;
|
background: #F5B500;
|
||||||
box-shadow: 0 0 3px 3px rgba(245,181,0, 0.4) !important;
|
box-shadow: 0 0 3px 3px rgba(245,181,0, 0.4);
|
||||||
|
animation: breathYellow 1s infinite alternate;
|
||||||
|
}
|
||||||
|
@keyframes breathBlue {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 2px 2px rgba(24,144,255, 0.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 3px 3px rgba(24,144,255, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 红色呼吸动画 */
|
||||||
|
@keyframes breathRed {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 2px 2px rgba(226, 60, 98, 0.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 3px 3px rgba(226, 60, 98, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 黄色呼吸动画 */
|
||||||
|
@keyframes breathYellow {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 2px 2px rgba(245,181,0, 0.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 3px 3px rgba(245,181,0, 0.6);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.form-value {
|
.form-value {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="logo-section">
|
<div class="logo-section">
|
||||||
<div class="logo-icon"></div>
|
<!-- <div class="logo-icon"></div> -->
|
||||||
<div class="title-text">
|
<div class="title-text">
|
||||||
<h1 class="main-title">国瑞药业工业互联网</h1>
|
<h1 class="main-title">国瑞药业工业互联网</h1>
|
||||||
<!-- <span class="sub-title">Energy consumption monitoring platform-visualization of carbon peak indicatorsm</span> -->
|
<!-- <span class="sub-title">Energy consumption monitoring platform-visualization of carbon peak indicatorsm</span> -->
|
||||||
@@ -952,7 +952,7 @@ export default {
|
|||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
show: true,
|
show: true,
|
||||||
max: parkData[0].value+300,
|
// max: parkData[0].value+300,
|
||||||
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
Reference in New Issue
Block a user