电器BI调整 q=6接口代码

src/App.vue

@@ -29,6 +29,15 @@ export default {
   created() {
     this.dataType = dataTypeParam;
 
+
+    if (this.dataType == '6') {
+      api.post2('/api/web/getBiData', ["yx_v_llzj", "yx_v_cpzj", "yx_v_zlkb", "yx_v_cpzj", "yx_v_byblv", "yx_v_byblzb"]).then(res => {
+        console.log(res);
+
+      });
+    }
+
+
     if (this.dataType == '3') {
       this.init();
     } else {

src/api.js

@@ -8,9 +8,17 @@ const api = {
 
   baseURL3: 'http://36.139.158.169:9261', 
 
-  // baseURL: 'http://ppjlar.demo.natool.cn', 
+   baseURL: 'http://xynzix.demo.natool.cn', 
 
-  baseURL: 'http://39.101.165.228:9009', 
+  //堡座
+  baseURL4: 'http://39.101.165.228:9009', 
+
+  //尚博
+  baseURL5: 'http://39.101.203.37:9001', 
+  baseURL6: 'http://127.0.0.1:9162', 
+ 
+
+ // baseURL: '', 
 
   get (url) {
     return new Promise((resolve, reject) => {

src/components/dianfanbao-demo/index.vue

@@ -52,10 +52,12 @@ export default {
   },
   created() {
     // 获取 URL 查询参数并设置 dataType
-    //  const queryParams = new URLSearchParams(window.location.search);
+    const queryParams = new URLSearchParams(window.location.search);
-    // const dataTypeParam = queryParams.get('q');
+    const dataTypeParam = queryParams.get('q');
-    this.$api.post('/api/pg/GetBIDemo',{
+
-      code:'11'
+    let loadData = () => {
+      this.$api.post('/api/pg/GetBIData', {
+        code: dataTypeParam
       }).then(res => {
         console.log(res.data)
         if (res.code == 200) {
@@ -63,6 +65,13 @@ export default {
         }
 
       })
+    };
+    
+    loadData();
+    setInterval(() => {
+      loadData();
+    }, 1000 * 60);
+
   },
   data() {
     return {

src/components/dianfanbao-demo/newContain.vue

@@ -11,21 +11,10 @@
             <p style="margin: 0;font-size: 19px;text-align: center;font-weight: bold;">BASIC INFORMATION</p>
           </div>
           <div class="ncbmc-content">
-            <div class="text-item">
+ 
-              <p class="item-left">总人数:</p>
+            <div class="text-item" v-for="(item,index) in resData.info.Infos" :key="'info'+index">
-              <p class="item-right">{{resData.info.PersonNumber}}人</p>
+              <p class="item-left">{{item.name}}:</p>
-            </div>
+              <p class="item-right">{{ item.content }}</p>
-            <!-- <div class="text-item">
-              <p class="item-left">订单数量:</p>
-              <p class="item-right">{{ resData.info.OrderQuantity }}</p>
-            </div>
-            <div class="text-item">
-              <p class="item-left">完成数:</p>
-              <p class="item-right">{{ resData.info.DoneQuantity }}</p>
-            </div> -->
-            <div class="text-item" v-for="(item,index) in resData.info.Contacts" :key="'person'+index">
-              <p class="item-left">负责人:</p>
-              <p class="item-right">{{item.Name}}：{{ item.Phone }}</p>
             </div>
             
           </div>

src/components/dianfanbao-demo/newContain2.vue

@@ -13,11 +13,11 @@
           <div class="ncb-currenttask">
               <div class="current-title">
                  <span class="title-decoration"></span>
-                 <span style="color: aqua;">当前工单：</span>WOOLA12134422
+                 <span style="color: aqua;">当前工单：</span>{{resData.info.OrderCode}}
               </div>
               <div class="current-item">
                 <span class="current-item-name">产品编码：</span>
-                <span class="current-item-value">{{resData.info.OrderCode}}</span>
+                <span class="current-item-value">{{resData.info.InventoryCode}}</span>
               </div>
                <div class="current-item">
                 <span class="current-item-name">产品名称：</span>
@@ -37,7 +37,7 @@
              <div style="display: flex;">
               <div class="current-item">
                 <span class="current-item-name">完工进度：</span>
-                <span class="current-item-value">{{resData.info.DoneRate * 100}}%</span>
+                <span class="current-item-value">{{parseFloat(resData.info.DoneRate * 100).toFixed(1)}}%</span>
               </div>
               <div class="current-item">
                 <span class="current-item-name">备料齐套进度：</span>

src/components/dianfanbao-demo/newContain4.vue

@@ -14,13 +14,11 @@
     </div>
   </div>
 </template>
-
  <script>
 import LabelTag from './LabelTag'
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 import testRes from './test'
 
-console.log(testRes)
 export default {
   name: 'CenterCmp',
   components: {
@@ -29,6 +27,8 @@ export default {
   props: {
     resData: {
       type: Object,
+      required: true,
+      default: () => ({})
     },
     dataType: {
       type: String,
@@ -36,17 +36,36 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      chart: null
+    }
   },
   mounted() {
-    this.initMixedChart()
+    this.initChart()
+    window.addEventListener('resize', this.resizeChart)
+  },
+  watch: {
+    // 监听 resData 的变化，重新渲染图表
+    resData: {
+      deep: true,
+      handler(newData) {
+        this.updateChart(newData)
+      }
+    }
   },
   methods: {
-    initMixedChart() {
+    initChart() {
-      const chartDom = document.getElementById('nbc-line1');
+      const chartDom = document.getElementById('nbc-line1')
-      const myChart = echarts.init(chartDom);
+      this.chart = echarts.init(chartDom)
-      const actualData = this.resData.productionData.actual; 
+      this.updateChart(this.resData)
-      const targetData = this.resData.productionData.target;
+    },
+    updateChart(data) {
+      if (!this.chart) return
+
+      const actualData = data.productionData.actual || []
+      const targetData = data.productionData.target || []
+      const timeSlots = data.productionData.timeSlots || []
+
       const option = {
         tooltip: {
           trigger: 'axis',
@@ -59,29 +78,29 @@ export default {
         },
         legend: {
           data: ['目标产量', '实际产量'],
-          bottom: 10, // 图例显示在下方
+          bottom: 10,
           textStyle: {
             fontSize: '20',
-            color: '#fff' // 图例文字为白色
+            color: '#fff'
           }
         },
         xAxis: {
           type: 'category',
-          data:this.resData.productionData.timeSlots,
+          data: timeSlots,
           axisLabel: {
-            fontSize: 14, // 放大 x 轴文字
+            fontSize: 14,
-            fontWeight: 'bold', // x 轴文字加粗
+            fontWeight: 'bold',
-            color: '#fff' // 设置 x 轴文字为白色
+            color: '#fff'
           }
         },
         yAxis: {
           type: 'value',
           axisLabel: {
-            fontSize: 20, // 放大 y 轴文字
+            fontSize: 20,
-            fontWeight: 'bold', // y 轴文字加粗
+            fontWeight: 'bold',
-            color: '#fff' // 设置 y 轴文字为白色
+            color: '#fff'
           },
-          splitLine: { // 关闭 y 轴辅助线
+          splitLine: {
             show: false
           }
         },
@@ -89,20 +108,20 @@ export default {
           {
             name: '实际产量',
             type: 'bar',
-            barWidth: '35%', // 缩小柱状图的条状宽度
+            barWidth: '35%',
             data: actualData,
             itemStyle: {
-              color: 'rgb(255, 255, 204)' // 天黄色
+              color: 'rgb(255, 255, 204)'
             },
             label: {
               show: true,
               position: 'inside',
               fontSize: '18px',
-              fontWeight: 'bolder', // 柱状图 label 字体加粗 
+              fontWeight: 'bolder',
               formatter: function (params) {
-                return params.value; 
+                return params.value
               },
-              color:'red',
+              color: 'red'
             }
           },
           {
@@ -110,25 +129,35 @@ export default {
             type: 'line',
             data: targetData,
             itemStyle: {
-              color: 'rgb(173, 216, 230)' // 浅蓝色
+              color: 'rgb(173, 216, 230)'
             },
             label: {
               show: true,
               position: 'top',
               fontSize: '20px',
-              fontWeight: 'bold', // 柱状图 label 字体加粗 
+              fontWeight: 'bold',
               formatter: function (params) {
-                return params.value; 
+                return params.value
               },
-              color: 'rgb(173, 216, 230)' // 浅蓝色
+              color: 'rgb(173, 216, 230)'
             }
           }
         ]
-      };
+      }
-      myChart.setOption(option);
+
-      window.addEventListener('resize', () => {
+      this.chart.setOption(option, true) // true 表示合并配置
-        myChart.resize();
+    },
-      });
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart)
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
     }
   }
 }

src/components/dianfanbao-demo/newContain5.vue

@@ -22,18 +22,20 @@
 
  <script>
 import LabelTag from './LabelTag'
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 import testRes from './test'
 
 console.log(testRes)
+
 export default {
   name: 'CenterCmp',
   components: {
-    LabelTag,
+    LabelTag
   },
   props: {
     resData: {
       type: Object,
+      required: true
     },
     dataType: {
       type: String,
@@ -41,22 +43,37 @@ export default {
     }
   },
   data() {
-
-
     return {
+      myChart: null // 保存 ECharts 实例
     }
   },
-  // 在mounted()中调用
   mounted() {
-    this.initMixedChart()
+    this.initChart()
+  },
+  watch: {
+    resData: {
+      deep: true,
+      handler(newVal) {
+        if (newVal && this.myChart) {
+          this.updateChart()
+        }
+      }
+    }
   },
-  // 在methods中添加方法
   methods: {
-    initMixedChart() {
+    initChart() {
-      const chartDom = document.getElementById('nbc-line2');
+      const chartDom = document.getElementById('nbc-line2')
-      const myChart = echarts.init(chartDom);
+      this.myChart = echarts.init(chartDom)
-      const actualData =this.resData.upphData.actual; 
+      this.updateChart()
-      const targetData =this.resData.upphData.target;
+
+      // 添加窗口大小变化监听器，自动调整图表大小
+      window.addEventListener('resize', this.handleResize)
+    },
+    updateChart() {
+      const actualData = this.resData.upphData.actual
+      const targetData = this.resData.upphData.target
+      const timeSlots = this.resData.upphData.timeSlots
+
       const option = {
         tooltip: {
           trigger: 'axis',
@@ -69,29 +86,29 @@ export default {
         },
         legend: {
           data: ['目标UPPH', '实际UPPH'],
-          bottom: 10, // 图例显示在下方
+          bottom: 10,
           textStyle: {
             fontSize: '20',
-            color: '#fff' // 图例文字为白色
+            color: '#fff'
           }
         },
         xAxis: {
           type: 'category',
-          data:this.resData.upphData.timeSlots,
+          data: timeSlots,
           axisLabel: {
-            fontSize: 14, // 放大 x 轴文字
+            fontSize: 14,
-            fontWeight: 'bold', // x 轴文字加粗
+            fontWeight: 'bold',
-            color: '#fff' // 设置 x 轴文字为白色
+            color: '#fff'
           }
         },
         yAxis: {
           type: 'value',
           axisLabel: {
-            fontSize: 20, // 放大 y 轴文字
+            fontSize: 20,
-            fontWeight: 'bold', // y 轴文字加粗
+            fontWeight: 'bold',
-            color: '#fff' // 设置 y 轴文字为白色
+            color: '#fff'
           },
-          splitLine: { // 关闭 y 轴辅助线
+          splitLine: {
             show: false
           }
         },
@@ -99,20 +116,20 @@ export default {
           {
             name: '实际UPPH',
             type: 'bar',
-            barWidth: '35%', // 缩小柱状图的条状宽度
+            barWidth: '35%',
             data: actualData,
             itemStyle: {
-              color: 'rgb(255, 255, 204)' // 天黄色
+              color: 'rgb(255, 255, 204)'
             },
             label: {
               show: true,
               position: 'inside',
               fontSize: '18px',
-              fontWeight: 'bolder', // 柱状图 label 字体加粗 
+              fontWeight: 'bolder',
               formatter: function (params) {
-                return params.value;
+                return params.value
               },
-              color: 'red',
+              color: 'red'
             }
           },
           {
@@ -120,25 +137,36 @@ export default {
             type: 'line',
             data: targetData,
             itemStyle: {
-              color: 'rgb(173, 216, 230)' // 浅蓝色
+              color: 'rgb(173, 216, 230)'
             },
             label: {
               show: true,
               position: 'top',
               fontSize: '20px',
-              fontWeight: 'bold', // 柱状图 label 字体加粗 
+              fontWeight: 'bold',
               formatter: function (params) {
-                return params.value; 
+                return params.value
               },
-              color: 'rgb(173, 216, 230)' // 浅蓝色
+              color: 'rgb(173, 216, 230)'
             }
           }
         ]
-      };
+      }
-      myChart.setOption(option);
+
-      window.addEventListener('resize', () => {
+      this.myChart.setOption(option, true) // 第二个参数为 true 表示合并配置
-        myChart.resize();
+    },
-      });
+    handleResize() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    }
+  },
+  beforeDestroy() {
+    // 组件销毁时移除监听器并释放图表资源
+    window.removeEventListener('resize', this.handleResize)
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
     }
   }
 }

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-// import App from './App.vue'
+ import App from './App.vue'
 // import App from './AppV2.vue'
-import App from './AppV3.vue'
+//import App from './AppV3.vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'