驾驶舱样式调整

src/views/screen/Dashboard.vue

@@ -15,12 +15,18 @@
           <div class="area-header">
             <div class="header-left">
               <img src="./dashboard/dp_icon4.png" alt="icon" />
-              <span class="header-left-text">城区供水温度【实时】</span>
+              <span class="header-left-text">城区供回水温度【实时】</span>
             </div>
+            <div class="header-right" style="display: flex; ">
               <div class="header-right">
                 <div style="background: linear-gradient(90deg, #ffce53, #6eecff);"></div>
                 <div>供水</div>
               </div>
+              <div class="header-right">
+                <div style="background: linear-gradient(90deg, #fff, #5BB7F7);"></div>
+                <div>回水</div>
+              </div>
+            </div>
           </div>
           <div class="area-body">
             <div id="main" style="width: 100%; height: 100%;"></div>
@@ -28,7 +34,7 @@
         </div>
 
         <!-- area-4 折线图 -->
-        <div class="area2 areabg area-4">
+        <!-- <div class="area2 areabg area-4">
           <div class="area-header">
             <div class="header-left">
               <img src="./dashboard/dp_icon4.png" alt="icon" />
@@ -42,9 +48,9 @@
           <div class="area-body">
             <div id="lineChart" style="width: 100%; height: 100%;"></div>
           </div>
-        </div>
+        </div> -->
 
-        <div class="area3 areabg area-9">
+        <div class="areabg area-9">
           <div class="area-body list-container">
             <!-- 标题行 -->
             <div class="list-header">
@@ -55,11 +61,17 @@
               <span>二次网回水</span>
               <span>二次网供压</span>
               <span>二次网回压</span>
-              <img src="./dashboard/dp_icon4-right.png" class="left-icon" />
+              <div>
+                <span v-if="tableCanScroll" @click="stopScroll()">停</span>
+                <span v-else @click="startScroll()">启</span>
+              </div>
+              <!-- <img src="./dashboard/dp_icon4-right.png" class="left-icon" /> -->
             </div>
             <!-- 内容行滚动区域 -->
-            <div class="list-body">
+            <div :style="{ maxHeight: `calc(100% - 30px)`, overflowY: 'auto' }"
-              <div v-for="item in z" :key="item.view028" class="list-row">
+              style="scrollbar-width: none;-ms-overflow-style: none;">
+              <div class="list-body" :style="{ transform: `translateY(${-scrollTop}px)` }">
+                <div v-for="item in doubleZList" :key="item.view028" class="list-row">
                   <span>{{ item.view028 }}</span>
                   <span>{{ item.view030 }}</span>
                   <span>{{ item.view009 }}</span>
@@ -71,6 +83,7 @@
             </div>
           </div>
         </div>
+      </div>
 
       <!-- 右侧保持不变 -->
       <div class="right">
@@ -130,6 +143,16 @@
               <img src="./dashboard/dp_icon4.png" alt="icon" />
               <span class="header-left-text">郊县供回水温度【实时】</span>
             </div>
+            <div class="header-right" style="display: flex; ">
+              <div class="header-right">
+                <div style="background: linear-gradient(90deg, #2E5A6B, #F7B833);"></div>
+                <div>供水</div>
+              </div>
+              <div class="header-right">
+                <div style="background: linear-gradient(90deg, #ffd3be, #FF9D71);"></div>
+                <div>回水</div>
+              </div>
+            </div>
           </div>
           <div class=" area-body"></div>
         </div>
@@ -188,7 +211,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick, computed } from 'vue';
 import { slcx, cqglfgswd, glfzb } from '/@/api/dashboard/api';
 import * as echarts from 'echarts';
 import aImg from './dashboard/c.png';
@@ -217,7 +240,7 @@ const cqglfsl = ref(0)
 const cqhrzsl = ref(0)
 const jxglfsl = ref(0)
 const jxsl = ref(0)
-const jbztys = ref('#59accf')
+const jbztys = ref('#fff')
 const jbzbzys = ref('rgba(27, 147, 191, 0.3)')
 
 const cityList = ref<{ name: string; value: number; raw: any }[]>([]);
