From 7dcbe34de856c28c0c5f0cce656054e565a0c166 Mon Sep 17 00:00:00 2001 From: huanghao1412 Date: Tue, 9 Jan 2024 18:33:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BorderBoxV2.vue | 37 ++- .../CustomComponents/RealTimeEvent/VModal.vue | 146 ++++++++++++ .../RealTimeEvent/VModalV1.vue | 143 +++++++++++ .../CustomComponents/RealTimeEvent/index.vue | 222 ++++++++++++++++-- src/utils/utils.ts | 23 +- 5 files changed, 519 insertions(+), 52 deletions(-) rename src/packages/components/CustomComponents/CustomComponents/{components => RealTimeEvent}/BorderBoxV2.vue (65%) create mode 100644 src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/VModal.vue create mode 100644 src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/VModalV1.vue diff --git a/src/packages/components/CustomComponents/CustomComponents/components/BorderBoxV2.vue b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/BorderBoxV2.vue similarity index 65% rename from src/packages/components/CustomComponents/CustomComponents/components/BorderBoxV2.vue rename to src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/BorderBoxV2.vue index daaf924b..91d7c47f 100644 --- a/src/packages/components/CustomComponents/CustomComponents/components/BorderBoxV2.vue +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/BorderBoxV2.vue @@ -3,13 +3,15 @@ + + + diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/VModalV1.vue b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/VModalV1.vue new file mode 100644 index 00000000..7f565df9 --- /dev/null +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/VModalV1.vue @@ -0,0 +1,143 @@ + + + + + + diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue index 29267763..725a5606 100644 --- a/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue @@ -1,18 +1,35 @@ @@ -22,15 +39,18 @@ import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { publicInterface } from '@/api/path/business.api' -import BorderBox from '../components/BorderBoxV2.vue' +import BorderBox from './BorderBoxV2.vue' import VChart from 'vue-echarts' -import {isPreview} from '@/utils' +import {isPreview, postMessageToParent} from '@/utils' import {graphic} from "echarts"; import {cloneDeep} from 'lodash' import moment from "moment" import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import {RequestHttpIntervalEnum} from "@/enums/httpEnum"; import {icon} from '@/plugins/icon' +import VModal from './VModal.vue' +import VModalV1 from './VModalV1.vue' +import { useOriginStore } from '@/store/modules/originStore/originStore' const { LocationIcon } = icon.carbon const { CheckCircleOutlinedIcon } = icon.material @@ -72,7 +92,12 @@ const select2 = reactive({ { label: '未确认', value: 'not', number: 0, color: '#f5b442' }, ] }) -type tableDataType = { + +watch(() => select1.value.join('&&') + select2.value.join('&&'), (v) => { + getData() +}) + +type tableDataItemType = { id: number, content: string, generate_time: string, @@ -81,12 +106,55 @@ type tableDataType = { level: number, color1: string, color2: string, -}[] -let tableData:tableDataType = reactive([]) + position: string, + device_name: string, + node_name: string, + confirm_people: string, + confirm_time: string, + reconfirmation_time_str: string, + serial_no: string, + remark: string, + [k:string]: any, +} +let tableData:tableDataItemType[] = reactive([]) +watch(() => tableData.map(_ => _.checked), (v:boolean[]) => { + if(!v.length) checkAll.value = false + else if(v.every(_ => _)) checkAll.value = true + else if(v.every(_ => !_)) checkAll.value = false +}) + let checkAll = ref(false) -const refBorderBox = ref(null) +watch(() => checkAll.value, (v) => { + tableData.forEach(_ => _.checked = v) +}) + +const getNumber = () => { + publicInterface('/dcim/dems/devie_active_alarm', 'count_by_level', {}).then(res => { + if (res && JSON.stringify(res.data) !== '{}') { + select1.options.forEach((item, i) => { + item.number = res.data[`level${i+1}`] + }) + } + }) + const param = { + condition: { + id: null, + levels: select1.value, + space_complete_id: '', + append_space_to_content: 'complete', + recovery_statuss: ['not'], + } + } + publicInterface('/dcim/dems/devie_active_alarm', 'get_app_alarm_num_by_condition', param).then(res => { + if (res && res.data) { + select2.options[0].number = res.data['confrim_num'] + select2.options[1].number = res.data['not_confirm_num'] + } + }) +} + const getData = () => { - console.log(refBorderBox.value) + getNumber() const queryModel = { condition: { id: null, @@ -107,8 +175,10 @@ const getData = () => { return } if(res && res.data) { + res.data.item = res.data.item.filter((_: tableDataItemType) => _.level) const lastTableData = [...tableData] - let arr = res.data['item'].map((e:any) => ({ + let arr:tableDataItemType[] = res.data['item'].map((e:any) => ({ + ...e, id: e.id, content: e.content, generate_time: e.generate_time, @@ -117,6 +187,14 @@ const getData = () => { confirm_status: e.confirm_status, color1: select1.options.find(_ => _.value === e.level)!.color, color2: select2.options.find(_ => _.value === e.confirm_status)!.color, + position: e.position, + device_name: e.device_name, + node_name: e?.point?.node_name, + confirm_people: e.confirm_people, + confirm_time: e.confirm_time, + reconfirmation_time_str: e.reconfirmation_time_str, + serial_no: e.serial_no, + remark: e.remark, })) if (checkAll.value) { arr = arr.map((e:any) => ({ ...e, checked: e.confirm_status !== 'ok' })) @@ -128,22 +206,112 @@ const getData = () => { } }) } - arr = arr.concat(Array(10).fill({}).map(_ => ({ - id: 1234, - content: '1234', - generate_time: moment().format('x'), - level: 2, - checked: false, - confirm_status: 'ok', - color1: 'green', - color2: 'green', - }))) tableData.splice(0, tableData.length, ...arr) - console.log(tableData) } }) } +const modalObj = reactive({ + show: false, + data: {} +}) +const clickItem = (i:number) => { + const obj = tableData[i] + modalObj.show = true + Object.assign(modalObj, { + show: true, + data: obj + }) +} + +const originStore = useOriginStore() +const user = originStore.getOriginStore.user.user +const modalV1Obj = reactive({ + show: false, + data: { + // confirm_people_id: user.id, + confirm_people: user.name, + is_misreport: false, + remark: '', + reconfirmation_time_str: null, + }, + // batch 批量 single 单个 + type: 'batch', + singleIds: [], +}) +const clickBatch = () => { + if(!tableData.filter(_ => _.checked).length) { + window['$message'].warning('请先选择数据') + return + } + Object.assign(modalV1Obj, { + show: true, + data: { + // confirm_people_id: user.id, + confirm_people: user.name, + is_misreport: false, + remark: '', + reconfirmation_time_str: null, + }, + type: 'batch', + singleIds: [] + }) +} +const clickSingle = (id: number) => { + Object.assign(modalV1Obj, { + show: true, + data: { + // confirm_people_id: user.id, + confirm_people: user.name, + is_misreport: false, + remark: '', + reconfirmation_time_str: null, + }, + type: 'single', + singleIds: [id] + }) +} + +const confirm = () => { + const obj = { + id: null, + ids: modalV1Obj.type === 'batch' ? tableData.filter(_ => _.checked).map(_ => _.id) : modalV1Obj.singleIds, + confirm_status: "not", + ...modalV1Obj.data + } + publicInterface('/dcim/dems/devie_active_alarm', 'confirms', obj).then(res => { + window['$message'].success('操作成功') + checkAll.value = false + getData() + }) +} + +const jumpTo = (row:any) => { + if (row.space && row.space.space_type !== 'device') { + publicInterface('/dcim/space_page', 'get', { space_id: row.space_id, order: 'sort,id asc' }).then(res => { + if (res && res.data && res.data.length) { + postMessageToParent({ + type: 'changeRouterV1', + url: `/dynamicRing/schematicDiagram/${res.data[0].id}` + }) + } + else { + window['$message'].warning('所选节点没有配置页面') + } + }) + } + else { + window['$message'].warning('所选节点没有配置页面') + } +} + +const jumpMore = () => { + postMessageToParent({ + type: 'changeRouterV1', + url: `/alarmManage/monitorAlarm` + }) +} + let timer:unknown watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => { if(!isPreview()) return @@ -198,6 +366,7 @@ onUnmounted(() => { flex-direction: column; overflow-y: auto; .item{ + flex: none; height: 30px; display: flex; align-items: center; @@ -205,6 +374,7 @@ onUnmounted(() => { padding: 0 10px; margin: 3px 0; background: rgba(65,150,255,.05); + cursor: pointer; } } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 34fd48e3..e8bf1cd1 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -356,22 +356,13 @@ export const addWindowUnload = () => { /** * 向父页面发送消息 */ -// export const postMessageToParent = (obj = {}) => { -// const routerStore:any = useRouterStore() -// if (routerStore && routerStore.getCallByParent) { -// // 获取父页面的 window 对象 -// var parentWindow = window.parent; -// const message = { -// // 属于哪个页面 -// page: 'customLargeScreen', -// // 属于什么类型 -// // type: 'goHome', -// ...obj -// } -// parentWindow.postMessage(JSON.stringify(message), '*'); -// return -// } -// } +export const postMessageToParent = (obj = {}) => { + const message = { + page: 'customLargeScreen', + ...obj + } + window.parent.postMessage(JSON.stringify(message), '*'); +} /** * 从父页面发送并接收消息