Merge pull request 'lb' (#27) from lb into master

Reviewed-on: #27

src/filters/index.js

@@ -127,6 +127,14 @@ export function rateFormatter(rateObj) {
   }
 }
 
+export function rateFormatter2(rateObj) {
+  if (rateObj) {
+    return rateObj + '%'
+  } else {
+    return '0.00%'
+  }
+}
+
 export function amountFormatter(param) {
   if (param) {
     return parseFloat(param).toFixed(2)

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() {
@@ -31,22 +32,53 @@ class ChartOption {
     this.tooltip = {
       show: true,
       trigger: 'axis',
+      // position: [200,10],
+      // position: ['25%', '25%'],
+      position: pointer => {
+        return [pointer[1], 0]
+      },
       axisPointer: {
         type: 'line',
         axis: 'x',
         lineStyle: {
-          color: '#41888F90',
-          shadowColor: '#41888F',
-          shadowBlur: 10,
-          width: 2
+          color: '#7BFFFB',
+          type: 'dotted'
         }
       },
-      extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
+      extraCssText: 'width: auto !important; height: auto !important;',
+      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>
+              <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}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>
+              <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}°C</span></span>
+            </div>
+            `
+      }
     }
 
     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',
@@ -79,10 +111,11 @@ class ChartOption {
         },
         axisLabel: {
           color: '#fff9',
-          fontSize: 10
+          fontSize: 10,
+          formatter: '{value}%'
         },
         splitLine: {
-          show: true,
+          show: false,
           lineStyle: {
             color: '#fff1',
             type: 'dotted'
@@ -112,7 +145,7 @@ class ChartOption {
         splitLine: {
           show: true,
           lineStyle: {
-            color: '#fff1',
+            color: '#fff3',
             type: 'dotted'
           }
         }
@@ -128,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'
@@ -139,37 +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: 'none'
-      },
-      {
-        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)),
-        symbol: 'none'
+          // .map(_ => Random.integer(30, 100)),
+          .map(_ => Random.integer(360, 390)),
+        symbol: 'circle',
+        symbolSize: 0.2,
+        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: '电缆温度',
@@ -179,10 +262,33 @@ class ChartOption {
         emphasis: {
           focus: 'series'
         },
-        data: Array(12)
+        data: Array(7)
           .fill(1)
-          .map(_ => Random.integer(30, 100)),
-        symbol: 'none'
+          // .map(_ => Random.integer(20, 55)),
+          .map(_ => Random.integer(36, 45)),
+        symbol: 'circle',
+        symbolSize: 0.2,
+        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
+          }
+        }
       }
     ]
   }
@@ -205,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)
@@ -264,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/RightContentFaultAnalysis.vue

@@ -124,6 +124,7 @@ export default {
         },
 
         legend: {
+          selectedMode: false,
           top: 0,
           bottom: 0,
           left: 0,
@@ -208,6 +209,7 @@ export default {
 
         series: [
           {
+            silent: true,
             name: 'PieForm',
             type: 'pie',
             center: ['68%', '61%'],
@@ -237,7 +239,7 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
@@ -250,7 +252,7 @@ export default {
                   colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 }
 
                 totalRate += percent
@@ -288,8 +290,8 @@ export default {
       return beilv * baseSize
     },
     applyChartOption() {
-      const fs1 = this.calcFontsize(1 /** px*/)
-      const fs3 = this.calcFontsize(3 /** px*/)
+      // const fs1 = this.calcFontsize(1 /** 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() {
@@ -47,21 +48,45 @@ class ChartOption {
         fontSize: 12
       },
       axisPointer: {
-        type: 'line'
+        type: 'line',
+        lineStyle: {
+          color: '#7BFFFB',
+          type: 'dotted'
+        }
       },
-      formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
+      // formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      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>
+              <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>
+              <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>
+            </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
       },
@@ -79,7 +104,7 @@ class ChartOption {
       type: 'value',
       name: '成品率              ',
       // min: 'dataMin',
-      min: 50,
+      min: 80,
       splitNumber: 3,
       nameTextStyle: {
         color: '#fff9',
@@ -105,7 +130,9 @@ class ChartOption {
       {
         name: 'A',
         type: 'line',
-        symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
         areaStyle: {
           color: {
             type: 'linear',
@@ -133,7 +160,9 @@ class ChartOption {
       {
         name: 'B',
         type: 'line',
-        symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
         areaStyle: {
           color: {
             type: 'linear',
@@ -179,7 +208,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', 'y', 'y2', 'min', 'max', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
         ) {
           newOption[key] = calcSize(option[key])
         } else newOption[key] = this.optionFilter(option[key], calcSize)
@@ -218,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,17 +9,18 @@
           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() {
-    this.color = ['#1A99FF', '#F0D63C', '#E02094', '#559833']
+    this.color = ['#1A99FF', '#F0D63C', '#E02094', '#52FFF1']
 
     this.legend = {
       top: 28,
@@ -47,19 +48,48 @@ class ChartOption {
       },
       axisPointer: {
         type: 'line',
-        axis: 'x'
+        axis: 'x',
+        lineStyle: {
+          color: '#7BFFFB',
+          type: 'dotted'
+        }
       },
-      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      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>
+              <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>
+              <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>
+              <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>
+              <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>
+            </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',
@@ -136,6 +166,10 @@ class ChartOption {
         name: 'A能耗',
         type: 'line',
         yAxisIndex: 0,
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
         // smooth: true,
         emphasis: {
           focus: 'series'
@@ -143,7 +177,6 @@ class ChartOption {
         data: Array(7)
           .fill(0)
           .map(_ => Random.integer(30, 100)),
-        symbol: 'none',
         areaStyle: {
           color: {
             type: 'linear',
@@ -176,7 +209,10 @@ class ChartOption {
         data: Array(7)
           .fill(0)
           .map(_ => Random.integer(30, 100)),
-        symbol: 'none',
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
         areaStyle: {
           color: {
             type: 'linear',
@@ -209,7 +245,10 @@ class ChartOption {
         data: Array(7)
           .fill(0)
           .map(_ => Random.integer(30, 100)),
-        symbol: 'none',
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
         areaStyle: {
           color: {
             type: 'linear',
@@ -242,7 +281,10 @@ class ChartOption {
         data: Array(7)
           .fill(0)
           .map(_ => Random.integer(30, 100)),
-        symbol: 'none',
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
         areaStyle: {
           color: {
             type: 'linear',
@@ -253,7 +295,7 @@ class ChartOption {
             colorStops: [
               {
                 offset: 0,
-                color: '#55983366' // 0% 处的颜色
+                color: '#52FFF166' // 0% 处的颜色
               },
               {
                 offset: 1,
@@ -340,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

@@ -1,9 +1,9 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <!-- <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
+    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
     <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
-    <div v-if="showPage" id="v3d-main-content"> -->
-      <div v-if="true" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content">
+      <!-- <div v-if="true" id="v3d-main-content"> -->
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
 
       <section id="techy-body-part">
@@ -20,7 +20,7 @@
               </techy-container>
             </div>
 
-            <div class="techy-body-part__middle" v-if="currentEquipment">
+            <div v-if="currentEquipment" class="techy-body-part__middle">
               <TechyBox>
                 <div class="techy-body-part__middle__inner">
                   <p>
@@ -45,7 +45,7 @@
                           'red-dot': currentEquipment.status === '故障',
                           'yellow-dot': currentEquipment.status === '调试中'
                         }"
-                      ></span>
+                      />
                       {{ currentEquipment.status }}
                     </span>
                   </p>
@@ -170,6 +170,7 @@ export default {
     },
     handle3DClick() {
       this.eqId = document.getElementById('V3DData').rel
+      // alert(this.eqId)
       if (this.eqId) {
         this.currentEquipment = eqList.find(item => item.id === this.eqId)
       }
@@ -286,19 +287,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 +319,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;
@@ -354,8 +341,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/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 {
-  width: calc(8px * var(--beilv));
-  height: calc(8px * var(--beilv));
+.visual-container >>> ::-webkit-scrollbar-button {
+  display: none;
   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));
-  height: calc(8px * var(--beilv));
+  display: none;
+  /* 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

@@ -137,7 +137,7 @@
                             :class="{ 'pl-select__active': plMode === 'a' }"
                             @click="
                               plMode = 'a'
-                              chosenDatalist = quexianDatalist[0]
+                              chosenDatalist = getFaultDataList()
                             "
                           >
                             A
@@ -146,7 +146,7 @@
                             :class="{ 'pl-select__active': plMode === 'b' }"
                             @click="
                               plMode = 'b'
-                              chosenDatalist = quexianDatalist[1]
+                              chosenDatalist = getFaultDataList()
                             "
                           >
                             B
@@ -157,7 +157,7 @@
                             :class="{ 'date-select__active': dateMode === 'day' }"
                             @click="
                               dateMode = 'day'
-                              chosenDatalist = quexianDatalist[2]
+                              chosenDatalist = getFaultDataList()
                             "
                           >
                             日
@@ -166,7 +166,7 @@
                             :class="{ 'date-select__active': dateMode === 'month' }"
                             @click="
                               dateMode = 'month'
-                              chosenDatalist = quexianDatalist[3]
+                              chosenDatalist = getFaultDataList()
                             "
                           >
                             月
@@ -176,17 +176,63 @@
                     </techy-analysis-header>
                     <div style="position: absolute;  top: 0; left:0; width: 100%; height: 100%;">
                       <span
-                        style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(16px * var(--beilv));"
+                        style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(28px * var(--beilv));"
                       >
-                        单位: 千片
+                        <!--单位千片和单位片 -->
+                        {{ unit }}
                       </span>
-                      <pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
+                      <!-- data-period 是指数据是月数据还是日数据 -->
+                      <pl-fault-analysis-pie-chart :data-list="chosenDatalist" :data-period="dateMode" />
                     </div>
                   </techy-box>
                 </div>
                 <div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
-                  <techy-box class="" style="padding: 0 calc(16px * var(--beilv));">
-                    <productionRateHeader @update-data="obj => { dataUpdateToken = obj.str; dateMode2 = obj.mode }">产品成品率</productionRateHeader>
+                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
+                    <!-- <productionRateHeader
+                      @update-data="
+                        obj => {
+                          dataUpdateToken = obj.str
+                          dateMode2 = obj.mode
+                        }
+                      "
+                    >
+                      产品成品率
+                    </productionRateHeader> -->
+
+                    <techy-analysis-header :show-top-icon="false">
+                      产线成品率
+                      <template v-slot:dateSelect>
+                        <div class="pl-select">
+                          <span
+                            :class="{ 'pl-select__active': dateMode2 === 'day' }"
+                            @click="
+                              dateMode2 = 'day'
+                              dataUpdateToken = Math.random() + ''
+                            "
+                          >
+                            日
+                          </span>
+                          <span
+                            :class="{ 'pl-select__active': dateMode2 === 'month' }"
+                            @click="
+                              dateMode2 = 'month'
+                              dataUpdateToken = Math.random() + ''
+                            "
+                          >
+                            月
+                          </span>
+                        </div>
+                        <div class="date-select fake-legend">
+                          <span>
+                            <!-- 产线A -->
+                          </span>
+                          <span>
+                            <!-- 产线B -->
+                          </span>
+                        </div>
+                      </template>
+                    </techy-analysis-header>
+
                     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                       <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
                     </div>
@@ -261,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'
@@ -284,42 +330,46 @@ export default {
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
     TechyBar,
-    NewLineStack,
-    productionRateHeader
+    NewLineStack
+    // productionRateHeader
   },
   data() {
     const quexianDatalist = [
       [
+        // 月a
+        { value: 5.21, name: '破片' },
+        { value: 3.2, name: '崩边' },
+        { value: 4.12, name: '脏污' },
+        { value: 2.61, name: '划擦伤' },
+        { value: 0.96, name: '崩孔' },
+        { value: 2.2, name: '其他' }
+      ],
+      [
+        // 月b
         { value: 4.34, name: '破片' },
         { value: 3.4, name: '崩边' },
         { value: 4.1, name: '脏污' },
         { value: 2.4, name: '划擦伤' },
-        { value: 0.23, name: '崩孔' },
+        { value: 0.32, name: '崩孔' },
         { value: 2.14, name: '其他' }
       ],
       [
-        { value: 4.17, name: '破片' },
-        { value: 3.6, name: '崩边' },
-        { value: 4, name: '脏污' },
-        { value: 2.2, name: '划擦伤' },
-        { value: 0.2, name: '崩孔' },
-        { value: 1.9, name: '其他' }
+        // 日a
+        { value: 184, name: '破片' },
+        { value: 110, name: '崩边' },
+        { value: 163, name: '脏污' },
+        { value: 96, name: '划擦伤' },
+        { value: 22, name: '崩孔' },
+        { value: 74, name: '其他' }
       ],
       [
-        { value: 3.33, name: '破片' },
-        { value: 3, name: '崩边' },
-        { value: 4.3, name: '脏污' },
-        { value: 2.1, name: '划擦伤' },
-        { value: 1, name: '崩孔' },
-        { value: 1.8, name: '其他' }
-      ],
-      [
-        { value: 2.7, name: '破片' },
-        { value: 1.56, name: '崩边' },
-        { value: 2.3, name: '脏污' },
-        { value: 1.2, name: '划擦伤' },
-        { value: 0.23, name: '崩孔' },
-        { value: 2, name: '其他' }
+        // 日b
+        { value: 172, name: '破片' },
+        { value: 122, name: '崩边' },
+        { value: 162, name: '脏污' },
+        { value: 82, name: '划擦伤' },
+        { value: 15, name: '崩孔' },
+        { value: 74, name: '其他' }
       ]
     ]
 
@@ -327,7 +377,7 @@ export default {
       dataUpdateToken: 'xx-token',
       plMode: 'a',
       dateMode: 'month',
-      dateMode2: 'month',
+      dateMode2: 'day',
       qualityTableProps,
       qualityDatalist,
       qualityExceptionDatalist,
@@ -385,7 +435,10 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['sidebar'])
+    ...mapGetters(['sidebar']),
+    unit() {
+      return this.dateMode === 'month' ? '单位: 千片' : '单位: 片'
+    }
   },
   methods: {
     changeFullScreen() {
@@ -397,6 +450,13 @@ export default {
         return false
       }
       screenfull.toggle(this.$refs['cockpit-container-quality'])
+    },
+    getFaultDataList() {
+      const { dateMode, plMode, quexianDatalist } = this
+      if (dateMode === 'month' && plMode === 'a') return quexianDatalist[0]
+      else if (dateMode === 'month' && plMode === 'b') return quexianDatalist[1]
+      else if (dateMode === 'day' && plMode === 'a') return quexianDatalist[2]
+      else if (dateMode === 'day' && plMode === 'b') return quexianDatalist[3]
     }
   }
 }
@@ -608,38 +668,13 @@ export default {
   width: calc(375px * var(--beilv));
 }
 
-/* @media all and (max-width: 1680px) {
-  .production-rate {
-    text-align: center;
-  }
-
-  .production-rate >>> .top-icon,
-  .production-rate >>> .date-select {
-    display: none;
-  }
+.fake-legend {
+  cursor: unset;
 }
 
-@media all and (min-width: 1680px) {
-  .production-rate {
-    text-align: left;
-  }
-
-  .production-rate >>> .top-icon {
-    display: none;
-  }
+.fake-legend span {
+  background: none;
+  cursor: none;
+  color: #dff1fe;
 }
-
-@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));
-  height: calc(8px * var(--beilv));
+  /* width: 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

@@ -17,6 +17,10 @@ export default {
     dataList: {
       type: Array,
       required: true
+    },
+    dataPeriod: {
+      type: String,
+      default: 'month'
     }
   },
   data() {
@@ -109,7 +113,7 @@ export default {
         title: {
           textAlign: 'center',
           textVerticalAlign: 'middle',
-          left: '69%',
+          left: '65%',
           top: '46%',
           text: '',
           textStyle: {
@@ -125,6 +129,7 @@ export default {
           }
         },
         legend: {
+          selectedMode: false,
           top: '12%',
           bottom: 0,
           left: 0,
@@ -209,7 +214,8 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['70%', '56%'],
+            silent: true,
+            center: ['66%', '56%'],
             radius: ['45%', '65%'],
             avoidLabelOverlap: true,
             label: {
@@ -237,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
@@ -300,22 +306,25 @@ 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(56 /** px*/)
-      const legnedTop = this.calcFontsize(64 /** px*/)
-      const legendTopRate = this.calcFontsize(30 /** % */)
+      const legendTextFixWidth = this.calcFontsize(48 /** px*/)
+      const legnedTop = this.calcFontsize(72 /** px*/)
+      // const legendTopRate = this.calcFontsize(30 /** % */)
 
-      this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
+      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, 0) // 如果是日数据，单位为 片
       this.configs.title.textStyle.fontSize = fs20
       this.configs.title.subtextStyle.fontSize = fs13
 
       // this.configs.legend.top = legendTopRate + '%'
       this.configs.legend.top = legnedTop
-      this.configs.legend.left = 0 + '%'
+      this.configs.legend.left = 3 + '%'
       this.configs.legend.itemGap = fs8
       this.configs.legend.itemWidth = fs8
 

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

@@ -162,6 +162,39 @@ export default {
           top: 72,
           bottom: 28
         },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(255,255,255,0.1)'
+            }
+          },
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 128px !important; height: auto !important;',
+          formatter: params => {
+            const [, a, , , b] = params
+            return `<div style="display: flex; flex-direction: column; gap: 2px; align-items: flex-start; ">
+                      <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                        a.name
+                      }</h2>
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
+                          a.color.colorStops[0].color
+                        }, transparent);"></span>
+                        <span style="font-size: calc(10px * var(--beilv));">${a.seriesName}: ${a.data}</span>
+                      </div>
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
+                          b.color.colorStops[0].color
+                        }, transparent);"></span>
+                        <span style="font-size: calc(10px * var(--beilv));">${b.seriesName}: ${b.data}</span>
+                      </div>
+                    </div>`
+          }
+        },
         xAxis: {
           type: 'category',
           axisTick: {
@@ -176,20 +209,20 @@ export default {
             color: '#fff8',
             fontSize: 12
           },
-          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'],
-          axisPointer: {
-            show: true,
-            type: 'shadow',
-            label: {
-              show: true,
-              formatter: params => {
-                let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
-                let v = [`<${info_arr[0].name}>详细数据: \n`]
-                info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
-                return v.join('\n')
-              }
-            }
-          }
+          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
+          // axisPointer: {
+          //   show: true,
+          //   type: 'shadow',
+          //   label: {
+          //     show: true,
+          //     formatter: params => {
+          //       let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
+          //       let v = [`<${info_arr[0].name}>详细数据: \n`]
+          //       info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
+          //       return v.join('\n')
+          //     }
+          //   }
+          // }
         },
         yAxis: {
           type: 'value',

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

@@ -5,24 +5,25 @@
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
 
 class ChartOption {
   constructor() {
     this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
 
-    // this.legend = {
-    //   top: 11,
-    //   right: 32,
-    //   itemWidth: 8,
-    //   itemHeight: 8,
-    //   textStyle: {
-    //     color: '#fff9',
-    //     fontSize: 10
-    //   }
-    // }
+    this.legend = {
+      top: 14,
+      right: 22,
+      itemWidth: 6,
+      itemHeight: 8,
+      textStyle: {
+        color: '#DFF1FECC',
+        fontSize: 12
+      }
+    }
 
     this.grid = {
-      top: 64,
+      top: 72,
       left: 12,
       right: 28,
       bottom: 20,
@@ -31,15 +32,32 @@ class ChartOption {
 
     this.tooltip = {
       trigger: 'axis',
+      padding: 10,
+      backgroundColor: 'rgba(13, 29, 53, 0.8)',
       extraCssText: 'width: 180px !important; ',
       axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
+        type: 'line',
+        lineStyle: {
+          type: 'dotted',
+          color: '#7BFFFB'
         }
+      },
+      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>
+              <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>
+              <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>
+            </div>
+            `
       }
     }
 
+    let today = new Date()
     this.xAxis = {
       type: 'category',
       boundaryGap: false,
@@ -58,15 +76,17 @@ class ChartOption {
       },
       data:
         this.mode === 'month'
-          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
           : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
     }
 
     this.yAxis = [
       {
-        name: '成品率          ',
+        name: '成品率            ',
         type: 'value',
-        min: 'dataMin',
+        min: '80',
         splitNumber: 4,
         nameGap: 16,
         nameTextStyle: {
@@ -105,7 +125,11 @@ class ChartOption {
       {
         name: 'A1下片机',
         type: 'line',
-        symbol: 'none',
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        // smooth: true,
         areaStyle: {
           // color: 'rgba(50,145,152,0.5)'
           color: {
@@ -128,32 +152,26 @@ class ChartOption {
           }
         },
         emphasis: {
-          focus: 'series'
+          focus: 'series',
+          scale: 1.2
         },
         data:
           this.mode === 'month'
             ? Array(30)
                 .fill(1)
-                .map(_ => {
-                  let v = Math.floor(Math.random() * 100)
-                  while (v < 80) {
-                    v = Math.floor(Math.random() * 100)
-                  }
-                  return v
-                })
-            : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-                let v = Math.floor(Math.random() * 100)
-                while (v < 80) {
-                  v = Math.floor(Math.random() * 100)
-                }
-                return v
-              })
+                .map(_ => Random.integer(94, 99))
+            : Array(7)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
       },
       {
         name: '磨边机',
         type: 'line',
-        symbol: 'none',
-
+        // symbol: 'none',
+        symbol: 'circle',
+        symbolSize: 1,
+        showSymbol: false,
+        // smooth: true,
         areaStyle: {
           // color: 'rgba(50,145,152,0.5)'
           color: {
@@ -182,20 +200,10 @@ class ChartOption {
           this.mode === 'month'
             ? Array(30)
                 .fill(1)
-                .map(_ => {
-                  let v = Math.floor(Math.random() * 100)
-                  while (v < 80) {
-                    v = Math.floor(Math.random() * 100)
-                  }
-                  return v
-                })
-            : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-                let v = Math.floor(Math.random() * 100)
-                while (v < 80) {
-                  v = Math.floor(Math.random() * 100)
-                }
-                return v
-              })
+                .map(_ => Random.integer(94, 99))
+            : Array(7)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
       }
     ]
   }
@@ -267,31 +275,87 @@ export default {
   methods: {
     refreshData() {
       // update xaxis
+      let today = new Date()
       this.configs.xAxis.data =
         this.mode === 'month'
-          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
           : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 
+      // update tooltip
+      if (this.mode === 'month') {
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          formatter: params => {
+            const currentMonth = new Date().getMonth() + 1
+            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;">${currentMonth}-${
+              params[0].axisValue
+            }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.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.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+          }
+        }
+      } else if (this.mode === 'day') {
+        this.configs.tooltip = null
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          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>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.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.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+          }
+        }
+      }
+
       // update series
       this.configs.series.forEach(item => {
         item.data =
           this.mode === 'month'
             ? Array(30)
                 .fill(1)
-                .map(_ => {
-                  let v = Math.floor(Math.random() * 100)
-                  while (v < 80) {
-                    v = Math.floor(Math.random() * 100)
-                  }
-                  return v
-                })
-            : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-                let v = Math.floor(Math.random() * 100)
-                while (v < 80) {
-                  v = Math.floor(Math.random() * 100)
-                }
-                return v
-              })
+                .map(_ => Random.integer(94, 99))
+            : Array(7)
+                .fill(1)
+                .map(_ => Random.integer(94, 99))
       })
 
       if (this.chart) this.chart.setOption(this.configs)

