From 40f2e0a67cb3b788262f156deb7187d9735b5196 Mon Sep 17 00:00:00 2001
From: zhangnuoyan <9354631+zhangnuoyan@user.noreply.gitee.com>
Date: 星期日, 25 八月 2024 14:25:38 +0800
Subject: [PATCH] feat: 增加一些组件
---
src/config/router/oneThree.ts | 8
src/views/oneThree/member/index.vue | 275 ++++++++++++++++++++++
/dev/null | 7
src/views/components/the-a-select/index.vue | 2
src/views/components/the-house-card/index.vue | 90 +++++++
src/views/oneThree/house/index.vue | 233 +++++++++++++++++++
src/views/oneThree/actualPopulation/index.vue | 48 ++--
7 files changed, 624 insertions(+), 39 deletions(-)
diff --git a/src/config/router/oneThree.ts b/src/config/router/oneThree.ts
index 2c2580c..2978573 100644
--- a/src/config/router/oneThree.ts
+++ b/src/config/router/oneThree.ts
@@ -42,13 +42,13 @@
component: () => import("@/views/oneThree/house/index.vue")
},
{
- path: "/oneThree/unit",
- name: "oneThree-unit",
+ path: "/oneThree/member",
+ name: "oneThree-member",
meta: {
- title: "瀹炴湁鍗曚綅",
+ title: "浜哄憳璇︽儏",
sort: 12
},
- component: () => import("@/views/oneThree/unit/index.vue")
+ component: () => import("@/views/oneThree/member/index.vue")
}
]
}
diff --git a/src/views/components/the-a-select/index.vue b/src/views/components/the-a-select/index.vue
index 6e6e423..1e96c46 100644
--- a/src/views/components/the-a-select/index.vue
+++ b/src/views/components/the-a-select/index.vue
@@ -1,7 +1,7 @@
<template>
<div>
<p>{{ title }}</p>
- <a-select :style="{ width: '160px' }" :placeholder="placeholder">
+ <a-select :style="{ width: '100px' }" :placeholder="placeholder">
<a-option v-for="(item, key) in data" :key="key">{{ item }}</a-option>
</a-select>
</div>
diff --git a/src/views/components/the-house-card/index.vue b/src/views/components/the-house-card/index.vue
new file mode 100644
index 0000000..5f57c60
--- /dev/null
+++ b/src/views/components/the-house-card/index.vue
@@ -0,0 +1,90 @@
+<template>
+ <a-card class="card-box card-bg-custom">
+ <div>
+ <span>{{ title }}</span>
+ <p :style="{ background: tag.color }">{{ tag.text }}</p>
+ </div>
+ <p>{{ content }}</p>
+ </a-card>
+</template>
+<script lang="ts" setup name="TheHouseCard">
+import { useTheme } from "@/hooks/useTheme";
+import { Svg } from "@easyfe/admin-component";
+
+const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
+const props = withDefaults(
+ defineProps<{
+ title?: string;
+ content?: string;
+ tag?: object;
+ }>(),
+ {
+ title: "", //鏍囬
+ content: "", //鍐呭
+ tag: () => {
+ return {};
+ }
+ }
+);
+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<{
+// (e: "init", value: echarts.ECharts): void;
+// }>();
+
+// 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>
+.arco-card {
+ cursor: pointer;
+}
+.arco-card-body {
+ > div {
+ width: 200px;
+ display: flex;
+ align-items: center;
+ span {
+ font-size: 20px;
+ font-weight: bold;
+ flex: 1;
+ }
+ p {
+ height: 28px;
+ width: 72px;
+ border-radius: 3px;
+ line-height: 28px;
+ text-align: center;
+ font-weight: bold;
+ }
+ }
+ > p {
+ margin-top: 10px;
+ font-size: 14px;
+ }
+}
+</style>
diff --git a/src/views/oneThree/actualPopulation/index.vue b/src/views/oneThree/actualPopulation/index.vue
index 1bc843d..2558c92 100644
--- a/src/views/oneThree/actualPopulation/index.vue
+++ b/src/views/oneThree/actualPopulation/index.vue
@@ -238,6 +238,30 @@
</script>
<style lang="scss" scoped>
+.menus .right {
+ background: var(--color-fill-2);
+ padding: 2px;
+ display: flex;
+ position: absolute;
+ right: 0;
+ margin-right: 0;
+ > div {
+ width: 34px;
+ height: 34px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ }
+}
+.main .menus {
+ padding: 0 !important;
+ margin-bottom: 20px;
+}
.comprehensive {
display: flex;
flex-direction: column;
@@ -253,36 +277,12 @@
> div {
margin-right: 20px;
}
- .right {
- background: var(--color-fill-2);
- padding: 2px;
- display: flex;
- position: absolute;
- right: 0;
- margin-right: 0;
- > div {
- width: 34px;
- height: 34px;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- &.active {
- background: #1057fd;
- color: #fff;
- }
- }
- }
}
.main {
padding: 8px 20px;
background: var(--color-bg-2);
margin-top: 8px;
flex: 1;
- .menus {
- padding: 0;
- margin-bottom: 20px;
- }
.cards {
overflow: hidden;
> div {
diff --git a/src/views/oneThree/house/index.vue b/src/views/oneThree/house/index.vue
index 47354f1..66d697e 100644
--- a/src/views/oneThree/house/index.vue
+++ b/src/views/oneThree/house/index.vue
@@ -1,7 +1,234 @@
<template>
- <div class="house">瀹炴湁鎴垮眿</div>
+ <div class="comprehensive">
+ <div class="menus">
+ <the-a-cascader :data="cascaderData" placeholder="璇烽�夋嫨" title="鍖哄煙"></the-a-cascader>
+ <div><the-a-search placeholder="璇疯緭鍏�" title="鎼滅储"></the-a-search></div>
+ <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
+ <div><a-time-picker type="time-range" style="width: 250px" /></div>
+ <div>
+ <a-button type="primary">
+ <template #icon>
+ <icon-search />
+ </template>
+ <template #default>鎼滅储</template>
+ </a-button>
+ </div>
+ <div>
+ <a-button>
+ <template #icon>
+ <icon-refresh />
+ </template>
+ <template #default>閲嶇疆</template>
+ </a-button>
+ </div>
+ </div>
+ <div class="main">
+ <div class="menus">
+ <div>
+ <the-a-select :data="['1鍙锋ゼ', '2鍙锋ゼ']" placeholder="璇烽�夋嫨" title="鎴垮眿鍦板潃"></the-a-select>
+ </div>
+ <div><the-a-select :data="['鏄�', '鍚�']" placeholder="璇烽�夋嫨" title="鎴垮眿鐘舵��"></the-a-select></div>
+ <div>
+ <the-a-select :data="['姝ｅ簭', '鍊掑簭']" placeholder="璇烽�夋嫨" title="鎺掑簭"></the-a-select>
+ </div>
+ <div class="right">
+ <div>
+ <icon-list size="20" />
+ </div>
+ <div class="active">
+ <icon-apps size="20" />
+ </div>
+ </div>
+ </div>
+ <div class="cards">
+ <the-house-card
+ v-for="(item, index) in list"
+ :key="index"
+ :tag="item.tag"
+ :content="item.content"
+ :title="item.title"
+ @handleClick="handleClick(item)"
+ @handleDetails="handleDetails(item)"
+ ></the-house-card>
+ </div>
+ <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
+ </div>
+ </div>
</template>
-<script lang="ts" setup name="house"></script>
+<script lang="ts" setup name="comprehensive">
+import { Svg } from "@easyfe/admin-component";
+const changeData = reactive([
+ {
+ name: "1澶�",
+ value: "1"
+ },
+ {
+ name: "2澶�",
+ value: "2"
+ },
+ {
+ name: "3澶�",
+ value: "3"
+ },
+ {
+ name: "鑷畾涔�",
+ value: "custom"
+ }
+]);
+const cascaderData = reactive([
+ {
+ value: "beijing",
+ label: "Beijing",
+ children: [
+ {
+ value: "chaoyang",
+ label: "ChaoYang",
+ children: [
+ {
+ value: "datunli",
+ label: "Datunli"
+ }
+ ]
+ },
+ {
+ value: "haidian",
+ label: "Haidian"
+ },
+ {
+ value: "dongcheng",
+ label: "Dongcheng"
+ },
+ {
+ value: "xicheng",
+ label: "Xicheng",
+ children: [
+ {
+ value: "jinrongjie",
+ label: "Jinrongjie"
+ },
+ {
+ value: "tianqiao",
+ label: "Tianqiao"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ value: "shanghai",
+ label: "Shanghai",
+ children: [
+ {
+ value: "huangpu",
+ label: "Huangpu"
+ }
+ ]
+ }
+]);
+const list = reactive(
+ new Array(8)
+ .fill({
+ title: "20-1",
+ content: "鎬�/鑰�/骞�: 3/2/1浜�",
+ tag: {
+ text: "鍑虹",
+ color: "rgba(227, 107, 77, 0.6)"
+ }
+ })
+ .concat(
+ new Array(3).fill({
+ title: "20-1",
+ content: "鎬�/鑰�/骞�: 3/2/1浜�",
+ tag: {
+ text: "鍑虹",
+ color: "rgba(50, 111, 255, 0.6)"
+ }
+ })
+ )
+ .concat(
+ new Array(5).fill({
+ title: "20-1",
+ content: "鎬�/鑰�/骞�: 3/2/1浜�",
+ tag: {
+ text: "鍑虹",
+ color: "rgba(48, 193, 169, 0.6)"
+ }
+ })
+ )
+);
-<style lang="scss" scoped></style>
+const handleClick = (item: any) => {
+ console.log(item, 888);
+};
+const handleDetails = (item: any) => {
+ console.log(item, 666);
+};
+</script>
+
+<style lang="scss" scoped>
+.menus .right {
+ background: var(--color-fill-2);
+ padding: 2px;
+ display: flex;
+ position: absolute;
+ right: 0;
+ margin-right: 0;
+ > div {
+ width: 34px;
+ height: 34px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ }
+}
+.main .menus {
+ padding: 0 !important;
+ margin-bottom: 20px;
+}
+.comprehensive {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 20px;
+ .menus {
+ position: relative;
+ background: var(--color-bg-2);
+ margin-top: 8px;
+ padding: 14px 20px;
+ display: flex;
+ > div {
+ margin-left: 20px;
+ }
+ }
+ .main {
+ padding: 8px 20px;
+ background: var(--color-bg-2);
+ margin-top: 8px;
+ flex: 1;
+ .cards {
+ overflow: hidden;
+ > div {
+ float: left;
+ margin: 0 20px 20px 0;
+ }
+ }
+ }
+ .top-title {
+ display: flex;
+ }
+ .card-box {
+ border-radius: 5px;
+ }
+ .card-box-right {
+ margin-top: 10px;
+ display: flex;
+ justify-content: space-between;
+ }
+}
+</style>
diff --git a/src/views/oneThree/member/index.vue b/src/views/oneThree/member/index.vue
new file mode 100644
index 0000000..0b0f8b3
--- /dev/null
+++ b/src/views/oneThree/member/index.vue
@@ -0,0 +1,275 @@
+<template>
+ <div class="wrap">
+ <div class="left">
+ <header>
+ <icon-file-image />
+ <p>浜哄憳鍥剧墖</p>
+ </header>
+ <div class="avatar">
+ <a-image
+ width="250"
+ height="250"
+ border-radius="14px"
+ :preview="false"
+ src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
+ />
+ </div>
+ <div class="detail">
+ <p>濮撳悕锛氬紶涓�</p>
+ <p>
+ <span>缂栧彿锛�1231241241231</span>
+ </p>
+ </div>
+ <div class="desc">
+ <p v-for="(item, key) in data.desc" :key="key">{{ item }}</p>
+ </div>
+ <div class="tags">
+ <div v-for="(item, key) in data.tags" :key="key">
+ <p>
+ <span>{{ item.title }}</span>
+ <span>>></span>
+ </p>
+ <div>
+ <p v-for="(tag, index) in item.contents" :key="index" :style="{ background: tag.color }">
+ {{ tag.text }}
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="icons">
+ <div><icon-cloud /></div>
+ <div><icon-command /></div>
+ <div><icon-cloud /></div>
+ <div><icon-command /></div>
+ <div><icon-cloud /></div>
+ <div><icon-command /></div>
+ </div>
+ </div>
+ <div class="right">
+ <the-a-tabs style="margin: 8px 0" :data="['鍩烘湰淇℃伅', '浜哄憳杞ㄨ抗', '鍑鸿淇℃伅', '璧勬簮淇℃伅']" :index="0" />
+ <section>
+ <div class="menus">
+ <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
+ <div><a-time-picker type="time-range" style="width: 250px" /></div>
+ <div>
+ <the-a-select :data="['姝ｅ簭', '鍊掑簭']" placeholder="璇烽�夋嫨" title="鎺掑簭"></the-a-select>
+ </div>
+ <div>
+ <the-a-select :data="['1鍙锋ゼ', '2鍙锋ゼ']" placeholder="璇烽�夋嫨" title="鍑虹幇鍦扮偣"></the-a-select>
+ </div>
+ <div>
+ <a-button type="primary">
+ <template #icon>
+ <icon-search />
+ </template>
+ <template #default>鎼滅储</template>
+ </a-button>
+ </div>
+ <div>
+ <a-button>
+ <template #icon>
+ <icon-refresh />
+ </template>
+ <template #default>閲嶇疆</template>
+ </a-button>
+ </div>
+ <div class="buttons">
+ <div>
+ <icon-list size="20" />
+ </div>
+ <div class="button active">
+ <icon-apps size="20" />
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup name="member">
+const changeData = reactive([
+ {
+ name: "1澶�",
+ value: "1"
+ },
+ {
+ name: "2澶�",
+ value: "2"
+ },
+ {
+ name: "鑷畾涔�",
+ value: "custom"
+ }
+]);
+const data = reactive({
+ desc: [
+ "鎵�灞炲皬鍖猴細鍖椾含",
+ "鎵�灞炴淳鍑烘墍锛氭潵骞胯惀娲惧嚭鎵�",
+ "棣栨鎶撴媿鏃堕棿锛�2023-12-12 12:23",
+ "棣栨鎶撴媿鍦扮偣锛氫簩鍙锋ゼ",
+ "鎶撴媿娆℃暟锛�23",
+ "鍑虹幇澶╂暟锛�12",
+ "鏈�鍚庡嚭鐜版椂闂达細2024-01-12 12:23",
+ "甯镐綇鍦板潃锛欰灏忓尯1鏍�2鍗曞厓201"
+ ],
+ tags: [
+ {
+ title: "浜哄憳鏍囩",
+ contents: [
+ {
+ text: "涓婅浜哄憳",
+ color: "#2B67FF"
+ },
+ {
+ text: "娑夋瘨",
+ color: "#FF4343"
+ }
+ ]
+ },
+ {
+ title: "閲嶇偣浜嬩欢",
+ contents: [
+ {
+ text: "闈炴硶鑱氶泦",
+ color: "#2B67FF"
+ },
+ {
+ text: "娑夋瘨",
+ color: "#FF4343"
+ }
+ ]
+ }
+ ]
+});
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+ margin: 20px;
+ display: flex;
+ .left {
+ width: 360px;
+ padding: 20px;
+ margin-right: 20px;
+ background: var(--color-bg-2);
+ > header {
+ display: flex;
+ p {
+ margin-left: 5px;
+ }
+ }
+ .avatar {
+ display: flex;
+ justify-content: center;
+ margin: 20px auto;
+ }
+ .detail {
+ padding-bottom: 6px;
+ border-bottom: 1px solid var(--color-bg-3);
+ > p {
+ text-align: center;
+ &:nth-child(1) {
+ font-size: 18px;
+ font-weight: bold;
+ margin-bottom: 12px;
+ }
+ span {
+ position: relative;
+ &:after {
+ left: 0;
+ width: 100%;
+ content: "";
+ position: absolute;
+ display: block;
+ height: 2px;
+ bottom: -6px;
+ background: var(--color-bg-5);
+ }
+ }
+ }
+ }
+ .desc {
+ margin-top: 20px;
+ > p {
+ margin-top: 12px;
+ padding-left: 12px;
+ position: relative;
+ &::before {
+ position: absolute;
+ content: "";
+ background: #3b93ff;
+ width: 4px;
+ height: 4px;
+ border-radius: 2px;
+ top: 5px;
+ left: 0px;
+ }
+ }
+ }
+ .tags {
+ > div {
+ margin-top: 12px;
+ > p {
+ line-height: 24px;
+ font-size: 14px;
+ display: flex;
+ justify-content: space-between;
+ }
+ > div {
+ margin-top: 12px;
+ height: 28px;
+ > p {
+ display: inline-block;
+ margin-right: 16px;
+ padding: 6px 10px;
+ border-radius: 4px;
+ color: #fff;
+ }
+ }
+ }
+ }
+ .icons {
+ margin: 75px 0;
+ display: flex;
+ > div {
+ margin-right: 10px;
+ background: var(--color-bg-3);
+ padding: 8px;
+ border-radius: 6px;
+ }
+ }
+ }
+ .right {
+ flex: 1;
+ > section {
+ background: var(--color-bg-2);
+ padding-top: 20px;
+ margin-top: 10px;
+ .menus {
+ display: flex;
+ padding: 0 5px 20px 20px;
+ > div {
+ margin-right: 10px;
+ &.buttons {
+ display: flex;
+ background: var(--color-fill-2);
+ > div {
+ width: 34px;
+ height: 34px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/oneThree/unit/index.vue b/src/views/oneThree/unit/index.vue
deleted file mode 100644
index 19ae8ff..0000000
--- a/src/views/oneThree/unit/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <div class="unit">瀹炴湁鎴垮眿</div>
-</template>
-
-<script lang="ts" setup name="unit"></script>
-
-<style lang="scss" scoped></style>
--
Gitblit v1.8.0