工单&物料

src/views/orderManage/orderManagerCockpit/cockpit.vue

@@ -24,7 +24,7 @@
     </el-row>
     <el-row class="container-main">
       <!-- 上 -->
-      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv" class="top-container">
         <el-col :span="10">
           <base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
             <work-order :beilv="beilv" :order-msg="orderList" />
@@ -46,13 +46,13 @@
         </el-col>
       </el-row>
       <!-- 下 -->
-      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" class="bottom-container">
         <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
           <base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
             <div class="box-padding specil-table2">
               <base-table
                 :page="1"
-                :limit="16"
+                :limit="17"
                 :show-index="false"
                 :beilv="beilv"
                 :table-config="orderMonitiring"
@@ -76,17 +76,17 @@ const orderPool = [
   {
     prop: 'customerName',
     label: '客户名称',
-    minWidth: 35.2
+    minWidth: 38
   },
   {
     prop: 'orderCode',
     label: '订单编号',
-    minWidth: 32
+    minWidth: 36
   },
   {
     prop: 'productName',
     label: '产品名称',
-    minWidth: 32
+    minWidth: 30
   },
   {
     prop: 'planNum',
@@ -96,31 +96,31 @@ const orderPool = [
   {
     prop: 'planDelivery',
     label: '计划交货期',
-    minWidth: 28.8
+    minWidth: 25
   },
   {
     prop: 'status',
     label: '订单状态',
     subcomponent: orderStatus,
-    minWidth: 19
+    minWidth: 21
   }
 ]
 const orderMonitiring = [
   {
     prop: 'customerName',
     label: '客户名称',
-    minWidth: 35.2
+    minWidth: 40
   },
   {
     prop: 'orderCode',
     label: '订单编号',
-    minWidth: 33.2
+    minWidth: 38
   },
   {
     prop: 'status',
     label: '订单状态',
     subcomponent: orderStatus,
-    minWidth: 27
+    minWidth: 28
   },
   {
     prop: 'completion',
@@ -206,40 +206,55 @@ export default {
   },
   methods: {
     getMsg() {
-      this.orderList = [
-        { code: 'ZGD20221024000110', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221024000110', percentage: '100%' },
-        { code: 'ZGD20221028000157', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221028000157', percentage: '85%' },
-        { code: 'ZGD20221030000142', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000142', percentage: '72%' },
-        { code: 'ZGD20221030000098', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000098', percentage: '46%' }
-      ]
-      const compList = ['SHABO沙玻', 'KIBING旗滨', '金晶玻璃', '济南金昊', '东莞佳美特', '汇中矿产', '文盛新材料', '西点化学', '开源塑胶', '奥驰商贸', '竹中科技', '程龙玻璃']
-      const arr = []
+      const compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司']
+      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']
+      const daping = [{name: '3.2-1032*1747', percentage: '72%'},{name: '2.0-1128*1716', percentage: '67%'},{name: '3.2-1128*1716', percentage: '46%'},{name: '2.0-1128*2251', percentage: '89%'}]
+      const arr1 = []
+      const arr2 = []
       const temp = []
-      for (let i = 0; i < 20; i++) {
-        const obj = {}
+      for(let i = 0; i < 4; i++) {
         const sj = parseInt(Math.random() * 200)
-        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
-        obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
-        obj.productName = '光伏玻璃2.0'
-        obj.planNum = parseInt(Math.random() * 800 + 100)
-        obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
-        obj.status = parseInt(Math.random() * 3 + 1)
-        arr.push(obj)
+        const obj = {}
+        obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
+        obj.state = '激活'
+        obj.name = daping[i].name
+        obj.line = sj % 2 ? 'A' : 'B'
+        obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
+        obj.percentage = daping[i].percentage
+        arr1.push(obj)
       }
-      this.orderPoolList = arr
+      this.orderList = arr1
       for (let i = 0; i < 20; i++) {
         const obj = {}
         const sj = parseInt(Math.random() * 200)
         obj.customerName = compList[parseInt(Math.random() * (compList.length))]
-        obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
+        obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
+        obj.productName = productList[parseInt(Math.random() * (productList.length))]
+        obj.planNum = parseInt(Math.random() * 800 + 100) + '(m²)'
+        obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
+        // obj.status = parseInt(Math.random() * 3 + 1)
+        obj.status = 4
+        arr2.push(obj)
+      }
+      this.orderPoolList = arr2
+      for (let i = 0; i < 20; i++) {
+        const obj = {}
+        const sj = parseInt(Math.random() * 200)
+        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
+        obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
         obj.status = parseInt(Math.random() * 3 + 1)
         obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
         obj.yield = parseInt(Math.random() * 50 + 50) + '%'
-        obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
-        obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
+        // obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        // obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
+        obj.shiftCosts = '0'
+        obj.energyCosts = '0'
+        obj.equipmentCost = '0'
+        obj.materialCost = '0'
+        obj.totalCost = '0'
         temp.push(obj)
       }
       this.orderMonitiringList = temp
@@ -290,9 +305,20 @@ export default {
   }
   .container-main {
     padding: 16px 8px;
+    .top-container {
+      height: calc((100vh - 100px * var(--beilv)) * 0.42);
+      display: flex;
+      flex: 1;
+    }
+    .bottom-container {
+      height: calc((100vh - 100px * var(--beilv)) * 0.56);
+      display: flex;
+      flex: 1;
+    }
   }
   .box-padding {
     padding: 0 16px;
+    height: 100%;
   }
 }
 </style>
@@ -310,11 +336,11 @@ export default {
   }
   .specil-table2 {
     .el-table .cell {
-      padding-left: 50px;
+      padding-left: 25px;
     }
     .el-table--border th:first-child .cell,
     .el-table--border td:first-child .cell {
-      padding-left: 50px;
+      padding-left: 25px;
     }
   }
 }

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>

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>

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>

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 {