123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <el-dialog title="本次对应记录" :visible.sync="dialogVisible" width="70%" @close="handleClose" id="historyAction" custom-class="act-history">
- <span>提示:可使用Contorl+F 搜索关键字</span>
- <div>
- <el-table :data="tableData" style="width: 100%;" :show-header="showheader" height="400px">
- <el-table-column>
- <el-table-column label="数据源" align="right">
- <template slot-scope="scope">
- <div v-for="t in scope.row.leftList" :key="t.id">
- <el-tooltip :content="t.Datasource" placement="top">
- <div>{{t.Datasource}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="位置标签" align="right">
- <template slot-scope="scope">
- <div v-for="t in scope.row.leftList" :key="t.id">
- <el-tooltip :content="t.LocationFlag.toString()" placement="top">
- <div>{{t.LocationFlag.toString()}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="设备标识" width="200px" class-name="bgf5" align="right">
- <template slot-scope="scope">
- <div v-for="t in scope.row.leftList" :key="t.id">
- <el-tooltip :content="t.EquipmentMark" placement="top">
- <div>{{t.EquipmentMark}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- </el-table-column>
- <el-table-column>
- <el-table-column label="设备实例名称" width="200px" class-name="bgf5 border-l">
- <template slot-scope="scope">
- <div v-for="t in scope.row.rightList" :key="t.id">
- <el-tooltip :content="t.EquipLocalName" placement="top">
- <div>{{t.EquipLocalName}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="设备实例编码">
- <template slot-scope="scope">
- <div v-for="t in scope.row.rightList" :key="t.id">
- <el-tooltip :content="t.ObjectID" placement="top">
- <div>{{t.ObjectID}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="所在建筑楼层">
- <template slot-scope="scope">
- <div v-for="t in scope.row.rightList" :key="t.id">
- <el-tooltip :content="t.BuildLocalName&&t.FloorLocalName?t.BuildLocalName+'-'+t.FloorLocalName:''" placement="top">
- <div>{{t.BuildLocalName&&t.FloorLocalName?t.BuildLocalName+'-'+t.FloorLocalName:''}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="所在业务空间">
- <template slot-scope="scope">
- <div v-for="t in scope.row.rightList" :key="t.id">
- <el-tooltip :content="t.RoomLocalName" placement="top">
- <div>{{t.RoomLocalName}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- </el-table-column>
- <el-table-column label="操作" width="100px">
- <template slot-scope="scope">
- <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain>清除对应</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </el-dialog>
- </template>
- <script>
- import { dynamicDeleteRelation } from "@/api/scan/request";
- export default {
- data() {
- return {
- dialogVisible: false, //弹窗显示与隐藏
- showheader: false,
- tableData: [] //数据list
- };
- },
- methods: {
- showDialog(data) {
- this.tableData = data;
- this.dialogVisible = true;
- },
- handleClose(done) { },
- //清除关系
- handleDelete(i, t) {
- let param = [];
- let object = {
- Objs: t.rightList,
- Points: t.leftList
- };
- param.push(object);
- dynamicDeleteRelation(param, res => {
- if (res.Result == "success") {
- this.$message.success("清除关联成功");
- this.tableData.splice(i, 1);
- this.$emit("delSuc");
- }
- });
- }
- },
- mounted() { },
- created() { }
- };
- </script>
- <style lang="scss" scoped>
- #historyAction {
- /deep/ .act-history.el-dialog {
- max-height: 60%;
- overflow-y: auto;
- overflow-x: hidden;
- td.bgf5 {
- background-color: #f5f7fa;
- }
- td {
- border-bottom: 1px solid #ccc;
- border-top: 1px solid #ccc;
- div {
- line-height: 34px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
- .border-l {
- border-left: 2px solid #ccc;
- }
- }
- }
- </style>
|