Browse Source

taskid:282 remark:'commit'

temp
fks-xuxinyue 4 months ago
parent
commit
ea25c22383
  1. 8
      hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
  2. 57
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
  3. 53
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index2.vue
  4. 1
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
  5. 8
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
  6. 184
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue
  7. 115
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
  8. 56
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue

8
hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts

@ -74,4 +74,12 @@ export enum carbonAssets {
export enum uploadPic { export enum uploadPic {
uploadfiles = '/carbon-smart/api/common/file/uploadfiles', uploadfiles = '/carbon-smart/api/common/file/uploadfiles',
select = '/carbon-smart/api/common/file/select', select = '/carbon-smart/api/common/file/select',
uploadfile = '/carbon-smart/api/common/file/uploadfile',
}
// 碳规划
export enum carbonPlanning {
// 全部
// 详情
searchListByYear = '/carbon-smart/api/carbon/planning/searchListByYear',
searchListByMonth = '/carbon-smart/api/carbon/planning/searchListByMonth',
} }

57
hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue

@ -172,7 +172,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineEmits, toRaw } from 'vue'; import { ref, defineEmits, toRaw } from 'vue';
import { http } from '/nerv-lib/util/http'; import { http } from '/nerv-lib/util/http';
import { NSAxios } from '/nerv-lib/util/http/axios';
import { UploadOutlined } from '@ant-design/icons-vue'; import { UploadOutlined } from '@ant-design/icons-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue'; import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import { Pagination, Modal, message } from 'ant-design-vue'; import { Pagination, Modal, message } from 'ant-design-vue';
@ -292,7 +291,12 @@
visible.value = true; visible.value = true;
formState.value.id = record.id; formState.value.id = record.id;
fetch(uploadPic.select, { bizId: record.id, bizTpye: 1 }).then((res) => { fetch(uploadPic.select, { bizId: record.id, bizTpye: 1 }).then((res) => {
fileList.value = res.data; fileList.value = res.data.map((item) => ({
uid: item.id.toString(), // 使id
name: item.fileName, //
status: 'done', //
url: item.filePath, // URLURL
}));
}); });
formState.value = JSON.parse(JSON.stringify(record)); formState.value = JSON.parse(JSON.stringify(record));
if (formState.value.expenditure === 0) { if (formState.value.expenditure === 0) {
@ -329,7 +333,6 @@
cancelText: '取消', cancelText: '取消',
onOk() { onOk() {
fetch(carbonAssets.delete, { ids: id }).then((res) => { fetch(carbonAssets.delete, { ids: id }).then((res) => {
debugger;
message.success('操作成功!'); message.success('操作成功!');
getDetailList(); getDetailList();
}); });
@ -398,18 +401,11 @@
}; };
// //
const fileList = ref<UploadProps['fileList']>([]); const fileList = ref<UploadProps['fileList']>([]);
// const headers = {
// authorization: 'authorization-text',
// };
// const beforeUpload = (file: File) => {
// return false; // true
// };
const beforeUpload: UploadProps['beforeUpload'] = (file) => { const beforeUpload: UploadProps['beforeUpload'] = (file) => {
// fileList.value = [...(fileList.value || []), file];
return false; return false;
}; };
const handleChange = (info: UploadChangeParam) => { const handleChange = (info: UploadChangeParam) => {
fileList.value = [...info.fileList] fileList.value = [...info.fileList];
if (info.file.status !== 'uploading') { if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList); console.log(info.file, info.fileList);
} }
@ -431,20 +427,6 @@
const uploadQuery = ref({ const uploadQuery = ref({
bizTpye: 1, bizTpye: 1,
}); });
const config = {
headers: {
'Content-Type': 'multipart/form-data',
},
};
function createHttp() {
/** todo 临时去除超时时间 */
return new NSAxios({
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
withCredentials: true,
});
}
const uploadHttp = createHttp();
const url = '/carbon-smart/api/common/file/uploadfiles'; // api
const onSubmit = () => { const onSubmit = () => {
formRef.value formRef.value
.validate() .validate()
@ -460,16 +442,11 @@
if (res.data.id && fileList.value.length !== 0) { if (res.data.id && fileList.value.length !== 0) {
// uploadQuery.value.bizId = res.data.id; // uploadQuery.value.bizId = res.data.id;
const formData = ref(new FormData()); const formData = ref(new FormData());
fileList.value.forEach(file => { fileList.value.forEach((file) => {
console.log(file,'xxy'); formData.value.append('files', file.originFileObj);
formData.value.append('files[]', file);
}); });
formData.value.append('bizTpye', 1); formData.value.append('bizTpye', 1);
formData.value.append('bizId', res.data.id); formData.value.append('bizId', res.data.id);
// uploadQuery.value.files = formData.value;
// uploadQuery.value.files = fileList.value;
debugger;
fetch(uploadPic.uploadfiles, formData.value) fetch(uploadPic.uploadfiles, formData.value)
.then((res) => { .then((res) => {
message.success('操作成功!'); message.success('操作成功!');
@ -479,18 +456,6 @@
.catch((error) => { .catch((error) => {
console.log('error', error); console.log('error', error);
}); });
console.log(config,'xxy555');
// uploadHttp
// .post(url, formData.value, config.headers)
// .then((res) => {
// console.log(res);
// })
// .catch((res) => {
// console.log(res);
// });
} else { } else {
message.success('操作成功!'); message.success('操作成功!');
visible.value = false; visible.value = false;

53
hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index2.vue

@ -1,53 +0,0 @@
<template>
<div class="clearfix">
<a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
<a-button>
<upload-outlined></upload-outlined>
Select File
</a-button>
</a-upload>
<a-button
type="primary"
:disabled="fileList.length === 0"
:loading="uploading"
style="margin-top: 16px"
@click="handleUpload"
>
{{ uploading ? 'Uploading' : 'Start Upload' }}
</a-button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadProps } from 'ant-design-vue';
const fileList = ref<UploadProps['fileList']>([]);
const uploading = ref<boolean>(false);
const handleRemove: UploadProps['onRemove'] = file => {
const index = fileList.value.indexOf(file);
const newFileList = fileList.value.slice();
newFileList.splice(index, 1);
fileList.value = newFileList;
};
const beforeUpload: UploadProps['beforeUpload'] = file => {
fileList.value = [...(fileList.value || []), file];
return false;
};
const handleUpload = () => {
const formData = new FormData();
fileList.value.forEach((file: UploadProps['fileList'][number]) => {
debugger
formData.append('files[]', file as any);
});
const fileBlob = formData.get('files');
console.log(fileBlob);
uploading.value = true;
debugger
};
</script>

1
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue

@ -54,6 +54,7 @@
// //
const changeYearData = () => { const changeYearData = () => {
debugger
queryParams.value.year = selectYear.value; queryParams.value.year = selectYear.value;
getTableList(); getTableList();
}; };

8
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue

@ -27,7 +27,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref,defineExpose } from 'vue';
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
defineOptions({ defineOptions({
@ -139,9 +139,9 @@
chartInstance.setOption(option); chartInstance.setOption(option);
}; };
setTimeout(() => { defineExpose({
drawEcharts(); drawEcharts,
}, 500); });
// //
const columns = ref([ const columns = ref([
{ {

184
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue

@ -9,23 +9,51 @@
</div> </div>
</div> </div>
<div class="contant"> <div class="contant">
<a-card class="chartsPart"> <a-card class="chartsPart" v-if="showPart">
<div class="chart" ref="chartRef"></div> <div class="chart" ref="chartRef"></div>
<div class="contrast"> <div class="contrast">
<div class="model"> <div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div> <div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantityTitle">2023年实际用量</div> <div class="quantityTitle">2023年实际用量</div>
</div> </div>
<div class="model"></div> <div class="model">
<div class="model"></div> <div class="quantity"><span>12,500.00</span>kwh</div>
<div class="model"></div> <div class="quantityTitle">2024年实际用量</div>
<div class="model"></div> </div>
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantityTitle">2024年预算</div>
</div>
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantityTitle">基准值</div>
</div>
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantityTitle">实际|预算</div>
</div>
</div>
<div class="hide">
<div style="cursor: pointer" @click="hideTopPart">
<CaretUpOutlined />
<span>隐藏</span>
</div>
</div> </div>
</a-card> </a-card>
<a-card class="tablePart" :bordered="false"> <a-card class="tablePart" :bordered="false">
<div class="show" v-if="!showPart">
<div style="cursor: pointer" @click="showTopPart">
<CaretDownOutlined />
<span>展开</span>
</div>
</div>
<div class="button" style="margin-bottom: 12px"> <div class="button" style="margin-bottom: 12px">
<a-button type="primary" :disabled="selectedRowKeys.length === 0">批量设置</a-button> <a-button type="primary" :disabled="selectedRowKeys.length === 0" @click="editData">
<a-button type="primary" style="margin-left: 6px">基准值设置</a-button> 批量设置
</a-button>
<a-button type="primary" style="margin-left: 6px" @click="setBasicData">
基准值设置
</a-button>
</div> </div>
<a-table <a-table
:columns="columns" :columns="columns"
@ -47,12 +75,74 @@
</a-table> </a-table>
</a-card> </a-card>
</div> </div>
<!-- 设置 -->
<a-modal :visible="open" title="批量设置" @ok="handleOk" @cancel="onCancel">
<a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="是否按去年折算">
<a-select ref="select" :value="formState.value1">
<a-select-option value="1"></a-select-option>
<a-select-option value="0"></a-select-option>
</a-select>
</a-form-item>
<a-form-item label="计算方式">
<a-select ref="select" :value="formState.value2">
<a-select-option value="1">手动</a-select-option>
<a-select-option value="0">自动</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="折算率">
<a-input :value="formState.name" suffix="%" disabled />
</a-form-item>
<a-form-item label="预算值">
<a-input :value="formState.email" suffix="kWh" disabled />
</a-form-item>
</a-form>
</a-modal>
<!-- 基准值设置 -->
<a-drawer
:visible="visible"
title="设置基准"
:width="500"
@close="onClose"
:footer-style="{ textAlign: 'right' }">
<div> 节点站台照明 </div>
<a-table
:columns="drawerColumns"
:data-source="newTableData"
bordered
rowKey="id"
:rowSelection="{
selectedRowKeys: selectedRowKeysSet,
onChange: onSelectionChangeSet,
type: 'radio',
}"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
<span>
<a @click="setBasic(record)">设为基准值</a>
</span>
</template>
</template>
</a-table>
<template #footer>
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
<a-button type="primary" @click="onSubmit">确定</a-button>
</template>
</a-drawer>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineEmits } from 'vue'; import { ref, defineEmits, reactive } from 'vue';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
// id
const props = defineProps({
parentId: {
type: Number,
},
});
// //
const emit = defineEmits(['change-data']); const emit = defineEmits(['change-data']);
const changeParentData = () => { const changeParentData = () => {
@ -128,6 +218,43 @@
address: 'Sidney No. 1 Lake Park', address: 'Sidney No. 1 Lake Park',
}, },
]; ];
const open = ref(false);
const formRef = ref();
const formState = ref({});
const labelCol = { span: 6 };
const wrapperCol = { span: 18 };
const editData = () => {
open.value = true;
};
const onCancel = () => {
open.value = false;
};
const visible = ref(false);
const selectedRowKeysSet = ref([]);
const onSelectionChangeSet = (selectedKeys, selectedRows) => {
selectedRowKeysSet.value = selectedKeys;
};
const drawerColumns = [
{
title: '年份',
dataIndex: 'emissionSources',
},
{
title: '用电量',
dataIndex: 'emissionFactors',
},
{
title: '操作',
key: 'action',
},
];
const newTableData = ref([]);
const setBasicData = () => {
visible.value = true;
};
const onClose = () => {
visible.value = false;
};
// echarts // echarts
const chartRef = ref(null); const chartRef = ref(null);
let chartInstance: echarts.ECharts | null = null; let chartInstance: echarts.ECharts | null = null;
@ -261,12 +388,19 @@
setTimeout(() => { setTimeout(() => {
chart(); chart();
}, 500); }, 500);
// /
const showPart = ref(true);
const hideTopPart = () => {
showPart.value = false;
};
const showTopPart = () => {
showPart.value = true;
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.detailContant { .detailContant {
height: 100%; height: 100%;
padding: 12px;
} }
.ns-form-title { .ns-form-title {
font-weight: bold; font-weight: bold;
@ -312,20 +446,32 @@
height: calc(100% - 5vh); height: calc(100% - 5vh);
.chartsPart { .chartsPart {
width: 100%; width: 100%;
height: 60%; height: 63%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.chart { .chart {
width: 100%; width: 100%;
height: 70%; height: 65%;
} }
.contrast { .contrast {
width: 100%; width: 100%;
height: 30%; height: 25%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
.hide {
height: 10%;
width: 100%;
display: flex;
align-items: end;
justify-content: center;
color: rgba(39, 120, 255, 1);
:deep(.anticon) {
line-height: 17px;
color: rgba(39, 120, 255, 1) !important;
}
}
.model { .model {
width: 16%; width: 16%;
height: 90%; height: 90%;
@ -355,8 +501,20 @@
} }
} }
.tablePart { .tablePart {
height: calc(60% - 20px); height: calc(27% - 20px);
margin-top: 20px; margin-top: 20px;
.show {
height: 10%;
width: 100%;
display: flex;
align-items: start;
justify-content: center;
color: rgba(39, 120, 255, 1);
:deep(.anticon) {
line-height: 17px;
color: rgba(39, 120, 255, 1) !important;
}
}
} }
} }
:deep(.ant-card-body) { :deep(.ant-card-body) {

115
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue

@ -4,8 +4,20 @@
<div class="title"> <div class="title">
<span>统计数据</span> <span>统计数据</span>
<a-button style="margin-left: 5%" type="primary" @click="addNode">新增节点</a-button> <a-button style="margin-left: 5%" type="primary" @click="addNode">新增节点</a-button>
<a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" /> <a-date-picker
<a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" /> v-if="selectedTime"
style="margin-left: 5%"
v-model:value="selectYearValue"
valueFormat="YYYY"
@change="changeYear"
picker="year" />
<a-date-picker
v-else
style="margin-left: 5%"
v-model:value="selectMonthValue"
valueFormat="YYYY-MM"
@change="changeMonth"
picker="month" />
</div> </div>
<div class="operation"> <div class="operation">
<div class="month" :style="monthStyles" @click="changeToMonth"><span></span></div> <div class="month" :style="monthStyles" @click="changeToMonth"><span></span></div>
@ -18,7 +30,12 @@
<div class="pillarChart" ref="pillarChartRef"></div> <div class="pillarChart" ref="pillarChartRef"></div>
</div> </div>
<div class="tablePart"> <div class="tablePart">
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> <a-table
:columns="columns"
:data-source="data"
bordered
:pagination="false"
:scroll="{ x: 1300, y: 250 }">
<template #bodyCell="{ column, text, record }"> <template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<span> <span>
@ -31,7 +48,7 @@
</div> </div>
</div> </div>
<div class="totalContant" v-else> <div class="totalContant" v-else>
<categoryDeatil @change-data="updateData" /> <categoryDeatil @change-data="updateData" :parentId="parentId" />
</div> </div>
<!-- 新增节点 --> <!-- 新增节点 -->
<a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }"> <a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }">
@ -46,15 +63,24 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref, defineExpose } from 'vue';
import type { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { http } from '/nerv-lib/util/http';
import categoryDeatil from './categoryDeatil.vue'; import categoryDeatil from './categoryDeatil.vue';
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
import 'echarts-liquidfill'; import 'echarts-liquidfill';
defineOptions({ defineOptions({
energyType: 'all', // name 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 selectYearValue = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
const selectMonthValue = ref<Dayjs>();
const electricTotal = ref(true); const electricTotal = ref(true);
// / // /
const monthStyles = ref('background: #f2f2f2'); const monthStyles = ref('background: #f2f2f2');
@ -66,6 +92,7 @@
columns.value[2].title = '月份'; columns.value[2].title = '月份';
columns.value[2].dataIndex = 'month'; columns.value[2].dataIndex = 'month';
selectedTime.value = false; selectedTime.value = false;
getMonthData();
}; };
const changeToYear = () => { const changeToYear = () => {
monthStyles.value = 'background: #f2f2f2'; monthStyles.value = 'background: #f2f2f2';
@ -73,6 +100,7 @@
columns.value[2].title = '年份'; columns.value[2].title = '年份';
columns.value[2].dataIndex = 'year'; columns.value[2].dataIndex = 'year';
selectedTime.value = true; selectedTime.value = true;
getYearData();
}; };
// echarts // echarts
const pillarChartRef = ref(null); const pillarChartRef = ref(null);
@ -229,31 +257,31 @@
}, },
{ {
title: '分项名称', title: '分项名称',
dataIndex: 'name', dataIndex: 'itemizeName',
}, },
{ {
title: '年份', title: '年份',
dataIndex: 'name', dataIndex: 'year',
}, },
{ {
title: '实际用量', title: '实际用量',
dataIndex: 'money', dataIndex: 'actualUsage',
}, },
{ {
title: '预算量', title: '预算量',
dataIndex: 'address', dataIndex: 'budget',
}, },
{ {
title: '基准值', title: '基准值',
dataIndex: 'address', dataIndex: 'referenceValue',
}, },
{ {
title: '节能量', title: '节能量',
dataIndex: 'address', dataIndex: 'energyConservation',
}, },
{ {
title: '预算达成率', title: '预算达成率',
dataIndex: 'address', dataIndex: 'budgetAchievement',
}, },
{ {
title: '操作', title: '操作',
@ -261,28 +289,44 @@
}, },
]); ]);
const data = [ const data = ref([]);
{ //
key: '1', const yearQueryParams = ref({
name: 'John Brown', orgId: orgId.value,
money: '¥300,000.00', type: 1,
address: 'New York No. 1 Lake Park', year: selectYearValue.value.format('YYYY'),
}, });
{ const changeYear = () => {
key: '2', yearQueryParams.value.year = selectYearValue.value;
name: 'Jim Green', getYearData();
money: '¥1,256,000.00', };
address: 'London No. 1 Lake Park', const getYearData = () => {
}, fetch(carbonPlanning.searchListByYear, yearQueryParams.value).then((res) => {
{ data.value = res.data;
key: '3', });
name: 'Joe Black', };
money: '¥120,000.00', //
address: 'Sidney No. 1 Lake Park', const monthQueryParams = ref({
}, orgId: orgId.value,
]; type: 1,
const detailData = () => { yearMonth: selectMonthValue.value,
});
const changeMonth = () => {
monthQueryParams.value.yearMonth = selectMonthValue.value;
getMonthData();
};
const getMonthData = () => {
fetch(carbonPlanning.searchListByMonth, monthQueryParams.value).then((res) => {
data.value = res.data;
});
};
defineExpose({
getYearData,
});
const parentId = ref();
const detailData = (record) => {
electricTotal.value = false; electricTotal.value = false;
parentId.value = record.id;
}; };
// //
const updateData = (type) => { const updateData = (type) => {
@ -361,7 +405,6 @@
justify-content: space-between; justify-content: space-between;
.ballChart { .ballChart {
width: 25%; width: 25%;
border: 1px solid red;
margin-right: 12px; margin-right: 12px;
} }
.pillarChart { .pillarChart {

56
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue

@ -1,15 +1,23 @@
<template> <template>
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange"> <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
<a-tab-pane key="1" tab="全部"> <a-tab-pane key="1" tab="全部">
<all /> <all ref="allRef" />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="用电量" force-render> <a-tab-pane key="2" tab="用电量" force-render>
<category /> <category ref="electricRef" />
</a-tab-pane>
<a-tab-pane key="3" tab="用水量">
<category ref="useWaterRef" />
</a-tab-pane>
<a-tab-pane key="4" tab="供水量">
<category ref="provideWaterRef" />
</a-tab-pane>
<a-tab-pane key="5" tab="碳排">
<category ref="carbonEmissionsRef" />
</a-tab-pane>
<a-tab-pane key="6" tab="供热量">
<category ref="provideHotRef" />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="用水量"> </a-tab-pane>
<a-tab-pane key="4" tab="供水量"> </a-tab-pane>
<a-tab-pane key="5" tab="碳排"> </a-tab-pane>
<a-tab-pane key="6" tab="供热量"> </a-tab-pane>
</a-tabs> </a-tabs>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -18,10 +26,46 @@
import category from './category/index.vue'; import category from './category/index.vue';
defineOptions({ defineOptions({
name: 'carbonPlanning', // name name: 'carbonPlanning', // name
components: {
all,
category
},
}); });
const activeKey = ref('1'); const activeKey = ref('1');
const allRef = ref<InstanceType<typeof all> | null>(null);
const electricRef = ref<InstanceType<typeof category> | null>(null);
const useWaterRef = ref<InstanceType<typeof category> | null>(null);
const provideWaterRef = ref<InstanceType<typeof category> | null>(null);
const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null);
const provideHotRef = ref<InstanceType<typeof category> | null>(null);
// tab // tab
const handleTabChange = (key) => { const handleTabChange = (key) => {
console.log('Tab changed:', key); console.log('Tab changed:', key);
//
if (key === '1') {
if (allRef.value) {
allRef.value.drawEcharts();
}
} else if (key === '2') {
if (electricRef.value) {
electricRef.value.getYearData(); //
}
} else if (key === '3') {
if (useWaterRef.value) {
useWaterRef.value.getYearData();
}
}else if (key === '4') {
if (provideWaterRef.value) {
provideWaterRef.value.getYearData();
}
}else if (key === '5') {
if (carbonEmissionsRef.value) {
carbonEmissionsRef.value.getYearData();
}
}else if (key === '6') {
if (provideHotRef.value) {
provideHotRef.value.getYearData();
}
}
}; };
</script> </script>

Loading…
Cancel
Save