<add>[important]添加PLC管理界面

src/axios/plc.js

@@ -0,0 +1,20 @@
+import axios from '@/axios/base/base.axios';
+
+export default {
+    // 获取所有PLC数据
+    getPlc() {
+        return axios.get('/api/wcs/plc/getPlc')
+    },
+    // 编辑PLC数据
+    editPlc(plcDataItem) {
+        return axios.post('/api/wcs/plc/editePlc', plcDataItem)
+    },
+    // 删除一条数据
+    deletePlc(plcId) {
+        return axios.delete('/api/wcs/plc/deletePlc', {
+            params: {
+                plcId: plcId
+            }
+        })
+    },
+}

src/view/component/PLCData/AddPLCData.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <el-dialog
+        title="添加PLC数据"
+        :model-value="modelValue"
+        @close="() => $emit('update:modelValue', false)">
+      <el-form
+          label-position="left"
+          label-width="160px"
+          :model="plcDataItem"
+      >
+        <el-form-item label="PLC 编号（唯一）：">
+          <el-input v-model="plcDataItem.plcId" placeholder="不能相同与其他编号，不然视作更新那个编号的数据"/>
+        </el-form-item>
+        <el-form-item label="PLC 名称：">
+          <el-input v-model="plcDataItem.plcName"/>
+        </el-form-item>
+        <el-form-item label="PLC IP地址：">
+          <el-input v-model="plcDataItem.plcIp" placeholder="请使用 ipv4 格式地址"/>
+        </el-form-item>
+        <el-form-item label="PLC 状态：">
+          <el-input v-model="plcDataItem.plcStatus" placeholder="0：不启用；  1：启用"/>
+        </el-form-item>
+        <el-form-item label="PLC 系列：">
+          <el-input v-model="plcDataItem.plcKind" placeholder="1200 | 1500"/>
+        </el-form-item>
+        <el-form-item label="机架：">
+          <el-input v-model="plcDataItem.rack"/>
+        </el-form-item>
+        <el-form-item label="插槽：">
+          <el-input v-model="plcDataItem.slot"/>
+        </el-form-item>
+        <el-form-item label="备注信息：">
+          <el-input v-model="plcDataItem.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 plcApi from "@/axios/plc";
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+
+export default {
+  // import 引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ['modelValue', 'plcDataItem'],
+  emits: ['update:modelValue'],
+  data() {
+    // 这里存放数据
+    return {
+    }
+  },
+  // 计算属性 类似于 data 概念
+  computed: {},
+  // 监控 data 中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 添加或者更新PLC序号
+    addOrUpdate() {
+      if(this.plcDataItem.plcId === ''){
+        ElMessage({
+          message: '请输入 plc 编号',
+          type: 'warning',
+        })
+        return
+      }
+      ElMessageBox.confirm(
+          `您确定要执行添加/编辑 plcId 为 ${this.plcDataItem.plcId} 的PLC信息?`,
+          '数据变更警告',
+          {
+            confirmButtonText: '变更',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+        .then(() => {
+          const loading = ElLoading.service({
+            lock: true,
+            text: '请稍后...',
+          })
+          this.plcData = []
+          plcApi.editPlc(this.plcDataItem).then(res=>{
+            const responseData = res.data
+            if(responseData.code === 0){
+              ElMessage({
+                message: '添加/编辑成功',
+                type: 'success',
+              })
+              this.$emit('update:modelValue', false)
+            }else{
+              ElMessage({
+                message: '服务器返回失败：' + responseData.msg,
+                type: 'warning',
+              })
+            }
+            loading.close()
+          }).catch(ex=>{
+            ElMessage({
+              message: '请求服务器失败：' + ex,
+              type: 'error',
+            })
+            loading.close()
+          })
+        })
+        .catch(() => {
+        })
+    }
+  },
+  // 组合式 API
+  setup() {
+  },
+  // 创建之前
+  beforeCreate() {
+  },
+  // 创建完成(可以访问 this 实例)
+  created() {
+  },
+  // 生命周期 - 挂载之前
+  beforeMount() {
+  },
+  // 生命周期 - 挂载完成（可以访问 DOM 元素）
+  mounted() {
+  },
+  // 更新之前
+  beforeUpdate() {
+  },
+  // 更新之后
+  updated() {
+  },
+  // 销毁之前
+  beforeUnmount() {
+  },
+  // 销毁完成
+  unmounted() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/view/tab/development/PLCData.vue

@@ -1,27 +1,183 @@
 <template>
   <div>
-
+    <el-row>
+      <el-button type="primary" style="margin-left: 0.5rem" @click="loadData">加载PLC数据</el-button>
+      <el-button type="success" style="margin-left: 0.5rem" @click="addPlcData">添加PLC数据</el-button>
+    </el-row>
+    <el-row style="width: calc(100vw - 270px)">
+      <h5>PLC信息表格</h5>
+      <el-table :data="plcData" border stripe style="width: 100%;" max-height="calc(100vh - 350px)">
+        <el-table-column fixed prop="plcId" label="PLC 编号" width="100px" align="center" show-overflow-tooltip/>
+        <el-table-column fixed prop="plcName" label="PLC 名称" align="center" show-overflow-tooltip/>
+        <el-table-column fixed prop="plcIp" label="PLC IP地址" width="250px" align="center" show-overflow-tooltip/>
+        <el-table-column prop="plcStatus" label="PLC 状态" align="center" width="180px">
+          <template #default="scope">
+            <el-tag class="ml-2" :type=formatterOnOrOffEnum(scope.row.plcStatus).type>
+              {{formatterOnOrOffEnum(scope.row.plcStatus).label}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="plcKind" label="PLC 系列" align="center" width="150px"/>
+        <el-table-column prop="rack" label="插槽" align="center"  width="150px" show-overflow-tooltip/>
+        <el-table-column prop="slot" label="机架" width="150px" align="center" show-overflow-tooltip/>
+        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip/>
+        <el-table-column fixed="right" label="操作" align="center" width="150">
+          <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>
+<!--    添加PLC的窗口-->
+    <AddPLCData v-model="showAddForm" v-model:plc-data-item="plcDataItem"></AddPLCData>
   </div>
 </template>
 
 <script>
 // import  《组件名称》  from '《组件路径》 ';
+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";
 
 export default {
   // import 引入的组件需要注入到对象中才能使用
-  components: {},
+  components: {AddPLCData, Delete, Edit},
   props: [],
   emits: [],
   data() {
     // 这里存放数据
-    return {}
+    return {
+      plcData:[],
+      plcDataItem:{},
+      showAddForm: false,
+    }
   },
   // 计算属性 类似于 data 概念
   computed: {},
   // 监控 data 中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    formatterOnOrOffEnum,
+    // 加载PLC数据
+    loadData() {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '加载中...',
+      })
+      this.plcData = []
+      plcApi.getPlc().then(res=>{
+        const responseData = res.data
+        if(responseData.code === 0){
+          ElMessage({
+            message: '查询成功',
+            type: 'success',
+          })
+          this.plcData = Object.freeze(responseData["returnData"])
+        }else{
+          ElMessage({
+            message: '服务器返回失败：' + responseData.msg,
+            type: 'warning',
+          })
+        }
+        loading.close()
+      }).catch(ex=>{
+        ElMessage({
+          message: '请求服务器失败：' + ex,
+          type: 'error',
+        })
+        loading.close()
+      })
+    },
+    // 编辑 PLC
+    editData(row) {
+      this.plcDataItem = {
+        plcId: row.plcId,
+        plcName: row.plcName,
+        plcIp: row.plcIp,
+        plcStatus: row.plcStatus,
+        plcKind: row.plcKind,
+        rack: row.rack,
+        slot: row.slot,
+        remark: row.remark
+      }
+      this.showAddForm = true;
+    },
+    // 删除 PLC 数据
+    deleteData(row) {
+      if(row.plcId === undefined || row.plcId === ''){
+        ElMessage({
+          message: 'plc 编号不能为空',
+          type: 'warning',
+        })
+        return
+      }
+      ElMessageBox.confirm(
+          `您确定要删除 plcId 为 ${this.plcDataItem.plcId} 的PLC信息? 删除后不可恢复！`,
+          '数据删除警告',
+          {
+            confirmButtonText: '确定删除',
+            cancelButtonText: '取消',
+            type: 'error',
+          })
+          .then(() => {
+            const loading = ElLoading.service({
+              lock: true,
+              text: '请稍后...',
+            })
+            this.plcData = []
+            plcApi.deletePlc(row.plcId).then(res=>{
+              const responseData = res.data
+              if(responseData.code === 0){
+                ElMessage({
+                  message: '删除成功',
+                  type: 'success',
+                })
+              }else{
+                ElMessage({
+                  message: '服务器返回失败：' + responseData.msg,
+                  type: 'warning',
+                })
+              }
+              loading.close()
+            }).catch(ex=>{
+              ElMessage({
+                message: '请求服务器失败：' + ex,
+                type: 'error',
+              })
+              loading.close()
+            })
+          })
+          .catch(() => {
+          })
+    },
+    // 添加 PLC 数据
+    addPlcData() {
+      this.plcDataItem = {
+        plcId: '',
+        plcName: '',
+        plcIp: '',
+        plcStatus: '',
+        plcKind: '',
+        rack: '0',
+        slot: '1',
+        remark: ''
+      }
+      this.showAddForm = true;
+    }
+  },
   // 组合式 API
   setup() {
   },