图片及数据整理

shuishen

2022-10-18 5c124cd170e60ba972847b2d02a351c24c827bf0

图片及数据整理

 public/img/housing/five.jpg

 public/img/housing/four.jpg

 public/img/housing/one.jpg

 public/img/housing/three.jpg

 public/img/housing/two.png

 src/assets/data/housingData.js

New file
@@ -0,0 +1,155 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-17 16:03:02
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-17 17:37:09
 * @FilePath: \srs-police-affairs\src\assets\data\housingData.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */
export default [
    {
        name: '信美家园',
        img: '/img/housing/one.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '王敦顿',
        address: '江西省上饶市市广信区信美路18号'
    },
    {
        name: '绿野星城-金凤园',
        img: '/img/housing/two.png',
        classify: '小区',
        area: 'xxx警务室',
        principal: '林光',
        address: '江西省上饶市市广信区信美路18-031号附近'
    },
    {
        name: '阳明花园',
        img: '/img/housing/three.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '李刚',
        address: '江西省上饶市市广信区信美路12号'
    },
    {
        name: '蝶景园',
        img: '/img/housing/four.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '周坤',
        address: '江西省上饶市市广信区凤凰西大道68号'
    },
    {
        name: '翰园小区',
        img: '/img/housing/five.jpg',
        classify: '小区',
        area: 'xxx警务室',
        address: '江西省上饶市市广信区育才路90号'
    },
    {
        name: '友邦公馆',
        img: '/img/housing/one.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '王敦顿',
        address: '江西省上饶市市广信区武夷山大道与七六路交界处'
    },
    {
        name: '雍锦湾',
        img: '/img/housing/two.png',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '林光',
        address: '江西省上饶市市广信区武夷山大道文英国际西北侧约170米'
    },
    {
        name: '中京禧园',
        img: '/img/housing/three.jpg',
        classify: '小区',
        area: 'xxx警务室',
        principal: '李刚',
        address: '江西省上饶市市广信区凤凰西大道德爱中学南侧约190米'
    },
    {
        name: '绿野幸福里',
        img: '/img/housing/four.jpg',
        classify: '小区',
        area: 'xxx警务室',
        principal: '周坤',
        address: '江西省上饶市市广信区吉阳西路168号'
    },
    {
        name: '中核七一三旭日小区',
        img: '/img/housing/five.jpg',
        classify: '小区',
        area: 'xxx警务室',
        principal: '高猛',
        address: '江西省上饶市市广信区武夷山大道9号713'
    },
    {
        name: '筑城家园',
        img: '/img/housing/one.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '王敦顿',
        address: '江西省上饶市市广信区三清山西大道58号'
    },
    {
        name: '西城家园',
        img: '/img/housing/two.png',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '林光',
        address: '江西省上饶市市广信区渡头街广信区第三小学东侧约220米'
    },
    {
        name: '恒大御府',
        img: '/img/housing/three.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '李刚',
        address: '江西省上饶市市广信区三清山大道和锦园后面罗墩'
    },
    {
        name: '凤山花园',
        img: '/img/housing/four.jpg',
        classify: '小区',
        area: 'xxx警务室',
        principal: '周坤',
        address: '江西省上饶市市广信区明叔大道与天佑大道交叉路口往西约230米'
    },
    {
        name: '博能信江印象',
        img: '/img/housing/five.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '高猛',
        address: '江西省上饶市市广信区惟义西路5号'
    },
    {
        name: '新科花园',
        img: '/img/housing/one.jpg',
        classify: '小区',
        area: 'xxx警务室',
        principal: '周坤',
        address: '江西省上饶市市广信区惟义西路21号'
    },
    {
        name: '金城花园',
        img: '/img/housing/two.png',
        classify: '小区',
        area: 'xxx警务室',
        principal: '李刚',
        address: '江西省上饶市市广信区金城花园(兴园大道东50米)'
    },
    {
        name: '瑞弘华庭',
        img: '/img/housing/three.jpg',
        classify: '住宅区',
        area: 'xxx警务室',
        principal: '林光',
        address: '江西省上饶市市广信区兴园大道'
    }
]

 src/views/house/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 17:15:30
 * @LastEditTime: 2022-10-17 17:05:59
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -12,14 +12,26 @@
<template>
    <div class="container">
        <div class="search-box">
            <!-- <el-input size="small" placeholder="请输入小区名称" v-model="searchHouse">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>-->
            <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="result-content">
            <div class="housing-estate-info">
                <div class="housing-title">
                    书苑名家
                    <div class="progress"></div>
                </div>
                <div class="housing-bg">
                    <img style="width: 100%; height: 100%;" src="/img/bg.png" alt />
                </div>
