5 files modified
3 files added
| | |
|---|
| | | }, |
|---|
| | | component: activity |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | // { |
|---|
| | |
|---|
| | | margin: 0 !important; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 520px; |
|---|
| | | height: 560px; |
|---|
| | | width: 750px; |
|---|
| | | height: 580px; |
|---|
| | | top: 50%; |
|---|
| | | left: 50% !important; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | |
|---|
| | | *{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:520px;height:560px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1} |
|---|
| | | *{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:750px;height:580px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1} |
|---|
| | |
|---|
| | | margin: 0 !important; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 520px; |
|---|
| | | height: 560px; |
|---|
| | | width: 750px; |
|---|
| | | height: 580px; |
|---|
| | | top: 50%; |
|---|
| | | left: 50% !important; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="container"> |
|---|
| | | <div class="header"> |
|---|
| | | <div class="bottomTitle"> |
|---|
| | | <div class="leftBor"></div> |
|---|
| | | <div class="topName">警情动态</div> |
|---|
| | | <div class="rightBor"></div> |
|---|
| | | </div> |
|---|
| | | <div class="timeTab"> |
|---|
| | | <span class="beforetime" :class="{choosed:timetype==0}" @click="timeTabClick(0)">近一周</span> |
|---|
| | | <span>/</span> |
|---|
| | | <span class="beforetime" :class="{choosed:timetype==1}" @click="timeTabClick(1)">近一月</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="body" ref="tableBox"> |
|---|
| | | <el-table |
|---|
| | | :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" |
|---|
| | | :cell-style="{'text-align':'center','borderColor':'#324e75'}" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | :height="currentTableHeight" |
|---|
| | | > |
|---|
| | | <el-table-column prop="num" label="序号"></el-table-column> |
|---|
| | | <el-table-column prop="type" label="警情类别"></el-table-column> |
|---|
| | | <el-table-column prop="comingPhone" label="报警电话"></el-table-column> |
|---|
| | | <el-table-column prop="dealTime" label="接警时间"></el-table-column> |
|---|
| | | <el-table-column prop="dealPolice" label="经办民警"></el-table-column> |
|---|
| | | <el-table-column prop="callPeople" label="报警人"></el-table-column> |
|---|
| | | <el-table-column prop="callPhone" label="报警人联系人"></el-table-column> |
|---|
| | | <el-table-column prop="callContent" label="报警内容"></el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let interTime |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | timetype: 0, |
|---|
| | | pliceSituationWeekArr: [ |
|---|
| | | { 'num': '1', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '2', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | ], |
|---|
| | | pliceSituationMouthArr: [ |
|---|
| | | { 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '2', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | ], |
|---|
| | | currentTableHeight: 0, |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted () { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.tableScroll() |
|---|
| | | this.setDomStyle() |
|---|
| | | }) |
|---|
| | | |
|---|
| | | window.addEventListener('resize', this.setDomStyle) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | methods: { |
|---|
| | | timeTabClick (type) { |
|---|
| | | this.timetype = type |
|---|
| | | }, |
|---|
| | | setDomStyle () { |
|---|
| | | this.currentTableHeight = this.$refs.tableBox.offsetHeight |
|---|
| | | }, |
|---|
| | | tableScroll () { |
|---|
| | | // 拿到表格挂载后的真实DOM |
|---|
| | | const divData = this.$refs.tableBox.querySelector('.el-table__body-wrapper') |
|---|
| | | // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素) |
|---|
| | | interTime = setInterval(() => { |
|---|
| | | // 元素自增距离顶部1像素 |
|---|
| | | divData.scrollTop += 1 |
|---|
| | | // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
|---|
| | | if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) { |
|---|
| | | // 重置table距离顶部距离 |
|---|
| | | divData.scrollTop = 0 |
|---|
| | | } |
|---|
| | | }, 100) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | destroyed () { |
|---|
| | | window.addEventListener('resize', this.setDomStyle) |
|---|
| | | clearInterval(interTime) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .container { |
|---|
| | | position: relative; |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | .header { |
|---|
| | | width: 100%; |
|---|
| | | height: 36px; |
|---|
| | | |
|---|
| | | .bottomTitle { |
|---|
| | | display: flex; |
|---|
| | | float: left; |
|---|
| | | width: 34%; |
|---|
| | | margin-left: 33%; |
|---|
| | | height: 36px; |
|---|
| | | line-height: 36px; |
|---|
| | | color: #fff; |
|---|
| | | text-align: center; |
|---|
| | | |
|---|
| | | .leftBor { |
|---|
| | | width: 0px; |
|---|
| | | height: 0px; |
|---|
| | | border: 18px solid #3366e2; |
|---|
| | | border-bottom-color: transparent; |
|---|
| | | border-left-color: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rightBor { |
|---|
| | | width: 0px; |
|---|
| | | height: 0px; |
|---|
| | | border: 18px solid #3366e2; |
|---|
| | | border-bottom-color: transparent; |
|---|
| | | border-right-color: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .topName { |
|---|
| | | width: calc(100% - 48px); |
|---|
| | | background-color: #3366e2; |
|---|
| | | letter-spacing: 2px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .timeTab { |
|---|
| | | float: right; |
|---|
| | | width: 20%; |
|---|
| | | height: 36px; |
|---|
| | | line-height: 36px; |
|---|
| | | .beforetime { |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .beforetime:hover { |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| | | .choosed { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .body { |
|---|
| | | margin: 10px; |
|---|
| | | width: calc(100% - 20px); |
|---|
| | | height: calc(100% - 56px); |
|---|
| | | |
|---|
| | | /* 解决自定义滚动条 x 轴显示问题 */ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="container"> |
|---|
| | | <div class="person-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> |
|---|
| | | <span |
|---|
| | | class="peopleTap" |
|---|
| | | :class="{choosed:peopletype == 0}" |
|---|
| | | @click="peopleTabClick(0)" |
|---|
| | | >现有人员</span> |
|---|
| | | <span>/</span> |
|---|
| | | <span |
|---|
| | | class="peopleTap" |
|---|
| | | :class="{choosed:peopletype == 1}" |
|---|
| | | @click="peopleTabClick(1)" |
|---|
| | | >重点人员</span> |
|---|
| | | <span class="word before">共</span> |
|---|
| | | <span class="peopleNum" :class="{choosed:peopletype == 0}">100</span> |
|---|
| | | <span class="word">/</span> |
|---|
| | | <span class="peopleNum" :class="{choosed:peopletype == 1}">1</span> |
|---|
| | | <span class="word">人</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="sub-tab" v-show="peopletype == 0"> |
|---|
| | | <div class="tab" :class="{on:tabType==0}" @click="personTabClick(0)"> |
|---|
| | | <div class="num">164.57万人</div> |
|---|
| | | <div class="type">户籍人口</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabType==1}" @click="personTabClick(1)"> |
|---|
| | | <div class="num">17.52万人</div> |
|---|
| | | <div class="type">流动人口</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabType==2}" @click="personTabClick(2)"> |
|---|
| | | <div class="num">91995人</div> |
|---|
| | | <div class="type">境外人口</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div> |
|---|
| | | <div class="peopleTable" v-show="peopletype == 1"> |
|---|
| | | <el-table |
|---|
| | | :data="peopleArr" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" |
|---|
| | | :cell-style="{'text-align':'center','borderColor':'#324e75'}" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | > |
|---|
| | | <el-table-column prop="name" label="姓名" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="sex" label="性别" width="50"></el-table-column> |
|---|
| | | <el-table-column prop="age" label="年龄" width="50"></el-table-column> |
|---|
| | | <el-table-column prop="address" label="地址"></el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="house-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 现有房屋 |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="sub-tab"> |
|---|
| | | <div class="tab" :class="{on:tabTypeTwo==0}" @click="houseTabClick(0)"> |
|---|
| | | <div class="num">1822603户</div> |
|---|
| | | <div class="num">实有房屋</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabTypeTwo==1}" @click="houseTabClick(1)"> |
|---|
| | | <div class="num">634个</div> |
|---|
| | | <div class="num">关注场所</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="houseEcharts" class="echarts-box"></div> |
|---|
| | | </div> |
|---|
| | | <div class="land-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 现有地 |
|---|
| | | </div> |
|---|
| | | <div class="sub-tab"> |
|---|
| | | <div class="tab" :class="{on:tabTypeThree==0}" @click="landTabClick(0)"> |
|---|
| | | <div class="num">634个</div> |
|---|
| | | <div class="num">小区</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabTypeThree==1}" @click="landTabClick(1)"> |
|---|
| | | <div class="num">634个</div> |
|---|
| | | <div class="num">责任区</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="landEcharts" class="echarts-box"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let homePersonmyChart |
|---|
| | | let houseMyChart |
|---|
| | | let landMyChart |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | tabType: 0, |
|---|
| | | peopletype: 0, |
|---|
| | | tabTypeTwo: 0, |
|---|
| | | tabTypeThree: 0, |
|---|
| | | peopleArr: [ |
|---|
| | | { 'name': '黄XX', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' }, |
|---|
| | | { 'name': '李某某', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' }, |
|---|
| | | { 'name': '刘AA', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' }, |
|---|
| | | { 'name': '张三', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' } |
|---|
| | | ], |
|---|
| | | peopleTitle: '', |
|---|
| | | peopleVisible: false, |
|---|
| | | landDetailArr1: [ |
|---|
| | | { 'housingEastate': '阳光小区', 'location': 'XXXXXXXX', 'area': '2122亩', 'superintendent': '王大壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '美丽小区', 'location': 'XXXXXXXX', 'area': '1335亩', 'superintendent': '王二壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '快乐小区', 'location': 'XXXXXXXX', 'area': '4122亩', 'superintendent': '王三壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '健康小区', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '斯哒地小区', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' }, |
|---|
| | | ], |
|---|
| | | landDetailArr2: [ |
|---|
| | | { 'housingEastate': '责任区1', 'location': 'XXXXXXXX', 'area': '2122亩', 'superintendent': '王大壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区2', 'location': 'XXXXXXXX', 'area': '1335亩', 'superintendent': '王二壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区3', 'location': 'XXXXXXXX', 'area': '4122亩', 'superintendent': '王三壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区4', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区5', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted () { |
|---|
| | | this.initLandEcharts() |
|---|
| | | this.initPersonEcharts() |
|---|
| | | this.inithouseEcharts() |
|---|
| | | this.clickPeopleChart() |
|---|
| | | this.clickLandChart() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initPersonEcharts () { |
|---|
| | | var chartDom = document.getElementById('PersonEcharts') |
|---|
| | | homePersonmyChart = this.$echarts.init(chartDom) |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232])) |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | homePersonmyChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initPersonOptions (xDate, yDate) { |
|---|
| | | return { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: xDate, |
|---|
| | | |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff", |
|---|
| | | interval: 0, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: yDate, |
|---|
| | | type: 'bar', |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | textStyle: { |
|---|
| | | color: '#1a94a8', |
|---|
| | | fontSize: 16 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 40, |
|---|
| | | y: 10, |
|---|
| | | x2: 20, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | personTabClick (type) { |
|---|
| | | this.tabType = type |
|---|
| | | |
|---|
| | | let xDate, yDate |
|---|
| | | |
|---|
| | | if (type == 0) { |
|---|
| | | xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'] |
|---|
| | | yDate = [881, 2211, 6414, 4321, 1232] |
|---|
| | | } else if (type == 1) { |
|---|
| | | xDate = ['湖北', '上海', '北京', '广东', '浙江'] |
|---|
| | | yDate = [6414, 4231, 2211, 1231, 881] |
|---|
| | | } else if (type == 2) { |
|---|
| | | xDate = ['日本', '美国', '俄罗斯', '英国', '印度'] |
|---|
| | | yDate = [881, 1231, 2211, 4321, 6414] |
|---|
| | | } |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | 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 }])) |
|---|
| | | |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | houseMyChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initHouseOptions (xDate, y1Date, y2Date) { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | color: ['#2967c4', '#112d54'], |
|---|
| | | xAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: xDate, |
|---|
| | | axisLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: y1Date, |
|---|
| | | type: 'bar', |
|---|
| | | zlevel: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | data: y2Date, |
|---|
| | | type: 'bar', |
|---|
| | | barGap: '-100%', |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | color: '#fff', |
|---|
| | | position: 'right', // 标签右对齐 |
|---|
| | | distance: 0,// 标签距离柱条的距离 |
|---|
| | | formatter: params => { |
|---|
| | | return params.data.realValue + '个' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 70, |
|---|
| | | y: 10, |
|---|
| | | x2: 10, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | houseTabClick (type) { |
|---|
| | | this.tabTypeTwo = type |
|---|
| | | |
|---|
| | | let xDate, y1Date, y2Date |
|---|
| | | |
|---|
| | | if (type == 0) { |
|---|
| | | xDate = ['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑'] |
|---|
| | | y1Date = [88188, 1222211, 464104, 43201, 12302] |
|---|
| | | y2Date = [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }] |
|---|
| | | } else { |
|---|
| | | xDate = ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业'] |
|---|
| | | y1Date = [54, 77, 97, 141, 191] |
|---|
| | | y2Date = [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }] |
|---|
| | | } |
|---|
| | | houseMyChart.setOption(this.initHouseOptions(xDate, y1Date, y2Date), true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initLandEcharts () { |
|---|
| | | var chartDom = document.getElementById('landEcharts') |
|---|
| | | landMyChart = this.$echarts.init(chartDom) |
|---|
| | | landMyChart.setOption(this.initLandOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [6414, 2211, 4321, 1232, 881])) |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | landMyChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initLandOptions (xDate, yDate) { |
|---|
| | | return { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: xDate, |
|---|
| | | |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff", |
|---|
| | | interval: 0, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: yDate, |
|---|
| | | type: 'bar', |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | textStyle: { |
|---|
| | | color: '#1a94a8', |
|---|
| | | fontSize: 16 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 40, |
|---|
| | | y: 10, |
|---|
| | | x2: 20, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | landTabClick (type) { |
|---|
| | | this.tabTypeThree = type |
|---|
| | | let xDate, yDate |
|---|
| | | |
|---|
| | | if (type == 0) { |
|---|
| | | xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'] |
|---|
| | | yDate = [6414, 2211, 4321, 1232, 881] |
|---|
| | | } else if (type == 1) { |
|---|
| | | xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'] |
|---|
| | | yDate = [881, 2211, 6414, 4321, 1232] |
|---|
| | | } |
|---|
| | | |
|---|
| | | landMyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | peopleTabClick (type) { |
|---|
| | | this.peopletype = type |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clickPeopleChart () { |
|---|
| | | homePersonmyChart.on('click', params => { |
|---|
| | | let xDate, yDate |
|---|
| | | //户籍人口 |
|---|
| | | if (params.name == '车站派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [88, 221, 641, 432, 123] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '沙溪派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [641, 423, 221, 123, 88] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '灵溪派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [111, 531, 211, 431, 64] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '北门派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [887, 234, 452, 321, 154] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '江光派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [400, 500, 200, 450, 245] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '湖北') { |
|---|
| | | xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市'] |
|---|
| | | yDate = [88, 221, 641, 432, 123] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '上海') { |
|---|
| | | xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区'] |
|---|
| | | yDate = [641, 423, 221, 123, 88] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '北京') { |
|---|
| | | xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区'] |
|---|
| | | yDate = [111, 531, 211, 431, 64] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '广东') { |
|---|
| | | xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市'] |
|---|
| | | yDate = [887, 234, 452, 321, 154] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '浙江') { |
|---|
| | | xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市'] |
|---|
| | | yDate = [400, 300, 200, 450, 245] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '日本') { |
|---|
| | | xDate = ['东京都', '北海道', '大阪府', '京都府', '43县'] |
|---|
| | | yDate = [88, 221, 641, 432, 123] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '美国') { |
|---|
| | | xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州'] |
|---|
| | | yDate = [641, 423, 221, 123, 88] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '俄罗斯') { |
|---|
| | | xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦'] |
|---|
| | | yDate = [111, 531, 211, 431, 64] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '英国') { |
|---|
| | | xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰'] |
|---|
| | | yDate = [887, 234, 452, 321, 154] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '印度') { |
|---|
| | | xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦'] |
|---|
| | | yDate = [400, 300, 200, 450, 245] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else { |
|---|
| | | this.$emit('showpeopledetail', params.name) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clickLandChart () { |
|---|
| | | landMyChart.on('click', params => { |
|---|
| | | this.landVisible = true |
|---|
| | | this.landTitle = params.name |
|---|
| | | if (this.tabTypeThree == 0) { |
|---|
| | | this.$emit('showlanddetail', params.name, this.landDetailArr1) |
|---|
| | | } else { |
|---|
| | | this.$emit('showlanddetail', params.name, this.landDetailArr2) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .container { |
|---|
| | | position: relative; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | .person-box { |
|---|
| | | height: 35%; |
|---|
| | | .peopleTap { |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .peopleTap:hover { |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| | | .choosed { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | .peopleNum { |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | .word { |
|---|
| | | color: #fff; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | .before { |
|---|
| | | margin-left: 108px; |
|---|
| | | } |
|---|
| | | .peopleTable { |
|---|
| | | height: calc(100% - 40px); |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .house-box { |
|---|
| | | height: 30%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .land-box { |
|---|
| | | height: 35%; |
|---|
| | | } |
|---|
| | | .person-box, |
|---|
| | | .house-box, |
|---|
| | | .land-box { |
|---|
| | | .title { |
|---|
| | | padding: 0 18px; |
|---|
| | | position: relative; |
|---|
| | | text-align: left; |
|---|
| | | height: 40px; |
|---|
| | | line-height: 40px; |
|---|
| | | font-size: 20px; |
|---|
| | | |
|---|
| | | i { |
|---|
| | | position: absolute; |
|---|
| | | top: 6px; |
|---|
| | | left: 0; |
|---|
| | | width: 8px; |
|---|
| | | height: 28px; |
|---|
| | | border-radius: 4px; |
|---|
| | | background: #43bafe; |
|---|
| | | box-shadow: 0px 0px 8px 2px #43bafe; |
|---|
| | | } |
|---|
| | | .choosed { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-title { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | height: 36px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-tab { |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | .tab { |
|---|
| | | margin: 0 10px; |
|---|
| | | flex: 1; |
|---|
| | | background: rgba(29, 38, 105, 1); |
|---|
| | | border: 1px solid rgba(20, 50, 123, 1); |
|---|
| | | cursor: pointer; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | height: 26px; |
|---|
| | | line-height: 26px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tab.on { |
|---|
| | | border: 1px solid rgb(3, 108, 255); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .echarts-box { |
|---|
| | | flex: 1; |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 104px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-tab + .echarts-box { |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | :deep(.el-table__body-wrapper) { |
|---|
| | | overflow-x: hidden !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="container"> |
|---|
| | | <div class="case-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 案件统计 |
|---|
| | | <div class="timer"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="eventTime" |
|---|
| | | type="daterange" |
|---|
| | | align="right" |
|---|
| | | unlink-panels |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | ></el-date-picker> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> |
|---|
| | | <span style="margin-right:130px">安保活动</span> |
|---|
| | | <span class="activity" :class="{choosed:acttype==0}" @click="actTabClick(0)">正在进行</span> |
|---|
| | | <span>/</span> |
|---|
| | | <span class="activity" :class="{choosed:acttype==1}" @click="actTabClick(1)">历史活动</span> |
|---|
| | | </div> |
|---|
| | | <div id="peopleList" class="echarts-box"> |
|---|
| | | <el-table |
|---|
| | | :data="acttype == 0 ? underwayArr : historyArr" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" |
|---|
| | | :cell-style="{'text-align':'center','borderColor':'#324e75'}" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | > |
|---|
| | | <el-table-column prop="activityName" label="活动名称" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="scale" label="规模"></el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="crowd-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 现有设备 |
|---|
| | | <span class="regionTotal">{{regionTotal}}个</span> |
|---|
| | | </div> |
|---|
| | | <div id="EquipmentEcharts" class="echarts-box"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let equipmentmyChart |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | eventTime: '', |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: '最近一周', |
|---|
| | | onClick (picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: '最近一个月', |
|---|
| | | onClick (picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: '最近三个月', |
|---|
| | | onClick (picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | regionTotal: 0, |
|---|
| | | acttype: 0, |
|---|
| | | timetype: 0, |
|---|
| | | underwayArr: [ |
|---|
| | | { 'activityName': '进行活动1', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动2', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动3', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动4', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动5', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000' } |
|---|
| | | ], |
|---|
| | | historyArr: [ |
|---|
| | | { 'activityName': '历史活动1', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动2', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动3', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动4', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动5', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000' } |
|---|
| | | ], |
|---|
| | | carArr: [ |
|---|
| | | { 'carID': '#11111', 'carType': '大众', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#22222', 'carType': '宝马', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#33333', 'carType': '奔驰', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'carID': '#44444', 'carType': '红旗', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'carID': '#55555', 'carType': '大众', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#66666', 'carType': '宝马', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#77777', 'carType': '奔驰', 'policeStation': '沙溪派出所', 'area': '责任区2' }, |
|---|
| | | { 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2' } |
|---|
| | | ], |
|---|
| | | phoneArr: [ |
|---|
| | | { 'phoneID': '188XXX11111', 'phoneType': '魅族', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX22222', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX33333', 'phoneType': '一加', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'phoneID': '188XXX44444', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'phoneID': '188XXX55555', 'phoneType': '三星', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX66666', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX77777', 'phoneType': '小米', 'policeStation': '沙溪派出所', 'area': '责任区2' }, |
|---|
| | | { 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2' } |
|---|
| | | ], |
|---|
| | | recorderArr: [ |
|---|
| | | { 'recorderID': 'ABC111', 'recorderType': '爱国者', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC222', 'recorderType': '百步通', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC333', 'recorderType': '飞利浦', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'recorderID': 'ABC444', 'recorderType': '途强', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'recorderID': 'ABC555', 'recorderType': '执法鹰眼', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC666', 'recorderType': '致业', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC777', 'recorderType': '联想', 'policeStation': '沙溪派出所', 'area': '责任区2' }, |
|---|
| | | { 'recorderID': 'ABC888', 'recorderType': '高新兴', 'policeStation': '沙溪派出所', 'area': '责任区2' } |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted () { |
|---|
| | | this.initEquipmentEcharts() |
|---|
| | | this.initEventChangeEcharts() |
|---|
| | | this.clickEquimentChart() |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | actTabClick (type) { |
|---|
| | | this.acttype = type |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initEquipmentEcharts () { |
|---|
| | | var chartDom = document.getElementById('EquipmentEcharts') |
|---|
| | | equipmentmyChart = this.$echarts.init(chartDom) |
|---|
| | | var option |
|---|
| | | let dataArr = [ |
|---|
| | | { value: 4664, name: '车辆' }, |
|---|
| | | { value: 310, name: '摄像头' }, |
|---|
| | | { value: 279, name: '执法记录仪' }, |
|---|
| | | { value: 241, name: '手台' }, |
|---|
| | | ] |
|---|
| | | for (let i = 0; i < dataArr.length; i++) { |
|---|
| | | this.regionTotal += dataArr[i].value |
|---|
| | | } |
|---|
| | | option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | left: '60%', |
|---|
| | | y: '25%', |
|---|
| | | itemGap: 20, |
|---|
| | | 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: '', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | center: ['27%', '57%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: 'center' |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: dataArr |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 10, |
|---|
| | | y: 10, |
|---|
| | | x2: 10, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | option && equipmentmyChart.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'], |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [10, 9, 12, 6, 4, 14, 8], |
|---|
| | | type: 'line' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 30, |
|---|
| | | y: 40, |
|---|
| | | x2: 10, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | option && myChart.setOption(option) |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clickEquimentChart () { |
|---|
| | | equipmentmyChart.on('click', params => { |
|---|
| | | // this.monitorContent = false |
|---|
| | | // this.othersContent = true |
|---|
| | | // this.$emit('showequimentdetail', params.name, this.monitorContent, this.othersContent,showBooleanArr,showArr) |
|---|
| | | this.$emit('showequimentdetail', params.name, false, true, [false, false, false], []) |
|---|
| | | // this.equimentTitle = params.name |
|---|
| | | // this.equimentVisible = true |
|---|
| | | |
|---|
| | | if (params.name == '摄像头') { |
|---|
| | | // this.othersContent = false |
|---|
| | | // this.monitorContent = true |
|---|
| | | this.$emit('showequimentdetail', params.name, true, false, [false, false, false], []) |
|---|
| | | } else if (params.name == '手台') { |
|---|
| | | // this.recorderArrShow = false |
|---|
| | | // this.carArrShow = false |
|---|
| | | // this.phoneArrShow = true |
|---|
| | | // this.saveArr = this.phoneArr |
|---|
| | | // this.showArr = this.saveArr |
|---|
| | | this.$emit('showequimentdetail', params.name, false, true, [false, false, true], this.phoneArr) |
|---|
| | | } else if (params.name == '车辆') { |
|---|
| | | // this.recorderArrShow = false |
|---|
| | | // this.carArrShow = true |
|---|
| | | // this.phoneArrShow = false |
|---|
| | | // this.saveArr = this.carArr |
|---|
| | | // this.showArr = this.saveArr |
|---|
| | | this.$emit('showequimentdetail', params.name, false, true, [false, true, false], this.carArr) |
|---|
| | | } else if (params.name == '执法记录仪') { |
|---|
| | | // this.recorderArrShow = true |
|---|
| | | // this.carArrShow = false |
|---|
| | | // this.phoneArrShow = false |
|---|
| | | // this.saveArr = this.recorderArr |
|---|
| | | // this.showArr = this.saveArr |
|---|
| | | this.$emit('showequimentdetail', params.name, false, true, [true, false, false], this.recorderArr) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .container { |
|---|
| | | position: relative; |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | .case-box { |
|---|
| | | height: 30%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .alert-box, |
|---|
| | | .crowd-box { |
|---|
| | | height: 35%; |
|---|
| | | |
|---|
| | | .echarts-box { |
|---|
| | | overflow-x: hidden; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .case-box, |
|---|
| | | .alert-box, |
|---|
| | | .crowd-box { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | padding: 0 10px; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | padding: 0 18px; |
|---|
| | | position: relative; |
|---|
| | | text-align: left; |
|---|
| | | height: 40px; |
|---|
| | | line-height: 40px; |
|---|
| | | font-size: 20px; |
|---|
| | | |
|---|
| | | i { |
|---|
| | | position: absolute; |
|---|
| | | top: 6px; |
|---|
| | | left: 0; |
|---|
| | | width: 8px; |
|---|
| | | height: 28px; |
|---|
| | | border-radius: 4px; |
|---|
| | | background: #43bafe; |
|---|
| | | box-shadow: 0px 0px 8px 2px #43bafe; |
|---|
| | | } |
|---|
| | | .timer { |
|---|
| | | width: 250px; |
|---|
| | | height: 30px; |
|---|
| | | float: right; |
|---|
| | | } |
|---|
| | | .regionTotal { |
|---|
| | | color: #fff; |
|---|
| | | font-size: 22px; |
|---|
| | | font-weight: 700; |
|---|
| | | margin-left: 50%; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | } |
|---|
| | | .activity { |
|---|
| | | font-size: 16px; |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .activity:hover { |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| | | .choosed { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-title { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | height: 36px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-tab { |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | .tab { |
|---|
| | | margin: 0 10px; |
|---|
| | | flex: 1; |
|---|
| | | background: rgba(29, 38, 105, 1); |
|---|
| | | border: 1px solid rgba(20, 50, 123, 1); |
|---|
| | | cursor: pointer; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | height: 26px; |
|---|
| | | line-height: 26px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tab.on { |
|---|
| | | border: 1px solid rgb(3, 108, 255); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .echarts-box { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-tab + .echarts-box { |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #peopleList { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="container"> |
|---|
| | | <div class="left-container"> |
|---|
| | | <div class="person-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> |
|---|
| | | <span |
|---|
| | | class="peopleTap" |
|---|
| | | :class="{choosed:peopletype == 0}" |
|---|
| | | @click="peopleTabClick(0)" |
|---|
| | | >现有人员</span> |
|---|
| | | <span>/</span> |
|---|
| | | <span |
|---|
| | | class="peopleTap" |
|---|
| | | :class="{choosed:peopletype == 1}" |
|---|
| | | @click="peopleTabClick(1)" |
|---|
| | | >重点人员</span> |
|---|
| | | <span class="word before">共</span> |
|---|
| | | <span class="peopleNum" :class="{choosed:peopletype == 0}">100</span> |
|---|
| | | <span class="word">/</span> |
|---|
| | | <span class="peopleNum" :class="{choosed:peopletype == 1}">1</span> |
|---|
| | | <span class="word">人</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="sub-tab" v-show="peopletype == 0"> |
|---|
| | | <div class="tab" :class="{on:tabType==0}" @click="personTabClick(0)"> |
|---|
| | | <div class="num">164.57万人</div> |
|---|
| | | <div class="type">户籍人口</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabType==1}" @click="personTabClick(1)"> |
|---|
| | | <div class="num">17.52万人</div> |
|---|
| | | <div class="type">流动人口</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabType==2}" @click="personTabClick(2)"> |
|---|
| | | <div class="num">91995人</div> |
|---|
| | | <div class="type">境外人口</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div> |
|---|
| | | <div class="peopleTable" v-show="peopletype == 1"> |
|---|
| | | <el-table |
|---|
| | | :data="peopleArr" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" |
|---|
| | | :cell-style="{'text-align':'center','borderColor':'#324e75'}" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | > |
|---|
| | | <el-table-column prop="name" label="姓名" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="sex" label="性别" width="50"></el-table-column> |
|---|
| | | <el-table-column prop="age" label="年龄" width="50"></el-table-column> |
|---|
| | | <el-table-column prop="address" label="地址"></el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="house-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 现有房屋 |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="sub-tab"> |
|---|
| | | <div class="tab" :class="{on:tabTypeTwo==0}" @click="houseTabClick(0)"> |
|---|
| | | <div class="num">1822603户</div> |
|---|
| | | <div class="num">实有房屋</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabTypeTwo==1}" @click="houseTabClick(1)"> |
|---|
| | | <div class="num">634个</div> |
|---|
| | | <div class="num">关注场所</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="houseEcharts" class="echarts-box"></div> |
|---|
| | | </div> |
|---|
| | | <div class="land-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 现有地 |
|---|
| | | </div> |
|---|
| | | <div class="sub-tab"> |
|---|
| | | <div class="tab" :class="{on:tabTypeThree==0}" @click="landTabClick(0)"> |
|---|
| | | <div class="num">634个</div> |
|---|
| | | <div class="num">小区</div> |
|---|
| | | </div> |
|---|
| | | <div class="tab" :class="{on:tabTypeThree==1}" @click="landTabClick(1)"> |
|---|
| | | <div class="num">634个</div> |
|---|
| | | <div class="num">责任区</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="landEcharts" class="echarts-box"></div> |
|---|
| | | <!-- <div id="EquipmentEcharts" class="echarts-box"></div> --> |
|---|
| | | </div> |
|---|
| | | <left-container @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"></left-container> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="right-container"> |
|---|
| | | <div class="case-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 案件统计 |
|---|
| | | <div class="timer"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="eventTime" |
|---|
| | | type="daterange" |
|---|
| | | align="right" |
|---|
| | | unlink-panels |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | ></el-date-picker> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> |
|---|
| | | <span style="margin-right:130px">安保活动</span> |
|---|
| | | <span |
|---|
| | | class="activity" |
|---|
| | | :class="{choosed:acttype==0}" |
|---|
| | | @click="actTabClick(0)" |
|---|
| | | >正在进行</span> |
|---|
| | | <span>/</span> |
|---|
| | | <span |
|---|
| | | class="activity" |
|---|
| | | :class="{choosed:acttype==1}" |
|---|
| | | @click="actTabClick(1)" |
|---|
| | | >历史活动</span> |
|---|
| | | </div> |
|---|
| | | <!-- <div id="EventCountEcharts" class="echarts-box"></div> --> |
|---|
| | | |
|---|
| | | <div id="peopleList" class="echarts-box"> |
|---|
| | | <el-table |
|---|
| | | :data="acttype == 0 ? underwayArr : historyArr" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" |
|---|
| | | :cell-style="{'text-align':'center','borderColor':'#324e75'}" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | > |
|---|
| | | <el-table-column prop="activityName" label="活动名称" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="scale" label="规模"></el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="crowd-box"> |
|---|
| | | <div class="title"> |
|---|
| | | <i></i> 现有设备 |
|---|
| | | <span class="regionTotal">{{regionTotal}}个</span> |
|---|
| | | </div> |
|---|
| | | <div id="EquipmentEcharts" class="echarts-box"></div> |
|---|
| | | </div> |
|---|
| | | <right-container @showequimentdetail="showequimentdetail"></right-container> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="center-container"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="bottom-container"> |
|---|
| | | <div class="header"> |
|---|
| | | <div class="bottomTitle"> |
|---|
| | | <div class="leftBor"></div> |
|---|
| | | <div class="topName">警情动态</div> |
|---|
| | | <div class="rightBor"></div> |
|---|
| | | </div> |
|---|
| | | <div class="timeTab"> |
|---|
| | | <span |
|---|
| | | class="beforetime" |
|---|
| | | :class="{choosed:timetype==0}" |
|---|
| | | @click="timeTabClick(0)" |
|---|
| | | >近一周</span> |
|---|
| | | <span>/</span> |
|---|
| | | <span |
|---|
| | | class="beforetime" |
|---|
| | | :class="{choosed:timetype==1}" |
|---|
| | | @click="timeTabClick(1)" |
|---|
| | | >近一月</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="body" ref="tableBox"> |
|---|
| | | <el-table |
|---|
| | | :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" |
|---|
| | | :cell-style="{'text-align':'center','borderColor':'#324e75'}" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | :height="currentTableHeight" |
|---|
| | | > |
|---|
| | | <el-table-column prop="num" label="序号"></el-table-column> |
|---|
| | | <el-table-column prop="type" label="警情类别"></el-table-column> |
|---|
| | | <el-table-column prop="comingPhone" label="报警电话"></el-table-column> |
|---|
| | | <el-table-column prop="dealTime" label="接警时间"></el-table-column> |
|---|
| | | <el-table-column prop="dealPolice" label="经办民警"></el-table-column> |
|---|
| | | <el-table-column prop="callPeople" label="报警人"></el-table-column> |
|---|
| | | <el-table-column prop="callPhone" label="报警人联系人"></el-table-column> |
|---|
| | | <el-table-column prop="callContent" label="报警内容"></el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <bottom-container></bottom-container> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div ref="RegionSelect" style="left: 0;" class="region-select"> |
|---|
| | |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" |
|---|
| | | :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}" |
|---|
| | | :height="currentTableHeight" |
|---|
| | | > |
|---|
| | | <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column> |
|---|
| | | <el-table-column prop="location" label="位置" width="140"></el-table-column> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | let cylinderLayer = null |
|---|
| | | let homePersonmyChart |
|---|
| | | let houseMyChart |
|---|
| | | let landMyChart |
|---|
| | | let equipmentmyChart |
|---|
| | | let interTime |
|---|
| | | |
|---|
| | | import axios from "axios" |
|---|
| | | import carList from '@/assets/data/car.js' |
|---|
| | |
|---|
| | | import areaOptionData from '@/assets/data/JurisdictionData/areaOptionData.js' |
|---|
| | | import policeStationOptions from '@/assets/data/JurisdictionData/policeStationOptions.js' |
|---|
| | | import housingDate from '@/assets/data/JurisdictionData/housingDate.js' |
|---|
| | | import leftContainer from './components/leftContainer' |
|---|
| | | import rightContainer from './components/rightContainer' |
|---|
| | | import bottomContainer from './components/bottomContainer' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | navType: 0, |
|---|
| | | tabType: 0, |
|---|
| | | tabTypeTwo: 0, |
|---|
| | | tabTypeThree: 0, |
|---|
| | | houseLayerShow: true, |
|---|
| | | carLayerShow: false, |
|---|
| | | phoneLayerShow: false, |
|---|
| | |
|---|
| | | alt: 100, |
|---|
| | | url: '/img/icon/activity.png' |
|---|
| | | }], |
|---|
| | | underwayArr: [ |
|---|
| | | { 'activityName': '进行活动1', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动2', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动3', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动4', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000' }, |
|---|
| | | { 'activityName': '进行活动5', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000' } |
|---|
| | | ], |
|---|
| | | historyArr: [ |
|---|
| | | { 'activityName': '历史活动1', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动2', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动3', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动4', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000' }, |
|---|
| | | { 'activityName': '历史活动5', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000' } |
|---|
| | | ], |
|---|
| | | pliceSituationWeekArr: [ |
|---|
| | | { 'num': '1', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '2', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | { 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' }, |
|---|
| | | ], |
|---|
| | | pliceSituationMouthArr: [ |
|---|
| | | { 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '2', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | { 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' }, |
|---|
| | | ], |
|---|
| | | peopleArr: [ |
|---|
| | | { 'name': '黄XX', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' }, |
|---|
| | | { 'name': '李某某', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' }, |
|---|
| | | { 'name': '刘AA', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' }, |
|---|
| | | { 'name': '张三', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' } |
|---|
| | | ], |
|---|
| | | policeStationCheckValue: '请选择派出所', |
|---|
| | | areaOptionData: [], |
|---|
| | | areaCheckValue: '请选择责任区', |
|---|
| | |
|---|
| | | 100 |
|---|
| | | ), |
|---|
| | | ], |
|---|
| | | regionTotal: 0, |
|---|
| | | acttype: 0, |
|---|
| | | timetype: 0, |
|---|
| | | peopletype: 0, |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: '最近一周', |
|---|
| | | onClick (picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: '最近一个月', |
|---|
| | | onClick (picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: '最近三个月', |
|---|
| | | onClick (picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | eventTime: '', |
|---|
| | | currentTableHeight: 0, |
|---|
| | | jurisdictionData: [{ |
|---|
| | | label: '全部', |
|---|
| | | id: '1', |
|---|
| | |
|---|
| | | }, |
|---|
| | | monitorContent: false, |
|---|
| | | othersContent: false, |
|---|
| | | carArr: [ |
|---|
| | | { 'carID': '#11111', 'carType': '大众', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#22222', 'carType': '宝马', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#33333', 'carType': '奔驰', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'carID': '#44444', 'carType': '红旗', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'carID': '#55555', 'carType': '大众', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#66666', 'carType': '宝马', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'carID': '#77777', 'carType': '奔驰', 'policeStation': '沙溪派出所', 'area': '责任区2' }, |
|---|
| | | { 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2' } |
|---|
| | | ], |
|---|
| | | phoneArr: [ |
|---|
| | | { 'phoneID': '188XXX11111', 'phoneType': '魅族', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX22222', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX33333', 'phoneType': '一加', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'phoneID': '188XXX44444', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'phoneID': '188XXX55555', 'phoneType': '三星', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX66666', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'phoneID': '188XXX77777', 'phoneType': '小米', 'policeStation': '沙溪派出所', 'area': '责任区2' }, |
|---|
| | | { 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2' } |
|---|
| | | ], |
|---|
| | | recorderArr: [ |
|---|
| | | { 'recorderID': 'ABC111', 'recorderType': '爱国者', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC222', 'recorderType': '百步通', 'policeStation': '车站派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC333', 'recorderType': '飞利浦', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'recorderID': 'ABC444', 'recorderType': '途强', 'policeStation': '车站派出所', 'area': '责任区2' }, |
|---|
| | | { 'recorderID': 'ABC555', 'recorderType': '执法鹰眼', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC666', 'recorderType': '致业', 'policeStation': '沙溪派出所', 'area': '责任区1' }, |
|---|
| | | { 'recorderID': 'ABC777', 'recorderType': '联想', 'policeStation': '沙溪派出所', 'area': '责任区2' }, |
|---|
| | | { 'recorderID': 'ABC888', 'recorderType': '高新兴', 'policeStation': '沙溪派出所', 'area': '责任区2' } |
|---|
| | | ], |
|---|
| | | showArr: [], |
|---|
| | | saveArr: [], |
|---|
| | | carArrShow: false, |
|---|
| | |
|---|
| | | currentPage: 1, |
|---|
| | | pagesize: 9, |
|---|
| | | landDetailArr: [], |
|---|
| | | landDetailArr1: [ |
|---|
| | | { 'housingEastate': '阳光小区', 'location': 'XXXXXXXX', 'area': '2122亩', 'superintendent': '王大壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '美丽小区', 'location': 'XXXXXXXX', 'area': '1335亩', 'superintendent': '王二壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '快乐小区', 'location': 'XXXXXXXX', 'area': '4122亩', 'superintendent': '王三壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '健康小区', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '斯哒地小区', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' }, |
|---|
| | | ], |
|---|
| | | landDetailArr2: [ |
|---|
| | | { 'housingEastate': '责任区1', 'location': 'XXXXXXXX', 'area': '2122亩', 'superintendent': '王大壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区2', 'location': 'XXXXXXXX', 'area': '1335亩', 'superintendent': '王二壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区3', 'location': 'XXXXXXXX', 'area': '4122亩', 'superintendent': '王三壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区4', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' }, |
|---|
| | | { 'housingEastate': '责任区5', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' }, |
|---|
| | | ], |
|---|
| | | |
|---|
| | | timetype: 0, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | components: { leftContainer, rightContainer, bottomContainer }, |
|---|
| | | |
|---|
| | | created () { |
|---|
| | | this.carList = carList |
|---|
| | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted () { |
|---|
| | | this.initEquipmentEcharts() |
|---|
| | | this.initEventChangeEcharts() |
|---|
| | | // this.initEventCountEcharts() |
|---|
| | | this.initLandEcharts() |
|---|
| | | this.initPersonEcharts() |
|---|
| | | this.inithouseEcharts() |
|---|
| | | |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.initPoliceStationLayer() |
|---|
| | | |
|---|
| | |
|---|
| | | document.querySelector('.screen-full-btn').classList.add('homebottom') |
|---|
| | | |
|---|
| | | this.setDomStyle() |
|---|
| | | |
|---|
| | | this.tableScroll() |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // axios.get('/user/getUserList').then((res) => { |
|---|
| | | // console.log(res, 999) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | this.clickPeopleChart() |
|---|
| | | this.clickEquimentChart() |
|---|
| | | this.clickLandChart() |
|---|
| | | |
|---|
| | | |
|---|
| | | window.addEventListener('resize', this.setDomStyle) |
|---|
| | | }, |
|---|
| | |
|---|
| | | let polygon = this.$turf.polygon([positions]) |
|---|
| | | let center = this.$turf.centroid(polygon) |
|---|
| | | return [center.geometry.coordinates[0], center.geometry.coordinates[1]] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | navClick (e) { |
|---|
| | | this.navType = e.target.dataset.type |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initPersonEcharts () { |
|---|
| | | var chartDom = document.getElementById('PersonEcharts') |
|---|
| | | homePersonmyChart = this.$echarts.init(chartDom) |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232])) |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | homePersonmyChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initPersonOptions (xDate, yDate) { |
|---|
| | | return { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: xDate, |
|---|
| | | |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff", |
|---|
| | | interval: 0, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: yDate, |
|---|
| | | type: 'bar', |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | textStyle: { |
|---|
| | | color: '#1a94a8', |
|---|
| | | fontSize: 16 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 40, |
|---|
| | | y: 10, |
|---|
| | | x2: 20, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | personTabClick (type) { |
|---|
| | | this.tabType = type |
|---|
| | | |
|---|
| | | let xDate, yDate |
|---|
| | | |
|---|
| | | if (type == 0) { |
|---|
| | | xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'] |
|---|
| | | yDate = [881, 2211, 6414, 4321, 1232] |
|---|
| | | } else if (type == 1) { |
|---|
| | | xDate = ['湖北', '上海', '北京', '广东', '浙江'] |
|---|
| | | yDate = [6414, 4231, 2211, 1231, 881] |
|---|
| | | } else if (type == 2) { |
|---|
| | | xDate = ['日本', '美国', '俄罗斯', '英国', '印度'] |
|---|
| | | yDate = [881, 1231, 2211, 4321, 6414] |
|---|
| | | } |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | 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 }])) |
|---|
| | | |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | houseMyChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initHouseOptions (xDate, y1Date, y2Date) { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | color: ['#2967c4', '#112d54'], |
|---|
| | | xAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: xDate, |
|---|
| | | axisLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: y1Date, |
|---|
| | | type: 'bar', |
|---|
| | | zlevel: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | data: y2Date, |
|---|
| | | type: 'bar', |
|---|
| | | barGap: '-100%', |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | color: '#fff', |
|---|
| | | position: 'right', // 标签右对齐 |
|---|
| | | distance: 0,// 标签距离柱条的距离 |
|---|
| | | formatter: params => { |
|---|
| | | return params.data.realValue + '个' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 70, |
|---|
| | | y: 10, |
|---|
| | | x2: 10, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | houseTabClick (type) { |
|---|
| | | this.tabTypeTwo = type |
|---|
| | | |
|---|
| | | let xDate, y1Date, y2Date |
|---|
| | | |
|---|
| | | if (type == 0) { |
|---|
| | | xDate = ['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑'] |
|---|
| | | y1Date = [88188, 1222211, 464104, 43201, 12302] |
|---|
| | | y2Date = [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }] |
|---|
| | | } else { |
|---|
| | | xDate = ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业'] |
|---|
| | | y1Date = [54, 77, 97, 141, 191] |
|---|
| | | y2Date = [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }] |
|---|
| | | } |
|---|
| | | houseMyChart.setOption(this.initHouseOptions(xDate, y1Date, y2Date), true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initLandEcharts () { |
|---|
| | | var chartDom = document.getElementById('landEcharts') |
|---|
| | | landMyChart = this.$echarts.init(chartDom) |
|---|
| | | landMyChart.setOption(this.initLandOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [6414, 2211, 4321, 1232, 881])) |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | landMyChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initLandOptions (xDate, yDate) { |
|---|
| | | return { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: xDate, |
|---|
| | | |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff", |
|---|
| | | interval: 0, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: yDate, |
|---|
| | | type: 'bar', |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | textStyle: { |
|---|
| | | color: '#1a94a8', |
|---|
| | | fontSize: 16 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 40, |
|---|
| | | y: 10, |
|---|
| | | x2: 20, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | landTabClick (type) { |
|---|
| | | this.tabTypeThree = type |
|---|
| | | let xDate, yDate |
|---|
| | | |
|---|
| | | if (type == 0) { |
|---|
| | | xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'] |
|---|
| | | yDate = [6414, 2211, 4321, 1232, 881] |
|---|
| | | } else if (type == 1) { |
|---|
| | | xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'] |
|---|
| | | yDate = [881, 2211, 6414, 4321, 1232] |
|---|
| | | } |
|---|
| | | |
|---|
| | | landMyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initEquipmentEcharts () { |
|---|
| | | var chartDom = document.getElementById('EquipmentEcharts') |
|---|
| | | equipmentmyChart = this.$echarts.init(chartDom) |
|---|
| | | var option |
|---|
| | | let dataArr = [ |
|---|
| | | { value: 4664, name: '车辆' }, |
|---|
| | | { value: 310, name: '摄像头' }, |
|---|
| | | { value: 279, name: '执法记录仪' }, |
|---|
| | | { value: 241, name: '手台' }, |
|---|
| | | ] |
|---|
| | | for (let i = 0; i < dataArr.length; i++) { |
|---|
| | | this.regionTotal += dataArr[i].value |
|---|
| | | } |
|---|
| | | option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | left: '60%', |
|---|
| | | y: '25%', |
|---|
| | | itemGap: 20, |
|---|
| | | 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: '', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | center: ['27%', '57%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: 'center' |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: dataArr |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | x: 10, |
|---|
| | | y: 10, |
|---|
| | | x2: 10, |
|---|
| | | y2: 20 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | option && equipmentmyChart.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'], |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#fff" |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#fff" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [10, 9, 12, 6, 4, 14, 8], |
|---|
| | | 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: '', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | center: ['40%', '60%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: 'center' |
|---|
| | | }, |
|---|
| | | 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) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | houseChange (e) { |
|---|
| | |
|---|
| | | return center |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clickPeopleChart () { |
|---|
| | | homePersonmyChart.on('click', params => { |
|---|
| | | let xDate, yDate |
|---|
| | | //户籍人口 |
|---|
| | | if (params.name == '车站派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [88, 221, 641, 432, 123] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '沙溪派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [641, 423, 221, 123, 88] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '灵溪派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [111, 531, 211, 431, 64] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '北门派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [887, 234, 452, 321, 154] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '江光派出所') { |
|---|
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
|---|
| | | yDate = [400, 500, 200, 450, 245] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '湖北') { |
|---|
| | | xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市'] |
|---|
| | | yDate = [88, 221, 641, 432, 123] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '上海') { |
|---|
| | | xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区'] |
|---|
| | | yDate = [641, 423, 221, 123, 88] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '北京') { |
|---|
| | | xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区'] |
|---|
| | | yDate = [111, 531, 211, 431, 64] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '广东') { |
|---|
| | | xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市'] |
|---|
| | | yDate = [887, 234, 452, 321, 154] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '浙江') { |
|---|
| | | xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市'] |
|---|
| | | yDate = [400, 300, 200, 450, 245] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '日本') { |
|---|
| | | xDate = ['东京都', '北海道', '大阪府', '京都府', '43县'] |
|---|
| | | yDate = [88, 221, 641, 432, 123] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '美国') { |
|---|
| | | xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州'] |
|---|
| | | yDate = [641, 423, 221, 123, 88] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '俄罗斯') { |
|---|
| | | xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦'] |
|---|
| | | yDate = [111, 531, 211, 431, 64] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '英国') { |
|---|
| | | xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰'] |
|---|
| | | yDate = [887, 234, 452, 321, 154] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else if (params.name == '印度') { |
|---|
| | | xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦'] |
|---|
| | | yDate = [400, 300, 200, 450, 245] |
|---|
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true) |
|---|
| | | } else { |
|---|
| | | this.peopleTitle = params.name |
|---|
| | | this.peopleVisible = true |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clickEquimentChart () { |
|---|
| | | equipmentmyChart.on('click', params => { |
|---|
| | | this.equimentVisible = true |
|---|
| | | this.equimentTitle = params.name |
|---|
| | | this.monitorContent = false |
|---|
| | | this.othersContent = true |
|---|
| | | if (params.name == '摄像头') { |
|---|
| | | this.othersContent = false |
|---|
| | | this.monitorContent = true |
|---|
| | | } else if (params.name == '手台') { |
|---|
| | | this.recorderArrShow = false |
|---|
| | | this.carArrShow = false |
|---|
| | | this.phoneArrShow = true |
|---|
| | | this.saveArr = this.phoneArr |
|---|
| | | this.showArr = this.saveArr |
|---|
| | | } else if (params.name == '车辆') { |
|---|
| | | this.recorderArrShow = false |
|---|
| | | this.carArrShow = true |
|---|
| | | this.phoneArrShow = false |
|---|
| | | this.saveArr = this.carArr |
|---|
| | | this.showArr = this.saveArr |
|---|
| | | } else if (params.name == '执法记录仪') { |
|---|
| | | this.recorderArrShow = true |
|---|
| | | this.carArrShow = false |
|---|
| | | this.phoneArrShow = false |
|---|
| | | this.saveArr = this.recorderArr |
|---|
| | | this.showArr = this.saveArr |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | clickLandChart () { |
|---|
| | | landMyChart.on('click', params => { |
|---|
| | | console.log(params.name) |
|---|
| | | this.landVisible = true |
|---|
| | | this.landTitle = params.name |
|---|
| | | if (this.tabTypeThree == 0) { |
|---|
| | | this.landDetailArr = this.landDetailArr1 |
|---|
| | | } else { |
|---|
| | | this.landDetailArr = this.landDetailArr2 |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | actTabClick (type) { |
|---|
| | | this.acttype = type |
|---|
| | | }, |
|---|
| | | |
|---|
| | | timeTabClick (type) { |
|---|
| | | this.timetype = type |
|---|
| | | }, |
|---|
| | | |
|---|
| | | peopleTabClick (type) { |
|---|
| | | this.peopletype = type |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 修改下拉容器的left |
|---|
| | | setDomStyle () { |
|---|
| | | const bodyWidth = document.body.clientWidth |
|---|
| | | const domWidth = this.$refs.RegionSelect.offsetWidth |
|---|
| | | this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px' |
|---|
| | | |
|---|
| | | this.currentTableHeight = this.$refs.tableBox.offsetHeight |
|---|
| | | }, |
|---|
| | | |
|---|
| | | tableScroll () { |
|---|
| | | // 拿到表格挂载后的真实DOM |
|---|
| | | const divData = this.$refs.tableBox.querySelector('.el-table__body-wrapper') |
|---|
| | | // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素) |
|---|
| | | interTime = setInterval(() => { |
|---|
| | | // 元素自增距离顶部1像素 |
|---|
| | | divData.scrollTop += 1 |
|---|
| | | // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) |
|---|
| | | if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) { |
|---|
| | | // 重置table距离顶部距离 |
|---|
| | | divData.scrollTop = 0 |
|---|
| | | } |
|---|
| | | }, 100) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | jurisdictionNodeClick (nodeObj, node, nodeSelf) { |
|---|
| | |
|---|
| | | this.currentPage = currentPage |
|---|
| | | }, |
|---|
| | | |
|---|
| | | showpeopledetail (name) { |
|---|
| | | this.peopleTitle = name |
|---|
| | | this.peopleVisible = true |
|---|
| | | }, |
|---|
| | | |
|---|
| | | showlanddetail (name, arr) { |
|---|
| | | this.landVisible = true |
|---|
| | | this.landTitle = name |
|---|
| | | this.landDetailArr = arr |
|---|
| | | }, |
|---|
| | | |
|---|
| | | showequimentdetail (name, monitor, others, booleans, arr) { |
|---|
| | | this.equimentVisible = true |
|---|
| | | this.equimentTitle = name |
|---|
| | | this.monitorContent = monitor |
|---|
| | | this.othersContent = others |
|---|
| | | this.recorderArrShow = booleans[0] |
|---|
| | | this.carArrShow = booleans[1] |
|---|
| | | this.phoneArrShow = booleans[2] |
|---|
| | | this.saveArr = arr |
|---|
| | | this.showArr = arr |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | watch: {}, |
|---|
| | |
|---|
| | | document.querySelector('.dc-container .dc-location-bar').classList.remove('homebottom') |
|---|
| | | document.querySelector('.screen-full-btn').classList.remove('homebottom') |
|---|
| | | window.removeEventListener('resize', this.setDomStyle) |
|---|
| | | clearInterval(interTime) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | |
|---|
| | | width: 21%; |
|---|
| | | height: calc(100% - 80px); |
|---|
| | | background: $bg-color; |
|---|
| | | |
|---|
| | | .person-box { |
|---|
| | | height: 35%; |
|---|
| | | .peopleTap { |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .peopleTap:hover { |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| | | .choosed { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | .peopleNum { |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | .word { |
|---|
| | | color: #fff; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | .before { |
|---|
| | | margin-left: 108px; |
|---|
| | | } |
|---|
| | | .peopleTable { |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .house-box { |
|---|
| | | height: 30%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .land-box { |
|---|
| | | height: 35%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right-container { |
|---|
| | |
|---|
| | | width: 21%; |
|---|
| | | height: calc(100% - 80px); |
|---|
| | | background: $bg-color; |
|---|
| | | |
|---|
| | | .case-box { |
|---|
| | | height: 30%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .alert-box, |
|---|
| | | .crowd-box { |
|---|
| | | height: 35%; |
|---|
| | | |
|---|
| | | .echarts-box { |
|---|
| | | overflow-x: hidden; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left-container, |
|---|
| | | .right-container { |
|---|
| | | .person-box, |
|---|
| | | .house-box, |
|---|
| | | .land-box, |
|---|
| | | .case-box, |
|---|
| | | .alert-box, |
|---|
| | | .crowd-box { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | padding: 0 10px; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | padding: 0 18px; |
|---|
| | | position: relative; |
|---|
| | | text-align: left; |
|---|
| | | height: 40px; |
|---|
| | | line-height: 40px; |
|---|
| | | font-size: 20px; |
|---|
| | | |
|---|
| | | i { |
|---|
| | | position: absolute; |
|---|
| | | top: 6px; |
|---|
| | | left: 0; |
|---|
| | | width: 8px; |
|---|
| | | height: 28px; |
|---|
| | | border-radius: 4px; |
|---|
| | | background: #43bafe; |
|---|
| | | box-shadow: 0px 0px 8px 2px #43bafe; |
|---|
| | | } |
|---|
| | | .timer { |
|---|
| | | width: 250px; |
|---|
| | | height: 30px; |
|---|
| | | float: right; |
|---|
| | | } |
|---|
| | | .regionTotal { |
|---|
| | | color: #fff; |
|---|
| | | font-size: 22px; |
|---|
| | | font-weight: 700; |
|---|
| | | margin-left: 50%; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | } |
|---|
| | | .activity { |
|---|
| | | font-size: 16px; |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .activity:hover { |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| | | .choosed { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-title { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | height: 36px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-tab { |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | .tab { |
|---|
| | | margin: 0 10px; |
|---|
| | | flex: 1; |
|---|
| | | background: rgba(29, 38, 105, 1); |
|---|
| | | border: 1px solid rgba(20, 50, 123, 1); |
|---|
| | | cursor: pointer; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | height: 26px; |
|---|
| | | line-height: 26px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tab.on { |
|---|
| | | border: 1px solid rgb(3, 108, 255); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .echarts-box { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sub-tab + .echarts-box { |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | #peopleList { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .center-container { |
|---|
| | | display: flex; |
|---|
| | | position: fixed; |
|---|
| | |
|---|
| | | width: 58%; |
|---|
| | | background-color: $bg-color; |
|---|
| | | box-sizing: border-box; |
|---|
| | | |
|---|
| | | .header { |
|---|
| | | width: 100%; |
|---|
| | | height: 36px; |
|---|
| | | |
|---|
| | | .bottomTitle { |
|---|
| | | display: flex; |
|---|
| | | float: left; |
|---|
| | | width: 34%; |
|---|
| | | margin-left: 33%; |
|---|
| | | height: 36px; |
|---|
| | | line-height: 36px; |
|---|
| | | color: #fff; |
|---|
| | | text-align: center; |
|---|
| | | |
|---|
| | | .leftBor { |
|---|
| | | width: 0px; |
|---|
| | | height: 0px; |
|---|
| | | border: 18px solid #3366e2; |
|---|
| | | border-bottom-color: transparent; |
|---|
| | | border-left-color: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rightBor { |
|---|
| | | width: 0px; |
|---|
| | | height: 0px; |
|---|
| | | border: 18px solid #3366e2; |
|---|
| | | border-bottom-color: transparent; |
|---|
| | | border-right-color: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .topName { |
|---|
| | | width: calc(100% - 48px); |
|---|
| | | background-color: #3366e2; |
|---|
| | | letter-spacing: 2px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .timeTab { |
|---|
| | | float: right; |
|---|
| | | width: 20%; |
|---|
| | | height: 36px; |
|---|
| | | line-height: 36px; |
|---|
| | | .beforetime { |
|---|
| | | color: rgb(98, 95, 95); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .beforetime:hover { |
|---|
| | | text-decoration: underline; |
|---|
| | | } |
|---|
| | | .choosed { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .body { |
|---|
| | | margin: 10px; |
|---|
| | | width: calc(100% - 20px); |
|---|
| | | height: calc(100% - 56px); |
|---|
| | | |
|---|
| | | /* 解决自定义滚动条 x 轴显示问题 */ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .region-select { |
|---|
