From 2e7c71a8bde3e1681eaffce4eff701d302555fef Mon Sep 17 00:00:00 2001
From: icewint <icewint@qq.com>
Date: Fri, 24 May 2024 07:42:26 +0800
Subject: [PATCH] =?UTF-8?q?<add>[important]=E6=B7=BB=E5=8A=A0db=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/axios/db.js                               |  16 ++
 src/view/component/dbData/AddDBData.vue       | 151 ++++++++++++++++++
 src/view/component/dbData/DbList.vue          | 135 ++++++++++++++++
 src/view/component/dbData/SearchForm.vue      | 138 ++++++++++++++++
 .../{PLCData => plcData}/AddPLCData.vue       |   0
 src/view/tab/development/DbData.vue           |  77 ++++++++-
 src/view/tab/development/PLCData.vue          |   5 +-
 7 files changed, 516 insertions(+), 6 deletions(-)
 create mode 100644 src/axios/db.js
 create mode 100644 src/view/component/dbData/AddDBData.vue
 create mode 100644 src/view/component/dbData/DbList.vue
 create mode 100644 src/view/component/dbData/SearchForm.vue
 rename src/view/component/{PLCData => plcData}/AddPLCData.vue (100%)

diff --git a/src/axios/db.js b/src/axios/db.js
new file mode 100644
index 0000000..41e4a59
--- /dev/null
+++ b/src/axios/db.js
@@ -0,0 +1,16 @@
+import axios from '@/axios/base/base.axios';
+
+export default {
+    // 查询Db数据，顺便返回PLC名称
+    getDbWithName(req) {
+        return axios.post('/api/wcs/db/getDBWithPlcName', req)
+    },
+    // 添加或者变更DB信息
+    addOrUpdate(req) {
+        return axios.post('/api/wcs/db/addOrUpdate', req)
+    },
+    // 删除一个DB信息
+    deleteData(dbName) {
+        return axios.delete('/api/wcs/db/deleteDB', { params: { dbName: dbName }})
+    }
+}
\ No newline at end of file
diff --git a/src/view/component/dbData/AddDBData.vue b/src/view/component/dbData/AddDBData.vue
new file mode 100644
index 0000000..de12688
--- /dev/null
+++ b/src/view/component/dbData/AddDBData.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-dialog
+        title="添加DB数据"
+        :model-value="modelValue"
+        @close="() => $emit('update:modelValue', false)">
+      <el-form
+          label-position="left"
+          label-width="160px"
+          :model="plcDbItem"
+      >
+        <el-form-item label="DB 名称（唯一）：" required>
+          <el-input v-model="plcDbItem.dbName" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
+        </el-form-item>
+        <el-form-item label="对应的PLC编号：">
+          <el-select v-model="plcDbItem.plcId" placeholder="请选择PLC" style="width: calc(100% - 50px)" clearable>
+            <el-option
+                v-for="item in plcList"
+                :key="item.plcId"
+                :label="item.plcName"
+                :value="item.plcId"
+              >
+              <span style="float: left">{{ item.plcId }}</span>
+              <span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">
+                  {{ item.plcName }}
+              </span>
+            </el-option>
+          </el-select>
+          <el-button type="info" @click="loadPlcData"><el-icon><Refresh/></el-icon></el-button>
+        </el-form-item>
+        <el-form-item label="DB地址：">
+          <el-input v-model="plcDbItem.dbAddress"/>
+        </el-form-item>
+        <el-form-item label="是否系统级别：">
+          <el-input v-model="plcDbItem.isSystem" placeholder="0：否；  1：是"/>
+        </el-form-item>
+        <el-form-item label="备注信息：">
+          <el-input v-model="plcDbItem.remark"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div>
+          <el-button type="primary" @click="addOrUpdate">添加/更新</el-button>
+          <el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import  《组件名称》  from '《组件路径》 ';
+import dbApi from "@/axios/db"
+import {Refresh} from "@element-plus/icons-vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default {
+  // import 引入的组件需要注入到对象中才能使用
+  components: {Refresh},
+  props: ['modelValue', 'plcList', 'plcDbItem'],
+  emits: ['loadPlcData', 'update:modelValue'],
+  data() {
+    // 这里存放数据
+    return {
+    }
+  },
+  // 计算属性 类似于 data 概念
+  computed: {},
+  // 监控 data 中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    loadPlcData() {
+      this.$emit('loadPlcData');
+    },
+    addOrUpdate() {
+      if(this.plcDbItem.dbName === '' || this.plcDbItem.dbName === undefined || this.plcDbItem.dbName === null){
+        ElMessage({
+          message: '请输入 DB名称，此项是必填的',
+          type: 'warning',
+        })
+        return
+      }
+      ElMessageBox.confirm(
+          `您确定要执行添加/编辑 dbName 为 ${this.plcDbItem.dbName} 的DB信息?`,
+          '数据变更警告',
+          {
+            confirmButtonText: '变更',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+          .then(() => {
+            dbApi.addOrUpdate(this.plcDbItem).then(response=>{
+              const responseData = response.data
+              if(responseData.code === 0){
+                ElMessage({
+                  message: '添加/编辑成功',
+                  type: 'success',
+                })
+                this.$emit('update:modelValue', false)
+              } else {
+                ElMessage({
+                  message: '服务器返回失败：' + responseData.msg,
+                  type: 'warning',
+                })
+              }
+            })
+              .catch(ex=>{
+                ElMessage({
+                  message: '请求服务器失败：' + ex,
+                  type: 'error',
+                })
+              })
+          })
+          .catch(() => {
+          })
+    }
+  },
+  // 组合式 API
+  setup() {
+  },
+  // 创建之前
+  beforeCreate() {
+  },
+  // 创建完成(可以访问 this 实例)
+  created() {
+  },
+  // 生命周期 - 挂载之前
+  beforeMount() {
+  },
+  // 生命周期 - 挂载完成（可以访问 DOM 元素）
+  mounted() {
+  },
+  // 更新之前
+  beforeUpdate() {
+  },
+  // 更新之后
+  updated() {
+  },
+  // 销毁之前
+  beforeUnmount() {
+  },
+  // 销毁完成
+  unmounted() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/view/component/dbData/DbList.vue b/src/view/component/dbData/DbList.vue
new file mode 100644
index 0000000..6cbd1fd
--- /dev/null
+++ b/src/view/component/dbData/DbList.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <el-row style="width: calc(100vw - 270px)">
+      <el-row style="width: 100%">
+        <h5>DB地址列表</h5>
+      </el-row>
+      <el-table :data="modelValue" border stripe max-height="calc(100vh - 410px)">
+        <el-table-column fixed prop="plcId" label="PLC 编号" width="150px" align="center"/>
+        <el-table-column prop="plcName" label="PLC 名称" width="250px" align="center"/>
+        <el-table-column prop="dbName" label="DB 名称" width="250px" show-overflow-tooltip align="center"/>
+        <el-table-column prop="dbAddress" label="DB 地址" width="250px" align="center"/>
+        <el-table-column prop="isSystem" label="是否系统级别" width="120px" align="center"/>
+        <el-table-column prop="remark" label="备注信息" min-width="100px"/>
+        <el-table-column fixed="right" label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button-group class="ml-4">
+              <el-tooltip content="编辑" placement="top" effect="light">
+                <el-button type="primary" size="small" @click="editData(scope.row)">
+                  <el-icon><Edit/></el-icon>
+                </el-button>
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top" effect="light">
+                <el-button type="danger" size="small" @click="deleteData(scope.row)">
+                  <el-icon><Delete/></el-icon>
+                </el-button>
+              </el-tooltip>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import  《组件名称》  from '《组件路径》 ';
+
+import {Delete, Edit} from "@element-plus/icons-vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import dbApi from "@/axios/db";
+
+export default {
+  // import 引入的组件需要注入到对象中才能使用
+  components: {Delete, Edit},
+  props: ['modelValue', 'plcDbItem'],
+  emits: ['update:modelValue', 'update:plcDbItem', 'addDBForm', 'showAddForm'],
+  data() {
+    // 这里存放数据
+    return {}
+  },
+  // 计算属性 类似于 data 概念
+  computed: {},
+  // 监控 data 中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 打开编辑框
+    editData(row) {
+      this.$emit('update:plcDbItem', {
+        dbName: row.dbName,
+        plcId: row.plcId,
+        dbAddress: row.dbAddress,
+        isSystem: row.isSystem,
+        remark: row.remark
+      })
+      this.$emit('showAddForm', true)
+    },
+    // 删除数据
+    deleteData(row) {
+      ElMessageBox.confirm(
+        `您确定要删除 dbName 为 ${row.dbName} 的DB信息? 该操作不可恢复！`,
+        '数据删除警告',
+        {
+          confirmButtonClass: 'el-button--danger',
+          confirmButtonText: '删除',
+          cancelButtonText: '取消',
+          type: 'error',
+        }).then(() => {
+          dbApi.deleteData(row.dbName).then(response=>{
+            const responseData = response.data
+            if(responseData.code === 0){
+              ElMessage({
+                message: '删除成功',
+                type: 'success',
+              })
+            } else {
+              ElMessage({
+                message: '服务器返回失败：' + responseData.msg,
+                type: 'warning',
+              })
+            }
+          }).catch(ex=>{
+            ElMessage({
+              message: '请求服务器失败：' + ex,
+              type: 'error',
+            })
+          })
+        })
+        .catch(() => {
+        })
+    }
+  },
+  // 组合式 API
+  setup() {
+  },
+  // 创建之前
+  beforeCreate() {
+  },
+  // 创建完成(可以访问 this 实例)
+  created() {
+  },
+  // 生命周期 - 挂载之前
+  beforeMount() {
+  },
+  // 生命周期 - 挂载完成（可以访问 DOM 元素）
+  mounted() {
+  },
+  // 更新之前
+  beforeUpdate() {
+  },
+  // 更新之后
+  updated() {
+  },
+  // 销毁之前
+  beforeUnmount() {
+  },
+  // 销毁完成
+  unmounted() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/view/component/dbData/SearchForm.vue b/src/view/component/dbData/SearchForm.vue
new file mode 100644
index 0000000..7023f00
--- /dev/null
+++ b/src/view/component/dbData/SearchForm.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
+      <el-row>
+        <el-form :model="searchParams" label-width="120" label-position="left">
+          <el-form-item label="所属 PLC：">
+            <el-select v-model="searchParams.plcId" placeholder="请选择PLC" style="width: 400px" clearable>
+              <el-option
+                  v-for="item in plcList"
+                  :key="item.plcId"
+                  :label="item.plcName"
+                  :value="item.plcId"
+              >
+                <span style="float: left">{{ item.plcId }}</span>
+                <span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">
+                  {{ item.plcName }}
+                </span>
+              </el-option>
+            </el-select>
+            <el-button type="info" @click="loadPlcData"><el-icon><Refresh/></el-icon></el-button>
+          </el-form-item>
+          <el-form-item label="查询关键字：">
+            <el-input placeholder="输入 DB地址名称 查询..." v-model="searchParams.dbName" clearable></el-input>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <el-button type="primary" @click="searchBtn">查询/刷新</el-button>
+        <el-button type="success" @click="addDBForm">添加DB地址</el-button>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+// import  《组件名称》  from '《组件路径》 ';
+import dbApi from "@/axios/db"
+import {Refresh} from "@element-plus/icons-vue";
+import {ElLoading, ElMessage} from "element-plus";
+
+export default {
+  // import 引入的组件需要注入到对象中才能使用
+  components: {Refresh},
+  props: ['plcDbList', 'plcList'],
+  emits: ['update:plcDbList', 'loadPlcData', 'addDBForm'],
+  data() {
+    // 这里存放数据
+    return {
+      searchParams: {
+        dbName: '',
+        plcId: ''
+      }
+    }
+  },
+  // 计算属性 类似于 data 概念
+  computed: {
+  },
+  // 监控 data 中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 加载PLC数据
+    loadPlcData() {
+      this.$emit('loadPlcData');
+    },
+    // 打开添加DB窗口
+    addDBForm() {
+      this.$emit('addDBForm')
+    },
+    // 查询按钮
+    searchBtn() {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '加载中...',
+      })
+      this.$emit('update:plcDbList', [])
+      if(this.searchParams.plcId === '' || this.searchParams.plcId === undefined || this.searchParams.plcId === null) {
+        this.searchParams.plcId = null
+      }
+      dbApi.getDbWithName(this.searchParams).then(res=>{
+        const responseData = res.data
+        if(responseData.code === 0){
+          ElMessage({
+            message: '查询成功',
+            type: 'success',
+          })
+          this.$emit('update:plcDbList', Object.freeze(responseData["returnData"]))
+        }else{
+          ElMessage({
+            message: '服务器返回失败：' + responseData.msg,
+            type: 'warning',
+          })
+        }
+        loading.close()
+      }).catch(ex=>{
+        ElMessage({
+          message: '请求服务器失败：' + ex,
+          type: 'error',
+        })
+        loading.close()
+      })
+    }
+
+  },
+  // 组合式 API
+  setup() {
+  },
+  // 创建之前
+  beforeCreate() {
+  },
+  // 创建完成(可以访问 this 实例)
+  created() {
+  },
+  // 生命周期 - 挂载之前
+  beforeMount() {
+  },
+  // 生命周期 - 挂载完成（可以访问 DOM 元素）
+  mounted() {
+    this.loadPlcData()
+  },
+  // 更新之前
+  beforeUpdate() {
+  },
+  // 更新之后
+  updated() {
+  },
+  // 销毁之前
+  beforeUnmount() {
+  },
+  // 销毁完成
+  unmounted() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/view/component/PLCData/AddPLCData.vue b/src/view/component/plcData/AddPLCData.vue
similarity index 100%
rename from src/view/component/PLCData/AddPLCData.vue
rename to src/view/component/plcData/AddPLCData.vue
diff --git a/src/view/tab/development/DbData.vue b/src/view/tab/development/DbData.vue
index 771cb67..301c7cf 100644
--- a/src/view/tab/development/DbData.vue
+++ b/src/view/tab/development/DbData.vue
@@ -1,27 +1,96 @@
 <template>
   <div>