src/views/QualityManager/mockData.js

@@ -27,7 +27,7 @@ const PriorityComponent = {
     }
   },
   mounted() {
-    console.log(this.injectData.priority)
+    // console.log(this.injectData.priority)
   },
   methods: {},
   render: function (h) {
@@ -35,38 +35,38 @@ const PriorityComponent = {
   }
 }
 
-console.log('is component?', PriorityComponent)
+// console.log('is component?', PriorityComponent)
 
 export const qualityTableProps = [
   { label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
-  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
+  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 50 },
   { label: '异常内容', align: 'center', prop: 'content', 'min-width': 50 },
   { label: '班组', prop: 'team', align: 'center', 'min-width': 45 },
   { label: '时间', prop: 'time', align: 'center' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 50 }
 ]
 
 export const qualityDatalist = [
-  { 'wsName': '原片', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
-  { 'wsName': '下片铺纸', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 2 },
-  { 'wsName': '镀膜', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
-  { 'wsName': '丝印', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 2 },
-  { 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 3 },
-  { 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 1 },
-  { 'wsName': '上片磨边', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
-  { 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
-  { 'wsName': '包装', 'pl': 'B', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
-  { 'wsName': '上片磨边', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:31:10', 'priority': 1 },
-  { 'wsName': '下片铺纸', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:22:55', 'priority': 3 },
-  { 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:29:08', 'priority': 2 },
-  { 'wsName': '丝印', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 09:47:06', 'priority': 1 },
-  { 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:17:27', 'priority': 1 },
-  { 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 00:29:26', 'priority': 2 },
-  { 'wsName': '清洗', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:14:27', 'priority': 2 },
-  { 'wsName': '包装', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:50:39', 'priority': 3 },
-  { 'wsName': ' 物流仓储', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:37:44', 'priority': 2 },
-  { 'wsName': '清洗', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 03:53:47', 'priority': 2 },
-  { 'wsName': '原片', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 08:01:02', 'priority': 3 }]
+  { 'wsName': '原片', 'pl': 'B', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
+  { 'wsName': '下片铺纸', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 2 },
+  { 'wsName': '镀膜', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
+  { 'wsName': '丝印', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 2 },
+  { 'wsName': '上片磨边', 'pl': 'A', 'content': '透光率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 3 },
+  { 'wsName': '丝印', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 1 },
+  { 'wsName': '上片磨边', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
+  { 'wsName': '包装', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
+  { 'wsName': '包装', 'pl': 'B', 'content': '透光率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
+  { 'wsName': '上片磨边', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 06:31:10', 'priority': 1 },
+  { 'wsName': '下片铺纸', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 10:22:55', 'priority': 3 },
+  { 'wsName': '原片', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 03:29:08', 'priority': 2 },
+  { 'wsName': '丝印', 'pl': 'B', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 09:47:06', 'priority': 1 },
+  { 'wsName': '包装', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 06:17:27', 'priority': 1 },
+  { 'wsName': '原片', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 00:29:26', 'priority': 2 },
+  { 'wsName': '清洗', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 10:14:27', 'priority': 2 },
+  { 'wsName': '包装', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 13:50:39', 'priority': 3 },
+  { 'wsName': ' 物流仓储', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 09:37:44', 'priority': 2 },
+  { 'wsName': '清洗', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 03:53:47', 'priority': 2 },
+  { 'wsName': '原片', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 08:01:02', 'priority': 3 }]
 
 /** 质量异常报警 */
 
@@ -115,22 +115,22 @@ export const qualityExceptionTableProps = [
 
 export const qualityExceptionDatalist = [
   { 'pl': 'A', 'eq': '打孔', 'wsName': '打孔', 'content': '完整性', 'time': '2022-11-18 11:30:01', 'priority': 3 },
-  { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 1 },
-  { 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透过率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
-  { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 04:57:10', 'priority': 3 },
+  { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透光率', 'time': '2022-11-18 07:20:35', 'priority': 1 },
+  { 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透光率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
+  { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透光率', 'time': '2022-11-18 04:57:10', 'priority': 3 },
   { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 },
   { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 },
-  { 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透过率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
-  { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 05:06:36', 'priority': 1 },
+  { 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透光率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
+  { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透光率', 'time': '2022-11-18 05:06:36', 'priority': 1 },
   { 'pl': 'B', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 07:11:45', 'priority': 3 },
   { 'pl': 'A', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 11:40:37', 'priority': 3 },
   { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 10:41:54', 'priority': 1 },
-  { 'pl': 'B', 'eq': '预热', 'wsName': '预热', 'content': '透过率', 'time': '2022-11-18 04:10:00', 'priority': 1 },
+  { 'pl': 'B', 'eq': '预热', 'wsName': '预热', 'content': '透光率', 'time': '2022-11-18 04:10:00', 'priority': 1 },
   { 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 },
-  { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透过率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
+  { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透光率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
   { 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 },
   { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 3 },
   { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 13:06:35', 'priority': 1 },
-  { 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透过率', 'time': '2022-11-18 11:49:59', 'priority': 1 },
-  { 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 12:32:20', 'priority': 2 },
+  { 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透光率', 'time': '2022-11-18 11:49:59', 'priority': 1 },
+  { 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透光率', 'time': '2022-11-18 12:32:20', 'priority': 2 },
   { 'pl': 'B', 'eq': '丝印', 'wsName': '丝印', 'content': '完整性', 'time': '2022-11-18 12:45:49', 'priority': 3 }]

src/views/material-manage/cockpit/index.vue

@@ -176,16 +176,21 @@ export default {
       const arr = []
       const temp = []
       const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
+      let cnum = 1
       for (let i = 0; i < 20; i++) {
         const obj = {}
-        const sj = parseInt(Math.random() * 15)
-        obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
+        const sj = parseInt(Math.random() * 3 + 1)
+        cnum += sj
+        obj.time = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYY-MM-DD HH:mm:ss')
         obj.productLine = sj % 2 ? 'A' : 'B'
         obj.spec = productList[parseInt(Math.random() * (productList.length))]
-        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
+        obj.batch = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYYMMDDHH')
         obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
         arr.push(obj)
       }
+      arr.sort(function (a, b) {
+        return new Date(a.time) - new Date(b.time)
+      })
       this.originalFilmList = arr
       const eqList = [
         {name: '磨边机', fc: ''},
@@ -193,18 +198,23 @@ export default {
         {name: '镀膜机', fc: ['镀膜液', '异丙醇']},
         {name: '包装机', fc: ['隔离纸', '包装辅材']}
       ]
+      let cnum2 = 1
       for (let i = 0; i < 20; i++) {
         const obj = {}
-        const sj = parseInt(Math.random() * 15)
+        const sj = parseInt(Math.random() * 3 + 1)
         const sj2 = parseInt(Math.random() * eqList.length)
         const sj3 = sj % 2 ? 1 : 0
-        obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
+        cnum2 += sj
+        obj.time = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYY-MM-DD HH:mm:ss')
         obj.eqName = eqList[sj2].name
         obj.spec = eqList[sj2].fc ? (eqList[sj2].fc[sj3]) : ''
-        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
+        obj.batch = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYYMMDD')
         obj.num = parseInt(Math.random() * 800 + 100)
         temp.push(obj)
       }
+      temp.sort(function (a, b) {
+        return new Date(a.time) - new Date(b.time)
+      })
       this.materialList = temp
       this.bomMsg = [
         { name: '2.0-1128*1716' },

src/views/orderManage/orderManagerCockpit/cockpit.vue

@@ -72,6 +72,7 @@ import screenfull from 'screenfull'
 import BaseTable from './components/baseTable.vue'
 import moment from 'moment'
 import orderStatus from './components/orderStatus.vue'
+import { rateFormatter2 } from '@/filters/index'
 const orderPool = [
   {
     prop: 'customerName',
@@ -125,6 +126,7 @@ const orderMonitiring = [
   {
     prop: 'completion',
     label: '完成率',
+    filter: rateFormatter2,
     minWidth: 24.8
   },
   {
@@ -224,6 +226,7 @@ export default {
         arr1.push(obj)
       }
       this.orderList = arr1
+      const timeArr = ["2022-10-01", "2022-10-03", "2022-10-04", "2022-10-07","2022-10-11", "2022-10-12", "2022-10-15", "2022-10-18", "2022-10-19", "2022-10-21", "2022-10-23", "2022-10-26", "2022-10-27"]
       for (let i = 0; i < 20; i++) {
         const obj = {}
         const sj = parseInt(Math.random() * 200)
@@ -231,8 +234,7 @@ export default {
         obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
         obj.productName = productList[parseInt(Math.random() * (productList.length))]
         obj.planNum = parseInt(Math.random() * 800 + 100) + '(m²)'
-        obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
-        // obj.status = parseInt(Math.random() * 3 + 1)
+        obj.planDelivery = timeArr[i]
         obj.status = 4
         arr2.push(obj)
       }
@@ -243,8 +245,8 @@ export default {
         obj.customerName = compList[parseInt(Math.random() * (compList.length))]
         obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
         obj.status = parseInt(Math.random() * 3 + 1)
-        obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
-        obj.yield = parseInt(Math.random() * 50 + 50) + '%'
+        obj.completion = obj.status === 1 ? 0.00 : (obj.status === 3 ? 100 : parseInt(Math.random() * 100))
+        obj.yield = parseInt(Math.random() * 10 + 90) + '%'
         // obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
         // obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
         // obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
@@ -257,6 +259,9 @@ export default {
         obj.totalCost = '0'
         temp.push(obj)
       }
+      temp.sort(function (a, b) {
+        return new Date(a.completion) - new Date(b.completion)
+      })
       this.orderMonitiringList = temp
     },
     change() {

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;