完善

src/router/generator-platform-routers.js

@@ -441,6 +441,10 @@ export const constantRouterMap = [
     path: '/TransformerDetailBigScreen',
     component: () => import('@/views/statisticView/TransformerDetail')
   },
+  {
+    path: '/TransformerHistoryBigScreen',
+    component: () => import('@/views/statisticView/TransformerHistory')
+  },
   {
     path: '/DayStatistics',
     component: () => import('@/views/statisticView/DayStatistics')

src/views/statisticView/SwitchingRoom.vue

@@ -1,28 +1,94 @@
 <template>
   <div class="view-container">
     <div class="date">
-      <span>{{ date }}</span>
+      <span>{{ date }}</span>天气： 晴
     </div>
     <div class="dateStatistics">
-      <div @click="handleDayView">日统计</div>
+      <div @click="handleDayView">日统计</div>&nbsp;&nbsp;
       <div @click="handleMonthView">月统计</div>
     </div>
     <div class="adress">
       <div class="address-opt">梅康一路</div>
+      <div>梅康二路</div>
       <div>梅康三路</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" @click="handleView">
+        <a-col :span="6">
+          <div class="sb-info">
+            <div class="sb-info-title">
+              <span>梅康一路汇总数据</span>
+            </div>
+            <div class="sb-info-content">
+              <div>
+                <div style="display:flex;width:170px;align-items: center;padding: 15px 0;">
+                  <div class="tixing1">
+                    电压
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  V
+                </div>
+                <div style="display:flex;width:170px;align-items: center;padding: 15px 0;">
+                  <div class="tixing2">
+                    电流
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  A
+                </div>
+              </div>
+              <div>
+                <div style="display:flex;width:175px;align-items: center;padding: 15px 0;">
+                  <div class="tixing1">
+                    有功电度
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  W
+                </div>
+                <div style="display:flex;width:175px;align-items: center;padding: 15px 0;">
+                  <div class="tixing2">
+                    无功电度
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  W
+                </div>
+              </div>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="6" v-for="item in 7" :key="item" @click="handleView">
           <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>高压</div>
               <div class="arrow">
                 <div>
                   <div>电压：32V</div>
@@ -36,6 +102,10 @@
                   <div>有功电度：34V</div>
                   <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
                 </div>
+                <div style="color:rgba(248, 161, 161, 1)">
+                  <div>温度：3℃</div>
+                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
+                </div>
               </div>
               <div><img src="../../assets/bgView/bianyaqi.png" width="87px" alt=""></div>
               <div class="arrow">
@@ -48,36 +118,70 @@
                   <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
                 </div>
               </div>
-              <div>高压出线KV</div>
+              <div>低压</div>
             </div>
           </div>
         </a-col>
-        <a-col :span="6" v-for="item in 8" :key="item">
+        <a-col :span="6" v-for="item in 4" :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>高压</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>电流：32A</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>有功电度：34V</div>
                   <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
                 </div>
+                <div style="color:rgba(255, 216, 0, 1)">
+                  <div>温度：3℃</div>
+                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
+                </div>
               </div>
               <div><img src="../../assets/bgView/luogan.png" width="153px" alt=""></div>
             </div>
           </div>
         </a-col>
+        <a-col :span="6" v-for="item in 4" :key="item">
+          <div class="sb-info">
+            <div class="sb-info-title">
+              <span>2G06</span>
+              <span>10KV联合动力2#电压器</span>
+            </div>
+            <div class="sb-info-content">
+              <div>高压</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 style="color:rgba(255, 216, 0, 1)">
+                  <div>温度：3℃</div>
+                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
+                </div>
+              </div>
+              <div><img src="../../assets/bgView/dianyaqi.png" width="153px" alt=""></div>
+            </div>
+          </div>
+        </a-col>
       </a-row>
     </div>
   </div>
@@ -127,7 +231,7 @@ padding: 80px 67px;
 }
 }
 .dateStatistics{
-  width: 250px;
+  width: 300px;
   color: #FFFFFF;
   font-size: 20px;
   display: flex;
@@ -148,7 +252,7 @@ padding: 80px 67px;
   }
 }
 .date{
-  width: 250px;
+  width: 300px;
   color: #FFFFFF;
   font-size: 20px;
   display: flex;
@@ -158,7 +262,7 @@ padding: 80px 67px;
   left:96px;
 }
 .adress{
-  width: 660px;
+  width: 1000px;
   margin: 20px auto;
   font-size: 30px;
   font-weight: bold;
@@ -224,7 +328,103 @@ padding: 80px 67px;
     padding: 44px 10px 10px 7px;
     .arrow{
       font-size:12px;
+      transform:scale(.8);
     }
   }
 }
+
+.sb-proportion-info{
+   position: relative;
+   width: 66px;
+   height: 30px;
+   text-align: center;
+   font-size:12px;
+   line-height: 32px;
+   background: rgba(0, 186, 255, 0.1);
+}
+.top-left-two{
+    width: 5px;
+    height: 5px;
+    display: block;
+    border-top: 1px solid #02E8FF;
+    border-left: 1px solid #02E8FF;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+  }
+  .bottom-left-two{
+    width: 5px;
+    height: 5px;
+    display: block;
+    border-bottom: 1px solid #02E8FF;
+    border-left: 1px solid #02E8FF;
+    position: absolute;
+    bottom: -1px;;
+    left: -1px;;
+  }
+  .top-right-two{
+     width: 5px;
+    height: 5px;
+    display: block;
+    border-top: 1px solid #02E8FF;
+    border-right: 1px solid #02E8FF;
+    position: absolute;
+    top: -1px;;
+    right: -1px;;
+  }
+  .bottom-right-two {
+     width: 5px;
+    height: 5px;
+    display: block;
+   border-bottom: 1px solid #02E8FF;
+    border-right: 1px solid #02E8FF;
+    position: absolute;
+    bottom: -1px;;
+    right: -1px;;
+  }
+.tixing1 {
+    line-height: 30px;
+    text-align: center;
+    width: 72px;
+    height: 30px;
+    font-size:12px;
+    background: #00E4FF;
+    position: relative;
+    z-index: 9;
+    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 80% 100%, 0% 100%);
+    &::after{
+      content:"";
+      position: absolute;
+      left: 1px;
+      top:1px;
+      width: 70px;
+      height: 28px;
+      z-index: -9;
+      background: #13154c;
+      clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 80% 100%, 0% 100%);
+    }
+}
+
+.tixing2 {
+    line-height: 30px;
+    text-align: center;
+    width: 72px;
+    height: 30px;
+    font-size:12px;
+    background: #00E4FF;
+    position: relative;
+    z-index: 9;
+    clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 100% 100%, 0% 100%);
+    &::after{
+      content:"";
+      position: absolute;
+      left: 1px;
+      top:1px;
+      width: 70px;
+      height: 28px;
+      z-index: -9;
+      background: #13154c;
+      clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 100% 100%, 0% 100%);
+    }
+}
 </style>

src/views/statisticView/TransformerDetail.vue

@@ -14,9 +14,9 @@
               <div class="sb-proportion-info">
                 <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                 <div style="font-size: 36px;color: #BDD4FF;">
-                  {{detail.value}}
+                  {{ detail.value }}
                 </div>
-                <div> {{detail.title}}</div>
+                <div> {{ detail.title }}</div>
               </div>
             </a-col>
           </a-row>
@@ -24,45 +24,7 @@
       </div>
       <div class="history">
         <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
-        <div class="history-title">
-          <div>数据历史</div>
-          <div >
-            <span style="color:#01D4F9;font-size:30px;" >
-              {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
-            </span>
-            <a-month-picker v-model="time" :format="BaseTool.Date.PICKER_NORM_YEAR_MONTH" @change="onMonthChange" @ok="onOk">
-              <span class="month">
-                <a-icon type="calendar" theme="filled" />
-              </span>
-            </a-month-picker>&nbsp;
-            <span style="padding:0 2px ;background:#01D4F9;"></span>&nbsp;
-            <a-date-picker
-              v-model="time"
-              :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
-              @change="onDateChange"
-              @ok="onOk">
-              <span class="date">
-                <a-icon type="calendar" theme="filled" />
-              </span>
-            </a-date-picker>
-          </div>
-        </div>
-        <table>
-          <thead>
-            <tr style="display: flex;justify-content: space-between;width: 100%;">
-              <th class="list-header" style="color:#fff">时间</th>
-              <th class="list-header" style="color:#fff">正向有功(kwh)</th>
-              <th class="list-header" style="color:#fff">正向无功(kwh)</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="i in 24" :key="i" style="display: flex;justify-content: space-between;">
-              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + ':00' }}</td>
-              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
-              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
-            </tr>
-          </tbody>
-        </table>
+
       </div>
     </div>
   </div>
