三维交互
This commit is contained in:
parent
9f5afda6f6
commit
8a3389e3cb
|
|
@ -4,5 +4,5 @@ VITE_APP_TITLE = 若依管理系统
|
|||
# 开发环境配置
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 若依管理系统/开发环境
|
||||
#开发环境
|
||||
VITE_APP_BASE_API = '/dev-api'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ VITE_APP_TITLE = 若依管理系统
|
|||
# 生产环境配置
|
||||
VITE_APP_ENV = 'production'
|
||||
|
||||
# 若依管理系统/生产环境
|
||||
#生产环境
|
||||
VITE_APP_BASE_API = '/prod-api'
|
||||
|
||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
|
|
@ -0,0 +1,16 @@
|
|||
body { padding: 0; margin: 0 }
|
||||
#unity-container { position: absolute }
|
||||
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
|
||||
#unity-container.unity-mobile { width: 100%; height: 100% }
|
||||
#unity-canvas { background: #231F20 }
|
||||
.unity-mobile #unity-canvas { width: 100%; height: 100% }
|
||||
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
|
||||
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
|
||||
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
|
||||
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
|
||||
#unity-footer { position: relative }
|
||||
.unity-mobile #unity-footer { display: none }
|
||||
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
|
||||
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
|
||||
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
|
||||
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Unity WebGL Player | CD</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
</head>
|
||||
<style>
|
||||
body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="unity-container" class="unity-desktop" style="width: 100%;height: 100%">
|
||||
<canvas id="unity-canvas" style="width: 100%;height: 100%"></canvas>
|
||||
<div id="unity-loading-bar">
|
||||
<div id="unity-logo"></div>
|
||||
<div id="unity-progress-bar-empty">
|
||||
<div id="unity-progress-bar-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="unity-warning"> </div>
|
||||
<div id="unity-footer">
|
||||
<div id="unity-webgl-logo"></div>
|
||||
<div id="unity-fullscreen-button"></div>
|
||||
<div id="unity-build-title">CD</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var container = document.querySelector("#unity-container");
|
||||
var canvas = document.querySelector("#unity-canvas");
|
||||
var loadingBar = document.querySelector("#unity-loading-bar");
|
||||
var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
||||
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
|
||||
var warningBanner = document.querySelector("#unity-warning");
|
||||
|
||||
// Shows a temporary message banner/ribbon for a few seconds, or
|
||||
// a permanent error message on top of the canvas if type=='error'.
|
||||
// If type=='warning', a yellow highlight color is used.
|
||||
// Modify or remove this function to customize the visually presented
|
||||
// way that non-critical warnings and error messages are presented to the
|
||||
// user.
|
||||
function unityShowBanner(msg, type) {
|
||||
function updateBannerVisibility() {
|
||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||
}
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = msg;
|
||||
warningBanner.appendChild(div);
|
||||
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||
else {
|
||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||
setTimeout(function() {
|
||||
warningBanner.removeChild(div);
|
||||
updateBannerVisibility();
|
||||
}, 5000);
|
||||
}
|
||||
updateBannerVisibility();
|
||||
}
|
||||
|
||||
var buildUrl = "Build";
|
||||
var loaderUrl = buildUrl + "/build.loader.js";
|
||||
var config = {
|
||||
dataUrl: buildUrl + "/build.data.unityweb",
|
||||
frameworkUrl: buildUrl + "/build.framework.js.unityweb",
|
||||
codeUrl: buildUrl + "/build.wasm.unityweb",
|
||||
streamingAssetsUrl: "StreamingAssets",
|
||||
companyName: "DefaultCompany",
|
||||
productName: "CD",
|
||||
productVersion: "0.1",
|
||||
showBanner: unityShowBanner,
|
||||
};
|
||||
|
||||
// By default Unity keeps WebGL canvas render target size matched with
|
||||
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
|
||||
// Set this to false if you want to decouple this synchronization from
|
||||
// happening inside the engine, and you would instead like to size up
|
||||
// the canvas DOM size and WebGL render target sizes yourself.
|
||||
// config.matchWebGLToCanvasSize = false;
|
||||
|
||||
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
||||
// Mobile device style: fill the whole browser client area with the game canvas:
|
||||
|
||||
var meta = document.createElement('meta');
|
||||
meta.name = 'viewport';
|
||||
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||||
document.getElementsByTagName('head')[0].appendChild(meta);
|
||||
container.className = "unity-mobile";
|
||||
canvas.className = "unity-mobile";
|
||||
|
||||
// To lower canvas resolution on mobile devices to gain some
|
||||
// performance, uncomment the following line:
|
||||
// config.devicePixelRatio = 1;
|
||||
|
||||
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||||
} else {
|
||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||
|
||||
// canvas.style.width = "960px";
|
||||
// canvas.style.height = "600px";
|
||||
}
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
|
||||
var script = document.createElement("script");
|
||||
var unityInstanceA
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
progressBarFull.style.width = 100 * progress + "%";
|
||||
}).then((unityInstance) => {
|
||||
unityInstanceA = unityInstance
|
||||
loadingBar.style.display = "none";
|
||||
fullscreenButton.onclick = () => {
|
||||
unityInstance.SetFullscreen(1);
|
||||
};
|
||||
}).catch((message) => {
|
||||
alert(message);
|
||||
});
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
// unity交互
|
||||
function unity3D(val){
|
||||
// OpenWebPanel()
|
||||
unityInstanceA.SendMessage("App", "SetState", val + '')
|
||||
}
|
||||
// 打开web弹窗
|
||||
function OnButtonClick(val){
|
||||
console.log(val)
|
||||
let name = "控制箱名称"
|
||||
window.parent.openBox(name)
|
||||
}
|
||||
// 关闭照明
|
||||
function closeLight(){
|
||||
unityInstanceA.SendMessage("照明tip", "HideUnityPanel",'')
|
||||
}
|
||||
// 关闭策略
|
||||
function closeStrategy(){
|
||||
unityInstanceA.SendMessage("空调tip", "HideUnityPanel",'')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -13,27 +13,25 @@ const selectDate = (val) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<el-calendar ref="calendar" v-model="calendarDate">
|
||||
<el-calendar ref="calendar" v-model="calendarDate" :row="5">
|
||||
<template #header="{ date }">
|
||||
<div>
|
||||
<img
|
||||
@click="selectDate('prev-year')"
|
||||
src="../../assets/images/overview/prevMonth.png"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
||||
"
|
||||
/>
|
||||
<img
|
||||
@click="selectDate('prev-month')"
|
||||
src="../../assets/images/overview/prevYear.png"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
||||
"
|
||||
/>
|
||||
|
||||
|
|
@ -42,20 +40,18 @@ const selectDate = (val) => {
|
|||
@click="selectDate('next-month')"
|
||||
src="../../assets/images/overview/nextYear.png"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width:1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
||||
"
|
||||
/>
|
||||
<img
|
||||
@click="selectDate('next-year')"
|
||||
src="../../assets/images/overview/nextMonth.png"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,27 +27,48 @@ timer.value = setInterval(() => {
|
|||
getNowDate()
|
||||
}, 1000)
|
||||
const menuList = ref([
|
||||
{name: shallowRef(overview), default: getPath.overview, select: getPath.overviewselect},
|
||||
{text:"总览",name: shallowRef(overview), default: getPath.overview, select: getPath.overviewselect},
|
||||
{
|
||||
text:"用能监测",
|
||||
name: shallowRef(energyMonitoring),
|
||||
default: getPath.energy, select: getPath.energyselect
|
||||
},
|
||||
{name: shallowRef(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
|
||||
{name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
|
||||
{name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
|
||||
{name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
|
||||
{name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
|
||||
{name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
|
||||
{text:"能效",name: shallowRef(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
|
||||
{text:"排水",name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
|
||||
{text:"空调",name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
|
||||
{text:"照明",name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
|
||||
{text:"碳排放",name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
|
||||
{text:"显示屏",name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
|
||||
])
|
||||
const menuIndex = ref(0)
|
||||
// const animationShow = ref(false)
|
||||
const dome = ref("")
|
||||
// 菜单切换方法
|
||||
const toggleClick = (item, index) => {
|
||||
tabName.value = item?.name
|
||||
menuIndex.value = index
|
||||
// let state = index + 1
|
||||
if(item.text==="总览"||item.text==="用能监测"||item.text==="能效"||item.text==="碳排放"){
|
||||
dome.value.contentWindow.unity3D(1)
|
||||
}else if(item.text==="排水"){
|
||||
dome.value.contentWindow.unity3D(2)
|
||||
}else if(item.text==="空调"){
|
||||
dome.value.contentWindow.unity3D(3)
|
||||
}else if(item.text==="照明"){
|
||||
dome.value.contentWindow.unity3D(4)
|
||||
}else if(item.text=="显示屏"){
|
||||
dome.value.contentWindow.unity3D(9)
|
||||
}
|
||||
|
||||
}
|
||||
// 三维交互方法
|
||||
const getState = (val) =>{
|
||||
dome.value.contentWindow.unity3D(val)
|
||||
}
|
||||
const tabName = shallowRef(overview)
|
||||
const closeUnity = () =>{
|
||||
dome.value.contentWindow.closeLight()
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
|
@ -55,6 +76,18 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="container">
|
||||
<!-- 背景框-->
|
||||
<div class="bg-border"></div>
|
||||
<iframe
|
||||
id="iframe"
|
||||
ref="dome"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src="ChangDaobuild/index.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
<div class="header">
|
||||
|
||||
</div>
|
||||
|
|
@ -66,7 +99,10 @@ onMounted(() => {
|
|||
<div class="right-mask">
|
||||
|
||||
</div>
|
||||
<div class="container">
|
||||
<!-- 底部遮罩层-->
|
||||
<div class="bottom-mask">
|
||||
|
||||
</div>
|
||||
<div class="date">
|
||||
<p>
|
||||
<span class="m10">{{ nowDate }}</span>
|
||||
|
|
@ -88,21 +124,29 @@ onMounted(() => {
|
|||
</div>
|
||||
<!-- <overview></overview>-->
|
||||
<!-- <router-view />-->
|
||||
<transition appear mode="out-in">
|
||||
<!-- <transition appear mode="out-in">-->
|
||||
<keep-alive>
|
||||
<component :is="tabName"></component>
|
||||
<component :key="tabName" :is="tabName" @sendVal="getState" @closeBox="closeUnity" @closeAir="dome.contentWindow.closeStrategy()"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<!-- </transition>-->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#iframe{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index:1;
|
||||
}
|
||||
.v-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.v-enter-active {
|
||||
transition: opacity 1s ease-in;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.v-enter-to {
|
||||
|
|
@ -114,6 +158,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.v-leave-active {
|
||||
z-index: 9999;
|
||||
transition: opacity 1s ease-in
|
||||
}
|
||||
|
||||
|
|
@ -129,18 +174,24 @@ onMounted(() => {
|
|||
left: 0;
|
||||
background-image: url('@/assets/images/mask/top.png');
|
||||
background-size: 100% 100%;
|
||||
z-index: -1 !important;
|
||||
|
||||
z-index:3;
|
||||
}
|
||||
.bg-border{
|
||||
background-image: url('@/assets/images/bg.png');
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index:99;
|
||||
}
|
||||
|
||||
.left-mask {
|
||||
width: vw(600);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: -99;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/mask/left.png');
|
||||
background-size: 100% 100%;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.right-mask {
|
||||
|
|
@ -149,16 +200,27 @@ onMounted(() => {
|
|||
top: 0;
|
||||
width: vw(600);
|
||||
height: 100%;
|
||||
z-index: -99;
|
||||
background-image: url('@/assets/images/mask/right.png');
|
||||
background-size: 100% 100%;
|
||||
z-index:2;
|
||||
}
|
||||
.bottom-mask{
|
||||
height: vh(136);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: url('@/assets/images/mask/bottom.png');
|
||||
background-size: 100% 100%;
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
margin: 2.5rem 2.2rem 0 2.2rem;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index:4;
|
||||
}
|
||||
|
||||
.m10 {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,8 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import Overview from '../views/overview/index.vue'
|
||||
import energyMonitoring from '../views/energyMonitoring/index.vue'
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/overview'
|
||||
},
|
||||
{
|
||||
path: '/overview',
|
||||
name: 'overview',
|
||||
component: Overview
|
||||
},
|
||||
{
|
||||
path: '/energyMonitoring',
|
||||
name: 'energyMonitoring',
|
||||
component: energyMonitoring
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ p,ul,li{
|
|||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/bg.png');
|
||||
background-size: 100% 100%;
|
||||
//background-image: url('@/assets/images/bg.png');
|
||||
//background-size: 100% 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -46,16 +46,18 @@ p,ul,li{
|
|||
height: 100%;
|
||||
width: vw(450);
|
||||
box-sizing: border-box;
|
||||
z-index:3;
|
||||
//animation: slide-out 2s ease-in;
|
||||
}
|
||||
|
||||
&-right-box {
|
||||
padding-right: 2.375rem;
|
||||
|
||||
//animation: slide-out 2s ease-in-out;
|
||||
}
|
||||
|
||||
&-left-box {
|
||||
padding-left: 2.375rem;
|
||||
|
||||
//animation: slide-out 2s ease-in-out;
|
||||
//transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -70,17 +72,17 @@ p,ul,li{
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
//@keyframes slide-in {
|
||||
@keyframes slide-in {
|
||||
// //0%{
|
||||
// // transform: translateX(0%);
|
||||
// //}
|
||||
// from{
|
||||
// opacity: 0;
|
||||
// }
|
||||
// to {
|
||||
// opacity: 1;
|
||||
// }
|
||||
//}
|
||||
from{
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.m100{
|
||||
position: relative;
|
||||
top:2rem;
|
||||
|
|
@ -207,6 +209,7 @@ p,ul,li{
|
|||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 9999; //优先级
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: vw(506);
|
||||
|
|
@ -235,3 +238,26 @@ p,ul,li{
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.floor{
|
||||
z-index:999;
|
||||
position: absolute;
|
||||
right: 29rem;
|
||||
top: 2.8rem;
|
||||
div{
|
||||
width: 8rem;
|
||||
cursor: pointer;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
}
|
||||
//楼层未选中
|
||||
.floor-default{
|
||||
background-image: url("@/assets/images/floor-default.png");
|
||||
}
|
||||
//楼层选中
|
||||
.floor-select{
|
||||
background-image: url("@/assets/images/floor-select.png");
|
||||
}
|
||||
|
|
@ -153,12 +153,14 @@ const maintenanceList = ref([
|
|||
date: '09',
|
||||
}
|
||||
])
|
||||
|
||||
const emit = defineEmits(['closeAir'])
|
||||
// 弹窗
|
||||
const dialogBoxShow = ref(false)
|
||||
const dialogName = ref('')
|
||||
const openDialog = (name) =>{
|
||||
emit("closeAir","")
|
||||
dialogBoxShow.value = true
|
||||
|
||||
dialogName.value = name
|
||||
}
|
||||
const closeDialog = (val) =>{
|
||||
|
|
|
|||
|
|
@ -771,27 +771,27 @@ const drawEnergyFlow = () => {
|
|||
{
|
||||
name: "电",
|
||||
nameValue: 1562,
|
||||
valueUnit: "KWh",
|
||||
valueUnit: "万tCO2",
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
nameValue: 562,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "万tCO2",
|
||||
},
|
||||
{
|
||||
name: "照明",
|
||||
nameValue: 490,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "万tCO2",
|
||||
},
|
||||
{
|
||||
name: "电梯",
|
||||
nameValue: 510,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "万tCO2",
|
||||
},
|
||||
{
|
||||
name: "其他",
|
||||
nameValue:320,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "万tCO2",
|
||||
},
|
||||
];
|
||||
let sangjiColor = [
|
||||
|
|
@ -940,6 +940,7 @@ onMounted(() => {
|
|||
width: 25%;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-family: normal;
|
||||
.date {
|
||||
padding: 0 0.8rem;
|
||||
background-image: url("@/assets/images/small-icon.png");
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const operationLeftList = ref([
|
|||
},
|
||||
{
|
||||
name: '4#泵',
|
||||
state:0
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -187,10 +187,13 @@ const operationRightList = ref([
|
|||
]
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
|
||||
<div class="page-left-box">
|
||||
<div class="title ">
|
||||
<span>运行情况</span>
|
||||
|
|
|
|||
|
|
@ -352,7 +352,7 @@ const drawEnergyFlow = () => {
|
|||
{
|
||||
name: "电",
|
||||
nameValue: 1562,
|
||||
valueUnit: "KWh",
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
|
|
@ -927,6 +927,13 @@ const drawElectricityPrice = () => {
|
|||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
// 时间选择器参数
|
||||
const dateValue = ref('')
|
||||
// 默认时间
|
||||
const defaultTime = ref([
|
||||
new Date(2000,1,1,0,0,0),
|
||||
new Date(2000,2,1,23,59,59),
|
||||
])
|
||||
// dom加载
|
||||
onMounted(() => {
|
||||
// 能耗总量
|
||||
|
|
@ -969,7 +976,19 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>能效流向</span>
|
||||
</div>
|
||||
<div id="energyFlow" class="margin10 box-bg"></div>
|
||||
<div class="margin10 box-bg flow">
|
||||
<div class="date-picker">
|
||||
<span style="font-size: 0.875rem">选择日期：</span>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:default-time="defaultTime"
|
||||
/>
|
||||
</div>
|
||||
<div id="energyFlow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<!-- 各系统能耗概况 -->
|
||||
|
|
@ -1030,6 +1049,36 @@ onMounted(() => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#energyFlow{
|
||||
width: 100%;
|
||||
height: 82.4%;
|
||||
|
||||
}
|
||||
.flow{
|
||||
padding-top: .5rem;
|
||||
}
|
||||
.date-picker{
|
||||
padding-left: 0.75rem;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
:deep(.el-input__wrapper){
|
||||
background-image: url('@/assets/images/picker.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: none !important;
|
||||
width: 20rem !important;
|
||||
height: 1.7rem;
|
||||
flex-grow: unset;
|
||||
box-sizing: border-box !important;
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.el-icon){
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-range-input){
|
||||
color:rgba(221, 255, 253, 1) !important;
|
||||
}
|
||||
}
|
||||
.system-tab {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
|
|
|||
|
|
@ -814,8 +814,8 @@ const getLoadClassification=()=> {
|
|||
z: 3,
|
||||
style: {
|
||||
image: img,
|
||||
width: 188,
|
||||
height: 188,
|
||||
width: 170,
|
||||
height: 170,
|
||||
},
|
||||
left: "center",
|
||||
top: "center",
|
||||
|
|
@ -928,7 +928,7 @@ const getLoadClassification=()=> {
|
|||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 60,
|
||||
length: 20,
|
||||
length2: 60,
|
||||
show: true,
|
||||
color: "#00ffff",
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@ const closeDialog = () => {
|
|||
<style lang="scss" scoped>
|
||||
|
||||
.dialog-content{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 74%;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -6,97 +6,136 @@ import dialogBox from './components/dialog.vue'
|
|||
// 照明监测
|
||||
const lightingNumList = ref([
|
||||
{
|
||||
name:"照明四路数量",
|
||||
num:1130,
|
||||
pic:getPath.lightTotal,
|
||||
name: "照明四路数量",
|
||||
num: 1130,
|
||||
pic: getPath.lightTotal,
|
||||
},
|
||||
{
|
||||
name:"照明四路灭灯数量",
|
||||
num:1130,
|
||||
pic:getPath.noLightNum,
|
||||
name: "照明四路灭灯数量",
|
||||
num: 1130,
|
||||
pic: getPath.noLightNum,
|
||||
},
|
||||
{
|
||||
name:"照明四路亮灯数量",
|
||||
num:1130,
|
||||
pic:getPath.lightingNum,
|
||||
name: "照明四路亮灯数量",
|
||||
num: 1130,
|
||||
pic: getPath.lightingNum,
|
||||
},
|
||||
{
|
||||
name:"离线数量",
|
||||
num:1130,
|
||||
pic:getPath.offlineNum,
|
||||
name: "离线数量",
|
||||
num: 1130,
|
||||
pic: getPath.offlineNum,
|
||||
}
|
||||
])
|
||||
// 照明回路详情
|
||||
const lightDetail = ref([
|
||||
{
|
||||
name:'照明1',
|
||||
address:"西大厅",
|
||||
state:false
|
||||
name: '照明1',
|
||||
address: "西大厅",
|
||||
state: false
|
||||
},
|
||||
{
|
||||
name:'照明2',
|
||||
address:"西大厅",
|
||||
state:false
|
||||
name: '照明2',
|
||||
address: "西大厅",
|
||||
state: false
|
||||
},
|
||||
{
|
||||
name:'照明3',
|
||||
address:"西大厅",
|
||||
state:false
|
||||
name: '照明3',
|
||||
address: "西大厅",
|
||||
state: false
|
||||
},
|
||||
{
|
||||
name:'照明4',
|
||||
address:"西大厅",
|
||||
state:true
|
||||
name: '照明4',
|
||||
address: "西大厅",
|
||||
state: true
|
||||
},
|
||||
{
|
||||
name:'照明5',
|
||||
address:"西大厅",
|
||||
state:true
|
||||
name: '照明5',
|
||||
address: "西大厅",
|
||||
state: true
|
||||
}
|
||||
])
|
||||
|
||||
// 照明控制
|
||||
const lightControl = ref([
|
||||
{
|
||||
name:'控制箱名称1'
|
||||
name: '控制箱名称1'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称2'
|
||||
name: '控制箱名称2'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称3'
|
||||
name: '控制箱名称3'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称4'
|
||||
name: '控制箱名称4'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称5'
|
||||
name: '控制箱名称5'
|
||||
}
|
||||
|
||||
])
|
||||
// 照明负荷的时间切换
|
||||
const lightLoadDate = ref('day')
|
||||
const toggleLightLoad = (event) =>{
|
||||
|
||||
const emit = defineEmits(["sendVal","closeBox"])
|
||||
// 楼层控制
|
||||
|
||||
const floorList = ref(
|
||||
[ {
|
||||
name:'一层'
|
||||
},
|
||||
{
|
||||
name:'二层'
|
||||
},
|
||||
{
|
||||
name:'三层'
|
||||
},
|
||||
{
|
||||
name:'负一层'
|
||||
}]
|
||||
)
|
||||
const floorIndex = ref(-1)
|
||||
// 楼层选择方法
|
||||
const toggleFloor = (item,index) =>{
|
||||
|
||||
if(item.name==="一层"){
|
||||
emit('sendVal',6)
|
||||
}else if(item.name === "二层"){
|
||||
emit('sendVal',7)
|
||||
}else if(item.name === "三层"){
|
||||
emit('sendVal',8)
|
||||
}else if(item.name==="负一层"){
|
||||
emit('sendVal',5)
|
||||
}
|
||||
floorIndex.value = index
|
||||
}
|
||||
|
||||
const toggleLightLoad = (event) => {
|
||||
lightLoadDate.value = event.srcElement.className
|
||||
}
|
||||
// 照明控制
|
||||
const controlBtn = ref('')
|
||||
const toggleControl = (event) =>{
|
||||
const toggleControl = (event) => {
|
||||
controlBtn.value = event.srcElement.className
|
||||
}
|
||||
// 弹窗
|
||||
const dialogShow = ref(false)
|
||||
const box = ref("")
|
||||
const dialogTitle = ref("")
|
||||
const openDialog = (name) =>{
|
||||
dialogShow.value = true
|
||||
const openDialog = (name) => {
|
||||
// 关闭三维照明控制箱的方法
|
||||
emit("closeBox","")
|
||||
|
||||
dialogTitle.value = name
|
||||
dialogShow.value = true
|
||||
|
||||
}
|
||||
const closeDialog = (val) =>{
|
||||
const closeDialog = (val) => {
|
||||
dialogShow.value = val
|
||||
|
||||
}
|
||||
// 故障情况
|
||||
const drawFaultConditionsChart = () =>{
|
||||
const drawFaultConditionsChart = () => {
|
||||
let trafficWay = [
|
||||
{
|
||||
name: "正常",
|
||||
|
|
@ -270,7 +309,7 @@ const drawFaultConditionsChart = () =>{
|
|||
length: 20,
|
||||
length2: 100,
|
||||
show: true,
|
||||
showAbove:true,
|
||||
showAbove: true,
|
||||
color: "#00ffff",
|
||||
},
|
||||
},
|
||||
|
|
@ -282,7 +321,7 @@ const drawFaultConditionsChart = () =>{
|
|||
myChart.setOption(option);
|
||||
}
|
||||
// 展馆照明
|
||||
const drawHallLightingChart =()=>{
|
||||
const drawHallLightingChart = () => {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -351,8 +390,8 @@ const drawHallLightingChart =()=>{
|
|||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let intAxisData = ['室内','户外'];
|
||||
let intSeriesData = [100,200];
|
||||
let intAxisData = ['室内', '户外'];
|
||||
let intSeriesData = [100, 200];
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
let colorArr;
|
||||
|
|
@ -413,7 +452,7 @@ const drawHallLightingChart =()=>{
|
|||
name: "单位:kW",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding:[0,20,0,0]
|
||||
padding: [0, 20, 0, 0]
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
|
|
@ -443,11 +482,11 @@ const drawHallLightingChart =()=>{
|
|||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
colorArr = params.dataIndex===0?[
|
||||
colorArr = params.dataIndex === 0 ? [
|
||||
// 蓝色渐变
|
||||
["rgba(0, 170, 193, 1)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
]:[
|
||||
] : [
|
||||
// 绿色渐变
|
||||
["rgba(0, 193, 113, 1)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
|
|
@ -558,7 +597,7 @@ const drawHallLightingChart =()=>{
|
|||
myChart.setOption(option);
|
||||
}
|
||||
// 照明负荷
|
||||
const drawLightLoadChart = () =>{
|
||||
const drawLightLoadChart = () => {
|
||||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||
|
||||
let option = {
|
||||
|
|
@ -585,8 +624,8 @@ const drawLightLoadChart = () =>{
|
|||
orient: 'horizontal',
|
||||
// data: ['进水量', '出水量'],
|
||||
borderRadius: 20,
|
||||
itemHeight:10,
|
||||
itemWidth:15,
|
||||
itemHeight: 10,
|
||||
itemWidth: 15,
|
||||
textStyle: {
|
||||
color: '#DDFFFD',
|
||||
fontSize: 12,
|
||||
|
|
@ -617,8 +656,8 @@ const drawLightLoadChart = () =>{
|
|||
},
|
||||
yAxis: [
|
||||
{
|
||||
min:0,
|
||||
max:500,
|
||||
min: 0,
|
||||
max: 500,
|
||||
type: 'value',
|
||||
name: '单位/kW',
|
||||
nameTextStyle: {
|
||||
|
|
@ -636,7 +675,7 @@ const drawLightLoadChart = () =>{
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
type: 'dashed',
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
}
|
||||
|
|
@ -681,14 +720,15 @@ const drawLightLoadChart = () =>{
|
|||
lineStyle: {
|
||||
color: '#91cc75'
|
||||
},
|
||||
data: [100, 320, 400,420, 500]
|
||||
data: [100, 320, 400, 420, 500]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
myChart.setOption(option)
|
||||
}
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
window.openBox = openDialog
|
||||
// 故障情况
|
||||
drawFaultConditionsChart()
|
||||
// 展馆照明
|
||||
|
|
@ -700,18 +740,22 @@ onMounted(()=>{
|
|||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
<dialogBox ref="box" :show="dialogShow" @update="closeDialog" :name="dialogTitle"/>
|
||||
<!-- 层级控制 -->
|
||||
<div class="floor">
|
||||
<div v-for="(item,index) in floorList" @click="toggleFloor(item,index)" :class="index===floorIndex?'floor-select':'floor-default'">{{item.name}}</div>
|
||||
</div>
|
||||
<dialogBox ref="box" :name="dialogTitle" :show="dialogShow" @update="closeDialog"/>
|
||||
<div class="page-left-box">
|
||||
<!-- 照明监测-->
|
||||
<div class="title">
|
||||
<span>照明监测</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="light">
|
||||
<div class="light-item" v-for="(item,index) in lightingNumList">
|
||||
<div id="light" class="margin10 box-bg">
|
||||
<div v-for="(item,index) in lightingNumList" class="light-item">
|
||||
<img :src="item.pic" alt="">
|
||||
<p>
|
||||
<span class="name">{{item.name}}</span>
|
||||
<span class="num">{{item.num}}<span class="unit">个</span></span>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="num">{{ item.num }}<span class="unit">个</span></span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -728,13 +772,13 @@ onMounted(()=>{
|
|||
<span>状态</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div class="tableBoby"
|
||||
v-for="(item, index) in lightDetail"
|
||||
<div v-for="(item, index) in lightDetail"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span>{{item.address}}</span>
|
||||
<span ><i :class="item.state?'state1':'state0'"></i></span>
|
||||
<span>{{ item.address }}</span>
|
||||
<span><i :class="item.state?'state1':'state0'"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -743,37 +787,40 @@ onMounted(()=>{
|
|||
<div class="title margin10">
|
||||
<span>照明负荷</span>
|
||||
<p>
|
||||
<span class="year" :class="lightLoadDate === 'year'?'selectYear':''" @click="toggleLightLoad">年</span>
|
||||
<span class="month" :class="lightLoadDate === 'month'?'selectMonth':''" @click="toggleLightLoad">月</span>
|
||||
<span class="day" :class="lightLoadDate === 'day'?'selectDay':''" @click="toggleLightLoad">日</span>
|
||||
<span :class="lightLoadDate === 'year'?'selectYear':''" class="year" @click="toggleLightLoad">年</span>
|
||||
<span :class="lightLoadDate === 'month'?'selectMonth':''" class="month" @click="toggleLightLoad">月</span>
|
||||
<span :class="lightLoadDate === 'day'?'selectDay':''" class="day" @click="toggleLightLoad">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="lightLoad"></div>
|
||||
<div id="lightLoad" class="margin10 box-bg"></div>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<!-- 展馆照明 -->
|
||||
<div class="title">
|
||||
<span>展馆照明</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="hallLighting"></div>
|
||||
<div id="hallLighting" class="margin10 box-bg">
|
||||
|
||||
</div>
|
||||
<!-- 照明控制-->
|
||||
<div class="title margin10">
|
||||
<span>照明控制</span>
|
||||
<p class="control-btn">
|
||||
<span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
|
||||
<span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
|
||||
<span :class="controlBtn==='on'?'select':''" class="on" @click="toggleControl">全开</span>
|
||||
<span :class="controlBtn==='off'?'select':''" class="off" style="margin-left: .7rem"
|
||||
@click="toggleControl">全关</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" >
|
||||
<div class="margin10 box-bg">
|
||||
<div class="runningState">
|
||||
<div class="tableTitle">
|
||||
<span>控制箱名称</span>
|
||||
<span>操作</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div class="tableBoby"
|
||||
v-for="(item, index) in lightControl"
|
||||
<div v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
|
||||
|
|
@ -786,74 +833,88 @@ onMounted(()=>{
|
|||
<div class="title margin10">
|
||||
<span>故障情况</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="faultConditions"></div>
|
||||
<div id="faultConditions" class="margin10 box-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
//照明监测
|
||||
#light{
|
||||
#light {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
//padding: 2% 10%;
|
||||
box-sizing: border-box;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 3.875rem;
|
||||
height: 4.375rem;
|
||||
}
|
||||
}
|
||||
.light-item{
|
||||
|
||||
.light-item {
|
||||
display: flex;
|
||||
flex-basis: 50%;
|
||||
padding-left: 2rem;
|
||||
box-sizing: border-box;
|
||||
p{
|
||||
|
||||
p {
|
||||
margin-left: .5rem;
|
||||
.name{
|
||||
|
||||
.name {
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: rgba(1, 246, 139, 1);
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
.unit{
|
||||
|
||||
.unit {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.name,.num{
|
||||
|
||||
.name, .num {
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//照明回路详情
|
||||
.state0,.state1{
|
||||
width: 1.1rem;
|
||||
.state0, .state1 {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
display: block;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.state0{
|
||||
|
||||
.state0 {
|
||||
background-image: url('@/assets/images/lighting/state0.png');
|
||||
}
|
||||
.state1{
|
||||
|
||||
.state1 {
|
||||
background-image: url('@/assets/images/lighting/state1.png');
|
||||
}
|
||||
|
||||
//照明控制
|
||||
.control{
|
||||
color:rgba(61, 255, 244, 1);
|
||||
.control {
|
||||
color: rgba(61, 255, 244, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.control-btn{
|
||||
|
||||
.control-btn {
|
||||
display: flex;
|
||||
.select{
|
||||
|
||||
.select {
|
||||
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||||
}
|
||||
span{
|
||||
|
||||
span {
|
||||
background-image: url("@/assets/images/air-tab.png");
|
||||
cursor: pointer;
|
||||
font-family: normal;
|
||||
|
|
@ -863,8 +924,9 @@ width: 1.1rem;
|
|||
padding: 0.2rem 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
//弹窗
|
||||
.dialog{
|
||||
.dialog {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -190,11 +190,44 @@ const runTimeList = ref([
|
|||
name: "西大厅24",
|
||||
value: true,
|
||||
},
|
||||
|
||||
]);
|
||||
// 楼层控制
|
||||
const floorList = ref(
|
||||
[{
|
||||
name: '一层'
|
||||
},
|
||||
{
|
||||
name: '二层'
|
||||
},
|
||||
{
|
||||
name: '三层'
|
||||
}
|
||||
]
|
||||
)
|
||||
const floorIndex = ref(-1)
|
||||
const emit = defineEmits(["sendVal"])
|
||||
// 楼层选择方法
|
||||
const toggleFloor = (item,index) => {
|
||||
if(item.name==="一层"){
|
||||
emit('sendVal',10)
|
||||
}else if(item.name === "二层"){
|
||||
emit('sendVal',11)
|
||||
}else if(item.name === "三层"){
|
||||
emit('sendVal',12)
|
||||
}
|
||||
floorIndex.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
<!-- 层级控制 -->
|
||||
<div class="floor">
|
||||
<div v-for="(item,index) in floorList" :class="index===floorIndex?'floor-select':'floor-default'"
|
||||
@click="toggleFloor(item,index)">{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-left-box">
|
||||
<div class="title">
|
||||
<span>故障报警</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue