zouyiqing
/
dajin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

足迹

main
zouyiqing 2023-10-18 15:42:34 +08:00
parent c3b49a682c
commit 9d651ee842
2 changed files with 174 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/company/statistics.vue
View File

@ -6,7 +6,8 @@ import * as echarts from "echarts";
import { useDate } from "@/views/home/hooks/useDate"; import { useDate } from "@/views/home/hooks/useDate";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import { charData } from "./CSRDatas"; import { charData, charData2 } from "./CSRDatas";
const { chartRef: chartRef1, option: option1 } = charData2();
const { push } = useRouter(); const { push } = useRouter();
const route = useRoute(); const route = useRoute();
const { day, week } = useDate(); const { day, week } = useDate();
@ -146,7 +147,7 @@ function isStrongPassword(password) {
<el-tabs <el-tabs
type="border-card" type="border-card"
class="demo-tabs h100% color" class="demo-tabs h100% color"
style="color: black;overflow-y: scroll;height:800px;" style="color: black; overflow-y: scroll; height: 800px"
> >
<el-tab-pane> <el-tab-pane>
<template #label> <template #label>
@ -155,7 +156,7 @@ function isStrongPassword(password) {
<span>首页看板</span> <span>首页看板</span>
</span> </span>
</template> </template>
<div style="overflow-y: scroll;height:800px;"> <div style="overflow-y: scroll; height: 800px">
<n-form <n-form
:label-width="90" :label-width="90"
:model="formValue" :model="formValue"
@ -332,6 +333,40 @@ function isStrongPassword(password) {
</div> </div>
</div> </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> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="部门查询"> 画页面 </el-tab-pane> <el-tab-pane label="部门查询"> 画页面 </el-tab-pane>

191
src/views/home/csr/CSRContent22.vue
View File

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