ibms/src/components/point/dynamicdata/equipRules.vue

<template>
  <div id="equipRules">
    <!-- 查询条件 -->
    <div class="query-area">
      <el-row>
        <el-col :span="23">
          <el-form ref="form" :model="form" :inline="true">
            <el-row>
              <div class="query-item special">
                <el-input placeholder="请输入设备标识关键字" v-model="form.EquipmentMark" @keyup.enter.native="queryTableData">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="queryTableData"></i>
                </el-input>
              </div>
              <div class="query-item">
                <label style="padding-right:9px">数据源</label>
                <dataSource :Related="null" @change="changeDataSource" :typeName="typeName"></dataSource>
              </div>
              <div class="query-item">
                <dictionary-device @change="changeDictionary" :Related="null" :typeName="typeName"></dictionary-device>
              </div>
              <div class="query-item">
                <label style="padding-right:9px">位置标签</label>
                <locationFlag :Related="null" @change="changeLocationFlag" :typeName="typeName"></locationFlag>
              </div>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="1">
          <el-tooltip class="item" effect="dark" content="填充设备标识与实例对应规则" placement="left">
            <el-button size="small" type="primary" @click="toAddRelation" icon="el-icon-edit-outline" style="float:right;" :disabled="isPending"></el-button>
          </el-tooltip>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="12" style="padding-left:10px;font-size:13px;border-left:2px solid #000;">点位表中出现的所有设备</el-col>
      <el-col :span="12" style="padding-left:10px;font-size:13px;border-left:2px solid #000;">对应物理世界中的设备实例</el-col>
    </el-row>
    <!-- 列表区域 -->
    <div class="table-area">
      <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="{background:'#f7f9fb'}">
        <el-table-column prop="EquipmentMark" label="设备标识" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="LocationFlag" label="位置标签" min-width="200">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.LocationFlag.toString()" placement="top">
              <div class="tool-tip">{{scope.row.LocationFlag.toString()}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="Datasource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="SubTypeName" label="数字字典设备类型" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="EquipLocalName" label="对应的设备实例" show-overflow-tooltip min-width="100" class-name="td-bl"></el-table-column>
        <el-table-column label="实例所在建筑楼层" min-width="100">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.BuildLocalName&&scope.row.FloorLocalName?scope.row.BuildLocalName+'-'+scope.row.FloorLocalName:''"
              placement="top">
              <div class="tool-tip">{{scope.row.BuildLocalName&&scope.row.FloorLocalName?scope.row.BuildLocalName+'-'+scope.row.FloorLocalName:''}}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="RoomLocalName" label="实例所在业务空间" show-overflow-tooltip min-width="200"></el-table-column>
        <el-table-column prop="action" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="清除对应规则" placement="left">
              <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain :disabled="isPending||scope.row.Related=='False'"
                icon="el-icon-delete"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"></el-pagination>
    <!-- 清除对应关系弹窗 -->
    <del-relation-dialog ref="del" @refresh="refresh"></del-relation-dialog>
  </div>
</template>
<script>
import tools from "@/utils/tools";
import { mapGetters, mapActions } from "vuex";
import applyRulesDialog from "@/components/point/dynamicdata/applyRulesDialog";
import delRelationDialog from "@/components/point/dynamicdata/delRelationDialog";
import dictionaryDevice from "@/components/point/dynamicdata/dictionaryDevice";
import dataSource from "@/components/point/dynamicdata/dataSource";
import locationFlag from "@/components/point/dynamicdata/locationFlag";
import equipRules from "@/components/point/dynamicdata/equipRules";
import {
  dynamicClashConfirm,
  dynamicExecute,
  dynamicQuery,
  dynamicQueryPoint,
  dynamicPointTypeList
} from "@/api/scan/request";
export default {
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      sourceList: [], //数据源
      DynEquipList: [], //数据字典设备类型
      LocFlagList: [], //位置标签
      tableData: [], //列表数据
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      form: {
        EquipmentMark: "", //设备标识关键字
        SubTypeName: [], //数据字典设备类型
        LocationFlag: [], //位置标签
        Datasource: [] //数据源
      }, //查询条件
      loading: false, //列表loading
    };
  },
  components: {
    applyRulesDialog,
    delRelationDialog,
    dictionaryDevice,
    dataSource,
    locationFlag
  },
  props: {
    typeName: {},
    isPending: {
      default: false
    }
  },
  created() {
    this.init();
  },
  mounted() { },
  methods: {
    //获取查询条件-提示信息
    init() {
      this.getTableData()
    },
    //清除对应关系
    handleDelete(index, row) {
      this.$refs.del.showDialog(row);
    },
    //改变pagesize
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableData();
    },
    //改变pageno
    handleCurrentChange(pageNo) {
      this.page.pageNumber = pageNo;
      this.getTableData();
    },
    //跳转至填充对应规则
    toAddRelation() {
      this.$router.push({ path: "equipRela", query: { typeName: this.typeName } });
    },
    //获取表格数据
    getTableData() {
      let param = {
        PageNumber: this.page.pageNumber,
        PageSize: this.page.pageSize,
        TypeNameList: [this.typeName]
      };
      //处理查询条件
      if (this.form.EquipmentMark && this.form.EquipmentMark.length) {
        param.EquipmentMark = this.form.EquipmentMark;
      }
      if (this.form.SubTypeName.length) {
        param.SubTypeNameList = this.form.SubTypeName;
      }
      if (this.form.LocationFlag.length) {
        param.LocationFlagList = this.form.LocationFlag;
      }
      if (this.form.Datasource.length) {
        param.DatasourceList = this.form.Datasource;
      }
      this.loading = true;
      // 查询对应关系(P1)
      dynamicQuery(param, res => {
        this.loading = false;
        this.tableData = res.Content;
        this.page.total = res.PageSize < 50 ? res.PageSize : res.Total;
      });
    },
    //刷新列表
    refresh() {
      this.page.pageNumber = 1;
      this.$emit('refresh', this.typeName);
      this.getTableData();
    },
    //数据字典设备类型修改
    changeDictionary(val) {
      this.page.pageNumber = 1;
      this.form.SubTypeName = val;
      this.getTableData();
    },
    //数据源修改
    changeDataSource(val) {
      this.page.pageNumber = 1;
      this.form.Datasource = val;
      this.getTableData();
    },
    //修改位置标签
    changeLocationFlag(val) {
      this.page.pageNumber = 1;
      this.form.LocationFlag = val;
      this.getTableData();
    },
    //查询列表
    queryTableData() {
      this.page.pageNumber = 1;
      this.getTableData();
    }
  },
  watch: {
    projectId() {
      this.init();
    }
  }
};
</script>
<style lang="scss" scoped>
#equipRules {
  height: calc(100% - 54px);
  /deep/ .text-right {
    text-align: right;
  }
  .query-item {
    float: left;
    & + .query-item {
      margin-left: 10px;
    }
  }
  /deep/ .special .el-input__inner {
    width: 220px;
  }
  /deep/ .table-area {
    width: 100%;
    height: calc(100% - 125px);
    td div {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .td-bl {
      border-left: 1px solid #ebeef5;
    }
    .tool-tip {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .fr {
    padding-top: 10px;
    float: right;
  }
}
</style>