commit
5daa9451f0
@ -1,24 +1,289 @@ |
|||||||
<template> |
<template> |
||||||
<div class="app-container home"> |
<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> |
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script setup name="Index"> |
<script setup name="Index"> |
||||||
|
import {Histogram} from '@element-plus/icons-vue' |
||||||
import {ref,reactive} from "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> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<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> |
</style> |
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue