11

heimawl

2023-08-07 f719b59be68518d10836fc6ba492b21174c11dd0

11

 src/components/PageTools/index.vue

@@ -39,4 +39,4 @@
};
</script>

<style lang="less" scoped></style>
<style lang="scss" scoped></style>

 src/views/import/index.vue

@@ -52,4 +52,4 @@
};
</script>

<style lang="less" scoped></style>
<style lang="scss" scoped></style>

 src/views/patient/viewvant/Graph/methods.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,152 @@
import '@antv/x6-vue-shape';
import { Graph,Shape,Addon,FunctionExt} from '@antv/x6'
// æ‹–拽生成四边形或者圆形
export const startDragToGraph  = (graph,type,e) =>{
    const node = 
    type === 'Rect'
    ? graph.createNode({
      width: 100,
      height: 60,
      attrs: {
        label: {
          text: '正方形节点',
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -10,
            height: -10,
            ellipsis: true
          }
        },
        body: {
          stroke: '#000000',
          strokeWidth: 1,
          fill: '#ffffff'
        }
      },
      ports: ports
    })
  : type === 'Circle'?graph.createNode({
      shape: 'ellipse',
      width: 100,
      height: 100,
      attrs: {
        label: {
          text: '圆形节点',
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -20,
            height: -10,
            ellipsis: true
          }
        },
        body: {
          stroke: '#000000',
          strokeWidth: 1,
          fill: '#ffffff'
        }
      },
      ports: ports
    }):
    graph.createNode({
      shape: 'polygon',
      x: 40,
      y: 40,
      width: 120,
      height: 120,
      attrs: {
        label: {
          text: '条件节点',
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -50,
            height: '70%',
            ellipsis: true
          }
        },
        body: {
          fill: '#ffffff',
          stroke: '#000000',
          refPoints: '0,10 10,0 20,10 10,20',
          strokeWidth: 1
        }
      },
      ports: ports
    })
    const dnd = new Addon.Dnd({target:graph})
    dnd.start(node,e)
}
const ports = {
    groups: {
      // è¾“入链接桩群组定义
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      // è¾“出链接桩群组定义
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
    },
    items: [
      {
        id: 'port1',
        group: 'top',
      },
      {
        id: 'port2',
        group: 'bottom',
      },
      {
        id: 'port3',
        group: 'left',
      },
      {
        id: 'port4',
        group: 'right',
      }
    ],
}

 src/views/patient/viewvant/RightDrawer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,331 @@
