Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs
2 files modified
2 files added
| | |
| | | <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> |
| | |
| | | const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1'] |
| | | |
| | | export default { |
| | | data () { |
| | | data() { |
| | | return { |
| | | tabType: 0, |
| | | peopletype: 0, |
| | |
| | | keyPersonSelectSaveArr: [], |
| | | } |
| | | }, |
| | | mounted () { |
| | | mounted() { |
| | | this.initLandEcharts() |
| | | this.initPersonEcharts() |
| | | this.inithouseEcharts() |
| | |
| | | }) |
| | | }, |
| | | 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', |
| | |
| | | } |
| | | }, |
| | | |
| | | 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', |
| | |
| | | } |
| | | }, |
| | | |
| | | houseTabClick (type) { |
| | | houseTabClick(type) { |
| | | this.tabTypeTwo = type |
| | | |
| | | let xDate, y1Date, y2Date |
| | |
| | | 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%', |
| | |
| | | } |
| | | }, |
| | | |
| | | landTabClick (type) { |
| | | landTabClick(type) { |
| | | this.tabTypeThree = type |
| | | let xDate, yDate |
| | | |
| | |
| | | landMyChart.setOption(this.initLandOptions(xDate, yDate), true) |
| | | }, |
| | | |
| | | peopleTabClick (type) { |
| | | this.peopletype = type |
| | | peopleTabClick(type) { |
| | | // this.peopletype = type |
| | | homePersonmyChart.dispose() |
| | | this.$nextTick(() => { |
| | | if (type == 0) { |
| | |
| | | }) |
| | | }, |
| | | |
| | | clickPeopleChart () { |
| | | clickPeopleChart() { |
| | | homePersonmyChart.on('click', params => { |
| | | let xDate, yDate, colors |
| | | this.dataDeep = 2 |
| | |
| | | }) |
| | | }, |
| | | |
| | | clickLandChart () { |
| | | clickLandChart() { |
| | | landMyChart.on('click', params => { |
| | | this.landVisible = true |
| | | this.landTitle = params.name |
| | |
| | | }) |
| | | }, |
| | | |
| | | clickkeyPersonChart () { |
| | | clickkeyPersonChart() { |
| | | keyPersonmyChart.on('click', params => { |
| | | let keyPersonDetailNewArr = [] |
| | | this.keyPersonSelectArr.some((item) => { |
| | |
| | | }) |
| | | }, |
| | | |
| | | 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', |
| | |
| | | } |
| | | }, |
| | | legend: { |
| | | left: '48%', |
| | | y: '10%', |
| | | left: '45%', |
| | | y: '1%', |
| | | itemGap: 20, |
| | | textStyle: { |
| | | color: '#fff' |
| | |
| | | { |
| | | name: '', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | center: ['24%', '57%'], |
| | | radius: ['30%', '60%'], |
| | | center: ['22%', '55%'], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | | show: false, |
| | |
| | | } |
| | | }, |
| | | |
| | | selectPoliceChangeData (name) { |
| | | selectPoliceChangeData(name) { |
| | | if (this.peopletype == 0 && this.tabType == 0) { |
| | | let xDate, yDate, colors |
| | | if (name == '车站所') { |
| | |
| | | |
| | | }, |
| | | |
| | | backBegin () { |
| | | backBegin() { |
| | | this.dataDeep = 1 |
| | | let xDate, yDate, colors |
| | | if (this.tabType == 0) { |
| | |
| | | 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 == '涉恐人员') { |
| | |
| | | return KeyPersonDataArr |
| | | }, |
| | | |
| | | selectAreaChangeData (name) { |
| | | selectAreaChangeData(name) { |
| | | if (this.peopletype == 1) { |
| | | if (this.peopletype == 1 && name != '全部') { |
| | | let arr = [] |
| | |
| | | |
| | | }, |
| | | |
| | | destroyed () { |
| | | destroyed() { |
| | | window.removeEventListener("resize", this.echartsResize) |
| | | |
| | | if (homePersonmyChart) { |
| | |
| | | background: $sub-tab-bg-color; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | height: 22px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | &>div { |
| | | height: 22px; |
| | |
| | | <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)" |
| | |
| | | nextFloorShow: true, |
| | | houseDate: {}, |
| | | housingData: { |
| | | name: '信美家园', |
| | | name: '', |
| | | img: '/img/housing/one.jpg', |
| | | classify: '住宅区', |
| | | area: 'xxx警务室', |
| | |
| | | this.businessData.push(item) |
| | | } |
| | | }) |
| | | console.log(232323, this.parkingLotData, this.comeOutData, this.businessData) |
| | | }) |
| | | }, |
| | | |
| | |
| | | }) |
| | | this.unitHouseChoosed = newArr |
| | | console.log('this.unitHouseChoosed', this.unitHouseChoosed) |
| | | |
| | | }) |
| | | }, |
| | | |
| | |
| | | |
| | | 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 |
| | | } |
| | | } |
| | |
| | | |
| | | //对树节点进行筛选时执行的方法 |
| | | 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 == '万达华府') { |
| | |
| | | }, |
| | | |
| | | 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' |
| | | } |