update

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

@@ -58,7 +58,7 @@ const tableProps = [
   { prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
 ]
 const tableData = [
-  { eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' },
+  { eqName: '钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' },
   { eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
   { eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
   { eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
@@ -66,7 +66,7 @@ const tableData = [
   { eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
   { eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
   { eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
-  { eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '边角检测光源和相机的卫生' },
+  { eqName: '磨边后清洗机', pl: 'B', priority: 1, checkContent: '边角检测光源和相机的卫生' },
   { eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
   { eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
   { eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
@@ -74,7 +74,7 @@ const tableData = [
   { eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
   { eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
   { eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
-  { eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' },
+  { eqName: '预热', pl: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' },
   { eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
   { eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
   { eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }

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

@@ -60,13 +60,13 @@ const tableProps = [
 ]
 
 const tableData = [
-  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' },
-  { eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' },
+  { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 1, duration: '30 min' },
+  { eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 3, duration: '1 min' },
   { eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
   { eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
   { eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
   { eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
-  { eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 4, duration: '23 min' },
+  { eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 2, duration: '23 min' },
   { eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
   { eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
   {
@@ -78,8 +78,8 @@ const tableData = [
   },
   { eqName: '预热', plName: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' },
   { eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
-  { eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 4, duration: '29 min' },
-  { eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 4, duration: '47 min' },
+  { eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 3, duration: '29 min' },
+  { eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 1, duration: '47 min' },
   { eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
   { eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
   { eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },

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

@@ -2,7 +2,7 @@
   <techy-box style="width: 100%; height: calc(100% - 36px);">
     <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
 
-    <new-bar
+    <!-- <new-bar
       chart-name="realtime-cost-production"
       :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
       :data-list="[
@@ -19,17 +19,29 @@
           data: [32, 65, 65, 54, 37, 77]
         }
       ]"
-    />
+    /> -->
+
+    <techy-bar :extra-space-between-zero="16" :datainfo="[
+        {
+          name: '产量',
+          list: [64, 91, 55, 65, 37, 77]
+        },
+        {
+          name: '能耗',
+          list: [32, 65, 65, 54, 37, 77]
+        }
+      ]" />
   </techy-box>
 </template>
 
 <script>
 import TechyBox from './TechyBox.vue'
-import newBar from './newBar.vue'
+// import newBar from './newBar.vue'
+import TechyBar from './TechyBar.vue'
 
 export default {
   name: 'RealtimeProductionHorizontalBarChart',
-  components: { TechyBox, newBar },
+  components: { TechyBox, TechyBar },
   props: {},
   data() {
     return {}

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

@@ -0,0 +1,286 @@
+<template>
+  <div ref="techyBar" class="techy-bar"></div>
+</template>
+
+<script>
+import echarts from 'echarts' // echarts theme
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+import * as BottomPic from './bottom.png'
+
+export default {
+  name: 'TechyBarFor3DPage',
+  props: {
+    datainfo: {
+      type: Array,
+      default: () => [
+        {
+          name: '产线A',
+          list: [100, 102, 104, 105, 100, 117]
+        },
+        {
+          name: '产线B',
+          list: [110, 92, 124, 85, 100, 120]
+        }
+      ]
+    },
+    unitName: {
+      type: String,
+      default: ''
+    },
+    extraSpaceBetweenZero: {
+      type: Number,
+      default: 25
+    }
+  },
+  mixins: [resize],
+  data() {
+    const color_gradients = [
+      /** 蓝 */
+      {
+        direction: 'to top',
+        from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色
+        to: '#49B2FF00',
+        topAndBottom: '#49B2FF9F'
+      },
+      /** 绿 */
+      {
+        direction: 'to top',
+        from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色
+        to: '#49FBD600',
+        topAndBottom: '#49FBD69F'
+      }
+    ]
+
+    let result = []
+
+    this.datainfo.map((pl, index) => {
+      let topCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolPosition: 'end',
+        symbolOffset: ['25%', '-50%'],
+        // symbolSize: ['100%', 6],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          // color: color_gradients[index].topAndBottom
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+      let bottomCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolOffset: ['-25%', '50%'],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          color: color_gradients[index].from
+        }
+      }
+
+      let mainBar = {
+        __position: 'main',
+        type: 'bar',
+        name: pl.name,
+        // barWidth: 20, // 不需要设置 barWidth
+        barGap: '10%',
+        barCategoryGap: '48%',
+        data: pl.list,
+        z: 0,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].from
+              },
+              {
+                offset: 0.15,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff8',
+          fontSize: 8,
+          offset: [0, 6]
+        }
+      }
+
+      result.push(topCircle)
+      result.push(mainBar)
+      result.push(bottomCircle)
+    })
+
+    return {
+      BottomPic,
+      width: 0,
+      chart: null,
+      option: {
+        legend: {
+          icon: 'rect',
+          itemWidth: 8,
+          itemHeight: 8,
+          top: '2%',
+          right: '10%',
+          textStyle: {
+            color: '#fff8'
+          },
+          data: this.datainfo.map(item => item.name)
+        },
+        grid: {
+          top: 24,
+          left: '8%',
+          bottom: 24
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            onZero: false,
+            show: false,
+            lineStyle: {}
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 10
+          },
+          data: ['产线A', '产线B', '产线C', '产线D', '产线E', '产线F']
+        },
+        yAxis: {
+          type: 'value',
+          // min: -25,
+          min: this.extraSpaceBetweenZero * -1,
+          name: this.unitName,
+          nameTextStyle: {
+            color: '#fff8',
+            fontSize: 8,
+            verticalAlign: 'top',
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#31A2FF'
+            }
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 10,
+            /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
+            formatter: function(value, index) {
+              if (value < 0) {
+                return ''
+              }
+              return value
+            }
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#569acd',
+              type: 'dotted',
+              opacity: 0.2
+            }
+          }
+        },
+
+        series: result,
+
+        graphic: [
+          {
+            type: 'image',
+            left: 0,
+            bottom: 0,
+            style: {
+              image: 'image url',
+              height: 0,
+              width: 0
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.refreshOption)
+    if (!this.chart) this.chart = echarts.init(this.$refs.techyBar)
+
+    this.$nextTick(() => {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    })
+  },
+  methods: {
+    updateOption(option) {
+      // console.log('option', this.BottomPic.default)
+      let width = this.$refs.techyBar.querySelector('div').clientWidth
+      let height = this.$refs.techyBar.querySelector('div').clientHeight
+      option.graphic[0].style.width = width * 0.88
+      option.graphic[0].style.height = height * 0.3
+      option.graphic[0].style.image = this.BottomPic.default
+      option.graphic[0].left = '8%'
+      option.graphic[0].bottom = 24
+    },
+    refreshOption() {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.techy-bar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.techy-bar >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

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

@@ -78,7 +78,7 @@ export default {
   border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
   display: inline-block;
   position: relative;
-  padding: calc(24px * var(--beilv));
+  padding: calc(20px * var(--beilv));
   width: 100%;
   height: 100%;
   box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);

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

@@ -3,8 +3,8 @@
     <img class="logo-img" src="./logo.png" alt="cnbm" />
     <span class="techy-header__title">{{ headTitle }}</span>
 
-    <div class="date">2022.10.14</div>
-    <div class="time">20:12:24</div>
+    <div class="date">{{ now.format('yyyy.MM.DD') }}</div>
+    <div class="time">{{ now.format('HH:mm:ss') }}</div>
 
     <div class="fullscreen-btn">
       <span @click="handleClick('home')" v-html="homeSvg" />
@@ -16,6 +16,7 @@
 
 <script>
 import Cookie from 'js-cookie'
+import moment from 'moment'
 
 // const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -63,7 +64,20 @@ export default {
       fullScreenSvg,
       homeSvg,
       unfullScreenSvg,
-      isFullScreen: false
+      isFullScreen: false,
+      now: moment(),
+      interval: null
+    }
+  },
+  mounted() {
+    this.interval = setInterval(() => {
+      this.now = moment()
+    }, 1000)
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval)
+      this.interval = null
     }
   },
   methods: {

src/views/QualityManager/HomePage.vue

@@ -46,7 +46,7 @@
                       class="absolute top-0 left-0"
                       style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                     >
-                      <new-bar
+                      <!-- <new-bar
                         chart-name="realtime-cost-production"
                         :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                         :data-list="[
@@ -63,6 +63,19 @@
                             data: [162, 172, 122, 15, 82, 74]
                           }
                         ]"
+                      /> -->
+                      <techy-bar
+                        unit-name="单位/片"
+                        :datainfo="[
+                          {
+                            name: '产线A',
+                            list: [163, 184, 110, 22, 96, 74]
+                          },
+                          {
+                            name: '产线B',
+                            list: [162, 172, 122, 15, 82, 74]
+                          }
+                        ]"
                       />
                     </div>
                   </techy-box>
@@ -74,7 +87,7 @@
                       class="absolute top-0 left-0"
                       style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                     >
-                      <new-bar
+                      <!-- <new-bar
                         chart-name="realtime-cost-production"
                         :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                         unit-name="单位: 千片"
@@ -92,6 +105,20 @@
                             data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
                           }
                         ]"
+                      /> -->
+                      <techy-bar
+                        unit-name="单位/千片"
+                        :extra-space-between-zero="0.8"
+                        :datainfo="[
+                          {
+                            name: '产线A',
+                            list: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
+                          },
+                          {
+                            name: '产线B',
+                            list: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
+                          }
+                        ]"
                       />
                     </div>
                   </techy-box>
@@ -157,7 +184,7 @@
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产品成品率</techy-analysis-header>
                     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-                      <new-line-stack :data-update-token="dataUpdateToken" />
+                      <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
                     </div>
                     <div class="date-select">
                       <span
@@ -254,7 +281,8 @@ import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
 import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
 import { mapGetters } from 'vuex'
 import screenfull from 'screenfull'
-import NewBar from './components/charts/newBar.vue'
+
+import TechyBar from './components/charts/TechyBar.vue'
 import NewLineStack from './components/charts/newLineStack.vue'
 
 import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'
@@ -270,7 +298,7 @@ export default {
     TechyTable,
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
-    NewBar,
+    TechyBar,
     NewLineStack
   },
   data() {

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

@@ -0,0 +1,276 @@
+<template>
+  <div ref="techyBar" class="techy-bar"></div>
+</template>
+
+<script>
+import echarts from 'echarts' // echarts theme
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+import * as BottomPic from './bottom.png'
+
+export default {
+  name: 'TechyBar',
+  props: {
+    datainfo: {
+      type: Array,
+      default: () => [
+        {
+          name: '产线A',
+          list: [100, 102, 104, 105, 100, 117]
+        },
+        {
+          name: '产线B',
+          list: [110, 92, 124, 85, 100, 120]
+        }
+      ]
+    },
+    unitName: {
+      type: String,
+      default: ''
+    },
+    extraSpaceBetweenZero: {
+      type: Number,
+      default: 25
+    }
+  },
+  mixins: [resize],
+  data() {
+    const color_gradients = [
+      /** 蓝 */
+      {
+        direction: 'to top',
+        from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色
+        to: '#49B2FF00',
+        topAndBottom: '#49B2FF9F'
+      },
+      /** 绿 */
+      {
+        direction: 'to top',
+        from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色
+        to: '#49FBD600',
+        topAndBottom: '#49FBD69F'
+      }
+    ]
+
+    let result = []
+
+    this.datainfo.map((pl, index) => {
+      let topCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolPosition: 'end',
+        symbolOffset: ['25%', '-50%'],
+        // symbolSize: ['100%', 6],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          // color: color_gradients[index].topAndBottom
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+      let bottomCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolOffset: ['-25%', '50%'],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          color: color_gradients[index].from
+        }
+      }
+
+      let mainBar = {
+        __position: 'main',
+        type: 'bar',
+        name: pl.name,
+        // barWidth: 20, // 不需要设置 barWidth
+        barGap: '10%',
+        barCategoryGap: '48%',
+        data: pl.list,
+        z: 0,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].from
+              },
+              {
+                offset: 0.15,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff8',
+          fontSize: 8,
+          offset: [0, 6]
+        }
+      }
+
+      result.push(topCircle)
+      result.push(mainBar)
+      result.push(bottomCircle)
+    })
+
+    return {
+      BottomPic,
+      width: 0,
+      chart: null,
+      option: {
+        grid: {
+          left: '10%',
+          top: 48,
+          bottom: 28
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            onZero: false,
+            show: false,
+            lineStyle: {}
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 10
+          },
+          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
+        },
+        yAxis: {
+          type: 'value',
+          // min: -25,
+          min: this.extraSpaceBetweenZero * -1,
+          name: this.unitName,
+          nameTextStyle: {
+            color: '#fff8',
+            fontSize: 8,
+            verticalAlign: 'top',
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#31A2FF'
+            }
+          },
+          axisLabel: {
+            color: '#fff8',
+            fontSize: 10,
+            /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
+            formatter: function(value, index) {
+              if (value < 0) {
+                return ''
+              }
+              return value
+            }
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#569acd',
+              type: 'dotted',
+              opacity: 0.2
+            }
+          }
+        },
+
+        series: result,
+
+        graphic: [
+          {
+            type: 'image',
+            left: 0,
+            bottom: 0,
+            scaleX: 0.8,
+            style: {
+              image: 'image url',
+              height: 0,
+              width: 0
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.refreshOption)
+    if (!this.chart) this.chart = echarts.init(this.$refs.techyBar)
+
+    this.$nextTick(() => {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    })
+  },
+  methods: {
+    updateOption(option) {
+      // console.log('option', this.BottomPic.default)
+      let width = this.$refs.techyBar.querySelector('div').clientWidth
+      let height = this.$refs.techyBar.querySelector('div').clientHeight
+      option.graphic[0].style.width = width * 0.85
+      option.graphic[0].style.height = height * 0.25
+      option.graphic[0].style.image = this.BottomPic.default
+      option.graphic[0].left = '10%'
+      option.graphic[0].bottom = 28
+    },
+    refreshOption() {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.techy-bar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.techy-bar >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

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

@@ -1,398 +0,0 @@
-<template>
-  <div
-    ref="chartContainer"
-    class="chartContainer"
-    :class="bindClass"
-    style="position: relative; width: 100%; height:100%"
-  />
-</template>
-
-<script>
-import echarts from 'echarts' // echarts theme
-import resize from '@/views/OperationalOverview/components/mixins/resize'
-
-export default {
-  name: 'OverviewBar',
-  mixins: [resize],
-  props: {
-    unitName: {
-      type: String,
-      default: '单位: 片'
-    },
-    chartName: {
-      type: String,
-      default: ''
-    },
-    xlabelFontSize: {
-      type: Number,
-      default: 12
-    },
-    xlabelRotate: {
-      type: Number,
-      default: 0
-    },
-    nameList: {
-      type: Array,
-      default: () => []
-    },
-    dataList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      series: []
-    }
-  },
-  computed: {
-    bindClass() {
-      return {
-        'fault-category-chart': this.chartName === 'fault-category',
-        'process-fault-chart': this.chartName === 'process-fault',
-        'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
-      }
-    }
-  },
-  mounted() {
-    if (this.dataList.length > 1) {
-      this.series = [
-        {
-          // 柱体
-          name: this.dataList[0].name,
-          type: 'bar',
-          barWidth: 20,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[0].topColor },
-              { offset: 1, color: this.dataList[0].bottomColor }
-            ])
-          },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱顶
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolPosition: 'end',
-          symbolOffset: ['-70%', '-50%'],
-          symbolSize: [20, 6],
-          zlevel: 2,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(59, 76, 118, 0)' },
-              { offset: 1, color: '#2c6e7d' }
-            ])
-          },
-          data: this.dataList[0].data,
-          label: {
-            color:
-              this.chartName === 'process-fault'
-                ? 'rgba(119, 255, 242, 1)'
-                : this.chartName === 'fault-category'
-                ? '#31a2ff'
-                : '#fff9',
-            show: true,
-            offset: [-12, 10],
-            position: 'top',
-            vertialAlign: 'bottom'
-          }
-        },
-        {
-          // 柱底
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolOffset: ['-62%', '50%'],
-          symbolSize: [20, 6],
-          itemStyle: { color: this.dataList[0].bottomColor },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱体
-          name: this.dataList[1].name,
-          type: 'bar',
-          barWidth: 20,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[1].topColor },
-              { offset: 1, color: this.dataList[1].bottomColor }
-            ])
-          },
-          data: this.dataList[1].data
-        },
-        {
-          // 柱顶
-          name: this.dataList[1].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolPosition: 'end',
-          symbolOffset: ['66%', '-50%'],
-          symbolSize: [20, 6],
-          zlevel: 2,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[1].topColor },
-              { offset: 1, color: this.dataList[1].bottomColor }
-            ])
-          },
-          data: this.dataList[1].data,
-          label: {
-            color:
-              this.chartName === 'process-fault'
-                ? 'rgba(119, 255, 242, 1)'
-                : this.chartName === 'fault-category'
-                ? '#31a2ff'
-                : '#fff9',
-            show: true,
-            offset: [12, 10],
-            position: 'top',
-            vertialAlign: 'bottom'
-          }
-        },
-        {
-          // 柱底
-          name: this.dataList[1].name,
-          type: 'pictorialBar',
-          barWidth: 20,
-          symbol: 'circle',
-          symbolOffset: ['66%', '50%'],
-          symbolSize: [20, 6],
-          itemStyle: { color: this.dataList[1].bottomColor },
-          data: this.dataList[1].data
-        }
-      ]
-    } else {
-      const barWidth = 400 / 2 / this.dataList[0].data.length
-      this.series = [
-        {
-          // 柱体
-          name: this.dataList[0].name,
-          type: 'bar',
-          barWidth: barWidth,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: this.dataList[0].topColor },
-              { offset: 1, color: this.dataList[0].bottomColor }
-            ])
-          },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱顶
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: barWidth,
-          symbol: 'circle',
-          symbolPosition: 'end',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [barWidth, 6],
-          zlevel: 2,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(59, 76, 118, 0)' },
-              { offset: 1, color: '#2c6e7d' }
-            ])
-          },
-          label: {
-            color:
-              this.chartName === 'process-fault'
-                ? 'rgba(119, 255, 242, 1)'
-                : this.chartName === 'fault-category'
-                ? '#31a2ff'
-                : '#fff9',
-            show: true,
-            offset: [0, 10],
-            position: 'top',
-            vertialAlign: 'bottom'
-          },
-          data: this.dataList[0].data
-        },
-        {
-          // 柱底
-          name: this.dataList[0].name,
-          type: 'pictorialBar',
-          barWidth: barWidth,
-          symbol: 'circle',
-          symbolOffset: [0, '50%'],
-          symbolSize: [barWidth, 6],
-          itemStyle: { color: '#2c6e7d' },
-          data: this.dataList[0].data
-        }
-      ]
-    }
-    this.$nextTick(() => {
-      console.log('on Mounted(): ')
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$refs.chartContainer)
-      this.chart.setOption({
-        grid: {
-          top: '24%',
-          left: '8%',
-          right: '5%',
-          bottom: '5%',
-          containLabel: true
-        },
-        legend: {
-          show: false,
-          itemWidth: 10,
-          itemHeight: 10,
-          selectedMode: false,
-          top: '7%',
-          right: '2%',
-          textStyle: {
-            color: '#fff9',
-            fontSize: 12
-          }
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            margin: 16,
-            textStyle: {
-              fontSize: this.xlabelFontSize,
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-            },
-            rotate: this.xlabelRotate
-          },
-          data: this.nameList
-        },
-        yAxis: [
-          {
-            name: this.unitName, // '单位: 片',
-            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-            type: 'value',
-            splitNumber: 3,
-            axisTick: { show: false },
-            onZero: true,
-            position: 'left',
-            offset: 10,
-            axisLine: {
-              lineStyle: {
-                type: 'solid',
-                color: this.dataList[0].bottomColor,
-                // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
-                width: '1' // 坐标线的宽度
-              }
-            },
-            axisLabel: {
-              textStyle: {
-                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-              }
-            },
-            splitLine: {
-              lineStyle: {
-                type: 'dotted',
-                color: 'rgba(119, 255, 242, 0.2)'
-              }
-            },
-            type: 'value'
-          }
-          // {
-          //   name: '能耗kw/h',
-          //   nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-          //   type: 'value',
-          //   splitNumber: 3,
-          //   axisTick: { show: false },
-          //   onZero: true,
-          //   position: 'left',
-          //   offset: 48,
-          //   axisLine: {
-          //     lineStyle: {
-          //       type: 'solid',
-          //       color: this.dataList[1].bottomColor,
-          //       width: '1' // 坐标线的宽度
-          //     }
-          //   },
-          //   axisLabel: {
-          //     textStyle: {
-          //       color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-          //     }
-          //   },
-          //   splitLine: {
-          //     show: false
-          //     // lineStyle: {
-          //     //   type: 'dotted',
-          //     //   color: 'rgba(119, 255, 242, 0.2)'
-          //     // }
-          //   },
-          //   type: 'value'
-          // }
-        ],
-        series: this.series
-      })
-    }
-  }
-}
-</script>
-<style scoped>
-.chartContainer >>> div {
-  width: 100% !important;
-  height: 100% !important;
-  /* position: relative !important; */
-}
-
-.fault-category-chart >>> div::before {
-  /* .fault-category-chart::before { */
-  content: '';
-  position: absolute;
-  /* bottom: calc(100vh/1920 * 80);
-  left: calc(100vw/1920 * 48); */
-  /* bottom: calc(10% + 100vh/1920 * 28); */
-  bottom: 25px;
-  left: 9%;
-  height: 52px;
-  width: 90%;
-  background: linear-gradient(to top, #31a2ff6d, transparent);
-  transform: skew(-45deg);
-  z-index: 0;
-}
-.process-fault-chart >>> div::before {
-  /* .process-fault-chart::before { */
-  content: '';
-  position: absolute;
-  bottom: 26px;
-  left: 10%;
-  height: 48px;
-  width: 90%;
-  background: linear-gradient(to top, #49fbd789, transparent);
-  transform: skew(-45deg);
-  z-index: 0;
-}
-.realtime-production-cost-chart >>> div::before {
-  /* .fault-category-chart::before { */
-  content: '';
-  position: absolute;
-  bottom: 12%;
-  left: 6%;
-  height: 30px;
-  width: 90%;
-  border-radius: 3px;
-  /* border: 1px solid #49fbd7; */
-  background: linear-gradient(to top, #49fbd789 5%, transparent);
-  transform: skew(-35deg);
-  z-index: 0;
-}
-</style>

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

@@ -10,6 +10,11 @@ export default {
   name: 'PlFaultAnalysisPieChart',
   mixins: [resize],
   props: {
+    mode: {
+      type: String,
+      default: '',
+      validator: val => ['month', 'day'].indexOf(val) !== -1
+    },
     dataUpdateToken: {
       type: String,
       default: 'default-token'
@@ -37,25 +42,28 @@ export default {
           bottom: '5%',
           containLabel: true
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            axisLine: {
-              lineStyle: {
-                color: '#ffffff66'
-              }
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff66'
+            }
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: 10,
+              color: '#fff8' //
             },
-            axisTick: { show: false },
-            axisLabel: {
-              textStyle: {
-                color: 'rgba(255,255,255,1)' //
-              },
-              margin: 12
-            },
-            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
-          }
-        ],
+            margin: 12
+          },
+          data:
+            this.mode === 'month'
+              ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+              : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        },
+
         yAxis: [
           {
             name: '成品率',
@@ -120,13 +128,24 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [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
-            })
+            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
+                  })
           },
           {
             name: '磨边机',
@@ -157,129 +176,173 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
-          },
-          {
-            name: '镀膜机',
-            type: 'line',
-            symbol: 'none',
-
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              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
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
-          },
-          {
-            name: '包装纸',
-            type: 'line',
-            symbol: 'none',
-
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#A691FF66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
-          },
-          {
-            name: '丝印',
-            type: 'line',
-            symbol: 'none',
-
-            label: {
-              show: true,
-              position: 'top'
-            },
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#49FBD666' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
+            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
+                  })
           }
