瀏覽代碼

modify space business dialogs

haojianlong 5 年之前
父節點
當前提交
5ba488c07b

+ 4 - 1
src/components/business_space/business/handsontable.vue

@@ -223,7 +223,10 @@ export default {
     getInfors(infos, row) {
       let val = this.hot.colToProp(row.col);
       if (val == "point") {
-        this.$emit("lookEqu", infos);
+        this.$router.push({
+          path: "/ledger/spaceDetail",
+          query: { RoomID: infos.RoomID, zone: this.zoneCode }
+        })
       } else if (val == "RoomQRCode") {
         this.qrcodeUrl = this.main[row.row].RoomQRCode
         if (!!this.qrcodeUrl) {

+ 190 - 0
src/components/business_space/newAddDialogs/addEquipDialog.vue

@@ -0,0 +1,190 @@
+<template>
+  <!-- <div>
+    <div class="search" style="margin-bottom:10px;">
+      <div>
+        <el-input placeholder="输入设备名称或设备本地编码查询进行查询" style="width:300px;float:left;margin-right:10px;" v-model="search.filter" clearable></el-input>
+        <el-button @click="filterBox" plain>查 找</el-button>
+      </div>
+      <div style="margin-top:10px;">
+        <span>所属楼层</span>
+        <el-cascader @change="filterBox" v-model="search.floor" :options="optionsWithDisabled"></el-cascader>
+        <el-checkbox style="margin-left:20px;" @change="filterBox" :checked="search.checkbox" label="只显示在当前业务空间中的设备"></el-checkbox>
+      </div>
+    </div>
+    <el-table ref="multipleTable" :data="tableData" v-loading="isLoading" tooltip-effect="dark" class="data-table border" height="300"
+      style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column width="180" label="设备名称">
+        <template slot-scope="scope">
+          <span>
+            <el-tooltip :content="scope.row.infos.EquipLocalName ||scope.row.infos.EquipName" placement="top">
+              <span>{{scope.row.infos.EquipLocalName || scope.row.infos.EquipName | cutString(15)}}</span>
+            </el-tooltip>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column width="180" label="设备本地编码">
+        <template slot-scope="scope">
+          <span>
+            <el-tooltip :content="scope.row.infos.EquipLocalID || '--'" placement="top">
+              <span>{{scope.row.infos.EquipLocalID || "--" | cutString(15)}}</span>
+            </el-tooltip>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column width="160" label="设备类">
+        <template slot-scope="scope">
+          <span>
+            <span>{{getName(scope.row.category)}}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column width="160" label="已关联其他业务空间">
+        <template slot-scope="scope">
+          <span>
+            <el-tooltip :content="changeArray(scope.row.spaceName)" placement="top">
+              <span>{{changeArray(scope.row.spaceName) | cutString(6)}}</span>
+            </el-tooltip>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button plain @click="lockDetails(scope.row)">设备详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog width="40%" title="设备详情" :visible.sync="innerVisible" append-to-body>
+      <iframe height="400px" width="100%" :src="iframeSrc"></iframe>
+    </el-dialog>
+    <div class="right" v-if="tableData.length">
+      <my-pagination :page="page" @change="pageChange"></my-pagination>
+    </div>
+    <div class="el-dialog__footer">
+      <span class="dialog-footer">
+        <el-button@click="clearBox">取 消</el-button>
+          <el-button type="primary" @click="addReal">确 定</el-button>
+      </span>
+    </div>
+  </div> -->
+  <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"></el-cascader>
+        <el-checkbox style="margin-left:10px;" @change="getTableData" :checked="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 :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="EquipLocalID" :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100"></el-table-column>
+        <el-table-column prop="EquipLocalID" 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="danger" plain icon="el-icon-delete"></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,
+} 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
+      },
+    };
+  },
+  created() {
+  },
+  methods: {
+    // 显示弹窗
+    showDialog() {
+      this.dialogVisible = true
+    },
+    getTableData() { },
+    handleSelectionChange(val) {
+      thi.selections = val;
+    },
+    savaRelation() { },
+    //改变pagesize
+    handleSizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+      this.getTableData();
+    },
+    //改变pageno
+    handleCurrentChange(pageNo) {
+      this.page.pageNumber = pageNo;
+      this.getTableData();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+#addEqDialog {
+  .filters {
+    margin-bottom: 10px;
+    /deep/ .el-input__inner {
+      vertical-align: baseline;
+    }
+  }
+  .table-box {
+    height: 350px;
+  }
+}
+</style>

