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

taskid:282,remark:'commit'

temp
fks-xuxinyue 4 months ago
parent
bb9be7b4e0
commit
1990fd11e6
6 changed files with 262 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
  2. 1
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
  3. 1
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
  4. 248
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
  5. 117
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
  6. 34
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue

4
hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
View File

@ -79,7 +79,11 @@ export enum uploadPic {
// 碳规划 // 碳规划
export enum carbonPlanning { export enum carbonPlanning {
// 全部 // 全部
whole = '/carbon-smart/api/carbon/planning/whole',
// 详情 // 详情
searchListByYear = '/carbon-smart/api/carbon/planning/searchListByYear', searchListByYear = '/carbon-smart/api/carbon/planning/searchListByYear',
searchListByMonth = '/carbon-smart/api/carbon/planning/searchListByMonth', searchListByMonth = '/carbon-smart/api/carbon/planning/searchListByMonth',
yearAndMonthAchievement = '/carbon-smart/api/carbon/planning/yearAndMonthAchievement',
annualElectricityConsumption = '/carbon-smart/api/carbon/planning/annualElectricityConsumption',
electricityUsageBackThen = '/carbon-smart/api/carbon/planning/electricityUsageBackThen',
} }

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

@ -54,7 +54,6 @@
// 年份选择改变触发 // 年份选择改变触发
const changeYearData = () => { const changeYearData = () => {
debugger
queryParams.value.year = selectYear.value; queryParams.value.year = selectYear.value;
getTableList(); getTableList();
}; };

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

@ -37,6 +37,7 @@
energyConsumptionRef.value.mainRef.nsTableRef.reload(); energyConsumptionRef.value.mainRef.nsTableRef.reload();
} }
} else if (key === '2') { } else if (key === '2') {
debugger
if (carbonEmissionsRef.value) { if (carbonEmissionsRef.value) {
carbonEmissionsRef.value.getTableList(); // 调用子组件的方法 carbonEmissionsRef.value.getTableList(); // 调用子组件的方法
} }

248
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
View File

@ -3,8 +3,18 @@
<div class="ns-form-title"> <div class="ns-form-title">
<div class="title"> <div class="title">
<span>查询</span> <span>查询</span>
<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%"
valueFormat="YYYY"
:value="selectYear"
picker="year" />
<a-date-picker
v-else
style="margin-left: 5%"
valueFormat="YYYY-MM"
:value="selectMonth"
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>
@ -13,11 +23,11 @@
</div> </div>
<div class="contant"> <div class="contant">
<div class="chartsPart"> <div class="chartsPart">
<div class="electricityConsumption" ref="ydlChart"></div> <template v-for="(item, index) in data" :key="index">
<div class="electricityConsumption" ref="ydlChart"></div> <div class="electricityConsumption">
<div class="electricityConsumption" ref="ydlChart"></div> <div :id="'ydlChart_' + index" style="height: 100%; width: 100%"></div>
<div class="electricityConsumption" ref="ydlChart"></div> </div>
<div class="electricityConsumption" ref="ydlChart"></div> </template>
</div> </div>
<div class="tablePart"> <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"> </a-table>
@ -27,13 +37,22 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref,defineExpose } 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 { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
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 selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
const selectMonth = ref<Dayjs>();
// 年/月切换 // 年/月切换
const monthStyles = ref('background: #f2f2f2'); const monthStyles = ref('background: #f2f2f2');
const yearStyles = ref('background: #2778ff'); const yearStyles = ref('background: #2778ff');
@ -41,108 +60,126 @@
const changeToMonth = () => { const changeToMonth = () => {
monthStyles.value = 'background: #2778ff'; monthStyles.value = 'background: #2778ff';
yearStyles.value = 'background: #f2f2f2'; yearStyles.value = 'background: #f2f2f2';
queryParams.value.yearAndMonth = 'month';
queryParams.value.year = selectMonth.value;
columns.value[2].title = '月份'; columns.value[2].title = '月份';
columns.value[2].dataIndex = 'month'; columns.value[2].dataIndex = 'month';
selectedTime.value = false; selectedTime.value = false;
getTableData();
}; };
const changeToYear = () => { const changeToYear = () => {
monthStyles.value = 'background: #f2f2f2'; monthStyles.value = 'background: #f2f2f2';
yearStyles.value = 'background: #2778ff'; yearStyles.value = 'background: #2778ff';
queryParams.value.yearAndMonth = 'year';
queryParams.value.year = selectYear.value;
columns.value[2].title = '年份'; columns.value[2].title = '年份';
columns.value[2].dataIndex = 'year'; columns.value[2].dataIndex = 'year';
selectedTime.value = true; selectedTime.value = true;
getTableData();
}; };
// 用电量 // 用电量
const ydlChart = ref(null); const ydlChart = ref({});
let chartInstance: echarts.ECharts | null = null; let chartInstance: echarts.ECharts | null = null;
const drawEcharts = () => { const drawEcharts = () => {
chartInstance = echarts.init(ydlChart.value); data.value.forEach((item, index) => {
const handred = 100; const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
let point = 66;
const option = { const handred = 100;
backgroundColor: 'transparent', let point = parseInt(item.budgetAchievement.replace("%", ""));
title: [ const option = {
{ backgroundColor: 'transparent',
text: point + '%', title: [
x: 'center', {
y: '35%', text: point + '%',
textStyle: { x: 'center',
fontSize: 14, y: '35%',
fontWeight: 'normal', textStyle: {
fontStyle: 'normal', fontSize: 14,
fontWeight: 'normal',
fontStyle: 'normal',
},
}, },
}, {
{ text: item.budgetAchievementName,
text: '用电量预算达成率', x: 'center',
x: 'center', y: '85%',
y: '85%', textStyle: {
textStyle: { fontSize: 14,
fontSize: 14, fontWeight: 'normal',
fontWeight: 'normal', fontStyle: 'normal',
fontStyle: 'normal', },
}, },
}, ],
], // tooltip: {
tooltip: { // formatter: function (params) {
formatter: function (params) { // return params.name + '：' + params.percent + ' %';
return params.name + '：' + params.percent + ' %'; // },
}, // },
}, series: [
series: [ {
{ name: 'circle',
name: 'circle', type: 'pie',
type: 'pie', clockWise: true,
clockWise: true, radius: ['40%', '50%'],
radius: ['40%', '50%'], center: ['50%', '40%'],
center: ['50%', '40%'], itemStyle: {
itemStyle: { normal: {
normal: { label: {
label: { show: false,
show: false, },
}, labelLine: {
labelLine: { show: false,
show: false, },
}, },
}, },
}, hoverAnimation: false,
hoverAnimation: false, data: [
data: [ {
{ value: point,
value: point, name: '占比',
name: '占比', itemStyle: {
itemStyle: { normal: {
normal: { color: '#4FADFD',
color: '#4FADFD', label: {
label: { show: false,
show: false, },
}, labelLine: {
labelLine: { show: false,
show: false, },
}, },
}, },
}, },
}, {
{ name: '剩余',
name: '剩余', value: handred - point,
value: handred - point, itemStyle: {
itemStyle: { normal: {
normal: { color: '#E1E8EE',
color: '#E1E8EE', },
}, },
}, },
}, ],
], },
}, ],
], };
}; chart.setOption(option);
chartInstance = echarts.init(ydlChart.value); });
chartInstance.setOption(option);
}; };
defineExpose({
drawEcharts,
});
// 表格 // 表格
const queryParams = ref({
orgId: orgId.value,
year: selectYear.value.format('YYYY'),
yearAndMonth: 'year',
});
const getTableData = () => {
fetch(carbonPlanning.whole, queryParams.value).then((res) => {
data.value = res.data;
setTimeout(() => {
drawEcharts();
}, 500);
});
};
const columns = ref([ const columns = ref([
{ {
title: '序号', title: '序号',
@ -152,11 +189,11 @@
}, },
{ {
title: '名称', title: '名称',
dataIndex: 'name', dataIndex: 'itemizeName',
}, },
{ {
title: '年份', title: '年份',
dataIndex: 'name', dataIndex: 'year',
}, },
{ {
title: '计量单位', title: '计量单位',
@ -164,46 +201,31 @@
}, },
{ {
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',
}, },
]); ]);
const data = [ const data = ref([]);
{ getTableData();
key: '1', defineExpose({
name: 'John Brown', getTableData,
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',
},
];
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

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

@ -73,6 +73,14 @@
defineOptions({ defineOptions({
energyType: 'all', // 与页面路由name一致缓存才可生效 energyType: 'all', // 与页面路由name一致缓存才可生效
}); });
// 父组件id
const props = defineProps({
tabId: {
type: Number,
},
});
console.log(props, 'xxy');
const orgId = ref(''); const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!); const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result; orgId.value = result;
@ -93,6 +101,9 @@
columns.value[2].dataIndex = 'month'; columns.value[2].dataIndex = 'month';
selectedTime.value = false; selectedTime.value = false;
getMonthData(); getMonthData();
getBallQuery.value.yearAndMonth = 'month';
getBallData();
getMonthPillarData();
}; };
const changeToYear = () => { const changeToYear = () => {
monthStyles.value = 'background: #f2f2f2'; monthStyles.value = 'background: #f2f2f2';
@ -101,10 +112,40 @@
columns.value[2].dataIndex = 'year'; columns.value[2].dataIndex = 'year';
selectedTime.value = true; selectedTime.value = true;
getYearData(); getYearData();
getBallQuery.value.yearAndMonth = 'year';
getBallData();
getYearPillarData();
}; };
// echarts图 // echarts图
const pillarChartRef = ref(null); const pillarChartRef = ref(null);
let chartInstance: echarts.ECharts | null = null; let chartInstance: echarts.ECharts | null = null;
const getPillarQuery = ref({
orgId: orgId.value,
type: props.tabId,
year: selectYearValue.value.format('YYYY'),
});
const xAxisData = ref([]);
const referenceValue = ref([]);
const budget = ref([]);
const actualUsage = ref([]);
const getYearPillarData = () => {
fetch(carbonPlanning.annualElectricityConsumption, getPillarQuery.value).then((res) => {
xAxisData.value = res.data.year;
referenceValue.value = res.data.referenceValue;
budget.value = res.data.budget;
actualUsage.value = res.data.actualUsage;
drawPillarChart();
});
};
const getMonthPillarData = () => {
fetch(carbonPlanning.electricityUsageBackThen, getPillarQuery.value).then((res) => {
xAxisData.value = res.data.year;
referenceValue.value = res.data.referenceValue;
budget.value = res.data.budget;
actualUsage.value = res.data.actualUsage;
drawPillarChart();
});
};
const drawPillarChart = () => { const drawPillarChart = () => {
chartInstance = echarts.init(pillarChartRef.value); chartInstance = echarts.init(pillarChartRef.value);
const option = { const option = {
@ -125,7 +166,7 @@
bottom: '10%', bottom: '10%',
}, },
legend: { legend: {
data: ['昨日总人数', '今日实时人数', '昨日使用率'], data: ['实际用量', '预算量', '基准线'],
top: '0', top: '0',
left: '0', left: '0',
textStyle: { textStyle: {
@ -134,7 +175,7 @@
}, },
}, },
xAxis: { xAxis: {
data: ['2020', '2021', '2022', '2023', '2024'], data: xAxisData.value,
axisLine: { axisLine: {
show: true, //隐藏X轴轴线 show: true, //隐藏X轴轴线
lineStyle: { lineStyle: {
@ -182,7 +223,7 @@
], ],
series: [ series: [
{ {
name: '昨日总人数', name: '实际用量',
type: 'bar', type: 'bar',
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
@ -190,10 +231,10 @@
color: '#6395f9', color: '#6395f9',
}, },
}, },
data: [24, 45, 43, 35, 76], data: actualUsage.value,
}, },
{ {
name: '今日实时人数', name: '预算量',
type: 'bar', type: 'bar',
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
@ -201,10 +242,10 @@
color: '#62daab', color: '#62daab',
}, },
}, },
data: [133, 23, 114, 67, 89], data: budget.value,
}, },
{ {
name: '昨日使用率', name: '基准线',
type: 'line', type: 'line',
smooth: true, // 开启平滑曲线 smooth: true, // 开启平滑曲线
symbol: 'none', //标记的图形为实心圆 symbol: 'none', //标记的图形为实心圆
@ -212,7 +253,7 @@
color: '#f4664a', color: '#f4664a',
width: 2, width: 2,
}, },
data: [4.2, 3.5, 2.9, 7.8, 2], data: referenceValue.value,
}, },
], ],
}; };
@ -220,25 +261,65 @@
chartInstance.setOption(option); chartInstance.setOption(option);
}; };
const ballChartRef = ref(null); const ballChartRef = ref(null);
const getBallQuery = ref({
orgId: orgId.value,
type: props.tabId,
year: selectYearValue.value.format('YYYY'),
yearAndMonth: 'year',
});
const ballValue = ref();
const getBallData = () => {
fetch(carbonPlanning.yearAndMonthAchievement, getBallQuery.value).then((res) => {
ballValue.value = res.data;
drawSQ();
});
};
let ballChartInstance: echarts.ECharts | null = null; let ballChartInstance: echarts.ECharts | null = null;
const drawSQ = () => { const drawSQ = () => {
ballChartInstance = echarts.init(ballChartRef.value); ballChartInstance = echarts.init(ballChartRef.value);
let ballData = (Number(ballValue.value)/100).toFixed(2)
const option = { const option = {
series: [ series: [
{ {
type: 'liquidFill', type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3], radius: '78.1%',
radius: '80%', center: ['50%', '50%'],
color: ['#ecf3fe', '#c8dcfe', '#5594fa'],
data: [ballData, ballData, ballData], // data个数代表波浪数
amplitude: 5,
// 图形样式
itemStyle: {
opacity: 1, // 波浪的透明度
shadowBlur: 0, // 波浪的阴影范围
},
label: {
show: true,
textStyle: {
color: '#5594fa',
insideColor: '#12786f',
fontSize: 40,
},
formatter: (params) => {
// return `${(params.value * 100).toFixed(2)}%`;
return `${Number(params.value * 100).toFixed(2)}%`;
},
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: 'rgba(68, 197, 253,1)',
borderWidth: 2,
},
},
}, },
], ],
}; };
ballChartInstance = echarts.init(ballChartRef.value); ballChartInstance = echarts.init(ballChartRef.value);
ballChartInstance.setOption(option); ballChartInstance.setOption(option);
}; };
setTimeout(() => {
drawPillarChart();
drawSQ();
}, 500);
// 新增节点 // 新增节点
const visible = ref(false); const visible = ref(false);
const addNode = () => { const addNode = () => {
@ -293,7 +374,7 @@
// 获取年数据 // 获取年数据
const yearQueryParams = ref({ const yearQueryParams = ref({
orgId: orgId.value, orgId: orgId.value,
type: 1, type: props.tabId,
year: selectYearValue.value.format('YYYY'), year: selectYearValue.value.format('YYYY'),
}); });
const changeYear = () => { const changeYear = () => {
@ -308,8 +389,8 @@
// 获取月数据 // 获取月数据
const monthQueryParams = ref({ const monthQueryParams = ref({
orgId: orgId.value, orgId: orgId.value,
type: 1, type: props.tabId,
yearMonth: selectMonthValue.value, yearMonth: selectYearValue.value.format('YYYY'),
}); });
const changeMonth = () => { const changeMonth = () => {
monthQueryParams.value.yearMonth = selectMonthValue.value; monthQueryParams.value.yearMonth = selectMonthValue.value;
@ -322,6 +403,8 @@
}; };
defineExpose({ defineExpose({
getYearData, getYearData,
getBallData,
getYearPillarData,
}); });
const parentId = ref(); const parentId = ref();
const detailData = (record) => { const detailData = (record) => {

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

@ -3,8 +3,8 @@
<a-tab-pane key="1" tab="全部"> <a-tab-pane key="1" tab="全部">
<all ref="allRef" /> <all ref="allRef" />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="用电量" force-render> <a-tab-pane key="2" tab="用电量">
<category ref="electricRef" /> <category ref="electricRef" :tabId="tabId" />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="用水量"> <a-tab-pane key="3" tab="用水量">
<category ref="useWaterRef" /> <category ref="useWaterRef" />
@ -21,14 +21,14 @@
</a-tabs> </a-tabs>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref, nextTick } from 'vue';
import all from './all/index.vue'; import all from './all/index.vue';
import category from './category/index.vue'; import category from './category/index.vue';
defineOptions({ defineOptions({
name: 'carbonPlanning', // 与页面路由name一致缓存才可生效 name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
components: { components: {
all, all,
category category,
}, },
}); });
const activeKey = ref('1'); const activeKey = ref('1');
@ -39,30 +39,38 @@
const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null); const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null);
const provideHotRef = ref<InstanceType<typeof category> | null>(null); const provideHotRef = ref<InstanceType<typeof category> | null>(null);
// 切换tab页的回调 // 切换tab页的回调
const tabId = ref(1);
const handleTabChange = (key) => { const handleTabChange = (key) => {
console.log('Tab changed:', key); console.log('Tab changed:', key);
// 在这里可以执行需要在页面切换时执行的逻辑 // 在这里可以执行需要在页面切换时执行的逻辑
if (key === '1') { if (key === '1') {
if (allRef.value) { nextTick(() => {
allRef.value.drawEcharts(); if (allRef.value) {
} allRef.value.getTableData();
}
});
} else if (key === '2') { } else if (key === '2') {
if (electricRef.value) { nextTick(() => {
electricRef.value.getYearData(); // 调用子组件的方法 if (electricRef.value) {
} tabId.value = 1;
electricRef.value.getYearData(); // 调用子组件的方法
electricRef.value.getBallData();
electricRef.value.getYearPillarData();
}
});
} else if (key === '3') { } else if (key === '3') {
if (useWaterRef.value) { if (useWaterRef.value) {
useWaterRef.value.getYearData(); useWaterRef.value.getYearData();
} }
}else if (key === '4') { } else if (key === '4') {
if (provideWaterRef.value) { if (provideWaterRef.value) {
provideWaterRef.value.getYearData(); provideWaterRef.value.getYearData();
} }
}else if (key === '5') { } else if (key === '5') {
if (carbonEmissionsRef.value) { if (carbonEmissionsRef.value) {
carbonEmissionsRef.value.getYearData(); carbonEmissionsRef.value.getYearData();
} }
}else if (key === '6') { } else if (key === '6') {
if (provideHotRef.value) { if (provideHotRef.value) {
provideHotRef.value.getYearData(); provideHotRef.value.getYearData();
} }

Write Preview
Loading…
Cancel
Save