修改ui

2024-03-28 15:36:39 +08:00
parent b8c39e8095
commit 04cea7a199
9 changed files with 320 additions and 163 deletions
--- a/src/views/OperationalOverview/AGVBoard.vue
+++ b/src/views/OperationalOverview/AGVBoard.vue
@@ -2,7 +2,7 @@
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
- * @LastEditTime: 2024-03-27 15:42:39
+ * @LastEditTime: 2024-03-28 15:28:07
 * @Description:
 -->
 <template>
@@ -16,35 +16,32 @@
      许昌安彩AGV原片周转看板
      <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
      <h3 class="time">{{ times }}</h3>
-      <el-button
-        type="text"
-        class="title-button"
-        :style="{ right: 33 + 'px', top: 37 + 'px' }"
-        @click="changeFullScreen"
-      >
-        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
-        <svg-icon v-else icon-class="fullScreenView" />
+      <el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px', fontSize: '32px' }"
+        @click="changeFullScreen">
+        <svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
+        <svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
      </el-button>
    </el-row>
    <el-row class="container-main flex-col" type="flex">
      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :size="'middle'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'">
-            <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
-              :table-data="qualityYearList" />
+          <base-container :beilv="1" :size="'eqStatus'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'">
+            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
+              :table-data="qualityYearList" /> -->
+            <dv-scroll-board :config="taskConfig" style="width:100%;height:350px" ref='taskScrollBoard' />
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
-            <div style="width:100%; overflow: hidden scroll;">
+          <base-container :beilv="1" :size="'eqStatus'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
+            <div class="order" style="width:100%; overflow: hidden scroll;height: 350px;">
              <el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
                <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
                  <i class="el-icon-check" />
                  {{ op.name }}
                </p>
                <p v-else class="now-secondary-title">{{ op.name }}</p>
-                <el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" :percentage="op.outRate * 100"
-                  class="custom-progress-bar" />
+                <el-progress :stroke-width="10" define-back-color="rgba(32, 57, 96, 1)" text-color="white"
+                  :percentage="op.outRate * 100" class="custom-progress-bar" />
              </el-row>
            </div>
          </base-container>
@@ -53,17 +50,19 @@

      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'productLine'"
+          <base-container :beilv="1" :height="280" :size="'eqStatus'" :title="'库存管理'" :title-icon="'productLine'"
            :back="'energy'">
-            <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
-              :table-data="inventoryList" />
+            <!-- <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
+              :table-data="inventoryList" /> -->
+            <dv-scroll-board :config="inventoryConfig" style="width:100%;height:380px" ref='inventoryScrollBoard' />
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'info'"
+          <base-container :beilv="1" :height="318 + 338 + 16" :size="'eqStatus'" :title="'库位信息'" :title-icon="'info'"
            :back="'energy'">
-            <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
-              :table-data="locationList" />
+            <!-- <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
+              :table-data="locationList" /> -->
+            <dv-scroll-board :config="locationConfig" style="width:100%;height:380px" ref='locationScrollBoard' />
          </base-container>
        </el-col>
      </el-row>
