<template>
|
<div v-if="analy" class="app-container">
|
<div class="filter-container">
|
<el-input v-model="listQuery.keyword" size="small" placeholder="请输入编号/名称" clearable class="filter-item w-200" />
|
<!-- <el-date-picker v-model="queryForm.time" type="daterange" range-separator="至" start-placeholder="开始时间" class="filter-item w-300" size="small"
|
end-placeholder="结束时间" value-format="yyyy-MM-dd" /> -->
|
|
<!-- <el-date-picker v-model="listQuery.time" type="date" placeholder="选择日期" class="filter-item w-300" size="small"
|
value-format="yyyy-MM-dd">
|
</el-date-picker> -->
|
<el-button-group class="filter-item">
|
<el-button size="small" type="primary" icon="el-icon-search" @click="search">
|
搜索
|
</el-button>
|
<el-button size="small" type="primary" icon="el-icon-refresh" @click="refresh">
|
刷新
|
</el-button>
|
<!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="add">
|
新增
|
</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>
|
|
<el-button style="margin-left: 10px;" type="primary" @click="resetinitv">重置初始值</el-button>
|
|
</span>
|
|
|
</div>
|
|
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit height="100%"
|
class="table-container" highlight-current-row @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55">
|
</el-table-column>
|
<el-table-column fixed label="序号" width="80">
|
|
<template slot-scope="scope">
|
{{ scope.row.id }}
|
</template>
|
</el-table-column>
|
<el-table-column label="编号" width="120">
|
<template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template>
|
</el-table-column>
|
<el-table-column label="设备名称" width="170">
|
<template slot-scope="scope">
|
{{ scope.row.anchorname }}
|
</template>
|
</el-table-column>
|
<el-table-column label="所属公司" width="170">
|
<template slot-scope="scope">
|
{{ scope.row.company }}
|
</template>
|
</el-table-column>
|
<el-table-column label="东位移（mm）" width="120">
|
<template slot-scope="scope">
|
{{ scope.row.edmm }}
|
</template>
|
</el-table-column>
|
<el-table-column label="北位移（mm）" width="120">
|
<template slot-scope="scope">
|
{{ scope.row.ndmm }}
|
</template>
|
</el-table-column>
|
<el-table-column label="天位移（mm）" width="120">
|
<template slot-scope="scope">
|
{{ scope.row.hdmm }}
|
</template>
|
</el-table-column>
|
<el-table-column label="卫星数" width="100">
|
<template slot-scope="scope">
|
{{ scope.row.gpsnum }}
|
</template>
|
</el-table-column>
|
<el-table-column label="分析" width="120">
|
<template slot-scope="scope">
|
<img src="../../assets/images/analyze.png" alt="" style="width: 30px;height: 30px;" @click="analyze(scope)">
|
</template>
|
|
|
</el-table-column>
|
<el-table-column label="初始值东北天" width="250">
|
<template slot-scope="scope">
|
{{ scope.row.ed + ';' + scope.row.nd + ';' + scope.row.td }}
|
</template>
|
</el-table-column>
|
<el-table-column label="添加时间">
|
<template slot-scope="scope">
|
{{ scope.row.addtime }}
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
|
@pagination="searchorfetchData" />
|
|
|
</div>
|
<div v-else class="app-container">
|
<div style="margin-bottom: 30px;">
|
<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>
|
|
<el-button style="margin-left: 10px;" :type="oneprimary" @click="one">最近一月</el-button>
|
|
<el-button style="margin-left: 10px;" :type="twoprimary" @click="two">最近二月</el-button>
|
|
<el-button style="margin-left: 10px;" :type="threeprimary" @click="three">最近三月</el-button>
|
|
<el-button style="margin-left: 10px;" :type="yearprimary" @click="year">今年</el-button>
|
|
<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>
|
<line-chart :chart-data="lineChartData" />
|
|
|
</div>
|
</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, handlechartupdate2,resetinitv } from '@/api/analysis'
|
import { deepClone } from '@/utils'
|
|
const lineChartData = {
|
newVisitis: {
|
ed: [],
|
nd: [],
|
hd: [],
|
x: [],
|
|
},
|
|
};
|
export default {
|
components: {
|
LineChart,
|
Pagination
|
},
|
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: '',
|
queryForm: {
|
time: '',
|
tagid: ''
|
},
|
timeExport: '',
|
lineChartData: lineChartData.newVisitis,
|
analy: true,
|
total: 0,
|
list: [],
|
ForwardData: [],
|
listLoading: true,
|
listQuery: {
|
username: localStorage.getItem('username') || '',
|
current: 1,
|
size: 20,
|
keyword: undefined,
|
time: undefined,
|
},
|
uploadUrl: '',
|
multipleSelection: [],
|
dialogVisible: false,
|
dialogType: 'create',
|
loading: false
|
}
|
},
|
created() {
|
this.fetchData()
|
},
|
methods: {
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
resetinitv() {
|
console.log("重置初始值");
|
console.log(this.multipleSelection);
|
if (this.multipleSelection.length == 0) {
|
this.$message({
|
message: '请先选择一条数据',
|
type: 'error'
|
})
|
} else if (this.multipleSelection.length > 1) {
|
this.$message({
|
message: '请选择一条数据',
|
type: 'error'
|
})
|
|
|
}else{
|
|
this.$confirm('你将确定将' + this.multipleSelection[0].tagid + ' 编号设备重置初始值为' + this.multipleSelection[0].ed + ';' + this.multipleSelection[0].nd + ';' + this.multipleSelection[0].td + ' 吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
center: true
|
}).then(() => {
|
|
const params = { tagid: this.multipleSelection[0].tagid , initv: this.multipleSelection[0].ed + ';' + this.multipleSelection[0].nd + ';' + this.multipleSelection[0].td };
|
resetinitv(params).then(response => {
|
console.log(response);
|
|
|
})
|
this.$message({
|
type: 'success',
|
message: '重置成功!'
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消重置'
|
});
|
});
|
|
}
|
|
},
|
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 };
|
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'
|
// 获取当前日期
|
const currentDate = new Date();
|
// 获取当前月份
|
const currentMonth = currentDate.getMonth();
|
// 设置日期的月份为当前月份减一
|
currentDate.setMonth(currentMonth - 1);
|
const newDate = formatTime1(currentDate, "yyyy-MM-dd");
|
//获取当前年月日
|
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
|
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 };
|
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();
|
// 获取当前月份
|
const currentMonth = currentDate.getMonth();
|
// 设置日期的月份为当前月份减一
|
currentDate.setMonth(currentMonth - 2);
|
const newDate = formatTime1(currentDate, "yyyy-MM-dd");
|
//获取当前年月日
|
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
|
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 };
|
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'
|
// 获取当前日期
|
const currentDate = new Date();
|
// 获取当前月份
|
const currentMonth = currentDate.getMonth();
|
// 设置日期的月份为当前月份减一
|
currentDate.setMonth(currentMonth - 3);
|
const newDate = formatTime1(currentDate, "yyyy-MM-dd");
|
//获取当前年月日
|
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
|
|
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 };
|
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
|
// 获取当前日期
|
// const currentDate = new Date();
|
// 获取当前月份
|
// const currentMonth = currentDate.getMonth();
|
// 设置日期的月份为当前月份减一
|
// currentDate.setMonth(currentMonth - 3);
|
const newDate = formatTime1(new Date(), "yyyy-MM-dd");
|
//获取当前年月日
|
const dateYear = formatTime1(new Date(), "yyyy");
|
console.log(dateYear + '-01-01');
|
this.yeardata = dateYear
|
var time = []
|
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 };
|
handlechartupdate3(params).then(response => {
|
console.log(response);
|
|
this.lineChartData = response.data
|
})
|
},
|
|
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
|
}
|
} else {
|
this.next = false
|
}
|
|
},
|
|
lastyear() {
|
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 == "") {
|
currentDate.setFullYear(currentMonth - 1);
|
// this.yeardata=currentMonth - 1;
|
|
} else {
|
currentDate.setFullYear(this.yeardata - 1);
|
// this.yeardata = this.yeardata - 1
|
|
}
|
const newDate = formatTime1(currentDate, "yyyy");
|
|
this.yeardata = parseInt(newDate)
|
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 };
|
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'
|
// 获取当前日期
|
const currentDate = new Date();
|
// 获取当前月份
|
// const currentMonth = currentDate.getFullYear();
|
// 设置日期的月份为当前月份减一
|
console.log(this.yeardata);
|
|
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 };
|
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 };
|
handlechartupdate3(params).then(response => {
|
this.lineChartData = response.data
|
})
|
|
},
|
// 搜索
|
search() {
|
this.listLoading = true
|
searcheveryday(this.listQuery).then(response => {
|
if (response.data != null) {
|
this.list = response.data.records
|
this.total = response.data.total
|
} else {
|
this.$message({
|
message: '未搜索到数据',
|
type: 'error'
|
})
|
}
|
|
this.listLoading = false
|
})
|
},
|
refresh() {
|
this.listQuery = {
|
username: localStorage.getItem('username') || '',
|
current: 1,
|
size: 20,
|
time: undefined,
|
keyword: undefined
|
}
|
this.fetchData()
|
},
|
// 分页数据
|
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
|
})
|
},
|
|
|
|
searchorfetchData() {
|
console.log(this.listQuery.keyword);
|
|
if (this.listQuery.keyword != undefined) {
|
console.log(111111);
|
|
this.search()
|
} 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
|
// })
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-upload {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
|
.el-icon-plus.avatar-uploader-icon {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
font-size: 28px;
|
color: #8c939d;
|
width: 128px;
|
height: 128px;
|
line-height: 128px;
|
text-align: center;
|
}
|
}
|
|
.el-table .el-table__body tr:hover {
|
background-color: transparent !important;
|
/* 你想要的背景色 */
|
color: #000 !important;
|
}
|
|
.el-table__body {
|
tr:hover>td {
|
background-color: transparent !important;
|
/* 你想要的背景色 */
|
color: #000 !important;
|
}
|
}
|
|
|
.avatar-uploader {
|
height: 128px;
|
|
img {
|
width: 128px;
|
height: 128px;
|
}
|
}
|
</style>
|
