gas-injection/src/views/vent/monitorManager/chamberMonitor/components/chamberHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box">
        <div class="monitor-info item-box">
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>通风监测</div>
            </template>
            <template #container>
              <div class="vent-param">
                <div class="light-group">
                  <div class="param-item">
                    <div class="param">
                      <div class="param-icon">
                        <div class="param-title">硐室风量</div>
                        <div class="param-unit">(m³/min)</div>
                      </div>

                      <div class="param-val-box">
                        <div class="param-val-icon"></div>
                        <div class="param-val">3000</div>
                      </div>
                    </div>
                  </div>
                  <div class="param-item">
                    <div class="param">
                      <div class="param-icon">
                        <div class="param-title">硐室需风量</div>
                        <div class="param-unit">(m³/min)</div>
                      </div>
                      <div class="param-val-box">
                        <div class="param-val-icon"></div>
                        <div class="param-val">3500</div>
                      </div>
                    </div>
                  </div>
                  <div class="param-item">
                    <div class="param">
                      <div class="param-icon">
                        <div class="param-title" style="color: #61ddb1; font-weight: 600; font-size: 16px">风量</div>
                        <div class="param-unit" style="color: #61ddb1; font-weight: 600; font-size: 14px; top: -4px">预测</div>
                      </div>
                      <div class="param-val-box">
                        <div class="param-val-icon"></div>
                        <div class="param-val" style="color: #ff3823">风量不足</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="input-box">
                <div v-for="(item, index) in windowParam" :key="index" class="input-item">
                  <div class="">{{ item.title }}</div>
                  <div class="value">-</div>
                  <a-input class="input-value" v-model="item.inputNum" placeholder="" />
                  <span class="btn btn1">调节</span>
                </div>
              </div>
            </template>
          </ventBox1>
        </div>
        <div class="warning-group">
          <ventBox1>
            <template #title>
              <div>近一月报警情况</div>
            </template>
            <template #container>
              <div class="monitor-box">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon" /><span>报警信息</span></div>
                <div class="item-group">
                  <div class="item-col">
                    <SvgIcon class="icon" size="24" name="alarm-fire" />
                    <span class="title">火焰传感器</span>
                    <span class="value">无</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="24" name="alarm-smoke" />
                    <span class="title">烟雾传感器</span>
                    <span class="value" style="color: #ff3823; font-weight: 600">15</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="24" name="alarm-CO" />
                    <span class="title">CO传感器</span>
                    <span class="value">无</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="24" name="alarm-temperature" />
                    <span class="title">温度传感器</span>
                    <span class="value">无</span>
                  </div>
                </div>
              </div>
              <div class="monitor-box">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="warning-icon" /><span>预警信息</span></div>
                <div class="item-group">
                  <div class="item-col">
                    <SvgIcon class="icon" size="22" name="warning-fire" />
                    <span class="title">火焰传感器</span>
                    <span class="value">无</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="22" name="warning-smoke" />
                    <span class="title">烟雾传感器</span>
                    <span class="value" style="color: #ff9b17; font-weight: 600">15</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="22" name="warning-CO" />
                    <span class="title">CO传感器</span>
                    <span class="value">无</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="22" name="warning-temperature" />
                    <span class="title">温度传感器</span>
                    <span class="value">无</span>
                  </div>
                </div>
                <div class="alarm-box">
                  <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto" />
                </div>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
      <div class="lr right-box">
        <div class="item-box sensor-container">
          <ventBox1>
            <template #title>
              <div>光纤测温实时监测</div>
            </template>
            <template #container>
              <div class="temperature-group">
                <div class="light-group">
                  <div class="light-bg"></div>
                  <div class="light-item">
                    <SvgIcon class="icon" size="25" name="aveg-temperature" />
                    <div class="light">
                      <div class="light-icon"></div>
                      <div class="light-title">平均温度</div>
                      <div class="light-val-box">
                        <div class="light-val-icon"></div>
                        <div class="light-val">56.99</div>
                      </div>
                    </div>
                  </div>
                  <div class="light-item">
                    <SvgIcon class="icon" size="25" name="max-temperature" />
                    <div class="light">
                      <div class="light-icon"></div>
                      <div class="light-title">最高温度</div>
                      <div class="light-val-box">
                        <div class="light-val-icon"></div>
                        <div class="light-val">56.99</div>
                      </div>
                    </div>
                  </div>
                  <div class="light-item">
                    <SvgIcon class="icon" size="25" name="min-temperature" />
                    <div class="light">
                      <div class="light-icon"></div>
                      <div class="light-title">最低温度</div>
                      <div class="light-val-box">
                        <div class="light-val-icon"></div>
                        <div class="light-val">56.99</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </ventBox1>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>烟雾传感器实时监测</div>
            </template>
            <template #container>
              <a-table
                :columns="sensorColumns"
                :data-source="smokeDataSource"
                :pagination="false"
                size="small"
                maxWidth="340"
                :scroll="{ x: 'max-content', y: 180 }"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex === 'warnFlag'">
                    <span v-if="record['warnFlag'] == 0" style="color: #00ff00">正常</span>
                    <span v-else style="color: #ff0000"> {{ record.warnDes }}</span>
                  </template>
                </template>
              </a-table>
            </template>
          </ventBox1>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>{{}}喷粉监控</div>
            </template>
            <template #container>
              <a-table
                :columns="dustColumns"
                :data-source="dustDataSource"
                :pagination="false"
                size="small"
                maxWidth="340"
                :scroll="{ x: 'max-content', y: 240 }"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex === 'warnFlag'">
                    <span v-if="record['warnFlag'] == 0" style="color: #00ff00">链接</span>
                    <span v-else style="color: #ff0000"> {{ record.warnDes }}</span>
                  </template>
                  <template v-if="column.dataIndex === 'action'">
                    <a-switch v-model:checked="openDust" @change="handleDust" />
                  </template>
                </template>
              </a-table>
            </template>
          </ventBox1>
        </div>
        <!-- <div class="item-box" >
          <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
        </div> -->
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
  // import MonitorTable from '../comment/MonitorTable.vue';
  import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { mountedThree, destroy, addChamberText, setModelType } from '../chamber.threejs';
  import { SvgIcon } from '/@/components/Icon';
  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
  import { warningConfig, sensorColumns, dustColumns, windowParam } from '../chamber.data';
  import { list } from '../chamber.api';
  import LivePlayer from '@liveqing/liveplayer-v3';

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
  });

  const loading = ref(false);

  // 默认初始是第一行
  const openDust = ref(false);
  const fiberDataSource = ref([]); //dusting
  const dustDataSource = ref([]);
  const smokeDataSource = ref([]);
  const temperatureDataSource = ref([]);
  const fireDataSource = ref([]);

  // 监测数据
  const selectData = reactive({});

  const flvURL1 = () => {
    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
    // return ''
  };

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          if (props.deviceId) {
            const data = await getDataSource(props.deviceId);
            Object.assign(selectData, data);
          }
          if (timer) {
            timer = null;
          }
          await getMonitor();
          loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID });
    const result = res.msgTxt;
    result.forEach((item) => {
      if (item.type === 'dusting_auto') {
        // 喷粉
        dustDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type === 'fiber_normal') {
        // 光纤
        fiberDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type === 'modelsensor_smoke') {
        // 烟雾
        smokeDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type === 'modelsensor_temperature') {
        // 温度
        temperatureDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type === 'modelsensor_fire') {
        // 温度
        fireDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type === 'sys') {
        // 硐室基本
        // fiberDataSource.value = item.filter((data: any) => {
        //   const readData = data.readData;
        //   return Object.assign(data, readData);
        // })
      }
    });
  }

  // 喷粉操作
  function handleDust() {
    //
  }

  watch(
    () => props.deviceId,
    () => {
      setModelType('chamberBase');
      loading.value = true;
    }
  );

  onBeforeMount(() => {});

  onMounted(() => {
    loading.value = true;
    mountedThree().then(async () => {
      await setModelType('chamberBase');
      loading.value = false;
      timer = null;
      await getMonitor(true);
    });
  });

  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;

  .warning-group {
    padding: 10px 0;
  }
  .monitor-box {
    width: 100%;
    margin-bottom: 20px;
    .parameter-title {
      position: relative;
      width: 100%;
      height: 16px;
      margin-top: 10px;
      margin-bottom: 5px;
      .icon,
      span {
        position: absolute;
        top: -10px;
      }
    }
    .group-parameter-title {
      // background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
      .icon {
        left: -12px;
        top: -20px;
      }
      span {
        left: 24px;
      }
    }
    .item-group {
      display: flex;
      flex-wrap: wrap;
      .item-col {
        width: calc(50% - 5px);
        background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
        position: relative;
        // display: flex;
        // align-items: center;
        &:nth-child(even) {
          margin-left: 10px;
        }
        padding: 2px 0;
        margin: 3px 0;
        .title {
          margin-left: 5px;
        }
        .value {
          position: absolute;
          right: 10px;
          top: 5px;
        }
      }
    }
  }
  .alarm-box {
    margin-top: 10px;
  }

  // .monitor-container {
  //   width: 100%;
  //   height: 100%;
  //   // height: 550px;
  //   // border: 1px solid #fff;
  //   margin-top: 20px;
  //   padding-top: 20px;
  //   display: flex;
  //   justify-content: space-between;

  //   .lr {
  //     width: 350px;
  //     height: 100%;
  //     display: flex;
  //     flex-direction: column;
  //     margin-top: 10px;
  //     pointer-events: auto;

  //   }

  //   .right-box {
  //     width: 320px;
  //   }

  //   .left-box {
  //     margin-top: 30px;

  //     .monitor-info {
  //       .temperature-group {
  //         width: 100%;
  //         margin-top: 10px;
  //         .light-group{
  //           display: flex;
  //           flex-direction: row;
  //           justify-content: space-between;
  //           position: relative;
  //           .light-bg{
  //             width: 331px;
  //             height: 42px;
  //             background: url('/@/assets/images/vent/plane-bg.png') no-repeat;
  //             background-size: contain;
  //             position: absolute;
  //             z-index: -1;
  //             top: 44px;
  //           }
  //           .temperature-item {
  //             width: 120px;
  //             display: flex;
  //             flex-direction: column;
  //             justify-content: center;
  //             align-items: center;
  //             position: reactive;
  //             .icon {
  //               display: block;
  //               position: absolute;
  //               top: -5px;
  //             }

  //             .temperature {
  //               display: flex;
  //               flex-direction: column;
  //               justify-content: center;
  //               align-items: center;
  //               .temperature-icon{
  //                 width: 90px;
  //                 height: 58px;
  //                 background: url('/@/assets/images/vent/ligth-q.png');
  //               }
  //               .temperature-title{
  //                 position: relative;
  //                 top: -15px;
  //               }

  //               .temperature-val-box{
  //                 display: flex;
  //                 flex-direction: column;
  //                 justify-content: center;
  //                 align-items: center;
  //                 position: relative;
  //                 top: -10px;
  //                 .temperature-val-icon{
  //                   width: 2px;
  //                   height: 18px;
  //                   background: #00d8ff;
  //                   position: relative;
  //                   &::after{
  //                     content: '';
  //                     display: block;
  //                     position: absolute;
  //                     width: 6px;
  //                     height: 6px;
  //                     border-radius: 3px;
  //                     background: #00d8ff;
  //                     bottom: -2px;
  //                     left: -2px;
  //                   }

  //                 }
  //                 .temperature-val{
  //                   position: relative;
  //                   font-family: 'douyuFont';
  //                   color: #20dbfd;
  //                   text-shadow: 0 0 25px #00d8ff;
  //                   font-size: 13px;
  //                   border: 1px solid #40B7F3;
  //                   padding: 5px 8px 2px 8px;
  //                   top: 2px;
  //                   &::after{
  //                     width: calc(100% - 4px);
  //                     height: calc(100% - 4px);
  //                     content: '';
  //                     position: absolute;
  //                     top: 2px;
  //                     left: 2px;
  //                     display: block;
  //                     border: 1px solid #006EA6;
  //                   }
  //                 }
  //               }

  //             }
  //           }
  //         }

  //       }

  //     }
  //     .warning-group {
  //       padding: 10px 0;
  //     }
  //     .monitor-box {
  //       width: 100%;
  //       margin-bottom: 20px;
  //       .parameter-title{
  //         position: relative;
  //         width: 100%;
  //         height: 16px;
  //         margin-top: 10px;
  //         margin-bottom: 5px;
  //         .icon, span{
  //           position: absolute;
  //           top: -10px;
  //         }
  //       }
  //       .group-parameter-title{
  //         background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);

  //         .icon{
  //           left: -12px;
  //           top: -20px;
  //         }
  //         span{
  //           left: 20px;
  //         }

  //       }
  //       .item-group{
  //         display: flex;
  //         flex-wrap: wrap;
  //         .item-col{
  //           width: calc(50% - 5px);
  //           background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
  //           position: relative;
  //           // display: flex;
  //           // align-items: center;
  //           &:nth-child(even){
  //             margin-left: 10px;
  //           }
  //           padding: 2px 0;
  //           margin: 3px 0;
  //           .title{
  //             margin-left: 5px;
  //           }
  //           .value{
  //             position: absolute;
  //             right: 10px;
  //             top: 5px;
  //           }
  //         }
  //       }

  //     }
  //     .alarm-box{
  //       margin-top: 10px;
  //     }
  //   }
  //   .box-title{
  //     color: #fff;
  //     margin-bottom: 8px;
  //     padding-left: 10px;
  //     position: relative;
  //     font-size: 16px;
  //     &::after{
  //       content: '';
  //       position: absolute;
  //       display: block;
  //       width: 4px;
  //       height: 12px;
  //       top: 7px;
  //       left: 0px;
  //       background: #45d3fd;
  //       border-radius: 4px;
  //     }
  //   }

  // }

  :deep(.@{ventSpace}-tabs-tabpane-active) {
    overflow: auto;
  }

  // .input-box {
  //   display: flex;
  //   align-items: center;
  //   padding-left: 10px;

  //   .input-title {
  //     color: #73e8fe;
  //     width: auto;
  //   }

  //   .@{ventSpace}-input-number {
  //     border-color: #ffffff88 !important;
  //   }

  //   margin-right: 10px;
  // }
</style>