自定义栏位的选项管理以及新手指引提示

src/main.js

@@ -31,6 +31,8 @@ Vue.prototype.$reportPermission = permission.reportPermission
 
 import eventVisual from "@/views/home/components/showDialog";
 Vue.prototype.$eventVisual = eventVisual;
+import showTiShi from "./utils/model/tishi/index";
+Vue.prototype.$showTiShi = showTiShi;
 
 //组件库
 import model from './utils/model'

src/utils/model/route.vue

@@ -1,168 +1,9 @@
 <template>
-  <svg
-    id="SvgjsSvg1006"
-    width="348"
-    height="155"
-    xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    xmlns:svgjs="http://svgjs.com/svgjs"
-  >
-    <defs id="SvgjsDefs1007">
-      <pattern
-        patternUnits="userSpaceOnUse"
-        id="pattern_mark_0"
-        width="300"
-        height="300"
-      >
-        <text
-          x="150"
-          y="100"
-          fill="rgba(229,229,229,0.8)"
-          font-size="18"
-          transform="rotate(-45, 150, 150)"
-          style="dominant-baseline: middle; text-anchor: middle"
-        ></text>
-      </pattern>
-      <pattern
-        patternUnits="userSpaceOnUse"
-        id="pattern_mark_1"
-        width="300"
-        height="300"
-      >
-        <text
-          x="150"
-          y="200"
-          fill="rgba(229,229,229,0.8)"
-          font-size="18"
-          transform="rotate(-45, 150, 150)"
-          style="dominant-baseline: middle; text-anchor: middle"
-        ></text>
-      </pattern>
-    </defs>
-    <rect
-      id="svgbackgroundid"
-      width="348"
-      height="155"
-      fill="transparent"
-    ></rect>
-    <rect
-      id="SvgjsRect1009"
-      width="348"
-      height="155"
-      fill="url(#pattern_mark_0)"
-    ></rect>
-    <rect
-      id="SvgjsRect1010"
-      width="348"
-      height="155"
-      fill="url(#pattern_mark_1)"
-    ></rect>
-    <g id="SvgjsG1011" transform="translate(25,25)">
-      <path
-        id="SvgjsPath1012"
-        d="M 0 0L 298 0L 298 105L 0 105Z"
-        stroke="rgba(255,255,255,1)"
-        stroke-width="1.5"
-        fill-opacity="1"
-        fill="#ffffff"
-      ></path>
-      <g id="SvgjsG1013">
-        <text
-          id="SvgjsText1014"
-          font-family="微软雅黑"
-          text-anchor="middle"
-          font-size="13px"
-          width="278px"
-          fill="#323232"
-          font-weight="400"
-          align="middle"
-          lineHeight="125%"
-          anchor="middle"
-          family="微软雅黑"
-          size="13px"
-          weight="400"
-          font-style=""
-          opacity="1"
-          y="41.875"
-          transform="rotate(0)"
-        ></text>
-      </g>
-    </g>
-    <g id="SvgjsG1015" transform="translate(25,25)">
-      <path
-        id="SvgjsPath1016"
-        d="M 0 0L 100 0L 100 105L 0 105Z"
-        stroke="none"
-        fill="none"
-      ></path>
-      <g id="SvgjsG1017" >
-        <rect  width="100px" height="100px"
-          fill="white"></rect>
-        <text
-          id="SvgjsText1018"
-          font-family="微软雅黑"
-          text-anchor="start"
-          dominant-baseline="middle"
-          font-size="13px"
-          width="100px"
-          height="100px"
-          fill="#323232"
-          font-weight="400"
-          align="middle"
-          lineHeight="200%"
-          anchor="start"
-          family="微软雅黑"
-          size="13px"
-          weight="400"
-          font-style=""
-          opacity="1"
-          y="6"
-          transform="rotate(0)"
-          
-        >
-         数据库
-        </text>
-      </g>
-    </g>
-    <g id="SvgjsG1025" transform="translate(137,25)">
-      <path
-        id="SvgjsPath1026"
-        d="M 0 0L 186 0L 186 105L 0 105Z"
-        stroke="none"
-        fill="none"
-      ></path>
-      <g id="SvgjsG1027">
-        <text
-          id="SvgjsText1028"
-          font-family="微软雅黑"
-          text-anchor="end"
-          font-size="13px"
-          width="186px"
-          fill="#323232"
-          font-weight="400"
-          align="middle"
-          lineHeight="200%"
-          anchor="end"
-          family="微软雅黑"
-          size="13px"
-          weight="400"
-          font-style=""
-          opacity="1"
-          y="6"
-          transform="rotate(0)"
-        >
-          <tspan id="SvgjsTspan1029" dy="26" x="186">
-            <tspan id="SvgjsTspan1030" style="">10</tspan>
-          </tspan>
-       
-          <tspan id="SvgjsTspan1033" dy="26" x="186">
-            <tspan id="SvgjsTspan1034" style="">30</tspan>
-          </tspan>
-        </text>
-      </g>
-    </g>
-  </svg>
+    <div class="tishi">
+      <div class="longen">
+          可以点击新手指引再次打开提示框
+      </div>
+    </div>
 </template>
 
 <script>
