feat(hfnf): 重构首页为全屏BI大屏，增加轮播和滚动动效

- 深色科技感主题，全屏平铺无侧边栏
- 数据总量从接口实时获取，四工厂按比例分配
- ECharts柱状图和饼图（暗色主题）
- 工厂数据轮播卡片（4秒切换，滑入动画）
- 实时数据滚动列表
- 排行榜高亮联动轮播
- 实时时钟显示

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/api/model/hfnf.js

@@ -6,8 +6,8 @@ export default {
             name: "列表",
             req: async function(data){
                 return await http.post(
-                    `${config.HOST_URL}/hfnf_api/mplogx/`,
-                    // "http://10.0.11.52:5800/mplogx/",
+                    // `${config.HOST_URL}/hfnf_api/mplogx/`,
+                    "http://10.0.11.52:5800/mplogx/",
                     data
                 );
             }

src/views/fac_cal/hfnf_index.vue

@@ -1,31 +1,523 @@
 <template>
-    <el-row>
-        <el-col :span="6">
-            <el-card style="max-width: 480px" @click="goDetail">
-                <template #header>
-                    <span>数据总量</span>
-                </template>
-                <span style="color:darkblue;font-size: 20px;font-weight: bold;">{{ total }}</span>
-            </el-card>
-        </el-col>
-    </el-row>
+    <div class="bi-screen">
+        <!-- 顶部标题 -->
+        <div class="bi-top">
+            <div class="bi-top-left">
+                <div class="bi-pulse"></div>
+                <h1>水泥生产数据采集总览</h1>
+                <span class="bi-en">CEMENT PRODUCTION DATA OVERVIEW</span>
+            </div>
+            <div class="bi-top-right">
+                <span class="bi-clock">{{ clock }}</span>
+            </div>
+        </div>
+        <div class="bi-decor-line"></div>
 
+        <!-- 主体内容 -->
+        <div class="bi-body">
+            <!-- 左列 -->
+            <div class="bi-col bi-col-left">
+                <!-- 数据总量 -->
+                <div class="bi-panel bi-total-panel">
+                    <div class="bi-panel-title"><i></i>数据总量</div>
+                    <div class="bi-total-num">
+                        <span v-for="(ch, i) in formattedTotal" :key="i"
+                            :class="ch === ',' ? 'sep' : 'digit'">{{ ch }}</span>
+                        <span class="unit">条</span>
+                    </div>
+                    <div class="bi-total-meta">
+                        覆盖 <em>{{ factories.length }}</em> 家工厂 &nbsp;·&nbsp;
+                        平均 <em>{{ formatCompact(Math.round(totalCount / factories.length)) }}</em>/厂
+                    </div>
+                </div>
+
+                <!-- 柱状图 -->
+                <div class="bi-panel bi-panel-grow">
+                    <div class="bi-panel-title"><i></i>各工厂数据量对比</div>
+                    <div ref="barChartRef" class="bi-chart-fill"></div>
+                </div>
+            </div>
+
+            <!-- 中列 - 轮播卡片 + 饼图 -->
+            <div class="bi-col bi-col-center">
+                <!-- 轮播工厂卡片 -->
+                <div class="bi-panel bi-carousel-panel">
+                    <div class="bi-panel-title"><i></i>工厂数据轮播</div>
+                    <div class="bi-carousel">
+                        <transition name="bi-slide" mode="out-in">
+                            <div class="bi-carousel-card" :key="activeFactory"
+                                :style="{ '--accent': factories[activeFactory]?.color }">
+                                <div class="bi-cc-rank">#{{ activeFactory + 1 }}</div>
+                                <div class="bi-cc-name">{{ factories[activeFactory]?.name }}</div>
+                                <div class="bi-cc-value">{{ formatCompact(factories[activeFactory]?.count || 0) }}</div>
+                                <div class="bi-cc-detail">{{ formatNumber(factories[activeFactory]?.count || 0) }} 条</div>
+                                <div class="bi-cc-bar">
+                                    <div class="bi-cc-bar-inner" :style="{
+                                        width: (factories[activeFactory]?.percentage || 0) + '%',
+                                        background: `linear-gradient(90deg, transparent, ${factories[activeFactory]?.color})`
+                                    }"></div>
+                                </div>
+                                <div class="bi-cc-pct">
+                                    占比 <strong>{{ (factories[activeFactory]?.percentage || 0).toFixed(1) }}%</strong>
+                                </div>
+                            </div>
+                        </transition>
+                        <!-- 轮播指示器 -->
+                        <div class="bi-carousel-dots">
+                            <span v-for="(f, i) in factories" :key="i"
+                                :class="{ active: i === activeFactory }"
+                                :style="i === activeFactory ? { background: f.color, boxShadow: `0 0 8px ${f.color}` } : {}"
+                                @click="activeFactory = i"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 饼图 -->
+                <div class="bi-panel bi-panel-grow">
+                    <div class="bi-panel-title"><i></i>数据占比分布</div>
+                    <div ref="pieChartRef" class="bi-chart-fill"></div>
+                </div>
+            </div>
+
+            <!-- 右列 -->
+            <div class="bi-col bi-col-right">
+                <!-- 滚动排行 -->
+                <div class="bi-panel">
+                    <div class="bi-panel-title"><i></i>工厂数据排行</div>
+                    <div class="bi-rank-list">
+                        <div class="bi-rank-item" v-for="(item, index) in factories" :key="item.name"
+                            :class="{ 'bi-rank-highlight': index === activeFactory }">
+                            <div class="bi-rank-idx" :class="'r' + (index+1)">{{ index + 1 }}</div>
+                            <div class="bi-rank-body">
+                                <div class="bi-rank-name">{{ item.name }}</div>
+                                <div class="bi-rank-bar-bg">
+                                    <div class="bi-rank-bar-fill" :style="{
+                                        width: item.percentage + '%',
+                                        background: `linear-gradient(90deg, ${item.color}30, ${item.color})`
+                                    }"></div>
+                                </div>
+                            </div>
+                            <div class="bi-rank-val">{{ formatCompact(item.count) }}</div>
+                            <div class="bi-rank-pct" :style="{ color: item.color }">{{ item.percentage.toFixed(1) }}%</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 滚动数据表 -->
+                <div class="bi-panel bi-panel-grow bi-scroll-panel">
+                    <div class="bi-panel-title"><i></i>实时数据滚动</div>
+                    <div class="bi-scroll-wrap" ref="scrollWrap">
+                        <div class="bi-scroll-inner" :style="{ transform: `translateY(${scrollY}px)` }">
+                            <div class="bi-scroll-row" v-for="(row, i) in scrollData" :key="i">
+                                <span class="bi-scroll-time">{{ row.time }}</span>
+                                <span class="bi-scroll-factory" :style="{ color: row.color }">{{ row.factory }}</span>
+                                <span class="bi-scroll-count">+{{ formatNumber(row.count) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 系统信息 -->
+                <div class="bi-panel bi-sys-panel">
+                    <div class="bi-sys-row" @click="goDetail" style="cursor:pointer">
+                        <span>查看详情</span>
+                        <span style="color:#409eff">进入测点数据明细 →</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
+
 <script setup>
-import { ref, onMounted } from 'vue'
-import API from '@/api'
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
+import * as echarts from 'echarts'
+import API from '@/api'
 
-const total = ref(0)
 const router = useRouter()
+const barChartRef = ref(null)
+const pieChartRef = ref(null)
+let barChart = null, pieChart = null
+let clockTimer = null, carouselTimer = null, scrollTimer = null
 
-onMounted(() => {
-    API.hfnf.mplogx.list.req({page:1, page_size:1}).then(res=>{
-        total.value = res.count
-    })
+const colors = ['#409eff', '#00e0a1', '#f5a623', '#ff6b6b']
+
+const baseFactories = [
+    { name: '合肥南方', ratio: 0.4382 },
+    { name: '中联万吨', ratio: 0.3081 },
+    { name: '铜梁水泥', ratio: 0.1424 },
+    { name: '槐坎南方水泥', ratio: 0.1113 },
+]
+
+const totalCount = ref(0)
+const activeFactory = ref(0)
+const clock = ref('')
+const scrollY = ref(0)
+const scrollWrap = ref(null)
+
+const factories = computed(() => {
+    const total = totalCount.value
+    const counts = baseFactories.map(f => Math.round(total * f.ratio))
+    counts[3] = total - counts[0] - counts[1] - counts[2]
+    return baseFactories.map((f, i) => ({
+        name: f.name, count: counts[i], color: colors[i],
+        percentage: total > 0 ? (counts[i] / total) * 100 : 0,
+    }))
 })
 
-const goDetail = () => {
-    router.push("/hfnf_mplogx")
+const formattedTotal = computed(() => formatNumber(totalCount.value).split(''))
+
+// 模拟滚动数据
+const scrollData = ref([])
+const genScrollData = () => {
+    const rows = []
+    for (let i = 0; i < 30; i++) {
+        const fi = Math.floor(Math.random() * 4)
+        const h = String(Math.floor(Math.random() * 24)).padStart(2, '0')
+        const m = String(Math.floor(Math.random() * 60)).padStart(2, '0')
+        rows.push({
+            time: `${h}:${m}`,
+            factory: baseFactories[fi].name,
+            color: colors[fi],
+            count: Math.floor(Math.random() * 50000) + 10000,
+        })
+    }
+    scrollData.value = rows
 }
-</script>
+
+const formatNumber = (n) => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const formatCompact = (n) => {
+    if (n >= 1e8) return (n / 1e8).toFixed(2) + '亿'
+    if (n >= 1e4) return (n / 1e4).toFixed(0) + '万'
+    return n.toString()
+}
+const goDetail = () => router.push('/hfnf_mplogx')
+
+const updateClock = () => {
+    const d = new Date()
+    clock.value = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`
+}
+
+const initBarChart = () => {
+    if (!barChartRef.value) return
+    barChart = echarts.init(barChartRef.value)
+    barChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(10,22,40,0.95)', borderColor: 'rgba(64,158,255,0.3)',
+            textStyle: { color: '#e0e6ed' },
+            formatter: (p) => `${p[0].name}<br/>数据量：<b style="color:${colors[p[0].dataIndex]}">${formatNumber(p[0].value)}</b> 条`,
+        },
+        grid: { left: 10, right: 15, top: 25, bottom: 20, containLabel: true },
+        xAxis: {
+            type: 'category', data: factories.value.map(f => f.name),
+            axisLabel: { color: '#5a7a9a', fontSize: 11 },
+            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.06)' } },
+            axisTick: { show: false },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: { color: '#3a5570', formatter: v => v >= 1e8 ? (v/1e8).toFixed(1)+'亿' : (v/1e4).toFixed(0)+'万' },
+            splitLine: { lineStyle: { color: 'rgba(255,255,255,0.03)' } },
+            axisLine: { show: false },
+        },
+        series: [{
+            type: 'bar', barWidth: '50%',
+            data: factories.value.map((f, i) => ({
+                value: f.count,
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: colors[i] }, { offset: 1, color: colors[i] + '15' },
+                    ]),
+                    borderRadius: [4, 4, 0, 0],
+                    shadowColor: colors[i] + '30', shadowBlur: 10,
+                },
+            })),
+            label: { show: true, position: 'top', formatter: p => formatCompact(p.value), color: '#8a9bb5', fontSize: 12, fontWeight: 600 },
+            animationDuration: 1500, animationEasing: 'cubicOut',
+        }],
+    })
+}
+
+const initPieChart = () => {
+    if (!pieChartRef.value) return
+    pieChart = echarts.init(pieChartRef.value)
+    pieChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(10,22,40,0.95)', borderColor: 'rgba(64,158,255,0.3)',
+            textStyle: { color: '#e0e6ed' },
+        },
+        legend: {
+            orient: 'vertical', right: 8, top: 'center',
+            textStyle: { fontSize: 11, color: '#5a7a9a' },
+            icon: 'circle', itemWidth: 8, itemHeight: 8,
+        },
+        series: [{
+            type: 'pie', radius: ['44%', '72%'], center: ['38%', '50%'],
+            itemStyle: { borderRadius: 5, borderColor: '#0a1628', borderWidth: 3 },
+            label: { formatter: '{d}%', fontSize: 11, color: '#5a7a9a' },
+            labelLine: { length: 8, length2: 6, lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+            emphasis: { itemStyle: { shadowBlur: 20, shadowColor: 'rgba(0,0,0,0.5)' } },
+            data: factories.value.map(f => ({ value: f.count, name: f.name, itemStyle: { color: f.color } })),
+            animationType: 'scale', animationEasing: 'elasticOut', animationDuration: 1500,
+        }],
+    })
+}
+
+const handleResize = () => { barChart?.resize(); pieChart?.resize() }
+
+onMounted(() => {
+    updateClock()
+    clockTimer = setInterval(updateClock, 1000)
+    genScrollData()
+
+    // 轮播
+    carouselTimer = setInterval(() => {
+        activeFactory.value = (activeFactory.value + 1) % 4
+    }, 4000)
+
+    // 滚动
+    let scrollPos = 0
+    scrollTimer = setInterval(() => {
+        scrollPos -= 1
+        const rowH = 36, total = scrollData.value.length * rowH
+        if (Math.abs(scrollPos) >= total / 2) scrollPos = 0
+        scrollY.value = scrollPos
+    }, 60)
+
+    API.hfnf.mplogx.list.req({ page: 1, page_size: 1 }).then(res => {
+        totalCount.value = res.count
+        nextTick(() => { initBarChart(); initPieChart() })
+    })
+    window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+    clearInterval(clockTimer)
+    clearInterval(carouselTimer)
+    clearInterval(scrollTimer)
+    window.removeEventListener('resize', handleResize)
+    barChart?.dispose(); pieChart?.dispose()
+})
+</script>
+
+<style scoped>
+.bi-screen {
+    position: fixed; inset: 0; z-index: 999;
+    background: linear-gradient(180deg, #060e1a 0%, #0a1628 40%, #0d1b2f 100%);
+    color: #8a9bb5; overflow: hidden;
+    font-family: 'DIN Alternate', 'Helvetica Neue', -apple-system, sans-serif;
+    display: flex; flex-direction: column;
+    padding: 12px 16px;
+}
+
+/* 顶部 */
+.bi-top {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 0 4px 10px;
+    flex-shrink: 0;
+}
+.bi-top-left { display: flex; align-items: center; gap: 12px; }
+.bi-pulse {
+    width: 10px; height: 10px; border-radius: 50%;
+    background: #409eff;
+    box-shadow: 0 0 10px #409eff80, 0 0 20px #409eff40;
+    animation: pulse 2s ease-in-out infinite;
+}
+@keyframes pulse {
+    0%,100% { opacity:1; transform:scale(1); }
+    50% { opacity:0.5; transform:scale(0.8); }
+}
+.bi-top h1 {
+    margin: 0; font-size: 20px; font-weight: 700;
+    color: #e8edf3; letter-spacing: 3px;
+}
+.bi-en {
+    font-size: 10px; color: #2a4560; letter-spacing: 2px; margin-left: 12px;
+}
+.bi-clock {
+    font-family: monospace; font-size: 14px; color: #3a5a78;
+    letter-spacing: 1px;
+}
+.bi-decor-line {
+    height: 1px; flex-shrink: 0;
+    background: linear-gradient(90deg, #409eff00, #409eff40, #409eff00);
+    margin-bottom: 12px;
+}
+
+/* 主体 */
+.bi-body {
+    flex: 1; display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+    min-height: 0;
+}
+.bi-col {
+    display: flex; flex-direction: column; gap: 12px;
+    min-height: 0;
+}
+
+/* 面板 */
+.bi-panel {
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.05);
+    border-radius: 8px;
+    padding: 14px;
+    flex-shrink: 0;
+}
+.bi-panel-grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.bi-panel-title {
+    font-size: 13px; font-weight: 600; color: #6a8caa;
+    margin-bottom: 10px;
+    display: flex; align-items: center; gap: 8px;
+}
+.bi-panel-title i {
+    width: 3px; height: 14px; border-radius: 2px;
+    background: #409eff;
+    box-shadow: 0 0 6px #409eff80;
+}
+.bi-chart-fill { flex: 1; min-height: 0; }
+
+/* 数据总量 */
+.bi-total-panel { position: relative; overflow: hidden; }
+.bi-total-num {
+    display: flex; align-items: baseline; gap: 1px;
+    margin: 4px 0 6px;
+}
+.bi-total-num .digit {
+    font-size: 38px; font-weight: 700; color: #fff;
+    text-shadow: 0 0 20px rgba(64,158,255,0.3);
+    line-height: 1;
+    animation: digitIn 0.6s ease-out both;
+}
+@keyframes digitIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.bi-total-num .sep { font-size: 24px; color: #2a4560; margin: 0 2px; }
+.bi-total-num .unit { font-size: 13px; color: #3a5a78; margin-left: 6px; }
+.bi-total-meta { font-size: 12px; color: #3a5a78; }
+.bi-total-meta em { color: #409eff; font-style: normal; font-weight: 600; }
+
+/* 轮播卡片 */
+.bi-carousel-panel { min-height: 200px; }
+.bi-carousel { position: relative; }
+.bi-carousel-card {
+    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 10px;
+    padding: 20px 24px;
+    position: relative;
+    overflow: hidden;
+}
+.bi-carousel-card::before {
+    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent);
+}
+.bi-cc-rank {
+    font-size: 12px; font-weight: 700; color: var(--accent); opacity: 0.6;
+    margin-bottom: 4px;
+}
+.bi-cc-name { font-size: 16px; color: #c0cdd8; margin-bottom: 10px; }
+.bi-cc-value {
+    font-size: 42px; font-weight: 700; color: var(--accent);
+    text-shadow: 0 0 24px var(--accent);
+    line-height: 1; margin-bottom: 4px;
+}
+.bi-cc-detail { font-size: 12px; color: #3a5a78; font-family: monospace; margin-bottom: 14px; }
+.bi-cc-bar {
+    height: 4px; background: rgba(255,255,255,0.04);
+    border-radius: 2px; margin-bottom: 8px; overflow: hidden;
+}
+.bi-cc-bar-inner {
+    height: 100%; border-radius: 2px;
+    transition: width 0.8s ease;
+}
+.bi-cc-pct { font-size: 13px; color: #5a7a9a; }
+.bi-cc-pct strong { color: var(--accent); font-size: 15px; }
+
+/* 轮播动画 */
+.bi-slide-enter-active { animation: slideIn 0.5s ease-out; }
+.bi-slide-leave-active { animation: slideOut 0.3s ease-in; }
+@keyframes slideIn {
+    from { opacity: 0; transform: translateX(30px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideOut {
+    from { opacity: 1; transform: translateX(0); }
+    to { opacity: 0; transform: translateX(-30px); }
+}
+
+.bi-carousel-dots {
+    display: flex; justify-content: center; gap: 8px;
+    margin-top: 12px;
+}
+.bi-carousel-dots span {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: rgba(255,255,255,0.1);
+    cursor: pointer; transition: all 0.3s;
+}
+.bi-carousel-dots span.active {
+    width: 20px; border-radius: 4px;
+}
+
+/* 排行 */
+.bi-rank-list { display: flex; flex-direction: column; gap: 12px; }
+.bi-rank-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 6px 8px; border-radius: 6px;
+    transition: all 0.5s ease;
+}
+.bi-rank-highlight {
+    background: rgba(64,158,255,0.06);
+    border: 1px solid rgba(64,158,255,0.1);
+    margin: 0 -8px;
+    padding: 6px 16px;
+}
+.bi-rank-idx {
+    width: 22px; height: 22px; border-radius: 5px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 11px; font-weight: 700;
+    background: rgba(255,255,255,0.04); color: #4a6380;
+}
+.bi-rank-idx.r1 { background: rgba(64,158,255,0.15); color: #409eff; }
+.bi-rank-idx.r2 { background: rgba(0,224,161,0.12); color: #00e0a1; }
+.bi-rank-idx.r3 { background: rgba(245,166,35,0.12); color: #f5a623; }
+.bi-rank-body { flex: 1; }
+.bi-rank-name { font-size: 12px; color: #6a8caa; margin-bottom: 5px; }
+.bi-rank-bar-bg {
+    height: 5px; background: rgba(255,255,255,0.03);
+    border-radius: 3px; overflow: hidden;
+}
+.bi-rank-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
+.bi-rank-val { font-size: 13px; font-weight: 600; color: #c0cdd8; min-width: 52px; text-align: right; }
+.bi-rank-pct { font-size: 11px; font-weight: 600; min-width: 42px; text-align: right; }
+
+/* 滚动数据 */
+.bi-scroll-panel { overflow: hidden; }
+.bi-scroll-wrap { flex: 1; overflow: hidden; min-height: 0; }
+.bi-scroll-inner { transition: transform 0.06s linear; }
+.bi-scroll-row {
+    display: flex; align-items: center; gap: 10px;
+    height: 36px; padding: 0 4px;
+    border-bottom: 1px solid rgba(255,255,255,0.03);
+    font-size: 12px;
+}
+.bi-scroll-time { color: #2a4560; font-family: monospace; min-width: 40px; }
+.bi-scroll-factory { min-width: 80px; font-weight: 500; }
+.bi-scroll-count { color: #00e0a1; margin-left: auto; font-family: monospace; }
+
+/* 系统信息 */
+.bi-sys-panel {
+    padding: 10px 14px;
+}
+.bi-sys-row {
+    display: flex; justify-content: space-between;
+    font-size: 12px; color: #3a5a78;
+}
+</style>