hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11

Browse Source
master
wj 2 years ago
parent c9f3889b8b
commit c43cd8cfdd
2 changed files with 154 additions and 24 deletions
  1. 176
      psdc-ui/src/views/analyse/nhfx/index.vue
  2. 2
      psdc-ui/src/views/analyse/nhtj/index.vue

176
psdc-ui/src/views/analyse/nhfx/index.vue
Unescape View File

@ -3,15 +3,15 @@
<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="dateValue" type="date" placeholder="请选择日期" size="default"/></el-form-item>
<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="handleQuery">查询</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="tableBox">
<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"/>
@ -23,9 +23,9 @@
v-model:current-page="tbfxCurrentPage"
v-model:page-size="tbfxPageSize"
:page-sizes="[5, 10, 20, 50]"
:small="small"
:disabled="disabled"
:background="background"
:small="tbfxSmall"
:disabled="tbfxDisabled"
:background="tbfxBackground"
layout="total, sizes, prev, pager, next, jumper"
:total="tbfxDataTable.length"
@size-change="tbfxHandleSizeChange"
@ -37,30 +37,72 @@
<el-tab-pane label="环比分析" name="second">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="日期："><el-date-picker v-model="dateValue" 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="handleQuery">查询</el-button></el-form-item>
<!-- @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 dateValue = ref()
function lastDay(){}
function nextDay(){}
function handleQuery(){}
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(){}
/** 数据表格处理*/
//内容
@ -75,9 +117,9 @@ const tbfxDataTable = reactive([
])
const tbfxCurrentPage = ref(1)
const tbfxPageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const tbfxSmall = ref(false)
const tbfxBackground = ref(false)
const tbfxDisabled = ref(false)
const tbfxHandleSizeChange = (val) => {
console.log(`${val}`)
}
@ -86,6 +128,65 @@ const tbfxHandleCurrentChange = (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('图表按钮')
};
@ -95,7 +196,7 @@ const tbfxHandleCurrentChange = (val) => {
.home{
width: 100%;
height: calc(100vh - 84px);
border: 1px solid red;
overflow: auto;
}
.chartBox{
width: 100%;
@ -108,12 +209,41 @@ const tbfxHandleCurrentChange = (val) => {
height: 100%;
}
}
.tableBox{
.tableBox1{
width: 100%;
height: 400px;
border: 1px solid #fff;
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;
}

2
psdc-ui/src/views/analyse/nhtj/index.vue
Unescape View File

@ -229,7 +229,7 @@ function handleMonth() {
};
/** 生成表格按鈕操作*/
/** 生成图表按鈕操作*/
const title = ref()
const open = ref(false)
function handleChart(){

Write Preview
Loading…
Cancel
Save