From 3a022dc2caa78267a681824ea1c303f140cd6797 Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期五, 02 八月 2024 19:57:45 +0800 Subject: [PATCH] 智能体管理的页面开发和功能开发 --- src/views/dmx/IntelligentAgent/components/editAgent.vue | 218 +++++++++++++++++++++++++++--------------------------- 1 files changed, 110 insertions(+), 108 deletions(-) diff --git a/src/views/dmx/IntelligentAgent/components/editAgent.vue b/src/views/dmx/IntelligentAgent/components/editAgent.vue index d7def9c..813ca79 100644 --- a/src/views/dmx/IntelligentAgent/components/editAgent.vue +++ b/src/views/dmx/IntelligentAgent/components/editAgent.vue @@ -1,119 +1,99 @@ <template> - <a-button type="text" size="small" @click="handleClick"> + <a-button v-if="typeAngint=='edit'" type="text" size="small" @click="handleClick"> <template #icon> <icon-tool /> </template> </a-button> - - <a-modal v-model:visible="visible" title="娣诲姞妯″紡" +<!-- <a-button v-if="typeAngint=='add'" style="margin-left: 10px" type="primary" @click="handleClick">纭畾</a-button>--> + <a-modal v-model:visible="visible" title="" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start" - width="600px" + fullscreen > - <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" > - <a-form-item field="name" label="妯″瀷绫诲瀷"> - <a-select v-model="form.section" placeholder="璇烽�夋嫨"> - <a-option value="section one">Section One</a-option> - <a-option value="section two">Section Two</a-option> - <a-option value="section three">Section Three</a-option> - </a-select> - </a-form-item> - <a-form-item field="name" label="妯″瀷鍚嶇О"> - <a-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�"/> - </a-form-item> - <a-form-item field="section" label="妯″瀷鍥剧墖"> - <a-space direction="vertical" :style="{ width: '100%' }"> - <a-upload - action="/" - :fileList="file ? [file] : []" - :show-file-list="false" - @change="onChange" - @progress="onProgress" - > - <template #upload-button> - <div - :class="`arco-upload-list-item${ - file && file.status === 'error' ? ' arco-upload-list-item-error' : '' - }`" - > - <div - class="arco-upload-list-picture custom-upload-avatar" - v-if="file && file.url" - > - <img :src="file.url" /> - <div class="arco-upload-list-picture-mask"> - <IconEdit /> - </div> - <a-progress - v-if="file.status === 'uploading' && file.percent < 100" - :percent="file.percent" - type="circle" - size="mini" - :style="{ - position: 'absolute', - left: '50%', - top: '50%', - transform: 'translateX(-50%) translateY(-50%)', - }" - /> - </div> - <div class="arco-upload-picture-card" v-else> - <div class="arco-upload-picture-card-text"> - <IconPlus /> - <div style="margin-top: 10px; font-weight: 600">涓婁紶</div> - </div> - </div> - </div> - </template> - </a-upload> - </a-space> - </a-form-item> - <a-form-item field="name" label="鍩虹Url"> - <a-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�"/> - </a-form-item> - <a-form-item field="raptor" label="鏄惁鏀寔 Vision"> - <a-switch v-model="form.raptor" /> - </a-form-item> + <div class="main-container"> + <div class="main-container-lf"> + <div style="padding: 10px;font-size: 16px;background:#eeeeee;">鏅鸿兘浣撻厤缃�</div> + <div style="display: flex;width: 100%;" :style="{height:height}"> + <div style="width: 50%;height: 100%"> + <div style="padding: 10px;font-size: 12px;color: #2a2a2b;">鏅鸿兘浣撶敾鍍�</div> + <div> - <a-form-item> - <div style="width: 100%;text-align: right"> - <a-button @click="visible = false">鍙栨秷</a-button> - <a-button style="margin-left: 10px" type="primary" html-type="submit">纭畾</a-button> + </div> + </div> - </a-form-item> - </a-form> + <div style="background:#eeeeee;width: 50%;"> + <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" layout="vertical" > + + <a-collapse :default-active-key="['1']"> + <a-collapse-item header="AI妯″瀷閰嶇疆" key="1"> + + </a-collapse-item> + <a-collapse-item header="寮�鍦哄紩瀵�" :key="'2'"> + + </a-collapse-item> + <a-collapse-item header="鐭ヨ瘑搴�" key="3"> + + </a-collapse-item> + <a-collapse-item header="宸ュ叿" key="4" disabled> + </a-collapse-item> + <a-collapse-item header="宸ヤ綔娴�" key="5" disabled> + </a-collapse-item> + </a-collapse> + + <a-form-item> + <div style="position: absolute;right: 10px;top: 10px"> +<!-- <a-button @click="visible = false">鍙栨秷</a-button>--> + <a-button style="margin-left: 10px" type="primary" html-type="submit">淇濆瓨</a-button> + </div> + </a-form-item> + </a-form> + </div> + </div> + </div> + <div class="main-container-rt"> + <div :style="{height:heightrg}"> + <div style="padding: 10px"> + <a-avatar :style="{ backgroundColor: '#3370ff' }"> + <img + :style="{ width: '100%'}" + alt="dessert" + src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp" + /> + </a-avatar> + 璋冭瘯棰勮 + </div> + <a-divider style="margin: 0;margin-left: 10px"/> + + <div class="bottom"> + <div class="input"> + <a-input placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝鎸塃nter鍙戦��"> + <template #suffix> + <icon-send style="cursor: pointer" /> + </template> + </a-input></div> + <div class="text">鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰�</div> + </div> + </div> + </div> + </div> </a-modal> </template> <script lang="ts" setup> -import { onMounted ,onBeforeMount, reactive, ref } from "vue"; - +import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue"; +import { IconSend } from "@arco-design/web-vue/es/icon"; +const props = defineProps(['typeAngint','formData']) const visible = ref(false); const loading = ref(false); const form = reactive({ - size: "medium", - name: "", - age: undefined, - section: "0", - province: "haidian", - options: [], - date: "", - time: "", - radio: "radio one", - slider: 5, - score: 5, - switch: false, - multiSelect: ["section one"], - treeSelect: "", - raptor: false, - prompt: '璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n' + - ' {cluster_content}\n' + - '浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��', + }); const formRef = ref(null); +const height = ref('calc(100vh - 150px)') +const heightrg = ref('calc(100vh - 100px)') const rules = { name: [ @@ -129,9 +109,16 @@ console.log('values:', values, '\nerrors:', errors) } -const handleClick = () => { +const handleClick = (data) => { visible.value = true; + nextTick(()=>{ + Object.assign(form,data); + console.log(form); + }) }; +defineExpose({ + handleClick +}) const handleBeforeOk = (done) => { formRef.value.validate().then(res => { console.log('form:', form) @@ -148,12 +135,6 @@ } const handleOpened =(el) => { - Object.assign(form,{ - name: '',// 鐢ㄦ埛鍚� - nameJoin: '',// 鏄电О - post: '',// 宀椾綅 - txt: '',// 澶囨敞 - }); formRef.value.resetFields(); } @@ -178,11 +159,32 @@ }) </script> -<script lang="ts"> -export default { - name: 'add', - methods: { - +<style scoped lang="less"> +.main-container { + width: 100%; + display: flex; + .main-container-lf { + width: 60%; } -}; -</script> \ No newline at end of file + .main-container-rt { + position: relative; + width: 40%; + } +} +.bottom{ + width: 100%; + position: absolute; + bottom: 40px; + left:0; + .input{ + margin-left: 20%; + width: 60%; + } + .text{ + margin-left: 40%; + font-size: 12px; + color: lightgrey; + line-height: 40px; + } +} +</style> \ No newline at end of file -- Gitblit v1.8.0