指标溯源开新页面,面包屑配置

src/main.js

@@ -24,6 +24,17 @@ import{endCalc,optionTimeCalc,init}from'@/utils/TimeOnPage.js';
 import setting from '@/mixins/theme.js'
 Vue.prototype.$setting = setting;
 
+Vue.prototype.toHistoryPage = (EdbInfoId)=>{
+    const href = router.resolve({
+        path:'/edbHistory',
+        query:{
+            edbId:EdbInfoId
+        },
+    }).href
+    console.log('href',href)
+    window.open(href,"_blank")
+}
+
 //Import Froala Editor
 import "froala-editor/js/plugins.pkgd.min.js";
 import "froala-editor/js/plugins/quick_insert.min.js";
@@ -157,6 +168,12 @@ router.beforeEach(async(to, from, next) => {
   if (to.path === "/analyseVariety") {
     to.matched[1].name = to.query.type === "look" ? "查看品种" : "分析品种";
   }
+  //指标溯源页路径设置
+  if(to.path==="/edbHistory"){
+    const tempArr = from.matched || []
+    tempArr.push(to.matched[1] || {})
+    to.params.tempArr = tempArr
+  }
 
   if (to.path) {
     //百度统计

src/routes/modules/oldRoutes.js

@@ -81,6 +81,15 @@ export default [
           keepAlive: false,
         },
       },
+      {
+        path: "edbHistory",
+        component: () => import("@/views/edbHistoryPage.vue"),
+        name: "指标溯源",
+        hidden: true,
+        meta: {
+          keepAlive: false,
+        },
+      },
     ],
   },
 

src/views/Home.vue

@@ -131,7 +131,8 @@
               
               <!-- 面包屑 -->
               <el-breadcrumb separator="/" class="breadcrumb-inner">
-                <el-breadcrumb-item
+                <template v-if="$route.path!=='/edbHistory'">
+                    <el-breadcrumb-item
                   v-for="item in $route.matched"
                   :key="item.path"
                 >
@@ -190,6 +191,18 @@
                   </span>
                   <span v-else>{{ item.name }}</span>
                 </el-breadcrumb-item>
+                </template>
+                <template v-else>
+                    <el-breadcrumb-item v-for="(item,index) in $route.params.tempArr||[]" :key="item.path">
+                        <span v-if="index===0">{{item.name}}</span>
+                        <span v-else>
+                            <span @click.stop="$router.push(item.path)" :style="`cursor: pointer; color: ${$setting.theme_color}`">
+                                {{item.name}}
+                            </span>
+                        </span>
+                    </el-breadcrumb-item>
+                </template>
+                
               </el-breadcrumb>
             </div>
 

src/views/dataEntry_manage/chartSetting.vue

@@ -599,7 +599,7 @@
                     <i 
                       class="el-icon-tickets" 
                       style="color:#409EFF;font-size:18px" 
-                      @click="isLookHistory=true;lookEdbId=scope.row.EdbInfoId"
+                      @click="toHistoryPage(scope.row.EdbInfoId)"
                       v-if="scope.row.EdbType===2"
                     />
                   </span>

src/views/edbHistoryPage.vue

@@ -0,0 +1,113 @@
+<template>
+    <!-- 指标溯源页 -->
+    <div class="edb-history-page-wrap">
+        <div class="edb-title">aaa</div>
+        <div class="edb-source-wrap">
+            <vue2-org-tree
+                :data="treeData"
+                :props="{
+                    label: 'EdbName',
+                    children: 'Child',
+                }"
+                :horizontal="false"
+                :render-content="renderContent"
+                @on-node-click="handleClickNode"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import { dataBaseInterface } from '@/api/api.js';
+export default {
+    data() {
+        return {
+            treeData:{}
+        };
+    },
+    methods: {
+        renderContent(h, data) {
+            return (
+                <el-tooltip content={data.RuleTitle} placement='top' popper-class='node-tooltip'>
+                    <span class='node'>{data.EdbName}</span>
+                </el-tooltip>
+            )
+        },
+        handleClickNode(e, data) {
+            //EdbInfoType=1 跳预测指标详情,=0跳指标库详情
+            const { ClassifyId, UniqueCode, EdbInfoId, EdbInfoType } = data
+            let { href } =
+            this.$router.resolve({ path: EdbInfoType === 1 ? '/predictEdb' : '/database', query: { code: UniqueCode, id:
+            EdbInfoId, classifyId: ClassifyId } });
+            window.open(href, '_blank');
+        },
+        async getData() {
+            const res = await dataBaseInterface.getEdbCreateHistory({ EdbInfoId: Number(this.$route.query.edbId) })
+            if (res.Ret !== 200) return
+            this.treeData = res.Data;
+        }
+    },
+    mounted(){
+        if(this.$route.query.edbId){
+            this.getData()
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.edb-history-page-wrap{
+    min-height: calc(100vh - 120px);
+    overflow-y: auto;
+    background-color: #fff;
+    border-radius: 4px;
+    border:1px solid #C8CDD9;
+    box-sizing: border-box;
+    padding:30px;
+    .edb-source-wrap{
+        text-align: center;
+    }
+}
+</style>
+<style lang="scss">
+.edb-history-page-wrap{
+  .org-tree-container {
+    margin: 0 auto;
+    /* .org-tree-node-label {  } */
+    .org-tree-node-label-inner{
+        cursor: pointer;
+        background-color: #F2F6FA;
+        color: #333333;
+        padding:20px;
+        border-radius: 4px;
+        font-size: 16px;
+        &:hover{
+            color:#0052D9;
+            text-decoration: underline;
+            background-color: #ECF5FF;
+        }
+    }
+    .org-tree{
+        >.org-tree-node{
+            >.org-tree-node-label{
+                .org-tree-node-label-inner{
+                    background-color: #0052D9;
+                    color: white;
+                }
+            }
+        }
+    }
+    .org-tree-node-children {
+        .org-tree-node ~ .org-tree-node{
+            padding-left: 40px;
+        }
+    }
+    
+  }
+}
+.node-tooltip{
+    font-size: 14px;
+    padding:10px;
+    text-align: center;
+}
+</style>