<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-date-picker
|
v-model="timeExport"
|
align="right"
|
type="date"
|
value-format="yyyyMMdd"
|
placeholder="选择日期"
|
:picker-options="pickerOptions"
|
/>
|
<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.edmmr }}
|
</template>
|
</el-table-column>
|
<el-table-column label="北位移（mm）" width="120">
|
<template slot-scope="scope">
|
{{ scope.row.ndmmr }}
|
</template>
|
</el-table-column>
|
<el-table-column label="天位移（mm）" width="120">
|
<template slot-scope="scope">
|
{{ scope.row.hdmmr }}
|
</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-date-picker
|
v-model="queryForm.time"
|
align="right"
|
type="date"
|
value-format="yyyyMMdd"
|
placeholder="选择日期"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
<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 {
|
addSystemOperationLog,
|
getxsList,
|
searcheveryxsday,
|
xshandlechart2,
|
xshandlechartupdate3,
|
xshandlechartupdate2,
|
resetinitv,
|
} from "@/api/analysis";
|
import { deepClone } from "@/utils";
|
|
const lineChartData = {
|
newVisitis: {
|
ed: [],
|
nd: [],
|
hd: [],
|
x: [],
|
},
|
};
|
export default {
|
components: {
|
LineChart,
|
Pagination,
|
},
|
data() {
|
return {
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > Date.now();
|
},
|
shortcuts: [
|
{
|
text: "今天",
|
onClick(picker) {
|
picker.$emit("pick", new Date());
|
},
|
},
|
{
|
text: "昨天",
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
picker.$emit("pick", date);
|
},
|
},
|
{
|
text: "一周前",
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit("pick", date);
|
},
|
},
|
],
|
},
|
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() {
|
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) => {
|
const params = { name: localStorage.getItem('username') || '', content: localStorage.getItem('username')+"将" +
|
this.multipleSelection[0].tagid +
|
" 编号设备重置初始值为" +
|
this.multipleSelection[0].ed +
|
";" +
|
this.multipleSelection[0].nd +
|
";" +
|
this.multipleSelection[0].hd };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
});
|
this.$message({
|
type: "success",
|
message: "重置成功!",
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消重置",
|
});
|
});
|
}
|
},
|
exportExcel() {
|
const params = {
|
date1: this.timeExport,
|
// date2: this.timeExport[0],
|
username: localStorage.getItem("username") || "",
|
};
|
xshandlechartupdate2(params).then((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);
|
});
|
},
|
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,
|
};
|
xshandlechart2(params).then((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.getDate();
|
// 设置日期的月份为当前月份减一
|
currentDate.setDate(currentMonth - 1);
|
const newDate = formatTime1(currentDate, "yyyyMMdd");
|
//获取当前年月日
|
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
|
this.queryForm.time = newDate;
|
const params = {
|
date1: newDate,
|
// date2: newDate,
|
username: localStorage.getItem("username") || "",
|
tagid: this.tagid,
|
};
|
xshandlechartupdate3(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.getDate();
|
// 设置日期的月份为当前月份减一
|
currentDate.setDate(currentMonth - 2);
|
const newDate = formatTime1(currentDate, "yyyyMMdd");
|
//获取当前年月日
|
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
|
this.queryForm.time = newDate;
|
const params = {
|
date1: newDate,
|
// date2: newDate,
|
username: localStorage.getItem("username") || "",
|
tagid: this.tagid,
|
};
|
xshandlechartupdate3(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 currentDate = new Date();
|
// 获取当前月份
|
const currentMonth = currentDate.getDate();
|
// 设置日期的月份为当前月份减一
|
currentDate.setDate(currentMonth);
|
const newDate = formatTime1(currentDate, "yyyyMMdd");
|
|
this.queryForm.time = newDate;
|
const params = {
|
date1: newDate,
|
// date2: dateYear + "-01-01",
|
username: localStorage.getItem("username") || "",
|
tagid: this.tagid,
|
};
|
xshandlechartupdate3(params).then((response) => {
|
this.lineChartData = response.data;
|
});
|
},
|
|
lastornext() {
|
const currentDate = new Date();
|
const currentMonth = currentDate.getFullYear();
|
if (this.yeardata < currentMonth) {
|
this.next = true;
|
if (this.yeardata <= 2022) {
|
this.last = false;
|
} else {
|
this.last = true;
|
}
|
} else {
|
this.next = false;
|
}
|
},
|
handlechart() {
|
const params = {
|
date1: this.queryForm.time,
|
username: localStorage.getItem("username") || "",
|
tagid: this.tagid,
|
};
|
xshandlechartupdate3(params).then((response) => {
|
this.lineChartData = response.data;
|
});
|
},
|
// 搜索
|
search() {
|
this.listLoading = true;
|
searcheveryxsday(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;
|
getxsList(this.listQuery).then((response) => {
|
this.list = response.data.records;
|
this.total = response.data.total;
|
this.listLoading = false;
|
});
|
},
|
|
searchorfetchData() {
|
if (this.listQuery.keyword != undefined) {
|
this.search();
|
} else {
|
this.fetchData();
|
}
|
},
|
},
|
};
|
</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>
|
