vent-template/src/views/vent/monitorManager/groutMonitor/components/groutHome.vue

<template>
  <div class="monitor-container">
    <div class="lr left-box">
      <div class="monitor-info item-box">
        <ventBox1>
          <template #title>
            <div>设备信息监测</div>
          </template>
          <template #container v-if="dataSource.length > 0">
            <div v-for="(monitor, key) in deviceMonitorData" :key="key" class="monitor-item">
              <div class="item-title">{{ monitor.text }}</div>
              <div class="item-val">{{
                key.startsWith('1#')
                  ? dataSource[0][key.split('_')[1]] || '-'
                  : key.startsWith('2#')
                  ? dataSource[1][key.split('_')[1]] || '-'
                  : dataSource[0][key] || '-'
              }}</div>
              <div class="item-unit">{{ monitor.unit }}</div>
            </div>
          </template>
        </ventBox1>
      </div>
      <div class="warning-group">
        <ventBox1>
          <template #title>
            <div>近一月报警情况</div>
          </template>
          <template #container>
            <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto" />
          </template>
        </ventBox1>
      </div>
      <div class="item-box vent-margin-t-10">
        <!-- <LivePlayer id="fm-player1" style="height: 220px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls /> -->
      </div>
    </div>
    <div class="lr right-box">
      <div class="control-container item-box">
        <ventBox1>
          <template #title>
            <div>设备设施集中控制</div>
          </template>
          <template #container>
            <div class="control-group">
              <div class="control-item" v-for="(item, key) in deviceControlData" :key="key">
                <div class="control-item-title">{{ item }}</div>
                <div class="control-item-state" v-if="!key.startsWith('2#')">
                  <a-switch
                    v-model="dataSource[0][key.split('_')[1]]"
                    size="small"
                    checked-children="开启"
                    un-checked-children="关闭"
                    @change="handlerDevice(dataSource[0][key.split('_')[1]])"
                  />
                </div>
                <div class="control-item-state" v-else>
                  <a-switch
                    v-model="dataSource[1][key.split('_')[1]]"
                    size="small"
                    checked-children="开启"
                    un-checked-children="关闭"
                    @change="handlerDevice(dataSource[1][key.split('_')[1]])"
                  />
                </div>
              </div>
            </div>
            <a-divider style="height: 1px; background-color: #d7d7d755" />
            <div class="control-btn-group">
              <div class="control-left-box">
                <div class="btn-box">
                  <span @click="handlerDevice({ remote: true })">远程</span>
                  <span @click="handlerDevice({ remote: false })">就地</span>
                </div>
                <div class="icon-box" :class="{ 'remote-icon-box': true }">
                  <div class="icon"></div>
                </div>
              </div>
              <div class="control-right-box">
                <a-button class="btn" type="primary" @click="handlerDevice({ run: true })">一键启动</a-button>
                <a-button type="primary" danger @click="handlerDevice({ run: false })">紧急停止</a-button>
              </div>
            </div>
            <a-divider style="height: 1px; background-color: #d7d7d755" />
            <div class="parameter-btn-group">
              <a-button type="primary" @click="openModal('RunParameterModal')">参数设置</a-button>
              <a-button type="primary" @click="openModal('WarningParameterModal')">报警设置</a-button>
            </div>
          </template>
        </ventBox1>
      </div>
      <div class="control-container item-box echarts-box">
        <ventBox1>
          <template #title>
            <div>设备实时监测曲线</div>
          </template>
          <template #container>
            <div class="btn-group">
              <span class="active">注浆流量</span>
              <span>注浆压力</span>
              <span>水舱液位</span>
              <span>注浆筒液位</span>
            </div>
            <div class="item-box echarts-container">
              <div class="echarts-group">
                <div class="echarts-item">
                  <BarAndLineCustom
                    xAxisPropType="readTime"
                    :chartData="dataSource"
                    height="240px"
                    :propTypeArr="['flowRate']"
                    :option="zhujiangOption"
                  />
                </div>
                <div class="echarts-item">
                  <BarAndLineCustom
                    xAxisPropType="readTime"
                    :chartData="dataSource"
                    height="240px"
                    :propTypeArr="['pressure']"
                    :option="yaliOption"
                  />
                </div>
                <div class="echarts-item">
                  <BarAndLineCustom
                    xAxisPropType="readTime"
                    :chartData="dataSource"
                    height="240px"
                    :propTypeArr="['flowRate']"
                    :option="zhujiangOption"
                  />
                </div>
                <div class="echarts-item">
                  <BarAndLineCustom
                    xAxisPropType="readTime"
                    :chartData="dataSource"
                    height="240px"
                    :propTypeArr="['flowRate']"
                    :option="zhujiangOption"
                  />
                </div>
              </div>
            </div>
          </template>
        </ventBox1>
      </div>
    </div>
  </div>
  <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
