BIM应用大屏开发

yanzhu-bigscreen/src/views/bimManage.vue

@@ -117,12 +117,11 @@
             </div>
             <div class="warn-info">
               <div class="warn-item">
-<<<<<<< HEAD
                 <div class="czz-number-img czz-number-img-blue">
                   <svg-icon icon-class="notesearch" />
                 </div>
                 <div class="warn-data">
-                  <div class="warn-data-val led-number">{{safetyInfo.safetyCount}}</div>
+                  <div class="warn-data-val led-number">{{ safetyInfo.safetyCount }}</div>
                   <div class="warn-data-text">问题数</div>
                 </div>
               </div>
@@ -131,7 +130,7 @@
                   <svg-icon icon-class="tools" />
                 </div>
                 <div class="warn-data">
-                  <div class="warn-data-val led-number">{{safetyInfo.safetyRectifyCount}}</div>
+                  <div class="warn-data-val led-number">{{ safetyInfo.safetyRectifyCount }}</div>
                   <div class="warn-data-text">整改数</div>
                 </div>
               </div>
@@ -140,7 +139,7 @@
                   <svg-icon icon-class="percent" class="green" />
                 </div>
                 <div class="warn-data">
-                  <div class="warn-data-val led-number">{{safetyInfo.safetyRectifyRate}}%</div>
+                  <div class="warn-data-val led-number">{{ safetyInfo.safetyRectifyRate }}%</div>
                   <div class="warn-data-text">整改率</div>
                 </div>
               </div>
@@ -149,49 +148,9 @@
                   <svg-icon icon-class="warn" class="red" />
                 </div>
                 <div class="warn-data">
-                  <div class="warn-data-val led-number">{{safetyInfo.safetyTimeoutCount}}</div>
+                  <div class="warn-data-val led-number">{{ safetyInfo.safetyTimeoutCount }}</div>
                   <div class="warn-data-text">超时数</div>
                 </div>
-=======
-               
-                  <div class="czz-number-img czz-number-img-blue">
-                    <svg-icon icon-class="notesearch" />
-                  </div>
-                  <div class="warn-data">
-                    <div class="warn-data-val led-number">888</div>
-                    <div class="warn-data-text">问题数</div>
-                  </div>
-              </div>
-              <div class="warn-item">
-               
-                  <div class="czz-number-img czz-number-img-blue">
-                    <svg-icon icon-class="tools"  />
-                  </div>
-                  <div class="warn-data">
-                    <div class="warn-data-val led-number">888</div>
-                    <div class="warn-data-text">整改数</div>
-                  </div>
-              </div>
-              <div class="warn-item">
-               
-                  <div class="czz-number-img czz-number-img-green">
-                    <svg-icon icon-class="percent"  class="green"/>
-                  </div>
-                  <div class="warn-data">
-                    <div class="warn-data-val led-number">888</div>
-                    <div class="warn-data-text">整改率</div>
-                  </div>
-              </div>
-              <div class="warn-item">
-               
-                  <div class="czz-number-img czz-number-img-blue">
-                    <svg-icon icon-class="warn" class="red"/>
-                  </div>
-                  <div class="warn-data">
-                    <div class="warn-data-val led-number">888</div>
-                    <div class="warn-data-text">超时数</div>
-                  </div>
->>>>>>> origin/dev_xd
               </div>
             </div>
           </div>
