新增模块

src/App.vue

@@ -1,17 +1,29 @@
 <template>
     <div class="main">
-        <CardTwoCount/>
+        <div class="main-title"></div>
+        <div class="main-body">
+            <ModuleLeft1 class="left1"/>
+            <ModuleLeft2 class="left2"/>
+            <ModuleLeft3 class="left3"/>
+            
+            <ModuleRight1 class="right1"/>
+            <ModuleRight2 class="right2"/>
+            <ModuleRight3 class="right3"/>
+
+            <ModuleBottom class="bottom"/>
+            
+            <!-- <CardTwoCount/>
             <PersonCount2 :bg-type="2"/>
             <PersonCount2/>
             <PersonCount1/>
-        <PersonPercent/>
             <CardCount2/>
             <CardCount1 bg="assets/imgs/card/bg2.png"/>
             <Process/>
             <CircleWave/>
             <Bar id="bar" w="300" h="250" :x-data="barChart.xData" :data="barChart.data" />
             <BarSpike id="barSpike" w="300" h="250" :x-data="barChart.xData" :data="barChart.data" />
-        <PolarHalf id="polarHalf" w="600" :data="polarHalfChart.data" :unit="polarHalfChart.unit" />
+            <PolarHalf id="polarHalf" w="600" :data="polarHalfChart.data" :unit="polarHalfChart.unit" /> -->
+        </div>
     </div>
 </template>
 
@@ -29,6 +41,16 @@ import PersonCount1 from './components/card/PersonCount1.vue';
 import PersonCount2 from './components/card/PersonCount2.vue';
 import CardTwoCount from './components/card/CardTwoCount.vue';
 
