[Mod 0000] 瓦斯看板可折叠表格支持数据排序及分项可折叠功能

src/views/vent/home/billboard/billboard.data.ts

@@ -563,6 +563,8 @@ export const DEFAULT_TEST_DATA = {
         warnLevel: '/',
         num: '/',
         typeName: '/',
+        maxValueInstallPos: null,
+        maxValue: null,
       },
     ],
   },

src/views/vent/home/billboard/components/CollapseTable.vue

@@ -4,7 +4,12 @@
       <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
     </div>
     <Collapse v-model:activeKey="avtiveCollapse" ghost class="table__content_list" :style="{ height: contentHeight }">
-      <CollapsePanel v-for="(item, index) in data" :key="`svvhbct-${index}`" class="table__content_list_row" :showArrow="showArrow">
+      <CollapsePanel
+        v-for="(item, index) in data"
+        :key="`svvhbct-${index}`"
+        class="table__content_list_row"
+        :showArrow="item.hideCollapses ? false : showArrow"
+      >
         <template #header>
           <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }">
             <slot :name="t.prop" :scope="item">
@@ -12,7 +17,7 @@
             </slot>
           </div>
         </template>
-        <template #default>
+        <template v-if="!item.hideCollapses" #default>
           <p v-for="(t, i) in collapses" :key="`svvhbctc-${i}`" class="table__content_list_collapse"> {{ t.name }}：{{ get(item, t.prop) }} </p>
         </template>
       </CollapsePanel>
@@ -21,7 +26,7 @@
 </template>
 <script lang="ts" setup>
   import { computed, defineProps, ref } from 'vue';
-  import _ from 'lodash-es';
+  import _ from 'lodash';
   import { Collapse, CollapsePanel } from 'ant-design-vue';
 
   let props = withDefaults(
@@ -33,6 +38,8 @@
       defaultValue: string;
       contentHeight: string;
       showArrow: boolean;
+      /** 是否自动过滤折叠展开后无有效内容的项 */
+      filterNil: boolean;
     }>(),
     {
       columns: () => [],
@@ -41,6 +48,7 @@
       defaultValue: '/',
       contentHeight: '220px',
       showArrow: true,
+      filterNil: false,
     }
   );
 

src/views/vent/home/billboard/components/GasStatus.vue

@@ -7,15 +7,15 @@
         <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
       </Col>
     </Row>
-    <CommonTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" content-height="160px" />
+    <CollapseTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" :collapses="GAS_COLLAPSES" content-height="160px" />
   </template>
 </template>
 <script lang="ts" setup>
   import { Row, Col, Result } from 'ant-design-vue';
-  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, BillboardType } from '../billboard.data';
+  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, GAS_COLLAPSES, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
   import { computed } from 'vue';
-  import CommonTable from './CommonTable.vue';
+  import CollapseTable from './CollapseTable.vue';
   import { get } from '../utils';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -35,12 +35,17 @@
   });
   const tableData = computed(() => {
     const info = props.data.gasInfo;
-    return get(info, 'gasTypeList', []).map((e) => {
-      return {
-        ...e,
-        warnLevelStr: trans[e.warnLevel],
-      };
-    });
+    return get(info, 'gasTypeList', [])
+      .map((e) => {
+        return {
+          ...e,
+          hideCollapses: !e[GAS_COLLAPSES[0].prop],
+          warnLevelStr: trans[e.warnLevel],
+        };
+      })
+      .sort((a) => {
+        return a.hideCollapses ? 1 : -1;
+      });
   });
 
   const riskTrans = {