2022-11-07 10:44:37 +08:00
4 changed files with 129 additions and 48 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -14909,8 +14909,7 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmmirror.com/rx-lite/-/rx-lite-4.0.8.tgz",
      "integrity": "sha512-Cun9QucwK6MIrp3mry/Y7hqD1oFqTYLQ4pGxaHTjIdaFDWRGGLikqp6u8LcWJnzpoALg9hap+JGk8sFIUuEGNA==",
-      "dev": true,
-      "optional": true
+      "dev": true
    },
    "rx-lite-aggregates": {
      "version": "4.0.8",
--- a/src/views/material-manage/cockpit/index.vue
+++ b/src/views/material-manage/cockpit/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="container" ref="container" class="visual-container">
+  <div id="container" ref="container" class="visual-container material-cockpit">
    <el-row
      class="container-title"
      :style="{
@ -8,8 +8,10 @@
        fontSize: beilv * 30 + 'px'
      }"
    >
+      <div :style="{ paddingLeft: 645 * beilv + 'px' }">
        <img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
        合肥新能源数字工厂物料管理驾驶舱
+      </div>
      <el-button
        type="text"
        class="title-button"
@ -32,7 +34,7 @@
        <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">
+              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="14"
@ -49,7 +51,7 @@
        <el-row>
          <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
            <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
-              <div class="box-padding">
+              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="14"
@ -75,45 +77,55 @@ import bomList from './components/bomList.vue'
 const originalFilm = [
  {
    prop: 'time',
-    label: '上线时间'
+    label: '上线时间',
+    minWidth: 35
  },
  {
    prop: 'productLine',
-    label: '产线'
+    label: '产线',
+    minWidth: 33
  },
  {
    prop: 'spec',
-    label: '原片规格'
+    label: '原片规格',
+    minWidth: 32.4
  },
  {
    prop: 'batch',
-    label: '批次'
+    label: '批次',
+    minWidth: 35
  },
  {
    prop: 'num',
-    label: '数量'
+    label: '数量',
+    minWidth: 28
  }
 ]
 const material = [
  {
    prop: 'time',
-    label: '上线时间'
+    label: '上线时间',
+    minWidth: 35
  },
  {
    prop: 'eqName',
-    label: '设备名称'
+    label: '设备名称',
+    minWidth: 33
  },
  {
    prop: 'spec',
-    label: '辅料规格'
+    label: '辅料规格',
+    minWidth: 32.4
  },
  {
    prop: 'batch',
-    label: '批次'
+    label: '批次',
+    minWidth: 35
  },
  {
    prop: 'num',
-    label: '数量'
+    label: '数量',
+    minWidth: 28
  }
 ]
 export default {
@ -220,6 +232,7 @@ export default {
        })
        return false
      }
+      this.isFullScreen = !this.isFullScreen
      screenfull.toggle(this.$refs.container)
    }
  }
