可视化顺序调整

.env.production

@@ -3,6 +3,6 @@ VUE_APP_ENV = 'Prod'
 NODE_ENV = 'production'
 # base api
 #广州线上
-#VUE_APP_BASE_API = 'http://10.122.64.94:8093'
+VUE_APP_BASE_API = 'http://10.122.64.94:8093'
 #广州供应商门户线上
-VUE_APP_BASE_API = 'http://8.134.81.220:8097'
+#VUE_APP_BASE_API = 'http://8.134.81.220:8097'

src/views/DataV/index.vue

@@ -3,52 +3,60 @@
     <header class="title-wrap">4# 弧焊机</header>
     <div class="content-wrap">
       <div class="content-style content-left-wrap">
-        <lineMarkArea lineMarkAreaId="left-line-mark-area" :echartsData="allData[0] || {}" contentTitle="A工位 实时数据展示" />
-        <lineMark lineMarkId="left-line-mark" :echartsData="allData[2] || {}" />
+        <lineMarkArea line-mark-area-id="left-line-mark-area"
+                      :echarts-data="allData[0] || {}"
+                      content-text="A工位"
+                      content-title="A工位 工时统计数据" />
+        <lineMark line-mark-id="left-line-mark"
+                  :echarts-data="allData[2] || {}" />
       </div>
       <div class="content-style content-right-wrap">
-        <lineMarkArea lineMarkAreaId="right-line-mark-area" :echartsData="allData[1] || {}" contentTitle="B工位 实时数据展示" />
-        <lineMark lineMarkId="right-line-mark" :echartsData="allData[3] || {}" />
+        <lineMarkArea line-mark-area-id="right-line-mark-area"
+                      :echarts-data="allData[1] || {}"
+                      content-text="B工位"
+                      content-title="B工位 工时统计数据" />
+        <lineMark line-mark-id="right-line-mark"
+                  :echarts-data="allData[3] || {}" />
       </div>
     </div>
   </div>
 </template>
 <script>
