scd_tools_ui/src/pages/report/components/ReportDetails.vue

<template>
    <div class="bigBoxs">
        <div class="topBox">
            <div class="cilBox">
                <p style="font-size: 18px;font-weight: 400;">{{ stationNames }}-{{ relathing }}</p>
            </div>
            <div class="createReport">
                <img v-if="btnType" src="../../../assets/image/board_file.png" alt="">
                <img v-else src="../../../assets/image/allright.png" alt="">
                <p style="font-size: 14px;font-weight: 400;">{{ btnType ? '还未生成报告' : "报告已生成" }}</p>
                <el-button :type="btnType ? 'primary' : 'info'" plain @click="nowGet" :disabled="!btnType">立即生成</el-button>
                <el-button :type="btnType ? 'info' : 'primary'" plain :disabled="btnType" @click="downReport">下载报告</el-button>
            </div>
        </div>
        <div class="bottomBox" v-loading="loading">
            <div class="miniBox">
                <img style="width: 20px;height: 20px;display: block;margin-top: 10px;margin-left: 10px;"
                    src="../../../assets/icon/file_blue.png" alt="">
                <span style="
                font-size: 16px;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 500;
                color: #1A2447;
                display: flex;
                margin-top: 10px;
                /* margin-left: 10px; */
                ">检测结果</span>
            </div>
            <div class="messageBox">
                <!-- 树形结构盒子 -->
                <!-- <div class="treeBox">

                </div> -->
                <!-- 大表格盒子 -->
                <div class="tableBox">
                    <!-- 头部按钮和统计数据盒子 -->
                    <div class="btnBox">
                        <!-- 按钮盒子 -->
                        <div class="btn">
                            <el-button style="font-size: 16px;margin-left: 10px;" type="primary" plain @click="excelPort">
                                <svg t="1705980404021" class="iconSvg" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="7825" width="48" height="48">
                                    <path
                                        d="M486.4 367.616l-89.344 86.016a25.6 25.6 0 1 1-35.584-36.864l131.84-128A25.6 25.6 0 0 1 512 281.6h2.816a25.6 25.6 0 0 1 16.128 7.68l123.392 128a25.6 25.6 0 1 1-36.864 35.584L537.6 370.688V614.4a25.6 25.6 0 0 1-51.2 0zM972.8 230.4v691.2a102.4 102.4 0 0 1-102.4 102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4h593.92z m-230.4-162.56V204.8a25.6 25.6 0 0 0 25.6 25.6h133.12zM921.6 281.6h-153.6a76.8 76.8 0 0 1-76.8-76.8V51.2H153.6a51.2 51.2 0 0 0-51.2 51.2v819.2a51.2 51.2 0 0 0 51.2 51.2h716.8a51.2 51.2 0 0 0 51.2-51.2zM358.4 768a25.6 25.6 0 0 1 0-51.2h307.2a25.6 25.6 0 0 1 0 51.2z"
                                        fill="#255be7" p-id="7826"></path>
                                </svg>
                                导出所有结果
                            </el-button>
                        </div>
                        <!-- 统计数据盒子 -->
                        <div class="count">
                            <span style="margin-right: 5px;font-size: 16px;font-weight: 400;">全部:
                                <em>{{ Number(warnCount) + Number(dangerCount) + Number(infoCount) }}</em></span>
                            <span style="margin-right: 5px;font-size: 16px;font-weight: 400;">错误:
                                <em style="color: red;">{{ dangerCount }}</em></span>
                            <span style="margin-right: 5px;font-size: 16px;font-weight: 400;">告警:
                                <em style="color: orange;">{{ warnCount }}</em></span>
                            <span style="font-size: 16px;font-weight: 400;">提示:
                                <em style="color: blue;">{{ infoCount }}</em></span>
                        </div>
                    </div>
                    <div class="realBox" style="position: relative;">
                        <el-table :data="tableData" stripe
                            style="width: 100%;height: calc(100vh - 420px);margin-top: 10px;">
                            <el-table-column prop="ied_name" label="装置名称" width="120" />
                            <el-table-column prop="ied_desc" label="装置描述" width="240" />
                            <el-table-column prop="alert_level" label="等级" width="100">
                                <template #default="scope">
                                    <el-tag class="ml-2" :type="typeLevel(scope.row.alert_level)">{{
                                        canLevel(scope.row.alert_level) }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="line_no" label="行号" width="100">
                                <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"  />
                            <el-table-column label="标准及条款" width="400" show-overflow-tooltip>
                                <template #default="scope">
                                    <p>{{ scope.row.apply_standard }}</p>
                                    <p>{{ scope.row.apply_standard_no }}</p>
                                </template>
                            </el-table-column>
                        </el-table>
                        <Pagination style="position: absolute;right: 10px;" :totals="totals" @pageBack="pageBack">
                        </Pagination>
                    </div>
                </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, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import report from "@/api/report"
import slc from "@/api/slc/slc"
import systemRow from "@/api/systemRow"
import Pagination from "./Pagination.vue"
import { ElMessage } from "element-plus"
import system from "@/api/system"
import LooKLine from "../modal/LookLine.vue"
import { scdExpTableData } from "@/api/scdCheck/scdCheck2";
export default {
    setup() {
        let route = useRoute()
        let router = useRouter()
        let reportId = ref('')//报告id
        let scdIds = ref("")//scdid
        let tableData = ref([])//表格数据
        let warnCount = ref(0)//告警总数
        let dangerCount = ref(0)//错误总数
        let infoCount = ref(0)//提示总数
        let stationNames = ref("")//变电站名称
        let relathing = ref('')//检测名称
        let loading = ref(false)
        let reportUrl = ref('')
        let btnType = ref(true)//生成报告按钮和下载报告按钮状态
        let fileId = ref("")//需要下载的报告id'
        let totals = ref(0)
        let lineSearch = ref(false)
        let lineMsg = ref('')//行描述
        let lineNum = ref(0)//行号
        // 初始化组件
        function reload() {
            scdIds.value = route.query.scdId
            stationNames.value = route.query.stationName
            relathing.value = route.query.names
            reportId.value = route.query.reportId
            // report.genderReport({ task_id: route.query.reportId - 0 }).then(res => {
            //     console.log(res, 'ressss');
            // })
            loading.value = true
            slc.getScdByIdFromMission({
                scd_id: route.query.scdId - 0,
                pageno: 1,
                pagesize: 20,
            }).then(res => {//获取总数量
                if (res.data != null) {
                    console.log(res.data);
                    tableData.value = res.data
                    totals.value = res.count
                    loading.value = false
                } else {
                    loading.value = false
                }
            })
            slc.getErrorByLevel({
                scd_id: route.query.scdId - 0
            }).then(res => {//获取各个等级总数
                if (res.data != null) {
                    res.data.map(item => {
                        if (item.alert_level == 'waring') {
                            warnCount.value = item.cnt
                        } else if (item.alert_level == 'error') {
                            dangerCount.value = item.cnt
                        } else if (item.alert_level == 'info') {
                            infoCount.value = item.cnt
                        }
                    })
                }
            })
            report.allReport({
                pageno: 1,
                pagesize: 20,
                name: relathing.value
            }).then(res => {
                console.log(res, 'oisaghuih');
                if(res.code==0 && res.data.length>0){
                    btnType.value = false //报告已生成
                    reportUrl.value = res.data[0].doc
                }
            })
        }
        // 筛选等级
        function canLevel(level) {
            if (level == 'waring') {
                return `告警`
            } else if (level == 'error') {
                return `错误`
            } else if (level == 'info') {
                return `提示`
            }
        }
        // 筛选tag标签状态
        function typeLevel(level) {
            if (level == 'waring') {
                return `warning`
            } else if (level == 'error') {
                return `danger`
            } else if (level == 'info') {
                return `info`
            }
        }
        // 生成报告
        function nowGet() {
            report.genderReport({
                task_id: reportId.value - 0
            }).then(res => {
                if (res.data != null) {
                    fileId.value = res.data.TaskId
                    btnType.value = false
                    reportUrl.value = res.data.doc
                    ElMessage({
                        message: "生成报告成功",
                        type: "success"
                    })
                }
            })
        }
        // 下载报告
        function downReport() {
            location.href = window.ApiServer + "/" + reportUrl.value.toString();
            /*
            system.downLoad({
                path: reportUrl.value,
                save_name:''
            })
            */
        }
        // 导出结果至excel
        function excelPort() {
            // const nodeName = clickTreeData.value ? clickTreeData.value.datatype : "";
            // const nodeId = clickTreeData.value ? clickTreeData.value.id : "";
            systemRow.portExcel({
                code: "scl-check-result",
                caption: "检测报告",
                expcols: "ied_name,ied_desc,alert_level,line_no,parse_result,apply_standard,apply_standard_no",
                expcolnames: "装置名称,装置描述,等级,行号,描述,应用标准,标准条款",
                scd_id: route.query.scdId - 0,
                node_name: "",
                node_id: "",
            }).then(res => {
                if (res.data) {
                   location.href = window.ApiServer + "/" + res.data;
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "info",
                    });
                }
            })
        }
        //查看行位置
        function lineno(row) {
            lineMsg.value = row.parse_result
            lineNum.value = row.line_no
            lineSearch.value = true
        }
        // 分页组件返回
        function pageBack(size, index) {
            loading.value = true
            slc.getScdByIdFromMission({
                scd_id: route.query.scdId - 0,
                pageno: index,
                pagesize: size,
            }).then(res => {//获取总数量
                if (res.data != null) {
                    console.log(res.data);
                    tableData.value = res.data
                    totals.value = res.count
                    loading.value = false
                } else {
                    loading.value = false
                }
            })
        }
        function lineClose(data) {
            lineSearch.value = data
        }
        onMounted(() => {
            reload()
        })
        return {
            reload,//初始化组件
            reportId,//报告id
            tableData,//表格数据
            scdIds,//scdid
            canLevel,//筛选等级
            typeLevel,//筛选tag标签状态
            warnCount,//告警总数
            dangerCount,//错误总数
            infoCount,//提示总数
            loading,//
            stationNames,
            relathing,
            totals,//总条数
            pageBack,
            nowGet,//生成报告按钮
            btnType,//按钮状态
            reportUrl,
            fileId,//下载的报告id
            downReport,//下载报告
            excelPort,
            lineSearch,//查看行号
            lineno,//查看行位置
            lineNum,//行号
            lineClose,//lookline.vue返回模态框状态
            lineMsg,
        }
    },
    components: {
        Pagination,
        LooKLine,
    }
}
</script>

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

em {
    list-style: none;
    font-style: normal;
}

.bigBoxs {
    width: 98%;
    height: calc(100vh - 90px);
    margin: 0 auto;
}

.createReport {
    width: 100%;
    height: calc(100vh - 780px);
    text-align: center;
    line-height: 30px;
    padding-top: 10px;
    background: #F7F8FB;
}

.bottomBox {
    width: 100%;
    height: calc(100vh - 320px);
    background-color: #F7F8FB;
    margin-top: 20px;
}

.miniBox {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.messageBox {
    width: 100%;
    height: calc(100vh - 380px);
    /* border: 1px solid saddlebrown; */
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.treeBox {
    width: 20%;
    height: calc(100vh - 380px);
    border: 1px solid #A3ADE0;
}

.tableBox {
    width: 100%;
    height: calc(100vh - 380px);
}

.btnBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn {
    width: 30%;
}

.count {
    width: 20%;
    text-align: center;
}

.iconSvg {
    width: 20px;
    height: 20px;
}
</style>