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