修改ui

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2024-03-25 15:59:53
+ # @LastEditTime: 2024-04-01 08:31:57
  # @LastEditors: zhp
  # @Description:
 ###
@@ -13,14 +13,14 @@ VUE_APP_TITLE = MES系统
 
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://100.64.0.26:48082'
-VUE_APP_BASE_API = 'http://10.70.2.2:8080'
+# VUE_APP_BASE_API = 'http://10.70.2.2:8080'
 # VUE_APP_BASE_API = 'http://192.168.1.20:48080'
 # VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.49:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.8:48082'
 # VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.104:48082'
-# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.62:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.47:48082'

src/views/OperationalOverview/coldBoard.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-01-29 16:50:26
- * @LastEditTime: 2024-03-29 16:51:53
+ * @LastEditTime: 2024-04-01 09:24:33
  * @LastEditors: zhp
  * @Description:
 -->
@@ -40,6 +40,12 @@
               <top-radio-group />
             </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
+            <div class="myLegend">
+              <div class="barLegend"></div>
+              <h4 class="barText">产线产量</h4>
+              <div class="barCircle"></div>
+              <h4 class="barCircleText">产线良品率</h4>
+            </div>
             <double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
               :height="359" :show-legend="true" />
           </base-container>
@@ -64,11 +70,11 @@
             </div> -->
             <!-- <el-row :gutter="9"> -->
             <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
-            <pile-bar-chart style="margin-top: -5px;" ref="firstPileChart" :height="80" />
+            <pile-bar-chart id=" 'one' " style="margin-top: -5px;" ref="firstPileChart" :height="80" />
             <second-pile-bar-chart id=" 'second' " ref="secondPileChart" :height="90" />
             <third-pile-bar-chart id=" 'third' " ref="thirdPileChart" :height="90" />
             <fourth-pile-bar-chart id=" 'fourth' " ref="fourthPileChart" :height="90" />
-            <fifth-pile-bar-chart style="margin-top: -5px;" id=" 'fifth' " ref="fifthPileChart" :height="100" />
+            <fifth-pile-bar-chart style="margin-top: -5px;" id=" 'fifth' " ref="fifthPileChart" :height="90" />
             <!-- <pile-bar-chart ref="secondPileChart"
               :height="90" />
             <pile-bar-chart ref="thirdPileChart"
@@ -314,88 +320,7 @@ export default {
     }
   },
   mounted() {
-    let nameList = []
+    this.getProductData()
-    let nameWasteList = []
-    let topNameList = []
-    let productList = []
-    let wasteList = []
-    let yieldList = []
-    let sumAreaList = []
-    // let yieldList = []
-    // this.cutTableDataList =
-    let coldDetData = [
-      {
-        "first": 0.8834,
-        "lineName": "Y61",
-        "product": 0.8834,
-        "productArea": 35069.28,
-        "second": 0,
-        'sumArea': 38400,
-        'wastArea': 3330.72,
-        "yield": 0.9133
-      },
-      {
-        "first": 0.847,
-        "lineName": "Y62",
-        "product": 0.847,
-        "productArea": 26765.46,
-        "second": 0,
-        'sumArea': 1111111,
-        'wastArea': 22222,
-        "yield": 0.9133
-      },
-      {
-        "first": 0.8668,
-        "lineName": "Y63",
-        "product": 0.8668,
-        "productArea": 26448.46,
-        "second": 0,
-        'sumArea': 1111111,
-        'wastArea': 22222,
-        "yield": 0.9133
-      },
-      {
-        "first": 0.9064,
-        "lineName": "Y64",
-        "product": 0.9064,
-        "productArea": 26667.32,
-        "second": 0,
-        'sumArea': 1111111,
-        'wastArea': 22222,
-        "yield": 0.9133
-      },
-      {
-        "first": 0.8838,
-        "lineName": "Y65",
-        "product": 0.8838,
-        "productArea": 26554.32,
-        "second": 0,
-        'sumArea': 1111111,
-        'wastArea': 22222,
-        "yield": 0.9133
-      }
-    ]
-    coldDetData.forEach((ele, index) => {
-      nameList.push(ele.lineName)
-      topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea + '㎡')
-      productList.push(ele.productArea)
-      wasteList.push(ele.wastArea)
-      nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡')
-      // yieldList.push({
-      //   name: '良品',
-      //   yield:ele.yield
-      // })
-      sumAreaList.push(ele.sumArea)
-      yieldList.push((ele.yield * 100).toFixed(3))
-    })
-    this.$nextTick(() => {
-      this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
-      this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
-      this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
-      this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
-      this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
-      this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
-    })
     // this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
     this.getTimes()
     // console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
