fix: 更新AIcon

This commit is contained in:
100011797 2023-01-16 15:19:41 +08:00
parent 79524793af
commit e3ddbbd3c4
15 changed files with 557 additions and 16 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -21,4 +21,34 @@ export const saveMetadata = (id: string, data: string) => server.put(`/device/in
* @param id ID
* @returns
*/
export const detail = (id: string) => server.get<DeviceInstance>(`/device-instance/${id}/detail`)
export const detail = (id: string) => server.get<DeviceInstance>(`/device-instance/${id}/detail`)
/**
*
* @param data
* @returns
*/
export const query = (data?: Record<string, any>) => server.post('/device-instance/_query', data)
/**
*
* @param id ID
* @returns
*/
export const _delete = (id: string) => server.remove(`/device-instance/${id}`)
/**
*
* @param id ID
* @param data
* @returns
*/
export const _deploy = (id: string) => server.post(`/device-instance/${id}/deploy`)
/**
*
* @param id ID
* @param data
* @returns
*/
export const _undeploy = (id: string) => server.post(`/device-instance/${id}/undeploy`)

View File

View File

@ -0,0 +1,8 @@
import server from '@/utils/request'
/**
*
* @param data
* @returns
*/
export const query = (data: Record<string, any>) => server.post('/dueros/product/_query', data)

View File

@ -1,7 +0,0 @@
import { createFromIconfontCN } from '@ant-design/icons-vue';
const AliIcon = createFromIconfontCN({
scriptUrl: '/icons/iconfont.js', // 在 iconfont.cn 上生成
});
export default AliIcon

View File

@ -0,0 +1,32 @@
import { createFromIconfontCN } from '@ant-design/icons-vue';
import * as $Icon from '@ant-design/icons-vue';
import { createVNode } from 'vue';
const AliIcon = createFromIconfontCN({
scriptUrl: '/icons/iconfont.js', // 在 iconfont.cn 上生成
});
const AntdIcon = (props: {type: string}) => {
const {type} = props;
let antIcon: {[key: string]: any} = $Icon
return createVNode(antIcon[type])
}
const iconKeys = [
'EyeOutlined',
'EditOutlined',
'PlusOutlined',
'DeleteOutlined',
'CheckCircleOutlined',
'StopOutlined',
'CheckOutlined',
'CloseOutlined',
'DownOutlined'
]
const Icon = (props: {type: string}) => {
if(iconKeys.includes(props.type)) return <AntdIcon {...props} />
return <AliIcon {...props} />
}
export default Icon

View File

@ -6,8 +6,7 @@
</template>
<script setup lang="ts">
import { StatusColorEnum } from '@/utils/consts.ts';
// import { StatusColorEnum } from '@/utils/consts.ts';
const props = defineProps({
text: {
type: String,
@ -15,10 +14,10 @@ const props = defineProps({
status: {
type: String || Number,
default: 'default',
validator: (value) => {
//
return Object.keys(StatusColorEnum).includes(value);
},
// validator: (value) => {
// //
// return Object.keys(StatusColorEnum).includes(value);
// },
},
/**
* 自定义status值颜色

View File

@ -108,7 +108,6 @@ const props = defineProps({
type: Boolean,
default: true,
},
statusText: {
type: String,
default: '正常',

View File

@ -75,6 +75,7 @@ const JTable = defineComponent<JTableProps>({
],
emits: [
'modelChange', // 切换卡片和表格
'reload' // 刷新数据
],
props: {
request: {
@ -139,7 +140,7 @@ const JTable = defineComponent<JTableProps>({
}
}
} as any,
setup(props: JTableProps ,{ slots, emit }){
setup(props: JTableProps ,{ slots, emit, expose }){
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
const column = ref<number>(props.gridColumn || 4);
@ -216,6 +217,23 @@ const JTable = defineComponent<JTableProps>({
onUnmounted(() => {
window.onresize = null
})
/**
*
* @param _params
*/
const reload = (_params?: Record<string, any>) => {
handleSearch({
..._params,
pageSize: 12,
pageIndex: 0
})
}
/**
*
*/
expose({ reload })
return () => <Spin spinning={loading.value}>
<div class={styles["jtable-body"]}>

View File

@ -66,6 +66,11 @@ export default [
},
// end: 测试用, 可删除
// 设备管理
{
path: '/device/Instance',
component: () => import('@/views/device/Instance/index.vue')
},
// link 运维管理
{
path: '/link/log',
@ -102,4 +107,13 @@ export default [
path: '/iot-card/home',
component: () => import('@/views/iot-card/Home/index.vue')
},
// 北向输出
{
path: '/northbound/DuerOS',
component: () => import('@/views/northbound/DuerOS/index.vue')
},
{
path: '/northbound/AliCloud',
component: () => import('@/views/northbound/AliCloud/index.vue')
},
]

View File

@ -0,0 +1,260 @@
<template>
<JTable ref="instanceRef" :columns="columns" :request="query" :defaultParams="{sorts: [{name: 'createTime', order: 'desc'}]}" :params="{pageIndex: 0, pageSize: 12}">
<template #headerTitle>
<a-space>
<a-button type="primary" @click="handleAdd">新增</a-button>
<a-dropdown>
<a-button>批量操作 <AIcon type="DownOutlined" /></a-button>
<template #overlay>
<a-menu>
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">3rd menu item</a>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-space>
</template>
<template #card="slotProps">
<CardBox
:value="slotProps"
@click="handleView"
:actions="getActions(slotProps, 'card')"
v-bind="slotProps"
:status="slotProps.state.value"
:statusText="slotProps.state.text"
:statusNames="{
online: 'success',
offline: 'error',
notActive: 'warning',
}"
>
<template #img>
<slot name="img">
<img :src="getImage('/device/instance/device-card.png')" />
</slot>
</template>
<template #content>
<h3>{{ slotProps.name }}</h3>
<a-row>
<a-col :span="12">
<div class="card-item-content-text">设备类型</div>
<div>{{slotProps.deviceType.text}}</div>
</a-col>
<a-col :span="12">
<div class="card-item-content-text">产品名称</div>
<div>{{slotProps.productName}}</div>
</a-col>
</a-row>
</template>
<template #actions="item">
<a-tooltip v-bind="item.tooltip" :title="item.disabled && item.tooltip.title">
<a-popconfirm
v-if="item.popConfirm"
v-bind="item.popConfirm"
:disabled="item.disabled"
>
<a-button :disabled="item.disabled">
<AIcon type="DeleteOutlined" v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</a-popconfirm>
<template v-else>
<a-button :disabled="item.disabled" @click="item.onClick">
<AIcon type="DeleteOutlined" v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</template>
</a-tooltip>
</template>
</CardBox>
</template>
<template #state="slotProps">
<a-badge :text="slotProps.state.text" :status="statusMap.get(slotProps.state.value)" />
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
>
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm" :disabled="i.disabled">
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link"
v-else
@click="i.onClick && i.onClick(slotProps)"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
</a-space>
</template>
</JTable>
</template>
<script setup lang="ts">
import { query, _delete, _deploy, _undeploy } from '@/api/device/instance'
import type { ActionsType } from '@/components/Table/index.vue'
import { getImage } from '@/utils/comm';
import { message } from "ant-design-vue";
const instanceRef = ref<Record<string, any>>({});
const statusMap = new Map();
statusMap.set('online', 'processing');
statusMap.set('offline', 'error');
statusMap.set('notActive', 'warning');
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id'
},
{
title: '设备名称',
dataIndex: 'name',
key: 'name',
},
{
title: '产品名称',
dataIndex: 'productName',
key: 'productName',
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
scopedSlots: true
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
scopedSlots: true
},
{
title: '说明',
dataIndex: 'describe',
key: 'describe'
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true
}
]
const handleAdd = () => {
message.warn('123')
}
const handleView = (dt: any) => {
}
const getActions = (data: Partial<Record<string, any>>, type: 'card' | 'table'): ActionsType[] => {
if(!data) return []
const actions = [
{
key: 'view',
text: "查看",
tooltip: {
title: '查看'
},
icon: 'EyeOutlined',
onClick: () => {
handleView(data)
}
},
{
key: 'edit',
text: "编辑",
tooltip: {
title: '编辑'
},
icon: 'EditOutlined',
onClick: () => {
message.warn('edit')
}
},
{
key: 'action',
text: data.state.value !== 'notActive' ? "禁用" : "启用",
tooltip: {
title: data.state.value !== 'notActive' ? "禁用" : "启用",
},
icon: data.state.value !== 'notActive' ? 'StopOutlined' : 'CheckCircleOutlined',
popConfirm: {
title: `确认${data.state.value !== 'notActive' ? "禁用" : "启用"}?`,
onConfirm: async () => {
let response = undefined
if(data.state.value !== 'notActive') {
response = await _undeploy(data.id)
} else {
response = await _deploy(data.id)
}
if(response && response.status === 200) {
message.success('操作成功!')
instanceRef.value?.reload()
} else {
message.error('操作失败!')
}
}
}
},
{
key: 'delete',
text: "删除",
disabled: data.state.value !== 'notActive',
tooltip: {
title: data.state.value !== 'notActive' ? '已启用的设备不能删除' : '删除'
},
popConfirm: {
title: '确认删除?',
onConfirm: async () => {
const resp = await _delete(data.id)
if(resp.status === 200) {
message.success('操作成功!')
instanceRef.value?.reload()
} else {
message.error('操作失败!')
}
}
},
icon: 'DeleteOutlined'
}
]
if(type === 'card') return actions.filter((i: ActionsType) => i.key !== 'view')
return actions
}
</script>

View File

@ -0,0 +1,7 @@
<template>
<div>123</div>
</template>
<script setup>
</script>

View File

@ -0,0 +1,154 @@
<template>
<div>
<JTable
:columns="columns"
:request="request"
>
<template #headerTitle>
<a-button type="primary" @click="add">新增</a-button>
</template>
<template #card="slotProps">
<CardBox
:value="slotProps"
@click="handleClick"
:actions="getActions(slotProps)"
v-bind="slotProps"
:status="slotProps.state ? 'success' : 'error'"
>
<template #img>
<slot name="img">
<img :src="getImage('/device-product.png')" />
</slot>
</template>
<template #content>
<h3>{{slotProps.name}}</h3>
<a-row>
<a-col :span="12">
<div class="card-item-content-text">
设备类型
</div>
<div>直连设备</div>
</a-col>
</a-row>
</template>
<template #actions="item">
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</a-popconfirm>
<template v-else>
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</template>
</template>
</CardBox>
</template>
<template #id="slotProps">
<a>{{slotProps.id}}</a>
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip v-for="i in getActions(slotProps)" :key="i.key" v-bind="i.tooltip">
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
<a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
</a-popconfirm>
<a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
<a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
</a-button>
</a-tooltip>
</a-space>
</template>
</JTable>
</div>
</template>
<script setup lang="ts">
import { query } from '@/api/northbound/dueros'
import type { ActionsType } from '@/components/Table/index.vue'
import { getImage } from '@/utils/comm';
import { DeleteOutlined } from '@ant-design/icons-vue'
import { message } from "ant-design-vue";
const request = (data: any) => query({})
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: 'ID',
dataIndex: 'id',
key: 'id',
scopedSlots: true
},
{
title: '分类',
dataIndex: 'classifiedName',
key: 'classifiedName',
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true
}
]
const handleClick = (dt: any) => {
}
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
if(!data){
return []
}
return [
{
key: 'edit',
text: "编辑",
tooltip: {
title: '编辑'
},
icon: 'icon-rizhifuwu'
},
{
key: 'import',
text: "导入",
tooltip: {
title: '导入'
},
disabled: true,
icon: 'icon-xiazai'
},
{
key: 'delete',
text: "删除",
tooltip: {
title: !!data?.state ? '正常的产品不能删除' : '删除'
},
popConfirm: {
title: '确认删除?'
},
icon: 'icon-huishouzhan'
}
]
}
const add = () => {
message.warn('123')
}
</script>

View File

@ -796,6 +796,11 @@
dependencies:
"@types/webxr" "*"
"@types/web-bluetooth@^0.0.16":
version "0.0.16"
resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
"@types/webxr@*":
version "0.5.0"
resolved "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz"
@ -1003,6 +1008,28 @@
three "0.143.0"
uppercamelcase "^1.1.0"
"@vueuse/core@^9.10.0":
version "9.10.0"
resolved "https://registry.npmmirror.com/@vueuse/core/-/core-9.10.0.tgz#2ef6e55ca773c5b2db1e3f13b8292af96dd32214"
integrity sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==
dependencies:
"@types/web-bluetooth" "^0.0.16"
"@vueuse/metadata" "9.10.0"
"@vueuse/shared" "9.10.0"
vue-demi "*"
"@vueuse/metadata@9.10.0":
version "9.10.0"
resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.10.0.tgz#1a5eb94ca755bd8e666505f47da7d88969cffdc7"
integrity sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw==
"@vueuse/shared@9.10.0":
version "9.10.0"
resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.10.0.tgz#49874a0f9955d28689b3133de660367c63dbc030"
integrity sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==
dependencies:
vue-demi "*"
JSONStream@^1.0.4:
version "1.3.5"
resolved "https://registry.npmmirror.com/JSONStream/-/JSONStream-1.3.5.tgz"