新增看板

src/api/kanban/quality.js

@@ -0,0 +1,96 @@
+import request from '@/utils/request'
+// 获取工厂下拉列表
+export function getBoardFactory(data) {
+	return request({
+		url: '/mes/wcsInterface/getBoardFactory',
+		method: 'post',
+		data: data
+	});
+}
+// 获取头部统计维度年月日
+export function getDictData(data) {
+	return request({
+		url: '/quality/qcInterface/getDictData',
+		method: 'post',
+		data: data
+	});
+}
+// 来料--订单异常信息
+export function getOverallInfo(data) {
+	return request({
+		url: '/quality/qcInterface/getOverallInfo',
+		method: 'post',
+		data: data,
+	});
+}
+// 来料--异常分布 过程检验--当日不良占比类型
+export function getCheckProjectsPie(data) {
+	return request({
+		url: '/quality/qcInterface/getCheckProjectsPie',
+		method: 'post',
+		data: data
+	});
+}
+// 来料--供应商产品数量不良TOP5来料--供应商产品批次不良TOP5
+export function getSupplierBadTOP5(data) {
+	return request({
+		url: '/quality/qcInterface/getSupplierBadTOP5',
+		method: 'post',
+		data: data
+	});
+}
+// 来料--订单异常详情
+export function getSupplierNoOkList(data) {
+	return request({
+		url: '/quality/qcInterface/getSupplierNoOkList',
+		method: 'post',
+		data: data
+	});
+}
+// 来料--供应商来料检验及时性详情 生产过程--检验实时详情
+export function getSupplierTaskList(data) {
+	return request({
+		url: '/quality/qcInterface/getSupplierTaskList',
+		method: 'post',
+		data: data
+	});
+}// 过程检验-检验统计
+export function getProduceStaticInfo(data) {
+	return request({
+		url: '/quality/qcInterface/getProduceStaticInfo',
+		method: 'post',
+		data: data
+	});
+}
+// 过程检验--质量异常信息
+export function getProduceNoOkList(data) {
+	return request({
+		url: '/quality/qcInterface/getProduceNoOkList',
+		method: 'post',
+		data: data
+	});
+}
+// 过程检验--产品不合格数量对比
+export function getProMonthNoOk(data) {
+	return request({
+		url: '/quality/qcInterface/getProMonthNoOk',
+		method: 'post',
+		data: data
+	});
+}
+// 过程检验--产品异常趋势
+export function getLineDayNoOk(data) {
+	return request({
+		url: '/quality/qcInterface/getLineDayNoOk',
+		method: 'post',
+		data: data
+	});
+}
+// 过程检验--产品不合格率同期对比
+export function getMonthOfYearContrast(data) {
+	return request({
+		url: '/quality/qcInterface/getMonthOfYearContrast',
+		method: 'post',
+		data: data
+	});
+}

src/utils/request.js

@@ -16,6 +16,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
+  // baseURL: 'http://192.168.202.34:30000/prod-api',
   // 超时
   timeout: 10000
 })

src/views/kanban/quality/kanban3.vue

