[Wip 0000] 公司端看板新改动

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

@@ -15,6 +15,14 @@ export const GAS_STATUS_COLUMN = [
     name: '当前状态',
     prop: 'warnLevelStr',
   },
+];
+
+/** 瓦斯监测表格的折叠项配置 */
+export const GAS_COLLAPSES = [
+  {
+    name: '最大值位置',
+    prop: 'maxValueInstallPos',
+  },
   {
     name: '最大值(%)',
     prop: 'maxValue',
@@ -35,14 +43,18 @@ export const DUST_STATUS_COLUMN = [
     name: '当前状态',
     prop: 'warnLevelStr',
   },
+];
+
+/** 粉尘监测表格的折叠项配置 */
+export const DUST_COLLAPSES = [
+  {
+    name: '最大值位置',
+    prop: 'maxValueInstallPos',
+  },
   {
     name: '最大值(mg/m3)',
     prop: 'maxValue',
   },
-  // {
-  //   name: '位置',
-  //   prop: 'maxValueInstallPos',
-  // },
 ];
 
 // 火灾状态监测相关的内容配置项
@@ -52,36 +64,76 @@ export const FIRE_STATUS_LIST = [
     icon: 'warning-optical-fiber',
     label: '光纤测温系统报警',
     prop: 'fiberInfo',
+    collapses: [
+      {
+        name: '最大值位置',
+        prop: 'maxValueInstallPos',
+      },
+      {
+        name: '最大值(℃)',
+        prop: 'maxValue',
+      },
+    ],
   },
   {
     icon: 'warning-tubes',
     label: '束管监测系统报警',
     prop: 'bundletubeInfo',
+    collapses: [
+      {
+        name: '最大值位置',
+        prop: 'maxValueInstallPos',
+      },
+      {
+        name: 'CO最大值(ppm)',
+        prop: 'maxValue',
+      },
+    ],
   },
   {
     icon: 'warning-smoke-2',
     label: '烟雾传感器报警',
     prop: 'smokeSensorInfo',
+    collapses: [
+      {
+        name: '最大值位置',
+        prop: 'maxValueInstallPos',
+      },
+      {
+        name: '最大值(%)',
+        prop: 'maxValue',
+      },
+    ],
   },
   {
     icon: 'warning-CO-2',
     label: 'CO传感器报警',
     prop: 'coSensorInfo',
-  },
-  {
-    icon: 'warning-CO-2',
-    label: 'CO传感器最高值(ppm)',
-    prop: 'coMax',
+    collapses: [
+      {
+        name: '最大值位置',
+        prop: 'maxValueInstallPos',
+      },
+      {
+        name: '最大值(ppm)',
+        prop: 'maxValue',
+      },
+    ],
   },
   {
     icon: 'warning-temp',
     label: '温度传感器报警',
     prop: 'tempSensorInfo',
-  },
-  {
-    icon: 'warning-max-temp',
-    label: '温度传感器最高值(℃)',
-    prop: 'tempMax',
+    collapses: [
+      {
+        name: '最大值位置',
+        prop: 'maxValueInstallPos',
+      },
+      {
+        name: '最大值(℃)',
+        prop: 'maxValue',
+      },
+    ],
   },
 ];
 

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="table">
+    <div class="table__content">
+      <div class="table__content_label">
+        <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
+      </div>
+      <Collapse ghost class="table__content_list" :style="{ height: contentHeight }">
+        <CollapsePanel v-for="(item, index) in data" :key="`svvhbct-${index}`" class="table__content_list_row" :showArrow="false">
+          <template #header>
+            <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }">
+              <slot :name="t.prop" :scope="item">
+                <span>{{ get(item, t.prop) }}</span>
+              </slot>
+            </div>
+          </template>
+          <template #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>
+      </Collapse>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, defineProps } from 'vue';
+  import _ from 'lodash-es';
+  import { Collapse, CollapsePanel } from 'ant-design-vue';
+
+  let props = withDefaults(
+    defineProps<{
+      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+      columns: { prop: string; name: string }[];
+      collapses: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+      contentHeight: string;
+    }>(),
+    {
+      columns: () => [],
+      collapses: () => [],
+      data: () => [],
+      defaultValue: '-',
+      contentHeight: '220px',
+    }
+  );
+
+  const flexBasis = computed(() => {
+    return Math.fround(100 / props.columns.length) + '%';
+  });
+
+  function get(o, p) {
+    const d = _.get(o, p, props.defaultValue);
+    return d === null ? props.defaultValue : d;
+  }
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('@/assets/font/douyuFont.otf');
+  }
+
+  .table__content {
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .table__content_label {
+      width: 366px;
+      height: 32px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: url('@/assets/images/company/content-label.png') no-repeat;
+      .label-t {
+        color: #3df6ff;
+        text-align: center;
+        font-size: 14px;
+      }
+    }
+
+    .table__content_list {
+      height: calc(100% - 32px);
+      width: 378px;
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-around;
+      justify-content: flex-start;
+      padding: 5px 0px;
+      box-sizing: border-box;
+      overflow-y: auto;
+      .table__content_list_row {
+        // width: 100%;
+        // display: flex;
+        // justify-content: space-around;
+        // align-items: flex-start;
+        background: url('@/assets/images/company/content-text.png') no-repeat;
+        color: @white;
+        padding: 5px 0;
+        // span {
+        //   display: inline-block;
+        //   text-align: center;
+        // }
+      }
+
+      .table__content_list_collapse {
+        text-align: left;
+        color: @white;
+        margin-left: 10px;
+      }
+    }
+  }
+  .table__content :deep(.zxm-collapse > .zxm-collapse-item > .zxm-collapse-header) {
+    padding: 0;
+    color: @white;
+  }
+</style>

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

