首页-各组线每月设备故障数

src/api/mes/reportWork.js

@@ -81,6 +81,14 @@ export function getLineChartData() {
 		method: 'get'
 	});
 }
+
+// 获取组线每月设备故障数
+export function getGroupLineEquInfo() {
+  return request({
+    url: '/device/deviceInterface/getGroupLineEquInfo',
+    method: 'get'
+  });
+}
 //查询设备小时表头
 export function getHourProductionTitle(query) {
 	return request({

src/views/dashboard/DeviceChartLine.vue

@@ -0,0 +1,101 @@
+
+<template>
+  <div>
+    <div ref="chart" style="width:50%;height:376px"></div>
+  </div>
+
+</template>
+
+<script>
+
+
+import {getGroupLineEquInfo} from "@/api/mes/reportWork";
+
+export default {
+  data() {
+    return{
+    }
+  },
+  mounted() {
+    this.getGroupLineEquInfo();
+    this.getEchartData();
+  },
+  methods: {
+    getGroupLineEquInfo(){
+
+      getGroupLineEquInfo().then(response => {
+        var info = response.data;
+        var groupLineNames = [];
+        for (let i = 0; i < info.length; i++) {
+          // 将组线名称置入
+          groupLineNames.push(info[i].name);
+          info[i].type = 'line';
+          info[i].smooth = true;
+          info[i].stack = 'Total';
+        }
+        // 月份信息
+        var monthTemp = ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
+        monthTemp.splice(new Date().getMonth()+1)
+
+        const chart = this.$refs.chart
+        if (chart) {
+          const myChart = this.$echarts.init(chart)
+          const option = {
+            title: {
+              text: ''
+            },
+            tooltip: {
+              trigger: 'axis'
+            },
+            legend: {
+              data: groupLineNames
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true
+            },
+            toolbox: {
+              feature: {
+                saveAsImage: {}
+              }
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: monthTemp
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: info
+
+          }
+          myChart.setOption(option)
+          window.addEventListener("resize", function() {
+            myChart.resize()
+          })
+        }
+        this.$on('hook:destroyed',()=>{
+          window.removeEventListener("resize", function() {
+            myChart.resize();
+          });
+        })
+
+      });
+    },
+    getEchartData() {
+
+    },
+
+
+  },
+  watch: {},
+  created() {
+  }
+}
+</script>
+
+
+

src/views/index.vue

@@ -22,6 +22,12 @@
     </el-row>
     <el-divider />
     <el-row :gutter="20">
+      <el-col :sm="12" :lg="24">
+        <span style="font-size: 20px;margin: 20%;color: cadetblue;">{{deviceTitle}}</span>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <DeviceChartLine :chart-data="deviceChartLineData" ref="DeviceChartLine"/>
     </el-row>
   </div>
 </template>
@@ -30,10 +36,12 @@
 import LineChart from './dashboard/LineChart';
 import PieChart from './dashboard/PieChart';
 import PieChart2 from './dashboard/PieChart2';
-import {getLineChartData} from '@/api/mes/reportWork'
+import {getGroupLineEquInfo, getLineChartData} from '@/api/mes/reportWork'
+import DeviceChartLine from "./dashboard/DeviceChartLine";
 export default {
   name: "Index",
   components: {
+    DeviceChartLine,
     LineChart//,PieChart,PieChart2
   },
   data() {
@@ -41,11 +49,14 @@ export default {
       // 版本号
       version: "1.0.0",
       lineChartData: null,
-      title:"本月工厂产量"
+      deviceChartLineData:null,
+      title:"本月工厂产量",
+      deviceTitle: "各组线月设备故障数"
     };
   },
   created() {
 		this.getLineChartData();
+    this.getGroupLineEquInfo();
 	},
   methods: {
     goTarget(href) {
@@ -55,6 +66,11 @@ export default {
         getLineChartData().then(data => {
           this.lineChartData = data;
         });
+    },
+    getGroupLineEquInfo(){
+      getGroupLineEquInfo().then(response => {
+        this.deviceChartLineData = response.data;
+      });
     }
   },
 };