贞达市政可视化

src/views/zdsz/bigscreen/index.vue

@@ -18,14 +18,36 @@
       <div class="mainLeft">
         <!-- 左上图一 -->
         <div class="mainLeft_1">
-          <div class="title">施工进度统计</div>
-          <div class="header">钢管总数{{ progress.ironTotal }} PE总数{{ progress.peTotal }}</div>
+          <div class="title"><span>施工进度统计</span></div>
+          <div class="header_left">
+            <div class="material_zs">
+              <h4>钢管总数</h4>
+              <h4>{{ progress.ironTotal }}</h4>
+            </div>
+            <div class="material_zs">
+              <h4>PE总数</h4>
+              <h4>{{ progress.peTotal }}</h4>
+            </div>
+          </div>
           <div id="echartsLeft_1"></div>
         </div>
         <!-- 左上图二 -->
         <div class="mainLeft_2">
-          <div class="title">工程状态统计</div>
-          <div class="header">开工{{ projectStatus.todo }} 在建{{ projectStatus.doing }} 完工{{ projectStatus.done }}</div>
+          <div class="title"><span>工程状态统计</span></div>
+          <div class="header_left">
+            <div class="gc_state">
+              <h3>{{ projectStatus.todo }}</h3>
+              <span>开工</span>
+            </div>
+            <div class="gc_state">
+              <h3>{{ projectStatus.doing }}</h3>
+              <span>在建</span>
+            </div>
+            <div class="gc_state">
+              <h3>{{ projectStatus.done }}</h3>
+              <span>完工</span>
+            </div>
+          </div>
         </div>
       </div>
       <!-- 左边俩 结束 -->
@@ -36,14 +58,33 @@
       <div class="mainRight">
         <!-- 右上图一 -->
         <div class="mainRight_1">
-          <div class="title">今日施工数</div>
-          <div class="header">今日施工数{{ totalRight_1 }}</div>
+          <div class="title"><span>今日施工数</span></div>
+          <div class="header">
+            <span>今日施工数</span>
+            <div>
+              <p>1</p>
+              <p>1</p>
+              <p>1</p>
+              <p>1</p>
+            </div>
+            <!-- {{ totalRight_1 }} -->
+          </div>
           <div id="echartsRight_1"></div>
         </div>
         <!-- 右上图二 -->
         <div class="mainRight_2">
-          <div class="title">今日使用人数</div>
-          <div class="header">今日施工人数{{ totalRight_2 }}人</div>
+          <div class="title"><span>今日施工人数</span></div>
+          <div class="header">
+            <span>今日施工人数</span>
+            <div>
+              <p>1</p>
+              <p>1</p>
+              <p>1</p>
+              <p>1</p>
+            </div>
+            <span>人</span>
+            <!-- {{ totalRight_2 }} -->
+          </div>
           <div id="echartsRight_2"></div>
         </div>
       </div>
@@ -54,12 +95,12 @@
     <div class="mainBottom">
       <!-- 下边图一 -->
       <div class="mainBottom_1">
-        <div class="title">各个区今日施工数</div>
+        <div class="c_title"><span>各个区今日施工数</span></div>
         <div id="echartsBottom_1"></div>
       </div>
       <!-- 下边图二 -->
       <div class="mainBottom_2">
-        <div class="title">各个区今日旧改施工数</div>
+        <div class="c_title"><span>各个区今日旧改施工数</span></div>
         <div id="echartsBottom_2"></div>
       </div>
     </div>
@@ -755,85 +796,55 @@
     width: 1920px;
     height: 560px;
     margin: 0 auto 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
     .mainLeft{
-      float: left;
-      width: 640px;
+      width: 540px;
       margin-left: 20px;
       .mainLeft_1{ // 施工进度统计
         background-color: #04183e;
         margin-bottom: 10px;
         width: 100%;
-        height: 285px;
-        .title{
-          width: 640px;
-          height:47px;
-        }
-        .header{
-          width: 640px;
-          height:48px;
-        }
+        height:334px;
+        box-shadow:#163696 0px 0px 30px inset;
         #echartsLeft_1{
-          width: 640px;
+          width:90%;
           height: 190px;
+          margin: 0 auto;
         }
       }
       .mainLeft_2{ // 工程状态统计
         background-color: #04183e;
         width: 100%;
-        height: 265px;
-        .title{
-          width: 640px;
-          height:47px;
-        }
-        .header{
-          width: 640px;
-          height: 218px;
-        }
+        height: 216px;
       }
     }
     .mainRight{
-      float: left;
-      width: 640px;
-      margin-left: 20px;
+      width: 540px;
+      margin-right: 20px;
       .mainRight_1{ // 今日施工数
         margin-bottom: 10px;
         width: 100%;
         height: 275px;
-        .title{
-          width: 640px;
-          height:47px;
-        }
-        .header{
-          width: 640px;
-          height:48px;
-        }
+        box-shadow:#163696 0px 0px 30px inset;
         #echartsRight_1{
-          width: 640px;
+          width:100%;
           height: 180px;
         }
       }
       .mainRight_2{ // 今日施工人数
         width: 100%;
         height: 275px;
-        .title{
-          width: 640px;
-          height:47px;
-        }
-        .header{
-          width: 640px;
-          height:48px;
-        }
         #echartsRight_2{
-          width: 640px;
+          width: 100%;
           height: 180px;
         }
       }
     }
     .mainMap{
-      float: left;
-      width: 560px;
+      width: 40%;
       height: 560px;
-      margin-left: 20px;
     }
   }
   .mainBottom{
@@ -844,10 +855,6 @@
       width: 930px;
       height: 100%;
       margin-left: 20px;
-      .title{
-        width: 930px;
-        height:47px;
-      }
       #echartsBottom_1{
         width: 930px;
         height: 230px;
@@ -858,10 +865,6 @@
       width: 930px;
       height: 100%;
       margin-left: 20px;
-      .title{
-        width: 930px;
-        height:47px;
-      }
       #echartsBottom_2{
         width: 930px;
         height: 230px;
@@ -880,5 +883,105 @@
     /*background-color: #000;*/
     /*background-color: red;*/
   }
+  @font-face{
+    font-family: 'biaotihei';
+    src : url('~@/assets/images/You She Biaotihei.ttf');
+}
+.title{
+    width:100%;
+    height:49px;
+    background: url("~@/assets/images/title-bj.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items:center;
+  }
+  .c_title{
+    width:100%;
+    height:49px;
+    background: url("~@/assets/images/c-title-bj.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items:center;
+  }
+  .title span,.c_title span{
+    font-family: 'biaotihei';
+    font-size: 18px;
+    background-image:-webkit-linear-gradient(bottom,#fff,#52c8ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 0 0 0 30px;
+  }
+  .header_left{
+    display: flex;
+    flex-direction: row;
+    justify-content:center;
+  }
+  .material_zs{
+    background:rgb(64 127 255 / 18%);
+    display: inline-flex;
+    flex-direction: row;
+    justify-content:space-between;
+    width: 180px;
+    height: 46px;
+    align-items:center;
+    padding: 0 20px;
+    margin: 20px 20px;
+  }
+  .material_zs h4{
+    font-size: 16px;
+    background-image:-webkit-linear-gradient(left,#52ffff,#2aacfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .gc_state{
+    background: url("~@/assets/images/ztbj.png") no-repeat center bottom;
+    background-size: 80px 124px;
+    width: 99px;
+    height: 122px;
+    margin: 30px 20px 0 20px;
+    text-align: center;
+    font-family: "biaotihei";
+    color: #fff;
+  }
+  .gc_state span{
+    font-size: 22px;
+  }
+  .gc_state h3{
+    font-size: 30px;
+    line-height: 0;
+    margin: 0 0 16px 0;
+    font-weight: normal;
+  }
+  .header{
+    display: flex;
+    flex-direction: row;
+    justify-content:center;
+    align-items:center;
+    margin: 10px 0 0 0;
+  }
+  .header span{
+    font-size: 16px;
+    background-image:-webkit-linear-gradient(bottom,#1eeaf1,#1bc0fd);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .header div{
+    display: flex;
+    flex-direction: row;
+    justify-content:center;
+    align-items:center;
+  }
+  .header p{
+    font-size: 30px;
+    font-family:"宋体";
+    font-weight: bold;
+    background: url("~@/assets/images/szbj.png") repeat-x;
+    color: #fff;
+    width: 39px;
+    height: 55px;
+    text-align: center;
+    line-height: 55px;
+    margin: 0;
+  }
 </style>