提交更新

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

@@ -1,6 +1,6 @@
 <template>
   <div class="basic-border">
-    <div class="title">{{ title }}</div>
+    <div class="title" :style="{width:widthV ? widthV+'px' :'146px',color: colorV ? colorV : '#fff'}">{{ title }}</div>
     <div class="content">
       <slot></slot>
     </div>
@@ -13,6 +13,12 @@ import { ref } from 'vue'
 let props = defineProps({
   title: {
     type: String
+  },
+  widthV:{
+    type:Number
+  },
+  colorV:{
+    type:String
   }
 })
 </script>
@@ -36,9 +42,9 @@ let props = defineProps({
   .title {
     display: flex;
     align-items: center;
-    width: 146px;
+    // width: 146px;
     height: 30px;
-    color: #fff;
+    // color: #fff;
     padding-left: 15px;
     background: var(--image-box-bg) no-repeat;
     background-size: 100% 100%;

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

@@ -183,6 +183,12 @@
         <template v-if="config.name === 'mixed_warn'">
           <MixedWarn></MixedWarn>
         </template>
+         <template v-if="config.name === 'rule_list'">
+          <RuleList></RuleList>
+        </template>
+          <template v-if="config.name === 'echart_bar_new'">
+          <EchartBarNew></EchartBarNew>
+        </template>
       </div>
     </div>
   </div>
@@ -244,6 +250,8 @@ import LongList1 from './preset/LongList1.vue'
 import LongList2 from './preset/LongList2.vue'
 import SearchTable from './preset/SearchTable.vue'
 import MixedWarn from './preset/MixedWarn.vue'
+import RuleList from './preset/RuleList.vue'
+import EchartBarNew from './preset/EchartBarNew.vue'
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

src/views/vent/home/configurable/components/preset/EchartBarNew.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="echart-bar-new">
+    <div class="list-title">
+      报警趋势统计
+    </div>
+     <div class="list-content">
+
+     </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .echart-bar-new {}
+}
+
+.echart-bar-new {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-5.png');
+   --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/ceshi.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+
+  .list-title {
+    width: 177px;
+    height: 30px;
+    line-height: 22px;
+    padding-left: 16px;
+    color: #01fefc;
+    font-weight: bolder;
+    background: var(--image-box-bg) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 5px;
+  }
+   .list-content {
+    width: 100%;
+    height: calc(100% - 35px);
+    background: var(--image-box-bg1) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

src/views/vent/home/configurable/components/preset/MixedWarn.vue

@@ -27,7 +27,7 @@
           <div class="warn-detail">
             <div class="warn-item">
               <div class="item-label">报警级别 : </div>
-              <div class="item-val"> {{ warnDetail.grade }}</div>
+              <div class="item-val text-val"> {{ warnDetail.grade }}</div>
             </div>
             <div class="warn-item">
               <div class="item-label">报警时间 : </div>
@@ -42,25 +42,50 @@
               <div class="item-val"> {{ warnDetail.device }}</div>
             </div>
             <div class="warn-item">
-              <div class="item-label">最高温度 : </div>
-              <div class="item-val"> {{ warnDetail.maxtemp }}</div>
+              <div class="item-label ">最高温度 : </div>
+              <div class="item-val text-val"> {{ warnDetail.maxtemp }}</div>
             </div>
             <div class="warn-item">
               <div class="item-label">平均速度 : </div>
-              <div class="item-val"> {{ warnDetail.speed }}</div>
+              <div class="item-val text-val1"> {{ warnDetail.speed }}</div>
             </div>
           </div>
         </basicBorder>
       </div>
     </div>
-    <div class="list-c"></div>
-    <div class="list-b"></div>
+    <div class="list-c">
+      <basicBorder title="报警地图位置">
+
+      </basicBorder>
+    </div>
+    <div class="list-b">
+      <basicBorder title="处理流程">
+        <div class="process-flow-box">
+          <div class="flow-title">
+            <span></span>
+            <span>当前状态:等待值班人员确认处理</span>
+          </div>
+          <div class="flow-process">
+            <div class="pic-process" v-for="(item, index) in picList" :key="index">
+              <img :src="item.src" alt="">
+              <div class="pic-text">{{ item.label }}</div>
+            </div>
+          </div>
+          <div class="flow-step">
+            <a-steps progress-dot :current="1">
+              <a-step title="" description="" v-for="(item,index) in 5" :key="index" />
+            </a-steps>
+          </div>
+        </div>
+      </basicBorder>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import basicBorder from '../BasicBorder.vue'
+import { getAssetURL } from '/@/utils/ui';
 
 let deviceModel = ref('CAM-001')
 let warnDetail = reactive({
@@ -70,8 +95,14 @@ let warnDetail = reactive({
   device: '双光谱相机',
   maxtemp: '65.3',
   speed: '48.7'
-
 })
+let picList = ref([
+  { src: getAssetURL('home-container/configurable/hsq/4-1.png'), label: '1.报警触发' },
+  { src: getAssetURL('home-container/configurable/hsq/4-2.png'), label: '2.系统确认' },
+  { src: getAssetURL('home-container/configurable/hsq/4-3.png'), label: '3.通知值班' },
+  { src: getAssetURL('home-container/configurable/hsq/4-4.png'), label: '4.现场处置' },
+  { src: getAssetURL('home-container/configurable/hsq/4-5.png'), label: '5.确认解除' },
+])
 
 </script>
 
@@ -85,6 +116,13 @@ let warnDetail = reactive({
 .mixed-warn {
   --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-11.png');
   --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/3-4.png');
+  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/4-1.png');
+  --image-box-bg3: url('@/assets/images/home-container/configurable/hsq/4-2.png');
+  --image-box-bg4: url('@/assets/images/home-container/configurable/hsq/4-3.png');
+  --image-box-bg5: url('@/assets/images/home-container/configurable/hsq/4-4.png');
+  --image-box-bg6: url('@/assets/images/home-container/configurable/hsq/4-5.png');
+
+  --image-box-bg7: url('@/assets/images/home-container/configurable/hsq/ceshi1.png');
   position: relative;
   width: 100%;
   height: 100%;
@@ -105,7 +143,7 @@ let warnDetail = reactive({
   .list-t {
     display: flex;
     justify-content: space-between;
-    height: 260px;
+    height: 235px;
     margin-bottom: 10px;
   }
 
@@ -150,6 +188,8 @@ let warnDetail = reactive({
   .echart-box {
     height: calc(100% - 44px);
     background-color: #114268;
+    background: var(--image-box-bg7) no-repeat;
+    background-size: 100% 100%;
   }
 
   .warn-detail {
@@ -159,10 +199,10 @@ let warnDetail = reactive({
   .warn-item {
     display: flex;
     align-items: center;
-    height: 32px;
+    height: 23px;
     background: linear-gradient(to right, #134c77, transparent);
-    margin-bottom: 10px;
-    padding: 0px 10px;
+    margin-bottom: 8px;
+    padding: 0px 15px;
     box-sizing: border-box;
 
     &:last-child {
@@ -170,5 +210,98 @@ let warnDetail = reactive({
     }
   }
 
+  .item-label {
+    margin-right: 5px;
+    font-size: 13px;
+  }
+
+  .item-val {
+    font-size: 13px;
+  }
+
+  .text-val {
+    color: #fc002a;
+  }
+
+  .text-val1 {
+    color: orange;
+  }
+
+  .list-c {
+    height: 150px;
+    margin-bottom: 10px;
+  }
+
+  .list-b {
+    position: relative;
+    height: 120px;
+  }
+
+  .process-flow-box {
+    height: 100%;
+  }
+
+  .flow-title {
+    position: absolute;
+    left: 150px;
+    top: 6px;
+    color: orange;
+
+    span {
+      &:nth-child(1) {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: orange;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .flow-process {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .pic-process {
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 36px;
+      height: 24px;
+    }
+
+    .pic-text {
+      width: 100%;
+      text-align: center;
+      border-top: 1px solid rgba(18, 73, 113);
+      border-bottom: 1px solid rgba(18, 73, 113);
+      border-left: 1px solid #29abf1;
+      border-right: 1px solid #29abf1;
+      border-radius: 5px;
+    }
+  }
+  .flow-step{
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+      left: 0;
+      padding: 0px 30px;
+    }
+  
+}
+:deep(.zxm-steps-icon .zxm-steps-icon-dot){
+  border: 1px solid #2cb6ff !important;
+}
+:deep(.zxm-steps-item-process > .zxm-steps-item-container > .zxm-steps-item-tail::after){
+     background-color: rgba(28, 118, 172,.6) !important;
+}
+:deep(.zxm-steps-item-wait > .zxm-steps-item-container > .zxm-steps-item-tail::after){
+   background-color: rgba(28, 118, 172,.6) !important;
 }
 </style>

src/views/vent/home/configurable/components/preset/RuleList.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="rule-list">
+    <div class="list-title">
+      预警规则配置
+    </div>
+    <div class="list-content">
+      <div class="basic-list-content">
+        <div class="content-title">
+          <div class="title-item" v-for="(item, index) in titleList" :key="index">{{ item.label }}</div>
+        </div>
+        <div class="table-content">
+          <div class="content-item" v-for="(item, index) in tableData" :key="index">
+            <div class="item-text">{{ item.ruleId }}</div>
+            <div class="item-text">{{ item.ruleName }}
+            </div>
+            <div class="item-text item-text1">{{ item.fctj }}</div>
+            <div class="item-text ">
+              <a-switch v-model:checked="item.status" size="small" />
+            </div>
+            <div class="item-text">
+              <span class="text-look">编辑</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="basic-list-content">
+         <basicBorder :widthV="298" colorV="orange" title="【编辑规则】一级温度报警（Rule-001）">
+            <div class="temp-warn">
+            <div class="warn-item">
+              <div class="item-label">规则名称 : </div>
+              <a-input class="item-input" v-model:value="rulesData.ruleName" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">报警级别 : </div>
+              <a-input class="item-input" v-model:value="rulesData.grade" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">温度阈值 : </div>
+              <a-input class="item-input" v-model:value="rulesData.temp" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">持续时间 : </div>
+              <a-input class="item-input" v-model:value="rulesData.time" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">联动动作 : </div>
+              <a-input class="item-input" v-model:value="rulesData.lddz" placeholder="请输入" size="small" />
+            </div>
+             <div class="warn-item">
+              <div class="item-label">通知对象 : </div>
+              <a-input class="item-input" v-model:value="rulesData.person" placeholder="请输入" size="small" />
+            </div>
+             <div class="btn-box">
+        <div class="baisc-btn">取消</div>
+        <div class="baisc-btn">
+          <div class="btn-item">保存</div>
+        </div>
+      </div>
+          </div>
+        </basicBorder>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import basicBorder from '../BasicBorder.vue'
+import { rules } from '/@/utils/helper/validator.js'
+
+let titleList = ref<any[]>([
+  { label: '规则ID', value: '1' },
+  { label: '规则名称', value: '2' },
+  { label: '触发条件', value: '3' },
+  { label: '启用', value: '4' },
+  { label: '操作', value: '5' },
+])
+let tableData = ref<any[]>([
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: false, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
+])
+let rulesData=reactive({
+ruleName:'',
+grade:'',
+temp:'',
+time:'',
+lddz:'',
+person:'',
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .rule-list {}
+}
+
+.rule-list {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-5.png');
+  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/2-24.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+
+  .list-title {
+    width: 177px;
+    height: 30px;
+    line-height: 22px;
+    padding-left: 16px;
+    color: #01fefc;
+    font-weight: bolder;
+    background: var(--image-box-bg) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 5px;
+  }
+
+  .list-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: calc(100% - 35px);
+  }
+
+  .basic-list-content {
+    width: 100%;
+    height: calc(50% - 5px);
+  }
+
+  .content-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 34px;
+    background: var(--image-box-bg2) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 6px;
+  }
+
+  .title-item {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    color: #01fefc;
+    &:nth-child(2){
+      flex:1.5
+    }
+    &:nth-child(3){
+      flex:1.5
+    }
+  }
+
+  .table-content {
+    height: calc(100% - 40px);
+    overflow-y: auto;
+  }
+
+  .content-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 36px;
+    font-size: 14px;
+
+    &:nth-child(odd) {
+      background-color: #0e3455;
+    }
+
+    &:nth-child(even) {
+      background-color: #114268;
+    }
+  }
+
+  .item-text {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    &:nth-child(2){
+        flex:1.5
+    }
+     &:nth-child(3){
+        flex:1.5
+    }
+  }
+
+  .item-text1 {
+     color: orange;
+  }
+  .text-look {
+    padding: 0px 3px;
+    margin: 0px 2px;
+    border-radius: 2px;
+    background-color: #2484bc;
+    cursor: pointer;
+  }
+  .temp-warn{
+    position: relative;
+    height: 100%;
+  }
+   .warn-item {
+   display: flex;
+    align-items: center;
+    height: 30px;
+    background: linear-gradient(to right, #134c77, transparent);
+    margin-bottom: 6px;
+    padding: 0px 10px;
+    box-sizing: border-box;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+   .item-label {
+    width: 100px;
+    text-align: right;
+    margin-right: 5px;
+  }
+  .zxm-input {
+    background-color: transparent;
+    border: 1px solid #2792c2;
+    color: #fff;
+  }
+   .btn-box {
+   width: 140px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    right: 10px;
+    bottom: -5px;
+  }
+
+  .baisc-btn {
+   display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 65px;
+    height: 26px;
+    border: 1px solid #01fefc;
+    border-radius: 3px;
+    padding: 3px;
+    cursor: pointer;
+  }
+
+  .btn-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(32, 166, 169);
+  }
+   ::-webkit-scrollbar{
+    display: none;
+  }
+}
+</style>

src/views/vent/home/configurable/components/preset/SearchTable.vue

@@ -10,7 +10,7 @@
       <div class="content-title">
         <div class="title-item" v-for="(item, index) in titleList" :key="index">{{ item.label }}</div>
       </div>
-      <div class="history-content">
+      <div class="table-content">
         <div class="content-item" v-for="(item, index) in tableData" :key="index">
           <div class="item-text">{{ item.time }}</div>
           <div class="item-text">{{ item.address }}
@@ -23,7 +23,6 @@
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -124,7 +123,7 @@ let tableData = ref<any[]>([
   color: #01fefc;
 }
 
-.history-content {
+.table-content {
   height: calc(100% - 40px);
   overflow-y: auto;
 }

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

@@ -809,7 +809,7 @@ export const testConfigWarn: Config[] = [
         direction: 'column',
         items: [
           {
-            name: '',
+            name: 'rule_list',
             basis: '100%',
           },
         ],
@@ -861,7 +861,7 @@ export const testConfigWarn: Config[] = [
         direction: 'column',
         items: [
           {
-            name: '',
+            name: 'echart_bar_new',
             basis: '100%',
           },
         ],
@@ -887,6 +887,321 @@ export const testConfigWarn: Config[] = [
     },
   },
 ];
+//系统管理
+export const testConfigSystem: Config[] = [
+  {
+    deviceType: 'listLeft',
+    moduleName: '',
+    pageType: 'gas_injection',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+          trans: {},
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: '',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:770px;height:calc(100% - 315px);',
+      version: '普通版',
+      position: 'top:65px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'listLeft',
+    moduleName: '',
+    pageType: 'gas_injection',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+          trans: {},
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: '',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:670px;height:calc(100% - 315px);',
+      version: '普通版',
+      position: 'top:65px;left:790px;',
+    },
+  },
+  {
+    deviceType: 'listLeft',
+    moduleName: '',
+    pageType: 'gas_injection',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+          trans: {},
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: '',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:420px;height:calc(100% - 251px);',
+      version: '普通版',
+      position: 'top:0px;right:10px;',
+    },
+  },
+  {
+    deviceType: 'listLeft',
+    moduleName: '',
+    pageType: 'gas_injection',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+          trans: {},
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: '',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:770px;height:230px;',
+      version: '普通版',
+      position: 'bottom:10px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'listLeft',
+    moduleName: '',
+    pageType: 'gas_injection',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+          trans: {},
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: '',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:670px;height:230px;',
+      version: '普通版',
+      position: 'bottom:10px;left:790px;',
+    },
+  },
+  {
+    deviceType: 'listLeft',
+    moduleName: '',
+    pageType: 'gas_injection',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+          trans: {},
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: '',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:420px;height:230px;',
+      version: '普通版',
+      position: 'bottom:10px;right:10px;',
+    },
+  },
+];
 
 export const testConfigVentSsl: Config[] = [
   {

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

@@ -19,6 +19,7 @@ import navMenu from './components/navMenu.vue'
 import fireMonitor from './fireMonitor.vue'
 import deviceManger from './deviceManger.vue'
 import warnMonitor from './warnMonitor.vue'
+import systemManger from './systemManger.vue'
 
 const { mainTitle, data, updateData } = useInitPage('红纱泉露天煤矿系统');
 //当前激活界面
@@ -39,6 +40,7 @@ function changeMenu(param) {
     case 'ldpz':
       break;
     case 'xtgl':
+        activeComponente.value = systemManger
       break;
     case 'dpzs':
       break;

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

@@ -0,0 +1,165 @@
+<template>
+  <div class="system-manger">
+    <div class="nav-menu">
+      <div :class="activeIndex == index ? 'nav-item-active' : 'nav-item'" v-for="(item, index) in navList" :key="index"
+        @click="handleChange(item, index)">{{ item.label }}</div>
+    </div>
+    <ModuleCommonHsq 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" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, computed, nextTick, onBeforeMount, watch } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleCommonHsq from './components/ModuleCommonHsq.vue';
+import { getSystemApi } from './configurable.api';
+import { testConfigSystem } from './configurable.data';
+
+const { configs, fetchConfigs } = useInitConfigs();
+const { data, updateData } = useInitPage('红纱泉露天煤矿系统');
+let activeIndex = ref(0)
+let interval: number | undefined;
+let navList = ref<any[]>([
+  { label: '角色权限', value: '1' },
+  { label: '用户管理', value: '2' },
+  { label: '日志审计', value: '3' },
+  { label: '系统配置', value: '4' },
+  { label: '数据备份', value: '5' },
+])
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  timer = setTimeout(
+    async () => {
+      getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    10000
+  );
+}
+
+//nav选项切换
+function handleChange(item, index) {
+  activeIndex.value = index
+}
+
+onMounted(() => {
+  fetchConfigs('gas_injection').then(() => {
+    configs.value = testConfigSystem;
+    getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
+  });
+  getMonitor()
+});
+
+watch(
+  () => data.value,
+  (newData, oldData) => {
+
+  }
+);
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .system-manger {}
+}
+
+.system-manger {
+  --image-box1-bg: url('@/assets/images/home-container/configurable/hsq/5-1.png');
+  --image-box1-bg1: url('@/assets/images/home-container/configurable/hsq/5-3.png');
+  --image-box1-bg2: url('@/assets/images/home-container/configurable/hsq/5-4.png');
+  --image-box1-bg3: url('@/assets/images/home-container/configurable/hsq/5-2.png');
+  --image-box1-bg4: url('@/assets/images/home-container/configurable/hsq/5-6.png');
+  --image-box1-bg5: url('@/assets/images/home-container/configurable/hsq/5-5.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  padding: 0px 10px;
+  box-sizing: border-box;
+  background-color: #09172c;
+}
+
+.vent-box1-bg {
+  &:nth-child(2) {
+    background: var(--image-box1-bg) no-repeat;
+    background-size: 100% 100%;
+
+  }
+
+  &:nth-child(3) {
+    background: var(--image-box1-bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &:nth-child(4) {
+    background: var(--image-box1-bg1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &:nth-child(5) {
+    background: var(--image-box1-bg3) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &:nth-child(6) {
+    background: var(--image-box1-bg3) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &:nth-child(7) {
+    background: var(--image-box1-bg2) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.nav-menu {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 450px;
+  height: 52px;
+  padding-left: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.nav-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 36px;
+  background: var(--image-box1-bg4) no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+
+.nav-item-active {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 36px;
+  background: var(--image-box1-bg5) no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

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

@@ -1,316 +0,0 @@
-<template>
-  <div class="company-home">
-    <div class="top-bg">
-      <div class="main-title">{{ mainTitle }}</div>
-    </div>
-    <div class="main-container">
-      <!-- <div class="nav-cards">
-        <navMenu @toggleMenu="toggleMenu"></navMenu>
-      </div> -->
-        <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" :visible-detail="cfg.showDetail" />
-      
-      <div
-        :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
-        <a-spin class="spin" :spinning="!isInitModal" tip="正在加载，请稍等..." />
-        <div class="modal-box" id="modalBox" v-if="isInitModal">
-          <Three3D ref="three3D" :modalName="'zhuqi'" class="modal-3d" @success="initModalAnimate" />
-          <div class="modal-css3d" id="css3dContainer"> </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, computed, nextTick, onBeforeMount, watch } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleCommon from './components/ModuleCommon.vue';
-import navMenu from './components/gasInject/navMenu.vue';
-import Three3D from './components/three3D.vue';
-import { getHomeData, getSystemApi } from './configurable.api';
-// import { useRoute } from 'vue-router';
-import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
-import { animateCamera } from '/@/utils/threejs/util';
-import { modalAnimate } from './threejs/gasInjection';
-// import * as dat from 'dat.gui';
-// const gui = new dat.GUI();
-// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
-
-const { configs, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
-const three3D = ref(null);
-let interval: number | undefined;
-//当前选中菜单项
-let menuName = ref('zjm');
-//运行状态
-let runStatus = ref('')
-const isInitModal = ref(false);
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor() {
-  timer = setTimeout(
-    async () => {
-      getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    },
-    10000
-  );
-
-}
-//选项切换
-// function toggleMenu(param) {
-//   menuName.value = param;
-//   switch (menuName.value) {
-//     case 'zjm':
-//       configs.value = testConfigGasInject;
-//       break;
-//     // case 'syq':
-//     //   configs.value = testConfigGasInjectSy;
-//     //   break;
-//     case 'zqxt':
-//       configs.value = testConfigGasInjectZq;
-//       break;
-//     case 'ccxt':
-//       configs.value = testConfigGasInjectCc;
-//       break;
-//   }
-
-//   // 刷新/
-//   nextTick(async () => {
-//     three3D.value?.resizeRenderer();
-//     const modal = three3D.value.getModal();
-//     if (modal) {
-//       const oldCamera = modal.camera;
-//       const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
-//       if (param == 'zqxt') {
-//         const newP = { x: -30.683057066775824, y: -0.9161184591449614, z: 39.6716716890212 };
-//         const newT = { x: 11.204235206978213, y: -1.0276506907362775, z: 40.37084673927868 };
-//         await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-//       } else if (param == 'zjm') {
-//         const newP = { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 };
-//         const newT = { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 };
-//         await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-//       } else {
-//         const newP = { x: -43.18945276107877, y: 40.44347648044, z: 0.059975838354020664 };
-//         const newT = { x: 6.431421158296241, y: -23.819993211059913, z: 0.17017939135402457 };
-//         await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-//       }
-//     }
-//   });
-// }
-
-function initModalAnimate(modal) {
-  modalAnimate(modal, data);
-  modal.isRender = true;
-}
-
-onMounted(() => {
-  fetchConfigs('gas_injection').then(() => {
-    configs.value = testConfigGasInject;
-    getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
-  });
- getMonitor()
-});
-
-watch(
-  () => data.value,
-  (newData, oldData) => {
-    if (newData && !Object.keys(oldData).length) {
-      isInitModal.value = true;
-      runStatus.value = newData.deviceStatusControl.runStatus
-
-    }
-  }
-);
-
-onUnmounted(() => {
-  clearInterval(interval);
-});
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
-    --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
-    --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
-  }
-}
-
-.company-home {
-  --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
-  --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
-  --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
-
-  .top-bg {
-    width: 100%;
-    height: 66px;
-    background: var(--image-modal-top) no-repeat center;
-    background-size: 100% 100%;
-    position: absolute;
-    z-index: 1;
-
-    .main-title {
-      height: 66px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .top-nav {
-      position: absolute;
-      top: 0;
-      width: 880px;
-      height: 100%;
-      display: flex;
-      justify-content: flex-start;
-    }
-  }
-
-  .main-container {
-    position: absolute;
-    top: 66px;
-    width: 100%;
-    height: calc(100% - 66px);
-    padding: 0px 10px;
-    box-sizing: border-box;
-  }
-
-  .main-status {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 440px;
-    height: 80px;
-    font-size: 18px;
-    font-family: 'douyuFont';
-    margin: 10px 0px;
-    background: var(--image-modal-status);
-    background-size: 100% 100%;
-  }
-
-  .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;
-  }
-
-  .modal-box {
-    width: calc(100% - 20px);
-    height: calc(100% - 20px);
-    position: relative;
-    pointer-events: auto;
-    margin: 10px;
-  }
-
-  .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;
-  }
-
-  .nav-cards {
-    position: absolute;
-    left: 50%;
-    top: 0px;
-    transform: translate(-50%, 0);
-    width: 691px;
-    height: 58px;
-    background: var(--image-modal-center) no-repeat;
-    background-size: 100% 100%;
-  }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
-
-.modal-box {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  pointer-events: auto;
-}
-
-// 试验区模型区域样式
-.syq-modal {
-  position: absolute;
-  top: 135px;
-  right: 20px;
-  width: calc(100% - 510px);
-  height: 515px;
-  background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-.vent-modal {
-  position: absolute;
-  top: 70px;
-  left: 50%;
-  transform: translate(-50%, 0px);
-  width: calc(100% - 920px);
-  height: 500px;
-  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-  background-size: 100% 100%;
-  pointer-events: auto;
-  // padding: 15px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.vent-modal-1 {
-  position: absolute;
-  top: 70px;
-  left: 460px;
-  width: calc(100% - 470px);
-  height: 480px;
-  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-  background-size: 100% 100%;
-  pointer-events: auto;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.modal-3d {
-  width: 100%;
-}
-
-.spin {
-  width: 100%;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  z-index: 0;
-}
-</style>