新框架page1事件热度布局完成

Signed-off-by: changyunju <2743319061@qq.com>

src/views/KeyNodeRecognition1/EventHeatmap.vue

@@ -1,20 +1,202 @@
 <template>
-    <div class="event-hot">
+    <div class="panel-container event-hot">
-        <img src="../../assets/images/evenhot.png" alt="" style="margin-top: -6px;">
+        <!-- 1. 标题行 -->
+        <div class="header-title">
+            <img src="../../assets/images/evenhot.png" alt="" style="margin-top: -6px;">
+        </div>
+
+        <!-- 2. 控件行 -->
+        <div class="header-controls">
+            <div class="chart-tabs">
+                <button :class="{ active: activeChartTab === 'trend' }" @click="activeChartTab = 'trend'">时序热度图</button>
+                <button :class="{ active: activeChartTab === 'cumulative' }" @click="activeChartTab = 'cumulative'">累计热度图</button>
+            </div>
+            <button class="details-btn" @click="showDetails">查看详情</button>
+        </div>
+
+        <!-- 3. ECharts 容器 -->
+        <div ref="hotspotChart" class="chart-container"></div>
     </div>
 </template>
 
 <script setup>
-// 目前没有逻辑
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const emit = defineEmits(['showDetails']);
+
+// ===================================================================
+// 数据定义与处理
+// ===================================================================
+const activeChartTab = ref('trend');
+
+// --- 完整/详情用数据 (Granular/Details Data) ---
+const granularTrendData = [8959, 7460, 8334, 7902, 5753, 3070, 3481, 16878, 17819, 15296, 18883, 3734, 938, 101, 12];
+const granularXAxisLabels = ['7.31 00h', '7.31 06h', '7.31 12h', '7.31 18h', '8.1 00h', '8.1 06h', '8.1 12h', '8.1 18h', '8.2 00h', '8.2 06h', '8.2 12h', '8.2 18h', '8.3 00h', '8.3 06h', '8.3 12h'];
+const granularCumulativeData = granularTrendData.reduce((acc, val) => { acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val); return acc; }, []);
+
+// --- 面板用数据 (Panel Data - Daily Summary) ---
+const panelTrendData = [32655, 29182, 55732, 1051]; // Figma中的数据
+const panelXAxisLabels = ['2022.7.31', '2022.8.1', '2022.8.2', '2022.8.3'];
+const panelCumulativeData = panelTrendData.reduce((acc, val) => { acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val); return acc; }, []);
+
+// --- 整合数据集 ---
+const chartDataSets = {
+    panel: {
+        trend: { data: panelTrendData, xAxis: panelXAxisLabels, yAxisMax: 60000 },
+        cumulative: { data: panelCumulativeData, xAxis: panelXAxisLabels, yAxisMax: 120000 }
+    },
+    details: {
+        trend: { data: granularTrendData, xAxis: granularXAxisLabels, yAxisMax: 20000 },
+        cumulative: { data: granularCumulativeData, xAxis: granularXAxisLabels, yAxisMax: 120000 }
+    }
+};
+
+// ===================================================================
+// ECharts 逻辑
+// ===================================================================
+const hotspotChart = ref(null);
+let myChart = null;
+
+const getChartOptions = (xAxisData, seriesData, yMax, rotate = 0) => ({
+    tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,21,41,0.8)', borderColor: '#3a95ff', textStyle: { color: '#cbeaff' } },
+    grid: { left: '3%', right: '8%', bottom: '5%', top: '20%', containLabel: true },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: xAxisData,
+        axisLine: { lineStyle: { color: 'rgba(62, 115, 171, 0.5)' } },
+        axisLabel: { color: '#a7c5d4', fontSize: 12, rotate: rotate },
+        axisTick: { show: false }
+    },
+    yAxis: {
+        type: 'value',
+        max: yMax,
+        axisLabel: { color: '#a7c5d4', fontSize: 12 },
+        splitLine: { show: true, lineStyle: { color: 'rgba(62, 115, 171, 0.2)', type: 'dashed' } }
+    },
+    series: [{
+        name: '热度',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        data: seriesData,
+        label: { show: true, position: 'top', color: '#cdeeff', fontSize: 12 },
+        itemStyle: { color: '#00baff', borderColor: '#041421', borderWidth: 2 },
+        lineStyle: { color: '#00baff', width: 2 },
+        areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0, 186, 255, 0.4)' },
+                { offset: 1, color: 'rgba(0, 186, 255, 0)' }
+            ])
+        }
+    }]
+});
+
+// 监听标签页切换，更新面板小图
+watch(activeChartTab, (newTab) => {
+    if (myChart) {
+        const dataSet = chartDataSets.panel[newTab];
+        myChart.setOption({
+            xAxis: [{ data: dataSet.xAxis }],
+            yAxis: { max: dataSet.yAxisMax },
+            series: [{ data: dataSet.data }]
+        });
+    }
+});
+
+// 点击“查看详情”时，触发事件并传递完整数据
+const showDetails = () => {
+    const dataSet = chartDataSets.details[activeChartTab.value];
+    const rotate = dataSet.xAxis.length > 5 ? 15 : 0;
+    const option = getChartOptions(dataSet.xAxis, dataSet.data, dataSet.yAxisMax, rotate);
+    emit('showDetails', { option });
+};
+
+onMounted(() => {
+    if (hotspotChart.value) {
+        myChart = echarts.init(hotspotChart.value);
+        // 初始化时使用面板数据
+        const initialDataSet = chartDataSets.panel[activeChartTab.value];
+        myChart.setOption(getChartOptions(initialDataSet.xAxis, initialDataSet.data, initialDataSet.yAxisMax));
+    }
+});
+
+onUnmounted(() => {
+    if (myChart) myChart.dispose();
+});
 </script>
 
 <style scoped>
-.event-hot {
+/* 容器样式，无边框 */
-	width: 352px;
+.panel-container {
-	height: 296px;
+    width: 352px;
-	background-color: #04142166;
+    height: 276px;
-	border-radius: 2px;
+    background: rgba(4, 20, 33, 0.4);
-	box-shadow: 0px 0px 18px 0px #0A2E55 inset;
+    border-radius: 2px;
-	backdrop-filter: blur(4px);
+    box-shadow: 0 0 18px 0 #0A2E55 inset;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    padding: 15px 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 标题行 */
+.header-title {
+    width: 100%;
+    margin-bottom: 20px;
+}
+.header-title img {
+    height: 24px;
+}
+
+/* 控件行 */
+.header-controls {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.chart-tabs {
+    display: flex;
+    border: 1px solid #1C588F;
+    border-radius: 3px;
+    background-color: #031826;
+}
+
+.chart-tabs button {
+    background: none;
+    border: none;
+    color: #a7c5d4;
+    padding: 4px 12px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.chart-tabs button.active {
+    background-color: #236291;
+    color: white;
+    border-radius: 2px;
+}
+
+.details-btn {
+    margin-left: auto;
+    background: none;
+    border: 1px solid #1c588f;
+    color: #a7c5d4;
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.chart-container {
+    flex-grow: 1;
+    width: 100%;
+    margin-left: -10px;
 }
 </style>