@@ -1,12 +1,12 @@
 <template>
   <CommonTitle class="mb-10px" label="矿井粉尘风险性等级" :value="risk" />
-  <CommonTable :columns="DUST_STATUS_COLUMN" :data="tableData" />
+  <CollapseTable :columns="DUST_STATUS_COLUMN" :data="tableData" :collapses="DUST_COLLAPSES" />
 </template>
 <script lang="ts" setup>
-  import CommonTable from './CommonTable.vue';
+  import CollapseTable from './CollapseTable.vue';
   import CommonTitle from './CommonTitle.vue';
-  import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN } from '../billboard.data';
-  import { ref, shallowRef, watch } from 'vue';
+  import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN, DUST_COLLAPSES } from '../billboard.data';
+  import { ref, shallowRef, onMounted } from 'vue';
   import _ from 'lodash-es';
   // import mapComponent from './3Dmap/index.vue';
 
@@ -42,12 +42,8 @@
     });
   }
 
-  watch(
-    () => props.data,
-    () => {
-      fetchData();
-    },
-    { immediate: true }
-  );
+  onMounted(() => {
+    fetchData();
+  });
 </script>
 <style lang="less" scoped></style>

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

@@ -8,7 +8,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { watch, shallowRef } from 'vue';
+  import { shallowRef, onMounted } from 'vue';
   import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
   import _ from 'lodash-es';
 
@@ -33,13 +33,9 @@
     fileData.value = info;
   }
 
-  watch(
-    () => props.data,
-    () => {
-      fetchData();
-    },
-    { immediate: true }
-  );
+  onMounted(() => {
+    fetchData();
+  });
 </script>
 
 <style lang="less" scoped>

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

@@ -1,19 +1,24 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
-  <ListItem
-    v-for="(item, i) in FIRE_STATUS_LIST"
-    :key="item.icon"
-    :icon="item.icon"
-    :label="item.label"
-    :value="listData[item.prop]"
-    :type="i % 2 ? 'green' : 'blue'"
-    class="mt-5px"
-  />
+  <div class="fire_wrapper">
+    <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
+    <Collapse ghost class="fire_list">
+      <CollapsePanel class="fire_list_item" v-for="(item, i) in FIRE_STATUS_LIST" :key="`svvhbcfcp-${i}`" :showArrow="false">
+        <template #header>
+          <ListItem :key="item.icon" :icon="item.icon" :label="item.label" :value="get(listData, item.prop)" :type="i % 2 ? 'green' : 'blue'" />
+        </template>
+        <template #default>
+          <p v-for="(t, ix) in item.collapses" :key="`svvhbcfcp-${i}${ix}`" class="fire_list_collapse"> {{ t.name }}：{{ get(item, t.prop) }} </p>
+        </template>
+      </CollapsePanel>
+    </Collapse>
+  </div>
 </template>
 <script lang="ts" setup>
+  import { Collapse, CollapsePanel } from 'ant-design-vue';
+  import { get } from '../utils';
   import _ from 'lodash-es';
-  import { watch, ref, shallowRef } from 'vue';
+  import { ref, shallowRef, onMounted } from 'vue';
   import CommonTitle from './CommonTitle.vue';
   import ListItem from './ListItem.vue';
   import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST, FIRE_STATUS_IGNORE_TRANSLATION_KEYS } from '../billboard.data';
@@ -60,12 +65,29 @@
     listData.value = info;
   }
 
