Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

shuishen

2022-09-16 26320f4138786dbea27ed71709a42e5b4b138a6d

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 src/views/police/index.vue

@@ -10,7 +10,79 @@
-->

<template>
    <div class="container"></div>
    <div class="container">
        <div class="switch-box">
            <div class="police-car" @click="navType = 1">警车</div>
            <div class="interphone" @click="navType = 2">手台</div>
        </div>
        <div class="search-box">
            <input type="text" placeholder="请输入搜索条件" />
            <button>搜索</button>
        </div>
        <div class="list-show">
            <div class="car-list" v-show="navType == 1">
                <div class="list-box">
                    <el-table
                        :data="arr.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        stripe
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carID" label="车牌号" width="80"></el-table-column>
                        <el-table-column prop="carType" label="警车类型" width="80"></el-table-column>
                        <el-table-column prop="position" label="经纬度"></el-table-column>
                    </el-table>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="arr.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
            <div class="phone-list" v-show="navType == 2">
                <div class="list-box">
                    <el-table
                        :data="arr2.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        stripe
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="phoneID" label="手台号" width="180"></el-table-column>
                        <el-table-column prop="phoneType" label="手台类型" width="160"></el-table-column>
                    </el-table>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="arr.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
@@ -18,6 +90,11 @@
export default {
    data () {
        return {
            navType: 1,
            currentPage: 1,
            pagesize: 13,
            arr: [],
            arr2: []

        }
    },
@@ -25,13 +102,28 @@

    },
    mounted () {

        this.getData()
    },
    updated () {

    },
    methods: {
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            console.log(this.currentPage)  //点击第几页
        },
        getData () {
            for (let i = 0; i < 100; i++) {
                let lng = 120.381058 + Math.random() * 0.5
                let lat = 31.101156 + Math.random() * 0.5
                let carNum = Math.random() * 5000000 + ''
                this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` })
            }
            for (let i = 0; i < 100; i++) {
                let phoneNum = Math.random() * 500000000 + ''
                this.arr2.push({ "phoneID": `${phoneNum.slice(0, 8)}`, "phoneType": "华为" })
            }

        },
    }
}
</script>
@@ -39,7 +131,50 @@
<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    width: 400px;
    height: 100%;
    background: rgba(41, 53, 53, 0.8);

    .switch-box {
        height: 50px;
        // background: blue;
        display: flex;
        justify-content: space-around;
        padding-top: 5px;
        & > div {
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #409eff;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }
    }

    .search-box {
        height: 60px;
        padding: 10px 0 0 20px;
        display: flex;
        input {
            width: 280px;
            height: 40px;
            font-size: 16px;
            text-indent: 0.5em;
        }
        button {
            font-size: 16px;
            width: 80px;
            height: 40px;
        }
    }
    .list-show {
        height: 745px;
        // background-color: #fff;
        .list-box {
            height: 705px;
        }
    }
}
</style>

 src/views/video/index.vue

@@ -10,7 +10,45 @@
-->

<template>
    <div class="container"></div>
    <div class="container">
        <div class="search-box">
            <input type="text" placeholder="请输入搜索条件" />
            <button>搜索</button>
        </div>
        <div class="list-show">
            <div class="car-list">
                <div class="list-box">
                    <el-table
                        :data="arr.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        stripe
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carID" label="车牌号" width="80"></el-table-column>
                        <el-table-column prop="carType" label="警车类型" width="80"></el-table-column>
                        <el-table-column prop="position" label="经纬度"></el-table-column>
                    </el-table>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="arr.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
@@ -18,20 +56,34 @@
export default {
    data () {
        return {

            currentPage: 1,
            pagesize: 13,
            arr: [],
        }
    },
    created () {

    },
    mounted () {
        this.getData()

    },
    updated () {

    },
    methods: {

        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            console.log(this.currentPage)  //点击第几页
        },
        getData () {
            for (let i = 0; i < 100; i++) {
                let lng = 120.381058 + Math.random() * 0.5
                let lat = 31.101156 + Math.random() * 0.5
                let carNum = Math.random() * 5000000 + ''
                this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` })
            }
        },
    }
}
</script>
@@ -39,7 +91,30 @@
<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    width: 400px;
    height: 100%;
    background: rgba(41, 53, 53, 0.8);
    .search-box {
        height: 60px;
        padding: 10px 0 0 20px;
        display: flex;
        input {
            width: 280px;
            height: 40px;
            font-size: 16px;
            text-indent: 0.5em;
        }
        button {
            font-size: 16px;
            width: 80px;
            height: 40px;
        }
    }
    .list-show {
        height: 745px;
        .list-box {
            height: 705px;
        }
    }
}
</style>