|
|
@@ -245,403 +245,409 @@
|
|
|
<template v-if="config.name === 'person_position'">
|
|
|
<PersonPositioning class="content__module" :list="config.config.list" :data="config.data" />
|
|
|
</template>
|
|
|
+ <template v-if="config.name === 'sys_wind_card'">
|
|
|
+ <SysWindCard class="content__module" v-bind="config.config" :data="config.data" />
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, ref } from 'vue';
|
|
|
-import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
|
|
|
-import MiniBoard from './detail/MiniBoard.vue';
|
|
|
-import TimelineList from './detail/TimelineList.vue';
|
|
|
-import TimelineListNew from './detail/TimelineListNew.vue';
|
|
|
-import CustomList from './detail/CustomList.vue';
|
|
|
-import CustomGallery from './detail/CustomGallery.vue';
|
|
|
-import ComplexList from './detail/ComplexList.vue';
|
|
|
-import GalleryList from './detail/GalleryList.vue';
|
|
|
-import CustomTable from './detail/CustomTable.vue';
|
|
|
-import CustomChart from './detail/CustomChart.vue';
|
|
|
-import { clone } from 'lodash-es';
|
|
|
-import { getData, getFormattedText } from '../hooks/helper';
|
|
|
-import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
|
|
|
-import QHCurve from './preset/QHCurve.vue';
|
|
|
-import MeasureDetail from './preset/MeasureDetail.vue';
|
|
|
-import CustomTabs from './preset/CustomTabs.vue';
|
|
|
-import AIChat from '/@/components/AIChat/MiniChat.vue';
|
|
|
-import DeviceAlarm from './preset/DeviceAlarm.vue';
|
|
|
-import SelectCs from './preset/SelectCs.vue';
|
|
|
-import MiniBoardNew from './detail/MiniBoard-New.vue';
|
|
|
-import Partition from './preset/partition.vue';
|
|
|
-import SelectorDualChart from './preset/selectorDualChart.vue';
|
|
|
-import RadioLabel from './preset/radioLabel.vue';
|
|
|
-import ButtonList from './preset/buttonList.vue';
|
|
|
-import NitrogenBtnList from './preset/nitrogenBtnList.vue';
|
|
|
-import cardList from './preset/cardList.vue';
|
|
|
-import generalList from './preset/generalList.vue';
|
|
|
-import GateBoard from '../belt/components/detail/gateBoard.vue';
|
|
|
-import fireGateBoard from '../belt/components/detail/fireGateBoard.vue';
|
|
|
-import PersonPositioning from './preset/PersonPositioning.vue';
|
|
|
-// ==================== 新增皮带巷火灾监测组件 ====================
|
|
|
-import SensorStatusPanel from './belt/SensorStatusPanel.vue';
|
|
|
-import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
|
|
|
-import WarningResultList from './belt/WarningResultList.vue';
|
|
|
-import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
|
|
|
-// 首页组件
|
|
|
-import CustomListBelt from './belt/CustomListBelt.vue';
|
|
|
-import ComplexListBelt from './belt/ComplexListBelt.vue';
|
|
|
-import ComplexList1Belt from './belt/ComplexList1Belt.vue';
|
|
|
-import CustomTableBelt from './belt/CustomTableBelt.vue';
|
|
|
-import SprayControl from './belt/SprayControl.vue';
|
|
|
-import CameraList from './belt/CameraList.vue';
|
|
|
-import CameraListTest from './belt/CameraListTest.vue';
|
|
|
-const props = defineProps<{
|
|
|
- data: any;
|
|
|
- moduleData: Config['moduleData'];
|
|
|
- chartData: any;
|
|
|
- activeId?: [String, Number];
|
|
|
-}>();
|
|
|
+ import { computed, defineAsyncComponent, ref } from 'vue';
|
|
|
+ import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
|
|
|
+ import MiniBoard from './detail/MiniBoard.vue';
|
|
|
+ import TimelineList from './detail/TimelineList.vue';
|
|
|
+ import TimelineListNew from './detail/TimelineListNew.vue';
|
|
|
+ import CustomList from './detail/CustomList.vue';
|
|
|
+ import CustomGallery from './detail/CustomGallery.vue';
|
|
|
+ import ComplexList from './detail/ComplexList.vue';
|
|
|
+ import GalleryList from './detail/GalleryList.vue';
|
|
|
+ import CustomTable from './detail/CustomTable.vue';
|
|
|
+ import CustomChart from './detail/CustomChart.vue';
|
|
|
+ import { clone } from 'lodash-es';
|
|
|
+ import { getData, getFormattedText } from '../hooks/helper';
|
|
|
+ import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
|
|
|
+ import QHCurve from './preset/QHCurve.vue';
|
|
|
+ import MeasureDetail from './preset/MeasureDetail.vue';
|
|
|
+ import CustomTabs from './preset/CustomTabs.vue';
|
|
|
+ import AIChat from '/@/components/AIChat/MiniChat.vue';
|
|
|
+ import DeviceAlarm from './preset/DeviceAlarm.vue';
|
|
|
+ import SelectCs from './preset/SelectCs.vue';
|
|
|
+ import MiniBoardNew from './detail/MiniBoard-New.vue';
|
|
|
+ import Partition from './preset/partition.vue';
|
|
|
+ import SelectorDualChart from './preset/selectorDualChart.vue';
|
|
|
+ import RadioLabel from './preset/radioLabel.vue';
|
|
|
+ import ButtonList from './preset/buttonList.vue';
|
|
|
+ import NitrogenBtnList from './preset/nitrogenBtnList.vue';
|
|
|
+ import cardList from './preset/cardList.vue';
|
|
|
+ import generalList from './preset/generalList.vue';
|
|
|
+ import GateBoard from '../belt/components/detail/gateBoard.vue';
|
|
|
+ import fireGateBoard from '../belt/components/detail/fireGateBoard.vue';
|
|
|
+ import PersonPositioning from './preset/PersonPositioning.vue';
|
|
|
+ // ==================== 新增皮带巷火灾监测组件 ====================
|
|
|
+ import SensorStatusPanel from './belt/SensorStatusPanel.vue';
|
|
|
+ import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
|
|
|
+ import WarningResultList from './belt/WarningResultList.vue';
|
|
|
+ import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
|
|
|
+ // 首页组件
|
|
|
+ import CustomListBelt from './belt/CustomListBelt.vue';
|
|
|
+ import ComplexListBelt from './belt/ComplexListBelt.vue';
|
|
|
+ import ComplexList1Belt from './belt/ComplexList1Belt.vue';
|
|
|
+ import CustomTableBelt from './belt/CustomTableBelt.vue';
|
|
|
+ import SprayControl from './belt/SprayControl.vue';
|
|
|
+ import CameraList from './belt/CameraList.vue';
|
|
|
+ import CameraListTest from './belt/CameraListTest.vue';
|
|
|
|
|
|
-const emit = defineEmits<{
|
|
|
- (e: 'start-spray', data: any): void;
|
|
|
- (e: 'clickItem', data: any): void;
|
|
|
- (e: 'emergency-action', action: string, data: any): void;
|
|
|
-}>();
|
|
|
-const handleClickItem = (data: any) => {
|
|
|
- emit('clickItem', data);
|
|
|
-};
|
|
|
-const { background, layout } = props.moduleData;
|
|
|
+ const SysWindCard = defineAsyncComponent(() => import('./preset/SysWindCard.vue'));
|
|
|
|
|
|
-// 获取当原始配置带 items 项时的最终 items 配置
|
|
|
-function getItems(raw: any, items: CommonItem[]) {
|
|
|
- return items.map((i) => {
|
|
|
- return {
|
|
|
- ...i,
|
|
|
- label: getFormattedText(raw, i.label, i.trans),
|
|
|
- value: getFormattedText(raw, i.value, i.trans),
|
|
|
- };
|
|
|
- });
|
|
|
-}
|
|
|
+ const props = defineProps<{
|
|
|
+ data: any;
|
|
|
+ moduleData: Config['moduleData'];
|
|
|
+ chartData: any;
|
|
|
+ activeId?: [String, Number];
|
|
|
+ }>();
|
|
|
|
|
|
-// 获取当 List 组件配置带 items 项时的最终 items 配置
|
|
|
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
|
|
|
- if (mapFromData && Array.isArray(raw)) {
|
|
|
- return raw.map((data) => {
|
|
|
- const item = items[0];
|
|
|
+ const emit = defineEmits<{
|
|
|
+ (e: 'start-spray', data: any): void;
|
|
|
+ (e: 'clickItem', data: any): void;
|
|
|
+ (e: 'emergency-action', action: string, data: any): void;
|
|
|
+ }>();
|
|
|
+ const handleClickItem = (data: any) => {
|
|
|
+ emit('clickItem', data);
|
|
|
+ };
|
|
|
+ const { background, layout } = props.moduleData;
|
|
|
+
|
|
|
+ // 获取当原始配置带 items 项时的最终 items 配置
|
|
|
+ function getItems(raw: any, items: CommonItem[]) {
|
|
|
+ return items.map((i) => {
|
|
|
return {
|
|
|
- ...item,
|
|
|
- label: getFormattedText(data, item.label, item.trans),
|
|
|
- value: getFormattedText(data, item.value, item.trans),
|
|
|
+ ...i,
|
|
|
+ label: getFormattedText(raw, i.label, i.trans),
|
|
|
+ value: getFormattedText(raw, i.value, i.trans),
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
- return getItems(raw, items);
|
|
|
-}
|
|
|
|
|
|
-/** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
|
|
|
-const layoutConfig = computed(() => {
|
|
|
- const refData = props.data;
|
|
|
- const board = clone(props.moduleData.board) || [];
|
|
|
- const list = clone(props.moduleData.list) || [];
|
|
|
- const gallery = clone(props.moduleData.gallery) || [];
|
|
|
- const complex_list = clone(props.moduleData.complex_list) || [];
|
|
|
- const gallery_list = clone(props.moduleData.gallery_list) || [];
|
|
|
- const tabs = clone(props.moduleData.tabs) || [];
|
|
|
- const chart = clone(props.moduleData.chart) || [];
|
|
|
- const table = clone(props.moduleData.table) || [];
|
|
|
- const preset = clone(props.moduleData.preset) || [];
|
|
|
- const partition = clone(props.moduleData.partition) || [];
|
|
|
+ // 获取当 List 组件配置带 items 项时的最终 items 配置
|
|
|
+ function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
|
|
|
+ if (mapFromData && Array.isArray(raw)) {
|
|
|
+ return raw.map((data) => {
|
|
|
+ const item = items[0];
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: getFormattedText(data, item.label, item.trans),
|
|
|
+ value: getFormattedText(data, item.value, item.trans),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return getItems(raw, items);
|
|
|
+ }
|
|
|
|
|
|
- const mockData = clone(props.chartData) || [];
|
|
|
+ /** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
|
|
|
+ const layoutConfig = computed(() => {
|
|
|
+ const refData = props.data;
|
|
|
+ const board = clone(props.moduleData.board) || [];
|
|
|
+ const list = clone(props.moduleData.list) || [];
|
|
|
+ const gallery = clone(props.moduleData.gallery) || [];
|
|
|
+ const complex_list = clone(props.moduleData.complex_list) || [];
|
|
|
+ const gallery_list = clone(props.moduleData.gallery_list) || [];
|
|
|
+ const tabs = clone(props.moduleData.tabs) || [];
|
|
|
+ const chart = clone(props.moduleData.chart) || [];
|
|
|
+ const table = clone(props.moduleData.table) || [];
|
|
|
+ const preset = clone(props.moduleData.preset) || [];
|
|
|
+ const partition = clone(props.moduleData.partition) || [];
|
|
|
|
|
|
- return layout.items.reduce((arr: any[], item) => {
|
|
|
- switch (item.name) {
|
|
|
- case 'board': {
|
|
|
- const cfg = board.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- overflow: true,
|
|
|
- ...item,
|
|
|
- ...cfg,
|
|
|
- items: getItems(data, cfg.items),
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'list': {
|
|
|
- const cfg = list.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- overflow: true,
|
|
|
- ...item,
|
|
|
- ...cfg,
|
|
|
- items: getListItems(data, cfg.items, cfg.mapFromData),
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'gallery': {
|
|
|
- const cfg = gallery.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- overflow: true,
|
|
|
- ...item,
|
|
|
- ...cfg,
|
|
|
- items: getItems(data, cfg.items),
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'complex_list': {
|
|
|
- const cfg = complex_list.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- if (cfg.mapFromData) {
|
|
|
- const firstListItem = cfg.items[0];
|
|
|
+ const mockData = clone(props.chartData) || [];
|
|
|
+
|
|
|
+ return layout.items.reduce((arr: any[], item) => {
|
|
|
+ switch (item.name) {
|
|
|
+ case 'board': {
|
|
|
+ const cfg = board.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
arr.push({
|
|
|
overflow: true,
|
|
|
...item,
|
|
|
...cfg,
|
|
|
- items: (data || []).map((d: any) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
- contents: firstListItem.contents.map((e: any) => {
|
|
|
- const contentItem = {
|
|
|
- ...e,
|
|
|
- label: getFormattedText(d, e.label, e.trans),
|
|
|
- value: getFormattedText(d, e.value, e.trans),
|
|
|
- };
|
|
|
- if (cfg.pagetype === 'complex_list1') {
|
|
|
- contentItem.id = getFormattedText(d, e.id, e.trans);
|
|
|
- }
|
|
|
- return contentItem;
|
|
|
- }),
|
|
|
- };
|
|
|
- }),
|
|
|
+ items: getItems(data, cfg.items),
|
|
|
});
|
|
|
- } else {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case 'list': {
|
|
|
+ const cfg = list.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
arr.push({
|
|
|
overflow: true,
|
|
|
...item,
|
|
|
...cfg,
|
|
|
- items: cfg.items.map((i: any) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(data, i.title, i.trans),
|
|
|
- contents: i.contents.map((e: any) => {
|
|
|
- return {
|
|
|
- ...e,
|
|
|
- label: getFormattedText(data, e.label, e.trans),
|
|
|
- value: getFormattedText(data, e.value, e.trans),
|
|
|
- };
|
|
|
- }),
|
|
|
- };
|
|
|
- }),
|
|
|
+ items: getListItems(data, cfg.items, cfg.mapFromData),
|
|
|
});
|
|
|
+ break;
|
|
|
}
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'gallery_list': {
|
|
|
- const cfg = gallery_list.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- overflow: true,
|
|
|
- ...item,
|
|
|
- ...cfg,
|
|
|
- items: getItems(data, cfg.items),
|
|
|
- galleryItems: getItems(data, cfg.galleryItems),
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'tabs': {
|
|
|
- const cfg = tabs.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- if (cfg.mapFromData) {
|
|
|
- const firstListItem = cfg.items[0];
|
|
|
+ case 'gallery': {
|
|
|
+ const cfg = gallery.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
arr.push({
|
|
|
overflow: true,
|
|
|
...item,
|
|
|
...cfg,
|
|
|
- items: (data || []).map((d: any) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
- contents: firstListItem.contents.map((e: any) => {
|
|
|
- return {
|
|
|
- ...e,
|
|
|
- label: getFormattedText(d, e.label, e.trans),
|
|
|
- value: getFormattedText(d, e.value, e.trans),
|
|
|
- };
|
|
|
- }),
|
|
|
- };
|
|
|
- }),
|
|
|
+ items: getItems(data, cfg.items),
|
|
|
});
|
|
|
- } else {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case 'complex_list': {
|
|
|
+ const cfg = complex_list.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
+ if (cfg.mapFromData) {
|
|
|
+ const firstListItem = cfg.items[0];
|
|
|
+ arr.push({
|
|
|
+ overflow: true,
|
|
|
+ ...item,
|
|
|
+ ...cfg,
|
|
|
+ items: (data || []).map((d: any) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
+ contents: firstListItem.contents.map((e: any) => {
|
|
|
+ const contentItem = {
|
|
|
+ ...e,
|
|
|
+ label: getFormattedText(d, e.label, e.trans),
|
|
|
+ value: getFormattedText(d, e.value, e.trans),
|
|
|
+ };
|
|
|
+ if (cfg.pagetype === 'complex_list1') {
|
|
|
+ contentItem.id = getFormattedText(d, e.id, e.trans);
|
|
|
+ }
|
|
|
+ return contentItem;
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ arr.push({
|
|
|
+ overflow: true,
|
|
|
+ ...item,
|
|
|
+ ...cfg,
|
|
|
+ items: cfg.items.map((i: any) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(data, i.title, i.trans),
|
|
|
+ contents: i.contents.map((e: any) => {
|
|
|
+ return {
|
|
|
+ ...e,
|
|
|
+ label: getFormattedText(data, e.label, e.trans),
|
|
|
+ value: getFormattedText(data, e.value, e.trans),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case 'gallery_list': {
|
|
|
+ const cfg = gallery_list.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
arr.push({
|
|
|
overflow: true,
|
|
|
...item,
|
|
|
...cfg,
|
|
|
- items: cfg.items.map((i: any) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(data, i.title, i.trans),
|
|
|
- contents: i.contents.map((e: any) => {
|
|
|
- return {
|
|
|
- ...e,
|
|
|
- label: getFormattedText(data, e.label, e.trans),
|
|
|
- value: getFormattedText(data, e.value, e.trans),
|
|
|
- };
|
|
|
- }),
|
|
|
- };
|
|
|
- }),
|
|
|
+ items: getItems(data, cfg.items),
|
|
|
+ galleryItems: getItems(data, cfg.galleryItems),
|
|
|
});
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case 'tabs': {
|
|
|
+ const cfg = tabs.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
+ if (cfg.mapFromData) {
|
|
|
+ const firstListItem = cfg.items[0];
|
|
|
+ arr.push({
|
|
|
+ overflow: true,
|
|
|
+ ...item,
|
|
|
+ ...cfg,
|
|
|
+ items: (data || []).map((d: any) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
+ contents: firstListItem.contents.map((e: any) => {
|
|
|
+ return {
|
|
|
+ ...e,
|
|
|
+ label: getFormattedText(d, e.label, e.trans),
|
|
|
+ value: getFormattedText(d, e.value, e.trans),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ arr.push({
|
|
|
+ overflow: true,
|
|
|
+ ...item,
|
|
|
+ ...cfg,
|
|
|
+ items: cfg.items.map((i: any) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(data, i.title, i.trans),
|
|
|
+ contents: i.contents.map((e: any) => {
|
|
|
+ return {
|
|
|
+ ...e,
|
|
|
+ label: getFormattedText(data, e.label, e.trans),
|
|
|
+ value: getFormattedText(data, e.value, e.trans),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case 'chart': {
|
|
|
+ const cfg = chart.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
|
|
|
+ arr.push({
|
|
|
+ ...item,
|
|
|
+ config: cfg,
|
|
|
+ data,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case 'table': {
|
|
|
+ const cfg = table.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ // const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
+ arr.push({
|
|
|
+ ...cfg,
|
|
|
+ ...item,
|
|
|
+ columns: cfg.columns,
|
|
|
+ data: refData,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case 'partition': {
|
|
|
+ const cfg = partition.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
+ arr.push({
|
|
|
+ overflow: true,
|
|
|
+ ...item,
|
|
|
+ data,
|
|
|
+ ...cfg,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ default: {
|
|
|
+ const cfg = preset.shift();
|
|
|
+ if (!cfg) break;
|
|
|
+ const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
+ arr.push({
|
|
|
+ ...item,
|
|
|
+ data,
|
|
|
+ config: cfg,
|
|
|
+ });
|
|
|
+ break;
|
|
|
}
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'chart': {
|
|
|
- const cfg = chart.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- ...item,
|
|
|
- config: cfg,
|
|
|
- data,
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'table': {
|
|
|
- const cfg = table.shift();
|
|
|
- if (!cfg) break;
|
|
|
- // const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- ...cfg,
|
|
|
- ...item,
|
|
|
- columns: cfg.columns,
|
|
|
- data: refData,
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'partition': {
|
|
|
- const cfg = partition.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- overflow: true,
|
|
|
- ...item,
|
|
|
- data,
|
|
|
- ...cfg,
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- default: {
|
|
|
- const cfg = preset.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
- arr.push({
|
|
|
- ...item,
|
|
|
- data,
|
|
|
- config: cfg,
|
|
|
- });
|
|
|
- break;
|
|
|
}
|
|
|
- }
|
|
|
- return arr;
|
|
|
- }, []);
|
|
|
-});
|
|
|
+ return arr;
|
|
|
+ }, []);
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@import '@/design/theme.less';
|
|
|
+ @import '@/design/theme.less';
|
|
|
|
|
|
-.content {
|
|
|
- height: calc(100% - 30px);
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
-}
|
|
|
-.content__background {
|
|
|
- width: 100%;
|
|
|
- // height: 100%;
|
|
|
- height: calc(100% - 65px);
|
|
|
- position: absolute;
|
|
|
- top: 65px;
|
|
|
- left: 0;
|
|
|
- z-index: 0;
|
|
|
- object-fit: fill;
|
|
|
- padding: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.content__background_1 {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0;
|
|
|
- z-index: 0;
|
|
|
- object-fit: fill;
|
|
|
-}
|
|
|
+ .content {
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .content__background {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ height: calc(100% - 65px);
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ object-fit: fill;
|
|
|
+ padding: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .content__background_1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ object-fit: fill;
|
|
|
+ }
|
|
|
|
|
|
-.image__background {
|
|
|
- width: 35%;
|
|
|
- height: 61%;
|
|
|
- left: 30%;
|
|
|
-}
|
|
|
+ .image__background {
|
|
|
+ width: 35%;
|
|
|
+ height: 61%;
|
|
|
+ left: 30%;
|
|
|
+ }
|
|
|
|
|
|
-.content__module {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+ .content__module {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
-.content__module1 {
|
|
|
- background: url('@/assets/images/vent/homeNew/databg/4.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 129px;
|
|
|
- margin-top: 20%;
|
|
|
-}
|
|
|
+ .content__module1 {
|
|
|
+ background: url('@/assets/images/vent/homeNew/databg/4.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 129px;
|
|
|
+ margin-top: 20%;
|
|
|
+ }
|
|
|
|
|
|
-.content__moduleFire {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin-left: -24% !important;
|
|
|
-}
|
|
|
+ .content__moduleFire {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: -24% !important;
|
|
|
+ }
|
|
|
|
|
|
-.content__module_dust {
|
|
|
- background: url('@/assets/images/vent/homeNew/bottomBg.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+ .content__module_dust {
|
|
|
+ background: url('@/assets/images/vent/homeNew/bottomBg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 5px !important;
|
|
|
-}
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 5px !important;
|
|
|
+ }
|
|
|
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- width: 5px !important;
|
|
|
-}
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ width: 5px !important;
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
+ :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-select-arrow) {
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
+ :deep(.zxm-select-arrow) {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-select-selection-item) {
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
+ :deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-select-selection-placeholder) {
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
+ :deep(.zxm-select-selection-placeholder) {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
|
|
|
-:deep(.dialog-overlay) {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: unset;
|
|
|
- box-shadow: unset;
|
|
|
-}
|
|
|
+ :deep(.dialog-overlay) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: unset;
|
|
|
+ box-shadow: unset;
|
|
|
+ }
|
|
|
</style>
|
