三维交互
This commit is contained in:
parent
9f5afda6f6
commit
8a3389e3cb
|
|
@ -4,5 +4,5 @@ VITE_APP_TITLE = 若依管理系统
|
||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
VITE_APP_ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
|
||||||
# 若依管理系统/开发环境
|
#开发环境
|
||||||
VITE_APP_BASE_API = '/dev-api'
|
VITE_APP_BASE_API = '/dev-api'
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ VITE_APP_TITLE = 若依管理系统
|
||||||
# 生产环境配置
|
# 生产环境配置
|
||||||
VITE_APP_ENV = 'production'
|
VITE_APP_ENV = 'production'
|
||||||
|
|
||||||
# 若依管理系统/生产环境
|
#生产环境
|
||||||
VITE_APP_BASE_API = '/prod-api'
|
VITE_APP_BASE_API = '/prod-api'
|
||||||
|
|
||||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
# 是否在打包时开启压缩，支持 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-calendar ref="calendar" v-model="calendarDate">
|
<el-calendar ref="calendar" v-model="calendarDate" :row="5">
|
||||||
<template #header="{ date }">
|
<template #header="{ date }">
|
||||||
<div>
|
<div>
|
||||||
<img
|
<img
|
||||||
@click="selectDate('prev-year')"
|
@click="selectDate('prev-year')"
|
||||||
src="../../assets/images/overview/prevMonth.png"
|
src="../../assets/images/overview/prevMonth.png"
|
||||||
style="
|
style="
|
||||||
width: 16px;
|
width: 1rem;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
@click="selectDate('prev-month')"
|
@click="selectDate('prev-month')"
|
||||||
src="../../assets/images/overview/prevYear.png"
|
src="../../assets/images/overview/prevYear.png"
|
||||||
style="
|
style="
|
||||||
width: 16px;
|
width: 1rem;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
@ -42,20 +40,18 @@ const selectDate = (val) => {
|
||||||
@click="selectDate('next-month')"
|
@click="selectDate('next-month')"
|
||||||
src="../../assets/images/overview/nextYear.png"
|
src="../../assets/images/overview/nextYear.png"
|
||||||
style="
|
style="
|
||||||
width: 16px;
|
width:1rem;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
@click="selectDate('next-year')"
|
@click="selectDate('next-year')"
|
||||||
src="../../assets/images/overview/nextMonth.png"
|
src="../../assets/images/overview/nextMonth.png"
|
||||||
style="
|
style="
|
||||||
width: 16px;
|
width: 1rem;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -27,27 +27,48 @@ timer.value = setInterval(() => {
|
||||||
getNowDate()
|
getNowDate()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
const menuList = ref([
|
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),
|
name: shallowRef(energyMonitoring),
|
||||||
default: getPath.energy, select: getPath.energyselect
|
default: getPath.energy, select: getPath.energyselect
|
||||||
},
|
},
|
||||||
{name: shallowRef(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
|
{text:"能效",name: shallowRef(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
|
||||||
{name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
|
{text:"排水",name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
|
||||||
{name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
|
{text:"空调",name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
|
||||||
{name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
|
{text:"照明",name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
|
||||||
{name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
|
{text:"碳排放",name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
|
||||||
{name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
|
{text:"显示屏",name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
|
||||||
])
|
])
|
||||||
const menuIndex = ref(0)
|
const menuIndex = ref(0)
|
||||||
// const animationShow = ref(false)
|
// const animationShow = ref(false)
|
||||||
|
const dome = ref("")
|
||||||
// 菜单切换方法
|
// 菜单切换方法
|
||||||
const toggleClick = (item, index) => {
|
const toggleClick = (item, index) => {
|
||||||
tabName.value = item?.name
|
tabName.value = item?.name
|
||||||
menuIndex.value = index
|
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 tabName = shallowRef(overview)
|
||||||
|
const closeUnity = () =>{
|
||||||
|
dome.value.contentWindow.closeLight()
|
||||||
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
@ -55,18 +76,33 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="header">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- 左侧遮罩-->
|
|
||||||
<div class="left-mask">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- 右侧遮罩-->
|
|
||||||
<div class="right-mask">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
<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>
|
||||||
|
<!-- 左侧遮罩-->
|
||||||
|
<div class="left-mask">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- 右侧遮罩-->
|
||||||
|
<div class="right-mask">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- 底部遮罩层-->
|
||||||
|
<div class="bottom-mask">
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="date">
|
<div class="date">
|
||||||
<p>
|
<p>
|
||||||
<span class="m10">{{ nowDate }}</span>
|
<span class="m10">{{ nowDate }}</span>
|
||||||
|
|
@ -88,21 +124,29 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
<!-- <overview></overview>-->
|
<!-- <overview></overview>-->
|
||||||
<!-- <router-view />-->
|
<!-- <router-view />-->
|
||||||
<transition appear mode="out-in">
|
<!-- <transition appear mode="out-in">-->
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<component :is="tabName"></component>
|
<component :key="tabName" :is="tabName" @sendVal="getState" @closeBox="closeUnity" @closeAir="dome.contentWindow.closeStrategy()"></component>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
<!-- </transition>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
#iframe{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
.v-enter-from {
|
.v-enter-from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-enter-active {
|
.v-enter-active {
|
||||||
transition: opacity 1s ease-in;
|
transition: opacity 1s ease-in;
|
||||||
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-enter-to {
|
.v-enter-to {
|
||||||
|
|
@ -114,6 +158,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-leave-active {
|
.v-leave-active {
|
||||||
|
z-index: 9999;
|
||||||
transition: opacity 1s ease-in
|
transition: opacity 1s ease-in
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -129,18 +174,24 @@ onMounted(() => {
|
||||||
left: 0;
|
left: 0;
|
||||||
background-image: url('@/assets/images/mask/top.png');
|
background-image: url('@/assets/images/mask/top.png');
|
||||||
background-size: 100% 100%;
|
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 {
|
.left-mask {
|
||||||
width: vw(600);
|
width: vw(600);
|
||||||
left: 0;
|
left: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -99;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url('@/assets/images/mask/left.png');
|
background-image: url('@/assets/images/mask/left.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
z-index:2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-mask {
|
.right-mask {
|
||||||
|
|
@ -149,16 +200,27 @@ onMounted(() => {
|
||||||
top: 0;
|
top: 0;
|
||||||
width: vw(600);
|
width: vw(600);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: -99;
|
|
||||||
background-image: url('@/assets/images/mask/right.png');
|
background-image: url('@/assets/images/mask/right.png');
|
||||||
background-size: 100% 100%;
|
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 {
|
.date {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 2.5rem 2.2rem 0 2.2rem;
|
margin: 2.5rem 2.2rem 0 2.2rem;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
z-index:4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m10 {
|
.m10 {
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,8 @@
|
||||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||||
import Overview from '../views/overview/index.vue'
|
|
||||||
import energyMonitoring from '../views/energyMonitoring/index.vue'
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
redirect: '/overview'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/overview',
|
|
||||||
name: 'overview',
|
|
||||||
component: Overview
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/energyMonitoring',
|
|
||||||
name: 'energyMonitoring',
|
|
||||||
component: energyMonitoring
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,8 @@ p,ul,li{
|
||||||
.container{
|
.container{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url('@/assets/images/bg.png');
|
//background-image: url('@/assets/images/bg.png');
|
||||||
background-size: 100% 100%;
|
//background-size: 100% 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -46,16 +46,18 @@ p,ul,li{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: vw(450);
|
width: vw(450);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
z-index:3;
|
||||||
|
//animation: slide-out 2s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-right-box {
|
&-right-box {
|
||||||
padding-right: 2.375rem;
|
padding-right: 2.375rem;
|
||||||
|
//animation: slide-out 2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-left-box {
|
&-left-box {
|
||||||
padding-left: 2.375rem;
|
padding-left: 2.375rem;
|
||||||
|
//animation: slide-out 2s ease-in-out;
|
||||||
//transform: translateX(-100%);
|
//transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -70,17 +72,17 @@ p,ul,li{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//@keyframes slide-in {
|
@keyframes slide-in {
|
||||||
// //0%{
|
// //0%{
|
||||||
// // transform: translateX(0%);
|
// // transform: translateX(0%);
|
||||||
// //}
|
// //}
|
||||||
// from{
|
from{
|
||||||
// opacity: 0;
|
opacity: 0;
|
||||||
// }
|
}
|
||||||
// to {
|
to {
|
||||||
// opacity: 1;
|
opacity: 1;
|
||||||
// }
|
}
|
||||||
//}
|
}
|
||||||
.m100{
|
.m100{
|
||||||
position: relative;
|
position: relative;
|
||||||
top:2rem;
|
top:2rem;
|
||||||
|
|
@ -207,6 +209,7 @@ p,ul,li{
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
z-index: 9999; //优先级
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: vw(506);
|
width: vw(506);
|
||||||
|
|
@ -234,4 +237,27 @@ p,ul,li{
|
||||||
top: 3%;
|
top: 3%;
|
||||||
cursor: pointer;
|
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',
|
date: '09',
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
const emit = defineEmits(['closeAir'])
|
||||||
// 弹窗
|
// 弹窗
|
||||||
const dialogBoxShow = ref(false)
|
const dialogBoxShow = ref(false)
|
||||||
const dialogName = ref('')
|
const dialogName = ref('')
|
||||||
const openDialog = (name) =>{
|
const openDialog = (name) =>{
|
||||||
|
emit("closeAir","")
|
||||||
dialogBoxShow.value = true
|
dialogBoxShow.value = true
|
||||||
|
|
||||||
dialogName.value = name
|
dialogName.value = name
|
||||||
}
|
}
|
||||||
const closeDialog = (val) =>{
|
const closeDialog = (val) =>{
|
||||||
|
|
|
||||||
|
|
@ -771,27 +771,27 @@ const drawEnergyFlow = () => {
|
||||||
{
|
{
|
||||||
name: "电",
|
name: "电",
|
||||||
nameValue: 1562,
|
nameValue: 1562,
|
||||||
valueUnit: "KWh",
|
valueUnit: "万tCO2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "空调",
|
name: "空调",
|
||||||
nameValue: 562,
|
nameValue: 562,
|
||||||
valueUnit: "kWh",
|
valueUnit: "万tCO2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "照明",
|
name: "照明",
|
||||||
nameValue: 490,
|
nameValue: 490,
|
||||||
valueUnit: "kWh",
|
valueUnit: "万tCO2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "电梯",
|
name: "电梯",
|
||||||
nameValue: 510,
|
nameValue: 510,
|
||||||
valueUnit: "kWh",
|
valueUnit: "万tCO2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "其他",
|
name: "其他",
|
||||||
nameValue:320,
|
nameValue:320,
|
||||||
valueUnit: "kWh",
|
valueUnit: "万tCO2",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
let sangjiColor = [
|
let sangjiColor = [
|
||||||
|
|
@ -940,6 +940,7 @@ onMounted(() => {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
font-family: normal;
|
||||||
.date {
|
.date {
|
||||||
padding: 0 0.8rem;
|
padding: 0 0.8rem;
|
||||||
background-image: url("@/assets/images/small-icon.png");
|
background-image: url("@/assets/images/small-icon.png");
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const operationLeftList = ref([
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '4#泵',
|
name: '4#泵',
|
||||||
state:0
|
state: 0
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -187,10 +187,13 @@ const operationRightList = ref([
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page m100">
|
<div class="page m100">
|
||||||
|
|
||||||
<div class="page-left-box">
|
<div class="page-left-box">
|
||||||
<div class="title ">
|
<div class="title ">
|
||||||
<span>运行情况</span>
|
<span>运行情况</span>
|
||||||
|
|
|
||||||
|
|
@ -352,7 +352,7 @@ const drawEnergyFlow = () => {
|
||||||
{
|
{
|
||||||
name: "电",
|
name: "电",
|
||||||
nameValue: 1562,
|
nameValue: 1562,
|
||||||
valueUnit: "KWh",
|
valueUnit: "kWh",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "空调",
|
name: "空调",
|
||||||
|
|
@ -927,6 +927,13 @@ const drawElectricityPrice = () => {
|
||||||
myChart.setOption(option)
|
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加载
|
// dom加载
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 能耗总量
|
// 能耗总量
|
||||||
|
|
@ -969,7 +976,19 @@ onMounted(() => {
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>能效流向</span>
|
<span>能效流向</span>
|
||||||
</div>
|
</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>
|
||||||
<div class="page-right-box">
|
<div class="page-right-box">
|
||||||
<!-- 各系统能耗概况 -->
|
<!-- 各系统能耗概况 -->
|
||||||
|
|
@ -1030,6 +1049,36 @@ onMounted(() => {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.system-tab {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
|
|
||||||
|
|
@ -814,8 +814,8 @@ const getLoadClassification=()=> {
|
||||||
z: 3,
|
z: 3,
|
||||||
style: {
|
style: {
|
||||||
image: img,
|
image: img,
|
||||||
width: 188,
|
width: 170,
|
||||||
height: 188,
|
height: 170,
|
||||||
},
|
},
|
||||||
left: "center",
|
left: "center",
|
||||||
top: "center",
|
top: "center",
|
||||||
|
|
@ -928,7 +928,7 @@ const getLoadClassification=()=> {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
length: 60,
|
length: 20,
|
||||||
length2: 60,
|
length2: 60,
|
||||||
show: true,
|
show: true,
|
||||||
color: "#00ffff",
|
color: "#00ffff",
|
||||||
|
|
|
||||||
|
|
@ -93,6 +93,7 @@ const closeDialog = () => {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.dialog-content{
|
.dialog-content{
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 74%;
|
height: 74%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
|
||||||
|
|
@ -6,97 +6,136 @@ import dialogBox from './components/dialog.vue'
|
||||||
// 照明监测
|
// 照明监测
|
||||||
const lightingNumList = ref([
|
const lightingNumList = ref([
|
||||||
{
|
{
|
||||||
name:"照明四路数量",
|
name: "照明四路数量",
|
||||||
num:1130,
|
num: 1130,
|
||||||
pic:getPath.lightTotal,
|
pic: getPath.lightTotal,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:"照明四路灭灯数量",
|
name: "照明四路灭灯数量",
|
||||||
num:1130,
|
num: 1130,
|
||||||
pic:getPath.noLightNum,
|
pic: getPath.noLightNum,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:"照明四路亮灯数量",
|
name: "照明四路亮灯数量",
|
||||||
num:1130,
|
num: 1130,
|
||||||
pic:getPath.lightingNum,
|
pic: getPath.lightingNum,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:"离线数量",
|
name: "离线数量",
|
||||||
num:1130,
|
num: 1130,
|
||||||
pic:getPath.offlineNum,
|
pic: getPath.offlineNum,
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
// 照明回路详情
|
// 照明回路详情
|
||||||
const lightDetail = ref([
|
const lightDetail = ref([
|
||||||
{
|
{
|
||||||
name:'照明1',
|
name: '照明1',
|
||||||
address:"西大厅",
|
address: "西大厅",
|
||||||
state:false
|
state: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'照明2',
|
name: '照明2',
|
||||||
address:"西大厅",
|
address: "西大厅",
|
||||||
state:false
|
state: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'照明3',
|
name: '照明3',
|
||||||
address:"西大厅",
|
address: "西大厅",
|
||||||
state:false
|
state: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'照明4',
|
name: '照明4',
|
||||||
address:"西大厅",
|
address: "西大厅",
|
||||||
state:true
|
state: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'照明5',
|
name: '照明5',
|
||||||
address:"西大厅",
|
address: "西大厅",
|
||||||
state:true
|
state: true
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
// 照明控制
|
// 照明控制
|
||||||
const lightControl = ref([
|
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 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
|
lightLoadDate.value = event.srcElement.className
|
||||||
}
|
}
|
||||||
// 照明控制
|
// 照明控制
|
||||||
const controlBtn = ref('')
|
const controlBtn = ref('')
|
||||||
const toggleControl = (event) =>{
|
const toggleControl = (event) => {
|
||||||
controlBtn.value = event.srcElement.className
|
controlBtn.value = event.srcElement.className
|
||||||
}
|
}
|
||||||
// 弹窗
|
// 弹窗
|
||||||
const dialogShow = ref(false)
|
const dialogShow = ref(false)
|
||||||
const box = ref("")
|
const box = ref("")
|
||||||
const dialogTitle = ref("")
|
const dialogTitle = ref("")
|
||||||
const openDialog = (name) =>{
|
const openDialog = (name) => {
|
||||||
dialogShow.value = true
|
// 关闭三维照明控制箱的方法
|
||||||
|
emit("closeBox","")
|
||||||
|
|
||||||
dialogTitle.value = name
|
dialogTitle.value = name
|
||||||
|
dialogShow.value = true
|
||||||
|
|
||||||
}
|
}
|
||||||
const closeDialog = (val) =>{
|
const closeDialog = (val) => {
|
||||||
dialogShow.value = val
|
dialogShow.value = val
|
||||||
|
|
||||||
}
|
}
|
||||||
// 故障情况
|
// 故障情况
|
||||||
const drawFaultConditionsChart = () =>{
|
const drawFaultConditionsChart = () => {
|
||||||
let trafficWay = [
|
let trafficWay = [
|
||||||
{
|
{
|
||||||
name: "正常",
|
name: "正常",
|
||||||
|
|
@ -116,7 +155,7 @@ const drawFaultConditionsChart = () =>{
|
||||||
var data = [];
|
var data = [];
|
||||||
var color = [
|
var color = [
|
||||||
'rgba(1, 246, 139, 1)',
|
'rgba(1, 246, 139, 1)',
|
||||||
'rgba(255, 221, 0, 1)'
|
'rgba(255, 221, 0, 1)'
|
||||||
];
|
];
|
||||||
for (var i = 0; i < trafficWay.length; i++) {
|
for (var i = 0; i < trafficWay.length; i++) {
|
||||||
data.push(
|
data.push(
|
||||||
|
|
@ -124,27 +163,27 @@ const drawFaultConditionsChart = () =>{
|
||||||
value: trafficWay[i].value,
|
value: trafficWay[i].value,
|
||||||
name: trafficWay[i].name,
|
name: trafficWay[i].name,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderWidth: 5,
|
borderWidth: 5,
|
||||||
// shadowBlur: 20,
|
// shadowBlur: 20,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
borderColor: color[i],
|
borderColor: color[i],
|
||||||
shadowColor: color[i],
|
shadowColor: color[i],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: total * 0.04,
|
value: total * 0.04,
|
||||||
name: "",
|
name: "",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
color: "rgba(0, 0, 0, 0)",
|
|
||||||
borderWidth: 0,
|
|
||||||
},
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
color: "rgba(0, 0, 0, 0)",
|
||||||
|
borderWidth: 0,
|
||||||
},
|
},
|
||||||
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
||||||
|
|
@ -270,7 +309,7 @@ const drawFaultConditionsChart = () =>{
|
||||||
length: 20,
|
length: 20,
|
||||||
length2: 100,
|
length2: 100,
|
||||||
show: true,
|
show: true,
|
||||||
showAbove:true,
|
showAbove: true,
|
||||||
color: "#00ffff",
|
color: "#00ffff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -282,7 +321,7 @@ const drawFaultConditionsChart = () =>{
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
// 展馆照明
|
// 展馆照明
|
||||||
const drawHallLightingChart =()=>{
|
const drawHallLightingChart = () => {
|
||||||
const offsetX = 10; //bar宽
|
const offsetX = 10; //bar宽
|
||||||
const offsetY = 5; //倾斜角度
|
const offsetY = 5; //倾斜角度
|
||||||
// 绘制左侧面
|
// 绘制左侧面
|
||||||
|
|
@ -351,8 +390,8 @@ const drawHallLightingChart =()=>{
|
||||||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||||
let intAxisData = ['室内','户外'];
|
let intAxisData = ['室内', '户外'];
|
||||||
let intSeriesData = [100,200];
|
let intSeriesData = [100, 200];
|
||||||
// 绿色渐变
|
// 绿色渐变
|
||||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||||
let colorArr;
|
let colorArr;
|
||||||
|
|
@ -413,7 +452,7 @@ const drawHallLightingChart =()=>{
|
||||||
name: "单位:kW",
|
name: "单位:kW",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#DDFFFD",
|
color: "#DDFFFD",
|
||||||
padding:[0,20,0,0]
|
padding: [0, 20, 0, 0]
|
||||||
},
|
},
|
||||||
// minInterval: 1,
|
// minInterval: 1,
|
||||||
// y轴（竖直线）
|
// y轴（竖直线）
|
||||||
|
|
@ -443,11 +482,11 @@ const drawHallLightingChart =()=>{
|
||||||
type: "custom",
|
type: "custom",
|
||||||
renderItem: (params, api) => {
|
renderItem: (params, api) => {
|
||||||
const location = api.coord([api.value(0), api.value(1)]);
|
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, 170, 193, 1)"],
|
||||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||||
]:[
|
] : [
|
||||||
// 绿色渐变
|
// 绿色渐变
|
||||||
["rgba(0, 193, 113, 1)"],
|
["rgba(0, 193, 113, 1)"],
|
||||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||||
|
|
@ -558,7 +597,7 @@ const drawHallLightingChart =()=>{
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
// 照明负荷
|
// 照明负荷
|
||||||
const drawLightLoadChart = () =>{
|
const drawLightLoadChart = () => {
|
||||||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||||
|
|
||||||
let option = {
|
let option = {
|
||||||
|
|
@ -585,8 +624,8 @@ const drawLightLoadChart = () =>{
|
||||||
orient: 'horizontal',
|
orient: 'horizontal',
|
||||||
// data: ['进水量', '出水量'],
|
// data: ['进水量', '出水量'],
|
||||||
borderRadius: 20,
|
borderRadius: 20,
|
||||||
itemHeight:10,
|
itemHeight: 10,
|
||||||
itemWidth:15,
|
itemWidth: 15,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#DDFFFD',
|
color: '#DDFFFD',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|
@ -617,8 +656,8 @@ const drawLightLoadChart = () =>{
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
min:0,
|
min: 0,
|
||||||
max:500,
|
max: 500,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '单位/kW',
|
name: '单位/kW',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
|
|
@ -636,7 +675,7 @@ const drawLightLoadChart = () =>{
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type:'dashed',
|
type: 'dashed',
|
||||||
color: "rgba(1, 39, 37, 0.30)",
|
color: "rgba(1, 39, 37, 0.30)",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
@ -681,14 +720,15 @@ const drawLightLoadChart = () =>{
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#91cc75'
|
color: '#91cc75'
|
||||||
},
|
},
|
||||||
data: [100, 320, 400,420, 500]
|
data: [100, 320, 400, 420, 500]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
}
|
}
|
||||||
myChart.setOption(option)
|
myChart.setOption(option)
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(() => {
|
||||||
|
window.openBox = openDialog
|
||||||
// 故障情况
|
// 故障情况
|
||||||
drawFaultConditionsChart()
|
drawFaultConditionsChart()
|
||||||
// 展馆照明
|
// 展馆照明
|
||||||
|
|
@ -700,21 +740,25 @@ onMounted(()=>{
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page m100">
|
<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="page-left-box">
|
||||||
<!-- 照明监测-->
|
<!-- 照明监测-->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>照明监测</span>
|
<span>照明监测</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="light">
|
<div id="light" class="margin10 box-bg">
|
||||||
<div class="light-item" v-for="(item,index) in lightingNumList">
|
<div v-for="(item,index) in lightingNumList" class="light-item">
|
||||||
<img :src="item.pic" alt="">
|
<img :src="item.pic" alt="">
|
||||||
<p>
|
<p>
|
||||||
<span class="name">{{item.name}}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<span class="num">{{item.num}}<span class="unit">个</span></span>
|
<span class="num">{{ item.num }}<span class="unit">个</span></span>
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 当日累计用电量-->
|
<!-- 当日累计用电量-->
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
|
|
@ -728,13 +772,13 @@ onMounted(()=>{
|
||||||
<span>状态</span>
|
<span>状态</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tableContent">
|
<div class="tableContent">
|
||||||
<div class="tableBoby"
|
<div v-for="(item, index) in lightDetail"
|
||||||
v-for="(item, index) in lightDetail"
|
|
||||||
:key="index"
|
:key="index"
|
||||||
|
class="tableBoby"
|
||||||
>
|
>
|
||||||
<span class="name">{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<span>{{item.address}}</span>
|
<span>{{ item.address }}</span>
|
||||||
<span ><i :class="item.state?'state1':'state0'"></i></span>
|
<span><i :class="item.state?'state1':'state0'"></i></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -743,37 +787,40 @@ onMounted(()=>{
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>照明负荷</span>
|
<span>照明负荷</span>
|
||||||
<p>
|
<p>
|
||||||
<span class="year" :class="lightLoadDate === 'year'?'selectYear':''" @click="toggleLightLoad">年</span>
|
<span :class="lightLoadDate === 'year'?'selectYear':''" class="year" @click="toggleLightLoad">年</span>
|
||||||
<span class="month" :class="lightLoadDate === 'month'?'selectMonth':''" @click="toggleLightLoad">月</span>
|
<span :class="lightLoadDate === 'month'?'selectMonth':''" class="month" @click="toggleLightLoad">月</span>
|
||||||
<span class="day" :class="lightLoadDate === 'day'?'selectDay':''" @click="toggleLightLoad">日</span>
|
<span :class="lightLoadDate === 'day'?'selectDay':''" class="day" @click="toggleLightLoad">日</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="lightLoad"></div>
|
<div id="lightLoad" class="margin10 box-bg"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-right-box">
|
<div class="page-right-box">
|
||||||
<!-- 展馆照明 -->
|
<!-- 展馆照明 -->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>展馆照明</span>
|
<span>展馆照明</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="hallLighting"></div>
|
<div id="hallLighting" class="margin10 box-bg">
|
||||||
|
|
||||||
|
</div>
|
||||||
<!-- 照明控制-->
|
<!-- 照明控制-->
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>照明控制</span>
|
<span>照明控制</span>
|
||||||
<p class="control-btn">
|
<p class="control-btn">
|
||||||
<span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
|
<span :class="controlBtn==='on'?'select':''" class="on" @click="toggleControl">全开</span>
|
||||||
<span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
|
<span :class="controlBtn==='off'?'select':''" class="off" style="margin-left: .7rem"
|
||||||
|
@click="toggleControl">全关</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" >
|
<div class="margin10 box-bg">
|
||||||
<div class="runningState">
|
<div class="runningState">
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
<span>控制箱名称</span>
|
<span>控制箱名称</span>
|
||||||
<span>操作</span>
|
<span>操作</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tableContent">
|
<div class="tableContent">
|
||||||
<div class="tableBoby"
|
<div v-for="(item, index) in lightControl"
|
||||||
v-for="(item, index) in lightControl"
|
|
||||||
:key="index"
|
:key="index"
|
||||||
|
class="tableBoby"
|
||||||
>
|
>
|
||||||
<span class="name">{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
|
|
||||||
|
|
@ -786,74 +833,88 @@ onMounted(()=>{
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>故障情况</span>
|
<span>故障情况</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="faultConditions"></div>
|
<div id="faultConditions" class="margin10 box-bg"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss" scoped>
|
||||||
//照明监测
|
//照明监测
|
||||||
#light{
|
#light {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-content: space-evenly;
|
align-content: space-evenly;
|
||||||
//padding: 2% 10%;
|
//padding: 2% 10%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 3.875rem;
|
width: 3.875rem;
|
||||||
height: 4.375rem;
|
height: 4.375rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.light-item{
|
|
||||||
|
.light-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
p{
|
|
||||||
|
p {
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
.name{
|
|
||||||
|
.name {
|
||||||
margin-top: 1.3rem;
|
margin-top: 1.3rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
color: rgba(1, 246, 139, 1);
|
color: rgba(1, 246, 139, 1);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1.25rem !important;
|
font-size: 1.25rem !important;
|
||||||
}
|
}
|
||||||
.unit{
|
|
||||||
|
.unit {
|
||||||
margin-left: .2rem;
|
margin-left: .2rem;
|
||||||
}
|
}
|
||||||
.name,.num{
|
|
||||||
|
.name, .num {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: .75rem;
|
font-size: .75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//照明回路详情
|
//照明回路详情
|
||||||
.state0,.state1{
|
.state0, .state1 {
|
||||||
width: 1.1rem;
|
width: 1.1rem;
|
||||||
height: 1.1rem;
|
height: 1.1rem;
|
||||||
display: block;
|
display: block;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.state0{
|
|
||||||
|
.state0 {
|
||||||
background-image: url('@/assets/images/lighting/state0.png');
|
background-image: url('@/assets/images/lighting/state0.png');
|
||||||
}
|
}
|
||||||
.state1{
|
|
||||||
|
.state1 {
|
||||||
background-image: url('@/assets/images/lighting/state1.png');
|
background-image: url('@/assets/images/lighting/state1.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
//照明控制
|
//照明控制
|
||||||
.control{
|
.control {
|
||||||
color:rgba(61, 255, 244, 1);
|
color: rgba(61, 255, 244, 1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.control-btn{
|
|
||||||
|
.control-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
.select{
|
|
||||||
|
.select {
|
||||||
background-image: url("@/assets/images/air-tab-select.png") !important;
|
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||||||
}
|
}
|
||||||
span{
|
|
||||||
|
span {
|
||||||
background-image: url("@/assets/images/air-tab.png");
|
background-image: url("@/assets/images/air-tab.png");
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: normal;
|
font-family: normal;
|
||||||
|
|
@ -863,8 +924,9 @@ width: 1.1rem;
|
||||||
padding: 0.2rem 1.1rem;
|
padding: 0.2rem 1.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//弹窗
|
//弹窗
|
||||||
.dialog{
|
.dialog {
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -190,11 +190,44 @@ const runTimeList = ref([
|
||||||
name: "西大厅24",
|
name: "西大厅24",
|
||||||
value: true,
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page m100">
|
<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="page-left-box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>故障报警</span>
|
<span>故障报警</span>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue