smart-search-web/src/views/web/archive/index.vue

<template>
  <div class="archive-main">
    <HeadMenu/>
    <div class="archive-content">
      <div class="archive-basic" v-if="themeConfigCpt.main.indexStyle" v-loading="state.mainObj.loading">
        <div class="archive-basic-title">
          <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
          <span class="main">{{state.mainObj.data[themeConfigCpt.main.indexStyle.mainParam]}}</span>
          <template v-for="k in themeConfigCpt.main.indexStyle.tagParams">
            <span class="tag" v-if="state.mainObj.data[k]">{{ state.mainObj.data[k] }}</span>
          </template>
        </div>
        <div class="archive-basic-sub" v-if="themeConfigCpt.main.indexStyle.subParams?.length > 0">
          <template v-for="(k, i) in themeConfigCpt.main.indexStyle.subParams">
            <span>{{ state.mainObj.data[k] }}</span>
            <span class="line" v-if="i < themeConfigCpt.main.indexStyle.subParams.length - 1"/>
          </template>
        </div>
        <div class="archive-basic-avatar" v-if="themeConfigCpt.main.indexStyle.imgParam">
          <el-image
            :src="state.mainObj.data[themeConfigCpt.main.indexStyle.imgParam]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[state.mainObj.data[themeConfigCpt.main.indexStyle.imgParam]]"
            :preview-teleported="true"
          >
            <template #error>
              <div class="image-slot">
                <img src="../../../assets/images/web/archive-main-img.png" alt="暂无图片"/>
              </div>
            </template>
          </el-image>
        </div>
        <div class="archive-basic-cols" v-if="themeConfigCpt.main.indexStyle.otherParams?.length > 0">
          <template v-for="item in themeConfigCpt.main.indexStyle.otherParams">
            <div class="cols-item">
              <div class="label">{{ item.label }}</div>
              <div class="value">{{ state.mainObj.data[item.value] }}</div>
            </div>
          </template>
        </div>
      </div>
      <div class="archive-list">
        <el-tabs v-model="state.activeTab" class="archive-list-tabs">
          <el-tab-pane label="首页" name="首页"/>
          <template v-for="([key, value], index) in themeConfigCpt.tabs">
            <el-tab-pane :label="value.indexName" :name="key"/>
          </template>
        </el-tabs>
        <template v-if="state.activeTab === '首页'">
          <div class="archive-list-block">
            <div class="archive-list-block-title">
              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>关系图谱
            </div>
            <div class="archive-list-block-page" v-loading="state.chartData.loading">
              <RelationChart :data="state.chartData.data" @chartPage="onChartPage"/>
            </div>
          </div>
          <div class="archive-list-block" v-if="state.chartTable.chartId">
            <div class="archive-list-block-title">
              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
              {{ themeConfigCpt.chart.nodes.filter(v => v.id == state.chartTable.chartId)?.[0]?.name }}
            </div>
            <div class="archive-list-block-page" v-loading="state.chartTable.loading">
              <CusTable
                :page-num="state.chartTable.page.pageNum"
                :page-size="state.chartTable.page.pageSize"
                :total="state.chartTable.result.total"
                :data="state.chartTable.result.data"
                :table-head="state.chartTable.tableHead"
                @handlePage="onPageChart"
              >
              </CusTable>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="archive-list-block">
            <div class="archive-list-block-title">
              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
              {{ themeConfigCpt.tabs.get(state.activeTab)?.indexName }}
            </div>
            <div class="archive-list-block-page" v-loading="state.tabTable.loading">
              <CusTable
                :page-num="state.tabTable.page.pageNum"
                :page-size="state.tabTable.page.pageSize"
                :total="state.tabTable.result.total"
                :data="state.tabTable.result.data"
                :table-head="state.tabTable.tableHead"
                @handlePage="onPage"
                :page-sizes="[20, 40, 60, 80, 100]"
              >
              </CusTable>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onMounted, reactive, watch} from "vue";
import RelationChart from "./relation-chart.vue";
import {ElLoading, ElMessage} from "element-plus";
import {useAppStore, useThemeStore} from "@/stores";
import {frontGetThemeByThemeId} from "@/api/modules/web/list";
import {useRoute} from "vue-router";

const ThemeStore = useThemeStore()
const AppStore = useAppStore()
const route = useRoute()
const {proxy} = getCurrentInstance()
const state: any = reactive({
  activeTab: '',
  tabTable: {
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 20
    },
    tableHead: [],
    result: {
      total: 0,
      data: []
    },
  },
  chartTable: {
    chartId: '',
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 10
    },
    tableHead: [],
    result: {
      total: 0,
      data: []
    },
  },
  chartData: {
    loading: false,
    data: {
      nodes: [],
      edges: []
    }
  },
  ws: {
    instance: null,
    getMain: () => {},
    tabPage: () => {},
    getChart: () => {},
    chartPage: () => {},
    loading: null,
    loadingTimer: null
  },
  themeDetail: {},
  mainObj: {
    loading: false,
    data: {}
  }
})
const themeConfigCpt = computed(() => {
  const getSearchParam = (item) => {
    // es查询参数
    const param = {}
    param.indexCode = item.indexTableName
    if (item.indexOrder) {
      const obj = {}
      JSON.parse(item.indexOrder).forEach(s => {
        obj[s.sortParam] = s.sortType
      })
      param.orderBy = obj
    }
    if (item.indexCondition) {
      const arr = []
      JSON.parse(item.indexCondition).forEach(s => {
        arr.push({
          fieldCode: s.indexParam,
          fieldQueryType: s.condition,
          fieldQueryValue: route.query[s.themeParam]
        })
      })
      param.datas = arr
    }
    return param
  }
  const getTableHead = (item) => {
    const arr = []
    item.indexFields.forEach(v => {
      arr.push({value: v.fieldNameEn, label: v.fieldNameCn})
    })
    return arr
  }
  const res = {
    main: {
      indexStyle: {}
    },
    tabs: new Map(),
    chart: {
      nodes: <any>[],
      edges: <any>[],
    }
  }
  state.themeDetail.indexDtos?.forEach(v => {
    if (v.isMain == 1) {
      res.main = {
        indexTableName: v.indexTableName,
        indexStyle: v.indexStyle ? JSON.parse(v.indexStyle) : '',
        searchParam: getSearchParam(v),
        tableHead: getTableHead(v)
      }
      res.chart.nodes.unshift({
        id: String(v.id),
        iconSrc: v.url,
        weight: v.weight || 100,
        num: 0,
        name: v.indexNameShort,
        indexTableName: v.indexTableName,
        searchParam: getSearchParam(v),
        tableHead: getTableHead(v)
      })
    } else if (v.relateIndexId) {
      res.chart.nodes.push({
        id: String(v.id),
        iconSrc: v.url,
        weight: v.weight,
        num: 0,
        name: v.indexNameShort,
        indexTableName: v.indexTableName,
        searchParam: getSearchParam(v),
        tableHead: getTableHead(v)
      })
      res.chart.edges.push({source: String(v.relateIndexId), target: String(v.id), labelText: v.description || '关系描述'})
    } else {
      res.tabs.set(v.indexTableName, {
        indexName: v.indexName,
        indexTableName: v.indexTableName,
        searchParam: getSearchParam(v),
        tableHead: getTableHead(v)
      })
    }
  })
  console.log(res)
  return res
})
const onPage = (pageNum, pageSize) => {
  state.tabTable.page = {
    pageNum: pageNum,
    pageSize: pageSize
  }
  state.ws.tabPage()
}
const onPageChart = (pageNum, pageSize) => {
  state.chartTable.page = {
    pageNum: pageNum,
    pageSize: pageSize
  }
  state.ws.chartPage()
}
const onChartPage = (id) => {
  state.chartTable = {
    chartId: id,
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 10
    },
    tableHead: themeConfigCpt.value.chart.nodes.filter(v => v.id == id)?.[0]?.tableHead,
    result: {
      total: 0,
      data: []
    },
  }
  state.ws.chartPage()
}
const initTheme = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '获取主题中……',
    background: ThemeStore.loadingBg
  })
  frontGetThemeByThemeId(route.query.themeId).then(res => {
    state.themeDetail = res.data
    loading.close()
    initWS()
  })
}
watch(() => state.activeTab, (n) => {
  if (n === '首页') {
    state.chartTable.chartId = ''
    state.ws.getChart()
  } else {
    state.tabTable = {
      loading: false,
      page: {
        pageNum: 1,
        pageSize: 20
      },
      tableHead: themeConfigCpt.value.tabs.get(n).tableHead,
      result: {
        total: 0,
        data: []
      },
    }
    state.ws.tabPage()
  }
})
const initWS = () => {
  const ws: any = new WebSocket(`ws://${location.host}/ws-api/smart-ws?userId=${AppStore.userInfo.id}`)
  let sessionId = ''
  let lastTabParams = ''
  let lastMainParams = ''
  let lastChartParams = ''
  let lastChartPageParams = ''
  const loading = ElLoading.service({
    lock: true,
    text: '搜索服务连接中……',
    background: ThemeStore.loadingBg
  })
  ws.onopen = (e) => {
    loading.close()
    state.ws.loading?.close()
    state.ws.loading = null
    state.ws.getMain = () => {
      // 如果有的话，终止上一次请求
      if (lastMainParams) {
        const p = JSON.parse(lastMainParams)
        p.flag = 'stop'
        ws.send(JSON.stringify(p))
        lastMainParams = ''
      }
      const params = {
        pageNumber: 1,
        pageSize: 1,
        type: 'list-fix',
        sessionId: sessionId,
        timestamp: new Date().getTime(),
        flag: 'run',
        orderBy: {},
        builder:[
          {
            tagCode: '',
            datas:[
              {
                typeCode: '',
                datas: [themeConfigCpt.value.main.searchParam]
              }
            ]
          }
        ],
      }
      lastMainParams = JSON.stringify(params)
      state.mainObj.loading = true
      ws.send(lastMainParams)
    }
    state.ws.tabPage = () => {
      // 如果有的话，终止上一次请求
      if (lastTabParams) {
        const p = JSON.parse(lastTabParams)
        p.flag = 'stop'
        ws.send(JSON.stringify(p))
        lastTabParams = ''
      }
      const params = {
        pageNumber: state.tabTable.page.pageNum,
        pageSize: state.tabTable.page.pageSize,
        type: 'list-fix',
        sessionId: sessionId,
        timestamp: new Date().getTime(),
        flag: 'run',
        builder:[
          {
            tagCode: '',
            datas:[
              {
                typeCode: '',
                datas: [themeConfigCpt.value.tabs.get(state.activeTab).searchParam]
              }
            ]
          }
        ],
      }
      lastTabParams = JSON.stringify(params)
      state.tabTable.loading = true
      ws.send(lastTabParams)
    }
    state.ws.getChart = () => {
      // 如果有的话，终止上一次请求
      if (lastChartParams) {
        const p = JSON.parse(lastChartParams)
        p.flag = 'stop'
        ws.send(JSON.stringify(p))
        lastChartParams = ''
      }
      const params = {
        pageNumber: state.tabTable.page.pageNum,
        pageSize: state.tabTable.page.pageSize,
        type: 'count-fix',
        sessionId: sessionId,
        timestamp: new Date().getTime(),
        flag: 'run',
        builder:[
          {
            tagCode: '',
            datas:[
              {
                typeCode: '',
                datas: themeConfigCpt.value.chart.nodes.map(v => v.searchParam)
              }
            ]
          }
        ]
      }
      lastChartParams = JSON.stringify(params)
      state.chartData.loading = true
      ws.send(lastChartParams)
    }
    state.ws.chartPage = () => {
      // 如果有的话，终止上一次请求
      if (lastChartPageParams) {
        const p = JSON.parse(lastChartPageParams)
        p.flag = 'stop'
        ws.send(JSON.stringify(p))
        lastChartPageParams = ''
      }
      const params = {
        pageNumber: state.chartTable.page.pageNum,
        pageSize: state.chartTable.page.pageSize,
        type: 'list-fix',
        sessionId: sessionId,
        timestamp: new Date().getTime(),
        flag: 'run',
        builder:[
          {
            tagCode: '',
            datas:[
              {
                typeCode: '',
                datas: [themeConfigCpt.value.chart.nodes.filter(v => v.id == state.chartTable.chartId)[0].searchParam]
              }
            ]
          }
        ],
      }
      lastChartPageParams = JSON.stringify(params)
      state.chartTable.loading = true
      ws.send(lastChartPageParams)
    }
  }
  ws.onmessage = (e) => {
    try {
      const json = JSON.parse(e.data)
      if (json.type === 'session') {
        sessionId = json.sessionId
        // 左侧
        state.ws.getMain()
        state.activeTab = '首页'
      } else {
        switch (json.type) {
          case 'list-fix': {
            if (lastMainParams) {
              const pMain = JSON.parse(lastMainParams)
              // 返回为最新批次的
              if (json.timestamp == pMain.timestamp) {
                state.mainObj.loading = false
                state.mainObj.data = json.datas?.[0] || {}
                lastMainParams = ''
              }
            }
            if (lastTabParams) {
              const pTab = JSON.parse(lastTabParams)
              // 返回为最新批次的
              if (json.timestamp == pTab.timestamp) {
                state.tabTable.result.data = json.datas
                state.tabTable.result.total = json.records
                state.tabTable.loading = false
                lastTabParams = ''
              }
            }
            if (lastChartPageParams) {
              const pChartPage = JSON.parse(lastChartPageParams)
              // 返回为最新批次的
              if (json.timestamp == pChartPage.timestamp) {
                state.chartTable.result.data = json.datas
                state.chartTable.result.total = json.records
                state.chartTable.loading = false
                lastChartPageParams = ''
              }
            }
          } break
          case 'count-fix': {
            if (lastChartParams) {
              const pChart = JSON.parse(lastChartParams)
              // 返回为最新批次的
              if (json.timestamp == pChart.timestamp) {
                const obj = {
                  edges: [...themeConfigCpt.value.chart.edges],
                  nodes: themeConfigCpt.value.chart.nodes.map(v => {
                    v.num = json.datas.filter(s => s.indexCode === v.indexTableName)?.[0].data || 0
                    return v
                  })
                }
                state.chartData.data = obj
                state.chartData.loading = false
                lastChartParams = ''
              }
            }
          } break
        }
      }
    } catch (e) {
      console.log(e)
    }
  }
  ws.onclose = function (){
    state.ws.loading = ElLoading.service({
      lock: true,
      text: '智搜服务重新连接中……',
      background: loadingBg,
    })
    setTimeout(initWS, 5000);
  }
  state.ws.instance = ws
}
onMounted(() => {
  initTheme()
})
</script>

<style lang="scss" scoped>
.archive-main {
  width: 100%;
  height: 100%;
  background-color: #F6F7FB;
  display: flex;
  flex-direction: column;
  .archive-content {
    flex: 1;
    padding: 24px;
    display: flex;
    gap: 16px;
    overflow: hidden;
    .archive-basic {
      width: 362px;
      height: 100%;
      background: linear-gradient( 180deg, rgba(var(--cus-main-color-rgb), 0.2) 0%, rgba(var(--cus-main-color-rgb),0) 100%), #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(46,129,255,0.2);
      border-radius: 4px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .archive-basic-title {
        display: flex;
        align-items: center;
        gap: 8px;
        .main {
          font-weight: bold;
          font-size: 21px;
          color: var(--cus-main-color);
        }
        .tag {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 8px;
          background: #f8e5e5;
          border-radius: 2px;
          border: 1px solid #FF5454;
          font-size: 12px;
          color: #FF5454;
        }
      }
      .archive-basic-sub {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--cus-text-color-2);
        line-height: 16px;
        gap: 10px;
        .line {
          width: 1px;
          height: 10px;
          background-color: var(--cus-text-color-4);
        }
      }
      .archive-basic-avatar {
        width: 100%;
        .el-image {
          width: 100%;
          .image-slot {
            width: 100%;
            >img {
              width: 100%;
            }
          }
        }
      }
      .archive-basic-cols {
        display: flex;
        flex-wrap: wrap;
        row-gap: 12px;
        .cols-item {
          font-size: 14px;
          min-width: 50%;
          .label {
            font-weight: bold;
            color: var(--cus-text-color-1);
          }
          .value {
            margin-top: 2px;
            color: var(--cus-text-color-2);
            text-align: justify;
          }
        }
      }
    }
    .archive-list {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      :deep(.archive-list-tabs) {
        width: 100%;
        .el-tabs__header {
          margin: 0;
          height: 45px;
          .el-tabs__nav-wrap {
            height: 100%;
            &:after {
              display: none;
            }
            .el-tabs__nav-prev, .el-tabs__nav-next {
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .el-tabs__nav-scroll {
              height: 100%;
              .el-tabs__nav {
                height: 100%;
                .el-tabs__item {
                  height: 100%;
                  font-size: 16px;
                  color: var(--cus-text-color-2);
                  padding: 0 16px;
                  &.is-active {
                    background-color: #FFFFFF;
                    box-shadow: 0px 4px 10px 0px rgba(62,123,250,0.1);
                    border-radius: 8px 8px 0px 0px;
                  }
                }
              }
            }
          }
        }
      }
      .archive-list-block {
        flex: 1;
        background-color: #FFFFFF;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        overflow: hidden;
        &:first-child {
          border-top-right-radius: 8px;
        }
        &:last-child {
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
        .archive-list-block-title {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          color: var(--cus-text-color-1);
          .svg-icon {
            margin-right: 8px;
          }
        }
        .archive-list-block-page {
          flex: 1;
          overflow: hidden;
        }
      }
    }
  }
}
</style>