档案主索引

src/views/web/archive/index.vue

@@ -1,22 +1,30 @@
 <template>
-  <div class="archive-people">
+  <div class="archive-main">
     <HeadMenu/>
-    <div class="people-content">
-      <div class="people-basic">
-        <div class="people-basic-title">
+    <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">张三丰</span>
-          <span class="tag">布控人员</span>
+          <span class="main">{{state.mainObj.data[themeConfigCpt.main.indexStyle.mainParam]}}</span>
+          <template v-for="k in themeConfigCpt.main.indexStyle.tagParams">
+            <span class="tag">{{ state.mainObj.data[k] }}</span>
+          </template>
         </div>
-        <div class="people-basic-sub">
-          <span>男</span>
-          <span class="line"/>
-          <span>25岁</span>
-          <span class="line"/>
-          <span>未婚</span>
+        <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="people-basic-avatar">
-          <el-image>
+        <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-people_avatar.png" alt="暂无图片"/>
@@ -24,114 +32,102 @@
             </template>
           </el-image>
         </div>
-        <div class="people-basic-cols">
-          <div class="cols-item">
-            <div class="label">文化程度</div>
-            <div class="value">本科</div>
-          </div>
-          <div class="cols-item">
-            <div class="label">身份证</div>
-            <div class="value">120120120120120120</div>
-          </div>
-          <div class="cols-item">
-            <div class="label">户籍地</div>
-            <div class="value">海南省陵水黎族自治县新村镇</div>
-          </div>
-          <div class="cols-item">
-            <div class="label">现住地址</div>
-            <div class="value">海南省陵水黎族自治县新村镇海南省陵水黎族自治县新村镇</div>
-          </div>
-        </div>
-      </div>
-      <div class="people-list">
-        <el-tabs v-model="state.activeTab" class="people-list-tabs">
-          <el-tab-pane label="首页" name="index"/>
-          <el-tab-pane label="人员证件信息" name="list"/>
-          <el-tab-pane label="Task" name="fourth"/>
-        </el-tabs>
-        <template v-if="state.activeTab === 'index'">
-          <div class="people-list-block">
-            <div class="people-list-block-title">
-              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>关系图谱
-            </div>
-            <div class="people-list-block-page">
-              <RelationChart/>
-            </div>
-          </div>
-          <div class="people-list-block">
-            <div class="people-list-block-title">
-              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>人员证件信息
-            </div>
-            <div class="people-list-block-page">
-              <CusTable
-                :page-num="state.query.page.pageNum"
-                :page-size="state.query.page.pageSize"
-                :total="state.query.result.total"
-                :data="state.query.result.data"
-                :table-head="state.query.tableHead"
-                @handlePage="onPage"
-              >
-              </CusTable>
+        <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>
-          </div>
-        </template>
-        <template v-else>
-          <div class="people-list-block">
-            <div class="people-list-block-title">
-              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>人员证件信息
-            </div>
-            <div class="people-list-block-page">
-              <CusTable
-                :page-num="state.query.page.pageNum"
-                :page-size="state.query.page.pageSize"
-                :total="state.query.result.total"
-                :data="state.query.result.data"
-                :table-head="state.query.tableHead"
-                @handlePage="onPage"
-              >
-              </CusTable>
-            </div>
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
+<!--      <div class="archive-list">-->
+<!--        <el-tabs v-model="state.activeTab" class="archive-list-tabs">-->
+<!--          <el-tab-pane label="首页" name="index"/>-->
+<!--          <el-tab-pane label="人员证件信息" name="list"/>-->
+<!--          <el-tab-pane label="Task" name="fourth"/>-->
+<!--        </el-tabs>-->
+<!--        <template v-if="state.activeTab === 'index'">-->
+<!--          <div class="archive-list-block">-->
+<!--            <div class="archive-list-block-title">-->
+<!--              <SvgIcon class="flag" name="flag_1" color="var(&#45;&#45;cus-main-color)"/>关系图谱-->
+<!--            </div>-->
+<!--            <div class="archive-list-block-page">-->
+<!--              <RelationChart/>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--          <div class="archive-list-block">-->
+<!--            <div class="archive-list-block-title">-->
+<!--              <SvgIcon class="flag" name="flag_1" color="var(&#45;&#45;cus-main-color)"/>人员证件信息-->
+<!--            </div>-->
+<!--            <div class="archive-list-block-page">-->
+<!--              <CusTable-->
+<!--                :page-num="state.query.page.pageNum"-->
+<!--                :page-size="state.query.page.pageSize"-->
+<!--                :total="state.query.result.total"-->
+<!--                :data="state.query.result.data"-->
+<!--                :table-head="state.query.tableHead"-->
+<!--                @handlePage="onPage"-->
+<!--              >-->
+<!--              </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(&#45;&#45;cus-main-color)"/>人员证件信息-->
+<!--            </div>-->
+<!--            <div class="archive-list-block-page">-->
+<!--              <CusTable-->
+<!--                :page-num="state.query.page.pageNum"-->
+<!--                :page-size="state.query.page.pageSize"-->
+<!--                :total="state.query.result.total"-->
+<!--                :data="state.query.result.data"-->
+<!--                :table-head="state.query.tableHead"-->
+<!--                @handlePage="onPage"-->
+<!--              >-->
+<!--              </CusTable>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </template>-->
+<!--      </div>-->
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, onMounted, reactive} from "vue";
+import {computed, getCurrentInstance, onMounted, reactive} from "vue";
 import RelationChart from "./relation-chart.vue";
 import {ElLoading, ElMessage} from "element-plus";
