diff --git a/src/assets/img/bg_left.svg b/src/assets/img/bg_left.svg
new file mode 100644
index 0000000..57e900b
--- /dev/null
+++ b/src/assets/img/bg_left.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="58px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip1">
+      <path d="M 255 113  C 253.89 113  253 112.11  253 111  L 253 101  C 253 99.89  253.89 99  255 99  L 309 99  C 310.11 99  311 99.89  311 101  L 311 111  C 311 112.11  310.11 113  309 113  " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -253 -99 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="58" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAOCAYAAAB+UA+TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADJmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTVCODU4NzY5ODc4MTFFQzlDREVENjhDQTJDMTU3RjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTVCODU4Nzc5ODc4MTFFQzlDREVENjhDQTJDMTU3RjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNUI4NTg3NDk4NzgxMUVDOUNERUQ2OENBMkMxNTdGOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNUI4NTg3NTk4NzgxMUVDOUNERUQ2OENBMkMxNTdGOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtheM6MAAAJJSURBVEhL3Ze7axVBGEc3xkeMgiYYxSBq1BRJSCkSEIxlULCx1sJKO/8FG7EWxc7Sxs4UaZJCC0mXqBBFBCFqFHyb+DZ6zpqBcXZ2Sev9wWHvZO7O7Jm595ubtqNX7hVkM3yFnzYy6YEl+Fy2qtkF3v+6bFWzG9bA07JVzR7ogpmyVc0+GIJbZauaPjgOl8tWJu19x852cN0KXr/BMsTZBPuhGz7CD4hj/wj0wjtIF2MjnADHeAvvIc56OAPD4PgvIU47XIIj4GI+hDhtcANOgnPdhkoUdRdd7Q2Qk1XsN2yBnKyvvWcn5GQd/wO46u5MKvsLXsEgDEAq69yP4DAcgpzsNLijo5CVVdSrD9okuwhNsoo0ydpWrk7W/hdQJ/sG/I7VyTreJNTKBlHT0rKxqGlZ2VTU/G+yzjUHIVlZhXIJx4z9ufd8X7nat+7vy3/yBVwc+12sNB5VFiH7PdrSfAIXz4rqsZPGxXQO44KmceF8jymPtpyEx4W75a65ekEqxF3cC/Y/gTBgyHY4CD7kLDyDODtgDFygu/AA4nj/aeiEOzAFcbz/ImyDCbgKcTzzb8IBGIdzsJyKrlbSrEZyHuIESc9OJe9DnCDpcyjpRzBOkFQmSPqsIUGyH4Jk+emMRVtW0gTRlpY0ilpdmySdvEnS/iZJq16TpH8/BXWS/gS8AHWSznsdlPS3cEXSeLxY/RzMMp5KGqvfWrDEp5ImVEeLTippnNT3PIdU0ji/VdZ/CNLCY5RaACv1tZV2msfgM5yHimRRFMUf5rMaGf6QPUsAAAAASUVORK5CYII=" x="253px" y="99px" mask="url(#clip1)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/decoration/DecorationFadeOut.vue b/src/components/decoration/DecorationFadeOut.vue
new file mode 100644
index 0000000..a34de4a
--- /dev/null
+++ b/src/components/decoration/DecorationFadeOut.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="title">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang='ts'>
+</script>
+
+<style scoped>
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.title::before {
+  content: '';
+  width: 70px;
+  height: 20px;
+  background: url('@/assets/img/bg_left.svg');
+  background-size: 100% 100%;
+}
+
+.title::after {
+  content: '';
+  width: 70px;
+  height: 20px;
+  background: url('@/assets/img/bg_left.svg');
+  background-size: 100% 100%;
+  transform: rotateY(180deg);
+}
+</style>
diff --git a/src/store/module/offsite.ts b/src/store/module/offsite.ts
index a5b7a92..28da23f 100644
--- a/src/store/module/offsite.ts
+++ b/src/store/module/offsite.ts
@@ -70,12 +70,12 @@ export const Offsite = defineStore(Names.offsite, {
     setcity(val: string[]) {
       this.city = val;
     },
-    setdevitem(val: any) {
+    setdevitem(val: any) {      
       this.itemDevNum.forEach((ele) => {
         val.forEach((res) => {
           if (res.name == ele.type) {
             //网关是否在线
-            ele.status=res.gatewayStatus
+            // ele.status=res.gatewayStatus
             ele.num = res.counts;
           }
         });
diff --git a/src/views/Mechanics/components/devStatusTip.vue b/src/views/Mechanics/components/devStatusTip.vue
index 167430d..a137a3b 100644
--- a/src/views/Mechanics/components/devStatusTip.vue
+++ b/src/views/Mechanics/components/devStatusTip.vue
@@ -9,7 +9,11 @@
 -->
 <template>
   <div style="height: 100%; width: 100%">
-    <h2 class="components-header">{{ title }}</h2>
+    <h2 class="components-header">
+      <DecorationFadeOut>
+        &nbsp;{{ title }}&nbsp;
+      </DecorationFadeOut>
+    </h2>
     <div class="components-content" :key="keynum">
       <swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0"
         direction="vertical" :autoplay="{
@@ -70,6 +74,7 @@
 import { reactive, ref, watch } from "vue";
 import { register } from "swiper/element/bundle";
 import { useI18n } from "vue-i18n";
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
 let { t } = useI18n();
 register();
 const props: any = defineProps({
@@ -152,5 +157,6 @@ swiper-container {
   width: 100%;
   height: 100%;
   display: inline-block !important;
-}</style>
+}
+</style>
   
\ No newline at end of file
diff --git a/src/views/Mechanics/components/gateway.vue b/src/views/Mechanics/components/gateway.vue
index a85d868..bec52f0 100644
--- a/src/views/Mechanics/components/gateway.vue
+++ b/src/views/Mechanics/components/gateway.vue
@@ -10,21 +10,26 @@
 <template>
   <div class="box" :style="{ width: '100%', height: '100%' }">
 
-    <div class="title-box" >
-      <h2>{{ props.title }}</h2>
+    <div class="title-box">
+      <h2>
+        <DecorationFadeOut>
+          &nbsp;{{ props.title }}&nbsp;
+        </DecorationFadeOut>        
+      </h2>
       <div class="colorTip">
-        <div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i> {{t('messages.onLine')}}</div>
+        <div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i>
+          {{ t('messages.onLine') }}</div>
         <div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i>
-          {{t('messages.offline')}}</div>
+          {{ t('messages.offline') }}</div>
       </div>
     </div>
     <ul class="gatewaystatus">
       <li v-for="item in props.data" @click="clickBotton(item)">
         <i :class="JSON.parse(item.gateway)
-            ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
-            : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
+          ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
+          : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
           "></i>
-        <h2 class="titlesize-name">{{ item.title+'车间' }}</h2>
+        <h2 class="titlesize-name">{{ item.title + '车间' }}</h2>
       </li>
     </ul>
   </div>
@@ -36,22 +41,23 @@ import border13 from "@/components/border/Border13.vue";
 import { useI18n } from 'vue-i18n'
 import { useMechanicsStore } from "@/store/module/Mechanics";
 import { useRouter } from "vue-router";
-const router=useRouter()
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+const router = useRouter()
 const store = useMechanicsStore();
-let {t} = useI18n();
+let { t } = useI18n();
 let props = defineProps<{
   title: string;
   data: any
 }>();
-const clickBotton=(item:any)=>{
-    store.changePage(item.index)
-    router.push({
-    name:'Mechanicschild',
-    params:{
-      id:item.index
+const clickBotton = (item: any) => {
+  store.changePage(item.index)
+  router.push({
+    name: 'Mechanicschild',
+    params: {
+      id: item.index
     }
-})
-  }
+  })
+}
 onMounted(() => { });
 </script>
 
diff --git a/src/views/Mechanics/components/ringChart.vue b/src/views/Mechanics/components/ringChart.vue
index e2da1b1..7c7ce41 100644
--- a/src/views/Mechanics/components/ringChart.vue
+++ b/src/views/Mechanics/components/ringChart.vue
@@ -8,13 +8,21 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-    <div class="ring" ref="ringRef"></div>
+    <div class="container">
+        <h2 class="title">
+            <DecorationFadeOut>
+                &nbsp;{{ t('messages.设备状态总览') }}&nbsp;
+            </DecorationFadeOut>
+        </h2>
+        <div class="ring" ref="ringRef"></div>
+    </div>
 </template>
 
 <script setup lang='ts'>
 import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
 const { proxy } = getCurrentInstance() as any;
 import { useI18n } from 'vue-i18n'
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
 let { t } = useI18n();
 let ringRef = ref();
 let ringChart = null;
@@ -25,21 +33,12 @@ const prop = defineProps({
 const init = () => {
     ringChart = proxy.$echarts.init(ringRef.value, 'dark')
     let option = {
-        title: {
-            text: t('messages.设备状态总览'),
-            show: true,
-            textStyle: {
-                color: "#fff",
-                fontSize: 20,
-            },
-            left: 'center'
-        },
         tooltip: {
             trigger: "item",
         },
         legend: {
             type: "scroll",
-            top: "10%",
+            top: "5%",
             left: "center",
             textStyle: {
                 color: "#fff",
@@ -69,7 +68,7 @@ const init = () => {
                 labelLine: {
                     show: true,
                 },
-                top: '20%',
+                top: '10%',
                 data: prop.data,
             },
         ],
@@ -92,8 +91,20 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.ring {
+.container {
     width: 100%;
     height: 100%;
 }
+
+.title {
+    color: #fff;
+    font-size: 20px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.ring {
+    width: 100%;
+    height: calc(100% - 50px);
+}
 </style>
diff --git a/src/views/Mechanics/components/scrollBoard.vue b/src/views/Mechanics/components/scrollBoard.vue
index fa13c34..d03647e 100644
--- a/src/views/Mechanics/components/scrollBoard.vue
+++ b/src/views/Mechanics/components/scrollBoard.vue
@@ -9,14 +9,19 @@
 -->
 <template>
     <div class="box">
-        <div class="box-title">{{t('messages.机械分厂设备列表')}}</div>
+        <div class="box-title">
+            <DecorationFadeOut>
+                &nbsp;{{ t('messages.机械分厂设备列表') }}&nbsp;
+            </DecorationFadeOut>
+        </div>
         <div class="box-body">
-            <dv-scroll-board ref="devList" @click="dvClick" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
-                        width: '100%',
-                        height: '100%',
-                    }" />
-            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
-                virtual-triggering :virtual-ref="triggerRef" />
+            <dv-scroll-board ref="devList" @click="dvClick" :config="prop.config" @mouseover="dvMouseover"
+                @mouseend="dvmouseleave" :style="{
+                    width: '100%',
+                    height: '100%',
+                }" />
+            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
+                popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
         </div>
     </div>
 </template>
@@ -26,7 +31,8 @@ import { getCurrentInstance, onMounted, reactive, ref } from "vue";
 import { devListType } from "@/type/InPlantProducts";
 import { useRouter } from "vue-router"
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+let { t } = useI18n();
 const prop = defineProps({
     config: Object,
 })
@@ -44,7 +50,7 @@ let triggerRef = ref(null)
  * @函数备注: 
  */
 const dvMouseover = (value) => {
-    if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
+    if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
         triggerRef.value = value.toElement
         tipcontent.value = value.toElement.innerText
         visible.value = true
@@ -54,30 +60,30 @@ const dvMouseover = (value) => {
 /**
  * 点击表格事件
  */
-const dvClick = (value) =>{
+const dvClick = (value) => {
     if (value.row) {
-    let id = {
-        '精加车间':1,
-        '机加车间':2,
-        '大件车间':3,
-        '精饰车间':4,
-        '焊接车间':5,
-    }
-    
-    prop.config.rawData.forEach((res,index) => {
-    
-      if (index == value.row[0]-1) {
-        router.push({
-          name: "Mechanicsson",
-          params: {
-            id: id[value.row[2]],
-            dev: res.id
-          },
+        let id = {
+            '精加车间': 1,
+            '机加车间': 2,
+            '大件车间': 3,
+            '精饰车间': 4,
+            '焊接车间': 5,
+        }
+
+        prop.config.rawData.forEach((res, index) => {
+
+            if (index == value.row[0] - 1) {
+                router.push({
+                    name: "Mechanicsson",
+                    params: {
+                        id: id[value.row[2]],
+                        dev: res.id
+                    },
+                });
+            }
         });
-      }
-    });
-  }
-    
+    }
+
 }
 /**
  * @函数功能:  鼠标移出组件方法
@@ -111,7 +117,7 @@ const dvmouseleave = () => {
 }
 
 .box-body {
-    width: 100%;    
+    width: 100%;
     flex: 1;
     display: flex;
     justify-content: space-around;
@@ -123,12 +129,13 @@ const dvmouseleave = () => {
     white-space: pre-wrap;
     text-overflow: none
 }
+
 :deep(.dv-scroll-board .rows .row-item) {
     font-size: 16px;
 }
 </style>
 <style>
-.el-popper.tooltip-class{
+.el-popper.tooltip-class {
     color: #fff !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Mechanics/indexNew.vue b/src/views/Mechanics/indexNew.vue
index fe5527f..6c20129 100644
--- a/src/views/Mechanics/indexNew.vue
+++ b/src/views/Mechanics/indexNew.vue
@@ -14,7 +14,11 @@
           <div style="width: 100%; height: 68%;">
             <border13>
               <div style="width: 100%;height: 100%;">
-                <h2 class="module-header">设备总览</h2>
+                <h2 class="module-header">
+                  <DecorationFadeOut>
+                     &nbsp;设备总览&nbsp;
+                  </DecorationFadeOut>
+                </h2>
                 <div class="module-content">
                   <DevOverview :title="'设备总数'" :value="{ onLine: facTotal.onLine, total: facTotal.total }"></DevOverview>
                   <DevOverview :title="item.name" :value="{ onLine: item.onLine, total: item.total }"
@@ -64,6 +68,7 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
 import header2 from "@/components/headerBox/header2.vue";
 import border13 from '@/components/border/Border13.vue'
 import DevOverview from "./components/DevOverview.vue";
@@ -95,7 +100,7 @@ let scrollBoardConfig = reactive({
   columnWidth: [80, 290, 120, 120, 120, 120],
   align: ['center', 'center', 'center', 'center', 'center', 'center'],
   data: [],
-  rawData:[]
+  rawData: []
 })
 let gatewayData = ref([])
 let devNumTimer: any = null
@@ -165,7 +170,7 @@ async function reqDeviceTotelListMFfun() {
         index + 1,
         item.name,
         item.dept,
-        compare[item.status]? compare[item.status] : '停机',
+        compare[item.status] ? compare[item.status] : '停机',
         item.activation + '%',
         item.failure + '%'
       ]
diff --git a/src/views/Offsite/content/center.vue b/src/views/Offsite/content/center.vue
index 7c5c970..4d579d4 100644
--- a/src/views/Offsite/content/center.vue
+++ b/src/views/Offsite/content/center.vue
@@ -81,6 +81,10 @@ const box = (width: any, height: any) => {
 watch(
   () => store.devlist,
   (newVal, oldVal) => {
+    city1['on'] = 0
+    city1['off'] = 0
+    city2['on'] = 0
+    city2['off'] = 0
     newVal.forEach(res => {
       if (res.city == '广东省') {
         if (res.deviceStatus == "true") {
@@ -108,6 +112,8 @@ watch(
   { deep: true, flush: "post" }
 );
 function setdata(data: any) {
+  city1['num'] = 0
+  city2['num'] = 0
 
   data.forEach(res => {
 
diff --git a/src/views/Offsite/content/right.vue b/src/views/Offsite/content/right.vue
index 3d371ef..d6a1209 100644
--- a/src/views/Offsite/content/right.vue
+++ b/src/views/Offsite/content/right.vue
@@ -81,7 +81,7 @@ watch(
   (newVal, oldVal) => {
     let arr = [];
     newVal.forEach((res) => {
-      if (res.type == t('messages.OnProduct') || res.type == t('messages.OffProduct')) {
+      if (res.type == '在线产品' || res.type == '离线产品') {
         arr.push({ name: res.title, value: res.num });
       }
     });
diff --git a/src/views/Offsite/index.vue b/src/views/Offsite/index.vue
index 3c4ceca..f8848b3 100644
--- a/src/views/Offsite/index.vue
+++ b/src/views/Offsite/index.vue
@@ -78,9 +78,9 @@ let {t} = useI18n();
     if(result.code==200){
       result.data.forEach(res=>{
         if(res.deptId=='true'){
-          res.name=t('messages.OnProduct')
+          res.name='在线产品'
         }else{
-          res.name=t('messages.OffProduct')
+          res.name='离线产品'
         }
         
       })
@@ -98,7 +98,6 @@ let {t} = useI18n();
         city.push(res.city)
       })
       store.setcity([...new Set(city)]);
-      console.log(store.city);
       
     }
   }
@@ -109,17 +108,16 @@ let {t} = useI18n();
       if(data.type=='deviceStatusCountsOfOutPlant'){
         data.msg.forEach(res=>{
         if(res.deptId=='true'){
-          res.name=t('messages.OnProduct')
+          res.name='在线产品'
         }else{
-          res.name=t('messages.OffProduct')
+          res.name='离线产品'
         }
-        store.setdevitem(res)
       })
+        store.setdevitem(data.msg)
         // store.socketMechanicsDatadata(data.msg)
       }
       if(data.type=='DeviceOutPlant'){
         store.changeDevList(data.msg)
-        console.log(data.msg);
         
       }