@@ -424,16 +383,13 @@ export default {
       planFinishRate: 0,
       finishRate: 0,
       photographyList: [],
-<<<<<<< HEAD
+      safetyListCount: [],
-      safetyListCount:[],
+      safetyInfo: {
-      safetyInfo:{
+        safetyRectifyCount: 0,
-        safetyRectifyCount:0,
+        safetyRectifyRate: 0,
-        safetyRectifyRate:0,
+        safetyTimeoutCount: 0,
-        safetyTimeoutCount:0,
+        safetyTimeoutRate: 0,
-        safetyTimeoutRate:0
+      },
-      }
-=======
->>>>>>> origin/dev_xd
     };
   },
   beforeDestroy() {
@@ -472,16 +428,13 @@ export default {
       return this.renderChart(1);
     },
     renderChart(n) {
+      let is1K = this.$dpi() == "1K";
+      let is2K = this.$dpi() == "2K";
       let opt = {
         tooltip: {
           show: true,
-<<<<<<< HEAD
           formatter: function (params) {
             return params.seriesName + "<br/>" + params.marker + (params.value * 100).toFixed(2) + "%";
-=======
-          formatter: function(params){
-            return params.seriesName + "<br/>"+params.marker + (params.value * 100).toFixed(2) + "%";
->>>>>>> origin/dev_xd
           },
         },
         series: [
@@ -489,11 +442,7 @@ export default {
             type: "liquidFill",
             data: [n == 0 ? this.planFinishRate : this.finishRate],
             name: n == 0 ? "计划完成" : "实际完成",
-<<<<<<< HEAD
             color: [n == 0 ? "orange" : "#47D89F"], //颜色
-=======
-            color: [n==0?"orange":"#47D89F"], //颜色
->>>>>>> origin/dev_xd
             //波浪动画效果
             waveAnimation: true,
             animationEasingUpdate: "quinticInOut",
@@ -505,21 +454,12 @@ export default {
             outline: {
               show: false,
             },
-<<<<<<< HEAD
             label: {
-              fontSize: 30,
+              fontSize: is1K ? 20 : is2K ? 30 : 40,
               formatter: function (param) {
                 return (param.value * 100).toFixed(2) + "%";
               },
             },
-=======
-            label:{
-              fontSize: 20,
-              formatter: function (param) {
-                return (param.value*100).toFixed(2) + "%";
-              },
-            }
->>>>>>> origin/dev_xd
           },
         ],
       };
@@ -535,7 +475,6 @@ export default {
       this.getRootScheduleNode();
       this.getFinishRate();
       this.selectLastPhotography();
-<<<<<<< HEAD
       this.getSafetyListCount();
     },
     getSafetyListCount() {
@@ -545,25 +484,23 @@ export default {
       };
       this.$api.safety.listCountForBG({ ...postData, infoType: 0 }).then((d) => {
         this.safetyListCount = d.data;
-        let func=lbl=>{
+        let func = (lbl) => {
-          let obj=this.safetyListCount.find(it=>it.remark==lbl);
+          let obj = this.safetyListCount.find((it) => it.remark == lbl);
-          return obj?obj.id||0:0;
+          return obj ? obj.id || 0 : 0;
         };
-        this.safetyInfo.safetyCount=func("全部");
+        this.safetyInfo.safetyCount = func("全部");
-        this.safetyInfo.safetyRectifyCount=func("完成");
+        this.safetyInfo.safetyRectifyCount = func("完成");
-        if(this.safetyInfo.safetyCount==0){
+        if (this.safetyInfo.safetyCount == 0) {
-          this.safetyInfo.safetyRectifyRate=100;
+          this.safetyInfo.safetyRectifyRate = 100;
-        }else{
+        } else {
-          this.safetyInfo.safetyRectifyRate=(this.safetyInfo.safetyRectifyCount/this.safetyInfo.safetyCount*100.0).toFixed(2);
+          this.safetyInfo.safetyRectifyRate = ((this.safetyInfo.safetyRectifyCount / this.safetyInfo.safetyCount) * 100.0).toFixed(2);
         }
-        this.safetyInfo.safetyTimeoutCount=func("整改超时");
+        this.safetyInfo.safetyTimeoutCount = func("整改超时");
       });
-=======
->>>>>>> origin/dev_xd
     },
     selectLastPhotography() {
       this.$api.detail.photographyList(this.selProject.id).then((d) => {
-        this.photographyList = d.data;
+        this.photographyList =[];// d.data;
       });
     },
     getFinishRate() {
@@ -1061,11 +998,12 @@ export default {
   }
 
   .data-content {
-    border: solid 1px #75fbfdaa;
+   
-    background-color: #06445b81;
     height: 100%;
     .div-row {
       height: 33%;
+       border: solid 1px #75fbfdaa;
+        background-color: #06445b81;
       .row-title {
         background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
         padding-left: 10px;
@@ -1287,7 +1225,7 @@ export default {
       width: 80%;
       height: 80%;
       margin-left: 10%;
-      margin-top: 6%;
+      margin-top: 3%;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1309,7 +1247,6 @@ export default {
       }
     }
   }
-<<<<<<< HEAD
   .warn-info {
     height: calc(100% - 30px);
     .warn-item {
@@ -1323,43 +1260,19 @@ export default {
         height: 80px;
         line-height: 80px;
         .svg-icon {
-=======
-  .warn-info{
-    height: calc(100% - 30px);
-    .warn-item{
-      display: inline-flex;
-      width:50%;
-      height:50%;
-      justify-content: center;
-      align-items: center;
-      .czz-number-img{
-        width:80px;
-        height: 80px;
-        line-height: 80px;
-        .svg-icon{
->>>>>>> origin/dev_xd
           width: 40px;
           height: 40px;
           fill: #5cc0eb;
           position: relative;
-<<<<<<< HEAD
           top: 12px;
           &.red {
             fill: red;
           }
           &.green {
-=======
-          top:12px;
-          &.red{
-            fill: red;
-          }
-          &.green{
->>>>>>> origin/dev_xd
             fill: #00e900;
           }
         }
       }
-<<<<<<< HEAD
       .warn-data {
         margin-left: 10px;
         .warn-data-val {
@@ -1367,19 +1280,10 @@ export default {
           font-weight: 700;
           color: #22d0d2;
         }
-        .warn-data-text{
+        .warn-data-text {
-          margin-top:10px;
+          margin-top: 10px;
           text-align: center;
         }
-=======
-      .warn-data{
-        margin-left:10px;
-        .warn-data-val{
-          font-size:30px;
-          font-weight: 700;
-          color: #22d0d2;
-        }
->>>>>>> origin/dev_xd
       }
     }
   }
@@ -1426,5 +1330,371 @@ export default {
       padding: 4px 8px;
     }
   }
+  @media (max-width: 1920px) {
+    .data-content {
+      .div-row {
+        min-height: 220px;
+        .row-title {
+          height: 30px;
+          line-height: 30px;
+          font-size: 14px;
+        }
+      }
+    }
+    .div-tools {
+      bottom: 25vh;
+      margin-left: -220px;
+      border-radius: 10px;
+      .tool-item {
+        padding: 10px 20px;
+        .icon {
+          width:30px;
+          height: 30px;
+          border-radius: 15px;
+          .svg-icon {
+            width: 20px;
+            height: 20px;
+          }
+        }
+        .sp-text {
+          margin-top: 10px;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .prj-info {
+      padding: 10px;
+
+      .base-info {
+        .floor-area {
+          font-size: 24px;
+        }
+        .floor-area-text {
+          line-height: 20px;
+          font-size: 12px;
+        }
+        margin-bottom: 10px;
+      }
+      .tb-prj {
+        td,
+        th {
+          border: solid 1px #6ea9ab68;
+          padding: 4px;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .prj-worker {
+      height: calc(100% - 50px);
+      .worker-chart {
+        .chart-item {
+          .chart-gif,
+          .chart-text {
+            left: 24px;
+            top: 20px;
+            width: 80px;
+            height: 80px;
+          }
+          .chart-text {
+            font-size: 20px;
+          }
+        }
+      }
+      .worker-title {
+        .title-item {
+          padding: 20px 0px 10px 0px;
+          .svg-icon {
+            fill: #3ffcff;
+            width: 60px;
+            height: 60px;
+          }
+          font-size: 12px;
+          color: #3ffcff;
+        }
+      }
+    }
+
+    .investment-stats-cost {
+      padding: 20px 10px;
+      top: -12px;
+
+      .stat-card {
+        padding: 16px 0;
+        box-shadow: 0 2px 8px #0004;
+        border-radius: 10px;
+      }
+      .stat-title {
+        font-size: 12px;
+        margin-bottom: 8px;
+      }
+      .stat-value {
+        font-size: 20px;
+      }
+      .center-icon {
+        width: 60px;
+        height: 60px;
+        font-size: 24px;
+        .chart-gif {
+          width: 50px;
+          height: 50px;
+          top: 5px;
+          left: 5px;
+        }
+      }
+    }
+    .plan-chart {
+      height: calc(100% - 30px);
+      .chart-item {
+        .chart-title {
+          font-size: 12px;
+          top: -30px;
+        }
+      }
+    }
+
+    .photography-list {
+      height: calc(100% - 30px);
+      padding: 10px 0px;
+      .el-carousel {
+        height: calc(100% - 10px);
+      }
+
+      .photography-video {
+        height: calc(100% - 30px);
+      }
+
+      .photography-list-title {
+        line-height: 24px;
+        font-size: 12px;
+      }
+      .photography-list-nodata {
+       
+        .video-play {
+          width: 60px;
+          height: 60px;
+          line-height: 60px;
+          border-radius: 30px;
+          margin-bottom: 12px;
+        }
+
+        .photography-list-no-title {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .warn-info {
+      height: calc(100% - 30px);
+      .warn-item {
+        width: calc(50% - 30px);
+        height: 50%;
+        padding-left: 30px;
+        .czz-number-img {
+          width: 70px;
+          height: 70px;
+          line-height: 70px;
+          .svg-icon {
+            width: 30px;
+            height: 30px;
+            top: 6px;
+          }
+        }
+        .warn-data {
+          margin-left: 10px;
+          .warn-data-val {
+            font-size: 30px;
+          }
+          .warn-data-text {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+  @media (min-width: 2561px) {
+    .data-content {
+      .div-row {
+        min-height: 420px;
+        .row-title {
+          height: 48px;
+          line-height: 48px;
+          font-size: 32px;
+        }
+      }
+    }
+    .div-tools {
+      bottom: 25vh;
+      margin-left: -340px;
+      border-radius: 10px;
+      .tool-item {
+        padding: 10px 20px;
+        .icon {
+          width: 60px;
+          height: 60px;
+          border-radius: 30px;
+          .svg-icon {
+            width: 40px;
+            height: 40px;
+          }
+        }
+        .sp-text {
+          margin-top: 10px;
+          font-size: 24px;
+        }
+      }
+    }
+
+    .prj-info {
+      padding: 20px;
+
+      .base-info {
+        .floor-area {
+          font-size: 60px;
+        }
+        .floor-area-text {
+          line-height: 40px;
+          font-size: 24px;
+        }
+        margin-bottom: 10px;
+      }
+      .tb-prj {
+        td,
+        th {
+          border: solid 1px #6ea9ab68;
+          padding: 8px;
+          font-size: 24px;
+        }
+      }
+    }
+
+    .prj-worker {
+      height: calc(100% - 60px);
+      .worker-chart {
+        .chart-item {
+          .chart-gif,
+          .chart-text {
+            left: 40px;
+            top: 20px;
+            width: 180px;
+            height: 180px;
+          }
+          .chart-text {
+            font-size: 60px;
+          }
+        }
+      }
+      .worker-title {
+        .title-item {
+          padding: 20px 0px 10px 0px;
+          .svg-icon {
+            fill: #3ffcff;
+            width: 120px;
+            height: 120px;
+          }
+          font-size: 24px;
+          color: #3ffcff;
+        }
+      }
+    }
+
+    .investment-stats-cost {
+      padding: 30px 20px;
+      top: -18px;
+
+      .stat-card {
+        height: 130px;
+        padding: 16px 0;
+        box-shadow: 0 2px 8px #0004;
+        border-radius: 10px;
+      }
+      .stat-title {
+        font-size: 24px;
+        margin-bottom: 8px;
+      }
+      .stat-value {
+        font-size: 60px;
+      }
+      .center-icon {
+        width: 120px;
+        height: 120px;
+        font-size: 48px;
+        .chart-gif {
+          width: 110px;
+          height: 110px;
+          top: 5px;
+          left: 5px;
+        }
+      }
+    }
+    .plan-chart {
+      height: calc(100% - 60px);
+      .chart-item {
+        .chart-title {
+          font-size: 24px;
+          top: -40px;
+        }
+      }
+    }
+
+    .photography-list {
+      height: calc(100% - 60px);
+      padding: 10px 0px;
+      .el-carousel {
+        height: calc(100% - 10px);
+      }
+
+      .photography-video {
+        height: calc(100% - 30px);
+      }
+
+      .photography-list-title {
+        line-height: 36px;
+        font-size: 24px;
+      }
+      .photography-list-nodata {
+        .video-play {
+          width: 120px;
+          height: 120px;
+          line-height: 120px;
+          border-radius: 60px;
+          margin-bottom: 12px;
+        }
+
+        .photography-list-no-title {
+          font-size: 24px;
+        }
+      }
+    }
+
+    .warn-info {
+      height: calc(100% - 60px);
+      .warn-item {
+        width: calc(50% - 30px);
+        height: 50%;
+        padding-left: 30px;
+        .czz-number-img {
+          width: 140px;
+          height: 140px;
+          line-height: 140px;
+          .svg-icon {
+            width: 60px;
+            height: 60px;
+            top: 24px;
+          }
+        }
+        .warn-data {
+          margin-left: 10px;
+          .warn-data-val {
+            font-size: 60px;
+          }
+          .warn-data-text {
+            font-size: 24px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>