@@ -417,6 +342,90 @@ export default {
     }
   },
   methods: {
+    getProductData() {
+      let nameList = []
+      let nameWasteList = []
+      let topNameList = []
+      let productList = []
+      let wasteList = []
+      let yieldList = []
+      let sumAreaList = []
+      // let yieldList = []
+      // this.cutTableDataList =
+      let coldDetData = [
+        {
+          "first": 0.8834,
+          "lineName": "Y61",
+          "product": 0.8834,
+          "productArea": 35069.28,
+          "second": 0,
+          'sumArea': 38400,
+          'wastArea': 3330.72,
+          "yield": 0.9133
+        },
+        {
+          "first": 0.847,
+          "lineName": "Y62",
+          "product": 0.847,
+          "productArea": 26765.46,
+          "second": 0,
+          'sumArea': 1111111,
+          'wastArea': 22222,
+          "yield": 0.9133
+        },
+        {
+          "first": 0.8668,
+          "lineName": "Y63",
+          "product": 0.8668,
+          "productArea": 26448.46,
+          "second": 0,
+          'sumArea': 1111111,
+          'wastArea': 22222,
+          "yield": 0.9133
+        },
+        {
+          "first": 0.9064,
+          "lineName": "Y64",
+          "product": 0.9064,
+          "productArea": 26667.32,
+          "second": 0,
+          'sumArea': 1111111,
+          'wastArea': 22222,
+          "yield": 0.9133
+        },
+        {
+          "first": 0.8838,
+          "lineName": "Y65",
+          "product": 0.8838,
+          "productArea": 26554.32,
+          "second": 0,
+          'sumArea': 1111111,
+          'wastArea': 22222,
+          "yield": 0.9133
+        }
+      ]
+      coldDetData.forEach((ele, index) => {
+        nameList.push(ele.lineName)
+        topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea + '㎡')
+        productList.push(ele.productArea)
+        wasteList.push(ele.wastArea)
+        nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡')
+        // yieldList.push({
+        //   name: '良品',
+        //   yield:ele.yield
+        // })
+        sumAreaList.push(ele.sumArea)
+        yieldList.push((ele.yield * 100).toFixed(3))
+      })
+      this.$nextTick(() => {
+        this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
+        this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+        this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
+        this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
+        this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
+        this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
+      })
+    },
     getData() {
       let detData = [
         {
@@ -784,7 +793,37 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.myLegend{
+  position: absolute;
+  top: -20px;
+  right: 50px;
+  font-size: 12px;
+  color: rgba(255,255,255,.6);
+  .barLegend{
+    // float: left;
+    background: linear-gradient(#9DD5FF, #1295FF);
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    margin-right: 5px;
+  }
+  .barText{
+    // float: right;
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .barCircle{
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: rgba(255, 209, 96, 1);
+    display: inline-block;
+    margin-right: 5px;
+  }
+  .barCircleText{
+    display: inline-block;
+  }
+}
 .visual-container {
   width: 1920px;
   height: 1080px;

src/views/OperationalOverview/components/coldDoubleYChart.vue

@@ -2,13 +2,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-03-29 16:25:59
+ * @LastEditTime: 2024-04-01 09:12:56
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" class="productChart" :style="{ height:   '390px', width: width }" />
+    <div :id="id" class="coldProductChart" :style="{ height:   '390px', width: width }" />
   </div>
 </template>
 
@@ -166,25 +166,25 @@ export default {
           bottom: "3%",
           containLabel: true
         },
-        legend: {
+        // legend: {
-          itemWidth: 10,
+        //   itemWidth: 10,
-          itemHeight: 10,
+        //   itemHeight: 10,
-          top: '5',
+        //   top: '5',
-          right: '20px',
+        //   right: '20px',
-          data: [
+        //   data: [
-            // { icon: 'rect', name: '直接访问' },
+        //     // { icon: 'rect', name: '直接访问' },
-            { icon: 'roundRect', name: '产线产量' },
+        //     { icon: 'roundRect', name: '产线产量' },
-            {
+        //     // {
-              icon: 'circle', name: '产线良品率',
+        //     //   icon: 'circle', name: '产线良品率',
-              itemWidth: 7,
+        //     //   itemWidth: 7,
-              itemHeight: 7,
+        //     //   itemHeight: 7,
-             },
+        //     //  },
-          ],
+        //   ],
-          textStyle: {
+        //   textStyle: {
-            fontSize: 12 * this.beilv,
+        //     fontSize: 12 * this.beilv,
-            color: '#ced1d5'
+        //     color: '#ced1d5'
-          }
+        //   }
-        },
+        // },
         xAxis: {
           axisTick: {
             show: false
@@ -308,7 +308,8 @@ export default {
 }
 </script>
 <style>
-.productChart{
+
+.coldProductChart{
   top: -10px;
 }
 </style>

src/views/OperationalOverview/components/doubleYChart .vue

@@ -173,7 +173,7 @@ export default {
             itemHeight: 10,
             top: '0%',
             right: '20px',
-            data: ['产线产量', '产线良品率'],
+            data: ['产线良品率', '产线产量'],
             textStyle: {
               fontSize: 12 * this.beilv,
               color: '#ced1d5',

src/views/OperationalOverview/components/pileBarChart.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2024-03-29 17:01:16
+ * @LastEditTime: 2024-04-01 09:14:45
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" class="productChart" :style="{ height:'75px', width: width }" />
+    <div :id="id" :style="{ height:'75px', width: width }" />
   </div>
 </template>
 
@@ -71,7 +71,10 @@ export default {
     }
   },
   mounted() {
-    console.log('mounted')
+    // console.log('mounted')
+    window.addEventListener('resize', () => {
+      this.resize()
+    })
     // console.log('borderRadius: ', this.borderRadius)
     // console.log('33333', this.dataList)
     // let arr = []
@@ -91,6 +94,12 @@ export default {
     this.chart = null
   },
   methods: {
+    resize() {
+      this.chart.resize({
+        width: 'auto',
+        height: 90
+      });;
+    },
     initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
       let rawData = []
       let colors = ['#0fdedb', '#2359ec']
@@ -239,10 +248,15 @@ export default {
         },
         series:series
       })
-      this.chart.resize({
+      this.$nextTick(() => {
-        width: 'auto',
+        setTimeout(() => {
-        height: 90
+          this.resize()
-      });;
+        },1000);
+      })
+      // this.chart.resize({
+      //   width: 'auto',
+      //   height: 90
+      // });;
     }
   }
 }