scd_tools_ui/src/pages/mission/components/StartMission.vue

<template>
    <div>
        <div class="bigBox">
            <!-- 检测任务信息 -->
            <div class="missionBox">
                <p class="nowMis">{{ loadingMis.name }}</p>
                <p class="dateMis">创建日期:{{ loadingMis.ct }}</p>
                <img src="../../../assets/image/start_mission.png" style="width: 200px;height: 200px;" alt="">
                <p class="loading1" v-if="end">请耐心等待检测完成</p>
                <p style="color: greenyellow;font-size: 16px;display: flex;justify-content: center;align-items: center;"
                    v-else>
                <p style="display: block;">检测已完成</p>
                <el-icon style="color: greenyellow;display: block;">
                    <SuccessFilled />
                </el-icon>
                </p>
                <el-button type="primary" @click="misDown" v-if="end">取消</el-button>
                <el-button type="primary" @click="backDown" v-else>返回</el-button>
            </div>
            <!-- 步骤和结果 -->
            <div class="stepAndEnd">
                <!-- 步骤条 -->
                <div class="stepBox">
                    <StepMethod :stepList="stepList"></StepMethod>
                </div>
                <!-- 结果 -->
                <div class="endBox">
                    <div style="display: flex;justify-content: flex-start;align-items: center;">
                        <img style="display: block;" src="../../../assets/icon/file_blue.png" alt="">
                        <span style="display: block;font-size: 14px;font-size: 16px;font-weight: 400;">检测结果</span>
                    </div>
                    <el-table :data="endList" stripe style="width: 100%;height: calc(100vh - 600px);" v-loading="loading">
                        <el-table-column prop="ied_name" label="装置名称" width="150" />
                        <el-table-column prop="ied_desc" label="装置描述" width="150" :show-overflow-tooltip="true" />
                        <el-table-column label="等级" width="130">
                            <template #default="scope">
                                <span :style="{ 'color': scope.row.alert_level == 'error' ? 'red' : 'yellow' }">{{
                                    levelChoose(scope.row.alert_level) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="line_no" label="行号" width="130">
                            <template #default="scope">
                                <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;"
                                    @click="lineno(scope.row)">{{
                                        scope.row.line_no }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="parse_result" label="描述" width="auto" :show-overflow-tooltip="true" />
                        <el-table-column width="220" label="标准及条款" :show-overflow-tooltip="true">
                            <template #default="scope">
                                <p>{{ scope.row.apply_standard }}</p>
                                <p>{{ scope.row.apply_standard_no }}</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div>
            <LookLine v-if="lineSearch" :lineSearch="lineSearch" :scdIds="scdIds" :lineNum="lineNum" :lineMsg="lineMsg"
                @lineClose="lineClose">
            </LookLine>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue';
import StepMethod from './StepMethod.vue';
import task from '@/api/task';
import slc from '@/api/slc/slc';
import { ElMessage } from 'element-plus';
import LookLine from '../modalComp/LookLine.vue';
export default {
    props: {
        startMis: {
            type: Object,
            required: true
        }
    },
    setup(props, { emit }) {
        let arrow = ref(0)
        let loadingMis = ref({})
        let stepList = ref([])
        let endList = ref([])//结果表格
        let scdIds = ref("")//当前组件scdid
        let lineNum = ref(0)
        let lineSearch = ref(false)
        let end = ref(true)
        let lineMsg = ref("")
        let loading = ref(false)
        watch(() => props.startMis, (newVal) => {
            loadingMis.value = newVal
            scdIds.value = newVal.scd_id
        })
        function misDown() {
            task.stopTask({ id: loadingMis.value.id }).then(res => {
                if (res.code == 0) {
                    ElMessage({
                        message: "取消成功",
                        type: "success"
                    })
                }
            })
            emit("smBack", arrow.value)
        }
        function picReload() {
            loadingMis.value = props.startMis
            scdIds.value = loadingMis.value.scd_id
            loading.value = true
            task.tackStart({ id: loadingMis.value.id }).then(res => {
                let countTime = setInterval(() => {
                    task.lookStep({ id: loadingMis.value.id - 0 }).then(res => {
                        if (res.data) {
                            stepList.value = res.data
                        } else {
                            ElMessage({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    })
                }, 1000)
                setTimeout(() => {
                    clearInterval(countTime)
                    end.value = false
                }, 40000)
            })
            setTimeout(() => {
                slc.getScdByIdFromMission({
                    scd_id: loadingMis.value.scd_id - 0,
                    pageno: 1,
                    pagesize: 20,
                }).then(res => {
                    if (res.data) {
                        endList.value = res.data
                        loading.value = false
                    }else{
                        endList.value = []
                        loading.value = false
                    }
                })
            }, 30000)
        }
        function backDown() {
            emit("smBack", arrow.value)
        }
        function levelChoose(bit) {
            if (bit == "error") {
                return '错误'
            } else if (bit == 'warning') {
                return '告警'
            }
        }
        function lineno(row) {
            lineNum.value = row.line_no
            lineMsg.value = row.parse_result
            lineSearch.value = true
        }
        function lineClose(data) {
            lineSearch.value = data
        }
        onMounted(() => {
            picReload()
        })
        return {
            arrow,
            misDown,
            loadingMis,//传递过来的任务名称
            picReload,//初始化组件
            stepList,//步骤表
            endList,//结果表格
            levelChoose,//等级筛选
            end,
            backDown,
            lineno,
            scdIds,
            lineNum,
            lineSearch,
            lineMsg,
            lineClose,
            loading,
        }
    },
    components: {
        StepMethod,
        LookLine
    }
}
</script>

<style  scoped>
p {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 98%;
    height: calc(100vh - 150px);
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.missionBox {
    width: 30%;
    height: 100%;
    /* border: 1px solid purple; */
    text-align: center;
    line-height: 30px;
}

.stepAndEnd {
    width: 68%;
    height: 100%;
    /* border: 1px solid brown; */
}

.stepBox {
    width: 100%;
    height: calc(100vh - 530px);
    /* border: 1px solid red; */
    overflow-y: auto;
    background-color: #F7F8FB;
}

.endBox {
    width: 100%;
    height: calc(100vh - 600px);
    /* border: 1px solid green; */
    margin-top: 20px;
    background-color: #F7F8FB;
}

.nowMis {
    font-size: 20px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #1A2447;
}

.dateMis {
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #7484AB;
}

.loading1 {
    font-size: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #255CE7;
}
</style>