main
parent
c3b49a682c
commit
9d651ee842
|
|
@ -6,7 +6,8 @@ import * as echarts from "echarts";
|
|||
import { useDate } from "@/views/home/hooks/useDate";
|
||||
import { message } from "@/utils/message";
|
||||
|
||||
import { charData } from "./CSRDatas";
|
||||
import { charData, charData2 } from "./CSRDatas";
|
||||
const { chartRef: chartRef1, option: option1 } = charData2();
|
||||
const { push } = useRouter();
|
||||
const route = useRoute();
|
||||
const { day, week } = useDate();
|
||||
|
|
@ -146,7 +147,7 @@ function isStrongPassword(password) {
|
|||
<el-tabs
|
||||
type="border-card"
|
||||
class="demo-tabs h100% color"
|
||||
style="color: black;overflow-y: scroll;height:800px;"
|
||||
style="color: black; overflow-y: scroll; height: 800px"
|
||||
>
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
|
|
@ -155,7 +156,7 @@ function isStrongPassword(password) {
|
|||
<span>首页看板</span>
|
||||
</span>
|
||||
</template>
|
||||
<div style="overflow-y: scroll;height:800px;">
|
||||
<div style="overflow-y: scroll; height: 800px">
|
||||
<n-form
|
||||
:label-width="90"
|
||||
:model="formValue"
|
||||
|
|
@ -332,6 +333,40 @@ function isStrongPassword(password) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模块三 -->
|
||||
<div class="w-100% h-500px">
|
||||
<VChart ref="chartRef1" :option="option1" autoresize />
|
||||
</div>
|
||||
<!-- 模块四 -->
|
||||
<div style="height: 350px">
|
||||
<el-row
|
||||
align="middle"
|
||||
type="flex"
|
||||
style="flex-wrap: wrap"
|
||||
:gutter="0"
|
||||
>
|
||||
<el-col
|
||||
:span="4"
|
||||
v-for="item in twoVal"
|
||||
:key="item.id"
|
||||
:offset="0"
|
||||
>
|
||||
<div style="width: 100%; height: 180px; padding: 10px">
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
border: 1px solid #ccc;
|
||||
padding: 30px;
|
||||
"
|
||||
>
|
||||
<h3>{{ item.text }}</h3>
|
||||
<br />
|
||||
<h3>{{ item.info }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="部门查询"> 画页面 </el-tab-pane>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,26 @@
|
|||
<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()
|
||||
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 )
|
||||
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>
|
||||
|
|
@ -22,72 +29,144 @@ const cardsClick = (it)=>{
|
|||
<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
|
||||
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="w-full h-450px ">
|
||||
<VChart ref="chartRef" :option="option" autoresize />
|
||||
<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>
|
||||
<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 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 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
|
||||
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 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="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 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 class="text-#000 text-22px py20px font-extrabold">
|
||||
2023年9月7日价格
|
||||
</div>
|
||||
|
||||
</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;
|
||||
.onStyle {
|
||||
background: #2c7af7 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.cards_liuyan{
|
||||
div{
|
||||
background: #ECF3FF;
|
||||
.cards_liuyan {
|
||||
div {
|
||||
background: #ecf3ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue