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]
+  this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+}"></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]
+  this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+}"></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]
+  this.color[2]
-              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+}"></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',
+        name: '电压',
-        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',
         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()
+      const cOption = new ChartOption()
-      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+      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 TechyBarChart from './TechyBarChart.vue'
-import TechyLineChart from './TechyLineChart.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));
+  justify-content: center;
-  color: #fff9;
+  /* height: calc(48px * var(--beilv)); */
-  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/RightContentFaultAnalysis.vue

@@ -239,7 +239,7 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
@@ -252,7 +252,7 @@ export default {
                   colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 }
 
                 totalRate += percent
@@ -290,8 +290,8 @@ export default {
       return beilv * baseSize
     },
     applyChartOption() {
-      const fs1 = this.calcFontsize(1 /** px*/)
+      // const fs1 = this.calcFontsize(1 /** px*/)
-      const fs3 = this.calcFontsize(3 /** px*/)
+      // const fs3 = this.calcFontsize(3 /** px*/)
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs8 = this.calcFontsize(8 /** px*/)
       const fs10 = this.calcFontsize(10 /** px*/)

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
+  params[0].axisValue
-              }</h2>
+}</h2>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
+  this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+}"></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]
+  this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+}"></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]
+  this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+}"></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]
+  this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+}"></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]
+  this.color[2]
-              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+}"></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]
+  this.color[3]
-              }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
+}"></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/TechyFakeTable.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="techy-fake-table">
-    <div class="table-inner">
-      <section class="table-header" />
-      <section class="table-body" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-  props: {
-    tableProps: {
-      type: Array,
-      default: () => []
-    },
-    tableData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      headMap: {}
-    }
-  },
-  created() {},
-  mounted() {
-    this.renderHeadRow().then(() => {
-      this.renderCommonRow()
-    })
-  },
-  methods: {
-    renderHeadRow() {
-      return new Promise((resolve, reject) => {
-        // do something...
-      })
-    },
-    renderCommonRow() {
-      return new Promise((resolve, reject) => {
-        // do something...
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.techy-fake-table {
-  position: relative;
-  width: 100%;
-  height: 100px;
-  background: #3333;
-  overflow: hidden;
-  overflow-x: scroll;
-}
-.table-inner {
-  max-width: 10000px;
-  color: white;
-  white-space: nowrap;
-}
-</style>

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)
       }
     }
@@ -286,19 +297,11 @@ export default {
   width: calc(472px * var(--beilv));
 }
 
-/* 现场实时监控 */
-.ft-monitor {
-}
-
 /* 缺陷分类分析  */
 .fault-analysis {
   width: calc(290px * var(--beilv));
 }
 
-/* 设备报警提示 */
-.eq-alert {
-}
-
 .techy-body-part__left,
 .techy-body-part__right {
   /* height: 100%; */
@@ -326,20 +329,14 @@ export default {
 
 .techy-body-part__middle {
   position: absolute;
+  /* background: #ff3311; */
   top: 0;
   right: calc(-16px * var(--beilv));
-}
+  transform: translateX(100%);
-
-.techy-body-part__middle .techy-box {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: calc(128px * var(--beilv));
-  width: calc(188px * var(--beilv));
 }
 
 .techy-body-part__middle__inner {
-  height: 100%;
+  /* height: 100%; */
   padding: calc(16px * var(--beilv));
   display: flex;
   flex-direction: column;
@@ -354,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-8', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
-  { id: 'C1-9', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C1-9', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
-  { id: 'C1-10', 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-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '故障' },
-  { id: 'C3-5', 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-8', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
-  { id: 'C4-9', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
+  { id: 'C4-9', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
-  { id: 'C4-10', 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-6', pl: 'B3', name: 'B3固化', amount: 32, status: '故障' },
-  { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' },
+  { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' }
 ]

src/views/EquipmentManager/HomePage.vue

@@ -226,23 +226,22 @@ export default {
 </script>
 
 <style scoped>
-::-webkit-scrollbar {
+.visual-container >>> ::-webkit-scrollbar {
   width: calc(8px * var(--beilv));
 }
 
-::-webkit-scrollbar-track {
+.visual-container >>> ::-webkit-scrollbar-track {
   background-color: #14243f;
   border-radius: 0;
 }
 
-::-webkit-scrollbar-button {
+.visual-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));
+  display: none;
-  height: calc(8px * var(--beilv));
   background: #5bc4bf9f;
   position: relative;
 }
 
-::-webkit-scrollbar-thumb {
+.visual-container >>> ::-webkit-scrollbar-thumb {
   border-radius: calc(8px * var(--beilv));
   background: #5bc4bf9f;
 }
@@ -394,10 +393,6 @@ export default {
   left: calc(140px * var(--beilv));
 }
 
-.pl-select {
-  /* height: calc(18px * var(--beilv)); */
-}
-
 .pl-select >>> input {
   /* height: 100%; */
   outline: none;

src/views/EquipmentManager/components/TechyTable.vue

@@ -126,8 +126,9 @@ export default {
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));
+  display: none;
-  height: calc(8px * var(--beilv));
+  /* width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv)); */
   background: #5bc4bf9f;
   position: relative;
 }

src/views/EquipmentManager/components/TechyVerticalTable.vue

@@ -45,6 +45,28 @@ export default {
   color: white;
 }
 
+.techy-vertical-table >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
+}
+
+.techy-vertical-table >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.techy-vertical-table >>> ::-webkit-scrollbar-button {
+  display: none;
+  /* width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv)); */
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.techy-vertical-table >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+}
+
 .trow {
   width: 100%;
   white-space: nowrap;

src/views/QualityManager/HomePage.vue

@@ -207,7 +207,7 @@
                             :class="{ 'pl-select__active': dateMode2 === 'day' }"
                             @click="
                               dateMode2 = 'day'
-                              dataUpdateToken = Math.random()+''
+                              dataUpdateToken = Math.random() + ''
                             "
                           >
                             日
@@ -216,7 +216,7 @@
                             :class="{ 'pl-select__active': dateMode2 === 'month' }"
                             @click="
                               dateMode2 = 'month'
-                              dataUpdateToken = Math.random()+''
+                              dataUpdateToken = Math.random() + ''
                             "
                           >
                             月
@@ -307,7 +307,7 @@ import TechyBox from './components/TechyBox.vue'
 import TechyTable from './components/TechyTable.vue'
 import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
 import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
-import productionRateHeader from './components/productionRateHeader.vue'
+// import productionRateHeader from './components/productionRateHeader.vue'
 // import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
 import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
 import { mapGetters } from 'vuex'
@@ -330,8 +330,8 @@ export default {
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
     TechyBar,
-    NewLineStack,
+    NewLineStack
-    productionRateHeader
+    // productionRateHeader
   },
   data() {
     const quexianDatalist = [
@@ -668,47 +668,13 @@ export default {
   width: calc(375px * var(--beilv));
 }
 
-.fake-legend{
+.fake-legend {
   cursor: unset;
 }
 
 .fake-legend span {
   background: none;
   cursor: none;
-  color: #DFF1FE;
+  color: #dff1fe;
 }
-/* @media all and (max-width: 1680px) {
-  .production-rate {
-    text-align: center;
-  }
-
-  .production-rate >>> .top-icon,
-  .production-rate >>> .date-select {
-    display: none;
-  }
-}
-
-@media all and (min-width: 1680px) {
-  .production-rate {
-    text-align: left;
-  }
-
-  .production-rate >>> .top-icon {
-    display: none;
-  }
-}
-
-@media all and (min-width: 2048px) {
-  .production-rate {
-    text-align: center;
-  }
-
-  .production-rate >>> .date-select > span {
-    background-color: #568588;
-  }
-
-  .production-rate >>> .date-select > span.date-select__active {
-    background-color: #42bbb7;
-  }
-} */
 </style>

src/views/QualityManager/components/TechyTable.vue

@@ -126,8 +126,9 @@ export default {
 }
 
 .visual-base-table-container >>> ::-webkit-scrollbar-button {
-  width: calc(8px * var(--beilv));
+  /* width: calc(8px * var(--beilv));
-  height: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv)); */
+  display: none;
   background: #5bc4bf9f;
   position: relative;
 }
@@ -137,15 +138,10 @@ export default {
   background: #5bc4bf9f;
 }
 
-/* .visual-base-table-container {
-  min-width: 30vw;
-} */
 .visual-base-table-container {
   height: 100%;
 }
-/* .visual-base-table-container >>> .el-table {
+
-  min-width: 120%;
-} */
 /* 清除默认样式 */
 .visual-base-table-container >>> th.gutter {
   display: none;

src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue

@@ -243,20 +243,20 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
-                } else if (totalRate + percent >= 50 && dataIndex == 1) {
+                } else if (totalRate + percent >= 50 && dataIndex === 1) {
                   colorGradient.x = 1
                   colorGradient.y = 1
                   colorGradient.x2 = 0
                   colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 }
 
                 totalRate += percent
@@ -306,21 +306,19 @@ export default {
     applyChartOption(datalist) {
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs8 = this.calcFontsize(8 /** px*/)
-      const fs10 = this.calcFontsize(10 /** px*/)
+      // const fs10 = this.calcFontsize(10 /** px*/)
       const fs12 = this.calcFontsize(12 /** px*/)
       const fs13 = this.calcFontsize(13 /** px*/)
-      const fs18 = this.calcFontsize(18 /** px*/)
+      // const fs18 = this.calcFontsize(18 /** px*/)
       const fs20 = this.calcFontsize(20 /** px*/)
       const legendTextFixWidth = this.calcFontsize(48 /** px*/)
       const legnedTop = this.calcFontsize(72 /** px*/)
-      const legendTopRate = this.calcFontsize(30 /** % */)
+      // const legendTopRate = this.calcFontsize(30 /** % */)
 
       this.configs.title.text =
         this.dataPeriod === 'month'
-          ? // 如果是月数据，单位为 千片
+          ? this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0) // 如果是月数据，单位为 千片
-            this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
+          : this.dataList.reduce((prev, curr) => prev + curr.value, 0) // 如果是日数据，单位为 片
-          : // 如果是日数据，单位为 片
-            this.dataList.reduce((prev, curr) => prev + curr.value, 0)
       this.configs.title.textStyle.fontSize = fs20
       this.configs.title.subtextStyle.fontSize = fs13
 

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,8 +44,11 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .state-box {
-  height: calc(15px * var(--beilv))
+  .tip {
+    font-size: calc(14px * var(--beilv));
+    vertical-align: middle;
+  }
 }
 </style>

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

@@ -63,6 +63,7 @@ export default {
   justify-content: space-between;
   .box {
     width: 49.5%;
+    height: 49.5%;
     margin-bottom: 8px;
     background-image: url('../../../../assets/img/cockpit/module-back.png');
     background-repeat: no-repeat;
@@ -92,6 +93,26 @@ export default {
       background: #366F5D;
     }
   }
+  ::-webkit-scrollbar {
+    width: calc(8px * var(--beilv));
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #14243f;
+    border-radius: 0;
+  }
+
+  ::-webkit-scrollbar-button {
+    width: calc(8px * var(--beilv));
+    height: calc(8px * var(--beilv));
+    background: #5bc4bf9f;
+    position: relative;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: calc(8px * var(--beilv));
+    background: #5bc4bf9f;
+  }
 }
 .progress-box {
   border-radius: 5px;