Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
@@ -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,
|
||||
|
@@ -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 = [
|
||||
{
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user