taskId:282,remark:'commit'
This commit is contained in:
@@ -52,7 +52,7 @@ export enum carbonInventoryCheck {
|
||||
update = '/carbon-smart/api/carbon/inventory/update',
|
||||
del = '/carbon-smart/api/carbon/inventory/del',
|
||||
// 获取排放源表格数据
|
||||
findUnitById = '/carbon-smartapi/carbon/inventory/findById',
|
||||
findUnitById = '/carbon-smart/api/carbon/inventory/findById',
|
||||
getDetailsList = '/carbon-smart/api/carbon/inventory/details/getDetailsList',
|
||||
updateTable = '/carbon-smart/api/carbon/inventory/details/update',
|
||||
// 排放统计接口
|
||||
@@ -86,4 +86,8 @@ export enum carbonPlanning {
|
||||
yearAndMonthAchievement = '/carbon-smart/api/carbon/planning/yearAndMonthAchievement',
|
||||
annualElectricityConsumption = '/carbon-smart/api/carbon/planning/annualElectricityConsumption',
|
||||
electricityUsageBackThen = '/carbon-smart/api/carbon/planning/electricityUsageBackThen',
|
||||
detailedStatisticalDataTable = '/carbon-smart/api/carbon/planning/detailedStatisticalDataTable',
|
||||
detailedStatisticalDataChart = '/carbon-smart/api/carbon/planning/detailedStatisticalDataChart',
|
||||
batchOrUpdate = '/carbon-smart/api/carbon/planning/batchOrUpdate',
|
||||
addNodes = '/carbon-smart/api/carbon/planning/addNodes',
|
||||
}
|
||||
|
6
hx-ai-intelligent/src/icon/carbonPlanningDown.svg
Normal file
6
hx-ai-intelligent/src/icon/carbonPlanningDown.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.72705078125" height="20.530746459960938" viewBox="0 0 16.72705078125 20.530746459960938" fill="none">
|
||||
<path d="M8.83553 0.223206C8.71956 0.0818939 8.54638 0 8.36358 0C8.18079 0 8.00761 0.0818939 7.89164 0.223206L0.139786 9.14842C-0.120087 9.44533 -0.00717926 9.69086 0.391891 9.69086L3.29167 9.69086C3.69073 9.69086 4.01572 10.0111 4.01572 10.4054L4.01572 15.5251C4.01572 15.9194 4.3413 16.242 4.73977 16.242L11.988 16.242C12.3865 16.242 12.7121 15.9194 12.7121 15.5251L12.7121 10.4054C12.7121 10.0111 13.037 9.69086 13.4361 9.69086L16.3335 9.69086C16.7326 9.69086 16.8479 9.44533 16.588 9.14842L8.83553 0.223206Z" fill="#F36163" >
|
||||
</path>
|
||||
<path d="M4.55933 20.5308L12.1678 20.5308C12.4977 20.5308 12.7652 20.2633 12.7652 19.9334L12.7652 18.1411C12.7652 17.8112 12.4977 17.5437 12.1678 17.5437L4.55933 17.5437C4.22937 17.5437 3.96191 17.8112 3.96191 18.1411L3.96191 19.9334C3.96191 20.2633 4.2294 20.5308 4.55933 20.5308Z" fill="#F36163" >
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
6
hx-ai-intelligent/src/icon/carbonPlanningUp.svg
Normal file
6
hx-ai-intelligent/src/icon/carbonPlanningUp.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.72705078125" height="20.530746459960938" viewBox="0 0 16.72705078125 20.530746459960938" fill="none">
|
||||
<path d="M8.83553 0.223206C8.71956 0.0818939 8.54638 0 8.36358 0C8.18079 0 8.00761 0.0818939 7.89164 0.223206L0.139786 9.14842C-0.120087 9.44533 -0.00717926 9.69086 0.391891 9.69086L3.29167 9.69086C3.69073 9.69086 4.01572 10.0111 4.01572 10.4054L4.01572 15.5251C4.01572 15.9194 4.3413 16.242 4.73977 16.242L11.988 16.242C12.3865 16.242 12.7121 15.9194 12.7121 15.5251L12.7121 10.4054C12.7121 10.0111 13.037 9.69086 13.4361 9.69086L16.3335 9.69086C16.7326 9.69086 16.8479 9.44533 16.588 9.14842L8.83553 0.223206Z" fill="#F36163" >
|
||||
</path>
|
||||
<path d="M4.55933 20.5308L12.1678 20.5308C12.4977 20.5308 12.7652 20.2633 12.7652 19.9334L12.7652 18.1411C12.7652 17.8112 12.4977 17.5437 12.1678 17.5437L4.55933 17.5437C4.22937 17.5437 3.96191 17.8112 3.96191 18.1411L3.96191 19.9334C3.96191 20.2633 4.2294 20.5308 4.55933 20.5308Z" fill="#F36163" >
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
@@ -148,7 +148,7 @@
|
||||
<div class="moneyImg"
|
||||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-4.svg"
|
||||
/></div>
|
||||
<div class="moneyTitle">全国碳账户估值(CNY)</div>
|
||||
<div class="moneyTitle">碳资产总估值(CNY)</div>
|
||||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ whole.whole }}</div>
|
||||
</div>
|
||||
<div class="title" style="justify-content: center">
|
||||
|
@@ -191,7 +191,7 @@ export const formConfig = (disabled) => {
|
||||
},
|
||||
{
|
||||
label: '参考文献',
|
||||
field: 'reference',
|
||||
field: 'bibliography',
|
||||
component: 'NsTextarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入参考文献',
|
||||
|
@@ -686,7 +686,7 @@
|
||||
},
|
||||
{
|
||||
title: '参考文献',
|
||||
dataIndex: 'reference',
|
||||
dataIndex: 'bibliography',
|
||||
},
|
||||
{
|
||||
title: '引用数量',
|
||||
@@ -824,7 +824,7 @@
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'reference',
|
||||
field: 'bibliography',
|
||||
label: '文献关键字',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
|
@@ -37,7 +37,6 @@
|
||||
energyConsumptionRef.value.mainRef.nsTableRef.reload();
|
||||
}
|
||||
} else if (key === '2') {
|
||||
debugger
|
||||
if (carbonEmissionsRef.value) {
|
||||
carbonEmissionsRef.value.getTableList(); // 调用子组件的方法
|
||||
}
|
||||
|
@@ -1163,6 +1163,8 @@
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const drawEcharts = () => {
|
||||
chartInstance = echarts.init(tplxChart.value);
|
||||
let listData = datalist.value;
|
||||
let linkDatas = linksData.value;
|
||||
let Color = [
|
||||
'#61FEFF',
|
||||
'#937FE6',
|
||||
@@ -1180,6 +1182,8 @@
|
||||
'#bbc951',
|
||||
'#FFC14B',
|
||||
'#b785a6',
|
||||
'#c23531',
|
||||
'#2f4554',
|
||||
];
|
||||
let Color1 = [
|
||||
'#04E0F3',
|
||||
@@ -1198,6 +1202,8 @@
|
||||
'#bbc951',
|
||||
'#FFC14B',
|
||||
'#b785a6',
|
||||
'#c23531',
|
||||
'#2f4554',
|
||||
];
|
||||
let sourceLabel = [
|
||||
'right',
|
||||
@@ -1219,16 +1225,16 @@
|
||||
];
|
||||
let itemStyleColor = [];
|
||||
let labelSource = [];
|
||||
for (let i = 0; i < datalist.value.length; i++) {
|
||||
datalist.value[i].label = {
|
||||
for (let i = 0; i < listData.length; i++) {
|
||||
listData[i].label = {
|
||||
normal: {
|
||||
position: sourceLabel[i],
|
||||
},
|
||||
};
|
||||
labelSource.push(sourceLabel[i]);
|
||||
}
|
||||
for (let d = 0; d < datalist.value.length; d++) {
|
||||
datalist.value[d].itemStyle = {
|
||||
for (let d = 0; d < listData.length; d++) {
|
||||
listData[d].itemStyle = {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
@@ -1250,7 +1256,7 @@
|
||||
},
|
||||
},
|
||||
};
|
||||
itemStyleColor.push(datalist.value[d]);
|
||||
itemStyleColor.push(listData[d]);
|
||||
}
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
@@ -1270,7 +1276,7 @@
|
||||
nodeWidth: 25,
|
||||
focusNodeAdjacency: 'allEdges',
|
||||
data: itemStyleColor,
|
||||
links: linksData.value,
|
||||
links: linkDatas,
|
||||
label: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
|
@@ -7,13 +7,15 @@
|
||||
v-if="selectedTime"
|
||||
style="margin-left: 5%"
|
||||
valueFormat="YYYY"
|
||||
:value="selectYear"
|
||||
v-model:value="selectYear"
|
||||
@change="changeYear"
|
||||
picker="year" />
|
||||
<a-date-picker
|
||||
v-else
|
||||
style="margin-left: 5%"
|
||||
valueFormat="YYYY-MM"
|
||||
:value="selectMonth"
|
||||
v-model:value="selectMonth"
|
||||
@change="changeMonth"
|
||||
picker="month" />
|
||||
</div>
|
||||
<div class="operation">
|
||||
@@ -30,7 +32,13 @@
|
||||
</template>
|
||||
</div>
|
||||
<div class="tablePart">
|
||||
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 1300, y: 300 }">
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,26 +60,35 @@
|
||||
return http.post(api, params);
|
||||
};
|
||||
const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
|
||||
const selectMonth = ref<Dayjs>();
|
||||
const selectMonth = ref<Dayjs>(dayjs().startOf('year').month(0));
|
||||
// 年/月切换
|
||||
const monthStyles = ref('background: #f2f2f2');
|
||||
const yearStyles = ref('background: #2778ff');
|
||||
const selectedTime = ref(true);
|
||||
const changeMonth = () => {
|
||||
queryParams.value.yearMonth = selectMonth.value;
|
||||
getTableData();
|
||||
};
|
||||
const changeToMonth = () => {
|
||||
monthStyles.value = 'background: #2778ff';
|
||||
yearStyles.value = 'background: #f2f2f2';
|
||||
queryParams.value.yearAndMonth = 'month';
|
||||
queryParams.value.year = selectMonth.value;
|
||||
queryParams.value.yearMonth = selectMonth.value.format('YYYY-DD');
|
||||
columns.value[2].title = '月份';
|
||||
columns.value[2].dataIndex = 'month';
|
||||
columns.value[2].dataIndex = 'yearMonth';
|
||||
selectedTime.value = false;
|
||||
getTableData();
|
||||
};
|
||||
const changeYear = () => {
|
||||
queryParams.value.year = selectYear.value;
|
||||
getTableData();
|
||||
};
|
||||
const changeToYear = () => {
|
||||
monthStyles.value = 'background: #f2f2f2';
|
||||
yearStyles.value = 'background: #2778ff';
|
||||
queryParams.value.yearAndMonth = 'year';
|
||||
queryParams.value.year = selectYear.value;
|
||||
delete queryParams.value.yearMonth;
|
||||
// queryParams.value.year = selectYear.value;
|
||||
columns.value[2].title = '年份';
|
||||
columns.value[2].dataIndex = 'year';
|
||||
selectedTime.value = true;
|
||||
@@ -85,7 +102,7 @@
|
||||
const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
|
||||
|
||||
const handred = 100;
|
||||
let point = parseInt(item.budgetAchievement.replace("%", ""));
|
||||
let point = parseInt(item.budgetAchievement.replace('%', ''));
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
title: [
|
||||
@@ -197,7 +214,7 @@
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'unitMeasurement',
|
||||
},
|
||||
{
|
||||
title: '总实际用量',
|
||||
|
@@ -13,23 +13,49 @@
|
||||
<div class="chart" ref="chartRef"></div>
|
||||
<div class="contrast">
|
||||
<div class="model">
|
||||
<div class="quantity"><span>12,500.00</span>kwh</div>
|
||||
<div class="quantityTitle">2023年实际用量</div>
|
||||
<div class="quantity">
|
||||
<span>{{ lastYearActualUsage }}</span>
|
||||
kwh
|
||||
</div>
|
||||
<div class="quantityTitle">{{ Number(props.year) - 1 }}年实际用量</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="quantity"><span>12,500.00</span>kwh</div>
|
||||
<div class="quantityTitle">2024年实际用量</div>
|
||||
<div class="quantity">
|
||||
<span>{{ actualUsage }}</span>
|
||||
kwh
|
||||
</div>
|
||||
<div class="quantityTitle">{{ props.year }}年实际用量</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="quantity"><span>12,500.00</span>kwh</div>
|
||||
<div class="quantityTitle">2024年预算</div>
|
||||
<div class="quantity">
|
||||
<span>{{ budget }}</span>
|
||||
kwh
|
||||
</div>
|
||||
<div class="quantityTitle">{{ props.year }}年预算</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="quantity"><span>12,500.00</span>kwh</div>
|
||||
<div class="quantity">
|
||||
<span>{{ referenceValue }}</span>
|
||||
kwh
|
||||
</div>
|
||||
<div class="quantityTitle">基准值</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="quantity"><span>12,500.00</span>kwh</div>
|
||||
<div class="quantity">
|
||||
<img
|
||||
width="20px"
|
||||
height="28px"
|
||||
v-if="count < 0"
|
||||
src="../../../../../src/icon/carbonPlanningDown.svg" />
|
||||
<span v-if="count < 0" style="margin-left: 5px">{{ Math.abs(count) }}%</span>
|
||||
<img
|
||||
width="20px"
|
||||
height="28px"
|
||||
v-if="count > 0"
|
||||
src="../../../../../src/icon/carbonPlanningUp.svg" />
|
||||
<span v-if="count > 0" style="margin-left: 5px">{{ count }}%</span>
|
||||
<span v-if="count === 0" style="margin-left: 5px">{{ count }}%</span>
|
||||
</div>
|
||||
<div class="quantityTitle">实际|预算</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,6 +90,7 @@
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectionChange,
|
||||
}"
|
||||
:scroll="{ x: 1300, y: 400 }"
|
||||
:pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
@@ -75,26 +102,26 @@
|
||||
</a-table>
|
||||
</a-card>
|
||||
</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 ref="select" v-model:value="formState.isLastYear" @change="selectChange">
|
||||
<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-form-item label="计算方式">
|
||||
<a-select ref="select" v-model:value="formState.countMethod">
|
||||
<a-select-option value="0">手动</a-select-option>
|
||||
<a-select-option value="1">自动</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form-item> -->
|
||||
<a-form-item label="折算率">
|
||||
<a-input :value="formState.name" suffix="%" disabled />
|
||||
<a-input v-model:value="formState.conversionRate" suffix="%" :disabled="disabled" />
|
||||
</a-form-item>
|
||||
<a-form-item label="预算值">
|
||||
<a-input :value="formState.email" suffix="kWh" disabled />
|
||||
<a-input v-model:value="formState.budget" suffix="kWh" :disabled="!disabled" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
@@ -105,7 +132,7 @@
|
||||
:width="500"
|
||||
@close="onClose"
|
||||
:footer-style="{ textAlign: 'right' }">
|
||||
<div> 节点:站台照明 </div>
|
||||
<div> 节点:{{ props.nodeName }} </div>
|
||||
<a-table
|
||||
:columns="drawerColumns"
|
||||
:data-source="newTableData"
|
||||
@@ -134,15 +161,34 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineEmits, reactive } from 'vue';
|
||||
import { ref, defineEmits, reactive, toRaw } from 'vue';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
|
||||
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import * as echarts from 'echarts';
|
||||
import { any, string } from 'vue-types';
|
||||
// 父组件id
|
||||
const props = defineProps({
|
||||
parentId: {
|
||||
type: Number,
|
||||
},
|
||||
year: {
|
||||
type: string,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
},
|
||||
nodeName: {
|
||||
type: string,
|
||||
},
|
||||
});
|
||||
console.log(props, 'xxy');
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const fetch = (api, params = { orgId }) => {
|
||||
return http.post(api, params);
|
||||
};
|
||||
// 点击返回
|
||||
const emit = defineEmits(['change-data']);
|
||||
const changeParentData = () => {
|
||||
@@ -152,7 +198,20 @@
|
||||
const selectedRowKeys = ref([]);
|
||||
const onSelectionChange = (selectedKeys, selectedRows) => {
|
||||
selectedRowKeys.value = selectedKeys;
|
||||
formState.value.ids = selectedKeys;
|
||||
};
|
||||
const queryParams = ref({
|
||||
orgId: orgId.value,
|
||||
year: props.year,
|
||||
itemizeId: props.parentId,
|
||||
type: props.type,
|
||||
});
|
||||
const getTableData = () => {
|
||||
fetch(carbonPlanning.detailedStatisticalDataTable, queryParams.value).then((res) => {
|
||||
data.value = res.data;
|
||||
});
|
||||
};
|
||||
getTableData();
|
||||
const columns = ref([
|
||||
{
|
||||
title: '序号',
|
||||
@@ -162,35 +221,31 @@
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'yearMonth',
|
||||
},
|
||||
{
|
||||
title: '2023年实际用量',
|
||||
dataIndex: 'name',
|
||||
title: Number(props.year) - 1 + '年实际用量',
|
||||
dataIndex: 'lastYearActualUsage',
|
||||
},
|
||||
{
|
||||
title: '2024年实际用量',
|
||||
dataIndex: 'name',
|
||||
title: props.year + '年实际用量',
|
||||
dataIndex: 'actualUsage',
|
||||
},
|
||||
{
|
||||
title: '基准值',
|
||||
dataIndex: 'money',
|
||||
dataIndex: 'referenceValue',
|
||||
},
|
||||
{
|
||||
title: '是否按去年折算',
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: '计算方式',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'lastYear',
|
||||
},
|
||||
{
|
||||
title: '折算率',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'conversionRate',
|
||||
},
|
||||
{
|
||||
title: '2024年预算',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'budget',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -198,35 +253,50 @@
|
||||
},
|
||||
]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
money: '¥300,000.00',
|
||||
address: 'New York No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
money: '¥1,256,000.00',
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
money: '¥120,000.00',
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
},
|
||||
];
|
||||
const data = ref([]);
|
||||
const open = ref(false);
|
||||
const formRef = ref();
|
||||
const formState = ref({});
|
||||
const labelCol = { span: 6 };
|
||||
const wrapperCol = { span: 18 };
|
||||
const editData = () => {
|
||||
const editData = (record) => {
|
||||
open.value = true;
|
||||
if (record) {
|
||||
formState.value.ids = [record.id];
|
||||
if (record.lastYear === '是') {
|
||||
formState.value.isLastYear = 1;
|
||||
} else {
|
||||
formState.value.isLastYear = 0;
|
||||
}
|
||||
formState.value.conversionRate = record.conversionRate;
|
||||
formState.value.budget = record.budget;
|
||||
}
|
||||
};
|
||||
const disabled = ref(true);
|
||||
const selectChange = (value) => {
|
||||
if (value === 1) {
|
||||
disabled.value = false;
|
||||
} else {
|
||||
disabled.value = true;
|
||||
}
|
||||
};
|
||||
const handleOk = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
console.log('values', formState, toRaw(formState));
|
||||
fetch(carbonPlanning.batchOrUpdate, formState.value).then((res) => {
|
||||
open.value = false;
|
||||
formState.value = {};
|
||||
getTableData();
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('error', error);
|
||||
});
|
||||
};
|
||||
const onCancel = () => {
|
||||
formState.value = {};
|
||||
open.value = false;
|
||||
};
|
||||
const visible = ref(false);
|
||||
@@ -258,6 +328,33 @@
|
||||
// echarts图
|
||||
const chartRef = ref(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const XData = ref([]);
|
||||
const actualUsageList = ref([]);
|
||||
const lastYearActualUsageList = ref([]);
|
||||
const budgetList = ref([]);
|
||||
const referenceValueList = ref();
|
||||
const actualUsage = ref();
|
||||
const budget = ref();
|
||||
const referenceValue = ref();
|
||||
const lastYearActualUsage = ref();
|
||||
const count = ref();
|
||||
const getChartData = () => {
|
||||
fetch(carbonPlanning.detailedStatisticalDataChart, queryParams.value).then((res) => {
|
||||
console.log(res);
|
||||
XData.value = res.data.yearMonth;
|
||||
actualUsageList.value = res.data.actualUsageList;
|
||||
lastYearActualUsageList.value = res.data.lastYearActualUsageList;
|
||||
budgetList.value = res.data.budgetList;
|
||||
referenceValueList.value = res.data.referenceValueList;
|
||||
actualUsage.value = res.data.actualUsage;
|
||||
budget.value = res.data.budget;
|
||||
referenceValue.value = res.data.referenceValue;
|
||||
lastYearActualUsage.value = res.data.lastYearActualUsage;
|
||||
count.value = res.data.count;
|
||||
chart();
|
||||
});
|
||||
};
|
||||
getChartData();
|
||||
const chart = () => {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
@@ -278,7 +375,12 @@
|
||||
bottom: '10%',
|
||||
},
|
||||
legend: {
|
||||
data: ['昨日总人数', '今日实时人数', '昨日使用率', '今日使用率'],
|
||||
data: [
|
||||
Number(props.year) - 1 + '年实际用量',
|
||||
props.year + '年实际用量',
|
||||
props.year + '年预算',
|
||||
'基准值',
|
||||
],
|
||||
top: '0',
|
||||
left: '0',
|
||||
textStyle: {
|
||||
@@ -289,7 +391,7 @@
|
||||
itemHeight: 10, // 图例标记的高度
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
data: XData.value,
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
@@ -337,7 +439,7 @@
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '昨日总人数',
|
||||
name: Number(props.year) - 1 + '年实际用量',
|
||||
type: 'bar',
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
@@ -345,10 +447,10 @@
|
||||
color: '#6395f9',
|
||||
},
|
||||
},
|
||||
data: [24, 45, 43, 35, 76],
|
||||
data: lastYearActualUsageList.value,
|
||||
},
|
||||
{
|
||||
name: '今日实时人数',
|
||||
name: props.year + '年实际用量',
|
||||
type: 'bar',
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
@@ -356,10 +458,10 @@
|
||||
color: '#62daab',
|
||||
},
|
||||
},
|
||||
data: [133, 23, 114, 67, 89],
|
||||
data: actualUsageList.value,
|
||||
},
|
||||
{
|
||||
name: '昨日使用率',
|
||||
name: props.year + '年预算',
|
||||
type: 'line',
|
||||
smooth: true, // 开启平滑曲线
|
||||
symbol: 'none', //标记的图形为实心圆
|
||||
@@ -367,10 +469,10 @@
|
||||
color: '#f4664a',
|
||||
width: 2,
|
||||
},
|
||||
data: [4.2, 3.5, 2.9, 7.8, 2],
|
||||
data: budgetList.value,
|
||||
},
|
||||
{
|
||||
name: '今日使用率',
|
||||
name: '基准值',
|
||||
type: 'line',
|
||||
smooth: true, // 开启平滑曲线
|
||||
symbol: 'none', //标记的图形为实心圆
|
||||
@@ -378,16 +480,13 @@
|
||||
color: '#f4664a',
|
||||
width: 2,
|
||||
},
|
||||
data: [4, 6, 9, 8, 5],
|
||||
data: referenceValueList.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
setTimeout(() => {
|
||||
chart();
|
||||
}, 500);
|
||||
// 点击隐藏/展开
|
||||
const showPart = ref(true);
|
||||
const hideTopPart = () => {
|
||||
@@ -395,6 +494,7 @@
|
||||
};
|
||||
const showTopPart = () => {
|
||||
showPart.value = true;
|
||||
getChartData();
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@@ -48,13 +48,28 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="totalContant" v-else>
|
||||
<categoryDeatil @change-data="updateData" :parentId="parentId" />
|
||||
<categoryDeatil @change-data="updateData" :parentId="parentId" :year="year" :type="type" :nodeName="nodeName" />
|
||||
</div>
|
||||
<!-- 新增节点 -->
|
||||
<a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }">
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<a-tree
|
||||
:expanded-keys="expandedKeys"
|
||||
:selectedKeys="selectedKeys"
|
||||
:checkedKeys="treeCheckedKeys"
|
||||
:tree-data="treeData"
|
||||
v-if="treeData && treeData.length > 0"
|
||||
class="draggable-tree"
|
||||
@check="checkTreeNode"
|
||||
checkable
|
||||
block-node>
|
||||
<template #title="data">
|
||||
<div class="treeRow">
|
||||
<div>
|
||||
<span>{{ data.pointName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" @click="onSubmit">确定</a-button>
|
||||
@@ -68,7 +83,9 @@
|
||||
import * as echarts from 'echarts';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import categoryDeatil from './categoryDeatil.vue';
|
||||
import { group } from '/@/api/deviceManage';
|
||||
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import type { TreeProps } from 'ant-design-vue';
|
||||
import 'echarts-liquidfill';
|
||||
defineOptions({
|
||||
energyType: 'all', // 与页面路由name一致缓存才可生效
|
||||
@@ -78,6 +95,9 @@
|
||||
tabId: {
|
||||
type: Number,
|
||||
},
|
||||
energyType: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
console.log(props, 'xxy');
|
||||
|
||||
@@ -88,7 +108,7 @@
|
||||
return http.post(api, params);
|
||||
};
|
||||
const selectYearValue = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
|
||||
const selectMonthValue = ref<Dayjs>();
|
||||
const selectMonthValue = ref<Dayjs>(dayjs().startOf('year').month(0));
|
||||
const electricTotal = ref(true);
|
||||
// 年/月切换
|
||||
const monthStyles = ref('background: #f2f2f2');
|
||||
@@ -98,7 +118,7 @@
|
||||
monthStyles.value = 'background: #2778ff';
|
||||
yearStyles.value = 'background: #f2f2f2';
|
||||
columns.value[2].title = '月份';
|
||||
columns.value[2].dataIndex = 'month';
|
||||
columns.value[2].dataIndex = 'yearMonth';
|
||||
selectedTime.value = false;
|
||||
getMonthData();
|
||||
getBallQuery.value.yearAndMonth = 'month';
|
||||
@@ -277,7 +297,7 @@
|
||||
let ballChartInstance: echarts.ECharts | null = null;
|
||||
const drawSQ = () => {
|
||||
ballChartInstance = echarts.init(ballChartRef.value);
|
||||
let ballData = (Number(ballValue.value)/100).toFixed(2)
|
||||
let ballData = (Number(ballValue.value) / 100).toFixed(2);
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
@@ -322,8 +342,48 @@
|
||||
};
|
||||
// 新增节点
|
||||
const visible = ref(false);
|
||||
const getTreeData = ref({
|
||||
orgId: orgId.value,
|
||||
energyType: props.energyType,
|
||||
});
|
||||
const addNode = () => {
|
||||
visible.value = true;
|
||||
fetch(group.queryDeviceGroupTree, getTreeData.value).then((res) => {
|
||||
treeData.value = res.data;
|
||||
// 格式化树节点数据并设置 key
|
||||
treeData.value = formatTreeData(treeData.value);
|
||||
});
|
||||
};
|
||||
const genData: TreeProps['treeData'] = [];
|
||||
const treeData = ref<TreeProps['treeData']>(genData);
|
||||
const expandedKeys = ref<string[]>();
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const treeCheckedKeys = ref<string[]>([]);
|
||||
const checkTreeNode = (checkedKeys, info) => {
|
||||
treeCheckedKeys.value = checkedKeys;
|
||||
addTreeNode.value.itemizeIds = treeCheckedKeys.value;
|
||||
};
|
||||
const formatTreeData = (treeData) => {
|
||||
return treeData.map((node) => {
|
||||
const newNode = { ...node };
|
||||
newNode.key = String(node.id); // 将 id 转换为字符串作为 key
|
||||
if (node.children) {
|
||||
newNode.children = formatTreeData(node.children);
|
||||
}
|
||||
return newNode;
|
||||
});
|
||||
};
|
||||
const addTreeNode = ref({
|
||||
orgId: orgId.value,
|
||||
type: props.tabId,
|
||||
year: selectYearValue.value.format('YYYY'),
|
||||
});
|
||||
const onSubmit = () => {
|
||||
fetch(carbonPlanning.addNodes, addTreeNode.value).then((res) => {
|
||||
data.value = res.data;
|
||||
visible.value = false;
|
||||
changeToYear();
|
||||
});
|
||||
};
|
||||
const onClose = () => {
|
||||
visible.value = false;
|
||||
@@ -379,18 +439,24 @@
|
||||
});
|
||||
const changeYear = () => {
|
||||
yearQueryParams.value.year = selectYearValue.value;
|
||||
year.value = selectYearValue.value;
|
||||
addTreeNode.value.year = selectYearValue.value;
|
||||
getYearData();
|
||||
};
|
||||
const getYearData = () => {
|
||||
fetch(carbonPlanning.searchListByYear, yearQueryParams.value).then((res) => {
|
||||
data.value = res.data;
|
||||
res.data.forEach((item) => {
|
||||
treeCheckedKeys.value.push((item.itemizeId).toString());
|
||||
});
|
||||
});
|
||||
};
|
||||
// 获取月数据
|
||||
const monthQueryParams = ref({
|
||||
orgId: orgId.value,
|
||||
type: props.tabId,
|
||||
yearMonth: selectYearValue.value.format('YYYY'),
|
||||
year: selectYearValue.value.format('YYYY'),
|
||||
yearMonth: selectMonthValue.value.format('YYYY-DD'),
|
||||
});
|
||||
const changeMonth = () => {
|
||||
monthQueryParams.value.yearMonth = selectMonthValue.value;
|
||||
@@ -402,18 +468,23 @@
|
||||
});
|
||||
};
|
||||
defineExpose({
|
||||
getYearData,
|
||||
getBallData,
|
||||
getYearPillarData,
|
||||
changeToYear,
|
||||
electricTotal,
|
||||
});
|
||||
const parentId = ref();
|
||||
const year = ref(selectYearValue.value.format('YYYY'));
|
||||
const type = ref();
|
||||
const nodeName = ref();
|
||||
const detailData = (record) => {
|
||||
electricTotal.value = false;
|
||||
parentId.value = record.id;
|
||||
parentId.value = record.itemizeId;
|
||||
type.value = props.tabId;
|
||||
nodeName.value = record.itemizeName;
|
||||
};
|
||||
// 子页面点击返回
|
||||
const updateData = (type) => {
|
||||
electricTotal.value = type;
|
||||
changeToYear();
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@@ -4,19 +4,19 @@
|
||||
<all ref="allRef" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用电量">
|
||||
<category ref="electricRef" :tabId="tabId" />
|
||||
<category ref="electricRef" :tabId="tabId" :energyType="energyType" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="用水量">
|
||||
<category ref="useWaterRef" />
|
||||
<category ref="useWaterRef" :tabId="tabId" :energyType="energyType" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" tab="供水量">
|
||||
<category ref="provideWaterRef" />
|
||||
<category ref="provideWaterRef" :tabId="tabId" :energyType="energyType" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5" tab="碳排">
|
||||
<category ref="carbonEmissionsRef" />
|
||||
<category ref="carbonEmissionsRef" :tabId="tabId" :energyType="energyType" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6" tab="供热量">
|
||||
<category ref="provideHotRef" />
|
||||
<category ref="provideHotRef" :tabId="tabId" :energyType="energyType" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
@@ -40,6 +40,7 @@
|
||||
const provideHotRef = ref<InstanceType<typeof category> | null>(null);
|
||||
// 切换tab页的回调
|
||||
const tabId = ref(1);
|
||||
const energyType = ref();
|
||||
const handleTabChange = (key) => {
|
||||
console.log('Tab changed:', key);
|
||||
// 在这里可以执行需要在页面切换时执行的逻辑
|
||||
@@ -50,30 +51,50 @@
|
||||
}
|
||||
});
|
||||
} else if (key === '2') {
|
||||
tabId.value = 1;
|
||||
energyType.value = 'ELECTRICITY_USAGE'
|
||||
nextTick(() => {
|
||||
if (electricRef.value) {
|
||||
tabId.value = 1;
|
||||
electricRef.value.getYearData(); // 调用子组件的方法
|
||||
electricRef.value.getBallData();
|
||||
electricRef.value.getYearPillarData();
|
||||
electricRef.value.electricTotal = true
|
||||
electricRef.value.changeToYear(); // 调用子组件的方法
|
||||
}
|
||||
});
|
||||
} else if (key === '3') {
|
||||
if (useWaterRef.value) {
|
||||
useWaterRef.value.getYearData();
|
||||
}
|
||||
tabId.value = 2;
|
||||
energyType.value = 'WATER_USAGE'
|
||||
nextTick(() => {
|
||||
if (useWaterRef.value) {
|
||||
useWaterRef.value.electricTotal = true
|
||||
useWaterRef.value.changeToYear(); // 调用子组件的方法
|
||||
}
|
||||
});
|
||||
} else if (key === '4') {
|
||||
if (provideWaterRef.value) {
|
||||
provideWaterRef.value.getYearData();
|
||||
}
|
||||
tabId.value = 3;
|
||||
energyType.value = 'gongshuiliang'
|
||||
nextTick(() => {
|
||||
if (provideWaterRef.value) {
|
||||
provideWaterRef.value.electricTotal = true
|
||||
provideWaterRef.value.changeToYear(); // 调用子组件的方法
|
||||
}
|
||||
});
|
||||
} else if (key === '5') {
|
||||
if (carbonEmissionsRef.value) {
|
||||
carbonEmissionsRef.value.getYearData();
|
||||
}
|
||||
tabId.value = 4;
|
||||
energyType.value = 'CARBON_EMISSIONS'
|
||||
nextTick(() => {
|
||||
if (carbonEmissionsRef.value) {
|
||||
carbonEmissionsRef.value.electricTotal = true
|
||||
carbonEmissionsRef.value.changeToYear(); // 调用子组件的方法
|
||||
}
|
||||
});
|
||||
} else if (key === '6') {
|
||||
if (provideHotRef.value) {
|
||||
provideHotRef.value.getYearData();
|
||||
}
|
||||
tabId.value = 5;
|
||||
energyType.value = 'HEAT_SUPPLY'
|
||||
nextTick(() => {
|
||||
if (provideHotRef.value) {
|
||||
provideHotRef.value.electricTotal = true
|
||||
provideHotRef.value.changeToYear(); // 调用子组件的方法
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@@ -120,6 +120,7 @@
|
||||
modalFormRef.value?.toggle();
|
||||
};
|
||||
const moveNode = (data, type: opType) => {
|
||||
debugger
|
||||
const flag = type === 'up';
|
||||
http.post(group.move, { ...data, isUp: flag }).then(() => {
|
||||
treeRef.value?.treeReload();
|
||||
|
Reference in New Issue
Block a user