scd_tools_ui/src/pages/netStructPicture/components/inoutControl.vue

<!-- 输入输出控制块 -->
<template>
  <div>
    <!-- 关联图 -->
    <div
      v-if="tabValue == 'photo'"
      class="main-cont"
      ref="myElement"
      id="treedom2"
    >
      <div class="main-left" ref="leftElement">
        <div
          v-for="(item, index) in leftList"
          :key="index"
          class="conts"
          @click="clickImg(item)"
          :ref="(el) => setdom2(el, item)"
        >
          <div class="cont-item">
            <div>{{ item.ref_ied_name }}</div>
            <div>{{ item.ref_ied_desc }}</div>
          </div>
          <div v-for="(cItem, index2) in item.titleItems" :key="index2">
            <div class="ied-desc-child-title">
              {{ cItem.ld_inst }} {{ cItem.ld_desc }}
            </div>
            <div
              class="ied-desc-child"
              v-for="(item3, index3) in cItem.childItem"
              :key="index3"
              :class="{ 'smv-color': item3.ctrl_type == 'smv' }"
              :ref="(el) => setdomLeftChild2(el, item3)"
            >
              <div>{{ item3.ctrl_name }}</div>
              <div>{{ item3.datset_desc }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="main-middle" ref="middleHeight" id="end">
        <div class="middle-title" v-if="listData2">
          <div>{{ listData2.ied_name }}</div>
          <div v-if="listData2">{{ listData2.desc }}</div>
        </div>
        <div class="middle-item" ref="middleElement">
          <div
            class="midlestyle"
            v-for="(item, index) in svInfo"
            :key="index"
            :class="{ 'smv-color': item.attr_name == 'smvcb0' }"
            :ref="(el) => setdomMiddle2(el, item)"
          >
            <div>{{ `${item.ldinst}/${item.attr_name}` }}</div>
            <div>{{ item.datset_desc }}</div>
            <div
              class="ied-desc"
              style="color: #1a2447"
              v-if="item.attr_name != 'smvcb0'"
            >
              APPID:{{ item.APPID }}
            </div>
            <div class="ied-desc" style="color: #1a2447" v-else>
              APPID:{{ item.address.APPID }}
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="main-right" ref="rightElement">
        <div
          v-for="(item, index) in rightList"
          :key="index"
          class="conts"
          @click="clickImg(item)"
          :ref="(el) => setdomRight2(el, item)"
        >
          <div class="cont-item">
            <div>{{ item.ref_ied_name }}</div>
            <div>{{ item.ref_ied_desc }}</div>
          </div>
          <div v-for="(cItem, index2) in item.titleItems" :key="index2">
            <div class="ied-desc-child-title">
              {{ cItem.ld_inst }} {{ cItem.ld_desc }}
            </div>
            <div
              class="ied-desc-child"
              v-for="(item3, index3) in cItem.childItem"
              :key="index3"
              :class="{ 'smv-color': item3.ctrl_type == 'smv' }"
              :ref="(el) => setdomRight2Child2(el, item3)"
            >
              <div>{{ item3.ctrl_name }}</div>
              <div>{{ item3.datset_desc }}</div>
            </div>
          </div>
        </div>
      </div>
      <div id="wrapper"></div>
    </div>
    <div v-if="tabValue != 'photo'">
      <inoutSendOrRv
        :isPhoto="isPhoto"
        :checkData="checkData"
        :svInfo="svInfo"
      ></inoutSendOrRv>
    </div>
    <inoutDialog
      :circleOpen="circleOpen"
      :listData2="listData2"
      :checkData="checkData"
      :dilogData="dilogData"
      :dilogTitie="dilogTitie"
      :dilogRightData="dilogRightData"
      @done="done"
      :titleUnusual="titleUnusual"
      :dilogLeftTitle = "dilogLeftTitle"
    >
    </inoutDialog>
  </div>
</template>
<script setup>
import { onMounted, watch, ref, nextTick, defineEmits, inject } from "vue";
import LeaderLine from "../../../../public/leader-line.min.js";
import AnimEvent from "../../../../public/anim-event.min.js";
import inoutSendOrRv from "./inoutSendOrRv";
import inoutDialog from "./inoutDialog.vue";
import {
  //send发送
  iednetworkInfo,
  iedSVSendCtrlblock,
  gooseSendctrlblock,
  scdIedRelation,
  getiedInputs,
} from "@/api/iedNetwork";
import jsPlumb from "jsplumb";
const props = defineProps({
  checkData: {
    type: Object,
    default: () => {},
  },
  isPhoto: {
    type: String,
    default: "",
  },
  checkData: {
    type: Object,
    default: () => {},
  },
  isOpen: {
    type: Boolean,
    default: false,
  },
  iedRelation: {
    type: Object,
    default: () => {},
  },
});
const svInfo = ref(null);
const scdIdValue = inject("scdId");
const iedChild = ref(null);
const circleOpen = ref(false); //数字点击事件
//得到两边子版块的数据
const getIedChild = async () => {
  const childRes = await gooseSendctrlblock({
    scd_id: scdIdValue,
    ied_name: props.checkData.ied_name,
    forcerefresh: 0,
  });
  //左右侧内部侧数据组装
  listData2.value.list.forEach((item, index) => {
    item.titleItems = [];
    childRes.data.forEach((key) => {
      if (key.target_ied_name === item.ref_ied_name) {
        if (
          item.titleItems.length < 1 ||
          !item.titleItems.some(
            (titleKey) =>
              titleKey.ld_inst === key.ld_inst &&
              titleKey.ld_desc === key.ld_desc
          )
        ) {
          key.childItem = [];
          item.titleItems.push(key);
        }
        item.titleItems.forEach((itemKey) => {
          if (
            itemKey.ld_inst == key.ld_inst &&
            itemKey.ld_desc == key.ld_desc
          ) {
            itemKey.childItem.push(key);
          }
        });
      }
    });
  });
  iedChild.value = childRes.data;
};

//得到中间的子版块数据
const getNetworkInfo = async () => {
  const svResInfo = await iednetworkInfo({
    scd_id: scdIdValue,
    ied_name: props.checkData.ied_name,
  });
  const svResInfoCtrl = await iedSVSendCtrlblock({
    scd_id: scdIdValue,
    ied_name: props.checkData.ied_name,
  });
  if (svResInfoCtrl.data && svResInfoCtrl.data.GSEControl) {
    //处理数据得到APPID
    svResInfo.data.forEach((item) => {
      svResInfoCtrl.data.GSEControl.forEach((key) => {
        if (item.cb_name == key.attr_name) {
          key.APPID = JSON.parse(item.address_json).APPID;
        }
      });
    });
    svInfo.value = [
      ...svResInfoCtrl.data.SampledValueControl,
      ...svResInfoCtrl.data.GSEControl,
    ];
    if (svInfo.value && svInfo.value.length > 3) {
      middleElement.value.style.marginTop = "20px";
    } else {
      middleElement.value.style.marginTop = "150px"; // 设置元素的垂直位置
    }
  }
};
//线条
const middleElement = ref(null);
const myElement = ref(null);
let leaderLines2 = ref([]); //控制线条显示
const leftList = ref([]);
const rightList = ref([]);
const domList2 = ref(new Map()); //获取 所有的ref
const domListRight2 = ref(new Map()); //获取右侧所有的ref
const domListMiddle2 = ref(new Map()); //获取中间所有的ref
const domListRightChild2 = ref(new Map()); //获取右侧所有子的ref
const domListLeftChild2 = ref(new Map()); //获取中间所有子的ref

const listData2 = ref(props.checkData); //线条左右两侧的数据
const emit = defineEmits(["result"]); //如果不加这个再次点击左侧会没有反应
const tabValue = ref(props.isPhoto); //点击tab切换的数据
const rightElement = ref(null);
const leftElement = ref(null);
const setdom2 = (el, item) => {
  //左侧dom
  if (el) {
    domList2.value.set(item, el);
  }
};
const setdomRight2 = (el, item) => {
  //右侧dom
  if (el) {
    domListRight2.value.set(item, el);
  }
};
const setdomMiddle2 = (el, item) => {
  // 中间dom
  if (el) {
    domListMiddle2.value.set(item, el);
  }
};
//左侧子Dom
const setdomLeftChild2 = (el, item) => {
  if (el) {
    domListLeftChild2.value.set(item, el);
  }
};
//右侧子Dom
const setdomRight2Child2 = (el, item) => {
  if (el) {
    domListRightChild2.value.set(item, el);
  }
};

const processArray = (arr) => {
  // ref_ied_id作为键，obj作为值
  const uniqueObjects = new Map();
  // 遍历数组
  for (const obj of arr) {
    const { ref_ied_id } = obj;
    // 如果当前对象的 ref_ied_id 属性已经存在于 uniqueObjects 中
    if (uniqueObjects.has(ref_ied_id)) {
      // 将对应对象的 ref_type 属性设为 2,箭头双向
      uniqueObjects.get(ref_ied_id).ref_type = 2;
    } else {
      // 否则，将当前对象添加到 uniqueObjects 中
      uniqueObjects.set(ref_ied_id, obj);
    }
  }
  // 将 uniqueObjects 中的值转为数组并返回
  return Array.from(uniqueObjects.values());
};
//点击图片的时候筛选出数据
const clickImg = (dataItem) => {
  Object.values(props.iedRelation).find((item) => {
    if (item.ied_name == dataItem.ref_ied_name) {
      listData2.value = item;
    }
  });
};

//点击后重置数据和线条
const clickResetLine2 = () => {
  domList2.value.clear();
  domListRight2.value.clear();
  domListMiddle2.value.clear();
  domListLeftChild2.value.clear();
  domListRightChild2.value.clear();
  leaderLines2.value = [];
  setLine2();
  removeLine2();
};
// 将设备列表分成两份
const bothSide = (data) => {
  const formatArr = processArray(data);
  const arrlenght = formatArr.length;
  const long1 = Math.ceil(arrlenght / 2);
  leftList.value = formatArr.splice(0, long1);
  rightList.value = formatArr.splice(0);
};
//圆圈数字的位置endDom, options,posit,keys,startDom
const dilogLeftTitle = ref(null);//弹窗左侧白色
const dilogRightData = ref(null);
const dilogData = ref(null);
const dilogTitie = ref(null);//输入的标题等数据
const titleUnusual =ref('input');//区分点击输入还是输出
const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
  let elmButton = endDom.appendChild(document.createElement("div"));
  // 阻止点击事件冒泡
  elmButton.addEventListener("click", async (event) => {
    event.stopPropagation();
    console.log("keys", keys, keyMiddle);
    if (mark == "middle") {
      const ResInput = await getiedInputs({
        title: "虚端子—详细信息",
        s_ied_name: keyMiddle.ref_ied_name,
        m_ied_name: keyMiddle.ied_name,
        m_ctrlid: keys.node_id,
        s_ctrlid: "",
        scd_id: scdIdValue,
      });
      const resRla = await scdIedRelation({
        scd_id: scdIdValue,
        ied_name: keyMiddle.ref_ied_name,
        reset: 1,
      });
      dilogData.value = ResInput.data;
      dilogRightData.value = resRla.data;
      dilogTitie.value = keyMiddle;
      dilogLeftTitle.value = keys;
      titleUnusual.value ='inout'
    } else {
      const ResInput = await getiedInputs({
        title: "虚端子—详细信息",
        s_ied_name: keys.target_ied_name,
        m_ied_name: keys.source_ied_name,
        m_ctrlid: "",
        s_ctrlid: keys.ctrl_id,
        scd_id: scdIdValue,
      });
      const resRla = await scdIedRelation({
        scd_id: scdIdValue,
        ied_name: keys.target_ied_name,
        reset: 1,
      });
      dilogData.value = ResInput.data;
      dilogRightData.value = resRla.data;
      dilogTitie.value = keys;
      titleUnusual.value ='input'
    }

    circleOpen.value = true;
  });
  elmButton.className = "circel-name";
  elmButton.innerHTML = options;
  elmButton.style.zIndex = "9999";
  elmButton.style.width = "20px";
  elmButton.style.color = "#fff";
  elmButton.style.textAlign = "center";
  elmButton.style.height = "20px";
  elmButton.style.borderRadius = "10px";
  elmButton.style.background = "#255CE7";
  elmButton.style.position = "absolute";
  if (posit == "left") {
    elmButton.style.right = -64 + "px";
    elmButton.style.top = 13 + "px";
  } else if (posit == "right") {
    elmButton.style.left = -64 + "px";
    elmButton.style.top = 13 + "px";
  } else if (posit == "leftMiddle" || posit == "rightMiddle") {
    const dom1Rect = endDom.getBoundingClientRect();
    const dom2Rect = startDom.getBoundingClientRect();
    // 计算dom1和dom2矩形的中间y坐标。
    const dom1MiddleY = dom1Rect.top + dom1Rect.height / 2;
    const dom2MiddleY = dom2Rect.top + dom2Rect.height / 2;
    if (posit == "leftMiddle") {
      elmButton.style.top =
        dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
      elmButton.style.right = -74 + "px";
    } else {
      elmButton.style.top =
        dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
      elmButton.style.left = -74 + "px";
    }
  }
  // lineData.value.forEach((ele, index) => {
  //   const text = ele.doms.querySelector("text");
  //   text.setAttribute("font-size", "14px");
  //   text.setAttribute("fill", "#fff"); //文本颜色 ，有点没起效果
  //   text.setAttribute("dominant-baseline", "ideographic"); //垂直居中
  //   text.setAttribute("text-anchor", "middle"); //水平居中
  //   const bbox = text.getBBox(); //获取当前文本的位置和尺寸数据
  //   // 通过setAttribute方法设置圆形的属性值，包括圆心坐标、半径和背景颜色。
  //   const width = bbox.width;
  //   const height = bbox.height;
  //   const x = parseFloat(text.getAttribute("x"));
  //   const y = parseFloat(text.getAttribute("y"));

  //   const circle = document.createElementNS(
  //     "http://www.w3.org/2000/svg",
  //     "circle"
  //   );
  //   circle.setAttribute("cx", x);
  //   circle.setAttribute("cy", y - 10);
  //   circle.setAttribute("r", Math.max(width, height) / 2 + 3); // 加上5像素的额外宽度
  //   circle.setAttribute("fill", "#255CE7");
  //   circle.setAttribute("id", `circle${index}`);
  //   // 将圆形作为文本元素的前置元素，以此实现圆形元素显示在文本元素的底部
  //   text.parentElement.insertBefore(circle, text);
  //   // ele.doms.parentElement.addEventListener("click", () =>{
  //   //   console.log('ele', ele)
  //   // })
  // });
  // 获取所有circle元素，并为它们添加点击事件监听器
  // let circles = document.querySelectorAll("circle");
  // console.log('circles', circles)
  // circles.forEach((circleClick) => {
  //  console.log("circleClick");
  //  circleClick.addEventListener(
  //   "click",
  //   handleCircleClick,
  //   false
  //  );
  // });
};
const done = (emits) => {
  circleOpen.value = emits;
  dilogData.value =null;
};
let lineData = ref([]);

