feat: 增加一些组件

zhangnuoyan

2024-08-25 77e5c96577bfe426e4a341361e5c196dd5c5b7c9

feat: 增加一些组件

 src/styles/theme.scss

@@ -2,7 +2,7 @@
    --color-black: #000000;
    --color-border: #333335;
    --color-bg-1: #17171a;
    --color-bg-2: #0f2a58;
    --color-bg-2: #123269;
    --color-bg-popup: #0f2a58;
    --color-bg-3: rgba(255, 255, 255, 0.1);
    --color-bg-4: #313132;
@@ -50,6 +50,7 @@
    --color-menu-light-bg: #0f2a58;
    --color-menu-dark-hover: var(--color-fill-2);
    --color-mask-bg: rgba(23, 23, 26, 0.6);
    --color-neutral-3: #929293;
    --red-1: 77, 0, 10;
    --red-2: 119, 6, 17;
    --red-3: 161, 22, 31;
@@ -240,6 +241,13 @@
    --warning-8: var(--orange-8);
    --warning-9: var(--orange-9);
    --warning-10: var(--orange-10);

    .table-select .select-box .box-scrollbar {
        background-color: #2f5494 !important;
    }
    thead th {
        background-color: #2f5494;
    }
    .arco-card {
        border: none;
    }

 src/views/components/the-a-table/index.vue

@@ -1,26 +1,26 @@
<template>
    <!-- 表格 -->
    <div class="the-a-table" :class="currentThemeMode === 'dark' ? 'a-table-dark' : ''">
        <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
        <div class="table-select" v-if="colOpenShow">
        <!-- <div v-show="iscolopen" class="overSpread1" @click="onMaskClick"></div> -->
        <!-- <div v-if="colOpenShow" class="table-select">
            <div class="select-box">
                <icon-list class="box-icon" @click="checkcol" :size="24" />
                <icon-list class="box-icon" :size="24" @click="checkcol" />
                <a-scrollbar
                    v-show="iscolopen"
                    class="box-scrollbar"
                    type="track"
                    style="height: 200px; overflow: auto"
                    v-show="iscolopen"
                >
                    <a-space class="box-post" direction="vertical" size="large">
                        <a-checkbox-group direction="vertical" @change="selCeckBoxList" v-model="checkedValue">
                            <a-checkbox v-for="(item, index) in columns" :value="item.title" :key="index">
                        <a-checkbox-group v-model="checkedValue" direction="vertical" @change="selCeckBoxList">
                            <a-checkbox v-for="(item, index) in columns" :key="index" :value="item.title">
                                {{ item.title }}
                            </a-checkbox>
                        </a-checkbox-group>
                    </a-space>
                </a-scrollbar>
            </div>
        </div>
        </div> -->
        <a-space direction="vertical" size="large" fill>
            <a-table
                row-key="id"
@@ -30,10 +30,10 @@
                :columns="tableColumns"
                :bordered="bordered"
                :size="size"
                @page-change="onPageChange"
                :max-height="documentHeight"
                :scroll="{ x: 1000 }"
                :row-selection="rowSelection"
                @page-change="onPageChange"
                @select-all="selectTabAll"
                @selection-change="selectTabChange"
            >
@@ -46,7 +46,7 @@
                    >
                    </a-table-column>
                </template> -->
                <template v-for="(item, key, i) in slots" :key="i" v-slot:[key]="{ record, rowIndex, column }">
                <template v-for="(item, key, i) in slots" :key="i" #[key]="{ record, rowIndex, column }">
                    <slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
                </template>
            </a-table>
