完善页面模块

src/App.vue

@@ -10,6 +10,7 @@
             <ModuleRight2 class="right2"/>
             <ModuleRight3 class="right3"/>
 
+            <ModuleCenter class="center"/>
             <ModuleBottom class="bottom"/>
             
             <!-- <CardTwoCount/>
@@ -30,7 +31,6 @@
 <script setup>
 import { reactive } from 'vue';
 import Bar from './components/echarts/Bar.vue';
-import BarSpike from './components/echarts/BarSpike.vue';
 import PolarHalf from './components/echarts/PolarHalf.vue';
 import CircleWave from './components/circle/CircleWave.vue';
 import Process from './components/process/Process.vue';
@@ -49,33 +49,9 @@ import ModuleRight1 from './module/ModuleRight1.vue';
 import ModuleRight2 from './module/ModuleRight2.vue';
 import ModuleRight3 from './module/ModuleRight3.vue';
 
+import ModuleCenter from './module/ModuleCenter.vue';
 import ModuleBottom from './module/ModuleBottom.vue';
 
-const barChart = reactive({
-    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    data: [120, 200, 150, 80, 70, 110, 130]
-})
-
-const polarHalfChart = reactive({
-    unit: '人',
-    data: [{
-        name: '矛盾纠纷类',
-        value: 40
-    }, {
-        name: '涉邪人员',
-        value: 10
-    }, {
-        name: '吸毒人员',
-        value: 20
-    }, {
-        name: '社会治安',
-        value: 10
-    }, {
-        name: '重点上访',
-        value: 900
-    }]
-})
-
 </script>
 
 <style lang="stylus" scoped>
