Compare commits
2 Commits
dbd3c82055
...
9e972a811c
| Author | SHA1 | Date |
|---|---|---|
userName
|
9e972a811c | 2 months ago |
|
userName
|
35afd69d3f | 2 months ago |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
@ -0,0 +1,43 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '按钮名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'DOMID',
|
||||
dataIndex: 'domId',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
dataIndex: 'class',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabledMark',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
const color = record.status == 1 ? 'blue' : 'red';
|
||||
const text = record.status == 1 ? '启用' : '停用';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="false"
|
||||
:showCancelBtn="true"
|
||||
:showOkBtn="true"
|
||||
:draggable="false"
|
||||
title="创建算法"
|
||||
@ok="submitClick"
|
||||
>
|
||||
<div class="flex titlesbox">
|
||||
<div class="li" v-for="(item,index) in tabList">
|
||||
<span :class="index==tabIndex?'active':''" @click="tabsClick(index)">{{item}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视频算法 -->
|
||||
<div class="formsbox" v-if="tabIndex == 0">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form-item
|
||||
label="算法名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="概要描述"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-textarea v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="算力名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="推流地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="拉流地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="服务地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="秘钥"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 图片算法 -->
|
||||
<div class="formsbox" v-if="tabIndex == 1">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form-item
|
||||
label="算法名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="概要描述"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-textarea v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="算力名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="服务地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="秘钥"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineEmits, reactive, toRaw } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
const tabIndex = ref(0);
|
||||
const tabList = ["视频算法","图片算法"];
|
||||
const tabsClick = (index) =>{
|
||||
tabIndex.value = index
|
||||
}
|
||||
const formRef = ref();
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
remember: boolean;
|
||||
}
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: true,
|
||||
});
|
||||
const submitClick = ()=>{
|
||||
console.log('submit')
|
||||
formRef.value.validate().then(() => {
|
||||
console.log('values', formState, toRaw(formState));
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('error', error);
|
||||
});
|
||||
}
|
||||
const [registerModal, { closeModal }] = useModalInner((data: any) => {
|
||||
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.titlesbox{
|
||||
width: 92%;
|
||||
margin-left: 4%;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #F5F6FA;
|
||||
.li{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
span{
|
||||
color: #222738;
|
||||
cursor: pointer;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
.active{
|
||||
border-bottom: 3px solid #3A57E8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.formsbox{
|
||||
width: 92%;
|
||||
margin-left: 4%;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '项目',
|
||||
dataIndex: 'domId',
|
||||
},
|
||||
{
|
||||
title: '计划',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '设备',
|
||||
dataIndex: 'class',
|
||||
},
|
||||
{
|
||||
title: '算法',
|
||||
dataIndex: 'enabledMark',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
const color = record.status == 1 ? 'blue' : 'red';
|
||||
const text = record.status == 1 ? '启用' : '停用';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '项目名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
label: '巡检时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 6 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
label: '当前状态',
|
||||
colProps: {
|
||||
span: 6,
|
||||
},
|
||||
componentProps: () => {
|
||||
|
||||
},
|
||||
},
|
||||
// {
|
||||
// field: 'status',
|
||||
// component: 'ApiSelect',
|
||||
// label: '当前状态',
|
||||
// colProps: {
|
||||
// span: 6,
|
||||
// },
|
||||
// componentProps: () => {
|
||||
// return {
|
||||
// api: getFormsTypeList,
|
||||
// params: {
|
||||
// code: 'ssnyddqyt',
|
||||
// },
|
||||
// resultField: '',
|
||||
// labelField: 'itemName',
|
||||
// valueField: 'itemValue',
|
||||
// };
|
||||
// },
|
||||
// },
|
||||
];
|
||||
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<BasicTable
|
||||
class="w-4/4 xl:w-5/5"
|
||||
@register="registerTable"
|
||||
@fetch-success="onFetchSuccess"
|
||||
:searchInfo="searchInfo"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<div class="handlebox">
|
||||
<div class="btnbox">查看<br />数据</div>
|
||||
<div class="btnbox">全部<br />审核</div>
|
||||
<div class="btnbox">发起<br />分析</div>
|
||||
<div class="btnbox">修改<br />任务</div>
|
||||
<div class="btnbox">审核<br />任务</div>
|
||||
<div class="btnbox">在线<br />报告</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { getButtonList } from '@/api/demo/system';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
|
||||
import { columns, searchFormSchema } from './index.data';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
defineOptions({ name: 'workreport' });
|
||||
const searchInfo = reactive<Recordable>({});
|
||||
|
||||
const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '智能分析',
|
||||
api: getButtonList,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
striped: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
rowSelection: false,
|
||||
showIndexColumn: false,
|
||||
actionColumn: {
|
||||
width: 320,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
function onFetchSuccess() {
|
||||
// 演示默认展开所有表项
|
||||
nextTick(expandAll);
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.handlebox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
.btnbox{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
line-height: 15px;
|
||||
background: rgba(183,193,246,0.2);
|
||||
box-shadow: 0px 10px 13px 0px rgba(17,38,146,0.05);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3A57E8;
|
||||
font-size: 12px;
|
||||
color: #3A57E8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
word-break: break-all;
|
||||
cursor: pointer
|
||||
}
|
||||
.active{
|
||||
background: #3A57E8;
|
||||
box-shadow: 0px 10px 13px 0px rgba(17,38,146,0.05);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3A57E8;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '按钮名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'DOMID',
|
||||
dataIndex: 'domId',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
dataIndex: 'class',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabledMark',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
const color = record.status == 1 ? 'blue' : 'red';
|
||||
const text = record.status == 1 ? '启用' : '停用';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div class="w-1/4 xl:w-1/5 leftbox flex column">
|
||||
<div class="flex ai-c jc-sb titlesbox">
|
||||
<div class="textbox">
|
||||
<p>模板名称</p>
|
||||
</div>
|
||||
<a-button type="primary" size="small" @click="createAddClick">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新建模板
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="flex column ulbox">
|
||||
<div class="descbox" v-for="(item, index) in 41" :class="navsIndex==index?'active':''" @click="navsClick(index)">
|
||||
<ProfileOutlined />
|
||||
项目名称{{ index+1 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <BasicTable
|
||||
class="w-3/4 xl:w-4/5"
|
||||
@register="registerTable"
|
||||
@fetch-success="onFetchSuccess"
|
||||
:searchInfo="searchInfo"
|
||||
>
|
||||
|
||||
</BasicTable> -->
|
||||
<Modal
|
||||
@submitsuccess="submitsuccess"
|
||||
@register="registerModal"
|
||||
@submit-reload="submitReload"
|
||||
/>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
import { PlusOutlined, ProfileOutlined } from '@ant-design/icons-vue';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import { columns, searchFormSchema } from './index.data';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import Modal from './modal.vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
defineOptions({ name: 'MenuManagement' });
|
||||
const searchInfo = reactive<Recordable>({});
|
||||
const navsIndex = ref(0);
|
||||
|
||||
const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '列表',
|
||||
// api: getButtonList,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
isTreeTable: true,
|
||||
striped: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
rowSelection: {
|
||||
//多选框
|
||||
// type: 'checkbox',
|
||||
type: 'radio',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
function createAddClick(){
|
||||
|
||||
}
|
||||
function navsClick(e){
|
||||
navsIndex.value = e
|
||||
}
|
||||
|
||||
function onFetchSuccess() {
|
||||
// 演示默认展开所有表项
|
||||
nextTick(expandAll);
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.flex-1{
|
||||
flex: 1;
|
||||
}
|
||||
.column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.jc-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-2{
|
||||
padding-top: 20px;
|
||||
}
|
||||
.leftbox{
|
||||
background: #fff;
|
||||
margin: 16px 0 16px 16px;
|
||||
padding: 16px 0;
|
||||
.titlesbox{
|
||||
padding: 0 16px;
|
||||
.textbox{
|
||||
p{
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #060606;
|
||||
line-height: 22px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ulbox{
|
||||
overflow: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.descbox{
|
||||
font-size: 14px;
|
||||
color: #504E4E;
|
||||
line-height: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.descbox.active{
|
||||
background: #F3F3F3;
|
||||
border-left: 3px solid #3A57E8;
|
||||
color: #3A57E8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="false"
|
||||
:showCancelBtn="true"
|
||||
:showOkBtn="true"
|
||||
:draggable="false"
|
||||
title="创建算法"
|
||||
@ok="submitClick"
|
||||
>
|
||||
<div class="flex titlesbox">
|
||||
<div class="li" v-for="(item,index) in tabList">
|
||||
<span :class="index==tabIndex?'active':''" @click="tabsClick(index)">{{item}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视频算法 -->
|
||||
<div class="formsbox" v-if="tabIndex == 0">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form-item
|
||||
label="算法名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="概要描述"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-textarea v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="算力名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="推流地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="拉流地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="服务地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="秘钥"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 图片算法 -->
|
||||
<div class="formsbox" v-if="tabIndex == 1">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form-item
|
||||
label="算法名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="概要描述"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-textarea v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="算力名称"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="服务地址"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="秘钥"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineEmits, reactive, toRaw } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
const tabIndex = ref(0);
|
||||
const tabList = ["视频算法","图片算法"];
|
||||
const tabsClick = (index) =>{
|
||||
tabIndex.value = index
|
||||
}
|
||||
const formRef = ref();
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
remember: boolean;
|
||||
}
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: true,
|
||||
});
|
||||
const submitClick = ()=>{
|
||||
console.log('submit')
|
||||
formRef.value.validate().then(() => {
|
||||
console.log('values', formState, toRaw(formState));
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('error', error);
|
||||
});
|
||||
}
|
||||
const [registerModal, { closeModal }] = useModalInner((data: any) => {
|
||||
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.titlesbox{
|
||||
width: 92%;
|
||||
margin-left: 4%;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #F5F6FA;
|
||||
.li{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
span{
|
||||
color: #222738;
|
||||
cursor: pointer;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
.active{
|
||||
border-bottom: 3px solid #3A57E8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.formsbox{
|
||||
width: 92%;
|
||||
margin-left: 4%;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '项目',
|
||||
dataIndex: 'domId',
|
||||
},
|
||||
{
|
||||
title: '计划',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '设备',
|
||||
dataIndex: 'class',
|
||||
},
|
||||
{
|
||||
title: '缺陷数量',
|
||||
dataIndex: 'sort',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '项目名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
label: '巡检时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 6 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
label: '当前状态',
|
||||
colProps: {
|
||||
span: 6,
|
||||
},
|
||||
componentProps: () => {
|
||||
|
||||
},
|
||||
},
|
||||
// {
|
||||
// field: 'status',
|
||||
// component: 'ApiSelect',
|
||||
// label: '当前状态',
|
||||
// colProps: {
|
||||
// span: 6,
|
||||
// },
|
||||
// componentProps: () => {
|
||||
// return {
|
||||
// api: getFormsTypeList,
|
||||
// params: {
|
||||
// code: 'ssnyddqyt',
|
||||
// },
|
||||
// resultField: '',
|
||||
// labelField: 'itemName',
|
||||
// valueField: 'itemValue',
|
||||
// };
|
||||
// },
|
||||
// },
|
||||
];
|
||||
|
||||
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<BasicTable
|
||||
class="w-3/4 xl:w-4/5"
|
||||
@register="registerTable"
|
||||
@fetch-success="onFetchSuccess"
|
||||
:searchInfo="searchInfo"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<span class="btnbox openbox">打开报告</span>
|
||||
<span class="btnbox downloadbox">下载报告</span>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<div class="rightBox w-3/4 xl:w-1/5">
|
||||
<div class="title"></div>
|
||||
<div class="textbox fw-b">独立展示区</div>
|
||||
<div class="contentbox">
|
||||
<div class="contentli" v-for="(item, index) in imgsArr">
|
||||
<div class="flex jc-sb ai-c">
|
||||
<span class="fortext">缺陷类型{{ index + 1 }}</span>
|
||||
<div class="handlebox fz-12">
|
||||
<span :class="['cursor', { active: item.show }]" @click="item.show = true">展开</span>
|
||||
<span>/</span>
|
||||
<span :class="['cursor', { active: !item.show }]" @click="item.show = false">收起</span>
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="item.show" class="img" :src="item.src" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { getButtonList } from '@/api/demo/system';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
|
||||
import { columns, searchFormSchema } from './index.data';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
defineOptions({ name: 'workreport' });
|
||||
const searchInfo = reactive<Recordable>({});
|
||||
const imgsArr = ref([
|
||||
{ show: true , src: '/public/banner.png' },
|
||||
{ show: true , src: '/public/default.png' },
|
||||
{ show: true , src: '/public/banner1.png' },
|
||||
])
|
||||
|
||||
const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '工作报告',
|
||||
// api: getButtonList,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
striped: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
rowSelection: false,
|
||||
showIndexColumn: false,
|
||||
actionColumn: {
|
||||
width: 200,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
function onFetchSuccess() {
|
||||
// 演示默认展开所有表项
|
||||
nextTick(expandAll);
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.jc-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.fz-12{
|
||||
font-size: 12px;
|
||||
}
|
||||
.fw-b{
|
||||
font-weight: bold;
|
||||
}
|
||||
.rightBox{
|
||||
margin-left: -16px;
|
||||
padding: 16px 0;
|
||||
.title{
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
background-color: #fff;
|
||||
padding: 12px 10px 6px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.textbox{
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.contentbox{
|
||||
height: calc(100% - 135px);
|
||||
margin-left: 16px;
|
||||
overflow: auto;
|
||||
.contentli{
|
||||
background: #fff;
|
||||
margin-bottom: 10px;
|
||||
padding: 16px;
|
||||
border-radius: 5px;
|
||||
.handlebox{
|
||||
.active{
|
||||
color: #6F84EE;
|
||||
}
|
||||
}
|
||||
.img{
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
display: inline-block;
|
||||
padding: 3px 6px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.openbox{
|
||||
background: #E9671A;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.downloadbox{
|
||||
background: #3A57E8;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue