fix: 风筛记录优化

public/bpic_eli/risk_history.html

@@ -15,6 +15,12 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>
   <![endif]-->
 
+  <!-- IE8 兼容 polyfill -->
+  <!--[if lt IE 9]>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.14/es5-shim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.14/es5-sham.min.js"></script>
+  <![endif]-->
+
   <style>
       * {
           margin: 0;
@@ -39,6 +45,12 @@
           font-size: 0; /* 消除 inline-block 间隙 */
       }
 
+      .tree-icon{
+          width: 15px!important;
+          height: 15px!important;
+          margin-right: 10px;
+          //height: 20px;
+      }
       .left-nav {
           width: 20%;
           float: left;
@@ -170,10 +182,20 @@
           border-bottom: 1px solid #eee;
       }
 
+      .iconfont {
+          font-family: "iconfont" !important;
+          font-size: 16px;
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          /* IE8兼容 */
+          *font-family: 'iconfont';
+          *zoom: 1;
+      }
+
       .tree-item-header {
           background: #fff!important;
           padding: 5px 20px;
-        //background: #f0f4fa;
           margin: 5px 0;
           cursor: pointer;
           border-radius: 4px;
@@ -182,7 +204,8 @@
           color: #2c3e50;
           transition: background 0.3s;
           /* IE8兼容样式 */
-        //*background: #e3e9f2;
+          *zoom: 1; /* 触发IE hasLayout */
+          *background: #fff;
       }
 
       .tree-item-header:hover {
@@ -193,18 +216,6 @@
       .tree-item-header::before{
           margin-right: 10px;
       }
-      //.tree-item-header::before {
-      //  content: '\e61f';
-      //  margin-right: 10px;
-      //  transition: transform 0.3s;
-      //  /* IE8不支持::before伪元素和transform */
-      //}
-      //
-      //.tree-item-header.expanded::before {
-      //  content: '\e61f';
-      //  /* IE8不支持 */
-      //}
-
       .result-container-item {
           padding: 0 10px;
           margin-bottom: 20px;
@@ -333,13 +344,14 @@
       }
 
       .png-icon {
-        //float: left;
-        //margin-top: 10px;
           vertical-align: middle;
           margin: -2px 10px 0 10px;
           outline: none;
           border: none;
           display: inline-block;
+          /* IE8兼容 */
+          *display: inline;
+          *zoom: 1;
       }
       //.empty-message:before {
       //  content: 'ℹ';
@@ -366,43 +378,6 @@
           cursor: pointer;
           width: 15px;
       }
-      .dialog{
-        position: absolute;
-        width: 50%;
-        height: 300px;
-        background: #fff;
-        left:25%;
-        top:50%;
-        margin-top: -150px;
-        border: 1px solid #ccc;
-        text-align: center;
-        border-radius: 10px;
-        box-shadow:  0 0 10px rgba(0,0,0,0.2);
-      }
-      .dialog .title{
-        font-size: 16px;
-        font-weight: bold;
-        padding: 20px 30px;
-        text-align: left;
-      }
-      .dialog textarea{
-        text-align: left;
-        width:90%;
-        padding:10px;
-        margin:10px;
-        outline:none;
-        left: 0;
-        right:0;
-        border:1px solid #ccc;
-        height: 150px;
-        border-radius: 5px;
-      }
-
-      .dialog-action{
-        text-align: right;
-        margin-right: 20px;
-        padding-top: 10px;
-      }
       .dialog-action button{
       //height: 30px;
           outline:none;
@@ -411,6 +386,152 @@
           border-radius: 5px;
           border: 1px solid #f0f4fa;
       }