+import {useThemeStore} from "@/stores";
+import {frontGetThemeByThemeId} from "@/api/modules/web/list";
+import {useRoute} from "vue-router";
 
+const ThemeStore = useThemeStore()
+const route = useRoute()
 const {proxy} = getCurrentInstance()
 const state: any = reactive({
   activeTab: 'index',
-  query: {
+  tabTable: {
+    loading: false,
+    page: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    tableHead: [],
+    result: {
+      total: 0,
+      data: []
+    },
+  },
+  chartTable: {
     loading: false,
     page: {
       pageNum: 1,
       pageSize: 10
     },
-    tableHead: [
-      {value: "indexName", label: "索引中文", fixed: 'left', width: 180},
-      {value: "indexTableName", label: "索引表名", fixed: 'left', width: 180, popover: true},
-      {value: "dataSource", label: "数据共享来源", width: 180},
-      {value: "dataOffer", label: "数据提供来源", width: 180},
-      {value: "shareMethod", label: "共享方式", width: 180},
-      {value: "shareCycle", label: "共享周期", width: 180},
-      {value: "pictureField", label: "图片字段", width: 180},
-      {value: "themeMode", label: "主题模式", width: 180},
-      {value: "pictureModeCardNum", label: "图模式卡片数", width: 180},
-      {value: "cardColumnNum", label: "卡片列数", width: 180},
-      {value: "columnModelNum", label: "列模式列数", width: 180},
-      {value: "num", label: "数据量", width: 180},
-      {value: "linkTypeNum", label: "关联分类数量", width: 180},
-      {value: "createTime", label: "创建时间", width: 200},
-      {value: "updateTime", label: "最后修改时间", width: 200},
-      {value: "remark", label: "备注", width: 200},
-    ],
-    form: {},
-    formReal: {},
+    tableHead: [],
     result: {
       total: 0,
       data: []
@@ -139,89 +135,214 @@ const state: any = reactive({
   },
   ws: {
     instance: null,
+    getMain: () => {},
     listFix: () => {},
     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: [],
+    chart: {
+      nodes: [],
+      edges: [],
+    }
+  }
+  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),
+        num: v.weight,
+        name: v.indexNameShort,
+        indexTableName: v.indexTableName
+      })
+    } else if (v.relateIndexId) {
+      res.chart.nodes.push({
+        id: String(v.id),
+        num: v.weight,
+        name: v.indexNameShort,
+        indexTableName: v.indexTableName
+      })
+      res.chart.edges.push({source: String(v.relateIndexId), target: String(v.id)})
+    } else {
+      res.tabs.push({
+        indexName: v.indexName,
+        indexTableName: v.indexTableName,
+        searchParam: getSearchParam(v),
+        tableHead: getTableHead(v)
+      })
+    }
+  })
+  console.log(res)
+  return res
 })