@@ -226,12 +249,37 @@ const countyList = ref<{ name: string; value: number; raw: any }[]>([]);
 const cityHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
 const countyHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
 
+const scrollTop = ref(0);
+const speed = 1; // 滚动速度（像素/次）
+let tableTimer = null;
+const tableCanScroll = ref(true)
+
+const startScroll = () => {
+  tableCanScroll.value = true
+
+  const totalHeight = 28 * z.value.length;
+
+  tableTimer = setInterval(() => {
+    scrollTop.value += speed;
+    if (scrollTop.value >= totalHeight) {
+      scrollTop.value = 0; // 归位，形成循环
+    }
+  }, 30);
+};
+
+function stopScroll() {
+  tableCanScroll.value = false
+  clearInterval(tableTimer)
+
+}
+
 // 区域 main 柱状图
 function updateChartMain() {
   if (!chartMain) return;
   const names = cityList.value.map(i => i.name);
-  const values = cityList.value.map(i => i.value);
+  const gsValues = cityList.value.map(i => i.value);
-  const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
+  const hsValues = cityList.value.map(i => Number(i.raw?.view006 || 0));
+  const maxVal = gsValues.length ? Math.max(...gsValues) * 1.15 : 100;
 
   chartMain.setOption({
     grid: { left: 10, right: 0, bottom: 14, top: 28, containLabel: true },
@@ -262,7 +310,8 @@ function updateChartMain() {
           + 'background:linear-gradient(to right, #cccccc46, #ececec7c, #cccccc46);'
           + 'background-position:left;'
           + '"></div>' // 下边框渐变
-          + params[0].name + '锅炉房<br/>供水温度: ' + params[1].value + '</div>';
+          + params[0].name + '锅炉房<br/>供水温度: ' + params[1].value
+          + '<br/>回水温度: ' + params[3].value + '</div>';
         return content;
       },
     },
@@ -270,12 +319,60 @@ function updateChartMain() {
     yAxis: { type: 'value', axisLabel: { color: jbztys.value, margin: 8 }, axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: jbzbzys.value } }, splitLine: { show: false } },
     series: [
       { type: 'bar', barWidth: '15px', data: names.map(() => maxVal), barGap: '-100%', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }] } }, z: 1, silent: true },
-      { type: 'bar', barWidth: '15px', data: values, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#e8a929' }, { offset: 1, color: '#27a3d5' }] }, opacity: 0.95 }, z: 2 },
+      { type: 'bar', yAxisIndex: 0, barWidth: '15px', data: gsValues, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#e8a929' }, { offset: 1, color: '#27a3d5' }] }, opacity: 0.95 }, z: 2 },
-      { type: 'pictorialBar', symbol: `image://${aImg}`, symbolSize: [15, 15], symbolOffset: [0, -10], symbolPosition: 'end', data: values, z: 3, silent: true }
+      { type: 'pictorialBar', symbol: `image://${aImg}`, symbolSize: [15, 15], symbolOffset: [0, -10], symbolPosition: 'end', data: gsValues, z: 3, silent: true },
+      { name: '回水温度', type: 'line', data: hsValues, symbol: 'none', lineStyle: { width: 2, color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'white' }, { offset: 0.2, color: '#009BFF' }, { offset: 0.4, color: '#49B0FF' }, { offset: 0.6, color: 'white' }, { offset: 0.8, color: '#009BFF' }, { offset: 1, color: '#49B0FF' }] } }, showSymbol: false, z: 5 }
     ]
   }, true);
+
+  // --------- 自动轮播 tooltip 的逻辑（每 5 秒切换） ---------
+  // 清除旧定时器（避免重复）
+  if (chartMain.__autoTooltipTimer) {
+    clearInterval(chartMain.__autoTooltipTimer);
+    chartMain.__autoTooltipTimer = null;
+    // 隐藏可能残留的 tooltip/highlight
+    try { chartMain.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartMain.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个
+  try {
+    chartMain.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: idx });
+    chartMain.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+  } catch (e) { }
+
+  chartMain.__autoTooltipTimer = setInterval(() => {
+    try {
+      // 取消上一个高亮（safe）
+      chartMain.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+      // 移动到下一个索引
+      idx = (idx + 1) % names.length;
+      // 显示 tooltip 并高亮新项
+      chartMain.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: idx });
+      chartMain.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) {
+      // 防止报错中断定时器
+      console.error(e);
+    }
+  }, 5000);
+
+  // 可选：当销毁 chart 时清理定时器（如果你在别处销毁 chart，请一并 clearInterval）
+  // 例如：chartMain.on('legendselectchanged', ()=>{}) ... 这里不强制绑定销毁事件
 }
 
