chenJinxu
/
TelpoH5FrontendWeb
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

fix 

- c1后台设备功耗查看页面
    - 修复 设备状态时间戳转换错误的问题
test
chenJinxu 10 місяці тому
джерело
9f189fcbfd
коміт
26f5095a19
3 змінених файлів з 402 додано та 320 видалено
Об'єднаний перегляд
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -1
      README.md
  2. +1
    -1
      src/config/models.js
  3. +393
    -318
      src/views/gps-card-frontend/device-power/index.vue

+ 8
- 1
README.md Переглянути файл

@@ -896,4 +896,11 @@ update
`2024.1.3` `2024.1.3`
fix fix
- 心理监测详情 - 心理监测详情
- 修复 心理切换按钮导致 ”今天“ 日期参数异常的问题
- 修复 心理切换按钮导致 ”今天“ 日期参数异常的问题


## v1.0.115
`2024.1.4`
fix
- c1后台设备功耗查看页面
- 修复 设备状态时间戳转换错误的问题

+ 1
- 1
src/config/models.js Переглянути файл

@@ -5,7 +5,7 @@
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description: * @description:
*/ */
export const VERSION_MODEL = '1.0.115F'; //版本号
export const VERSION_MODEL = '1.0.116F'; //版本号
export const IMAGE_URL = { export const IMAGE_URL = {
production: 'http://zfb.ssjlai.com/web/', production: 'http://zfb.ssjlai.com/web/',
test: 'http://zfb.ssjlai.com/web/', test: 'http://zfb.ssjlai.com/web/',


+ 393
- 318
src/views/gps-card-frontend/device-power/index.vue Переглянути файл

@@ -6,362 +6,437 @@
* @description: * @description:
--> -->
<template> <template>
<div class="device-power">
<van-nav-bar :left-arrow="true" @click-left="onNavBack">
<template #left>
<van-icon name="arrow-left" size="24" style="padding: 0"/>
<span>返回</span>
</template>
</van-nav-bar>
<div class="top">
<p>查看数据</p>
</div>
<div class="action">
<div class="left">
<van-dropdown-menu>
<van-dropdown-item style="min-width: 150px" v-model="dayValue" :options="dayOption" @change="onChange" />
</van-dropdown-menu>
</div>
<div class="right">
<div class="btn-container">
<van-button :class="['btn', {active: btnActive === item.index }]" @click="onClickBtn(item.index)" v-for="(item, index) in btnList" :key="index">{{ item.text }}</van-button>
</div>
</div>
</div>
<div class="details-container" v-if="btnActive === 0 && data.length > 0 || tableData.length > 0 && btnActive === 1">
<p class="last-time" v-show="btnActive === 0 && params.title === 'Offline'">最近一次离线时间：{{ lastTime }}</p>
<Echart :option="chartOption" v-show="btnActive === 0"/>
<Table :columns="titleList" :data="tableData" v-show="btnActive === 1"/>
</div>
<div class="details-container no-data" v-else>
<van-empty image="error" description="暂无数据" />
<div class="device-power">
<van-nav-bar :left-arrow="true" @click-left="onNavBack">
<template #left>
<van-icon name="arrow-left" size="24" style="padding: 0" />
<span>返回</span>
</template>
</van-nav-bar>
<div class="top">
<p>查看数据</p>
</div>
<div class="action">
<div class="left">
<van-dropdown-menu>
<van-dropdown-item
style="min-width: 150px"
v-model="dayValue"
:options="dayOption"
@change="onChange"
/>
</van-dropdown-menu>
</div>
<div class="right">
<div class="btn-container">
<van-button
:class="['btn', { active: btnActive === item.index }]"
@click="onClickBtn(item.index)"
v-for="(item, index) in btnList"
:key="index"
>{{ item.text }}</van-button
>
</div> </div>
</div>
</div>
<div
class="details-container"
v-if="
(btnActive === 0 && data.length > 0) ||
(tableData.length > 0 && btnActive === 1)
"
>
<p
class="last-time"
v-show="btnActive === 0 && params.title === 'Offline'"
>
最近一次离线时间：{{ lastTime }}
</p>
<Echart :option="chartOption" v-show="btnActive === 0" />
<Table :columns="titleList" :data="tableData" v-show="btnActive === 1" />
</div> </div>
<div class="details-container no-data" v-else>
<van-empty image="error" description="暂无数据" />
</div>
</div>
</template> </template>


<script> <script>
import Echart from '@/components/echarts';
import Table from '@/components/tables';
import APIIot from '@/api/iot';
import Echart from "@/components/echarts";
import Table from "@/components/tables";
import APIIot from "@/api/iot";
import { DEVICE_POWER } from "@/config/models"; import { DEVICE_POWER } from "@/config/models";
import axios from 'axios';
import axios from "axios";
export default { export default {
name:'',
components: { Echart,Table },
data(){
return {
dayValue: 7,
dayOption: [
{ text: '7天', value: 7 },
{ text: '30天', value: 30 },
],
btnList: [
{ text: '图表', index: 0 },
{ text: '表格', index: 1 },
],
btnActive: 0,
chartOption: {},
titleList: [
{ title: '时间', width: '40%', key: 'time'},
{ title: '原始值', width: '60%', key: 'value' },
],
tableData: [],
echarts: {
title: '',
type: '',
},
data: [],
xAxisData: [],
filterData: [],
yAxisObject: {},
lastTime: '',
params: {}
}
name: "",
components: { Echart, Table },
data() {
return {
dayValue: 7,
dayOption: [
{ text: "7天", value: 7 },
{ text: "30天", value: 30 },
],
btnList: [
{ text: "图表", index: 0 },
{ text: "表格", index: 1 },
],
btnActive: 0,
chartOption: {},
titleList: [
{ title: "时间", width: "40%", key: "time" },
{ title: "原始值", width: "60%", key: "value" },
],
tableData: [],
echarts: {
title: "",
type: "",
},
data: [],
xAxisData: [],
filterData: [],
yAxisObject: {},
lastTime: "",
params: {},
};
}, },
created() { created() {
this.loadParams(); this.loadParams();
}, },
mounted() {
},
mounted() {},
methods: { methods: {
loadParams() { loadParams() {
let params = this.$route.query;
this.params = {...params};
if(params) {
this.echarts.title = DEVICE_POWER[params.title].title;
this.echarts.type = DEVICE_POWER[params.title].value;
// 获取接口数据
this.getData();
} else {
// todo跳转404页面
}
let params = this.$route.query;
this.params = { ...params };
if (params) {
this.echarts.title = DEVICE_POWER[params.title].title;
this.echarts.type = DEVICE_POWER[params.title].value;
// 获取接口数据
this.getData();
} else {
// todo跳转404页面
}
}, },
getData() { getData() {
this.$toast.loading();
let reqBody = {
days: String(this.dayValue),
identifier: this.echarts.type,
imei: /* '861281060086216' *//* '862838050029479' */this.$store.getters.imei
};
// 线上地址
let baseUrl = process.env.VUE_APP_BASE_API;
let reqUrl = `${baseUrl}iotservice/getdeviceinfo`;
// 开启代理如下
/* let reqUrl = `/api/id/getdeviceinfo`; */
axios.post(`${reqUrl}`, reqBody).then(res => {
let data = res.data;
if(data.code === 200) {
if(this.echarts.type === 'BatteryLevel' || this.echarts.type === 'status') {
this.filterData = data[this.echarts.type].data/* .list.propertyInfo */;
} else if(this.echarts.type === 'offline') {
this.filterData = data.Offline.data;
}
if(this.echarts.type === 'status') {
// 信号强度
this.yAxisObject = {
type: "value",
/* max: 4,
this.$toast.loading();
let reqBody = {
days: String(this.dayValue),
identifier: this.echarts.type,
imei: /* '861281060086216' */ /* '862838050029479' */ this.$store
.getters.imei,
};
// 线上地址
let baseUrl = process.env.VUE_APP_BASE_API;
let reqUrl = `${baseUrl}iotservice/getdeviceinfo`;
// 开启代理如下
/* let reqUrl = `/api/id/getdeviceinfo`; */
axios
.post(`${reqUrl}`, reqBody)
.then((res) => {
let data = res.data;
if (data.code === 200) {
if (
this.echarts.type === "BatteryLevel" ||
this.echarts.type === "status"
) {
this.filterData =
data[this.echarts.type].data /* .list.propertyInfo */;
console.log("this.filterData", this.filterData);
} else if (this.echarts.type === "offline") {
this.filterData = data.Offline.data;
}
if (this.echarts.type === "status") {
// 信号强度
this.yAxisObject = {
type: "value",
/* max: 4,
min: 0, min: 0,
interval: 1, interval: 1,
splitNumber : 1, splitNumber : 1,
boundaryGap : [ '5%', '5%' ], */ boundaryGap : [ '5%', '5%' ], */
}
this.titleList = [
{ title: '时间', width: '40%', key: 'time'},
{ title: '原始值', width: '60%', key: 'value' },
];
let propertyInfo = this.filterData.map(item => {
return item.list.propertyInfo;
});
let result = [];
for (let i = 0; i < propertyInfo.length; i++) {
// 循环对象中的数组
result = [].concat(...propertyInfo)
}
// 表格则要显示全部数据
this.tableData = result.map(item => {
return {
value: item.value,
time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm")
}
}).reverse();
// 图表筛选过滤只显示 rssi <= 2的数据
this.data = result.map(item => {
// 序列化json
let json = JSON.parse(item.value);
return {
value: json.rssi,
time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm"),
type: 'status'
}
}).filter(f => {
return f.value <=2;
})
} else if (this.echarts.type === 'offline') {
// 设备离线次数
this.titleList = [
{ title: '时间', width: '40%', key: 'time'},
{ title: '最近离线时间', width: '60%', key: 'lastTime' },
{ title: '离线次数', width: '40%', key: 'value' },
],
this.yAxisObject = {
type: "value",
/* max: 10,
};
this.titleList = [
{ title: "时间", width: "40%", key: "time" },
{ title: "原始值", width: "60%", key: "value" },
];
let propertyInfo = this.filterData.map((item) => {
return item.list.propertyInfo;
});
let result = [];
for (let i = 0; i < propertyInfo.length; i++) {
// 循环对象中的数组
result = [].concat(...propertyInfo);
}
// 表格则要显示全部数据
this.tableData = result
.map((item) => {
return {
value: item.value,
time: this.$dayjs(this.$dayjs(Number(item.time))).format(
"YYYY/MM/DD HH:mm"
),
};
})
.reverse();
// 图表筛选过滤只显示 rssi <= 2的数据
this.data = result
.map((item) => {
// 序列化json
let json = JSON.parse(item.value);
return {
value: json.rssi,
time: this.$dayjs(this.$dayjs(Number(item.time))).format(
"YYYY/MM/DD HH:mm"
),
type: "status",
};
})
.filter((f) => {
return f.value <= 2;
});
} else if (this.echarts.type === "offline") {
// 设备离线次数
(this.titleList = [
{ title: "时间", width: "40%", key: "time" },
{ title: "最近离线时间", width: "60%", key: "lastTime" },
{ title: "离线次数", width: "40%", key: "value" },
]),
(this.yAxisObject = {
type: "value",
/* max: 10,
min: 0, min: 0,
interval: 1, interval: 1,
splitNumber : 1, splitNumber : 1,
boundaryGap : [ '5%', '5%' ], */ boundaryGap : [ '5%', '5%' ], */
};
this.data = this.filterData.sort((date1, date2) => {
// 日期升序排序
return date2.time < date1.time ? 1 : -1
}).map(item => {
return {
/* value: item.value, */
time: item.createTime.slice(0,10),
day: item.createTime.slice(0,10),
type: 'offline',
lastTime: item.createTime.replace('T', ' ')
}
}).reduce((accumulator, currentValue) => {
if (accumulator.find(obj => obj.day === currentValue.day)) {
accumulator.find(obj => obj.day === currentValue.day).value++;
} else {
accumulator.push({ day: currentValue.day, time: currentValue.time, value: 1, type: 'offline', lastTime: currentValue.lastTime });
}
return accumulator;
}, []).sort(function(date1, date2) {
// 日期升序排序
return date2.time < date1.time ? 1 : -1
});

this.data = this.filterData
.sort((date1, date2) => {
// 日期升序排序
return date2.time < date1.time ? 1 : -1;
})
.map((item) => {
return {
/* value: item.value, */
time: item.createTime.slice(0, 10),
day: item.createTime.slice(0, 10),
type: "offline",
lastTime: item.createTime.replace("T", " "),
};
})
.reduce((accumulator, currentValue) => {
if (accumulator.find((obj) => obj.day === currentValue.day)) {
accumulator.find((obj) => obj.day === currentValue.day)
.value++;
} else {
accumulator.push({
day: currentValue.day,
time: currentValue.time,
value: 1,
type: "offline",
lastTime: currentValue.lastTime,
}); });
console.log("data", this.data);
console.log(this.data);
this.lastTime = this.data && this.data[this.data.length - 1].lastTime || '';
}
return accumulator;
}, [])
.sort(function (date1, date2) {
// 日期升序排序
return date2.time < date1.time ? 1 : -1;
});
this.lastTime =
(this.data && this.data[this.data.length - 1].lastTime) || "";


this.tableData = this.filterData/* .sort((date1, date2) => {
this.tableData = this.filterData /* .sort((date1, date2) => {
// 日期升序排序 // 日期升序排序
return date2.time > date1.time ? 1 : -1 return date2.time > date1.time ? 1 : -1
}). */.map(item => {
return {
/* value: item.value, */
time: item.createTime.slice(0,10),
day: item.createTime.slice(0,10),
lastTime: item.createTime.replace('T', ' ')
}
}).reduce((accumulator, currentValue) => {
// 筛选遍历数据，获取相同日期的数据，计算出现的次数后重新累加组合到一个新的数组里面
if (accumulator.find(obj => obj.day === currentValue.day)) {
accumulator.find(obj => obj.day === currentValue.day).value++;
} else {
accumulator.push({ day: currentValue.day, time: currentValue.time, value: 1, lastTime: currentValue.lastTime });
}
return accumulator;
}, []).sort(function(date1, date2) {
// 日期升序排序
return date2.time < date1.time ? 1 : -1
}).reverse();
} else {
this.titleList = [
{ title: '时间', width: '40%', key: 'time'},
{ title: '电量', width: '60%', key: 'value' },
],
this.yAxisObject = {
type: "value",
max: 100,
min: 0,
interval: 20,
splitNumber : 1,
boundaryGap : [ '5%', '5%' ],
}
let propertyInfo = this.filterData.map(item => {
return item.list.propertyInfo;
});
let result = [];
for (let i = 0; i < propertyInfo.length; i++) {
// 循环对象中的数组
result = [].concat(...propertyInfo)
}
this.data = result.map(item => {
return {
value: item.value,
time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm"),
}
}).sort((date1, date2) => {
// 日期升序排序
return date2.time < date1.time ? 1 : -1
}). */
.map((item) => {
return {
/* value: item.value, */
time: item.createTime.slice(0, 10),
day: item.createTime.slice(0, 10),
lastTime: item.createTime.replace("T", " "),
};
})
.reduce((accumulator, currentValue) => {
// 筛选遍历数据，获取相同日期的数据，计算出现的次数后重新累加组合到一个新的数组里面
if (accumulator.find((obj) => obj.day === currentValue.day)) {
accumulator.find((obj) => obj.day === currentValue.day)
.value++;
} else {
accumulator.push({
day: currentValue.day,
time: currentValue.time,
value: 1,
lastTime: currentValue.lastTime,
}); });
this.tableData = result.map(item => {
return {
value: item.value,
time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm")
}
}).sort((date1, date2) => {
// 日期升序排序
return date2.time < date1.time ? 1 : -1
}).reverse();
}
this.xAxisData = this.data.map(item => {
return this.$dayjs(item.time).format("MM/DD");
}
return accumulator;
}, [])
.sort(function (date1, date2) {
// 日期升序排序
return date2.time < date1.time ? 1 : -1;
})
.reverse();
} else {
(this.titleList = [
{ title: "时间", width: "40%", key: "time" },
{ title: "电量", width: "60%", key: "value" },
]),
(this.yAxisObject = {
type: "value",
max: 100,
min: 0,
interval: 20,
splitNumber: 1,
boundaryGap: ["5%", "5%"],
});
let propertyInfo = this.filterData.map((item) => {
return item.list.propertyInfo;
});
let result = [];
for (let i = 0; i < propertyInfo.length; i++) {
// 循环对象中的数组
result = [].concat(...propertyInfo);
}
this.data = result
.map((item) => {
return {
value: item.value,
time: this.$dayjs(this.$dayjs(Number(item.time))).format(
"YYYY/MM/DD HH:mm"
),
};
}) })
this.chartOption = {
title: {
text: this.echarts.title,
textStyle: {
fontSize: 16
},
},
xAxis: {
type: "category",
axisLine: {
show: false
},
textStyle: {
fontSize: 10
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: "#ddd",
width: 2
}
},
nameLocation: 'center',
axisLabel: {
show: true,
fontSize: 12,
showMinLabel: true, //显示最小值
showMaxLabel: true, //显示最大值
},
data: this.xAxisData
},
yAxis: this.yAxisObject,
series: [
{
type: "line",
data: this.data,
/* areaStyle: {}, */
},
],
dataZoom: [
{
start: 0,
end: 100,
textStyle: {
color: "#FFF",
fontSize: 14
},
show: true,
height: 20,
bottom: 5,
handleStyle: {
borderWidth: 1,
borderCap: "square"
}
}
],
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 14,
align: "center"
},
formatter: function(params) {
return `${params[0].marker}${params[0].data.time}</br>
${ params[0].data.type === 'offline' ? '最近离线时间:' + params[0].data.lastTime : ''}</br>
${ params[0].data.type === 'offline' ? '离线次数:' + params[0].data.value + '次' :
params[0].data.type === 'status' ? 'rssi值:' + params[0].data.value :
'电量:' + params[0].data.value}`
}
},
}
.sort((date1, date2) => {
// 日期升序排序
return date2.time < date1.time ? 1 : -1;
});
console.log("解析后的数据", this.data);
this.tableData = result
.map((item) => {
return {
value: item.value,
time: this.$dayjs(this.$dayjs(Number(item.time))).format(
"YYYY/MM/DD HH:mm"
),
};
})
.sort((date1, date2) => {
// 日期升序排序
return date2.time < date1.time ? 1 : -1;
})
.reverse();
} }
}).catch(() => {

}).finally(() => {
this.$toast.clear();
this.xAxisData = this.data.map((item) => {
return this.$dayjs(item.time).format("MM/DD");
});
this.chartOption = {
title: {
text: this.echarts.title,
textStyle: {
fontSize: 16,
},
},
xAxis: {
type: "category",
axisLine: {
show: false,
},
textStyle: {
fontSize: 10,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "#ddd",
width: 2,
},
},
nameLocation: "center",
axisLabel: {
show: true,
fontSize: 12,
showMinLabel: true, //显示最小值
showMaxLabel: true, //显示最大值
},
data: this.xAxisData,
},
yAxis: this.yAxisObject,
series: [
{
type: "line",
data: this.data,
/* areaStyle: {}, */
},
],
dataZoom: [
{
start: 0,
end: 100,
textStyle: {
color: "#FFF",
fontSize: 14,
},
show: true,
height: 20,
bottom: 5,
handleStyle: {
borderWidth: 1,
borderCap: "square",
},
},
],
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 14,
align: "center",
},
formatter: function (params) {
return `${params[0].marker}${params[0].data.time}</br>
${
params[0].data.type === "offline"
? "最近离线时间:" + params[0].data.lastTime
: ""
}</br>
${
params[0].data.type === "offline"
? "离线次数:" + params[0].data.value + "次"
: params[0].data.type === "status"
? "rssi值:" + params[0].data.value
: "电量:" + params[0].data.value
}`;
},
},
};
}
}) })
.catch(() => {})
.finally(() => {
this.$toast.clear();
});
}, },
onClickBtn(value) { onClickBtn(value) {
this.btnActive = value;
this.getData();
this.btnActive = value;
this.getData();
}, },
onChange(value) { onChange(value) {
this.dayValue = value;
this.getData();
this.dayValue = value;
this.getData();
}, },
onNavBack() { onNavBack() {
this.$router.push({
name: 'deviceSetting'
})
}
}
}
this.$router.push({
name: "deviceSetting",
});
},
},
};
</script> </script>


<style scoped lang="scss"> <style scoped lang="scss">
@import "./index.scss";
@import "./index.scss";
</style> </style>

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти