From 4b438dd0c858b2163108e0589f3ecaed5e5f46dd Mon Sep 17 00:00:00 2001
From: 17630416519 <qazwsx123>
Date: Mon, 8 Sep 2025 09:31:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=9E=E6=97=B6=E7=9B=91=E6=B5=8B?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../realtimemonitor/realtimemonitor.vue       | 816 ++++++++++++++++--
 1 file changed, 746 insertions(+), 70 deletions(-)

diff --git a/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue b/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue
index e10c3fd..958693f 100644
--- a/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue
+++ b/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue
@@ -2,27 +2,20 @@
   <div class="page">
     <div class="page-container">
       <div class="page-container-left">
-        <LeftTree
-          ref="leftTreeRef"
-          @handleNodeClick="handleNodeClick"
-          ParentModelCode="YSCJMX"
-        />
+        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" ParentModelCode="YSCJMX" />
       </div>
       <div class="page-container-right">
+
         <div class="form-card">
           <el-form :model="queryParams" ref="queryRef" :inline="true">
             <el-form-item label="能源类型" prop="energyType">
-              <el-select
-                v-model="queryParams.energyType"
-                placeholder="能源类型"
-                @change="handleQuery"
-              >
-                <el-option
-                  :label="item.enername"
-                  :value="item.enersno"
-                  v-for="item in energyTypeList"
-                  :key="item.enersno"
-                />
+              <!-- <el-select v-model="queryParams.energyType" placeholder="能源类型" @change="handleQuery">
+                <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
+                  :key="item.enersno" />
+              </el-select> -->
+              <el-select v-model="value" style="width: 240px">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
+                  :disabled="item.disabled" />
               </el-select>
             </el-form-item>
             <el-form-item>
@@ -32,16 +25,76 @@
               <el-button icon="Refresh" @click="resetQuery"> 重置 </el-button>
             </el-form-item>
             <el-form-item>
-              <el-button
-                type="primary"
-                icon="Refresh"
-                @click="handleQuery"
-                circle
-              />
+              <el-button type="primary" icon="Refresh" @click="handleQuery" circle />
             </el-form-item>
           </el-form>
         </div>
