|
|
@@ -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>
|
