Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
zhaohy
@@ -3,29 +3,29 @@ export enum lightingManage {
|
||||
// 主页 ========================================================
|
||||
|
||||
// 获得分区与线路
|
||||
getArea = '/carbon-smart/IlluminationInfo/region',
|
||||
getTree = '/carbon-smart/api/illuminationCtrl/getCtrlPanelTree',
|
||||
// 修改线路的可用/禁用状态
|
||||
setDisable = '/carbon-smart/IlluminationInfo/changePanelStatus',
|
||||
setDisable = '/carbon-smart/api/illuminationCtrl/changePanelStatus',
|
||||
// 获得设备 - 小灯泡
|
||||
getBulbs = '/carbon-smart/IlluminationInfo/getLightState',
|
||||
getBulbs = '/carbon-smart/api/illuminationCtrl/getLightState',
|
||||
|
||||
// 控制面板tab页 ================================================
|
||||
|
||||
// 获取当前修改的内容对比数据
|
||||
getChangeList = '/carbon-smart/IlluminationInfo/getLightSceneChangeInfo',
|
||||
getChangeList = '/carbon-smart/api/illuminationCtrl/getLightSceneChangeInfo',
|
||||
// 提交当前修改
|
||||
submitChangeList = '/carbon-smart/IlluminationInfo/changeLightScene',
|
||||
submitChangeList = '/carbon-smart/api/illuminationCtrl/changeLightScene',
|
||||
|
||||
// 计划列表tab页 ================================================
|
||||
|
||||
// 获得计划列表tab页的表格数据
|
||||
getPlanTable = '/carbon-smart/IlluminationPlan/selectPanelPlan',
|
||||
getPlanTable = '/carbon-smart/api/illuminationInfo/selectPanelPlan',
|
||||
// 获得计划列表tab页的穿梭框左侧数据
|
||||
getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan',
|
||||
getLeftPlan = '/carbon-smart/api/illuminationInfo/getPlan',
|
||||
// 提交穿梭框被选择的数据
|
||||
submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan',
|
||||
submitLeftPlan = '/carbon-smart/api/illuminationInfo/joinPlan',
|
||||
// 删除表格中的计划
|
||||
deletePlan = '/carbon-smart/IlluminationPlan/deletePlan',
|
||||
deletePlan = '/carbon-smart/api/illuminationInfo/deletePlan',
|
||||
// 重启表格计划
|
||||
restartPlan = '/carbon-smart/IlluminationPlan/enable',
|
||||
restartPlan = '/carbon-smart/api/illuminationInfo/enable',
|
||||
}
|
||||
|
||||
28
hx-ai-intelligent/src/api/airConditionControlSystem.ts
Normal file
28
hx-ai-intelligent/src/api/airConditionControlSystem.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
const prefix = '/carbon-smart';
|
||||
// 空调系统及相关接口
|
||||
export enum airConditionControl {
|
||||
// 主页 ======================================================
|
||||
|
||||
// 主页分区结构
|
||||
getTree = prefix + '/airConditioningCtrl/getCtrlPanelTree',
|
||||
// 主页小灯泡
|
||||
getDeviceList = prefix + '/airConditioningCtrl/getDeviceState',
|
||||
|
||||
// 主页 > 抽屉 > 控制面板 =======================================
|
||||
|
||||
// 获得修改的比对列表
|
||||
getChangeList = prefix + '/airConditioningCtrl/getSceneChangeInfo',
|
||||
// 提交修改结果
|
||||
submitChangeList = prefix + '/airConditioningCtrl/changeToSceneMode',
|
||||
|
||||
// 主页 > 抽屉 > 计划列表 =======================================
|
||||
|
||||
// 穿梭框来源数据
|
||||
getTransData = prefix + '/airConditioningInfo/getDeActivatedPlanList',
|
||||
// 右侧表格数据
|
||||
getTableData = prefix + '/airConditioningInfo/getActivatedPlanList',
|
||||
// 穿梭框结果数据提交
|
||||
submitTransData = prefix + '/airConditioningInfo/activePlanByIdList',
|
||||
// 右侧表格修改数据提交
|
||||
submitTableData = prefix + '/airConditioningCtrl/refreshPlanStatus',
|
||||
}
|
||||
@@ -79,7 +79,11 @@ export enum uploadPic {
|
||||
// 碳规划
|
||||
export enum carbonPlanning {
|
||||
// 全部
|
||||
whole = '/carbon-smart/api/carbon/planning/whole',
|
||||
// 详情
|
||||
searchListByYear = '/carbon-smart/api/carbon/planning/searchListByYear',
|
||||
searchListByMonth = '/carbon-smart/api/carbon/planning/searchListByMonth',
|
||||
yearAndMonthAchievement = '/carbon-smart/api/carbon/planning/yearAndMonthAchievement',
|
||||
annualElectricityConsumption = '/carbon-smart/api/carbon/planning/annualElectricityConsumption',
|
||||
electricityUsageBackThen = '/carbon-smart/api/carbon/planning/electricityUsageBackThen',
|
||||
}
|
||||
|
||||
@@ -100,6 +100,25 @@ const equipmentControl = {
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
path: 'airConditionControlSystem',
|
||||
name: 'airConditionControlSystem',
|
||||
meta: { title: '空调系统群控', hideChildren: true, icon: 'shebeiqunkong' },
|
||||
component: Base,
|
||||
redirect: { name: 'airConditionControlSystemIndex' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'airConditionControlSystemIndex',
|
||||
component: () => import('/@/view/equipmentControl/airConditionControlSystem/index.vue'),
|
||||
meta: {
|
||||
title: '空调系统群控',
|
||||
keepAlive: false,
|
||||
// backApi: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
export default equipmentControl;
|
||||
|
||||
@@ -54,7 +54,6 @@
|
||||
|
||||
// 年份选择改变触发
|
||||
const changeYearData = () => {
|
||||
debugger
|
||||
queryParams.value.year = selectYear.value;
|
||||
getTableList();
|
||||
};
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
energyConsumptionRef.value.mainRef.nsTableRef.reload();
|
||||
}
|
||||
} else if (key === '2') {
|
||||
debugger
|
||||
if (carbonEmissionsRef.value) {
|
||||
carbonEmissionsRef.value.getTableList(); // 调用子组件的方法
|
||||
}
|
||||
|
||||
@@ -3,8 +3,18 @@
|
||||
<div class="ns-form-title">
|
||||
<div class="title">
|
||||
<span>查询</span>
|
||||
<a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" />
|
||||
<a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" />
|
||||
<a-date-picker
|
||||
v-if="selectedTime"
|
||||
style="margin-left: 5%"
|
||||
valueFormat="YYYY"
|
||||
:value="selectYear"
|
||||
picker="year" />
|
||||
<a-date-picker
|
||||
v-else
|
||||
style="margin-left: 5%"
|
||||
valueFormat="YYYY-MM"
|
||||
:value="selectMonth"
|
||||
picker="month" />
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div>
|
||||
@@ -13,11 +23,11 @@
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div class="chartsPart">
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<template v-for="(item, index) in data" :key="index">
|
||||
<div class="electricityConsumption">
|
||||
<div :id="'ydlChart_' + index" style="height: 100%; width: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tablePart">
|
||||
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
|
||||
@@ -27,13 +37,22 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref,defineExpose } from 'vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { ref, defineExpose } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'all', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
const value5 = ref<Dayjs>();
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const fetch = (api, params = { orgId }) => {
|
||||
return http.post(api, params);
|
||||
};
|
||||
const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
|
||||
const selectMonth = ref<Dayjs>();
|
||||
// 年/月切换
|
||||
const monthStyles = ref('background: #f2f2f2');
|
||||
const yearStyles = ref('background: #2778ff');
|
||||
@@ -41,108 +60,126 @@
|
||||
const changeToMonth = () => {
|
||||
monthStyles.value = 'background: #2778ff';
|
||||
yearStyles.value = 'background: #f2f2f2';
|
||||
queryParams.value.yearAndMonth = 'month';
|
||||
queryParams.value.year = selectMonth.value;
|
||||
columns.value[2].title = '月份';
|
||||
columns.value[2].dataIndex = 'month';
|
||||
selectedTime.value = false;
|
||||
getTableData();
|
||||
};
|
||||
const changeToYear = () => {
|
||||
monthStyles.value = 'background: #f2f2f2';
|
||||
yearStyles.value = 'background: #2778ff';
|
||||
queryParams.value.yearAndMonth = 'year';
|
||||
queryParams.value.year = selectYear.value;
|
||||
columns.value[2].title = '年份';
|
||||
columns.value[2].dataIndex = 'year';
|
||||
selectedTime.value = true;
|
||||
getTableData();
|
||||
};
|
||||
// 用电量
|
||||
const ydlChart = ref(null);
|
||||
const ydlChart = ref({});
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const drawEcharts = () => {
|
||||
chartInstance = echarts.init(ydlChart.value);
|
||||
const handred = 100;
|
||||
let point = 66;
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
title: [
|
||||
{
|
||||
text: point + '%',
|
||||
x: 'center',
|
||||
y: '35%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '用电量预算达成率',
|
||||
x: 'center',
|
||||
y: '85%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
return params.name + '：' + params.percent + ' %';
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'circle',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: ['40%', '50%'],
|
||||
center: ['50%', '40%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data.value.forEach((item, index) => {
|
||||
const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
|
||||
|
||||
const handred = 100;
|
||||
let point = parseInt(item.budgetAchievement.replace("%", ""));
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
title: [
|
||||
{
|
||||
text: point + '%',
|
||||
x: 'center',
|
||||
y: '35%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: point,
|
||||
name: '占比',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4FADFD',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: item.budgetAchievementName,
|
||||
x: 'center',
|
||||
y: '85%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
],
|
||||
// tooltip: {
|
||||
// formatter: function (params) {
|
||||
// return params.name + '：' + params.percent + ' %';
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: 'circle',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: ['40%', '50%'],
|
||||
center: ['50%', '40%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩余',
|
||||
value: handred - point,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#E1E8EE',
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: point,
|
||||
name: '占比',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4FADFD',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(ydlChart.value);
|
||||
chartInstance.setOption(option);
|
||||
{
|
||||
name: '剩余',
|
||||
value: handred - point,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#E1E8EE',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
drawEcharts,
|
||||
});
|
||||
// 表格
|
||||
const queryParams = ref({
|
||||
orgId: orgId.value,
|
||||
year: selectYear.value.format('YYYY'),
|
||||
yearAndMonth: 'year',
|
||||
});
|
||||
const getTableData = () => {
|
||||
fetch(carbonPlanning.whole, queryParams.value).then((res) => {
|
||||
data.value = res.data;
|
||||
setTimeout(() => {
|
||||
drawEcharts();
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
const columns = ref([
|
||||
{
|
||||
title: '序号',
|
||||
@@ -152,11 +189,11 @@
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'itemizeName',
|
||||
},
|
||||
{
|
||||
title: '年份',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'year',
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
@@ -164,46 +201,31 @@
|
||||
},
|
||||
{
|
||||
title: '总实际用量',
|
||||
dataIndex: 'money',
|
||||
dataIndex: 'actualUsage',
|
||||
},
|
||||
{
|
||||
title: '总预算量',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'budget',
|
||||
},
|
||||
{
|
||||
title: '基准值',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'referenceValue',
|
||||
},
|
||||
{
|
||||
title: '节能量',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'energyConservation',
|
||||
},
|
||||
{
|
||||
title: '预算达成率',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'budgetAchievement',
|
||||
},
|
||||
]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
money: '￥300,000.00',
|
||||
address: 'New York No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
money: '￥1,256,000.00',
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
money: '￥120,000.00',
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
},
|
||||
];
|
||||
const data = ref([]);
|
||||
getTableData();
|
||||
defineExpose({
|
||||
getTableData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -73,6 +73,14 @@
|
||||
defineOptions({
|
||||
energyType: 'all', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
// 父组件id
|
||||
const props = defineProps({
|
||||
tabId: {
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
console.log(props, 'xxy');
|
||||
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
@@ -93,6 +101,9 @@
|
||||
columns.value[2].dataIndex = 'month';
|
||||
selectedTime.value = false;
|
||||
getMonthData();
|
||||
getBallQuery.value.yearAndMonth = 'month';
|
||||
getBallData();
|
||||
getMonthPillarData();
|
||||
};
|
||||
const changeToYear = () => {
|
||||
monthStyles.value = 'background: #f2f2f2';
|
||||
@@ -101,10 +112,40 @@
|
||||
columns.value[2].dataIndex = 'year';
|
||||
selectedTime.value = true;
|
||||
getYearData();
|
||||
getBallQuery.value.yearAndMonth = 'year';
|
||||
getBallData();
|
||||
getYearPillarData();
|
||||
};
|
||||
// echarts图
|
||||
const pillarChartRef = ref(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const getPillarQuery = ref({
|
||||
orgId: orgId.value,
|
||||
type: props.tabId,
|
||||
year: selectYearValue.value.format('YYYY'),
|
||||
});
|
||||
const xAxisData = ref([]);
|
||||
const referenceValue = ref([]);
|
||||
const budget = ref([]);
|
||||
const actualUsage = ref([]);
|
||||
const getYearPillarData = () => {
|
||||
fetch(carbonPlanning.annualElectricityConsumption, getPillarQuery.value).then((res) => {
|
||||
xAxisData.value = res.data.year;
|
||||
referenceValue.value = res.data.referenceValue;
|
||||
budget.value = res.data.budget;
|
||||
actualUsage.value = res.data.actualUsage;
|
||||
drawPillarChart();
|
||||
});
|
||||
};
|
||||
const getMonthPillarData = () => {
|
||||
fetch(carbonPlanning.electricityUsageBackThen, getPillarQuery.value).then((res) => {
|
||||
xAxisData.value = res.data.year;
|
||||
referenceValue.value = res.data.referenceValue;
|
||||
budget.value = res.data.budget;
|
||||
actualUsage.value = res.data.actualUsage;
|
||||
drawPillarChart();
|
||||
});
|
||||
};
|
||||
const drawPillarChart = () => {
|
||||
chartInstance = echarts.init(pillarChartRef.value);
|
||||
const option = {
|
||||
@@ -125,7 +166,7 @@
|
||||
bottom: '10%',
|
||||
},
|
||||
legend: {
|
||||
data: ['昨日总人数', '今日实时人数', '昨日使用率'],
|
||||
data: ['实际用量', '预算量', '基准线'],
|
||||
top: '0',
|
||||
left: '0',
|
||||
textStyle: {
|
||||
@@ -134,7 +175,7 @@
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
data: xAxisData.value,
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
@@ -182,7 +223,7 @@
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '昨日总人数',
|
||||
name: '实际用量',
|
||||
type: 'bar',
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
@@ -190,10 +231,10 @@
|
||||
color: '#6395f9',
|
||||
},
|
||||
},
|
||||
data: [24, 45, 43, 35, 76],
|
||||
data: actualUsage.value,
|
||||
},
|
||||
{
|
||||
name: '今日实时人数',
|
||||
name: '预算量',
|
||||
type: 'bar',
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
@@ -201,10 +242,10 @@
|
||||
color: '#62daab',
|
||||
},
|
||||
},
|
||||
data: [133, 23, 114, 67, 89],
|
||||
data: budget.value,
|
||||
},
|
||||
{
|
||||
name: '昨日使用率',
|
||||
name: '基准线',
|
||||
type: 'line',
|
||||
smooth: true, // 开启平滑曲线
|
||||
symbol: 'none', //标记的图形为实心圆
|
||||
@@ -212,7 +253,7 @@
|
||||
color: '#f4664a',
|
||||
width: 2,
|
||||
},
|
||||
data: [4.2, 3.5, 2.9, 7.8, 2],
|
||||
data: referenceValue.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -220,25 +261,65 @@
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
const ballChartRef = ref(null);
|
||||
const getBallQuery = ref({
|
||||
orgId: orgId.value,
|
||||
type: props.tabId,
|
||||
year: selectYearValue.value.format('YYYY'),
|
||||
yearAndMonth: 'year',
|
||||
});
|
||||
const ballValue = ref();
|
||||
const getBallData = () => {
|
||||
fetch(carbonPlanning.yearAndMonthAchievement, getBallQuery.value).then((res) => {
|
||||
ballValue.value = res.data;
|
||||
drawSQ();
|
||||
});
|
||||
};
|
||||
let ballChartInstance: echarts.ECharts | null = null;
|
||||
const drawSQ = () => {
|
||||
ballChartInstance = echarts.init(ballChartRef.value);
|
||||
let ballData = (Number(ballValue.value)/100).toFixed(2)
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'liquidFill',
|
||||
data: [0.6, 0.5, 0.4, 0.3],
|
||||
radius: '80%',
|
||||
radius: '78.1%',
|
||||
center: ['50%', '50%'],
|
||||
color: ['#ecf3fe', '#c8dcfe', '#5594fa'],
|
||||
data: [ballData, ballData, ballData], // data个数代表波浪数
|
||||
amplitude: 5,
|
||||
// 图形样式
|
||||
itemStyle: {
|
||||
opacity: 1, // 波浪的透明度
|
||||
shadowBlur: 0, // 波浪的阴影范围
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#5594fa',
|
||||
insideColor: '#12786f',
|
||||
fontSize: 40,
|
||||
},
|
||||
formatter: (params) => {
|
||||
// return `${(params.value * 100).toFixed(2)}%`;
|
||||
return `${Number(params.value * 100).toFixed(2)}%`;
|
||||
},
|
||||
},
|
||||
|
||||
outline: {
|
||||
show: true,
|
||||
borderDistance: 5,
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(68, 197, 253,1)',
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
ballChartInstance = echarts.init(ballChartRef.value);
|
||||
ballChartInstance.setOption(option);
|
||||
};
|
||||
setTimeout(() => {
|
||||
drawPillarChart();
|
||||
drawSQ();
|
||||
}, 500);
|
||||
// 新增节点
|
||||
const visible = ref(false);
|
||||
const addNode = () => {
|
||||
@@ -293,7 +374,7 @@
|
||||
// 获取年数据
|
||||
const yearQueryParams = ref({
|
||||
orgId: orgId.value,
|
||||
type: 1,
|
||||
type: props.tabId,
|
||||
year: selectYearValue.value.format('YYYY'),
|
||||
});
|
||||
const changeYear = () => {
|
||||
@@ -308,8 +389,8 @@
|
||||
// 获取月数据
|
||||
const monthQueryParams = ref({
|
||||
orgId: orgId.value,
|
||||
type: 1,
|
||||
yearMonth: selectMonthValue.value,
|
||||
type: props.tabId,
|
||||
yearMonth: selectYearValue.value.format('YYYY'),
|
||||
});
|
||||
const changeMonth = () => {
|
||||
monthQueryParams.value.yearMonth = selectMonthValue.value;
|
||||
@@ -322,6 +403,8 @@
|
||||
};
|
||||
defineExpose({
|
||||
getYearData,
|
||||
getBallData,
|
||||
getYearPillarData,
|
||||
});
|
||||
const parentId = ref();
|
||||
const detailData = (record) => {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<all ref="allRef" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用电量" force-render>
|
||||
<category ref="electricRef" />
|
||||
<a-tab-pane key="2" tab="用电量">
|
||||
<category ref="electricRef" :tabId="tabId" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="用水量">
|
||||
<category ref="useWaterRef" />
|
||||
@@ -21,14 +21,14 @@
|
||||
</a-tabs>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, nextTick } from 'vue';
|
||||
import all from './all/index.vue';
|
||||
import category from './category/index.vue';
|
||||
defineOptions({
|
||||
name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
all,
|
||||
category
|
||||
category,
|
||||
},
|
||||
});
|
||||
const activeKey = ref('1');
|
||||
@@ -39,30 +39,38 @@
|
||||
const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null);
|
||||
const provideHotRef = ref<InstanceType<typeof category> | null>(null);
|
||||
// 切换tab页的回调
|
||||
const tabId = ref(1);
|
||||
const handleTabChange = (key) => {
|
||||
console.log('Tab changed:', key);
|
||||
// 在这里可以执行需要在页面切换时执行的逻辑
|
||||
if (key === '1') {
|
||||
if (allRef.value) {
|
||||
allRef.value.drawEcharts();
|
||||
}
|
||||
nextTick(() => {
|
||||
if (allRef.value) {
|
||||
allRef.value.getTableData();
|
||||
}
|
||||
});
|
||||
} else if (key === '2') {
|
||||
if (electricRef.value) {
|
||||
electricRef.value.getYearData(); // 调用子组件的方法
|
||||
}
|
||||
nextTick(() => {
|
||||
if (electricRef.value) {
|
||||
tabId.value = 1;
|
||||
electricRef.value.getYearData(); // 调用子组件的方法
|
||||
electricRef.value.getBallData();
|
||||
electricRef.value.getYearPillarData();
|
||||
}
|
||||
});
|
||||
} else if (key === '3') {
|
||||
if (useWaterRef.value) {
|
||||
useWaterRef.value.getYearData();
|
||||
}
|
||||
}else if (key === '4') {
|
||||
} else if (key === '4') {
|
||||
if (provideWaterRef.value) {
|
||||
provideWaterRef.value.getYearData();
|
||||
}
|
||||
}else if (key === '5') {
|
||||
} else if (key === '5') {
|
||||
if (carbonEmissionsRef.value) {
|
||||
carbonEmissionsRef.value.getYearData();
|
||||
}
|
||||
}else if (key === '6') {
|
||||
} else if (key === '6') {
|
||||
if (provideHotRef.value) {
|
||||
provideHotRef.value.getYearData();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
.out-dialog {
|
||||
position: fixed;
|
||||
right: 496px;
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
color: rgb(255, 83, 0);
|
||||
background: black;
|
||||
display: flex;
|
||||
padding: 25px;
|
||||
flex-direction: column;
|
||||
transition: all ease 0.5s;
|
||||
.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;
|
||||
.title-img {
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
.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%
|
||||
);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
:first-child {
|
||||
color: white;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
transform: translateX(496px);
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
// 页面容器
|
||||
.lighting-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// 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: 5px;
|
||||
.area1 {
|
||||
width: 65px;
|
||||
background: rgba(0, 251, 91, 0.3);
|
||||
border: 2px solid rgb(0, 251, 91);
|
||||
display: flex;
|
||||
}
|
||||
.area2 {
|
||||
width: 100px;
|
||||
background: rgba(255, 165, 0, 0.3);
|
||||
border: 2px solid rgb(255, 165, 0);
|
||||
display: flex;
|
||||
}
|
||||
.area3 {
|
||||
width: 220px;
|
||||
background: rgba(255, 0, 0, 0.3);
|
||||
border: 2px solid rgb(255, 0, 0);
|
||||
display: flex;
|
||||
}
|
||||
.area4 {
|
||||
width: 70px;
|
||||
background: rgba(80, 236, 244, 0.3);
|
||||
border: 2px solid rgb(80, 236, 244);
|
||||
display: flex;
|
||||
}
|
||||
.area5 {
|
||||
flex: 210px;
|
||||
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 {
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
>.light-group {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
// border: 2px solid red;
|
||||
.shadow-box {
|
||||
width: 30px;
|
||||
height: 200px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 总容器与抽屉按钮
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="lighting-box">
|
||||
<div class="lighting-img-box">
|
||||
<!-- 左上角，区域切换 -->
|
||||
<div class="btn-box">
|
||||
<button
|
||||
v-for="(item, index) in floorData"
|
||||
:key="index"
|
||||
class="btn-item"
|
||||
:style="{ color: item.dataCode == thisFloor ? 'black' : 'white' }"
|
||||
@click="changeFloor(item.childList, item.dataCode)"
|
||||
>{{ 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" />
|
||||
</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"
|
||||
@reload="reload"
|
||||
: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 { airConditionControl } from '/@/api/airConditionControlSystem';
|
||||
// ICON
|
||||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
|
||||
// 初始化 =======================================================
|
||||
|
||||
onMounted(() => {
|
||||
// 获得分区与线路的结构
|
||||
getAllArea();
|
||||
// 获得俯视图中的小灯泡
|
||||
getBulbs();
|
||||
});
|
||||
|
||||
// 获得全局变量
|
||||
const state = items();
|
||||
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
||||
const preload = ref(false);
|
||||
|
||||
// 分层业务 =====================================================
|
||||
|
||||
// 所有楼层的数据
|
||||
const floorData = ref([]);
|
||||
// 当前选择的楼层
|
||||
const thisFloor = ref('1');
|
||||
// 左上角分层切换
|
||||
const changeFloor = (area: any, floor: string) => {
|
||||
thisFloor.value = floor;
|
||||
// 重置数据
|
||||
reset();
|
||||
// 重置视图
|
||||
changeArea(['1']);
|
||||
// 切换楼层数据
|
||||
treeData.value = area;
|
||||
// 默认选择第一项
|
||||
treeData.value[0].selected = true;
|
||||
};
|
||||
|
||||
// 分区业务 =====================================================
|
||||
|
||||
// 分区结构树
|
||||
const treeData = ref([]);
|
||||
// 当前选中的分区序列 - 用于样式渲染
|
||||
const area = ref(['1']);
|
||||
// 线路内小灯泡 - 此处位置需前端写死
|
||||
const bulbs = ref([
|
||||
{
|
||||
styleText: { left: '180px', bottom: '200px' },
|
||||
area: 1,
|
||||
type: 1,
|
||||
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: '245px', bottom: '230px' },
|
||||
area: 1,
|
||||
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: '360px', bottom: '275px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
styleText: { left: '715px', bottom: '320px' },
|
||||
area: 3,
|
||||
type: 1,
|
||||
visible: true,
|
||||
},
|
||||
]);
|
||||
// 由子组件控制的分区与线路切换
|
||||
const changeArea = (result: any) => {
|
||||
console.log(result, 'changeArea');
|
||||
// 数组
|
||||
if (Array.isArray(result)) {
|
||||
area.value = result;
|
||||
// 不是数组
|
||||
} else {
|
||||
area.value.length = 0;
|
||||
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);
|
||||
// 控制子组件按钮区
|
||||
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]);
|
||||
}
|
||||
};
|
||||
// 重置分区树所有当前选项
|
||||
const reset = () => {
|
||||
treeData.value.forEach((item: any) => {
|
||||
item.selected = false;
|
||||
item.childList.forEach((v: any) => {
|
||||
v.selected = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
// 俯视图分区选中计算函数
|
||||
const computedClass = (string: string) => {
|
||||
if (area.value.indexOf(string) != -1) {
|
||||
return `isActive area-item area${string}`;
|
||||
} else {
|
||||
return `area-item area${string}`;
|
||||
}
|
||||
};
|
||||
|
||||
// 获得所有分区
|
||||
const getAllArea = (realod = false) => {
|
||||
http.get(airConditionControl.getTree, { projectId: state.projectId }).then((res) => {
|
||||
const data = res.data;
|
||||
floorData.value = data;
|
||||
/** 只在前端使用的变量
|
||||
* @param id 用于判断样式和层级的前端属性
|
||||
* @param selected 用于表示是否选中的前端属性
|
||||
*/
|
||||
// 楼层 1
|
||||
data.forEach((floor: any) => {
|
||||
// 分区 2
|
||||
floor.childList.forEach((item: any, index: number) => {
|
||||
if (index == 0) {
|
||||
item.selected = true;
|
||||
} else {
|
||||
item.selected = false;
|
||||
}
|
||||
item.id = String(index + 1);
|
||||
// 分组 3
|
||||
item.childList.forEach((v: any, i: number) => {
|
||||
v.selected = false;
|
||||
v.id = index + 1 + '-' + (i + 1);
|
||||
});
|
||||
});
|
||||
});
|
||||
// 默认展示 线路 1-1,重载则使用thisFloor当前选中的楼层数
|
||||
let index = 0;
|
||||
if (realod) {
|
||||
data.find((item: any, i: number) => {
|
||||
if (item.dataCode == thisFloor.value) {
|
||||
return (index = i);
|
||||
}
|
||||
});
|
||||
}
|
||||
treeData.value = data[index].childList;
|
||||
// 开始预加载
|
||||
preload.value = true;
|
||||
});
|
||||
};
|
||||
const reload = () => {
|
||||
getAllArea(true);
|
||||
};
|
||||
|
||||
// 设备业务 小灯泡 ==============================================
|
||||
|
||||
const getBulbs = () => {
|
||||
http
|
||||
.get(airConditionControl.getDeviceList, {
|
||||
floor: thisFloor.value,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
};
|
||||
|
||||
// 抽屉业务 =====================================================
|
||||
|
||||
// 抽屉 - 当前选择的tab
|
||||
let activeKey = ref('1');
|
||||
// 抽屉 - 打开状态
|
||||
let visible = ref(false);
|
||||
// 抽屉 - 开关事件
|
||||
const toggleDrawer = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
// 抽屉tab1组件的引用
|
||||
const tabs1Ref = ref();
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
|
||||
// 当前选中分区的样式
|
||||
.isActive {
|
||||
border: 3px solid white !important;
|
||||
}
|
||||
|
||||
// 抽屉顶部tab按钮样式
|
||||
:deep(.ant-tabs-tab-btn) {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<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="" />
|
||||
</div>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
styleObject: Object,
|
||||
type: Number,
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const result = ref({
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '舒适',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.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;
|
||||
left: 60px;
|
||||
top: 13px;
|
||||
color: rgba(64, 255, 252, 1);
|
||||
}
|
||||
|
||||
.result {
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
// 此文件只定义light（即俯视图小灯泡）的位置信息
|
||||
// 与显示状态和分组信息无关
|
||||
export const lightPosition = [];
|
||||
@@ -0,0 +1,403 @@
|
||||
// 抽屉
|
||||
.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;
|
||||
}
|
||||
.openPlan {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
vertical-align: top;
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
}
|
||||
.openPlan.enabled2 {
|
||||
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
||||
}
|
||||
|
||||
.openPlan.disabled2 {
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,754 @@
|
||||
<template>
|
||||
<a-spin :spinning="isLoading">
|
||||
<!-- 照明区域 -->
|
||||
<div>
|
||||
<div class="light-area">
|
||||
<div class="light-area-tab"></div>
|
||||
<span class="light-area-text">空调区域</span>
|
||||
</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.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="(button, index) in props.treeData"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
@click="changeArea(button)">
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 照明回路部分 -->
|
||||
<div>
|
||||
<div class="circuit-area">
|
||||
<div class="circuit-tab"></div>
|
||||
<span class="circuit-text">空调分组</span>
|
||||
<div class="btn2">
|
||||
<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" />
|
||||
<button class="allBtn">全选</button>
|
||||
<button class="both" @click="selectAll">
|
||||
{{ singleSelection ? '多选' : '单选' }}
|
||||
</button>
|
||||
</div>
|
||||
</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)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
|
||||
</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)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制模式部分 -->
|
||||
<div v-show="thisButton2.dataCode">
|
||||
<div class="control-area">
|
||||
<div class="control-tab"></div>
|
||||
<span class="control-text">控制模式</span>
|
||||
</div>
|
||||
<!-- 控制模式按钮部分 -->
|
||||
<div class="control-mode-btn-area">
|
||||
<button
|
||||
v-for="(button3, index) in thisButton2.childList"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:class="{ selected: button3.selectAble }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制场景部分 -->
|
||||
<div v-show="thisButton2.dataCode">
|
||||
<div class="control-scene-area">
|
||||
<div class="control-scene-tab"></div>
|
||||
<span class="control-scene-text">启动模式</span>
|
||||
<div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
|
||||
>多选模式下会修改当前选中的所有回路</div
|
||||
>
|
||||
</div>
|
||||
<!-- 控制场景按钮部分 -->
|
||||
<div class="control-scene-btn-area">
|
||||
<button
|
||||
v-for="(button4, index) in thisButton3.childList"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button4.executeStatus.value != 0 }"
|
||||
@click="selectButton4(button4)">
|
||||
{{ button4.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部按钮区 -->
|
||||
<div class="bottom">
|
||||
<a-badge :offset="[-10, 2]" :count="changeList.length">
|
||||
<a-popconfirm
|
||||
title="刷新将会取消已作出的修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="refresh"
|
||||
@cancel="changeCancel">
|
||||
<button class="flushed">刷新</button>
|
||||
</a-popconfirm>
|
||||
</a-badge>
|
||||
|
||||
<a-spin :spinning="buttonLoading">
|
||||
<button class="execute" @click="showModal">执行</button>
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 点击执行时的弹出框 -->
|
||||
<div class="out-dialog" v-if="executeVisible">
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
</div>
|
||||
<div class="j-box" v-for="item in diffList" :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="" />
|
||||
<span
|
||||
class="title-text"
|
||||
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span
|
||||
>
|
||||
</div>
|
||||
<a-popconfirm
|
||||
title="此操作将会撤销修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="delBtn(item)"
|
||||
@cancel="changeCancel">
|
||||
<button class="cxbtn">撤销</button>
|
||||
</a-popconfirm>
|
||||
</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">
|
||||
<!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
|
||||
<span>{{
|
||||
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>
|
||||
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 60px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="executeVisible = false">取消</button>
|
||||
<a-popconfirm
|
||||
title="此操作将提交以上修改内容"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@click="submitChangeList"
|
||||
@cancel="changeCancel">
|
||||
<button class="execute">执行</button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</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 { airConditionControl } from '/@/api/airConditionControlSystem';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
|
||||
// 初始化 =========================================================================
|
||||
|
||||
onMounted(() => {
|
||||
// 分区初始化
|
||||
setArea();
|
||||
});
|
||||
// 分区初始化，以 1-1 作为默认回路
|
||||
const setArea = () => {
|
||||
const data = props.treeData[0];
|
||||
buttons2.value = data.childList;
|
||||
};
|
||||
// 全局变量
|
||||
const state = items();
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
[];
|
||||
},
|
||||
},
|
||||
});
|
||||
/** 向上传递方法
|
||||
* @method changeArea 用于控制俯视图的选中状态
|
||||
* @method reset 用于重置按钮区
|
||||
* @method reload 用于刷新一次页面
|
||||
*/
|
||||
const emit = defineEmits(['changeArea', 'reset', 'reload']);
|
||||
|
||||
// 照明区域业务 =======================================================================
|
||||
|
||||
// 按钮区展开与收起状态
|
||||
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: any) => button.id === handleButton.value);
|
||||
let panel = +!btn.ctrlStatus;
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(lightingManage.setDisable, {
|
||||
deviceGroup: btn.dataCode,
|
||||
panel,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.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: any) => {
|
||||
button.selected = false;
|
||||
});
|
||||
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: any, index: number) => {
|
||||
// 全选时，默认展示第一条回路的模式-场景按钮
|
||||
if (index == 0) {
|
||||
thisButton2.value = item;
|
||||
}
|
||||
item.selected = true;
|
||||
arr.push(item.id);
|
||||
});
|
||||
// 全不选
|
||||
} else {
|
||||
buttons2.value.forEach((item: any) => {
|
||||
item.selected = false;
|
||||
});
|
||||
// 全不选时，隐藏 模式 与 场景 按钮
|
||||
resetMode();
|
||||
}
|
||||
emit('changeArea', arr);
|
||||
};
|
||||
|
||||
// 储存当前选中的回路
|
||||
const thisButton2 = ref({
|
||||
dataCode: '',
|
||||
name: '',
|
||||
treePid: '',
|
||||
childList: [],
|
||||
});
|
||||
// 照明回路的按钮切换
|
||||
const changeLine = (button: any) => {
|
||||
console.log(button, 'button2mmmm');
|
||||
// 存储一次按钮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: any) => {
|
||||
item.selected = false;
|
||||
});
|
||||
button.selected = !button.selected;
|
||||
emit('changeArea', [level1, level2]);
|
||||
} else {
|
||||
// 多选模式传值
|
||||
button.selected = !button.selected;
|
||||
const arr = [level1];
|
||||
buttons2.value.forEach((item: any) => {
|
||||
if (item.selected) {
|
||||
arr.push(item.id);
|
||||
}
|
||||
});
|
||||
emit('changeArea', arr);
|
||||
}
|
||||
// 用于展示控制模式
|
||||
if (button.selected) {
|
||||
// 发生了选中事件
|
||||
thisButton2.value = button;
|
||||
// 获得启动模式
|
||||
if (button.childList) {
|
||||
thisButton3.value = button.childList.find((item: any) => {
|
||||
if (item.selectAble) {
|
||||
return item.childList ? item.childList : [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
thisButton3.value = { childList: [] };
|
||||
}
|
||||
} else {
|
||||
// 未发生选中 或 多选的其中一个按钮被取消
|
||||
resetMode();
|
||||
}
|
||||
console.log(thisButton2, 'button');
|
||||
};
|
||||
|
||||
// 照明回路所有按钮
|
||||
const buttons2 = ref([]);
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtons = ref(false);
|
||||
// 默认最多展示8个按钮
|
||||
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
|
||||
|
||||
// 控制模式业务 ====================================================================
|
||||
|
||||
const thisButton3 = ref({
|
||||
childList: [],
|
||||
});
|
||||
// 控制模式 - 按钮切换
|
||||
const selectButton3 = (button3: any) => {
|
||||
console.log(button3);
|
||||
if (!button3.selectAble) {
|
||||
return message.warning(`${button3.name} 暂不支持`);
|
||||
}
|
||||
thisButton3.value = button3;
|
||||
};
|
||||
|
||||
// 控制场景业务 =====================================================================
|
||||
|
||||
// 控制场景 - 按钮切换
|
||||
const selectButton4 = (button4: any) => {
|
||||
const after = button4.dataCode;
|
||||
let before = '';
|
||||
// 如果是多选模式
|
||||
if (!singleSelection.value) {
|
||||
// 操作线路总数
|
||||
let sum = 0;
|
||||
// 没有这个选项的线路
|
||||
let nofind = 0;
|
||||
// 修改无效的数量
|
||||
let checked = 0;
|
||||
// 可修改的数量
|
||||
let changed = 0;
|
||||
buttons2.value.forEach((item: any) => {
|
||||
// 取出当前选中的值 before
|
||||
if (item.childList) {
|
||||
let mode = item.childList.find((lv3: any) => {
|
||||
return lv3.selectAble;
|
||||
});
|
||||
if (mode.childList) {
|
||||
mode.childList.forEach((mode: any) => {
|
||||
// 取出当前选中的模式
|
||||
if (mode.executeStatus.value == 1) {
|
||||
before = mode.dataCode;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 查看当前回路，哪些被选中
|
||||
if (item.selected) {
|
||||
item.childList.forEach((v: any) => {
|
||||
if (v.childList) {
|
||||
v.childList.forEach((v1: any) => {
|
||||
// 查看是否包含当前要修改的值
|
||||
if (v1.dataCode == after) {
|
||||
sum += 1;
|
||||
// 已经被选中，无需修改的内容
|
||||
if (before == after) {
|
||||
return (checked += 1);
|
||||
// 修改
|
||||
} else {
|
||||
alert(v.treePid + '---' + before + '---' + after);
|
||||
changed += 1;
|
||||
resetScene(item.childList);
|
||||
changeScene(v1, before, after);
|
||||
v1.executeStatus.value = 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
alert(`共修改${sum}条，${checked}条无需修改，${nofind}条不具有该选项，${changed}条生效`);
|
||||
// 如果是单选模式
|
||||
} else {
|
||||
// 如果按钮已经被选择
|
||||
if (button4.executeStatus.value == 1) {
|
||||
return message.info('未产生实际修改');
|
||||
} else {
|
||||
// 获得线路当前的场景
|
||||
let before;
|
||||
thisButton2.value.childList.find((item: any) => {
|
||||
if (item.childList) {
|
||||
item.childList.forEach((i: any) => {
|
||||
if (i.executeStatus.value == 1) {
|
||||
return (before = i.dataCode);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// 移除选中场景
|
||||
resetScene(thisButton2.value.childList);
|
||||
changeScene(button4, before, after);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 切换场景前，需要把其他场景移除
|
||||
const resetScene = (list: any) => {
|
||||
list.forEach((item: any) => {
|
||||
if (item.childList) {
|
||||
item.childList.forEach((i: any) => {
|
||||
i.executeStatus.value = 0;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 控制场景 - 按钮切换通用方法（单选 & 多选）
|
||||
* @param button 当前被选中的场景（单选 & 多选）
|
||||
* @param before 当前回路场景的初始值（撤回时需使用）
|
||||
*/
|
||||
const changeScene = (button: any, before: string | undefined, after: string) => {
|
||||
console.log(changeList.value, 'vvvvvvvvvvvvvv-----', button, 'bbbbbbbb---------');
|
||||
// 通过分组ID，查询之前是否修改过
|
||||
const result = changeList.value.find((item: any, index: number) => {
|
||||
item.index = index;
|
||||
return item.deviceGroup == button.treePid.split('_')[0];
|
||||
});
|
||||
console.log(result, 'rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr');
|
||||
// 如果已产生过修改
|
||||
if (result) {
|
||||
// 改回了原有的值，则从数组中移除
|
||||
if (after == result.before) {
|
||||
changeList.value.splice(result.index, 1);
|
||||
// 修改为新值，则只修改场景
|
||||
} else {
|
||||
result.scene = after;
|
||||
// 临时flag，用后移除
|
||||
delete result.index;
|
||||
}
|
||||
// 如果未产生过修改
|
||||
} else {
|
||||
changeList.value.push({
|
||||
// 回路
|
||||
deviceGroup: thisButton2.value.dataCode,
|
||||
deviceGroupName: thisButton2.value.name,
|
||||
// 分区
|
||||
region: thisButton2.value.treePid,
|
||||
regionName: '',
|
||||
// 修改前
|
||||
before,
|
||||
scene: after,
|
||||
});
|
||||
}
|
||||
button.executeStatus.value = 1;
|
||||
};
|
||||
|
||||
// 底部按钮区 ======================================================================
|
||||
|
||||
const isLoading = ref(false);
|
||||
// 执行按钮loading
|
||||
const buttonLoading = ref(false);
|
||||
// 刷新
|
||||
const refresh = () => {
|
||||
// 关闭执行弹窗
|
||||
executeVisible.value = false;
|
||||
// 设置当前选中的序列
|
||||
selectedButton.value = '1';
|
||||
// 重置选中样式 和 按钮选中状态
|
||||
emit('changeArea', ['1']);
|
||||
emit('reset');
|
||||
// 将所有修改改回
|
||||
changeList.value.forEach((item: any) => {
|
||||
resetChangeList(item);
|
||||
});
|
||||
changeList.value = [];
|
||||
// 默认选择第一个楼层
|
||||
let data = props.treeData[0];
|
||||
// 默认选中
|
||||
data.selected = true;
|
||||
// 默认选中 1-1 分区 回路
|
||||
buttons2.value = data.childList;
|
||||
// 将选中线路重置
|
||||
resetMode();
|
||||
};
|
||||
// 刷新时，将已修改的值改回
|
||||
const resetChangeList = (item: any) => {
|
||||
props.treeData.find((v: any) => {
|
||||
if (item.region == v.dataCode) {
|
||||
v.childList.find((v1: any) => {
|
||||
// 找到被修改过的线路
|
||||
if (item.deviceGroup == v1.dataCode) {
|
||||
v1.childList.forEach((v2: any) => {
|
||||
if (v2.childList) {
|
||||
v2.childList.forEach((v3: any) => {
|
||||
// 将新值移除
|
||||
if (item.scene == v3.dataCode) {
|
||||
v3.executeStatus.value = 0;
|
||||
}
|
||||
// 旧值选中
|
||||
if (item.before == v3.dataCode) {
|
||||
v3.executeStatus.value = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 右下角的执行事件
|
||||
const showModal = () => {
|
||||
if (!changeList.value.length) {
|
||||
return message.info('未产生任何修改');
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
http
|
||||
.post(airConditionControl.getChangeList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: [],
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
diffList.value = res.data;
|
||||
executeVisible.value = true;
|
||||
} else {
|
||||
message.warning('获取修改内容失败');
|
||||
}
|
||||
buttonLoading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
// 通用取消
|
||||
const changeCancel = () => {};
|
||||
|
||||
// 内侧弹窗 ========================================================================
|
||||
|
||||
// 内侧弹窗显隐
|
||||
const executeVisible = ref<boolean>(false);
|
||||
// 修改模式 需要向后端提交的内容
|
||||
const changeList: any = ref([]);
|
||||
// 展示修改前后差异的内容
|
||||
const diffList = ref([]);
|
||||
//撤销
|
||||
const delBtn = (obj: any) => {
|
||||
// 将treeData对应回路的数据改回，数据以后端为准
|
||||
obj.scene = obj.stateAfter.scene.value;
|
||||
obj.before = obj.stateBefore.scene.value;
|
||||
resetChangeList(obj);
|
||||
// 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
|
||||
changeList.value = changeList.value.filter((item: any) => {
|
||||
return item.deviceGroup !== obj.deviceGroup;
|
||||
});
|
||||
diffList.value = diffList.value.filter((item: any) => {
|
||||
return item.deviceGroup !== obj.deviceGroup;
|
||||
});
|
||||
console.log(changeList, 'changeList');
|
||||
console.log(diffList, 'diffList');
|
||||
// 如果移除后不再有修改内容，则隐藏弹出框
|
||||
if (changeList.value.length == 0) {
|
||||
executeVisible.value = false;
|
||||
}
|
||||
};
|
||||
// 提交本次修改
|
||||
const submitChangeList = () => {
|
||||
http
|
||||
.post(airConditionControl.submitChangeList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: [],
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then((res) => {
|
||||
emit('reload');
|
||||
refresh();
|
||||
});
|
||||
};
|
||||
|
||||
// 其他业务 ========================================================================
|
||||
|
||||
// 将当前选择的回路置空
|
||||
const resetMode = () => {
|
||||
thisButton2.value = {
|
||||
dataCode: '',
|
||||
name: '',
|
||||
treePid: '',
|
||||
childList: [],
|
||||
};
|
||||
};
|
||||
|
||||
// 向外暴露方法
|
||||
defineExpose({
|
||||
// 分区切换
|
||||
changeArea,
|
||||
// 回路切换
|
||||
changeLine,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import './tabs1.less';
|
||||
</style>
|
||||
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="div-add">
|
||||
<button class="add" @click="addModal">添加</button>
|
||||
<button class="add" style="margin-left: 20px" @click="sendTable">执行</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<span style="color: red; padding-top: 20px">*以下修改需执行后生效</span>
|
||||
<div class="plans">
|
||||
<button class="plan enabled" style="margin-right: 10px" @click="togglePlan(1)">
|
||||
计划启用
|
||||
</button>
|
||||
<button class="plan disabled" @click="togglePlan(3)"> 计划禁用 </button>
|
||||
</div>
|
||||
</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>{{ index + 1 }}</td>
|
||||
<td>{{ row.startTime }}</td>
|
||||
<td>{{ row.planName }}</td>
|
||||
<td>
|
||||
<button
|
||||
:style="{
|
||||
'font-size': '12px',
|
||||
width: '5em',
|
||||
background: 'rgb(47, 47, 47)',
|
||||
color: setStateColor(row.executeStatus.value),
|
||||
border: '1px solid',
|
||||
}">
|
||||
{{ setStateText(row.executeStatus.value) }}
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="tabReboot" @click="startPlan(row)">启用</div>
|
||||
<a-popconfirm
|
||||
title="此操作将移除该数据"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="deletePlan(row)">
|
||||
<div class="tabDelete">删除</div>
|
||||
</a-popconfirm>
|
||||
</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="transferData"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
:render="(item: any) => 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" @click="sendPlan">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { airConditionControl } from '/@/api/airConditionControlSystem';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getEnum } from '/@/api';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
|
||||
// 初始化 ===========================================================
|
||||
|
||||
onMounted(() => {
|
||||
getStateEnum();
|
||||
// 计划表格
|
||||
getTable();
|
||||
// 穿梭框原始数据
|
||||
getLeftPlan();
|
||||
});
|
||||
// 全局变量
|
||||
const state = items();
|
||||
const getStateEnum = async () => {
|
||||
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } });
|
||||
stateList.value = enumData.data;
|
||||
};
|
||||
|
||||
// tab页部分 ========================================================
|
||||
|
||||
// 状态枚举
|
||||
const stateList = ref([]);
|
||||
// 设置枚举的颜色 与 文本
|
||||
const setStateColor = (state: number) => {
|
||||
if (state == 0) {
|
||||
return '#ccc';
|
||||
} else if (state == 1) {
|
||||
return 'orange';
|
||||
} else if (state == 2) {
|
||||
return 'rgb(57, 215, 187)';
|
||||
} else if (state == 3) {
|
||||
return 'rgb(255, 0, 0)';
|
||||
}
|
||||
};
|
||||
// 设置枚举的文本
|
||||
const setStateText = (state: number) => {
|
||||
const res = stateList.value.find((item) => {
|
||||
return item.value == state;
|
||||
});
|
||||
return res.label;
|
||||
};
|
||||
// 计划启用/禁用事件
|
||||
const togglePlan = (state: number) => {
|
||||
dataSource.value.forEach((item: any) => {
|
||||
item.executeStatus.value = state;
|
||||
});
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const dataSource = ref([]);
|
||||
// 获得表格数据
|
||||
const getTable = () => {
|
||||
http
|
||||
.get(airConditionControl.getTableData, { projectId: state.projectId, siteId: state.siteId })
|
||||
.then((res) => {
|
||||
dataSource.value = res.data;
|
||||
});
|
||||
};
|
||||
// 删除表格中的计划（将当前任意状态，修改为未启用 =0）
|
||||
const deletePlan = (row: any) => {
|
||||
row.executeStatus.value = 0;
|
||||
};
|
||||
// 重启表格中的计划（将当前任意状态，修改为待执行 = 1）
|
||||
const startPlan = (row: any) => {
|
||||
if (row.executeStatus.value == 1) {
|
||||
return message.info('该数据已是待执行状态，无需再次修改');
|
||||
}
|
||||
row.executeStatus.value = 1;
|
||||
};
|
||||
// 将对表格的修改统一发送
|
||||
const sendTable = () => {
|
||||
http.post(airConditionControl.submitTableData, dataSource.value).then((res) => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
getLeftPlan();
|
||||
});
|
||||
};
|
||||
|
||||
// tab页弹窗部分 ====================================================
|
||||
|
||||
// 添加弹窗控制变量
|
||||
const addVisible = ref(false);
|
||||
// 打开弹窗
|
||||
const addModal = () => {
|
||||
addVisible.value = true;
|
||||
};
|
||||
|
||||
// 穿梭框部分 =======================================================
|
||||
|
||||
// 穿梭框数据
|
||||
const transferData = ref([]) as any;
|
||||
// 获得穿梭框原始数据
|
||||
const getLeftPlan = () => {
|
||||
http
|
||||
.get(airConditionControl.getTransData, { projectId: state.projectId, siteId: state.siteId })
|
||||
.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(airConditionControl.submitTransData, 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';
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.plan {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-radius: 5px;
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin: 15px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.plan.enabled {
|
||||
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
||||
}
|
||||
.plan.disabled {
|
||||
background-color: red;
|
||||
}
|
||||
.plan:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
.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: 40px;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
::v-deep(.ant-transfer) {
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<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" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
|
||||
<div class="content" v-if="logModalVisible">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">操作日志 </span>
|
||||
</div>
|
||||
<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="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
|
||||
>
|
||||
</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);
|
||||
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;
|
||||
}
|
||||
|
||||
.isTrIndex {
|
||||
background: rgba(67, 136, 251, 1);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.ant-transfer) {
|
||||
// 屏蔽自带的hover效果
|
||||
.ant-transfer-list-content-item:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
v-for="(item, index) in floorData"
|
||||
:key="index"
|
||||
class="btn-item"
|
||||
@click="changeFloor(item.childList, item.code)"
|
||||
@click="changeFloor(item.childList, item.dataCode)"
|
||||
>{{ item.name }}</button
|
||||
>
|
||||
</div>
|
||||
@@ -233,7 +233,7 @@
|
||||
|
||||
// 获得所有分区
|
||||
const getAllArea = () => {
|
||||
http.get(lightingManage.getArea, { projectId: state.projectId }).then((res) => {
|
||||
http.get(lightingManage.getTree, { projectId: state.projectId }).then((res) => {
|
||||
const data = res.data;
|
||||
floorData.value = data;
|
||||
/** 只在前端使用的变量
|
||||
|
||||
@@ -98,27 +98,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制模式部分 -->
|
||||
<div>
|
||||
<div class="control-area" v-show="thisButton2.code">
|
||||
<div v-show="thisButton2.dataCode">
|
||||
<div class="control-area">
|
||||
<div class="control-tab"></div>
|
||||
<span class="control-text"> 控制模式 </span>
|
||||
</div>
|
||||
<!-- 控制模式按钮部分 -->
|
||||
<div class="control-mode-btn-area" v-show="thisButton2.code">
|
||||
<div class="control-mode-btn-area">
|
||||
<button
|
||||
v-for="(button3, index) in controlMode"
|
||||
v-for="(button3, index) in thisButton2.childList"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:disabled="button3.value != 3"
|
||||
:class="{ selected: thisButton2.mode.value == button3.value }"
|
||||
:class="{ selected: button3.selectAble }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.label }}
|
||||
{{ button3.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制场景部分 -->
|
||||
<div>
|
||||
<div class="control-scene-area" v-show="thisButton2.mode.value == 3">
|
||||
<div v-show="thisButton2.dataCode">
|
||||
<div class="control-scene-area">
|
||||
<div class="control-scene-tab"></div>
|
||||
<span class="control-scene-text"> 控制场景 </span>
|
||||
<div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
|
||||
@@ -126,13 +125,13 @@
|
||||
>
|
||||
</div>
|
||||
<!-- 控制场景按钮部分 -->
|
||||
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3">
|
||||
<div class="control-scene-btn-area">
|
||||
<button
|
||||
v-for="(button4, index) in controlScene"
|
||||
v-for="(button4, index) in thisButton3.childList"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }"
|
||||
:class="{ btn: true, selected: button4.executeStatus.value != 0 }"
|
||||
@click="selectButton4(button4)">
|
||||
{{ button4.label }}
|
||||
{{ button4.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,7 +155,7 @@
|
||||
|
||||
<!-- 点击执行时的弹出框 -->
|
||||
<div class="out-dialog" v-if="executeVisible">
|
||||
<div class="content" v-if="executeVisible">
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
@@ -247,7 +246,6 @@
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
import { getAllEnum } from '/@/api/index';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
|
||||
@@ -256,19 +254,7 @@
|
||||
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];
|
||||
@@ -346,7 +332,7 @@
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(lightingManage.setDisable, {
|
||||
deviceGroup: btn.code,
|
||||
deviceGroup: btn.dataCode,
|
||||
panel,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
@@ -419,6 +405,7 @@
|
||||
scene: {
|
||||
value: -1,
|
||||
},
|
||||
childList: [],
|
||||
});
|
||||
// 照明回路的按钮切换
|
||||
const changeLine = (button: any) => {
|
||||
@@ -455,6 +442,12 @@
|
||||
if (button.selected) {
|
||||
// 发生了选中事件
|
||||
thisButton2.value = button;
|
||||
// 获得启动模式
|
||||
thisButton3.value = button.childList.find((item: any) => {
|
||||
if (item.selectAble) {
|
||||
return item.childList ? item.childList : [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 未发生选中 或 多选的其中一个按钮被取消
|
||||
resetMode();
|
||||
@@ -471,23 +464,20 @@
|
||||
|
||||
// 控制模式业务 ====================================================================
|
||||
|
||||
const thisButton3 = ref({
|
||||
childList: [],
|
||||
});
|
||||
// 控制模式 - 按钮切换
|
||||
const selectButton3 = (button3: any) => {
|
||||
let checked = thisButton2.value.mode;
|
||||
console.log(button3.value, '---', checked.value);
|
||||
// 如果点击了相同的按钮，则未作出修改
|
||||
if (checked.value === button3.value) {
|
||||
return;
|
||||
console.log(button3);
|
||||
if (!button3.selectAble) {
|
||||
return message.warning(`${button3.name} 暂不支持`);
|
||||
}
|
||||
checked.value = button3.value;
|
||||
thisButton3.value = button3;
|
||||
};
|
||||
|
||||
// 控制场景业务 =====================================================================
|
||||
|
||||
// 控制模式枚举
|
||||
const controlMode = ref([]);
|
||||
// 场景枚举
|
||||
const controlScene = ref([]);
|
||||
// 控制场景 - 按钮切换
|
||||
const selectButton4 = (button4) => {
|
||||
// 当前选中的回路数据
|
||||
@@ -527,7 +517,7 @@
|
||||
// 查询之前是否修改过
|
||||
const result = changeList.value.find((item: any, index: number) => {
|
||||
item.index = index;
|
||||
return item.deviceGroup == button.code;
|
||||
return item.deviceGroup == button.dataCode;
|
||||
});
|
||||
// 如果已产生过修改
|
||||
if (result) {
|
||||
@@ -544,7 +534,7 @@
|
||||
} else {
|
||||
changeList.value.push({
|
||||
// 回路
|
||||
deviceGroup: button.code,
|
||||
deviceGroup: button.dataCode,
|
||||
deviceGroupName: button.name,
|
||||
// 分区
|
||||
region: button.pcode,
|
||||
@@ -659,6 +649,7 @@
|
||||
scene: {
|
||||
value: -1,
|
||||
},
|
||||
childList: [],
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user