-  watch(
-    () => props.data,
-    () => {
-      fetchData();
-    },
-    { immediate: true }
-  );
+  onMounted(() => {
+    fetchData();
+  });
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .fire_list {
+    height: 260px;
+    overflow: auto;
+
+    .fire_list_item {
+      color: @white;
+      // ::v-deep .zxm-collapse > .zxm-collapse-item > .zxm-collapse-header {
+      // }
+    }
+
+    .fire_list_collapse {
+      text-align: left;
+      color: @white;
+      margin-left: 10px;
+    }
+  }
+  .fire_wrapper :deep(.zxm-collapse > .zxm-collapse-item > .zxm-collapse-header) {
+    padding: 0;
+    color: @white;
+  }
+</style>

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

@@ -5,15 +5,15 @@
       <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
     </Col>
   </Row>
-  <CommonTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" />
+  <CollapseTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" :collapses="GAS_COLLAPSES" />
 </template>
 <script lang="ts" setup>
   import _ from 'lodash-es';
   import { Row, Col } from 'ant-design-vue';
-  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
+  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA, GAS_COLLAPSES, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
-  import { watch, shallowRef } from 'vue';
-  import CommonTable from './CommonTable.vue';
+  import { onMounted, shallowRef } from 'vue';
+  import CollapseTable from './CollapseTable.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = withDefaults(
@@ -61,12 +61,8 @@
     });
   }
 
-  watch(
-    () => props.data,
-    () => {
-      fetchData();
-    },
-    { immediate: true }
-  );
+  onMounted(() => {
+    fetchData();
+  });
 </script>
 <style lang="less" scoped></style>

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

@@ -12,7 +12,7 @@
   import { Row } from 'ant-design-vue';
   import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
-  import { watch, shallowRef, ref } from 'vue';
+  import { onMounted, shallowRef, ref } from 'vue';
   import CommonTable from './CommonTable.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -66,13 +66,9 @@
     ];
   }
 
-  watch(
-    () => props.data,
-    () => {
-      fetchData();
-    },
-    { immediate: true }
-  );
+  onMounted(() => {
+    fetchData();
+  });
 </script>
 <style lang="less" scoped>
   .value104 {

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

@@ -17,7 +17,7 @@
   import type { TreeProps } from 'ant-design-vue';
   import { BillboardType, DEFAULT_TEST_DATA, VENTILATION_STATUS_HEADER_CONFIG, VENTILATION_STATUS_TREE_CONFIG } from '../billboard.data';
   import MiniBoard from './MiniBoard.vue';
-  import { ref, shallowRef, watch } from 'vue';
+  import { ref, shallowRef, onMounted } from 'vue';
   // import CommonTitle from './CommonTitle.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -74,13 +74,9 @@
     return valid ? val.toString() : '/';
   }
 
-  watch(
-    () => props.data,
-    () => {
-      fetchData();
-    },
-    { immediate: true }
-  );
+  onMounted(() => {
+    fetchData();
+  });
 </script>
 <style lang="less" scoped>
   .ventilate-status-card {

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

@@ -48,6 +48,7 @@
   import VentilationStatus from './components/VentilationStatus.vue';
   import GasStatus from './components/GasStatus.vue';
   import Summary from './components/Summary.vue';
+  import _ from 'lodash-es';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = defineProps<{
@@ -85,7 +86,7 @@
             {
               default: () =>
                 h(componentMap[props.billboardType], {
-                  data: el,
+                  data: JSON.parse(JSON.stringify(el)),
                 }),
             }
           );

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

@@ -0,0 +1,9 @@
+import _ from 'lodash-es';
+
+/**
+ * 功能类似 lodash.get 但是当取值为 null 时也直接返回默认值
+ */
+export function get(o, p, defaultValue = '-') {
+  const d = _.get(o, p, defaultValue);
+  return d === null ? defaultValue : d;
+}

src/views/vent/performance/comment/CADModal.vue

@@ -18,6 +18,18 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
+  // 使用须知：
+
+  // 本组件是内含CADViewer的模态框组件，CADViewer提供两种实现方式分别是 内置 及 外链。
+  // 需要特别说明的是外链方式，该方式的出现源于对版权纠纷的忌惮。
+  // 实现原理是通过 iframe 嵌入一个支持内置实现方式的项目并传递数据然后使用。
+
+  // 1、新建菜单
+  // 路径要求为`/fileManager/cad-viewer`，组件要求为`vent/performance/fileDetail/commen/CADViewer`。
+  // 上面用到的组件包含了内置方式的具体实现
+  // 2、新建角色及用户
+  // 该方式需要一个自动登录角色及用户，该用户的账号密码可在 /store/modules/user 查阅。
+  // 同时，自动登录角色需要对上述菜单授权，同时，若该菜单存在父级，请同时授权其直系父级菜单
   import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { onMounted } from 'vue';