Commit bd08ff4f authored by 陈珊's avatar 陈珊
parents 383c7548 033fa492
......@@ -92,15 +92,43 @@
<div id="popup-info" class="popup-info hidden">
<div class="head"></div>
<div class="main">
<div class="tab">
</div>
<div class="main data-detail-main">
<div class="left-item" id="subrwList">
<div class="noData">暂无数据</div>
</div>
<div class="right-item right-item1"></div>
<div class="right-item right-item2 hiddenImportant"></div>
</div>
<div class="hoverInfo hidden" id="hoverInfo"></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>
<div id="popup-info-change-list" class="popup-info hidden">
<div class="content">
<div class="table">
<table cellspacing="0">
<thead class="table-head">
<tr>
<th width="25%">修改人员</th>
<th width="25%">修改时间</th>
<th width="25%">修改前</th>
<th width="25%">修改后</th>
</tr>
</thead>
<tbody class="table-body">
</tbody>
</table>
</div>
</div>
</div>
<div class="swiper hidden" id="swiper">
<div class="mask" onclick="detail.swiperHide()"></div>
<div class="main">
......
......@@ -318,7 +318,7 @@
}
.popup-info .head {
height: .7rem;
height: .5rem;
display: flex;
align-items: center;
justify-content: center;
......@@ -326,9 +326,124 @@
font-size: .18rem;
}
.popup-info .tab {
width: 100%;
background: #113883;
padding: 0.15rem 0.5rem;
margin-bottom: 0.05rem;
}
.popup-info .tab .tabBox {
display: flex;
align-items: center;
color: #FFFFFF;
}
.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 {
color: #00FFFF;
}
.popup-info .tab .tabBox .actived::after {
display: block;
content: '';
width: 0.55rem;
height: 0.02rem;
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 {
display: flex;
height: calc(100% - .7rem);
height: calc(100% - .97rem);
}
.popup-info .main .left-item {
......@@ -515,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;
......@@ -702,10 +817,7 @@
.popup-info .main .right-item .info-item .bw-item .item {
position: relative;
background: #0D3177;
border: .01rem solid #90A1B1;
font-size: .18rem;
color: #C0D3E6;
height: .8rem;
width: calc(25% - .2rem);
margin: .2rem .1rem 0;
......@@ -716,7 +828,29 @@
cursor: pointer;
}
.popup-info .main .right-item .info-item .bw-item .item:hover {
.popup-info .main .right-item .info-item .bw-item .item .icon-change {
width: 63px;
height: 46px;
position: absolute;
right: 0;
top: 0;
}
.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 {
background: rgba(147, 24, 24, .5);
border: .01rem solid #931818;
color: #E7555C;
}
.popup-info .main .right-item .info-item .bw-item .common:hover {
background: rgba(42, 210, 255, 0.2);
border: .02rem solid #2AD2FF;
color: #2AD2FF;
......@@ -771,6 +905,76 @@
margin-bottom: .1rem;
}
.popup-info .hoverInfo .modification {
border: .01rem solid #A76619;
color: #D99749;
cursor: pointer;
}
#popup-info-change-list .content {
box-sizing: border-box;
padding: 20px;
font-size: 18px;
height: calc(100% - .44rem);
}
#popup-info-change-list .content .table {
height: 100%;
overflow: auto;
}
#popup-info-change-list .content .table::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#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 {
background: rgba(42, 93, 197, 0.3);
border-radius: 8px;
}
#popup-info-change-list .content .table-head {
height: 50px;
color: #fff;
background: rgb(17, 56, 131);
position: sticky;
top: 0;
}
#popup-info-change-list .content .table-body tr {
height: 50px;
color: #fff;
}
#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) {
background: rgba(17, 56, 131, .7);
}
#popup-info-change-list .content .table-body td {
text-align: center;
font-weight: 100;
}
.layui-layer-content {
height: calc(100% - 42px) !important;
}
......
......@@ -121,7 +121,7 @@ var testCount = {
})
},
setData: function (data) {
console.log(data)
$("#zjgc").html(data[0].today_project_count);
$("#ycgc").html(data[0].today_abnormal_project_count);
$("#yjbw").html(data[0].today_test_count);
......@@ -167,7 +167,7 @@ var map = {
}
//行政区查询
district.setLevel('district')
district.search($("#area").html(), function(status, result) {
district.search($("#area").html(), function (status, result) {
//district.search('濮阳市', function (status, result) {
map.remove(polygons)//清除上次结果
polygons = [];
......@@ -243,7 +243,7 @@ var map = {
$("#rwList .item-head").click(function () {
var mapx = $(this).attr('data-mapx');
var mapy = $(this).attr('data-mapy');
if(Math.floor(mapx) ==0 && Math.floor(mapy) == 0){
if (Math.floor(mapx) == 0 && Math.floor(mapy) == 0) {
return false;
}
var index = Number($(this).attr('data-index'));
......@@ -292,19 +292,27 @@ var detail = {
project_id: '',
data: [],
ysjl_list: [],
sample_id: '',
selectedTab: 'data-detail', // data-detail=>数据详情 test-location=>检测定位
getData: function (project_id, sample_id, index, index2) {
let _this = this;
_this.project_id = project_id;
_this.sample_id = sample_id;
$.ajax({
url: baseURL_htjc + "GetTaskInfo.ashx",
type: "post",
dataType: "json",
data: {
project_id
project_id,
date: $("#rw-date").val(),
},
success: function (data) {
if (data.data && data.data.length > 0) {
_this.setLeftData(data.data, sample_id, index, index2);
_this.setTab(data.data);
} else {
$("#subrwList").html('<div class="noData">暂无数据</div>');
}
......@@ -314,6 +322,36 @@ var detail = {
console.log("发生错误:" + jqXHR.status);
}
})
},
setTab(data) {
detail.data = data
let str = (`
<div class="tabBox">
<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) {
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) {
this.data = data;
......@@ -345,17 +383,20 @@ var detail = {
`;
}
$("#popup-info .left-item").html(str);
if(sample_id){
if (sample_id) {
detail.getsubRightData(sample_id, aindex, aindex2);
sublistClick('subrwInfo-'+aindex);
sublistClick('subrwInfo-' + aindex);
this.showPopup();
}else{
} else {
this.setRightData(0, 'subrwInfo-0');
this.showPopup();
}
},
setRightData(index, id) {
sublistClick(id);
var item = this.data[index];
$("#subrwList .info-item").removeClass("active");
$("#subrwList .flex-item").removeClass("active");
......@@ -368,7 +409,7 @@ var detail = {
${item.report_file && `<div class="flex-item"><div class="value">回弹文件:<a href="${item.report_file}" style="color:#C0D3E6">点击查看</a></div></div>`
}
<div class="flex-item flex-item2 over-flex">
${item.faceimg_list&&item.faceimg_list.length>0 ? item.faceimg_list.map((item2) => {
${item.faceimg_list && item.faceimg_list.length > 0 ? item.faceimg_list.map((item2) => {
return (`
<div class="box">
<div class="img">
......@@ -381,7 +422,7 @@ var detail = {
</div>
`);
}).join('')
: '' }
: ''}
</div>
</div>
<div class="main-item">
......@@ -438,8 +479,8 @@ var detail = {
})
},
setsubRightData(index, index2, data) {
console.log(index, index2);
console.log(data);
console.log(data, 'data');
$("#subrwList .info-item").removeClass("active");
$("#subrwList .flex-item").removeClass("active");
$("#subrwList .info-item:nth-child(" + (Number(index) + 1) + ") .flex-item:nth-child(" + (Number(index2) + 1) + ")").addClass("active");
......@@ -456,7 +497,9 @@ var detail = {
${item.test_status == 1 && item.ysjl_list && item.ysjl_list.length > 0 ?
item.ysjl_list.map((item2, index2) => {
return (`
<div class="item" onmouseover="mouseover(${index2}, event)" onmouseout="mouseout()">${item2.jc_data21}</div>
<div class="item ${item2.test_status == '1' ? 'common' : 'fail'}" onmouseover="mouseover(${index2}, event)" onmouseout="mouseout()">${item2.jc_data21}
${item2.is_change > 0 ? '<img class="icon-change" src="../static/images/icon-change.png" />' : ''}
</div>
`);
}).join('')
: '<div class="noData">暂无数据</div>'
......@@ -466,7 +509,7 @@ var detail = {
</div>
`);
},
listgetsubRightData: function(project_id, sample_id, index, index2){
listgetsubRightData: function (project_id, sample_id, index, index2) {
detail.getData(project_id, sample_id, index, index2);
},
showPopup: function () {
......@@ -478,9 +521,81 @@ var detail = {
area: ['13rem', '75%'],
content: $('#popup-info'),
end: function () {
detail.changeTab('data-detail')
$("#popup-info").css('display', 'none');
}
});
},
showPopupChangeList: function (sample_id, jc_data26, group_no, index, val) {
$("#popup-info-change-list .content .table .table-body").html('');
$.ajax({
url: baseURL_htjc + `GetChangeList.ashx?sample_id=${sample_id}&jc_data26=${jc_data26}&group_no=${group_no}&index=${index}`,
type: "get",
dataType: "json",
success: function (data) {
if (data.data.length) {
let arr = data.data
for (let i = 0; i < arr.length; i++) {
if (i === arr.length - 1) {
arr[i].newVal = val
break
}
arr[i].newVal = arr[i + 1].jc_data
}
$("#popup-info-change-list .content .table .table-body").append(`
${arr.map(item => {
return (`
<tr>
<td width="25%">${item.update_opname}</td>
<td width="25%">${item.update_time}</td>
<td width="25%">${item.jc_data}</td>
<td width="25%">${item.newVal}</td>
</tr>
`)
}).join('')
}
`);
}
},
error: function (jqXHR) {
console.log("发生错误:" + jqXHR.status);
}
})
layer.open({
type: 1,
shadeClose: true,
maxmin: true,
title: "<p class='popup-title'>数据修改详情</p>",
area: ['10rem', '70%'],
content: $('#popup-info-change-list'),
end: function () {
$("#popup-info-change-list").css('display', 'none');
}
});
},
imgView(index, index2, index3) {
var arr = this.data[index].flow_list[index2].file_list;
......@@ -501,24 +616,43 @@ var detail = {
},
swiperHide() {
$("#swiper").addClass("hidden");
},
hoverInfoMouseover() {
clearTimeout(hoverInfoTime)
},
hoverInfoMouseout() {
mouseout()
}
}
var hoverInfoTime;
var isHoverInfoModal; // 弹窗是否正在显示
function mouseover(index, e) {
if (isHoverInfoModal) {
return
}
var arr = [];
let notArr = ['jc_data21', 'test_status', 'change_list', 'group_no', 'is_change', 'jc_data26']
for (i in detail.ysjl_list[index]) {
if (i != 'jc_data21' && i != 'test_status') {
if (!notArr.includes(i)) {
arr.push(detail.ysjl_list[index][i]);
}
}
$("#hoverInfo").html(`
${arr.map(item2 => {
${arr.map((item2, index2) => {
let bool = detail.ysjl_list[index].change_list[0][`is_change${index2 + 1}`] > 0
return (`
<div>${item2}</div>
<div onClick="detail.showPopupChangeList('${detail.sample_id}', '${detail.ysjl_list[index].jc_data26}','${detail.ysjl_list[index].group_no}','${index2 + 1}','${item2}')" class="${bool ? 'modification' : ''}">${item2}</div>
`);
}).join('')
}
`);
isHoverInfoModal = true
setTimeout(() => {
var divW = $("#hoverInfo").width();
var screenW = $(window).width();
......@@ -527,12 +661,15 @@ function mouseover(index, e) {
} else {
$("#hoverInfo").css("left", e.clientX + 10 + 'px').css("right", 'auto').css("top", e.clientY + 10 + 'px').removeClass("hidden");
}
}, 50);
}, 30);
}
function mouseout() {
setTimeout(() => {
hoverInfoTime = setTimeout(() => {
$("#hoverInfo").addClass("hidden").css("left", 0).css("right", 0).css("top", 0);
}, 50);
isHoverInfoModal = false
}, 30);
}
function listClick(id) {
......@@ -563,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();
......@@ -572,7 +858,7 @@ function init() {
var laydate = layui.laydate;
laydateObj = laydate.render({
elem: '#rw-date'
, value: getNextDate(dateFormat('YYYY-mm-dd', new Date()), 0)
, value: ''
, done: function () {
taskList.init();
}
......@@ -602,15 +888,15 @@ function init() {
dataType: "json",
data: finalData,
success: function (data) {
console.log(data)
if(data.status == 200){
layer.msg('已录入', {icon: 0}, function(){});
if (data.status == 200) {
layer.msg('已录入', { icon: 0 }, function () { });
setTimeout(() => {
layer.closeAll();
}, 1000);
}else{
layer.msg(data.msg, {icon: 0}, function(){});
} else {
layer.msg(data.msg, { icon: 0 }, function () { });
}
},
error: function (jqXHR) {
......
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