kev/Drawer/drawer-htmlroot/components/WellGroupProperty.vue

<template>
  <div class="scrollable-form">
    <el-form label-position="right" label-width="130px" :model="wellData.Base">
      <div name="wellBaseData" class="well-param">
        <el-divider content-position="left">数据</el-divider>
        <el-form-item label="名字：" label-position="right" class="well-param-item">
          <el-input v-model="wellData.Base.Name" class="well-param-input" />
        </el-form-item>
        <el-form-item label="X：" label-position="right" class="well-param-item">
          <el-input v-model="wellData.Base.X" class="well-param-input" />
        </el-form-item>
        <el-form-item label="Y：" label-position="right" class="well-param-item">
          <el-input v-model="wellData.Base.Y" class="well-param-input" />
        </el-form-item>
        <el-form-item label="Z：" label-position="right" class="well-param-item">
          <el-input v-model="wellData.Base.Z" class="well-param-input" />
        </el-form-item>
        <el-form-item label="角度：" class="well-param-item">
          <el-input-number :precision="1" v-model.number="wellData.Base.Angle" class="well-param-input" />
        </el-form-item>
      </div>
    </el-form>

    <el-form label-position="right" label-width="130px" :model="wellData.Parameter">
      <div name="wellBaseParameter" class="well-param">
        <el-divider content-position="left">参数</el-divider>
        <el-form-item label="井支角度：" label-position="right" class="well-param-item">
          <el-input-number :precision="2" v-model.number="wellData.Parameter.BranchAngle" class="well-param-input" />
        </el-form-item>
        <el-form-item label="右侧井支数：" label-position="right" class="well-param-item">
          <el-input-number :precision="0" v-model.number="wellData.Parameter.BranchCountRight"
            class="well-param-input" />
        </el-form-item>
        <el-form-item label="右侧垂直靶前距：" label-position="right" class="well-param-item">
          <el-input-number :precision="2" v-model.number="wellData.Parameter.BranchDistanceRight"
            class="well-param-input" />
        </el-form-item>
        <el-form-item label="左侧井支数：" label-position="right" class="well-param-item">
          <el-input-number :precision="0" v-model.number="wellData.Parameter.BranchCountLeft"
            class="well-param-input" />
        </el-form-item>
        <el-form-item label="左侧垂直靶前距：" label-position="right" class="well-param-item">
          <el-input-number :precision="2" v-model.number="wellData.Parameter.BranchDistanceLeft"
            class="well-param-input" />
        </el-form-item>
        <el-form-item label="水平井段长度：" label-position="right" class="well-param-item">
          <el-input-number :precision="2" v-model.number="wellData.Parameter.BranchLength" class="well-param-input" />
        </el-form-item>
        <el-form-item label="井支间距：" label-position="right" class="well-param-item">
          <el-input-number :precision="2" v-model.number="wellData.Parameter.BranchSpace" class="well-param-input" />
        </el-form-item>
        <!-- <el-collapse>
                  <el-collapse-item title="井支" name="wellBranches" class="well-param">
                    <el-form-item
                      v-for="(htvp, index) in wellData.WellBranches.WellBranch"
                      :key="index"
                      :item="htvp"
                      class="well-param-item"
                    >
                      <template #label>
                        {{ htvp.PointStart.Base.Name }}
                      </template>
<el-input v-model="htvp.HowToViewPoint[0].Symbol.Name" style="width: 150px" />
</el-form-item>
</el-collapse-item>
</el-collapse> -->
      </div>
    </el-form>
    <div class="button-container">
      <el-button type="primary" @click="btnChangeProperty" style="margin-top: 15px">修改参数</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

import { emitter } from "~/utils/eventBus";
import "@/assets/css/element.css";
import { parseXML, parseXMLWithNoAttr } from "@/utils/xmlParser";
import { convertNumericStrings } from "@/utils/objHelper";
import { ElDivider } from "element-plus";
import { XMLBuilder } from "fast-xml-parser";

const { message, send } = useWebSocket();

let sourceElementData = null;
let elementId = 0;

watchEffect(() => {
  try {
    if (!message.value) return; // 如果没有新消息，直接返回
    const json = JSON.parse(message.value);
    //   console.info(json);
    const evtType = json.type;
    if (evtType != "Pong") {
      emitter.emit("evtType", { type: evtType, data: message.value });
    }
  } finally {
  }
});

