首页自定义下拉

shuishen

2022-09-23 a665bc0e1044bcad4638e8ad5c13af695f4a06ee

首页自定义下拉

 src/components/select/index.vue

@@ -2,25 +2,25 @@
    <div class="selects-container">
        <!-- 选择框 -->
        <div
            :class="{ 'selects-box-show': !isshow, 'selects-box-hide': isshow }"
            class="selects0"
            @click="isshow = !isshow"
            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }"
            class="selects-box"
            @click="optionsShow = !optionsShow"
        >
            <p v-text="xz"></p>
            <div class="text" v-text="checkValue"></div>
            <i class="el-icon-arrow-down"></i>
        </div>
        <!-- 下拉框大盒子 -->
        <div
            :class="{ show: !isshow, hade: isshow, issel: num >= 4 }"
            class="sel"
            :style="{ height: 35 * num + 'px' }"
            :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options"
            :style="{ height: 35 * options.length + 'px' }"
        >
            <!-- 下拉框 -->
            <div
                @click="cutValue(i)"
                :style="{ display: num >= i + 1 ? 'block' : 'none' }"
                v-for="(item, i) in num"
                :key="i"
                v-text="sel[i]"
                @click="cutValue(item, index)"
                v-for="(item, index) in options"
                :key="index"
                v-text="item.name"
            ></div>
        </div>
    </div>
