feat：设备列表一键复制，配置 device 的 ini 文件

frontend/package.json

@@ -17,6 +17,7 @@
     "process": "^0.11.10",
     "terser": "^5.19.2",
     "vue": "^3.3.4",
+    "vue-clipboard3": "^2.0.0",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {

frontend/src/components/device_communication/EditDialog.vue

@@ -113,7 +113,7 @@ const form = ref<DeviceInfo>({
 
 watch(() => props.isShow, () => {
   dialogFormVisible.value = props.isShow
-  if (props.isShow) {
+  if (props.isShow && props.type === "edit") {
     form.value = {
       id: props.deviceInfo!.id,
       station_id: props.deviceInfo!.station_id,

frontend/src/style.css

@@ -2,6 +2,7 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
+  font-size: 14px;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);

frontend/src/views/DeviceCommunication.vue

@@ -2,6 +2,7 @@
   <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="device" name="device">
       <div class="text-right mb-5">
+        <el-button type="primary" @click="copy">copy to ini</el-button>
         <el-button type="primary" @click="addDevice">Add device</el-button>
       </div>
       <div class="demo-collapse">
@@ -33,6 +34,8 @@
 import axios from 'axios';
 import { onMounted, ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import useClipboard from 'vue-clipboard3'
 
 import DeviceInfoCard from '@/components/device_communication/DeviceInfoCard'
 import type { DeviceInfo } from '@/components/device_communication/types'
@@ -95,7 +98,37 @@ const addDevice = () => {
 const changeDeviceInfo = (params: param) => {
   console.log('changeDeviceInfo')
   console.log(params);
+}
 
+// clipboard 赋值到设备信息到 ini 文件中
+const { toClipboard } = useClipboard()
+const copy = async () => {
+  let configText = composeConfigText()
+  try {
+    await toClipboard(configText)
+    ElMessage({
+      message: '复制成功',
+      type: 'success',
+    })
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+// 生成和 ini 文件中类似的配置格式
+function composeConfigText(): string {
+  let configText = ''
+  for (const [station_level, device_info_list] of Object.entries(device_infos.value)) {
+    configText += `[Device_info_${station_level}]\n`
+    configText += `dev_num=${device_info_list.length}\n`
+    for (let i = 1; i <= device_info_list.length; i++) {
+      configText += `dev${i}_id=${i}\n`
+      configText += `dev${i}_name=${device_info_list[i - 1].device_name}\n`
+      configText += `dev${i}_name_chn=${device_info_list[i - 1].device_name_chn}\n`
+      configText += `dev${i}_datacatlog=${device_info_list[i - 1].protocol_name}\n`
+    }
+  }
+  return configText
 }
 
 </script>

frontend/yarn.lock

@@ -1728,6 +1728,15 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+clipboard@^2.0.6:
+  version "2.0.11"
+  resolved "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1828,6 +1837,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 destr@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/destr/-/destr-2.0.1.tgz#2fc7bddc256fed1183e03f8d148391dde4023cb2"
@@ -2011,6 +2025,13 @@ globals@^11.1.0:
   resolved "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@@ -2467,6 +2488,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
 semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -2555,6 +2581,11 @@ terser@^5.19.2:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -2667,6 +2698,13 @@ vite@^4.4.5:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-clipboard3@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz#79b026c765c0f6a5cde18a477c2dbfc7d3b9f178"
+  integrity sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==
+  dependencies:
+    clipboard "^2.0.6"
+
 vue-demi@*:
   version "0.14.5"
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"