完成了树状查询与查询列表的绑定等功能，目前差总结和一个日期范围查询安全风险就大功告成了，以下是树状查询侧栏，实现了通过树状查询来对查询结果进行筛选 <transition name="slide"> <div v-show="isSidebarOpen" class="sidebar"> <div class="header-bar"> <div class="title-group"> <div class="tree-header">安全风险统计</div> <div class="update-time">最后更新：{{ lastUpdateTime }}</div> </div> <el-button type="primary" size="small" :loading="loading" @click="handleManualRefresh" plain > <el-icon><Refresh /></el-icon> 刷新数据 </el-button> </div> <div v-loading="loading"> <el-tree :data="treeData" node-key="name" :props="treeProps" :expand-on-click-node="false" > <template #default="{ node, data }"> <div class="tree-node"> <span class="node-name"> {{ getLevelLabel(node.level) }}：{{ data.name }} </span> <div class="node-stats"> <span class="total clickable" @click="handleLevelClick(node, 'total')" > 总数: {{ data.total }} </span> <el-tag v-for="(count, level) in data.levels" :key="level" size="small" :type="getTagType(level)" class="clickable-tag" @click="handleLevelClick(node, level)" > {{ level }}: {{ count }} </el-tag> </div> </div> </template> </el-tree> </div> </div> </transition>
<transition name="slide"> <div v-show="isSidebarOpen" class="sidebar"> <div class="header-bar"> <div class="title-group"> <div class="tree-header">安全风险统计</div> <div class="update-time">最后更新：{{ lastUpdateTime }}</div> </div> <el-button type="primary" size="small" :loading="loading" @click="handleManualRefresh" plain > <el-icon><Refresh /></el-icon> 刷新数据 </el-button> </div> <div v-loading="loading"> <el-tree :data="treeData" node-key="name" :props="treeProps" :expand-on-click-node="false" > <template #default="{ node, data }"> <div class="tree-node"> <span class="node-name"> {{ getLevelLabel(node.level) }}：{{ data.name }} </span> <div class="node-stats"> <span class="total clickable" @click="handleLevelClick(node, 'total')" > 总数: {{ data.total }} </span> <el-tag v-for="(count, level) in data.levels" :key="level" size="small" :type="getTagType(level)" class="clickable-tag" @click="handleLevelClick(node, level)" > {{ level }}: {{ count }} </el-tag> </div> </div> </template> </el-tree> </div> </div> </transition>
浙公网安备 33010602011771号