Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs
4 files modified
2 files added
| New file |
| | |
| | | <template></template> |
| | | |
| | | <script> |
| | | export default { |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |
| New file |
| | |
| | | <!-- |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:17 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2022-09-19 18:27:39 |
| | | * @FilePath: \srs-police-affairs\src\views\home\index.vue |
| | | * @Description: 小区-栋-层-房屋 |
| | | * |
| | | * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. |
| | | --> |
| | | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="left-container"> |
| | | <div class="person-box"> |
| | | <div class="title"> |
| | | <div class="one-level">现有人员</div> |
| | | <!-- <div class="two-level">现有人员</div> --> |
| | | </div> |
| | | |
| | | <div class="sub-title"> |
| | | <div class="one-level">实有人口总数</div> |
| | | <div class="two-level">183.16万人</div> |
| | | </div> |
| | | |
| | | <div class="sub-tab"> |
| | | <div class="tab"> |
| | | <div class="num">164.57万人</div> |
| | | <div class="type">户籍人口</div> |
| | | </div> |
| | | <div class="tab"> |
| | | <div class="num">17.52万人</div> |
| | | <div class="type">流动人口</div> |
| | | </div> |
| | | <div class="tab"> |
| | | <div class="num">91995人</div> |
| | | <div class="type">境外人口</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div id="PersonEcharts" class="echarts-box"></div> |
| | | </div> |
| | | <div class="land-box"> |
| | | <div class="title"> |
| | | <div class="one-level">现有房屋</div> |
| | | <!-- <div class="two-level">现有房屋</div> --> |
| | | </div> |
| | | |
| | | <div class="sub-tab"> |
| | | <div class="tab"> |
| | | <div class="num">1822603户</div> |
| | | <div class="num">实有房屋</div> |
| | | </div> |
| | | <div class="tab"> |
| | | <div class="num">634个</div> |
| | | <div class="num">关注场所</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div id="LandEcharts" class="echarts-box"></div> |
| | | </div> |
| | | <div class="equipment-box"> |
| | | <div class="title"> |
| | | <div class="one-level">现有设备</div> |
| | | <!-- <div class="two-level">现有设备</div> --> |
| | | </div> |
| | | |
| | | <div id="EquipmentEcharts" class="echarts-box"></div> |
| | | </div> |
| | | </div> |
| | | <div class="right-container"> |
| | | <div class="case-box"> |
| | | <div class="title"> |
| | | <div class="one-level">警情动态</div> |
| | | <div class="two-level">当前16</div> |
| | | </div> |
| | | |
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
| | | </div> |
| | | <div class="alert-box"> |
| | | <div class="title"> |
| | | <div class="one-level">警情近一年</div> |
| | | <div class="two-level">历史累计</div> |
| | | </div> |
| | | |
| | | <div class="sub-title"> |
| | | <div class="one-level">警情、案事件总量</div> |
| | | <div class="two-level">555578起</div> |
| | | </div> |
| | | |
| | | <div id="EventCountEcharts" class="echarts-box"></div> |
| | | </div> |
| | | <div class="crowd-box"> |
| | | <div class="title"> |
| | | <div class="one-level">重点稳控/服务人群</div> |
| | | <div class="two-level">当前38</div> |
| | | </div> |
| | | |
| | | <div id="peopleList" class="echarts-box"> |
| | | <el-table |
| | | :data="arr" |
| | | style="width: 100%" |
| | | :header-cell-style="{'text-align':'center','background-color':'#00204f','borderColor':'#073365'}" |
| | | :cell-style="{'text-align':'center','borderColor':'#073365'}" |
| | | :row-class-name="tableRowClassName" |
| | | > |
| | | <el-table-column prop="type" label="人员类型" width="80"></el-table-column> |
| | | <el-table-column prop="num" label="人数" width="180"></el-table-column> |
| | | <el-table-column prop="radio" label="占比" width="120"></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="center-container"> |
| | | <div class="layers-control-btn"> |
| | | <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox> |
| | | </div> |
| | | <div class="layers-control-btn"> |
| | | <el-checkbox v-model="carLayerShow">警车</el-checkbox> |
| | | </div> |
| | | <div class="layers-control-btn"> |
| | | <el-checkbox v-model="phoneLayerShow">手台</el-checkbox> |
| | | </div> |
| | | <div class="layers-control-btn"> |
| | | <el-checkbox v-model="videoLayerShow">监控</el-checkbox> |
| | | </div> |
| | | <div class="layers-control-btn"> |
| | | <el-checkbox v-model="panoramaLayerShow">全景</el-checkbox> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data () { |
| | | return { |
| | | navType: 0, |
| | | houseLayerShow: false, |
| | | carLayerShow: false, |
| | | 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%' }] |
| | | } |
| | | }, |
| | | created () { |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | }, |
| | | mounted () { |
| | | this.initPersonEcharts() |
| | | this.initLandEcharts() |
| | | this.initEquipmentEcharts() |
| | | this.initEventChangeEcharts() |
| | | this.initEventCountEcharts() |
| | | |
| | | this.$nextTick(() => { |
| | | let position = [ |
| | | [ |
| | | [115.935114, 28.627012, 100], |
| | | [115.930150, 28.733535, 100], |
| | | [115.986738, 28.683523, 100], |
| | | [116.015526, 28.647454, 100], |
| | | ] |
| | | ] |
| | | |
| | | position.forEach((item) => { |
| | | let str = '' |
| | | item.forEach(it => { |
| | | str = str + `${it[0]},${it[1]},${it[2]};` |
| | | }) |
| | | |
| | | this.$EventBus.$emit('layerPolygonAdd', { |
| | | layerName: 'polygonLayer', |
| | | positions: str, |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 3, |
| | | 255, |
| | | 13, |
| | | 10 |
| | | ), |
| | | }) |
| | | }) |
| | | }) |
| | | }, |
| | | updated () { |
| | | }, |
| | | methods: { |
| | | navClick (e) { |
| | | this.navType = e.target.dataset.type |
| | | }, |
| | | initPersonEcharts () { |
| | | var chartDom = document.getElementById('PersonEcharts') |
| | | var myChart = this.$echarts.init(chartDom) |
| | | var option |
| | | |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['湖北', '上海', '北京', '广东', '浙江'], |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: "rgba(0,0,255,0.1)" |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [6414, 4231, 2211, 1231, 881], |
| | | type: 'bar', |
| | | itemStyle: { |
| | | normal: { |
| | | label: { |
| | | show: true, |
| | | position: 'top', |
| | | textStyle: { |
| | | color: '#1a94a8', |
| | | fontSize: 16 |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | grid: { |
| | | x: 40, |
| | | y: 10, |
| | | x2: 20, |
| | | y2: 20 |
| | | }, |
| | | } |
| | | |
| | | option && myChart.setOption(option) |
| | | window.addEventListener("resize", function () { |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | initLandEcharts () { |
| | | var chartDom = document.getElementById('LandEcharts') |
| | | var myChart = this.$echarts.init(chartDom) |
| | | var option |
| | | |
| | | option = { |
| | | color: ['#2967c4', '#112d54'], |
| | | xAxis: { |
| | | type: 'value', |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: "rgba(0,0,255,0.1)" |
| | | } |
| | | }, |
| | | axisLine: { |
| | | show: false |
| | | }, |
| | | axisLabel: { |
| | | show: false |
| | | }, |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业'], |
| | | axisLine: { |
| | | show: false |
| | | }, |
| | | axisTick: { |
| | | show: false |
| | | }, |
| | | |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [54, 77, 97, 141, 191], |
| | | type: 'bar', |
| | | zlevel: 2, |
| | | }, |
| | | { |
| | | data: [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }], |
| | | type: 'bar', |
| | | barGap: '-100%', |
| | | label: { |
| | | show: true, |
| | | color: '#fff', |
| | | position: 'right', // 标签右对齐 |
| | | distance: 5,// 标签距离柱条的距离 |
| | | formatter: params => { |
| | | return params.data.realValue + '个' |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | grid: { |
| | | x: 70, |
| | | y: 10, |
| | | x2: 10, |
| | | y2: 20 |
| | | }, |
| | | } |
| | | |
| | | option && myChart.setOption(option) |
| | | }, |
| | | initEquipmentEcharts () { |
| | | var chartDom = document.getElementById('EquipmentEcharts') |
| | | var myChart = this.$echarts.init(chartDom) |
| | | var option |
| | | var regionTotal = 0 |
| | | let dataArr = [ |
| | | { value: 21438, name: '未知' }, |
| | | { value: 4664, name: '固定枪机' }, |
| | | { value: 310, name: '固定球机' }, |
| | | { value: 279, name: '可控球机' }, |
| | | { value: 241, name: '卡口枪击' }, |
| | | { value: 5, name: '云台枪击' } |
| | | ] |
| | | for (let i = 0; i < dataArr.length; i++) { |
| | | regionTotal += dataArr[i].value |
| | | } |
| | | console.log(regionTotal) |
| | | option = { |
| | | title: { |
| | | show: true, |
| | | text: ['{a|摄像头总数}', `{b|${regionTotal}个}`].join(' '), // 主副标题 |
| | | left: 'left', |
| | | textStyle: { |
| | | rich: { |
| | | a: { |
| | | fontWeight: 'normal', |
| | | fontSize: 16, |
| | | color: '#fff' |
| | | }, |
| | | b: { |
| | | fontSize: 22, |
| | | fontWeight: 'bolder', |
| | | color: '#fff' |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | left: '55%', |
| | | y: '20%', |
| | | itemGap: 10, |
| | | textStyle: { |
| | | color: '#fff' |
| | | }, |
| | | formatter: function (name) { |
| | | let data = option.series[0].data |
| | | let tarValue |
| | | for (let i = 0; i < data.length; i++) { |
| | | if (data[i].name == name) { |
| | | tarValue = data[i].value |
| | | } |
| | | } |
| | | let v = tarValue |
| | | return `${name} ${v} 个 ` |
| | | }, |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | center: ['27%', '57%'], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | | show: false, |
| | | position: 'center' |
| | | }, |
| | | emphasis: { |
| | | label: { |
| | | show: true, |
| | | fontSize: '40', |
| | | fontWeight: 'bold' |
| | | } |
| | | }, |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: dataArr |
| | | } |
| | | ], |
| | | grid: { |
| | | x: 10, |
| | | y: 10, |
| | | x2: 10, |
| | | y2: 20 |
| | | }, |
| | | } |
| | | |
| | | option && myChart.setOption(option) |
| | | }, |
| | | initEventChangeEcharts () { |
| | | var chartDom = document.getElementById('EventChangeEcharts') |
| | | var myChart = this.$echarts.init(chartDom) |
| | | var option |
| | | |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1'] |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: "rgba(0,0,255,0.1)" |
| | | } |
| | | }, |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [0, 1, 0, 2, 0, 1, 0], |
| | | type: 'line' |
| | | } |
| | | ], |
| | | grid: { |
| | | x: 30, |
| | | y: 40, |
| | | x2: 10, |
| | | y2: 20 |
| | | }, |
| | | } |
| | | |
| | | option && myChart.setOption(option) |
| | | |
| | | }, |
| | | initEventCountEcharts () { |
| | | var chartDom = document.getElementById('EventCountEcharts') |
| | | var myChart = this.$echarts.init(chartDom) |
| | | var option |
| | | |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | left: '75%', |
| | | y: '10%', |
| | | itemGap: 25, |
| | | textStyle: { |
| | | color: '#fff' // 图例文字颜色 |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | center: ['40%', '60%'], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | | show: false, |
| | | position: 'center' |
| | | }, |
| | | emphasis: { |
| | | label: { |
| | | show: true, |
| | | fontSize: '40', |
| | | fontWeight: 'bold' |
| | | } |
| | | }, |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: [ |
| | | { value: 4659154, name: '入室盗窃' }, |
| | | { value: 916685, name: '抢劫抢夺' }, |
| | | { value: 916685, name: '汽车被盗' }, |
| | | { value: 916685, name: '交通事故' }, |
| | | { value: 916685, name: '打架斗殴' }, |
| | | { value: 916685, name: '走失人口' } |
| | | ] |
| | | } |
| | | ], |
| | | grid: { |
| | | x: 10, |
| | | y: 10, |
| | | x2: 10, |
| | | y2: 20 |
| | | }, |
| | | } |
| | | |
| | | option && myChart.setOption(option) |
| | | }, |
| | | tableRowClassName () { |
| | | // if ((rowIndex + 1) % 2 === 0) { |
| | | return "aa" |
| | | // } else { |
| | | // return "background:rgba(0,8,1,0.1)" |
| | | // } |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .container { |
| | | color: #fff; |
| | | |
| | | .left-container { |
| | | position: fixed; |
| | | top: 80px; |
| | | left: 0; |
| | | width: 400px; |
| | | height: calc(100% - 80px); |
| | | background: rgba(7, 22, 37, 0.8); |
| | | |
| | | .person-box { |
| | | height: 40%; |
| | | } |
| | | |
| | | .land-box, |
| | | .equipment-box { |
| | | height: 30%; |
| | | } |
| | | } |
| | | |
| | | .right-container { |
| | | position: fixed; |
| | | top: 80px; |
| | | right: 0; |
| | | width: 400px; |
| | | height: calc(100% - 80px); |
| | | background: rgba(7, 22, 37, 0.8); |
| | | |
| | | .case-box { |
| | | height: 30%; |
| | | } |
| | | |
| | | .alert-box, |
| | | .crowd-box { |
| | | height: 35%; |
| | | .el-table__row.statistics-warning-row { |
| | | background: #ff0000; |
| | | } |
| | | } |
| | | ::v-deep .el-table tr:nth-child(2n) { |
| | | background: #03254c; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table tr:nth-child(2n-1) { |
| | | background: #26426a; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table tr:hover td { |
| | | color: #000; |
| | | } |
| | | } |
| | | |
| | | .left-container, |
| | | .right-container { |
| | | .person-box, |
| | | .land-box, |
| | | .equipment-box, |
| | | .case-box, |
| | | .alert-box, |
| | | .crowd-box { |
| | | display: flex; |
| | | flex-direction: column; |
| | | padding: 10px; |
| | | |
| | | .title { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | height: 40px; |
| | | } |
| | | |
| | | .sub-title { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | height: 36px; |
| | | } |
| | | |
| | | .sub-tab { |
| | | display: flex; |
| | | |
| | | .tab { |
| | | margin: 0 10px; |
| | | flex: 1; |
| | | background: rgba(5, 21, 38, 0.8); |
| | | border: 1px solid #fff; |
| | | |
| | | & > div { |
| | | height: 26px; |
| | | line-height: 26px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .echarts-box { |
| | | flex: 1; |
| | | } |
| | | |
| | | .sub-tab + .echarts-box { |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .center-container { |
| | | display: flex; |
| | | position: fixed; |
| | | left: 50%; |
| | | bottom: 80px; |
| | | transform: translate(-50%, 0); |
| | | |
| | | .layers-control-btn { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | margin: 0 10px; |
| | | width: 160px; |
| | | height: 60px; |
| | | background: rgba(7, 22, 37, 0.8); |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:17 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2022-09-19 18:26:27 |
| | | * @LastEditTime: 2022-09-19 18:29:26 |
| | | * @FilePath: \srs-police-affairs\src\views\home\index.vue |
| | | * @Description: 小区-栋-层-房屋 |
| | | * |
| | |
| | | <div class="left-container"> |
| | | <div class="person-box"> |
| | | <div class="title"> |
| | | <div class="one-level">人</div> |
| | | <div class="two-level">现有人员</div> |
| | | <div class="one-level">现有人员</div> |
| | | <!-- <div class="two-level">现有人员</div> --> |
| | | </div> |
| | | |
| | | <div class="sub-title"> |
| | |
| | | </div> |
| | | <div class="land-box"> |
| | | <div class="title"> |
| | | <div class="one-level">地</div> |
| | | <div class="two-level">现有房屋</div> |
| | | <div class="one-level">现有房屋</div> |
| | | <!-- <div class="two-level">现有房屋</div> --> |
| | | </div> |
| | | |
| | | <div class="sub-tab"> |
| | |
| | | </div> |
| | | <div class="equipment-box"> |
| | | <div class="title"> |
| | | <div class="one-level">物</div> |
| | | <div class="two-level">现有设备</div> |
| | | <div class="one-level">现有设备</div> |
| | | <!-- <div class="two-level">现有设备</div> --> |
| | | </div> |
| | | |
| | | <div id="EquipmentEcharts" class="echarts-box"></div> |
| | |
| | | <div class="right-container"> |
| | | <div class="case-box"> |
| | | <div class="title"> |
| | | <div class="one-level">案件动态</div> |
| | | <div class="one-level">警情动态</div> |
| | | <div class="two-level">当前16</div> |
| | | </div> |
| | | |
| | |
| | | </div> |
| | | <div class="alert-box"> |
| | | <div class="title"> |
| | | <div class="one-level">事</div> |
| | | <div class="one-level">警情近一年</div> |
| | | <div class="two-level">历史累计</div> |
| | | </div> |
| | | |
| | |
| | | option = { |
| | | title: { |
| | | show: true, |
| | | text: ['{a|摄像头总数}', '{b|regionTotal个}'].join(' '), // 主副标题 |
| | | text: ['{a|摄像头总数}', `{b|${regionTotal}个}`].join(' '), // 主副标题 |
| | | left: 'left', |
| | | textStyle: { |
| | | rich: { |
| | |
| | | show: false |
| | | }, |
| | | data: [ |
| | | { value: 4659154, name: '警情事件' }, |
| | | { value: 916685, name: '警案事件' }, |
| | | { value: 4659154, name: '入室盗窃' }, |
| | | { value: 916685, name: '抢劫抢夺' }, |
| | | { value: 916685, name: '汽车被盗' }, |
| | | { value: 916685, name: '交通事故' }, |
| | | { value: 916685, name: '打架斗殴' }, |
| | | { value: 916685, name: '走失人口' } |
| | | ] |
| | | } |
| | | ], |
| | |
| | | |
| | | option && myChart.setOption(option) |
| | | }, |
| | | <<<<<<< HEAD |
| | | tableRowClassName () { |
| | | // if ((rowIndex + 1) % 2 === 0) { |
| | | return "aa" |
| | |
| | | }) |
| | | } |
| | | } |
| | | ======= |
| | | >>>>>>> 0296d220b566f61bbedd8f422bbf3f03b5641a47 |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style scoped lang="scss"> |
| | | .container { |
| | | color: #fff; |
| | | ::v-deep .el-table tr:nth-child(2n) { |
| | | background: #03254c; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table tr:nth-child(2n-1) { |
| | | background: #26426a; |
| | | color: #fff; |
| | | } |
| | | |
| | | .left-container { |
| | | position: fixed; |
| | | top: 80px; |
| | |
| | | background: #ff0000; |
| | | } |
| | | } |
| | | ::v-deep .el-table tr:nth-child(2n) { |
| | | background: #03254c; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table tr:nth-child(2n-1) { |
| | | background: #26426a; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table tr:hover td { |
| | | color: #000; |
| | | } |
| | | } |
| | | |
| | | .left-container, |
| | |
| | | <div class="business-content"></div> |
| | | </div> |
| | | |
| | | <div class="police-info" v-show="navType == 1"></div> |
| | | <div class="police-info" v-show="navType == 1"> |
| | | <el-table |
| | | :data="arr" |
| | | style="width: 100%" |
| | | :header-cell-style="{'text-align':'center','background-color':'#00204f','borderColor':'#073365'}" |
| | | :cell-style="{'text-align':'center','borderColor':'#073365'}" |
| | | :row-class-name="tableRowClassName" |
| | | @row-click="clickData" |
| | | > |
| | | <el-table-column prop="name" label="名称" width="130"></el-table-column> |
| | | <el-table-column prop="time" label="时间" width="150"></el-table-column> |
| | | <el-table-column prop="type" label="类别" width="120"></el-table-column> |
| | | </el-table> |
| | | <el-dialog |
| | | title="详细信息" |
| | | :visible.sync="dialogVisible" |
| | | width="30%" |
| | | :before-close="handleClose" |
| | | > |
| | | <ul> |
| | | <li v-for="(value,key) in JWdetails" :key="key">{{key}}---------{{value}}</li> |
| | | </ul> |
| | | <span slot="footer" class="dialog-footer"></span> |
| | | </el-dialog> |
| | | </div> |
| | | |
| | | <div class="warning-info" v-show="navType == 2"></div> |
| | | </div> |
| | |
| | | data () { |
| | | return { |
| | | searchHouse: '', |
| | | navType: 0 |
| | | navType: 0, |
| | | arr: [{ 'name': '物品遗失', 'time': '2022-1-2', 'type': '入室盗窃', '属性1': '值1', '属性2': '值2', '属性3': '值3', '属性4': '值4', '属性5': '值5' }, { 'name': '连环追尾', 'time': '2022-2-3', 'type': '交通事故', '属性1': '值1', '属性2': '值2', '属性3': '值3', '属性4': '值4', '属性5': '值5' }, { 'name': '打群架', 'time': '2022-3-4', 'type': '打架斗殴', '属性1': '值1', '属性2': '值2', '属性3': '值3', '属性4': '值4', '属性5': '值5' }], |
| | | dialogVisible: false, |
| | | JWdetails: {}, |
| | | |
| | | } |
| | | }, |
| | |
| | | methods: { |
| | | navClick (e) { |
| | | this.navType = e.target.dataset.type |
| | | } |
| | | }, |
| | | tableRowClassName ({ row, rowIndex }) { |
| | | row.index = rowIndex |
| | | return 'rows' |
| | | }, |
| | | clickData (row) { |
| | | this.dialogVisible = true |
| | | this.JWdetails = this.arr[row.index] |
| | | }, |
| | | |
| | | } |
| | | } |
| | | </script> |
| | |
| | | height: 100%; |
| | | color: #fff; |
| | | background: rgba(7, 22, 37, 0.8); |
| | | li { |
| | | list-style: none; |
| | | } |
| | | |
| | | .search-box { |
| | | padding: 0 10px; |
| | |
| | | height: 40px; |
| | | line-height: 40px; |
| | | border-bottom: 1px solid #33566c; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | } |
| | | .police-info { |
| | | ::v-deep .el-table tr:nth-child(2n) { |
| | | background: #03254c; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table tr:nth-child(2n-1) { |
| | | background: #26426a; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table tr:hover td { |
| | | color: #000; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="carID" label="车牌号" width="80"></el-table-column> |
| | | <el-table-column prop="carType" label="警车类型" width="80"></el-table-column> |
| | | <el-table-column prop="position" label="经纬度"></el-table-column> |
| | | <el-table-column prop="carType" label="警车类型"></el-table-column> |
| | | <!-- <el-table-column prop="position" label="经纬度"></el-table-column> --> |
| | | </el-table> |
| | | </div> |
| | | <div class="pages"> |
| | |
| | | console.log(this.currentPage) //点击第几页 |
| | | }, |
| | | getData () { |
| | | for (let i = 0; i < 100; i++) { |
| | | let lng = 120.381058 + Math.random() * 0.5 |
| | | let lat = 31.101156 + Math.random() * 0.5 |
| | | for (let i = 0; i < 5; i++) { |
| | | // let lng = 120.381058 + Math.random() * 0.5 |
| | | // let lat = 31.101156 + Math.random() * 0.5 |
| | | let carNum = Math.random() * 5000000 + '' |
| | | this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` }) |
| | | // this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` }) |
| | | this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众" }) |
| | | } |
| | | for (let i = 0; i < 100; i++) { |
| | | for (let i = 0; i < 5; i++) { |
| | | let phoneNum = Math.random() * 500000000 + '' |
| | | this.arr2.push({ "phoneID": `${phoneNum.slice(0, 8)}`, "phoneType": "华为" }) |
| | | } |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="carID" label="车牌号" width="80"></el-table-column> |
| | | <el-table-column prop="carType" label="警车类型" width="80"></el-table-column> |
| | | <el-table-column prop="position" label="经纬度"></el-table-column> |
| | | <el-table-column prop="carType" label="警车类型"></el-table-column> |
| | | <!-- <el-table-column prop="position" label="经纬度"></el-table-column> --> |
| | | </el-table> |
| | | </div> |
| | | <div class="pages"> |
| | |
| | | console.log(this.currentPage) //点击第几页 |
| | | }, |
| | | getData () { |
| | | for (let i = 0; i < 100; i++) { |
| | | let lng = 120.381058 + Math.random() * 0.5 |
| | | let lat = 31.101156 + Math.random() * 0.5 |
| | | for (let i = 0; i < 5; i++) { |
| | | // let lng = 120.381058 + Math.random() * 0.5 |
| | | // let lat = 31.101156 + Math.random() * 0.5 |
| | | let carNum = Math.random() * 5000000 + '' |
| | | this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` }) |
| | | // this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` }) |
| | | this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众" }) |
| | | } |
| | | }, |
| | | } |