统计ws

src/style/cus.scss

@@ -1,4 +1,10 @@
 :root {
+  --cus-main-color: rgba(46, 129, 255, 1);
+  --cus-main-color-rgb: 46, 129, 255;
+  --cus-text-color-1: #303133;
+  --cus-text-color-2: #606266;
+  --cus-text-color-3: #909399;
+  --cus-text-color-4: #C0C4CC;
 }
 
 .__hover {

src/style/initRootVar.ts

@@ -7,7 +7,6 @@ export default (config) => {
     return [46, 129, 255];
   }
   const mainDefault = 'rgba(46, 129, 255, 1)'
-  console.log(config)
   document.documentElement.style.setProperty('--cus-main-color', config.mainColor || mainDefault) // 主题色
   document.documentElement.style.setProperty('--cus-main-color-rgb', extractRgbFromRgba(config.mainColor || mainDefault).join(',')) // 主题色rgb
   document.documentElement.style.setProperty('--cus-text-color-1', config.textColor1 || 'rgba(48,49,51,1)') // 文字色1

src/views/web/list/index.vue

@@ -18,7 +18,13 @@
         用户名
       </div>
     </div>
-    <div class="list-content">
+    <div class="count-percent" v-if="state.ws.countPercent < 100">
+      <div class="bar-bg"><div class="bar-block" :style="{width: state.ws.countPercent + '%'}"/></div>
+      已加载{{state.ws.countPercent}}%
+    </div>
+    <div class="list-content" :style="{
+      paddingTop: state.ws.countPercent == 100 ? '24px' : 0
+    }">
       <div class="list-filter">
         <div class="label">检索条件:</div>
         <div class="value">
@@ -37,25 +43,25 @@
       </div>
       <div class="list-tab">
         <template v-for="item in state.resultParams.tree">
-          <div class="list-tab-item __hover" :class="{active: item.treeId === state.resultParams.activeTab}" @click="state.resultParams.activeTab = item.treeId">
-            {{item.treeName}}<span class="total">(898989898989)</span>
+          <div class="list-tab-item __hover" :class="{active: item.treeId === state.resultParams.activeTab}" @click="state.resultParams.activeTab = item.treeId" v-if="item.__count > 0">
+            {{item.treeName}}<span class="total">({{ item.__count }})</span>
           </div>
         </template>
       </div>
       <div class="list-result" v-if="state.resultParams.activeTab">
         <div class="list-result-tree">
           <template v-for="item in state.resultParams.tree.filter(v => v.treeId === state.resultParams.activeTab)[0].children">
-            <div class="list-result-tree-item">
+            <div class="list-result-tree-item" v-if="item.__count > 0">
               <div class="item-parent __hover" @click="item.__expend = !item.__expend">
                 <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
                 {{item.treeName}}
-                <span class="total">({{item.__total}})</span>
+                <span class="total">({{item.__count}})</span>
                 <SvgIcon class="expend" name="arrow_1" :rotate="item.__expend ? -90 : 90" color="var(--cus-text-color-4)"/>
               </div>
               <template v-if="item.__expend">
                 <template v-for="son in item.children">
-                  <div class="item-son __hover" :class="{active: son.treeId === state.resultParams.activeIndex}" @click="state.resultParams.activeIndex = son.treeId">
-                    {{son.treeName}}<span class="total">({{son.__total}})</span>
+                  <div class="item-son __hover" :class="{active: son.treeId === state.resultParams.activeIndex}" @click="state.resultParams.activeIndex = son.treeId" v-if="son.__count > 0">
+                    {{son.treeName}}<span class="total">({{son.__count}})</span>
                   </div>
                 </template>
               </template>
@@ -67,7 +73,7 @@
             <div class="table-head-index">
               <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
               {{currentIndexCpt.treeName}}
-              <span class="total">({{currentIndexCpt.__total}})</span>
+              <span class="total">({{currentIndexCpt.__count}})</span>
             </div>
             <div class="table-head-infos">
               <div class="main">
