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 @@
<el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }">
<div class="div-header">
<el-row>
<el-col :span="4">
<div class="div-button" style="display: flex;">
<div class="div-autoRefresh">
<el-switch v-model="isHisData" class="switch-autoRefresh" active-text="历史数据"
......@@ -14,45 +12,41 @@
</div>
</el-col>
<el-col :span="7">
<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
clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 280px;" />
</el-form-item>
</div>
</el-col>
<el-col :span="11">
<el-col :span="10">
<div class="div-time-picker" v-show="isHisData">
<el-form-item label="开始时间：" style="margin-right: 20px;">
<el-config-provider :locale="zhCn">
<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-->
</el-config-provider>
</el-form-item>
<el-form-item label="结束时间：">
<el-config-provider :locale="zhCn">
<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-form-item>
</div>
</el-col>
<el-col :span="2">
<el-col :span="3">
<div class="div-button">
<el-row :gutter="10">
<el-col :span="15">
<el-button class="el-button-button" type="primary" :span="6" @click="SearchData"
icon="Search">
搜&nbsp;&nbsp;索</el-button>
<el-col :span="12">
<el-button class="el-button-button" type="primary" :span="6" @click="SearchData" >
搜索</el-button>
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="3">
<el-col :span="12">
<el-button class="el-button-button" type="primary" :span="6" @click="ExportDataFile" >
导出</el-button>
</el-col>
</el-row>
</div>
......@@ -127,6 +121,7 @@
.div-time-picker {
padding-top: 6px;
margin-left: 30px;
display: flex;
}
......@@ -162,6 +157,8 @@
.el-button-button {
margin-top: 5px;
margin-right: 5px;
margin-left: 60px;
width: 80px;
}
......@@ -172,7 +169,7 @@
display: flex;
margin-top: 5px;
border-radius: var(--el-border-radius-base);
padding: 6px 15px;
padding: 6px 0px;
font-size: 14px;
height: 20px;
overflow: hidden;
......@@ -191,9 +188,6 @@
}
.div-dropdown {
//display: flex;
padding-top: 7px;
height: 50px;
padding-left: 10px;
......@@ -355,7 +349,7 @@ function disabledDate(thisdate){
//数据控制，根据isHisData的值决定数据控制逻辑，false为实时数据，true为历史数据
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() {
tableInfo.title.frozenList.length = 0;
pushFrozenList("gatherTime", "采集时间", true, 180, true)
......@@ -419,6 +413,7 @@ async function changeData() {
//实时数据初始化
async function initReal() {
dataUrl = '/api/tiger/TigerHeatUser/Real';
exportUrl = '/api/tiger/TigerHeatUser/RealExport'
tableInfo.tableData.length = 0;
tableInfo.realData.length = 0;
await getRealData();
......@@ -427,8 +422,8 @@ async function initReal() {
}
//历史数据初始化
async function initHis() {
// dataUrl = '/api/tiger/TigerHeatUser/Real';
dataUrl = '/api/tiger/TigerHeatUser/His';
exportUrl = '/api/tiger/TigerHeatUser/HisExport';
tableInfo.tableData.length = 0;
tableInfo.hisData.length = 0;
await getHisData();
......@@ -500,6 +495,57 @@ async function getHisDataByInfo(name, start, end, startPage, pagesCount, sort) {
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() {
if (isHisData.value) {
tableInfo.tableData = tableInfo.hisData;
......@@ -558,6 +604,25 @@ function SearchHisData() {
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() {
......@@ -585,7 +650,17 @@ function changeHisPage() {
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 }) {
......
src/views/HeatUserPage/TapPage.vue
View file @ 8633d3f3
......@@ -2,8 +2,6 @@
<el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }">
<div class="div-header">
<el-row>
<el-col :span="4">
<div class="div-button" style="display: flex;">
<div class="div-autoRefresh">
<el-switch v-model="isHisData" class="switch-autoRefresh" active-text="历史数据"
......@@ -14,46 +12,41 @@
</div>
</el-col>
<el-col :span="7">
<div class="div-dropdown text-center">
<el-form-item label="小区名称：">
<el-cascader :options="DataInfo.tree" v-model="DataInfo.name" :props="props" collapse-tags
clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 280px;" />
</el-form-item>
</div>
</el-col>
<el-col :span="11">
<el-col :span="10">
<div class="div-time-picker" v-show="isHisData">
<el-form-item label="开始时间：" style="margin-right: 20px;">
<el-config-provider :locale="zhCn">
<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-->
</el-config-provider>
</el-form-item>
<el-form-item label="结束时间：">
<el-config-provider :locale="zhCn">
<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-form-item>
</div>
</el-col>
<el-col :span="2">
<el-col :span="3">
<div class="div-button">
<el-row :gutter="10">
<el-col :span="15">
<el-button class="el-button-button" type="primary" :span="6" @click="SearchData" icon="Search">
搜&nbsp;&nbsp;索</el-button>
<el-col :span="12">
<el-button class="el-button-button" type="primary" :span="6" @click="SearchData" >
搜索</el-button>
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="3">
<el-col :span="12">
<el-button class="el-button-button" type="primary" :span="6" @click="ExportDataFile" >
导出</el-button>
</el-col>
</el-row>
</div>
......@@ -128,6 +121,7 @@
.div-time-picker {
padding-top: 6px;
margin-left: 30px;
display: flex;
}
......@@ -163,6 +157,8 @@
.el-button-button {
margin-top: 5px;
margin-right: 5px;
margin-left: 60px;
width: 80px;
}
......@@ -173,7 +169,7 @@
display: flex;
margin-top: 5px;
border-radius: var(--el-border-radius-base);
padding: 6px 15px;
padding: 6px 0px;
font-size: 14px;
height: 20px;
overflow: hidden;
......@@ -225,18 +221,10 @@
<script setup>
import { ref, reactive, onMounted, onUnmounted, provide, computed, handleError } from 'vue'
import DataForm from '../../components/DataForm.vue';
import { useRoute } from 'vue-router'
import http from '../../api/http'
import store from "../../store/index";
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 { start } from 'repl';
// import { ca } from 'element-plus/es/locale';
......@@ -346,11 +334,13 @@ function twoDigits(value) {
function disabledDate(thisdate){
var startDate=new Date(2023,7,1);
var endDate=new Date();
return thisdate > endDate || thisdate < startDate;
}
//数据控制，根据isHisData的值决定数据控制逻辑，false为实时数据，true为历史数据
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() {
tableInfo.title.frozenList.length = 0;
......@@ -417,14 +407,15 @@ async function changeData() {
//实时数据初始化
async function initReal() {
dataUrl = '/api/tiger/TigerTapData/Real';
exportUrl = '/api/tiger/TigerTapData/RealExport'
tableInfo.tableData.length = 0;
tableInfo.realData.length = 0;
await getRealData();
}
//历史数据初始化
async function initHis() {
// dataUrl = '/api/tiger/TigerHeatUser/Real';
dataUrl = '/api/tiger/TigerTapData/His';
exportUrl = '/api/tiger/TigerTapData/HisExport';
tableInfo.tableData.length = 0;
tableInfo.hisData.length = 0;
await getHisData();
......@@ -499,6 +490,57 @@ async function getHisDataByInfo(name, start, end, startPage, pagesCount, sort) {
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() {
if (isHisData.value) {
tableInfo.tableData = tableInfo.hisData;
......@@ -554,6 +596,25 @@ function SearchHisData() {
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() {
......@@ -581,6 +642,17 @@ function changeHisPage() {
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