update 关闭3d图的详情小框

Reviewed-on: #25

src/layout/components/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''">
     <div v-if="showTitle" class="homeNavIcon" @click="goToRootPage">
-      <img src="../../assets/img/cnbm.png" alt="" />
+      <img src="../../assets/img/cnbm.png" alt="">
       <span>
         {{ 'title' | i18nFilter }}
       </span>
@@ -25,9 +25,9 @@
           :icon-class="showTitle ? 'home' : 'homeb'"
           style="height: calc(24px * var(--beilv)); width: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv)); margin-right: 2px;"
         />
-        <span v-if="showhome">
+        <!-- <span v-if="showhome">
           {{ 'navbar.homepage' | i18nFilter }}
-        </span>
+        </span> -->
       </div>
       <el-dropdown
         :style="showTitle ? 'color: #fff' : '#000'"
@@ -97,7 +97,7 @@
         trigger="click"
       >
         <div class="avatar-wrapper">
-          <img :src="require('@/assets/img/head.png')" class="user-avatar" />
+          <img :src="require('@/assets/img/head.png')" class="user-avatar">
           <div class="avatar-username" :title="username">{{ username }}</div>
           <div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</div>
           <!-- <i class="el-icon-caret-bottom" /> -->
@@ -144,7 +144,7 @@
         <el-tooltip class="item" effect="dark" placement="bottom-end">
           <div slot="content">
             {{ 'copyright.copyright' | i18nFilter }}：{{ 'copyright.company' | i18nFilter }}
-            <br />
+            <br>
             {{ 'copyright.version' | i18nFilter }}：3.0
           </div>
           <svg-icon
@@ -248,7 +248,8 @@ export default {
       const password = Cookie.get('password')
 
       if (username && password) {
-        window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
+        window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
+        // window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
       }
     },
     winBlur() {

src/views/3DOverview/components/DianChart.vue

@@ -6,6 +6,7 @@
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
+import moment from 'moment'
 
 class ChartOption {
   constructor() {
@@ -50,16 +51,18 @@ class ChartOption {
       formatter: params => {
         return `
             <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
-              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+  params[0].axisValue
+}</h2>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+  this.color[0]
+}"></span><span>${params[0].seriesName}: ${params[0].value}V</span></span>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+  this.color[1]
+}"></span><span>${params[1].seriesName}: ${params[1].value}%</span></span>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[2]
-              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+  this.color[2]
+}"></span><span>${params[2].seriesName}: ${params[2].value}°C</span></span>
             </div>
             `
       }
@@ -67,7 +70,15 @@ class ChartOption {
 
     this.xAxis = {
       type: 'category',
-      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      // boundaryGap: false,
+      data: Array(7)
+        .fill(1)
+        .map((_, idx) => {
+          const d = moment()
+          const day = idx ? d.subtract(idx, 'd') : d
+          return day.format('M-DD')
+        })
+        .reverse(),
       axisTick: { show: false },
       axisLabel: {
         color: '#fff9',
@@ -100,10 +111,11 @@ class ChartOption {
         },
         axisLabel: {
           color: '#fff9',
-          fontSize: 10
+          fontSize: 10,
+          formatter: '{value}%'
         },
         splitLine: {
-          show: true,
+          show: false,
           lineStyle: {
             color: '#fff1',
             type: 'dotted'
@@ -133,7 +145,7 @@ class ChartOption {
         splitLine: {
           show: true,
           lineStyle: {
-            color: '#fff1',
+            color: '#fff3',
             type: 'dotted'
           }
         }
@@ -149,10 +161,13 @@ class ChartOption {
             width: 1
           }
         },
+        // min: 'dataMin',
+        min: 20,
+        max: 50,
         type: 'value',
         splitNumber: 4,
         splitLine: {
-          show: true,
+          show: false,
           lineStyle: {
             color: '#fff1',
             type: 'dotted'
@@ -160,41 +175,84 @@ class ChartOption {
         },
         axisLabel: {
           color: '#fff9',
-          fontSize: 10
+          fontSize: 10,
+          formatter: '{value}°C'
         }
       }
     ]
 
     this.series = [
       {
-        name: 'ABC三相电压/v',
-        type: 'line',
-        yAxisIndex: 0,
-        // smooth: true,
-        emphasis: {
-          focus: 'series'
-        },
-        data: Array(12)
-          .fill(1)
-          .map(_ => Random.integer(30, 100)),
-        symbol: 'circle',
-        symbolSize: 0.2,
-        showSymbol: false
-      },
-      {
-        name: 'ABC三相电流/a',
+        name: '电压',
         type: 'line',
         yAxisIndex: 1,
         // smooth: true,
         emphasis: {
           focus: 'series'
         },
-        data: Array(12)
+        data: Array(7)
           .fill(1)
-          .map(_ => Random.integer(30, 100)),
+          // .map(_ => Random.integer(30, 100)),
+          .map(_ => Random.integer(360, 390)),
         symbol: 'circle',
         symbolSize: 0.2,
-        showSymbol: false
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#E0209466' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      },
+      {
+        name: '电流',
+        type: 'line',
+        yAxisIndex: 0,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(1)
+          .map(_ => Random.integer(76, 85)),
+        // .map(_ => Random.integer(30, 100)),
+        symbol: 'circle',
+        symbolSize: 0.2,
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#F0D63C66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
       },
       {
         name: '电缆温度',
@@ -204,12 +262,33 @@ class ChartOption {
         emphasis: {
           focus: 'series'
         },
-        data: Array(12)
+        data: Array(7)
           .fill(1)
-          .map(_ => Random.integer(30, 100)),
+          // .map(_ => Random.integer(20, 55)),
+          .map(_ => Random.integer(36, 45)),
         symbol: 'circle',
         symbolSize: 0.2,
-        showSymbol: false
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#1A99FF66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
       }
     ]
   }
@@ -232,7 +311,7 @@ class ChartOption {
         if (key === 'colorStops') newOption[key] = option[key]
         else if (
           typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
-          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+          ['splitNumber', 'x', 'x2', 'min', 'max', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
         ) {
           newOption[key] = calcSize(option[key])
         } else newOption[key] = this.optionFilter(option[key], calcSize)
@@ -291,8 +370,8 @@ export default {
       return num * beilv
     },
     setChartOption() {
-      let chartOption = new ChartOption()
-      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+      const cOption = new ChartOption()
+      this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize))
     }
   }
 }

src/views/3DOverview/components/LeftContentPublicConsume.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="public-consume__inner">
-    <div>
+    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
       <TechyBox class="water-consume">
         <div class="header-part">
-          <img src="./assets/consume/s.png" width="32" height="32" alt="water" />
+          <img src="./assets/consume/s.png" width="32" height="32" alt="water">
           <span>水</span>
         </div>
         <div class="content-part">
@@ -35,10 +35,10 @@
       </TechyBox>
     </div>
 
-    <div>
+    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
       <TechyBox class="gas-consume">
         <div class="header-part  ">
-          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi" />
+          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi">
           <span>气</span>
         </div>
         <div class="content-part">
@@ -46,31 +46,31 @@
             <span class="name">氧&nbsp;&nbsp;&nbsp;&nbsp;气</span>
             <span class="diy-process-bar bar-width-4 color-1" />
             <span class="amount">
-              23Pa
+              0.42MPa
             </span>
           </div>
           <div class="row">
             <span class="name">CDA</span>
             <span class="diy-process-bar bar-width-5 color-2" />
             <span class="amount">
-              39Pa
+              0.61MPa
             </span>
           </div>
           <div class="row">
             <span class="name">天然气</span>
             <span class="diy-process-bar bar-width-6 color-3" />
             <span class="amount">
-              239pa
+              0.31MPa
             </span>
           </div>
         </div>
       </TechyBox>
     </div>
 
-    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
+    <div style="min-height: calc(168px * var(--beilv)); flex: 1;">
       <TechyBox class="dian-consume">
         <div class="header-part">
-          <img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
+          <img src="./assets/consume/d.png" width="32" height="32" alt="dian">
           <span>电</span>
         </div>
         <div style="height: 100%; flex: 1; overflow: hidden">
@@ -79,30 +79,29 @@
       </TechyBox>
     </div>
 
-    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
+    <!-- <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
       <TechyBox class="elec-consume">
         <div class="header-part">
           <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
           <span>发电</span>
         </div>
         <div style="height: 100%; flex: 1; overflow: hidden">
-          <!-- <FadianChart /> -->
           <DianChart id="fa-dian" key="fa-dian" />
         </div>
       </TechyBox>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import TechyBarChart from './TechyBarChart.vue'
-import TechyLineChart from './TechyLineChart.vue'
+// import TechyBarChart from './TechyBarChart.vue'
+// import TechyLineChart from './TechyLineChart.vue'
 import TechyBox from './TechyBox.vue'
-import FadianChart from './FadianChart.vue'
+// import FadianChart from './FadianChart.vue'
 import DianChart from './DianChart.vue'
 export default {
   name: 'LeftContentPublicConsume',
-  components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
+  components: { TechyBox, DianChart },
   data() {
     return {}
   },
@@ -153,17 +152,23 @@ export default {
 .header-part > span {
   color: #fffc;
   font-size: calc(12px * var(--beilv));
+  line-height: calc(12px * var(--beilv));
   white-space: nowrap;
 }
 
 .content-part {
   display: flex;
   flex-direction: column;
-  font-size: calc(12px * var(--beilv));
-  color: #fff9;
-  height: calc(48px * var(--beilv));
+  justify-content: center;
+  /* height: calc(48px * var(--beilv)); */
   flex: 1 1;
-  gap: calc(4px * var(--beilv));
+  gap: calc(10px * var(--beilv));
+  color: #fff9;
+}
+
+.content-part span.name {
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
 }
 
 .row {
@@ -181,6 +186,7 @@ export default {
 
 .row > .amount {
   text-align: right;
+  width: 15%;
 }
 
 .diy-process-bar {
@@ -211,13 +217,13 @@ export default {
   width: 99%;
 }
 .bar-width-4::after {
-  width: 20%;
+  width: 42%;
 }
 .bar-width-5::after {
-  width: 29%;
+  width: 61%;
 }
 .bar-width-6::after {
-  width: 79%;
+  width: 31%;
 }
 
 .diy-process-bar.color-1::after {

src/views/3DOverview/components/RightContentProductRate.vue

@@ -6,6 +6,7 @@
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
+import moment from 'moment'
 
 class ChartOption {
   constructor() {
@@ -61,29 +62,31 @@ class ChartOption {
         return `
             <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
               <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
-                params[0].axisValue
-              }</h2>
+  params[0].axisValue
+}</h2>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+  this.color[0]
+}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+  this.color[1]
+}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
             </div>
             `
       }
     }
 
-    let d = new Date()
     this.xAxis = {
       type: 'category',
-      boundaryGap: false,
+      // boundaryGap: false,
       // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       data: Array(7)
         .fill(0)
         .map((_, idx) => {
-          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
-        }),
+          const d = moment()
+          const day = idx ? d.subtract(idx, 'd') : d
+          return day.format('M-DD')
+        })
+        .reverse(),
       axisTick: {
         show: false
       },
@@ -244,7 +247,7 @@ export default {
       return num * beilv
     },
     setChartOption() {
-      let chartOption = new ChartOption()
+      const chartOption = new ChartOption()
       this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
     }
   }

src/views/3DOverview/components/RightContentRealtimeProduction.vue

@@ -9,13 +9,14 @@
           list: [32, 65, 65, 54, 37, 77]
         }
       ]" /> -->
-  <div class="techy-chart" ref="realtimeLineChart"></div>
+  <div ref="realtimeLineChart" class="techy-chart" />
 </template>
 
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
+import moment from 'moment'
 
 class ChartOption {
   constructor() {
@@ -59,32 +60,36 @@ class ChartOption {
       formatter: params => {
         return `
             <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
-              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+  params[0].axisValue
+}</h2>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+  this.color[0]
+}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+  this.color[1]
+}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[2]
-              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+  this.color[2]
+}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[3]
-              }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
+  this.color[3]
+}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
             </div>
             `
       }
     }
 
-    let d = new Date()
     this.xAxis = {
       type: 'category',
       data: Array(7)
         .fill(1)
         .map((_, idx) => {
-          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
-        }),
+          const d = moment()
+          const day = idx ? d.subtract(idx, 'd') : d
+          return day.format('M-DD')
+        })
+        .reverse(),
       axisTick: { show: false },
       axisLabel: {
         color: '#fff9',
@@ -377,7 +382,7 @@ export default {
       return num * beilv
     },
     setChartOption() {
-      let chartOption = new ChartOption()
+      const chartOption = new ChartOption()
       this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
     }
   }

src/views/3DOverview/components/TechyHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <header class="techy-header">
-    <img class="logo-img" src="./logo.png" alt="cnbm" />
+    <img class="logo-img" src="./logo.png" alt="cnbm">
     <span class="techy-header__title">{{ headTitle }}</span>
 
     <div class="date">{{ now.format('yyyy.MM.DD') }}</div>
@@ -90,7 +90,8 @@ export default {
         const password = Cookie.get('password')
 
         if (username && password) {
-          window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
+          window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
+          // window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
         } else {
           this.$router.push('/')
         }

src/views/3DOverview/components/TechyTable.vue

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -29,7 +29,7 @@
             :inject-data="{ ...scope.row, ...item }"
             @emitData="emitData"
           />
-          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+          <span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
         </template>
       </el-table-column>
       <slot name="content" />

src/views/3DOverview/index.vue

@@ -142,6 +142,7 @@ export default {
   data() {
     return {
       eqId: null,
+      oldEqId: null,
       currentEquipment: null,
       showPage: false,
       toggleResize: 'toggle-1' // <=== no need to worry this
@@ -170,7 +171,17 @@ export default {
     },
     handle3DClick() {
       this.eqId = document.getElementById('V3DData').rel
+
+      if (this.oldEqId && this.oldEqId === this.eqId) {
+        // 关闭框
+        console.log('here.........关闭框', this.oldEqId, this.eqId)
+        this.currentEquipment = null
+        this.oldEqId = null
+        return
+      }
+
       if (this.eqId) {
+        this.oldEqId = this.eqId
         this.currentEquipment = eqList.find(item => item.id === this.eqId)
       }
     }
@@ -318,20 +329,14 @@ export default {
 
 .techy-body-part__middle {
   position: absolute;
+  /* background: #ff3311; */
   top: 0;
   right: calc(-16px * var(--beilv));
-}
-
-.techy-body-part__middle .techy-box {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: calc(128px * var(--beilv));
-  width: calc(188px * var(--beilv));
+  transform: translateX(100%);
 }
 
 .techy-body-part__middle__inner {
-  height: 100%;
+  /* height: 100%; */
   padding: calc(16px * var(--beilv));
   display: flex;
   flex-direction: column;
@@ -346,8 +351,17 @@ export default {
   line-height: 1.5;
   color: #fff;
   display: flex;
+  min-width: calc(168px * var(--beilv));
 }
 
+.techy-body-part__middle__inner p:not(:last-child) {
+  margin-bottom: calc(8px * var(--beilv));
+}
+
+/* .techy-body-part__middle__inner p > b {
+  width: calc(90px * var(--beilv));
+} */
+
 .techy-body-part__middle__inner p > span {
   position: relative;
   padding-left: calc(16px * var(--beilv));

src/views/3DOverview/v3dApp/data.js

@@ -1,21 +1,23 @@
 export default [
+  { id: 'C123-1', pl: 'A', name: 'A钢化', amount: 32, status: '生产中' },
+  { id: 'C456-1', pl: 'B', name: 'B钢化', amount: 32, status: '生产中' },
+
   { id: 'C1-0', pl: 'A1', name: 'A1上片', amount: 32, status: '生产中' },
   { id: 'C1-1', pl: 'A1', name: 'A1磨边', amount: 32, status: '生产中' },
-  { id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '调试中' },
+  { id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '生产中' },
   { id: 'C1-3', pl: 'A1', name: 'A1打孔', amount: 32, status: '生产中' },
   { id: 'C1-4', pl: 'A1', name: 'A1打孔后清洗', amount: 32, status: '生产中' },
   { id: 'C1-5', pl: 'A1', name: 'A1丝印', amount: 32, status: '生产中' },
   { id: 'C1-6', pl: 'A1', name: 'A1固化', amount: 32, status: '生产中' },
   { id: 'C1-7', pl: 'A1', name: 'A1储片', amount: 32, status: '生产中' },
-  { id: 'C1-8', pl: 'A1', name: 'A钢化', amount: 32, status: '生产中' },
-  { id: 'C1-9', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
-  { id: 'C1-10', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
+  { id: 'C1-8', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C1-9', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
 
   { id: 'C2-0', pl: 'A2', name: 'A2上片', amount: 32, status: '调试中' },
   { id: 'C2-1', pl: 'A2', name: 'A2磨边', amount: 32, status: '生产中' },
   { id: 'C2-2', pl: 'A2', name: 'A2磨边后清洗', amount: 32, status: '调试中' },
   { id: 'C2-3', pl: 'A2', name: 'A2打孔', amount: 32, status: '调试中' },
-  { id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '调试中' },
+  { id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '生产中' },
   { id: 'C2-5', pl: 'A2', name: 'A2丝印', amount: 32, status: '生产中' },
   { id: 'C2-6', pl: 'A2', name: 'A2固化', amount: 32, status: '生产中' },
   { id: 'C2-7', pl: 'A2', name: 'A2储片', amount: 32, status: '生产中' },
@@ -26,8 +28,8 @@ export default [
   { id: 'C3-1', pl: 'A3', name: 'A3磨边', amount: 32, status: '生产中' },
   { id: 'C3-2', pl: 'A3', name: 'A3磨边后清洗', amount: 32, status: '生产中' },
   { id: 'C3-3', pl: 'A3', name: 'A3打孔', amount: 32, status: '生产中' },
-  { id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '生产中' },
-  { id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '故障' },
+  { id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '故障' },
+  { id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '生产中' },
   { id: 'C3-6', pl: 'A3', name: 'A3固化', amount: 32, status: '生产中' },
   { id: 'C3-7', pl: 'A3', name: 'A3储片', amount: 32, status: '生产中' },
   { id: 'C3-8', pl: 'A3', name: 'A3钢化后清洗', amount: 32, status: '生产中' },
@@ -35,15 +37,14 @@ export default [
 
   { id: 'C4-0', pl: 'B1', name: 'B1上片', amount: 32, status: '故障' },
   { id: 'C4-1', pl: 'B1', name: 'B1磨边', amount: 32, status: '生产中' },
-  { id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '生产中' },
+  { id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '故障' },
   { id: 'C4-3', pl: 'B1', name: 'B1打孔', amount: 32, status: '故障' },
-  { id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '故障' },
+  { id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '生产中' },
   { id: 'C4-5', pl: 'B1', name: 'B1丝印', amount: 32, status: '生产中' },
   { id: 'C4-6', pl: 'B1', name: 'B1固化', amount: 32, status: '生产中' },
   { id: 'C4-7', pl: 'B1', name: 'B1储片', amount: 32, status: '生产中' },
-  { id: 'C4-8', pl: 'B1', name: 'B钢化', amount: 32, status: '生产中' },
-  { id: 'C4-9', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
-  { id: 'C4-10', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
+  { id: 'C4-8', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C4-9', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
 
   { id: 'C5-0', pl: 'B2', name: 'B2上片', amount: 32, status: '生产中' },
   { id: 'C5-1', pl: 'B2', name: 'B2磨边', amount: 32, status: '生产中' },
@@ -61,6 +62,6 @@ export default [
   { id: 'C6-3', pl: 'B3', name: 'B3打孔', amount: 32, status: '生产中' },
   { id: 'C6-4', pl: 'B3', name: 'B3打孔后清洗', amount: 32, status: '生产中' },
   { id: 'C6-5', pl: 'B3', name: 'B3丝印', amount: 32, status: '生产中' },
-  { id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '生产中' },
-  { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' },
-]
+  { id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '故障' },
+  { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' }
+]

src/views/orderManage/orderManagerCockpit/components/orderStatus.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="state-box">
     <span v-if="this.injectData.status === 1">
-      <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
+      <svg-icon icon-class="yellow_dot" class="tip"/>
       在途
     </span>
     <span v-if="this.injectData.status === 2">
-      <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
+      <svg-icon icon-class="blue_dot" class="tip"/>
       已下发
     </span>
     <span v-if="this.injectData.status === 3">
-      <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
+      <svg-icon icon-class="green_dot" class="tip" />
       已完成
     </span>
     <span v-if="this.injectData.status === 4">
-      <svg-icon icon-class="orange_dot" style="font-size: 14px; position: relative; top: .08em" />
+      <svg-icon icon-class="orange_dot" class="tip" />
       待下发
     </span>
   </div>
@@ -44,9 +44,11 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .state-box {
-  height: 18px;
-  line-height: 18px;
+  .tip {
+    font-size: calc(14px * var(--beilv));
+    vertical-align: middle;
+  }
 }
 </style>