</template>

<script setup lang="ts">
  import { onBeforeMount, ref, onMounted, onUnmounted, shallowRef, defineProps, ComponentOptions, reactive } from 'vue';
  import { mountedThree, destroy, setModelType } from '../grout.threejs';
  import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import RunParameterModal from './runParameter.modal.vue';
  import WarningParameterModal from './warningParameter.modal.vue';
  import { warningConfig, zhujiangOption, yaliOption } from '../grout.data';
  import { list } from '../grout.api';
  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
    deviceType: {
      type: String,
      require: true,
    },
  });
  const left: string = '0px';
  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
  const modalVisible = ref<Boolean>(false); // 模态框是否可见
  const loading = ref(false);

  // 默认初始是第一行
  const dataSource = ref([
    {
      waterSupply: '-',
      beltVla: '-',
      density: '-',
      pressure: '-',
      liquidLevel: '-',
      flowRate: '-',
      readTime: '',
    },
    {
      waterSupply: '-',
      beltVla: '-',
      density: '-',
      pressure: '-',
      liquidLevel: '-',
      flowRate: '-',
      readTime: '',
    },
  ]); //dusting

  const deviceMonitorData = {
    '1#_waterSupply': { text: '1#制浆机供水流量', unit: 'm³/h' },
    '1#_beltVla': { text: '1#皮带秤数值', unit: 'T' },
    '2#_waterSupply': { text: '2#制浆机供水流量', unit: 'm³/h' },
    '2#_beltVla': { text: '2#皮带秤数值', unit: 'T' },
    density: { text: '密度', unit: 'g/cm' },
    pressure: { text: '压力', unit: 'MPa' },
    liquidLevel: { text: '缓冲池液位', unit: 'm' },
    flowRate: { text: '注浆流量', unit: 'm³/h' },
  };
  const deviceControlData = {
    '1#_waterPump': '1#清水泵',
    '1#_groutingPump': '1#注浆泵',
    '1#_pulpingMachine': '1#制浆机',
    '2#_waterPump': '2#清水泵',
    '2#_groutingPump': '2#注浆泵',
    '2#_pulpingMachine': '2#制浆机',
    'liquidLevelProtect ': '液位保护',
  };

  const flvURL1 = () => {
    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
    // return ''
  };
  const openModal = (modalName) => {
    modalVisible.value = true;
    if (modalName == 'RunParameterModal') {
      currentModal.value = RunParameterModal;
    } else {
      currentModal.value = WarningParameterModal;
    }
  };

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

  async function getDataSource() {
    const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
    const dataList = res.msgTxt[0].datalist || [];
    dataSource.value = dataList.filter((data) => {
      const item = data.readData;
      Object.assign(data, item);
      return item;
    });
  }

  function handlerDevice(param: string | Object) {}
  function controlDevice(flag) {}

  onBeforeMount(() => {});

  onMounted(() => {
    loading.value = true;
    mountedThree().then(async () => {
      // await setModelType('groutBase');
      await setModelType('bertaiBase');
      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';
  @ventSpace: zxm;

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

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

    .right-box {
      width: 320px;
      margin-top: 30px;
      .control-group {
        display: flex;
        flex-wrap: wrap;
        .control-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 2px;
          .control-item-title {
            color: #63e0ff;
            position: relative;
            top: 5px;
          }
          .control-item-state {
            width: 94px;
            height: 47px;
            background: url('/@/assets/images/vent/control-switch-bg.png');
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
          }

          .button-box {
            position: relative;
            padding: 5px;
            border: 1px transparent solid;
            background-clip: border-box;
            border-radius: 5px;
            margin-left: 8px;
          }

          .a-button {
            pointer-events: auto;
          }

          &::v-deep .a-button--mini {
            padding: 6px 10px;
          }

          &::v-deep .a-button--mini.is-round {
            padding: 6px 10px;
          }
        }
      }
      .control-btn-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .control-left-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 20px;
          .btn-box {
            width: 100px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            span {
              display: inline-block;
              padding: 2px 8px;
              background: #007099;
              border-radius: 4px;
              border: 1px solid rgb(125, 230, 249);
              cursor: pointer;
              &:hover {
                background: #005574;
              }
            }
          }
          .icon-box {
            width: 60px;
            height: 60px;
            border-radius: 30px;
            border: 2px solid #00bcdd;
            box-shadow: 0 0 20px #ffffff88;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;

            .icon {
              width: 18px;
              height: 18px;
              border-radius: 9px;
              border: 3px solid #d7f9ff;
              position: relative;
              background: #00bcdd;
              &::before {
                position: absolute;
                content: '';
                width: 2px;
                height: 12px;
                background-color: #00bcdd;
                left: 6px;
                top: -16px;
              }
              &::after {
                position: absolute;
                content: '';
                width: 2px;
                height: 12px;
                left: 6px;
                top: 17px;
                background-color: #00d9ff;
              }
            }
          }
          .remote-icon-box {
            transform: rotate(30deg);
            animation: iconRotate 1s linear;
          }
          .remote-icon-box1 {
            transform: rotate(-30deg);
            animation: iconRotate1 1s linear;
          }

          @keyframes iconRotate {
            from {
              transform: rotate(-30deg);
            }
            to {
              transform: rotate(30deg);
            }
          }
          @keyframes iconRotate1 {
            from {
              transform: rotate(30deg);
            }
            to {
              transform: rotate(-30deg);
            }
          }
        }
        .control-right-box {
          width: 100px;
          .btn {
            margin-bottom: 30px;
          }
        }
      }
      .parameter-btn-group {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        margin-bottom: 10px;
      }
      .echarts-box {
        width: 100%;
        height: 332px;
        position: relative;
        &:deep(.box-container) {
          padding: 0px !important;
        }
        .btn-group {
          line-height: 30px;
          color: #fff;
          text-align: center;
          margin-top: 3px;
          span {
            padding: 3px 5px;
            margin: 0 2px;
            border-radius: 2px;
            background-image: linear-gradient(#32475b, #5b95c7);
            border: 1px solid #32475b;
            cursor: pointer;
          }
          .active {
            background-image: linear-gradient(#2e4659, #37a7b4);
            border-top: 1px solid #3df6ff;
          }
        }
        .echarts-container {
          width: 100%;
          height: 240px;
          overflow: hidden;
          position: relative;
          .echarts-group {
            display: flex;
            flex-direction: row;
            position: absolute;
            left: v-bind(left);
            .echarts-item {
              width: 305px;
            }
          }
        }
      }
    }

    .left-box {
      margin-top: 30px;
      .monitor-item {
        display: flex;
        color: #fff;
        justify-content: space-between;
        background-image: linear-gradient(to left, #3df6ff10, #3df6ff00);
        margin: 10px 0;

        .item-title {
          width: 200px;
          margin-left: 10px;
        }
        .item-val {
          width: 80px;
          color: #00eefffe;
        }
        .item-unit {
          width: 80px;
        }
      }
    }

    .item-box {
      margin-bottom: 15px;
    }
  }

  :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>