lct

Your Name

2022-08-23 216d03fa53a38ffc6afe45756d2ae73b21bf00b5

 src/views/intellectInspect/inspectIndex/index.vue

@@ -2,32 +2,42 @@
    <div class="home-container">
        <div style="height: 100%">
            <div class="homeCard topCard">
                <div class="title">
                    当前巡检任务
                </div>
                <div class="top-info" v-if="unchecked!=0||unusual!=0">
                <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 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">
                <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>
@@ -53,14 +63,14 @@
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
import { useRouter } from 'vue-router';
import inspectRecordDialog from './components/inspectRecordDialog.vue';
import {departmentApi} from "/@/api/systemManage/department";
import { departmentApi } from '/@/api/systemManage/department';
// 定义接口来定义对象的类型
interface stateType {
    tableData: Array<string>;
    unchecked: null | number,
    unusual: null | number,
    uncheckedList: [],
    abnormalList: [],
    unchecked: null | number;
    unusual: null | number;
    uncheckedList: [];
    abnormalList: [];
    pageIndex: number;
    pageSize: number;
    totalSize: number;
@@ -121,16 +131,16 @@
        onMounted(() => {
            getInspectRecord();
            getDayData();
            getDepartmentData()
            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'){
                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',
@@ -155,11 +165,11 @@
        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))
                state.unchecked = res.data.data.noCheckTaskCount;
                state.unusual = res.data.data.abnormalTaskCount;
                state.uncheckedList = JSON.parse(JSON.stringify(res.data.data.noCheckTasks));
                console.log(state.uncheckedList, '555555555555555');
                state.abnormalList = JSON.parse(JSON.stringify(res.data.data.abnormalTasks));
            } else {
                ElMessage({
                    type: 'warning',
@@ -177,27 +187,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')
        const toOverTime = (id) => {
            console.log(state.uncheckedList, 'list');
            debugger;
            router.push({
                path: 'inspectRecord',
                query: {
                    id: id,
                    dataList: state.uncheckedList,
                    dataList: JSON.stringify(state.uncheckedList),
                    total: state.uncheckedList.length
                }
            });
        }
        };

        // const toUnusual = (status) =>{
        //     router.push({
@@ -211,7 +222,7 @@
        // }
        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,
@@ -234,27 +245,27 @@
<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {
    .topCard{
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

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

            &>div{
            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span{
                span {
                    font-size: 22px;
                    color: #F3001E;
                    color: #f3001e;
                    margin: 0 4px;
                    cursor: pointer;
                }
@@ -269,14 +280,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;
            }
        }
@@ -294,7 +305,7 @@
        font-size: 16px;
        color: #fff;

        div{
        div {
            white-space: nowrap;
        }
    }
@@ -308,14 +319,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;
            }
        }
@@ -332,7 +343,7 @@
        align-items: center;
        font-size: 13px;
        color: #fff;
        div{
        div {
            white-space: nowrap;
        }
    }
@@ -346,14 +357,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;
            }
        }
@@ -370,7 +381,7 @@
        align-items: center;
        font-size: 12px;
        color: #fff;
        div{
        div {
            white-space: nowrap;
        }
    }
@@ -387,7 +398,7 @@
        background: #fff;
        border-radius: 4px;

        .title{
        .title {
            font-size: 20px;
            font-weight: bolder;
        }
@@ -403,62 +414,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;
            }