@@ -157,53 +119,6 @@ background: rgba(0, 186, 255, 0.1);
    border: 2px solid #045693;
    padding:30px;
    margin-top:30px;
-   .history-title{
-    display: flex;
-    justify-content: space-between;
-    font-size: 30px;
-    font-weight: bold;
-    margin:30px 0;
-    color: #fff;
-    .month{
-      color:#01D4F9;
-      font-size:40px;
-      position: relative;
-      &::before{
-        content:'月';
-        color:#fff;
-        font-size:16px;
-        top: 23px;
-        left: 12px;
-        bottom: 0;
-        right: 0;
-        position: absolute;
-      }
-    }
-    .date{
-      color:#01D4F9;
-      font-size:40px;
-      position: relative;
-      &::before{
-        content:'日';
-        color:#fff;
-        font-size:16px;
-        top: 23px;
-        left: 12px;
-        bottom: 0;
-        right: 0;
-        position: absolute;
-      }
-    }
-   }
-   table{
-    width: 100%;
-    tbody{
-      height: 700px;
-  overflow: hidden;
-  display: block;
-  overflow-y: auto;
-    }
-   }
    .list-header{
      margin:0;
      padding: 0;

src/views/statisticView/TransformerHistory.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="view-container">
+    <div class="title"><span>2G04</span><span>10KV联合动力2#变压器</span></div>
+    <div class="content">
+      <div class="info">
+        <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
+        <div style="font-size: 40px;font-weight: bold; margin-bottom:50px;"><span style="padding-right:30px;">2G04</span><span> 变压器详细信息</span></div>
+        <div style="text-align:center;">
+          <img src="../../assets/bgView/luogan.png" width="400px" alt="">
+        </div>
+        <div style="padding-top:70px">
+          <a-row type="flex" justify="space-around" :gutter="[0,25]">
+            <a-col :span="5" v-for="(detail, index) in details" :key="index">
+              <div class="sb-proportion-info">
+                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                <div style="font-size: 36px;color: #BDD4FF;">
+                  {{detail.value}}
+                </div>
+                <div> {{detail.title}}</div>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+      <div class="history">
+        <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
+        <div class="history-title">
+          <div>数据历史</div>
+          <div >
+            <span style="color:#01D4F9;font-size:30px;" >
+              {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
+            </span>
+            <a-month-picker v-model="time" :format="BaseTool.Date.PICKER_NORM_YEAR_MONTH" @change="onMonthChange" @ok="onOk">
+              <span class="month">
+                <a-icon type="calendar" theme="filled" />
+              </span>
+            </a-month-picker>&nbsp;
+            <span style="padding:0 2px ;background:#01D4F9;"></span>&nbsp;
+            <a-date-picker
+              v-model="time"
+              :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
+              @change="onDateChange"
+              @ok="onOk">
+              <span class="date">
+                <a-icon type="calendar" theme="filled" />
+              </span>
+            </a-date-picker>
+          </div>
+        </div>
+        <table>
+          <thead>
+            <tr style="display: flex;justify-content: space-between;width: 100%;">
+              <th class="list-header" style="color:#fff">时间</th>
+              <th class="list-header" style="color:#fff">正向有功(kwh)</th>
+              <th class="list-header" style="color:#fff">正向无功(kwh)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="i in 24" :key="i" style="display: flex;justify-content: space-between;">
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + ':00' }}</td>
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      time: '',
+      dateVisual: true,
+      details: [{ 'title': '状态', 'value': '开机' }, { 'title': '总电压', 'value': '220V' },
+        { 'title': '电流', 'value': '30A' }, { 'title': '总能耗', 'value': '3256kwh' },
+        { 'title': '日能耗', 'value': '300kwh' }, { 'title': '月能耗', 'value': '300kwh' },
+        { 'title': '温度', 'value': '56度' }, { 'title': '预警次数', 'value': '10次' }]
+    }
+  },
+  methods: {
+    onDateChange (value, dateString) {
+      this.dateVisual = true
+    },
+    onMonthChange (value, dateString) {
+      this.dateVisual = false
+    },
+    onOk (value) {
+      console.log('onOk: ', value)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.view-container {
+width:1920px;
+height:1080px;
+font-family: PingFang SC;
+padding: 15px 37px;
+&::after {
+  content: "";
+  width:1920px;
+  height:1080px;
+  background: url(../../assets/bgView/TransformerDetail.png);
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  z-index: -1;
+}
+}
+.title{
+  display: flex;
+  justify-content: space-between;
+  width: 600px;
+  margin:0 auto;
+  font-size: 42px;
+  font-weight: bold;
+  text-shadow: 0px 2px 4px rgba(4,0,0,0.3);
+  background: linear-gradient(0deg, #BCBCBC 1.123046875%, #FFFFFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.content{
+  display: flex;
+  justify-content: space-between;
+}
+.info{
+  color:#5ACCF8;
+  width: 766px;
+   height:950px;
+   position: relative;
+   border: 2px solid #045693;
+   padding:30px;
+   margin-top:30px;
+   .sb-proportion-info{
+   position: relative;
+display: flex;
+flex-direction:column;
+align-items: center;
+justify-content:center;
+position: relative;
+// width: 141px;
+height: 150px;
+background: rgba(0, 186, 255, 0.1);
+   }
+}
+.history{
+  color:#A8E6F3 ;
+  width: 1041px;
+   height:950px;
+   position: relative;
+   border: 2px solid #045693;
+   padding:30px;
+   margin-top:30px;
+   .history-title{
+    display: flex;
+    justify-content: space-between;
+    font-size: 30px;
+    font-weight: bold;
+    margin:30px 0;
+    color: #fff;
+    .month{
+      color:#01D4F9;
+      font-size:40px;
+      position: relative;
+      &::before{
+        content:'月';
+        color:#fff;
+        font-size:16px;
+        top: 23px;
+        left: 12px;
+        bottom: 0;
+        right: 0;
+        position: absolute;
+      }
+    }
+    .date{
+      color:#01D4F9;
+      font-size:40px;
+      position: relative;
+      &::before{
+        content:'日';
+        color:#fff;
+        font-size:16px;
+        top: 23px;
+        left: 12px;
+        bottom: 0;
+        right: 0;
+        position: absolute;
+      }
+    }
+   }
+   table{
+    width: 100%;
+    tbody{
+      height: 700px;
+  overflow: hidden;
+  display: block;
+  overflow-y: auto;
+    }
+   }
+   .list-header{
+     margin:0;
+     padding: 0;
+      width: 180px;
+height: 35px;
+font-size: 16px;
+font-weight: bold;
+margin-bottom: 12px;
+
+font-family: Microsoft YaHei;
+background: rgba(2, 205, 255, 0);
+box-shadow: 0px 0px 40px 0px rgba(0, 122, 162, 0.8) inset;
+display: flex;
+justify-content: center;
+align-items: center;
+   }
+}
+.top-left{
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    top: -6px;
+    left: -6px;
+  }
+  .bottom-left{
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -6px;
+    left: -6px;
+  }
+  .top-right{
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    top: -6px;
+    right: -6px;
+  }
+  .bottom-right {
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -6px;
+    right: -6px;
+  }
+    .top-left-two{
+    width: 15px;
+    height: 15px;
+    display: block;
+    border-top: 2px solid #02E8FF;
+    border-left: 2px solid #02E8FF;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+  }
+  .bottom-left-two{
+    width: 15px;
+    height: 15px;
+    display: block;
+    border-bottom: 2px solid #02E8FF;
+    border-left: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -2px;;
+    left: -2px;;
+  }
+  .top-right-two{
+     width: 15px;
+    height: 15px;
+    display: block;
+    border-top: 2px solid #02E8FF;
+    border-right: 2px solid #02E8FF;
+    position: absolute;
+    top: -2px;;
+    right: -2px;;
+  }
+  .bottom-right-two {
+     width: 15px;
+    height: 15px;
+    display: block;
+   border-bottom: 2px solid #02E8FF;
+    border-right: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -2px;;
+    right: -2px;;
+  }
+  ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+
+</style>