修改设备添加、删除，修复动态组件日期格式

2022-08-17 00:05:22 +08:00
parent 0ed5eddd9a
commit ce6e09b03b
5 changed files with 224 additions and 165 deletions
--- a/src/api/modules/edgeServer.api.js
+++ b/src/api/modules/edgeServer.api.js
@@ -72,7 +72,14 @@ export default ({ service, request, serviceForMock, requestForMock, mock, faker,
  GET_DEVICE_CONFIGURE (id) {
    return request({ url: '?query=device&id=' + id })
  },
-  GET_SERVE_MONITORING () {
-    return request({ url: '?query=all_status' })
+  GET_SERVE_DEVICE_MONITORING (url, username, password) {
+    return request({
+      auth: {
+        username: username,
+        password: password
+      },
+      method: 'get',
+      url: url + '/Edge/DeviceData'
+    })
  }
 })
--- a/src/views/edgeServer/edgeServerConfigure/device.vue
+++ b/src/views/edgeServer/edgeServerConfigure/device.vue
@@ -1,81 +1,85 @@
 <template>
-    <el-container>
-        <el-aside width="15%">
-            <div class="menu-box">
-                <el-card class="box-card">
-                    <div slot="header" class="menu-header">
-                        <div class="header-title">设备</div>
-                        <el-dropdown size="small" style="vertical-align: middle;" @command="handleCommand">
-                            <el-button type="primary" round >
-                                <i class="el-icon-s-tools" style="font-size:14px;"></i><i
-                                    class="el-icon-arrow-down el-icon--right" style="font-size:14px;"></i>
-                            </el-button>
-                            <el-dropdown-menu slot="dropdown">
-                                <el-dropdown-item command="add">新加设备</el-dropdown-item>
-                                <el-dropdown-item command="del">删除设备</el-dropdown-item>
-                                <el-dropdown-item>设备重启</el-dropdown-item>
-                                <el-dropdown-item>导入配置</el-dropdown-item>
-                                <el-dropdown-item>导出配置</el-dropdown-item>
-                            </el-dropdown-menu>
-                        </el-dropdown>
-                    </div>
+  <el-container>
+    <el-aside width="15%">
+      <div class="menu-box">
+        <el-card class="box-card">
+          <div slot="header" class="menu-header">
+            <div class="header-title">设备</div>
+            <el-dropdown size="small" style="vertical-align: middle;" @command="handleCommand">
+              <el-button type="primary" round>
+                <i class="el-icon-s-tools" style="font-size:14px;"></i><i class="el-icon-arrow-down el-icon--right"
+                  style="font-size:14px;"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="add">新加设备</el-dropdown-item>
+                <el-dropdown-item command="del">删除设备</el-dropdown-item>
+                <el-dropdown-item>设备重启</el-dropdown-item>
+                <el-dropdown-item>导入配置</el-dropdown-item>
+                <el-dropdown-item>导出配置</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>

-                    <el-menu :style="{ 'borderRight': 'none' }" :defaultActive="deviceActiveStatus"
-                        @select="getDeviceConfigure">
-                        <el-menu-item class="serve-item" shadow="always" v-for="(item, i) in deviceData" :key="i"
-                            :index="i + ''">
-                            <div style="position:relative;">
-                                <div style="display:inline-block;">{{ item.name }}</div>
-                                <div
-                                    :class="{ 'device-status': true, 'device-status-online': item.status === 1, 'device-status-offline': item.status === 0 }">
-                                </div>
-                            </div>
-                        </el-menu-item>
-                    </el-menu>
-
-                </el-card>
-            </div>
-        </el-aside>
-        <el-main :style="{ padding: '10px' }">
-            <el-card class="box-card">
-                <div slot="header" style=" position: relative;">
-                    <div class="header-title">设备配置</div>
-                    <el-button class="header-button" type="primary" @click="setDeviceConfigure">应用</el-button>
+          <el-menu :style="{ 'borderRight': 'none' }" :defaultActive="deviceActiveStatus" @select="getDeviceConfigure">
+            <el-menu-item class="serve-item" shadow="always" v-for="(item, i) in deviceData" :key="i" :index="i + ''">
+              <div style="position:relative;">
+                <div style="display:inline-block;">{{ item.name }}</div>
+                <div
+                  :class="{ 'device-status': true, 'device-status-online': item.status === 1, 'device-status-offline': item.status === 0 }">
                </div>
-                <device-configure ref="deviceConfigure" :defaultDeviceName="defaultDeviceName" :defaultFormData="defaultFormData" />
-            </el-card>
-            <el-card class="box-card" style="margin-top:5px;">
-                <d2-crud ref="d2Crud"
-                :columns="columns"
-                :data="devicePointData"
-                :rowHandle="rowHandle"
-                add-title="新增"
-                edit-title="绑定"
-                :add-template="addTemplate"
-                :add-rules="addRules"
-                :form-options="formOptions"
-                @row-add="addDevicePoint"
-                @row-edit="devicePointBandingNode"
-                @row-remove="delDevicePoint"
-                @dialog-cancel="handleDialogCancel"
-                @banding="bandingNodeTemplate"
-                @cell-data-change="handleCellDataChange"
-                @form-data-change="handleFormDataChange">
-                <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
-                </d2-crud>
-            </el-card>
-        </el-main>
+              </div>
+            </el-menu-item>
+          </el-menu>

-    </el-container>
+        </el-card>
+      </div>
+    </el-aside>
+    <el-main :style="{ padding: '10px' }">
+      <el-card class="box-card">
+        <div slot="header" style=" position: relative;">
+          <div class="header-title">设备配置</div>
+          <el-button class="header-button" type="primary" @click="setDeviceConfigure">应用</el-button>
+        </div>
+        <device-configure ref="deviceConfigure" :defaultDeviceName="defaultDeviceName"
+          :defaultFormData="defaultFormData" />
+      </el-card>
+      <el-card class="box-card" style="margin-top:5px;">
+        <d2-crud ref="d2Crud"
+        :columns="columns"
+        :data="devicePointData"
+        :rowHandle="rowHandle"
+        add-title="新增"
+        edit-title="绑定"
+        :add-template="addTemplate"
+        :add-rules="addRules"
+        :form-options="formOptions"
+        @row-add="addDevicePoint"
+        @row-edit="devicePointBandingNode"
+        @row-remove="delDevicePoint"
+        @dialog-cancel="handleDialogCancel"
+        @banding="bandingNodeTemplate"
+        @cell-data-change="handleCellDataChange"
+        @form-data-change="handleFormDataChange">
+          <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+        </d2-crud>
+      </el-card>
+    </el-main>
+
+  </el-container>
 </template>

 <script>

-import { each, assign } from 'lodash'
+import { each, assign, unset, filter, isArray, map } from 'lodash'
+
 export default {
  props: {
-    server_id: {
-      default: 0
+    server: {
+      default: {
+        id: 0,
+        url: '',
+        port: ''
+      }
    }
  },
  components: {
@@ -93,7 +97,6 @@ export default {
          title: '名称',
          key: '@Name',
          component: {
-
            size: 'small'
          }
        },
@@ -235,7 +238,7 @@ export default {
        '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }],
        '@Value': [{ required: true, message: '请输入当前值', trigger: 'blur' }]
      },
-      serverId: 0,
+      serverData: {},
      devicePointData: [],
      nodeCodeData: [],
      workingSubclasses: [],
@@ -248,9 +251,9 @@ export default {
    }
  },
  watch: {
-    server_id: {
+    server: {
      handler (val) {
-        this.serverId = val
+        this.serverData = val
        this.getDevice()
      },
      immediate: true
@@ -273,9 +276,10 @@ export default {
      this.devicePointData[rowIndex] = row
      this.setDeviceConfigure()
    },
-    bandingNodeTemplate () {
+    bandingNodeTemplate ({ index }) {
      this.$refs.d2Crud.showDialog({
        mode: 'edit',
+        rowIndex: index,
        template: {
          workingSubclass: {
            title: '工序编码',
@@ -348,7 +352,7 @@ export default {
    },
    async getDevice () {
      try {
-        this.deviceData = await this.$api.GET_DEVICE(this.serverId)
+        this.deviceData = await this.$api.GET_DEVICE(this.serverData.id)
        if (this.deviceData.length > 0) {
          this.getDeviceConfigure(this.deviceActiveStatus)
        }
@@ -361,10 +365,11 @@ export default {
      this.devicePointData = [] // 当切换设备时把保存configure、point的数据清空
      this.defaultDeviceName = ''
      const deviceData = await this.$api.GET_DEVICE_CONFIGURE(this.deviceData[e].id)
+
      if (deviceData[0].conf) {
        const conf = JSON.parse(deviceData[0].conf)
-        if (conf['@Name'] !== undefined) {
-          this.defaultDeviceName = conf['@Name']
+        if (conf.DeviceTypeName !== undefined) {
+          this.defaultDeviceName = conf.DeviceTypeName
          this.defaultFormData = conf
        }
        // 获取point信息
@@ -388,7 +393,7 @@ export default {
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: '请输入设备名称'
      }).then(({ value }) => {
-        this.$api.ADD_DEVICE({ action: 'add_device', name: value, server_id: this.serverId })
+        this.$api.ADD_DEVICE({ action: 'add_device', name: value, server_id: this.serverData.id })
        that.getDevice()
        this.$message({
          message: '新加设备成功',
@@ -397,7 +402,20 @@ export default {
      })
    },
    async delDevice () {
+      const url = 'http://8.sctmes.com:20522'
+      // 'http://'+ this.serverData.url +':'+ this.serverData.port
+      const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456')
+      let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode
+      if (deviceNode !== undefined && isArray(deviceNode)) {
+        deviceNode = filter(deviceNode, item => {
+          return item['@Name'] === this.deviceData[this.deviceActiveStatus].name ? null : item
+        })
+        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode
+      } else {
+        unset(deviceConfigure, 'Content.Settings.GroupNode[0].DeviceNode')
+      }
      try {
+        await this.$api.SET_HSLSERVER_CONFIGURE(url, 'admin', '123456', { data: deviceConfigure.Content })
        await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id })
        this.$message({
          message: '删除设备成功',
@@ -410,7 +428,7 @@ export default {
    },
    async addDevicePoint (row, done) {
      this.formOptions.saveLoading = true
-      if (!this.$refs.defaultDeviceTypeNameValue) {
+      if (!this.$refs.deviceConfigure.defaultDeviceTypeNameValue) {
        this.$message({
          message: '请先应用设备配置',
          type: 'error'
@@ -430,7 +448,7 @@ export default {
      done()
    },
    async getDevicePoint () {
-      const data = { action: 'add_node', server_id: this.serverId, device_id: this.deviceData[this.deviceActiveStatus].id }
+      const data = { action: 'add_node', server_id: this.serverData.id, device_id: this.deviceData[this.deviceActiveStatus].id }
      try {
        this.devicePointData = await this.$api.GET_DEVICE_POINT(data)
      } catch (e) {
@@ -444,19 +462,48 @@ export default {
    },
    async setDeviceConfigure () {
      try {
-        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456')
+        const url = 'http://8.sctmes.com:20522'
+        // 'http://'+ this.serverData.url +':'+ this.serverData.port
+        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456')
        if (this.devicePointData.length > 0) {
-          this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
+          const devicePointData = this.devicePointData
+          each(devicePointData, (item) => {
+            unset(item, 'id')
+            unset(item, 'showBindButton')
+            unset(item, 'showCopyButton')
+            unset(item, 'showRemoveButton')
+            unset(item, 'showSendButton')
+            item['@Binding'] = item['@Binding'] || ''
+          })
+          this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = devicePointData
        }
-        console.log(this.$refs.deviceConfigure.deviceConfigureModelValue)
-        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = [this.$refs.deviceConfigure.deviceConfigureModelValue]
-        await this.$api.SET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456', { data: deviceConfigure.Content })
+        this.$refs.deviceConfigure.deviceConfigureModelValue['@Name'] = this.deviceData[this.deviceActiveStatus].name
+
+        let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode || []
+        let isExist = false
+        if (deviceNode !== undefined) {
+          deviceNode = isArray(deviceNode) ? deviceNode : [deviceNode]
+          deviceNode = map(deviceNode, (item) => {
+            if (item['@Name'] === this.deviceData[this.deviceActiveStatus].name) {
+              isExist = true
+              item = this.$refs.deviceConfigure.deviceConfigureModelValue
+            }
+            return item
+          })
+        }
+
+        if (!isExist) {
+          deviceNode.push(this.$refs.deviceConfigure.deviceConfigureModelValue)
+        }
+
+        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode
+        this.$refs.deviceConfigure.deviceConfigureModelValue.DeviceTypeName = this.$refs.deviceConfigure.defaultDeviceTypeNameValue
+        await this.$api.SET_HSLSERVER_CONFIGURE(url, 'admin', '123456', { data: deviceConfigure.Content })
        const data = {
          action: 'update_device',
          conf: JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue),
          id: this.deviceData[this.deviceActiveStatus].id
        }
-
        this.$api.SET_DEVICE_CONFIGURE(data)
        this.$message({
          message: '操作成功',
@@ -467,7 +514,7 @@ export default {
      }
    },
    getDeviceStatus () {
-      this.$api.GET_DEVICE_STATUS(this.serverId).then(res => {
+      this.$api.GET_DEVICE_STATUS(this.serverData.id).then(res => {
        each(this.deviceData, (item) => {
          if (item.id in res.device_status) {
            item.status = res.device_status[item.id]
@@ -480,75 +527,75 @@ export default {
  mounted () {
    this.getDevice()
    this.getworkingSubclasses()
-    setInterval(this.getDeviceStatus, 2000)
+    // setInterval(this.getDeviceStatus, 2000)
  }
 }
 </script>

 <style scoped>
 .menu-box {
-    box-sizing: border-box;
-    padding: 10px;
-    vertical-align: middle;
+  box-sizing: border-box;
+  padding: 10px;
+  vertical-align: middle;
 }

 .el-dropdown {
-    vertical-align: top;
+  vertical-align: top;
 }

 .el-dropdown+.el-dropdown {
-    margin-left: 15px;
+  margin-left: 15px;
 }

 .el-icon-arrow-down {
-    font-size: 12px;
+  font-size: 12px;
 }

 .menu-header {
-    position: relative;
+  position: relative;

 }

 .header-title {
-    width: 60%;
-    display: inline-block;
-    font-weight: bold;
-    font-size: 20px;
-    color: black;
-    vertical-align: middle;
+  width: 60%;
+  display: inline-block;
+  font-weight: bold;
+  font-size: 20px;
+  color: black;
+  vertical-align: middle;
 }

 .header-button {
-    float: right;
-    vertical-align: middle;
+  float: right;
+  vertical-align: middle;
 }

 .serve-item {
-    border: none;
-    margin-bottom: 10px;
-    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-    overflow: hidden;
-    outline: 0;
-    border-radius: 4px;
+  border: none;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  overflow: hidden;
+  outline: 0;
+  border-radius: 4px;

 }

 .device-status {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;

-    right: 0;
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
+  right: 0;
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
 }

 .device-status-online {
-    background-color: #67c23a;
+  background-color: #67c23a;
 }

 .device-status-offline {
-    background-color: #ccc;
+  background-color: #ccc;
 }
 </style>
--- a/src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue
+++ b/src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue
@@ -1,37 +1,42 @@
 <template>
-    <div>
-        <el-form :inline="true" size="mini" label-position="right" class="demo-form-inline">
-            <el-form-item label="设备">
-                <el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择">
-                    <el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
-                    </el-option>
-                </el-select>
-            </el-form-item>
+  <div>
+    <el-form :inline="true" size="mini" label-position="right" class="demo-form-inline">
+      <el-form-item label="设备">
+        <el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择">
+          <el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
+          </el-option>
+        </el-select>
+      </el-form-item>

-            <el-form-item v-for="(item, i) in deviceConfigureFormItem" :key="i" :label="item.labelName">
-                <template v-if="item.type === 'text'">
-                    <el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled"
-                        :placeholder="item.placeholder"></el-input>
-                </template>
+      <el-form-item v-for="(item, i) in deviceConfigureFormItem" :key="i" :label="item.labelName">
+        <template v-if="item.type === 'text'">
+          <el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled"
+            :placeholder="item.placeholder"></el-input>
+        </template>

-                <template v-if="item.type === 'select'">
-                    <el-select v-model='deviceConfigureModelValue[item.key]' style="width:80px" :disabled="item.disabled"
-                        :placeholder="item.placeholder">
-                        <el-option v-for="index in item.option" :key="index.value" :label="index.label"
-                            :value="index.value">
-                        </el-option>
-                    </el-select>
-                </template>
+        <template v-if="item.type === 'select'">
+          <el-select v-model='deviceConfigureModelValue[item.key]' style="width:80px" :disabled="item.disabled"
+            :placeholder="item.placeholder">
+            <el-option v-for="index in item.option" :key="index.value" :label="index.label" :value="index.value">
+            </el-option>
+          </el-select>
+        </template>

-                <template v-if="item.type === 'time'">
-                    <el-date-picker v-model='deviceConfigureModelValue[item.key]' type="datetime" :placeholder="item.placeholder"
-                        defaultValue="2022-06-17 16:36:00" :disabled="item.disabled" style="width:180px">
-                    </el-date-picker>
-                </template>
+        <template v-if="item.type === 'time'">
+          <el-date-picker
+          v-model='deviceConfigureModelValue[item.key]'
+          type="datetime"
+          :placeholder="item.placeholder"
+          value-format='yyyy-MM-dd HH:mm:ss'
+          format='yyyy-MM-dd HH:mm:ss'
+          :disabled="item.disabled"
+          style="width:180px">
+          </el-date-picker>
+        </template>

-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>

 <script>
--- a/src/views/edgeServer/edgeServerConfigure/deviceSetting/index.json
+++ b/src/views/edgeServer/edgeServerConfigure/deviceSetting/index.json
@@ -13,8 +13,8 @@
            "type":"text",
            "placeholder":"",
            "key":"@Name",
-            "disabled":false,
-            "defaultValue":""
+            "disabled":true,
+            "defaultValue":"三菱PLC-MC"
        },
        {
            "labelName":"Description",
@@ -147,8 +147,8 @@
            "type":"text",
            "placeholder":"",
            "key":"@Name",
-            "disabled":false,
-            "defaultValue":""
+            "disabled":true,
+            "defaultValue":"三菱PLC-A1E"
        },
        {
            "labelName":"Description",
@@ -273,8 +273,8 @@
            "type":"text",
            "placeholder":"",
            "key":"@Name",
-            "disabled":false,
-            "defaultValue":""
+            "disabled":true,
+            "defaultValue":"三菱PLC-MC-UDP"
        },
        {
            "labelName":"Description",
@@ -407,8 +407,8 @@
            "type":"text",
            "placeholder":"",
            "key":"@Name",
-            "disabled":false,
-            "defaultValue":""
+            "disabled":true,
+            "defaultValue":"三菱PLC-FxSerial"
        },
        {
            "labelName":"Description",
@@ -559,8 +559,8 @@
            "type":"text",
            "placeholder":"",
            "key":"@Name",
-            "disabled":false,
-            "defaultValue":""
+            "disabled":true,
+            "defaultValue":"三菱PLC-FxSerial-OverTcp"
        },
        {
            "labelName":"Description",
@@ -713,8 +713,8 @@
            "type":"text",
            "placeholder":"",
            "key":"@Name",
-            "disabled":false,
-            "defaultValue":""
+            "disabled":true,
+            "defaultValue":"三菱PLC-FxLinks"
        },
        {
            "labelName":"Description",
@@ -864,7 +864,7 @@
            "placeholder":"",
            "key":"@Name",
            "disabled":false,
-            "defaultValue":""
+            "defaultValue":"三菱PLC-A3C"
        },
        {
            "labelName":"Description",
@@ -1014,7 +1014,7 @@
            "placeholder":"",
            "key":"@Name",
            "disabled":false,
-            "defaultValue":""
+            "defaultValue":"三菱PLC-A3C-OverTcp"
        },
        {
            "labelName":"Description",
--- a/src/views/edgeServer/edgeServerConfigure/index.vue
+++ b/src/views/edgeServer/edgeServerConfigure/index.vue
@@ -34,7 +34,7 @@
          {{serveStatus[selectedServerData.status].name}}
        </el-tag>
      </div>
-      <device :server_id='server_id' @changeStatus='changeSelectedServerStatus'/>
+      <device :server='server' @changeStatus='changeSelectedServerStatus'/>
    </el-drawer>
  </d2-container>
 </template>
@@ -81,7 +81,7 @@ export default {
        }
      ],
      isDrawerShow: false,
-      server_id: 0,
+      server: {},
      serveStatus: {
        online: {
          name: '在线',
@@ -337,7 +337,7 @@ export default {
        port: row.port,
        status: row.status ? row.status : 'offline'
      }
-      this.server_id = row.id
+      this.server = { id: row.id, url: row.url, port: row.port }
      this.isDrawerShow = true
    },
    changeSelectedServerStatus (status) {