Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
20
hx-ai-intelligent/src/api/IlluminationInfo.ts
Normal file
20
hx-ai-intelligent/src/api/IlluminationInfo.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
|
||||||
|
// 照明系统及相关接口
|
||||||
|
export enum lightingManage {
|
||||||
|
|
||||||
|
// 主页 ========================================================
|
||||||
|
|
||||||
|
// 获得分区与线路
|
||||||
|
getArea = '/carbon-smart/IlluminationInfo/region',
|
||||||
|
// 修改线路的可用/禁用状态
|
||||||
|
setDisable = '/carbon-smart/IlluminationInfo/revisePanel',
|
||||||
|
|
||||||
|
// 计划列表tab页 ================================================
|
||||||
|
|
||||||
|
// 获得计划列表tab页的表格数据
|
||||||
|
getPlanTable = '/carbon-smart/IlluminationPlan/selectPanelPlan',
|
||||||
|
// 获得计划列表tab页的穿梭框左侧数据
|
||||||
|
getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan',
|
||||||
|
// 提交穿梭框被选择的数据
|
||||||
|
submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan',
|
||||||
|
}
|
@@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<ns-modal
|
<ns-modal
|
||||||
ref="modalRef"
|
ref="modalRef"
|
||||||
centered
|
|
||||||
v-bind="extraModalConfig"
|
v-bind="extraModalConfig"
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
v-model:visible="visible"
|
v-model:visible="visible"
|
||||||
|
@@ -52,7 +52,7 @@ export const appConfig = {
|
|||||||
sessionStorage.setItem('ORGID', record.orgId);
|
sessionStorage.setItem('ORGID', record.orgId);
|
||||||
const res = await configStore.userResource({ data: record });
|
const res = await configStore.userResource({ data: record });
|
||||||
useAuthorization.updateUserResource(res.data);
|
useAuthorization.updateUserResource(res.data);
|
||||||
|
window.location.reload();
|
||||||
// value.value = cur;
|
// value.value = cur;
|
||||||
},
|
},
|
||||||
resultField: 'data.linkList',
|
resultField: 'data.linkList',
|
||||||
|
@@ -3,6 +3,7 @@
|
|||||||
right: 496px;
|
right: 496px;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
z-index: 99;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@@ -12,6 +13,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
transition: all ease 0.5s;
|
||||||
.content {
|
.content {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
.div-operation {
|
.div-operation {
|
||||||
@@ -139,3 +141,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fade-enter-active, .fade-leave-active {
|
||||||
|
transform: translateX(0px);
|
||||||
|
}
|
||||||
|
.fade-enter-from, .fade-leave-to {
|
||||||
|
transform: translateX(496px);
|
||||||
|
}
|
@@ -1,7 +1,5 @@
|
|||||||
// 页面容器
|
// 页面容器
|
||||||
.lighting-box {
|
.lighting-box {
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
// background: linear-gradient(#badaff, #8cabeb, #7095de);
|
// background: linear-gradient(#badaff, #8cabeb, #7095de);
|
||||||
// 照明设备功能总容器
|
// 照明设备功能总容器
|
||||||
@@ -47,32 +45,46 @@
|
|||||||
height: 240px;
|
height: 240px;
|
||||||
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
|
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 5px;
|
||||||
.area1 {
|
.area1 {
|
||||||
width: 170px;
|
width: 70px;
|
||||||
background: rgba(0, 251, 91, 0.3);
|
background: rgba(0, 251, 91, 0.3);
|
||||||
border: 2px solid rgb(0, 251, 91);
|
border: 2px solid rgb(0, 251, 91);
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.area2 {
|
.area2 {
|
||||||
width: 240px;
|
width: 200px;
|
||||||
background: rgba(255, 165, 0, 0.3);
|
background: rgba(255, 165, 0, 0.3);
|
||||||
border: 2px solid rgb(255, 165, 0);
|
border: 2px solid rgb(255, 165, 0);
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.area3 {
|
.area3 {
|
||||||
width: 110px;
|
width: 120px;
|
||||||
background: rgba(255, 0, 0, 0.3);
|
background: rgba(255, 0, 0, 0.3);
|
||||||
border: 2px solid rgb(255, 0, 0);
|
border: 2px solid rgb(255, 0, 0);
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
.area4 {
|
.area4 {
|
||||||
flex: 1;
|
width: 70px;
|
||||||
background: rgba(80, 236, 244, 0.3);
|
background: rgba(80, 236, 244, 0.3);
|
||||||
border: 2px solid rgb(80, 236, 244);
|
border: 2px solid rgb(80, 236, 244);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.area5 {
|
||||||
|
flex: 1;
|
||||||
|
background: rgba(0, 251, 91, 0.3);
|
||||||
|
border: 2px solid rgb(0, 251, 91);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.area6 {
|
||||||
|
flex: 1;
|
||||||
|
background: rgba(255, 165, 0, 0.3);
|
||||||
|
border: 2px solid rgb(255, 165, 0);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.area-item:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
// .area-item:hover {
|
|
||||||
// transform: scale(1.05);
|
|
||||||
// }
|
|
||||||
.area-item {
|
.area-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all ease 0.2s;
|
transition: all ease 0.2s;
|
||||||
@@ -82,37 +94,16 @@
|
|||||||
display:flex;
|
display:flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.group-shadow1 {
|
box-sizing: border-box;
|
||||||
width: 35px;
|
padding: 10px;
|
||||||
height: 150px;
|
// border: 2px solid red;
|
||||||
|
.shadow-box {
|
||||||
|
width: 30px;
|
||||||
|
height: 200px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
}
|
|
||||||
.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);
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -3,25 +3,31 @@
|
|||||||
<div class="lighting-img-box">
|
<div class="lighting-img-box">
|
||||||
<!-- 左上角,区域切换 -->
|
<!-- 左上角,区域切换 -->
|
||||||
<div class="btn-box">
|
<div class="btn-box">
|
||||||
<button class="btn-item" @click=changeArea(1)>1F</button>
|
<button class="btn-item" @click=changeFloor(1)>1F</button>
|
||||||
<button class="btn-item" @click=changeArea(2)>2F</button>
|
<button class="btn-item" @click=changeFloor(2)>2F</button>
|
||||||
<button class="btn-item" @click=changeArea(3)>站台</button>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 楼层区域 -->
|
<!-- 楼层区域 -->
|
||||||
<div class="area">
|
<div class="area">
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in treeData"
|
v-for="(item, index) in treeData"
|
||||||
:class="computedClass(String(item.id))"
|
:class="computedClass(item.id)"
|
||||||
@click="getArea(item)"
|
@click="changeThisArea([item])"
|
||||||
:key="index">
|
:key="index">
|
||||||
<div v-for="(v, i) in item.children" :key="i" class="light-group">
|
<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)"></div>
|
<div class="group-shadow" @click.stop="changeThisArea([item, v])">
|
||||||
|
<div :class="computedClass(v.id)" class="shadow-box"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 照明设备 -->
|
<!-- 照明设备 -->
|
||||||
<div class="lights">
|
<div class="lights">
|
||||||
<light v-for="(item, index) in bulbs" :key="index" :styleObject="item.styleText" :type="item.type" :visible="item.visible"></light>
|
<light v-for="(item, index) in bulbs"
|
||||||
|
:key="index"
|
||||||
|
:styleObject="item.styleText"
|
||||||
|
:type="item.type"
|
||||||
|
:visible="item.visible">
|
||||||
|
</light>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 右侧抽屉的触发按钮 -->
|
<!-- 右侧抽屉的触发按钮 -->
|
||||||
@@ -44,7 +50,7 @@
|
|||||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||||
<a-tabs v-model:activeKey="activeKey">
|
<a-tabs v-model:activeKey="activeKey">
|
||||||
<a-tab-pane key="1" tab="控制面板">
|
<a-tab-pane key="1" tab="控制面板">
|
||||||
<tabs1 @changeArea="getArea" :treeData="treeData"></tabs1>
|
<tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||||
<tabs2></tabs2>
|
<tabs2></tabs2>
|
||||||
@@ -59,94 +65,170 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import { ref } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { treeData } from './treeData'
|
// 组件
|
||||||
import light from './light.vue';
|
import light from './light.vue';
|
||||||
import tabs1 from './tabs1.vue'
|
import tabs1 from './tabs1.vue'
|
||||||
import tabs2 from './tabs2.vue'
|
import tabs2 from './tabs2.vue'
|
||||||
import tabs3 from './tabs3.vue'
|
import tabs3 from './tabs3.vue'
|
||||||
|
// 请求
|
||||||
|
import { http } from '/nerv-lib/util/http';
|
||||||
|
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||||
// ICON
|
// ICON
|
||||||
import {
|
import {
|
||||||
DoubleLeftOutlined,
|
DoubleLeftOutlined,
|
||||||
DoubleRightOutlined
|
DoubleRightOutlined
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
|
|
||||||
// 分区 - 当前选择的分区序号 - 默认选择一区
|
// 类声明 =======================================================
|
||||||
|
|
||||||
|
interface items {
|
||||||
|
id: string,
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化 =======================================================
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => {
|
||||||
|
const data = res.data
|
||||||
|
/** 由前端创建的,只在前端使用的变量
|
||||||
|
* @param id 用于判断样式和层级的前端属性
|
||||||
|
* @param selected 用于表示是否选中的前端属性
|
||||||
|
*/
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
if (index == 0) {
|
||||||
|
item.selected = true
|
||||||
|
} else {
|
||||||
|
item.selected = false
|
||||||
|
}
|
||||||
|
item.id = String(index + 1)
|
||||||
|
item.children = []
|
||||||
|
// deviceGroup后端返回了对象,此处转化为数组
|
||||||
|
let i = 1;
|
||||||
|
for (let obj in item.deviceGroup) {
|
||||||
|
item.deviceGroup[obj].selected = false
|
||||||
|
item.deviceGroup[obj].id = String((index + 1) + '-' + i++)
|
||||||
|
item.children.push(item.deviceGroup[obj])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
treeData.value = data
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 分层业务 =====================================================
|
||||||
|
|
||||||
|
// 左上角分层切换
|
||||||
|
const changeFloor = (area: number) => {
|
||||||
|
if (area == 1) {
|
||||||
|
console.log('1F')
|
||||||
|
} else if (area == 2) {
|
||||||
|
console.log('2F')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分区业务 =====================================================
|
||||||
|
|
||||||
|
// 分区结构树
|
||||||
|
const treeData = ref([])
|
||||||
|
// 当前选中的分区id
|
||||||
|
const nowArea = ref('1')
|
||||||
|
// 当前选中的分区序号 - 用于样式渲染
|
||||||
const area = ref(['1'])
|
const area = ref(['1'])
|
||||||
// 分区 - 分区小灯泡 - 此处位置需前端写死
|
// 线路内小灯泡 - 此处位置需前端写死
|
||||||
const bulbs = ref([
|
const bulbs = ref([
|
||||||
{
|
{
|
||||||
styleText: { left: '190px', bottom: '200px' },
|
styleText: { left: '180px', bottom: '200px' },
|
||||||
area: 1,
|
area: 1,
|
||||||
type: 1,
|
type: 1,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
styleText: { left: '245px', bottom: '125px' },
|
styleText: { left: '230px', bottom: '125px' },
|
||||||
area: 1,
|
area: 1,
|
||||||
type: 2,
|
type: 2,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
styleText: { left: '355px', bottom: '160px' },
|
styleText: { left: '320px', bottom: '140px' },
|
||||||
area: 1,
|
area: 1,
|
||||||
type: 3,
|
type: 3,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
styleText: { left: '295px', bottom: '230px' },
|
styleText: { left: '245px', bottom: '230px' },
|
||||||
area: 1,
|
area: 1,
|
||||||
type: 3,
|
type: 3,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
styleText: { left: '425px', bottom: '230px' },
|
styleText: { left: '405px', bottom: '230px' },
|
||||||
area: 2,
|
area: 2,
|
||||||
type: 3,
|
type: 3,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
styleText: { left: '470px', bottom: '190px' },
|
styleText: { left: '460px', bottom: '180px' },
|
||||||
area: 2,
|
area: 2,
|
||||||
type: 3,
|
type: 3,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
styleText: { left: '380px', bottom: '275px' },
|
styleText: { left: '360px', bottom: '275px' },
|
||||||
area: 2,
|
area: 2,
|
||||||
type: 3,
|
type: 3,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
styleText: { left: '700px', bottom: '320px' },
|
styleText: { left: '715px', bottom: '320px' },
|
||||||
area: 3,
|
area: 3,
|
||||||
type: 1,
|
type: 1,
|
||||||
visible: true
|
visible: true
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
// 由子组件控制的分区与线路切换
|
||||||
// 分区 - 左上角分区切换
|
const changeArea = (result: any) => {
|
||||||
const changeArea = (area: number) => {
|
console.log(result,'changeArea')
|
||||||
if (area == 1) {
|
// 数组
|
||||||
console.log('1F')
|
|
||||||
} else if (area == 2) {
|
|
||||||
console.log('2F')
|
|
||||||
} else if (area == 3) {
|
|
||||||
console.log('站台')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 分区 - 单个分区切换
|
|
||||||
const getArea = (result: any) => {
|
|
||||||
// 如果传入的值是数组
|
|
||||||
if (Array.isArray(result)) {
|
if (Array.isArray(result)) {
|
||||||
area.value = result
|
area.value = result
|
||||||
// 如果不是数组
|
// 不是数组
|
||||||
} else {
|
} else {
|
||||||
area.value.length = 0
|
area.value.length = 0
|
||||||
area.value[0] = String(result)
|
area.value[0] = String(result)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 分区 - 样式函数
|
// 由当前组件控制的分区切换
|
||||||
|
const changeThisArea = (result: any) => {
|
||||||
|
console.log(result, 'changeThisArea')
|
||||||
|
// 修改前,将所有选项置空
|
||||||
|
reset()
|
||||||
|
let level1 = result[0];
|
||||||
|
area.value.length = 0
|
||||||
|
if (result.length === 1) {
|
||||||
|
result[0].selected = true
|
||||||
|
area.value.push(result[0].id)
|
||||||
|
} 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)
|
||||||
|
}
|
||||||
|
nowArea.value = level1.id
|
||||||
|
}
|
||||||
|
// 重置分区树所有当前选项
|
||||||
|
const reset = () => {
|
||||||
|
treeData.value.forEach(item => {
|
||||||
|
item.selected = false
|
||||||
|
item.children.forEach(i => {
|
||||||
|
i.selected = false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 俯视图分区选中计算函数
|
||||||
const computedClass = (string: string) => {
|
const computedClass = (string: string) => {
|
||||||
if (area.value.indexOf(string) != -1) {
|
if (area.value.indexOf(string) != -1) {
|
||||||
return `isActive area-item area${string}`
|
return `isActive area-item area${string}`
|
||||||
@@ -154,6 +236,9 @@ const computedClass = (string: string) => {
|
|||||||
return `area-item area${string}`
|
return `area-item area${string}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 抽屉业务 =====================================================
|
||||||
|
|
||||||
// 抽屉 - 当前选择的tab
|
// 抽屉 - 当前选择的tab
|
||||||
let activeKey = ref('1');
|
let activeKey = ref('1');
|
||||||
// 抽屉 - 打开状态
|
// 抽屉 - 打开状态
|
||||||
@@ -166,9 +251,11 @@ const toggleDrawer = () => {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import "./index.less";
|
@import "./index.less";
|
||||||
|
// 当前选中分区的样式
|
||||||
.isActive {
|
.isActive {
|
||||||
border: 3px solid white !important;
|
border: 3px solid white !important;
|
||||||
}
|
}
|
||||||
|
// 抽屉顶部tab按钮样式
|
||||||
:deep(.ant-tabs-tab-btn) {
|
:deep(.ant-tabs-tab-btn) {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
@@ -0,0 +1,439 @@
|
|||||||
|
// 抽屉
|
||||||
|
.drawer-item {
|
||||||
|
|
||||||
|
.light-area,
|
||||||
|
.circuit-area,
|
||||||
|
.control-area,
|
||||||
|
.control-scene-area,
|
||||||
|
.light-parameters-area {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-area-tab,
|
||||||
|
.circuit-tab,
|
||||||
|
.control-tab,
|
||||||
|
.control-scene-tab,
|
||||||
|
.light-parameters-tab {
|
||||||
|
width: 5px;
|
||||||
|
height: 23px;
|
||||||
|
opacity: 1;
|
||||||
|
background: rgba(26, 174, 251, 1);
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-area-text,
|
||||||
|
.circuit-text,
|
||||||
|
.control-text,
|
||||||
|
.control-scene-text,
|
||||||
|
.light-parameters-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: white;
|
||||||
|
padding-left: 5px;
|
||||||
|
line-height: 23px;
|
||||||
|
width: 110px;
|
||||||
|
height: 23px;
|
||||||
|
background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-area-tab,
|
||||||
|
.light-area-text {
|
||||||
|
display: inline-block;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan.enabled {
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: 235px;
|
||||||
|
width: 88px;
|
||||||
|
height: 32px;
|
||||||
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan.disabled {
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: 235px;
|
||||||
|
width: 88px;
|
||||||
|
height: 32px;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.openPlan.enabled2 {
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 88px;
|
||||||
|
height: 32px;
|
||||||
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.openPlan.disabled2 {
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 88px;
|
||||||
|
height: 32px;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.openPlan:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.openzm {
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(34, 183, 255, 1);
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-checkbox {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.both {
|
||||||
|
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%);
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn2 {
|
||||||
|
button {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.allBtn {
|
||||||
|
border: 0;
|
||||||
|
width: 40px;
|
||||||
|
color: white;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-background.ant-switch-checked {
|
||||||
|
background-color: linear-gradient(180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||||
|
background-color: linear-gradient(180deg,
|
||||||
|
rgba(1, 206, 255, 1) 0%,
|
||||||
|
rgba(0, 150, 229, 1) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-background.ant-switch .ant-switch-handle {
|
||||||
|
background-color: grey !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area,
|
||||||
|
.btnArea,
|
||||||
|
.control-mode-btn-area,
|
||||||
|
.control-scene-btn-area {
|
||||||
|
margin-left: -17px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 21%;
|
||||||
|
padding: 0 2%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 92px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 1;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 17px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 1;
|
||||||
|
border: 1px solid rgba(207, 212, 219, 1);
|
||||||
|
line-height: 20.27px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
|
||||||
|
color: rgba(0, 61, 90, 1);
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background-color: rgba(207, 212, 219, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
background-color: rgba(102, 102, 102, 1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-area,
|
||||||
|
.control-scene-area,
|
||||||
|
.light-parameters-area {
|
||||||
|
left: 51px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-tab,
|
||||||
|
.circuit-text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.batch {
|
||||||
|
width: 60px;
|
||||||
|
height: 32px;
|
||||||
|
opacity: 1;
|
||||||
|
border: 1px solid rgba(67, 136, 251, 1);
|
||||||
|
color: rgba(67, 136, 251, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: white;
|
||||||
|
margin-left: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-area {
|
||||||
|
left: 51px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-tab,
|
||||||
|
.control-text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.cell) {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(#pane-first) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-scene-tab,
|
||||||
|
.control-scene-text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-parameters-tab,
|
||||||
|
.light-parameters-text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-parameters-textarea>p {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
border: 1px solid rgba(236, 239, 245, 1);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute {
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 74px;
|
||||||
|
height: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(67, 136, 251, 1);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: white;
|
||||||
|
border: 0;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flushed {
|
||||||
|
width: 74px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(102, 102, 102, 1);
|
||||||
|
background: white;
|
||||||
|
border: 1px solid rgba(193, 197, 204, 1);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-pagination) {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-content {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title1 {
|
||||||
|
position: fixed;
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 20px;
|
||||||
|
margin: auto;
|
||||||
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title2 {
|
||||||
|
position: fixed;
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 495px;
|
||||||
|
margin: auto;
|
||||||
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrowbtn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background: rgba(0, 0, 0, 1);
|
||||||
|
opacity: 0.5;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-tabs-tab-btn) {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-bordered) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-thead) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-cell) {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
cellspacing: 0;
|
||||||
|
cellpadding: 0;
|
||||||
|
border: 1px solid rgba(255, 255, 255);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-area,
|
||||||
|
.circuit-area,
|
||||||
|
.control-area,
|
||||||
|
.control-scene-area,
|
||||||
|
.light-parameters-area {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zmhlbtn {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用图标
|
||||||
|
.anticon-stop {
|
||||||
|
position: absolute;
|
||||||
|
right: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
@@ -14,29 +14,29 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="(row, index) in dataSource" :key="index">
|
<tr v-for="(row, index) in dataSource" :key="index">
|
||||||
<td>{{ row.key }}</td>
|
<td>{{ index + 1 }}</td>
|
||||||
<td>{{ row.data }}</td>
|
<td>{{ row.startTime }}</td>
|
||||||
<td>{{ row.planName }}</td>
|
<td>{{ row.planName }}</td>
|
||||||
<td v-if="row.status === '待执行'">
|
<td v-if="row.planStatus == '2'">
|
||||||
<button
|
<button
|
||||||
style="
|
style="
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background: rgba(57, 215, 187, 0.1);
|
background: rgba(57, 215, 187, 0.1);
|
||||||
color: rgb(57, 215, 187);
|
color: rgb(57, 215, 187);
|
||||||
border: 1px solid rgb(57, 215, 187);
|
border: 1px solid rgb(57, 215, 187);
|
||||||
">
|
">
|
||||||
{{ row.status }}
|
已执行
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="row.status !== '待执行'">
|
<td v-if="row.planStatus == '1'">
|
||||||
<button
|
<button
|
||||||
style="
|
style="
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background: rgba(243, 97, 99, 0.1);
|
background: rgba(243, 97, 99, 0.1);
|
||||||
border: 1px solid rgba(243, 97, 99);
|
border: 1px solid rgba(243, 97, 99);
|
||||||
color: rgba(243, 97, 99);
|
color: rgba(243, 97, 99);
|
||||||
">
|
">
|
||||||
{{ row.status }}
|
待执行
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@@ -73,41 +73,53 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
// 请求
|
||||||
|
import { http } from '/nerv-lib/util/http';
|
||||||
|
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||||
|
|
||||||
|
// 初始化 ===========================================================
|
||||||
|
|
||||||
// 初始化
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
getTable()
|
||||||
|
getLeftPlan()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// tab页部分 ========================================================
|
||||||
|
|
||||||
// 表格数据
|
// 表格数据
|
||||||
const dataSource = ref([
|
const dataSource = ref([]);
|
||||||
{
|
// 获得表格数据
|
||||||
key: '1',
|
const getTable = () => {
|
||||||
data: '2024-05-01',
|
http.get(lightingManage.getPlanTable, {}).then(res => {
|
||||||
planName: '劳动节',
|
dataSource.value = res.data
|
||||||
status: '暂停中',
|
})
|
||||||
},
|
}
|
||||||
{
|
|
||||||
key: '2',
|
// tab页弹窗部分 ====================================================
|
||||||
data: '2024-05-01',
|
|
||||||
planName: '国庆节',
|
// 添加弹窗控制变量
|
||||||
status: '待执行',
|
const addVisible = ref(false);
|
||||||
},
|
// 打开弹窗
|
||||||
{
|
const addModal = () => {
|
||||||
key: '3',
|
addVisible.value = true;
|
||||||
data: '2024-05-01',
|
};
|
||||||
planName: '元旦',
|
|
||||||
status: '待执行',
|
// 穿梭框部分 =======================================================
|
||||||
},
|
|
||||||
]);
|
// 穿梭框数据
|
||||||
const addVisible = ref<boolean>(false);
|
const transferData = ref([])
|
||||||
|
// 获得穿梭框原始数据
|
||||||
|
const getLeftPlan = () => {
|
||||||
|
http.get(lightingManage.getLeftPlan, {}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 操作日志
|
// 操作日志
|
||||||
const handleRefClick1 = () => {
|
const handleRefClick1 = () => {
|
||||||
alert(111)
|
alert(111)
|
||||||
};
|
};
|
||||||
const addModal = () => {
|
|
||||||
addVisible.value = true;
|
|
||||||
};
|
|
||||||
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
||||||
console.log(keys, direction, moveKeys);
|
console.log(keys, direction, moveKeys);
|
||||||
};
|
};
|
||||||
@@ -138,8 +150,6 @@ const mockData = ref([
|
|||||||
]);
|
]);
|
||||||
const targetKeys = ref<string[]>([]);
|
const targetKeys = ref<string[]>([]);
|
||||||
const filterOption = (inputValue: string, option: MockData) => {
|
const filterOption = (inputValue: string, option: MockData) => {
|
||||||
console.log(option.description);
|
|
||||||
|
|
||||||
return option.description.indexOf(inputValue) > -1;
|
return option.description.indexOf(inputValue) > -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -200,6 +210,7 @@ const filterOption = (inputValue: string, option: MockData) => {
|
|||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: rgba(67, 136, 251, 1);
|
color: rgba(67, 136, 251, 1);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.tabReboot {
|
.tabReboot {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
@@ -18,19 +18,19 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="out-dialog" v-if="logModalVisible">
|
|
||||||
|
<div class="out-dialog" :class="{ 'showDialog' : logModalVisible }" v-if="logModalVisible">
|
||||||
<div class="content" v-if="logModalVisible">
|
<div class="content" v-if="logModalVisible">
|
||||||
<div>
|
<div>
|
||||||
<div class="div-operation"></div>
|
<div class="div-operation"></div>
|
||||||
<span class="text-operation">变更内容 </span>
|
<span class="text-operation">操作日志 </span>
|
||||||
</div>
|
</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="journal" style="margin-top: 20px">
|
||||||
<div class="imgText">
|
<div class="imgText">
|
||||||
<div class="zjzm">
|
<div class="zjzm">
|
||||||
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />
|
<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)">{{
|
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
|
||||||
item.name }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-box">
|
<div class="btn-box">
|
||||||
@@ -180,7 +180,6 @@ const handleRowClick = (index: any) => {
|
|||||||
|
|
||||||
// 右下角添加按钮
|
// 右下角添加按钮
|
||||||
.div-add {
|
.div-add {
|
||||||
|
|
||||||
height: 64px;
|
height: 64px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
@@ -199,6 +198,7 @@ const handleRowClick = (index: any) => {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -1,3 +1,4 @@
|
|||||||
|
import { device } from './../../../api/deviceManage';
|
||||||
import { dateUtil } from '/nerv-lib/util/date-util';
|
import { dateUtil } from '/nerv-lib/util/date-util';
|
||||||
import { device } from '/@/api/deviceManage';
|
import { device } from '/@/api/deviceManage';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
@@ -14,7 +15,7 @@ export const tableConfig = (orgId) => {
|
|||||||
title: '设备类别',
|
title: '设备类别',
|
||||||
},
|
},
|
||||||
params: { orgId },
|
params: { orgId },
|
||||||
dynamicParams: 'code',
|
dynamicParams: { deviceCode: 'code' },
|
||||||
defaultExpandAll: true,
|
defaultExpandAll: true,
|
||||||
api: device.queryDeviceTree,
|
api: device.queryDeviceTree,
|
||||||
fieldNames: { title: 'deviceType', key: 'code' },
|
fieldNames: { title: 'deviceType', key: 'code' },
|
||||||
|
@@ -145,7 +145,7 @@
|
|||||||
<ns-button type="primary" @click="CancelUser">取消</ns-button>
|
<ns-button type="primary" @click="CancelUser">取消</ns-button>
|
||||||
<ns-button
|
<ns-button
|
||||||
v-if="roleDisabled"
|
v-if="roleDisabled"
|
||||||
:disabled="!roleTreeData?.length"
|
:disabled="!selectRoleRef || !roleTreeData?.length"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="rolePipe(roleEdit, false, false)">
|
@click="rolePipe(roleEdit, false, false)">
|
||||||
编辑
|
编辑
|
||||||
@@ -194,10 +194,10 @@
|
|||||||
const selectRoleRef = ref();
|
const selectRoleRef = ref();
|
||||||
const formSchema = formConfig(disabled as any);
|
const formSchema = formConfig(disabled as any);
|
||||||
const formSchema2 = formConfig2(roleDisabled as any);
|
const formSchema2 = formConfig2(roleDisabled as any);
|
||||||
const { orgName, projectId, orgId } = JSON.parse(
|
const { orgName, projectId } = JSON.parse(
|
||||||
sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH),
|
sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH),
|
||||||
);
|
);
|
||||||
// const orgId = JSON.parse(sessionStorage.getItem('ORGID'));
|
const orgId = JSON.parse(sessionStorage.getItem('ORGID'));
|
||||||
const roleTreeData = ref([]);
|
const roleTreeData = ref([]);
|
||||||
const rolePermissionTreeData = ref([]);
|
const rolePermissionTreeData = ref([]);
|
||||||
const deptTreeData = ref([]);
|
const deptTreeData = ref([]);
|
||||||
@@ -501,6 +501,7 @@
|
|||||||
roleFormData.value = {};
|
roleFormData.value = {};
|
||||||
opMap.type = '';
|
opMap.type = '';
|
||||||
opMap.fuc = '';
|
opMap.fuc = '';
|
||||||
|
selectRoleRef.value = '';
|
||||||
roleDisabled.value = true;
|
roleDisabled.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -627,6 +628,7 @@
|
|||||||
roleActiveKey.value = 1;
|
roleActiveKey.value = 1;
|
||||||
// 需要重置数据
|
// 需要重置数据
|
||||||
clearDeptData();
|
clearDeptData();
|
||||||
|
clearRoleData();
|
||||||
const { selected } = info;
|
const { selected } = info;
|
||||||
if (!selectedKeys?.length) return;
|
if (!selectedKeys?.length) return;
|
||||||
|
|
||||||
@@ -686,7 +688,7 @@
|
|||||||
roleFormData.value = cloneDeep(info.node.dataRef);
|
roleFormData.value = cloneDeep(info.node.dataRef);
|
||||||
roleCheckedKeys.value = [];
|
roleCheckedKeys.value = [];
|
||||||
if (selectRoleRef.value?.proleId) {
|
if (selectRoleRef.value?.proleId) {
|
||||||
// 查询子部门
|
// 查询子角色
|
||||||
getRolesonPermissionTree({ roleId: selectRoleRef.value?.proleId });
|
getRolesonPermissionTree({ roleId: selectRoleRef.value?.proleId });
|
||||||
} else {
|
} else {
|
||||||
getRolePermissionTree({ deptId: selectRef.value.deptInfo.deptId });
|
getRolePermissionTree({ deptId: selectRef.value.deptInfo.deptId });
|
||||||
@@ -723,6 +725,13 @@
|
|||||||
deptPermission().then(() => {
|
deptPermission().then(() => {
|
||||||
clearDeptData();
|
clearDeptData();
|
||||||
disabled.value = true;
|
disabled.value = true;
|
||||||
|
// 部门权限修改后更新角色树
|
||||||
|
if (selectRoleRef.value?.proleId) {
|
||||||
|
// 查询子角色
|
||||||
|
getRolesonPermissionTree({ roleId: selectRoleRef.value?.proleId });
|
||||||
|
} else {
|
||||||
|
getRolePermissionTree({ deptId: selectRef.value.deptInfo.deptId });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@@ -4,100 +4,91 @@ import { origanizemanage } from '/@/api/origanizemanage';
|
|||||||
export const formConfig = (disabled) => {
|
export const formConfig = (disabled) => {
|
||||||
return ref([
|
return ref([
|
||||||
{
|
{
|
||||||
field: 'field111',
|
label: '账号',
|
||||||
component: 'NsChildForm',
|
field: 'accountNo',
|
||||||
|
component: 'NsInput',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
title: '用户信息',
|
placeholder: '请输入账号',
|
||||||
schemas: [
|
maxLength: 20,
|
||||||
{
|
disabled,
|
||||||
label: '账号',
|
},
|
||||||
field: 'accountNo',
|
rules: [
|
||||||
component: 'NsInput',
|
{
|
||||||
componentProps: {
|
required: true,
|
||||||
placeholder: '请输入账号',
|
message: '请输入账号',
|
||||||
maxLength: 20,
|
},
|
||||||
disabled,
|
],
|
||||||
},
|
},
|
||||||
rules: [
|
{
|
||||||
{
|
label: '姓名',
|
||||||
required: true,
|
field: 'realName',
|
||||||
message: '请输入账号',
|
component: 'NsInput',
|
||||||
},
|
componentProps: {
|
||||||
],
|
placeholder: '请输入姓名',
|
||||||
},
|
maxLength: 20,
|
||||||
{
|
},
|
||||||
label: '姓名',
|
rules: [
|
||||||
field: 'realName',
|
{
|
||||||
component: 'NsInput',
|
required: true,
|
||||||
componentProps: {
|
message: '请输入姓名',
|
||||||
placeholder: '请输入姓名',
|
},
|
||||||
maxLength: 20,
|
],
|
||||||
},
|
},
|
||||||
rules: [
|
{
|
||||||
{
|
label: '性别',
|
||||||
required: true,
|
field: 'sex',
|
||||||
message: '请输入姓名',
|
component: 'NsRadioGroup',
|
||||||
},
|
defaultValue: '男',
|
||||||
],
|
componentProps: {
|
||||||
},
|
radioType: 'radio',
|
||||||
{
|
options: [
|
||||||
label: '性别',
|
{ label: '男', value: '男' },
|
||||||
field: 'sex',
|
{ label: '女', value: '女' },
|
||||||
component: 'NsRadioGroup',
|
|
||||||
defaultValue: '男',
|
|
||||||
componentProps: {
|
|
||||||
radioType: 'radio',
|
|
||||||
options: [
|
|
||||||
{ label: '男', value: '男' },
|
|
||||||
{ label: '女', value: '女' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '手机号',
|
|
||||||
field: 'telephone',
|
|
||||||
component: 'NsInput',
|
|
||||||
componentProps: {
|
|
||||||
placeholder: '请输入手机号',
|
|
||||||
maxLength: 11,
|
|
||||||
},
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入正确手机号格式',
|
|
||||||
pattern: /^[1][3-9][0-9]{9}$/,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '邮箱',
|
|
||||||
field: 'email',
|
|
||||||
component: 'NsInput',
|
|
||||||
componentProps: {
|
|
||||||
placeholder: '请输入邮箱',
|
|
||||||
maxLength: 30,
|
|
||||||
},
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
||||||
message: '请输入正确的邮箱格式',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '组织关系',
|
|
||||||
field: 'orgName',
|
|
||||||
component: 'NsInput',
|
|
||||||
defaultValue: JSON.parse(sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH)).orgName,
|
|
||||||
componentProps: {
|
|
||||||
disabled: true,
|
|
||||||
maxLength: 30,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '手机号',
|
||||||
|
field: 'telephone',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入手机号',
|
||||||
|
maxLength: 11,
|
||||||
|
},
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入正确手机号格式',
|
||||||
|
pattern: /^[1][3-9][0-9]{9}$/,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '邮箱',
|
||||||
|
field: 'email',
|
||||||
|
component: 'NsInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入邮箱',
|
||||||
|
maxLength: 30,
|
||||||
|
},
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
||||||
|
message: '请输入正确的邮箱格式',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '组织关系',
|
||||||
|
field: 'orgName',
|
||||||
|
component: 'NsInput',
|
||||||
|
defaultValue: JSON.parse(sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH)).orgName,
|
||||||
|
componentProps: {
|
||||||
|
disabled: true,
|
||||||
|
maxLength: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
const options = ref([]);
|
const options = ref([]);
|
||||||
|
@@ -32,12 +32,14 @@
|
|||||||
:footer-style="{ textAlign: 'right' }"
|
:footer-style="{ textAlign: 'right' }"
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
@close="onClose">
|
@close="onClose">
|
||||||
|
<span class="admin">用户信息</span>
|
||||||
<ns-form
|
<ns-form
|
||||||
ref="formRef"
|
ref="formRef"
|
||||||
:schemas="formSchema"
|
:schemas="formSchema"
|
||||||
:model="formData"
|
:model="formData"
|
||||||
class="form"
|
class="form"
|
||||||
:wrapperCol="{ span: 20 }"
|
:wrapperCol="{ span: 20 }"
|
||||||
|
:labelCol="{ span: 4 }"
|
||||||
formLayout="vertical" />
|
formLayout="vertical" />
|
||||||
<span class="admin">用户权限</span>
|
<span class="admin">用户权限</span>
|
||||||
<ns-view-list-table
|
<ns-view-list-table
|
||||||
@@ -71,7 +73,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, createVNode, defineComponent, reactive, ref, watchEffect } from 'vue';
|
import { computed, createVNode, defineComponent, reactive, ref, watchEffect } from 'vue';
|
||||||
import { http } from '/nerv-lib/util/http';
|
import { http } from '/nerv-lib/util/http';
|
||||||
import { NsMessage, NsModal } from '/nerv-lib/component';
|
import { Badge, NsMessage, NsModal } from '/nerv-lib/component';
|
||||||
import { formConfig, formConfig2 } from './config';
|
import { formConfig, formConfig2 } from './config';
|
||||||
import { origanizemanage } from '/@/api/origanizemanage';
|
import { origanizemanage } from '/@/api/origanizemanage';
|
||||||
|
|
||||||
@@ -265,6 +267,7 @@
|
|||||||
deptRoleInfoList: str,
|
deptRoleInfoList: str,
|
||||||
roleId: casData.value[2].value,
|
roleId: casData.value[2].value,
|
||||||
roleName: casData.value[2].label,
|
roleName: casData.value[2].label,
|
||||||
|
deptId: casData.value[1].value,
|
||||||
orgId: casData.value[0].value,
|
orgId: casData.value[0].value,
|
||||||
} as never);
|
} as never);
|
||||||
handleClose();
|
handleClose();
|
||||||
@@ -386,19 +389,21 @@
|
|||||||
return createVNode('div', {}, [
|
return createVNode('div', {}, [
|
||||||
createVNode('span', {}, value[0]?.deptRoleInfoList),
|
createVNode('span', {}, value[0]?.deptRoleInfoList),
|
||||||
value.length > 1 &&
|
value.length > 1 &&
|
||||||
createVNode(
|
createVNode(Badge, {
|
||||||
'a',
|
onClick: () =>
|
||||||
{
|
NsModal.info({
|
||||||
onClick: () =>
|
icon: null,
|
||||||
NsModal.info({
|
content: createVNode('div', {
|
||||||
icon: null,
|
innerHTML: value.map((item) => item?.deptRoleInfoList).join('<br>'),
|
||||||
content: createVNode('div', {
|
|
||||||
innerHTML: value.map((item) => item?.deptRoleInfoList).join('<br>'),
|
|
||||||
}),
|
|
||||||
}),
|
}),
|
||||||
|
}),
|
||||||
|
size: 'small',
|
||||||
|
style: {
|
||||||
|
transform: 'translateY(-4px)',
|
||||||
|
cursor: 'pointer',
|
||||||
},
|
},
|
||||||
`+${value.length}`,
|
count: value.length - 1,
|
||||||
),
|
}),
|
||||||
]);
|
]);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -596,6 +601,12 @@
|
|||||||
.main {
|
.main {
|
||||||
background-color: @ns-content-bg;
|
background-color: @ns-content-bg;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
.top,
|
||||||
|
:deep(.ns-table-search),
|
||||||
|
:deep(.ns-table-main) {
|
||||||
|
box-shadow: @ns-content-box-shadow;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
@@ -652,10 +663,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top,
|
|
||||||
:deep(.ns-table-search),
|
|
||||||
:deep(.ns-table-main) {
|
|
||||||
box-shadow: @ns-content-box-shadow;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@@ -1,7 +1,7 @@
|
|||||||
<!-- @format -->
|
<!-- @format -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<a-modal v-bind="getBindValue">
|
<a-modal v-bind="getBindValue" centered>
|
||||||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||||
<slot :name="item" v-bind="data || {}"></slot>
|
<slot :name="item" v-bind="data || {}"></slot>
|
||||||
</template>
|
</template>
|
||||||
|
@@ -1,22 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-spin :spinning="treeState.loading">
|
<a-spin :spinning="treeState.loading">
|
||||||
<div class="ns-tree-form">
|
<div class="ns-tree-container">
|
||||||
<div v-if="header" class="ns-tree-title">
|
<div class="ns-tree-form">
|
||||||
<ns-icon :name="header.icon" size="14" />
|
<div v-if="header" class="ns-tree-title">
|
||||||
<span>{{ header.title }}</span>
|
<ns-icon :name="header.icon" size="14" />
|
||||||
|
<span>{{ header.title }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="!formConfig?.schema">
|
||||||
|
<ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!formConfig?.schema">
|
|
||||||
<ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="min-height: 150px; overflow-y: scroll">
|
<div style="min-height: 150px">
|
||||||
<ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
|
<ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
|
||||||
<template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index">
|
<template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index">
|
||||||
<slot :name="item" v-bind="{ ...data, formModel } || {}"></slot>
|
<slot :name="item" v-bind="{ ...data, formModel } || {}"></slot>
|
||||||
</template>
|
</template>
|
||||||
</ns-tree>
|
</ns-tree>
|
||||||
<!-- <a-empty v-if="!treeData?.length" /> -->
|
<!-- <a-empty v-if="!treeData?.length" /> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
</template>
|
</template>
|
||||||
@@ -150,4 +152,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ns-tree-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&:last-child {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user