From a6d006786d338fb6d6fc603fc85d4b200040b6f6 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Thu, 27 Apr 2023 14:38:21 +0800
Subject: [PATCH] update OPC_AND_BATCH

---
 .../components/InputsArea.vue                 | 44 +++++++++++++++++++
 .../components/batchView.vue                  | 23 ++++++++++
 .../opcAndBatchConfig/components/opcView.vue  | 23 ++++++++++
 .../modules/pms/opcAndBatchConfig/index.vue   | 27 ++++++++++--
 4 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 src/views/modules/pms/opcAndBatchConfig/components/InputsArea.vue
 create mode 100644 src/views/modules/pms/opcAndBatchConfig/components/batchView.vue
 create mode 100644 src/views/modules/pms/opcAndBatchConfig/components/opcView.vue

diff --git a/src/views/modules/pms/opcAndBatchConfig/components/InputsArea.vue b/src/views/modules/pms/opcAndBatchConfig/components/InputsArea.vue
new file mode 100644
index 0000000..19add67
--- /dev/null
+++ b/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>
diff --git a/src/views/modules/pms/opcAndBatchConfig/components/batchView.vue b/src/views/modules/pms/opcAndBatchConfig/components/batchView.vue
new file mode 100644
index 0000000..41da4cb
--- /dev/null
+++ b/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>
diff --git a/src/views/modules/pms/opcAndBatchConfig/components/opcView.vue b/src/views/modules/pms/opcAndBatchConfig/components/opcView.vue
new file mode 100644
index 0000000..63a37e8
--- /dev/null
+++ b/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>
diff --git a/src/views/modules/pms/opcAndBatchConfig/index.vue b/src/views/modules/pms/opcAndBatchConfig/index.vue
index ef052f1..3dc4736 100644
--- a/src/views/modules/pms/opcAndBatchConfig/index.vue
+++ b/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>
\ No newline at end of file
+
+.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>