保安管理

liuyg

2021-07-29 f2eb32997b3b398948f3a4f71d24254f4edfeb9a

保安管理

 components/securityStaffs/securityStaffs.vue

New file
@@ -0,0 +1,38 @@
<template>
    <view class="securityStaffs">
        <view class="container u-skeleton">
            <view style="margin: 20px 0">
                <view v-for="(item,key,index) in datas" :key="index" class="lists">
                    <!--u-skeleton-rect 绘制矩形-->
                    <text class="u-skeleton-rect">{{key}}:{{item}}</text>
                </view>
            </view>
        </view>
        <!--引用组件-->
        <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
    </view>
</template>

<script>
    export default {
        name: "securityStaffs",
        props: ['datas'],
        data() {
            return {
                loading: true,
            };
        },
        watch:{
            datas(){
                console.log(this.datas);
                this.loading = false;
            }
        }
    }
</script>

<style lang="scss">
.container {
        padding: 20rpx 60rpx;
    }
</style>

 pages.json

@@ -68,7 +68,27 @@
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },  {
        }, 
		
        {
            "path": "pages/securityStaff/exhibition",
            "style": {
                "navigationBarTitleText": "展示",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },{
            "path": "pages/securityStaff/information",
            "style": {
                "navigationBarTitleText": "详细信息",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
		
		
		
        {
            "path": "pages/company/company",
            "style": {
                "navigationBarTitleText": "服务单位",

 pages/home/home.vue

@@ -66,10 +66,14 @@
        <view class="service-box">
            <u-grid :col="4" :border="false">
                <u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index" @click="goBusinessPage(item.url,index)">
                    <navigator url="" hover-class="none" class="service-item">
                    <!-- <navigator url="" hover-class="none" class="service-item">
                        <image :src="item.img" mode="widthFix" class="img"></image>
                        <view class="name">{{ item.name }}</view>
                    </navigator>
                    </navigator> -->
                    <view url="" hover-class="none" class="service-item">
                        <image :src="item.img" mode="widthFix" class="img"></image>
                        <view class="name">{{ item.name }}</view>
                    </view>
                </u-grid-item>
                <u-grid-item bg-color="transparent" key="8">
                    <navigator url="/pages/service/service" hover-class="none" class="service-item">
@@ -180,10 +184,19 @@
            },
            //页面跳转
            goBusinessPage(url,index){
                console.log(url)
                uni.navigateTo({
                    url:url
                })
                // console.log(url,index)
                if(index == 1){
                    console.log(index)
                    uni.navigateTo({
                        url:'../securityStaff/exhibition'
                    })
                    return;
					
                }
                // console.log(index)
                // uni.navigateTo({
                //     url:url
                // })
            },
            handleFocus() {
                this.focus = !this.focus;

 pages/securityStaff/certificates.vue

New file
@@ -0,0 +1,12 @@
<template>
    <view class="certificates">
        证件
		
    </view>
</template>

<script>
</script>

<style>
</style>

 pages/securityStaff/data.js

New file
@@ -0,0 +1,65 @@
export var data = [{
    name: '原俊袆',
    age: 18,
    obj: '适普科技'
}, {
    name: '钟日健',
    age: 18,
    obj: '适普科技'
}, {
    name: '唐子玉',
    age: 18,
    obj: '适普科技'
}, {
    name: '曾杭',
    age: 18,
    obj: '适普科技'
}, {
    name: '刘运贵',
    age: 18,
    obj: '适普科技'
}, {
    name: '唐子玉',
    age: 18,
    obj: '适普科技'
}, {
    name: '曾杭',
    age: 18,
    obj: '适普科技'
}, {
    name: '刘运贵',
    age: 18,
    obj: '适普科技'
}, {
    name: '原俊袆',
    age: 18,
    obj: '适普科技'
}, {
    name: '钟日健',
    age: 18,
    obj: '适普科技'
}, {
    name: '唐子玉',
    age: 18,
    obj: '适普科技'
}, {
    name: '曾杭',
    age: 18,
    obj: '适普科技'
}, {
    name: '刘运贵',
    age: 18,
    obj: '适普科技'
}, {
    name: '唐子玉',
    age: 18,
    obj: '适普科技'
}, {
    name: '曾杭',
    age: 18,
    obj: '适普科技'
}, {
    name: '刘运贵',
    age: 18,
    obj: '适普科技'
}]

 pages/securityStaff/employer.vue

New file
@@ -0,0 +1,12 @@
<template>
    <view class="employer">
        从业单位
		
    </view>
</template>

<script>
</script>

<style>
</style>

 pages/securityStaff/exhibition.vue

New file
@@ -0,0 +1,158 @@
<template>
    <view class="exhibition">
        <view style="height: 44px;width: 100%;">

        </view>
        <view class="head">
            <u-navbar :is-fixed="true" :border-bottom="false" :is-back="true" title="" :back-icon-color="'#fff'"
                :background="{ background: '#0BB9C8' }">
                <view class="search-input">
                    <u-search height="50" placeholder="请输入保安员名字查询" @custom="customSearch" @change="changeSearch"
                        :show-action="true" v-model="searchName" :animation="true" :margin="'80rpx'"
                        :action-style="{ color: '#fff' }"></u-search>
                </view>
            </u-navbar>
            <view class="head-bg"></view>
        </view>
        <view class="container u-skeleton">
            <view v-for="(item,key,index) in securityStaffList" :key="index" class="lists">
                <!--u-skeleton-rect 绘制矩形-->
                <text class="u-skeleton-fillet lie" style="padding-top: 10px;">姓名：{{item.name}}</text>
                <text class="u-skeleton-rect lie">性别：{{item.age}}</text>
                <text class="u-skeleton-rect lie">公司：{{item.obj}}</text>
                <text class="u-skeleton-rect lie but" @click="goToInformation(index)">点击查看详情</text>
            </view>

        </view>
        <!--引用组件-->
        <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
        <!-- <securityStaffs v-for="(item,index) in securityStaffList" :key="index" :datas="item">{{msg}}</securityStaffs> -->
    </view>
</template>

<script>
    import {
        data
    } from './data.js'
    import axios from 'axios'
    export default {
        data() {
            return {
                outDataList: [],
                securityStaffList: [{
                    name: '暂无',
                    age: '暂无'
                }],
                searchName: '',
                loading: true,
            }
        },
        computed: {
            msg() {
                return this.securityStaffList[0] == 'null' ? '暂无数据' : '';
            }
        },
        methods: {
            getDataList() {
                var d = []
                axios({
                    url: 'http://192.168.0.108:81/blade-user/page',
                    method: 'get',
                }).then(res => {
                    console.log(res.data.data.records);
                    var b = res.data.data.records;
                    for (var k in b) {
                        d.push({
                            name: b[k].realName,
                            age: b[k].sexName,
                            obj: b[k].deptName,
                            honor: '扶老奶奶过马路',
                            punishment: '不看红绿灯',
                            imgSrc:b[k].avatar
                        })
                    }
                    this.outDataList = d;
                    console.log(d)
                    setTimeout(() => {

                        this.securityStaffList = this.outDataList;
                        this.loading = false;
                    }, 1000)

                })
                // this.outDataList = data;


            },
            customSearch() {
                if (this.searchName == '') {
                    return;
                }
                this.loading = true;
                this.securityStaffList = [];
                console.log(this.searchName);
                var d = this.outDataList,
                    a = [];
                for (var k in d) {
                    if (d[k].name.indexOf(this.searchName) != -1) {
                        a.push(d[k]);
                    }
                }
                this.securityStaffList = a;
                this.loading = false;

            },
            goToInformation(index) {
                var data = this.securityStaffList[index];
                uni.navigateTo({
                    url: `../securityStaff/information?data=${JSON.stringify(data)}`
                })
            },
            changeSearch() {
                if (this.searchName == '') {
                    this.securityStaffList = this.outDataList;
                }
            }
        },
        mounted() {
            this.getDataList();
        }
    }
</script>

<style lang="scss" scoped>
    .exhibition {
        background-color: #f7f7f7;
        min-height: 100vh;
        overflow: hidden;
    }

    .head {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .container {
        width: 95%;
        margin: 0 auto;
        // position: relative;

        .lists {
            background-color: #fff;
            width: 100%;
            height: 130px;

            .lie {
                display: block;
                margin: 10px 10px;
            }

            .but {
                position: relative;
                left: 70%;
            }
        }
    }
</style>

 pages/securityStaff/information.vue

New file
@@ -0,0 +1,122 @@
<template>
    <view class="information">
        <view class="head">
            <u-navbar :is-fixed="true" :border-bottom="false" :is-back="true" title="" :back-icon-color="'#fff'"
                :background="{ background: '#0BB9C8' }">
                <!-- <view class="search-input">
                    <u-search height="50" placeholder="请输入保安员名字查询" @custom="customSearch" @change="changeSearch"
                        :show-action="true" v-model="searchName" :animation="true" :margin="'80rpx'"
                        :action-style="{ color: '#fff' }"></u-search>
                </view> -->
            </u-navbar>
            <view class="head-bg"></view>
        </view>
        <view class="bodys">
            <view class="once">
                照片：
                <!-- <image :src="datalist.imgSrc" mode=""></image> -->
                <u-image class="img" width="150rpx" height="150rpx" :src="datalist.imgSrc">
                    <view slot="error" style="font-size: 24rpx;">暂无图片</view>
                </u-image>
            </view>
            <view class="once">
                姓名： {{datalist.name}}
            </view>
            <view class="once">
                性别： {{datalist.age}}
            </view>

            <view class="once">
                公司： {{datalist.obj}}
            </view>
            <view class="once">
                荣誉： {{datalist.honor}}
            </view>
            <view class="once">
                违规： {{datalist.punishment}}
                <!-- <view class="title">
                    违规:
                </view>
                <textarea name="" id=""  disabled="disabled" :placeholder="datalist.punishment"></textarea> -->
            </view>
            <view class="once">
                <u-button class="ubut" type="success" @click="openCertificates" size="medium" :ripple="true"
                    ripple-bg-color="#fff">查看证件</u-button>
            </view>
        </view>
        <u-popup v-model="show" mode="bottom" length="30%" border-radius="10">
            <view>证件详情</view>
        </u-popup>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                datalist: {
                    name: '原俊袆',
                    age: '男',
                    obj: '适普科技',
                    honor: '扶老奶奶过马路',
                    punishment: '不看红绿灯',
                    imgSrc: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
                },
                show: false
            }
        },
        methods: {
            openCertificates() {
                this.show = true;
            }
        },
        mounted() {
            if (this.$route.query.data != undefined) {
                this.datalist = JSON.parse(this.$route.query.data);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .information {
        background-color: #f7f7f7;
        min-height: 100vh;
        overflow: hidden;

        .bodys {
            width: 100%;
            margin: 0 auto;

            .once {
                width: 100%;
                height: auto;
                background-color: #fff;
                line-height: 44px;
                padding: 0 2.5% 0 2.5%;
            }

            .img {
                display: inline-block;
                position: relative;
                top: 10px;
            }

            .once:not(:nth-child(1)) {
                margin: 10px 0 10px 0;
            }

            .once:nth-child(6),
            .once:nth-child(5) {
                height: 88px;
            }
            .once:nth-child(7){
                background-color: transparent;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
</style>

 vue.config.js

@@ -4,5 +4,24 @@
        devServer: {
            disableHostCheck: true
        }
    }
    },
    // devServer: {
    //     port: 1888,
    //     // disableHostCheck: true,
    //     proxy: {
    //       '/api': {
    //         //本地服务接口地址
    //         // target: 'http://localhost',
    //         // target: 'http://192.168.0.114:81',//钟W
    //         target: 'http://192.168.0.109:81',//tangW
    //         // target: 'http://192.168.0.104:80',//唐N
    //         //远程演示服务地址,可用于直接启动项目
    //         // target: 'https://saber.bladex.vip/api',
    //         ws: true,
    //         pathRewrite: {
    //           '^/api': '/'
    //         }
    //       }
    //     }
    //   }
}