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

pages/htjc.html

@@ -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

@@ -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;
@@ -362,6 +363,84 @@
 
 }
 
+.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% - .97rem);
@@ -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,12 +837,13 @@
 
 }
 
-.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;
@@ -825,13 +905,13 @@
   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;
@@ -839,25 +919,29 @@
 
 
 }
-#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,22 +951,26 @@
 
 
 
-#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) {
 
   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{
+
+#popup-info-change-list .content .table-body td {
   text-align: center;
+  font-weight: 100;
   
 }
 

static/js/htjc.js

@@ -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,18 +323,19 @@ 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')
@@ -342,6 +345,10 @@ var detail = {
         $(`#popup-info .test-location-main`).addClass('hiddenImportant')
         $(`#popup-info .${val}-main`).removeClass('hiddenImportant')
 
+        if (val == 'test-location') {
+            testLocationMap.setMap()
+        }
+
 
 
 
@@ -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');
+
             }
         });
     },
@@ -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();