- {{ item.name }}
+ {{ item.jgName }}/{{ item.zsbName }}/{{ item.name }}
{
this.areaVal = JSON.parse(localStorage.getItem("areaVal"));
this.zsbVal = JSON.parse(localStorage.getItem("zsbVal"));
- this.getAreaAllList();
+ this.deviceTypeVal = JSON.parse(localStorage.getItem("deviceTypeVal"));
+ this.getdeviceTypeAll();
});
},
methods: {
+ //选择设备类型
+ handleTypeDraw() {
+ this.typedrawer = true;
+ this.msgTitle = "设备类型实时数据";
+ this.getdeviceTypeAll();
+ },
+ //选择区域和主设备
+ handleAreaDraw() {
+ this.areadrawer = true;
+ this.msgTitle = "主设备实时数据";
+ this.getAreaAllList();
+ },
+ //获取所有的设备类型
+ getdeviceTypeAll() {
+ modevtypeListAllApi()
+ .then((res) => {
+ console.log(res);
+ this.deviceTypeList = res.data;
+ // 尝试从 localStorage 获取 areaVal
+ const storeddeviceTypeVal = localStorage.getItem("deviceTypeVal");
+ if (storeddeviceTypeVal) {
+ // 如果 localStorage 中有 areaVal，则将其解析为数字（假设 id 是数字）并赋值给 this.areaVal
+ this.areaVal = JSON.parse(storeddeviceTypeVal);
+ } else {
+ // 否则，使用 res.data[0].id
+ this.deviceTypeVal = res.data[0]?.id; // 使用可选链操作符避免 res.data[0] 为 undefined 的情况
+
+ // 同时，将新获取的 areaVal 存储到 localStorage 中
+ localStorage.setItem(
+ "deviceTypeVal",
+ JSON.stringify(this.deviceTypeVal)
+ );
+ }
+ this.getTypeAllList();
+ this.startIntervalIfNeededType();
+ this.stopInterval();
+ })
+ .catch((err) => {
+ console.log(err); //代码错误、请求失败捕获
+ });
+ },
+ handletypeChange(value) {
+ this.deviceTypeVal = value;
+ localStorage.removeItem("deviceTypeVal");
+ localStorage.setItem("deviceTypeVal", JSON.stringify(value));
+ this.jksbAllList = [];
+ this.getTypeAllList();
+ this.startIntervalIfNeededType();
+ this.stopInterval();
+ },
+ //根据类型获取所有数据
+ getTypeAllList() {
+ monitoringListAllApi({ typeId: this.deviceTypeVal })
+ .then((res) => {
+ console.log(res);
+ this.jksbAllList = res.data;
+ this.dataLoading = false;
+ })
+ .catch((err) => {
+ console.log(err); //代码错误、请求失败捕获
+ });
+ },
+ startIntervalIfNeededType() {
+ // 如果定时器尚未启动，则启动它
+ if (this.intervalIdType === null) {
+ this.intervalIdType = setInterval(this.getTypeAllList, 10000);
+ }
+ },
+ stopIntervalType() {
+ // 停止定时器
+ if (this.intervalIdType !== null) {
+ clearInterval(this.intervalIdType);
+ this.intervalIdType = null;
+ }
+ },
+
+ //按照设备类型导出
+ exporTypeData() {
+ window.location.href =
+ "/cac-api/nsensor/exportLatest?typeId=" + this.deviceTypeVal;
+ },
+
+ //按照主设备导出
+ exporZsbData() {
+ window.location.href =
+ "/cac-api/nsensor/exportLatest?zsbid=" + this.zsbVal;
+ },
+
//获取所有区间间隔
getAreaAllList() {
areaListAllApi()
@@ -254,9 +390,9 @@ export default {
// localStorage.setItem("zsbVal", JSON.stringify(res.data[0].id));
// 调用 getjcsbAllList 方法获取监测设备列表
this.getjcsbAllList();
-
// 启动定时器（如果尚未启动）
this.startIntervalIfNeeded();
+ this.stopIntervalType();
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
@@ -270,6 +406,8 @@ export default {
// 启动定时器（如果尚未启动）
this.startIntervalIfNeeded();
+
+ this.stopIntervalType();
},
//获取所有监测设备
getjcsbAllList() {
@@ -309,6 +447,7 @@ export default {
beforeDestroy() {
// 在组件销毁前停止定时请求
this.stopInterval();
+ this.stopIntervalType();
},
};
@@ -318,21 +457,26 @@ export default {
height: 100%;
flex-direction: column;
.realHead {
- height: 200px;
- background: rgba(8, 9, 36, 0.28);
- box-shadow: inset 0 4px 44px 0 #106cde;
+ // height: 200px;
+ // background: rgba(8, 9, 36, 0.28);
+ // box-shadow: inset 0 4px 44px 0 #106cde;
padding: 0px 12px;
- margin-bottom: 20px;
+ margin: 10px 0px;
+ display: flex;
+ align-items: center;
+ .el-drawer__wrapper {
+ .el-drawer__header {
+ margin-bottom: 14px;
+ }
+ }
+ .el-drawer {
+ height: 50% !important;
+ }
.greyBox {
- background: rgba(8, 9, 36, 0.28);
- -webkit-backdrop-filter: blur(10px);
- backdrop-filter: blur(10px);
- box-shadow: inset 0 4px 44px 0 #106cde;
- color: #fff;
- margin-top: 12px;
+ color: #000;
+ //margin-top: 12px;
margin-bottom: 12px;
padding: 8px 0px;
-
height: calc(100% - 40px);
.selectBox {
display: flex;
@@ -340,7 +484,7 @@ export default {
margin-bottom: 12px;
h4 {
- color: #fff;
+ color: #000;
margin-right: 12px;
font-weight: normal;
width: 100px;
@@ -352,21 +496,21 @@ export default {
display: flex;
flex-wrap: wrap;
flex: 1;
- color: #fff;
+ color: #000;
.el-radio {
margin-bottom: 12px;
margin-right: 12px;
- color: #fff;
+ color: #000;
}
.el-radio.is-bordered.is-checked {
- border-color: #66e6ff;
+ border-color: #337ab7;
}
.el-radio__input.is-checked + .el-radio__label {
- color: #66e6ff;
+ color: #337ab7;
}
.el-radio__input.is-checked .el-radio__inner {
- border-color: #66e6ff;
- background: #66e6ff;
+ border-color: #337ab7;
+ background: #337ab7;
}
}
.zsbBox {
@@ -385,13 +529,14 @@ export default {
}
}
.realcontain {
- height: calc(100% - 220px);
+ height: calc(100% - 0px);
background: rgba(8, 9, 36, 0.28);
box-shadow: inset 0 4px 44px 0 #106cde;
padding: 0px 12px;
- overflow: auto;
+
.loadingbox {
- height: 100%;
+ height: calc(100% - 64px);
+ overflow: auto;
}
.cardBox {
display: flex;
@@ -406,14 +551,15 @@ export default {
backdrop-filter: blur(10px);
box-shadow: inset 0 4px 44px 0 #106cde;
color: #fff;
- width: 280px;
+ width: 346px;
border: 1px solid #66e6ff;
.el-card__header {
padding: 4px 8px;
border-bottom: 1px solid #66e6ff;
.headTitle {
font-weight: bold;
- width: 180px;
+ width: 250px;
+ font-size: 14px;
display: inline-block;
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*超出部分省略号表示*/