修改价格行情模块
This commit is contained in:
137
src/App.vue
137
src/App.vue
@@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Home from './components/Home.vue'
|
||||
import Alert from './components/Alert.vue'
|
||||
import Price from './components/Price.vue'
|
||||
|
||||
// 当前激活的页面
|
||||
@@ -13,7 +12,6 @@ const selectedProvince = ref('')
|
||||
// 页面组件映射
|
||||
const pageComponents = {
|
||||
home: Home,
|
||||
alert: Alert,
|
||||
price: Price
|
||||
}
|
||||
|
||||
@@ -92,9 +90,6 @@ const navigateToWarningMonitor = (provinceName) => {
|
||||
<div class="nav-item" :class="{ active: currentPage === 'price' }" @click="switchPage('price', 'NM')">
|
||||
<span>价格行情</span>
|
||||
</div>
|
||||
<div class="nav-item" :class="{ active: currentPage === 'alert' }" @click="switchPage('alert')">
|
||||
<span>预警监测</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="title-container">
|
||||
@@ -141,6 +136,7 @@ body {
|
||||
width: 100vw;
|
||||
min-height: 100vh; /* 使用 min-height 而不是固定高度 */
|
||||
height: 100%;
|
||||
background-color: #011819; /* 在应用尚未渲染时也显示纯色背景 */
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
@@ -161,7 +157,7 @@ body {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(12, 20, 38, 0.45); /* 降低遮罩不透明度以提升整体亮度 */
|
||||
background: #011819; /* 纯色覆盖层：在背景图之上、内容之下 */
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -497,7 +493,7 @@ body {
|
||||
.dashboard-right {
|
||||
position: fixed;
|
||||
top: 80px; /* 紧贴顶部标题栏 */
|
||||
width: 580px; /* 增加侧边栏宽度 */
|
||||
width: 680px; /* 加宽侧边栏 */
|
||||
height: calc(100vh - 80px); /* 全屏高度减去顶部标题栏高度 */
|
||||
max-height: calc(100vh - 80px); /* 限制最大高度 */
|
||||
display: flex;
|
||||
@@ -612,30 +608,23 @@ body {
|
||||
}
|
||||
|
||||
.alert-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
.alert-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.alert-item.warning {
|
||||
border-left: 4px solid #ff6b35;
|
||||
|
||||
}
|
||||
|
||||
.alert-item.normal {
|
||||
border-left: 4px solid #00ff88;
|
||||
|
||||
}
|
||||
|
||||
.alert-text {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
@@ -702,170 +691,112 @@ body {
|
||||
|
||||
/* 传感器状态样式 */
|
||||
.sensor-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
}
|
||||
|
||||
.sensor-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.sensor-name {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.sensor-status.online {
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
.sensor-status.offline {
|
||||
color: #84acf0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 设备列表样式 */
|
||||
.device-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
}
|
||||
|
||||
.device-item {
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.device-name {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
}
|
||||
|
||||
.device-status.online {
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
|
||||
.device-status.offline {
|
||||
color: #84acf0;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
|
||||
/* 预警规则样式 */
|
||||
.rule-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.rule-threshold {
|
||||
color: #00d4ff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
/* 预警详情样式 */
|
||||
.alert-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.alert-detail-item {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
}
|
||||
|
||||
.alert-detail-item.high {
|
||||
border-left-color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
}
|
||||
|
||||
.alert-detail-item.medium {
|
||||
border-left-color: #84acf0;
|
||||
background: rgba(132, 172, 240, 0.1);
|
||||
|
||||
}
|
||||
|
||||
.alert-detail-item.low {
|
||||
border-left-color: #336699;
|
||||
background: rgba(51, 102, 153, 0.1);
|
||||
|
||||
}
|
||||
|
||||
.alert-time {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
|
||||
}
|
||||
|
||||
.alert-desc {
|
||||
color: #cccccc;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.4;
|
||||
|
||||
}
|
||||
|
||||
.alert-level {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
.alert-detail-item.high .alert-level {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
|
||||
}
|
||||
|
||||
.alert-detail-item.medium .alert-level {
|
||||
background: #84acf0;
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
.alert-detail-item.low .alert-level {
|
||||
background: #336699;
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
/* 处理记录样式 */
|
||||
|
||||
32
src/assets/global.css
Normal file
32
src/assets/global.css
Normal file
@@ -0,0 +1,32 @@
|
||||
/* 全局隐藏滚动条（保持可滚动） */
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* IE/Edge 旧版 */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* WebKit (Chrome/Safari/新 Edge) */
|
||||
*::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 明确为根元素也设置一次，避免某些嵌套容器覆盖 */
|
||||
html, body, #app {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar,
|
||||
#app::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -20,10 +20,9 @@
|
||||
<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 class="price-bar" :style="getPriceBarStyle(row.price)"></div>
|
||||
</div>
|
||||
<span class="price-value after-bar">{{ formatPrice(row.price) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,6 +66,11 @@
|
||||
<!-- 地图容器 -->
|
||||
<div class="map-container">
|
||||
<Map3D @province-click="handleProvinceClick" />
|
||||
<!-- 跳转加载动画覆盖层 -->
|
||||
<div v-if="isJumpLoading" class="jump-loading-overlay">
|
||||
<div class="jump-spinner"></div>
|
||||
<div class="jump-loading-text">正在请求 {{ loadingProvince }} 数据...</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -77,6 +81,8 @@
|
||||
<div class="panel-header">
|
||||
<h3>品种单价排行榜（元/斤）</h3>
|
||||
<select v-model="rightSelectedBreed" class="breed-selector">
|
||||
<option v-if="breedsLoading" disabled>加载中...</option>
|
||||
<option v-else-if="rightBreedOptions.length === 0" disabled>暂无数据</option>
|
||||
<option v-for="b in rightBreedOptions" :key="b" :value="b">{{ b }}</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -163,6 +169,9 @@
|
||||
gap: 20px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative; /* 允许作为背景层容器 */
|
||||
min-height: 100vh; /* 充满视口高度，保证背景覆盖 */
|
||||
background-color: #011819; /* 底层纯色背景，位于背景图之上、内容之下 */
|
||||
}
|
||||
|
||||
/* 全国牛存栏量显示样式 */
|
||||
@@ -206,7 +215,7 @@
|
||||
}
|
||||
.province-price-ranking-chart {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: 300px;
|
||||
}
|
||||
.price-ranking-panel {
|
||||
display: flex;
|
||||
@@ -304,11 +313,10 @@
|
||||
color: #eaf7ff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.price-value.on-bar {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
.price-value.after-bar {
|
||||
min-width: 86px;
|
||||
text-align: right;
|
||||
color: #eaf7ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dashboard-center {
|
||||
@@ -457,54 +465,104 @@ export default {
|
||||
const showNoDataToast = ref(false)
|
||||
const noDataMessage = ref('')
|
||||
let toastTimer = null
|
||||
const isJumpLoading = ref(false)
|
||||
const loadingProvince = ref('')
|
||||
// 省份点击请求控制器（用于防抖与取消上一次未完成的请求）
|
||||
let provinceClickController = null
|
||||
|
||||
// provinces 接口参数映射：仅处理指定示例，其余保持不变
|
||||
const toApiProvinceParam = (name) => {
|
||||
const map = {
|
||||
'内蒙古自治区': '内蒙古',
|
||||
'四川省': '四川',
|
||||
'新疆维吾尔自治区': '新疆',
|
||||
'西藏自治区': '西藏',
|
||||
'宁夏回族自治区': '宁夏',
|
||||
'广西自治区': '广西',
|
||||
'河北省': '河北',
|
||||
'山东省': '山东',
|
||||
'黑龙江省': '黑龙江',
|
||||
'吉林省': '吉林',
|
||||
'云南省': '云南',
|
||||
'甘肃省': '甘肃',
|
||||
'青海省': '青海',
|
||||
'贵州省': '贵州',
|
||||
'安徽省': '安徽',
|
||||
}
|
||||
return map[name] ?? name
|
||||
}
|
||||
|
||||
// 处理省份点击事件
|
||||
const handleProvinceClick = async (provinceName) => {
|
||||
// 若正在跳转/请求中，直接忽略后续点击，避免重复触发
|
||||
if (isJumpLoading.value) return
|
||||
|
||||
// 跳转前加载动画
|
||||
loadingProvince.value = provinceName
|
||||
isJumpLoading.value = true
|
||||
|
||||
// 取消上一次未完成的请求（防抖与竞态控制）
|
||||
if (provinceClickController) {
|
||||
try { provinceClickController.abort() } catch {}
|
||||
}
|
||||
provinceClickController = new AbortController()
|
||||
|
||||
// 外部接口调用，超时控制（从2秒提高到8秒）
|
||||
let url = ''
|
||||
const timeoutId = setTimeout(() => {
|
||||
try { provinceClickController.abort() } catch {}
|
||||
}, 8000)
|
||||
try {
|
||||
console.log('正在请求省份数据:', provinceName);
|
||||
const res = await axios.get('/api/cattle-data', {
|
||||
params: { province: provinceName }
|
||||
})
|
||||
|
||||
console.log('省份数据返回:', res.data);
|
||||
const raw = res.data;
|
||||
// 兼容直接返回数组或 { data: [] } 的结构
|
||||
const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : []);
|
||||
|
||||
const apiParam = toApiProvinceParam(provinceName)
|
||||
url = `/api/cattle-data/provinces?province=${encodeURIComponent(apiParam)}`
|
||||
const res = await fetch(url, { signal: provinceClickController.signal })
|
||||
clearTimeout(timeoutId)
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
const raw = await res.json()
|
||||
const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])
|
||||
|
||||
if (list && list.length > 0) {
|
||||
console.log('数据存在，准备跳转');
|
||||
// 接口成功且有数据，自动跳转到价格行情页
|
||||
isJumpLoading.value = false
|
||||
emit('navigate-to-warning', provinceName)
|
||||
} else {
|
||||
console.warn('该地区无数据');
|
||||
noDataMessage.value = `该地区暂无数据: ${provinceName}`
|
||||
showNoDataToast.value = true
|
||||
if (toastTimer) clearTimeout(toastTimer)
|
||||
toastTimer = setTimeout(() => {
|
||||
showNoDataToast.value = false
|
||||
}, 3000)
|
||||
throw new Error('empty payload')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取省份数据出错:', error)
|
||||
noDataMessage.value = `获取数据失败: ${provinceName}`
|
||||
clearTimeout(timeoutId)
|
||||
// 区分超时与其他错误
|
||||
if (error?.name === 'AbortError') {
|
||||
console.warn('[外部接口] 超时已中止请求 (8s):', url)
|
||||
noDataMessage.value = '请求超时'
|
||||
} else {
|
||||
console.error('[外部接口] 调用失败:', error)
|
||||
noDataMessage.value = '接口调用失败'
|
||||
}
|
||||
isJumpLoading.value = false
|
||||
showNoDataToast.value = true
|
||||
if (toastTimer) clearTimeout(toastTimer)
|
||||
toastTimer = setTimeout(() => {
|
||||
showNoDataToast.value = false
|
||||
}, 3000)
|
||||
}, 2000)
|
||||
} finally {
|
||||
provinceClickController = null
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
handleProvinceClick,
|
||||
showNoDataToast,
|
||||
noDataMessage
|
||||
noDataMessage,
|
||||
isJumpLoading,
|
||||
loadingProvince
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 右侧品种单价排行榜下拉选项与选中值
|
||||
rightBreedOptions: ['安格斯','牦牛','黄牛','利木赞牛','鲁西牛','奶牛','肉牛','水牛','西门塔尔牛','夏洛莱牛','杂交牛','牛'],
|
||||
rightSelectedBreed: '安格斯',
|
||||
rightBreedOptions: [],
|
||||
rightSelectedBreed: '',
|
||||
breedsLoading: false,
|
||||
speciesPriceRows: [], // 品种单价排行（接口）
|
||||
// 存栏率视图模式：percent 或 count
|
||||
livestockViewMode: 'percent',
|
||||
@@ -987,7 +1045,7 @@ export default {
|
||||
? [...this.nationalProvinceAverageRows]
|
||||
: (Array.isArray(this.nationalPriceTableRows) ? [...this.nationalPriceTableRows] : [])
|
||||
base.sort((a, b) => a.price - b.price)
|
||||
const yCategories = base.map(r => r.province)
|
||||
const xCategories = base.map(r => r.province)
|
||||
const prices = base.map(r => r.price)
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
@@ -1003,36 +1061,39 @@ export default {
|
||||
return `${p.axisValue}<br/>${p.seriesName}: ${p.value} 元/斤`
|
||||
}
|
||||
},
|
||||
grid: { left: '0%', right: '10%', bottom: '5%', top: '5%', containLabel: true },
|
||||
grid: { left: '4%', right: '0%', bottom: '15%', top: '10%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xCategories,
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 9, interval: 0 },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单价（元/斤）',
|
||||
nameTextStyle: { color: '#00ffff', fontSize: 11 },
|
||||
axisLine: { lineStyle: { color: '#00ffff' } },
|
||||
axisLabel: { color: '#ffffff', fontSize: 10 },
|
||||
min: 12,
|
||||
max: 15,
|
||||
interval: 1,
|
||||
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: '42%',
|
||||
barCategoryGap: '28%',
|
||||
itemStyle: { color: '#4e73df' },
|
||||
label: { show: true, position: 'right', color: '#cfefff', fontSize: 10, formatter: '{c} 元/斤' }
|
||||
itemStyle: { color: '#00E1E1' },
|
||||
label: { show: true, position: 'top', color: '#cfefff', fontSize: 10, formatter: '{c} ' }
|
||||
}],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: 0,
|
||||
xAxisIndex: 0,
|
||||
startValue: 0,
|
||||
endValue: yCategories.length - 1,
|
||||
endValue: xCategories.length - 1,
|
||||
zoomLock: true,
|
||||
filterMode: 'empty'
|
||||
}
|
||||
@@ -1062,6 +1123,16 @@ export default {
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面挂载后拉取品种列表以填充右侧下拉框
|
||||
console.log('[Home] mounted: fetchBreeds 即将调用')
|
||||
this.fetchBreeds()
|
||||
},
|
||||
created() {
|
||||
// 保险起见，在 created 阶段也触发一次，避免某些场景 mounted 未执行
|
||||
console.log('[Home] created: fetchBreeds 即将调用')
|
||||
this.fetchBreeds()
|
||||
},
|
||||
methods: {
|
||||
// 格式化价格显示（千分位）
|
||||
formatPrice(value) {
|
||||
@@ -1136,6 +1207,36 @@ export default {
|
||||
console.warn('获取全国省份平均单价失败：', e)
|
||||
}
|
||||
},
|
||||
|
||||
// 拉取品种列表，使用 breedName 作为下拉项
|
||||
async fetchBreeds() {
|
||||
const url = '/api/cattle-data/breeds'
|
||||
this.breedsLoading = true
|
||||
try {
|
||||
console.log('[Home] 调用接口:', url)
|
||||
const res = await fetch(url)
|
||||
const raw = await res.json()
|
||||
console.log('[Home] breeds 接口返回原始数据:', raw)
|
||||
const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])
|
||||
const names = list
|
||||
.map(it => it?.breedName ?? it?.name ?? it?.breed)
|
||||
.filter(Boolean)
|
||||
const uniq = Array.from(new Set(names))
|
||||
console.log('[Home] 解析后的品种列表:', uniq)
|
||||
if (uniq.length > 0) {
|
||||
const prev = this.rightSelectedBreed
|
||||
this.rightBreedOptions = uniq
|
||||
if (!prev || !uniq.includes(prev)) {
|
||||
this.rightSelectedBreed = uniq[0]
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[Home] 获取品种列表失败：', e)
|
||||
} finally {
|
||||
this.breedsLoading = false
|
||||
console.log('[Home] breedsLoading 结束，状态:', this.breedsLoading)
|
||||
}
|
||||
},
|
||||
// 构建环形图（占比）
|
||||
buildLivestockPieOption() {
|
||||
const baseline = this.livestockBaseline
|
||||
@@ -1477,6 +1578,38 @@ export default {
|
||||
margin-top: 0; /* 移除负边距 */
|
||||
}
|
||||
|
||||
/* 跳转加载动画样式 */
|
||||
.jump-loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jump-spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid rgba(0,212,255,0.35);
|
||||
border-top-color: #00d4ff;
|
||||
border-radius: 50%;
|
||||
animation: jumpSpin 1s linear infinite;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.jump-loading-text {
|
||||
color: #eaf7ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes jumpSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lowest-price-panel h3 {
|
||||
|
||||
@@ -1106,9 +1106,6 @@ export default {
|
||||
}
|
||||
});
|
||||
|
||||
// 创建点击反馈提示
|
||||
this.showClickFeedback({ clientX: pointer.clientX, clientY: pointer.clientY }, provinceName);
|
||||
|
||||
// 触发省份点击事件
|
||||
emit('province-click', provinceName);
|
||||
|
||||
@@ -1222,25 +1219,7 @@ export default {
|
||||
this.isMobileDevice = isMobile;
|
||||
}
|
||||
|
||||
// 显示点击反馈提示
|
||||
showClickFeedback(event, provinceName) {
|
||||
const feedback = document.createElement('div');
|
||||
feedback.className = 'province-click-feedback';
|
||||
feedback.textContent = `正在跳转到 ${provinceName} 预警监测`;
|
||||
|
||||
// 设置位置
|
||||
feedback.style.left = `${event.clientX - 100}px`;
|
||||
feedback.style.top = `${event.clientY - 50}px`;
|
||||
|
||||
document.body.appendChild(feedback);
|
||||
|
||||
// 0.6秒后移除
|
||||
setTimeout(() => {
|
||||
if (feedback.parentNode) {
|
||||
feedback.parentNode.removeChild(feedback);
|
||||
}
|
||||
}, 600);
|
||||
}
|
||||
|
||||
|
||||
getDataRenderMap() {}
|
||||
|
||||
@@ -1939,55 +1918,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* 点击反馈提示 - 响应式优化 */
|
||||
.province-click-feedback {
|
||||
position: absolute;
|
||||
background: linear-gradient(135deg, rgba(0, 255, 136, 0.9), rgba(0, 204, 102, 0.8));
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
z-index: 10001;
|
||||
animation: clickFeedbackShow 0.6s ease-out;
|
||||
box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4);
|
||||
border: 1px solid rgba(0, 255, 136, 0.6);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.province-click-feedback {
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 触摸设备优化 */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.province-click-feedback {
|
||||
font-size: 13px;
|
||||
padding: 8px 14px;
|
||||
animation-duration: 0.8s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clickFeedbackShow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5) translateY(20px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1) translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1) translateY(-30px);
|
||||
}
|
||||
}
|
||||
.cattle-source-top5 {
|
||||
position: absolute;
|
||||
bottom:80px; /* 定位到底部 */
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<script>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import { LineChart, PieChart, BarChart } from 'echarts/charts'
|
||||
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
|
||||
import VChart from 'vue-echarts'
|
||||
|
||||
use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent])
|
||||
use([CanvasRenderer, LineChart, PieChart, BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent])
|
||||
|
||||
export default {
|
||||
name: 'Price',
|
||||
@@ -43,7 +43,7 @@ export default {
|
||||
CQ: ['本地黄牛', '西门塔尔牛']
|
||||
}
|
||||
|
||||
const unit = ref('元/个')
|
||||
const unit = ref('元/斤')
|
||||
const days = ref([])
|
||||
const priceSeries = ref([])
|
||||
// 省内各地区牛数据列表
|
||||
@@ -98,6 +98,83 @@ export default {
|
||||
}]
|
||||
}))
|
||||
|
||||
// 品种占比统计（环形图）
|
||||
const breedPieOption = computed(() => {
|
||||
// 按左侧列表统计各品种出现次数作为占比；无数据时按照品种列表均匀分配
|
||||
const counts = new Map()
|
||||
if (regionRows.value.length) {
|
||||
regionRows.value.forEach(r => {
|
||||
const k = r.breed || '未知品种'
|
||||
counts.set(k, (counts.get(k) || 0) + 1)
|
||||
})
|
||||
} else {
|
||||
// 示例分布：根据索引给出不同权重
|
||||
breeds.value.forEach((b, i) => {
|
||||
counts.set(b, 10 + (i * 5))
|
||||
})
|
||||
}
|
||||
const data = Array.from(counts.entries()).map(([name, value]) => ({ name, value }))
|
||||
// 与大屏主体色一致的配色（青蓝系）
|
||||
const brandColors = ['#00d4ff', '#29e3ff', '#00b3f9', '#3bd1ff', '#0099ff', '#61eaff']
|
||||
return {
|
||||
color: brandColors,
|
||||
title: { text: '品种占比统计', left: 'center', top: 6, textStyle: { color: '#eaf7ff', fontSize: 14 } },
|
||||
legend: { right: 20, top: 'middle', orient: 'vertical', textStyle: { color: '#cfefff' }, itemWidth: 12, itemHeight: 12 },
|
||||
tooltip: { trigger: 'item' },
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['48%', '70%'],
|
||||
center: ['50%', '55%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: { show: false },
|
||||
emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold', formatter: '{b}: {d}%' } },
|
||||
itemStyle: {
|
||||
borderColor: '#011819',
|
||||
borderWidth: 6,
|
||||
borderRadius: 8
|
||||
},
|
||||
data
|
||||
}]
|
||||
}
|
||||
})
|
||||
|
||||
// 优先通过接口生成省内地区牛数据列表，失败则回退示例数据
|
||||
const fetchProvinceRegionRows = async () => {
|
||||
const url = '/api/cattle-data'
|
||||
try {
|
||||
const res = await fetch(url)
|
||||
const raw = await res.json()
|
||||
const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])
|
||||
const today = new Date()
|
||||
const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
||||
|
||||
// 仅保留当前省份的数据
|
||||
const filtered = list.filter(item => {
|
||||
const p = item.province ?? item.provinceName ?? ''
|
||||
return p === provinceName.value
|
||||
})
|
||||
|
||||
const rows = filtered.map((item, idx) => ({
|
||||
id: item.id ?? `${props.selectedProvince}-${idx}`,
|
||||
date: fmt(today),
|
||||
region: item.location ?? '',
|
||||
breed: item.type ?? item.breed ?? '',
|
||||
price: Number(item.price),
|
||||
delta: 0,
|
||||
up: false
|
||||
})).filter(r => r.region && r.breed && Number.isFinite(r.price))
|
||||
|
||||
if (rows.length > 0) {
|
||||
regionRows.value = rows
|
||||
return true
|
||||
}
|
||||
return false
|
||||
} catch (e) {
|
||||
console.warn('[Price] 获取省内地区牛数据失败：', e)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 生成省内地区牛数据列表（示例，固定为10行）
|
||||
const genRegionRows = () => {
|
||||
const today = new Date()
|
||||
@@ -154,6 +231,119 @@ export default {
|
||||
genData(row?.id)
|
||||
}
|
||||
|
||||
// 年度统计数据（示例）
|
||||
const statsYears = ref([ 2023, 2024,2025])
|
||||
const stockYears = ref([2023, 2024, 2025])
|
||||
const stockCounts = ref([]) // 存栏数量（万头）
|
||||
const slaughterCounts = ref([]) // 出栏数量（万头）
|
||||
|
||||
let stockAbortController = null
|
||||
|
||||
// provinces 接口参数映射：与 Home.vue 保持一致，以避免名称差异导致无数据
|
||||
const toApiProvinceParam = (name) => {
|
||||
const map = {
|
||||
'内蒙古自治区': '内蒙古',
|
||||
'四川省': '四川',
|
||||
'新疆维吾尔自治区': '新疆',
|
||||
'西藏自治区': '西藏',
|
||||
'宁夏回族自治区': '宁夏',
|
||||
'广西壮族自治区': '广西',
|
||||
'河北省': '河北',
|
||||
'山东省': '山东',
|
||||
'黑龙江省': '黑龙江',
|
||||
'吉林省': '吉林',
|
||||
'云南省': '云南',
|
||||
'甘肃省': '甘肃',
|
||||
'青海省': '青海',
|
||||
'贵州省': '贵州',
|
||||
'安徽省': '安徽',
|
||||
}
|
||||
return map[name] ?? name
|
||||
}
|
||||
|
||||
const fetchStockData = async () => {
|
||||
// 取消上一次未完成的请求
|
||||
if (stockAbortController) {
|
||||
stockAbortController.abort()
|
||||
}
|
||||
stockAbortController = new AbortController()
|
||||
|
||||
try {
|
||||
if (!provinceName.value) return
|
||||
const apiParam = toApiProvinceParam(provinceName.value)
|
||||
const url = `/api/cattle-data/provinces?province=${encodeURIComponent(apiParam)}`
|
||||
const res = await fetch(url, { signal: stockAbortController.signal })
|
||||
const raw = await res.json()
|
||||
|
||||
let data = raw
|
||||
if (raw.code === 200 && raw.data) {
|
||||
data = raw.data
|
||||
}
|
||||
|
||||
let target = data
|
||||
if (Array.isArray(data)) {
|
||||
target = data.find(d => d.province === provinceName.value || d.provinceName === provinceName.value)
|
||||
if (!target && data.length > 0) target = data[0]
|
||||
}
|
||||
|
||||
if (target) {
|
||||
stockCounts.value = [
|
||||
Number(target.inventory23th) || 0,
|
||||
Number(target.inventory24th) || 0,
|
||||
Number(target.inventory25th) || 0
|
||||
]
|
||||
// 同步设置出栏统计（与存栏相同来源）
|
||||
slaughterCounts.value = [
|
||||
Number(target.slaughter23th) || 0,
|
||||
Number(target.slaughter24th) || 0,
|
||||
Number(target.slaughter25th) || 0
|
||||
]
|
||||
} else {
|
||||
stockCounts.value = [0, 0, 0]
|
||||
slaughterCounts.value = [0, 0, 0]
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.name === 'AbortError') return
|
||||
console.error('获取存栏数据失败', e)
|
||||
stockCounts.value = [0, 0, 0]
|
||||
slaughterCounts.value = [0, 0, 0]
|
||||
} finally {
|
||||
stockAbortController = null
|
||||
}
|
||||
}
|
||||
|
||||
const genStats = () => {
|
||||
// 统一使用接口返回值，不再生成示例数据
|
||||
fetchStockData()
|
||||
}
|
||||
|
||||
const stockBarOption = computed(() => ({
|
||||
title: { text: '存栏统计', left: 'center', textStyle: { color: '#eaf7ff' } },
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 20, top: 50, bottom: 40 },
|
||||
xAxis: { type: 'category', data: stockYears.value, axisLabel: { color: '#cfefff' }, axisLine: { lineStyle: { color: '#2e6ba8' } } },
|
||||
yAxis: { type: 'value', axisLabel: { color: '#cfefff' }, splitLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } } },
|
||||
series: [{
|
||||
name: '存栏', type: 'bar', data: stockCounts.value,
|
||||
itemStyle: { color: '#00d4ff' },
|
||||
barWidth: '40%'
|
||||
}]
|
||||
}))
|
||||
|
||||
const slaughterLineOption = computed(() => ({
|
||||
title: { text: '出栏统计', left: 'center', textStyle: { color: '#eaf7ff' } },
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 20, top: 50, bottom: 40 },
|
||||
xAxis: { type: 'category', data: statsYears.value, axisLabel: { color: '#cfefff' }, axisLine: { lineStyle: { color: '#2e6ba8' } } },
|
||||
yAxis: { type: 'value', axisLabel: { color: '#cfefff' }, splitLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } } },
|
||||
series: [{
|
||||
name: '出栏', type: 'line', smooth: true, data: slaughterCounts.value,
|
||||
lineStyle: { color: '#29e3ff', width: 2 },
|
||||
itemStyle: { color: '#61eaff' },
|
||||
areaStyle: { color: 'rgba(0,212,255,0.12)' }
|
||||
}]
|
||||
}))
|
||||
|
||||
const yesterdayDelta = computed(() => {
|
||||
if (!priceSeries.value.length || priceSeries.value.length < 2) return 0
|
||||
const n = priceSeries.value.length
|
||||
@@ -170,12 +360,17 @@ export default {
|
||||
return d > 0 ? '↑' : '↓'
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
genRegionRows()
|
||||
// 统一在选中省份变化时加载数据，并在初始化时立即执行一次
|
||||
watch(() => props.selectedProvince, async (newVal, oldVal) => {
|
||||
if (newVal === oldVal) return
|
||||
selectedRow.value = null
|
||||
const ok = await fetchProvinceRegionRows()
|
||||
if (!ok) genRegionRows()
|
||||
genData()
|
||||
})
|
||||
genStats()
|
||||
}, { immediate: true })
|
||||
|
||||
return { unit, provinceName, breeds, todayPrice, max7d, min7d, avg7d, avgToday, days, priceSeries, chartOption, regionRows, selectedRow, handleRowClick, isUnknownRegion, range, weight, setRange, setWeight, yesterdayDelta, trendText, trendSymbol }
|
||||
return { unit, provinceName, breeds, todayPrice, max7d, min7d, avg7d, avgToday, days, priceSeries, chartOption, breedPieOption, stockBarOption, slaughterLineOption, regionRows, selectedRow, handleRowClick, isUnknownRegion, range, weight, setRange, setWeight, yesterdayDelta, trendText, trendSymbol }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -188,79 +383,94 @@ export default {
|
||||
</div>
|
||||
|
||||
<div class="price-content">
|
||||
<section class="left-info">
|
||||
<div class="card region-card">
|
||||
<div class="panel-header">
|
||||
<div class="diamond-icon"></div>
|
||||
<h3>省内各地区牛数据列表</h3>
|
||||
<!-- 第一行：左侧牛数据列表 + 右侧价格详情（等高） -->
|
||||
<div class="card region-card">
|
||||
<div class="panel-header">
|
||||
<div class="diamond-icon"></div>
|
||||
<h3>省内各地区牛数据列表</h3>
|
||||
</div>
|
||||
<div class="region-table">
|
||||
<div class="table-header">
|
||||
<div class="th">时间</div>
|
||||
<div class="th">地区</div>
|
||||
<div class="th">品类</div>
|
||||
<div class="th">价格（{{ unit }}）</div>
|
||||
</div>
|
||||
<div class="region-table">
|
||||
<div class="table-header">
|
||||
<div class="th">时间</div>
|
||||
<div class="th">地区</div>
|
||||
<div class="th">品类</div>
|
||||
<div class="th">价格（{{ unit }}）</div>
|
||||
<div class="th">涨跌</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-row" v-for="row in regionRows" :key="row.id" @click="handleRowClick(row)" :class="{ active: selectedRow && selectedRow.id === row.id }">
|
||||
<div class="td">{{ row.date }}</div>
|
||||
<div class="td">{{ row.region }}</div>
|
||||
<div class="td">{{ row.breed }}</div>
|
||||
<div class="td">{{ row.price.toFixed(2) }}{{ unit }}</div>
|
||||
<div class="td">
|
||||
<span :class="row.delta === 0 ? 'change-zero' : (row.up ? 'change-up' : 'change-down')">
|
||||
{{ row.delta.toFixed(2) }}{{ unit }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-row" v-for="row in regionRows" :key="row.id" @click="handleRowClick(row)" :class="{ active: selectedRow && selectedRow.id === row.id }">
|
||||
<div class="td">{{ row.date }}</div>
|
||||
<div class="td">{{ row.region }}</div>
|
||||
<div class="td">{{ row.breed }}</div>
|
||||
<div class="td">{{ row.price.toFixed(2) }}{{ unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="right-stats">
|
||||
<div class="card detail-card">
|
||||
<div class="panel-header">
|
||||
<div class="diamond-icon"></div>
|
||||
<h3>
|
||||
<span :class="{ highlight: isUnknownRegion(selectedRow ? selectedRow.region : provinceName) }">
|
||||
{{ (selectedRow ? selectedRow.region : provinceName) }}
|
||||
</span>
|
||||
价格详情
|
||||
</h3>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<div class="today-price-line">
|
||||
<div class="labels">
|
||||
<span class="label">今日批发均价</span>
|
||||
<span class="compare">相比昨日 <span :class="yesterdayDelta === 0 ? 'change-zero' : (yesterdayDelta > 0 ? 'change-up' : 'change-down')">{{ trendText }} {{ yesterdayDelta.toFixed(2) }}</span> <span class="symbol">{{ trendSymbol }}</span></span>
|
||||
</div>
|
||||
<div class="price-display">
|
||||
<span class="currency">¥</span>
|
||||
<span class="value">{{ avgToday.toFixed(2) }}</span>
|
||||
<span class="unit">{{ unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<div class="weight-group">
|
||||
<button :class="['filter-btn', { active: weight === 'normal' }]" @click="setWeight('normal')">通货</button>
|
||||
<button :class="['filter-btn', { active: weight === '400' }]" @click="setWeight('400')">400斤</button>
|
||||
<button :class="['filter-btn', { active: weight === '500' }]" @click="setWeight('500')">500斤</button>
|
||||
</div>
|
||||
<div class="range-group">
|
||||
<button :class="['filter-btn', { active: range === 7 }]" @click="setRange(7)">近7天</button>
|
||||
<button :class="['filter-btn', { active: range === 30 }]" @click="setRange(30)">近30天</button>
|
||||
<button :class="['filter-btn', { active: range === 60 }]" @click="setRange(60)">近60天</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-chart class="trend-chart" :option="chartOption" autoresize />
|
||||
</div>
|
||||
<div class="card detail-card">
|
||||
<div class="panel-header">
|
||||
<div class="diamond-icon"></div>
|
||||
<h3>
|
||||
<span :class="{ highlight: isUnknownRegion(selectedRow ? selectedRow.region : provinceName) }">
|
||||
{{ (selectedRow ? selectedRow.region : provinceName) }}
|
||||
</span>
|
||||
价格详情
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
<div class="detail-content">
|
||||
<div class="today-price-line">
|
||||
<div class="labels">
|
||||
<span class="label">今日批发均价</span>
|
||||
<span class="compare">相比昨日 <span :class="yesterdayDelta === 0 ? 'change-zero' : (yesterdayDelta > 0 ? 'change-up' : 'change-down')">{{ trendText }} {{ yesterdayDelta.toFixed(2) }}</span> <span class="symbol">{{ trendSymbol }}</span></span>
|
||||
</div>
|
||||
<div class="price-display">
|
||||
<span class="currency">¥</span>
|
||||
<span class="value">{{ avgToday.toFixed(2) }}</span>
|
||||
<span class="unit">{{ unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<div class="weight-group">
|
||||
<button :class="['filter-btn', { active: weight === 'normal' }]" @click="setWeight('normal')">通货</button>
|
||||
<button :class="['filter-btn', { active: weight === '400' }]" @click="setWeight('400')">400斤</button>
|
||||
<button :class="['filter-btn', { active: weight === '500' }]" @click="setWeight('500')">500斤</button>
|
||||
</div>
|
||||
<div class="range-group">
|
||||
<button :class="['filter-btn', { active: range === 7 }]" @click="setRange(7)">近7天</button>
|
||||
<button :class="['filter-btn', { active: range === 30 }]" @click="setRange(30)">近30天</button>
|
||||
<button :class="['filter-btn', { active: range === 60 }]" @click="setRange(60)">近60天</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-chart class="trend-chart" :option="chartOption" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：左侧品种占比 + 中间存栏 + 右侧出栏（三列等宽） -->
|
||||
<div class="card breed-card">
|
||||
<div class="panel-header">
|
||||
<div class="diamond-icon"></div>
|
||||
<h3>品种占比统计</h3>
|
||||
</div>
|
||||
<v-chart class="breed-donut" :option="breedPieOption" autoresize />
|
||||
</div>
|
||||
|
||||
<div class="card stock-card">
|
||||
<div class="panel-header">
|
||||
<div class="diamond-icon"></div>
|
||||
<h3>存栏统计</h3>
|
||||
</div>
|
||||
<v-chart class="stock-chart" :option="stockBarOption" autoresize />
|
||||
</div>
|
||||
|
||||
<div class="card slaughter-card">
|
||||
<div class="panel-header">
|
||||
<div class="diamond-icon"></div>
|
||||
<h3>出栏统计</h3>
|
||||
</div>
|
||||
<v-chart class="slaughter-chart" :option="slaughterLineOption" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -276,6 +486,7 @@ export default {
|
||||
gap: 16px;
|
||||
background: #011819; /* 与预警监测页背景一致 */
|
||||
position: relative;
|
||||
overflow: hidden; /* 页面高度固定，禁用整体滚动 */
|
||||
}
|
||||
|
||||
.price-page::before {
|
||||
@@ -312,8 +523,11 @@ export default {
|
||||
|
||||
.price-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1.6fr; /* 加宽左侧列表区域 */
|
||||
grid-template-columns: repeat(6, 1fr); /* 6列，方便分配 3:3 和 2:2:2 */
|
||||
grid-template-rows: 1fr 1fr; /* 两行等高 */
|
||||
gap: 16px;
|
||||
flex: 1; /* 占满剩余高度 */
|
||||
min-height: 0; /* 允许内部滚动 */
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -324,8 +538,18 @@ export default {
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%; /* 与所在网格行高度一致 */
|
||||
display: flex;
|
||||
flex-direction: column; /* 让内部内容自适应高度 */
|
||||
}
|
||||
|
||||
/* 网格跨度设置 */
|
||||
.region-card { grid-column: span 3; }
|
||||
.detail-card { grid-column: span 3; }
|
||||
.breed-card { grid-column: span 2; }
|
||||
.stock-card { grid-column: span 2; }
|
||||
.slaughter-card { grid-column: span 2; }
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -396,23 +620,48 @@ export default {
|
||||
color: #cfefff;
|
||||
}
|
||||
|
||||
.right-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
/* 移除旧的 .right-stats, .left-info, .stats-bottom 相关样式 */
|
||||
|
||||
.detail-card {
|
||||
.breed-card {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(0,212,255,0.25);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.breed-donut {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(0,212,255,0.25);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px; /* 缩小内边距，降低模块总高度 */
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 8px; /* 收紧纵向间距 */
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.stock-card, .slaughter-card {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(0,212,255,0.25);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.stock-chart, .slaughter-chart {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.today-price-line {
|
||||
@@ -452,7 +701,7 @@ export default {
|
||||
|
||||
.table-header, .table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.6fr 1.2fr 1fr 1fr; /* 时间略窄，地区更宽，价格与涨跌等宽 */
|
||||
grid-template-columns: 1fr 1.6fr 1.2fr 1fr; /* 移除涨跌列后调整为四列 */
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -469,6 +718,37 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 缩小左侧“省内各地区牛数据列表”模块高度 - 移除固定高度 */
|
||||
.region-card .region-table {
|
||||
height: auto;
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
min-height: 0; /* 允许压缩 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.region-card .region-table .table-body {
|
||||
height: auto;
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
overflow-y: auto; /* 允许滚动 */
|
||||
min-height: 0; /* 允许压缩 */
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.region-card .region-table .table-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.region-card .region-table .table-body::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.region-card .region-table .table-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 212, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.region-card .region-table .table-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
.table-row {
|
||||
padding: 18px 0; /* 增加上下内边距，提高行高 */
|
||||
min-height: 60px; /* 提高最小高度，列表更舒展 */
|
||||
@@ -535,18 +815,30 @@ export default {
|
||||
.stat-item .value { color: #eaffff; font-size: 22px; font-weight: bold; }
|
||||
.stat-item .unit { color: #9ed7ff; font-size: 12px; }
|
||||
|
||||
.trend-chart { width: 100%; height: 320px; }
|
||||
.trend-chart {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1366px) {
|
||||
.trend-chart { height: 280px; }
|
||||
.table-header, .table-row { grid-template-columns: 0.9fr 1.3fr 1fr 0.9fr 0.9fr; }
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
/* 小屏幕下可能需要调整 */
|
||||
.trend-chart { height: auto; }
|
||||
.breed-donut { height: auto; }
|
||||
/* 保持6列布局，但可能需要调整字体或间距 */
|
||||
/* 如果太挤，可以改为第一行 3+3，第二行 2+2+2 仍然适用，或者改为 2列布局 */
|
||||
/* 这里暂时保持用户要求的布局 */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.price-content { grid-template-columns: 1fr; }
|
||||
.table-header, .table-row { grid-template-columns: 1fr 1.2fr 1fr 0.9fr 0.9fr; }
|
||||
.breed-donut { height: 220px; }
|
||||
.trend-chart { height: 180px; }
|
||||
.stats-bottom { grid-template-columns: 1fr; }
|
||||
.table-header, .table-row { grid-template-columns: 1fr 1.2fr 1fr 0.9fr; }
|
||||
.stats-grid { grid-template-columns: 1fr; }
|
||||
.th, .td { font-size: 13px; }
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './assets/global.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
@@ -25,3 +25,4 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user