const setLeaderline2 = () => {
  //线条样式
  const startDom = document.getElementById("end");
  //左侧子组件
  for (const [key, value] of domListLeftChild2.value) {
    const endDom = value;
    let line;
    const options = key.inputs_cnt.toString();
    const rectEnd = endDom.getBoundingClientRect();
    if (key.ctrl_type == "smv") {
      line = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: 0, y: rectEnd.top - 232 }),
        {
          color: "red",
          size: 2,
          path: "straight",
          startSocket: "right",
          endSocket: "left",
        }
      );
      circelSet(endDom, options, "left", key);
    } else {
      line = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: 0, y: rectEnd.top - 232 }),
        {
          color: "#255CE7",
          size: 2,
          path: "straight",
          startSocket: "right",
          endSocket: "left",
          // y: 50,
          // middleLabel: LeaderLine.captionLabel({
          //   text: options,
          // }),
        }
      );
      circelSet(endDom, options, "left", key);
    }
    leaderLines2.value.push(line);
  }
  //右侧子组件
  for (const [key, value] of domListRightChild2.value) {
    const endDom = value;
    let line;
    const rectEnd = endDom.getBoundingClientRect();
    const options = key.inputs_cnt.toString();
    if (key.ctrl_type == "smv") {
      line = new LeaderLine(
        LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 232 }),
        endDom,
        {
          color: "red",
          size: 2,
          path: "straight",
          startSocket: "right",
          endSocket: "left",
          startPlug: "arrow1",
          endPlug: "behind",
          // middleLabel: LeaderLine.captionLabel(options),
        }
      );
      circelSet(endDom, options, "right", key);
    } else {
      line = new LeaderLine(
        LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 232 }),
        endDom,
        {
          color: "#255CE7",
          size: 2,
          path: "straight",
          startSocket: "right",
          endSocket: "left",
          startPlug: "arrow1",
          endPlug: "behind",
          // middleLabel: LeaderLine.captionLabel(options),
        }
      );
      circelSet(endDom, options, "right", key);
    }
    leaderLines2.value.push(line);
  }
  if (iedChild.value) {
    iedChild.value.forEach((item) => {
      //循环画线左侧中间
      for (const [key, value] of domList2.value) {
        let line;
        for (let [key2, value2] of domListMiddle2.value) {
          //中间的数据dom
          if (key.ref_ied_name == item.source_ied_name) {
            const endDom = value;
            if (item.ctrl_id == key2.node_id) {
              const startDom = value2;
              const options2 = item.inputs_cnt.toString();
              let lineStyle = {
                color: "#51637F",
                size: 2,
                path: "straight",
                endPlug: "behind",
                startPlug: "arrow1",
                startSocket: "right",
                endSocket: "left",
                // middleLabel: LeaderLine.captionLabel(options2),
              };
              if (key2.attr_name == "smvcb0") {
                lineStyle.color = "red";
              }
              line = new LeaderLine(endDom, startDom, lineStyle);
              circelSet(
                endDom,
                options2,
                "leftMiddle",
                key2,
                startDom,
                key,
                "middle"
              );
              leaderLines2.value.push(line);
            }
          }
        }
      }
      //循环画线右侧中间
      for (let [key, value] of domListRight2.value) {
        let line2;
        for (let [key2, value2] of domListMiddle2.value) {
          //中间的数据dom
          if (key.ref_ied_name == item.source_ied_name) {
            const endDom = value;
            if (item.ctrl_id == key2.node_id) {
              const startDom = value2;
              const options3 = item.inputs_cnt.toString();
              let lineStyle2 = {
                color: "#51637F",
                size: 2,
                path: "straight",
                startPlug: "behind",
                endPlug: "arrow1",
                endSocket: "left",
                startSocket: "right",
                // middleLabel: LeaderLine.captionLabel(options3),
              };
              if (key2.attr_name == "smvcb0") {
                lineStyle2.color = "red";
              }
              line2 = new LeaderLine(startDom, endDom, lineStyle2);
              circelSet(
                endDom,
                options3,
                "rightMiddle",
                key2,
                startDom,
                key,
                "middle"
              );
              leaderLines2.value.push(line2);
            }
          }
        }
      }
    });
  }
  // const allText = document.querySelectorAll(".leader-line");
  // circelSet();
  hiddenLine2();
};
//滚动时重定位线条
const newPositionLine2 = (diffline) => {
  document.getElementById("treedom2").addEventListener(
    "scroll",
    AnimEvent.add(() => {
      diffline.forEach((line) => {
        if (line) {
          hiddenLine2();
          line.position();
          line.positionByWindowResize = false;
        }
      });
      //中间展示图片的
    }),
    false
  );
  window.addEventListener(
    "resize",
    AnimEvent.add(function () {
      diffline.forEach((line) => {
        hiddenLine2();
        line.position();
        line.positionByWindowResize = false;
      });
    }),
    false
  );
};
//弹窗打开后使得线条在指定区域中
const hiddenLine2 = () => {
  if (props.isPhoto == "photo" && !circleOpen.value) {
    const elmWrapper = document.getElementById("wrapper");
    // 移动 line
    document.body.querySelectorAll("body .leader-line").forEach((node) => {
      elmWrapper.appendChild(node);
    });
    elmWrapper.style.transform = "none";
    var rectWrapper = elmWrapper.getBoundingClientRect();
    // Move to the origin of coordinates as the document
    elmWrapper.style.transform = `translate(${
      (rectWrapper.left + window.scrollY) * -1
    }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
  }
};
const setLine2 = () => {
  if (listData2.value) {
    bothSide(listData2.value.list);
  }
  setTimeout(() => {
    setLeaderline2();
  }, 500);
};

const removeLine2 = () => {
  const elmWrapper = document.getElementById("wrapper");
  if (elmWrapper) {
    elmWrapper.querySelectorAll("body .leader-line").forEach((node) => {
      // elmWrapper.removeChild(node);
      node.remove();
    });
  }
};
onMounted(() => {
  if (props.checkData != null && props.isPhoto == "photo") {
    getIedChild();
    getNetworkInfo();
  }
  //不加条件切换下方tab时会出现bug
  if (props.isPhoto == "photo") {
    nextTick(() => {
      setLine2();
      nextTick(() => {
        newPositionLine2(leaderLines2.value);
      });
    });
  }
});

watch(
  () => props.isPhoto,
  (newValue) => {
    tabValue.value = newValue;
    let child = document.querySelectorAll(".circel-name");
    if (child) {
      child.forEach((item) => {
        item.remove();
      });
    }
    if (listData2.value != null && tabValue.value == "photo") {
      nextTick(() => {
        removeLine2();
        clickResetLine2();
        setLine2();
        newPositionLine2(leaderLines2.value);
        getIedChild();
        getNetworkInfo();
      });
    }
  }
);
watch(
  () => props.checkData,
  (newValue) => {
    let child = document.querySelectorAll(".circel-name");
    if (child) {
      child.forEach((item) => {
        item.remove();
      });
    }
    listData2.value = [];
    svInfo.value = [];
    listData2.value = newValue;
    if (newValue != null && tabValue.value == "photo") {
      getIedChild();
      clickResetLine2();
      getNetworkInfo();
    }
    emit("result", newValue);
    if (newValue && leaderLines2.value.length > 0) {
      leaderLines2.value = [];
    }
  }
);
watch(
  () => props.isOpen,
  (newValue) => {
    if (newValue) {
      domList2.value.clear();
      domListRight2.value.clear();
      domListMiddle2.value.clear();
      domListLeftChild2.value.clear();
      domListRightChild2.value.clear();
      leaderLines2.value = [];
    } else {
      nextTick(() => {
        removeLine2();
      });
    }
  }
);
watch(
  () => listData2.value,
  (newValue) => {
    emit("result", newValue);
    clickResetLine2();
  }
);
</script>
<style lang="scss"  scoped>
@mixin img-size {
  width: 150px;
  height: 90px;
  margin-bottom: 10px;
}
@mixin left-and-right {
  display: flex;
  flex-direction: column;
}
.main-cont {
  margin-top: 10px;
  display: flex;
  justify-content: space-evenly;
}

.leader-line {
  z-index: 3000;
}
.main-left {
  display: flex;
  @include left-and-right;
}
.main-middle {
  box-sizing: border-box;
  border: 2px dashed #98a8ff;
  background: #edf3ff;
  img {
    margin-bottom: 10px;
  }
  .middle-item {
    @include left-and-right;
    align-items: center;
    cursor: pointer;
  }
  .middle-title {
    margin: 12px;
    text-align: center;
    color: #ffcb11;
    border-bottom: 1px solid #a3ade0;
  }
}
.main-right {
  display: flex;
  @include left-and-right;
  .img-item {
    @include img-size;
  }
}

.conts {
  position: relative;
  @include left-and-right;
  margin-bottom: 24px;
  border: 2px dashed #98a8ff;
  cursor: pointer;
  background: #f7f8fb;
  .cont-item {
    @include left-and-right;
    color: #1a2447;
    align-items: center;
    margin: 12px 14px 5px 14px;
    border-bottom: 1px solid #a3ade0;
  }
  .ied-desc {
    color: #255ce7;
  }
  .ied-desc-title {
    color: #134bea;
  }

  .ied-desc-child-title {
    color: #5182ff;
    margin-left: 14px;
    display: block;
  }
}
.ied-desc-child,
.midlestyle {
  @include left-and-right;
  align-items: center;
  border: 1px solid #7484ab;
  border-radius: 2px;
  margin: 12px 14px;
  padding: 5px;
  color: #1a2447;
  position: relative;
}
#wrapper {
  width: 0;
  height: 0;
  position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */
}
.smv-color {
  color: red;
  border: 1px solid red;
}
</style>