@@ -191,6 +190,15 @@ const inventoryList = [
  {
    eqName: '	螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日'
  },
+  {
+    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
+  },
+  {
+    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
+  },
+  {
+    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
+  },
  {
    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
  }
@@ -267,6 +275,39 @@ export default {
      inventoryTableProps,
      inventoryList,
      locationList,
+      taskConfig: {
+        header: ['序号', '作业号', '执行叉车', '库位', '成品规格', '成品编码', '时间'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [80, 120, 90, 140, 140, 150,130],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
+      inventoryConfig: {
+        header: ['序号', '物件名称', '存放区域', '规格', '数量', '单位', '编码', '入库时间'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [80, 100, 90, 140, 80, 70, 180, 120],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
+      locationConfig: {
+        header: ['序号', '库位名称', '存放物件名称', '数量', '存放位置', '编码', '单位', '入库时间'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [80, 100, 120, 80, 100, 180, 70, 120],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
      locationTableProps,
      qualityYearList,
      isFullScreen: false,
@@ -294,6 +335,20 @@ export default {
        {
          name: '作业号RQ20230911',
          outRate: '0.4'
+        },
+         {
+          name: '作业号RQ20230911',
+          outRate: '0.4'
+        },
+        {
+          name: '作业号RQ20230911',
+          outRate: '0.4'
+        }, {
+          name: '作业号RQ20230911',
+          outRate: '0.4'
+        }, {
+          name: '作业号RQ20230911',
+          outRate: '0.4'
        }
      ],
      // qualityTableProps1,
@@ -316,6 +371,16 @@ export default {
  },

  watch: {
+    isFullScreen: function (val) {
+      if (val) {
+        const _this = this;
+        _this.beilv2 = document.documentElement.clientWidth / 1920
+        console.log(_this.beilv2);
+      } else {
+        const _this = this;
+        _this.beilv2 = document.documentElement.clientWidth / 1920
+      }
+    },
    clientWidth(val) {
      if (!this.timer) {
        this.clientWidth = val
@@ -343,6 +408,9 @@ export default {
    }, 86400000)
  },
  mounted() {
+    this.getTask()
+    this.getInventoryData()
+    this.getLocationData()
    const _this = this;
    window.onresize = () => {
      return (() => {
@@ -355,6 +423,60 @@ export default {
    getTimes() {
      setInterval(this.getTimesInterval, 1000);
    },
+    getTask() {
+      let eqArr = this.qualityYearList.map((item, index) => [
+        `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+        // formatDate(item.planStartTime) || '',
+        `
+          <span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
+            </span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
+
+      ])
+      this.taskConfig.data = eqArr
+      this.$refs['taskScrollBoard'].updateRows(eqArr)
+    },
+    getInventoryData() {
+      let eqArr = this.inventoryList.map((item, index) => [
+        `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+        // formatDate(item.planStartTime) || '',
+        `
+          <span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
+            </span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
+      ])
+      this.inventoryConfig.data = eqArr
+      this.$refs['inventoryScrollBoard'].updateRows(eqArr)
+    },
+    getLocationData() {
+      let eqArr = this.locationList.map((item, index) => [
+        `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+        // formatDate(item.planStartTime) || '',
+        `
+          <span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
+            </span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
+        `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
+      ])
+      this.locationConfig.data = eqArr
+      this.$refs['locationScrollBoard'].updateRows(eqArr)
+    },
    getTimesInterval: function () {
      let _this = this;
      let year = new Date().getFullYear(); //获取当前时间的年份
@@ -401,7 +523,7 @@ export default {
        })
        return false
      }
-      screenfull.toggle(this.$refs.container)
+      screenfull.toggle()
    }
  }
 }
@@ -428,22 +550,22 @@ export default {
    letter-spacing: 8px;
    // word-spacing: 8px;
    position: relative;
-    .unit{
-      position: absolute;
-      left: 240px;
-      top:25px;
-      color: rgba($color: #ffffff, $alpha: 8);
-      font-size: 20px;
-      letter-spacing: 0px;
-    }
-    .time{
-      position: absolute;
-      left: 1400px;
-      top:25px;
-      color: rgba($color: #ffffff, $alpha: 8);
-      font-size: 20px;
-      letter-spacing: 0px;
-    }
+      .unit {
+          position: absolute;
+          left: 240px;
+          top: 25px;
+          color: rgba(255, 255, 255, 0.80);
+          font-size: 20px;
+          letter-spacing: 0px;
+        }
+        .time {
+          position: absolute;
+          left: 1400px;
+            top: 25px;
+          color: rgba(255, 255, 255, 0.80);
+          font-size: 20px;
+          letter-spacing: 0px;
+        }
    .title-button {
      color: #00fff0;
      font-size: 20px;
@@ -495,7 +617,9 @@ export default {
 //  .container-main {
 //    padding: 5px;
 //  }
-
+.order::-webkit-scrollbar{
+  display: none
+}
 </style>

 <style lang="scss" >