转移仓库

src/api/index.js

@@ -34,4 +34,14 @@ export function getEqpList() {
     method: 'post',
 })
 }
+// 注塑车间
+export function getZSJList(day) {
+ return request({
+    url: '/api/bi/zhu-su-bi-data',
+    method: 'post',
+    data:{
+        day
+    }
+})
+}
 

src/assets/scss/index.scss

@@ -19,6 +19,7 @@
   }
 
   .host-body {
+    height: 100%;
 
     .dv-dec-10,
     .dv-dec-10-s {
@@ -132,6 +133,7 @@
     }
 
     .body-box {
+      // height: 100%;
       margin-top: 16px;
       display: flex;
       flex-direction: column;

src/assets/scss/tianyi.scss

@@ -18,18 +18,97 @@
 .type0 {
     background-image: linear-gradient(#849384, darken(#849384, 20%));
 }
+
 .type1 {
     background-image: linear-gradient(#6acbf0, darken(#6acbf0, 20%));
 }
+
 .type2 {
     background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
 }
+
 .type3 {
     background-image: linear-gradient(#d3ff33, darken(#d3ff33, 20%));
 }
+
 .type4 {
     background-image: linear-gradient(#ff7db7, darken(#ff7db7, 20%));
 }
+
 .type5 {
     background-image: linear-gradient(red, darken(red, 20%));
 }
+
+// 加载动画
+.loadbox {
+    position: relative;
+    width: 90px;
+    height: 50px;
+    // margin: 50px auto;
+    position: fixed;
+    top: 40px;
+    right: 20px;
+}
+
+.loadbox span {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: #3498db;
+    opacity: 0.5;
+    border-radius: 100%;
+    animation: anim 1s infinite ease-in-out;
+}
+
+.loadbox> :nth-child(2) {
+    left: 20px;
+    animation-delay: 0.2s;
+}
+
+.loadbox> :nth-child(3) {
+    left: 40px;
+    animation-delay: 0.4s;
+}
+
+.loadbox> :nth-child(4) {
+    left: 60px;
+    animation-delay: 0.6s;
+}
+
+.loadbox> :nth-child(5) {
+    left: 80px;
+    animation-delay: 0.8s;
+}
+
+@keyframes anim {
+    0% {
+        opacity: 0.3;
+        transform: translateY(0px);
+    }
+
+    50% {
+        opacity: 1;
+        transform: translateY(-10px);
+        background: #64dbe3;
+    }
+
+    100% {
+        opacity: 0.3;
+        transform: translateY(0px);
+    }
+}
+
+.hongyuan {
+    width: 20px;
+    height: 20px;
+    background-color: rgba(255, 0, 0);
+    border-radius: 50%;
+    margin-right: 5px;
+}
+.lvyuan {
+    width: 20px;
+    height: 20px;
+    background-color: rgb(64, 229, 73);
+    border-radius: 50%;
+    margin-right: 5px;
+}

src/components/echart/pieEchart/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart :options="options" :id="id" height="500px" width="500px"></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data() {
+    return {
+
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    options: {
+
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/cpcView/index.vue

@@ -28,7 +28,7 @@
 import { getCpcList } from '@/api/index'
 
 export default {
-    name: 'yclView',
+    name: 'cpcView',
     data() {
         return {
             data: [],

src/views/eqpView/index.vue

@@ -22,7 +22,7 @@
 import { getEqpList } from '@/api/index'
 
 export default {
-    name: 'yclView',
+    name: 'eqpView',
     data() {
         return {
             data: []

src/views/index.vue

@@ -40,14 +40,18 @@
               :style="type == 3 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
               <span class="text">成品仓</span>
             </div>
-            <div class="react-left ml-3" @click="type = 4"
+            <!-- <div class="react-left ml-3" @click="type = 4"
               :style="type == 4 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
               <span class="text">设备数采</span>
-            </div>
+            </div>  -->
-            <div class="react-left ml-3" @click="type = 5"
+             <div class="react-left ml-3" @click="type = 5"
               :style="type == 5 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
               <span class="text">生产任务</span>
             </div> 
+            <!-- <div class="react-left ml-3" @click="type = 6"
+              :style="type == 6 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
+              <span class="text">注塑车间</span>
+            </div> -->
           </div>
           <div class="d-flex aside-width">
             <div class="react-right bg-color-blue mr-3">
@@ -118,6 +122,9 @@
           <dv-border-box-11 v-if="type == 5">
             <taskView />
           </dv-border-box-11>
+          <dv-border-box-1 v-if="type == 6">
+            <zscjView />
+          </dv-border-box-1>
         </div>
       </div>
     </div>
@@ -139,6 +146,7 @@ import taskView from './taskView'
 import cpcView from './cpcView'
 import yclView from './yclView'
 import zccView from './zccView'
+import zscjView from './zscjView'
 
 export default {
   mixins: [drawMixin],
@@ -151,7 +159,7 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      type: 1,
+      type: 6,
     }
   },
   components: {
@@ -167,6 +175,7 @@ export default {
     cpcView,
     yclView,
     zccView,
+    zscjView,
   },
   mounted() {
     this.timeFn()

src/views/taskView/index.vue

@@ -1,5 +1,12 @@
 <template>
     <div class="box">
+        <div class="loadbox" v-if="loadboxV">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
         <el-table :data="data" style="width: 100%" height="640" v-loading="loadingShow">
             <el-table-column prop="mo_code" label="任务单编号">
             </el-table-column>
@@ -28,15 +35,18 @@
 <script>
 import { gettaskList } from '@/api/index'
 export default {
-    name: 'yclView',
+    name: 'taskView',
     data() {
         return {
             data: [],
             loadingShow: false,
+            loadboxV: false,
         }
     },
     created() {
         this.gettaskList()
+        this.timer = setInterval(this.getYclListLoad, 30000);
+
     },
     mounted() {
     },
@@ -49,13 +59,21 @@ export default {
             gettaskList().then(res => {
                 this.data = res.data.data || []
             }).finally(e => { this.loadingShow = false })
+        },
+        getYclListLoad() {
+            this.loadboxV = true
+            gettaskList().then(res => {
+                this.data = res.data.data || []
+            }).finally(e => { this.loadboxV = false })
         }
+
     }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/scss/tianyi.scss';
+
 .box {
     width: 100%;
     height: 860px;
@@ -123,4 +141,7 @@ export default {
 ::v-deep .el-loading-mask {
     background-color: transparent !important;
 }
+
+
+
 </style>

src/views/yclView/index.vue

@@ -31,8 +31,8 @@
                         @mouseleave="mouseleave(it, $event)">
                         <div class="lists">
                             <div>{{ it.location_code }}</div>
-                            <div v-if="it.type == 2">{{ it.material_code }}</div>
                             <div v-if="it.type == 2">{{ it.material_name }}</div>
+                            <div v-if="it.type == 2">{{ it.material_specification }}</div>
                             <div v-if="it.type == 2">{{ it.code_batch }}</div>
                             <div v-if="it.type == 2">数量:{{ it.num }}</div>
                         </div>

src/views/zccView/index.vue

@@ -1,10 +1,17 @@
 <template>
     <div class="box">
+        <div class="loadbox" v-if="loadboxV">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
         <div v-for="(item, index) of data" :key="index" class="box-x">
             <!-- <div class="index">{{ ab[index] }}</div> -->
             <div class="index">{{ index + 1 }}</div>
             <div>
-                <div class="item-top" v-for="i of 6" :key="i">
+                <div class="item-top" v-for="i of [6, 5, 4, 3, 2, 1]" :key="i">
                     <!-- <div class="item-x" v-if="item.type == 0"> </div> -->
                     <div v-for="(it, ind) of filterData(item, i)" :key="ind" class="item-x"
                         :class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
@@ -36,16 +43,18 @@
 <script>
 import { getZccList } from '@/api/index'
 export default {
-    name: 'yclView',
+    name: 'zccView',
     data() {
         return {
             data: [],
+            loadboxV:false,
             // ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
 
         }
     },
     created() {
         this.getZccList()
+        this.timer = setInterval(this.getYclListLoad, 30000);
     },
     mounted() {
     },
@@ -76,6 +85,23 @@ export default {
                     }
                 })
             }).finally(e => { loading.close(); })
+        },
+        // 定时器重复加载
+        getYclListLoad() {
+            this.loadboxV = true
+            getZccList().then(res => {
+                this.data = res.data.data || []
+                this.data.forEach((item, index) => {
+                    const arr = [6, 7, 8, 9, 10, 24, 25, 26, 27, 28, 29, 40, 41, 42, 43, 44]
+                    // const obj = { type: 1, location_code: '', layer: '1' }
+                    if (arr.some(it => { return it == index + 1 })) {
+                        for (let i = 1; i < 7; i++) {
+                            item.splice(42, 0, { type: 4, location_code: '', layers: i })
+                            item.splice(42, 0, { type: 4, location_code: '', layers: i })
+                        }
+                    }
+                })
+            }).finally(e => { this.loadboxV = false })
         }
     }
 }
@@ -140,5 +166,63 @@ $sysColor: rgba(85, 110, 255, 0.9);
     .item-top:last-child {
         border-bottom: 0px;
     }
+       // 加载动画
+       .loadbox {
+        position: relative;
+        width: 90px;
+        height: 50px;
+        // margin: 50px auto;
+        position: fixed;
+        top: 40px;
+        right: 20px;
+    }
+
+    .loadbox span {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background: #3498db;
+        opacity: 0.5;
+        border-radius: 100%;
+        animation: anim 1s infinite ease-in-out;
+    }
+
+    .loadbox> :nth-child(2) {
+        left: 20px;
+        animation-delay: 0.2s;
+    }
+
+    .loadbox> :nth-child(3) {
+        left: 40px;
+        animation-delay: 0.4s;
+    }
+
+    .loadbox> :nth-child(4) {
+        left: 60px;
+        animation-delay: 0.6s;
+    }
+
+    .loadbox> :nth-child(5) {
+        left: 80px;
+        animation-delay: 0.8s;
+    }
+
+    @keyframes anim {
+        0% {
+            opacity: 0.3;
+            transform: translateY(0px);
+        }
+
+        50% {
+            opacity: 1;
+            transform: translateY(-10px);
+            background: #64dbe3;
+        }
+
+        100% {
+            opacity: 0.3;
+            transform: translateY(0px);
+        }
+    }
 }
 </style>

src/views/zscjView/index.vue

@@ -0,0 +1,410 @@
+<template>
+    <div class="box">
+        <div class="loadbox" v-if="loadboxV">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <div class="top">
+            <div class="left">
+                <div class="top_le">
+                    <div class="leftView">
+                        <dv-border-box-13>
+                            <div class="text">
+                                <div>
+                                    本月产量
+                                </div>
+                                <div class="qty">
+                                    {{ data.day_month_yield.month_qty }}
+
+                                </div>
+                            </div>
+                        </dv-border-box-13>
+                    </div>
+                    <div class="leftView">
+                        <dv-border-box-13>
+                            <div class="text">
+                                <div>
+                                    当日产量
+                                </div>
+                                <div class="qty">
+                                    {{ data.day_month_yield.day_qty }}
+                                </div>
+                            </div>
+                        </dv-border-box-13>
+
+                    </div>
+                    <div class="leftView">
+                        <dv-border-box-13>
+                            <div class="text">
+                                <div>
+                                    本月合格
+                                </div>
+                                <div class="qty">
+                                    {{ data.day_month_yield.month_qualified_percent }}%
+                                </div>
+                            </div>
+                        </dv-border-box-13>
+
+                    </div>
+                    <div class="leftView">
+                        <dv-border-box-13>
+                            <div class="text">
+                                <div>
+                                    当日合格率
+                                </div>
+                                <div class="qty">
+                                    {{ data.day_month_yield.day_qualified_percent }}%
+                                </div>
+                            </div>
+                        </dv-border-box-13>
+                    </div>
+                </div>
+                <div class="bom_le">
+                    <el-table :data="data.report_record_list" style="width: 100%" height="320" v-loading="loadingShow">
+                        <el-table-column prop="mo_task_code" label="任务单编号">
+                        </el-table-column>
+
+                        <el-table-column prop="material_name" label="物料名称">
+                        </el-table-column>
+                        <el-table-column prop="plan_qty" label="计划数量">
+                        </el-table-column>
+                        <el-table-column prop="qty" label="已排产数量">
+                        </el-table-column>
+                        <el-table-column prop="remain_plan_qty" label="待排产数量">
+                        </el-table-column>
+                        <!-- <el-table-column prop="report_time" label="提报时间">
+                        </el-table-column>
+                        <el-table-column prop="report_type" label="提报结论">
+                        </el-table-column>
+                        <el-table-column prop="repoter_name" label="提报人">
+                        </el-table-column> -->
+                        <!-- <el-table-column prop="complete_rate" label="进度">
+                        <template slot-scope="scope">
+                            <el-progress :percentage="parseInt(scope.row.complete_rate)"
+                                v-if="scope.row.complete_rate"></el-progress>
+                        </template>
+</el-table-column> -->
+                    </el-table>
+                </div>
+            </div>
+            <div class="right">
+                <div class="leftView">
+                    <dv-border-box-13>
+                        <div class="text">
+                            <pieEchart :options="options" />
+                        </div>
+                    </dv-border-box-13>
+                </div>
+            </div>
+        </div>
+        <div class="bom">
+            <dv-border-box-13>
+                <div class="item">
+                    <div v-for="(item, index) in   data.equip_info_list  " :key="index"
+                        style="display: flex;margin-bottom: 10px;">
+                        <div class="item_pp" v-for="(it, ind) in   item  " :key="ind">
+                            <div style="display: flex;">
+                                <div :class="statusFn(it.status) ? 'lvyuan' : 'hongyuan'"></div>
+                                <div>{{ it.name }}</div>
+                            </div>
+                            <img src="@/assets/zsj.png" alt="" srcset="" style="height: 30px;">
+                        </div>
+                    </div>
+
+                </div>
+            </dv-border-box-13>
+        </div>
+    </div>
+</template>
+
+<script>
+import { gettaskList, getZSJList } from '@/api/index'
+import pieEchart from '@/components/echart/pieEchart'
+export default {
+    name: 'zscjView',
+
+    data() {
+        return {
+            data: [],
+            loadingShow: false,
+            loadboxV: false,
+            imgsrc: require("../../assets/zsj.png"),
+            options: {}
+        }
+    },
+    created() {
+        this.gettaskList()
+
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    components: {
+        pieEchart
+    },
+    methods: {
+        gettaskList() {
+            this.loadingShow = true
+            getZSJList().then(res => {
+                let arr1 = []
+                let arr2 = []
+                let arr3 = []
+                let arr4 = []
+
+                res.data.data.equip_info_list.forEach((item, index) => {
+                    if (index + 1 > 0 && index < 10) {
+                        arr1.push(item)
+                    } else if (index + 1 > 10 && index < 24) {
+                        arr2.push(item)
+                    } else if (index + 1 > 24 && index < 38) {
+                        arr3.push(item)
+                    } else if (index + 1 > 38 && index < 52) {
+                        arr4.push(item)
+                    }
+                })
+                this.data = res.data.data
+                this.data.equip_info_list = [arr1, arr2, arr3, arr4]
+                console.log(res.data.data.equip_info_list, 77777);
+                this.options = {
+                    title: {
+                        text: '设备利用率',
+                        // subtext: '设备利用率',
+                        left: 'center'
+                    },
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: '{b} : {c} ({d}%)'
+                    },
+                    legend: {
+                        orient: 'vertical',
+                        // top: 'middle',
+                        // bottom: 10,
+                        left: 10,
+                        data: res.data.data.equip_pie_list.map(item => item.name)
+                    },
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: '65%',
+                            center: ['50%', '50%'],
+                            selectedMode: 'single',
+                            data: res.data.data.equip_pie_list,
+                            emphasis: {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                }
+
+            }).finally(e => { this.loadingShow = false })
+        },
+        getYclListLoad() {
+            this.loadboxV = true
+            getZSJList().then(res => {
+                let arr1 = []
+                let arr2 = []
+                let arr3 = []
+                let arr4 = []
+
+                res.data.data.equip_info_list.forEach((item, index) => {
+                    if (index + 1 > 0 && index < 10) {
+                        arr1.push(item)
+                    } else if (index + 1 > 10 && index < 24) {
+                        arr2.push(item)
+                    } else if (index + 1 > 24 && index < 38) {
+                        arr3.push(item)
+                    } else if (index + 1 > 38 && index < 52) {
+                        arr4.push(item)
+                    }
+                })
+                this.data = res.data.data
+                this.data.equip_info_list = [arr1, arr2, arr3, arr4]
+                console.log(res.data.data.equip_info_list, 77777);
+                this.options = {
+                    title: {
+                        text: '设备利用率',
+                        // subtext: '设备利用率',
+                        left: 'center'
+                    },
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: '{b} : {c} ({d}%)'
+                    },
+                    legend: {
+                        orient: 'vertical',
+                        // top: 'middle',
+                        // bottom: 10,
+                        left: 10,
+                        data: res.data.data.equip_pie_list.map(item => item.name)
+                    },
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: '65%',
+                            center: ['50%', '50%'],
+                            selectedMode: 'single',
+                            data: res.data.data.equip_pie_list,
+                            emphasis: {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                }
+
+            }).finally(e => { this.loadingShow = false })
+        },
+        statusFn(val) {
+            if (val == null) return 0
+            let newval = val.split(/[\t\r\f\n\s]*/g).join('')
+            if (newval == "0U000") {
+                return 0
+            } else if (newval == "0M000" || newval == "0A000") {
+                return 1
+            }
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/tianyi.scss';
+
+.box {
+    width: 100%;
+    height: 860px;
+
+    .top {
+        display: flex;
+        padding: 20px;
+    }
+
+
+    // // justify-content: space-evenly;
+    // flex-wrap: wrap;
+    .left {
+        width: 70%;
+
+        .top_le {
+            display: flex;
+        }
+
+        .leftView {
+            width: 300px;
+            height: 150px;
+            margin-right: 20px;
+
+            .text {
+                padding: 30px 0 0 20px;
+                font-size: 25px;
+
+                .qty {
+                    padding: 30px 0 0 100px;
+                    font-size: 35px;
+
+                }
+            }
+        }
+    }
+
+    .right {
+        // background-color: #eaeaea;
+        flex: 1;
+
+        .leftView {
+            width: 99%;
+            height: 500px;
+
+            .text {
+                padding: 30px 0 0 20px;
+                font-size: 25px;
+            }
+        }
+    }
+
+    .bom {
+        width: 99%;
+        height: 310px;
+
+        .item {
+            padding: 30px 0px 0 20px;
+            // display: flex;
+            // flex-wrap: wrap;
+
+            .item_pp {
+                margin-right: 13px;
+            }
+        }
+    }
+}
+
+
+// 滚动条隐藏
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+    /*width: 0;宽度为0隐藏*/
+    width: 2px;
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    height: 50px;
+    background: #eee;
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.4);
+}
+
+
+/*最外层透明*/
+::v-deep .el-table,
+::v-deep .el-table__expanded-cell {
+    background-color: transparent !important;
+    color: #9a9a9a;
+}
+
+/* 表格内背景颜色 */
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+    background-color: transparent !important;
+    border: 0; //去除表格
+}
+
+/*去除底边框*/
+::v-deep.el-table td.el-table__cell {
+    border: 0;
+}
+
+::v-deep.el-table th.el-table__cell.is-leaf {
+    border: 0;
+}
+
+/*去除底部灰条.el-table::before*/
+::v-deep .el-table::before {
+    display: none;
+}
+
+::v-deep .el-loading-mask {
+    background-color: transparent !important;
+}
+
+::v-deep .el-table thead {
+    // background-color: transparent !important;
+    color: #eaeaea;
+}
+</style>