tangger/matagent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'cameraadd'

Browse Source
This commit is contained in:
yangqiao
2025-02-17 16:43:12 +08:00
parent 45d8686d2f
commit 52845e5133
8 changed files with 281 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/view/reasoning/index.less
View File

@@ -71,4 +71,25 @@
}
}
.camera_dialog {
position: fixed;
top: 0;
left: 66px;
z-index: 99;
display: flex;
align-items: center;
column-gap: 12px;
.camera_item {
display: flex;
align-items: center;
flex-direction: column;
cursor: pointer;
span {
font-size: 12px;
color: #fff;
}
}
}
}

179
frontend/src/view/reasoning/index.vue
View File

@@ -3,7 +3,7 @@
<div
class="content-left"
:style="{
width: isCollapse ? 'calc(100% - 200px)' : 'calc(100% - 7px)',
width: isCollapse ? 'calc(100% - 200px)' : 'calc(100% - 7px)'
}"
>
<div class="body-box" ref="container">
@@ -17,10 +17,10 @@
<div class="tip-box">
<p class="active_item">
<el-icon size="6" color="#fff"><Plus /></el-icon>
{{ generateTitle("新建对话") }}
{{ generateTitle('新建对话') }}
</p>
<div class="tip-text" v-show="disableStatus">
{{ generateTitle("回答输出中，暂不能再次提问") }}
{{ generateTitle('回答输出中，暂不能再次提问') }}
</div>
</div>
<TextareaView ref="textareaRef" :minRows="1" @submitFun="submitFun" />
@@ -31,28 +31,53 @@
:reasoningList="reasoningList"
@changeStatusFun="changeStatusFun"
/>
<div class="camera_dialog">
<div class="camera_item" @click="cameraFun(1)">
<el-icon color="#fff" size="16"><VideoCameraFilled /></el-icon>
<span>监控1</span>
</div>
<div class="camera_item" @click="cameraFun(2)">
<el-icon color="#fff" size="16"><VideoCameraFilled /></el-icon>
<span>监控2</span>
</div>
</div>
<CameraView
ref="cameraViewRef"
v-show="cameraShow"
@closeCamera="closeCamera"
/>
</div>
</template>
<script setup lang="ts">
import ReasoningView from "../../components/ReasoningView/index.vue";
import TextareaView from "../../components/TextareaView.vue";
import collapseView from "../../components/collapseView/index.vue";
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted, nextTick } from "vue";
import ReasoningView from '../../components/ReasoningView/index.vue'
import TextareaView from '../../components/TextareaView.vue'
import collapseView from '../../components/collapseView/index.vue'
import CameraView from '../../components/CameraView/index.vue'
import { Plus, VideoCameraFilled } from '@element-plus/icons-vue'
import { ref, onMounted, nextTick } from 'vue'
// import { getModelList } from '../../api/user'
import { useRoute } from "vue-router";
import useWebSocket from "../../utils/websocket";
import { useRoute } from 'vue-router'
import useWebSocket from '../../utils/websocket'
// import { getAgent } from '../../utils/agent'
import { generateTitle } from "../../utils/i18n";
const route: any = useRoute();
const reasoningRef = ref<any>(null);
const textareaRef = ref<any>(null);
const collapseRef = ref<any>(null);
const isCollapse = ref<boolean>(true);
import { generateTitle } from '../../utils/i18n'
const route: any = useRoute()
const reasoningRef = ref<any>(null)
const textareaRef = ref<any>(null)
const collapseRef = ref<any>(null)
const isCollapse = ref<boolean>(true)
const cameraShow = ref<boolean>(false)
const cameraViewRef = ref<any>(null)
const changeStatusFun = (val: boolean) => {
isCollapse.value = val;
};
const reasoningList = ref<Array<any>>([]);
isCollapse.value = val
}
const cameraFun = (val: number) => {
cameraShow.value = true
cameraViewRef.value.cameraNumber = val
}
const closeCamera = () => {
cameraShow.value = false
}
const reasoningList = ref<Array<any>>([])
// const getModelListFun = async () => {
// try {
// const { data, code } = await getModelList()
@@ -64,76 +89,82 @@ const reasoningList = ref<Array<any>>([]);
// }
// }
const submitFun = (val: any) => {
completeFun();
addMode(JSON.parse(val).content);
ws.send(val);
};
completeFun()
addMode(JSON.parse(val).content)
ws.send(val)
}
const addMode = (val: any) => {
endStatus.value = false;
endStatus.value = false
reasoningList.value.push({
title: val,
children: [],
});
children: []
})
reasoningRef.value.completeList.push({
show: false,
index: reasoningRef.value.completeList.length,
});
};
const disableStatus = ref(false);
index: reasoningRef.value.completeList.length
})
}
const disableStatus = ref(false)
const completeFun = () => {
disableStatus.value = true;
textareaRef.value.disableStatus = true;
};
disableStatus.value = true
textareaRef.value.disableStatus = true
}
const handleMessage = (e: any) => {
getMessage(e.data);
getHeight();
};
const endStatus = ref(false);
getMessage(e.data)
getHeight()
}
const endStatus = ref(false)
const getMessage = async (e: any) => {
reasoningRef.value.reasonStatus.show = true;
let data = JSON.parse(e);
if (data.content) {
let list = reasoningList.value[reasoningList.value.length - 1].children;
let status = list.filter(
(key: any) =>
key.group_name === data.group_name && key.agent_name === data.agent_name
)[0];
if (list.length && status && status.agent_name) {
for (let i = 0; i < list.length; i++) {
const item = list[i];
if (
item.group_name === data.group_name &&
item.agent_name === data.agent_name
) {
item.content += data.content;
}
}
} else {
list.push(JSON.parse(e));
}
reasoningRef.value.reasonStatus.show = true
let data = JSON.parse(e)
if (data.type === 'UserInputRequestedEvent') {
disableStatus.value = false
textareaRef.value.disableStatus = false
reasoningRef.value.reasonStatus.show = false
}
};
const ws = useWebSocket(handleMessage,'');
if (data.content) {
let list = reasoningList.value[reasoningList.value.length - 1].children
list.push(data)
// let status = list.filter(
// (key: any) =>
// key.group_name === data.group_name && key.agent_name === data.agent_name
// )[0]
// if (list.length && status && status.agent_name) {
// for (let i = 0; i < list.length; i++) {
// const item = list[i]
// if (
// item.group_name === data.group_name &&
// item.agent_name === data.agent_name
// ) {
// item.content += data.content
// }
// }
// } else {
// list.push(JSON.parse(e))
// }
}
}
const ws = useWebSocket(handleMessage, '')
const sendFun = () => {
setTimeout(() => {
addMode(JSON.parse(route.query.content).content);
completeFun();
ws.send(route.query.content);
}, 300);
};
const container = ref<any>(null);
addMode(JSON.parse(route.query.content).content)
completeFun()
ws.send(route.query.content)
}, 300)
}
const container = ref<any>(null)
const getHeight = () => {
container.value.scrollTop = container.value.scrollHeight + 150;
collapseRef.value.scrollTop = collapseRef.value.scrollHeight + 50;
};
container.value.scrollTop = container.value.scrollHeight + 150
collapseRef.value.scrollTop = collapseRef.value.scrollHeight + 50
}
onMounted(() => {
// getModelListFun();
nextTick(() => {
getHeight();
sendFun();
});
});
getHeight()
sendFun()
})
})
</script>
<style scoped>
@import "./index.less";
@import './index.less';
</style>