taskid:282,remark:'commit'
This commit is contained in:
fks-xuxinyue
@@ -3,8 +3,18 @@
|
||||
<div class="ns-form-title">
|
||||
<div class="title">
|
||||
<span>查询</span>
|
||||
<a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" />
|
||||
<a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" />
|
||||
<a-date-picker
|
||||
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 class="operation">
|
||||
<div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div>
|
||||
@@ -13,11 +23,11 @@
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div class="chartsPart">
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<template v-for="(item, index) in data" :key="index">
|
||||
<div class="electricityConsumption">
|
||||
<div :id="'ydlChart_' + index" style="height: 100%; width: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tablePart">
|
||||
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
|
||||
@@ -27,13 +37,22 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref,defineExpose } from 'vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { ref, defineExpose } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
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 yearStyles = ref('background: #2778ff');
|
||||
@@ -41,108 +60,126 @@
|
||||
const changeToMonth = () => {
|
||||
monthStyles.value = 'background: #2778ff';
|
||||
yearStyles.value = 'background: #f2f2f2';
|
||||
queryParams.value.yearAndMonth = 'month';
|
||||
queryParams.value.year = selectMonth.value;
|
||||
columns.value[2].title = '月份';
|
||||
columns.value[2].dataIndex = 'month';
|
||||
selectedTime.value = false;
|
||||
getTableData();
|
||||
};
|
||||
const changeToYear = () => {
|
||||
monthStyles.value = 'background: #f2f2f2';
|
||||
yearStyles.value = 'background: #2778ff';
|
||||
queryParams.value.yearAndMonth = 'year';
|
||||
queryParams.value.year = selectYear.value;
|
||||
columns.value[2].title = '年份';
|
||||
columns.value[2].dataIndex = 'year';
|
||||
selectedTime.value = true;
|
||||
getTableData();
|
||||
};
|
||||
// 用电量
|
||||
const ydlChart = ref(null);
|
||||
const ydlChart = ref({});
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const drawEcharts = () => {
|
||||
chartInstance = echarts.init(ydlChart.value);
|
||||
const handred = 100;
|
||||
let point = 66;
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
title: [
|
||||
{
|
||||
text: point + '%',
|
||||
x: 'center',
|
||||
y: '35%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '用电量预算达成率',
|
||||
x: 'center',
|
||||
y: '85%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
return params.name + '：' + params.percent + ' %';
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'circle',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: ['40%', '50%'],
|
||||
center: ['50%', '40%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data.value.forEach((item, index) => {
|
||||
const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
|
||||
|
||||
const handred = 100;
|
||||
let point = parseInt(item.budgetAchievement.replace("%", ""));
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
title: [
|
||||
{
|
||||
text: point + '%',
|
||||
x: 'center',
|
||||
y: '35%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: point,
|
||||
name: '占比',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4FADFD',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: item.budgetAchievementName,
|
||||
x: 'center',
|
||||
y: '85%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
},
|
||||
],
|
||||
// tooltip: {
|
||||
// formatter: function (params) {
|
||||
// return params.name + '：' + params.percent + ' %';
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: 'circle',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: ['40%', '50%'],
|
||||
center: ['50%', '40%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩余',
|
||||
value: handred - point,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#E1E8EE',
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: point,
|
||||
name: '占比',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4FADFD',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(ydlChart.value);
|
||||
chartInstance.setOption(option);
|
||||
{
|
||||
name: '剩余',
|
||||
value: handred - point,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#E1E8EE',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.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([
|
||||
{
|
||||
title: '序号',
|
||||
@@ -152,11 +189,11 @@
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'itemizeName',
|
||||
},
|
||||
{
|
||||
title: '年份',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'year',
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
@@ -164,46 +201,31 @@
|
||||
},
|
||||
{
|
||||
title: '总实际用量',
|
||||
dataIndex: 'money',
|
||||
dataIndex: 'actualUsage',
|
||||
},
|
||||
{
|
||||
title: '总预算量',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'budget',
|
||||
},
|
||||
{
|
||||
title: '基准值',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'referenceValue',
|
||||
},
|
||||
{
|
||||
title: '节能量',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'energyConservation',
|
||||
},
|
||||
{
|
||||
title: '预算达成率',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'budgetAchievement',
|
||||
},
|
||||
]);
|
||||
|
||||
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([]);
|
||||
getTableData();
|
||||
defineExpose({
|
||||
getTableData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Reference in New Issue
Block a user