From 523e69a7f649b513aa8d3788c79d52fc26c894d2 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期三, 21 八月 2024 11:55:33 +0800
Subject: [PATCH] fix: 增加组件功能
---
src/config/router/oneThree.ts | 10
/dev/null | 86 --------------
src/views/oneThree/comprehensive/index.vue | 130 +++++++++++++++++++++
src/views/components/the-box-card/index.vue | 122 ++++++++++++++++----
src/views/components/the-icon-card/index.vue | 6
5 files changed, 237 insertions(+), 117 deletions(-)
diff --git a/src/config/router/oneThree.ts b/src/config/router/oneThree.ts
index 4907f78..2c2580c 100644
--- a/src/config/router/oneThree.ts
+++ b/src/config/router/oneThree.ts
@@ -14,15 +14,15 @@
component: Layout,
children: [
{
- path: "/oneThree/comprehensiveQuery",
- name: "comprehensive-query",
+ path: "/oneThree/comprehensive",
+ name: "comprehensive",
meta: {
title: "缁煎悎鏌ヨ",
- sort: 16,
- keepAliveName: "comprehensiveQuery"
+ sort: 17
},
- component: () => import("@/views/oneThree/comprehensiveQuery/index.vue")
+ component: () => import("@/views/oneThree/comprehensive/index.vue")
},
+
{
path: "/oneThree/actualPopulation",
name: "actual-population",
diff --git a/src/views/components/the-box-card/index.vue b/src/views/components/the-box-card/index.vue
index 0e28087..d6fa661 100644
--- a/src/views/components/the-box-card/index.vue
+++ b/src/views/components/the-box-card/index.vue
@@ -4,34 +4,59 @@
<div class="card-title">
<div class="title-left">
<icon-home />
- <div style="margin-left: 10px">A灏忓尯</div>
+ <div style="margin-left: 10px">{{ title }}</div>
</div>
- <div class="card-more">璇︽儏 ></div>
+ <div class="card-more" @click="handleDetails">璇︽儏 ></div>
</div>
<div class="card-content">
- <div :span="8" class="card-box-col">
+ <div :span="8" class="card-box-col" @click="handleClick">
<div class="card-box-title">
- <div>瀹炵敤浜哄彛</div>
+ <div>{{ unitTitle }}</div>
<div>></div>
</div>
- <div>2323 浜�</div>
+ <div class="title-people">
+ {{ unitNum }} <span>{{ unit }}</span>
+ </div>
</div>
- <div :span="8" class="card-box-col">
+ <div :span="8" class="card-box-col" @click="handleClick">
<div class="card-box-title">
- <div>瀹炵敤浜哄彛</div>
+ <div>{{ unitTitle }}</div>
<div>></div>
</div>
- <div>2323 浜�</div>
+ <div class="title-people">
+ {{ unitNum }} <span>{{ unit }}</span>
+ </div>
</div>
- <div :span="8" class="card-box-col">
+ <div :span="8" class="card-box-col" @click="handleClick">
<div class="card-box-title">
- <div>瀹炵敤浜哄彛</div>
+ <div>{{ unitTitle }}</div>
<div>></div>
</div>
- <div>2323 浜�</div>
+ <div class="title-people">
+ {{ unitNum }} <span>{{ unit }}</span>
+ </div>
</div>
</div>
- <div class="card-content"></div>
+ <div class="card-content-footer">
+ <div class="card-footer-box">
+ <div><span>瀹炲悕</span> | <span>鏈疄鍚�</span>锛�</div>
+ <div>
+ <span>{{ name }}</span> | <span>{{ notName }}</span>
+ </div>
+ </div>
+ <div class="card-footer-box">
+ <div><span>鍑虹</span> | <span>绌虹疆</span> | <span>鑷綇</span>锛�</div>
+ <div>
+ <span>{{ hire }}</span> | <span>{{ vacant }}</span> | <span>{{ selfOccupation }}</span>
+ </div>
+ </div>
+ <div class="card-footer-box">
+ <div><span>鍦ㄤ笟</span> | <span>鍏抽棴</span>锛�</div>
+ <div>
+ <span>{{ service }}</span> | <span>{{ closes }}</span>
+ </div>
+ </div>
+ </div>
</a-card>
</div>
</template>
@@ -44,16 +69,45 @@
defineProps<{
icon?: string;
title?: string;
+ unitTitle?: string;
+ unitNum?: number;
unit?: string;
- metering?: number;
+ name?: number;
+ notName?: number;
+ hire?: number;
+ vacant?: number;
+ selfOccupation?: number;
+ service?: number;
+ closes?: number;
}>(),
{
- icon: "",
- title: "",
- unit: "",
- metering: 0
+ icon: "", //鍥炬爣
+ title: "", //鏍囬
+ unitTitle: "", //鍗曚綅鏍囬
+ unitNum: 0, //鍗曚綅鏁伴噺
+ unit: "", //鍗曚綅
+ name: 0, //瀹炲悕
+ notName: 0, //鏈疄鍚�
+ hire: 0, //鍑虹
+ vacant: 0, //绌虹疆
+ selfOccupation: 0, //鑷綇
+ service: 0, //鍦ㄤ笟
+ closes: 0 //鍏抽棴
}
);
+const data = reactive({
+ icon: "",
+ title: "",
+ unitTitle: "",
+ unit: "",
+ name: "",
+ notName: "",
+ hire: 0,
+ vacant: 0,
+ selfOccupation: 0,
+ service: 0,
+ closes: 0
+});
// const dateType = ref("hour");
// const emits = defineEmits<{
@@ -63,6 +117,16 @@
// function initChart(v: any) {
// emits("init", v);
// }
+const emits = defineEmits<{
+ (e: "handleDetails", data: object): void;
+ (e: "handleClick", data: object): void;
+}>();
+const handleDetails = (item: any) => {
+ emits("handleDetails", item);
+};
+const handleClick = (item: any) => {
+ emits("handleClick", item);
+};
</script>
<style lang="scss" scoped>
.box-card-dark {
@@ -105,14 +169,28 @@
height: 70px;
border-radius: 5px;
padding: 10px;
- line-height: 24px;
+ line-height: 26px;
.card-box-title {
display: flex;
justify-content: space-between;
align-items: center;
- color: var(--color-text-3);
+ color: var(--color-text-1);
font-size: 14px;
}
+ .title-people {
+ color: #ffbd43;
+ font-size: 14px;
+ }
+ }
+ }
+ .card-content-footer {
+ margin-top: 10px;
+ line-height: 24px;
+ .card-footer-box {
+ display: flex;
+ align-items: center;
+ color: var(--color-text-1);
+ font-size: 14px;
}
}
@@ -124,12 +202,6 @@
// display: flex;
// align-items: center;
// justify-content: center;
- }
- .card-content {
- // margin-left: 20px;
- // line-height: 22px;
- // color: var(--color-text-1);
- // font-size: 12px;
}
}
</style>
diff --git a/src/views/components/the-icon-card/index.vue b/src/views/components/the-icon-card/index.vue
index a541fa1..d6811c4 100644
--- a/src/views/components/the-icon-card/index.vue
+++ b/src/views/components/the-icon-card/index.vue
@@ -8,7 +8,7 @@
<div class="card-content">
<p>{{ title }}</p>
<p>
- <span>{{ metering }}</span>
+ <span class="metering" :style="{ color: colorBg }">{{ metering }}</span>
<span>{{ unit }}</span>
</p>
</div>
@@ -86,6 +86,10 @@
line-height: 22px;
color: var(--color-text-1);
font-size: 12px;
+ .metering {
+ font-size: 14px;
+ margin-right: 4px;
+ }
}
}
</style>
diff --git a/src/views/oneThree/comprehensive/index.vue b/src/views/oneThree/comprehensive/index.vue
new file mode 100644
index 0000000..f8c8eb8
--- /dev/null
+++ b/src/views/oneThree/comprehensive/index.vue
@@ -0,0 +1,130 @@
+<template>
+ <div class="comprehensive">
+ <div class="top-title">
+ <the-icon-card
+ v-for="(item, index) in dataList"
+ :key="index"
+ :title="item.title"
+ :icon="item.icon"
+ :unit="item.unit"
+ :metering="item.metering"
+ :colorBg="item.colorBg"
+ ></the-icon-card>
+ </div>
+ <div></div>
+ <div>
+ <the-box-card
+ v-for="(item, index) in list"
+ :key="item.id"
+ :icon="item.icon"
+ :title="item.title"
+ :unitTitle="item.unitTitle"
+ :unitNum="item.unitNum"
+ :unit="item.unit"
+ :id="item.id"
+ :name="item.name"
+ :notName="item.notName"
+ :hire="item.hire"
+ :vacant="item.vacant"
+ :selfOccupation="item.selfOccupation"
+ :service="item.service"
+ :closes="item.closes"
+ @handleClick="handleClick(item)"
+ @handleDetails="handleDetails(item)"
+ ></the-box-card>
+ </div>
+ <div>
+ <a-pagination :total="50" show-total show-jumper show-page-size />
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup name="comprehensive">
+import { useTheme } from "@/hooks/useTheme";
+import { Svg } from "@easyfe/admin-component";
+
+const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
+const dataList = reactive([
+ {
+ title: "瀹炴湁鎴垮眿",
+ icon: "icon-house",
+ unit: "鏍�",
+ metering: 110,
+ colorBg: "#2e85ff"
+ },
+ {
+ title: "鑷富",
+ icon: "icon-people",
+ unit: "鏍�",
+ metering: 10,
+ colorBg: "#30C1A9"
+ },
+ {
+ title: "鍑虹",
+ icon: "icon-house",
+ unit: "鏍�",
+ metering: 220,
+ colorBg: "#E36B4D"
+ },
+ {
+ title: "瀹炴湁浜哄彛",
+ icon: "icon-people",
+ unit: "浜�",
+ metering: 420,
+ colorBg: "#2E85FF"
+ },
+ {
+ title: "娴佸姩浜哄憳",
+ icon: "icon-people",
+ unit: "浜�",
+ metering: 220,
+ colorBg: "#30C1A9"
+ },
+ {
+ title: "瀹炴湁鍗曚綅",
+ icon: "menu-house",
+ unit: "涓�",
+ metering: 220,
+ colorBg: "#FF4343"
+ },
+ {
+ title: "鍐嶄笟",
+ icon: "menu-house",
+ unit: "涓�",
+ metering: 220,
+ colorBg: "#9747FF"
+ }
+]);
+const list = reactive([
+ {
+ icon: "",
+ title: "A灏忓尯",
+ unitTitle: "瀹炴湁灏忓尯",
+ unitNum: 32,
+ unit: "鏍�",
+ id: 1,
+ metering: 0,
+ name: 23,
+ notName: 54,
+ hire: 2,
+ vacant: 43,
+ selfOccupation: 45,
+ service: 23,
+ closes: 54
+ }
+]);
+const handleClick = (item: any) => {
+ console.log(item, 888);
+};
+const handleDetails = (item: any) => {
+ console.log(item, 666);
+};
+</script>
+
+<style lang="scss" scoped>
+.comprehensive {
+ .top-title {
+ display: flex;
+ }
+}
+</style>
diff --git a/src/views/oneThree/comprehensiveQuery/index.vue b/src/views/oneThree/comprehensiveQuery/index.vue
deleted file mode 100644
index cbbf7fb..0000000
--- a/src/views/oneThree/comprehensiveQuery/index.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
- <!-- 缁煎悎鏌ヨ -->
- <div class="comprehensiveQuery">
- <div class="top-title">
- <the-icon-card
- v-for="(item, index) in dataList"
- :key="index"
- :title="item.title"
- :icon="item.icon"
- :unit="item.unit"
- :metering="item.metering"
- :colorBg="item.colorBg"
- ></the-icon-card>
- </div>
- <div></div>
- <div>
- <the-box-card></the-box-card>
- </div>
- </div>
-</template>
-
-<script lang="ts" setup name="TheIconCard">
-import { useTheme } from "@/hooks/useTheme";
-import { Svg } from "@easyfe/admin-component";
-
-const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
-const dataList = reactive([
- {
- title: "瀹炴湁鎴垮眿",
- icon: "icon-house",
- unit: "鏍�",
- metering: 110,
- colorBg: "#2e85ff"
- },
- {
- title: "鑷富",
- icon: "icon-people",
- unit: "鏍�",
- metering: 10,
- colorBg: "#30C1A9"
- },
- {
- title: "鍑虹",
- icon: "icon-house",
- unit: "鏍�",
- metering: 220,
- colorBg: "#E36B4D"
- },
- {
- title: "瀹炴湁浜哄彛",
- icon: "icon-people",
- unit: "浜�",
- metering: 420,
- colorBg: "#2E85FF"
- },
- {
- title: "娴佸姩浜哄憳",
- icon: "icon-people",
- unit: "浜�",
- metering: 220,
- colorBg: "#30C1A9"
- },
- {
- title: "瀹炴湁鍗曚綅",
- icon: "menu-house",
- unit: "涓�",
- metering: 220,
- colorBg: "#FF4343"
- },
- {
- title: "鍐嶄笟",
- icon: "menu-house",
- unit: "涓�",
- metering: 220,
- colorBg: "#9747FF"
- }
-]);
-</script>
-
-<style lang="scss" scoped>
-.comprehensiveQuery {
- .top-title {
- display: flex;
- }
-}
-</style>
--
Gitblit v1.8.0