feat(int-agent): 添加日志elligent与监测功能

- 新增日志与监测页面组件
- 实现日志列表和图表展示- 添加日志搜索和筛选功能
- 优化智能体列表界面，增加日志与监测按钮- 调整路由配置，支持新的日志与监测页面

package.json

@@ -22,6 +22,7 @@
     "cropperjs": "^2.0.0",
     "crypto-js": "^4.0.0",
     "crypto.js": "^2.0.2",
+    "echarts": "^5.6.0",
     "element-ui": "2.15.4",
     "exif-js": "^2.3.0",
     "file-saver": "^2.0.5",

src/components/RenderTable/index.vue

@@ -22,7 +22,7 @@
           <el-table-column
             :align="item.align"
             :row-key="item.id"
-            :label="item.key"
+            :label="item.key ? item.key : item.title ? item.title : item.label"
             :type="item.type"
             :sortable="item.sortable"
             :key="index"

src/router/generatedRouter/index.js

@@ -172,23 +172,24 @@ export default [
       }
     ]
   },
+  // 智能体详情
   {
-    path: '/dify',
+    path: '/agent',
-    name: 'dify',
+    name: 'agent',
     component: layout,
-    redirect: '/dify/workflow',
+    redirect: '/agent/:thirdAppId/workflow',
     meta: {
-      title: 'Dify',
+      title: '智能体',
       icon: 'icon-notebook',
       affix: true
     },
     children: [
       {
-        path: '/dify/workflow',
+        path: '/agent/:thirdAppId/workflow',
-        name: 'dify-workflow',
+        name: 'agent-workflow',
         component: () => import('@/views/agent/views/workflow/index.vue'),
         meta: {
-          title: 'Dify',
+          title: 'agent',
           icon: 'icon-notebook'
         }
       }
@@ -255,6 +256,19 @@ export default [
           accessToken: '',
           refreshToken: ''
         }
+      },
+      {
+        path: '/intelligentAgent/logs-overview',
+        name: 'intelligentAgent-logs-overview',
+        component: () =>
+          import('@/views/intelligent-agent/children/Logs&overview/index.vue'),
+        hidden: true,
+        meta: {
+          title: '日志与监测',
+          icon: 'icon-notebook',
+          accessToken: '',
+          refreshToken: ''
+        }
       }
     ]
   }

src/views/agent/index.vue

@@ -14,16 +14,22 @@ export default {
   name: 'dify',
   data() {
     return {
+      appId: '',
       agent: {
         src: '/dify'
       }
     }
+  },
+  created() {
+    this.appId = this.$route.params.thirdAppId
+      ? this.$route.query.thirdAppId
+      : this.thirdAppId
   }
 }
 </script>
 
 <template>
-  <workflow :thirdAppId="thirdAppId"></workflow>
+  <workflow :thirdAppId="appId"></workflow>
 </template>
 
 <style lang="scss" scoped></style>

src/views/agent/views/workflow/index.vue

