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>
      <!-- <div class="switch switch_a" @click="switchClick('001', 0)"></div> -->
      <!-- <div class="switch switch_b" @click="switchClick('065', 0)"></div> -->
      <img class="deviceImg" :src="deviceImg" />
      <!-- <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="deviceImg" />
      <!-- <img class="deviceImg" src="@/assets/images/device02.gif" /> -->
    </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="deviceImg" />
      <!-- <img class="deviceImg" src="@/assets/images/device03.gif" /> -->
    </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">
                  <i>{{ res.label }}： </i>
                  <i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
                  <i v-if="res.ctrlFlag === 1">
                    <n-switch
                      class="switch"
                      size="small"
                      v-model:value="res.value"
                      style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
                      @update:value="handleBlur(res)"
                      v-if="res.ctrlpro.valueType === 'bool'"
                    >
                      <template #checked>Y</template>
                      <template #unchecked>N</template>
                    </n-switch>
                    <n-input-number
                      size="tiny"
                      v-model:value="res.value"
                      style="width: 100px; opacity: 0.9"
                      button-placement="both"
                      placeholder=""
                      @blur="handleBlur(res)"
                      v-if="res.ctrlpro.valueType != 'bool'"
                    />
                  </i>
                </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">
                  <i>{{ res.label }}： </i>
                  <i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
                  <i v-if="res.ctrlFlag === 1">
                    <n-switch
                      class="switch"
                      size="small"
                      v-model:value="res.value"
                      style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
                      @update:value="handleBlur(res)"
                      v-if="res.ctrlpro.valueType === 'bool'"
                    >
                      <template #checked>Y</template>
                      <template #unchecked>N</template>
                    </n-switch>
                    <n-input-number
                      size="tiny"
                      v-model:value="res.value"
                      style="width: 100px; opacity: 0.9"
                      button-placement="both"
                      placeholder=""
                      v-if="res.ctrlpro.valueType != 'bool'"
                    />
                  </i>
                </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 { sendCtrl } from '@/api/table/list';
import { deviceVo } from '@/api/device/types';
import mitt from '@/plugins/bus';

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

// const collapseDefault = ref<any[]>();

interface FormDataVO {
  //url: string;
  deviceName: string;
  paramCode: string;
  value: string;
}
const formData = ref<FormDataVO>({
  //url: '',
  deviceName: '',
  paramCode: '',
  value: ''
});

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;
      deviceImg.value =
        Object.keys(res.data).length === 0 ? '' : 'src/assets/images/device/' + res.data.imgIndex + '.gif';
      console.log(deviceImg.value);
    } 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);

function handleBlur(data: any) {
  //点击阀门/泵开关
  const submitData = data.ctrlpro;
  submitData.value = data.value;
  console.log(submitData);
  sendCtrl(submitData).then((res: any) => {
    if (res.code === 200) {
      console.log(res.data);
      ElMessage(res.data.msg);
    }
  });
}
</script>