feat: 增加一些组件

zhangnuoyan

2024-08-25 40f2e0a67cb3b788262f156deb7187d9735b5196

feat: 增加一些组件

 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")
            }
        ]
    }

 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>

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

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

 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 {

 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>

 src/views/oneThree/member/index.vue

New file
@@ -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",
        "常住地址：A小区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>

 src/views/oneThree/unit/index.vue

File was deleted