update OPC_AND_BATCH

src/views/modules/pms/opcAndBatchConfig/components/InputsArea.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="inputs-area">
+    <div class="inputs-area__title">{{ title }}</div>
+    <div class="inputs-area__main">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InputsArea",
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+};
+</script>
+
+<style scoped>
+.inputs-area {
+  /* background: #ccc3; */
+  position: relative;
+  border: 1px solid #ccc;
+  /* margin-bottom: 24px; */
+}
+
+.inputs-area__title {
+  position: absolute;
+  top: -12px;
+  left: 20px; 
+  padding: 0 12px;
+  line-height: 24px;
+  min-width: 12px;
+  background: white;
+  user-select: none;
+}
+
+.inputs-area__main {
+  padding: 16px;
+}
+</style>

src/views/modules/pms/opcAndBatchConfig/components/batchView.vue

@@ -0,0 +1,23 @@
+<template>
+  <InputsArea class="batch-view" title="Batch">
+    batch view
+  </InputsArea>
+</template>
+
+<script>
+import InputsArea from "./InputsArea.vue";
+
+export default {
+  name: "BatchView",
+  components: { InputsArea },
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped></style>

src/views/modules/pms/opcAndBatchConfig/components/opcView.vue

@@ -0,0 +1,23 @@
+<template>
+  <InputsArea class="opc-view" title="OPC UA">
+    opc view
+  </InputsArea>
+</template>
+
+<script>
+import InputsArea from "./InputsArea.vue";
+
+export default {
+  name: "OPCView",
+  components: { InputsArea },
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped></style>

src/views/modules/pms/opcAndBatchConfig/index.vue

@@ -1,12 +1,17 @@
 <template>
-    <div class="list-view-with-head" ref="pointer-loading-ref">
-      d
-    </div>
+  <div class="list-view-with-head opc-and-batch" ref="pointer-loading-ref">
+    <OPCView />
+    <BatchView />
+  </div>
 </template>
 
 <script>
+import OPCView from "./components/opcView.vue";
+import BatchView from "./components/batchView.vue";
+
 export default {
   name: "opcAndBatchConfig",
+  components: { OPCView, BatchView },
   props: {},
   data() {
     return {};
@@ -26,4 +31,18 @@ export default {
   padding: 16px;
   box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
 }
-</style>
+
+.opc-and-batch {
+  display: flex;
+}
+
+.opc-and-batch > div {
+  flex: 1;
+}
+.opc-and-batch > div:not(:first-child) {
+  margin-left: 8px;
+}
+.opc-and-batch > div:first-child {
+  margin-right: 8px;
+}
+</style>