+
+      /* 美化后的dialog样式 */
+      .dialog {
+          position: absolute;
+          width: 50%;
+          min-width: 300px;
+          background: #fff;
+          left: 25%;
+          top: 50%;
+          margin-top: -150px;
+          border: 1px solid #ccc;
+          text-align: center;
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+          /* IE8兼容的阴影效果 */
+          filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=5);
+          z-index: 1000;
+          font-family: 'Microsoft YaHei', Arial, sans-serif;
+          /* IE8 居中对齐 */
+          *left: 0;
+          *top: 0;
+          *margin-left: 25%;
+          *margin-top: 100px;
+      }
+
+      .dialog .title {
+          font-size: 18px;
+          font-weight: bold;
+          padding: 20px 30px;
+          text-align: left;
+          background: #f8f9fa;
+          border-bottom: 1px solid #eee;
+          border-radius: 8px 8px 0 0;
+          color: #2c3e50;
+          position: relative;
+          zoom: 1; /* 触发IE hasLayout */
+      }
+
+      .dialog-close {
+          position: absolute;
+          right: 15px;
+          top: 50%;
+          /* IE8兼容的垂直居中 */
+          *top: 20px;
+          background: none;
+          border: none;
+          font-size: 24px;
+          font-weight: bold;
+          color: #aaa;
+          cursor: pointer;
+          padding: 0;
+          width: 30px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          /* IE8兼容方案 */
+          *line-height: 24px;
+      }
+
+      .dialog-close:hover {
+          color: #333;
+          background: #eee;
+          border-radius: 50%;
+      }
+
+      .dialog textarea {
+          text-align: left;
+          width: 90%;
+          padding: 15px;
+          margin: 20px 0;
+          outline: none;
+          border: 1px solid #ddd;
+          height: 150px;
+          border-radius: 4px;
+          font-family: 'Microsoft YaHei', Arial, sans-serif;
+          font-size: 14px;
+          resize: none;
+          /* IE8 兼容 */
+          *padding: 10px;
+          *width: 85%;
+      }
+
+      .dialog textarea:focus {
+          border-color: #3498db;
+          /* IE8 不支持 box-shadow */
+          *border-color: #3498db;
+      }
+
+      .dialog-action {
+          text-align: right;
+          padding: 0 20px 20px;
+          zoom: 1; /* 触发IE hasLayout */
+      }
+
+      .dialog-action button {
+          padding: 8px 20px;
+          cursor: pointer;
+          border-radius: 4px;
+          border: 1px solid #ddd;
+          font-size: 14px;
+          font-weight: 500;
+          margin-left: 10px;
+          /* IE8 兼容 */
+          *padding: 5px 15px;
+          *border: 1px solid #ccc;
+          *zoom: 1;
+      }
+
+      .dialog-action button:first-child {
+          margin-left: 0;
+      }
+
+      /* IE8 不支持 :hover 伪类在非 a 标签上，但可以定义以防在支持的浏览器中使用 */
+      .dialog-action button:hover {
+          opacity: 0.9;
+          /* IE8 不支持 opacity */
+          *filter: alpha(opacity=90);
+      }
+
+      .dialog-action button:last-child {
+          background: #fff;
+          color: #333;
+          border: 1px solid #ccc;
+      }
+
+      /* 遮罩层 */
+      .dialog-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0,0,0,0.5);
+          z-index: 999;
+          display: none;
+          /* IE8 兼容方案 */
+          *position: absolute;
+          *top: 0;
+          *left: 0;
+          *width: 100%;
+          *height: 100%;
+          *background: #000;
+          *filter: alpha(opacity=50);
+      }
+
+
   </style>
 </head>
 <body>
@@ -463,15 +584,17 @@
   <div style="clear: both"></div>
 </div>
 
-
-
 <!-- 悬浮弹窗 -->
-    <div class='dialog'>
+<div class='dialog-overlay' id='dialogOverlay' onclick="closeDialog()"></div>
-      <div class='title'>查看评价</div>
+<div class='dialog' id='commentDialog' style='display: none;'>
-      <textarea></textarea>
+  <div class='title'>
+    <span>查看评价</span>
+    <button class="dialog-close" onclick="closeDialog()" type="button">×</button>
+  </div>
+  <textarea id="commentText" placeholder="请输入您的评价..."></textarea>
   <div class='dialog-action'>
-        <button style='background: #f0f4fa;margin-right: 20px;'>保存</button>
+    <button style='background: #3498db; color: white; border: 1px solid #3498db;' onclick="saveComment()" type="button">保存</button>
-        <button style='background: #fff'>关闭</button>
+    <button onclick="closeDialog()" type="button">关闭</button>
   </div>
 </div>
 
@@ -746,14 +869,28 @@
             }
 
             var treeItem = document.createElement('div')
-                treeItem.className = 'tree-item-header icon iconfont icon-youjiantou'
+            treeItem.className = 'tree-item-header '
             // 添加降级样式
             treeItem.style.background = '#f0f4fa'
             treeItem.style.cursor = 'pointer'
             // treeItem.style.border = '1px solid #d6dde6'
-                treeItem.innerHTML = resultDetail.typeName
+
+            // 创建img元素而不是使用innerHTML，提高IE8兼容性
+            var treeIcon = document.createElement('img');
+            treeIcon.src = './toRight.png';
+            treeIcon.className = 'tree-icon';
+            treeIcon.alt = '';
+            // 为IE8添加特殊属性
+            treeIcon.setAttribute('alt', '');
+            treeIcon.style.verticalAlign = 'middle';
+            treeIcon.style.marginRight = '10px';
+
+            var textNode = document.createTextNode(resultDetail.typeName
               ? resultDetail.typeName
-                  : resultDetail.dictLabel
+              : resultDetail.dictLabel);
+
+            treeItem.appendChild(treeIcon);
+            treeItem.appendChild(textNode);
 
             resultDom.appendChild(treeItem)
 
@@ -822,20 +959,21 @@
             resultDom.appendChild(resultContainer)
 
             // 绑定点击事件展开/收起内容
-                treeItem.onclick = (function(index, item) {
+            treeItem.onclick = (function(index, item, iconElement) {
               return function() {
                 var resultContainer = document.getElementById(
                   'result-container-' + index
                 )
                 if (resultContainer.style.display === 'none') {
                   resultContainer.style.display = 'block'
-                      this.className = 'tree-item-header expanded icon iconfont icon-xiala'
+                  // 使用setAttribute提高IE8兼容性
+                  iconElement.setAttribute('src', './toDown.png');
                 } else {
                   resultContainer.style.display = 'none'
-                      this.className = 'tree-item-header icon iconfont icon-youjiantou'
+                  iconElement.setAttribute('src', './toRight.png');
                 }
               }
-                })(ind, resultDetail)
+            })(ind, resultDetail, treeIcon)
 
             resultDom.style.minHeight = 30 * arrs.length + 'px'
             resultDom.style.overflowY = 'auto'
@@ -854,8 +992,11 @@
                 if (firstTreeItem && firstResultContainer) {
                   // 显示第一个结果容器
                   firstResultContainer.style.display = 'block'
-                      // 更新第一个树项的类名以显示展开状态
+                  // 更新第一个树项的图标为展开状态
-                      firstTreeItem.className = 'tree-item-header expanded icon iconfont icon-xiala'
+                  var firstIcon = firstTreeItem.getElementsByTagName('img')[0];
+                  if (firstIcon) {
+                    firstIcon.setAttribute('src', './toDown.png');
+                  }
                 }
               }, 0)
             }
@@ -868,6 +1009,44 @@
       }
     )
   }
+
+  // 添加关闭对话框的函数
+  function closeDialog() {
+    document.getElementById('commentDialog').style.display = 'none';
+    document.getElementById('dialogOverlay').style.display = 'none';
+  }
+
+  // 添加保存评论的函数
+  function saveComment() {
+    var comment = document.getElementById('commentText').value;
+    alert('评论已保存: ' + comment);
+    closeDialog();
+  }
+
+  // 显示对话框
+  function showDialog() {
+    document.getElementById('commentDialog').style.display = 'block';
+    document.getElementById('dialogOverlay').style.display = 'block';
+  }
+
+  // 页面加载完成后为按钮添加点击事件
+  window.onload = function() {
+    var buttons = document.querySelectorAll('.actions button');
+    buttons[2].onclick = function() {
+      showDialog();
+    }
+  }
+
+  // 添加错误处理函数
+  function handleError(errorMsg, url, line) {
+    console.log('Error occurred: ' + errorMsg + ' at ' + url + ':' + line)
+    // 可以在这里添加用户友好的错误提示
+    return true // 阻止浏览器默认的错误处理
+  }
+
+  // 设置全局错误处理
+  window.onerror = handleError
+
 </script>
 </body>
 </html>