|
@ -5,9 +5,22 @@ |
|
|
<type-tree @defaultCheck="defaultCheck" @nodeCheck="nodeCheck" :filter="false" :show_checkbox="true" :default_check_first="true"></type-tree> |
|
|
<type-tree @defaultCheck="defaultCheck" @nodeCheck="nodeCheck" :filter="false" :show_checkbox="true" :default_check_first="true"></type-tree> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :span="20"> |
|
|
<el-col :span="20"> |
|
|
<el-button @click="handleExport">导出</el-button> |
|
|
<el-row> |
|
|
|
|
|
<el-date-picker |
|
|
|
|
|
style="float: right" |
|
|
|
|
|
v-model="dateRange" |
|
|
|
|
|
size="mini" |
|
|
|
|
|
@change="handleRangePickerChange" |
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
|
|
type="daterange" |
|
|
|
|
|
range-separator="至" |
|
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
|
end-placeholder="结束日期"> |
|
|
|
|
|
</el-date-picker> |
|
|
|
|
|
<el-button type="primary" style="float: right;margin-right: 10px" size="mini" @click="handleExport">导出</el-button> |
|
|
|
|
|
</el-row> |
|
|
<line-chart height="30vh" :show-legend="true" :chart-data="chartData"></line-chart> |
|
|
<line-chart height="30vh" :show-legend="true" :chart-data="chartData"></line-chart> |
|
|
<el-table :data="tableData" height="45vh" style="width: 100%" @sort-change="handleSortChange"> |
|
|
<el-table :data="tableData" height="42vh" style="width: 100%" @sort-change="handleSortChange"> |
|
|
<el-table-column prop="deviceName" label="设备名称" width="200"></el-table-column> |
|
|
<el-table-column prop="deviceName" label="设备名称" width="200"></el-table-column> |
|
|
<el-table-column prop="stakeMark" label="桩号"></el-table-column> |
|
|
<el-table-column prop="stakeMark" label="桩号"></el-table-column> |
|
|
<el-table-column prop="direction" label="方向"> |
|
|
<el-table-column prop="direction" label="方向"> |
|
@ -159,6 +172,7 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import {formatDate,addOrSubtractDays,getDaysRange} from "@/utils/dateUtils"; |
|
|
import TypeTree from "@/views/deviceManage/typeTree"; |
|
|
import TypeTree from "@/views/deviceManage/typeTree"; |
|
|
import LineChart from "@/views/deviceManage/lineChart"; |
|
|
import LineChart from "@/views/deviceManage/lineChart"; |
|
|
import indexLine from "@/views/deviceManage/deviceOnline/indexLine"; |
|
|
import indexLine from "@/views/deviceManage/deviceOnline/indexLine"; |
|
@ -184,6 +198,7 @@ export default { |
|
|
deviceStateOptions: deviceState, |
|
|
deviceStateOptions: deviceState, |
|
|
logVisible:false, |
|
|
logVisible:false, |
|
|
deviceType:typeTree, |
|
|
deviceType:typeTree, |
|
|
|
|
|
dateRange:[], |
|
|
// 查询参数 |
|
|
// 查询参数 |
|
|
queryParams: { |
|
|
queryParams: { |
|
|
pageNum: 1, |
|
|
pageNum: 1, |
|
@ -208,7 +223,9 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
|
|
|
let rangeDate = getDaysRange(-30); |
|
|
|
|
|
this.dateRange[0] = rangeDate.start; |
|
|
|
|
|
this.dateRange[1] = rangeDate.end; |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
defaultCheck(types){ |
|
|
defaultCheck(types){ |
|
@ -228,6 +245,9 @@ export default { |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
deviceOnlineChart(){ |
|
|
deviceOnlineChart(){ |
|
|
|
|
|
if(this.dateRange.length > 0){ |
|
|
|
|
|
this.queryParams.startTime = this.dateRange[0]; |
|
|
|
|
|
this.queryParams.time = this.dateRange[1]; |
|
|
deviceOnlineChart(this.queryParams).then(response => { |
|
|
deviceOnlineChart(this.queryParams).then(response => { |
|
|
let data = response.data; |
|
|
let data = response.data; |
|
|
let xData ,yData = []; |
|
|
let xData ,yData = []; |
|
@ -248,10 +268,13 @@ export default { |
|
|
this.chartData.xData = xData; |
|
|
this.chartData.xData = xData; |
|
|
this.chartData.yData = yData; |
|
|
this.chartData.yData = yData; |
|
|
}) |
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
seeLog(deviceId){ |
|
|
seeLog(deviceId){ |
|
|
this.logVisible = true; |
|
|
this.logVisible = true; |
|
|
this.initQueryDate(); |
|
|
this.initQueryDate(); |
|
|
|
|
|
this.logQueryParams.queryDate=formatDate(new Date(),'yyyy-MM-dd'); |
|
|
this.logQueryParams.deviceId = deviceId; |
|
|
this.logQueryParams.deviceId = deviceId; |
|
|
this.logQuery(); |
|
|
this.logQuery(); |
|
|
}, |
|
|
}, |
|
@ -262,7 +285,6 @@ export default { |
|
|
}, |
|
|
}, |
|
|
networkLogTable(){ |
|
|
networkLogTable(){ |
|
|
networkLogTable(this.logQueryParams).then(response => { |
|
|
networkLogTable(this.logQueryParams).then(response => { |
|
|
console.log(response) |
|
|
|
|
|
this.logTableData = response.rows; |
|
|
this.logTableData = response.rows; |
|
|
this.logTotal = response.total; |
|
|
this.logTotal = response.total; |
|
|
}) |
|
|
}) |
|
@ -284,30 +306,14 @@ export default { |
|
|
this.networkLogEcharts() |
|
|
this.networkLogEcharts() |
|
|
this.networkLogTable() |
|
|
this.networkLogTable() |
|
|
}, |
|
|
}, |
|
|
initQueryDate(){ |
|
|
|
|
|
const date = new Date(); |
|
|
|
|
|
this.logQueryParams.queryDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`; |
|
|
|
|
|
}, |
|
|
|
|
|
upDay(){ |
|
|
upDay(){ |
|
|
this.logQueryParams.queryDate = this.addOrSubtractDays(this.logQueryParams.queryDate, -1); |
|
|
this.logQueryParams.queryDate = addOrSubtractDays(this.logQueryParams.queryDate, -1); |
|
|
this.logQuery(); |
|
|
this.logQuery(); |
|
|
}, |
|
|
}, |
|
|
downDay(){ |
|
|
downDay(){ |
|
|
this.logQueryParams.queryDate = this.addOrSubtractDays(this.logQueryParams.queryDate, 1); |
|
|
this.logQueryParams.queryDate = addOrSubtractDays(this.logQueryParams.queryDate, 1); |
|
|
this.logQuery(); |
|
|
this.logQuery(); |
|
|
}, |
|
|
}, |
|
|
addOrSubtractDays(dateStr, numDays) { |
|
|
|
|
|
const parts = dateStr.split('-'); |
|
|
|
|
|
const year = parseInt(parts[0], 10); |
|
|
|
|
|
const month = parseInt(parts[1], 10) - 1; // 月份需要减1,因为Date对象月份是从0开始的 |
|
|
|
|
|
const day = parseInt(parts[2], 10); |
|
|
|
|
|
const date = new Date(year, month, day); |
|
|
|
|
|
date.setDate(date.getDate() + numDays); |
|
|
|
|
|
const yearFormatted = date.getFullYear(); |
|
|
|
|
|
const monthFormatted = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份加1,并格式化为两位数 |
|
|
|
|
|
const dayFormatted = date.getDate().toString().padStart(2, '0'); // 格式化为两位数 |
|
|
|
|
|
return `${yearFormatted}-${monthFormatted}-${dayFormatted}`; |
|
|
|
|
|
}, |
|
|
|
|
|
findType(typeCode) { |
|
|
findType(typeCode) { |
|
|
return this.deviceType.find(item => item.value == typeCode) |
|
|
return this.deviceType.find(item => item.value == typeCode) |
|
|
}, |
|
|
}, |
|
@ -316,6 +322,13 @@ export default { |
|
|
...this.queryParams |
|
|
...this.queryParams |
|
|
}, `设备在线率${new Date().getTime()}.xlsx`) |
|
|
}, `设备在线率${new Date().getTime()}.xlsx`) |
|
|
}, |
|
|
}, |
|
|
|
|
|
handleRangePickerChange(){ |
|
|
|
|
|
if(this.dateRange.length > 0){ |
|
|
|
|
|
this.queryParams.startTime = this.dateRange[0]; |
|
|
|
|
|
this.queryParams.time = this.dateRange[1]; |
|
|
|
|
|
this.deviceOnlineChart(); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|