单机故障诊断/故障定位单机完成

package.json

@@ -10,6 +10,7 @@
     "core-js": "^3.6.5",
     "echarts": "^5.3.3",
     "element-ui": "^2.15.9",
+    "gojs": "^2.2.14",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/views/CurrentDiagnosis/components/ForceGuideChart.vue

@@ -0,0 +1,270 @@
+<template>
+  <div style="position: relative">
+    <div :id="goid" :style="{ height: height }"></div>
+  </div>
+</template>
+<script>
+import pic01 from "../../../assets/images/bg.webp";
+import pic02 from "../../../assets/images/bg.webp";
+import icon1 from "../../../assets/images/bg.webp";
+import icon2 from "../../../assets/images/bg.webp";
+import go from "gojs";
+export default {
+  name: "ForceGuideChart",
+  props: {
+    dataList: {
+      type: Array,
+      required: true,
+    },
+    linkList: {
+      type: Array,
+      required: true,
+    },
+    modelParts: {
+      type: Array,
+      //   required: true,
+    },
+    goid: {
+      type: String,
+      required: true,
+    },
+    dataTaskId: {
+      type: String | Number,
+      required: true,
+    },
+    height: {
+      type: String,
+      default() {
+        return "calc(50vh )";
+      },
+    },
+  },
+  data() {
+    return {
+      myDiagram: "",
+    };
+  },
+  watch: {
+    dataList: {
+      handler(newVal) {
+        if (newVal.length > 0) {
+          this.reloadModel();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted() {
+    this.goInit();
+  },
+  methods: {
+    goInit() {
+      let _this = this;
+      let gm = go.GraphObject.make;
+      function ContinuousForceDirectedLayout() {
+        go.ForceDirectedLayout.call(this);
+        this._isObserving = false;
+      }
+      go.Diagram.inherit(ContinuousForceDirectedLayout, go.ForceDirectedLayout);
+      ContinuousForceDirectedLayout.prototype.isFixed = function (v) {
+        return v.node.isSelected;
+      };
+      ContinuousForceDirectedLayout.prototype.doLayout = function (coll) {
+        if (!this._isObserving) {
+          this._isObserving = true;
+          let lay = this;
+          this.diagram.addModelChangedListener(function (e) {
+            if (
+              e.modelParts !== "" ||
+              (e.change == go.ChangedEvent.Transaction &&
+                e.propertyName === "StartingFirstTransaction")
+            ) {
+              lay.network = null;
+            }
+          });
+        }
+
+        let net = this.network;
+        if (net === null) {
+          this.network = net = this.makeNetwork(coll);
+        } else {
+          this.diagram.nodes.each(function (n) {
+            let v = net.findVertex(n);
+            if (v !== null) v.bounds = n.actualBounds;
+          });
+        }
+        go.ForceDirectedLayout.prototype.doLayout.call(this, coll);
+        this.network = net;
+      };
+
+      _this.myDiagram = gm(go.Diagram, _this.goid, {
+        initialAutoScale: go.Diagram.Uniform,
+        contentAlignment: go.Spot.Center,
+        layout: gm(ContinuousForceDirectedLayout, {
+          defaultSpringLength: 30,
+          defaultElectricalCharge: 100,
+        }),
+        SelectionMoved: function (e) {
+          e.diagram.layout.invalidateLayout();
+        },
+      });
+      _this.myDiagram.toolManager.draggingTool.doMouseMove = function () {
+        go.DraggingTool.prototype.doMouseMove.call(this);
+        if (this.isActive) {
+          this.diagram.layout.invalidateLayout();
+        }
+      };
+      let myContextMenu = gm(
+        "ContextMenu",
+        gm(
+          "ContextMenuButton",
+          gm(go.TextBlock, "交互诊断", {
+            alignment: go.Spot.Center,
+            margin: 10,
+            font: "16px 500 sans-serif",
+            opacity: 0.75,
+            stroke: "#404040",
+          }),
+          {
+            click: function (e, obj) {
+              _this.handleInteractive(e, obj);
+            },
+          }
+        )
+      );
+      _this.myDiagram.nodeTemplate = gm(
+        go.Node,
+        "Vertical",
+        {
+          selectionObjectName: "BODY",
+          deletable: false,
+        },
+        gm(
+          go.Panel,
+          "Auto",
+          { name: "BODY" },
+          { contextMenu: myContextMenu },
+          gm(
+            go.Panel,
+            go.Panel.Auto,
+            gm(
+              go.Picture,
+              new go.Binding("width", "category", _this.nodeTypeImageWidth),
+              new go.Binding("height", "category", _this.nodeTypeImageHeight),
+              new go.Binding("source", "diagnosisStatus", _this.nodeTypeImage)
+            )
+          ),
+          gm(
+            go.Panel,
+            go.Panel.Auto,
+            gm(
+              go.Panel,
+              "Horizontal",
+              gm(
+                go.Picture,
+                { margin: 5, width: 20, height: 20 },
+                new go.Binding("source", "category", _this.nodeIconImage)
+              ),
+              gm(
+                go.TextBlock,
+                {
+                  font: "700 12px Droid Serif,sans-serif",
+                  textAlign: "center",
+                  maxSize: new go.Size(70, NaN),
+                },
+                new go.Binding("text", "name")
+              )
+            )
+          )
+        )
+      );
+
+      _this.myDiagram.linkTemplate = gm(
+        go.Link,
+        { routing: go.Link.AvoidsNodes },
+        { deletable: false, corner: 0 },
+        gm(go.Shape, { strokeWidth: 1, stroke: "rgb(135,195,255)" }),
+        gm(go.Shape, { toArrow: 1, stroke: "rgb(135,195,255)" }),
+        gm(
+          go.TextBlock,
+          go.Link.OrientUpright,
+          {
+            background: "rgb(135,195,255)",
+            visible: false,
+            segmentIndex: -2,
+            segmentOrientation: go.Link.None,
+          },
+          new go.Binding("text", "answer"),
+          new go.Binding("visible", "answer", function (a) {
+            return !!a;
+          })
+        )
+      );
+      let nodeDataArray = _this.dataList;
+      let linkDataArray = _this.linkList;
+
+      _this.myDiagram.model = new go.GraphLinksModel(
+        nodeDataArray,
+        linkDataArray
+      );
+
+      _this.myDiagram.addDiagramListener("ChangeSelection", function (e) {
+        if (_this.myDiagram.selection.iterator.count === 0) {
+          _this.$emit("unselectNode");
+        } else {
+          let selection = _this.myDiagram.selection.iterator.first();
+          const paths = _this.getPaths(selection.data);
+          _this.$emit("selectNode", selection.data, paths);
+        }
+      });
+    },
+    reloadModel() {
+      if (this.myDiagram) {
+        this.myDiagram.model = new go.GraphLinksModel(
+          this.dataList,
+          this.linkList
+        );
+      }
+    },
+    nodeTypeImageWidth(category) {
+      if (category === "system") return 120;
+      else if (category === "unit") return 120;
+    },
+    nodeTypeImageHeight(category) {
+      if (category === "system") return 90;
+      else if (category === "unit") return 50;
+    },
+    genderBrushConverter(diagnosisStatus) {
+      if (diagnosisStatus === 0) return "#90caf9";
+      if (diagnosisStatus === 1) return "#f48fb1";
+      return "orange";
+    },
+    nodeTypeImage(diagnosisStatus) {
+      if (diagnosisStatus > 0) return pic02;
+      else return pic01;
+    },
+    nodeIconImage(category) {
+      if (category === "system") return icon1;
+      else if (category === "unit") return icon2;
+    },
+    nodeTypeWidth(category) {
+      if (category === "system") return "150 50";
+      else if (category === "unit") return "100 100";
+    },
+    handleDiaSync(e, obj) {
+      console.log(obj);
+    },
+    getPaths(data) {
+      console.log(data);
+    },
+    handleMechanism(e, obj) {
+      console.log(e, obj);
+    },
+    handleInteractive(e, obj) {
+      console.log(e, obj);
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/views/CurrentDiagnosis/components/Step1.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-s-help mr-2"></i>
+            <span>弹上</span>
+          </div>
+          <el-radio-group class="mb-6" v-model="radio1" size="medium">
+            <el-radio-button label="KZ系统"></el-radio-button>
+            <el-radio-button label="DT"></el-radio-button>
+            <el-radio-button label="YK系统"></el-radio-button>
+            <el-radio-button label="DL系统"></el-radio-button>
+            <el-radio-button label="单体结构"></el-radio-button>
+            <el-radio-button label="TF系统"></el-radio-button>
+          </el-radio-group>
+
+          <ForceGuideChart
+            ref="groundChart"
+            key="groundForceGuideChart"
+            goid="groundForceGuideChart"
+            dataTaskId="13298120ads"
+            :linkList="linkList"
+            :dataList="dataList"
+          ></ForceGuideChart>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <i class="el-icon-box mr-2"></i>
+            <span>地面</span>
+          </div>
+          <el-radio-group v-model="radio1" size="medium">
+            <el-radio-button label="DD发射车"></el-radio-button>
+            <el-radio-button label="CF系统"></el-radio-button>
+            <el-radio-button label="指挥设备"></el-radio-button>
+            <el-radio-button label="技术阵地"></el-radio-button>
+            <el-radio-button label="能源设备"></el-radio-button>
+          </el-radio-group>
+
+          <ForceGuideChart
+            ref="groundChart2"
+            key="groundForceGuideChart2"
+            goid="groundForceGuideChart2"
+            dataTaskId="13298120ads2"
+            :linkList="linkList"
+            :dataList="dataList"
+          ></ForceGuideChart>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import bg from "../../../assets/images/bg.webp";
+import ForceGuideChart from "./ForceGuideChart.vue";
+import go from "gojs";
+export default {
+  name: "Step1",
+  components: {
+    ForceGuideChart,
+  },
+  data() {
+    return {
+      bg,
+      radio1: "KZ系统",
+      radio2: "KZ系统",
+      linkList: [],
+      dataList: [],
+    };
+  },
+  mounted() {
+    this.dataList = [
+      {
+        name: "AAA",
+        key: "a",
+        loc: "0 0",
+        category: "unit",
+        diagnosisStatus: 0,
+      },
+      {
+        name: "BBB",
+        key: "b",
+        loc: "100 50",
+        category: "unit",
+        diagnosisStatus: 1,
+      },
+      {
+        name: "CCC",
+        key: "c",
+        loc: "100 50",
+        category: "unit",
+        diagnosisStatus: 1,
+      },
+      {
+        name: "DDD",
+        key: "d",
+        loc: "100 50",
+        category: "unit",
+        diagnosisStatus: 1,
+      },
+      {
+        name: "EEE",
+        key: "e",
+        loc: "100 50",
+        category: "unit",
+        diagnosisStatus: 1,
+      },
+      {
+        name: "FFF",
+        key: "f",
+        loc: "100 50",
+        category: "unit",
+        diagnosisStatus: 1,
+      },
+      {
+        name: "GGG",
+        key: "g",
+        loc: "100 50",
+        category: "unit",
+        diagnosisStatus: 1,
+      },
+    ];
+    this.linkList = [
+      { from: "a", to: "b" },
+      { from: "a", to: "c" },
+      { from: "a", to: "d" },
+      { from: "a", to: "e" },
+      { from: "e", to: "f" },
+      { from: "e", to: "g" },
+    ];
+    // var $ = go.GraphObject.make;
+    // var myDiagram = $(go.Diagram, "myDiagramDiv", {
+    //   "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
+    //   layout: $(
+    //     go.TreeLayout, // specify a Diagram.layout that arranges trees
+    //     { angle: 90, layerSpacing: 35 }
+    //   ),
+    // });
+    // // the template we defined earlier
+    // myDiagram.nodeTemplate = $(
+    //   go.Node,
+    //   "Horizontal",
+    //   { background: "red" },
+    //   $(
+    //     go.Picture,
+    //     { margin: 10, width: 50, height: 50, background: "green" },
+    //     new go.Binding("source")
+    //   ),
+    //   $(
+    //     go.TextBlock,
+    //     "Default Text",
+    //     { margin: 12, stroke: "white", font: "bold 16px 微软雅黑" },
+    //     new go.Binding("text", "name")
+    //   )
+    // );
+    // // define a Link template that routes orthogonally, with no arrowhead
+    // myDiagram.linkTemplate = $(
+    //   go.Link,
+    //   { routing: go.Link.Orthogonal, corner: 5 },
+    //   $(go.Shape, { strokeWidth: 3, stroke: "#555" })
+    // ); // the link shape
+    // var model = $(go.TreeModel);
+    // model.nodeDataArray = [
+    //   { key: "1", name: "Don Meow", source: "/images/learn/cat1.png" },
+    //   {
+    //     key: "2",
+    //     parent: "1",
+    //     name: "Demeter",
+    //     source: this.bg,
+    //   },
+    //   {
+    //     key: "3",
+    //     parent: "1",
+    //     name: "Copricat",
+    //     source: "/images/learn/cat3.png",
+    //   },
+    //   {
+    //     key: "4",
+    //     parent: "3",
+    //     name: "Jellylorum",
+    //     source: "/images/learn/cat4.png",
+    //   },
+    //   {
+    //     key: "5",
+    //     parent: "3",
+    //     name: "Alonzo",
+    //     source: "/images/learn/cat5.png",
+    //   },
+    //   {
+    //     key: "6",
+    //     parent: "2",
+    //     name: "Munkustrap",
+    //     source: "/images/learn/cat6.png",
+    //   },
+    // ];
+    // myDiagram.model = model;
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/views/CurrentDiagnosis/components/Step2.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-card>
+          <div class="mb-4" v-for="item in 10" :key="item">
+            <div class="mb-2">
+              <i class="el-icon-setting text-red-400 font-bold mr-2"></i>
+              <span>技术阵地电缆网</span>
+            </div>
+            <el-card>
+              <div class="flex justify-between">
+                <div class="font-bold">
+                  <i class="el-icon-setting"></i>
+                  故障概率
+                </div>
+                <div>16.82%</div>
+              </div>
+              <div class="mt-5">
+                <el-radio-group
+                  v-model="radio"
+                  class="flex items-center justify-around"
+                >
+                  <el-radio :label="1">存在故障</el-radio>
+                  <el-radio :label="2">排除故障</el-radio>
+                </el-radio-group>
+              </div>
+            </el-card>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="10">
+        <el-card>
+          <div class="flex flex-col">
+            <el-select v-model="value" class="mb-2">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <el-select v-model="value1" class="mb-2">
+              <el-option
+                v-for="item in options1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <div
+              id="myDiagramDiv"
+              style="width: 100%; min-height: 70vh; background: #ddd"
+            ></div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <div class="mb-5">排故指南</div>
+          <div class="" style="min-height:76.5vh">
+            <div>1检测装备升级</div>
+            <div>2测试软件是否正常</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import ForceGuideChart from "./ForceGuideChart.vue";
+export default {
+  name: "Step2",
+  components: {
+    ForceGuideChart,
+  },
+  data() {
+    return {
+      linkList: [
+        { from: "a", to: "b" },
+        { from: "a", to: "c" },
+        { from: "a", to: "d" },
+        { from: "a", to: "e" },
+        { from: "e", to: "f" },
+        { from: "e", to: "g" },
+      ],
+      dataList: [
+        {
+          name: "AAA",
+          key: "a",
+          loc: "0 0",
+          category: "unit",
+          diagnosisStatus: 0,
+        },
+        {
+          name: "BBB",
+          key: "b",
+          loc: "100 50",
+          category: "unit",
+          diagnosisStatus: 1,
+        },
+        {
+          name: "CCC",
+          key: "c",
+          loc: "100 50",
+          category: "unit",
+          diagnosisStatus: 1,
+        },
+        {
+          name: "DDD",
+          key: "d",
+          loc: "100 50",
+          category: "unit",
+          diagnosisStatus: 1,
+        },
+        {
+          name: "EEE",
+          key: "e",
+          loc: "100 50",
+          category: "unit",
+          diagnosisStatus: 1,
+        },
+        {
+          name: "FFF",
+          key: "f",
+          loc: "100 50",
+          category: "unit",
+          diagnosisStatus: 1,
+        },
+        {
+          name: "GGG",
+          key: "g",
+          loc: "100 50",
+          category: "unit",
+          diagnosisStatus: 1,
+        },
+      ],
+      radio: 1,
+      options: [
+        {
+          value: "控制系统",
+          label: "控制系统",
+        },
+        {
+          value: "指挥系统",
+          label: "指挥系统",
+        },
+      ],
+      value: "控制系统",
+
+      options1: [
+        {
+          value: "测发控报表与未修配电器相关错误",
+          label: "测发控报表与未修配电器相关错误",
+        },
+        {
+          value: "测发控报表错误",
+          label: "测发控报表错误",
+        },
+      ],
+      value1: "测发控报表与未修配电器相关错误",
+    };
+  },
+  mounted() {
+    this.goInit();
+  },
+  methods: {
+    goInit() {
+      var $ = go.GraphObject.make;
+
+      var myDiagram = $(go.Diagram, "myDiagramDiv", {
+        initialContentAlignment: go.Spot.Center, // center Diagram contents
+        "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
+        layout: $(
+          go.TreeLayout, // specify a Diagram.layout that arranges trees
+          { angle: 90, layerSpacing: 35 }
+        ),
+      });
+
+      // the template we defined earlier
+      myDiagram.nodeTemplate = $(
+        go.Node,
+        "Auto",
+        { desiredSize: new go.Size(120, 50) },
+        { background: "white" },
+
+        // $(
+        //   go.Picture,
+        //   { margin: 10, width: 50, height: 50 },
+        //   new go.Binding("source")
+        // ),
+        $(
+          go.TextBlock,
+          "Default Text",
+          {
+            margin: 12,
+            stroke: "black",
+            font: " 15px sans-serif",
+            textAlign: "center",
+          },
+          new go.Binding("text", "name")
+        )
+      );
+
+      // define a Link template that routes orthogonally, with no arrowhead
+      myDiagram.linkTemplate = $(
+        go.Link,
+        { routing: go.Link.Orthogonal, corner: 5 },
+        $(go.Shape, { strokeWidth: 1, stroke: "#555" })
+      ); // the link shape
+
+      var model = $(go.TreeModel);
+      model.nodeDataArray = [
+        { key: "1", name: "显示控制", source: "cat1.png" },
+        { key: "2", parent: "1", name: "终端故障", source: "cat2.png" },
+        { key: "3", parent: "1", name: "测控设备", source: "cat3.png" },
+        { key: "4", parent: "3", name: "设备故障", source: "cat4.png" },
+        { key: "5", parent: "3", name: "地面", source: "cat5.png" },
+        { key: "6", parent: "2", name: "电缆网故障", source: "cat6.png" },
+      ];
+      myDiagram.model = model;
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/views/CurrentDiagnosis/components/Step5.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane label="技术阵地电缆网">
+        <el-row :gutter="20">
+          <el-col :span="5">
+            <!-- <el-tag
+              class="mb-3"
+              v-for="tag in list"
+              :key="tag.name"
+              closable
+              type="danger"
+            >
+              {{ tag.name }}
+            </el-tag> -->
+            <div
+              class="my-tag mb-3 flex items-center justify-between"
+              v-for="tag in list"
+              :key="tag.name"
+            >
+              <div class="name">
+                {{ tag.name }}
+              </div>
+              <div><i class="el-icon-close"></i></div>
+            </div>
+          </el-col>
+          <el-col :span="19">
+            <el-tabs type="border-card">
+              <el-tab-pane label="模型诊断">模型诊断</el-tab-pane>
+              <el-tab-pane label="案例诊断">案例诊断</el-tab-pane>
+              <el-tab-pane label="故障树诊断">故障树诊断</el-tab-pane>
+              <el-tab-pane label="人工诊断">
+                <el-form
+                  :rules="rules"
+                  ref="form"
+                  :model="form"
+                  label-width="120px"
+                >
+                  <el-form-item label="故障模式名称" prop="name">
+                    <el-input v-model="form.name"></el-input>
+                  </el-form-item>
+                  <el-form-item label="故障原因" prop="reason">
+                    <el-input v-model="form.reason"></el-input>
+                  </el-form-item>
+                  <el-form-item label="处置措施" prop="measures">
+                    <el-input v-model="form.measures"></el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button icon="el-icon-plus" type="primary" @click="onAdd"
+                      >添加</el-button
+                    >
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      list: [
+        {
+          name: "测试name",
+          measures: "测试measures",
+          reason: "测试reason",
+        },
+      ],
+      form: {
+        name: "",
+        measures: "",
+        reason: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        measures: [
+          { required: true, message: "请输入故障原因", trigger: "blur" },
+        ],
+        reason: {
+          required: true,
+          message: "请输入处置措施",
+          trigger: "blur",
+        },
+      },
+    };
+  },
+  methods: {
+    onAdd() {
+      this.$refs["form"].validate((valid) => {
+        if (!valid) return;
+        this.list.push({...this.form});
+        this.$refs["form"].resetFields()
+        this.$refs["form"].clearValidate()
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.my-tag {
+  background-color: #fef0f0;
+  border-color: #fde2e2;
+  color: #f56c6c;
+  height: 32px;
+  padding: 0 10px;
+  line-height: 30px;
+  font-size: 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  .name {
+    overflow: hidden; // 溢出隐藏
+    white-space: nowrap; // 强制一行
+    text-overflow: ellipsis; // 文字溢出显示省略号
+  }
+}
+</style>

src/views/CurrentDiagnosis/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- header -->
-    <div class="flex items-center justify-center">
+    <div class="flex items-center justify-center mb-5">
       <div class="flex-1">
         <el-steps
           space="14%"
@@ -10,7 +10,7 @@
           align-center
         >
           <el-step title="数据预处理"></el-step>
-          <el-step title="故障初步定为"></el-step>
+          <el-step title="故障初步定位"></el-step>
           <el-step title="故障定位单机"></el-step>
           <el-step title="系统诊断详情"></el-step>
           <el-step title="单机故障诊断"></el-step>
@@ -28,11 +28,26 @@
         >
       </div>
     </div>
+
+    <!-- content -->
+    <div class="content">
+      <Step1 v-show="active==1"></Step1>
+      <Step2 v-show="active==2"></Step2>
+      <Step5 v-show="active==4"></Step5>
+    </div>
   </div>
 </template>
 <script>
+import Step1 from "./components/Step1.vue";
+import Step2 from "./components/Step2.vue";
+import Step5 from "./components/Step5.vue";
 export default {
   name: "currentDiagosis",
+  components: {
+    Step1,
+    Step2,
+    Step5,
+  },
   data() {
     return {
       active: 1,

yarn.lock

@@ -4193,6 +4193,11 @@ globby@^9.2.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
+gojs@^2.2.14:
+  version "2.2.14"
+  resolved "https://repo.huaweicloud.com/repository/npm/gojs/-/gojs-2.2.14.tgz#d1a5036a1d50ad96897d854d26010aed26446ab9"
+  integrity sha512-Uj97rrlSJ2ezfNW1G9garAJFrcJJ1FPK1rrS3K4C07qxUfLP69x5rixhXgDu71a2CLzb+QroHD1oBva29LbSZw==
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.10"
   resolved "https://repo.huaweicloud.com/repository/npm/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"