中小企业页面设备管理驾驶舱

src/main/webapp/HP/BI/HPBI003.jsp

@@ -202,7 +202,8 @@
                                     </div>
                                 </div>
                                 <div v-for="(temp,index) in queryXMinfoList"
-                                        class="page-title-project" style="margin-top: 0.8vh;height: 5vh;border: 1px solid #0097FF ;">
+                                        class="page-title-project"
+                                     style="margin-top: 0.8vh;height: 5vh;border: 1px solid #0097FF ;">
                                     <div v-for="(item,index) in queryXMinfoArrary "
                                          :key="index" class="project-title-font"  style="opacity: 0.7;"
                                     >
@@ -237,7 +238,6 @@
     const app = new Vue({
         el: '#app',
         components: {
-            <%--"home-page-top": "url:${ctx}/HP/BI/components/hipi/003/home-page-top.vue",--%>
             "home-page-left": "url:${ctx}/HP/BI/components/hipi/003/home-page-left.vue",
             "home-echarts": "url:${ctx}/HP/BI/components/hipi/003/home-echarts.vue",
         },
@@ -251,7 +251,7 @@
 
                 factory:'',
                 factoryList:[],
-                dataPicker: '',
+                dataPicker: '20241019',
                 querySplicingObject:[],
                 queryGroupCLnfoList:[],
                 queryBJInfoList:[],
@@ -733,7 +733,13 @@
         border: 1px solid #000000;
     }
     .project-title-font{
-        width: 20%;height: 100%;display: flex;font-size: 0.7vw;justify-content: center;align-items: center;color: #fff;
+        width: 20%;
+        height: 100%;
+        display: flex;
+        font-size: 0.7vw;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
     }
 </style>
 </body>

src/main/webapp/HP/BI/components/hipi/004/left-manage-device.vue

@@ -25,9 +25,20 @@
           <img src="../../hpjx/common/img/architectureDiagram.png" style="width: 100%;height: 100%" alt/>
         </div>
       </div>
-<!--      <div  class="right-device img">-->
-
-<!--      </div>-->
+      <div  class="right-device img">
+        <div style="width: 100%;height: 30%;display: flex;margin-top: 3vh;">
+          <div class="content-content-title" style="width: 40%;">组立机</div>
+          <img src="../../hpjx/common/img/device-img3-content.png" class="device-img1-content img" style="margin: 0;" alt/>
+        </div>
+        <div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;">
+          <div class="content-content-title" style="width: 40%;">埋弧焊机</div>
+          <img src="../../hpjx/common/img/device-img4-content.png" class="device-img1-content img" style="margin: 0;" alt/>
+        </div>
+        <div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;">
+          <div class="content-content-title" style="width: 40%;">激光焊接机</div>
+          <img src="../../hpjx/common/img/device-img5-content.png" class="device-img1-content img" style="margin: 0;" alt/>
+        </div>
+      </div>
     </div>
     <!--    <select></select>-->
   </div>
@@ -36,8 +47,6 @@
 module.exports = {
   data(){
     return {
-      name: '红安',
-      dataPicker:new Date,
     };
   },
 }
@@ -123,12 +132,11 @@ module.exports = {
   display: flex;
   justify-content: center;
   align-items: center;
-  //background-image: url("../../../../../common/img/titleContentDevice.png");
+//background-image: url("../../../../../common/img/titleContentDevice.png");
 }
 .right-device{
-  width: 50%;
+  width: 46%;
   height: 100%;
-  margin-top: 2vh;
-  background-image: url("../../../../../common/img/deviceImgRight.png");
+  background-image: url("../../../../../common/img/rightLongBg.png");
 }
 </style>

src/main/webapp/HP/BI/components/hipi/004/manage-echarts.vue

 <template>
-  <div ref="chartContainer" :style="{ width: '100%', height: '40vh' }"></div>
+  <div ref="chartContainer" :style="{ width: width+'vw', height: height + 'vh' }"></div>
 </template>
 
 <script>
 module.exports = {
   props: {
-    option: Object
+    option: {
+      type: Object,
+      required: true,
+    },
+    height: {
+      type: Number,
+      default: 35
+    },
+    width: {
+      type: Number,
+      default: 52
+    }
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    option: {
+      handler(newVal) {
+        if (this.chart) {
+          this.chart.setOption(newVal);
+        }
+      },
+      deep: true, // 监听对象内部属性的变化
+      immediate: true, // 在绑定时立即执行一次监听器
+    },
   },
   mounted() {
     this.initChart();
@@ -26,7 +53,7 @@ module.exports = {
       if (this.chart) {
         this.chart.resize();
       }
-    }
-  }
+    },
+  },
 };
 </script>