diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts index b8d0dee..5771274 100644 --- a/src/directive/permission/index.ts +++ b/src/directive/permission/index.ts @@ -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']\""); } } }; diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index 5742656..67e581d 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -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 - readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly ElNotification: UnwrapRef diff --git a/src/utils/index.ts b/src/utils/index.ts index 40c2fd1..2313c87 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -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 数字 diff --git a/src/views/details/index.vue b/src/views/details/index.vue index 4dcfe47..a8fc210 100644 --- a/src/views/details/index.vue +++ b/src/views/details/index.vue @@ -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" >

换热站

- + @@ -146,7 +146,7 @@
-
暂无数据
+
暂无数据
@@ -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 = 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(); // 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(); 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({ // device: [ @@ -232,7 +239,7 @@ const rules = reactive({ // 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) => { // //筛选确认 diff --git a/src/views/monitoring/devicemanage/components/main.vue b/src/views/monitoring/devicemanage/components/main.vue index c4545b9..d9967b6 100644 --- a/src/views/monitoring/devicemanage/components/main.vue +++ b/src/views/monitoring/devicemanage/components/main.vue @@ -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(); diff --git a/src/views/monitoring/screen/components/main.vue b/src/views/monitoring/screen/components/main.vue index 85f7041..4a8ec5e 100644 --- a/src/views/monitoring/screen/components/main.vue +++ b/src/views/monitoring/screen/components/main.vue @@ -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 = ({ 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 = ({ cellValue }) => { cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停' }${cellValue.canBeControl === '1' ? '' : ''}`; + }" >${cellValue.canBeControl === '1' && controlPerm ? '' : ''}`; return cellData; };