This commit is contained in:
zhaohy
2024-07-25 11:55:35 +08:00
8 changed files with 374 additions and 208 deletions

View File

@@ -66,7 +66,7 @@
};
}
const rowSpan = getRowSpan('cnValue', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
if (rowIndex != 0 && data.value[rowIndex - 1].cnValue == record.cnValue) {
return {
rowSpan: 0,
colSpan: 0,

View File

@@ -1,59 +1,3 @@
// 填报页表头
export const columns = [
{
title: '日期',
dataIndex: 'name',
key: 'name',
width: 100,
fixed: 'left',
},
{
title: '消耗量',
children: [
{
title: '数据来源',
dataIndex: 'companyAddress',
key: 'companyAddress',
width: 200,
},
{
title: '数值',
dataIndex: 'companyName',
key: 'companyName',
},
],
},
{
title: '碳排因子',
children: [
{
title: '数据来源',
dataIndex: 'companyAddress',
key: 'companyAddress',
width: 200,
},
{
title: '数值',
dataIndex: 'companyName',
key: 'companyName',
},
],
},
{
title: '排放量',
dataIndex: 'gender',
key: 'gender',
width: 80,
fixed: 'right',
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
width: 80,
fixed: 'right',
},
];
// 凭证弹窗表头
export const voucherColumns = [
{

View File

@@ -4,7 +4,7 @@
<div class="top">
<a-form style="width: 100%;margin: 0 auto;">
<div class="ns-form-title">
<div class="title">2024年济阳站碳盘查报告</div>
<div class="title">{{props.year}}年济阳站碳盘查报告</div>
<div class="standard">
<span>适用标准ISO 14064-1</span>
<a-button type="primary" style="margin-left: 12px;" @click="openCategoryConfig">类别配置</a-button>
@@ -54,7 +54,7 @@
<div class="right">
<div style="display:flex;">
<div class="ns-table-title ns-title-extra-box">排放源</div>
<a-button type="primary" style="margin-left: 12px;">返回</a-button>
<a-button type="primary" style="margin-left: 12px;" @click="changeParentData">返回</a-button>
</div>
<div style="display: flex;" v-if="fillInPage">
<div class="mainLeft">
@@ -95,6 +95,12 @@
<a-button type="primary" @click="downLoadVoucher">凭证</a-button>
</template>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'dataSources'">
<span v-if="record.dataSources">{{ record.dataSources.label }}</span>
</template>
<template v-if="column.dataIndex === 'carbonSource'">
<span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
</template>
<template v-if="column.key === 'action'">
<span>
<a @click="edit(record)">编辑</a>
@@ -249,41 +255,40 @@
>
<a-row>
<a-col :span="12">
<a-form-item ref="name" label="数据来源" name="dateRange">
<a-form-item ref="name" label="数据来源" name="dataSources">
<a-select
ref="select"
v-model:value="editFormState.dateRange"
@change="handleChange"
v-model:value="editFormState.dataSources"
@change="changeSelect"
>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="1">自行推估</a-select-option>
<a-select-option value="2">定期量测</a-select-option>
<a-select-option value="3">自动测量</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="name" label="消耗量" name="emissionFactors">
<ns-input v-model:value="editFormState.emissionFactors" disabled />
<a-form-item ref="name" label="消耗量" name="consumption">
<ns-input v-model:value="editFormState.consumption" :disabled="canEdit" />
</a-form-item>
</a-col>
</a-row>
<a-row v-if="automatic">
<a-col :span="12">
<a-form-item ref="name" label="采集节点" name="collectionNode">
<a-tree-select
v-model:value="editFormState.collectionNode"
:tree-line="true"
:tree-data="collectingNodes"
>
</a-tree-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item ref="name" label="采集节点" name="dateRange">
<a-select
ref="select"
v-model:value="editFormState.dateRange"
@change="handleChange"
>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item ref="name" label="因子值" name="emissionFactors">
<ns-input v-model:value="editFormState.emissionFactors" disabled />
<a-form-item ref="name" label="因子值" name="factorId">
<ns-input v-model:value="editFormState.factorId" disabled />
</a-form-item>
</a-col>
<a-col :span="12">
@@ -300,7 +305,7 @@
rowKey="id"
:scroll="{ y: 400 }"
style="margin-bottom: 10px;"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectionChange, type: 'radio' }"
:rowSelection="{ selectedRowKeys: selectedRowKeysEdit, onChange: onSelectionChangeEdit, type: 'radio' }"
:pagination="false">
</a-table>
<a-pagination
@@ -333,20 +338,32 @@
</template>
<script lang="ts" setup>
import { ref, watch, toRaw } from 'vue';
import { ref, watch, toRaw, defineEmits } from 'vue';
import { http } from '/nerv-lib/util/http';
import { Pagination, Modal, message } from 'ant-design-vue';
import type { TreeProps,TableColumnsType,UploadChangeParam } from 'ant-design-vue';
import { EditOutlined,PlusCircleOutlined,MinusCircleOutlined,UploadOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts';
import { columns,voucherColumns,drawerColumns } from '../config';
import { voucherColumns,drawerColumns } from '../config';
import { energyConsumption,carbonEmissionFactorLibrary,carbonInventoryCheck } from '/@/api/carbonEmissionFactorLibrary';
import { group } from '/@/api/deviceManage';
defineOptions({
energyType: 'fillInPage', // 与页面路由name一致缓存才可生效
components: {
'a-pagination': Pagination,
},
});
// 父组件id和年份
const props = defineProps({
reportId: {
type: Number
},
year: {
type: String
}
})
console.log(props,'xxy');
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
@@ -440,16 +457,17 @@
const categoryId = ref()
const onSelectL = (selectedKey: string[], info: any) => {
selectedKeysL.value = selectedKey;
categoryId.value = info.node.id
categoryId.value = info.node.conId
formState.value.categoryId = categoryId.value
getEmissionSourceTree()
};
// 获取碳盘查报告树
const selectedIds = ref([]);
const getReportTree = () => {
fetch(carbonInventoryCheck.getCategoryTree).then((res) => {
fetch(carbonInventoryCheck.getCategoryTree,{reportId:props.reportId,orgId:orgId.value}).then((res) => {
gData.value = res.data
if(res.data.length > 0){
categoryId.value = res.data[0].id
categoryId.value = res.data[0].conId
formState.value.categoryId = categoryId.value
selectedIds.value = getAllIds(gData.value);
}
@@ -460,29 +478,41 @@
const getAllIds = (nodes: TreeNode[]): number[] => {
return nodes.flatMap(node => [node.id, ...(node.children ? getAllIds(node.children) : [])]);
};
// 填报表格数据
const data = [...Array(12)].map((_, i) => ({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
}));
// 右侧树数据
const treeData = ref<TreeProps['treeData']>(genData);
// 获取数据
const getTableId = ref()
const getEmissionSourceTree = () => {
fetch(carbonInventoryCheck.getInventoryTree, { categoryId: categoryId.value }).then((res) => {
treeData.value = res.data
getTableId.value = res.data[0].id
if(res.data.length != 0){
getPFYTableList(getTableId.value)
getTableHeardUnit(getTableId.value)
}else{
data.value = []
columns.value[1].title = '消耗量'
columns.value[2].title = '碳排因子'
columns.value[3].title = '排放量'
}
});
};
// 排放源树中被选中的树节点
const onSelectR = (selectedKey: string[], info: any) => {
selectedKeysR.value = selectedKey;
getTableId.value = info.selectedNodes[0].id
getPFYTableList(getTableId.value)
getTableHeardUnit(getTableId.value)
};
// 获取表头单位
const getTableHeardUnit = (id) => {
fetch(carbonInventoryCheck.findUnitById, { id: id }).then((res) => {
if (res.data) {
columns.value[1].title = '消耗量【' + res.data.unit + '】'
columns.value[2].title = '碳排因子【' + res.data.carbonEmission + '】'
columns.value[3].title = '排放量【' + res.data.carbonUnits + '】'
}
});
};
const expandedKeysR = ref<string[]>([]);
const selectedKeysR = ref<string[]>(['0-0']);
@@ -550,7 +580,8 @@
const labelCol = { span: 5 };
const wrapperCol = { span: 19 };
const formState = ref({
orgId: orgId.value
orgId: orgId.value,
year: props.year
})
// 计量单位的变量
const measurementUnit = ref([])
@@ -628,6 +659,7 @@
}
message.success('操作成功!');
getEmissionSourceTree();
getPFYTableList(res.data.id)
});
}
})
@@ -635,6 +667,65 @@
console.log('error', error);
});
};
// 填报表格数据
const data = ref([])
// 填报页表头
const columns = ref([
{
title: '日期',
dataIndex: 'acquisitionDate',
key: 'acquisitionDate',
},
{
title: '消耗量',
children: [
{
title: '数据来源',
dataIndex: 'dataSources',
key: 'dataSources',
},
{
title: '数值',
dataIndex: 'consumption',
key: 'consumption',
},
],
},
{
title: '碳排因子',
children: [
{
title: '数据来源',
dataIndex: 'carbonSource',
key: 'carbonSource',
},
{
title: '数值',
dataIndex: 'emissionFactors',
key: 'emissionFactors',
},
],
},
{
title: '排放量',
dataIndex: 'emissions',
key: 'emissions',
fixed: 'right',
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
width: 80,
fixed: 'right',
}
]);
// 获取table数据
const getPFYTableList = (id) => {
fetch(carbonInventoryCheck.getDetailsList , {inventoryId:id}).then((res) => {
data.value = res.data
});
};
const editUnit = (data) => {
getDictData()
addTreeNodeVisible.value = true;
@@ -734,6 +825,11 @@
})
const newTableData = ref([])
const total = ref<number>()
const selectedRowKeysEdit = ref([]);
const onSelectionChangeEdit = (selectedKeys, selectedRows) => {
selectedRowKeysEdit.value = selectedKeys;
editFormState.value.factorId = selectedKeys
};
const queryParams = ref({
pageNum: 1,
pageSize: 10,
@@ -744,8 +840,14 @@
pageNum: 1,
pageSize: 999
})
const edit = () => {
const edit = (record) => {
getDictList()
getNewTable()
editFormState.value.id = record.id
editFormState.value.dataSources = record.dataSources.value
editFormState.value.consumption = record.emissions
editFormState.value.collectionNode = record.carbonSource.value
editFormState.value.factorId = record.emissionFactors
editData.value = true
};
const getNewTable = () => {
@@ -754,6 +856,32 @@
total.value = res.data.total
});
};
// 数据来源选择框改变
const canEdit = ref(false);
const automatic = ref(false);
const changeSelect = (value) => {
if(value === '3'){
canEdit.value = true
automatic.value = true
}
};
// 定义采集节点数的变量
const collectingNodes = ref<TreeSelectProps['treeData']>([]);
const getDictList = () => {
// 获取自动采集节点的数据
fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE',orgId: orgId.value }).then((res) => {
collectingNodes.value = res.data
collectingNodes.value = collectingNodes.value.map(item => ({
value: item.id,
label: item.pointName,
children: item.children ? item.children.map(child => ({
value: child.id,
label: child.pointName
})) : []
}));
});
};
// 上传附件
const handleChange = (info: UploadChangeParam) => {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
@@ -769,8 +897,30 @@
const headers = {
authorization: 'authorization-text',
};
// 编辑数据提交
const submitEditData = () => {
editFormRef.value
.validate()
.then(() => {
console.log('values', editFormState, toRaw(editFormState));
editFormState.value.factorId = editFormState.value.factorId.join(',')
fetch(carbonInventoryCheck.updateTable, editFormState.value).then((res) => {
editData.value = false
getPFYTableList(getTableId.value)
})
})
.catch(error => {
console.log('error', error);
});
};
const onCloseEditData = () => {
editData.value = false
editFormState.value = {
orgId: orgId.value,
}
selectedRowKeysEdit.value = []
canEdit.value = false
automatic.value = false
};
// 分页器
const onChange = (pageNumber: number,size: number) => {
@@ -1179,6 +1329,11 @@
chartInstance = echarts.init(tplxChart.value);
chartInstance.setOption(option);
};
// 点击返回
const emit = defineEmits(['change-data'])
const changeParentData = () => {
emit('change-data', true,false);
};
</script>
<style lang="less" scoped>

View File

@@ -5,7 +5,7 @@
</div>
<!-- 填报页 -->
<div v-if="fillInPage">
<fillIn />
<fillIn :reportId="reportId" :year="year" @change-data="updateData" />
</div>
<!-- 新增报告弹窗 -->
<a-drawer
@@ -61,8 +61,8 @@
return http.post(api, params);
};
// 判断展示哪个页面
const isMainPage = ref(false);
const fillInPage = ref(true);
const isMainPage = ref(true);
const fillInPage = ref(false);
// 新增相关数据
const visible = ref(false);
const formState = ref({})
@@ -104,6 +104,8 @@
// 表格相关数据
const data = ref([]);
const mainRef = ref();
const reportId = ref();
const year = ref();
const tableConfig = ref({
title: '数据库',
api: carbonInventoryCheck.carbonInventoryList,
@@ -172,6 +174,8 @@
handle: (record: any) => {
isMainPage.value = false
fillInPage.value = true
reportId.value = record.id
year.value = record.reportYear
},
},
{
@@ -217,7 +221,11 @@
},
rowKey: 'id',
});
// 填报页
// 填报页点击返回
const updateData = (newDataOne,newDataTwo) => {
isMainPage.value = newDataOne
fillInPage.value = newDataTwo
};
</script>
<style lang="less" scoped>

View File

@@ -42,6 +42,7 @@
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"
@@ -54,7 +55,6 @@
@changeArea="changeArea"
@reset="reset"
:treeData="treeData"
:nowArea="nowArea"
></tabs1>
</a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render>
@@ -93,6 +93,10 @@ onMounted(() => {
getAllArea()
})
// 预加载flag获得分区数据后预加载抽屉防止获取ref报错
const preload = ref(false)
// 分层业务 =====================================================
// 所有楼层的数据
@@ -109,13 +113,12 @@ const changeFloor = (area: any) => {
treeData.value[0].selected = true
}
// 分区业务 =====================================================
// 分区结构树
const treeData = ref([])
// 当前选中的分区id
const nowArea = ref('1')
// 当前选中的分区序号 - 用于样式渲染
// 当前选中的分区序列 - 用于样式渲染
const area = ref(['1'])
// 线路内小灯泡 - 此处位置需前端写死
const bulbs = ref([
@@ -182,15 +185,18 @@ const changeArea = (result: any) => {
}
// 由当前组件控制的分区切换
const changeThisArea = (result: any) => {
tabs1Ref.value.changeCancel()
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) {
@@ -199,8 +205,10 @@ const changeThisArea = (result: any) => {
// 选中状态都设为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])
}
nowArea.value = level1.id
}
// 重置分区树所有当前选项
const reset = () => {
@@ -220,6 +228,7 @@ const computedClass = (string: string) => {
}
}
// 获得所有分区
const getAllArea = () => {
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
const data = res.data
@@ -242,7 +251,10 @@ const getAllArea = () => {
})
})
})
// 默认展示 线路 1-1
treeData.value = data[0].childList
// 开始预加载
preload.value = true
})
}
@@ -256,6 +268,7 @@ let visible = ref(false);
const toggleDrawer = () => {
visible.value = !visible.value;
};
// 抽屉tab1组件的引用
const tabs1Ref = ref()
</script>

