483 lines
12 KiB
Plaintext
483 lines
12 KiB
Plaintext
import type { EChartsOption } from 'echarts'
|
|
import * as echarts from 'echarts'
|
|
import 'echarts-liquidfill';
|
|
import { getCSRDetail } from '@/api/daikin/base'
|
|
import { create } from 'naive-ui';
|
|
const forms = ref({
|
|
lable1:{
|
|
name: '大金集团碳减排目标',
|
|
year: 'F25',
|
|
date: '14%',
|
|
title1:'',
|
|
title2:'',
|
|
},
|
|
lable2:{
|
|
name: 'CN调达本部碳减排目标',
|
|
year: 'F25',
|
|
date: '14%',
|
|
title1:'',
|
|
title2:'',
|
|
},
|
|
lable3:{
|
|
name: 'CN调达本部碳减排目标',
|
|
year: 'F23',
|
|
date: '14%',
|
|
title1:'',
|
|
title2:'',
|
|
},
|
|
lable4:{
|
|
name: '2020实绩, 2021实绩, 2022实绩, 2023, 2024, 2025',
|
|
year: '120, 200, 150, 80, 70, 110',
|
|
date: '0, 0, 0, 80, 70, 110',
|
|
title1:'',
|
|
title2:'',
|
|
},
|
|
lable5:{
|
|
name: '30%碳减排课题收集整体情况:',
|
|
year: '60',
|
|
date: '14%',
|
|
title1:'原材料: 15.5%',
|
|
title2:'能源消耗: 1.7%',
|
|
},
|
|
lable6:{
|
|
name: 'FY23碳减排实施完成情况:',
|
|
year: '0.6',
|
|
data:'',
|
|
title1:'原材料',
|
|
title2:'整体目标10%',
|
|
},
|
|
lable7:{
|
|
name:'',
|
|
data:'',
|
|
year: '0.6',
|
|
title1:'能源消耗',
|
|
title2:'整体目标5%',
|
|
},
|
|
lable8:{
|
|
name:'【FY20原材料构成数据】',
|
|
data:{
|
|
data1:{
|
|
name:'Search Engine',
|
|
value:'1048'
|
|
},
|
|
data2:{
|
|
name:'Direct',
|
|
value:'735'
|
|
}
|
|
,
|
|
data3:{
|
|
name:'Email',
|
|
value:'580'
|
|
}
|
|
,
|
|
data4:{
|
|
name:'',
|
|
value:''
|
|
},
|
|
data5:{
|
|
name:'',
|
|
value:''
|
|
}
|
|
|
|
}
|
|
},
|
|
lable9:{
|
|
name:'【FY20能源消耗构成数据】',
|
|
data:{
|
|
data1:{
|
|
name:'Search Engine',
|
|
value:'1048'
|
|
},
|
|
data2:{
|
|
name:'Direct',
|
|
value:'735'
|
|
}
|
|
,
|
|
data3:{
|
|
name:'Email',
|
|
value:'580'
|
|
}
|
|
,
|
|
data4:{
|
|
name:'Union Ads',
|
|
value:'484'
|
|
},
|
|
data5:{
|
|
name:'Video Ads',
|
|
value:'300'
|
|
}
|
|
|
|
}
|
|
},
|
|
})
|
|
export const Content2 = [
|
|
{
|
|
key: '0',
|
|
label: '活动计划',
|
|
children: [
|
|
{ label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '中国地区连携强化 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
],
|
|
},
|
|
{
|
|
key: '1',
|
|
label: '活动成果',
|
|
children: [
|
|
{ label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '汇率', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: 'BCP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
],
|
|
},
|
|
]
|
|
export const Content3 = [
|
|
{
|
|
key: '0',
|
|
title: 'xx活动概要',
|
|
label: '活动计划',
|
|
children: [
|
|
{ label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '工作模式变更 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
],
|
|
},
|
|
{
|
|
key: '1',
|
|
label: '活动成果',
|
|
children: [
|
|
{ label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
],
|
|
},
|
|
{
|
|
key: '2',
|
|
title: 'xx活动概要',
|
|
label: '活动计划',
|
|
children: [
|
|
{ label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '工作模式变更 ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
],
|
|
},
|
|
{
|
|
key: '3',
|
|
label: '活动成果',
|
|
children: [
|
|
{ label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
{ label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
|
|
],
|
|
},
|
|
]
|
|
const form = ref()
|
|
|
|
|
|
export function charData() {
|
|
|
|
const chartRef = ref()
|
|
const params = '15%'
|
|
const option = ref<any>({});
|
|
const allData = ref<any[]>([]);
|
|
|
|
async function getCSR() {
|
|
const { data: { content: { dataList } } } = await getCSRDetail()
|
|
console.log("-----------------------------")
|
|
if(!dataList){
|
|
console.log("-----------------------------")
|
|
allData.value = forms.value
|
|
|
|
}
|
|
else{
|
|
allData.value = dataList
|
|
}
|
|
// form.value = dataList
|
|
|
|
const options = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
title: [{ text: '单位:k-t' }],
|
|
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
data: allData.value.lable4.name.split(",")
|
|
},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
name: '目标排放',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
barWidth: '30%',
|
|
data: allData.value.lable4.year.split(","),
|
|
label:
|
|
{
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
label:
|
|
{
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{c}%'
|
|
},
|
|
barWidth: '30%',
|
|
data: allData.value.lable4.date.split(","),
|
|
},
|
|
]
|
|
}
|
|
option.value = options;
|
|
}
|
|
|
|
getCSR()
|
|
return { chartRef, option }
|
|
}
|
|
|
|
|
|
export function pieData1() {
|
|
const chartRef = ref()
|
|
const option = ref<any>({});
|
|
const allData = ref<any[]>([]);
|
|
async function getCSR() {
|
|
const { data: { content: { dataList } } } = await getCSRDetail()
|
|
if(!dataList){
|
|
console.log("-----------------------------")
|
|
allData.value = forms.value
|
|
|
|
}
|
|
else{
|
|
allData.value = dataList
|
|
}
|
|
|
|
const options = {
|
|
title: {
|
|
text: allData.value.lable8.name,
|
|
left: 'center',
|
|
textStyle: { color: '#4075E1', }
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
grid: { left: '20', top: '30', right: '70', bottom: '10', containLabel: true },
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
|
|
data: Object.values(allData.value.lable8.data).filter(item => item.name !== '' || item.value !== ''),
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
option.value = options;
|
|
}
|
|
getCSR()
|
|
|
|
return { chartRef, option }
|
|
}
|
|
|
|
|
|
|
|
export function pieData2() {
|
|
const chartRef = ref()
|
|
const option = ref<any>({});
|
|
const allData = ref<any[]>([]);
|
|
async function getCSR() {
|
|
const { data: { content: { dataList } } } = await getCSRDetail()
|
|
if(!dataList){
|
|
console.log("-----------------------------")
|
|
allData.value = forms.value
|
|
|
|
}
|
|
else{
|
|
allData.value = dataList
|
|
}
|
|
|
|
const options = {
|
|
title: {
|
|
text: allData.value.lable9.name,
|
|
left: 'center',
|
|
textStyle: { color: '#4075E1' }
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter(param) {
|
|
// correct the percentage
|
|
return param.name + ' (' + param.percent * 2 + '%)';
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: Object.values(allData.value.lable9.data).filter(item => item.name !== '' || item.value !== '')
|
|
}
|
|
]
|
|
|
|
}
|
|
option.value = options;
|
|
}
|
|
getCSR()
|
|
return { chartRef, option }
|
|
}
|
|
|
|
|
|
|
|
function generateSimilarValues(number) {
|
|
const offset = 0.05;
|
|
const similarValues = [number, number - offset, number + offset];
|
|
return similarValues;
|
|
}
|
|
|
|
export function liQuid() {
|
|
const chartRef = ref()
|
|
|
|
const option = ref<any>({});
|
|
const allData = ref<any[]>([]);
|
|
async function getCSR() {
|
|
const { data: { content: { dataList } } } = await getCSRDetail()
|
|
if(!dataList){
|
|
console.log("-----------------------------")
|
|
allData.value = forms.value
|
|
|
|
}
|
|
else{
|
|
allData.value = dataList
|
|
}
|
|
|
|
const options = {
|
|
title: {
|
|
text: allData.value.lable6.title2,
|
|
// subtext: 'Fake Data',
|
|
left: 'center',
|
|
bottom: '-5px',
|
|
textStyle: { fontSize: '14px', fontWeight: '100' }
|
|
},
|
|
series: [{
|
|
type: 'liquidFill',
|
|
silent: true,
|
|
data: generateSimilarValues(allData.value.lable6.year),
|
|
color: ['#41E5BA', '#B1D2FF', '#63E8C4'],
|
|
radius: '150px',
|
|
backgroundStyle: {
|
|
// borderWidth: 0,
|
|
// borderColor: 'red',
|
|
opacity: '0.4',
|
|
color: '#00D491'
|
|
// color:'#63E8C4'
|
|
},
|
|
outline: {
|
|
show: false
|
|
},
|
|
label: {
|
|
fontSize: 19,
|
|
fontColor: '#fff',
|
|
formatter: function (param) {
|
|
return allData.value.lable6.title1 + '\n' + '\n'
|
|
+ (param.value * 100) + '%';
|
|
},
|
|
}
|
|
}]
|
|
|
|
}
|
|
option.value = options;
|
|
}
|
|
getCSR()
|
|
return { chartRef, option }
|
|
}
|
|
|
|
export function liQuids() {
|
|
const chartRef = ref()
|
|
|
|
const option = ref<any>({});
|
|
const allData = ref<any[]>([]);
|
|
async function getCSR() {
|
|
const { data: { content: { dataList } } } = await getCSRDetail()
|
|
if(!dataList){
|
|
console.log("-----------------------------")
|
|
allData.value = forms.value
|
|
|
|
}
|
|
else{
|
|
allData.value = dataList
|
|
}
|
|
|
|
const options = {
|
|
title: {
|
|
text: allData.value.lable7.title2,
|
|
// subtext: 'Fake Data',
|
|
left: 'center',
|
|
bottom: '-5px',
|
|
textStyle: { fontSize: '14px', fontWeight: '100' }
|
|
},
|
|
series: [{
|
|
type: 'liquidFill',
|
|
silent: true,
|
|
data: generateSimilarValues(allData.value.lable7.year),
|
|
color: ['#8CBEFF', '#B1D2FF', '#8CBEFF'],
|
|
radius: '150px',
|
|
backgroundStyle: {
|
|
// borderWidth: 0,
|
|
// borderColor: 'red',
|
|
opacity: '0.6',
|
|
color: '#1D88FF'
|
|
// color:'#63E8C4'
|
|
},
|
|
outline: {
|
|
show: false
|
|
},
|
|
label: {
|
|
fontSize: 19,
|
|
fontColor: '#fff',
|
|
formatter: function (param) {
|
|
return allData.value.lable7.title1 + '\n' + '\n'
|
|
+ (param.value * 100) + '%';
|
|
},
|
|
}
|
|
}]
|
|
}
|
|
option.value = options;
|
|
}
|
|
getCSR()
|
|
return { chartRef, option }
|
|
} |