1

package-lock.json

@@ -11,7 +11,7 @@
         "@amap/amap-jsapi-loader": "^1.0.1",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "echarts": "^5.4.0",
+        "echarts": "^5.6.0",
         "element-ui": "^2.14.1",
         "js-cookie": "3.0.1",
         "jsencrypt": "3.0.0-rc.1",

package.json

@@ -10,7 +10,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "echarts": "^5.4.0",
+    "echarts": "^5.6.0",
     "element-ui": "^2.14.1",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",

src/components/AppHeader.vue

@@ -3,6 +3,7 @@
 	<div class="app-header-time">{{time}}</div>
 	<div class="app-header-tit">
 		<!-- AI-Hub智能处理平台 -->
+		<img src="@/assets/images/headertit.png"/>
 	</div>
 	<!-- <div>
 		<img src="@/assets/images/header.png"/>
@@ -114,9 +115,11 @@
   color: #ffffff;position: relative;
 padding:28px 45px 0 45px;
   .app-header-time{padding-left: 2px;}
-  .app-header-tit{ background: url('~@/assets/images/headertit.png') no-repeat;
-  background-size: contain;width:601px;height: 36px;flex:1;
-  background-position: center center;}
+  .app-header-tit{ background: url('~@/assets/images/topline.png') no-repeat;
+  background-size: 601px 32px;width:601px;height: 36px;flex:1;
+  background-position: center bottom;
+	img{width:601px;height: 36px;margin: 0 auto;display: block;}
+  }
 }
 .avatar-container {
       margin-right: 30px;

src/permission.js

@@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register','/index']
 
 const isWhiteList = (path) => {
   return whiteList.some(pattern => isPathMatch(pattern, path))

src/settings.js

@@ -1,8 +1,9 @@
 module.exports = {
   title: 'AI-Hub智能处理平台',
   // urls: `http://114.99.127.243:52002`,
-  // urls: `https://lydp.qs163.cn`,
-   urls: `http://192.168.101.245:8099`,
+  urls: `http://47.99.82.249:5010`,
+   // urls: `http://192.168.101.245:8099`,
+    // urls: `http://192.168.101.52:8099`,
    // urls: `http://192.168.101.11:8089`,
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light

src/views/pages/components/center.vue

@@ -194,13 +194,13 @@ export default {
 		    markPoints() {
 				const icon = new AMap.Icon({
 				        image: require('@/assets/images/gjicob.png'), // 确保路径正确，根据实际情况调整
-				        size: new AMap.Size(55, 63), // 图标大小
-				        imageSize: new AMap.Size(55, 63) // 图标实际大小，如果图片本身大小与此不符，可以调整此属性以适应图片大小
+				        // size: new AMap.Size(58, 105), // 图标大小
+				        // imageSize: new AMap.Size(58, 105) // 图标实际大小，如果图片本身大小与此不符，可以调整此属性以适应图片大小
 				});
 				const icona = new AMap.Icon({
 				        image: require('@/assets/images/zcicob.png'), // 确保路径正确，根据实际情况调整
-				        size: new AMap.Size(90, 90), // 图标大小
-				        imageSize: new AMap.Size(90, 90) // 图标实际大小，如果图片本身大小与此不符，可以调整此属性以适应图片大小
+				        // size: new AMap.Size(90, 129), // 图标大小
+				        // imageSize: new AMap.Size(90, 129) // 图标实际大小，如果图片本身大小与此不符，可以调整此属性以适应图片大小
 				});
 		      this.mapData.forEach(item => {
 		        // 创建一个 Marker 实例：
@@ -269,6 +269,7 @@ export default {
 .fixtit{font-size: 14px;color: #FFFFFF;}
 </style>
 <style lang="scss" scoped>
+::v-deep .amap-info-sharp{display: none;}
 .flexc{display: flex;align-items: center;}
 .box{position: relative;width: 100%;height: 100%;}
 .overbtn{width: 83px;height: 112px;display: flex;flex-direction: column;align-items: center;box-sizing: border-box;position: absolute;left:16px;top:20px;z-index: 3;background-color: rgba(27,130,183,0.12);;

src/views/pages/components/morepieChart.vue

@@ -1,118 +1,124 @@
 <template>
-	<div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	import chartMixin from '@/mixins/ChartMixin';
-//灰色部分统一设置颜色
-var placeHolderStyle = {
-  normal: {
-    color: '#001428'
+import * as echarts from 'echarts';
+import chartMixin from '@/mixins/ChartMixin';
+export default {
+  mixins: [chartMixin],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+	chartData: {
+	  type: Object,
+	  required: true
+	}
+  },
+  data() {
+    return {
+      chart: null,
+	  time:null,
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+	var that=this;
+	this.$nextTick(() => {
+	  this.initChart()
+	  that.setOptions(that.chartData) 
+	  // this.time=setInterval(()=>{
+		 //  that.chart.clear()
+		 //  that.setOptions(that.chartData) 
+	  // },30000)
+	})
   },
-  emphasis: {
-    color: '#001428'
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+	
+	if (this.time) {
+	  clearInterval(this.time);
+	  this.time = null;
+	}
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+		this.setOptions(this.chartData) 
+    },
+	setOptions({ data,name,num,color} = {}) {
+	  this.chart.setOption({
+			color:color,
+			tooltip: {
+		      trigger: 'item'
+		    },
+		    legend: {
+		      show:false,
+		    },
+			graphic: [{
+			        type: 'text',
+			        left: 'center',
+			        top: 'center',
+			        z: 10,
+			        style: {
+			            fill: color[0],
+			            text: num+'%',
+			            fontSize: 16,
+						fontWeight: '500'
+			        }
+			    }],
+		    series: [
+		      {
+		        name: name,
+		        type: 'pie',
+		        radius: ['85%', '100%'],
+		        avoidLabelOverlap: false,
+		        label: {
+		          show: false,
+		          position: 'center'
+		        },
+		        emphasis: {
+		          label: {
+		            show: false,
+		            fontSize: 40,
+		            fontWeight: 'bold'
+		          }
+		        },
+		        labelLine: {
+		          show: false
+		        },
+		        data: [   
+		              //itemSyle是单项的背景颜色设置。
+		                { value: 50, itemStyle: { color: color[0] } },
+		                { value: 50, itemStyle: { color: '#001428' } },
+		        ],
+		      },
+		    ]
+	  },true)
+	}
   }
 }
-	export default {
-		mixins: [chartMixin],
-		props: {
-			className: {
-				type: String,
-				default: 'chart'
-			},
-			width: {
-				type: String,
-				default: '100%'
-			},
-			height: {
-				type: String,
-				default: '100%'
-			},
-			chartData: {
-				type: Array,
-				required: true
-			}
-		},
-		data() {
-			return {
-				chart: null,
-				option:{},
-				colorArr: [
-				        "#06C770", "#FFAB2B", "#F59FBC", "#3FBCEF", "#7CC623", "#FF6969",
-				],
-				//圆环中心位置
-				positionArr: [
-				        ["18%", "25%"],
-				        ["50%", "25%"],
-				        ["82%", "25%"],
-				        ["18%", "75%"],
-				        ["50%", "75%"],
-				        ["82%", "75%"],
-				      ],
-			}
-		},
-		watch: {
-			chartData: {
-				deep: true,
-				handler(val) {
-					this.setOptions(val)
-				}
-			}
-		},
-		mounted() {
-			this.$nextTick(() => {
-				this.initChart()
-			})
-		},
-		beforeDestroy() {
-			if (!this.chart) {
-				return
-			}
-			this.chart.dispose()
-			this.chart = null
-		},
-		methods: {
-			initChart() {
-				this.chart = echarts.init(this.$el, 'macarons')
-				this.setOptions(this.chartData)
-			},
-			setOptions(chartData) {
-				let seriesArr = chartData.map((item, index) => {
-					return {
-						name: item.name,
-						type: "pie",
-						radius: [30, 35], // 圆环饼图内外直径的大小
-						center: this.positionArr[index], // 饼图的位置——正中心
-						label: {
-							show: true, // 显示饼图每块区域的名称
-							position: "center", // 标签文字显示在圆环中间
-							color: this.colorArr[index], // 每个饼图的标签文字颜色
-						},
-						labelLine: {
-							show: false, // 隐藏名字和图之间默认的一条线
-						},
-						data: [{
-								value: item.value,
-								name: item.value + "%", //lable显示的文字内容
-								itemStyle: {
-									color: this.colorArr[index], //该区域对应渐变色
-								}
-							},
-							{
-								// name: "空白",
-								// name: item.value + "%" + "\n\n" + item.name, //lable显示的文字内容
-								value: 100-item.value,
-								itemStyle: placeHolderStyle,
-							},
-						],
-					};
-				})
-				this.option.series = seriesArr
-				this.chart.setOption(this.option);
-			}
-		}
-	}
 </script>
 <style lang="less" scoped>
 

src/views/pages/components/moreringChart.vue

@@ -76,12 +76,7 @@
 			} = {}) {
 				let total = parseInt(ddj) + parseInt(zdj) + parseInt(gdj);
 				this.chart.setOption({
-					color: [
-						"#0096FF",
-						"#00FFFF",
-						"#FFBB37",
-						"#7948EA"
-					],
+					color: ["#0096FF","#00FFFF","#FFBB37","#7948EA"],
 					graphic: [ // 使用 graphic 组件添加文本
 						{
 							type: 'text', // 文本类型
@@ -90,28 +85,18 @@
 							style: {
 								text: ['{a|总告警数\n}{b|146}{c|次}'], // 多行文本，每行之间用 \n 分隔
 								// fontSize: 14, // 字体大小
-								fill: '#FFFFFF', // 第一行文本颜色
 								rich: { // 富文本功能，用于设置不同样式的文本段
 									a: {
-										fontSize: 14,color: '#FFFFFF',align: 'center',lineHeight: 20
+										fontSize: 14,fill: '#FFFFFF',align: 'center',lineHeight: 20
 									},
 									c: {
-										fontSize: 10,color: '#FFFFFF',align: 'center',lineHeight: 20
+										fontSize: 10,fill: '#FFFFFF',align: 'center',lineHeight: 20
 									},
 									// 需要渐变高亮的文字样式
 									b: { 
 										fontSize: 14,
 									    align: 'center',
-										color:'#00F8F9',
-										color: {
-												type: 'linear',
-												x: 0,
-												y: 0,
-												x2: 1,
-												y2: 0,
-												colorStops: [{offset: 0,color: '#00F8F9'}, {offset: 1,color: '#FFFFFF'}]
-											},
-										
+										fill:'#00F8F9',
 									},
 								}
 							},
@@ -138,6 +123,7 @@
 							type: "pie",
 							radius: ["85%", "90%"],
 							center: ["50%", "34%"],
+							startAngle: -90, // 设置起始角度为-90度，实现逆时针
 							//环的位置
 							// label: {
 							// 	show: false,
@@ -174,6 +160,7 @@
 							type: "pie",
 							radius: ["70%", "75%"],
 							center: ["50%", "34%"],
+							startAngle: -90, // 设置起始角度为-90度，实现逆时针
 							labelLine: {
 								normal: {
 									show: false,
@@ -205,6 +192,7 @@
 							type: "pie",
 							radius: ["55%", "60%"],
 							center: ["50%", "34%"],
+							startAngle: -90, // 设置起始角度为-90度，实现逆时针
 							labelLine: {
 								normal: {
 									show: false,

src/views/pages/components/table - 副本.vue

@@ -1,42 +1,65 @@
 <template>
-  <div class="scrolling-data-container">
-    <!-- 固定顶部 -->
-    <div class="fixed-header">
-      <h3>数据展示</h3>
-    </div>
-    
-    <!-- 滚动数据区域 -->
-    <div class="scrolling-data-wrapper" ref="scrollWrapper">
-      <div 
-        class="data-item" 
-        v-for="(item, index) in visibleData" 
-        :key="item.id"
-        :style="{ height: itemHeight + 'px' }"
-      >
-        <el-card shadow="hover" class="data-card">
-          <div class="item-content">
-            <span class="item-title">{{ item.title }}</span>
-            <span class="item-value">{{ item.value }}</span>
-          </div>
-        </el-card>
-      </div>
-    </div>
+  <div class="scrolling-table-container">
+    <el-table
+      :data="visibleData"
+      :height="tableHeight"
+	  stripe
+      style="width: 100%;background: transparent;"
+      header-row-class-name="fixed-header"
+      ref="scrollTable"
+    >
+	<el-table-column
+	align='center'
+	  prop="date"
+	  label="告警任务"
+	  width="100">
+	</el-table-column>
+	<el-table-column
+	align='center'
+	  prop="name"
+	  label="告警内容"
+	  width="90">
+			  <template slot-scope="scope">
+			             <span :class="[scope.row.name == '1'||scope.row.name == '5'? 'coa' : scope.row.name == '2'? 'cob':scope.row.name == '3'||scope.row.name == '4'? 'coc'  : '']"  >{{ statusFormat(scope.row.name,statusOptions)}}</span>
+			    </template>
+	</el-table-column>
+	<el-table-column
+	align='center'
+	  prop="createTime"
+	  label="告警时间">
+	  <!-- <template slot-scope="scope">
+	    <span>{{ parseTime(scope.row.createTime) }}</span>
+	  </template> -->
+	</el-table-column>
+
+    </el-table>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'ScrollingData',
+  name: 'ScrollingTable',
   props: {
     data: {
       type: Array,
-      required: true
+      required: true,
+      default: () => []
     },
-    itemHeight: {
+	statusOptions:{
+		type: Array,
+		required: true,
+		default: () => []
+	},
+    // columns: {
+    //   type: Array,
+    //   required: true,
+    //   default: () => []
+    // },
+    rowHeight: {
       type: Number,
-      default: 28
+      default: 28 // ElementUI默认行高
     },
-    visibleCount: {
+    visibleRows: {
       type: Number,
       default: 5
     },
@@ -54,18 +77,19 @@ export default {
       currentIndex: 0,
       scrollTimer: null,
       refreshTimer: null,
-      isScrolling: false
+      isScrolling: false,
+      tableHeight: null,
     }
   },
   computed: {
     visibleData() {
-      // 如果数据不足5条，直接显示所有数据
-      if (this.data.length <= this.visibleCount) {
+      // 如果数据不足visibleRows条，直接显示所有数据
+      if (this.data.length <= this.visibleRows) {
         return this.data
       }
       
       // 计算当前应该显示的数据范围
-      let endIndex = this.currentIndex + this.visibleCount
+      let endIndex = this.currentIndex + this.visibleRows
       if (endIndex > this.data.length) {
         // 如果超出数组长度，从开头补足
         return [
@@ -78,18 +102,32 @@ export default {
     }
   },
   mounted() {
-    this.initScroll()
-    this.initRefresh()
+    // this.calculateTableHeight()
+    // this.initScroll()
+    // this.initRefresh()
+    
+    // 监听窗口变化重新计算高度
+    window.addEventListener('resize', this.calculateTableHeight)
   },
   beforeDestroy() {
     this.clearTimers()
+    window.removeEventListener('resize', this.calculateTableHeight)
   },
   methods: {
+	  statusFormat(row, list) {
+	    return this.selectDictLabel(list, row);
+	  },
+    calculateTableHeight() {
+      // 计算表格高度 = 表头高度 + 可见行数 * 行高
+      const headerHeight = 48 // ElementUI默认表头高度
+      this.tableHeight = headerHeight + (this.visibleRows * this.rowHeight)
+    },
+    
     initScroll() {
       this.clearScrollTimer()
       
-      // 如果数据不足5条，不需要滚动
-      if (this.data.length <= this.visibleCount) {
+      // 如果数据不足visibleRows条，不需要滚动
+      if (this.data.length <= this.visibleRows) {
         return
       }
       
@@ -102,16 +140,16 @@ export default {
       if (this.isScrolling) return
       
       this.isScrolling = true
-      const wrapper = this.$refs.scrollWrapper
+      const tableBody = this.$refs.scrollTable.$el.querySelector('.el-table__body-wrapper')
       
       // 添加过渡效果
-      wrapper.style.transition = 'transform 0.5s ease-in-out'
-      wrapper.style.transform = `translateY(-${this.itemHeight}px)`
+      tableBody.style.transition = 'transform 0.5s ease-in-out'
+      tableBody.style.transform = `translateY(-${this.rowHeight}px)`
       
       // 动画结束后更新数据
       setTimeout(() => {
-        wrapper.style.transition = 'none'
-        wrapper.style.transform = 'translateY(0)'
+        tableBody.style.transition = 'none'
+        tableBody.style.transform = 'translateY(0)'
         
         // 更新当前索引
         this.currentIndex = (this.currentIndex + 1) % this.data.length
@@ -154,55 +192,48 @@ export default {
       // 数据更新时重置索引
       this.currentIndex = 0
       this.initScroll()
+    },
+    visibleRows() {
+      this.calculateTableHeight()
     }
   }
 }
 </script>
 
-<style scoped>
-.scrolling-data-container {
+<style scoped lang="scss">
+	.coa{color: #FFBB37;}
+	.cob{color: #0096FF;}
+	.coc{color: #00FFFF;}
+::v-deep .el-table tr{background-color: transparent;color: #fff;}
+::v-deep .el-table td{border:none;font-size: 14px;height: 28px;padding: 0;}
+::v-deep .el-table .el-table__header-wrapper th{background-color: #011C39 !important;color: #fff;padding: 2px 0;height: 27px;box-sizing: border-box;font-size: 14px;border: none;z-index: 10;}
+::v-deep .el-table__row--striped{background: rgba(185, 223, 250, 0.05) !important}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{background-color: transparent;}
+::v-deep  .el-table .current-row > td {
+  background-color: transparent !important; /* 或者你想要的颜色 */
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover{
+	background-color: transparent !important; /* 或者你想要的颜色 */
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
+	background-color: transparent !important; /* 或者你想要的颜色 */
+}
+::v-deep .el-table::before{height: 0;}
+.scrolling-table-container {
   width: 100%;
-  height: 100%;
-  position: relative;
   overflow: hidden;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
 }
 
+/* 固定表头样式 */
 .fixed-header {
-  padding: 15px;
-  background-color: #f5f7fa;
-  border-bottom: 1px solid #ebeef5;
   position: sticky;
   top: 0;
   z-index: 10;
+  // background-color: #fff;
 }
 
-.scrolling-data-wrapper {
-  width: 100%;
-}
-
-.data-item {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 10px;
-}
-
-.data-card {
-  width: 100%;
-}
-
-.item-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.item-title {
-  font-weight: bold;
-}
-
-.item-value {
-  color: #409eff;
+/* 表格滚动区域样式 */
+.el-table__body-wrapper {
+  overflow: hidden;
 }
 </style>

src/views/pages/components/table.vue

@@ -1,200 +1,183 @@
 <template>
-  <div class="scrolling-table-container">
+  <div class="auto-scroll-container">
+	  <!-- :height="tableHeight" :height="tableData.length>4?tableHeight:'auto'"-->
     <el-table
-      :data="visibleData"
-      :height="tableHeight"
-	  stripe
-      style="width: 100%;background: transparent;"
-      header-row-class-name="fixed-header"
       ref="scrollTable"
+      :data="tableData"
+      
+      :height="tableHeight"
+      @mouseenter.native="pauseScroll"
+      @mouseleave.native="resumeScroll"
+      @scroll.passive="handleScroll"
+      :style="'width: 100%;background: transparent;max-height:'+tableHeight"
     >
-	<el-table-column
-	align='center'
-	  prop="date"
-	  label="告警任务"
-	  width="100">
-	</el-table-column>
-	<el-table-column
-	align='center'
-	  prop="name"
-	  label="告警内容"
-	  width="90">
-			  <template slot-scope="scope">
-			             <span :class="[scope.row.name == '1'||scope.row.name == '5'? 'coa' : scope.row.name == '2'? 'cob':scope.row.name == '3'||scope.row.name == '4'? 'coc'  : '']"  >{{ statusFormat(scope.row.name,statusOptions)}}</span>
-			    </template>
-	</el-table-column>
-	<el-table-column
-	align='center'
-	  prop="createTime"
-	  label="告警时间">
-	  <!-- <template slot-scope="scope">
-	    <span>{{ parseTime(scope.row.createTime) }}</span>
-	  </template> -->
-	</el-table-column>
-
+      <el-table-column :cell-style="{ whiteSpace: 'pre-line' }" v-for="(ite,idx) in columns" :key="idx" align='center' :prop="ite.prop" :label="ite.label"
+      	:width="ite.width">
+      	<template slot-scope="scope" >
+      	            <span v-if="ite.type&&ite.type=='katype'" :class="[scope.row.name == '1'||scope.row.name == '5'? 'coa' : scope.row.name == '2'? 'cob':scope.row.name == '3'||scope.row.name == '4'? 'coc'  : '']"  >{{ statusFormat(scope.row.name,statusOptions)}}</span>
+				   	
+				   	<div v-else-if="ite.type&&ite.type=='hh'">
+				   		<div>{{ scope.row[ite.prop]}}</div>
+				   		<div>{{ scope.row['time']}}</div>
+				   	</div>
+      			   <div v-else >{{ scope.row[ite.prop] }}</div>
+      	  </template>
+      </el-table-column>
+	  
     </el-table>
+    
+    <!-- 可选的滚动控制按钮 -->
+    <!-- <div class="scroll-controls">
+      <el-button @click="scrollToTop">滚动到顶部</el-button>
+      <el-button @click="toggleAutoScroll">
+        {{ autoScrollEnabled ? '暂停滚动' : '继续滚动' }}
+      </el-button>
+    </div> -->
   </div>
 </template>
 
 <script>
 export default {
-  name: 'ScrollingTable',
+  name: 'AutoScrollTable',
   props: {
+    columns: {
+      type: Array,
+      required: true
+    },
     data: {
       type: Array,
-      required: true,
-      default: () => []
+      required: true
     },
-	statusOptions:{
+	statusOptions: {
 		type: Array,
-		required: true,
 		default: () => []
 	},
-    // columns: {
-    //   type: Array,
-    //   required: true,
-    //   default: () => []
-    // },
-    rowHeight: {
-      type: Number,
-      default: 28 // ElementUI默认行高
-    },
-    visibleRows: {
-      type: Number,
-      default: 5
-    },
-    refreshInterval: {
-      type: Number,
-      default: 30000 // 30秒
-    },
-    scrollInterval: {
-      type: Number,
-      default: 3000 // 3秒滚动一次
-    }
+	tableHeight:{
+		type: String,
+		default: '100px' // ElementUI默认行高
+	},
+	scrollTop:{
+		type: Number,
+		default: 36 // 滚动的高度
+	}
   },
   data() {
     return {
-      currentIndex: 0,
-      scrollTimer: null,
-      refreshTimer: null,
-      isScrolling: false,
-      tableHeight: null,
-    }
-  },
-  computed: {
-    visibleData() {
-      // 如果数据不足visibleRows条，直接显示所有数据
-      if (this.data.length <= this.visibleRows) {
-        return this.data
-      }
-      
-      // 计算当前应该显示的数据范围
-      let endIndex = this.currentIndex + this.visibleRows
-      if (endIndex > this.data.length) {
-        // 如果超出数组长度，从开头补足
-        return [
-          ...this.data.slice(this.currentIndex),
-          ...this.data.slice(0, endIndex - this.data.length)
-        ]
-      } else {
-        return this.data.slice(this.currentIndex, endIndex)
-      }
+      tableData: [],
+      autoScrollEnabled: true,
+      scrollInterval: null,
+      dataRefreshInterval: null,
+      isUserScrolling: false,
+      lastScrollTime: 0,
     }
   },
   mounted() {
-    // this.calculateTableHeight()
-    // this.initScroll()
-    // this.initRefresh()
-    
-    // 监听窗口变化重新计算高度
-    window.addEventListener('resize', this.calculateTableHeight)
+    this.loadData();
+    // this.startAutoScroll();
+    // this.setupDataRefresh();
   },
   beforeDestroy() {
-    this.clearTimers()
-    window.removeEventListener('resize', this.calculateTableHeight)
+    this.stopAutoScroll();
+    this.clearDataRefresh();
   },
   methods: {
-	  statusFormat(row, list) {
-	    return this.selectDictLabel(list, row);
-	  },
-    calculateTableHeight() {
-      // 计算表格高度 = 表头高度 + 可见行数 * 行高
-      const headerHeight = 48 // ElementUI默认表头高度
-      this.tableHeight = headerHeight + (this.visibleRows * this.rowHeight)
-    },
-    
-    initScroll() {
-      this.clearScrollTimer()
-      
-      // 如果数据不足visibleRows条，不需要滚动
-      if (this.data.length <= this.visibleRows) {
-        return
+	statusFormat(row, list) {
+	  return this.selectDictLabel(list, row);
+	},
+    async loadData() {
+      try {
+        // const data = await this.fetchData();
+        this.tableData = this.data;
+      } catch (error) {
+        console.error('加载数据失败:', error);
       }
-      
-      this.scrollTimer = setInterval(() => {
-        this.scrollToNext()
-      }, this.scrollInterval)
     },
-    
-    scrollToNext() {
-      if (this.isScrolling) return
+    startAutoScroll() {
+      this.stopAutoScroll();
       
-      this.isScrolling = true
-      const tableBody = this.$refs.scrollTable.$el.querySelector('.el-table__body-wrapper')
+      const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
+      if (!tableWrapper) return;
       
-      // 添加过渡效果
-      tableBody.style.transition = 'transform 0.5s ease-in-out'
-      tableBody.style.transform = `translateY(-${this.rowHeight}px)`
+      // 初始滚动位置设为0
+      tableWrapper.scrollTop = 0;
       
-      // 动画结束后更新数据
-      setTimeout(() => {
-        tableBody.style.transition = 'none'
-        tableBody.style.transform = 'translateY(0)'
+      this.scrollInterval = setInterval(() => {
+        if (!this.autoScrollEnabled || this.isUserScrolling) return;
         
-        // 更新当前索引
-        this.currentIndex = (this.currentIndex + 1) % this.data.length
+        const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
+        if (!tableWrapper) return;
         
-        // 强制重新渲染以确保DOM更新
-        this.$nextTick(() => {
-          this.isScrolling = false
-        })
-      }, 500)
+        // 如果已经滚动到底部，回到顶部
+        if (tableWrapper.scrollTop + tableWrapper.clientHeight >= tableWrapper.scrollHeight - 2) {
+          tableWrapper.scrollTop = 0;
+        } else {
+          tableWrapper.scrollTop += 2;
+        }
+      }, 100);
     },
-    
-    initRefresh() {
-      this.clearRefreshTimer()
-      this.refreshTimer = setInterval(() => {
-        this.$emit('refresh-data')
-      }, this.refreshInterval)
+    stopAutoScroll() {
+      if (this.scrollInterval) {
+        clearInterval(this.scrollInterval);
+        this.scrollInterval = null;
+      }
     },
-    
-    clearScrollTimer() {
-      if (this.scrollTimer) {
-        clearInterval(this.scrollTimer)
-        this.scrollTimer = null
+    pauseScroll() {
+      this.autoScrollEnabled = false;
+    },
+    resumeScroll() {
+      // 如果用户正在手动滚动，不恢复自动滚动
+      if (!this.isUserScrolling) {
+        this.autoScrollEnabled = true;
       }
     },
-    
-    clearRefreshTimer() {
-      if (this.refreshTimer) {
-        clearInterval(this.refreshTimer)
-        this.refreshTimer = null
+    toggleAutoScroll() {
+      this.autoScrollEnabled = !this.autoScrollEnabled;
+      if (this.autoScrollEnabled) {
+        this.isUserScrolling = false;
       }
     },
-    
-    clearTimers() {
-      this.clearScrollTimer()
-      this.clearRefreshTimer()
-    }
-  },
-  watch: {
-    data() {
-      // 数据更新时重置索引
-      this.currentIndex = 0
-      this.initScroll()
+    handleScroll({ scrollTop }) {
+      // 记录最后一次滚动时间
+      this.lastScrollTime = Date.now();
+      
+      // 如果用户手动滚动，暂停自动滚动
+      if (Math.abs(scrollTop - this.lastScrollTop) > 5) {
+        this.isUserScrolling = true;
+        this.autoScrollEnabled = false;
+      }
+      
+      this.lastScrollTop = scrollTop;
+      
+      // 如果用户停止滚动超过2秒，恢复自动滚动
+      clearTimeout(this.scrollResumeTimeout);
+      this.scrollResumeTimeout = setTimeout(() => {
+        this.isUserScrolling = false;
+        this.autoScrollEnabled = true;
+      }, 2000);
     },
-    visibleRows() {
-      this.calculateTableHeight()
+    scrollToTop() {
+      const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
+      if (tableWrapper) {
+        tableWrapper.scrollTop = 0;
+      }
+    },
+    scrollTo(position) {
+      const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
+      if (tableWrapper) {
+        tableWrapper.scrollTop = position;
+      }
+    },
+    setupDataRefresh() {
+      this.clearDataRefresh();
+      this.dataRefreshInterval = setInterval(() => {
+        this.loadData();
+      }, 60000); // 每分钟刷新一次
+    },
+    clearDataRefresh() {
+      if (this.dataRefreshInterval) {
+        clearInterval(this.dataRefreshInterval);
+        this.dataRefreshInterval = null;
+      }
     }
   }
 }
@@ -204,9 +187,10 @@ export default {
 	.coa{color: #FFBB37;}
 	.cob{color: #0096FF;}
 	.coc{color: #00FFFF;}
-::v-deep .el-table tr{background-color: transparent;color: #fff;}
-::v-deep .el-table td{border:none;font-size: 14px;height: 28px;padding: 0;}
-::v-deep .el-table .el-table__header-wrapper th{background-color: #011C39 !important;color: #fff;padding: 2px 0;height: 27px;box-sizing: border-box;font-size: 14px;border: none;z-index: 10;}
+.aimgs{min-height: 80px;width: 100%;display: flex;align-items: center;justify-content: center;}
+::v-deep .el-table tr{background-color: transparent;color: #FFFFFF;}
+::v-deep .el-table td{border:none;font-size: 14px;height: 36px;padding: 0;}
+::v-deep .el-table .el-table__header-wrapper th{background-color: transparent !important;color: #fff;padding: 2px 0;height: 36px;box-sizing: border-box;font-size: 14px;border: none;z-index: 10;font-weight: bold;}
 ::v-deep .el-table__row--striped{background: rgba(185, 223, 250, 0.05) !important}
 ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{background-color: transparent;}
 ::v-deep  .el-table .current-row > td {
@@ -223,17 +207,32 @@ export default {
   width: 100%;
   overflow: hidden;
 }
+::v-deep .el-table__header{width: 100% !important;height: 100%;}
+::v-deep .el-table__body{width: 100% !important;height: 100%;}
+::v-deep .el-table .cell{padding: 0 2px !important;word-break: break-word;}
+.btn{min-width: 82px;display: inline-flex;align-items: center;justify-content: center;font-size: 14px;padding: 0 2px;box-sizing: border-box;height: 23px;color: #FFFFFF;border-radius: 12px;
+	&.btna{background: #009944;}
+	&.btnb{background: #D85600;}
+}
+.auto-scroll-container {
+  position: relative;
+}
 
-/* 固定表头样式 */
-.fixed-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  // background-color: #fff;
+.scroll-controls {
+  margin-top: 10px;
+  text-align: center;
+}
+/* 隐藏滚动条 gutter */
+::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+}
+::v-deep .el-table th.gutter {
+  display: none;
 }
 
-/* 表格滚动区域样式 */
-.el-table__body-wrapper {
-  overflow: hidden;
+/* 确保表头和表体对齐 */
+::v-deep .el-table colgroup col[name='gutter'] {
+  width: 0 !important;
 }
+
 </style>

src/views/pages/index.vue

@@ -108,13 +108,51 @@
 			<Box title="通道告警比重分析">
 				<!-- /柱状图 -->
 				<div class="flext bgc">
-					<div style="width: 390px;height: 193px;">
+					<div style="width: 390px;height: 193px;flex:0 0 auto;">
 						<ltbar-chart :chart-data="ltbarconut"></ltbar-chart>
 					</div>
 					<!-- 仪表盘 -->
-					<div style="height: 193px;flex: 1;">
+					<!-- <div style="height: 193px;flex: 1;">
 						<morepie-chart :chart-data="looppieData"></morepie-chart>
-					</div>	
+					</div> -->
+					<div class="morepie">
+						<div class="pieboxs">
+							<div class="piebox">
+								<pie-charts :chart-data="pieDataa"  width="52px" height='52px'></pie-charts>
+							</div>
+							<div class="tit">{{pieDataa.name}}</div>
+						</div>
+						<div class="pieboxs">
+							<div class="piebox">
+								<pie-charts :chart-data="pieDatab"  width="52px" height='52px'></pie-charts>
+							</div>
+							<div class="tit">{{pieDatab.name}}</div>
+						</div>
+						<div class="pieboxs">
+							<div class="piebox">
+								<pie-charts :chart-data="pieDatac"  width="52px" height='52px'></pie-charts>
+							</div>
+							<div class="tit">{{pieDatac.name}}</div>
+						</div>
+						<div class="pieboxs">
+							<div class="piebox">
+								<pie-charts :chart-data="pieDatad"  width="52px" height='52px'></pie-charts>
+							</div>
+							<div class="tit">{{pieDatad.name}}</div>
+						</div>
+						<div class="pieboxs">
+							<div class="piebox">
+								<pie-charts :chart-data="pieDatae"  width="52px" height='52px'></pie-charts>
+							</div>
+							<div class="tit">{{pieDatae.name}}</div>
+						</div>
+						<div class="pieboxs">
+							<div class="piebox">
+								<pie-charts :chart-data="pieDataf"  width="52px" height='52px'></pie-charts>
+							</div>
+							<div class="tit">{{pieDataf.name}}</div>
+						</div>
+					</div>
 				</div>
 			</Box>
 		</div>
@@ -127,7 +165,8 @@
 			<!-- 图表 -->
 			<Box title="告警记录">
 				<div class="bgc mb33 scrollable-data-container h171">
-					<box-table :data="dataList" :statusOptions="statusOptions"  @refresh-data="fetchData"></box-table>
+					<!-- <box-table :data="dataList" :statusOptions="statusOptions"  @refresh-data="fetchData"></box-table> -->
+					<box-table :data="dataList" :columns="columna" tableHeight='170px' :statusOptions="statusOptions"></box-table>
 					<!-- <box-table :data="dataList"   @refresh-data="fetchData"></box-table> -->
 				</div>
 			</Box>
@@ -160,13 +199,14 @@ import Box from './components/box'
 import lineChart from "./components/lineChart.vue"
 import moreringChart from "./components/moreringChart.vue"
 import ltbarChart from "./components/ltbarChart.vue"
-import morepieChart from "./components/morepieChart.vue"
+// import morepieChart from "./components/morepieChart.vue"
+import pieCharts from "./components/morepieChart.vue"
 import jbbarChart from "./components/jbbarChart.vue"
 import radarChart from "./components/radarChart.vue"
 import boxTable from "./components/table.vue"
 import boxCenter from "./components/center.vue"
 export default {
-	components:{Box,lineChart,moreringChart,ltbarChart,morepieChart,jbbarChart,radarChart,boxTable,boxCenter
+	components:{Box,lineChart,moreringChart,ltbarChart,pieCharts,jbbarChart,radarChart,boxTable,boxCenter
 	},
   data(){
     return {
@@ -206,16 +246,22 @@ export default {
 			  ],
 			  statusOptions:[{dictValue:"1",dictLabel:'烟雾告警'},{dictValue:"2",dictLabel:'徘徊告警'},{dictValue:"3",dictLabel:'陌生人告警'},{dictValue:"4",dictLabel:'越线告警'},{dictValue:"5",dictLabel:'火焰告警'},],
 			allData:[],// 所有数据
-			tableColumns: [
-			        { prop: 'date', label: '日期', width: '100' },
-			        { prop: 'name', label: '姓名', width: '90' },
-			        { prop: 'address', label: '地址' }
+			columna: [
+			        { prop: 'date', label: '告警任务', width: '30%' },
+			        { prop: 'name', label: '告警内容', width: '25%',type:'katype'},
+			        { prop: 'createTime', label: '告警时间',width: '45%', }
 			      ],
 			currentIndex: 0, // 当前显示数据的起始索引
 			refreshInterval: null, // 刷新数据的定时器
 			scrollInterval: null, // 滚动数据的定时器
 			isScrolling: false ,// 是否正在滚动
-			annexList:[[{tit:'全部',id:0,},{tit:'办公区',id:1,}],[{tit:'车位',id:2,},{tit:'大厅',id:3,}]]
+			annexList:[[{tit:'全部',id:0,},{tit:'办公区',id:1,}],[{tit:'车位',id:2,},{tit:'大厅',id:3,}]],
+			pieDataa:{data:[{value:'25',name:'运行'}],name:"通道1",num:25,color:['#06C770']},
+			pieDatab:{data:[{value:'25',name:'运行'}],name:"通道2",num:25,color:['#FFAB2B']},
+			pieDatac:{data:[{value:'25',name:'运行'}],name:"通道3",num:25,color:['#F59FBC']},
+			pieDatad:{data:[{value:'25',name:'运行'}],name:"通道4",num:25,color:['#3FBCEF']},
+			pieDatae:{data:[{value:'25',name:'运行'}],name:"通道5",num:25,color:['#7CC623']},
+			pieDataf:{data:[{value:'25',name:'运行'}],name:"通道6",num:25,color:['#FF6969']},
 	}
   },
   mounted(){
@@ -304,6 +350,7 @@ export default {
 .flexc{display: flex;align-items: center;}
 .flex1{flex: 1;}
 .flext{display: flex;align-items: flex-start;}
+.flexcw{display: flex;flex-wrap: wrap;}
 .f14{font-size: 14px;}
 .mb5{margin-bottom: 5px;}
 .cof{color: #fff;}
@@ -361,6 +408,15 @@ export default {
 	  }
   }
 }
+.morepie{display: flex;flex-wrap: wrap;align-items: center;}
+.pieboxs{
+	margin-left: 27px;padding-top: 3px;
+	.piebox{width: 74px;height: 74px;background: url("~@//assets/images/piebg.png") no-repeat;position: relative;display: flex;align-items: center;justify-content: center;background-size: 100% 100%;
+			
+	}
+	.tit{font-weight: bold;font-size: 12px;color: #FFFFFF;text-align: center;}
+}
+
 ::v-deep .el-select .el-icon-arrow-up::before {
   content: "\e78f"; /* 这里使用 Element UI 的 iconfont 图标，例如一个自定义的 iconfont 图标 */