123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275 |
- <template>
- <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="addEqDialog">
- <el-row class="filters">
- <el-col :span="9">
- <el-input placeholder="输入设备名称或设备本地编码进行查询" v-model="keycode" clearable @keyup.enter.native="getTableData">
- <i slot="suffix" class="el-input__icon el-icon-search" @click="getTableData"></i>
- </el-input>
- </el-col>
- <el-col :span="15">
- <span style="margin-left:10px;">所属楼层</span>
- <el-cascader @change="getTableData" v-model="floor" :options="options" :props="props"></el-cascader>
- <el-checkbox style="margin-left:10px;" @change="getTableData" v-model="showType" label="只显示在当前业务空间中的设备"></el-checkbox>
- </el-col>
- </el-row>
- <div class="table-box">
- <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable"
- @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55"></el-table-column>
- <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
- <template slot-scope="scope">
- <div>
- {{scope.row.EquipLocalName||scope.row.EquipName||''}}
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="EquipLocalID" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop="EquipCategory.EquipName" :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop="linkOtherSpace" label="已关联其他业务空间" show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop="action" label="操作" min-width="100">
- <template slot-scope="scope">
- <el-button size="mini" @click="toDetail(scope.$index, scope.row)" type="primary" plain>查看详情</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <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>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button size="small" @click="dialogVisible = false">取 消</el-button>
- <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
- </span>
- </el-dialog>
- </template>
- <script>
- import {
- getSpaceEquip,
- buildingQuery, //数据中心-建筑查询
- notEqInSpaceQuery, //没有和当前空间绑定的设备
- notEqForSpaceQuery, //未服务当前空间的设备
- eqInSpaceCreate, //设备所在业务空间--创建关系
- eqForSpaceCreate, //设备服务业务空间--创建关系
- getEqNotInSpace, //空间内没有和空间关联的设备
- getEqNotForSpace, //空间内没有服务空间的设备
- } from "@/api/scan/request";
- import { mapGetters } from "vuex";
- export default {
- components: {
- },
- computed: {
- ...mapGetters("layout", ["projectId"])
- },
- data() {
- return {
- title: "添加设备",
- keycode: '', //输入查询条件
- options: [], //建筑楼层级联
- floor: [], // 选中的建筑楼层
- showType: false, //是否只显示在当前业务空间中的设备
- inSpaceType: '设备',
- dialogVisible: false,
- tableData: [],
- loading: false,
- headerStyle: {
- backgroundColor: '#e1e4e5',
- color: '#2b2b2b',
- lineHeight: '30px'
- }, // 列表样式
- selections: [], // 选中项
- page: {
- pageSize: 50,
- pageSizes: [10, 20, 50, 100],
- pageNumber: 1,
- total: 0
- },
- props: { //自定义字段
- value: "BuildID",
- label: "BuildLocalName",
- children: "Floor"
- },
- };
- },
- props: {
- type: {}, //Equipment--EquipmentFor
- spaceId: {},
- zone: {}, //分区类型
- },
- created() {
- this.getBuilding();
- },
- methods: {
- // 获取项目下建筑
- getBuilding() {
- let pa = {
- Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
- Orders: "BuildLocalName asc",
- }
- buildingQuery(pa, res => {
- this.options = res.Content.map(t => {
- if (t.Floor) {
- t.Floor = t.Floor.map(item => {
- item.BuildID = item.FloorID;
- item.BuildLocalName = item.FloorLocalName;
- return item;
- })
- } else {
- t.Floor = []
- }
- t.Floor.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确楼层' })
- return t;
- })
- this.options.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确楼层' })
- })
- },
- // 显示弹窗
- showDialog() {
- this.dialogVisible = true;
- this.tableData = [];
- this.getTableData();
- },
- // 获取列表数据
- getTableData() {
- let pa = {
- data: {
- Cascade: [{ Name: "equipCategory" }],
- Filters: '',
- PageNumber: this.page.pageNumber,
- PageSize: this.page.pageSize,
- Orders: 'EquipID asc'
- },
- type: this.zone,
- spaceId: this.spaceId
- }
- if (this.floor[0] == 'isNull') {
- pa.data.Filters += `BuildingId isNull`
- } else if (this.floor[0] && this.floor[0] != 'all') {
- pa.data.Filters += `BuildingId='${this.floor[0]}'`
- }
- if (this.floor[1] == 'isNull') {
- pa.data.Filters += `;FloorId isNull`
- } else if (this.floor[1] && this.floor[1] != 'all') {
- pa.data.Filters += `;FloorId='${this.floor[1]}'`
- }
- if (this.keycode != '') {
- pa.data.Filters += `;EquipName contain "${this.keycode}" or EquipLocalName contain "${this.keycode}" or EquipLocalID contain "${this.keycode}"`
- }
- // 删除首尾分号
- pa.data.Filters = pa.data.Filters.replace(/(^;)|(;$)/g, '');
- if (pa.data.Filters == '') {
- delete pa.data.Filters
- }
- console.log(this.showType)
- if (this.showType) {
- if (this.type == "Equipment") {
- // pa.data.Cascade.push({ Name: "zoneSpaceInBase" })
- delete pa.data.Cascade;
- getEqNotInSpace(pa, res => {
- this.getDataSuc(res, 'ZoneSpaceBaseIn')
- })
- } else {
- // pa.data.Cascade.push({ Name: "zoneSpaceForBase" })
- delete pa.data.Cascade;
- getEqNotForSpace(pa, res => {
- this.getDataSuc(res, 'ZoneSpaceBaseFor')
- })
- }
- } else {
- if (this.type == "Equipment") {
- pa.data.Cascade.push({ Name: "zoneSpaceInBase" })
- notEqInSpaceQuery(pa, res => {
- this.getDataSuc(res, 'ZoneSpaceBaseIn')
- })
- } else {
- pa.data.Cascade.push({ Name: "zoneSpaceForBase" })
- notEqForSpaceQuery(pa, res => {
- this.getDataSuc(res, 'ZoneSpaceBaseFor')
- })
- }
- }
- },
- // 获取列表成功回调
- getDataSuc(res, zonespacebase) {
- let response = res.Content.map(t => {
- let otherSpace = [];
- if (t[zonespacebase] && t[zonespacebase].length) {
- t[zonespacebase].map(item => {
- otherSpace.push(item.RoomLocalName || item.RoomName)
- })
- }
- t.linkOtherSpace = otherSpace.join(',');
- return t;
- })
- this.tableData = res.Content;
- this.page.total = res.Total;
- },
- //选中项修改
- handleSelectionChange(val) {
- this.selections = val;
- },
- // 确认 保存关系
- savaRelation() {
- let pa = {
- data: {
- SpaceId: this.spaceId,
- EquipIdList: []
- },
- type: this.zone
- }
- this.selections.map(t => {
- pa.data.EquipIdList.push(t.EquipID)
- })
- if (this.type == "Equipment") {
- eqInSpaceCreate(pa, res => {
- this.successCallback()
- })
- } else {
- eqForSpaceCreate(pa, res => {
- this.successCallback()
- })
- }
- },
- // 关联成功回调
- successCallback() {
- this.$message.success('关联成功');
- this.$emit('refresh');
- this.dialogVisible = false;
- },
- // 改变pagesize
- handleSizeChange(pageSize) {
- this.page.pageSize = pageSize;
- this.getTableData();
- },
- // 改变pageno
- handleCurrentChange(pageNo) {
- this.page.pageNumber = pageNo;
- this.getTableData();
- },
- // 查看详情
- toDetail() {
- this.$message('开发中')
- }
- },
- watch: {
- showType(n) {
- }
- }
- };
- </script>
- <style lang="less" scoped>
- #addEqDialog {
- .filters {
- margin-bottom: 10px;
- /deep/ .el-input__inner {
- vertical-align: baseline;
- }
- }
- .table-box {
- height: 350px;
- }
- }
- </style>
|