xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

taskId:282,remark:'commit'

Browse Source
This commit is contained in:
fks-xuxinyue
2024-08-07 10:28:29 +08:00
parent 5d7bd5bb19
commit b079a2b464
13 changed files with 353 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue
View File

@@ -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>

95
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
View File

@@ -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>