电器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 {
@@ -37,9 +46,9 @@ export default {
         this.currentComponent = 'datav2';
       } else if (this.dataType == '5') {
         this.currentComponent = 'datav3';
-      } else if (this.dataType == '6'){
+      } else if (this.dataType == '6') {
         this.currentComponent = 'datav2';
-      } else{
+      } else {
         this.currentComponent = 'datav';
       }
     }

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

@@ -9,18 +9,18 @@
           <NewContain :resData="resData" style="width:100%;height:100%" />
         </div>
         <div class="main-container" style="width: 32%;">
-          <NewContain2 :resData="resData" style="width:100%;height:100%"/>
+          <NewContain2 :resData="resData" style="width:100%;height:100%" />
         </div>
         <div class="main-container" style="width: 32%;">
-          <NewContain3 :resData="resData" style="width:100%;height:100%"/>
+          <NewContain3 :resData="resData" style="width:100%;height:100%" />
         </div>
       </div>
       <div v-if="resData" style="display:flex;height: 44%;justify-content: space-around;">
         <div class="main-container" style="width: 48%;">
-          <NewContain4 :resData="resData" style="width:100%;height:100%"/>
+          <NewContain4 :resData="resData" style="width:100%;height:100%" />
         </div>
         <div class="main-container" style="width: 48%;">
-          <NewContain5 :resData="resData" style="width:100%;height:100%"/>
+          <NewContain5 :resData="resData" style="width:100%;height:100%" />
         </div>
       </div>
 
@@ -52,23 +52,32 @@ 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 = () => {
-    }).then(res=>{
+      this.$api.post('/api/pg/GetBIData', {
+        code: dataTypeParam
+      }).then(res => {
         console.log(res.data)
-      if(res.code == 200){
+        if (res.code == 200) {
           this.resData = res.data;
         }
 
       })
+    };
+    
+    loadData();
+    setInterval(() => {
+      loadData();
+    }, 1000 * 60);
+
   },
   data() {
     return {
-      resData:null,
+      resData: null,
-      dataType:'',
+      dataType: '',
-      dataType2:'整机',
+      dataType2: '整机',
       switchType: 2
     }
   }

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,39 +14,58 @@
     </div>
   </div>
 </template>
-
+ <script>
-<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,
   },
   props: {
-     resData:{
+    resData: {
-      type:Object,
+      type: Object,
+      required: true,
+      default: () => ({})
     },
     dataType: {
       type: String,
       default: ''
     }
   },
-  data () {
+  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',
@@ -58,30 +77,30 @@ export default {
           }
         },
         legend: {
-          data: ['目标产量','实际产量'],
+          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) { 
+              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) { 
+              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

@@ -20,43 +20,60 @@
   </div>
 </template>
 
-<script>
+ <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:{
+    resData: {
-      type:Object,
+      type: Object,
+      required: true
     },
     dataType: {
       type: String,
       default: ''
     }
   },
-  data () { 
+  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',
@@ -68,30 +85,30 @@ export default {
           }
         },
         legend: {
-          data: ['目标UPPH','实际UPPH'],
+          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) {
+              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) { 
+              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'