TxProject/src/views/CurrentDiagnosis/components/Step2.vue

<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>