update 质量管理设备参数追溯

src/views/QualityManager/retrospect/equipment/parameter-test.vue

@@ -1,19 +1,47 @@
 <template>
   <div class="custom-container">
-    <el-row :gutter="20" style="height: calc(100vh - 150px)">
+    <el-row :gutter="8" style="height: calc(100vh - 150px)">
       <el-col :span="4">
         <aside class="custom-container__common left-side-container">
-          <section class="left-side-container__title">
+          <!-- <section class="left-side-container__title">
             <span v-if="logoUrl" class="logo">
               <img :src="logoUrl" alt="side container logo">
             </span>
             <span class="text-content">
               {{ factoryName }}
             </span>
+          </section> -->
+
+          <section class="title-area">
+            <span class="title-icon">
+              <svg
+                width="100%"
+                height="100%"
+                viewBox="0 0 24 24"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <title>工厂</title>
+                <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -152.000000)" fill-rule="nonzero">
+                    <g id="工厂" transform="translate(376.000000, 152.000000)">
+                      <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
+                      <path
+                        id="形状"
+                        d="M12.25,6.75 L12.25,10.25 L20.75,10.25 L20.75,21.25 L3.25000001,21.25 L3.25000001,6.75 L12.25,6.75 L12.25,6.75 Z M10.75,8.25 L4.75000001,8.25 L4.75000001,19.75 L19.25,19.75 L19.25,11.75 L10.75,11.75 L10.75,8.25 Z M17.5,16.5 L17.5,18 L16,18 L16,16.5 L17.5,16.5 Z M14,16.5 L14,18 L12.5,18 L12.5,16.5 L14,16.5 Z M17.5,13.5 L17.5,15 L16,15 L16,13.5 L17.5,13.5 Z M14,13.5 L14,15 L12.5,15 L12.5,13.5 L14,13.5 Z M8.99999999,10.256 L8.99999999,11.756 L6.49999999,11.756 L6.49999999,10.256 L8.99999999,10.256 Z M9.4755,2.82499999 C10.4715,2.63649998 11.0695,2.739 12.1845,3.291 L12.581,3.49000001 L12.7945,3.58999999 C13.2545,3.79899998 13.532,3.85899998 13.887,3.82849999 L13.9855,3.81850001 L14.1545,3.79249999 L14.2455,3.77650001 C14.8380746,3.66404309 15.3698683,3.34077505 15.7425,2.8665 L15.8205,2.763 L17.0405,3.636 L16.9485,3.76000001 C16.3504031,4.53742507 15.4872916,5.06774928 14.5235,5.25 C13.5275,5.43799999 12.9285,5.3355 11.814,4.7835 L11.4175,4.58500001 C10.781,4.27450001 10.4765,4.20100001 10.024,4.25599999 L9.9315,4.26850001 L9.7545,4.299 C9.16166181,4.41148918 8.62956287,4.73472685 8.25649999,5.20900001 L8.17849999,5.31199999 L6.95899999,4.43800001 L7.0515,4.31449999 C7.64947141,3.53774907 8.51191259,3.00768671 9.47500001,2.82499999 L9.4755,2.82499999 Z"
+                        fill="#0B58FF"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </span>
+            <span class="title-content">合肥新能源工厂</span>
           </section>
 
-          <section class="left-side-container__content">
           <!-- 导航栏 -->
+          <!-- <section class="left-side-container__content">
             <el-tree
               class="custom-tree"
               :icon-class="'el-icon-document-copy'"
@@ -21,6 +49,15 @@
               :props="defaultProps"
               @node-click="handleNodeClick"
             />
+          </section> -->
+
+          <section class="routes-area" v-if="showList">
+            <el-menu @select="handleSelect">
+              <!-- 此处假设了只有一个根节点 -->
+              <template v-for="(menuItem, index) in treeData">
+                <TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
+              </template>
+            </el-menu>
           </section>
         </aside>
       </el-col>
@@ -53,12 +90,15 @@ import HeadForm from '@/components/basicData/HeadForm'
 import testData from './parameter.test.data.js'
 import moment from 'moment'
 import writeXlsxFile from 'write-excel-file'
