iot-ui-plus/src/views/monitoring/devicemanage/components/main.vue

<template>
  <div class="devicePrt">
    <div class="deviceImg deviceImgA" v-if="zoneType === 1">
      <div class="card card_a">
        <div class="dataInfo" v-html="doubleCount('013', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('011', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('014', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('012', 0)"></div>
      </div>
      <div class="card card_b">
        <div class="dataInfo" v-html="doubleCount('002', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('007', 0)"></div>
      </div>
      <div class="card card_c">
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('047', 0)"></div>
          <div class="flexItem" v-html="doubleCount('045', 0)"></div>
        </div>
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('048', 0)"></div>
          <div class="flexItem" v-html="doubleCount('046', 0)"></div>
        </div>
      </div>
      <div class="card card_f">
        <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
      </div>
      <img class="deviceImg" src="@/assets/images/device01.gif" />
    </div>
    <div class="deviceImg deviceImgB" v-if="zoneType === 2">
      <div class="card card_a">
        <div class="dataInfo" v-html="doubleCount('013', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('011', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('014', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('012', 0)"></div>
      </div>
      <div class="card card_b">
        <div class="dataInfo" v-html="doubleCount('002', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('007', 0)"></div>
      </div>
      <div class="card card_c">
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('047', 0)"></div>
          <div class="flexItem" v-html="doubleCount('045', 0)"></div>
        </div>
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('048', 0)"></div>
          <div class="flexItem" v-html="doubleCount('046', 0)"></div>
        </div>
      </div>
      <div class="card card_d">
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('047', 1)"></div>
          <div class="flexItem" v-html="doubleCount('045', 1)"></div>
        </div>
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('048', 1)"></div>
          <div class="flexItem" v-html="doubleCount('046', 1)"></div>
        </div>
      </div>
      <div class="card card_f">
        <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
      </div>
      <img class="deviceImg" src="@/assets/images/device02.jpg" />
    </div>
    <div class="deviceImg deviceImgC" v-if="zoneType === 3">
      <div class="card card_a">
        <div class="dataInfo" v-html="doubleCount('013', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('011', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('014', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('012', 0)"></div>
      </div>
      <div class="card card_b">
        <div class="dataInfo" v-html="doubleCount('002', 0)"></div>
        <div class="dataInfo" v-html="doubleCount('007', 0)"></div>
      </div>
      <div class="card card_c">
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('047', 0)"></div>
          <div class="flexItem" v-html="doubleCount('045', 0)"></div>
        </div>
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('048', 0)"></div>
          <div class="flexItem" v-html="doubleCount('046', 0)"></div>
        </div>
      </div>
      <div class="card card_d">
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('047', 1)"></div>
          <div class="flexItem" v-html="doubleCount('045', 1)"></div>
        </div>
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('048', 1)"></div>
          <div class="flexItem" v-html="doubleCount('046', 1)"></div>
        </div>
      </div>
      <div class="card card_e">
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('047', 2)"></div>
          <div class="flexItem" v-html="doubleCount('045', 2)"></div>
        </div>
        <div class="dataInfo dataFlex">
          <div class="flexItem" v-html="doubleCount('048', 2)"></div>
          <div class="flexItem" v-html="doubleCount('046', 2)"></div>
        </div>
      </div>
      <div class="card card_f">
        <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
      </div>
      <img class="deviceImg" src="@/assets/images/device03.jpg" />
    </div>
    <!-- <div class="deviceImg deviceImgA" v-if="zoneType===1">
      <div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
      <div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
      <div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
      <div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
      <div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
      <div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
      <div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
      <div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
      <img class="deviceImg" src="@/assets/images/device01.gif" />
    </div>
    <div class="deviceImg deviceImgB" v-if="zoneType===2">
      <div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
      <div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
      <div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
      <div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
      <div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
      <div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
      <div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
      <div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
      <div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
      <div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
      <img class="deviceImg" src="@/assets/images/device02.jpg" />
    </div>
    <div class="deviceImg deviceImgC" v-if="zoneType===3">
      <div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
      <div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
      <div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
      <div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
      <div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
      <div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
      <div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
      <div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
      <div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
      <div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
      <div class="dataInfo dataInfo10" v-html="doubleCount('047',2)"></div>
      <div class="dataInfo dataInfo11" v-html="doubleCount('045',2)"></div>
      <img class="deviceImg" src="@/assets/images/device03.jpg" />
    </div> -->
    <div class="devicInfo" v-if="infoData?.length != 0">
      <div class="title">
        <i />
        <span>阀门控制</span>
      </div>
      <div class="infoPanel">
        <n-scrollbar class="item">
          <n-collapse class="collapse" :default-expanded-names="[0, 1, 2]">
            <template #arrow>
              <img src="@/assets/images/col_icon.png" />
            </template>
            <n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData"
              :key="index">
              <div class="content">
                <span v-for="(res, index) in item.header_valve" :key="index">{{ res.label }}: {{ res.value }}{{
                  res.paramUnit }}</span>
              </div>
            </n-collapse-item>
          </n-collapse>
        </n-scrollbar>
        <n-scrollbar class="item">
          <n-collapse class="collapse" :default-expanded-names="[0, 1, 2]">
            <template #arrow>
              <img src="@/assets/images/col_icon.png" />
            </template>
            <n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData"
              :key="index">
              <div class="content pump">
                <span v-for="(res, index) in item.header_pump" :key="index">{{ res.label }}: {{ res.value }}{{
                  res.paramUnit }}</span>
              </div>
            </n-collapse-item>
          </n-collapse>
        </n-scrollbar>
      </div>
      <!-- <div class="valves">
        <div class="title l_green">阀门控制</div>
        <div class="info">
          <div class="table">
            <div class="item" v-for="(item, index) in infoData" :key="index">
              <div class="lable l_green">{{ item.label }}</div>
              <div class="parameters">
                <span class="name" v-for="(res, index) in item.header_valve" :key="index">{{ res.label }}:{{ res.value }}
                  {{ res.paramUnit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pump">
        <div class="item" v-for="(item, index) in infoData" :key="index">
          <div class="title l_green">
            {{ item.label }}循环泵控制
          </div>
          <div class="info">
            <span class="name" v-for="(res, index) in item.header_pump" :key="index">{{ res.label }}:{{ res.value }}
              {{ res.paramUnit }}</span>
          </div>
        </div>
      </div> -->
    </div>
    <div class="tips" v-if="infoData?.length === 0">暂无设备信息！</div>
  </div>
</template>
<script lang="ts" setup>
import { getViewInfo } from '@/api/device/index';
import { deviceVo } from '@/api/device/types';
import mitt from '@/plugins/bus';

const value = ref(0)
// const active = ref(true)
const deviceMenuKey = ref();
const infoData = ref<deviceVo[]>();
const zoneType = ref()//1:一个分区,2:2个分区,3:3:个分区,4:别墅区
const timer = ref()
const isCurrentRoute = ref(true)
// const collapseDefault = ref<any[]>();

defineProps({
  sidebarHeight: {
    type: Number,
    default: 0,
  },
});
mitt.on('deviceMenuKey', (res: any) => {
  //监听部门点击
  deviceMenuKey.value = res;
  gitDevice();
});

function gitDevice() {
  //获取组态信息
  const params = deviceMenuKey.value;
  getViewInfo(params).then((res: any) => {
    if (res.code === 200) {
      if (isCurrentRoute) {
        timer.value = setTimeout(async () => {
          await (timer.value && clearTimeout(timer.value));
          await gitDevice();
        }, 20000)
      }
      infoData.value = Object.keys(res.data).length === 0 ? [] : res.data.datas;
      zoneType.value = Object.keys(res.data).length === 0 ? 0 : res.data.pCounts;
    } else {
      clearTimeout(timer.value);
    }
  });
}

onUnmounted(() => {
  //组件注销前清除setTimeout
  if (timer.value !== null || timer.value !== undefined) {
    clearTimeout(timer.value);
  }
})

// function doubleCount (id:string) {
//   const arr = infoData.value[0].header_main
//   const obj=arr.find((item: any) => item.id === id)
//   const lable=obj!=undefined?`${obj.label}:${obj.value}`:''
//   debugger
//   return lable;
// };

// const doubleCount = computed(() => {
//   function doubleCount(id: string) {
//     const arr = infoData.value[0].header_main
//     const obj = arr.find((item: any) => item.id === id)
//     const lable = obj != undefined ? `${obj.label}:${obj.value}` : ''
//     debugger
//     return lable;
//   };
// });
const doubleCount = (id: string, index: number) => {
  const arr = infoData.value[index].header_main
  const obj = arr.find((item: any) => item.id === id)
  const lable = obj != undefined ? `<span>${obj.label}</span><span>${obj.value} ${obj.paramUnit}</span>` : ''
  // const lable = obj != undefined ? `${obj.label}` : ''
  // const value = obj != undefined ? `${obj.value}` : '0.0'
  return lable;
}
console.log("doubleCount-", doubleCount)
</script>