EdgeManager/src/views/edgeServer/edgeServerConfigure/device.vue

<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-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,
                    'device-status-offline': !item.status,
                  }"
                ></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="setDeviceConfigureConfirm"
            >应用</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,
  unset,
  filter,
  isArray,
  map,
  capitalize,
  split,
  toUpper,
} from "lodash";

export default {
  props: {
    server: {
      default: {
        id: 0,
        url: "",
        port: "",
      },
    },
  },
  components: {
    DeviceConfigure: () => import("./deviceConfigure"),
  },
  data() {
    return {
      active: "",
      timing:null,
      columns: [
        {
          title: "序号",
          key: "id",
        },
        {
          title: "名称",
          key: "@Name",
          component: {
            size: "small",
          },
        },
        {
          title: "绑定",
          key: "@Binding",
        },
        {
          title: "地址",
          key: "@Address",
          component: {
            name: "el-input",
            size: "small",
          },
        },
        {
          title: "类型",
          key: "@DataTypeCode",
          component: {
            name: "el-select",
            size: "small",
            options: [
              {
                value: "string",
                label: "string (字符串)",
              },
              {
                value: "int",
                label: "int (整数)",
              },
              {
                value: "float",
                label: "float (浮点数)",
              },
              {
                value: "bool",
                label: "bool (逻辑值)",
              },
              {
                value: "uint",
                label: "uint",
              },
              {
                value: "short",
                label: "short",
              },
              {
                value: "ushort",
                label: "ushort",
              },
              {
                value: "long",
                label: "long",
              },
              {
                value: "ulong",
                label: "ulong",
              },
              {
                value: "double",
                label: "double",
              },
              {
                value: "byte",
                label: "byte",
              },
              {
                value: "sbyte",
                label: "sbyte",
              },
            ],
          },
        },
        {
          title: "采集周期",
          key: "@RequestInterval",
          component: {
            name: "el-input",
            size: "small",
          },
        },
        {
          title: "长度",
          key: "@Length",
          component: {
            name: "el-input",
            size: "small",
          },
        },
        {
          title: "说明",
          key: "@Description",
          component: {
            name: "el-input",
            size: "small",
          },
        },
        {
          title: "当前值",
          key: "@Value",
          component: {
            name: "el-input",
            size: "small",
          },
        },
      ],
      rowHandle: {
        minWidth: "200",
        custom: [
          {
            text: "绑定",
            size: "mini",
            emit: "banding",
            show(index, row) {
              if (row.showBindButton) {
                return true;
              }
              return false;
            },
          },
          {
            text: "发送",
            size: "mini",
            show(index, row) {
              if (row.showSendButton) {
                return true;
              }
              return false;
            },
          },
          {
            text: "复制",
            size: "mini",
            show(index, row) {
              if (row.showCopyButton) {
                return true;
              }
              return false;
            },
          },
        ],
        remove: {
          size: "mini",

          confirm: true,
          show(index, row) {
            if (row.showRemoveButton) {
              return true;
            }
            return false;
          },
        },
      },
      formOptions: {
        modal: false,
        saveLoading: false,
        showOverflowTooltip: true,
      },
      addTemplate: {
        "@Name": {
          title: "名称",
        },
        "@Address": {
          title: "地址",
        },
        "@DisplayName": {
          title: "显示名称",
        },
        "@RequestType": {
          title: "请求类型",
        },
        "@DataTypeCode": {
          title: "数据类型",
          component: {
            name: "el-select",
            options: [
              {
                value: "string",
                label: "string (字符串)",
              },
              {
                value: "int",
                label: "int (整数)",
              },
              {
                value: "float",
                label: "float (浮点数)",
              },
              {
                value: "bool",
                label: "bool (逻辑值)",
              },
              {
                value: "uint",
                label: "uint",
              },
              {
                value: "short",
                label: "short",
              },
              {
                value: "ushort",
                label: "ushort",
              },
              {
                value: "long",
                label: "long",
              },
              {
                value: "ulong",
                label: "ulong",
              },
              {
                value: "double",
                label: "double",
              },
              {
                value: "byte",
                label: "byte",
              },
              {
                value: "sbyte",
                label: "sbyte",
              },
            ],
            span: 12,
          },
        },
        "@RequestInterval": {
          title: "采集周期(ms)",
        },
        "@Length": {
          title: "长度",
        },
        "@Description": {
          title: "说明",
        },
      },
      addRules: {
        "@Name": [
          {
            required: true,
            type: "string",
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        "@Address": [
          {
            required: true,
            type: "string",
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        "@DisplayName": [
          {
            required: true,
            type: "string",
            message: "请输入显示名称",
            trigger: "blur",
          },
        ],
        "@RequestType": [
          {
            required: true,
            type: "string",
            message: "请输入请求类型",
            trigger: "blur",
          },
        ],
        "@DataTypeCode": [
          {
            required: true,
            type: "string",
            message: "请选择类型",
            trigger: "blur",
          },
        ],
        "@RequestInterval": [
          { required: true, message: "请输入采集周期(ms)", trigger: "blur" },
        ],
      },
      serverData: {},
      devicePointData: [],
      nodeCodeData: [],
      workingSubclasses: [],
      dialogVisible: false,
      deviceActiveStatus: "0",
      defaultDeviceName: "",
      defaultFormData: {},
      deviceData: [],
      deviceConfigure: {},
    };
  },
  watch: {
    server: {
      handler(val) {
        this.serverData = val;
        this.getDevice();
        if (val.id) {
          this.getDeviceStatus();
        }
      },
      immediate: true,
    },
  },
  methods: {
    addRow() {
      this.$refs.d2Crud.showDialog({
        mode: "add",
      });
    },
    handleFormDataChange({ key }) {
      if (key === "workingSubclass") {
        const { workingSubclass } = this.$refs.d2Crud.formData;
        this.getCodesByWorkingSubclass(workingSubclass);
        this.$refs.d2Crud.$forceUpdate();
      }
    },
    handleCellDataChange({ rowIndex, row, key, value }) {
      let type = undefined;
      if (row["@DataTypeCode"][0] === "u") {
        type = split(row["@DataTypeCode"], "")
        type[1] = toUpper(type[0] + type[1])
        type = type.join("")
      } else {
        type = capitalize(row["@DataTypeCode"])
      }
      if (key === "@Value") { 
        this.$api.SET_DEVICE_POINT_VALUE(
          "http://" + this.serverData.url + ":" + this.serverData.port,
          this.deviceData[this.deviceActiveStatus].name,
          row["@Address"],
          type,
          value
        ).then(res=>{
          if(!res.IsSuccess){
            this.$message({
              message: res.Message,
              type: "error",
            });
          }
        })
      }
      this.devicePointData[rowIndex] = row;
    },
    bandingNodeTemplate({ index }) {
      this.$refs.d2Crud.showDialog({
        mode: "edit",
        rowIndex: index,
        template: {
          workingSubclass: {
            title: "工序编码",
            value: "",
            component: {
              name: "el-select",
              options: this.workingSubclasses,
              span: 12,
            },
          },
          nodeCode: {
            title: "节点名称",
            value: "",
            component: {
              name: "el-select",
              options: this.nodeCodeData,
              span: 12,
            },
          },
        },
      });
    },
    handleDialogCancel(done) {
      this.$message({
        message: "用户取消保存",
        type: "warning",
      });
      done();
    },
    handleCommand(command) {
      switch (command) {
        case "add":
          this.addDevice()
          break;
        case "del":
          this.delDevice()
          break;
      }
    },
    async getCodesByWorkingSubclass(workingSubclass) {
      try {
        const nodeCode = await this.$api.QUERY_CODES(workingSubclass)
        let nodeCodeData = []
        each(nodeCode, (o) => {
          nodeCodeData.push({ value: o, label: o })
        });
        this.nodeCodeData = nodeCodeData
        this.$nextTick(() => {
          this.$refs.d2Crud.handleFormTemplateMode(
            "nodeCode"
          ).component.options = this.nodeCodeData
          this.$refs.d2Crud.$forceUpdate()
        });
      } catch (e) {
        console.log(e);
      }
    },
    async getworkingSubclasses() {
      try {
        const workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES();
        const workingSubclassesData = []
        each(workingSubclasses, (o) => {
          workingSubclassesData.push({ value: o, label: o })
        });
        this.workingSubclasses = workingSubclassesData
      } catch (e) {
        console.log(e);
      }
    },
    async getDevice() {
      try {
        this.deviceData = await this.$api.GET_DEVICE(this.serverData.id)
        if (this.deviceData.length > 0) {
          this.getDeviceConfigure(this.deviceActiveStatus)
        } else {
          this.devicePointData = []; // 如果没有设备，防止显示上一次打开的设备数据先清空数据
          this.defaultDeviceName = ""
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getDeviceConfigure(e) {
      this.deviceActiveStatus = e
      this.devicePointData = [] // 当切换设备时把保存configure、point的数据清空
      this.defaultDeviceName = ""
      clearInterval(this.timing) //当切换设备时先关闭定时器，防止一直执行上一设备的定时器
      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.DeviceTypeName !== undefined) {
          this.defaultDeviceName = conf.DeviceTypeName
          this.defaultFormData = conf
        }
        // 获取point信息
        let devicePointAddress = []
        if (conf.RequestNode !== undefined && conf.RequestNode.length > 0) {
          this.devicePointData = each(conf.RequestNode, (o, i) => {
            let type = undefined;
            if (o["@DataTypeCode"][0] === "u") {
              type = split(o["@DataTypeCode"], "")
              type[1] = toUpper(type[0] + type[1])
              type = type.join("")
            } else {
              type = capitalize(o["@DataTypeCode"])
            }
            devicePointAddress.push({
              key: i,
              value: o["@Address"],
              type:
                o["@DataTypeCode"][0] === "u"
                  ? replace(o["@DataTypeCode"])
                  : capitalize(o["@DataTypeCode"]),
            })
            assign(o, {
              id: i + 1,
              showBindButton: true,
              showSendButton: true,
              showCopyButton: true,
              showRemoveButton: true,
            });
          });
          if (devicePointAddress.length > 0) {
            this.getDevicePoint(devicePointAddress);
          }
        }
      }
    },
    addDevice() {
      const that = this;
      this.$prompt("输入设备名称", "新加设备", {
        confirmButtonText: "确定",
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: "请输入设备名称",
      }).then(({ value }) => {
        this.$api.ADD_DEVICE({
          action: "add_device",
          name: value,
          server_id: this.serverData.id,
        });
        that.getDevice();
        this.$message({
          message: "新加设备成功",
          type: "success",
        });
      });
    },
    async delDevice() {
      const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(
        "http://" + this.serverData.url + ":" + this.serverData.port,
      );
      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(
          "http://" + this.serverData.url + ":" + this.serverData.port,
          { data: deviceConfigure.Content }
        );
        await this.$api.DEL_DEVICE({
          action: "remove_device",
          id: this.deviceData[this.deviceActiveStatus].id,
        });
        this.$message({
          message: "删除设备成功",
          type: "success",
        });
        this.getDevice();
      } catch (e) {
        console.log(e);
      }
    },
    async addDevicePoint(row, done) {
      this.formOptions.saveLoading = true;
      if (!this.$refs.deviceConfigure.defaultDeviceTypeNameValue) {
        this.$message({
          message: "请先应用设备配置",
          type: "error",
        });
        done(false);
      } else {
        if (row["@DataTypeCode"] === "string" && !row["@Length"]) {
          this.$message({
            message: "数据类型为string，长度不能为空",
            type: "error",
          });
          this.formOptions.saveLoading = false;
          return false;
        }
        assign(row, {
          id: this.devicePointData.length + 1,
          showBindButton: true,
          showCopyButton: true,
          showRemoveButton: true,
          showSendButton: true,
        });
        this.devicePointData.push(row);
        done();
      }
      this.formOptions.saveLoading = false;
    },
    async delDevicePoint({ index, row }, done) {
      this.$delete(this.devicePointData, index);
      done();
    },
    getDevicePoint(devicePointAddress) {
      clearInterval(this.timing)
      this.timing = setInterval(() => {
        each(devicePointAddress, async (item) => {
          try {
            this.$api
              .GET_DEVICE_POINT_VALUE(
                "http://" + this.serverData.url + ":" + this.serverData.port,
                this.deviceData[this.deviceActiveStatus].name,
                item.value,
                item.type
              )
              .then((res) => {
                this.$set(
                  this.devicePointData[item.key],
                  "@Value",
                  res.Content
                );
              });
          } catch (e) {
            console.log(e);
          }
        });
      }, 10000);
    },
    async devicePointBandingNode({ index, row }, done) {
      this.$delete(this.devicePointData[index], "@Binding") 
      this.$set(this.devicePointData[index], "@Binding", row.nodeCode)
      done();
    },
    setDeviceConfigureConfirm(){
      this.$confirm('是否要应用该配置信息，更改配置后需要重启改服务才能使服务生效?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.setDeviceConfigure()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消应用服务配置'
          });          
        });
    },
    async setDeviceConfigure() {
      try {
        // 验证表单
        this.$refs.deviceConfigure.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
        });
        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(
          "http://" + this.serverData.url + ":" + this.serverData.port
        );
        const deviceConfigureModelValue = this.$refs.deviceConfigure.deviceConfigureModelValue
        if (this.devicePointData.length > 0) {
          let devicePointData = this.devicePointData 
          devicePointData = each(devicePointData, (item) => {
            if (item["@DataTypeCode"] !== "string") {
              unset(item, "@Length");
            }
            unset(item, "id");
            unset(item, "showBindButton");
            unset(item, "showCopyButton");
            unset(item, "showRemoveButton");
            unset(item, "showSendButton");
            unset(item, "@Value");
            item["@Binding"] = item["@Binding"] || ""
          });
          deviceConfigureModelValue.RequestNode = devicePointData;
        }

        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 = deviceConfigureModelValue;
            }
            return item;
          });
        }

        if (!isExist) {
          deviceNode.push(deviceConfigureModelValue);
        }
        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode;
        await this.$api.SET_HSLSERVER_CONFIGURE(
          "http://" + this.serverData.url + ":" + this.serverData.port,
          { data: deviceConfigure.Content }
        );
        deviceConfigureModelValue.DeviceTypeName =
          this.$refs.deviceConfigure.defaultDeviceTypeNameValue;
        const data = {
          action: "update_device",
          conf: JSON.stringify(deviceConfigureModelValue),
          id: this.deviceData[this.deviceActiveStatus].id,
        };
        this.$api.SET_DEVICE_CONFIGURE(data);
        this.$message({
          message: "操作成功",
          type: "success",
        });
        this.$emit("changeServerConfig", "t");
      } catch (e) {
        console.log(e);
      }
    },
    async getDeviceStatus() {
      const res = await this.$api.GET_SERVER_DEVICE_STATUS(
        "http://" + this.serverData.url + ":" + this.serverData.port
      );
      if (res) {
        this.$emit("changeStatus", "online");
        const deviceStatus = {};
        each(res.Content.__deviceList, (item) => {
          deviceStatus[item.__name] = {
            status: item.__requestEnable,
            name: item.__name,
          };
        });
        each(this.deviceData, (item) => {
          if (deviceStatus[item.name]) {
            item.status = deviceStatus[item.name].status;
          }
        });
      } else {
        this.$emit("changeStatus", false);
      }
    },
    clearTime(){
      clearInterval(this.timing)
      this.timing = null
    }
  },
  mounted() {
    this.getDevice();
    this.getworkingSubclasses();
    this.getDeviceStatus();
  }
};
</script>

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

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

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

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

.menu-header {
  position: relative;
}

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

.header-button {
  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;
}

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

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

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

.device-status-offline {
  background-color: #ccc;
}
</style>