lianmei
/
iot-ui-plus
mirror of https://gitee.com/lmlz_0/dc-ui-plus.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

曲线图表动态数据修改

develop
fuguobin 1 year ago
parent
f7946d4613
commit
1a79de6e07
6 changed files with 528 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/directive/permission/index.ts
  2. 2
      src/types/auto-imports.d.ts
  3. 54
      src/utils/index.ts
  4. 533
      src/views/details/index.vue
  5. 2
      src/views/monitoring/devicemanage/components/main.vue
  6. 11
      src/views/monitoring/screen/components/main.vue

6
src/directive/permission/index.ts
View File

@ -8,6 +8,7 @@ export const hasPerm: Directive = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
// 「超级管理员」拥有所有的按钮权限
const { roles, perms } = useUserStoreHook();
debugger;
if (roles.includes('ROOT')) {
return true;
}
@ -17,6 +18,7 @@ export const hasPerm: Directive = {
const requiredPerms = value; // DOM绑定需要的按钮权限标识
const hasPerm = perms?.some(perm => {
debugger;
return requiredPerms.includes(perm);
});
@ -24,9 +26,7 @@ export const hasPerm: Directive = {
el.parentNode && el.parentNode.removeChild(el);
}
} else {
throw new Error(
"need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
);
throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"");
}
}
};

2
src/types/auto-imports.d.ts
View File

@ -2,7 +2,6 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification']
@ -273,7 +272,6 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>

54
src/utils/index.ts
View File

