ECS5 / ECS5.0Web · Files

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="设备类型" name="type">
        <!-- <Device ref="Device" /> -->
        <el-form
          :model="queryConfig"
          ref="queryConfig"
          label-width="110px"
          class="demo-queryConfig"
        >
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="设备类型编码：" prop="">
                <el-input
                  v-model="queryConfig.code"
                  placeholder="请选择设备类型编码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="设备类型名称：" prop="">
                <el-input
                  v-model="queryConfig.name"
                  placeholder="请选择设备类型名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="描述：" prop="">
                <el-input
                  v-model="queryConfig.description"
                  placeholder="请选择描述"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23" class="button-col">
              <el-form-item label="" prop="">
                <el-button
                  icon="el-icon-search"
                  class="T1"
                  @click="btnAction()"
                  type="primary"
                  size="small"
                  >查询</el-button
                >
                <el-button class="T1" size="small" @click="details()"
                  >查询详情</el-button
                >
                <el-button class="T1" size="small" @click="btnAdd()"
                  >新增设备类型</el-button
                >
                <el-button class="T1" size="small" @click="edit()"
                  >编辑设备类型</el-button
                >
                <el-button
                  class="T1"
                  size="small"
                  @click="deleteData()"
                  type="danger"
                  >删除设备类型</el-button
                >
                <!-- <el-button class="T1" @click="goodsTypeModify()" disabled
                >导出</el-button
              > -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="table">
          <el-table
            :data="tableData"
            border
            stripe
            :height="TableHeight"
            @selection-change="handleSelectionChange"
            :header-cell-style="{ color: '#000000' }"
          >
            <el-table-column
              type="selection"
              align="center"
              width="55"
            ></el-table-column>
            <el-table-column prop="id" label="id" width="80"> </el-table-column>
            <el-table-column prop="code" label="设备类型编码">
            </el-table-column>
            <el-table-column prop="name" label="设备类型名"> </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column prop="created" label="创建时间"> </el-table-column>
            <el-table-column prop="createdBy" label="创建人"> </el-table-column>
            <el-table-column prop="updated" label="更新时间"> </el-table-column>
            <el-table-column prop="updatedBy" label="更新人"> </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              style="margin-top: 15px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryConfig.currentPage"
              :page-sizes="[20, 50, 100]"
              :page-size="queryConfig.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="设备类型属性" name="typeProperties">
        <el-form
          :model="queryConfig"
          ref="queryConfig"
          label-width="110px"
          class="demo-queryConfig"
        >
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="设备类型编码：" prop="">
                <el-input
                  v-model="queryConfig.deviceCode"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="设备类型名：" prop="">
                <el-input
                  v-model="queryConfig.deviceName"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="属性编码：" prop="">
                <el-input
                  v-model="queryConfig.equipmentTypePropTemplateCode"
                  placeholder="请选择属性编码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="属性类型：" prop="">
                <el-select
                  v-model="queryConfig.typeId"
                  placeholder="请选择属性类型"
                >
                  <el-option
                    v-for="item in optionsBllResult"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="23" class="button-col">
              <el-form-item label="" prop="">
                <el-button
                  icon="el-icon-search"
                  class="T1"
                  @click="btnAction()"
                  type="primary"
                  >刷新</el-button
                >
                <el-button class="T1" @click="details()">新增明细</el-button>
                <el-button class="T1" @click="details()">编辑明细</el-button>
                <el-button class="T1" @click="details()" type="danger"
                  >删除明细</el-button
                >
                <!-- <el-button class="T1" @click="goodsTypeModify()" disabled
                  >明细导出</el-button
                > -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="table">
          <el-table
            :data="tableDataTwo"
            border
            stripe
            :height="TableHeight"
            @selection-change="handleSelectionChangeTwo"
            :header-cell-style="{ color: '#000000' }"
          >
            <el-table-column
              type="selection"
              align="center"
              width="55"
            ></el-table-column>
            <el-table-column prop="id" label="id"> </el-table-column>
            <el-table-column prop="code" label="属性编码"> </el-table-column>
            <el-table-column prop="name" label="属性名"> </el-table-column>
            <el-table-column prop="propType" label="属性类型">
            </el-table-column>
            <el-table-column prop="dataType" label="数据类型">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="monitorCompareValue" label="监控比较值">
            </el-table-column>
            <el-table-column prop="monitorNormal" label="监控正常输出">
            </el-table-column>
            <el-table-column prop="monitorFailure" label="监控异常输出">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column prop="created" label="创建时间"> </el-table-column>
            <el-table-column prop="createdBy" label="创建人"> </el-table-column>
            <el-table-column prop="updated" label="更新时间"> </el-table-column>
            <el-table-column prop="updatedBy" label="更新人"> </el-table-column>
          </el-table>
        </div>
        <!-- <DeviceAttributes ref="DeviceAttributes"/> -->
      </el-tab-pane>
    </el-tabs>
    <!-- 新增弹框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="20%">
      <el-form label-width="120px">
        <el-row :gutter="25">
          <el-col :span="25">
            <el-form-item label="设备编码">
              <el-input
                v-model="elAddDialog.code"
                placeholder="请输入设备编码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="25">
          <el-col :span="25">
            <el-form-item label="连接名">
              <el-input
                v-model="elAddDialog.connectName"
                placeholder="请输入连接名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="25">
          <el-col :span="25">
            <el-form-item label="IP">
              <el-input
                v-model="elAddDialog.ip"
                placeholder="请输入IP"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="taskAdd()">创 建</el-button>
        <el-button @click="">清 空</el-button>
        <el-button @click="close()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetEquipmentTypes,
  GetEquipmentTypePropTemplates,
  DeleteEquipmentTypes,
} from "@/api/deviceManage/deviceTepeManage";
import Device from "./deviceManage/device.vue";
import DeviceAttributes from "./deviceManage/device.vue";
export default {
  components: {
    Device,
    DeviceAttributes,
  },
  data() {
    return {
      activeName: "type",
      tableData: [],
      tableDataTwo: [],
      //查询条件
      queryConfig: {
        currentPage: 1,
        pageSize: 20,
        code: "",
        name: "",
        description: "",
        //设备属性参数
        deviceCode: "",
        deviceName: "",
        propType: "",
      },
      //新增修改条件
      elAddDialog: {
        code: "",
        name: "",
        equipmentTypeId: 0,
        connectName: "",
        ip: "",
        destinationArea: "",
        description: "",
        disable: false,
      },
      //新增修改备用条件
      elAddDialogTwo: {
        code: "",
        name: "",
        equipmentTypeId: 0,
        connectName: "",
        ip: "",
        destinationArea: "",
        description: "",
        disable: false,
      },
      total: 0,
      form: {
        startTime: this.$moment()
          .subtract(3, "days")
          .format("YYYY-MM-DD 00:00:00"),
        endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
      },
      optionsBllResult: [
        {
          value: 0,
          label: "自身属性",
        },
        {
          value: 1,
          label: "PLC数据地址",
        },
        {
          value: 2,
          label: "PLC监控地址",
        },
      ],
      dialogFormVisible: false,
      multipleSelection: [],
      multipleSelectionTwo: [],
      detailsData: [],
      title: "",
    };
  },
  created() {
    this.getTableList();
  },
  computed: {
    TableHeight() {
      return `calc(100vh - 380px )`;
    },
  },
  methods: {
    btnAction() {
      this.getTableList();
    },
    //表格数据
    getTableList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          code: this.queryConfig.code,
          name: this.queryConfig.name,
          description: this.queryConfig.description,
        },
      };
      this.listLoading = true;
      GetEquipmentTypes(params).then((response) => {
        this.total = response.data.totalCount;
        this.tableData = response.data.data;
        this.listLoading = false;
      });
    },
    //查询详情
    details() {
      if (this.multipleSelection.length == 0) {
        this.$alert("请选择一条数据！", "标题名称", {
          confirmButtonText: "确定",
        });
      } else {
        let parmes;
        this.multipleSelection.forEach((X) => {
          parmes = {
            id: X.id,
            code: X.code,
            name: X.name,
            typeId: X.equipmentTypeId,
            ip: X.ip,
            destinationArea: X.destinationArea,
            requestOrigin: 0,
          };
        });
        GetEquipmentTypePropTemplates(parmes).then((response) => {
          if (response.code == "Success") {
            if (response.data.length == 0) {
            } else {
              this.queryConfig.deviceCode = parmes.code;
              this.queryConfig.deviceName = parmes.name;
              this.tableDataTwo = response.data;
              this.activeName = "typeProperties";
            }
          }
        });
      }
    },
    //新增按钮
    btnAdd() {
      this.title = "新增";
      this.dialogFormVisible = true;
      this.elAddDialog = this.elAddDialogTwo;
    },
    //修改按钮
    edit() {
      this.title = "编辑";
      if (this.multipleSelection.length == 0) {
        this.$alert("请选择一条数据！", "标题名称", {
          confirmButtonText: "确定",
        });
      } else {
        // this.multipleSelection.forEach((x) => {
        //   this.elAddDialog = {
        //     id: x.id,
        //     code: x.code,
        //     name: x.name,
        //     equipmentTypeId: x.equipmentTypeId,
        //     connectName: x.connectName,
        //     ip: x.ip,
        //     destinationArea: x.destinationArea,
        //     description: x.description,
        //     disable: x.disable,
        //   };
        // });
        this.dialogFormVisible = true;
      }
    },
    //新增修改接口
    taskAdd() {
      SaveEquipment(this.elAddDialog).then((response) => {
        if (response.code == "Success") {
          this.$message({
            message: "数据操作成功",
            type: "success",
          });
          this.getTableList();
        }
      });
    },
    //删除按钮
    deleteData() {
      if (this.multipleSelection.length == 0) {
        this.$alert("请选择最少一条数据！", "标题名称", {
          confirmButtonText: "确定",
        });
      } else {
        let prams = [];
        this.multipleSelection.forEach((x) => {
          prams.push(x);
        });
        DeleteEquipmentTypes(prams).then((response) => {
          if (response.code == "Success") {
            this.getTableList();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
      }
    },
    //获取表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelectionChangeTwo(val) {
      this.multipleSelectionTwo = val;
    },
    //分页
    handleSizeChange(val) {
      this.queryConfig.pageSize = val;
      this.queryConfig.currentPage = 1;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.queryConfig.currentPage = val;
      this.getTableList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //禁用字体颜色
    getStatusStyle(status) {
      return {
        color: status === "已禁用" ? "red" : "green", // 根据状态设置字体颜色
      };
    },
    close() {
      this.dialogFormVisible = false;
    },
  },
};
</script>
<style>
/* 修改复选框大小 */
.el-table .el-checkbox {
  transform: scale(1.8) !important; /* 调整大小 */
  margin-top: 5px;
}
.el-row {
  margin-bottom: 5px;
}
.interfacel-content {
  display: flex;
  border-radius: 4px;
  min-height: 46px;
  margin-bottom: 10px;
  align-items: center;
}
.table {
  border: 1px solid #e5e9f2;
}
.T1 {
  border: 1px solid #b3d8ff;
}
.pagination-container {
  text-align: center; /* 使分页组件靠右 */
  margin-top: 20px; /* 添加顶部间距 */
}
.button-col {
  display: flex;
  justify-content: flex-end; /* 按钮靠右对齐 */
}
.custom-input .el-input__inner {
  background-color: #ffeb3b; /* 设置输入框背景颜色为黄色 */
}
</style>