苏州-web:智能安全帽提交

unknown

2023-10-23 5672f352d0ba114e2ae96c8cefad6c74ae6d2934

 web/src/views/SecureManage/SmartHelmet/SafeHat.vue

@@ -1,3 +1,129 @@
<template>
    <div>安全帽设备</div>
</template>
<template>

    <!-- 安全管理 ==> 智能安全帽 => 安全帽设备 -->

    <div class="main">

        <!-- main_left -->

        <div class="main_left">

            <div class="main_left_search">

                <div class="search_item">

                    <span>姓名:</span>

                    <el-input size="mini" v-model="queryInfo.userName" placeholder="请输入姓名" clearable></el-input>

                </div>

                <div class="search_item">

                    <span>设备编号:</span>

                    <el-input size="mini" v-model="queryInfo.deviceNum" placeholder="请输入设备编号" clearable></el-input>

                    <el-button icon="el-icon-search" v-permission="'search'" @click="queryTable">查询</el-button>

                </div>

            </div>

            <div class="main_left_table">

                <cpnTable :table-loading="loading" :table-data="dataList" :table-columns="tableColumns"

                    :row-click="rowClick">

                </cpnTable>

            </div>

        </div>

    </div>

</template>

  
<script>

import cpnTable from '@/components/element/Table'

export default {

    data() {

        return {

            loading: false,

            queryInfo: {

                pageNum: 1,

                pageSize: 9999,

                userName: '',

                deviceNum: '',

            },

            dataList: [],

            tableColumns: [],

            userId: '', // 用户id

        }

    },

    components: {

        cpnTable

    },

    created() {

        this.setTableColumn()

        this.getLists()

    },

    methods: {

        setTableColumn() {

            this.tableColumns = [

                {selection: true},

                {name: "用户ID", key: "userId"},

                {name: "姓名", key: "userName"},

                {name: "设备编号", key: "deviceNum"},

            ]

        },

        getLists() {

            this.loading = true

            this.$api.Safety.SmartHelmet.getLists(this.queryInfo).then(res => {

                if (res.statusMsg === 'ok') {

                    this.dataList = res.data.list

                }

            }).finally(() => this.loading = false)

        },

        rowClick(row) {

            this.userId = row.userId

        },

        queryTable() {

            this.getLists()

        },

    }

}

</script>

  
<style lang="scss" scoped>

@import '@/style/layout-main.scss';



.main {

    display: flex;

    flex-direction: row;

    color: #EBEBEB;



    .main_left {

        display: flex;

        flex-direction: column;

        width: 380px;

        padding: 14px;

        margin-right: 18px;

        border: 1px solid #39B5FE;

        border-radius: 10px;

        box-shadow: rgba(0, 145, 255, 0.7) 0 0 18px inset;

        box-sizing: content-box;



        .search_item {

            span {

                display: inline-block;

                min-width: 54px;

                margin-right: 6px;

                text-align: right;

            }



            .el-input {

                width: 220px;

                margin: 0 28px 16px 0;

            }

        }



        ::v-deep.main_left_table {

            overflow: hidden;



            .el-table__row {

                cursor: pointer

            }



            .el-table {

                display: flex;

                flex-direction: column;



                .el-table__body-wrapper {

                    overflow-y: auto;

                    flex: 1;

                }

            }

        }

    }

}

</style>