Skip to content

桩
桩基检测
Commit 033fa492 authored by 马奔奔's avatar 马奔奔
Browse files
Options

feature: 增加回弹详情地址地图

parent f342d035
Hide whitespace changes
Inline Side-by-side
Showing with 296 additions and 50 deletions
pages/htjc.html
View file @ 033fa492
......@@ -102,7 +102,7 @@
<div class="right-item right-item1"></div>
<div class="right-item right-item2 hiddenImportant"></div>
</div>
<div id="test-location-main" class="test-location-main hidden"></div>
<div id="test-location-main" class="test-location-main hiddenImportant"></div>
<div class="hoverInfo hidden" id="hoverInfo" onmouseover="detail.hoverInfoMouseover()"
onmouseout="detail.hoverInfoMouseout()"></div>
</div>
......
static/css/dist/htjc.css
View file @ 033fa492
......@@ -334,24 +334,25 @@
margin-bottom: 0.05rem;
}
.popup-info .tab .tabBox{
.popup-info .tab .tabBox {
display: flex;
align-items: center;
color: #FFFFFF;
}
.popup-info .tab .tabBox >div{
.popup-info .tab .tabBox>div {
margin-right: 0.68rem;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
.popup-info .tab .tabBox >div.actived{
.popup-info .tab .tabBox>div.actived {
color: #00FFFF;
}
.popup-info .tab .tabBox .actived::after{
.popup-info .tab .tabBox .actived::after {
display: block;
content: '';
width: 0.55rem;
......@@ -359,7 +360,85 @@
background: #00FFFF;
position: relative;
top: 0.15rem;
}
.popup-info .test-location-main {
width: 100%;
height: calc(100% - .97rem);
}
.amap-logo {
display: none !important;
}
.amap-copyright {
display: none !important;
}
.modalBox {
padding: 0.2rem 0.1rem;
background: rgba(0, 0, 0, .7);
border: none;
border-radius: 4px;
color: #C0D3E6;
font-size: 14px;
}
.modalBox .content{
max-height: 3.5rem;
overflow: auto;
}
.modalBox .content::-webkit-scrollbar {
width: 0.1rem;
height: 0.1rem;
}
.modalBox .content::-webkit-scrollbar-thumb {
background: #36384F;
border-radius: 8px;
}
.modalBox .content::-webkit-scrollbar-track {
background: #070813;
border-radius: 8px;
}
.taskNoBox{
color: #3FD9FF;
}
.rwdImg{
width: 0.19rem;
height: 0.18rem;
}
.countBox{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.14rem;
margin-bottom: 0.1rem;
}
.countBox >div{
padding: 0.08rem 0.16rem;
border: 1px solid #90A1B1;
}
.modalBoxItem{
padding: 0.13rem 0.14rem;
border-top: 1px solid rgba(192, 211, 230, .4);
display: flex;
justify-content: space-between;
align-items: center;
}
.amap-marker-label {
border: 0;
background-color:transparent;
}
.popup-info .main {
......@@ -551,7 +630,7 @@
justify-content: space-evenly;
}
.popup-info .main .right-item .flex-item .box .item > div {
.popup-info .main .right-item .flex-item .box .item>div {
word-break: keep-all;
white-space: nowrap;
display: flex;
......@@ -749,7 +828,7 @@
cursor: pointer;
}
.popup-info .main .right-item .info-item .bw-item .item .icon-change{
.popup-info .main .right-item .info-item .bw-item .item .icon-change {
width: 63px;
height: 46px;
position: absolute;
......@@ -758,19 +837,20 @@
}
.popup-info .main .right-item .info-item .bw-item .common{
.popup-info .main .right-item .info-item .bw-item .common {
background: #0D3177;
border: .01rem solid #90A1B1;
color: #C0D3E6;
}
.popup-info .main .right-item .info-item .bw-item .fail{
.popup-info .main .right-item .info-item .bw-item .fail {
background: rgba(147, 24, 24, .5);
border: .01rem solid #931818;
color: #E7555C;
}
.popup-info .main .right-item .info-item .bw-item .common:hover {
.popup-info .main .right-item .info-item .bw-item .common:hover {
background: rgba(42, 210, 255, 0.2);
border: .02rem solid #2AD2FF;
color: #2AD2FF;
......@@ -825,39 +905,43 @@
margin-bottom: .1rem;
}
.popup-info .hoverInfo .modification{
.popup-info .hoverInfo .modification {
border: .01rem solid #A76619;
color: #D99749;
cursor: pointer;
}
#popup-info-change-list .content{
#popup-info-change-list .content {
box-sizing: border-box;
padding: 20px;
font-size: 18px;
height: calc(100% - .44rem);
}
#popup-info-change-list .content .table{
#popup-info-change-list .content .table {
height: 100%;
overflow: auto;
}
#popup-info-change-list .content .table::-webkit-scrollbar{
#popup-info-change-list .content .table::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#popup-info-change-list .content .table::-webkit-scrollbar-thumb{
#popup-info-change-list .content .table::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
}
#popup-info-change-list .content .table::-webkit-scrollbar-track{
#popup-info-change-list .content .table::-webkit-scrollbar-track {
background: rgba(42, 93, 197, 0.3);
border-radius: 8px;
}
#popup-info-change-list .content .table-head{
#popup-info-change-list .content .table-head {
height: 50px;
color: #fff;
background: rgb(17, 56, 131);
......@@ -867,23 +951,27 @@
#popup-info-change-list .content .table-body tr{
#popup-info-change-list .content .table-body tr {
height: 50px;
color: #fff;
}
#popup-info-change-list .content .table-body tr:nth-child(odd) {
#popup-info-change-list .content .table-body tr:nth-child(odd) {
background: rgba(17, 56, 131, .5);
}
#popup-info-change-list .content .table-body tr:nth-child(even) {
#popup-info-change-list .content .table-body tr:nth-child(even) {
background: rgba(17, 56, 131, .7);
}
#popup-info-change-list .content .table-body td{
text-align: center;
#popup-info-change-list .content .table-body td {
text-align: center;
font-weight: 100;
}
......@@ -1009,4 +1097,4 @@ td {
padding: 6px 12px;
line-height: inherit;
background-color: #46A6D8;
}
}
\ No newline at end of file
static/js/htjc.js
View file @ 033fa492
......@@ -12,7 +12,7 @@ var taskList = {
dataType: "json",
data: {
keywords: $("#rw-keywords").val(),
date:$("#rw-date").val(),
date: $("#rw-date").val(),
page: 1,
limit: 100
},
......@@ -293,7 +293,7 @@ var detail = {
data: [],
ysjl_list: [],
sample_id: '',
selectedTab:'detail', // detail=>数据详情 location=>检测定位
selectedTab: 'data-detail', // data-detail=>数据详情 test-location=>检测定位
getData: function (project_id, sample_id, index, index2) {
let _this = this;
_this.project_id = project_id;
......@@ -304,13 +304,15 @@ var detail = {
dataType: "json",
data: {
project_id,
date:$("#rw-date").val(),
date: $("#rw-date").val(),
},
success: function (data) {
console.log(data,'getData');
if (data.data && data.data.length > 0) {
_this.setLeftData(data.data, sample_id, index, index2);
_this.setTab();
_this.setTab(data.data);
} else {
$("#subrwList").html('<div class="noData">暂无数据</div>');
}
......@@ -321,29 +323,34 @@ var detail = {
}
})
},
setTab(){
setTab(data) {
detail.data = data
let str = (`
<div class="tabBox">
<div class="data-detail ${this.selectedTab==='detail'?'actived':''}" onclick="detail.changeTab('data-detail')" >数据详情</div>
<div class="test-location ${this.selectedTab==='location'?'actived':''}" onclick="detail.changeTab('test-location')" >检测定位</div>
<div class="data-detail ${this.selectedTab === 'data-detail' ? 'actived' : ''}" onclick="detail.changeTab('data-detail')" >数据详情</div>
<div class="test-location ${this.selectedTab === 'test-location' ? 'actived' : ''}" onclick="detail.changeTab('test-location')" >检测定位</div>
</div
`)
$("#popup-info .tab").html(str);
},
changeTab(val){
console.log(val);
changeTab(val) {
this.selectedTab = val
$('.tabBox').children().removeClass('actived')
$(`.tabBox .${val}`).addClass('actived')
$(`#popup-info .data-detail-main`).addClass('hiddenImportant')
$(`#popup-info .test-location-main`).addClass('hiddenImportant')
$(`#popup-info .${val}-main`).removeClass('hiddenImportant')
if (val == 'test-location') {
testLocationMap.setMap()
}
},
setLeftData: function (data, sample_id, aindex, aindex2) {
......@@ -379,8 +386,8 @@ var detail = {
if (sample_id) {
detail.getsubRightData(sample_id, aindex, aindex2);
sublistClick('subrwInfo-' + aindex);
let item = this.data[0];
$("#popup-info .head").html(`${item.project_no ? '【' + item.project_no + '】' : ''}${item.project_name}`);
this.showPopup();
} else {
this.setRightData(0, 'subrwInfo-0');
......@@ -389,7 +396,7 @@ var detail = {
},
setRightData(index, id) {
sublistClick(id);
console.log(this.data,'this.data');
var item = this.data[index];
$("#subrwList .info-item").removeClass("active");
$("#subrwList .flex-item").removeClass("active");
......@@ -514,7 +521,9 @@ var detail = {
area: ['13rem', '75%'],
content: $('#popup-info'),
end: function () {
detail.changeTab('data-detail')
$("#popup-info").css('display', 'none');
}
});
},
......@@ -526,7 +535,7 @@ var detail = {
type: "get",
dataType: "json",
success: function (data) {
if (data.data.length) {
let arr = data.data
for (let i = 0; i < arr.length; i++) {
......@@ -537,9 +546,9 @@ var detail = {
arr[i].newVal = arr[i + 1].jc_data
}
$("#popup-info-change-list .content .table .table-body").append(`
${arr.map(item => {
return (`
......@@ -653,14 +662,14 @@ function mouseover(index, e) {
$("#hoverInfo").css("left", e.clientX + 10 + 'px').css("right", 'auto').css("top", e.clientY + 10 + 'px').removeClass("hidden");
}
}, 50);
}, 30);
}
function mouseout() {
hoverInfoTime = setTimeout(() => {
$("#hoverInfo").addClass("hidden").css("left", 0).css("right", 0).css("top", 0);
isHoverInfoModal = false
}, 50);
}, 30);
}
function listClick(id) {
......@@ -691,6 +700,155 @@ function sublistClick(id) {
}
}
var testLocationMap = {
map: '',
markerObj: {},
isShowMarkerObj: {},
modalBoxTime: '',
setMap: function () {
this.map = new AMap.Map("test-location-main", {
viewMode: '2D', //默认使用 2D 模式
zoom: 11, //地图级别
mapStyle: 'amap://styles/d3ce37d9fe39b7cc5f08f48af52802a2',
center: [detail.data[0].project_mapx, detail.data[0].project_mapy], //地图中心点
});
this.setMarker()
this.setCircle()
this.markerObj = {}
this.isShowMarkerObj = {}
this.modalBoxTime = ''
},
setMarker: function () {
new AMap.Marker({
position: [detail.data[0].project_mapx, detail.data[0].project_mapy],
icon: new AMap.Icon({
size: new AMap.Size(28, 28),
imageSize: new AMap.Size(28, 28),
image: '../static/images/icon_dwi_san.png',
imageOffset: new AMap.Pixel(0, 0)
}),
map: this.map
});
for (let index = 0; index < detail.data.length; index++) {
let item = detail.data[index]
console.log(item, 'item');
let marker = new AMap.Marker({
position: [item.mapx, item.mapy],
icon: new AMap.Icon({
size: new AMap.Size(28, 28),
imageSize: new AMap.Size(28, 28),
image: '../static/images/icon_lv.gif',
imageOffset: new AMap.Pixel(0, 0)
}),
map: this.map
});
marker.on("mouseover", () => {
this.markerObj[index] = marker
marker.setLabel({
direction: "right",
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: `<div class="modalBox" onmouseout="testLocationMap.modalBoxMouseout(${index})" onmouseover="testLocationMap.modalBoxMouseover(${index})" >
<div class="taskNoBox">
<img class="rwdImg" src="../static/images/icon_rwd.png" />
任务单：${item.task_no}
</div>
<div class="countBox">
<div>已检测：${item.test_count}</div>
<div>强度不达标：${item.abnormal_count}</div>
<div>未检测：${item.untest_count}</div>
</div>
<div class="content">
<div class="modalBoxItem">开始时间：${item.test_begin_datetime}</div>
<div class="modalBoxItem">最近数据上传：${item.test_end_datetime}</div>
<div class="modalBoxItem">检测单位：${item.customer_name}</div>
${item.sample_list.map((item2) => {
return (`<div class="modalBoxItem"><p>${item2.sample_name}</p><p class="desc ${item2.test_status == 1 ? 'green' : item2.test_status == 2 ? 'red' : ''}">${item2.test_status_str}</p></div>`); //0未检测 1已检测 2强度不达标
}).join('')
}
</div>
</div>`, //设置文本标注内容
});
});
marker.on("mouseout", () => {
if (this.isShowMarkerObj[index]) {
return;
}
this.modalBoxMouseout(index)
});
}
},
modalBoxMouseover: function (index) {
clearTimeout(this.modalBoxTime)
this.isShowMarkerObj[index] = true
},
modalBoxMouseout: function (index) {
clearTimeout(this.modalBoxTime)
this.modalBoxTime = setTimeout(() => {
this.markerObj[index].setLabel({
content: null, //设置文本标注内容
})
this.isShowMarkerObj[index] = false
}, 100)
},
setCircle: function () {
let centerMap = [detail.data[0].project_mapx, detail.data[0].project_mapy]
let arr = []
for (let index = 0; index < detail.data.length; index++) {
let item = detail.data[index]
let itemMap = [item.mapx, item.mapy]
arr.push(AMap.GeometryUtil.distance(centerMap, itemMap))
}
//设置圆的半径大小
let addRadius = Math.pow(10, Math.floor(Math.max(...arr)).toString().length)
let radius = Math.max(...arr) + addRadius;
let circle = new AMap.Circle({
center: centerMap, //圆心
radius: radius, //半径
borderWeight: 3, //描边的宽度
strokeColor: "#00FFA2", //轮廓线颜色
strokeOpacity: 1, //轮廓线透明度
strokeWeight: 1, //轮廓线宽度
fillOpacity: 0.2, //多边形填充透明度
strokeDasharray: [10, 10],
fillColor: "#00FFA2", //多边形填充颜色
zIndex: 50, //多边形覆盖物的叠加顺序
});
//圆形 Circle 对象添加到 Map
this.map.add(circle);
//根据覆盖物范围调整视野
this.map.setFitView([circle])
}
}
init();
function init() {
getHeader();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment