Merge pull request '修bug&更改散点图样式' (#6) from zjl into master

Reviewed-on: #6

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "code-brick-zj": "^0.0.7",
+    "code-brick-zj": "^0.1.0",
     "core-js": "^3.8.3",
     "echarts": "^5.4.0",
     "element-ui": "^2.15.8",

src/views/basicConfig/components/accountAdd.vue

@@ -74,10 +74,7 @@ export default {
           { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
         ],
         password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-        name: [
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
-          { required: true, message: '请输入姓名', trigger: 'blur' },
-          { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
-        ],
         proLineId: [
           { required: true, message: '请选择所属产线', trigger: 'change' }
         ],
@@ -108,7 +105,9 @@ export default {
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.form.account = this.form.account.replace(/[\W]/g, '')
+          let reg = /^[\da-z]+$/i
+          let re = new RegExp(reg)
+          if (re.test(this.form.account)) {
             if (this.isEdit) {
               //编辑
               accountUpdate({ ...this.form }).then((res) => {
@@ -133,6 +132,13 @@ export default {
                 }
               })
             }
+          } else {
+            this.$message({
+              message: '用户名格式不正确应为数字或者字母，请检查',
+              type: 'error',
+              duration: 1500
+            })
+          }
         } else {
           return false
         }

src/views/basicConfig/components/consumablesAdd.vue

@@ -51,11 +51,11 @@ export default {
       },
       rules: {
         name: [{ required: true, message: '请输入耗材名称', trigger: 'blur' }],
-        spec: [{ required: true, message: '请输入耗材规格', trigger: 'blur' }],
+        spec: [{ required: true, message: '请输入耗材规格', trigger: 'blur' }]
-        unit: [{ required: true, message: '请输入耗材单位', trigger: 'blur' }],
+        // unit: [{ required: true, message: '请输入耗材单位', trigger: 'blur' }],
-        basicConsume: [
+        // basicConsume: [
-          { required: true, message: '请输入基础消耗量', trigger: 'blur' }
+        //   { required: true, message: '请输入基础消耗量', trigger: 'blur' }
-        ]
+        // ]
       },
       stateList: JSON.parse(localStorage.getItem('publicList')).enabledVoList,
       isEdit: false
@@ -69,7 +69,7 @@ export default {
           if (res.code === 0) {
             console.log(res)
             this.form.name = res.data.name
-            this.form.spec = res.data.spec
+            this.form.spec = val.type === 'copy' ? '' : res.data.spec
             this.form.unit = res.data.unit
             this.form.basicConsume = res.data.basicConsume
             this.form.enabled = res.data.enabled

src/views/basicConfig/components/sparePartsAdd.vue

@@ -72,7 +72,7 @@ export default {
           if (res.code === 0) {
             this.form.type = res.data.type
             this.form.name = res.data.name
-            this.form.model = res.data.model
+            this.form.model = val.type === 'copy' ? '' : res.data.model
             this.form.enabled = res.data.enabled
           }
         })

src/views/deviceManagement/performanceAnalysis/devicePage.vue

@@ -98,6 +98,7 @@ import {
 } from '@/api/deviceManagement'
 import productPowerEdit from './../components/productPowerEdit.vue'
 import deviceOeeLine from './../components/deviceOeeLine.vue'
+import moment from 'moment'
 const tableProps = [
   {
     prop: 'date',
@@ -184,6 +185,7 @@ export default {
           placeholder: '月份选择',
           param: 'timePosition',
           defaultSelect: '',
+          pickerOptions: {},
           width: 200
         },
         {
@@ -213,6 +215,7 @@ export default {
     window.addEventListener('resize', () => {
       this.tableH = tableHeight(214) / 2 - 75
     })
+    this.getMonth()
     this.setDefaultVal()
     this.getTree()
   },
@@ -239,6 +242,27 @@ export default {
         this.getPlan()
       })
     },
+    getMonth() {
+      let arr = [
+        '2022-03',
+        '2022-05',
+        '2022-06',
+        '2022-08',
+        '2022-11',
+        '2023-01',
+        '2022-03'
+      ]
+      this.formConfig[0].pickerOptions = {
+        disabledDate(date) {
+          for (let i = 0; i < arr.length; i++) {
+            if (moment(date).format('YYYY-MM') === arr[i]) {
+              return false
+            }
+          }
+          return true
+        }
+      }
+    },
     getList() {
       // 获取设备OEE
       performanceAnalysisGet({ ...this.listQuery }).then((res) => {
@@ -259,32 +283,35 @@ export default {
       // 获取计划产能
       let date = new Date(this.listQuery.timePosition)
       let year = date.getFullYear()
+      let arr = [
+        { month: '1月', value: null, type: 'january' },
+        { month: '2月', value: null, type: 'february' },
+        { month: '3月', value: null, type: 'march' },
+        { month: '4月', value: null, type: 'april' },
+        { month: '5月', value: null, type: 'may' },
+        { month: '6月', value: null, type: 'june' },
+        { month: '7月', value: null, type: 'july' },
+        { month: '8月', value: null, type: 'august' },
+        { month: '9月', value: null, type: 'september' },
+        { month: '10月', value: null, type: 'october' },
+        { month: '11月', value: null, type: 'november' },
+        { month: '12月', value: null, type: 'december' }
+      ]
       performanceAnalysisPlan({ name: this.unitName, year: year }).then(
         (res) => {
-          console.log(res)
           if (res.code === 0 && !!res.data) {
             let obj = res.data
-            let arr = [
-              { month: '1月', value: '', type: 'january' },
-              { month: '2月', value: '', type: 'february' },
-              { month: '3月', value: '', type: 'march' },
-              { month: '4月', value: '', type: 'april' },
-              { month: '5月', value: '', type: 'may' },
-              { month: '6月', value: '', type: 'june' },
-              { month: '7月', value: '', type: 'july' },
-              { month: '8月', value: '', type: 'august' },
-              { month: '9月', value: '', type: 'september' },
-              { month: '10月', value: '', type: 'october' },
-              { month: '11月', value: '', type: 'november' },
-              { month: '12月', value: '', type: 'december' }
-            ]
             for (let i = 0; i < arr.length; i++) {
               arr[i].value = obj[arr[i].type]
             }
+          } else {
+            for (let i = 0; i < arr.length; i++) {
+              arr[i].value = null
+            }
+          }
           this.tableData2 = arr.slice(0, 6)
           this.tableData3 = arr.slice(6, 12)
         }
-        }
       )
     },
     clickDevice(val) {

src/views/deviceManagement/vehicleManagement.vue

@@ -1,10 +1,13 @@
 <template>
-  <div>
+  <div>暂时不做</div>
-    <span>载具管理,暂时不做</span>
-  </div>
 </template>
 <script>
 export default {
-  name: 'VehicleManagement'
+  name: 'VehicleManagement',
+  data() {
+    return {
+      split1: 0.5
+    }
+  }
 }
 </script>

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">
+  <div class="bottom-box">
-    <el-col :span="6">
+    <div class="bottom-left">
-      <div class="title">颗粒数据</div>
       <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>
+    </div>
-    <el-col :span="18">
+    <div class="bottom-right">
-      <div class="title">面检数据</div>
       <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>
+    </div>
-  </el-row>
+  </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: 8px;
-      padding-top: 7px;
     }
     .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">
+    <split-pane v-model="split1" @on-move-end="moveEnd">
-      <el-col :span="12">
+      <template #left>
-        <div class="top-left">
+        <div class="split-pane left-box">
           <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
           <base-table
             :selectWidth="50"
@@ -14,9 +14,10 @@
           />
           <pagination :limit="listQuery.size" :total="total" />
         </div>
-      </el-col>
+      </template>
-      <el-col :span="12">
+      <template #right>
-        <div class="top-right">
+        <div class="split-pane right-box">
+          <div class="inner-box">
             <div class="line1">
               <span style="margin-right: 8px">颗粒缺陷选择</span>
               <el-radio-group
@@ -27,25 +28,10 @@
                 <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"
-              >
-              </el-option>
-            </el-select>
               <el-button type="primary" size="small" style="margin-right: 14px"
                 >绘图</el-button
               >
-            <el-button type="success" size="small">导出</el-button>
+              <el-button type="primary" size="small" plain>导出</el-button>
             </div>
             <div class="line2">
               <el-checkbox-group v-model="checkList">
@@ -60,20 +46,17 @@
             <div>
               <span class="title">缺陷散点图(1245241242)</span>
             </div>
-          <defect-scatter-plot-chart />
+            <defect-scatter-plot-chart ref="poltChart" />
-        </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 />
               </div>
             </div>
-      </el-col>
+          </div>
-    </el-row>
+        </div>
+      </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 {
+  height: calc(100vh - 206px);
-    width: 100%;
+  overflow: auto;
-    padding: 0 9px 0 16px;
+  .split-pane {
-  }
+    height: 100%;
-  .top-left,
-  .top-right,
-  .bottom {
-    padding: 8px 16px;
     border-radius: 8px;
+  }
+  .left-box {
+    margin-left: 16px;
+    padding: 16px 16px 0;
     background-color: #fff;
   }
-  .top-left {
+  .right-box {
-    height: calc(100vh - 343px);
+    margin-right: 16px;
-  }
+    .inner-box {
-  .top-right {
+      height: 100%;
-    height: calc(100vh - 343px);
+      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: 18px;
+        margin-bottom: 12px;
+        .el-checkbox {
+          margin-right: 8px;
+        }
       }
     }
-  .bottom {
-    margin: 8px 16px 0;
-    height: 130px;
   }
   .title {
     font-size: 14px;