commit
5daa9451f0
@ -1,24 +1,289 @@ |
||||
<template> |
||||
<div class="app-container home"> |
||||
<div class="btnBox"> |
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||
<el-tab-pane label="同比分析" name="first"> |
||||
<el-form :inline="true" class="demo-form-inline"> |
||||
<el-form-item label="日期："><el-date-picker v-model="dateValue1" type="date" placeholder="请选择日期" size="default"/></el-form-item> |
||||
<el-form-item><el-button type="primary" @click="lastDay"><el-icon><ArrowLeft /></el-icon>上一日</el-button></el-form-item> |
||||
<el-form-item><el-button type="primary" @click="nextDay">下一日<el-icon><ArrowRight /></el-icon></el-button></el-form-item> |
||||
<el-form-item><el-button type="primary" icon="Search" @click="handleQuery1">查询</el-button></el-form-item> |
||||
</el-form> |
||||
<div class="chartBox"> |
||||
<div id="chart"></div> |
||||
</div> |
||||
<div class="tableBox1"> |
||||
<el-table :data="tbfxDataTable" height="400px"> |
||||
<el-table-column label="月份" align="center" prop="month" width="100"/> |
||||
<el-table-column label="本期" align="center" prop="currentPeriod"/> |
||||
<el-table-column label="同期" align="center" prop="theSameTerm"/> |
||||
<el-table-column label="同比(%)" align="center" prop="yearOnYear"/> |
||||
<el-table-column label="累计同比(%)" align="center" prop="totalYearOnYear"/> |
||||
</el-table> |
||||
<el-pagination |
||||
v-model:current-page="tbfxCurrentPage" |
||||
v-model:page-size="tbfxPageSize" |
||||
:page-sizes="[5, 10, 20, 50]" |
||||
:small="tbfxSmall" |
||||
:disabled="tbfxDisabled" |
||||
:background="tbfxBackground" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="tbfxDataTable.length" |
||||
@size-change="tbfxHandleSizeChange" |
||||
@current-change="tbfxHandleCurrentChange"/> |
||||
</div> |
||||
</el-tab-pane> |
||||
|
||||
|
||||
|
||||
|
||||
<el-tab-pane label="环比分析" name="second"> |
||||
<!-- @submit.native.prevent阻止默认提交事件--> |
||||
<el-form :inline="true" class="demo-form-inline" @submit.native.prevent> |
||||
<el-form-item class="mr0"><button class="myBtn btn1" :class="{active : activeIndex === 0}" @click="handleDaily">按日</button></el-form-item> |
||||
<el-form-item ><button class="myBtn btn2" :class="{active : activeIndex === 1}" @click="handleMonthly">按月</button></el-form-item> |
||||
<el-form-item label="日期："><el-date-picker v-model="dateValue2" :type="dateType" :format="format" :value-format="valueFormat" placeholder="请选择日期" size="default"/></el-form-item> |
||||
<el-form-item><el-button type="primary" icon="Search" @click="handleQuery2">查询</el-button></el-form-item> |
||||
</el-form> |
||||
<div class="tableBox2"> |
||||
<el-table :data="hbfxDataTable"> |
||||
<el-table-column label="用能设备" align="center" prop="type"/> |
||||
<el-table-column :label="label1" align="center" :prop="prop1"/> |
||||
<el-table-column :label="label2" align="center" :prop="prop2"/> |
||||
<el-table-column label="增加值" align="center" prop="addValue"/> |
||||
<el-table-column label="环比(%)" align="center" prop="relative"/> |
||||
<el-table-column label="操作" align="center"> |
||||
<template v-slot="scope"> |
||||
<el-button type="primary" size="small" :icon="Histogram" @click="handleChart">图表</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-pagination |
||||
v-model:current-page="hbfxCurrentPage" |
||||
v-model:page-size="hbfxPageSize" |
||||
:page-sizes="[5, 10, 20, 50]" |
||||
:small="hbfxSmall" |
||||
:disabled="hbfxDisabled" |
||||
:background="hbfxBackground" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="hbfxDataTable.length" |
||||
@size-change="hbfxHandleSizeChange" |
||||
@current-change="hbfxHandleCurrentChange"/> |
||||
</div> |
||||
<!-- 生成图表弹出窗 --> |
||||
<el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body> |
||||
<div class="chartBox"> |
||||
<div id="chart"></div> |
||||
</div> |
||||
</el-dialog> |
||||
</el-tab-pane> |
||||
|
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Index"> |
||||
import {Histogram} from '@element-plus/icons-vue' |
||||
import {ref,reactive} from "vue"; |
||||
|
||||
|
||||
/** 切换按钮操作*/ |
||||
const activeName = ref('first') |
||||
|
||||
/** ----------同比分析----------*/ |
||||
/** 过滤查询*/ |
||||
const dateValue1 = ref(new Date()) |
||||
function lastDay(){ |
||||
const current = dateValue1.value; |
||||
const previous = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1); |
||||
dateValue1.value = previous; |
||||
} |
||||
function nextDay(){ |
||||
const current = dateValue1.value; |
||||
const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1); |
||||
dateValue1.value = next; |
||||
} |
||||
function handleQuery1(){} |
||||
|
||||
/** 数据表格处理*/ |
||||
//内容 |
||||
const tbfxDataTable = reactive([ |
||||
{ |
||||
month:'01月', |
||||
currentPeriod: '1265', |
||||
theSameTerm:'3254', |
||||
yearOnYear:'30', |
||||
totalYearOnYear:'32', |
||||
} |
||||
]) |
||||
const tbfxCurrentPage = ref(1) |
||||
const tbfxPageSize = ref(5) |
||||
const tbfxSmall = ref(false) |
||||
const tbfxBackground = ref(false) |
||||
const tbfxDisabled = ref(false) |
||||
const tbfxHandleSizeChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
const tbfxHandleCurrentChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
|
||||
|
||||
/** ----------环比分析----------*/ |
||||
/** 过滤查询*/ |
||||
const activeIndex = ref(0) |
||||
const dateValue2 = ref() |
||||
const dateType = ref('date') |
||||
const format = ref('YYYY-MM-DD') |
||||
const valueFormat = ref('YYYY-MM-DD') |
||||
function handleDaily(){ |
||||
activeIndex.value = 0; |
||||
prop1.value = 'toDay' |
||||
label1.value = '当日用电/kWh' |
||||
prop2.value = 'lastDay' |
||||
label2.value = '上日用电/kWh'; |
||||
dateType.value = 'date' |
||||
format.value = 'YYYY-MM-DD' |
||||
valueFormat.value = 'YYYY-MM-DD' |
||||
} |
||||
function handleMonthly(){ |
||||
activeIndex.value = 1; |
||||
prop1.value = 'toMonth' |
||||
label1.value = '当月用电/kWh' |
||||
prop2.value = 'lastMonth' |
||||
label2.value = '上月用电/kWh'; |
||||
dateType.value = 'month' |
||||
format.value = 'YYYY-MM' |
||||
valueFormat.value = 'YYYY-MM' |
||||
} |
||||
function handleQuery2(){} |
||||
|
||||
/** 数据表格处理*/ |
||||
//内容 |
||||
const hbfxDataTable = reactive([ |
||||
{month:'01月', currentPeriod: '1265', theSameTerm:'3254', yearOnYear:'30', totalYearOnYear:'32'} |
||||
]) |
||||
const prop1 = ref('toDay') |
||||
const label1 = ref('当日用电/kWh') |
||||
const prop2 = ref('lastDay') |
||||
const label2 = ref('上日用电/kWh') |
||||
const hbfxCurrentPage = ref(1) |
||||
const hbfxPageSize = ref(5) |
||||
const hbfxSmall = ref(false) |
||||
const hbfxBackground = ref(false) |
||||
const hbfxDisabled = ref(false) |
||||
const hbfxHandleSizeChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
const hbfxHandleCurrentChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
|
||||
/** 生成图表按鈕操作*/ |
||||
const title = ref() |
||||
const open = ref(false) |
||||
function handleChart(){ |
||||
open.value = true; |
||||
console.log('图表按钮') |
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.home{ |
||||
width: 100%; |
||||
height: calc(100vh - 84px); |
||||
overflow: auto; |
||||
} |
||||
.chartBox{ |
||||
width: 100%; |
||||
height: 300px; |
||||
border: 1px solid #fff; |
||||
margin-bottom: 18px; |
||||
overflow: hidden; |
||||
#chart{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.tableBox1{ |
||||
width: 100%; |
||||
height: 402px; |
||||
overflow: hidden; |
||||
} |
||||
.tableBox2{ |
||||
width: 100%; |
||||
height: 717px; |
||||
background-color: #2F3D8A; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.mr0{ |
||||
margin-right: 0px !important; |
||||
} |
||||
.myBtn{ |
||||
padding: 7px 25px; |
||||
background-color: #1B2965; |
||||
border: 1px solid #409EFF; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
} |
||||
.btn1{ |
||||
border-top-left-radius: 2px; |
||||
border-bottom-left-radius: 2px; |
||||
} |
||||
.btn2{ |
||||
margin-left: -1px; |
||||
border-top-right-radius: 2px; |
||||
border-bottom-right-radius: 2px; |
||||
} |
||||
.active{ |
||||
background-color: #409EFF !important; |
||||
color: #fff !important; |
||||
} |
||||
|
||||
|
||||
|
||||
::v-deep .el-tabs__item{ |
||||
color: #fff; |
||||
} |
||||
::v-deep .el-tabs__item.is-active{ |
||||
color: #409EFF; |
||||
} |
||||
::v-deep .el-tabs__nav-wrap::after{ |
||||
background-color: #313d70; |
||||
} |
||||
|
||||
|
||||
::v-deep .el-button{ |
||||
border-radius: 2px; |
||||
} |
||||
::v-deep .el-pagination{ |
||||
position: absolute; |
||||
bottom: 10px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
::v-deep .el-pagination__total{ |
||||
color: #f3ffff; |
||||
} |
||||
::v-deep .el-pagination__jump{ |
||||
color: #f3ffff; |
||||
} |
||||
::v-deep .el-pager{ |
||||
margin: 0 5px; |
||||
} |
||||
::v-deep .el-table .el-table__body-wrapper{ |
||||
background-color: #2F3D8A; |
||||
} |
||||
::v-deep .el-form--inline .el-form-item{ |
||||
margin-right: 12px; |
||||
} |
||||
::v-deep .el-input__inner{ |
||||
color: #f3ffff; |
||||
} |
||||
</style> |
||||
|
||||
|
||||
Loading…
Reference in new issue