Admin
2022-09-21 999cab6fb3fc6d2a288d365da991351c5a396bf0
src/views/intellectInspect/inspectIndex/index.vue
@@ -1,27 +1,52 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <div class="homeCard">
                <div class="title">
                    当前巡检任务
            <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">
                        当日超期未巡检任务<el-tooltip
                            class="box-item"
                            effect="light"
                            content="查看相关记录"
                            placement="bottom-start"
                    ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
                    </div>
                    <span v-if="unchecked != 0 && unusual != 0">,</span>
                    <div v-if="unusual != 0">
                        存在异常任务<el-tooltip
                            class="box-item"
                            effect="light"
                            content="查看相关记录"
                            placement="bottom-start"
                    ><span @click="toOverTime(5)">{{ unusual }}</span
                        ></el-tooltip>个
                    </div>
                    。
                </div>
            </div>
            <div class="homeCard">
                <div class="main-card">
                    <div class="list">
                        <div class="cardTop" v-for="(item,index) in tableData" :key="index">
                        <div class="cardTop" v-for="(item, index) in tableData" :key="index">
                            <div class="left-info">
                                <span class="num">{{pageSize * (pageIndex-1) + index + 1}}、</span>
                                <span class="place">{{item.taskName}},</span>
                                <p v-if="item.execUserName==null">该任务暂无人认领</p>
                                <p v-else><span class="time">{{item.taskStatus == 2?item.startTime:item.endTime}}</span>由<span class="name">{{item.execUserName}}</span>进行的巡检任务</p>
                                <span class="num">{{ pageSize * (pageIndex - 1) + index + 1 }}、</span>
                                <span class="place">{{ item.taskName }},</span>
                                <p v-if="item.execUserName == null">该任务暂无人认领</p>
                                <p v-else>
                                    <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span
                                    >由<span class="name">{{ item.execUserName }}</span
                                    >进行的巡检任务
                                </p>
                            </div>
                            <div class="mid-info">
                                任务状态:<span :class="item.taskStatus == 1?'grey':(item.taskStatus == 2?'green':(item.taskStatus == 3?'blue':'red'))">{{item.taskStatus == 1?'待巡检':(item.taskStatus == 2?'巡检中':(item.taskStatus == 3?'已巡检':'超期未巡检'))}}</span>
                                任务状态:<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
                            </div>
                            <div class="right-info">
                                <div v-if="item.taskStatus == 2" @click="toLine(item)" class="checkBtn">查看实时巡检</div>
                                <div v-else class="reviewBtn" @click="toDetails('查看',item)">[查看巡检记录]</div>
                                <div v-else class="reviewBtn" @click="toDetails('查看', item)">[查看巡检记录]</div>
                            </div>
                        </div>
                    </div>
@@ -47,9 +72,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 +108,10 @@
            pageSize: 10,
            totalSize: 0,
            tableData: [],
            unchecked: null,
            unusual: null,
            uncheckedList: [],
            abnormalList: [],
            workTypeList: [
                { id: 1, name: '日常任务' },
                { id: 2, name: '周期任务' }
@@ -105,16 +139,43 @@
        // 页面载入时执行方法
        onMounted(() => {
            getInspectRecord();
            getDayData();
            getDepartmentData();
        });
        // 分页获取工作时段列表
        const getInspectRecord = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
            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
            if (res.data.code === '200') {
                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;
            } else {
                ElMessage({
                    type: 'warning',
@@ -132,18 +193,28 @@
            getInspectRecord();
        };
        const toLine = (item) =>{
            let id = JSON.parse(JSON.stringify(item)).id
        const toLine = (item) => {
            let id = JSON.parse(JSON.stringify(item)).id;
            router.push({
                path: 'intelligentLine',
                query: {
                    id: id
                }
            });
        }
        };
        const toOverTime = (id) => {
            console.log(state.uncheckedList, 'list');
            router.push({
                path: 'inspectRecord',
                query: {
                    id: id,
                }
            });
        };
        const toDetails = (type: string, item) => {
            inspectRecordDialogRef.value.showInspectRecordDialog(type, item, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList);
        }
        };
        return {
            View,
            Edit,
@@ -153,6 +224,7 @@
            router,
            inspectRecordDialogRef,
            toLine,
            toOverTime,
            toDetails,
            handleSizeChange,
            handleCurrentChange,
@@ -165,6 +237,37 @@
<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: #ffeb87;
            border-radius: 8px;
            border: 1px solid #ffae00;
            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 22px;
                    color: #f3001e;
                    margin: 0 4px;
                    cursor: pointer;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
@@ -173,14 +276,14 @@
        font-size: 18px;
        color: #333;
        overflow-x: auto;
        &>span{
        & > span {
            white-space: nowrap;
        }
        p{
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &>span{
            & > span {
                white-space: nowrap;
            }
        }
@@ -198,12 +301,43 @@
        font-size: 16px;
        color: #fff;
        div{
        div {
            white-space: nowrap;
        }
    }
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;
        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 6px 10px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;
            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 18px;
                    color: #f3001e;
                    margin: 0 2px;
                    cursor: pointer;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
@@ -212,14 +346,14 @@
        font-size: 15px;
        color: #333;
        overflow-x: auto;
        &>span{
        & > span {
            white-space: nowrap;
        }
        p{
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &>span{
            & > span {
                white-space: nowrap;
            }
        }
@@ -236,12 +370,43 @@
        align-items: center;
        font-size: 13px;
        color: #fff;
        div{
        div {
            white-space: nowrap;
        }
    }
}
@media screen and (max-width: 1200px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;
        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 2px 6px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;
            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 16px;
                    color: #f3001e;
                    margin: 0 1px;
                    cursor: pointer;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
@@ -250,14 +415,14 @@
        font-size: 12px;
        color: #333;
        overflow-x: auto;
        &>span{
        & > span {
            white-space: nowrap;
        }
        p{
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &>span{
            & > span {
                white-space: nowrap;
            }
        }
@@ -274,7 +439,7 @@
        align-items: center;
        font-size: 12px;
        color: #fff;
        div{
        div {
            white-space: nowrap;
        }
    }
@@ -291,7 +456,7 @@
        background: #fff;
        border-radius: 4px;
        .title{
        .title {
            font-size: 20px;
            font-weight: bolder;
        }
@@ -307,62 +472,58 @@
                padding: 10px 15px;
                border-radius: 8px;
                .left-info{
                    .num{
                .left-info {
                    .num {
                        font-weight: bolder;
                        margin-right: 10px;
                    }
                    .place{
                    .place {
                        font-weight: bolder;
                    }
                    .time{
                    .time {
                        font-weight: bolder;
                        margin-right: 5px;
                    }
                    .name{
                    .name {
                        font-weight: bolder;
                        margin: 0 5px;
                        font-weight: bolder;
                    }
                }
                .mid-info{
                    span{
                .mid-info {
                    span {
                        font-weight: bolder;
                    }
                    .grey{
                    .grey {
                        color: #999;
                    }
                    .green{
                    .green {
                        color: #44b100;
                    }
                    .blue{
                    .blue {
                        color: #409eff;
                    }
                    .red{
                    .red {
                        color: red;
                    }
                }
                .right-info{
                    .checkBtn{
                .right-info {
                    .checkBtn {
                        padding: 10px 15px;
                        background: #409eff;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                    .reviewBtn{
                    .reviewBtn {
                        margin: 10px 15px;
                        cursor: pointer;
                        color: #44b100;
                    }
                }
            }
            .list{
            .list {
                height: calc(100% - 60px);
                overflow-y: auto;
            }
@@ -400,18 +561,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 {
@@ -423,4 +572,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>