修改显示

src/views/cs/index3.vue

@@ -7,18 +7,18 @@
 <!--    <div class="modelTitle" style="top:65%;left:32%">近7天产量</div>-->
     <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>
     <div class="modelTitle" style="top:65%;left:71%">计划达成率</div>
-    <div class="title1" style="top:24%;left:34%">成型机产量：</div>
+<!--    <div class="title1" style="top:24%;left:34%">成型机产量：</div>-->
-    <div class="title1" style="top:24%;left:52.5%">烘房产量：</div>
+<!--    <div class="title1" style="top:24%;left:52.5%">烘房产量：</div>-->
-    <div class="title1" style="top:45%;left:34%">烘房耗电量：</div>
+<!--    <div class="title1" style="top:45%;left:34%">烘房耗电量：</div>-->
-    <div class="title1" style="top:45%;left:52.5%">AGV开动数量：</div>
+<!--    <div class="title1" style="top:45%;left:52.5%">AGV开动数量：</div>-->
-    <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>
+<!--    <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>-->
-    <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>
+<!--    <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>-->
-    <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>
+<!--    <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>-->
-    <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>
+<!--    <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>-->
-    <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>
+<!--    <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
-    <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>
+<!--    <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
-    <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>
+<!--    <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>-->
-    <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>
+<!--    <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>-->
     <div class="title2" style="top: 73.5%;left: 86.8%;">计划生产数量：</div>
     <div class="title2" style="top: 85.3%;left: 86.8%;">实际生产数量：</div>
     <div class="unit2" style="top: 76.5%;left: 95%;">车</div>
@@ -84,6 +84,7 @@
     </div>
     <Chart ref="chart1" class="chart1"></Chart>
     <Chart ref="chart2" class="chart2"></Chart>
+    <Chart ref="chart3" class="chart3"></Chart>
   </div>
 </template>
 <script>
@@ -139,6 +140,104 @@ export default {
       })
       EnergyExpend().then(e => {
         this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
+
+        let option2 = {
+          grid: {
+            top: '15%',
+            bottom: '10%',
+            // left: '5%',
+            right: '3%'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                show: true
+              }
+            }
+          },
+          legend: {
+            right: 0,
+            textStyle: {
+              color: '#eee'
+            }
+          },
+          xAxis: {
+            data: e.map(v => v.monitorName.split(' - ')?.[1]?.split('(')?.[0]),
+            axisLine: {
+              show: true, //隐藏X轴轴线
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisTick: {
+              show: true //隐藏X轴刻度
+            },
+            axisLabel: {
+              interval:0,
+              show: true,
+              textStyle: {
+                color: '#fff' //X轴文字颜色
+              }
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              name: '单位：KWh',
+              nameTextStyle: {
+                color: '#fff'
+              },
+              splitLine: {
+                show: false
+              },
+              axisTick: {
+                show: true
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#fff'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              label: {
+                show: true,
+                position: 'top',
+                formatter: "{c}",
+                color: "#fff"
+              },
+              name: '耗电量',
+              type: 'bar',
+              smooth: true, //平滑曲线显示
+              showAllSymbol: true, //显示所有图形。
+              symbol: "emptyCircle", //标记的图形为实心圆
+              symbolSize: 5, //标记的大小
+              // itemStyle: {
+              //   //折线拐点标志的样式
+              //   color: "#058cff",
+              // },
+              // lineStyle: {
+              //   color: "#058cff",
+              // },
+              // areaStyle: {
+              //   color: "rgba(5,140,255, 0.2)",
+              // },
+              data: e.map(v => parseFloat(v.expend)),
+            },
+          ]
+        };
+        this.$refs.chart3.setData(option2)
       })
       agvdata().then(e => {
         console.log(e)
@@ -259,8 +358,7 @@ export default {
         this.$refs.chart1.setData(option)
       })
 
-      EnergyExpend().then(e => {
+      getHourProductionLists().then(e => {
-        console.log(e)
         let option1 = {
           grid: {
             top: '15%',
@@ -284,7 +382,7 @@ export default {
             }
           },
           xAxis: {
-            data: e.map(v => v.monitorName.split(' - ')?.[1]?.split('(')?.[0]),
+            data: e.map(v => v.pdate),
             axisLine: {
               show: true, //隐藏X轴轴线
               lineStyle: {
@@ -295,7 +393,6 @@ export default {
               show: true //隐藏X轴刻度
             },
             axisLabel: {
-              interval:0,
               show: true,
               textStyle: {
                 color: '#fff' //X轴文字颜色
@@ -337,8 +434,8 @@ export default {
                 formatter: "{c}",
                 color: "#fff"
               },
-              name: '耗电量',
+              name: '产量',
-              type: 'bar',
+              type: 'line',
               smooth: true, //平滑曲线显示
               showAllSymbol: true, //显示所有图形。
               symbol: "emptyCircle", //标记的图形为实心圆
@@ -353,110 +450,12 @@ export default {
               // areaStyle: {
               //   color: "rgba(5,140,255, 0.2)",
               // },
-              data: e.map(v => parseFloat(v.expend)),
+              data: e.map(v => parseFloat(v.quantity)),
             },
           ]
         };
         this.$refs.chart2.setData(option1)
       })
-      getHourProductionLists().then(e => {
-        // let option1 = {
-        //   grid: {
-        //     top: '15%',
-        //     bottom: '10%',
-        //     // left: '5%',
-        //     right: '3%'
-        //   },
-        //   tooltip: {
-        //     trigger: 'axis',
-        //     axisPointer: {
-        //       type: 'shadow',
-        //       label: {
-        //         show: true
-        //       }
-        //     }
-        //   },
-        //   legend: {
-        //     right: 0,
-        //     textStyle: {
-        //       color: '#eee'
-        //     }
-        //   },
-        //   xAxis: {
-        //     data: e.map(v => v.pdate),
-        //     axisLine: {
-        //       show: true, //隐藏X轴轴线
-        //       lineStyle: {
-        //         color: '#fff'
-        //       }
-        //     },
-        //     axisTick: {
-        //       show: true //隐藏X轴刻度
-        //     },
-        //     axisLabel: {
-        //       show: true,
-        //       textStyle: {
-        //         color: '#fff' //X轴文字颜色
-        //       }
-        //     }
-        //   },
-        //   yAxis: [
-        //     {
-        //       type: 'value',
-        //       name: '单位：车',
-        //       nameTextStyle: {
-        //         color: '#fff'
-        //       },
-        //       splitLine: {
-        //         show: false
-        //       },
-        //       axisTick: {
-        //         show: true
-        //       },
-        //       axisLine: {
-        //         show: true,
-        //         lineStyle: {
-        //           color: '#fff'
-        //         }
-        //       },
-        //       axisLabel: {
-        //         show: true,
-        //         textStyle: {
-        //           color: '#fff'
-        //         }
-        //       }
-        //     }
-        //   ],
-        //   series: [
-        //     {
-        //       label: {
-        //         show: true,
-        //         position: 'top',
-        //         formatter: "{c}",
-        //         color: "#fff"
-        //       },
-        //       name: '产量',
-        //       type: 'line',
-        //       smooth: true, //平滑曲线显示
-        //       showAllSymbol: true, //显示所有图形。
-        //       symbol: "emptyCircle", //标记的图形为实心圆
-        //       symbolSize: 5, //标记的大小
-        //       // itemStyle: {
-        //       //   //折线拐点标志的样式
-        //       //   color: "#058cff",
-        //       // },
-        //       // lineStyle: {
-        //       //   color: "#058cff",
-        //       // },
-        //       // areaStyle: {
-        //       //   color: "rgba(5,140,255, 0.2)",
-        //       // },
-        //       data: e.map(v => parseFloat(v.quantity)),
-        //     },
-        //   ]
-        // };
-        // this.$refs.chart2.setData(option1)
-      })
     },
   },
 }
@@ -592,9 +591,16 @@ export default {
   top: 67.6%;
   left: 31.3%;
 
+}
+.chart3 {
+  position: absolute;
+  width: 37.4%;
+  height: 42.5%;
+  top: 17.6%;
+  left: 31.3%;
 }
 
-.case-item {
+  .case-item {
   border: 2px solid #0c61ad;
   border-radius: 2px;
   margin: 8px 0 0 0;