haojianlong 5 lat temu
rodzic
commit
8fbfad2999

+ 115 - 0
src/components/point/dynamicdata/historyDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog
+    title="本次对应记录"
+    :visible.sync="dialogVisible"
+    width="80%"
+    @close="handleClose"
+    id="historyAction"
+    custom-class="act-history"
+  >
+    <span>提示:可使用Contorl+F 搜索关键字</span>
+    <div>
+      <el-table
+        :data="tableData"
+        :span-method="objectSpanMethod"
+        border
+        style="width: 100%; margin-top: 20px"
+      >
+        <el-table-column prop="id" label="ID" width="180"></el-table-column>
+        <el-table-column prop="name" label="姓名"></el-table-column>
+        <el-table-column prop="amount1" label="数值 1(元)"></el-table-column>
+        <el-table-column prop="amount2" label="数值 2(元)"></el-table-column>
+        <el-table-column prop="amount3" label="数值 3(元)"></el-table-column>
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false, //弹窗显示与隐藏
+      tableData: [
+        {
+          id: "12987122",
+          name: "王小虎",
+          amount1: "234",
+          amount2: "3.2",
+          amount3: 10
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12
+        },
+        {
+          id: "12987124",
+          name: "王小虎",
+          amount1: "324",
+          amount2: "1.9",
+          amount3: 9
+        },
+        {
+          id: "12987125",
+          name: "王小虎",
+          amount1: "621",
+          amount2: "2.2",
+          amount3: 17
+        },
+        {
+          id: "12987126",
+          name: "王小虎",
+          amount1: "539",
+          amount2: "4.1",
+          amount3: 15
+        }
+      ] //数据list
+    };
+  },
+  methods: {
+    showDialog() {
+      this.dialogVisible = true;
+    },
+    handleClose(done) {},
+    objectSpanMethod() {},
+    transform(){
+
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+#historyAction {
+  .act-history.el-dialog {
+    max-height: 70%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .action-item {
+      line-height: 34px;
+      background-color: #f2f2f2;
+      .action-item-left {
+        background-color: #fff;
+        width: 44%;
+        float: left;
+      }
+      .action-item-middle {
+        background-color: #fff;
+        width: 44%;
+        float: left;
+        margin-left: 1%;
+        border-right: 1px solid #ccc;
+      }
+      .action-item-right {
+        background-color: #fff;
+        width: 10%;
+        float: left;
+      }
+      .h-100 {
+        height: calc(100% - 0);
+      }
+    }
+  }
+}
+</style>

+ 3 - 1
src/main.js

@@ -4,12 +4,14 @@ import Vue from 'vue'
 import App from './App'
 import App from './App'
 import router from './router'
 import router from './router'
 import store from './store'
 import store from './store'
-
+import 'element-ui/lib/theme-chalk/base.css';
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import ElementUI from 'element-ui'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'element-ui/lib/theme-chalk/index.css'
 import './framework/style/awesome.less'
 import './framework/style/awesome.less'
 Vue.use(ElementUI, { size: "small", zIndex: 1000 })
 Vue.use(ElementUI, { size: "small", zIndex: 1000 })
 
 
+Vue.component(CollapseTransition.name, CollapseTransition)
 import './framework/style/layout.scss'
 import './framework/style/layout.scss'
 
 
 import '@/assets/style/style.scss'
 import '@/assets/style/style.scss'

+ 11 - 3
src/router/system.js

@@ -9,6 +9,8 @@ import ChangePwd from '@/views/system/pwd/ChangePwd'
 
 
 /**点位部分 */
 /**点位部分 */
 import pointConfig from '@/views/point/config_point'
 import pointConfig from '@/views/point/config_point'
+import dynamicdata from '@/views/point/dynamicdata'
+import addRelation from '@/views/point/dynamicdata/addRelation'
 import editDataSouce from '@/views/point/config_point/edit_origin'
 import editDataSouce from '@/views/point/config_point/edit_origin'
 import pointSteps from '@/views/point/config_point/steps'
 import pointSteps from '@/views/point/config_point/steps'
 
 
@@ -72,9 +74,15 @@ export default [
             {
             {
                 path: 'dynamicdata',
                 path: 'dynamicdata',
                 name: 'dynamicdata',
                 name: 'dynamicdata',
-                component: Dasboard,
+                component: dynamicdata,
                 meta: { keepAlive: false, breadcrumbs: [{ label: '系统集成', path: '/point/pointsetting' }, { label: '动态数据关联' }] }
                 meta: { keepAlive: false, breadcrumbs: [{ label: '系统集成', path: '/point/pointsetting' }, { label: '动态数据关联' }] }
-            }
+            },
+            {
+                path: 'addRelation',
+                name: 'addRelation',
+                component: addRelation,
+                meta: { keepAlive: false, breadcrumbs: [{ label: '系统集成', path: '/point/pointsetting' }, { label: '动态数据关联 / 处理未对应实例对象标识' }] }
+            },
         ]
         ]
     },
     },
     //项目化配置
     //项目化配置
@@ -174,7 +182,7 @@ export default [
                 component: addparts,
                 component: addparts,
                 meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/facility' }, { label: '添加部件' }] },
                 meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/facility' }, { label: '添加部件' }] },
             },
             },
-            
+
             {
             {
                 path: 'facility/addfacility',
                 path: 'facility/addfacility',
                 name: 'dialogDevice',
                 name: 'dialogDevice',

+ 516 - 0
src/views/point/dynamicdata/addRelation/index.vue

@@ -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>

+ 363 - 0
src/views/point/dynamicdata/index.vue

@@ -0,0 +1,363 @@
+<template>
+  <div id="dynamicdata">
+    <div class="text-right">
+      <span style="color:red">注意查收→</span>
+      <el-button size="medium">执行对应结果</el-button>
+      <el-button size="medium" type="primary" @click="toAddRelation">处理未对应实例标识</el-button>
+    </div>
+    <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>
+    <div class="query-area">
+      <el-form ref="form" :model="form" label-width="100px" :inline="true">
+        <el-form-item>
+          <el-input placeholder="请输入设备标识关键字" v-model="form.keywords" class="input-with-select">
+            <el-button slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="数据源">
+          <el-select
+            v-model="form.source"
+            multiple
+            collapse-tags
+            style="margin-left: 10px;"
+            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-item label="数字字典">
+          <el-select
+            v-model="form.dir"
+            multiple
+            collapse-tags
+            style="margin-left: 10px;"
+            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-item label="位置标签">
+          <el-select
+            v-model="form.position"
+            multiple
+            collapse-tags
+            style="margin-left: 10px;"
+            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>
+    <div class="table-area">
+      <el-table :data="tableData" style="width: 100%" height="calc(100% - 0px)" v-show="curType==1">
+        <el-table-column label="设备标识">
+          <el-table-column prop="province" label="设备标识" min-width="10%"></el-table-column>
+          <el-table-column prop="city" label="位置标签" min-width="10%"></el-table-column>
+          <el-table-column prop="address" label="数据源" min-width="15%"></el-table-column>
+        </el-table-column>
+        <el-table-column label="设备实例">
+          <el-table-column prop="province" label="数字字典设备类型" min-width="15%"></el-table-column>
+          <el-table-column prop="city" label="对应的设备实例" min-width="15%"></el-table-column>
+          <el-table-column prop="address" label="实例所在建筑楼层" min-width="15%"></el-table-column>
+          <el-table-column prop="address" label="实例所在业务空间" min-width="20%"></el-table-column>
+        </el-table-column>
+        <el-table-column prop="action" label="操作" min-width="10%">
+          <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-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>
+</template>
+<script>
+import tools from "@/utils/tools";
+import { mapGetters, mapActions } from "vuex";
+export default {
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  data() {
+    return {
+      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-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        }
+      ], //列表数据
+      page: {
+        pageSize: 50,
+        pageSizes: [10, 20, 50, 100],
+        pageNumber: 1,
+        total: 0
+      },
+      form: {} //查询条件
+    };
+  },
+  components: {},
+  created() {},
+  mounted() {},
+  methods: {
+    handleDelete() {},
+    handleSizeChange() {},
+    handleCurrentChange() {},
+    toAddRelation() {
+      this.$router.push({ name: "addRelation" });
+    }
+  }
+};
+</script>
+<style lang="scss">
+#dynamicdata {
+  overflow: hidden;
+  height: 100%;
+  background-color: #fff;
+  padding: 10px;
+  position: relative;
+  .text-right {
+    text-align: right;
+  }
+  .query-item {
+    width: 20%;
+    display: inline-block;
+  }
+  .table-area {
+    width: calc(100% - 2px);
+    height: calc(100% - 190px);
+  }
+  .fr {
+    padding-top: 10px;
+    float: right;
+  }
+}
+</style>