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

<template>
  <div id="equipRules">
    <!-- 查询条件 -->
    <div class="query-area">
      <el-row>
        <el-col :span="22">
          <el-form ref="form" :model="form" :inline="true">
            <el-row>
              <div class="query-item special">
                <el-input :placeholder="`请输入${typeName}标识关键字`" 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="2">
          <el-tooltip class="item" effect="dark" :content="`填充${typeName}标识与实例对应规则`" placement="left">
            <el-button size="small" type="primary" @click="toAddRelation" icon="el-icon-edit-outline" style="float:right;margin-left:10px;"
              :disabled="isPending">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="`根据${typeName}标识自动填充实例`" placement="left">
            <el-button size="small" type="primary" @click="autoGroupRela" :icon="autoLoading?'iconfont icon-jiazai':'iconfont icon-zidong'"
              style="float:right;padding:7px 14px;width:44px;margin-left:0;" :disabled="autoLoading"></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;">点位表中出现的所有{{typeName}}</el-col>
      <el-col :span="12" style="padding-left:10px;font-size:13px;border-left:2px solid #000;">对应物理世界中的{{typeName}}实例</el-col>
    </el-row>
    <!-- 列表区域 -->
    <div class="table-area">
      <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
        <el-table-column prop="EquipmentMark" :label="`${typeName}标识`" 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="`数字字典${typeName}类型`" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="ObjectLocalName" :label="`对应的${typeName}实例`" 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:scope.row.BuildLocalName:''"
              placement="top">
              <div class="tool-tip">
                {{scope.row.BuildLocalName?scope.row.FloorLocalName?scope.row.BuildLocalName+'-'+scope.row.FloorLocalName:scope.row.BuildLocalName:''}}
              </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,
  queryEquip, //数据中心设备查询
} from "@/api/scan/request";
export default {
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      sourceList: [], //数据源
      DynEquipList: [], //数据字典设备类型
      LocFlagList: [], //位置标签
      tableData: [], //列表数据
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      form: {
        EquipmentMark: "", //设备标识关键字
        SubTypeName: [], //数据字典设备类型
        LocationFlag: [], //位置标签
        Datasource: [] //数据源
      }, //查询条件
      loading: false, //列表loading
      autoLoading: false, //自动对应实例
    };
  },
  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.SubTypeCodeList = 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 => {
        let dyData = res.Content;
        let tempArr = dyData.map(t => {
          if (t.Related == 'True') {
            t.EquipID = t.TypeCode + t.ProjectId + t.ObjectID;
            return t.EquipID;
          }
          return undefined;
        }).filter(item => item);
        if (tempArr.length) {
          queryEquip({
            PageSize: this.page.pageSize,
            Filters: `EquipID in ${JSON.stringify(tempArr)}`,
            Cascade: [{ Name: "zoneSpaceInBase" }, { Name: 'building' }, { Name: 'floor' }]
          }, response => {
            let Data = response.Content;
            dyData.forEach(item => {
              Data.forEach(t => {
                if (t.EquipID == item.EquipID) {
                  item.ObjectLocalName = t.EquipLocalName;
                  item.FloorLocalName = t.Floor ? t.Floor.FloorLocalName : '';
                  item.BuildLocalName = t.Building ? t.Building.BuildLocalName : '';
                  item.RoomLocalName = '';
                  if (t.ZoneSpaceBaseIn) {
                    t.ZoneSpaceBaseIn.forEach(it => {
                      item.RoomLocalName += it.RoomLocalName + ',';
                    })
                    item.RoomLocalName = item.RoomLocalName.substring(0, item.RoomLocalName.length - 1);
                  }
                }
              })
            })
            this.loading = false;
            this.tableData = dyData;
          })
        } else {
            this.loading = false;
            this.tableData = dyData;
        }
        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();
    },
    //自动对应实例
    autoGroupRela() {
      this.$emit('autoGroupRela', 'equip');
    }
  },
  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% - 71px);
    margin-bottom: 10px;
    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;
    }
  }
}
</style>