添加接口调用

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@highlightjs/vue-plugin": "2.1.0",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "13.1.0",
     "animate.css": "4.1.1",
@@ -44,9 +45,11 @@
     "vue-cropper": "1.1.1",
     "vue-i18n": "11.1.3",
     "vue-json-pretty": "2.4.0",
+    "vue-masonry": "^0.16.0",
     "vue-router": "4.5.0",
     "vue-types": "6.0.0",
     "vue3-scroll-seamless": "^1.0.6",
+    "vue3-seamless-scroll": "^3.0.2",
     "vxe-table": "4.13.7"
   },
   "devDependencies": {

src/main.ts

@@ -41,10 +41,10 @@ VXETable.setConfig({
 // 修改 el-dialog 默认点击遮照为不关闭
 import { ElDialog } from 'element-plus';
 ElDialog.props.closeOnClickModal.default = false;
+import { VueMasonryPlugin } from 'vue-masonry';
 
 const app = createApp(App);
- 
-
+app.use(VueMasonryPlugin);
 app.use(HighLight);
 app.use(ElementIcons);
 app.use(router);

src/views/chart/chart1.vue

@@ -6,25 +6,31 @@
     <div class="topTitle" style="left: 37.5%">在线数量:</div>
     <div class="topTitle" style="left: 62%">离线数量:</div>
     <div class="topTitle" style="left: 86.5%">告警数量:</div>
-    <div class="topNum" style="left: 17%; color: #127feb">66</div>
-    <div class="topNum" style="left: 41.5%; color: #49e1f5">66</div>
-    <div class="topNum" style="left: 66%; color: #d8ee30">66</div>
-    <div class="topNum" style="left: 90.5%; color: #901f43">66</div>
+    <div class="topNum" style="left: 17%; color: #127feb">{{ overview.deviceTotal }}</div>
+    <div class="topNum" style="left: 41.5%; color: #49e1f5">{{ overview.onlineCount }}</div>
+    <div class="topNum" style="left: 66%; color: #d8ee30">{{ overview.offlineCount }}</div>
+    <div class="topNum" style="left: 90.5%; color: #901f43">{{ overview.alarmCount }}</div>
     <div class="successRate">
       <Chart ref="successRateRef"></Chart>
     </div>
+    <div class="menu">
+      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
+        <template v-for="(i, index) in treeData" :key="i.id">
+          <MenuItem :data="i" />
+        </template>
+      </el-menu>
+    </div>
     <div class="scrollTable">
       <div class="th" :style="{ backgroundImage: `url(${thbg})` }">
         <div class="td" style="width: 25%">时间</div>
         <div class="td" style="width: 15%">设备名称</div>
-        <div class="td" style="width: 30%">位置</div>
-        <div class="td" style="width: 10%">等级</div>
-        <div class="td" style="width: 20%">告警行为</div>
+        <div class="td" style="width: 25%">位置</div>
+        <!--        <div class="td" style="width: 10%">等级</div>-->
+        <div class="td" style="width: 35%">告警行为</div>
       </div>
       <vue3ScrollSeamless
-        :limitMoveNum="1"
-        :step="1"
-        :hover="true"
+        ref="scrollSeamlessRef"
+        :classOptions="classOptions"
         :dataList="tableData"
         style="overflow: hidden; height: calc(100% - 3.5vw); margin-top: 0.2vw"
       >
@@ -35,161 +41,248 @@
           style="margin-top: 8px; line-height: 2.4vw"
           :style="{ backgroundImage: `url(${trbg})` }"
         >
-          <div class="td" style="width: 25%; line-height: 2.4vw">{{ item.time }}</div>
-          <div class="td" style="width: 15%; line-height: 2vw">{{ item.name }}</div>
-          <div class="td" style="width: 30%; line-height: 2vw; font-size: 0.6vw">{{ item.lo }}</div>
-          <div class="td" style="width: 10%; line-height: 2vw">{{ item.level }}</div>
-          <div class="td" style="width: 20%; line-height: 2vw">{{ item.item1 }}</div>
+          <div class="td" style="width: 25%; line-height: 2.4vw">{{ item.alarmTime }}</div>
+          <div class="td" style="width: 15%; line-height: 2vw">{{ item.deviceName }}</div>
+          <div class="td" style="width: 25%; line-height: 2vw; font-size: 0.6vw">{{ item.location || '' }}</div>
+          <!--          <div class="td" style="width: 10%; line-height: 2vw">{{ item.alarmLevel }}</div>-->
+          <div class="td" style="width: 35%; line-height: 2vw">{{ item.alarmAction }}</div>
         </div>
       </vue3ScrollSeamless>
     </div>
-    <div class="center">
-      <ListItem :isRoot="false" v-for="i in centerData" :key="i.name" :itemData="i" />
+    <div class="center" ref="scrollNodeRef" @mouseenter="hover = true" @mouseleave="mouseleave">
+      <div v-masonry style="width: 100%; height: 100%" ref="masonryRef">
+        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" />
+      </div>
+      <div v-masonry style="width: 100%; height: 100%">
+        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" />
+      </div>
     </div>
   </div>
 </template>
-<script setup>
+<script setup lang="jsx">
 import Chart from '@/components/Chart/chart.vue';
 import thbg from '@/assets/chart/thbg.png';
 import trbg from '@/assets/chart/trbg.png';
+import TreeItem from './treeItem.vue';
 import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
-import ListItem from './listItem.vue';
 
-const successRateRef = ref(null);
-const tableData = ref([
-  {
-    time: '2016-06-05',
-    name: '带束层2',
-    lo: '半钢成型A4机台',
-    level: '次要',
-    item1: '设备离线'
-  },
-  {
-    time: '2016-06-05',
-    name: '带束层2',
-    lo: '半钢成型A4机台',
-    level: '次要',
-    item1: '设备离线'
-  },
-  {
-    time: '2016-06-05',
-    name: '带束层2',
-    lo: '半钢成型A4机台',
-    level: '次要',
-    item1: '设备离线'
-  },
-  {
-    time: '2016-06-05',
-    name: '带束层2',
-    lo: '半钢成型A4机台',
-    level: '次要',
-    item1: '设备离线'
-  },
-  {
-    time: '2016-06-05',
-    name: '带束层2',
-    lo: '半钢成型A4机台',
-    level: '次要',
-    item1: '设备离线'
-  },
-  {
-    time: '2016-06-05',
-    name: '带束层2',
-    lo: '半钢成型A4机台',
-    level: '次要',
-    item1: '设备离线'
-  }
-]);
-const centerData = ref({
-  isAmmeter: '1',
-  monitorCode: '111',
-  monitorName: '123',
-  deviceData: [
-    {
-      value: '11',
-      units: 'kg'
+import { getRealtimeStats, getLocationTree, getSuccessRateTrends } from '@/api/rfid/dashboard';
+
+function findParentsWithLocationType3(arr) {
+  const result = [];
+
+  function traverse(items) {
+    for (const item of items) {
+      let hasChildWith3 = false;
+
+      if (item.children && Array.isArray(item.children)) {
+        // 遍历 children，看是否有 locationType 为 "3"
+        for (const child of item.children) {
+          if (child.locationType === '3') {
+            hasChildWith3 = true;
+          }
+        }
+        // 递归继续遍历 children
+        traverse(item.children);
+      }
+
+      if (hasChildWith3) {
+        result.push(item);
+      }
     }
-  ],
-  children: [
-    {
-      isAmmeter: '1',
-      monitorCode: '111',
-      monitorName: '123',
-      deviceData: [
+  }
+
+  traverse(arr);
+  return result;
+}
+
+const mouseleave = () => {
+  setTimeout(() => {
+    hover.value = false;
+    scrollNodeRef.value.scrollTop -= 1;
+  }, 500);
+};
+
+const overview = ref({});
+const classOptions = ref({
+  limitMoveNum: 1,
+  step: 1,
+  hover: true
+});
+
+const masonryRef = ref(null);
+const scrollSeamlessRef = ref(null);
+const scrollNodeRef = ref(null);
+const successRateRef = ref(null);
+const hover = ref(false);
+const tableData = ref();
+const treeData = ref();
+const centerData = ref([]);
+
+const MenuItem = defineComponent({
+  name: 'MenuItem',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const { data } = props;
+    return () =>
+      data.children?.length > 0 ? (
+        <ElSubMenu
+          index={`${data.id}`}
+          v-slots={{
+            title: () => <span>{data.locationAlias}</span>
+          }}
+        >
+          {data.children.map((item, index) => {
+            return <MenuItem data={item} />;
+          })}
+        </ElSubMenu>
+      ) : (
+        <el-menu-item index={`${data.id}`}>{data.locationAlias}</el-menu-item>
+      );
+  }
+});
+
+function scrollToBottom(scrollNode, speed = 1) {
+  if (!scrollNode) return;
+
+  function step() {
+    const maxScroll = scrollNode.scrollHeight - scrollNode.clientHeight;
+    if (!hover.value && scrollNode.scrollTop < maxScroll) {
+      let top = Math.min(scrollNode.scrollTop + speed, maxScroll);
+      if (top > masonryRef.value.clientHeight) {
+        top -= masonryRef.value.clientHeight;
+      }
+      scrollNode.scrollTop = top;
+    }
+    requestAnimationFrame(step);
+  }
+
+  requestAnimationFrame(step);
+}
+
+const getData = () => {
+  getSuccessRateTrends().then((res) => {
+    successRateRef.value.setData({
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(0,0,0,.6)',
+        borderWidth: 0,
+        textStyle: {
+          color: '#fff'
+        },
+        formatter: function (params) {
+          let tooltipContent = '';
+          // 获取横轴坐标
+          let axisValue = params[0].axisValueLabel; // 获取x轴的标签
+
+          // 在每个数据后加上百分号
+          tooltipContent += `${axisValue}<br/>`;
+
+          params.forEach(function (param) {
+            // 在数值后添加 `%`，并保持圆点样式
+            tooltipContent += `${param.marker} ${param.seriesName}: ${param.value ? param.value + '%' : '无数据'}<br/>`;
+          });
+          return tooltipContent;
+        }
+      },
+      legend: {
+        top: '',
+        icon: 'path://M512.798285 0.399142C230.604561 0.399142 1.895927 229.107776 1.895927 511.301501s228.708634 510.902358 510.902358 510.902358 510.902358-228.708634 510.902358-510.902358S794.992009 0.399142 512.798285 0.399142z m0 878.712142C309.634769 879.111284 144.988501 714.465017 144.988501 511.301501S309.634769 143.491717 512.798285 143.491717s367.809784 164.646268 367.809784 367.809784-164.646268 367.809784-367.809784 367.809783z',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 10,
+        textStyle: {
+          color: '#fff',
+          fontSize: 8
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: res.data.map((item) => item.timePoint)
+      },
+      grid: {
+        top: 30,
+        left: 30,
+        right: 30,
+        bottom: 30
+      },
+      yAxis: {
+        splitLine: {
+          show: false
+        },
+        type: 'value'
+      },
+      series: [
         {
-          value: '11',
-          units: 'kg'
+          name: '今日',
+          data: res.data.map((item) => item.successRate),
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 5,
+          itemStyle: {
+            color: '#368CDC'
+          },
+          lineStyle: {
+            color: '#368CDC'
+          }
+        },
+        {
+          name: '昨日',
+          data: res.data.map((item) => item.yesterdaySuccessRate),
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 5,
+          itemStyle: {
+            color: '#39FFF4'
+          },
+          lineStyle: {
+            color: '#39FFF4'
+          }
         }
       ]
-    }
-  ]
-});
-onMounted(() => {
-  successRateRef.value.setData({
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(0,0,0,.6)',
-      borderWidth: 0,
-      textStyle: {
-        color: '#fff'
-      }
-    },
-    legend: {
-      top: '',
-      icon: 'path://M512.798285 0.399142C230.604561 0.399142 1.895927 229.107776 1.895927 511.301501s228.708634 510.902358 510.902358 510.902358 510.902358-228.708634 510.902358-510.902358S794.992009 0.399142 512.798285 0.399142z m0 878.712142C309.634769 879.111284 144.988501 714.465017 144.988501 511.301501S309.634769 143.491717 512.798285 143.491717s367.809784 164.646268 367.809784 367.809784-164.646268 367.809784-367.809784 367.809783z',
-      itemWidth: 10,
-      itemHeight: 10,
-      itemGap: 10,
-      textStyle: {
-        color: '#fff',
-        fontSize: 8
-      }
-    },
-    xAxis: {
-      type: 'category',
-      data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14', '1/15', '1/16', '1/17', '1/18']
-    },
-    grid: {
-      top: 30,
-      left: 30,
-      right: 30,
-      bottom: 30
-    },
-    yAxis: {
-      splitLine: {
-        show: false
-      },
-      type: 'value'
-    },
-    series: [
-      {
-        name: '需求数量',
-        data: [9, 8, 6.5, 7.2, 6.7, 7.4, 8.2, 9, 8, 6.5, 7.2, 6.7, 7.4, 8.2, 9, 8, 6.5, 5],
-        type: 'line',
-        symbol: 'circle',
-        symbolSize: 5,
-        itemStyle: {
-          color: '#368CDC'
-        },
-        lineStyle: {
-          color: '#368CDC'
-        }
-      },
-      {
-        name: '缺陷数量',
-        data: [3, 9, 4, 3, 11, 8, 10, 3, 9, 4, 3, 11, 8, 10, 3, 9, 4, 3],
-        type: 'line',
-        symbol: 'circle',
-        symbolSize: 5,
-        itemStyle: {
-          color: '#39FFF4'
-        },
-        lineStyle: {
-          color: '#39FFF4'
-        }
-      }
-    ]
+    });
   });
+  getRealtimeStats().then((res) => {
+    overview.value = res.data?.overview || {};
+    tableData.value = res.data?.alarmStats || [];
+  });
+  getLocationTree().then((res) => {
+    treeData.value = res.data;
+    centerData.value = findParentsWithLocationType3(res.data);
+    nextTick(() => {
+      scrollToBottom(scrollNodeRef.value, 2);
+    });
+  });
+};
+const getSocket = () => {
+  const socket = new WebSocket('ws://192.168.100.103:7181/ws');
+
+  socket.addEventListener('open', () => {
+    // console.log('✅ WebSocket 连接成功');
+  });
+
+  socket.addEventListener('message', (event) => {
+    // console.log(JSON.parse(event.data));
+  });
+
+  socket.addEventListener('close', () => {
+    setTimeout(() => {
+      getSocket();
+    }, 1000);
+  });
+
+  socket.addEventListener('error', (error) => {
+    // console.error('⚠️ WebSocket 出错:', error);
+  });
+};
+onMounted(() => {
+  getData();
+  getSocket();
 });
 </script>
 <style scoped lang="less">
@@ -252,6 +345,19 @@ onMounted(() => {
     height: 28.5%;
   }
 
+  .menu {
+    position: absolute;
+    top: 24%;
+    left: 2.8%;
+    width: 14.7%;
+    height: 69.5%;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   .scrollTable {
     position: absolute;
     top: 64.7%;
@@ -264,7 +370,7 @@ onMounted(() => {
     height: 3.3vw;
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    font-size: 1vw;
+    font-size: 0.9vw;
   }
 
   .tr {
@@ -288,6 +394,18 @@ onMounted(() => {
     left: 19.6%;
     width: 53%;
     height: 69%;
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: auto;
+    transition: all 1s;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 }
+
+/deep/ .el-menu {
+  border: none;
+}
 </style>

src/views/chart/treeItem.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="node" ref="container">
+    <!-- 主节点 -->
+    <div class="node-main" ref="nodeMain">
+      <div class="node-icon" ref="nodeIcon"></div>
+      <div class="node-title">{{ data.locationAlias }}</div>
+    </div>
+
+    <!-- 子节点 -->
+    <div class="children">
+      <div v-for="(child, index) in data.children" :key="index" class="child-item" :ref="(el) => (childRefs[index] = el)">
+        <div class="child-icon"></div>
+        <div class="child-info">
+          <div class="child-name">
+            工位名称: <span style="font-size: 12px">{{ child.locationAlias }}</span>
+          </div>
+          <div class="child-code">编码：{{ child.code }}</div>
+          <div class="child-time">时间：{{ child.time }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- SVG 折线 -->
+    <svg class="connector" ref="svg">
+      <polyline v-for="(line, index) in lines" :key="index" :points="line" stroke="#0156A5" fill="none" stroke-width="1" />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, nextTick, watchEffect } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+});
+
+const container = ref(null);
+const nodeIcon = ref(null);
+const childRefs = ref([]);
+const lines = reactive(Array(props.data.children.length).fill(''));
+const svg = ref(null);
+
+const updateLines = () => {
+  if (!container.value || !nodeIcon.value) return;
+  const containerRect = container.value.getBoundingClientRect();
+
+  childRefs.value.forEach((childEl, index) => {
+    if (!childEl) return;
+
+    const nodeRect = nodeIcon.value.getBoundingClientRect();
+    const childRect = childEl.getBoundingClientRect();
+
+    const startX = nodeRect.right - containerRect.left;
+    const startY = nodeRect.top + nodeRect.height / 2 - containerRect.top;
+    const endX = childRect.left - containerRect.left;
+    const endY = childRect.top + childRect.height / 2 - containerRect.top;
+
+    const midX = startX + (endX - startX) / 2;
+
+    lines[index] = `${startX},${startY} ${midX},${startY} ${midX},${endY} ${endX},${endY}`;
+  });
+
+  // 更新 SVG 大小
+  const rect = container.value.getBoundingClientRect();
+  svg.value.setAttribute('width', rect.width);
+  svg.value.setAttribute('height', rect.height);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    updateLines();
+  });
+});
+
+// 如果子节点数量或容器大小动态变化，可以监听更新折线
+watchEffect(() => {
+  nextTick(() => {
+    updateLines();
+  });
+});
+</script>
+
+<style scoped>
+.node {
+  color: #fff;
+  font-size: 12px;
+  width: 360px;
+  position: relative;
+  vertical-align: top;
+  display: flex;
+  align-items: stretch;
+  break-inside: avoid;
+  margin-bottom: 12px;
+  margin-left: 12px;
+}
+
+/* 主节点 */
+.node-main {
+  width: 100px;
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+}
+
+.node-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  background-image: url('@/assets/chart/906cbf773b3a37fc27e380375606fb27.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  border-radius: 4px;
+}
+
+.node-title {
+  position: absolute;
+  top: calc(50% + 30px);
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1vw;
+  font-weight: bold;
+}
+
+/* 子节点列表 */
+.children {
+  display: inline-block;
+  width: 260px;
+}
+
+.child-item {
+  background: rgba(0, 255, 180, 0.15);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  position: relative;
+  height: 75px;
+  margin-left: 20px;
+  background-image: url('@/assets/chart/efc42f5a4ed9491a16f6817d7fbe2336.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+}
+
+.child-item:last-child {
+  margin-bottom: 0;
+}
+
+.child-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  margin-right: 8px;
+  background-image: url('@/assets/chart/e06ce08b1a179471f9600f1d53ec3781.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  transform: translateY(-50%);
+}
+
+.child-name {
+  position: absolute;
+  top: 10px;
+  left: 74px;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.child-code,
+.child-time {
+  opacity: 0.9;
+  white-space: nowrap;
+}
+
+.child-code {
+  position: absolute;
+  top: 27px;
+  left: 74px;
+  font-size: 14px;
+}
+
+.child-time {
+  position: absolute;
+  top: 46px;
+  left: 74px;
+  font-size: 14px;
+}
+
+/* SVG 折线 */
+.connector {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+</style>

vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, loadEnv } from 'vite';
 import createPlugins from './vite/plugins';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import autoprefixer from 'autoprefixer'; // css自动添加兼容性前缀
 import path from 'path';
 
@@ -17,14 +18,15 @@ export default defineConfig(({ mode, command }) => {
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
     },
     // https://cn.vitejs.dev/config/#resolve-extensions
-    plugins: createPlugins(env, command === 'build'),
+    plugins: [...createPlugins(env, command === 'build'), vueJsx()],
     server: {
       host: '0.0.0.0',
       port: Number(env.VITE_APP_PORT),
       open: true,
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          target: 'http://localhost:8080',
+          // target: 'http://192.168.100.100:8080',
+          target: 'http://192.168.0.15:8080',
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')