修改首页ui

src/api/homePage.js

@@ -11,6 +11,15 @@ export function getImagData(query) {
   })
 }
 
+// 查询包装生产数据
+export function selectSumPackage(query) {
+  return request({
+    url: '/datamonitor/selectSumPackage',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询首页图标数据
 export function getEchartsData(query) {
   return request({

src/layout/components/AppMain.vue

 <template>
   <section class="app-main">
-    <div class="container">
+    <div class="container" :style="{background: $route.path === '/Home' ? 'unset' : '#FFFFFF'}">
       <transition name="fade-transform" mode="out-in">
-        <router-view :key="key" class="app-container-bg" />
+        <router-view :key="key" class="app-container-bg" :style="{background: $route.path === '/Home' ? 'unset' : '#FFFFFF'}"/>
       </transition>
     </div>
   </section>
@@ -32,10 +32,10 @@ export default {
     min-height: calc(92.4vh - 95px);
     margin: 0 14px 14px 14px;
     border-radius: 3px;
-    background: #FFFFFF;
+    // background: #FFFFFF;
   }
   .app-container-bg{
-    background-color: #ffffff;
+    // background-color: #ffffff;
   }
 }
 .fixed-header+.app-main {

src/views/ProductionProcess/Monitoring.vue

 <template>
-  <div class="monitoring-container">
+<!--  <div class="monitoring-container">
     <div class="stationSearch" style="margin-left: 10px">
       <el-form ref="queryForm" :model="queryParams1" :inline="true">
         <el-form-item label="产线号" prop="staCode">
@@ -21,9 +21,7 @@
       </el-form>
     </div>
     <div class="placeholder" />
-    <!-- 表格 -->
     <div style="padding: 15px">
-      <!--      <div class="mb12 font-small-bold">工站列表</div>-->
       <div class="monitoring-data" v-for="(item, index) in monitoringData" :key="index">
         <el-row>
           <el-col :span="6">
@@ -62,7 +60,7 @@
         </el-row>
       </div>
     </div>
-    <!--      sn1-->
+    &lt;!&ndash;      sn1&ndash;&gt;
     <el-dialog :close-on-click-modal="false" class="modelDialog" :title="'SN编码信息'" :visible.sync="openModalFlag" width="60%" :append-to-body="false">
       <el-form ref="form1" :model="queryParams" :inline="true">
         <el-form-item label="SN编码" prop="materSn">
@@ -84,7 +82,7 @@
           <el-button class="resetBtn" size="small" @click="resetPosition">重置 Reset</el-button>
         </el-form-item>
         <el-row :gutter="20">
-          <!--添加工站数据-->
+          &lt;!&ndash;添加工站数据&ndash;&gt;
           <el-col :span="24" :xs="24">
             <el-table
               v-loading="SNModelLoading"
@@ -123,11 +121,11 @@
         <el-button class="canleBtn" @click="openModalFlag = false">关 闭 Close</el-button>
       </div>
     </el-dialog>
-    <!--      sn1-->
+    &lt;!&ndash;      sn1&ndash;&gt;
     <el-dialog :close-on-click-modal="false" class="modelDialog" :title="'关联SN编码'" :visible.sync="openSnModalFlag" width="70%" :append-to-body="false">
       <el-form ref="form1" :model="queryParams" :inline="true">
         <el-row :gutter="20">
-          <!--添加工站数据-->
+          &lt;!&ndash;添加工站数据&ndash;&gt;
           <el-col :span="24" :xs="24">
             <el-table
               v-loading="SNModelLoading1"
@@ -159,115 +157,120 @@
         <el-button class="canleBtn" @click="openSnModalFlag = false">关 闭 Close</el-button>
       </div>
     </el-dialog>
-  </div>
+  </div>-->
+  <monitoring-table></monitoring-table>
 </template>
 
 <script>
-import { getTableData, getSnsVague, getSnsDetail } from '@/api/system/monitoring'
+// import { getTableData, getSnsVague, getSnsDetail } from '@/api/system/monitoring'
+import MonitoringTable from './MonitoringTable'
 export default {
   name: 'Monitoring',
+  components: {
+    MonitoringTable
+  },
   data() {
     return {
-      queryParams1: {
-        lineNo: ''
-      },
-      queryParams: {
-        page: 1,
-        rows: 10,
-        materSn: '',
-        lineCode: '',
-        orderId: '',
-        staId: null
-      },
-      orderId: '',
-      total: 0,
-      SNModelLoading: false,
-      SNModelLoading1: false,
-      SNTableList: [],
-      SNRelationTableList: [],
-      monitoringData: [],
-      interval: undefined,
-      openModalFlag: false, // sn编码模态框
-      openSnModalFlag: false, // 关联sn编码模态框
+      // queryParams1: {
+      //   lineNo: ''
+      // },
+      // queryParams: {
+      //   page: 1,
+      //   rows: 10,
+      //   materSn: '',
+      //   lineCode: '',
+      //   orderId: '',
+      //   staId: null
+      // },
+      // orderId: '',
+      // total: 0,
+      // SNModelLoading: false,
+      // SNModelLoading1: false,
+      // SNTableList: [],
+      // SNRelationTableList: [],
+      // monitoringData: [],
+      // interval: undefined,
+      // openModalFlag: false, // sn编码模态框
+      // openSnModalFlag: false, // 关联sn编码模态框
     }
   },
   created() {
-    this.getStaTable()
+    // this.getStaTable()
   },
   mounted() {
   },
   beforeDestroy() {
-    clearInterval(this.intercal)
+    // clearInterval(this.intercal)
   },
   destroyed() {
-    clearInterval(this.intercal)
+    // clearInterval(this.intercal)
   },
   methods: {
-    /** 查询按钮方法 **/
-    handleQuery() {
-      clearInterval(this.intercal)
-      this.intercal = undefined
-      this.getStaTable()
-    },
-    /** 重置按钮方法 **/
-    resetQuery() {
-      this.queryParams.lineNo = ''
-      this.getStaTable()
-    },
-    // 获取表数据
-    getStaTable() {
-      const params = {}
-      this.intercal = setInterval(_ => {
-        getTableData(params).then(res => {
-          this.monitoringData = res.data
-        }).catch(_ => {
-        })
-      }, 2000)
-    },
-    openModel(row, item, data) {
-      this.orderId = row.orderId
-      this.openModalFlag = true
-      let staId = null
-      if ((item.label + 'Id') in data) {
-        staId = parseInt(data[item.label + 'Id'])
-      }
-      this.queryParams.page = 1
-      this.queryParams.lineCode = data.lineNumber
-      this.queryParams.orderId = row.orderId
-      this.queryParams.staId = staId
-      this.getSNTable()
-    },
-    getSNTable() {
-      this.SNModelLoading = true
-      this.queryParams.orderId = this.orderId
-      getSnsVague(this.queryParams).then(res => {
-        this.SNModelLoading = false
-        this.SNTableList = res.data.rows
-        this.total = res.data.total
-      })
-    },
-    queryPosition() {
-      this.getSNTable()
-    },
-    resetPosition() {
-      this.queryParams.page = 1
-      this.queryParams.rows = 10
-      this.queryParams.materSn = ''
-      this.getSNTable()
-    },
-    getRelationSnTable(row) {
-      this.openSnModalFlag = true
-      const params = {
-        orderId: this.orderId,
-        materSn: row.materSn,
-        lineId: row.lineId
-      }
-      this.SNModelLoading1 = true
-      getSnsDetail(params).then(res => {
-        this.SNModelLoading1 = false
-        this.SNRelationTableList = res.data
-      })
-    }
+    // /** 查询按钮方法 **/
+    // handleQuery() {
+    //   clearInterval(this.intercal)
+    //   this.intercal = undefined
+    //   this.getStaTable()
+    // },
+    // /** 重置按钮方法 **/
+    // resetQuery() {
+    //   this.queryParams.lineNo = ''
+    //   this.getStaTable()
+    // },
+    // // 获取表数据
+    // getStaTable() {
+    //   const params = {}
+    //   this.intercal = setInterval(_ => {
+    //     getTableData(params).then(res => {
+    //       this.monitoringData = res.data
+    //     }).catch(_ => {
+    //     })
+    //   }, 2000)
+    // },
+    // openModel(row, item, data) {
+    //   this.orderId = row.orderId
+    //   this.openModalFlag = true
+    //   let staId = null
+    //   if ((item.label + 'Id') in data) {
+    //     staId = parseInt(data[item.label + 'Id'])
+    //   }
+    //   this.queryParams.page = 1
+    //   this.queryParams.lineCode = data.lineNumber
+    //   this.queryParams.orderId = row.orderId
+    //   this.queryParams.staId = staId
+    //   this.getSNTable()
+    // },
+    // getSNTable() {
+    //   this.SNModelLoading = true
+    //   this.queryParams.orderId = this.orderId
+    //   getSnsVague(this.queryParams).then(res => {
+    //     this.SNModelLoading = false
+    //     this.SNTableList = res.data.rows
+    //     this.total = res.data.total
+    //   })
+    // },
+    // queryPosition() {
+    //   this.getSNTable()
+    // },
+    // resetPosition() {
+    //   this.queryParams.page = 1
+    //   this.queryParams.rows = 10
+    //   this.queryParams.materSn = ''
+    //   this.getSNTable()
+    // },
+    // getRelationSnTable(row) {
+    //   this.openSnModalFlag = true
+    //   const params = {
+    //     orderId: this.orderId,
+    //     materSn: row.materSn,
+    //     lineId: row.lineId
+    //   }
+    //   this.SNModelLoading1 = true
+    //   getSnsDetail(params).then(res => {
+    //     this.SNModelLoading1 = false
+    //     this.SNRelationTableList = res.data
+    //   })
+    // }
   }
 }
 </script>

src/views/ProductionProcess/MonitoringTable.vue

+<template>
+  <div class="MonitoringTable">
+    <el-card style="margin-top: 20px" class="box-card">
+      <div class="heightLine">
+        <div class="span_middle">产出量统计</div>
+      </div>
+      <!--        v-loading="Loading"-->
+      <el-table
+        :data="indexList"
+        border
+        style="margin-top: 20px"
+      >
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="timeArea">
+          <template slot="header">
+            <div>时间段</div>
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.timeArea || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(item, index) in tableTitle" :show-overflow-tooltip="true" align="center" :prop="item.lineCode" :key="index">
+          <template slot="header">
+            <div>{{item.lineCode}}</div>
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row[item.lineCode] || '-' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getTableData } from '@/api/homePage'
+export default {
+  name: 'MonitoringTable',
+  data() {
+    return {
+      // 搜索框数据
+      queryParams: {
+        // startDate: '2022-06-13',
+        startDate: moment(new Date()).format('YYYY-MM-DD'),
+        endDate: moment(new Date()).format('YYYY-MM-DD')
+      },
+      // 表格数据
+      indexList: [
+        {
+          timeArea: '07:00:00-07:59:59'
+        },
+        {
+          timeArea: '08:00:00-08:59:59'
+        },
+        {
+          timeArea: '09:00:00-09:59:59'
+        },
+        {
+          timeArea: '10:00:00-10:59:59'
+        },
+        {
+          timeArea: '11:00:00-11:59:59'
+        },
+        {
+          timeArea: '12:00:00-12:59:59'
+        },
+        {
+          timeArea: '13:00:00-13:59:59'
+        },
+        {
+          timeArea: '14:00:00-14:59:59'
+        },
+        {
+          timeArea: '15:00:00-15:59:59'
+        },
+        {
+          timeArea: '16:00:00-16:59:59'
+        },
+        {
+          timeArea: '17:00:00-17:59:59'
+        },
+        {
+          timeArea: '18:00:00-18:59:59'
+        },
+        {
+          timeArea: '19:00:00-19:59:59'
+        },
+        {
+          timeArea: '20:00:00-20:59:59'
+        },
+        {
+          timeArea: '21:00:00-21:59:59'
+        },
+        {
+          timeArea: '22:00:00-22:59:59'
+        },
+        {
+          timeArea: '23:00:00-23:59:59'
+        },
+        {
+          timeArea: '24:00:00-24:59:59'
+        },
+        {
+          timeArea: '01:00:00-01:59:59'
+        },
+        {
+          timeArea: '02:00:00-02:59:59'
+        },
+        {
+          timeArea: '03:00:00-03:59:59'
+        },
+        {
+          timeArea: '04:00:00-04:59:59'
+        },
+        {
+          timeArea: '05:00:00-05:59:59'
+        },
+        {
+          timeArea: '06:00:00-06:59:59'
+        }
+      ],
+      // 表格头数据
+      tableTitle: []
+    }
+  },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    /**
+     * 获取表格数据
+     */
+    getTableData() {
+      const date = new Date()
+      const params = {
+        startDate: moment(date).format('YYYY-MM-DD') + ' 07:00:00',
+        endDate: moment(date.setTime(date.getTime() + 3600 * 1000 * 24)).format('YYYY-MM-DD') + ' 06:59:59'
+      }
+      getTableData(params).then(response => {
+        console.log(response)
+        const temp = JSON.parse(JSON.stringify(response.data))
+        this.tableTitle = temp
+        temp.forEach((item) => {
+          item.nums.forEach((item1, index1) => {
+            this.indexList[index1][item.lineCode] = item1.dayDateNum
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .MonitoringTable {
+    .heightLine {
+      border-left: solid #FF2F2C 5px;
+    }
+    .span_middle{
+      font-size: 14px;
+      margin-left: 7px;
+    }
+    .homePageIndex-body{
+      margin-top: 20px;
+      .el-table th .cell{
+        display: inline-block!important;
+      }
+      .table-drop{
+        vertical-align: 2px;
+        //line-height: 20px;
+        margin-left: 15px
+      }
+    }
+  }
+</style>