0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 更改设备接入网关部分样式todo

This commit is contained in:
jackhoo_98 2023-03-20 15:10:05 +08:00
parent 878e36a4a7
commit 1e6504b5f3
7 changed files with 198 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/access-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

43
src/views/link/AccessConfig/components/AccessCard/index.vue
View File

@ -1,14 +1,19 @@
<template> <template>
<j-card <j-card
hoverable hoverable
:class="['card-render', checked === data.id ? 'checked' : '']" :class="[
'card-render',
'container',
checked === data.id ? 'checked' : '',
]"
@click="checkedChange(data.id)" @click="checkedChange(data.id)"
> >
<div class="title"> <div class="title">
<j-tooltip placement="topLeft" :title="data.name">{{ <Ellipsis style="width: calc(100% - 100px); margin-bottom: 24px">
data.name {{ data.name }}
}}</j-tooltip> </Ellipsis>
</div> </div>
<slot name="other"></slot> <slot name="other"></slot>
<div class="desc"> <div class="desc">
<j-tooltip placement="topLeft" :title="data.description">{{ <j-tooltip placement="topLeft" :title="data.description">{{
@ -46,16 +51,18 @@ const checkedChange = (id: string) => {
.card-render { .card-render {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: url('/public/images/access.png') no-repeat; // background: url('/public/images/access.png') no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
height: 120px; height: 140px;
background: #fafafa;
border: 1px solid #e6e6e6;
.title { .title {
width: calc(100% - 88px); font-style: normal;
overflow: hidden;
font-weight: 800; font-weight: 800;
white-space: nowrap; font-size: 16px;
text-overflow: ellipsis; line-height: 22px;
color: rgba(0, 0, 0, 0.85);
opacity: 0.85;
} }
.desc { .desc {
@ -78,8 +85,7 @@ const checkedChange = (id: string) => {
width: 44px; width: 44px;
height: 44px; height: 44px;
color: #fff; color: #fff;
background-color: red; background-color: @primary-color;
background-color: #2f54eb;
transform: rotate(-45deg); transform: rotate(-45deg);
> div { > div {
@ -92,11 +98,16 @@ const checkedChange = (id: string) => {
} }
&.checked { &.checked {
position: relative; position: relative;
color: #2f54eb; color: @primary-color;
border-color: #2f54eb; border-color: @primary-color;
z-index: 0;
.checked-icon { .checked-icon {
display: block; display: block;
} }
} }
} }
.container {
background: url('/public/images/access-icon.png') no-repeat;
background-position: bottom right;
}
</style> </style>

77
src/views/link/AccessConfig/components/Network/index.vue
View File

@ -26,11 +26,7 @@
</PermissionButton> </PermissionButton>
</div> </div>
<j-scrollbar height="480"> <j-scrollbar height="480">
<j-row <j-row :gutter="[24, 24]" v-if="networkList.length > 0">
:gutter="[24, 24]"
v-if="networkList.length > 0"
style="margin-right: 10px"
>
<j-col <j-col
:span="8" :span="8"
v-for="item in networkList" v-for="item in networkList"
@ -62,7 +58,7 @@
class="item" class="item"
> >
<j-badge <j-badge
:color="getColor(i)" :status="getColor(i)"
/>{{ i.address }} />{{ i.address }}
</div> </div>
</div> </div>
@ -74,7 +70,7 @@
class="item" class="item"
> >
<j-badge <j-badge
:color="getColor(i)" :status="getColor(i)"
:text="i.address" :text="i.address"
/> />
<span <span
@ -115,12 +111,8 @@
新增 新增
</PermissionButton> </PermissionButton>
</div> </div>
<j-scrollbar height="480"> <j-scrollbar height="480" style="padding-right: 8px">
<j-row <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
:gutter="[24, 24]"
v-if="procotolList.length > 0"
style="margin-right: 10px"
>
<j-col <j-col
:span="8" :span="8"
v-for="item in procotolList" v-for="item in procotolList"
@ -177,24 +169,20 @@
</j-form> </j-form>
</j-col> </j-col>
<j-col :span="12"> <j-col :span="12">
<j-scrollbar height="600"> <j-scrollbar height="580">
<div class="config-right"> <div class="doc">
<div class="config-right-item"> <div>
<div class="config-right-item-title"> <h1>接入方式</h1>
接入方式 <p>
</div>
<div class="config-right-item-context">
{{ provider.name }} {{ provider.name }}
</div> </p>
<div class="config-right-item-context"> <p>
{{ provider.description }} {{ provider.description }}
</div> </p>
</div> </div>
<div class="config-right-item"> <div>
<div class="config-right-item-title"> <h1>消息协议</h1>
消息协议 <p>
</div>
<div class="config-right-item-context">
{{ {{
procotolList.find( procotolList.find(
(i: any) => (i: any) =>
@ -202,41 +190,32 @@
procotolCurrent, procotolCurrent,
).name ).name
}} }}
</div> </p>
<div <p v-if="config.document">
class="config-right-item-context"
v-if="config.document"
>
<Markdown <Markdown
:source="config.document" :source="config.document"
/> />
</div> </p>
</div> </div>
<div <div v-if="getNetworkCurrent()">
class="config-right-item" <h1>网络组件</h1>
v-if="getNetworkCurrent()" <p
>
<div class="config-right-item-title">
网络组件
</div>
<div
v-for="i in getNetworkCurrentData()" v-for="i in getNetworkCurrentData()"
:key="i.address" :key="i.address"
> >
<j-badge <j-badge
:color="getColor(i)" :status="getColor(i)"
:text="i.address" :text="i.address"
/> />
</div> </p>
</div> </div>
<div <div
class="config-right-item"
v-if=" v-if="
config.routes && config.routes &&
config.routes.length > 0 config.routes.length > 0
" "
> >
<div class="config-right-item-title"> <h1>
{{ {{
data.provider === data.provider ===
'mqtt-server-gateway' || 'mqtt-server-gateway' ||
@ -245,8 +224,8 @@
? 'topic' ? 'topic'
: 'URL信息' : 'URL信息'
}} }}
</div> </h1>
<j-scrollbar height="200"> <j-scrollbar height="400">
<j-table <j-table
:pagination="false" :pagination="false"
:rowKey="generateUUID()" :rowKey="generateUUID()"
@ -463,7 +442,7 @@ const getNetworkCurrentData = () =>
? networkList.value.find((i: any) => i.id === networkCurrent).addresses ? networkList.value.find((i: any) => i.id === networkCurrent).addresses
: []; : [];
const getColor = (i: any) => (i.health === -1 ? 'red' : 'green'); const getColor = (i: any) => (i.health === -1 ? 'error' : 'processing');
const getStream = (record: any) => { const getStream = (record: any) => {
console.log(222, record); console.log(222, record);

83
src/views/link/AccessConfig/components/Provider/index.vue
View File

@ -5,6 +5,18 @@
<j-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<j-col :span="12" v-for="item in items.list" :key="item.id"> <j-col :span="12" v-for="item in items.list" :key="item.id">
<div class="provider"> <div class="provider">
<div
class="card-content-bg1"
:style="{
background: getBackgroundColor(),
}"
></div>
<div
class="card-content-bg2"
:style="{
background: getBackgroundColor(),
}"
></div>
<div class="box"> <div class="box">
<div class="left"> <div class="left">
<div class="images"> <div class="images">
@ -47,6 +59,14 @@ const props = defineProps({
const emit = defineEmits(['onClick']); const emit = defineEmits(['onClick']);
const getBackgroundColor = () => {
return `linear-gradient(
188.4deg,
rgba(9, 46, 231, 0.03) 22.94%,
rgba(9, 46, 231, 0) 94.62%
)`;
};
const click = (value: object) => { const click = (value: object) => {
emit('onClick', value); emit('onClick', value);
}; };
@ -61,10 +81,11 @@ const click = (value: object) => {
.provider { .provider {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 20px; padding: 24px;
background: url('/public/images/access/background.png') no-repeat; // background: url('/public/images/access/background.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
overflow: hidden;
&::before { &::before {
position: absolute; position: absolute;
@ -84,6 +105,33 @@ const click = (value: object) => {
box-shadow: 0 0 24px rgba(#000, 0.1); box-shadow: 0 0 24px rgba(#000, 0.1);
} }
} }
.card-content-bg1 {
position: absolute;
right: -5%;
height: 100%;
width: 44.65%;
top: 0;
background: linear-gradient(
188.4deg,
rgba(229, 0, 18, 0.03) 22.94%,
rgba(229, 0, 18, 0) 94.62%
);
transform: skewX(-15deg);
}
.card-content-bg2 {
position: absolute;
right: -5%;
height: 100%;
width: calc(44.65% + 34px);
top: 0;
background: linear-gradient(
188.4deg,
rgba(229, 0, 18, 0.03) 22.94%,
rgba(229, 0, 18, 0) 94.62%
);
transform: skewX(-15deg);
}
.box { .box {
display: flex; display: flex;
@ -92,31 +140,40 @@ const click = (value: object) => {
width: 100%; width: 100%;
.left { .left {
display: flex; display: flex;
width: calc(100% - 70px); width: calc(100% - 100px);
.images { .images {
width: 64px; width: 88px;
height: 64px; height: 88px;
img { img {
width: 100%; width: 88px;
height: 88px;
} }
} }
.context { .context {
width: calc(100% - 84px); width: calc(100% - 88px);
margin: 10px; margin: 8px;
margin-left: 24px;
.title { .title {
font-weight: 600; font-style: normal;
font-weight: 800;
font-size: 18px;
line-height: 22px;
color: rgba(0, 0, 0, 0.85);
opacity: 0.85;
} }
.desc { .desc {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 24px;
overflow: hidden; font-style: normal;
color: rgba(0, 0, 0, 0.55);
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 12px;
line-height: 20px;
color: #666666;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

100
src/views/link/AccessConfig/index.vue
View File

@ -51,15 +51,12 @@
<Ellipsis <Ellipsis
style=" style="
width: calc(100% - 100px); width: calc(100% - 100px);
margin-bottom: 10px; margin-bottom: 20px;
color: #2f54eb; color: #2f54eb;
" "
> >
<span <span
style=" class="card-title"
font-size: 16px;
font-weight: 600;
"
@click.stop="handlEye(slotProps.id)" @click.stop="handlEye(slotProps.id)"
> >
{{ slotProps.name }} {{ slotProps.name }}
@ -71,11 +68,17 @@
v-if="slotProps.channelInfo" v-if="slotProps.channelInfo"
class="card-item-content-text" class="card-item-content-text"
> >
<div class="card-item-content-text"> <div
class="card-item-content-text-title"
>
{{ slotProps.channelInfo.name }} {{ slotProps.channelInfo.name }}
</div> </div>
<div <Ellipsis
class="card-item-content-text" style="
width: calc(100% - 10px);
display: flex;
margin-top: 4px;
"
v-if=" v-if="
slotProps.channelInfo.addresses slotProps.channelInfo.addresses
" "
@ -83,53 +86,51 @@
<j-badge <j-badge
:status="getStatus(slotProps)" :status="getStatus(slotProps)"
/> />
<j-tooltip> <span>
<template #title>{{
slotProps.channelInfo
.addresses[0].address
}}</template>
{{ {{
slotProps.channelInfo slotProps.channelInfo
.addresses[0].address .addresses[0].address
}} }}
</j-tooltip> </span>
</div> </Ellipsis>
</j-col> </j-col>
<j-col <j-col
:span="12" :span="12"
v-if="slotProps.protocolDetail" v-if="slotProps.protocolDetail"
class="card-item-content-text"
> >
<div class="card-item-content-text"> <div
class="card-item-content-text-title"
>
协议 协议
</div> </div>
<div class="card-item-content-text"> <Ellipsis
<j-tooltip> style="
<template #title>{{ width: calc(100% - 10px);
slotProps.protocolDetail display: flex;
.name margin-top: 4px;
}}</template> "
>
<span>
{{ {{
slotProps.protocolDetail slotProps.protocolDetail
.name .name
}} }}
</j-tooltip> </span>
</div> </Ellipsis>
</j-col> </j-col>
</j-row> </j-row>
<j-row> <j-row>
<j-col :span="24"> <j-col
<div class="card-item-content-text"> :span="24"
<j-tooltip> class="card-item-content-description"
<template #title> >
{{ <j-tooltip>
getDescription( <template #title>
slotProps,
)
}}
</template>
{{ getDescription(slotProps) }} {{ getDescription(slotProps) }}
</j-tooltip> </template>
</div> {{ getDescription(slotProps) }}
</j-tooltip>
</j-col> </j-col>
</j-row> </j-row>
</div> </div>
@ -207,8 +208,8 @@ const columns = [
search: { search: {
type: 'select', type: 'select',
options: async () => { options: async () => {
const res = await getProviders(); const res: any = await getProviders();
return (res?.result || []).map((item) => ({ return (res?.result || [])?.map((item: any) => ({
lable: item.name, lable: item.name,
value: item.id, value: item.id,
})); }));
@ -339,7 +340,7 @@ const getDescription = (slotProps: Record<string, any>) =>
)?.description; )?.description;
const getStatus = (slotProps: Record<string, any>) => const getStatus = (slotProps: Record<string, any>) =>
slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'success'; slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'processing';
/** /**
* 搜索 * 搜索
@ -358,12 +359,29 @@ const handleSearch = (e: any) => {
.card-item-content { .card-item-content {
min-height: 100px; min-height: 100px;
.card-title {
font-size: 18px;
font-weight: 800;
line-height: 22px;
}
.card-item-content-box { .card-item-content-box {
min-height: 50px; min-height: 50px;
} }
.card-item-content-text {
color: rgba(0, 0, 0, 0.75); .card-item-content-text-title {
font-style: normal;
font-weight: 400;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.75);
opacity: 0.75;
}
.card-item-content-description {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
color: #666666;
overflow: hidden; //超出的文本隐藏 overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示 text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行 white-space: nowrap; //溢出不换行

19
src/views/link/Type/index.vue
View File

@ -36,7 +36,7 @@
:status="slotProps.state.value" :status="slotProps.state.value"
:statusText="slotProps.state.text" :statusText="slotProps.state.text"
:statusNames="{ :statusNames="{
enabled: 'success', enabled: 'processing',
disabled: 'error', disabled: 'error',
}" }"
> >
@ -143,10 +143,14 @@
</j-space> </j-space>
</template> </template>
<template #state="slotProps"> <template #state="slotProps">
<j-badge <BadgeStatus
:text="slotProps.state.text" :text="slotProps.state.text"
:status="statusMap.get(slotProps.state.value)" :status="slotProps.state.value"
/> :statusNames="{
enabled: 'processing',
disabled: 'error',
}"
></BadgeStatus>
</template> </template>
<template #shareCluster="slotProps"> <template #shareCluster="slotProps">
{{ {{
@ -171,15 +175,16 @@ import { getImage } from '@/utils/comm';
import { supports, query, remove, start, shutdown } from '@/api/link/type'; import { supports, query, remove, start, shutdown } from '@/api/link/type';
import { onlyMessage } from '@/utils/comm'; import { onlyMessage } from '@/utils/comm';
import { useMenuStore } from 'store/menu'; import { useMenuStore } from 'store/menu';
import BadgeStatus from '@/components/BadgeStatus/index.vue';
const menuStory = useMenuStore(); const menuStory = useMenuStore();
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({}); const params = ref<Record<string, any>>({});
const options = ref([]); const options = ref([]);
const statusMap = new Map(); // const statusMap = new Map();
statusMap.set('enabled', 'success'); // statusMap.set('enabled', 'processing');
statusMap.set('disabled', 'error'); // statusMap.set('disabled', 'error');
const columns = [ const columns = [
{ {

16
yarn.lock
View File

@ -3698,26 +3698,14 @@ jetlinks-store@^0.0.3:
resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz" resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz"
integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q== integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q==
jetlinks-ui-components@^1.0.4:
version "1.0.4"
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#cd080b2d8320c7a03ed20f4c4c22e9a5c920a3c8"
integrity sha512-8xzDFH6jSGNrkbCMb+/FL/g9vB0c2GdsDq6QPUzgKFwzPiS+cPbpSxL0RNHez9MF7/NSSuY8wL4VaujiVXTpfg==
dependencies:
"@vueuse/core" "^9.12.0"
ant-design-vue "^3.2.15"
colorpicker-v3 "^2.10.2"
lodash-es "^4.17.21"
monaco-editor "^0.35.0"
jetlinks-ui-components@^1.0.5: jetlinks-ui-components@^1.0.5:
version "1.0.5" version "1.0.5"
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#0c4999d28c96c11ce266c5c9706cc895010450dc" resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#682711e0f69c141fff2c256db61a060c82539611"
integrity sha512-buCf4mWJ8cUyn+12nRRLIr25MwG60nxqWH4pZidKy/npNKt5WQXLV8PmHmf04z0xpJUnW5yY3C7QBkYoAkSgVw== integrity sha512-rQxD/YlE+XSAG7BWIcFTtKrCQJXk5o+TUgejyuUT/baBThJB6xYt1k2dQEdXyiwpukYen5FzaoLpelSD9SUegw==
dependencies: dependencies:
"@vueuse/core" "^9.12.0" "@vueuse/core" "^9.12.0"
ant-design-vue "^3.2.15" ant-design-vue "^3.2.15"
colorpicker-v3 "^2.10.2" colorpicker-v3 "^2.10.2"
jetlinks-ui-components "^1.0.4"
lodash-es "^4.17.21" lodash-es "^4.17.21"
monaco-editor "^0.35.0" monaco-editor "^0.35.0"