408249787 2 jaren geleden
bovenliggende
commit
ba0a07d580

+ 8 - 0
src/router/generator-platform-routers.js

@@ -440,6 +440,14 @@ export const constantRouterMap = [
     path: '/TransformerDetailBigScreen',
     component: () => import('@/views/statisticView/TransformerDetail')
   },
+  {
+    path: '/DayStatistics',
+    component: () => import('@/views/statisticView/DayStatistics')
+  },
+  {
+    path: '/MonthStatistics',
+    component: () => import('@/views/statisticView/MonthStatistics')
+  },
   {
     path: '/StoreBigScreen',
     component: () => import('@/views/statisticView/9')

+ 293 - 0
src/views/statisticView/DayStatistics.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="view-container">
+    <div class="title"><span>时代思康用电量日报</span></div>
+    <div class="content">
+      <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>
+            <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>
+            {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
+          </div>
+        </div>
+        <div class="body">
+          <table>
+            <thead>
+              <tr >
+                <th rowspan="2" class="list-header" style="color:#fff">时间</th>
+                <th colspan="2" class="list-header" style="color:#fff" v-for="i in 6" :key="i"> 1G0{{ i }}时代思康{{ i }}回</th>
+              </tr>
+              <tr>
+                <template v-for="i in 6 ">
+                  <th class="list-header" style="color:#fff">正向有功(kwh)</th>
+                  <th class="list-header" style="color:#fff">正向无功(kwh)</th>
+                </template>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="i in 24" :key="i">
+                <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>
+                <template v-for="i in 6 ">
+                  <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>
+                </template>
+              </tr>
+              <tr>
+                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">日用电总</td>
+                <template v-for="i in 6 ">
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00*24 }}</td>
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;"></td>
+                </template>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </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: center;
+  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: 100%;
+   height:950px;
+   position: relative;
+   border: 2px solid #045693;
+   padding:0 30px;
+   margin-top:28px;
+   .history-title{
+    display: flex;
+    justify-content: space-between;
+    font-size: 30px;
+    font-weight: bold;
+    margin:18px 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%;
+        margin: 0 auto;
+        border: 1px solid #01D4F9;
+        border-collapse: collapse;
+        th,
+    td {
+        border: 1px solid #01D4F9;
+    }
+   }
+   .list-header{
+     padding: 0;
+      width: 180px;
+height: 30px;
+line-height:30px;
+font-size: 16px;
+font-weight: bold;
+margin: 10px;
+
+font-family: Microsoft YaHei;
+background: rgba(2, 205, 255, 0);
+box-shadow: 0px 0px 40px 0px rgba(0, 122, 162, 0.8) inset;
+text-align: 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>

+ 300 - 0
src/views/statisticView/MonthStatistics.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="view-container">
+    <div class="title"><span>时代思康用电量月报</span></div>
+    <div class="content">
+      <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>
+            <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>
+            {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
+          </div>
+        </div>
+        <div class="body">
+          <table>
+            <thead>
+              <tr >
+                <th rowspan="2" class="list-header" style="color:#fff">时间</th>
+                <th colspan="2" class="list-header" style="color:#fff" v-for="i in 6" :key="i"> 1G0{{ i }}时代思康{{ i }}回</th>
+              </tr>
+              <tr>
+                <template v-for="i in 6 ">
+                  <th class="list-header" style="color:#fff">正向有功(kwh)</th>
+                  <th class="list-header" style="color:#fff">正向无功(kwh)</th>
+                </template>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="i in 30" :key="i">
+                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + '日' }}</td>
+                <template v-for="i in 6 ">
+                  <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>
+                </template>
+              </tr>
+              <tr>
+                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">月用电总</td>
+                <template v-for="i in 6 ">
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00*24 }}</td>
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;"></td>
+                </template>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </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: center;
+  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: 100%;
+   height:950px;
+   position: relative;
+   border: 2px solid #045693;
+   padding:0 30px;
+   margin-top:28px;
+   .history-title{
+    display: flex;
+    justify-content: space-between;
+    font-size: 30px;
+    font-weight: bold;
+    margin:18px 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;
+      }
+    }
+   }
+   .body{
+      height: 830px;
+  overflow: hidden;
+  overflow-y: auto;
+  // padding-top: 60px;
+    }
+   table{
+    width: 100%;
+        margin: 0 auto;
+        border: 1px solid #01D4F9;
+        border-collapse: collapse;
+        // thead{
+        //   width: 1782px;
+        //   position: absolute;
+        //   top:95px;
+        //   left:30px;
+        // }
+        th,
+        td {
+          border: 1px solid #01D4F9;
+        }
+   }
+   .list-header{
+     padding: 0;
+      width: 180px;
+height: 30px;
+line-height:30px;
+font-size: 16px;
+font-weight: bold;
+margin: 10px;
+
+font-family: Microsoft YaHei;
+background: rgba(2, 205, 255, 0);
+box-shadow: 0px 0px 40px 0px rgba(0, 122, 162, 0.8) inset;
+text-align: 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>

+ 36 - 3
src/views/statisticView/SwitchingRoom.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="view-container">
     <div class="date">
-      <span>{{date}}</span>
+      <span>{{ date }}</span>
+    </div>
+    <div class="dateStatistics">
+      <div @click="handleDayView">日统计</div>
+      <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]">
@@ -90,6 +93,12 @@ export default {
   methods: {
     handleView () {
       this.$router.push('/TransformerDetailBigScreen')
+    },
+    handleDayView () {
+      this.$router.push('/DayStatistics')
+    },
+    handleMonthView () {
+      this.$router.push('/MonthStatistics')
     }
   }
 }
@@ -113,6 +122,27 @@ padding: 80px 67px;
   z-index: -1;
 }
 }
+.dateStatistics{
+  width: 250px;
+  color: #FFFFFF;
+  font-size: 20px;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top:58px;
+  right:96px;
+  div {
+    width: 173px;
+    height: 58px;
+    line-height: 50px;
+    text-align: center;
+    border: 2px solid #0089D8;
+    border-radius: 9px;
+    &:hover{
+      cursor: pointer;
+    }
+  }
+}
 .date{
   width: 250px;
   color: #FFFFFF;
@@ -138,6 +168,9 @@ padding: 80px 67px;
     text-align: center;
     border: 2px solid #0089D8;
     border-radius: 9px;
+    &:hover{
+      cursor: pointer;
+    }
   }
   .address-opt {
     box-shadow: 0px 0px 40px 0px rgba(0, 137, 216, 0.8) inset;