-        <div
+
+        <BaseCard :title="electricityMeter">
+          <div>
+            <div class="scrollbar1-flex-content">
+              <!-- <div v-for="item in nationalElectricData" :key="item.name" class="tag-item"
+                :class="{ 'active-tag': activeTag === item.name }" @click="handleTagClick(item)">
+                {{ item.name }}
+              </div> -->
+              <div v-for="item in filteredElectricData" :key="item.name" class="tag-item"
+                :class="{ 'active-tag': activeTag === item.name }" @click="handleTagClick(item)">
+                {{ item.name }}
+              </div>
+            </div>
+            <div class="tag-content" v-if="activeTagData">
+              <div style="border: solid 1px #22408c;padding: 10px; margin: 1vw; border-radius: 10px;">
+                <div style="color: #fff; font-size: 12px;  ">电表</div>
+
+                <div class="card-container">
+                  <div @click="handeCharts(child)" v-for="(child, index) in activeTagData.children" :key="index"
+                    class="data-card">
+                    <div class="card-title">{{ child.name }}</div>
+                    <div class="card-value">{{ child.value }}</div>
+                    <div class="card-time">
+                      <el-icon>
+                        <Timer />
+                      </el-icon>
+                      {{ child.datatime }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1200" :before-close="handleClose">
+              <div style="display: flex;">
+                <el-form>
+                  <el-form-item label="日期选择">
+                    <el-date-picker clearable v-model="dataTime" :clearable="false"
+                      :type="timeType == 'YEAR' ? 'year' : timeType == 'MONTH' ? 'month' : 'date'" :format="timeType == 'YEAR' ? 'YYYY' : timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
+                        " value-format="YYYY-MM-DD" placeholder="" style="width: 220px" />
+                    <el-button icon="Search" style="margin-left: 1vw;" @click="handleSearch"
+                      type="primary">搜索</el-button>
+                    <el-button icon="Refresh" @click="handeReset">重置</el-button>
+                    <el-button icon="Download" type="primary">导出</el-button>
+                  </el-form-item>
+
+                </el-form>
+              </div>
+
+              <div style="width: 100%; height: 500px;" ref="chartContainer"></div>
+            </el-dialog>
+            <!-- <div  style=" margin-top: .5vw; ">
+            <div style="color: #fff; margin-top: .5vw; background-color: #1c2359;">
+              <div>c相电压(伏特)</div>
+              <div>215.00</div>
+              <div>2025-09-06 11:01:21</div>
+            </div>
+        
+          </div> -->
+          </div>
+        </BaseCard>
+
+
+
+
+        <!-- <div
           style="
             height: calc(100vh - 220px) !important;
             max-height: calc(100vh - 220px) !important;
@@ -75,31 +128,7 @@
                   </div>
                 </div>
               </el-scrollbar>
-              <!-- <div class="card-box" v-if="item.energyTypeName.includes('电表')">
-                <div class="form-card">
-                  <el-form :inline="true">
-                    <el-form-item label="线径">
-                      <el-button link type="primary">
-                        {{
-                          !!item.deviceArray[item.activeIndex].wireDiameter
-                            ? item.deviceArray[item.activeIndex].wireDiameter
-                            : 0
-                        }}
-                      </el-button>
-                    </el-form-item>
-                    <el-form-item label="允许最大功率">
-                      <el-button link type="primary">
-                        {{
-                          !!item.deviceArray[item.activeIndex].maxAllowablePower
-                            ? item.deviceArray[item.activeIndex]
-                              .maxAllowablePower
-                            : 0
-                        }}
-                      </el-button>
-                    </el-form-item>
-                  </el-form>
-                </div>
-              </div> -->
+            
               <div class="card-box">
                 <div class="card-box-title">
                   {{ item.deviceArray[item.activeIndex].energyTypeName }}
@@ -122,27 +151,27 @@
                           <template v-if="!!item2.unit">
                             ({{ item2.unit }})
                           </template>
-                        </dd>
-                        <dd class="num">
-                          {{
-                            item2.value != null ? item2.value.toFixed(2) : "--"
-                          }}
-                        </dd>
-                        <dd class="time">
-                          <el-icon>
-                            <Timer />
-                          </el-icon>
-                          {{ item2.dataTime }}
-                        </dd>
-                      </dl>
-                    </el-tooltip>
-                  </div>
-                </div>
-              </div>
-            </BaseCard>
-          </div>
-          <el-table :data="energyRealTimeMonitorList" style="width: 100%" />
-        </div>
+</dd>
+<dd class="num">
+  {{
+  item2.value != null ? item2.value.toFixed(2) : "--"
+  }}
+</dd>
+<dd class="time">
+  <el-icon>
+    <Timer />
+  </el-icon>
+  {{ item2.dataTime }}
+</dd>
+</dl>
+</el-tooltip>
+</div>
+</div>
+</div>
+</BaseCard>
+</div>
+<el-table :data="energyRealTimeMonitorList" style="width: 100%" />
+</div> -->
         <chartModal ref="chartRef" />
       </div>
     </div>
@@ -155,13 +184,44 @@ import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
 const { proxy } = getCurrentInstance();
 import { useRoute } from "vue-router";
 import useSettingsStore from "@/store/modules/settings";
+import * as echarts from "echarts";
 const settingsStore = useSettingsStore();
+const timeType = ref('DATE'); // 可选值: 'YEAR', 'MONTH', 'DATE'
 watch(
   () => settingsStore.sideTheme,
   (val) => {
     getList();
   }
 );
+const chartContainer = ref(null);
+let myChart = null;
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const options = [
+  {
+    value: '国家电',
+    label: '国家电',
+  },
+  {
+    value: '自来水',
+    label: '自来水',
+  },
+  {
+    value: '天然气',
+    label: '天然气',
+  },
+  {
+    value: '蒸汽',
+    label: '蒸汽',
+  },
+  {
+    value: '压缩空气',
+    label: '压缩空气',
+  },
+]
+const electricityMeter=ref('')
+const value = ref(options[0])
 const energyTypeList = ref(undefined);
 let energyRealTimeMonitorList = ref([]);
 const loading = ref(false);
@@ -173,9 +233,364 @@ const data = reactive({
   },
   query: { ...useRoute().query },
 });
