From c43cd8cfdda6fc35ca4ee5ee9bb748e5152ef42f Mon Sep 17 00:00:00 2001
From: wj <347312259@qq.com>
Date: Fri, 12 May 2023 11:24:21 +0800
Subject: [PATCH] 11

---
 psdc-ui/src/views/analyse/nhfx/index.vue | 176 ++++++++++++++++++++---
 psdc-ui/src/views/analyse/nhtj/index.vue |   2 +-
 2 files changed, 154 insertions(+), 24 deletions(-)

diff --git a/psdc-ui/src/views/analyse/nhfx/index.vue b/psdc-ui/src/views/analyse/nhfx/index.vue
index b1f0ba2..4115d83 100644
--- a/psdc-ui/src/views/analyse/nhfx/index.vue
+++ b/psdc-ui/src/views/analyse/nhfx/index.vue
@@ -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;
+}
 
 
 
diff --git a/psdc-ui/src/views/analyse/nhtj/index.vue b/psdc-ui/src/views/analyse/nhtj/index.vue
index 28a377e..1141e4d 100644
--- a/psdc-ui/src/views/analyse/nhtj/index.vue
+++ b/psdc-ui/src/views/analyse/nhtj/index.vue
@@ -229,7 +229,7 @@ function handleMonth() {
 };
 
 
-/** 生成表格按鈕操作*/
+/** 生成图表按鈕操作*/
 const title = ref()
 const open = ref(false)
 function handleChart(){