Browse Source

添加图表及文献列表页面

yangg 8 months ago
parent
commit
1fd2dd1520
52 changed files with 1034 additions and 15 deletions
  1. 1 1
      .env.development
  2. 0 0
      dist/index.html
  3. 0 1
      dist/static/css/chunk-1fc7ba22.efe80884.css
  4. 1 0
      dist/static/css/chunk-20bc854d.4e775eab.css
  5. 0 0
      dist/static/css/chunk-29d491e2.630719da.css
  6. 0 0
      dist/static/css/chunk-4c2b6424.775a21e3.css
  7. 0 0
      dist/static/css/chunk-683feb49.13a7e89e.css
  8. 1 0
      dist/static/css/chunk-994a158a.dddc02b6.css
  9. 0 0
      dist/static/js/app.068e0a60.js
  10. 0 0
      dist/static/js/chunk-0ec56e2a.c368a9b5.js
  11. 0 0
      dist/static/js/chunk-10bfc27e.8fef1b6d.js
  12. 0 0
      dist/static/js/chunk-11ff1a32.20ad57e2.js
  13. 0 0
      dist/static/js/chunk-138f7583.91058c09.js
  14. 0 0
      dist/static/js/chunk-1fc7ba22.d36b1906.js
  15. 0 0
      dist/static/js/chunk-20bc854d.aeb8f6eb.js
  16. 0 0
      dist/static/js/chunk-23008ed8.9c1daac9.js
  17. 0 0
      dist/static/js/chunk-29d491e2.8f0b1dbf.js
  18. 0 0
      dist/static/js/chunk-2d0d3705.c016b399.js
  19. 0 0
      dist/static/js/chunk-35464144.753a989d.js
  20. 0 0
      dist/static/js/chunk-386d37cb.df026891.js
  21. 0 0
      dist/static/js/chunk-43013872.afcd79b0.js
  22. 0 0
      dist/static/js/chunk-44eee83d.f250a92a.js
  23. 0 0
      dist/static/js/chunk-4ac7f82e.91f00c3e.js
  24. 1 1
      dist/static/js/chunk-4c2b6424.fa10b857.js
  25. 0 0
      dist/static/js/chunk-52f685c2.36b43701.js
  26. 0 0
      dist/static/js/chunk-5a3bdf57.170b8380.js
  27. 0 0
      dist/static/js/chunk-61ace01d.6f815030.js
  28. 0 0
      dist/static/js/chunk-647b97bd.5b1f425d.js
  29. 1 1
      dist/static/js/chunk-683feb49.9ea29ed7.js
  30. 0 0
      dist/static/js/chunk-6a80e4ca.3e37fa95.js
  31. 0 0
      dist/static/js/chunk-6ddf6871.aa7f3174.js
  32. 0 0
      dist/static/js/chunk-708604c0.2ed6816a.js
  33. 0 0
      dist/static/js/chunk-712c0160.d6721a50.js
  34. 0 0
      dist/static/js/chunk-74560560.90b9853f.js
  35. 0 0
      dist/static/js/chunk-7a88741c.f83d6069.js
  36. 0 0
      dist/static/js/chunk-7dbc1954.78960d49.js
  37. 0 0
      dist/static/js/chunk-9235c1ae.d253b77c.js
  38. 0 0
      dist/static/js/chunk-994a158a.c32db0c5.js
  39. 0 0
      dist/static/js/chunk-a577192a.31e844e2.js
  40. 0 0
      dist/static/js/chunk-d09dbc1a.93bb1cb4.js
  41. 0 0
      dist/static/js/chunk-d4c547ca.ef4bd719.js
  42. 0 0
      dist/static/js/chunk-ec55d346.e3336082.js
  43. 0 0
      dist/static/js/chunk-libs.403cd4c6.js
  44. 1 0
      package.json
  45. 31 0
      src/api/knowledge.js
  46. 7 0
      src/router/index.js
  47. 312 1
      src/views/dashboard/admin/components/LineChart.vue
  48. 109 1
      src/views/dashboard/admin/components/PieChart.vue
  49. 233 0
      src/views/dashboard/admin/components/instruChart.vue
  50. 43 0
      src/views/dashboard/admin/index.vue
  51. 129 9
      src/views/middPage/index.vue
  52. 164 0
      src/views/middPage/list.vue

+ 1 - 1
.env.development

@@ -2,5 +2,5 @@
 ENV = 'development'
 port = 8080
 # base api
-VUE_APP_BASE_API = 'http://183.195.216.54:8084'
+VUE_APP_BASE_API = 'http://192.168.1.200:8084'
 #192.168.1.200

File diff suppressed because it is too large
+ 0 - 0
dist/index.html


+ 0 - 1
dist/static/css/chunk-1fc7ba22.efe80884.css

@@ -1 +0,0 @@
-.midd-page[data-v-1b93a10c]{padding:20px}.el-icon-edit[data-v-1b93a10c]{font-size:14px;color:#409eff}[data-v-1b93a10c] .model-gen-1{background-color:#e6f3ff!important}[data-v-1b93a10c] .model-gen-1.el-table__cell{background-color:#e6f3ff!important;color:#333!important}[data-v-1b93a10c] .model-gen-2{background-color:#f0e6ff!important}[data-v-1b93a10c] .model-gen-2.el-table__cell{background-color:#f0e6ff!important;color:#333!important}

+ 1 - 0
dist/static/css/chunk-20bc854d.4e775eab.css

@@ -0,0 +1 @@
+.midd-page[data-v-7df62f00]{padding:20px}.el-icon-edit[data-v-7df62f00]{font-size:14px;color:#409eff}[data-v-7df62f00] .model-gen-1{background-color:#e6f3ff!important}[data-v-7df62f00] .model-gen-1.el-table__cell{background-color:#e6f3ff!important;color:#333!important}[data-v-7df62f00] .model-gen-2{background-color:#f0e6ff!important}[data-v-7df62f00] .model-gen-2.el-table__cell{background-color:#f0e6ff!important;color:#333!important}.header[data-v-7df62f00]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:15px 0}.h_left p[data-v-7df62f00]{margin-top:0}.search-container[data-v-7df62f00]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.search-box[data-v-7df62f00]{width:350px}.custom-search-input[data-v-7df62f00] :deep(.el-input__inner){height:40px;line-height:40px;border-right:none;border-radius:4px 0 0 4px}.custom-search-input[data-v-7df62f00] :deep(.el-input-group__append){padding:0;border:none;background-color:transparent}.custom-search-input[data-v-7df62f00] :deep(.el-input-group__append .el-button){height:40px;padding:0 20px;border-radius:0 4px 4px 0;margin:0}.custom-search-input[data-v-7df62f00] :deep(.el-input__inner:hover){border-color:#dcdfe6}.custom-search-input[data-v-7df62f00] :deep(.el-input__inner:focus){border-color:#409eff}

File diff suppressed because it is too large
+ 0 - 0
dist/static/css/chunk-29d491e2.630719da.css


+ 0 - 0
dist/static/css/chunk-05d6d838.775a21e3.css → dist/static/css/chunk-4c2b6424.775a21e3.css


+ 0 - 0
dist/static/css/chunk-c5d7799a.13a7e89e.css → dist/static/css/chunk-683feb49.13a7e89e.css


+ 1 - 0
dist/static/css/chunk-994a158a.dddc02b6.css

@@ -0,0 +1 @@
+.gpu-list[data-v-00f3c91c]{padding:20px}

File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.068e0a60.js


+ 0 - 0
dist/static/js/chunk-0ec56e2a.c737d5f5.js → dist/static/js/chunk-0ec56e2a.c368a9b5.js


+ 0 - 0
dist/static/js/chunk-10bfc27e.12ed87f2.js → dist/static/js/chunk-10bfc27e.8fef1b6d.js


+ 0 - 0
dist/static/js/chunk-11ff1a32.c73ffeae.js → dist/static/js/chunk-11ff1a32.20ad57e2.js


+ 0 - 0
dist/static/js/chunk-138f7583.06639515.js → dist/static/js/chunk-138f7583.91058c09.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-1fc7ba22.d36b1906.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-20bc854d.aeb8f6eb.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-23008ed8.9c1daac9.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-29d491e2.8f0b1dbf.js


+ 0 - 0
dist/static/js/chunk-2d0d3705.a914c017.js → dist/static/js/chunk-2d0d3705.c016b399.js


+ 0 - 0
dist/static/js/chunk-35464144.d27d55e4.js → dist/static/js/chunk-35464144.753a989d.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-386d37cb.df026891.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-43013872.afcd79b0.js


+ 0 - 0
dist/static/js/chunk-44eee83d.a720824b.js → dist/static/js/chunk-44eee83d.f250a92a.js


+ 0 - 0
dist/static/js/chunk-4ac7f82e.09d62afb.js → dist/static/js/chunk-4ac7f82e.91f00c3e.js


File diff suppressed because it is too large
+ 1 - 1
dist/static/js/chunk-4c2b6424.fa10b857.js


+ 0 - 0
dist/static/js/chunk-52f685c2.870f9a40.js → dist/static/js/chunk-52f685c2.36b43701.js


+ 0 - 0
dist/static/js/chunk-5a3bdf57.ed8c6add.js → dist/static/js/chunk-5a3bdf57.170b8380.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-61ace01d.6f815030.js


+ 0 - 0
dist/static/js/chunk-647b97bd.9d9c57cf.js → dist/static/js/chunk-647b97bd.5b1f425d.js


+ 1 - 1
dist/static/js/chunk-c5d7799a.12c9c1ea.js → dist/static/js/chunk-683feb49.9ea29ed7.js

@@ -1 +1 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-c5d7799a"],{"1db4":function(t,s,a){"use strict";a.r(s);var e=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"wscn-http404-container"},[a("div",{staticClass:"wscn-http404"},[t._m(0),a("div",{staticClass:"bullshit"},[a("div",{staticClass:"bullshit__oops"},[t._v("OOPS!")]),t._m(1),a("div",{staticClass:"bullshit__headline"},[t._v(t._s(t.message))]),a("div",{staticClass:"bullshit__info"},[t._v("Please check that the URL you entered is correct, or click the button below to return to the homepage.")]),a("a",{staticClass:"bullshit__return-home",attrs:{href:""}},[t._v("Back to home")])])])])},c=[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"pic-404"},[e("img",{staticClass:"pic-404__parent",attrs:{src:a("a36b"),alt:"404"}}),e("img",{staticClass:"pic-404__child left",attrs:{src:a("26fc"),alt:"404"}}),e("img",{staticClass:"pic-404__child mid",attrs:{src:a("26fc"),alt:"404"}}),e("img",{staticClass:"pic-404__child right",attrs:{src:a("26fc"),alt:"404"}})])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"bullshit__info"},[t._v("All rights reserved "),a("a",{staticStyle:{color:"#20a0ff"},attrs:{href:"https://wallstreetcn.com",target:"_blank"}},[t._v("wallstreetcn")])])}],i={name:"Page404",computed:{message:function(){return"The webmaster said that you can not enter this page..."}}},l=i,n=(a("207f"),a("2877")),r=Object(n["a"])(l,e,c,!1,null,"26fcd89f",null);s["default"]=r.exports},"207f":function(t,s,a){"use strict";a("ba6f")},"26fc":function(t,s,a){t.exports=a.p+"static/img/404_cloud.0f4bc32b.png"},a36b:function(t,s,a){t.exports=a.p+"static/img/404.a57b6f31.png"},ba6f:function(t,s,a){}}]);
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-683feb49"],{"1db4":function(t,s,a){"use strict";a.r(s);var e=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"wscn-http404-container"},[a("div",{staticClass:"wscn-http404"},[t._m(0),a("div",{staticClass:"bullshit"},[a("div",{staticClass:"bullshit__oops"},[t._v("OOPS!")]),t._m(1),a("div",{staticClass:"bullshit__headline"},[t._v(t._s(t.message))]),a("div",{staticClass:"bullshit__info"},[t._v("Please check that the URL you entered is correct, or click the button below to return to the homepage.")]),a("a",{staticClass:"bullshit__return-home",attrs:{href:""}},[t._v("Back to home")])])])])},c=[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"pic-404"},[e("img",{staticClass:"pic-404__parent",attrs:{src:a("a36b"),alt:"404"}}),e("img",{staticClass:"pic-404__child left",attrs:{src:a("26fc"),alt:"404"}}),e("img",{staticClass:"pic-404__child mid",attrs:{src:a("26fc"),alt:"404"}}),e("img",{staticClass:"pic-404__child right",attrs:{src:a("26fc"),alt:"404"}})])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"bullshit__info"},[t._v("All rights reserved "),a("a",{staticStyle:{color:"#20a0ff"},attrs:{href:"https://wallstreetcn.com",target:"_blank"}},[t._v("wallstreetcn")])])}],i={name:"Page404",computed:{message:function(){return"The webmaster said that you can not enter this page..."}}},l=i,n=(a("207f"),a("2877")),r=Object(n["a"])(l,e,c,!1,null,"26fcd89f",null);s["default"]=r.exports},"207f":function(t,s,a){"use strict";a("ba6f")},"26fc":function(t,s,a){t.exports=a.p+"static/img/404_cloud.0f4bc32b.png"},a36b:function(t,s,a){t.exports=a.p+"static/img/404.a57b6f31.png"},ba6f:function(t,s,a){}}]);

+ 0 - 0
dist/static/js/chunk-6a80e4ca.362948f8.js → dist/static/js/chunk-6a80e4ca.3e37fa95.js


+ 0 - 0
dist/static/js/chunk-6ddf6871.c1d88fe4.js → dist/static/js/chunk-6ddf6871.aa7f3174.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-708604c0.2ed6816a.js


+ 0 - 0
dist/static/js/chunk-712c0160.dfc875d0.js → dist/static/js/chunk-712c0160.d6721a50.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-74560560.90b9853f.js


+ 0 - 0
dist/static/js/chunk-7a88741c.f846ec42.js → dist/static/js/chunk-7a88741c.f83d6069.js


+ 0 - 0
dist/static/js/chunk-7dbc1954.68f50541.js → dist/static/js/chunk-7dbc1954.78960d49.js


+ 0 - 0
dist/static/js/chunk-9235c1ae.e55620d3.js → dist/static/js/chunk-9235c1ae.d253b77c.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-994a158a.c32db0c5.js


+ 0 - 0
dist/static/js/chunk-a577192a.9de68e85.js → dist/static/js/chunk-a577192a.31e844e2.js


+ 0 - 0
dist/static/js/chunk-d09dbc1a.78dd439d.js → dist/static/js/chunk-d09dbc1a.93bb1cb4.js


+ 0 - 0
dist/static/js/chunk-d4c547ca.27e627c1.js → dist/static/js/chunk-d4c547ca.ef4bd719.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-ec55d346.e3336082.js


+ 0 - 0
dist/static/js/chunk-libs.d88329b4.js → dist/static/js/chunk-libs.403cd4c6.js


+ 1 - 0
package.json

@@ -15,6 +15,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@amcharts/amcharts5": "^5.10.7",
     "@handsontable-pro/vue": "^3.1.1",
     "@handsontable/vue": "^14.1.0",
     "@jiaminghi/data-view": "^2.10.0",

+ 31 - 0
src/api/knowledge.js

@@ -302,4 +302,35 @@ export function configDelete(data) {
       method: 'post',
       data
     })
+  } 
+
+  /* 获取GPU数据 /machines/gpu-info/*/
+
+  export function gpu_info(data) {
+    return request({
+      url: '/machines/gpu-info/',
+      method: 'get',
+      data
+    })
+  } 
+
+
+  /* 列表 literature-data/list/ */
+
+  export function GET_list(data) {
+    return request({
+      url: 'literature-data/list/',
+      method: 'post',
+      data
+    })
+  } 
+  
+  /* /literature-data/sync/ */
+
+  export function GET_sync(data) {
+    return request({
+      url: '/literature-data/sync/',
+      method: 'post',
+      data
+    })
   } 

