当前诊断 故障初步定位完成

package.json

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

src/views/CurrentDiagnosis/components/FaultTreeSingleView.vue

@@ -0,0 +1,440 @@
+<template>
+  <div class="dashboard-container">
+    <div class="draw-container">
+      <div
+        ref="myDiagramDiv"
+        :style="{ height: height, 'overflow-y': 'auto' }"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+import go from "gojs";
+import "gojs/extensions/Figures.js";
+export default {
+  name: "faultTreeView",
+  props: {
+    treeId: {
+      type: Number,
+    },
+    currentKey: {
+      type: Number | String,
+      default() {
+        return undefined;
+      },
+    },
+    height: {
+      type: String,
+      default() {
+        return "calc(100vh - 50px)";
+      },
+    },
+  },
+  data() {
+    return {
+      editable: false,
+      message: [],
+      link: [],
+      currentNode: {},
+      linkDrawn: false,
+      timer: null,
+      scale: "1",
+      importExcelVisible: false,
+      importParentKey: null,
+    };
+  },
+  watch: {
+    scale: {
+      handler(newValue) {
+        if (newValue) this.zoom(newValue);
+      },
+      deep: true,
+      immediate: false,
+    },
+    treeId() {
+      this.loadTreeModel();
+    },
+    currentNode() {
+      this.$nextTick(() => {
+        const node = this.myDiagram.findNodeForKey(this.currentNode.key);
+        if (node) {
+          const child = this.message.filter(
+            (node) => node.parent === this.currentNode.key
+          );
+          this.$emit("selectNode", this.currentNode, child);
+          const rect = node.getDocumentBounds();
+          const set = node.findTreeParentChain();
+          this.myDiagram.highlightCollection(set);
+          this.myDiagram.select(node);
+          rect.inflate(300, 300);
+          this.myDiagram.zoomToRect(rect);
+        }
+      });
+    },
+    currentKey: {
+      immediate: true,
+      handler() {
+        this.$nextTick(() => {
+          const node = this.myDiagram.findNodeForKey(Number(this.currentKey));
+          if (node) {
+            const child = this.message.filter(
+              (node) => node.parent === this.currentKey
+            );
+            this.$emit("selectNode", node, child);
+            const rect = node.getDocumentBounds();
+            const set = node.findTreeParentChain();
+            this.myDiagram.highlightCollection(set);
+            this.myDiagram.select(node);
+            rect.inflate(300, 300);
+            this.myDiagram.zoomToRect(rect);
+          }
+        });
+      },
+    },
+  },
+  mounted() {
+    this.initD();
+  },
+  methods: {
+    initD() {
+      let mySelf = this;
+      const MAKE = go.GraphObject.make;
+      mySelf.myDiagram = MAKE(go.Diagram, this.$refs.myDiagramDiv, {
+        initialContentAlignment: go.Spot.Center,
+        "undoManager.isEnabled": false,
+        "toolManager.hoverDelay": 100,
+        "toolManager.toolTipDuration": 10000,
+        "grid.visible": false,
+        allowMove: false,
+        allowDrop: false,
+        nodeSelectionAdornmentTemplate: MAKE(
+          go.Adornment,
+          "Auto",
+          MAKE(go.Shape, "Rectangle", { fill: "white", stroke: null })
+        ),
+        allowDelete: false,
+        allowCopy: false,
+        allowClipboard: false,
+        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
+        layout: MAKE(go.TreeLayout, {
+          isInitial: true,
+          isOngoing: true,
+          nodeSpacing: 50,
+          layerSpacing: 50,
+          angle: 90,
+        }),
+      });
+
+      function nodeSelectionChanged(node) {
+        if (node.isSelected) {
+          mySelf.currentNode = node.data;
+        }
+      }
+      let nodeSelectionAdornmentTemplate = MAKE(
+        go.Adornment,
+        "Auto",
+        MAKE(go.Shape, { fill: null, stroke: "red", strokeWidth: 1.5 }),
+        MAKE(go.Placeholder)
+      );
+
+      function makeConditionTemplate(shape, angle, fill, stroke, base, spot) {
+        return MAKE(
+          go.Node,
+          "Vertical",
+          {
+            selectionChanged:nodeSelectionChanged,
+            selectionAdornmentTemplate:nodeSelectionAdornmentTemplate,
+          },
+          new go.Binding("location", "loc", go.Point.parse),
+          MAKE(
+            go.Panel,
+            "Spot",
+            MAKE(
+              go.Panel,
+              "Vertical",
+              { name: "PANEL" },
+              MAKE(
+                go.Panel,
+                "Auto",
+                { name: "PANEL" },
+
+                MAKE(
+                  go.Shape,
+                  "Rectangle",
+                  {
+                    name: "Shape",
+                    cursor: "pointer",
+                    fill: "white",
+                    strokeWidth: 1,
+                    width: 200,
+                    height: 70,
+                  },
+                  new go.Binding("stroke", "isHighlighted", function (h) {
+                    return h ? "#ff4040" : "black";
+                  }).ofObject(),
+                  new go.Binding("fill", "isHighlighted", function (h) {
+                    return h ? "#ffc125" : "white";
+                  }).ofObject(),
+                  new go.Binding("width"),
+                  new go.Binding("height"),
+                  new go.Binding("margin")
+                ),
+                MAKE(
+                  go.TextBlock,
+                  {
+                    name: "textbox",
+                    font: "normal 11pt Helvetica,Arial,sans-serif",
+                    margin: 8,
+                    maxSize: new go.Size(160, NaN),
+                    wrap: go.TextBlock.WrapFit,
+                    editable: false,
+                    overflow: go.TextBlock.OverflowEllipsis,
+                  },
+                  new go.Binding("text", "tfEventName")
+                )
+              ),
+              MAKE(go.Shape, "LineV", {
+                strokeWidth: 1.5,
+                height: 30,
+                alignment: new go.Spot(0.5, 1, 0, -1),
+                alignmentFocus: go.Spot.Top,
+              }),
+              MAKE(
+                go.Panel,
+                "Auto",
+                MAKE(go.Shape, "Rectangle", {
+                  width: 40,
+                  height: 40,
+                  fill: "#8b8b8b",
+                  strokeWidth: 0,
+                }),
+                MAKE(go.Shape, shape, {
+                  cursor: "pointer",
+                  fill: fill,
+                  strokeWidth: stroke ? 2 : 0,
+                  stroke: stroke || "",
+                  width: 40,
+                  height: 40,
+                  angle: angle,
+                })
+              )
+            ),
+            MAKE("TreeExpanderButton")
+          ),
+          {
+            mouseEnter(e, node) {},
+            mouseLeave(e, node) {},
+          }
+        );
+      }
+
+      mySelf.myDiagram.nodeTemplateMap.add(
+        "UNEXPAND",
+        makeConditionTemplate("Diamond", 0, "pink", "", true)
+      );
+      mySelf.myDiagram.nodeTemplateMap.add(
+        "LEAF",
+        makeConditionTemplate("Circle", 0, "SlateBlue", "", true)
+      );
+      mySelf.myDiagram.nodeTemplateMap.add(
+        "AND",
+        makeConditionTemplate("AndGate", -90, "#4572c4")
+      );
+
+      mySelf.myDiagram.nodeTemplateMap.add(
+        "OR",
+        makeConditionTemplate(
+          "OrGate",
+          -90,
+          "DarkCyan",
+          "",
+          false,
+          new go.Spot(0.5, 0.95)
+        )
+      );
+
+      mySelf.myDiagram.nodeTemplateMap.add(
+        "EOR",
+        makeConditionTemplate("Delay", -90, "SpringGreen")
+      );
+
+      mySelf.myDiagram.nodeTemplateMap.add(
+        "VOTER",
+        makeConditionTemplate(
+          "XorGate",
+          -90,
+          "Gold",
+          "Gold",
+          false,
+          new go.Spot(0.5, 0.95)
+        )
+      );
+
+      mySelf.myDiagram.nodeTemplateMap.add(
+        "FORBID",
+        makeConditionTemplate("DataTransmissions", 0, "Orange")
+      );
+
+      mySelf.myDiagram.linkTemplate = MAKE(
+        go.Link,
+        {
+          routing: go.Link.Orthogonal,
+          corner: 5,
+        },
+        MAKE(
+          go.Shape,
+          { strokeWidth: 2, stroke: "#199ED8" },
+          new go.Binding("strokeWidth", "isHighlighted", function (h) {
+            return H ? 4 : 2;
+          }).ofObject(),
+          new go.Binding("stroke", "isHighlighted", function (h) {
+            return h ? "#ff4040" : "#199ED8";
+          }).ofObject()
+        ),
+        MAKE(go.Shape, { toArrow: "Standard", fill: "#199ED8", stroke: null })
+      );
+
+      mySelf.myDiagram.addDiagramListener("LinkDrawn", function (e) {
+        mySelf.linkDrawn = true;
+        mySelf.myDiagram.layoutDiagram(true);
+      });
+
+      mySelf.myDiagram.addDiagramListener(
+        "BackgroundSingleClicked",
+        function (e) {
+          mySelf.currentNode = {
+            prperty: "item",
+          };
+        }
+      );
+
+      mySelf.myDiagram.addDiagramListener(
+        "InitialLayoutCompleted",
+        function (e) {
+          const node = mySelf.myDiagram.findNodeForKey(
+            Number(mySelf.currentKey)
+          );
+          if (node) {
+            const rect = node.getDocumentBounds();
+            const set = node.findTreeParentChain();
+            mySelf.myDiagram.highlightCollection(set);
+            mySelf.myDiagram.select(node);
+            rect.inflate(300, 300);
+            mySelf.myDiagram.zoomToRect(rect);
+          }
+        }
+      );
+      this.loadTreeModel();
+    },
+    init() {
+      this.message.forEach((item) => {
+        item.property = "event";
+      });
+      let mySelf = this;
+      mySelf.myDiagram.model = new go.TreeModel(this.message);
+    },
+    loadTreeModel() {
+      let treeNodeList = [
+        {
+          category: "OR",
+          describe: "排查飞控机，通过分析判读软件解析后台数据",
+          isCalculation: false,
+          isCommonEvent: false,
+          key: -4,
+          phenomenon: "测发控报表与惯组相关错误",
+          text: "未命名时间",
+          tfEventName: "测发控报表与惯组相关错误",
+          tfEventType: 0,
+          tfEventTypeName: "基本事件",
+        },
+        {
+          category: "OR",
+          describe: "排查飞控机，通过分析判读软件解析后台数据222",
+          isCalculation: false,
+          isCommonEvent: false,
+          key: -2,
+          parent: -4,
+          phenomenon: "测发控报表与惯组相关错误",
+          text: "未命名事件",
+          tfEventName: "测发控报表与惯组相关错误",
+          tfEventType: 0,
+          tfEventTypeName: "基本事件",
+        },
+        {
+          category: "LEAF",
+          describe: "排查飞控机，通过分析判读软件解析后台数据333",
+          isCalculation: false,
+          isCommonEvent: false,
+          key: -3,
+          parent: -4,
+          phenomenon: "测发控报表与惯组相关错误",
+          text: "未命名事件",
+          tfEventName: "测发控报表与惯组相关错误",
+          tfEventType: 1,
+          tfEventTypeName: "基本事件",
+        },
+      ];
+      if (this.treeId) {
+        treeNodeList.forEach((item) => {
+          if (item.parent === null) {
+            delete item.parent;
+          }
+        });
+        this.message = treeNodeList;
+        this.init();
+      } else {
+        this.message = [];
+        this.init();
+      }
+    },
+    reView() {},
+    zoom(val) {
+      let mySlef = this;
+      const cmdhnd = mySlef.myDiagram.commandHandler;
+      switch (val) {
+        case "1":
+          cmdhnd.resetZoom(1);
+          cmdhnd.decreaseZoom(1);
+          break;
+        case "2":
+          cmdhnd.resetZoom(1);
+          cmdhnd.decreaseZoom(0.9);
+          break;
+        case "3":
+          cmdhnd.resetZoom(1);
+          cmdhnd.decreaseZoom(0.8);
+          break;
+        case "4":
+          cmdhnd.resetZoom(1);
+          cmdhnd.decreaseZoom(0.7);
+          break;
+        case "5":
+          cmdhnd.resetZoom(1);
+          cmdhnd.decreaseZoom(0.6);
+          break;
+        case "1":
+          cmdhnd.resetZoom(1);
+          cmdhnd.decreaseZoom(0.5);
+          break;
+      }
+    },
+    changeName() {
+      let mySelf = this;
+      mySelf.myDiagram.startTransaction();
+      mySelf.myDiagram.updateAllRelationshipsFromData();
+      mySelf.myDiagram.updateAllTargetBindings();
+      mySelf.myDiagram.commitTransaction("updated");
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.draw-container {
+  width: 100%;
+  min-height: 300px;
+  background: #8b8b8b;
+}
+::v-deep canvas{
+    outline: none !important;
+}
+</style>

src/views/CurrentDiagnosis/components/ForceGuideChart.vue

@@ -185,7 +185,7 @@ export default {
         { 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.Shape, { toArrow: 'standard', stroke: "rgb(135,195,255)" }),
         gm(
           go.TextBlock,
           go.Link.OrientUpright,
@@ -209,7 +209,7 @@ export default {
         linkDataArray
       );
 
-      _this.myDiagram.addDiagramListener("ChangeSelection", function (e) {
+      _this.myDiagram.addDiagramListener("ChangedSelection", function (e) {
         if (_this.myDiagram.selection.iterator.count === 0) {
           _this.$emit("unselectNode");
         } else {

src/views/CurrentDiagnosis/components/Step1.vue

@@ -72,62 +72,186 @@ export default {
   mounted() {
     this.dataList = [
       {
-        name: "AAA",
-        key: "a",
-        loc: "0 0",
         category: "unit",
+        children: [],
+        code: "133",
+        id: 7250367,
+        key: 7250367,
+        location: "missile",
+        name: "飞控软件",
+        text: "飞控软件",
+        parent: 7250360,
         diagnosisStatus: 0,
+        root: false,
       },
       {
-        name: "BBB",
-        key: "b",
-        loc: "100 50",
         category: "unit",
-        diagnosisStatus: 1,
+        children: [
+          {
+            category: "unit",
+            code: "1211",
+            id: 72503611,
+            key: 72503611,
+            location: "missile",
+            name: "计算机1",
+            text: "计算机1",
+            parent: 7250361,
+            diagnosisStatus: 0,
+            root: false,
+          },
+          {
+            category: "unit",
+            children: [],
+            code: "1212",
+            id: 72503612,
+            key: 72503612,
+            location: "missile",
+            name: "计算机2",
+            text: "计算机2",
+            root: false,
+            parent: 7250361,
+            diagnosisStatus: 0,
+          },
+        ],
+        code: "121",
+        leaf: false,
+        id: 7250361,
+        key: 7250361,
+        location: "missile",
+        name: "计算机",
+        text: "计算机",
+        root: false,
+        parent: 7250360,
+        diagnosisStatus: 0,
       },
       {
-        name: "CCC",
-        key: "c",
-        loc: "100 50",
-        category: "unit",
-        diagnosisStatus: 1,
+        category: "system",
+        children: [
+          {
+            category: "unit",
+            children: [],
+            code: "133",
+            id: 7250367,
+            key: 7250367,
+            location: "missile",
+            name: "飞控软件",
+            text: "飞控软件",
+            parent: 7250360,
+            diagnosisStatus: 0,
+            root: false,
+          },
+          {
+            category: "unit",
+            children: [
+              {
+                category: "unit",
+                children: [],
+                code: "1211",
+                id: 72503611,
+                key: 72503611,
+                location: "missile",
+                name: "计算机1",
+                text: "计算机1",
+                parent: 7250361,
+                diagnosisStatus: 0,
+                root: false,
+              },
+              {
+                category: "unit",
+                children: [],
+                code: "1212",
+                id: 72503612,
+                key: 72503612,
+                location: "missile",
+                name: "计算机2",
+                text: "计算机2",
+                root: false,
+                parent: 7250361,
+                diagnosisStatus: 0,
+              },
+            ],
+            code: "121",
+            id: 7250361,
+            key: 7250361,
+            location: "missile",
+            name: "计算机",
+            text: "计算机",
+            root: false,
+            parent: 7250360,
+            diagnosisStatus: 0,
+          },
+        ],
+        code: "13",
+        id: 7250360,
+        key: 7250360,
+        location: "missile",
+        name: "控制系统",
+        text: "控制系统",
+        diagnosisStatus: 0,
+        root: true,
       },
       {
-        name: "DDD",
-        key: "d",
-        loc: "100 50",
         category: "unit",
-        diagnosisStatus: 1,
+        children: [],
+        code: "133",
+        id: 72503671,
+        key: 72503671,
+        location: "missile",
+        name: "飞控软件2",
+        text: "飞控软件2",
+        parent: 7250360,
+        diagnosisStatus: 0,
+        root: false,
       },
       {
-        name: "EEE",
-        key: "e",
-        loc: "100 50",
         category: "unit",
-        diagnosisStatus: 1,
+        children: [],
+        code: "133",
+        id: 72503672,
+        key: 72503672,
+        location: "missile",
+        name: "飞控软件3",
+        text: "飞控软件3",
+        parent: 7250360,
+        diagnosisStatus: 0,
+        root: false,
       },
       {
-        name: "FFF",
-        key: "f",
-        loc: "100 50",
         category: "unit",
-        diagnosisStatus: 1,
+        children: [],
+        code: "1212",
+        id: 72503612,
+        key: 72503612,
+        location: "missile",
+        name: "计算机2",
+        text: "计算机2",
+        root: false,
+        parent: 7250361,
+        diagnosisStatus: 0,
       },
       {
-        name: "GGG",
-        key: "g",
-        loc: "100 50",
         category: "unit",
-        diagnosisStatus: 1,
+        children: [],
+        code: "1211",
+        id: 72503611,
+        key: 72503611,
+        location: "missile",
+        name: "计算机1",
+        text: "计算机1",
+        parent: 7250361,
+        diagnosisStatus: 0,
+        root: false,
       },
     ];
     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" },
+      { from: 7250360, to: 7250361 },
+      { from: 7250360, to: 7250367 },
+      { from: 7250360, to: 72503671 },
+      { from: 7250360, to: 72503672 },
+      { from: 7250361, to: 72503611 },
+      { from: 7250361, to: 72503612 },
+
+      // 72503612
     ];
     // var $ = go.GraphObject.make;
     // var myDiagram = $(go.Diagram, "myDiagramDiv", {

src/views/CurrentDiagnosis/components/Step2.vue

@@ -52,17 +52,18 @@
               >
               </el-option>
             </el-select>
-            <div
+            <FaultTreeSingleView :currentKey="123" :treeId="12312"></FaultTreeSingleView>
+            <!-- <div
               id="myDiagramDiv"
               style="width: 100%; min-height: 70vh; background: #ddd"
-            ></div>
+            ></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 class="" style="min-height: 76.5vh">
             <div>1检测装备升级</div>
             <div>2测试软件是否正常</div>
           </div>
@@ -73,10 +74,12 @@
 </template>
 <script>
 import ForceGuideChart from "./ForceGuideChart.vue";
+import FaultTreeSingleView from "./FaultTreeSingleView.vue";
 export default {
   name: "Step2",
   components: {
     ForceGuideChart,
+    FaultTreeSingleView,
   },
   data() {
     return {

src/views/InteractiveDiagnosis/components/Chat.vue

@@ -129,9 +129,19 @@
           <div class="content p-4">根据您的输入我们判断的故障</div>
         </div>
       </div>
+      <div class="message my-message flex items-center">
+        <div class="my-header-box">
+          <i class="el-icon-s-custom header-icon"></i>
+        </div>
+        <div class="mr-4">
+          <div class="name mb-2">我</div>
+          <div class="content p-4">
+            请查看常见问题中是否包含您遇到的问题？请查看常见
+          </div>
+        </div>
+      </div>
     </div>
     <!-- 消息发送框 -->
-
     <div class="send-message-box mt-1 flex items-center">
       <div class="flex flex-col items-center justify-between pl-4 text-sm">
         <span class="text-blue-500 cursor-pointer">中</span>
@@ -142,7 +152,6 @@
       </div>
       <div class="flex-1">
         <el-input
-          style="border: none"
           v-model="input"
           placeholder="请输入故障描述"
         ></el-input>

yarn.lock

@@ -4193,10 +4193,10 @@ 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==
+gojs@2.1.41:
+  version "2.1.41"
+  resolved "https://repo.huaweicloud.com/repository/npm/gojs/-/gojs-2.1.41.tgz#132afb4891cb6b975b9d19f64ff12dd442d3b883"
+  integrity sha512-k2wkZ60X2lsF88LCRhSMvJdxe9Z/GzuJbCi8oAznT68w7TJOSHost9jJ7gM/bDc8ZEqIAuw2yo/UFaI1O7ousw==
 
 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"