代码初始化
This commit is contained in:
tianyongbao
325
src/views/layout/body.vue
Normal file
325
src/views/layout/body.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<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 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: "LAMP POLE 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,
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user