View File

@@ -13,7 +13,7 @@
<div class="area">
<template v-if="!showAllButtonsArea">
<button v-for="(button, index) in limitedButtons1" :key="index"
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
:class="{ btn: true, selected: button.selected }" @click="changeArea(button)">
{{ button.name }}
</button>
<div style="margin-top: 10px">
@@ -22,7 +22,7 @@
</template>
<template v-else>
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
@click="selectButton(button)">
@click="changeArea(button)">
{{ button.name }}
</button>
<div style="margin-top: 10px">
@@ -53,7 +53,7 @@
<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="toggleSelection(button)">
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
<stop-outlined v-if="button.ctrlStatus" />
{{ button.name }}
</button>
@@ -63,7 +63,7 @@
</template>
<template v-else>
<button v-for="(button, index) in buttons2" :key="index"
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
<stop-outlined v-if="button.ctrlStatus" />
{{ button.name }}
</button>
@@ -91,26 +91,26 @@
</div>
<!-- 控制场景部分 -->
<div>
<div class="control-scene-area" v-show="thisButton2.mode.value == '3'">
<div class="control-scene-area" v-show="thisButton2.mode.value == 3">
<div class="control-scene-tab"></div>
<span class="control-scene-text"> 控制场景 </span>
</div>
<!-- 控制场景按钮部分 -->
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == '3'">
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3">
<button v-for="(button4, index) in controlScene" :key="index"
:class="{ btn: true, selected: thisButton2.mode.value == button4.value }" @click="selectButton4(button4)">
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }" @click="selectButton4(button4)">
{{ button4.label }}
</button>
</div>
</div>
<!-- 底部按钮区 -->
<div class="bottom">
<a-popconfirm
title="刷新将会取消已作出的修改"
ok-text="确定"
cancel-text="取消"
@confirm="changeConfirm"
@cancel="changeCancel"
<a-popconfirm
title="刷新将会取消已作出的修改"
ok-text="确定"
cancel-text="取消"
@confirm="changeConfirm"
@cancel="changeCancel"
>
<button class="flushed">刷新</button>
</a-popconfirm>
@@ -186,7 +186,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { ref, computed, onMounted } from 'vue';
import {
DownOutlined,
UpOutlined,
@@ -201,47 +201,25 @@ import { getAllEnum } from '/@/api/index'
// 初始化 =========================================================================
onMounted(() => {
// 设置分区
setArea(0)
// 默认选项
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
const data = res.data
// 控制模式
controlMode.value = data.IlluminationMode
// 控制场景
controlScene.value = data.IlluminationScene
})
}
// 父组件点击俯视图切换分区时,子组件切换线路
const setArea = (isHandle: number) => {
const data = props.treeData.find((item: any) => {
return item.id == props.nowArea
})
// 默认选中第一个分区
data.selected = true
// 修改当前选中的分区
selectedButton.value = props.nowArea
// 设置当前显示的回路
// 以 1-1 作为默认线路
const setArea = () => {
const data = props.treeData[0]
buttons2.value = data.childList
// 如果非初始化触发(点击俯视图)
if (isHandle) {
// 如果选中了线路则children中的某个selected为true
const button2 = data.childList.find((item: any) => {
return item.selected == true
})
// 如果选中了线路
if (button2) {
thisButton2.value = button2;
console.log(button2,'2222222222')
} else {
resetMode()
}
}
}
// 与父组件的交互 ===================================================================
@@ -251,10 +229,6 @@ const props = defineProps({
treeData: {
type: Array,
default: []
},
// 父组件选中的分区ID
nowArea: {
type: String,
}
});
// 向上传递修改选择样式
@@ -263,12 +237,6 @@ const props = defineProps({
* @method reset 用于重置按钮区
*/
const emit = defineEmits(['changeArea','reset']);
// 监听父组件选中的分区,并实时修改分区
watch(() => props.nowArea, () => {
setArea(1)
// 分区产生了切换, 线路的选中状态置空
handleButton.value = ''
})
// 照明区域业务 =======================================================================
@@ -283,15 +251,22 @@ const togglePlan = () => {
const showAllButtonsArea = ref(false);
// 被选中的分区 默认为1
const selectedButton = ref<string | undefined>('1');
// 区域切换(按钮点击-单选)事件
const selectButton = (button: any) => {
// 分区切换
const changeArea = (button: any) => {
// 当前选中按钮
selectedButton.value = button.id;
initMenu(1)
button.selected = true
// 设置当前选中的线路
buttons2.value = button.childList
// 重置按钮状态
emit('reset')
// 设置选中按钮状态
button.selected = true
// 改变俯视图样式
emit('changeArea', button.id);
// 当前选中线路 - 置空
resetMode()
// 最近交互过的按钮 - 置空
handleButton.value = ''
};
// 默认最多展示8个按钮
@@ -335,7 +310,9 @@ const selectAll = () => {
button.selected = false;
});
singleSelection.value = !singleSelection.value;
// 当前选中线路 - 置空
resetMode()
// 改变俯视图样式
emit('changeArea', [selectedButton.value])
};
@@ -346,7 +323,11 @@ const toggleAllSelection = () => {
let arr = [selectedButton.value]
// 全选
if (selectAllCheckbox.value) {
buttons2.value.forEach((item) => {
buttons2.value.forEach((item, index) => {
// 全选时,默认展示第一条线路的模式-场景按钮
if (index == 0) {
thisButton2.value = item
}
item.selected = true;
arr.push(item.id)
});
@@ -355,12 +336,24 @@ const toggleAllSelection = () => {
buttons2.value.forEach((item) => {
item.selected = false;
});
// 全不选时,隐藏模式-场景按钮
resetMode()
}
emit('changeArea', arr)
};
// 储存当前选中的线路
const thisButton2 = ref({
code: '',
mode: {
value: -1
},
scene: {
value: -1
}
})
// 照明回路的按钮切换
const toggleSelection = (button: any) => {
const changeLine = (button: any) => {
// 存储一次按钮ID用于禁用/启用交互
handleButton.value = button.id
// 根据按钮状态,展示禁用/启用按钮文本
@@ -373,13 +366,13 @@ const toggleSelection = (button: any) => {
// 选择时反控俯视图
let level1 = selectedButton.value
let level2 = button.id
// 单选模式需将所有按钮设为false
// 单选模式,需将所有其他按钮设为false
if (singleSelection.value) {
buttons2.value.forEach(item => {
item.selected = false;
});
emit('changeArea', [level1, level2])
button.selected = !button.selected;
emit('changeArea', [level1, level2])
} else {
// 多选模式传值
button.selected = !button.selected;
@@ -396,7 +389,7 @@ const toggleSelection = (button: any) => {
// 发生了选中事件
thisButton2.value = button
} else {
// 未发生选中 或 多选被取消
// 未发生选中 或 多选的其中一个按钮被取消
resetMode()
}
console.log(thisButton2,'button')
@@ -411,28 +404,17 @@ const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// 控制模式业务 ====================================================================
const thisButton2 = ref({
code: '',
mode: {
value: '0'
}
})
// 控制模式 - 按钮切换
const selectButton3 = (button3) => {
let checked = thisButton2.value.mode
console.log(button3.value,'---', checked.value)
// 如果点击了相同的按钮,未作出修改
// 如果点击了相同的按钮,未作出修改
if (checked.value === button3.value) {
return
}
checked.value = button3.value
selectedButton4.value = null; // 清空选中的控制场景按钮
};
const diff = () => {
console.log(thisButton2)
}
// 控制场景业务 =====================================================================
// 控制模式枚举
@@ -443,13 +425,63 @@ const controlScene = ref([])
const selectedButton4 = ref(null);
// 控制场景 - 按钮切换
const selectButton4 = (button4) => {
selectedButton4.value = button4.label;
// 当前选中的线路数据
const data = thisButton2.value
// 修改前的数据
let before = data.scene.value
// 修改后的数据
let after = button4.value
// 如果没有产生实质性的修改(修改前后相同,则跳出)
if (before === after) {
return
// 产生了修改
} else {
thisButton2.value.scene.value = after
// 查询之前是否修改过
const result = changeList.value.find((item, index) => {
item.index = index
return item.deviceGroup == data.code
})
// 如果已产生过修改
if (result) {
// 改回了原有的值,则从数组中移除
if (after == result.before) {
changeList.value.splice(result.index, 1)
// 修改为新值则只修改after
} else {
result.scene = after
// 临时flag用后移除
delete result.index
}
// 如果未产生过修改
} else {
changeList.value.push({
// 线路
deviceGroup: data.code,
deviceGroupName: data.name,
// 分区
region: data.pcode,
regionName: '',
// 修改前
before: before,
// 修改后
scene: after
})
}
console.log(changeList.value, 'changeList')
}
thisButton2.value.scene.value = after
console.log(thisButton2,'222222')
console.log(button4,'44444')
};
// 内侧弹窗 ========================================================================
// 需要修改的内容
const changeList: any = ref([])
// 需要向后端提交的修改内容
const submitArray = ref([])
const submitList = ref([])
const cxList = ref([
{
id: '1',
@@ -489,7 +521,7 @@ const cxList = ref([
},
]);
//撤销
const delBtn = (id: any) => {
const delBtn = () => {
cxList.value.pop();
console.log(cxList.value.length);
@@ -501,19 +533,6 @@ const delBtn = (id: any) => {
// 其他业务 ========================================================================
const isLoading = ref(false)
// 用于初始化5级联动的菜单
const initMenu = (tier: number) => {
// 1 = 照明区域 - 切换时,重置以下所有菜单
if (tier == 1) {
emit('reset')
// 灯具参数 隐藏
selectedButton4.value = null;
} else if (tier == 2) {
// 灯具参数 隐藏
selectedButton4.value = null;
}
}
// 刷新
const refresh = () => {
// 关闭执行弹窗
@@ -532,7 +551,16 @@ const refresh = () => {
// 执行确认
const executeVisible = ref<boolean>(false);
const showModal = () => {
http.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }).then(res => {
if (res.msg === 'success') {
isLoading.value = true
console.log(res)
} else {
isLoading.value = false
}
})
executeVisible.value = true;
};
// 确定
@@ -549,13 +577,20 @@ const resetMode = () => {
thisButton2.value = {
code: '',
mode: {
value: '0'
value: -1
},
scene: {
value: -1
}
}
}
// 暴露
defineExpose({
changeCancel
// 分区切换
changeArea,
// 线路切换
changeLine
});
</script>