+import ModuleLeft1 from './module/ModuleLeft1.vue';
+import ModuleLeft2 from './module/ModuleLeft2.vue';
+import ModuleLeft3 from './module/ModuleLeft3.vue';
+
+import ModuleRight1 from './module/ModuleRight1.vue';
+import ModuleRight2 from './module/ModuleRight2.vue';
+import ModuleRight3 from './module/ModuleRight3.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]
@@ -61,4 +83,31 @@ const polarHalfChart = reactive({
     width 100%
     height 100%
     background-image url('assets/imgs/bg.png')
+    .main-body
+        display grid
+        grid-template-columns 400px 1fr 400px
+        grid-gap 5px
+        grid-auto-rows auto
+        .left1
+            grid-column 1
+            grid-row 1
+        .left2
+            grid-column 1
+            grid-row 2
+        .left3
+            grid-column 1
+            grid-row 3
+        .right1
+            grid-column 3
+            grid-row 1
+        .right2
+            grid-column 3
+            grid-row 2
+        .right3
+            grid-column 3
+            grid-row 3
+        .bottom
+            grid-column 2
+            grid-row 3
+
 </style>

src/components/process/Process.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
-        <div class="left" v-if="props.icon">
+        <div class="left">
-            <img :src="props.icon"/>
+            <img :src="iconSrc"/>
         </div>
         <div class="right">
             <div class="top">
@@ -10,7 +10,7 @@
             </div>
             <div class="bottom">
                 <div class="process">
-                    <div class="value" :style="{width: (props.process * 300) + 'px'}"></div>
+                    <div class="value" :style="{width: (props.process * 200) + 'px'}"></div>
                 </div>
             </div>
         </div>
@@ -21,9 +21,9 @@
 import { ref, defineProps } from 'vue';
 
 const props = defineProps({
-    icon: {
+    iconType: {
-        type: String,
+        type: Number,
-        default: ''
+        default: 1
     },
     color: {
         type: String,
@@ -43,11 +43,19 @@ const props = defineProps({
     },
     process: {
         type: Number,
-        default: 0.8
+        default: 0
     }
 });
 const color = ref(props.color)
 const bgColor = ref(props.bgColor)
+const iconSrc = ref('assets/imgs/icon/shbz1.png');
+if(props.iconType === 2) {
+    iconSrc.value = 'assets/imgs/icon/shbz2.png';
+} else if(props.iconType === 3) {
+    iconSrc.value = 'assets/imgs/icon/shbz3.png';
+} else if(props.iconType === 4) {
+    iconSrc.value = 'assets/imgs/icon/shbz4.png';
+}
 
 </script>
 
@@ -55,10 +63,11 @@ const bgColor = ref(props.bgColor)
 .container
     display flex
     .left
+        margin-top 5px
         margin-right 10px
         img
-            width 50px
+            width 30px
-            height 50px
+            height 30px
     .right
         display flex
         flex-direction column
@@ -66,19 +75,19 @@ const bgColor = ref(props.bgColor)
             display flex
             justify-content space-between
             align-items center
-            height 22px
+            height 18px
             margin 5px 0
             .title
-                font-size 16px
+                font-size 14px
             .sub-title
                 font-size 12px
                 color v-bind(color)
         .bottom
-            width 300px
+            width 200px
             .process
                 background-color v-bind(bgColor)
                 width 100%
-                height 10px
+                height 6px
                 position relative
                 .value
                     background linear-gradient(90deg, v-bind(color), #FFF)
@@ -87,7 +96,7 @@ const bgColor = ref(props.bgColor)
                     top 0
                     left 0
                     width 120px
-                    height: 10px
+                    height 6px
                     border-radius 0 5px 5px 0
             
 </style>

src/module/ModuleBottom.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="module">
+        <ModuleCard3 class="module-card3" title="宗教信仰统计">
+            <div class="module-container">
+                <div class="left">
+                    <CircleWave class="circle-container"/>
+                    <CircleWave class="circle-container"/>
+                    <CircleWave class="circle-container"/>
+                    <CircleWave class="circle-container"/>
+                </div>
+                <div class="right">
+                    <Process class="process"/>
+                    <Process class="process"/>
+                    <Process class="process"/>
+                    <Process class="process"/>
+                </div>
+            </div>
+        </ModuleCard3>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import ModuleCard3 from './card/ModuleCard3.vue';
+import Process from '../components/process/Process.vue';
+import CircleWave from '../components/circle/CircleWave.vue';
+
+</script>
+
+<style lang="stylus" scoped>
+.module
+    .module-card3
+        .module-container
+            display flex
+            background-image  url(assets/imgs/card/bg9.png)
+            .left
+                width 350px
+                height 200px
+                position relative
+                .circle-container
+                    transform scale(0.4)
+                    position absolute
+                    top 10px
+                    left 10px
+            .right
+                width 250px
+                height 200px
+                .process
+                    margin-top 6px
+</style>

src/module/ModuleLeft1.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="module">
+        <ModuleCard1 title="民族分布统计">
+            <BarSpike id="barSpike" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" />
+        </ModuleCard1>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import ModuleCard1 from './card/ModuleCard1.vue';
+import BarSpike from '../components/echarts/BarSpike.vue';
+
+
+const barChart = reactive({
+    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    data: [120, 200, 150, 80, 70, 110, 130]
+})
+
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/module/ModuleLeft2.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="module">
+        <ModuleCard1 title="信访管理类人员">
+            <PolarHalf id="polarHalf" w="440" :data="polarHalfChart.data" :unit="polarHalfChart.unit" />
+        </ModuleCard1>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import ModuleCard1 from './card/ModuleCard1.vue';
+import PolarHalf from '../components/echarts/PolarHalf.vue';
+
+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>
+
+</style>

src/module/ModuleLeft3.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="module">
+        <ModuleCard1 title="宗教信仰统计">
+        </ModuleCard1>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import ModuleCard1 from './card/ModuleCard1.vue';
+
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/module/ModuleRight1.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="module">
+        <ModuleCard2 title="年龄分布情况">
+        </ModuleCard2>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import ModuleCard2 from './card/ModuleCard2.vue';
+
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/module/ModuleRight2.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="module">
+        <ModuleCard2 title="特殊信息类人员">
+        </ModuleCard2>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import ModuleCard2 from './card/ModuleCard2.vue';
+
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/module/ModuleRight3.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="module">
+        <ModuleCard2 title="政治面貌统计">
+        </ModuleCard2>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import ModuleCard2 from './card/ModuleCard2.vue';
+
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/module/card/ModuleCard1.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="module-card">
+        <div class="module-card-title">
+            <span>{{ props.title }}</span>
+        </div>
+        <div class="module-card-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue'
+
+const props = defineProps({
+    w: {
+        type: Number,
+        default: 400
+    },
+    title: {
+        type: String,
+        default: '标题'
+    }
+})
+const width = ref(`${props.w}px`);
+const height = ref(`${props.w / 4 * 3}px`);
+const titleH = ref(`${props.w / 4}px`);
+const bodyT = ref(`${props.w / 6}px`)
+const bodyH = ref(`${props.w / 2}px`);
+</script>
+
+<style lang="stylus" scoped>
+.module-card
+    width v-bind(width)
+    height v-bind(height)
+    color #FFFFFF
+    position relative
+    .module-card-title
+        height v-bind(titleH)
+        background-image url(assets/imgs/module/title-left-bg.png)
+        background-size auto 100%
+        background-repeat no-repeat
+        background-position left
+        span
+            display block
+            padding 25px 0 0 60px
+            font-weight bold
+    .module-card-body
+        position absolute
+        width 100%
+        left 0
+        top v-bind(bodyT)
+        height v-bind(bodyH)
+</style>

src/module/card/ModuleCard2.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="module-card">
+        <div class="module-card-title">
+            <span>{{ props.title }}</span>
+        </div>
+        <div class="module-card-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue'
+
+const props = defineProps({
+    w: {
+        type: Number,
+        default: 400
+    },
+    title: {
+        type: String,
+        default: '标题'
+    }
+})
+const width = ref(`${props.w}px`);
+const height = ref(`${props.w / 4 * 3}px`);
+const titleH = ref(`${props.w / 4}px`);
+const bodyT = ref(`${props.w / 6}px`)
+const bodyH = ref(`${props.w / 2}px`);
+</script>
+
+<style lang="stylus" scoped>
+.module-card
+    width v-bind(width)
+    height v-bind(height)
+    color #FFFFFF
+    position relative
+    .module-card-title
+        height v-bind(titleH)
+        background-image url(assets/imgs/module/title-right-bg.png)
+        background-size auto 100%
+        background-repeat no-repeat
+        background-position right
+        text-align right
+        span
+            display block
+            padding 25px 60px 0 0
+            font-weight bold
+    .module-card-body
+        position absolute
+        width 100%
+        left 0
+        top v-bind(bodyT)
+        height v-bind(bodyH)
+</style>

src/module/card/ModuleCard3.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="module-card">
+        <div class="module-card-title">
+            <span>{{ props.title }}</span>
+        </div>
+        <div class="module-card-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue'
+
+const props = defineProps({
+    w: {
+        type: Number,
+        default: 600
+    },
+    title: {
+        type: String,
+        default: '标题'
+    }
+})
+const width = ref(`${props.w}px`);
+const height = ref(`${props.w / 2}px`);
+const titleH = ref(`${props.w / 6}px`);
+const bodyT = ref(`${props.w / 8}px`)
+const bodyH = ref(`${props.w / 3}px`);
+</script>
+
+<style lang="stylus" scoped>
+.module-card
+    width v-bind(width)
+    height v-bind(height)
+    color #FFFFFF
+    position relative
+    .module-card-title
+        height v-bind(titleH)
+        background-image url(assets/imgs/module/title-center-bg.png)
+        background-size auto 100%
+        background-repeat no-repeat
+        background-position center
+        text-align center
+        span
+            display block
+            padding 25px 0 0 0
+            font-weight bold
+    .module-card-body
+        position absolute
+        width 100%
+        left 0
+        top v-bind(bodyT)
+        height v-bind(bodyH)
+</style>

src/style.css

@@ -10,7 +10,8 @@
 }
 
 html, body {
-  height: 100%;
+  min-width: max-content;
+  height: max-content;
   margin: 0;
   padding: 0;
 }