+ 72 - 0
src/components/business_space/newAddDialogs/addSystemDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" id="addSyDialog">
+    <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 :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="action" label="操作" min-width="100">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="toDetail(scope.$index, scope.row)" type="danger" plain icon="el-icon-delete"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </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>
+export default {
+  data() {
+    return {
+      title: '添加空间内的系统',
+      inSpaceType: '系统',
+      dialogVisible: false,
+      tableData: [],
+      loading: false,
+      headerStyle: {
+        backgroundColor: '#e1e4e5',
+        color: '#2b2b2b',
+        lineHeight: '30px'
+      }, // 列表样式
+      selections: [], // 选中项
+    }
+  },
+  methods: {
+    // 显示
+    showDialog() {
+      this.dialogVisible = true;
+    },
+    // 选中项修改
+    handleSelectionChange(val) {
+      this.selections = val;
+    },
+    // 确认
+    savaRelation() { },
+    // 获取表格数据
+    getTableData() { },
+    // 查看详情
+    toDetail() {
+      this.$message('开发中')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+#addSyDialog {
+  .table-box {
+    height: 350px;
+  }
+}
+</style>

+ 132 - 0
src/components/business_space/newTables/eqToSpaceTable.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="eqInSp">
+    <el-row>
+      <el-button type="primary" @click="add">添加{{inSpaceType}}</el-button>
+      <el-tooltip class="item" effect="dark" :content="`可前往“全部关系总览”中,按坐标计算空间内的${inSpaceType}`" placement="right">
+        <el-button>按空间计算</el-button>
+      </el-tooltip>
+    </el-row>
+    <div class="table-box">
+      <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
+        <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 :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100">
+          <template slot-scope="scope">
+            <div>
+              {{scope.row.EquipCategory.EquipName}}
+            </div>
+          </template>
+        </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 icon="el-icon-delete"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <template slot="empty">
+          <div>
+            可前往“全部关系总览”中,按坐标计算{{typeToTips[type]}}
+          </div>
+        </template>
+      </el-table>
+    </div>
+    <!-- 添加设备弹窗 -->
+    <addEquipDialog ref="addEqDialog"></addEquipDialog>
+  </div>
+</template>
+
+<script>
+import {
+  queryZone
+} from "@/api/scan/request";
+import { mapGetters } from "vuex";
+import addEquipDialog from "@/components/business_space/newAddDialogs/addEquipDialog"
+export default {
+  components: {
+addEquipDialog
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  data() {
+    return {
+      inSpaceType: '设备',
+      headerStyle: {
+        backgroundColor: '#e1e4e5',
+        color: '#2b2b2b',
+        lineHeight: '30px'
+      }, // 列表样式
+      loading: false, // loading
+      tableData: [], //列表数据
+      typeToTips: {
+        equipment: '空间内的设备',
+        equipmentFor: '服务于空间的设备',
+      }
+    };
+  },
+  props: {
+    params: {},
+    type: {}
+  },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    // 删除关系
+    handleDelete() { },
+    // 改变pagesize
+    handleSizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+      this.getTableData();
+    },
+    // 改变pageno
+    handleCurrentChange(pageNo) {
+      this.page.pageNumber = pageNo;
+      this.getTableData();
+    },
+    // 获取列表数据
+    getTableData() {
+      let pa = {
+        data: {
+          Filters: `RoomID="${this.params.RoomID}"`,
+          Cascade: [
+            {
+              Name: this.type,
+              Cascade: [{ Name: 'equipCategory' }]
+            }
+          ]
+        },
+        zone: this.params.zone
+      }
+      queryZone(pa, res => {
+        this.tableData = res.Content[0].Equipment || []
+      })
+    },
+    // 添加设备
+    add() {
+      this.$refs.addEqDialog.showDialog()
+    }
+  },
+  watch: {
+    type() {
+      this.getTableData()
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#eqInSp {
+  height: 100%;
+  .table-box {
+    margin-top: 10px;
+    height: calc(100% - 50px);
+  }
+}
+</style>

+ 107 - 0
src/components/business_space/newTables/syInSpaceTable.vue

@@ -0,0 +1,107 @@
+<template>
+  <div id="eqInSp">
+    <el-row>
+      <el-button type="primary" @click="add">添加{{inSpaceType}}</el-button>
+      <el-tooltip class="item" effect="dark" :content="`可前往“全部关系总览”中,按坐标计算空间内的${inSpaceType}`" placement="right">
+        <el-button>按空间计算</el-button>
+      </el-tooltip>
+    </el-row>
+    <div class="table-box">
+      <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
+        <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="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 icon="el-icon-delete"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <template slot="empty">
+          <div>
+            可前往“全部关系总览”中,按坐标计算{{typeToTips[type]}}
+          </div>
+        </template>
+      </el-table>
+    </div>
+    <addSystemDialog ref="addSyDialog"></addSystemDialog>
+  </div>
+</template>
+
+<script>
+import {
+  queryZone
+} from "@/api/scan/request";
+import { mapGetters } from "vuex";
+import addSystemDialog from "@/components/business_space/newAddDialogs/addSystemDialog";
+export default {
+  components: {
+    addSystemDialog
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  data() {
+    return {
+      inSpaceType: '系统',
+      headerStyle: {
+        backgroundColor: '#e1e4e5',
+        color: '#2b2b2b',
+        lineHeight: '30px'
+      }, // 列表样式
+      loading: false, // loading
+      tableData: [], //列表数据
+      typeToTips: {
+        generalSystem: '空间内的系统',
+      }
+    };
+  },
+  props: {
+    params: {},
+    type: {}
+  },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    // 删除关系
+    handleDelete() { },
+    // 获取列表数据
+    getTableData() {
+      let pa = {
+        data: {
+          Filters: `RoomID="${this.params.RoomID}"`,
+        },
+        zone: this.params.zone
+      }
+      queryZone(pa, res => {
+        this.tableData = res.Content[0].Equipment || []
+      })
+    },
+    // 添加系统
+    add(){
+      this.$refs.addSyDialog.showDialog()
+    }
+  },
+  watch: {
+    type() {
+      this.getTableData()
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#eqInSp {
+  height: 100%;
+  .table-box {
+    margin-top: 10px;
+    height: calc(100% - 50px);
+  }
+}
+</style>

+ 7 - 0
src/router/system.js

@@ -60,6 +60,7 @@ import rentadd from '@/views/ledger/rentlist/rentadd' //竖井清单
 import dataReport from '@/views/ledger/report'
 import auth from '@/views/system/auth'
 import noUser from '@/views/system/nouser'
+import spaceDetail from '@/views/ledger/spacelist/spaceDetail'
 
 /**  关系维护并计算 */
 import maintain from '@/views/relation/maintain'
@@ -293,6 +294,12 @@ export default [
                 meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/facility' }, { label: '业务空间台账' }] }
             },
             {
+                path: 'spaceDetail',
+                name: 'spaceDetail',
+                component: spaceDetail,
+                meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/facility' }, { label: '业务空间台账',path: '/ledger/spacelist' }, {label:'业务空间详情'}] }
+            },
+            {
                 path: 'cenotelist',
                 name: 'cenotelist',
                 component: cenotelist,

+ 150 - 0
src/views/ledger/spacelist/spaceDetail/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="box">
+    <div class="condition">
+      <div class="header">
+        <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
+        <span>{{spaceDetails.RoomLocalName||spaceDetails.RoomName||''}}</span>
+      </div>
+      <el-row class="spaceTypes">
+        <div class="types">
+          <el-tabs v-model="activeTab" type='card'>
+            <template v-for="(item,index) in tabsList">
+              <el-tab-pane :name="item.Code" :key="index" :label="item.Name"></el-tab-pane>
+            </template>
+          </el-tabs>
+        </div>
+        <div class="deleBtn">
+          <el-button size="small">删除业务空间</el-button>
+        </div>
+      </el-row>
+      <div v-if="activeTab=='detail'" style="height:calc(100% - 110px)">
+        <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
+      </div>
+      <!-- 空间内设备列表--服务于空间的设备 -->
+      <eqToSpaceTable v-else-if="activeTab=='equipment' || activeTab=='equipmentFor'" :params="params" :type="activeTab"></eqToSpaceTable>
+      <!-- 空间内系统 -->
+      <syInSpaceTable v-else-if="activeTab=='generalSystem'" :params="params" :type="activeTab"></syInSpaceTable>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex"
+import { queryZone } from '@/api/scan/request'
+import eqToSpaceTable from '@/components/business_space/newTables/eqToSpaceTable'
+import syInSpaceTable from '@/components/business_space/newTables/syInSpaceTable'
+export default {
+  data() {
+    return {
+      params: {}, //参数-包含空间id 分区类型
+      tabsList: [
+        { Code: 'detail', Name: '空间详情' },
+        { Code: 'equipment', Name: '空间内设备' },
+        { Code: 'equipmentFor', Name: '服务于空间的设备' },
+        { Code: 'generalSystem', Name: '空间内系统' },
+      ], //tab页
+      activeTab: 'detail', //当前选中的tab
+      spaceDetails: {}, //空间信息
+      iframeSrc: '', //空间详情iframe
+    }
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId", "userId", "secret"])
+  },
+  components: {
+    eqToSpaceTable,
+    syInSpaceTable
+  },
+  created() {
+    this.params = this.$route.query;
+    this.getSpaceDetails();
+    this.setFrame()
+  },
+  mounted() { },
+  watch: {
+    projectId() { }
+  },
+  methods: {
+    // 返回
+    goBack() {
+      this.$router.push({
+        name: "spacelist",
+        params: { Family: this.params.Family }
+      })
+    },
+    // 查询空间详情
+    getSpaceDetails() {
+      let pa = {
+        data: {
+          Filters: `RoomID="${this.params.RoomID}"`
+        },
+        zone: this.params.zone
+      }
+      queryZone(pa, res => {
+        this.spaceDetails = res.Content[0];
+      })
+    },
+    // 设置iframe
+    setFrame() {
+      this.iframeSrc =
+        `${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.params.RoomID}&type=0&code=${this.params.zone}`;
+    }
+  }
+};
+</script>
+
+<style scoped lang='less'>
+.box {
+  .condition {
+    padding: 10px;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    border: 1px solid #dfe6ec;
+    background: #fff;
+    margin-bottom: 10px;
+    .header {
+      padding-bottom: 10px;
+      span {
+        line-height: 33px;
+        margin-left: 15px;
+      }
+    }
+    .spaceTypes {
+      .types {
+        float: left;
+        width: calc(100% - 200px);
+        /deep/ .el-tabs__item.is-top {
+          border-top: 2px solid transparent;
+          &.is-active {
+            border-top: 2px solid #409eff;
+          }
+        }
+      }
+      .deleBtn {
+        float: left;
+        width: 200px;
+        text-align: right;
+        height: 40px;
+        border-bottom: 1px solid #e4e7ed;
+      }
+    }
+    .main {
+      margin-top: 10px;
+      height: calc(100% - 96px);
+    }
+    .footer {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.el-table th {
+  background-color: #d9d9d9;
+  color: #000;
+}
+</style>
+