scmy/psdc-ui/src/views/analyse/nhfx/index.vue

<template>
  <div class="app-container home">
    <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>