|
@@ -1,122 +1,57 @@
|
|
|
<template>
|
|
|
- <el-drawer
|
|
|
- title="统计分析"
|
|
|
- :visible.sync="drawerVisible"
|
|
|
- :direction="direction"
|
|
|
- size="60%"
|
|
|
- >
|
|
|
- <div class="app-container" style="padding:0px 20px;margin:0px">
|
|
|
- <div class="head-search">
|
|
|
- <div>
|
|
|
- <label class="search_title">上报时间:</label>
|
|
|
- <el-date-picker
|
|
|
- class="search-box"
|
|
|
- v-model="timepart"
|
|
|
- type="datetimerange"
|
|
|
- align="right"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- unlink-panels
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="截止日期"
|
|
|
- :picker-options="pickerOptions"
|
|
|
- @change="refresh"
|
|
|
- :clearable="false"
|
|
|
- ></el-date-picker>
|
|
|
-
|
|
|
- <el-button class="search-box" type="info" @click="refresh">筛选</el-button>
|
|
|
- <!-- <el-button type="defaul" @click="clearFilter">重置</el-button> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-divider content-position="left">塔基</el-divider>
|
|
|
- <base-line-chart ref="angleChart" height="400px" :options="options" />
|
|
|
- <el-divider content-position="left">第一层塔筒</el-divider>
|
|
|
- <base-line-chart ref="angleChart" height="400px" :options="options" />
|
|
|
- <el-divider content-position="left">第二层塔筒</el-divider>
|
|
|
- <base-line-chart ref="angleChart" height="400px" :options="options" />
|
|
|
- <el-divider content-position="left">第三层塔筒</el-divider>
|
|
|
- <base-line-chart ref="angleChart" height="400px" :options="options" />
|
|
|
- <el-divider content-position="left">第四层塔筒</el-divider>
|
|
|
- <base-line-chart ref="angleChart" height="400px" :options="options" />
|
|
|
-
|
|
|
- </div>
|
|
|
+ <el-drawer title="设备信息" :visible.sync="drawerVisible" :direction="direction" size="60%">
|
|
|
+ <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="日志记录" name="first">
|
|
|
+ <el-table :data="data" style="width: 100%; margin-left: 20px">
|
|
|
+ <el-table-column prop="mac" label="基站mac地址" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="lable" label="标签" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="time" label="标签上报时间" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="addTime" label="上报时间" align="center" min-width="160"></el-table-column>
|
|
|
+ <el-table-column prop="rssi" label="心跳" align="center" min-width="160"></el-table-column>
|
|
|
|
|
|
+ </el-table>
|
|
|
+ <el-pagination background class="pagination-container" @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange" :current-page="paginate.current" :page-sizes="paginate.sizes"
|
|
|
+ :page-size="paginate.limit" :layout="paginate.layout" :total="paginate.total" />
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ </el-tabs>
|
|
|
+ <checkdetail :checkDetailVisible="checkDetailVisible" :record="detail" @sendVal="closeDrawer"></checkdetail>
|
|
|
</el-drawer>
|
|
|
+
|
|
|
</template>
|
|
|
<script>
|
|
|
-import BaseLineChart from '@/components/Charts/BaseLineChart';
|
|
|
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
|
|
|
+import checkdetail from './detail.vue';
|
|
|
export default {
|
|
|
- components: { BaseLineChart },
|
|
|
- props: ["detailVisible", "data"],
|
|
|
+ components: { checkdetail },
|
|
|
+ props: ["detailVisible", "record"],
|
|
|
+ mixins: [rlListOperate],
|
|
|
data() {
|
|
|
return {
|
|
|
+ url: 'getRecordByTag',
|
|
|
drawer: false,
|
|
|
+ data: [],
|
|
|
direction: "rtl",
|
|
|
activeName: "first",
|
|
|
- options: {},
|
|
|
- xData: [],
|
|
|
- chartData: [], // 扭矩数据
|
|
|
- pressData: [], // 压力数据
|
|
|
- openValue: 25, //
|
|
|
- recoverValue: 8, //
|
|
|
- timepart: null,
|
|
|
- pickerOptions: {
|
|
|
- shortcuts: [{
|
|
|
- text: '昨天',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date(new Date().toLocaleDateString());
|
|
|
- const start = new Date(new Date().toLocaleDateString());
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- },{
|
|
|
- text: '今天',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date(new Date().toLocaleDateString());
|
|
|
- const start = new Date(new Date().toLocaleDateString());
|
|
|
- end.setTime(start.getTime() + 3600 * 1000 * 24);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- },{
|
|
|
- text: '最近一周',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date(new Date().toLocaleDateString());
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '最近一个月',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date(new Date().toLocaleDateString());
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '最近三个月',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date(new Date().toLocaleDateString());
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }]
|
|
|
- },
|
|
|
+ detail: '',
|
|
|
+ checkDetailVisible: false,
|
|
|
+ title: ''
|
|
|
};
|
|
|
},
|
|
|
- created() {
|
|
|
- // 初始查询日期
|
|
|
- var start = new Date(new Date().toLocaleDateString());
|
|
|
- var end = new Date(new Date().toLocaleDateString());
|
|
|
- start.setTime(end.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
- this.timepart = [start, end]
|
|
|
- // 获取配置
|
|
|
- // this.getDeviceInfo()
|
|
|
- },
|
|
|
methods: {
|
|
|
+
|
|
|
handleClick(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
+ // console.log(tab, event);
|
|
|
+ },
|
|
|
+ closeDrawer() {
|
|
|
+ this.checkDetailVisible = false
|
|
|
+ },
|
|
|
+ handleDetail(row, rowtype) {
|
|
|
+
|
|
|
+ row.rowtype = rowtype;
|
|
|
+ this.detail = row;
|
|
|
+ this.checkDetailVisible = true;
|
|
|
},
|
|
|
tableRowClassName({ row, rowIndex }) {
|
|
|
if (rowIndex === 1) {
|
|
@@ -126,145 +61,6 @@ export default {
|
|
|
}
|
|
|
return "";
|
|
|
},
|
|
|
- /**
|
|
|
- * 初始化数据
|
|
|
- */
|
|
|
- initData() {
|
|
|
- this.options = {}
|
|
|
- this.xData = []
|
|
|
- this.pressData = []
|
|
|
- this.chartData = []
|
|
|
- let data=[
|
|
|
- {"pressure":30,"torque":29,"time":"2022-04-23 00:28:50"},
|
|
|
- {"pressure":15,"torque":20,"time":"2022-04-24 00:28:50"},
|
|
|
- {"pressure":19,"torque":14,"time":"2022-04-25 00:28:50"},
|
|
|
- {"pressure":30,"torque":35,"time":"2022-04-26 00:28:50"},
|
|
|
- {"pressure":22,"torque":29,"time":"2022-04-27 00:28:50"},
|
|
|
- {"pressure":25,"torque":24,"time":"2022-04-28 00:28:50"},
|
|
|
- {"pressure":30,"torque":13,"time":"2022-04-29 00:28:50"},
|
|
|
- {"pressure":12,"torque":18,"time":"2022-04-30 00:28:50"},
|
|
|
- {"pressure":30,"torque":31,"time":"2022-05-01 00:28:50"},
|
|
|
- {"pressure":30,"torque":22,"time":"2022-05-02 00:28:50"},
|
|
|
- {"pressure":11,"torque":23,"time":"2022-05-03 00:28:50"},
|
|
|
- {"pressure":30,"torque":24,"time":"2022-05-04 00:28:50"},
|
|
|
- {"pressure":30,"torque":29,"time":"2022-05-05 00:28:50"},
|
|
|
- {"pressure":24,"torque":29,"time":"2022-05-06 00:28:50"},
|
|
|
- {"pressure":30,"torque":26,"time":"2022-05-07 00:28:50"},
|
|
|
- {"pressure":24,"torque":11,"time":"2022-05-08 00:28:50"},
|
|
|
- {"pressure":7,"torque":29,"time":"2022-05-09 00:28:50"},
|
|
|
- {"pressure":11,"torque":9,"time":"2022-05-10 00:28:50"},
|
|
|
- {"pressure":17,"torque":12,"time":"2022-05-11 00:28:50"},
|
|
|
-
|
|
|
- ]
|
|
|
- data.forEach(item => {
|
|
|
- this.xData.push(item.time)
|
|
|
- this.pressData.push(item.pressure)
|
|
|
- this.chartData.push(item.torque)
|
|
|
-
|
|
|
- })
|
|
|
- this.getOptions()
|
|
|
- },
|
|
|
- /**
|
|
|
- * 刷新
|
|
|
- */
|
|
|
- refresh(){
|
|
|
- this.getData(this.assetNo)
|
|
|
- this.getDeviceInfo()
|
|
|
- },
|
|
|
- /**
|
|
|
- * 图表配置
|
|
|
- */
|
|
|
- getOptions() {
|
|
|
- var itemStyle = {
|
|
|
- opacity: 0.8,
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowOffsetY: 0,
|
|
|
- shadowColor: 'rgba(0,0,0,0.7)'
|
|
|
- };
|
|
|
- this.options = {
|
|
|
- color: ['#80F1BE', '#dd4444'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'cross'
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- nameTextStyle: {
|
|
|
- color: "#fff"
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: { color: "#70b9eb" }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "#fff"
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- type: "category",
|
|
|
- data: this.xData
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- nameTextStyle: {
|
|
|
- color: "#fff"
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: { color: "#70b9eb" }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "#fff"
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // dataZoom: [{
|
|
|
- // startValue: this.xData[0]
|
|
|
- // }, {
|
|
|
- // type: 'inside'
|
|
|
- // }],
|
|
|
- visualMap: {
|
|
|
- show: false,
|
|
|
- min: 0,
|
|
|
- max: 180,
|
|
|
- inRange: {
|
|
|
- // symbolSize: [10, 20]
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '扭矩',
|
|
|
- type: 'scatter',
|
|
|
- symbolSize: 15,
|
|
|
- itemStyle: itemStyle,
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#0f0'
|
|
|
- },
|
|
|
- data: [{
|
|
|
- yAxis: 20,
|
|
|
- }]
|
|
|
- },
|
|
|
- data: this.chartData,
|
|
|
- },{
|
|
|
- name: '压力',
|
|
|
- type: 'scatter',
|
|
|
- symbolSize: 15,
|
|
|
- itemStyle: itemStyle,
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#c00'
|
|
|
- },
|
|
|
- data: [{
|
|
|
- yAxis: this.openValue
|
|
|
- }]
|
|
|
- },
|
|
|
- data: this.pressData,
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
},
|
|
|
computed: {
|
|
|
drawerVisible: {
|
|
@@ -272,8 +68,11 @@ export default {
|
|
|
this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
|
|
|
},
|
|
|
get() {
|
|
|
- if(this.detailVisible){
|
|
|
- this.initData()
|
|
|
+ if (this.detailVisible) {
|
|
|
+ //获取维护记录
|
|
|
+ this.queryParam.lable = this.record.lable;
|
|
|
+ this.queryParam.mac = this.record.mac;
|
|
|
+ this.getList()
|
|
|
}
|
|
|
return this.detailVisible; // 表示获取父组件的值
|
|
|
},
|
|
@@ -282,19 +81,23 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
-::v-deep .el-drawer{
|
|
|
- overflow: scroll !important;
|
|
|
+.back-color {
|
|
|
+ background: black;
|
|
|
}
|
|
|
+
|
|
|
.detail-item {
|
|
|
width: 100%;
|
|
|
padding: 15px 0px;
|
|
|
list-style-type: none;
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
.item {
|
|
|
font-size: 14px;
|
|
|
- color: black;
|
|
|
+ color: #FFF;
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
+
|
|
|
.el-table .warning-row {
|
|
|
background: oldlace !important;
|
|
|
}
|
|
@@ -302,8 +105,9 @@ export default {
|
|
|
.el-table .success-row {
|
|
|
background: #f0f9eb !important;
|
|
|
}
|
|
|
-.search_title {
|
|
|
- font-size: 12px;
|
|
|
- color: #6a6a6a;
|
|
|
+
|
|
|
+.pagination-container {
|
|
|
+ padding-left: 25px;
|
|
|
+ padding-right: 25px;
|
|
|
}
|
|
|
</style>
|