From afedb522ac910d1e5265ad93b9bacb1da41cfefb Mon Sep 17 00:00:00 2001
From: fei.wang <wf18701153496@163.com>
Date: 星期一, 17 三月 2025 10:58:16 +0800
Subject: [PATCH] 新增储罐管理，数据分析新增导出功能
---
src/views/analysis/index.vue | 349 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 207 insertions(+), 142 deletions(-)
diff --git a/src/views/analysis/index.vue b/src/views/analysis/index.vue
index c59c8c7..6b5496e 100644
--- a/src/views/analysis/index.vue
+++ b/src/views/analysis/index.vue
@@ -19,6 +19,16 @@
鏂板
</el-button> -->
</el-button-group>
+
+ <span style="margin-left: 100px;">
+ <el-date-picker v-model="timeExport" type="daterange" unlink-panels :picker-options="pickerOptions"
+ range-separator="鑷�" start-placeholder="寮�濮嬫椂闂�" end-placeholder="缁撴潫鏃堕棿" value-format="yyyy-MM-dd" />
+
+ <el-button style="margin-left: 10px;" type="primary" @click="exportExcel">瀵煎嚭EXCEL</el-button>
+
+ </span>
+
+
</div>
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit height="100%"
@@ -70,7 +80,7 @@
</el-table-column>
- <el-table-column label="娣诲姞鏃堕棿" >
+ <el-table-column label="娣诲姞鏃堕棿">
<template slot-scope="scope">
{{ scope.row.addtime }}
</template>
@@ -84,8 +94,8 @@
</div>
<div v-else class="app-container">
<div style="margin-bottom: 30px;">
- <el-date-picker v-model="queryForm.time" type="monthrange" unlink-panels :picker-options="pickerOptions" range-separator="鑷�" start-placeholder="寮�濮嬫椂闂�"
- end-placeholder="缁撴潫鏃堕棿" value-format="yyyy-MM-dd" />
+ <el-date-picker v-model="queryForm.time" type="daterange" unlink-panels :picker-options="pickerOptions"
+ range-separator="鑷�" start-placeholder="寮�濮嬫椂闂�" end-placeholder="缁撴潫鏃堕棿" value-format="yyyy-MM-dd" />
<el-button style="margin-left: 10px;" type="primary" @click="handlechart">鎼滅储</el-button>
<el-button style="position: absolute; right: 50px;" type="primary" @click="fanhui">杩斿洖</el-button>
@@ -100,7 +110,8 @@
<el-button v-if="last" style="margin-left: 10px;" :type="lastyearprimary" @click="lastyear">涓婁竴骞�</el-button>
<el-button v-if="next" style="margin-left: 10px;" :type="nextyearprimary" @click="nextyear">涓嬩竴骞�</el-button>
</div>
- <span style=" display: flex;justify-content: center;align-items: center;font-size: 25px;"> {{ this.anchorname+"-" +this.tagid+"鍙樺寲瓒嬪娍鍥�"}}</span>
+ <span style=" display: flex;justify-content: center;align-items: center;font-size: 25px;"> {{ this.anchorname + "-"
+ + this.tagid +"鍙樺寲瓒嬪娍鍥�"}}</span>
<line-chart :chart-data="lineChartData" />
@@ -108,10 +119,12 @@
</template>
<script>
+import * as XLSX from 'xlsx';
+import { saveAs } from 'file-saver';
import { formatTime1 } from "@/utils/index.js"; //鏃ユ湡鏍煎紡杞崲
import LineChart from "./components/LineChart";
import Pagination from '@/components/Pagination'
-import { getList, searcheveryday, handlechart2, handlechartupdate3 } from '@/api/analysis'
+import { getList, searcheveryday, handlechart2, handlechartupdate3,handlechartupdate2 } from '@/api/analysis'
import { deepClone } from '@/utils'
const lineChartData = {
@@ -120,7 +133,7 @@
nd: [],
hd: [],
x: [],
-
+
},
};
@@ -132,43 +145,44 @@
data() {
return {
pickerOptions: {
- shortcuts: [{
- text: '鏈湀',
- onClick(picker) {
- picker.$emit('pick', [new Date(), new Date()]);
- }
- }, {
- text: '浠婂勾鑷充粖',
- onClick(picker) {
- const end = new Date();
- const start = new Date(new Date().getFullYear(), 0);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: '鏈�杩戝叚涓湀',
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setMonth(start.getMonth() - 6);
- picker.$emit('pick', [start, end]);
- }
- }]
- },
- yearprimary:'success',
- oneprimary:'primary',
- twoprimary:'primary',
- threeprimary:'primary',
- lastyearprimary:'primary',
- nextyearprimary:'primary',
- last:true,
- next:false,
- yeardata:0,
- anchorname:'',
- tagid:'',
+ shortcuts: [{
+ text: '鏈湀',
+ onClick(picker) {
+ picker.$emit('pick', [new Date(), new Date()]);
+ }
+ }, {
+ text: '浠婂勾鑷充粖',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date(new Date().getFullYear(), 0);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '鏈�杩戝叚涓湀',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setMonth(start.getMonth() - 6);
+ picker.$emit('pick', [start, end]);
+ }
+ }]
+ },
+ yearprimary: 'success',
+ oneprimary: 'primary',
+ twoprimary: 'primary',
+ threeprimary: 'primary',
+ lastyearprimary: 'primary',
+ nextyearprimary: 'primary',
+ last: true,
+ next: false,
+ yeardata: 0,
+ anchorname: '',
+ tagid: '',
queryForm: {
time: '',
tagid: ''
},
+ timeExport: '',
lineChartData: lineChartData.newVisitis,
analy: true,
total: 0,
@@ -193,25 +207,64 @@
this.fetchData()
},
methods: {
+ exportExcel() {
+ console.log(this.timeExport);
+ // const data = []
+const params = { date1: this.timeExport[1], date2: this.timeExport[0], username: localStorage.getItem('username') || '' };
+handlechartupdate2(params).then(response => {
+ console.log(response);
+ const data = response.data
+ // 鑾峰彇瑕佸鍑虹殑鏁版嵁
+ // const data = this.list; // 鍋囪list鏄〃鏍肩殑鏁版嵁
+ // 鍒涘缓涓�涓┖鐨勫伐浣滅翱
+ const workbook = XLSX.utils.book_new();
+ // 鍒涘缓涓�涓伐浣滆〃
+ const worksheet = XLSX.utils.json_to_sheet(data);
+ // 灏嗗伐浣滆〃娣诲姞鍒板伐浣滅翱涓�
+ XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+ // 灏嗗伐浣滅翱杞崲涓轰簩杩涘埗瀛楃涓�
+ const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+ // 灏嗕簩杩涘埗瀛楃涓茶浆鎹负Blob瀵硅薄
+ const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
+ // 鍒涘缓涓�涓笅杞介摼鎺�
+ const url = URL.createObjectURL(blob);
+ // 鍒涘缓涓�涓殣钘忕殑閾炬帴鍏冪礌
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = 'export.xlsx'; // 璁剧疆涓嬭浇鐨勬枃浠跺悕
+ // 妯℃嫙鐐瑰嚮涓嬭浇閾炬帴
+ link.click();
+ // 閲婃斁URL瀵硅薄
+ URL.revokeObjectURL(url);
+})
+// console.log(data);
+
+
+},
+ Export() {
+
+ },
fanhui() {
this.analy = true
},
analyze(scope) {
- this.anchorname=scope.row.anchorname
- this.tagid=scope.row.tagid
- const params = { date1: this.queryForm.time[1], date2: this.queryForm.time[0], username: localStorage.getItem('username') || '' ,tagid:scope.row.tagid};
+ this.anchorname = scope.row.anchorname
+ this.tagid = scope.row.tagid
+ const params = { date1: this.queryForm.time[1], date2: this.queryForm.time[0], username: localStorage.getItem('username') || '', tagid: scope.row.tagid };
handlechart2(params).then(response => {
+ console.log(response);
+
this.lineChartData = response.data
this.analy = false
})
},
one() {
- this.oneprimary='success'
- this.twoprimary='primary'
- this.threeprimary='primary'
- this.yearprimary='primary'
- this.lastyearprimary='primary'
- this.nextyearprimary='primary'
+ this.oneprimary = 'success'
+ this.twoprimary = 'primary'
+ this.threeprimary = 'primary'
+ this.yearprimary = 'primary'
+ this.lastyearprimary = 'primary'
+ this.nextyearprimary = 'primary'
// 鑾峰彇褰撳墠鏃ユ湡
const currentDate = new Date();
// 鑾峰彇褰撳墠鏈堜唤
@@ -224,22 +277,22 @@
var time = []
time.push(newDate)
time.push(dateYear)
- this.queryForm.time=time
- const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '' ,tagid:this.tagid};
+ this.queryForm.time = time
+ const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '', tagid: this.tagid };
handlechartupdate3(params).then(response => {
this.lineChartData = response.data
})
},
two() {
- this.oneprimary='primary'
- this.twoprimary='success'
- this.threeprimary='primary'
- this.yearprimary='primary'
- this.lastyearprimary='primary'
- this.nextyearprimary='primary'
- // 鑾峰彇褰撳墠鏃ユ湡
- const currentDate = new Date();
+ this.oneprimary = 'primary'
+ this.twoprimary = 'success'
+ this.threeprimary = 'primary'
+ this.yearprimary = 'primary'
+ this.lastyearprimary = 'primary'
+ this.nextyearprimary = 'primary'
+ // 鑾峰彇褰撳墠鏃ユ湡
+ const currentDate = new Date();
// 鑾峰彇褰撳墠鏈堜唤
const currentMonth = currentDate.getMonth();
// 璁剧疆鏃ユ湡鐨勬湀浠戒负褰撳墠鏈堜唤鍑忎竴
@@ -250,20 +303,20 @@
var time = []
time.push(newDate)
time.push(dateYear)
- this.queryForm.time=time
- const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '' ,tagid:this.tagid};
+ this.queryForm.time = time
+ const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '', tagid: this.tagid };
handlechartupdate3(params).then(response => {
this.lineChartData = response.data
})
},
three() {
- this.oneprimary='primary'
- this.twoprimary='primary'
- this.threeprimary='success'
- this.yearprimary='primary'
- this.lastyearprimary='primary'
- this.nextyearprimary='primary'
+ this.oneprimary = 'primary'
+ this.twoprimary = 'primary'
+ this.threeprimary = 'success'
+ this.yearprimary = 'primary'
+ this.lastyearprimary = 'primary'
+ this.nextyearprimary = 'primary'
// 鑾峰彇褰撳墠鏃ユ湡
const currentDate = new Date();
// 鑾峰彇褰撳墠鏈堜唤
@@ -277,23 +330,23 @@
var time = []
time.push(newDate)
time.push(dateYear)
- this.queryForm.time=time
- const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '',tagid:this.tagid };
+ this.queryForm.time = time
+ const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '', tagid: this.tagid };
handlechartupdate3(params).then(response => {
-
+
this.lineChartData = response.data
})
},
year() {
- this.oneprimary='primary'
- this.twoprimary='primary'
- this.threeprimary='primary'
- this.yearprimary='success'
- this.lastyearprimary='primary'
- this.nextyearprimary='primary'
- this.next=false
- this.last=true
+ this.oneprimary = 'primary'
+ this.twoprimary = 'primary'
+ this.threeprimary = 'primary'
+ this.yearprimary = 'success'
+ this.lastyearprimary = 'primary'
+ this.nextyearprimary = 'primary'
+ this.next = false
+ this.last = true
// 鑾峰彇褰撳墠鏃ユ湡
// const currentDate = new Date();
// 鑾峰彇褰撳墠鏈堜唤
@@ -303,119 +356,119 @@
const newDate = formatTime1(new Date(), "yyyy-MM-dd");
//鑾峰彇褰撳墠骞存湀鏃�
const dateYear = formatTime1(new Date(), "yyyy");
- console.log(dateYear+'-01-01');
+ console.log(dateYear + '-01-01');
this.yeardata = dateYear
var time = []
- time.push(newDate+'-01-01')
+ time.push(newDate + '-01-01')
time.push(newDate)
- this.queryForm.time=time
- const params = { date1: newDate, date2: dateYear+'-01-01', username: localStorage.getItem('username') || '',tagid:this.tagid };
+ this.queryForm.time = time
+ const params = { date1: newDate, date2: dateYear + '-01-01', username: localStorage.getItem('username') || '', tagid: this.tagid };
handlechartupdate3(params).then(response => {
console.log(response);
-
+
this.lineChartData = response.data
})
},
- lastornext(){
+ lastornext() {
const currentDate = new Date();
const currentMonth = currentDate.getFullYear();
console.log(currentMonth);
console.log(this.yeardata);
-
-
- if (this.yeardata<currentMonth) {
- this.next=true
- if (this.yeardata<=2022) {
- this.last=false
- }else{
- this.last=true
+
+
+ if (this.yeardata < currentMonth) {
+ this.next = true
+ if (this.yeardata <= 2022) {
+ this.last = false
+ } else {
+ this.last = true
+ }
+ } else {
+ this.next = false
}
- }else {
- this.next=false
- }
-
+
},
lastyear() {
- this.oneprimary='primary'
- this.twoprimary='primary'
- this.threeprimary='primary'
- this.yearprimary='primary'
- this.lastyearprimary='success'
- this.nextyearprimary='primary'
+ this.oneprimary = 'primary'
+ this.twoprimary = 'primary'
+ this.threeprimary = 'primary'
+ this.yearprimary = 'primary'
+ this.lastyearprimary = 'success'
+ this.nextyearprimary = 'primary'
// 鑾峰彇褰撳墠鏃ユ湡
const currentDate = new Date();
// 鑾峰彇褰撳墠鏈堜唤
const currentMonth = currentDate.getFullYear();
// 璁剧疆鏃ユ湡鐨勬湀浠戒负褰撳墠鏈堜唤鍑忎竴
-
- if (this.yeardata=="") {
+
+ if (this.yeardata == "") {
currentDate.setFullYear(currentMonth - 1);
// this.yeardata=currentMonth - 1;
- }else{
+ } else {
currentDate.setFullYear(this.yeardata - 1);
// this.yeardata = this.yeardata - 1
}
const newDate = formatTime1(currentDate, "yyyy");
-
+
this.yeardata = parseInt(newDate)
-this.lastornext()
+ this.lastornext()
//鑾峰彇褰撳墠骞存湀鏃�
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
// this.queryForm.time.push(newDate+'-01-01')
// this.queryForm.time.push(newDate+'-12-31')
var time = []
- time.push(newDate+'-01-01')
- time.push(newDate+'-12-31')
- this.queryForm.time=time
- const params = { date1: newDate+'-12-31', date2: newDate+'-01-01', username: localStorage.getItem('username') || '',tagid:this.tagid };
+ time.push(newDate + '-01-01')
+ time.push(newDate + '-12-31')
+ this.queryForm.time = time
+ const params = { date1: newDate + '-12-31', date2: newDate + '-01-01', username: localStorage.getItem('username') || '', tagid: this.tagid };
handlechartupdate3(params).then(response => {
-
+
this.lineChartData = response.data
})
},
nextyear() {
- this.oneprimary='primary'
- this.twoprimary='primary'
- this.threeprimary='primary'
- this.yearprimary='primary'
- this.lastyearprimary='primary'
- this.nextyearprimary='success'
+ this.oneprimary = 'primary'
+ this.twoprimary = 'primary'
+ this.threeprimary = 'primary'
+ this.yearprimary = 'primary'
+ this.lastyearprimary = 'primary'
+ this.nextyearprimary = 'success'
// 鑾峰彇褰撳墠鏃ユ湡
const currentDate = new Date();
// 鑾峰彇褰撳墠鏈堜唤
// const currentMonth = currentDate.getFullYear();
// 璁剧疆鏃ユ湡鐨勬湀浠戒负褰撳墠鏈堜唤鍑忎竴
console.log(this.yeardata);
-
- currentDate.setFullYear( this.yeardata + 1);
+
+ currentDate.setFullYear(this.yeardata + 1);
const newDate = formatTime1(currentDate, "yyyy");
console.log(newDate);
-
+
this.yeardata = parseInt(newDate)
//鑾峰彇褰撳墠骞存湀鏃�
this.lastornext()
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
var time = []
- time.push(newDate+'-01-01')
- time.push(newDate+'-12-31')
- this.queryForm.time=time
- const params = { date1: newDate+'-12-31', date2: newDate+'-01-01', username: localStorage.getItem('username') || '',tagid:this.tagid };
+ time.push(newDate + '-01-01')
+ time.push(newDate + '-12-31')
+ this.queryForm.time = time
+ const params = { date1: newDate + '-12-31', date2: newDate + '-01-01', username: localStorage.getItem('username') || '', tagid: this.tagid };
handlechartupdate3(params).then(response => {
-
+
this.lineChartData = response.data
})
},
-
+
handlechart() {
console.log(this.queryForm.time);
-
- const params = { date1: this.queryForm.time[1], date2: this.queryForm.time[0], username: localStorage.getItem('username') || '',tagid:this.tagid };
+
+ const params = { date1: this.queryForm.time[1], date2: this.queryForm.time[0], username: localStorage.getItem('username') || '', tagid: this.tagid };
handlechartupdate3(params).then(response => {
this.lineChartData = response.data
})
@@ -425,8 +478,16 @@
search() {
this.listLoading = true
searcheveryday(this.listQuery).then(response => {
- this.list = response.data.records
- this.total = response.data.total
+ if (response.data!=null) {
+ this.list = response.data.records
+ this.total = response.data.total
+ }else{
+ this.$message({
+ message: '鏈悳绱㈠埌鏁版嵁',
+ type: 'error'
+ })
+ }
+
this.listLoading = false
})
},
@@ -445,7 +506,7 @@
this.listLoading = true
getList(this.listQuery).then(response => {
console.log(response);
-
+
this.list = response.data.records
this.total = response.data.total
this.listLoading = false
@@ -455,21 +516,21 @@
searchorfetchData() {
-console.log(this.listQuery.keyword);
+ console.log(this.listQuery.keyword);
- if (this.listQuery.keyword!=undefined) {
+ if (this.listQuery.keyword != undefined) {
console.log(111111);
-
+
this.search()
- }else{
+ } else {
console.log(2222);
-
+
this.fetchData()
}
// this.listLoading = true
// getList(this.listQuery).then(response => {
// console.log(response);
-
+
// this.list = response.data.records
// this.total = response.data.total
// this.listLoading = false
@@ -499,14 +560,18 @@
text-align: center;
}
}
+
.el-table .el-table__body tr:hover {
- background-color: transparent!important; /* 浣犳兂瑕佺殑鑳屾櫙鑹� */
- color: #000!important;
+ background-color: transparent !important;
+ /* 浣犳兂瑕佺殑鑳屾櫙鑹� */
+ color: #000 !important;
}
+
.el-table__body {
- tr:hover > td {
- background-color: transparent!important; /* 浣犳兂瑕佺殑鑳屾櫙鑹� */
- color: #000!important;
+ tr:hover>td {
+ background-color: transparent !important;
+ /* 浣犳兂瑕佺殑鑳屾櫙鑹� */
+ color: #000 !important;
}
}
--
Gitblit v1.9.3