+          // {
+          //   name: '镀膜机',
+          //   type: 'line',
+          //   symbol: 'none',
+
+          //   areaStyle: {
+          //     // color: 'rgba(50,145,152,0.5)'
+          //     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
+          //     }
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   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
+          //         })
+          // },
+          // {
+          //   name: '包装纸',
+          //   type: 'line',
+          //   symbol: 'none',
+
+          //   areaStyle: {
+          //     // color: 'rgba(50,145,152,0.5)'
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#A691FF66' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   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
+          //         })
+          // },
+          // {
+          //   name: '丝印',
+          //   type: 'line',
+          //   symbol: 'none',
+
+          //   label: {
+          //     show: true,
+          //     position: 'top'
+          //   },
+          //   areaStyle: {
+          //     // color: 'rgba(50,145,152,0.5)'
+          //     color: {
+          //       type: 'linear',
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: '#49FBD666' // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: 'transparent' // 100% 处的颜色
+          //         }
+          //       ],
+          //       global: false // 缺省为 false
+          //     }
+          //   },
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   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
+          //         })
+          // }
         ]
       }
     }
@@ -308,15 +371,34 @@ export default {
   },
   methods: {
     refreshData() {
+      // update xaxis
+      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]
+          : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+
+      // update series
       this.configs.series.forEach(item => {
-        item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
-          let v = Math.floor(Math.random() * 100)
-          while (v < 80) {
-            v = Math.floor(Math.random() * 100)
-          }
-          return v
-        })
+        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
+              })
       })
+
       if (this.chart) this.chart.setOption(this.configs)
     }
   }