@@ -481,7 +493,10 @@
</template>

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

import villageHousesList from '@/assets/data/villageHouse.js'

import house from '../../assets/data/house'

export default {
@@ -590,6 +605,10 @@
            nextFloorShow: true,
            levelList: [],
            houseDate: {},

            searchValue: '',
            searchArray: [],
            searchValBoxShow: false
        }
    },
    created () {
@@ -665,6 +684,7 @@
            this.lastFloorShow = false
            this.apartmentValue = '1'
        },

        nextBtn () {
            if (parseInt(document.querySelector(".build-box").offsetWidth) > Math.abs(parseInt(document.querySelector(".build-box").style.left)) + 356) {
                document.querySelector(".build-box").style.left = parseInt(document.querySelector(".build-box").style.left) - 356 + 'px'
@@ -674,6 +694,7 @@
                }
            }
        },

        lastBtn () {
            document.querySelector(".build-box").style.left = parseInt(document.querySelector(".build-box").style.left) + 356 + 'px'
            this.nextBtnShow = true
@@ -681,6 +702,7 @@
                this.lastBtnShow = false
            }
        },

        lastFloorBtn () {
            console.log(111)
            document.querySelector(".floor-num").style.left = parseInt(document.querySelector(".floor-num").style.left) + 84 + 'px'
@@ -690,6 +712,7 @@
            }
            console.log('111', Math.abs(parseInt(document.querySelector(".floor-num").style.left)))
        },

        nextFloorBtn () {
            console.log('点击了有按钮')
            if (parseInt(document.querySelector(".floor-num").offsetWidth) > Math.abs(parseInt(document.querySelector(".floor-num").style.left)) + 84) {
@@ -700,22 +723,43 @@
                }
            }
        },

        chooseUnit (value) {
            this.floorsType = 1
            document.querySelector(".floor-num").style.left = '0px'
            this.lastFloorShow = false
            this.levelList = this.ridgepoleNum1.unit[value - 1].storey
        },

        isHaveLiudong (arr) {
            return arr.some((item) => { return item.peopleType == '流动人口' })
        },

        isHaveZhongdian (arr) {
            return arr.some((item) => { return item.peopleType == '重点人员' })
        },

        isHaveJingwai (arr) {
            return arr.some((item) => { return item.peopleType == '境外人口' })
        },

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

        searchClick () {
            this.searchValBoxShow = false
        },

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

    destroyed () {
@@ -737,13 +781,14 @@
    li {
        list-style: none;
    }

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

        input {
            width: 300px;
            flex: 1;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
@@ -775,13 +820,67 @@
        }
    }

    .search-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 48px;
        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;
            }
        }
    }

    .result-content {
        height: calc(100% - 48px);
        overflow-x: hidden;
        overflow-y: auto;

        .housing-estate-info {
            .housing-title {
                padding: 0 10px;
                position: relative;
                height: 40px;
                text-align: left;
                line-height: 40px;
                font-size: 28px;
                font-weight: bold;
                z-index: 1;

                &::after {
                    content: '';
                    position: absolute;
                    top: 18px;
                    left: 10px;
                    right: 10px;
                    bottom: 4px;
                    background: linear-gradient(
                        135deg,
                        rgb(33 150 243 / 74%),
                        rgb(254 254 254 / 0%)
                    );
                    z-index: -1;
                }
            }

            .housing-bg {
                margin-top: 6px;
                height: 200px;
            }

@@ -1172,4 +1271,39 @@
        }
    }
}

.progress {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
}

.progress::after {
    content: '';
    position: absolute;
    left: 0;
    width: 80%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    animation: prog 3s ease infinite;
}

@keyframes prog {
    0% {
        transform: translate(-80%, 0);
    }

    100% {
        transform: translate(180%, 0);
    }
}
</style>

 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-10-17 15:19:23
 * @LastEditTime: 2022-10-17 15:27:27
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -157,8 +157,6 @@
            this.dialogVisible = false
        },



        searchChange () {
            if (this.searchValue == '') {
                this.searchValBoxShow = false
@@ -246,7 +244,7 @@
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 98px;
        top: 48px;
        left: 6px;
        width: calc(100% - 12px);
        max-height: 160px;