From 20413a8cce9b855f8ff5fafaef5429ddc765a339 Mon Sep 17 00:00:00 2001
From: TS-QD1 <tskj_pc1@163.com>
Date: Mon, 20 Nov 2023 17:56:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/imgs/card/bg9.png               | Bin 0 -> 251 bytes
 .../imgs/{shbz/cjr.png => icon/shbz1.png}     | Bin
 .../imgs/{shbz/lnr.png => icon/shbz2.png}     | Bin
 .../imgs/{shbz/shjz.png => icon/shbz3.png}    | Bin
 .../imgs/{shbz/ty.png => icon/shbz4.png}      | Bin
 public/assets/imgs/module/title-center-bg.png | Bin 0 -> 6601 bytes
 public/assets/imgs/module/title-left-bg.png   | Bin 0 -> 6297 bytes
 public/assets/imgs/module/title-right-bg.png  | Bin 0 -> 6540 bytes
 src/App.vue                                   |  73 +++++++++++++++---
 src/components/process/Process.vue            |  37 +++++----
 src/module/ModuleBottom.vue                   |  50 ++++++++++++
 src/module/ModuleCenter.vue                   |   0
 src/module/ModuleLeft1.vue                    |  24 ++++++
 src/module/ModuleLeft2.vue                    |  37 +++++++++
 src/module/ModuleLeft3.vue                    |  16 ++++
 src/module/ModuleRight1.vue                   |  16 ++++
 src/module/ModuleRight2.vue                   |  16 ++++
 src/module/ModuleRight3.vue                   |  16 ++++
 src/module/card/ModuleCard1.vue               |  54 +++++++++++++
 src/module/card/ModuleCard2.vue               |  55 +++++++++++++
 src/module/card/ModuleCard3.vue               |  55 +++++++++++++
 src/style.css                                 |   3 +-
 22 files changed, 425 insertions(+), 27 deletions(-)
 create mode 100644 public/assets/imgs/card/bg9.png
 rename public/assets/imgs/{shbz/cjr.png => icon/shbz1.png} (100%)
 rename public/assets/imgs/{shbz/lnr.png => icon/shbz2.png} (100%)
 rename public/assets/imgs/{shbz/shjz.png => icon/shbz3.png} (100%)
 rename public/assets/imgs/{shbz/ty.png => icon/shbz4.png} (100%)
 create mode 100644 public/assets/imgs/module/title-center-bg.png
 create mode 100644 public/assets/imgs/module/title-left-bg.png
 create mode 100644 public/assets/imgs/module/title-right-bg.png
 create mode 100644 src/module/ModuleBottom.vue
 create mode 100644 src/module/ModuleCenter.vue
 create mode 100644 src/module/ModuleLeft1.vue
 create mode 100644 src/module/ModuleLeft2.vue
 create mode 100644 src/module/ModuleLeft3.vue
 create mode 100644 src/module/ModuleRight1.vue
 create mode 100644 src/module/ModuleRight2.vue
 create mode 100644 src/module/ModuleRight3.vue
 create mode 100644 src/module/card/ModuleCard1.vue
 create mode 100644 src/module/card/ModuleCard2.vue
 create mode 100644 src/module/card/ModuleCard3.vue

