设备点位优化

src/views/module_ems/tpmTag/TpmDeviceList.vue

@@ -0,0 +1,123 @@
+<template>
+    <a-card :bordered="false">
+        <!-- <div class="tree">
+        </div> -->
+        <div>
+            <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
+            <a-tree
+            :expanded-keys="expandedKeys"
+            :auto-expand-parent="autoExpandParent"
+            :tree-data="gData"
+            @expand="onExpand"
+            >
+                <template slot="title" slot-scope="{ title }">
+                    <span v-if="title.indexOf(searchValue) > -1">
+                    {{ title.substr(0, title.indexOf(searchValue)) }}
+                    <span style="color: #f50">{{ searchValue }}</span>
+                    {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+                    </span>
+                    <span v-else>{{ title }}</span>
+                </template>
+            </a-tree>
+        </div>
+    </a-card>
+</template>
+
+<script>
+const x = 3;
+const y = 2;
+const z = 1;
+const gData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0';
+  const tns = _tns || gData;
+
+  const children = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    tns.push({ title: key, key, scopedSlots: { title: 'title' } });
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  const level = _level - 1;
+  children.forEach((key, index) => {
+    tns[index].children = [];
+    return generateData(level, key, tns[index].children);
+  });
+};
+generateData(z);
+
+const dataList = [];
+const generateList = data => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i];
+    const key = node.key;
+    dataList.push({ key, title: key });
+    if (node.children) {
+      generateList(node.children);
+    }
+  }
+};
+generateList(gData);
+
+const getParentKey = (key, tree) => {
+  let parentKey;
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.children) {
+      if (node.children.some(item => item.key === key)) {
+        parentKey = node.key;
+      } else if (getParentKey(key, node.children)) {
+        parentKey = getParentKey(key, node.children);
+      }
+    }
+  }
+  return parentKey;
+};
+
+    export default({
+        components: {
+        },
+        data () {
+            return {
+                expandedKeys: [],
+                searchValue: '',
+                autoExpandParent: true,
+                gData,
+            }
+        },
+        methods: {
+            onExpand(expandedKeys) {
+                this.expandedKeys = expandedKeys;
+                this.autoExpandParent = false;
+            },
+            onChange(e) {
+                const value = e.target.value;
+                console.log(dataList)
+                const expandedKeys = dataList.map(item => {
+                if (item.title.indexOf(value) > -1) {
+                    return getParentKey(item.key, gData);
+                }
+                return null;
+                }).filter((item, i, self) => item && self.indexOf(item) === i);
+                Object.assign(this, {
+                    expandedKeys,
+                    searchValue: value,
+                    autoExpandParent: true,
+                });
+            },
+        },
+    })
+</script>
+
+<style scoped>
+.tree{
+    height: calc(100vh - 185px);
+    width: 100%;
+}
+</style>

src/views/module_ems/tpmTag/index.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="all">
+        <div class="left">
+            <tpm-device-list></tpm-device-list>
+        </div>
+        <div class="right">
+            <tpm-tag-list></tpm-tag-list>
+        </div>
+    </div>
+</template>
+
+<script>
+import TpmTagList from '../tpmTag/TpmTagList.vue';
+import TpmDeviceList from '../tpmTag/TpmDeviceList.vue';
+
+    export default({
+        components: {
+            TpmTagList,
+            TpmDeviceList
+        },
+        data () {
+            return {
+                
+            }
+        }
+    })
+</script>
+
+<style scoped>
+.all{
+    height: calc(100vh - 135px);
+    width: 100%;
+    display: flex;
+}
+.left{
+    height: 100%;
+    width: 20%;
+    /* border: 2px solid red; */
+    margin-right: 10px;
+    margin-left: 5px;
+}
+.right{
+    height: 100%;
+    width: 80%;
+    /* border: 2px solid red; */
+}
+</style>