更新

src/views/ManufacturingCenter/EquipmentConditionAnalysis/index.vue

@@ -82,10 +82,10 @@
           @current-change="handleCurrentChange"/>
       </div>
     </el-card>
-    <el-card style="width: 49.8%; float: left;margin-right: 5px">
+    <el-card style="width: 49.7%; float: left;margin-right: 5px">
       <div id="myChart1" style="width: 1000px; height: 570px; margin: auto"/>
     </el-card>
-    <el-card style="width: 49.8%">
+    <el-card style="width: 49.7%;margin-left: 5px">
       <div id="myChart2" style="width: 1000px; height: 570px; margin: auto"/>
     </el-card>
     <el-card>
@@ -123,6 +123,38 @@
     <el-card>
       <div id="myChart" style="width: 1000px; height: 570px; margin: auto"/>
     </el-card>
+    <el-card>
+      <span>工位号:</span>
+      <el-select v-model="MachineValue2" filterable size="small" style="width:160px;margin-bottom:10px" placeholder="工位号">
+        <el-option
+          v-for="item in Machine"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+          <div style="float: left">{{ item.label }}</div>
+          <div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
+        </el-option>
+      </el-select>
+      <span style="margin-left: 10px">时间段:</span>
+      <el-date-picker
+        v-model="date3"
+        style="width:160px;margin:10px;"
+        size="small"
+        type="date"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        placeholder="选择日期"/>
+      <span>~</span>
+      <el-date-picker
+        v-model="date4"
+        style="width:160px;margin:10px;"
+        size="small"
+        type="date"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        placeholder="选择日期"/>
+      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="searchData2()">查询</el-button>
+    </el-card>
     <el-card>
       <div id="myChart3" style="width: 100%; height: 520px; margin: auto"/>
     </el-card>
@@ -137,6 +169,7 @@ export default {
       tableDataA: [],
       MachineValue: '',
       MachineValue1: '',
+      MachineValue2: '',
       Machine: [],
       yAxisValue: [],
       colors: [],
@@ -144,6 +177,8 @@ export default {
       Time: '',
       date1: '',
       date2: '',
+      date3: '',
+      date4: '',
       time1: '',
       time2: '',
       time3: '',
@@ -199,47 +234,32 @@ export default {
       })
     },
     searchData1() {
-      getData2(this.MachineValue1, this.date1, this.date2).then(response => {
-        this.table = response.data
-        console.log(this.table, 222)
-      }).then(() => {
-        this.drawLine()
-      })
       if (this.date1 === null || this.date2 === null) {
         this.$message.warning('请选择开始时间或结束时间')
       } else {
-        const endYear = parseInt(this.date2.split('-')[0])
-        const startYear = parseInt(this.date1.split('-')[0])
-        const endMonth = parseInt(this.date2.split('-')[1])
-        const startMonth = parseInt(this.date1.split('-')[1])
-        const endDate = parseInt(this.date2.split('-')[2])
-        const startDate = parseInt(this.date1.split('-')[2])
-        let diff
-        if ((endMonth - startMonth) === 0) {
-          diff = endDate - startDate
-        }
-        if ((endMonth - startMonth) === 1) {
-          diff = endDate - startDate + 10
-        }
-        if ((endMonth - startMonth) > 1 || (endYear - startYear) !== 0) {
-          diff = 999
-        }
-        if (diff > 6) {
-          this.$message.warning('选择时间区间不得超过6天！')
-        } else {
-          searchState().then(response => {
-            for (let i = 0; i < response.data.length; i++) {
-              this.colors.push(response.data[i].颜色)
-              this.state.push(response.data[i].状态)
-            }
-          })
-          getData3(this.MachineValue1, this.date1, this.date2).then(response => {
-            this.table1 = response.data
-            console.log(this.table1)
-          }).then(() => {
-            this.drawLine3()
-          })
-        }
+        getData2(this.MachineValue1, this.date1, this.date2).then(response => {
+          this.table = response.data
+        }).then(() => {
+          this.drawLine()
+        })
+      }
+    },
+    searchData2() {
+      if (this.date3 === null || this.date4 === null) {
+        this.$message.warning('请选择开始时间或结束时间')
+      } else {
+        searchState().then(response => {
+          for (let i = 0; i < response.data.length; i++) {
+            this.colors.push(response.data[i].颜色)
+            this.state.push(response.data[i].状态)
+          }
+        })
+        getData3(this.MachineValue2, this.date3, this.date4).then(response => {
+          this.table1 = response.data
+          console.log(this.table1)
+        }).then(() => {
+          this.drawLine3()
+        })
       }
     },
     //  绘制图形
@@ -484,7 +504,7 @@ export default {
               var categoryIndex = api.value(0) // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
               var start = api.coord([api.value(1), categoryIndex]) // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
               var end = api.coord([api.value(2), categoryIndex])
-              var height = 24 // 柱体宽度
+              var height = 10 // 柱体宽度
 
               return {
                 type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。