工单&物料

2022-11-17 08:55:51 +08:00
parent f01052d96f
commit d39bb981ec
10 changed files with 400 additions and 234 deletions
--- a/src/views/orderManage/orderManagerCockpit/components/baseContainer/index.vue
+++ b/src/views/orderManage/orderManagerCockpit/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% - 6em);
+  }
 }
 </style>
--- a/src/views/orderManage/orderManagerCockpit/components/baseTable.vue
+++ b/src/views/orderManage/orderManagerCockpit/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/orderManage/orderManagerCockpit/components/orderStatus.vue
+++ b/src/views/orderManage/orderManagerCockpit/components/orderStatus.vue
@@ -1,9 +1,5 @@
 <template>
-  <div :style="{ height: 15 * beilv + 'px' }">
-    <span v-if="this.injectData.status === 3">
-      <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
-      已完成
-    </span>
+  <div class="state-box">
    <span v-if="this.injectData.status === 1">
      <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
      在途
@@ -12,6 +8,14 @@
      <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
      已下发
    </span>
+    <span v-if="this.injectData.status === 3">
+      <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
+      已完成
+    </span>
+    <span v-if="this.injectData.status === 4">
+      <svg-icon icon-class="orange_dot" style="font-size: 14px; position: relative; top: .08em" />
+      待下发
+    </span>
  </div>
 </template>
 <script>
@@ -40,3 +44,8 @@ export default {
  }
 }
 </script>
+<style scoped>
+.state-box {
+  height: 15px;
+}
+</style>
--- a/src/views/orderManage/orderManagerCockpit/components/workOrder.vue
+++ b/src/views/orderManage/orderManagerCockpit/components/workOrder.vue
@@ -5,7 +5,7 @@
      v-for="(item,index) in orderMsg"
      :key="index"
      :style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
-        + 'px', height: 168 * beilv + 'px'}"
+        + 'px'}"
      class="box"
    >
      <p class="line1">
@@ -57,6 +57,8 @@ export default {
 <style lang='scss' scoped>
 .order-box {
  display: flex;
+  flex: 1;
+  height: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
  .box {