+// 如果需要在别处停止轮播，调用：
+function stopAutoTooltip() {
+  if (chartMain && chartMain.__autoTooltipTimer) {
+    clearInterval(chartMain.__autoTooltipTimer);
+    chartMain.__autoTooltipTimer = null;
+    try { chartMain.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+  }
+}
+
+
 // 区域 line 折线图
 function updateChartLine() {
   if (!chartLine) return;
@@ -484,7 +581,6 @@ function updateRadarChart() {
   }, true);
 }
 
-// area-8 折线图更新函数
 function updateChartArea8() {
   if (!chartArea8) return;
 
@@ -495,7 +591,7 @@ function updateChartArea8() {
   const maxVal = Math.max(...supplyData.concat(returnData)) * 1.15 || 100;
 
   chartArea8.setOption({
-    grid: { left: 30, right: 40, bottom: 14, top: 30, containLabel: true },
+    grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'transparent',
@@ -533,19 +629,19 @@ function updateChartArea8() {
     },
     yAxis: {
       type: 'value',
-      name: '温度℃',             // 标题
+      name: '温度℃',
-      nameLocation: 'end',       // 放在轴末端
+      nameLocation: 'end',
-      nameTextStyle: {            // 标题样式
+      nameTextStyle: {
-        color: '#ffffff',         // 白色
+        color: '#ffffff',
-        align: 'right',            // 靠左对齐
+        align: 'right',
-        verticalAlign: 'bottom',  // 垂直对齐
+        verticalAlign: 'bottom',
         fontSize: 11
       },
       nameGap: 15,
       axisLabel: {
         color: jbztys.value,
         margin: 8,
-        formatter: '{value}'   // 显示温度单位
+        formatter: '{value}'
       },
       axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
       axisTick: { show: false },
@@ -569,7 +665,7 @@ function updateChartArea8() {
           },
           opacity: 0.8
         },
-        label: { show: false }  // 关闭折线上数值显示
+        label: { show: false }
       },
       {
         name: '回水',
@@ -588,13 +684,174 @@ function updateChartArea8() {
           },
           opacity: 0.8
         },
-        label: { show: false }  // 关闭折线上数值显示
+        label: { show: false }
       }
     ]
   }, true);
 