-const { queryParams, query } = toRefs(data);
+
+const dataTime = ref(getCurrentDate())
+//添加搜索处理
+function handleSearch() {
+  updateChartData();
+}
+
+function handeReset() {
+  updateChartData();
+}
+// 更新图表数据的函数
+function updateChartData() {
+  if (myChart && chartContainer.value) {
+    // 生成新的数据
+    const newData = generateRandomData();
+    const newTimePoints = generateTimePoints();
+
+    // 更新图表配置
+    const option = {
+      xAxis: {
+        data: newTimePoints
+      },
+      series: [{
+        data: newData
+      }]
+    };
+
+    // 使用新数据更新图表
+    myChart.setOption(option);
+  }
+}
+function getCurrentDate() {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, '0');
+  const day = String(today.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+const nationalElectricData = ref([
+  {
+    name: "组装车间高压配电室九中1#变",
+    children: [
+      { name: "C项电压 (伏特)", value: '10.52', datatime: '2025-09-06 09:41:21' },
+      { name: "B项电压 (伏特)", value: '10.48', datatime: '2025-09-06 09:41:21' },
+      { name: "C项电流 (安培)", value: '10.50', datatime: '2025-09-06 09:41:21' },
+      { name: "B项电流 (安培)", value: '186.3', datatime: '2025-09-06 09:41:21' },
+      { name: "A项电流 (安培)", value: '178.9', datatime: '2025-09-06 09:41:21' },
+      { name: "A项电压 (伏特)", value: '182.6', datatime: '2025-09-06 09:41:21' },
+    ]
+  },
+  {
+    name: "加工车间低压配电室1#变",
+    children: [
+      { name: "C相电压 (伏特)", value: '380.2', datatime: '2025-09-06 09:43:15' },
+      { name: "A相电压 (伏特)", value: '379.8', datatime: '2025-09-06 09:43:15' },
+      { name: "A相电流 (安培)", value: '380.5', datatime: '2025-09-06 09:43:15' },
+      { name: "B相电流 (安培)", value: '98.6', datatime: '2025-09-06 09:43:15' },
+      { name: "B相电压 (伏特)", value: '102.3', datatime: '2025-09-06 09:43:15' },
+      { name: "C相电流 (安培)", value: '96.8', datatime: '2025-09-06 09:43:15' },
+    ]
+  },
+  {
+    name: "加工车间低压配电室1#泵",
+    children: [
+      { name: "C相电流 (安培)", value: '28.7', datatime: '2025-09-06 09:45:32' },
+      { name: "C相电压 (伏特)", value: '0.65', datatime: '2025-09-06 09:45:32' },
+      { name: "A相电流 (安培)", value: '380.5', datatime: '2025-09-06 09:43:15' },
+      { name: "B相电流 (安培)", value: '50.2', datatime: '2025-09-06 09:45:32' },
+      { name: "A相电压 (伏特)", value: '58.3', datatime: '2025-09-06 09:45:32' },
+      { name: "B相电压 (伏特)", value: '87.6', datatime: '2025-09-06 09:45:32' },
+      // { name: "今日运行时间 (h)", value: '3.8', datatime: '2025-09-06 09:45:32' }
+    ]
+  },
+  {
+    name: "加工车间低压配电室6#泵",
+    children: [
+      { name: "A相电流 (安培)", value: '32.1', datatime: '2025-09-06 09:46:18' },
+      { name: "B相电流 (安培)", value: '0.68', datatime: '2025-09-06 09:46:18' },
+      { name: "C相电压 (伏特)", value: '49.8', datatime: '2025-09-06 09:46:18' },
+      { name: "A相电压 (伏特)", value: '61.2', datatime: '2025-09-06 09:46:18' },
+      { name: "C相电流 (安培)", value: '44.5', datatime: '2025-09-06 09:46:18' },
+      { name: "B相电压 (伏特)", value: '4.2', datatime: '2025-09-06 09:46:18' }
+    ]
+  },
+  {
+    name: "监测车间高压配电室一中2#变",
+    children: [
+      { name: "C相电压 (伏特)", value: '10.47', datatime: '2025-09-06 09:48:05' },
+      { name: "A相电压 (伏特)", value: '10.53', datatime: '2025-09-06 09:48:05' },
+      { name: "B相电压 (伏特)", value: '10.49', datatime: '2025-09-06 09:48:05' },
+      { name: "A相电流 (安培)", value: '156.8', datatime: '2025-09-06 09:48:05' },
+      { name: "B相电流 (安培)", value: '162.3', datatime: '2025-09-06 09:48:05' },
+      { name: "C相电流 (安培)", value: '159.6', datatime: '2025-09-06 09:48:05' },
+    ]
+  },
+
+  {
+    name: "组装车间高压配电室一中1#变",
+    children: [
+      { name: "B相电流 (安培)", value: '10.51', datatime: '2025-09-06 09:52:10' },
+      { name: "B相电压 (伏特)", value: '10.49', datatime: '2025-09-06 09:52:10' },
+      { name: "C相电压 (伏特)", value: '10.53', datatime: '2025-09-06 09:52:10' },
+      { name: "C相电流 (安培)", value: '210.4', datatime: '2025-09-06 09:52:10' },
+      { name: "A相电流 (安培)", value: '208.7', datatime: '2025-09-06 09:52:10' },
+      { name: "A相电压 (伏特)", value: '212.3', datatime: '2025-09-06 09:52:10' },
+    ]
+  },
+  {
+    name: "监测车间高压配电室2#进线",
+    children: [
+      { name: "B相电流 (安培)", value: '10.56', datatime: '2025-09-06 09:50:22' },
+      { name: "B相电压 (伏特)", value: '10.58', datatime: '2025-09-06 09:50:22' },
+      { name: "C相电压 (伏特)", value: '10.54', datatime: '2025-09-06 09:50:22' },
+      { name: "C相电流 (安培)", value: '32.6', datatime: '2025-09-06 09:50:22' },
+      { name: "A相电流 (安培)", value: '31.8', datatime: '2025-09-06 09:50:22' },
+      { name: "A相电压 (伏特)", value: '32.3', datatime: '2025-09-06 09:50:22' },
+    ]
+  },
+  {
+    name: "监测车间高压配电室备用AH2",
+    children: [
+      { name: "A相电压 (伏特)", value: '10.50', datatime: '2025-09-06 09:53:45' },
+      { name: "C相电流 (安培)", value: '10.48', datatime: '2025-09-06 09:53:45' },
+      { name: "B相电流 (安培)", value: '10.52', datatime: '2025-09-06 09:53:45' },
+      { name: "C相电压 (伏特)", value: '0.0', datatime: '2025-09-06 09:53:45' },
+      { name: "A相电流 (安培)", value: '0.0', datatime: '2025-09-06 09:53:45' },
+      { name: "AB线电压 (伏特)", value: '0.0', datatime: '2025-09-06 09:53:45' },
+      { name: "B相电压 (伏特)", value: '50.40', datatime: '2025-09-06 09:53:45' },
+      { name: "BC线电压 (伏特)", value: '45.30', datatime: '2025-09-06 09:53:45' }
+    ]
+  },
+  {
+    name: "组装车间高压配电室九中2#变",
+    children: [
+      { name: "C相电流 (安培)", value: '10.46', datatime: '2025-09-06 09:55:30' },
+      { name: "B相电流 (安培)", value: '10.51', datatime: '2025-09-06 09:55:30' },
+      { name: "B相电压 (伏特)", value: '10.49', datatime: '2025-09-06 09:55:30' },
+      { name: "A相电流 (安培)", value: '176.8', datatime: '2025-09-06 09:55:30' },
+      { name: "A相电压 (伏特)", value: '181.2', datatime: '2025-09-06 09:55:30' },
+      { name: "C相电压 (伏特)", value: '178.5', datatime: '2025-09-06 09:55:30' },
+    ]
+  }
+]);
+const shanghaiElectricData = ref([
+  {
+    name: "备用",
+    children: [
+      { name: "C相电流 (安培)", value: '28.7', datatime: '2025-09-06 09:45:32' },
+      { name: "C相电压 (伏特)", value: '0.65', datatime: '2025-09-06 09:45:32' },
+      { name: "A相电流 (安培)", value: '380.5', datatime: '2025-09-06 09:43:15' },
+      { name: "B相电流 (安培)", value: '50.2', datatime: '2025-09-06 09:45:32' },
+      { name: "A相电压 (伏特)", value: '58.3', datatime: '2025-09-06 09:45:32' },
+      { name: "B相电压 (伏特)", value: '87.6', datatime: '2025-09-06 09:45:32' },
+    ]
+  },
+  {
+    name: "涂装空调用电电源",
+    children: [
+      { name: "A相电流 (安培)", value: '32.1', datatime: '2025-09-06 09:46:18' },
+      { name: "B相电流 (安培)", value: '0.68', datatime: '2025-09-06 09:46:18' },
+      { name: "C相电压 (伏特)", value: '49.8', datatime: '2025-09-06 09:46:18' },
+      { name: "A相电压 (伏特)", value: '61.2', datatime: '2025-09-06 09:46:18' },
+      { name: "C相电流 (安培)", value: '44.5', datatime: '2025-09-06 09:46:18' },
+      { name: "B相电压 (伏特)", value: '4.2', datatime: '2025-09-06 09:46:18' }
+    ]
+  },
+  {
+    name: "涂装车间机操室电源",
+    children: [
+      { name: "C相电压 (伏特)", value: '10.47', datatime: '2025-09-06 09:48:05' },
+      { name: "A相电压 (伏特)", value: '10.53', datatime: '2025-09-06 09:48:05' },
+      { name: "B相电压 (伏特)", value: '10.49', datatime: '2025-09-06 09:48:05' },
+      { name: "A相电流 (安培)", value: '156.8', datatime: '2025-09-06 09:48:05' },
+      { name: "B相电流 (安培)", value: '162.3', datatime: '2025-09-06 09:48:05' },
+      { name: "C相电流 (安培)", value: '159.6', datatime: '2025-09-06 09:48:05' },
+    ]
+  },
+  {
+    name: "4#楼照明",
+    children: [
+      { name: "B相电流 (安培)", value: '10.51', datatime: '2025-09-06 09:52:10' },
+      { name: "B相电压 (伏特)", value: '10.49', datatime: '2025-09-06 09:52:10' },
+      { name: "C相电压 (伏特)", value: '10.53', datatime: '2025-09-06 09:52:10' },
+      { name: "C相电流 (安培)", value: '210.4', datatime: '2025-09-06 09:52:10' },
+      { name: "A相电流 (安培)", value: '208.7', datatime: '2025-09-06 09:52:10' },
+      { name: "A相电压 (伏特)", value: '212.3', datatime: '2025-09-06 09:52:10' },
+    ]
+  },
+  {
+    name: "涂装车间空压机、电梯",
+    children: [
+      { name: "B相电流 (安培)", value: '10.56', datatime: '2025-09-06 09:50:22' },
+      { name: "B相电压 (伏特)", value: '10.58', datatime: '2025-09-06 09:50:22' },
+      { name: "C相电压 (伏特)", value: '10.54', datatime: '2025-09-06 09:50:22' },
+      { name: "C相电流 (安培)", value: '32.6', datatime: '2025-09-06 09:50:22' },
+      { name: "A相电流 (安培)", value: '31.8', datatime: '2025-09-06 09:50:22' },
+      { name: "A相电压 (伏特)", value: '32.3', datatime: '2025-09-06 09:50:22' },
+    ]
+  }
+]);
+const shanghaiInjectionData = ref([
+  {
+    name: "注塑车间注塑电源1",
+    children: [
+      { name: "A相电流 (安培)", value: '120.5', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电流 (安培)", value: '115.2', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电流 (安培)", value: '118.7', datatime: '2025-09-06 10:15:30' },
+      { name: "A相电压 (伏特)", value: '380.2', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电压 (伏特)", value: '379.8', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电压 (伏特)", value: '381.5', datatime: '2025-09-06 10:15:30' },
+    ]
+  },
+  {
+    name: "注塑车间注翟电源2",
+    children: [
+      { name: "A相电流 (安培)", value: '95.3', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电流 (安培)", value: '92.1', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电流 (安培)", value: '98.4', datatime: '2025-09-06 10:15:30' },
+      { name: "A相电压 (伏特)", value: '379.5', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电压 (伏特)", value: '380.1', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电压 (伏特)", value: '378.9', datatime: '2025-09-06 10:15:30' },
+    ]
+  },
+  {
+    name: "注塑车间注塑辅助电源",
+    children: [
+      { name: "A相电流 (安培)", value: '65.2', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电流 (安培)", value: '62.8', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电流 (安培)", value: '67.5', datatime: '2025-09-06 10:15:30' },
+      { name: "A相电压 (伏特)", value: '381.2', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电压 (伏特)", value: '380.5', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电压 (伏特)", value: '379.8', datatime: '2025-09-06 10:15:30' },
+    ]
+  },
+  {
+    name: "注塑车间辅助电源2",
+    children: [
+      { name: "A相电流 (安培)", value: '42.7', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电流 (安培)", value: '40.3', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电流 (安培)", value: '44.1', datatime: '2025-09-06 10:15:30' },
+      { name: "A相电压 (伏特)", value: '380.8', datatime: '2025-09-06 10:15:30' },
+      { name: "B相电压 (伏特)", value: '379.9', datatime: '2025-09-06 10:15:30' },
+      { name: "C相电压 (伏特)", value: '381.3', datatime: '2025-09-06 10:15:30' },
+    ]
+  }
+]);
+// 添加上海干巷总装车间数据
+const shanghaiAssemblyData = ref([
+  {
+    name: "总装车间电力电源（一层）",
+    children: [
+      { name: "A相电流 (安培)", value: '85.3', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电流 (安培)", value: '82.7', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电流 (安培)", value: '88.1', datatime: '2025-09-06 11:20:15' },
+      { name: "A相电压 (伏特)", value: '380.5', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电压 (伏特)", value: '379.8', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电压 (伏特)", value: '381.2', datatime: '2025-09-06 11:20:15' },
+    ]
+  },
+  {
+    name: "总装主润电力电源（二层）",
+    children: [
+      { name: "A相电流 (安培)", value: '72.4', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电流 (安培)", value: '69.8', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电流 (安培)", value: '75.2', datatime: '2025-09-06 11:20:15' },
+      { name: "A相电压 (伏特)", value: '379.7', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电压 (伏特)", value: '380.3', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电压 (伏特)", value: '378.9', datatime: '2025-09-06 11:20:15' },
+    ]
+  },
+  {
+    name: "总装车间电力电源（三层）",
+    children: [
+      { name: "A相电流 (安培)", value: '63.7', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电流 (安培)", value: '61.2', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电流 (安培)", value: '66.8', datatime: '2025-09-06 11:20:15' },
+      { name: "A相电压 (伏特)", value: '381.3', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电压 (伏特)", value: '380.1', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电压 (伏特)", value: '379.5', datatime: '2025-09-06 11:20:15' },
+    ]
+  },
+  {
+    name: "3#厂房照明",
+    children: [
+      { name: "A相电流 (安培)", value: '35.6', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电流 (安培)", value: '32.4', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电流 (安培)", value: '38.2', datatime: '2025-09-06 11:20:15' },
+      { name: "A相电压 (伏特)", value: '380.2', datatime: '2025-09-06 11:20:15' },
+      { name: "B相电压 (伏特)", value: '379.6', datatime: '2025-09-06 11:20:15' },
+      { name: "C相电压 (伏特)", value: '381.0', datatime: '2025-09-06 11:20:15' },
+    ]
+  }
+]);
+const filteredElectricData = computed(() => {
+  if (electricityMeter.value === '总厂') {
+    return nationalElectricData.value;
+  } else if (electricityMeter.value === '上海干巷涂装车间') {
+    return shanghaiElectricData.value;
+  } else if (electricityMeter.value === '上海干巷注塑车间') {
+    return shanghaiInjectionData.value;
+  } else if (electricityMeter.value === '上海干巷总装车间') {
+    return shanghaiAssemblyData.value;
+  }
+  // 默认返回总厂数据
+  return nationalElectricData.value;
+});
+
+// const filteredElectricData = computed(() => {
+//   if (electricityMeter.value === '总厂') {
+//     return nationalElectricData.value;
+//   } else if (electricityMeter.value === '上海干巷涂装车间') {
+//     return shanghaiElectricData.value;
+//   }
+//   // 默认返回总厂数据
+//   return nationalElectricData.value;
+// });
+// const activeTag = ref(nationalElectricData.value[0]?.name); // 默认选中第一个标签
+// const activeTagData = ref(nationalElectricData.value[0]);
+// const { queryParams, query } = toRefs(data);
+
+
+// const filteredElectricData = computed(() => {
+//   if (electricityMeter.value === '总厂') {
+//     return nationalElectricData.value;
+//   } else if (electricityMeter.value === '上海干巷涂装车间') {
+//     return shanghaiElectricData.value;
+//   }
+//   // 默认返回总厂数据
+//   return nationalElectricData.value;
+// });
+
+// 修改 activeTag 和 activeTagData 的初始化方式
+const activeTag = ref('');
+const activeTagData = ref(null);
+
+// 监听 filteredElectricData 的变化，自动选择第一个标签
+watch(filteredElectricData, (newData) => {
+  if (newData && newData.length > 0) {
+    activeTag.value = newData[0].name;
+    activeTagData.value = newData[0];
+  } else {
+    activeTag.value = '';
+    activeTagData.value = null;
+  }
+}, { immediate: true });
+
+function handleTagClick(item) {
+  activeTag.value = item.name;
+  activeTagData.value = item;
+}
+
+
+
 /** 节点单击事件 */
 function handleNodeClick(data) {
+  electricityMeter.value = data.label;
+  console.log(data.label,'electricityMeter');
   queryParams.value.nodeId = data.id;
   queryParams.value.nodeName = data.label;
   listEnergyTypeList().then((res) => {
@@ -726,7 +1141,94 @@ function resetQuery() {
   handleQuery();
 }
 let chartRef = ref();
+function handeCharts(val) {
+  dialogVisible.value = true;
+  dialogTitle.value = val.name;
 
+  // 重置为当前日期
+  dataTime.value = getCurrentDate();
+
+  // 使用 nextTick 确保 DOM 更新完成后再初始化图表
+  nextTick(() => {
+    if (chartContainer.value) {
+      // 如果已有实例则销毁
+      if (myChart) {
+        myChart.dispose();
+      }
+      // 初始化 echarts 实例
+      myChart = echarts.init(chartContainer.value);
+      // 设置图表配置项
+      const option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          data: generateTimePoints(),
+          axisLabel: {
+            color: '#ffffff',
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#ffffff'
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: '#ffffff'
+            }
+          }
+        },
+        series: [{
+          data: generateRandomData(),
+          type: 'line',
+          smooth: false
+        }]
+      };
+
+      // 渲染图表
+      myChart.setOption(option);
+    }
+  });
+}
+
+function generateTimePoints() {
+  const now = new Date();
+  const timePoints = [];
+
+  // 生成最近12个时间点，每45分钟一个点
+  for (let i = 11; i >= 0; i--) {
+    const timePoint = new Date(now.getTime() - i * 45 * 60 * 1000);
+    const hours = timePoint.getHours().toString().padStart(2, '0');
+    const minutes = timePoint.getMinutes().toString().padStart(2, '0');
+    timePoints.push(`${hours}:${minutes}`);
+  }
+
+  return timePoints;
+}
+
+function generateRandomData() {
+  const data = [];
+  // 生成12个0-300之间的随机数，对应12个时间点
+  for (let i = 0; i < 12; i++) {
+    data.push(Math.floor(Math.random() * 301)); // 0-300之间的随机整数
+  }
+  return data;
+}
+function handleClose() {
+  dialogVisible.value = false;
+  // 关闭对话框时销毁图表实例
+  if (myChart) {
+    myChart.dispose();
+    myChart = null;
+  }
+}
 function handleChartModal(row) {
   if (chartRef.value) {
     row.nodeName = queryParams.value.nodeName;
@@ -957,6 +1459,7 @@ function handleChartModal(row) {
   display: flex;
   margin: 10px 18px;
 }
+
 .scrollbar-demo-item {
   flex-shrink: 0;
   display: flex;
@@ -983,4 +1486,177 @@ function handleChartModal(row) {
   color: #ffffff;
   cursor: pointer;
 }
+
+.page-container-title {
+  background: #293f87;
+  padding: 10px 8px;
+  color: #fff;
+  // margin-left: 1vw;
+  // margin-right: .9vw;
+  border-radius: 10px 10px 0 0;
+  margin-bottom: .5vw;
+}
+
+.scrollbar1-flex-content {
+  display: flex;
+  color: #fff;
+  margin-left: 1vw;
+  // margin: 0 .9vw;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 8px 0;
+  white-space: nowrap;
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    height: 5px;
+    display: block !important; // 
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1); // 滚动条轨道背景
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #9841FC; // 滚动条滑块颜色
+    border-radius: 4px;
+
+    &:hover {
+      background: #8a35e0; // 悬停时颜色
+    }
+  }
+
+  .tag-item {
+    display: inline-block;
+    padding: 6px 10px;
+    margin: 0 5px 6px 0;
+    background-color: #9841FC;
+    color: white;
+    border-radius: 12px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid #7a28d0;
+
+    &:hover {
+      background-color: #8a35e0;
+      transform: scale(1.02);
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+
+  .active-tag {
+    background-color: #7ac698 !important;
+    border-color: #6b9f7c !important;
+    color: #fff;
+  }
+
+  .tag-content {
+    margin: 20px;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+
+  .content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 15px;
+  }
+
+  .content-item {
+    padding: 15px;
+    background-color: #293f87;
+    border-radius: 6px;
+    text-align: center;
+  }
+
+  .content-title {
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  .content-value {
+    color: #36d3ff;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .content-time {
+    color: rgba(255, 253, 253, 0.7);
+    font-size: 12px;
+  }
+
+  /* 亮色主题适配 */
+  .themeLight .tag-content {
+    background-color: #f5f5f5;
+  }
+
+  .themeLight .content-item {
+    background-color: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .themeLight .content-title {
+    color: #333;
+  }
+
+  .themeLight .content-time {
+    color: #666;
+  }
+}
+
+.card-container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 16px;
+  padding: 0 0 10px 0;
+  margin: 20px;
+  overflow-x: auto;
+  // -webkit-overflow-scrolling: touch;
+}
+
+.data-card {
+  background-color: #1c2359;
+  border-radius: 10px;
+  padding: 14px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid #2a3b7e;
+  color: white;
+  text-align: left;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    // transform: scale(1.02);
+  }
+
+  .card-title {
+    font-size: 12px;
+    color: #fff;
+    margin-bottom: 6px;
+    font-weight: 500;
+  }
+
+  .card-value {
+    font-size: 24px;
+    color: #36d3ff;
+    font-weight: bold;
+    margin-bottom: 6px;
+  }
+
+  .card-time {
+    font-size: 12px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    gap: 4px;
+  }
+}
 </style>