@@ -83,6 +59,8 @@ const polarHalfChart = reactive({
     width 100%
     height 100%
     background-image url('assets/imgs/bg.png')
+    background-size 100% 120%
+    background-position center
     .main-body
         display grid
         grid-template-columns 400px 1fr 400px
@@ -106,8 +84,16 @@ const polarHalfChart = reactive({
         .right3
             grid-column 3
             grid-row 3
+        .center
+            grid-column 2
+            grid-row 1 / 3
+            justify-self center
+            align-self center
         .bottom
             grid-column 2
             grid-row 3
+            justify-self center
+            align-self center
+            
 
 </style>

src/components/card/CardCount1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container" :style="{backgroundImage: `url(${props.bg})`}">
+    <div class="container" :style="{backgroundImage: `url(${bg})`}">
         <div class="top">{{ props.title }}</div>
         <div class="bottom">
             <div class="left">{{ props.value }}</div>
@@ -12,9 +12,9 @@
 import {ref, defineProps} from 'vue';
 
 const props = defineProps({
-    bg: {
+    type: {
-        type: String,
+        type: Number,
-        required: true
+        default: 1
     },
     title: {
         type: String,
@@ -30,6 +30,14 @@ const props = defineProps({
     }
 });
 
+const bg = ref('assets/imgs/card/bg1.png');
+if(props.type === 2) {
+    bg.value = 'assets/imgs/card/bg2.png';
+} else if(props.type === 3) {
+    bg.value = 'assets/imgs/card/bg3.png';
+} else if(props.type === 4) {
+    bg.value = 'assets/imgs/card/bg4.png';
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -37,7 +45,7 @@ const props = defineProps({
     display flex
     flex-direction column
     justify-content space-between
-    width 200px
+    width 150px
     height 55px
     padding 5px 30px
     background-repeat no-repeat

src/components/card/PersonCount1.vue

@@ -19,8 +19,7 @@ const props = defineProps({
 <style lang="stylus" scoped>
 .container
     width 140px
-    height 70px
+    height 80px
-    background-color rgba(0, 0, 0, 0.3)
     background-image url(assets/imgs/card/bg5.png)
     background-repeat no-repeat
     background-size 100% 40%

src/components/card/PersonCount2.vue

@@ -23,8 +23,6 @@ const props = defineProps({
     }
 })
 
-console.log(props.bg);
-
 const bg = ref('assets/imgs/card/bg6.png');
 if(props.bgType === 2) {
     bg.value = 'assets/imgs/card/bg7.png';
@@ -34,13 +32,13 @@ if(props.bgType === 2) {
 <style lang="stylus" scoped>
 .container
     width 120px
-    height 80px
+    height 120px
     background-size 140% 100%
-    background-position center
+    background-position center -20px
     text-align center
     color #FFF
     .value
-        font-size 20px
+        font-size 22px
         font-weight bold
     .title
         font-size 12px

src/components/card/PersonPercent.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <img class="icon" src="assets/imgs/icon/man.png">
+        <img class="icon" :src="iconSrc">
         <div class="value">{{ props.value }}%</div>
     </div>    
 </template>
@@ -19,8 +19,10 @@ const props = defineProps({
     }
 });
 const color = ref('#00bab4');
+const iconSrc = ref('assets/imgs/icon/man.png');
 if(props.type != 'man') {
     color.value = '#ff5329';
+    iconSrc.value = 'assets/imgs/icon/woman.png';
 }
 </script>
 

src/components/echarts/PolarHalf.vue

@@ -167,7 +167,6 @@ onMounted(() => {
             left 155px
             width 350px
             height 250px
-            background-color blue
             padding 0 20px
             box-sizing border-box
             display flex

src/module/ModuleCenter.vue

@@ -0,0 +1,43 @@
+1<template>
+    <div class="module-center">
+        <CardCount1 id="xtlCount" :type="1" title="稀土路街道" unit="人"/>
+        <CardCount1 id="mxlCount" :type="3" title="民馨路街道" unit="人"/>
+        <CardCount1 id="wsqCount" :type="4" title="万水泉镇" unit="人"/>
+        <CardCount1 id="totalCount" :type="2" title="总人口数" unit="人"/>
+        <PersonPercent id="manPercent" class="item"/>
+        <PersonPercent id="womenPercent" class="item" type="women"/>
+        <CardTwoCount id="cardTwoCount" class="item"/>
+    </div>
+</template>
+
+<script setup>
+import PersonPercent from '../components/card/PersonPercent.vue';
+import CardCount1 from '../components/card/CardCount1.vue';
+import CardTwoCount from '../components/card/CardTwoCount.vue';
+</script>
+
+<style lang="stylus" scoped>
+.module-center
+    width 800px
+    height 600px
+    border 1px solid #ccc
+    background-image url(assets/imgs/center-map-bg.png)
+    background-size 100% 400px
+    background-repeat no-repeat
+    position relative
+    .item
+        position absolute
+        top 0
+        left 0
+    #manPercent
+        top 400px
+        left 210px
+    #womenPercent
+        top 420px
+        left 240px
+        transform scale(0.6)
+    #cardTwoCount
+        top 400px
+        left 320px
+        transform scale(0.8)
+</style>

src/module/ModuleRight1.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard2 title="年龄分布情况">
+            <Bar id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" />
         </ModuleCard2>
     </div>
 </template>
@@ -8,6 +9,12 @@
 <script setup>
 import { reactive } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
+import Bar from '../components/echarts/Bar.vue';
+
+const barChart = reactive({
+    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    data: [120, 200, 150, 80, 70, 110, 130]
+})
 
 </script>
 

src/module/ModuleRight2.vue

@@ -1,6 +1,15 @@
 <template>
     <div class="module">
         <ModuleCard2 title="特殊信息类人员">
+            <div class="module-card2-container">
+                <div class="person-count1-container">
+                    <PersonCount1/>
+                </div>
+                <div class="person-count2-container">
+                    <PersonCount2 class="count1"/>
+                    <PersonCount2 class="count2" :bg-type="2"/>
+                </div>
+            </div>
         </ModuleCard2>
     </div>
 </template>
@@ -8,9 +17,31 @@
 <script setup>
 import { reactive } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
+import PersonCount1 from '../components/card/PersonCount1.vue';
+import PersonCount2 from '../components/card/PersonCount2.vue';
 
 </script>
 
 <style lang="stylus" scoped>
-
+.module
+   .module-card2-container
+        display flex
+        height 100%
+        align-items center
+        .person-count1-container
+            width 160px
+            display flex
+            justify-content: center
+        .person-count2-container
+            width 200px
+            height 60px
+            position relative
+            .count1
+                position absolute
+                top 0
+                left 0
+            .count2
+                position absolute
+                top 0
+                left 110px
 </style>