admin/gr_bi_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

静态大屏布局-接口对接-未完成

Browse Source
This commit is contained in:
DESKTOP-AD8UBUJ\ling
2026-05-11 18:46:17 +08:00
parent 71e37a9559
commit 87c9bd238c
2 changed files with 424 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

643
src/views/bigscreenDesigner/viewer/components/static.vue
View File

@@ -27,7 +27,7 @@
<span v-if="stat.change!==undefined" :class="['stat-change', stat.changeType]">
同比
<span class="change-icon" :class="['change-icon', stat.changeType]"></span>
{{ stat.change }}</span>
{{ stat.change }}%</span>
</div>
</div>
@@ -40,63 +40,33 @@
<div class="bottom-left-cards">
<div class="bottom-card carbon-card">
<div class="card-header">
<span class="card-title">碳中和比率</span>
<span class="icon-label" />
<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="carbon-content">
<div class="carbon-left">
<div ref="sunburstChart" class="chart-container-small"></div>
<div class="chart-label">能耗分布结构</div>
</div>
<div class="carbon-right">
<div ref="ganttChart" class="chart-container-small"></div>
<div class="chart-label">任务时间安排</div>
</div>
</div>
<div class="carbon-desc">
<div class="desc-item">
<span class="desc-label">碳中和进度</span>
<span class="desc-value">60%</span>
</div>
<div class="desc-item">
<span class="desc-label">年减排目标</span>
<span class="desc-value">254.50t</span>
</div>
</div>
</div>
<div class="bottom-card energy-card">
<div class="card-header">
<span class="icon-label" />
<span class="card-title">产销协同
<span class="card-title">主要产品销售情况(毛利率)
</span>
<img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
<img style="width:calc(100% - 260px);" src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
</div>
<div class="energy-content">
<div class="energy-left">
<div ref="roseChart" class="chart-container"></div>
</div>
<div class="energy-right">
<div class="energy-item">
<span class="energy-color" style="background: #1890ff;"></span>
<span class="energy-label">生产</span>
<span class="energy-value">35%</span>
</div>
<div class="energy-item">
<span class="energy-color" style="background: #73d5ff;"></span>
<span class="energy-label">动力</span>
<span class="energy-value">28%</span>
</div>
<div class="energy-item">
<span class="energy-color" style="background: #b3e0ff;"></span>
<span class="energy-label">照明</span>
<span class="energy-value">22%</span>
</div>
<div class="energy-item">
<span class="energy-color" style="background: #d9edff;"></span>
<span class="energy-label">空调</span>
<span class="energy-value">15%</span>
</div>
</div>
</div>
</div>
</div>
@@ -129,59 +99,48 @@
<div class="panel-card peak-card">
<div class="card-header">
<span class="icon-label" />
<span class="card-title">财务分析</span>
<span class="card-title">产销协同</span>
<img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
</div>
<div class="peak-desc">
<div class="desc-item">
<div class="desc-label">产销率</div>
<div class="desc-value">{{peakData['产销率']}}%</div>
<div class="desc-label">周转率</div>
<div class="desc-value">{{peakData['周转率']}}%</div>
</div>
<div class="desc-item">
<div class="desc-label">平均交付周期</div>
<div class="desc-value">{{peakData['平均交付周期']}}天</div>
<div class="desc-label">订单准时率</div>
<div class="desc-value">{{peakData['订单准时率']}}</div>
</div>
</div>
<div class="peak-content">
<div class="peak-cai-icon" title="财务分析">财</div>
<div ref="scatterChart" class="scatter-chart"></div>
</div>
</div>
<div class="panel-card trend-card">
<div class="card-header">
<span class="card-title">市场分析</span>
<div class="card-actions trend-tabs">
<button :class="['action-btn', { active: trendTab === '7' }]" @click="trendTab = '7'">过去7天</button>
<button :class="['action-btn', { active: trendTab === '15' }]" @click="trendTab = '15'">过去15天</button>
<button :class="['action-btn', { active: trendTab === '30' }]" @click="trendTab = '30'">过去30天</button>
</div>
<span class="icon-label" />
<span class="card-title">产能分析</span>
<img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
</div>
<div ref="trendChart" class="trend-chart"></div>
</div>
<div class="panel-card park-card">
<div class="card-header">
<span class="icon-label" />
<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">
<div class="park-content" style="position:relative;margin-top:10px">
<span style="position:absolute;top:-10px;font-size:11px;">单位：万</span>
<div ref="parkChart" class="park-chart"></div>
<div class="park-legend">
<div class="legend-item">
<span class="legend-color" style="background: #ff6b46;"></span>
<span class="legend-label">生产</span>
<span class="legend-value">254.50</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background: #ff9f43;"></span>
<span class="legend-label">动力</span>
<span class="legend-value">180.30</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background: #ffeaa7;"></span>
<span class="legend-label">照明</span>
<span class="legend-value">125.60</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background: #4ecdc4;"></span>
<span class="legend-label">空调</span>
<span class="legend-value">98.20</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background: #96ceb4;"></span>
<span class="legend-label">其他</span>
<span class="legend-value">56.80</span>
</div>
</div>
</div>
</div>
</aside>
@@ -195,17 +154,20 @@ import * as echarts from 'echarts'
import {getData} from '@/api/bigscreen'
export default {
name: 'EnergyPlatform',
props: {
dashboard: {
type: Object,
default: ()=>{}
}
},
data() {
return {
currentTime: '',
trendTab: '7',
charts: {},
powerData: [],
peakData: {},
topStats: [
{ value: '2425', unit: 'kw.h', label: '当日用电量', change: '+12%', changeType: 'up' },
{ value: '101441', unit: 'kw.h', label: '当月用电量', change: '+24%', changeType: 'up' },
{ value: '987414', unit: 'kw.h', label: '当年用电量', change: '+28%', changeType: 'up' },
{ value: '2425', unit: 't', label: '当日用水量', change: '+31%', changeType: 'up' },
]
}
@@ -221,6 +183,7 @@ export default {
}, 1000)
this.getPowerData()
this.getTopStatsData()
this.getPeakData()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
@@ -229,6 +192,29 @@ export default {
})
},
methods: {
async getPeakData(){
const params={"chartProperties":{"本年存货周期":"text"},"setCode":"zp_cxxt_zb","chartType":"widget-text","contextData":{"qyear":"2026","reportCode":"ddddd"}}
const params2={"chartProperties":{"平均销售交付周期_天":"text"},"setCode":"ping_jun_xiao_tian","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
const {code, data} = await getData(params);
const res = await getData(params2);
if(code != 200){
console.error('[Viewer] 获取大屏数据失败:', code);
return;
}
this.peakData ={
'产销率' :data[0]['本年产销率'],
'周转率' : data[0]['本年存货周转率'],
'订单准时率' : res.data[0]['平均销售交付周期_天'],
}
const {widgets} = this.dashboard
if(widgets && widgets.length > 0){
widgets.forEach(widget => {
if(widget.value.widgetId === "fiauqt0od7"){
this.peakData['订单准时率'] = widget.value.setup.text+widget.value.setup.joinText
}
})
}
},
async getPowerData(){
let params={"chartProperties":{"dzr":"text"},"setCode":"nhsj","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
const {code, data} = await getData(params);
@@ -248,9 +234,14 @@ export default {
async getTopStatsData(){
let params={"chartProperties":{"营收":"text"},"setCode":"zp_zb","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
let paramsTb={"chartProperties":{"本月毛利同比_百分比":"text"},"setCode":"ben_maoli_tongbi","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
let paramsTb2={"chartProperties":{"本年毛利":"text","本年营业额":"text"},"setCode":"local_year","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
let paramsKcje={"chartProperties":{"库存金额":"text"},"setCode":"zp_kcje","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
let paramsCxxtZb={"chartProperties":{"本年存货周期":"text"},"setCode":"zp_cxxt_zb","chartType":"widget-text","contextData":{"qyear":"2026","reportCode":"ddddd"}}
const {code, data} = await getData(params);
const res = await getData(paramsTb);
const res2 = await getData(paramsTb2);
const res3 = await getData(paramsKcje);
const res4 = await getData(paramsCxxtZb);
if(code != 200){
console.error('[Viewer] 获取大屏数据失败:', code);
return;
@@ -260,10 +251,13 @@ export default {
"本月毛利": '万',
"负债总额": '亿元',
"资产总额": '亿元',
'库存金额': '万',
'存货周期': '天',
}
const tbChange = {'本月毛利':res.data[0]['本月毛利同比_百分比']}
const tbChange = {'本月毛利':res.data[0]['本月毛利同比_百分比'],'营收':res2.data[0]['本年营业额']}
this.topStats = Object.keys(topStatsUnit).map((item) => ({
value: data[0][item],
value: data[0][item]||res3.data[0][item]||res4.data[0]['本年'+item],
unit: topStatsUnit[item],
label: item,
change:tbChange[item],
@@ -382,8 +376,29 @@ export default {
if (!this.$refs.ganttChart) return
const chart = echarts.init(this.$refs.ganttChart)
const values = [947, 340, 36]
let yData = []
const {widgets} = this.dashboard
const values=[]
let seriesData=[]
let colors=[]
if(widgets && widgets.length > 0){
widgets.forEach(widget => {
if(widget.value.widgetId === "24q62cb3ywe"){
yData=[...new Set(widget.value.data.staticData.map(item => item.axis))]
seriesData=[...new Set(widget.value.data.staticData.map(item => item.name))].map(item=>{return {name:item,values:[],axis:[]}})
colors=widget.value.setup.customColor.map(item=>item.color)
widget.value.data.staticData.forEach(item=>{
seriesData.forEach(series=>{
if(series.name===item.name){
series.values.push(item.data)
series.axis.push(item.axis)
}
})
})
}
})
}
const option = {
backgroundColor: 'transparent',
tooltip: {
@@ -391,23 +406,35 @@ export default {
backgroundColor: 'rgba(15, 42, 66, 0.9)',
borderColor: '#61c8ee',
textStyle: { color: '#fff' },
formatter: '{b}: {c}'
formatter: (params) => {
let result = `${params.seriesName}<br/>`;
seriesData.forEach((series,index1)=>{
series.values.forEach((item,index)=>{
if(series.axis[index]===params.name){
result += ` <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${colors[index1]};margin-right:6px;"></span>
${series.name}：${item}万元<br/>`;
}
})
})
return result;
}
},
grid: {
left: '15%',
right: '25%',
top: '10%',
bottom: '10%',
left: '0',
right:'0',
top:'0',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'value',
show: false,
max: 100
max: 2000
},
yAxis: {
type: 'category',
data: ['照明', '动力', '生产'],
data: yData,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
@@ -417,108 +444,148 @@ export default {
}
},
graphic: [
{
type: 'text',
left: '80%',
],
series: [
]
}
option.series=seriesData.map((item,index)=>{
return {
type: 'bar',
stack: 'total',
barWidth: 8,
itemStyle: {
color: colors[index],
},
data: item.values,
name: item.name,
}
})
chart.setOption(option)
this.charts.gantt = chart
},
async initRoseChart() {
if (!this.$refs.roseChart) return
const chart = echarts.init(this.$refs.roseChart)
let dates = []
let lineData = []
let barData = []
let barData2=[]
let params={"chartProperties":{"本年累计毛利(万)":"bar","毛利同比变动":"line","去年累计毛利(万)":"bar","货品名称":"xAxis"},"setCode":"zhuyao_maoli_zongcang","chartType":"widget-barlinechart","contextData":{"startTime":"","endTime":"","reportCode":"ddddd"}}
const {code,data}=await getData(params)
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['去年累计毛利(万)']})
barData2=data.map(item=>{return item['本年累计毛利(万)']})
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(15, 42, 66, 0.9)',
borderColor: '#61c8ee',
textStyle: { color: '#fff' }
},
grid: {
left: '8%',
right: '3%',
top: '12%',
style: {
text: '36',
fill: '#fff',
fontSize: 16,
fontWeight: 'bold'
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
data: dates,
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
axisTick: { show: false },
axisLabel: {
color: '#cccccc',
hideOverlap: false,
interval: 0,
fontSize: 12,
margin: 8,
// 👇 核心：超出自动省略 + 鼠标悬浮显示完整
formatter: function (value) {
if (value.length > 5) {
return value.slice(0,5) + '...';
}
return value;
}
},
},
yAxis: [
{
type: 'text',
left: '80%',
top: '45%',
style: {
text: '340',
fill: '#fff',
fontSize: 16,
fontWeight: 'bold'
}
type: 'value',
position: 'left',
splitLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.1)' } },
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#6b8cae', fontSize: 8 }
},
{
type: 'text',
left: '80%',
top: '78%',
style: {
text: '947',
fill: '#fff',
fontSize: 16,
fontWeight: 'bold'
}
type: 'value',
position: 'right',
splitLine: { show: false },
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#6b8cae', fontSize: 8 }
}
],
series: [
{
type: 'bar',
stack: 'total',
barWidth: 18,
name: '本年累计毛利',
data: barData2,
yAxisIndex: 0,
itemStyle: {
color: '#ff4d4f',
borderRadius: [0, 0, 0, 0]
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(255,127,80, 1)' },
{ offset: 1, color: 'rgba(255,127,80, 0.1)' }
]
},
data: [10, 8, 15]
borderRadius: [3, 3, 0, 0]
},
barWidth: 7
},
{
type: 'bar',
stack: 'total',
barWidth: 18,
name: '去年累计毛利',
data: barData,
yAxisIndex: 0,
itemStyle: {
color: '#ff9f43',
borderRadius: [0, 0, 0, 0]
},
data: [5, 3, 5]
},
{
type: 'bar',
stack: 'total',
barWidth: 18,
itemStyle: {
color: '#1890ff',
borderRadius: [0, 4, 4, 0]
},
data: [85, 89, 80]
}
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(24, 144, 255, 1)' },
{ offset: 1, color: 'rgba(24, 144, 255, 0.1)' }
]
}
chart.setOption(option)
this.charts.gantt = chart
},
borderRadius: [3, 3, 0, 0]
},
barWidth: 7
},
initRoseChart() {
if (!this.$refs.roseChart) return
const chart = echarts.init(this.$refs.roseChart)
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(15, 42, 66, 0.9)',
borderColor: '#61c8ee',
textStyle: { color: '#fff' },
formatter: '{b}: {c}%'
},
series: [
{
type: 'pie',
radius: ['10%', '70%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 4,
borderColor: 'rgba(15, 42, 66, 1)',
borderWidth: 2
},
label: { show: false },
data: [
{ value: 35, name: '生产', itemStyle: { color: '#1890ff' } },
{ value: 28, name: '动力', itemStyle: { color: '#73d5ff' } },
{ value: 22, name: '照明', itemStyle: { color: '#b3e0ff' } },
{ value: 15, name: '空调', itemStyle: { color: '#d9edff' } }
]
type: 'line',
name: '毛利同比变动',
data: lineData,
smooth: true,
yAxisIndex: 1,
itemStyle: { color: '#ff4d4f' },
lineStyle: { width: 2 },
symbol: 'circle',
symbolSize: 3
}
]
}
@@ -529,23 +596,26 @@ export default {
initScatterChart() {
if (!this.$refs.scatterChart) return
const chart = echarts.init(this.$refs.scatterChart)
const hours = Array.from({ length: 24 }, (_, i) => `${i}`)
const scatterData = []
let hours = []
for (let i = 0; i < 30; i++) {
const hour = Math.floor(Math.random() * 24)
const value = Math.random() * 60 + 40
let size = value / 8
let color
if (size > 10) {
color = '#1890ff'
} else if (size > 6) {
color = '#73d5ff'
} else {
color = '#ff4d4f'
let scatterData = []
let lineData = []
const {widgets} = this.dashboard
const colors={
50:'#1890ff',
60:'#73d5ff',
70:'#ff4d4f',
}
scatterData.push([hour, 50, size, color])
if(widgets && widgets.length > 0){
widgets.forEach(widget => {
if(widget.value.widgetId === "1vsidsxecdg"){
lineData = widget.value.data.staticData.map(item => item.line)
hours=widget.value.data.staticData.map(item => item.axis)
scatterData = widget.value.data.staticData.map(item => [item.axis, 50, (item.bar/5).toFixed(2), colors[item.bar > 70 ? 70 : item.bar > 60 ? 60 : 50]])
}
})
}
const option = {
backgroundColor: 'transparent',
@@ -555,14 +625,33 @@ export default {
borderColor: '#61c8ee',
textStyle: { color: '#fff' },
formatter: (params) => {
return `时间: ${params.value[0]}:00<br/>功率: ${params.value[2].toFixed(2)} kw`
// params 是当前鼠标所在的系列数据（散点 或 折线）
// 获取当前 X 轴坐标索引
const dataIndex = params.dataIndex;
// // 从图表实例中拿到所有系列的原始数据
const scatterVal = parseFloat((scatterData[dataIndex][2]*5).toFixed(2)); // 散点数据
const scatterColor = scatterData[dataIndex] ? scatterData[dataIndex][3] : '#ccc';
const lineVal = lineData[dataIndex]; // 折线数据
const lineColor = '#ff4d4f';
const hour = hours[dataIndex]; // X轴时间
let result = `${hour}<br/>`;
if (scatterVal) {
result += ` <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${scatterColor};margin-right:6px;"></span>
毛利：${scatterVal}万元<br/>`;
}
// // 显示折线（净利润）信息
result += `<span style="display:inline-block;width:10px;height:2px;background-color:${lineColor};margin-right:6px;"></span>净利润：${lineVal ? lineVal : '--'}万元`;
return result;
}
},
grid: {
left: '12%',
right: '3%',
top: '5%',
bottom: '15%',
left: '0',
right: '0',
top: '0',
bottom: '0',
containLabel: true
},
xAxis: {
@@ -570,7 +659,7 @@ export default {
data: hours,
axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
axisTick: { show: false },
axisLabel: { color: '#6b8cae', fontSize: 8, interval: 3 }
axisLabel: { color: '#fff', fontSize: 14, }
},
yAxis: {
type: 'value',
@@ -581,14 +670,26 @@ export default {
{
type: 'scatter',
data: scatterData,
name:'毛利',
symbolSize: (val) => val[2] * 2,
itemStyle: {
color: (params) => params.value[3],
opacity: 0.85
}
},
{
type: 'line',
name: '净利利润',
data: lineData,
smooth: true,
itemStyle: { color: '#ff4d4f' },
lineStyle: { width: 2 },
symbol: 'circle',
symbolSize: 3
}
]
}
chart.setOption(option)
this.charts.scatter = chart
},
@@ -676,21 +777,19 @@ export default {
this.charts.trend = chart
},
initParkChart() {
async initParkChart() {
if (!this.$refs.parkChart) return
const chart = echarts.init(this.$refs.parkChart)
const parkData = [
{ name: '园区2#', value: 1000 },
{ name: '园区3#', value: 720 },
{ name: '园区4#', value: 610 },
{ name: '园区5#', value: 500 },
{ name: '园区6#', value: 430 },
{ name: '园区7#', value: 310 },
{ name: '园区8#', value: 220 },
{ name: '园区9#', value: 130 }
]
const params ={"chartProperties":{},"setCode":"xssrph","chartType":"widget-table","contextData":{"month":"3","year":"2026","pageSize":"20","currentPage":"1","reportCode":"ddddd"}}
const {code,data} = await getData(params);
if(code != 200){
console.error('[Viewer] 获取大屏数据失败:', code);
return;
}
const parkData = data.map(d => ({
name: d.hpmc,
value: d.xse
})).splice(0, 10)
const option = {
backgroundColor: 'transparent',
tooltip: {
@@ -698,18 +797,19 @@ export default {
backgroundColor: 'rgba(15, 42, 66, 0.95)',
borderColor: '#61c8ee',
textStyle: { color: '#fff' },
formatter: '{b}: {c}'
formatter: '{b}: {c}万'
},
grid: {
left: '8%',
right: '28%',
bottom: '15%',
top: '8%',
left: '0',
right: '0',
bottom: '0',
top: '0',
containLabel: true
},
xAxis: {
type: 'category',
data: parkData.map(d => d.name),
axisLine: {
lineStyle: {
color: '#555'
@@ -718,23 +818,62 @@ export default {
axisTick: { show: false },
axisLabel: {
color: '#cccccc',
hideOverlap: false,
interval: 0,
fontSize: 12,
margin: 8
margin: 8,
// 👇 核心：超出自动省略 + 鼠标悬浮显示完整
formatter: function (value) {
if (value.length > 3) {
return value.slice(0,3) + '...';
}
return value;
}
},
axisPointer: {
show: true
},
dataZoom: [
{
type: 'slider', // 底部滑动条
show: false, // 隐藏滑动条（只保留滚动能力）
xAxisIndex: [0],
start: 0,
end: 100
},
{
type: 'inside', // 内置滚动（鼠标滚轮/拖拽滚动）
xAxisIndex: [0],
start: 0,
end: 100,
zoomLock: true // 禁止缩放，只允许滚动
}
]
},
yAxis: {
type: 'value',
show: false,
max: 1200
show: true,
max: parkData[0].value+300,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.15)', // 柔和的浅色线（可改颜色）
width: 1,
type: 'solid'
}
}
},
series: [
{
name: '能耗',
name: '销售额',
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: ['70%', '100%'],
symbolSize: ['180%', '100%'],
symbolPosition: 'end',
symbolOffset: [0, '50%'],
symbolRepeat: false,
symbol: 'path://M0,0 Q-5,85 -50,100 L50,100 Q5,85 0,0 Z',
itemStyle: {
color: {
type: 'linear',
@@ -749,8 +888,7 @@ export default {
show: true,
position: 'top',
color: '#ff6f46',
fontSize: 14,
fontWeight: 'bold',
fontSize: 10,
formatter: '{c}'
},
data: parkData.map(d => d.value)
@@ -872,9 +1010,9 @@ export default {
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
display: flex;
justify-content: space-between;
}
.stat-item {
@@ -916,7 +1054,7 @@ export default {
border: 1px solid #fff;
}
.stat-item .stat-change {
font-size: 10px;
font-size: 12px;
font-weight: bold;
padding: 2px 6px;
border-radius: 10px;
@@ -1005,7 +1143,12 @@ export default {
background: rgba(97, 200, 238, 0.3);
color: #fff;
}
.carbon-card{
background: rgb(32, 37, 43);
border: 2px solid rgb(49, 56, 66);
border-radius: 5px;
border-bottom: 0;
}
.carbon-content {
display: flex;
height: 170px;
@@ -1059,7 +1202,11 @@ export default {
font-weight: bold;
color: #fff;
}
.energy-card{
background: rgb(32, 37, 43);
border: 2px solid rgb(49, 56, 66);
border-radius: 5px;
}
.energy-content {
display: flex;
height: 200px;
@@ -1174,10 +1321,39 @@ export default {
border-radius-bottom-right: 5px;
border-top: 0;
margin-bottom: 15px;
.peak-desc{
display: flex;
color: #fff;
padding: 10px 15px;
.desc-item{
flex: 1;
align-items: flex-start;
line-height: 1.5;
.desc-label{
text-align:left;
font-size: 14px;
color: #fff;
}
.desc-value{
font-size: 20px;
}
}
}
}
.peak-content {
display: flex;
flex-direction: column;
padding: 0 15px ;
align-items: center;
.peak-cai-icon{
font-size: 26px;
color: #fff;
border: 1px solid #fff;
height: 60px;
width: 60px;
line-height: 58px;
text-align: center;
}
}
.peak-stats {
@@ -1189,7 +1365,11 @@ export default {
font-weight: bold;
color: #1890ff;
}
.park-card{
background: rgb(32, 37, 43);
border: 2px solid rgb(49, 56, 66);
border-radius: 5px;
}
.peak-unit {
font-size: 12px;
color: #6b8cae;
@@ -1219,10 +1399,16 @@ export default {
}
.scatter-chart {
height: 70px;
height: 120px;
padding: 0 10px 10px;
width: calc(100% - 60px);
}
.trend-card{
background: rgb(32, 37, 43);
border: 2px solid rgb(49, 56, 66);
border-radius: 5px;
margin-bottom: 15px;
}
.trend-tabs {
gap: 3px;
}
@@ -1240,6 +1426,7 @@ export default {
.park-chart {
flex: 1;
height: 160px;
width: 100%;
}
.park-legend {

3
src/views/bigscreenDesigner/viewer/static.vue
View File

@@ -11,7 +11,7 @@
<!-- 关键优化 1: v-if 包裹整个渲染区域，避免空数据时渲染 -->
<template v-if="dataLoaded">
<!-- 关键优化 2: 分批渲染，避免一次性创建过多 DOM 节点 -->
<static-content :screenData="screenData"></static-content>
<static-content :dashboard="dashboard"></static-content>
</template>
</div>
<el-dialog :title="''" class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
@@ -94,7 +94,6 @@ export default {
try {
const reportCode = 'demotest';
const { code, data } = await detailDashboard(reportCode);
console.log(data)
if (code != 200) {
console.error('[Viewer] 获取大屏数据失败:', code);
return;