添加一张图
commit
7be9e9ced9
|
|
@ -16,15 +16,6 @@
|
|||
"disableOther": true
|
||||
},
|
||||
"openAtStart": [
|
||||
{
|
||||
"name": "POI查询",
|
||||
"uri": "widgets/queryBaiduPOI/widget.js",
|
||||
"css": {
|
||||
"top": "150px",
|
||||
"left": "auto",
|
||||
"right": "500px"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "右上角工具栏",
|
||||
"uri": "widgets/toolBarRight/widget.js",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
|
|
@ -1,436 +0,0 @@
|
|||
.querybar-ssk {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
height: 40px;
|
||||
transform: translate(-50% , 0);
|
||||
-webkit-transform: translate(-50% , 0);
|
||||
-moz-transform: translate(-50% , 0);
|
||||
-ms-transform: translate(-50% , 0);
|
||||
-o-transform: translate(-50% , 0);
|
||||
}
|
||||
.querybar-ssk1 {
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 16px;
|
||||
text-indent: 8px;
|
||||
outline: none;
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
border: 1px solid #56FEFE;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 20px;
|
||||
position: relative;
|
||||
top:-3px;
|
||||
text-indent:18px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/* WebKit browsers，webkit内核浏览器 */
|
||||
color: #36A5A8;
|
||||
font-size: 16px;
|
||||
}
|
||||
.querybar-ssk1:focus {
|
||||
border: 1px solid #56fefe;
|
||||
background-color: rgba(86, 254, 254,.2);
|
||||
}
|
||||
|
||||
.querybar-ssk2 {
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
color:#FF9811;
|
||||
}
|
||||
|
||||
.querybar-sbox {
|
||||
width: 260px;
|
||||
padding: 10px;
|
||||
box-shadow: 1px 2px 1px rgba(220, 220, 220, 0.3);
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.querybar-ssk1 {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.querybar-ssk2 {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.querybar-sbox {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: #A9A9A9;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: #A9A9A9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: #A9A9A9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: #A9A9A9;
|
||||
}
|
||||
|
||||
/*搜索栏*/
|
||||
.querybar-fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.querybar-fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.querybar-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.querybar-clear5 {
|
||||
clear: both;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.querybar-clear10 {
|
||||
clear: both;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.querybar-sstab {
|
||||
height: 18px;
|
||||
padding: 5px;
|
||||
background: #f7f7f7;
|
||||
border: solid 1px #e0e0e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.querybar-sstab ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-sstab ul li {
|
||||
width: 70px;
|
||||
height: 18px;
|
||||
padding: 0 20px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
border-right: solid 1px #e0e0e0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.querybar-sstab ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.querybar-sstab ul li a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-kbtab {
|
||||
padding-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1px #CCCCCC;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li {
|
||||
list-style-type: none;
|
||||
width: 60px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-ssls {}
|
||||
|
||||
.querybar-ssls ul {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.querybar-ssls li {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
list-style-type: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.querybar-ssls i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.querybar-ssls li a {
|
||||
text-decoration: none;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-ssls li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.querybar-znbox {
|
||||
width: 260px;
|
||||
box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.querybar-znts {}
|
||||
|
||||
.querybar-znts ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-znts li {
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
list-style-type: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.querybar-znts i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.querybar-znts li a {
|
||||
text-decoration: none;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-znts li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.querybar-site {
|
||||
padding: 10px 8px;
|
||||
border-top: solid 1px #eaeaea;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.querybar-site :hover {
|
||||
background-color: rgba(63, 72, 84, 1);
|
||||
}
|
||||
|
||||
.querybar-sitejj {
|
||||
width: 220px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.querybar-sitejj h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
color: #dcdcdc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.querybar-sitejj p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.querybar-star {
|
||||
color: #ff675a;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.querybar-page {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.querybar-ye a {
|
||||
text-decoration: none;
|
||||
padding: 4px 6px;
|
||||
color: #fff;
|
||||
border: solid 1px #ccc;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.querybar-ye a:hover {
|
||||
color: #fff;
|
||||
border-color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-dtit {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
font-size: 14px;
|
||||
text-indent: 10px;
|
||||
background: #3385ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.querybar-itr {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.querybar-itrtit {
|
||||
font-size: 12px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.querybar-more {
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.querybar-itrcon {
|
||||
padding: 8px 0;
|
||||
border-top: dashed 1px #eee;
|
||||
}
|
||||
|
||||
.querybar-itrcon p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-itrcon a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.querybar-star_orange {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #ffac2d;
|
||||
}
|
||||
|
||||
|
||||
/*全部分类*/
|
||||
.querybar-allsort {
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
padding: 4px;
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
border: solid 1px #e0e0e0;
|
||||
}
|
||||
|
||||
.querybar-sort {
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.querybar-sorta {
|
||||
width: 60px;
|
||||
padding-top: 4px;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.querybar-sortb {
|
||||
width: 170px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.querybar-sortb ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-sortb ul li {
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
padding: 0 10px 2px 0;
|
||||
}
|
||||
|
||||
.querybar-sortb ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.querybar-sortb ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*推荐排序*/
|
||||
.querybar-recsort {
|
||||
position: absolute;
|
||||
left: 126px;
|
||||
width: 120px;
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
border: solid 1px #e0e0e0;
|
||||
}
|
||||
|
||||
.querybar-recsort ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-recsort ul li {
|
||||
padding: 4px 0 6px 0;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
border-top: solid 1px #e0e0e0;
|
||||
}
|
||||
|
||||
.querybar-recsort ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.querybar-recsort ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<!-- 2017-11-6 09:38:52 | 修改 木遥（微信: http://marsgis.cn/weixin.html ） -->
|
||||
<div id="map-querybar" style="top:85px; display: flex;flex-wrap: wrap; width: 340px;background-image:url(/img/sousuokuang.png);background-size:100% 100%; " class="querybar-ssk animation-slide-top no-print-view">
|
||||
<input id="txt_querypoi" style="border:0px;outline:none;" type="search" class="querybar-ssk1" placeholder="搜索 地点 " autocomplete="off" />
|
||||
<button id="btn_querypoi" type="button" value="" class="querybar-ssk2">
|
||||
搜索
|
||||
<!-- <i class="fa fa-search fa-2x"></i> -->
|
||||
</button>
|
||||
<div class="querybar-clear"></div>
|
||||
|
||||
<!--历史记录-->
|
||||
<div id="querybar_histroy_view" class="querybar-sbox " style="display: none;">
|
||||
<!--<div class="querybar-kbtab">
|
||||
<ul>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('美食');"><div><img src="images/tools/menu1.png"></div><div>美食</div></a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('酒店');"><div><img src="images/tools/menu2.png"></div><div>酒店</div></a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('景点');"><div><img src="images/tools/menu3.png"></div><div>景点</div></a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('小区');"><div><img src="images/tools/menu4.png"></div><div>小区</div></a></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<div class="querybar-ssls">
|
||||
<ul id="querybar_ul_history">
|
||||
<!--<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥安徽总队');">木遥安徽总队</a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥安徽总队医院');">木遥安徽总队医院</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:queryBaiduPOIWidget.clearHistory();" class="querybar-more">删除历史</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--搜索智能提示-->
|
||||
<div id="querybar_autotip_view" class="querybar-znbox" style="display: none;">
|
||||
<div class="querybar-znts">
|
||||
<ul id="querybar_ul_autotip">
|
||||
<!--<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥招待所');">木遥招待所</a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥医院');">木遥医院</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--搜索结果列表-->
|
||||
<div id="querybar_resultlist_view" class="querybar-sbox" style="display: none;">
|
||||
|
||||
<!--<div class="querybar-site">
|
||||
<div class="querybar-sitejj">
|
||||
<h3>1、木遥安徽总队</h3>
|
||||
<p>合肥市安徽区玉兰大道8号</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="querybar-site">
|
||||
<div class="querybar-sitejj">
|
||||
<h3>2、木遥安徽总队医院</h3>
|
||||
<p>合肥市庐阳区长丰路78号</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="querybar-site">
|
||||
<div class="querybar-sitejj">
|
||||
<h3>3、木遥医院-公交车站</h3>
|
||||
<p>113路;125路;138路;t13b路;t13路;</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="querybar-page">
|
||||
<div class="querybar-fl">
|
||||
找到<strong>134</strong>条结果
|
||||
</div>
|
||||
<div class="querybar-ye querybar-fr">
|
||||
1/7页 <a href="javascript:void(0)">首页</a> <a href="javascript:void(0)"><</a> <a href="javascript:void(0)">></a>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!--查看单条结果-->
|
||||
<div id="querybar_detail_view" class="querybar-sbox" style="display: none;">
|
||||
<div class="querybar-dtit">
|
||||
<span id="lbl_poi_name">名称</span>
|
||||
<a id="querybar_detail_back" style="float: right; cursor: pointer; font-size: 12px;color: #ffffff;"> <<返回 </a>
|
||||
</div>
|
||||
<div class="querybar-itr">
|
||||
<div class="querybar-itrtit">
|
||||
<img id="querybar_img_jianjie" src="images/jj.png" class="querybar-fl"> 简介
|
||||
<a id="btnShowDetail" href="" target="_blank" class="querybar-more">详情></a>
|
||||
</div>
|
||||
<div id="poi_detail_info" class="querybar-itrcon">
|
||||
<!--<p>类别：总队机关</p>
|
||||
<p>电话：0551-65395595</p>
|
||||
<p>地址：安徽省合肥市安徽区望江西路600号</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,586 +0,0 @@
|
|||
'use script' //开发环境建议开启严格模式
|
||||
;(function (window, mars3d) {
|
||||
//创建widget类，需要继承BaseWidget
|
||||
class MyWidget extends mars3d.widget.BaseWidget {
|
||||
//外部资源配置
|
||||
get resources() {
|
||||
return ['view.css']
|
||||
}
|
||||
|
||||
//弹窗配置
|
||||
get view() {
|
||||
return {
|
||||
type: 'append',
|
||||
url: 'view.html',
|
||||
parent: 'body',
|
||||
}
|
||||
}
|
||||
|
||||
//初始化[仅执行1次]
|
||||
create() {
|
||||
this.storageName = 'mars3d_queryBaiduPOI'
|
||||
this.pageSize = 6
|
||||
this.arrdata = []
|
||||
this.counts = 0
|
||||
this.allpage = 0
|
||||
this.thispage = 0
|
||||
|
||||
//创建矢量数据图层
|
||||
this.graphicLayer = new mars3d.layer.GraphicLayer({
|
||||
name: this.config.name,
|
||||
pid: 99, //图层管理 中使用，父节点id
|
||||
})
|
||||
//鼠标单击后的信息面板弹窗
|
||||
this.graphicLayer.bindPopup(
|
||||
function (event) {
|
||||
let item = event.graphic?.attr
|
||||
if (!item) {
|
||||
return
|
||||
}
|
||||
|
||||
var name
|
||||
if (item.detail_info && item.detail_info.detail_url) {
|
||||
name = '<a href="' + item.detail_info.detail_url + '" target="_black" style="color: #ffffff; ">' + item.name + '</a>'
|
||||
} else {
|
||||
name = item.name
|
||||
}
|
||||
|
||||
var inHtml = '<div class="mars-popup-titile">' + name + '</div><div class="mars-popup-content" >'
|
||||
|
||||
var phone = $.trim(item.tel)
|
||||
if (phone != '') {
|
||||
inHtml += '<div><label>电话</label>' + phone + '</div>'
|
||||
}
|
||||
|
||||
var dz = $.trim(item.address)
|
||||
if (dz != '') {
|
||||
inHtml += '<div><label>地址</label>' + dz + '</div>'
|
||||
}
|
||||
|
||||
if (item.detail_info) {
|
||||
var fl = $.trim(item.detail_info.tag)
|
||||
if (fl != '') {
|
||||
inHtml += '<div><label>类别</label>' + fl + '</div>'
|
||||
}
|
||||
}
|
||||
inHtml += '</div>'
|
||||
|
||||
return inHtml
|
||||
},
|
||||
{
|
||||
anchor: [0, -10],
|
||||
}
|
||||
)
|
||||
|
||||
//查询控制器
|
||||
this.baiduPOI = new mars3d.query.BaiduPOI()
|
||||
}
|
||||
//每个窗口创建完成后调用
|
||||
winCreateOK(opt, result) {
|
||||
if (opt.type != 'append') {
|
||||
return
|
||||
}
|
||||
var that = this
|
||||
var img = $('#map-querybar img')
|
||||
img.each((index, item) => {
|
||||
$(item).attr('src', this.path + $(item).attr('src'))
|
||||
})
|
||||
|
||||
if (this.config.position) {
|
||||
$('#map-querybar').css(this.config.position)
|
||||
}
|
||||
if (this.config.style) {
|
||||
$('#map-querybar').css(this.config.style)
|
||||
}
|
||||
|
||||
// 搜索框
|
||||
$('#txt_querypoi').click(function () {
|
||||
// 文本框内容为空
|
||||
if ($.trim($(this).val()).length == 0) {
|
||||
that.hideAllQueryBarView()
|
||||
// that.showHistoryList() // 显示历史记录
|
||||
}
|
||||
})
|
||||
|
||||
var timetik = 0
|
||||
|
||||
// 搜索框绑定文本框值发生变化,隐藏默认搜索信息栏,显示匹配结果列表
|
||||
$('#txt_querypoi').bind('input propertychange', () => {
|
||||
clearTimeout(timetik)
|
||||
timetik = setTimeout(() => {
|
||||
this.hideAllQueryBarView()
|
||||
this.clearLayers()
|
||||
|
||||
var queryVal = $.trim($('#txt_querypoi').val())
|
||||
if (queryVal.length == 0) {
|
||||
// 文本框内容为空,显示历史记录
|
||||
// this.showHistoryList()
|
||||
} else {
|
||||
this.autoTipList(queryVal, true)
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
|
||||
// 点击搜索查询按钮
|
||||
$('#btn_querypoi').click(() => {
|
||||
clearTimeout(timetik)
|
||||
this.hideAllQueryBarView()
|
||||
|
||||
var queryVal = $.trim($('#txt_querypoi').val())
|
||||
this.strartQueryPOI(queryVal, true)
|
||||
})
|
||||
//绑定回车键
|
||||
$('#txt_querypoi').bind('keydown', (event) => {
|
||||
if (event.keyCode == '13') {
|
||||
$('#btn_querypoi').click()
|
||||
}
|
||||
})
|
||||
|
||||
// 返回查询结果面板界面
|
||||
$('#querybar_detail_back').click(() => {
|
||||
this.hideAllQueryBarView()
|
||||
$('#querybar_resultlist_view').show()
|
||||
})
|
||||
}
|
||||
//打开激活
|
||||
activate() {
|
||||
this.map.addLayer(this.graphicLayer)
|
||||
|
||||
//单击地图事件
|
||||
this.map.on(mars3d.EventType.clickMap, this.onMapClick, this)
|
||||
}
|
||||
//关闭释放
|
||||
disable() {
|
||||
this.map.removeLayer(this.graphicLayer)
|
||||
|
||||
//释放单击地图事件
|
||||
this.map.off(mars3d.EventType.clickMap, this.onMapClick, this)
|
||||
|
||||
this.hideAllQueryBarView()
|
||||
this.clearLayers()
|
||||
}
|
||||
onMapClick(event) {
|
||||
// 点击地图区域,隐藏所有弹出框
|
||||
if ($.trim($('#txt_querypoi').val()).length == 0) {
|
||||
this.hideAllQueryBarView()
|
||||
$('#txt_querypoi').blur()
|
||||
}
|
||||
}
|
||||
hideAllQueryBarView() {
|
||||
$('#querybar_histroy_view').hide()
|
||||
$('#querybar_autotip_view').hide()
|
||||
$('#querybar_detail_view').hide()
|
||||
$('#querybar_resultlist_view').hide()
|
||||
}
|
||||
|
||||
// 点击面板条目,自动填充搜索框,并展示搜索结果面板
|
||||
autoSearch(name) {
|
||||
$('#txt_querypoi').val(name)
|
||||
$('#btn_querypoi').trigger('click')
|
||||
}
|
||||
|
||||
//===================与后台交互========================
|
||||
|
||||
//显示智能提示搜索结果
|
||||
autoTipList(text, queryEx) {
|
||||
//输入经纬度数字时
|
||||
if (this.isLonLat(text)) {
|
||||
return
|
||||
}
|
||||
|
||||
//查询外部widget
|
||||
if (this.hasExWidget() && queryEx) {
|
||||
this.autoExTipList(text)
|
||||
return
|
||||
}
|
||||
//查询外部widget
|
||||
|
||||
this.baiduPOI.autoTip({
|
||||
text: text,
|
||||
location: this.map.getCenter(),
|
||||
success: (result) => {
|
||||
var inhtml = ''
|
||||
var pois = result.list
|
||||
for (var index = 0; index < pois.length; index++) {
|
||||
var name = pois[index].name
|
||||
// var num = pois[index].num;
|
||||
// if (num > 0) continue;
|
||||
|
||||
inhtml += "<li><i class='fa fa-search'></i><a href=\"javascript:queryBaiduPOIWidget.autoSearch('" + name + '\');">' + name + '</a></li>'
|
||||
}
|
||||
|
||||
if (inhtml.length > 0) {
|
||||
$('#querybar_ul_autotip').html(inhtml)
|
||||
$('#querybar_autotip_view').show()
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 根据输入框内容，查询显示列表
|
||||
strartQueryPOI(text, queryEx) {
|
||||
if (text.length == 0) {
|
||||
toastr.warning('请输入搜索关键字！')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO:根据文本框输入内容,从数据库模糊查询到所有匹配结果（分页显示）
|
||||
// this.addHistory(text)
|
||||
|
||||
this.hideAllQueryBarView()
|
||||
|
||||
//输入经纬度数字时
|
||||
if (this.isLonLat(text)) {
|
||||
this.centerAtLonLat(text)
|
||||
return
|
||||
}
|
||||
|
||||
//查询外部widget
|
||||
if (this.hasExWidget() && queryEx) {
|
||||
var qylist = this.queryExPOI(text)
|
||||
return
|
||||
}
|
||||
//查询外部widget
|
||||
|
||||
this.thispage = 1
|
||||
this.queryText = text
|
||||
this.query_location = this.map.getCenter()
|
||||
this.query_radius = this.map.camera.positionCartographic.height //单位：米
|
||||
|
||||
this.queryPOI()
|
||||
}
|
||||
queryPOI() {
|
||||
let searchinfo = {
|
||||
keyWord:this.queryText,
|
||||
level:20,
|
||||
mapBound:"117.627645,34.392462,119.02584,36.217225",
|
||||
specify:"371300",
|
||||
queryType:7,
|
||||
count:10,
|
||||
start:0,
|
||||
}
|
||||
let query = JSON.stringify(searchinfo);
|
||||
query=query+"&type=query&tk=b6585bc41ee16251dbe6b1af64f375d9";
|
||||
let _this = this;
|
||||
$.ajax({
|
||||
type:"GET",
|
||||
url:'http://api.tianditu.gov.cn/search?postStr='+query,
|
||||
dataType:"json",
|
||||
success(result){
|
||||
console.log('result',result);
|
||||
|
||||
_this.showPOIPage(result.pois, result.count)
|
||||
}
|
||||
})
|
||||
//查询获取数据
|
||||
// this.baiduPOI.queryText({
|
||||
// text: this.queryText,
|
||||
// count: this.pageSize,
|
||||
// page: this.thispage - 1,
|
||||
// location: this.query_location,
|
||||
// radius: this.query_radius,
|
||||
// success: (result) => {
|
||||
// if (!this.isActivate) {
|
||||
// return
|
||||
// }
|
||||
// this.showPOIPage(result.list, result.allcount)
|
||||
// },
|
||||
// })
|
||||
//
|
||||
|
||||
}
|
||||
|
||||
//===================显示查询结果处理========================
|
||||
showPOIPage(data, counts) {
|
||||
this.arrdata = data
|
||||
this.counts = counts
|
||||
if (this.counts < data.length) {
|
||||
this.counts = data.length
|
||||
}
|
||||
this.allpage = Math.ceil(this.counts / this.pageSize)
|
||||
|
||||
var inhtml = ''
|
||||
if (this.counts == 0) {
|
||||
inhtml += '<div class="querybar-page"><div class="querybar-fl">没有找到"<strong>' + this.queryText + '</strong>"相关结果</div></div>'
|
||||
} else {
|
||||
this.objResultData = this.objResultData || {}
|
||||
for (var index = 0; index < this.arrdata.length; index++) {
|
||||
var item = this.arrdata[index]
|
||||
var startIdx = (this.thispage - 1) * this.pageSize
|
||||
item.index = startIdx + (index + 1)
|
||||
|
||||
var _id = index
|
||||
var _mc
|
||||
if (item.detail_info && item.detail_info.detail_url) {
|
||||
_mc = '<a href="' + item.detail_info.detail_url + '" target="_black" style="color: #ffffff; ">' + item.name + '</a>'
|
||||
} else {
|
||||
_mc = item.name
|
||||
}
|
||||
|
||||
inhtml +=
|
||||
'<div class="querybar-site" onclick="queryBaiduPOIWidget.showDetail(\'' +
|
||||
_id +
|
||||
'\')"> <div class="querybar-sitejj"> <h3>' +
|
||||
item.index +
|
||||
'、' +
|
||||
_mc +
|
||||
'</h3> <p>' +
|
||||
(item.address || '') +
|
||||
'</p> </div> </div>'
|
||||
|
||||
this.objResultData[_id] = item
|
||||
}
|
||||
|
||||
//分页信息
|
||||
var _fyhtml
|
||||
if (this.allpage > 1) {
|
||||
_fyhtml =
|
||||
'<div class="querybar-ye querybar-fr">' +
|
||||
this.thispage +
|
||||
'/' +
|
||||
this.allpage +
|
||||
'页 <a href="javascript:queryBaiduPOIWidget.showFirstPage()">首页</a> <a href="javascript:queryBaiduPOIWidget.showPretPage()"><</a> <a href="javascript:queryBaiduPOIWidget.showNextPage()">></a> </div>'
|
||||
} else {
|
||||
_fyhtml = ''
|
||||
}
|
||||
|
||||
//底部信息
|
||||
inhtml += '<div class="querybar-page"><div class="querybar-fl">找到<strong>' + this.counts + '</strong>条结果</div>' + _fyhtml + '</div>'
|
||||
}
|
||||
$('#querybar_resultlist_view').html(inhtml)
|
||||
$('#querybar_resultlist_view').show()
|
||||
|
||||
this.showPOIArr(this.arrdata)
|
||||
if (this.counts == 1) {
|
||||
this.showDetail('0')
|
||||
}
|
||||
}
|
||||
showFirstPage() {
|
||||
this.thispage = 1
|
||||
this.queryPOI()
|
||||
}
|
||||
showNextPage() {
|
||||
this.thispage = this.thispage + 1
|
||||
if (this.thispage > this.allpage) {
|
||||
this.thispage = this.allpage
|
||||
toastr.warning('当前已是最后一页了')
|
||||
return
|
||||
}
|
||||
this.queryPOI()
|
||||
}
|
||||
|
||||
showPretPage() {
|
||||
this.thispage = this.thispage - 1
|
||||
if (this.thispage < 1) {
|
||||
this.thispage = 1
|
||||
toastr.warning('当前已是第一页了')
|
||||
return
|
||||
}
|
||||
this.queryPOI()
|
||||
}
|
||||
//点击单个结果,显示详细
|
||||
showDetail(id) {
|
||||
var item = this.objResultData[id]
|
||||
this.flyTo(item)
|
||||
}
|
||||
clearLayers() {
|
||||
this.graphicLayer.closePopup()
|
||||
this.graphicLayer.clear()
|
||||
}
|
||||
showPOIArr(arr) {
|
||||
this.clearLayers()
|
||||
|
||||
|
||||
arr.forEach((item) => {
|
||||
let lngLat = item.lonlat.split(" ");
|
||||
var jd = Number(lngLat[0])
|
||||
var wd = Number(lngLat[1])
|
||||
// var jd = Number(item.x)
|
||||
// var wd = Number(item.y)
|
||||
if (isNaN(jd) || isNaN(wd)) {
|
||||
return
|
||||
}
|
||||
|
||||
item.x = jd
|
||||
item.y = wd
|
||||
|
||||
//添加实体
|
||||
var graphic = new mars3d.graphic.PointEntity({
|
||||
position: Cesium.Cartesian3.fromDegrees(jd, wd),
|
||||
style: {
|
||||
pixelSize: 10,
|
||||
color: '#3388ff',
|
||||
outline: true,
|
||||
outlineColor: '#ffffff',
|
||||
outlineWidth: 2,
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
|
||||
clampToGround: true, //贴地
|
||||
visibleDepth: false, //是否被遮挡
|
||||
label: {
|
||||
text: item.name,
|
||||
font_size: 20,
|
||||
color: 'rgb(240,255,255)',
|
||||
outline: true,
|
||||
outlineWidth: 2,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffsetY: -10, //偏移量
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
|
||||
clampToGround: true, //贴地
|
||||
visibleDepth: false, //是否被遮挡
|
||||
},
|
||||
},
|
||||
attr: item,
|
||||
})
|
||||
this.graphicLayer.addGraphic(graphic)
|
||||
|
||||
item._graphic = graphic
|
||||
})
|
||||
|
||||
if (arr.length > 1) {
|
||||
this.graphicLayer.flyTo()
|
||||
}
|
||||
}
|
||||
flyTo(item) {
|
||||
|
||||
var graphic = item._graphic
|
||||
if (graphic == null) {
|
||||
window.toastr.warning(item.name + ' 无经纬度坐标信息！')
|
||||
return
|
||||
}
|
||||
|
||||
this.map.flyToGraphic(graphic, { radius: 2000 })
|
||||
|
||||
setTimeout(() => {
|
||||
this.graphicLayer.openPopup(graphic)
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
//===================坐标定位处理========================
|
||||
isLonLat(text) {
|
||||
var reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/ /*定义验证表达式*/
|
||||
return reg.test(text) /*进行验证*/
|
||||
}
|
||||
centerAtLonLat(text) {
|
||||
var arr = text.split(',')
|
||||
if (arr.length != 2) {
|
||||
return
|
||||
}
|
||||
|
||||
var jd = Number(arr[0])
|
||||
var wd = Number(arr[1])
|
||||
if (isNaN(jd) || isNaN(wd)) {
|
||||
return
|
||||
}
|
||||
|
||||
this.map.setCameraView({ x: jd, y: wd, minz: 2500 })
|
||||
|
||||
//添加实体
|
||||
var graphic = new mars3d.graphic.PointEntity({
|
||||
position: Cesium.Cartesian3.fromDegrees(jd, wd),
|
||||
style: {
|
||||
color: '#3388ff',
|
||||
pixelSize: 10,
|
||||
outline: true,
|
||||
outlineColor: '#ffffff',
|
||||
outlineWidth: 2,
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
|
||||
clampToGround: true, //贴地
|
||||
visibleDepth: false, //是否被遮挡
|
||||
},
|
||||
})
|
||||
this.graphicLayer.addGraphic(graphic)
|
||||
|
||||
graphic.bindPopup(`<div class="mars-popup-titile">坐标定位</div>
|
||||
<div class="mars-popup-content" >
|
||||
<div><label>经度</label> ${jd}</div>
|
||||
<div><label>纬度</label>${wd}</div>
|
||||
</div>`)
|
||||
|
||||
setTimeout(() => {
|
||||
graphic.openPopup()
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
//===================历史记录相关========================
|
||||
showHistoryList() {
|
||||
$('#querybar_histroy_view').hide()
|
||||
|
||||
var laststorage = haoutil.storage.get(this.storageName) //读取storage值
|
||||
if (laststorage == null) {
|
||||
return
|
||||
}
|
||||
|
||||
this.arrHistory = eval(laststorage)
|
||||
if (this.arrHistory == null || this.arrHistory.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
var inhtml = ''
|
||||
for (var index = this.arrHistory.length - 1; index >= 0; index--) {
|
||||
var item = this.arrHistory[index]
|
||||
inhtml += "<li><i class='fa fa-history'/><a href=\"javascript:queryBaiduPOIWidget.autoSearch('" + item + '\');">' + item + '</a></li>'
|
||||
}
|
||||
$('#querybar_ul_history').html(inhtml)
|
||||
$('#querybar_histroy_view').show()
|
||||
}
|
||||
|
||||
clearHistory() {
|
||||
this.arrHistory = []
|
||||
haoutil.storage.del(this.storageName)
|
||||
|
||||
$('#querybar_ul_history').html('')
|
||||
$('#querybar_histroy_view').hide()
|
||||
}
|
||||
|
||||
//记录历史值
|
||||
addHistory(data) {
|
||||
this.arrHistory = []
|
||||
var laststorage = haoutil.storage.get(this.storageName) //读取storage值
|
||||
if (laststorage != null) {
|
||||
this.arrHistory = eval(laststorage)
|
||||
}
|
||||
//先删除之前相同记录
|
||||
// this.arrHistory.remove(data)
|
||||
|
||||
this.arrHistory.push(data)
|
||||
|
||||
if (this.arrHistory.length > 10) {
|
||||
this.arrHistory.splice(0, 1)
|
||||
}
|
||||
|
||||
laststorage = JSON.stringify(this.arrHistory)
|
||||
haoutil.storage.add(this.storageName, laststorage)
|
||||
}
|
||||
|
||||
//======================查询非百度poi，联合查询处理=================
|
||||
//外部widget是否存在或启用
|
||||
hasExWidget() {
|
||||
if (window['queryBarWidget'] == null) {
|
||||
return false
|
||||
} else {
|
||||
this.exWidget = window.queryBarWidget
|
||||
return true
|
||||
}
|
||||
}
|
||||
autoExTipList(text) {
|
||||
this.exWidget.autoTipList(text, () => {
|
||||
this.autoTipList(text, false)
|
||||
})
|
||||
}
|
||||
//调用外部widget进行查询
|
||||
queryExPOI(text) {
|
||||
var layer = this.graphicLayer
|
||||
|
||||
this.exWidget.strartQueryPOI(text, layer, () => {
|
||||
this.strartQueryPOI(text, false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//注册到widget管理器中。
|
||||
window.queryBaiduPOIWidget = mars3d.widget.bindClass(MyWidget)
|
||||
|
||||
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
||||
})(window, mars3d)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
|
|
@ -1,418 +0,0 @@
|
|||
.querybar-ssk {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.querybar-ssk1 {
|
||||
width: 260px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
text-indent: 8px;
|
||||
outline: none;
|
||||
float: left;
|
||||
border: none;
|
||||
box-shadow: 0px 2px 6px #3a3c42;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
.querybar-ssk1:focus {
|
||||
border: 1px solid rgba(155, 223, 255, 0.9);
|
||||
background-color: rgba(63, 72, 84, 0.9);
|
||||
}
|
||||
|
||||
.querybar-ssk2 {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: rgba(35, 68, 117, 0.85);
|
||||
}
|
||||
|
||||
.querybar-sbox {
|
||||
width: 260px;
|
||||
padding: 10px;
|
||||
box-shadow: 1px 2px 1px rgba(220, 220, 220, 0.3);
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.querybar-ssk1 {
|
||||
width: 200px;
|
||||
}
|
||||
.querybar-ssk2 {
|
||||
width: 45px;
|
||||
}
|
||||
.querybar-sbox {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: #a9a9a9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: #a9a9a9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
/*搜索栏*/
|
||||
|
||||
.querybar-fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.querybar-fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.querybar-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.querybar-clear5 {
|
||||
clear: both;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.querybar-clear10 {
|
||||
clear: both;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.querybar-sstab {
|
||||
height: 18px;
|
||||
padding: 5px;
|
||||
background: #f7f7f7;
|
||||
border: solid 1px #e0e0e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.querybar-sstab ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-sstab ul li {
|
||||
width: 70px;
|
||||
height: 18px;
|
||||
padding: 0 20px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
border-right: solid 1px #e0e0e0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.querybar-sstab ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.querybar-sstab ul li a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-kbtab {
|
||||
padding-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1px #cccccc;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li {
|
||||
list-style-type: none;
|
||||
width: 60px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.querybar-kbtab ul li a:hover {
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-ssls {}
|
||||
|
||||
.querybar-ssls ul {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.querybar-ssls li {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
list-style-type: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.querybar-ssls i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.querybar-ssls li a {
|
||||
text-decoration: none;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-ssls li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.querybar-znbox {
|
||||
width: 260px;
|
||||
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.querybar-znts {}
|
||||
|
||||
.querybar-znts ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-znts li {
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
list-style-type: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.querybar-znts i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.querybar-znts li a {
|
||||
text-decoration: none;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-znts li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.querybar-site {
|
||||
padding: 10px 8px;
|
||||
border-top: solid 1px #eaeaea;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.querybar-site :hover {
|
||||
background-color: rgba(63, 72, 84, 1);
|
||||
}
|
||||
|
||||
.querybar-sitejj {
|
||||
width: 220px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.querybar-sitejj h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
color: #dcdcdc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.querybar-sitejj p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.querybar-star {
|
||||
color: #ff675a;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.querybar-page {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.querybar-ye a {
|
||||
text-decoration: none;
|
||||
padding: 4px 6px;
|
||||
color: #fff;
|
||||
border: solid 1px #ccc;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.querybar-ye a:hover {
|
||||
color: #fff;
|
||||
border-color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-dtit {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
font-size: 14px;
|
||||
text-indent: 10px;
|
||||
background: #3385ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.querybar-itr {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.querybar-itrtit {
|
||||
font-size: 12px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.querybar-more {
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.querybar-itrcon {
|
||||
padding: 8px 0;
|
||||
border-top: dashed 1px #eee;
|
||||
}
|
||||
|
||||
.querybar-itrcon p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
|
||||
.querybar-itrcon a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.querybar-star_orange {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #ffac2d;
|
||||
}
|
||||
|
||||
/*全部分类*/
|
||||
|
||||
.querybar-allsort {
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
padding: 4px;
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
border: solid 1px #e0e0e0;
|
||||
}
|
||||
|
||||
.querybar-sort {
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.querybar-sorta {
|
||||
width: 60px;
|
||||
padding-top: 4px;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.querybar-sortb {
|
||||
width: 170px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.querybar-sortb ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-sortb ul li {
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
padding: 0 10px 2px 0;
|
||||
}
|
||||
|
||||
.querybar-sortb ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.querybar-sortb ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*推荐排序*/
|
||||
|
||||
.querybar-recsort {
|
||||
position: absolute;
|
||||
left: 126px;
|
||||
width: 120px;
|
||||
background: rgba(63, 72, 84, 0.9);
|
||||
border: solid 1px #e0e0e0;
|
||||
}
|
||||
|
||||
.querybar-recsort ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.querybar-recsort ul li {
|
||||
padding: 4px 0 6px 0;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
border-top: solid 1px #e0e0e0;
|
||||
}
|
||||
|
||||
.querybar-recsort ul li a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.querybar-recsort ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<!-- 2017-11-6 09:38:52 | 修改 木遥（微信: http://marsgis.cn/weixin.html ） -->
|
||||
<div id="map-querybar" class="querybar-ssk animation-slide-top no-print-view">
|
||||
<input id="txt_querypoi" type="search" class="querybar-ssk1" placeholder="搜索 地点 " autocomplete="off" />
|
||||
<button id="btn_querypoi" type="button" value="" class="querybar-ssk2">
|
||||
<i class="fa fa-search fa-2x"></i>
|
||||
</button>
|
||||
<div class="querybar-clear"></div>
|
||||
|
||||
<!--历史记录-->
|
||||
<div id="querybar_histroy_view" class="querybar-sbox" style="display: none">
|
||||
<!--<div class="querybar-kbtab">
|
||||
<ul>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('美食');"><div><img src="images/tools/menu1.png"></div><div>美食</div></a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('酒店');"><div><img src="images/tools/menu2.png"></div><div>酒店</div></a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('景点');"><div><img src="images/tools/menu3.png"></div><div>景点</div></a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('小区');"><div><img src="images/tools/menu4.png"></div><div>小区</div></a></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<div class="querybar-ssls">
|
||||
<ul id="querybar_ul_history">
|
||||
<!--<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥安徽总队');">木遥安徽总队</a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥安徽总队医院');">木遥安徽总队医院</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:queryGaodePOIWidget.clearHistory();" class="querybar-more">删除历史</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--搜索智能提示-->
|
||||
<div id="querybar_autotip_view" class="querybar-znbox" style="display: none">
|
||||
<div class="querybar-znts">
|
||||
<ul id="querybar_ul_autotip">
|
||||
<!--<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥招待所');">木遥招待所</a></li>
|
||||
<li><a href="javascript:queryBaiduPOIWidget.autoSearch('木遥医院');">木遥医院</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--搜索结果列表-->
|
||||
<div id="querybar_resultlist_view" class="querybar-sbox" style="display: none">
|
||||
<!--<div class="querybar-site">
|
||||
<div class="querybar-sitejj">
|
||||
<h3>1、木遥安徽总队</h3>
|
||||
<p>合肥市安徽区玉兰大道8号</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="querybar-site">
|
||||
<div class="querybar-sitejj">
|
||||
<h3>2、木遥安徽总队医院</h3>
|
||||
<p>合肥市庐阳区长丰路78号</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="querybar-site">
|
||||
<div class="querybar-sitejj">
|
||||
<h3>3、木遥医院-公交车站</h3>
|
||||
<p>113路;125路;138路;t13b路;t13路;</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="querybar-page">
|
||||
<div class="querybar-fl">
|
||||
找到<strong>134</strong>条结果
|
||||
</div>
|
||||
<div class="querybar-ye querybar-fr">
|
||||
1/7页 <a href="javascript:void(0)">首页</a> <a href="javascript:void(0)"><</a> <a href="javascript:void(0)">></a>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!--查看单条结果-->
|
||||
<div id="querybar_detail_view" class="querybar-sbox" style="display: none">
|
||||
<div class="querybar-dtit">
|
||||
<span id="lbl_poi_name">名称</span>
|
||||
<a id="querybar_detail_back" style="float: right; cursor: pointer; font-size: 12px; color: #ffffff"> <<返回 </a>
|
||||
</div>
|
||||
<div class="querybar-itr">
|
||||
<div class="querybar-itrtit">
|
||||
<img id="querybar_img_jianjie" src="images/jj.png" class="querybar-fl" /> 简介
|
||||
<a id="btnShowDetail" href="" target="_blank" class="querybar-more">详情></a>
|
||||
</div>
|
||||
<div id="poi_detail_info" class="querybar-itrcon">
|
||||
<!--<p>类别：总队机关</p>
|
||||
<p>电话：0551-65395595</p>
|
||||
<p>地址：安徽省合肥市安徽区望江西路600号</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,584 +0,0 @@
|
|||
"use script"; //开发环境建议开启严格模式
|
||||
(function (window, mars3d) {
|
||||
//创建widget类，需要继承BaseWidget
|
||||
class MyWidget extends mars3d.widget.BaseWidget {
|
||||
//外部资源配置
|
||||
get resources() {
|
||||
return ["view.css"];
|
||||
}
|
||||
|
||||
//弹窗配置
|
||||
get view() {
|
||||
return {
|
||||
type: "append",
|
||||
url: "view.html",
|
||||
parent: "body",
|
||||
};
|
||||
}
|
||||
|
||||
//初始化[仅执行1次]
|
||||
create() {
|
||||
this.storageName = "mars3d_queryGaodePOI";
|
||||
this.pageSize = 6;
|
||||
this.allpage = 0;
|
||||
this.thispage = 0;
|
||||
|
||||
//创建矢量数据图层
|
||||
this.graphicLayer = new mars3d.layer.GraphicLayer({
|
||||
name: this.config.name,
|
||||
pid: 99, //图层管理 中使用，父节点id
|
||||
});
|
||||
//鼠标单击后的信息面板弹窗
|
||||
this.graphicLayer.bindPopup(
|
||||
function (event) {
|
||||
let item = event.graphic?.attr;
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
var name;
|
||||
if (item.detail_info && item.detail_info.detail_url) {
|
||||
name = '<a href="' + item.detail_info.detail_url + '" target="_black" style="color: #ffffff; ">' + item.name + "</a>";
|
||||
} else {
|
||||
name = item.name;
|
||||
}
|
||||
|
||||
var inHtml = '<div class="mars-popup-titile">' + name + '</div><div class="mars-popup-content" >';
|
||||
|
||||
var phone = $.trim(item.tel);
|
||||
if (phone != "") {
|
||||
inHtml += "<div><label>电话</label>" + phone + "</div>";
|
||||
}
|
||||
|
||||
var dz = $.trim(item.address);
|
||||
if (dz != "") {
|
||||
inHtml += "<div><label>地址</label>" + dz + "</div>";
|
||||
}
|
||||
|
||||
if (item.type) {
|
||||
var fl = $.trim(item.type);
|
||||
if (fl != "") {
|
||||
inHtml += "<div><label>类别</label>" + fl + "</div>";
|
||||
}
|
||||
}
|
||||
inHtml += "</div>";
|
||||
|
||||
return inHtml;
|
||||
},
|
||||
{
|
||||
anchor: [0, -10],
|
||||
}
|
||||
);
|
||||
|
||||
//查询控制器
|
||||
this._queryPoi = new mars3d.query.GaodePOI({
|
||||
// city: '合肥市',
|
||||
});
|
||||
}
|
||||
//每个窗口创建完成后调用
|
||||
winCreateOK(opt, result) {
|
||||
if (opt.type != "append") {
|
||||
return;
|
||||
}
|
||||
var that = this;
|
||||
var img = $("#map-querybar img");
|
||||
img.each((index, item) => {
|
||||
$(item).attr("src", this.path + $(item).attr("src"));
|
||||
});
|
||||
|
||||
if (this.config.position) {
|
||||
$("#map-querybar").css(this.config.position);
|
||||
}
|
||||
if (this.config.style) {
|
||||
$("#map-querybar").css(this.config.style);
|
||||
}
|
||||
|
||||
// 搜索框
|
||||
$("#txt_querypoi").click(function () {
|
||||
// 文本框内容为空
|
||||
if ($.trim($(this).val()).length == 0) {
|
||||
that.hideAllQueryBarView();
|
||||
that.showHistoryList(); // 显示历史记录
|
||||
}
|
||||
});
|
||||
|
||||
var timetik = 0;
|
||||
|
||||
// 搜索框绑定文本框值发生变化,隐藏默认搜索信息栏,显示匹配结果列表
|
||||
$("#txt_querypoi").bind("input propertychange", () => {
|
||||
clearTimeout(timetik);
|
||||
timetik = setTimeout(() => {
|
||||
this.hideAllQueryBarView();
|
||||
this.clearLayers();
|
||||
|
||||
var queryVal = $.trim($("#txt_querypoi").val());
|
||||
if (queryVal.length == 0) {
|
||||
// 文本框内容为空,显示历史记录
|
||||
this.showHistoryList();
|
||||
} else {
|
||||
this.autoTipList(queryVal, true);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// 点击搜索查询按钮
|
||||
$("#btn_querypoi").click(() => {
|
||||
clearTimeout(timetik);
|
||||
this.hideAllQueryBarView();
|
||||
|
||||
var queryVal = $.trim($("#txt_querypoi").val());
|
||||
this.strartQueryPOI(queryVal, true);
|
||||
});
|
||||
//绑定回车键
|
||||
$("#txt_querypoi").bind("keydown", (event) => {
|
||||
if (event.keyCode == "13") {
|
||||
$("#btn_querypoi").click();
|
||||
}
|
||||
});
|
||||
|
||||
// 返回查询结果面板界面
|
||||
$("#querybar_detail_back").click(() => {
|
||||
this.hideAllQueryBarView();
|
||||
$("#querybar_resultlist_view").show();
|
||||
});
|
||||
}
|
||||
//打开激活
|
||||
activate() {
|
||||
this.map.addLayer(this.graphicLayer);
|
||||
|
||||
$(".mars3d-locationbar").append('<div id="queryAddress" class="mars3d-locationbar-content" style="margin-right: 50px;"></div>');
|
||||
|
||||
//单击地图事件
|
||||
this.map.on(mars3d.EventType.clickMap, this.onMapClick, this);
|
||||
this.map.on(mars3d.EventType.cameraChanged, this.onMapCameraChanged, this);
|
||||
}
|
||||
//关闭释放
|
||||
disable() {
|
||||
this.map.removeLayer(this.graphicLayer);
|
||||
|
||||
//释放单击地图事件
|
||||
this.map.off(mars3d.EventType.clickMap, this.onMapClick, this);
|
||||
this.map.off(mars3d.EventType.cameraChanged, this.onMapCameraChanged, this);
|
||||
|
||||
$("#queryAddress").remove();
|
||||
|
||||
this.hideAllQueryBarView();
|
||||
this.clearLayers();
|
||||
}
|
||||
onMapClick(event) {
|
||||
// 点击地图区域,隐藏所有弹出框
|
||||
if ($.trim($("#txt_querypoi").val()).length == 0) {
|
||||
this.hideAllQueryBarView();
|
||||
$("#txt_querypoi").blur();
|
||||
}
|
||||
}
|
||||
onMapCameraChanged(event) {
|
||||
let radius = this.map.camera.positionCartographic.height; //单位：米
|
||||
if (radius > 100000) {
|
||||
this.address = null;
|
||||
$("#queryAddress").html("");
|
||||
return;
|
||||
}
|
||||
|
||||
this._queryPoi.getAddress({
|
||||
location: this.map.getCenter(),
|
||||
success: (result) => {
|
||||
console.log("地址", result);
|
||||
this.address = result;
|
||||
|
||||
$("#queryAddress").html("地址：" + result.address);
|
||||
},
|
||||
});
|
||||
}
|
||||
hideAllQueryBarView() {
|
||||
$("#querybar_histroy_view").hide();
|
||||
$("#querybar_autotip_view").hide();
|
||||
$("#querybar_detail_view").hide();
|
||||
$("#querybar_resultlist_view").hide();
|
||||
}
|
||||
|
||||
// 点击面板条目,自动填充搜索框,并展示搜索结果面板
|
||||
autoSearch(name) {
|
||||
$("#txt_querypoi").val(name);
|
||||
$("#btn_querypoi").trigger("click");
|
||||
}
|
||||
|
||||
//===================与后台交互========================
|
||||
|
||||
//显示智能提示搜索结果
|
||||
autoTipList(text, queryEx) {
|
||||
//输入经纬度数字时
|
||||
if (this.isLonLat(text)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//查询外部widget
|
||||
if (this.hasExWidget() && queryEx) {
|
||||
this.autoExTipList(text);
|
||||
return;
|
||||
}
|
||||
//查询外部widget
|
||||
|
||||
//搜索提示
|
||||
this._queryPoi.autoTip({
|
||||
text: text,
|
||||
city: this.address?.city,
|
||||
location: this.map.getCenter(),
|
||||
success: (result) => {
|
||||
var inhtml = "";
|
||||
var pois = result.list;
|
||||
for (var index = 0; index < pois.length; index++) {
|
||||
var name = pois[index].name;
|
||||
// var num = pois[index].num;
|
||||
// if (num > 0) continue;
|
||||
|
||||
inhtml += "<li><i class='fa fa-search'></i><a href=\"javascript:queryGaodePOIWidget.autoSearch('" + name + "');\">" + name + "</a></li>";
|
||||
}
|
||||
if (inhtml.length > 0) {
|
||||
$("#querybar_ul_autotip").html(inhtml);
|
||||
$("#querybar_autotip_view").show();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 根据输入框内容，查询显示列表
|
||||
strartQueryPOI(text, queryEx) {
|
||||
if (text.length == 0) {
|
||||
toastr.warning("请输入搜索关键字！");
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO:根据文本框输入内容,从数据库模糊查询到所有匹配结果（分页显示）
|
||||
this.addHistory(text);
|
||||
|
||||
this.hideAllQueryBarView();
|
||||
|
||||
//输入经纬度数字时
|
||||
if (this.isLonLat(text)) {
|
||||
this.centerAtLonLat(text);
|
||||
return;
|
||||
}
|
||||
|
||||
//查询外部widget
|
||||
if (this.hasExWidget() && queryEx) {
|
||||
var qylist = this.queryExPOI(text);
|
||||
return;
|
||||
}
|
||||
//查询外部widget
|
||||
|
||||
this.thispage = 1;
|
||||
this.queryText = text;
|
||||
|
||||
this.query_city = this.address?.city;
|
||||
// this.query_location = this.map.getCenter()
|
||||
// this.query_radius = this.map.camera.positionCartographic.height //单位：米
|
||||
|
||||
this.queryTextByServer();
|
||||
}
|
||||
queryTextByServer() {
|
||||
//查询获取数据
|
||||
this._queryPoi.queryText({
|
||||
text: this.queryText,
|
||||
count: this.pageSize,
|
||||
page: this.thispage - 1,
|
||||
city: this.query_city,
|
||||
// location: this.query_location,
|
||||
// radius: this.query_radius,
|
||||
success: (result) => {
|
||||
if (!this.isActivate) {
|
||||
return;
|
||||
}
|
||||
this.showPOIPage(result.list, result.allcount);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
//===================显示查询结果处理========================
|
||||
showPOIPage(data, counts) {
|
||||
// count -- 显示搜索结果的数量；data -- 结果的属性，如地址电话等
|
||||
|
||||
if (counts < data.length) {
|
||||
counts = data.length;
|
||||
}
|
||||
this.allpage = Math.ceil(counts / this.pageSize);
|
||||
|
||||
var inhtml = "";
|
||||
if (counts == 0) {
|
||||
inhtml += '<div class="querybar-page"><div class="querybar-fl">没有找到"<strong>' + this.queryText + '</strong>"相关结果</div></div>';
|
||||
} else {
|
||||
this.objResultData = this.objResultData || {};
|
||||
for (var index = 0; index < data.length; index++) {
|
||||
var item = data[index];
|
||||
var startIdx = (this.thispage - 1) * this.pageSize;
|
||||
item.index = startIdx + (index + 1);
|
||||
|
||||
var _id = index;
|
||||
var _mc;
|
||||
if (item.detail_info && item.detail_info.detail_url) {
|
||||
_mc = '<a href="' + item.detail_info.detail_url + '" target="_black" style="color: #ffffff; ">' + item.name + "</a>";
|
||||
} else {
|
||||
_mc = item.name;
|
||||
}
|
||||
|
||||
inhtml +=
|
||||
'<div class="querybar-site" onclick="queryGaodePOIWidget.showDetail(\'' +
|
||||
_id +
|
||||
'\')"> <div class="querybar-sitejj"> <h3>' +
|
||||
item.index +
|
||||
"、" +
|
||||
_mc +
|
||||
"</h3> <p>" +
|
||||
(item.address || "") +
|
||||
"</p> </div> </div>";
|
||||
|
||||
this.objResultData[_id] = item;
|
||||
}
|
||||
|
||||
//分页信息
|
||||
var _fyhtml;
|
||||
if (this.allpage > 1) {
|
||||
_fyhtml =
|
||||
'<div class="querybar-ye querybar-fr">' +
|
||||
this.thispage +
|
||||
"/" +
|
||||
this.allpage +
|
||||
'页 <a href="javascript:queryGaodePOIWidget.showFirstPage()">首页</a> <a href="javascript:queryGaodePOIWidget.showPretPage()"><</a> <a href="javascript:queryGaodePOIWidget.showNextPage()">></a> </div>';
|
||||
} else {
|
||||
_fyhtml = "";
|
||||
}
|
||||
|
||||
//底部信息
|
||||
inhtml += '<div class="querybar-page"><div class="querybar-fl">找到<strong>' + counts + "</strong>条结果</div>" + _fyhtml + "</div>";
|
||||
}
|
||||
$("#querybar_resultlist_view").html(inhtml);
|
||||
$("#querybar_resultlist_view").show();
|
||||
|
||||
this.showPOIArr(data);
|
||||
if (counts == 1) {
|
||||
this.showDetail("0");
|
||||
}
|
||||
}
|
||||
showFirstPage() {
|
||||
this.thispage = 1;
|
||||
this.queryTextByServer();
|
||||
}
|
||||
showNextPage() {
|
||||
this.thispage = this.thispage + 1;
|
||||
if (this.thispage > this.allpage) {
|
||||
this.thispage = this.allpage;
|
||||
toastr.warning("当前已是最后一页了");
|
||||
return;
|
||||
}
|
||||
this.queryTextByServer();
|
||||
}
|
||||
|
||||
showPretPage() {
|
||||
this.thispage = this.thispage - 1;
|
||||
if (this.thispage < 1) {
|
||||
this.thispage = 1;
|
||||
toastr.warning("当前已是第一页了");
|
||||
return;
|
||||
}
|
||||
this.queryTextByServer();
|
||||
}
|
||||
//点击单个结果,显示详细
|
||||
showDetail(id) {
|
||||
var item = this.objResultData[id];
|
||||
this.flyTo(item);
|
||||
}
|
||||
clearLayers() {
|
||||
this.graphicLayer.closePopup();
|
||||
this.graphicLayer.clear();
|
||||
}
|
||||
showPOIArr(arr) {
|
||||
this.clearLayers();
|
||||
|
||||
arr.forEach((item) => {
|
||||
var jd = Number(item.x);
|
||||
var wd = Number(item.y);
|
||||
if (isNaN(jd) || isNaN(wd)) {
|
||||
return;
|
||||
}
|
||||
|
||||
item.x = jd;
|
||||
item.y = wd;
|
||||
|
||||
//添加实体
|
||||
var graphic = new mars3d.graphic.PointEntity({
|
||||
position: Cesium.Cartesian3.fromDegrees(jd, wd),
|
||||
style: {
|
||||
pixelSize: 10,
|
||||
color: "#3388ff",
|
||||
outline: true,
|
||||
outlineColor: "#ffffff",
|
||||
outlineWidth: 2,
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
|
||||
clampToGround: true, //贴地
|
||||
visibleDepth: false, //是否被遮挡
|
||||
label: {
|
||||
text: item.name,
|
||||
font_size: 20,
|
||||
color: "rgb(240,255,255)",
|
||||
outline: true,
|
||||
outlineWidth: 2,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffsetY: -10, //偏移量
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
|
||||
clampToGround: true, //贴地
|
||||
visibleDepth: false, //是否被遮挡
|
||||
},
|
||||
},
|
||||
attr: item,
|
||||
});
|
||||
this.graphicLayer.addGraphic(graphic);
|
||||
|
||||
item._graphic = graphic;
|
||||
});
|
||||
|
||||
if (arr.length > 1) {
|
||||
this.graphicLayer.flyTo();
|
||||
}
|
||||
}
|
||||
flyTo(item) {
|
||||
var graphic = item._graphic;
|
||||
if (graphic == null) {
|
||||
window.toastr.warning(item.name + " 无经纬度坐标信息！");
|
||||
return;
|
||||
}
|
||||
|
||||
this.map.flyToGraphic(graphic, { radius: 2000 });
|
||||
|
||||
setTimeout(() => {
|
||||
this.graphicLayer.openPopup(graphic);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
//===================坐标定位处理========================
|
||||
isLonLat(text) {
|
||||
var reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/; /*定义验证表达式*/
|
||||
return reg.test(text); /*进行验证*/
|
||||
}
|
||||
centerAtLonLat(text) {
|
||||
var arr = text.split(",");
|
||||
if (arr.length != 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
var jd = Number(arr[0]);
|
||||
var wd = Number(arr[1]);
|
||||
if (isNaN(jd) || isNaN(wd)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.map.setCameraView({ x: jd, y: wd, minz: 2500 });
|
||||
|
||||
//添加实体
|
||||
var graphic = new mars3d.graphic.PointEntity({
|
||||
position: Cesium.Cartesian3.fromDegrees(jd, wd),
|
||||
style: {
|
||||
color: "#3388ff",
|
||||
pixelSize: 10,
|
||||
outline: true,
|
||||
outlineColor: "#ffffff",
|
||||
outlineWidth: 2,
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
|
||||
clampToGround: true, //贴地
|
||||
visibleDepth: false, //是否被遮挡
|
||||
},
|
||||
});
|
||||
this.graphicLayer.addGraphic(graphic);
|
||||
|
||||
graphic.bindPopup(`<div class="mars-popup-titile">坐标定位</div>
|
||||
<div class="mars-popup-content" >
|
||||
<div><label>经度</label> ${jd}</div>
|
||||
<div><label>纬度</label>${wd}</div>
|
||||
</div>`);
|
||||
setTimeout(() => {
|
||||
graphic.openPopup();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
//===================历史记录相关========================
|
||||
showHistoryList() {
|
||||
$("#querybar_histroy_view").hide();
|
||||
|
||||
var laststorage = haoutil.storage.get(this.storageName); //读取storage值
|
||||
if (laststorage == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.arrHistory = eval(laststorage);
|
||||
if (this.arrHistory == null || this.arrHistory.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var inhtml = "";
|
||||
for (var index = this.arrHistory.length - 1; index >= 0; index--) {
|
||||
var item = this.arrHistory[index];
|
||||
inhtml += "<li><i class='fa fa-history'/><a href=\"javascript:queryGaodePOIWidget.autoSearch('" + item + "');\">" + item + "</a></li>";
|
||||
}
|
||||
$("#querybar_ul_history").html(inhtml);
|
||||
$("#querybar_histroy_view").show();
|
||||
}
|
||||
|
||||
clearHistory() {
|
||||
this.arrHistory = [];
|
||||
haoutil.storage.del(this.storageName);
|
||||
|
||||
$("#querybar_ul_history").html("");
|
||||
$("#querybar_histroy_view").hide();
|
||||
}
|
||||
|
||||
//记录历史值
|
||||
addHistory(data) {
|
||||
this.arrHistory = [];
|
||||
var laststorage = haoutil.storage.get(this.storageName); //读取storage值
|
||||
if (laststorage != null) {
|
||||
this.arrHistory = eval(laststorage);
|
||||
}
|
||||
//先删除之前相同记录
|
||||
haoutil.array.remove(this.arrHistory, data);
|
||||
|
||||
this.arrHistory.push(data);
|
||||
|
||||
if (this.arrHistory.length > 10) {
|
||||
this.arrHistory.splice(0, 1);
|
||||
}
|
||||
|
||||
laststorage = JSON.stringify(this.arrHistory);
|
||||
haoutil.storage.add(this.storageName, laststorage);
|
||||
}
|
||||
|
||||
//======================查询非百度poi，联合查询处理=================
|
||||
//外部widget是否存在或启用
|
||||
hasExWidget() {
|
||||
if (window["queryBarWidget"] == null) {
|
||||
return false;
|
||||
} else {
|
||||
this.exWidget = window.queryBarWidget;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
autoExTipList(text) {
|
||||
this.exWidget.autoTipList(text, () => {
|
||||
this.autoTipList(text, false);
|
||||
});
|
||||
}
|
||||
//调用外部widget进行查询
|
||||
queryExPOI(text) {
|
||||
var layer = this.graphicLayer;
|
||||
|
||||
this.exWidget.strartQueryPOI(text, layer, () => {
|
||||
this.strartQueryPOI(text, false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//注册到widget管理器中。
|
||||
window.queryGaodePOIWidget = mars3d.widget.bindClass(MyWidget);
|
||||
|
||||
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
||||
})(window, mars3d);
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* @desc 函数节流
|
||||
* @param func 函数
|
||||
* @param wait 延迟执行毫秒数
|
||||
* @param type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
|
||||
*/
|
||||
export const throttle = (func, wait = 1000, type = 1) => {
|
||||
let previous = 0;
|
||||
let timeout;
|
||||
return function () {
|
||||
let context = this;
|
||||
let args = arguments;
|
||||
if (type === 1) {
|
||||
let now = Date.now();
|
||||
|
||||
if (now - previous > wait) {
|
||||
func.apply(context, args);
|
||||
previous = now;
|
||||
}
|
||||
} else if (type === 2) {
|
||||
if (!timeout) {
|
||||
timeout = setTimeout(() => {
|
||||
timeout = null;
|
||||
func.apply(context, args)
|
||||
}, wait)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
|
|
|
|||
|
|
@ -21,26 +21,16 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center">
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" show-overflow-tooltip align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sex == 0 ? '男' : '女'}}</span>
|
||||
</template>
|
||||
<el-table-column prop="gender" label="性别" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cardNo" label="身份证号" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="politicalOutlook" label="政治面貌" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="education" label="学历" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
|
||||
@pagination="handleCurrentChange" />
|
||||
|
|
@ -50,11 +40,8 @@
|
|||
<el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini body-small addWindow"
|
||||
v-el-drag-dialog :title="titleStr" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="addServiceVisible">
|
||||
<el-container style="overflow-y:hidden;">
|
||||
<el-container v-if="addServiceVisible">
|
||||
<AddForm @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<AddForm v-if="addServiceVisible" @addSuccess="addSuccess" :detailInfo="detailInfo"
|
||||
@close="addServiceVisible = false"></AddForm>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
|
@ -68,6 +55,7 @@
|
|||
import extend from "@/extensions/delRows.js"
|
||||
import * as modules from '@/api/modules'
|
||||
import * as login from '@/api/login'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import permissionBtn from '@/components/PermissionBtn'
|
||||
|
|
@ -103,7 +91,7 @@
|
|||
pageSize: 20,
|
||||
name: null,
|
||||
},
|
||||
detailInfo:[]
|
||||
detailInfo: []
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -122,7 +110,7 @@
|
|||
methods: {
|
||||
add() {
|
||||
this.addServiceVisible = true;
|
||||
this.detailInfo=[]
|
||||
this.detailInfo = []
|
||||
this.titleStr = '添加'
|
||||
},
|
||||
addSuccess() {
|
||||
|
|
@ -131,7 +119,7 @@
|
|||
},
|
||||
del() {
|
||||
var _this = this
|
||||
if(this.multipleSelection.length != 1){
|
||||
if (this.multipleSelection.length != 1) {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '请选择一条数据进行删除'
|
||||
|
|
@ -143,7 +131,7 @@
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
postMethodCommon("/Grid/DeleteKeyUser?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
postMethodCommon("/FireGrid/DeleteFireFighter?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
|
|
@ -161,7 +149,7 @@
|
|||
|
||||
},
|
||||
react() {
|
||||
if(this.multipleSelection.length != 1){
|
||||
if (this.multipleSelection.length != 1) {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '请选择一条数据进行编辑'
|
||||
|
|
@ -234,21 +222,11 @@
|
|||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
getMethodCommon("/Grid/LoadKeyUser", this.listQuery).then(res => {
|
||||
getMethodCommon("/FireGrid/GetFireFighter", this.listQuery).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.tableData = res.data
|
||||
this.tableData.forEach((item, index) => {
|
||||
switch (item.state) {
|
||||
case 0: this.tableData[index].state = "未审核";
|
||||
break;
|
||||
case 1: this.tableData[index].state = "审核通过";
|
||||
break;
|
||||
case 2: this.tableData[index].state = "未通过";
|
||||
break;
|
||||
case 3: this.tableData[index].state = "全部";
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
this.total = res.count
|
||||
this.listLoading = false
|
||||
}
|
||||
|
|
@ -280,9 +258,40 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination__jump{
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/*滚动条宽度*/
|
||||
height: 10px;
|
||||
/*滚动条高度*/
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
box-shadow: 0px 1px 3px #071e4a inset;
|
||||
/*滚动条的背景区域的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0px 1px 3px #00a0e9 inset;
|
||||
/*滚动条的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .sticky {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
|
@ -363,6 +372,13 @@
|
|||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 10px;
|
||||
/*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
border-left: 1px solid #00EDE8;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,24 @@
|
|||
<template>
|
||||
<div style="width:100%;height:100%;overflow:auto;padding:0px 23px; background: rgba(0, 9, 34, 0.6);">
|
||||
<div style="width:100%;height:40vh;padding:0px 23px; z-index:10;background: rgba(0, 9, 34, 0.6);">
|
||||
<el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">
|
||||
<el-form-item label="姓名: " prop="userName">
|
||||
<el-input v-model="addForm.userName" style="width:300px ;"></el-input>
|
||||
<el-form-item label="姓名: " prop="name">
|
||||
<el-input v-model="addForm.name" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="身份证号: " prop="cardNo" >
|
||||
<el-input v-model="addForm.cardNo" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话: " prop="phone">
|
||||
<el-input v-model="addForm.phone" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="性别: " prop="sex">
|
||||
<el-radio-group v-model="addForm.sex">
|
||||
<el-radio label="0">男</el-radio>
|
||||
<el-radio label="1">女</el-radio>
|
||||
<el-form-item label="性别: " prop="gender">
|
||||
<el-radio-group v-model="addForm.gender">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="政治面貌：" prop="politicalOutlook">
|
||||
<el-select v-model="addForm.politicalOutlook" placeholder="请选择" style="width:300px ;">
|
||||
<el-option label="群众" value="群众"></el-option>
|
||||
<el-option label="中共党员" value="中共党员"></el-option>
|
||||
</el-select>
|
||||
<el-form-item :label="'所属乡镇'">
|
||||
<treeselect :options="orgsTree" :default-expand-level="3" :multiple="true" :flat="true" :open-on-click="true"
|
||||
:open-on-focus="true" :clear-on-select="true" v-model="selectOrgs" style="z-index: 2026;">
|
||||
</treeselect>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学历：" prop="education">
|
||||
<el-select v-model="addForm.education" placeholder="请选择" style="width:300px ;">
|
||||
<el-option label="小学" value="小学"></el-option>
|
||||
<el-option label="初中" value="初中"></el-option>
|
||||
<el-option label="高中" value="高中"></el-option>
|
||||
<el-option label="专科" value="专科"></el-option>
|
||||
<el-option label="本科" value="本科"></el-option>
|
||||
<el-option label="研究生" value="研究生"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-form-item style="margin-top: 16%;">
|
||||
<el-button @click="close()">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" v-if="detailInfo.length == 0">保存</el-button>
|
||||
<el-button type="primary" @click="createForm('form')" v-else>编辑</el-button>
|
||||
|
|
@ -48,6 +27,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listToTreeSelect } from '@/utils'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { postMethodCommon, getMethodCommon } from '../../../../api/common';
|
||||
import { validateMobile, validID, validateStock } from './validate.js'
|
||||
import form from '../../../../store/modules/form';
|
||||
|
|
@ -55,64 +37,111 @@
|
|||
// let BASE_IMAGE_URL = BASE_IMAGE_API_URL;
|
||||
export default {
|
||||
name: "AddForm",
|
||||
props:['detailInfo'],
|
||||
props: ['detailInfo'],
|
||||
components: {
|
||||
Treeselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
BASE_IMAGE_URL: BASE_IMAGE_URL,
|
||||
addForm: {
|
||||
sex: "0"
|
||||
gender: "男"
|
||||
},
|
||||
rules: {
|
||||
userName: [
|
||||
name: [
|
||||
{ required: true, message: '姓名不能为空', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '电话不能为空', trigger: 'blur' },
|
||||
{ validator: validateMobile.bind(this), trigger: 'blur' }
|
||||
],
|
||||
sex: [
|
||||
gender: [
|
||||
{ required: true, message: '性别不能为空', trigger: 'blur' },
|
||||
],
|
||||
cardNo: [
|
||||
{ required: true, message: '身份证号不能为空', trigger: 'blur' },
|
||||
{ validator: validID.bind(this), trigger: 'blur' }
|
||||
],
|
||||
politicalOutlook: [
|
||||
{ required: true, message: '政治面貌不能为空', trigger: 'blur' },
|
||||
],
|
||||
education: [
|
||||
{ required: true, message: '学历不能为空', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
dialogFormVisible: false,
|
||||
orgsTree: [], // 用户可访问到的所有机构组成的树
|
||||
selectRoles: [], // 用户分配的角色
|
||||
selectRoleNames: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.detailInfo)
|
||||
if(this.detailInfo.length == 1){
|
||||
this.addForm=this.detailInfo[0]
|
||||
this.addForm.sex = this.addForm.sex.toString()
|
||||
}else{
|
||||
this.addForm={
|
||||
sex:"0"
|
||||
if (this.detailInfo.length == 1) {
|
||||
this.getDetail()
|
||||
} else {
|
||||
this.addForm = {
|
||||
gender: "男"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectOrgs: {
|
||||
get: function () {
|
||||
console.log(this.detailInfo)
|
||||
if (this.detailInfo.length == 1) {
|
||||
return this.addForm.street
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
set: function (v) {
|
||||
console.log('set org:', v)
|
||||
var _this = this
|
||||
_this.addForm.street = v
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _this = this;
|
||||
var querys = {
|
||||
regionName: localStorage.getItem("areaENName")
|
||||
}
|
||||
getMethodCommon("/Grid/LoadAllGrid", querys).then(res => {
|
||||
console.log("data", res.data);
|
||||
if (res.code == 200) {
|
||||
var list = res.data
|
||||
var arr = this.traverse(list)
|
||||
console.log(arr)
|
||||
_this.orgsTree = arr;
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
getDetail() {
|
||||
getMethodCommon("/FireGrid/GetSingleFireFighter?id=" + this.detailInfo[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.addForm = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
traverse(arr) {
|
||||
if (arr && arr.length > 0) {
|
||||
var list = []
|
||||
arr.forEach(childelement => {
|
||||
list.push({
|
||||
id: childelement.id,
|
||||
label: childelement.areaName,
|
||||
parentId: childelement.pId || null,
|
||||
children: this.traverse(childelement.child)
|
||||
})
|
||||
});
|
||||
return list
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
var _this =this
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/AddKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/AddFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"添加成功"
|
||||
type: "success",
|
||||
message: "添加成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -122,19 +151,18 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
createForm(){
|
||||
var _this =this
|
||||
createForm() {
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/EditKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/EditFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"编辑成功"
|
||||
type: "success",
|
||||
message: "编辑成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -151,6 +179,10 @@
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .vue-treeselect__control {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,26 +21,17 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center">
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" show-overflow-tooltip align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sex == 0 ? '男' : '女'}}</span>
|
||||
</template>
|
||||
<el-table-column prop="gender" label="性别" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cardNo" label="身份证号" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="politicalOutlook" label="政治面貌" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="education" label="学历" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
|
||||
@pagination="handleCurrentChange" />
|
||||
|
|
@ -50,11 +41,7 @@
|
|||
<el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini body-small addWindow"
|
||||
v-el-drag-dialog :title="titleStr" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="addServiceVisible">
|
||||
<el-container style="overflow-y:hidden;">
|
||||
<el-container v-if="addServiceVisible">
|
||||
<AddForm @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<AddForm v-if="addServiceVisible" @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
|
@ -68,6 +55,7 @@
|
|||
import extend from "@/extensions/delRows.js"
|
||||
import * as modules from '@/api/modules'
|
||||
import * as login from '@/api/login'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import permissionBtn from '@/components/PermissionBtn'
|
||||
|
|
@ -143,7 +131,7 @@
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
postMethodCommon("/Grid/DeleteKeyUser?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
postMethodCommon("/FireGrid/DeleteFireFighter?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
|
|
@ -234,21 +222,11 @@
|
|||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
getMethodCommon("/Grid/LoadKeyUser", this.listQuery).then(res => {
|
||||
getMethodCommon("/FireGrid/GetFireFighter", this.listQuery).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.tableData = res.data
|
||||
this.tableData.forEach((item, index) => {
|
||||
switch (item.state) {
|
||||
case 0: this.tableData[index].state = "未审核";
|
||||
break;
|
||||
case 1: this.tableData[index].state = "审核通过";
|
||||
break;
|
||||
case 2: this.tableData[index].state = "未通过";
|
||||
break;
|
||||
case 3: this.tableData[index].state = "全部";
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
this.total = res.count
|
||||
this.listLoading = false
|
||||
}
|
||||
|
|
@ -280,6 +258,35 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/*滚动条宽度*/
|
||||
height: 10px;
|
||||
/*滚动条高度*/
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
box-shadow: 0px 1px 3px #071e4a inset;
|
||||
/*滚动条的背景区域的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0px 1px 3px #00a0e9 inset;
|
||||
/*滚动条的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination__jump{
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,24 @@
|
|||
<template>
|
||||
<div style="width:100%;height:100%;overflow:auto;padding:0px 23px; background: rgba(0, 9, 34, 0.6);">
|
||||
<div style="width:100%;height:40vh;padding:0px 23px; z-index:10;background: rgba(0, 9, 34, 0.6);">
|
||||
<el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">
|
||||
<el-form-item label="姓名: " prop="userName">
|
||||
<el-input v-model="addForm.userName" style="width:300px ;"></el-input>
|
||||
<el-form-item label="姓名: " prop="name">
|
||||
<el-input v-model="addForm.name" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="身份证号: " prop="cardNo" >
|
||||
<el-input v-model="addForm.cardNo" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话: " prop="phone">
|
||||
<el-input v-model="addForm.phone" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="性别: " prop="sex">
|
||||
<el-radio-group v-model="addForm.sex">
|
||||
<el-radio label="0">男</el-radio>
|
||||
<el-radio label="1">女</el-radio>
|
||||
<el-form-item label="性别: " prop="gender">
|
||||
<el-radio-group v-model="addForm.gender">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="政治面貌：" prop="politicalOutlook">
|
||||
<el-select v-model="addForm.politicalOutlook" placeholder="请选择" style="width:300px ;">
|
||||
<el-option label="群众" value="群众"></el-option>
|
||||
<el-option label="中共党员" value="中共党员"></el-option>
|
||||
</el-select>
|
||||
<el-form-item :label="'所属乡镇'">
|
||||
<treeselect :options="orgsTree" :default-expand-level="3" :multiple="true" :flat="true" :open-on-click="true"
|
||||
:open-on-focus="true" :clear-on-select="true" v-model="selectOrgs" style="z-index: 2026;">
|
||||
</treeselect>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学历：" prop="education">
|
||||
<el-select v-model="addForm.education" placeholder="请选择" style="width:300px ;">
|
||||
<el-option label="小学" value="小学"></el-option>
|
||||
<el-option label="初中" value="初中"></el-option>
|
||||
<el-option label="高中" value="高中"></el-option>
|
||||
<el-option label="专科" value="专科"></el-option>
|
||||
<el-option label="本科" value="本科"></el-option>
|
||||
<el-option label="研究生" value="研究生"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-form-item style="margin-top: 16%;">
|
||||
<el-button @click="close()">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" v-if="detailInfo.length == 0">保存</el-button>
|
||||
<el-button type="primary" @click="createForm('form')" v-else>编辑</el-button>
|
||||
|
|
@ -48,6 +27,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listToTreeSelect } from '@/utils'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { postMethodCommon, getMethodCommon } from '../../../../api/common';
|
||||
import { validateMobile, validID, validateStock } from './validate.js'
|
||||
import form from '../../../../store/modules/form';
|
||||
|
|
@ -55,64 +37,111 @@
|
|||
// let BASE_IMAGE_URL = BASE_IMAGE_API_URL;
|
||||
export default {
|
||||
name: "AddForm",
|
||||
props:['detailInfo'],
|
||||
props: ['detailInfo'],
|
||||
components: {
|
||||
Treeselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
BASE_IMAGE_URL: BASE_IMAGE_URL,
|
||||
addForm: {
|
||||
sex: "0"
|
||||
gender: "男"
|
||||
},
|
||||
rules: {
|
||||
userName: [
|
||||
name: [
|
||||
{ required: true, message: '姓名不能为空', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '电话不能为空', trigger: 'blur' },
|
||||
{ validator: validateMobile.bind(this), trigger: 'blur' }
|
||||
],
|
||||
sex: [
|
||||
gender: [
|
||||
{ required: true, message: '性别不能为空', trigger: 'blur' },
|
||||
],
|
||||
cardNo: [
|
||||
{ required: true, message: '身份证号不能为空', trigger: 'blur' },
|
||||
{ validator: validID.bind(this), trigger: 'blur' }
|
||||
],
|
||||
politicalOutlook: [
|
||||
{ required: true, message: '政治面貌不能为空', trigger: 'blur' },
|
||||
],
|
||||
education: [
|
||||
{ required: true, message: '学历不能为空', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
dialogFormVisible: false,
|
||||
orgsTree: [], // 用户可访问到的所有机构组成的树
|
||||
selectRoles: [], // 用户分配的角色
|
||||
selectRoleNames: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.detailInfo)
|
||||
if(this.detailInfo.length == 1){
|
||||
this.addForm=this.detailInfo[0]
|
||||
this.addForm.sex = this.addForm.sex.toString()
|
||||
}else{
|
||||
this.addForm={
|
||||
sex:"0"
|
||||
if (this.detailInfo.length == 1) {
|
||||
this.getDetail()
|
||||
} else {
|
||||
this.addForm = {
|
||||
gender: "男"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectOrgs: {
|
||||
get: function () {
|
||||
console.log(this.detailInfo)
|
||||
if (this.detailInfo.length == 1) {
|
||||
return this.addForm.street
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
set: function (v) {
|
||||
console.log('set org:', v)
|
||||
var _this = this
|
||||
_this.addForm.street = v
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _this = this;
|
||||
var querys = {
|
||||
regionName: localStorage.getItem("areaENName")
|
||||
}
|
||||
getMethodCommon("/Grid/LoadAllGrid", querys).then(res => {
|
||||
console.log("data", res.data);
|
||||
if (res.code == 200) {
|
||||
var list = res.data
|
||||
var arr = this.traverse(list)
|
||||
console.log(arr)
|
||||
_this.orgsTree = arr;
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
getDetail() {
|
||||
getMethodCommon("/FireGrid/GetSingleFireFighter?id=" + this.detailInfo[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.addForm = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
traverse(arr) {
|
||||
if (arr && arr.length > 0) {
|
||||
var list = []
|
||||
arr.forEach(childelement => {
|
||||
list.push({
|
||||
id: childelement.id,
|
||||
label: childelement.areaName,
|
||||
parentId: childelement.pId || null,
|
||||
children: this.traverse(childelement.child)
|
||||
})
|
||||
});
|
||||
return list
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
var _this =this
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/AddKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/AddFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"添加成功"
|
||||
type: "success",
|
||||
message: "添加成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -122,19 +151,18 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
createForm(){
|
||||
var _this =this
|
||||
createForm() {
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/EditKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/EditFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"编辑成功"
|
||||
type: "success",
|
||||
message: "编辑成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -151,6 +179,10 @@
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .vue-treeselect__control {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,37 +18,7 @@
|
|||
},
|
||||
data(){
|
||||
return {
|
||||
navList:[
|
||||
{
|
||||
lable:"重点人群",
|
||||
url:"",
|
||||
top:0,
|
||||
},{
|
||||
lable:"区域划分",
|
||||
url:"",
|
||||
top:90,
|
||||
},{
|
||||
lable:"消防值班",
|
||||
url:"",
|
||||
top:140,
|
||||
},{
|
||||
lable:"护林员",
|
||||
url:"",
|
||||
top:160,
|
||||
},{
|
||||
lable:"进山登记",
|
||||
url:"",
|
||||
top:140,
|
||||
},{
|
||||
lable:"站点管理",
|
||||
url:"",
|
||||
top:90,
|
||||
},{
|
||||
lable:"网格员",
|
||||
url:"",
|
||||
top:0,
|
||||
},
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
|
|
@ -594,6 +594,35 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/*滚动条宽度*/
|
||||
height: 10px;
|
||||
/*滚动条高度*/
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
box-shadow: 0px 1px 3px #071e4a inset;
|
||||
/*滚动条的背景区域的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0px 1px 3px #00a0e9 inset;
|
||||
/*滚动条的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination__jump{
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
@click="logout()"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<search :globalmap="globalmap"/>
|
||||
<!-- 快捷按钮 -->
|
||||
<div class="shortcut-button" id="shortcutbutton">
|
||||
|
||||
|
|
@ -258,6 +258,7 @@ import layerPlugInUnit from './widget/layerplug.vue';
|
|||
import callCenter from './widget/callcenter.vue';
|
||||
import fireClues from './widget/fireclues.vue';
|
||||
import rightEchartsData from './widget/rightechartsdata.vue';
|
||||
import search from './widget/search.vue'
|
||||
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
const areaName = localStorage.getItem("areaName")
|
||||
|
|
@ -288,7 +289,8 @@ export default {
|
|||
layerPlugInUnit,
|
||||
callCenter,
|
||||
fireClues,
|
||||
rightEchartsData
|
||||
rightEchartsData,
|
||||
search
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -984,9 +986,7 @@ export default {
|
|||
}
|
||||
},
|
||||
destroyed(){
|
||||
for(let i=0;i<20;i++){
|
||||
document.getElementById("map-querybar").style.display= "none";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,138 +1,162 @@
|
|||
<template>
|
||||
<div class="grid-container">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="6" style="margin-right:0px;height:400px;">
|
||||
<div style="padding-top:20px;padding-left:20px;height:100%;width: calc( 100% - 10px);overflow-y:auto;">
|
||||
<el-tree :data="data" default-expand-all :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18" style="height:400px;overflow-y:auto;">
|
||||
<div class="grid-item" v-for="(item,index) in tableData" :key="index">
|
||||
<p><span style="font-size:24px;">{{item.areaName}}</span><span>{{item.households}}户{{item.peopleNum}}人</span></p>
|
||||
<p>{{item.userName}} {{item.phone}}</p>
|
||||
<p>{{item.politicalOutlook}}</p>
|
||||
<p>{{item.userType}}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="6" style="margin-right: 0px; height: 400px">
|
||||
<div
|
||||
style="
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
width: calc(100% - 10px);
|
||||
overflow-y: auto;
|
||||
"
|
||||
>
|
||||
<el-tree
|
||||
:data="data"
|
||||
default-expand-all
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18" style="height: 400px; overflow-y: auto">
|
||||
<div class="grid-item" v-for="(item, index) in tableData" :key="index">
|
||||
<p>
|
||||
<span style="font-size: 24px">{{ item.areaName }}</span
|
||||
><span>{{ item.households }}户{{ item.peopleNum }}人</span>
|
||||
</p>
|
||||
<p>{{ item.userName }} {{ item.phone }}</p>
|
||||
<p>{{ item.politicalOutlook }}</p>
|
||||
<p>{{ item.userType }}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
export default {
|
||||
name: 'index',
|
||||
data(){
|
||||
return {
|
||||
ruleForm:{
|
||||
"areaId": 0,
|
||||
"areaName": "",
|
||||
"areaType": 0,
|
||||
"createId": "",
|
||||
"households": 0,
|
||||
"peopleNum": 0,
|
||||
"remake": "",
|
||||
"pId": 0,
|
||||
"userId": 0,
|
||||
"cardNo": "",
|
||||
"userName": "",
|
||||
"userType": "",
|
||||
"politicalOutlook": "",
|
||||
"education": "",
|
||||
"veteran": true,
|
||||
"phone": "",
|
||||
"imaUrl": ""
|
||||
},
|
||||
dialogVisible:false,
|
||||
total:100,
|
||||
listQuery:{
|
||||
pageSize:10,
|
||||
pageNum:1,
|
||||
},
|
||||
data:null,
|
||||
defaultProps: {
|
||||
children: 'child',
|
||||
label: 'areaName'
|
||||
},
|
||||
tableData: [{
|
||||
areaName: '网格名称',
|
||||
households: '户数',
|
||||
peopleNum : '人数',
|
||||
phone : '手机号码',
|
||||
politicalOutlook : '身份',
|
||||
userName : '网格员姓名',
|
||||
userType : '类型',
|
||||
},]
|
||||
import axios from "axios";
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
areaId: 0,
|
||||
areaName: "",
|
||||
areaType: 0,
|
||||
createId: "",
|
||||
households: 0,
|
||||
peopleNum: 0,
|
||||
remake: "",
|
||||
pId: 0,
|
||||
userId: 0,
|
||||
cardNo: "",
|
||||
userName: "",
|
||||
userType: "",
|
||||
politicalOutlook: "",
|
||||
education: "",
|
||||
veteran: true,
|
||||
phone: "",
|
||||
imaUrl: "",
|
||||
},
|
||||
dialogVisible: false,
|
||||
total: 100,
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
},
|
||||
data: null,
|
||||
defaultProps: {
|
||||
children: "child",
|
||||
label: "areaName",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
areaName: "网格名称",
|
||||
households: "户数",
|
||||
peopleNum: "人数",
|
||||
phone: "手机号码",
|
||||
politicalOutlook: "身份",
|
||||
userName: "网格员姓名",
|
||||
userType: "类型",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTree();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
addDialog() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
getTree() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: "get",
|
||||
url: BASE_URL + "/Grid/LoadGridXZ",
|
||||
params: { regionName: localStorage.getItem("areaName") },
|
||||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||||
}).then((res) => {
|
||||
console.log("data", res.data.data);
|
||||
if (res.data.code == 200) {
|
||||
_this.data = res.data.data;
|
||||
if (this.data.length) {
|
||||
this.getUserList({ id: _this.data[0].child[0].child[0].id });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
created(){
|
||||
this.getTree();
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
addDialog(){
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
getTree(){
|
||||
let _this = this;
|
||||
axios({method:"get",url:BASE_URL+"/Grid/LoadGridXZ",params:{'regionName':'feixian'},headers:{'X-Token':localStorage.getItem("X-Token")}}).then(res=>{
|
||||
console.log("data",res.data.data);
|
||||
if(res.data.code == 200){
|
||||
_this.data = res.data.data;
|
||||
this.getUserList({id:_this.data[0].child[0].child[0].id});
|
||||
console.log("_this.data",_this.data);
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserList(data){
|
||||
axios({method:"get",url:BASE_URL+"/Grid/LoadChildGridUser",params:data,headers:{'X-Token':localStorage.getItem("X-Token")}}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.tableData = res.data.data.dataInfo;
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(node){
|
||||
this.getUserList({id:node.id})
|
||||
getUserList(data) {
|
||||
axios({
|
||||
method: "get",
|
||||
url: BASE_URL + "/Grid/LoadChildGridUser",
|
||||
params: data,
|
||||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||||
}).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.tableData = res.data.data.dataInfo;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleNodeClick(node) {
|
||||
this.getUserList({ id: node.id });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.grid-item{
|
||||
width:194px;
|
||||
padding:15px 15px;
|
||||
height:140px;
|
||||
background:rgb(12, 69, 76);
|
||||
float:left;
|
||||
margin:6px;
|
||||
color:#eee;
|
||||
line-height:18px;
|
||||
.grid-item {
|
||||
width: 194px;
|
||||
padding: 15px 15px;
|
||||
height: 140px;
|
||||
background: rgb(12, 69, 76);
|
||||
float: left;
|
||||
margin: 6px;
|
||||
color: #eee;
|
||||
line-height: 18px;
|
||||
}
|
||||
::v-deep .el-dialog{
|
||||
background:rgba(10, 235, 216, 0.295);
|
||||
color:#fff;
|
||||
::v-deep .el-dialog {
|
||||
background: rgba(10, 235, 216, 0.295);
|
||||
color: #fff;
|
||||
}
|
||||
.operate-container{
|
||||
text-align:right;
|
||||
width:100%;
|
||||
height:44px;
|
||||
border-bottom:1px solid #108eff;
|
||||
margin-bottom:10px;
|
||||
.operate-container {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-bottom: 1px solid #108eff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.grid-container {
|
||||
width: calc(100% - 0px);
|
||||
min-height: 500px;
|
||||
padding: 40px;
|
||||
}
|
||||
.grid-container{
|
||||
width: calc( 100% - 0px);
|
||||
min-height:500px;
|
||||
padding:40px;
|
||||
}
|
||||
/* */
|
||||
::v-deep .el-tree {
|
||||
|
||||
color: #ffffff;
|
||||
/* // 整体背景透明 */
|
||||
background: rgba(0, 0, 0, 0);
|
||||
|
|
@ -150,262 +174,261 @@ let BASE_URL = process.env.VUE_APP_BASE_API
|
|||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table{
|
||||
background:none;
|
||||
color:#fff;
|
||||
::v-deep .el-table {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table thead{
|
||||
color:#fff;
|
||||
::v-deep .el-table thead {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
::v-deep .el-form-item__label {
|
||||
/* padding:0px; */
|
||||
}
|
||||
|
||||
::v-deep .el-form-item{
|
||||
::v-deep .el-form-item {
|
||||
/* margin-bottom:5px; */
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
|
||||
height:0px;
|
||||
::v-deep .el-table__fixed-right::before,
|
||||
.el-table__fixed::before {
|
||||
height: 0px;
|
||||
}
|
||||
::v-deep .el-table::before{
|
||||
height:0px;
|
||||
::v-deep .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
::v-deep .el-form--inline{
|
||||
height:30px;
|
||||
::v-deep .el-form--inline {
|
||||
height: 30px;
|
||||
}
|
||||
::v-deep .mapboxgl-ctrl{
|
||||
display:block;
|
||||
::v-deep .mapboxgl-ctrl {
|
||||
display: block;
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||
border-bottom:1px solid hsl(240, 100%, 37%,0.2);
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid hsl(240, 100%, 37%, 0.2);
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
::v-deep .el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 0.0625rem solid #0cf0dd;
|
||||
color: #fff;
|
||||
border-radius:0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
border-radius:0px;
|
||||
::v-deep .el-button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
::v-deep .el-form-item__label {
|
||||
color: #11edf5;
|
||||
/* line-height: 2.1875rem; */
|
||||
}
|
||||
::v-deep .el-button--small {
|
||||
::v-deep .el-button--small {
|
||||
padding: 0.625rem 2.1875rem;
|
||||
}
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
/* margin-left: 1.875rem; */
|
||||
}
|
||||
::v-deep .el-table,
|
||||
::v-deep .el-table,
|
||||
.el-table__expanded-cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
/* “表格内背景颜色“ */
|
||||
::v-deep.el-table th,
|
||||
::v-deep.el-table tr,
|
||||
::v-deep.el-table td {
|
||||
::v-deep.el-table th,
|
||||
::v-deep.el-table tr,
|
||||
::v-deep.el-table td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 按钮样式修改 */
|
||||
::v-deep .el-button--success {
|
||||
::v-deep .el-button--success {
|
||||
background: #26947c;
|
||||
color: #00f261;
|
||||
border: 0;
|
||||
}
|
||||
::v-deep .el-button--info {
|
||||
::v-deep .el-button--info {
|
||||
background: #482c27;
|
||||
color: #8ac2da;
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-button--primary {
|
||||
::v-deep.el-button--primary {
|
||||
background: #10fad3;
|
||||
color: #8ac2da;
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-button--primary {
|
||||
::v-deep.el-button--primary {
|
||||
background: #10f3cd;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
|
||||
::v-deep.el-table tbody tr:hover > td {
|
||||
::v-deep.el-table tbody tr:hover > td {
|
||||
background-color: black !important;
|
||||
}
|
||||
/* 第一个 dialog修改 */
|
||||
::v-deep.dialog_one .el-dialog {
|
||||
::v-deep.dialog_one .el-dialog {
|
||||
background: #266a94 !important;
|
||||
border: 1px solid #10a2e1;
|
||||
}
|
||||
::v-deep.dialog_one .el-dialog__title {
|
||||
::v-deep.dialog_one .el-dialog__title {
|
||||
color: #00b2ff;
|
||||
font-size: 2rem;
|
||||
}
|
||||
::v-deep.dialog_one .el-dialog__header {
|
||||
::v-deep.dialog_one .el-dialog__header {
|
||||
text-align: center;
|
||||
}
|
||||
/* 第二个 dialog 修改 */
|
||||
::v-deep.dialog_two .el-dialog {
|
||||
::v-deep.dialog_two .el-dialog {
|
||||
background: rgba(21, 236, 218, 0.603) !important;
|
||||
border: 1px solid #797979;
|
||||
}
|
||||
::v-deep.dialog_two .el-dialog__body {
|
||||
::v-deep.dialog_two .el-dialog__body {
|
||||
padding: 10px 0;
|
||||
}
|
||||
::v-deep.dialog_two .el-dialog__header {
|
||||
::v-deep.dialog_two .el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table__cell{
|
||||
background:none;
|
||||
padding:0px;
|
||||
font-size:14px;
|
||||
color:#fff!important;
|
||||
::v-deep .el-table__cell {
|
||||
background: none;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
::v-deep .cell{
|
||||
padding:0px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
::v-deep .cell {
|
||||
padding: 0px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
/* background:hsl(212, 43%, 49%,0.5); */
|
||||
text-align:center;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
::v-deep .number{
|
||||
background:none;
|
||||
color:#fff;
|
||||
::v-deep .number {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .btn-next{
|
||||
background:none;
|
||||
color:#fff;
|
||||
::v-deep .btn-next {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .btn-prev{
|
||||
background:none;
|
||||
color:#fff;
|
||||
::v-deep .btn-prev {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total{
|
||||
color:#fff;
|
||||
::v-deep .el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump{
|
||||
color:#fff;
|
||||
::v-deep .el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button:disabled{
|
||||
background:none;
|
||||
::v-deep .el-pagination button:disabled {
|
||||
background: none;
|
||||
}
|
||||
::v-deep .disabled{
|
||||
background:none;
|
||||
::v-deep .disabled {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions__body{
|
||||
background:none;
|
||||
color:#ccc;
|
||||
::v-deep .el-descriptions__body {
|
||||
background: none;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions-row{
|
||||
background:none;
|
||||
color:#eee;
|
||||
::v-deep .el-descriptions-row {
|
||||
background: none;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-descriptions-item__label{
|
||||
background:rgba(14, 231, 213, 0.5);
|
||||
color:#eee;
|
||||
::v-deep .el-descriptions-item__label {
|
||||
background: rgba(14, 231, 213, 0.5);
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
|
||||
border-color:rgb(71, 166, 179);
|
||||
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
|
||||
border-color: rgb(71, 166, 179);
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-checkbox{
|
||||
margin-top:14px;
|
||||
::v-deep .el-checkbox {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-y .el-table__body-wrapper{
|
||||
overflow-x:auto;
|
||||
overflow-y:auto;
|
||||
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
display: block !important;
|
||||
z-index:99999999999999;
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
/* 滑道样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
|
||||
width:0px;
|
||||
height:10px;
|
||||
background:#10e1f0;
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 10px;
|
||||
background: #10e1f0;
|
||||
border-radius: 6px;
|
||||
z-index:99999999999999;
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
/* 定义滑块的样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{
|
||||
::v-deep
|
||||
.el-table--scrollable-x
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
border-radius: 0px;
|
||||
-webkit-box-shadow:inset 0 0 6px rgba(20, 231, 247, 0.753);
|
||||
background-color:rgba(0,0,0,0.3);
|
||||
z-index:99999999999999;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(20, 231, 247, 0.753);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
/* 定义滑块鼠标移入时的样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover{
|
||||
::v-deep
|
||||
.el-table--scrollable-x
|
||||
.el-table__body-wrapper
|
||||
.el-table__body-wrapper
|
||||
.is-scrolling-left::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow:inset 0 0 6px rgba(13, 240, 228, 0.3);
|
||||
background-color:rgba(23, 221, 211, 0.4);
|
||||
z-index:99999999999999;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(13, 240, 228, 0.3);
|
||||
background-color: rgba(23, 221, 211, 0.4);
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump{
|
||||
margin-left:0px;
|
||||
::v-deep .el-pagination__jump {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-pagination .el-select {
|
||||
width:80px;
|
||||
::v-deep .el-pagination .el-select {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li{
|
||||
width:10px!important;
|
||||
::v-deep .el-pager li {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-pager .number{
|
||||
padding:0px;
|
||||
width:10px!important;
|
||||
::v-deep .el-pager .number {
|
||||
padding: 0px;
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-input__inner{
|
||||
width:80px;
|
||||
::v-deep .el-pagination .el-input__inner {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-ctrl{
|
||||
::v-deep .mapboxgl-ctrl {
|
||||
/* display:none; */
|
||||
}
|
||||
::v-deep .mapboxgl-ctrl-attrib-inner{
|
||||
display:none;
|
||||
::v-deep .mapboxgl-ctrl-attrib-inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content .is-disabled .el-input__inner{
|
||||
background-color:none!important;
|
||||
::v-deep .el-form-item__content .is-disabled .el-input__inner {
|
||||
background-color: none !important;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-map canvas {
|
||||
|
|
@ -414,62 +437,70 @@ let BASE_URL = process.env.VUE_APP_BASE_API
|
|||
left: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li{
|
||||
min-width:25px !important;
|
||||
::v-deep .el-pager li {
|
||||
min-width: 25px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border::after, .el-table--group::after, .el-table::before{
|
||||
background:none;
|
||||
::v-deep .el-table--border::after,
|
||||
.el-table--group::after,
|
||||
.el-table::before {
|
||||
background: none;
|
||||
}
|
||||
::v-deep .el-table--border, .el-table--group{
|
||||
border:0px;
|
||||
::v-deep .el-table--border,
|
||||
.el-table--group {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border th.el-table__cell, .el-table__fixed-right-patch{
|
||||
/* border:0px; */
|
||||
::v-deep .el-table--border th.el-table__cell,
|
||||
.el-table__fixed-right-patch {
|
||||
/* border:0px; */
|
||||
}
|
||||
|
||||
::v-deep .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
|
||||
border:0px;
|
||||
::v-deep .el-table--border .el-table__cell,
|
||||
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
|
||||
border: 0px;
|
||||
}
|
||||
.page-container{
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height:60px;
|
||||
padding:15px 0px;
|
||||
border-top:1px solid #ccc;
|
||||
height: 60px;
|
||||
padding: 15px 0px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
|
||||
inset -1px -1px 0 rgba(0, 0, 0, 0.07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<div class="map-querybar">
|
||||
<input
|
||||
style="border: 0px; outline: none"
|
||||
type="search"
|
||||
class="querybar-ssk1"
|
||||
placeholder="搜索地点"
|
||||
autocomplete="off"
|
||||
v-model="parameters.keywords"
|
||||
/>
|
||||
<div class="querybar-ssk2" @click="handlerSearchPOL">
|
||||
<i class="fa fa-search fa-2x"></i>
|
||||
搜索
|
||||
</div>
|
||||
<div class="map-querybar-result" v-show="showSearchListWindow">
|
||||
<div class="search-top">
|
||||
<span></span>
|
||||
<i class="fa fa-close fa-2x" @click="hiddenSearchListWindow"></i>
|
||||
</div>
|
||||
<div
|
||||
class="search-contain"
|
||||
ref="searchContain"
|
||||
@scroll="handleScroll($event)"
|
||||
v-show="searchResultList.length"
|
||||
>
|
||||
<div
|
||||
class="map-querybar-result-i"
|
||||
v-for="(item, index) in searchResultList"
|
||||
v-bind:key="index"
|
||||
>
|
||||
<div class="i-top">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<div @click="handlerFlyToPoint(item)">查看</div>
|
||||
</div>
|
||||
<div class="i-bottom">
|
||||
<span>{{ item.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="list-none" v-show="!hasNextPage">~~没有更多了~~</span>
|
||||
</div>
|
||||
<img
|
||||
class="none"
|
||||
v-show="!searchResultList.length"
|
||||
src="/img/none.png"
|
||||
alt=""
|
||||
/>
|
||||
<span v-show="!searchResultList.length">没有搜索到相关的地点</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// const GD_POL_KEY = "ee7f561fae9249aeb971bcc661083438";
|
||||
const GD_POL_KEY = "6346891d57dee39c07b16d9942868fbc";
|
||||
const GD_SEARCH_URL = "https://restapi.amap.com/v5/place/text?";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: "search",
|
||||
props:['globalmap'],
|
||||
data() {
|
||||
return {
|
||||
parameters: {
|
||||
key: GD_POL_KEY,
|
||||
keywords: "",
|
||||
region: "371325",
|
||||
citylimit: true,
|
||||
page_num: 1,
|
||||
page_size: 20,
|
||||
},
|
||||
searchResultList: [],
|
||||
debounceTime: undefined,
|
||||
hasNextPage: true,
|
||||
showSearchListWindow: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlerSearchPOL() {
|
||||
if (!this.parameters.keywords) {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "请输入搜索关键词",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.parameters.page_num = 1;
|
||||
this.resetScroll("searchContain");
|
||||
this.getPOLData();
|
||||
},
|
||||
getPOLData() {
|
||||
axios({
|
||||
method: "get",
|
||||
url: `${GD_SEARCH_URL}`,
|
||||
params: {
|
||||
...this.parameters,
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
if (res.status == 200 && res.data && res.data.pois) {
|
||||
this.count = res.data.count;
|
||||
let resLength = res.data.pois.length;
|
||||
if (this.parameters.page_num == 1) {
|
||||
this.searchResultList = res.data.pois;
|
||||
this.hasNextPage = resLength >= this.parameters.page_size;
|
||||
} else {
|
||||
if (resLength) {
|
||||
this.searchResultList = this.searchResultList.concat(
|
||||
res.data.pois
|
||||
);
|
||||
this.hasNextPage = resLength >= this.parameters.page_size;
|
||||
} else {
|
||||
this.hasNextPage = false;
|
||||
}
|
||||
}
|
||||
this.showSearchListWindow = true;
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: `搜索接口错误:${res.data.info}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "搜索接口错误",
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
//搜索滚动条回到顶部
|
||||
resetScroll(ref_contain) {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs[ref_contain]) {
|
||||
// 滚动元素跳转到顶部
|
||||
this.$refs[ref_contain].scrollTop = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 滚动时，加载下一页数据
|
||||
handleScroll(e) {
|
||||
let _this = this;
|
||||
if (this.debounceTime) {
|
||||
clearTimeout(this.debounceTime);
|
||||
}
|
||||
this.debounceTime = setTimeout(function () {
|
||||
let el = e.target;
|
||||
if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
|
||||
//控制页数
|
||||
let page = _this.parameters.page_num;
|
||||
if (_this.hasNextPage) {
|
||||
page++;
|
||||
_this.parameters.page_num = page;
|
||||
_this.getPOLData();
|
||||
}
|
||||
}
|
||||
this.debounceTime = undefined;
|
||||
}, 100);
|
||||
},
|
||||
hiddenSearchListWindow() {
|
||||
this.showSearchListWindow = false;
|
||||
this.parameters.page_num = 1
|
||||
this.parameters.keywords = ''
|
||||
this.searchResultList = []
|
||||
this.hasNextPage = true
|
||||
},
|
||||
handlerFlyToPoint(e){
|
||||
// TODO 根据返回的坐标格式做跳转
|
||||
let lngLat = [e.location]
|
||||
this.globalmap.flyToPoint(lngLat,{radius:400,"pitch":-90});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.map-querybar {
|
||||
top: 150px;
|
||||
left: 535px;
|
||||
position: absolute;
|
||||
flex-wrap: wrap;
|
||||
width: 340px;
|
||||
height: 47px;
|
||||
background-image: url(/img/sousuokuang.png);
|
||||
background-size: 100% 100%;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.querybar-ssk1 {
|
||||
background-color: transparent;
|
||||
width: 230px;
|
||||
height: 47px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
|
||||
.querybar-ssk2 {
|
||||
border-color: #082b2b;
|
||||
color: #ff9811;
|
||||
width: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.querybar-ssk2 .fa {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.map-querybar-result {
|
||||
width: 340px;
|
||||
height: 500px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px 20px 10px;
|
||||
position: absolute;
|
||||
top: 53px;
|
||||
left: 0;
|
||||
background-color: rgba(8, 43, 43, 0.7);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.map-querybar-result .none {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 50px auto 10px;
|
||||
}
|
||||
.map-querybar-result >span{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-querybar-result .search-top {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d2d2d2;
|
||||
}
|
||||
.search-contain {
|
||||
width: 100%;
|
||||
height: 102%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none; /* firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.map-querybar-result-i {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.map-querybar-result-i .i-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.map-querybar-result-i .i-top h3 {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.map-querybar-result-i .i-top div {
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
background-color: #ff9811;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.map-querybar-result-i .i-bottom {
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dotted #d2d2d2;
|
||||
}
|
||||
|
||||
.map-querybar-result-i .i-bottom span {
|
||||
font-size: 12px;
|
||||
color: #d2d2d2;
|
||||
}
|
||||
.list-none{
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue