|
|
|
|
@ -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><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 label="耗能设备" prop="week"> |
|
|
|
|
<el-select v-model="selectDevice" placeholder="请选择" @change="handleDevChange" style="width: 240px"> |
|
|
|
|
<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 current = dateValue1.value; |
|
|
|
|
const previous = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1); |
|
|
|
|
dateValue1.value = previous; |
|
|
|
|
//渲染设备列表 |
|
|
|
|
const selectDevice = ref() |
|
|
|
|
const deviceName = ref([]) |
|
|
|
|
function getDeviceList(){ |
|
|
|
|
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); |
|
|
|
|
dateValue1.value = next; |
|
|
|
|
|
|
|
|
|
//切换年份处理 |
|
|
|
|
const dateValue1 = ref(new Date().getFullYear().toString()); |
|
|
|
|
//上一年 |
|
|
|
|
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{ |
|
|
|
|
|
