修bug&更改散点图样式

src/views/qualityManagement/components/defectScatterPlotChart.vue

@@ -22,19 +22,28 @@ export default {
     return {
       chartDom: '',
       chart: '',
-      chartHeight: tableHeight(480)
+      chartHeight: tableHeight(446)
     }
   },
   mounted() {
-    this.chartDom = document.getElementById('defectScatterPlotChart')
-    this.chart = echarts.init(this.chartDom)
-    this.getChart()
     window.addEventListener('resize', () => {
-      this.chartHeight = tableHeight(480)
+      this.chartHeight = tableHeight(446)
     })
+    setTimeout(() => {
+      this.getChart()
+    }, 20)
   },
   methods: {
     getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('defectScatterPlotChart')
+      this.chart = echarts.init(this.chartDom)
       const dataS = [
         [1, 55, 9, 56, 0.46, 18, 6, '良'],
         [2, 25, 11, 21, 0.65, 34, 9, '优'],
@@ -141,8 +150,16 @@ export default {
           left: 0,
           data: ['S', 'M', 'L'],
           textStyle: {
-            fontSize: 12
-          }
+            fontSize: 9
+          },
+          itemWidth: 10 // 图例宽度
+        },
+        grid: {
+          x: 60,
+          y: 60,
+          x2: 10,
+          y2: 60,
+          borderWidth: 1
         },
         xAxis: {
           type: 'value',
@@ -176,17 +193,20 @@ export default {
           {
             name: 'S',
             type: 'scatter',
-            data: dataS
+            data: dataS,
+            symbolSize: 5
           },
           {
             name: 'M',
             type: 'scatter',
-            data: dataM
+            data: dataM,
+            symbolSize: 5
           },
           {
             name: 'L',
             type: 'scatter',
-            data: dataL
+            data: dataL,
+            symbolSize: 5
           }
         ]
       }

src/views/qualityManagement/components/defectScatterPlotTotal.vue

@@ -1,24 +1,24 @@
 <template>
-  <el-row :gutter="4">
-    <el-col :span="6">
-      <div class="title">颗粒数据</div>
+  <div class="bottom-box">
+    <div class="bottom-left">
       <ul class="dataTab">
+        <div class="title">颗粒数据</div>
         <li v-for="(item, index) in a" :key="index">
           <p class="tabHead">{{ item.name }}</p>
           <p class="tabValue">{{ item.value }}</p>
         </li>
       </ul>
-    </el-col>
-    <el-col :span="18">
-      <div class="title">面检数据</div>
+    </div>
+    <div class="bottom-right">
       <ul class="dataTab">
+        <div class="title">面检数据</div>
         <li v-for="(item, index) in b" :key="index">
           <p class="tabHead">{{ item.name }}</p>
           <p class="tabValue">{{ item.value }}</p>
         </li>
       </ul>
-    </el-col>
-  </el-row>
+    </div>
+  </div>
 </template>
 <script>
 export default {
@@ -51,23 +51,49 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.bottom-box {
+  overflow-x: auto;
+  display: flex;
+  .bottom-left,
+  .bottom-right {
+    display: inline-block;
+  }
+  .bottom-left {
+    width: 290px;
+    margin-right: 8px;
+    .dataTab {
+      li {
+        width: 65px;
+      }
+    }
+  }
+  .bottom-right {
+    width: calc(100% - 300px);
+    .dataTab {
+      li {
+        width: 7.7%;
+        min-width: 60px;
+      }
+    }
+  }
+}
 .title {
-  height: 27px;
+  display: inline-block;
+  height: 66px;
+  width: 30px;
   font-size: 14px;
+  line-height: 14px;
   font-weight: 500;
+  padding: 5px 8px 0px;
   color: rgba(0, 0, 0, 0.85);
-  padding-left: 16px;
-  padding-top: 3px;
-  margin-top: 5px;
   background-color: #fafafa;
   border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
 }
 .dataTab {
   display: flex;
   flex-flow: row nowrap;
   li {
-    width: 25%;
     font-size: 14px;
     border-right: 1px solid #e8e8e8;
     border-bottom: 1px solid #e8e8e8;
@@ -77,20 +103,16 @@ export default {
       text-overflow: ellipsis;
     }
     .tabHead {
-      height: 30px;
+      height: 31px;
       background: #e9ebf0;
     }
     .tabHead,
     .tabValue {
-      padding-left: 16px;
-      padding-top: 7px;
+      padding: 8px;
     }
     .tabValue {
       height: 35px;
     }
   }
-  :last-child {
-    border-right: none;
-  }
 }
 </style>

src/views/qualityManagement/processFullInspection/defectScatterPlot.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="defectScatterPlot">
-    <el-row :gutter="8" class="top-box">
-      <el-col :span="12">
-        <div class="top-left">
+    <split-pane v-model="split1" @on-move-end="moveEnd">
+      <template #left>
+        <div class="split-pane left-box">
           <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
           <base-table
             :selectWidth="50"
@@ -14,66 +14,49 @@
           />
           <pagination :limit="listQuery.size" :total="total" />
         </div>
-      </el-col>
-      <el-col :span="12">
-        <div class="top-right">
-          <div class="line1">
-            <span style="margin-right: 8px">颗粒缺陷选择</span>
-            <el-radio-group
-              v-model="type"
-              size="small"
-              style="margin-right: 24px"
-            >
-              <el-radio-button label="1">颗粒全选</el-radio-button>
-              <el-radio-button label="2">面检全选</el-radio-button>
-            </el-radio-group>
-            <span>检验项目 </span>
-            <el-select
-              v-model="checkItem"
-              placeholder="检验项目"
-              size="small"
-              style="width: 160px; margin-right: 24px"
-            >
-              <el-option
-                v-for="item in selectList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+      </template>
+      <template #right>
+        <div class="split-pane right-box">
+          <div class="inner-box">
+            <div class="line1">
+              <span style="margin-right: 8px">颗粒缺陷选择</span>
+              <el-radio-group
+                v-model="type"
+                size="small"
+                style="margin-right: 24px"
               >
-              </el-option>
-            </el-select>
-            <el-button type="primary" size="small" style="margin-right: 14px"
-              >绘图</el-button
-            >
-            <el-button type="success" size="small">导出</el-button>
-          </div>
-          <div class="line2">
-            <el-checkbox-group v-model="checkList">
-              <el-checkbox
-                v-for="(item, index) in list"
-                :key="index"
-                :label="item.value"
-                >{{ item.label }}</el-checkbox
+                <el-radio-button label="1">颗粒全选</el-radio-button>
+                <el-radio-button label="2">面检全选</el-radio-button>
+              </el-radio-group>
+              <el-button type="primary" size="small" style="margin-right: 14px"
+                >绘图</el-button
               >
-            </el-checkbox-group>
-          </div>
-          <div>
-            <span class="title">缺陷散点图(1245241242)</span>
-          </div>
-          <defect-scatter-plot-chart />
-        </div>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col>
-        <div class="bottom">
-          <div style="margin-bottom: 10px">
-            <span class="title">合计</span>
-            <defect-scatter-plot-total />
+              <el-button type="primary" size="small" plain>导出</el-button>
+            </div>
+            <div class="line2">
+              <el-checkbox-group v-model="checkList">
+                <el-checkbox
+                  v-for="(item, index) in list"
+                  :key="index"
+                  :label="item.value"
+                  >{{ item.label }}</el-checkbox
+                >
+              </el-checkbox-group>
+            </div>
+            <div>
+              <span class="title">缺陷散点图(1245241242)</span>
+            </div>
+            <defect-scatter-plot-chart ref="poltChart" />
+            <div class="bottom">
+              <div style="margin-bottom: 10px">
+                <span class="title">合计</span>
+                <defect-scatter-plot-total />
+              </div>
+            </div>
           </div>
         </div>
-      </el-col>
-    </el-row>
+      </template>
+    </split-pane>
   </div>
 </template>
 <script>
@@ -113,6 +96,7 @@ export default {
   components: { defectScatterPlotTotal, defectScatterPlotChart },
   data() {
     return {
+      split1: 0.4,
       formConfig: [
         {
           type: 'datePicker',
@@ -138,7 +122,7 @@ export default {
       },
       tableProps,
       tableData: [],
-      tableH: tableHeight(450),
+      tableH: tableHeight(290),
       total: 0,
       type: '1',
       selectList: [
@@ -172,7 +156,7 @@ export default {
   },
   mounted() {
     window.addEventListener('resize', () => {
-      this.tableH = tableHeight(450)
+      this.tableH = tableHeight(290)
     })
     this.getList()
   },
@@ -188,39 +172,46 @@ export default {
     },
     buttonClick(val) {
       console.log(val)
+    },
+    moveEnd() {
+      this.$refs.poltChart.getChart()
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .defectScatterPlot {
-  .top-box {
-    width: 100%;
-    padding: 0 9px 0 16px;
-  }
-  .top-left,
-  .top-right,
-  .bottom {
-    padding: 8px 16px;
+  height: calc(100vh - 206px);
+  overflow: auto;
+  .split-pane {
+    height: 100%;
     border-radius: 8px;
+  }
+  .left-box {
+    margin-left: 16px;
+    padding: 16px 16px 0;
     background-color: #fff;
   }
-  .top-left {
-    height: calc(100vh - 343px);
-  }
-  .top-right {
-    height: calc(100vh - 343px);
-    font-size: 14px;
-    .line1 {
-      margin-bottom: 18px;
+  .right-box {
+    margin-right: 16px;
+    .inner-box {
+      height: 100%;
+      margin-left: 16px;
+      padding: 16px 16px 0;
+      border-radius: 8px;
+      overflow: auto;
+      background-color: #fff;
+      font-size: 14px;
+      .line1 {
+        margin-bottom: 18px;
+      }
+      .line2 {
+        margin-bottom: 12px;
+        .el-checkbox {
+          margin-right: 8px;
+        }
+      }
     }
-    .line2 {
-      margin-bottom: 18px;
-    }
-  }
-  .bottom {
-    margin: 8px 16px 0;
-    height: 130px;
   }
   .title {
     font-size: 14px;