[Feat 0000]三级防灭火初步搭建

src/views/vent/BeltLaneThreeLevelFire/BeltMonitorWarn/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="belt-control-page">
+    <!-- 顶部标题栏 -->
+    <!-- <div class="header-bar">
+      <div class="center-title">皮带巷智能管控</div>
+    </div> -->
+
+    <div class="content-layout">
+      <!-- 左侧面板：3个模块 -->
+      <div class="left-panel">
+        <!-- 光纤测温模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">光纤测温监测与分析</h3>
+          <div class="data-row">
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
+              <div class="data-label">平均温度</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
+              <div class="data-label">最高温度</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
+              <div class="data-label">最低温度</div>
+              <div class="data-value">56.99</div>
+            </div>
+          </div>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- CO传感器模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">CO传感器监测与分析</h3>
+          <div class="data-row">
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
+              <div class="data-label">平均(%)</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
+              <div class="data-label">最大(%)</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-co"></i>CO⁴</div>
+              <div class="data-label">最小(%)</div>
+              <div class="data-value">56.99</div>
+            </div>
+          </div>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 CO传感器1</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 微震测声模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">微震测声传感器监测与分析</h3>
+          <div class="data-row">
+            <div class="data-item">
+              <div class="data-label">平均值</div>
+              <div class="data-value">--</div>
+            </div>
+            <div class="data-item">
+              <div class="data-label">最大值</div>
+              <div class="data-value">--</div>
+            </div>
+            <div class="data-item">
+              <div class="data-label">最小值</div>
+              <div class="data-value">--</div>
+            </div>
+          </div>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间区域：顶部Tab -->
+      <div class="center-panel">
+        <Nav></Nav>
+      </div>
+
+      <!-- 右侧面板：3个模块 -->
+      <div class="right-panel">
+        <!-- 火焰传感器模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">火焰传感器监测与分析</h3>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 报警产生于 2013-05-24 15:52:42 时刻 火焰传感器1</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 温度传感器模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">温度传感器监测与分析</h3>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot red"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 报警产生于 2013-05-24 15:52:42 时刻 温度传感器1</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 烟雾传感器模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">烟雾传感器监测与分析</h3>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot red"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 报警产生于 2013-05-24 15:52:42 时刻 烟雾传感器1</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- HCl传感器模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">HCl传感器监测与分析</h3>
+          <div class="data-row">
+            <div class="data-item">
+              <div class="data-label">平均值</div>
+              <div class="data-value">--</div>
+            </div>
+            <div class="data-item">
+              <div class="data-label">最大值</div>
+              <div class="data-value">--</div>
+            </div>
+            <div class="data-item">
+              <div class="data-label">最小值</div>
+              <div class="data-value">--</div>
+            </div>
+          </div>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 多参数传感器模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">火灾多参数传感器监测与分析</h3>
+          <div class="alarm-info">
+            <span>具体需根据接入数据调整数据展示</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Nav from '../components/nav.vue';
+const selectedBelt = ref('belt1');
+const activeTab = ref('1');
+</script>
+
+<style scoped>
+.belt-control-page {
+  width: 100%;
+  height: 100%;
+  background: #0a1435;
+  color: #d0e8ff;
+  font-family: 'Microsoft YaHei', sans-serif;
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.header-bar {
+  height: 50px;
+  background: linear-gradient(90deg, #0f2457, #1a3b7a);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid #2a52be;
+}
+
+.left-header,
+.right-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.center-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.belt-select {
+  color: #d0e8ff;
+  font-size: 16px;
+}
+
+.view-mode label {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.pressure {
+  font-size: 14px;
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+}
+
+.admin {
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+/* 内容布局 */
+.content-layout {
+  display: flex;
+  height: calc(100% - 54px);
+  padding: 10px;
+  gap: 10px;
+}
+
+.left-panel,
+.right-panel {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  gap: 10px;
+}
+
+.center-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 卡片样式 */
+.panel-card {
+  background: rgba(15, 36, 87, 0.6);
+  border: 1px solid #3b8ad4;
+  border-radius: 4px;
+  padding: 12px;
+  flex: 1;
+}
+
+.panel-title {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  color: #fff;
+  text-align: center;
+}
+
+.data-row {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 12px;
+}
+
+.data-item {
+  text-align: center;
+}
+
+.data-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.data-label {
+  font-size: 12px;
+  color: #a0c8ff;
+  margin-bottom: 4px;
+}
+
+.data-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.alarm-info {
+  font-size: 12px;
+  border-top: 1px dashed #2a52be;
+  padding-top: 8px;
+}
+
+.alarm-status {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.status-dot.green {
+  background: #52c41a;
+}
+
+.status-dot.red {
+  background: #f5222d;
+}
+
+.alarm-detail {
+  color: #a0c8ff;
+}
+</style>

src/views/vent/BeltLaneThreeLevelFire/SprySystem/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="belt-control-page">
+    <!-- 顶部标题栏 -->
+    <!-- <div class="header-bar">
+      <div class="center-title">皮带巷智能管控</div>
+    </div> -->
+
+    <div class="content-layout">
+      <!-- 左侧面板：3个模块 -->
+      <div class="left-panel">
+        <!-- 光纤测温模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">光纤测温监测与分析</h3>
+          <div class="data-row">
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
+              <div class="data-label">平均温度</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
+              <div class="data-label">最高温度</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
+              <div class="data-label">最低温度</div>
+              <div class="data-value">56.99</div>
+            </div>
+          </div>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- CO传感器模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">CO传感器监测与分析</h3>
+          <div class="data-row">
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
+              <div class="data-label">平均(%)</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
+              <div class="data-label">最大(%)</div>
+              <div class="data-value">56.99</div>
+            </div>
+            <div class="data-item">
+              <div class="data-icon"><i class="iconfont icon-co"></i>CO⁴</div>
+              <div class="data-label">最小(%)</div>
+              <div class="data-value">56.99</div>
+            </div>
+          </div>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 CO传感器1</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 微震测声模块 -->
+        <div class="panel-card">
+          <h3 class="panel-title">微震测声传感器监测与分析</h3>
+          <div class="data-row">
+            <div class="data-item">
+              <div class="data-label">平均值</div>
+              <div class="data-value">--</div>
+            </div>
+            <div class="data-item">
+              <div class="data-label">最大值</div>
+              <div class="data-value">--</div>
+            </div>
+            <div class="data-item">
+              <div class="data-label">最小值</div>
+              <div class="data-value">--</div>
+            </div>
+          </div>
+          <div class="alarm-info">
+            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
+            <div class="alarm-detail">
+              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间区域：顶部Tab -->
+      <div class="center-panel">
+        <Nav></Nav>
+      </div>
+
+      <!-- 右侧面板：3个模块 -->
+      <div class="right-panel"> </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Nav from '../components/nav.vue';
+const selectedBelt = ref('belt1');
+const activeTab = ref('1');
+</script>
+
+<style scoped>
+.belt-control-page {
+  width: 100%;
+  height: 100%;
+  background: #0a1435;
+  color: #d0e8ff;
+  font-family: 'Microsoft YaHei', sans-serif;
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.header-bar {
+  height: 50px;
+  background: linear-gradient(90deg, #0f2457, #1a3b7a);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid #2a52be;
+}
+
+.left-header,
+.right-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.center-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.belt-select {
+  color: #d0e8ff;
+  font-size: 16px;
+}
+
+.view-mode label {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.pressure {
+  font-size: 14px;
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+}
+
+.admin {
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+/* 内容布局 */
+.content-layout {
+  display: flex;
+  height: calc(100% - 54px);
+  padding: 10px;
+  gap: 10px;
+}
+
+.left-panel,
+.right-panel {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  gap: 10px;
+}
+
+.center-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 卡片样式 */
+.panel-card {
+  background: rgba(15, 36, 87, 0.6);
+  border: 1px solid #3b8ad4;
+  border-radius: 4px;
+  padding: 12px;
+  flex: 1;
+}
+
+.panel-title {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  color: #fff;
+  text-align: center;
+}
+
+.data-row {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 12px;
+}
+
+.data-item {
+  text-align: center;
+}
+
+.data-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.data-label {
+  font-size: 12px;
+  color: #a0c8ff;
+  margin-bottom: 4px;
+}
+
+.data-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.alarm-info {
+  font-size: 12px;
+  border-top: 1px dashed #2a52be;
+  padding-top: 8px;
+}
+
+.alarm-status {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.status-dot.green {
+  background: #52c41a;
+}
+
+.status-dot.red {
+  background: #f5222d;
+}
+
+.alarm-detailalarm-detail {
+  color: #a0c8ff;
+}
+</style>

src/views/vent/BeltLaneThreeLevelFire/components/nav.vue

@@ -0,0 +1,97 @@
+<template>
+  <!-- 外层容器：页面居中 -->
+  <div class="nav-container">
+    <div class="nav-menu">
+      <div class="nav-menu-left">
+        <div
+          v-for="(item, index) in menuList"
+          :key="index"
+          :class="activeIndex === index ? 'nav-menu-active' : 'nav-menu-item'"
+          @click="menuClick({ item, index })"
+        >
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+// 当前激活菜单
+const activeIndex = ref(0);
+// 菜单列表
+const menuList = ref([
+  {
+    name: '防灭火监测与预警',
+    targatUrl: '/BeltMonitorWarn/index',
+  },
+  {
+    name: '喷淋系统管控',
+    targatUrl: '/SprySystem/index',
+  },
+  {
+    name: '应急控风减灾',
+    targatUrl: '',
+  },
+]);
+
+// 点击切换菜单 + 路由
+function menuClick(data) {
+  activeIndex.value = data.index;
+  router.push({ path: data.item.targatUrl });
+}
+
+// 页面刷新自动匹配当前路由
+onMounted(() => {
+  const currentPath = route.path;
+  const idx = menuList.value.findIndex((item) => item.targatUrl === currentPath);
+  if (idx !== -1) activeIndex.value = idx;
+});
+</script>
+
+<style scoped>
+.nav-container {
+  display: flex;
+  justify-content: center;
+  padding: 12px 0;
+}
+
+.nav-menu {
+  width: 60%;
+  max-width: 900px;
+}
+.nav-menu-left {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  border: 1px solid #2a52be;
+  border-radius: 10px;
+}
+
+/* 默认样式 */
+.nav-menu-item {
+  padding: 10px 22px;
+  font-size: 15px;
+  color: #bbb;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.nav-menu-item:hover {
+  color: #fff;
+}
+
+.nav-menu-active {
+  padding: 10px 22px;
+  font-size: 15px;
+  color: #fff !important;
+  font-weight: 500;
+  cursor: pointer;
+  border-bottom: 2px solid #1890ff; /* 选中下划线（可删） */
+}
+</style>

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

@@ -0,0 +1,194 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <VentModal />
+    </div>
+    <div v-if="!route.query.embed" class="top-bg">
+      <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
+      <div class="main-title">{{ mainTitle }}</div>
+    </div>
+    <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
+      <a class="ant-dropdown-link" @click.prevent>
+        全矿井通风检测
+        <CaretDownOutlined />
+      </a>
+      <template #overlay>
+        <MonitorCenter />
+      </template>
+    </a-dropdown> -->
+    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+
+    <template v-if="isOriginal">
+      <ModuleOriginal
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :data="data"
+        :visible="true"
+      />
+    </template>
+    <template v-else-if="isCommon">
+      <ModuleCommon
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :data="data"
+        :visible="true"
+      />
+    </template>
+    <template v-else>
+      <!-- 下面是正常展示的各新版模块 -->
+      <ModuleEnhanced
+        v-for="cfg in enhancedConfigs"
+        :key="cfg.deviceType"
+        :visible="cfg.visible"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :data="data"
+        @close="cfg.visible = false"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+// import MonitorCenter from './components/MonitorCenter.vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleEnhanced from './components/ModuleEnhanced.vue';
+import ModuleOriginal from './components/ModuleOriginal.vue';
+import ModuleCommon from './components/ModuleCommon.vue';
+// import { useRoute } from 'vue-router';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+// import { getHomeData } from './configurable.api';
+import { BDFireMock } from './mock';
+import { useRoute } from 'vue-router';
+import { testBeltLaneFire } from './configurable.data';
+
+const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('皮带巷三级防灭火系统');
+const route = useRoute();
+let interval: number | undefined;
+
+onMounted(() => {
+  fetchConfigs('fire').then(() => {
+    configs.value = testBeltLaneFire;
+    updateEnhancedConfigs(configs.value);
+
+    Promise.resolve(BDFireMock).then(updateData);
+    // getHomeData({}).then(updateData);
+  });
+  // setInterval(() => {
+  //   getHomeData({}).then(updateData);
+  // }, 60000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+@{theme-green} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/themify/green/vent/vent-header1.png');
+  }
+}
+@{theme-deepblue} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/themify/deepblue/vent/home/modal-top.png');
+  }
+}
+
+.company-home {
+  --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
+  width: 100%;
+  height: 100%;
+  color: @vent-font-color;
+  position: relative;
+  // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+    .main-title {
+      height: 56px;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  // .module-left {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   left: 0;
+  // }
+  // .module-right {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   right: 0;
+  // }
+  // .module-bottom {
+  //   position: absolute;
+  //   width: 1000px;
+  //   height: 280px;
+  // }
+  .module-dropdown {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: @vent-configurable-dropdown;
+    border: none;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+  }
+}
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

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

@@ -4118,7 +4118,7 @@ export const testConfigVentNew: Config[] = [
       preset: [
         {
           readFrom: 'warn[0]',
-        }
+        },
       ],
       table: [],
       gallery: [],
@@ -4314,19 +4314,21 @@ export const testConfigVentNew: Config[] = [
           echartOption: {
             // 设置提示框的显示属性
             tooltip: {
-              show: false
+              show: false,
             },
             // 设置图表的标题
-            title: [{ // 圆环中间内容
-              text: '三区',
-              left: "36%",
-              top: "40%",
-              textStyle: {
-                color: "#fff",
-                fontSize: 18,
-                align: "center"
+            title: [
+              {
+                // 圆环中间内容
+                text: '三区',
+                left: '36%',
+                top: '40%',
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 18,
+                  align: 'center',
+                },
               },
-            }
             ],
             type: 'pie',
             // 设置饼图的半径
@@ -4335,52 +4337,56 @@ export const testConfigVentNew: Config[] = [
             center: ['50%', '50%'],
             // 设置标签的显示属性
             label: {
-              show: false
+              show: false,
             },
             // 设置图元的边框颜色
             borderColor: 'rgba(27, 47, 63, 0.1)',
             // 设置图元的边框宽度
             borderWidth: 2,
             colorStops: [
-              [{
-                offset: 0,
-                color: 'rgba(177, 242, 255)' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(97, 228, 255)' // 100% 处的颜色
-              }
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(177, 242, 255)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(97, 228, 255)', // 100% 处的颜色
+                },
               ],
-              [{
-                offset: 0,
-                color: 'rgba(215, 180, 255)' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(145, 101, 255)' // 100% 处的颜色
-              }
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(215, 180, 255)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(145, 101, 255)', // 100% 处的颜色
+                },
               ],
-              [{
-                offset: 0,
-                color: 'rgba(207, 170, 255)' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(133, 87, 255)' // 100% 处的颜色
-              }
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(207, 170, 255)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(133, 87, 255)', // 100% 处的颜色
+                },
               ],
-              [{
-                offset: 0,
-                color: 'rgba(166, 255, 229)' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(85, 255, 171)' // 100% 处的颜色
-              }
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(166, 255, 229)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(85, 255, 171)', // 100% 处的颜色
+                },
               ],
-            ]
+            ],
           },
-        }
+        },
       ],
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath&deviceid=${deviceID}',
     },
@@ -6814,3 +6820,291 @@ export const testConfigVent182: Config[] = [
     },
   },
 ];
