feat: 添加看板首页

components.d.ts

@@ -8,11 +8,13 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Card: typeof import('./src/components/Card.vue')['default']
     CardTitle: typeof import('./src/components/CardTitle.vue')['default']
     Chart: typeof import('./src/components/Chart/index.vue')['default']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    Panel: typeof import('./src/components/Panel.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/Card.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-
-</style>

src/components/CardTitle.vue

@@ -1,16 +1,10 @@
 <template>
   <div class="card-title">
-    <img :src="icon === 'circle' ? circle : diamond" alt=""></img>
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, withDefaults } from 'vue';
-import diamond from '@/assets/images/diamond.png';
-import circle from '@/assets/images/circle.png';
-
-withDefaults(defineProps<{ icon?: 'circle' | 'diamond' }>(), { icon: 'diamond' });
 </script>
 
 <style lang="less" scoped>
@@ -22,16 +16,11 @@ withDefaults(defineProps<{ icon?: 'circle' | 'diamond' }>(), { icon: 'diamond' }
   font-weight: bold;
   font-size: 20px;
   margin-top: 4px;
-  line-height: 42px;
+  line-height: 40px;
   color: #FFFFFF;
-  background: linear-gradient(0deg, #B2FEFF 0%, #FFFFFF 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-img {
-  width: 26px;
-  height: 26px;
-  margin-left: 18px;
+  background: url(@/assets/images/title.png) no-repeat center;
+  background-size: 100% 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 </style>

src/components/Panel.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="panel">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+.panel {
+  position: relative;
+  width: 460px;
+  height: 100%;
+  background-color: rgba(29, 66, 110, 0.6);
+  padding: 8px;
+  box-sizing: border-box;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height:  2px;
+    background: linear-gradient(270deg, rgba(27, 97, 162, 1) 0%, rgba(62, 239, 239, 1) 47%, rgba(27, 97, 162, 1) 96%);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height:  2px;
+    background: linear-gradient(270deg, rgba(27, 97, 162, 1) 0%, rgba(62, 239, 239, 1) 47%, rgba(27, 97, 162, 1) 96%);
+  }
+}
+</style>

src/views/home/index.vue

@@ -1,13 +1,288 @@
 <template>
-  <div>
-    首页
+  <div class="w-full h-full relative flex justify-between items-center">
+    <!-- 左侧面板 -->
+    <Panel>
+      <CardTitle>工程概况</CardTitle>
+      <ul class="list-none m-0 p-0 px-20px py-10px flex flex-col gap-y-10px">
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">项目名称</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">项目经理</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">项目类型</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">项目地点</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">项目规模</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">项目投资额(万元)</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+      </ul>
+
+      <CardTitle>安全管理</CardTitle>
+      <div class="w-full h-300px flex gap-20px">
+        <div class="flex-1 flex flex-col items-center justify-center gap-y-10px">
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right">检查总数：</span>
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right">合格数：</span>
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right"><span class="point"></span>已整改：</span>
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right"
+              ><span class="point" style="background: #e86525"></span>未整改：</span
+            >
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+        </div>
+        <div class="flex-1 relative">
+          <Chart :options="getPieOptions(data)" />
+          <div
+            class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center"
+          >
+            <div class="text-24px mb-10px">80.2%</div>
+            <div class="text-#ccc">整改通过率</div>
+          </div>
+        </div>
+      </div>
+
+      <CardTitle>安全管理</CardTitle>
+      <div class="w-full h-300px flex gap-20px">
+        <div class="flex-1 flex flex-col items-center justify-center gap-y-10px">
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right">检查总数：</span>
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right">合格数：</span>
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right"><span class="point"></span>已整改：</span>
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+          <div class="flex items-center text-16px">
+            <span class="w-120px text-right"
+              ><span class="point" style="background: #e86525"></span>未整改：</span
+            >
+            <span
+              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
+            >
+          </div>
+        </div>
+        <div class="flex-1 relative">
+          <Chart :options="getPieOptions(data)" />
+          <div
+            class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center"
+          >
+            <div class="text-24px mb-10px">50.9.2%</div>
+            <div class="text-#ccc">整改通过率</div>
+          </div>
+        </div>
+      </div>
+    </Panel>
+
+    <!-- 中间区域 -->
+    <div class="h-full box-border p-10px middle-content flex-1 flex flex-col gap-10px">
+      <CardTitle>全景概况</CardTitle>
+      <iframe
+        src="https://www.720yun.com/t/adejerhnzy3?scene_id=15644029"
+        frameborder="0"
+        class="w-full flex-1"
+      ></iframe>
+      <div>
+        <CardTitle>参建单位</CardTitle>
+        <el-table height="200">
+          <el-table-column label="序号"> </el-table-column>
+          <el-table-column label="单位名称"> </el-table-column>
+          <el-table-column label="单位地址"> </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 右侧面板 -->
+    <Panel>
+      <CardTitle>管理目标</CardTitle>
+      <ul class="list-none m-0 p-0 px-20px py-10px flex flex-col gap-y-10px">
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">项目目标</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">文明工地目标</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">创新目标</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">质量目标</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+        <li>
+          <span class="text-20px font-bold inline-block w-200px">安全目标</span>
+          <span class="text-#ccc text-16px">xxxx</span>
+        </li>
+      </ul>
+
+      <CardTitle>人员数据</CardTitle>
+      <div class="w-full box-border pt-30px px-10px">
+        <div class="w-full flex justify-between px-20px box-border">
+          <div class="text-center">
+            <div class="text-#ccc text-14px mb-8px">在册人数</div>
+            <div class="text-20px font-bold">2550</div>
+          </div>
+          <div class="text-center">
+            <div class="text-#ccc text-14px mb-8px">今日未出勤人数</div>
+            <div class="text-20px font-bold">2550</div>
+          </div>
+          <div class="text-center">
+            <div class="text-#ccc text-14px mb-8px">今日出勤人数</div>
+            <div class="text-20px font-bold">2550</div>
+          </div>
+        </div>
+        <div class="flex h-260px">
+          <div class="flex-1">
+            <Chart :options="getPieOptions(data)" />
+          </div>
+          <div class="flex-1 flex flex-col items-center justify-center gap-y-10px">
+            <div class="w-full flex items-center justify-between text-16px">
+              <span class="text-right"
+                ><span class="point" style="background: #6ec44e"></span>管理人员</span
+              >
+              <span class="text-#6ec44e"
+                ><span class="text-20px inline-block mr-8px">320</span>人</span
+              >
+            </div>
+            <div class="w-full flex items-center justify-between text-16px">
+              <span class="text-right"
+                ><span class="point" style="background: #f4982c"></span>劳务人员</span
+              >
+              <span class="text-#f4982c"
+                ><span class="text-20px inline-block mr-8px">320</span>人</span
+              >
+            </div>
+            <div class="w-full flex items-center justify-between text-16px">
+              <span class="text-right"
+                ><span class="point" style="background: #14cee6"></span>其他</span
+              >
+              <span class="text-#14cee6"
+                ><span class="text-20px inline-block mr-8px">320</span>人</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <CardTitle>技术指标</CardTitle>
+      <el-descriptions size="large" :column="2" class="mt-20px">
+        <el-descriptions-item label="用地面积(㎡)">80000</el-descriptions-item>
+        <el-descriptions-item label="建筑占地面积(㎡)">50000</el-descriptions-item>
+        <el-descriptions-item label="地上总建筑面积(㎡)">50.9.2%</el-descriptions-item>
+        <el-descriptions-item label="地下总建筑面积(㎡)">50.9.2%</el-descriptions-item>
+        <el-descriptions-item label="计容面积(㎡)">50.9.2%</el-descriptions-item>
+        <el-descriptions-item label="建筑密度(%)">50.9.2%</el-descriptions-item>
+        <el-descriptions-item label="容积率">50.9.2%</el-descriptions-item>
+        <el-descriptions-item label="机动车停车位(个)">50.9.2%</el-descriptions-item>
+        <el-descriptions-item label="绿化面积(㎡)">50.9.2%</el-descriptions-item>
+        <el-descriptions-item label="绿化率(%)">50.9.2%</el-descriptions-item>
+      </el-descriptions>
+    </Panel>
   </div>
 </template>
 
 <script setup lang="ts">
+import Panel from '@/components/Panel.vue';
+import CardTitle from '@/components/CardTitle.vue';
+import Chart from '@/components/Chart/index.vue';
+import type { EChartsOption } from 'echarts';
 
-</script>
+type DataItem = {
+  label: string;
+  value: number;
+};
 
-<style lang="scss" scoped>
+const data = [
+  { label: '已整改', value: 320 },
+  { label: '未整改', value: 320 },
+];
+const getPieOptions = (data: DataItem[]): EChartsOption => {
+  return {
+    series: [
+      {
+        type: 'pie',
+        radius: ['56%', '70%'],
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: false,
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: data[0].value, name: data[0].label, itemStyle: { color: '#3efafa' } },
+          { value: data[1].value, name: data[1].label, itemStyle: { color: '#e86525' } },
+        ],
+      },
+    ],
+  };
+};
+</script>
 
-</style>
+<style lang="less" scoped>
+.point {
+  width: 8px;
+  height: 8px;
+  background: #3efafa;
+  border-radius: 50%;
+  margin-right: 10px;
+  display: inline-block;
+}
+:deep(*) {
+  .el-descriptions__body {
+    background-color: transparent;
+  }
+  .el-descriptions__label {
+    color: #fff;
+  }
+  .el-descriptions__content {
+    color: #ccc;
+  }
+}
+</style>