修改大屏模块
This commit is contained in:
@@ -2,87 +2,58 @@
|
||||
<div class="dashboard-container">
|
||||
<!-- 左侧面板 -->
|
||||
<aside class="dashboard-left">
|
||||
<!-- 不同品种牛出栏率统计模块 -->
|
||||
<div class="panel slaughter-panel">
|
||||
<!-- 全国牛单价排行榜 -->
|
||||
<div class="panel price-ranking-panel">
|
||||
<div class="panel-header">
|
||||
|
||||
<h3>不同品种牛出栏率统计</h3>
|
||||
<h3>全国牛单价排行榜（元/头）</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div class="echarts-container">
|
||||
<v-chart
|
||||
ref="slaughterPieChart"
|
||||
class="slaughter-pie"
|
||||
:option="slaughterPieOption"
|
||||
autoresize
|
||||
/>
|
||||
<v-chart
|
||||
ref="slaughterBarChart"
|
||||
class="slaughter-bar"
|
||||
:option="slaughterBarOption"
|
||||
autoresize
|
||||
/>
|
||||
<div class="price-table">
|
||||
<div class="price-table-header">
|
||||
<div>序号</div>
|
||||
<div>省份</div>
|
||||
<div>品种</div>
|
||||
<div>单价(元/头)</div>
|
||||
</div>
|
||||
<div class="slaughter-legend">
|
||||
<div class="legend-item" v-for="s in slaughterSpeciesData" :key="s.key">
|
||||
<span class="legend-color" :style="{ background: s.color }"></span>
|
||||
<span class="legend-label">{{ s.name }}</span>
|
||||
<div v-for="(row, idx) in nationalPriceTableSortedRows" :key="row.id" class="price-table-row">
|
||||
<div>{{ idx + 1 }}</div>
|
||||
<div>{{ row.province }}</div>
|
||||
<div>{{ row.breed }}</div>
|
||||
<div class="price-bar-cell">
|
||||
<div class="price-bar-track">
|
||||
<div class="price-bar" :style="getPriceBarStyle(row.price)">
|
||||
<span class="price-value on-bar">{{ formatPrice(row.price) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 全国牛存栏量模块 -->
|
||||
<div class="panel slaughter-panel">
|
||||
<div class="panel-header">
|
||||
<h3>全国牛存栏量</h3>
|
||||
</div>
|
||||
<div class="total-stock">
|
||||
<div class="total-number">
|
||||
<!-- <span class="currency">≈</span> -->
|
||||
<!-- <span class="value">{{ nationalLivestockDisplay }}</span> -->
|
||||
<!-- <span class="unit">头</span> -->
|
||||
</div>
|
||||
<div class="echarts-container">
|
||||
<v-chart
|
||||
ref="nationalLivestockYearChart"
|
||||
class="national-livestock-year-chart"
|
||||
:option="nationalLivestockYearOption"
|
||||
autoresize
|
||||
/>
|
||||
</div>
|
||||
<div class="data-notes">
|
||||
<div class="data-source">数据来源：行业估算（示例）。注：区间值展示按区间中值绘图，标签显示区间。</div>
|
||||
<div v-if="validationMessageSlaughter" class="validation-message">{{ validationMessageSlaughter }}</div>
|
||||
<div class="data-source">数据来源：国家统计/行业估算（示例）。该值为全国牛总存栏量基准。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 不同品种牛存栏率模块 -->
|
||||
<div class="panel livestock-panel">
|
||||
<div class="panel-header">
|
||||
|
||||
<h3>不同品种牛存栏率</h3>
|
||||
|
||||
</div>
|
||||
<div class="echarts-container">
|
||||
<v-chart
|
||||
ref="livestockPieChart"
|
||||
class="livestock-pie"
|
||||
:option="livestockPieOption"
|
||||
autoresize
|
||||
/>
|
||||
<v-chart
|
||||
ref="livestockBarChart"
|
||||
class="livestock-bar"
|
||||
:option="livestockBarOption"
|
||||
autoresize
|
||||
/>
|
||||
</div>
|
||||
<div class="livestock-legend">
|
||||
<div class="legend-item" v-for="s in livestockSpeciesData" :key="s.key">
|
||||
<span class="legend-color" :style="{ background: s.color }"></span>
|
||||
<span class="legend-label">{{ s.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-notes">
|
||||
<!-- <div class="total-annotation">全国牛总存栏量基准值：100,000,000头</div> -->
|
||||
<!-- <div class="yak-note">牦牛全球占比：>90%，国内占比：16%</div> -->
|
||||
<div class="data-source">数据来源：国家统计/行业估算（示例）。注：各品类统计口径可能不同，比例求和不一定为100%。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 不同品种年度总销售额柱状图模块 -->
|
||||
<div class="panel sales-revenue-panel">
|
||||
<div class="panel-header">
|
||||
|
||||
<h3>不同品种年度总销售额</h3>
|
||||
</div>
|
||||
<v-chart
|
||||
ref="salesRevenueChart"
|
||||
class="sales-revenue-chart"
|
||||
:option="salesRevenueChartOption"
|
||||
autoresize
|
||||
/>
|
||||
</div>
|
||||
<!-- 已移除：不同品种年度总销售额柱状图模块 -->
|
||||
|
||||
</aside>
|
||||
|
||||
@@ -96,42 +67,62 @@
|
||||
|
||||
<!-- 右侧面板 -->
|
||||
<aside class="dashboard-right">
|
||||
<!-- 地区-品种明细表 -->
|
||||
<div class="panel detail-panel">
|
||||
<!-- 品种单价排行榜（替换原地区-品种明细） -->
|
||||
<div class="panel price-ranking-panel">
|
||||
<div class="panel-header">
|
||||
|
||||
<h3>地区-品种明细</h3>
|
||||
|
||||
<h3>品种单价排行榜（元/头）</h3>
|
||||
<select v-model="rightSelectedBreed" class="breed-selector">
|
||||
<option v-for="b in rightBreedOptions" :key="b" :value="b">{{ b }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="detail-table">
|
||||
<div class="detail-header">
|
||||
<div class="species-price-table">
|
||||
<div class="species-price-table-header">
|
||||
<div>序号</div>
|
||||
<div>品种</div>
|
||||
<div>地区</div>
|
||||
<div>存栏(头)</div>
|
||||
<div>出售(头)</div>
|
||||
<div>单价(元/头)</div>
|
||||
</div>
|
||||
<div v-for="row in filteredDetailRows" :key="row.id" class="detail-row">
|
||||
<div v-for="(row, idx) in speciesPriceTableSortedRows" :key="row.id" class="species-price-table-row">
|
||||
<div>{{ idx + 1 }}</div>
|
||||
<div>{{ row.breed }}</div>
|
||||
<div>{{ row.region }}</div>
|
||||
<div>{{ row.stock }}</div>
|
||||
<div>{{ row.sold }}</div>
|
||||
<div>{{ row.price }}</div>
|
||||
<div>{{ formatPrice(row.price) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 品种单价排行榜 -->
|
||||
<div class="panel price-panel" >
|
||||
<!-- 全国省份单价排行榜（元/头） -->
|
||||
<div class="panel price-ranking-panel">
|
||||
<div class="panel-header">
|
||||
<h3>2025年主要品种牛单价趋势预测（元/公斤，活重）</h3>
|
||||
<h3>全国省份单价排行榜（元/头）</h3>
|
||||
</div>
|
||||
<div class="price-content">
|
||||
<div class="echarts-container">
|
||||
<v-chart
|
||||
class="price-chart"
|
||||
:option="priceRankingOption"
|
||||
ref="provincePriceRankingChart"
|
||||
class="province-price-ranking-chart"
|
||||
:option="nationalProvincePriceRankingOption"
|
||||
autoresize
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全国牛出栏率模块（年度全国出栏总量） -->
|
||||
<div class="panel livestock-panel">
|
||||
<div class="panel-header">
|
||||
<h3>全国牛出栏率</h3>
|
||||
</div>
|
||||
<div class="echarts-container">
|
||||
<v-chart
|
||||
ref="nationalSlaughterYearChart"
|
||||
class="national-slaughter-year-chart"
|
||||
:option="nationalSlaughterYearOption"
|
||||
autoresize
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="data-notes">
|
||||
<div class="data-source">全国出栏总量（单位：万头）。数据来源：国家统计/行业估算（示例）。</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
@@ -145,6 +136,153 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 全国牛存栏量显示样式 */
|
||||
.total-stock {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
.total-number {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
.total-number .currency {
|
||||
color: #00ffff;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.total-number .value {
|
||||
color: #00ffcc;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.total-number .unit {
|
||||
color: #cfefff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.national-livestock-year-chart {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.national-slaughter-year-chart {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.national-price-ranking-chart {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
.province-price-ranking-chart {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
.price-ranking-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.price-ranking-panel .echarts-container {
|
||||
height: auto;
|
||||
padding: 0 0 5px 0; /* 左侧去掉内边距，整体更靠左 */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 品种单价排行榜列表样式（右侧） */
|
||||
.species-price-table {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
flex: 1; /* 自适应撑满当前面板剩余空间 */
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.species-price-table-header,
|
||||
.species-price-table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.7fr 1.2fr 1.4fr 1.2fr; /* 序号/品种/地区/单价 */
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.species-price-table-header {
|
||||
color: #84acf0;
|
||||
border-bottom: 1px solid rgba(132, 172, 240, 0.2);
|
||||
padding-bottom: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.species-price-table-row {
|
||||
color: #eaf7ff;
|
||||
}
|
||||
|
||||
/* 全国牛单价排行榜表格样式 */
|
||||
.price-table {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
/* 表格自适应增高，撑满左侧面板剩余空间 */
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.price-table-header,
|
||||
.price-table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.6fr 1fr 1.2fr 2fr;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.price-table-header {
|
||||
color: #84acf0;
|
||||
border-bottom: 1px solid rgba(132, 172, 240, 0.2);
|
||||
padding-bottom: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.price-table-row {
|
||||
color: #eaf7ff;
|
||||
}
|
||||
/* 单价列条形图样式 */
|
||||
.price-bar-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.price-bar-track {
|
||||
flex: 1;
|
||||
height: 18px;
|
||||
border-radius: 0;
|
||||
background: transparent; /* 去掉背景色，仅保留条形图颜色 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.price-bar {
|
||||
height: 100%;
|
||||
border-radius: 0 0 0 0; /* 去掉左侧圆角，仅保留右侧 */
|
||||
background: #4e73df; /* 与图二一致的蓝色 */
|
||||
transition: width 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.price-value {
|
||||
min-width: 86px;
|
||||
text-align: right;
|
||||
color: #eaf7ff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.price-value.on-bar {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dashboard-center {
|
||||
flex: 1; /* 中心区域保持基准宽度 */
|
||||
min-width: 300px;
|
||||
@@ -161,6 +299,13 @@
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
/* 左侧数据栏按列布局并占满视口高度 */
|
||||
.dashboard-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 中低分辨率下进一步缩小到70%，保证协调性 */
|
||||
@media (max-width: 1366px) {
|
||||
.dashboard-left,
|
||||
@@ -290,6 +435,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 右侧品种单价排行榜下拉选项与选中值
|
||||
rightBreedOptions: ['安格斯','牦牛','黄牛','利木赞牛','鲁西牛','奶牛','肉牛','水牛','西门塔尔牛','夏洛莱牛','杂交牛','牛'],
|
||||
rightSelectedBreed: '安格斯',
|
||||
// 存栏率视图模式：percent 或 count
|
||||
livestockViewMode: 'percent',
|
||||
// 全国牛总存栏量基准值
|
||||
@@ -406,87 +554,147 @@ export default {
|
||||
],
|
||||
slaughterPieOption: {},
|
||||
slaughterBarOption: {},
|
||||
// 不同品种牛存栏率两个独立图表配置（初始化为空，mounted时构建）
|
||||
// 不同品种牛存栏率图表（已改为全国出栏率，此处不再使用）
|
||||
livestockPieOption: {},
|
||||
livestockBarOption: {},
|
||||
|
||||
// 全国牛出栏总量年度柱状图（单位：万头）
|
||||
nationalSlaughterYearOption: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#ffffff' },
|
||||
formatter: function(params) {
|
||||
const p = params[0]
|
||||
return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value} 万头`
|
||||
}
|
||||
},
|
||||
grid: { left: '12%', right: '8%', bottom: '12%', top: '18%' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2020年','2021年','2022年','2023年','2024年'],
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 10 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '万头',
|
||||
nameTextStyle: { color: '#00ffff', fontSize: 11 },
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 10 },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
|
||||
},
|
||||
series: [{
|
||||
name: '全国牛出栏总量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
data: [4565.45, 4707.43, 4839.91, 5023.48, 5098.70],
|
||||
lineStyle: { color: '#00CDCD', width: 2 },
|
||||
itemStyle: { color: '#00CDCD' },
|
||||
areaStyle: { color: 'rgba(0,205,205,0.15)' },
|
||||
label: { show: true, position: 'top', color: '#cfefff', fontSize: 10, formatter: '{c} 万头' }
|
||||
}]
|
||||
},
|
||||
|
||||
// 品种单价趋势图配置（2025年主要品种牛，单位：元/公斤，活重）
|
||||
priceRankingOption: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#ffffff' },
|
||||
formatter: function(params) {
|
||||
let result = params[0].axisValue + '<br/>';
|
||||
params.forEach(param => {
|
||||
result += param.marker + param.seriesName + ': ' + param.value + ' 元/公斤<br/>';
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['杂交改良牛（西门塔尔）', '地方黄牛（秦川牛等）', '高端肉牛（安格斯/和牛）'],
|
||||
textStyle: { color: '#fff', fontSize: 10 },
|
||||
top: '5%',
|
||||
itemWidth: 12,
|
||||
itemHeight: 8
|
||||
},
|
||||
grid: { top: '25%', right: '8%', bottom: '15%', left: '15%' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
name: '月份',
|
||||
nameTextStyle: { color: '#00ffff', fontSize: 11 },
|
||||
axisLabel: { color: '#fff', fontSize: 10, rotate: 0 },
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单价（元/公斤）',
|
||||
nameTextStyle: { color: '#00ffff', fontSize: 11 },
|
||||
axisLabel: { color: '#fff', fontSize: 10 },
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } },
|
||||
min: 25,
|
||||
max: 90
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '杂交改良牛（西门塔尔）',
|
||||
type: 'line',
|
||||
data: [35, 36, 36, 35, 34, 33, 34, 36, 38, 40, 42, 44],
|
||||
lineStyle: { color: '#267EEF', width: 2 },
|
||||
itemStyle: { color: '#267EEF' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '地方黄牛（秦川牛等）',
|
||||
type: 'line',
|
||||
data: [70, 71, 70, 68, 66, 65, 66, 68, 72, 75, 78, 80],
|
||||
lineStyle: { color: '#00CDCD', width: 2 },
|
||||
itemStyle: { color: '#00CDCD' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '高端肉牛（安格斯/和牛）',
|
||||
type: 'line',
|
||||
data: [80, 81, 80, 78, 76, 75, 76, 78, 82, 85, 86, 85],
|
||||
lineStyle: { color: '#42A2E1', width: 2 },
|
||||
itemStyle: { color: '#42A2E1' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
// 全国牛存栏量年度柱状图（单位：万头）
|
||||
nationalLivestockYearOption: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#ffffff' },
|
||||
formatter: function(params) {
|
||||
const p = params[0]
|
||||
return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value} 万头`
|
||||
}
|
||||
},
|
||||
grid: { left: '12%', right: '8%', bottom: '12%', top: '18%' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2020年','2021年','2022年','2023年','2024年'],
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 10 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '万头',
|
||||
nameTextStyle: { color: '#00ffff', fontSize: 11 },
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 10 },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
|
||||
},
|
||||
series: [{
|
||||
name: '全国牛存栏总量',
|
||||
type: 'bar',
|
||||
data: [ 9562, 9817, 10215, 10508, 10046],
|
||||
barWidth: '40%',
|
||||
itemStyle: { color: '#00CDCD' },
|
||||
label: { show: true, position: 'top', color: '#cfefff', fontSize: 10, formatter: '{c} 万头' }
|
||||
}]
|
||||
},
|
||||
|
||||
|
||||
// 已移除：2025年主要品种牛单价趋势预测配置
|
||||
|
||||
// 全国牛单价排行榜表格数据
|
||||
nationalPriceTableRows: [
|
||||
{ id: 1, province: '河北省', breed: '安格斯牛', price: 14200 },
|
||||
{ id: 2, province: '山东省', breed: '荷斯坦牛', price: 17000 },
|
||||
{ id: 3, province: '江苏省', breed: '复洲黄牛', price: 14500 },
|
||||
{ id: 4, province: '浙江省', breed: '西门塔尔牛', price: 16800 },
|
||||
{ id: 5, province: '新疆维吾尔自治区', breed: '夏洛莱牛', price: 16500 },
|
||||
{ id: 6, province: '甘肃省', breed: '水牛', price: 17387 },
|
||||
{ id: 7, province: '广东省', breed: '安格斯牛', price: 14200 },
|
||||
{ id: 8, province: '广西壮族自治区', breed: '荷斯坦牛', price: 17000 },
|
||||
{ id: 9, province: '湖南省', breed: '复洲黄牛', price: 14500 },
|
||||
{ id: 10, province: '河南省', breed: '西门塔尔牛', price: 16800 }
|
||||
],
|
||||
|
||||
// 全国牛单价排行榜配置（单位：元/头）
|
||||
nationalPriceRankingOption: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#ffffff' },
|
||||
formatter: function(params) {
|
||||
const p = params[0]
|
||||
return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value} 元/头`
|
||||
}
|
||||
},
|
||||
grid: { left: '18%', right: '12%', bottom: '15%', top: '20%' },
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '单价（元/头）',
|
||||
nameTextStyle: { color: '#00ffff', fontSize: 11 },
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 10 },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['荷斯坦牛','西门塔尔牛','夏洛莱牛','复洲黄牛','安格斯牛','水牛'],
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 11 }
|
||||
},
|
||||
series: [{
|
||||
name: '全国主要品种单价',
|
||||
type: 'bar',
|
||||
data: [17000, 16800, 16500, 14500, 14200, 17387],
|
||||
barWidth: '45%',
|
||||
itemStyle: { color: '#00CDCD' },
|
||||
label: { show: true, position: 'right', color: '#cfefff', fontSize: 10, formatter: '{c} 元/头' }
|
||||
}]
|
||||
},
|
||||
|
||||
// 地区-品种明细数据
|
||||
@@ -510,7 +718,7 @@ export default {
|
||||
},
|
||||
|
||||
// 耳标佩戴统计堆叠柱状图配置
|
||||
earTagChartOption: {
|
||||
earTagChartOption: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -660,97 +868,22 @@ export default {
|
||||
]
|
||||
},
|
||||
|
||||
// 不同品种年度总销售额柱状图配置
|
||||
salesRevenueChartOption: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
formatter: '{a} <br/>{b}: {c}万元'
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
right: '8%',
|
||||
bottom: '15%',
|
||||
left: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['安格斯牛', '荷斯坦牛', '夏洛莱牛', '西门塔尔牛', '利木赞牛', '其他品种'],
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
rotate: 45
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#00ffff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#00ffff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '销售额(万元)',
|
||||
nameTextStyle: {
|
||||
color: '#00ffff',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
fontSize: 11
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#00ffff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#00ffff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 255, 255, 0.2)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '年度总销售额',
|
||||
type: 'bar',
|
||||
data: [
|
||||
{ value: 28500, itemStyle: { color: '#00CDCD' } },
|
||||
{ value: 22800, itemStyle: { color: '#869DB0' } },
|
||||
{ value: 18600, itemStyle: { color: '#267EEF' } },
|
||||
{ value: 15200, itemStyle: { color: '#42A2E1' } },
|
||||
{ value: 12800, itemStyle: { color: '#3BF3D3' } },
|
||||
{ value: 9600, itemStyle: { color: '#00CDCD' } }
|
||||
],
|
||||
barWidth: '60%',
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#00ffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 已移除：不同品种年度总销售额柱状图配置
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nationalLivestockCount() {
|
||||
return this.livestockBaseline || 0
|
||||
},
|
||||
nationalLivestockDisplay() {
|
||||
try {
|
||||
return (this.nationalLivestockCount || 0).toLocaleString('zh-CN')
|
||||
} catch (e) {
|
||||
return String(this.nationalLivestockCount || 0)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalLivestock() {
|
||||
// 以数据源计算总存栏量（万头）
|
||||
@@ -761,9 +894,97 @@ export default {
|
||||
return this.detailRows
|
||||
}
|
||||
return this.detailRows.filter(row => row.breed === this.selectedBreed)
|
||||
},
|
||||
// 品种单价排行榜（右侧）基于地区-品种明细，按价格升序
|
||||
speciesPriceTableSortedRows() {
|
||||
let rows = Array.isArray(this.detailRows) ? this.detailRows.map(r => ({
|
||||
id: r.id,
|
||||
breed: r.breed,
|
||||
region: r.region,
|
||||
price: r.price
|
||||
})) : []
|
||||
// 下拉选择生效：按包含关系过滤（处理“安格斯”匹配“安格斯牛”等）
|
||||
if (this.rightSelectedBreed) {
|
||||
rows = rows.filter(x => String(x.breed || '').includes(this.rightSelectedBreed))
|
||||
}
|
||||
rows.sort((a, b) => a.price - b.price)
|
||||
return rows
|
||||
},
|
||||
// 全国省份单价排行榜（右侧图表）：以 nationalPriceTableRows 为数据源，按单价升序
|
||||
nationalProvincePriceRankingOption() {
|
||||
const rows = Array.isArray(this.nationalPriceTableRows) ? [...this.nationalPriceTableRows] : []
|
||||
rows.sort((a, b) => a.price - b.price)
|
||||
const yCategories = rows.map(r => r.province)
|
||||
const prices = rows.map(r => r.price)
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#ffffff' },
|
||||
formatter: function(params) {
|
||||
const p = params[0]
|
||||
return `${p.axisValue}<br/>${p.seriesName}: ${p.value} 元/头`
|
||||
}
|
||||
},
|
||||
grid: { left: '0%', right: '10%', bottom: '10%', top: '10%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '单价（元/头）',
|
||||
nameTextStyle: { color: '#00ffff', fontSize: 11 },
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 10 },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: yCategories,
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 11 }
|
||||
},
|
||||
series: [{
|
||||
name: '省份单价',
|
||||
type: 'bar',
|
||||
data: prices,
|
||||
barWidth: '45%',
|
||||
itemStyle: { color: '#4e73df' },
|
||||
label: { show: true, position: 'right', color: '#cfefff', fontSize: 10, formatter: '{c} 元/头' }
|
||||
}]
|
||||
}
|
||||
},
|
||||
// 单价条形图需要的最大值（用于计算宽度百分比）
|
||||
priceBarMax() {
|
||||
const arr = Array.isArray(this.nationalPriceTableRows) ? this.nationalPriceTableRows.map(r => r.price) : []
|
||||
const max = Math.max(...arr, 1)
|
||||
return max
|
||||
},
|
||||
// 单价升序排列后的行数据
|
||||
nationalPriceTableSortedRows() {
|
||||
const rows = Array.isArray(this.nationalPriceTableRows) ? [...this.nationalPriceTableRows] : []
|
||||
rows.sort((a, b) => a.price - b.price)
|
||||
return rows
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 格式化价格显示（千分位）
|
||||
formatPrice(value) {
|
||||
try {
|
||||
return Number(value || 0).toLocaleString('zh-CN')
|
||||
} catch (e) {
|
||||
return String(value || 0)
|
||||
}
|
||||
},
|
||||
// 计算条形宽度样式
|
||||
getPriceBarStyle(price) {
|
||||
const max = this.priceBarMax || 1
|
||||
const ratio = Math.max(0, Math.min(1, Number(price || 0) / max))
|
||||
// 增强对比：非线性拉伸，最小5%，最大100%，采用幂函数放大差异
|
||||
const percent = 5 + Math.pow(ratio, 0.6) * 95
|
||||
return { width: `${percent.toFixed(2)}%` }
|
||||
},
|
||||
// 构建环形图（占比）
|
||||
buildLivestockPieOption() {
|
||||
const baseline = this.livestockBaseline
|
||||
@@ -1236,7 +1457,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px; /* 两图间距约16px */
|
||||
height:230px;
|
||||
height:190px;
|
||||
padding: 0 5px 5px 5px;
|
||||
}
|
||||
|
||||
@@ -1312,14 +1533,20 @@ export default {
|
||||
|
||||
/* 出栏率统计样式 */
|
||||
.slaughter-panel {
|
||||
height: 330px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 与“全国牛存栏率”模块保持一致的自适应面板高度 */
|
||||
flex: 0 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
.slaughter-panel .echarts-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
height: 200px;
|
||||
/* 图表容器高度与“全国牛存栏率”模块一致 */
|
||||
flex: 0 0 230px;
|
||||
height: 230px;
|
||||
}
|
||||
.slaughter-pie {
|
||||
flex: 0 0 42%;
|
||||
@@ -1398,16 +1625,7 @@ export default {
|
||||
|
||||
|
||||
|
||||
/* 品种单价排行榜样式 */
|
||||
.price-panel .price-content {
|
||||
height: 280px;
|
||||
padding: 0 15px 10px 10px;
|
||||
}
|
||||
|
||||
.price-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 已移除：品种单价排行榜样式 */
|
||||
|
||||
/* 明细表样式 */
|
||||
.detail-table {
|
||||
@@ -1446,21 +1664,7 @@ export default {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 销售额柱状图模块样式 */
|
||||
.sales-revenue-panel {
|
||||
margin-top: 5px;
|
||||
height: 280px; /* 缩小高度 */
|
||||
background: rgba(0, 20, 40, 0.3);
|
||||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.sales-revenue-chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px); /* 调整高度计算 */
|
||||
margin-top: 15px; /* 添加上边距，将图表往下移 */
|
||||
}
|
||||
/* 已移除：销售额柱状图模块样式 */
|
||||
|
||||
|
||||
|
||||
@@ -1504,7 +1708,7 @@ export default {
|
||||
border: 1px solid rgba(0, 212, 255, 0.4);
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
padding: 4px 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1526,4 +1730,4 @@ export default {
|
||||
.data-source {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -58,11 +58,11 @@ export default {
|
||||
// const showPopup = ref(false);
|
||||
// const selectedFarmData = ref(null);
|
||||
|
||||
// 全国牛源地TOP5数据
|
||||
// 全国牛源地TOP3数据（单位：万）
|
||||
const cattleSourceTop5 = ref([
|
||||
{ province: '广西', count: 760 },
|
||||
{ province: '云南', count: 247 },
|
||||
{ province: '贵州', count: 186 },
|
||||
{ province: '内蒙古', count: 1032 },
|
||||
{ province: '新疆', count: 849 },
|
||||
{ province: '四川', count: 811 },
|
||||
]);
|
||||
|
||||
// 重置
|
||||
@@ -1715,17 +1715,20 @@ export default {
|
||||
<style>
|
||||
/* 地图容器样式 - 响应式设计 */
|
||||
.map-3d-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 80px; /* 紧贴顶部标题栏，高度与 .dashboard-header 保持一致 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 80px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0; /* 低于侧边栏与标题 */
|
||||
}
|
||||
|
||||
#app-32-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 700px; /* 最大化增加最小高度 */
|
||||
min-width: 900px; /* 最大化增加最小宽度 */
|
||||
}
|
||||
|
||||
/* 响应式设计 - 适应不同屏幕尺寸 */
|
||||
@@ -1768,8 +1771,8 @@ export default {
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#app-32-map {
|
||||
min-height: 500px;
|
||||
min-width: 600px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.province-name-label {
|
||||
@@ -2068,4 +2071,4 @@ export default {
|
||||
|
||||
/* 移除养殖场标签样式 */
|
||||
/* .farm-label { ... } */
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user