Mr.Zhang
2023-08-23 e3447ba528bbcde3c13ca20ec2d83dae993a74f8
screen_standard/src/views/index.vue
@@ -13,9 +13,7 @@
                            <span>{{item.userName}}</span>
                        </div>
                        <div class="content_left_item1_content_row_line">
                            <el-progress
                                :show-text="false"
                                :percentage="item.doneNum / baseNum">
              <el-progress :show-text="false" :percentage="item.doneNum / baseNum * 100">
                            </el-progress>
                        </div>
                        <div class="content_left_item1_content_row_num">{{ item.doneNum }}</div>
@@ -36,7 +34,8 @@
                    </div>
                    <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container">
                        <div ref="scrollContainer" class="scroll_container">
                            <div v-for="(item, index) in data.marginStatistics" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
              <div v-for="(item, index) in data.marginStatistics" :key="index"
                :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.materialName }} / {{ item.procedureName }}</div>
                                <div class="scroll_item_row">{{ item.warehouseName }}</div>
                                <div class="scroll_item_row">{{ item.location }}</div>
@@ -51,7 +50,9 @@
            <!-- 成品计划进度/工序进度 -->
            <div class="content_center_top">
                <div class="content_center_top_list">
                    <div @click="clickCate(index)" :class="item.active ? 'content_center_top_list_item bg4' : 'content_center_top_list_item bg3'" v-for="(item, index) in cate" :key="index">
          <div @click="clickCate(index)"
            :class="item.active ? 'content_center_top_list_item bg4' : 'content_center_top_list_item bg3'"
            v-for="(item, index) in cate" :key="index">
                        {{ item.name }}
                    </div>
                </div>
@@ -66,17 +67,15 @@
                    </div>
                    <div @mouseenter="handleMouseEnter1" @mouseleave="handleMouseLeave1" class="main_container">
                        <div ref="scrollContainer1" class="scroll_container">
                            <div v-for="(item, index) in data.plannedProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
              <div v-for="(item, index) in data.plannedProgress" :key="index"
                :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.code }}</div>
                                <div class="scroll_item_row">{{ item.materialName }}</div>
                                <div class="scroll_item_row">{{ item.materialCode }}</div>
                                <div class="scroll_item_row">{{ item.num }}</div>
                                <div class="scroll_item_row">
                                    <el-tooltip
                                        v-for="(child, i) in item.procedureList" :key="i"
                                        effect="dark"
                                        :content="'已报工良品数' + child.doneNum + ';工序计划数' + child.planNum"
                                        placement="top">
                  <el-tooltip v-for="(child, i) in item.procedureList" :key="i" effect="dark"
                    :content="'已报工良品数' + child.doneNum + ';工序计划数' + child.planNum" placement="top">
                                        <div class="scroll_item_row_item" @click="jump(child.procedureId, child.procedureName)">
                                            <div class="scroll_item_row_item_x"></div>
                                            <!-- <img v-if="i == 0 || i == 1" src="@/assets/img/ic_complete@2x.png" alt="" /> -->
@@ -103,7 +102,8 @@
                    </div>
                    <div @mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2" class="main_container">
                        <div ref="scrollContainer2" class="scroll_container">
                            <div v-for="(item, index) in data.processProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
              <div v-for="(item, index) in data.processProgress" :key="index"
                :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.procedureName }}</div>
                                <div class="scroll_item_row">{{ item.planCount }}</div>
                                <div class="scroll_item_row">{{ item.num }}</div>
@@ -133,7 +133,8 @@
                    </div>
                    <div @mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" class="main_container">
                        <div ref="scrollContainer3" class="scroll_container">
                            <div v-for="(item, index) in data.log" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
              <div v-for="(item, index) in data.log" :key="index"
                :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.userName }}</div>
                                <div class="scroll_item_row">{{ item.materialName }}</div>
                                <div class="scroll_item_row">{{ item.materialCode }}</div>
@@ -176,7 +177,8 @@
                    </div>
                    <div @mouseenter="handleMouseEnter4" @mouseleave="handleMouseLeave4" class="main_container">
                        <div ref="scrollContainer4" class="scroll_container">
                            <div v-for="(item, index) in data.patrolInspection" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
              <div v-for="(item, index) in data.patrolInspection" :key="index"
                :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">{{ item.checkdate }}</div>
                                <div class="scroll_item_row">{{ item.deviceName }}</div>
                                <div class="scroll_item_row">{{ item.status == 0 ? '合格' : '不合格' }}</div>
@@ -284,9 +286,6 @@
        // 成品计划进度
        getWorkPlansList(companyId.value, departId.value)
            .then(res => {
                res.forEach(item => {
                    item.rate = Math.trunc(item.rate)
                })
                data.plannedProgress = res
                nextTick(() => {
                    start1()
@@ -456,15 +455,6 @@
            seriesData.push({name:item.name, value:item.num})
        })
        let option = {
            // title: {
            //   text: '同名数量统计',
            //   subtext: '纯属虚构',
            //   left: 'center'
            // },
            // tooltip: {
            //   trigger: 'item',
            //   formatter: '{a} <br/>{b} : {c} ({d}%)'
            // },
            legend: {
                show: false,
                type: 'scroll',
@@ -478,6 +468,7 @@
                {
                    // name: '姓名',
                    type: 'pie',
                    radius: ['60%', '70%'],
                    // avoidLabelOverlap: false,
                    itemStyle: {
@@ -527,6 +518,14 @@
        }
        option && myChart.setOption(option);
    }
// onBeforeUnmount(()=>{
//     clearTimeout(timer.value)
//     clearTimeout(timer1.value)
//     clearTimeout(timer2.value)
//     clearTimeout(timer3.value)
//     clearTimeout(timer4.value)
// })
    onUnmounted(()=>{
        clearTimeout(timer.value)
        clearTimeout(timer1.value)
@@ -767,10 +766,12 @@
        display: flex;
        align-items: start;
        justify-content: space-between;
        .content_left {
            flex: 1;
            .content_left_item1 {
                width: 100%;
      height: 398px;
                margin-bottom: 20px;
                .content_left_item1_head {
                    background: url('@/assets/img/home_title_short@2x.png');
@@ -781,6 +782,7 @@
                    line-height: 38px;
                    padding-left: 34px;
                    box-sizing: border-box;
                    span {
                        font-size: 16px;
                        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
@@ -790,26 +792,31 @@
                        text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
                    }
                }
                .content_left_item1_content {
                    width: 100%;
                    height: 360px;
                    padding: 20px;
                    box-sizing: border-box;
                    background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
                    .content_left_item1_content_row {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 13px;
                        &:last-child {
                            margin: 0;
                        }
                        .content_left_item1_content_row_name {
                            flex-shrink: 0;
                            width: 100px;
                            display: flex;
                            align-items: center;
                            span {
                                font-size: 13px;
                                font-family: SourceHanSansSC-Regular, SourceHanSansSC;
@@ -817,6 +824,7 @@
                                color: #D2E0FF;
                                margin-left: 9px;
                            }
                            .num {
                                width: 20px;
                                height: 20px;
@@ -827,29 +835,35 @@
                                font-weight: 500;
                                color: #FFFFFF;
                            }
                            .bg1 {
                                background: url('@/assets/img/rank_blue@2x.png');
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                            }
                            .bg2 {
                                background: url('@/assets/img/rank_yellow@2x.png');
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .content_left_item1_content_row_line {
                            flex: 1;
                            margin: 0 15px;
                            &::v-deep(.el-progress-bar__outer) {
                                border-radius: 0%;
                                background: rgba(255,255,255,0.13);
                            }
                            &::v-deep(.el-progress-bar__inner) {
                                border-radius: 0%;
                                background: linear-gradient(270deg, #00B0FF 0%, #345BA3 100%);
                            }
                        }
                        .content_left_item1_content_row_num {
                            font-size: 13px;
                            width: 60px;
@@ -860,8 +874,12 @@
                    }
                }
            }
            .content_left_item2 {
                width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
                .content_left_item2_head {
                    background: url('@/assets/img/home_title_short@2x.png');
                    background-repeat: no-repeat;
@@ -871,6 +889,7 @@
                    line-height: 38px;
                    padding-left: 34px;
                    box-sizing: border-box;
                    span {
                        font-size: 16px;
                        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
@@ -880,18 +899,22 @@
                        text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
                    }
                }
                .content_left_item2_content {
                    width: 100%;
                    height: 361px;
        height: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
                    .item2_content_head {
                        width: 100%;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        background: rgba(52,88,159,0.5);
                        .item2_content_head_item {
                            flex: 1;
                            height: 100%;
@@ -902,29 +925,36 @@
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #01D9FE;
                            &:first-child {
                                flex: 1.5;
                            }
                        }
                    }
                    .main_container {
                        width: 100%;
                        height: calc(100% - 36px);
                        .scroll_container {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            .scroll_item_bg1 {
                                background: rgba(52,88,159,0.2);
                            }
                            .scroll_item_bg2 {
                                background: rgba(52,88,159,0.5);
                            }
                            .scroll_item {
                                width: 100%;
                                height: 36px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {
                                    flex: 1;
                                    width: 0;
@@ -937,6 +967,7 @@
                                    justify-content: center;
                                    color: #FFFFFF;
                                    font-size: 13px;
                                    &:first-child {
                                        flex: 1.5;
                                    }
@@ -947,25 +978,27 @@
                }
            }
        }
        .content_center {
            flex: 2;
            margin: 0 20px;
            display: flex;
            flex-direction: column;
            .content_center_top {
                width: 100%;
                height: 509px;
                margin-bottom: 20px;
                background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
                .content_center_top_list {
                    width: 100%;
                    height: 38px;
                    display: flex;
                    align-items: center;
                    .bg3 {
                        background: url('@/assets/img/tab_select_grey@2x.png');
                        background-size: 100% 100%;
                    }
                    .bg4 {
                        background: url('@/assets/img/tab_select@2x.png');
                        background-size: 100% 100%;
@@ -983,22 +1016,26 @@
                        color: #FFFFFF;
                        margin-right: 20px;
                        text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
                .content_center_top_form {
                    width: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    height: calc(100% - 38px);
                    .content_center_top_form_head {
                        width: 100%;
                        height: 34px;
                        background: rgba(52,88,159,0.5);
                        display: flex;
                        align-items: center;
                        .content_center_top_form_head_item {
                            flex: 1;
                            height: 100%;
@@ -1009,29 +1046,36 @@
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #01D9FE;
                            &:nth-child(5) {
                                flex: 2.7;
                            }
                        }
                    }
                    .main_container {
                        width: 100%;
                        height: calc(100% - 34px);
                        .scroll_container {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            .scroll_item_bg1 {
                                background: rgba(52,88,159,0.2);
                            }
                            .scroll_item_bg2 {
                                background: rgba(52,88,159,0.5);
                            }
                            .scroll_item {
                                width: 100%;
                                height: 58px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {
                                    flex: 1;
                                    height: 100%;
@@ -1043,9 +1087,11 @@
                                    justify-content: center;
                                    color: #FFFFFF;
                                    font-size: 13px;
                                    &:nth-child(5) {
                                        flex: 3;
                                    }
                                    .scroll_item_row_item {
                                        width: 29px;
                                        height: 29px;
@@ -1057,31 +1103,39 @@
                                        border: 2px solid #01D9FE;
                                        cursor: pointer;
                                        position: relative;
                                        &:last-child {
                                            margin-right: 0;
                                            .scroll_item_row_item_x {
                                                display: none;
                                            }
                                        }
                                        &:nth-child(1) {
                                            border: 2px solid #03D2B5;
                                            .scroll_item_row_item_x {
                                                background-color: #03D2B5;
                                            }
                                        }
                                        &:nth-child(2) {
                                            border: 2px solid #03D2B5;
                                        }
                                        img {
                                            width: 17px;
                                            height: 13px;
                                        }
                                        span {
                                            font-size: 12px;
                                            font-family: PingFangSC-Regular, PingFang SC;
                                            font-weight: 400;
                                            color: #01D9FE;
                                        }
                                        .scroll_item_row_item_wz {
                                            white-space: nowrap;
                                            position: absolute;
@@ -1093,6 +1147,7 @@
                                            font-weight: 400;
                                            color: #FFFFFF;
                                        }
                                        .scroll_item_row_item_x {
                                            position: absolute;
                                            right: -85%;
@@ -1108,17 +1163,20 @@
                        }
                    }
                }
                .content_center_top_form1 {
                    width: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    height: calc(100% - 38px);
                    .content_center_top_form_head {
                        width: 100%;
                        height: 34px;
                        background: rgba(52,88,159,0.5);
                        display: flex;
                        align-items: center;
                        .content_center_top_form_head_item {
                            flex: 1;
                            height: 100%;
@@ -1131,24 +1189,30 @@
                            color: #01D9FE;
                        }
                    }
                    .main_container {
                        width: 100%;
                        height: calc(100% - 34px);
                        .scroll_container {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            .scroll_item_bg1 {
                                background: rgba(52,88,159,0.2);
                            }
                            .scroll_item_bg2 {
                                background: rgba(52,88,159,0.5);
                            }
                            .scroll_item {
                                width: 100%;
                                height: 36px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {
                                    flex: 1;
                                    height: 100%;
@@ -1160,6 +1224,7 @@
                                    font-size: 13px;
                                    justify-content: center;
                                    color: #FFFFFF;
                                    .scroll_item_row_item {
                                        width: 29px;
                                        height: 29px;
@@ -1176,9 +1241,11 @@
                    }
                }
            }
            .content_center_bottom {
                width: 100%;
                height: 286px;
                .content_center_bottom_head {
                    width: 100%;
                    height: 38px;
@@ -1190,6 +1257,7 @@
                    background: url('@/assets/img/gongxu_title@2x.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    span {
                        font-size: 16px;
                        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
@@ -1198,18 +1266,21 @@
                        text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
                    }
                }
                .content_center_bottom_b {
                    width: 100%;
                    height: calc(100% - 38px);
                    padding: 20px;
                    box-sizing: border-box;
                    background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
                    .content_center_top_form_head {
                        width: 100%;
                        height: 34px;
                        background: rgba(52,88,159,0.5);
                        display: flex;
                        align-items: center;
                        .content_center_top_form_head_item {
                            flex: 1;
                            height: 100%;
@@ -1220,29 +1291,36 @@
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #01D9FE;
                            &:nth-child(4) {
                                flex: 2;
                            }
                        }
                    }
                    .main_container {
                        width: 100%;
                        height: calc(100% - 33px);
                        .scroll_container {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            .scroll_item_bg1 {
                                background: rgba(52,88,159,0.2);
                            }
                            .scroll_item_bg2 {
                                background: rgba(52,88,159,0.5);
                            }
                            .scroll_item {
                                width: 100%;
                                height: 37px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {
                                    flex: 1;
                                    height: 100%;
@@ -1254,6 +1332,7 @@
                                    align-items: center;
                                    justify-content: center;
                                    color: #FFFFFF;
                                    &:nth-child(4) {
                                        flex: 2;
                                    }
@@ -1264,12 +1343,15 @@
                }
            }
        }
        .content_right {
            flex: 1;
            .content_right_top {
                width: 100%;
                height: 511px;
                margin-bottom: 20px;
                .content_right_top_head {
                    width: 100%;
                    height: 38px;
@@ -1279,6 +1361,7 @@
                    background: url('@/assets/img/home_title_short@2x.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    span {
                        font-size: 16px;
                        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
@@ -1287,11 +1370,13 @@
                        text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
                    }
                }
                .content_right_top_nr {
                    width: 100%;
                    height: calc(100% - 38px);
                    background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
                    position: relative;
                    .content_right_top_nr_bottom_yuan {
                        position: absolute;
                        top: 50%;
@@ -1306,6 +1391,7 @@
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        span {
                            &:first-child {
                                font-size: 26px;
@@ -1313,6 +1399,7 @@
                                font-weight: 500;
                                color: #FFFFFF;
                            }
                            &:last-child {
                                font-size: 13px;
                                font-family: SourceHanSansSC-Regular, SourceHanSansSC;
@@ -1321,21 +1408,25 @@
                            }
                        }
                    }
                    .content_right_top_nr_top {
                        width: 100%;
                        height: 50%;
                        padding: 10px 0 0 10px;
                        box-sizing: border-box;
                    }
                    .content_right_top_nr_bottom {
                        width: 100%;
                        height: 50%;
                    }
                }
            }
            .content_right_bottom {
                width: 100%;
                height: 284px;
                .content_right_bottom_head {
                    width: 100%;
                    height: 38px;
@@ -1345,6 +1436,7 @@
                    background: url('@/assets/img/home_title_short@2x.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    span {
                        font-size: 16px;
                        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
@@ -1353,18 +1445,21 @@
                        text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
                    }
                }
                .content_right_bottom_nr {
                    width: 100%;
                    height: calc(100% - 38px);
                    padding: 20px;
                    box-sizing: border-box;
                    background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
                    .item2_content_head {
                        width: 100%;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        background: rgba(52,88,159,0.5);
                        .item2_content_head_item {
                            flex: 1;
                            height: 100%;
@@ -1375,29 +1470,36 @@
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #01D9FE;
                            &:first-child {
                                flex: 2;
                            }
                        }
                    }
                    .main_container {
                        width: 100%;
                        height: calc(100% - 36px);
                        .scroll_container {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            .scroll_item_bg1 {
                                background: rgba(52,88,159,0.2);
                            }
                            .scroll_item_bg2 {
                                background: rgba(52,88,159,0.5);
                            }
                            .scroll_item {
                                width: 100%;
                                height: 36px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {
                                    flex: 1;
                                    height: 100%;
@@ -1409,6 +1511,7 @@
                                    align-items: center;
                                    justify-content: center;
                                    color: #FFFFFF;
                                    &:first-child {
                                        flex: 2;
                                    }
@@ -1419,6 +1522,5 @@
                }
            }
        }
    }
</style>
}</style>