fix: 增加组件功能

zhangxiao

2024-08-21 523e69a7f649b513aa8d3788c79d52fc26c894d2

fix: 增加组件功能

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

 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>

 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>

 src/views/oneThree/comprehensive/index.vue

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

 src/views/oneThree/comprehensiveQuery/index.vue

File was deleted