From 406a398a94d54b854472063f219ae87e8fcf4a98 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期三, 21 八月 2024 09:50:20 +0800
Subject: [PATCH] fix: 组件
---
src/views/oneThree/unit/index.vue | 7 +
src/assets/images/icon-house.png | 0
src/assets/svg/icon-people.svg | 1
src/views/components/the-icon-card/index.vue | 112 ++++++++++-----
src/assets/images/people.png | 0
src/layout/components/app-header-right/index.vue | 4
src/views/oneThree/actualPopulation/index.vue | 7 +
src/config/router/oneThree.ts | 57 ++++++++
src/assets/svg/icon-house.svg | 1
src/views/oneThree/house/index.vue | 7 +
src/views/oneThree/comprehensiveQuery/index.vue | 86 ++++++++++++
src/views/components/the-box-card/index.vue | 135 +++++++++++++++++++
src/styles/index.scss | 2
src/assets/svg/menu-house.svg | 1
14 files changed, 379 insertions(+), 41 deletions(-)
diff --git a/src/assets/images/icon-house.png b/src/assets/images/icon-house.png
new file mode 100644
index 0000000..7cc56e8
--- /dev/null
+++ b/src/assets/images/icon-house.png
Binary files differ
diff --git a/src/assets/images/people.png b/src/assets/images/people.png
new file mode 100644
index 0000000..153b77e
--- /dev/null
+++ b/src/assets/images/people.png
Binary files differ
diff --git a/src/assets/svg/icon-house.svg b/src/assets/svg/icon-house.svg
new file mode 100644
index 0000000..989f7d6
--- /dev/null
+++ b/src/assets/svg/icon-house.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724140529007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3660" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M755.2 972.8H268.8c-68.266667 0-128-64-128-119.466667v-320c0-17.066667 12.8-34.133333 34.133333-34.133333s34.133333 12.8 34.133334 34.133333V853.333333c0 17.066667 29.866667 51.2 64 51.2h486.4c38.4 0 64-38.4 64-51.2v-320c0-17.066667 12.8-34.133333 34.133333-34.133333s34.133333 12.8 34.133333 34.133333V853.333333c-4.266667 51.2-68.266667 119.466667-136.533333 119.466667z" fill="#0091FF" p-id="3661"></path><path d="M938.666667 503.466667c-8.533333 0-17.066667-4.266667-21.333334-8.533334l-366.933333-320c-21.333333-17.066667-59.733333-17.066667-81.066667 0l-366.933333 320c-12.8 12.8-34.133333 8.533333-46.933333-4.266666-12.8-12.8-8.533333-34.133333 4.266666-46.933334L430.933333 128c46.933333-42.666667 115.2-42.666667 162.133334 0l366.933333 320c12.8 12.8 12.8 29.866667 4.266667 46.933333-8.533333 4.266667-17.066667 8.533333-25.6 8.533334zM682.666667 972.8h-85.333334c-42.666667 0-76.8-34.133333-76.8-76.8v-256c0-64 51.2-119.466667 119.466667-119.466667s119.466667 51.2 119.466667 119.466667v256c0 42.666667-34.133333 76.8-76.8 76.8z m-42.666667-384c-29.866667 0-51.2 25.6-51.2 51.2v256c0 4.266667 4.266667 8.533333 8.533333 8.533333h85.333334c4.266667 0 8.533333-4.266667 8.533333-8.533333v-256c0-29.866667-21.333333-51.2-51.2-51.2zM384 716.8H341.333333c-42.666667 0-76.8-34.133333-76.8-72.533333v-42.666667c0-42.666667 34.133333-76.8 76.8-76.8h42.666667c42.666667 0 76.8 34.133333 76.8 76.8v42.666667c0 38.4-34.133333 72.533333-76.8 72.533333z m-42.666667-128c-4.266667 0-8.533333 4.266667-8.533333 8.533333v42.666667c0 4.266667 4.266667 8.533333 8.533333 8.533333h42.666667c4.266667 0 8.533333-4.266667 8.533333-8.533333v-42.666667c0-4.266667-4.266667-8.533333-8.533333-8.533333H341.333333z" fill="#0091FF" p-id="3662"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/icon-people.svg b/src/assets/svg/icon-people.svg
new file mode 100644
index 0000000..4a203d1
--- /dev/null
+++ b/src/assets/svg/icon-people.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724140637720" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4778" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.1875" height="32"><path d="M312.8832 612.1216a363.9552 363.9552 0 0 0 153.6 33.2544c55.7824 0 108.1856-12.1088 153.5744-33.2544h49.024c141.0048 0 256.3072 116.7872 256.3072 259.4816v28.5952c0 61.824-49.9712 112.4352-111.0528 112.4352H118.6304c-61.056 0-111.0528-50.6112-111.0528-112.4352v-28.5952c0-142.72 115.3536-259.4816 256.3328-259.4816h48.9728z m729.9072-168.3712c32.768 0.64 58.752 24.064 58.0096 52.352-0.7168 27.392-26.2656 49.408-58.0096 50.0224h-154.3168c-32.768 0.64-59.9552-21.76-60.6976-50.0224-0.7424-28.2624 25.2416-51.712 58.0096-52.352h157.0048z m-1.3312-204.8c32.768 0 59.392 30.5664 59.392 68.2496 0 37.7088-26.624 68.2752-59.392 68.2752h-154.3168c-32.7936 0-59.392-30.5664-59.392-68.2752 0-37.6832 26.5984-68.2496 59.392-68.2496h154.3168zM466.4832 11.3664c144.8192 0 262.2464 119.552 262.2464 267.008s-117.4784 267.008-262.2464 267.008c-144.7936 0-262.2464-119.552-262.2464-267.008S321.7408 11.3664 466.4832 11.3664z m575.744 56.9088c33.1008 0.64 59.3408 24.064 58.5728 52.352-0.7168 27.392-26.5216 49.408-58.5728 50.048h-155.8528c-33.1008-0.64-59.3408-24.064-58.5984-52.352 0.7168-27.392 26.5472-49.408 58.5984-50.048h155.8528z" fill="#1afa29" p-id="4779"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/menu-house.svg b/src/assets/svg/menu-house.svg
new file mode 100644
index 0000000..44fd0e6
--- /dev/null
+++ b/src/assets/svg/menu-house.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724137249929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1477" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M34.133333 887.466667h955.733334v68.266666H34.133333z" p-id="1478"></path><path d="M509.994667 105.216a34.133333 34.133333 0 0 1 2.005333 11.52V955.733333H136.533333V252.928A68.266667 68.266667 0 0 1 181.845333 188.586667l284.544-104.106667a34.133333 34.133333 0 0 1 43.605334 20.693333zM409.6 750.933333H341.333333v68.266667h68.266667v-68.266667z m-102.4 0H238.933333v68.266667h68.266667v-68.266667z m102.4-170.666666H341.333333v68.266666h68.266667v-68.266666z m-102.4 0H238.933333v68.266666h68.266667v-68.266666z m102.4-170.666667H341.333333v68.266667h68.266667V409.6z m-102.4 0H238.933333v68.266667h68.266667V409.6z m102.4-170.666667H341.333333v68.266667h68.266667V238.933333z m219.392-105.813333l3.498667 1.92 257.024 117.973333a68.266667 68.266667 0 0 1 31.829333 52.053334l0.256 5.845333V955.733333h-341.333333V163.968a34.133333 34.133333 0 0 1 48.725333-30.848z m19.541333 84.394667V887.466667H853.333333l0.042667-573.653334L853.333333 311.509333 648.533333 217.514667zM785.066667 750.933333v68.266667h-68.266667v-68.266667h68.266667z m0-170.666666v68.266666h-68.266667v-68.266666h68.266667z m0-170.666667v68.266667h-68.266667V409.6h68.266667z" p-id="1479"></path></svg>
\ No newline at end of file
diff --git a/src/config/router/oneThree.ts b/src/config/router/oneThree.ts
new file mode 100644
index 0000000..4907f78
--- /dev/null
+++ b/src/config/router/oneThree.ts
@@ -0,0 +1,57 @@
+import { RouteConfig } from "types";
+import Layout from "@/layout/index.vue";
+
+const routers: RouteConfig[] = [
+ {
+ path: "/oneThree",
+ name: "oneThree",
+ meta: {
+ title: "缁煎悎鏌ヨ",
+ icon: "menu-house",
+ sort: 2
+ },
+ redirect: "/oneThree/comprehensiveQuery",
+ component: Layout,
+ children: [
+ {
+ path: "/oneThree/comprehensiveQuery",
+ name: "comprehensive-query",
+ meta: {
+ title: "缁煎悎鏌ヨ",
+ sort: 16,
+ keepAliveName: "comprehensiveQuery"
+ },
+ component: () => import("@/views/oneThree/comprehensiveQuery/index.vue")
+ },
+ {
+ path: "/oneThree/actualPopulation",
+ name: "actual-population",
+ meta: {
+ title: "瀹炴湁浜哄彛",
+ sort: 14
+ },
+ component: () => import("@/views/oneThree/actualPopulation/index.vue")
+ },
+ {
+ path: "/oneThree/house",
+ name: "oneThree-house",
+ meta: {
+ title: "瀹炴湁鎴垮眿",
+ sort: 13
+ },
+ component: () => import("@/views/oneThree/house/index.vue")
+ },
+ {
+ path: "/oneThree/unit",
+ name: "oneThree-unit",
+ meta: {
+ title: "瀹炴湁鍗曚綅",
+ sort: 12
+ },
+ component: () => import("@/views/oneThree/unit/index.vue")
+ }
+ ]
+ }
+];
+
+export default routers;
diff --git a/src/layout/components/app-header-right/index.vue b/src/layout/components/app-header-right/index.vue
index fc3f764..0286840 100644
--- a/src/layout/components/app-header-right/index.vue
+++ b/src/layout/components/app-header-right/index.vue
@@ -2,7 +2,7 @@
<div class="app-header-right">
<div class="right-side">
<div class="side-item">
- <a-dropdown @select="changeLocale">
+ <!-- <a-dropdown @select="changeLocale">
<div class="nav-btn">
<a-tooltip :content="$t('璇█')">
<a-button class="nav-btn" type="outline" :shape="'circle'">
@@ -18,7 +18,7 @@
{{ item.label }}
</a-doption>
</template>
- </a-dropdown>
+ </a-dropdown> -->
</div>
<div class="side-item">
<a-dropdown @select="handleThemeChange">
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 22d43a1..e07e6a8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,5 @@
@import "transition.scss";
-@import "style-web.scss";
+// @import "style-web.scss";
html {
font-size: 10vw;
diff --git a/src/views/components/the-box-card/index.vue b/src/views/components/the-box-card/index.vue
new file mode 100644
index 0000000..0e28087
--- /dev/null
+++ b/src/views/components/the-box-card/index.vue
@@ -0,0 +1,135 @@
+<template>
+ <div class="the-box-card" :class="currentThemeMode === 'dark' ? 'box-card-dark' : ''">
+ <a-card class="card-box">
+ <div class="card-title">
+ <div class="title-left">
+ <icon-home />
+ <div style="margin-left: 10px">A灏忓尯</div>
+ </div>
+ <div class="card-more">璇︽儏 ></div>
+ </div>
+ <div class="card-content">
+ <div :span="8" class="card-box-col">
+ <div class="card-box-title">
+ <div>瀹炵敤浜哄彛</div>
+ <div>></div>
+ </div>
+ <div>2323 浜�</div>
+ </div>
+ <div :span="8" class="card-box-col">
+ <div class="card-box-title">
+ <div>瀹炵敤浜哄彛</div>
+ <div>></div>
+ </div>
+ <div>2323 浜�</div>
+ </div>
+ <div :span="8" class="card-box-col">
+ <div class="card-box-title">
+ <div>瀹炵敤浜哄彛</div>
+ <div>></div>
+ </div>
+ <div>2323 浜�</div>
+ </div>
+ </div>
+ <div class="card-content"></div>
+ </a-card>
+ </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 props = withDefaults(
+ defineProps<{
+ icon?: string;
+ title?: string;
+ unit?: string;
+ metering?: number;
+ }>(),
+ {
+ icon: "",
+ title: "",
+ unit: "",
+ metering: 0
+ }
+);
+// const dateType = ref("hour");
+
+// const emits = defineEmits<{
+// (e: "init", value: echarts.ECharts): void;
+// }>();
+
+// function initChart(v: any) {
+// emits("init", v);
+// }
+</script>
+<style lang="scss" scoped>
+.box-card-dark {
+ .card-box {
+ // display: flex;
+ }
+}
+.the-box-card {
+ border-radius: 5px;
+ box-sizing: border-box;
+ margin-right: 10px;
+ min-width: 188px;
+ width: 382.5px;
+ max-height: 257px;
+ border-radius: 5px;
+ opacity: 1;
+ .card-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .title-left {
+ display: flex;
+ color: rgb(var(--link-6));
+ font-size: 20px;
+ }
+ .card-more {
+ color: var(--color-text-3);
+ font-size: 14px;
+ }
+ }
+ .card-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 13px;
+ .card-box-col {
+ background-color: var(--color-bg-3);
+ // margin-right: 10px;
+ width: 108px;
+ height: 70px;
+ border-radius: 5px;
+ padding: 10px;
+ line-height: 24px;
+ .card-box-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--color-text-3);
+ font-size: 14px;
+ }
+ }
+ }
+
+ .card-box {
+ width: 100%;
+ height: 100%;
+ }
+ :deep(.arco-card-body) {
+ // 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 8f598c6..a541fa1 100644
--- a/src/views/components/the-icon-card/index.vue
+++ b/src/views/components/the-icon-card/index.vue
@@ -1,55 +1,91 @@
<template>
- <div class="icon-card"></div>
+ <div class="icon-card" :class="currentThemeMode === 'dark' ? 'card-dark' : ''">
+ <a-card class="card-box">
+ <div class="card-icon" :style="dynamicStyle">
+ <Svg :name="icon" :width="26" :height="26"></Svg>
+ <!-- <img src="../../../assets/images/icon-house.png" alt="" /> -->
+ </div>
+ <div class="card-content">
+ <p>{{ title }}</p>
+ <p>
+ <span>{{ metering }}</span>
+ <span>{{ unit }}</span>
+ </p>
+ </div>
+ </a-card>
+ </div>
</template>
-<script lang="ts" setup name="TheChartCard">
+<script lang="ts" setup name="TheIconCard">
+import { useTheme } from "@/hooks/useTheme";
+import { Svg } from "@easyfe/admin-component";
+
+const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
const props = withDefaults(
defineProps<{
- chartConfig?: ChartType;
+ icon?: string;
title?: string;
+ unit?: string;
+ metering?: number;
+ colorBg?: string;
}>(),
{
- chartConfig: undefined,
- title: ""
+ icon: "",
+ title: "",
+ unit: "",
+ metering: 0,
+ colorBg: "#fff"
}
);
-const dateType = ref("hour");
-const emits = defineEmits<{
- (e: "init", value: echarts.ECharts): void;
-}>();
-
-function initChart(v: any) {
- emits("init", v);
-}
+const colorBg = computed(() => {
+ return props.colorBg;
+});
+const dynamicStyle = {
+ backgroundColor: colorBg.value // 鍔ㄦ�佽儗鏅壊
+};
</script>
<style lang="scss" scoped>
-.icon-card {
- background-color: $bg2;
- width: 100%;
- padding: 24px;
- margin-top: 20px;
- .top {
+.card-dark {
+ .card-box {
+ border: 1px solid #0e9cff;
display: flex;
align-items: center;
- justify-content: space-between;
- padding-bottom: 20px;
- .left {
- font-size: 18px;
- font-weight: 700;
- position: relative;
- padding-left: 18px;
- &::before {
- position: absolute;
- top: 50%;
- left: 0;
- width: 8px;
- height: 8px;
- background-color: #315efb;
- border: 1px solid #b4c0da;
- transform: translateY(-50%);
- content: " ";
- }
- }
+ // justify-content: center;
+ }
+}
+.icon-card {
+ min-width: 88px;
+ max-width: 208px;
+ width: 100%;
+ min-height: 77px;
+ border-radius: 4px;
+ box-sizing: border-box;
+ margin-right: 10px;
+ .card-box {
+ width: 100%;
+ height: 100%;
+ }
+ .card-icon {
+ width: 50px;
+ height: 50px;
+
+ border-radius: 10px;
+ opacity: 1;
+ // background: #2e85ff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ :deep(.arco-card-body) {
+ 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/oneThree/actualPopulation/index.vue b/src/views/oneThree/actualPopulation/index.vue
index e69de29..01508db 100644
--- a/src/views/oneThree/actualPopulation/index.vue
+++ b/src/views/oneThree/actualPopulation/index.vue
@@ -0,0 +1,7 @@
+<template>
+ <div class="actualPopulation">瀹炴湁浜哄彛</div>
+</template>
+
+<script lang="ts" setup name="actualPopulation"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/oneThree/comprehensiveQuery/index.vue b/src/views/oneThree/comprehensiveQuery/index.vue
index e69de29..cbbf7fb 100644
--- a/src/views/oneThree/comprehensiveQuery/index.vue
+++ b/src/views/oneThree/comprehensiveQuery/index.vue
@@ -0,0 +1,86 @@
+<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>
diff --git a/src/views/oneThree/house/index.vue b/src/views/oneThree/house/index.vue
index e69de29..47354f1 100644
--- a/src/views/oneThree/house/index.vue
+++ b/src/views/oneThree/house/index.vue
@@ -0,0 +1,7 @@
+<template>
+ <div class="house">瀹炴湁鎴垮眿</div>
+</template>
+
+<script lang="ts" setup name="house"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/oneThree/unit/index.vue b/src/views/oneThree/unit/index.vue
index e69de29..19ae8ff 100644
--- a/src/views/oneThree/unit/index.vue
+++ b/src/views/oneThree/unit/index.vue
@@ -0,0 +1,7 @@
+<template>
+ <div class="unit">瀹炴湁鎴垮眿</div>
+</template>
+
+<script lang="ts" setup name="unit"></script>
+
+<style lang="scss" scoped></style>
--
Gitblit v1.8.0