@@ -153,7 +159,14 @@
                     <div class="main-row">
                       <template v-if="tableConfigCpt?.cardImg.value">
                         <div class="main-row-img">
-                          <img :src="item[tableConfigCpt?.cardImg.value]"/>
+                          <el-image
+                            :src="item[tableConfigCpt?.cardImg.value]"
+                            :zoom-rate="1.2"
+                            :max-scale="7"
+                            :min-scale="0.2"
+                            :preview-src-list="[item[tableConfigCpt?.cardImg.value]]"
+                            :preview-teleported="true"
+                          />
                         </div>
                       </template>
                       <div class="main-row-param" v-html="item[tableConfigCpt.cardMain.value]"/>
@@ -201,6 +214,7 @@
 import {computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {useWebStore} from "@/stores";
+import {ElLoading} from "element-plus";
 
 const {proxy} = getCurrentInstance()
 const WebStore = useWebStore()
@@ -229,9 +243,10 @@ const state: any = reactive({
     activeIndex: '',
     indexConfig: {}
   },
-  wsFunc: {
-    total: () => {},
-    page: () => {}
+  ws: {
+    count: () => {},
+    list: () => {},
+    countPercent: 50
   },
   tableParams: {
     model: 'list',
@@ -295,7 +310,15 @@ const tableConfigCpt = computed(() => {
 
 const initArea = () => {
   WebStore.getSearchAreaTree().then(res => {
-    state.cascaderParams.options = res
+    const arr = []
+    JSON.parse(JSON.stringify(res)).forEach(v => {
+      v.children.forEach(c => {
+        c.__children = JSON.parse(JSON.stringify(c.children))
+        c.children = []
+      })
+      arr.push(v)
+    })
+    state.cascaderParams.options = arr
     onSearch()
   })
 }
@@ -306,7 +329,7 @@ const onDelFilter = (index) => {
 }
 const onSearch = () => {
   state.tableParams = {
-    model: 'card',
+    model: 'list',
     pageNum: 1,
     pageSize: 10,
     total: 0,
@@ -354,9 +377,7 @@ const initResultTree = () => {
   } else {
     state.resultParams.tree = JSON.parse(JSON.stringify(WebStore.searchAreaTree))
   }
-  state.resultParams.activeTab = state.resultParams.tree[0].treeId
-  state.resultParams.tree[0].children[0].__expend = true
-  state.resultParams.activeIndex = state.resultParams.tree[0].children[0].children[0].treeId
+  state.ws.count()
 }
 const getIndexConfig = () => {
   state.resultParams.indexConfig = {}
@@ -381,25 +402,7 @@ watch(() => state.resultParams.activeIndex, (n) => {
     getIndexConfig()
   }
 })
-onBeforeMount(() => {
-  const ws: any = new WebSocket('ws://localhost:18375')
-  ws.onopen = (e) => {
-    console.log(e)
-    // const str = {}
-    // ws.send(JSON.stringify(str))
-  }
-  ws.onmessage = (e) => {
-    try {
-      const json = JSON.parse(e.data)
-      console.log(json)
-    } catch (e) {
-
-    }
-  }
-  state.ws = ws
-})
 onMounted(() => {
-  initArea()
   const {text, index} = route.query
   if (!text) {
     router.replace({
@@ -410,6 +413,115 @@ onMounted(() => {
     if (index) {
       state.cascaderParams.value = index.split(',')
     }
+    const ws: any = new WebSocket('ws://localhost:18375')
+    let sessionId = ''
+    let timestamp = new Date().getTime()
+    let lastCountParams = ''
+    let lastCountStep = 0
+    let lastCountStep_ = 0
+    let lastListParams = ''
+    ws.onopen = (e) => {
+      state.ws.count = () => {
+        state.ws.countPercent = 0
+        // 如果有的话，终止上一次请求
+        if (lastCountParams) {
+          const p = JSON.parse(lastCountParams)
+          p.flag = 'stop'
+          ws.send(JSON.stringify(p))
+        }
+        // 执行新的请求
+        let step = 0
+        const builder = state.resultParams.tree.map(tag => ({
+          tagCode: tag.treeId,
+          datas: tag.children.map(type => {
+            step++
+            return {
+              typeCode: type.treeId,
+              datas: type.children.map(index => ({
+                indexCode: index.treeId,
+                datas: []
+              }))
+            }
+          })
+        }))
+        lastCountStep = step
+        lastCountStep_ = step
+        timestamp = new Date().getTime()
+        const params = {
+          builder: builder,
+          keyData: state.searchParams.text,
+          type: 'count',
+          sessionId: sessionId,
+          timestamp: timestamp,
+          flag: 'run',
+          orderBy: {}
+        }
+        lastCountParams = JSON.stringify(params)
+        ws.send(lastCountParams)
+      }
+    }
+    ws.onmessage = (e) => {
+      try {
+        const json = JSON.parse(e.data)
+        if (typeof json === 'string') {
+          sessionId = json
+          initArea()
+        } else {
+          switch (json.type) {
+            case 'count': {
+              const p = JSON.parse(lastCountParams)
+              // 返回为最新批次的
+              if (json.timestamp == p.timestamp) {
+                const resTag = json.datas[0]
+                const resType = resTag.datas[0]
+                state.resultParams.tree.forEach(tag => {
+                  if (tag.treeId == resTag.tagCode) {
+                    tag.children.forEach(type => {
+                      if (type.treeId == resType.typeCode) {
+                        resType.datas.forEach((index, indexI) => {
+                          type.children[indexI].__count = index.data
+                          type.__count = type.__count ? (type.__count + index.data) : index.data
+                          tag.__count = tag.__count ? (tag.__count + index.data) : index.data
+                        })
+                      }
+                    })
+                  }
+                })
+                for (let tagI = 0; tagI < state.resultParams.tree.length; tagI++) {
+                  const tag = state.resultParams.tree[tagI]
+                  if (tag.__count > 0) {
+                    state.resultParams.activeTab = tag.treeId
+                    for (let typeI = 0; typeI < tag.children.length; typeI++) {
+                      const type = tag.children[typeI]
+                      if (type.__count > 0) {
+                        type.__expend = true
+                        for (let indexI = 0; indexI < type.children.length; indexI++) {
+                          const index = type.children[indexI]
+                          if (index.__count > 0) {
+                            state.resultParams.activeIndex = index.treeId
+                          }
+                          break
+                        }
+                        break
+                      }
+                    }
+                    break
+                  }
+                }
+                lastCountStep--
+                state.ws.countPercent = ((lastCountStep_ - lastCountStep) / lastCountStep_ * 100).toFixed(0)
+                if (lastCountStep === 0) {
+                  lastCountParams = ''
+                }
+              }
+            } break
+          }
+        }
+      } catch (e) {
+
+      }
+    }
+    state.ws = ws
   }
 })
 </script>
@@ -488,10 +600,34 @@ onMounted(() => {
       }
     }
   }
+  .count-percent {
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 10px;
+    color: var(---cus-text-color-2);
+    padding: 10px 24px;
+    line-height: 1;
+    .bar-bg {
+      flex: 1;
+      margin-right: 10px;
+      background-color: rgba(var(--cus-main-color-rgb), 0.1);
+      height: 8px;
+      border-radius: 8px;
+      position: relative;
+      .bar-block {
+        transition: 1s;
+        border-radius: 8px;
+        position: absolute;
+        height: 100%;
+        background-color: rgba(var(--cus-main-color-rgb), 1);
+      }
+    }
+  }
   .list-content {
     overflow: hidden;
     flex: 1;
-    padding: 24px;
+    padding: 0 24px 24px 24px;
     display: flex;
     flex-direction: column;
     $filterLineHeight: 26px;
@@ -805,9 +941,13 @@ onMounted(() => {
                     height: 40px;
                     border-radius: 4px;
                     margin-right: 10px;
-                    >img {
+                    .el-image {
                       width: 100%;
                       height: 100%;
+                      >img {
+                        width: 100%;
+                        height: 100%;
+                      }
                     }
                   }
                   .main-row-param {