|
@@ -0,0 +1,516 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="addRelation">
|
|
|
|
+ <!-- 按钮区域 -->
|
|
|
|
+ <div class="text-right">
|
|
|
|
+ <el-switch @change="changeType" v-model="isSwitch"></el-switch>AI辅助
|
|
|
|
+ <el-button size="medium" @click="showHistory">本次对应记录 0</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <el-button @click="animate">咚咚咚上</el-button>
|
|
|
|
+ <!-- tab页区域 -->
|
|
|
|
+ <el-tabs v-model="curType">
|
|
|
|
+ <el-tab-pane
|
|
|
|
+ v-for="(item) in typeList"
|
|
|
|
+ :key="item.name"
|
|
|
|
+ :label="item.title"
|
|
|
|
+ :name="item.name"
|
|
|
|
+ ></el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+ <!-- 数据字典设备类型 -->
|
|
|
|
+ <el-form>
|
|
|
|
+ <el-form-item label="数据字典设备类型">
|
|
|
|
+ <el-select v-model="form.source" multiple collapse-tags placeholder="全部" filterable>
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in options"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ ></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ <!-- 列表及查询条件区域 -->
|
|
|
|
+ <div class="table-container clearfix">
|
|
|
|
+ <div class="left-table">
|
|
|
|
+ <h5>未对应的设备标识</h5>
|
|
|
|
+ <!-- 查询条件 -->
|
|
|
|
+ <div class="query-box clearfix">
|
|
|
|
+ <div class="query-item">
|
|
|
|
+ <label>设备标识关键字</label>
|
|
|
|
+ <el-input placeholder="请输入设备标识关键字" v-model="form.keywords" class="input-with-select">
|
|
|
|
+ <el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
|
+ </el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="query-item">
|
|
|
|
+ <label>数据源</label>
|
|
|
|
+ <el-select v-model="form.source" multiple collapse-tags placeholder="全部" filterable>
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in options"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ ></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="query-item">
|
|
|
|
+ <label>位置标签</label>
|
|
|
|
+ <el-select v-model="form.position" multiple collapse-tags placeholder="全部" filterable>
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in options"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ ></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 左侧列表 -->
|
|
|
|
+ <div class="table-box">
|
|
|
|
+ <el-table
|
|
|
|
+ v-show="aaaaaa"
|
|
|
|
+ ref="multipleTable1"
|
|
|
|
+ :data="tableData"
|
|
|
|
+ tooltip-effect="dark"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ height="100%"
|
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
|
+ :row-class-name="'transition-box'"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column label="数据源" align="right">
|
|
|
|
+ <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="name" label="位置标签" align="right"></el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="address"
|
|
|
|
+ label="设备标识"
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
+ align="right"
|
|
|
|
+ width="200"
|
|
|
|
+ class-name="bgf5"
|
|
|
|
+ ></el-table-column>
|
|
|
|
+ <el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <!-- 智能推荐 -->
|
|
|
|
+ <transition name="el-fade-in-linear">
|
|
|
|
+ <div class="AIRecom" v-show="leftAI">
|
|
|
|
+ <div class="l-title">
|
|
|
|
+ 可能对应的设备标识
|
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ v-for="(t,i) in leftRecoList"
|
|
|
|
+ :key="t.id"
|
|
|
|
+ class="l-ai-recom-item ai-recom-item"
|
|
|
|
+ @click="selectAI(i,'l')"
|
|
|
|
+ >
|
|
|
|
+ <p>
|
|
|
|
+ <el-checkbox v-model="t.checked"></el-checkbox>
|
|
|
|
+ <span>{{t.name2}}</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p>{{t.name}}</p>
|
|
|
|
+ <p>{{t.date}}</p>
|
|
|
|
+ <p>{{t.address}}</p>
|
|
|
|
+ <p>{{t.address}}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </transition>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right-table" style="float: right;">
|
|
|
|
+ <h5>未对应的设备实例</h5>
|
|
|
|
+ <!-- 查询条件 -->
|
|
|
|
+ <div class="query-box clearfix">
|
|
|
|
+ <div class="query-item">
|
|
|
|
+ <label>设备实例关键字</label>
|
|
|
|
+ <el-input placeholder="请输入设备实例关键字" v-model="form.keywords" class="input-with-select">
|
|
|
|
+ <el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
|
+ </el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="query-item">
|
|
|
|
+ <label>所在位置</label>
|
|
|
|
+ <el-cascader placeholder="请选择所在位置" :options="options" filterable change-on-select></el-cascader>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 右侧列表 -->
|
|
|
|
+ <div class="table-box">
|
|
|
|
+ <!-- <el-table
|
|
|
|
+ ref="multipleTable2"
|
|
|
|
+ :data="tableData"
|
|
|
|
+ tooltip-effect="dark"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ height="100%"
|
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
|
|
|
|
+ <el-table-column label="设备实例名称" width="200" class-name="bgf5">
|
|
|
|
+ <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="name" label="设备实例编码"></el-table-column>
|
|
|
|
+ <el-table-column prop="name" label="所在业务空间"></el-table-column>
|
|
|
|
+ <el-table-column prop="address" label="所在建筑楼层" show-overflow-tooltip></el-table-column>
|
|
|
|
+ </el-table>-->
|
|
|
|
+ <div>
|
|
|
|
+ <div class="t-head">
|
|
|
|
+ <div class="tr1" style="width:10%;min-width:35px;"></div>
|
|
|
|
+ <div class="tr2" style="width:20%;min-width:200px;">设备实例名称</div>
|
|
|
|
+ <div class="tr3" style="width:20%">设备实例编码</div>
|
|
|
|
+ <div class="tr4" style="width:20%">所在业务空间</div>
|
|
|
|
+ <div class="tr5" style="width:30%">所在建筑楼层</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="t-body">
|
|
|
|
+ <div v-for="t in tableData" :key="t.id">
|
|
|
|
+ <div class="tr1" style="width:10%;min-width:35px;">
|
|
|
|
+ <el-checkbox v-model="t.checked"></el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tr2" style="width:20%;min-width:200px;">{{t.date}}</div>
|
|
|
|
+ <div class="tr3" style="width:20%">{{t.name}}</div>
|
|
|
|
+ <div class="tr4" style="width:20%">{{t.name}}</div>
|
|
|
|
+ <div class="tr5" style="width:30%">{{t.address}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 智能推荐 -->
|
|
|
|
+ <transition name="el-fade-in-linear">
|
|
|
|
+ <div class="AIRecom" v-show="!leftAI">
|
|
|
|
+ <div class="r-title">
|
|
|
|
+ 可能对应的设备实例
|
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ v-for="(t,i) in rightRecoList"
|
|
|
|
+ :key="t.id"
|
|
|
|
+ class="r-ai-recom-item ai-recom-item"
|
|
|
|
+ @click="selectAI(i,'r')"
|
|
|
|
+ >
|
|
|
|
+ <p>
|
|
|
|
+ <el-checkbox v-model="t.checked"></el-checkbox>
|
|
|
|
+ <span>{{t.name2}}</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p>{{t.name}}</p>
|
|
|
|
+ <p>{{t.date}}</p>
|
|
|
|
+ <p>{{t.address}}</p>
|
|
|
|
+ <p>{{t.address}}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </transition>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 历史记录弹窗 -->
|
|
|
|
+ <history-dialog ref="history"></history-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import tools from "@/utils/tools";
|
|
|
|
+import historyDialog from "@/components/point/dynamicdata/historyDialog";
|
|
|
|
+import { mapGetters, mapActions } from "vuex";
|
|
|
|
+export default {
|
|
|
|
+ components: {
|
|
|
|
+ historyDialog
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters("layout", ["projectId"])
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ aaaaaa: true,
|
|
|
|
+ isSwitch: true, //AI辅助
|
|
|
|
+ curType: "1", //当前所在tab页
|
|
|
|
+ typeList: [
|
|
|
|
+ {
|
|
|
|
+ title: "设备类",
|
|
|
|
+ name: "1"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "2类",
|
|
|
|
+ name: "2"
|
|
|
|
+ }
|
|
|
|
+ ], //tab页list
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ value: "选项1",
|
|
|
|
+ label: "黄金糕"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: "选项2",
|
|
|
|
+ label: "双皮奶"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: "选项3",
|
|
|
|
+ label: "蚵仔煎"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: "选项4",
|
|
|
|
+ label: "龙须面"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: "选项5",
|
|
|
|
+ label: "北京烤鸭"
|
|
|
|
+ }
|
|
|
|
+ ], //
|
|
|
|
+ tableData: [
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-02",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-04",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-01",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-02",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-04",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-01",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-08",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-06",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: "2016-05-07",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ multipleSelection: [], //列表数据
|
|
|
|
+ page: {
|
|
|
|
+ pageSize: 50,
|
|
|
|
+ pageSizes: [10, 20, 50, 100],
|
|
|
|
+ pageNumber: 1,
|
|
|
|
+ total: 0
|
|
|
|
+ },
|
|
|
|
+ leftRecoList: [
|
|
|
|
+ {
|
|
|
|
+ id: 1,
|
|
|
|
+ date: "2016-05-03",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ checked: false,
|
|
|
|
+ name2: "99%",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 2,
|
|
|
|
+ date: "2016-05-03",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ checked: false,
|
|
|
|
+ name2: "99%",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 3,
|
|
|
|
+ date: "2016-05-03",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ checked: false,
|
|
|
|
+ name2: "99%",
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ }
|
|
|
|
+ ], //左推荐
|
|
|
|
+ rightRecoList: [
|
|
|
|
+ {
|
|
|
|
+ id: 1,
|
|
|
|
+ date: "2016-05-03",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ name2: "99%",
|
|
|
|
+ checked: false,
|
|
|
|
+ address:
|
|
|
|
+ "上海市普陀区金沙江路 1518 上海市普陀区金沙江路 1518 上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 2,
|
|
|
|
+ date: "2016-05-03",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ name2: "99%",
|
|
|
|
+ checked: false,
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 3,
|
|
|
|
+ date: "2016-05-03",
|
|
|
|
+ name: "王小虎",
|
|
|
|
+ name2: "99%",
|
|
|
|
+ checked: false,
|
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
|
+ }
|
|
|
|
+ ], //右推荐
|
|
|
|
+ leftAI: true, //左右推荐公用-互斥
|
|
|
|
+ form: {} //查询条件
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created() {},
|
|
|
|
+ mounted() {},
|
|
|
|
+ methods: {
|
|
|
|
+ //表格选中事件
|
|
|
|
+ handleSelectionChange() {},
|
|
|
|
+ //切换AI辅助
|
|
|
|
+ changeType() {},
|
|
|
|
+ //选择推荐
|
|
|
|
+ selectAI(i, l) {
|
|
|
|
+ //i 索引 l 左侧AI or 右侧AI
|
|
|
|
+ if (l == "l") {
|
|
|
|
+ this.leftRecoList[i].checked = !this.leftRecoList[i].checked;
|
|
|
|
+ } else {
|
|
|
|
+ this.rightRecoList[i].checked = !this.rightRecoList[i].checked;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //查看本次历史记录
|
|
|
|
+ showHistory() {
|
|
|
|
+ this.$refs.history.showDialog();
|
|
|
|
+ },
|
|
|
|
+ animate() {
|
|
|
|
+ this.leftAI = !this.leftAI;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss">
|
|
|
|
+#addRelation {
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding: 10px 20px 10px 10px;
|
|
|
|
+ .text-right {
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ .table-container {
|
|
|
|
+ height: calc(100% - 250px);
|
|
|
|
+ & > div {
|
|
|
|
+ width: 49.5%;
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ .left-table,
|
|
|
|
+ .right-table {
|
|
|
|
+ height: 100%;
|
|
|
|
+ h5 {
|
|
|
|
+ line-height: 44px;
|
|
|
|
+ padding-left: 5px;
|
|
|
|
+ background-color: #dfe6ec;
|
|
|
|
+ }
|
|
|
|
+ .query-box {
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ .query-item {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 30%;
|
|
|
|
+ margin: 0 5px;
|
|
|
|
+ label {
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ .el-select {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .bgf5 {
|
|
|
|
+ background-color: #f5f7fa;
|
|
|
|
+ }
|
|
|
|
+ .el-table__header-wrapper label.el-checkbox {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ .table-box {
|
|
|
|
+ height: calc(100% - 35px);
|
|
|
|
+ position: relative;
|
|
|
|
+ .AIRecom {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 96%;
|
|
|
|
+ height: 160px;
|
|
|
|
+ bottom: 5px;
|
|
|
|
+ left: 1%;
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
|
+ z-index: 3;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ .r-title {
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ i {
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .l-title {
|
|
|
|
+ text-align: right;
|
|
|
|
+ padding-right: 10px;
|
|
|
|
+ i {
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .ai-recom-item {
|
|
|
|
+ width: 30%;
|
|
|
|
+ height: 126px;
|
|
|
|
+ float: left;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ padding-top: 5px;
|
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
+ p {
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ padding: 0 8px;
|
|
|
|
+ span {
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .ai-recom-item.r-ai-recom-item + .ai-recom-item {
|
|
|
|
+ margin-left: 3%;
|
|
|
|
+ }
|
|
|
|
+ .l-ai-recom-item {
|
|
|
|
+ float: right;
|
|
|
|
+ p {
|
|
|
|
+ text-align: right;
|
|
|
|
+ padding-right: 10px;
|
|
|
|
+ span {
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .ai-recom-item.l-ai-recom-item + .ai-recom-item {
|
|
|
|
+ margin-right: 3%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .alert {
|
|
|
|
+ transition: all 2s;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ::-webkit-scrollbar {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .fr {
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
|
|
+ .clearfix:before,
|
|
|
|
+ .clearfix:after {
|
|
|
|
+ content: "";
|
|
|
|
+ display: block;
|
|
|
|
+ clear: both;
|
|
|
|
+ }
|
|
|
|
+ .clearfix {
|
|
|
|
+ zoom: 1;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|