From 865698a9be03f8e4b1b5278e2fc505c8920ef9c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’>
Date: Fri, 5 Jul 2024 16:33:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Breadcrumb/index.vue           | 28 ++++++
 src/layout/components/Navbar.vue              | 21 ++++-
 src/layout/components/TagsView/index.vue      | 59 +++++++-----
 src/layout/index.vue                          | 23 ++---
 src/views/produce/workOrder/add-or-updata.vue | 90 ++++++++++---------
 5 files changed, 141 insertions(+), 80 deletions(-)

diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 978c630..38eed5f 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -18,7 +18,35 @@ export default {
       levelList: null
     }
   },
+  computed: {
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
+        return true
+      } else {
+        return false
+      }
+    },
+  },
   watch: {
+    // changeColor(val) {
+    //   if (val == true) {
+    //     var tag = document.getElementsByClassName("breadcrumb-container")
+    //     console.log('tag', tag)
+    //     // for (let i in tag) {
+    //       tag[i].style.color = 'rgba(255, 255, 255, 0.45)'
+    //       // tag[i].classList.remove("default")
+    //     // }
+    //     // console.log('this.$refs.scrollContainer', this.$refs.tag);
+    //   } else {
+    //     var tag = document.getElementsByClassName("breadcrumb-container")
+    //     console.log('tag', tag)
+    //     for (let i in tag) {
+    //       tag[i].style.color = ''
+    //       // tag[i].classList.remove("default")
+    //     }
+    //     // this.$refs.mainContainer.style.backgroundColor = ''
+    //   }
+    // },
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
       if (route.path.startsWith('/redirect/')) {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 08d2a83..7b9f536 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div ref="navbar" class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
       @toggleClick="toggleSideBar" />
 
@@ -41,6 +41,13 @@ export default {
       'nickname',
       'device'
     ]),
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
+        return true
+      } else {
+        return false
+      }
+    },
     setting: {
       get() {
         return this.$store.state.settings.showSettings
@@ -58,6 +65,18 @@ export default {
       }
     }
   },