-  import lineMarkArea from "./lineMarkArea.vue";
-  import lineMark from './lineMark.vue';
-  import {
-    filterdatainfo
-  } from '../../api/dataL.js'
-  export default {
-    data() {
-      return {
-        allData: []
-      }
-    },
-    components: {
-      lineMarkArea,
-      lineMark
-    },
-    methods: {
-      getData() {
-        const _this = this;
-        filterdatainfo('/admin/report/filterdatainfo/display', {}).then(({
-          code,
-          data
-        }) => {
-          if (code === 200 && data.length) {
-            _this.allData = data;
-          }
-        })
-        setTimeout(() => {
-          _this.getData();
-        }, 10000)
-      }
-    },
-    mounted() {
-      this.getData();
+import lineMarkArea from './lineMarkArea.vue'
+import lineMark from './lineMark.vue'
+import {
+  filterdatainfo
+} from '../../api/dataL.js'
+export default {
+  components: {
+    lineMarkArea,
+    lineMark
+  },
+  data() {
+    return {
+      allData: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      const _this = this
+      filterdatainfo('/admin/report/filterdatainfo/display', {}).then(({
+        code,
+        data
+      }) => {
+        if (code === 200 && data.length) {
+          _this.allData = data
+        }
+      })
+      setTimeout(() => {
+        _this.getData()
+      }, 10000)
     }
   }
+}
 
 </script>
 <style scoped>

src/views/DataV/lineMark.vue

@@ -1,45 +1,46 @@
 <template>
   <div class="echarts-wrap">
     <div class="echarts-title">
-      <span class="left-img" />{{(echartsData && echartsData.title) || '工时统计数据'}}<span class="right-img" />
+      <span class="left-img" />{{ (echartsData && echartsData.title) || '设备工时统计数据' }}<span class="right-img" />
     </div>
+    <p class="user-time">平均工时：{{ echartsData.avg || 0 }}{{ echartsData.uom || 's' }}</p>
     <div :id="lineMarkId" class="float-line-echarts" />
   </div>
 </template>
 <script>
-  export default {
-    props: {
-      lineMarkId: {
-        //限定参数的类型为字符串型
-        type: String,
-        //指定参数默认值为字符串“你好”
-        default: 'line-mark-echarts'
-      },
-       echartsData:{
-        type: Object,
-        default:{}
-      }
-    },
-    data() {
-      return {}
+export default {
+  props: {
+    lineMarkId: {
+      // 限定参数的类型为字符串型
+      type: String,
+      // 指定参数默认值为字符串“你好”
+      default: 'line-mark-echarts'
     },
-    watch: {
-      echartsData: {
-        handler(newValue, oldValue) {
-          if(JSON.stringify(newValue) != JSON.stringify(oldValue)){
-             this.lineMarkChart && this.lineMarkChart.setOption && this.lineMarkChart.setOption(newValue);
-          }
-        },
-        deep: true
-      }
-    },
-    mounted() {
-      // 拆线水平填充图
-      var lineMark = document.getElementById(this.lineMarkId);
-      this.lineMarkChart = new window.echarts.lineMark(lineMark);
-      this.lineMarkChart.setOption(this.echartsData || {});
+    echartsData: {
+      type: Object,
+      default: {}
     }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    echartsData: {
+      handler(newValue, oldValue) {
+        if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
+          this.lineMarkChart && this.lineMarkChart.setOption && this.lineMarkChart.setOption(newValue)
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // 拆线水平填充图
+    var lineMark = document.getElementById(this.lineMarkId)
+    this.lineMarkChart = new window.echarts.lineMarkArea(lineMark)
+    this.lineMarkChart.setOption(this.echartsData || {})
   }
+}
 
 </script>
 <style scoped>
@@ -85,7 +86,21 @@
     background-size: 100% 100%;
     margin-left: 10px;
   }
-
+  .user-time {
+    position: absolute;
+    top: 38px;
+    right: 16px;
+    width: 170px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    background: #091954;
+    border: 1px solid #0036C3;
+    text-align: center;
+  }
   .float-line-echarts {
     width: 100%;
     height: 100%;

src/views/DataV/lineMarkArea.vue

@@ -1,58 +1,56 @@
 <template>
   <div style="width:100%;">
     <p class="content-title">
-      <span class="left-img" />{{contentTitle}}<span class="right-img" />
+      <span class="left-img" />{{ contentTitle }}<span class="right-img" />
     </p>
     <div class="echarts-wrap">
       <div class="echarts-title">
-        <span class="left-img" />{{(echartsData && echartsData.title) || '工时统计数据'}}<span class="right-img" />
+        <span class="left-img" />{{ (echartsData && echartsData.title) || '实时数据展示' }}<span class="right-img" />
       </div>
       <div class="task-detall">
-        <p class="task-num">A工位 产量：<span class="task-value">{{echartsData.capacity || 0}}件</span></p>
-        <p class="task-mu">A工位 MU：<span class="task-value">{{echartsData.mu || 0}}</span></p>
+        <p class="task-num">{{ contentText }} 产能：<span class="task-value">{{ echartsData.capacity || 0 }}件</span></p>
+        <p class="task-mu">{{ contentText }} MU：<span class="task-value">{{ echartsData.mu || 0 }}</span></p>
       </div>
-      <p class="user-time">平均工时：{{echartsData.avg || 0}}{{echartsData.uom || 's'}}</p>
       <div :id="lineMarkAreaId" class="float-line-echarts" />
     </div>
   </div>
 </template>
 <script>
-  export default {
-    props: {
-      lineMarkAreaId: {
-        type: String,
-        default: 'line-mark-echarts'
-      },
-      echartsData: {
-        type: Object,
-        default: {}
-      },
-      contentTitle: {
-        type: String,
-        default: '工位 实时数据展示'
-      }
+export default {
+  props: {
+    lineMarkAreaId: {
+      default: 'line-mark-echarts'
     },
-    data() {
-      return {}
+    echartsData: {
+      default: {}
     },
-    watch: {
-      echartsData: {
-        handler(newValue, oldValue) {
-          if(JSON.stringify(newValue) != JSON.stringify(oldValue)){
-             this.lineMarkAreaChart && this.lineMarkAreaChart.setOption && this.lineMarkAreaChart.setOption(newValue);
-          }
-        },
-        deep: true
-      }
+    contentTitle: {
+      default: '工位 实时数据展示'
     },
-    mounted() {
-      // 拆线水平填充图
-      var lineMarkArea = document.getElementById(this.lineMarkAreaId);
-      this.lineMarkAreaChart = new window.echarts.lineMarkArea(lineMarkArea);
-      this.lineMarkAreaChart.setOption(this.echartsData || {});
+    contentText: {
+      default: '工位'
     }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    echartsData: {
+      handler(newValue, oldValue) {
+        if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
+          this.lineMarkAreaChart && this.lineMarkAreaChart.setOption && this.lineMarkAreaChart.setOption(newValue)
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // 拆线水平填充图
+    var lineMarkArea = document.getElementById(this.lineMarkAreaId)
+    this.lineMarkAreaChart = new window.echarts.lineMark(lineMarkArea)
+    this.lineMarkAreaChart.setOption(this.echartsData || {})
   }
-
+}
 </script>
 <style scoped>
   .echarts-wrap {
@@ -143,31 +141,11 @@
     color: #FF6D46;
   }
 
-
-
-  .user-time {
-    position: absolute;
-    top: 38px;
-    right: 16px;
-    width: 170px;
-    height: 40px;
-    line-height: 40px;
-    font-size: 16px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    background: #091954;
-    border: 1px solid #0036C3;
-    text-align: center;
-  }
-
   .float-line-echarts {
     width: 100%;
     height: 100%;
   }
 
-
-
   .content-title {
     position: absolute;
     top: -22px;
@@ -185,5 +163,4 @@
   .content-left-wrap {
     float: left;
   }
-
 </style>