+ 7 - 0
src/router/index.js

@@ -355,10 +355,17 @@ export const asyncRoutes = [
         meta: { title: '应用配置',  noCache: true ,roles: ['admin']}
       },
       /* MiddleFuntion */
+      {
+        path: 'middPage/list',
+        component: () => import('@/views/middPage/list.vue'),
+        name: 'MiddleFuntion',
+        meta: { title: '文献列表',  noCache: true ,roles: ['admin']}
+      },
       {
         path: 'middPage/index',
         component: () => import('@/views/middPage/index.vue'),
         name: 'MiddleFuntion',
+        hidden:true,
         meta: { title: '中间数据',  noCache: true ,roles: ['admin']}
       }
     ]

+ 312 - 1
src/views/dashboard/admin/components/LineChart.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div :class="className" :style="{height:height,width:width}" />
 </template>
 
@@ -133,3 +133,314 @@ export default {
   }
 }
 </script>
+ -->
+
+ <template>
+  <div ref="chartDiv" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import { gpu_info } from "@/api/knowledge";
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+export default {
+  name: "AmAreaChart",
+  data() {
+    return {
+      chart: null,
+      root: null,
+      series: null,
+      xAxis: null,
+      data: [],
+      timer: null,
+      lastValue: 15,
+      visits: 10,
+      isDestroyed: false,
+      isAnimating: false,
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.startLiveData();
+  },
+  beforeDestroy() {
+    this.cleanupResources();
+  },
+  methods: {
+    initChart() {
+      try {
+        // 保存 root 引用
+        const root = (this.root = am5.Root.new(this.$refs.chartDiv));
+        root.setThemes([am5themes_Animated.new(root)]);
+
+        // 创建图表
+        this.chart = root.container.children.push(
+          am5xy.XYChart.new(root, {
+            panX: true,
+            panY: true,
+            wheelX: "panX",
+            wheelY: "zoomX",
+            pinchZoomX: true,
+          })
+        );
+
+        // 创建Y轴
+        let yAxis = this.chart.yAxes.push(
+          am5xy.ValueAxis.new(root, {
+            renderer: am5xy.AxisRendererY.new(root, {}),
+            min: 0,
+            max: 100,
+          })
+        );
+
+        // 创建X轴
+        this.xAxis = this.chart.xAxes.push(
+          am5xy.DateAxis.new(root, {
+            baseInterval: { timeUnit: "second", count: 1 },
+            renderer: am5xy.AxisRendererX.new(root, {}),
+          })
+        );
+
+        // 修改主数据系列的配置
+        this.series = this.chart.series.push(
+          am5xy.SmoothedXLineSeries.new(root, {
+            name: "Series",
+            xAxis: this.xAxis,
+            yAxis: yAxis,
+            valueYField: "value",
+            valueXField: "date",
+            connect: true,
+            tension: 0.8, // 对应原代码中的 tensionX
+            stroke: am5.color("#FF425C"), // 使用相同的颜色
+            strokeWidth: 10,
+            tooltip: am5.Tooltip.new(root, {
+              labelText: "{valueY}",
+            }),
+          })
+        );
+
+        // 设置渐变填充
+        this.series.fills.template.setAll({
+          visible: true,
+          fillOpacity: 1,
+          fill: am5.LinearGradient.new(root, {
+            stops: [
+              {
+                offset: 0,
+                color: am5.color("#FF425C"),
+                opacity: 0.2,
+              },
+              {
+                offset: 1,
+                color: am5.color("#FF425C"),
+                opacity: 0.9,
+              },
+            ],
+            rotation: 90,
+          }),
+        });
+
+        // 添加前端的圆形标记
+        this.bulletSeries = this.chart.series.push(
+          am5xy.LineSeries.new(root, {
+            name: "Bullet",
+            xAxis: this.xAxis,
+            yAxis: yAxis,
+            valueYField: "value",
+            valueXField: "date",
+          })
+        );
+
+        this.bulletSeries.bullets.push((root) => {
+          return am5.Bullet.new(root, {
+            sprite: am5.Circle.new(root, {
+              radius: 5,
+              fill: am5.color("#FF425C"),
+              fillOpacity: 1,
+            }),
+          });
+        });
+        // 确保填充区域在线条下方显示
+        this.series.fills.template.setAll({
+          visible: true,
+          fillOpacity: 0.5,
+        });
+
+        /* // 修改bullet系列,添加平滑属性
+        this.bulletSeries = this.chart.series.push(
+          am5xy.LineSeries.new(root, {
+            name: "Series",
+            xAxis: this.xAxis,
+            yAxis: yAxis,
+            valueYField: "value",
+            valueXField: "date",
+            connect: true,
+            tension: 0.5,
+          })
+        );
+
+        // 修复: 使用箭头函数保持this上下文,并使用外部的root引用
+        this.bulletSeries.bullets.push(() => {
+          return am5.Bullet.new(root, {
+            sprite: am5.Circle.new(root, {
+              radius: 5,
+              fill: am5.color(0xff0000),
+            }),
+          });
+        });
+ */
+        // 初始化数据
+        this.series.data.setAll(this.data);
+        this.bulletSeries.data.setAll([]);
+
+        // 启用图表动画
+        this.series.appear(1000);
+        this.chart.appear(1000, 100);
+      } catch (error) {
+        console.error("初始化图表时出错:", error);
+      }
+    },
+    // 新增资源清理方法
+    async cleanupResources() {
+      this.isDestroyed = true;
+      this.isAnimating = false;
+
+      // 清理定时器
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+
+      // 等待所有动画完成
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      try {
+        // 按特定顺序清理图表资源
+        if (this.bullet) {
+          this.bullet.dispose();
+          this.bullet = null;
+        }
+
+        if (this.bulletSeries && !this.bulletSeries.isDisposed()) {
+          this.bulletSeries.dispose();
+          this.bulletSeries = null;
+        }
+
+        if (this.series && !this.series.isDisposed()) {
+          this.series.dispose();
+          this.series = null;
+        }
+
+        if (this.xAxis && !this.xAxis.isDisposed()) {
+          this.xAxis.dispose();
+          this.xAxis = null;
+        }
+
+        if (this.chart && !this.chart.isDisposed()) {
+          this.chart.dispose();
+          this.chart = null;
+        }
+
+        if (this.root && !this.root.isDisposed()) {
+          this.root.dispose();
+          this.root = null;
+        }
+      } catch (e) {
+        console.error("清理图表资源时出错:", e);
+      }
+    },
+
+    // 修改数据更新方法
+    async startLiveData() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+
+      let lastTimestamp = Date.now();
+
+      this.timer = setInterval(async () => {
+        // 多重状态检查
+        if (
+          this.isDestroyed ||
+          this.isAnimating ||
+          !this.root ||
+          this.root.isDisposed() ||
+          !this.series ||
+          this.series.isDisposed()
+        ) {
+          clearInterval(this.timer);
+          return;
+        }
+
+        try {
+          const response = await gpu_info();
+          const gpuData = response.data.data[0];
+          const currentTime = Date.now();
+
+          if (currentTime - lastTimestamp < 900) {
+            return;
+          }
+
+          // 安全地更新数据
+          if (!this.isDestroyed && this.series && !this.series.isDisposed()) {
+            const newValue = gpuData.temperature;
+
+            // 数据平滑处理
+            this.lastValue =
+              Math.abs(newValue - this.lastValue) > 10
+                ? this.lastValue + (newValue > this.lastValue ? 2 : -2)
+                : newValue;
+
+            this.data.push({
+              date: currentTime,
+              value: this.lastValue,
+            });
+
+            if (this.data.length > 100) {
+              this.data.shift();
+            }
+
+            this.series.data.setAll(this.data);
+            this.updateBullet();
+
+            // 安全地更新x轴
+            if (this.xAxis && !this.xAxis.isDisposed()) {
+              this.xAxis.zoomToDates(
+                new Date(this.data[0].date),
+                new Date(this.data[this.data.length - 1].date)
+              );
+            }
+          }
+
+          lastTimestamp = currentTime;
+        } catch (error) {
+          console.error("Failed to fetch GPU info:", error);
+        }
+      }, 2000);
+    },
+
+    // 修改bullet更新方法
+    updateBullet() {
+      if (
+        this.isDestroyed ||
+        !this.root ||
+        this.root.isDisposed() ||
+        !this.bulletSeries ||
+        this.bulletSeries.isDisposed() ||
+        !this.data.length
+      ) {
+        return;
+      }
+
+      try {
+        const lastDataPoint = this.data[this.data.length - 1];
+        this.bulletSeries.data.setAll([lastDataPoint]);
+      } catch (e) {
+        console.error("更新bullet时出错:", e);
+      }
+    },
+  },
+};
+</script>

