shuishen
2023-01-06 7dd9f3e346d256a44b5cf708823f05c683f6ebac
Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs
2 files modified
2 files added
125 ■■■■ changed files
public/img/icon/bubble.png patch | view | raw | blame | history
public/img/icon/p-biao.png patch | view | raw | blame | history
src/views/home/components/leftContainer.vue 100 ●●●● patch | view | raw | blame | history
src/views/house/index.vue 25 ●●●●● patch | view | raw | blame | history
public/img/icon/bubble.png
public/img/icon/p-biao.png
src/views/home/components/leftContainer.vue
@@ -4,28 +4,28 @@
            <div class="box">
                <div class="title">
                    <div class="title-tab">
                        <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/
                        <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                        <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
                        <!-- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> -->
                    </div>
                    <div class="title-num">
                    <!-- <div class="title-num">
                        共
                        <span :class="{ choosed: peopletype == 0 }">100</span>/
                        <span :class="{ choosed: peopletype == 0 }">100</span>人
                        <span :class="{ choosed: peopletype == 1 }">1</span>人
                    </div>
                    </div> -->
                </div>
                <div class="sub-tab" v-show="peopletype == 0">
                    <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                        <div class="num">164.57万人</div>
                        <div class="type">户籍人口</div>
                    <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                        <div class="tab-title-small">户籍人口:</div>
                        <div class="tab-title-small">164.57万人</div>
                    </div>
                    <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                        <div class="num">17.52万人</div>
                        <div class="type">流动人口</div>
                    <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                        <div class="tab-title-small">重点人员:</div>
                        <div class="tab-title-small">1人</div>
                    </div>
                    <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                    <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                        <div class="num">91995人</div>
                        <div class="type">境外人口</div>
                    </div>
                    </div> -->
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
@@ -132,7 +132,7 @@
const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
export default {
    data () {
    data() {
        return {
            tabType: 0,
            peopletype: 0,
@@ -253,7 +253,7 @@
            keyPersonSelectSaveArr: [],
        }
    },
    mounted () {
    mounted() {
        this.initLandEcharts()
        this.initPersonEcharts()
        this.inithouseEcharts()
@@ -265,20 +265,20 @@
        })
    },
    methods: {
        echartsResize () {
        echartsResize() {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        },
        initPersonEcharts () {
        initPersonEcharts() {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)
            homePersonmyChart.setOption(this.initPersonOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所'], [881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))
        },
        initPersonOptions (xDate, yDate, colors) {
        initPersonOptions(xDate, yDate, colors) {
            return {
                tooltip: {
                    trigger: 'item',
@@ -355,34 +355,32 @@
            }
        },
        personTabClick (type) {
        personTabClick(type) {
            this.tabType = type
            this.dataDeep = 1
            let xDate, yDate, colors
            if (type == 0) {
                homePersonmyChart.dispose()
                this.initPersonEcharts()
                homePersonmyChart.off('click')
                this.clickPeopleChart()
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
                yDate = [881, 2211, 6414, 4321, 1232]
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
                homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
            } else if (type == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
                colors = ['#ef9faa', '#f7bfc6', '#fedade']
            } else if (type == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#7d65c0', '#a47db4', '#e0a8c5']
                this.peopleTabClick(type);
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
        inithouseEcharts () {
        inithouseEcharts() {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initHouseOptions(['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑'], [88188, 1222211, 464104, 43201, 12302], [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]))
        },
        initHouseOptions (xDate, y1Date, y2Date) {
        initHouseOptions(xDate, y1Date, y2Date) {
            return {
                tooltip: {
                    trigger: 'item',
@@ -472,7 +470,7 @@
            }
        },
        houseTabClick (type) {
        houseTabClick(type) {
            this.tabTypeTwo = type
            let xDate, y1Date, y2Date
@@ -489,13 +487,13 @@
            houseMyChart.setOption(this.initHouseOptions(xDate, y1Date, y2Date), true)
        },
        initLandEcharts () {
        initLandEcharts() {
            var chartDom = document.getElementById('landEcharts')
            landMyChart = this.$echarts.init(chartDom)
            landMyChart.setOption(this.initLandOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [6414, 2211, 4321, 1232, 881, 6414, 2211, 4321, 1232, 881]))
        },
        initLandOptions (xDate, yDate) {
        initLandOptions(xDate, yDate) {
            return {
                grid: {
                    top: '4%',
@@ -581,7 +579,7 @@
            }
        },
        landTabClick (type) {
        landTabClick(type) {
            this.tabTypeThree = type
            let xDate, yDate
@@ -596,8 +594,8 @@
            landMyChart.setOption(this.initLandOptions(xDate, yDate), true)
        },
        peopleTabClick (type) {
            this.peopletype = type
        peopleTabClick(type) {
            // this.peopletype = type
            homePersonmyChart.dispose()
            this.$nextTick(() => {
                if (type == 0) {
@@ -613,7 +611,7 @@
            })
        },
        clickPeopleChart () {
        clickPeopleChart() {
            homePersonmyChart.on('click', params => {
                let xDate, yDate, colors
                this.dataDeep = 2
@@ -698,7 +696,7 @@
            })
        },
        clickLandChart () {
        clickLandChart() {
            landMyChart.on('click', params => {
                this.landVisible = true
                this.landTitle = params.name
@@ -710,7 +708,7 @@
            })
        },
        clickkeyPersonChart () {
        clickkeyPersonChart() {
            keyPersonmyChart.on('click', params => {
                let keyPersonDetailNewArr = []
                this.keyPersonSelectArr.some((item) => {
@@ -722,14 +720,14 @@
            })
        },
        initkeyPersonEcharts () {
        initkeyPersonEcharts() {
            var chartDom = document.getElementById('PersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)
            let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))
        },
        initkeyPersonOption (dataArr) {
        initkeyPersonOption(dataArr) {
            return {
                tooltip: {
                    trigger: 'item',
@@ -745,8 +743,8 @@
                    }
                },
                legend: {
                    left: '48%',
                    y: '10%',
                    left: '45%',
                    y: '1%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
@@ -767,8 +765,8 @@
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['24%', '57%'],
                        radius: ['30%', '60%'],
                        center: ['22%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
@@ -789,7 +787,7 @@
            }
        },
        selectPoliceChangeData (name) {
        selectPoliceChangeData(name) {
            if (this.peopletype == 0 && this.tabType == 0) {
                let xDate, yDate, colors
                if (name == '车站所') {
@@ -847,7 +845,7 @@
        },
        backBegin () {
        backBegin() {
            this.dataDeep = 1
            let xDate, yDate, colors
            if (this.tabType == 0) {
@@ -866,7 +864,7 @@
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
        getKeyPersonCount (arr) {
        getKeyPersonCount(arr) {
            let valueArr = [0, 0, 0, 0, 0, 0, 0]
            arr.some(item => {
                if (item.type == '涉恐人员') {
@@ -897,7 +895,7 @@
            return KeyPersonDataArr
        },
        selectAreaChangeData (name) {
        selectAreaChangeData(name) {
            if (this.peopletype == 1) {
                if (this.peopletype == 1 && name != '全部') {
                    let arr = []
@@ -921,7 +919,7 @@
    },
    destroyed () {
    destroyed() {
        window.removeEventListener("resize", this.echartsResize)
        if (homePersonmyChart) {
@@ -1071,6 +1069,10 @@
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;
                &>div {
                    height: 22px;
src/views/house/index.vue
@@ -141,11 +141,8 @@
                                <i class="el-icon-caret-left"></i>
                            </div>
                            <div class="build-outBox" ref="BuildOutBox">
                                <div
                                    class="build-box"
                                    style="left: 0px;"
                                    :style="{ width: `calc(${Math.ceil(buildingList.length / 10)} * (356 / 1920) * 100vw` }"
                                >
                                <div class="build-box" style="left: 0px;">
                                    <!-- :style="{ width: `calc(${Math.ceil(buildingList.length / 10)} * (356 / 1920) * 100vw` }" -->
                                    <div
                                        class="ridgepole-list"
                                        v-for="index of Math.ceil(buildingList.length / 10)"
@@ -650,7 +647,7 @@
            nextFloorShow: true,
            houseDate: {},
            housingData: {
                name: '信美家园',
                name: '',
                img: '/img/housing/one.jpg',
                classify: '住宅区',
                area: 'xxx警务室',
@@ -833,7 +830,6 @@
                        this.businessData.push(item)
                    }
                })
                console.log(232323, this.parkingLotData, this.comeOutData, this.businessData)
            })
        },
@@ -873,6 +869,7 @@
                })
                this.unitHouseChoosed = newArr
                console.log('this.unitHouseChoosed', this.unitHouseChoosed)
            })
        },
@@ -912,11 +909,12 @@
        nextBtn () {
            const boxWidth = parseInt(this.$refs.BuildOutBox.offsetWidth)
            if (parseInt(document.querySelector(".build-box").offsetWidth) > Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
            // if (parseInt(document.querySelector(".build-box").offsetWidth) > Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
            if (Math.ceil(this.buildingList.length / 10) * 356 > Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
                document.querySelector(".build-box").style.left = parseInt(document.querySelector(".build-box").style.left) - boxWidth + 'px'
                this.lastBtnShow = true
                if (parseInt(document.querySelector(".build-box").offsetWidth) == Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
                // if (parseInt(document.querySelector(".build-box").offsetWidth) == Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
                if (Math.ceil(this.buildingList.length / 10) * 356 == Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
                    this.nextBtnShow = false
                }
            }
@@ -1003,14 +1001,12 @@
        //对树节点进行筛选时执行的方法
        filterNode (value, data) {
            // console.log(value, data)
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        // 点击选中
        currentChangeHandle (current, currentNode) {
            console.log(123, current, currentNode)
            this.filterText = ''
            this.prop = current.name
            if (current.name == '万达华府') {
@@ -1114,12 +1110,11 @@
        },
        deepDataRowClick (param1, row) {
            console.log(111222, param1, row)
            let url = ''
            if (param1 == 'comeOut') {
                url = '/img/icon/comeOut.png'
                url = '/img/icon/bubble.png'
            } else if (param1 == 'park') {
                url = '/img/icon/park.png'
                url = '/img/icon/p-biao.png'
            } else if (param1 == 'business') {
                url = '/img/icon/business.png'
            }