@@ -0,0 +1,614 @@
+<template>
+    <v-scale-screen width="1920" height="1080" :fullScreen="false">
+        <div class="app-container home" style="">
+            <div class="head">
+                <div class="head-content">
+                    <div class="title">榄菊设备管理云平台</div>
+                </div>
+                <div class="head-logo">
+                    <img src="../../../assets/images/logo.png" alt="" />
+                </div>
+                <div class="back">
+                    <el-button @click="back()" type="primary" icon="el-icon-s-home"></el-button>
+                </div>
+            </div>
+            <div class="content-top">
+                <div class="factoryCode">
+                    <div class="selectborder">
+                        <select v-model="selectxt" class="select1" @change="selectline(selectxt)">
+                            <option :key="index" :value="x.parentName" v-for="(x, index) in getLineList">
+                                {{ x.deptName }}
+                            </option>
+                            <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
+                        </select>
+                    </div>
+                </div>
+                <div class="timebox">
+                    <div class="time">
+                        {{ gettimedata }}
+                    </div>
+                </div>
+            </div>
+            <div class="content">
+                <div class="itembottom">
+                    <div class="item-table item-table1">
+                        <div class="titlebox2" style="margin-bottom: 14px;">
+                            <div class="titlename">检验及时性详情</div>
+                        </div>
+                        <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
+                            <thead>
+                                <tr style="height: 44px;">
+                                    <td style="width: 8%;">序号</td>
+                                    <td style="width: 8%;">检验编号</td>
+                                    <td style="width: 8%;">检验阶段</td>
+                                    <td style="width: 8%;">检验时间</td>
+                                    <td style="width: 8%;">物料来源</td>
+                                    <td style="width: 8%;">物料名称</td>
+                                    <td style="width: 8%;">检验人</td>
+                                    <td style="width: 8%;">检验状态</td>
+                                </tr>
+                            </thead>
+                        </table>
+                        <div class="table-tbody">
+                            <!-- <vue-seamless-scroll :data="Inspectiondetails" :class-option="classOption" class="wrapscroll"> -->
+                            <table border="0" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                    <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
+                                        v-for="(n, index) in Inspectiondetails">
+                                        <td style="width: 8%;">{{ index + 1 }}</td>
+                                        <td style="width: 8%;">{{ n.checkNo }}</td>
+                                        <td style="width: 8%;">{{ n.checkName }}</td>
+                                        <td style="width: 8%;">{{ n.incomeTime }}</td>
+                                        <td style="width: 8%;">{{ n.supplierName }}</td>
+                                        <td style="width: 8%;">{{ n.materialName }}</td>
+                                        <td style="width: 8%;">{{ n.checkManName }}</td>
+                                        <td style="width: 8%;" :class="[n.checkStatus == 1 ? 'color1' : 'color2']">{{
+                                            n.checkStatus }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                            <!-- </vue-seamless-scroll> -->
+                        </div>
+                    </div>
+                    <div class="item-table item-table1">
+                        <div class="titlebox2" style="margin-bottom: 14px;">
+                            <div class="titlename">检验实时详情</div>
+                        </div>
+                        <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
+                            <thead>
+                                <tr style="height: 44px;">
+                                    <td style="width: 8%;">序号</td>
+                                    <td style="width: 8%;">检验编号</td>
+                                    <td style="width: 8%;">检验阶段</td>
+                                    <td style="width: 8%;">检验时间</td>
+                                    <td style="width: 8%;">物料来源</td>
+                                    <td style="width: 8%;">物料名称</td>
+                                    <td style="width: 8%;">检验人</td>
+                                    <td style="width: 8%;">检验状态</td>
+                                </tr>
+                            </thead>
+                        </table>
+                        <div class="table-tbody">
+                            <!-- <vue-seamless-scroll :data="Inspectiondetails" :class-option="classOption" class="wrapscroll"> -->
+                            <table border="0" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                    <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
+                                        v-for="(n, index) in Inspectiondetails1">
+                                        <td style="width: 8%;">{{ index + 1 }}</td>
+                                        <td style="width: 8%;">{{ n.checkNo }}</td>
+                                        <td style="width: 8%;">{{ n.checkName }}</td>
+                                        <td style="width: 8%;">{{ n.incomeTime }}</td>
+                                        <td style="width: 8%;">{{ n.supplierName }}</td>
+                                        <td style="width: 8%;">{{ n.materialName }}</td>
+                                        <td style="width: 8%;">{{ n.checkManName }}</td>
+                                        <td style="width: 8%;" :class="[n.checkStatus == 1 ? 'color1' : 'color2']">{{
+                                            n.checkStatus }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                            <!-- </vue-seamless-scroll> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- <div class="item"></div> -->
+            <!-- <div class="item"></div> -->
+        </div>
+    </v-scale-screen>
+</template>
+  
+<script>
+import {
+    getBoardFactory,
+    getSupplierNoOkList,
+} from "@/api/kanban/quality";;
+import * as echarts from "echarts";
+import moment from "moment";
+// import Echarts3D from "./echarts3d.vue";
+// import Echarts3D2 from "./echarts3d2.vue";
+export default {
+    name: "Index",
+    components: {
+    },
+    data() {
+        return {
+            gettimedata: "",
+            selectxt: null,
+            selectxtclasses: null,
+            getLineList: [],
+            classesList: [],
+            number1: 0,
+            number2: 0,
+            number3: 0,
+            number4: 0,
+            nameList: [
+                "成型机一",
+                "成型机二",
+                "成型机三",
+                "成型机四",
+                "成型机五",
+                "成型机六",
+                "成型机五",
+                "成型机六",
+            ],
+
+            valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
+            optionDatalist1: [],
+            optionDatalist2: [],
+            optionDatalist3: [],
+            optionDatalist4: [],
+            colorlist: ["#005aff", "#f8b551"],
+            datetime: null,
+            time1: null,
+            repairlist: [],
+            Inspectiondetails: [],
+            Inspectiondetails1: [],
+            equipmentrepairlist: [],
+            equipmentstabilizelist: [],
+            equipmentinfo: [],
+
+        };
+    },
+    created() { },
+    destroyed() {
+        clearInterval(this.time1);
+        this.time1 = null;
+    },
+    mounted() {
+        // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
+        //console.log('zhuanhuahou',this.dateRangeone) 
+        // this.getdatalist(this.selectxt)
+        this.selectfactoryCodelist();
+        this.gettime();
+    },
+    methods: {
+        back() {
+            this.$router.push({ path: "/index" });
+        },
+        gettime() {
+            this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
+            setInterval(() => {
+                this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
+            }, 1000);
+        },
+        selectfactoryCodelist() {
+            const _this = this;
+            getBoardFactory({
+                factory: null,
+            }).then((response) => {
+                if (response.data) {
+                    _this.getLineList = response.data;
+                    _this.selectxt = _this.getLineList[0].parentName;
+                    _this.getSupplierNoOkList(_this.selectxt)
+                }
+            });
+        },
+        getSupplierNoOkList() {
+            const _this = this;
+            this.Inspectiondetails = []
+            getSupplierNoOkList({
+                ymdType: '统计维度',
+                typeCode: 'material',
+                factoryCode: 'ds_' + _this.selectxt,
+            }).then((response) => {
+                if (response) {
+                    this.Inspectiondetails = response
+                    this.Inspectiondetails.forEach((item) => {
+                        item.incomeTime = moment(item.incomeTime).format('YYYY-MM-DD HH:mm:ss')
+                    });
+                }
+            });
+            getSupplierNoOkList({
+                ymdType: 'dd',
+                typeCode: 'produce',
+                factoryCode: 'ds_' + _this.selectxt,
+            }).then((response) => {
+                if (response) {
+                    this.Inspectiondetails1 = response
+                }
+            });
+        },
+        initChart1() { },
+        selectline() {
+            const _this = this;
+            this.optionDatalist1 = [];
+            this.optionDatalist2 = [];
+            this.optionDatalist3 = [];
+            this.optionDatalist4 = [];
+            _this.getSupplierNoOkList(_this.selectxt)
+        },
+
+        //左侧第一个选择类型下拉框 回调函数
+    },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+    padding: 0px 24px;
+}
+
+.home {
+    width: 100%;
+    height: 100vh;
+    background: url("../../../assets/images/bg-body.png") no-repeat;
+    background-size: 100% 100%;
+    background-color: #050711;
+
+    .head {
+        width: 100%;
+        height: 74px;
+        position: relative;
+
+        .head-content {
+            height: 74px;
+            background-image: url("../../../assets/images/bg-head.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+
+            .title {
+                font-size: 42px;
+                font-weight: 400;
+                color: #ffffff;
+            }
+        }
+
+        .head-logo {
+            position: absolute;
+            left: 0px;
+            top: 1px;
+
+            img {
+                height: 38px;
+                // width: ;
+            }
+        }
+
+        .back {
+            position: absolute;
+            right: 0px;
+            top: 5px;
+        }
+    }
+
+    .content-top {
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+
+        .factoryCode {
+            width: 540px;
+            height: 60px;
+            background: url("../../../assets/images/bg- border1.png") no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            position: absolute;
+            top: -17px;
+            left: 0px;
+        }
+
+        .timebox {
+            width: 480px;
+            height: 60px;
+            background: url("../../../assets/images/bg-border2.png") no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            position: absolute;
+            top: -17px;
+            right: 0px;
+
+            .time {
+                font-size: 30px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 71px;
+            }
+        }
+    }
+
+    .content {
+        margin-top: 63px;
+
+        .itembottom {
+            margin-top: 19px;
+
+            .item-table {
+                width: 1877px;
+                height: 50%;
+                background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
+                background-size: 100% 100%;
+                padding: 27px 21px 30px 25px;
+                box-sizing: border-box;
+                box-sizing: border-box;
+
+                .table-thead {
+                    width: 100%;
+                    height: 44px;
+                    margin: auto;
+                    background: #0A1A33;
+
+                    td {
+                        font-size: 19px;
+                        font-family: NotoSansHans-Medium, NotoSansHans;
+                        font-weight: 500;
+                        color: #159AFF;
+                        text-align: center;
+                        white-space: nowrap;
+                    }
+                }
+
+                .table-tbody {
+                    height: 192px;
+                    // width: 1775px;
+                    margin: auto;
+                    overflow-y: scroll;
+
+                    table {
+                        width: 100%;
+
+                        tbody {
+                            width: 100%;
+
+                            td {
+                                font-size: 19px;
+                                font-family: NotoSansHans-Medium, NotoSansHans;
+                                font-weight: 500;
+                                color: #FFFFFF;
+                                text-align: center;
+                                border-bottom: 1px dashed #6C8097
+                            }
+                        }
+                    }
+                }
+            }
+
+            .item-table1:first-child {
+                margin-right: 10px;
+            }
+
+            .item-table1 {
+                flex: 1;
+                margin-top: 20px;
+                padding-top: 19px;
+
+                // .table-thead {
+                //   width: 565.01px;
+                // }
+
+                .table-tbody {
+                    height: 300px;
+                }
+            }
+        }
+    }
+}
+
+.titlebox {
+    width: 431px;
+    height: 38px;
+    background: url("../../../assets/images/bg-title.png") no-repeat;
+    background-size: 100% 100%;
+    //   text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 38px;
+    letter-spacing: 2px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    padding-left: 60px;
+    //   .titlename{
+    //     position: relative;
+    //     left: 24px;
+    //   }
+}
+
+.titlebox2 {
+    margin: auto;
+    width: 542px;
+    height: 41px;
+    background: url("../../../assets/images/quality/bg-border2title.png") no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 41px;
+    letter-spacing: 2px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    //   .titlename{
+    //     position: relative;
+    //     left: 24px;
+    //   }
+}
+
+.factoryCode {
+    display: flex;
+    // justify-content: space-around;
+}
+
+.selectborder {
+    background-color: transparent;
+    border-radius: 4px;
+    // border: 2px solid #27408c;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 350px;
+    margin-left: 50px;
+}
+
+.selectborder1 {
+    background-color: transparent;
+    border-radius: 4px;
+    // border: 2px solid #27408c;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 88px;
+    margin-left: 25px;
+}
+
+.selectborder select {
+    /*清除select的边框样式*/
+    border: none;
+    /*清除select聚焦时候的边框颜色*/
+    outline: none;
+    background-color: transparent;
+    /*将select的宽高等于div的宽高*/
+    width: 100%;
+    height: 50px;
+    /*隐藏select的下拉图标*/
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    font-size: 25px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 42px;
+}
+
+.selectborder option {
+    /*清除select的边框样式*/
+    border: none;
+    /*清除select聚焦时候的边框颜色*/
+    outline: none;
+    background-color: transparent;
+    /*将select的宽高等于div的宽高*/
+    width: 100%;
+    height: 50px;
+    /*隐藏select的下拉图标*/
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding-left: 20px;
+    font-size: 25px;
+    font-weight: 500;
+    color: #3fa2ff;
+    border-radius: 0%;
+}
+
+.selectborder1 option {
+    /*清除select的边框样式*/
+    border: none;
+    /*清除select聚焦时候的边框颜色*/
+    outline: none;
+    background-color: transparent;
+    /*将select的宽高等于div的宽高*/
+    width: 200px;
+    height: 50px;
+    /*隐藏select的下拉图标*/
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding-left: 20px;
+    font-size: 25px;
+    font-weight: 500;
+    color: #3fa2ff;
+    border-radius: 0%;
+}
+
+.selectborder:after {
+    content: "";
+    width: 24px;
+    height: 24px;
+    background: url(../../../assets/images/xiala.png) no-repeat center;
+    /*通过定位将图标放在合适的位置*/
+    position: absolute;
+    right: 0px;
+    top: 25%;
+    /*给自定义的图标实现点击下来功能*/
+    pointer-events: none;
+}
+
+.selectborder1:after {
+    content: "";
+    width: 24px;
+    height: 24px;
+    background: url(../../../assets/images/xiala.png) no-repeat center;
+    /*通过定位将图标放在合适的位置*/
+    position: absolute;
+    right: 0px;
+    top: 25%;
+    /*给自定义的图标实现点击下来功能*/
+    pointer-events: none;
+}
+
+::v-deep .el-button--primary {
+    color: #ffffff;
+    background-color: #325e82;
+    border-color: #0a0f19;
+}
+
+.active1 {
+    background: url('../../../assets/images/quality/bgtable.png');
+}
+
+.active2 {}
+
+::-webkit-scrollbar {
+    width: 3px;
+    height: 0px;
+    background-color: #0c0642;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    background-color: #07356a;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #0091ff;
+    // opacity: 0.1;
+}
+
+.progress {
+    width: 100px;
+    background-color: rgba(15, 182, 217, 0.3);
+    border-radius: 10px;
+
+    .bar {
+        background: linear-gradient(90deg, rgba(15, 182, 217, 1), rgba(1, 255, 255, 1));
+        border-radius: 10px;
+    }
+}
+
+.color1 {
+    color: #F1D34C;
+}
+
+.color2 {
+    clear: #FF4D4F;
+}
+
+.color3 {
+    color: #66FFFF;
+}
+</style> 
+