+
+// 皮带巷三级防灭火
+export const testBeltLaneFire: Config[] = [
+  {
+    deviceType: 'pdhz',
+    moduleName: '皮带火灾风险状态整体评价',
+    pageType: 'fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'table',
+            basis: '35%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'aqjkArray',
+          columns: [
+            {
+              name: '皮带巷场景区域',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '风险预警等级',
+              prop: 'netStatus',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      to: '/BeltMonitorWarn/index',
+    },
+    showStyle: {
+      size: 'width:450px;height:425px;',
+      version: '原版',
+      position: 'top:60px;left:0;',
+    },
+  },
+  {
+    deviceType: 'fmhjc',
+    moduleName: '防灭火检测与预警信息',
+    pageType: 'fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${systemname}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'aqjkArray',
+          columns: [
+            {
+              name: '设备类型',
+              prop: 'deviceType',
+            },
+            {
+              name: '预警状态',
+              prop: 'netStatus',
+            },
+            {
+              name: '设备类型',
+              prop: 'warnLevel',
+            },
+            {
+              name: '预警状态',
+              prop: 'netStatus',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:425px;',
+      version: '原版',
+      position: 'top:495px;left:0;',
+    },
+  },
+  {
+    deviceType: 'plmh',
+    moduleName: '喷淋灭火系统',
+    pageType: 'fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'devSgjc',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'list',
+            basis: '40%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'A',
+          readFrom: 'arrayCount',
+          items: [
+            {
+              label: '一氧化碳',
+              value: '${coVal}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '二氧化碳',
+              value: '${co2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '氧气',
+              value: '${o2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '温度',
+              value: '${tempVal}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:425px;',
+      version: '原版',
+      position: 'top:60px;right:0;',
+    },
+  },
+  {
+    deviceType: 'yjkfjz',
+    moduleName: '应急控风减灾',
+    pageType: 'fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'aqjkArray',
+          columns: [
+            {
+              name: '设备位置',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '前门状态',
+              prop: 'nowVal',
+            },
+            {
+              name: '后门状态',
+              prop: 'warnLevel',
+            },
+            {
+              name: '网络状态',
+              prop: 'netStatus',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:425px;',
+      version: '原版',
+      position: 'top:495px;right:0;',
+    },
+  },
+];

src/views/vent/monitorManager/comment/DeviceEcharts.vue

@@ -77,6 +77,7 @@
           <a-select-option value="6">10分钟</a-select-option>
           <a-select-option value="7">30分钟</a-select-option>
           <a-select-option value="8">1小时</a-select-option>
+          <a-select-option value="9">1天</a-select-option>
         </a-select>
       </template>
       <template v-else>

src/views/vent/monitorManager/mainFanMonitor/main.data.ts

@@ -1440,6 +1440,8 @@ export const initData = (deviceType?) => {
   } else if (sysOrgCode == 'yjmdhswmk') {
     //海石湾
     return initDataHsw();
+  } else if (sysOrgCode == 'nxnyjfmk') {
+    return initDataJf(deviceType);
   } else {
     return initData1();
   }
@@ -2007,6 +2009,100 @@ const initDataHsw = () => {
   });
   return data;
 };
+// 金凤
+const initDataJf = (deviceType?) => {
+  if (deviceType == 'fanmain_1') {
+    const data: any[] = [];
+    data.push({
+      angle: 2.5,
+      Hz: 36,
+      a: -0.1232,
+      b: 17.884,
+      c: 1215.5,
+      min: 90,
+      max: 170,
+    });
+    data.push({
+      angle: 0,
+      Hz: 36,
+      a: -0.125,
+      b: 16.5,
+      c: 1020,
+      min: 80,
+      max: 160,
+    });
+    data.push({
+      angle: 5,
+      Hz: 36,
+      a: -0.1141,
+      b: 18.207,
+      c: 1360,
+      min: 100,
+      max: 180,
+    });
+    return data;
+  } else if (deviceType == 'fanmain_2') {
+    const data: any[] = [];
+    data.push({
+      angle: 6,
+      Hz: 30,
+      a: -0.0799,
+      b: 14.753,
+      c: 1275,
+      min: 120,
+      max: 200,
+    });
+    data.push({
+      angle: 3,
+      Hz: 30,
+      a: -0.0897,
+      b: 14.825,
+      c: 1147.5,
+      min: 100,
+      max: 190,
+    });
+    data.push({
+      angle: 0,
+      Hz: 30,
+      a: -0.0918,
+      b: 14.143,
+      c: 1020,
+      min: 80,
+      max: 170,
+    });
+    return data;
+  } else if (deviceType == 'fanmain_system') {
+    const data: any[] = [];
+    data.push({
+      angle: 0,
+      Hz: 29,
+      a: -0.1193,
+      b: 16.385,
+      c: 1054,
+      min: 80,
+      max: 170,
+    });
+    data.push({
+      angle: 3,
+      Hz: 29,
+      a: -0.1071,
+      b: 16.5,
+      c: 1190,
+      min: 90,
+      max: 180,
+    });
+    data.push({
+      angle: -3,
+      Hz: 29,
+      a: -0.1134,
+      b: 14.348,
+      c: 850,
+      min: 80,
+      max: 150,
+    });
+    return data;
+  }
+};
 
 export const fanInfoData = reactive({
   fj: '一号回风井',