首页初步更改

src/views/Home/Index.vue

@@ -58,21 +58,22 @@
 
   <el-row class="mt-8px" :gutter="8" justify="space-between">
     <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <div>
+      <el-card shadow="never" style="margin-bottom: 10px; margin-top: 8px">
         <el-carousel :interval="4000" type="card" height="200px">
           <el-carousel-item v-for="item in image" :key="item.id">
             <el-image style="width: 100%; height: 100%" :src="item.src" alt="无图片" :title="item.name"/>
           </el-carousel-item>
         </el-carousel>
-      </div>
+      </el-card>
       <el-card shadow="never">
         <template #header>
           <div class="h-3 flex justify-between">
-            <span>{{ t('workplace.project') }}</span>
+<!--            <span>{{ t('workplace.project') }}</span>-->
+            <span>数据统计</span>
             <el-link
               type="primary"
               :underline="false"
-              href="https://github.com/yudaocode"
+              href="http://localhost/index"
               target="_blank"
             >
               {{ t('action.more') }}
@@ -82,7 +83,7 @@
         <el-skeleton :loading="loading" animated>
           <el-row>
             <el-col
-              v-for="(item, index) in projects"
+              v-for="(item, index) in dataList"
               :key="`card-${index}`"
               :xl="8"
               :lg="8"
@@ -91,14 +92,22 @@
               :xs="24"
             >
               <el-card shadow="hover" class="mr-5px mt-5px">
+<!--                <div class="flex items-center">-->
+<!--                  <Icon :icon="item.icon" :size="25" class="mr-8px" />-->
+<!--                  <span class="text-16px">{{ item.name }}</span>-->
+<!--                </div>-->
+<!--                <div class="mt-12px text-9px text-gray-400">{{ t(item.message) }}</div>-->
+<!--                <div class="mt-12px flex justify-between text-12px text-gray-400">-->
+<!--                  <span>{{ item.personal }}</span>-->
+<!--                  <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>-->
+<!--                </div>-->
                 <div class="flex items-center">
-                  <Icon :icon="item.icon" :size="25" class="mr-8px" />
-                  <span class="text-16px">{{ item.name }}</span>
+                  <span class="text-20px">{{ item.name }}</span>
                 </div>
-                <div class="mt-12px text-9px text-gray-400">{{ t(item.message) }}</div>
+                <div class="mt-12px text-16px text-gray-400">{{ item.infoCo2e }}</div>
                 <div class="mt-12px flex justify-between text-12px text-gray-400">
-                  <span>{{ item.personal }}</span>
-                  <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
+                  <span>{{ item.dAn }}</span>
+                  <span>{{ item.time }}</span>
                 </div>
               </el-card>
             </el-col>
@@ -131,25 +140,6 @@
 
 
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card shadow="never">
-        <template #header>
-          <div class="h-3 flex justify-between">
-            <span>{{ t('workplace.shortcutOperation') }}</span>
-          </div>
-        </template>
-        <el-skeleton :loading="loading" animated>
-          <el-row>
-            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">
-              <div class="flex items-center">
-                <Icon :icon="item.icon" class="mr-8px" />
-                <el-link type="default" :underline="false" @click="setWatermark(item.name)">
-                  {{ item.name }}
-                </el-link>
-              </div>
-            </el-col>
-          </el-row>
-        </el-skeleton>
-      </el-card>
       <el-card shadow="never" class="mt-8px">
         <template #header>
           <div class="h-3 flex justify-between">
@@ -178,6 +168,112 @@
           </div>
         </el-skeleton>
       </el-card>
+      <el-card shadow="never" style="margin-bottom: 10px">
+        <template #header>
+          <div class="h-3 flex justify-between">
+<!--            <span>{{ t('workplace.shortcutOperation') }}</span>-->
+            <span>完成项目</span>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-row>
+<!--            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
+            <el-col>
+              <div class="flex items-center">
+<!--                <Icon :icon="item.icon" class="mr-8px" />-->
+<!--                <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
+<!--&lt;!&ndash;                  {{ item.name }}&ndash;&gt;-->
+<!--                  Test-->
+<!--                </el-link>-->
+              <el-table
+                :data="pjList"
+                stripe
+                style="width:100%"
+                height="300"
+                ><el-table-column
+                fixed
+                prop="pjEtime"
+                label="预计完成日期"
+                style="width: 20%"
+              />
+                <el-table-column
+                  prop="pjName"
+                  label="标题"
+                  style="width: 30%"
+                />
+                <el-table-column
+                  prop="pjType"
+                  label="类别"
+                  style="width: 20%"
+                />
+                <el-table-column
+                  prop="pjDept"
+                  label="部门"
+                  style="width: 20%"/>
+                <el-table-column
+                  prop="pjNumber"
+                  label="人员"
+                  style="width: 10%"
+                />
+              </el-table>
+              </div>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+      <el-card shadow="never">
+        <template #header>
+          <div class="h-3 flex justify-between">
+            <!--            <span>{{ t('workplace.shortcutOperation') }}</span>-->
+            <span>未完成项目</span>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-row>
+            <!--            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
+            <el-col>
+              <div class="flex items-center">
+                <!--                <Icon :icon="item.icon" class="mr-8px" />-->
+                <!--                <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
+                <!--&lt;!&ndash;                  {{ item.name }}&ndash;&gt;-->
+                <!--                  Test-->
+                <!--                </el-link>-->
+                <el-table
+                  :data="pjList"
+                  stripe
+                  style="width:100%"
+                  height="300"
+                ><el-table-column
+                  fixed
+                  prop="pjEtime"
+                  label="预计完成日期"
+                  style="width: 20%"
+                />
+                  <el-table-column
+                    prop="pjName"
+                    label="标题"
+                    style="width: 30%"
+                  />
+                  <el-table-column
+                    prop="pjType"
+                    label="类别"
+                    style="width: 20%"
+                  />
+                  <el-table-column
+                    prop="pjDept"
+                    label="部门"
+                    style="width: 20%"/>
+                  <el-table-column
+                    prop="pjNumber"
+                    label="人员"
+                    style="width: 10%"
+                  />
+                </el-table>
+              </div>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
     </el-col>
   </el-row>
 </template>
@@ -210,21 +306,37 @@ let totalSate = reactive<WorkplaceTotal>({
   todo: 0
 })
 const image = [
-  {
-    id: 1,
-    src: mn2,
-    name: '02'
-  },
-  {
-    id: 2,
-    src: mn3,
-    name: '03'
-  },
-  {
-    id: 3,
-    src: mn4,
-    name: '04'
-  },
+  {id: 1, src: mn2, name: '02'},
+  {id: 2, src: mn3, name: '03'},
+  {id: 3, src: mn4, name: '04'},
+]
+const pjList = [
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
+  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
+]
+const dataList = [
+  {name: '碳排放',infoCo2e: 543672300,dAn: '吨', time: '2024-07-05'},
+  {name: '用水量',infoCo2e: 543672300,dAn: '吨', time: '2024-07-05'},
+  {name: '环保投入',infoCo2e: 543672300,dAn: '万元', time: '2024-07-05'},
+  {name: '技能培训',infoCo2e: 543672300,dAn: '人', time: '2024-07-05'},
+  {name: '污染物质',infoCo2e: 543672300,dAn: '吨', time: '2024-07-05'},
+  {name: '研发费用',infoCo2e: 543672300,dAn: '万元', time: '2024-07-05'}
 ]
 const getCount = async () => {
   const data = {