// 井组参数
const wellData = ref({
  Base: {
    Name: "",
    X: 0,
    Y: 0,
    Z: 0,
    Angle: 0,
  },
  Parameter: {
    BranchAngle: 0,
    BranchCountRight: 0,
    BranchDistanceRight: 0,
    BranchCountLeft: 0,
    BranchDistanceLeft: 0,
    BranchLength: 0,
    BranchSpace: 0,
  },
  WellBranches: {
    WellBranch: [
      {
        HowToViewCurve: [
          {
            Base: {
              Name: "",
              Style: "0",
            },
            Property: {
              Base: {
                Width: 0,
                Color: 0,
                Style: 0,
                SmoothStep: 0,
                Offset: 0,
              },
              Wave: {
                T: 0,
                A: 0,
                N: 0,
              },
            },
            Name: "",
          },
        ],
        HowToViewPoint: [
          {
            Font: {
              W: 0,
              H: 0,
              O: 0,
              B: 0,
              I: 0,
              U: 0,
              S: 0,
              CS: 0,
              OP: 0,
              CP: 0,
              Q: 0,
              PF: 0,
              FN: "",
            },
            Symbol: {
              Name: "",
              Height: 0,
              Width: 0,
              Angle: 0,
              FrColor: 0,
              BkColor: 0,
              EnableFrColor: 0,
              EnableBkColor: 0,
            },
            Text: {
              Height: 0,
              Width: 0,
              Angle: 0,
              DeltX: 0,
              DeltY: 0,
              Style: 0,
              FrColor: 0,
              BkColor: 0,
            },
            Name: "",
          },
        ],
        PointStart: {
          Base: {
            Name: "",
            X: 0,
            Y: 0,
            Z: 0,
            Angle: 0,
          },
        },
        PointEnd: {
          Base: {
            Name: "",
            X: 0,
            Y: 0,
            Z: 0,
            Angle: 0,
          },
        },
      },
    ],
  },
});

// 修改参数按钮事件
const btnChangeProperty = () => {
  let xmlData = wellData.value;
  // 更新 sourceElementData 的值
  sourceElementData.Element.WellGroup.Base.Name = xmlData.Base.Name;
  sourceElementData.Element.WellGroup.Base.X = xmlData.Base.X;
  sourceElementData.Element.WellGroup.Base.Y = xmlData.Base.Y;
  sourceElementData.Element.WellGroup.Base.Z = xmlData.Base.Z;
  sourceElementData.Element.WellGroup.Base.Angle = xmlData.Base.Angle;
  sourceElementData.Element.WellGroup.Parameter.BranchAngle =
    xmlData.Parameter.BranchAngle;
  sourceElementData.Element.WellGroup.Parameter.BranchCountRight =
    xmlData.Parameter.BranchCountRight;
  sourceElementData.Element.WellGroup.Parameter.BranchDistanceRight =
    xmlData.Parameter.BranchDistanceRight;
  sourceElementData.Element.WellGroup.Parameter.BranchCountLeft =
    xmlData.Parameter.BranchCountLeft;
  sourceElementData.Element.WellGroup.Parameter.BranchDistanceLeft =
    xmlData.Parameter.BranchDistanceLeft;
  sourceElementData.Element.WellGroup.Parameter.BranchLength =
    xmlData.Parameter.BranchLength;
  sourceElementData.Element.WellGroup.Parameter.BranchSpace =
    xmlData.Parameter.BranchSpace;

  // 配置选项
  const options = {
    attributeNamePrefix: "", // 属性前缀
    attrNodeName: "", // 属性节点名称
    textNodeName: "#text", // 文本节点名称
    ignoreAttributes: false, // 是否忽略属性
    format: true, // 是否格式化输出
    indentBy: "  ", // 缩进字符
  };

  const builder = new XMLBuilder(options);

  const xmlString = builder.build(sourceElementData);

  send("SetElementProperty", {
    elementID: elementId,
    data: xmlString,
  });
};

onMounted(() => { });

// 接收井数据
emitter.on("WellGroupData", (data) => {
  let xmlString = data.propData;
  elementId = data.id;
  sourceElementData = parseXML(xmlString);

  let items = sourceElementData.Element.WellGroup;

  let handleData = convertNumericStrings(items);

  console.log("handleData:", handleData);
  wellData.value = handleData;
});

// 移除监听
onBeforeUnmount(() => {
  emitter.off("WellGroupData");
});
</script>

<style scoped>
.scrollable-form {
  max-height: 900px;
  min-height: 600px;
  width: 290px;
  height: 650px;
}

.well-param-item {
  height: 25px;
}

.well-param-input {
  width: 130px;
  height: 25px;
}

.button-container {
  display: flex;
  bottom: 50px;
  right: 20px;
  position: fixed;
  justify-content: flex-end;
  width: 290px;
  z-index: 3;
}
</style>