diff --git a/public/assets/imgs/card/bg9.png b/public/assets/imgs/card/bg9.png
new file mode 100644
index 0000000000000000000000000000000000000000..28a41351889130661aff041a05a4918a26768555
GIT binary patch
literal 251
zcmeAS@N?(olHy`uVBq!ia0y~yU`hb8FK{pe$>|St_W>#90G|+7v5Y+zl>P_+xr`-2
ze!&K5_AgEWIh+L^k;M!Q+(IDCc<FB4AE4kwPZ!6KiaBo&GBN^rO$z_l=Xp2)Spx(<
atde?npMmk`y*uF`7kIk*xvX<aXaWEq=_LpN

literal 0
HcmV?d00001

diff --git a/public/assets/imgs/shbz/cjr.png b/public/assets/imgs/icon/shbz1.png
similarity index 100%
rename from public/assets/imgs/shbz/cjr.png
rename to public/assets/imgs/icon/shbz1.png
diff --git a/public/assets/imgs/shbz/lnr.png b/public/assets/imgs/icon/shbz2.png
similarity index 100%
rename from public/assets/imgs/shbz/lnr.png
rename to public/assets/imgs/icon/shbz2.png
diff --git a/public/assets/imgs/shbz/shjz.png b/public/assets/imgs/icon/shbz3.png
similarity index 100%
rename from public/assets/imgs/shbz/shjz.png
rename to public/assets/imgs/icon/shbz3.png
diff --git a/public/assets/imgs/shbz/ty.png b/public/assets/imgs/icon/shbz4.png
similarity index 100%
rename from public/assets/imgs/shbz/ty.png
rename to public/assets/imgs/icon/shbz4.png
diff --git a/public/assets/imgs/module/title-center-bg.png b/public/assets/imgs/module/title-center-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7caf27199574ad42a3f25f0e3bf9eec46d2ef96
GIT binary patch
literal 6601
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

literal 0
HcmV?d00001

diff --git a/public/assets/imgs/module/title-left-bg.png b/public/assets/imgs/module/title-left-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1c002813f413236c40aac5320901d3240690e21
GIT binary patch
literal 6297
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
DA_@ru

literal 0
HcmV?d00001

diff --git a/public/assets/imgs/module/title-right-bg.png b/public/assets/imgs/module/title-right-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc3f92a80c0092c53729d51e7452ba2668e7ee17
GIT binary patch
literal 6540
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
XSPh)`GH9qDsQ`$QrecM>W%&O9_}QGQ

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 6c27c89..cceb156 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,29 @@
 <template>
     <div class="main">
-        <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" />
+        <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/>
+            <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" /> -->
+        </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>
diff --git a/src/components/process/Process.vue b/src/components/process/Process.vue
index 28f7d83..a937bbb 100644
--- a/src/components/process/Process.vue
+++ b/src/components/process/Process.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
-        <div class="left" v-if="props.icon">
-            <img :src="props.icon"/>
+        <div class="left">
+            <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: {
-        type: String,
-        default: ''
+    iconType: {
+        type: Number,
+        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
-            height 50px
+            width 30px
+            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>
\ No newline at end of file
diff --git a/src/module/ModuleBottom.vue b/src/module/ModuleBottom.vue
new file mode 100644
index 0000000..df3ff2c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/ModuleCenter.vue b/src/module/ModuleCenter.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/module/ModuleLeft1.vue b/src/module/ModuleLeft1.vue
new file mode 100644
index 0000000..70f294e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/ModuleLeft2.vue b/src/module/ModuleLeft2.vue
new file mode 100644
index 0000000..9da45af
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/ModuleLeft3.vue b/src/module/ModuleLeft3.vue
new file mode 100644
index 0000000..e0369df
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/ModuleRight1.vue b/src/module/ModuleRight1.vue
new file mode 100644
index 0000000..01cb9a7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/ModuleRight2.vue b/src/module/ModuleRight2.vue
new file mode 100644
index 0000000..befe33b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/ModuleRight3.vue b/src/module/ModuleRight3.vue
new file mode 100644
index 0000000..044b27e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/card/ModuleCard1.vue b/src/module/card/ModuleCard1.vue
new file mode 100644
index 0000000..87ef1e3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/card/ModuleCard2.vue b/src/module/card/ModuleCard2.vue
new file mode 100644
index 0000000..d588d33
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/module/card/ModuleCard3.vue b/src/module/card/ModuleCard3.vue
new file mode 100644
index 0000000..b09454d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index ac82c7e..2340bb3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -10,7 +10,8 @@
 }
 
 html, body {
-  height: 100%;
+  min-width: max-content;
+  height: max-content;
   margin: 0;
   padding: 0;
 }