工单&物料

2022-11-17 08:55:51 +08:00
parent f01052d96f
commit d39bb981ec
10 changed files with 400 additions and 234 deletions
--- a/src/views/material-manage/cockpit/components/baseContainer/index.vue
+++ b/src/views/material-manage/cockpit/components/baseContainer/index.vue
@@ -7,7 +7,7 @@
 * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
 <template>
-  <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
+  <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
    <div class="line" />
    <div class="line line-vertical" />
    <div class="line line-right" />
@@ -75,6 +75,7 @@ export default {
 .base-container {
  color: #fff;
  width: 100%;
+  height: 100%;
  background-color: rgba($color: #061027, $alpha: 0.15);
  position: relative;
  border: 2px solid;
@@ -138,8 +139,11 @@ export default {
    font-size: 1.5em;
    padding: .67em;
  }
-  // .bar-content{
-  //   padding: 1em;
-  // }
+  .bar-item {
+    height: 100%;
+  }
+  .bar-content{
+    height: calc(100% - 4em);
+  }
 }
 </style>
--- a/src/views/material-manage/cockpit/components/baseTable.vue
+++ b/src/views/material-manage/cockpit/components/baseTable.vue
@@ -7,26 +7,29 @@
 -->
 <template>
  <div class="visual-base-table-container">
-    <el-table
-      v-loading="isLoading"
-      :header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
-      :row-style="setRowStyle"
-      :data="renderData"
-      border
-      style="width: 100%; background: transparent"
-    >
-      <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
      <el-table-column
-        v-for="item in renderTableHeadList"
+        v-if="page && limit && showIndex"
+        prop="_pageIndex"
+        :label="'tableHeader.index' | i18nFilter"
+        :width="70 * beilv"
+        align="center"
+      />
+      <el-table-column
+        v-for="(item, index) in renderTableHeadList"
        :key="item.prop"
        :show-overflow-tooltip="showOverflow"
        v-bind="item"
      >
        <template slot-scope="scope">
-
-          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <component
+            :is="item.subcomponent"
+            v-if="item.subcomponent"
+            :key="index"
+            :inject-data="{ ...scope.row, ...item }"
+            @emitData="emitData"
+          />
          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
-
        </template>
      </el-table-column>
      <slot name="content" />
@@ -36,7 +39,7 @@
 <script>
 import { isObject, isString } from 'lodash'
 export default {
-  name: 'BaseTable',
+  name: 'TechyTable',
  filters: {
    commonFilter: (source, filterType = a => a) => {
      return filterType(source)
@@ -107,70 +110,103 @@ export default {
  methods: {
    emitData(val) {
      this.$emit('emitFun', val)
-    },
-    setRowStyle(v) {
-      if (v.rowIndex % 2 === 0) {
-        return {
-          background: 'rgba(14, 32, 62, 0.8)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      } else {
-        return {
-          background: 'rgba(32, 55, 96, 0.8)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      }
-    },
-    setCellStyle(v) {
-      return {
-        lineHeight: 23 * this.beilv + 'px'
-      }
    }
  }
 }
 </script>
-<style lang="scss">
-@import "~@/styles/index.scss";
+
+<style scoped>
+.visual-base-table-container >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-button {
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+}
+
+/* .visual-base-table-container {
+  min-width: 30vw;
+} */
 .visual-base-table-container {
-  .el-table {
-    border: 0;
-  }
-  .el-table::before,.el-table--border::after {
-    background-color: transparent;
-  }
-  .el-table th,td{
-    border-color: #0D1728 !important;
-    padding: 0;
-  }
-  .el-table tr {
-    background: transparent;
-  }
-  .el-table__row:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-    }
-
-  .el-table__row--striped:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-  }
+  height: 100%;
 }
-.setting {
-  text-align: right;
-  padding: 15px;
-  .setting-box {
-    width: 100px;
-  }
-  i {
-    color: #aaa;
-    @extend .pointer;
-  }
+/* .visual-base-table-container >>> .el-table {
+  min-width: 120%;
+} */
+/* 清除默认样式 */
+.visual-base-table-container >>> th.gutter {
+  display: none;
+}
+.visual-base-table-container >>> table {
+  background: transparent;
 }

+.visual-base-table-container >>> .el-table,
+.visual-base-table-container >>> th,
+.visual-base-table-container >>> tr {
+  background: unset;
+}
+
+/* 设置设计稿样式 */
+.visual-base-table-container >>> .el-table::before,
+.visual-base-table-container >>> .el-table--group::after,
+.visual-base-table-container >>> .el-table--border::after,
+.visual-base-table-container >>> .el-table--border::after {
+  background: unset;
+}
+
+.visual-base-table-container >>> table * {
+  border-color: #0d1728;
+  border-width: calc(1px * var(--beilv));
+}
+
+.visual-base-table-container >>> td {
+  padding: calc(5px * var(--beilv));
+}
+
+.visual-base-table-container >>> td span {
+  color: #ffffffb3;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+}
+
+.visual-base-table-container >>> thead th {
+  padding: 0;
+}
+
+.visual-base-table-container >>> thead th .cell {
+  color: #fff;
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+  padding: calc(6px * var(--beilv));
+  white-space: nowrap;
+}
+
+.visual-base-table-container >>> .el-table__body tr:hover > td {
+  background-color: #42537130;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
+  background-color: #0e203e;
+  /* background-color: #0e203e90; */
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
+.visual-base-table-container >>> .el-table thead {
+  background-color: #203760;
+  /* background-color: #20376090; */
+}
 </style>
--- a/src/views/material-manage/cockpit/components/bomList.vue
+++ b/src/views/material-manage/cockpit/components/bomList.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px '+ 24 * beilv + 'px' }" class="box">
+  <div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px 0'}" class="box">
    <div v-for="(item, i) in bomMsg" :key="i" class="bom-box" :style="{ marginBottom: 11 * beilv + 'px'}">
-      <img src="./../../../../assets/img/cockpit/bom.png" alt="" :width="355 * beilv + 'px'" :height="280 * beilv + 'px'">
-      <p class="bom-name" :style="{ bottom: 10 * beilv + 'px', fontSize: 16 * beilv + 'px'}">
+      <img src="./../../../../assets/img/cockpit/bom.png" alt="" width="100%" height="97%"/>
+      <p class="bom-name" :style="{ fontSize: 16 * beilv + 'px'}">
        <span class="leftTriangle" />
        <span>{{ item.name }}</span>
        <span class="rightTriangle" />
@@ -28,14 +28,19 @@ export default {
 <style lang="scss" scoped>
 .box {
  display: flex;
+  flex: 1;
+  height: 100%;
+  width: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
  .bom-box {
    position: relative;
+    width: 48%;
    .bom-name {
      position: absolute;
      width: 100%;
      text-align: center;
+      bottom: 6%;
      .leftTriangle,
      .rightTriangle {
        display: inline-block;
--- a/src/views/material-manage/cockpit/index.vue
+++ b/src/views/material-manage/cockpit/index.vue
@@ -29,32 +29,15 @@
          <bom-list :beilv="beilv" :bom-msg="bomMsg" />
        </base-container>
      </el-col>
-      <el-col :span="14">
+      <el-col :span="14" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
        <!-- 右上 -->
-        <el-row>
-          <el-col :style="{ marginTop: 16 * beilv + 'px' }">
-            <base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
-              <div class="box-padding specil-table1">
-                <base-table
-                  :page="1"
-                  :limit="14"
-                  :show-index="false"
-                  :beilv="beilv"
-                  :table-config="originalFilm"
-                  :table-data="originalFilmList"
-                />
-              </div>
-            </base-container>
-          </el-col>
-        </el-row>
-        <!-- 右下 -->
-        <el-row>
-          <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
+        <div class="right-box">
+          <div class="right-top">
            <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
-                  :limit="14"
+                  :limit="15"
                  :show-index="false"
                  :beilv="beilv"
                  :table-config="material"
@@ -62,8 +45,22 @@
                />
              </div>
            </base-container>
-          </el-col>
-        </el-row>
+          </div>
+          <div class="right-bottom">
+            <base-container :beilv="beilv" :height="470" :title="'深加工再制品'" :title-icon="'cockpit_2_2'">
+              <div class="box-padding specil-table1">
+                <base-table
+                  :page="1"
+                  :limit="15"
+                  :show-index="false"
+                  :beilv="beilv"
+                  :table-config="originalFilm"
+                  :table-data="originalFilmList"
+                />
+              </div>
+            </base-container>
+          </div>
+        </div>
      </el-col>
    </el-row>
  </div>
@@ -178,14 +175,15 @@ export default {
    getMsg() {
      const arr = []
      const temp = []
+      const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
      for (let i = 0; i < 20; i++) {
        const obj = {}
-        const sj = parseInt(Math.random() * 200)
-        obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
-        obj.productLine = '产线A'
-        obj.spec = '光伏玻璃2.0'
-        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
-        obj.num = parseInt(Math.random() * 800 + 100)
+        const sj = parseInt(Math.random() * 14 + 1)
+        obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
+        obj.productLine = sj % 2 ? 'A' : 'B'
+        obj.spec = productList[parseInt(Math.random() * (productList.length))]
+        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
+        obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
        arr.push(obj)
      }
      this.originalFilmList = arr
@@ -203,12 +201,12 @@ export default {
      }
      this.materialList = temp
      this.bomMsg = [
-        { name: '隔离纸' },
-        { name: '异丙醇' },
-        { name: '镀膜液' },
-        { name: '磨轮' },
-        { name: '包装辅材' },
-        { name: '网板' }
+        { name: '2.0-1128*1716' },
+        { name: '2.0-1128*2251' },
+        { name: '2.0-1128*2272' },
+        { name: '3.2-1128*1716' },
+        { name: '3.2-1128*1718' },
+        { name: '3.2-1032*1747' }
      ]
    },
    change() {
@@ -256,12 +254,31 @@ export default {
    }
  }
  .box-padding {
-    padding: 0 16px;
+    padding: 0 16px 16px;
+    height: 100%;
  }
 }
 </style>
 <style lang="scss">
 .material-cockpit {
+  .container-main {
+    height: calc(100vh - 100px * var(--beilv));
+    display: flex;
+    flex: 1;
+  }
+  .right-box {
+    height: 100%;
+    display: flex;
+    // flex: 1;
+    flex-direction: column-reverse;
+    justify-content: space-between;
+  }
+  .right-top {
+    height: 49.4%;
+  }
+  .right-bottom {
+    height: 49.4%;
+  }
  .specil-table1 {
    .el-table .cell {
      padding-left: 40px;