593 lines
15 KiB
Plaintext
593 lines
15 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';
|
||
|
||
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({
|
||
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: '85, 45, 67, 80, 70, 110',
|
||
title1:'DIS',
|
||
title2:'DSZ',
|
||
},
|
||
lable14:{
|
||
name: '2020-1-25, 2021-12-12, 2022-11-14, 2023-14-5, 2024, 2025',
|
||
year: '120, 200, 150, 80, 70, 110',
|
||
date: '85, 45, 67, 80, 70, 110',
|
||
title1:'DIS',
|
||
title2:'DSZ',
|
||
},
|
||
lable5:{
|
||
name: '30%碳减排课题收集整体情况:',
|
||
year: '0.6',
|
||
date: '14%',
|
||
title1:'原材料: 15.5%',
|
||
title2:'能源消耗: 1.7%',
|
||
},
|
||
lable6:{
|
||
name: '30%碳减排课题收集整体情况:',
|
||
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'
|
||
}
|
||
|
||
}
|
||
},
|
||
})
|
||
|
||
async function getCSR() {
|
||
const {data,data:{content:{form:ffff}}} = await getCSRDetail()
|
||
form.value = ffff
|
||
|
||
}
|
||
|
||
export function charData() {
|
||
|
||
const chartRef = ref()
|
||
const params = '15%'
|
||
|
||
|
||
const option = ref<EChartsOption>({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['DIS', 'DSZ'],
|
||
bottom:'0px',
|
||
// right:'50px'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
title: [{ text: '单位:千吨' }],
|
||
// color:['#58D9FC','red','#fff'],
|
||
// dataset: {
|
||
// // 提供一份数据。
|
||
// source: [
|
||
// ['2020实绩', 220, 0, 220],
|
||
// ['2021实绩', 182, 0, 182],
|
||
// ['2022实绩', 191, 0, 191],
|
||
// ['2023', 234, 43, 234],
|
||
// ['2024', 290, 23, 290],
|
||
// ['2025', 330, 65, 330],
|
||
// ]
|
||
// },
|
||
|
||
|
||
|
||
xAxis: { type: 'category',
|
||
data:form.value.lable4.name.split(",")
|
||
},
|
||
yAxis: {},
|
||
series: [
|
||
{
|
||
name: 'DIS',
|
||
type: 'bar',
|
||
barWidth: '30%',
|
||
data: form.value.lable4.year.split(","),
|
||
label:
|
||
{
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
name: 'DSZ',
|
||
type: 'bar',
|
||
label:
|
||
{
|
||
show: false,
|
||
position: 'inside',
|
||
formatter: '{c}%'
|
||
},
|
||
barWidth: '30%',
|
||
data: form.value.lable4.date.split(","),
|
||
},
|
||
// { name: '预测/实绩用量', type: 'line' }
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function charData2() {
|
||
|
||
const chartRef = ref()
|
||
const params = '15%'
|
||
|
||
|
||
const option = ref<EChartsOption>({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['DIS', 'DSZ'],
|
||
top:'0px',
|
||
right:'50px'
|
||
},
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
|
||
containLabel: true
|
||
},
|
||
title: [{ text: '单位:千吨' }],
|
||
// color:['#58D9FC','red','#fff'],
|
||
// dataset: {
|
||
// // 提供一份数据。
|
||
// source: [
|
||
// ['2020实绩', 220, 0, 220],
|
||
// ['2021实绩', 182, 0, 182],
|
||
// ['2022实绩', 191, 0, 191],
|
||
// ['2023', 234, 43, 234],
|
||
// ['2024', 290, 23, 290],
|
||
// ['2025', 330, 65, 330],
|
||
// ]
|
||
// },
|
||
|
||
|
||
|
||
xAxis: { type: 'category',
|
||
data:form.value.lable14.name.split(","),
|
||
axisLabel: {
|
||
interval: 0, //隔几项显示一个标签
|
||
rotate: "-90" //标签倾斜的角度，旋转的角度是-90到90度
|
||
}
|
||
},
|
||
yAxis: {},
|
||
series: [
|
||
{
|
||
name: 'DIS',
|
||
type: 'line',
|
||
data: form.value.lable14.year.split(","),
|
||
|
||
},
|
||
{
|
||
name: 'DSZ',
|
||
type: 'line',
|
||
data: form.value.lable14.date.split(","),
|
||
},
|
||
// { name: '预测/实绩用量', type: 'line' }
|
||
]
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function pieData1() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
title: {
|
||
text: form.value.lable8.name,
|
||
// subtext: 'Fake Data',
|
||
left: 'center',
|
||
textStyle: { color: '#4075E1', }
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
grid: { left: '20', top: '30', right: '70', bottom: '10', containLabel: true },
|
||
// legend: {
|
||
// orient: 'vertical',
|
||
// left: 'left'
|
||
// },
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
selectedMode: 'single',
|
||
radius: [0, '30%'],
|
||
label: {
|
||
position: 'inner',
|
||
fontSize: 14
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 1548, name: '铝',label:{color:'#fff',fontSize:'16px',fontWeight:'bold'} },
|
||
{ value: 775, name: '铁',label:{color:'#fff',fontSize:'16px',fontWeight:'bold'} },
|
||
{ value: 679, name: '铜', selected: true ,label:{color:'#fff',fontSize:'16px',fontWeight:'bold'}}
|
||
],
|
||
// 自定义颜色
|
||
itemStyle: {
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||
},
|
||
normal: {
|
||
// 自定义每个扇形的颜色
|
||
color: function (params) {
|
||
const colorList = ['#3EC22B', '#3EC22B', '#3EC22B',];
|
||
return colorList[params.dataIndex];
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['45%', '60%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
// borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 4
|
||
},
|
||
labelLine: {
|
||
length: 30
|
||
},
|
||
label: {
|
||
formatter: ' {b|{b}：}{c}吨 ',
|
||
backgroundColor: '#F6F8FC',
|
||
borderColor: '#8C8D8E',
|
||
borderWidth: 1,
|
||
borderRadius: 4,
|
||
|
||
rich: {
|
||
a: {
|
||
color: '#6E7079',
|
||
lineHeight: 22,
|
||
align: 'center'
|
||
},
|
||
hr: {
|
||
borderColor: '#8C8D8E',
|
||
width: '100%',
|
||
borderWidth: 1,
|
||
height: 0
|
||
},
|
||
b: {
|
||
color: '#4C5058',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
lineHeight: 33
|
||
},
|
||
per: {
|
||
color: '#fff',
|
||
backgroundColor: '#4C5058',
|
||
padding: [3, 4],
|
||
borderRadius: 4
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{ value: 335, name: '铝' },
|
||
{ value: 310, name: '铁' },
|
||
{ value: 135, name: '铜' },
|
||
],
|
||
// 自定义颜色
|
||
// itemStyle: {
|
||
// borderColor: '#fff',
|
||
// borderWidth: 2,
|
||
// emphasis: {
|
||
// shadowBlur: 10,
|
||
// shadowOffsetX: 0,
|
||
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||
// },
|
||
// normal: {
|
||
// // 自定义每个扇形的颜色
|
||
// color: function (params) {
|
||
// const colorList = ['#337EE6', '#337EE6', '#337EE6',];
|
||
// return colorList[params.dataIndex];
|
||
// },
|
||
// },
|
||
// },
|
||
}
|
||
]
|
||
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
|
||
|
||
export function pieData2() {
|
||
const chartRef = ref()
|
||
const option = ref<EChartsOption>({
|
||
// legend: {
|
||
// top: 'bottom'
|
||
// },
|
||
title: {
|
||
text: form.value.lable9.name,
|
||
// subtext: 'Fake Data',
|
||
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,
|
||
// fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: true
|
||
},
|
||
// data: [
|
||
// { value: 1048, name: 'Search Engine' },
|
||
// { value: 735, name: 'Direct' },
|
||
// { value: 580, name: 'Email' },
|
||
// { value: 484, name: 'Union Ads' },
|
||
// { value: 300, name: 'Video Ads' }
|
||
// ]
|
||
data: Object.values(form.value.lable9.data).filter(item => item.name !== '' || item.value !== '')
|
||
}
|
||
]
|
||
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
const gl = '10%'
|
||
export function liQuid() {
|
||
const chartRef = ref()
|
||
const option = ref({
|
||
title: {
|
||
text: '整体目标加' + gl,
|
||
// subtext: 'Fake Data',
|
||
left: 'center',
|
||
bottom: '-5px',
|
||
textStyle: { fontSize: '14px', fontWeight: '100' }
|
||
},
|
||
series: [{
|
||
type: 'liquidFill',
|
||
silent: true,
|
||
data: [0.76, 0.55, 0.62],
|
||
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 '原材料' + '\n'+ '\n'
|
||
+ (param.value * 100) + '%';
|
||
},
|
||
}
|
||
}]
|
||
|
||
})
|
||
return { chartRef, option }
|
||
}
|
||
|
||
export function liQuids() {
|
||
const chartRef = ref()
|
||
const option = ref({
|
||
title: {
|
||
text: '整体目标加' + gl,
|
||
// subtext: 'Fake Data',
|
||
left: 'center',
|
||
bottom: '-5px',
|
||
textStyle: { fontSize: '14px', fontWeight: '100' }
|
||
},
|
||
series: [{
|
||
type: 'liquidFill',
|
||
silent: true,
|
||
data: [0.8, 0.65, 0.72],
|
||
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 '能源消耗' + '\n'+ '\n'
|
||
+ (param.value * 100) + '%';
|
||
},
|
||
}
|
||
}]
|
||
|
||
})
|
||
return { chartRef, option }
|
||
} |