地区选择框

guanqb

2022-09-20 d2736cbd6cb77bd98b58f348aa4196ae1041b793

地区选择框

 src/views/home/index.vue

@@ -129,6 +129,26 @@
                <el-checkbox v-model="panoramaLayerShow">全景</el-checkbox>
            </div>
        </div>
        <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>
        </div>
    </div>
</template>

@@ -142,23 +162,24 @@
            phoneLayerShow: false,
            videoLayerShow: false,
            panoramaLayerShow: false,
            arr: [{ 'type': '孤寡老人', 'num': '0', 'radio': '0.00%' }, { 'type': '邪教人员', 'num': '1', 'radio': '2.00%' }, { 'type': '上访人员', 'num': '8', 'radio': '14.00%' }, { 'type': '涉毒', 'num': '15', 'radio': '27.00%' }, { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' }, { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }]
            arr: [{ 'type': '孤寡老人', 'num': '0', 'radio': '0.00%' }, { 'type': '邪教人员', 'num': '1', 'radio': '2.00%' }, { 'type': '上访人员', 'num': '8', 'radio': '14.00%' }, { 'type': '涉毒', 'num': '15', 'radio': '27.00%' }, { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' }, { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }],
            chooseData: {},
            oneSelected: '',
            twoSelected: '',
            threeSelected: '',
            twoChooseData: {},
            threeChooseData: [],
        }
    },
    created () {





    },
    mounted () {
        this.getChooseData()
        this.initPersonEcharts()
        this.initLandEcharts()
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.initEventCountEcharts()

        this.$nextTick(() => {
            let position = [
                [
@@ -499,15 +520,6 @@

            option && myChart.setOption(option)
        },
<<<<<<< HEAD
        tableRowClassName () {
            // if ((rowIndex + 1) % 2 === 0) {
            return "aa"
            // } else {
            //     return "background:rgba(0,8,1,0.1)"
            // }
        },

        houseChange (e) {
            if (e == true) {
                this.$EventBus.$emit('addMxTileset', {
@@ -519,9 +531,40 @@
                    titlesetName: 'sdTilesetLayer'
                })
            }
        },
        getChooseData () {
            let arr1 = ['一区', '二区', '三区']
            let arr2 = ['1所', '2所', '3所']
            let arr3 = ['A小区', 'B小区', 'C小区']
            console.log(arr1, arr2, arr3)
            var obj = {}
            for (let i = 0; i < 3; i++) {
                obj[arr1[i]] = {}
                for (let j = 0; j < 3; j++) {
                    let str = arr1[i] + arr2[j]
                    console.log('str', str)
                    obj[arr1[i]][str] = []
                    for (let k = 0; k < 3; k++) {
                        obj[arr1[i]][str].push(str + arr3[k])
                    }
                }
            }
            this.chooseData = obj
            console.log(obj)
        }
=======
>>>>>>> 0296d220b566f61bbedd8f422bbf3f03b5641a47
    },
    watch: {
        oneSelected (item1, item2) {
            console.log(item2)
            this.twoChooseData = this.chooseData[item1]
            // this.twoSelected = ''
            console.log('twoSelected', this.twoSelected)

        },
        twoSelected (item1, item2) {
            console.log(item2)
            this.threeChooseData = this.twoChooseData[item1]
        }
    }
}
</script>
@@ -647,5 +690,36 @@
            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;
        }
    }
}
</style>