火狐滚动条，警力资源+视频资源搜索

shuishen

2022-10-17 dbdfe060aba9423c28c30e28e3291b05d99ae9fa

火狐滚动条，警力资源+视频资源搜索

 src/styles/base/index.scss

@@ -2,6 +2,8 @@
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: rgba(7, 22, 37, 0.8) hsla(0, 0%, 84.7%, 0.2);
    scrollbar-width: thin;
}

html,
@@ -39,7 +41,7 @@
}

::-webkit-scrollbar-track {
    background-color: #fff;
    background-color: hsla(0, 0%, 84.7%, 0.2);
}

::-webkit-scrollbar-thumb:window-inactive {

 src/utils/search.js

New file
@@ -0,0 +1,38 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-17 09:55:22
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-17 14:53:08
 * @FilePath: \srs-police-affairs\src\utils\search.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */

// 模糊查询
export function listQuery (dataArray, searchValue, keyValue) {

    let valArray = []

    dataArray.forEach(item => {
        if (item[keyValue].includes(searchValue)) {
            valArray.push(item)
        }
    })

    return valArray
}

// 精准查询
export function accurateSearch (dataArray, searchValue, keyValue) {

    let valArray = []

    dataArray.forEach(item => {
        if (item[keyValue] == searchValue) {
            valArray.push(item)
        }
    })

    return valArray
}

 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-27 14:12:35
 * @LastEditTime: 2022-10-17 15:18:20
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -15,9 +15,20 @@
            <div class="police-car" @click="navClick(1)" :class="{'choosed':navType == 1}">警车</div>
            <div class="interphone" @click="navClick(2)" :class="{'choosed':navType == 2}">手台</div>
        </div>

        <div class="search-box">
            <input type="text" placeholder="请输入搜索条件" />
            <button class="el-icon-search"></button>
            <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
            <button @click="searchClick" class="el-icon-search"></button>
        </div>

        <div v-show="searchValBoxShow" class="search-val-box">
            <div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{item.name}}</div>
            </div>
        </div>

        <div class="list-show">
@@ -35,7 +46,7 @@
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carId" label="车牌号" width="170"></el-table-column>
                        <el-table-column prop="name" label="名称" width="170"></el-table-column>
                        <el-table-column prop="carType" label="警车类型" width="180"></el-table-column>
                        <!-- <el-table-column prop="position" label="经纬度"></el-table-column> -->
                    </el-table>
@@ -66,7 +77,7 @@
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="手台号" width="170"></el-table-column>
                        <el-table-column prop="name" label="名称" width="170"></el-table-column>
                        <el-table-column prop="phoneType" label="手台类型" width="180"></el-table-column>
                    </el-table>
                </div>
@@ -146,6 +157,8 @@
</template>

<script>
import { listQuery, accurateSearch } from "@/utils/search.js"

import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
export default {
@@ -161,6 +174,9 @@
            phoneDetails: {},
            phoneTitle: '',
            phoneVisible: false,
            searchValue: '',
            searchArray: [],
            searchValBoxShow: false
        }
    },
    created () {
@@ -168,7 +184,6 @@
        this.phoneList = phoneList
    },
    mounted () {
        this.navClick()
    },
    updated () {
    },
@@ -177,9 +192,17 @@
            this.currentPage = currentPage
            console.log(this.currentPage)  //点击第几页
        },

        navClick (type) {
            if (!type) { type = 1 }
            this.navType = type

            this.searchValue = ''
            this.searchValBoxShow = false
            this.searchArray = []
            this.carList = carList
            this.phoneList = phoneList

            if (type == 1) {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'phoneLayers',
@@ -248,6 +271,41 @@

        phoneBeforeClose () {
            this.phoneVisible = false
        },

        searchChange () {
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.carList = carList
                this.phoneList = phoneList
            } else {
                if (this.navType == 1) {
                    this.searchArray = listQuery(carList, this.searchValue, 'name')
                } else {
                    this.searchArray = listQuery(phoneList, this.searchValue, 'name')
                }
                this.searchValBoxShow = true
            }
        },

        searchClick () {
            this.searchValBoxShow = false
            if (this.navType == 1) {
                this.carList = accurateSearch(carList, this.searchValue, 'name')
            } else {
                this.phoneList = accurateSearch(phoneList, this.searchValue, 'name')
            }
        },

        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            if (this.navType == 1) {
                this.carList = [item]
            } else {
                this.phoneList = [item]
            }
        }
    },

@@ -297,12 +355,12 @@
    }

    .search-box {
        padding: 5px;
        padding: 6px;
        height: 48px;
        display: flex;

        input {
            width: 300px;
            flex: 1;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
@@ -311,12 +369,15 @@
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        button {
            font-size: 24px;
            font-weight: 700;
@@ -328,12 +389,40 @@
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .search-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 98px;
        left: 6px;
        width: calc(100% - 12px);
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: rgba(16, 29, 74, 0.9);
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

        & > div {
            height: 100%;
            overflow-y: auto;

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }

    .list-show {
        flex: 1;


 src/views/video/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-27 09:19:30
 * @LastEditTime: 2022-10-17 15:19:23
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -12,8 +12,18 @@
<template>
    <div class="container">
        <div class="search-box">
            <input type="text" placeholder="请输入搜索条件" />
            <button class="el-icon-search"></button>
            <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
            <button @click="searchClick" class="el-icon-search"></button>
        </div>

        <div v-show="searchValBoxShow" class="search-val-box">
            <div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{item.name}}</div>
            </div>
        </div>

        <div class="list-show">
@@ -31,7 +41,7 @@
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="设备ID" width="150"></el-table-column>
                        <el-table-column prop="name" label="设备名称" width="150"></el-table-column>
                        <el-table-column prop="type" label="设备类型"></el-table-column>
                    </el-table>
                </div>
@@ -75,6 +85,8 @@
</template>

<script>
import { listQuery, accurateSearch } from "@/utils/search.js"

import monitoringList from '@/assets/data/monitoring.js'

export default {
@@ -85,6 +97,9 @@
            monitoringList: [],
            dialogTitle: '',
            dialogVisible: false,
            searchValue: '',
            searchArray: [],
            searchValBoxShow: false
        }
    },
    created () {
@@ -141,6 +156,30 @@
            this.$refs.videoElement.pause()
            this.dialogVisible = false
        },



        searchChange () {
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.monitoringList = monitoringList
            } else {
                this.searchArray = listQuery(monitoringList, this.searchValue, 'name')
                this.searchValBoxShow = true
            }
        },

        searchClick () {
            this.searchValBoxShow = false
            this.monitoringList = accurateSearch(monitoringList, this.searchValue, 'name')
        },

        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            this.monitoringList = [item]
        }
    },

    destroyed () {
@@ -167,7 +206,7 @@
        display: flex;

        input {
            width: 300px;
            flex: 1;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
@@ -203,6 +242,33 @@
        }
    }

    .search-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 98px;
        left: 6px;
        width: calc(100% - 12px);
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: rgba(16, 29, 74, 0.9);
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

        & > div {
            height: 100%;
            overflow-y: auto;

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }

    .list-show {
        flex: 1;