fix: 组件

zhangxiao

2024-08-21 406a398a94d54b854472063f219ae87e8fcf4a98

fix: 组件

 src/assets/images/icon-house.png

 src/assets/images/people.png

 src/assets/svg/icon-house.svg

New file
@@ -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>

 src/assets/svg/icon-people.svg

New file
@@ -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>

 src/assets/svg/menu-house.svg

New file
@@ -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>

 src/config/router/oneThree.ts

New file
@@ -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;

 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">

 src/styles/index.scss

@@ -1,5 +1,5 @@
@import "transition.scss";
@import "style-web.scss";
// @import "style-web.scss";

html {
    font-size: 10vw;

 src/views/components/the-box-card/index.vue

New file
@@ -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>

 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>

 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>

 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>

 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>

 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>