+ 109 - 1
src/views/dashboard/admin/components/PieChart.vue

@@ -102,4 +102,112 @@ export default {
   max-width: 800px;
   margin: 0 auto;
 }
-</style>
+</style>
+<!-- <template>
+  <div ref="chartDiv" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+export default {
+  name: 'AmLineChart',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      root: null
+    }
+  },
+  mounted() {
+    this.initChart();
+  },
+  beforeDestroy() {
+    if (this.root) {
+      this.root.dispose();
+    }
+  },
+  methods: {
+    initChart() {
+      // Create root element
+      this.root = am5.Root.new(this.$refs.chartDiv);
+
+      // Set themes
+      this.root.setThemes([am5themes_Animated.new(this.root)]);
+
+      // Create chart
+      this.chart = this.root.container.children.push(
+        am5xy.XYChart.new(this.root, {
+          panX: true,
+          panY: true,
+          wheelX: "panX",
+          wheelY: "zoomX",
+          pinchZoomX: true
+        })
+      );
+
+      // Add cursor
+      this.chart.set("cursor", am5xy.XYCursor.new(this.root, {
+        behavior: "none"
+      }));
+
+      // Create axes
+      const xAxis = this.chart.xAxes.push(
+        am5xy.CategoryAxis.new(this.root, {
+          categoryField: "category",
+          renderer: am5xy.AxisRendererX.new(this.root, {}),
+          tooltip: am5.Tooltip.new(this.root, {})
+        })
+      );
+
+      const yAxis = this.chart.yAxes.push(
+        am5xy.ValueAxis.new(this.root, {
+          renderer: am5xy.AxisRendererY.new(this.root, {})
+        })
+      );
+
+      // Add series
+      const series = this.chart.series.push(
+        am5xy.LineSeries.new(this.root, {
+          name: "Series",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "value",
+          categoryXField: "category",
+          tooltip: am5.Tooltip.new(this.root, {
+            labelText: "{valueY}"
+          })
+        })
+      );
+
+      // Add animated bullets
+      series.bullets.push(() => {  // 修改这里:使用箭头函数
+        return am5.Bullet.new(this.root, {
+          locationY: 0,
+          sprite: am5.Circle.new(this.root, {
+            radius: 5,
+            fill: series.get("fill"),
+            stroke: this.root.interfaceColors.get("background"),
+            strokeWidth: 2
+          })
+        });
+      });
+
+      // Set data
+      xAxis.data.setAll(this.data);
+      series.data.setAll(this.data);
+
+      // Make stuff animate on load
+      series.appear(1000);
+      this.chart.appear(1000, 100);
+    }
+  }
+}
+</script> -->

