Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="detailTable">
|
||||
</div>
|
||||
<div class="total"> </div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
defineOptions({
|
||||
energyType: 'carbonAssetsDetail', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const fetch = (api, params = { orgId }) => {
|
||||
return http.post(api, params);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.detailTable {
|
||||
height: 80%;
|
||||
}
|
||||
.total {
|
||||
height: 20%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div class="mainContant" v-if="homePage">
|
||||
<a-card class="card" style="margin-right: 1%; margin-bottom: 1%">
|
||||
<div class="top" style="background: rgba(252, 139, 78, 0.05)">
|
||||
<div class="moneyImg"
|
||||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-1.svg"
|
||||
/></div>
|
||||
<div class="moneyTitle">全国碳账户估值(CNY)</div>
|
||||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div>
|
||||
<div class="moneyDetail"
|
||||
><img width="34px" height="34px" src="../../../../src/icon/carbonAssetsSearch-1.svg"
|
||||
/></div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-1.svg" />
|
||||
<span>全国碳账户余额</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="calculation TLCard">
|
||||
<div class="money">75,000.00</div>
|
||||
<div class="moneyType">期初余额(tCO2)</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
|
||||
<div class="calculation TLCard">
|
||||
<div class="money">20,000.00</div>
|
||||
<div class="moneyType">
|
||||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" />
|
||||
增加(tCO2)
|
||||
</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" />
|
||||
<div class="calculation TLCard">
|
||||
<div class="money">20,000.00</div>
|
||||
<div class="moneyType">
|
||||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" />
|
||||
减少(tCO2)
|
||||
</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" />
|
||||
<div class="calculation TLCard">
|
||||
<div class="money">75,000.00</div>
|
||||
<div class="moneyType">期末余额(tCO2)</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="card" style="margin-bottom: 1%">
|
||||
<div class="top" style="background: rgba(234, 71, 54, 0.05)">
|
||||
<div class="moneyImg"
|
||||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-2.svg"
|
||||
/></div>
|
||||
<div class="moneyTitle">地方碳账户估值(CNY)</div>
|
||||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div>
|
||||
<div class="moneyDetail"
|
||||
><img width="34px" height="34px" src="../../../../src/icon/carbonAssetsSearch-2.svg"
|
||||
/></div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-2.svg" />
|
||||
<span>地方碳账户余额</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="calculation TRCard">
|
||||
<div class="money">75,000.00</div>
|
||||
<div class="moneyType">期初余额(tCO2)</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
|
||||
<div class="calculation TRCard">
|
||||
<div class="money">20,000.00</div>
|
||||
<div class="moneyType">
|
||||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" />
|
||||
增加(tCO2)
|
||||
</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" />
|
||||
<div class="calculation TRCard">
|
||||
<div class="money">20,000.00</div>
|
||||
<div class="moneyType">
|
||||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" />
|
||||
减少(tCO2)
|
||||
</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" />
|
||||
<div class="calculation TRCard">
|
||||
<div class="money">75,000.00</div>
|
||||
<div class="moneyType">期末余额(tCO2)</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="card" style="margin-right: 1%">
|
||||
<div class="top" style="background: rgba(65, 163, 224, 0.05)">
|
||||
<div class="moneyImg"
|
||||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-3.svg"
|
||||
/></div>
|
||||
<div class="moneyTitle">CCER资产估值(CNY)</div>
|
||||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div>
|
||||
<div class="moneyDetail"
|
||||
><img width="34px" height="34px" src="../../../../src/icon/carbonAssetsSearch-3.svg"
|
||||
/></div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-3.svg" />
|
||||
<span>全国碳账户余额</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="calculation BLCard">
|
||||
<div class="money">75,000.00</div>
|
||||
<div class="moneyType">期初余额(tCO2)</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
|
||||
<div class="calculation BLCard">
|
||||
<div class="money">20,000.00</div>
|
||||
<div class="moneyType">
|
||||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" />
|
||||
增加(tCO2)
|
||||
</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" />
|
||||
<div class="calculation BLCard">
|
||||
<div class="money">20,000.00</div>
|
||||
<div class="moneyType">
|
||||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" />
|
||||
减少(tCO2)
|
||||
</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" />
|
||||
<div class="calculation BLCard">
|
||||
<div class="money">75,000.00</div>
|
||||
<div class="moneyType">期末余额(tCO2)</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="card">
|
||||
<div class="top" style="background: rgba(37, 192, 150, 0.05)">
|
||||
<div class="moneyImg"
|
||||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-4.svg"
|
||||
/></div>
|
||||
<div class="moneyTitle">全国碳账户估值(CNY)</div>
|
||||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div>
|
||||
</div>
|
||||
<div class="title" style="justify-content: center">
|
||||
<img
|
||||
width="17px"
|
||||
height="17px"
|
||||
style="transform: rotate(90deg)"
|
||||
src="../../../../src/icon/carbonAssetsEqual.svg" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="BRCard">
|
||||
<div class="money">300,000.00</div>
|
||||
<div class="moneyType">全国碳账户资产估值</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
|
||||
<div class="BRCard">
|
||||
<div class="money">300,000.00</div>
|
||||
<div class="moneyType">地方碳账户资产估值</div>
|
||||
</div>
|
||||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
|
||||
<div class="BRCard">
|
||||
<div class="money">300,000.00</div>
|
||||
<div class="moneyType">CCER碳资产估值</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="detail" v-else>
|
||||
<carbonAssetsDetail />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import carbonAssetsDetail from './carbonAssetsDetail/index.vue';
|
||||
defineOptions({
|
||||
energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
const homePage = ref(true);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mainContant {
|
||||
background: #f1f2f6;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.card {
|
||||
width: 49%;
|
||||
height: 49%;
|
||||
.TLCard {
|
||||
background: linear-gradient(180deg, rgba(255, 249, 246, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
border: 1px solid rgba(252, 139, 78, 0.3);
|
||||
}
|
||||
.TRCard {
|
||||
background: linear-gradient(180deg, rgba(254, 245, 244, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
border: 1px solid rgba(241, 100, 69, 0.2);
|
||||
}
|
||||
.BLCard {
|
||||
background: linear-gradient(180deg, rgba(245, 250, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
border: 1px solid rgba(72, 168, 228, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-card-body) {
|
||||
height: 100%;
|
||||
}
|
||||
.top {
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.moneyImg {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.moneyTitle {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.moneyTotal {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
line-height: 52px;
|
||||
text-align: left;
|
||||
}
|
||||
.moneyDetail {
|
||||
width: 10%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.2px;
|
||||
line-height: 26px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.calculation {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
.money {
|
||||
opacity: 1;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 50px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.moneyType {
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.BRCard {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
background: linear-gradient(180deg, rgba(244, 252, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
border: 1px solid rgba(42, 197, 155, 0.3);
|
||||
padding: 10px;
|
||||
.money {
|
||||
opacity: 1;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 50px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.moneyType {
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -466,6 +466,7 @@
|
||||
const addTreeNode = ref();
|
||||
const handleOk = (e: MouseEvent) => {
|
||||
editTreeNode.value.emissionName = addTreeNode.value;
|
||||
editTreeNode.value.orgId = orgId.value;
|
||||
http.post(carbonEmissionFactorLibrary.creat, editTreeNode.value).then(() => {
|
||||
getOrgTree();
|
||||
NsMessage.success('操作成功');
|
||||
@@ -550,7 +551,9 @@
|
||||
|
||||
const onClose = () => {
|
||||
visible.value = false;
|
||||
formData.value = {};
|
||||
formData.value = {
|
||||
orgId: orgId.value,
|
||||
};
|
||||
userAuthList.value.splice(0);
|
||||
};
|
||||
const closeUnitManag = () => {
|
||||
@@ -588,6 +591,7 @@
|
||||
formData.value = {
|
||||
carbonEmissionPrefix: 't',
|
||||
numberOfReferences: '10',
|
||||
orgId: orgId.value,
|
||||
};
|
||||
userAuthList.value.splice(0);
|
||||
});
|
||||
|
||||
@@ -355,7 +355,7 @@
|
||||
carbonInventoryCheck,
|
||||
} from '/@/api/carbonEmissionFactorLibrary';
|
||||
import { group } from '/@/api/deviceManage';
|
||||
import { debug } from 'node:console';
|
||||
import { debug, log } from 'node:console';
|
||||
defineOptions({
|
||||
energyType: 'fillInPage', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
@@ -474,6 +474,8 @@
|
||||
queryEmissionData.value.categoryId = info.node.conId;
|
||||
getEmissionStatistic();
|
||||
} else if (isClickedTplx.value) {
|
||||
queryFlowDirection.value.categoryId = info.node.conId;
|
||||
getCarbonFlowDirection();
|
||||
}
|
||||
};
|
||||
// 获取碳盘查报告树
|
||||
@@ -488,6 +490,7 @@
|
||||
categoryId.value = res.data[0].children[0].conId;
|
||||
formState.value.categoryId = categoryId.value;
|
||||
queryEmissionData.value.categoryId = categoryId.value;
|
||||
queryFlowDirection.value.categoryId = categoryId.value;
|
||||
selectedIds.value = getAllIds(gData.value);
|
||||
}
|
||||
getEmissionSourceTree();
|
||||
@@ -602,6 +605,7 @@
|
||||
// 类别配置树点击确定
|
||||
const queryConfigure = ref({
|
||||
orgId: orgId.value,
|
||||
reportId: props.reportId,
|
||||
});
|
||||
const submitCategory = () => {
|
||||
fetch(carbonInventoryCheck.updateCategoryTree, queryConfigure.value).then((res) => {
|
||||
@@ -957,8 +961,13 @@
|
||||
.validate()
|
||||
.then(() => {
|
||||
console.log('values', editFormState, toRaw(editFormState));
|
||||
editFormState.value.factorId = editFormState.value.factorId.join(',');
|
||||
if (editFormState.value.collectionNode.value) {
|
||||
if (editFormState.value.factorId.length > 0) {
|
||||
editFormState.value.factorId = editFormState.value.factorId.join(',');
|
||||
}
|
||||
if (editFormState.value.dataSources.value) {
|
||||
editFormState.value.dataSources = editFormState.value.dataSources.value;
|
||||
}
|
||||
if (editFormState.value.collectionNode) {
|
||||
editFormState.value.collectionNode = editFormState.value.collectionNode.value;
|
||||
}
|
||||
fetch(carbonInventoryCheck.updateTable, editFormState.value).then((res) => {
|
||||
@@ -1000,10 +1009,23 @@
|
||||
fillInPage.value = false;
|
||||
isClickedPftj.value = false;
|
||||
isClickedTplx.value = true;
|
||||
getCarbonFlowDirection();
|
||||
setTimeout(() => {
|
||||
drawEcharts();
|
||||
}, 500);
|
||||
};
|
||||
// 获取碳排流向数据
|
||||
const queryFlowDirection = ref({
|
||||
orgId: orgId.value,
|
||||
reportId: props.reportId,
|
||||
year: props.year,
|
||||
categoryId: categoryId.value,
|
||||
});
|
||||
const getCarbonFlowDirection = () => {
|
||||
fetch(carbonInventoryCheck.carbonFlowDirection, queryFlowDirection.value).then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
};
|
||||
// 获取排放统计数据
|
||||
const queryEmissionData = ref({
|
||||
orgId: orgId.value,
|
||||
@@ -1015,13 +1037,30 @@
|
||||
const getEmissionStatistic = () => {
|
||||
fetch(carbonInventoryCheck.emissionStatistic, queryEmissionData.value).then((res) => {
|
||||
pftjData.value = res.data.body;
|
||||
const data = res.data.title;
|
||||
// 将数据表头数据按顺序组织
|
||||
const orderedKeys = res.data.title.map((obj) => Object.keys(obj)[0]); // 获取原始键的顺序
|
||||
const result: { [key: string]: string } = {};
|
||||
|
||||
res.data.title.forEach((obj) => {
|
||||
const key = Object.keys(obj)[0];
|
||||
result[key] = obj[key];
|
||||
});
|
||||
|
||||
// 确保按照原始顺序返回结果
|
||||
const orderedResult: { [key: string]: string } = {};
|
||||
orderedKeys.forEach((key) => {
|
||||
if (result[key] !== undefined) {
|
||||
orderedResult[key] = result[key];
|
||||
}
|
||||
});
|
||||
|
||||
const data = orderedResult;
|
||||
// 将数据转换为 DataItem 数组
|
||||
tableHeader.value = [];
|
||||
pftjColumn.value = [
|
||||
{
|
||||
title: '排放分类',
|
||||
dataIndex: 'emissionCategory',
|
||||
dataIndex: 'emissionClassify',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -1029,10 +1068,10 @@
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('emissionCategory', record, pftjData.value);
|
||||
const rowSpan = getRowSpan('emissionClassify', record, pftjData.value);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
pftjData.value[rowIndex - 1].emissionCategory == record.emissionCategory
|
||||
pftjData.value[rowIndex - 1].emissionClassify == record.emissionClassify
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
@@ -1431,7 +1470,6 @@
|
||||
min-width: fit-content;
|
||||
> div {
|
||||
background-color: @white;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" />
|
||||
</div>
|
||||
<!-- 填报页 -->
|
||||
<div v-if="fillInPage">
|
||||
<div v-if="fillInPage" style="height: 100%">
|
||||
<fillIn :reportId="reportId" :year="year" @change-data="updateData" />
|
||||
</div>
|
||||
<!-- 新增报告弹窗 -->
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
right: 496px;
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
z-index: 99;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
@@ -44,6 +44,9 @@
|
||||
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;
|
||||
@@ -68,6 +71,7 @@
|
||||
rgba(255, 112, 3, 1) 91.21%,
|
||||
rgba(255, 129, 3, 1) 100%
|
||||
);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
@@ -97,6 +101,9 @@
|
||||
width: 140px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
:first-child {
|
||||
color: white;
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -121,6 +121,9 @@
|
||||
<div class="control-scene-area" v-show="thisButton2.mode.value == 3">
|
||||
<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" v-show="thisButton2.mode.value == 3">
|
||||
@@ -135,15 +138,20 @@
|
||||
</div>
|
||||
<!-- 底部按钮区 -->
|
||||
<div class="bottom">
|
||||
<a-popconfirm
|
||||
title="刷新将会取消已作出的修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="changeConfirm"
|
||||
@cancel="changeCancel">
|
||||
<button class="flushed">刷新</button>
|
||||
</a-popconfirm>
|
||||
<button class="execute" @click="showModal">执行</button>
|
||||
<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>
|
||||
|
||||
<!-- 点击执行时的弹出框 -->
|
||||
@@ -153,7 +161,7 @@
|
||||
<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="j-box" v-for="(item, index) in diffList" :key="item.id">
|
||||
<div class="journal" style="margin-top: 20px">
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
@@ -161,10 +169,17 @@
|
||||
<span
|
||||
class="title-text"
|
||||
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.name }}</span
|
||||
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span
|
||||
>
|
||||
</div>
|
||||
<button class="cxbtn" @click="delBtn(item.id)">撤销</button>
|
||||
<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">
|
||||
@@ -178,25 +193,38 @@
|
||||
<div class="btn-item">
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<span>100lux</span>
|
||||
<!-- 由于数字0也会被判为false,故只判断undefined 和 null -->
|
||||
<span>{{
|
||||
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>30lux</span>
|
||||
<span>{{
|
||||
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<span>{{
|
||||
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
<span>{{
|
||||
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>4000k</span>
|
||||
<span>{{
|
||||
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>3800k</span>
|
||||
<span>
|
||||
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -206,7 +234,7 @@
|
||||
<div style="width: 100%; height: 60px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="executeVisible = false">取消</button>
|
||||
<button class="execute">执行</button>
|
||||
<button class="execute" @click="submitChangeList">执行</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
@@ -239,7 +267,7 @@
|
||||
controlScene.value = data.IlluminationScene;
|
||||
});
|
||||
};
|
||||
// 以 1-1 作为默认线路
|
||||
// 以 1-1 作为默认回路
|
||||
const setArea = () => {
|
||||
const data = props.treeData[0];
|
||||
buttons2.value = data.childList;
|
||||
@@ -272,14 +300,14 @@
|
||||
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtonsArea = ref(false);
|
||||
// 被选中的分区 默认为1
|
||||
// 被选中的分区 默认为1 用于选中样式渲染
|
||||
const selectedButton = ref<string | undefined>('1');
|
||||
|
||||
// 分区切换
|
||||
const changeArea = (button: any) => {
|
||||
// 当前选中按钮
|
||||
selectedButton.value = button.id;
|
||||
// 设置当前选中的线路
|
||||
// 设置当前选中的回路
|
||||
buttons2.value = button.childList;
|
||||
// 重置按钮状态
|
||||
emit('reset');
|
||||
@@ -287,7 +315,7 @@
|
||||
button.selected = true;
|
||||
// 改变俯视图样式
|
||||
emit('changeArea', button.id);
|
||||
// 当前选中线路 - 置空
|
||||
// 当前选中回路 - 置空
|
||||
resetMode();
|
||||
// 最近交互过的按钮 - 置空
|
||||
handleButton.value = '';
|
||||
@@ -299,7 +327,6 @@
|
||||
|
||||
// 最近交互过的按钮id,用于禁用和启用
|
||||
const handleButton = ref('');
|
||||
|
||||
// 面板启用/禁用状态
|
||||
const isPlanEnabled2 = ref(true);
|
||||
// 面板启用/禁用切换事件
|
||||
@@ -309,7 +336,7 @@
|
||||
return message.info('请选择照明回路');
|
||||
}
|
||||
// 获取最近交互过的按钮
|
||||
const btn: any = buttons2.value.find((button) => button.id === handleButton.value);
|
||||
const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
|
||||
let panel = +!btn.ctrlStatus;
|
||||
isLoading.value = true;
|
||||
http
|
||||
@@ -334,11 +361,12 @@
|
||||
// 多选与单选切换事件
|
||||
const selectAll = () => {
|
||||
selectAllCheckbox.value = false;
|
||||
buttons2.value.forEach((button) => {
|
||||
// 切换时清空当前所有选项
|
||||
buttons2.value.forEach((button: any) => {
|
||||
button.selected = false;
|
||||
});
|
||||
singleSelection.value = !singleSelection.value;
|
||||
// 当前选中线路 - 置空
|
||||
// 当前选中回路 - 置空
|
||||
resetMode();
|
||||
// 改变俯视图样式
|
||||
emit('changeArea', [selectedButton.value]);
|
||||
@@ -351,8 +379,8 @@
|
||||
let arr = [selectedButton.value];
|
||||
// 全选
|
||||
if (selectAllCheckbox.value) {
|
||||
buttons2.value.forEach((item, index) => {
|
||||
// 全选时,默认展示第一条线路的模式-场景按钮
|
||||
buttons2.value.forEach((item: any, index: number) => {
|
||||
// 全选时,默认展示第一条回路的模式-场景按钮
|
||||
if (index == 0) {
|
||||
thisButton2.value = item;
|
||||
}
|
||||
@@ -361,7 +389,7 @@
|
||||
});
|
||||
// 全不选
|
||||
} else {
|
||||
buttons2.value.forEach((item) => {
|
||||
buttons2.value.forEach((item: any) => {
|
||||
item.selected = false;
|
||||
});
|
||||
// 全不选时,隐藏模式-场景按钮
|
||||
@@ -370,9 +398,11 @@
|
||||
emit('changeArea', arr);
|
||||
};
|
||||
|
||||
// 储存当前选中的线路
|
||||
// 储存当前选中的回路
|
||||
const thisButton2 = ref({
|
||||
code: '',
|
||||
name: '',
|
||||
pcode: '',
|
||||
mode: {
|
||||
value: -1,
|
||||
},
|
||||
@@ -390,13 +420,12 @@
|
||||
} else {
|
||||
isPlanEnabled2.value = false;
|
||||
}
|
||||
|
||||
// 选择时反控俯视图
|
||||
let level1 = selectedButton.value;
|
||||
let level2 = button.id;
|
||||
// 单选模式,需将所有其他按钮设为false
|
||||
if (singleSelection.value) {
|
||||
buttons2.value.forEach((item) => {
|
||||
buttons2.value.forEach((item: any) => {
|
||||
item.selected = false;
|
||||
});
|
||||
button.selected = !button.selected;
|
||||
@@ -405,7 +434,7 @@
|
||||
// 多选模式传值
|
||||
button.selected = !button.selected;
|
||||
const arr = [level1];
|
||||
buttons2.value.forEach((item) => {
|
||||
buttons2.value.forEach((item: any) => {
|
||||
if (item.selected) {
|
||||
arr.push(item.id);
|
||||
}
|
||||
@@ -433,7 +462,7 @@
|
||||
// 控制模式业务 ====================================================================
|
||||
|
||||
// 控制模式 - 按钮切换
|
||||
const selectButton3 = (button3) => {
|
||||
const selectButton3 = (button3: any) => {
|
||||
let checked = thisButton2.value.mode;
|
||||
console.log(button3.value, '---', checked.value);
|
||||
// 如果点击了相同的按钮,则未作出修改
|
||||
@@ -449,11 +478,9 @@
|
||||
const controlMode = ref([]);
|
||||
// 场景枚举
|
||||
const controlScene = ref([]);
|
||||
// 控制场景 - 当前选择按钮
|
||||
const selectedButton4 = ref(null);
|
||||
// 控制场景 - 按钮切换
|
||||
const selectButton4 = (button4) => {
|
||||
// 当前选中的线路数据
|
||||
// 当前选中的回路数据
|
||||
const data = thisButton2.value;
|
||||
// 修改前的数据
|
||||
let before = data.scene.value;
|
||||
@@ -461,12 +488,12 @@
|
||||
let after = button4.value;
|
||||
// 如果没有产生实质性的修改(修改前后相同,则跳出)
|
||||
if (before === after) {
|
||||
return;
|
||||
return message.info('未产生实际修改');
|
||||
// 产生了修改
|
||||
} else {
|
||||
thisButton2.value.scene.value = after;
|
||||
// 查询之前是否修改过
|
||||
const result = changeList.value.find((item, index) => {
|
||||
const result = changeList.value.find((item: any, index: number) => {
|
||||
item.index = index;
|
||||
return item.deviceGroup == data.code;
|
||||
});
|
||||
@@ -484,7 +511,7 @@
|
||||
// 如果未产生过修改
|
||||
} else {
|
||||
changeList.value.push({
|
||||
// 线路
|
||||
// 回路
|
||||
deviceGroup: data.code,
|
||||
deviceGroupName: data.name,
|
||||
// 分区
|
||||
@@ -498,112 +525,100 @@
|
||||
}
|
||||
console.log(changeList.value, 'changeList');
|
||||
}
|
||||
|
||||
thisButton2.value.scene.value = after;
|
||||
console.log(thisButton2, '222222');
|
||||
console.log(button4, '44444');
|
||||
};
|
||||
|
||||
// 内侧弹窗 ========================================================================
|
||||
|
||||
// 需要修改的内容
|
||||
const changeList: any = ref([]);
|
||||
// 需要向后端提交的修改内容
|
||||
const submitList = ref([]);
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
//撤销
|
||||
const delBtn = () => {
|
||||
cxList.value.pop();
|
||||
console.log(cxList.value.length);
|
||||
|
||||
if (cxList.value.length === 0) {
|
||||
executeVisible.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 其他业务 ========================================================================
|
||||
// 底部按钮区 ======================================================================
|
||||
|
||||
const isLoading = ref(false);
|
||||
// 执行按钮loading
|
||||
const buttonLoading = ref(false);
|
||||
// 刷新
|
||||
const refresh = () => {
|
||||
// 关闭执行弹窗
|
||||
executeVisible.value = false;
|
||||
// 设置当前选中的序列
|
||||
selectedButton.value = '1';
|
||||
// 重置选中样式 和 按钮选中状态
|
||||
emit('changeArea', ['1']);
|
||||
emit('reset');
|
||||
// 默认选择第一个楼层
|
||||
let data = props.treeData[0];
|
||||
// 清空保存的修改
|
||||
changeList.value = [];
|
||||
// 默认选中
|
||||
data.selected = true;
|
||||
// 默认选中 1-1 分区 回路
|
||||
buttons2.value = data.childList;
|
||||
selectedButton4.value = null;
|
||||
resetMode();
|
||||
};
|
||||
// 执行确认
|
||||
const executeVisible = ref<boolean>(false);
|
||||
// 右下角的执行事件
|
||||
const showModal = () => {
|
||||
if (!changeList.value.length) {
|
||||
return message.info('未产生任何修改');
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
http
|
||||
.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
|
||||
.then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
isLoading.value = true;
|
||||
console.log(res);
|
||||
diffList.value = res.data;
|
||||
executeVisible.value = true;
|
||||
} else {
|
||||
isLoading.value = false;
|
||||
message.warning('获取修改内容失败');
|
||||
}
|
||||
buttonLoading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
executeVisible.value = true;
|
||||
};
|
||||
|
||||
// 确定
|
||||
const changeConfirm = () => {
|
||||
refresh();
|
||||
};
|
||||
|
||||
// 取消
|
||||
// 通用取消
|
||||
const changeCancel = () => {};
|
||||
|
||||
// 将当前选择的线路置空
|
||||
// 内侧弹窗 ========================================================================
|
||||
|
||||
// 内侧弹窗显隐
|
||||
const executeVisible = ref<boolean>(false);
|
||||
// 修改模式 需要向后端提交的内容
|
||||
const changeList: any = ref([]);
|
||||
// 展示修改前后差异的内容
|
||||
const diffList = ref([]);
|
||||
//撤销
|
||||
const delBtn = (obj: any) => {
|
||||
console.log(obj, '当前选择的修改内容');
|
||||
// 将treeData对应回路的数据改回,数据以后端为准
|
||||
const area = props.treeData.find((item: any) => {
|
||||
return item.code == obj.region;
|
||||
});
|
||||
const line = area.childList.find((item: any) => {
|
||||
return item.code == obj.deviceGroup;
|
||||
});
|
||||
line.scene.value = obj.stateBefore.scene.value;
|
||||
// 将 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 = () => {};
|
||||
|
||||
// 其他业务 ========================================================================
|
||||
|
||||
// 将当前选择的回路置空
|
||||
const resetMode = () => {
|
||||
thisButton2.value = {
|
||||
code: '',
|
||||
name: '',
|
||||
pcode: '',
|
||||
mode: {
|
||||
value: -1,
|
||||
},
|
||||
@@ -613,11 +628,11 @@
|
||||
};
|
||||
};
|
||||
|
||||
// 暴露
|
||||
// 向外暴露方法
|
||||
defineExpose({
|
||||
// 分区切换
|
||||
changeArea,
|
||||
// 线路切换
|
||||
// 回路切换
|
||||
changeLine,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
import { NsSelect } from './../../../../../lib/component/form/select/index';
|
||||
import { dateUtil } from '/nerv-lib/util/date-util';
|
||||
import data from './mock.json';
|
||||
import { http } from '/nerv-lib/util';
|
||||
import { ref } from 'vue';
|
||||
import { device, group } from '/@/api/deviceManage';
|
||||
import { group } from '/@/api/deviceManage';
|
||||
import { dict } from '/@/api';
|
||||
import { origanizemanage } from '/@/api/origanizemanage';
|
||||
const tableCalKeyMap = [
|
||||
{
|
||||
title: '来源企业',
|
||||
@@ -103,7 +98,8 @@ export const formSchema = [
|
||||
field: 'pointName',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入节点名称(必填)',
|
||||
placeholder: '请输入',
|
||||
maxLength: 32,
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
@@ -117,7 +113,7 @@ export const formSchema = [
|
||||
field: 'pointType',
|
||||
component: 'NsSelectApi',
|
||||
componentProps: {
|
||||
placeholder: '请选择节点类型(必填)',
|
||||
placeholder: '请选择',
|
||||
api: () => dict({ params: { dicKey: 'COUNT_POINT' } }),
|
||||
// params: { dicKey: 'COUNT_POINT' },
|
||||
immediate: true,
|
||||
|
||||
Reference in New Issue
Block a user