完善大屏

src/router/generator-platform-routers.js

@@ -422,7 +422,10 @@ export const constantRouterMap = [
     path: '/RepairBigScreen',
     component: () => import('@/views/statisticView/100')
   },
-
+  {
+    path: '/SwitchingRoomBigScreen',
+    component: () => import('@/views/statisticView/SwitchingRoom')
+  },
   {
     path: '/StoreBigScreen',
     component: () => import('@/views/statisticView/9')

src/views/statisticView/44.vue

@@ -5,7 +5,7 @@
         <img src="@/assets/22title.png" alt="">
       </div>
       <div class="text">
-        <div> 设备数据大屏展示平台</div>
+        <div>设备数据大屏展示平台</div>
         <div style="font-size: 15px;color: #A7DBFF;">Large screen display platform for device data</div>
       </div>
     </div>

src/views/statisticView/SwitchingRoom.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="view-container">
+    <div class="date">
+      <span>2022年5月17日</span>
+      <span>天气:良</span>
+    </div>
+    <div class="adress">
+      <div class="address-opt">梅康一路</div>
+      <div>梅康一路</div>
+      <div>梅康一路</div>
+    </div>
+    <div class="sb">
+      <a-row type="flex" justify="space-between" :gutter="[20,20]">
+        <a-col :span="6" v-for="item in 8" :key="item">
+          <div class="sb-info">
+            <div class="sb-info-title">
+              <span>2G04</span>
+              <span>10KV联合动力2#变压器</span>
+            </div>
+            <div class="sb-info-content">
+              <div>低压进线V</div>
+              <div class="arrow">
+                <div>
+                  <div>电压：32V</div>
+                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(40, 233, 108, 1)">
+                  <div>电流：32A</div>
+                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(255, 216, 0, 1)">
+                  <div>有功电度：34V</div>
+                  <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
+                </div>
+              </div>
+              <div><img src="../../assets/bgView/bianyaqi.png" width="87px" alt=""></div>
+              <div class="arrow">
+                <div>
+                  <div>电压：32V</div>
+                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(40, 233, 108, 1)">
+                  <div>电压：32V</div>
+                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
+                </div>
+              </div>
+              <div>高压出线KV</div>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="6" v-for="item in 8" :key="item">
+          <div class="sb-info">
+            <div class="sb-info-title">
+              <span>2G06</span>
+              <span>10KV开山螺杆B线</span>
+            </div>
+            <div class="sb-info-content">
+              <div>低压进线V</div>
+              <div class="arrow">
+                <div>
+                  <div>电压：32V</div>
+                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(40, 233, 108, 1)">
+                  <div>电压：32V</div>
+                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(255, 216, 0, 1)">
+                  <div>电压：32V</div>
+                  <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
+                </div>
+              </div>
+              <div><img src="../../assets/bgView/luogan.png" width="153px" alt=""></div>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+<style lang="less" scoped>
+.view-container {
+width:1920px;
+height:1080px;
+font-family: PingFang SC;
+padding: 80px 67px;
+&::after {
+  content: "";
+  width:1920px;
+  height:1080px;
+  background: url(../../assets/bgView/SwitchingRoomBG.png);
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  z-index: -1;
+}
+}
+.date{
+  width: 250px;
+  color: #FFFFFF;
+  font-size: 20px;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top:58px;
+  left:96px;
+}
+.adress{
+  width: 660px;
+  margin: 20px auto;
+  font-size: 30px;
+  font-weight: bold;
+  color: #FFFFFF;
+  display:flex;
+  justify-content: space-between;
+  div {
+    width: 173px;
+    height: 58px;
+    line-height: 50px;
+    text-align: center;
+    border: 2px solid #0089D8;
+    border-radius: 9px;
+  }
+  .address-opt {
+    box-shadow: 0px 0px 40px 0px rgba(0, 137, 216, 0.8) inset;
+    color:#28E96C;
+  }
+}
+.sb{
+  color:#fff;
+  margin-top: 30px;
+}
+.sb-info{
+  width: 424px;
+  height:185px;
+  background: url(../../assets/bgView/sbInfoBg.png) no-repeat;
+  position: relative;
+  .sb-info-title{
+    width: 208px;
+    font-size: 13px;
+    font-weight: bold;
+    color: RGBA(192, 231, 247, 1);
+    display: flex;
+    justify-content:space-between;
+    position: absolute;
+    top:16px;
+    left:18px;
+    &::before{
+      content: '';
+      width: 5px;
+      height: 10px;
+      background: #5ACCF8;
+      position: absolute;
+      top:5px;
+      left:2px;
+    }
+    span:first-child{
+      color:#5ACCF8;
+      padding-left:10px;
+    }
+  }
+  .sb-info-content{
+    display: flex;
+    justify-content: space-around;
+    align-items:center;
+    font-size: 14px;
+    font-weight: 500;
+    color: #5ACCF8;
+    padding: 44px 10px 10px 7px;
+    .arrow{
+      font-size:12px;
+    }
+  }
+}
+</style>