Web/admin.ui.plus-master/src/views/admin/statement/partInformation/index.vue

<template>
    <div class="container">
        <el-col class="main" :span="4">
            <el-row justify="space-between">
                <text>1、{{ parameter.status }}</text>
                <text>2、{{ parameter.NozzleNo }}</text>
            </el-row>
            <el-row>
                <text>油品：{{ parameter.fuelName }}</text>
                <text>自锁功能: {{ parameter.alarming }}</text>
                <text>ECQS编码: {{ parameter.code }}</text>
            </el-row>
        </el-col>
        <el-col class="top" :span="5">
            <el-row>
                <text class="title">安全装置</text>
            </el-row>
            <el-row>
                <text>二维码：{{ Data.partDetails.blackBox.qrCode }}</text>
            </el-row>
            <el-row>
                <text>版本：{{ Data.partDetails.blackBox.swv }}</text>
            </el-row>
        </el-col>
        <el-col class="bottom" :span="5">
            <el-row>
                <text class="title">计量器</text>
            </el-row>
            <el-row>
                <text>序列号:</text>
                <text>{{ Data.partDetails.meter.uuid }}</text>
            </el-row>
            <el-row>
                <text>制造商:{{ Data.partDetails.meter.description }}</text>
            </el-row>
        </el-col>
        <el-col class="left-top" :span="5">
            <el-row>
                <text class="title">计控主板</text>
                <text class="statusBox">{{ Data.partDetails.calculatorMainboard.onlineStatus }}</text>
            </el-row>
            <el-row>
                <text>校验ID:{{ Data.partDetails.calculatorMainboard.uuid }}</text>
            </el-row>
            <el-row>
                <text>数字签名:{{ Data.partDetails.calculatorMainboard.signature }}</text>
            </el-row>
            <el-row>
                <text>制造商:{{ Data.partDetails.calculatorMainboard.description }}</text>
            </el-row>
            <el-row>
                <text>程序版本:{{ Data.partDetails.calculatorMainboard.swv }}</text>
            </el-row>
            <el-row>
                <text>法制软件版本:{{ Data.partDetails.calculatorMainboard.Legalswv }}</text>
            </el-row>
            <el-row>
                <text>法制软件标识:{{ Data.partDetails.calculatorMainboard.LegalSwvldentification }}</text>
            </el-row>


        </el-col>
        <el-col class="left-bottom" :span="5">
            <el-row>
                <text class="title">油气回收控制主板</text>
                <text class="statusBox">{{ Data.partDetails.vaporRecoveryControl.onlineStatus }}</text>
            </el-row>
            <el-row>
                <text>校验ID:{{ Data.partDetails.vaporRecoveryControl.uuid }}</text>

            </el-row>
            <el-row>
                <text>数字签名:{{ Data.partDetails.vaporRecoveryControl.signature }}</text>
            </el-row>
            <el-row>
                <text>制造商:{{ Data.partDetails.vaporRecoveryControl.description }}</text>
            </el-row>
            <el-row>
                <text>程序版本:{{ Data.partDetails.vaporRecoveryControl.swv }}</text>
            </el-row>
        </el-col>
        <el-col class="right-top" :span="5">
            <el-row>
                <text class="title">监控微处理器</text>
                <text class="statusBox">{{ 1 }}</text>
            </el-row>
            <el-row>
                <text>校验ID:{{ 2 }}</text>
            </el-row>
            <el-row>
                <text>数字签名:{{ 3 }}</text>
            </el-row>
            <el-row>
                <text>制造商:{{ 4 }}</text>
            </el-row>
            <el-row>
                <text>程序版本:{{ 5 }}</text>
            </el-row>
            <el-row>
                <text>序列号:{{ 6 }}</text>
            </el-row>
            <el-row>
                <text>法制软件版本:{{ 7 }}</text>
            </el-row>
            <el-row>
                <text>法制软件标识:{{ 8 }}</text>
            </el-row>
        </el-col>
        <el-col class="right" :span="5">
            <el-row>
                <text class="title">编码器</text>
                <text class="statusBox">{{ Data.partDetails.encoderControls.onlineStatus }}</text>
            </el-row>
            <el-row>
                <text>校验ID:{{ Data.partDetails.encoderControls.uuid }}</text>
            </el-row>
            <el-row>
                <text>数字签名:{{ Data.partDetails.encoderControls.signature }}</text>
            </el-row>
            <el-row>
                <text>制造商:{{ Data.partDetails.encoderControls.description }}</text>
            </el-row>
            <el-row>
                <text>程序版本:{{ Data.partDetails.encoderControls.swv }}</text>
            </el-row>
            <el-row>
                <text>序列号:{{ Data.partDetails.encoderControls.sn }}</text>
            </el-row>
            <el-row>
                <text>法制软件版本:{{ Data.partDetails.encoderControls.Legalswv }}</text>
            </el-row>
            <el-row>
                <text>法制软件标识:{{ Data.partDetails.encoderControls.LegalSwvldentification }}</text>
            </el-row>
        </el-col>
        <el-col class="right-bottom" :span="5">
            <el-row>
                <text class="title">加密显示屏</text>
                <text class="statusBox">{{ Data.partDetails.displayControls.onlineStatus }}</text>
            </el-row>
            <el-row>
                <text>制造商：{{ Data.partDetails.displayControls.description }}</text>
            </el-row>
            <el-row>
                <text>序列号：{{ Data.partDetails.displayControls.uuid }}</text>
            </el-row>
        </el-col>
    </div>

