Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/deviceManager/showninfoTable/device.api.ts → src/views/vent/deviceManager/configurationTable/configuration.api.ts

@@ -1,5 +1,4 @@
 import { defHttp } from '/@/utils/http/axios';
-import { Modal } from 'ant-design-vue';
 
 enum Api {
   list = '/safety/configurationData/getConfigurationDataList',
@@ -12,7 +11,7 @@ enum Api {
  * 列表接口
  * @param params
  */
-export const list = (params) => defHttp.get({ url: Api.list, params });
+export const list = (params) => defHttp.post({ url: Api.list, params });
 
 /**
  * 删除配置项
@@ -23,26 +22,26 @@ export const deleteById = (params, handleSuccess) => {
   });
 };
 
-/**
- * 批量删除配置项
- * @param params
- */
-export const batchDeleteById = (params, handleSuccess) => {
-  Modal.confirm({
-    title: '确认删除',
-    content: '是否删除选中数据',
-    okText: '确认',
-    cancelText: '取消',
-    onOk: () => {
-      return defHttp.get({ url: Api.deleteById, data: params }, { joinParamsToUrl: true }).then(() => {
-        handleSuccess();
-      });
-    },
-  });
-};
+// /**
+//  * 批量删除配置项
+//  * @param params
+//  */
+// export const batchDeleteById = (params, handleSuccess) => {
+//   Modal.confirm({
+//     title: '确认删除',
+//     content: '是否删除选中数据',
+//     okText: '确认',
+//     cancelText: '取消',
+//     onOk: () => {
+//       return defHttp.get({ url: Api.deleteById, data: params }, { joinParamsToUrl: true }).then(() => {
+//         handleSuccess();
+//       });
+//     },
+//   });
+// };
 
 /**
- * 保存或者更新用户
+ * 保存或者更新
  * @param params
  */
 export const saveOrUpdate = (params, isUpdate) => {

src/views/vent/deviceManager/showninfoTable/device.data.ts → src/views/vent/deviceManager/configurationTable/configuration.data.ts

@@ -12,14 +12,18 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '所展示点位及名称',
-    dataIndex: 'modelData',
+    dataIndex: 'moduleData',
     format: (ctx: string) => {
-      const json = JSON.parse(ctx);
-      return Object.keys(json)
-        .map((k) => {
-          return `点位：${k}；名称：${json[k]}`;
-        })
-        .join('\n');
+      try {
+        const json = JSON.parse(ctx);
+        return Object.keys(json)
+          .map((k) => {
+            return `点位：${k}；名称：${json[k]}`;
+          })
+          .join('\n');
+      } catch (e) {
+        return '渲染错误';
+      }
     },
   },
 ];
@@ -27,7 +31,7 @@ export const columns: BasicColumn[] = [
 export const searchFormSchema: FormSchema[] = [
   {
     label: '设备类型',
-    field: 'devicetype',
+    field: 'deviceType',
     component: 'JDictSelectTag',
     componentProps: {
       dictCode: 'devicekind',
@@ -37,7 +41,7 @@ export const searchFormSchema: FormSchema[] = [
   },
   {
     label: '页面类型',
-    field: 'pagetype',
+    field: 'pageType',
     component: 'JDictSelectTag',
     componentProps: {
       dictCode: 'configurable_homepage',
@@ -51,12 +55,11 @@ export const formSchema: FormSchema[] = [
   {
     label: '',
     field: 'id',
-    component: 'Input',
-    show: false,
+    component: 'InputNumber',
   },
   {
     label: '设备类型',
-    field: 'devicetype',
+    field: 'deviceType',
     component: 'JDictSelectTag',
     required: true,
     componentProps: {
@@ -66,7 +69,7 @@ export const formSchema: FormSchema[] = [
   },
   {
     label: '页面类型',
-    field: 'pagetype',
+    field: 'pageType',
     component: 'JDictSelectTag',
     required: true,
     componentProps: {

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

@@ -7,8 +7,7 @@
       :list="list"
       :deleteById="deleteById"
       :saveOrUpdate="saveOrUpdate"
-      designScope="device-tabel"
-      title="设备列表"
+      title="配置列表"
       :showTab="true"
       :deviceType="deviceType"
     />
@@ -19,9 +18,9 @@
   //ts语法
   import { ref } from 'vue';
   import NormalTable from '../comment/NormalTable.vue';
-  import { list, deleteById, saveOrUpdate } from './device.api';
+  import { list, deleteById, saveOrUpdate } from './configuration.api';
 
-  import { searchFormSchema, columns, formSchema } from './device.data';
+  import { searchFormSchema, columns, formSchema } from './configuration.data';
 
   const deviceType = ref('');
 </script>

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

@@ -1,50 +1,62 @@
 <template>
   <div class="w-100% flex costume-header__header">
-    <!-- 选择下拉框，自动填充剩余空间 -->
-    <Select
-      v-model:value="value"
-      class="flex-grow-1 costume-header__header_left"
-      :bordered="false"
-      :options="options"
-      placeholder="请选择"
-      @change="$emit('change', $event)"
-    />
+    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
+    <Dropdown class="flex-grow-1 costume-header__header_left" :trigger="['click']" :bordered="false" @open-change="visible = $event">
+      <div class="w-100% flex flex-items-center" @click.prevent>
+        <SwapOutlined class="w-30px" />
+        <div class="flex-grow-1">
+          {{ selectedLabel }}
+        </div>
+        <CaretUpOutlined class="w-30px" v-if="visible" />
+        <CaretDownOutlined class="w-30px" v-else />
+      </div>
+      <template #overlay>
+        <Menu :selected-keys="[selectedKey]" @click="selectHandler">
+          <MenuItem v-for="item in options" :key="item.key" :title="item.label">
+            {{ item.label }}
+          </MenuItem>
+        </Menu>
+      </template>
+    </Dropdown>
     <slot class="costume-header__header_right"></slot>
   </div>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
-  import { Select } from 'ant-design-vue';
-  const props = withDefaults(
-    defineProps<{
-      api: Promise<Record<string, unknown>[]>;
-      labelKey?: string;
-      valueKey?: string;
-    }>(),
-    {
-      labelKey: 'label',
-      valueKey: 'value',
-    }
-  );
-  defineEmits(['change']);
+  import { Dropdown, Menu, MenuItem } from 'ant-design-vue';
+  import { SwapOutlined, CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
 
-  const value = ref();
-  const options = ref([]);
+  const props = defineProps<{
+    api: () => Promise<{ label: any; key: any }[]>;
+  }>();
+  const emit = defineEmits(['change']);
+
+  // 下拉框是否可见
+  const visible = ref(false);
+  // 选中的选项
+  const selectedKey = ref('');
+  const selectedLabel = ref('');
+  const options = ref<{ label: any; key: any }[]>([]);
+
+  // 选择了某一项
+  function selectHandler({ key, item }) {
+    selectedKey.value = key;
+    selectedLabel.value = item.title;
+    emit('change', key);
+  }
 
   onMounted(() => {
+    // 获取数据
     props.api().then((opts) => {
-      options.value = opts.map((o) => {
-        return {
-          label: o[props.labelKey],
-          value: o[props.valueKey],
-        };
-      });
-      value.value = options.value[0]?.value;
+      options.value = opts;
+      selectedKey.value = opts[0]?.key;
+      selectedLabel.value = opts[0]?.label;
     });
   });
 </script>
 <style scoped>
   .costume-header__header {
+    /* height: 30px; */
     background-image: linear-gradient(90deg, #3df6ff44, transparent 20%, transparent 80%, #3df6ff44);
   }
   .costume-header__header_left {

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

@@ -1,20 +1,60 @@
 <template>
-  <CostumeHeader :api="fetchOptions"> 123 </CostumeHeader>
+  <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
+    <div class="w-200px flex flex-items-center">
+      <RightCircleOutlined class="w-30px" />
+      <div class="flex-grow-1">
+        {{ selectedDevice.strinstallpos }}
+      </div>
+    </div>
+  </CostumeHeader>
+  <div>
+    <div v-for="item in configs" :key="item.prop"> {{ item.label }}{{ selectedDevice[item.prop] }} </div>
+  </div>
 </template>
 <script lang="ts" setup>
-  import { computed, ref } from 'vue';
+  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 CostumeHeader from './CostumeHeader.vue';
+  import { RightCircleOutlined } from '@ant-design/icons-vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  const searchValue = ref();
-  const lineTypeList = ref([
-    {
-      label: '你好',
-      value: 1,
-    },
-  ]);
+  // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
+  const devicekind = 'fanlocal';
+
+  const configs = ref<{ prop: string; label: string }[]>([]);
+  function fetchConfig() {
+    cfgList({
+      deviceType: 'devicekind',
+    }).then(({ records }) => {
+      configs.value = JSON.parse(records[0]?.moduleData);
+    });
+  }
+
+  const devices = ref<any[]>([]);
+  const selectedDevice = ref<any>();
+  function selectDeviceByID(id: string) {
+    selectedDevice.value = devices.value.find((e) => {
+      return e.id === id;
+    });
+  }
+  // 获取全部局扇的数据，并以选项格式返回给 Header 消费
   function fetchOptions() {
-    return Promise.resolve([]);
+    return list({
+      devicekind,
+    }).then(({ records }) => {
+      devices.value = records;
+      return records.map((e) => {
+        return {
+          label: e.strinstallpos,
+          key: e.id,
+        };
+      });
+    });
   }
+
+  onMounted(() => {
+    fetchConfig();
+  });
 </script>
 <style scoped></style>