intc-iot-screen/src/views/layout/body.vue

<template>
  <div class="body-wrapper">
    <div
      v-for="section in sectionList"
      :key="section.lr"
      :class="section.wrapperClass"
    >
      <div :class="section.bgClass"></div>
      <div :class="section.conClass">
        <div
          class="module-wrapper"
          v-for="(item, index) in section.moduleList"
          :key="index"
          @click="$emit('modelClick', item)"
          :class="
            currentModule.id === item.id &&
            currentModule.position === index &&
            currentModule.lr === section.lr &&
            currentModule.active
              ? 'checked-bg'
              : ''
          "
        >
          <ComTitle :title="getTitle(item.id)" :titleEn="getTitleEn(item.id)" />
          <div class="content">
            <component
              v-if="buildingId"
              :is="getComp(item.id)"
              :p="`${item.lr}${item.position}`"
              :theme="theme"
              :buildingId="buildingId"
              :currentLonLat="currentLonLat"
            ></component>
          </div>
        </div>
      </div>
    </div>
    <ComInput
      class="device-search"
      placeholder="请输入设备名称"
      :input-val="deviceVal"
      :list="deviceList"
      @input="handleInput"
      @handle-search="handleSearchDevice"
    />
    <ComList
      class="device-list"
      :list="deviceList"
      @item-click="handleDeviceClick"
    />
    <div class="device-wrapper">
      <div
        class="item"
        v-for="item in deviceInfoList"
        :key="item.id"
        @click="deviceItemClick(item)"
      >
        <div class="img">
          <img
            :src="
              item.isActive
                ? getAssetsFile(`${theme}/device/${item.img}-active.png`)
                : getAssetsFile(`${theme}/device/${item.img}.png`)
            "
            alt=""
          />
        </div>
        <div class="info">
          <div class="name" :class="item.isActive ? 'active-name' : ''">
            {{ item.name }}
          </div>
          <div class="num" :class="item.isActive ? 'active-num' : ''">
            {{ item.num }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import eventHub from "@/utils/eventHub";
import { getAssetsFile } from "@/utils/index.js";

import ComTitle from "../components/comp/title.vue";
import WorkOrderOverview from "../components/module/WorkOrderOverview.vue";
import LightingRate from "../components/module/LightingRate.vue";
import EnvironmentMonitor from "../components/module/EnvironmentMonitor.vue";
import WaterQualityMonitor from "../components/module/WaterQualityMonitor.vue";
import GasMonitor from "../components/module/GasMonitor.vue";
import LampPoleStatistics from "../components/module/LampPoleStatistics.vue";
import DueToday from "../components/module/DueToday.vue";
import MonthlyEnergyConsumption from "../components/module/MonthlyEnergyConsumption.vue";
import AlarmInformation from "../components/module/AlarmInformation.vue";
import CurrentExecutionStrategy from "../components/module/CurrentExecutionStrategy.vue";
import LightControlOverview from "../components/module/LightControlOverview.vue";
import EnergyConsumptionComparison from "../components/module/EnergyConsumptionComparison.vue";
import InfoScreen from '../components/module/InfoScreen.vue'
import Information from '../components/module/Information.vue'
import ComInput from "../components/comp/input.vue";
import ComList from "../components/comp/list.vue";
import useScreenStore from "@/store/modules/screen";
import { onBeforeMount, onMounted, watch } from "vue";

const screenStore = useScreenStore();

const theme = ref(screenStore.theme);

const props = defineProps([
  "currentModule",
  "sectionList",
  "allDeviceList",
  "originAllDeviceList",
  "buildingId",
  "currentLonLat",
]);
const emits = defineEmits(["modelClick"]);

const deviceList = ref([]);
const deviceVal = ref("");

const moduleObj = {
  Overview: {
    moduleId: "2",
    title: "工单概览",
    titleEn: "WORK SHEET",
    comp: WorkOrderOverview,
  },
  LightRate: {
    moduleId: "3",
    title: "亮灯率",
    titleEn: "LIGHTING RATE",
    comp: LightingRate,
  },
  LightPole: {
    moduleId: "7",
    title: "场所统计",
    titleEn: "SITE STATISTICS",
    comp: LampPoleStatistics,
  },
  TodayPlan: {
    moduleId: "1",
    title: "今日计划",
    titleEn: "DUE TODAY",
    comp: DueToday,
  },
  EnergyByMonth: {
    moduleId: "5",
    title: "月度能耗",
    titleEn: "MONTHLY ENERGY CONSUMPTION",
    comp: MonthlyEnergyConsumption,
  },
  Alarm: {
    moduleId: "8",
    title: "告警信息",
    titleEn: "ALARM INFORMATION",
    comp: AlarmInformation,
  },
  Strategy: {
    moduleId: "9",
    title: "当前执行策略",
    titleEn: "CURRENT EXECUTION STRATEGY",
    comp: CurrentExecutionStrategy,
  },
  LightControl: {
    moduleId: "4",
    title: "灯控总览",
    titleEn: "LIGHT CONTROL OVERVIEW",
    comp: LightControlOverview,
  },
  EnergyComparison: {
    moduleId: "6",
    title: "能耗对比",
    titleEn: "ENERGY CONSUMPTION COMPARISON",
    comp: EnergyConsumptionComparison,
  },
  Environment: {
    moduleId: "10",
    title: "环境监测",
    titleEn: "Environment",
    comp: EnvironmentMonitor,
  },
  GasMonitor: {
    moduleId: "13",
    title: "气体监测",
    titleEn: "GasMonitor",
    comp: GasMonitor,
  },
  WaterQuality: {
    moduleId: "14",
    title: "水质监测",
    titleEn: "WaterQualityMonitor",
    comp: WaterQualityMonitor,
  },
  InfoScreen: {
    moduleId: '11',
    title: '屏幕总览',
    titleEn: 'LIGHT CONTROL OVERVIEW',
    comp: InfoScreen,
  },
  Information: {
    moduleId: '12',
    title: '信息发布',
    titleEn: 'SCREEN OVERVIEW',
    comp: Information,
  },
};

const deviceInfoList = ref([
  {
    id: 0,
    name: "传感器",
    num: 0,
    img: "DistributionCabinet",
    isActive: false,
    type: "1",
  },
  { id: 1, name: "摄像头", num: 0, img: "Camera", isActive: false, type: "4" },
  {
    id: 2,
    name: "屏幕",
    num: 0,
    img: "LightControl",
    isActive: false,
    type: "3",
  },
  { id: 3, name: "场所", num: 0, img: "Pole", isActive: true, type: "2" },
]);

const getTitle = (id) => {
  return moduleObj[id].title;
};

const getTitleEn = (id) => {
  return moduleObj[id].titleEn;
};

const getComp = (id) => {
  return moduleObj[id].comp;
};

const handleSearchDevice = (val) => {
  deviceList.value = props.allDeviceList.filter((item) => {
    return item.name.includes(val);
  });
};

const handleDeviceClick = (item) => {
  deviceVal.value = item.name;
  deviceList.value = [];
  eventHub.emit("point-click", item);
};

const handleClearInputVal = () => {
  deviceVal.value = [];
};

const handleInput = (e) => {
  const val = e.target.value;

  if (val === "") {
    deviceList.value = [];
  } else {
    handleSearchDevice(val);
  }
};

const deviceItemClick = (item) => {
  // item.isActive = !item.isActive;

  deviceInfoList.value.forEach((II) => {
    II.isActive = false;
  });
  item.isActive = true;

  let arr = [];

  const res = deviceInfoList.value.forEach((item) => {
    if (item.isActive) {
      arr.push(item.type);
    }
  });

  eventHub.emit("device-item-click", arr);
};

const handleGetNewDeviceList = () => {
  deviceInfoList.value[0].num = 0;
  deviceInfoList.value[1].num = 0;
  deviceInfoList.value[2].num = 0;
  deviceInfoList.value[3].num = 0;
  if (props.originAllDeviceList.length > 0) {
    let DistributionCabinetNum = 0,
      CameraNum = 0,
      LightControlNum = 0,
      PoleNum = 0;

    props.originAllDeviceList.forEach((item) => {
      switch (item.type) {
        case "1":
          DistributionCabinetNum += 1;
          break;
        case "2":
          PoleNum += 1;
          break;
        case "3":
          LightControlNum += 1;
          break;
        default:
          CameraNum += 1;
          break;
      }
    });

    deviceInfoList.value[0].num = DistributionCabinetNum;
    deviceInfoList.value[1].num = CameraNum;
    deviceInfoList.value[2].num = LightControlNum;
    deviceInfoList.value[3].num = PoleNum;
  }
};

watch(
  () => props.allDeviceList,
  (newVal) => {
    handleGetNewDeviceList();
  }
);

onMounted(() => {
  eventHub.on("input-clear", handleClearInputVal);
  handleGetNewDeviceList();
});

onBeforeMount(() => {
  eventHub.off("input-clear", handleClearInputVal);
});
</script>

<style lang="scss" scoped></style>