|
|
@@ -0,0 +1,573 @@
|
|
|
+<template>
|
|
|
+ <main>
|
|
|
+ <section>
|
|
|
+ <div v-for="(item, key) in data" :key="key" :style="{ background: item.background }">
|
|
|
+ <img :src="getAssetURL(item.img)" />
|
|
|
+ <div :style="{ color: item.color }">
|
|
|
+ {{ item.title }}
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <AnwserPictureResult :image_list="image_list"/>
|
|
|
+ <AnwserPictureLoading />
|
|
|
+
|
|
|
+ <footer v-if="hasUpload">
|
|
|
+ <a-popover :popup-visible="showUpload" position="tl" @popup-visible-change="() => {
|
|
|
+ showDeleteTooltip = false;
|
|
|
+ }
|
|
|
+ ">
|
|
|
+ <div :class="{ 'text-hide': showUpload }">
|
|
|
+ <div @click="() => {
|
|
|
+ showUpload = true;
|
|
|
+ }
|
|
|
+ ">
|
|
|
+ <img src="@/assets/document/6.svg" class="img-normal" v-if="!showUpload" />
|
|
|
+ <img src="@/assets/document/7.svg" class="img-hover" v-if="!showUpload" />
|
|
|
+ <img src="@/assets/document/8.svg" class="img-active" v-if="showUpload" />
|
|
|
+ </div>
|
|
|
+ <p>已选择 {{ fileList.length }} 个图片</p>
|
|
|
+ </div>
|
|
|
+ <template #content>
|
|
|
+ <div :class="{ 'upload-wrap': true, 'upload-wrap-narrow': uploadFile }">
|
|
|
+ <header>
|
|
|
+ <p>{{ uploadFile ? "上传图片" : "上传图片" }}</p>
|
|
|
+ <div @click="() => {
|
|
|
+ showUpload = false;
|
|
|
+ }
|
|
|
+ ">
|
|
|
+ <icon-close size="large" />
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <section>
|
|
|
+ <a-upload draggable :multiple="!uploadFile" :limit="50" :show-file-list="false"
|
|
|
+ @before-upload="onBeforeUpload" @exceed-limit="onExceedLimit" @before-remove="onBeforeRemove"
|
|
|
+ :custom-request="customRequest" :show-upload-button="{ showOnExceedLimit: true }"
|
|
|
+ accept=".png,.jpg">
|
|
|
+ <template #upload-button>
|
|
|
+ <div class="upload-main">
|
|
|
+ <p>拖拽图片到这里，或<span>点此上传</span></p>
|
|
|
+ <span>
|
|
|
+ 支持上传 .png, .jpg，大小不超过10M
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-upload>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- <section v-else>
|
|
|
+ <a-upload draggable :multiple="!uploadFile" :limit="50" :show-file-list="false"
|
|
|
+ @before-upload="onBeforeUpload" @exceed-limit="onExceedLimit" @before-remove="onBeforeRemove"
|
|
|
+ :custom-request="customRequest" :show-upload-button="{ showOnExceedLimit: true }" accept="*">
|
|
|
+ <template #upload-button>
|
|
|
+ <div class="upload-main">
|
|
|
+ <p>拖拽图片到这里，或<span>点此上传</span></p>
|
|
|
+ <span>
|
|
|
+ 支持上传{{ uploadFile ? ".png,.jpg" : ".xlsx文档" }}，大小不超过10M
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-upload>
|
|
|
+ </section> -->
|
|
|
+
|
|
|
+ <div v-if="tableData.length > 0">
|
|
|
+ <p>
|
|
|
+ <span>已选择图片列表</span>
|
|
|
+ <span>共{{ tableData.length }}个</span>
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <a-table :pagination="false" row-key="name" :columns="columns" :data="tableData"
|
|
|
+ :row-selection="rowSelection" v-model:selectedKeys="selectedKeys">
|
|
|
+ <template #methods="{ record }">
|
|
|
+ <a-tooltip content="下载">
|
|
|
+ <div class="method-button" @click="downloadDocument(record)">
|
|
|
+ <icon-cloud-download />
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-popover :popup-visible="showDeleteTooltip && deleteId === record.key">
|
|
|
+ <a-tooltip content="删除">
|
|
|
+ <div class="method-button" @click="handleDeleteButton(record.key)">
|
|
|
+ <icon-delete />
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ <template #content>
|
|
|
+ <div>
|
|
|
+ <p>删除后无法恢复，您是否删除？</p>
|
|
|
+ <div class="delete-buttons">
|
|
|
+ <div>
|
|
|
+ <a-button size="mini" type="primary" style="margin-right: 10px"
|
|
|
+ @click="deleteDocument">确认</a-button>
|
|
|
+ <a-button size="mini" type="outline" @click="() => {
|
|
|
+ showDeleteTooltip = false;
|
|
|
+ }
|
|
|
+ ">取消</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-popover>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bottom-buttons">
|
|
|
+ <div>
|
|
|
+ <a-button type="outline" style="margin-right: 10px" @click="selectFiles(false)">取消</a-button>
|
|
|
+ <a-button :loading="buttonLoading" type="primary" @click="selectFiles(true, 'paper')">去{{
|
|
|
+ uploadFile ? '提问'
|
|
|
+ : '提问'
|
|
|
+ }}({{ fileList.length
|
|
|
+ }})</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-popover>
|
|
|
+ <!-- <section v-if="hasSlider">
|
|
|
+ <p>出题随机性</p>
|
|
|
+ <a-slider :default-value="50" :style="{ width: '100px' }" />
|
|
|
+ </section> -->
|
|
|
+ </footer>
|
|
|
+ </main>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { defineComponent, ref, inject, reactive } from "vue";
|
|
|
+
|
|
|
+import AnwserPictureResult from './anwser-pictures/AnwserPictureResult.vue';
|
|
|
+import AnwserPictureLoading from './anwser-pictures/AnwserPictureLoading.vue';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ props: ["data", "hasUpload", "hasSlider", "uploadFile", "isQuestion", "agentId", "agengtName"],
|
|
|
+ components: {
|
|
|
+ AnwserPictureResult,
|
|
|
+ AnwserPictureLoading
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const showUpload = ref(false);
|
|
|
+ const { helper, ajax } = inject("$global");
|
|
|
+
|
|
|
+ const maxSize = 30 * 1024 * 1024;
|
|
|
+ let fileList = ref([]);
|
|
|
+ const tableData = reactive([]);
|
|
|
+ let formData = new FormData();
|
|
|
+ let inputData = ref([]);
|
|
|
+ const showDeleteTooltip = ref(false);
|
|
|
+ const deleteId = ref("");
|
|
|
+ const buttonLoading = ref(false);
|
|
|
+ const selectFiles = async (isSelect, type) => {
|
|
|
+ if (isSelect) {
|
|
|
+ if (props.uploadFile) {
|
|
|
+ const data = await ajax.message.createDialog(props.agentId);
|
|
|
+ fileList.value.forEach(file => {
|
|
|
+ formData.append('file', file)
|
|
|
+ });
|
|
|
+ buttonLoading.value = true;
|
|
|
+ const result = await ajax.file.uploadFile(props.agentId, data.chat_id, formData);
|
|
|
+ showUpload.value = false;
|
|
|
+ helper.dialogConfig = {
|
|
|
+ isQuestion: props.isQuestion,
|
|
|
+ selectedKeys: selectedKeys.value,
|
|
|
+ type
|
|
|
+ };
|
|
|
+ buttonLoading.value = false;
|
|
|
+ // if (result) {
|
|
|
+ // helper.write('docId', result.doc_ids[0]);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 以下为判断是毕生还是regflow
|
|
|
+ // TODO 判断是毕生还是regflow
|
|
|
+ // 以下为毕生
|
|
|
+ inputData.value.push({
|
|
|
+ name: result.file_name,
|
|
|
+ file_path: result.file_path,
|
|
|
+ value: ""
|
|
|
+ });
|
|
|
+
|
|
|
+ const sendData = {
|
|
|
+ chatHistory: [],
|
|
|
+ chat_id: data.chat_id,
|
|
|
+ agent_id: props.agentId,
|
|
|
+ name: "小数绘图",
|
|
|
+ description: "小数绘图",
|
|
|
+ inputs: {
|
|
|
+ report_name: inputData.value.map(item => item.name).join(', '),
|
|
|
+ id: "Report-PRcYL",
|
|
|
+ data: inputData.value
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ if (sendData) {
|
|
|
+ helper.write('sendData', sendData);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ fileList.value.forEach(file => {
|
|
|
+ formData.append('files', file)
|
|
|
+ });
|
|
|
+
|
|
|
+ await ajax.file.uploadExcels(formData);
|
|
|
+ helper.$bus.emit("open-dialog", '合并Excel');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleDeleteButton = (id) => {
|
|
|
+ showDeleteTooltip.value = true;
|
|
|
+ deleteId.value = id;
|
|
|
+ };
|
|
|
+
|
|
|
+ const onBeforeUpload = (file) => {
|
|
|
+ if (file.size > maxSize) {
|
|
|
+ helper.message("error", `上传文件大小不能超过10M`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const onExceedLimit = () => {
|
|
|
+ helper.message("error", `最多上传50个文件`);
|
|
|
+ };
|
|
|
+
|
|
|
+ const customRequest = async (option) => {
|
|
|
+ const { onSuccess, fileItem } = option;
|
|
|
+ const { file } = fileItem;
|
|
|
+ fileList.value.push(file);
|
|
|
+ tableData.push({
|
|
|
+ key: file.uid,
|
|
|
+ name: file.name,
|
|
|
+ type: file.type,
|
|
|
+ size: helper.formatSize(file.size),
|
|
|
+ time: dayjs(file.lastModified).format("YYYY-MM-DD HH:mm:ss")
|
|
|
+ });
|
|
|
+ onSuccess();
|
|
|
+ };
|
|
|
+
|
|
|
+ const onBeforeRemove = (data) => {
|
|
|
+ console.log('data', data)
|
|
|
+ fileList.value = fileList.value.filter((item) => item.id !== data.uid);
|
|
|
+ return true;
|
|
|
+ };
|
|
|
+ const selectedKeys = ref([]);
|
|
|
+
|
|
|
+ const rowSelection = reactive({
|
|
|
+ type: "checkbox",
|
|
|
+ showCheckedAll: true,
|
|
|
+ onlyCurrent: false
|
|
|
+ });
|
|
|
+
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: "文件名称",
|
|
|
+ dataIndex: "name",
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true,
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "类型",
|
|
|
+ dataIndex: "type",
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true,
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "大小",
|
|
|
+ dataIndex: "size"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "上传时间",
|
|
|
+ dataIndex: "time",
|
|
|
+ ellipsis: true,
|
|
|
+ tooltip: true,
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ slotName: "methods"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const downloadDocument = (record) => { };
|
|
|
+
|
|
|
+ const deleteDocument = () => {
|
|
|
+ const index = tableData.findIndex(item => item.key === deleteId.value);
|
|
|
+ tableData.splice(index, 1);
|
|
|
+ fileList.value = fileList.value.filter(item => item.uid !== deleteId.value);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ const image_list = [
|
|
|
+ 'https://s3.harix.iamidata.com/sd-txt2img-ningbo/20241121_4173677d-b021-4b3a-9535-b7e4de17cded?AWSAccessKeyId=mjf0vn4dlj76z7ph&Expires=2147483647&Signature=kBHLFhQKRUd%2F%2B1hnw0k5DZ8VuA4%3D',
|
|
|
+ 'https://s3.harix.iamidata.com/sd-txt2img-ningbo/20241121_f0c4a724-ed43-4950-ade0-60190aa8eda4?AWSAccessKeyId=mjf0vn4dlj76z7ph&Expires=2147483647&Signature=Vd8Ja5X3W8qJFZl30NE8d%2B5GW40%3D',
|
|
|
+ 'https://s3.harix.iamidata.com/sd-txt2img-ningbo/20241121_a969df4c-5b6f-4577-827d-f7459e1a1c69?AWSAccessKeyId=mjf0vn4dlj76z7ph&Expires=2147483647&Signature=CHVinI9kJWnToLXWZ5BHdj54nLM%3D'
|
|
|
+ ]
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ agengtName: props.agengtName,
|
|
|
+ buttonLoading,
|
|
|
+ fileList,
|
|
|
+ selectedKeys,
|
|
|
+ getAssetURL: helper.getAssetURL,
|
|
|
+ showUpload,
|
|
|
+ onBeforeUpload,
|
|
|
+ onExceedLimit,
|
|
|
+ onBeforeRemove,
|
|
|
+ customRequest,
|
|
|
+ columns,
|
|
|
+ tableData,
|
|
|
+ rowSelection,
|
|
|
+ downloadDocument,
|
|
|
+ deleteDocument,
|
|
|
+ showDeleteTooltip,
|
|
|
+ deleteId,
|
|
|
+ handleDeleteButton,
|
|
|
+ selectFiles,
|
|
|
+
|
|
|
+ image_list
|
|
|
+ };
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bottom-buttons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: right;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.delete-buttons {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.method-button {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(150, 171, 185, 0.2);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.upload-main {
|
|
|
+ width: 800px;
|
|
|
+ height: 109px;
|
|
|
+ background: url("@/assets/document/upload.svg");
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 24px 0px 24px 277px;
|
|
|
+ background-size: 100%;
|
|
|
+
|
|
|
+ >p {
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ >span {
|
|
|
+ color: #00aea3;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >span {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #7f7f7f;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+main {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ >section {
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20px;
|
|
|
+
|
|
|
+ &.section-full {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 382px;
|
|
|
+ height: 120px;
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ >img {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ >span {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #797d7f;
|
|
|
+ margin-top: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: auto;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 21px;
|
|
|
+ border: 1px solid #e3e3e3;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+ width: 250px;
|
|
|
+
|
|
|
+ &.text-hide {
|
|
|
+ width: 110px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.text-narrow {
|
|
|
+ width: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ >div>img {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 110px;
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ .img-normal {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-hover {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .img-normal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-hover {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >img {
|
|
|
+ width: 110px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(150, 171, 185, 0.2);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 5px 10px;
|
|
|
+
|
|
|
+ >p {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.upload-wrap {
|
|
|
+ width: 800px;
|
|
|
+ height: 300px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 30px;
|
|
|
+
|
|
|
+ &.upload-wrap-narrow {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ >header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 13px;
|
|
|
+
|
|
|
+ >p {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ >p {
|
|
|
+ margin: 20px 0;
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhupei
