Skip to content

W
web-project
Commit 8633d3f3 authored by moonby's avatar moonby
Browse files
Options

240730

parent e9f75490
Show whitespace changes
Inline Side-by-side
Showing with 221 additions and 74 deletions
src/views/HeatUserPage/HeatUserPage.vue
View file @ 8633d3f3
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
<el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }"> <el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }">
<div class="div-header"> <div class="div-header">
<el-row> <el-row>
<el-col :span="4">
<div class="div-button" style="display: flex;"> <div class="div-button" style="display: flex;">
<div class="div-autoRefresh"> <div class="div-autoRefresh">
<el-switch v-model="isHisData" class="switch-autoRefresh" active-text="历史数据" <el-switch v-model="isHisData" class="switch-autoRefresh" active-text="历史数据"
...@@ -14,45 +12,41 @@ ...@@ -14,45 +12,41 @@
</div> </div>
</el-col>
<el-col :span="7">
<div class="div-dropdown text-center"> <div class="div-dropdown text-center">
<span>小区名称&nbsp;:&nbsp;</span> <el-form-item label="小区名称：">
<el-cascader :options="DataInfo.tree" v-model="DataInfo.name" :props="props" collapse-tags <el-cascader :options="DataInfo.tree" v-model="DataInfo.name" :props="props" collapse-tags
clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 280px;" /> clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 280px;" />
</el-form-item>
</div> </div>
</el-col>
<el-col :span="11"> <el-col :span="10">
<div class="div-time-picker" v-show="isHisData"> <div class="div-time-picker" v-show="isHisData">
<el-form-item label="开始时间：" style="margin-right: 20px;"> <el-form-item label="开始时间：" style="margin-right: 20px;">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间" @change="changeStartTime" style="min-width: 180px;" :disabled-date="disabledDate" /> placeholder="选择开始时间" @change="changeStartTime" :disabled-date="disabledDate"/>
<!-- 日期时间格式 2024-1-1 00:00:00--> <!-- 日期时间格式 2024-1-1 00:00:00-->
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item label="结束时间："> <el-form-item label="结束时间：">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间" @change="changeEndTime" style="min-width: 180px;" :disabled-date="disabledDate" /> placeholder="选择结束时间" @change="changeEndTime" :disabled-date="disabledDate"/>
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="3">
<div class="div-button"> <div class="div-button">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="15"> <el-col :span="12">
<el-button class="el-button-button" type="primary" :span="6" @click="SearchData" <el-button class="el-button-button" type="primary" :span="6" @click="SearchData" >
icon="Search"> 搜索</el-button>
搜&nbsp;&nbsp;索</el-button>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="12">
</el-col> <el-button class="el-button-button" type="primary" :span="6" @click="ExportDataFile" >
<el-col :span="3"> 导出</el-button>
</el-col>
<el-col :span="3">
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -127,6 +121,7 @@ ...@@ -127,6 +121,7 @@
.div-time-picker { .div-time-picker {
padding-top: 6px; padding-top: 6px;
margin-left: 30px;
display: flex; display: flex;
} }
...@@ -162,6 +157,8 @@ ...@@ -162,6 +157,8 @@
.el-button-button { .el-button-button {
margin-top: 5px; margin-top: 5px;
margin-right: 5px;
margin-left: 60px;
width: 80px; width: 80px;
} }
...@@ -172,7 +169,7 @@ ...@@ -172,7 +169,7 @@
display: flex; display: flex;
margin-top: 5px; margin-top: 5px;
border-radius: var(--el-border-radius-base); border-radius: var(--el-border-radius-base);
padding: 6px 15px; padding: 6px 0px;
font-size: 14px; font-size: 14px;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
...@@ -191,9 +188,6 @@ ...@@ -191,9 +188,6 @@
} }
.div-dropdown { .div-dropdown {
//display: flex;
padding-top: 7px; padding-top: 7px;
height: 50px; height: 50px;
padding-left: 10px; padding-left: 10px;
...@@ -355,7 +349,7 @@ function disabledDate(thisdate){ ...@@ -355,7 +349,7 @@ function disabledDate(thisdate){
//数据控制，根据isHisData的值决定数据控制逻辑，false为实时数据，true为历史数据 //数据控制，根据isHisData的值决定数据控制逻辑，false为实时数据，true为历史数据
var dataUrl = isHisData.value ? '/api/tiger/TigerHeatUser/His' : '/api/tiger/TigerHeatUser/Real'; var dataUrl = isHisData.value ? '/api/tiger/TigerHeatUser/His' : '/api/tiger/TigerHeatUser/Real';
var exportUrl= isHisData.value ? '/api/tiger/TigerHeatUser/HisExport' : '/api/tiger/TigerHeatUser/RealExport';
function initTitle() { function initTitle() {
tableInfo.title.frozenList.length = 0; tableInfo.title.frozenList.length = 0;
pushFrozenList("gatherTime", "采集时间", true, 180, true) pushFrozenList("gatherTime", "采集时间", true, 180, true)
...@@ -419,6 +413,7 @@ async function changeData() { ...@@ -419,6 +413,7 @@ async function changeData() {
//实时数据初始化 //实时数据初始化
async function initReal() { async function initReal() {
dataUrl = '/api/tiger/TigerHeatUser/Real'; dataUrl = '/api/tiger/TigerHeatUser/Real';
exportUrl = '/api/tiger/TigerHeatUser/RealExport'
tableInfo.tableData.length = 0; tableInfo.tableData.length = 0;
tableInfo.realData.length = 0; tableInfo.realData.length = 0;
await getRealData(); await getRealData();
...@@ -427,8 +422,8 @@ async function initReal() { ...@@ -427,8 +422,8 @@ async function initReal() {
} }
//历史数据初始化 //历史数据初始化
async function initHis() { async function initHis() {
// dataUrl = '/api/tiger/TigerHeatUser/Real';
dataUrl = '/api/tiger/TigerHeatUser/His'; dataUrl = '/api/tiger/TigerHeatUser/His';
exportUrl = '/api/tiger/TigerHeatUser/HisExport';
tableInfo.tableData.length = 0; tableInfo.tableData.length = 0;
tableInfo.hisData.length = 0; tableInfo.hisData.length = 0;
await getHisData(); await getHisData();
...@@ -500,6 +495,57 @@ async function getHisDataByInfo(name, start, end, startPage, pagesCount, sort) { ...@@ -500,6 +495,57 @@ async function getHisDataByInfo(name, start, end, startPage, pagesCount, sort) {
total.value = tableInfo.tableData.length; total.value = tableInfo.tableData.length;
} }
function ExportHisDataByInfo(name, start, end, startPage, pagesCount, sort){
var fileName = getFileName("热用户历史数据");
http.post(exportUrl, { name: name, startTime: start, endTime: end, start: startPage, count: pagesCount, sort: sort }).then((content) => {
try{
const blob = new Blob([content]);
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}catch(error){
console.log(error);
}
});
}
function ExportRealData(){
var fileName = getFileName("热用户实时数据");
http.post(exportUrl).then((content) => {
try{
const blob = new Blob([content]);
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}catch(error){
console.log(error);
}
});
}
function setshowData() { function setshowData() {
if (isHisData.value) { if (isHisData.value) {
tableInfo.tableData = tableInfo.hisData; tableInfo.tableData = tableInfo.hisData;
...@@ -558,6 +604,25 @@ function SearchHisData() { ...@@ -558,6 +604,25 @@ function SearchHisData() {
getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort) getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort)
} }
//导出数据
function ExportDataFile(){
if (isHisData.value) {
ExportHisDataFile();
} else {
ExportRealDataFile();
}
}
//实时数据导出
function ExportRealDataFile() {
ExportRealData();
}
//历史数据导出
function ExportHisDataFile() {
ExportHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort)
}
//分页 //分页
//控制分页 //控制分页
function changePage() { function changePage() {
...@@ -585,7 +650,17 @@ function changeHisPage() { ...@@ -585,7 +650,17 @@ function changeHisPage() {
getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort) getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort)
} }
function getFileName(name){
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
return name+`_${year}${month}${day}${hours}${minutes}${seconds}.xls`;
}
//表格样式设置 //表格样式设置
function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) { function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
......
src/views/HeatUserPage/TapPage.vue
View file @ 8633d3f3
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
<el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }"> <el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }">
<div class="div-header"> <div class="div-header">
<el-row> <el-row>
<el-col :span="4">
<div class="div-button" style="display: flex;"> <div class="div-button" style="display: flex;">
<div class="div-autoRefresh"> <div class="div-autoRefresh">
<el-switch v-model="isHisData" class="switch-autoRefresh" active-text="历史数据" <el-switch v-model="isHisData" class="switch-autoRefresh" active-text="历史数据"
...@@ -14,46 +12,41 @@ ...@@ -14,46 +12,41 @@
</div> </div>
</el-col>
<el-col :span="7">
<div class="div-dropdown text-center"> <div class="div-dropdown text-center">
<el-form-item label="小区名称："> <el-form-item label="小区名称：">
<el-cascader :options="DataInfo.tree" v-model="DataInfo.name" :props="props" collapse-tags <el-cascader :options="DataInfo.tree" v-model="DataInfo.name" :props="props" collapse-tags
clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 280px;" /> clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 280px;" />
</el-form-item> </el-form-item>
</div> </div>
</el-col>
<el-col :span="11"> <el-col :span="10">
<div class="div-time-picker" v-show="isHisData"> <div class="div-time-picker" v-show="isHisData">
<el-form-item label="开始时间：" style="margin-right: 20px;"> <el-form-item label="开始时间：" style="margin-right: 20px;">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间" @change="changeStartTime" style="min-width: 180px;" :disabled-date="disabledDate"/> placeholder="选择开始时间" @change="changeStartTime" :disabled-date="disabledDate"/>
<!-- 日期时间格式 2024-1-1 00:00:00--> <!-- 日期时间格式 2024-1-1 00:00:00-->
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item label="结束时间："> <el-form-item label="结束时间：">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间" @change="changeEndTime" style="min-width: 180px;" :disabled-date="disabledDate"/> placeholder="选择结束时间" @change="changeEndTime" :disabled-date="disabledDate"/>
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="3">
<div class="div-button"> <div class="div-button">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="15"> <el-col :span="12">
<el-button class="el-button-button" type="primary" :span="6" @click="SearchData" >
<el-button class="el-button-button" type="primary" :span="6" @click="SearchData" icon="Search"> 搜索</el-button>
搜&nbsp;&nbsp;索</el-button>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="12">
</el-col> <el-button class="el-button-button" type="primary" :span="6" @click="ExportDataFile" >
<el-col :span="3"> 导出</el-button>
</el-col>
<el-col :span="3">
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -128,6 +121,7 @@ ...@@ -128,6 +121,7 @@
.div-time-picker { .div-time-picker {
padding-top: 6px; padding-top: 6px;
margin-left: 30px;
display: flex; display: flex;
} }
...@@ -163,6 +157,8 @@ ...@@ -163,6 +157,8 @@
.el-button-button { .el-button-button {
margin-top: 5px; margin-top: 5px;
margin-right: 5px;
margin-left: 60px;
width: 80px; width: 80px;
} }
...@@ -173,7 +169,7 @@ ...@@ -173,7 +169,7 @@
display: flex; display: flex;
margin-top: 5px; margin-top: 5px;
border-radius: var(--el-border-radius-base); border-radius: var(--el-border-radius-base);
padding: 6px 15px; padding: 6px 0px;
font-size: 14px; font-size: 14px;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
...@@ -225,18 +221,10 @@ ...@@ -225,18 +221,10 @@
<script setup> <script setup>
import { ref, reactive, onMounted, onUnmounted, provide, computed, handleError } from 'vue' import { ref, reactive, onMounted, onUnmounted, provide, computed, handleError } from 'vue'
import DataForm from '../../components/DataForm.vue';
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import http from '../../api/http' import http from '../../api/http'
import store from "../../store/index"; import store from "../../store/index";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {
Search,
ArrowLeft,
ArrowRight,
Warning
} from '@element-plus/icons-vue'
import CfgSupply from '../../components/CfgSupply.vue';
// import { da } from 'element-plus/es/locale'; // import { da } from 'element-plus/es/locale';
// import { start } from 'repl'; // import { start } from 'repl';
// import { ca } from 'element-plus/es/locale'; // import { ca } from 'element-plus/es/locale';
...@@ -346,11 +334,13 @@ function twoDigits(value) { ...@@ -346,11 +334,13 @@ function twoDigits(value) {
function disabledDate(thisdate){ function disabledDate(thisdate){
var startDate=new Date(2023,7,1); var startDate=new Date(2023,7,1);
var endDate=new Date(); var endDate=new Date();
return thisdate > endDate || thisdate < startDate; return thisdate > endDate || thisdate < startDate;
} }
//数据控制，根据isHisData的值决定数据控制逻辑，false为实时数据，true为历史数据 //数据控制，根据isHisData的值决定数据控制逻辑，false为实时数据，true为历史数据
var dataUrl = isHisData.value ? '/api/tiger/TigerTapData/His' : '/api/tiger/TigerTapData/Real'; var dataUrl = isHisData.value ? '/api/tiger/TigerTapData/His' : '/api/tiger/TigerTapData/Real';
var exportUrl= isHisData.value ? '/api/tiger/TigerTapData/HisExport' : '/api/tiger/TigerTapData/RealExport';
function initTitle() { function initTitle() {
tableInfo.title.frozenList.length = 0; tableInfo.title.frozenList.length = 0;
...@@ -417,14 +407,15 @@ async function changeData() { ...@@ -417,14 +407,15 @@ async function changeData() {
//实时数据初始化 //实时数据初始化
async function initReal() { async function initReal() {
dataUrl = '/api/tiger/TigerTapData/Real'; dataUrl = '/api/tiger/TigerTapData/Real';
exportUrl = '/api/tiger/TigerTapData/RealExport'
tableInfo.tableData.length = 0; tableInfo.tableData.length = 0;
tableInfo.realData.length = 0; tableInfo.realData.length = 0;
await getRealData(); await getRealData();
} }
//历史数据初始化 //历史数据初始化
async function initHis() { async function initHis() {
// dataUrl = '/api/tiger/TigerHeatUser/Real';
dataUrl = '/api/tiger/TigerTapData/His'; dataUrl = '/api/tiger/TigerTapData/His';
exportUrl = '/api/tiger/TigerTapData/HisExport';
tableInfo.tableData.length = 0; tableInfo.tableData.length = 0;
tableInfo.hisData.length = 0; tableInfo.hisData.length = 0;
await getHisData(); await getHisData();
...@@ -499,6 +490,57 @@ async function getHisDataByInfo(name, start, end, startPage, pagesCount, sort) { ...@@ -499,6 +490,57 @@ async function getHisDataByInfo(name, start, end, startPage, pagesCount, sort) {
total.value = tableInfo.tableData.length; total.value = tableInfo.tableData.length;
} }
function ExportHisDataByInfo(name, start, end, startPage, pagesCount, sort){
var fileName = getFileName("阀门历史数据");
http.post(exportUrl, { name: name, startTime: start, endTime: end, start: startPage, count: pagesCount, sort: sort }).then((content) => {
try{
const blob = new Blob([content]);
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}catch(error){
console.log(error);
}
});
}
function ExportRealData(){
var fileName = getFileName("阀门实时数据");
http.post(exportUrl).then((content) => {
try{
const blob = new Blob([content]);
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}catch(error){
console.log(error);
}
});
}
function setshowData() { function setshowData() {
if (isHisData.value) { if (isHisData.value) {
tableInfo.tableData = tableInfo.hisData; tableInfo.tableData = tableInfo.hisData;
...@@ -554,6 +596,25 @@ function SearchHisData() { ...@@ -554,6 +596,25 @@ function SearchHisData() {
getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort) getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort)
} }
//导出数据
function ExportDataFile(){
if (isHisData.value) {
ExportHisDataFile();
} else {
ExportRealDataFile();
}
}
//实时数据导出
function ExportRealDataFile() {
ExportRealData();
}
//历史数据导出
function ExportHisDataFile() {
ExportHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort)
}
//分页 //分页
//控制分页 //控制分页
function changePage() { function changePage() {
...@@ -581,6 +642,17 @@ function changeHisPage() { ...@@ -581,6 +642,17 @@ function changeHisPage() {
getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort) getHisDataByInfo(DataInfo.name, startTime.value, endTime.value, currentPage.value - 1, pageSize.value, DataInfo.sort)
} }
function getFileName(name){
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
return name+`_${year}${month}${day}${hours}${minutes}${seconds}.xls`;
}
//表格样式设置 //表格样式设置
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment