94 lines
4.8 KiB
Plaintext
94 lines
4.8 KiB
Plaintext
<script setup lang="ts">
|
||
import { charData, charData2,pieData1, pieData2, liQuid, liQuids } from './CSRDatas'
|
||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||
const { chartRef, option } = charData()
|
||
const { chartRef:chartRef1, option:option1} = charData2()
|
||
const { chartRef: chartRefP1, option: optionP1 } = pieData1()
|
||
|
||
const locale = computed(() => zhCn)
|
||
const YearTime1 =ref('2020')
|
||
const YearTime2 =ref('2023')
|
||
const flgs = ref(1)
|
||
const cardsClick = (it)=>{
|
||
flgs.value = it
|
||
console.log(flgs.value )
|
||
// dataInfo.treeSource = it
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex w-full h-full">
|
||
<!-- <AppBlock class="w-full ">
|
||
<img src="./images/goudongxi3.png" class="w-full h-full" />
|
||
</AppBlock> -->
|
||
|
||
<div class="flex flex-wrap bg-#f5f5f5 w-full h-full rd-25px justify-between rd-25px">
|
||
<div class="flex flex-wrap w-59% h-full rd-25px " style="align-content: space-between;">
|
||
<div class="w-full h-60% p20px relative bg-#FFF" style="border-radius: 25px 25px 0 0 ;">
|
||
<div class="text-center text-#142142 text-22px py10px font-extrabold " >原材料碳排放量数据图表</div>
|
||
<div class="flex text-#1270EE h50px w-250px px30px leading-25px absolute z-1000 right-0 items-center text-center cards_liuyan">
|
||
<div class="flex-1 " style="border-radius:15px 0 0 15px ;" :class="flgs ===1?'onStyle':''" @click="cardsClick(1)">月度</div>
|
||
<div class="flex-1" :class="flgs ===2?'onStyle':''" @click="cardsClick(2)">季度</div>
|
||
<div class="flex-1" style="border-radius:0 15px 15px 0;" :class="flgs ===3?'onStyle':''" @click="cardsClick(3)">年度</div>
|
||
|
||
</div>
|
||
<div class="w-full h-450px ">
|
||
<VChart ref="chartRef" :option="option" autoresize />
|
||
</div>
|
||
<div class="absolute top-91%">
|
||
日期：<el-config-provider :locale="locale">
|
||
<el-date-picker v-model="YearTime1" :style="{ width: '100px' }" type="year" size="size" class=""/> —
|
||
<el-date-picker v-model="YearTime2" :style="{ width: '100px' }" type="year" size="size" />
|
||
</el-config-provider>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-#fff h-38.5% ">
|
||
<div class="text-center text-#142142 text-22px py20px font-extrabold " >SMM牌号低碳铝价格&价差</div>
|
||
<div class="w-full h-340px ">
|
||
<VChart ref="chartRef1" :option="option1" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap w-40% h-full justify-between rd-25px" style="align-content: space-between;">
|
||
<div class="w-full h-70% bg-#fff" style="border-radius: 25px 25px 0 0 ;">
|
||
<div class="text-center text-#265DD5 text-22px py20px font-extrabold " >
|
||
原材米用量及碳排放量占比图<br>
|
||
<span class="text-16px mt10px"> (FY20BASE基准)</span>
|
||
</div>
|
||
<div class="w-full h-400px ">
|
||
<VChart ref="chartRefP1" :option="optionP1" autoresize />
|
||
</div>
|
||
<div class="m20px h-100px bg-#F5F8FF p10px">
|
||
<div class="py5px"><span class="text-18px font-bold text-#3164BF">铝</span><span class="ml5px">使用量10,700吨，碳排放量159,158吨</span></div>
|
||
<div class="py5px"><span class="text-18px font-bold text-#3164BF">铝</span><span class="ml5px">使用量10,700吨，碳排放量159,158吨</span></div>
|
||
<div class="py5px"><span class="text-18px font-bold text-#3164BF">铝</span><span class="ml5px">使用量10,700吨，碳排放量159,158吨</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full h-28.5% bg-#fff px20px">
|
||
<div class=" text-#000 text-22px py20px font-extrabold " > 2023年9月7日价格</div>
|
||
|
||
<div class="px20px py10px bg-#F5F8FF rd-5px" ><span class=" text-#000 text-16px font-extrabold"> 现行铝：</span><span class="text-22px text-#265DD5 font-extrabold">12,000</span><span> 元/吨</span></div>
|
||
<div class="px20px py10px bg-#F5F8FF rd-5px mt5px" ><span class=" text-#000 text-16px font-extrabold"> 现行铝：</span><span class="text-22px text-#265DD5 font-extrabold">12,000</span><span> 元/吨</span></div>
|
||
<div class="px20px py10px bg-#F5F8FF rd-5px mt5px" ><span class=" text-#000 text-16px font-extrabold"> 现行铝：</span><span class="text-22px text-#265DD5 font-extrabold">12,000</span><span> 元/吨</span></div>
|
||
<div class="px20px py10px bg-#F5F8FF rd-5px mt5px" ><span class=" text-#000 text-16px font-extrabold"> 数据来源：</span><span class=" text-#265DD5 ">行情展示 (cneeex.com)</span> <br> SMM网站</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.onStyle{
|
||
background: #2C7AF7!important;
|
||
color: #fff;
|
||
}
|
||
.cards_liuyan{
|
||
div{
|
||
background: #ECF3FF;
|
||
}
|
||
}
|
||
</style>
|