@@ -78,7 +78,7 @@
    {
        columns: () => [], //表头
        data: () => [], //数据
        colOpenShow: true, // 配置列表 表头
        colOpenShow: false, // 配置列表 表头
        loading: false,
        pagination: false,
        checkedValue: () => [],

 src/views/components/the-a-tabs/index.vue

@@ -1,6 +1,8 @@
<template>
    <div>
        <p v-for="(item, key) in data" :key="key" :class="index === key ? 'active' : ''">{{ item }}</p>
        <p v-for="(item, key) in data" :key="key" :class="index === key ? 'active' : ''" @click="handleChange(key)">
            {{ item }}
        </p>
    </div>
</template>
<script lang="ts" setup name="TheATabs">
@@ -14,6 +16,13 @@
        data: () => []
    }
);
const emits = defineEmits<{
    (e: "handleChange", index: number): void;
}>();
const handleChange = (index: number) => {
    if (props.index === index) return;
    emits("handleChange", index);
};
</script>
<style lang="scss" scoped>
div {

 src/views/components/the-member-info/index.vue

New file
@@ -0,0 +1,54 @@
<template>
    <div>
        <header>
            <p>{{ title }}</p>
            <span></span>
        </header>
        <section>
            <p v-for="(item, key) in data" :key="key">
                {{ item }}
            </p>
        </section>
    </div>
</template>
<script lang="ts" setup name="TheMemberInfo">
const props = withDefaults(
    defineProps<{
        title?: string;
        data?: Array<any>;
    }>(),
    {
        title: "",
        data: () => []
    }
);
</script>
<style lang="scss" scoped>
div {
    padding-bottom: 20px;
    header {
        font-size: 16px;
        padding-left: 10px;
        border-left: 4px solid #3b93ff;
        position: relative;
        display: flex;
        align-items: center;
        span {
            margin-left: 8px;
            display: block;
            flex: 1;
            height: 2px;
            background: var(--color-bg-3);
        }
    }
    section {
        overflow: hidden;
        padding: 12px 0;
        > p {
            width: 25%;
            float: left;
            margin: 12px 0;
        }
    }
}
</style>

 src/views/oneThree/member/index.vue

@@ -46,48 +46,28 @@
            </div>
        </div>
        <div class="right">
            <the-a-tabs style="margin: 8px 0" :data="['基本信息', '人员轨迹', '出行信息', '资源信息']" :index="0" />
            <the-a-tabs
                style="margin: 8px 0"
                :data="['基本信息', '人员轨迹', '出行信息', '资源信息']"
                :index="index"
                @handleChange="handleChange"
            />
            <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>
                <member-basic v-if="index === 0" />
                <member-track v-if="index === 1" />
                <member-travel v-if="index === 2" />
                <member-source v-if="index === 3" />
            </section>
        </div>
    </div>
</template>

<script lang="ts" setup name="member">
import memberBasic from "./pages/basic.vue";
import memberSource from "./pages/source.vue";
import memberTrack from "./pages/track.vue";
import memberTravel from "./pages/travel.vue";
const index = ref(0);
const changeData = reactive([
    {
        name: "1天",
@@ -103,16 +83,7 @@
    }
]);
const data = reactive({
    desc: [
        "所属小区：北京",
        "所属派出所：来广营派出所",
        "首次抓拍时间：2023-12-12 12:23",
        "首次抓拍地点：二号楼",
        "抓拍次数：23",
        "出现天数：12",
        "最后出现时间：2024-01-12 12:23",
        "常住地址：A小区1栋2单元201"
    ],
    desc: ["所属小区：北京", "所属派出所：来广营派出所", "首次抓拍时间：2023-12-12 12:23"],
    tags: [
        {
            title: "人员标签",
@@ -142,6 +113,9 @@
        }
    ]
});
const handleChange = (value: number) => {
    index.value = value;
};
</script>

<style lang="scss" scoped>
@@ -230,7 +204,7 @@
            }
        }
        .icons {
            margin: 75px 0;
            margin: 25px 0 50px;
            display: flex;
            > div {
                margin-right: 10px;
@@ -246,29 +220,6 @@
            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;
                            }
                        }
                    }
                }
            }
        }
    }
}

 src/views/oneThree/member/pages/basic.vue

New file
@@ -0,0 +1,142 @@
<template>
    <section>
        <the-member-info
            title="实名信息"
            :data="[
                '真实姓名：张三',
                '联系电话：19821231233',
                '证件类型：居民身份证',
                '证件码：566635477547575777773',
                '性别：男',
                '民族：汉',
                '出生日期：2003-12-12',
                '户口性质：农',
                '户籍地：A小区1栋2单元201',
                '所在单位：xx责任有限公司',
                '学历：本科',
                '婚姻状态：未婚'
            ]"
        />
        <the-member-info
            title="重点人员信息"
            :data="[
                '曾用名：张三',
                '绰号：小张',
                '体表标识：左眉毛有伤疤',
                '社保号码：--',
                '身高：189cm ',
                '民族：汉',
                '出生日期：2003-12-12',
                '体重：50KG',
                '户籍地：A小区1栋2单元201',
                '所在单位：xx责任有限公司',
                '学历：本科',
                '婚姻状态：未婚'
            ]"
        />
        <the-a-table
            :columns="columns"
            :data="data"
            :pagination="false"
            :checked-value="checkedValue"
            :col-open-show="true"
            :show-selection="false"
            @selTableCol="selTableCol"
        >
            <template #index="{ record, rowIndex, column }">
                {{ rowIndex + 1 }}
            </template>
            <template #action="{ record, rowIndex, column }">
                <a-button type="text" size="small">查看</a-button>
                <a-button type="text" size="small">管理</a-button>
                <a-button type="text" size="small">关闭</a-button>
            </template>
        </the-a-table>
        <div>
            <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
        </div>
    </section>
</template>

<script lang="ts" setup name="member-basic">
const columns = [
    {
        title: "序号",
        key: "1",
        dataIndex: "index",
        width: 80
    },
    {
        title: "居住地址",
        dataIndex: "name",
        key: "2",
        width: 280
    },
    {
        title: "入住时间",
        dataIndex: "inTime",
        key: "3"
    },
    {
        title: "撤离时间",
        dataIndex: "outTime",
        key: "4"
    },
    {
        title: "撤离信息",
        dataIndex: "outInfo",
        key: "4"
    },
    {
        title: "居住状态",
        dataIndex: "status",
        key: "4"
    }
];

const checkedValue = ref<string[]>(["序号", "居住地址", "入住时间", "撤离时间", "撤离信息", "居住状态"]);
const data = [
    {
        index: "1",
        name: "@派出所@@小区3栋一单元",
        inTime: "2024.10.12 12:12",
        outTime: "-",
        outInfo: "--",
        status: "在住"
    },
    {
        index: "2",
        name: "@派出所@@小区3栋一单元",
        inTime: "2024.10.12 12:12",
        outTime: "-",
        outInfo: "--",
        status: "撤离"
    },
    {
        index: "3",
        name: "@派出所@@小区3栋一单元",
        inTime: "2024.10.12 12:12",
        outTime: "-",
        outInfo: "--",
        status: "撤离"
    },
    {
        index: "4",
        name: "@派出所@@小区3栋一单元",
        inTime: "2024.10.12 12:12",
        outTime: "-",
        outInfo: "--",
        status: "撤离"
    }
];
const selTableCol = (val: any) => {
    checkedValue.value = val;
    console.log(val);
};
</script>

<style lang="scss" scoped>
section {
    padding: 10px;
}
</style>

 src/views/oneThree/member/pages/source.vue

New file
@@ -0,0 +1,79 @@
<template>
    <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>
</template>

<script lang="ts" setup name="member-source">
const changeData = reactive([
    {
        name: "1天",
        value: "1"
    },
    {
        name: "2天",
        value: "2"
    },
    {
        name: "自定义",
        value: "custom"
    }
]);
</script>

<style lang="scss" scoped>
.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/member/pages/track.vue

New file
@@ -0,0 +1,140 @@
<template>
    <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>
    <div class="cards">
        <a-card v-for="(item, key) in list" :key="key" class="card-box card-bg-custom">
            <the-img-card :title="item.title" :icon="item.icon" :contents="item.contents"></the-img-card>
            <div class="card-box-right">
                <div>
                    <a-space>
                        <a-button type="primary" size="mini">{{ item.tags[0] }}</a-button>
                        <a-button type="primary" status="danger" size="mini">{{ item.tags[1] }}</a-button>
                    </a-space>
                </div>
                <div>
                    <a-space>
                        <icon-book />
                        <icon-bar-chart />
                    </a-space>
                </div>
            </div>
        </a-card>
    </div>
</template>

<script lang="ts" setup name="member-track">
const changeData = reactive([
    {
        name: "1天",
        value: "1"
    },
    {
        name: "2天",
        value: "2"
    },
    {
        name: "自定义",
        value: "custom"
    }
]);
const list = reactive(
    new Array(5).fill({
        icon: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
        title: "张三",
        tags: ["上访", "涉毒"],
        contents: [
            {
                key: "人员编号",
                value: "H324343"
            },
            {
                key: "出现天数",
                value: "2天"
            },
            {
                key: "居住地址",
                value: "经济快速等级考试"
            },
            {
                key: "身份证号",
                value: "3673672627722"
            }
        ]
    })
);
</script>

<style lang="scss" scoped>
.cards {
    overflow: hidden;
    > div {
        float: left;
        margin: 0 20px 20px 0;
    }
}
.card-box {
    width: 391px;
    height: 202px;
    border-radius: 5px;
}
.card-box-right {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
.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/member/pages/travel.vue

New file
@@ -0,0 +1,85 @@
<template>
    <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>
    <div class="pagination">
        <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
    </div>
</template>

<script lang="ts" setup name="member-travel">
const changeData = reactive([
    {
        name: "1天",
        value: "1"
    },
    {
        name: "2天",
        value: "2"
    },
    {
        name: "自定义",
        value: "custom"
    }
]);
</script>

<style lang="scss" scoped>
.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;
                }
            }
        }
    }
}
.pagination {
    padding: 20px;
}
</style>