@ -34,6 +34,35 @@ export function numberRandom(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
/**
* 防抖
*/
export function debounce(handle, delay) {
var timer = null;
return function () {
var _self = this,
_args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
handle.apply(_self, _args);
}, delay);
};
}
/**
* 节流
*/
export function throttle(handler, wait) {
var lastTime = 0;
return function (e) {
var nowTime = new Date().getTime();
if (nowTime - lastTime > wait) {
handler.apply(this, arguments);
lastTime = nowTime;
}
};
}
/**
* 值之间的过度
* @param {number} num 需要过度的数值
@ -94,6 +123,31 @@ export function diffDays(date: any, otherDate: any) {
return Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
}
/**
* 计算当前之后一段时间
* @param {Date} currentTime 当前时间
* @param {string} type 类型：1:日,2:时,3:分,4:秒,5:月,6:年
*/
export const endTime = (currentTime: any, type: string) => {
const today = new Date(currentTime);
switch (type) {
case '1':
return new Date(today.getTime() + 24 * 60 * 60 * 1000);
case '2':
return new Date(today.getTime() + 60 * 60 * 1000);
case '3':
return new Date(today.getTime() + 60 * 1000);
case '4':
return new Date(today.getTime() + 1000);
case '5':
return new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
case '6':
return new Date(today.getTime() + 365 * 24 * 60 * 60 * 1000);
default:
return today;
}
};
/**
* 确认一个数字是奇数还是偶数
* @param {number} num 数字

533
src/views/details/index.vue
View File

@ -81,7 +81,7 @@
clearable
collapse-tags
collapse-tags-tooltip
placeholder="请选择分类"
placeholder="请选择参数分类"
style="width: 150px"
@change="classChange"
>
@ -96,7 +96,7 @@
clearable
collapse-tags
collapse-tags-tooltip
placeholder="请选择参数"
placeholder="请选择曲线参数"
@change="parameterChange"
>
<el-option
@ -136,7 +136,7 @@
<el-card class="echart" shadow="always">
<div class="sidebar">
<h3>换热站</h3>
<el-menu default-active="" class="deviceMenu" @select="handleSelect" @open="handleOpen">
<el-menu :default-active="filterForm.deviceUuid" class="deviceMenu" @select="deviceSelect" @open="deviceOpen">
<el-menu-item :index="item.centerDeviceCode" v-for="item in deviceData" :key="item.centerDeviceCode">
<i class="iconfont icon-station" />
<el-tooltip class="box-item" effect="dark" :content="item.deviceName" placement="right-start">
@ -146,7 +146,7 @@
</el-menu>
</div>
<div class="comparisonInfo">
<div ref="stackedRef" class="stackedLine">暂无数据</div>
<div ref="stackedRef" id="stackedLine" class="stackedLine">暂无数据</div>
</div>
<div class="sidebar">
<div class="paramList">
@ -165,24 +165,29 @@ import * as echarts from 'echarts';
import { Ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useDateFormat, useNow } from '@vueuse/core';
import { randomColor } from '@/utils/index';
import { randomColor, endTime, debounce } from '@/utils/index';
const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance, FormRules } from 'element-plus';
import { ReturnDownBack } from '@vicons/ionicons5';
import { getAllDevices, getClass, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
import { getAllDevices, getDevices, getClass, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
import { partitionVo, classVo, parameterVo, seriesVo, mainInfoVo } from '@/api/device/types';
const router = useRouter();
const route = useRoute();
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD');
const currentEndTime = ref();
// const nowTime = ref();
const timer = ref();
const isCurrentRoute = ref(true);
// const currentSecond = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
const searchRef = ref<FormInstance>();
// const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 12, 0, 0)];
// const multipleLimit = ref(0);
// const parameterLimit = ref(0);
// const deptId = ref(0);
const deptId = ref(0);
const keyupType = ref();
// const seriesData = ref<seriesVo[]>();
const daysData: any = reactive([
{
@ -203,6 +208,7 @@ const daysData: any = reactive([
}
]);
const searchForm: any = reactive({
startTime: '',
date: '',
time: '',
step: 1,
@ -219,7 +225,8 @@ const filterForm = reactive({
deviceUuid: '',
paramCode: '',
partion: '',
showZero: false
showZero: false,
queryType: 1 //1:正常查询，2:实时查询
});
const rules = reactive<FormRules>({
// device: [
@ -232,7 +239,7 @@ const rules = reactive<FormRules>({
// parameter: [
// {
// required: true,
// message: '请选择参数',
// message: '请选择曲线参数',
// trigger: 'change'
// }
// ]
@ -315,10 +322,301 @@ const options = {
series: [{}]
};
const options2 = {
color: colors,
title: {
text: '单设备多参数'
},
tooltip: {
trigger: 'axis'
// position: function (pt: any) {
// return [pt[0], '10%'];
// }
},
legend: {
data: ['瞬时流量', '瞬时热量', '累计热量']
},
grid: {
top: '80',
left: '100',
right: '150',
bottom: '50',
containLabel: true
},
toolbox: {
feature: {
restore: {}
}
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [
{
type: 'value',
name: '瞬时流量(m³/h)',
position: 'left',
alignTicks: true,
offset: 0,
scale: true, //自适应
minInterval: 1, //最小间距
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
},
axisTick: {
// 轴刻度
show: false
},
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
}
},
{
type: 'value',
name: '瞬时热量(JG/h)',
position: 'right',
alignTicks: true,
offset: 0,
scale: true, //自适应
minInterval: 1, //最小间距
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
},
axisTick: {
// 轴刻度
show: false
},
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
}
}
],
dataZoom: [
{
type: 'inside',
startValue: '0'
// start: 0,
// end: 20
},
{
startValue: '0'
// start: 0,
// end: 20
}
],
series: [
{
name: '瞬时流量',
type: 'line',
smooth: true,
symbol: 'none',
yAxisIndex: 0,
data: [
['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
]
},
{
name: '瞬时热量',
type: 'line',
smooth: true,
symbol: 'none',
yAxisIndex: 1,
data: [
['2023-10-01 08:00:00', Math.round(Math.random() * 100)],
['2023-10-01 09:00:00', Math.round(Math.random() * 100)],
['2023-10-01 10:00:00', Math.round(Math.random() * 100)],
['2023-10-01 11:00:00', Math.round(Math.random() * 100)],
['2023-10-01 12:00:00', Math.round(Math.random() * 100)],
['2023-10-01 13:00:00', Math.round(Math.random() * 100)],
['2023-10-01 14:00:00', Math.round(Math.random() * 100)],
['2023-10-01 15:00:00', Math.round(Math.random() * 100)],
['2023-10-02 08:00:00', Math.round(Math.random() * 100)],
['2023-10-02 09:00:00', Math.round(Math.random() * 100)],
['2023-10-02 10:00:00', Math.round(Math.random() * 100)],
['2023-10-02 11:00:00', Math.round(Math.random() * 100)],
['2023-10-02 12:00:00', Math.round(Math.random() * 100)],
['2023-10-02 13:00:00', Math.round(Math.random() * 100)],
['2023-10-02 14:00:00', Math.round(Math.random() * 100)],
['2023-10-02 15:00:00', Math.round(Math.random() * 100)],
['2023-10-03 08:00:00', Math.round(Math.random() * 100)],
['2023-10-03 09:00:00', Math.round(Math.random() * 100)],
['2023-10-03 10:00:00', Math.round(Math.random() * 100)],
['2023-10-03 11:00:00', Math.round(Math.random() * 100)],
['2023-10-03 12:00:00', Math.round(Math.random() * 100)],
['2023-10-03 13:00:00', Math.round(Math.random() * 100)],
['2023-10-03 14:00:00', Math.round(Math.random() * 100)],
['2023-10-03 15:00:00', Math.round(Math.random() * 100)],
['2023-10-04 08:00:00', Math.round(Math.random() * 100)],
['2023-10-04 09:00:00', Math.round(Math.random() * 100)],
['2023-10-04 10:00:00', Math.round(Math.random() * 100)],
['2023-10-04 11:00:00', Math.round(Math.random() * 100)],
['2023-10-04 12:00:00', Math.round(Math.random() * 100)],
['2023-10-04 13:00:00', Math.round(Math.random() * 100)],
['2023-10-04 14:00:00', Math.round(Math.random() * 100)],
['2023-10-04 15:00:00', Math.round(Math.random() * 100)],
['2023-10-05 08:00:00', Math.round(Math.random() * 100)],
['2023-10-05 09:00:00', Math.round(Math.random() * 100)],
['2023-10-05 10:00:00', Math.round(Math.random() * 100)],
['2023-10-05 11:00:00', Math.round(Math.random() * 100)],
['2023-10-05 12:00:00', Math.round(Math.random() * 100)],
['2023-10-05 13:00:00', Math.round(Math.random() * 100)],
['2023-10-05 14:00:00', Math.round(Math.random() * 100)],
['2023-10-05 15:00:00', Math.round(Math.random() * 100)],
['2023-10-06 08:00:00', Math.round(Math.random() * 100)],
['2023-10-06 09:00:00', Math.round(Math.random() * 100)],
['2023-10-06 10:00:00', Math.round(Math.random() * 100)],
['2023-10-06 11:00:00', Math.round(Math.random() * 100)],
['2023-10-06 12:00:00', Math.round(Math.random() * 100)],
['2023-10-06 13:00:00', Math.round(Math.random() * 100)],
['2023-10-06 14:00:00', Math.round(Math.random() * 100)],
['2023-10-06 15:00:00', Math.round(Math.random() * 100)],
['2023-10-07 08:00:00', Math.round(Math.random() * 100)],
['2023-10-07 09:00:00', Math.round(Math.random() * 100)],
['2023-10-07 10:00:00', Math.round(Math.random() * 100)],
['2023-10-07 11:00:00', Math.round(Math.random() * 100)],
['2023-10-07 12:00:00', Math.round(Math.random() * 100)],
['2023-10-07 13:00:00', Math.round(Math.random() * 100)],
['2023-10-07 14:00:00', Math.round(Math.random() * 100)],
['2023-10-07 15:00:00', Math.round(Math.random() * 100)]
]
},
{
name: '累计热量',
type: 'line',
smooth: true,
symbol: 'none',
yAxisIndex: 1,
data: [
['2023-10-01 08:00:00', Math.round(Math.random() * 600)],
['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
]
}
]
};
onMounted(() => {
// deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
searchForm.date = currentTime.value;
searchForm.time = '00:00:00';
searchForm.startTime = currentTime.value + ' 00:00:00';
filterForm.startTime = currentTime.value + ' 00:00:00';
// searchForm.time = [currentTime.value + ' 00:00:00', currentSecond.value];
// filterForm.startTime = currentTime.value + ' 00:00:00';
@ -326,29 +624,24 @@ onMounted(() => {
getDevice();
getParam();
getPortion();
// const chart = echarts.init(document.getElementById("stackedLine"));
// chart.setOption(options2);
});
const handleSelect = (key: string, keyPath: string[], item: object) => {
onUnmounted(() => {
//组件注销前清除setTimeout
if (timer.value !== null || timer.value !== undefined) {
clearTimeout(timer.value);
}
});
const deviceSelect = (key: string, keyPath: string[], item: object) => {
//点击换热站列表
console.log(key, keyPath, item);
filterForm.deviceUuid = key;
if (filterForm.startTime === '') {
ElMessage({
message: '请选择时间',
type: 'warning'
});
return;
}
if (filterForm.paramCode === '') {
ElMessage({
message: '请选择参数',
type: 'warning'
});
return;
}
getDeviceInfo();
verifyInfo();
};
const handleOpen = (key: string, keyPath: string[]) => {
const deviceOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath);
filterForm.deviceUuid = key;
};
@ -361,12 +654,17 @@ function lineClick() {
document.addEventListener('keyup', e => {
//监听键盘事件
console.log('按键:', e.key);
if (e.key === 'ArrowUp') {
keyClick('0');
} else if (e.key === 'ArrowDown') {
keyClick('1');
}
keyupType.value = e.key;
keyClickDebounce();
// if (e.key === 'ArrowUp') {
// // keyClick('0');
// } else if (e.key === 'ArrowDown') {
// keyClick('1');
// }
});
const keyClickDebounce = debounce(() => {
keyClick(keyupType.value);
}, 500);
function keyClick(res: string) {
//键盘事件
if (filterForm.startTime === '') {
@ -374,40 +672,38 @@ function keyClick(res: string) {
message: '请选择时间',
type: 'warning'
});
return;
}
if (filterForm.paramCode === '') {
} else if (filterForm.paramCode === '') {
ElMessage({
message: '请选择参数',
message: '请选择曲线参数',
type: 'warning'
});
return;
}
const device = searchForm.device;
const deviceDataValue = deviceData.value;
console.log('已选设备:', searchForm.device);
if (deviceDataValue?.length != 0) {
deviceDataValue?.map((item: deviceVo, index: number) => {
console.log('遍历设备:', item, index);
if (res === '0') {
//上一个
if (device === item.centerDeviceCode && index != 0) {
searchForm.device = deviceDataValue[index - 1].centerDeviceCode;
filterForm.deviceUuid = searchForm.device;
console.log('当前设备:', searchForm.device);
} else {
const device = filterForm.deviceUuid;
const deviceDataValue = deviceData.value;
// console.log('已选设备:', filterForm.deviceUuid);
if (deviceDataValue?.length != 0) {
deviceDataValue?.map((item: deviceVo, index: number) => {
// console.log('遍历设备:', item, index);
if (res === 'ArrowUp') {
//上一个
if (device === item.centerDeviceCode && index != 0) {
filterForm.deviceUuid = deviceDataValue[index - 1].centerDeviceCode;
// filterForm.deviceUuid = filterForm.deviceUuid;
// console.log('当前设备:', filterForm.deviceUuid);
}
} else if (res === 'ArrowDown') {
//下一个
if (device === item.centerDeviceCode && index + 1 != deviceDataValue?.length) {
// console.log('当前设备:', item.deviceName, index);
filterForm.deviceUuid = deviceDataValue[index + 1].centerDeviceCode;
// filterForm.deviceUuid = filterForm.deviceUuid;
// console.log('当前设备:', filterForm.deviceUuid);
}
}
} else if (res === '1') {
//下一个
if (device === item.centerDeviceCode && index + 1 != deviceDataValue?.length) {
console.log('当前设备:', item.deviceName, index);
searchForm.device = deviceDataValue[index + 1].centerDeviceCode;
filterForm.deviceUuid = searchForm.device;
console.log('当前设备:', searchForm.device);
}
}
});
});
}
getDeviceInfo();
}
getDeviceInfo();
}
function showZeroChange() {
@ -418,8 +714,8 @@ function showZeroChange() {
function getDevice() {
//获取设备
// const params = deptId.value;
getAllDevices().then((res: any) => {
const params = deptId.value;
getDevices(params).then((res: any) => {
if (res.code === 200) {
deviceData.value = res.data;
}
@ -446,14 +742,67 @@ function getPortion() {
function getDeviceInfo() {
//获取折线图数据
const params = filterForm;
params.startTime = searchForm.startTime;
params.step = searchForm.step;
params.stepType = searchForm.stepType;
params.queryType = 1;
getDeviceInfos(params).then((res: any) => {
if (res.code === 200) {
mainInfoList.value = res.data.mainInfos;
if (res.data.additionalInfo != null) {
currentEndTime.value = res.data.additionalInfo.endTime;
debounceClick();
}
init(res.data);
}
});
}
const debounceClick = debounce(() => {
getDeviceInfoss();
}, 360000);
function getDeviceInfoss() {
//轮询获取折线图数据
console.log(useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
const params = filterForm;
params.startTime = currentEndTime.value;
params.step = 6;
params.stepType = '3';
params.queryType = 2;
console.log(params);
getDeviceInfos(params).then((res: any) => {
if (res.code === 200) {
if (isCurrentRoute.value) {
timer.value = setTimeout(async () => {
await (timer.value && clearTimeout(timer.value));
await getDeviceInfoss();
}, 360000);
}
if (res.data.additionalInfo != null) {
currentEndTime.value = res.data.additionalInfo.endTime;
console.log(currentEndTime.value, res.data.mainInfos);
}
options.series.forEach((originalObj: any) => {
res.data.mainInfos.forEach((newObj: any) => {
if (originalObj.name === newObj.name) {
newObj.data.map((item: any) => {
originalObj.data.push(item);
});
}
});
});
console.log(options.series);
const chart = echarts.init(document.getElementById('stackedLine'));
chart.setOption(options);
// mainInfoList.value = res.data.mainInfos;
// init(res.data);
} else {
clearTimeout(timer.value);
}
});
}
function init(data: any) {
//折线图实例化
options.yAxis = [];
@ -463,7 +812,7 @@ function init(data: any) {
options.title.text = '暂无数据';
options.title.x = 'center';
options.title.y = 'center';
const chart = echarts.init(stackedRef.value);
const chart = echarts.init(document.getElementById('stackedLine'));
chart.clear();
chart.resize();
console.log('options--', options);
@ -514,7 +863,7 @@ function init(data: any) {
data: item.data
});
});
const chart = echarts.init(stackedRef.value);
const chart = echarts.init(document.getElementById('stackedLine'));
chart.clear();
chart.resize();
console.log('options--', options);
@ -534,15 +883,29 @@ function init(data: any) {
// }
function dateChange(res: any) {
//日期选择
console.log('date--', res, searchForm.date);
filterForm.startTime = res + ' ' + searchForm.time;
console.log('date--', filterForm.startTime);
// console.log('date--', res, searchForm.date);
if (res === null) {
searchForm.startTime = '';
filterForm.startTime = '';
} else {
searchForm.startTime = res + ' ' + searchForm.time;
filterForm.startTime = res + ' ' + searchForm.time;
verifyInfo();
// console.log('date--', filterForm.startTime);
}
}
function timeChange(res: any) {
//时间选择
console.log('time--', res, searchForm.time);
filterForm.startTime = searchForm.date + ' ' + res;
console.log('time--', filterForm.startTime);
if (searchForm.date === null) {
searchForm.startTime = '';
filterForm.startTime = '';
} else {
// console.log('time--', res, searchForm.time);
searchForm.startTime = searchForm.date + ' ' + res;
filterForm.startTime = searchForm.date + ' ' + res;
verifyInfo();
// console.log('time--', filterForm.startTime);
}
}
function stepChange(num: any) {
//时间长度
@ -551,10 +914,12 @@ function stepChange(num: any) {
function stepTypeChange(value: string) {
//时间长度
filterForm.stepType = value;
verifyInfo();
}
function classChange(value: string) {
//分类选择确认
searchForm.parameter = [];
filterForm.paramCode = '';
parameterData.value = [];
classData.value?.map((res: any) => {
if (value === res.setId) {
@ -568,16 +933,40 @@ function classChange(value: string) {
console.log('paramCode--', filterForm.paramCode);
}
});
verifyInfo();
}
function parameterChange(value: any) {
//参数选择确认
// parameterLimit.value = value.length <= 1 ? 0 : 1;
filterForm.paramCode = '';
filterForm.paramCode = value.toString();
console.log('paramCode--', filterForm.paramCode);
// console.log('paramCode--', filterForm.paramCode);
verifyInfo();
}
function partitionChange(res: string) {
//分区确认
filterForm.partion = res;
verifyInfo();
}
function verifyInfo() {
if (filterForm.deviceUuid === '') {
ElMessage({
message: '请选择换热站',
type: 'warning'
});
} else if (filterForm.startTime === '') {
ElMessage({
message: '请选择起始时间',
type: 'warning'
});
} else if (filterForm.paramCode === '') {
ElMessage({
message: '请选择曲线参数',
type: 'warning'
});
} else {
getDeviceInfo();
}
}
// const submitForm = (formEl: FormInstance | undefined) => {
// //筛选确认

2
src/views/monitoring/devicemanage/components/main.vue
View File

@ -345,7 +345,7 @@ function gitDevice() {
const params = deviceMenuKey.value;
getViewInfo(params).then((res: any) => {
if (res.code === 200) {
if (isCurrentRoute) {
if (isCurrentRoute.value) {
timer.value = setTimeout(async () => {
await (timer.value && clearTimeout(timer.value));
await gitDevice();

11
src/views/monitoring/screen/components/main.vue
View File

@ -134,7 +134,14 @@ import { tableStore } from '@/store/modules/table';
import mitt from '@/plugins/bus';
import socket from '@/utils/socket';
import useStorage from '@/utils/useStorage';
import { useUserStoreHook } from '@/store/modules/user';
const sessionStorageIns = useStorage('sessionStorage');
const { perms } = useUserStoreHook();
const requiredPerms = ['model:device:contrl']; //控制单元格可修改权限
const controlPerm = perms?.some(perm => {
return requiredPerms.includes(perm);
});
const tableStoreCounter = tableStore();
// import type { MenuOption } from 'naive-ui'
@ -430,7 +437,7 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
cellRow.value = row;
cellColumn.value = column;
cellField.value = cellField;
if (cellField.canBeControl === '1') {
if (cellField.canBeControl === '1' && controlPerm) {
modalTitle.value = column.title;
///formData.value.url = data.url;
//formData.value.deviceName = cellField.deviceName;
@ -454,7 +461,7 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'
}</span><i class="iconfont ${
cellValue.changeProp === -1 ? 'icon-decline' : cellValue.changeProp === 1 ? 'icon-rise' : ''
}" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
}" ></i>${cellValue.canBeControl === '1' && controlPerm ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
return cellData;
};

Write Preview
Loading…
Cancel
Save