Default Changelist

Admin

2022-08-23 86687e3e362499b05587ec4d83a6b1133ce0d2b5

 src/views/intellectInspect/inspectIndex/index.vue

@@ -1,9 +1,15 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <div class="homeCard">
            <div class="homeCard topCard">
                <div class="title">
                    当前巡检任务
                </div>
                <div class="top-info" v-if="unchecked!=0||unusual!=0">
                    <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
                    预警消息：
                    <div v-if="unchecked!=0">当日超期未巡检任务<span @click="toOverTime(4)">{{unchecked}}</span>个</div><span v-if="unchecked!=0&&unusual!=0">，</span>
                    <div v-if="unusual!=0">存在异常任务<span @click="toUnusual(1)">{{unusual}}</span>个</div>。
                </div>
            </div>
            <div class="homeCard">
@@ -47,9 +53,14 @@
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
import { useRouter } from 'vue-router';
import inspectRecordDialog from './components/inspectRecordDialog.vue';
import {departmentApi} from "/@/api/systemManage/department";
// 定义接口来定义对象的类型
interface stateType {
    tableData: Array<string>;
    unchecked: null | number,
    unusual: null | number,
    uncheckedList: [],
    abnormalList: [],
    pageIndex: number;
    pageSize: number;
    totalSize: number;
@@ -78,6 +89,10 @@
            pageSize: 10,
            totalSize: 0,
            tableData: [],
            unchecked: null,
            unusual: null,
            uncheckedList: [],
            abnormalList: [],
            workTypeList: [
                { id: 1, name: '日常任务' },
                { id: 2, name: '周期任务' }
@@ -105,6 +120,8 @@
        // 页面载入时执行方法
        onMounted(() => {
            getInspectRecord();
            getDayData();
            getDepartmentData()
        });

        // 分页获取工作时段列表
@@ -112,9 +129,37 @@
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
            let res = await inspectRecordApi().getInspectRecordByIndex(data);
            if (res.data.code === '200'){
                console.log(res.data.data)
                state.tableData = res.data.data.records
                state.totalSize = res.data.data.total
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        //获取部门
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取当日数据
        const getDayData = async () => {
            let res = await inspectRecordApi().getDayRecord();
            if (res.data.code === '200') {
                state.unchecked = res.data.data.noCheckTaskCount
                state.unusual = res.data.data.abnormalTaskCount
                state.uncheckedList = res.data.data.noCheckTasks
                console.log(state.uncheckedList,'555555555555555')
                state.abnormalList = JSON.parse(JSON.stringify(res.data.data.abnormalTasks))
            } else {
                ElMessage({
                    type: 'warning',
@@ -134,7 +179,6 @@

        const toLine = (item) =>{
            let id = JSON.parse(JSON.stringify(item)).id
            console.log(id,'id')
            router.push({
                path: 'intelligentLine',
                query: {
@@ -142,6 +186,29 @@
                }
            });
        }

        const toOverTime = (id) =>{
            console.log(state.uncheckedList,'list')
            router.push({
                path: 'inspectRecord',
                query: {
                    id: id,
                    dataList: state.uncheckedList,
                    total: state.uncheckedList.length
                }
            });
        }

        // const toUnusual = (status) =>{
        //     router.push({
        //         path: 'inspectRecord',
        //         query: {
        //             status: status,
        //             dataList: state.abnormalList,
        //             total: state.abnormalList.length
        //         }
        //     });
        // }
        const toDetails = (type: string, item) => {
            inspectRecordDialogRef.value.showInspectRecordDialog(type, item, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList);
        }
@@ -154,6 +221,7 @@
            router,
            inspectRecordDialogRef,
            toLine,
            toOverTime,
            toDetails,
            handleSizeChange,
            handleCurrentChange,
@@ -165,8 +233,151 @@

<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {
    .topCard{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info{
            display: flex;
            font-size: 16px;
            align-items: center;
            padding: 10px 15px;
            background: #FFD057;
            border-radius: 8px;
            border: 1px solid #F3001E;

            &>div{
                vertical-align: middle;
                white-space: nowrap;
                span{
                    font-size: 22px;
                    color: #F3001E;
                    margin: 0 4px;
                    cursor: pointer;
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 18px;
        color: #333;
        overflow-x: auto;
        &>span{
            white-space: nowrap;
        }
        p{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &>span{
                white-space: nowrap;
            }
        }
    }
    .mid-info {
        width: 20%;
        font-size: 18px;
        color: #333;
    }
    .right-info {
        width: 10%;
        display: flex;
        justify-content: right;
        align-items: center;
        font-size: 16px;
        color: #fff;

        div{
            white-space: nowrap;
        }
    }
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 15px;
        color: #333;
        overflow-x: auto;
        &>span{
            white-space: nowrap;
        }
        p{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &>span{
                white-space: nowrap;
            }
        }
    }
    .mid-info {
        width: 20%;
        font-size: 15px;
        color: #333;
    }
    .right-info {
        width: 10%;
        display: flex;
        justify-content: right;
        align-items: center;
        font-size: 13px;
        color: #fff;
        div{
            white-space: nowrap;
        }
    }
}
@media screen and (max-width: 1200px) {
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 12px;
        color: #333;
        overflow-x: auto;
        &>span{
            white-space: nowrap;
        }
        p{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &>span{
                white-space: nowrap;
            }
        }
    }
    .mid-info {
        width: 20%;
        font-size: 12px;
        color: #333;
    }
    .right-info {
        width: 10%;
        display: flex;
        justify-content: right;
        align-items: center;
        font-size: 12px;
        color: #fff;
        div{
            white-space: nowrap;
        }
    }
}

.home-container {
    height: calc(100vh - 114px);
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
@@ -189,23 +400,15 @@
                justify-content: space-between;
                margin-bottom: 10px;
                background: #daf3ff;
                padding: 20px;
                padding: 10px 15px;
                border-radius: 8px;

                .left-info{
                    width: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: left;
                    font-size: 14px;
                    color: #333;
                    overflow-x: auto;

                    .num{
                        font-weight: bolder;
                        margin-right: 10px;
                    }

                    .place{
                        font-weight: bolder;
                    }
@@ -220,9 +423,6 @@
                    }
                }
                .mid-info{
                    width: 35%;
                    font-size: 14px;
                    color: #333;

                    span{
                        font-weight: bolder;
@@ -242,12 +442,7 @@
                    }
                }
                .right-info{
                    width: 15%;
                    display: flex;
                    justify-content: right;
                    align-items: center;
                    font-size: 14px;
                    color: #fff;


                    .checkBtn{
                        padding: 10px 15px;
@@ -301,18 +496,6 @@
            align-items: center;
            min-height: 36px;
        }

        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}
.el-input {
@@ -324,4 +507,14 @@
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
</style>