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

@@ -84,15 +84,6 @@ export default {
           left: 64,
           bottom: 28
         },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            axis: 'x'
-          },
-          extraCssText: 'width: 152px !important; height: 100px !important;'
-        },
         xAxis: [
           {
             type: 'category',
@@ -130,11 +121,10 @@ export default {
               fontSize: 10
             },
             splitLine: {
-              show: true,
+              show: false
-              lineStyle: {
+              // lineStyle: {
-                color: '#fff1',
+              //   color: '#fff3'
-                type: 'dotted'
+              // }
-              }
             }
           },
           {
@@ -158,11 +148,10 @@ export default {
               fontSize: 10
             },
             splitLine: {
-              show: true,
+              show: false
-              lineStyle: {
+              // lineStyle: {
-                color: '#fff1',
+              //   color: '#fff3'
-                type: 'dotted'
+              // }
-              }
             }
           },
           {
@@ -179,10 +168,8 @@ export default {
             type: 'value',
             splitNumber: 3,
             splitLine: {
-              show: true,
               lineStyle: {
-                color: '#fff1',
+                color: '#fff3'
-                type: 'dotted'
               }
             },
             axisLabel: {

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

@@ -51,15 +51,15 @@ export default {
           bottom: 0,
           containLabel: true
         },
-        tooltip: {
+        // tooltip: {
-          show: true,
+        //   show: true,
-          trigger: 'axis',
+        //   trigger: 'axis',
-          axisPointer: {
+        //   axisPointer: {
-            type: 'line',
+        //     type: 'cross',
-            axis: 'x'
+        //     axis: 'y'
-          },
+        //   }
-          extraCssText: 'width: 152px !important; height: 100px !important;'
+        //   formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
-        },
+        // },
         xAxis: {
           type: 'category',
           boundaryGap: false,
@@ -98,10 +98,8 @@ export default {
           },
           axisTick: { show: false },
           splitLine: {
-            show: true,
             lineStyle: {
-              color: '#fff1',
+              color: '#fff3'
-              type: 'dotted'
             }
           }
         },

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

@@ -130,7 +130,7 @@ export default {
   color: #fff9;
   border: 0;
   height: 100%;
-  /* overflow-y: auto; */
+  overflow-y: auto;
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,

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

@@ -144,7 +144,7 @@ export default {
   color: #fff9;
   border: 0;
   height: 100%;
-  /* overflow-y: auto; */
+  overflow-y: auto;
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,

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

@@ -1,5 +1,27 @@
 <template>
-  <!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
+  <techy-box style="width: 100%; height: calc(100% - 36px);">
+    <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
+
+    <!-- <new-bar
+      chart-name="realtime-cost-production"
+      :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
+      :data-list="[
+        {
+          topColor: 'rgba(59, 76, 118, 0.2)',
+          bottomColor: '#49FBD6',
+          name: '产量',
+          data: [64, 91, 55, 65, 37, 77]
+        },
+        {
+          topColor: 'rgba(59, 76, 118, 0.2)',
+          bottomColor: '#31A2FF',
+          name: '能耗',
+          data: [32, 65, 65, 54, 37, 77]
+        }
+      ]"
+    /> -->
+
+    <techy-bar :extra-space-between-zero="16" :datainfo="[
         {
           name: '产量',
           list: [64, 91, 55, 65, 37, 77]
@@ -8,233 +30,26 @@
           name: '能耗',
           list: [32, 65, 65, 54, 37, 77]
         }
-      ]" /> -->
+      ]" />
-  <div class="techy-chart" ref="realtimeLineChart"></div>
+  </techy-box>
 </template>
 
 <script>
-import echarts from 'echarts'
+import TechyBox from './TechyBox.vue'
-import resize from '@/views/OperationalOverview/components/mixins/resize'
+// import newBar from './newBar.vue'
+import TechyBar from './TechyBar.vue'
 
 export default {
-  name: 'RealtimeLineChart',
+  name: 'RealtimeProductionHorizontalBarChart',
-  mixins: [resize],
+  components: { TechyBox, TechyBar },
-  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  props: {},
-  inject: ['resizeStatus'],
-  /** End Fn.1 */
-  props: {
-    id: {
-      type: String,
-      default: 'default-dian-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
-    const colors = ['#1A99FF', '#F0D63C', '#E02094']
+    return {}
-
-    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
-    let data = [
-      // 温度走势
-      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
   }
-        return v
-      }),
-      // 电流走势
-      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      }),
-      // 电压走势
-      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      })
-    ]
-    let wendu = data[0]
-    let dianliu = data[1]
-    let dianya = data[2]
-
-    return {
-      chart: null,
-      option: {
-        color: colors,
-        legend: {
-          top: 28,
-          right: 40,
-          itemWidth: 10,
-          itemHeight: 10,
-          textStyle: {
-            color: '#fff9',
-            fontSize: 10
-          }
-          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
-        },
-        grid: {
-          top: 80,
-          left: 88,
-          right: 24,
-          bottom: 32
-        },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            axis: 'x'
-          },
-          extraCssText: 'width: 100px !important;'
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
-            axisTick: { show: false },
-            axisLabel: {
-              color: '#fff9'
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#fff3'
-              }
-            }
-          }
-        ],
-        yAxis: [
-          {
-            name: '能耗        ',
-            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
-            type: 'value',
-            splitNumber: 4,
-            onZero: true,
-            position: 'left',
-            offset: 40,
-            axisTick: { show: false },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#5982B2',
-                width: 1
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 10
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff1',
-                type: 'dotted'
-              }
-            }
-          },
-          {
-            name: '产量        ',
-            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
-            type: 'value',
-            splitNumber: 4,
-            axisTick: { show: false },
-            onZero: true,
-            position: 'left',
-            offset: 0,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#5982B2',
-                width: 1
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 10
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff1',
-                type: 'dotted'
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: '产线1',
-            type: 'line',
-            yAxisIndex: 0,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianliu,
-            symbol: 'none'
-          },
-          {
-            name: '产线2',
-            type: 'line',
-            yAxisIndex: 1,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianya,
-            symbol: 'none'
-          }
-        ]
-      }
-    }
-  },
-  computed: {
-    shouldResize() {
-      return this.resizeStatus()
-    }
-  },
-  watch: {
-    shouldResize(val, oldVal) {
-      setTimeout(() => {
-        this.chart.resize()
-      }, 250)
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
-      this.chart.setOption(this.option)
-    })
-  },
-  beforeDestroy() {
-    if (this.chart) this.chart.dispose()
-    this.chart = null
-  },
-  methods: {}
 }
 </script>
-
 <style scoped>
 .techy-chart {
-  position: absolute;
-  top: 0;
-  left: 0;
   height: 100%;
   width: 100%;
 }