akira
/
Cloud-API-Demo-Web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:ui样式修改

pull/19/head
freshman-white 2 years ago
parent
14a3980521
commit
0ab924f3ae
9 changed files with 78 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/icons/search-icon.svg
  2. 21
      src/components/MediaPanel.vue
  3. 22
      src/components/task/TaskPanel.vue
  4. 36
      src/pages/page-web/projects/Firmwares.vue
  5. 22
      src/pages/page-web/projects/devices.vue
  6. 14
      src/pages/page-web/projects/members.vue
  7. 12
      src/pages/page-web/projects/task.vue
  8. 5
      src/styles/flex.style.scss
  9. 6
      src/types/device-firmware.ts

1
src/assets/icons/search-icon.svg
Unescape View File

@ -0,0 +1 @@ @@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694421109878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1968" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" p-id="1969" fill="#8a8a8a"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 820 B

21
src/components/MediaPanel.vue
Unescape View File

@ -1,10 +1,10 @@ @@ -1,10 +1,10 @@
<template>
<div class="header" ref="headerRef">
<a-button type="primary" large class="btn-primary" @click='openFileDialog'>创建文件夹</a-button>
<a-button type="primary" large class="btn-primary btn-primary" @click='openFileDialog'>创建文件夹</a-button>
<div v-show="state.selectedRowIds.length" class="other-btn">
<a-button large class="btn-primary">压缩并下载</a-button>
<a-button large class="btn-primary" @click="move()">移动</a-button>
<a-button large class="btn-primary" @click="deleteRow()">删除</a-button>
<a-button large class="btn-primary btn-primary">压缩并下载</a-button>
<a-button large class="btn-primary btn-primary" @click="move()">移动</a-button>
<a-button large class="btn-primary btn-primary" @click="deleteRow()">删除</a-button>
</div>
<div class="search-content">
@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
<a-form-item name="name">
<a-input v-model:value="searchParam.name" placeholder="按文件名称搜索">
<template #addonAfter>
<ZoomInOutlined />
<img src="../assets/icons/search-icon.svg" class="search-icon"/>
</template>
</a-input>
</a-form-item>
@ -404,6 +404,17 @@ const getHeight = () => { @@ -404,6 +404,17 @@ const getHeight = () => {
cursor: pointer;
}
}
::v-deep {
.ant-input{
border-right:none
}
.ant-input-group-addon{
background-color: #fff;
}
}
.search-icon{
width:16px;
}
.video-img{
width:25px;
height: 25px;

22
src/components/task/TaskPanel.vue
Unescape View File

@ -1,5 +1,11 @@ @@ -1,5 +1,11 @@
<template>
<div class="header">计划库</div>
<div class="header">
<template v-if="taskRoute">
<router-link :to="{ name: ERouterName.CREATE_PLAN}">
<a-button type="primary" class="bth-common">新建计划</a-button>
</router-link>
</template>
</div>
<div class="plan-panel-wrapper">
<a-table class="plan-table" :columns="columns" :data-source="plansData.data" row-key="job_id"
:pagination="paginationProp" :scroll="{ x: true, y: `calc(100vh - 196px)`}" @change="refreshData">
@ -97,14 +103,16 @@ @@ -97,14 +103,16 @@
</template>
<script setup lang="ts">
import { reactive, ref } from '@vue/reactivity'
import { reactive, ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ERouterName, ELocalStorageKey } from '/@/types/enums'
import { message } from 'ant-design-vue'
import { TableState } from 'ant-design-vue/lib/table/interface'
import { onMounted } from 'vue'
import { IPage } from '/@/api/http/type'
import { deleteTask, updateTaskStatus, UpdateTaskStatus, getWaylineJobs, Task, uploadMediaFileNow } from '/@/api/wayline'
import { useMyStore } from '/@/store'
import { ELocalStorageKey } from '/@/types/enums'
import { useFormatTask } from './use-format-task'
import { TaskStatus, TaskProgressInfo, TaskProgressStatus, TaskProgressWsStatusMap, MediaStatus, MediaStatusProgressInfo, TaskMediaHighestPriorityProgressInfo } from '/@/types/task'
import { useTaskWsEvent } from './use-task-ws-event'
@ -112,6 +120,10 @@ import { getErrorMessage } from '/@/utils/error-code/index' @@ -112,6 +120,10 @@ import { getErrorMessage } from '/@/utils/error-code/index'
import { commonColor } from '/@/utils/color'
import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
const route = useRoute()
const taskRoute = computed(() => {
return route.name === ERouterName.TASK
})
const store = useMyStore()
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
@ -329,6 +341,7 @@ async function onUploadMediaFileNow (jobId: string) { @@ -329,6 +341,7 @@ async function onUploadMediaFileNow (jobId: string) {
width: 100%;
padding: 16px;
.plan-table {
padding: 16px;
background: #fff;
margin-top: 10px;
width:100%;
@ -356,7 +369,6 @@ async function onUploadMediaFileNow (jobId: string) { @@ -356,7 +369,6 @@ async function onUploadMediaFileNow (jobId: string) {
.header {
width: 100%;
height: 60px;
background: #fff;
padding: 16px;
font-size: 20px;
font-weight: bold;

36
src/pages/page-web/projects/Firmwares.vue
Unescape View File

@ -3,23 +3,23 @@ @@ -3,23 +3,23 @@
<div class="ml20 mt20 mr20 flex-row flex-align-center flex-justify-between">
<div class="flex-row">
<a-button type="primary" @click="sVisible = true">
Click to Upload
上传
</a-button>
<a-modal :visible="sVisible"
title="Import Firmware File"
title="导入固件文件"
:closable="false"
@cancel="onCancel"
@ok="uploadFile"
centered>
<a-form :rules="rules" ref="formRef" :model="uploadParam" :label-col="{ span: 6 }">
<a-form-item name="status" label="Avaliable" required>
<a-form-item name="status" label="是否可用" required>
<a-switch v-model:checked="uploadParam.status" />
</a-form-item>
<a-form-item name="device_name" label="Device Name" required>
<a-form-item name="device_name" label="设备型号" required>
<a-select
style="width: 220px"
mode="multiple"
placeholder="can choose multiple"
placeholder="请选择"
v-model:value="uploadParam.device_name">
<a-select-option
v-for="k in DeviceNameEnum"
@ -30,10 +30,10 @@ @@ -30,10 +30,10 @@
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="release_note" label="Release Note" required>
<a-form-item name="release_note" label="发布说明" required>
<a-textarea v-model:value="uploadParam.release_note" showCount :maxlength="300" />
</a-form-item>
<a-form-item label="File" required>
<a-form-item label="文件" required>
<a-upload
:multiple="false"
:before-upload="beforeUpload"
@ -43,7 +43,7 @@ @@ -43,7 +43,7 @@
>
<a-button type="primary">
<UploadOutlined />
Import Firmware File
导入固件文件
</a-button>
</a-upload>
</a-form-item>
@ -83,7 +83,7 @@ @@ -83,7 +83,7 @@
<a-input-search
:enter-button="true"
v-model:value="param.product_version"
placeholder="input search verison"
placeholder="固件版本搜索"
style="width: 250px"
@search="getAllFirmwares(pageParam)"/>
</div>
@ -130,14 +130,14 @@ interface FirmwareData { @@ -130,14 +130,14 @@ interface FirmwareData {
firmware: Firmware[]
}
const columns = [
{ title: 'Model', dataIndex: 'device_name', width: 120, ellipsis: true, className: 'titleStyle', slots: { customRender: 'device_name' } },
{ title: 'File Name', dataIndex: 'file_name', width: 220, ellipsis: true, className: 'titleStyle', slots: { customRender: 'file_name' } },
{ title: 'Firmware Version', dataIndex: 'product_version', width: 180, className: 'titleStyle' },
{ title: 'File Size', dataIndex: 'file_size', width: 150, className: 'titleStyle', slots: { customRender: 'file_size' } },
{ title: 'Creator', dataIndex: 'username', width: 100, className: 'titleStyle' },
{ title: 'Release Date', dataIndex: 'released_time', width: 160, sorter: (a: Firmware, b: Firmware) => a.released_time.localeCompare(b.released_time), className: 'titleStyle' },
{ title: 'Release Note', dataIndex: 'release_note', width: 300, ellipsis: true, className: 'titleStyle', slots: { customRender: 'release_note' } },
{ title: 'Status', dataIndex: 'firmware_status', width: 100, className: 'titleStyle', slots: { customRender: 'firmware_status' } },
{ title: '设备型号', dataIndex: 'device_name', width: 120, ellipsis: true, className: 'titleStyle', slots: { customRender: 'device_name' } },
{ title: '文件名称', dataIndex: 'file_name', width: 220, ellipsis: true, className: 'titleStyle', slots: { customRender: 'file_name' } },
{ title: '固件版本', dataIndex: 'product_version', width: 180, className: 'titleStyle' },
{ title: '文件大小', dataIndex: 'file_size', width: 150, className: 'titleStyle', slots: { customRender: 'file_size' } },
{ title: '用户名', dataIndex: 'username', width: 100, className: 'titleStyle' },
{ title: '发布时间', dataIndex: 'released_time', width: 160, sorter: (a: Firmware, b: Firmware) => a.released_time.localeCompare(b.released_time), className: 'titleStyle' },
{ title: '发布说明', dataIndex: 'release_note', width: 300, ellipsis: true, className: 'titleStyle', slots: { customRender: 'release_note' } },
{ title: '固件状态', dataIndex: 'firmware_status', width: 100, className: 'titleStyle', slots: { customRender: 'firmware_status' } },
]
const data = reactive<FirmwareData>({
@ -153,7 +153,7 @@ const paginationProp = reactive({ @@ -153,7 +153,7 @@ const paginationProp = reactive({
total: 0
})
const deviceNameList = ref<any[]>([{ label: 'All', value: '' }])
const deviceNameList = ref<any[]>([{ label: '全部', value: '' }])
type Pagination = TableState['pagination']

22
src/pages/page-web/projects/devices.vue
Unescape View File

@ -2,10 +2,10 @@ @@ -2,10 +2,10 @@
<template>
<a-menu v-model:selectedKeys="current" mode="horizontal" @select="select">
<a-menu-item :key="EDeviceTypeName.Aircraft" class="ml20">
Aircraft
飞行器
</a-menu-item>
<a-menu-item :key="EDeviceTypeName.Dock">
Dock
机场
</a-menu-item>
</a-menu>
<div class="device-table-wrap table flex-display flex-column">
@ -139,10 +139,10 @@ const loading = ref(true) @@ -139,10 +139,10 @@ const loading = ref(true)
const deleteTip = ref<boolean>(false)
const deleteSn = ref<string>()
const columns: ColumnProps[] = [
{ title: 'Model', dataIndex: 'device_name', width: 100, className: 'titleStyle' },
{ title: 'SN', dataIndex: 'device_sn', width: 100, className: 'titleStyle', ellipsis: true, slots: { customRender: 'sn' } },
{ title: '设备型号', dataIndex: 'device_name', width: 100, className: 'titleStyle' },
{ title: '设备SN', dataIndex: 'device_sn', width: 100, className: 'titleStyle', ellipsis: true, slots: { customRender: 'sn' } },
{
title: 'Name',
title: '设备组织名称',
dataIndex: 'nickname',
width: 100,
sorter: (a: Device, b: Device) => a.nickname.localeCompare(b.nickname),
@ -150,10 +150,10 @@ const columns: ColumnProps[] = [ @@ -150,10 +150,10 @@ const columns: ColumnProps[] = [
ellipsis: true,
slots: { customRender: 'nickname' }
},
{ title: 'Firmware Version', dataIndex: 'firmware_version', width: 150, className: 'titleStyle', slots: { customRender: 'firmware_version' } },
{ title: 'Status', dataIndex: 'status', width: 100, className: 'titleStyle', slots: { customRender: 'status' } },
{ title: '固件版本', dataIndex: 'firmware_version', width: 150, className: 'titleStyle', slots: { customRender: 'firmware_version' } },
{ title: '在线状态', dataIndex: 'status', width: 100, className: 'titleStyle', slots: { customRender: 'status' } },
{
title: 'Workspace',
title: '所属项目',
dataIndex: 'workspace_name',
width: 100,
className: 'titleStyle',
@ -172,10 +172,10 @@ const columns: ColumnProps[] = [ @@ -172,10 +172,10 @@ const columns: ColumnProps[] = [
return obj
}
},
{ title: 'Joined', dataIndex: 'bound_time', width: 150, sorter: (a: Device, b: Device) => a.bound_time.localeCompare(b.bound_time), className: 'titleStyle' },
{ title: 'Last Online', dataIndex: 'login_time', width: 150, sorter: (a: Device, b: Device) => a.login_time.localeCompare(b.login_time), className: 'titleStyle' },
{ title: '加入组织时间', dataIndex: 'bound_time', width: 150, sorter: (a: Device, b: Device) => a.bound_time.localeCompare(b.bound_time), className: 'titleStyle' },
{ title: '在线时间', dataIndex: 'login_time', width: 150, sorter: (a: Device, b: Device) => a.login_time.localeCompare(b.login_time), className: 'titleStyle' },
{
title: 'Actions',
title: '操作',
dataIndex: 'actions',
width: 100,
className: 'titleStyle',

14
src/pages/page-web/projects/members.vue
Unescape View File

@ -57,13 +57,13 @@ interface MemberData { @@ -57,13 +57,13 @@ interface MemberData {
member: Member[]
}
const columns = [
{ title: 'Account', dataIndex: 'username', width: 150, sorter: (a: Member, b: Member) => a.username.localeCompare(b.username), className: 'titleStyle' },
{ title: 'User Type', dataIndex: 'user_type', width: 150, className: 'titleStyle' },
{ title: 'Workspace Name', dataIndex: 'workspace_name', width: 150, className: 'titleStyle' },
{ title: 'Mqtt Username', dataIndex: 'mqtt_username', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_username' } },
{ title: 'Mqtt Password', dataIndex: 'mqtt_password', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_password' } },
{ title: 'Joined', dataIndex: 'create_time', width: 150, sorter: (a: Member, b: Member) => a.create_time.localeCompare(b.create_time), className: 'titleStyle' },
{ title: 'Action', dataIndex: 'action', width: 100, className: 'titleStyle', slots: { customRender: 'action' } },
{ title: '账号', dataIndex: 'username', width: 150, sorter: (a: Member, b: Member) => a.username.localeCompare(b.username), className: 'titleStyle' },
{ title: '人员组织名称', dataIndex: 'user_type', width: 150, className: 'titleStyle' },
{ title: '工作区名称', dataIndex: 'workspace_name', width: 150, className: 'titleStyle' },
{ title: '用户名', dataIndex: 'mqtt_username', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_username' } },
{ title: '密码', dataIndex: 'mqtt_password', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_password' } },
{ title: '创建时间', dataIndex: 'create_time', width: 150, sorter: (a: Member, b: Member) => a.create_time.localeCompare(b.create_time), className: 'titleStyle' },
{ title: '操作', dataIndex: 'action', width: 100, className: 'titleStyle', slots: { customRender: 'action' } },
]
const data = reactive<MemberData>({

12
src/pages/page-web/projects/task.vue
Unescape View File

@ -4,18 +4,6 @@ @@ -4,18 +4,6 @@
<a-row>
<a-col :span="1"></a-col>
<a-col :span="20">计划库</a-col>
<a-col :span="2">
<span v-if="taskRoute">
<router-link :to="{ name: ERouterName.CREATE_PLAN}">
<PlusOutlined class="route-icon"/>
</router-link>
</span>
<span v-else>
<router-link :to="{ name: ERouterName.TASK}">
<MinusOutlined class="route-icon"/>
</router-link>
</span>
</a-col>
<a-col :span="1"></a-col>
</a-row>
</div>

5
src/styles/flex.style.scss
Unescape View File

@ -328,3 +328,8 @@ m-5 { @@ -328,3 +328,8 @@ m-5 {
.pt50 {
padding-top: 50px;
}
// 按钮统一样式
.bth-common{
height: 36px;
min-width: 120px;
}

6
src/types/device-firmware.ts
Unescape View File

@ -11,9 +11,9 @@ export interface Firmware { @@ -11,9 +11,9 @@ export interface Firmware {
}
export enum FirmwareStatusEnum {
NONE = 'All',
FALSE = 'Disabled',
TRUE = 'Available'
NONE = '全部',
FALSE = '不可用',
TRUE = '可用'
}
export interface FirmwareQueryParam {

Write Preview
Loading…
Cancel
Save