@@ -30,29 +30,30 @@
export default {
    name: 'mapSelect',
    props: {
        //显示多少个下拉框
        num: {
            type: Number,
            required: true //必传
        },
        //下拉框显示的数据
        sel: {
        options: {
            type: Array,
            required: true //必传
        },

        checkValue: {
            type: String,
            required: true //必传
        }
    },

    data () {
        return {
            isshow: true, //控制下拉框显示及隐藏
            xz: "请选择" //默认展示的内容
            optionsShow: true, //控制下拉框显示及隐藏
        }
    },

    methods: {
        //点击换文字的方法
        cutValue (val) {
            this.isshow = true
            this.xz = this.sel[val] //拿到父组件传来的数据
            this.$emit("va", val, this.sel[val])
        cutValue (item, index) {
            this.optionsShow = true

            this.$emit("selectCheck", item, index)
        }
    }
};
@@ -60,11 +61,11 @@

<style lang="scss" scoped>
//显示下拉框
.show {
.options-box-show {
    display: block;
}
//隐藏下拉框
.hade {
.options-box-hide {
    display: none;
}
//点击时改变选择框的边框颜色
@@ -78,55 +79,63 @@
.selects-container {
    width: 100%;
    height: 100%;
    .selects0 {
    background: rgba(7, 22, 37, 0.8);

    .selects-box {
        padding: 0 10px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
        cursor: pointer;

        .text {
            flex: 1;
            text-align: left;
            line-height: 100%;
            display: inline;
            color: #666666; //默认字体颜色
            color: #fff; //默认字体颜色
            font-size: 15px; //默认字体大小
            padding-left: 10px;
        }
        img {
            margin-right: 10px;
            transform: translateY(-2px);
        }
    }

    //当下拉框数量超过4个时 使用固定高度
    .issel {
        height: 140px !important;
    }
    .sel {

    .select-options {
        width: 100%;
        height: 140px;
        overflow: auto;
        border: 1px solid #01be6e; //下拉框边框颜色
        border-top: none;

        div {
            padding: 0 10px;
            width: 100%;
            height: 35px; //下拉框高度
            display: flex;
            justify-content: space-between;
            justify-content: flex-start;
            align-items: center;
            line-height: 35px;
            padding-left: 10px;
            background: rgba(7, 22, 37, 0.8); //下拉框默认背景
            cursor: pointer;
        }

        //鼠标移到下拉框时的背景
        div:hover {
            background: rgba(17, 52, 88, 0.8);
            color: white;
        }

        .selects0:hover {
            background: white;
        }
    }

    //隐藏滚动条
    .sel::-webkit-scrollbar {
    .select-options::-webkit-scrollbar {
        display: none;
    }
}

 src/views/home/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-23 14:19:15
 * @LastEditTime: 2022-09-23 16:25:07
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -132,28 +132,26 @@
        </div>

        <div class="region-select">
            <map-select @va="childValue" :num="count" :sel="sel"></map-select>
        </div>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
            ></map-select>

        <div class="top-container">
            <div class="selectBox">
                <div class="choose" v-if="oneSelected==''">请选择</div>
                <select id="one" v-model="oneSelected">
                    <option v-for="(value,key) in chooseData" :key="key">{{key}}</option>
                </select>
            </div>
            <div class="selectBox">
                <div class="choose" v-if="twoSelected==''">请选择</div>
                <select name id="two" v-model="twoSelected">
                    <option v-for="(value,key) in twoChooseData" :key="key">{{key}}</option>
                </select>
            </div>
            <div class="selectBox">
                <div class="choose" v-if="threeSelected==''">请选择</div>
                <select name id="three" v-model="threeSelected">
                    <option v-for="(item,index) in threeChooseData" :key="index">{{item}}</option>
                </select>
            </div>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
            ></map-select>

            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
            ></map-select>
        </div>

        <el-dialog
@@ -368,20 +366,53 @@
                { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' },
                { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }
            ],
            chooseData: {},
            oneSelected: '全部',
            twoSelected: '',
            threeSelected: '',
            twoChooseData: {},
            threeChooseData: [],
            sel: ["男", "女"], //下拉框的内容 （Array类型） 必传
            count: 2 //下拉框条数  （Number类型） 必传
            policeStationCheckValue: '请选择派出所'
            ,
            areaCheckValue: '请选择辖区',
            housingCheckValue: '请选择小区',
            //下拉框的内容 （Array类型） 必传
            policeStationOptions: [
                {
                    name: '全部'
                },
                {
                    name: '车站派出所'
                },
                {
                    name: '沙溪派出所'
                },
                {
                    name: '灵溪派出所'
                },
                {
                    name: '北门派出所'
                },
                {
                    name: '江光派出所'
                },
                {
                    name: '水南派出所'
                },
                {
                    name: '秦峰派出所'
                },
                {
                    name: '茅家岭派出所'
                },
                {
                    name: '西市派出所'
                },
                {
                    name: '朝阳派出所'
                }
            ],
            areaOptions: [],
            housingOptions: []
        }
    },
    created () {
    },
    mounted () {
        this.getChooseData()
        this.initPersonEcharts()
        this.initLandEcharts()
        this.initEquipmentEcharts()
@@ -555,9 +586,64 @@
    updated () {
    },
    methods: {
        childValue (index, val) {
            console.log(index, val)
        policeStationSelect (item, index) {
            this.policeStationCheckValue = item.name

            if (item.name == "全部") {
                this.$EventBus.$emit('toPosition', {
                    siteJd: 116.112550,
                    siteWd: 28.196631,
                    siteGd: 50000,
                    siteHeading: 0,
                    sitePitch: -45
                })

                this.areaOptions = []
                this.housingOptions = []

                this.areaCheckValue = '请选择辖区'
                this.housingCheckValue = '请选择小区'
            } else {
                if (item.name == '车站派出所') {
                    this.$EventBus.$emit('toPosition', {
                        siteJd: 116.082737,
                        siteWd: 28.724034,
                        siteGd: 18000,
                        siteHeading: -3,
                        sitePitch: -90
                    })
                }

                for (let i = 0; i < 9; i++) {
                    this.areaOptions.push({ name: "辖区" + i })
                }
            }
        },

        areaSelect (item, index) {
            this.areaCheckValue = item.name

            if (item.name == "全部") {
                this.housingOptions = []

                this.housingCheckValue = '请选择小区'
            } else {
                for (let i = 0; i < 9; i++) {
                    this.housingOptions.push({ name: "小区" + i })
                }
            }
        },

        housingSelect (item, index) {
            this.housingCheckValue = item.name

            this.$EventBus.$emit('toPosition', {
                siteJd: 116.026912,
                siteWd: 28.683599,
                siteGd: 400
            })
        },

        getCenter (arr) {
            let centerLonLat = []
            if (arr.length) {
@@ -987,24 +1073,6 @@
            }
        },

        getChooseData () {
            let arr1 = ['全部', '车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所', '水南派出所', '秦峰派出所', '茅家岭派出所', '西市派出所', '朝阳派出所']
            let arr2 = ['辖区1', '辖区2', '辖区3', '辖区4', '辖区5', '辖区6', '辖区7', '辖区8']
            let arr3 = ['A小区', 'B小区', 'C小区']
            var obj = {}
            for (let i = 0; i < arr1.length; i++) {
                obj[arr1[i]] = {}
                for (let j = 0; j < arr2.length; j++) {
                    let str = arr1[i] + arr2[j]
                    obj[arr1[i]][str] = []
                    for (let k = 0; k < arr3.length; k++) {
                        obj[arr1[i]][str].push(str + arr3[k])
                    }
                }
            }
            this.chooseData = obj
        },

        siteClick (e) {
            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true
@@ -1040,42 +1108,8 @@
        }
    },
    watch: {
        oneSelected (item1, item2) {
            if (item1 == '全部') {
                this.$EventBus.$emit('toPosition', {
                    siteJd: 116.112550,
                    siteWd: 28.196631,
                    siteGd: 50000,
                    siteHeading: 0,
                    sitePitch: -45
                })
            } else if (item1 == '车站派出所') {
                this.$EventBus.$emit('toPosition', {
                    siteJd: 116.082737,
                    siteWd: 28.724034,
                    siteGd: 18000,
                    siteHeading: -3,
                    sitePitch: -90
                })
            }

            this.twoChooseData = this.chooseData[item1]
        },
        twoSelected (item1, item2) {
            this.threeChooseData = this.twoChooseData[item1]
        },
        threeSelected (newData, oldData) {
            this.$EventBus.$emit('toPosition', {
                siteJd: 116.026912,
                siteWd: 28.683599,
                siteGd: 400
            })

            if (newData != '' && this.houseLayerShow == false) {
                this.houseLayerShow = true
                this.houseChange(this.houseLayerShow)
            }
        },
    },

    destroyed () {
@@ -1248,44 +1282,19 @@
            background: rgba(7, 22, 37, 0.8);
        }
    }
    .top-container {
        position: fixed;
        display: flex;
        top: 80px;
        left: 400px;
        width: 650px;
        height: 60px;
        text-align: left;
        select {
            position: relative;
            background-color: #11335d;
            width: 200px;
            height: 40px;
            border: 2px solid #2c7dd4;
            color: #fff;
            border-radius: 4px;
            margin-top: 5px;
            margin-left: 5px;
        }
        .choose {
            position: absolute;
            top: 13px;
            left: 11px;
            color: #fff;
            z-index: 22;
            cursor: default;
        }
        .selectBox {
            position: relative;
        }
    }

    .region-select {
        display: flex;
        position: absolute;
        top: 120px;
        top: 80px;
        left: 420px;
        width: 200px;
        width: 640px;
        height: 36px;

        .map-select {
            margin: 0 5px;
            flex: 1;
        }
    }
}
</style>