feat: 添加质量管理页面

components.d.ts

@@ -10,8 +10,10 @@ declare module 'vue' {
   export interface GlobalComponents {
     CardTitle: typeof import('./src/components/CardTitle.vue')['default']
     Chart: typeof import('./src/components/Chart/index.vue')['default']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Panel: typeof import('./src/components/Panel.vue')['default']

src/App.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="page-container" :style="styles">
-    <router-view />
+    <el-config-provider :locale="zhCn">
+       <router-view />
+    </el-config-provider>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue';
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 // 设计稿尺寸
 const baseWidth = 1920;
 const baseHeight = 1080;

src/assets/images/circle-dashboard.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="119px" height="119px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -98 -231 )">
+    <path d="M 157.5 232.5  C 189.98 232.5  215.5 258.02  215.5 290.5  C 215.5 322.98  189.98 348.5  157.5 348.5  C 125.02 348.5  99.5 322.98  99.5 290.5  C 99.5 258.02  125.02 232.5  157.5 232.5  Z " fill-rule="nonzero" fill="#1d395e" stroke="none" fill-opacity="0" />
+    <path d="M 157.5 232  C 190.26 232  216 257.74  216 290.5  C 216 323.26  190.26 349  157.5 349  C 124.74 349  99 323.26  99 290.5  C 99 257.74  124.74 232  157.5 232  Z " stroke-width="2" stroke-dasharray="18,8" stroke="#73ebe9" fill="none" stroke-opacity="0.6" />
+  </g>
+</svg>

src/views/home/index.vue

@@ -71,7 +71,7 @@
         </div>
       </div>
 
-      <CardTitle>安全管理</CardTitle>
+      <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">
@@ -114,7 +114,7 @@
     </Panel>
 
     <!-- 中间区域 -->
-    <div class="h-full box-border p-10px middle-content flex-1 flex flex-col gap-10px">
+    <div class="h-full box-border px-10px middle-content flex-1 flex flex-col gap-10px">
       <CardTitle>全景概况</CardTitle>
       <iframe
         src="https://www.720yun.com/t/adejerhnzy3?scene_id=15644029"

src/views/quality/index.vue

@@ -1,13 +1,236 @@
 <template>
-  <div>
-    质量
+  <div class="w-full h-full relative flex justify-between items-center">
+    <!-- 左侧面板 -->
+    <Panel>
+      <CardTitle>质量问题状态</CardTitle>
+      <div class="flex h-260px">
+        <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"
+          >
+            <img class="w-110px h-110px" src="@/assets/images/circle-dashboard.svg" alt="" />
+            <div class="text-28px font-bold text-#31e4cf absolute italic">920</div>
+          </div>
+        </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 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 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>
+
+      <CardTitle>质量问题类型</CardTitle>
+      <div class="flex gap-8px my-10px">
+        <div class="w-120px h-200px bg-#348bc74c flex flex-col">
+          <div class="text-center leading-30px border-b-1 border-b-solid border-b-#999">总计</div>
+          <div class="flex-1 flex flex-col items-center justify-center gap-12px">
+            <img src="@/assets/images/quality.svg" alt="" />
+            <div class="text-28px font-bold text-#31e4cf italic">920</div>
+          </div>
+        </div>
+        <div class="flex-1">
+          <el-table stripe>
+            <el-table-column align="center" label="数量"></el-table-column>
+            <el-table-column align="center" label="名称"></el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <CardTitle>问题预期单位排名</CardTitle>
+      <ul class="quality-sort h-310px overflow-auto list-none p-10px m-0 flex flex-col gap-y-4px">
+        <li
+          v-for="item in 10"
+          class="w-full h-30px bg-#348bc730 flex justify-between pr-12px leading-30px"
+        >
+          <span class="no inline-block w-30px h-30px text-center bg-#348bc730 mr-10px">1</span>
+          <span class="name flex-1">施工单位名称</span>
+          <span class="value text-#77bef9">300</span>
+        </li>
+      </ul>
+    </Panel>
+
+    <!-- 中间区域 -->
+    <div class="h-full box-border px-10px middle-content flex-1 flex flex-col justify-end">
+      <div class="w-940px h-300px">
+        <Panel style="width: 100%; overflow: hidden;">
+          <CardTitle>现场问题图片</CardTitle>
+          <el-scrollbar>
+            <div class="img-list h-240px w-full flex items-center gap-12px overflow-auto">
+            <img class="h-200px" v-for="item in 5" src="https://picsum.photos/400/300" alt=""></img>
+          </div>
+          </el-scrollbar>
+          
+        </Panel>
+      </div>
+    </div>
+
+    <!-- 右侧面板 -->
+    <Panel>
+      <CardTitle>质量问题通报</CardTitle>
+      <el-table height="400" stripe>
+        <el-table-column align="center" label="问题描述"></el-table-column>
+        <el-table-column align="center" label="发起时间"></el-table-column>
+        <el-table-column align="center" label="责任单位"></el-table-column>
+      </el-table>
+
+      <CardTitle>分包问题数量统计</CardTitle>
+      <ul class="quality-statistics h-420px overflow-auto list-none p-10px m-0 flex flex-col gap-y-8px">
+        <li
+          v-for="item in 20"
+          class="w-full h-50px"
+        >
+          <div class="flex items-center justify-between mb-4px">
+            <span class="no">NO.1 责任单位1</span>
+            <span class="value">500</span>
+          </div>
+          <div class="w-full h-15px bg-#e8e8e847 relative">
+            <div class="h-15px bg-#73ebe9" :style="{width: `${50}%`}"></div>
+          </div>
+        </li>
+      </ul>
+    </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;
+}
+.quality-sort {
+  // 第一个li
+  li:nth-child(1) {
+    background: #c7343426;
+    .no {
+      color: #f66a6a;
+      background: #c7343426;
+    }
+    .value {
+      color: #f66a6a;
+    }
+  }
+  // 第二个li
+  li:nth-child(2) {
+    background: #c7653433;
+    .no {
+      color: #f8ca35;
+      background: #c7653433;
+    }
+    .value {
+      color: #f8ca35;
+    }
+  }
+  // 第三个li
+  li:nth-child(3) {
+    .no {
+      color: #18ff98;
+    }
+    .value {
+      color: #18ff98;
+    }
+  }
+}
+.quality-statistics {
+  // 第一个li
+  li:nth-child(1) {
+    .no {
+      color: #f66a6a;
+    }
+    .value {
+      color: #f66a6a;
+    }
+  }
+  // 第二个li
+  li:nth-child(2) {
+    .no {
+      color: #f8ca35;
+    }
+    .value {
+      color: #f8ca35;
+    }
+  }
+  // 第三个li
+  li:nth-child(3) {
+    .no {
+      color: #18ff98;
+    }
+    .value {
+      color: #18ff98;
+    }
+  }
+}
+</style>