完善部分界面

src/views/system/Notification/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="h-full p-2 flex flex-col">
+    <Pageheader></Pageheader>
+    <div class="NotificationBody">
+      <ul class="lefttabs">
+        <div style="height: 50px"></div>
+        <li
+          :class="{
+            active: activeTabs === 1
+          }"
+          @click="handleClick(1)"
+        >
+          待办（{{ todonum }}）
+        </li>
+        <li
+          :class="{
+            active: activeTabs === 2
+          }"
+          @click="handleClick(2)"
+        >
+          通知（{{ noticnum }}）
+        </li>
+      </ul>
+      <div class="rightbody">
+        <div class="flex" v-if="activeTabs === 1">
+          <h3 class="title">代办（{{ todonum }}）</h3>
+          <el-button link type="primary">清除未读</el-button>
+        </div>
+        <div class="flex" v-else-if="activeTabs === 2">
+          <h3 class="title">通知（{{ noticnum }}）</h3>
+          <el-button link type="primary">清除未读</el-button>
+        </div>
+        <ul v-if="activeTabs === 1">
+          <li
+            v-for="(item, index) in arr"
+            :key="index"
+            @click="() => (item.disabled = !item.disabled)"
+            :class="{
+              disable: item.disabled
+            }"
+          >
+            <div class="subtitle">报修工单提醒</div>
+            <div class="info">您有一条新的报修工单需要处理，保修标题：下水道堵塞</div>
+          </li>
+        </ul>
+        <ul v-else-if="activeTabs === 2">
+          <li
+            v-for="(item, index) in noticelist"
+            :key="index"
+            @click="handleDisable(item)"
+            :class="{
+              disable: item.disabled
+            }"
+          >
+            <div class="subtitle">报修工单通知</div>
+            <div class="info">您有一条新的报修工单需要处理，保修标题：下水道堵塞</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activeTabs = ref(1);
+
+function handleClick(tab: number) {
+  activeTabs.value = tab;
+}
+
+const todonum = computed(() => {
+  return arr.value.filter((item) => item.disabled === false).length;
+});
+const noticnum = computed(() => {
+  return noticelist.value.filter((item) => item.disabled === false).length;
+});
+const arr = ref(
+  Array.from({ length: 10 }, (_, i) => {
+    return {
+      id: i,
+      title: '报修工单提醒',
+      content: '您有一条新的报修工单需要处理，保修标题：下水道堵塞',
+      disabled: false
+    };
+  })
+);
+
+const noticelist = ref(
+  Array.from({ length: 10 }, (_, i) => {
+    return {
+      id: i,
+      title: '报修工单提醒',
+      content: '您有一条新的报修工单需要处理，保修标题：下水道堵塞',
+      disabled: false
+    };
+  })
+);
+
+function handleDisable(row) {
+  row.disabled = true;
+}
+</script>
+
+<style scoped lang="scss">
+.NotificationBody {
+  margin-top: 20px;
+  background-color: #fff;
+  display: flex;
+  font-size: 0.8rem;
+  flex: 1;
+  .lefttabs {
+    width: 275px;
+    height: 100%;
+    border-right: 1px solid #ccc;
+    @media (max-width: 1500px) {
+      width: 150px;
+    }
+
+    li {
+      height: 50px;
+      line-height: 50px;
+      padding-left: 25px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      &:hover {
+        background-color: #e8f1ff;
+        color: #1a75ff;
+      }
+      &.active {
+        background-color: #e8f1ff;
+        color: #1a75ff;
+        position: relative;
+
+        &::after {
+          content: '';
+          display: block;
+          width: 5px;
+          height: 50px;
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          background-color: #1a75ff;
+        }
+      }
+    }
+  }
+  .rightbody {
+    flex: 1;
+    .title {
+      padding: 40px;
+      margin-right: 20px;
+    }
+    ul {
+      height: calc(100% - 250px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-right: 10px;
+      li {
+        padding: 20px 40px;
+        border-bottom: 1px solid #cccccc7a;
+        cursor: pointer;
+        .subtitle {
+          margin-bottom: 5px;
+        }
+
+        &.disable {
+          position: relative;
+          &::after {
+            content: '';
+            display: block;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            z-index: 10;
+            background: rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/system/statistics/Payment/index.vue

@@ -14,7 +14,7 @@
     </div>
 
     <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col :lg="14" :xl="14">
         <div class="cardbox">
           <div>收入来源</div>
           <div class="cardbody" style="height: 200px">
@@ -41,7 +41,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :lg="10" :xl="8">
         <div class="cardbox">
           <div>缴费方式</div>
           <div class="cardbody w-full" style="height: 150px">
@@ -52,12 +52,12 @@
     </el-row>
     <div class="" style="height: 20px"></div>
     <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col :lg="14" :xl="14">
         <div class="cardbox w-full" style="height: 400px">
           <Echarts :options="options3"></Echarts>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :lg="10" :xl="8">
         <div class="cardbox w-full" style="height: 400px">
           <div class="" style="height: 50px; margin-bottom: 20px">缴费方式</div>
           <div flex flex-items-center justify-center>

src/views/system/statistics/Personnel/index.vue

@@ -13,7 +13,7 @@
       <el-button>重置</el-button>
     </div>
     <el-row :gutter="20">
-      <el-col :span="8">
+      <el-col :lg="7" :xl="8">
         <div class="cardbox">
           <div>入住情况</div>
           <div class="cardbody" style="height: 200px">
@@ -27,7 +27,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :lg="9" :xl="8">
         <div class="cardbox">
           <div>住户分析情况</div>
           <div class="cardbody w-full" style="height: 150px">
@@ -35,7 +35,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :lg="8" :xl="8">
         <div class="cardbox">
           <div>男女比例</div>
           <div class="cardbody w-full" style="height: 150px">
@@ -44,21 +44,20 @@
         </div>
       </el-col>
     </el-row>
-    <div class="" style="height: 20px"></div>
+
-    <el-row :gutter="20">
+    <el-row style="margin-top: 20px" :gutter="20">
-      <el-col :span="16">
+      <el-col :lg="16" :xl="16">
         <div class="cardbox w-full" style="height: 400px">
           <Echarts :options="options3"></Echarts>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :lg="8" :xl="8">
         <div class="cardbox w-full" style="height: 400px">
           <Echarts :options="options4"></Echarts>
         </div>
       </el-col>
     </el-row>
-    <div class="" style="height: 20px"></div>
+    <el-row style="margin-top: 20px">
-    <el-row>
       <el-col :span="24">
         <div class="cardbox w-full" style="height: 450px">
           <Echarts :options="flowLineOption"></Echarts>
@@ -103,9 +102,9 @@ const options = shallowRef<EChartsOption>({
       label: {
         show: true,
         position: 'center',
-        fontSize: 20,
+        fontSize: 18,
         fontWeight: 'bold',
-        formatter: '  85% \n\n 入住率'
+        formatter: '  85% \n 入住率'
       },
       data: [{ value: 85 }, { value: 15, itemStyle: { color: 'transparent' } }]
     }
@@ -461,6 +460,7 @@ const flowLineOption = shallowRef<EChartsOption>({
       justify-content: space-between;
       .card_leftbox {
         text-align: center;
+        margin-right: 20px;
         .labelbox {
           font-size: 16px;
         }