@@ -55,7 +55,9 @@ export default {
     this.agent.params.publish = publish || '0'
 
     if (this.thirdAppId) {
-      this.agent.src = `${DIFY_URL}/app/${this.thirdAppId}/workflow?${this.params}`
+      this.agent.src = `${DIFY_URL}/app/${this.thirdAppId}/workflow?${
+        this.params
+      }`
       this.agent.isVisible = true
     }
 
@@ -109,13 +111,13 @@ export default {
 </script>
 
 <template>
-  <div class="container">
+  <div class="render-container">
     <iframe
       @load="handleAgentLoad"
       ref="agent"
       :src="agent.src"
       frameborder="0"
-      style="width: 100%; height: 85vh;"
+      style="width: 100%; height: 100%;"
     />
   </div>
 </template>

src/views/app/layout/components/Sidebar/Sidebar.vue

@@ -242,13 +242,13 @@ export default {
   flex: 1;
   overflow: hidden;
   background-color: #fff;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .primary-menu {
   width: 95px;
   height: 100%;
-  border-right: 1px solid #ebeef2;
+  position: relative;
   overflow-y: auto;
   background-color: #fff;
   text-align: center;
@@ -261,8 +261,17 @@ export default {
     margin-top: 30px;
     margin-bottom: 40px;
   }
+  &:after {
+    content: ' ';
+    position: absolute;
+    border-right: 1px solid #ebeef2;
+    height: 100%;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    transform: scaleX(0.5);
+  }
 }
-
 .primary-menu-item {
   display: flex;
   flex-direction: column;

src/views/intelligent-agent/children/Logs&overview/components/logs.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <el-form ref="form" label-position="top" inline>
+      <el-form-item label="时间" prop="time">
+        <el-select size="medium" v-model="form.time"></el-select>
+      </el-form-item>
+      <el-form-item label="是否标注" prop="time">
+        <el-select size="medium" v-model="form.time"></el-select>
+      </el-form-item>
+      <el-form-item label="搜索" prop="time">
+        <el-input size="medium"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="time">
+        <el-select size="medium" v-model="form.time"></el-select>
+      </el-form-item>
+    </el-form>
+
+    <r-table
+      :columns="columns"
+      :data="tableConfig.tableData"
+      :deletion="false"
+      :total="tableConfig.total"
+      @currentChange="handleCurrentChange"
+      @sizeChange="handleSizeChange"
+      :currentPage="tableConfig.pageNum"
+      :pageSize="tableConfig.pageSize"
+    ></r-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'logs',
+  data() {
+    return {
+      form: {
+        time: ''
+      },
+      tableConfig: {
+        tableData: [],
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
+      }
+    }
+  },
+  props: {},
+  watch: {},
+  components: {},
+  filters: {},
+  methods: {
+    handleCurrentChange(val) {
+      this.tableConfig.pageNum = val
+      this.load()
+    },
+    handleSizeChange(val) {
+      this.tableConfig.pageNum = 1
+      this.tableConfig.pageSize = val
+      this.load()
+    },
+    load() {
+      this.tableConfig.tableData = []
+    }
+  },
+  created() {},
+  mounted() {},
+  computed: {
+    columns: () => {
+      return [
+        {
+          title: '标题',
+          prop: 'index'
+        },
+        {
+          label: '用户',
+          prop: 'time'
+        },
+        {
+          label: '状态',
+          prop: 'content'
+        },
+        {
+          label: '消息数',
+          prop: 'operation'
+        },
+        {
+          label: '用户反馈',
+          prop: 'operation'
+        },
+        {
+          label: '管理员反馈',
+          prop: 'operation'
+        },
+        {
+          label: '更新时间',
+          prop: 'operation'
+        },
+        {
+          label: '创建时间',
+          prop: 'operation'
+        }
+      ]
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+#logs-container {
+}
+</style>

src/views/intelligent-agent/children/Logs&overview/components/overveiw.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div :id="echartsId" style="width: 100%;height: 100%"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import uuid from 'uuid'
+
+export default {
+  name: 'overveiw',
+  data() {
+    return {
+      echartsId: 'main-' + uuid()
+    }
+  },
+  props: {},
+  watch: {},
+  components: {},
+  filters: {},
+  methods: {
+    drawEcharts() {
+      let myChart = echarts.init(document.getElementById(this.echartsId))
+      let option = {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            areaStyle: {}
+          }
+        ]
+      }
+
+      myChart.setOption(option)
+    }
+  },
+  created() {},
+  mounted() {
+    this.drawEcharts()
+  },
+  computed: {}
+}
+</script>
+<style scoped lang="scss"></style>

src/views/intelligent-agent/children/Logs&overview/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="render-container">
+    <div class="title"></div>
+    <div class="flex tabs">
+      <div
+        @click="chooseTab = item.name"
+        class="tabs-title"
+        v-for="item in tabs"
+        :class="chooseTab === item.name ? 'active' : ''"
+      >
+        {{ item.title }}
+      </div>
+
+      <!--主体部分-->
+    </div>
+    <div class="tabs-body">
+      <logs v-if="chooseTab === 'logs'"></logs>
+      <div class="flex align-items-c justify-content-b" style="flex-wrap: wrap">
+        <overview
+          v-if="chooseTab === 'overview'"
+          v-for="item in 8"
+          style="width: 50%;height: 300px"
+        ></overview>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import logs from '@/views/intelligent-agent/children/Logs&overview/components/logs.vue'
+import overview from '@/views/intelligent-agent/children/Logs&overview/components/overveiw.vue'
+export default {
+  name: 'index',
+  data() {
+    return {
+      tabs: [
+        {
+          title: '日志',
+          name: 'logs'
+        },
+        // {
+        //   title: '批注'
+        // },
+        {
+          title: '监测',
+          name: 'overview'
+        }
+      ],
+      chooseTab: 'logs'
+    }
+  },
+  props: {},
+  watch: {},
+  components: {
+    logs,
+    overview
+  },
+  filters: {},
+  methods: {},
+  created() {},
+  mounted() {},
+  computed: {}
+}
+</script>
+<style scoped lang="scss">
+@import '@/assets/sass/renderSass/theme.scss';
+.tabs {
+  position: relative;
+  & .tabs-title {
+    padding: 6px 10px;
+    cursor: pointer;
+    margin-right: 8px;
+    &:hover {
+      color: $--color-primary;
+      font-weight: 600;
+    }
+    &.active {
+      color: $--color-primary;
+      border-bottom: 3px solid $--color-primary;
+      font-weight: 600;
+    }
+  }
+
+  &:after {
+    content: '';
+    clear: both;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    border-bottom: 1px solid #ebeef5;
+    transform: scaleY(0.5);
+  }
+}
+.tabs-body {
+  padding: 8px 0;
+}
+</style>

src/views/intelligent-agent/index.vue

@@ -86,6 +86,13 @@ export default {
       this.list.push(...content.content.list)
       this.total = content.content.total
     },
+
+    jumpToLogs() {
+      this.$router.push({
+        path: `/intelligentAgent/logs-overview`
+      })
+    },
+
     /**
      * 编辑智能体
      */
@@ -137,7 +144,6 @@ export default {
     },
     async handleClickAgent(item) {
       const { content } = await agentDetail(item.id)
-
       const thirdContent = await getAccessToken()
       let agent = content.content
       this.agentConfig.title = agent.appName + ' -  智能体详情'
@@ -148,8 +154,9 @@ export default {
       // 传递新的token
       localStorage.setItem('refresh_token', refreshToken)
       localStorage.setItem('console_token', accessToken)
-      setTimeout(() => {
+      // 做成页面跳转
-        this.agentConfig.visible = true
+      this.$router.push({
+        path: `/agent/${this.agentConfig.agent.thirdAppId}/workflow`
       })
     },
 
@@ -248,11 +255,11 @@ export default {
 
           <div class="grid grid-cols-2 mh20 mv10">
             <div class="theme-primary-desc-text-drank fs12">
-              创建者：
+              <p>创建者：{{ listItem.createdUser }}</p>
-              <div>{{ listItem.createdUser }}</div>
+            </div>
           </div>
           <div
-              class="opacity-button flex align-items-c"
+            class="opacity-button flex align-items-c mh20 mb10"
             style="justify-content: flex-end"
           >
             <el-button
@@ -270,7 +277,14 @@ export default {
               type="primary"
               >修改
             </el-button>
-            </div>
+            <el-button
+              class="line-button"
+              size="medium"
+              icon="el-icon-odometer"
+              @click.stop="jumpToLogs(listItem.id)"
+              type="primary"
+              >日志与监测
+            </el-button>
           </div>
         </el-card>
       </div>
@@ -288,18 +302,18 @@ export default {
       <component :is="dialog.component" ref="infoDialog" />
     </r-dialog>
 
-    <el-drawer
+    <!--    <el-drawer-->
-      :visible.sync="agentConfig.visible"
+    <!--      :visible.sync="agentConfig.visible"-->
-      :title="agentConfig.title"
+    <!--      :title="agentConfig.title"-->
-      size="90%"
+    <!--      size="90%"-->
-      :wrapperClosable="false"
+    <!--      :wrapperClosable="false"-->
-    >
+    <!--    >-->
-      <component
+    <!--      <component-->
-        :is="agentConfig.component"
+    <!--        :is="agentConfig.component"-->
-        :key="agentConfig.agent.thirdAppId"
+    <!--        :key="agentConfig.agent.thirdAppId"-->
-        :thirdAppId="agentConfig.agent.thirdAppId"
+    <!--        :thirdAppId="agentConfig.agent.thirdAppId"-->
-      />
+    <!--      />-->
-    </el-drawer>
+    <!--    </el-drawer>-->
   </div>
 </template>