静态大屏样式修改
This commit is contained in:
DESKTOP-AD8UBUJ\ling
@@ -137,8 +137,7 @@
|
||||
<span class="card-title">销售收入排行</span>
|
||||
<img style="width: calc(100% - 160px);" src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
|
||||
</div>
|
||||
<div class="park-content" style="position:relative;margin-top:10px">
|
||||
<span style="position:absolute;top:-10px;font-size:11px;">单位：万</span>
|
||||
<div class="park-content" style="position:relative;">
|
||||
<div ref="parkChart" class="park-chart"></div>
|
||||
|
||||
</div>
|
||||
@@ -399,6 +398,11 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
if(!seriesData.length>0) return
|
||||
const sumList = seriesData[0].values.map((_, idx) =>
|
||||
seriesData.map(item => Number(item.values[idx])).reduce((a, b) => a + b, 0)
|
||||
);
|
||||
const maxX = Math.max(...sumList) + 200;
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
@@ -406,6 +410,7 @@ export default {
|
||||
backgroundColor: 'rgba(15, 42, 66, 0.9)',
|
||||
borderColor: '#61c8ee',
|
||||
textStyle: { color: '#fff' },
|
||||
confine: true,
|
||||
formatter: (params) => {
|
||||
let result = `${params.seriesName}<br/>`;
|
||||
seriesData.forEach((series,index1)=>{
|
||||
@@ -421,16 +426,16 @@ export default {
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
left: '20px',
|
||||
right:'0',
|
||||
top:'0',
|
||||
top:'50px',
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
max: 2000
|
||||
max: maxX
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
@@ -443,8 +448,47 @@ export default {
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '6px',
|
||||
right: '120px',
|
||||
orient: 'horizontal',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
},
|
||||
icon: 'circle',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 15
|
||||
},
|
||||
graphic: [
|
||||
|
||||
// 右上角单位文字
|
||||
{
|
||||
type: 'text',
|
||||
right: '10px',
|
||||
top: '10px',
|
||||
style: {
|
||||
text: '单位：万元',
|
||||
fontSize: 12,
|
||||
fill: '#fff',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
},
|
||||
// // 每一行柱子右侧显示合计值
|
||||
...seriesData[0].values.map((item, idx) => {
|
||||
return {
|
||||
type: 'text',
|
||||
left: 'auto',
|
||||
right: '8px',
|
||||
top: `${((seriesData[0].values.length-1-idx) / seriesData[0].values.length) * 145 + 50}px`,
|
||||
style: {
|
||||
text: seriesData.map(item=>item.values[idx]).reduce((a, b) => Number(a) + Number(b), 0) ,
|
||||
fontSize: 12,
|
||||
fill: '#fff',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}})
|
||||
],
|
||||
series: [
|
||||
]
|
||||
@@ -479,7 +523,6 @@ export default {
|
||||
if(code!=200){
|
||||
return
|
||||
}
|
||||
console.log(data)
|
||||
dates=data.map(item=>{return item['货品名称']})
|
||||
lineData=data.map(item=>{return item['毛利同比变动']})
|
||||
barData=data.map(item=>{return item['去年累计毛利(万)']})
|
||||
@@ -493,12 +536,37 @@ export default {
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
top: '12%',
|
||||
bottom: '12%',
|
||||
left: '0',
|
||||
right: '0',
|
||||
top: '26px',
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
graphic: [
|
||||
// 右上角单位文字
|
||||
{
|
||||
type: 'text',
|
||||
left: '0',
|
||||
top: '2px',
|
||||
style: {
|
||||
text: '单位：万元',
|
||||
fontSize: 10,
|
||||
fill: '#fff',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
right: '0',
|
||||
top: '2px',
|
||||
style: {
|
||||
text: '单位：%',
|
||||
fontSize: 10,
|
||||
fill: '#fff',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dates,
|
||||
@@ -789,7 +857,7 @@ export default {
|
||||
const parkData = data.map(d => ({
|
||||
name: d.hpmc,
|
||||
value: d.xse
|
||||
})).splice(0, 10)
|
||||
}))
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
@@ -799,13 +867,28 @@ export default {
|
||||
textStyle: { color: '#fff' },
|
||||
formatter: '{b}: {c}万'
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '0',
|
||||
top: '20px',
|
||||
containLabel: true
|
||||
},
|
||||
graphic: [
|
||||
// 右上角单位文字
|
||||
{
|
||||
type: 'text',
|
||||
right: '10px',
|
||||
top: '2px',
|
||||
style: {
|
||||
text: '单位：万元',
|
||||
fontSize: 12,
|
||||
fill: '#fff',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: parkData.map(d => d.name),
|
||||
@@ -833,23 +916,24 @@ export default {
|
||||
axisPointer: {
|
||||
show: true
|
||||
},
|
||||
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider', // 底部滑动条
|
||||
show: false, // 隐藏滑动条（只保留滚动能力）
|
||||
xAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 100
|
||||
end: 50
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置滚动（鼠标滚轮/拖拽滚动）
|
||||
xAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 100,
|
||||
end: 50,
|
||||
zoomLock: true // 禁止缩放，只允许滚动
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: true,
|
||||
@@ -898,6 +982,23 @@ export default {
|
||||
|
||||
chart.setOption(option)
|
||||
this.charts.park = chart
|
||||
let autoStart = 0;
|
||||
const autoSpeed = 5; // 滚动速度，越小越慢
|
||||
|
||||
const autoScroll = setInterval(() => {
|
||||
if (!this.charts.park) return;
|
||||
|
||||
autoStart += autoSpeed;
|
||||
if (autoStart > 50) autoStart = 0; // 滚到底部重置
|
||||
|
||||
this.charts.park.dispatchAction({
|
||||
type: "dataZoom",
|
||||
xAxisIndex: 0,
|
||||
start: autoStart,
|
||||
end: autoStart + 50,
|
||||
});
|
||||
}, 3000);
|
||||
this.charts.park.autoScrollTimer = autoScroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -906,7 +1007,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.energy-platform {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: 100%;
|
||||
background: #0a1628;
|
||||
position: relative;
|
||||
padding:0 15px;
|
||||
@@ -990,7 +1091,7 @@ export default {
|
||||
gap: 15px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: calc(100vh - 160px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
@@ -1078,7 +1179,7 @@ export default {
|
||||
border: 1px solid rgba(97, 200, 238, 0.2);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
min-height: 280px;
|
||||
min-height: 620px;
|
||||
}
|
||||
|
||||
.bottom-left-cards {
|
||||
@@ -1151,7 +1252,7 @@ export default {
|
||||
}
|
||||
.carbon-content {
|
||||
display: flex;
|
||||
height: 170px;
|
||||
height: 216px;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -1165,7 +1266,7 @@ export default {
|
||||
|
||||
.chart-container-small {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
@@ -1209,7 +1310,7 @@ export default {
|
||||
}
|
||||
.energy-content {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
height: 220px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@@ -1260,10 +1361,9 @@ export default {
|
||||
.ring-card{
|
||||
background: rgb(32, 37, 43);
|
||||
border: 2px solid rgb(49, 56, 66);
|
||||
border-radius-top-left: 5px;
|
||||
border-radius-top-right: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom: 0;
|
||||
|
||||
}
|
||||
.panel-card {
|
||||
overflow: hidden;
|
||||
@@ -1317,8 +1417,8 @@ export default {
|
||||
.peak-card{
|
||||
background: rgb(32, 37, 43);
|
||||
border: 2px solid rgb(49, 56, 66);
|
||||
border-radius-bottom-left: 5px;
|
||||
border-radius-bottom-right: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top: 0;
|
||||
margin-bottom: 15px;
|
||||
.peak-desc{
|
||||
@@ -1414,18 +1514,19 @@ export default {
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
height: 150px;
|
||||
height: 250px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.park-content {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.park-chart {
|
||||
flex: 1;
|
||||
height: 160px;
|
||||
height: 208px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user