四个图片

src/views/equipment/statistic.vue

@@ -2,35 +2,16 @@
   <div class="app-container">
     <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
       <el-form-item label="设备名称" prop="roleName">
-        <el-input
-          v-model="queryParams.roleName"
-          placeholder="请输入设备名称"
-          clearable
-          :maxlength="30"
-          size="small"
-          style="width: 150px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.roleName" placeholder="请输入设备名称" clearable :maxlength="30" size="small"
+          style="width: 150px" @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="设备编码" prop="roleKey">
-        <el-input
-          v-model="queryParams.roleKey"
-          placeholder="请输入设备编码"
-          clearable
-          size="small"
-          style="width: 150px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.roleKey" placeholder="请输入设备编码" clearable size="small" style="width: 150px"
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="lot" prop="roleKey">
-        <el-input
-          v-model="queryParams.roleKey"
-          placeholder="请输入设备lot"
-          clearable
-          size="small"
-          style="width: 150px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.roleKey" placeholder="请输入设备lot" clearable size="small" style="width: 150px"
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
@@ -39,17 +20,17 @@
         <el-form-item />
       </div>
     </el-form>
-    <div class="placeholder" />
-    <div class="Role" style="width: 100%; height: 400px; display: flex; padding-left: 100px">
+    <div class="placeholder"></div>
+    <div class="Role" style="width: 100%; height: 600px; display: flex; padding-left: 100px">
       <!--左边两个图-->
-      <div class="left-charts" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
-        <div id="myChart1" style="width: 50%; height: 50%;"></div>
-        <div id="myChart2" style="width: 50%; height: 50%;"></div>
+      <div class="left-charts" style="width: 50%; display: flex; flex-direction: column;">
+        <div id="myChart1" style="flex: 1; margin-bottom: 100px;"></div>
+        <div id="myChart2" style="flex: 1;"></div>
       </div>
       <!--右边两个图-->
-      <div class="right-charts" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
-        <div id="myChart5" style="width: 50%; height: 50%;"></div>
-        <div id="myChart3" style="width: 50%; height: 50%;"></div>
+      <div class="right-charts" style="width: 50%; display: flex; flex-direction: column;">
+        <div id="myChart5" style="flex: 1; margin-bottom: 60px;"></div>
+        <div id="myChart3" style="flex: 1;"></div>
       </div>
     </div>
   </div>
@@ -204,8 +185,8 @@ export default {
       deptOptions: []
     }
   },
-  mounted: function() {
-    this.$nextTick(function() {
+  mounted: function () {
+    this.$nextTick(function () {
       this.drawLine5('myChart5')
     })
 
@@ -346,7 +327,7 @@ export default {
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               },
-              color: function(params) {
+              color: function (params) {
                 // 自定义颜色
                 var colorList = ['red', '#16deb6', '#b24999']
                 return colorList[params.dataIndex]
@@ -411,7 +392,7 @@ export default {
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               },
-              color: function(params) {
+              color: function (params) {
                 // 自定义颜色
                 var colorList = ['red', '#7fdcca']
                 return colorList[params.dataIndex]
@@ -536,14 +517,14 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(function() {
+      }).then(function () {
         return changeRoleStatus(row.businessId, row.flag)
       }).then(() => {
         this.$message({
           message: text + '成功',
           type: 'success'
         })
-      }).catch(function() {
+      }).catch(function () {
         row.flag = row.flag === '0' ? '1' : '0'
       })
     },
@@ -680,7 +661,7 @@ export default {
       this.title = '分配数据权限'
     },
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
       this.$refs['form'].validate(valid => {
         if (valid) {
           this.form.menuCheckStrictly = false
@@ -703,7 +684,7 @@ export default {
       })
     },
     /** 提交按钮（数据权限） */
-    submitDataScope: function() {
+    submitDataScope: function () {
       if (this.form.businessId !== undefined && this.form.menuId !== undefined) {
         this.form.deptIds = this.getDeptAllCheckedKeys()
         dataScope(this.form).then(response => {
@@ -720,7 +701,7 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(function() {
+      }).then(function () {
         return delRole(roleIds)
       }).then(() => {
         this.getList()
@@ -728,7 +709,7 @@ export default {
           message: '删除成功',
           type: 'success'
         })
-      }).catch(function() {
+      }).catch(function () {
       })
     },
     /** 导出按钮操作 */
@@ -738,7 +719,7 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(function() {
+      }).then(function () {
         return exportRole(queryParams).then(response => {
           const blob = new Blob([response])
           const downloadElement = document.createElement('a')