398 lines
9.4 KiB
Plaintext
398 lines
9.4 KiB
Plaintext
<!-- CSR 碳中和 -->
|
|
<script setup lang="ts">
|
|
import * as echarts from 'echarts';
|
|
import AppBlock from '@/components/AppBlock.vue'
|
|
import { NModal } from 'naive-ui';
|
|
import { charData, pieData1, pieData2, liQuid, liQuids } from './CSRData'
|
|
import { getCSRDetail, getCsrActList } from '@/api/daikin/base'
|
|
import Modify from './modify.vue'
|
|
import ModifyB from './modifyB.vue'
|
|
import { message } from '@/utils/message';
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
const store = useUserStore()
|
|
const userCode = ['admin','csr_dandang','tech_service'].includes(store.user.roleCode)
|
|
|
|
const { chartRef, option } = charData()
|
|
const { chartRef: chartRefP1, option: optionP1 } = pieData1()
|
|
const { chartRef: chartRefP2, option: optionP2 } = pieData2()
|
|
const { chartRef: chartRefli, option: optionli } = liQuid()
|
|
const { chartRef: chartReflis, option: optionlis } = liQuids()
|
|
const container = ref(null);
|
|
const startType = ref(40)
|
|
// 导入 ECharts
|
|
const shomk = ref(false)
|
|
const shomkB = ref(false)
|
|
const shomks = () => {
|
|
shomk.value = shomk.value === false ? true : false
|
|
console.log(shomk.value)
|
|
}
|
|
const shomksB = () => {
|
|
shomkB.value = shomkB.value === false ? true : false
|
|
console.log(shomkB.value)
|
|
}
|
|
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: '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'
|
|
}
|
|
|
|
}
|
|
},
|
|
})
|
|
onBeforeMount(async () => {
|
|
const { data: { content: { dataList } } } = await getCSRDetail()
|
|
//
|
|
if(dataList){
|
|
form.value = dataList
|
|
}
|
|
|
|
const { data } = await getCsrActList()
|
|
|
|
dog.value = data
|
|
|
|
})
|
|
const dog = ref()
|
|
const handleCommand = (command: string | number | object) => {
|
|
console.log(command)
|
|
downloadFile(command)
|
|
}
|
|
|
|
async function downloadFile(data) {
|
|
const url = data.int.url
|
|
try {
|
|
const response = await fetch(url);
|
|
const blob = await response.blob();
|
|
|
|
const downloadUrl = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = downloadUrl;
|
|
link.download = data.int.originalFileName; // 替换为你要保存的文件名
|
|
link.click();
|
|
URL.revokeObjectURL(downloadUrl);
|
|
} catch (error) {
|
|
message.error('下载文件出错：', error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppBlock class="h-full flex-1 box">
|
|
|
|
<div class="h-full relative">
|
|
<el-button v-if="userCode" type="primary" class="button" @click="shomks">管理</el-button>
|
|
<!-- 123 -->
|
|
<div class="text-32px font-700 h85px flex items-center justify-center line">
|
|
{{ `<CSR 碳中和>` }}
|
|
</div>
|
|
<div class="flex p10px" v-if="form">
|
|
<div class="flex-1 cart">
|
|
<p>{{ form.lable1.name }}</p>
|
|
<div>
|
|
{{ form.lable1.year }}<el-icon>
|
|
<CaretTop />
|
|
</el-icon>{{ form.lable1.date }}%
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 cart">
|
|
<p>{{ form.lable2.name }}</p>
|
|
<div>
|
|
{{ form.lable2.year }}<el-icon>
|
|
<CaretTop />
|
|
</el-icon>{{ form.lable2.date }}%
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 cart">
|
|
<p>{{ form.lable3.name }}</p>
|
|
<div>
|
|
{{ form.lable3.year }}<el-icon>
|
|
<CaretTop />
|
|
</el-icon>{{ form.lable3.date }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex " v-if="form">
|
|
<div>
|
|
<div class="w88% h400px py30px pl30px border-solid border-color-#f1f1f1 border-width-1px">
|
|
<VChart ref="chartRef" :option="option" autoresize />
|
|
</div>
|
|
<div class="flex">
|
|
<div class="w60%">
|
|
<div class="pl30px ">
|
|
<div class="py20px text-24px font-extrabold">{{ form.lable5.name }}</div>
|
|
<el-progress :percentage="form.lable5.year" :text-inside="false" color="#00B3D8" status="exception"
|
|
:stroke-width="50" class="w100% !rounded-0">
|
|
<el-button text></el-button>
|
|
</el-progress>
|
|
<div class="text-center text-#00BDD3 text-18px my20px"><el-icon>
|
|
<CaretTop />
|
|
</el-icon>{{ form.lable5.date }}</div>
|
|
</div>
|
|
<div class="text-#6288FB flex px30px text-18px">
|
|
<div class="ditt">
|
|
<img src="./images/ycail@2x.png">
|
|
{{ form.lable5.title1 }}
|
|
</div>
|
|
<div class="ditt ml20px">
|
|
<img src="./images/nenh@2x.png">
|
|
{{ form.lable5.title2 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w39% flex flex-wrap">
|
|
<div class="w300px h30px text-22px font-extrabold">{{ form.lable6.name }}</div>
|
|
<div class="w150px h200px">
|
|
<VChart ref="chartRefli" :option="optionli"></VChart>
|
|
</div>
|
|
<div class="w150px h200px ml10px">
|
|
<VChart ref="chartReflis" :option="optionlis"></VChart>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w480px border-solid border-color-#f1f1f1 border-width-1px">
|
|
<div class="w100% h230px">
|
|
<VChart ref="chartRefP1" :option="optionP1"></VChart>
|
|
</div>
|
|
<div class="w100% h250px">
|
|
<VChart ref="chartRefP2" :option="optionP2"></VChart>
|
|
</div>
|
|
<div class="flex-1 w100% h195px px20px py5px border-solid border-color-#f1f1f1 border-width-1px">
|
|
<div v-if="dog" class="text-22px mb-20px font-extrabold">碳减排非PLUS活动信息: <el-button type="primary"
|
|
class="ml25px" v-if="userCode" @click="shomksB">管理</el-button></div>
|
|
<div class="my20px flex w330px h20px" v-for="i in dog">
|
|
<div class="max-w300px min-100px">{{ i.title }}</div>
|
|
<div>
|
|
<el-dropdown max-height="100px" @command="handleCommand">
|
|
<span class="el-dropdown-link">
|
|
<el-icon color="#097BC2" class="el-icon--right"><CaretBottom /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item v-if="i.filePathList" v-for="int in i.filePathList" :command="{int}">{{int.originalFileName}}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</AppBlock>
|
|
<n-modal v-model:show="shomk">
|
|
<Modify class="w90% mt30px"></Modify>
|
|
</n-modal>
|
|
<n-modal v-model:show="shomkB">
|
|
<ModifyB class="w90% mt30px"></ModifyB>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.button {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 500;
|
|
}
|
|
|
|
|
|
|
|
|
|
.ditt {
|
|
background-color: #F6F8FF;
|
|
border-radius: 30px;
|
|
padding: 8px;
|
|
font-size: 20px;
|
|
height: 45px;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
/deep/.el-progress-bar__outer,
|
|
/deep/.el-progress-bar__inner {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/deep/.el-progress-bar__inner {
|
|
background-color: #00B3D8;
|
|
}
|
|
|
|
@border-line: 1px solid #e7ebf5;
|
|
|
|
.cart {
|
|
background-color: #F4F8FF;
|
|
// background-color: #6c90ce;
|
|
height: 100px;
|
|
margin-left: 5px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
|
|
p {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 40px;
|
|
margin-top: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.el-icon {
|
|
color: #0049E0;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
border: @border-line;
|
|
}
|
|
|
|
// img {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// user-select: none;
|
|
// user-drag: none;
|
|
// -webkit-user-drag: none;
|
|
// }
|
|
|
|
.box {
|
|
// height: calc(100% - 85px);
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
|
|
.box-1 {
|
|
height: 435px;
|
|
border-right: @border-line;
|
|
border-bottom: @border-line;
|
|
}
|
|
|
|
.box-2 {
|
|
flex: 1;
|
|
border-right: @border-line;
|
|
}
|
|
|
|
.box-3 {
|
|
height: 506px;
|
|
border-bottom: @border-line;
|
|
}
|
|
|
|
.box-4 {
|
|
flex: 1;
|
|
}
|
|
}</style>
|