</template>

<script setup lang="ts" name="">
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { partsFilterModel } from "/@/api/admin/reportManagement/partInformation/partInformationDto";
import { partInformationApi } from "/@/api/admin/reportManagement/partInformation/partInformationApi";


const router = useRoute()
// 中间内容 - 传值
const parameter = reactive({
    name: '',
    NozzleNo: '',
    status: '',
    fuelName: '',
    alarming: '',
    code: ''
} as any)
parameter.name = router.query.name
parameter.NozzleNo = router.query.NozzleNo
parameter.status = router.query.status
parameter.fuelName = router.query.fuelName
parameter.alarming = router.query.alarming
parameter.code = router.query.code

const Data = reactive({
    partDetails: {
        calculatorMainboard: {
            /**在线状态*/
            onlineStatus: '',
            /**校验1D*/
            uuid: '',
            /**数字签名 */
            signature: '',
            /**制造商*/
            description: '',
            /**程序版本 */
            swv: '',
            /**法制软件 */
            Legalswv: '',
            /**法制软件标识 */
            LegalSwvldentification: ''
        },
        /**编码器 */
        encoderControls: {
            /**在线状态*/
            onlineStatus: '',
            /**校验id*/
            uuid: '',
            /**数字签名 */
            signature: '',
            /**制造商*/
            description: '',
            /**程序版本 */
            swv: '',
            /**序列号 */
            sn: '',
            /**法制软件 */
            Legalswv: '',
            /**法制软件标识 */
            LegalSwvldentification: ''
        },
        /**加密显示屏 */
        displayControls: {
            /**在线状态*/
            onlineStatus: '',
            /**序列号*/
            uuid: '',
            /**制造商*/
            description: ''
        },
        /**油气回收控制主板 */
        vaporRecoveryControl: {
            /**在线状态*/
            onlineStatus: '',
            /**校验id*/
            uuid: '',
            /**数字签名 */
            signature: '',
            /**制造商*/
            description: '',
            /**程序版本 */
            swv: ''
        },
        /**安全装置 */
        blackBox: {
            /**二维码*/
            qrCode: '',
            /**版本*/
            swv: '',
        },
        /**计量器 */
        meter: {
            /**序列号*/
            uuid: '',
            /**制造商*/
            description: ''
        },
    } as partsFilterModel
})

const init = async () => {
    const res: any = await new partInformationApi().getData({ "id": parameter.name })
    Data.partDetails = res?.data??{} as partsFilterModel
    console.log(Data.partDetails)
}

onMounted(() => {
    init()
})

</script>

<style scoped lang="scss">
.container {
    height: 100%;
    width: 100%;
    background-image: url('/@/assets/deviceVision/parts.png');
    background-size: 100% 100%;
    position: relative;
    font-size: 18px;
}

.title {
    font-weight: 600;
}

.main {
    position: absolute;
    top: 40%;
    left: 40%;
}

.top {
    position: absolute;
    top: 8%;
    left: 40%;
}

.bottom {
    position: absolute;
    top: 78%;
    left: 40%;
}

.left-top {
    position: absolute;
    top: 19%;
    left: 7%;
}

.left-bottom {
    position: absolute;
    top: 60%;
    left: 7%;
}

.right-top {
    position: absolute;
    top: 10%;
    left: 70%;
}

.right {
    position: absolute;
    top: 43%;
    left: 70%;
}

.right-bottom {
    position: absolute;
    top: 77%;
    left: 70%;
}
.statusBox{
    margin-left: 10px;
    color:greenyellow
}
.el-row{
    margin-bottom: 5px;
}
</style>