+  watch: {
+    // changeColor(val) {
+    //   if (val == true) {
+    //     // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
+    //     this.$refs.navbar.style.backgroundColor = 'rgba(0, 21, 41, 1)'
+    //     this.$refs.navbar.style.boxShadow = '0px 1px 8px 0px rgba(0,131,255,0.35)'
+    //   } else {
+    //     this.$refs.navbar.style.backgroundColor = ''
+    //     this.$refs.navbar.style.boxShadow = ''
+    //   }
+    // },
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 9d772a6..4b2cbac 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -56,23 +56,26 @@ export default {
   },
   watch: {
     changeColor(val) {
-      // if (val == true) {
-      //   this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
-      //   var tag = document.getElementsByClassName("tags-view-item")
-      //   console.log('tag', tag)
-      //   for (let i in tag) {
-      //     tag[i].classList.add("changeColor")
-      //     // tag[i].classList.remove("default")
-      //   }
-      //   console.log('this.$refs.scrollContainer', this.$refs.tag);
-      // } else {
-      //   this.$refs.tagsViewContainer.style.backgroundColor = ''
-      //   var tag = document.getElementsByClassName("tags-view-item")
-      //   for (let i in tag) {
-      //     // tag[i].classList.remove("changeColor")
-      //     // tag[i].classList.add("default")
-      //   }
-      // }
+      if (val == true) {
+        console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
+        this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
+        this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
+        var tag = document.getElementsByClassName("tags-view-item")
+        console.log('tag', tag)
+        for (let i in tag) {
+          tag[i].classList.add("changeColor")
+          // tag[i].classList.remove("default")
+        }
+        console.log('this.$refs.scrollContainer', this.$refs.tag);
+      } else {
+        this.$refs.tagsViewContainer.style.backgroundColor = ''
+        this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
+        var tag = document.getElementsByClassName("tags-view-item")
+        for (let i in tag) {
+          tag[i].classList.remove("changeColor")
+          // tag[i].classList.add("default")
+        }
+      }
     },
     $route() {
       this.addTags()
@@ -96,11 +99,23 @@ export default {
       return route.path === this.$route.path
     },
     activeStyle(tag) {
-      if (!this.isActive(tag)) return {};
-      return {
-        "background-color": this.theme,
-        "border-color": this.theme
-      };
+      if (this.changeColor) {
+        if (!this.isActive(tag)) return {
+          "background-color": 'rgba(0, 59, 115, 1)',
+          "border-color": 'rgba(0, 59, 115, 1)',
+          "color": 'rgba(255, 255, 255, 1)'
+        };
+        return {
+          "background-color": this.theme,
+          "border-color": this.theme
+        };
+      } else {
+        if (!this.isActive(tag)) return {};
+        return {
+          "background-color": this.theme,
+          "border-color": this.theme
+        };
+      }
     },
     isAffix(tag) {
       return tag.meta && tag.meta.affix
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7cba05c..2ae12e3 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,7 +2,7 @@
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    <div ref="mainContainer" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
         <tags-view v-if="needTagsView" />
@@ -59,19 +59,14 @@ export default {
     }
   },
   watch: {
-    // changeColor(val) {
-    //   if (val == true) {
-    //     var tag = document.getElementsByClassName("main-container")
-    //     console.log('tag', tag);
-    //     tag.style.backgroundColor = 'rgba(0, 21, 41, 1)'
-    //   } else {
-    //     var tag = document.getElementsByClassName("main-container")
-    //     // for (let i in tag) {
-    //     tag.style.backgroundColor = ''
-    //       // tag[i].classList.add("default")
-    //     // }
-    //   }
-    // },
+    changeColor(val) {
+      if (val == true) {
+        console.log('this.$refs.mainContainer', this.$refs.mainContainer);
+        this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
+      } else {
+        this.$refs.mainContainer.style.backgroundColor = ''
+      }
+    },
   },
   methods: {
     handleClickOutside() {
diff --git a/src/views/produce/workOrder/add-or-updata.vue b/src/views/produce/workOrder/add-or-updata.vue
index ae73c5e..d32a01d 100644
--- a/src/views/produce/workOrder/add-or-updata.vue
+++ b/src/views/produce/workOrder/add-or-updata.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-07-05 09:31:40
+ * @LastEditTime: 2024-07-05 15:16:01
  * @LastEditors: zhp
  * @Description:
 -->
@@ -78,49 +78,51 @@
             dataForm.endDate[2] : '' }}</p>
         </el-col>
       </el-row>
-      <div style="width: 100%; padding: 0 32px">
-        <el-divider style="margin: 0"></el-divider>
+      <div v-loading="loading">
+        <div style="width: 100%; padding: 0 32px">
+          <el-divider style="margin: 0"></el-divider>
+        </div>
+        <el-row :gutter="0" style="margin: 20px 32px">
+          <el-col :span="8">
+            <div>
+              <small-title slot="title" :no-padding="true">
+                产品良率
+              </small-title>
+              <div ref="pie" :style="{ height: '40vh', width: '100%' }" />
+            </div>
+          </el-col>
+          <el-col :span="16">
+            <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
+              <small-title slot="title" :no-padding="true">
+                待制品分布
+              </small-title>
+              <div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
+            </div>
+          </el-col>
+        </el-row>
+        <div style="width: 100%; padding: 0 32px">
+          <el-divider style="margin: 0"></el-divider>
+        </div>
+        <el-row :gutter="0" style="margin: 20px 32px">
+          <el-col :span="8">
+            <div>
+              <small-title slot="title" :no-padding="true">
+                生产明细
+              </small-title>
+              <div ref="bar" :style="{ height: '40vh', width: '100%' }" />
+            </div>
+          </el-col>
+          <el-col :span="16">
+            <div v-show="dataForm.orderStatus === 2"
+              style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
+              <small-title slot="title" :no-padding="true">
+                历史趋势
+              </small-title>
+              <div ref="line" :style="{ height: '40vh', width: '50vw' }" />
+            </div>
+          </el-col>
+        </el-row>
       </div>
-      <el-row :gutter="0" style="margin: 20px 32px">
-        <el-col :span="8">
-          <div>
-            <small-title slot="title" :no-padding="true">
-              产品良率
-            </small-title>
-            <div ref="pie" :style="{ height: '40vh', width: '100%' }" />
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
-            <small-title slot="title" :no-padding="true">
-              待制品分布
-            </small-title>
-            <div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
-          </div>
-        </el-col>
-      </el-row>
-      <div style="width: 100%; padding: 0 32px">
-        <el-divider style="margin: 0"></el-divider>
-      </div>
-      <el-row :gutter="0" style="margin: 20px 32px">
-        <el-col :span="8">
-          <div>
-            <small-title slot="title" :no-padding="true">
-              生产明细
-            </small-title>
-            <div ref="bar" :style="{ height: '40vh', width: '100%' }" />
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <div v-show="dataForm.orderStatus === 2"
-            style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
-            <small-title slot="title" :no-padding="true">
-              历史趋势
-            </small-title>
-            <div ref="line" :style="{ height: '40vh', width: '50vw' }" />
-          </div>
-        </el-col>
-      </el-row>
     </div>
   </el-drawer>
 
@@ -154,6 +156,7 @@ export default {
       barChart: null,
       equipmentLineChart: null,
       visible: false,
+      loading:true,
       dataForm: {},
       colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
     }
@@ -206,6 +209,7 @@ export default {
       if (id) {
         getWorkOrderDetail(id).then(res => {
           if (res.code === 0) {
+            this.loading = false
             this.dataForm = res.data.prodWorkOrderDO
             this.buildChart(this.dataForm)
             // 在制品