元数据和数据质量功能迁入

+import request from "@/utils/request";
+
+/**
+ * 元数据-采集任务
+**/
+// 新增
+export const addMetaDataTask = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/add`,
+  method: 'post',
+  data: params
+})
+// 删除
+export const deleteMetaDataTask = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/del`,
+  method: 'delete',
+  data: params
+})
+// 分页查询
+export const getMetaDataTask = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/page-list`,
+  method: 'post',
+  data: params
+})
+// 修改
+export const updateMetaDataTask = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/update`,
+  method: 'put',
+  data: params
+})
+// 详情
+export const getMetaDataTaskDetail = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/detail/${params}`,
+  method: 'get'
+})
+// 上线下线
+export const updateMetaDataState = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/change-state`,
+  method: 'get',
+  params
+})
+// 名称唯一性验证
+export const checkMetaDataTask = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/check-exist`,
+  method: 'post',
+  data: {
+    collectTaskName: params,
+  }
+})
+// 执行元数据采集任务
+export const executeMetaDataTask = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/execute/${params}`,
+  method: 'get'
+})
+// 执行日志
+export const getMetaDataTaskLog = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-exec/page-list`,
+  method: 'post',
+  data: params
+})
+//  
+export const saveMetaReportAnalysis = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage-analysis-report/add`,
+  method: 'post',
+  data: params
+})
+/**
+ * 元数据-元数据查询
+**/ 
+// 树形数据
+export const getMetaTreeData = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-tree-list`,
+  method: 'post',
+  data: params
+})
+// 数据库汇总信息
+export const getMetaDatabaseCollect = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-database-collect-list`,
+  method: 'post',
+  data: params
+})
+// 库分页查询
+export const getMetaDataBase = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-table-collect-list`,
+  method: 'post',
+  data: params
+})
+// 表分页查询
+export const getMetaDataSheet = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-table-detail-list`,
+  method: 'post',
+  data: params
+})
+// 表字段查询
+export const getMetaSheetField = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-table-field-list`,
+  method: 'post',
+  params
+})
+// 表索引查询
+export const getMetaSheetKeys = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-table-index-list`,
+  method: 'post',
+  params
+})
+// 变更查询
+export const getMetaChange = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-collect-change-list`,
+  method: 'post',
+  data: params
+})
+// 变更明细
+export const getMetaChangeRecord = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-change-record-list`,
+  method: 'post',
+  data: params
+})
+//  
+export const getMetacompareList = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-change-compare-list/${params}`,
+  method: 'get',
+  //data: params
+})
+
+// 表信息详情
+export const getMetaDetail = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/detail/${params}`,
+  method: 'get',
+})
+
+/** 根据表获取血缘数据 */
+export const getTableLineage = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage/lineage-query?guid=${params.guid}&lineageType=tb`,
+  method: 'get',
+})
+
+/** 根据字段获取血缘数据 */
+export const getTableFieldLineage = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage/lineage-query?guid=${params.guid}&lineageType=co`,
+  method: 'get',
+})
+
+/** 获取表的所有字段血缘数据 */
+export const getTableAllFieldLineage = (params) =>  request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage/lineage-query-field?databaseName=${params.databaseName}&tableName=${params.tableName}`,
+  method: 'get',
+})
+
+// 查询列表
+export const getMetaList = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/list-meta-all`,
+  method: 'post',
+  data:params
+})
+// 元数据表字段查询
+export const getMetaTableField = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/meta-table-field-list`,
+  method: 'post',
+  params,
+})
+// 保存血缘字段节点
+export const saveLineageField = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage/save-field`,
+  method: 'post',
+  data:params
+})
+// 保存血源节点
+export const saveLineageTable = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage/save-table`,
+  method: 'post',
+  data:params
+})
+// 删除血源节点
+export const delLineageTable = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage/del-vertex?vertexId=${params.vertexId}`,
+  method: 'delete',
+  //data:params
+})
+/** 获取同步任务变更记录 */
+export const getTaskChangeList = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/task-change-record/page-list`,
+  method: 'post',
+  data:params
+})
+
+/** 获取元数据变更记录 */
+export const getMetaChangeList = (params) => request({
+  url: ``,
+  method: 'post',
+  data:params
+})
+
+/** 获取数据库选择列表 */
+export const getDatabase = (params) => request({
+  url: `${import.meta.env.VITE_APP_API_BASEURL}/data-source/get-source-list`,
+  method: 'post',
+  data: params
+})
+
+/** 源数据分析报告 */
+/**查询列表 */
+export const getAnalysisReportList = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage-analysis-report/list`,
+  method: 'post',
+  data: params
+})
+
+/** 根据guid删除 */
+export const delAnalysisRepor = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage-analysis-report/del`,
+  method: 'delete',
+  data: params
+})
+/** 根据guid更新 */
+export const updateAnalysisRepor = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage-analysis-report/update`,
+  method: 'put',
+  data: params
+})
+/** 删除边 */ 
+export const delLineAge = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/lineage/del-edge?euid=${params}`,
+  method: 'delete',
+})
+/** 判断是否有元数据数据 */
+export const checkTableData = (params) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-table/check-table-data/${params}`,
+  method: 'get',
+})
+/**校验任务是否有数据库信息 */ 
+export const checkDatabaseIsExist = (dataSourceGuid) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/check-database-is-exist/${dataSourceGuid}`,
+  method: 'get',
+})
+/**同步任务 变更详情展示 */
+
+export const syncChangeDetail = (guid) => request({
+  url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/task-change-record/sync-change-detail/${guid}`,
+  method: 'get',
+})
\ No newline at end of file

+import request from "@/utils/request";
+
+/** 获取质量模型对应的所有分组表格数据 */
+export const getQualityTreeData = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-group/quality-model-tree` + (params ? `?guid=${params}` : ''),
+    method: 'get'
+})
+
+/** 获取数据源下，对应分组的表数据 */
+export const getQualityTreeDataByDs = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-group/quality-model-tree?guid=${params.guid}&dataSourceGuid=${params.dataSourceGuid}`,
+    method: 'get'
+})
+
+/** 获取质量模型对应的所有分组表格分页数据 */
+export const getQualityGroupData = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-group/page-list`,
+    method: 'post',
+    data: params
+})
+
+/** 删除质量模型的指定分组。 */
+export const deleteGroup = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-group/del`,
+    method: 'delete',
+    data: params
+})
+
+/** 添加分组 */
+export const addQualityGroup = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-group/add`,
+    method: 'post',
+    data: params
+})
+
+/** 修改分组 */
+export const updateQualityGroup = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-group/update`,
+    method: 'put',
+    data: params
+})
+
+/** 获取质量分组对应的表格分页数据 */
+export const getQualityTable = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/page-list`,
+    method: 'post',
+    data: params
+})
+
+/** 删除质检表 */
+export const deleteQualityTable = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/del`,
+    method: 'delete',
+    data: params
+})
+
+/** 获取质量表对应的所有规则数据 */
+export const getQualityTableRule = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/list/model-rule`,
+    method: 'post',
+    data: params
+})
+
+/** 删除质检表规则 */
+export const deleteQualityTableRule = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/conf/del?ruleConfGuid=${params}`,
+    method: 'delete',
+    data: params
+})
+
+/** 更新质检表规则的禁用和启用状态 */
+export const updateRuleBizState = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/conf/upate-bizstate?ruleConfGuid=${params.ruleConfGuid}&bizState=${params.bizState}`,
+    method: 'post',
+})
+
+/** 获取数据库表列表 */
+export const getDatabase = (params) => request({
+    url: `${import.meta.env.VITE_APP_API_BASEURL}/data-source/get-source-list`,
+    method: 'post',
+    data: params
+})
+
+/** 新建质检表，获取主题域分层的主题表树结构 */
+export const getSubjectTableTree = (params) => request({
+    url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/data-catalog-directory/directory-tree-list`,
+    method: 'post',
+    data: params
+})
+
+/** 新建质检表，获取主题域分层的主题表树结构 */
+export const getSubjectTableByDomain = (params) => request({
+    url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/data-catalog-subject/list-by-domain-guid?domainGuid=${params}`,
+    method: 'get',
+    data: params
+})
+
+/** 获取主题表的字段列表 */
+export const getSubjectFields = (params) => request({
+    url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/data-catalog-subject/field/list?subjectGuid=${params}`,
+    method: 'get',
+})
+
+/** 表的逻辑条件和sql检验。  */
+export const validateSubjectTableRule = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/sql-operate/check-sql`,
+    method: 'post',
+    data: params
+})
+
+/** 自定义sql检验 */
+export const validateCustomSql = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/conf/check-custom-sql`,
+    method: 'post',
+    data: params
+})
+
+/** 批量验证过滤条件 */
+export const batchValidateSubjectTableRule = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/sql-operate/batch-check-sql`,
+    method: 'post',
+    data: params
+})
+
+/** 保存质检表 */
+export const saveQualityTable = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/add`,
+    method: 'post',
+    data: params
+})
+
+// 获取规则类型的接口
+export const getRuleTypeList = () => request({
+    url:`${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-rule/list`,
+    method: 'post',
+    data: {}
+})
+
+// 获取规则大类的接口
+export const getLargeCategoryList = () => request({
+    url:`${import.meta.env.VITE_APP_API_BASEURL}/data-dict/get-data-list`,
+    method: 'post',
+    data: { paramCode: "LARGE-CATEGORY" }
+})
+
+// 获取规则小类的接口
+export const getSmallCategoryList = () => request({
+    url:`${import.meta.env.VITE_APP_API_BASEURL}/data-dict/get-data-list`,
+    method: 'post',
+    data: { paramCode: "SMALL-CATEGORY" }
+})
+
+// 根据规则guid获取规则的详情信息。
+export const getRuleConfDetail = (param) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/conf/detail?ruleConfGuid=${param}`,
+    method: 'get'
+})
+
+// 根据质检模型guid获取详情信息。
+export const getModelDetail = (param) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/detail/${param}`,
+    method: 'get'
+})
+
+// 更新规则信息。
+export const updateModelRule = (params) => request({
+    url:`${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/conf/update`,
+    method: 'post',
+    data: params
+})
\ No newline at end of file

+import request from "@/utils/request";
+
+/** 根据类型获取方案列表 */
+export const getPlanList = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/list`,
+    method: 'post',
+    data: params
+})
+
+/** 删除方案 */
+export const deletePlan = (guids) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/del`,
+    method: 'delete',
+    data: guids
+})
+
+/** 更新指定方案的状态上线，下线。 */
+export const updateQualityPlanState = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/state-change?guid=${params.guid}&state=${params.state}`,
+    method: 'post'
+})
+
+/** 手动执行方案 */
+export const executePlan = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/exec-plan?planGuid=${params}`,
+    method: 'post'
+})
+
+/** 获取方案详情，用于编辑 */
+export const getAssessPlanDetail = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/detail/${params}`,
+    method: 'get'
+})
+
+/** 获取方案详情中的过滤条件，用于编辑 */
+export const getPlanFilterDetail = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/query-plan-filter?planGuid=${params}`,
+    method: 'get'
+})
+
+/** 获取方案查看详情列表数据。 */
+export const getAssessDetailTableData = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/query-exec-list`,
+    method: 'post',
+    data: params
+})
+
+/** 根据执行guid，获取方案执行详情。 */
+export const getExecPlanDetailTableData = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/query-exec-detail?planGuid=${params.planGuid}&planExecGuid=${params.planExecGuid}`,
+    method: 'get'
+})
+
+/** 获取方案详情中每个表的规则详细执行列表数据。 */
+export const getAssessTableRulesData = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/query-exec-table-detail?planExecGuid=${params.planExecGuid}&qualityModelGuid=${params.qualityModelGuid}`,
+    method: 'get'
+})
+
+/** 获取脏数据查询 */
+export const getQueryDirtyData = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/query-dirty-data`,
+    method: 'post',
+    data: params
+})
+
+/** 获取脏数据字段列表 */ 
+export const getQueryDirtyFields = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/query-dirty-data-column?qualityModelGuid=${params}`,
+    method: 'get'
+})
+
+/** 获取数据质量模型统计 */
+export const getModelCountList = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/list/model-count`,
+    method: 'post',
+    data: params
+})
+
+/** 获取规则大类统计 */
+export const getModelRuleCount = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/list/model-rule-category-count`,
+    method: 'post',
+    data: params
+})
+
+/** 根据modelGuid获取详细的规则统计 */
+export const getModelRules = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/list/model-rule`,
+    method: 'post',
+    data: params
+})
+
+/** 检查质检评估方案名称是否重复 */
+export const checkPlanExist = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/exist?planName=${params}`,
+    method: 'get'
+})
+
+/** 获取有效的数据分组，用于评估 表选择 */
+export const getValidGroup = () => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-group/valid-group-list`,
+    method: 'get'
+})
+
+/** 获取数据库列表 */
+export const getModelDbGp = (dsGuid: any = null) =>  request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model/list/model-db-gp` + (!dsGuid ? '' : `?dataSourceGuid=${dsGuid}`),
+    method: 'get'
+})
+
+/** 保存质量方案 */
+export const saveQualityPlan = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/add`,
+    method: 'post',
+    data: params
+})
+
+/** 更新质量方案 */
+export const updateQualityPlan = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/update`,
+    method: 'put',
+    data: params
+})
+
+/** 下载脏数据 */
+export const downloadDirtyData = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-plan/down-dirty-data`,
+    method: 'post',
+    data: params,
+    responseType: 'blob'
+})
+
+/** 获取对应执行方案的规则详情 */
+export const getRecordRuleConfDetail = (param) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-model-record/conf/detail?ruleConfGuid=${param.ruleConfGuid}&planExecGuid=${param.planExecGuid}`,
+    method: 'get'
+});
\ No newline at end of file

+/** 用于质量分析报告模块 */
+import request from "@/utils/request";
+
+/** 获取质量分析报告列表数据。 */
+export const getQualityWordList = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/page-list`,
+    method: 'post',
+    data: params
+})
+
+/** 删除质量分析报告 */
+export const deleteQualityWord = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/del`,
+    method: 'delete',
+    data: params
+})
+
+/** 添加质量报告 */
+export const addQualityWord = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/add`,
+    method: 'post',
+    data: params
+})
+
+/** 更新质量报告 */
+export const updateQualityWord = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/update`,
+    method: 'put',
+    data: params
+})
+
+/** 根据质量报告获取对应的执行日志。 */
+export const getWordLogList = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/page-exec-list`,
+    method: 'post',
+    data: params
+});
+
+/** 获取质量分析报告的详细内容，根绝报告guid。 */
+export const getReportDetail = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/get-report-data`,
+    method: 'post',
+    data: params
+});
+
+/** 获取数据质量一级指标得分统计 */
+export const getLargeCategoryScore = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/get-largeCategory-score?reportExecGuid=${params}`,
+    method: 'get'
+});
+
+/** 获取方案执行明细 */ 
+export const getPlanDetail= (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/query-exec-table-detail?reportExecGuid=${params.reportExecGuid}&planGuid=${params.planGuid}`,
+    method: 'get'
+});
+
+/** 获取方案执行表规则查看 */
+export const getTableRuleDetail= (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/query-exec-table-rule-detail?reportExecGuid=${params}`,
+    method: 'get'
+});
+ 
+/** 手动执行报告 */
+export const executeReport = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/exec?guid=${params}`,
+    method: 'get'
+})
+
+/** html转word接口 */
+export const htmlToWord = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/download/html-to-word`,
+    method: 'postJsonD',
+    data: params,
+    responseType: 'blob'
+});
+
+/**上下线 */
+
+export const stateChange = (params) => request({
+    url: `${import.meta.env.VITE_APP_QUALITY_BASEURL}/quality-analysis-report/state-change?guid=${params.guid}&state=${params.state}`,
+    method: 'post',
+    
+});
\ No newline at end of file

+/** 通用的分页配置 */
+export const commonPageConfig = {
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ]
+}
\ No newline at end of file

@@ -36,6 +36,10 @@ const pageCount = computed(() => {
   return Math.ceil(props.pageInfo.rows / props.pageInfo.limit)
   return Math.ceil(props.pageInfo.rows / props.pageInfo.limit)
 })
 })
 
 
+const pagerCount = computed(() => {
+  return props.pageInfo.pagerCount ?? 7;
+})
+
 const pageType = computed({
 const pageType = computed({
   get: () => {
   get: () => {
     return props.pageInfo.type
     return props.pageInfo.type
@@ -135,7 +139,7 @@ function inputPageJump(val) {
           条数据</span>
           条数据</span>
       </el-pagination>
       </el-pagination>
       <el-pagination small layout="prev, slot, next" :total="pageTotal" :default-page-size="pageLimit"
       <el-pagination small layout="prev, slot, next" :total="pageTotal" :default-page-size="pageLimit"
-        :page-count="pageCount" :current-page="parseInt(pageNum)" @current-change="pageCurrentChange">
+        :page-count="pageCount" :pager-count="pagerCount" :current-page="parseInt(pageNum)" @current-change="pageCurrentChange">
         <div class="page_code">
         <div class="page_code">
           <el-input class="pagnination" type="number" :min="1" :max="pageCount" v-model.trim="pageNumInput" size="small"
           <el-input class="pagnination" type="number" :min="1" :max="pageCount" v-model.trim="pageNumInput" size="small"
             style="width: 40px" @input="handleInput" @change="inputPageJump" :disabled="pageCount <= 1" />
             style="width: 40px" @input="handleInput" @change="inputPageJump" :disabled="pageCount <= 1" />
@@ -162,7 +166,7 @@ function inputPageJump(val) {
           }}</span>
           }}</span>
           条数据</span>
           条数据</span>
       </el-pagination>
       </el-pagination>
-      <el-pagination background small layout="prev, pager, next, slot" :total="pageTotal" :default-page-size="pageLimit"
+      <el-pagination background small layout="prev, pager, next, slot" :total="pageTotal" :default-page-size="pageLimit" :pager-count="pagerCount"
         :page-count="pageCount" :current-page="pageCurr" @current-change="pageCurrentChange">
         :page-count="pageCount" :current-page="pageCurr" @current-change="pageCurrentChange">
         <div class="page_jumper">
         <div class="page_jumper">
           <el-input class="pagnination" type="number" :min="1" :max="pageCount" v-model.trim="pageNumInput" size="small"
           <el-input class="pagnination" type="number" :min="1" :max="pageCount" v-model.trim="pageNumInput" size="small"
@@ -237,4 +241,4 @@ function inputPageJump(val) {
     padding: 0 8px;
     padding: 0 8px;
   }
   }
 }
 }
-</style>@/utils/common
\ No newline at end of file
+</style>
\ No newline at end of file

+import type { RouteRecordRaw } from 'vue-router'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/data-meta/collect-task',
+    component: Layout,
+    meta: {
+      title: '采集任务',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: '',
+        name: 'collectorTask',
+        component: () => import('@/views/data_meta/collectorTask.vue'),
+        meta: {
+          title: '采集任务',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'excution-log',
+        name: 'excutionLog',
+        component: () => import('@/views/data_meta/executionLog.vue'),
+        meta: {
+          title: '采集日志',
+          sidebar: false,
+          breadcrumb: false,
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.name) {
+            to.meta.title = `采集日志-${to.query.name}`;
+          }
+        }
+      },
+    ],
+  },
+  {
+    path: '/data-meta/metadata-query',
+    component: Layout,
+    meta: {
+      title: '元数据查询',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: '',
+        name: 'metadataQuery',
+        component: () => import('@/views/data_meta/metadataQuery.vue'),
+        meta: {
+          title: '元数据查询',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'meta-sheet',
+        name: 'metaSheet',
+        component: () => import('@/views/data_meta/metaSheet.vue'),
+        meta: {
+          title: '元数据详情-',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.name) {
+            to.meta.title = `元数据详情-${to.query.name}`;
+          }
+        }
+      },
+    ],
+  },
+  {
+    path: '/data-meta/metadata-lineage',
+    component: Layout,
+    meta: {
+      title: '元数据血缘',
+      icon: 'ep:grid',
+    },
+    children: [
+      {
+        path: 'analysis-view',
+        name: 'analysisView',
+        component: () => import('@/views/data_meta/analysisView.vue'),
+        meta: {
+          title: '查看血缘',
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'change-detection',
+        name: 'changeDetection',
+        component: () => import('@/views/data_meta/changeDetection.vue'),
+        meta: {
+          title: '血缘变更检测',
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'analysis-reports',
+        name: 'analysisReports',
+        component: () => import('@/views/data_meta/analysisReports.vue'),
+        meta: {
+          title: '血缘关系解析',
+          breadcrumb: false,
+          cache: true
+        },
+      },
+    ],
+  },
+]
+
+export default routes

+import type { RouteRecordRaw } from 'vue-router'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/data-quality/quality-rules',
+    component: Layout,
+    meta: {
+      title: '质量规则管理',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: '',
+        name: 'qualityRules',
+        component: () => import('@/views/data_quality/qualityRules.vue'),
+        meta: {
+          title: '质量规则管理',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'rule-model',
+        name: 'ruleModel',
+        component: () => import('@/views/data_quality/ruleModel.vue'),
+        meta: {
+          title: '新建质检表',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.groupGuid) {
+            to.meta.title = `新建质检表(${to.query.name})`;
+            to.meta.editPage = true;
+          }
+        }
+      },
+      {
+        path: 'rule-template',
+        name: 'ruleTemplate',
+        component: () => import('@/views/data_quality/ruleTemplate.vue'),
+        meta: {
+          title: '新建规则',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.modelGuid) {
+            to.meta.title = `新建规则(${to.query.name})`;
+            to.meta.editPage = true;
+          }
+        }
+      },
+      {
+        path: 'rule-model-edit',
+        name: 'ruleModelEdit',
+        component: () => import('@/views/data_quality/ruleModelEdit.vue'),
+        meta: {
+          title: '编辑',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true,
+          editPage: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.guid) {
+            to.meta.title = `编辑-`;
+          }
+        }
+      },
+      {
+        path: 'import-file',
+        name: 'importFiles',
+        component: () => import('@/views/importFile.vue'),
+        meta: {
+          title: '文件导入',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+      }
+    ],
+  },
+  {
+    path: '/data-quality/quality-assess',
+    component: Layout,
+    meta: {
+      title: '质量评估方案',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: '',
+        name: 'qualityAssess',
+        component: () => import('@/views/data_quality/qualityAssess.vue'),
+        meta: {
+          title: '质量评估方案',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'assess-template',
+        name: 'assessTemplate',
+        component: () => import('@/views/data_quality/assessTemplate.vue'),
+        meta: {
+          title: '新建质量评估方案',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true,
+          editPage: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.detail) {
+            to.meta.title = `方案详情-${to.query.planName}`;
+            to.meta.editPage = false;
+          } else if (to.query.planName) {
+            to.meta.title = `方案编辑-${to.query.planName}`;
+          }
+        }
+      },
+      {
+        path: 'assess-detail',
+        name: 'assessDetail',
+        component: () => import('@/views/data_quality/assessDetail.vue'),
+        meta: {
+          title: '查看结果',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.name) {
+            to.meta.title = `查看结果-${to.query.name}`;
+          }
+        }
+      },
+      {
+        path: 'assess-dirty',
+        name: 'assessDirty',
+        component: () => import('@/views/data_quality/assessDirty.vue'),
+        meta: {
+          title: '脏数据',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.name) {
+            to.meta.title = `脏数据-${to.query.name}`;
+          }
+        }
+      },
+      {
+        path: 'assess-log',
+        name: 'assessLog',
+        component: () => import('@/views/data_quality/assessLog.vue'),
+        meta: {
+          title: '执行日志',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.guid) {
+            to.meta.title = `日志-${to.query.name}`;
+          }
+        }
+      },
+    ],
+  },
+  {
+    path: '/data-quality/quality-analysis',
+    component: Layout,
+    meta: {
+      title: '质量分析报告',
+      icon: 'ep:grid',
+    },
+    children: [
+      {
+        path: '',
+        name: 'qualityAnalysis',
+        component: () => import('@/views/data_quality/qualityAnalysis.vue'),
+        meta: {
+          title: '质量分析报告',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'analysis-log',
+        name: 'analysisLog',
+        component: () => import('@/views/data_quality/analysisLog.vue'),
+        meta: {
+          title: '执行日志',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.name) {
+            to.meta.title = `日志-${to.query.name}`;
+          }
+        }
+      },
+      {
+        path: 'analysis-report',
+        name: 'analysisReport',
+        component: () => import('@/views/data_quality/analysisReport.vue'),
+        meta: {
+          title: '分析报告',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.name) {
+            to.meta.title = `分析报告-${to.query.name}`;
+          }
+        }
+      },
+    ],
+  }
+]
+
+export default routes

@@ -2,6 +2,8 @@ import { setupLayouts } from 'virtual:meta-layouts'
 import generatedRoutes from 'virtual:generated-pages'
 import generatedRoutes from 'virtual:generated-pages'
 import type { RouteRecordRaw } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 import DataAssess from './modules/dataAsset';
 import DataAssess from './modules/dataAsset';
+import DataMeta from './modules/dataMeta';
+import DataQuality from './modules/dataQuality';
 
 
 import type { Route } from '#/global'
 import type { Route } from '#/global'
 import useSettingsStore from '@/store/modules/settings'
 import useSettingsStore from '@/store/modules/settings'
@@ -105,6 +107,22 @@ const asyncRoutes: Route.recordMainRaw[] = [
       ...DataAssess,
       ...DataAssess,
     ],
     ],
   },
   },
+  {
+    meta: {
+      title: '元数据',
+    },
+    children: [
+      ...DataMeta,
+    ],
+  },
+  {
+    meta: {
+      title: '数据质量',
+    },
+    children: [
+      ...DataQuality,
+    ],
+  }
 ]
 ]
 
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {

 const useDataQualityStore = defineStore(
 const useDataQualityStore = defineStore(
-    // 质检表分组guid
-    'modelGroupGuid',
-
-    () => {
-      const modelGroupGuid = ref<string>("")
-  
-      function set(guid: any) {
-        modelGroupGuid.value = guid;
-      }
-
-      const modelGuid = ref<string>("")
-  
-      function setModelGuid(guid: any) {
-        modelGuid.value = guid;
-      }
-
-      const planType = ref<number>(0);
-
-      function setPlanType(type: any) {
-        planType.value = type;
-      }
-
-      const defaultPlanType = ref<number>(1);
-
-      function setDefaultPlanType(type: any) {
-        defaultPlanType.value = type;
-      }
-
-      const isUpdate = ref(false);
-      function setIsUpdate(update: boolean) {
-        isUpdate.value = update;
-      }
-
-
-      return {
-        modelGroupGuid,
-        set,
-        setModelGuid,
-        modelGuid,
-        planType,
-        isUpdate,
-        setIsUpdate,
-        setPlanType,
-        setDefaultPlanType,
-        defaultPlanType
-      }
-    },
-  )
-  
+  // 质检表分组guid
+  'modelGroupGuid',
+
+  () => {
+    const modelGroupGuid = ref<string>("")
+
+    function set(guid: any) {
+      modelGroupGuid.value = guid;
+    }
+
+    const modelGuid = ref<string>("")
+
+    function setModelGuid(guid: any) {
+      modelGuid.value = guid;
+    }
+
+    const planType = ref<number>(0);
+
+    function setPlanType(type: any) {
+      planType.value = type;
+    }
+
+    const defaultPlanType = ref<number>(1);
+
+    function setDefaultPlanType(type: any) {
+      defaultPlanType.value = type;
+    }
+
+    const isUpdate = ref(false);
+    function setIsUpdate(update: boolean) {
+      isUpdate.value = update;
+    }
+
+
+    return {
+      modelGroupGuid,
+      set,
+      setModelGuid,
+      modelGuid,
+      planType,
+      isUpdate,
+      setIsUpdate,
+      setPlanType,
+      setDefaultPlanType,
+      defaultPlanType
+    }
+  },
+)
+
 export default useDataQualityStore
 export default useDataQualityStore
\ No newline at end of file

+<route lang="yaml">
+  name: analysisReports
+  </route>
+
+<script lang="ts" setup name="analysisReports">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from "element-plus";
+import Table from '@/components/Table/index.vue'
+import TableTools from '@/components/Tools/table_tools.vue'
+import {getAnalysisReportList,delAnalysisRepor,updateAnalysisRepor} from "@/api/modules/dataMetaService"
+import { getImageContent } from "@/api/modules/queryService";
+import Dialog from '@/components/Dialog/index.vue'
+import { getDownloadUrl, download } from "@/utils/common";
+import { useRouter } from 'vue-router';
+const router = useRouter()
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  analysisReportName: ''
+});
+const { proxy } = getCurrentInstance() as any;
+const tableInfo = ref({
+  id: 'analysis-reports-table',
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "血缘关系名称", field: "analysisReportName", width: 150 },
+    { label: "数据源中文名称", field: "databaseChName", width: 150 },
+    { label: "表名称", field: "table", width: 150 },
+    { label: "创建人", field: "updateUserName", width: 140 },
+    { label: "创建时间", field: "updateTime", width: 180 }
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 185,
+    fixed: 'right',
+    btns: (scope) => {
+      let btnsArr: any = [
+        { label: "查看", value: "view" },
+        { label: "下载", value: "export" },
+        { label: "重命名", value: "rename" },
+        { label: "删除", value: "delete" },
+      ]
+      return btnsArr;
+    },
+  },
+  loading: false
+})
+
+const currTableData: any = ref({});
+const formItems: any = ref([
+ {
+    label: '血缘关系名称',
+    type: 'input',
+    placeholder: '请输入',
+    field: 'analysisReportName',
+    default: '',
+    clearable: true,
+    required: true
+  },
+])
+const formRules: any = ref({
+  analysisReportName: [
+    {
+      required: true,
+      message: "请填写血缘关系名称",
+      trigger: "blur",
+    },
+  ],
+})
+const formInfo = ref({
+  type: 'form',
+  title: '',
+  formInfo: {
+    id: 'add-dict-form',
+    items: formItems.value,
+    rules: formRules.value
+  }
+})
+const reportDialogRef = ref();
+const dialogInfo = ref({
+  visible: false,
+  size: 500,
+  direction: "column",
+  header: {
+    title: "重命名",
+  },
+  type: '',
+  contents: [
+    formInfo.value,
+  ],
+  footer: {
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "保存", value: "submit" },
+    ],
+  },
+});
+const rowData:any = ref({})
+const tableSearchItemList: any = ref([{
+  type: 'input',
+  label: '',
+  field: 'analysisReportName',
+  default: '',
+  maxlength: 50,
+  placeholder: '血缘关系名称',
+  clearable: true
+}]);
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  let row = scope.row;
+  rowData.value = row
+  currTableData.value = row;
+  if (type == 'view') {
+    getImageContent(row.analysisReportUrl).then((res: any) => {
+    if (res && !res.msg) {
+      let name = row.analysisReportUrl;
+      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
+      if (fileSuffix === 'png') { //浏览器可以支持图片和pdf预览
+        let fileUrl = getDownloadUrl(res, name, fileSuffix);
+        let win = window.open(fileUrl, name);
+        win && (win.document.title = name);
+      } else {
+        download(res, row.analysisReportName, fileSuffix);
+      }
+    } else {
+      res?.msg && ElMessage.error(res?.msg);
+    }
+   });
+  } else if (type == 'export') {
+    getImageContent(row.analysisReportUrl).then((res: any) => {
+    if (res && !res.msg) {
+      let name = row.analysisReportUrl;
+      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
+      download(res, row.analysisReportName, fileSuffix);
+    } else {
+      res?.msg && ElMessage.error(res?.msg);
+    }
+   });
+  } else if (type == "rename") {
+    dialogInfo.value.visible = true
+    formItems.value[0].default = row.analysisReportName
+  } else if (type == "delete") {
+    open("此操作将永久删除, 是否继续?", "warning");
+  }
+};
+
+const dialogBtnClick = (btn,scope)=>{
+  if(btn.value==="cancel") {
+    dialogInfo.value.visible = false
+  } else {
+    const analysisReportName = reportDialogRef.value.dialogFormRef[0].formInline.analysisReportName;
+    if(analysisReportName){
+      console.log(analysisReportName)
+      updateAnalysisRepor({guid:rowData.value.guid,analysisReportName}).then((res:any)=>{
+         if(res.code===proxy.$passCode){
+          ElMessage.success("血缘关系名称修改成功！")
+          getTableData()
+          dialogInfo.value.visible = false
+         } else {
+          ElMessage.error(res.msg)
+         }
+      }).catch((res:any)=>{
+       ElMessage.error(res.msg)
+      })
+    }
+  }
+
+}
+
+const open = (msg, type) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    let guid = currTableData.value.guid;
+    delAnalysisRepor([guid]).then((res:any)=>{
+      if(res.code===proxy.$passCode){
+        getTableData()
+        ElMessage.success("删除成功")
+      } else {
+        ElMessage.error(res.msg)
+      }
+    }).catch((res)=>{
+        ElMessage.error(res.msg)
+    })
+  });
+};
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  getTableData()
+};
+
+
+const getTableData = ()=>{
+  tableInfo.value.loading = true
+  getAnalysisReportList({pageIndex:page.value.curr,pageSize:page.value.limit, analysisReportName: page.value.analysisReportName}).then((res:any)=>{
+     
+    if(res.code===proxy.$passCode){
+      tableInfo.value.data = res.data.records || []
+      tableInfo.value.page.rows = res.data.totalRows
+      tableInfo.value.page.curr = res.data.pageIndex
+      tableInfo.value.page.limit = res.data.pageSize
+      tableInfo.value.loading = false
+    } else {
+      ElMessage.error(res.msg)
+      tableInfo.value.loading = false
+    }
+
+  })
+}
+const toSearch = (val: any, clear: boolean = false) => {
+  if (clear) {
+    page.value.analysisReportName = '';
+  } else {
+    page.value.analysisReportName = val.analysisReportName;
+  }
+  page.value.curr = 1;
+  getTableData();
+};
+onActivated(() => {
+  getTableData()
+});
+
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_tool_wrap">
+      <TableTools :searchItems="tableSearchItemList" :init="false" searchId="report-table-search" @search="toSearch" />
+    </div>
+    <div class="table_panel_wrap full">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+    </div>
+    <Dialog ref="reportDialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick"  />
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-overlay .el-form .el-form-item) {
+    width: calc(100%);
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+    name: analysisView
+    </route>
+
+<script lang="ts" setup name="analysisView">
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from "element-plus";
+import Tree from '@/components/Tree/index.vue';
+import LineageGraph from '@/components/LineageGraph/index.vue';
+import Dialog from "@/components/Dialog/index.vue"
+import {
+  getMetaTreeData,
+  getTableLineage,
+  getTableFieldLineage,
+  getTableAllFieldLineage,
+  getMetaList,
+  getMetaTableField,
+  saveLineageTable,
+  saveLineageField,
+  delLineageTable,
+  saveMetaReportAnalysis,
+  delLineAge,
+  checkTableData
+} from '@/api/modules/dataMetaService';
+import { getFileUrl } from "@/api/modules/queryService"
+import { useRouter, useRoute } from "vue-router";
+import useDataMetaStore from "@/store/modules/dataMeta"
+import { cloneDeep } from 'lodash-es'
+
+const router = useRouter();
+const route = useRoute()
+const emunData = {
+  "1": "数据库表"
+}
+const { proxy } = getCurrentInstance() as any;
+
+/** 添加上下游节点弹框时第一个下拉框下拉第一级内容。 */
+const metaTree = ref([])
+/** 血缘关系数据 */
+const lineageData = ref([]);
+/** 血缘关系页面加载 */
+const lineageLoading = ref(false);
+/** 当前切换字段血缘关系的开关 */
+const switchFieldLineage = ref(false);
+/** 字段血缘关系 */
+const isFieldLineage = ref(false);
+/** 添加上下游节点弹框表单规则配置。 */
+const formRules = ref({
+  databaseGuid: [
+    {
+      required: true,
+      message: "选择元数据名称",
+      trigger: "change",
+    },
+  ],
+  tableName: [
+    {
+      required: true,
+      message: "请添加节点",
+      trigger: "change",
+    },
+  ],
+  tableField: [
+    {
+      required: true,
+      message: "请添加节点",
+      trigger: "change",
+    },
+  ]
+});
+const formItems = ref([{
+  label: '选择元数据名称',
+  type: 'tree-select',
+  placeholder: '请选择',
+  field: 'databaseGuid',
+  default: "",
+  props: {
+    label: "name",
+    children: "children",
+    value: 'guid',
+    isLeaf: 'isLeaf'
+  },
+  teleported: false,
+  filterable: true,
+  checkStrictly: false,
+  options: [],
+  required: true,
+  block: true
+},
+{
+  label: '添加节点',
+  type: 'select',
+  placeholder: '请选择',
+  field: 'tableName',
+  options: [],
+  clearable: true,
+  required: true,
+  block: true,
+  filterable: true,
+  visible: true,
+  readonly: true,
+  teleported: false,
+},
+{
+  label: '添加节点',
+  type: 'tree-select',
+  placeholder: '请选择',
+  field: 'tableField',
+  default: "",
+  props: {
+    label: "label",
+    children: "children",
+    value: 'value',
+    isLeaf: 'isLeaf'
+  },
+  teleported: false,
+  filterable: true,
+  checkStrictly: false,
+  options: [],
+  visible: false,
+  required: true,
+  block: true
+},
+])
+/** 添加上下游节点时记录的当前选择的添加节点信息，以及当前操作的节点信息。 */
+const formLine: any = ref({})
+const dialogInfo = ref({
+  visible: false,
+  size: 500,
+  direction: "column",
+  showClose: true,
+  modalClass: "createNode",
+  header: {
+    title: "添加上游节点",
+  },
+  type: '',
+  addType: 'table', //分为table和field两种节点。
+  contents: [
+    {
+      type: "form",
+      title: "",
+      formInfo: {
+        id: "timed-management-form",
+        items: formItems.value,
+        rules: formRules.value
+      },
+    }
+  ],
+  footer: {
+    visible: true,
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "确定", value: "submit" },
+    ],
+  },
+});
+
+const treeInfo = ref({
+  id: "data-pickup-tree",
+  filter: true,
+  queryValue: "",
+  queryPlaceholder: "输入库/表名称搜索",
+  props: {
+    label: "name",
+    value: "guid",
+    isLeaf: "isLeaf",
+  },
+  nodeKey: 'guid',
+  lazy: true,
+  expandedKey: [],
+  currentNodeKey: '',
+  expandOnNodeClick: false,
+  data: <any>[],
+  customFilter: true,
+  loading: false
+});
+const currtableGuid = ref("")
+
+/** 记录原始获取的所有树形结构数据,用于处理搜索. */
+const allTreeData: any = ref([]);
+
+/** 获取左侧树数据. */
+const getTreeData = async () => {
+  treeInfo.value.loading = true
+  let params = {}
+  const res: any = await getMetaTreeData(params)
+  if (res.code == proxy.$passCode) {
+    const data = res.data || [];
+    let treeData: any = Object.keys(data).length ? [data] : [];
+    treeInfo.value.data = treeData;
+    allTreeData.value = treeData;
+    if (treeData.length) {
+      treeInfo.value.currentNodeKey = treeData[0].guid;
+      treeInfo.value.expandedKey = <any>[treeData[0].guid];
+    }
+  } else {
+    ElMessage.error(res.msg);
+  }
+  treeInfo.value.loading = false
+}
+/** 左侧树的的组件引用. */
+const treeInfoRef = ref();
+
+/** 处理左侧树过滤方法.默认的树懒加载模式未展开过的不会过滤出结果,但是现在已经有了两级数据. */
+const handleFilterTree = (query) => {
+  if (!allTreeData.value.length) {
+    return [];
+  }
+  if (!query) {
+    treeInfo.value.data = allTreeData.value;
+    nextTick(() => {
+      treeInfoRef.value.treeRef.store.setData(treeInfo.value.data);
+    });
+    return;
+  }
+  let expandKeys: any = [allTreeData.value[0].guid];
+  const filterChildren = (children) => {
+    let nodes: any = [];
+    children.forEach(child => {
+      if (!child.children?.length) {
+        if (child[treeInfo.value.props.label].includes(query)) {
+          nodes.push(child);
+        }
+      } else {
+        let filterNodes = filterChildren(child.children);
+        if (filterNodes.length) {
+          child.children = filterNodes;
+          nodes.push(child);
+          expandKeys.push(child.guid);
+        }
+      }
+    });
+    return nodes;
+  }
+  treeInfo.value.data = [Object.assign({}, treeInfo.value.data[0], {
+    children: filterChildren(cloneDeep(allTreeData.value[0].children))
+  })];
+  treeInfo.value.expandedKey = expandKeys;
+  nextTick(() => {
+    treeInfoRef.value.treeRef.store.setData(treeInfo.value.data);
+  });
+}
+
+/** 根据表获取元数据字段 */
+const getMetaTableFieldPromises: any = ref({});
+
+/** 处理树形懒加载,一级级展开. */
+const loadTreeNode = (node, resolve) => {
+  if (node.isLeaf) {
+    return resolve([]);
+  }
+  if (node.level === 0) {
+    resolve(treeInfo.value.data)
+  } else if (node.level === 1) {
+    resolve(node.data.children)
+  } else if (node.level === 2) {
+    resolve(node.data.children)
+  } else if (node.level === 3) {
+    let params = {
+      tableGuid: node.data.guid
+    }
+    if (getMetaTableFieldPromises.value[node.data.guid]) {
+      getMetaTableFieldPromises.value[node.data.guid].then((res: any) => {
+        delete getMetaTableFieldPromises.value[node.data.guid];
+        if (res.code == proxy.$passCode) {
+          const data = res.data ?? [];
+          let isCurrentNodeField = false;
+          let currentNodeKey = treeInfo.value.currentNodeKey;
+          data.map(item => {
+            if (currentNodeKey == item.guid) {
+              isCurrentNodeField = true;
+            }
+            item.enName = item.enName;
+            item.name = item.chName || item.enName;
+            item.databaseName = node.data.databaseName;
+            item.databaseChName = node.data.databaseChName;
+            item.tableName = node.data.tableName;
+            item.type = 4
+            item.dataTypeCode = item.fieldType
+            item.isLeaf = true
+            item.businessDefDesc = item.comment,
+              item.tableGuid = node.data.guid;
+            item.databaseGuid = node.parent.data.guid;
+          })
+          node.data.children = data;
+          nextTick(() => {
+           treeInfo.value.currentNodeKey && treeInfoRef.value.setCurrentKey(treeInfo.value.currentNodeKey);
+            treeInfo.value.currentNodeKey && isCurrentNodeField && scrollToNode(treeInfo.value.currentNodeKey);
+            let node1 = treeInfoRef.value.treeRef.store.nodesMap[treeInfo.value.currentNodeKey];
+            if (node1) {
+              node1.loaded = true;
+              node1.loading = false;
+            }
+          });
+          resolve(data)
+        } else {
+          ElMessage({
+            type: 'info',
+            message: res.msg,
+          })
+        }
+      });
+    } else {
+      getMetaTableFieldPromises.value[node.data.guid] = getMetaTableField(params).then((res: any) => {
+        delete getMetaTableFieldPromises.value[node.data.guid];
+        if (res.code == proxy.$passCode) {
+          const data = res.data ?? []
+          let isCurrentNodeField = false;
+          let currentNodeKey = treeInfo.value.currentNodeKey;
+          data.map(item => {
+            if (currentNodeKey == item.guid) {
+              isCurrentNodeField = true;
+            }
+            item.enName = item.enName;
+            item.name = item.chName || item.enName;
+            item.databaseName = node.data.databaseName;
+            item.databaseChName = node.data.databaseChName;
+            item.tableName = node.data.tableName;
+            item.type = 4
+            item.dataTypeCode = item.fieldType
+            item.isLeaf = true
+            item.businessDefDesc = item.comment,
+              item.tableGuid = node.data.guid;
+            item.databaseGuid = node.parent.data.guid;
+          })
+          node.data.children = data;
+          nextTick(() => {
+            treeInfo.value.currentNodeKey && treeInfoRef.value.setCurrentKey(treeInfo.value.currentNodeKey);
+            treeInfo.value.currentNodeKey && isCurrentNodeField && scrollToNode(treeInfo.value.currentNodeKey);
+            let node1 = treeInfoRef.value.treeRef.store.nodesMap[treeInfo.value.currentNodeKey];
+            if (node1) {
+              node1.loaded = true;
+              node1.loading = false;
+            }
+          });
+          resolve(data)
+        } else {
+          ElMessage({
+            type: 'info',
+            message: res.msg,
+          })
+        }
+      })
+    }
+  }
+}
+/** 当前选中的树节点数据data */
+const lastClickNode: any = ref({ type: 1 });
+
+const keyValue = ref("")
+/** 数据血缘关系图组件 */
+const lineageGraph: any = ref();
+const diaLogRef = ref()
+/** 当前操作的血缘节点的相邻节点. */
+const neighbors = ref<{ tableName: string, databaseName: string, fieldName?: string }[]>([])
+
+/** 点击左侧树节点,更新对应的血缘关系图. */
+const nodeClick = (data) => {
+  console.log(data);
+  const ele = <HTMLElement>document.querySelector(".g6-component-contextmenu")
+  if (ele) {
+    ele.style.display = "none"
+  }
+  nextTick(() => {
+    lineageGraph.value?.tooltip1.hide()
+  })
+  treeInfo.value.currentNodeKey = data.guid;
+  treeInfo.value.expandedKey = <any>[data.guid];
+  let lastClickType = lastClickNode.value.type;
+  lastClickNode.value = data;
+  if (data.type === 3) {//点击的是表，显示血缘关系。
+    lastClickType != 3 && (switchFieldLineage.value = false);
+    if (switchFieldLineage.value) {
+      isToggle.value = true;
+      getAllTableFieldLineageMap();
+    } else {
+      getTableLineageMap()
+    }
+  } else if (data.type === 4) {//点击的是字段。
+    lastClickType != 4 && (switchFieldLineage.value = true);
+    if (!switchFieldLineage.value) {
+      getTableLineageMap();
+    } else {
+      isToggle.value = true;
+      getTableFieldLineageMap();
+    }
+  }
+}
+
+const getMetaTree = (params) => {
+  getMetaList(params).then((res) => {
+    if (params.dataType === "METADATA_MODEL") {
+      metaTree.value = res.data.map((item => {
+        item.name = emunData[item.metadataModel]
+        item.guid = emunData[item.metadataModel]
+        item.label = emunData[item.metadataModel]
+        item.value = emunData[item.metadataModel]
+        return item
+      })) || []
+      dialogInfo.value.contents[0].formInfo.items[0].options = metaTree.value
+    } //查源模型
+  })
+
+}
+
+/** 选中树节点后自动滚动到可视范围内. */
+const scrollToNode = (nodeId) => {
+  nextTick(() => {
+    const nodeElement = treeInfoRef.value.treeRef.$el.querySelector(`[data-key="${nodeId}"]`);
+    if (nodeElement) {
+      nodeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  });
+}
+
+/** 处理从详情处跳转而来的默认展示. */
+const processRouter = () => {
+  const { guid, databaseName, tableName, databaseChName, databaseGuid, fieldGuid, fieldEnName, set } = useDataMetaStore()
+  let isFL = useDataMetaStore().isFieldLineage;
+  if (fieldGuid) {//查看字段血缘的
+    nextTick(() => {
+      treeInfo.value.expandedKey = <any>[databaseGuid, guid];
+      treeInfo.value.currentNodeKey = fieldGuid as string;
+      scrollToNode(fieldGuid);
+      treeInfoRef.value.setCurrentKey(fieldGuid);
+    })
+    lastClickNode.value = { guid: fieldGuid, tableGuid: guid, databaseGuid: databaseGuid, enName: fieldEnName, tableName, databaseName, type: 4, isLeaf: true, databaseChName };
+    getTableFieldLineageMap();
+    set()
+  } else if (guid) {
+    treeInfo.value.currentNodeKey = guid as string;
+    treeInfo.value.expandedKey = <any>[databaseGuid, guid];
+    lastClickNode.value = { guid: guid, tableName, databaseName, type: 3, databaseChName };
+    scrollToNode(guid);
+    isFieldLineage.value = isFL;
+    switchFieldLineage.value = isFL;
+    if (isFL) {
+      getAllTableFieldLineageMap();
+    } else {
+      getTableLineageMap()
+    }
+    set()
+  }
+}
+
+onActivated(() => {
+  if (!allTreeData.value?.length) {
+    return;
+  }
+  processRouter();
+});
+
+onBeforeMount(async () => {
+  await getTreeData()
+  getMetaTree({ dataType: 'METADATA_MODEL', metadataModel: '1' })
+  processRouter();
+})
+
+/** 处理血缘节点的右键菜单事件. */
+const handleTableContextMenu = (tableGuid, tableName, database, btnType, vertexId, databaseChName, chTable, neighbor, fieldGuid, fieldEnName, fieldChName) => {
+  // 当删除边的时候，第一个参数为euid 第二个是标识符 true
+  if (tableName === true) {
+    ElMessageBox.confirm('此操作将永久删除, 是否继续?', "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: 'warning',
+      appendTo: lineageGraph.value.containerRef
+    }).then(() => {
+      delLineAge(tableGuid).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          ElMessage({
+            type: "success",
+            message: "删除成功",
+            appendTo: lineageGraph.value.containerRef
+          });
+          if (lastClickNode.value.type == 4) {
+            if (isFieldLineage.value) {
+              getTableFieldLineageMap();
+            } else {
+              getTableLineageMap();
+            }
+          } else {
+            if (isFieldLineage.value) {
+              getAllTableFieldLineageMap();
+            } else {
+              getTableLineageMap();
+            }
+          }
+        } else {
+          ElMessage({
+            type: "error",
+            message: res.msg,
+            appendTo: lineageGraph.value.containerRef
+          });
+        }
+      })
+    }).catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消删除',
+        appendTo: lineageGraph.value.containerRef
+      });
+    });
+    return
+  }
+
+  const databaseGuid = allTreeData.value[0].children?.find(child => child.name == databaseChName)?.guid;
+
+  neighbor.push({ tableName: tableName, databaseName: database, fieldName: fieldEnName });
+  neighbors.value = neighbor;
+  currtableGuid.value = tableGuid
+  if (btnType == 1) {//查看元数据详情
+    lineageGraph.value.handleEdit({});//先退出全屏再跳转，否则回来查看时就没有了。
+    checkTableData(tableGuid).then((res: any) => {
+      if (res.code === proxy.$passCode) {
+        if (res.data) {
+          router.push({
+            path: '/data-meta/metadata-query/meta-sheet',
+            query: {
+              id: tableGuid,
+              name: chTable || tableName
+            }
+          })
+        } else {
+          ElMessage.warning("元数据详情不存在")
+        }
+      }
+    })
+
+  } else if (btnType == 2) {//查看血缘。
+    if (!isFieldLineage.value) {
+      treeInfo.value.currentNodeKey = tableGuid;
+      let node = treeInfoRef.value.treeRef.store.nodesMap[databaseGuid];
+      node?.expand();
+      let node1 = treeInfoRef.value.treeRef.store.nodesMap[tableGuid];
+      node1?.expand();
+      treeInfo.value.expandedKey = <any>['0', databaseGuid, tableGuid];
+      nodeClick({ guid: tableGuid, tableName: tableName, databaseName: database, type: 3 })
+      nextTick(() => {
+        scrollToNode(tableGuid);
+      })
+    } else {
+      treeInfo.value.currentNodeKey = fieldGuid;
+      let node = treeInfoRef.value.treeRef.store.nodesMap[databaseGuid];
+      node?.expand();
+      let node1 = treeInfoRef.value.treeRef.store.nodesMap[tableGuid];
+      node1?.expand();
+      treeInfo.value.expandedKey = <any>['0', databaseGuid, tableGuid, fieldGuid];
+      nextTick(() => {
+        scrollToNode(fieldGuid);
+      })
+      nodeClick({ guid: fieldGuid, tableName: tableName, databaseName: database, type: 4, tableGuid: tableGuid, isLeaf: true, enName: fieldEnName, chName: fieldChName })
+    }
+  } else if (btnType == 3) {
+    dialogInfo.value.header.title = "添加上游节点"
+    dialogInfo.value.visible = true;
+    dialogInfo.value.addType = isFieldLineage.value ? 'field' : 'table';
+    if (isFieldLineage.value) {
+      dialogInfo.value.contents[0].formInfo.items[1].visible = false;
+      dialogInfo.value.contents[0].formInfo.items[2].visible = true;
+    } else {
+      dialogInfo.value.contents[0].formInfo.items[1].visible = true;
+      dialogInfo.value.contents[0].formInfo.items[2].visible = false;
+    }
+    dialogInfo.value.contents[0].formInfo.items[1].options = [];
+    dialogInfo.value.contents[0].formInfo.items[2].options = [];
+    formLine.value = { upOrDown: "up", vertexId, database, databaseName: database, databaseGuid, tableGuid, databaseChName, chTable, tableName: tableName, currEnName: fieldEnName, currChName: fieldChName, currDsChName: databaseChName }
+    nextTick(() => {
+      const ele = document.querySelector(".createNode")
+      if (ele) {
+        lineageGraph.value.containerRef.appendChild(ele)
+
+      }
+    })
+  } else if (btnType == 4) {
+    dialogInfo.value.header.title = "添加下游节点"
+    dialogInfo.value.visible = true
+    dialogInfo.value.addType = isFieldLineage.value ? 'field' : 'table';
+    if (isFieldLineage.value) {
+      dialogInfo.value.contents[0].formInfo.items[1].visible = false;
+      dialogInfo.value.contents[0].formInfo.items[2].visible = true;
+    } else {
+      dialogInfo.value.contents[0].formInfo.items[1].visible = true;
+      dialogInfo.value.contents[0].formInfo.items[2].visible = false;
+    }
+    dialogInfo.value.contents[0].formInfo.items[1].options = [];
+    dialogInfo.value.contents[0].formInfo.items[2].options = [];
+    formLine.value = { upOrDown: "down", vertexId, database, databaseName: database, databaseGuid, tableGuid, databaseChName, chTable, tableName, currEnName: fieldEnName, currChName: fieldChName, currDsChName: databaseChName }
+    nextTick(() => {
+      const ele = document.querySelector(".createNode")
+      if (ele) {
+        lineageGraph.value.containerRef.appendChild(ele)
+      }
+    })
+  } else if (btnType == 5) {
+    ElMessageBox.confirm('此操作将永久删除, 是否继续?', "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: 'warning',
+      appendTo: lineageGraph.value.containerRef
+    }).then(() => {
+      delLineageTable({ vertexId: vertexId }).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          ElMessage({
+            type: "success",
+            message: "删除成功",
+            appendTo: lineageGraph.value.containerRef
+          });
+          if (lastClickNode.value.type == 4) {
+            if (isFieldLineage.value) {
+              getTableFieldLineageMap();
+            } else {
+              getTableLineageMap();
+            }
+          } else {
+            if (isFieldLineage.value) {
+              getAllTableFieldLineageMap();
+            } else {
+              getTableLineageMap();
+            }
+          }
+        } else {
+          ElMessage({
+            type: "error",
+            message: res.msg,
+            appendTo: lineageGraph.value.containerRef
+          });
+        }
+      })
+    }).catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消删除',
+        appendTo: lineageGraph.value.containerRef
+      });
+    });
+  }
+}
+
+/** 添加上下游节点对话框的确定取消事件处理. */
+const dialogBtnClick = (btn, info) => {
+  if (btn.value == 'submit') {
+    let params = {}
+    params = {
+      ...formLine.value, guid: currtableGuid.value
+    }
+    if (lastClickNode.value.type == 4) {
+      Object.assign(params, {
+        currentNode: {
+          enName: lastClickNode.value.enName,
+          chName: lastClickNode.value.chName,
+          tableName: lastClickNode.value.tableName,
+          tableGuid: lastClickNode.value.tableGuid,
+          databaseGuid: lastClickNode.value.databaseGuid,
+          databaseChName: formLine.value.databaseChName,
+          databaseName: lastClickNode.value.databaseName,
+          tableChName: formLine.value.chTable
+        }
+      });
+    } else {
+      Object.assign(params, {
+        currentNode: {
+          enName: formLine.value.currEnName,
+          chName: formLine.value.currChName,
+          tableName: lastClickNode.value.tableName,
+          tableGuid: lastClickNode.value.guid,
+          databaseGuid: lastClickNode.value.parentGuid,
+          databaseChName: formLine.value.currDsChName,
+          databaseName: lastClickNode.value.databaseName,
+          tableChName: formLine.value.chTable
+        }
+      });
+    }
+    saveLineageField(params).then().then((res: any) => {
+      if (res.code === proxy.$passCode) {
+        ElMessage({
+          type: "success",
+          message: "添加节点成功!",
+          appendTo: lineageGraph.value.containerRef
+        })
+        dialogInfo.value.visible = false;
+        if (lastClickNode.value.type == 4) {
+          if (isFieldLineage.value) {
+            getTableFieldLineageMap();
+          } else {
+            getTableLineageMap();
+          }
+        } else {
+          if (isFieldLineage.value) {
+            getAllTableFieldLineageMap();
+          } else {
+            getTableLineageMap();
+          }
+        }
+      } else {
+        ElMessage({
+          type: 'error',
+          message: res.msg,
+          appendTo: lineageGraph.value.containerRef
+        })
+      }
+    }).catch((res: any) => {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+        appendTo: lineageGraph.value.containerRef
+      })
+    });
+  } else if (btn.value == 'cancel') {
+    dialogInfo.value.visible = false;
+  }
+};
+
+const metaTableList = ref([]);
+
+const nodeLoad = (node, resolve, item) => {
+  const data = node.data;
+  if (item.field == 'databaseGuid') {
+    if (node.level === 0) {
+      return resolve(metaTree.value)
+    } else if (node.level === 1) {
+      getMetaList({ dataType: "DATABASE", metadataModel: data.metadataModel }).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          const children = res.data.map((item) => {
+            item.isLeaf = true;
+            item.name = item.databaseNameZh
+            return item
+          }) || []
+          resolve(children)
+        } else {
+          ElMessage.error(res.msg);
+          resolve([]);
+        }
+      })
+    } else if (node.level === 2) {
+      resolve([])
+    }
+  } else {
+    if (node.level === 0) {
+      return resolve(metaTableList.value)
+    } else if (node.level === 1) {
+      getMetaTableField({ tableGuid: data.guid }).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          const dataArray = res.data ?? []
+          dataArray.map(item => {
+            item.label = item.chName ? (item.chName + "(" + item.enName + ")") : item.enName;
+            item.value = item.enName;
+            item.name = item.chName || item.enName;
+            item.databaseName = data.databaseName;
+            item.databaseChName = data.databaseChName;
+            item.tableName = data.tableName;
+            item.tableChName = data.tableChName;
+            item.tableGuid = data.guid;
+            item.type = 4
+            item.dataTypeCode = item.fieldType
+            item.isLeaf = true
+            item.businessDefDesc = item.comment
+            if (neighbors.value.some(n => n.databaseName === item.databaseName && n.tableName === item.tableName && n.fieldName == item.enName)) {
+              item.disabled = true;
+            }
+          })
+          resolve(dataArray);
+        } else {
+          ElMessage.error(res.msg);
+        }
+      });
+    }
+  }
+}
+const treeSelectNodeChange = (node, item) => {
+  if (item.field == 'tableField' && node.isLeaf) {
+    formLine.value.enName = node.enName;
+    formLine.value.chName = node.chName;
+    formLine.value.tableName = node.tableName;
+    formLine.value.tableChName = node.tableChName;
+    formLine.value.tableGuid = node.tableGuid;
+    return;
+  }
+  if (!node.databaseNameEn || !node.isLeaf) {
+    return
+  }
+  console.log(diaLogRef.value.dialogFormRef[0].formInline)
+  diaLogRef.value.dialogFormRef[0].formInline.tableName = "";
+  diaLogRef.value.dialogFormRef[0].formInline.tableField = '';
+  dialogInfo.value.contents[0].formInfo.items[1].options = [];
+  dialogInfo.value.contents[0].formInfo.items[2].options = [];
+  formLine.value.databaseName = node.databaseNameEn || ""
+  formLine.value.databaseChName = node.databaseNameZh || "";
+  formLine.value.databaseGuid = node.guid;
+  getMetaList({ dataType: "TABLE", dataSourceGuid: node.guid }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      if (dialogInfo.value.addType != 'table') {
+        dialogInfo.value.contents[0].formInfo.items[2].options = metaTableList.value = res.data.map((item) => {
+          item.label = item.tableChName + "(" + item.tableName + ")"
+          item.value = item.tableName;
+          item.isLeaf = false;
+          let nbor = neighbors.value.at(-1);
+          if (nbor?.databaseName == node.databaseNameEn && nbor?.tableName == item.tableName) {
+            item.isLeaf = true;
+            item.disabled = true;
+          } else {
+            item.disabled = false;
+          }
+          return item
+        })
+      } else {
+        dialogInfo.value.contents[0].formInfo.items[1].options = res.data.map((item) => {
+          item.label = item.tableChName + "(" + item.tableName + ")"
+          item.value = item.tableName
+
+          neighbors.value.forEach((item1) => {
+            if (item1.databaseName === item.databaseName && item1.tableName === item.tableName) {
+              item.disabled = true
+            }
+          })
+          return item
+        })
+      }
+    } else {
+      ElMessage.error(res.msg);
+    }
+
+  })
+}
+
+const selectChange = (val, row, info) => {
+  formLine.value.databaseGuid = info.databaseGuid;
+  if (dialogInfo.value.addType == 'table') {
+    formLine.value.tableName = info.tableName
+    if (row.field === "tableName") {
+      const option = row.options.find((item) => item.tableName === val)
+      formLine.value.tableChName = option.tableChName
+    }
+  } else {
+    // formLine.value.enName = info.tableName
+  }
+}
+const file: any = ref({})
+const handleSave = (file1, fullRef) => {
+  file.value = file1
+  dialogInfo1.value.visible = true
+  nextTick(() => {
+    const ele = document.querySelector(".saveDialog")
+    if (ele) {
+      fullRef.appendChild(ele)
+    }
+  })
+}
+const pageSave = () => {
+  const analysisReportName = reportDialogRef.value.dialogFormRef[0].formInline.analysisReportName;
+  if (!analysisReportName) {
+    ElMessage({
+      type: "error",
+      message: "血缘关系名称不能为空！",
+      appendTo: lineageGraph.value.containerRef
+    })
+    return
+  }
+
+  let formData = new FormData();
+  formData.append('file', file.value);
+  formData.append('fileName', `${analysisReportName}.png`);
+  getFileUrl(formData).then((res) => {
+    saveMetaReportAnalysis({
+      table: lastClickNode.value.tableName,
+      database: lastClickNode.value.databaseName,
+      analysisReportUrl: res.data,
+      analysisReportName: analysisReportName,
+      databaseChName: lastClickNode.value.databaseChName
+    }).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        ElMessage({
+          type: "success",
+          message: "保存成功",
+          appendTo: lineageGraph.value.containerRef
+        })
+        dialogInfo1.value.visible = false
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+          appendTo: lineageGraph.value.containerRef
+        })
+      }
+    })
+  }).catch((res) => {
+    ElMessage.error(res.msg)
+  })
+}
+
+const formItems1: any = ref([
+  {
+    label: '血缘关系名称',
+    type: 'input',
+    placeholder: '请输入',
+    field: 'analysisReportName',
+    default: '',
+    clearable: true,
+    required: true,
+  },
+])
+const formRules1: any = ref({
+  analysisReportName: [
+    {
+      required: true,
+      message: "请填写血缘关系名称",
+      trigger: "blur",
+    },
+  ],
+})
+const formInfo1 = ref({
+  type: 'form',
+  title: '',
+  formInfo: {
+    id: 'add-dict-form1',
+    items: formItems1.value,
+    rules: formRules1.value
+  }
+})
+const reportDialogRef = ref();
+const dialogInfo1 = ref({
+  visible: false,
+  size: 500,
+  direction: "column",
+  modalClass: "saveDialog",
+  header: {
+    title: "保存为血缘关系图片",
+  },
+  type: '',
+  contents: [
+    formInfo1.value,
+  ],
+  footer: {
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "保存", value: "submit" },
+    ],
+  },
+});
+
+const dialogBtnClick1 = (btn, scope) => {
+  if (btn.value === "cancel") {
+    dialogInfo1.value.visible = false
+  } else {
+    pageSave()
+  }
+}
+/** 是否显示英文名称，默认不显示。 */
+const isCh = ref(false);
+
+/** 是否切换为纵向布局。 */
+const isToggle = ref(true)
+
+/** 获取对应表的血缘关系。 */
+const getTableLineageMap = () => {
+  lineageLoading.value = true;
+  isFieldLineage.value = false;
+  getTableLineage({ guid: lastClickNode.value.isLeaf ? lastClickNode.value.tableGuid : lastClickNode.value.guid }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data1 = res.data || [];
+      lineageData.value = data1;
+      nextTick(() => {
+        if (lineageData.value.length > 0) {
+          lineageGraph.value.updateLayout();
+          lineageLoading.value = false;
+        } else {
+          lineageLoading.value = false;
+        }
+
+      });
+    } else {
+      lineageLoading.value = false;
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+        appendTo: lineageGraph.value.containerRef
+      })
+    }
+  })
+}
+
+/** 获取指定表字段的血缘关系 */
+const getTableFieldLineageMap = () => {
+  lineageLoading.value = true;
+  isFieldLineage.value = true;
+  getTableFieldLineage({ guid: lastClickNode.value.guid }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data1 = res.data || [];
+      lineageData.value = data1;
+      nextTick(() => {
+        if (lineageData.value.length > 0) {
+          lineageGraph.value.updateLayout();
+          lineageLoading.value = false;
+        } else {
+          lineageLoading.value = false;
+        }
+      });
+    } else {
+      lineageLoading.value = false;
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+        appendTo: lineageGraph.value.containerRef
+      })
+    }
+  })
+}
+
+/** 获取指定表的所有字段血缘关系。 */
+const getAllTableFieldLineageMap = () => {
+  lineageLoading.value = true;
+  isFieldLineage.value = true;
+  getTableAllFieldLineage({ databaseName: lastClickNode.value.databaseName, tableName: lastClickNode.value.tableName }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data1 = res.data || [];
+      lineageData.value = data1;
+      isFieldLineage.value = true;
+      nextTick(() => {
+        if (lineageData.value.length > 0) {
+          lineageGraph.value.updateLayout();
+          lineageLoading.value = false;
+        } else {
+          lineageLoading.value = false;
+        }
+      });
+    } else {
+      lineageLoading.value = false;
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  })
+}
+
+/** 处理刷新按钮。 */
+const handleRefres = () => {
+  if (lastClickNode.value.type === 3) {//点击的是表，显示血缘关系。
+    if (switchFieldLineage.value) {
+      getAllTableFieldLineageMap();
+    } else {
+      getTableLineageMap()
+    }
+  } else if (lastClickNode.value.type === 4) {//点击的是字段。
+    getTableFieldLineageMap();
+  }
+}
+/** 处理中英文切换。 */
+const handleChOrEn = (flag) => {
+  isCh.value = flag
+}
+
+/** 处理上下布局切换。 */
+const handleToggle = () => {
+  isToggle.value = !isToggle.value
+}
+
+/** 处理字段血缘开关开启关闭。 */
+const handleLineageSwitchChange = (val, type) => {
+  switchFieldLineage.value = val;
+  if (val) {
+    isToggle.value = true;
+    getAllTableFieldLineageMap();
+  } else {
+    getTableLineageMap();
+  }
+}
+</script>
+
+<template>
+  <div class="container_wrap full flex">
+    <div class="aside_wrap">
+      <div class="aside_title">数据库目录列表</div>
+      <Tree ref="treeInfoRef" :treeInfo="treeInfo" @nodeClick="nodeClick" :key="keyValue" @loadNode="loadTreeNode"
+        @filterTree="handleFilterTree" />
+    </div>
+    <div class="main_wrap">
+      <LineageGraph v-show="lastClickNode?.type == 3 || lastClickNode?.type == 4" ref="lineageGraph" layout="vertical"
+        :lineageData="lineageData" :isFieldLineage="isFieldLineage" v-if="lineageData.length > 0"
+        v-loading="lineageLoading" :primary-table="lastClickNode?.tableName"
+        :primary-field="lastClickNode?.type == 4 ? lastClickNode?.enName : ''" :isViewTable="lastClickNode?.type == 3"
+        :is-detail="false" :primaryDatabase="lastClickNode?.databaseName" @tableContextMenu="handleTableContextMenu"
+        @handleSave="handleSave" @handleRefres="handleRefres" @handleLineageSwitchChange="handleLineageSwitchChange"
+        @handleChOrEn=handleChOrEn :isCh="isCh" @handleToggle="handleToggle" :isToggle="isToggle" />
+      <div v-show="lastClickNode && lastClickNode?.type !== 3 && lastClickNode?.type !== 4" class="main-placeholder">
+        <img width="210" height="100" src="../../../public/swzl_logo.png">
+      </div>
+      <Dialog :dialogInfo="dialogInfo" ref="diaLogRef" class="timedDia" @btnClick="dialogBtnClick"
+        @selectChange="selectChange" @treeSelectLoad="nodeLoad" @treeSelectNodeChange="treeSelectNodeChange" />
+    </div>
+    <Dialog ref="reportDialogRef" class="createNode" :dialogInfo="dialogInfo1" @btnClick="dialogBtnClick1" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container_wrap {
+
+  .aside_wrap {
+    width: 200px;
+    margin-right: 1px;
+  }
+
+  .main_wrap {
+    :deep(.canvas-wrapper) {
+      background-color: #f7f7f9;
+    }
+
+    .main-placeholder {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+}
+
+.container_wrap.flex .main_wrap {
+  padding: 0px;
+}
+
+.tree_panel {
+  height: calc(100% - 36px);
+  padding-top: 0;
+
+  :deep(.el-tree) {
+    margin: 0;
+    overflow: hidden auto;
+  }
+}
+
+.card-noData {
+  height: 100%;
+  width: 100%;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #909399;
+  font-size: 14px;
+}
+
+:deep(.el-form .el-form-item) {
+  width: calc(100%);
+  // margin-right: 8px;
+}
+
+:deep(.el-message) {
+  position: fixed;
+  /* 使用fixed或absolute定位 */
+  z-index: 10000;
+  /* 设置一个较高的z-index值确保在最上层显示 */
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: changeDetection
+  </route>
+
+<script lang="ts" setup name="changeDetection">
+
+import { ref } from 'vue';
+import { ElMessage } from "element-plus";
+import Tree from '@/components/Tree/index.vue';
+import {
+  getMetaTreeData,
+  getTaskChangeList,
+  getMetaChangeList,
+  getMetaChangeRecord,
+  getMetacompareList,
+  checkTableData,
+  syncChangeDetail
+} from '@/api/modules/dataMetaService';
+import TableTools from '@/components/Tools/table_tools.vue';
+import { useRouter, useRoute } from "vue-router";
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+
+const treeInfo:any = ref({
+  id: "data-pickup-tree",
+  filter: true,
+  queryValue: "",
+  queryPlaceholder: "输入库/表名称搜索",
+  props: {
+    label: "name",
+    value: "guid",
+  },
+  nodeKey: 'guid',
+  expandedKey: [],
+  currentNodeKey: '',
+  expandOnNodeClick: false,
+  data: [],
+  loading: false
+});
+const treeData = ref([])
+const getTreeData = () => {
+  treeInfo.value.loading = true
+  let params = {}
+  getMetaTreeData(params).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      // let treeData: any = res.data?.children || [];
+      const data = res.data || {}
+      let treeData: any = Object.keys(data).length ? [data] : [];
+      treeInfo.value.data = treeData;
+      if (treeData.length) {
+        tableSearchValue.value.taskGuid = treeData[0].guid
+        treeInfo.value.currentNodeKey = treeData[0].guid;
+        treeInfo.value.expandedKey =  treeInfo.value.expandedKey.length == 0 ? [treeData[0].guid] : treeInfo.value.expandedKey
+      }
+    } else {
+      ElMessage.error(res.msg);
+    }
+    treeInfo.value.loading = false
+  }).catch(() => {
+    treeInfo.value.loading = false
+  })
+}
+
+const nodeClick = (data) => {
+  metaTableValue.value.dataSourceGuid = ""
+  tableSearchValue.value.dataSourceName = ""
+  tableSearchValue.value.tableGuid = ""
+  metaTableValue.value.tableGuid = ""
+  if(data.type === 1){
+    if(activeTabName.value==="task"){
+      getTaskChangeTableData()
+    } else {
+      getMetaChangeTableData()
+    }
+  } else if (data.type === 3) {//点击的是表，显示血缘关系。
+    metaTableValue.value.dataSourceGuid = ""
+    tableSearchValue.value.dataSourceName = ""
+    tableSearchValue.value.tableGuid = data.guid
+    metaTableValue.value.tableGuid = data.guid
+    if(activeTabName.value==="task"){
+      
+      getTaskChangeTableData()
+    } else {
+      getMetaChangeTableData()
+    }
+   
+  } else {//点击的不是表。
+      tableSearchValue.value.tableGuid = ""
+      metaTableValue.value.tableGuid = ""
+      metaTableValue.value.dataSourceGuid = data.guid
+      tableSearchValue.value.dataSourceName = data.name
+    if(activeTabName.value==="task"){
+      
+      getTaskChangeTableData()
+    } else {
+      getMetaChangeTableData()
+    }
+  }
+}
+
+const getTaskChangeTableData = () => {
+  taskChangeTableInfo.value.loading = true;
+  getTaskChangeList(Object.assign(tableSearchValue.value,{pageIndex:taskChangePage.value.curr,pageSize:taskChangePage.value.limit})).then((res: any) => {
+    taskChangeTableInfo.value.loading = false;
+    if (res?.code == proxy.$passCode) {
+      const data = res.data || {};
+      taskChangeTableInfo.value.data = data.records || [];
+      taskChangeTableInfo.value.page.curr = data.pageIndex;
+      taskChangeTableInfo.value.page.rows = data.totalRows;
+      taskChangeTableInfo.value.page.limit = data.pageSize;
+      taskChangePage.value.curr = data.pageIndex;
+      taskChangePage.value.limit = data.pageSize;
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+      taskChangeTableInfo.value.loading = false
+    }
+  });
+}
+
+const getMetaChangeTableData = () => {
+  metaChangeTableInfo.value.loading = true;
+  getMetaChangeRecord(Object.assign(metaTableValue.value,{pageIndex:metaChangePage.value.curr,pageSize:metaChangePage.value.limit,metaType:["TABLE","FIELD"]})).then((res: any) => {
+    metaChangeTableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {};
+      metaChangeTableInfo.value.data = data.records || [];
+      metaChangeTableInfo.value.page.curr = data.pageIndex;
+      metaChangeTableInfo.value.page.rows = data.totalRows;
+      taskChangePage.value.curr = data.pageIndex
+      taskChangePage.value.limit = data.pageSize
+    } else {
+      ElMessage({
+          type: 'error',
+          message: res.msg,
+        })
+         metaChangeTableInfo.value.loading = false;
+    }
+  });
+}
+
+
+const activeTabName = ref('task');
+
+watch(() => activeTabName.value, (val) => {
+   if(val==="task"){
+    getTaskChangeTableData()
+   } else {
+    getMetaChangeTableData()
+   }
+})
+
+onMounted(()=>{
+  getTaskChangeTableData()
+})
+
+const tableSearchValue:any = ref({})
+const tableSearchItemList: any = ref(
+  [
+    {
+      type: 'input',
+      label: '',
+      field: 'taskName',
+      default: '',
+      placeholder: '同步任务名称',
+      maxlength: 50,
+      clearable: true
+    }, {
+      type: 'select',
+      label: '',
+      field: 'changeType',
+      default: '',
+      placeholder: '变更类型',
+      options: [
+        { label: '新增', value: 'I' },
+        { label: '删除', value: 'D' },
+        { label: '修改', value: 'U' },
+        { label: '上线', value: 'Y' },
+        { label: '下线', value: 'S' }
+      ],
+      clearable: true
+    },
+]);
+
+const toTableSearch = (val, clear) => {
+  if (clear) {
+    tableSearchItemList.value.map(item => item.default = '')
+    
+  }
+  tableSearchValue.value = Object.keys(val).length ? { ...val,dataSourceName:tableSearchValue.value.dataSourceName,tableGuid:tableSearchValue.value.tableGuid} : {}
+  getTaskChangeTableData();
+}
+
+const taskChangePage: any = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  taskName: '',
+  changeState: null,
+  changeType: ''
+});
+
+const taskChangeTableInfo = ref({
+  id: 'task-change-table',
+  rowKey: 'guid',
+  loading: false,
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "同步任务名称", field: "taskName", width: 150, align: "left" },
+    { label: "目标端数据源", field: "targetDataSource", width: 160, align: "left" },
+    { label: "目标端表英文名称", field: "targetTable", width: 150, align: "left",type: 'text_btn', value: 'targetTable',columClass:"text_btn"  },
+    { label: "目标端表中文名称", field: "targetTableZhName", width: 150, align: "left",type: 'text_btn', value: 'targetTableZhName',columClass:"text_btn"  },
+    { label: "源端数据源", field: "sourceDataSource", width: 160, align: "left" },
+    { label: "源端表英文名称", field: "sourceTable", width: 150, align: "left" },
+    { label: "源端表中文名称", field: "sourceTableZhName", width: 150, align: "left" },
+    { label: "变更类型", field: "changeType", type :'popover',value:"changeType",checkName:(scope)=>{
+      return scope.row['changeType']==="U"
+    },width: 96, menus:{I:"新增",U:"修改",D:"删除", Y:'上线', S: '下线'},getName:(scope)=>{
+      const menus = {I:"新增",U:"修改",D:"删除", Y:'上线', S: '下线'}
+      return menus[scope.row['changeType']]
+    },column:[{field:"changeInfo",label:"变化信息",width:"150"},{field:"oldValue",label:"原值",width:"150"},{field:"newValue",label:"现值",width:"150"}] },
+    { label: "任务变更时间", field: "changeTime", width: 180 },
+  ],
+  data: [{
+    guid: 1
+  }],
+  popoverTitle:"",
+  popoverloading:false,
+  popoverData:[],
+  arraySpanMethod:({row,column,rowIndex,columnIndex})=>{
+    
+    // if (rowIndex === 0 && columnIndex === 1) {
+      
+    //     return {
+    //       rowspan: 1,
+    //       colspan: 2
+    //     };
+    //   }
+    if (rowIndex === 0) {
+    if (columnIndex === 1) {
+      return [1,2]
+    } else if (columnIndex === 2) {
+      return [0, 0]
+    }
+  }
+  },
+  page: {
+    type: "normal",
+    rows: 0,
+    ...taskChangePage.value,
+  },
+  actionInfo: {
+    show: false,
+    label: "操作",
+    type: "btn",
+    width: 100,
+    btns: (scope) => {
+      let row = scope.row;
+      return [{ label: '影响分析', value: 'analysis', disabled: row['changeState'] == 1 }];
+    }
+  }
+});
+
+const taskChangeTablePageChange = (info) => {
+  taskChangePage.value.curr = Number(info.curr);
+  taskChangePage.value.limit = Number(info.limit);
+  taskChangeTableInfo.value.page.limit = taskChangePage.value.limit;
+  taskChangeTableInfo.value.page.curr = taskChangePage.value.curr;
+  getTaskChangeTableData();
+};
+
+const currTaskChangeTableData: any = ref<Object>({});
+const taskChangeTableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTaskChangeTableData.value = row;
+  if (type === 'analysis') { // 详情
+    router.push({
+      name: 'impactAnalysis',
+      query: { guid: row.approvalGuid }
+    });
+  } else if(type ==='targetTable' ){
+    checkTableData(row.targetTableGuid).then((res:any)=>{
+       if(res.code===proxy.$passCode) {
+         if(res.data){
+          router.push({
+              path: '/data-meta/metadata-query/meta-sheet',
+              query: {
+                id: row.targetTableGuid,
+                name: row.targetTableZhName || row.targetTable
+              }
+            })
+         } else {
+           ElMessage.warning("元数据详情不存在")
+         }
+       }
+    })
+  
+  } else if(type === "targetTableZhName"){
+    checkTableData(row.targetTableGuid).then((res:any)=>{
+       if(res.code===proxy.$passCode) {
+         if(res.data){
+          router.push({
+              path: '/data-meta/metadata-query/meta-sheet',
+              query: {
+                id: row.targetTableGuid,
+                name: row.targetTableZhName || row.targetTable
+              }
+            })
+         } else {
+           ElMessage.warning("元数据详情不存在")
+         }
+       }
+    })
+  } else if(type==="changeType"){
+    taskChangeTableInfo.value.popoverloading = true
+    syncChangeDetail(row.guid).then((res:any)=>{
+      taskChangeTableInfo.value.popoverloading = false
+      if(res.code===proxy.$passCode){
+        taskChangeTableInfo.value.popoverData = res.data
+        taskChangeTableInfo.value.popoverTitle = row.targetTableZhName
+      }
+      
+    })
+  }
+};
+
+const metaTableValue:any = ref({})
+
+const metaTableSearchItemList: any = ref(
+  [
+    {
+      type: 'input',
+      label: '',
+      field: 'collectTaskName',
+      default: '',
+      placeholder: '元数据采集任务',
+      maxlength: 50,
+      clearable: true
+    }, {
+      type: 'select',
+      label: '',
+      field: 'metaChangeType',
+      default: '',
+      placeholder: '变更类型',
+      options: [
+        { label: '新增', value: 'ADD' },
+        { label: '删除', value: 'DELETE' },
+        { label: '修改', value: 'UPDATE' }
+      ],
+      clearable: true
+    },
+]);
+
+const toMetaTableSearch = (val, clear) => {
+  if (clear) {
+    metaTableSearchItemList.value.map(item => item.default = '')
+    
+  }
+  metaTableValue.value = Object.keys(val).length ? { ...val,dataSourceGuid:metaTableValue.value.dataSourceGuid,tableGuid:metaTableValue.value.tableGuid} : {}
+  getMetaChangeTableData()
+}
+
+const metaChangePage: any = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  metaTaskName: '',
+  changeState: null,
+  changeType: ''
+});
+
+const metaChangeTableInfo = ref({
+  id: 'meta-change-table',
+  rowKey: 'guid',
+  loading: false,
+  fields: [
+  { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+   { label: "元数据采集任务", field: "collectTaskName", width: 180, },
+   { label: "数据源名称", field: "dataSourceName", width: 180, },
+   { label: "表中文名称", field: "tableChName", width: 180, },
+   { label: "表英文名称", field: "tableName", width: 180, },
+   { label: "元数据名称", field: "metaName", width: 180, },
+      {
+        label: "元数据类型", field: "metaType", width: 100, getName: (scope) => {
+          if (!scope.row.metaType) {
+            return '--';
+          }
+          return scope.row.metaType == 'TABLE' ? '表' : (scope.row.metaType == 'INDEX' ? '索引' : (scope.row.metaType == 'PRI' ? '主键' : '字段'));
+        }
+      },
+      {
+        label: "变更类型", field: "metaChangeType", width: 100, getName: (scope) => {
+          if (!scope.row.metaChangeType) {
+            return '--';
+          }
+          return scope.row.metaChangeType == 'ADD' ? '新增' : (scope.row.metaChangeType == 'DELETE' ? '删除' : '修改');
+        }
+      },
+      { label: "变化", field: "metaChangeType", width: 120,type: 'popover',value:'metaChangeType',column:[{field:"item",label:"变化信息",width:"150"},{field:"oldValue",label:"原值",width:"150"},{field:"newValue",label:"现值",width:"150"}] },
+      // { label: "原值", field: "metaOldValue", width: 120 },
+      { label: "变更时间", field: "changeTime", width: 180, },
+      { label: "元数据采集时间", field: "changeTime", width: 180, },
+      // { label: "状态", field: "changeTime", width: 180, },
+      // { label: "操作时间", field: "changeTime", width: 180, },
+  ],
+  data: [{
+    guid: 1
+  }],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...metaChangePage.value,
+  },
+  popoverloading:false,
+  popoverData:[],
+  actionInfo: {
+    show:false,
+    label: "操作",
+    type: "btn",
+    width: 100,
+    btns: (scope) => {
+      let row = scope.row;
+      return [{ label: '影响分析', value: 'analysis', disabled: row['changeState'] == 1 }];
+    }
+  }
+});
+
+const metaChangeTablePageChange = (info) => {
+  
+  metaChangePage.value.curr = Number(info.curr);
+  metaChangePage.value.limit = Number(info.limit);
+  metaChangeTableInfo.value.page.limit = metaChangePage.value.limit;
+  metaChangeTableInfo.value.page.curr = metaChangePage.value.curr;
+  getMetaChangeTableData();
+};
+
+const currMetaChangeTableData: any = ref<Object>({});
+const metaChangeTableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currMetaChangeTableData.value = row;
+  if (type === 'analysis') { // 详情
+    router.push({
+      name: 'impactAnalysis',
+      query: { guid: row.approvalGuid }
+    });
+  } else if(type==="metaChangeType") {
+    metaChangeTableInfo.value.popoverloading = true
+  getMetacompareList(scope.row.guid).then((res:any)=>{
+    metaChangeTableInfo.value.popoverloading = false
+    metaChangeTableInfo.value.popoverData = res.data
+   
+  })
+  console.log(scope,btn)
+  }
+};
+
+onBeforeMount(() => {
+  getTreeData()
+})
+
+</script>
+
+<template>
+  <div class="container_wrap full flex">
+    <div class="aside_wrap">
+      <div class="aside_title">数据库目录列表</div>
+      <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
+    </div>
+    <div class="main_wrap">
+      <el-tabs v-model="activeTabName">
+        <el-tab-pane label="同步任务变更记录" name="task">
+          <div class="table_tool_wrap">
+            <TableTools :searchItems="tableSearchItemList" :init="false" searchId="detect-table-search"
+              @search="toTableSearch" />
+          </div>
+          <div class="table_panel_wrap">
+            <Table :tableInfo="taskChangeTableInfo" @tableBtnClick="taskChangeTableBtnClick"
+              @tablePageChange="taskChangeTablePageChange" />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="元数据变更记录" name="meta">
+          <div class="table_tool_wrap">
+            <TableTools :searchItems="metaTableSearchItemList" :init="false" searchId="meta-detect-table-search"
+              @search="toMetaTableSearch" />
+          </div>
+          <div class="table_panel_wrap">
+            <Table :tableInfo="metaChangeTableInfo" @tableBtnClick="metaChangeTableBtnClick"
+              @tablePageChange="metaChangeTablePageChange" />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+  
+<style scoped lang="scss">
+.container_wrap {
+
+  .aside_wrap {
+    width: 200px;
+  }
+
+  .main_wrap {
+    padding: 0px;
+
+
+    :deep(.el-tabs) {
+      height: 100%;
+
+      .el-tabs__header {
+        margin-bottom: 0;
+      }
+
+      .el-tabs__item {
+        height: 32px;
+        padding: 0px;
+        width: 144px;
+
+        &:last-child {
+          width: 130px;
+        }
+      }
+
+      .el-tabs__content {
+        height: calc(100% - 32px);
+      }
+
+      .el-tab-pane {
+        padding: 0px 16px;
+        height: 100%;
+      }
+    }
+  }
+
+}
+
+.tree_panel {
+  height: calc(100% - 36px);
+  padding-top: 0;
+
+  :deep(.el-tree) {
+    margin: 0;
+    overflow: hidden auto;
+  }
+}
+
+.table_tool_wrap {
+  display: flex;
+  flex-direction: column;
+
+  .el-input {
+    width: 230px;
+    height: 32px;
+  }
+
+  :deep(.el-input) {
+    .el-input__suffix-inner {
+      flex-direction: row-reverse;
+      -webkit-flex-direction: row-reverse;
+      display: flex;
+    }
+  }
+}
+
+.table_panel_wrap {
+  height: calc(100% - 44px);
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: collectorTask
+</route>
+
+<script lang="ts" setup name="collectorTask">
+import { ref } from 'vue'
+import TableTools from "@/components/Tools/table_tools.vue";
+import {
+  addMetaDataTask,
+  deleteMetaDataTask,
+  getMetaDataTask,
+  updateMetaDataTask,
+  updateMetaDataState,
+  checkMetaDataTask,
+  executeMetaDataTask,
+  getDatabase,
+  checkDatabaseIsExist
+} from '@/api/modules/dataMetaService';
+import  {
+  getCronExecTime
+} from '@/api/modules/queryService';
+import { TableColumnWidth } from '@/utils/enum';
+import { commonPageConfig } from '@/components/PageNav/index';
+import { useValidator } from '@/hooks/useValidator';
+
+const { required, checkExistName } = useValidator();
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+
+/** 数据源选择列表数据。 */
+const dataSourceList = ref([])
+
+/** 头部搜索框配置 */
+const searchItemList = ref([
+  {
+    type: "input",
+    label: "",
+    field: "collectTaskName",
+    default: "",
+    placeholder: "采集任务名称",
+    clearable: true,
+  },
+  {
+    type: "select",
+    label: "",
+    placeholder: '数据源名称',
+    field: 'dataSourceGuid',
+    default: '',
+    options: dataSourceList.value,
+    props: {
+      label: 'databaseNameZh',
+      value: 'guid'
+    },
+    clearable: true,
+  },
+  {
+    type: "select",
+    label: "",
+    field: "taskState",
+    default: "",
+    placeholder: "任务状态",
+    options: [
+      { label: "上线", value: "1" },
+      { label: "下线", value: "0" },
+    ],
+    clearable: true,
+  }
+]);
+
+const currTableData: any = ref<Object>({});
+/** 分页及搜索传参信息配置。 */
+const page = ref({
+  ...commonPageConfig,
+  collectTaskName: '',
+  dataSourceGuid: '',
+  taskState: null
+});
+
+const tableInfo = ref({
+  id: 'data-source-table',
+ // multiple:true,
+  fields: [
+    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
+    { label: "采集任务名称", field: "collectTaskName", width: 140 },
+    { label: "元模型", field: "metadataModelChName", width: 140 },
+    { label: "数据源名称", field: "datasourceName", width: 160,type: 'text_btn', value: 'datasourceName',columClass:"text_btn" },
+    { label: '任务状态', field: 'taskState', type: 'switch', activeText: '上线', inactiveText: '下线', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 100, align: 'center' },
+    { label: "执行计划", field: "collectType", type: 'filter', width: 90 },
+    { label: "同步策略", field: "collectMode", type: 'filter', width: 90 },
+    { label: "执行周期", field: "execCycle", width: TableColumnWidth.EXECCYCLE },
+    { label: "执行状态", field: "runingState", width: TableColumnWidth.STATE, align: 'center', type: "tag" },
+    { label: "下次执行时间", field: "nextExecuteTime", width: TableColumnWidth.DATETIME },
+    { label: "最后执行时间", field: "lastRuningTime", width: TableColumnWidth.DATETIME, },
+    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
+    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME },
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 230,
+    fixed: 'right',
+    btns: (scope) => {
+      const row = scope.row
+      let btnsArr: any = [];
+      if (row.isCarry) {
+        btnsArr.splice(0, 0, { label: "执行中...", value: "carry", disabled: true })
+      } else {
+        btnsArr.splice(0, 0, { label: "立即执行", value: "carry", disabled: row.taskState === 0 || row.execState == 1 })
+      }
+      btnsArr.push({ label: "编辑", value: "edit", disabled: row.taskState === 1 || row.isCarry || row.execState == 1 });
+      btnsArr.push({ label: "删除", value: "delete", disabled: row.isCarry || row.taskState === 1 || row.execState == 1 });
+      btnsArr.push({ label: "执行日志", value: "log" });
+      return btnsArr
+    },
+  },
+  loading: false
+})
+
+const collectType = ref(1)
+
+const formItems: any = ref([
+{
+    label: '元模型',
+    type: 'select',
+    placeholder: '请选择',
+    field: 'metadataModel',
+    default: '1',
+    options:[
+      { label:"数据库表", value:'1' },
+      // {label:"BI报表",value:2,},
+      // {label:"数据服务",value:3,},
+      { label:"ETL工具",value:'4' },
+      // {label:"数据处理",value:5,}
+    ],
+    clearable: true,
+    required: true
+  }, {
+    label: '采集任务名称',
+    type: 'input',
+    placeholder: '请输入',
+    field: 'collectTaskName',
+    default: '',
+    maxlength: 50,
+    clearable: true,
+    required: true
+  }, {
+    label: '数据源名称',
+    type: 'select',
+    placeholder: '请选择',
+    field: 'dataSourceGuid',
+    default: '',
+    options: dataSourceList.value,
+    props: {
+      label: 'databaseNameZh',
+      value: 'guid'
+    },
+    clearable: true,
+    required: true
+  }, {
+    label: "执行计划",
+    type: "radio-group",
+    placeholder: "",
+    field: "collectType",
+    default: 1,
+    options: [
+      {
+        label: "离线",
+        value: 1,
+      },
+      // {
+      //   label: "实时",
+      //   value: 2,
+      // },
+    ],
+    required: true,
+  }, {
+    label: '同步策略',
+    type: 'select',
+    placeholder: '请选择',
+    field: 'collectMode',
+    default: 2,
+    options: [
+      // { label: '增量', value: 1 },
+      { label: '全量', value: 2 },
+    ],
+    clearable: true,
+    required: true,
+    visible: true
+  }, {
+    label: '执行周期',
+    type: 'input-popover-panel',
+    placeholder: '',
+    field: 'execCycle',
+    default: '',
+    append: {
+      btn: { label: '执行时间', value: 'cron' }
+    },
+    teleported: true,
+    clearable: true,
+    required: true,
+    block: true,
+    visible: true,
+  }, {
+    label: '接下来五次执行时间',
+    type: 'textarea',
+    placeholder: '执行时间',
+    field: 'zxzq',
+    clearable: true,
+    required: false,
+    rows: 5,
+    block: true,
+    visible: true,
+    readonly: true
+  }, {
+    label: "",
+    type: "checkbox",
+    placeholder: "抽取存量数据",
+    field: "isInit",
+    default: 'Y',
+    trueValue: 'Y',
+    falseValue: 'N',
+    required: false,
+    visible: false,
+    col: 'margin-top-21'
+  },
+])
+
+/** 记录已校验过的信息。 */
+const checkedInfo: any = ref({});
+
+const formRules: any = ref({
+  metadataModel: [required('请选择元模型')],
+  collectTaskName: [required('请填写采集任务名称'), checkExistName(checkedInfo.value, checkMetaDataTask, currTableData.value, 'collectTaskName')],
+  dataSourceGuid: [required('请选择数据源')],
+  execCycle: [required('请设置执行周期')],
+  collectMode: [required('请选择同步策略')],
+})
+const formInfo = ref({
+  type: 'form',
+  title: '',
+  formInfo: {
+    id: 'add-dict-form',
+    items: formItems.value,
+    rules: formRules.value
+  }
+})
+/** 新建编辑采集任务对话框配置 */
+const dialogInfo = ref({
+  visible: false,
+  size: 700,
+  direction: "column",
+  header: {
+    title: "新建",
+  },
+  type: '',
+  contents: [
+    formInfo.value,
+  ],
+  footer: {
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "确定", value: "submit" },
+    ],
+  },
+});
+
+const toSearch = (val: any, clear: boolean = false) => {
+  if (clear) {
+    searchItemList.value.map((item) => (item.default = ""));
+    page.value.collectTaskName = '';
+    page.value.dataSourceGuid = "";
+    page.value.taskState = null;
+  } else {
+    page.value.collectTaskName = val.collectTaskName;
+    page.value.dataSourceGuid = val.dataSourceGuid;
+    page.value.taskState = val.taskState;
+  }
+  getTableData();
+};
+
+const getTableData = () => {
+  tableInfo.value.loading = true
+  getMetaDataTask({
+    pageIndex: page.value.curr,
+    pageSize: page.value.limit,
+    collectTaskName: page.value.collectTaskName,
+    dataSourceGuid: page.value.dataSourceGuid,
+    taskState: page.value.taskState
+  }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      tableInfo.value.data = data.records || []
+      tableInfo.value.page.limit = data.pageSize
+      tableInfo.value.page.curr = data.pageIndex
+      tableInfo.value.page.rows = data.totalRows
+    } else {
+      proxy.$ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+    tableInfo.value.loading = false
+  })
+};
+
+const tableSwitchBeforeChange = (scope, field, callback) => {
+  const msg = `确定【${scope.row[field] == 1 ? '下线' : '上线'}】${scope.row.collectTaskName}?`
+  proxy.$openMessageBox(msg, () => {
+    const state = scope.row[field] == 1 ? 0 : 1
+    const result = tableSwitchChange(state, scope, field)
+    callback(result)
+  }, () => {
+    callback(false)
+  });
+}
+
+const tableSwitchChange = (val, scope, field) => {
+  return new Promise((resolve, reject) => {
+    let params = {
+      guid: scope.row.guid,
+      taskState: val
+    }
+    updateMetaDataState(params).then((res: any) => {
+      if (res.code == proxy.$passCode && res.data) {
+        getTableData();
+        proxy.$ElMessage({
+          type: "success",
+          message: `${scope.row.collectTaskName}【${val == 0 ? '下线' : '上线'}】成功`,
+        });
+        resolve(true)
+      } else {
+        proxy.$ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+        reject(false)
+      }
+    }).catch(() => {
+      reject(false)
+    })
+  })
+}
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  getTableData();
+};
+
+const oldOriginValue = ref({});
+
+const setFormItems = (row: any = null) => {
+  let val = oldOriginValue.value = Object.assign({ collectType: collectType.value, collectMode: 2, isInit: 'Y', metadataModel: '1' }, oldOriginValue.value, row || {});
+  formItems.value.map(item => {
+    if (item.field == 'dataSourceGuid') {
+      item.options = dataSourceList.value
+    }
+    item.default = val[item.field] || "";
+  })
+}
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  let row = scope.row;
+  currTableData.value = row;
+  if (type == 'carry') {
+    row.isCarry = true
+    const guid = row.guid
+    executeMetaDataTask(guid).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getTableData();
+        proxy.$ElMessage({
+          type: "success",
+          message: "立即执行成功",
+        });
+      } else {
+        proxy.$ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+        getTableData();
+      }
+      row.isCarry = false
+    }).catch(() => {
+      row.isCarry = false
+    })
+  } else if (type == 'log') {
+    router.push({
+      path: '/data-meta/collect-task/excution-log',
+      query: {
+        guid: row.guid,
+        name: row.collectTaskName,
+        type: row.collectType
+      }
+    })
+  } else if (type == "edit") {
+    dialogInfo.value.header.title = '编辑采集任务';
+    dialogInfo.value.type = type
+    setDetailInfo(scope.row);
+    formInfo.value.formInfo.items[6].default = '';
+    formRules.value.collectTaskName = [required('请填写采集任务名称'), checkExistName(checkedInfo.value, checkMetaDataTask, currTableData.value, 'collectTaskName')];
+    dialogInfo.value.contents[0].formInfo.rules = formRules.value;
+  } else if (type == "delete") {
+    proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
+      let guids = [currTableData.value.guid]
+      deleteMetaDataTask(guids).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          getTableData();
+          proxy.$ElMessage({
+            type: "success",
+            message: "删除成功",
+          });
+        } else {
+          proxy.$ElMessage({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    })
+  } else if(type=="datasourceName"){
+    if (row.metadataModel == '4') {
+      proxy.$ElMessage.warning("元模型为ETL工具的采集任务无元数据详情！")
+      return;
+    }
+    checkDatabaseIsExist(row.dataSourceGuid).then((res:any)=>{
+        if(res.code===proxy.$passCode){
+          if(res.data){
+            router.push({
+              name:"metadataQuery",
+              query:{
+              dataSourceGuid:row.dataSourceGuid,
+              datasourceName:row.datasourceName,
+              }
+            })
+          } else {
+            proxy.$ElMessage.warning("该任务暂未执行成功过！")
+          }
+        }
+    })
+  }
+};
+
+const loadDrawer = () => {
+  collectType.value = 1
+  setFormItems()
+  setGroup()
+  formInfo.value.formInfo.items[5].default = '0 00 00 01 * ? '
+  dialogInfo.value.header.title = '新建采集任务'
+  dialogInfo.value.type = 'add'
+  formInfo.value.formInfo.items = formItems.value
+  dialogInfo.value.visible = true;
+  checkedInfo.value = {};
+  formItems.value[0].default = '1';
+  formItems.value[0].disabled = false;
+};
+
+const setDetailInfo = (row) => {
+  collectType.value = row.collectType
+  setFormItems(row)
+  setGroup()
+  formItems.value[0].disabled = true;
+  dialogInfo.value.visible = true;
+  checkedInfo.value = {};
+}
+
+const getDataSourceList = () => {
+  getDatabase({ connectStatus: 1 }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      dataSourceList.value = res.data || [];
+      formItems.value[1].options = dataSourceList.value;
+      searchItemList.value[1].options = dataSourceList.value;
+    } else {
+      proxy.$ElMessage({
+        type: "error",
+        message: res.msg,
+      });
+    }
+  })
+}
+
+const radioGroupChange = (val, info) => {
+  collectType.value = val
+  setFormItems(info)
+  setGroup()
+}
+
+const scheduleChange = (val, rowValue) => {
+  setFormItems(rowValue)
+  formItems.value.at(-3).default = val
+  formInfo.value.formInfo.items = formItems.value
+}
+
+// 切换结构类型 设置选项显隐
+const setGroup = () => {
+  if (collectType.value == 2) {
+    formItems.value.at(-1).visible = true
+    formItems.value.at(-2).visible = false
+    formItems.value.at(-3).visible = false
+    formItems.value.at(-4).visible = false
+  } else {
+    formItems.value.at(-1).visible = false
+    formItems.value.at(-2).visible = true
+    formItems.value.at(-3).visible = true
+    formItems.value.at(-4).visible = true
+  }
+  formInfo.value.formInfo.items = formItems.value
+}
+
+const taskCreateDialogRef = ref();
+
+const dialogBtnClick = (btn, info) => {
+  if (btn.value == 'submit') {
+    let params = { ...info ,}
+   // params.taskState = 1;
+    if (dialogInfo.value.type == 'add') {
+      params.taskState = 1;
+      addMetaDataTask(params).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          page.value.curr = 1;
+          getTableData();
+          proxy.$ElMessage({
+            type: 'success',
+            message: '添加采集任务成功'
+          })
+          dialogInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+      })
+    } else {
+      params.guid = currTableData.value.guid
+      updateMetaDataTask(params).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          getTableData();
+          proxy.$ElMessage({
+            type: 'success',
+            message: '修改采集任务成功'
+          })
+          dialogInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+      })
+    }
+  } else if (btn.value == 'cancel') {
+    dialogInfo.value.visible = false;
+  }  else if (btn.value = 'cron') {
+    let vInfo = taskCreateDialogRef.value.dialogFormRef[0].formInline;
+    if (!vInfo.execCycle) {
+      return;
+    }
+    getCronExecTime(vInfo.execCycle).then((res: any) => {
+      if (res?.length) {
+        vInfo.zxzq = res.join('\n');
+        setFormItems(vInfo);
+      } else {
+        proxy.$ElMessage({
+          type: 'error',
+          message: res.msg,
+        })
+      }
+    })
+  }
+};
+
+onActivated(() => {
+  getDataSourceList()
+})
+
+onBeforeMount(() => {
+  toSearch({})
+})
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_tool_wrap">
+     <!-- 头部搜索 -->
+      <TableTools :searchItems="searchItemList" :searchId="'data-source-search'" @search="toSearch" :init="false" />
+      <div class="tools_btns">
+        <el-button type="primary" @click="loadDrawer" v-preReClick>新建</el-button>
+      </div>
+    </div>
+    <div class="table_panel_wrap">
+      <!-- 右侧采集任务表格 -->
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick"
+        @tablePageChange="tablePageChange" @tableSwitchBeforeChange="tableSwitchBeforeChange" />
+    </div>
+    <!-- 新建编辑采集任务对话框 -->
+    <Dialog ref="taskCreateDialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" @radioGroupChange="radioGroupChange"
+      @scheduleChange="scheduleChange" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.table_tool_wrap {
+  width: 100%;
+  height: 84px !important;
+  padding: 0 8px;
+
+  .tools_btns {
+    padding: 0px 0 0;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 84px);
+  padding: 0px 8px 0;
+}
+</style>

+<route lang="yaml">
+  name: executionLog
+</route>
+
+<script lang="ts" setup name="excutionLog">
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import Table from "@/components/Table/index.vue";
+import Drawer from '@/components/Drawer/index.vue'
+
+import {
+  getMetaDataTaskLog,getMetacompareList,getMetaChangeRecord
+} from "@/api/modules/dataMetaService"
+import { useRouter, useRoute } from "vue-router";
+import Moment from 'moment';
+import { changeNum } from '@/utils/common'
+import { TableColumnWidth } from "@/utils/enum";
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute();
+
+const collectTaskGuid: any = ref(route.query.guid);
+const collectTaskType: any = ref(route.query.type);
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+
+const originFields: any = ref([
+  { label: "采集任务名称", field: "collectTaskName", width: 140 },
+  { label: "数据源名称", field: "datasourceName", width: 160 },
+  { label: "执行计划", field: "collectType", type: 'filter', width: 90 },
+  { label: "执行状态", field: "execResult", width: 100, type: "tag", align: 'center' },
+  {
+    label: "执行时间", field: "execTime", width: TableColumnWidth.DATETIME, getName: (scope) => {
+      let row = scope.row;
+      return row.execTime && Moment(row.execTime).format('YYYY-MM-DD HH:mm:ss');
+    }
+  },
+  {
+    label: "耗时(秒)", field: "execDuration", width: TableColumnWidth.EXECDURATION, align: "right", getName: (scope) => {
+      return scope.row.execDuration != null ? changeNum(scope.row.execDuration ?? 0) : '--';
+    }
+  },
+]);
+
+const tableInfo = ref({
+  id: "user-authority-table",
+  fields: [],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 150,
+    fixed: 'right',
+    btns: (scope)=>{
+
+    return [
+      { label: "元数据变更记录", value: "log_detail",disabled:scope.row['execResult']==='N' || scope.row['execResult']==='R'},
+    ]
+    }
+  },
+  loading: false
+});
+const metaChangePage: any = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  metaTaskName: '',
+  changeState: null,
+  changeType: ''
+});
+const formTable = ref({
+  type: "table",
+  title: "",
+  col: 'no-margin',
+  
+  tableInfo: {
+    id: "task-detail-table",
+    minHeight: 'unset',
+    fields: [
+    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+   { label: "表中文名称", field: "tableChName", width: 180, },
+   { label: "表英文名称", field: "tableName", width: 180, },
+   { label: "元数据名称", field: "metaName", width: 180, },
+      {
+        label: "元数据类型", field: "metaType", width: 100, getName: (scope) => {
+          if (!scope.row.metaType) {
+            return '--';
+          }
+          return scope.row.metaType == 'TABLE' ? '表' : (scope.row.metaType == 'INDEX' ? '索引' : (scope.row.metaType == 'PRI' ? '主键' : '字段'));
+        }
+      },
+      {
+        label: "变更类型", field: "metaChangeType", width: 100, getName: (scope) => {
+          if (!scope.row.metaChangeType) {
+            return '--';
+          }
+          return scope.row.metaChangeType == 'ADD' ? '新增' : (scope.row.metaChangeType == 'DELETE' ? '删除' : '修改');
+        }
+      },
+      { label: "变化", field: "metaChangeType", width: 100,type: 'popover',value:'metaCurrValue',column:[{field:"item",label:"变化信息",width:"150"},{field:"oldValue",label:"原值",width:"150"},{field:"newValue",label:"现值",width:"150"}] },
+      // { label: "原值", field: "metaOldValue", width: 120 },
+      { label: "元数据采集时间", field: "changeTime", width: 180, },
+      // { label: "状态", field: "changeTime", width: 180, },
+      // { label: "操作时间", field: "changeTime", width: 180, },
+    ],
+    data: [],
+    loading: false,
+    page:{
+      rows:0,
+      ...metaChangePage.value
+    },
+    popoverData:[],
+    popoverloading:false,
+    showPage: true,
+    actionInfo: {
+      show: false
+    },
+  },
+})
+
+const drawerInfo: any = ref({
+  visible: false,
+  direction: "rtl",
+  modalClass: "wrap_width_auto",
+  size: 700,
+  modalClose:true,
+  header: {
+    title: "",
+  },
+  type: '',
+  container: {
+    contents: [
+      formTable.value,
+    ],
+  },
+  footer: {
+    visible: false,
+    btns: [
+      { type: 'default', label: '取消', value: 'cancel' },
+      { type: 'primary', label: '确认 ', value: 'save' },
+    ]
+  },
+})
+const currRow:any = ref({})
+const getFirstPageData = () => {
+  page.value.curr = 1
+  toSearch({})
+}
+
+const toSearch = (val: any, clear: boolean = false) => {
+  let params: any = Object.keys(val).length ? { ...val } : {}
+  params.pageIndex = page.value.curr;
+  params.pageSize = page.value.limit;
+  params.collectTaskGuid = collectTaskGuid.value
+  getTableData(params);
+};
+
+const getTableData = (params) => {
+  tableInfo.value.loading = true
+  getMetaDataTaskLog(params).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      tableInfo.value.data = data.records || []
+      tableInfo.value.page.limit = data.pageSize
+      tableInfo.value.page.curr = data.pageIndex
+      tableInfo.value.page.rows = data.totalRows
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+    tableInfo.value.loading = false
+  }).catch(xhr => {
+    tableInfo.value.loading = false
+  })
+};
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  toSearch({})
+};
+const getMetaChangeTableData = ()=>{
+  formTable.value.tableInfo.loading = true
+  getMetaChangeRecord(Object.assign({execGuid:currRow.value.guid},{pageIndex:metaChangePage.value.curr,pageSize:metaChangePage.value.limit})).then((res: any) => {
+      formTable.value.tableInfo.loading = false
+      if (res.code == proxy.$passCode && res.data) {
+        let data = res.data || {}
+        formTable.value.tableInfo.data = data.records || []
+        formTable.value.tableInfo.page.rows = data.totalRows
+        const contents = [formTable.value]
+        drawerInfo.value.container.contents = contents
+        drawerInfo.value.footer.visible = false
+        drawerInfo.value.visible = true
+      } else {
+        ElMessage({
+          type: "error",
+          message: '未获取到对应人员信息',
+        });
+      }
+    })
+}
+const drawerTableClick = (scope,btn)=>{
+  drawerInfo.value.container.contents[0].tableInfo.popoverloading = true
+  getMetacompareList(scope.row.guid).then((res:any)=>{
+    drawerInfo.value.container.contents[0].tableInfo.popoverloading = false
+    drawerInfo.value.container.contents[0].tableInfo.popoverData = res.data
+   
+  })
+}
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currRow.value = row
+  if (type == 'log_detail') {
+    drawerInfo.value.header.title = row.collectTaskName;
+    drawerInfo.value.type = type
+    formTable.value.tableInfo.data = []
+    const contents = [formTable.value]
+    drawerInfo.value.container.contents = contents
+    drawerInfo.value.footer.visible = false
+    drawerInfo.value.visible = true
+    getMetaChangeTableData()
+  }
+};
+
+const drawerBtnClick = (btn, info) => {
+  if (btn.value == 'cancel') {
+    drawerInfo.value.visible = false
+  }
+}
+const metaChangeTablePageChange = (info) => {
+  
+  metaChangePage.value.curr = Number(info.curr);
+  metaChangePage.value.limit = Number(info.limit);
+  formTable.value.tableInfo.page.limit = metaChangePage.value.limit;
+  formTable.value.tableInfo.page.curr = metaChangePage.value.curr;
+  getMetaChangeTableData();
+};
+onBeforeMount(() => {
+  if (collectTaskType.value == '1') {
+    originFields.value.splice(2, 0, { label: "同步策略", field: "collectMode", type: 'filter', width: 90 },)
+  }
+  tableInfo.value.fields = originFields.value;
+  getFirstPageData();
+});
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_panel_wrap">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+    </div>
+    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" @drawerTableBtnClick="drawerTableClick" @drawerTablePageChange="metaChangeTablePageChange" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0;
+
+  .table_panel_wrap {
+    height: 100%;
+    padding: 16px 16px 0;
+  }
+}
+
+:deep(.el-drawer) {
+
+.el-drawer__body {
+  padding: 10px 10px 0px 10px;
+}
+
+.drawer_panel {
+  height: 100%;
+
+  .table_panel_wrap {
+    height: 100%;
+  }
+}
+
+
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: metaSheet
+</route>
+
+<script lang="ts" setup name="metaSheet">
+import { ref } from 'vue'
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { CaretRight } from '@element-plus/icons-vue'
+import Table from '@/components/Table/index.vue'
+import Tabs from '@/components/Tabs/index.vue'
+import Drawer from '@/components/Drawer/index.vue'
+import { changeNum } from '@/utils/common'
+import useUserStore from "@/store/modules/user";
+import LineageGraph from '@/components/LineageGraph/index.vue';
+import EllipsisTooltip from '@/components/EllipsisTooltip.vue';
+import {
+  getMetaDetail,
+  getMetaSheetField,
+  getMetaSheetKeys,
+  getMetaChange,
+  getMetaChangeRecord,
+  getTableLineage,
+  getTableAllFieldLineage,
+  getMetacompareList,
+  saveMetaReportAnalysis,
+  checkTableData
+} from '@/api/modules/dataMetaService';
+import { getFileUrl } from "@/api/modules/queryService"
+import useDataMetaStore from "@/store/modules/dataMeta"
+import { TableColumnWidth } from '@/utils/enum';
+
+const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+const { set } = useDataMetaStore()
+const lineageData = ref([]);
+
+const userStore = useUserStore();
+const detailGuid: any = ref('')
+const sheetInfo: any = ref({})
+const listLoading = ref(false)
+const sheetList = ref([
+  { label: '创建时间', field: 'metaCreateTime', value: '--' },
+  { label: '修改时间', field: 'metaUpdateTime', value: '--' }
+])
+const fieldList = ref([
+  { label: '存储量(约)(MB)', field: 'storageCapacities', value: 0.00, type: 'chnum', fixedNum: 2 },
+  { label: '总字段数', field: 'columns', value: 0, type: 'chnum' },
+  { label: '总行数(约)', field: 'tableRows', value: 0, type: 'chnum' },
+  { label: '数据总量(个)', field: 'dataCount', value: 0, type: 'chnum' },
+  { label: '是否分区表', field: 'isPartition', value: '--', type: 'filter' },
+  { label: '索引数', field: 'indexes', value: 0, type: 'chnum' },
+  { label: '储存引擎', field: 'tableEngine', value: '--' },
+  { label: '字符集', field: 'characterSet', value: '--' },
+  { label: '外部表信息', field: 'wbb', value: '--' },
+])
+
+const tabsActiveName = ref('first')
+const tabsInfo = ref({
+  activeName: '',
+  tabs: [
+    { label: '基础信息', name: 'first' },
+    { label: '数据血缘', name: 'second' },
+    { label: '变更记录', name: 'third' }
+  ]
+})
+/** 切换布局 */
+const isToggle = ref(true);
+/** 是否显示英文名称，默认不显示。 */
+const isCh = ref(false);
+/** 是否是字段血缘关系 */
+const isFieldLineage = ref(false);
+const fieldTableInfo = ref({
+  id: 'field-table',
+  minHeight: 'unset',
+  maxHeight: '100%',
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+    { label: "字段英文名称", field: "enName", width: 150 },
+    { label: "字段中文名称", field: "chName", width: 150 },
+    { label: "注释", field: "comment", width: TableColumnWidth.TABLENAME },
+    { label: "字段类型", field: "fieldTypeChName", width: 100 },
+    { label: "长度", field: "fieldLength", width: 100, align: 'right', type: 'chnum', isNaN: true },
+    { label: "精度", field: "fieldPrecision", width: 100, align: 'right' },
+    { label: "是否主键", field: "isPrimary", type: 'filter', width: 100 },
+    // { label: "是否外键", field: "isFk", type: 'filter', width: 100 },
+    { label: "是否必填 ", field: "notNull", type: 'filter', width: 100 },
+    // { label: "是否分区", field: "isPartition", type: 'filter', width: 100 },
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 90,
+    fixed: 'right',
+    btns: [
+      {
+        label: "查看血缘", value: "view", click: (scope, btn) => {
+          //跳转倒查看血缘页面。
+          let row = scope.row;
+          set({
+            tableGuid: sheetInfo.value.guid, 
+            table: sheetInfo.value.tableName, 
+            databas: sheetInfo.value.databaseName, 
+            databaseCh: sheetInfo.value.databaseChName,
+            dsGuid: sheetInfo.value.databaseGuid, 
+            fGuid: row.guid,
+            fEnName: row.enName
+          })
+          router.push({
+            name: "analysisView",
+          })
+        }
+      },
+    ],
+  },
+  loading: false
+})
+
+const indexTableInfo = ref({
+  id: 'index-table',
+  minHeight: 'unset',
+  maxHeight: '100%',
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+    { label: "索引名", field: "indexName", width: 160 },
+    { label: "索引类型", field: "indexType", width: 100 },
+    { label: "索引字段", field: "indexColumn", width: 160 },
+    { label: "唯一性", field: "isUnique", type: 'filter', width: 120, },
+    { label: "索引大小(MB)", field: "indexLength", width: 150, align: 'right' },
+    // { label: "创建时间", field: "createTime", width: 180, },
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    show: false
+  },
+  loading: false
+})
+
+const logPage = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+})
+const currLogTableData: any = ref({})
+const logTableInfo = ref({
+  id: 'log-table',
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+    { label: "采集任务名称", field: "collectTaskName", width: 140, type: 'text_btn', class: 'drawer-detail-cell', value: 'task-detail' },
+    // { label: "采集时间", field: "createTime", width: 180, },
+    { label: "同步策略", field: "collectMode", type: 'filter', width: 120 },
+    { label: "新增元数据", field: "addChangeRecordNum", type: 'chnum', width: 120, align: 'right' },
+    { label: "修改元数据", field: "updateChangeRecordNum", type: 'chnum', width: 120, align: 'right' },
+    { label: "删除元数据", field: "deleteChangeRecordNum", type: 'chnum', width: 120, align: 'right' },
+  ],
+  data: [
+    {
+      taskName: '采集任务1',
+      updateTime: '2022-12-22 10:30:02',
+      addnum: 1350,
+      updatenum: 239,
+      deletenum: 20,
+      operator: ''
+    }
+  ],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...logPage.value
+  },
+  actionInfo: {
+    show: false
+  },
+  loading: false
+})
+
+const tabsPane: any = ref([])
+const tabsPaneMap = ref({
+  first: [
+    {
+      title: '字段信息',
+      type: 'table',
+      tableInfo: fieldTableInfo.value,
+      show: true
+    }, {
+      title: '索引信息',
+      type: 'table',
+      isIndex: true,
+      tableInfo: indexTableInfo.value,
+      show: true
+    },
+  ],
+  second: [
+    {
+      title: '',
+      type: 'X6'
+    },
+  ],
+  third: [
+    {
+      title: '',
+      type: 'table',
+      tableInfo: logTableInfo.value
+    },
+  ]
+})
+
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+const formInline1 = ref({ pageName: "" })
+const formTable = ref({
+  type: "table",
+  title: "",
+  col: 'no-margin',
+  tableInfo: {
+    loading: false,
+    id: "task-detail-table",
+    minHeight: 'unset',
+    fields: [
+      { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+      { label: "元数据名称", field: "metaName", width: 150, align: "center", fixed: "left" },
+      {
+        label: "元数据类型", field: "metaType", width: 100, getName: (scope) => {
+          if (!scope.row.metaType) {
+            return '--';
+          }
+          return scope.row.metaType == 'TABLE' ? '表' : (scope.row.metaType == 'INDEX' ? '索引' : (scope.row.metaType == 'PRI' ? '主键' : '字段'));
+        }
+      },
+
+      {
+        label: "变更类型", field: "metaChangeType", width: 100, getName: (scope) => {
+          if (!scope.row.metaChangeType) {
+            return '--';
+          }
+          return scope.row.metaChangeType == 'ADD' ? '新增' : (scope.row.metaChangeType == 'DELETE' ? '删除' : '修改');
+        }
+      },
+      { label: "变化", field: "metaChangeType", width: 100, type: 'popover', value: 'metaCurrValue', column: [{ field: "item", label: "变化信息", width: "150" }, { field: "oldValue", label: "原值", width: "150" }, { field: "newValue", label: "现值", width: "150" }] },
+      // { label: "原值", field: "metaOldValue", width: 120 },
+      { label: "采集时间", field: "changeTime", width: 180, },
+    ],
+    data: [],
+    popoverData: [],
+    popoverloading: false,
+    page: {
+      type: "normal",
+      rows: 0,
+      ...page.value,
+    },
+    actionInfo: {
+      show: false
+    },
+  },
+})
+const drawerInfo: any = ref({
+  visible: false,
+  direction: "rtl",
+  modalClass: "wrap_width_auto",
+  modalClose: false,
+  modal: true,
+  size: 600,
+  header: {
+    title: "",
+  },
+  type: '',
+  container: {
+    contents: [
+      formTable.value,
+    ],
+  },
+  footer: {
+    visible: false,
+    btns: [
+      { type: 'default', label: '取消', value: 'cancel' },
+      { type: 'primary', label: '确认 ', value: 'save' },
+    ]
+  },
+})
+const drawerTableClick = (scope, btn) => {
+  drawerInfo.value.container.contents[0].tableInfo.popoverloading = true
+  getMetacompareList(scope.row.guid).then((res: any) => {
+    drawerInfo.value.container.contents[0].tableInfo.popoverloading = false
+    drawerInfo.value.container.contents[0].tableInfo.popoverData = res.data
+
+  })
+}
+/** 数据血缘加载状态。 */
+const lineageDataLoading = ref(true);
+
+const getDetailInfo = () => {
+  getSheetDetail()
+  getSheetField()
+  getSheetKeys()
+  logPage.value.curr = 1
+  getSheetLog();
+  getTableLineageMap();
+}
+
+const getSheetDetail = () => {
+  listLoading.value = true
+  getMetaDetail(detailGuid.value).then((res: any) => {
+    listLoading.value = false
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      sheetInfo.value = data
+      let tab: any = userStore.tabbar.find((tab: any) => tab.fullPath === router.currentRoute.value.fullPath);
+      if (tab) {
+        tab.meta.title = `元数据详情-${data.tableChName || data.tableName}`;
+      }
+      fieldList.value.map((item: any) => {
+        if (item.type && item.type == 'chnum') {
+          item.value = data[item.field] ?? 0
+        } else {
+          item.value = data[item.field] ?? '--'
+        }
+      })
+      sheetList.value.map((item: any) => {
+        item.value = data[item.field] ?? '--'
+      })
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  }).catch(() => {
+    listLoading.value = false
+  })
+}
+
+const getSheetField = () => {
+  let params = {
+    tableGuid: detailGuid.value
+  }
+  fieldTableInfo.value.loading = true
+  getMetaSheetField(params).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || []
+      fieldTableInfo.value.data = data
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+    fieldTableInfo.value.loading = false
+  }).catch(() => {
+    fieldTableInfo.value.loading = false
+  })
+}
+
+const getSheetKeys = () => {
+  let params = {
+    tableGuid: detailGuid.value
+  }
+  indexTableInfo.value.loading = true
+  getMetaSheetKeys(params).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || []
+      indexTableInfo.value.data = data
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+    indexTableInfo.value.loading = false
+  }).catch(() => {
+    indexTableInfo.value.loading = false
+  })
+}
+
+const getSheetLog = () => {
+  let params = {
+    tableGuid: detailGuid.value,
+    pageIndex: logPage.value.curr,
+    pageSize: logPage.value.limit
+  }
+  logTableInfo.value.loading = true
+  getMetaChange(params).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      logTableInfo.value.data = data.records ?? []
+      logTableInfo.value.page.limit = data.pageSize
+      logTableInfo.value.page.curr = data.pageIndex
+      logTableInfo.value.page.rows = data.totalRows
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+    logTableInfo.value.loading = false
+  }).catch(() => {
+    logTableInfo.value.loading = false
+  })
+}
+
+
+const tablePageChange = (info) => {
+  logPage.value.curr = Number(info.curr);
+  logPage.value.limit = Number(info.limit);
+  getSheetLog()
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currLogTableData.value = row;
+  if (type == "task-detail") {
+    page.value.limit = 50;
+    page.value.curr = 1;
+    drawerInfo.value.header.title = row.collectTaskName;
+    drawerInfo.value.type = type
+    let params = {
+      collectTaskGuid: row.guid,
+      tableGuid: detailGuid.value,
+      pageSize: page.value.limit,
+      pageIndex: page.value.curr
+    }
+    getMetaChangeRecordData(params);
+  }
+};
+
+const getMetaChangeRecordData = (params) => {
+  formTable.value.tableInfo.loading = true;
+  getMetaChangeRecord(params).then((res: any) => {
+    formTable.value.tableInfo.loading = false;
+    if (res.code == proxy.$passCode && res.data) {
+      let data = res.data || {}
+      formTable.value.tableInfo.data = data.records || []
+      formTable.value.tableInfo.page.limit = data.pageSize;
+      formTable.value.tableInfo.page.curr = data.pageIndex;
+      formTable.value.tableInfo.page.rows = data.totalRows;
+      const contents = [formTable.value]
+      drawerInfo.value.container.contents = contents
+      drawerInfo.value.footer.visible = false
+      drawerInfo.value.visible = true
+    } else {
+      ElMessage({
+        type: "error",
+        message: res.msg,
+      });
+    }
+  })
+}
+
+const filterValue = (row) => {
+  let val: any = row.value || '--'
+  if (row.type && row.type == 'chnum') {
+    val = changeNum(row.value, row.fixedNum ?? 0)
+  } else if (row.type && row.type == 'filter') {
+    if (row.field == 'isPartition') {
+      switch (row.value) {
+        case "Y":
+          val = '是'
+          break;
+        case "N":
+          val = '否'
+          break;
+        default:
+          val = '--'
+          break;
+      }
+    }
+  }
+  return val
+}
+
+const tabChange = (tab) => {
+  tabsActiveName.value = tab
+  tabsPane.value = tabsPaneMap.value[tabsActiveName.value]
+}
+
+const drawerBtnClick = (btn, info) => {
+  console.log(btn)
+  if (btn.value == 'cancel') {
+    drawerInfo.value.visible = false
+  } else if (btn.value = "metaCurrValue") {
+    console.log((1233))
+  }
+}
+
+const drawerTablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  if (!currLogTableData.value?.guid) {
+    return;
+  }
+  getMetaChangeRecordData({
+    collectTaskGuid: currLogTableData.value?.guid,
+    tableGuid: detailGuid.value,
+    pageSize: page.value.limit,
+    pageIndex: page.value.curr
+  });
+}
+
+onBeforeMount(() => {
+  detailGuid.value = router.currentRoute.value.query?.id || ''
+  tabsInfo.value.activeName = tabsActiveName.value
+  tabsPane.value = tabsPaneMap.value[tabsActiveName.value]
+  getDetailInfo()
+})
+
+onMounted(() => {
+  let dom = document.getElementById('main-app');
+  if (dom) {
+    dom.addEventListener('click', (event: any) => {
+      if (!event.target?.classList?.contains('drawer-detail-cell')) {
+        if (drawerInfo.value.visible) {
+          drawerInfo.value.visible = false;
+        }
+      }
+    });
+  }
+});
+const lineageGraph = ref()
+const file: any = ref({})
+const handleSave = (file1, fullRef) => {
+  file.value = file1
+  dialogInfo1.value.visible = true
+  nextTick(() => {
+    const ele = document.querySelector(".saveDialog1")
+    if (ele) {
+      fullRef.appendChild(ele)
+    }
+  })
+}
+const pageSave = () => {
+  const analysisReportName = reportDialogRef.value.dialogFormRef[0].formInline.analysisReportName;
+  if (!analysisReportName) {
+    ElMessage({
+      type: "error",
+      message: "血缘关系名称不能为空！",
+      appendTo: lineageGraph.value[0].containerRef
+    })
+    return
+  }
+  let formData = new FormData();
+  formData.append('file', file.value);
+  formData.append('fileName', `${analysisReportName}.png`);
+  console.log(formInline1.value.pageName)
+  getFileUrl(formData).then((res) => {
+    saveMetaReportAnalysis({
+      table: sheetInfo.value.tableName,
+      database: sheetInfo.value.databaseName,
+      analysisReportUrl: res.data,
+      analysisReportName: analysisReportName,
+      databaseChName: sheetInfo.value.databaseChName
+    }).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        // ElMessage.success("保存成功")
+        ElMessage({
+          type: "success",
+          message: "保存成功",
+          appendTo: lineageGraph.value[0].containerRef
+        })
+        dialogInfo1.value.visible = false
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+          appendTo: lineageGraph.value[0].containerRef
+        })
+      }
+    })
+  }).catch((res) => {
+    ElMessage({
+      type: "error",
+      message: res.msg,
+      appendTo: lineageGraph.value[0].containerRef
+    })
+  })
+}
+
+const formItems1: any = ref([
+  {
+    label: '血缘关系名称',
+    type: 'input',
+    placeholder: '请输入',
+    field: 'analysisReportName',
+    default: '',
+    clearable: true,
+    required: true
+  },
+])
+const formRules1: any = ref({
+  analysisReportName: [
+    {
+      required: true,
+      message: "请填写血缘关系名称",
+      trigger: "blur",
+    },
+  ],
+})
+const formInfo1 = ref({
+  type: 'form',
+  title: '',
+  formInfo: {
+    id: 'add-dict-form',
+    items: formItems1.value,
+    rules: formRules1.value
+  }
+})
+const reportDialogRef = ref();
+const dialogInfo1 = ref({
+  visible: false,
+  size: 500,
+  direction: "column",
+  modalClass: "saveDialog1",
+  header: {
+    title: "保存为血缘关系图片",
+  },
+  type: '',
+  contents: [
+    formInfo1.value,
+  ],
+  footer: {
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "保存", value: "submit" },
+    ],
+  },
+});
+const dialogBtnClick1 = (btn, scope) => {
+  if (btn.value === "cancel") {
+    dialogInfo1.value.visible = false
+  } else {
+    pageSave()
+  }
+
+}
+const handleTableContextMenu = (tableGuid, tableName, database, btnType, vertexId, databaseChName, chTable, neighbor, fieldGuid) => {
+  if (btnType == 1) {//查看元数据详情
+    lineageGraph.value[0].handleEdit({});//先退出全屏再跳转，否则回来查看时就没有了。
+    checkTableData(tableGuid).then((res: any) => {
+      if (res.code === proxy.$passCode) {
+        if (res.data) {
+          router.push({
+            path: '/data-meta/metadata-query/meta-sheet',
+            query: {
+              id: tableGuid,
+              name: chTable
+            }
+          })
+        } else {
+          ElMessage.warning("元数据详情不存在")
+        }
+      }
+    })
+  }
+}
+const handleRefres = () => {
+  if (isFieldLineage.value) {
+    getAllTableFieldLineageMap();
+  } else {
+    getTableLineageMap();
+  }
+}
+const handleEdit = () => {
+  lineageGraph.value[0].handleEdit({});//先退出全屏再跳转，否则回来查看时就没有了。
+  set({
+    tableGuid: sheetInfo.value.guid, 
+    table: sheetInfo.value.tableName, 
+    databas: sheetInfo.value.databaseName, 
+    databaseCh: sheetInfo.value.databaseChName,
+    dsGuid: sheetInfo.value.databaseGuid, 
+    isFieldLine: isFieldLineage.value
+  })
+  router.push({
+    name: "analysisView",
+  })
+}
+const handleToggle = () => {
+  isToggle.value = !isToggle.value
+}
+
+/** 处理中英文切换。 */
+const handleChOrEn = (flag) => {
+  isCh.value = flag
+}
+
+const getTableLineageMap = () => {
+  isFieldLineage.value = false;
+  lineageDataLoading.value = true;
+  getTableLineage({
+    guid: detailGuid.value
+  }).then((res: any) => {
+    lineageDataLoading.value = false;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || []
+      lineageData.value = data;
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  });
+}
+
+const getAllTableFieldLineageMap = () => {
+  lineageDataLoading.value = true;
+  isFieldLineage.value = true;
+  getTableAllFieldLineage({ databaseName: sheetInfo.value.databaseName, tableName: sheetInfo.value.tableName }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data1 = res.data || [];
+      lineageData.value = data1;
+      isFieldLineage.value = true;
+      nextTick(() => {
+        if (lineageData.value.length > 0) {
+          lineageGraph.value[0].updateLayout();
+          lineageDataLoading.value = false;
+        } else {
+          lineageDataLoading.value = false;
+        }
+      });
+    } else {
+      lineageDataLoading.value = false;
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  })
+}
+
+const handleLineageSwitchChange = (val) => {
+  if (val) {
+    isToggle.value = true;
+    getAllTableFieldLineageMap();
+  } else {
+    getTableLineageMap();
+  }
+}
+</script>
+
+<template>
+  <div class="container_wrap full flex">
+    <div class="aside_wrap">
+      <div class="sheet_panel" v-loading="listLoading">
+        <div class="panel_header">
+          <h4>{{ sheetInfo.tableChName ?? '--' }}</h4>
+          <p>{{ sheetInfo.tableName ?? '--' }}</p>
+        </div>
+        <div class="panel_body">
+          <div class="sheet_list">
+            <div class="list_item" v-for="sheet in sheetList">
+              <p class="item_text">{{ sheet.label }}</p>
+              <p class="item_value">{{ sheet.value }}</p>
+            </div>
+          </div>
+          <div class="field_list">
+            <div class="list_item" v-for="field in fieldList">
+              <span class="item_text">{{ field.label }}：</span>
+              <span class="item_value">{{ filterValue(field) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main_wrap">
+      <Tabs :tabs-info="tabsInfo" @tab-change="tabChange" />
+      <div class="tabs_pane_panel">
+        <div class="tabs_pane" :class="{ full: !pane.title }" v-for="pane in tabsPane">
+          <template v-if="pane.type == 'table'">
+            <div v-if="pane.title" class="pane_header">
+              <span class="header_title" :class="{ active: pane.show }" @click="pane.show = !pane.show" v-preReClick>
+                <el-icon>
+                  <CaretRight />
+                </el-icon>
+                <span>{{ pane.title }}</span>
+              </span>
+            </div>
+            <div class="pane_body" :class="{ active: pane.show ?? true, indexInfo: pane.show ? pane.isIndex : false }"
+              :style="{ paddingTop: pane.title ? '' : '16px' }">
+              <Table :tableInfo="pane.tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+            </div>
+          </template>
+          <template v-else>
+            <div class="lineage-content" v-loading="lineageDataLoading">
+              <LineageGraph ref="lineageGraph" v-if="lineageData.length" layout="vertical" :lineageData="lineageData"
+                :is-field-lineage="isFieldLineage" :primary-table="sheetInfo.tableName" :is-detail="true"
+                :primaryDatabase="sheetInfo.databaseName" :isEdit="true" @handleSave="handleSave"
+                @tableContextMenu="handleTableContextMenu" @handleToggle="handleToggle" :isToggle="isToggle" @handleChOrEn=handleChOrEn :isCh="isCh"
+                @handleRefres="handleRefres" @handleEdit="handleEdit"
+                @handleLineageSwitchChange="handleLineageSwitchChange" />
+
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" @drawerTableBtnClick="drawerTableClick"
+      @drawerTablePageChange="drawerTablePageChange" />
+    <Dialog ref="reportDialogRef" :dialogInfo="dialogInfo1" @btnClick="dialogBtnClick1" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  .aside_wrap {
+    width: 199px;
+    border-right: 1px solid #d9d9d9;
+    box-shadow: none;
+
+    .sheet_panel {
+      .panel_header {
+        padding: 12px 0 0;
+        word-break: break-all;
+
+        h4,
+        p {
+          margin: 0;
+          padding: 0 12px;
+        }
+
+        h4 {
+          font-size: 16px;
+          color: var(--el-color-regular);
+          line-height: 24px;
+        }
+
+        p {
+          font-size: 14px;
+          color: var(--el-text-color-regular);
+          line-height: 21px;
+        }
+      }
+
+      .panel_body {
+        padding: 0 12px;
+
+        .sheet_list {
+          margin-bottom: 16px;
+
+          .list_item {
+            &.list_item {
+              margin-top: 8px;
+            }
+
+            p {
+              margin: 0;
+              font-size: 12px;
+              color: #999;
+              line-height: 18px;
+
+              &.item_value {
+                color: var(--el-color-regular);
+              }
+            }
+          }
+        }
+
+        .field_list {
+          padding: 8px 0;
+
+          .list_item {
+            font-size: 12px;
+            color: var(--el-text-color-regular);
+
+            &.list_item {
+              margin-top: 4px;
+            }
+
+            span.item_text {
+              color: var(--el-color-regular);
+              // margin-right: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .main_wrap {
+    padding: 0;
+    height: auto;
+    flex: 1;
+
+    :deep(.el-tabs) {
+
+      .el-tabs__header {
+        margin-bottom: 0;
+      }
+
+      .el-tabs__item {
+        height: 32px;
+
+        &:nth-child(2) {
+          padding-left: 16px;
+        }
+
+        &:last-child {
+          padding-right: 16px;
+        }
+
+        &::after {
+          content: '';
+          width: 100%;
+          height: 2px;
+          background-color: transparent;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+        }
+
+        &.is-active {
+          &::after {
+            background-color: var(--el-color-primary);
+          }
+        }
+      }
+
+      .el-tabs__active-bar {
+        display: none;
+      }
+    }
+
+    .tabs_pane_panel {
+      height: calc(100% - 32px);
+      background-color: #f7f7f9;
+      overflow: hidden auto;
+
+      .tabs_pane {
+        background-color: #fff;
+
+        .lineage-content {
+          height: 100%;
+          background-color: #f7f7f9;
+
+          .card-noData {
+            height: 100%;
+            width: 100%;
+            background: #fafafa;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: #909399;
+            font-size: 14px;
+          }
+
+        }
+
+        &+.tabs_pane {
+          margin-top: 4px;
+        }
+
+        .pane_header {
+          height: 40px;
+          padding: 0 16px;
+
+          .header_title {
+            width: 100px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            color: var(--el-color-regular);
+            cursor: pointer;
+
+            .el-icon {
+              margin-right: 8px;
+              transition: all .3s;
+            }
+
+            &.active {
+              .el-icon {
+                transform: rotateZ(90deg);
+              }
+            }
+          }
+        }
+
+        .pane_body {
+          padding: 0 16px;
+          height: 0;
+          transition: all .3s;
+          overflow: hidden;
+
+          &.active {
+            height: 410px;
+          }
+
+          &.indexInfo {
+            height: 250px;
+          }
+
+          .table_panel {
+            min-height: unset;
+            padding-bottom: 16px;
+          }
+        }
+
+        &.full {
+          height: 100%;
+          padding: 0px;
+          overflow: hidden;
+
+          .pane_body {
+            min-height: 394px;
+            height: 100%;
+
+            .table_panel {
+              min-height: unset;
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.el-drawer) {
+
+  .el-drawer__body {
+    padding: 10px 10px 0px 10px;
+  }
+
+  .drawer_panel {
+    height: 100%;
+
+    .table_panel_wrap {
+      height: 100%;
+    }
+  }
+
+
+}
+
+:deep(.el-form .el-form-item) {
+  width: calc(100%);
+}
+</style>

+<router lang="yaml">
+  name: metadataQuery
+  </router>
+
+<script lang="ts" setup name="metadataQuery">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from "element-plus";
+import Tree from '@/components/Tree/index.vue'
+import Table from '@/components/Table/index.vue'
+import { changeNum } from '@/utils/common'
+import { useRouter ,useRoute} from "vue-router";
+import {
+  getMetaTreeData,
+  getMetaDatabaseCollect,
+  getMetaDataBase,
+  getMetaDataSheet,
+} from '@/api/modules/dataMetaService';
+import { TableColumnWidth } from '@/utils/enum';
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute()
+let dataSourceGuid = route.query.dataSourceGuid
+let datasourceName = route.query.datasourceName 
+const currNodeInfo: any = ref({})
+const expandedKey: any = ref([])
+const currentNodeKey = ref('')
+const treeData: any = ref([])
+const databaseCount = ref(0) //数据库总数
+const treeInfo = ref({
+  id: "data-pickup-tree",
+  filter: true,
+  queryValue: "",
+  queryPlaceholder: "输入库/表名称搜索",
+  props: {
+    label: "name",
+    value: "guid",
+  },
+  nodeKey: 'guid',
+  expandedKey: [],
+  currentNodeKey: '',
+  expandOnNodeClick: false,
+  data: [],
+  loading: false
+});
+
+const cardMap = ref({
+  source: {
+    id: 'database-table',
+    count: [
+     {
+        label: '总表数',
+        field: 'tableCount',
+        value: 0,
+        type: 'chnum',
+        unit: '个',
+        icon: new URL('@/assets/images/icon2.png', import.meta.url).href
+      }, {
+        label: '存储量(约)',
+        field: 'storageCapacities',
+        value: 0.00,
+        type: 'chnum',
+        fixedNum: 2,
+        unit: 'GB',
+        icon: new URL('@/assets/images/icon3.png', import.meta.url).href
+      }, {
+        label: '总字段数',
+        field: 'columns',
+        value: 0,
+        type: 'chnum',
+        unit: '个',
+        icon: new URL('@/assets/images/icon4.png', import.meta.url).href
+      }, {
+        label: '总行数(约)',
+        field: 'tableRows',
+        value: 0,
+        type: 'chnum',
+        unit: '行',
+        icon: new URL('@/assets/images/icon5.png', import.meta.url).href
+      },
+      {
+        label: '数据总量',
+        field: 'dataCount',
+        value: 0,
+        type: 'chnum',
+        unit: '万个',
+        icon: new URL('@/assets/images/dataCount.png', import.meta.url).href
+      }
+    ],
+    fields: [
+      { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center", fixed: "left" },
+      { label: "数据库名称", field: "databaseNameZh", width: 160 },
+      { label: "数据库名", field: "databaseName", width: 160 },
+      // { label: "存储索引", field: "operator", width: 120 },
+      { label: "总表数", field: "tableCount", type: 'chnum', width: 100, align: 'right' },
+      { label: "存储量(约)(MB)", field: "storageCapacities", type: 'chnum', fixedNum: 2, width: 140, align: 'right' },
+      { label: "总字段数", field: "columns", type: 'chnum', width: 100, align: 'right' },
+      { label: "总行数(约)", field: "tableRows", type: 'chnum', width: 100, align: 'right' },
+      { label: "数据采集时间", field: "collectTime", width: TableColumnWidth.DATETIME },
+    ]
+  },
+  database: {
+    id: 'datasheet-table',
+    count: [
+      {
+        label: '总表数',
+        field: 'tableCount',
+        value: 0,
+        type: 'chnum',
+        unit: '个',
+        icon: new URL('@/assets/images/icon2.png', import.meta.url).href
+      }, {
+        label: '存储量(约)',
+        field: 'storageCapacities',
+        value: 0.00,
+        type: 'chnum',
+        fixedNum: 2,
+        unit: 'GB',
+        icon: new URL('@/assets/images/icon3.png', import.meta.url).href
+      }, {
+        label: '总字段数',
+        field: 'columns',
+        value: 0,
+        type: 'chnum',
+        unit: '个',
+        icon: new URL('@/assets/images/icon4.png', import.meta.url).href
+      }, {
+        label: '总行数(约)',
+        field: 'tableRows',
+        value: 0,
+        type: 'chnum',
+        unit: '行',
+        icon: new URL('@/assets/images/icon5.png', import.meta.url).href
+      },
+      {
+        label: '数据总量',
+        field: 'dataCount',
+        value: 0,
+        type: 'chnum',
+        unit: '万个',
+        icon: new URL('@/assets/images/dataCount.png', import.meta.url).href
+      }
+    ],
+    fields: [
+      { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center", fixed: "left" },
+      { label: "表中文名称", field: "tableChName", width: 140 },
+      { label: "表英文名称", field: "tableName", width: TableColumnWidth.TABLENAME },
+      { label: "存储量(约)(MB)", field: "storageCapacities", type: 'chnum', fixedNum: 2, width: 140, align: 'right' },
+      { label: "总字段数", field: "columns", type: 'chnum', width: 120, align: 'right' },
+      { label: "总行数(约)", field: "tableRows", type: 'chnum', width: 120, align: 'right' },
+      { label: "索引数", field: "indexes", type: 'chnum', width: 120, align: 'right' },
+      { label: "是否分区表", field: "isPartition", type: 'filter', width: 120 },
+      { label: "表创建时间", field: "createTime", width: TableColumnWidth.DATETIME },
+      { label: "数据采集时间", field: "collectTime", width: TableColumnWidth.DATETIME },
+    ]
+  },
+})
+
+const cardLoading = ref(false)
+const cardList: any = ref([])
+const treeActive = ref('source')
+
+const currentTitle = ref("数据库总览")
+const currTableData: any = ref<Object>({});
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+const selectRowData = ref([])
+const tableFields: any = ref([])
+const tableData: any = ref([])
+const tableInfo: any = ref({
+  id: 'data-table',
+  fields: cardMap.value[treeActive.value].fields,
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 60,
+    fixed: 'right',
+    btns: [
+      { label: "详情", value: "detail" },
+    ],
+  },
+  loading: false
+})
+
+const getTreeData = () => {
+  treeInfo.value.loading = true
+  let params = {}
+  getMetaTreeData(params).then((res: any) => {
+    treeInfo.value.loading = false
+    if (res.code == proxy.$passCode) {
+      const data = res.data || [];
+      const treeList = Object.keys(data).length ? [data] : [];
+      treeData.value = treeList;
+      if (treeList.length) {
+        expandedKey.value = expandedKey.value.length == 0 ? [treeList[0].guid] : expandedKey.value
+        currentNodeKey.value = currentNodeKey.value == '' ? treeList[0].guid : currentNodeKey.value
+        currNodeInfo.value = treeList[0];
+      }
+      treeInfo.value.data = treeData.value
+      nextTick(() => {
+        treeInfo.value.currentNodeKey = currentNodeKey.value
+        treeInfo.value.expandedKey = expandedKey.value
+      })
+      getFirstPageData()
+      getDatabaseCount({ databaseGuid: currentNodeKey.value  === "0" ? "" : currentNodeKey.value })
+    } else {
+      ElMessage.error(res.msg);
+    }
+  }).catch(() => {
+    treeInfo.value.loading = false
+  })
+}
+
+const getDatabaseCount = (params) => {
+  cardLoading.value = true
+  getMetaDatabaseCollect(params).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      databaseCount.value = data.databaseCount
+      cardMap.value[treeActive.value].count.map(item => {
+        item.value = data[item.field]
+      })
+      cardList.value = cardMap.value[treeActive.value].count
+    } else {
+      ElMessage.error(res.msg);
+    }
+    cardLoading.value = false
+  }).catch(() => {
+    cardLoading.value = false
+  })
+}
+
+const getFirstPageData = () => {
+  page.value.curr = 1
+  toSearch({})
+}
+
+const toSearch = (val: any, clear: boolean = false) => {
+  let params: any = Object.keys(val).length ? { ...val } : {}
+  params.pageIndex = page.value.curr;
+  params.pageSize = page.value.limit;
+  if (treeActive.value == 'database') {
+    params.databaseGuid = currNodeInfo.value.guid
+  }
+  getTableData(params);
+};
+
+const getTableData = (params) => {
+  let method: any = null
+  tableInfo.value.loading = true
+  if (treeActive.value == 'source') {
+    method = getMetaDataBase(params)
+  } else {
+    method = getMetaDataSheet(params)
+  }
+  method.then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      tableData.value = data.records || []
+      tableFields.value = cardMap.value[treeActive.value].fields
+      tableInfo.value.id = cardMap.value[treeActive.value].id
+      tableInfo.value.fields = tableFields.value
+      tableInfo.value.data = tableData.value
+      tableInfo.value.page.limit = data.pageSize
+      tableInfo.value.page.curr = data.pageIndex
+      tableInfo.value.page.rows = data.totalRows
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+    tableInfo.value.loading = false
+  }).catch(xhr => {
+    tableInfo.value.loading = false
+  })
+};
+
+const tableSelectionChange = (val) => {
+  selectRowData.value = val.map((item) => item.guid);
+};
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  toSearch({});
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+  if (type == "detail") {
+    
+    if (treeActive.value == 'source') {
+      let params: any = {}
+      currentTitle.value = row.databaseNameZh
+      params.databaseGuid = row.databaseGuid 
+      currNodeInfo.value.guid = row.databaseGuid 
+      getDatabaseCount(params)
+      treeActive.value = 'database'
+      getFirstPageData();
+      currentNodeKey.value = row.databaseGuid;
+      expandedKey.value = [row.databaseGuid]
+      nextTick(() => {
+        treeInfo.value.currentNodeKey = currentNodeKey.value;
+        treeInfo.value.expandedKey = expandedKey.value;
+      })
+    } else {
+      treeInfo.value.currentNodeKey = row.guid;
+      router.push({
+        path: '/data-meta/metadata-query/meta-sheet',
+        query: {
+          id: row.guid,
+          name: row.tableChName || row.tableName
+        }
+      })
+    }
+  }
+};
+
+const filterValue = (row,num=1) => {
+  let val: any = null
+  if (row.type == 'chnum') {
+    val = changeNum(row.value ? row.value/num : 0, row.fixedNum ?? 0)
+  }
+  return val
+}
+
+const nodeClick = (data) => {
+  if (data.type == 1 || data.type == 2) {
+    currNodeInfo.value = data;
+    currentTitle.value = data.name
+    treeActive.value = data.type == 1 ? 'source' : 'database'
+    let params: any = {}
+    if (treeActive.value == 'source') {
+      params.dataSourceGuid = data.guid === "0" ? "" : data.guid
+    } else {
+      params.databaseGuid = data.guid
+    }
+    getDatabaseCount(params)
+    getFirstPageData()
+  } else {
+    router.push({
+      path: '/data-meta/metadata-query/meta-sheet',
+      query: {
+        id: data.guid,
+        name: data.name
+      }
+    })
+  }
+}
+const getQueryTreeData = ()=>{
+  treeInfo.value.loading = true
+  let params = {}
+  getMetaTreeData(params).then((res: any) => {
+    treeInfo.value.loading = false
+    if (res.code == proxy.$passCode) {
+      const data = res.data || [];
+      const treeList = Object.keys(data).length ? [data] : [];
+      treeData.value = treeList;
+      treeInfo.value.data = treeData.value
+      if (treeList.length) {
+        expandedKey.value = [dataSourceGuid]
+        currentNodeKey.value = dataSourceGuid as string
+        currNodeInfo.value = {type:2,guid:dataSourceGuid,name:datasourceName}
+      }
+      nextTick(() => {
+        treeInfo.value.currentNodeKey = currentNodeKey.value
+        treeInfo.value.expandedKey = expandedKey.value
+      })
+      nodeClick({type:2,guid:dataSourceGuid,name:datasourceName}) 
+      dataSourceGuid = ""
+  } 
+  }).catch(()=>{
+    treeInfo.value.loading = false
+  })
+}
+onBeforeMount(() => {
+  cardList.value = cardMap.value[treeActive.value].count;
+  if(dataSourceGuid){
+    getQueryTreeData()
+  } else {
+    getTreeData()
+  }
+  
+})
+
+</script>
+
+<template>
+  <div class="container_wrap full flex">
+    <div class="aside_wrap">
+      <div class="aside_title" >数据库目录列表</div>
+      <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
+    </div>
+    <div class="pane-trigger-con"></div>
+    <div class="main_wrap">
+      <div class="table_tool_wrap">
+        <div class="aside_title" style="padding: 0;">
+          <template v-if="currentTitle !=='数据库总览'">
+            <span>数据库：</span>{{ currentTitle }}
+          </template>
+          <template v-else>
+           {{ currentTitle }} <span >({{ databaseCount }})</span>
+          </template>
+        </div>
+        <div class="card_panel">
+          <div class="img_tags_card" v-for="item in cardList" :key="item.label">
+            <img :src="item.icon" alt="">
+            <div class="tags_item">
+              <p class="tag_text">{{ item.label }}</p>
+              <template v-if="item.field==='dataCount'">
+                <el-tooltip
+                    placement="top-start"
+                    trigger="hover"
+                    effect="light"
+                    :show-after="400"
+                    :content="filterValue(item)+'个'"
+                  >
+                      <p class="tag_num"><span>{{ filterValue(item,10000)}}</span><span class="unit">{{ ' ' + item.unit }}</span></p>
+                  </el-tooltip>
+               
+              </template>
+              <template v-else>
+                <p class="tag_num"><span>{{ filterValue(item) }}</span><span class="unit">{{ ' ' + item.unit }}</span></p>
+              </template>
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="table_panel_wrap full">
+        <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
+          @tablePageChange="tablePageChange" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  .aside_wrap {
+    width: 200px;
+  }
+
+  .main_wrap .table_tool_wrap {
+    height: auto;
+
+    .card_panel {
+      height: 48px;
+     // padding: 24px 0;
+     margin-bottom: 20px;
+     padding-top:10px ;
+      display: flex;
+      // justify-content: space-between;
+      align-items: center;
+
+      .img_tags_card {
+        width: 208px;
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 48px;
+          height: 48px;
+        }
+
+        .tags_item {
+          height: 50px;
+          margin-left: 12px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          p {
+            font-size: 14px;
+            color: var(--el-text-color-regular);
+            margin: 0;
+            line-height: 21px;
+
+            &.tag_num {
+              color: var(--el-color-regular);
+              font-size: 16px;
+              font-weight: 600;
+              line-height: 24px;
+
+              .unit {
+                font-size: 14px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .table_panel_wrap.full {
+    height: calc(100% - 104px);
+  }
+
+}
+
+.tree_panel {
+  height: calc(100% - 36px);
+  padding-top: 0;
+
+  :deep(.el-tree) {
+    margin: 0;
+    overflow: hidden auto;
+  }
+}
+.aside_title {
+  padding: 0 8px;
+  font-size: 14px;
+  color: var(--el-color-regular);
+  height: 36px;
+  line-height: 36px;
+  font-weight: 600;
+}
+</style>

+<route lang="yaml">
+  name: analysisLog
+</route>
+
+<script lang="ts" setup name="analysisLog">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import Table from "@/components/Table/index.vue";
+import { getWordLogList } from "@/api/modules/dataQualityWord";
+import { ElMessage } from "element-plus";
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute();
+const guid = route.query.guid;
+const wordName = route.query.name;
+
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+const tableInfo = ref({
+  id: "word-log-table",
+  loading: false,
+  fields: [
+    { label: "报告名称", field: "analysisReportName", width: 230 },
+    {
+      label: "方案类型", field: "analysisReportType", width: 100, getName: (scope) => {
+        let planType = scope.row.analysisReportType;
+        return planType == 1 ? '表' : (planType == 2 ? '数据库' : (planType == 4 ? '数据同步' : '分组'));
+      }
+    },
+    { label: "报告对象", field: "qualityModelName", width: 180, },
+    { label: "质量评分", field: "qualityScore", width: 100, align: "right" },
+    { label: "最后执行时间", field: "execTime", width: 180, },
+    { label: "执行状态", field: "execResult", type: "tag", width: 120, align: "center" },
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 100,
+    fixed: 'right',
+    btns: (scope) => {
+      return [{ label: "查看报告", value: "reportView", disabled: scope.row['execResult'] != 'Y' }];
+    }
+  }
+});
+
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getWordLogList({ pageIndex: page.value.curr, pageSize: page.value.limit, reportGuid: guid }).then((res: any) => {
+    tableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      tableInfo.value.data = data.records || []
+      tableInfo.value.page.limit = data.pageSize
+      tableInfo.value.page.curr = data.pageIndex
+      tableInfo.value.page.rows = data.totalRows
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  if (type == 'reportView') {
+    router.push({
+      name: 'analysisReport',
+      query: {
+        planGuid: row.planGuid,
+        reportExecGuid: row.guid,
+        name: wordName
+      }
+    });
+  }
+};
+
+onBeforeMount(() => {
+  getTableData();
+});
+
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_panel_wrap">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0;
+
+  .table_panel_wrap {
+    height: 100%;
+    padding: 16px 16px 0;
+  }
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: analysisReport
+</route>
+
+<script lang="ts" setup name="analysisReport">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import Table from "@/components/Table/index.vue";
+import {
+  getReportDetail,
+  getLargeCategoryScore,
+  getPlanDetail,
+  getTableRuleDetail,
+  htmlToWord
+} from '@/api/modules/dataQualityWord';
+import * as echarts from 'echarts';
+import { QuestionFilled } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { changeNum, tagMethod, tagType } from '@/utils/common';
+//报告导出word
+import html2canvas from 'html2canvas';
+
+const router = useRouter();
+const route = useRoute();
+const reportExecGuid = route.query.reportExecGuid;
+const planGuid = route.query.planGuid;
+const wordName = ref(route.query.name);
+
+const { proxy } = getCurrentInstance() as any;
+
+const detailInfo: any = ref({});
+const fullscreenLoading = ref(false);
+const loadingText = ref('报告图表生成中，请勿关闭浏览器...');
+
+const getReportDetailInfo = () => {
+  let ps: any = [];
+  fullscreenLoading.value = true;
+  loadingText.value = '报告图表生成中，请勿关闭浏览器...';
+  ps.push(getReportDetail({ reportExecGuid: reportExecGuid, planGuid: planGuid }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data = res.data || {};
+      detailInfo.value = data;
+      barChartData.value = data.qualityScoreLine?.slice(0, 12) || [];
+      planDetailTableInfo.value.data = [{
+        guid: '1',
+        planName: data.planName,
+        planType: data.analysisReportType == 1 ? '表' : (data.analysisReportType == 2 ? '数据库' : (data.analysisReportType == 4 ? '数据同步' : '分组')),
+        execDuration: data.planExecDuration != null ? changeNum(data.planExecDuration ?? 0) : '--',
+        execTime: data.execTime,
+        qualityTableNum: data.qualityTableNum != null ? changeNum(data.qualityTableNum ?? 0) : '--',
+        ruleCount: data.ruleCount != null ? changeNum(data.ruleCount ?? 0) : '--',
+        totalNum: data.totalNum != null ? changeNum(data.totalNum ?? 0) : '--',
+        qualifiedNum: data.qualifiedNum != null ? changeNum(data.qualifiedNum ?? 0) : '--',
+        unqualifiedNum: data.unqualifiedNum != null ? changeNum(data.unqualifiedNum ?? 0) : '--',
+        qualityScore: data.qualityScore ?? '--',
+        qualifiedRate: data.qualifiedRate != null ? (changeNum((data.qualifiedRate ?? 0) * 100, 2, true) + '%') : '--'
+      }]
+    } else {
+      ElMessage.error(res.msg);
+    }
+  }))
+  ps.push(getLargeCategoryScore(reportExecGuid).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data = res.data || {};
+      qualityRuleDetailTableInfo.value.data = data.largeCategoryScoreList || [];
+      if (!qualityRuleDetailTableInfo.value.data.length) {
+        qualityRuleDetailTableInfo.value.footerHtml = '';
+      } else {
+        qualityRuleDetailTableInfo.value.footerHtml = `<span>质量得分</span><span>∑规则得分*权重</span>`;
+      }
+      radarChartData.value = data.largeCategoryScore || {};
+    } else {
+      ElMessage.error(res.msg);
+    }
+  }))
+  /** 表明细，单表时没有。 */
+  ps.push(getPlanDetail({ reportExecGuid: reportExecGuid, planGuid: planGuid }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data = res.data || [];
+      modelDetailTableInfo.value.data = data;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  }))
+  ps.push(getTableRuleDetail(reportExecGuid).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data = res.data || [];
+      modelRuleDetailTableInfo.value.data = data;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  }))
+  Promise.all(ps).then(() => {
+    fullscreenLoading.value = false;
+  });
+}
+
+/** 方案明细表。 */
+const planDetailTableInfo: any = ref({
+  id: "plan-detail-table",
+  loading: false,
+  height: 'auto',
+  minPanelHeight: '60px',
+  minHeight: '60px',
+  fields: [
+    { label: "方案名称", field: "planName", width: 150 },
+    { label: "方案类型", field: "planType", width: 100 },
+    { label: "评估时间", field: "execTime", width: 180, },
+    {
+      label: "耗时(秒)", field: "execDuration", width: 100, align: 'right'
+    },
+    { label: "评估表数", field: "qualityTableNum", width: 100, align: 'right' },
+    { label: "规则数", field: "ruleCount", width: 100, align: 'right' },
+    { label: "评估总数", field: "totalNum", width: 100, align: 'right' },
+    { label: "合格条数", field: "qualifiedNum", width: 100, align: 'right' },
+    { label: "不合格条数", field: "unqualifiedNum", width: 100, align: 'right' },
+    { label: "合格率", field: "qualifiedRate", width: 100, align: 'right' },
+    { label: "质量评分", field: "qualityScore", width: 100, align: "right" }
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    show: false
+  }
+});
+
+/** 数据质量一级指标得分明细 */
+const qualityRuleDetailTableInfo = ref({
+  id: "quality-rule-detail-table",
+  loading: false,
+  minHeight: '60px',
+  footerClass: 'last-row',
+  footerHtml: `<span>质量得分</span><span></span>`,
+  fields: [
+    { label: "规则大类", field: "largeCategoryName", width: 100 },
+    {
+      label: "规则数", field: "ruleCount", width: 100, align: 'right', getName: (scope) => {
+        return scope.row.ruleCount != null ? changeNum(scope.row.ruleCount ?? 0) : '--';
+      }
+    },
+    {
+      label: "规则得分", field: "largeCategoryScore", width: 100, align: "right", getName: (scope) => {
+        return scope.row.largeCategoryScore != null ? changeNum(scope.row.largeCategoryScore ?? 0, 2, true) : '--';
+      }
+    },
+    {
+      label: "权重", field: "ruleLargeWeight", width: 100, align: "right", getName: (scope) => {
+        return scope.row.ruleLargeWeight != null ? scope.row.ruleLargeWeight.toFixed(2) : '--';
+      }
+    },
+    {
+      label: "质量评分", field: "qualityScore", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualityScore != null ? changeNum(scope.row.qualityScore ?? 0, 2, true) : '--';
+      }
+    }
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    show: false
+  }
+});
+
+/** 表明细。 */
+const modelDetailTableInfo = ref({
+  id: "model-detail-table",
+  loading: false,
+  height: 'auto',
+  minPanelHeight: '60px',
+  minHeight: '60px',
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "表名", field: "qualityModelName", width: 140 },
+    { label: "执行结果", field: "execResult", type: "tag", width: 100, align: "center" },
+    { label: "评估时间", field: "execTime", width: 180, },
+    {
+      label: "耗时(秒)", field: "execDuration", width: 100, align: "right", getName: (scope) => {
+        return scope.row.execDuration != null ? changeNum(scope.row.execDuration ?? 0) : '--';
+      }
+    },
+    {
+      label: "规则数", field: "ruleNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.ruleNum != null ? changeNum(scope.row.ruleNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "评估总数", field: "totalNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.totalNum != null ? changeNum(scope.row.totalNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格条数", field: "qualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedNum != null ? changeNum(scope.row.qualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "不合格条数", field: "unqualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.unqualifiedNum != null ? changeNum(scope.row.unqualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格率", field: "qualifiedRate", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedRate != null ? ((scope.row.qualifiedRate ?? 0).toFixed(2) + '%') : '--';
+      }
+    },
+    { label: "评估范围", field: "dataRange", width: 180 },
+  ],
+  data: [{
+    guid: '1',
+    executeState: 'N'
+  }],
+  showPage: false,
+  actionInfo: {
+    show: false
+  }
+});
+
+/** 规则明细。 */
+const modelRuleDetailTableInfo = ref({
+  id: "model-rule-detail-table",
+  loading: false,
+  height: 'auto',
+  minPanelHeight: '60px',
+  minHeight: '60px',
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "表名", field: "qualityModelName", width: 140 },
+    { label: "规则类型", field: "ruleName", width: 140 },
+    { label: "规则名称", field: "ruleConfName", width: 140 },
+    { label: "规则大类", field: "largeCategory", width: 100 },
+    { label: "规则小类", field: "smallCategory", width: 140 },
+    { label: "规则字段", field: "ruleField", width: 140 },
+    { label: "执行结果", field: "execResult", type: "tag", width: 100, align: "center" },
+    {
+      label: "评估总数", field: "totalNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.totalNum != null ? changeNum(scope.row.totalNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格条数", field: "qualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedNum != null ? changeNum(scope.row.qualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "不合格条数", field: "unqualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.unqualifiedNum != null ? changeNum(scope.row.unqualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格率", field: "qualifiedRate", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedRate != null ? ((scope.row.qualifiedRate ?? 0).toFixed(2) + '%') : '--';
+      }
+    }
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    show: false
+  }
+});
+
+/** 柱形图数据数组 */
+const barChartData: any = ref([]);
+/** 雷达图数据数组 */
+const radarChartData: any = ref([]);
+
+let barChart: any = null;
+let radarChart: any = null;
+
+let barChartWord: any = null;
+let radarChartWord: any = null;
+
+/** 设置柱形图option，默认只 展示12次的 */
+const setBarChartOption = (barChart, isWord = false) => {
+  return new Promise((resolve, reject) => {
+    if (!barChartData.value.length) {
+      let option1 = {
+        title: [
+          {
+            text: "",
+            left: "30px",
+            top: "30px",
+          },
+          {
+            text: "暂无数据",
+            left: "center",
+            top: "center",
+            textStyle: {
+              fontStyle: "normal",
+              fontWeight: "400",
+              fontSize: 18,
+            },
+          },
+        ],
+      };
+      barChart.setOption(option1, true);
+      window.addEventListener("resize", () => {
+        barChart.resize();
+      });
+      return;
+    }
+    let itemXAxisData: any = [];
+    let itemYAxisData1: any = [];
+    let itemYAxisData2: any = [];
+    barChartData.value.forEach(d => {
+      itemXAxisData.push(d['execTime']);
+      itemYAxisData1.push(d['qualityScore']);
+      itemYAxisData2.push((d['qualifiedRate'] ?? 0) * 100);
+    })
+    let option = {
+      textStyle: {
+        fontFamily: 'SimSun'
+      },
+      color: ['#5B8FF9', '#FF4E00', '#867EEC', '#FDBC3E', '#F48A64', '#276FF5', '#46D0B5'],
+      title: {
+        show: false,
+        text: '评分趋势',
+        left: '30px',
+        top: '30px',
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          crossStyle: {
+            color: '#999'
+          }
+        },
+        textStyle: {
+          align: 'left'
+        },
+      },
+      legend: {
+        right: 0,
+        textStyle: {
+          fontSize: 14
+        },
+        data: ['评分', '合格率']
+      },
+      grid: {
+        left: 30,
+        right: 60,
+        bottom: 5,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        nameTextStyle: {
+          color: '#000000'
+        },
+        axisLabel: {
+          interval: isWord ? 'auto' : 0,
+          textStyle: {
+            color: '#000000'
+          },
+          formatter: function (value) {
+            if (!value) {
+              return value;
+            }
+            let v = value.split(' ');
+            return v.join('\n');
+          }
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#d9d9d9'
+          }
+        },
+        data: itemXAxisData
+      },
+      yAxis: {
+        type: 'value',
+        name: '',
+        min: 0,
+        max: 100,
+        nameTextStyle: {
+          color: '#000000'
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#000000'
+          }
+        },
+        axisLine: {
+          //y轴
+          show: false
+        }
+      },
+      series: [{
+        name: '评分',
+        type: 'line',
+        data: itemYAxisData1,
+        label: {
+          show: false,
+        },
+        yAxisIndex: 0
+      }, {
+        name: '合格率',
+        type: 'line',
+        data: itemYAxisData2,
+        label: {
+          show: false,
+        },
+        tooltip: {
+          valueFormatter: function (value) {
+            return changeNum(value, 2, true) + '%';
+          }
+        },
+        yAxisIndex: 0
+      }]
+    };
+    option && barChart.setOption(option, true);
+    barChart.on('finished', () => {
+      resolve(true);
+    });
+    window.addEventListener('resize', () => {
+      barChart.resize();
+    });
+  });
+}
+
+/** 设置雷达图option. */
+const setRadarChartOption = (radarChart) => {
+  return new Promise((resolve, reject) => {
+    let indicator = [{ name: '规范性', max: 100, min: 0, color: '#000' },
+    { name: '完整性', max: 100, min: 0, color: '#000' },
+    { name: '一致性', max: 100, min: 0, color: '#000' },
+    { name: '准确性', max: 100, min: 0, color: '#000' },
+    { name: '时效性', max: 100, min: 0, color: '#000' },
+    { name: '可访问性', max: 100, min: 0, color: '#000' }]
+    let data: any = [];
+    for (const key in radarChartData.value) {
+      let index = indicator.findIndex(i => i.name == key);
+      index > -1 && (data[index] = changeNum(radarChartData.value[key] ?? 0, 2));
+    }
+    let option = {
+      textStyle: {
+        fontFamily: 'SimSun'
+      },
+      color: ['#5B8FF9', '#6DD18E', '#867EEC', '#FDBC3E', '#F48A64', '#276FF5', '#46D0B5'],
+      title: {
+        show: false,
+        text: '数据质量一级指标得分',
+        left: '30px',
+        top: '30px',
+      },
+      tooltip: {
+        axisPointer: {
+          type: 'cross',
+          crossStyle: {
+            color: '#999'
+          }
+        },
+        textStyle: {
+          align: 'left'
+        },
+      },
+      legend: {
+        show: false
+      },
+      grid: {
+        left: 0,
+        bottom: 0,
+        containLabel: true
+      },
+      radar: {
+        indicator: indicator,
+        axisLabel: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#d9d9d9'
+          }
+        },
+        axisTick: {
+          lineStyle: {
+            color: '#d9d9d9'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#d9d9d9'
+          }
+        }
+      },
+      series: [
+        {
+          type: 'radar',
+          data: [{
+            name: '数据质量一级指标得分',
+            value: data
+          }],
+          label: {
+            show: true,
+            position: 'bottom',
+            distance: 1,
+            color: '#000'
+          },
+          areaStyle: {
+            color: '#e8eefc'
+          }
+        }
+      ]
+    };
+    option && radarChart.setOption(option, true);
+    radarChart.on('finished', () => {
+      resolve(true);
+    });
+    window.addEventListener('resize', () => {
+      radarChart.resize();
+    });
+  });
+}
+
+watch(() => barChartData.value, (val) => {
+  setBarChartOption(barChart);
+  barChartWord && setBarChartOption(barChartWord, true);
+})
+
+watch(() => radarChartData.value, (val) => {
+  setRadarChartOption(radarChart);
+  radarChartWord && setRadarChartOption(radarChartWord);
+})
+
+onBeforeMount(() => {
+  getReportDetailInfo();
+})
+
+onMounted(() => {
+  barChart = echarts.init(document.getElementById('bar'));
+  radarChart = echarts.init(document.getElementById('radar'));
+  setBarChartOption(barChart);
+  setRadarChartOption(radarChart);
+})
+
+const domClone: any = ref(null);
+
+const convertChartsToBase64 = (contentDocument) => {
+  // 找到所有的图表 （echart）
+  let canvases = contentDocument.querySelectorAll('#bar-word');
+  // 遍历图表，转换为 base64 静态图片
+  canvases.forEach((canvas, i) => {
+    let url = barChartWord.getDataURL();
+    let img = document.createElement('img');
+    if (url) {
+      // img.src = url.split(',')[1];
+      img.src = url;
+      img.width = 620;
+      img.height = 400;
+      img.crossOrigin = 'Anonymous';
+    }
+    canvas.parentNode.replaceChild(img, canvas);
+  });
+  let canvases1 = contentDocument.querySelectorAll('#radar-word');
+  canvases1.forEach((canvas, i) => {
+    let url = radarChartWord.getDataURL();
+    let img = document.createElement('img');
+    if (url) {
+      // img.src = url.split(',')[1];
+      img.src = url;
+      img.width = 620;
+      img.height = 400;
+      img.crossOrigin = 'Anonymous';
+    }
+    canvas.parentNode.replaceChild(img, canvas);
+  });
+}
+
+const convertHtml2Img = (dom, domClone) => {
+  const element = <HTMLElement>dom.querySelector('.kpi-content')
+  if (!element) {
+    return Promise.resolve();
+  }
+  return html2canvas(element, {
+    allowTaint: true,
+    useCORS: true,
+    scale: 1,
+  }).then((canvas: any) => {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    element.parentNode && ((<HTMLElement>element.parentNode).scrollTop = 0);
+    let url = canvas.toDataURL('image/jpeg');
+    let img = document.createElement('img');
+    if (url) {
+      // img.src = url.split(',')[1];
+      img.src = url;
+      img.width = 620;
+      img.height = 80;
+      img.crossOrigin = 'Anonymous';
+    }
+    const copyElement = <HTMLElement>domClone.querySelector('.kpi-content')
+    copyElement.parentNode?.replaceChild(img, copyElement);
+  })
+}
+
+const report = ref();
+
+const isWordStyle = ref(false);
+
+const isTransfered = ref(false);
+
+const downloadBtnDisable = ref(false);
+
+const transfer = () => {
+  isWordStyle.value = true;
+  nextTick(() => {
+    if (!isTransfered.value) {
+      barChartWord = echarts.init(document.getElementById('bar-word'));
+      downloadBtnDisable.value = true;
+      let ps1 = setBarChartOption(barChartWord, true);
+      radarChartWord = echarts.init(document.getElementById('radar-word'));
+      let ps2 = setRadarChartOption(radarChartWord);
+      Promise.all([ps1, ps2]).then(res => {
+        downloadBtnDisable.value = false;
+        isTransfered.value = true;
+      })
+    }
+  });
+};
+
+const getHTML = (reportResultContent) => {
+  let html = reportResultContent;
+  html = html.replace(/"/g, "'");
+  return html;
+};
+
+const download = () => {
+  let dom = domClone.value || (domClone.value = document.createElement('div'));
+  dom.innerHTML = report.value.innerHTML;
+  convertChartsToBase64(dom);
+  fullscreenLoading.value = true;
+  loadingText.value = '报告正在下载中，请勿关闭浏览器...';
+  convertHtml2Img(report.value, dom).then(() => {
+    htmlToWord({ html: getHTML(dom.innerHTML) }).then((res: any) => {
+      fullscreenLoading.value = false;
+      //  let blob = new Blob([res.data], { type: 'application/msword' });
+      let objectUrl = URL.createObjectURL(res);
+      const link = document.createElement('a')
+      link.download = wordName.value + '.docx';
+      link.href = objectUrl
+      link.click()
+    })
+    // // 下载word 需要接口。
+    // const converted = htmlDocx.asBlob(`
+    //   <html xmlns:o=\'urn:schemas-microsoft-com:office:office\' xmlns:w=\'urn:schemas-microsoft-com:office:word\' xmlns=\'http://www.w3.org/TR/REC-html40\'><head><style>
+    //     ${document.head.outerHTML}
+    //   </head>
+    //   <body>
+    //   ${dom.outerHTML}
+    //   </body>
+    //   </html>`)
+    // converted.then((res: any) => {
+    //   //  导出无样式。
+    //   console.log(res);
+    //   let objectUrl = URL.createObjectURL(res);
+    //   const link = document.createElement('a')
+    //   link.download = detailInfo.value.analysisReportName + '.docx';
+    //   link.href = objectUrl
+    //   link.click()
+    // })
+  })
+}
+
+</script>
+
+<template>
+  <div class="container_wrap" v-loading="fullscreenLoading" :element-loading-text="loadingText">
+    <div v-show="!isWordStyle" class="header-title">
+      <div>
+        <span>{{ `【${(detailInfo.analysisReportType == 1 ? detailInfo.qualityModelName :
+    (detailInfo.analysisReportType
+      == 3 ? detailInfo.qualityModelGroupName : detailInfo.dataSourceName)) ?? '--'}】` + '数据质量评估报告' }}</span>
+        <span class="time-detail">{{ '生成时间：' + detailInfo.execTime }}</span>
+      </div>
+      <el-button type="primary" @click="transfer">生成Word报告</el-button>
+      <!-- <el-button @click="download">下载 Word</el-button> -->
+    </div>
+    <div v-show="!isWordStyle" class="header-detail">
+      <template v-if="detailInfo.analysisReportType == 1">
+        <span>{{ '表名称：' + (detailInfo.qualityModelName ?? '--') }}</span>
+        <span style="margin-left: 40px;">{{ '所属主题：' + (detailInfo.subjectDomainName ?? '--') }}</span>
+        <span style="margin-left: 40px;">{{ '所属数据源：' + (detailInfo.dataSourceName ?? '--') }}</span>
+      </template>
+      <span v-else-if="detailInfo.analysisReportType == 3">{{ '分组名称：' + (detailInfo.qualityModelGroupName ?? '--')
+        }}</span>
+      <span v-else>{{ '数据库名称：' + (detailInfo.dataSourceName ?? '--') }}</span>
+    </div>
+    <div v-show="!isWordStyle" class="content-main">
+      <div class="title">数据汇总</div>
+      <div class="kpi-content">
+        <div class="border-content">
+          <span class="number score-color">{{ detailInfo.qualityScore ?? '--' }}</span>
+          <div class="text">质量评分<el-tooltip placement="top" effect="light" popper-class="table_tooltip">
+              <template #content>
+                <div style="max-width: 236px;">
+                  质量一级指标得分*权重
+                </div>
+              </template>
+              <el-icon style="margin-left: 2px;">
+                <QuestionFilled />
+              </el-icon>
+            </el-tooltip></div>
+        </div>
+        <div v-if="detailInfo.analysisReportType != 1" class="border-content ml16">
+          <span class="number">{{ detailInfo.qualityTableNum != null ? changeNum(detailInfo.qualityTableNum ?? 0) :
+    '--'
+            }}</span>
+          <span class="text">评估表数</span>
+        </div>
+        <div class="border-content ml16">
+          <span class="number num-color">{{ detailInfo.ruleCount != null ? changeNum(detailInfo.ruleCount ?? 0) : '--'
+            }}</span>
+          <span class="text">质量规则数</span>
+        </div>
+        <div class="border-content ml16">
+          <span class="number num-color">{{ detailInfo.totalNum != null ? changeNum(detailInfo.totalNum ?? 0) : '--'
+            }}</span>
+          <span class="text">评估总数</span>
+        </div>
+        <div class="border-content ml16">
+          <span class="number pass-color">{{ detailInfo.qualifiedNum != null ? changeNum(detailInfo.qualifiedNum ?? 0)
+    :
+    '--' }}</span>
+          <span class="text">合格条数</span>
+        </div>
+        <div class="border-content ml16">
+          <span class="number no-pass-color">{{ detailInfo.unqualifiedNum != null ?
+    changeNum(detailInfo.unqualifiedNum ??
+      0) : '--' }}</span>
+          <span class="text">不合格条数</span>
+        </div>
+        <div class="border-content ml16">
+          <span class="number rate-color">{{ detailInfo.qualifiedRate != null ? (changeNum((detailInfo.qualifiedRate
+    ?? 0) *
+    100, 2, true) + '%') : '--' }}</span>
+          <span class="text">合格率</span>
+        </div>
+      </div>
+      <div class="title">评分趋势</div>
+      <div class="content-chart-bar" id="bar">
+      </div>
+      <div class="content-radar-table">
+        <div class="content-two">
+          <div class="title">数据质量一级指标得分</div>
+          <div class="content-chart-radar" id="radar">
+          </div>
+        </div>
+        <div class="content-two">
+          <div class="title">数据质量一级指标得分明细</div>
+          <Table :tableInfo="qualityRuleDetailTableInfo" />
+        </div>
+      </div>
+      <div class="title">评估方案明细</div>
+      <Table :tableInfo="planDetailTableInfo" />
+      <template v-if="detailInfo.analysisReportType != 1">
+        <div class="title">表明细</div>
+        <Table :tableInfo="modelDetailTableInfo" />
+      </template>
+      <div class="title">规则明细</div>
+      <Table :tableInfo="modelRuleDetailTableInfo" />
+    </div>
+    <div v-show="isWordStyle" class="word-report">
+      <div class="word-btn">
+        <span>{{ `【${(detailInfo.analysisReportType == 1 ? detailInfo.qualityModelName :
+    (detailInfo.analysisReportType
+      == 3 ? detailInfo.qualityModelGroupName : detailInfo.dataSourceName)) ?? '--'}】` + '数据质量评估报告' }}</span>
+        <div>
+          <el-button @click="isWordStyle = false">返回</el-button>
+          <el-button type="primary" :disabled="downloadBtnDisable" @click="download">下载 Word</el-button>
+        </div>
+      </div>
+      <div class="word-report-main" ref="report">
+        <div style="width: 625px;">
+          <div style="text-align: center;padding: 8px 0px;">
+            <div
+              style="height: 40px;display: block;line-height: 32px;font-size: 18px;color: #212121;font-weight: 600;text-align: center;">
+              {{ `【${(detailInfo.analysisReportType == 1 ? detailInfo.qualityModelName :
+    (detailInfo.analysisReportType
+      == 3 ? detailInfo.qualityModelGroupName : detailInfo.dataSourceName)) ?? '--'}】` + '数据质量评估报告' }}</div>
+            <div style="font-size: 14px;color: #666666;font-weight: 400;">{{ '生成时间：' + detailInfo.execTime }}</div>
+          </div>
+          <div style=" height: 40px;line-height: 40px;font-size: 14px;color: #666666;">
+            <template v-if="detailInfo.analysisReportType == 1">
+              <span>{{ '表名称：' + (detailInfo.qualityModelName ?? '--') }}</span>
+              <span style="margin-left: 40px;">{{ '所属主题：' + (detailInfo.subjectDomainName ?? '--') }}</span>
+              <span style="margin-left: 40px;">{{ '所属数据源：' + (detailInfo.dataSourceName ?? '--') }}</span>
+            </template>
+            <span v-else-if="detailInfo.analysisReportType == 3">{{ '分组名称：' + (detailInfo.qualityModelGroupName ?? '--')
+              }}</span>
+            <span v-else>{{ '数据库名称：' + (detailInfo.dataSourceName ?? '--') }}</span>
+          </div>
+          <div
+            style="line-height: 24px;font-size: 16px;color: #212121;font-weight: 600;margin-top: 12px;margin-bottom: 8px;">
+            数据汇总</div>
+          <div class="kpi-content">
+            <div class="border-content" style="padding-left: 8px;min-width: 70px;height: 72px">
+              <span class="number score-color">{{ detailInfo.qualityScore ?? '--' }}</span>
+              <div class="text">质量评分</div>
+            </div>
+            <div v-if="detailInfo.analysisReportType != 1" class="border-content"
+              style="padding-left: 8px;margin-left: 8px;min-width: 70px;height: 72px">
+              <span class="number">{{ detailInfo.qualityTableNum != null ? changeNum(detailInfo.qualityTableNum ?? 0)
+    :
+    '--'
+                }}</span>
+              <span class="text">评估表数</span>
+            </div>
+            <div class="border-content" style="padding-left: 8px;margin-left: 8px;min-width: 84px;height: 72px">
+              <span class="number num-color">{{ detailInfo.ruleCount != null ? changeNum(detailInfo.ruleCount ?? 0) :
+    '--'
+                }}</span>
+              <span class="text">质量规则数</span>
+            </div>
+            <div class="border-content" style="padding-left: 8px;margin-left: 8px;min-width: 70px;height: 72px">
+              <span class="number num-color">{{ detailInfo.totalNum != null ? changeNum(detailInfo.totalNum ?? 0) :
+    '--'
+                }}</span>
+              <span class="text">评估总数</span>
+            </div>
+            <div class="border-content" style="padding-left: 8px;margin-left: 8px;min-width: 70px;height: 72px">
+              <span class="number pass-color">{{ detailInfo.qualifiedNum != null ? changeNum(detailInfo.qualifiedNum
+    ?? 0)
+    :
+    '--' }}</span>
+              <span class="text">合格条数</span>
+            </div>
+            <div class="border-content" style="padding-left: 8px;margin-left: 8px;min-width: 84px;height: 72px">
+              <span class="number no-pass-color">{{ detailInfo.unqualifiedNum != null ?
+    changeNum(detailInfo.unqualifiedNum ??
+      0) : '--' }}</span>
+              <span class="text">不合格条数</span>
+            </div>
+            <div class="border-content" style="padding-left: 8px;margin-left: 8px;min-width: 70px;height: 72px">
+              <span class="number rate-color">{{ detailInfo.qualifiedRate != null ?
+    (changeNum((detailInfo.qualifiedRate
+      ?? 0) *
+      100, 2, true) + '%') : '--' }}</span>
+              <span class="text">合格率</span>
+            </div>
+          </div>
+          <div
+            style="line-height: 24px;font-size: 16px;color: #212121;font-weight: 600;margin-top: 12px;margin-bottom: 8px;">
+            评分趋势</div>
+          <div class="content-chart-bar" style="border:none;padding: 8px 0px;" id="bar-word">
+          </div>
+          <div
+            style="line-height: 24px;font-size: 16px;color: #212121;font-weight: 600;margin-top: 12px;margin-bottom: 8px;">
+            数据质量一级指标得分</div>
+          <div class="content-chart-bar" style="border:none;height: 380px;padding: 8px 0px;" id="radar-word"></div>
+          <div
+            style="line-height: 24px;font-size: 16px;color: #212121;font-weight: 600;margin-top: 12px;margin-bottom: 8px;">
+            数据质量一级指标得分明细</div>
+          <table border="1" cellspacing="0"
+            style="width: 100%;table-layout: fixed;word-break: break-all;margin: 0 auto;text-align: center;border-collapse: collapse;">
+            <thead>
+              <tr>
+                <th v-for="(item, index) in qualityRuleDetailTableInfo.fields.map(f => f.label)" :key="index">
+                  <span>{{ item }}</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(recordItem, j) in qualityRuleDetailTableInfo.data" :key="j">
+                <td v-for="(columnItem, i) in qualityRuleDetailTableInfo.fields" :key="i"
+                  :style="{ 'text-align': <any>(columnItem.align ?? 'left') }">
+                  <span :style="{ 'word-break': 'break-all' }">
+                    {{ columnItem.getName ? columnItem.getName({ row: recordItem }) : ((columnItem?.field &&
+    recordItem[columnItem.field]) ?? '--') }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div style="
+    background: #FFF1D4;
+    /* border-bottom: 1px solid #000;
+    border-right: 1px solid #000;
+    border-left: 1px solid #000; */
+    "><span >质量得分：</span><span>∑规则得分*权重</span></div>
+          <div
+            style="line-height: 24px;font-size: 16px;color: #212121;font-weight: 600;margin-top: 12px;margin-bottom: 8px;">
+            评估方案明细</div>
+          <table border="1" cellspacing="0"
+            style="width: 100%;table-layout: fixed;word-break: break-all;margin: 0 auto;text-align: center;border-collapse: collapse;">
+            <thead>
+              <tr>
+                <th v-for="(item, index) in planDetailTableInfo.fields.map(f => f.label)" :key="index">
+                  <span>{{ item }}</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(recordItem, j) in planDetailTableInfo.data" :key="j">
+                <td v-for="(columnItem, i) in planDetailTableInfo.fields" :key="i"
+                  :style="{ 'text-align': <any>(columnItem.align ?? 'left'), width: columnItem.field == 'qualifiedRate' ? '53px' : '' }">
+                  <span :style="{ 'word-break': 'break-all' }">
+                    {{ columnItem.getName ? columnItem.getName({ row: recordItem }) : ((columnItem?.field &&
+    recordItem[columnItem.field]) ?? '--') }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <template v-if="detailInfo.analysisReportType != 1">
+            <div
+              style="line-height: 24px;font-size: 16px;color: #212121;font-weight: 600;margin-top: 12px;margin-bottom: 8px;">
+              表明细</div>
+            <table border="1" cellspacing="0"
+              style="width: 100%;table-layout: fixed;word-break: break-all;margin: 0 auto;text-align: center;border-collapse: collapse;">
+              <thead>
+                <tr>
+                  <th v-for="(item, index) in modelDetailTableInfo.fields.slice(1).map(f => f.label)" :key="index">
+                    <span>{{ item }}</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(recordItem, j) in modelDetailTableInfo.data" :key="j">
+                  <td v-for="(columnItem, i) in modelDetailTableInfo.fields.slice(1)" :key="i"
+                    :style="{ 'text-align': <any>(columnItem.align ?? 'left'), width: columnItem.field == 'qualifiedRate' ? '53px' : '' }">
+                    <span v-if="columnItem.type != 'tag'">
+                      {{ (columnItem.getName ? columnItem.getName({ row: recordItem }) : ((columnItem?.field &&
+    recordItem[columnItem.field]) ?? '--')) }}
+                    </span>
+                    <span v-else :style="{
+    'white-space': 'nowrap', 'font-size': '12px', color: tagType(recordItem, columnItem.field) == 'success' ? '#1BA854' : (tagType(recordItem, columnItem.field) == 'warning' ? '#e6a23c' : (tagType(recordItem, columnItem.field) == 'danger' ? '#FB2323' : '#999999')),
+    background: tagType(recordItem, columnItem.field) == 'success' ? '#F2FFF5' : (tagType(recordItem, columnItem.field) == 'warning' ? '#fdf6ec' : (tagType(recordItem, columnItem.field) == 'danger' ? '#FFF2F4' : '#F5F5F5'))
+  }">
+                      {{ (columnItem.field && recordItem[columnItem.field]) ? tagMethod(recordItem, columnItem.field) :
+    '--' }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+          <div
+            style="line-height: 24px;font-size: 16px;color: #212121;font-weight: 600;margin-top: 12px;margin-bottom: 8px;">
+            规则明细</div>
+          <table border="1" cellspacing="0"
+            style="width: 100%;table-layout: fixed;word-break: break-all;margin: 0 auto;text-align: center;border-collapse: collapse;">
+            <thead>
+              <tr>
+                <th v-for="(item, index) in modelRuleDetailTableInfo.fields.slice(1).map(f => f.label)" :key="index">
+                  <span>{{ item }}</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(recordItem, j) in modelRuleDetailTableInfo.data" :key="j">
+                <td v-for="(columnItem, i) in modelRuleDetailTableInfo.fields.slice(1)" :key="i"
+                  :style="{ 'text-align': <any>(columnItem.align ?? 'left'), width: columnItem.field == 'qualifiedRate' ? '53px' : '' }">
+                  <span v-if="columnItem.type != 'tag'">
+                    {{ (columnItem.getName ? columnItem.getName({ row: recordItem }) : ((columnItem?.field &&
+    recordItem[columnItem.field]) ?? '--')) }}
+                  </span>
+                  <span v-else
+                    :style="{
+    'white-space': 'nowrap', 'font-size': '12px', color: tagType(recordItem, columnItem.field) == 'success' ? '#1BA854' : (tagType(recordItem, columnItem.field) == 'warning' ? '#e6a23c' : (tagType(recordItem, columnItem.field) == 'danger' ? '#FB2323' : '#999999')),
+    background: tagType(recordItem, columnItem.field) == 'success' ? '#F2FFF5' : (tagType(recordItem, columnItem.field) == 'warning' ? '#fdf6ec' : (tagType(recordItem, columnItem.field) == 'danger' ? '#FFF2F4' : '#F5F5F5')) }">
+                    {{ (columnItem.field && recordItem[columnItem.field]) ? tagMethod(recordItem, columnItem.field) :
+                    '--'
+                    }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0;
+}
+
+.content-main {
+  height: calc(100% - 106px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0px 16px 16px;
+}
+
+.header-title {
+  margin: 16px 16px 0px;
+  height: 40px;
+  line-height: 32px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  color: #212121;
+  font-weight: 600;
+}
+
+.time-detail {
+  font-size: 14px;
+  color: #666666;
+  font-weight: 400;
+  margin-left: 16px;
+}
+
+.header-detail {
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: #666666;
+  padding: 0 16px;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.kpi-content {
+  display: flex;
+  flex-direction: row;
+}
+
+.border-content {
+  height: 76px;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  padding-left: 16px;
+  justify-content: center;
+  border: 1px solid #d9d9d9;
+  width: 160px;
+  min-width: 100px;
+  border-radius: 2px;
+
+  .number {
+    line-height: 30px;
+    font-weight: 700;
+    font-size: 20px;
+  }
+
+  .num-color {
+    color: #212121;
+  }
+
+  .score-color {
+    color: #FF5F1F;
+  }
+
+  .pass-color {
+    color: #1BA854;
+  }
+
+  .no-pass-color {
+    color: #FB2323;
+  }
+
+  .rate-color {
+    color: #5B8FF9;
+  }
+
+  .text {
+    font-size: 14px;
+    color: #666666;
+    display: flex;
+
+    .el-icon {
+      color: #b2b2b2;
+    }
+  }
+}
+
+.ml16 {
+  margin-left: 16px;
+}
+
+.ml32 {
+  margin-left: 32px;
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  color: #212121;
+  font-weight: 600;
+  margin-top: 12px;
+  margin-bottom: 8px;
+}
+
+.content-radar-table {
+  display: flex;
+  flex-direction: row;
+  height: 380px;
+  justify-content: space-between;
+
+  .content-two {
+    width: calc(50% - 16px);
+
+    .table_panel {
+      min-height: 200px !important;
+      height: calc(100% - 44px) !important;
+    }
+  }
+
+  .content-chart-radar {
+    height: calc(100% - 44px);
+    width: 100%;
+    border: 1px solid #d9d9d9;
+    padding: 8px;
+  }
+}
+
+.content-chart-bar {
+  height: 300px;
+  border: 1px solid #d9d9d9;
+  padding: 8px;
+}
+
+.word-report {
+  height: 100%;
+  widows: 100%;
+  background-color: #f1f1f1;
+
+  .word-btn {
+    background-color: #fff;
+    margin: 8px 0px;
+    padding: 0px 8px 8px;
+    height: 48px;
+    line-height: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 18px;
+    color: #212121;
+    font-weight: 600;
+  }
+
+}
+
+.word-report-main {
+  height: calc(100% - 56px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fff;
+  padding-bottom: 12px;
+}
+</style>

+<route lang="yaml">
+  name: assessDetail
+</route>
+
+<script lang="ts" setup name="assessDetail">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import Table from "@/components/Table/index.vue";
+import {
+  getRecordRuleConfDetail,
+  getExecPlanDetailTableData,
+  getAssessTableRulesData,
+  downloadDirtyData
+} from '@/api/modules/dataQualityAssess';
+import { ElMessage } from "element-plus";
+import { changeNum, download } from '@/utils/common';
+import ruleForm from "../data_quality/ruleForm.vue";
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute();
+
+const planGuid = route.query.planGuid;
+const planExecGuid = route.query.planExecGuid;
+
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+
+const tableInfo = ref({
+  id: "quality-table",
+  loading: false,
+  fields: [
+    { label: "表名", field: "qualityModelName", width: 140 },
+    { label: "执行结果", field: "execResult", type: "tag", width: 100, align: "center" },
+    { label: "评估时间", field: "execTime", width: 180, },
+    {
+      label: "耗时(秒)", field: "execDuration", width: 100, align: "right", getName: (scope) => {
+        return scope.row.execDuration != null ? changeNum(scope.row.execDuration ?? 0) : '--';
+      }
+    },
+    {
+      label: "规则数", field: "ruleNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.ruleNum != null ? changeNum(scope.row.ruleNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "评估总数", field: "totalNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.totalNum != null ? changeNum(scope.row.totalNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格条数", field: "qualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedNum != null ? changeNum(scope.row.qualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "不合格条数", field: "unqualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.unqualifiedNum != null ? changeNum(scope.row.unqualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格率", field: "qualifiedRate", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedRate != null ? ((scope.row.qualifiedRate ?? 0).toFixed(2) + '%') : '--';
+      }
+    },
+    { label: "评估范围", field: "dataRange", width: 180 },
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 220,
+    fixed: 'right',
+    btns: (scope) => {
+      let unqualifiedNum = scope.row.unqualifiedNum ?? 0;
+      return [
+        { label: "查看规则", value: "rule" },
+        { label: "脏数据", value: "path_dirty", disabled: unqualifiedNum == 0 || scope.row.isTable == 'Y' },
+        { label: "脏数据下载", value: "download", disabled: unqualifiedNum == 0 || scope.row.isTable == 'Y' },
+      ]
+    },
+  }
+});
+
+/** 获取方案详情列表数据。 */
+const getAssessDetail = () => {
+  tableInfo.value.loading = true;
+  getExecPlanDetailTableData({ planGuid: planGuid, planExecGuid: planExecGuid }).then((res: any) => {
+    tableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      tableInfo.value.data = res.data || []
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+}
+
+/** 获取每个表的规则详情。 */
+const getModelRulesDetail = (qualityModelGuid: string) => {
+  rulesDetailTableInfo.value.loading = true;
+  getAssessTableRulesData({ planExecGuid: planExecGuid, qualityModelGuid: qualityModelGuid }).then((res: any) => {
+    rulesDetailTableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      rulesDetailTableInfo.value.data = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+}
+
+/** 下载脏数据。 */
+const exportDirtyData = (row) => {
+  downloadDirtyData({
+    planExecGuid: row.planExecGuid,
+    qualityModelGuid: row.qualityModelGuid
+  }).then((res: any) => {
+    if (res && !res.msg) {
+      download(res, `脏数据-${row.qualityModelName}.xlsx`, 'excel');
+    } else {
+      res?.msg && ElMessage.error(res?.msg);
+    }
+  })
+}
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  if (type == 'rule') {
+    rulesDetailDialogVisible.value = true;
+    getModelRulesDetail(row.qualityModelGuid);
+  } else if (type == 'path_dirty') {
+    router.push({
+      name: 'assessDirty',
+      query: {
+        planExecGuid: row.planExecGuid,
+        name: row.qualityModelName,
+        qualityModelGuid: row.qualityModelGuid
+      }
+    });
+  } else if (type == 'download') {
+    exportDirtyData(row);
+  }
+};
+
+onActivated(() => {
+  getAssessDetail();
+});
+
+/** 查看表规则详情的对话框显示隐藏。 */
+const rulesDetailDialogVisible = ref(false);
+
+const rulesDetailTableInfo: any = ref({
+  id: "rules-detail-table",
+  loading: false,
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "表名", field: "qualityModelName", width: 140 },
+    { label: "规则类型", field: "ruleName", width: 140 },
+    { label: "规则名称", field: "ruleConfName", width: 140 },
+    { label: "规则大类", field: "largeCategory", width: 100 },
+    { label: "规则小类", field: "smallCategory", width: 140 },
+    { label: "规则字段", field: "ruleField", width: 140 },
+    { label: "执行结果", field: "execResult", type: "tag", width: 100, align: "center" },
+    // { label: "规则权重", field: "weight", width: 100, align: 'right' },
+    {
+      label: "评估总数", field: "totalNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.totalNum != null ? changeNum(scope.row.totalNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格条数", field: "qualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedNum != null ? changeNum(scope.row.qualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "不合格条数", field: "unqualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.unqualifiedNum != null ? changeNum(scope.row.unqualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格率", field: "qualifiedRate", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedRate != null ? ((scope.row.qualifiedRate ?? 0).toFixed(2) + '%') : '--';
+      }
+    },
+    { label: "失败原因", field: "errorLog", width: 140 },
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 90,
+    fixed: 'right',
+    btns: [
+      { label: "规则详情 ", value: "ruleDetail" },
+    ],
+  }
+});
+
+/** 单个规则详情对话框 */
+const oneRulesDetailDialogVisible = ref(false);
+
+const toSubjectTables: any = ref([]);
+const ruleType = ref('');
+const detailInfo: any = ref({});
+const detailLoading = ref(false);
+const ruleTypeList: any = ref([]);
+const smallCategoryList: any = ref([]);
+const largeCategoryList: any = ref([]);
+const detailJson: any = ref({});
+
+const rulesDetailTableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  if (type == 'ruleDetail') {
+    detailLoading.value = true;
+    if (detailJson.value[row.ruleConfGuid]) {
+      ruleType.value = detailInfo.value.ruleCode;
+      toSubjectTables.value = [{
+        guid: detailInfo.value.subjectGuid,
+        enName: detailInfo.value.subjectName,
+        chName: detailInfo.value.subjectZhName,
+        label: `${detailInfo.value.subjectName}(${detailInfo.value.subjectZhName})`
+      }]
+      ruleTypeList.value = [{
+        value: detailInfo.value.ruleCode,
+        label: row.ruleName
+      }];
+      smallCategoryList.value = [{
+        paramValue: detailInfo.value.smallCategory,
+        paramName: row.smallCategory
+      }];
+      largeCategoryList.value = [{
+        paramValue: detailInfo.value.largeCategory,
+        paramName: row.largeCategory
+      }];
+      oneRulesDetailDialogVisible.value = true;
+    } else {
+      detailJson.value[row.ruleConfGuid] = { isRequest: true };
+      getRecordRuleConfDetail({ruleConfGuid: row.ruleConfGuid, planExecGuid: planExecGuid }).then((res: any) => {
+        detailLoading.value = false;
+        oneRulesDetailDialogVisible.value = true;
+        if (res.code == proxy.$passCode) {
+          let data = res.data || {};
+          detailInfo.value = data;
+          detailJson.value[row.ruleConfGuid] = detailInfo.value;
+          detailJson.value[row.ruleConfGuid].isRequest = false;
+          ruleType.value = detailInfo.value.ruleCode;
+          toSubjectTables.value = [{
+            guid: detailInfo.value.subjectGuid,
+            enName: detailInfo.value.subjectName,
+            chName: detailInfo.value.subjectZhName,
+            label: `${detailInfo.value.subjectName}(${detailInfo.value.subjectZhName})`
+          }]
+          ruleTypeList.value = [{
+            value: detailInfo.value.ruleCode,
+            label: row.ruleName
+          }];
+          smallCategoryList.value = [{
+            paramValue: detailInfo.value.smallCategory,
+            paramName: row.smallCategory
+          }];
+          largeCategoryList.value = [{
+            paramValue: detailInfo.value.largeCategory,
+            paramName: row.largeCategory
+          }];
+        } else {
+          ElMessage.error(res.msg);
+          delete detailJson.value[row.ruleConfGuid];
+        }
+      })
+    }
+  }
+};
+
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_panel_wrap">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
+    </div>
+    <el-dialog v-model="rulesDetailDialogVisible" title="查看规则" width="800" :modal="true" :close-on-click-modal="false"
+      destroy-on-close align-center>
+      <div class="rules-detail-dialog-content">
+        <Table class="long-tooltip-table" :tableInfo="rulesDetailTableInfo" @tableBtnClick="rulesDetailTableBtnClick" />
+      </div>
+    </el-dialog>
+    <el-dialog v-model="oneRulesDetailDialogVisible" title="规则详情" width="800" :modal="true"
+      :close-on-click-modal="false" destroy-on-close align-center>
+      <ruleForm ref="ruleFormRef" :readonly="true" :toSubjectTables="toSubjectTables" :ruleTypeValue="ruleType"
+        :value="detailInfo" :ruleTypeList="ruleTypeList" :largeCategoryList="largeCategoryList"
+        :smallCategoryList="smallCategoryList">
+      </ruleForm>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 16px;
+}
+
+.table_panel_wrap {
+  height: 100%;
+}
+
+.rules-detail-dialog-content {
+  height: 450px;
+}
+
+.long-tooltip-table {
+  :deep(.el-table) {
+    .table_cell_tooltip {
+      max-width: 500px;
+      // max-height: 100px;
+      // overflow: auto;
+    }
+  }
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: assessDirty
+</route>
+
+<script lang="ts" setup name="assessDirty">
+import { ref } from "vue";
+import { calcColumnWidth } from "@/utils/index";
+import Moment from 'moment';
+import {
+  getQueryDirtyData,
+  getQueryDirtyFields,
+  downloadDirtyData
+} from '@/api/modules/dataQualityAssess';
+import { download } from '@/utils/common'
+import { ElMessage } from "element-plus";
+import { TableColumnWidth } from "@/utils/enum";
+
+const { proxy } = getCurrentInstance() as any;
+const route: any = useRoute();
+const planExecGuid = route.query.planExecGuid;
+const qualityModelGuid = route.query.qualityModelGuid;
+const name = route.query.name;
+
+const dirtyDataLoading = ref(false);
+const dirtyData = ref([{
+  guid: 1,
+}, {
+  guid: '2',
+  isDirty: true
+}, {
+  guid: 3
+}]);
+
+const dirtyDataFields: any = ref([{
+  enName: 'guid',
+  chName: '主键',
+  dataType: 'string'
+}]);
+
+/** 脏数据下载 */
+const exportData = () => {
+  if (!dirtyData.value.length || !dirtyDataFields.value.length) {
+    ElMessage.error('当没有可下载的脏数据');
+    return;
+  }
+  downloadDirtyData({
+    planExecGuid: planExecGuid,
+    qualityModelGuid: qualityModelGuid
+  }).then((res: any) => {
+    if (res && !res.msg) {
+      download(res, `脏数据-${name}.xlsx`, 'excel');
+    } else {
+      res?.msg && ElMessage.error(res?.msg);
+    }
+  })
+}
+
+const getTableData = () => {
+  dirtyData.value = [];
+  dirtyDataLoading.value = true;
+  let ps1 = getQueryDirtyData({
+    pageSize: pageInfo.value.limit,
+    pageIndex: pageInfo.value.curr,
+    qualityModelGuid: qualityModelGuid,
+    planExecGuid: planExecGuid,
+  }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data = res.data || {};
+      dirtyData.value = data.records || [];
+      pageInfo.value.curr = data.pageIndex;
+      pageInfo.value.rows = data.totalRows || 0;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+  let ps2 = getQueryDirtyFields(qualityModelGuid).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      dirtyDataFields.value = res.data.fields || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  Promise.all([ps1, ps2]).then(res => {
+    dirtyDataLoading.value = false;
+  });
+};
+
+onBeforeMount(() => {
+  getTableData();
+});
+
+const pageInfo = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  type: "normal",
+  rows: 0,
+})
+
+const pageChange = (info) => {
+  pageInfo.value.curr = Number(info.curr);
+  pageInfo.value.limit = Number(info.limit);
+  getTableData();
+}
+
+const formatterPreviewDate = (row, info) => {
+  let enName = info.enName;
+  let v = row[enName]?.value;
+  if (v === "" || v === 0) {
+    return v;
+  }
+  if (v == null) {
+    return '--';
+  }
+  if (info.dataType === 'datetime') {
+    return Moment(v).format('YYYY-MM-DD HH:mm:ss');
+  }
+  if (info.dataType === 'date') {
+    if (isNaN(<any>(new Date(v)))) {
+      return Moment(parseInt(v)).format('YYYY-MM-DD');
+    } else {
+      return Moment(v).format('YYYY-MM-DD');
+    }
+  }
+  return v;
+};
+
+const getTextAlign = (field) => {
+  if (field.dataType === 'decimal' || field.dataType === 'int' || field.dataType == 'bit' || field.dataType == 'tinyint') {
+    return 'right';
+  }
+  return 'left'
+}
+
+/** otherWidth表示使用标题宽度时添加标题排序图标等宽度 */
+const calcTableColumnWidth = (data: any[], prop, title, otherWidth = 0) => {
+  let d: any[] = [];
+  data.forEach((dt) => d.push(dt[prop]));
+  return calcColumnWidth(
+    d,
+    title,
+    {
+      fontSize: 14,
+      fontFamily: "SimSun",
+    },
+    {
+      fontSize: 14,
+      fontFamily: "SimSun",
+    },
+    otherWidth
+  );
+};
+
+/** 每列字段对应的列宽计算结果。 */
+const originTableFieldColumn: any = ref({
+  guid: 140
+});
+
+watch(
+  () => dirtyData.value,
+  (val: any[], oldVal) => {
+    if (!dirtyDataFields.value?.length) {
+      originTableFieldColumn.value = {};
+      return;
+    }
+    originTableFieldColumn.value = {};
+    dirtyDataFields.value.forEach((field, index) => {
+      originTableFieldColumn.value[field.enName] = calcTableColumnWidth(
+        val?.map(v => {
+          let json = {};
+          for (const k in v) {
+            json[k] = v[k]?.value
+          }
+          return json;
+        }) || [],
+        field.enName,
+        field.chName,
+        24
+      );
+    });
+  }
+);
+
+const handleDityCellClass = ({ row, column, rowIndex, columnIndex }) => {
+  let v = dirtyData.value[rowIndex][column.property];
+  if (v?.checkInfo?.length) {
+    return 'dirty-cell-bg';
+  }
+}
+
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_tool_wrap">
+      <div class="tools_btns">
+        <el-button type="primary" @click="exportData" v-preReClick>脏数据下载</el-button>
+      </div>
+    </div>
+    <div class="table_panel_wrap">
+      <el-table key="guid" v-loading="dirtyDataLoading" :data="dirtyData" border tooltip-effect="light" style="
+                width: 100%;
+                min-width: 200px;
+                max-width: 100%;
+                height: calc(100% - 44px);
+                display: inline-block;
+              " stripe :cell-class-name="handleDityCellClass">
+        <el-table-column v-for="(field, index) in dirtyDataFields" :key="field.enName" :prop="field.enName"
+          :label="field.chName" :width="field.dataType === 'datetime'
+          ? TableColumnWidth.DATETIME
+          : field.dataType === 'date'
+            ? TableColumnWidth.DATE
+            : originTableFieldColumn[field.enName]
+          " :align="getTextAlign(field)" :header-align="getTextAlign(field)" :show-overflow-tooltip="true"
+          >
+          <template #default="scope">
+            <el-tooltip v-if="scope.row[field.enName].checkInfo?.length" placement="bottom-start" effect="light"
+              popper-class="table_tooltip" trigger="click">
+              <template #content>
+                <div style="width: 236px; text-align: justify">
+                  <p class="tips_title">不符合规则</p>
+                  <p v-for="(item) in (scope.row[field.enName].checkInfo || [])">{{ item }}</p>
+                </div>
+              </template>
+              <span class="dirty-cell-tooltip">{{ formatterPreviewDate(scope.row, field) }}</span>
+            </el-tooltip>
+            <span v-else>{{ formatterPreviewDate(scope.row, field) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.table_tool_wrap {
+  width: 100%;
+  height: 44px;
+  padding: 8px;
+
+  .tools_btns {
+    padding: 0;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 44px);
+  padding: 0 8px;
+}
+
+:deep(.el-table) {
+  .dirty-cell-bg {
+    background: #FFF1D4 !important;
+
+    .cell.el-tooltip {
+      padding: 0px;
+    }
+  }
+
+  .dirty-cell-tooltip {
+    width: 100%;
+    min-height: 24px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 12px;
+  }
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: assessLog
+</route>
+
+<script lang="ts" setup name="assessLog">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import Table from "@/components/Table/index.vue";
+import Drawer from "@/components/Drawer/index.vue";
+import {
+  getAssessDetailTableData,
+} from '@/api/modules/dataQualityAssess';
+import { ElMessage } from "element-plus";
+import { changeNum } from '@/utils/common';
+import {TableColumnWidth} from "@/utils/enum"
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute();
+/** 方案guid */
+const planGuid = route.query.guid;
+const planName = route.query.name;
+const execType = route.query.type;
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+const tableInfo = ref({
+  id: "user-authority-table",
+  fields: [
+  { type:"index", width: TableColumnWidth.INDEX, align:"center",label: "序号" },
+    { label: "质检执行结果", field: "execResult", type: "tag", width: 120, align: "center" },
+    { label: "评估时间", field: "execTime", width: 180, },
+    {
+      label: "耗时(秒)", field: "execDuration", align: "right", width: 100, getName: (scope) => {
+        return scope.row.execDuration != null ? changeNum(scope.row.execDuration ?? 0) : '--';
+      }
+    },
+    {
+      label: "规则数", field: "ruleNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.ruleNum != null ? changeNum(scope.row.ruleNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "评估总数", field: "totalNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.totalNum != null ? changeNum(scope.row.totalNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格条数", field: "qualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedNum != null ? changeNum(scope.row.qualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "不合格条数", field: "unqualifiedNum", width: 100, align: "right", getName: (scope) => {
+        return scope.row.unqualifiedNum != null ? changeNum(scope.row.unqualifiedNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "合格率", field: "qualifiedRate", width: 100, align: "right", getName: (scope) => {
+        return scope.row.qualifiedRate != null ? ((scope.row.qualifiedRate ?? 0).toFixed(2) + '%') : '--';
+      }
+    },
+  ],
+  loading: false,
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 140,
+    fixed: 'right',
+    btns: [
+      { label: "查看结果", value: "resultView" },
+      { label: "日志", value: "log" }
+    ],
+  }
+});
+
+const formTable = ref({
+  type: "table",
+  title: "",
+  col: 'no-margin',
+  tableInfo: {
+    id: "log-detail-table",
+    loading: false,
+    fields: [
+      { label: "执行时间", field: "changeTime", width: 140, },
+      { label: "日志类型", field: "metaCurrValue", width: 120 },
+      { label: "日志级别", field: "collectTaskName", width: 110 },
+      { label: "执行步骤", field: "updateType", width: 240 },
+    ],
+    data: [],
+    showPage: false,
+    actionInfo: {
+      show: false
+    },
+  },
+})
+
+const drawerInfo: any = ref({
+  visible: false,
+  direction: "rtl",
+  modalClass: "wrap_width_auto",
+  size: 650,
+  header: {
+    title: "日志详情",
+  },
+  type: '',
+  container: {
+    contents: [
+      formTable.value,
+    ],
+  },
+  footer: {
+    visible: false,
+  },
+})
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  getTableData();
+};
+
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getAssessDetailTableData({ pageSize: page.value.limit, pageIndex: page.value.curr, planGuid: planGuid }).then((res: any) => {
+    tableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      tableInfo.value.data = data.records || []
+      tableInfo.value.page.limit = data.pageSize ?? 50;
+      tableInfo.value.page.curr = data.pageIndex
+      tableInfo.value.page.rows = data.totalRows ?? 0;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  if (type == 'resultView') {
+    if(!!execType) {
+      router.push({
+      name: 'syncAssessDetail',
+      query: {
+        name: planName,
+        planGuid: row.planGuid,
+        planExecGuid: row.planExecGuid
+      }
+    });
+    } else {
+      router.push({
+      name: 'assessDetail',
+      query: {
+        name: planName,
+        planGuid: row.planGuid,
+        planExecGuid: row.planExecGuid
+      }
+    });
+    }
+  
+  } else if (type == 'log') {
+    const params = {
+      logGuid: row.guid
+    }
+    drawerInfo.value.visible = true
+    // formTable.value.tableInfo.loading = true;
+    // getLogDetail(params).then((res: any) => {
+    //  formTable.value.tableInfo.loading = false;
+    //   if (res.code == proxy.$passCode && res.data) {
+    //     const data = res.data
+    //     formTable.value.tableInfo.data = data
+    //     drawerInfo.value.container.contents[0].listInfo.data = data
+    //     drawerInfo.value.visible = true
+    //   } else {
+    //     ElMessage({
+    //       type: "info",
+    //       message: res.msg,
+    //     });
+    //   }
+    // })
+  }
+};
+
+const drawerBtnClick = (btn) => {
+  drawerInfo.value.visible = false;
+};
+
+onBeforeMount(() => {
+  getTableData();
+});
+
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_panel_wrap">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+    </div>
+
+    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0;
+
+  .table_panel_wrap {
+    height: 100%;
+    padding: 16px 16px 0;
+  }
+}
+
+:deep(.el-drawer) {
+  .drawer_panel {
+    height: 100%;
+
+    .table_panel_wrap {
+      height: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: assessTemplate
+</route>
+
+<script lang="ts" setup name="assessTemplate">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Form from "@/components/Form/index.vue";
+import StepBar from "@/components/StepBar/index.vue";
+import Table from "@/components/Table/index.vue";
+import TreeTransferChecked from "@/components/TreeTransferChecked/index.vue";
+import TreeTransfer from "@/components/TreeTransfer/index.vue";
+import filtersSettingBatch from "./filtersSettingBatch.vue";
+import {
+  getModelCountList,
+  checkPlanExist,
+  getValidGroup,
+  getModelDbGp,
+  getModelRuleCount,
+  getModelRules,
+  saveQualityPlan,
+  updateQualityPlan,
+  getAssessPlanDetail,
+  getPlanFilterDetail
+} from '@/api/modules/dataQualityAssess';
+import {
+  getQualityTreeData,
+  getQualityTreeDataByDs
+} from '@/api/modules/dataQuality';
+import {
+  getCronExecTime
+} from '@/api/modules/queryService';
+import { changeNum } from '@/utils/common';
+import useUserStore from "@/store/modules/user";
+import useDataQualityStore from "@/store/modules/dataQuality";
+import { cloneDeep } from "lodash-es";
+import { TableColumnWidth } from '@/utils/enum';
+
+const userStore = useUserStore();
+const dataQualityStore = useDataQualityStore();
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute();
+
+const fullPath = route.fullPath;
+const planGuid = route.query.guid;//编辑方案时
+const isDetail = ref(route.query.detail != null);// 查看方案详情
+const modelGuid = ref(route.query.modelGuid); // 从质检表跳过来的评估方案，默认单表。
+const groupGuid = ref(route.query.groupGuid); // 从质检表跳过来的评估方案，懒加载需要展开groupGuid
+
+const step = ref(0);
+const stepsInfo = ref({
+  step: step.value,
+  list: [
+    { title: '选择模型', value: 1 },
+    { title: '任务调度', value: 2 }
+  ]
+})
+
+const ruleModelTableInfo = ref({
+  id: 'rule-model-table',
+  loading: false,
+  minHeight: '200px',
+  nodeKey: 'modelGuid',
+  fields: [
+    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
+    { label: "表名", field: "modelName", width: 140, type: 'text_btn', value: 'detailView', columClass: 'text_btn' },
+    { label: "分组名称", field: "modelGroupName", width: 150 },
+    { label: "数据源", field: "dataSourceName", width: 140 },
+    { label: "规则数量", field: "ruleCount", width: 140, align: 'right' },
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 100,
+    fixed: 'right',
+    btns: isDetail.value ? [{ label: "规则", value: "ruleEdit", visible: true }] : [
+      { label: "规则", value: "ruleEdit", visible: true },
+      { label: "删除", value: "delete", visible: true },
+    ],
+  }
+})
+
+/** 规则设置对话框。 */
+const modelRulesTableRef = ref();
+
+/** 记录模型guid对应的guid， */
+const modelRulesJson: any = ref({});
+
+const currTableData: any = ref({});
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+  if (type == "ruleEdit") {
+    ruleSettingDialogVisible.value = true;
+    if (modelRulesJson.value[row.modelGuid]) {
+      modelRulesTableInfo.value.data = modelRulesJson.value[row.modelGuid];
+      nextTick(() => {
+        let confs: any[] = [];
+        currTableData.value.modelRuleConfGuids?.forEach((guid) => {
+          let index = modelRulesTableInfo.value.data.findIndex(d => d.guid == guid);
+          if (index > -1) {
+            let row = modelRulesTableInfo.value.data[index];
+            confs.push(row);
+            modelRulesTableRef.value.tableRef.toggleRowSelection(row, true);
+          }
+        })
+        currTableData.value.modelRuleConfs = confs;
+      });
+    } else {
+      getModelRulesDetail(row.modelGuid).then(() => {
+        nextTick(() => {
+          let confs: any[] = [];
+          currTableData.value.modelRuleConfGuids?.forEach((guid) => {
+            let index = modelRulesTableInfo.value.data.findIndex(d => d.guid == guid);
+            if (index > -1) {
+              let row = modelRulesTableInfo.value.data[index];
+              confs.push(row);
+              modelRulesTableRef.value.tableRef.toggleRowSelection(row, true);
+            }
+          })
+          currTableData.value.modelRuleConfs = confs;
+        })
+      })
+    }
+  } else if (type == "delete") {
+    ElMessageBox.confirm("此操作将永久删除，是否继续？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: type,
+    }).then(() => {
+      // 只是内存删除。删除时也需要同步更新规则数量。
+      ruleModelTableInfo.value.data.splice(scope.$index, 1);
+      let v = modelFormRef.value?.formInline;
+      if (v.planType === 1) {
+        modelFormItems.value[2].default = '';
+      } else if (v.planType === 3) {//分组
+        let index = selectModelsByGroup.value.findIndex(s => s.guid == row.modelGuid);
+        selectModelsByGroup.value.splice(index, 1);
+        modelFormItems.value[3].default = selectModelsByGroup.value;
+      } else if (v.planType == 2) {
+        let index = selectModels.value.findIndex(s => s.guid == row.modelGuid);
+        selectModels.value.splice(index, 1);
+        modelFormItems.value[4].default = selectModels.value;
+      }
+      // http://test.csylcloud.com:8380/browse/WZL-511  修改了modelFormItems.value就需要更新form值，否则会导致上次修改的值消失。
+      let formInline = modelFormRef.value?.formInline || {};
+      let item1 = modelFormItems.value[0];
+      item1.default = formInline[item1.field];
+      let item2 = modelFormItems.value[1];
+      item2.default = formInline[item2.field];
+      let largeCategoryNum = row.largeCategoryNum || {};
+      for (const large in largeCategoryNum) {
+        let rowWeightIndex = ruleWeightData.value.findIndex(w => w.largeCategory == large);
+        if (rowWeightIndex > -1) {
+          let rowWeight = ruleWeightData.value[rowWeightIndex];
+          rowWeight.ruleCount = rowWeight.ruleCount - largeCategoryNum[large];
+          if (rowWeight.ruleCount < 1) {
+            ruleWeightData.value.splice(rowWeightIndex, 1);
+          }
+        }
+      }
+      //http://test.csylcloud.com:8380/browse/WZL-529
+      if (ruleWeightData.value.length == 1) {//只剩一条
+        ruleWeightData.value[0].ruleLargeWeight = changeNum(100, 2, true);
+      }
+    }).catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消删除",
+      });
+    });
+  } else if (type == 'detailView') {
+    router.push({
+      name: 'qualityRules'
+    });
+    dataQualityStore.setModelGuid(row.modelGuid);
+  }
+};
+
+/** 选择的所有质检表对应的规则大类数量及权重占比。 */
+const ruleWeightData: any = ref([]);
+const ruleWeightDataLoading = ref(false);
+
+const inputWeightChange = (val, row) => {
+  let strArr = val.split(".");
+  if (strArr.length > 1) {
+    let right = strArr[1];
+    if (right === "" || right.length < 2) {
+      row.ruleLargeWeight = val = parseFloat(val || 0).toFixed(2);
+    }
+  } else {
+    row.ruleLargeWeight = val = parseFloat(val || 0).toFixed(2);
+  }
+};
+
+/** 输入框输入触发事件 */
+const inputEventWeightChange = (val, row) => {
+  row.ruleLargeWeight = row.ruleLargeWeight.toString().replace(/[^\d.]/g, "")
+  row.ruleLargeWeight = row.ruleLargeWeight.toString().replace(/\.{2,}/g, ".")
+  row.ruleLargeWeight = row.ruleLargeWeight.toString().replace(/^\D*(\d{0,3}(?:\.\d{0,2})?).*$/g, "$1")
+  if (row.ruleLargeWeight > 100) {
+    row.ruleLargeWeight = changeNum(100, 2, true);
+  }
+}
+
+/** 类型是表时，需要显示第一级为分组，第二级为表。 */
+const qualityGroups: any = ref([]);
+
+const getDataSourceListData = () => {
+  return getModelDbGp().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data || [];
+      databaseList.value = data;
+      console.log(data);
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+}
+
+const planDetailInfo: any = ref({});
+
+/** 全屏加载状态，保存时显示。 */
+const fullscreenLoading = ref(false);
+
+const getValidGroupPromise: any = ref(null);
+
+const getPlanFilterDetailPromise: any = ref(null);
+
+/** 记录是否是从分组跳转，若是，则需要默认值是该分组下所有模型表。 */
+const initDefaultGroup = ref(false);
+
+onBeforeMount(() => {
+  getValidGroupPromise.value = getValidGroup().then((res: any) => {
+    getValidGroupPromise.value = null;
+    if (res.code == proxy.$passCode) {
+      const data = qualityGroups.value = res.data || [];
+      return data;
+    } else {
+      ElMessage.error(res.msg);
+      return [];
+    }
+  })
+  if (planGuid) {
+    fullscreenLoading.value = true;
+    getAssessPlanDetail(planGuid).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        planDetailInfo.value = res.data || {};
+        switchInfo.value = planDetailInfo.value;
+        getPlanFilterDetailPromise.value = getPlanFilterDetail(planGuid).then((res: any) => {
+          getPlanFilterDetailPromise.value = null;
+          fullscreenLoading.value = false;
+          if (res.code == proxy.$passCode) {
+            console.log(res.data);
+            let data = res.data || [];
+            data.forEach(d => {
+              let tables: any = [];
+              for (const id in d.qualityModelInfo) {
+                tables.push({
+                  guid: id,
+                  subjectGuid: planDetailInfo.value.modelCount?.find(m => m.modelGuid == id)?.subjectGuid,
+                  name: d.qualityModelInfo[id]
+                });
+              }
+              batchFiltersValue.value[d.dataFilterGroup] = {
+                filter: d.dataRange,
+                tables: tables,
+                checked: true
+              }
+            });
+          } else {
+            ElMessage.error(res.msg);
+          }
+        });
+        if (planDetailInfo.value.planType == 1) {
+          planDetailInfo.value.qualityModelGuid = planDetailInfo.value.modelCount?.[0]?.modelGuid;
+          modelFormItems.value[2].expandKeys = [planDetailInfo.value.modelCount?.[0]?.modelGroupGuid];
+        }
+        setModelFormItems(planDetailInfo.value);
+        checkedInfo.value[planDetailInfo.value.planName] = true;
+        ruleModelTableInfo.value.data = planDetailInfo.value.modelCount || [];
+        ruleWeightData.value = planDetailInfo.value.modelRuleWeights?.map(r => {
+          r.ruleLargeWeight = r.ruleLargeWeight.toFixed(2);
+          return r;
+        }) || [];
+        if (planDetailInfo.value.planType == 3) {//分组
+          dsSelectGroup.value = planDetailInfo.value.modelCount?.[0]?.modelGroupGuid;
+          modelFormItems.value[3].default = selectModelsByGroup.value = planDetailInfo.value.modelCount?.map((m: any) => {
+            m.guid = m.modelGuid;
+            m.name = m.modelName;
+            return m;
+          }) || [];
+        } else if (planDetailInfo.value.planType == 2) {//数据库
+          modelFormItems.value[4].default = selectModels.value = planDetailInfo.value.modelCount?.map(m => {
+            m.name = m.modelName;
+            m.guid = m.modelGuid;
+            return m;
+          }) || [];
+          databaseInfo.value = planDetailInfo.value.modelCount?.[0]?.dataSourceGuid;
+        }
+        setFormItems(planDetailInfo.value, true);
+      } else {
+        fullscreenLoading.value = false;
+        ElMessage.error(res.msg);
+      }
+    });
+  } else if (modelGuid.value) {
+    setModelFormItems({ planType: 1, qualityModelGuid: modelGuid.value });
+    modelFormItems.value[2].expandKeys = [groupGuid.value];
+    getModelCountListData([modelGuid.value]);
+    getModelRuleCountListData([modelGuid.value]);
+  } else if (groupGuid.value && !modelGuid.value) {
+    setModelFormItems({ planType: 3 });
+    dsSelectGroup.value = <string>groupGuid.value;
+    initDefaultGroup.value = true;
+  } else if (dataQualityStore.defaultPlanType) {
+    setModelFormItems({ planType: dataQualityStore.defaultPlanType });
+    dataQualityStore.setDefaultPlanType(null);
+  }
+});
+
+onActivated(() => {
+  if (modelGuid.value || groupGuid.value) {
+    return;
+  }
+  if (dataQualityStore.defaultPlanType) {
+    setModelFormItems({ planType: dataQualityStore.defaultPlanType });
+    dataQualityStore.setDefaultPlanType(null);
+  }
+});
+
+const modelFormItems: any = ref([
+  {
+    label: '质量方案名称',
+    type: 'input',
+    maxlength: 50,
+    placeholder: '请输入',
+    field: 'planName',
+    default: '',
+    clearable: true,
+    required: true
+  }, {
+    label: '方案类型',
+    type: 'select',
+    placeholder: '请选择',
+    field: 'planType',
+    default: 1,
+    options: [
+      {
+        label: '表',
+        value: 1
+      }, {
+        label: '分组',
+        value: 3
+      }, {
+        label: '数据库',
+        value: 2
+      }
+    ],
+    required: true,
+    visible: true
+  }, {
+    label: '选择质量规则集',
+    type: 'tree-select',
+    placeholder: '请选择',
+    field: 'qualityModelGuid',
+    default: '',
+    checkStrictly: false,
+    options: [],
+    props: {
+      label: 'name',
+      value: 'guid',
+      children: 'children',
+      isLeaf: 'isLeaf'
+    },
+    lazy: true,
+    expandKeys: [],
+    clearable: true,
+    required: true,
+    filterable: true,
+    visible: true
+  }, {
+    label: '选择质量规则集',
+    visible: false,
+    type: 'addBtn',
+    placeholder: '选择表',
+    field: 'qualityModelGuidsByGroup',
+    default: [],
+    required: true,
+  }, {
+    label: '选择质量规则集',
+    visible: false,
+    type: 'addBtn',
+    placeholder: '选择表',
+    field: 'qualityModelGuids',
+    default: [],
+    required: true,
+  }
+])
+
+const checkPlanName = async (params) => {
+  return new Promise((resolve, reject) => {
+    checkPlanExist(params).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        if (res.data) {
+          resolve('该名称已存在,请填写其他名称')
+        } else {
+          resolve('')
+        }
+      } else {
+        resolve(res.msg)
+      }
+    }).catch((xhr) => {
+      reject(xhr.msg)
+    });
+  })
+}
+
+/** 记录已校验过的信息。 */
+const checkedInfo: any = ref({});
+
+const modelFormRules = ref({
+  planName: [
+    {
+      trigger: 'change', validator: (rule: any, value: any, callback: any) => {
+        if (!value) {
+          callback(new Error("请填写质量方案名称"));
+          return;
+        }
+        let checkedInfoValue = checkedInfo.value[value];
+        if (checkedInfoValue != null) {
+          if (checkedInfoValue) {
+            callback();
+          } else {
+            callback(new Error(checkedInfoValue));
+          }
+          return;
+        }
+        checkPlanName(value).then((res: any) => {
+          if (res) {
+            checkedInfo.value[value] = res;
+            callback(new Error(res));
+          } else {
+            checkedInfo.value[value] = true;
+            callback();
+          }
+        }).catch((xhr: any) => {
+          callback(new Error(xhr));
+        })
+      }
+    }
+  ],
+  qualityModelGuid: [{
+    validator: (rule: any, value: any, callback: any) => {
+      let formInline = modelFormRef.value?.formInline;
+      if (formInline && formInline.planType == 1) {
+        if (!value?.length) {
+          callback(new Error("请选择质量规则集"));
+        }
+      }
+      callback();
+    },
+    trigger: 'change'
+  }],
+  qualityModelGuidsByGroup: [{
+    validator: (rule: any, value: any, callback: any) => {
+      let formInline = modelFormRef.value?.formInline;
+      if (formInline && formInline.planType == 3) {
+        if (!formInline.qualityModelGuidsByGroup?.length) {
+          callback(new Error("请选择质量规则集"));
+        }
+      }
+      callback();
+    }
+  }],
+  qualityModelGuids: [{
+    validator: (rule: any, value: any, callback: any) => {
+      let formInline = modelFormRef.value?.formInline;
+      if (formInline && formInline.planType == 2) {
+        if (!formInline.qualityModelGuids?.length) {
+          callback(new Error("请选择质量规则集"));
+        }
+      }
+      callback();
+    }
+  }],
+})
+
+const cancelPlan = () => {
+  if (isDetail.value) {
+    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+    toRouterPath('/data-quality/quality-assess');
+    return;
+  }
+  ElMessageBox.confirm(
+    "当前页面尚未保存，确定放弃修改吗？",
+    "提示",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  )
+    .then(() => {
+      userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+      toRouterPath('/data-quality/quality-assess');
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消",
+      });
+    });
+}
+
+const modelFormRef = ref();
+
+const changeStep = (val) => {
+  if (val == 2) {
+    modelFormRef.value?.ruleFormRef?.validate((valid) => {
+      if (valid) {
+        let sum = 0;
+        ruleWeightData.value.forEach(item => {
+          if (item.ruleLargeWeight != null) {
+            sum += parseFloat(item.ruleLargeWeight);
+          }
+        });
+        if (!(sum <= 100.02 && sum >= 99.98)) {// 允许浮动0.01误差
+          ElMessage.error('规则权重总分应为100分');
+          return;
+        }
+        if (!planGuid) {
+          let formInline = modelFormRef.value?.formInline;
+          if (formInline) {
+            taskFormItems.value.find(t => t.field == 'analysisReportName').default = formInline.planName;
+          }
+        }
+        step.value = val - 1;
+        stepsInfo.value.step = val - 1;
+      }
+    });
+  } else {
+    step.value = val - 1;
+    stepsInfo.value.step = val - 1;
+  }
+};
+
+/** 第二步任务调度的表单。 */
+const taskFormItems: any = ref([
+  {
+    label: '脏数据保留次数(次)',
+    type: 'input',
+    inputType: 'integerNumber',
+    placeholder: '请输入',
+    max: 1000,
+    field: 'dirtyDataNum',
+    default: 365,
+    min: 1,
+    clearable: true,
+    required: false,
+  },
+  {
+    label: '是否创建调度',
+    type: 'switch',
+    field: 'isScheduler',
+    default: 'Y',
+    activeValue: 'Y',
+    inactiveValue: 'N'
+  },
+  {
+    label: '定时',
+    type: 'input-popover-panel',
+    placeholder: '',
+    field: 'execCycle',
+    teleported: true,
+    col: 'col2',
+    append: {
+      btn: { label: '执行时间', value: 'cron' }
+    },
+    clearable: true,
+    required: true,
+    visible: true
+  },
+  {
+    label: '接下来五次执行时间',
+    type: 'textarea',
+    placeholder: '执行时间',
+    field: 'zxzq',
+    clearable: true,
+    required: false,
+    block: true,
+    class: 'execute-time',
+    rows: 5,
+    visible: true,
+    readonly: true
+  },
+  {
+    label: '是否创建分析报告',
+    type: 'switch',
+    field: 'isCreateReport',
+    default: 'N',
+    activeValue: 'Y',
+    block: true,
+    inactiveValue: 'N'
+  },
+  {
+    label: '分析报告名称',
+    type: 'input',
+    maxlength: 50,
+    placeholder: '请输入',
+    field: 'analysisReportName',
+    default: '',
+    clearable: true,
+    visible: false,
+    required: true,
+  },
+  {
+    label: '报告保留期数(期)',
+    type: 'input',
+    inputType: 'integerNumber',
+    placeholder: '请输入',
+    field: 'reportReserveCycle',
+    default: 365,
+    max: 1000,
+    min: 1,
+    clearable: true,
+    required: false,
+    visible: false
+  },
+])
+
+const taskFormRules = ref({
+  analysisReportName: [{
+    required: true,
+    message: '请填写报告名称',
+    trigger: 'blur'
+  }]
+});
+
+/** 任务调度表单组件ref。 */
+const taskFormRef = ref();
+
+const switchInfo: any = ref({});
+
+/** 是否创建任务调度。 */
+const handleTaskCreateChange = (val, formInfo, item) => {
+  if (item.field == 'isCreateReport') {
+    if (val == 'Y') {
+      formInfo.analysisReportName = formInfo.analysisReportName ?? switchInfo.value.analysisReportName;
+      formInfo.reportReserveCycle = formInfo.reportReserveCycle ?? switchInfo.value.reportReserveCycle;
+    }
+  }
+  else if (item.field == 'isScheduler') {
+    if (val == 'Y') {
+      formInfo.execCycle = formInfo.execCycle ?? switchInfo.value.execCycle;
+    }
+  }
+  setFormItems(formInfo);
+}
+
+const scheduleChange = (val, rowValue) => {
+  setFormItems(rowValue);
+}
+
+const taskFormBtnClick = (btn, type) => {
+  if (btn.value = 'cron') {
+    let vInfo = taskFormRef.value.formInline;
+    if (!vInfo.execCycle) {
+      return;
+    }
+    getCronExecTime(vInfo.execCycle).then((res: any) => {
+      if (res?.length) {
+        vInfo.zxzq = res.join('\n');
+        setFormItems(vInfo);
+      } else {
+        ElMessage({
+          type: 'error',
+          message: res.msg,
+        })
+      }
+    })
+  }
+}
+
+const setFormItems = (row, isDetail = false) => {
+  switchInfo.value = {
+    analysisReportName: row.analysisReportName,
+    reportReserveCycle: isDetail && row.isCreateReport == 'N' && row.reportReserveCycle == null ? 365 : row.reportReserveCycle,
+    execCycle: row.execCycle
+  };
+  taskFormItems.value.map(item => {
+    if (item.field == 'isScheduler') {
+      taskFormItems.value[1].default = row.isScheduler;
+      if (row.isScheduler == 'Y') {
+        taskFormItems.value[2].visible = true;
+        taskFormItems.value[3].visible = true;
+      } else {
+        taskFormItems.value[2].visible = false;
+        taskFormItems.value[3].visible = false;
+      }
+    } else if (item.field == 'isCreateReport') {
+      taskFormItems.value.at(-3).default = row.isCreateReport;
+      if (row.isCreateReport == 'Y') {
+        taskFormItems.value.at(-1).visible = true;
+        taskFormItems.value.at(-2).visible = true;
+      } else {
+        taskFormItems.value.at(-1).visible = false;
+        taskFormItems.value.at(-2).visible = false;
+      }
+    }
+    else if (item.field == 'reportReserveCycle' || item.field == 'dirtyDataNum') {
+      item.default = row[item.field] === undefined ? 365 : row[item.field];
+    } else if (item.field == 'analysisReportName') {
+      let formInline = modelFormRef.value?.formInline;
+      if (formInline) {
+        item.default = row[item.field] ?? formInline.planName;
+      }
+    } else {
+      item.default = row ? row[item.field] : ''
+    }
+  })
+}
+
+const toRouterPath = (url) => {
+  router.push({
+    path: url,
+  });
+};
+
+const save = () => {
+  taskFormRef.value?.ruleFormRef?.validate((valid) => {
+    if (valid) {
+      let modelValue = modelFormRef.value.formInline;
+      let models: any = [];
+      let ruleConfs: any = [];
+      let transferFilters: any = [];
+      for (const key in batchFiltersValue.value) {
+        let info = batchFiltersValue.value[key];
+        if (info.tables.length) {
+          info.tables.forEach(t => {
+            transferFilters.push(Object.assign({}, t, {
+              filter: info.filter,
+              dataFilterGroup: key
+            }));
+          });
+        }
+      }
+      ruleModelTableInfo.value.data.forEach((d: any) => {
+        let filterInfo = transferFilters.find(b => b.guid == d.modelGuid);
+        models.push({
+          qualityModelGuid: d.modelGuid,
+          subjectGuid: d.subjectGuid,
+          dataRange: filterInfo?.filter,
+          dataFilterGroup: filterInfo?.dataFilterGroup,
+        });
+        ruleConfs.push({
+          qualityModelGuid: d.modelGuid,
+          ruleConfGuid: d.modelRuleConfGuids || [],
+          dataSourceGuid: d.dataSourceGuid,
+          subjectGuid: d.subjectGuid
+        })
+      })
+      let params: any = Object.assign({}, taskFormRef.value.formInline, {
+        planName: modelValue.planName,
+        planType: modelValue.planType,
+        state: 1,
+        models: models,
+        ruleConfs: ruleConfs,
+        ruleWeights: ruleWeightData.value,
+      });
+      if (!params.reportReserveCycle && params.reportReserveCycle !== 0) {
+        params.reportReserveCycle = null;
+      }
+      if (!params.dirtyDataNum && params.dirtyDataNum !== 0) {
+        params.dirtyDataNum = null;
+      }
+      if (planGuid) {
+        params.guid = planGuid;
+        params.state = 0;
+        fullscreenLoading.value = true;
+        updateQualityPlan(params).then((res: any) => {
+          fullscreenLoading.value = false;
+          if (res.code == proxy.$passCode) {
+            ElMessage.success('方案更新成功');
+            router.push({
+              name: 'qualityAssess'
+            });
+            userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+            dataQualityStore.setPlanType(modelValue.planType);
+            dataQualityStore.setIsUpdate(true);
+          } else {
+            ElMessage.error(res.msg);
+          }
+        })
+      } else {
+        fullscreenLoading.value = true;
+        saveQualityPlan(params).then((res: any) => {
+          fullscreenLoading.value = false;
+          if (res.code == proxy.$passCode) {
+            ElMessage.success('新建质量评估方案保存成功');
+            router.push({
+              name: 'qualityAssess'
+            });
+            userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+            dataQualityStore.setPlanType(modelValue.planType);
+          } else {
+            ElMessage.error(res.msg);
+          }
+        })
+      }
+    }
+  });
+}
+
+/** 根据所选择的模型表，获取对应的规则数量信息。 */
+const getModelCountListData = (modelGuids) => {
+  ruleModelTableInfo.value.loading = true;
+  getModelCountList({ modelGuids: modelGuids }).then((res: any) => {
+    ruleModelTableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      ruleModelTableInfo.value.data = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+}
+
+/** 根据所选择的模型表，获取对应的权重信息。 */
+const getModelRuleCountListData = (modelGuids) => {
+  ruleWeightDataLoading.value = true;
+  getModelRuleCount({ modelGuids: modelGuids }).then((res: any) => {
+    ruleWeightDataLoading.value = false;
+    if (res.code == proxy.$passCode) {
+      ruleWeightData.value = res.data || [];
+      if (ruleWeightData.value.length) {
+        let v = changeNum(100 / ruleWeightData.value.length, 2, true);
+        ruleWeightData.value.forEach(d => d.ruleLargeWeight = v);
+      }
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+}
+
+/** 点击表格行中的规则按钮, 获取详细规则 */
+const getModelRulesDetail = (modelGuid) => {
+  modelRulesTableInfo.value.loading = true;
+  return getModelRules({ modelGuid: modelGuid, bizState: 'Y' }).then((res: any) => {
+    modelRulesTableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      modelRulesTableInfo.value.data = res.data || [];
+      modelRulesJson.value[modelGuid] = modelRulesTableInfo.value.data;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+}
+
+const batchFilterDialogRef = ref();
+
+/** 批量配置过滤条件 */
+const handleFiltersAdd = () => {
+  if (!selectSubjectTables.value.length) {
+    ElMessage.warning('请先选择质量规则集');
+    return;
+  }
+  batchFilterDialogRef.value?.openDialog(batchFiltersValue.value);
+}
+
+const setModelFormItems = (row) => {
+  let item1 = modelFormItems.value[0];
+  item1.default = row[item1.field];
+  let item2 = modelFormItems.value[1];
+  item2.default = row[item2.field];
+  if (item2.default === 1) {//表
+    modelFormItems.value[2].visible = true;
+    modelFormItems.value[3].visible = false;
+    modelFormItems.value[4].visible = false;
+  } else if (item2.default === 3) {//分组
+    modelFormItems.value[3].visible = true;
+    modelFormItems.value[2].visible = false;
+    modelFormItems.value[4].visible = false;
+  } else if (item2.default === 2) {//数据库
+    modelFormItems.value[2].visible = false;
+    modelFormItems.value[3].visible = false;
+    modelFormItems.value[4].visible = true;
+  }
+  let itemModel = modelFormItems.value.at(-3);
+  if (itemModel) {
+    itemModel.default = row[itemModel.field]
+  }
+}
+
+const selectChange = (val, item, row) => {
+  if (item.field === 'planType') {
+    //修改类型，则清空过滤条件
+    batchFiltersValue.value = {};
+    ruleModelTableInfo.value.data = [];
+    ruleWeightData.value = [];
+    if (val == 3) {
+      selectModels.value = [];
+      modelFormItems.value[3].default = [];
+    } else if (val == 2) {
+      selectModelsByGroup.value = [];
+      modelFormItems.value[4].default = [];
+    } else {
+      selectModelsByGroup.value = [];
+      selectModels.value = [];
+    }
+  } else if (item.field == 'qualityModelGuid') {
+    getModelCountListData([val]);
+    getModelRuleCountListData([val]);
+  }
+  setModelFormItems(row);
+};
+
+/** 分组+表结构懒加载。 */
+const modelFormTreeSelectLoad = (node, resolve, item) => {
+  if (node.level === 0) {
+    if (getValidGroupPromise.value) {
+      getValidGroupPromise.value.then(res => {
+        resolve(res);
+      })
+    } else {
+      resolve(qualityGroups.value);
+    }
+    return;
+  } else if (node.level == 1) {
+    getQualityTreeData(node.data.guid).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        const data = res.data?.map(d => {
+          d.parentGuid = node.data.guid;
+          d.groupName = node.data.name;
+          d.isLeaf = true;
+          return d;
+        }) || [];
+        resolve(data);
+      } else {
+        resolve([]);
+        ElMessage.error(res.msg);
+      }
+    })
+  }
+}
+
+/** 方案类型为表时，选择的表json对象 */
+const treeSelectNode: any = ref(null);
+
+const modelFormTreeSelectNodeChange = (node, item) => {
+  treeSelectNode.value = node;
+}
+
+const btnFormClick = (btn, type) => {
+  console.log(btn, type);
+  if (btn.field === "qualityModelGuids") {
+    let v: any = modelFormItems.value[4].default ?? [];
+    if (!v.length) {
+      modelsDialogVisible.value = true;
+      if (!databaseList.value?.length) {
+        getDataSourceListData().then(() => {
+          if (databaseInfo.value == databaseList.value[0]?.guid ?? "") {
+            dsFromTreeData.value = JSON.parse(JSON.stringify(currentDsFromTreeData.value));
+          } else {
+            databaseInfo.value = databaseList.value[0]?.guid ?? "";
+          }
+        })
+      } else {
+        if (databaseInfo.value == databaseList.value[0]?.guid ?? "") {
+          dsFromTreeData.value = JSON.parse(JSON.stringify(currentDsFromTreeData.value));
+        } else {
+          databaseInfo.value = databaseList.value[0]?.guid ?? "";
+        }
+      }
+      dsToTreeData.value = [];
+    } else {
+      let p: any = [];
+      v.forEach(vc => {
+        let pd = p.find(p => p.modelGroupGuid == vc.modelGroupGuid);
+        if (pd) {
+          pd.children.push({
+            guid: vc.modelGuid,
+            modelGuid: vc.modelGuid,
+            dataSourceGuid: vc.dataSourceGuid,
+            name: vc.modelName ?? vc.name,
+            isLeaf: true,
+            subjectGuid: vc.subjectGuid,
+            pid: vc.modelGroupGuid,
+            modelGroupName: vc.modelGroupName,
+            modelGroupGuid: vc.modelGroupGuid,
+          });
+        } else {
+          p.push({
+            guid: vc.modelGroupGuid,
+            modelGroupGuid: vc.modelGroupGuid,
+            modelGroupName: vc.modelGroupName,
+            name: vc.modelGroupName,
+            dataSourceGuid: vc.dataSourceGuid,
+            pid: 0,
+            children: [{
+              guid: vc.modelGuid,
+              modelGuid: vc.modelGuid,
+              name: vc.modelName ?? vc.name,
+              isLeaf: true,
+              subjectGuid: vc.subjectGuid,
+              pid: vc.modelGroupGuid,
+              modelGroupGuid: vc.modelGroupGuid,
+              modelGroupName: vc.modelGroupName,
+              dataSourceGuid: vc.dataSourceGuid,
+            }]
+          });
+        }
+      });
+      databaseInfo.value = v[0].dataSourceGuid;
+      dsToTreeData.value = p;
+      if (!databaseList.value?.length) { //编辑的时候第一次打开。
+        getDataSourceListData().then(res => { //解决先出现guid，再变成中文的问题。
+          if (getDsFromTreeDataPromise.value) {
+            getDsFromTreeDataPromise.value.then(res => {
+              Promise.all(dsToTreeData.value.map(pi => {
+                return getTreeDataByDs(dsFromTreeData.value.find(d => d.guid == pi.guid))
+              })).then(() => {
+                dsFromTreeData.value = handlerFromFilterToTreeData(dsFromTreeData.value, dsToTreeData.value);
+                modelsDialogVisible.value = true;
+              })
+            })
+          } else {
+            Promise.all(dsToTreeData.value.map(pi => {
+              return getTreeDataByDs(dsFromTreeData.value.find(d => d.guid == pi.guid))
+            })).then(() => {
+              dsFromTreeData.value = handlerFromFilterToTreeData(dsFromTreeData.value, dsToTreeData.value);
+              modelsDialogVisible.value = true;
+            })
+          }
+        });
+      } else {
+        modelsDialogVisible.value = true;
+      }
+    }
+  } else if (btn.field === 'qualityModelGuidsByGroup') {
+    modelsByGroupDialogVisible.value = true;
+    if (!dsSelectGroup.value) {
+      if (getValidGroupPromise.value) {
+        getValidGroupPromise.value.then((res: any) => {
+          dsSelectGroup.value = res[0]?.guid ?? "";
+        });
+      } else {
+        dsSelectGroup.value = qualityGroups.value[0]?.guid ?? "";
+      }
+    }
+    dsByGroupToTreeData.value = cloneDeep(modelFormItems.value[3].default ?? []);
+  }
+}
+
+const handlerFromFilterToTreeData = (data, toData) => {
+  for (let i = data.length - 1; i >= 0; i--) {
+    for (let j = toData.length - 1; j >= 0; j--) {
+      if (data[i] && data[i].guid === toData[j].guid) {
+        // 当id相等可以删除的情况 即：没有子级可以删除；
+        if (!data[i].children?.length && !toData[j].children?.length) {
+          data.splice(i, 1);
+        } else {
+          handlerFromFilterToTreeData(data[i].children, toData[j].children);
+          if (!data[i].children?.length) {
+            data.splice(i, 1);
+          }
+        }
+      }
+    }
+  }
+  return data;
+}
+
+const selectModels: any = ref([]);
+
+/** 以数据库为粒度选择模型表。 */
+const modelsDialogVisible = ref(false);
+
+const databaseList: any = ref([]);
+
+const databaseInfo = ref('');
+
+const dsFromTreeDataLoading = ref(false);
+
+const dsFromTreeData: any = ref([]);
+
+const currentDsFromTreeData = ref([]);
+
+const dsToTreeData: any = ref([]);
+
+let getDsFromTreeDataPromise: any = ref(null);
+
+watch(() => databaseInfo.value, (val) => {
+  if (val) {
+    dsFromTreeDataLoading.value = true;
+    getDsFromTreeDataPromise.value = getModelDbGp(val).then((res: any) => {
+      getDsFromTreeDataPromise.value = null;
+      dsFromTreeDataLoading.value = false;
+      if (res.code == proxy.$passCode) {
+        dsFromTreeData.value = res.data?.map(d => {
+          d.pid = 0;
+          return d;
+        }) || [];
+        currentDsFromTreeData.value = JSON.parse(JSON.stringify(dsFromTreeData.value)) || [];
+        return dsFromTreeData.value;
+      } else {
+        dsFromTreeData.value = [];
+        ElMessage.error(res.msg);
+      }
+    })
+  } else {
+    dsFromTreeData.value = [];
+  }
+})
+
+const cancelModelDialog = () => {
+  modelsDialogVisible.value = false;
+}
+
+const submitModels = () => {
+  if (!dsToTreeData.value.length) {
+    ElMessage.error('已选表不能为空');
+    return;
+  }
+  let models: any = [];
+  dsToTreeData.value.forEach(d => {
+    models.push(...d.children);
+  });
+  let formInline = modelFormRef.value?.formInline || {};
+  selectModels.value = models;
+  modelFormItems.value[4].default = selectModels.value;
+  // http://test.csylcloud.com:8380/browse/WZL-511
+  let item1 = modelFormItems.value[0];
+  item1.default = formInline[item1.field];
+  let item2 = modelFormItems.value[1];
+  item2.default = formInline[item2.field];
+  modelFormRef.value?.ruleFormRef?.validateField('qualityModelGuids');
+  let guids = selectModels.value.map((m: any) => m.guid);
+  getModelCountListData(guids);
+  getModelRuleCountListData(guids);
+  modelsDialogVisible.value = false;
+}
+
+const handleModelLeftCheckChange = (nodeObj, treeObj, checkAll, treeNode) => {
+  if (!nodeObj.isLeaf && treeObj.checkedKeys?.includes(nodeObj.guid)) {
+    treeNode?.expand();
+  }
+}
+
+/** 切换了数据库，清空表选择 */
+const handleSelectDsModelChange = (val) => {
+  dsToTreeData.value = [];
+}
+
+const loadNode = (node, resolve, from) => {
+  if (node.level === 0) {
+    if (node.data) {
+      resolve(node.data);
+    }
+    return;
+  }
+  if (node.level === 1) {
+    if (node.data.children?.length > 0) {
+      resolve(node.data.children);
+      return;
+    }
+    getTreeDataByDs(node.data).then((res) => {
+      resolve(res);
+    })
+  }
+}
+
+const getTreeDataByDs = (node) => {
+  return getQualityTreeDataByDs({ guid: node.guid, dataSourceGuid: databaseInfo.value }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      const data = res.data?.map(d => {
+        d.parentGuid = node.guid;
+        d.modelGroupGuid = node.guid;
+        d.pid = node.guid;
+        d.modelGuid = d.guid;
+        d.modelGroupName = node.name;
+        d.dataSourceGuid = databaseInfo.value;
+        d.isLeaf = true;
+        return d;
+      }) || [];
+      node.children = data;
+      return data;
+    } else {
+      ElMessage.error(res.msg);
+      return [];
+    }
+  })
+}
+
+/** 以分组为粒度选择模型表。 */
+const selectModelsByGroup: any = ref([]);
+
+const modelsByGroupDialogVisible = ref(false);
+
+/** 以分组为粒度的对话框选择的当前分组 */
+const dsSelectGroup = ref('');
+
+const dsByGroupFromTreeDataLoading = ref(false);
+
+const dsByGroupFromTreeData = ref()
+
+const dsByGroupToTreeData: any = ref([]);
+
+watch(() => dsSelectGroup.value, (val) => {
+  if (val) {
+    dsByGroupFromTreeDataLoading.value = true;
+    getQualityTreeData(val).then((res: any) => {
+      dsByGroupFromTreeDataLoading.value = false;
+      if (res.code == proxy.$passCode) {
+        dsByGroupFromTreeData.value = res.data || [];
+        if (initDefaultGroup.value == true) {
+          initDefaultGroup.value = false;
+          modelFormItems.value[3].default = selectModelsByGroup.value = dsByGroupFromTreeData.value;
+          let guids = selectModelsByGroup.value.map((m: any) => m.guid);
+          getModelCountListData(guids);
+          getModelRuleCountListData(guids);
+        }
+      } else {
+        dsByGroupFromTreeData.value = [];
+        ElMessage.error(res.msg);
+      }
+    })
+  } else {
+    dsByGroupFromTreeData.value = [];
+  }
+})
+
+const cancelModelByGroupDialog = () => {
+  modelsByGroupDialogVisible.value = false;
+}
+
+const submitModelsByGroup = () => {
+  if (!dsByGroupToTreeData.value.length) {
+    ElMessage.error('已选表不能为空');
+    return;
+  }
+  let formInline = modelFormRef.value?.formInline || {};
+  selectModelsByGroup.value = dsByGroupToTreeData.value.slice(0);
+  modelFormItems.value[3].default = selectModelsByGroup.value;
+  // http://test.csylcloud.com:8380/browse/WZL-511
+  let item1 = modelFormItems.value[0];
+  item1.default = formInline[item1.field];
+  let item2 = modelFormItems.value[1];
+  item2.default = formInline[item2.field];
+  modelFormRef.value?.ruleFormRef?.validateField('qualityModelGuidsByGroup');
+  let guids = selectModelsByGroup.value.map((m: any) => m.guid);
+  getModelCountListData(guids);
+  getModelRuleCountListData(guids);
+  modelsByGroupDialogVisible.value = false;
+}
+
+const handleModelByGroupLeftCheckedChange = (nodeObj, fromCheckAll, checked, fromTree, filterFrom, leafChecked) => {
+  if (nodeObj.children?.length && (nodeObj.children?.length) && !checked && leafChecked) {
+    //全选变半选
+    return;
+  }
+  if (filterFrom && nodeObj.label.indexOf(filterFrom) === -1) {
+    return;
+  }
+  let nodeId = nodeObj.guid;
+  let index = dsByGroupToTreeData.value.findIndex((t) => t.guid === nodeId);
+  if (checked) {
+    index === -1 && dsByGroupToTreeData.value.push(nodeObj);
+  } else {
+    if (index > -1) {
+      dsByGroupToTreeData.value.splice(index, 1);
+    }
+  }
+}
+
+/** 切换了分组，清空表选择 */
+const handleSelectGroupChange = (val) => {
+  dsByGroupToTreeData.value = [];
+}
+
+/** 规则设置对话框 */
+const ruleSettingDialogVisible = ref(false);
+
+/** 记录根据模型表查出的表格数据。 */
+const modelRulesTableData = ref([]);
+
+/** 指定模型表对应的规则设置表格。 */
+const modelRulesTableInfo: any = ref({
+  id: 'rule-model-table',
+  loading: false,
+  minPanelHeight: '200px',
+  minHeight: '200px',
+  height: '100%',
+  nodeKey: 'guid',
+  multiple: true,
+  selectable: !isDetail.value,
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "表名", field: "name", width: 140 },
+    { label: "规则名称", field: "ruleConfName", width: 140 },
+    { label: "规则大类", field: "largeCategoryName", width: 140 },
+    { label: "规则小类", field: "smallCategoryName", width: 140 },
+    { label: "规则类型", field: "ruleName", width: 140 },
+    { label: "字段", field: "ruleField", width: 140 },
+  ],
+  data: modelRulesTableData.value,
+  showPage: false,
+  actionInfo: {
+    show: false
+  }
+});
+
+const modelRuleSelectedRows: any = ref([]);
+
+const handleModelRulesSelectionChange = (val) => {
+  modelRuleSelectedRows.value = val;
+}
+
+/** 取消规则设置对话框。 */
+const cancelRuleSettingDialog = () => {
+  ruleSettingDialogVisible.value = false;
+}
+
+/** 提交规则设置对话框。 */
+const submitRuleSetting = () => {
+  if (!modelRuleSelectedRows.value?.length) {
+    ElMessage.error('质量规则集至少选择一个规则');
+    return;
+  }
+  let oldLen = ruleWeightData.value.length;
+  // 跟原始规则对比，未勾选的规则，需要同步将规则数量减少。
+  let selectRows = modelRuleSelectedRows.value.slice(0);
+  currTableData.value.modelRuleConfs.forEach(rule => {
+    let index = selectRows.findIndex(s => s.guid == rule.guid)
+    if (index > -1) {
+      selectRows.splice(index, 1);
+      return;
+    }
+    // 取消选中了。总量要减1.
+    let dIndex = ruleWeightData.value.findIndex(r => r.largeCategory == rule.largeCategory);
+    if (dIndex > -1) {
+      let d = ruleWeightData.value[dIndex];
+      d.ruleCount--;
+      if (d.ruleCount == 0) {
+        ruleWeightData.value.splice(dIndex, 1);
+      }
+      currTableData.value.ruleCount--;
+      currTableData.value.largeCategoryNum[rule.largeCategory]--;
+      if (!currTableData.value.largeCategoryNum[rule.largeCategory]) {
+        delete currTableData.value.largeCategoryNum[rule.largeCategory];
+      }
+    }
+  });
+  selectRows.forEach(s => {
+    let d = ruleWeightData.value.find(r => r.largeCategory == s.largeCategory);
+    currTableData.value.ruleCount++;
+    if (!d) {
+      let info = {
+        largeCategory: s.largeCategory,
+        largeCategoryName: s.largeCategoryName,
+        ruleCount: 1,
+      };
+      ruleWeightData.value.push(info);
+    } else {
+      d.ruleCount++;
+    }
+    if (!currTableData.value.largeCategoryNum[s.largeCategory]) {
+      currTableData.value.largeCategoryNum[s.largeCategory] = 1;
+    } else {
+      currTableData.value.largeCategoryNum[s.largeCategory]++;
+    }
+  });
+  //http://test.csylcloud.com:8380/browse/WZL-529
+  if (ruleWeightData.value.length == 1) {//只剩一条
+    ruleWeightData.value[0].ruleLargeWeight = changeNum(100, 2, true);
+  } else if (oldLen == 1 && ruleWeightData.value.length > 1) { //原始一条，现在多条
+    let v = changeNum(100 / ruleWeightData.value.length, 2, true);
+    ruleWeightData.value.forEach(d => d.ruleLargeWeight = v);
+  }
+  // 最后剩余的selectRows要加在总量中。
+  currTableData.value.modelRuleConfGuids = modelRuleSelectedRows.value?.map(r => r.guid);
+  currTableData.value.modelRuleConfs = modelRuleSelectedRows.value;
+  ruleSettingDialogVisible.value = false;
+}
+
+const selectSubjectTables = computed(() => {
+  let v = modelFormRef.value?.formInline;
+  if (!v) {
+    return [];
+  }
+  if (v.planType === 1) {
+    if (planGuid && !treeSelectNode.value) { // 编辑，可能没有treeSelectNode。解决WZL-545问题。
+      let tInfo = planDetailInfo.value.modelCount?.[0];
+      return (!v.qualityModelGuid || !tInfo) ? [] : [{
+        name: tInfo.modelName,
+        groupName: tInfo.modelGroupName,
+        guid: tInfo.modelGuid,
+        parentGuid: tInfo.modelGroupGuid,
+        subjectGuid: tInfo.subjectGuid
+      }];
+    }
+    return v.qualityModelGuid ? [treeSelectNode.value] : [];
+  }
+  if (v.planType === 3) {
+    return selectModelsByGroup.value;
+  }
+  return selectModels.value;
+});
+
+/** 记录分组json的过滤条件。最后提交时需要转化到table里。 */
+const batchFiltersValue: any = ref({});
+
+const batchFiltersValueChange = (value) => {
+  batchFiltersValue.value = value;
+}
+
+</script>
+
+<template>
+  <div class="container_wrap full" v-loading="fullscreenLoading">
+    <div class="content_main">
+      <div class="top_tool_wrap">
+        <StepBar :steps-info="stepsInfo" />
+      </div>
+      <div class="operator_panel_wrap" v-show="step == 0">
+        <div class="operator_panel is-block">
+          <div class="panel_title">
+            <div class="title_text">
+              <span>1.1选择模型</span>
+              <span class="tips_text">选择质量规则集，会带出模型下所有启用状态下的规则</span>
+            </div>
+          </div>
+          <div class="panel_content">
+            <div class="form_panel">
+              <Form ref="modelFormRef" :readonly="isDetail" :itemList="modelFormItems" formId="edit-standard-form"
+                :rules="modelFormRules" col="col3" @btnClick="btnFormClick" @selectChange="selectChange"
+                @treeSelectLoad="modelFormTreeSelectLoad" @treeSelectNodeChange="modelFormTreeSelectNodeChange" />
+            </div>
+          </div>
+        </div>
+        <div class="operator_panel is-block">
+          <div class="panel_title">
+            <div class="title_text">
+              <span>1.2选择规则</span>
+              <span class="tips_text">根据表选择需要执行的规则，不需要的执行规则选择删除</span>
+            </div>
+          </div>
+          <div class="panel_content_rule">
+            <div class="tools_btns">
+              <el-button type="primary" @click="handleFiltersAdd">批量配置过滤条件</el-button>
+              <span class="tips_text">批量给表添加质检数据范围，不需要写where关键字，支持函数。未填写默认质检全部数据。</span>
+            </div>
+            <Table :tableInfo="ruleModelTableInfo" @tableBtnClick="tableBtnClick" />
+          </div>
+        </div>
+        <div class="operator_panel is-block">
+          <div class="panel_title">
+            <div class="title_text">
+              <span>1.3设置权重</span>
+              <span class="tips_text">选择需要执行的规则，不需要的执行规则选择删除</span>
+            </div>
+          </div>
+          <div class="panel_content_weight">
+            <el-table ref="ruleWeightTableRef" v-loading="ruleWeightDataLoading" :data="ruleWeightData" height="100%"
+              :highlight-current-row="true" stripe tooltip-effect="light" border
+              :style="{ height: '100%', width: 'auto', 'max-width': '100%', display: 'inline-block' }">
+              <el-table-column prop="largeCategoryName" label="规则大类" width="150px" align="left" show-overflow-tooltip>
+              </el-table-column>
+              <el-table-column prop="ruleCount" label="规则数量" width="150px" header-align="right" align="right"
+                show-overflow-tooltip>
+              </el-table-column>
+              <el-table-column prop="ruleLargeWeight" label="规则权重(总分100)" width="200px"
+                :align="isDetail ? 'right' : 'left'" show-overflow-tooltip>
+                <template #default="scope">
+                  <el-input v-if="!isDetail" v-model.trim="scope.row['ruleLargeWeight']" placeholder="请输入"
+                    @change="(val) => inputWeightChange(val, scope.row)"
+                    @input="(val) => inputEventWeightChange(val, scope.row)"></el-input>
+                  <span v-else>{{ scope.row['ruleLargeWeight'] }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="operator_panel_wrap" v-show="step == 1">
+        <div class="operator_panel is-block">
+          <div class="panel_title">
+            <div class="title_text">
+              <span>2.1任务调度</span>
+              <!-- <span class="tips_text">选择质量规则集，会带出模型下所有启用状态下的规则</span> -->
+            </div>
+          </div>
+          <div class="panel_content">
+            <div class="form_panel form_task">
+              <Form ref="taskFormRef" :readonly="isDetail" :itemList="taskFormItems" formId="edit-standard-form"
+                :rules="taskFormRules" @switchChange="handleTaskCreateChange" @scheduleChange="scheduleChange"
+                @btnClick="taskFormBtnClick" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_tool_wrap">
+      <template v-if="step == 0">
+        <el-button @click="cancelPlan">取消</el-button>
+        <el-button type="primary" @click="changeStep(2)">下一步</el-button>
+      </template>
+      <template v-else>
+        <el-button @click="cancelPlan">取消</el-button>
+        <el-button type="primary" @click="changeStep(1)">上一步</el-button>
+        <el-button v-if="!isDetail" type="primary" v-preReClick @click="save">保存</el-button>
+      </template>
+    </div>
+
+    <!-- 以数据库为粒度的选择表对话框 -->
+    <el-dialog v-model="modelsDialogVisible" title="选择质量规则集" width="660" :modal="true" :close-on-click-modal="false"
+      destroy-on-close align-center>
+      <div style="height:450px">
+        <TreeTransfer :readOnly="isDetail" mode="transfer" :title="['可选表', '已选表']" :defaultProps="{
+    label: 'name',
+    value: 'guid',
+    isLeaf: 'isLeaf'
+  }" :from-tree-data-loading="dsFromTreeDataLoading" :from_data="dsFromTreeData" :to_data="dsToTreeData"
+          checkOnClickNode :from_checked_all="false" node_key="guid" :transferOpenNode="true" width="100%"
+          @left-check-change="handleModelLeftCheckChange" lazy :lazyFn="loadNode" height="100%">
+          <template v-slot:from>
+            <el-select style="width: 100%;margin-bottom: 8px;" v-model="databaseInfo" placeholder="请选择数据库" filterable
+              :disabled="isDetail" @change="handleSelectDsModelChange" value-key="guid">
+              <el-option v-for="opt in databaseList" :key="opt['guid']" :label="opt['name']" :value="opt['guid']" />
+            </el-select>
+          </template>
+        </TreeTransfer>
+      </div>
+      <template #footer v-if="!isDetail">
+        <div class="dialog-footer">
+          <el-button @click="cancelModelDialog" v-preReClick>取消</el-button>
+          <el-button @click="submitModels" type="primary" v-preReClick>确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 以分组为粒度的选择表对话框 -->
+    <el-dialog v-model="modelsByGroupDialogVisible" title="选择质量规则集" width="660" :modal="true"
+      :close-on-click-modal="false" destroy-on-close align-center>
+      <div style="height:450px">
+        <TreeTransferChecked class="one-level" mode="transfer" :title="['可选表', '已选表']" :defaultProps="{
+    label: 'name',
+    value: 'guid'
+  }" :from-tree-data-loading="dsByGroupFromTreeDataLoading" :from_data="dsByGroupFromTreeData" checkOnClickNode
+          :to_data="dsByGroupToTreeData" node_key="guid" :transferOpenNode="true" width="100%"
+          :defaultCheckedKeys="dsByGroupToTreeData.map(d => d.guid)" :rootPidValue="''"
+          @left-check-changed="handleModelByGroupLeftCheckedChange" height="100%">
+          <template v-slot:from>
+            <el-select style="width: 100%;margin-bottom: 8px;" v-model="dsSelectGroup" placeholder="请选择分组" filterable
+              :disabled="isDetail" @change="handleSelectGroupChange" value-key="guid">
+              <el-option v-for="opt in qualityGroups" :key="opt['guid']" :label="opt['name']" :value="opt['guid']" />
+            </el-select>
+          </template>
+        </TreeTransferChecked>
+      </div>
+      <template #footer v-if="!isDetail">
+        <div class="dialog-footer">
+          <el-button @click="cancelModelByGroupDialog">取消</el-button>
+          <el-button @click="submitModelsByGroup" type="primary">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 规则设置对话框 -->
+    <el-dialog v-model="ruleSettingDialogVisible" title="规则设置" width="800" :modal="true" :close-on-click-modal="false"
+      destroy-on-close align-center>
+      <div style="height:400px">
+        <Table ref="modelRulesTableRef" :class="isDetail ? 'disable-table' : ''" :tableInfo="modelRulesTableInfo"
+          @table-selection-change="handleModelRulesSelectionChange" />
+      </div>
+      <template #footer v-if="!isDetail">
+        <div class="dialog-footer">
+          <el-button @click="cancelRuleSettingDialog">取消</el-button>
+          <el-button @click="submitRuleSetting" type="primary">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <filtersSettingBatch ref="batchFilterDialogRef" :subject-tables="selectSubjectTables" :readOnly="isDetail"
+      @filtersValueChange="batchFiltersValueChange"></filtersSettingBatch>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top_tool_wrap {
+  width: 100%;
+  height: 72px;
+  margin: 8px 0 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :deep(.el-steps) {
+    width: 30%;
+  }
+}
+
+.content_main {
+  height: calc(100% - 40px);
+  padding: 0 16px;
+  overflow: hidden auto;
+
+  :deep(.table_panel_wrap) {
+    &.full {
+      height: auto;
+    }
+
+    .table_panel {
+      width: 100%;
+      min-height: unset;
+    }
+  }
+
+  .operator_panel_wrap {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    height: auto;
+
+    :deep(.el-button) {
+      &.is-text {
+        height: auto;
+        padding: 0;
+      }
+    }
+
+    .operator_panel {
+      width: calc(50% - 5px);
+      height: auto;
+      border: 1px solid #d9d9d9;
+      margin-bottom: 12px;
+      overflow: hidden;
+
+      &.is-block {
+        width: 100%;
+      }
+
+      .panel_title {
+        height: 44px;
+        padding: 0 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: var(--el-color-regular);
+        font-weight: 600;
+        border-bottom: 1px solid #d9d9d9;
+        background-color: #fafafa;
+
+        .tips_text {
+          font-size: 14px;
+          color: #999;
+          font-weight: normal;
+          margin-left: 8px;
+        }
+      }
+
+      .panel_content {
+        height: calc(100% - 42px);
+
+        >div {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .form_panel {
+          padding: 8px 16px;
+          overflow: hidden auto;
+        }
+
+        .form_task {
+          width: 60%;
+        }
+
+        .tree_search_input {
+          margin-bottom: 10px;
+        }
+
+        .list_panel {
+          padding: 10px 0;
+          overflow: hidden auto;
+
+          .list_item {
+            height: 32px;
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &:hover {
+              color: var(--g-sub-sidebar-menu-active-color);
+              background-color: var(--g-sub-sidebar-menu-active-bg);
+            }
+          }
+        }
+
+        .table_content_wrap {
+          padding: 16px;
+
+          .tools_form {
+            p {
+              margin-top: 0;
+              margin-bottom: 8px;
+            }
+          }
+        }
+      }
+
+      .panel_content_rule {
+        height: 280px;
+        padding: 12px 16px;
+
+        .table_panel {
+          min-height: 200px;
+          height: calc(100% - 36px) !important;
+        }
+
+        .tools_btns {
+          margin-bottom: 8px;
+
+          .tips_text {
+            margin-left: 8px;
+            font-size: 12px;
+            color: #b2b2b2;
+          }
+        }
+      }
+
+      .panel_content_weight {
+        height: 230px;
+        min-height: 230px;
+        padding: 12px 16px;
+
+        :deep(.el-table) {
+          & td.el-table__cell {
+            padding: 2px 0;
+            height: 36px;
+          }
+        }
+      }
+    }
+
+    .bottm_tools {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fafafa;
+      color: #999;
+      font-size: 14px;
+      border: 1px dashed var(--el-border-color-regular);
+      margin-bottom: 12px;
+
+      >span {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.bottom_tool_wrap {
+  height: 40px;
+  padding: 0 16px;
+  border-top: 1px solid #d9d9d9;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+:deep(.disable-table) {
+  .el-table {
+    .el-table__header-wrapper .el-checkbox {
+      display: none
+    }
+  }
+}
+</style>

+<script lang="ts" setup name="filtersSettingBatch">
+import { ref } from "vue";
+import TreeTransferChecked from "@/components/TreeTransferChecked/index.vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Delete } from "@element-plus/icons-vue";
+import {
+	batchValidateSubjectTableRule,
+} from '@/api/modules/dataQuality';
+import { cloneDeep } from 'lodash-es'
+
+const { proxy } = getCurrentInstance() as any;
+
+/** 记录每个分组对应的表信息和过滤条件 */
+interface GroupFilterTableInfo {
+	tables?: Array<any>;
+	filter?: string;
+	checked?: boolean;
+}
+
+const props = defineProps({
+	subjectTables: {
+		type: Array<any>,
+		default: [],
+	},
+	readOnly: {
+		type: Boolean,
+		default: false,
+	}
+});
+
+const emits = defineEmits(["filtersValueChange"]);
+
+/** 批量添加过滤条件对话框。 */
+const filterDialogVisible = ref(false);
+
+/** 打开对话框时过滤条件的值。 */
+const filterPropsValue: Ref<GroupFilterTableInfo> = ref({});
+
+/** 记录分组数组列表。 */
+const groupData: any = ref([]);
+
+/** 过滤条件初始默认值 */
+let dialogInitValue: any = ref({ 1: { tables: [], filter: '', checked: false } });
+
+/** json 分组对应的表信息过滤条件。 */
+const groupFilterTables: any = computed(() => {
+	let keys = Object.keys(filterPropsValue.value);
+	return keys.length ? filterPropsValue.value : dialogInitValue.value;
+});
+
+const selectGroupIndex = ref(0);
+
+const groupItemClick = (item, index) => {
+	selectGroupIndex.value = index;
+}
+
+/** 添加新的分组 */
+const handleAddGroup = () => {
+	let len = groupData.value.length;
+	let guid = 1;
+	if (len) {
+		let lastId = parseInt(groupData.value[len - 1].guid);
+		guid = lastId + 1;
+	}
+	groupData.value.push({
+		guid: guid,
+		label: `分组${guid}`
+	});
+	selectGroupIndex.value = len;
+	groupFilterTables.value[guid] = { tables: [], filter: '' };
+}
+
+/** 给当前选中的分组选择对应的表 */
+const handleSelectTables = () => {
+	selectTableDialogVisible.value = true;
+	dsFromTreeData.value = props.subjectTables || [];
+	let selectGroup = groupData.value[selectGroupIndex.value];
+	dsToTreeData.value = groupFilterTables.value[selectGroup.guid].tables?.slice(0) || [];
+}
+
+/** 删除选择表 */
+const removeTable = (item, index) => {
+	groupFilterTables.value[groupData.value[selectGroupIndex.value].guid].tables.splice(index, 1);
+}
+
+/** 删除分组 */
+const removeGroup = (item, index) => {
+	let info = groupFilterTables.value[item.guid];
+	if (!info?.tables?.length && !info.filter) {
+		if (selectGroupIndex.value == 0) {
+			selectGroupIndex.value = groupData.value.length == 1 ? -1 : 0;
+		} else if (selectGroupIndex.value >= index) {
+			selectGroupIndex.value--;
+		}
+		groupData.value.splice(index, 1);
+		delete groupFilterTables.value[item.guid];
+		return;
+	} else {
+		ElMessageBox.confirm("该分组下存在表或过滤条件，此操作将永久删除, 是否继续?", "提示", {
+			confirmButtonText: "确定",
+			cancelButtonText: "取消",
+			type: "warning",
+		})
+			.then(() => {
+				if (selectGroupIndex.value == 0) {
+			    selectGroupIndex.value = groupData.value.length == 1 ? -1 : 0;
+		    } else if (selectGroupIndex.value >= index) {
+			    selectGroupIndex.value--;
+		    }
+				groupData.value.splice(index, 1);
+				delete groupFilterTables.value[item.guid];
+				ElMessage({
+					type: "success",
+					message: "删除成功",
+				});
+			})
+			.catch(() => {
+				ElMessage({
+					type: "info",
+					message: "已取消删除",
+				});
+			});
+	}
+}
+
+const handleSqlInputChange = (val) => {
+	let selectGroup = groupData.value[selectGroupIndex.value];
+	groupFilterTables.value[selectGroup.guid].checked = false;
+}
+
+const validateSqlBtnDisable = ref(false);
+
+/** 验证填写的过滤条件 */
+const validateSql = () => {
+	validateSqlBtnDisable.value = true;
+	let selectGroup = groupData.value[selectGroupIndex.value]
+	let enName = selectGroup.label;
+	let tables = groupFilterTables.value[selectGroup.guid].tables;
+	let filter = groupFilterTables.value[selectGroup.guid].filter;
+	if (!filter) {
+		ElMessage.error('请先填写过滤条件再验证sql');
+		return;
+	}
+	if (!tables?.length) {
+		ElMessage.error('请先选择表再验证sql');
+		return;
+	}
+	batchValidateSubjectTableRule(
+		tables.map(t => {
+			return {
+				subjectGuid: t.subjectGuid,
+				condition: filter
+			}
+		})
+	).then((res: any) => {
+		validateSqlBtnDisable.value = false;
+		if (res.code == proxy.$passCode) {
+			let isError = res.data.some(d => d.errInfo);
+			if (isError) {
+				let error = "";
+				res.data.forEach((d, index) => {
+					if (d.errInfo) {
+						error = error ? ';' : error;
+						error = error + '【' + tables[index].name + '】' + d.errInfo;
+					}
+				});
+				ElMessage.error('【' + enName + '】过滤条件验证失败：' + error);
+			} else {
+				groupFilterTables.value[selectGroup.guid].checked = true;
+				ElMessage.success('【' + enName + '】过滤条件验证通过');
+			}
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+}
+
+const submitFilter = () => {
+	let index = 0;
+	for (const group of groupData.value) {
+		let filtersInfo = groupFilterTables.value[group.guid];
+		if (!filtersInfo?.tables.length) {
+			ElMessage.error('请先选择【' + group.label + '】对应的表');
+			selectGroupIndex.value = index;
+			return;
+		}
+		if (!filtersInfo?.filter) {
+			selectGroupIndex.value = index;
+			ElMessage.error('请填写【' + group.label + '】的过滤条件');
+			return;
+		}
+		if (!filtersInfo?.checked) {
+			selectGroupIndex.value = index;
+			ElMessage.error('请验证【' + group.label + '】的过滤条件');
+			return;
+		}
+		index++;
+	}
+	/** 验证有没有分组，验证每个分组的sql是否验证过，验证每个分组的表是否存在。 */
+	emits('filtersValueChange', groupFilterTables.value);
+	filterDialogVisible.value = false;
+}
+
+/** 打开对话框。*/
+const openDialog = (v) => {
+	filterDialogVisible.value = true;
+	dialogInitValue.value = { 1: { tables: [], filter: '', checked: false } };
+	selectGroupIndex.value = 0;
+	filterPropsValue.value = cloneDeep(v);
+	let keys = Object.keys(filterPropsValue.value);
+	groupData.value = keys.length ? keys.map(k => {
+		return {
+			guid: k,
+			label: `分组${k}`
+		}
+	}): [{
+		guid: 1,
+		label: '分组1'
+	}];
+	if (props.subjectTables?.length == 1) {
+		dialogInitValue.value = { 1: { tables: props.subjectTables, filter: '', checked: false } };
+	}
+}
+
+/** 点击对话框取消按钮 */
+const handleCloseFilterDialog = () => {
+	filterDialogVisible.value = false;
+}
+
+
+/** 选择表对话框处理 */
+const selectTableDialogVisible = ref(false);
+
+const dsFromTreeData: any = ref([]);
+
+const dsToTreeData: any = ref([]);
+
+const cancelSelectTableDialog = () => {
+	selectTableDialogVisible.value = false;
+}
+
+const submitSelectTableByGroup = () => {
+	if (!dsToTreeData.value.length) {
+		ElMessage.error('可选表不能为空');
+		return;
+	}
+	// 需要提示是否在别的分组中。
+	let selectGroup = groupData.value[selectGroupIndex.value];
+	let tables = dsToTreeData.value || [];
+	let str = '';
+	tables.forEach(t => {
+		for (const key in groupFilterTables.value) {
+			if (key == selectGroup.guid) {
+				continue
+			}
+			let keyTables = groupFilterTables.value[key].tables || [];
+			if (keyTables.some(kt => (kt.modelName && t.modelName && kt.modelName == t.modelName) || kt.name == t.name)) {
+				str = str + (str ? ';' : '') + `【${t.modelName ?? t.name}】从【分组${key}】中移入【${selectGroup.label}】`;
+			}
+		}
+	});
+	if (!str) {
+		selectTableDialogVisible.value = false;
+		if (dsToTreeData.value.some(d => !groupFilterTables.value[selectGroup.guid].tables?.some(t => t.guid == d.guid))) {
+			groupFilterTables.value[selectGroup.guid].checked = false;
+		}
+		groupFilterTables.value[selectGroup.guid].tables = dsToTreeData.value;
+	} else {
+		ElMessageBox.confirm(
+			"确定将" + str + '?',
+			"提示",
+			{
+				confirmButtonText: "确定",
+				cancelButtonText: "取消",
+				type: "warning",
+			}
+		)
+			.then(() => {
+				tables.forEach(t => {
+					for (const key in groupFilterTables.value) {
+						if (key == selectGroup.guid) {
+							continue
+						}
+						let keyTables = groupFilterTables.value[key].tables || [];
+						let index = keyTables.findIndex(kt => (kt.modelName && t.modelName && kt.modelName == t.modelName) || kt.name == t.name);
+						if (index > -1) {
+							groupFilterTables.value[key].tables.splice(index, 1);
+						}
+					}
+				});
+				selectTableDialogVisible.value = false;
+				if (dsToTreeData.value.some(d => !groupFilterTables.value[selectGroup.guid].tables?.some(t => t.guid == d.guid))) {
+					groupFilterTables.value[selectGroup.guid].checked = false;
+				}
+				groupFilterTables.value[selectGroup.guid].tables = dsToTreeData.value;
+			})
+			.catch(() => {
+				ElMessage({
+					type: "info",
+					message: "已取消",
+				});
+			});
+	}
+}
+
+const handleModelLeftCheckedChange = (nodeObj, fromCheckAll, checked, fromTree, filterFrom, leafChecked) => {
+	if (filterFrom && nodeObj.label.indexOf(filterFrom) === -1) {
+		return;
+	}
+	let nodeId = nodeObj.guid;
+	let index = dsToTreeData.value.findIndex((t) => t.guid === nodeId);
+	if (checked) {
+		index === -1 && dsToTreeData.value.push(nodeObj);
+	} else {
+		if (index > -1) {
+			dsToTreeData.value.splice(index, 1);
+		}
+	}
+}
+
+defineExpose({
+	openDialog
+});
+
+</script>
+
+<template>
+	<el-dialog v-model="filterDialogVisible" title="批量配置过滤条件" width="650" :modal="true" :close-on-click-modal="false"
+		destroy-on-close align-center @close="handleCloseFilterDialog">
+		<div class="filter-dialog-content">
+			<div class="group-list">
+				<div class="field-title">
+					<span>分组</span>
+					<el-button v-if="!props.readOnly" @click="handleAddGroup" link v-preReClick>新增</el-button>
+				</div>
+				<div class="list_unit">
+					<div class="list_item" :class="{ active: index == selectGroupIndex }" v-for="(item, index) in groupData"
+						@click="groupItemClick(item, index)">
+						<span>{{ item.label }}</span>
+						<!-- 删除按钮 -->
+						<el-button type="primary" text :icon="Delete" @click.stop="removeGroup(item, index)"
+							v-preReClick></el-button>
+					</div>
+				</div>
+			</div>
+			<div class="table-list" v-if="selectGroupIndex >= 0">
+				<div class="field-title">
+					<span>表</span>
+					<el-button v-if="!props.readOnly" @click="handleSelectTables" link>选择表</el-button>
+				</div>
+				<div class="list_unit">
+					<div class="list_item"
+						v-for="(item, index) in (groupFilterTables[groupData[selectGroupIndex].guid].tables || [])">
+						<span>{{ item.name }}</span>
+						<el-button type="primary" text :icon="Delete" @click.stop="removeTable(item, index)"
+							v-preReClick></el-button>
+					</div>
+				</div>
+				<div class="filter-edit">
+					<div class="field-title">
+						<span>过滤条件</span>
+						<el-button @click="validateSql" link v-preReClick>验证</el-button>
+					</div>
+					<el-input v-model="groupFilterTables[groupData[selectGroupIndex].guid].filter" ref="sqlInputRef"
+						:disabled="props.readOnly" type="textarea" :autosize="true" resize="none"
+						@change="handleSqlInputChange"></el-input>
+				</div>
+			</div>
+		</div>
+		<template #footer v-if="!props.readOnly">
+			<div class="dialog-footer">
+				<el-button @click="handleCloseFilterDialog">取消</el-button>
+				<el-button @click="submitFilter" type="primary">确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+	<!-- 选择表对话框 -->
+	<el-dialog v-model="selectTableDialogVisible" title="选择表" width="600" :modal="true" :close-on-click-modal="false"
+		destroy-on-close align-center>
+		<div style="height:400px">
+			<TreeTransferChecked class="one-level" mode="transfer" :title="['可选表', '已选表']" :from_data="dsFromTreeData" checkOnClickNode
+				:to_data="dsToTreeData" :default-checked-keys="dsToTreeData?.map(d => d.guid)" :defaultProps="{
+		label: 'name',
+		value: 'guid'
+	}" node_key="guid" :transferOpenNode="true" width="100%" height="100%" :rootPidValue="''"
+				@left-check-changed="handleModelLeftCheckedChange"></TreeTransferChecked>
+		</div>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="cancelSelectTableDialog">取消</el-button>
+				<el-button @click="submitSelectTableByGroup" type="primary">确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.filter-dialog-content {
+	display: flex;
+	flex-direction: row;
+	margin: -8px -24px;
+	height: 460px;
+
+	.group-list {
+		width: 200px;
+		border-right: 1px solid #d9d9d9;
+	}
+
+	.table-list {
+		width: calc(100% - 200px);
+		border-right: 1px solid #d9d9d9;
+	}
+
+	.list_unit {
+		height: 200px;
+		border-top: 1px solid #d9d9d9;
+		overflow-y: auto;
+
+		.list_item {
+			height: 32px;
+			font-size: 14px;
+			color: #212121;
+			line-height: 32px;
+			padding-left: 8px;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			padding-right: 8px;
+			cursor: pointer;
+
+			&.active {
+				background: #EBF6F7;
+			}
+
+			.el-button {
+				display: none;
+			}
+
+			&:hover {
+				.el-button {
+					display: inline-flex;
+				}
+
+				.el-button.is-text:not(.is-disabled):hover,
+				.el-button.is-text:not(.is-disabled):focus {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	.filter-edit {
+		height: calc(100% - 232px);
+		border-top: 1px solid #d9d9d9;
+	}
+
+	.field-title {
+		height: 32px;
+		font-size: 14px;
+		color: #666;
+		line-height: 32px;
+		padding-left: 8px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		padding-right: 8px;
+	}
+
+	:deep(.el-textarea) {
+		height: calc(100% - 32px);
+		padding: 0px 8px 8px 8px;
+
+		.el-textarea__inner {
+			min-height: 100% !important;
+			border-radius: 0px;
+		}
+	}
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: qualityAnalysis
+</route>
+
+<script lang="ts" setup name="qualityAnalysis">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from "element-plus";
+import TableTools from '@/components/Tools/table_tools.vue'
+import Table from '@/components/Table/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
+import { useRouter } from "vue-router";
+import {
+  getQualityWordList,
+  deleteQualityWord,
+  addQualityWord,
+  updateQualityWord,
+  executeReport,
+  stateChange
+} from '@/api/modules/dataQualityWord';
+import {
+  getPlanList
+} from '@/api/modules/dataQualityAssess';
+import  {
+  getCronExecTime
+} from '@/api/modules/queryService';
+import { TableColumnWidth } from '@/utils/enum';
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const searchItemList = ref([
+  {
+    type: 'input',
+    label: '',
+    maxlength: 50,
+    field: 'analysisReportName',
+    default: '',
+    placeholder: '报告名称',
+    clearable: true
+  }
+])
+
+const currTableData: any = ref<Object>({});
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  analysisReportName: '', //报告名称
+});
+const selectRowData = ref([])
+const tableInfo = ref({
+  id: "word-manage-table",
+  //  multiple: true,
+  loading: false,
+  fields: [
+    { label: "报告名称", field: "analysisReportName", width: 160 },
+    { label: "评估方案名称", field: "planName", width: 140 },
+    {
+      label: "方案类型", field: "planType", width: 90, getName: (scope) => {
+        let planType = scope.row.planType;
+        return planType == 1 ? '表' : (planType == 2 ? '数据库' : '分组');
+      }
+    },
+    { label: "质量规则集", field: "qualityModelName", width: 150 },
+    { label: "质量评分", field: "qualityScore", width: 100, align: 'right' },
+    {
+      label: '状态', field: 'state', type: 'switch', activeText: '上线', inactiveText: '下线', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center', isDisabled: (scope) => {
+        return scope.row.isPlanGen == 'Y';
+      },toolTipContent:"质量评估方案生成的报告禁止上下线、编辑",columClass:"text_btn" 
+    },
+    { label: "执行状态", field: "execState", type: 'tag', width: 100, align: 'center' },
+    {
+      label: "执行周期", field: "execCycle", width: TableColumnWidth.EXECCYCLE
+    },
+    { label: "下次执行时间", field: "nextExecTime", width: TableColumnWidth.DATETIME, },
+    { label: "最后执行时间", field: "lastExecTime", width: TableColumnWidth.DATETIME, },
+    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
+    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME, },
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 300,
+    fixed: 'right',
+    btns: (scope) => {
+      const row = scope.row
+      let btnsArr: any = [
+        { label: "查看报告", value: "reportView", disabled: row['execState'] != 2 },
+        { label: "编辑", value: "edit", disabled: row.execState === 1 || row.isExecute || scope.row.isPlanGen == 'Y' || scope.row.state == 1 }];
+      if (row.isExecute) {
+        btnsArr.splice(2, 0, { label: "执行中...", value: "execute", disabled: true })
+      } else {
+        btnsArr.splice(2, 0, { label: "手动执行", value: "execute", disabled: row.execState === 1 || scope.row.state == 0 })
+      }
+      btnsArr.push({ label: "执行日志", value: "path_log", disabled: !row['execState'] });
+      btnsArr.push({ label: "删除", value: "delete", disabled: row.isExecute || row.execState === 1 || scope.row.isPlanGen == 'Y' || scope.row.state == 1 });
+      return btnsArr
+    }
+  }
+});
+
+/** 评估方案选择列表。 */
+const planList: any = ref([]);
+
+const getAllPlanListPromise: any = ref(null);
+
+onActivated(() => {
+  // 新建分析报告时应该只能选择上线的方案。
+  getAllPlanListPromise.value = getPlanList({ pageSize: -1, pageIndex: 1, state: 1 }).then((res: any) => {
+    getAllPlanListPromise.value = null;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      planList.value = data.records || [];
+      formItems.value[0].options = planList.value;
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  });
+})
+
+/** 新建编辑方案的对话框对象。 */
+const wordDialogRef = ref();
+
+const formItems = ref([
+  {
+    label: '评估方案名称',
+    type: 'select',
+    placeholder: '请选择',
+    field: 'planGuid',
+    default: '',
+    options: planList.value,
+    props: {
+      value: 'guid',
+      label: 'planName'
+    },
+    clearable: true,
+    filterable: true,
+    required: true,
+    disabled: false,
+  }, {
+    label: '报告名称',
+    type: 'input',
+    maxlength: 50,
+    placeholder: '请输入',
+    field: 'analysisReportName',
+    default: '',
+    clearable: true,
+    required: true
+  }, {
+    label: '报告保留期数(期)',
+    type: 'input',
+    inputType: 'integerNumber',
+    placeholder: '请输入',
+    field: 'reserveCycle',
+    default: 365,
+    max: 1000,
+    min: 1,
+    clearable: true,
+    required: false
+  },{
+    label: '是否上线',
+    type: 'switch',
+    field: 'state',
+    default: 0,
+    activeText:"上线",
+    inactiveText:"下线",
+    activeValue: 1,
+    inactiveValue: 0
+  },{
+    label: '执行周期',
+    type: 'input-popover-panel',
+    placeholder: '',
+    field: 'execCycle',
+    teleported: false,
+    default: "",
+    append: {
+      btn: { label: '执行时间', value: 'cron' }
+    },
+    required: true,
+    block: true
+  },
+  {
+    label: '接下来五次执行时间',
+    type: 'textarea',
+    placeholder: '执行时间',
+    field: 'zxzq',
+    clearable: true,
+    required: false,
+    rows: 5,
+    block: true,
+    visible: true,
+    readonly: true
+  },
+])
+
+const formRules = ref({
+  planGuid: [{ required: true, trigger: 'change', message: "请填写评估方案" }],
+  analysisReportName: [{ required: true, trigger: 'blur', message: "请填写报告名称" }],
+  execCycle: [
+    {
+      required: true,
+      message: "请设置执行周期",
+      trigger: "blur",
+    },
+  ]
+})
+
+const dialogInfo = ref({
+  visible: false,
+  size: 700,
+  direction: "column",
+  header: {
+    title: "新建",
+  },
+  type: '',
+  contents: [
+    {
+      type: "form",
+      title: "",
+      formInfo: {
+        id: "word-edit-form",
+        items: formItems.value,
+        rules: formRules.value
+      },
+    }
+  ],
+  footer: {
+    visible: true,
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "确定", value: "submit" },
+    ],
+  },
+});
+
+const toSearch = (val: any, clear: boolean = false) => {
+  if (clear) {
+    page.value.analysisReportName = '';
+  } else {
+    page.value.analysisReportName = val.analysisReportName;
+  }
+  page.value.curr = 1;
+  getTableData();
+};
+
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getQualityWordList({ pageIndex: page.value.curr, pageSize: page.value.limit, analysisReportName: page.value.analysisReportName }).then((res: any) => {
+    tableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      tableInfo.value.data = data.records || []
+      tableInfo.value.page.limit = data.pageSize
+      tableInfo.value.page.curr = data.pageIndex
+      tableInfo.value.page.rows = data.totalRows
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+};
+
+const tableSelectionChange = (val) => {
+  selectRowData.value = val.map((item) => item.guid);
+};
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  getTableData();
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+
+  if (type == "edit") {
+    dialogInfo.value.header.title = "编辑分析报告";
+    dialogInfo.value.type = type
+    dialogInfo.value.visible = true;
+    setFormItems(row);
+    formItems.value[0].disabled = true;
+    formItems.value[0].options = [{
+      guid: row.planGuid,
+      planName: row.planName
+    }]
+  } else if (type === 'reportView') {
+    router.push({
+      name: 'analysisReport',
+      query: {
+        planGuid: row.planGuid,
+        reportExecGuid: row.reportExecGuid,
+        name: row.analysisReportName,
+      }
+    });
+  } else if (type == 'path_log') {
+    router.push({
+      name: 'analysisLog',
+      query: {
+        guid: row.guid,
+        name: row.analysisReportName
+      }
+    });
+  } else if (type == "execute") {
+    row.isExecute = true
+    const guid = row.guid
+    executeReport(guid).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getTableData();
+        ElMessage({
+          type: "success",
+          message: "手动执行提交成功",
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+      row.isExecute = false
+    }).catch(() => {
+      row.isExecute = false
+    })
+  } else if (type == 'delete') {
+    open("此操作将永久删除该分析报告，是否继续？", "warning");
+  } else if(type=='state') {
+   
+  }
+};
+const tableSwitchBeforeChange = (scope, field, callback) => {
+const row = scope.row
+  const msg = `确定【${scope.row[field] == 1 ? '下线' : '上线'}】该方案吗?`;
+  ElMessageBox.confirm(
+    msg,
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    const guid = row.guid
+    const state1 = row.state
+    stateChange({guid,state:state1===1?0:1}).then((res:any)=>{
+      if(res.code===proxy.$passCode){
+         ElMessage.success(`${scope.row[field] == 1 ? '下线' : '上线'}成功`)
+         getTableData();
+      } else {
+        ElMessage.error(res.msg)
+      }
+    })
+  }).catch(() => {
+    callback(false)
+  })
+}
+const open = (msg, type, isBatch = false) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    let guids = [currTableData.value.guid]
+    if (isBatch) {
+      guids = selectRowData.value
+    }
+    deleteQualityWord(guids).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getTableData();
+        ElMessage({
+          type: "success",
+          message: "删除成功",
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    });
+  });
+};
+
+/** 打开新建报告的编辑框 */
+const handleCreateNewWord = () => {
+  if (getAllPlanListPromise.value) {
+    getAllPlanListPromise.value.then(() => {
+      setFormItems(null);
+      formItems.value[0].disabled = false;
+      formItems.value[0].options = planList.value;
+      dialogInfo.value.header.title = '新建分析报告'
+      dialogInfo.value.type = 'add'
+      dialogInfo.value.footer.visible = true
+      dialogInfo.value.visible = true
+    });
+  } else {
+    setFormItems(null);
+    formItems.value[0].disabled = false;
+    formItems.value[0].options = planList.value;
+    dialogInfo.value.header.title = '新建分析报告'
+    dialogInfo.value.type = 'add'
+    dialogInfo.value.footer.visible = true
+    dialogInfo.value.visible = true
+  }
+};
+
+const batching = (type) => {
+  if (type == 'delete') {
+    if (selectRowData.value.length == 0) {
+      ElMessage({
+        type: 'error',
+        message: '请选择需要删除的报告',
+      })
+      return
+    }
+    open("此操作将永久删除，是否继续？", "warning", true);
+  }
+};
+
+const dialogBtnClick = (btn, info) => {
+  if (btn.value == 'submit') {
+    if (!info.reserveCycle && info.reserveCycle !== 0) {
+      info.reserveCycle = null;
+    }
+    if (dialogInfo.value.type == 'add') {
+      addQualityWord(info).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          page.value.curr = 1;
+          getTableData();
+          ElMessage({
+            type: 'success',
+            message: '添加质量分析报告成功'
+          })
+          dialogInfo.value.visible = false;
+        } else {
+          ElMessage({
+            type: 'error',
+            message: res.msg,
+          })
+        }
+      })
+    } else {
+      const params = { ...info };
+      params.guid = currTableData.value.guid;
+      updateQualityWord(params).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          toSearch({analysisReportName:page.value.analysisReportName});
+          ElMessage({
+            type: 'success',
+            message: '修改成功'
+          })
+          dialogInfo.value.visible = false;
+        } else {
+          ElMessage({
+            type: 'error',
+            message: res.msg,
+          })
+        }
+      })
+    }
+  } else if (btn.value == 'cancel') {
+    dialogInfo.value.visible = false;
+  } else if (btn.value = 'cron') {
+    let vInfo = wordDialogRef.value.dialogFormRef[0].formInline;
+    if (!vInfo.execCycle) {
+      return;
+    }
+    getCronExecTime(vInfo.execCycle).then((res: any) => {
+      if (res?.length) {
+        vInfo.zxzq = res.join('\n');
+        setFormItems(vInfo);
+      } else {
+        ElMessage({
+          type: 'error',
+          message: res.msg,
+        })
+      }
+    })
+  }
+};
+
+const dialogSelectChange = (val, row, info) => {
+  if (row.field == 'planGuid') {
+    formItems.value[0].default = val;
+    formItems.value[1].default = planList.value.find(p => p.guid == val)?.planName || "";
+  }
+}
+
+const scheduleChange = (val, rowValue) => {
+  setFormItems(rowValue);
+//  formItems.value[3].default = val
+}
+
+const setFormItems = (row) => {
+  formItems.value.map(item => {
+    if (item.field == 'reserveCycle') {
+      item.default = row ? row[item.field] : 365;
+    } else {
+      item.default = row ? row[item.field] : ''
+    }
+  })
+}
+
+onBeforeMount(() => {
+})
+
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_tool_wrap has_search">
+      <TableTools :searchItems="searchItemList" searchId="word-search" @search="toSearch" />
+      <div class="tools_btns">
+        <el-button type="primary" @click="handleCreateNewWord">新建分析报告</el-button>
+        <!-- <el-button @click="batching('delete')" v-preReClick>批量删除</el-button> -->
+      </div>
+    </div>
+    <div class="table_panel_wrap">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
+        @tablePageChange="tablePageChange" @tableSwitchBeforeChange="tableSwitchBeforeChange" />
+    </div>
+
+    <Dialog ref="wordDialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" @selectChange="dialogSelectChange"
+      @scheduleChange="scheduleChange" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.table_tool_wrap {
+  width: 100%;
+  height: 84px !important;
+  padding: 0 8px;
+
+  .tools_btns {
+    padding: 8px 0 0;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 84px);
+  padding: 8px 8px 0;
+}
+</style>

+<route lang="yaml">
+  name: qualityAssess
+</route>
+
+<template>
+  <div class="container_wrap flex">
+    <div class="box_left aside_wrap">
+      <div class="aside_title">质量评估方案列表</div>
+      <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
+    </div>
+    <div class="box_right">
+      <div class="table_tool_wrap">
+        <TableTools :searchItems="searchItemList" :searchId="'user-manage-search'" @search="toSearch" />
+        <div class="tools_btns">
+          <el-button type="primary" @click="newCreatePlan" :disabled="treeSelectItem.guid == 4"
+            v-preReClick>新建方案</el-button>
+        </div>
+      </div>
+      <div class="table_panel_wrap">
+        <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
+          @tableSwitchBeforeChange="tableSwitchBeforeChange" @tablePageChange="tablePageChange" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="qualityAssess">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from "element-plus";
+import Tree from "@/components/Tree/index.vue";
+import TableTools from '@/components/Tools/table_tools.vue'
+import Table from "@/components/Table/index.vue";
+import { useRouter } from "vue-router";
+import { changeNum } from '@/utils/common';
+import {
+  getPlanList,
+  deletePlan,
+  updateQualityPlanState,
+  executePlan
+} from '@/api/modules/dataQualityAssess';
+import { TableColumnWidth } from '@/utils/enum';
+import useDataQualityStore from "@/store/modules/dataQuality";
+import { commonPageConfig } from '@/components/PageNav/index';
+
+/** 数据质量缓存内容 */
+const dataQualityStore = useDataQualityStore();
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter()
+
+/** 当前左侧选中树的item,用于根据选中不同层级，右侧显示不同表格。 */
+const treeSelectItem: any = ref({})
+
+/** 左侧树形配置信息。 */
+const treeInfo: any = ref({
+  id: "data-pickup-tree",
+  filter: false,
+  queryValue: "",
+  queryPlaceholder: "输入名称搜索",
+  nodeKey: 'guid',
+  expandedKey: [0],
+  currentNodeKey: 0,
+  props: {
+    value: 'guid',
+    label: 'label',
+    isLeaf: 'isLeaf'
+  },
+  data: [{
+    guid: 0,
+    label: '质量评估方案',
+    children: [{
+      guid: 1,
+      label: '表方案'
+    }, {
+      guid: 3,
+      label: '分组方案'
+    }, {
+      guid: 2,
+      label: '数据库方案'
+    }
+      // , {
+      //   guid: 4,
+      //   label: '数据同步方案'
+      // }
+    ]
+  }],
+});
+
+/** 上方搜索配置信息。 */
+const searchItemList = ref([
+  {
+    type: 'input',
+    label: '',
+    field: 'planName',
+    default: '',
+    maxlength: 50,
+    placeholder: '方案名称',
+    clearable: true,
+    visible: true
+  }, {
+    type: 'select',
+    label: '',
+    field: 'state',
+    default: null,
+    placeholder: '状态',
+    options: [
+      { label: '上线', value: 1 },
+      { label: '下线', value: 0 },
+    ],
+    clearable: true,
+    visible: true
+  }
+])
+
+/** 当前操作的方案表格行数据 */
+const currTableData: any = ref<Object>({});
+/** 分页及搜索传参信息配置。 */
+const page = ref({
+  ...commonPageConfig, planName: '',
+  planType: null,
+  state: null
+});
+/** 方案表格已勾选选中的行。 */
+const selectRowData = ref([])
+
+/** 方案表格配置信息。 */
+const tableInfo = ref({
+  id: 'user-manage-table',
+  //  multiple: true,
+  loading: false,
+  nodeKey: 'guid',
+  fields: [
+    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center", fixed: "left" },
+    { label: "方案名称", field: "planName", width: 140, type: "text_btn", value: "detail", fixed: "left", columClass: 'text_btn' },
+    {
+      label: "方案类型", field: "planType", width: 90, getName: (scope) => {
+        let planType = scope.row.planType;
+        return planType == 1 ? '表' : (planType == 2 ? '数据库' : (planType == 4 ? '数据同步' : '分组'));
+      }
+    },
+    { label: "数据源", field: "dataSourceName", width: 150 },
+    {
+      label: "表数量", field: "tableNum", width: 80, align: 'right', getName: (scope) => {
+        return scope.row.tableNum != null ? changeNum(scope.row.tableNum ?? 0) : '--';
+      }
+    },
+    {
+      label: "规则数", field: "ruleNum", width: 80, align: 'right', getName: (scope) => {
+        return scope.row.ruleNum != null ? changeNum(scope.row.ruleNum ?? 0) : '--';
+      }
+    },
+    {
+      label: '状态', field: 'state', type: 'switch', activeText: '上线', inactiveText: '下线', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center', isDisabled: (scope) => {
+        return scope.row.planType == 4;
+      }
+    },
+    { label: "执行状态", field: "execState", width: TableColumnWidth.STATE, align: 'center', type: "tag" },
+    {
+      label: "执行周期", field: "execCycle", width: TableColumnWidth.EXECCYCLE
+    },
+    { label: "下次执行时间", field: "nextExecTime", width: TableColumnWidth.DATETIME, },
+    { label: "最后执行时间", field: "lastExecTime", width: TableColumnWidth.DATETIME, },
+    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
+    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME, },
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 270,
+    btns: (scope) => {
+      const row = scope.row
+      let btnsArr: any = [{
+        label: "编辑", value: "edit", disabled: row.state === 1 || row.isExecute || row.execState == 1 || row.planType == 4, click: (scope) => {
+          router.push({
+            name: 'assessTemplate',
+            query: {
+              guid: row.guid,
+              planName: row.planName
+            }
+          });
+        }
+      },
+      {
+        label: "查看结果", value: "resultView", disabled: row.execState == 1 || row.isExecute || row.execState == 0, click: (scope) => {
+          router.push({
+            name: 'assessDetail',
+            query: {
+              planGuid: row.guid,
+              name: row.planName,
+              planExecGuid: row.planExecGuid
+            }
+          });
+        }
+      },
+      {
+        label: "日志", value: "path_log", disabled: row.execState == 0, click: (scope) => {
+          router.push({
+            name: 'assessLog',
+            query: {
+              guid: row.guid,
+              name: row.planName
+            }
+          });
+        }
+      }];
+      if (row.isExecute) {
+        btnsArr.splice(0, 0, { label: "执行中...", value: "execute", disabled: true })
+      } else {
+        btnsArr.splice(0, 0, { label: "手动执行", value: "execute", disabled: row.execState == 1 || row.state == 0 || row.planType == 4 })
+      }
+      btnsArr.push({ label: "删除", value: "delete", disabled: row.isExecute || row.execState == 1 || row.state == 1 });
+      return btnsArr
+    }
+  }
+});
+
+const toSearch = (val: any, clear: boolean = false) => {
+  page.value.curr = 1;
+  if (clear) {
+    searchItemList.value.map(item => item.default = '')
+    page.value.planName = '';
+    page.value.state = null;
+    getTableData();
+    return;
+  }
+  page.value.planName = val.planName;
+  page.value.state = val.state;
+  getTableData();
+};
+
+/** 调用接口刷新获取方案表格数据 */
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getPlanList({
+    pageIndex: page.value.curr, pageSize: page.value.limit, planName: page.value.planName,
+    planType: page.value.planType,
+    state: page.value.state
+  }).then((res: any) => {
+    tableInfo.value.loading = false;
+    if (res === undefined) {
+      return;
+    }
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {}
+      tableInfo.value.data = data.records || []
+      tableInfo.value.page.limit = data.pageSize
+      tableInfo.value.page.curr = data.pageIndex
+      tableInfo.value.page.rows = data.totalRows
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  })
+};
+
+/** 监听处理表格勾选事件。 */
+const tableSelectionChange = (val) => {
+  selectRowData.value = val.map((item) => item.guid);
+};
+
+/** 监听处理分页事件。 */
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  getTableData();
+};
+
+const tableSwitchBeforeChange = (scope, field, callback) => {
+  if (scope.row.isExecute || scope.row.execState == 1) {
+    ElMessage.warning('该方案正在执行中，无法下线');
+    return;
+  }
+  const msg = `确定【${scope.row[field] == 1 ? '下线' : '上线'}】该方案吗?`;
+  ElMessageBox.confirm(
+    msg,
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    const state = scope.row[field] == 1 ? 0 : 1
+    const result = tableSwitchChange(state, scope, field)
+    callback(result)
+  }).catch(() => {
+    callback(false)
+  })
+}
+
+const tableSwitchChange = (val, scope, field) => {
+  return new Promise((resolve, reject) => {
+    let params = {
+      guid: scope.row.guid,
+      state: val
+    }
+    updateQualityPlanState(params).then((res: any) => {
+      if (res.code == proxy.$passCode && res.data) {
+        page.value.curr = 1;
+        getTableData();
+        ElMessage({
+          type: "success",
+          message: `该方案${val == 1 ? '上线' : '下线'}成功`,
+        });
+        resolve(true)
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+        getTableData();
+        reject(false)
+      }
+    }).catch(() => {
+      getTableData();
+      reject(false)
+    })
+  })
+}
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+  if (type == "execute") {
+    row.isExecute = true
+    const guid = row.guid
+    executePlan(guid).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getTableData();
+        ElMessage({
+          type: "success",
+          message: "手动执行提交成功",
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+      row.isExecute = false
+    }).catch(() => {
+      row.isExecute = false
+    })
+  } else if (type === 'delete') {
+    open(`此操作将永久删除 ${row.planName}, 是否继续?`, "warning");
+  } else if (type == 'detail') {//查看详情
+    if (row.planType != 4) {
+      router.push({
+        name: 'assessTemplate',
+        query: {
+          guid: row.guid,
+          planName: row.planName,
+          detail: 1
+        }
+      });
+    }
+  }
+};
+
+/** 删除操作确认对话框。 */
+const open = (msg, type, isBatch = false) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    let guids = [currTableData.value.guid]
+    if (isBatch) {
+      guids = selectRowData.value
+    }
+    deletePlan(guids).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        page.value.curr = 1;
+        getTableData();
+        ElMessage({
+          type: "success",
+          message: "删除成功",
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    });
+  });
+};
+
+/** 树形点击节点事件处理。 */
+const nodeClick = (data) => {
+  treeSelectItem.value = data
+  if (data.children) {
+    page.value.planType = null;
+  } else {
+    page.value.planType = data.guid;
+  }
+  page.value.curr = 1;
+  searchItemList.value[0].default = '';
+  searchItemList.value[1].default = null;
+  getTableData();
+}
+
+onActivated(() => {
+  /** 若是新建评估方案跳转则默认选中对应的方案类型展示列表。 */
+  if (dataQualityStore.planType) {
+    /** 若是编辑方案之后跳转，则只需要重新获取当前的表格数据即可。 */
+    if (dataQualityStore.isUpdate) {
+      getTableData();
+      dataQualityStore.setIsUpdate(false);
+    } else {
+      /** 若树选中的与默认方案类型一致，则不需要再选中树，只更新表格数据。 */
+      if (treeSelectItem.value && treeSelectItem.value.guid == dataQualityStore.planType) {
+        treeInfo.value.currentNodeKey = dataQualityStore.planType;
+        getTableData();
+      } else {
+        treeInfo.value.currentNodeKey = dataQualityStore.planType;
+        nextTick(() => {
+          nodeClick(treeInfo.value.data[0].children.find(c => c.guid == treeInfo.value.currentNodeKey));
+        })
+      }
+    }
+    dataQualityStore.setPlanType(null);
+  }
+})
+
+const newCreatePlan = () => {
+  /** 新建评估方案时，若是左侧树选中的是方案类型，则新建时设置类型默认值与树选中值对应。 */
+  if (treeSelectItem.value.guid != null && treeSelectItem.value.guid !== 0) {
+    dataQualityStore.setDefaultPlanType(treeSelectItem.value.guid);
+  }
+  router.push({
+    name: 'assessTemplate'
+  });
+}
+
+</script>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+
+  .box_left {
+    width: 200px;
+    box-shadow: 1px 0 0 0 #d9d9d9;
+
+    .tree_panel {
+      height: 100%;
+      padding-top: 0;
+
+      :deep(.el-tree) {
+        margin: 0;
+        overflow: hidden auto;
+      }
+    }
+  }
+
+  .box_right {
+    width: calc(100% - 200px);
+    height: 100%;
+    padding: 0 16px;
+    overflow: hidden auto;
+  }
+
+  .panel_title {
+    line-height: 40px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--el-color-regular);
+  }
+}
+
+.table_tool_wrap {
+  width: 100%;
+  height: 84px;
+
+  .tools_btns {
+    padding: 0;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 84px);
+}
+</style>

+<route lang="yaml">
+  name: qualityRules
+</route>
+
+<script lang="ts" setup name="qualityRules">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from "element-plus";
+import Tree from "@/components/Tree/index.vue";
+import TableTools from '@/components/Tools/table_tools.vue'
+import Table from "@/components/Table/index.vue";
+import Dialog from '@/components/Dialog/index.vue'
+import { useRouter } from "vue-router";
+import useCatchStore from "@/store/modules/catch";
+import {
+  getQualityTreeData,
+  getQualityGroupData,
+  deleteGroup,
+  updateQualityGroup,
+  addQualityGroup,
+  getQualityTable,
+  deleteQualityTable,
+  getQualityTableRule,
+  deleteQualityTableRule,
+  updateRuleBizState,
+  getDatabase,
+  getRuleTypeList
+} from '@/api/modules/dataQuality';
+import useDataQualityStore from "@/store/modules/dataQuality";
+import { useValidator } from '@/hooks/useValidator';
+import { TableColumnWidth } from '@/utils/enum';
+import useDataCatalogStore from "@/store/modules/dataCatalog";
+
+const dataQualityStore = useDataQualityStore();
+const dataCatalogStore = useDataCatalogStore();
+
+const { proxy } = getCurrentInstance() as any;
+const { orderNum, description } = useValidator();
+
+const router = useRouter();
+const cacheStore = useCatchStore();
+/** 可选择的质量规则列表。 */
+const ruleTypeList: any = ref([]);
+
+/** 质量规则集表对象。 */
+const qualityModelTreeRef = ref();
+/** 树选中不同层级的，代表的类型， model, group, table */
+const treeType = ref('model')
+const treeData = ref([
+  {
+    guid: '1',
+    name: "数据质量规则集",
+    type: 0,
+    children: [],
+  }
+])
+
+const getQualityGroupTreePromise: any = ref(null);
+
+/** 展示质量规则集，分组树形结构数据。 */
+const getQualityGroupTreeData = (groupGuid?: string) => {
+  treeInfo.value.loading = true;
+  return getQualityGroupTreePromise.value = getQualityTreeData(groupGuid ? groupGuid : null).then((res: any) => {
+    treeInfo.value.loading = false;
+    getQualityGroupTreePromise.value = null;
+    if (res.code == proxy.$passCode) {
+      //return res.data || [];
+      treeData.value[0].children = res.data || []
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  })
+}
+
+/** 质量模型树形信息。 */
+const treeInfo = ref({
+  id: "data-quality-tree",
+  filter: true,
+  loading: false,
+  //  expandOnNodeClick: false, // 定位会由于未展开而失败。
+  queryValue: "",
+  queryPlaceholder: "输入名称搜索",
+  props: {
+    value: 'guid',
+    label: 'name',
+    isLeaf: 'isLeaf'
+  },
+  prefix: {
+    type: 'prefixIcon'
+  },
+  nodeKey: 'guid',
+  lazy: false, // 方便实现搜索，改为直接全部加载。
+  expandedKey: ['1'],
+  currentNodeKey: '1',
+  data: treeData.value
+});
+
+/** 指定分组下展示的质检表，表格搜索时下拉选择的数据源。 */
+const databaseList: any = ref([]);
+
+/** 指定分组下展示的质检表，上方搜索项配置。 */
+const tableSearchItemList = ref([
+  {
+    type: 'select',
+    label: '',
+    field: 'dataSourceGuid',
+    default: '',
+    placeholder: '数据源',
+    props: {
+      label: 'databaseNameZh',
+      value: 'guid'
+    },
+    options: databaseList.value,
+    clearable: true,
+    visible: true
+  }, {
+    type: 'input',
+    label: '',
+    field: 'modelName',
+    maxlength: 50,
+    default: '',
+    placeholder: '表名',
+    clearable: true,
+    visible: true
+  }
+])
+
+/** 指定质检表展示的规则列表，上方搜索项配置。 */
+const searchItemList = ref([
+  {
+    type: 'input',
+    label: '',
+    field: 'ruleName',
+    default: '',
+    maxlength: 50,
+    placeholder: '规则名称',
+    clearable: true,
+    visible: true
+  }, {
+    type: 'select',
+    label: '',
+    field: 'ruleField',
+    default: '',
+    placeholder: '规则字段',
+    options: [
+      { label: '字段1', value: '1' },
+      { label: '字段2', value: '2' },
+    ],
+    clearable: true,
+    visible: false, //徐鹏接口未支持，数据量较少，没必要做。
+  }, {
+    type: 'select',
+    label: '',
+    field: 'ruleCode',
+    default: '',
+    placeholder: '规则类型',
+    options: ruleTypeList.value,
+    props: {
+      value: 'ruleCode',
+      label: 'ruleName'
+    },
+    clearable: true,
+    visible: true
+  }
+])
+
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  modelGroupGuid: '',
+  dataSourceGuid: '',
+  modelName: ''
+});
+
+/** 当前分组列表数据勾选选中的行，用于批量删除。 */
+const tableSelectRowData: any = ref([]);
+const tableInfo = ref({
+  id: 'quality-table',
+  multiple: true,
+  loading: false,
+  fields: [
+    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
+    { label: "表名", field: "name", width: 150, type: 'text_btn', value: 'view', columClass: 'text_btn' },
+    { label: "表英文名", field: "subjectName", width: 160 },
+    { label: "数据源", field: "databaseName", width: 160 },
+    { label: "规则数量", field: "ruleNum", width: 90, align: 'right' },
+    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
+    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME, },
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 215,
+    btns: [
+      { label: "新建规则", value: "create" },
+      { label: "删除", value: "delete" },
+      { label: "查看表目录", value: "locateDataCatalog" },
+    ],
+  }
+});
+
+const groupPage = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+const groupSelectRowData = ref([]);
+const groupTableInfo = ref({
+  id: 'group-table',
+  //multiple: true,
+  loading: false,
+  fields: [
+    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center", fixed: "left" },
+    { label: "分组名称", field: "name", width: 150, type: 'text_btn', value: 'locate', columClass: 'text_btn' },
+    { label: "排序", field: 'orderNum', width: TableColumnWidth.INDEX, align: "center" },
+    { label: "质检表数量", field: "qualityModelNum", width: 120, align: 'right' },
+    {
+      label: "生效/总规则数", field: "ruleNum", width: 120, align: 'right', getName: (scope) => {
+        let row = scope.row;
+        return `${row.effectRuleNum}/${row.ruleNum}`;
+      }
+    },
+    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
+    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME, },
+    { label: "描述", field: "description", width: TableColumnWidth.DESCRIPTION }
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...groupPage.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 92,
+    btns: [
+      { label: "编辑", value: "edit" },
+      { label: "删除", value: "delete" },
+    ],
+  }
+});
+
+const formItems: any = ref([
+  {
+    label: '分组名称',
+    type: 'input',
+    placeholder: '请输入',
+    field: 'name',
+    default: '',
+    maxlength: 50,
+    required: true
+  },
+  {
+    label: '排序',
+    type: 'input',
+    placeholder: '由数字组成',
+    field: 'orderNum',
+    inputType: 'integerNumber',
+    default: '',
+    maxlength: 6,
+    required: true
+  }, {
+    label: '描述',
+    type: 'textarea',
+    placeholder: '请输入',
+    field: 'description',
+    default: '',
+    block: true,
+    required: false,
+  },
+])
+
+const formRules = ref({
+  name: [
+    { required: true, trigger: 'blur', message: "请填写分组名称" }
+  ],
+  orderNum: [orderNum()],
+  description: [description()]
+});
+
+/** 新建分组对话框。 */
+const dialogInfo = ref({
+  visible: false,
+  size: 700,
+  direction: "column",
+  header: {
+    title: "",
+  },
+  type: '',
+  contents: [
+    {
+      type: 'form',
+      title: '',
+      formInfo: {
+        id: 'add-staff-form',
+        items: formItems.value,
+        rules: formRules.value
+      }
+    }
+  ],
+  footer: {
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "确定", value: "submit" },
+    ],
+  },
+});
+
+/** 根据树形选择的第一层级显示对应的分组数据，用表格分页展示。 */
+const getGroupTableData = () => {
+  groupTableInfo.value.loading = true;
+  getQualityGroupData({ pageIndex: groupPage.value.curr, pageSize: groupPage.value.limit }).then((res: any) => {
+    groupTableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {};
+      groupTableInfo.value.data = data.records ?? [];
+      groupTableInfo.value.page.curr = data.pageIndex;
+      groupTableInfo.value.page.rows = data.totalRows;
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+      })
+    }
+  })
+};
+
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getQualityTable({ pageIndex: page.value.curr, pageSize: page.value.limit, modelGroupGuid: page.value.modelGroupGuid, dataSourceGuid: page.value.dataSourceGuid, name: page.value.modelName }).then((res: any) => {
+    tableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      const data = res.data || {};
+      tableInfo.value.data = data.records ?? [];
+      tableInfo.value.page.curr = data.pageIndex;
+      tableInfo.value.page.rows = data.totalRows;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+}
+
+const getRuleTableData = () => {
+  ruleTableInfo.value.loading = true;
+  getQualityTableRule({ modelGuid: lastSelectNode.value.data.guid, ruleName: modelRulesSerchParams.value.ruleName, ruleCode: modelRulesSerchParams.value.ruleCode }).then((res: any) => {
+    ruleTableInfo.value.loading = false;
+    if (res.code == proxy.$passCode) {
+      ruleTableInfo.value.data = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+}
+
+const tableSelectionChange = (val) => {
+  tableSelectRowData.value = val;
+};
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  tableInfo.value.page.limit = page.value.limit;
+  tableInfo.value.page.curr = page.value.curr;
+  getTableData();
+};
+
+/** 当前选中的规则行，用于操作列按钮。 */
+const currTableData: any = ref({});
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+  if (type == "view") {
+    if (!qualityModelTreeRef.value) {
+      return;
+    }
+    qualityModelTreeRef.value.setCurrentKey(row.guid, true);
+  } else if (type == 'create') {
+    router.push({
+      name: 'ruleTemplate',
+      query: {
+        modelGuid: row.guid,
+        name: row.name
+      }
+    });
+  } else if (type == "delete") {
+    open("此操作将永久删除, 是否继续?", "warning");
+  } else if (type == 'locateDataCatalog') {
+    dataCatalogStore.setLocateSubjectName(row.name);
+    router.push({
+      name: 'dataWarehouse'
+    });
+  }
+};
+
+const open = (msg, type, isBatch = false) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    let guids = [currTableData.value.guid]
+    if (isBatch) {
+      guids = tableSelectRowData.value.map(s => s.guid);
+    }
+    deleteQualityTable(guids).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        page.value.curr = 1;
+        getTableData();
+        let node = qualityModelTreeRef.value.treeRef.store.nodesMap[currTableData.value.modelGroupGuid];
+        node.loaded = false;
+        node.expand();
+        ElMessage.success('删除成功');
+      } else {
+        ElMessage.error(res.msg);
+      }
+    });
+  });
+};
+
+const batchingDelete = () => {
+  if (tableSelectRowData.value.length == 0) {
+    ElMessage({
+      type: 'error',
+      message: '请选择需要删除的数据',
+    })
+    return
+  }
+  open("此操作将永久删除, 是否继续?", "warning", true);
+};
+
+const groupTableSelectionChange = (val) => {
+  groupSelectRowData.value = val;
+};
+
+const groupTablePageChange = (info) => {
+  groupPage.value.curr = Number(info.curr);
+  groupPage.value.limit = Number(info.limit);
+  groupTableInfo.value.page.limit = groupPage.value.limit;
+  groupTableInfo.value.page.curr = groupPage.value.curr;
+  getGroupTableData();
+};
+
+const currGroupTableData: any = ref({});
+const groupTableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currGroupTableData.value = row;
+  if (type == "edit") {
+    dialogInfo.value.visible = true;
+    dialogInfo.value.header.title = "编辑分组";
+    dialogInfo.value.type = type
+    formItems.value.map(item => {
+      item.default = row[item.field];
+    });
+  } else if (type == "delete") {
+    ElMessageBox.confirm('此操作将永久删除该分组，确认删除吗？', "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: type,
+    }).then(() => {
+      deleteGroup([row.guid]).then((res: any) => {
+        if (res.code == proxy.$passCode) {
+          groupPage.value.curr = 1;
+          getGroupTableData();
+          ElMessage({
+            type: "success",
+            message: "删除分组成功",
+          });
+        } else {
+          ElMessage({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    });
+  } else if (type == 'locate') {
+    qualityModelTreeRef.value.setCurrentKey(row.guid, true);
+    let node = qualityModelTreeRef.value.treeRef.store.nodesMap[row.guid];
+    node && node.expand();
+  }
+};
+
+const ruleTableInfo = ref({
+  id: 'rule-table',
+  loading: false,
+  fields: [
+    { label: "规则名称", field: "ruleConfName", width: 150 },
+    { label: "规则大类", field: "largeCategoryName", width: 120 },
+    { label: "规则小类", field: "smallCategoryName", width: 140 },
+    { label: "规则类型", field: "ruleName", width: 120 },
+    { label: '状态', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 'Y', inactiveValue: 'S', switchWidth: 56, width: 100, align: 'center' },
+    { label: "字段", field: "ruleField", width: 160 },
+    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
+    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME, },
+  ],
+  data: [],
+  showPage: false,
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 100,
+    btns: (scope) => {
+      return [
+        { label: "编辑", value: "edit" },
+        { label: "删除", value: "delete" },
+      ]
+    }
+  }
+});
+
+const ruleTableSwitchBeforeChange = (scope, field, callback) => {
+  let stateName = scope.row[field] == 'Y' ? '停用' : '启用';
+  const msg = `确定【${stateName}】该规则吗?`
+  ElMessageBox.confirm(
+    msg,
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    const state = scope.row[field] == 'Y' ? 'S' : 'Y';
+    const result = ruleTableSwitchChange(state, scope, field)
+    callback(result)
+  }).catch(() => {
+    callback(false)
+  })
+}
+
+const ruleTableSwitchChange = (val, scope, field) => {
+  return new Promise((resolve, reject) => {
+    let params = {
+      ruleConfGuid: scope.row.guid,
+      bizState: val
+    }
+    updateRuleBizState(params).then((res: any) => {
+      if (res.code == proxy.$passCode && res.data) {
+        getRuleTableData();
+        ElMessage({
+          type: "success",
+          message: `该规则 ${val == 'Y' ? '启用' : '停用'} 成功`,
+        });
+        resolve(true)
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+        getRuleTableData();
+        reject(false)
+      }
+    }).catch(() => {
+      getRuleTableData();
+      reject(false)
+    })
+  })
+}
+
+const currTableRuleData: any = ref({});
+const ruleTableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableRuleData.value = row;
+  if (type == "edit") {
+    router.push({
+      name: 'ruleModelEdit',
+      query: {
+        guid: row.guid
+      }
+    });
+  } else if (type == "delete") {
+    ruleOpen("此操作将永久删除该质检表, 是否继续?", "warning");
+  }
+};
+
+const ruleOpen = (msg, type, isBatch = false) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    let guids = currTableRuleData.value.guid;
+    deleteQualityTableRule(guids).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getRuleTableData();
+        let node = qualityModelTreeRef.value.treeRef.store.nodesMap[lastSelectNode.value.data.guid];
+        node.loaded = false;
+        node.expand();
+        ElMessage.success('删除质检表成功');
+      } else {
+        ElMessage.error(res.msg);
+      }
+    });
+  });
+};
+
+/** 新建分组 */
+const clickCreateGroup = () => {
+  dialogInfo.value.visible = true;
+  dialogInfo.value.header.title = "新建分组";
+  dialogInfo.value.type = 'add';
+  formItems.value.map(item => {
+    if (item.field === 'orderNum') {
+      item.default = null;
+    } else {
+      item.default = "";
+    }
+  });
+}
+
+/** 新建质检表 */
+const clickCreateTable = () => {
+  router.push({
+    name: 'ruleModel',
+    query: {
+      groupGuid: page.value.modelGroupGuid,
+      name: lastSelectNode.value.data.name
+    }
+  });
+}
+
+/** 新建规则 */
+const clickCreateRule = () => {
+  router.push({
+    name: 'ruleTemplate',
+    query: {
+      modelGuid: lastSelectNode.value.data.guid,
+      name: lastSelectNode.value.data.name
+    }
+  });
+}
+
+/** 跳转配置质量评估方案页面。 */
+const configPlan = () => {
+  if (lastSelectNode.value.data.type == 1) {//按照分组配置评估方案。
+    router.push({
+      name: 'assessTemplate',
+      query: {
+        groupGuid: lastSelectNode.value.data.guid
+      }
+    });
+  } else {
+    router.push({
+      name: 'assessTemplate',
+      query: {
+        modelGuid: lastSelectNode.value.data.guid,
+        groupGuid: lastSelectNode.value.parent.data.guid
+      }
+    });
+  }
+}
+
+const toPath = (url) => {
+  router.push({
+    path: url,
+  });
+}
+
+const lastSelectNode: any = ref({});
+
+const modelRulesSerchParams = ref({
+  ruleName: '',
+  ruleCode: '',
+  ruleField: ''
+});
+
+const handleNodeSelectChange = (node) => {
+  console.log(node);
+  let data = node.data;
+  lastSelectNode.value = node;
+  if (node.level === 1) {
+    treeType.value = 'model';
+    groupPage.value.curr = 1;
+    getGroupTableData();
+  } else if (node.level === 2) {
+    treeType.value = 'group';
+    page.value.curr = 1;
+    page.value.modelGroupGuid = data.guid;
+    toTableSearch(groupTableTools.value?.toolSearch?.formInline || {}, false);
+  } else if (node.level === 3) {
+    treeType.value = 'table';
+    toRuleSearch(ruleTableTools.value?.toolSearch?.formInline || {}, false);
+  }
+
+}
+
+const groupTableTools: any = ref(null);
+
+const toTableSearch = (val, clear) => {
+  page.value.curr = 1;
+  if (clear) {
+    page.value.modelName = '';
+    page.value.dataSourceGuid = '';
+    getTableData();
+    return;
+  }
+  page.value.modelName = val.modelName;
+  page.value.dataSourceGuid = val.dataSourceGuid;
+  getTableData();
+}
+
+const ruleTableTools: any = ref(null);
+const toRuleSearch = (val, clear) => {
+  if (clear) {
+    modelRulesSerchParams.value = {
+      ruleName: '',
+      ruleCode: '',
+      ruleField: ''
+    };
+  } else {
+    modelRulesSerchParams.value = val;
+  }
+  getRuleTableData();
+}
+
+let submitPromise: any = ref(null);
+let editSubmitPromise: any = ref(null);
+
+/** 新建分组对话框确定。 */
+const dialogBtnClick = (btn, info) => {
+  if (btn.value == 'submit') {
+    if (dialogInfo.value.type == 'add') {
+      if (submitPromise.value) {
+        return;
+      }
+      submitPromise.value = addQualityGroup(info).then((res: any) => {
+        submitPromise.value = null;
+        if (res.code == proxy.$passCode) {
+          groupPage.value.curr = 1;
+          getGroupTableData();
+          ElMessage({
+            type: 'success',
+            message: '新建分组成功'
+          })
+          dialogInfo.value.visible = false;
+        } else {
+          ElMessage({
+            type: 'error',
+            message: res.msg,
+          })
+        }
+      })
+    } else {
+      const params = { ...info };
+      params.guid = currGroupTableData.value.guid;
+      if (editSubmitPromise.value) {
+        return;
+      }
+      editSubmitPromise.value = updateQualityGroup(params).then((res: any) => {
+        editSubmitPromise.value = null;
+        if (res.code == proxy.$passCode) {
+          getGroupTableData();
+          ElMessage({
+            type: 'success',
+            message: '编辑分组成功'
+          })
+          dialogInfo.value.visible = false;
+        } else {
+          ElMessage({
+            type: 'error',
+            message: res.msg,
+          })
+        }
+      })
+    }
+  } else if (btn.value == 'cancel') {
+    dialogInfo.value.visible = false;
+  }
+};
+
+/** 导入按分组 */
+const uploadDialog = () => {
+  const info = {
+    type: 'qualityModelGroup'
+  }
+  cacheStore.setCatch('uploadSetting', info)
+  nextTick(() => {
+    router.push({
+      name: 'importFiles',
+    });
+  })
+}
+
+/** 导出按照分组。 */
+const exportData = () => {
+  if (groupSelectRowData.value.length == 0) {
+    // const fieldTemplate = "/files/set.xlsx";
+    // downFile(fieldTemplate, '标准集模板.xlsx')
+  } else {
+    // exportDataStandardSet(groupSelectRowData.value).then((res: any) => {
+    //   download(res, '标准集.xls', 'excel')
+    // });
+  }
+}
+
+/** 导入质检规则 */
+const ruleUploadDialog = () => {
+  const info = {
+    type: 'qualityRule'
+  }
+  cacheStore.setCatch('uploadSetting', info)
+  nextTick(() => {
+    router.push({
+      name: 'importFiles',
+    });
+  })
+}
+
+/** 导出质检规则。 */
+const ruleExportData = () => {
+  if (groupSelectRowData.value.length == 0) {
+    // const fieldTemplate = "/files/set.xlsx";
+    // downFile(fieldTemplate, '标准集模板.xlsx')
+  } else {
+    // exportDataStandardSet(groupSelectRowData.value).then((res: any) => {
+    //   download(res, '标准集.xls', 'excel')
+    // });
+  }
+}
+
+const getDatabaseList = () => {
+  getDatabase({ connectStatus: 1 }).then((res: any) => {
+    databaseList.value = [];
+    if (res.code == proxy.$passCode) {
+      databaseList.value = res.data || [];
+      tableSearchItemList.value[0].options = databaseList.value;
+    }
+  })
+};
+
+onActivated(async () => {
+  if (dataQualityStore.modelGroupGuid) {
+    await nextTick();
+    if (getQualityGroupTreePromise.value) {
+      getQualityGroupTreePromise.value.then(() => {
+        qualityModelTreeRef.value.setCurrentKey(dataQualityStore.modelGroupGuid);
+        if (lastSelectNode.value && lastSelectNode.value.data.guid == dataQualityStore.modelGroupGuid) {
+          getTableData();
+        }
+        let node = qualityModelTreeRef.value.treeRef.store.nodesMap[dataQualityStore.modelGroupGuid];
+        node?.expand();
+        dataQualityStore.set(null);
+      });
+    } else {
+      qualityModelTreeRef.value.setCurrentKey(dataQualityStore.modelGroupGuid);
+      if (lastSelectNode.value && lastSelectNode.value.data.guid == dataQualityStore.modelGroupGuid) {
+        getTableData();
+      }
+      let node = qualityModelTreeRef.value.treeRef.store.nodesMap[dataQualityStore.modelGroupGuid];
+      node.expand();
+      dataQualityStore.set(null);
+    }
+  }
+  if (dataQualityStore.modelGuid) {
+    if (lastSelectNode.value?.data && lastSelectNode.value.data.guid == dataQualityStore.modelGuid) {
+      qualityModelTreeRef.value.setCurrentKey(dataQualityStore.modelGuid);
+      getRuleTableData();
+    } else {
+      if (getQualityGroupTreePromise.value) {
+        getQualityGroupTreePromise.value.then(() => {
+          nextTick(() => {
+            qualityModelTreeRef.value.setCurrentKey(dataQualityStore.modelGuid);
+            dataQualityStore.setModelGuid(null);
+          })
+        })
+      } else {
+        nextTick(() => {
+          qualityModelTreeRef.value.setCurrentKey(dataQualityStore.modelGuid);
+          dataQualityStore.setModelGuid(null);
+        })
+      }
+    }
+  }
+})
+
+onBeforeMount(() => {
+  getQualityGroupTreeData();
+  getGroupTableData();
+  getDatabaseList();
+  getRuleTypeList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      ruleTypeList.value = res.data?.map((d: any) => {
+        d.label = d.ruleName;
+        d.value = d.ruleCode;
+        return d;
+      }) || [];
+      searchItemList.value[2].options = ruleTypeList.value;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+})
+
+</script>
+
+<template>
+  <div class="container_wrap flex">
+    <div class="box_left aside_wrap">
+      <div class="aside_title">质量规则集列表</div>
+      <Tree ref="qualityModelTreeRef" :treeInfo="treeInfo" @nodeSelectChange="handleNodeSelectChange" />
+    </div>
+    <div class="box_right">
+      <div class="table_tool_wrap">
+        <TableTools ref="groupTableTools" v-if="treeType == 'group'" :init="false" :searchItems="tableSearchItemList"
+          :searchId="'quality-table-search'" @search="toTableSearch" />
+        <TableTools ref="ruleTableTools" v-if="treeType == 'table'" :init="false" :searchItems="searchItemList"
+          :searchId="'table-rule-search'" @search="toRuleSearch" />
+        <div class="tools_btns" v-if="treeType == 'model'">
+          <el-button type="primary" @click="clickCreateGroup">新建分组</el-button>
+          <!-- <el-button @click="uploadDialog">导入</el-button>
+          <el-button @click="exportData">导出</el-button> -->
+        </div>
+        <div class="tools_btns" style="padding-bottom: 8px;" v-else-if="treeType == 'group'">
+          <el-button type="primary" @click="clickCreateTable">新建质检表</el-button>
+          <el-button @click="batchingDelete">批量删除</el-button>
+          <el-button v-if="lastSelectNode?.data?.isHaveModel" @click="configPlan">配置评估方案</el-button>
+          <!-- <el-button @click="ruleUploadDialog">导入</el-button>
+          <el-button @click="ruleExportData">导出</el-button> -->
+        </div>
+        <div class="tools_btns" style="padding-bottom: 8px;" v-else>
+          <el-button type="primary" @click="clickCreateRule">新建规则</el-button>
+          <el-button @click="configPlan">配置评估方案</el-button>
+        </div>
+      </div>
+      <div class="table_panel_wrap"
+        :style="{ height: treeType === 'model' ? 'calc(100% - 44px)' : (treeType === 'table' ? 'calc(100% - 100px)' : 'calc(100% - 84px)') }">
+        <Table v-if="treeType === 'model'" :tableInfo="groupTableInfo" @tableBtnClick="groupTableBtnClick"
+          @tableSelectionChange="groupTableSelectionChange" @tablePageChange="groupTablePageChange" />
+        <Table v-if="treeType === 'group'" :tableInfo="tableInfo" @tableBtnClick="tableBtnClick"
+          @tableSelectionChange="tableSelectionChange" @tablePageChange="tablePageChange" />
+        <Table v-if="treeType === 'table'" :tableInfo="ruleTableInfo" @tableBtnClick="ruleTableBtnClick"
+          @tableSwitchBeforeChange="ruleTableSwitchBeforeChange" />
+      </div>
+    </div>
+
+    <Dialog :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+
+  .box_left {
+    width: 200px;
+    box-shadow: 1px 0 0 0 #d9d9d9;
+
+    .tree_panel {
+      height: calc(100% - 36px);
+      padding-top: 0;
+
+      :deep(.el-tree) {
+        margin: 0;
+        overflow: hidden auto;
+      }
+    }
+  }
+
+  .box_right {
+    width: calc(100% - 200px);
+    height: 100%;
+    padding: 0 16px;
+    overflow: hidden auto;
+  }
+
+  .panel_title {
+    line-height: 40px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--el-color-regular);
+  }
+}
+
+.table_tool_wrap {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+
+  .tools_btns {
+    padding: 0;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 84px);
+}
+</style>

+<script lang="ts" setup name="ruleForm">
+import { ref } from "vue";
+import {
+	validateSubjectTableRule,
+	validateCustomSql,
+	getSubjectFields,
+	getSubjectTableTree,
+	getSubjectTableByDomain
+} from '@/api/modules/dataQuality';
+import Table from "@/components/Table/index.vue";
+import Form from "@/components/Form/index.vue";
+import { ElMessage } from "element-plus";
+import { CirclePlus, Close } from '@element-plus/icons-vue';
+import { cloneDeep } from 'lodash-es';
+
+const { proxy } = getCurrentInstance() as any;
+
+const props = defineProps({
+	toSubjectTables: {
+		type: Array<any>,
+		default: [],
+	},
+	ruleTypeValue: {
+		type: String,
+		default: '',
+	},
+	value: {
+		type: Object,
+		default: {}
+	},
+	ruleTypeList: {
+		type: Array<any>,
+		default: [],
+	},
+	smallCategoryList: {
+		type: Array<any>,
+		default: [],
+	},
+	largeCategoryList: {
+		type: Array<any>,
+		default: [],
+	},
+	isSingle: {
+		type: Boolean,
+		default: false,
+	},
+	readonly: {
+		type: Boolean,
+		default: false
+	}
+});
+
+watch(() => props.toSubjectTables, (val: any[]) => {
+	panelList.value[4].options = val;
+	panelList.value[4].default = val.map(s => s.guid);
+	setPanelListValue(Object.assign({ qualityModelGuids: panelList.value[4].default }, props.value), false, true);
+	formItems.value[0].children = panelList.value;
+});
+
+watch(() => props.value, (val) => {
+	if (Object.keys(val).length === 0) {
+		return;
+	}
+	setPanelListValue(val, false, true);
+})
+
+watch(() => props.ruleTypeValue, (val) => {
+	formItems.value[0].default = val;
+	if (val) {
+		let v = [props.ruleTypeList.find(option => option.value == props.ruleTypeValue)];
+		formItems.value[0].options = v;
+		formItems.value[0].default = val;
+		radioGroupChange(val, props.value, true);
+	} else {
+		let v = props.ruleTypeList;
+		formItems.value[0].options = v;
+		radioGroupChange(v[0].ruleCode, props.value, true);
+	}
+})
+
+watch(() => props.ruleTypeList, (val) => {
+	if (props.ruleTypeValue) {
+		let v = [val.find(option => option.value == props.ruleTypeValue)];
+		formItems.value[0].options = v;
+		formItems.value[0].default = props.ruleTypeValue;
+		radioGroupChange(props.ruleTypeValue, props.value, true);
+	} else {
+		let v = val;
+		formItems.value[0].options = v;
+		formItems.value[0].default = v[0]?.ruleCode;
+		radioGroupChange(v[0].ruleCode, props.value, true);
+	}
+})
+
+watch(() => props.smallCategoryList, (val) => {
+	if (!props.readonly) {
+		let largeV = props.value['largeCategory'] || getDefaultLargeCategory(formItems.value[0].default);
+		if (largeV == '1') {//规范性
+			panelList.value[2].options = val.slice(0, 6);
+		} else if (largeV == '2') {
+			panelList.value[2].options = val.slice(6, 8);
+		} else if (largeV == '3') {
+			panelList.value[2].options = val.slice(8, 13);
+		} else if (largeV == '4') {
+			panelList.value[2].options = val.slice(13, 15);
+		} else if (largeV == '5') {
+			panelList.value[2].options = val.slice(15, 18);
+		} else if (largeV == '6') {
+			panelList.value[2].options = val.slice(18, 20);
+		} else {
+			panelList.value[2].options = val.slice(0, 6);
+			panelList.value[2].default = getDefaultSmallCategory(formItems.value[0].default);;
+		}
+	}
+	if (Object.keys(props.value).length > 0) {
+		setPanelListValue(props.value, false, true);
+	}
+})
+
+watch(() => props.largeCategoryList, (val) => {
+	panelList.value[1].options = val;
+	panelList.value[1].default = getDefaultLargeCategory(formItems.value[0].default);
+	if (Object.keys(props.value).length > 0) {
+		setPanelListValue(props.value, false, true);
+	}
+})
+
+onBeforeMount(() => {
+	if (props.ruleTypeList?.length) {
+		if (props.ruleTypeValue) {
+			let v = [props.ruleTypeList.find(option => option.value == props.ruleTypeValue)];
+			formItems.value[0].options = v;
+			formItems.value[0].default = props.ruleTypeValue;
+			radioGroupChange(props.ruleTypeValue, props.value, true);
+		} else {
+			let v = props.ruleTypeList;
+			formItems.value[0].options = v;
+			formItems.value[0].default = v[0].ruleCode;
+			radioGroupChange(v[0].ruleCode, props.value, true);
+		}
+	}
+	if (props.largeCategoryList?.length) {
+		panelList.value[1].options = props.largeCategoryList;
+		panelList.value[1].default = getDefaultLargeCategory(formItems.value[0].default);
+		formItems.value[0].children = panelList.value;
+	}
+	if (props.smallCategoryList?.length) {
+		panelList.value[2].options = props.smallCategoryList.slice(0, 6);
+		panelList.value[2].default = getDefaultSmallCategory(formItems.value[0].default);
+		formItems.value[0].children = panelList.value;
+	}
+	if (props.isSingle) {
+		if (props.toSubjectTables.length) {
+			panelList.value[4].default = props.toSubjectTables.map(s => s.guid);
+		}
+		panelList.value[4].disabled = true;
+		formItems.value[0].children = panelList.value;
+	}
+	if (Object.keys(props.value).length > 0) {
+		setPanelListValue(props.value, false, true);
+	}
+});
+
+const getDefaultLargeCategory = (ruleCode) => {
+	if (ruleCode == 'repeate_data_check' || ruleCode == 'logic_check') {
+		return '3'; //准确性
+	} else if (ruleCode == 'volatility_check' || ruleCode == 'rows_check') {
+		return '5';
+	} else if (ruleCode == 'null_value_check') {
+		return '2';
+	} else {
+		return '1';
+	}
+}
+
+const getDefaultSmallCategory = (ruleCode) => {
+	if (ruleCode == 'repeate_data_check') {
+		return '11'; //准确性
+	} else if (ruleCode == 'logic_check') {
+		return '9';
+	} else if (ruleCode == 'volatility_check' || ruleCode == 'rows_check') {
+		return '17';
+	} else if (ruleCode == 'null_value_check') {
+		return '7';
+	} else {
+		return '1';
+	}
+}
+
+const ruleType = ref('empty')
+const panelList: any = ref([
+	{
+		label: '规则名称',
+		type: 'input',
+		maxlength: 50,
+		placeholder: '请输入',
+		field: 'ruleConfName',
+		default: '',
+		required: true
+	}, {
+		label: '规则大类',
+		type: 'select',
+		placeholder: '请选择',
+		field: 'largeCategory',
+		default: '1',
+		options: props.largeCategoryList,
+		props: {
+			label: 'paramName',
+			value: 'paramValue'
+		},
+		required: true,
+		visible: true
+	}, {
+		label: '规则小类',
+		type: 'select',
+		placeholder: '请选择',
+		field: 'smallCategory',
+		props: {
+			label: 'paramName',
+			value: 'paramValue'
+		},
+		default: '',
+		options: props.smallCategoryList.slice(6),
+		required: true,
+		visible: true
+	}, {
+		label: '校验方式',
+		type: 'select',
+		placeholder: '请选择',
+		field: 'parity',
+		default: 1,
+		options: [
+			{
+				label: '1天周期比较',
+				value: 1
+			}, {
+				label: '7天周期比较',
+				value: 7
+			}, {
+				label: '上一周期比较',
+				value: -1
+			}
+		],
+		clearable: true,
+		required: true,
+		visible: true
+	}, {
+		label: '质检表',
+		type: 'select',
+		placeholder: '请选择',
+		field: 'qualityModelGuids',
+		props: {
+			label: 'chName',
+			value: 'guid'
+		},
+		default: [],
+		options: props.toSubjectTables,
+		multiple: true,
+		tagsTooltip: true,
+		collapse: true,
+		filterable: true,
+		required: true,
+		visible: true,
+	}, {
+		label: '比较方式',
+		type: 'select',
+		placeholder: '请选择',
+		field: 'compareWay',
+		default: 1,
+		options: [
+			{
+				label: '绝对值',
+				value: 1
+			}, {
+				label: '上升',
+				value: 2
+			},
+			{
+				label: '下降',
+				value: 3
+			}
+		],
+		clearable: true,
+		required: true,
+		visible: true
+	}, {
+		label: '波动值比较',
+		type: 'input-group',
+		placeholder: '请输入',
+		field: 'ruleFluctuations',
+		default: '',
+		children: [
+			{
+				label: '',
+				type: 'input',
+				inputType: 'scoreNumber',
+				max: 1,
+				placeholder: '橙色阈值',
+				field: 'orangeThreshold',
+				default: '',
+				clearable: true,
+				required: true
+			},
+			{
+				label: '',
+				type: 'input',
+				placeholder: '红色阈值',
+				inputType: 'scoreNumber',
+				max: 1,
+				field: 'redThreshold',
+				default: '',
+				clearable: true,
+				required: true
+			},
+		],
+		col: 'col2',
+		clearable: true,
+		required: true
+	}, {
+		label: '规则设置',
+		type: 'input-dom',
+		placeholder: '请设置，可多选',
+		field: 'ruleSettings', //重复数据 7
+		default: '',//描述型的字段  
+		defaultValue: {},//实际的json值
+		readonly: true,
+		required: true,
+		block: true,
+		visible: false
+	}, {
+		label: '规则设置',
+		type: 'input-dom',
+		placeholder: '请设置，可多选',
+		field: 'ruleSettings-logic', //8
+		default: '',//描述型的字段
+		defaultValue: {},//实际的json值, {ruleFields：，conditionSqls：}
+		readonly: true,
+		required: true,
+		block: true,
+		visible: false
+	}, {
+		label: '规则设置',
+		type: 'input-dom',
+		placeholder: '请设置，可多选',
+		field: 'ruleSettings-sql', //9
+		default: '',//描述型的字段
+		defaultValue: {},//实际的json值，key为表，value为sql
+		readonly: true,
+		required: true,
+		block: true,
+		visible: false
+	}, {
+		label: '规则设置',
+		type: 'input-dom',
+		placeholder: '请设置，可多选',
+		field: 'ruleSettings-null', //10
+		default: '',//描述型的字段
+		defaultValue: {},//实际的json值
+		readonly: true,
+		required: true,
+		block: true,
+		visible: false
+	}, {
+		label: '规则设置',
+		type: 'input-dom',
+		placeholder: '请设置，可多选',
+		field: 'ruleSettings-rows', //11
+		default: '',//描述型的字段
+		defaultValue: [],//实际的表格数据值数组
+		readonly: true,
+		required: true,
+		block: true,
+		visible: false
+	}, {
+		label: '描述',
+		type: 'textarea',
+		placeholder: '请输入',
+		field: 'description',
+		default: '',
+		clearable: true,
+		required: false,
+		block: true
+	}, {
+		label: '',
+		type: 'checkbox',
+		placeholder: '联合不为空',
+		desc: '勾选表示表的所有字段不能同时为空，不勾选表示每个字段都不为空',
+		field: 'jointly',
+		default: 'N',
+		trueValue: 'Y',
+		falseValue: 'N',
+		required: false,
+		visible: false,
+		block: true
+	}, {
+		label: '',
+		type: 'checkbox',
+		placeholder: '直接启用规则',
+		desc: '',
+		field: 'bizState',
+		default: "Y",
+		trueValue: 'Y',
+		falseValue: 'S',
+		required: false,
+		visible: !props.readonly,
+		block: true
+	}
+])
+
+const formItems: any = ref([
+	{
+		label: '选择规则',
+		type: 'radio-panel',
+		placeholder: '',
+		field: 'ruleCode',
+		default: props.ruleTypeValue,
+		options: props.ruleTypeList,
+		children: panelList.value,
+		clearable: true,
+		required: false,
+		block: true,
+		col: 'no-wrap'
+	},
+])
+
+const formRules = ref({
+	ruleConfName: [
+		{ required: true, trigger: 'blur', message: "请填写规则名称" }
+	],
+	largeCategory: [
+		{ required: true, trigger: 'change', message: "请填写规则大类" }
+	],
+	smallCategory: [
+		{ required: true, trigger: 'change', message: "请填写规则小类" }
+	],
+	parity: [
+		{ required: true, trigger: 'change', message: "请填写检验方式" }
+	],
+	compareWay: [
+		{ required: true, trigger: 'change', message: "请填写比较方式" }
+	],
+	ruleSettings: [
+		{ required: true, trigger: 'change', message: "请设置规则" }
+	],
+	'ruleSettings-logic': [
+		{ required: true, trigger: 'change', message: "请设置规则" }
+	],
+	'ruleSettings-sql': [
+		{ required: true, trigger: 'change', message: "请设置规则" }
+	],
+	'ruleSettings-null': [
+		{ required: true, trigger: 'change', message: "请设置规则" }
+	],
+	'ruleSettings-rows': [
+		{ required: true, trigger: 'change', message: "请设置规则" }
+	],
+	orangeThreshold: [
+		{
+			trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
+				if (value === 0) {
+					callback();
+					return;
+				}
+				if (!value) {
+					callback(new Error('请填写橙色阈值'));
+					return;
+				}
+				if (parseFloat(value) > 1) {
+					callback(new Error('请填写小于1的小数'));
+					return;
+				}
+				let formInline = ruleFormRef.value?.formInline;
+				if (formInline && formInline.redThreshold && parseFloat(value) >= parseFloat(formInline.redThreshold)) {
+					callback(new Error("橙色阈值应小于红色阈值"));
+				}
+				callback();
+			}
+		}
+	],
+	redThreshold: [
+		{
+			required: true, trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
+				if (value === 0) {
+					callback();
+					return;
+				}
+				if (!value) {
+					callback(new Error('请填写红色阈值'));
+					return;
+				}
+				if (parseFloat(value) > 1) {
+					callback(new Error('请填写小于1的小数'));
+					return;
+				}
+				let formInline = ruleFormRef.value?.formInline;
+				if (formInline && formInline.orangeThreshold && parseFloat(value) <= parseFloat(formInline.orangeThreshold)) {
+					callback(new Error("红色阈值应大于橙色阈值"));
+				}
+				callback();
+			}
+		}
+	],
+	qualityModelGuids: [
+		{ type: 'array', required: true, message: '请至少选择一个质检表', trigger: 'change' }
+	],
+})
+
+const ruleFormRef = ref();
+
+const oldOriginValue: any = ref({});
+
+const dialogVisible = ref(false);
+
+const cancelDialog = () => {
+	dialogVisible.value = false;
+}
+
+const submit = () => {
+	if (Object.keys(nullSelectFields.value).length === 0) {
+		ElMessage.error('当前已选字段不能为空！');
+		return;
+	}
+	let index = ruleType.value == 'repeate_data_check' ? 7 : 10;
+	panelList.value[index].defaultValue = nullSelectFields.value;
+	let str = "";
+	for (const key in nullSelectFields.value) {
+		let fields = nullSelectFields.value[key];
+		str = str + (str ? ';' : '') + fields.map(f => f.enName).join(',');
+	}
+	let formInline = oldOriginValue.value = Object.assign({
+		qualityModelGuids: props.toSubjectTables.map(s => s.guid),
+		parity: 1,
+		compareWay: 1,
+		jointly: 'N',
+		bizState: 'Y'
+	}, oldOriginValue.value, ruleFormRef.value.formInline);
+	formInline[`${panelList.value[index].field}`] = str;
+	setPanelListValue(formInline);
+	dialogVisible.value = false;
+}
+
+const getSubjectTableTreeData = () => {
+	return getSubjectTableTree({}).then((res: any) => {
+		if (res.code == proxy.$passCode) {
+			contrastSubjects.value = res.data || [];
+			return res.data || [];
+		}
+	})
+}
+
+const formBtnClick = (btn) => {
+	if (ruleType.value == 'null_value_check' || ruleType.value == 'repeate_data_check') {
+		dialogVisible.value = true;
+		tableListInfo.value.data = props.toSubjectTables;
+		dialogSelectSubjectTable.value = props.toSubjectTables[0];
+		nullTableInfo.value.data = [];
+		let index = ruleType.value == 'repeate_data_check' ? 7 : 10;
+		nullSelectFields.value = cloneDeep(panelList.value[index].defaultValue);
+		if (props.toSubjectTables[0]?.guid) {
+			nullTableInfo.value.loading = true;
+			getSubjectFields(props.toSubjectTables[0]?.guid).then((res: any) => {
+				nullTableInfo.value.loading = false;
+				if (res.code == proxy.$passCode) {
+					nullTableInfo.value.data = res.data || [];
+					let tagData = nullSelectFields.value[props.toSubjectTables[0]?.chName];
+					if (tagData?.length) {
+						nextTick(() => {
+							tagData?.forEach((d) => {
+								let row = nullTableInfo.value.data.find((v: any) => v.guid == d.guid);
+								if (row) {
+									nullTableRef.value?.tableRef?.toggleRowSelection(row, true);
+								}
+							});
+						});
+					}
+				} else {
+					ElMessage.error(res.msg);
+				}
+			})
+		}
+	} else if (ruleType.value == 'logic_check') {
+		filterDialogVisible.value = true;
+		tableListInfo.value.data = props.toSubjectTables;
+		dialogSelectSubjectTable.value = props.toSubjectTables[0];
+		let defaultValue = panelList.value[8].defaultValue;
+		if (defaultValue.ruleFields) {
+			dialogSelectSubjectTableField.value = cloneDeep(defaultValue.ruleFields);
+			tableFilters.value = cloneDeep(defaultValue.conditionSqls);
+			tableFilterValidates.value = {};
+			for (const key in tableFilters.value) {
+				tableFilterValidates.value[key] = true;
+			}
+		} else {
+			dialogSelectSubjectTableField.value = {};
+			tableFilters.value = {};
+			tableFilterValidates.value = {};
+		}
+		tableInfo.value.data = [];
+		if (props.toSubjectTables[0]?.guid) {
+			tableInfo.value.loading = true;
+			getSubjectFields(props.toSubjectTables[0]?.guid).then((res: any) => {
+				tableInfo.value.loading = false;
+				if (res.code == proxy.$passCode) {
+					tableInfo.value.data = res.data || [];
+				} else {
+					ElMessage.error(res.msg);
+				}
+			})
+		}
+	} else if (ruleType.value == 'custom_sql') {
+		sqlDialogVisible.value = true;
+		tableListInfo.value.data = props.toSubjectTables;
+		dialogSelectSubjectTable.value = props.toSubjectTables[0];
+		let defaultValue = panelList.value[9].defaultValue || {};
+		sqlSelectField.value = cloneDeep(defaultValue.ruleFields || {});
+		sqlFieldsList.value = {};
+		for (const key in defaultValue.sqlFieldsList) {
+			sqlFieldsList.value[key] = defaultValue.sqlFieldsList?.[key]?.map(d => {
+				return {
+					value: d
+				}
+			}) || []
+		}
+		sqlTableFilters.value = cloneDeep(defaultValue.customSqls || {});
+		sqlFilterValidates.value = {};
+		for (const key in sqlTableFilters.value) {
+			sqlFilterValidates.value[key] = true;
+		}
+		sqlTableFieldInfo.value.data = [];
+		if (props.toSubjectTables[0]?.guid) {
+			sqlTableFieldInfo.value.loading = true;
+			getSubjectFields(props.toSubjectTables[0]?.guid).then((res: any) => {
+				sqlTableFieldInfo.value.loading = false;
+				if (res.code == proxy.$passCode) {
+					sqlTableFieldInfo.value.data = res.data || [];
+				} else {
+					ElMessage.error(res.msg);
+				}
+			})
+		}
+	} else if (ruleType.value == 'rows_check') {
+		if (!contrastSubjects.value?.length) {
+			getSubjectTableTreeData().then(res => {
+				return res;
+			})
+		}
+		tableRowDialogVisible.value = true;
+		tableRowRulesData.value = cloneDeep(panelList.value[11].defaultValue || []);
+		if (!tableRowRulesData.value.length) {
+			tableRowRulesData.value = [{
+				differenceRange: 0
+			}];
+		}
+	}
+}
+
+const selectChange = (val, item, info) => {
+	setPanelListValue(info, true);
+};
+
+/** 设置表单选项的值，防止largeCategory的options改变，重新赋值。 当radioGroupChange为true，init为false时，为用户手动切换，需要更新大类的默认值。 */
+const setPanelListValue = (item, isSelectChange = false, init = false, radioGroupChange = false) => {
+	let val = oldOriginValue.value = Object.assign({
+		qualityModelGuids: props.toSubjectTables.map(s => s.guid),
+		parity: 1,
+		largeCategory: getDefaultLargeCategory(formItems.value[0].default),
+		compareWay: 1,
+		jointly: 'N',
+		bizState: 'Y'
+	}, oldOriginValue.value, item);
+	let ruleCode = val.ruleCode;
+	panelList.value.forEach(p => {
+		let field = p.field;
+		if (p.field == 'bizState') {
+			p.visible = !props.readonly;
+		} else if (field == 'ruleFluctuations') {
+			p.children?.forEach(c => {
+				c.default = val[c.field];
+			});
+		} else if (p.field === 'qualityModelGuids') {
+			if (val[p.field] && typeof val[p.field] == 'string') {
+				p.default = [val[p.field]];
+			} else {
+				p.default = val[p.field] || [];
+			}
+			p.disabled = true;
+		} else if (p.field == 'ruleFluctuations') {
+			p.children.forEach(c => {
+				c.default = val[c.field]
+			})
+		} else if ((ruleCode == 'repeate_data_check' && p.field == 'ruleSettings') || (ruleCode == 'null_value_check' && p.field == 'ruleSettings-null')) {
+			if (!init) {
+				p.default = val[field];
+				return;
+			}
+			if (val.ruleField) {
+				p.default = val.ruleField?.map(f => f.enName)?.join(';');
+				p.defaultValue[`${val.subjectZhName}`] = val.ruleField || [];
+			} else {
+				p.default = '';
+				p.defaultValue = {};
+			}
+		} else if (ruleCode == 'logic_check' && p.field == 'ruleSettings-logic') {
+			if (!init) {
+				p.default = val[field];
+				return;
+			}
+			if (val.ruleField) {
+				p.default = val.ruleField?.map(f => f.enName)?.join(';');
+				let ruleFields = {};
+				ruleFields[val.subjectName] = val.ruleField?.[0] || [];
+				let conditionSqls = {};
+				conditionSqls[val.subjectName] = val.conditionSql;
+				p.defaultValue = {
+					ruleFields: ruleFields,
+					conditionSqls: conditionSqls
+				}
+			} else {
+				p.default = '';
+				p.defaultValue = {};
+			}
+		} else if (ruleCode == 'custom_sql' && p.field == 'ruleSettings-sql') {
+			if (!init) {
+				p.default = val[field];
+				return;
+			}
+			if (val.ruleField) {
+				if (val.ruleField?.length) {
+					p.default = val.subjectName + ":" + val.ruleField?.map(f => f.enName)?.join(',');
+				}
+				let ruleFields = {};
+				ruleFields[val.subjectName] = val.ruleField?.map(f => f.enName) || [];
+				let sqls = {};
+				sqls[val.subjectName] = val.customSql;
+				let sqlFieldsList = {};
+				sqlFieldsList[val.subjectName] = val.fieldSelects || [];
+				p.defaultValue = {
+					ruleFields: ruleFields,
+					customSqls: sqls,
+					sqlFieldsList: sqlFieldsList
+				};
+			} else {
+				p.default = '';
+				p.defaultValue = {};
+			}
+		} else if (ruleCode == 'rows_check' && p.field == 'ruleSettings-rows') {
+			if (!init) {
+				p.default = val[field];
+				return;
+			}
+			p.default = val.subjectName;
+			if (val.subjectName) {
+				p.defaultValue = [{
+					mainTable: val.subjectGuid,
+					mainTableName: val.subjectName,
+					mainTableZhName: val.subjectZhName,
+					differenceRange: val.differenceRange || 0,
+					contrastSubjectGuid: val.contrastSubjectGuid,
+					contrastSubjectName: val.contrastSubjectName,
+					contrastSubjectZhName: val.contrastSubjectZhName
+				}]
+			} else {
+				p.defaultValue = [];
+			}
+		} else if (p.field == 'largeCategory') {
+			/** 此处有歧义，若是切换规则类型，修改默认值，可能会出现，用户先修改了规则大类，但是切换类型之后，被我还原了。 */
+			if (radioGroupChange && !init) {
+				p.default = getDefaultLargeCategory(ruleCode);
+			} else {
+				p.default = val[p.field];
+			}
+			if (!props.readonly) {
+				if (p.default == '1') {//规范性
+					panelList.value[2].options = props.smallCategoryList.slice(0, 6);
+				} else if (p.default == '2') {
+					panelList.value[2].options = props.smallCategoryList.slice(6, 8);
+				} else if (p.default == '3') {
+					panelList.value[2].options = props.smallCategoryList.slice(8, 13);
+				} else if (p.default == '4') {
+					panelList.value[2].options = props.smallCategoryList.slice(13, 15);
+				} else if (p.default == '5') {
+					panelList.value[2].options = props.smallCategoryList.slice(15, 18);
+				} else if (p.default == '6') {
+					panelList.value[2].options = props.smallCategoryList.slice(18, 20);
+				}
+			}
+			if (isSelectChange) {
+				val['smallCategory'] = panelList.value[2].options[0]?.paramValue;
+			} else if (!val['smallCategory']) {
+				val['smallCategory'] = getDefaultSmallCategory(formItems.value[0].default);
+			} else if (radioGroupChange && !init) {//切换规则类型。
+				val['smallCategory'] = getDefaultSmallCategory(ruleCode);
+			}
+		} else {
+			p.default = val[field];
+		}
+	});
+	formItems.value[0].children = panelList.value;
+	console.log(panelList.value);
+}
+
+const radioGroupChange = (val, inlineValue, init) => {
+	formItems.value[0].default = val;
+	let list: any = panelList.value
+	list.forEach((item, index) => {
+		if (val == 'volatility_check') {//表行数波动率
+			item.visible = true
+			if (index == 7 || index == 8 || index == 9 || index == 10 || index == 11 || index === 13) {// 7是规则设置，9是联合不为空 ： 9+4
+				item.visible = false
+			}
+		} else if (val === 'null_value_check') {//空值检查
+			if (index === 3 || index === 4 || index === 5 || index === 6 || index == 7 || index == 8 || index == 9 || index == 11) {
+				item.visible = false
+			} else { //index为10的显示
+				item.visible = true;
+			}
+		} else if (val === 'repeate_data_check') { //重复数据检查
+			item.visible = false
+			if (index === 3 || index === 4 || index === 5 || index === 6 || index == 8 || index == 9 || index == 10 || index == 11 || index === 13) {
+			} else {
+				item.visible = true;
+			}
+		} else if (val === 'logic_check') { //逻辑检查
+			item.visible = false
+			if (index === 3 || index === 4 || index === 5 || index === 6 || index == 7 || index == 9 || index == 10 || index == 11 || index === 13) {
+			} else {
+				item.visible = true;
+			}
+		} else if (val === 'custom_sql') {//自定义sql
+			item.visible = false
+			if (index === 3 || index === 4 || index === 5 || index === 6 || index == 7 || index == 8 || index == 10 || index == 11 || index === 13) {
+			} else {
+				item.visible = true;
+			}
+		} else if (val === 'rows_check') { //表行数
+			item.visible = false
+			if (index === 3 || index === 4 || index === 5 || index === 6 || index == 7 || index == 8 || index == 9 || index == 10 || index === 13) {
+			} else {
+				item.visible = true;
+			}
+		}
+	})
+	ruleType.value = val;
+	panelList.value = list;
+	Object.keys(inlineValue).length > 0 && setPanelListValue(inlineValue, false, init, true);
+	formItems.value[0].children = panelList.value;
+}
+
+const filterDialogVisible = ref(false);
+/** 质检表 */
+const dialogSelectSubjectTable: any = ref({});
+/** 记录表对应的质检字段 */
+const dialogSelectSubjectTableField: any = ref({});
+
+const listItemClick = (data) => {
+	if (dialogSelectSubjectTable.value == data) {
+		return;
+	}
+	dialogSelectSubjectTable.value = data;
+	if (ruleType.value === 'custom_sql') {
+		sqlTableFilters.value[dialogSelectSubjectTable.value.enName] = sqlTableFilters.value[dialogSelectSubjectTable.value.enName] || "";
+		sqlTableFieldInfo.value.loading = true;
+		getSubjectFields(data.guid).then((res: any) => {
+			sqlTableFieldInfo.value.loading = false;
+			if (res.code == proxy.$passCode) {
+				sqlTableFieldInfo.value.data = res.data || [];
+			} else {
+				ElMessage.error(res.msg);
+			}
+		})
+	} else if (ruleType.value === 'logic_check') {
+		tableFilters.value[dialogSelectSubjectTable.value.enName] = tableFilters.value[dialogSelectSubjectTable.value.enName] || "";
+		tableInfo.value.loading = true;
+		getSubjectFields(data.guid).then((res: any) => {
+			tableInfo.value.loading = false;
+			if (res.code == proxy.$passCode) {
+				tableInfo.value.data = res.data || [];
+			} else {
+				ElMessage.error(res.msg);
+			}
+		})
+	} else if (ruleType.value == 'null_value_check' || ruleType.value == 'repeate_data_check') {
+		nullTableInfo.value.loading = true;
+		getSubjectFields(data.guid).then((res: any) => {
+			nullTableInfo.value.loading = false;
+			if (res.code == proxy.$passCode) {
+				nullTableInfo.value.data = res.data || [];
+				nextTick(() => {
+					let tagData = nullSelectFields.value[dialogSelectSubjectTable.value.chName] || [];
+					tagData?.forEach((d) => {
+						let row = nullTableInfo.value.data.find((v: any) => v.guid == d.guid);
+						if (row) {
+							nullTableRef.value?.tableRef?.toggleRowSelection(row, true);
+						}
+					});
+				});
+			} else {
+				ElMessage.error(res.msg);
+			}
+		})
+	}
+}
+
+const tableListInfo = ref({
+	id: 'subject-list',
+	field: 'label',
+	getName: (item) => {
+		return `${item.enName}(${item.chName})`;
+	},
+	data: props.toSubjectTables
+})
+
+const tableInfo: any = ref({
+	id: 'subject-fields-table',
+	loading: false,
+	fields: [
+		{ label: "字段名", field: "enName", width: 140, type: 'text_btn', value: 'enName', columClass: 'text_btn' },
+		{ label: "注释", field: "chName", width: 120 },
+		{ label: "数据类型", field: "dataTypeChName", width: 100 },
+	],
+	data: [],
+	showPage: false,
+	actionInfo: {
+		show: !props.readonly,
+		label: "操作",
+		type: "btn",
+		width: 90,
+		btns: (scope) => {
+			if (scope.row.enName === dialogSelectSubjectTableField.value[dialogSelectSubjectTable.value.enName]?.enName) {
+				return [
+					{ label: "取消选择", value: "delSelect" },
+				]
+			}
+			return [
+				{ label: "选择", value: "select" },
+			]
+		},
+	},
+})
+
+/** 逻辑检查时，记录表对应的逻辑条件 */
+const tableFilters: any = ref({});
+/** 逻辑检查时，记录表对应的逻辑条件的检验结果。未检验通过的不能保存。 */
+const tableFilterValidates: any = ref({});
+
+const cancelFilterDialog = () => {
+	filterDialogVisible.value = false;
+}
+
+const filterFormListRef: any = ref({});
+
+const submitFilter = () => {
+	let v: any = [];
+	for (const table in tableFilters.value) {
+		if (tableFilters.value[table]) {
+			if (!dialogSelectSubjectTableField.value[table]?.enName) {
+				if (dialogSelectSubjectTable.value.enName != table) {
+					filterFormListRef.value.setSelectList(table, 'enName');
+				}
+				ElMessage.error(`表【${table}】设置了质检条件，但未选择质检字段`);
+				return;
+			}
+			if (tableFilterValidates.value[table] !== true) {
+				if (dialogSelectSubjectTable.value.enName != table) {
+					filterFormListRef.value.setSelectList(table, 'enName');
+				}
+				ElMessage.error(`请先验证表【${table}】设置的质检条件`);
+				return;
+			}
+			v.push(table);
+		} else {
+			if (dialogSelectSubjectTableField.value[table]?.enName) {
+				if (dialogSelectSubjectTable.value.enName != table) {
+					filterFormListRef.value.setSelectList(table, 'enName');
+				}
+				ElMessage.error(`表【${table}】选择了质检字段，但未设置质检条件`);
+				return;
+			}
+		}
+	}
+	if (!v.length) {
+		ElMessage.error('当前未给表设置质检条件!');
+		return;
+	}
+	let index = 8;
+	panelList.value[index].defaultValue = {
+		ruleFields: dialogSelectSubjectTableField.value,
+		conditionSqls: tableFilters.value
+	};
+	let str = "";
+	for (const key in dialogSelectSubjectTableField.value) {
+		let field = dialogSelectSubjectTableField.value[key];
+		str = str + (str ? ';' : '') + field.enName;
+	}
+	let formInline = oldOriginValue.value = Object.assign({
+		qualityModelGuids: props.toSubjectTables.map(s => s.guid),
+		parity: 1,
+		compareWay: 1,
+		jointly: 'N',
+		bizState: 'Y'
+	}, oldOriginValue.value, ruleFormRef.value.formInline);
+	formInline[`${panelList.value[index].field}`] = str;
+	setPanelListValue(formInline);
+	filterDialogVisible.value = false;
+}
+
+const filterInputRef = ref();
+
+const filterTableBtnClick = (scope, btn) => {
+	if (btn.value === 'select') {
+		dialogSelectSubjectTableField.value[dialogSelectSubjectTable.value.enName] = scope.row;
+	} else if (btn.value === 'delSelect') {
+		dialogSelectSubjectTableField.value[dialogSelectSubjectTable.value.enName] = {};
+	} else {
+		let selectField = scope.row.enName + ' ';
+		let children = filterInputRef.value?.$el?.children?.[0];
+		let selectionStart = children?.selectionStart;
+		let filter = tableFilters.value[dialogSelectSubjectTable.value.enName] || "";
+		if (filter) {
+			tableFilters.value[dialogSelectSubjectTable.value.enName] = filter.slice(0, selectionStart) + selectField + filter.slice(selectionStart);
+			nextTick(() => {
+				children.focus();
+				let index = selectionStart + selectField.length;
+				children.setSelectionRange(index, index);
+			})
+			return;
+		} else {
+			tableFilters.value[dialogSelectSubjectTable.value.enName] = selectField;
+			nextTick(() => {
+				children.focus();
+				filterInputRef.value.selectionStart = filter.length;
+				filterInputRef.value.selectionEnd = filter.length;
+			});
+		}
+	}
+}
+
+const validateFilterBtnDisable = ref(false);
+
+/** 检验逻辑条件是否合理。 */
+const validateFilter = () => {
+	let enName = dialogSelectSubjectTable.value.enName;
+	if (!tableFilters.value[enName]) {
+		ElMessage.error('请先填写质检条件再验证sql');
+		return;
+	}
+	validateFilterBtnDisable.value = true;
+	validateSubjectTableRule({
+		subjectGuid: dialogSelectSubjectTable.value.guid,
+		condition: tableFilters.value[enName]
+	}).then((res: any) => {
+		validateFilterBtnDisable.value = false;
+		if (res.code == proxy.$passCode) {
+			tableFilterValidates.value[enName] = true;
+			ElMessage.success('验证通过');
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+}
+
+const handleFilterChange = () => {
+	tableFilterValidates.value[dialogSelectSubjectTable.value.enName] = false;
+}
+
+const tableRowDialogVisible = ref(false);
+const tableRowRulesDataLoading = ref(false);
+const tableRowRulesData: any = ref([{
+	differenceRange: 0
+}]);
+
+const addRowRules = () => {
+	tableRowRulesData.value.push({
+		differenceRange: 0
+	});
+}
+
+const deleteRow = (scope) => {
+	tableRowRulesData.value.splice(scope.$index, 1);
+}
+
+const cancelTableRowDialog = () => {
+	tableRowDialogVisible.value = false;
+}
+
+const submitTableRow = () => {
+	let v: any = [];
+	if (!tableRowRulesData.value.length) {
+		ElMessage.error('表行数检查规则不能为空');
+		return;
+	}
+	let index: number = 0;
+	for (const rule of tableRowRulesData.value) {
+		if (!rule.mainTable) {
+			ElMessage.error('主表不能为空');
+			return;
+		}
+		if (!rule.contrastSubjectGuid) {
+			ElMessage.error('对比表不能为空');
+			return;
+		}
+		if (rule.mainTable == rule.contrastSubjectGuid) {
+			ElMessage.error('主表和对比表不能选择同一个');
+			return;
+		}
+		let label = props.toSubjectTables.find(s => s.guid === rule.mainTable).enName;
+		if (v.includes(label)) {
+			ElMessage.error('主表选择重复');
+			return;
+		}
+		v.push(label);
+	}
+	let formInline = oldOriginValue.value = Object.assign({
+		qualityModelGuids: props.toSubjectTables.map(s => s.guid),
+		parity: 1,
+		compareWay: 1,
+		jointly: 'N',
+		bizState: 'Y'
+	}, oldOriginValue.value, ruleFormRef.value.formInline);
+	panelList.value[11].defaultValue = tableRowRulesData.value;
+	formInline[`${panelList.value[11].field}`] = v.join(';');
+	setPanelListValue(formInline);
+	tableRowDialogVisible.value = false;
+}
+
+const sqlTableFieldInfo: any = ref({
+	id: 'subject-fields-table',
+	loading: false,
+	fields: [
+		{ label: "字段名", field: "enName", width: 140, type: 'text_btn', value: 'enName', columClass: 'text_btn' },
+		{ label: "注释", field: "chName", width: 120 },
+		{ label: "数据类型", field: "dataTypeChName", width: 100 },
+	],
+	data: [],
+	showPage: false,
+	actionInfo: {
+		show: false
+	},
+})
+
+const sqlInputRef: any = ref(null);
+
+const sqlTableBtnClick = (scope, btn) => {
+	let selectField = scope.row.enName + ' ';
+	let children = sqlInputRef.value?.$el?.children?.[0];
+	let selectionStart = children?.selectionStart;
+	let filter = sqlTableFilters.value[dialogSelectSubjectTable.value.enName] || "";
+	if (filter) {
+		sqlTableFilters.value[dialogSelectSubjectTable.value.enName] = filter.slice(0, selectionStart) + selectField + filter.slice(selectionStart);
+		nextTick(() => {
+			children.focus();
+			let index = selectionStart + selectField.length;
+			children.setSelectionRange(index, index);
+		})
+		return;
+	} else {
+		sqlTableFilters.value[dialogSelectSubjectTable.value.enName] = selectField;
+		nextTick(() => {
+			children.focus();
+			sqlInputRef.value.selectionStart = filter.length;
+			sqlInputRef.value.selectionEnd = filter.length;
+		});
+	}
+}
+
+const sqlDialogVisible = ref(false);
+/** 记录表对应的自定义sql */
+const sqlTableFilters = ref({});
+/** 记录验证的sql */
+const sqlFilterValidates = ref({});
+/** 记录自定义sql选择的对应字段。 */
+const sqlSelectField = ref({});
+
+/** 自定义sql的下拉列表。 */
+const sqlFieldsList = ref({});
+
+const sqlFormListRef = ref();
+
+const cancelSqlDialog = () => {
+	sqlDialogVisible.value = false;
+};
+
+const submitSql = () => {
+	let v: any = [];
+	for (const table in sqlTableFilters.value) {
+		if (sqlTableFilters.value[table]) {
+			if (sqlFilterValidates.value[table] !== true) {
+				if (dialogSelectSubjectTable.value.enName != table) {
+					sqlFormListRef.value.setSelectList(table, 'enName');
+				}
+				ElMessage.error(`请验证表【${table}】的sql`);
+				return;
+			}
+			if (!sqlSelectField.value[table]?.length) {
+				if (dialogSelectSubjectTable.value.enName != table) {
+					sqlFormListRef.value.setSelectList(table, 'enName');
+				}
+				ElMessage.error(`表【${table}】设置了sql，但未选择质检字段`);
+				return;
+			}
+			v.push(table);
+		}
+	}
+	if (!v.length) {
+		ElMessage.error('未给质检表设置sql!');
+		return;
+	}
+
+	let str = "";
+	for (const key in sqlSelectField.value) {
+		let field = sqlSelectField.value[key];
+		str = str + (str ? ';' : '') + key + ':' + field.join(',');
+	}
+	let formInline = oldOriginValue.value = Object.assign({
+		qualityModelGuids: props.toSubjectTables.map(s => s.guid),
+		parity: 1,
+		compareWay: 1,
+		jointly: 'N',
+		bizState: 'Y'
+	}, oldOriginValue.value, ruleFormRef.value.formInline);
+	let fList = {};
+	for (const key in sqlFieldsList.value) {
+		fList[key] = sqlFieldsList.value[key]?.map(s => s.value) || [];
+	}
+	panelList.value[9].defaultValue = {
+		sqlFieldsList: fList,
+		ruleFields: sqlSelectField.value,
+		customSqls: sqlTableFilters.value
+	};
+	formInline[`${panelList.value[9].field}`] = str;
+	setPanelListValue(formInline);
+	sqlDialogVisible.value = false;
+}
+
+const validateSqlBtnDisable = ref(false);
+
+/** 检验自定义sql。 */
+const validateSql = () => {
+	let enName = dialogSelectSubjectTable.value.enName;
+	if (!sqlTableFilters.value[enName]) {
+		ElMessage.error('请先填写自定义sql再验证');
+		return;
+	}
+	validateSqlBtnDisable.value = true;
+	validateCustomSql({
+		subjectGuid: dialogSelectSubjectTable.value.guid,
+		sqlScript: sqlTableFilters.value[enName]
+	}).then((res: any) => {
+		validateSqlBtnDisable.value = false;
+		if (res?.code == proxy.$passCode) {
+			sqlFilterValidates.value[enName] = true;
+			sqlFieldsList.value[enName] = res.data?.map(d => {
+				return {
+					value: d
+				}
+			}) || [];
+			sqlSelectField.value[dialogSelectSubjectTable.value.enName] = res.data || [];
+			ElMessage.success('验证通过');
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+}
+
+const handleSqlChange = () => {
+	sqlFilterValidates.value[dialogSelectSubjectTable.value.enName] = false;
+}
+
+const nullTableInfo: any = ref({
+	id: 'subject-fields-table',
+	loading: false,
+	multiple: !props.readonly,
+	fields: [
+		{ label: "字段名", field: "enName", width: 140 },
+		{ label: "注释", field: "chName", width: 120 },
+		{ label: "数据类型", field: "dataTypeChName", width: 100 },
+	],
+	data: [],
+	showPage: false,
+	actionInfo: {
+		show: false
+	},
+})
+
+const nullSelectFields: any = ref({});
+
+const nullTableRef = ref();
+
+const emptySelectFields = () => {
+	let tagData = nullSelectFields.value[dialogSelectSubjectTable.value.chName] || [];
+	if (tagData.length) {
+		nullTableRef.value?.tableRef?.clearSelection();
+	}
+	nullSelectFields.value = {};
+}
+
+const uncheck = (tag, index, key) => {
+	let data = nullSelectFields.value[key];
+	data.splice(index, 1);
+	let row = nullTableInfo.value.data.find(d => d.guid == tag.guid);
+	nullTableRef.value?.tableRef?.toggleRowSelection(row, false);
+	if (!data.length) {
+		delete nullSelectFields.value[key];
+	}
+}
+
+const nullTableCheckboxSelectChange = (select, row) => {
+	let data = nullSelectFields.value[dialogSelectSubjectTable.value.chName] || [];
+	let isSelect = select.some(s => s.guid === row.guid);
+	if (isSelect) {
+		if (!data.length) {
+			nullSelectFields.value[dialogSelectSubjectTable.value.chName] = data;
+		}
+		data.push(row);
+	} else {
+		let index = data.findIndex(d => d.guid === row.guid);
+		if (index > -1) {
+			data.splice(index, 1);
+			if (!data.length) {
+				delete nullSelectFields.value[dialogSelectSubjectTable.value.chName];
+			}
+		}
+	}
+}
+
+const nullTableCheckboxAllSelectChange = (select) => {
+	let data = nullSelectFields.value[dialogSelectSubjectTable.value.chName] || [];
+	if (!select.length) {
+		let tableData = nullTableInfo.value.data;
+		if (data.length) {
+			tableData.forEach(d => {
+				let index = data.findIndex(t => t.guid === d.guid);
+				if (index > -1) {
+					data.splice(index, 1);
+					if (!data.length) {
+						delete nullSelectFields.value[dialogSelectSubjectTable.value.chName];
+					}
+				}
+			})
+		}
+	} else {
+		let tableData = nullTableInfo.value.data;
+		tableData.forEach(d => {
+			let index = data.findIndex(t => t.guid === d.guid);
+			if (index === -1) {
+				if (!data.length) {
+					nullSelectFields.value[dialogSelectSubjectTable.value.chName] = data;
+				}
+				data.push(d);
+			}
+		})
+	}
+}
+
+/** 对比的主题表可选择的数据 */
+const contrastSubjects: any = ref([]);
+
+const getSubjectTableByDomainData = (guid) => {
+	return getSubjectTableByDomain(guid).then((res: any) => {
+		if (res.code == proxy.$passCode) {
+			return res.data?.map(d => {
+				d.isLeaf = true;
+				d.name = `${d.enName}(${d.chName})`;
+				d.parentGuid = guid;
+				return d;
+			}) || [];
+		}
+	})
+}
+
+/** 主题表懒加载。 */
+const treeSelectLoad = (node, resolve) => {
+	if (node.level == 0) {
+		resolve(contrastSubjects.value);
+	} else if (node.level === 1) {
+		let guid = node.data.guid;
+		resolve(contrastSubjects.value.find((t: any) => t.guid === guid)?.children || []);
+	} else if (node.level === 2) {
+		getSubjectTableByDomainData(node.data.guid).then((d) => {
+			node.data.children = d;
+			resolve(d);
+		})
+	}
+}
+
+const defaultExpandedKeys = computed(() => {
+	return props.value && contrastSubjects.value?.length ? [contrastSubjects.value.find(c => c.children?.some(cc => cc.guid == props.value.contrastSubjectDomainGuid)).guid, props.value.contrastSubjectDomainGuid] : [];
+})
+
+const contrastSubjectInputFilterMethod = (v, data) => {
+	if (!v) {
+		return true;
+	}
+	return data.label?.includes(v) || data.name?.includes(v) ||
+		data.chName?.includes(v) ||
+		data.enName?.includes(v);
+};
+
+const getFormInfo = () => {
+	let formInline = ruleFormRef.value.formInline;
+	let ruleName = props.ruleTypeList.find(option => option.ruleCode == formInline.ruleCode).ruleName;
+	if (formInline.ruleCode == 'repeate_data_check') {
+		let v = panelList.value[7].defaultValue;
+		return Object.assign({}, formInline, {
+			modelFields: v,
+			ruleName: ruleName
+		});
+	} else if (formInline.ruleCode == 'null_value_check') {
+		let v = panelList.value[10].defaultValue;
+		return Object.assign({}, formInline, {
+			modelFields: v,
+			ruleName: ruleName
+		});
+	} else if (formInline.ruleCode == 'logic_check') {
+		let v = panelList.value[8].defaultValue;
+		return Object.assign({}, formInline, v, {
+			ruleName: ruleName
+		});
+	} else if (formInline.ruleCode == 'custom_sql') {
+		let v = panelList.value[9].defaultValue;
+		return Object.assign({}, formInline, v, {
+			ruleName: ruleName
+		});
+	} else if (formInline.ruleCode == 'volatility_check') {
+		return formInline;
+	} else if (formInline.ruleCode == 'rows_check') {
+		let v = panelList.value[11].defaultValue;
+		return Object.assign({}, formInline, {
+			rows: v,
+			ruleName: ruleName
+		});
+	}
+}
+
+defineExpose({
+	getFormInfo,
+	ruleFormRef
+});
+
+</script>
+
+<template>
+	<Form ref="ruleFormRef" :readonly="props.readonly" :itemList="formItems" formId="edit-standard-form"
+		:rules="formRules" col="col3" @btnClick="formBtnClick" @selectChange="selectChange"
+		@radioGroupChange="(val, inlineValue) => radioGroupChange(val, inlineValue, false)" />
+
+	<!-- 空值， 重复数据检查 -->
+	<el-dialog v-model="dialogVisible" title="规则设置" width="850" :modal="true" :close-on-click-modal="false"
+		destroy-on-close align-center>
+		<div class="filter-dialog-content" :style="{ height: '500px' }">
+			<div class="filter-table-list">
+				<div class="left-title">质检表</div>
+				<ListPanel class="list_unit" ref="formListRef" :listInfo="tableListInfo" @itemClick="listItemClick" />
+			</div>
+			<div class="empty-table-field">
+				<div class="left-title">字段列表详情</div>
+				<Table style="height: calc(100% - 32px)" ref="nullTableRef" :tableInfo="nullTableInfo"
+					@table-checkbox-select-change="nullTableCheckboxSelectChange"
+					@table-checkbox-all-select-change="nullTableCheckboxAllSelectChange"></Table>
+			</div>
+			<div class="empty-edit">
+				<div class="header-title">
+					<span class="left-title">已选</span>
+					<span v-if="!props.readonly" class="text_btn" @click="emptySelectFields()">清空</span>
+				</div>
+				<div class="tags_list_panel">
+					<div class="table_item" v-for="(tableFields, key) in nullSelectFields" :key="key">
+						<div class="tag_title">{{ key }}</div>
+						<div class="tag_item" v-for="(tag, index) in (tableFields || [])" :key="tag.guid">
+							<span class="tag">
+								<ellipsis-tooltip :content="`${tag.enName}(${tag.chName})`" class-name="tag-width"
+									:refName="'tooltipOver' + tag.guid"></ellipsis-tooltip>
+								<el-icon v-if="!props.readonly" @click="uncheck(tag, index, key)">
+									<Close />
+								</el-icon>
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<template #footer v-if="!props.readonly">
+			<div class="dialog-footer">
+				<el-button @click="cancelDialog">取消</el-button>
+				<el-button @click="submit" type="primary" v-preReClick>确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+
+	<!-- 自定义sql -->
+	<el-dialog v-model="sqlDialogVisible" title="规则设置" width="800" :modal="true" :close-on-click-modal="false"
+		destroy-on-close align-center>
+		<div class="sql-dialog-content" :style="{ height: '500px' }">
+			<div class="sql-table-list">
+				<div class="left-title">质检表</div>
+				<ListPanel class="list_unit" ref="sqlFormListRef" :listInfo="tableListInfo" @itemClick="listItemClick" />
+			</div>
+			<div class="table-field">
+				<div class="left-title">字段列表详情</div>
+				<Table style="height: calc(100% - 32px)" ref="sqlFormTableRef" :tableInfo="sqlTableFieldInfo"
+					@tableBtnClick="sqlTableBtnClick"></Table>
+			</div>
+			<div class="sql-edit">
+				<div class="field-title">
+					<span>自定义sql</span>
+					<el-button v-if="!props.readonly" @click="validateSql" link v-preReClick>验证</el-button>
+				</div>
+				<el-input v-model="sqlTableFilters[dialogSelectSubjectTable.enName]" ref="sqlInputRef" type="textarea"
+					:disabled="props.readonly" :autosize="true" resize="none" @change="handleSqlChange"></el-input>
+				<div class="left-title">质检字段<label style="color: red;">*</label></div>
+				<el-select v-model="sqlSelectField[dialogSelectSubjectTable.enName]" placeholder="请选择" multiple filterable
+					clearable :disabled="props.readonly">
+					<el-option v-for="opt in sqlFieldsList[dialogSelectSubjectTable.enName]" :key="opt['value']"
+						:label="opt['value']" :value="opt['value']" />
+				</el-select>
+			</div>
+		</div>
+
+		<template #footer v-if="!props.readonly">
+			<div class="dialog-footer">
+				<el-button @click="cancelSqlDialog" v-preReClick>取消</el-button>
+				<el-button @click="submitSql" type="primary" v-preReClick>确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+
+	<!-- 逻辑检查 -->
+	<el-dialog v-model="filterDialogVisible" title="规则设置" width="850" :modal="true" :close-on-click-modal="false"
+		destroy-on-close align-center>
+		<div class="filter-dialog-content" :style="{ height: '500px' }">
+			<div class="filter-table-list">
+				<div class="left-title">质检表</div>
+				<ListPanel class="list_unit" ref="filterFormListRef" :listInfo="tableListInfo" @itemClick="listItemClick" />
+			</div>
+			<div class="table-field">
+				<div class="left-title">字段列表详情</div>
+				<Table style="height: calc(100% - 32px)" ref="formTableRef" :tableInfo="tableInfo"
+					@tableBtnClick="filterTableBtnClick"></Table>
+			</div>
+			<div class="filter-edit">
+				<div class="left-title">{{ '质检字段' }}<label style="color: red;">*</label></div>
+				<el-input :model-value="dialogSelectSubjectTableField[dialogSelectSubjectTable.enName]?.enName || ''"
+					:disabled="true" placeholder="请从左侧列表选择质检字段"></el-input>
+				<div class="field-title">
+					<span>质检条件</span>
+					<el-button v-if="!props.readonly" @click="validateFilter" link v-preReClick>验证</el-button>
+				</div>
+				<el-input v-model="tableFilters[dialogSelectSubjectTable.enName]" @change="handleFilterChange"
+					ref="filterInputRef" type="textarea" :autosize="true" resize="none"></el-input>
+			</div>
+		</div>
+
+		<template #footer v-if="!props.readonly">
+			<div class="dialog-footer">
+				<el-button @click="cancelFilterDialog" v-preReClick>取消</el-button>
+				<el-button @click="submitFilter" type="primary" v-preReClick>确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+
+	<!-- 表行数检查 -->
+	<el-dialog v-model="tableRowDialogVisible" title="规则设置" width="750" :modal="true" :close-on-click-modal="false"
+		destroy-on-close align-center>
+		<div class="row-dialog-content">
+			<el-table ref="rowTableRef" :data="tableRowRulesData" height="100%" :highlight-current-row="true" stripe
+				v-loading="tableRowRulesDataLoading" tooltip-effect="light" border
+				:style="{ height: 'calc(100% - 28px)', width: 'auto', 'max-width': '100%', display: 'inline-block' }">
+				<el-table-column prop="mainTable" label="选择主表" width="200px" align="left" show-overflow-tooltip>
+					<template #default="scope">
+						<el-select v-if="!props.readonly" v-model="scope.row['mainTable']" placeholder="请选择">
+							<el-option v-for="opt in toSubjectTables" :key="opt['guid']" :label="opt['label']" :value="opt['guid']" />
+						</el-select>
+						<span v-else>{{ scope.row['mainTableName'] + `(${scope.row['mainTableZhName']})` }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="contrastSubjectGuid" label="选择对比表" width="200px" align="left" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tree-select v-if="!props.readonly" ref="treeSelectRef" filterable clearable
+							v-model="scope.row['contrastSubjectGuid']" node-key="guid" :data="contrastSubjects" placeholder="请选择" lazy
+							:load="(node, resolve) => treeSelectLoad(node, resolve)" :default-expanded-keys="defaultExpandedKeys"
+							:auto-expand-parent="true" :default-checked-keys="[props.value.contrastSubjectGuid]"
+							:filter-node-method="contrastSubjectInputFilterMethod" :props="{
+		value: 'guid',
+		label: 'name',
+		children: 'children',
+		isLeaf: 'isLeaf'
+	}">
+						</el-tree-select>
+						<span v-else>{{ scope.row['contrastSubjectName'] + `(${scope.row['contrastSubjectZhName']})` }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="differenceRange" label="差值范围" width="200px" :align="props.readonly ? 'right' : 'left'"
+					show-overflow-tooltip>
+
+					<template #default="scope">
+						<el-input-number v-if="!props.readonly" v-model="scope.row['differenceRange']" :step="1" :min="0"
+							step-strictly />
+						<span v-else>{{ scope.row['differenceRange'] }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="100px" align="left" fixed="right" v-if="!props.readonly">
+
+					<template #default="scope">
+						<span class="text_btn" @click="deleteRow(scope)" v-preReClick>删除</span>
+					</template>
+				</el-table-column>
+			</el-table>
+			<div class="row-add-btn" v-if="!props.readonly">
+				<el-button link @click="addRowRules" :disabled="toSubjectTables.length == 1 && tableRowRulesData.length == 1"
+					:icon="CirclePlus" v-preReClick>添加规则</el-button>
+			</div>
+		</div>
+
+		<template #footer v-if="!props.readonly">
+			<div class="dialog-footer">
+				<el-button @click="cancelTableRowDialog" v-preReClick>取消</el-button>
+				<el-button @click="submitTableRow" type="primary" v-preReClick>确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.filter-dialog-content {
+	display: flex;
+	flex-direction: row;
+	margin: -8px -24px;
+
+	.left-title {
+		height: 32px;
+		font-size: 14px;
+		color: #212121;
+		line-height: 32px;
+		padding-left: 8px;
+	}
+
+	.el-input {
+		margin-left: 8px;
+		width: calc(100% - 16px);
+	}
+
+	.filter-table-list {
+		width: 200px;
+
+		.list_unit {
+			height: calc(100% - 32px);
+			overflow-y: auto;
+			border-top: 1px solid #d9d9d9;
+		}
+	}
+
+	.table-field {
+		width: 460px;
+
+		.left-title {
+			border-left: 1px solid #d9d9d9;
+			border-right: 1px solid #d9d9d9;
+		}
+	}
+
+	.empty-table-field {
+		.left-title {
+			border-left: 1px solid #d9d9d9;
+			border-right: 1px solid #d9d9d9;
+		}
+	}
+
+	.filter-edit {
+		width: calc(100% - 560px);
+	}
+
+	.field-title {
+		height: 32px;
+		font-size: 14px;
+		color: #212121;
+		line-height: 32px;
+		padding-left: 8px;
+		padding-right: 8px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	:deep(.el-textarea) {
+		height: calc(100% - 96px);
+		padding: 0px 8px 8px 8px;
+
+		.el-textarea__inner {
+			min-height: 100% !important;
+			border-radius: 0px;
+		}
+	}
+
+	.empty-edit {
+		flex-grow: 1;
+		min-width: 0;
+
+		.header-title {
+			padding-right: 12px;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.tags_list_panel {
+			border-top: 1px solid #d9d9d9;
+			height: calc(100% - 32px);
+			overflow-y: auto;
+
+			.table_item {
+				padding: 8px;
+
+				.tag_title {
+					font-size: 12px;
+					color: #666666;
+					line-height: 18px;
+				}
+
+				.tag_item {
+					padding: 4px 0px;
+
+					.tag {
+						display: inline-flex;
+						font-size: 12px;
+						color: var(--el-color-regular);
+						line-height: 24px;
+						padding-left: 8px;
+						border: 1px solid transparent;
+						cursor: pointer;
+						align-items: center;
+						width: 100%;
+						position: relative;
+
+						:deep(.tag-width) {
+							width: calc(100% - 20px);
+						}
+
+						&>span {
+							max-width: calc(100% - 20px);
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						.el-icon {
+							margin-left: 8px;
+							margin-right: 8px;
+							color: var(--el-color-primary);
+							opacity: 0;
+							float: right;
+							right: 0px;
+							position: absolute;
+						}
+
+						&:hover {
+							border-color: var(--el-color-primary);
+
+							.el-icon {
+								opacity: 1;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+}
+
+.row-dialog-content {
+	height: 300px;
+
+	:deep(.el-table) {
+		& td.el-table__cell {
+			padding: 2px 0;
+			height: 36px;
+		}
+	}
+
+	.row-add-btn {
+		.el-button--default {
+			padding: 4px 0px;
+		}
+
+		:deep(.el-icon) {
+			width: 16px;
+			height: 16px;
+
+			svg {
+				width: 16px;
+				height: 16px;
+			}
+		}
+	}
+}
+
+.sql-dialog-content {
+	display: flex;
+	flex-direction: row;
+	margin: -8px -24px;
+	height: 400px;
+
+	.left-title {
+		height: 32px;
+		font-size: 14px;
+		color: #212121;
+		line-height: 32px;
+		padding-left: 12px;
+		padding-right: 8px;
+	}
+
+	.sql-table-list {
+		width: 200px;
+		border-right: 1px solid #d9d9d9;
+
+		.list_unit {
+			height: calc(100% - 32px);
+			overflow-y: auto;
+			border-top: 1px solid #d9d9d9;
+		}
+	}
+
+	.sql-edit {
+		width: calc(100% - 360px);
+
+		.el-select {
+			margin-left: 12px;
+			margin-right: 8px;
+			width: calc(100% - 20px);
+		}
+	}
+
+	.field-title {
+		height: 32px;
+		font-size: 14px;
+		color: #212121;
+		line-height: 32px;
+		padding-left: 8px;
+		padding-right: 8px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	:deep(.el-textarea) {
+		height: calc(100% - 120px);
+		padding: 0px 8px 0px 8px;
+
+		.el-textarea__inner {
+			min-height: 100% !important;
+			border-radius: 0px;
+		}
+	}
+}
+
+.border-left {
+	border-left: 1px solid #d9d9d9;
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: ruleModel
+</route>
+
+<script lang="ts" setup name="ruleModel">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import StepBar from "@/components/StepBar/index.vue";
+import TreeTransfer from "@/components/TreeTransfer/index.vue";
+import {
+  getSubjectTableTree,
+  getSubjectTableByDomain,
+  saveQualityTable,
+  getRuleTypeList,
+  getSmallCategoryList,
+  getLargeCategoryList,
+} from '@/api/modules/dataQuality';
+import ruleForm from "../data_quality/ruleForm.vue";
+import useUserStore from "@/store/modules/user";
+import useDataQualityStore from "@/store/modules/dataQuality";
+
+const userStore = useUserStore();
+const dataQualityStore = useDataQualityStore();
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute();
+
+const modelGroupGuid: any = ref(route.query.groupGuid);
+const fullPath = route.fullPath;
+
+const fullScreenLoading = ref(false);
+
+const step = ref(0);
+const stepsInfo = ref({
+  step: step.value,
+  list: [
+    {
+      title: '选择表、字段',
+      value: 1,
+      tooltip: {
+        content: '可多选表和字段，批量为表和字段定义规则提示文字提示文字',
+        className: 'step_title_tooltip',
+        effect: 'light',
+      }
+    },
+    { title: '定义规则', value: 2 }
+  ]
+})
+
+/** 一定要带上pid，否则穿梭在右边后不是树结构。 */
+const dsFromTreeDataLoading = ref(false);
+const dsFromTreeData: any = ref([])
+
+const dsToTreeData: any = ref([]);
+
+const toSubjectTables: any = ref([]);
+
+const getSubjectTableTreeData = () => {
+  dsFromTreeDataLoading.value = true;
+  getSubjectTableTree({}).then((res: any) => {
+    dsFromTreeDataLoading.value = false;
+    if (res.code == proxy.$passCode) {
+      dsFromTreeData.value = res.data?.map(d => {
+        d.parentGuid = 0;
+        return d;
+      }) || [];
+    }
+  })
+}
+
+const getSubjectTableByDomainData = (guid) => {
+  return getSubjectTableByDomain(guid).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      return res.data?.map(d => {
+        d.isLeaf = true;
+        d.name = `${d.enName}(${d.chName})`;
+        d.parentGuid = guid;
+        return d;
+      }) || [];
+    }
+  })
+}
+
+const handleSubjectTableLazyFn = (node, resolve) => {
+  if (node.level === 0) {
+    return resolve(dsFromTreeData.value);
+  }
+  if (node.level === 1) {
+    let guid = node.data.guid;
+    resolve(dsFromTreeData.value.find((t: any) => t.guid === guid)?.children || []);
+  } else if (node.level === 2) {
+    getSubjectTableByDomainData(node.data.guid).then((d) => {
+      node.data.children = d;
+      resolve(d);
+    })
+  }
+}
+
+const handleSubjectCheckedChange = (nodeObj, treeObj, checkAll, treeNode) => {
+  if (treeObj.checkedKeys?.includes(nodeObj.guid)) {
+    if (nodeObj.parentGuids?.length) {
+      treeNode?.expand();
+    } else if (nodeObj.parentGuid === 0) {
+      treeNode?.expand();
+      nextTick(() => {
+        treeNode.childNodes?.forEach(n => n.expand());
+      })
+    }
+  }
+}
+
+const ruleTypeList = ref([]);
+const smallCategoryList = ref([]);
+const largeCategoryList = ref([]);
+
+onBeforeMount(() => {
+  getSubjectTableTreeData();
+  getRuleTypeList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      ruleTypeList.value = res.data?.map((d: any) => {
+        d.label = d.ruleName;
+        d.value = d.ruleCode;
+        return d;
+      }) || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  getSmallCategoryList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      smallCategoryList.value = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  getLargeCategoryList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      largeCategoryList.value = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+})
+
+const ruleFormRef = ref();
+
+const changeStep = (val, skip = false) => {
+  if (val === 2) {
+    if (!dsToTreeData.value.length) {
+      ElMessage.error('已选主题表不能为空');
+      return;
+    }
+    toSubjectTables.value = [];
+    dsToTreeData.value.forEach(d => {
+      d.children.forEach(c => {
+        c.children.forEach(child => {
+          child.label = `${child.enName}(${child.chName})`;
+          toSubjectTables.value.push(child);
+        })
+      })
+    });
+    step.value = val - 1;
+    stepsInfo.value.step = val - 1
+  } else {
+    step.value = val - 1;
+    stepsInfo.value.step = val - 1
+  }
+};
+
+const cancel = () => {
+  ElMessageBox.confirm(
+    "当前页面尚未保存，确定放弃修改吗？",
+    "提示",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  )
+    .then(() => {
+      userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+      router.push({
+        name: 'qualityRules',
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消",
+      });
+    });
+}
+
+/** 将新建规则之后转化为对应质检表的规则。 */
+const transformRulesInfo = (info: any) => {
+  let modelRules: any = []; //key为质检表，值为信息。
+  if (info.ruleCode == "volatility_check") {//表行数波动率。
+    let subjectTables = toSubjectTables.value;
+    info.qualityModelGuids?.forEach((modelGuid: string) => {
+      let tableInfo = subjectTables.find(t => t.guid === modelGuid);
+      modelRules.push(Object.assign({}, {
+        modelGroupGuid: modelGroupGuid.value,
+        name: tableInfo.chName,
+        subjectName: tableInfo.enName,
+        subjectGuid: tableInfo.guid,
+        dataSourceGuid: tableInfo.dataSourceGuid,
+        databaseName: tableInfo.dataServerName,
+        modelRuleConfList: [Object.assign({}, info, {
+          qualityModelGuid: modelGuid
+        })]
+      }));
+    })
+  }
+  else if (info.ruleCode == 'null_value_check' || info.ruleCode == 'repeate_data_check') {
+    let subjectTables = toSubjectTables.value;
+    for (const ds in info.modelFields) {
+      let fields = info.modelFields[ds];
+      let tableInfo = subjectTables.find(t => t.chName === ds);
+      modelRules.push(Object.assign({}, {
+        modelGroupGuid: modelGroupGuid.value,
+        name: tableInfo.chName,
+        subjectName: tableInfo.enName,
+        subjectGuid: tableInfo.guid,
+        dataSourceGuid: tableInfo.dataSourceGuid,
+        databaseName: tableInfo.dataServerName,
+        modelRuleConfList: [Object.assign({}, info, {
+          ruleField: fields?.map(f => {
+            return {
+              guid: f.guid,
+              enName: f.enName,
+              chName: f.chName
+            }
+          }) || [],
+        })]
+      }));
+    }
+  } else if (info.ruleCode == 'logic_check') {
+    let subjectTables = toSubjectTables.value;
+    for (const ds in info.ruleFields) {
+      let fields = info.ruleFields[ds];
+      let tableInfo = subjectTables.find(t => t.enName === ds);
+      modelRules.push(Object.assign({}, {
+        modelGroupGuid: modelGroupGuid.value,
+        name: tableInfo.chName,
+        subjectName: tableInfo.enName,
+        subjectGuid: tableInfo.guid,
+        dataSourceGuid: tableInfo.dataSourceGuid,
+        databaseName: tableInfo.dataServerName,
+        modelRuleConfList: [Object.assign({}, info, {
+          ruleField: [{
+            guid: fields.guid,
+            enName: fields.enName,
+            chName: fields.chName
+          }],
+          conditionSql: info.conditionSqls?.[ds],
+          conditionSqls: '',
+          ruleFields: ''
+        })]
+      }));
+    }
+  } else if (info.ruleCode == 'custom_sql') {
+    let subjectTables = toSubjectTables.value;
+    for (const ds in info.ruleFields) {
+      let fields = info.ruleFields[ds];
+      let tableInfo = subjectTables.find(t => t.enName === ds);
+      modelRules.push(Object.assign({}, {
+        modelGroupGuid: modelGroupGuid.value,
+        name: tableInfo.chName,
+        subjectName: tableInfo.enName,
+        subjectGuid: tableInfo.guid,
+        dataSourceGuid: tableInfo.dataSourceGuid,
+        databaseName: tableInfo.dataServerName,
+        modelRuleConfList: [Object.assign({}, info, {
+          ruleField: fields?.map(f => {
+            return {
+              enName: f
+            }
+          }) || [],
+          customSql: info.customSqls[ds],
+          fieldSelects: info.sqlFieldsList?.[ds] || [],
+          conditionSqls: '',
+          ruleFields: ''
+        })]
+      }));
+    }
+  } else if (info.ruleCode == 'rows_check') {
+    let subjectTables = toSubjectTables.value;
+    info.rows.forEach(row => {
+      let tableInfo = subjectTables.find(t => t.guid === row.mainTable);
+      modelRules.push(Object.assign({}, {
+        modelGroupGuid: modelGroupGuid.value,
+        name: tableInfo.chName,
+        subjectName: tableInfo.enName,
+        subjectGuid: tableInfo.guid,
+        dataSourceGuid: tableInfo.dataSourceGuid,
+        databaseName: tableInfo.dataServerName,
+        modelRuleConfList: [Object.assign({}, info, {
+          differenceRange: row.differenceRange,
+          rows: [],
+          contrastSubjectGuid: row.contrastSubjectGuid
+        })]
+      }));
+    })
+  }
+  return modelRules;
+}
+
+const save = () => {
+  ruleFormRef.value?.ruleFormRef?.ruleFormRef?.validate((valid) => {
+    if (valid) {
+      let v = ruleFormRef.value?.getFormInfo();
+      let params = transformRulesInfo(v);
+      fullScreenLoading.value = true;
+      saveQualityTable(params).then((res: any) => {
+        fullScreenLoading.value = false;
+        if (res.code == proxy.$passCode) {
+          ElMessage.success('新建质检表保存成功');
+          //跳到对应的分组下
+          router.push({
+            name: 'qualityRules'
+          });
+          userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+          dataQualityStore.set(modelGroupGuid.value);
+        } else {
+          ElMessage.error(res.msg);
+        }
+      })
+    }
+  });
+}
+
+</script>
+
+<template>
+  <div class="container_wrap full" v-loading="fullScreenLoading">
+    <div class="content_main">
+      <div class="top_tool_wrap">
+        <StepBar :steps-info="stepsInfo" />
+      </div>
+      <div class="operator_panel_wrap first-step-content" v-show="step == 0">
+        <div class="operator_panel is-block">
+          <div class="panel_title">
+            <div class="title_text">
+              <span>选择主题表</span>
+              <span class="tips_text">选择需要添加质检规则的主题表</span>
+            </div>
+          </div>
+          <TreeTransfer mode="transfer" :title="['主题表', '已选表']" pid="parentGuid"
+            :from-tree-data-loading="dsFromTreeDataLoading" :lazy="true" :checkOnClickNode="true"
+            :from_checked_all="false" :from_data="dsFromTreeData" :to_data="dsToTreeData" node_key="guid"
+            :transferOpenNode="true" width="70%" :defaultProps="{
+    label: 'name',
+    value: 'guid'
+  }" :lazyFn="handleSubjectTableLazyFn" @left-check-change="handleSubjectCheckedChange" height="calc(100% - 64px)">
+          </TreeTransfer>
+        </div>
+      </div>
+      <div class="operator_panel_wrap" v-show="step == 1">
+        <div class="operator_panel is-block">
+          <div class="panel_title">
+            <div class="title_text">
+              <span>定义规则</span>
+              <span class="tips_text">可为多表配置表级规则、字段级规则</span>
+            </div>
+          </div>
+          <div class="panel_content">
+            <div class="form_panel">
+              <ruleForm ref="ruleFormRef" :toSubjectTables="toSubjectTables" :ruleTypeList="ruleTypeList"
+                :largeCategoryList="largeCategoryList" :smallCategoryList="smallCategoryList"></ruleForm>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_tool_wrap">
+      <template v-if="step == 0">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="changeStep(2)">下一步</el-button>
+      </template>
+
+      <template v-else>
+        <el-button @click="cancel">取消</el-button>
+        <el-button @click="changeStep(1)">上一步</el-button>
+        <el-button type="primary" @click="save" v-preReClick>保存</el-button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top_tool_wrap {
+  width: 100%;
+  height: 72px;
+  margin: 8px 0 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :deep(.el-steps) {
+    width: 30%;
+  }
+}
+
+.content_main {
+  height: calc(100% - 40px);
+  padding: 0 16px 16px;
+  overflow: hidden auto;
+
+  :deep(.transfer_panel_wrap) {
+    .transfer_panel {
+      box-shadow: 0 0 0 1px var(--el-border-color-regular);
+    }
+  }
+
+  .first-step-content {
+    height: calc(100% - 80px);
+
+    .wl-transfer {
+      margin: 8px 16px;
+      height: calc(100% - 64px);
+      width: 70%;
+      min-width: 600px;
+    }
+  }
+
+  .operator_panel_wrap {
+    height: calc(100% - 80px);
+    min-height: 400px;
+    display: flex;
+    justify-content: space-between;
+
+    :deep(.el-button) {
+      &.is-text {
+        height: auto;
+        padding: 0;
+      }
+    }
+
+    .operator_panel {
+      width: calc(50% - 5px);
+      height: 100%;
+      border: 1px solid #d9d9d9;
+      overflow: hidden;
+
+      &.is-block {
+        width: 100%;
+      }
+
+      .panel_title {
+        height: 48px;
+        padding: 0 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: var(--el-color-regular);
+        font-weight: 600;
+        border-bottom: 1px solid #d9d9d9;
+        background-color: #f5f5f5;
+
+        .tips_text {
+          font-size: 14px;
+          color: #999;
+          font-weight: normal;
+          margin-left: 8px;
+        }
+      }
+
+      .panel_content {
+        height: calc(100% - 46px);
+
+        >div {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .form_panel {
+          padding: 8px 16px 0;
+          overflow: hidden auto;
+        }
+
+        .tree_search_input {
+          margin-bottom: 10px;
+        }
+
+        .list_panel {
+          padding: 10px 0;
+          overflow: hidden auto;
+
+          .list_item {
+            height: 32px;
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &:hover {
+              color: var(--g-sub-sidebar-menu-active-color);
+              background-color: var(--g-sub-sidebar-menu-active-bg);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .transfer_btns {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .el-button {
+      margin: 0 8px;
+
+      &+.el-button {
+        margin-top: 8px;
+      }
+    }
+  }
+}
+
+.bottom_tool_wrap {
+  height: 40px;
+  padding: 0 16px;
+  border-top: 1px solid #d9d9d9;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+    name: ruleModelEdit
+  </route>
+
+<script lang="ts" setup name="ruleModelEdit">
+import { ref } from "vue";
+import ruleForm from "../data_quality/ruleForm.vue";
+import { useRouter, useRoute } from "vue-router";
+import {
+  getRuleConfDetail,
+  getRuleTypeList,
+  getSmallCategoryList,
+  getLargeCategoryList,
+  updateModelRule
+} from '@/api/modules/dataQuality';
+import { ElMessage, ElMessageBox } from "element-plus";
+import useUserStore from "@/store/modules/user";
+import useDataQualityStore from "@/store/modules/dataQuality";
+
+const userStore = useUserStore();
+const dataQualityStore = useDataQualityStore();
+
+const { proxy } = getCurrentInstance() as any;
+
+const router = useRouter();
+const route = useRoute();
+const ruleGuid = route.query.guid;
+const fullPath = route.fullPath;
+
+const fullScreenLoading = ref(false);
+
+const detailLoading = ref(false);
+
+const detailInfo: any = ref({});
+
+const toSubjectTables: any = ref([]);
+
+const ruleType = ref('');
+
+const ruleFormRef = ref();
+
+const cancel = () => {
+  ElMessageBox.confirm(
+    "当前页面尚未保存，确定放弃修改吗？",
+    "提示",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  )
+    .then(() => {
+      userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+      router.push({
+        name: 'qualityRules',
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消",
+      });
+    });
+}
+
+/** 将新建规则之后转化为对应质检表的规则。 */
+const transformRulesInfo = (info: any) => {
+  if (info.ruleCode == "volatility_check") {//表行数波动率。
+    return Object.assign({}, info, {
+      guid: ruleGuid,
+      qualityModelGuid: detailInfo.value.qualityModelGuid,
+      ruleCode: detailInfo.value.ruleCode,
+    });
+  }
+  else if (info.ruleCode == 'null_value_check' || info.ruleCode == 'repeate_data_check') {
+    return Object.assign({}, info, {
+      guid: ruleGuid,
+      qualityModelGuid: detailInfo.value.qualityModelGuid,
+      ruleCode: detailInfo.value.ruleCode,
+      ruleField: info.modelFields[detailInfo.value.subjectZhName] || []
+    });
+  } else if (info.ruleCode === 'logic_check') {
+    let subjectName = detailInfo.value.subjectName;
+    let fields = info.ruleFields[subjectName];
+    return Object.assign({}, info, {
+      guid: ruleGuid,
+      qualityModelGuid: detailInfo.value.qualityModelGuid,
+      ruleCode: detailInfo.value.ruleCode,
+      ruleField: [{
+        guid: fields.guid,
+        enName: fields.enName,
+        chName: fields.chName
+      }],
+      conditionSql: info.conditionSqls?.[subjectName],
+      conditionSqls: '',
+      ruleFields: ''
+    });
+  } else if (info.ruleCode === 'custom_sql') {
+    let subjectGuid = detailInfo.value.subjectGuid;
+    return Object.assign({}, info, {
+      guid: ruleGuid,
+      qualityModelGuid: detailInfo.value.qualityModelGuid,
+      ruleCode: detailInfo.value.ruleCode,
+      customSql: info.customSqls?.[detailInfo.value.subjectName],
+      ruleField: info.ruleFields?.[detailInfo.value.subjectName]?.map(f => {
+        return {
+          enName: f
+        }
+      }) || [],
+      fieldSelects: info.sqlFieldsList?.[detailInfo.value.subjectName] || [],
+      customSqls: '',
+      ruleFields: ''
+    });
+  } else if (info.ruleCode == 'rows_check') {
+    return Object.assign({}, info, {
+      guid: ruleGuid,
+      qualityModelGuid: detailInfo.value.qualityModelGuid,
+      ruleCode: detailInfo.value.ruleCode,
+      contrastSubjectGuid: info.rows[0].contrastSubjectGuid,
+      differenceRange: info.rows[0].differenceRange,
+      rows: ''
+    });
+  }
+}
+
+const save = () => {
+  ruleFormRef.value?.ruleFormRef?.ruleFormRef?.validate((valid) => {
+    if (valid) {
+      let v = ruleFormRef.value?.getFormInfo();
+      let params = transformRulesInfo(v);
+      fullScreenLoading.value = true;
+      updateModelRule(params).then((res: any) => {
+        fullScreenLoading.value = false;
+        if (res.code == proxy.$passCode) {
+          ElMessage.success(`【${params.ruleConfName}】` + '质量规则编辑成功');
+          //跳到对应的分组下
+          router.push({
+            name: 'qualityRules'
+          });
+          userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+          dataQualityStore.setModelGuid(params.qualityModelGuid);
+        } else {
+          ElMessage.error(res.msg);
+        }
+      })
+    }
+  });
+}
+
+const getRuleDetailInfo = () => {
+  detailLoading.value = true;
+  getRuleConfDetail(ruleGuid).then((res: any) => {
+    detailLoading.value = false;
+    if (res.code == proxy.$passCode) {
+      let data = res.data || {};
+      detailInfo.value = data;
+      ruleType.value = detailInfo.value.ruleCode;
+      toSubjectTables.value = [{
+        guid: detailInfo.value.subjectGuid, //编辑的时候显示的是主题表
+        enName: detailInfo.value.subjectName,
+        chName: detailInfo.value.subjectZhName,
+        label: `${detailInfo.value.subjectName}(${detailInfo.value.subjectZhName})`
+      }]
+      detailInfo.value.qualityModelGuids = [detailInfo.value.subjectGuid];
+      if (fullPath === route.fullPath) {
+        document.title = `编辑-${data.ruleConfName}(${data.subjectZhName})`;
+      }
+      let tab: any = userStore.tabbar.find((tab: any) => tab.fullPath === fullPath);
+      if (tab) {
+        tab.meta.title = `编辑-${data.ruleConfName}(${data.subjectZhName})`;
+      }
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+}
+
+const ruleTypeList = ref([]);
+const smallCategoryList = ref([]);
+const largeCategoryList = ref([]);
+
+onBeforeMount(() => {
+  getRuleDetailInfo();
+  getRuleTypeList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      ruleTypeList.value = res.data?.map((d: any) => {
+        d.label = d.ruleName;
+        d.value = d.ruleCode;
+        return d;
+      }) || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  getSmallCategoryList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      smallCategoryList.value = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  getLargeCategoryList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      largeCategoryList.value = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+})
+
+</script>
+
+<template>
+  <div class="content_main" v-loading="fullScreenLoading">
+    <div class="operator_panel_wrap">
+      <div class="operator_panel is-block" v-loading="detailLoading">
+        <div class="panel_title">
+          <div class="title_text">
+            <span>规则</span>
+          </div>
+        </div>
+        <div class="panel_content">
+          <div class="form_panel">
+            <ruleForm ref="ruleFormRef" :toSubjectTables="toSubjectTables" :ruleTypeValue="ruleType" :value="detailInfo"
+              :ruleTypeList="ruleTypeList" :largeCategoryList="largeCategoryList"
+              :smallCategoryList="smallCategoryList"></ruleForm>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_tool_wrap">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="save">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content_main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.operator_panel_wrap {
+  height: auto;
+  min-height: 200px;
+  display: flex;
+  justify-content: space-between;
+  margin: 16px;
+  max-height: calc(100% - 72px);
+
+  :deep(.el-button) {
+    &.is-text {
+      height: auto;
+      padding: 0;
+    }
+  }
+
+  .operator_panel {
+    width: calc(50% - 5px);
+    height: 100%;
+    border: 1px solid #d9d9d9;
+    overflow: hidden;
+
+    &.is-block {
+      width: 100%;
+    }
+
+    .panel_title {
+      height: 48px;
+      padding: 0 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: var(--el-color-regular);
+      font-weight: 600;
+      border-bottom: 1px solid #d9d9d9;
+
+      .tips_text {
+        font-size: 14px;
+        color: #999;
+        font-weight: normal;
+        margin-left: 8px;
+      }
+    }
+
+    .panel_content {
+      height: calc(100% - 46px);
+
+      >div {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .form_panel {
+        padding: 8px 16px 0;
+        overflow: hidden auto;
+      }
+    }
+  }
+}
+
+.bottom_tool_wrap {
+  height: 40px;
+  padding: 0 16px;
+  border-top: 1px solid #d9d9d9;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: ruleTemplate
+</route>
+
+<script lang="ts" setup name="ruleTemplate">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { CaretRight, CaretBottom, Delete, Plus } from '@element-plus/icons-vue'
+import ruleForm from "../data_quality/ruleForm.vue";
+import {
+  getRuleTypeList,
+  getSmallCategoryList,
+  getLargeCategoryList,
+  getModelDetail,
+  saveQualityTable
+} from '@/api/modules/dataQuality';
+import useUserStore from "@/store/modules/user";
+import useDataQualityStore from "@/store/modules/dataQuality";
+
+const userStore = useUserStore();
+const dataQualityStore = useDataQualityStore();
+
+const router = useRouter();
+const route = useRoute();
+
+const { proxy } = getCurrentInstance() as any;
+
+const modelGuid = route.query.modelGuid;
+const fullPath = route.fullPath;
+
+const modelDetailInfo: any = ref({});
+
+const toSubjectTables: any = ref([]);
+
+const ruleList: any = ref([
+  {
+    open: true
+  }
+])
+
+const addRule = () => {
+  ruleList.value.push({
+    open: true
+  });
+};
+
+const deleteRule = (item, index) => {
+  ElMessageBox.confirm(`确定删除【规则${index + 1}】吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: 'warning',
+  }).then(() => {
+    ruleList.value.splice(index, 1);
+  });
+}
+
+const toRouterPath = (url) => {
+  router.push({
+    path: url,
+  });
+};
+
+const fullScreenLoading = ref(false);
+
+const ruleFormRef = ref();
+
+const transformRulesInfo = (info) => {
+  if (info.ruleCode == "volatility_check") {//表行数波动率。
+    return Object.assign({}, info, {
+      qualityModelGuid: modelGuid,
+      ruleCode: info.ruleCode,
+    });
+  }
+  else if (info.ruleCode == 'null_value_check' || info.ruleCode == 'repeate_data_check') {
+    return Object.assign({}, info, {
+      qualityModelGuid: modelGuid,
+      ruleCode: info.ruleCode,
+      ruleField: info.modelFields[modelDetailInfo.value.name] || []
+    });
+  } else if (info.ruleCode === 'logic_check') {
+    let subjectName = modelDetailInfo.value.subjectName;
+    let fields = info.ruleFields[subjectName];
+    return Object.assign({}, info, {
+      qualityModelGuid: modelGuid,
+      ruleCode: info.ruleCode,
+      ruleField: [{
+        guid: fields.guid,
+        enName: fields.enName,
+        chName: fields.chName
+      }],
+      conditionSql: info.conditionSqls?.[subjectName],
+      conditionSqls: '',
+      ruleFields: ''
+    });
+  } else if (info.ruleCode === 'custom_sql') {
+    let subjectGuid = modelDetailInfo.value.subjectGuid;
+    return Object.assign({}, info, {
+      qualityModelGuid: modelGuid,
+      ruleCode: info.ruleCode,
+      customSql: info.customSqls?.[modelDetailInfo.value.subjectName],
+      ruleField:  info.ruleFields?.[modelDetailInfo.value.subjectName]?.map(f => {
+        return {
+          enName: f
+        }
+      }) || [],
+      fieldSelects: info.sqlFieldsList?.[modelDetailInfo.value.subjectName] || [],
+      customSqls: '',
+      ruleFields: ''
+    });
+  } else if (info.ruleCode == 'rows_check') {
+    return Object.assign({}, info, {
+      qualityModelGuid: modelGuid,
+      ruleCode: info.ruleCode,
+      contrastSubjectGuid: info.rows[0].contrastSubjectGuid,
+      differenceRange: info.rows[0].differenceRange,
+      rows: ''
+    });
+  }
+}
+
+const save = () => {
+  if (!ruleList.value?.length) {
+    ElMessage.error('新增规则不能为空');
+    return;
+  }
+  let psList: Promise<void>[] = [];
+  ruleFormRef.value.forEach((form, index) => {
+    psList.push(new Promise((resolve, reject) => {
+      form.ruleFormRef.ruleFormRef.validate(valid => {
+        if (valid) {
+          resolve();
+        } else {
+          ruleList.value[index].open = true;
+          reject();
+        }
+      });
+    }));
+  })
+  Promise.all(psList).then((res: any) => {
+    let submitInfos: any = [];
+    ruleFormRef.value.forEach(form => {
+      let info = form.getFormInfo();
+      let params = transformRulesInfo(info);
+      submitInfos.push(params);
+    });
+    fullScreenLoading.value = true;
+    saveQualityTable([{
+      modelGroupGuid: modelDetailInfo.value.modelGroupGuid,
+      name: modelDetailInfo.value.name,
+      subjectGuid: modelDetailInfo.value.subjectGuid,
+      subjectName: modelDetailInfo.value.subjectName,
+      dataSourceGuid: modelDetailInfo.value.dataSourceGuid,
+      modelRuleConfList: submitInfos
+    }]).then((res: any) => {
+      fullScreenLoading.value = false;
+      if (res.code == proxy.$passCode) {
+        ElMessage.success('新建规则保存成功');
+        router.push({
+          name: 'qualityRules'
+        });
+        userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+        dataQualityStore.setModelGuid(modelGuid);
+      } else {
+        ElMessage.error(res.msg);
+      }
+    })
+  }).catch(() => {
+  });
+}
+
+const ruleTypeList = ref([]);
+const smallCategoryList = ref([]);
+const largeCategoryList = ref([]);
+
+onBeforeMount(() => {
+  getModelDetail(modelGuid).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      let data = res.data || {};
+      modelDetailInfo.value = data;
+      if (data.subjectGuid) {
+        toSubjectTables.value = [{
+          guid: data.subjectGuid,
+          enName: data.subjectName,
+          chName: data.name,
+          label: `${data.subjectName}(${data.name})`
+        }];
+      }
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  getRuleTypeList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      ruleTypeList.value = res.data?.map((d: any) => {
+        d.label = d.ruleName;
+        d.value = d.ruleCode;
+        return d;
+      }) || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  getSmallCategoryList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      smallCategoryList.value = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+  getLargeCategoryList().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      largeCategoryList.value = res.data || [];
+    } else {
+      ElMessage.error(res.msg);
+    }
+  })
+})
+
+const cancel = () => {
+  ElMessageBox.confirm(
+    "当前页面尚未保存，确定放弃修改吗？",
+    "提示",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  )
+    .then(() => {
+      userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
+      router.push({
+        name: 'qualityRules',
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消",
+      });
+    });
+}
+
+</script>
+
+<template>
+  <div class="container_wrap full" v-loading="fullScreenLoading">
+    <div class="content_main">
+      <div class="operator_panel_wrap">
+        <div class="operator_panel is-block" v-for="(item, index) in ruleList">
+          <div class="panel_title" :style="{ 'border-bottom': item.open ? '1px solid #d9d9d9' : 'none' }">
+            <div class="title_text" @click="item.open = !item.open">
+              <el-icon class="text_icon">
+                <CaretRight v-show="!item.open" />
+                <CaretBottom v-show="item.open" />
+              </el-icon>
+              <span>规则{{ index + 1 }}</span>
+            </div>
+            <div class="title_tool" @click="deleteRule(item, index)">
+              <el-icon :size="20" color="#b2b2b2">
+                <Delete />
+              </el-icon>
+            </div>
+          </div>
+          <div class="panel_content" v-show="item.open">
+            <div class="form_panel">
+              <ruleForm ref="ruleFormRef" :toSubjectTables="toSubjectTables" :ruleTypeList="ruleTypeList"
+                :largeCategoryList="largeCategoryList" :smallCategoryList="smallCategoryList" :isSingle="true">
+              </ruleForm>
+            </div>
+          </div>
+        </div>
+        <div class="bottm_tools" @click="addRule">
+          <el-icon>
+            <Plus />
+          </el-icon>
+          <span>新增规则</span>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_tool_wrap">
+      <el-button @click="cancel" v-preReClick>取消</el-button>
+      <el-button type="primary" @click="save" v-preReClick>保存</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top_tool_wrap {
+  width: 100%;
+  height: 72px;
+  margin: 8px 0 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :deep(.el-steps) {
+    width: 30%;
+  }
+}
+
+.content_main {
+  height: calc(100% - 40px);
+  padding: 16px 16px 0px;
+  overflow: hidden auto;
+
+  :deep(.table_panel_wrap) {
+    .table_panel {
+      width: 100%;
+      min-height: unset;
+    }
+  }
+
+  .operator_panel_wrap {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    :deep(.el-button) {
+      &.is-text {
+        height: auto;
+        padding: 0;
+      }
+    }
+
+    .operator_panel {
+      width: calc(50% - 5px);
+      height: 100%;
+      border: 1px solid #d9d9d9;
+      margin-bottom: 12px;
+      overflow: hidden;
+
+      &.is-block {
+        width: 100%;
+      }
+
+      .panel_title {
+        height: 48px;
+        padding: 0 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: var(--el-color-regular);
+        font-weight: 600;
+
+        .title_text {
+          display: flex;
+          cursor: pointer;
+        }
+
+        .tips_text {
+          font-size: 14px;
+          color: #999;
+          font-weight: normal;
+          margin-left: 8px;
+        }
+      }
+
+      .title_tool {
+        :deep(.el-icon) {
+          svg {
+            width: 1em;
+            height: 1em;
+          }
+        }
+      }
+
+      .panel_content {
+        height: calc(100% - 46px);
+
+        >div {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .form_panel {
+          padding: 8px 16px 0;
+          overflow: hidden auto;
+        }
+
+        .tree_search_input {
+          margin-bottom: 10px;
+        }
+
+        .list_panel {
+          padding: 10px 0;
+          overflow: hidden auto;
+
+          .list_item {
+            height: 32px;
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &:hover {
+              color: var(--g-sub-sidebar-menu-active-color);
+              background-color: var(--g-sub-sidebar-menu-active-bg);
+            }
+          }
+        }
+
+        .table_content_wrap {
+          padding: 16px;
+
+          .tools_form {
+            p {
+              margin-top: 0;
+              margin-bottom: 8px;
+            }
+          }
+        }
+      }
+    }
+
+    .bottm_tools {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fafafa;
+      color: #999;
+      font-size: 14px;
+      border: 1px dashed var(--el-border-color-regular);
+      margin-bottom: 12px;
+
+      >span {
+        margin-left: 8px;
+      }
+
+      &:hover {
+        background: #EBF6F7;
+        border: 1px dashed var(--el-color-primary);
+      }
+    }
+  }
+
+  .transfer_btns {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .el-button {
+      margin: 0 8px;
+
+      &+.el-button {
+        margin-top: 8px;
+      }
+    }
+  }
+}
+
+.bottom_tool_wrap {
+  height: 40px;
+  padding: 0 16px;
+  border-top: 1px solid #d9d9d9;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>