<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>
|
</div>
|
|
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit height="100%"
|
class="table-container" highlight-current-row>
|
<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="添加时间" >
|
<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="monthrange" 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 { formatTime1 } from "@/utils/index.js"; //日期格式转换
|
import LineChart from "./components/LineChart";
|
import Pagination from '@/components/Pagination'
|
import { getList, searcheveryday, handlechart2, handlechartupdate3 } 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: ''
|
},
|
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: '',
|
|
dialogVisible: false,
|
dialogType: 'create',
|
loading: false
|
}
|
},
|
created() {
|
this.fetchData()
|
},
|
methods: {
|
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 => {
|
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 => {
|
this.list = response.data.records
|
this.total = response.data.total
|
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>
|