+ 233 - 0
src/views/dashboard/admin/components/instruChart.vue

@@ -0,0 +1,233 @@
+<!-- <template>
+    <div ref="chartDiv" style="width: 100%; height: 100%"></div>
+  </template>
+  
+  <script>
+  import * as am5 from "@amcharts/amcharts5";
+  import * as am5radar from "@amcharts/amcharts5/radar";
+  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+  
+  export default {
+    name: 'AmGaugeChart',
+    props: {
+      data: {
+        type: Object,
+        default: () => ({ value: 0 })
+      }
+    },
+    data() {
+      return {
+        chart: null,
+        root: null
+      }
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (this.root) {
+        this.root.dispose();
+      }
+    },
+    methods: {
+      initChart() {
+        // 创建根元素
+        this.root = am5.Root.new(this.$refs.chartDiv);
+  
+        // 设置主题
+        this.root.setThemes([am5themes_Animated.new(this.root)]);
+  
+        // 创建图表
+        this.chart = this.root.container.children.push(
+          am5radar.RadarChart.new(this.root, {
+            panX: false,
+            panY: false,
+            startAngle: -180,
+            endAngle: 0
+          })
+        );
+  
+        // 创建轴
+        const axisRenderer = am5radar.AxisRendererCircular.new(this.root, {
+          innerRadius: -10,
+          strokeOpacity: 1,
+          strokeWidth: 15,
+          strokeGradient: am5.LinearGradient.new(this.root, {
+            rotation: 0,
+            stops: [
+              { color: am5.color(0x19d228) },
+              { color: am5.color(0xf4fb16) },
+              { color: am5.color(0xf6d32b) },
+              { color: am5.color(0xfb7116) }
+            ]
+          })
+        });
+  
+        const xAxis = this.chart.xAxes.push(
+            am5radar.ValueAxis.new(this.root, {
+            maxDeviation: 0,
+            min: 0,
+            max: 100,
+            strictMinMax: true,
+            renderer: axisRenderer
+          })
+        );
+  
+        // 添加仪表盘指针
+        const axisDataItem = xAxis.makeDataItem({});
+        const clockHand = am5radar.ClockHand.new(this.root, {
+          pinRadius: am5.percent(20),
+          radius: am5.percent(100),
+          bottomWidth: 40
+        });
+        clockHand.pin.setAll({
+          fillOpacity: 0,
+          strokeOpacity: 0.5,
+          stroke: am5.color(0x000000),
+          strokeWidth: 1,
+          strokeDasharray: [2, 2]
+        });
+        clockHand.hand.setAll({
+          fillOpacity: 0,
+          strokeOpacity: 0.5,
+          stroke: am5.color(0x000000),
+          strokeWidth: 0.5
+        });
+  
+        axisDataItem.set("value", 0);
+        axisDataItem.set("clockHand", clockHand);
+        xAxis.createAxisRange(axisDataItem);
+  
+        // 设置数据
+        axisDataItem.set("value", this.data.value);
+  
+        // 添加标签
+        const label = this.chart.radarContainer.children.push(
+          am5.Label.new(this.root, {
+            centerX: am5.percent(50),
+            textAlign: "center",
+            centerY: am5.percent(50),
+            fontSize: "3em"
+          })
+        );
+  
+        // 更新标签文本
+        label.set("text", Math.round(this.data.value).toString());
+  
+        // 动画效果
+        this.chart.appear(1000, 100);
+      }
+    }
+  }
+  </script> -->
+  <template>
+    <div ref="chartDiv" style="width: 100%; height: 300px;"></div>
+  </template>
+  
+  <script>
+  import * as am5 from "@amcharts/amcharts5/index";
+  import * as am5xy from "@amcharts/amcharts5/xy";
+  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+  
+  export default {
+    name: 'LineChart',
+    data() {
+      return {
+        chart: null,
+        root: null
+      }
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (this.root) {
+        this.root.dispose();
+      }
+    },
+    methods: {
+      initChart() {
+        // Create root element
+        this.root = am5.Root.new(this.$refs.chartDiv);
+  
+        // Set themes
+        this.root.setThemes([am5themes_Animated.new(this.root)]);
+  
+        // Create chart
+        this.chart = this.root.container.children.push(
+          am5xy.XYChart.new(this.root, {
+            panX: false,
+            panY: false,
+            wheelX: "none",
+            wheelY: "none"
+          })
+        );
+  
+        // Create axes
+        let xAxis = this.chart.xAxes.push(
+          am5xy.CategoryAxis.new(this.root, {
+            renderer: am5xy.AxisRendererX.new(this.root, {}),
+            categoryField: "category"
+          })
+        );
+  
+        let yAxis = this.chart.yAxes.push(
+          am5xy.ValueAxis.new(this.root, {
+            renderer: am5xy.AxisRendererY.new(this.root, {})
+          })
+        );
+  
+        // Create series
+        let series = this.chart.series.push(
+          am5xy.LineSeries.new(this.root, {
+            name: "Series",
+            xAxis: xAxis,
+            yAxis: yAxis,
+            valueYField: "value",
+            categoryXField: "category",
+            tooltip: am5.Tooltip.new(this.root, {
+              labelText: "{valueY}"
+            })
+          })
+        );
+  
+        series.strokes.template.setAll({
+          strokeWidth: 3,
+          strokeColor: am5.color(0x00BFFF)
+        });
+  
+        series.bullets.push(function() {
+          return am5.Bullet.new(this.root, {
+            sprite: am5.Circle.new(this.root, {
+              radius: 5,
+              fill: am5.color(0x00BFFF)
+            })
+          });
+        });
+  
+        // Set data
+        let data = [
+          { category: "A", value: 10 },
+          { category: "B", value: 30 },
+          { category: "C", value: 20 },
+          { category: "D", value: 40 },
+          { category: "E", value: 30 },
+          { category: "F", value: 35 },
+          { category: "G", value: 25 }
+        ];
+  
+        xAxis.data.setAll(data);
+        series.data.setAll(data);
+  
+        // Add cursor
+        this.chart.set("cursor", am5xy.XYCursor.new(this.root, {
+          behavior: "none"
+        }));
+  
+        // Make stuff animate on load
+        series.appear(1000);
+        this.chart.appear(1000, 100);
+      }
+    }
+  }
+  </script>

+ 43 - 0
src/views/dashboard/admin/index.vue

@@ -4,6 +4,22 @@
 
     <!--  <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
     <el-row :gutter="20">
+      <!-- <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfixs">
+            <span></span>
+          </div>
+         <instruChart style="height: 150px"/>
+        </el-card>
+      </el-col> -->
+      <el-col style="margin-bottom: 20px;" :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfixs">
+            <span>GPU温度</span>
+          </div>
+          <LineChart :data="chartData" style="height: 350px"></LineChart>
+        </el-card>
+      </el-col>
       <el-col :span="16">
         <el-card class="box-card">
           <div slot="header" class="clearfixs header_sel">
@@ -24,6 +40,7 @@
               </el-select>
             </div>
           </div>
+          <!-- <LineChart :data="chartData" style="height: 350px"></LineChart> -->
           <BarChart :kenValue="kenVal" style="height: 350px"></BarChart>
         </el-card>
       </el-col>
@@ -71,6 +88,7 @@ import TodoList from "./components/TodoList";
 import BoxCard from "./components/BoxCard";
 import TagCloud from "./components/tagCloud.vue";
 import RecentFile from "./components/recentFile.vue";
+import  instruChart from "./components/instruChart.vue"
 import { listBuckets, structure_count } from "@/api/knowledge";
 import { mapState } from 'vuex';
 
@@ -107,6 +125,7 @@ export default {
     BoxCard,
     TagCloud,
     RecentFile,
+    instruChart
   },
   data() {
     return {
@@ -132,6 +151,30 @@ export default {
       kenVal: {},
       refreshInterval: null,
       isOnDashboard: false,
+      chartData: [
+      /* { date: "00:00", value: 12 },
+        { date: "01:00", value: 14 },
+        { date: "02:00", value: 8 },
+        { date: "03:00", value: 15 },
+        { date: "04:00", value: 22 },
+        { date: "05:00", value: 9 },
+        { date: "06:00", value: 12 },
+        { date: "07:00", value: 16 },
+        { date: "08:00", value: 13 },
+        { date: "09:00", value: 18 },
+        { date: "10:00", value: 24 },
+        { date: "11:00", value: 23 },
+        { date: "12:00", value: 19 },
+        { date: "13:00", value: 14 },
+        { date: "14:00", value: 12 },
+        { date: "15:00", value: 15 },
+        { date: "16:00", value: 14 },
+        { date: "17:00", value: 12 },
+        { date: "18:00", value: 10 },
+        { date: "19:00", value: 8 },
+        { date: "20:00", value: 10 },
+        { date: "21:00", value: 11 } */
+      ]
     };
   },
   computed: {

+ 129 - 9
src/views/middPage/index.vue

@@ -1,7 +1,44 @@
 <template>
   <div class="midd-page">
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="AED数据表" name="first">
+      <el-tab-pane label="AED列表" name="first">
+        <div class="header">
+          <div class="h_left">
+            <p class="current-doc">
+              当前数据表: {{ firstForm.currentDocument }}
+            </p>
+            <div class="search-box">
+              <el-input
+                v-model="firstForm.searchQuery"
+                placeholder="请输入搜索内容"
+                class="custom-search-input"
+                clearable
+                @clear="handleSearchClear"
+                @keyup.enter.native="handleSearch"
+              >
+                <template #append>
+                  <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleSearch"
+                    >搜索</el-button
+                  >
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="h_right">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="firstForm.currentPage"
+              :page-size="firstForm.pageSize"
+              layout="total, prev, pager, next"
+              :total="firstForm.total"
+              ><!-- , jumper -->
+            </el-pagination>
+          </div>
+        </div>
         <el-table :data="firstTableData" style="width: 100%">
           <el-table-column
             label="工作类型"
@@ -130,7 +167,7 @@
                     >
                       <i class="el-icon-check"></i> 保存
                     </el-dropdown-item>
-                   <!--  <el-dropdown-item
+                    <!--  <el-dropdown-item
                       @click.native="firstHandleUpload(scope.$index, scope.row)"
                     >
                       <i class="el-icon-refresh"></i> 更新内容
@@ -153,7 +190,7 @@
           >新增行</el-button
         >
       </el-tab-pane>
-      <el-tab-pane label="SOTA数据表" name="second">
+      <el-tab-pane label="SOTA详情" name="second">
         <el-table :data="secondTableData" style="width: 100%">
           <el-table-column
             label="Identifier"
@@ -532,6 +569,11 @@ export default {
           prompt: "",
           modelValue: "",
         },
+        currentDocument: "AED数据表", // 当前文档名称
+        searchQuery: "", // 搜索关键词
+        currentPage: 1, // 当前页码
+        pageSize: 10, // 每页显示条数
+        total: 3, // 总条数
       },
       secondForm: {
         tableData: [
@@ -755,16 +797,16 @@ export default {
 
     // 打开模型1对话框
     openModel1Dialog(row) {
-      this.firstForm.firstAiForm.application='app1'
-      this.firstForm.firstAiForm.description=row.description
-      this.firstForm.dialogVisible=true
+      this.firstForm.firstAiForm.application = "app1";
+      this.firstForm.firstAiForm.description = row.description;
+      this.firstForm.dialogVisible = true;
     },
 
     // 打开模型2对话框
     openModel2Dialog(row) {
-      this.firstForm.firstAiForm.application='app2'
-      this.firstForm.firstAiForm.description=row.description
-      this.firstForm.dialogVisible=true
+      this.firstForm.firstAiForm.application = "app2";
+      this.firstForm.firstAiForm.description = row.description;
+      this.firstForm.dialogVisible = true;
     },
 
     // 获取更新内容的方法(需要根据实际API进行修改)
@@ -838,6 +880,34 @@ export default {
         value: project,
       }));
     },
+    /* 搜索逻辑 */
+    handleSearch() {
+      // 实现搜索逻辑
+      const query = this.firstForm.searchQuery.toLowerCase();
+      const filteredData = this.firstForm.tableData.filter((item) => {
+        return Object.values(item).some((value) =>
+          String(value).toLowerCase().includes(query)
+        );
+      });
+      this.total = filteredData.length;
+      // 更新表格数据
+    },
+
+    handleSearchClear() {
+      this.firstForm.searchQuery = "";
+      this.handleSearch();
+    },
+
+    handleSizeChange(val) {
+      this.firstForm.pageSize = val;
+      this.handleSearch();
+    },
+
+    handleCurrentChange(val) {
+      this.firstForm.currentPage = val;
+      this.handleSearch();
+    },
+
     handleClick() {},
   },
   watch: {
@@ -876,4 +946,54 @@ export default {
   background-color: #f0e6ff !important;
   color: #333333 !important; /* 深色文字确保可读性 */
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 15px 0;
+}
+.h_left p {
+  margin-top: 0px;
+}
+.search-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-box {
+  width: 350px; /* 可以根据需要调整宽度 */
+}
+
+/* 自定义输入框样式 */
+.custom-search-input :deep(.el-input__inner) {
+  height: 40px;
+  line-height: 40px;
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+}
+
+/* 自定义搜索按钮样式 */
+.custom-search-input :deep(.el-input-group__append) {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.custom-search-input :deep(.el-input-group__append .el-button) {
+  height: 40px;
+  padding: 0 20px;
+  border-radius: 0 4px 4px 0;
+  margin: 0;
+}
+
+/* 悬停效果 */
+.custom-search-input :deep(.el-input__inner:hover) {
+  border-color: #DCDFE6;
+}
+
+.custom-search-input :deep(.el-input__inner:focus) {
+  border-color: #409EFF;
+}
 </style>

+ 164 - 0
src/views/middPage/list.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="gpu-list">
+    <el-select
+      v-model="selectedBucket"
+      placeholder="请选择知识库"
+      @change="handleBucketChange"
+    >
+      <el-option
+        v-for="item in buckets"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+    <el-select
+    style="margin-left: 15px"
+      v-model="selectedType"
+      placeholder="请选择目录"
+      :disabled="!selectedBucket"
+    >
+      <el-option
+        v-for="item in types"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+    <!-- 添加同步数据按钮 -->
+    <el-button
+    style="margin-left: 15px"
+      type="primary"
+      @click="handleSyncData"
+      :loading="isSyncing"
+      :disabled="!selectedType"
+    >
+      {{ isSyncing ? "同步中..." : "同步数据" }}
+    </el-button>
+    <el-table :data="gpuList" style="width: 100%">
+      <el-table-column prop="id" label="ID"> </el-table-column>
+      <el-table-column prop="name" label="名称">
+        <template slot-scope="scope">
+          <el-link @click="handleNameClick(scope.row)">{{
+            scope.row.name
+          }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="文档类型"> </el-table-column>
+      <el-table-column prop="status" label="处理状态">
+        <template slot-scope="scope">
+          {{ scope.row.status }}
+        </template>
+      </el-table-column>
+      <!-- 添加其他需要的列 -->
+    </el-table>
+
+    <el-pagination
+      style="display: flex; justify-content: flex-end"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+  </div>
+</template>
+  
+  <script>
+import {
+  GET_list,
+  GET_sync,
+  listBuckets,
+  selectTypeList,
+} from "@/api/knowledge"; // 假设您有一个 API 文件来管理接口调用
+
+export default {
+  name: "GpuList",
+  data() {
+    return {
+      gpuList: [{ name: "1" }],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      isSyncing: false,
+      buckets: [],
+      types: [],
+      selectedBucket: null,
+      selectedType: null,
+    };
+  },
+  mounted() {
+    this.fetchBuckets();
+    this.fetchGpuList();
+  },
+  methods: {
+    fetchBuckets() {
+      listBuckets().then((res) => {
+        this.buckets = res.data;
+      });
+    },
+    handleBucketChange(val) {
+      this.selectedType = null;
+      this.types = [];
+      if (this.selectedBucket) {
+        selectTypeList({ kb_id: val }).then((res) => {
+          this.types = res.data.dataList;
+        });
+      }
+      this.fetchGpuList();
+    },
+    handleSyncData() {
+      if (!this.selectedType) {
+        this.$message.warning("请先选择目录");
+        return;
+      }
+      this.isSyncing = true;
+      GET_sync({ doc_type_id: this.selectedType })
+        .then((res) => {
+          this.$message.success("同步成功");
+          this.fetchGpuList();
+        })
+        .catch((error) => {
+          this.$message.error("同步失败");
+        })
+        .finally(() => {
+          this.isSyncing = false;
+        });
+    },
+    fetchGpuList() {
+      /*  structure_count() */
+      GET_list({ doc_type_id: 36 }).then((res) => {
+        this.gpuList = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.fetchGpuList();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.fetchGpuList();
+    },
+    handleNameClick(row) {
+      // 这里实现跳转逻辑,例如:
+      this.$router.push({
+        path: "/knowledge/middPage/index",
+        query: { id: 1 },
+      });
+    },
+  },
+};
+</script>
+  
+  <style scoped>
+.gpu-list {
+  padding: 20px;
+  /* 添加您需要的样式 */
+}
+</style>

Some files were not shown because too many files changed in this diff