添加实时办件详情

nngkxxdp/src/main/resources/static/naxsb/qjt.html

@@ -84,6 +84,75 @@
             color: #FF8000;
             font-size: 20px;
         }
+
+        .top_t {
+            padding: 10px 0;
+            border-bottom: 1px solid #5482F9;
+            height: 26px;
+            justify-content: space-between;
+        }
+
+        .top_t,
+        .bottom-t {
+            width: 100%;
+            display: flex;
+            font-size: 18px;
+            color: #5482F9;
+        }
+
+        .bottom-t {
+            flex-direction: column;
+            overflow-y: scroll;
+        }
+
+        .bottom-t::-webkit-scrollbar {
+            display: none;
+            /* Chrome, Safari 和 Opera */
+            -ms-overflow-style: none;
+            /* IE 和 Edge */
+            scrollbar-width: none;
+            /* Firefox */
+        }
+
+        .bottom-t .item {
+            width: 100%;
+            display: flex;
+            font-size: 16px;
+            padding: 10px 0;
+            justify-content: space-between;
+            border-bottom: 1px solid #5482F9;
+        }
+
+        .t1 {
+            width: 70px;
+            text-align: center;
+        }
+
+        .t1 span {
+            background: #1D96E9;
+            border: 1px solid #1D96E9;
+            padding: 0 5px;
+            border-radius: 2px;
+            color: #fff;
+        }
+
+        .t2 {
+            width: 100px;
+            text-align: center;
+            overflow: hidden;
+            word-break: break-all;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .t3 {
+            width: calc(100% - 230px);
+            text-align: center;
+            overflow: hidden;
+            word-break: break-all;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
     </style>
 </head>
 
@@ -142,10 +211,30 @@
                             </div>
                         </div>
                         <div class="twofloor conList">
-                            <!-- <div class="floortitle">实时办件详情</div> -->
-                            <div class="floortitle">交通配套</div>
-                            <div class="floorcontent">
-                                <div class="list blue">
+                            <div class="floortitle">实时办件详情</div>
+                            <!-- <div class="floortitle">交通配套</div> -->
+                            <div class="floorcontent" style="flex-wrap: nowrap;flex-direction: column;padding: 5px;">
+                                <div class="top_t">
+                                    <div class="t1">状态</div>
+                                    <div class="t2">受理部门</div>
+                                    <div class="t3">办理名称</div>
+                                </div>
+                                <div style="width: 100%;height:100%;overflow:hidden;">
+                                    <div class="bottom-t">
+                                        <div class="item" v-for="(item, index)  in bjxqList">
+                                            <div class="title t1"><span
+                                                    v-if="item.state&&item.state=='在办'">{{item.state}}</span>
+                                                <span style="background: #18A65A;border: 1px solid #18A65A;"
+                                                    v-else>{{item.state}}</span>
+                                            </div>
+                                            <div class="date t2" :title="item.acceptedDepartment">
+                                                {{item.acceptedDepartment}}</div>
+                                            <div class="date t3" :title="item.handlingName">
+                                                {{item.handlingName?item.handlingName.split("—")[0]:''}}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!--  <div class="list blue">
                                     <div class="top radio">公交车站：</div>
                                     <div class="bottom">
                                         <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/floor1.png" alt="">
@@ -171,7 +260,7 @@
                                             <span style="white-space: nowrap;">行政中心室外/地下停车场</span><br />盛捷公寓停车场
                                         </div>
                                     </div>
-                                </div>
+                                </div>-->
                             </div>
                         </div>
                         <div class="blsl conList">
@@ -367,6 +456,10 @@
                     html += '<svg width="10" height="10"><polygon id="triangle" points="0,0 10,0 5,10" fill="#1D96E9"/></svg>';
                     html += '</div>';
                     html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 110px;"></div>';
+                    html += `<div style="font-size: 12px;background: #18A65A;width: 100px;top: 326px;left: 58px;position: absolute;display: flex;flex-direction: column;align-items: flex-start;color: #fff;">
+                                <span>地下停车场入口⬇</span>
+                            </div>`
+                    html += '<div class="building-line" style="border-left: 1px dashed #1D96E9; height: 100px; top: 326px;left: 58px;"></div>';
                     // html += '<div class="building-bottom" style="background: #1D96E9;"></div>';
                     div.innerHTML = html;
                     let tag = new THREE.CSS2DObject(div);
@@ -481,9 +574,7 @@
         document.getElementById('loading').style.display = 'none';
         render();
     }, function (xhr) {
-        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
     }, function (error) {
-        console.log('load error!' + error);
     })
 
     function render() {
@@ -511,12 +602,14 @@
         el: '#qjt',
         data: function () {
             return {
-                currentTime: ""
+                currentTime: "",
+                bjxqList: []
             };
         },
         created() {
             this.updateTime();
             setInterval(this.updateTime, 1000); // 每秒更新一次时间
+            this.getSSbj();
         },
         beforeDestroy() {
             this.stopClock();
@@ -537,6 +630,32 @@
                 // 组合成格式化的字符串
                 const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                 this.currentTime = formattedDateTime;
+            },
+            addKeyFrames(y) {
+                let i = 0
+                setInterval(function () {
+                    if (i >= y) return i = 0
+                    i++
+                    document.querySelector('.bottom-t').style.marginTop = `-${i}px`
+                }, 50);
+            },
+            getSSbj() {
+                let that = this;
+                $.ajax({
+                    url: 'https://data.cqna.gov.cn:8088/kshapi/api/page2/top2',
+                    type: "get",
+                    dataType: "json",
+                    async: false,
+                    success: function (data) {
+                        var data = data.data;
+                        that.bjxqList = data.data;
+                        console.log(data)
+                    }
+                });
+                var height = document.querySelector('.item') ? document.querySelector('.item').clientHeight - 20 : 0;
+                if (this.bjxqList.length) {
+                    this.addKeyFrames(height * this.bjxqList.length);
+                }
             }
         }
     });
@@ -684,7 +803,6 @@
                 animateValue(waitTime2, 0, data.data[0], time);
                 const currWaitPeople2 = document.getElementById('currWaitPeople2');
                 animateValue(currWaitPeople2, 0, data.data[1], time);
-                console.log(data.data[1]);
 
             }
         })
@@ -724,7 +842,6 @@
     const nowWeek = date.getDay();
     const noMonth = date.getDate()
     const noyear = date.getFullYear()
-    console.log(noMonth % 7);
     const currWeekTaskNumElement = document.getElementById('currWeekTaskNum');
     if (nowWeek > 5 || nowWeek === 0) {
         animateValue(currWeekTaskNumElement, 0, 5 * 324, time);