|
|
@@ -168,406 +168,406 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed } from 'vue';
|
|
|
-import {
|
|
|
- CommonItem,
|
|
|
- Config,
|
|
|
- // ModuleDataBoard,
|
|
|
- // ModuleDataChart,
|
|
|
- // ModuleDataList,
|
|
|
- // ModuleDataPreset,
|
|
|
- // ModuleDataTable,
|
|
|
-} from '../../../deviceManager/configurationTable/types';
|
|
|
-import MiniBoard from '../../components/detail/MiniBoard.vue';
|
|
|
-import TimelineList from '../../components/detail/TimelineList.vue';
|
|
|
-import TimelineListNew from '../../components/detail/TimelineListNew.vue';
|
|
|
-import CustomList from '../../components/detail/CustomList.vue';
|
|
|
-import CustomGallery from '../../components/detail/CustomGallery.vue';
|
|
|
-import CustomGalleryNew from '../../components/preset/CustomGalleryNew.vue';
|
|
|
-import ComplexList from '../../components/detail/ComplexList.vue';
|
|
|
-import ComplexListNew from '../../components/preset/ComplexListNew.vue';
|
|
|
-import GalleryList from '../../components/detail/GalleryList.vue';
|
|
|
-import CustomTable from '../../components/detail/CustomTable.vue';
|
|
|
-import CustomTableNew from '../../components/preset/CustomTableNew.vue';
|
|
|
-import CustomChart from '../../components/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 '../../components/preset/QHCurve.vue';
|
|
|
-import MeasureDetail from '../../components/preset/MeasureDetail.vue';
|
|
|
-import CustomTabs from '../../components/preset/CustomTabs.vue';
|
|
|
-import AIChat from '/@/components/AIChat/MiniChat.vue';
|
|
|
-import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
|
|
|
-import SelectCs from '../../components/preset/SelectCs.vue';
|
|
|
-import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
|
|
|
-import Partition from '../../components/preset/partition.vue';
|
|
|
-import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
|
|
|
-import RadioLabel from '../../components/preset/radioLabel.vue';
|
|
|
-import ButtonList from '../../components/preset/buttonList.vue';
|
|
|
-import VentRoute from '../../components/preset/ventRoute.vue';
|
|
|
-import EarlyWarnMonitor from '../../components/preset/earlyWarnMonitor.vue';
|
|
|
-import CoalSeam from '../../components/preset/CoalSeam.vue';
|
|
|
-// import FIreWarn from './preset/FIreWarn.vue';
|
|
|
-// import FIreControl from './preset/FIreControl.vue';
|
|
|
-
|
|
|
-const props = defineProps<{
|
|
|
- data: any;
|
|
|
- moduleData: Config['moduleData'];
|
|
|
-}>();
|
|
|
-
|
|
|
-const { background, layout } = props.moduleData;
|
|
|
-
|
|
|
-// 获取当原始配置带 items 项时的最终 items 配置
|
|
|
-function getItems(raw, items: CommonItem[]) {
|
|
|
- return items.map((i) => {
|
|
|
- return {
|
|
|
- ...i,
|
|
|
- label: getFormattedText(raw, i.label, i.trans),
|
|
|
- value: getFormattedText(raw, i.value, i.trans),
|
|
|
- };
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-// 获取当 List 组件配置带 items 项时的最终 items 配置
|
|
|
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
|
|
|
- if (mapFromData && Array.isArray(raw)) {
|
|
|
- return raw.map((data) => {
|
|
|
- const item = items[0];
|
|
|
+ import { computed } from 'vue';
|
|
|
+ import {
|
|
|
+ CommonItem,
|
|
|
+ Config,
|
|
|
+ // ModuleDataBoard,
|
|
|
+ // ModuleDataChart,
|
|
|
+ // ModuleDataList,
|
|
|
+ // ModuleDataPreset,
|
|
|
+ // ModuleDataTable,
|
|
|
+ } from '../../../deviceManager/configurationTable/types';
|
|
|
+ import MiniBoard from '../../components/detail/MiniBoard.vue';
|
|
|
+ import TimelineList from '../../components/detail/TimelineList.vue';
|
|
|
+ import TimelineListNew from '../../components/detail/TimelineListNew.vue';
|
|
|
+ import CustomList from '../../components/detail/CustomList.vue';
|
|
|
+ import CustomGallery from '../../components/detail/CustomGallery.vue';
|
|
|
+ import CustomGalleryNew from '../../components/preset/CustomGalleryNew.vue';
|
|
|
+ import ComplexList from '../../components/detail/ComplexList.vue';
|
|
|
+ import ComplexListNew from '../../components/preset/ComplexListNew.vue';
|
|
|
+ import GalleryList from '../../components/detail/GalleryList.vue';
|
|
|
+ import CustomTable from '../../components/detail/CustomTable.vue';
|
|
|
+ import CustomTableNew from '../../components/preset/CustomTableNew.vue';
|
|
|
+ import CustomChart from '../../components/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 '../../components/preset/QHCurve.vue';
|
|
|
+ import MeasureDetail from '../../components/preset/MeasureDetail.vue';
|
|
|
+ import CustomTabs from '../../components/preset/CustomTabs.vue';
|
|
|
+ import AIChat from '/@/components/AIChat/MiniChat.vue';
|
|
|
+ import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
|
|
|
+ import SelectCs from '../../components/preset/SelectCs.vue';
|
|
|
+ import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
|
|
|
+ import Partition from '../../components/preset/partition.vue';
|
|
|
+ import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
|
|
|
+ import RadioLabel from '../../components/preset/radioLabel.vue';
|
|
|
+ import ButtonList from '../../components/preset/buttonList.vue';
|
|
|
+ import VentRoute from '../../components/preset/ventRoute.vue';
|
|
|
+ import EarlyWarnMonitor from '../../components/preset/earlyWarnMonitor.vue';
|
|
|
+ import CoalSeam from '../../components/preset/CoalSeam.vue';
|
|
|
+ // import FIreWarn from './preset/FIreWarn.vue';
|
|
|
+ // import FIreControl from './preset/FIreControl.vue';
|
|
|
+
|
|
|
+ const props = defineProps<{
|
|
|
+ data: any;
|
|
|
+ moduleData: Config['moduleData'];
|
|
|
+ }>();
|
|
|
+
|
|
|
+ const { background, layout } = props.moduleData;
|
|
|
+
|
|
|
+ // 获取当原始配置带 items 项时的最终 items 配置
|
|
|
+ function getItems(raw, 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 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
|
|
|
-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,
|
|
|
+ // 获取当 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,
|
|
|
- ...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);
|
|
|
+ label: getFormattedText(data, item.label, item.trans),
|
|
|
+ value: getFormattedText(data, item.value, item.trans),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return getItems(raw, items);
|
|
|
+ }
|
|
|
|
|
|
- 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);
|
|
|
+ /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
|
|
|
+ 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);
|
|
|
|
|
|
- if (cfg.mapFromData) {
|
|
|
- const firstListItem = cfg.items[0];
|
|
|
arr.push({
|
|
|
overflow: true,
|
|
|
...item,
|
|
|
...cfg,
|
|
|
- items: (data || []).map((d) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
- contents: firstListItem.contents.map((e) => {
|
|
|
- return {
|
|
|
- ...e,
|
|
|
- label: getFormattedText(d, e.label, e.trans),
|
|
|
- value: getFormattedText(d, e.value, e.trans),
|
|
|
- };
|
|
|
- }),
|
|
|
- };
|
|
|
- }),
|
|
|
+ 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) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(data, i.title, i.trans),
|
|
|
- contents: i.contents.map((e) => {
|
|
|
- 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);
|
|
|
+ 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),
|
|
|
- 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) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
- contents: firstListItem.contents.map((e) => {
|
|
|
- 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) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
+ contents: firstListItem.contents.map((e) => {
|
|
|
+ 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) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(data, i.title, i.trans),
|
|
|
+ contents: i.contents.map((e) => {
|
|
|
+ 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) => {
|
|
|
- return {
|
|
|
- title: getFormattedText(data, i.title, i.trans),
|
|
|
- contents: i.contents.map((e) => {
|
|
|
- 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;
|
|
|
}
|
|
|
- break;
|
|
|
- }
|
|
|
- case 'chart': {
|
|
|
- const cfg = chart.shift();
|
|
|
- if (!cfg) break;
|
|
|
- const data = getData(refData, cfg.readFrom, cfg.parser);
|
|
|
+ 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) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(d, firstListItem.title, firstListItem.trans),
|
|
|
+ contents: firstListItem.contents.map((e) => {
|
|
|
+ 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) => {
|
|
|
+ return {
|
|
|
+ title: getFormattedText(data, i.title, i.trans),
|
|
|
+ contents: i.contents.map((e) => {
|
|
|
+ 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 = 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({
|
|
|
+ ...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,
|
|
|
- });
|
|
|
- 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({
|
|
|
+ ...cfg,
|
|
|
+ ...item,
|
|
|
+ columns: cfg.columns,
|
|
|
+ data,
|
|
|
+ });
|
|
|
+ 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;
|
|
|
+ arr.push({
|
|
|
+ ...item,
|
|
|
+ data,
|
|
|
+ config: cfg,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- // console.log(arr,'arr---')
|
|
|
- return arr;
|
|
|
- }, []);
|
|
|
-});
|
|
|
+ // console.log(arr,'arr---')
|
|
|
+ return arr;
|
|
|
+ }, []);
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@import '@/design/theme.less';
|
|
|
-
|
|
|
-.content {
|
|
|
- height: calc(100% - 30px);
|
|
|
- position: relative;
|
|
|
- // z-index: -2;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow-y: auto; // 这里会导致样式无故添加滚动条
|
|
|
- overflow-x: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.content__background {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 0;
|
|
|
- object-fit: fill;
|
|
|
-}
|
|
|
-
|
|
|
-.content__background_1 {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 10px);
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 0;
|
|
|
- z-index: 0;
|
|
|
- object-fit: fill;
|
|
|
-}
|
|
|
-
|
|
|
-.image__background {
|
|
|
- width: 35%;
|
|
|
- height: 61%;
|
|
|
- left: 30%;
|
|
|
-}
|
|
|
-
|
|
|
-.content__module {
|
|
|
- // margin-top: 5px;
|
|
|
- // margin-bottom: 5px;
|
|
|
- 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__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:first-of-type {
|
|
|
-// margin-top: 0;
|
|
|
-// }
|
|
|
-// .content__module:last-of-type {
|
|
|
-// margin-bottom: 0;
|
|
|
-// }
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 5px !important;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- width: 5px !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
- /* background-color: transparent; */
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.zxm-select-arrow) {
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.zxm-select-selection-item) {
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.zxm-select-selection-placeholder) {
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.dialog-overlay) {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: unset;
|
|
|
- box-shadow: unset;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 5px !important;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- width: 5px !important;
|
|
|
-}
|
|
|
+ @import '@/design/theme.less';
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ position: relative;
|
|
|
+ // z-index: -2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-y: auto; // 这里会导致样式无故添加滚动条
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content__background {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ object-fit: fill;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content__background_1 {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ object-fit: fill;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image__background {
|
|
|
+ width: 35%;
|
|
|
+ height: 61%;
|
|
|
+ left: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content__module {
|
|
|
+ // margin-top: 5px;
|
|
|
+ // margin-bottom: 5px;
|
|
|
+ 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__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:first-of-type {
|
|
|
+ // margin-top: 0;
|
|
|
+ // }
|
|
|
+ // .content__module:last-of-type {
|
|
|
+ // margin-bottom: 0;
|
|
|
+ // }
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 5px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ width: 5px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ /* background-color: transparent; */
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-select-arrow) {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-select-selection-placeholder) {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.dialog-overlay) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: unset;
|
|
|
+ box-shadow: unset;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 5px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ width: 5px !important;
|
|
|
+ }
|
|
|
</style>
|
