Browse Source

add:增加照明系统前端交互

temp
chenpingsen 4 months ago
parent
commit
3598e3d887
  1. 141
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
  2. 1108
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
  3. 156
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less
  4. 50
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
  5. 15
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue
  6. 421
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
  7. 216
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
  8. 255
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue

141
hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less

@ -0,0 +1,141 @@
.out-dialog {
position: fixed;
right: 496px;
width: 500px;
height: 100%;
top: 0;
bottom: 0;
margin: auto;
box-sizing: border-box;
color: rgb(255, 83, 0);
background: black;
display: flex;
padding: 25px;
flex-direction: column;
.content {
overflow-y: scroll;
.div-operation {
display: inline-block;
width: 3px;
height: 13px;
opacity: 1;
border-radius: 1px;
background: rgba(67, 136, 251, 1);
}
.text-operation {
display: inline-block;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-weight: 700;
margin-left: 5px;
}
.j-box {
background-color: #000;
opacity: 1;
z-index: 99999;
overflow-y: scroll;
.journal {
padding: 1% 3%;
width: 100%;
height: 150px;
background-color: rgba(0, 0, 0);
border-radius: 12px;
border: 2px solid transparent;
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
}
.imgText {
display: flex;
align-items: center;
justify-content: space-between;
.ztzm {
display: flex;
align-items: center;
}
.cxbtn {
color: rgba(255, 255, 255, 1);
border: none;
border-radius: 6px;
width: 59.79px;
height: 32px;
opacity: 1;
background: linear-gradient(
180deg,
rgba(255, 187, 0, 1) 0%,
rgba(255, 112, 3, 1) 91.21%,
rgba(255, 129, 3, 1) 100%
);
}
}
.btn-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-row-gap: 15px;
.btn-item {
text-align: center;
display: flex;
align-content: space-between;
.left {
width: 70px;
height: 35px;
line-height: 35px;
border-radius: 4px;
background: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
);
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
}
.right {
width: 140px;
height: 35px;
line-height: 35px;
span {
vertical-align: middle;
}
img {
padding: 0 5px;
}
}
}
}
}
}
.button-box {
width: 100%;
box-sizing: border-box;
padding: 10px;
height: 60px;
position: absolute;
background-color: transparent;
bottom: 0;
left: 0;
right: 0;
.execute, .cancel {
margin-right: 10px;
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
border: 0;
margin-left: 10px;
}
.execute {
background: rgb(67, 136, 251);
color: white;
}
.cancel {
background: white;
color: black;
}
}
}

1108
hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less

File diff suppressed because it is too large

156
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less