-const loadingBg = 'rgba(0, 0, 0, 0.4)'
 const onPage = (pageNum, pageSize) => {}
+const initTheme = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '获取主题中……',
+    background: ThemeStore.loadingBg
+  })
+  frontGetThemeByThemeId(route.query.themeId).then(res => {
+    if (res.code === 200) {
+      state.themeDetail = res.data
+      loading.close()
+      initWS()
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
 const initWS = () => {
   const ws: any = new WebSocket('/ws-api/smart-ws?userId=1388061846031220738')
   let sessionId = ''
-  let lastListFixParams = ''
+  let lastTabParams = ''
+  let lastMainParams = ''
+  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.listFix = () => {
+    state.ws.getMain = () => {
       // 如果有的话，终止上一次请求
-      if (lastListFixParams) {
-        const p = JSON.parse(lastListFixParams)
+      if (lastMainParams) {
+        const p = JSON.parse(lastMainParams)
         p.flag = 'stop'
         ws.send(JSON.stringify(p))
-        lastListFixParams = ''
+        lastMainParams = ''
       }
       const params = {
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 1,
         type: 'list-fix',
         sessionId: sessionId,
         timestamp: new Date().getTime(),
         flag: 'run',
         orderBy: {},
-        "builder":[
+        builder:[
           {
-            "tagCode":"对象标签",
-            "datas":[
+            tagCode: '',
+            datas:[
               {
-                "typeCode":"人员分类代码",
-                "datas":[
-                  {
-                    "indexCode":"index_seat_smartes_document",
-                    "orderBy":{"aaa":"desc","bbb":"asc"},
-                    "datas":[
-                      {"fieldCode":"sub_title","fieldQueryType":"MATCH","fieldQueryValue":"佛祖fozu-111"},
-                      // {"fieldCode":"title","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"PREFIX"},
-                      // {"fieldCode":"star_num","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"GT"}
-                    ]
-                  },
-                  {
-                    "indexCode":"index_seat_smartes_document",
-                    "orderBy":{"aaa":"desc","bbb":"asc"},
-                    "datas":[
-                      {"fieldCode":"sub_title","fieldQueryType":"MATCH","fieldQueryValue":"佛祖fozu-111"},
-                      // {"fieldCode":"title","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"PREFIX"},
-                      // {"fieldCode":"star_num","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"GT"}
-                    ]
-                  }
-                ]
+                typeCode: '',
+                datas: [themeConfigCpt.value.main.searchParam]
               }
             ]
           }
         ],
       }
-      lastListFixParams = JSON.stringify(params)
-      ws.send(lastListFixParams)
+      lastMainParams = JSON.stringify(params)
+      state.mainObj.loading = true
+      ws.send(lastMainParams)
     }
+    // state.ws.listFix = () => {
+    //   // 如果有的话，终止上一次请求
+    //   if (lastListFixParams) {
+    //     const p = JSON.parse(lastListFixParams)
+    //     p.flag = 'stop'
+    //     ws.send(JSON.stringify(p))
+    //     lastListFixParams = ''
+    //   }
+    //   const params = {
+    //     pageNumber: 1,
+    //     pageSize: 10,
+    //     type: 'list-fix',
+    //     sessionId: sessionId,
+    //     timestamp: new Date().getTime(),
+    //     flag: 'run',
+    //     orderBy: {},
+    //     builder:[
+    //       {
+    //         tagCode: '',
+    //         datas:[
+    //           {
+    //             typeCode: '',
+    //             datas:[
+    //               {
+    //                 indexCode:"index_seat_smartes_document",
+    //                 orderBy:{"aaa":"desc","bbb":"asc"},
+    //                 datas:[
+    //                   {"fieldCode":"sub_title","fieldQueryType":"MATCH","fieldQueryValue":"佛祖fozu-111"},
+    //                   // {"fieldCode":"title","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"PREFIX"},
+    //                   // {"fieldCode":"star_num","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"GT"}
+    //                 ]
+    //               },
+    //             ]
+    //           }
+    //         ]
+    //       }
+    //     ],
+    //   }
+    //   lastListFixParams = JSON.stringify(params)
+    //   ws.send(lastListFixParams)
+    // }
   }
   ws.onmessage = (e) => {
     try {
       const json = JSON.parse(e.data)
       if (json.type === 'session') {
         sessionId = json.sessionId
-        setTimeout(() => {
-          state.ws.listFix()
-        })
+        // 左侧
+        state.ws.getMain()
       } else {
         switch (json.type) {
           case 'list-fix': {
-            const p = JSON.parse(lastListFixParams)
+            const pMain = JSON.parse(lastMainParams)
             // 返回为最新批次的
-            if (json.timestamp == p.timestamp) {
-              state.tableParams.total = json.records
-              state.tableParams.data = json.datas
-              state.tableParams.loading = false
-              lastListFixParams = ''
+            if (json.timestamp == pMain.timestamp) {
+              state.mainObj.loading = false
+              state.mainObj.data = json.datas?.[0] || {}
+              lastMainParams = ''
             }
           } break
         }
@@ -241,23 +362,23 @@ const initWS = () => {
   state.ws.instance = ws
 }
 onMounted(() => {
-  initWS()
+  initTheme()
 })
 </script>
 
 <style lang="scss" scoped>
-.archive-people {
+.archive-main {
   width: 100%;
   height: 100%;
   background-color: #F6F7FB;
   display: flex;
   flex-direction: column;
-  .people-content {
+  .archive-content {
     flex: 1;
     padding: 24px;
     display: flex;
     gap: 16px;
-    .people-basic {
+    .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;
@@ -267,7 +388,7 @@ onMounted(() => {
       display: flex;
       flex-direction: column;
       gap: 10px;
-      .people-basic-title {
+      .archive-basic-title {
         display: flex;
         align-items: center;
         gap: 8px;
@@ -288,7 +409,7 @@ onMounted(() => {
           color: #FF5454;
         }
       }
-      .people-basic-sub {
+      .archive-basic-sub {
         display: flex;
         align-items: center;
         font-size: 14px;
@@ -301,10 +422,19 @@ onMounted(() => {
           background-color: var(--cus-text-color-4);
         }
       }
-      .people-basic-avatar {
+      .archive-basic-avatar {
         width: 100%;
+        .el-image {
+          width: 100%;
+          .image-slot {
+            width: 100%;
+            >img {
+              width: 100%;
+            }
+          }
+        }
       }
-      .people-basic-cols {
+      .archive-basic-cols {
         display: flex;
         flex-wrap: wrap;
         row-gap: 12px;
@@ -323,12 +453,12 @@ onMounted(() => {
         }
       }
     }
-    .people-list {
+    .archive-list {
       flex: 1;
       overflow: hidden;
       display: flex;
       flex-direction: column;
-      :deep(.people-list-tabs) {
+      :deep(.archive-list-tabs) {
         width: 100%;
         .el-tabs__header {
           margin: 0;
@@ -364,7 +494,7 @@ onMounted(() => {
           }
         }
       }
-      .people-list-block {
+      .archive-list-block {
         flex: 1;
         background-color: #FFFFFF;
         padding: 16px;
@@ -378,7 +508,7 @@ onMounted(() => {
           border-bottom-left-radius: 8px;
           border-bottom-right-radius: 8px;
         }
-        .people-list-block-title {
+        .archive-list-block-title {
           display: flex;
           align-items: center;
           font-weight: bold;
@@ -388,7 +518,7 @@ onMounted(() => {
             margin-right: 8px;
           }
         }
-        .people-list-block-page {
+        .archive-list-block-page {
           flex: 1;
         }
       }

src/views/web/list/index.vue

@@ -449,6 +449,11 @@ watch(() => state.resultParams.activeIndex, (n) => {
   }
 })
 const initWS = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '搜索服务连接中……',
+    background: ThemeStore.loadingBg
+  })
   const ws: any = new WebSocket('/ws-api/smart-ws?userId=1388061846031220738')
   let sessionId = ''
   let lastCountParams = ''
@@ -457,6 +462,7 @@ const initWS = () => {
   let lastListParams = ''
   let lastDetailParams = ''
   ws.onopen = (e) => {
+    loading.close()
     state.ws.loading?.close()
     state.ws.loading = null
     state.ws.count = () => {