From 9d651ee84211f148cb9474ca856293ff5df0eeea Mon Sep 17 00:00:00 2001
From: zouyiqing <854938661@qq.com>
Date: Wed, 18 Oct 2023 15:42:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=B3=E8=BF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/company/statistics.vue    |  41 +++++-
 src/views/home/csr/CSRContent22.vue | 193 ++++++++++++++++++++--------
 2 files changed, 174 insertions(+), 60 deletions(-)

diff --git a/src/views/company/statistics.vue b/src/views/company/statistics.vue
index 303b891..4f6236e 100644
--- a/src/views/company/statistics.vue
+++ b/src/views/company/statistics.vue
@@ -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>
diff --git a/src/views/home/csr/CSRContent22.vue b/src/views/home/csr/CSRContent22.vue
index ab5538a..7d3f51d 100644
--- a/src/views/home/csr/CSRContent22.vue
+++ b/src/views/home/csr/CSRContent22.vue
@@ -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>