Merge branch 'main' of https://git.jsspisoft.com/ry-das
This commit is contained in:
commit
73567cca71
@ -7,6 +7,7 @@ import com.das.common.result.R;
|
||||
import com.das.common.utils.PageDataInfo;
|
||||
import com.das.modules.equipment.domain.dto.SysEnumTypesDto;
|
||||
import com.das.modules.equipment.domain.dto.SysEnumValuesDto;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumDictVo;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumTypesVo;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumValuesVo;
|
||||
import com.das.modules.equipment.service.SysEnumService;
|
||||
@ -153,6 +154,17 @@ public class SysEnumController {
|
||||
sysEnumService.deleteEnumTypes(sysEnumTypesDto);
|
||||
return R.success();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取枚举字典
|
||||
* @return 枚举值字典
|
||||
*/
|
||||
@PostMapping("/getEnumDict")
|
||||
public R<List<SysEnumDictVo>> getEnumDict() {
|
||||
|
||||
List<SysEnumDictVo> list = sysEnumService.getEnumDict();
|
||||
return R.success(list);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -0,0 +1,26 @@
|
||||
package com.das.modules.equipment.domain.vo;
|
||||
|
||||
import lombok.Data;
|
||||
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* 枚举值值字典
|
||||
*/
|
||||
@Data
|
||||
public class SysEnumDictVo {
|
||||
/**
|
||||
* 枚举类型名称
|
||||
*/
|
||||
private String name;
|
||||
/**
|
||||
* 枚举类型描述
|
||||
*/
|
||||
private String description;
|
||||
/**
|
||||
* 枚举类型值集合
|
||||
* key: 枚举值
|
||||
* value: 枚举值描述
|
||||
*/
|
||||
private Map<String,String> enumValues;
|
||||
}
|
@ -5,9 +5,10 @@ import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
|
||||
import lombok.Data;
|
||||
|
||||
import java.io.Serial;
|
||||
import java.io.Serializable;
|
||||
|
||||
@Data
|
||||
public class SysEnumValuesVo {
|
||||
public class SysEnumValuesVo implements Serializable {
|
||||
|
||||
@Serial
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
@ -3,6 +3,7 @@ package com.das.modules.equipment.service;
|
||||
import com.das.common.utils.PageDataInfo;
|
||||
import com.das.modules.equipment.domain.dto.SysEnumTypesDto;
|
||||
import com.das.modules.equipment.domain.dto.SysEnumValuesDto;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumDictVo;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumTypesVo;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumValuesVo;
|
||||
|
||||
@ -26,5 +27,9 @@ public interface SysEnumService {
|
||||
|
||||
void deleteEnumValues(SysEnumValuesDto sysEnumValuesDto);
|
||||
|
||||
|
||||
/**
|
||||
* 获取系统枚举字典
|
||||
* @return
|
||||
*/
|
||||
List<SysEnumDictVo> getEnumDict();
|
||||
}
|
||||
|
@ -3,6 +3,7 @@ package com.das.modules.equipment.service.impl;
|
||||
import cn.dev33.satoken.stp.StpUtil;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.metadata.IPage;
|
||||
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
|
||||
import com.das.common.config.SessionUtil;
|
||||
import com.das.common.exceptions.ServiceException;
|
||||
import com.das.common.utils.BeanCopyUtils;
|
||||
@ -11,6 +12,7 @@ import com.das.common.utils.PageQuery;
|
||||
import com.das.modules.auth.domain.vo.SysUserVo;
|
||||
import com.das.modules.equipment.domain.dto.SysEnumTypesDto;
|
||||
import com.das.modules.equipment.domain.dto.SysEnumValuesDto;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumDictVo;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumTypesVo;
|
||||
import com.das.modules.equipment.domain.vo.SysEnumValuesVo;
|
||||
import com.das.modules.equipment.entity.SysEnumTypes;
|
||||
@ -24,6 +26,8 @@ import org.springframework.stereotype.Service;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Date;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
@Service
|
||||
public class SysEnumServiceImpl implements SysEnumService {
|
||||
@ -177,4 +181,29 @@ public class SysEnumServiceImpl implements SysEnumService {
|
||||
sysEnumValues.setIsActive(0);
|
||||
sysEnumValuesMapper.updateById(sysEnumValues);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取系统枚举字典
|
||||
* @return 枚举字典
|
||||
*/
|
||||
@Override
|
||||
public List<SysEnumDictVo> getEnumDict() {
|
||||
List<SysEnumDictVo> dict = new ArrayList<>();
|
||||
|
||||
List<SysEnumTypesVo> list = queryEnumTypesList();
|
||||
for (SysEnumTypesVo sysEnumTypesVo : list) {
|
||||
SysEnumDictVo sysEnumDictVo = new SysEnumDictVo();
|
||||
|
||||
sysEnumDictVo.setName(sysEnumTypesVo.getName());
|
||||
sysEnumDictVo.setDescription(sysEnumTypesVo.getDescription());
|
||||
|
||||
List<SysEnumValues> values = sysEnumValuesMapper.selectList(Wrappers.<SysEnumValues>lambdaQuery().eq(SysEnumValues::getEnumTypeId, sysEnumTypesVo.getId()));
|
||||
Map<String, String> map = values.stream().collect(Collectors.toMap(SysEnumValues::getValue, SysEnumValues::getDescription));
|
||||
sysEnumDictVo.setEnumValues(map);
|
||||
|
||||
dict.add(sysEnumDictVo);
|
||||
}
|
||||
|
||||
return dict;
|
||||
}
|
||||
}
|
||||
|
@ -6,10 +6,7 @@ import com.das.modules.page.domian.vo.TemperatureLimitVo;
|
||||
import com.das.modules.page.service.TemperatureDashboardService;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@ -25,7 +22,7 @@ public class TemperatureDashboardController {
|
||||
* @param device 设备{id:XXX} 只用到id即可
|
||||
* @return
|
||||
*/
|
||||
@GetMapping("/getTemperatureLimitByDeviceId")
|
||||
@PostMapping("/getTemperatureLimitByDeviceId")
|
||||
public R<List<TemperatureLimitVo>> getTemperatureLimitByDeviceId(@RequestBody SysEquipmentDto device){
|
||||
List<TemperatureLimitVo> windTurbinesPageVos = service.getTemperatureLimitByDeviceId(device.getId());
|
||||
return R.success(windTurbinesPageVos);
|
||||
|
@ -29,8 +29,8 @@ public class TemperatureDashboardServiceImpl implements TemperatureDashboardServ
|
||||
String params = mapping.getParams();
|
||||
if (params != null && !params.isEmpty()) {
|
||||
JSONObject json = JSONObject.parseObject(params);
|
||||
String code = json.getString("code");
|
||||
String name = json.getString("name");
|
||||
String code = json.getString("measPointCode");
|
||||
String name = json.getString("measPointName");
|
||||
Double limit1High=0.0;
|
||||
Double limit1Low=0.0;
|
||||
Double limit2High=0.0;
|
||||
|
@ -8,7 +8,8 @@
|
||||
- [人工操作接口](api/operation.md)
|
||||
- [页面访问接口](api/pages/)
|
||||
- [告警事件接口](api/event.md)
|
||||
- [首页接口](api/pages/home.md)
|
||||
- [首页](api/pages/home.md)
|
||||
- [报表管理](api/pages/report.md)
|
||||
- [数据采集](datacollect/)
|
||||
- [系统部署](deploy/)
|
||||
- [Linux系统部署](deploy/linux.md)
|
||||
|
@ -12,6 +12,7 @@
|
||||
| | 2.1.6删除枚举值 | /api/enum/deleteEnumValues | SYS_AUTHORITY_ID_DEVICE_MGR |
|
||||
| | 2.1.7修改枚举类型 | /api/enum/updateEnumTypes | SYS_AUTHORITY_ID_DEVICE_MGR |
|
||||
| | 2.1.8删除枚举类型 | /api/enum/deleteEnumTypes | SYS_AUTHORITY_ID_DEVICE_MGR |
|
||||
| | 2.1.9获取枚举字典 | /api/enum/getEnumDict | |
|
||||
|
||||
|
||||
### 2.1 枚举类型配置相关接口
|
||||
@ -387,4 +388,75 @@ POST 请求接口
|
||||
"success": true,
|
||||
"msg": "操作成功"
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
#### 2.1.9获取枚举字典
|
||||
|
||||
POST 请求接口
|
||||
|
||||
> /api/enum/getEnumDict
|
||||
|
||||
|
||||
请求参数
|
||||
|
||||
无
|
||||
|
||||
|
||||
返回报文
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"success": true,
|
||||
"data": [
|
||||
{
|
||||
"name": "iTurbineOperationMode",
|
||||
"description": "运行模式",
|
||||
"enumValues": {
|
||||
"0": "通讯断开",
|
||||
"1": "紧急停机",
|
||||
"2": "安全链停机",
|
||||
"3": "199刹车停机",
|
||||
"4": "198刹车停机"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "iBPLevel",
|
||||
"description": "刹车等级",
|
||||
"enumValues": {
|
||||
"0": "无故障",
|
||||
"30": "限功率",
|
||||
"50": "降转速"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "iYPLevel",
|
||||
"description": "偏航运行模式",
|
||||
"enumValues": {
|
||||
"0": "自动偏航",
|
||||
"5": "自动解缆时待机",
|
||||
"10": "自动解缆",
|
||||
"20": "偏航节能"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "ActiveStatusCode",
|
||||
"description": "故障代码",
|
||||
"enumValues": {
|
||||
"16842753": "01_01_001风机由于变桨系统安全链断开导致机组急停",
|
||||
"16973825": "01_03_001风机轮毂温度>60℃",
|
||||
"16973826": "01_03_002风机轮毂温度<-20℃",
|
||||
"16973827": "01_03_003风机轮毂温度>50℃,24小时内允许出现3次"
|
||||
}
|
||||
}
|
||||
],
|
||||
"msg": "操作成功"
|
||||
}
|
||||
```
|
||||
返参描述
|
||||
|
||||
| 参数名 | 参数类型 | 可选 | 描述 |
|
||||
|-------------|------------------------|-----|--------|
|
||||
| name | String | 否 | 枚举类型名称 |
|
||||
| description | String | 否 | 枚举类型描述 |
|
||||
| enumValues | Map<String,String> map | 否 | 枚举类型值集合 |
|
||||
|
24
ui/dasadmin/src/api/backend/temperature/request.ts
Normal file
24
ui/dasadmin/src/api/backend/temperature/request.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import createAxios from '/@/utils/axios'
|
||||
|
||||
export function equipList(params: object = {}) {
|
||||
return createAxios({
|
||||
url: '/api/equipment/list',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
|
||||
export function getTemperatureLimitByDeviceId(params: object = {}) {
|
||||
return createAxios({
|
||||
url: '/api/page/temperature/getTemperatureLimitByDeviceId',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
export function getsnapshotData(params: object = {}) {
|
||||
return createAxios({
|
||||
url: '/api/data/snapshot',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
@ -296,12 +296,15 @@
|
||||
ref="myTable"
|
||||
@mouseover.native="clearScroll"
|
||||
@mouseleave.native="createScroll">
|
||||
<el-table-column fixed prop="time" label="时间" />
|
||||
<el-table-column prop="name" label="风机" />
|
||||
<el-table-column prop="alertcontent" label="告警内容" />
|
||||
<el-table-column fixed prop="eventTimeFormate" label="时间" />
|
||||
<el-table-column prop="deviceCode" label="风机" />
|
||||
<el-table-column prop="eventText" label="告警内容" />
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<a @click="">确认</a>
|
||||
<div class="tableOperate comfirmed" style="color: #333333;" v-if="scope.row.confirmed">已确认</div>
|
||||
<div class="tableOperate" v-else>
|
||||
<a style="color: #0277B3; cursor: pointer;" @click="open(scope.row)">确认</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -320,12 +323,15 @@ import * as echarts from 'echarts'
|
||||
import { useTemplateRefsList,useEventListener } from '@vueuse/core'
|
||||
import {useI18n} from "vue-i18n";
|
||||
import WindContent from '/@/views/backend/home/windMatrix.vue'
|
||||
import { equipList } from '/@/api/backend/realData/request'
|
||||
import {
|
||||
getWindFarmRealData,
|
||||
getWindTurbineMatrixData,
|
||||
getHistoryData
|
||||
getHistoryData,
|
||||
getAlarmList,
|
||||
alertComfirm
|
||||
} from "/@/api/backend/dashboard.ts";
|
||||
import {dayjs, ElMessage, TableInstance} from "element-plus";
|
||||
import {dayjs, ElMessage, ElMessageBox, TableInstance} from "element-plus";
|
||||
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts'
|
||||
import {useRoute} from "vue-router";
|
||||
const route = useRoute()
|
||||
@ -403,6 +409,7 @@ const currentDayStatus=ref({
|
||||
StartCapacityTotal: 0,
|
||||
StarteNum: 0
|
||||
})
|
||||
const deviceCode=ref([])
|
||||
const FanList = ref([])
|
||||
const StatusListData = () => {
|
||||
getWindTurbineMatrixData().then((res) => {
|
||||
@ -489,7 +496,6 @@ const StatusListData = () => {
|
||||
}
|
||||
});
|
||||
FanList.value=data
|
||||
|
||||
}else{
|
||||
ElMessage.error({
|
||||
message: res.msg,
|
||||
@ -500,6 +506,8 @@ const StatusListData = () => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
const state: {
|
||||
charts: { powerChart: any; trendChart: any }
|
||||
remark: string
|
||||
@ -668,23 +676,6 @@ const initpowerChart = () => {
|
||||
|
||||
|
||||
const trendChartRef = ref<VNodeRef>()
|
||||
/*const TrendDataForDay = [
|
||||
{
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 63.5,
|
||||
generationTime: '2024-10-01',
|
||||
},
|
||||
{
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-02',
|
||||
},
|
||||
{
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 43.5,
|
||||
generationTime: '2024-10-03',
|
||||
},
|
||||
]*/
|
||||
const TrendDataForDay: {
|
||||
currentPeriod: {
|
||||
time: string[]
|
||||
@ -724,28 +715,8 @@ const TrendDataForMonth :{
|
||||
value: [],
|
||||
},
|
||||
}
|
||||
/*const TrendDataForMonth = [
|
||||
{
|
||||
currentPeriod: 26.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-01',
|
||||
},
|
||||
{
|
||||
currentPeriod: 36.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-02',
|
||||
},
|
||||
{
|
||||
currentPeriod: 46.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-03',
|
||||
},
|
||||
]*/
|
||||
|
||||
const inittrendChart = (type: 'day' | 'month') => {
|
||||
/* const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.map((item) => item.currentPeriod)
|
||||
const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.map((item) => item.samePeriod)
|
||||
const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.map((item) => item.generationTime)*/
|
||||
const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.currentPeriod.value
|
||||
const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.samePeriod.value
|
||||
const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.currentPeriod.time
|
||||
@ -866,50 +837,86 @@ const echartsResize = () => {
|
||||
onActivated(() => {
|
||||
echartsResize()
|
||||
})
|
||||
const timestampToTime = (timestamp: any) => {
|
||||
timestamp = timestamp ? timestamp : null
|
||||
let date = new Date(timestamp)
|
||||
let Y = date.getFullYear() + '-'
|
||||
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
|
||||
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
|
||||
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
|
||||
let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||
return Y + M + D + h + m
|
||||
}
|
||||
const tableData= ref()
|
||||
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
time: '2016-05-03',
|
||||
name: 'SC-01',
|
||||
alertcontent: '故障',
|
||||
},
|
||||
{
|
||||
time: '2016-05-02',
|
||||
name: 'SC-02',
|
||||
alertcontent: '待机',
|
||||
},
|
||||
{
|
||||
time: '2016-05-04',
|
||||
name: 'SC-03',
|
||||
alertcontent: '停机',
|
||||
},
|
||||
{
|
||||
time: '2016-05-01',
|
||||
name: 'SC-04',
|
||||
alertcontent: '变桨叶1伺服驱动器故障',
|
||||
},
|
||||
{
|
||||
time: '2016-05-03',
|
||||
name: 'SC-01',
|
||||
alertcontent: '故障',
|
||||
},
|
||||
{
|
||||
time: '2016-05-02',
|
||||
name: 'SC-02',
|
||||
alertcontent: '待机',
|
||||
},
|
||||
{
|
||||
time: '2016-05-04',
|
||||
name: 'SC-03',
|
||||
alertcontent: '停机',
|
||||
},
|
||||
{
|
||||
time: '2016-05-01',
|
||||
name: 'SC-04',
|
||||
alertcontent: '变桨叶1伺服驱动器故障',
|
||||
const getTableData = (deviceCode) => {
|
||||
const today = new Date();
|
||||
const threeDaysAgo = new Date(today);
|
||||
threeDaysAgo.setDate(today.getDate() - 3);
|
||||
const startTime = threeDaysAgo.getTime();
|
||||
const data:any = {
|
||||
startTime: startTime,
|
||||
endTime: Date.now(),
|
||||
deviceCode:deviceCode,
|
||||
limit:100
|
||||
}
|
||||
])
|
||||
console.log(JSON.stringify(data))
|
||||
getAlarmList(data).then((res) => {
|
||||
debugger
|
||||
if (res.code == 200) {
|
||||
//tableData.value = res.rows
|
||||
tableData.value = res.rows.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
eventTimeFormate: timestampToTime(item.eventTime),
|
||||
}
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg ?? '查询失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
const open = (val: any) => {
|
||||
ElMessageBox.confirm('是否确认?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
okSubmit(val)
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消确认',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const okSubmit = (val: any) => {
|
||||
const reqData: any = [
|
||||
{
|
||||
eventTime: val.eventTime,
|
||||
eventId: val.eventId,
|
||||
confirmed: 1,
|
||||
deviceId: val.deviceId,
|
||||
},
|
||||
]
|
||||
debugger
|
||||
alertComfirm(reqData)
|
||||
.then((res: any) => {
|
||||
debugger
|
||||
if (res.code == 200) {
|
||||
ElMessage.success(res.msg ?? '确认成功')
|
||||
getTableData(deviceCode.value)
|
||||
} else {
|
||||
ElMessage.error(res.msg ?? '查询失败')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err?.response?.data?.msg ?? '查询失败')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const clearScroll = () => {
|
||||
@ -947,7 +954,7 @@ const getChartData = <T extends string = any>(params: {
|
||||
],
|
||||
interval: params.interval,
|
||||
}
|
||||
console.log(JSON.stringify(data))
|
||||
/* console.log(JSON.stringify(data))*/
|
||||
getHistoryData(data).then((res) => {
|
||||
if (res.success) {
|
||||
if (typeof res.data === 'object' && res.data !== null && Object.keys(res.data).length === 0) {
|
||||
@ -1123,13 +1130,17 @@ onMounted(() => {
|
||||
overviewList()
|
||||
StatusListData()
|
||||
autoUpdate()
|
||||
|
||||
equipList({objectType: 10002,}).then((res) => {
|
||||
res.data.map((item: any) => {
|
||||
deviceCode.value.push(item.name)
|
||||
})
|
||||
|
||||
getTableData(deviceCode.value)
|
||||
})
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
})
|
||||
/*onBeforeMount(() => {
|
||||
for (const key in state.charts) {
|
||||
state.charts[key].dispose()
|
||||
}
|
||||
})*/
|
||||
|
||||
const activeName = ref('first')
|
||||
//let autoUpdateTimer: any = null
|
||||
let autoUpdateForSecondTimer: any = null
|
||||
|
353
ui/dasadmin/src/views/backend/temperature/index.vue
Normal file
353
ui/dasadmin/src/views/backend/temperature/index.vue
Normal file
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="temperature">
|
||||
<el-container class="containerPart">
|
||||
<el-aside class="defaultAside">
|
||||
<el-main class="treeMain">
|
||||
<el-tree
|
||||
style="max-width: 600px;margin-top: 2.2%"
|
||||
ref="equipTreeRef"
|
||||
:data="deviceData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-main>
|
||||
</el-aside>
|
||||
<el-container class="defaultMainContainer">
|
||||
<div class="temperature-chart" ref="temperatureChartRef"></div>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onActivated, onMounted, onUnmounted, reactive, ref} from 'vue'
|
||||
import {equipList,getTemperatureLimitByDeviceId,getsnapshotData} from "/@/api/backend/temperature/request.ts";
|
||||
import * as echarts from "echarts";
|
||||
import {useEventListener } from '@vueuse/core'
|
||||
import {dayjs} from "element-plus";
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
const devicelistData = reactive({
|
||||
objectType: 10002,
|
||||
})
|
||||
const deviceData = ref([{
|
||||
id: 0,
|
||||
name: "风机列表",
|
||||
children: []
|
||||
}])
|
||||
const deviceId=ref()
|
||||
const equipTreeRef = ref()
|
||||
const deviceQuery = (data: any) => {
|
||||
equipList(data).then((res) => {
|
||||
deviceData.value[0].children = res.data
|
||||
nextTick(() => {
|
||||
deviceId.value=res.data[0]?.id
|
||||
equipTreeRef.value?.setCurrentKey(deviceData.value[0].id!, false)
|
||||
getChartData({id:deviceId.value})
|
||||
})
|
||||
})
|
||||
}
|
||||
const handleNodeClick = (data: any) => {
|
||||
deviceId.value=data.id
|
||||
state.charts.temperatureChart.clear()
|
||||
getChartData({id:deviceId.value})
|
||||
}
|
||||
|
||||
const state: {
|
||||
charts: { temperatureChart: any; }
|
||||
remark: string
|
||||
workingTimeFormat: string
|
||||
pauseWork: boolean
|
||||
} = reactive({
|
||||
charts: { temperatureChart: null },
|
||||
remark: 'dashboard.Loading',
|
||||
workingTimeFormat: '',
|
||||
pauseWork: false,
|
||||
})
|
||||
const temperatureChartRef = ref()
|
||||
|
||||
const temperatureData:any ={
|
||||
name: [],
|
||||
values: [],
|
||||
limit1High: [],
|
||||
limit1Low: [],
|
||||
limit2High: [],
|
||||
limit2Low: []
|
||||
}
|
||||
const inittemperatureChar = () => {
|
||||
const temperatureChart = state.charts.temperatureChart ?? echarts.init(temperatureChartRef.value as unknown as HTMLElement)
|
||||
const option = {
|
||||
grid: {
|
||||
show:true,
|
||||
top: 50,
|
||||
right: 23,
|
||||
bottom: 10,
|
||||
left: 25,
|
||||
containLabel: true,
|
||||
borderColor:'transparent',
|
||||
backgroundColor:'rgba(254,55,49,0.20)'
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// },
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
interval: 10,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
interval: 10,
|
||||
//rotate: 45
|
||||
},
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
nameTextStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 0,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
data: temperatureData.name
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 40,
|
||||
itemStyle: {
|
||||
color: '#0064AA',
|
||||
barBorderRadius: 2
|
||||
},
|
||||
label:{
|
||||
show:true,
|
||||
position:'insideRight',
|
||||
color:'#ffffff'
|
||||
},
|
||||
data: temperatureData.values,
|
||||
z:3
|
||||
},
|
||||
{
|
||||
name: '上限值',
|
||||
type: 'bar',
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
data: temperatureData.limit1High,
|
||||
itemStyle: {
|
||||
color: '#ccecea',
|
||||
},
|
||||
z:2
|
||||
},
|
||||
{
|
||||
name: '下限值',
|
||||
type: 'bar',
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
data: temperatureData.limit1Low,
|
||||
itemStyle: {
|
||||
color: '#ccecea',
|
||||
},
|
||||
z:2
|
||||
},
|
||||
{
|
||||
name: '上上限值',
|
||||
type: 'bar',
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: '#fff0cc',
|
||||
},
|
||||
data: temperatureData.limit2High,
|
||||
z:1
|
||||
},
|
||||
{
|
||||
name: '下下限值',
|
||||
type: 'bar',
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
data: temperatureData.limit2Low,
|
||||
itemStyle: {
|
||||
color: '#fff0cc',
|
||||
},
|
||||
z:1
|
||||
},
|
||||
|
||||
],
|
||||
}
|
||||
temperatureChart.setOption(option)
|
||||
state.charts.temperatureChart = temperatureChart
|
||||
}
|
||||
const attributesCode:any[]=[]
|
||||
const getChartData = (data: any) => {
|
||||
console.log(JSON.stringify(data))
|
||||
getTemperatureLimitByDeviceId(data).then((res) => {
|
||||
if (res.code=='200') {
|
||||
temperatureData.name=[]
|
||||
temperatureData.values=[]
|
||||
temperatureData.limit1High=[]
|
||||
temperatureData.limit1Low=[]
|
||||
temperatureData.limit2High=[]
|
||||
temperatureData.limit2Low=[]
|
||||
res.data.forEach((item,index) => {
|
||||
temperatureData.name.push(item.measPointName)
|
||||
attributesCode.push(item.measPointCode)
|
||||
if(item.limit1Enable){
|
||||
temperatureData.limit1High.push(item.limit1High)
|
||||
temperatureData.limit1Low.push(item.limit1Low)
|
||||
}
|
||||
if(item.limit2Enable){
|
||||
temperatureData.limit2High.push(item.limit2High)
|
||||
temperatureData.limit2Low.push(item.limit2Low)
|
||||
}
|
||||
})
|
||||
getTemperaData([{deviceId:data.id,attributes:attributesCode}])
|
||||
}
|
||||
})
|
||||
}
|
||||
const getTemperaData = (data:any) => {
|
||||
getsnapshotData(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const data = res.data[deviceId.value]
|
||||
const rangeKeys = Object.keys(data)
|
||||
attributesCode.forEach((attribute, index) => {
|
||||
if (attribute) {
|
||||
const attributeLower = attribute.toLowerCase();
|
||||
const foundKey = Object.keys(rangeKeys).find(key => rangeKeys[key] === attributeLower);
|
||||
if (foundKey) {
|
||||
const value=data[rangeKeys[foundKey]]
|
||||
const formattedValue=value !== undefined ? (value % 1 === 0 ? value : value.toFixed(2)) : '-';
|
||||
temperatureData.values = temperatureData.values.concat({value:formattedValue,itemStyle:{color:'#0064AA'}});
|
||||
}
|
||||
}
|
||||
});
|
||||
const values = temperatureData.values
|
||||
const limit1High = temperatureData.limit1High
|
||||
const limit1Low = temperatureData.limit1Low
|
||||
const limit2High = temperatureData.limit2High
|
||||
const limit2Low = temperatureData.limit2Low
|
||||
inittemperatureChar()
|
||||
seriesStyle(values, limit1High, limit1Low, limit2High, limit2Low)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const seriesStyle= (values, limit1High, limit1Low, limit2High, limit2Low) =>{
|
||||
const option = state.charts.temperatureChart.getOption();
|
||||
const series = option?.series?.[0];
|
||||
values.forEach((item,index) => {
|
||||
if (Number(item.value) > Number(limit1High[index]) || Number(item.value) < Number(limit1Low[index])) {
|
||||
//debugger
|
||||
item.itemStyle.color= 'red'
|
||||
series.data[index].itemStyle = { color: 'red' };
|
||||
} else if (Number(item.value) > Number(limit2High[index]) || Number(item.value) < Number(limit2Low[index])) {
|
||||
item.itemStyle.color= 'red'
|
||||
series.data[index].itemStyle = { color: 'red' };
|
||||
} else {
|
||||
item.itemStyle.color= '#0064AA'
|
||||
}
|
||||
})
|
||||
state.charts.temperatureChart.setOption(option);
|
||||
|
||||
}
|
||||
let autoUpdateTimer: any = null
|
||||
const autoUpdate = () => {
|
||||
if (!autoUpdateTimer) {
|
||||
autoUpdateTimer = setInterval(() => {
|
||||
getChartData({id:deviceId.value})
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
const echartsResize = () => {
|
||||
nextTick(() => {
|
||||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||||
chartKeys.forEach((key) => {
|
||||
state.charts[key].resize()
|
||||
})
|
||||
})
|
||||
}
|
||||
onActivated(() => {
|
||||
echartsResize()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
deviceQuery(devicelistData)
|
||||
autoUpdate()
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
autoUpdateTimer && clearInterval(autoUpdateTimer)
|
||||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||||
chartKeys.forEach((key) => {
|
||||
state.charts[key] && state.charts[key].dispose()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.temperature{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.containerPart {
|
||||
height: 100%;
|
||||
.defaultAside {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #eaebed;
|
||||
}
|
||||
.defaultMainContainer{
|
||||
width: calc(100% - 260px);
|
||||
height: 100%;
|
||||
.temperature-chart{
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user