新增模块

shuishen

2024-01-17 1675c4c225b4f77513b0a416636c5f6e3a825bc2

新增模块

 src/components/SearchBar/index.vue

New file
@@ -0,0 +1,132 @@
<template>
    <div class="flex-box">
        <div :style="{ width: item.width || '100%' }" v-for="(item, index) in options.columns" :key="index">
            <div class="search-item-box" v-if="item.type === 'input'">
                <el-input :size="item.size || 'small'" v-model="params[item.props]" :clearable="item.clearable || false"
                    :placeholder="item.placeholder || (item.label ? '请输入' + item.label : '请输入')">
                </el-input>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SearchBar',

    props: {
        options: {
            default: () => { return new Object() }
        }
    },

    data () {
        return {
            params: {},
        }
    },

    watch: {
        options: {
            handler (newData) {
                console.log(newData, 89999)
                if (JSON.stringify(newData) != '{}') {
                    if (newData.resetParams && newData.resetParams == true) this.params = {}

                    this.resetParams({}, true)
                }
            },
            immediate: true
        }
    },

    computed: {
    },

    created () {
    },

    methods: {
        /**
         * @description: 按钮查询事件
         * @return {*}
         */
        searchClick () {
            this.$emit('searchBtn', { ...this.params })
        },

        /**
         * @description: 按钮重置事件
         * @return {*}
         */
        resetClick () {
            this.resetParams()

            this.$emit('resetBtn', { ...this.params })
        },

        /**
         * @description: 重置所有查询条件
         * @return {*}
         */
        resetParams (param, type = false) {
            this.options.columns.forEach(item => {
                if (item.props) {
                    if (item.defaultValue) {
                        this.$set(this.params, item.props, item.defaultValue)
                    } else {
                        this.$set(this.params, item.props, '')
                    }
                }
            })

            if (this.pendingFlag == true && type == true) {
                this.pendingFunction()

                this.pendingFlag = false
            }
        },

        disposeFunction (fun) {
            this.pendingFunction = fun
            this.pendingFlag = true
        },

        /**
         * @description: 获取当前搜索条件
         * @return {*}
         */
        getSeachCondition () {
            return this.params
        },

        /**
         * @description: 重置当前搜索条件
         * @return {*}
         */
        resetSeachCondition () {
            return this.params
        },

        setItemDefault (props, defaultValue) {
            this.$set(this.params, props, defaultValue)
        },
    },
}
</script>

<style lang="scss" scoped>
.flex-box {
    display: flex;
    flex-wrap: wrap;
}

.search-item-box {
    &-label {
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: 14px;
    }
}
</style>

 src/router/page/index.js

@@ -5,116 +5,132 @@
 * @Last Modified time: 2022-07-29 09:15:23
 */

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const layout = () => import('../../views/layout/index.vue')
const home = () => import('../../views/home/index.vue')
const house = () => import('../../views/house/index.vue')
const police = () => import('../../views/police/index.vue')
const video = () => import('../../views/video/index.vue')
const videoList = () => import('../../views/video/list.vue')
const videoRegion = () => import('../../views/video/region.vue')
const activity = () => import('../../views/activity/index.vue')
const policeInfor = () => import('../../views/policeInfor/index.vue')
const layout = () => import("../../views/layout/index.vue");
const home = () => import("../../views/home/index.vue");
const house = () => import("../../views/house/index.vue");
const police = () => import("../../views/police/index.vue");
const video = () => import("../../views/video/index.vue");
const videoList = () => import("../../views/video/list.vue");
const videoRegion = () => import("../../views/video/region.vue");
const activity = () => import("../../views/activity/index.vue");
const policeInfor = () => import("../../views/policeInfor/index.vue");
const scanOrCode = () => import("../../views/scanOrCode/index.vue");
const intelligentSearch = () =>
  import("../../views/intelligentSearch/index.vue");

const login = () => import('../../views/login/index.vue')
const login = () => import("../../views/login/index.vue");

const routes = [
    {
        path: '/login',
        name: 'login',
        component: resolve => require(['../../views/login/index.vue'], resolve),
        meta: {
            title: '登录页',
            isAuth: false
        }
  {
    path: "/login",
    name: "login",
    component: (resolve) => require(["../../views/login/index.vue"], resolve),
    meta: {
      title: "登录页",
      isAuth: false,
    },
    {
        path: '/',
        redirect: '/layout'
  },
  {
    path: "/",
    redirect: "/layout",
  },
  {
    path: "/layout",
    redirect: "/layout/home",
    meta: {
      title: "导航菜单",
    },
    {
        path: '/layout',
        redirect: '/layout/home',
    component: layout,
    children: [
      {
        path: "home",
        meta: {
            title: '导航菜单'
          title: "首页",
        },
        component: layout,
        component: home,
      },
      {
        path: "house",
        meta: {
          title: "社区感知",
        },
        component: house,
      },
      {
        path: "policeresouce",
        meta: {
          title: "警力资源",
        },
        component: police,
      },

      {
        path: "video",
        meta: {
          title: "视频监控",
        },
        component: video,
        children: [
            {
                path: 'home',
                meta: {
                    title: '首页'
                },
                component: home
          {
            path: "list",
            meta: {
              title: "列表查询",
            },
            {
                path: 'house',
                meta: {
                    title: '社区感知'
                },
                component: house
            component: videoList,
          },
          {
            path: "region",
            meta: {
              title: "空间查询",
            },
            {
                path: 'policeresouce',
                meta: {
                    title: '警力资源'
                },
                component: police
            },
            {
                path: 'video',
                meta: {
                    title: '视频监控'
                },
                component: video,
                children: [
                    {
                        path: 'list',
                        meta: {
                            title: '列表查询'
                        },
                        component: videoList
                    },
                    {
                        path: 'region',
                        meta: {
                            title: '空间查询'
                        },
                        component: videoRegion
                    },
                ]
            },
            {
                path: 'activity',
                meta: {
                    title: '电子沙盘'
                },
                component: activity
            },
            {
                path: 'policeinfor',
                meta: {
                    title: '警情信息'
                },
                component: policeInfor
            }

        ]
    },
    // {
    //     path: '*',
    //     redirect: '/404',
    //     isAuth: false
    // }

]
            component: videoRegion,
          },
        ],
      },
      {
        path: "activity",
        meta: {
          title: "电子沙盘",
        },
        component: activity,
      },
      {
        path: "policeinfor",
        meta: {
          title: "警情信息",
        },
        component: policeInfor,
      },
      {
        path: "scanOrCode",
        meta: {
          title: "扫码应用",
        },
        component: scanOrCode,
      },
      {
        path: "intelligentSearch",
        meta: {
          title: "智能搜索",
        },
        component: intelligentSearch,
      },
    ],
  },
  // {
  //     path: '*',
  //     redirect: '/404',
  //     isAuth: false
  // }
];

const router = new VueRouter({
    base: process.env.BASE_URL,
    routes
})
  base: process.env.BASE_URL,
  routes,
});

export default router
export default router;

 src/styles/media/index.scss

@@ -980,6 +980,10 @@
                                    height: 32px;
                                    padding: 0 10px;
                                }

                                .el-input__inner {
                                    padding: 0 countSizeVw(15, 1920);
                                }
                            }
                        }


 src/views/intelligentSearch/index.vue

New file
@@ -0,0 +1,230 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-16 18:45:02
 * @FilePath: \srs-police-affairs\src\views\intelligentSearch\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入搜索内容(姓名、身份证号、手机号、住址)" v-model="searchText" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="姓名"
                        min-width="80%"></el-table-column>
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="手机号"
                        min-width="80%"></el-table-column>
                    <el-table-column label="操作" align="center" min-width="32%">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位">
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-button type="text" size="small" title="详情">
                                <i class="el-icon-document"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total"
                        :pager-count="4" :current-page="pages.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'