-
+    <el-row>
+      <SearchForm
+          v-model:plc-db-list="plcDbList" v-model:plc-list="plcList"
+          @loadPlcData="loadPlcData" @addDBForm="addDBData"
+          style="width: 100%" ref="searchForm"></SearchForm>
+    </el-row>
+    <el-row>
+      <DbList v-model="plcDbList"  v-model:plc-db-item="plcDbItem"
+              style="width: 100%"
+              @addDBForm="addDBData"  @showAddForm="showAddFormMethod"></DbList>
+    </el-row>
+<!--  添加或者更新PLC DB数据-->
+    <AddDBData v-model="showAddForm" v-model:plc-list="plcList" v-model:plc-db-item="plcDbItem"
+               @loadPlcData="loadPlcData">
+    </AddDBData>
   </div>
 </template>
 
 <script>
 // import  《组件名称》  from '《组件路径》 ';
+import SearchForm from "@/view/component/dbData/SearchForm.vue";
+import DbList from "@/view/component/dbData/DbList.vue";
+import {ElLoading, ElMessage} from "element-plus";
+import plcApi from "@/axios/plc";
+import AddDBData from "@/view/component/dbData/AddDBData.vue";
 
 export default {
   // import 引入的组件需要注入到对象中才能使用
-  components: {},
+  components: {AddDBData, DbList, SearchForm},
   props: [],
   emits: [],
   data() {
     // 这里存放数据
-    return {}
+    return {
+      plcList:[],
+      plcDbList:[],
+      showAddForm: false,
+      plcDbItem: {}
+    }
   },
   // 计算属性 类似于 data 概念
   computed: {},
   // 监控 data 中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    // 加载plc数据
+    loadPlcData() {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '加载中...',
+      })
+      this.plcList = []
+      plcApi.getPlc().then(res=>{
+        const responseData = res.data
+        if(responseData.code === 0){
+          ElMessage({
+            message: '查询成功',
+            type: 'success',
+          })
+          this.plcList = Object.freeze(responseData["returnData"])
+        }else{
+          ElMessage({
+            message: '服务器返回失败：' + responseData.msg,
+            type: 'warning',
+          })
+        }
+        loading.close()
+      }).catch(ex=>{
+        ElMessage({
+          message: '请求服务器失败：' + ex,
+          type: 'error',
+        })
+        loading.close()
+      })
+    },
+    // 添加PLC DB数据
+    addDBData() {
+      this.plcDbItem = {
+        dbName: '',
+        plcId: '',
+        dbAddress: '',
+        isSystem: '',
+        remark: ''
+      }
+      this.showAddForm = true
+    },
+    showAddFormMethod(isShow) {
+      this.showAddForm = isShow;
+    }
+  },
   // 组合式 API
   setup() {
   },
diff --git a/src/view/tab/development/PLCData.vue b/src/view/tab/development/PLCData.vue
index e27ef0d..66f97eb 100644
--- a/src/view/tab/development/PLCData.vue
+++ b/src/view/tab/development/PLCData.vue
@@ -49,7 +49,7 @@ import plcApi from "@/axios/plc";
 import {formatterOnOrOffEnum} from "@/enum/base/on.off.enum";
 import {Delete, Edit} from "@element-plus/icons-vue";
 import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
-import AddPLCData from "@/view/component/PLCData/AddPLCData.vue";
+import AddPLCData from "@/view/component/plcData/AddPLCData.vue";
 
 export default {
   // import 引入的组件需要注入到对象中才能使用
@@ -128,7 +128,8 @@ export default {
           `您确定要删除 plcId 为 ${this.plcDataItem.plcId} 的PLC信息? 删除后不可恢复！`,
           '数据删除警告',
           {
-            confirmButtonText: '确定删除',
+            confirmButtonClass: 'el-button--danger',
+            confirmButtonText: '删除',
             cancelButtonText: '取消',
             type: 'error',
           })