+import TestMenuItem from './parameter/components/TestMenuItem.vue'
 
 export default {
   name: 'EquipmentRetrospectParameter',
-  components: { BaseTable, HeadForm },
+  components: { BaseTable, HeadForm, TestMenuItem },
   data() {
     return {
+      showList: false,
+      menuListTrue: [],
       factoryName: 'xxx工厂',
       logoUrl: require('../../../../assets/img/cnbm.png'),
       treeData: null,
@@ -117,26 +157,45 @@ export default {
     }
   },
   created() {
+    this.showList = false
+
     this.init()
 
     this.fetchList('eq-tree').then(res => {
       if (res.data) {
         const eqTree = res.data[0] // 只会返回一条工厂数据
         this.factoryName = eqTree.name
-        // 构造tree展示的结构
+        this.treeData = this.preHandleList(eqTree)
-        eqTree.pdlList.forEach(item => {
+        this.showList = true
+      }
+    })
+
+    this.fetchList('work-order').then(res => {
+      if (res.data.records) {
+        this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
+      }
+    })
+  },
+
+  methods: {
+    preHandleList(list) {
+      let result = []
+
+      list.pdlList.forEach(item => {
         const treeItem = {}
-          treeItem.label = item.name
+        treeItem.name = item.name
+        // 整理产线
         if (item.wsList.length) {
           treeItem.children = []
           item.wsList.forEach(workSection => {
             const wsItem = {}
-              wsItem.label = workSection.name
+            wsItem.name = workSection.name
+            // 整理设备
             if (workSection.eqList.length) {
               wsItem.children = []
               workSection.eqList.forEach(eq => {
                 const eqItem = {}
-                  eqItem.label = eq.eqName
+                eqItem.name = eq.eqName
                 eqItem.id = eq.eqId
                 wsItem.children.push(eqItem)
               })
@@ -144,19 +203,13 @@ export default {
             treeItem.children.push(wsItem)
           })
         }
+
         // 产线
-          this.productLineList.push(treeItem)
+        result.push(treeItem)
-        })
-        this.treeData = this.productLineList
-      }
-    })
-    this.fetchList('work-order').then(res => {
-      if (res.data.records) {
-        this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
-      }
       })
+
+      return result
     },
-  methods: {
     init() {
       this.productLineList.splice(0)
       this.headFormConfig[0].selectOptions.splice(0)
@@ -281,6 +334,10 @@ export default {
       if (data.id) {
         this.selectedEquipmentId = data.id
       }
+    },
+    handleSelect(index, indexPath) {
+      const [id, name] = index.split('$--$')
+      this.selectedEquipmentId = id
     }
   }
 }
@@ -295,14 +352,13 @@ export default {
 .custom-container__common {
   background-color: #fff;
   padding: 0;
-  border-radius: 4px;
+  border-radius: 8px;
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
 }
 
 .left-side-container {
   height: calc(100vh - 147px);
   padding: 0;
-  background: #fafafa;
+  // background: #fafafa;
   display: flex;
   flex-direction: column;
 
@@ -320,7 +376,7 @@ export default {
 
   .left-side-container__content {
     flex: 1 1;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 }
 
@@ -356,4 +412,25 @@ export default {
 .custom-tree >>> .is-current .el-tree-node__content {
   background: #fafafa;
 }
+
+.title-area {
+  height: 72px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 24px;
+}
+
+.routes-area {
+  flex: 1;
+  height: 1px;
+  background-color: #fff;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.title-icon {
+  height: 24px;
+  width: 24px;
+}
 </style>

src/views/QualityManager/retrospect/equipment/parameter/components/TestMenuItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
+    <!-- 标题 -->
+    <template slot="title">
+      <!-- <i class="el-icon-menu"></i> -->
+      <i style="line-height: 1;">
+        <svg
+          width="16px"
+          height="16px"
+          viewBox="0 0 16 16"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <title>菜单</title>
+          <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
+              <g id="编组-7" transform="translate(376.000000, 200.000000)">
+                <g id="菜单" transform="translate(0.000000, 2.000000)">
+                  <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                  <path
+                    d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
+                    id="形状"
+                    fill="currentColor"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </i>
+      <span>{{ menuItem.name }}</span>
+    </template>
+
+    <!-- 主体 -->
+    <template v-for="(submenuItem, idx) in menuItem.children">
+      <TestMenuItem :menuItem="submenuItem" :level="level + 1" />
+    </template>
+  </el-submenu>
+
+  <!-- 一级菜单 -->
+  <el-menu-item v-else :index="constructIndex(menuItem)">
+    <!-- <i v-if="level !== 1" class="el-icon-aim"></i>
+      <i v-else class="el-icon-menu"></i> -->
+    <i style="line-height: 1px" v-if="level !== 1">
+      <svg
+        width="8px"
+        height="8px"
+        viewBox="0 0 8 8"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <title>椭圆形</title>
+        <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g
+            id="质量追溯_设备参数追溯"
+            transform="translate(-396.000000, -246.000000)"
+            fill="currentColor"
+            fill-rule="nonzero"
+          >
+            <g id="编组-3" transform="translate(396.000000, 240.000000)">
+              <path
+                d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z"
+                id="椭圆形"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </i>
+    <i style="line-height: 1;" v-else>
+      <svg
+        width="16px"
+        height="16px"
+        viewBox="0 0 16 16"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <title>菜单</title>
+        <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(376.000000, 200.000000)">
+              <g id="菜单" transform="translate(0.000000, 2.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path
+                  d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
+                  id="形状"
+                  fill="currentColor"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </i>
+    <span slot="title">{{ menuItem.name }}</span>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'TestMenuItem',
+  props: {
+    level: {
+      type: Number,
+      default: 1
+    },
+    index: {
+      type: String,
+      default: ''
+    },
+    menuItem: {
+      default: () => ({})
+    },
+    defaultActive: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    constructIndex(menuItem) {
+      return menuItem.id + '$--$' + menuItem.name
+    }
+  }
+}
+</script>
+
+<style scoped></style>

src/views/UserPage/TestTree.vue

@@ -30,8 +30,8 @@
     <section class="routes-area" v-if="showList">
       <el-menu @select="handleSelect">
         <!-- 此处假设了只有一个根节点 -->
-        <template v-for="(menuItem, index) in menuListTrue[0].children">
+        <template v-for="(menuItem, index) in menuListTrue[0].children" >
-          <TestMenuItem :level="1" :menuItem="menuItem" />
+          <TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
         </template>
       </el-menu>
     </section>