<template>
  <div class="drawer_container">
    <div v-if="drawerType === 'grid'">
      <div class="drawer_title">画布背景设置</div>
      <div class="drawer_wrap">
        <el-form label-position="left" label-width="85px">
          <el-form-item label="是否显示网格" label-width="100px">
            <el-switch v-model="showGrid" @change="changeGrid" />
          </el-form-item>
          <div v-show="showGrid">
            <el-form-item label="网格类型">
              <el-radio-group v-model="grid.type" @change="changeGridType">
                <el-radio
                  v-for="item in gridTypeList"
                  :label="item.value"
                  :key="item.value"
                >
                  <span>{{ item.label }}</span>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label-width="70px" label="网格大小">
              <el-slider
                v-model="grid.size"
                :min="0"
                :max="30"
                @change="changeGrid"
              ></el-slider>
            </el-form-item>
            <el-form-item label="网格颜色">
              <el-color-picker v-model="grid.args.color" @change="changeGrid" />
            </el-form-item>
            <el-form-item label-width="85px" label="网格线宽度">
              <el-slider
                v-model="grid.args.thickness"
                :min="0"
                :max="20"
                @change="changeGrid"
              ></el-slider>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div v-if="drawerType === 'node'">
      <div class="drawer_title">任务节点设置</div>
      <div class="drawer_wrap">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="任务名称">
            <el-input
              v-model="drawerNode.nodeText"
              @change="changeNodeText"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务执行人" label-width="80px">
            <el-input
              v-model="drawerNode.nodeText"
              @change="changeNodeText"
            ></el-input>
          </el-form-item>
          <el-form-item label="节点背景">
            <el-color-picker v-model="drawerNode.fill" @change="changeFill" />
          </el-form-item>
          <el-form-item label-width="70px" label="字体大小">
            <el-slider
              v-model="drawerNode.fontSize"
              :min="10"
              :max="20"
              @change="changefontSize"
            ></el-slider>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker
              v-model="drawerNode.fontFill"
              @change="changeFontFill"
            />
          </el-form-item>
          <el-form-item label-width="70px" label="边框宽度">
            <el-slider
              v-model="drawerNode.strokeWidth"
              :min="0"
              :max="10"
              @change="changeStrokeWidth"
            ></el-slider>
          </el-form-item>
          <el-form-item label="边框颜色">
            <el-color-picker
              v-model="drawerNode.stroke"
              @change="changeStroke"
            />
          </el-form-item>
          <el-form-item label="功能">
            <el-button type="primary" icon="el-icon-upload" @click="toTopZIndex"
              >置顶</el-button
            >
            <el-button
              type="danger"
              class="margin-left-10"
              icon="el-icon-delete"
              @click="deleteNode"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
        <el-button
          type="success"
          class="margin-left-10"
          icon="el-icon-download"
          @click="exportData"
          >保存</el-button
        >
      </div>
    </div>
    <div v-if="drawerType === 'edge'">
      <div class="drawer_title">线条设置</div>
      <div class="drawer_wrap">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="线条文本">
            <el-input
              v-model="drawerEdge.EdgeText"
              @change="changeEdgeText"
            ></el-input>
          </el-form-item>
          <el-form-item label="线条宽度" label-width="80px">
            <el-slider
              v-model="drawerEdge.edgeWidth"
              :min="1"
              :max="10"
              @change="changeEdgeWidth"
            ></el-slider>
          </el-form-item>
          <el-form-item label="线条颜色">
            <el-color-picker
              v-model="drawerEdge.edgeColor"
              @change="changeEdgeColor"
            />
          </el-form-item>
          <el-form-item label="功能">
            <el-button type="primary" icon="el-icon-upload" @click="toTopZIndex"
              >置顶</el-button
            >
            <el-button
              type="danger"
              class="margin-left-10"
              icon="el-icon-delete"
              @click="deleteNode"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
        <el-button
          type="success"
          class="margin-left-10"
          icon="el-icon-download"
          @click="exportData"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightDrawer",
  data() {
    return {
      gridTypeList: [
        {
          label: "四边网格",
          value: "mesh",
        },
        {
          label: "点状网格",
          value: "dot",
        },
      ],
      baseData: "",
      showGrid: true,
      drawerNode: {
        fill: "",
        nodeText: "",
        fontSize: null,
        fontFill: "",
        strokeWidth: null,
        stroke: "",
      },
      drawerEdge: {
        EdgeText: "",
        edgeWidth: null,
        edgeColor: "",
      },
    };
  },
  props: {
    drawerType: {
      type: String,
    },
    selectCell: {
      type: String | Object,
    },
    graph: {
      type: String | Object,
    },
    grid: {
      type: Object,
    },
  },
  created() {},
  mounted() {},
  watch: {
    selectCell: {
      handler(val) {
        if (val) {
          if (val.isNode()) {
            //节点
            this.drawerNode.fill = val.store.data.attrs.body.fill;
            this.drawerNode.nodeText = val.store.data.attrs.label.text;
            this.drawerNode.fontFill = val.store.data.attrs.label.fill;
            this.drawerNode.fontSize = Number(
              val.store.data.attrs.label.fontSize
            );
            this.drawerNode.strokeWidth = Number(
              val.store.data.attrs.body.strokeWidth
            );
            this.drawerNode.stroke = val.store.data.attrs.body.stroke;
          } else {
            //è¾¹
            this.drawerEdge.EdgeText = val.store.data.labels
              ? val.store.data.labels[0].text
              : "";
            this.drawerEdge.edgeWidth = Number(
              val.store.data.attrs.line.strokeWidth
            );
            this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke;
          }
        }
      },
      immediate: true,
      deep: false,
    },
  },
  methods: {
    // ç½‘格设置
    changeGrid() {
      this.showGrid ? this.graph.showGrid() : this.graph.hideGrid();
    },
    changeGridType(e) {
      this.grid.type = e;
      this.changeGrid();
    },
    changeGrid() {
      this.graph.drawGrid({
        ...this.grid,
      });
    },
    // èŠ‚点设置
    changeStrokeWidth(val) {
      this.selectCell.attr("body/strokeWidth", val);
    },
    changefontSize(val) {
      this.selectCell.attr("label/fontSize", val);
    },
    changeNodeText() {
      this.selectCell.attr("label/text", this.drawerNode.nodeText);
    },
    changeStroke(val) {
      this.drawerNode.stroke = val;
      this.selectCell.attr("body/stroke", this.drawerNode.stroke);
    },
    changeFontFill(val) {
      this.drawerNode.fontFill = val;
      this.selectCell.attr("label/fill", this.drawerNode.fontFill);
    },
    changeFill(val) {
      this.drawerNode.fill = val;
      this.selectCell.attr("body/fill", val);
    },
    // è¾¹è®¾ç½®
    changeEdgeText() {
      console.log(this.drawerEdge.EdgeText);
      this.selectCell.setLabels([
        { attrs: { label: { text: this.drawerEdge.EdgeText } } },
      ]);
    },
    changeEdgeWidth(val) {
      this.drawerEdge.edgeWidth = val;
      this.selectCell.attr("line/strokeWidth", this.drawerEdge.edgeWidth);
    },
    changeEdgeColor(val) {
      this.drawerEdge.stroke = val;
      this.selectCell.attr("line/stroke", this.drawerEdge.stroke);
    },
    // ç½®é¡¶
    toTopZIndex() {
      this.selectCell.toFront();
    },
    // åˆ é™¤
    deleteNode() {
      this.$emit("deleteNode");
    },
    // å¯¼å‡ºæ•°æ®
    exportData() {
      this.baseData = this.graph.toJSON();
      console.log(this.baseData);
    },
    // å¯¼å…¥æ•°æ®
    importData() {
      this.graph.fromJSON(this.baseData);
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer_container {
  max-width: 300px;
  min-width: 300px;
  .drawer_title {
    border-bottom: 1px solid #e8eaec;
    box-sizing: border-box;
    padding: 14px 16px;
    color: #333;
    font-size: 16px;
  }
  .drawer_wrap {
    box-sizing: border-box;
    padding: 20px 10px 20px 20px;
  }
}
</style>

 src/views/patient/viewvant/iconfont.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,61 @@
@font-face {font-family: "iconfont";
    src: url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.eot?t=1616140304099'); /* IE9 */
    src: url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.eot?t=1616140304099#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
    url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.woff?t=1616140304099') format('woff'),
    url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.ttf?t=1616140304099') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.svg?t=1616140304099#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-straight:before {
    content: "\e752";
  }
  
  .icon-mousepointershubiao:before {
    content: "\e6df";
  }
  
  .icon-ai28:before {
    content: "\e68e";
  }
  
  .icon-baocun:before {
    content: "\e60b";
  }
  
  .icon-Down-Right:before {
    content: "\e741";
  }
  
  .icon-tuozhuai:before {
    content: "\e636";
  }
  
  .icon-circle:before {
    content: "\e642";
  }
  
  .icon-quxian:before {
    content: "\e637";
  }
  
  .icon-square:before {
    content: "\e676";
  }
  
  .icon-shanchu:before {
    content: "\e696";
  }
  
  .icon-jiantou:before {
    content: "\e7e2";
  }
  

 src/views/patient/viewvant/index.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@

.container_warp {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
     .operating {
        position: absolute;
        top: 0;
        z-index: 99;
        background-color: #ffffff;
        padding: 20px 10px;
        box-shadow: 1px 1px 4px 0 #0a0a0a2e;
    }
}
 .btn-group {
    border-right: 1px solid #efefef;
    display: inline-block;
    padding-left: 10px;
    padding-right: 14px;
    position: relative;
     .btn-group_tips {
        text-align: center;
        top: 63px;
        left: 1px;
        position: absolute;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 60px;
        background: #515a6e;
        border-radius: 6px;
        animation: tips 4s;
        transition: all 1s;
         &:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: -5px;
            left: 46%;
            border-width: 0 5px 5px;
            border-style: solid;
            border-color: transparent transparent #515a6e;
        }
    }
     &:last-of-type {
        border-right: 0;
    }
     .btn {
        display: inline-block;
        margin: 2px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        transition: all .4s;
        border-radius: 6px;
        border: 1px solid rgba(233, 233, 233, 0);
         i {
            font-size: 20px;
        }
    }
     .currentArrow {
        background: #2d8cf0;
        color: #fff;
    }
}
 @keyframes tips {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
 .rotate-square {
    display: inline-block;
    transform: rotate(45deg);
}
 .my-snapline {
    color: #000;
}
 .right_drawer {
    height: 100%;
    width: 300px;
    border-left: 1px solid #eee;
    background: #fff;
}

 src/views/patient/viewvant/index.vue

@@ -1,17 +1,322 @@
<template>
  <div>视图</div>
  <div class="container_warp">
    <div id="containerChart"></div>
    <RightDrawer
      class="right_drawer"
      :drawerType="type"
      :selectCell="selectCell"
      :graph="graph"
      :grid="grid"
      @deleteNode="deleteNode"
    ></RightDrawer>

    <div class="operating">
      <div class="btn-group">
        <div
          class="btn"
          title="圆形节点"
          @mousedown="startDrag('Circle', $event)"
        >
          <i class="iconfont icon-circle"></i>
        </div>
        <div
          class="btn"
          title="正方形节点"
          @mousedown="startDrag('Rect', $event)"
        >
          <i class="iconfont icon-square"></i>
        </div>
        <div class="btn" title="条件节点">
          <i
            class="iconfont icon-square rotate-square"
            @mousedown="startDrag('polygon', $event)"
          ></i>
        </div>
        <div class="btn-group_tips" v-if="showTips">
          æ‹–拽生成<br />资产拓扑图形
        </div>
      </div>
      <div class="btn-group">
        <el-tooltip content="直线箭头" placement="bottom">
          <div
            :class="['btn', currentArrow === 1 ? 'currentArrow' : '']"
            @click="changeEdgeType('normal')"
          >
            <i class="iconfont icon-ai28"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="曲线箭头" placement="bottom">
          <div
            :class="['btn', currentArrow === 2 ? 'currentArrow' : '']"
            @click="changeEdgeType('smooth')"
          >
            <i class="iconfont icon-Down-Right"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="直角箭头" placement="bottom">
          <div
            :class="['btn', currentArrow === 3 ? 'currentArrow' : '']"
            @click="changeEdgeType()"
          >
            <i class="iconfont icon-jiantou"></i>
          </div>
        </el-tooltip>
      </div>
      <div class="btn-group">
        <el-tooltip content="删除" placement="bottom">
          <div class="btn" @click="deleteNode()" style="margin-top: 5px">
            <i class="iconfont icon-shanchu"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="保存PNG" placement="bottom">
          <div class="btn" @click="saveToPNG()" title="保存">
            <i class="iconfont icon-baocun"></i>
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import "@antv/x6-vue-shape";
import { Graph, Shape, Addon, FunctionExt, DataUri } from "@antv/x6";
import RightDrawer from "./RightDrawer";
import insertCss from "insert-css";
import { startDragToGraph } from "./Graph/methods.js";
const data = {};
export default {
  data() {
    return {};
    return {
      graph: "",
      value1: true,
      type: "grid",
      selectCell: "",
      connectEdgeType: {
        //连线方式
        connector: "normal",
        router: {
          name: "",
        },
      },
      showTips: false,
      currentArrow: 1,
      grid: {
        // ç½‘格设置
        size: 20, // ç½‘格大小 10px
        visible: true, // æ¸²æŸ“网格背景
        type: "mesh",
        args: {
          color: "#D0D0D0",
          thickness: 1, // ç½‘格线宽度/网格点大小
          factor: 10,
        },
      },
    };
  },

  created() {},

  methods: {},
  components: {
    RightDrawer,
  },
  methods: {
    initX6() {
      var _that = this;
      this.graph = new Graph({
        container: document.getElementById("containerChart"),
        width: 1700,
        height: "100%",
        grid: _that.grid,
        resizing: {
          //调整节点宽高
          enabled: true,
          orthogonal: false,
        },
        selecting: true, //可选
        snapline: true,
        interacting: {
          edgeLabelMovable: true,
        },
        connecting: {
          // èŠ‚点连接
          anchor: "center",
          connectionPoint: "anchor",
          allowBlank: false,
          snap: true,
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: "#1890ff",
                  strokeWidth: 1,
                  targetMarker: {
                    name: "classic",
                    size: 8,
                  },
                  strokeDasharray: 0, //虚线
                  style: {
                    animation: "ant-line 30s infinite linear",
                  },
                },
              },
              label: {
                text: "",
              },
              connector: _that.connectEdgeType.connector,
              router: {
                name: _that.connectEdgeType.router.name || "",
              },
              zIndex: 0,
            });
          },
        },
        highlighting: {
          magnetAvailable: {
            name: "stroke",
            args: {
              padding: 4,
              attrs: {
                strokeWidth: 4,
                stroke: "#6a6c8a",
              },
            },
          },
        },
      });
      insertCss(`
            @keyframes ant-line {
              to {
                  stroke-dashoffset: -1000
              }
            }
          `);
      this.graph.fromJSON(data);
      // é‡åšã€‚options å°†è¢«ä¼ é€’到事件回调中。
      this.graph.history.redo();
      // æ’¤é”€ã€‚options å°†è¢«ä¼ é€’到事件回调中
      this.graph.history.undo();
      // é¼ æ ‡ç§»å…¥ç§»å‡ºèŠ‚点
      this.graph.on(
        "node:mouseenter",
        FunctionExt.debounce(() => {
          const container = document.getElementById("containerChart");
          const ports = container.querySelectorAll(".x6-port-body");
          this.showPorts(ports, true);
        }),
        500
      );
      // é¼ æ ‡ç§»å¼€èŠ‚点
      this.graph.on("node:mouseleave", () => {
        const container = document.getElementById("containerChart");
        const ports = container.querySelectorAll(".x6-port-body");
        this.showPorts(ports, false);
      });
      // å•å‡»ç©ºç™½
      this.graph.on("blank:click", () => {
        this.type = "grid";
      });
      // å•å‡»èŠ‚点或边
      this.graph.on("cell:click", ({ cell }) => {
        this.type = cell.isNode() ? "node" : "edge";
      });
      // é€‰ä¸­çš„节点/边发生改变(增删)时触发。
      this.graph.on("selection:changed", (args) => {
        args.added.forEach((cell) => {
          this.selectCell = cell;
          if (cell.isEdge()) {
            cell.isEdge() && cell.attr("line/strokeDasharray", 5); //虚线蚂蚁线
            cell.addTools([
              {
                name: "vertices",
                args: {
                  padding: 4,
                  attrs: {
                    strokeWidth: 0.1,
                    stroke: "#2d8cf0",
                    fill: "#ffffff",
                  },
                },
              },
            ]);
          }
        });
        args.removed.forEach((cell) => {
          cell.isEdge() && cell.attr("line/strokeDasharray", 0); //正常线
          cell.removeTools();
        });
      });
    },
    showPorts(ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? "visible" : "hidden";
      }
    },
    // æ‹–拽生成正方形或者圆形
    startDrag(type, e) {
      startDragToGraph(this.graph, type, e);
    },
    // åˆ é™¤èŠ‚点
    deleteNode() {
      const cell = this.graph.getSelectedCells();
      this.graph.removeCells(cell);
      this.type = "grid";
    },
    // ä¿å­˜png
    saveToPNG() {
      this.$nextTick(() => {
        this.graph.toPNG(
          (dataUri) => {
            // ä¸‹è½½
            DataUri.downloadDataUri(dataUri, "资产拓扑图.png");
          },
          {
            backgroundColor: "white",
            padding: {
              top: 50,
              right: 50,
              bottom: 50,
              left: 50,
            },
            quality: 1,
            copyStyles: false,
          }
        );
      });
    },
    // æ”¹å˜è¾¹å½¢çŠ¶
    changeEdgeType(e) {
      if (e === "normal") {
        this.connectEdgeType = {
          connector: "normal",
          router: { name: "" },
        };
        this.currentArrow = 1;
      } else if (e === "smooth") {
        this.connectEdgeType = {
          connector: "smooth",
          router: { name: "" },
        };
        this.currentArrow = 2;
      } else {
        this.connectEdgeType = {
          connector: "normal",
          router: { name: "manhattan" },
        };
        this.currentArrow = 3;
      }
    },
  },
  mounted() {
    this.initX6();
    setTimeout(() => {
      this.showTips = true;
    }, 1000);
    setTimeout(() => {
      this.showTips = false;
    }, 5000);
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
@import "./iconfont.css";
@import "./index.scss";
</style>