[Wip 0000] 为可配置首页添加样式、标题配置功能

src/utils/http/axios/Axios.ts

@@ -226,7 +226,7 @@ export class VAxios {
               //zhangyafei---添加回调方法
               config.success && config.success(res.data);
               //zhangyafei---添加回调方法
-              resolve(ret);//lxh
+              resolve(ret); //lxh
             } catch (err) {
               reject(err || new Error('request error!'));
             }

src/views/vent/deviceManager/configurationTable/adapters.ts

@@ -1,20 +1,8 @@
 import _ from 'lodash-es';
-import { ModuleBGMap, ModuleChartTypeMap, ModulePositionMap, ModuleSizeMap } from './options';
-
-const map = {
-  ...ModuleBGMap,
-  ...ModuleChartTypeMap,
-  ...ModulePositionMap,
-  ...ModuleSizeMap,
-};
-
-export interface ModuleData {
-  list?: Record<string, string>;
-  chart?: Record<string, string>;
-}
+import { ModuleData, ShowStyle } from './types';
 
 /** 将原本的 formData 格式化为 api.saveOrUpdate 需要的格式 */
-export function parseFormDataToParams(formData: Record<string, number | string | undefined>): ModuleData {
+export function parseFormDataToParams(formData: Record<string, number | string | undefined>) {
   const params = {};
   _.forEach(formData, (v: string | undefined, k) => {
     if (!v) return;
@@ -29,13 +17,10 @@ export function parseFormDataToParams(formData: Record<string, number | string |
 }
 
 /** 将 api.list 返回的 moduleData 格式化，格式化之后可以支持对应的表单以用，该方法会修改源数据 */
-export function parseModuleData(listData: { moduleData: ModuleData; showStyle: Record<string, string> }) {
+export function parseModuleData(listData: { moduleData: ModuleData; showStyle: ShowStyle }) {
   _.forEach(listData.moduleData, (v, k) => {
     listData[`moduleData.${k}`] = JSON.stringify(v);
   });
-  _.forEach(listData.showStyle, (v, k) => {
-    listData.showStyle[k] = map[v];
-  });
 
   return listData;
 }

src/views/vent/deviceManager/configurationTable/configuration.api.ts

@@ -1,4 +1,5 @@
-import { parseFormDataToParams, parseModuleData } from './adapters';
+import { parseFormDataToParams } from './adapters';
+import { Config } from './types';
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
@@ -12,7 +13,9 @@ enum Api {
  * 列表接口
  * @param params
  */
-export const list = (params) => defHttp.post({ url: Api.list, params });
+export function list(params: unknown): Promise<{ records: Config[] }> {
+  return defHttp.post({ url: Api.list, data: params }, { joinParamsToUrl: true });
+}
 // defHttp.post({ url: Api.list, params }).then((result) => {
 //   result.records.forEach((item) => {
 //     parseModuleData(item);

src/views/vent/deviceManager/configurationTable/configuration.data.ts

@@ -1,4 +1,4 @@
-import { ModuleBGOptions, ModuleChartTypeOptions, ModulePositionOptions, ModuleSizeOptions } from './options';
+import { ModuleVersionOptions, ModuleChartTypeOptions, ModulePositionOptions, ModuleSizeOptions } from './options';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import _ from 'lodash-es';
@@ -29,8 +29,8 @@ export const columns: BasicColumn[] = [
     dataIndex: 'showStyle.size',
   },
   {
-    title: '模块背景',
-    dataIndex: 'showStyle.background',
+    title: '模块版本',
+    dataIndex: 'showStyle.version',
   },
   {
     title: '模块定位',
@@ -124,11 +124,11 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    label: '模块背景',
-    field: 'showStyle.background',
+    label: '模块版本',
+    field: 'showStyle.version',
     component: 'Select',
     componentProps: {
-      options: ModuleBGOptions,
+      options: ModuleVersionOptions,
     },
   },
   {

src/views/vent/deviceManager/configurationTable/index.vue

@@ -28,14 +28,14 @@
         <template v-if="column.key === 'showStyle.size'">
           {{ get(ModuleSizeMap, record.showStyle?.size) }}
         </template>
-        <template v-if="column.key === 'showStyle.background'">
-          {{ get(ModuleBGMap, record.showStyle?.size) }}
+        <template v-if="column.key === 'showStyle.version'">
+          {{ get(ModuleVersionMap, record.showStyle?.version) }}
         </template>
         <template v-if="column.key === 'showStyle.position'">
-          {{ get(ModulePositionMap, record.showStyle?.size) }}
+          {{ get(ModulePositionMap, record.showStyle?.position) }}
         </template>
         <template v-if="column.key === 'showStyle.charttype'">
-          {{ get(ModuleChartTypeMap, record.showStyle?.size) }}
+          {{ get(ModuleChartTypeMap, record.showStyle?.charttype) }}
         </template>
       </template>
     </NormalTable>
@@ -47,7 +47,7 @@
   import { ref } from 'vue';
   import NormalTable from '../comment/NormalTable.vue';
   import { list, deleteById, saveOrUpdate } from './configuration.api';
-  import { ModuleBGMap, ModuleChartTypeMap, ModulePositionMap, ModuleSizeMap } from './options';
+  import { ModuleVersionMap, ModuleChartTypeMap, ModulePositionMap, ModuleSizeMap } from './options';
   import { searchFormSchema, columns, formSchema } from './configuration.data';
   import { get } from '../../home/billboard/utils';
 

src/views/vent/deviceManager/configurationTable/options.ts

@@ -2,23 +2,27 @@ import _ from 'lodash-es';
 
 export const ModuleSizeMap = {
   'width:450px;height:280px;': '标准尺寸(450*280)',
-  'width:1000px;height:280px;': '拉伸尺寸(1000*280)',
+  'width:450px;height:570px;': '纵向拉伸(450*570)',
+  'width:450px;height:860px;': '纵向填充(450*860)',
+  'width:1000px;height:280px;': '横向拉伸(1000*280)',
+  'width:1920px;height:280px;': '横向填充(1920*280)',
 };
 export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
   value: k,
   label: v,
 }));
 
-export const ModuleBGMap = {
-  ODD: '旧版',
-  NEW: '新版',
+export const ModuleVersionMap = {
+  original: '原版',
+  enhanced: '新版',
 };
-export const ModuleBGOptions = _.map(ModuleBGMap, (v, k) => ({
+export const ModuleVersionOptions = _.map(ModuleVersionMap, (v, k) => ({
   value: k,
   label: v,
 }));
 
 export const ModulePositionMap = {
+  'display:none;': '不展示',
   'top:60px;left:0;': '左上',
   'top:350px;left:0;': '左中',
   'top:640px;left:0;': '左下',
@@ -41,13 +45,3 @@ export const ModuleChartTypeOptions = _.map(ModuleChartTypeMap, (v, k) => ({
   value: k,
   label: v,
 }));
-
-export const ModuleListTypeMap = {
-  A: '饼状图',
-  bar: '柱状图',
-  line: '折线图',
-};
-export const ModuleListTypeOptions = _.map(ModuleListTypeMap, (v, k) => ({
-  value: k,
-  label: v,
-}));

src/views/vent/deviceManager/configurationTable/types.ts

@@ -0,0 +1,17 @@
+export interface Config {
+  moduleName: string;
+  pageType: string;
+  deviceType: string;
+  moduleData: ModuleData;
+  showStyle: ShowStyle;
+}
+export interface ModuleData {
+  main?: Record<string, string>;
+  chart?: Record<string, string>;
+}
+export interface ShowStyle {
+  size?: string;
+  version?: string;
+  position?: string;
+  charttype?: string;
+}

src/views/vent/home/configurable/components/AirVolumeMonitor.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <!-- <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
+  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
+    <!-- <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
     <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
@@ -8,10 +9,11 @@
       </div>
     </div>
   </CostumeHeader> -->
-  <PictorialBar :option="chartOption" :series-prop-type="seriesPropType" x-axis-prop-type="x" :chart-data="chartData" height="100%" />
-  <!-- <div class="flex justify-around mt-10px">
+    <PictorialBar :option="chartOption" :series-prop-type="seriesPropType" x-axis-prop-type="x" :chart-data="chartData" height="100%" />
+    <!-- <div class="flex justify-around mt-10px">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" />
   </div> -->
+  </ModuleBasic>
 </template>
 <script lang="ts" setup>
   import { computed, onMounted, ref } from 'vue';
@@ -19,12 +21,21 @@
   import { EChartsOption, graphic } from 'echarts';
   import { useInitConfig } from '../hooks/useInit';
   import _ from 'lodash-es';
+  import ModuleBasic from './moduleBasic.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
   const devicekind = 'fanlocal';
 
-  const { configs, fetchConfig } = useInitConfig(devicekind);
+  const config = ref({
+    moduleName: '矿井风量实时监测',
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      position: 'left:460px;top:640px;',
+      version: 'enhanced',
+    },
+  });
+  const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
 
   onMounted(() => {
     fetchConfig();
@@ -32,8 +43,8 @@
 
   // 适用于 PictorialBar 的 prop，即从配置中选取第一项作取值依赖
   const seriesPropType = computed(() => {
-    if (configs.value.chart) {
-      return Object.keys(configs.value.chart)[0];
+    if (remoteConfig.value.moduleData?.chart) {
+      return Object.keys(remoteConfig.value.moduleData?.chart)[0];
     } else {
       return 'y';
     }

src/views/vent/home/configurable/components/DeviceWarning.vue

@@ -1,32 +1,35 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <CostumeHeader>
-    <template #select>
-      <!-- 填写空的div以覆盖默认的选择框 -->
-      <div></div>
-    </template>
-    <div class="w-200px flex flex-items-center">
-      <RightCircleOutlined class="w-30px" />
-      <div class="flex-grow-1">
-        网络断开
-        <span> {{ warns.length }}条 </span>
+  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
+    <CostumeHeader>
+      <template #select>
+        <!-- 填写空的div以覆盖默认的选择框 -->
+        <div></div>
+      </template>
+      <div class="w-200px flex flex-items-center">
+        <RightCircleOutlined class="w-30px" />
+        <div class="flex-grow-1">
+          网络断开
+          <span> {{ warns.length }}条 </span>
+        </div>
       </div>
+    </CostumeHeader>
+    <div class="timeline">
+      <div v-for="(item, i) in warns" :key="`svvhccdw-${i}`" class="flex items-center timeline-item">
+        <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div>
+        <div class="timeline-item__dot"></div>
+        <div class="timeline-item__label">{{ item.label }}</div>
+        <div :class="`timeline-item__value_${item.color}`">{{ item.count }}</div>
+      </div>
+      <div class="timeline-component"></div>
     </div>
-  </CostumeHeader>
-  <div class="timeline">
-    <div v-for="(item, i) in warns" :key="`svvhccdw-${i}`" class="flex items-center timeline-item">
-      <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div>
-      <div class="timeline-item__dot"></div>
-      <div class="timeline-item__label">{{ item.label }}</div>
-      <div :class="`timeline-item__value_${item.color}`">{{ item.count }}</div>
-    </div>
-    <div class="timeline-component"></div>
-  </div>
+  </ModuleBasic>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
   // import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
   // import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
+  import ModuleBasic from './moduleBasic.vue';
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   // import MiniBoard from './MiniBoard.vue';
@@ -49,6 +52,15 @@
   //     });
   //   });
   // }
+  const config = ref({
+    moduleName: '采煤工作面智能管控',
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      position: 'right:0px;top:640px;',
+      version: 'enhanced',
+    },
+  });
+  // const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
 
   const warns = ref([
     {

src/views/vent/home/configurable/components/SubVentilate.vue

@@ -1,18 +1,27 @@
 <template>
-  <CostumeHeader v-model:value="selectedDeviceID" :options="options">
-    <div class="w-200px flex flex-items-center">
-      <RightCircleOutlined class="w-30px" />
-      <div class="flex-grow-1">
-        {{ selectedDevice.strinstallpos }}
+  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
+    <CostumeHeader v-model:value="selectedDeviceID" :options="options">
+      <div class="w-200px flex flex-items-center">
+        <RightCircleOutlined class="w-30px" />
+        <div class="flex-grow-1">
+          {{ selectedDevice.strinstallpos }}
+        </div>
       </div>
+    </CostumeHeader>
+    <div class="flex justify-around mt-10px">
+      <MiniBoard
+        v-for="(label, prop) in config.moduleData?.main"
+        :key="`vhccsv-${prop}`"
+        :label="label"
+        :value="get(selectedDevice, prop)"
+        type="A"
+      />
     </div>
-  </CostumeHeader>
-  <div class="flex justify-around mt-10px">
-    <MiniBoard v-for="(label, prop) in configs.list" :key="`vhccsv-${prop}`" :label="label" :value="get(selectedDevice, prop)" type="A" />
-  </div>
+  </ModuleBasic>
 </template>
 <script lang="ts" setup>
   import { onMounted } from 'vue';
+  import ModuleBasic from './moduleBasic.vue';
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import MiniBoard from './MiniBoard.vue';
@@ -23,7 +32,7 @@
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
   const devicekind = 'fanlocal';
 
-  const { configs, fetchConfig } = useInitConfig(devicekind);
+  const { config, fetchConfig } = useInitConfig(devicekind);
   const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);
 
   onMounted(() => {

src/views/vent/home/configurable/components/Ventilate.vue

@@ -1,19 +1,22 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <CostumeHeader v-model:value="selectedDeviceID" :options="options">
-    <div class="w-200px flex flex-items-center">
-      <RightCircleOutlined class="w-30px" />
-      <div class="flex-grow-1">
-        {{ selectedDevice.strinstallpos }}
+  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
+    <CostumeHeader v-model:value="selectedDeviceID" :options="options">
+      <div class="w-200px flex flex-items-center">
+        <RightCircleOutlined class="w-30px" />
+        <div class="flex-grow-1">
+          {{ selectedDevice.strinstallpos }}
+        </div>
       </div>
+    </CostumeHeader>
+    <div class="flex justify-around mt-10px">
+      <MiniBoard v-for="(label, prop) in config.moduleData?.main" :key="`vhccv-${prop}`" :label="label" :value="get(selectedDevice, prop)" type="C" />
     </div>
-  </CostumeHeader>
-  <div class="flex justify-around mt-10px">
-    <MiniBoard v-for="(label, prop) in configs.list" :key="`vhccv-${prop}`" :label="label" :value="get(selectedDevice, prop)" type="C" />
-  </div>
+  </ModuleBasic>
 </template>
 <script lang="ts" setup>
   import { onMounted } from 'vue';
+  import ModuleBasic from './moduleBasic.vue';
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import MiniBoard from './MiniBoard.vue';
@@ -24,7 +27,7 @@
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
   const devicekind = 'fanmain';
 
-  const { configs, fetchConfig } = useInitConfig(devicekind);
+  const { config, fetchConfig } = useInitConfig(devicekind);
   const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);
 
   onMounted(() => {

src/views/vent/home/configurable/components/VentilateAnalysis.vue

@@ -1,24 +1,26 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <CostumeHeader v-model:value="selectedDeviceID" :options="options">
-    <!-- <div class="w-200px flex flex-items-center">
+  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
+    <CostumeHeader v-model:value="selectedDeviceID" :options="options">
+      <!-- <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
         {{ selectedDevice.strinstallpos }}
       </div>
     </div> -->
-  </CostumeHeader>
-  <Pie :option="chartOption" :chart-data="chartData" height="140px" />
-  <div class="flex justify-around mt-10px">
-    <MiniBoard
-      v-for="(label, prop) in configs.list"
-      :key="`vhccva-${prop}`"
-      :label="label"
-      :value="get(selectedDevice, prop)"
-      layout="label-top"
-      type="D"
-    />
-  </div>
+    </CostumeHeader>
+    <Pie :option="chartOption" :chart-data="chartData" height="140px" />
+    <div class="flex justify-around mt-10px">
+      <MiniBoard
+        v-for="(label, prop) in remoteConfig.moduleData?.main"
+        :key="`vhccva-${prop}`"
+        :label="label"
+        :value="get(selectedDevice, prop)"
+        layout="label-top"
+        type="D"
+      />
+    </div>
+  </ModuleBasic>
 </template>
 <script lang="ts" setup>
   import CostumeHeader from './CostumeHeader.vue';
@@ -29,12 +31,21 @@
   import { get } from '../../billboard/utils';
   import _ from 'lodash-es';
   import MiniBoard from './MiniBoard.vue';
+  import ModuleBasic from './moduleBasic.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
   const devicekind = 'fanlocal';
 
-  const { configs, fetchConfig } = useInitConfig(devicekind);
+  const config = ref({
+    moduleName: '通风系统监测与分析',
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      position: 'right:0px;top:60px;',
+      version: 'enhanced',
+    },
+  });
+  const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
   const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);
 
   onMounted(() => {
@@ -56,7 +67,7 @@
   function fetchChartData() {
     return;
     Promise.resolve({ a: 3, b: 7 }).then((res) => {
-      chartData.value = _.map(configs.value.chart || [], (label, prop) => {
+      chartData.value = _.map(remoteConfig.value.moduleData?.chart || [], (label, prop) => {
         return {
           value: _.get(res, prop),
           name: label,

src/views/vent/home/configurable/components/VentilateControl.vue

@@ -1,21 +1,24 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <CostumeHeader v-model:value="selectedDeviceID" :options="options">
-    <div class="w-200px flex flex-items-center">
-      <RightCircleOutlined class="w-30px" />
-      <div class="flex-grow-1">
-        {{ selectedDevice.strinstallpos }}
+  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
+    <CostumeHeader v-model:value="selectedDeviceID" :options="options">
+      <div class="w-200px flex flex-items-center">
+        <RightCircleOutlined class="w-30px" />
+        <div class="flex-grow-1">
+          {{ selectedDevice.strinstallpos }}
+        </div>
       </div>
-    </div>
-  </CostumeHeader>
-  <!-- <div class="flex justify-around mt-10px">
+    </CostumeHeader>
+    <!-- <div class="flex justify-around mt-10px">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" />
   </div> -->
+  </ModuleBasic>
 </template>
 <script lang="ts" setup>
-  import { onMounted } from 'vue';
+  import { onMounted, ref } from 'vue';
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
+  import ModuleBasic from './moduleBasic.vue';
   // import MiniBoard from './MiniBoard.vue';
   import { useInitDevices } from '../hooks/useInit';
   // import { get } from '../../billboard/utils';
@@ -24,6 +27,14 @@
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
   const devicekind = 'fanlocal';
 
+  const config = ref({
+    moduleName: '通风设施远程控制',
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      position: 'left:0;top:640px;',
+      version: 'enhanced',
+    },
+  });
   // const { configs, fetchConfig } = useInitConfig(devicekind);
   const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);
 

src/views/vent/home/configurable/components/WorkSurface.vue

@@ -1,31 +1,33 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <CostumeHeader v-model:value="selectedDeviceID" :options="options">
-    <!-- <div class="w-200px flex flex-items-center">
+  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
+    <CostumeHeader v-model:value="selectedDeviceID" :options="options">
+      <!-- <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
         {{ selectedDevice.strinstallpos }}
       </div>
     </div> -->
-  </CostumeHeader>
-  <LineMulti
-    :option="chartOption"
-    :prop-type-arr="propTypeArr"
-    x-axis-prop-type="x"
-    :chart-data="chartData"
-    height="140px"
-    class="worksurface-chart"
-  />
-  <div class="flex justify-around">
-    <MiniBoard
-      v-for="(label, prop) in configs.list"
-      :key="`vhccws-${prop}`"
-      :label="label"
-      :value="get(selectedDevice, prop)"
-      layout="label-top"
-      type="B"
+    </CostumeHeader>
+    <LineMulti
+      :option="chartOption"
+      :prop-type-arr="propTypeArr"
+      x-axis-prop-type="x"
+      :chart-data="chartData"
+      height="140px"
+      class="worksurface-chart"
     />
-  </div>
+    <div class="flex justify-around">
+      <MiniBoard
+        v-for="(label, prop) in remoteConfig.moduleData?.main"
+        :key="`vhccws-${prop}`"
+        :label="label"
+        :value="get(selectedDevice, prop)"
+        layout="label-top"
+        type="B"
+      />
+    </div>
+  </ModuleBasic>
 </template>
 <script lang="ts" setup>
   import LineMulti from '/@/components/chart/LineMulti.vue';
@@ -36,12 +38,21 @@
   import { get } from '../../billboard/utils';
   import _ from 'lodash-es';
   import MiniBoard from './MiniBoard.vue';
+  import ModuleBasic from './moduleBasic.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
   const devicekind = 'fanlocal';
 
-  const { configs, fetchConfig } = useInitConfig(devicekind);
+  const config = ref({
+    moduleName: '采煤工作面智能管控',
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      position: 'right:0px;top:350px;',
+      version: 'enhanced',
+    },
+  });
+  const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
   const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);
 
   onMounted(() => {
@@ -59,9 +70,9 @@
   ]);
 
   const propTypeArr = computed(() => {
-    if (configs.value.chart) {
+    if (remoteConfig.value.moduleData?.chart) {
       const map = new Map();
-      _.forEach(configs.value.chart || [], (label, prop) => {
+      _.forEach(remoteConfig.value.moduleData?.chart || [], (label, prop) => {
         map.set(prop, label);
       });
 

src/views/vent/home/configurable/components/moduleBasic.vue

@@ -0,0 +1,47 @@
+<template>
+  <component :is="getModuleComponent(position, version)" :style="style" :title="title">
+    <slot></slot>
+  </component>
+</template>
+<script lang="ts" setup>
+  import ModuleLeft from './moduleLeft.vue';
+  import ModuleRight from './moduleRight.vue';
+  import ModuleBottom from './moduleBottom.vue';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      title?: string;
+      position?: string;
+      size?: string;
+      version?: string;
+    }>(),
+    {
+      title: '',
+      position: '',
+      version: '',
+      size: '',
+    }
+  );
+
+  const style = computed(() => {
+    return props.size + props.position;
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  function getModuleComponent(position, version) {
+    if (version === 'original') {
+      return ModuleLeft; // TODO：改为返回旧版的module组件
+    }
+    if (position.includes('left:0')) {
+      return ModuleLeft;
+    }
+    if (position.includes('right:0')) {
+      return ModuleRight;
+    }
+    if (position.includes('bottom:0')) {
+      return ModuleBottom;
+    }
+    return ModuleLeft; // TODO：改为返回旧版的module组件
+  }
+</script>

src/views/vent/home/configurable/hooks/useInit.ts

@@ -1,7 +1,7 @@
 import { computed, ref } from 'vue';
 import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
 import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
-import { ModuleData } from '@/views/vent/deviceManager/configurationTable/adapters';
+import { Config } from '@/views/vent/deviceManager/configurationTable/types';
 // import mapComponent from './components/3Dmap/index.vue';
 
 export function useInitConfig(deviceType: string) {
@@ -9,14 +9,14 @@ export function useInitConfig(deviceType: string) {
     cfgList({
       deviceType,
     }).then(({ records }) => {
-      configs.value = records[0]?.moduleData;
+      config.value = records[0];
     });
   }
-  const configs = ref<ModuleData>({});
+  const config = ref<Partial<Config>>({});
 
   return {
     fetchConfig,
-    configs,
+    config,
   };
 }
 

src/views/vent/home/configurable/index.vue

@@ -14,34 +14,17 @@
       </template>
     </a-dropdown>
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-    <ModuleLeft class="module-left top-60px" title="局部通风机监测">
-      <SubVentilate />
-    </ModuleLeft>
-    <ModuleLeft class="module-left top-350px" title="主通风机监测">
-      <Ventilate />
-    </ModuleLeft>
-    <ModuleLeft class="module-left top-640px" title="通风设施远程控制">
-      <VentilateControl />
-    </ModuleLeft>
-    <ModuleBottom class="module-bottom top-640px left-460px" title="矿井风量实时监测">
-      <AirVolumeMonitor />
-    </ModuleBottom>
-    <ModuleRight class="module-right top-60px" title="通风系统监测与分析">
-      <VentilateAnalysis />
-    </ModuleRight>
-    <ModuleRight class="module-right top-350px" title="采煤工作面智能管控">
-      <WorkSurface />
-    </ModuleRight>
-    <ModuleRight class="module-right top-640px" title="设备告警">
-      <DeviceWarning />
-    </ModuleRight>
+    <SubVentilate />
+    <Ventilate />
+    <VentilateControl />
+    <AirVolumeMonitor />
+    <VentilateAnalysis />
+    <WorkSurface />
+    <DeviceWarning />
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import ModuleLeft from './components/moduleLeft.vue';
-  import ModuleRight from './components/moduleRight.vue';
-  import ModuleBottom from './components/moduleBottom.vue';
   import SubVentilate from './components/SubVentilate.vue';
   import Ventilate from './components/Ventilate.vue';
   import { CaretDownOutlined } from '@ant-design/icons-vue';