完善大屏

src/router/generator-platform-routers.js

@@ -426,6 +426,10 @@ export const constantRouterMap = [
     path: '/SwitchingRoomBigScreen',
     component: () => import('@/views/statisticView/SwitchingRoom')
   },
+  {
+    path: '/TransformerDetailBigScreen',
+    component: () => import('@/views/statisticView/TransformerDetail')
+  },
   {
     path: '/StoreBigScreen',
     component: () => import('@/views/statisticView/9')

src/views/statisticView/SwitchingRoom.vue

@@ -11,7 +11,7 @@
     </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">
+        <a-col :span="6" v-for="item in 8" :key="item" @click="handleView">
           <div class="sb-info">
             <div class="sb-info-title">
               <span>2G04</span>
@@ -81,7 +81,16 @@
 
 <script>
 export default {
+  data () {
+    return {
 
+    }
+  },
+  methods: {
+    handleView () {
+      this.$router.push('/TransformerDetailBigScreen')
+    }
+  }
 }
 </script>
 <style lang="less" scoped>

src/views/statisticView/TransformerDetail.vue

@@ -0,0 +1,304 @@
+<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="i in 8" :key="i">
+              <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;">
+                  38A
+                </div>
+                <div>总电压</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">编号</th>
+              <th class="list-header" style="color:#fff">名称</th>
+              <th class="list-header" style="color:#fff">有功电度</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(list,i) in 31" :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;">{{ list }}</td>
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ list }}</td>
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ list }}</td>
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ list }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      time: '',
+      dateVisual: true
+    }
+  },
+  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>