@@ -180,4 +21,39 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.tishi{
+  position: fixed;
+  top: 100px;
+  left:100px;
+  width: 150px;
+  height: 60px;
+  .longen {
+  width: 100%;
+  // height: 100%;
+  padding:10px;
+  border: 1px solid rgb(116, 123, 128);
+  position: relative;
+  background-color: #fff;
+}
+
+.longen:before,
+.longen:after {
+  content: "";
+    display: block;
+    border-width: 10px;
+    position: absolute;
+    top: calc(50% - 8px);
+    right: -21px;
+    border-style: dashed dashed solid;
+    border-color: transparent transparent transparent rgb(116, 123, 128);
+    font-size: 0;
+    line-height: 0;
+}
+
+.longen:after {
+  right: -20px;
+  border-color: transparent transparent transparent #fff;
+}
+}
+
 </style>

src/utils/model/tishi/index.js

@@ -0,0 +1,51 @@
+import showTiShi from './index.vue'
+import Vue from "vue"; // 导入vue
+ 
+// 将组件作为参数，使用vue提供的全局方法，创建一个构造函数
+let DrawerConstructor = Vue.extend(showTiShi);
+ 
+let instance;
+ 
+/**
+ * 打开查看事件流程详情
+ * @param {Object} value 
+ * @example
+ * {Scenario:[],eventId:'',eventName:''}
+ * @returns 
+ */
+const tiShi = function({show,top,left}) {
+    return new Promise((resolve, reject) => {
+        // 初始化实例，此时instance是一个组件实例，但未初始化未完成,这里的变量和方法优先组件内的变量和方法
+        instance = new DrawerConstructor({
+            data: function() {
+                return {
+                    visuals:show,
+                    top:top||'300px',
+                    left:left||'300px'
+                };
+            },
+            methods: {
+                onSelect: res => {
+                    unmount();
+                    resolve(res);
+                },
+                handleClose: () => {
+                    unmount();
+                    // reject();
+                }
+            }
+        });
+        // 卸载组件
+        const unmount = () => {
+            instance.visible = false;
+        };
+        // 完成初始化
+        instance.$mount();
+ 
+        // 将组件添加到根节点body
+        document.body.appendChild(instance.$el);
+        instance.visible = true;
+    });
+};
+ 
+export default tiShi;

src/utils/model/tishi/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="tishi" v-show="visuals" :style="{'top':top,'left':left}">
+      <div class="longen">
+          可以点击新手指引再次打开提示框
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+        visuals:false,
+        top:'300px',
+        left:'300px'
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+    var timer = setTimeout(()=>{
+        this.visuals = false
+        clearInterval(timer)
+    },2000)
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.tishi{
+  position: fixed;
+  width: 150px;
+  height: 60px;
+  z-index: 99999999999;
+//   animation: changeWidth 2s linear;
+  @keyframes changeWidth {
+    to{
+        width: 0px;
+    }
+  }
+  .longen {
+
+  width: 100%;
+  // height: 100%;
+  padding:10px;
+  border: 1px solid rgb(116, 123, 128);
+  position: relative;
+  background-color: #fff;
+}
+
+.longen:before,
+.longen:after {
+  content: "";
+    display: block;
+    border-width: 10px;
+    position: absolute;
+    top: calc(50% - 8px);
+    right: -21px;
+    border-style: dashed dashed solid;
+    border-color: transparent transparent transparent rgb(116, 123, 128);
+    font-size: 0;
+    line-height: 0;
+}
+
+.longen:after {
+  right: -20px;
+  border-color: transparent transparent transparent #fff;
+}
+}
+
+</style>

