mirror of
https://github.com/silenty4ng/k5web
synced 2025-04-10 18:48:50 +00:00
Clean up unused code
This commit is contained in:
parent
676b2918bb
commit
bf7bf23454
50 changed files with 1 additions and 4987 deletions
src
api
components
locale
views
guide/f117
list
card
chi
flash
image
sat
search-table
settings
|
|
@ -1,22 +0,0 @@
|
||||||
import axios from 'axios';
|
|
||||||
import type { TableData } from '@arco-design/web-vue/es/table/interface';
|
|
||||||
|
|
||||||
export interface ContentDataRecord {
|
|
||||||
x: string;
|
|
||||||
y: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryContentData() {
|
|
||||||
return axios.get<ContentDataRecord[]>('/api/content-data');
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PopularRecord {
|
|
||||||
key: number;
|
|
||||||
clickNumber: string;
|
|
||||||
title: string;
|
|
||||||
increases: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryPopularList(params: { type: string }) {
|
|
||||||
return axios.get<TableData[]>('/api/popular/list', { params });
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export interface BaseInfoModel {
|
|
||||||
activityName: string;
|
|
||||||
channelType: string;
|
|
||||||
promotionTime: string[];
|
|
||||||
promoteLink: string;
|
|
||||||
}
|
|
||||||
export interface ChannelInfoModel {
|
|
||||||
advertisingSource: string;
|
|
||||||
advertisingMedia: string;
|
|
||||||
keyword: string[];
|
|
||||||
pushNotify: boolean;
|
|
||||||
advertisingContent: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type UnitChannelModel = BaseInfoModel & ChannelInfoModel;
|
|
||||||
|
|
||||||
export function submitChannelForm(data: UnitChannelModel) {
|
|
||||||
return axios.post('/api/channel-form/submit', { data });
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import axios from 'axios';
|
|
||||||
import qs from 'query-string';
|
|
||||||
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';
|
|
||||||
|
|
||||||
export interface PolicyRecord {
|
|
||||||
id: string;
|
|
||||||
number: number;
|
|
||||||
name: string;
|
|
||||||
contentType: 'img' | 'horizontalVideo' | 'verticalVideo';
|
|
||||||
filterType: 'artificial' | 'rules';
|
|
||||||
count: number;
|
|
||||||
status: 'online' | 'offline';
|
|
||||||
createdTime: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PolicyParams extends Partial<PolicyRecord> {
|
|
||||||
current: number;
|
|
||||||
pageSize: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PolicyListRes {
|
|
||||||
list: PolicyRecord[];
|
|
||||||
total: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryPolicyList(params: PolicyParams) {
|
|
||||||
return axios.get<PolicyListRes>('/api/list/policy', {
|
|
||||||
params,
|
|
||||||
paramsSerializer: (obj) => {
|
|
||||||
return qs.stringify(obj);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ServiceRecord {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
name?: string;
|
|
||||||
actionType?: string;
|
|
||||||
icon?: string;
|
|
||||||
data?: DescData[];
|
|
||||||
enable?: boolean;
|
|
||||||
expires?: boolean;
|
|
||||||
}
|
|
||||||
export function queryInspectionList() {
|
|
||||||
return axios.get('/api/list/quality-inspection');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryTheServiceList() {
|
|
||||||
return axios.get('/api/list/the-service');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryRulesPresetList() {
|
|
||||||
return axios.get('/api/list/rules-preset');
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export interface MessageRecord {
|
|
||||||
id: number;
|
|
||||||
type: string;
|
|
||||||
title: string;
|
|
||||||
subTitle: string;
|
|
||||||
avatar?: string;
|
|
||||||
content: string;
|
|
||||||
time: string;
|
|
||||||
status: 0 | 1;
|
|
||||||
messageType?: number;
|
|
||||||
}
|
|
||||||
export type MessageListType = MessageRecord[];
|
|
||||||
|
|
||||||
export function queryMessageList() {
|
|
||||||
return axios.post<MessageListType>('/api/message/list');
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MessageStatus {
|
|
||||||
ids: number[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setMessageStatus(data: MessageStatus) {
|
|
||||||
return axios.post<MessageListType>('/api/message/read', data);
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ChatRecord {
|
|
||||||
id: number;
|
|
||||||
username: string;
|
|
||||||
content: string;
|
|
||||||
time: string;
|
|
||||||
isCollect: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryChatList() {
|
|
||||||
return axios.post<ChatRecord[]>('/api/chat/list');
|
|
||||||
}
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export interface ProfileBasicRes {
|
|
||||||
status: number;
|
|
||||||
video: {
|
|
||||||
mode: string;
|
|
||||||
acquisition: {
|
|
||||||
resolution: string;
|
|
||||||
frameRate: number;
|
|
||||||
};
|
|
||||||
encoding: {
|
|
||||||
resolution: string;
|
|
||||||
rate: {
|
|
||||||
min: number;
|
|
||||||
max: number;
|
|
||||||
default: number;
|
|
||||||
};
|
|
||||||
frameRate: number;
|
|
||||||
profile: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
audio: {
|
|
||||||
mode: string;
|
|
||||||
acquisition: {
|
|
||||||
channels: number;
|
|
||||||
};
|
|
||||||
encoding: {
|
|
||||||
channels: number;
|
|
||||||
rate: number;
|
|
||||||
profile: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryProfileBasic() {
|
|
||||||
return axios.get<ProfileBasicRes>('/api/profile/basic');
|
|
||||||
}
|
|
||||||
|
|
||||||
export type operationLogRes = Array<{
|
|
||||||
key: string;
|
|
||||||
contentNumber: string;
|
|
||||||
updateContent: string;
|
|
||||||
status: number;
|
|
||||||
updateTime: string;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export function queryOperationLog() {
|
|
||||||
return axios.get<operationLogRes>('/api/operation/log');
|
|
||||||
}
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export interface MyProjectRecord {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
peopleNumber: number;
|
|
||||||
contributors: {
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
avatar: string;
|
|
||||||
}[];
|
|
||||||
}
|
|
||||||
export function queryMyProjectList() {
|
|
||||||
return axios.post('/api/user/my-project/list');
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface MyTeamRecord {
|
|
||||||
id: number;
|
|
||||||
avatar: string;
|
|
||||||
name: string;
|
|
||||||
peopleNumber: number;
|
|
||||||
}
|
|
||||||
export function queryMyTeamList() {
|
|
||||||
return axios.post('/api/user/my-team/list');
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LatestActivity {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
avatar: string;
|
|
||||||
}
|
|
||||||
export function queryLatestActivity() {
|
|
||||||
return axios.post<LatestActivity[]>('/api/user/latest-activity');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function saveUserInfo() {
|
|
||||||
return axios.post('/api/user/save-info');
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BasicInfoModel {
|
|
||||||
email: string;
|
|
||||||
nickname: string;
|
|
||||||
countryRegion: string;
|
|
||||||
area: string;
|
|
||||||
address: string;
|
|
||||||
profile: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface EnterpriseCertificationModel {
|
|
||||||
accountType: number;
|
|
||||||
status: number;
|
|
||||||
time: string;
|
|
||||||
legalPerson: string;
|
|
||||||
certificateType: string;
|
|
||||||
authenticationNumber: string;
|
|
||||||
enterpriseName: string;
|
|
||||||
enterpriseCertificateType: string;
|
|
||||||
organizationCode: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CertificationRecord = Array<{
|
|
||||||
certificationType: number;
|
|
||||||
certificationContent: string;
|
|
||||||
status: number;
|
|
||||||
time: string;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export interface UnitCertification {
|
|
||||||
enterpriseInfo: EnterpriseCertificationModel;
|
|
||||||
record: CertificationRecord;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryCertification() {
|
|
||||||
return axios.post<UnitCertification>('/api/user/certification');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function userUploadApi(
|
|
||||||
data: FormData,
|
|
||||||
config: {
|
|
||||||
controller: AbortController;
|
|
||||||
onUploadProgress?: (progressEvent: any) => void;
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
// const controller = new AbortController();
|
|
||||||
return axios.post('/api/user/upload', data, config);
|
|
||||||
}
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
import axios from 'axios';
|
|
||||||
import { GeneralChart } from '@/types/global';
|
|
||||||
|
|
||||||
export interface ChartDataRecord {
|
|
||||||
x: string;
|
|
||||||
y: number;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
export interface DataChainGrowth {
|
|
||||||
quota: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DataChainGrowthRes {
|
|
||||||
count: number;
|
|
||||||
growth: number;
|
|
||||||
chartData: {
|
|
||||||
xAxis: string[];
|
|
||||||
data: { name: string; value: number[] };
|
|
||||||
};
|
|
||||||
}
|
|
||||||
export function queryDataChainGrowth(data: DataChainGrowth) {
|
|
||||||
return axios.post<DataChainGrowthRes>('/api/data-chain-growth', data);
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PopularAuthorRes {
|
|
||||||
list: {
|
|
||||||
ranking: number;
|
|
||||||
author: string;
|
|
||||||
contentCount: number;
|
|
||||||
clickCount: number;
|
|
||||||
}[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryPopularAuthor() {
|
|
||||||
return axios.get<PopularAuthorRes>('/api/popular-author/list');
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ContentPublishRecord {
|
|
||||||
x: string[];
|
|
||||||
y: number[];
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryContentPublish() {
|
|
||||||
return axios.get<ContentPublishRecord[]>('/api/content-publish');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryContentPeriodAnalysis() {
|
|
||||||
return axios.post<GeneralChart>('/api/content-period-analysis');
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PublicOpinionAnalysis {
|
|
||||||
quota: string;
|
|
||||||
}
|
|
||||||
export interface PublicOpinionAnalysisRes {
|
|
||||||
count: number;
|
|
||||||
growth: number;
|
|
||||||
chartData: ChartDataRecord[];
|
|
||||||
}
|
|
||||||
export function queryPublicOpinionAnalysis(data: DataChainGrowth) {
|
|
||||||
return axios.post<PublicOpinionAnalysisRes>(
|
|
||||||
'/api/public-opinion-analysis',
|
|
||||||
data
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export interface DataOverviewRes {
|
|
||||||
xAxis: string[];
|
|
||||||
data: Array<{ name: string; value: number[]; count: number }>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queryDataOverview() {
|
|
||||||
return axios.post<DataOverviewRes>('/api/data-overview');
|
|
||||||
}
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-spin style="display: block" :loading="loading">
|
|
||||||
<a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
|
|
||||||
<a-tab-pane v-for="item in tabList" :key="item.key">
|
|
||||||
<template #title>
|
|
||||||
<span> {{ item.title }}{{ formatUnreadLength(item.key) }} </span>
|
|
||||||
</template>
|
|
||||||
<a-result v-if="!renderList.length" status="404">
|
|
||||||
<template #subtitle> {{ $t('messageBox.noContent') }} </template>
|
|
||||||
</a-result>
|
|
||||||
<List
|
|
||||||
:render-list="renderList"
|
|
||||||
:unread-count="unreadCount"
|
|
||||||
@item-click="handleItemClick"
|
|
||||||
/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<template #extra>
|
|
||||||
<a-button type="text" @click="emptyList">
|
|
||||||
{{ $t('messageBox.tab.button') }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-tabs>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, reactive, toRefs, computed } from 'vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import {
|
|
||||||
queryMessageList,
|
|
||||||
setMessageStatus,
|
|
||||||
MessageRecord,
|
|
||||||
MessageListType,
|
|
||||||
} from '@/api/message';
|
|
||||||
import useLoading from '@/hooks/loading';
|
|
||||||
import List from './list.vue';
|
|
||||||
|
|
||||||
interface TabItem {
|
|
||||||
key: string;
|
|
||||||
title: string;
|
|
||||||
avatar?: string;
|
|
||||||
}
|
|
||||||
const { loading, setLoading } = useLoading(true);
|
|
||||||
const messageType = ref('message');
|
|
||||||
const { t } = useI18n();
|
|
||||||
const messageData = reactive<{
|
|
||||||
renderList: MessageRecord[];
|
|
||||||
messageList: MessageRecord[];
|
|
||||||
}>({
|
|
||||||
renderList: [],
|
|
||||||
messageList: [],
|
|
||||||
});
|
|
||||||
toRefs(messageData);
|
|
||||||
const tabList: TabItem[] = [
|
|
||||||
{
|
|
||||||
key: 'message',
|
|
||||||
title: t('messageBox.tab.title.message'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'notice',
|
|
||||||
title: t('messageBox.tab.title.notice'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'todo',
|
|
||||||
title: t('messageBox.tab.title.todo'),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
async function fetchSourceData() {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const { data } = await queryMessageList();
|
|
||||||
messageData.messageList = data;
|
|
||||||
} catch (err) {
|
|
||||||
// you can report use errorHandler or other
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
async function readMessage(data: MessageListType) {
|
|
||||||
const ids = data.map((item) => item.id);
|
|
||||||
await setMessageStatus({ ids });
|
|
||||||
fetchSourceData();
|
|
||||||
}
|
|
||||||
const renderList = computed(() => {
|
|
||||||
return messageData.messageList.filter(
|
|
||||||
(item) => messageType.value === item.type
|
|
||||||
);
|
|
||||||
});
|
|
||||||
const unreadCount = computed(() => {
|
|
||||||
return renderList.value.filter((item) => !item.status).length;
|
|
||||||
});
|
|
||||||
const getUnreadList = (type: string) => {
|
|
||||||
const list = messageData.messageList.filter(
|
|
||||||
(item) => item.type === type && !item.status
|
|
||||||
);
|
|
||||||
return list;
|
|
||||||
};
|
|
||||||
const formatUnreadLength = (type: string) => {
|
|
||||||
const list = getUnreadList(type);
|
|
||||||
return list.length ? `(${list.length})` : ``;
|
|
||||||
};
|
|
||||||
const handleItemClick = (items: MessageListType) => {
|
|
||||||
if (renderList.value.length) readMessage([...items]);
|
|
||||||
};
|
|
||||||
const emptyList = () => {
|
|
||||||
messageData.messageList = [];
|
|
||||||
};
|
|
||||||
fetchSourceData();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
:deep(.arco-popover-popup-content) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.arco-list-item-meta) {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
:deep(.arco-tabs-nav) {
|
|
||||||
padding: 14px 0 12px 16px;
|
|
||||||
border-bottom: 1px solid var(--color-neutral-3);
|
|
||||||
}
|
|
||||||
:deep(.arco-tabs-content) {
|
|
||||||
padding-top: 0;
|
|
||||||
.arco-result-subtitle {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,149 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-list :bordered="false">
|
|
||||||
<a-list-item
|
|
||||||
v-for="item in renderList"
|
|
||||||
:key="item.id"
|
|
||||||
action-layout="vertical"
|
|
||||||
:style="{
|
|
||||||
opacity: item.status ? 0.5 : 1,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<template #extra>
|
|
||||||
<a-tag v-if="item.messageType === 0" color="gray">未开始</a-tag>
|
|
||||||
<a-tag v-else-if="item.messageType === 1" color="green">已开通</a-tag>
|
|
||||||
<a-tag v-else-if="item.messageType === 2" color="blue">进行中</a-tag>
|
|
||||||
<a-tag v-else-if="item.messageType === 3" color="red">即将到期</a-tag>
|
|
||||||
</template>
|
|
||||||
<div class="item-wrap" @click="onItemClick(item)">
|
|
||||||
<a-list-item-meta>
|
|
||||||
<template v-if="item.avatar" #avatar>
|
|
||||||
<a-avatar shape="circle">
|
|
||||||
<img v-if="item.avatar" :src="item.avatar" />
|
|
||||||
<icon-desktop v-else />
|
|
||||||
</a-avatar>
|
|
||||||
</template>
|
|
||||||
<template #title>
|
|
||||||
<a-space :size="4">
|
|
||||||
<span>{{ item.title }}</span>
|
|
||||||
<a-typography-text type="secondary">
|
|
||||||
{{ item.subTitle }}
|
|
||||||
</a-typography-text>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
<div>
|
|
||||||
<a-typography-paragraph
|
|
||||||
:ellipsis="{
|
|
||||||
rows: 1,
|
|
||||||
}"
|
|
||||||
>{{ item.content }}</a-typography-paragraph
|
|
||||||
>
|
|
||||||
<a-typography-text
|
|
||||||
v-if="item.type === 'message'"
|
|
||||||
class="time-text"
|
|
||||||
>
|
|
||||||
{{ item.time }}
|
|
||||||
</a-typography-text>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</div>
|
|
||||||
</a-list-item>
|
|
||||||
<template #footer>
|
|
||||||
<a-space
|
|
||||||
fill
|
|
||||||
:size="0"
|
|
||||||
:class="{ 'add-border-top': renderList.length < showMax }"
|
|
||||||
>
|
|
||||||
<div class="footer-wrap">
|
|
||||||
<a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
|
|
||||||
</div>
|
|
||||||
<div class="footer-wrap">
|
|
||||||
<a-link>{{ $t('messageBox.viewMore') }}</a-link>
|
|
||||||
</div>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
<div
|
|
||||||
v-if="renderList.length && renderList.length < 3"
|
|
||||||
:style="{ height: (showMax - renderList.length) * 86 + 'px' }"
|
|
||||||
></div>
|
|
||||||
</a-list>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { PropType } from 'vue';
|
|
||||||
import { MessageRecord, MessageListType } from '@/api/message';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
renderList: {
|
|
||||||
type: Array as PropType<MessageListType>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
unreadCount: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const emit = defineEmits(['itemClick']);
|
|
||||||
const allRead = () => {
|
|
||||||
emit('itemClick', [...props.renderList]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onItemClick = (item: MessageRecord) => {
|
|
||||||
if (!item.status) {
|
|
||||||
emit('itemClick', [item]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const showMax = 3;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
:deep(.arco-list) {
|
|
||||||
.arco-list-item {
|
|
||||||
min-height: 86px;
|
|
||||||
border-bottom: 1px solid rgb(var(--gray-3));
|
|
||||||
}
|
|
||||||
.arco-list-item-extra {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
.arco-list-item-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.item-wrap {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.time-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.arco-list-footer {
|
|
||||||
padding: 0;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
border-top: none;
|
|
||||||
.arco-space-item {
|
|
||||||
width: 100%;
|
|
||||||
border-right: 1px solid rgb(var(--gray-3));
|
|
||||||
&:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.add-border-top {
|
|
||||||
border-top: 1px solid rgb(var(--gray-3));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footer-wrap {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.arco-typography {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.add-border {
|
|
||||||
border-top: 1px solid rgb(var(--gray-3));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
export default {
|
|
||||||
'messageBox.tab.title.message': 'Message',
|
|
||||||
'messageBox.tab.title.notice': 'Notice',
|
|
||||||
'messageBox.tab.title.todo': 'Todo',
|
|
||||||
'messageBox.tab.button': 'empty',
|
|
||||||
'messageBox.allRead': 'All Read',
|
|
||||||
'messageBox.viewMore': 'View More',
|
|
||||||
'messageBox.noContent': 'No Content',
|
|
||||||
'messageBox.switchRoles': 'Switch Roles',
|
|
||||||
'messageBox.userCenter': 'User Center',
|
|
||||||
'messageBox.userSettings': 'User Settings',
|
|
||||||
'messageBox.logout': 'Logout',
|
|
||||||
};
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
export default {
|
|
||||||
'messageBox.tab.title.message': '消息',
|
|
||||||
'messageBox.tab.title.notice': '通知',
|
|
||||||
'messageBox.tab.title.todo': '待办',
|
|
||||||
'messageBox.tab.button': '清空',
|
|
||||||
'messageBox.allRead': '全部已读',
|
|
||||||
'messageBox.viewMore': '查看更多',
|
|
||||||
'messageBox.noContent': '暂无内容',
|
|
||||||
'messageBox.switchRoles': '切换角色',
|
|
||||||
'messageBox.userCenter': '用户中心',
|
|
||||||
'messageBox.userSettings': '用户设置',
|
|
||||||
'messageBox.logout': '登出登录',
|
|
||||||
};
|
|
||||||
|
|
@ -167,7 +167,7 @@
|
||||||
import { Message } from '@arco-design/web-vue';
|
import { Message } from '@arco-design/web-vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useDark, useToggle, useFullscreen } from '@vueuse/core';
|
import { useDark, useToggle, useFullscreen } from '@vueuse/core';
|
||||||
import { useAppStore, useUserStore } from '@/store';
|
import { useAppStore } from '@/store';
|
||||||
import { LOCALE_OPTIONS } from '@/locale';
|
import { LOCALE_OPTIONS } from '@/locale';
|
||||||
import useLocale from '@/hooks/locale';
|
import useLocale from '@/hooks/locale';
|
||||||
import useUser from '@/hooks/user';
|
import useUser from '@/hooks/user';
|
||||||
|
|
@ -178,7 +178,6 @@
|
||||||
const drivers = import.meta.glob('@/drivers/*.json', { eager: true });
|
const drivers = import.meta.glob('@/drivers/*.json', { eager: true });
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const userStore = useUserStore();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
const { logout } = useUser();
|
const { logout } = useUser();
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
import localeMessageBox from '@/components/message-box/locale/en-US';
|
|
||||||
|
|
||||||
import localeWorkplace from '@/views/dashboard/workplace/locale/en-US';
|
import localeWorkplace from '@/views/dashboard/workplace/locale/en-US';
|
||||||
|
|
||||||
import localeSearchTable from '@/views/list/search-table/locale/en-US';
|
import localeSearchTable from '@/views/list/search-table/locale/en-US';
|
||||||
|
|
@ -166,7 +164,6 @@ export default {
|
||||||
'menu.cps.writeNoticeContent': "Confirmation to write the channel shown on the web page to the device? (will override the device's current channel configuration)",
|
'menu.cps.writeNoticeContent': "Confirmation to write the channel shown on the web page to the device? (will override the device's current channel configuration)",
|
||||||
'menu.satellite2': 'Satcom 2.0',
|
'menu.satellite2': 'Satcom 2.0',
|
||||||
...localeSettings,
|
...localeSettings,
|
||||||
...localeMessageBox,
|
|
||||||
...localeWorkplace,
|
...localeWorkplace,
|
||||||
|
|
||||||
...localeSearchTable,
|
...localeSearchTable,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
import localeMessageBox from '@/components/message-box/locale/zh-CN';
|
|
||||||
|
|
||||||
import localeWorkplace from '@/views/dashboard/workplace/locale/zh-CN';
|
import localeWorkplace from '@/views/dashboard/workplace/locale/zh-CN';
|
||||||
|
|
||||||
import localeSearchTable from '@/views/list/search-table/locale/zh-CN';
|
import localeSearchTable from '@/views/list/search-table/locale/zh-CN';
|
||||||
|
|
@ -166,7 +164,6 @@ export default {
|
||||||
'menu.cps.writeNoticeContent': '确认将网页显示的信道写入设备吗？（将覆盖设备当前信道配置）',
|
'menu.cps.writeNoticeContent': '确认将网页显示的信道写入设备吗？（将覆盖设备当前信道配置）',
|
||||||
'menu.satellite2': '星历写入 2.0',
|
'menu.satellite2': '星历写入 2.0',
|
||||||
...localeSettings,
|
...localeSettings,
|
||||||
...localeMessageBox,
|
|
||||||
...localeWorkplace,
|
...localeWorkplace,
|
||||||
|
|
||||||
...localeSearchTable,
|
...localeSearchTable,
|
||||||
|
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<a-card v-if="loading" :bordered="false" hoverable>
|
|
||||||
<slot name="skeleton"></slot>
|
|
||||||
</a-card>
|
|
||||||
<a-card v-else :bordered="false" hoverable>
|
|
||||||
<a-space align="start">
|
|
||||||
<a-avatar
|
|
||||||
v-if="icon"
|
|
||||||
:size="24"
|
|
||||||
style="margin-right: 8px; background-color: #626aea"
|
|
||||||
>
|
|
||||||
<icon-filter />
|
|
||||||
</a-avatar>
|
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
|
||||||
<a-typography-text style="margin-right: 10px">
|
|
||||||
{{ title }}
|
|
||||||
</a-typography-text>
|
|
||||||
<template v-if="showTag">
|
|
||||||
<a-tag
|
|
||||||
v-if="open && isExpires === false"
|
|
||||||
size="small"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ tagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<a-tag v-else-if="isExpires" size="small" color="red">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ expiresTagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
{{ description }}
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-space>
|
|
||||||
<template #actions>
|
|
||||||
<a-switch v-if="actionType === 'switch'" v-model="open" />
|
|
||||||
<a-space v-else-if="actionType === 'button'">
|
|
||||||
<template v-if="isExpires">
|
|
||||||
<a-button type="outline" @click="renew">
|
|
||||||
{{ expiresText }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-button v-if="open" @click="handleToggle">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else-if="!open" type="outline" @click="handleToggle">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-space>
|
|
||||||
<div v-else>
|
|
||||||
<a-space>
|
|
||||||
<a-button @click="toggle(false)">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" @click="toggle(true)">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToggle } from '@vueuse/core';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
actionType: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
openTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
closeTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expiresText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showTag: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
tagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expires: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
expiresTagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [open, toggle] = useToggle(props.defaultValue);
|
|
||||||
const handleToggle = () => {
|
|
||||||
toggle();
|
|
||||||
};
|
|
||||||
const isExpires = ref(props.expires);
|
|
||||||
const renew = () => {
|
|
||||||
isExpires.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-card-body {
|
|
||||||
height: 100%;
|
|
||||||
.arco-space {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.arco-space-item {
|
|
||||||
height: 100%;
|
|
||||||
&:last-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.arco-card-meta {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.arco-card-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
.arco-card-meta-description {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-card-meta-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// To prevent the shaking
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
:deep(.arco-skeleton-line) {
|
|
||||||
&:last-child {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.content') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
>
|
|
||||||
<div class="card-wrap empty-wrap">
|
|
||||||
<a-card :bordered="false" hoverable>
|
|
||||||
<a-result :status="null" :title="$t('cardList.content.action')">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus style="font-size: 20px" />
|
|
||||||
</template>
|
|
||||||
</a-result>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
class="list-col"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:icon="item.icon"
|
|
||||||
:open-txt="$t('cardList.content.inspection')"
|
|
||||||
:close-txt="$t('cardList.content.delete')"
|
|
||||||
:show-tag="false"
|
|
||||||
>
|
|
||||||
<a-descriptions
|
|
||||||
style="margin-top: 16px"
|
|
||||||
:data="item.data"
|
|
||||||
layout="inline-horizontal"
|
|
||||||
:column="2"
|
|
||||||
/>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line
|
|
||||||
:widths="['50%', '50%', '100%', '40%']"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryInspectionList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(3).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryInspectionList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-description) {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
.arco-descriptions-item-label-inline {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-descriptions-item-value-inline {
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.empty-wrap {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-result-title {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.preset') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 140px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:tag-text="$t('cardList.preset.tag')"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryRulesPresetList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(6).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryRulesPresetList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.service') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 162px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:expires="item.expires"
|
|
||||||
:open-txt="$t('cardList.service.open')"
|
|
||||||
:close-txt="$t('cardList.service.cancel')"
|
|
||||||
:expires-text="$t('cardList.service.renew')"
|
|
||||||
:tag-text="$t('cardList.service.tag')"
|
|
||||||
:expires-tag-text="$t('cardList.service.expiresTag')"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryTheServiceList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(4).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryTheServiceList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { ServiceRecord } from '@/api/list';
|
|
||||||
|
|
||||||
const qualityInspectionList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'quality',
|
|
||||||
title: '视频类-历史导入',
|
|
||||||
description: '2021-10-12 00:00:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-图片版权',
|
|
||||||
description: '2021-12-11 18:30:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-高清图片',
|
|
||||||
description: '2021-10-15 08:10:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const theServiceList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: 'code',
|
|
||||||
title: '漏斗分析',
|
|
||||||
description:
|
|
||||||
'用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: 'edit',
|
|
||||||
title: '用户分布',
|
|
||||||
description:
|
|
||||||
'快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
expires: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: 'user',
|
|
||||||
title: '资源分发',
|
|
||||||
description:
|
|
||||||
'移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: 'user',
|
|
||||||
title: '用户画像分析',
|
|
||||||
description:
|
|
||||||
'用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const rulesPresetList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: '内容屏蔽规则',
|
|
||||||
description:
|
|
||||||
'用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: '内容置顶规则',
|
|
||||||
description:
|
|
||||||
'该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '内容加权规则',
|
|
||||||
description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: '内容分发规则',
|
|
||||||
description: '内容分发时，对某些内容需要固定在C端展示的位置。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: '违禁内容识别',
|
|
||||||
description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: '多语言文字符号识别',
|
|
||||||
description:
|
|
||||||
'精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
// Quality Inspection
|
|
||||||
Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
qualityInspectionList.map((_, index) => ({
|
|
||||||
...qualityInspectionList[index % qualityInspectionList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// the service
|
|
||||||
Mock.mock(new RegExp('/api/list/the-service'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
theServiceList.map((_, index) => ({
|
|
||||||
...theServiceList[index % theServiceList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// rules preset
|
|
||||||
Mock.mock(new RegExp('/api/list/rules-preset'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
rulesPresetList.map((_, index) => ({
|
|
||||||
...rulesPresetList[index % rulesPresetList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<a-card v-if="loading" :bordered="false" hoverable>
|
|
||||||
<slot name="skeleton"></slot>
|
|
||||||
</a-card>
|
|
||||||
<a-card v-else :bordered="false" hoverable>
|
|
||||||
<a-space align="start">
|
|
||||||
<a-avatar
|
|
||||||
v-if="icon"
|
|
||||||
:size="24"
|
|
||||||
style="margin-right: 8px; background-color: #626aea"
|
|
||||||
>
|
|
||||||
<icon-filter />
|
|
||||||
</a-avatar>
|
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
|
||||||
<a-typography-text style="margin-right: 10px">
|
|
||||||
{{ title }}
|
|
||||||
</a-typography-text>
|
|
||||||
<template v-if="showTag">
|
|
||||||
<a-tag
|
|
||||||
v-if="open && isExpires === false"
|
|
||||||
size="small"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ tagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<a-tag v-else-if="isExpires" size="small" color="red">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ expiresTagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
{{ description }}
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-space>
|
|
||||||
<template #actions>
|
|
||||||
<a-switch v-if="actionType === 'switch'" v-model="open" />
|
|
||||||
<a-space v-else-if="actionType === 'button'">
|
|
||||||
<template v-if="isExpires">
|
|
||||||
<a-button type="outline" @click="renew">
|
|
||||||
{{ expiresText }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-button v-if="open" @click="handleToggle">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else-if="!open" type="outline" @click="handleToggle">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-space>
|
|
||||||
<div v-else>
|
|
||||||
<a-space>
|
|
||||||
<a-button @click="toggle(false)">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" @click="toggle(true)">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToggle } from '@vueuse/core';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
actionType: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
openTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
closeTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expiresText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showTag: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
tagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expires: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
expiresTagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [open, toggle] = useToggle(props.defaultValue);
|
|
||||||
const handleToggle = () => {
|
|
||||||
toggle();
|
|
||||||
};
|
|
||||||
const isExpires = ref(props.expires);
|
|
||||||
const renew = () => {
|
|
||||||
isExpires.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-card-body {
|
|
||||||
height: 100%;
|
|
||||||
.arco-space {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.arco-space-item {
|
|
||||||
height: 100%;
|
|
||||||
&:last-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.arco-card-meta {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.arco-card-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
.arco-card-meta-description {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-card-meta-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// To prevent the shaking
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
:deep(.arco-skeleton-line) {
|
|
||||||
&:last-child {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.content') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
>
|
|
||||||
<div class="card-wrap empty-wrap">
|
|
||||||
<a-card :bordered="false" hoverable>
|
|
||||||
<a-result :status="null" :title="$t('cardList.content.action')">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus style="font-size: 20px" />
|
|
||||||
</template>
|
|
||||||
</a-result>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
class="list-col"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:icon="item.icon"
|
|
||||||
:open-txt="$t('cardList.content.inspection')"
|
|
||||||
:close-txt="$t('cardList.content.delete')"
|
|
||||||
:show-tag="false"
|
|
||||||
>
|
|
||||||
<a-descriptions
|
|
||||||
style="margin-top: 16px"
|
|
||||||
:data="item.data"
|
|
||||||
layout="inline-horizontal"
|
|
||||||
:column="2"
|
|
||||||
/>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line
|
|
||||||
:widths="['50%', '50%', '100%', '40%']"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryInspectionList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(3).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryInspectionList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-description) {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
.arco-descriptions-item-label-inline {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-descriptions-item-value-inline {
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.empty-wrap {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-result-title {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.preset') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 140px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:tag-text="$t('cardList.preset.tag')"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryRulesPresetList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(6).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryRulesPresetList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.service') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 162px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:expires="item.expires"
|
|
||||||
:open-txt="$t('cardList.service.open')"
|
|
||||||
:close-txt="$t('cardList.service.cancel')"
|
|
||||||
:expires-text="$t('cardList.service.renew')"
|
|
||||||
:tag-text="$t('cardList.service.tag')"
|
|
||||||
:expires-tag-text="$t('cardList.service.expiresTag')"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryTheServiceList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(4).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryTheServiceList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { ServiceRecord } from '@/api/list';
|
|
||||||
|
|
||||||
const qualityInspectionList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'quality',
|
|
||||||
title: '视频类-历史导入',
|
|
||||||
description: '2021-10-12 00:00:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-图片版权',
|
|
||||||
description: '2021-12-11 18:30:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-高清图片',
|
|
||||||
description: '2021-10-15 08:10:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const theServiceList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: 'code',
|
|
||||||
title: '漏斗分析',
|
|
||||||
description:
|
|
||||||
'用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: 'edit',
|
|
||||||
title: '用户分布',
|
|
||||||
description:
|
|
||||||
'快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
expires: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: 'user',
|
|
||||||
title: '资源分发',
|
|
||||||
description:
|
|
||||||
'移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: 'user',
|
|
||||||
title: '用户画像分析',
|
|
||||||
description:
|
|
||||||
'用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const rulesPresetList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: '内容屏蔽规则',
|
|
||||||
description:
|
|
||||||
'用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: '内容置顶规则',
|
|
||||||
description:
|
|
||||||
'该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '内容加权规则',
|
|
||||||
description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: '内容分发规则',
|
|
||||||
description: '内容分发时，对某些内容需要固定在C端展示的位置。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: '违禁内容识别',
|
|
||||||
description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: '多语言文字符号识别',
|
|
||||||
description:
|
|
||||||
'精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
// Quality Inspection
|
|
||||||
Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
qualityInspectionList.map((_, index) => ({
|
|
||||||
...qualityInspectionList[index % qualityInspectionList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// the service
|
|
||||||
Mock.mock(new RegExp('/api/list/the-service'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
theServiceList.map((_, index) => ({
|
|
||||||
...theServiceList[index % theServiceList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// rules preset
|
|
||||||
Mock.mock(new RegExp('/api/list/rules-preset'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
rulesPresetList.map((_, index) => ({
|
|
||||||
...rulesPresetList[index % rulesPresetList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<a-card v-if="loading" :bordered="false" hoverable>
|
|
||||||
<slot name="skeleton"></slot>
|
|
||||||
</a-card>
|
|
||||||
<a-card v-else :bordered="false" hoverable>
|
|
||||||
<a-space align="start">
|
|
||||||
<a-avatar
|
|
||||||
v-if="icon"
|
|
||||||
:size="24"
|
|
||||||
style="margin-right: 8px; background-color: #626aea"
|
|
||||||
>
|
|
||||||
<icon-filter />
|
|
||||||
</a-avatar>
|
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
|
||||||
<a-typography-text style="margin-right: 10px">
|
|
||||||
{{ title }}
|
|
||||||
</a-typography-text>
|
|
||||||
<template v-if="showTag">
|
|
||||||
<a-tag
|
|
||||||
v-if="open && isExpires === false"
|
|
||||||
size="small"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ tagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<a-tag v-else-if="isExpires" size="small" color="red">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ expiresTagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
{{ description }}
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-space>
|
|
||||||
<template #actions>
|
|
||||||
<a-switch v-if="actionType === 'switch'" v-model="open" />
|
|
||||||
<a-space v-else-if="actionType === 'button'">
|
|
||||||
<template v-if="isExpires">
|
|
||||||
<a-button type="outline" @click="renew">
|
|
||||||
{{ expiresText }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-button v-if="open" @click="handleToggle">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else-if="!open" type="outline" @click="handleToggle">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-space>
|
|
||||||
<div v-else>
|
|
||||||
<a-space>
|
|
||||||
<a-button @click="toggle(false)">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" @click="toggle(true)">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToggle } from '@vueuse/core';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
actionType: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
openTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
closeTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expiresText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showTag: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
tagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expires: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
expiresTagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [open, toggle] = useToggle(props.defaultValue);
|
|
||||||
const handleToggle = () => {
|
|
||||||
toggle();
|
|
||||||
};
|
|
||||||
const isExpires = ref(props.expires);
|
|
||||||
const renew = () => {
|
|
||||||
isExpires.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-card-body {
|
|
||||||
height: 100%;
|
|
||||||
.arco-space {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.arco-space-item {
|
|
||||||
height: 100%;
|
|
||||||
&:last-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.arco-card-meta {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.arco-card-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
.arco-card-meta-description {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-card-meta-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// To prevent the shaking
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
:deep(.arco-skeleton-line) {
|
|
||||||
&:last-child {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.content') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
>
|
|
||||||
<div class="card-wrap empty-wrap">
|
|
||||||
<a-card :bordered="false" hoverable>
|
|
||||||
<a-result :status="null" :title="$t('cardList.content.action')">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus style="font-size: 20px" />
|
|
||||||
</template>
|
|
||||||
</a-result>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
class="list-col"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:icon="item.icon"
|
|
||||||
:open-txt="$t('cardList.content.inspection')"
|
|
||||||
:close-txt="$t('cardList.content.delete')"
|
|
||||||
:show-tag="false"
|
|
||||||
>
|
|
||||||
<a-descriptions
|
|
||||||
style="margin-top: 16px"
|
|
||||||
:data="item.data"
|
|
||||||
layout="inline-horizontal"
|
|
||||||
:column="2"
|
|
||||||
/>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line
|
|
||||||
:widths="['50%', '50%', '100%', '40%']"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryInspectionList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(3).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryInspectionList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-description) {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
.arco-descriptions-item-label-inline {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-descriptions-item-value-inline {
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.empty-wrap {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-result-title {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.preset') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 140px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:tag-text="$t('cardList.preset.tag')"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryRulesPresetList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(6).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryRulesPresetList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.service') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 162px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:expires="item.expires"
|
|
||||||
:open-txt="$t('cardList.service.open')"
|
|
||||||
:close-txt="$t('cardList.service.cancel')"
|
|
||||||
:expires-text="$t('cardList.service.renew')"
|
|
||||||
:tag-text="$t('cardList.service.tag')"
|
|
||||||
:expires-tag-text="$t('cardList.service.expiresTag')"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryTheServiceList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(4).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryTheServiceList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { ServiceRecord } from '@/api/list';
|
|
||||||
|
|
||||||
const qualityInspectionList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'quality',
|
|
||||||
title: '视频类-历史导入',
|
|
||||||
description: '2021-10-12 00:00:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-图片版权',
|
|
||||||
description: '2021-12-11 18:30:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-高清图片',
|
|
||||||
description: '2021-10-15 08:10:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const theServiceList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: 'code',
|
|
||||||
title: '漏斗分析',
|
|
||||||
description:
|
|
||||||
'用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: 'edit',
|
|
||||||
title: '用户分布',
|
|
||||||
description:
|
|
||||||
'快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
expires: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: 'user',
|
|
||||||
title: '资源分发',
|
|
||||||
description:
|
|
||||||
'移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: 'user',
|
|
||||||
title: '用户画像分析',
|
|
||||||
description:
|
|
||||||
'用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const rulesPresetList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: '内容屏蔽规则',
|
|
||||||
description:
|
|
||||||
'用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: '内容置顶规则',
|
|
||||||
description:
|
|
||||||
'该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '内容加权规则',
|
|
||||||
description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: '内容分发规则',
|
|
||||||
description: '内容分发时，对某些内容需要固定在C端展示的位置。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: '违禁内容识别',
|
|
||||||
description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: '多语言文字符号识别',
|
|
||||||
description:
|
|
||||||
'精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
// Quality Inspection
|
|
||||||
Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
qualityInspectionList.map((_, index) => ({
|
|
||||||
...qualityInspectionList[index % qualityInspectionList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// the service
|
|
||||||
Mock.mock(new RegExp('/api/list/the-service'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
theServiceList.map((_, index) => ({
|
|
||||||
...theServiceList[index % theServiceList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// rules preset
|
|
||||||
Mock.mock(new RegExp('/api/list/rules-preset'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
rulesPresetList.map((_, index) => ({
|
|
||||||
...rulesPresetList[index % rulesPresetList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<a-card v-if="loading" :bordered="false" hoverable>
|
|
||||||
<slot name="skeleton"></slot>
|
|
||||||
</a-card>
|
|
||||||
<a-card v-else :bordered="false" hoverable>
|
|
||||||
<a-space align="start">
|
|
||||||
<a-avatar
|
|
||||||
v-if="icon"
|
|
||||||
:size="24"
|
|
||||||
style="margin-right: 8px; background-color: #626aea"
|
|
||||||
>
|
|
||||||
<icon-filter />
|
|
||||||
</a-avatar>
|
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
|
||||||
<a-typography-text style="margin-right: 10px">
|
|
||||||
{{ title }}
|
|
||||||
</a-typography-text>
|
|
||||||
<template v-if="showTag">
|
|
||||||
<a-tag
|
|
||||||
v-if="open && isExpires === false"
|
|
||||||
size="small"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ tagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<a-tag v-else-if="isExpires" size="small" color="red">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ expiresTagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
{{ description }}
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-space>
|
|
||||||
<template #actions>
|
|
||||||
<a-switch v-if="actionType === 'switch'" v-model="open" />
|
|
||||||
<a-space v-else-if="actionType === 'button'">
|
|
||||||
<template v-if="isExpires">
|
|
||||||
<a-button type="outline" @click="renew">
|
|
||||||
{{ expiresText }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-button v-if="open" @click="handleToggle">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else-if="!open" type="outline" @click="handleToggle">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-space>
|
|
||||||
<div v-else>
|
|
||||||
<a-space>
|
|
||||||
<a-button @click="toggle(false)">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" @click="toggle(true)">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToggle } from '@vueuse/core';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
actionType: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
openTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
closeTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expiresText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showTag: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
tagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expires: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
expiresTagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [open, toggle] = useToggle(props.defaultValue);
|
|
||||||
const handleToggle = () => {
|
|
||||||
toggle();
|
|
||||||
};
|
|
||||||
const isExpires = ref(props.expires);
|
|
||||||
const renew = () => {
|
|
||||||
isExpires.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-card-body {
|
|
||||||
height: 100%;
|
|
||||||
.arco-space {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.arco-space-item {
|
|
||||||
height: 100%;
|
|
||||||
&:last-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.arco-card-meta {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.arco-card-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
.arco-card-meta-description {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-card-meta-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// To prevent the shaking
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
:deep(.arco-skeleton-line) {
|
|
||||||
&:last-child {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.content') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
>
|
|
||||||
<div class="card-wrap empty-wrap">
|
|
||||||
<a-card :bordered="false" hoverable>
|
|
||||||
<a-result :status="null" :title="$t('cardList.content.action')">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus style="font-size: 20px" />
|
|
||||||
</template>
|
|
||||||
</a-result>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
class="list-col"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:icon="item.icon"
|
|
||||||
:open-txt="$t('cardList.content.inspection')"
|
|
||||||
:close-txt="$t('cardList.content.delete')"
|
|
||||||
:show-tag="false"
|
|
||||||
>
|
|
||||||
<a-descriptions
|
|
||||||
style="margin-top: 16px"
|
|
||||||
:data="item.data"
|
|
||||||
layout="inline-horizontal"
|
|
||||||
:column="2"
|
|
||||||
/>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line
|
|
||||||
:widths="['50%', '50%', '100%', '40%']"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryInspectionList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(3).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryInspectionList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-description) {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
.arco-descriptions-item-label-inline {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-descriptions-item-value-inline {
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.empty-wrap {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-result-title {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.preset') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 140px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:tag-text="$t('cardList.preset.tag')"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryRulesPresetList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(6).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryRulesPresetList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.service') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 162px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:expires="item.expires"
|
|
||||||
:open-txt="$t('cardList.service.open')"
|
|
||||||
:close-txt="$t('cardList.service.cancel')"
|
|
||||||
:expires-text="$t('cardList.service.renew')"
|
|
||||||
:tag-text="$t('cardList.service.tag')"
|
|
||||||
:expires-tag-text="$t('cardList.service.expiresTag')"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryTheServiceList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(4).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryTheServiceList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { ServiceRecord } from '@/api/list';
|
|
||||||
|
|
||||||
const qualityInspectionList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'quality',
|
|
||||||
title: '视频类-历史导入',
|
|
||||||
description: '2021-10-12 00:00:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-图片版权',
|
|
||||||
description: '2021-12-11 18:30:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-高清图片',
|
|
||||||
description: '2021-10-15 08:10:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const theServiceList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: 'code',
|
|
||||||
title: '漏斗分析',
|
|
||||||
description:
|
|
||||||
'用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: 'edit',
|
|
||||||
title: '用户分布',
|
|
||||||
description:
|
|
||||||
'快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
expires: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: 'user',
|
|
||||||
title: '资源分发',
|
|
||||||
description:
|
|
||||||
'移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: 'user',
|
|
||||||
title: '用户画像分析',
|
|
||||||
description:
|
|
||||||
'用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const rulesPresetList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: '内容屏蔽规则',
|
|
||||||
description:
|
|
||||||
'用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: '内容置顶规则',
|
|
||||||
description:
|
|
||||||
'该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '内容加权规则',
|
|
||||||
description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: '内容分发规则',
|
|
||||||
description: '内容分发时，对某些内容需要固定在C端展示的位置。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: '违禁内容识别',
|
|
||||||
description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: '多语言文字符号识别',
|
|
||||||
description:
|
|
||||||
'精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
// Quality Inspection
|
|
||||||
Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
qualityInspectionList.map((_, index) => ({
|
|
||||||
...qualityInspectionList[index % qualityInspectionList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// the service
|
|
||||||
Mock.mock(new RegExp('/api/list/the-service'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
theServiceList.map((_, index) => ({
|
|
||||||
...theServiceList[index % theServiceList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// rules preset
|
|
||||||
Mock.mock(new RegExp('/api/list/rules-preset'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
rulesPresetList.map((_, index) => ({
|
|
||||||
...rulesPresetList[index % rulesPresetList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<a-card v-if="loading" :bordered="false" hoverable>
|
|
||||||
<slot name="skeleton"></slot>
|
|
||||||
</a-card>
|
|
||||||
<a-card v-else :bordered="false" hoverable>
|
|
||||||
<a-space align="start">
|
|
||||||
<a-avatar
|
|
||||||
v-if="icon"
|
|
||||||
:size="24"
|
|
||||||
style="margin-right: 8px; background-color: #626aea"
|
|
||||||
>
|
|
||||||
<icon-filter />
|
|
||||||
</a-avatar>
|
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
|
||||||
<a-typography-text style="margin-right: 10px">
|
|
||||||
{{ title }}
|
|
||||||
</a-typography-text>
|
|
||||||
<template v-if="showTag">
|
|
||||||
<a-tag
|
|
||||||
v-if="open && isExpires === false"
|
|
||||||
size="small"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ tagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<a-tag v-else-if="isExpires" size="small" color="red">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ expiresTagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
{{ description }}
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-space>
|
|
||||||
<template #actions>
|
|
||||||
<a-switch v-if="actionType === 'switch'" v-model="open" />
|
|
||||||
<a-space v-else-if="actionType === 'button'">
|
|
||||||
<template v-if="isExpires">
|
|
||||||
<a-button type="outline" @click="renew">
|
|
||||||
{{ expiresText }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-button v-if="open" @click="handleToggle">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else-if="!open" type="outline" @click="handleToggle">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-space>
|
|
||||||
<div v-else>
|
|
||||||
<a-space>
|
|
||||||
<a-button @click="toggle(false)">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" @click="toggle(true)">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToggle } from '@vueuse/core';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
actionType: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
openTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
closeTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expiresText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showTag: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
tagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expires: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
expiresTagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [open, toggle] = useToggle(props.defaultValue);
|
|
||||||
const handleToggle = () => {
|
|
||||||
toggle();
|
|
||||||
};
|
|
||||||
const isExpires = ref(props.expires);
|
|
||||||
const renew = () => {
|
|
||||||
isExpires.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-card-body {
|
|
||||||
height: 100%;
|
|
||||||
.arco-space {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.arco-space-item {
|
|
||||||
height: 100%;
|
|
||||||
&:last-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.arco-card-meta {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.arco-card-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
.arco-card-meta-description {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-card-meta-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// To prevent the shaking
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
:deep(.arco-skeleton-line) {
|
|
||||||
&:last-child {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.content') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
>
|
|
||||||
<div class="card-wrap empty-wrap">
|
|
||||||
<a-card :bordered="false" hoverable>
|
|
||||||
<a-result :status="null" :title="$t('cardList.content.action')">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus style="font-size: 20px" />
|
|
||||||
</template>
|
|
||||||
</a-result>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
class="list-col"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:icon="item.icon"
|
|
||||||
:open-txt="$t('cardList.content.inspection')"
|
|
||||||
:close-txt="$t('cardList.content.delete')"
|
|
||||||
:show-tag="false"
|
|
||||||
>
|
|
||||||
<a-descriptions
|
|
||||||
style="margin-top: 16px"
|
|
||||||
:data="item.data"
|
|
||||||
layout="inline-horizontal"
|
|
||||||
:column="2"
|
|
||||||
/>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line
|
|
||||||
:widths="['50%', '50%', '100%', '40%']"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryInspectionList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(3).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryInspectionList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-description) {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
.arco-descriptions-item-label-inline {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-descriptions-item-value-inline {
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.empty-wrap {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-result-title {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.preset') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 140px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:tag-text="$t('cardList.preset.tag')"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryRulesPresetList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(6).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryRulesPresetList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.service') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 162px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:expires="item.expires"
|
|
||||||
:open-txt="$t('cardList.service.open')"
|
|
||||||
:close-txt="$t('cardList.service.cancel')"
|
|
||||||
:expires-text="$t('cardList.service.renew')"
|
|
||||||
:tag-text="$t('cardList.service.tag')"
|
|
||||||
:expires-tag-text="$t('cardList.service.expiresTag')"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryTheServiceList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(4).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryTheServiceList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { ServiceRecord } from '@/api/list';
|
|
||||||
|
|
||||||
const qualityInspectionList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'quality',
|
|
||||||
title: '视频类-历史导入',
|
|
||||||
description: '2021-10-12 00:00:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-图片版权',
|
|
||||||
description: '2021-12-11 18:30:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-高清图片',
|
|
||||||
description: '2021-10-15 08:10:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const theServiceList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: 'code',
|
|
||||||
title: '漏斗分析',
|
|
||||||
description:
|
|
||||||
'用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: 'edit',
|
|
||||||
title: '用户分布',
|
|
||||||
description:
|
|
||||||
'快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
expires: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: 'user',
|
|
||||||
title: '资源分发',
|
|
||||||
description:
|
|
||||||
'移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: 'user',
|
|
||||||
title: '用户画像分析',
|
|
||||||
description:
|
|
||||||
'用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const rulesPresetList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: '内容屏蔽规则',
|
|
||||||
description:
|
|
||||||
'用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: '内容置顶规则',
|
|
||||||
description:
|
|
||||||
'该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '内容加权规则',
|
|
||||||
description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: '内容分发规则',
|
|
||||||
description: '内容分发时，对某些内容需要固定在C端展示的位置。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: '违禁内容识别',
|
|
||||||
description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: '多语言文字符号识别',
|
|
||||||
description:
|
|
||||||
'精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
// Quality Inspection
|
|
||||||
Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
qualityInspectionList.map((_, index) => ({
|
|
||||||
...qualityInspectionList[index % qualityInspectionList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// the service
|
|
||||||
Mock.mock(new RegExp('/api/list/the-service'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
theServiceList.map((_, index) => ({
|
|
||||||
...theServiceList[index % theServiceList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// rules preset
|
|
||||||
Mock.mock(new RegExp('/api/list/rules-preset'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
rulesPresetList.map((_, index) => ({
|
|
||||||
...rulesPresetList[index % rulesPresetList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<a-card v-if="loading" :bordered="false" hoverable>
|
|
||||||
<slot name="skeleton"></slot>
|
|
||||||
</a-card>
|
|
||||||
<a-card v-else :bordered="false" hoverable>
|
|
||||||
<a-space align="start">
|
|
||||||
<a-avatar
|
|
||||||
v-if="icon"
|
|
||||||
:size="24"
|
|
||||||
style="margin-right: 8px; background-color: #626aea"
|
|
||||||
>
|
|
||||||
<icon-filter />
|
|
||||||
</a-avatar>
|
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
|
||||||
<a-typography-text style="margin-right: 10px">
|
|
||||||
{{ title }}
|
|
||||||
</a-typography-text>
|
|
||||||
<template v-if="showTag">
|
|
||||||
<a-tag
|
|
||||||
v-if="open && isExpires === false"
|
|
||||||
size="small"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ tagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<a-tag v-else-if="isExpires" size="small" color="red">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ expiresTagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
{{ description }}
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-space>
|
|
||||||
<template #actions>
|
|
||||||
<a-switch v-if="actionType === 'switch'" v-model="open" />
|
|
||||||
<a-space v-else-if="actionType === 'button'">
|
|
||||||
<template v-if="isExpires">
|
|
||||||
<a-button type="outline" @click="renew">
|
|
||||||
{{ expiresText }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-button v-if="open" @click="handleToggle">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else-if="!open" type="outline" @click="handleToggle">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-space>
|
|
||||||
<div v-else>
|
|
||||||
<a-space>
|
|
||||||
<a-button @click="toggle(false)">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" @click="toggle(true)">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToggle } from '@vueuse/core';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
actionType: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
openTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
closeTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expiresText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showTag: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
tagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expires: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
expiresTagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [open, toggle] = useToggle(props.defaultValue);
|
|
||||||
const handleToggle = () => {
|
|
||||||
toggle();
|
|
||||||
};
|
|
||||||
const isExpires = ref(props.expires);
|
|
||||||
const renew = () => {
|
|
||||||
isExpires.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-card-body {
|
|
||||||
height: 100%;
|
|
||||||
.arco-space {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.arco-space-item {
|
|
||||||
height: 100%;
|
|
||||||
&:last-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.arco-card-meta {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.arco-card-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
.arco-card-meta-description {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-card-meta-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// To prevent the shaking
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
:deep(.arco-skeleton-line) {
|
|
||||||
&:last-child {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.content') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
>
|
|
||||||
<div class="card-wrap empty-wrap">
|
|
||||||
<a-card :bordered="false" hoverable>
|
|
||||||
<a-result :status="null" :title="$t('cardList.content.action')">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus style="font-size: 20px" />
|
|
||||||
</template>
|
|
||||||
</a-result>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
class="list-col"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:icon="item.icon"
|
|
||||||
:open-txt="$t('cardList.content.inspection')"
|
|
||||||
:close-txt="$t('cardList.content.delete')"
|
|
||||||
:show-tag="false"
|
|
||||||
>
|
|
||||||
<a-descriptions
|
|
||||||
style="margin-top: 16px"
|
|
||||||
:data="item.data"
|
|
||||||
layout="inline-horizontal"
|
|
||||||
:column="2"
|
|
||||||
/>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line
|
|
||||||
:widths="['50%', '50%', '100%', '40%']"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryInspectionList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(3).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryInspectionList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-description) {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
.arco-descriptions-item-label-inline {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-descriptions-item-value-inline {
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.empty-wrap {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-result-title {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.preset') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 140px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:tag-text="$t('cardList.preset.tag')"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryRulesPresetList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(6).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryRulesPresetList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.service') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 162px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:expires="item.expires"
|
|
||||||
:open-txt="$t('cardList.service.open')"
|
|
||||||
:close-txt="$t('cardList.service.cancel')"
|
|
||||||
:expires-text="$t('cardList.service.renew')"
|
|
||||||
:tag-text="$t('cardList.service.tag')"
|
|
||||||
:expires-tag-text="$t('cardList.service.expiresTag')"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryTheServiceList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(4).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryTheServiceList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { ServiceRecord } from '@/api/list';
|
|
||||||
|
|
||||||
const qualityInspectionList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'quality',
|
|
||||||
title: '视频类-历史导入',
|
|
||||||
description: '2021-10-12 00:00:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-图片版权',
|
|
||||||
description: '2021-12-11 18:30:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-高清图片',
|
|
||||||
description: '2021-10-15 08:10:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const theServiceList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: 'code',
|
|
||||||
title: '漏斗分析',
|
|
||||||
description:
|
|
||||||
'用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: 'edit',
|
|
||||||
title: '用户分布',
|
|
||||||
description:
|
|
||||||
'快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
expires: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: 'user',
|
|
||||||
title: '资源分发',
|
|
||||||
description:
|
|
||||||
'移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: 'user',
|
|
||||||
title: '用户画像分析',
|
|
||||||
description:
|
|
||||||
'用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const rulesPresetList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: '内容屏蔽规则',
|
|
||||||
description:
|
|
||||||
'用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: '内容置顶规则',
|
|
||||||
description:
|
|
||||||
'该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '内容加权规则',
|
|
||||||
description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: '内容分发规则',
|
|
||||||
description: '内容分发时，对某些内容需要固定在C端展示的位置。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: '违禁内容识别',
|
|
||||||
description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: '多语言文字符号识别',
|
|
||||||
description:
|
|
||||||
'精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
// Quality Inspection
|
|
||||||
Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
qualityInspectionList.map((_, index) => ({
|
|
||||||
...qualityInspectionList[index % qualityInspectionList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// the service
|
|
||||||
Mock.mock(new RegExp('/api/list/the-service'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
theServiceList.map((_, index) => ({
|
|
||||||
...theServiceList[index % theServiceList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// rules preset
|
|
||||||
Mock.mock(new RegExp('/api/list/rules-preset'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
rulesPresetList.map((_, index) => ({
|
|
||||||
...rulesPresetList[index % rulesPresetList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import qs from 'query-string';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { GetParams } from '@/types/global';
|
|
||||||
|
|
||||||
const { Random } = Mock;
|
|
||||||
|
|
||||||
const data = Mock.mock({
|
|
||||||
'list|55': [
|
|
||||||
{
|
|
||||||
'id|8': /[A-Z][a-z][-][0-9]/,
|
|
||||||
'number|2-3': /[0-9]/,
|
|
||||||
'name|4-8': /[A-Z]/,
|
|
||||||
'mode|1': ['FM', 'AM', 'LSB'],
|
|
||||||
'freq|1': ['438.500', '438.500', '438.500'],
|
|
||||||
'contentType|1': ['img', 'horizontalVideo', 'verticalVideo'],
|
|
||||||
'count|2-3': /[0-9]/,
|
|
||||||
'status|1': ['online', 'offline'],
|
|
||||||
'filterType|1': ['artificial', 'rules'],
|
|
||||||
'createdTime': Random.datetime(),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
Mock.mock(new RegExp('/api/list/policy'), (params: GetParams) => {
|
|
||||||
const { current = 1, pageSize = 10 } = qs.parseUrl(params.url).query;
|
|
||||||
const p = current as number;
|
|
||||||
const ps = pageSize as number;
|
|
||||||
return successResponseWrap({
|
|
||||||
list: data.list.slice((p - 1) * ps, p * ps),
|
|
||||||
total: 55,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<a-card v-if="loading" :bordered="false" hoverable>
|
|
||||||
<slot name="skeleton"></slot>
|
|
||||||
</a-card>
|
|
||||||
<a-card v-else :bordered="false" hoverable>
|
|
||||||
<a-space align="start">
|
|
||||||
<a-avatar
|
|
||||||
v-if="icon"
|
|
||||||
:size="24"
|
|
||||||
style="margin-right: 8px; background-color: #626aea"
|
|
||||||
>
|
|
||||||
<icon-filter />
|
|
||||||
</a-avatar>
|
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
|
||||||
<a-typography-text style="margin-right: 10px">
|
|
||||||
{{ title }}
|
|
||||||
</a-typography-text>
|
|
||||||
<template v-if="showTag">
|
|
||||||
<a-tag
|
|
||||||
v-if="open && isExpires === false"
|
|
||||||
size="small"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ tagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<a-tag v-else-if="isExpires" size="small" color="red">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check-circle-fill />
|
|
||||||
</template>
|
|
||||||
<span>{{ expiresTagText }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #description>
|
|
||||||
{{ description }}
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-space>
|
|
||||||
<template #actions>
|
|
||||||
<a-switch v-if="actionType === 'switch'" v-model="open" />
|
|
||||||
<a-space v-else-if="actionType === 'button'">
|
|
||||||
<template v-if="isExpires">
|
|
||||||
<a-button type="outline" @click="renew">
|
|
||||||
{{ expiresText }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-button v-if="open" @click="handleToggle">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button v-else-if="!open" type="outline" @click="handleToggle">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</a-space>
|
|
||||||
<div v-else>
|
|
||||||
<a-space>
|
|
||||||
<a-button @click="toggle(false)">
|
|
||||||
{{ closeTxt }}
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" @click="toggle(true)">
|
|
||||||
{{ openTxt }}
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToggle } from '@vueuse/core';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
actionType: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
defaultValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
openTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
closeTxt: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expiresText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showTag: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
tagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
expires: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
expiresTagText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [open, toggle] = useToggle(props.defaultValue);
|
|
||||||
const handleToggle = () => {
|
|
||||||
toggle();
|
|
||||||
};
|
|
||||||
const isExpires = ref(props.expires);
|
|
||||||
const renew = () => {
|
|
||||||
isExpires.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-card-body {
|
|
||||||
height: 100%;
|
|
||||||
.arco-space {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.arco-space-item {
|
|
||||||
height: 100%;
|
|
||||||
&:last-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.arco-card-meta {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
.arco-card-meta-content {
|
|
||||||
flex: 1;
|
|
||||||
.arco-card-meta-description {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-card-meta-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// To prevent the shaking
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
:deep(.arco-skeleton-line) {
|
|
||||||
&:last-child {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.content') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
>
|
|
||||||
<div class="card-wrap empty-wrap">
|
|
||||||
<a-card :bordered="false" hoverable>
|
|
||||||
<a-result :status="null" :title="$t('cardList.content.action')">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus style="font-size: 20px" />
|
|
||||||
</template>
|
|
||||||
</a-result>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
class="list-col"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:icon="item.icon"
|
|
||||||
:open-txt="$t('cardList.content.inspection')"
|
|
||||||
:close-txt="$t('cardList.content.delete')"
|
|
||||||
:show-tag="false"
|
|
||||||
>
|
|
||||||
<a-descriptions
|
|
||||||
style="margin-top: 16px"
|
|
||||||
:data="item.data"
|
|
||||||
layout="inline-horizontal"
|
|
||||||
:column="2"
|
|
||||||
/>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line
|
|
||||||
:widths="['50%', '50%', '100%', '40%']"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryInspectionList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(3).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryInspectionList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.card-wrap {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
border: 1px solid var(--color-neutral-3);
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
:deep(.arco-card-meta-description) {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
.arco-descriptions-item-label-inline {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
.arco-descriptions-item-value-inline {
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.empty-wrap {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
:deep(.arco-card) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
.arco-result-title {
|
|
||||||
color: rgb(var(--gray-6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.preset') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 140px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:tag-text="$t('cardList.preset.tag')"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryRulesPresetList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(6).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryRulesPresetList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list-wrap">
|
|
||||||
<a-typography-title class="block-title" :heading="6">
|
|
||||||
{{ $t('cardList.tab.title.service') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-row class="list-row" :gutter="24">
|
|
||||||
<a-col
|
|
||||||
v-for="item in renderData"
|
|
||||||
:key="item.id"
|
|
||||||
:xs="12"
|
|
||||||
:sm="12"
|
|
||||||
:md="12"
|
|
||||||
:lg="6"
|
|
||||||
:xl="6"
|
|
||||||
:xxl="6"
|
|
||||||
class="list-col"
|
|
||||||
style="min-height: 162px"
|
|
||||||
>
|
|
||||||
<CardWrap
|
|
||||||
:loading="loading"
|
|
||||||
:title="item.title"
|
|
||||||
:description="item.description"
|
|
||||||
:default-value="item.enable"
|
|
||||||
:action-type="item.actionType"
|
|
||||||
:expires="item.expires"
|
|
||||||
:open-txt="$t('cardList.service.open')"
|
|
||||||
:close-txt="$t('cardList.service.cancel')"
|
|
||||||
:expires-text="$t('cardList.service.renew')"
|
|
||||||
:tag-text="$t('cardList.service.tag')"
|
|
||||||
:expires-tag-text="$t('cardList.service.expiresTag')"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template #skeleton>
|
|
||||||
<a-skeleton :animation="true">
|
|
||||||
<a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
|
|
||||||
<a-skeleton-line :widths="['40%']" :rows="1" />
|
|
||||||
</a-skeleton>
|
|
||||||
</template>
|
|
||||||
</CardWrap>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { queryTheServiceList, ServiceRecord } from '@/api/list';
|
|
||||||
import useRequest from '@/hooks/request';
|
|
||||||
import CardWrap from './card-wrap.vue';
|
|
||||||
|
|
||||||
const defaultValue: ServiceRecord[] = new Array(4).fill({});
|
|
||||||
const { loading, response: renderData } = useRequest<ServiceRecord[]>(
|
|
||||||
queryTheServiceList,
|
|
||||||
defaultValue
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import Mock from 'mockjs';
|
|
||||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
|
||||||
import { ServiceRecord } from '@/api/list';
|
|
||||||
|
|
||||||
const qualityInspectionList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'quality',
|
|
||||||
title: '视频类-历史导入',
|
|
||||||
description: '2021-10-12 00:00:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-图片版权',
|
|
||||||
description: '2021-12-11 18:30:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'quality',
|
|
||||||
title: '图文类-高清图片',
|
|
||||||
description: '2021-10-15 08:10:00',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: '待质检数',
|
|
||||||
value: '120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '积压时长',
|
|
||||||
value: '60s',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '待抽检数',
|
|
||||||
value: '0',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const theServiceList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
icon: 'code',
|
|
||||||
title: '漏斗分析',
|
|
||||||
description:
|
|
||||||
'用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
icon: 'edit',
|
|
||||||
title: '用户分布',
|
|
||||||
description:
|
|
||||||
'快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
expires: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
icon: 'user',
|
|
||||||
title: '资源分发',
|
|
||||||
description:
|
|
||||||
'移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: 'user',
|
|
||||||
title: '用户画像分析',
|
|
||||||
description:
|
|
||||||
'用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'button',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const rulesPresetList: ServiceRecord[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: '内容屏蔽规则',
|
|
||||||
description:
|
|
||||||
'用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: '内容置顶规则',
|
|
||||||
description:
|
|
||||||
'该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '内容加权规则',
|
|
||||||
description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: '内容分发规则',
|
|
||||||
description: '内容分发时，对某些内容需要固定在C端展示的位置。',
|
|
||||||
enable: true,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: '违禁内容识别',
|
|
||||||
description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: '多语言文字符号识别',
|
|
||||||
description:
|
|
||||||
'精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
|
|
||||||
enable: false,
|
|
||||||
actionType: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
setupMock({
|
|
||||||
setup() {
|
|
||||||
// Quality Inspection
|
|
||||||
Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
qualityInspectionList.map((_, index) => ({
|
|
||||||
...qualityInspectionList[index % qualityInspectionList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// the service
|
|
||||||
Mock.mock(new RegExp('/api/list/the-service'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
theServiceList.map((_, index) => ({
|
|
||||||
...theServiceList[index % theServiceList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// rules preset
|
|
||||||
Mock.mock(new RegExp('/api/list/rules-preset'), () => {
|
|
||||||
return successResponseWrap(
|
|
||||||
rulesPresetList.map((_, index) => ({
|
|
||||||
...rulesPresetList[index % rulesPresetList.length],
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Add table
Reference in a new issue