@ -1,156 +0,0 @@
// 页面容器
.lighting-box {
// width: 100%;
// height: 100%;
position: relative;
// background: linear-gradient(#badaff, #8cabeb, #7095de);
// 照明设备功能总容器
.lighting-img-box {
position: relative;
width: 1280px;
height: 720px;
user-select: none;
background-image: url(../image/bg.jpg);
// 由于背景是俯视图,会产生有交点的透视效果,故使用透视属性
perspective: 1000px;
perspective-origin: 850px -160px;
// 左上角区域切换功能
.btn-box {
width: 120px;
position: sticky;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
gap: 8px;
.btn-item {
cursor: pointer;
width: 100%;
height: 40px;
border-radius: 4px;
background: rgba(39, 120, 255, 1);
border: 1px solid rgba(51, 199, 255, 1);
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
font-size: 18px;
color: white;
}
.btn-item:hover {
color: black;
}
}
// 大区分区
.area{
position: absolute;
bottom: 170px;
left: 240px;
width: 780px;
height: 240px;
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
display: flex;
gap: 8px;
.area1 {
width: 170px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area2 {
width: 240px;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area3 {
width: 110px;
background: rgba(255, 0, 0, 0.3);
border: 2px solid rgb(255, 0, 0);
}
.area4 {
flex: 1;
background: rgba(80, 236, 244, 0.3);
border: 2px solid rgb(80, 236, 244);
}
// .area-item:hover {
// transform: scale(1.05);
// }
.area-item {
cursor: pointer;
transition: all ease 0.2s;
>.light-group {
height: 100%;
flex: 1;
display:flex;
justify-content: center;
align-items: center;
.group-shadow1 {
width: 35px;
height: 150px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow2 {
width: 35px;
height: 180px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow3 {
width: 40px;
height: 180px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow4 {
width: 40px;
height: 160px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
}
// .group-shadow {
// transition: all ease 0.2s;
// }
// .group-shadow:hover {
// transform: scale(1.05);
// }
}
}
}
}
// 总容器与抽屉按钮
.ns-content-main {
position: relative;
// 抽屉打开按钮
.drawer-box-in {
width: 30px;
height: 40px;
border-radius: 2px;
position: fixed;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: rgba(0, 0 ,0 ,0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
// 抽屉关闭按钮
.drawer-box-out {
width: 30px;
height: 40px;
border-radius: 2px;
position: fixed;
right: 496px;
top: 0;
bottom: 0;
margin: auto;
background: rgba(0, 0 ,0 ,0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
}

50
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@ -3,19 +3,19 @@
<div class="lighting-img-box">
<!-- 左上角区域切换 -->
<div class="btn-box">
<button class="btn-item">1F</button>
<button class="btn-item">2F</button>
<button class="btn-item">站台</button>
<button class="btn-item" @click=changeArea(1)>1F</button>
<button class="btn-item" @click=changeArea(2)>2F</button>
<button class="btn-item" @click=changeArea(3)>站台</button>
</div>
<!-- 楼层区域 -->
<div class="area">
<div
v-for="(item, index) in treeData"
:class="computedClass(item.id)"
@click="getArea(item.id)"
:class="computedClass(String(item.id))"
@click="getArea(item)"
:key="index">
<div v-for="(v, i) in item.children" :key="i" class="light-group">
<div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v.id)"></div>
<div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v)"></div>
</div>
</div>
</div>
@ -40,16 +40,18 @@
placement="right"
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
:closable="false"
id="Odrawer"
id="drawer"
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板">
<tabs1 @changeArea="getArea" :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-tab-pane key="3" tab="日志"></a-tab-pane>
</a-tabs>
</a-drawer>
</div>
@ -61,15 +63,17 @@ import { ref } from 'vue';
import { treeData } from './treeData'
import light from './light.vue';
import tabs1 from './tabs1.vue'
import tabs2 from './tabs2.vue'
import tabs3 from './tabs3.vue'
// ICON
import {
DoubleLeftOutlined,
DoubleRightOutlined
} from '@ant-design/icons-vue';
// - -
let area = ref(['1'])
// -
// - -
const area = ref(['1'])
// - -
const bulbs = ref([
{
styleText: { left: '190px', bottom: '200px' },
@ -121,6 +125,16 @@ const bulbs = ref([
},
])
// -
const changeArea = (area: number) => {
if (area == 1) {
console.log('1F')
} else if (area == 2) {
console.log('2F')
} else if (area == 3) {
console.log('站台')
}
}
// -
const getArea = (result: any) => {
//
@ -132,16 +146,14 @@ const getArea = (result: any) => {
area.value[0] = String(result)
}
}
// -
// -
const computedClass = (number: number) => {
if (area.value.indexOf(number) != -1) {
return `isActive area-item area${number}`
const computedClass = (string: string) => {
if (area.value.indexOf(string) != -1) {
return `isActive area-item area${string}`
} else {
return `area-item area${number}`
return `area-item area${string}`
}
}
// - tab
let activeKey = ref('1');
// -
@ -153,7 +165,7 @@ const toggleDrawer = () => {
</script>
<style lang="less" scoped>
@import "./indexs.less";
@import "./index.less";
.isActive {
border: 3px solid white !important;
}

15
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue

@ -1162,16 +1162,11 @@
selectedButton.value = null;
showControlMode.value = false;
showControlScene.value = false;
selectedButton3.value = null;
selectedButton4.value = null;
selectedButton3.value = '';
selectedButton4.value = '';
};
//
const logModalVisible = ref(false);
const handlerefClick1 = () => {
console.log(1111);
executevisible.value = true;
};
let trindex = ref('-1');
const handleRowClick = (index: any) => {
@ -1192,9 +1187,7 @@
};
//
const addvisible = ref<boolean>(false);
const addModal = () => {
addvisible.value = true;
};
// 穿
interface MockData {
key: string;

421
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

@ -12,7 +12,7 @@
<div class="area">
<template v-if="!showAllButtonsArea">
<button v-for="(button, index) in limitedButtons1" :key="index"
:class="{ btn: true, selected: button.selected }" @click="selectButton(button, index)">
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
{{ button.label }}
</button>
<div style="margin-top: 10px">
@ -20,8 +20,8 @@
</div>
</template>
<template v-else>
<button v-for="(button, index) in props.treeData" :key="index"
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
@click="selectButton(button)">
{{ button.label }}
</button>
<div style="margin-top: 10px">
@ -36,7 +36,7 @@
<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="{
@ -49,7 +49,7 @@
</button>
</div>
</div>
<div class="btnarea" v-if="selectedButton">
<div class="btnArea" v-if="selectedButton">
<template v-if="!showAllButtons">
<button v-for="(button2, index) in limitedButtons2" :key="index"
:class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
@ -80,7 +80,7 @@
<!-- 控制模式按钮部分 -->
<div class="control-mode-btn-area" v-show="showControlMode">
<button v-for="(button3, index) in controlType" :key="index"
:class="{ btn: true, selected: button3.type === thisButtonType }" @click="selectButton3(button3)">
:class="{ btn: true, selected: button3.type == thisButton.type }" @click="selectButton3(button3)">
{{ button3.name }}
</button>
</div>
@ -119,7 +119,7 @@
:style="{ height: '50px' }">
<td>{{ row.num }}</td>
<td>{{ row.light }}</td>
<td>{{ row.tempruter }}</td>
<td>{{ row.temperature }}</td>
</tr>
</tbody>
</table>
@ -130,170 +130,71 @@
<button class="flushed" @click="refresh">刷新</button>
<button class="execute" @click="showModal">执行</button>
</div>
<!-- <a-modal :v-if="cxlist.length === 0" v-model:visible="executevisible" width="500px" height="792px" okText="执行"
:closable="false" @ok="handleOk2" :mask="false" :bodyStyle="{
opacity: 1,
background: ' rgba(0,0,0)',
color: 'rgba(255,83,0)',
boxSizing: 'borderBox',
display: 'flex',
flexDirection: 'column',
position: 'fixed',
right: '496px',
top: '0',
}">
<div :v-if="cxlist.length === 0" style="height: 792px">
<div class="out-dialog" v-if="executeVisible">
<div class="content" v-if="executeVisible">
<div>
<div class="div-operation"></div>
<span class="text-operation">变更内容 </span>
</div>
<div class="jbox" v-for="item in cxlist" :key="item.id">
<div class="j-box" v-for="item in cxList" :key="item.id">
<div class="journal" style="margin-top: 20px">
<div class="imgText">
<div class="zjzm">
<img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
<span class="titletext" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
item.name }}</span>
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
<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>
<button class="cxbtn" @click="delBtn(item.id)">撤销</button>
</div>
<div class="control-btn">
<button style="
width: 96px;
height: 40px;
border-radius: 4px;
background: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
);
border: 1px solid rgba(95, 154, 251, 1);
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
">
控制模式
</button>
<span style="
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
margin-left: 12px;
margin-right: 8px;
">手动</span>
<div class="btn-box">
<div class="btn-item">
<div class="left">控制模式</div>
<div class="right">
<span>手动</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span style="
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
margin-left: 8px;
margin-right: 40px;
">自动</span>
<span>自动</span>
</div>
<div class="light-btn">
<button style="
width: 68px;
height: 40px;
border-radius: 4px;
background: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
);
border: 1px solid rgba(95, 154, 251, 1);
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
">
</div>
<div class="btn-item">
<div class="left">
亮度
</button>
<span style="
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
margin-left: 12px;
margin-right: 8px;
">100lux</span>
</div>
<div class="right">
<span>100lux</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span style="
color: rgba(243, 97, 99, 1);
font-size: 14px;
font-weight: 400;
margin-left: 8px;
">30lux</span>
<span>30lux</span>
</div>
<div class="control-area-btn">
<button style="
width: 96px;
height: 40px;
border-radius: 4px;
background: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
);
border: 1px solid rgba(95, 154, 251, 1);
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
">
</div>
<div class="btn-item">
<div class="left">
控制场景
</button>
<span style="
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
margin-left: 12px;
margin-right: 8px;
">手动</span>
</div>
<div class="right">
<span>手动</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span style="
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
margin-left: 8px;
margin-right: 40px;
">自动</span>
<span>自动</span>
</div>
<div class="temp-btn">
<button style="
width: 68px;
height: 40px;
border-radius: 4px;
background: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
);
border: 1px solid rgba(95, 154, 251, 1);
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
">
</div>
<div class="btn-item">
<div class="left">
色温
</button>
<span style="
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
margin-left: 12px;
margin-right: 8px;
">4000k</span>
</div>
<div class="right">
<span>4000k</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span style="
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
margin-left: 8px;
">3800k</span>
<span>3800k</span>
</div>
</div>
</div>
</div>
</a-modal> -->
</div>
</div>
<div style="width: 100%; height: 60px;"></div>
<div class="button-box">
<button class="cancel" @click="executeVisible = false">取消</button>
<button class="execute">执行</button>
</div>
</div>
</template>
<script setup lang="ts">
@ -307,19 +208,23 @@ import {
//
onMounted(() => {
const tree = props.treeData
const data = props.treeData[0]
//
tree[0].selected = true
data.selected = true
//
buttons2.value = tree[0].children
buttons2.value = data.children
})
// ===================================================================
const props = defineProps({
// >
treeData: {
type: Array
type: Array,
default: []
},
line: {
type: Array
}
});
const emit = defineEmits(['changeArea']);
@ -336,20 +241,13 @@ const togglePlan = () => {
const showAllButtonsArea = ref(false);
// - - 1
const selectedButton = ref('1');
// -
const selectButton = (button: any, index: number) => {
// - -
const selectButton = (button: any) => {
//
selectedButton.value = button;
//
props.treeData.forEach(item => {
item.selected = false
})
//
initMenu(1)
button.selected = true
// 1
buttons2.value.forEach(item => {
item.selected = false
})
showControlMode.value = false
buttons2.value = button.children
// area
emit('changeArea', []);
@ -375,16 +273,7 @@ const togglePlan2 = () => {
isPlanEnabled2.value = !isPlanEnabled2.value;
// -
if (isPlanEnabled2.value) {
item.selected = false;
item.stop = true
let level1 = String(selectedButton.value.id)
let arr = [level1]
buttons2.value.forEach(item => {
if (item.selected) {
arr.push(item.id)
}
})
emit('changeArea', arr)
// -
} else {
item.stop = false
@ -410,10 +299,8 @@ const toggleAllSelection = () => {
//
if (selectAllCheckbox.value) {
buttons2.value.forEach((item) => {
if (!item.stop) {
item.selected = true;
arr.push(item.id)
}
});
//
} else {
@ -431,7 +318,7 @@ const toggleSelection = (button: any) => {
zmhlid.value = button.id
// /
if (button.stop) {
return isPlanEnabled2.value = true
isPlanEnabled2.value = true
} else {
isPlanEnabled2.value = false
}
@ -455,17 +342,22 @@ const toggleSelection = (button: any) => {
arr.push(item.id)
}
});
console.log(arr)
emit('changeArea', arr)
}
//
if (button.selected) {
//
showControlMode.value = true
thisButtonType.value = button.type
thisButton.value = button
if (button.type == 3) {
showControlScene.value = true
} else {
showControlScene.value = false
}
} else {
//
showControlMode.value = false
thisButton.value = null
thisButton.value = { type: '0' }
}
};
@ -479,16 +371,12 @@ const buttons2 = ref([]);
// =======================================================================
// -
const showControlMode = ref(false);
const thisButtonType = ref(null)
const thisButton = ref(null)
// -
const selectedButton3 = ref('');
const thisButton = ref({ type: '0' })
// -
const selectButton3 = (button3) => {
thisButton.value.type = button3.type
thisButtonType.value = button3.type
showControlScene.value = button3.name === '手动';
selectedButton4.value = ''; //
selectedButton4.value = null; //
};
// =======================================================================
@ -502,7 +390,7 @@ const controlSceneButtons = ref([
{ label: '客流高峰', selected: false },
]);
// -
const selectedButton4 = ref('');
const selectedButton4 = ref(null);
// -
const selectButton4 = (button4) => {
selectedButton4.value = button4.label;
@ -510,33 +398,112 @@ const selectButton4 = (button4) => {
// ========================================================================
// -
const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
let trIndex = ref('-1');
const handleRowClick = (index: any) => {
trindex.value = index;
if (index === trindex.value) {
trIndex.value = index;
if (index === trIndex.value) {
console.log('tri');
}
//
logModalVisible.value = true;
};
};
// ========================================================================
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 cxList = cxList.value.concat(cxList.value)
//
const delBtn = (id: any) => {
console.log(id);
cxList.value.pop(id);
console.log(cxList.value.length);
// ========================================================================
if (cxList.value.length === 0) {
executeVisible.value = false;
}
};
// ========================================================================
// 5
const initMenu = (tier: number) => {
// 1 = -
if (tier == 1) {
//
buttons2.value.forEach(item => {
item.selected = false
})
//
props.treeData.forEach(item => {
item.selected = false
})
//
showControlMode.value = false;
//
showControlScene.value = false;
//
selectedButton4.value = null;
} else if (tier == 2) {
//
showControlScene.value = false;
//
selectedButton4.value = null;
}
}
//
const refresh = () => {
selectedButton.value = {};
executeVisible.value = false
selectedButton.value = '1';
emit('changeArea', []);
emit('changeArea', [1]);
showControlMode.value = false;
showControlScene.value = false;
selectedButton3.value = null;
selectedButton4.value = null;
};
//
const executevisible = ref<boolean>(false);
const showModal = () => {
executevisible.value = true;
};
const executeVisible = ref<boolean>(false);
const showModal = () => {
executeVisible.value = true;
};
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";
//
.drawer-item {
@ -614,7 +581,7 @@ const executevisible = ref<boolean>(false);
cursor: not-allowed;
}
.openplan.enabled2 {
.openPlan.enabled2 {
border: none;
font-size: 14px;
font-weight: 400;
@ -627,7 +594,7 @@ const executevisible = ref<boolean>(false);
color: white;
}
.openplan.disabled2 {
.openPlan.disabled2 {
border: none;
font-size: 14px;
font-weight: 400;
@ -639,7 +606,7 @@ const executevisible = ref<boolean>(false);
background-color: red;
}
.openplan:disabled {
.openPlan:disabled {
cursor: not-allowed;
}
@ -714,7 +681,7 @@ const executevisible = ref<boolean>(false);
}
.area,
.btnarea,
.btnArea,
.control-mode-btn-area,
.control-scene-btn-area {
margin-left: -17px;
@ -828,7 +795,6 @@ const executevisible = ref<boolean>(false);
position: fixed;
bottom: 0;
right: 0;
margin-bottom: 10px;
}
.execute {
@ -836,6 +802,7 @@ const executevisible = ref<boolean>(false);
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
background: rgba(67, 136, 251, 1);
font-size: 14px;
@ -848,6 +815,7 @@ const executevisible = ref<boolean>(false);
.flushed {
width: 74px;
height: 40px;
cursor: pointer;
opacity: 1;
border-radius: 4px;
font-size: 14px;
@ -857,50 +825,6 @@ const executevisible = ref<boolean>(false);
border: 1px solid rgba(193, 197, 204, 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;
}
.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: white;
}
.divadd {
width: 100%;
height: 64px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-right: 20px;
}
.atable {
margin-top: 20px;
}
:deep(.ant-table-pagination) {
visibility: hidden;
}
@ -1006,9 +930,12 @@ const executevisible = ref<boolean>(false);
display: flex;
align-items: center;
}
.zmhlbtn {
position: relative;
}
//
.anticon-stop {
position: absolute;
right: 3px;

216
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

@ -0,0 +1,216 @@
<template>
<div class="div-add">
<button class="add" @click="addModal">添加</button>
</div>
<table class="custom-table table1">
<thead>
<tr :style="{ background: 'rgba(35,45,69)' }">
<th>序号</th>
<th>执行时间</th>
<th>计划名称</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in dataSource" :key="index">
<td>{{ row.key }}</td>
<td>{{ row.data }}</td>
<td>{{ row.planName }}</td>
<td v-if="row.status === '待执行'">
<button
style="
font-size: 12px;
background: rgba(57, 215, 187, 0.1);
color: rgb(57, 215, 187);
border: 1px solid rgb(57, 215, 187);
">
{{ row.status }}
</button>
</td>
<td v-if="row.status !== '待执行'">
<button
style="
font-size: 12px;
background: rgba(243, 97, 99, 0.1);
border: 1px solid rgba(243, 97, 99);
color: rgba(243, 97, 99);
">
{{ row.status }}
</button>
</td>
<td>
<button class="tabReboot" @click="handleRefClick1">重启</button>
<button class="tabDelete">删除</button>
</td>
</tr>
</tbody>
</table>
<div class="out-dialog" v-if="addVisible">
<div class="content" v-if="addVisible">
<div class="div-operation"></div>
<span class="text-operation">计划库</span>
</div>
<div style="margin-top: 20px">
<a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData"
show-search
:filter-option="filterOption"
:render="(item) => item.title"
@change="handleChange"
:style="{ color: 'rgba(255,255,255,1)' }"
@search="handleSearch"
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
</div>
<div style="width: 100%; height: 60px;"></div>
<div class="button-box">
<button class="cancel" @click="addVisible = false">取消</button>
<button class="execute">确定</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
//
onMounted(() => {
})
//
const dataSource = ref([
{
key: '1',
data: '2024-05-01',
planName: '劳动节',
status: '暂停中',
},
{
key: '2',
data: '2024-05-01',
planName: '国庆节',
status: '待执行',
},
{
key: '3',
data: '2024-05-01',
planName: '元旦',
status: '待执行',
},
]);
const addVisible = ref<boolean>(false);
//
const handleRefClick1 = () => {
alert(111)
};
const addModal = () => {
addVisible.value = true;
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
console.log(keys, direction, moveKeys);
};
const handleSearch = (dir: string, value: string) => {
console.log('search:', dir, value);
};
// 穿
interface MockData {
key: string;
title: string;
description: string;
chosen: boolean;
}
const mockData = ref([
{
key: '1',
title: '计划再开',
},
{
key: '2',
title: '检修模式',
},
{
key: '3',
title: '设备变更',
},
]);
const targetKeys = ref<string[]>([]);
const filterOption = (inputValue: string, option: MockData) => {
console.log(option.description);
return option.description.indexOf(inputValue) > -1;
};
</script>
<style lang="less" scoped>
@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;
color: rgba(255, 255, 255, 1);
}
}
//
.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;
}
}
::v-deep(.ant-transfer) {
// hover
.ant-transfer-list-content-item:hover {
background: black;
}
}
</style>

255
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue

@ -0,0 +1,255 @@
<template>
<table class="custom-table table1">
<thead>
<tr :style="{ background: 'rgba(35,45,69)' }">
<th>序号</th>
<th>执行时间</th>
<th>操作内容</th>
<th>操作人</th>
</tr>
</thead>
<tbody>
<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>
<td>{{ row.planName }}</td>
<td>{{ row.status }}</td>
</tr>
</tbody>
</table>
<div class="out-dialog" v-if="logModalVisible">
<div class="content" v-if="logModalVisible">
<div>
<div class="div-operation"></div>
<span class="text-operation">变更内容 </span>
</div>
<div class="jbox" v-for="item in cxList" :key="item.id">
<div class="journal" style="margin-top: 20px">
<div class="imgText">
<div class="zjzm">
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
<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">
<div class="btn-item">
<div class="left">控制模式</div>
<div class="right">
<span>手动</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>自动</span>
</div>
</div>
<div class="btn-item">
<div class="left">
亮度
</div>
<div class="right">
<span>100lux</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>30lux</span>
</div>
</div>
<div class="btn-item">
<div class="left">
控制场景
</div>
<div class="right">
<span>手动</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>自动</span>
</div>
</div>
<div class="btn-item">
<div class="left">
色温
</div>
<div class="right">
<span>4000k</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>3800k</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="height: 60px;"></div>
<div class="button-box">
<button class="cancel" @click="logModalVisible = false">取消</button>
</div>
</div>
<div class="div-add">
<button class="add">刷新</button>
</div>
</template>
<script setup lang="ts">
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;
};
</script>
<style lang="less" scoped>
@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;
color: rgba(255, 255, 255, 1);
}
}
//
.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;
}
.isTrIndex {
background: rgba(67, 136, 251, 1);
}
}
::v-deep(.ant-transfer) {
// hover
.ant-transfer-list-content-item:hover {
background: black;
}
}
</style>
Loading…
Cancel
Save