完善sbTree

src/api/sb/modelbom.js

@@ -253,3 +253,19 @@ export function exportSbModelBom (parameter) {
     responseType: 'blob'
   })
 }
+
+/**
+ * page func 设备树
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getSbTreeInfo (parameter) {
+  return axios({
+    url: '/sb/infos/sbTree?id=' + parameter,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}

src/components/WorkTree/WorkTree.vue

@@ -5,17 +5,17 @@
         <div class="condition-node-box">
           <div class="line"></div>
           <div class="deal-node-box" @click="click(list)">
-            <div class="audit-background head-row">
-              {{ list.taskName }}
+            <div class=" head-row" :class="list.type!==1?list.type !== 2 ? list.type !== 3 ? 'child-background':'sb-background': 'spare-background':'part-background' ">
+              {{ list.name }}
             </div>
-            <div class="foot-row">{{ list.approverName }}</div>
+            <div class="foot-row">{{ list.type }}</div>
             <a class="del-node" @click.stop="close(list)">×</a>
           </div>
           <div class="add-btn-box">
             <button type="button" class="add-bar" @click="add(list)">+</button>
           </div>
         </div>
-        <work-tree v-if="list.children" :list="list.children"></work-tree>
+        <work-tree v-if="list.children && list.children.length>0" :list="list.children"></work-tree>
       </div>
     </div>
     <div v-if="list.length == 1" >
@@ -23,17 +23,17 @@
         <div class="condition-node-box">
           <div class="line"></div>
           <div class="deal-node-box" @click="click(item)">
-            <div class="audit-background head-row">
-              {{ item.taskName }}
+            <div class=" head-row" :class="item.type!==1?item.type !== 2 ? item.type !== 3 ? 'child-background':'sb-background': 'spare-background':'part-background' ">
+              {{ item.name }}
             </div>
-            <div class="foot-row">{{ item.approverName }}</div>
+            <div class="foot-row">{{ item.type }}</div>
             <a class="del-node" @click.stop="close(item)">×</a>
           </div>
           <div class="add-btn-box">
             <button type="button" class="add-bar" @click="add(item)">+</button>
           </div>
         </div>
-        <work-tree v-if="item.children" :list="item.children"></work-tree>
+        <work-tree v-if="item.children && item.children.length>0" :list="item.children"></work-tree>
       </div>
     </div>
     <div v-if="list.length > 1" class="flow-child-box">
@@ -49,10 +49,10 @@
               <div class="condition-node-box">
                 <div class="line"></div>
                 <div class="deal-node-box" @click="click(item)">
-                  <div class="head-row" :class=" item.children? 'audit-background' : 'fill-background'">
-                    {{ item.taskName }}
+                  <div class="head-row" :class="item.type!==1?item.type !== 2 ? item.type !== 3 ? 'child-background':'sb-background': 'spare-background':'part-background' ">
+                    {{ item.name }}
                   </div>
-                  <div class="foot-row">{{ item.approverName }}</div>
+                  <div class="foot-row">{{ item.type }}</div>
                   <a class="del-node" @click.stop="close(item)">×</a>
                 </div>
                 <div class="add-btn-box">
@@ -60,7 +60,7 @@
                 </div>
               </div>
             </div>
-            <work-tree v-if="item.children" :list="item.children"></work-tree>
+            <work-tree v-if="item.children && item.children.length>0" :list="item.children"></work-tree>
             <div v-if="index == 0" class="bottom-left-cover-line"></div>
             <div
               v-if="index == list.length - 1"
@@ -117,8 +117,6 @@ export default {
 .wrapper {
   width: 100%;
   position: relative;
-  display: flex;
-  justify-content: center;
 }
 .deal-node-box .del-node {
   transition: all 0.2s ease;
@@ -136,12 +134,18 @@ export default {
   align-items: center;
   justify-content: flex-start;
 }
-.audit-background {
+.sb-background {
   background: linear-gradient(89.96deg, #fa6f32 0.05%, #fb9337 79.83%);
 }
-.fill-background {
+.child-background {
+  background: linear-gradient(89.96deg, #ec0808 0.05%, #ec6409 79.83%);
+}
+.part-background {
   background: linear-gradient(90.04deg, #268bfb -16.37%, #33e1ae 137.34%);
 }
+.spare-background {
+  background: linear-gradient(90.04deg, #5c1ac7 -16.37%, #d11764 137.34%);
+}
 .flow-parent-box {
   justify-content: flex-start;
   align-items: center;

src/config/defaultSettings.js

@@ -19,7 +19,7 @@ export default {
   layout: 'sidemenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
   fixedHeader: false, // sticky header
-  fixSiderbar: false, // sticky siderbar
+  fixSiderbar: true, // sticky siderbar
   autoHideHeader: false, //  auto hide header
   colorWeak: false,
   multiTab: false,

src/views/sb/info/modules/Detail.vue

@@ -236,7 +236,6 @@
         </a-layout-content>
       </a-layout>
     </div>
-    <tree-modal ref="treeModal" @ok="handleOk"></tree-modal>
     <base-form ref="baseModal" @ok="handleOk"/>
     <detail-sb-bom ref="detailSbBomModal" @ok="handleOk"/>
     <detail-sb-check ref="detailSbCheckModal" @ok="handleOk"/>
@@ -250,7 +249,6 @@
 </template>
 
 <script>
-import TreeModal from './SbTreeModal.vue'
 import BaseForm from './BaseForm'
 import DetailList from '@/components/tools/DetailList'
 import RepairApplicationFormTable from '@/views/repair/application-form/modules/RepairApplicationFormTable'
@@ -282,7 +280,6 @@ const DetailListItem = DetailList.Item
 export default {
   name: 'SbInfoDetail',
   components: {
-    TreeModal,
     BaseForm,
     DetailList,
     DetailListItem,
@@ -442,7 +439,7 @@ export default {
       this.$viewer = viewer
     },
     handleViewTree () {
-      const routeUrl = this.$router.resolve({ path: '/tree', query: { parentId: this.model.id, parentName: this.model.name } })
+      const routeUrl = this.$router.resolve({ path: '/tree', query: { id: this.model.id } })
       // let routeUrl = this.$router.resolve(`/share/${96}`)
       window.open(routeUrl.href, '_blank')
     },

src/views/sb/info/modules/SbTreeModal.vue

@@ -1,13 +1,26 @@
 <template>
   <div v-show="visibleTree" class="container">
-
-    <!-- <a-button style="margin: 20px;float:right;" type="primary" @click="handleBack()">返回</a-button> -->
-
     <work-tree :list="list"></work-tree>
+    <div class="direction">
+      <div style="display:flex;">
+        <div class="part-background sphere"></div>&nbsp;
+        <div>设备部位</div>
+      </div>
+      <div style="display:flex;">
+        <div class="spare-background sphere"></div>&nbsp;
+        <div>设备备件</div>
+      </div>
+      <div style="display:flex;">
+        <div class="child-background sphere"></div>&nbsp;
+        <div>子设备</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { getSbTreeInfo } from '@/api/sb/modelbom'
+
 import WorkTree from '@/components/WorkTree/WorkTree.vue'
 export default {
   name: 'SbTreeModel',
@@ -19,46 +32,64 @@ export default {
       visibleTree: true,
       list:
         {
-          taskName: '流程1',
-          approverName: '审计测试人员,test1',
-          children: [
-            {
-              taskName: '流程2',
-              approverName: 'admin,审计局',
-              children: [
-                { taskName: '流程2', approverName: 'admin,审计局' },
-                {
-                  taskName: '流程2',
-                  approverName: 'admin,审计局',
-                  children: [
-                    { taskName: '流程2', approverName: 'admin,审计局' },
-                    { taskName: '流程2', approverName: 'admin,审计局' }
-                  ]
-                }
-              ]
-            },
-            {
-              taskName: '流程2',
-              approverName: 'admin,审计局',
-              children: [
-                {
-                  taskName: '流程2',
-                  approverName: 'admin,审计局',
-                  children: [
-                    { taskName: '流程2', approverName: 'admin,审计局' },
-                    { taskName: '流程2', approverName: 'admin,审计局' }
-                  ]
-                }
-              ]
-            }
-          ]
+
         }
     }
   },
+  created () {
+    this.base()
+  },
   methods: {
-    base (record) {
-      this.visibleTree = true
-      console.log(record)
+    base () {
+      getSbTreeInfo(this.$route.query.id).then(res => {
+        console.log(res)
+        const list = this.formatTreeData(res.data)
+        this.list = list
+        console.log(list)
+      })
+    },
+    formatTreeData (data, type = 3) {
+      const tree = {
+        name: data.name,
+        id: data.id,
+        type: type,
+        children: []
+      }
+      if (data.partInfoList.length > 0) {
+        data.partInfoList.forEach(item => {
+          const children = []
+          if (item.sparePartInfoVOList.length > 0) {
+            item.sparePartInfoVOList.forEach(item1 => {
+              children.push({
+                name: item1.spareName,
+                type: 2,
+                id: item1.id
+              })
+            })
+          }
+          tree.children.push({
+            name: item.name,
+            type: 1,
+            id: item.id,
+            children: children
+          })
+        })
+      }
+      if (data.sbModelSpareBomVOList.length > 0) {
+        data.sbModelSpareBomVOList.forEach(item => {
+          tree.children.push({
+            name: item.spareName,
+            id: item.id,
+            type: 2
+          })
+        })
+      }
+      if (data.subSbTreeVOList.length > 0) {
+        data.subSbTreeVOList.forEach(item => {
+          tree.children.push(this.formatTreeData(item, 4))
+        })
+      }
+      return tree
     },
     handleBack () {
       this.visibleTree = false
@@ -74,7 +105,32 @@ export default {
 .container{
   position: relative;
   width: 100%;
-overflow-x:scroll;
-overflow-y: hidden;
+}
+.direction{
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  top:20px;
+  right: 40px;
+  width: 100px;
+  height: 150px;
+}
+.sphere{
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+.sb-background {
+  background: linear-gradient(89.96deg, #fa6f32 0.05%, #fb9337 79.83%);
+}
+.child-background {
+  background: linear-gradient(89.96deg, #ec0808 0.05%, #ec6409 79.83%);
+}
+.part-background {
+  background: linear-gradient(90.04deg, #268bfb -16.37%, #33e1ae 137.34%);
+}
+.spare-background {
+  background: linear-gradient(90.04deg, #5c1ac7 -16.37%, #d11764 137.34%);
 }
 </style>