场景数据包-模板预览

src/views/sceneLibrary/components/elTree.vue

@@ -0,0 +1,295 @@
+<template>
+    <div class="treePanel">
+        <el-tree
+            ref="tree"
+            :data="data"
+            node-key="id"
+            :props="defaultProps"
+            :default-expand-all="true"
+            :expand-on-click-node="false"
+        ></el-tree>
+    </div>
+</template>
+
+<script>
+//import  from '';
+
+export default {
+    name: "Tree", //
+    components: {},
+    data() {
+        return {
+            // data1: [
+            //     {
+            //         label: "一级 3",
+            //         children: [
+            //             {
+            //                 label: "二级 3-1",
+            //                 children: [
+            //                     {
+            //                         label: "三级 3-1-1",
+            //                     },
+            //                     {
+            //                         label: "三级 3-1-2",
+            //                     },
+            //                 ],
+            //             },
+            //             {
+            //                 label: "二级 3-2",
+            //                 children: [
+            //                     {
+            //                         label: "三级 3-2-1",
+            //                         children: [
+            //                             {
+            //                                 label: "四级 3-2-1四级 3-2-1四级 3-2-1四级 3-2-1",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-2",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-3",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-3",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-3",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-3",
+            //                             },
+            //                         ],
+            //                     },
+            //                     {
+            //                         label: "三级 3-2-2",
+            //                         children: [
+            //                             {
+            //                                 label: "四级 3-2-1",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-2",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-3",
+            //                             },
+            //                         ],
+            //                     },
+            //                     {
+            //                         label: "三级 3-2-3",
+            //                         children: [
+            //                             {
+            //                                 label: "四级 3-2-1",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-2",
+            //                             },
+            //                             {
+            //                                 label: "四级 3-2-3",
+            //                             },
+            //                         ],
+            //                     },
+            //                 ],
+            //             },
+            //         ],
+            //     },
+            // ],
+            defaultProps: {
+                children: "children",
+                label: "treeNode",
+                disabled: "weightErr", // 用于权重的报错提示
+            },
+        };
+    },
+
+    props: {
+        // 限制上传的个数
+        data: {
+            type: Array,
+            default: [],
+        },
+    },
+
+    watch: {
+        data(val) {
+            if (val && val.length > 0) {
+                this.domHandel();
+            }
+        },
+    },
+
+    methods: {
+        domHandel() {
+            this.$nextTick(() => {
+                $(".el-tree-node__label").parent().next().each((i, item) => {
+                    if (!$(item).html()) {
+                        $(item)
+                            .prev()
+                            .find(".el-tree-node__label")
+                            .addClass("noChildren");
+                    }
+                });
+
+                $(
+                    ".el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__label"
+                ).addClass("noParent");
+
+
+                $(".el-tree-node__children").each((i, item) => {
+                    if($(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
+                    .children('.el-tree-node__label').html()) {
+                        let width = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
+                            .children('.el-tree-node__label').outerWidth();
+                        let left = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
+                        .css('padding-left');
+
+                        let prev = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
+                        .children('.el-tree-node__label').parent().parent().parent().prev()
+                        .children('.el-tree-node__label').outerWidth();
+
+                        let left1 = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
+                        .children('.el-tree-node__label').parent().parent().parent().prev()
+                        .css('padding-left');
+
+                        let cur = Math.min(width/2+parseFloat(left),prev/2+parseFloat(left1))
+                        
+                        let b = "<b style='width:"+cur+"px'></b>";
+
+                        $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
+                            .children('.el-tree-node__label').before(b);
+
+
+
+                        let len = $(item).children('.el-tree-node').length;
+
+                        let width1 = $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
+                            .outerWidth();
+
+                        let right = $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
+                            .css('padding-left');
+
+                        let width2 = $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
+                        .children('.el-tree-node__label').outerWidth();
+
+                        let i = "<i style='width:"+(width1-width2/2-parseFloat(right))+"px'></i>";
+
+                        $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
+                            .children('.el-tree-node__label').before(i);
+                    }
+                });
+            });
+        },
+    },
+
+    mounted() {
+        this.domHandel();
+    },
+};
+</script>
+
+<style lang='less' scoped>
+.treePanel {
+    display: inline-block;
+    padding-right: 10px;
+    overflow: auto;
+}
+
+/deep/ .el-tree {
+    * {
+        cursor: default;
+    }
+
+    .el-tree-node[aria-disabled=true] {
+        color: inherit;
+    }
+
+    .el-tree-node[aria-disabled=true] > .el-tree-node__content {
+        color: red;
+    }
+
+    .el-tree-node.is-expanded > .el-tree-node__children {
+        display: flex;
+        // justify-content: space-between;
+    }
+
+    .el-tree-node__expand-icon.expanded {
+        display: none;
+    }
+
+    .el-tree-node .el-tree-node__content {
+        position: relative;
+        height: 60px;
+        line-height: 60px;
+
+        > b {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 6;
+            width: 100%;
+            height: 1px;
+            border-top: 1px solid #ffffff;
+        }
+
+        > i {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 6;
+            width: 100%;
+            height: 1px;
+            border-top: 1px solid #ffffff;
+        }
+    }
+
+    .el-tree-node__label {
+        position: relative;
+
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 50%;
+            top: 0;
+            width: 1px;
+            height: 20px;
+            border-left: 1px solid @themeColor;
+        }
+
+        &:after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            width: 1px;
+            height: 20px;
+            border-left: 1px solid @themeColor;
+        }
+
+        &.noParent:before,
+        &.noChildren:after {
+            display: none;
+        }
+    }
+
+    .el-tree-node__children {
+        position: relative;
+
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 1px;
+            border-top: 1px solid @themeColor;
+        }
+
+    }
+
+    .el-icon-caret-right {
+        display: none;
+    }
+}
+</style>

src/views/sceneLibrary/components/treeItem.vue

@@ -0,0 +1,59 @@
+<template>
+    <li>
+        <div :class="{ bold: isFolder }" @click="toggle" @dblclick="makeFolder">
+            {{ item.name }}
+            <!-- <span v-if="isFolder">[{{ isOpen ? "-" : "+" }}]</span> -->
+        </div>
+        <ul v-show="isOpen" v-if="isFolder">
+            <tree-item
+                class="item"
+                v-for="(child, index) in item.children"
+                :key="index"
+                :item="child"
+                @make-folder="$emit('make-folder', $event)"
+                @add-item="$emit('add-item', $event)"
+            ></tree-item>
+            <li class="add" @click="$emit('add-item', item)">+</li>
+        </ul>
+    </li>
+</template>
+
+<script>
+//import  from '';
+
+export default {
+    name: "treeItem", //
+    components: {},
+    props: {
+        item: Object,
+    },
+    data: function () {
+        return {
+            isOpen: true,
+        };
+    },
+    computed: {
+        isFolder: function () {
+            return this.item.children && this.item.children.length;
+        },
+    },
+    methods: {
+        toggle: function () {
+            if (this.isFolder) {
+                this.isOpen = !this.isOpen;
+            }
+        },
+        makeFolder: function () {
+            if (!this.isFolder) {
+                this.$emit("make-folder", this.item);
+                this.isOpen = true;
+            }
+        },
+    },
+
+    // mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+</style>

src/views/sceneLibrary/components/viewTree.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <ul id="demo">
+            <tree-item
+                class="item"
+                :item="treeData"
+                @make-folder="makeFolder"
+                @add-item="addItem"
+            ></tree-item>
+        </ul>
+    </div>
+</template>
+
+<script>
+import treeItem from "./treeItem";
+
+export default {
+    name: "viewTree", //
+    components: { treeItem },
+    data() {
+        return {
+            treeData: {
+                name: "My Tree",
+                children: [
+                    {
+                        name: "child folder",
+                        children: [
+                            {
+                                name: "child folder",
+                                children: [
+                                    {
+                                        name: "hello",
+                                    },
+                                    {
+                                        name: "wat",
+                                    },
+                                ],
+                            },
+                            {
+                                name: "hello",
+                            },
+                            {
+                                name: "wat",
+                            },
+                            {
+                                name: "child folder",
+                                children: [
+                                    {
+                                        name: "hello",
+                                    },
+                                    {
+                                        name: "wat",
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        };
+    },
+
+    computed: {},
+
+    methods: {
+        makeFolder: function (item) {
+            this.$set(item, "children", []);
+            this.addItem(item);
+        },
+        addItem: function (item) {
+            item.children.push({
+                name: "new stuff",
+            });
+        },
+    },
+
+    // mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+</style>

src/views/sceneLibrary/scenePacketList.vue

@@ -49,7 +49,7 @@
                     <span>{{ scope.row.sublistName }}</span>
                 </template>
             </el-table-column>
-            <el-table-column label="权重" slot="weight" align="center">
+            <el-table-column label="权重%" slot="weight" align="center">
                 <template v-slot="scope">
                     <span v-if="scope.row.weightErr" style="color: red">{{
                         scope.row.weight
@@ -193,6 +193,23 @@
                 <el-button @click="scenarioListsCancel">取 消</el-button>
             </span>
         </el-dialog>
+
+        <el-dialog
+            title="模板预览"
+            :visible.sync="templateViewVisible"
+            width="90%"
+            class="templateViewDia"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="templateViewClose"
+        >
+            <view-tree :data="treeData"></view-tree>
+            <span slot="footer">
+                <el-button type="primary" @click="templateViewClose"
+                    >关 闭</el-button
+                >
+            </span>
+        </el-dialog>
     </div>
 </template>
 
@@ -201,13 +218,21 @@ import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
 import toolbarTab from "@/components/toolbar/toolbarTab";
 import realSceneList from "./components/realSceneList";
+// import viewTree from "./components/viewTree";
+import viewTree from "./components/elTree";
 
 export default {
     name: "scenePacketList", // 场景数据包
-    components: { searchLayout, tableList, toolbarTab, realSceneList },
+    components: {
+        searchLayout,
+        tableList,
+        toolbarTab,
+        realSceneList,
+        viewTree,
+    },
     data() {
         let validateNum = (rule, value, callback) => {
-            if (value == 0) {
+            if (value == 0 || value > 100) {
                 callback(new Error(rule.message));
                 return;
             }
@@ -223,7 +248,7 @@ export default {
             !/^[1-9]+[0]*$/.test(value) && callback(new Error(rule.message));
             callback();
         };
-        
+
         return {
             packageId: "",
             share: "",
@@ -239,7 +264,7 @@ export default {
                     template: true,
                 },
                 {
-                    label: "权重",
+                    label: "权重%",
                     prop: "weight",
                     template: true,
                 },
@@ -278,6 +303,7 @@ export default {
                         seq: 0,
                         sublistName: "一级指标",
                         weight: 100,
+                        treeNode: "一级指标" + " (" + 100 + "%)",
                     },
                 ],
             },
@@ -299,7 +325,7 @@ export default {
                     { required: true, message: "请输入", trigger: "blur" },
                     {
                         validator: validateNum,
-                        message: "请输入正整数",
+                        message: "请输入大不于100的正整数",
                         trigger: ["blur"],
                     },
                 ],
@@ -326,6 +352,8 @@ export default {
             checkedIdsB: [], // 自然驾驶列表已选
             checkedIdsC: [], // 标准法规列表已选
             isRoot: false, // 是否是根节点
+            templateViewVisible: false,
+            treeData: [],
         };
     },
 
@@ -333,10 +361,8 @@ export default {
 
     methods: {
         viewTree() {
-            this.$router.push({
-                path: "/templateView",
-                query: { packageId: this.packageId },
-            });
+            this.templateViewVisible = true;
+            this.treeData = this.getDataWay.data;
         },
         delRow(row) {
             this.$confirm("确认是否删除？", "提示", {
@@ -407,6 +433,11 @@ export default {
                         this.curNode.sublistName = this.form.sublistName;
                         this.curNode.weight = this.form.weight;
                         this.curNode.remarks = this.form.remarks;
+                        this.curNode.treeNode =
+                            this.form.sublistName +
+                            " (" +
+                            this.form.weight +
+                            "%)";
                     } else {
                         // 新增节点
                         ++this.idIndex;
@@ -427,6 +458,11 @@ export default {
                             seq: 0,
                             sublistName: this.form.sublistName,
                             weight: this.form.weight,
+                            treeNode:
+                                this.form.sublistName +
+                                " (" +
+                                this.form.weight +
+                                "%)",
                         };
                         if (!this.curNode.children) {
                             this.curNode.children = [];
@@ -440,6 +476,8 @@ export default {
                         this.nodeList
                     );
 
+                    // console.log(this.getDataWay.data[0]);
+
                     this.checkWeightValidate();
 
                     this.indicatorsCancel();
@@ -567,7 +605,7 @@ export default {
                     let total = 0;
                     let arr = [];
                     element.children.forEach((item) => {
-                        console.log(this.nodeList);
+                        // console.log(this.nodeList);
                         total += +this.nodeList.find((i) => i.id === item.id)
                             .weight;
                         arr.push(item.id);
@@ -578,8 +616,7 @@ export default {
                 }
             }
             this.rowWeightErrTrue(this.getDataWay.data[0], ids);
-            console.log(6);
-            console.log(this.getDataWay.data[0]);
+            // console.log(this.getDataWay.data[0]);
         },
         // 深度优先遍历
         /* deepFirstSearch(node, nodeList) {
@@ -718,6 +755,10 @@ export default {
             }
             this.sceneNumUpdate(node);
         },
+        templateViewClose() {
+            this.templateViewVisible = false;
+            this.treeData = [];
+        },
     },
 
     mounted() {
@@ -771,5 +812,17 @@ export default {
         padding: 30px 0;
         text-align: center;
     }
+
+    .templateViewDia {
+        /deep/ .el-dialog {
+            max-height: 80%;
+            overflow: auto;
+
+            .el-dialog__body {
+                max-height: calc(100%-130px);
+                overflow: auto;
+            }
+        }
+    }
 }
 </style>