fix:电梯系统/照明系统 代码规范
This commit is contained in:
chenpingsen
@@ -1,53 +1,47 @@
|
||||
<template>
|
||||
<div class="map-box">
|
||||
<div class="map">
|
||||
<liftInfo></liftInfo>
|
||||
<liftInfo />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import liftInfo from './liftInfo.vue'
|
||||
// 请求
|
||||
import { message } from 'ant-design-vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import liftInfo from './liftInfo.vue';
|
||||
// 请求
|
||||
|
||||
// 初始化 ===========================================================
|
||||
// 初始化 ===========================================================
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
// tab页部分 ========================================================
|
||||
|
||||
// 表格数据
|
||||
const dataSource = ref([]);
|
||||
onMounted(() => {});
|
||||
|
||||
// tab页部分 ========================================================
|
||||
|
||||
// 表格数据
|
||||
const dataSource = ref([]);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.map-box {
|
||||
// 颜色变量，用于区别颜色
|
||||
.map-box {
|
||||
// 颜色变量，用于区别颜色
|
||||
|
||||
// 正常 - 开启 - 上行 -下行
|
||||
--on: #0DFFA4;
|
||||
// 关闭
|
||||
--off: #BFCDE2;
|
||||
// 暂停 - 维修
|
||||
--pause: #FFBC46;
|
||||
// 告警 - 急停
|
||||
--stop: #F36163;
|
||||
// 故障
|
||||
--fault: #FF7636;
|
||||
// 未知
|
||||
--unknown: #A742FF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.map {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
background-image: url(../image/bg.jpg);
|
||||
// 正常 - 开启 - 上行 -下行
|
||||
--on: #0dffa4;
|
||||
// 关闭
|
||||
--off: #bfcde2;
|
||||
// 暂停 - 维修
|
||||
--pause: #ffbc46;
|
||||
// 告警 - 急停
|
||||
--stop: #f36163;
|
||||
// 故障
|
||||
--fault: #ff7636;
|
||||
// 未知
|
||||
--unknown: #a742ff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.map {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
background-image: url(../image/bg.jpg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="item-box">
|
||||
<div class="icon">
|
||||
<div class="icon-item">
|
||||
<img src="../image/liftState/lift-normal.svg" alt="">
|
||||
<img src="../image/liftState/lift-normal.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="item-box">
|
||||
<div class="icon">
|
||||
<div class="icon-item">
|
||||
<img src="../image/liftState/lift-normal.svg" alt="">
|
||||
<img src="../image/liftState/lift-normal.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,7 +32,7 @@
|
||||
<div class="item-box">
|
||||
<div class="icon">
|
||||
<div class="icon-item">
|
||||
<img src="../image/liftState/lift-normal.svg" alt="">
|
||||
<img src="../image/liftState/lift-normal.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,109 +43,104 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 请求
|
||||
// 请求
|
||||
|
||||
// 初始化 ===========================================================
|
||||
// 初始化 ===========================================================
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
// tab页部分 ========================================================
|
||||
|
||||
// 运行状态
|
||||
const runState = ref('1');
|
||||
// 电梯状态
|
||||
const liftState = ref('2');
|
||||
onMounted(() => {});
|
||||
|
||||
// tab页部分 ========================================================
|
||||
|
||||
// 运行状态
|
||||
const runState = ref('1');
|
||||
// 电梯状态
|
||||
const liftState = ref('2');
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 面板
|
||||
.info-box {
|
||||
// 字体颜色变量
|
||||
--text: rgb(20, 255, 255);
|
||||
// 面板
|
||||
.info-box {
|
||||
// 字体颜色变量
|
||||
--text: rgb(20, 255, 255);
|
||||
|
||||
width: 240px;
|
||||
height: 130px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
background: rgb(17, 44, 86, 0.9);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
border: 3px solid var(--text);
|
||||
// 面板标题
|
||||
.box-title {
|
||||
height: auto;
|
||||
color: var(--text);
|
||||
// 标题前小方块
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
background: var(--text);
|
||||
}
|
||||
// 标题
|
||||
span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
// 下半部分
|
||||
.box-inner {
|
||||
flex: 1;
|
||||
width: 240px;
|
||||
height: 130px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
// 单个盒子（3盒子）
|
||||
.item {
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
background: rgb(17, 44, 86, 0.9);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
border: 3px solid var(--text);
|
||||
// 面板标题
|
||||
.box-title {
|
||||
height: auto;
|
||||
color: var(--text);
|
||||
// 标题前小方块
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
background: var(--text);
|
||||
}
|
||||
// 标题
|
||||
span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
// 下半部分
|
||||
.box-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// 盒子中放置图片的容器
|
||||
.item-box {
|
||||
padding: 0 10px;
|
||||
// 单个盒子（3盒子）
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// border: 1px solid red;
|
||||
.icon {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
background-image: url(../image/box.svg);
|
||||
background-size: 130% 130%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left -8px top -8px;
|
||||
flex-direction: column;
|
||||
// 盒子中放置图片的容器
|
||||
.item-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// border: 1px solid red;
|
||||
position: relative;
|
||||
.icon-item {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.icon {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
background-image: url(../image/box.svg);
|
||||
background-size: 130% 130%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left -8px top -8px;
|
||||
// border: 1px solid red;
|
||||
position: relative;
|
||||
.icon-item {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-text {
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
user-select: none;
|
||||
.item-text {
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,286 +1,276 @@
|
||||
<template>
|
||||
<div class="lighting-box">
|
||||
<div class="lighting-img-box">
|
||||
<!-- 左上角，区域切换 -->
|
||||
<div class="btn-box">
|
||||
<button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
|
||||
</div>
|
||||
<!-- 楼层区域 -->
|
||||
<div class="area">
|
||||
<div
|
||||
v-for="(item, index) in treeData"
|
||||
:class="computedClass(item.id)"
|
||||
@click="changeThisArea([item])"
|
||||
:key="index">
|
||||
<div v-for="(v, i) in item.childList" :key="i" class="light-group">
|
||||
<div class="group-shadow" @click.stop="changeThisArea([item, v])">
|
||||
<div :class="computedClass(v.id)" class="shadow-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 照明设备 -->
|
||||
<div class="lights">
|
||||
<light v-for="(item, index) in bulbs"
|
||||
:key="index"
|
||||
:styleObject="item.styleText"
|
||||
:type="item.type"
|
||||
:visible="item.visible">
|
||||
</light>
|
||||
<div class="lighting-box">
|
||||
<div class="lighting-img-box">
|
||||
<!-- 左上角，区域切换 -->
|
||||
<div class="btn-box">
|
||||
<button v-for="item in floorData" class="btn-item" @click="changeFloor(item.childList)">{{
|
||||
item.name
|
||||
}}</button>
|
||||
</div>
|
||||
<!-- 楼层区域 -->
|
||||
<div class="area">
|
||||
<div
|
||||
v-for="(item, index) in treeData"
|
||||
:class="computedClass(item.id)"
|
||||
@click="changeThisArea([item])"
|
||||
:key="index">
|
||||
<div v-for="(v, i) in item.childList" :key="i" class="light-group">
|
||||
<div class="group-shadow" @click.stop="changeThisArea([item, v])">
|
||||
<div :class="computedClass(v.id)" class="shadow-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧抽屉的触发按钮 -->
|
||||
<div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
|
||||
<double-left-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white;" />
|
||||
</div>
|
||||
<!-- 右侧抽屉 -->
|
||||
<a-drawer
|
||||
v-model:visible="visible"
|
||||
class="drawer-item"
|
||||
width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
|
||||
:closable="false"
|
||||
id="drawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<tabs1
|
||||
ref="tabs1Ref"
|
||||
@changeArea="changeArea"
|
||||
@reset="reset"
|
||||
:treeData="treeData"
|
||||
></tabs1>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<tabs2></tabs2>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志">
|
||||
<tabs3></tabs3>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
</div>
|
||||
<!-- 照明设备 -->
|
||||
<div class="lights">
|
||||
<light
|
||||
v-for="(item, index) in bulbs"
|
||||
:key="index"
|
||||
:styleObject="item.styleText"
|
||||
:type="item.type"
|
||||
:visible="item.visible" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧抽屉的触发按钮 -->
|
||||
<div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
|
||||
<double-left-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<!-- 右侧抽屉 -->
|
||||
<a-drawer
|
||||
v-model:visible="visible"
|
||||
class="drawer-item"
|
||||
width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
|
||||
:closable="false"
|
||||
id="drawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<tabs1 ref="tabs1Ref" @changeArea="changeArea" @reset="reset" :treeData="treeData" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<tabs2 />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志">
|
||||
<tabs3 />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
// 组件
|
||||
import light from './light.vue';
|
||||
import tabs1 from './tabs1.vue';
|
||||
import tabs2 from './tabs2.vue';
|
||||
import tabs3 from './tabs3.vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
// ICON
|
||||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
// 组件
|
||||
import light from './light.vue';
|
||||
import tabs1 from './tabs1.vue'
|
||||
import tabs2 from './tabs2.vue'
|
||||
import tabs3 from './tabs3.vue'
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
// ICON
|
||||
import {
|
||||
DoubleLeftOutlined,
|
||||
DoubleRightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
// 初始化 =======================================================
|
||||
|
||||
|
||||
// 初始化 =======================================================
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
// 获得分区与线路的结构
|
||||
getAllArea()
|
||||
})
|
||||
getAllArea();
|
||||
});
|
||||
|
||||
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
||||
const preload = ref(false)
|
||||
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
||||
const preload = ref(false);
|
||||
|
||||
// 分层业务 =====================================================
|
||||
|
||||
// 分层业务 =====================================================
|
||||
|
||||
// 所有楼层的数据
|
||||
const floorData = ref([])
|
||||
// 左上角分层切换
|
||||
const changeFloor = (area: any) => {
|
||||
// 所有楼层的数据
|
||||
const floorData = ref([]);
|
||||
// 左上角分层切换
|
||||
const changeFloor = (area: any) => {
|
||||
// 重置数据
|
||||
reset()
|
||||
reset();
|
||||
// 重置视图
|
||||
changeArea(['1'])
|
||||
changeArea(['1']);
|
||||
// 切换楼层数据
|
||||
treeData.value = area
|
||||
treeData.value = area;
|
||||
// 默认选择第一项
|
||||
treeData.value[0].selected = true
|
||||
}
|
||||
treeData.value[0].selected = true;
|
||||
};
|
||||
|
||||
// 分区业务 =====================================================
|
||||
|
||||
// 分区业务 =====================================================
|
||||
|
||||
// 分区结构树
|
||||
const treeData = ref([])
|
||||
// 当前选中的分区序列 - 用于样式渲染
|
||||
const area = ref(['1'])
|
||||
// 线路内小灯泡 - 此处位置需前端写死
|
||||
const bulbs = ref([
|
||||
// 分区结构树
|
||||
const treeData = ref([]);
|
||||
// 当前选中的分区序列 - 用于样式渲染
|
||||
const area = ref(['1']);
|
||||
// 线路内小灯泡 - 此处位置需前端写死
|
||||
const bulbs = ref([
|
||||
{
|
||||
styleText: { left: '180px', bottom: '200px' },
|
||||
area: 1,
|
||||
type: 1,
|
||||
visible: true
|
||||
styleText: { left: '180px', bottom: '200px' },
|
||||
area: 1,
|
||||
type: 1,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '230px', bottom: '125px' },
|
||||
area: 1,
|
||||
type: 2,
|
||||
visible: true
|
||||
styleText: { left: '230px', bottom: '125px' },
|
||||
area: 1,
|
||||
type: 2,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '320px', bottom: '140px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true
|
||||
styleText: { left: '320px', bottom: '140px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '245px', bottom: '230px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true
|
||||
styleText: { left: '245px', bottom: '230px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '405px', bottom: '230px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
styleText: { left: '405px', bottom: '230px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '460px', bottom: '180px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
styleText: { left: '460px', bottom: '180px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '360px', bottom: '275px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
styleText: { left: '360px', bottom: '275px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '715px', bottom: '320px' },
|
||||
area: 3,
|
||||
type: 1,
|
||||
visible: true
|
||||
styleText: { left: '715px', bottom: '320px' },
|
||||
area: 3,
|
||||
type: 1,
|
||||
visible: true,
|
||||
},
|
||||
])
|
||||
// 由子组件控制的分区与线路切换
|
||||
const changeArea = (result: any) => {
|
||||
console.log(result,'changeArea')
|
||||
]);
|
||||
// 由子组件控制的分区与线路切换
|
||||
const changeArea = (result: any) => {
|
||||
console.log(result, 'changeArea');
|
||||
// 数组
|
||||
if (Array.isArray(result)) {
|
||||
area.value = result
|
||||
// 不是数组
|
||||
area.value = result;
|
||||
// 不是数组
|
||||
} else {
|
||||
area.value.length = 0
|
||||
area.value[0] = String(result)
|
||||
}
|
||||
}
|
||||
// 由当前组件控制的分区切换
|
||||
const changeThisArea = (result: any) => {
|
||||
console.log(result, 'changeThisArea')
|
||||
area.value.length = 0;
|
||||
area.value[0] = String(result);
|
||||
}
|
||||
};
|
||||
// 由当前组件控制的分区切换
|
||||
const changeThisArea = (result: any) => {
|
||||
console.log(result, 'changeThisArea');
|
||||
// 修改前，将所有选项置空
|
||||
reset()
|
||||
reset();
|
||||
let level1 = result[0];
|
||||
area.value.length = 0
|
||||
area.value.length = 0;
|
||||
// 只选择了分区
|
||||
if (result.length === 1) {
|
||||
result[0].selected = true
|
||||
area.value.push(result[0].id)
|
||||
// 控制子组件按钮区
|
||||
tabs1Ref.value.changeArea(result[0])
|
||||
// 选择了分区 + 线路
|
||||
result[0].selected = true;
|
||||
area.value.push(result[0].id);
|
||||
// 控制子组件按钮区
|
||||
tabs1Ref.value.changeArea(result[0]);
|
||||
// 选择了分区 + 线路
|
||||
} else if (result.length === 2) {
|
||||
// 如果没有分区，默认选择第一个
|
||||
if (!level1) {
|
||||
level1 = treeData.value[0]
|
||||
}
|
||||
// 选中状态都设为true
|
||||
level1.selected = result[1].selected = true
|
||||
area.value.splice(0, 0, level1.id, result[1].id)
|
||||
// 控制子组件按钮区
|
||||
tabs1Ref.value.changeArea(result[0])
|
||||
tabs1Ref.value.changeLine(result[1])
|
||||
// 如果没有分区，默认选择第一个
|
||||
if (!level1) {
|
||||
level1 = treeData.value[0];
|
||||
}
|
||||
// 选中状态都设为true
|
||||
level1.selected = result[1].selected = true;
|
||||
area.value.splice(0, 0, level1.id, result[1].id);
|
||||
// 控制子组件按钮区
|
||||
tabs1Ref.value.changeArea(result[0]);
|
||||
tabs1Ref.value.changeLine(result[1]);
|
||||
}
|
||||
}
|
||||
// 重置分区树所有当前选项
|
||||
const reset = () => {
|
||||
};
|
||||
// 重置分区树所有当前选项
|
||||
const reset = () => {
|
||||
treeData.value.forEach((item: any) => {
|
||||
item.selected = false
|
||||
item.childList.forEach((i: any) => {
|
||||
i.selected = false
|
||||
})
|
||||
})
|
||||
}
|
||||
// 俯视图分区选中计算函数
|
||||
const computedClass = (string: string) => {
|
||||
item.selected = false;
|
||||
item.childList.forEach((i: any) => {
|
||||
i.selected = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
// 俯视图分区选中计算函数
|
||||
const computedClass = (string: string) => {
|
||||
if (area.value.indexOf(string) != -1) {
|
||||
return `isActive area-item area${string}`
|
||||
return `isActive area-item area${string}`;
|
||||
} else {
|
||||
return `area-item area${string}`
|
||||
return `area-item area${string}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获得所有分区
|
||||
const getAllArea = () => {
|
||||
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
|
||||
const data = res.data
|
||||
floorData.value = data
|
||||
/** 只在前端使用的变量
|
||||
* @param id 用于判断样式和层级的前端属性
|
||||
* @param selected 用于表示是否选中的前端属性
|
||||
*/
|
||||
data.forEach((floor: any) => {
|
||||
floor.childList.forEach((item: any, index: number) => {
|
||||
if (index == 0) {
|
||||
item.selected = true
|
||||
} else {
|
||||
item.selected = false
|
||||
}
|
||||
item.id = String(index + 1)
|
||||
item.childList.forEach((v: any, i: number) => {
|
||||
v.selected = false
|
||||
v.id = (index + 1) + '-' + (i + 1)
|
||||
})
|
||||
})
|
||||
})
|
||||
// 默认展示 线路 1-1
|
||||
treeData.value = data[0].childList
|
||||
// 开始预加载
|
||||
preload.value = true
|
||||
})
|
||||
}
|
||||
// 获得所有分区
|
||||
const getAllArea = () => {
|
||||
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then((res) => {
|
||||
const data = res.data;
|
||||
floorData.value = data;
|
||||
/** 只在前端使用的变量
|
||||
* @param id 用于判断样式和层级的前端属性
|
||||
* @param selected 用于表示是否选中的前端属性
|
||||
*/
|
||||
data.forEach((floor: any) => {
|
||||
floor.childList.forEach((item: any, index: number) => {
|
||||
if (index == 0) {
|
||||
item.selected = true;
|
||||
} else {
|
||||
item.selected = false;
|
||||
}
|
||||
item.id = String(index + 1);
|
||||
item.childList.forEach((v: any, i: number) => {
|
||||
v.selected = false;
|
||||
v.id = index + 1 + '-' + (i + 1);
|
||||
});
|
||||
});
|
||||
});
|
||||
// 默认展示 线路 1-1
|
||||
treeData.value = data[0].childList;
|
||||
// 开始预加载
|
||||
preload.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
// 抽屉业务 =====================================================
|
||||
// 抽屉业务 =====================================================
|
||||
|
||||
// 抽屉 - 当前选择的tab
|
||||
let activeKey = ref('1');
|
||||
// 抽屉 - 打开状态
|
||||
let visible = ref(false);
|
||||
// 抽屉 - 开关事件
|
||||
const toggleDrawer = () => {
|
||||
// 抽屉 - 当前选择的tab
|
||||
let activeKey = ref('1');
|
||||
// 抽屉 - 打开状态
|
||||
let visible = ref(false);
|
||||
// 抽屉 - 开关事件
|
||||
const toggleDrawer = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
// 抽屉tab1组件的引用
|
||||
const tabs1Ref = ref()
|
||||
|
||||
};
|
||||
// 抽屉tab1组件的引用
|
||||
const tabs1Ref = ref();
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./index.less";
|
||||
// 当前选中分区的样式
|
||||
.isActive {
|
||||
@import './index.less';
|
||||
|
||||
// 当前选中分区的样式
|
||||
.isActive {
|
||||
border: 3px solid white !important;
|
||||
}
|
||||
// 抽屉顶部tab按钮样式
|
||||
:deep(.ant-tabs-tab-btn) {
|
||||
}
|
||||
|
||||
// 抽屉顶部tab按钮样式
|
||||
:deep(.ant-tabs-tab-btn) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
<template>
|
||||
<a-popover color="rgba(0, 0, 0, 0.8)">
|
||||
<template #content>
|
||||
<div class="light-tag">
|
||||
<div class="light-tag-tit">
|
||||
<div>
|
||||
<img src="/asset/image//bulbLogo/21962.png" alt="" />
|
||||
<span class="tag-text">{{ result.name }}</span>
|
||||
</div>
|
||||
<button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
|
||||
</div>
|
||||
<div class="light-tag-box">
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">控制模式</span>
|
||||
<span class="result">自动</span>
|
||||
</div>
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">亮度</span>
|
||||
<span class="result">{{ result.brightness }}</span>
|
||||
</div>
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">控制场景</span>
|
||||
<span class="result">{{ result.automatic2 }}</span>
|
||||
</div>
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">色温</span>
|
||||
<span class="result">{{ result.brightness3 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="icon-box" :style="styleObject" v-show="visible">
|
||||
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
|
||||
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
|
||||
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
|
||||
<a-popover color="rgba(0, 0, 0, 0.8)">
|
||||
<template #content>
|
||||
<div class="light-tag">
|
||||
<div class="light-tag-tit">
|
||||
<div>
|
||||
<img src="/asset/image//bulbLogo/21962.png" alt="" />
|
||||
<span class="tag-text">{{ result.name }}</span>
|
||||
</div>
|
||||
<button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
|
||||
</div>
|
||||
</a-popover>
|
||||
<div class="light-tag-box">
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">控制模式</span>
|
||||
<span class="result">自动</span>
|
||||
</div>
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">亮度</span>
|
||||
<span class="result">{{ result.brightness }}</span>
|
||||
</div>
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">控制场景</span>
|
||||
<span class="result">{{ result.automatic2 }}</span>
|
||||
</div>
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">色温</span>
|
||||
<span class="result">{{ result.brightness3 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="icon-box" :style="styleObject" v-show="visible">
|
||||
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="" />
|
||||
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="" />
|
||||
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="" />
|
||||
</div>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
styleObject: Object,
|
||||
type: Number,
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const result = ref({
|
||||
const result = ref({
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
@@ -64,77 +64,86 @@ const result = ref({
|
||||
automatic2: '舒适',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.icon-box {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
.icon-box {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
|
||||
.icon-item {
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.1s;
|
||||
}
|
||||
|
||||
.icon-item:active {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 悬浮窗外部
|
||||
.light-tag {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
// 悬浮窗标题
|
||||
.light-tag-tit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
|
||||
.tag-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.right-button {
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
background: rgba(57, 215, 187, 0.1);
|
||||
border: 1px solid rgba(57, 215, 187, 1);
|
||||
font-size: 12px;
|
||||
color: rgba(57, 215, 187, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 悬浮窗底部4格子
|
||||
.light-tag-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
|
||||
.tag-box-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 120px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
.icon-item {
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.1s;
|
||||
}
|
||||
.icon-item:active {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
// 悬浮窗外部
|
||||
.light-tag {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
// 悬浮窗标题
|
||||
.light-tag-tit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
.tag-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.right-button {
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
background: rgba(57, 215, 187, 0.1);
|
||||
border: 1px solid rgba(57, 215, 187, 1);
|
||||
font-size: 12px;
|
||||
color: rgba(57, 215, 187, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 悬浮窗底部4格子
|
||||
.light-tag-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
.tag-box-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 120px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 13px;
|
||||
color: rgba(64, 255, 252, 1);
|
||||
}
|
||||
.result {
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
};
|
||||
}
|
||||
left: 60px;
|
||||
top: 13px;
|
||||
color: rgba(64, 255, 252, 1);
|
||||
}
|
||||
|
||||
.result {
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,15 +5,21 @@
|
||||
<div class="light-area">
|
||||
<div class="light-area-tab"></div>
|
||||
<span class="light-area-text"> 照明区域 </span>
|
||||
<button class="plan" :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" @click="togglePlan">
|
||||
<button
|
||||
class="plan"
|
||||
:class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
|
||||
@click="togglePlan">
|
||||
{{ isPlanEnabled ? '计划启用' : '计划禁用' }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- 照明区域按钮部分 -->
|
||||
<div class="area">
|
||||
<template v-if="!showAllButtonsArea">
|
||||
<button v-for="(button, index) in limitedButtons1" :key="index"
|
||||
:class="{ btn: true, selected: button.selected }" @click="changeArea(button)">
|
||||
<button
|
||||
v-for="(button, index) in limitedButtons1"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
@click="changeArea(button)">
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
@@ -21,7 +27,10 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
|
||||
<button
|
||||
v-for="(button, index) in props.treeData"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
@click="changeArea(button)">
|
||||
{{ button.name }}
|
||||
</button>
|
||||
@@ -37,13 +46,20 @@
|
||||
<div class="circuit-tab"></div>
|
||||
<span class="circuit-text">照明回路</span>
|
||||
<div class="btn2">
|
||||
<button class="openPlan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
|
||||
<button
|
||||
class="openPlan"
|
||||
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
|
||||
@click="togglePlan2">
|
||||
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
|
||||
</button>
|
||||
<a-switch v-model:checked="selectAllCheckbox" :disabled="singleSelection" :class="{
|
||||
'blue-background': selectAllCheckbox,
|
||||
'grey-background': !selectAllCheckbox,
|
||||
}" @change="toggleAllSelection" />
|
||||
<a-switch
|
||||
v-model:checked="selectAllCheckbox"
|
||||
:disabled="singleSelection"
|
||||
:class="{
|
||||
'blue-background': selectAllCheckbox,
|
||||
'grey-background': !selectAllCheckbox,
|
||||
}"
|
||||
@change="toggleAllSelection" />
|
||||
<button class="allBtn">全选</button>
|
||||
<button class="both" @click="selectAll">
|
||||
{{ singleSelection ? '多选' : '单选' }}
|
||||
@@ -52,8 +68,12 @@
|
||||
</div>
|
||||
<div class="btnArea">
|
||||
<template v-if="!showAllButtons">
|
||||
<button v-for="(button, index) in limitedButtons2" :key="index"
|
||||
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
|
||||
<button
|
||||
v-for="(button, index) in limitedButtons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
{{ button.name }}
|
||||
</button>
|
||||
@@ -62,8 +82,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="(button, index) in buttons2" :key="index"
|
||||
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
|
||||
<button
|
||||
v-for="(button, index) in buttons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
{{ button.name }}
|
||||
</button>
|
||||
@@ -81,10 +105,13 @@
|
||||
</div>
|
||||
<!-- 控制模式按钮部分 -->
|
||||
<div class="control-mode-btn-area" v-show="thisButton2.code">
|
||||
<button v-for="(button3, index) in controlMode" :key="index"
|
||||
class="btn"
|
||||
:disabled="button3.value!= 3"
|
||||
:class="{ selected: thisButton2.mode.value == button3.value }" @click="selectButton3(button3)">
|
||||
<button
|
||||
v-for="(button3, index) in controlMode"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:disabled="button3.value != 3"
|
||||
:class="{ selected: thisButton2.mode.value == button3.value }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.label }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -97,8 +124,11 @@
|
||||
</div>
|
||||
<!-- 控制场景按钮部分 -->
|
||||
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3">
|
||||
<button v-for="(button4, index) in controlScene" :key="index"
|
||||
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }" @click="selectButton4(button4)">
|
||||
<button
|
||||
v-for="(button4, index) in controlScene"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }"
|
||||
@click="selectButton4(button4)">
|
||||
{{ button4.label }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -106,12 +136,11 @@
|
||||
<!-- 底部按钮区 -->
|
||||
<div class="bottom">
|
||||
<a-popconfirm
|
||||
title="刷新将会取消已作出的修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="changeConfirm"
|
||||
@cancel="changeCancel"
|
||||
>
|
||||
title="刷新将会取消已作出的修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="changeConfirm"
|
||||
@cancel="changeCancel">
|
||||
<button class="flushed">刷新</button>
|
||||
</a-popconfirm>
|
||||
<button class="execute" @click="showModal">执行</button>
|
||||
@@ -129,7 +158,11 @@
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />
|
||||
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
|
||||
<span
|
||||
class="title-text"
|
||||
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
<button class="cxbtn" @click="delBtn(item.id)">撤销</button>
|
||||
</div>
|
||||
@@ -143,9 +176,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
亮度
|
||||
</div>
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<span>100lux</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
@@ -153,9 +184,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
控制场景
|
||||
</div>
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
@@ -163,9 +192,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
色温
|
||||
</div>
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>4000k</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
@@ -176,7 +203,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 60px;"></div>
|
||||
<div style="width: 100%; height: 60px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="executeVisible = false">取消</button>
|
||||
<button class="execute">执行</button>
|
||||
@@ -186,415 +213,415 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import {
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
StopOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
import { getAllEnum } from '/@/api/index'
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
import { getAllEnum } from '/@/api/index';
|
||||
|
||||
// 初始化 =========================================================================
|
||||
// 初始化 =========================================================================
|
||||
|
||||
onMounted(() => {
|
||||
// 默认选项
|
||||
setArea()
|
||||
// 获得枚举
|
||||
getEnum(['IlluminationMode', 'IlluminationScene'])
|
||||
})
|
||||
// 获得枚举
|
||||
const getEnum = (arr: any) => {
|
||||
getAllEnum({ params: arr }).then(res => {
|
||||
const data = res.data
|
||||
// 控制模式
|
||||
controlMode.value = data.IlluminationMode
|
||||
// 控制场景
|
||||
controlScene.value = data.IlluminationScene
|
||||
})
|
||||
}
|
||||
// 以 1-1 作为默认线路
|
||||
const setArea = () => {
|
||||
const data = props.treeData[0]
|
||||
buttons2.value = data.childList
|
||||
}
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
// 向上传递修改选择样式
|
||||
/**
|
||||
* @method changeArea 用于控制俯视图的选中状态
|
||||
* @method reset 用于重置按钮区
|
||||
*/
|
||||
const emit = defineEmits(['changeArea','reset']);
|
||||
|
||||
// 照明区域业务 =======================================================================
|
||||
|
||||
// 计划启用状态
|
||||
const isPlanEnabled = ref(false);
|
||||
// 计划启用切换事件
|
||||
const togglePlan = () => {
|
||||
isPlanEnabled.value = !isPlanEnabled.value;
|
||||
};
|
||||
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtonsArea = ref(false);
|
||||
// 被选中的分区 默认为1
|
||||
const selectedButton = ref<string | undefined>('1');
|
||||
|
||||
// 分区切换
|
||||
const changeArea = (button: any) => {
|
||||
// 当前选中按钮
|
||||
selectedButton.value = button.id;
|
||||
// 设置当前选中的线路
|
||||
buttons2.value = button.childList
|
||||
// 重置按钮状态
|
||||
emit('reset')
|
||||
// 设置选中按钮状态
|
||||
button.selected = true
|
||||
// 改变俯视图样式
|
||||
emit('changeArea', button.id);
|
||||
// 当前选中线路 - 置空
|
||||
resetMode()
|
||||
// 最近交互过的按钮 - 置空
|
||||
handleButton.value = ''
|
||||
};
|
||||
// 默认最多展示8个按钮
|
||||
const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
|
||||
|
||||
// 照明回路业务 ======================================================================
|
||||
|
||||
// 最近交互过的按钮id，用于禁用和启用
|
||||
const handleButton = ref('');
|
||||
|
||||
// 面板启用/禁用状态
|
||||
const isPlanEnabled2 = ref(true);
|
||||
// 面板启用/禁用切换事件
|
||||
const togglePlan2 = () => {
|
||||
// 如果未交互任何按钮
|
||||
if (handleButton.value == '') {
|
||||
return message.info('请选择照明回路');
|
||||
}
|
||||
// 获取最近交互过的按钮
|
||||
const btn: any = buttons2.value.find((button) => button.id === handleButton.value)
|
||||
let panel = +(!btn.ctrlStatus)
|
||||
isLoading.value = true
|
||||
http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => {
|
||||
if (res.msg === 'success') {
|
||||
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
|
||||
isPlanEnabled2.value = !isPlanEnabled2.value;
|
||||
btn.ctrlStatus = panel
|
||||
isLoading.value = false
|
||||
} else {
|
||||
isLoading.value = false
|
||||
}
|
||||
}).catch(() => { isLoading.value = false })
|
||||
};
|
||||
|
||||
// 是否单选，状态
|
||||
let singleSelection = ref(true);
|
||||
// 多选与单选切换事件
|
||||
const selectAll = () => {
|
||||
selectAllCheckbox.value = false
|
||||
buttons2.value.forEach((button) => {
|
||||
button.selected = false;
|
||||
onMounted(() => {
|
||||
// 默认选项
|
||||
setArea();
|
||||
// 获得枚举
|
||||
getEnum(['IlluminationMode', 'IlluminationScene']);
|
||||
});
|
||||
singleSelection.value = !singleSelection.value;
|
||||
// 当前选中线路 - 置空
|
||||
resetMode()
|
||||
// 改变俯视图样式
|
||||
emit('changeArea', [selectedButton.value])
|
||||
};
|
||||
|
||||
// 全选状态
|
||||
const selectAllCheckbox = ref(false);
|
||||
// 全选切换事件（switch）
|
||||
const toggleAllSelection = () => {
|
||||
let arr = [selectedButton.value]
|
||||
// 全选
|
||||
if (selectAllCheckbox.value) {
|
||||
buttons2.value.forEach((item, index) => {
|
||||
// 全选时，默认展示第一条线路的模式-场景按钮
|
||||
if (index == 0) {
|
||||
thisButton2.value = item
|
||||
}
|
||||
item.selected = true;
|
||||
arr.push(item.id)
|
||||
// 获得枚举
|
||||
const getEnum = (arr: any) => {
|
||||
getAllEnum({ params: arr }).then((res) => {
|
||||
const data = res.data;
|
||||
// 控制模式
|
||||
controlMode.value = data.IlluminationMode;
|
||||
// 控制场景
|
||||
controlScene.value = data.IlluminationScene;
|
||||
});
|
||||
// 全不选
|
||||
} else {
|
||||
buttons2.value.forEach((item) => {
|
||||
item.selected = false;
|
||||
});
|
||||
// 全不选时，隐藏模式-场景按钮
|
||||
resetMode()
|
||||
}
|
||||
emit('changeArea', arr)
|
||||
};
|
||||
};
|
||||
// 以 1-1 作为默认线路
|
||||
const setArea = () => {
|
||||
const data = props.treeData[0];
|
||||
buttons2.value = data.childList;
|
||||
};
|
||||
|
||||
// 储存当前选中的线路
|
||||
const thisButton2 = ref({
|
||||
code: '',
|
||||
mode: {
|
||||
value: -1
|
||||
},
|
||||
scene: {
|
||||
value: -1
|
||||
}
|
||||
})
|
||||
// 照明回路的按钮切换
|
||||
const changeLine = (button: any) => {
|
||||
// 存储一次按钮ID，用于禁用/启用交互
|
||||
handleButton.value = button.id
|
||||
// 根据按钮状态，展示禁用/启用按钮文本
|
||||
if (button.ctrlStatus) {
|
||||
isPlanEnabled2.value = true
|
||||
} else {
|
||||
isPlanEnabled2.value = false
|
||||
}
|
||||
// 与父组件的交互 ===================================================================
|
||||
|
||||
// 选择时反控俯视图
|
||||
let level1 = selectedButton.value
|
||||
let level2 = button.id
|
||||
// 单选模式，需将所有其他按钮设为false
|
||||
if (singleSelection.value) {
|
||||
buttons2.value.forEach(item => {
|
||||
item.selected = false;
|
||||
});
|
||||
button.selected = !button.selected;
|
||||
emit('changeArea', [level1, level2])
|
||||
} else {
|
||||
// 多选模式传值
|
||||
button.selected = !button.selected;
|
||||
const arr = [level1]
|
||||
buttons2.value.forEach(item => {
|
||||
if (item.selected) {
|
||||
arr.push(item.id)
|
||||
}
|
||||
});
|
||||
emit('changeArea', arr)
|
||||
}
|
||||
// 用于展示控制模式
|
||||
if (button.selected) {
|
||||
// 发生了选中事件
|
||||
thisButton2.value = button
|
||||
} else {
|
||||
// 未发生选中 或 多选的其中一个按钮被取消
|
||||
resetMode()
|
||||
}
|
||||
console.log(thisButton2,'button')
|
||||
};
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
// 向上传递修改选择样式
|
||||
/**
|
||||
* @method changeArea 用于控制俯视图的选中状态
|
||||
* @method reset 用于重置按钮区
|
||||
*/
|
||||
const emit = defineEmits(['changeArea', 'reset']);
|
||||
|
||||
// 照明回路所有按钮
|
||||
const buttons2 = ref([]);
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtons = ref(false);
|
||||
// 默认最多展示8个按钮
|
||||
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
|
||||
// 照明区域业务 =======================================================================
|
||||
|
||||
// 控制模式业务 ====================================================================
|
||||
// 计划启用状态
|
||||
const isPlanEnabled = ref(false);
|
||||
// 计划启用切换事件
|
||||
const togglePlan = () => {
|
||||
isPlanEnabled.value = !isPlanEnabled.value;
|
||||
};
|
||||
|
||||
// 控制模式 - 按钮切换
|
||||
const selectButton3 = (button3) => {
|
||||
let checked = thisButton2.value.mode
|
||||
console.log(button3.value,'---', checked.value)
|
||||
// 如果点击了相同的按钮，则未作出修改
|
||||
if (checked.value === button3.value) {
|
||||
return
|
||||
}
|
||||
checked.value = button3.value
|
||||
};
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtonsArea = ref(false);
|
||||
// 被选中的分区 默认为1
|
||||
const selectedButton = ref<string | undefined>('1');
|
||||
|
||||
// 控制场景业务 =====================================================================
|
||||
// 分区切换
|
||||
const changeArea = (button: any) => {
|
||||
// 当前选中按钮
|
||||
selectedButton.value = button.id;
|
||||
// 设置当前选中的线路
|
||||
buttons2.value = button.childList;
|
||||
// 重置按钮状态
|
||||
emit('reset');
|
||||
// 设置选中按钮状态
|
||||
button.selected = true;
|
||||
// 改变俯视图样式
|
||||
emit('changeArea', button.id);
|
||||
// 当前选中线路 - 置空
|
||||
resetMode();
|
||||
// 最近交互过的按钮 - 置空
|
||||
handleButton.value = '';
|
||||
};
|
||||
// 默认最多展示8个按钮
|
||||
const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
|
||||
|
||||
// 控制模式枚举
|
||||
const controlMode = ref([])
|
||||
// 场景枚举
|
||||
const controlScene = ref([])
|
||||
// 控制场景 - 当前选择按钮
|
||||
const selectedButton4 = ref(null);
|
||||
// 控制场景 - 按钮切换
|
||||
const selectButton4 = (button4) => {
|
||||
// 当前选中的线路数据
|
||||
const data = thisButton2.value
|
||||
// 修改前的数据
|
||||
let before = data.scene.value
|
||||
// 修改后的数据
|
||||
let after = button4.value
|
||||
// 如果没有产生实质性的修改（修改前后相同，则跳出）
|
||||
if (before === after) {
|
||||
return
|
||||
// 产生了修改
|
||||
} else {
|
||||
thisButton2.value.scene.value = after
|
||||
// 查询之前是否修改过
|
||||
const result = changeList.value.find((item, index) => {
|
||||
item.index = index
|
||||
return item.deviceGroup == data.code
|
||||
})
|
||||
// 如果已产生过修改
|
||||
if (result) {
|
||||
// 改回了原有的值，则从数组中移除
|
||||
if (after == result.before) {
|
||||
changeList.value.splice(result.index, 1)
|
||||
// 修改为新值，则只修改after
|
||||
} else {
|
||||
result.scene = after
|
||||
// 临时flag，用后移除
|
||||
delete result.index
|
||||
}
|
||||
// 如果未产生过修改
|
||||
} else {
|
||||
changeList.value.push({
|
||||
// 线路
|
||||
deviceGroup: data.code,
|
||||
deviceGroupName: data.name,
|
||||
// 分区
|
||||
region: data.pcode,
|
||||
regionName: '',
|
||||
// 修改前
|
||||
before: before,
|
||||
// 修改后
|
||||
scene: after
|
||||
// 照明回路业务 ======================================================================
|
||||
|
||||
// 最近交互过的按钮id，用于禁用和启用
|
||||
const handleButton = ref('');
|
||||
|
||||
// 面板启用/禁用状态
|
||||
const isPlanEnabled2 = ref(true);
|
||||
// 面板启用/禁用切换事件
|
||||
const togglePlan2 = () => {
|
||||
// 如果未交互任何按钮
|
||||
if (handleButton.value == '') {
|
||||
return message.info('请选择照明回路');
|
||||
}
|
||||
// 获取最近交互过的按钮
|
||||
const btn: any = buttons2.value.find((button) => button.id === handleButton.value);
|
||||
let panel = +!btn.ctrlStatus;
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(lightingManage.setDisable, { deviceGroup: btn.code, panel })
|
||||
.then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
|
||||
isPlanEnabled2.value = !isPlanEnabled2.value;
|
||||
btn.ctrlStatus = panel;
|
||||
isLoading.value = false;
|
||||
} else {
|
||||
isLoading.value = false;
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log(changeList.value, 'changeList')
|
||||
}
|
||||
|
||||
thisButton2.value.scene.value = after
|
||||
console.log(thisButton2,'222222')
|
||||
console.log(button4,'44444')
|
||||
};
|
||||
.catch(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 内侧弹窗 ========================================================================
|
||||
// 是否单选，状态
|
||||
let singleSelection = ref(true);
|
||||
// 多选与单选切换事件
|
||||
const selectAll = () => {
|
||||
selectAllCheckbox.value = false;
|
||||
buttons2.value.forEach((button) => {
|
||||
button.selected = false;
|
||||
});
|
||||
singleSelection.value = !singleSelection.value;
|
||||
// 当前选中线路 - 置空
|
||||
resetMode();
|
||||
// 改变俯视图样式
|
||||
emit('changeArea', [selectedButton.value]);
|
||||
};
|
||||
|
||||
// 需要修改的内容
|
||||
const changeList: any = ref([])
|
||||
// 需要向后端提交的修改内容
|
||||
const submitList = ref([])
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
//撤销
|
||||
const delBtn = () => {
|
||||
cxList.value.pop();
|
||||
console.log(cxList.value.length);
|
||||
|
||||
if (cxList.value.length === 0) {
|
||||
executeVisible.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 其他业务 ========================================================================
|
||||
|
||||
const isLoading = ref(false)
|
||||
// 刷新
|
||||
const refresh = () => {
|
||||
// 关闭执行弹窗
|
||||
executeVisible.value = false
|
||||
// 设置当前选中的序列
|
||||
selectedButton.value = '1';
|
||||
emit('changeArea', ['1']);
|
||||
emit('reset')
|
||||
let data = props.treeData[0]
|
||||
// 默认选中
|
||||
data.selected = true
|
||||
buttons2.value = data.childList
|
||||
selectedButton4.value = null;
|
||||
resetMode()
|
||||
};
|
||||
// 执行确认
|
||||
const executeVisible = ref<boolean>(false);
|
||||
const showModal = () => {
|
||||
http.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }).then(res => {
|
||||
if (res.msg === 'success') {
|
||||
isLoading.value = true
|
||||
console.log(res)
|
||||
// 全选状态
|
||||
const selectAllCheckbox = ref(false);
|
||||
// 全选切换事件（switch）
|
||||
const toggleAllSelection = () => {
|
||||
let arr = [selectedButton.value];
|
||||
// 全选
|
||||
if (selectAllCheckbox.value) {
|
||||
buttons2.value.forEach((item, index) => {
|
||||
// 全选时，默认展示第一条线路的模式-场景按钮
|
||||
if (index == 0) {
|
||||
thisButton2.value = item;
|
||||
}
|
||||
item.selected = true;
|
||||
arr.push(item.id);
|
||||
});
|
||||
// 全不选
|
||||
} else {
|
||||
isLoading.value = false
|
||||
buttons2.value.forEach((item) => {
|
||||
item.selected = false;
|
||||
});
|
||||
// 全不选时，隐藏模式-场景按钮
|
||||
resetMode();
|
||||
}
|
||||
})
|
||||
executeVisible.value = true;
|
||||
emit('changeArea', arr);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// 确定
|
||||
const changeConfirm = () => {
|
||||
refresh()
|
||||
}
|
||||
|
||||
// 取消
|
||||
const changeCancel = () => {
|
||||
}
|
||||
|
||||
// 将当前选择的线路置空
|
||||
const resetMode = () => {
|
||||
thisButton2.value = {
|
||||
// 储存当前选中的线路
|
||||
const thisButton2 = ref({
|
||||
code: '',
|
||||
mode: {
|
||||
value: -1
|
||||
value: -1,
|
||||
},
|
||||
scene: {
|
||||
value: -1
|
||||
value: -1,
|
||||
},
|
||||
});
|
||||
// 照明回路的按钮切换
|
||||
const changeLine = (button: any) => {
|
||||
// 存储一次按钮ID，用于禁用/启用交互
|
||||
handleButton.value = button.id;
|
||||
// 根据按钮状态，展示禁用/启用按钮文本
|
||||
if (button.ctrlStatus) {
|
||||
isPlanEnabled2.value = true;
|
||||
} else {
|
||||
isPlanEnabled2.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露
|
||||
defineExpose({
|
||||
// 分区切换
|
||||
changeArea,
|
||||
// 线路切换
|
||||
changeLine
|
||||
});
|
||||
// 选择时反控俯视图
|
||||
let level1 = selectedButton.value;
|
||||
let level2 = button.id;
|
||||
// 单选模式，需将所有其他按钮设为false
|
||||
if (singleSelection.value) {
|
||||
buttons2.value.forEach((item) => {
|
||||
item.selected = false;
|
||||
});
|
||||
button.selected = !button.selected;
|
||||
emit('changeArea', [level1, level2]);
|
||||
} else {
|
||||
// 多选模式传值
|
||||
button.selected = !button.selected;
|
||||
const arr = [level1];
|
||||
buttons2.value.forEach((item) => {
|
||||
if (item.selected) {
|
||||
arr.push(item.id);
|
||||
}
|
||||
});
|
||||
emit('changeArea', arr);
|
||||
}
|
||||
// 用于展示控制模式
|
||||
if (button.selected) {
|
||||
// 发生了选中事件
|
||||
thisButton2.value = button;
|
||||
} else {
|
||||
// 未发生选中 或 多选的其中一个按钮被取消
|
||||
resetMode();
|
||||
}
|
||||
console.log(thisButton2, 'button');
|
||||
};
|
||||
|
||||
// 照明回路所有按钮
|
||||
const buttons2 = ref([]);
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtons = ref(false);
|
||||
// 默认最多展示8个按钮
|
||||
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
|
||||
|
||||
// 控制模式业务 ====================================================================
|
||||
|
||||
// 控制模式 - 按钮切换
|
||||
const selectButton3 = (button3) => {
|
||||
let checked = thisButton2.value.mode;
|
||||
console.log(button3.value, '---', checked.value);
|
||||
// 如果点击了相同的按钮，则未作出修改
|
||||
if (checked.value === button3.value) {
|
||||
return;
|
||||
}
|
||||
checked.value = button3.value;
|
||||
};
|
||||
|
||||
// 控制场景业务 =====================================================================
|
||||
|
||||
// 控制模式枚举
|
||||
const controlMode = ref([]);
|
||||
// 场景枚举
|
||||
const controlScene = ref([]);
|
||||
// 控制场景 - 当前选择按钮
|
||||
const selectedButton4 = ref(null);
|
||||
// 控制场景 - 按钮切换
|
||||
const selectButton4 = (button4) => {
|
||||
// 当前选中的线路数据
|
||||
const data = thisButton2.value;
|
||||
// 修改前的数据
|
||||
let before = data.scene.value;
|
||||
// 修改后的数据
|
||||
let after = button4.value;
|
||||
// 如果没有产生实质性的修改（修改前后相同，则跳出）
|
||||
if (before === after) {
|
||||
return;
|
||||
// 产生了修改
|
||||
} else {
|
||||
thisButton2.value.scene.value = after;
|
||||
// 查询之前是否修改过
|
||||
const result = changeList.value.find((item, index) => {
|
||||
item.index = index;
|
||||
return item.deviceGroup == data.code;
|
||||
});
|
||||
// 如果已产生过修改
|
||||
if (result) {
|
||||
// 改回了原有的值，则从数组中移除
|
||||
if (after == result.before) {
|
||||
changeList.value.splice(result.index, 1);
|
||||
// 修改为新值，则只修改after
|
||||
} else {
|
||||
result.scene = after;
|
||||
// 临时flag，用后移除
|
||||
delete result.index;
|
||||
}
|
||||
// 如果未产生过修改
|
||||
} else {
|
||||
changeList.value.push({
|
||||
// 线路
|
||||
deviceGroup: data.code,
|
||||
deviceGroupName: data.name,
|
||||
// 分区
|
||||
region: data.pcode,
|
||||
regionName: '',
|
||||
// 修改前
|
||||
before: before,
|
||||
// 修改后
|
||||
scene: after,
|
||||
});
|
||||
}
|
||||
console.log(changeList.value, 'changeList');
|
||||
}
|
||||
|
||||
thisButton2.value.scene.value = after;
|
||||
console.log(thisButton2, '222222');
|
||||
console.log(button4, '44444');
|
||||
};
|
||||
|
||||
// 内侧弹窗 ========================================================================
|
||||
|
||||
// 需要修改的内容
|
||||
const changeList: any = ref([]);
|
||||
// 需要向后端提交的修改内容
|
||||
const submitList = ref([]);
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
//撤销
|
||||
const delBtn = () => {
|
||||
cxList.value.pop();
|
||||
console.log(cxList.value.length);
|
||||
|
||||
if (cxList.value.length === 0) {
|
||||
executeVisible.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 其他业务 ========================================================================
|
||||
|
||||
const isLoading = ref(false);
|
||||
// 刷新
|
||||
const refresh = () => {
|
||||
// 关闭执行弹窗
|
||||
executeVisible.value = false;
|
||||
// 设置当前选中的序列
|
||||
selectedButton.value = '1';
|
||||
emit('changeArea', ['1']);
|
||||
emit('reset');
|
||||
let data = props.treeData[0];
|
||||
// 默认选中
|
||||
data.selected = true;
|
||||
buttons2.value = data.childList;
|
||||
selectedButton4.value = null;
|
||||
resetMode();
|
||||
};
|
||||
// 执行确认
|
||||
const executeVisible = ref<boolean>(false);
|
||||
const showModal = () => {
|
||||
http
|
||||
.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
|
||||
.then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
isLoading.value = true;
|
||||
console.log(res);
|
||||
} else {
|
||||
isLoading.value = false;
|
||||
}
|
||||
});
|
||||
executeVisible.value = true;
|
||||
};
|
||||
|
||||
// 确定
|
||||
const changeConfirm = () => {
|
||||
refresh();
|
||||
};
|
||||
|
||||
// 取消
|
||||
const changeCancel = () => {};
|
||||
|
||||
// 将当前选择的线路置空
|
||||
const resetMode = () => {
|
||||
thisButton2.value = {
|
||||
code: '',
|
||||
mode: {
|
||||
value: -1,
|
||||
},
|
||||
scene: {
|
||||
value: -1,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 暴露
|
||||
defineExpose({
|
||||
// 分区切换
|
||||
changeArea,
|
||||
// 线路切换
|
||||
changeLine,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./dialogStyle.less";
|
||||
@import "./tabs1.less";
|
||||
@import './dialogStyle.less';
|
||||
@import './tabs1.less';
|
||||
</style>
|
||||
|
||||
@@ -20,10 +20,10 @@
|
||||
<td v-if="row.planStatus == '2'">
|
||||
<button
|
||||
style="
|
||||
font-size: 12px;
|
||||
background: rgba(57, 215, 187, 0.1);
|
||||
color: rgb(57, 215, 187);
|
||||
border: 1px solid rgb(57, 215, 187);
|
||||
font-size: 12px;
|
||||
background: rgba(57, 215, 187, 0.1);
|
||||
color: rgb(57, 215, 187);
|
||||
border: 1px solid rgb(57, 215, 187);
|
||||
">
|
||||
已执行
|
||||
</button>
|
||||
@@ -31,10 +31,10 @@
|
||||
<td v-if="row.planStatus == '1'">
|
||||
<button
|
||||
style="
|
||||
font-size: 12px;
|
||||
background: rgba(243, 97, 99, 0.1);
|
||||
border: 1px solid rgba(243, 97, 99);
|
||||
color: rgba(243, 97, 99);
|
||||
font-size: 12px;
|
||||
background: rgba(243, 97, 99, 0.1);
|
||||
border: 1px solid rgba(243, 97, 99);
|
||||
color: rgba(243, 97, 99);
|
||||
">
|
||||
待执行
|
||||
</button>
|
||||
@@ -42,11 +42,10 @@
|
||||
<td>
|
||||
<div class="tabReboot" @click="restartPlan(row.id)">重启</div>
|
||||
<a-popconfirm
|
||||
title="此操作将永久删除该条数据"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="deletePlan(row.id)"
|
||||
>
|
||||
title="此操作将永久删除该条数据"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="deletePlan(row.id)">
|
||||
<div class="tabDelete">删除</div>
|
||||
</a-popconfirm>
|
||||
</td>
|
||||
@@ -70,7 +69,7 @@
|
||||
@search="handleSearch"
|
||||
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
|
||||
</div>
|
||||
<div style="width: 100%; height: 60px;"></div>
|
||||
<div style="width: 100%; height: 60px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="addVisible = false">取消</button>
|
||||
<button class="execute" @click="sendPlan">确定</button>
|
||||
@@ -79,175 +78,171 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
// 初始化 ===========================================================
|
||||
// 初始化 ===========================================================
|
||||
|
||||
onMounted(() => {
|
||||
// 计划表格
|
||||
getTable()
|
||||
// 穿梭框原始数据
|
||||
getLeftPlan()
|
||||
})
|
||||
onMounted(() => {
|
||||
// 计划表格
|
||||
getTable();
|
||||
// 穿梭框原始数据
|
||||
getLeftPlan();
|
||||
});
|
||||
|
||||
// tab页部分 ========================================================
|
||||
// tab页部分 ========================================================
|
||||
|
||||
// 表格数据
|
||||
const dataSource = ref([]);
|
||||
// 获得表格数据
|
||||
const getTable = () => {
|
||||
http.get(lightingManage.getPlanTable, {}).then(res => {
|
||||
dataSource.value = res.data
|
||||
})
|
||||
}
|
||||
// 删除表格中的计划
|
||||
const deletePlan = (id: String) => {
|
||||
http.delete(lightingManage.deletePlan, [id]).then(() => {
|
||||
message.success('操作成功')
|
||||
getTable()
|
||||
})
|
||||
}
|
||||
// 重启表格中的计划
|
||||
const restartPlan = (id: String) => {
|
||||
http.post(lightingManage.restartPlan, { planId: id }).then(() => {
|
||||
message.success('操作成功')
|
||||
getTable()
|
||||
})
|
||||
}
|
||||
// 表格数据
|
||||
const dataSource = ref([]);
|
||||
// 获得表格数据
|
||||
const getTable = () => {
|
||||
http.get(lightingManage.getPlanTable, {}).then((res) => {
|
||||
dataSource.value = res.data;
|
||||
});
|
||||
};
|
||||
// 删除表格中的计划
|
||||
const deletePlan = (id: String) => {
|
||||
http.delete(lightingManage.deletePlan, [id]).then(() => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
});
|
||||
};
|
||||
// 重启表格中的计划
|
||||
const restartPlan = (id: String) => {
|
||||
http.post(lightingManage.restartPlan, { planId: id }).then(() => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
});
|
||||
};
|
||||
|
||||
// tab页弹窗部分 ====================================================
|
||||
// tab页弹窗部分 ====================================================
|
||||
|
||||
// 添加弹窗控制变量
|
||||
const addVisible = ref(false);
|
||||
// 打开弹窗
|
||||
const addModal = () => {
|
||||
addVisible.value = true;
|
||||
};
|
||||
// 添加弹窗控制变量
|
||||
const addVisible = ref(false);
|
||||
// 打开弹窗
|
||||
const addModal = () => {
|
||||
addVisible.value = true;
|
||||
};
|
||||
|
||||
// 穿梭框部分 =======================================================
|
||||
// 穿梭框部分 =======================================================
|
||||
|
||||
// 穿梭框数据
|
||||
const transferData = ref([]) as any;
|
||||
// 获得穿梭框原始数据
|
||||
const getLeftPlan = () => {
|
||||
http.get(lightingManage.getLeftPlan, {}).then(res => {
|
||||
let arr = []
|
||||
res.data.forEach((item: any) => {
|
||||
arr.push({
|
||||
key: item.id,
|
||||
title: item.planName
|
||||
})
|
||||
})
|
||||
transferData.value = arr
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
||||
console.log(keys, direction, moveKeys);
|
||||
};
|
||||
const handleSearch = (dir: string, value: string) => {
|
||||
console.log('search:', dir, value);
|
||||
};
|
||||
// 穿梭框选中数据
|
||||
const targetKeys = ref<string[]>([]);
|
||||
// 将穿梭框选中的计划提交
|
||||
const sendPlan = () => {
|
||||
if (targetKeys.value.length < 1) {
|
||||
return message.info('没有选择任何计划');
|
||||
}
|
||||
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
|
||||
message.success('添加成功')
|
||||
// 如果发送成功，则刷新表格
|
||||
getTable()
|
||||
getLeftPlan()
|
||||
})
|
||||
}
|
||||
|
||||
const filterOption = (inputValue: string, option: any) => {
|
||||
return option.description.indexOf(inputValue) > -1;
|
||||
};
|
||||
// 穿梭框数据
|
||||
const transferData = ref([]) as any;
|
||||
// 获得穿梭框原始数据
|
||||
const getLeftPlan = () => {
|
||||
http.get(lightingManage.getLeftPlan, {}).then((res) => {
|
||||
let arr = [];
|
||||
res.data.forEach((item: any) => {
|
||||
arr.push({
|
||||
key: item.id,
|
||||
title: item.planName,
|
||||
});
|
||||
});
|
||||
transferData.value = arr;
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
||||
console.log(keys, direction, moveKeys);
|
||||
};
|
||||
const handleSearch = (dir: string, value: string) => {
|
||||
console.log('search:', dir, value);
|
||||
};
|
||||
// 穿梭框选中数据
|
||||
const targetKeys = ref<string[]>([]);
|
||||
// 将穿梭框选中的计划提交
|
||||
const sendPlan = () => {
|
||||
if (targetKeys.value.length < 1) {
|
||||
return message.info('没有选择任何计划');
|
||||
}
|
||||
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
|
||||
message.success('添加成功');
|
||||
// 如果发送成功，则刷新表格
|
||||
getTable();
|
||||
getLeftPlan();
|
||||
});
|
||||
};
|
||||
|
||||
const filterOption = (inputValue: string, option: any) => {
|
||||
return option.description.indexOf(inputValue) > -1;
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./dialogStyle.less";
|
||||
@import './dialogStyle.less';
|
||||
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
.add {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: rgba(67, 136, 251, 1);
|
||||
border: rgba(67, 136, 251, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
.add {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: rgba(67, 136, 251, 1);
|
||||
border: rgba(67, 136, 251, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// 表格
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// 表格
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
border: 1px solid rgba(163, 192, 243, 1);
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.table1 {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
// 表格中的操作按钮
|
||||
.tabReboot,
|
||||
.tabDelete {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
color: rgba(67, 136, 251, 1);
|
||||
cursor: pointer;
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
border: 1px solid rgba(163, 192, 243, 1);
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.tabReboot {
|
||||
margin-right: 8px;
|
||||
.table1 {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
// 表格中的操作按钮
|
||||
.tabReboot,
|
||||
.tabDelete {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
color: rgba(67, 136, 251, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.tabReboot {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tabReboot::active {
|
||||
color: white !important;
|
||||
}
|
||||
.tabDelete::active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.tabReboot::active {
|
||||
color: white !important;
|
||||
::v-deep(.ant-transfer) {
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
.tabDelete::active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
::v-deep(.ant-transfer) {
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)"
|
||||
<tr
|
||||
v-for="(row, index) in dataSource1"
|
||||
:key="index"
|
||||
@click="handleRowClick(row.key)"
|
||||
:class="row.key === trIndex ? 'isTrIndex' : ''">
|
||||
<td>{{ row.key }}</td>
|
||||
<td>{{ row.data }}</td>
|
||||
@@ -19,7 +22,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="out-dialog" :class="{ 'showDialog' : logModalVisible }" v-if="logModalVisible">
|
||||
<div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
|
||||
<div class="content" v-if="logModalVisible">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
@@ -30,7 +33,11 @@
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />
|
||||
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
|
||||
<span
|
||||
class="title-text"
|
||||
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
@@ -43,9 +50,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
亮度
|
||||
</div>
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<span>100lux</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
@@ -53,9 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
控制场景
|
||||
</div>
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
@@ -63,9 +66,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left">
|
||||
色温
|
||||
</div>
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>4000k</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
@@ -76,7 +77,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 60px;"></div>
|
||||
<div style="height: 60px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="logModalVisible = false">取消</button>
|
||||
</div>
|
||||
@@ -87,169 +88,164 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['changeArea']);
|
||||
|
||||
// 表格数据
|
||||
const dataSource1 = ref([
|
||||
{
|
||||
key: '1',
|
||||
data: '2024-05-01',
|
||||
planName: '计划再开',
|
||||
status: '张三111',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
data: '2024-05-01',
|
||||
planName: '检修模式',
|
||||
status: '李四12',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
data: '2024-05-01',
|
||||
planName: '设备变更',
|
||||
status: '王五33',
|
||||
},
|
||||
]);
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
let trIndex = ref('-1');
|
||||
const logModalVisible = ref(false);
|
||||
const handleRowClick = (index: any) => {
|
||||
trIndex.value = index;
|
||||
if (index === trIndex.value) {
|
||||
console.log('tri');
|
||||
}
|
||||
// 显示模态框
|
||||
logModalVisible.value = true;
|
||||
};
|
||||
// 初始化
|
||||
onMounted(() => {});
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['changeArea']);
|
||||
|
||||
// 表格数据
|
||||
const dataSource1 = ref([
|
||||
{
|
||||
key: '1',
|
||||
data: '2024-05-01',
|
||||
planName: '计划再开',
|
||||
status: '张三111',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
data: '2024-05-01',
|
||||
planName: '检修模式',
|
||||
status: '李四12',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
data: '2024-05-01',
|
||||
planName: '设备变更',
|
||||
status: '王五33',
|
||||
},
|
||||
]);
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
let trIndex = ref('-1');
|
||||
const logModalVisible = ref(false);
|
||||
const handleRowClick = (index: any) => {
|
||||
trIndex.value = index;
|
||||
if (index === trIndex.value) {
|
||||
console.log('tri');
|
||||
}
|
||||
// 显示模态框
|
||||
logModalVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./dialogStyle.less";
|
||||
@import './dialogStyle.less';
|
||||
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
.add {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: rgba(67, 136, 251, 1);
|
||||
border: rgba(67, 136, 251, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
.add {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: rgba(67, 136, 251, 1);
|
||||
border: rgba(67, 136, 251, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
border: 1px solid rgba(163, 192, 243, 1);
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table1 {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.tabReboot,
|
||||
.tabDelete {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
color: rgba(67, 136, 251, 1);
|
||||
}
|
||||
|
||||
.tabReboot {
|
||||
margin-right: 8px;
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
border: 1px solid rgba(163, 192, 243, 1);
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.isTrIndex {
|
||||
background: rgba(67, 136, 251, 1);
|
||||
}
|
||||
}
|
||||
.table1 {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
::v-deep(.ant-transfer) {
|
||||
.tabReboot,
|
||||
.tabDelete {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
color: rgba(67, 136, 251, 1);
|
||||
}
|
||||
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
.tabReboot {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.isTrIndex {
|
||||
background: rgba(67, 136, 251, 1);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.ant-transfer) {
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user