能耗统计

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

@@ -3,9 +3,15 @@
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
       <el-tab-pane label="同比分析" name="同比分析">
         <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 label="耗能设备" prop="week">
-            <el-form-item><el-button type="primary" @click="lastDay"><el-icon><ArrowLeft /></el-icon>上一日</el-button></el-form-item>
+            <el-select v-model="selectDevice" placeholder="请选择" @change="handleDevChange" style="width: 240px">
-            <el-form-item><el-button type="primary" @click="nextDay">下一日<el-icon><ArrowRight /></el-icon></el-button></el-form-item>
+              <el-option label="所有" value="0" />
+              <el-option v-for="item in deviceName" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
+            </el-select>
+          </el-form-item>
+            <el-form-item label="日期："><el-date-picker v-model="dateValue1" format="YYYY" value-format="YYYY" type="year" placeholder="请选择日期" size="default"/></el-form-item>
+            <el-form-item><el-button type="primary" @click="lastYear"><el-icon><ArrowLeft /></el-icon>上一年</el-button></el-form-item>
+            <el-form-item><el-button type="primary" @click="nextYear">下一年<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">
@@ -70,10 +76,11 @@
               @current-change="hbfxHandleCurrentChange"/>
         </div>
         <!-- 生成图表弹出窗 -->
-        <el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body>
+        <el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body :close-on-click-modal="false" :show-close="false">
           <div class="chartBox">
             <div id="chart"></div>
           </div>
+          <el-button class="floatRight" @click=close>关闭</el-button>
         </el-dialog>
       </el-tab-pane>
 
@@ -85,11 +92,13 @@
 import {Histogram} from '@element-plus/icons-vue'
 import {ref,reactive,onMounted,nextTick } from "vue";
 import { getHuanbiFx } from "@/api/analyse/nhfx/nhfx"
+import { getDevice } from "@/api/control/manual"
 
 onMounted(async () => {
   await nextTick();
   // 在这里进行el-tabs的初始化操作
   formattedDateFun()
+  getDeviceList()
 })
 
 /** 格式化日期*/
@@ -99,13 +108,12 @@ function formattedDateFun(){
   year = date.getFullYear()
   month = (date.getMonth()+1).toString().padStart(2, '0');
   day = date.getDate().toString().padStart(2, '0');
+  dateValue2.value = `${year}-${month}-${day}`
   // let hours = date.getHours()
   // let minutes = date.getMinutes()
   // let seconds = date.getSeconds()
-  dateValue1.value = `${year}-${month}-${day}`
-  dateValue2.value = `${year}-${month}-${day}`
   // timer.value = `${hours}:${minutes}:${seconds}`
-  console.log(dateValue2.value)
+  // console.log(dateValue2.value)
   // console.log(timer.value)
 }
 
@@ -114,17 +122,31 @@ const activeName = ref('同比分析')
 
 /** ----------同比分析----------*/
 /** 过滤查询*/
-const dateValue1 = ref(new Date())
+//渲染设备列表
-function lastDay(){
+const selectDevice = ref()
-  const current = dateValue1.value;
+const deviceName = ref([])
-  const previous = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+function getDeviceList(){
-  dateValue1.value = previous;
+  getDevice().then((res)=>{
+    deviceName.value = res.data
+    console.log(deviceName.value)
+  })
 }
-function nextDay(){
+
-  const current = dateValue1.value;
+//切换年份处理
-  const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+const dateValue1 = ref(new Date().getFullYear().toString());
-  dateValue1.value = next;
+//上一年
+function lastYear(){
+  const year = parseInt(dateValue1.value);
+  dateValue1.value = (year - 1).toString();
+  console.log('上一年',dateValue1.value)
+}
+//下一年
+function nextYear(){
+  const year = parseInt(dateValue1.value);
+  dateValue1.value = (year + 1).toString();
+  console.log('下一年',dateValue1.value)
 }
+//查询
 function handleQuery1(){}
 
 /** 数据表格处理*/
@@ -238,8 +260,13 @@ const title = ref()
 const open = ref(false)
 function handleChart(){
   open.value = true;
-  console.log('图表按钮')
+
+
 };
+//关闭弹框按钮
+function close(){
+  open.value = false;
+}
 
 
 
@@ -300,7 +327,9 @@ function handleChart(){
   background-color: #409EFF !important;
   color: #fff !important;
 }
-
+.floatRight{
+  margin-left: 90%;
+}
 
 
 ::v-deep .el-tabs__item{

psdc-ui/src/views/analyse/nhtj/index.vue

@@ -11,19 +11,11 @@
           <el-form-item label="耗能设备" prop="week">
             <el-select v-model="filterForm.dev" placeholder="请选择" @change="handleDevChange" style="width: 240px">
               <el-option label="所有" value="0" />
-              <el-option label="电磁锅炉" value="1" />
+              <el-option v-for="item in deviceName" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
-              <el-option label="蓄热锅炉" value="2" />
-              <el-option label="风机盘管" value="3" />
-              <el-option label="空气源热泵" value="4" />
-              <el-option label="发热电缆" value="5" />
-              <el-option label="水泵" value="6" />
-              <el-option label="沙盘" value="7" />
             </el-select>
           </el-form-item>
           <el-form-item label="时段" style="width: 308px;">
-            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange"
+            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-                            range-separator="-" start-placeholder="开始日期"
-                            end-placeholder="结束日期"></el-date-picker>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -81,12 +73,14 @@
 import {Delete,Histogram} from '@element-plus/icons-vue'
 import {ref, reactive, onMounted, watch,onBeforeUnmount} from "vue";
 import {getTable} from '@/api/analyse/nhtj/nhtj'
+import { getDevice } from "@/api/control/manual"
 import * as echarts from "echarts";
 
 /** 页面加载时*/
 onMounted(()=>{
   formattedDateFun();
   getTableFun();
+  getDeviceList()
 })
 
 
@@ -109,6 +103,14 @@ function formattedDateFun(){
 
 
 /** 筛选处理 */
+//渲染设备列表
+const deviceName = ref([])
+function getDeviceList(){
+  getDevice().then((res)=>{
+    deviceName.value = res.data
+  })
+}
+
 const dateRange = ref([]);
 const startDate = ref()
 const endDate = ref()