src/views/components/drawer/Field.vue

@@ -101,10 +101,10 @@
                 @node-drop="handleDrop"
             >
               <div class="custom-tree-node" slot-scope="{ node, data }">
-                <el-input v-model="data.name" placeholder="请输入内容" size="small" class="r" @focus="lockOption = true" @input="valueChange = true" @blur="submitOption(data)"></el-input>
+                <el-input v-model="data.name" :style="{'--backgroundColor':getBackground(node,data)}" placeholder="请输入内容" size="small" class="r" @focus="lockOption = true" @input="valueChange = true" @blur="submitOption(data)"></el-input>
                 <div class="o" v-if="$permission('/workspace/common/customField/managementOptions')">
-                  <span class="el-icon-plus" @click="handleAddTreeNode(data)" title="添加"></span>
-                  <span class="el-icon-delete" @click="handleDeleteTreeNode(node, data)" title="删除"></span>
+                  <span class="el-icon-circle-plus" @click="handleAddTreeNode(data)" title="添加"></span>
+                  <span class="el-icon-delete" style="color: black;font-weight: bold;" @click="handleDeleteTreeNode(node, data)" title="删除"></span>
                 </div>
               </div>
             </el-tree>
@@ -209,6 +209,14 @@ export default {
   mounted() {
   },
   methods: {
+    //不同层级不同背景色
+    getBackground(node,data){
+      let color = {
+        '1':'rgb(49,97,146)',
+        '2':'rgb(64,158,255)'
+      }
+      return color[node.level]
+    },
     handleCurrentChange(val) {
       this.queryParams.current = val;
       this.getList();
@@ -543,7 +551,7 @@ export default {
   }
   .tree-option {
     background: #f5f5f5 !important;
-    .is-expanded, .is-focusable, {
+    .is-expanded, .is-focusable {
       .el-tree-node__content:hover, .el-tree-node__content {
         background: #f5f5f5 !important;
       }
@@ -566,6 +574,11 @@ export default {
           margin-right: 10px;
         }
       }
+      .el-input__inner{
+        border-radius: 50px;
+        background: var(--backgroundColor);
+        color: white !important;
+      }
     }
   }
 }

src/views/layout/components/guide.js

@@ -348,6 +348,14 @@ export const guide = {
 
             box.addEventListener('animationend',()=>{
                 box.remove()
+                this.$showTiShi(
+                    {
+                        show:true,
+                        top:`${guidRect.top - 25}px`,
+                        left:`${guidRect.left - 190}px`
+                    }
+                )
+               
             })
             document.body.appendChild(box)
             // svg.onclick = (e) =>{

src/views/project/patentCollection/index.vue

@@ -113,18 +113,21 @@
         </el-footer>
       </el-container>
     </el-container>
+
+    <Field-Drawer ref="FieldDrawer"></Field-Drawer>
   </div>
 </template>
 
 <script>
 import { downLoad2, getTreeDataList, getTreeLastChildren, getPatentCountry } from "@/utils"
-
+import FieldDrawer from '@/views/components/drawer/Field.vue'
 // import PatentAbstractListView from './components/views/Abstract'
 import PatentTableListView from './components/views/Table'
 // import PatentPictureListView from './components/views/Picture'
 // import PatentPDFListView from './components/views/PDF.vue'
 export default {
   components: {
+    FieldDrawer,
     // PatentAbstractListView,
     PatentTableListView,
     // PatentPictureListView
@@ -265,7 +268,7 @@ export default {
     },
     //自定义栏位管理
     handleField() {
-      this.$refs.projectFieldDrawer.open(this.projectId)
+      this.$refs.FieldDrawer.open(5)
     },
     //显示栏位管理
     async handleFieldManage() {