vue2-client 1.8.46 → 1.8.48

package/src/pages/DynamicStatistics/DynamicTable.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="table-main">
+    <a-table
+      :scroll="{ x: scrollXWidth, y: scrollYHeight }"
+      size="middle"
+      :columns="tableColumns"
+      :dataSource="tableData"
+      :rowKey="record => record.id">
+    </a-table>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DynamicTable',
+  data () {
+    return {
+      tableColumns: [],
+      // x滚动条宽度
+      scrollXWidth: 1600,
+      scrollYHeight: 400
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true
+    }
+  },
+  watch: {
+    tableData: {
+      deep: true,
+      handler (newVal) {
+        this.initData()
+      }
+    }
+  },
+  methods: {
+    async initData () {
+      try {
+        // 从数据第一项推断列信息
+        const sample = this.tableData[0]
+        this.tableColumns = Object.keys(sample).map(key => ({
+          title: key, // 使用键名作为列标题
+          dataIndex: key, // 数据索引与键名相同
+          key: key,
+          ellipsis: true,
+        }))
+        let totalWidth = 0
+        // 设置表格宽度
+        for (let i = 0; i < this.tableColumns.length; i++) {
+          totalWidth = totalWidth + 180
+        }
+        // 设置表格高度为固定值
+        this.scrollYHeight = 'calc(100vh - 40rem)'
+        // 横向滚动长度大于所有宽度，才能实现固定表头
+        this.scrollXWidth = totalWidth
+      } catch (error) {
+        console.error('Fetching data failed:', error)
+      }
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.table-main {
+  margin-top: 8px;
+  :deep(.ant-table) {
+    background-color: #fff;
+  }
+}
+</style>

package/src/pages/DynamicStatistics/EvaluationArea.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="evaluation-card">
+    <div v-if="!action">
+      <p>您对这次搜索结果满意吗？</p>
+      <a-button-group>
+        <a-button type="primary" @click="submitEvaluation(true)">满意</a-button>
+        <a-button type="danger" @click="submitEvaluation(false)">不满意</a-button>
+      </a-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { post } from '@vue2-client/services/api'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+
+export default {
+  data () {
+    return {
+      action: false
+    }
+  },
+  props: {
+    uuid: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    submitEvaluation (result) {
+      const key = 'question-' + this.uuid
+      indexedDB.get(key, (item) => {
+        const content = Object.assign(item, {
+          evaluation: result
+        })
+        post('/api/af-system/logic/openapi/addCommonData', {
+          type: 'ai-evaluation',
+          content: content
+        }).then(res => {
+          this.action = true
+          this.$message.success('评论成功')
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.evaluation-card {
+  width: 50%;
+  text-align: center;
+  margin: 20px auto 0 auto;
+}
+</style>

package/src/pages/DynamicStatistics/FavoriteList.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <a-list v-show="!loading" size="small" :data-source="data">
+      <a-list-item slot="renderItem" slot-scope="item">
+        <div>
+          <p><a @click="$emit('openFavorites', item.uuid)">{{ item.question }} </a></p>
+          <p>{{ item.date }}</p>
+        </div>
+        <a class="delete_item">
+          <a-icon type="close" @click="$emit('saveToFavorites', item.uuid)"/>
+        </a>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+
+export default {
+  name: 'FavoriteList',
+  data () {
+    return {
+      data: [],
+      loading: false
+    }
+  },
+  mounted () {
+    this.loadData()
+  },
+  methods: {
+    loadData () {
+      console.warn(123)
+      indexedDB.getAll((data) => {
+        const realData = data.filter(item => item.data && item.data.uuid)
+          .map(item => item.data)
+        this.data = realData
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.delete_item {
+  margin-left: 8px;
+  color: #333;
+}
+p {
+  margin: 0
+}
+</style>

package/src/pages/DynamicStatistics/SearchBar.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="search-bar">
+    <a-input
+      class="search-input"
+      v-model="searchInput"
+      placeholder="请输入查询的内容"
+      @pressEnter="onSearch(searchInput)">
+    </a-input>
+    <a-button-group size="large" class="btn_group">
+      <a-button @click="onSearch(searchInput)" :loading="loading">
+        <a-icon type="search" />搜索
+      </a-button>
+      <a-tooltip>
+        <template slot="title">
+          将该结果收藏到收藏夹
+        </template>
+        <a-button class="star_button" @click="onSaveToFavorites(undefined)">
+          <a-icon type="star" v-show="!favoriteState"/>
+          <a-icon type="star" v-show="favoriteState" theme="filled"/>
+        </a-button>
+      </a-tooltip>
+      <a-tooltip>
+        <template slot="title">
+          收藏夹
+        </template>
+        <a-popover @visibleChange="favoriteListVisibleAction" title="收藏夹" placement="bottomRight" trigger="click">
+          <template slot="content">
+            <FavoriteList ref="favoriteList" @saveToFavorites="onSaveToFavorites" @openFavorites="openFavorites"/>
+          </template>
+          <a-button>
+            <a-icon type="menu" />
+          </a-button>
+        </a-popover>
+      </a-tooltip>
+    </a-button-group>
+  </div>
+</template>
+
+<script>
+import FavoriteList from './FavoriteList.vue'
+
+export default {
+  name: 'SearchBar',
+  components: { FavoriteList },
+  data () {
+    return {
+      searchInput: '', // 绑定搜索输入框的数据,
+      favoriteState: false, // 是否收藏
+      obj: undefined,
+      favoriteListVisible: false,
+      loading: false
+    }
+  },
+  methods: {
+    // 处理搜索操作
+    onSearch (value) {
+      this.loading = true
+      // 触发父组件的搜索事件，传递搜索输入的值
+      this.$emit('search', value, () => { this.loading = false })
+    },
+    // 处理打开收藏操作
+    openFavorites (uuid) {
+      this.$emit('openFavorites', uuid)
+    },
+    // 处理收藏操作
+    onSaveToFavorites (uuid) {
+      // 触发父组件的保存到收藏夹事件，传递当前搜索的uuid
+      let thisUUid
+      if (uuid) {
+        thisUUid = uuid
+      } else if (this.obj) {
+        thisUUid = this.obj.uuid
+      } else {
+        thisUUid = undefined
+      }
+      this.$emit('saveToFavorites', thisUUid)
+    },
+    // 收藏夹显示隐藏的回调
+    favoriteListVisibleAction (visible) {
+      if (this.$refs.favoriteList && visible) {
+        this.$refs.favoriteList.loadData()
+      }
+    },
+    init () {
+      this.searchInput = ''
+      this.obj = undefined
+      this.favoriteState = false
+    },
+    setObj (obj) {
+      this.obj = obj
+      this.searchInput = obj.question
+      this.favoriteState = obj.isFavorite
+    },
+    setFavorite (uuid, isFavorite) {
+      if (this.obj && uuid === this.obj.uuid) {
+        this.favoriteState = isFavorite
+      }
+      this.favoriteListVisibleAction(true)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.search-bar {
+  display: flex;
+  justify-content: center;
+  padding: 25px 0;
+  margin-bottom: 20px;
+  :deep(.ant-input) {
+    padding: 4px 80px 4px 40px;
+    height: 48px;
+    font-size: 16px;
+  }
+  .btn_group {
+    padding-left: 6px;
+    :deep(.ant-btn) {
+      height: 100%;
+      color: #4F93FE;
+    }
+    .star_button {
+      color: #ffba00;
+    }
+  }
+}
+
+.search-input {
+  width: 40%;
+}
+</style>

package/src/pages/DynamicStatistics/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="dynamic-statistics">
+    <div class="data-nav-card-back">
+      <div class="data-nav-card">
+        <a-row type="flex" align="middle" class="search-title-card">
+          <img class="search-title-logo" src="@vue2-client/assets/img/logo.png"/>
+          <span class="search-title-text">数据检索平台</span>
+        </a-row>
+        <div class="search-card">
+          <div class="blue-overlay"></div>
+          <div class="search-card-main">
+            <!-- 搜索栏组件 -->
+            <search-bar ref="searchBar" @search="handleSearch" @saveToFavorites="handleSaveToFavorites" @openFavorites="handleOpenFavorite"></search-bar>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="data-main-card">
+      <!-- 数据展示Tabs -->
+      <data-tabs
+        ref="tabs"
+        @tab-change="handleTabChange"
+        @remove-cache="remove"
+      ></data-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchBar from './SearchBar.vue'
+import DataTabs from './DataTabs.vue'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+import { post } from '@vue2-client/services/api'
+import { formatDate } from '@vue2-client/utils/util'
+
+export default {
+  name: 'DynamicStatistics',
+  components: {
+    SearchBar,
+    DataTabs
+  },
+  data () {
+    return {
+      cacheSearchArray: {},
+      panes: []
+    }
+  },
+  methods: {
+    // 处理搜索逻辑，这里简化为直接赋值，实际应调用API
+    handleSearch (value, callback) {
+      if (!value) {
+        this.$message.warn('请先输入查询的数据')
+        return
+      }
+      const uuid = this.uuid()
+      post('/ai/question/', {
+        messages: [{
+          content: value,
+          role: 'user'
+        }]
+      }).then(res => {
+        if (Array.isArray(res)) {
+          this.addTab(uuid, value, res, false)
+        } else {
+          this.$message.warning(res)
+        }
+      }).finally(() => {
+        callback()
+      })
+    },
+    addTab (uuid, question, searchResults, isFavorite) {
+      this.cacheSearchArray[uuid] = {
+        uuid: uuid,
+        question: question,
+        data: searchResults,
+        isFavorite: isFavorite
+      }
+      this.$refs.tabs.add(this.cacheSearchArray[uuid])
+      this.$refs.searchBar.setObj(this.cacheSearchArray[uuid])
+    },
+    // 处理保存到收藏夹的逻辑
+    handleSaveToFavorites (uuid) {
+      if (!uuid) {
+        this.$message.warn('请先输入查询的数据')
+        return
+      }
+      const key = 'question-' + uuid
+      if (!this.cacheSearchArray[uuid]) {
+        indexedDB.get(key, (item) => {
+          this.cacheSearchArray[uuid] = item
+          this.setFavorite(key, uuid)
+          delete this.cacheSearchArray[uuid]
+        })
+      } else {
+        this.setFavorite(key, uuid)
+      }
+    },
+    setFavorite (key, uuid) {
+      const isFavorite = this.cacheSearchArray[uuid].isFavorite
+      this.cacheSearchArray[uuid].isFavorite = !isFavorite
+      if (isFavorite) {
+        indexedDB.delete(key)
+        this.$message.success('取消收藏成功')
+      } else {
+        indexedDB.add(key, Object.assign({
+          date: formatDate('now')
+        }, this.cacheSearchArray[uuid]))
+        this.$message.success('收藏成功')
+      }
+      this.$refs.searchBar.setFavorite(uuid, !isFavorite)
+    },
+    // 处理Tab变更，可以在这里进行额外的逻辑处理
+    handleTabChange (uuid) {
+      if (uuid) {
+        this.$refs.searchBar.setObj(this.cacheSearchArray[uuid])
+      } else {
+        this.cacheSearchArray = []
+        this.$refs.searchBar.init()
+      }
+    },
+    // 处理从收藏夹打开收藏项
+    handleOpenFavorite (uuid) {
+      if (this.cacheSearchArray[uuid]) {
+        this.$message.success('已切换至搜索结果页')
+        this.$refs.tabs.set(uuid)
+        return
+      }
+      // 这里应根据data从indexedDB中查询数据并展示
+      const key = 'question-' + uuid
+      indexedDB.get(key, (item) => {
+        this.addTab(uuid, item.question, item.data, item.isFavorite)
+      })
+    },
+    uuid () {
+      const tempUrl = URL.createObjectURL(new Blob())
+      const uuid = tempUrl.toString() // blob:https://xxx.com/b250d159-e1b6-4a87-9002-885d90033be3
+      URL.revokeObjectURL(tempUrl)
+      return uuid.substr(uuid.lastIndexOf('/') + 1)
+    },
+    remove (uuid) {
+      delete this.cacheSearchArray[uuid]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.dynamic-statistics {
+  position: relative;
+  overflow: auto;
+  height: 100vh;
+  background-color: #f5f7fb;
+  min-width: 1400px;
+  margin: 0 auto;
+  .data-nav-card-back {
+    width: 100%;
+    height: 265px;
+  }
+  .data-nav-card {
+    z-index: 999;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    background: #fff;
+    .search-title-card {
+      height: 65px;
+      width: 75%;
+      margin: 0 auto;
+      .search-title-logo {
+        width: 60px;
+        margin-right: 8px;
+      }
+      .search-title-text {
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+    .search-card {
+      width: 100%;
+      height: 200px;
+      background-image: url('/public/img/dynamicStatistics/dynamicStatisticsBack.jpg');
+      background-size: cover;
+      position: relative;
+    }
+  }
+  .data-main-card {
+    width: 75%;
+    padding: 20px;
+    margin: 0 auto;
+    background-color: #f5f7fb;
+  }
+  .blue-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(#4F93FE, 0.8) // 这里设置蓝色蒙版的颜色和透明度
+  }
+}
+</style>