+  // -------- 自动轮播 tooltip（每 5 秒） --------
+  // 清理旧定时器（避免重复）
+  if (chartArea8.__autoTooltipTimer) {
+    clearInterval(chartArea8.__autoTooltipTimer);
+    chartArea8.__autoTooltipTimer = null;
+    try { chartArea8.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
+    try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
+  setTimeout(() => {
+    try {
+      chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+      chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+      // 同时也可以高亮第二条线的点（可选）
+      chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) { }
+    chartArea8.__autoTooltipTimer = setInterval(() => {
+      try {
+        // 取消上一个高亮
+        chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
+        chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+
+        // 下一个索引
+        idx = (idx + 1) % names.length;
+
+        // 显示 tooltip（axis 模式会显示两条线的数据）并高亮
+        chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+        chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+        chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+      } catch (e) {
+        console.error(e);
+      }
+    }, 5000);
+  }, 2500);
+
 }
+
+// 停止轮播（需要时调用）
+function stopAutoTooltipArea8() {
+  if (chartArea8 && chartArea8.__autoTooltipTimer) {
+    clearInterval(chartArea8.__autoTooltipTimer);
+    chartArea8.__autoTooltipTimer = null;
+    try { chartArea8.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+  }
+}
+
+// area-8 折线图更新函数
+// function updateChartArea8() {
+//   if (!chartArea8) return;
+
+//   const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') ?? '未知');
+//   const supplyData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view035) : Number(i.raw.view005));
+//   const returnData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view036) : Number(i.raw.view006));
+
+//   const maxVal = Math.max(...supplyData.concat(returnData)) * 1.15 || 100;
+
+//   chartArea8.setOption({
+//     grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
+//     tooltip: {
+//       trigger: 'axis',
+//       backgroundColor: 'transparent',
+//       extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
+//       formatter: function (params) {
+//         const p = params[0];
+//         const content = `<div style="
+//         position:relative;
+//         border-left:2px solid #cccccc46;
+//         border-right:2px solid #cccccc46;
+//         border-radius:5px;
+//         background:linear-gradient(to right bottom, #08101D, #1a3b70);
+//         color:#ffffff;
+//         padding:5px 10px;
+//         margin-left:10px;
+//         z-index:99;
+//         text-align:center;">
+//           <div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
+//           <div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
+//           ${params[0].name}<br/>
+//           供水: ${supplyData[p.dataIndex]}<br/>
+//           回水: ${returnData[p.dataIndex]}
+//         </div>`;
+//         return content;
+//       }
+//     },
+//     xAxis: {
+//       type: 'category',
+//       boundaryGap: false,
+//       data: names,
+//       axisLabel: { rotate: 0, interval: 0, color: jbztys.value },
+//       axisLine: { lineStyle: { color: jbzbzys.value } },
+//       axisTick: { show: false },
+//       splitLine: { show: false }
+//     },
+//     yAxis: {
+//       type: 'value',
+//       name: '温度℃',             // 标题
+//       nameLocation: 'end',       // 放在轴末端
+//       nameTextStyle: {            // 标题样式
+//         color: '#ffffff',         // 白色
+//         align: 'right',            // 靠左对齐
+//         verticalAlign: 'bottom',  // 垂直对齐
+//         fontSize: 11
+//       },
+//       nameGap: 15,
+//       axisLabel: {
+//         color: jbztys.value,
+//         margin: 8,
+//         formatter: '{value}'   // 显示温度单位
+//       },
+//       axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
+//       axisTick: { show: false },
+//       splitLine: { show: true, lineStyle: { type: [8, 2], color: '#66666655' } },
+//     },
+//     series: [
+//       {
+//         name: '供水',
+//         type: 'line',
+//         smooth: true,
+//         data: supplyData,
+//         areaStyle: { opacity: 0.4 },
+//         itemStyle: {
+//           color: {
+//             type: 'linear',
+//             x: 0, y: 0, x2: 0, y2: 1,
+//             colorStops: [
+//               { offset: 0, color: '#e8a929' },
+//               { offset: 1, color: '#27a3d5' }
+//             ]
+//           },
+//           opacity: 0.8
+//         },
+//         label: { show: false }  // 关闭折线上数值显示
+//       },
+//       {
+//         name: '回水',
+//         type: 'line',
+//         smooth: true,
+//         data: returnData,
+//         areaStyle: { opacity: 0.4 },
+//         itemStyle: {
+//           color: {
+//             type: 'linear',
+//             x: 0, y: 0, x2: 0, y2: 1,
+//             colorStops: [
+//               { offset: 0, color: '#ff7e5f' },
+//               { offset: 1, color: '#feb47b' }
+//             ]
+//           },
+//           opacity: 0.8
+//         },
+//         label: { show: false }  // 关闭折线上数值显示
+//       }
+//     ]
+//   }, true);
+
+// }
 const z = ref<any[]>([]);
+const doubleZList = computed(() => [...z.value, ...z.value]);
 
 async function loadData() {
   try {
@@ -648,16 +905,17 @@ async function loadData() {
     countyHrzList.value = countys2;
 
     updateChartMain();
-    updateChartLine();
+    // updateChartLine();
     updateChartCounty();
     updateRadarChart();
     updateChartArea8();
+
+    startScroll();
   } catch (e) { console.error(e); }
 }
 
 // 监听全屏变化
 const handleFullScreenChange = () => {
-  console.log(123)
   window.location.reload();
 };
 
@@ -665,24 +923,24 @@ onMounted(() => {
   timer = setInterval(() => { currentTime.value = new Date().toLocaleString(); }, 1000);
 
   const chartDom1 = document.getElementById("main") as HTMLElement;
-  const chartDom2 = document.getElementById("lineChart") as HTMLElement;
+  // const chartDom2 = document.getElementById("lineChart") as HTMLElement;
   const chartDom3 = document.querySelector(".area-6 .area-body") as HTMLElement;
   const radarDom = document.querySelector('.area-7 .area-body') as HTMLElement;
   const area8Dom = document.querySelector('.area-8 .area-body') as HTMLElement;
 
   chartMain = echarts.init(chartDom1);
-  chartLine = echarts.init(chartDom2);
+  // chartLine = echarts.init(chartDom2);
   chartCounty = echarts.init(chartDom3);
   chartRadar = echarts.init(radarDom);
   chartArea8 = echarts.init(area8Dom);
 
   updateChartMain();
-  updateChartLine();
+  // updateChartLine();
   updateChartCounty();
   updateChartArea8();
 
   loadData();
-  dataTimer = window.setInterval(() => { loadData(); }, 60 * 1000);
+  dataTimer = window.setInterval(() => { loadData(); }, 5 * 60 * 1000);
 
   window.addEventListener("resize", resizeChart);
 
@@ -690,6 +948,7 @@ onMounted(() => {
   window.addEventListener('keydown', handleKeyDown);
 
   window.addEventListener('resize', handleFullScreenChange);
+
 });
 
 onUnmounted(() => {
@@ -700,7 +959,7 @@ onUnmounted(() => {
 
 function resizeChart() {
   if (chartMain) chartMain.resize();
-  if (chartLine) chartLine.resize();
+  // if (chartLine) chartLine.resize();
   if (chartCounty) chartCounty.resize();
   if (chartRadar) chartRadar.resize();
   if (chartArea8) chartArea8.resize();
@@ -709,12 +968,14 @@ function resizeChart() {
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resizeChart);
   if (chartMain) { chartMain.dispose(); chartMain = null; }
-  if (chartLine) { chartLine.dispose(); chartLine = null; }
+  // if (chartLine) { chartLine.dispose(); chartLine = null; }
   if (chartCounty) { chartCounty.dispose(); chartCounty = null; }
   if (chartRadar) { chartRadar.dispose(); chartRadar = null; }
   if (chartArea8) { chartArea8.dispose(); chartArea8 = null; }
 
   window.addEventListener('keydown', handleKeyDown);
+
+  clearInterval(timer);
 });
 
 function handleKeyDown(event: KeyboardEvent) {
@@ -746,7 +1007,6 @@ function closeModal() {
 }
 
 async function detailFunc(record) {
-  console.log(record);
   modalVisible2.value = true;
   await nextTick()
   registerModal.value.init(record)
@@ -917,6 +1177,17 @@ function closeModal2() {
   transform: scaleY(0.85);
 }
 
+.area1 {
+  border-radius: 10px;
+  display: flex;
+  flex: 2;
+}
+
+.area-9 {
+  border-radius: 10px;
+  flex: 3;
+}
+
 /* 说明行 */
 .bottom-text-1,
 .bottom-text-2,
@@ -1063,7 +1334,7 @@ function closeModal2() {
   font-size: 16px;
   font-weight: 500;
   line-height: 1;
-  color: #59accf;
+  color: #fff;
   /* 若在浅背景上看不清，可改为深色 */
 }
 
@@ -1133,7 +1404,7 @@ function closeModal2() {
   flex: 1;
   overflow: hidden;
   padding: 4px 0;
-  height: 275px;
+  height: 578px;
 }
 
 /* 标题行 */
@@ -1142,7 +1413,7 @@ function closeModal2() {
   align-items: center;
   justify-content: space-between;
   background-color: rgba(19, 23, 34, 0.05); // #131722 几乎透明
-  color: #83c2df;
+  color: #fff;
   font-size: 16px;
   height: 30px;
   padding: 0 8px;
@@ -1171,7 +1442,7 @@ function closeModal2() {
   align-items: center;
   justify-content: space-between;
   background-color: rgba(19, 23, 34, 0.4); // #131722 半透明
-  color: #83c2df;
+  color: #fff;
   font-size: 14px;
   margin: 5px 0; // 行间距 2px
   padding: 0 30px;