let loading = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            searchText: '',
            options: {
                columns: [
                    {
                        type: 'input',
                        props: 'xm',
                        label: '姓名',
                        width: '40%',
                    },

                    {
                        type: 'input',
                        props: 'sjh',
                        label: '手机号',
                        width: '60%',
                    },

                    {
                        type: 'input',
                        props: 'sfz',
                        label: '身份证号',
                    },

                    {
                        type: 'input',
                        props: 'zz',
                        label: '住址',
                    },
                ]
            },

            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],

            boxShow: false,

            pages: {
                total: 0,
                pageSize: 22,
                count: 0,
                currentPage: 1
            },
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
    },

    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')

            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },

    computed: {
        whetherPosition () {
            return (row) => {
                return !(row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73)
            }
        },

        positionColor () {
            return (row) => {
                if (row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        }
    },

    methods: {
        searchBtn () {

        },

        // 分页处理
        handleCurrentChange (currentPage) {
            this.page.currentPage = currentPage

        },


        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    },

    destroyed () {
        loading && loading.close()

        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')
    }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;
    }
}

.list {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;

    .pages {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .state-box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #adadad;
    }

    .online {
        background-color: #4ccc7d;
    }
}
</style>

 src/views/layout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-16 14:16:21
 * @LastEditTime: 2024-01-16 14:23:32
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
@@ -217,11 +217,11 @@
                },
                {
                    menuName: '扫码应用',
                    path: '/layout/policeinfor'
                    path: '/layout/scanOrCode'
                },
                {
                    menuName: '智能搜索',
                    path: '/layout/policeinfor'
                    path: '/layout/intelligentSearch'
                }
            ],


 src/views/scanOrCode/index.vue

New file
@@ -0,0 +1,267 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-17 09:48:57
 * @FilePath: \srs-police-affairs\src\views\scanOrCode\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="time-select" ref="timeSelect">

                <div class="search-item-box">
                    <span>资源类型：</span>

                    <el-select style="flex: 1;" size="small" v-model="typeValue" @change="typeChange" placeholder="请选择">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </div>

                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入搜索内容(姓名、身份证号、手机号、住址)" v-model="searchText" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="姓名"
                        min-width="80%"></el-table-column>
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="手机号"
                        min-width="80%"></el-table-column>
                    <el-table-column label="操作" align="center" min-width="32%">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位">
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-button type="text" size="small" title="详情">
                                <i class="el-icon-document"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total"
                        :pager-count="4" :current-page="pages.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'

let loading = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            searchText: '',
            options: {
                columns: [
                    {
                        type: 'input',
                        props: 'xm',
                        label: '姓名',
                        width: '40%',
                    },

                    {
                        type: 'input',
                        props: 'sjh',
                        label: '手机号',
                        width: '60%',
                    },

                    {
                        type: 'input',
                        props: 'sfz',
                        label: '身份证号',
                    },

                    {
                        type: 'input',
                        props: 'zz',
                        label: '住址',
                    },
                ]
            },

            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],

            boxShow: false,

            pages: {
                total: 0,
                pageSize: 22,
                count: 0,
                currentPage: 1
            },

            typeValue: '1',
            typeOptions: [
                {
                    value: '1',
                    label: '业主租客登记'
                },
                {
                    value: '2',
                    label: '同住登记'
                },
                {
                    value: '3',
                    label: '信息登记'
                },
                {
                    value: '4',
                    label: '企业登记'
                },
                {
                    value: '5',
                    label: '扫码上报'
                }
            ],
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
    },

    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')

            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },

    computed: {
        whetherPosition () {
            return (row) => {
                return !(row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73)
            }
        },

        positionColor () {
            return (row) => {
                if (row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        }
    },

    methods: {
        searchBtn () {

        },

        // 分页处理
        handleCurrentChange (currentPage) {
            this.page.currentPage = currentPage

        },


        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        typeChange () {
        },

        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    },

    destroyed () {
        loading && loading.close()

        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')
    }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;
    }
}

.list {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;

    .pages {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .state-box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #adadad;
    }

    .online {
        background-color: #4ccc7d;
    }
}
</style>