@ -236,7 +249,6 @@ export default {
    background: url('../../../assets/img/cockpit/title.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
-    text-align: center;
    .title-button {
      color: #00fff0;
      font-size: 20px;
@ -248,3 +260,17 @@ export default {
  }
 }
 </style>
+<style lang="scss">
+.material-cockpit {
+  .specil-table1 {
+    .el-table .cell {
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 40px;
+    }
+  }
+}
+</style>
--- a/src/views/orderManage/orderManagerCockpit/cockpit.vue
+++ b/src/views/orderManage/orderManagerCockpit/cockpit.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="container" ref="container" class="visual-container">
+  <div id="container" ref="container" class="visual-container order-cockpit">
    <el-row
      class="container-title"
      :style="{
@ -8,16 +8,18 @@
        fontSize: beilv * 30 + 'px'
      }"
    >
-      <img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
+      <div :style="{ paddingLeft: 645 * beilv + 'px' }">
+        <img src="../../../assets/img/logo.png" style="width:1.1em;position: relative;top:.4em" alt="">
        合肥新能源数字工厂工单管理驾驶舱
+      </div>
      <el-button
        type="text"
        class="title-button"
        :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
        @click="changeFullScreen"
      >
-        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
-        <svg-icon v-else icon-class="fullScreenView" />
+        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
+        <svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
      </el-button>
    </el-row>
    <el-row class="container-main">
@ -30,7 +32,7 @@
        </el-col>
        <el-col :span="14">
          <base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
-            <div class="box-padding">
+            <div class="box-padding specil-table1">
              <base-table
                :page="1"
                :limit="12"
@ -47,7 +49,7 @@
      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
        <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">
+            <div class="box-padding specil-table2">
              <base-table
                :page="1"
                :limit="16"
@ -73,71 +75,87 @@ import orderStatus from './components/orderStatus.vue'
 const orderPool = [
  {
    prop: 'customerName',
-    label: '客户名称'
+    label: '客户名称',
+    minWidth: 35.2
  },
  {
    prop: 'orderCode',
-    label: '订单编号'
+    label: '订单编号',
+    minWidth: 32
  },
  {
    prop: 'productName',
-    label: '产品名称'
+    label: '产品名称',
+    minWidth: 32
  },
  {
    prop: 'planNum',
-    label: '计划加工量'
+    label: '计划加工量',
+    minWidth: 23.6
  },
  {
    prop: 'planDelivery',
-    label: '计划交货期'
+    label: '计划交货期',
+    minWidth: 28.8
  },
  {
    prop: 'status',
    label: '订单状态',
-    subcomponent: orderStatus
+    subcomponent: orderStatus,
+    minWidth: 19
  }
 ]
 const orderMonitiring = [
  {
    prop: 'customerName',
-    label: '客户名称'
+    label: '客户名称',
+    minWidth: 35.2
  },
  {
    prop: 'orderCode',
-    label: '订单编号'
+    label: '订单编号',
+    minWidth: 33.2
  },
  {
    prop: 'status',
    label: '订单状态',
-    subcomponent: orderStatus
+    subcomponent: orderStatus,
+    minWidth: 27
  },
  {
    prop: 'completion',
-    label: '完成率'
+    label: '完成率',
+    minWidth: 24.8
  },
  {
    prop: 'yield',
-    label: '良品率'
+    label: '良品率',
+    minWidth: 24.8
  },
  {
    prop: 'shiftCosts',
-    label: '班组费用'
+    label: '班组费用',
+    minWidth: 24.8
  },
  {
    prop: 'energyCosts',
-    label: '能耗费用'
+    label: '能耗费用',
+    minWidth: 29.4
  },
  {
    prop: 'equipmentCost',
-    label: '设备费用'
+    label: '设备费用',
+    minWidth: 29.4
  },
  {
    prop: 'materialCost',
-    label: '材料费用'
+    label: '材料费用',
+    minWidth: 29.4
  },
  {
    prop: 'totalCost',
-    label: '总费用'
+    label: '总费用',
+    minWidth: 31.6
  }
 ]
 export default {
@ -217,11 +235,11 @@ export default {
        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 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.energyCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.equipmentCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.materialCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
-        obj.totalCost = obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost
+        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)
        temp.push(obj)
      }
      this.orderMonitiringList = temp
@ -247,6 +265,7 @@ export default {
        })
        return false
      }
+      this.isFullScreen = !this.isFullScreen
      screenfull.toggle(this.$refs.container)
    }
  }
@ -263,7 +282,6 @@ export default {
    background: url('../../../assets/img/cockpit/title.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
-    text-align: center;
    .title-button {
      color: #00fff0;
      font-size: 20px;
@ -278,3 +296,26 @@ export default {
  }
 }
 </style>
+<style lang="scss">
+.order-cockpit {
+  .specil-table1 {
+    .el-table .cell {
+      padding-left: 25px;
+      padding-right: 25px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 25px;
+    }
+  }
+  .specil-table2 {
+    .el-table .cell {
+      padding-left: 50px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 50px;
+    }
+  }
+}
+</style>
--- a/src/views/orderManage/orderManagerCockpit/components/orderStatus.vue
+++ b/src/views/orderManage/orderManagerCockpit/components/orderStatus.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="height: 14px">
+  <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" />
      已完成
@ -22,6 +22,21 @@ export default {
      type: Object,
      default: () => ({})
    }
+  },
+  data() {
+    return {
+      beilv: 1
+    }
+  },
+  mounted() {
+    this.beilv = document.getElementById('container').offsetWidth / 1920
+    window.addEventListener('resize', () => {
+      if (this.isFullScreen) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    })
  }
 }
 </script>