|
|
@@ -0,0 +1,241 @@
|
|
|
+<template>
|
|
|
+ <div class="yui-tree-box">
|
|
|
+ <select-space></select-space>
|
|
|
+ <div class="hui-tree-content">
|
|
|
+ <div class="indoor box-background">
|
|
|
+ <div class="indoor-box">
|
|
|
+ <div class="indoor-center">
|
|
|
+ <div class="bim-box" style="margin-top: 0;">
|
|
|
+ <model ref="model" type="indoor" fileId="10000746828136"></model>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="indoor-right color-font">
|
|
|
+ <div class="light-operation">
|
|
|
+ <div class="indoor-title">
|
|
|
+ <div class="hui-chart-title">
|
|
|
+ 照明控制
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operation">
|
|
|
+ <div class="hui-operation">
|
|
|
+ <div class="operation-item">
|
|
|
+ <div class="operation-label">
|
|
|
+ <span class="label">开灯数</span>
|
|
|
+ <span class="number alibaba">0</span>
|
|
|
+ </div>
|
|
|
+ <div class="operation-test">
|
|
|
+ <div class="test-number" style="width:0%;background: #F9B115;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operation-item">
|
|
|
+ <div class="operation-label">
|
|
|
+ <span class="label">关闭数</span>
|
|
|
+ <span class="number alibaba">1</span>
|
|
|
+ </div>
|
|
|
+ <div class="operation-test">
|
|
|
+ <div class="test-number" style="width:100%;background: #BDC7DB;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="light-list">
|
|
|
+ <div class="light-item">
|
|
|
+ <div class="item-box">
|
|
|
+ <div class="light-top">
|
|
|
+ <i class="iconfont huifont-zhaoming"></i>
|
|
|
+ <el-switch v-model="value" @change="changeDoor"></el-switch>
|
|
|
+ </div>
|
|
|
+ <div class="label hui-ellipsis">
|
|
|
+ 照明1
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import testAlarm from '@/components/work/common/testAlarm'
|
|
|
+ import selectSpace from '@/components/work/common/selectSpace'
|
|
|
+ import model from '@/components/work/common/model'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeDoor() {
|
|
|
+ this.$refs.model.indoor(this.value, ['2828342']);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ testAlarm,
|
|
|
+ selectSpace,
|
|
|
+ model
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .indoor {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .indoor-title {
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .indoor-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-width: 1100px;
|
|
|
+ min-height: 699px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .indoor-center {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .indoor-right {
|
|
|
+ height: 100%;
|
|
|
+ width: 350px;
|
|
|
+ background: rgba(0, 4, 10, 0.3);
|
|
|
+ margin-left: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .light-operation {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .operation {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0px 10px 0px 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .curtain-list {
|
|
|
+ .curtain-item {
|
|
|
+ height: 180px;
|
|
|
+ background: #1E2430;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 16px 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .curtain-title {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .curtain-box {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 26px;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .huifont-chuanglian {
|
|
|
+ font-size: 56px;
|
|
|
+ color: #576171;
|
|
|
+ }
|
|
|
+
|
|
|
+ .curtain-operation {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .curtain-operation-item {
|
|
|
+ width: 32px;
|
|
|
+ line-height: 24px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .curtain-operation-item:hover {
|
|
|
+ color: $--color-primary;
|
|
|
+ background: rgba(51, 113, 255, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .light-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .light-line {
|
|
|
+ width: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .light-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .light-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 33.33333%;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ height: 100px;
|
|
|
+ padding: 14px 10px 16px 10px;
|
|
|
+ background: #1E2430;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-switch {
|
|
|
+ .el-switch__core {
|
|
|
+ width: 24px !important;
|
|
|
+ height: 12px;
|
|
|
+ line-height: 12px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-switch.is-checked .el-switch__core {
|
|
|
+ background: $--color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-switch .el-switch__core::after {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ top: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-switch.is-checked .el-switch__core::after {
|
|
|
+ margin-left: -10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
