|
|
@@ -0,0 +1,464 @@
|
|
|
+<template>
|
|
|
+ <div class="model-item-container">
|
|
|
+ <div top="" class="model-item-part">
|
|
|
+ <div class="progress_bar">
|
|
|
+ <div class="bar_item" v-for="(item, i) in steps" :key="item.text + i">
|
|
|
+ <div class="item_child">
|
|
|
+ <div
|
|
|
+ class="cricle c_play"
|
|
|
+ :style="{
|
|
|
+ backgroundColor:
|
|
|
+ status.step >= i
|
|
|
+ ? 'rgb(228, 242, 255)'
|
|
|
+ : 'rgb(238, 238, 238)',
|
|
|
+ backgroundImage: getBG(i),
|
|
|
+ }"
|
|
|
+ v-text="status.step < i ? i + 1 : ''"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="item-child-label active"
|
|
|
+ style="width: 50px"
|
|
|
+ v-text="item.text"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="c_right c_right_grey"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ label-width="100px"
|
|
|
+ v-if="status.step === 0"
|
|
|
+ :model="form"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item label="标题">
|
|
|
+ <el-input v-model="form.title" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文章长度">
|
|
|
+ <div style="text-align: right; width: 100%">
|
|
|
+ <el-button
|
|
|
+ @click="form.long = 'short'"
|
|
|
+ plain
|
|
|
+ :class="{ act: form.long === 'short' }"
|
|
|
+ >
|
|
|
+ 短
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ @click="form.long = 'default'"
|
|
|
+ plain
|
|
|
+ :class="{ act: form.long === 'default' }"
|
|
|
+ >
|
|
|
+ 中
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ @click="form.long = 'long'"
|
|
|
+ plain
|
|
|
+ :class="{ act: form.long === 'long' }"
|
|
|
+ >
|
|
|
+ 长
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="摘要条数">
|
|
|
+ <div style="text-align: right; width: 100%">
|
|
|
+ <el-input-number v-model="form.num" :min="1" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ label-width="100px"
|
|
|
+ v-if="status.step === 1"
|
|
|
+ :model="form"
|
|
|
+ label-position="top"
|
|
|
+ >
|
|
|
+ <el-form-item label="您可以选择/编辑摘要：">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: relative;
|
|
|
+ margin-top: 1em;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ "
|
|
|
+ :style="{ borderColor: form.radio === i ? '#3b82f6' : '#fff' }"
|
|
|
+ v-for="(_, i) in form.intro_list"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <el-icon
|
|
|
+ class="select"
|
|
|
+ :color="form.radio === i ? '#3b82f6' : '#333'"
|
|
|
+ @click="form.radio = i"
|
|
|
+ ><Check
|
|
|
+ /></el-icon>
|
|
|
+ <el-input v-model="form.intro_list[i]" type="textarea" :rows="6" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ label-width="100px"
|
|
|
+ v-if="status.step === 2"
|
|
|
+ :model="form"
|
|
|
+ label-position="top"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="您可以选择编辑/增删/重组大纲："
|
|
|
+ style="display: block"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="dagang"
|
|
|
+ v-for="(item, i) in form.contents_list"
|
|
|
+ :key="'dg' + i"
|
|
|
+ >
|
|
|
+ <el-icon :size="20" class="add"><CirclePlus /></el-icon>
|
|
|
+ <el-icon :size="20" class="close"><CircleClose /></el-icon>
|
|
|
+ <el-input
|
|
|
+ v-model="item.title"
|
|
|
+ style="width: 100%"
|
|
|
+ class="no_border"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div class="step4" v-if="status.step === 3">
|
|
|
+ <b>标题:</b>
|
|
|
+ {{ form.title }}
|
|
|
+ <p
|
|
|
+ style="padding: 5px 10px"
|
|
|
+ v-for="(item, i) in form.contents_list"
|
|
|
+ :key="item + i"
|
|
|
+ v-text="item.title"
|
|
|
+ ></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="btn_group">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="status.step > 0"
|
|
|
+ plain
|
|
|
+ @click="status.step--"
|
|
|
+ >
|
|
|
+ 上一步
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" :loading="load" @click="createEdior">
|
|
|
+ 下一步
|
|
|
+ </el-button>
|
|
|
+ <div class="bottom-content-safe-tip">
|
|
|
+ <img :src="image_base64.tanhao" class="content-safe-tip-icon" />
|
|
|
+ <div class="content-safe-tip-text">
|
|
|
+ 声明：内容为概率模型生成，可能会产生不正确的信息，不代表我司的观点和立场
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, defineEmits } from 'vue';
|
|
|
+import { image_base64 } from './data.js';
|
|
|
+import { commit, generate_pc_get } from '@/api/aleditor.js';
|
|
|
+const emits = defineEmits(['closeType', 'setHtml', 'setImage', 'setTitle']);
|
|
|
+const steps = [
|
|
|
+ {
|
|
|
+ text: '标题',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '摘要',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '大纲',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '内容',
|
|
|
+ },
|
|
|
+];
|
|
|
+const form = ref({
|
|
|
+ intro_list: [],
|
|
|
+ contents_list: [],
|
|
|
+ title: '',
|
|
|
+ title2: '',
|
|
|
+ num: 1,
|
|
|
+ long: 'short',
|
|
|
+ radio: 0,
|
|
|
+});
|
|
|
+const load = ref(false);
|
|
|
+const status = ref({
|
|
|
+ step: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const getBG = i => {
|
|
|
+ if (status.value.step == i) return 'url(' + image_base64.play + ')';
|
|
|
+ if (status.value.step > i) return 'url(' + image_base64.duigou + ')';
|
|
|
+ return undefined;
|
|
|
+};
|
|
|
+
|
|
|
+// 第一步
|
|
|
+const createEdior = () => {
|
|
|
+ load.value = true;
|
|
|
+ let generateType = undefined;
|
|
|
+ let query_type = undefined;
|
|
|
+ // 如果是大纲到内容则清空intro_list
|
|
|
+ if (status.value.step === 2) form.value.intro_list = [];
|
|
|
+ if (form.value.intro_list.length) {
|
|
|
+ generateType = 7;
|
|
|
+ query_type = 'title';
|
|
|
+ } else if (!form.value.intro_list.length && form.value.long === 'short') {
|
|
|
+ generateType = 8;
|
|
|
+ query_type = 'all';
|
|
|
+ } else {
|
|
|
+ generateType = 6;
|
|
|
+ query_type = 'intro';
|
|
|
+ }
|
|
|
+ const p = {
|
|
|
+ data: {
|
|
|
+ title: form.value.title,
|
|
|
+ intro: form.value.intro_list.length
|
|
|
+ ? form.value.intro_list[form.value.radio]
|
|
|
+ : undefined,
|
|
|
+ },
|
|
|
+ outLineCnt: status.value.step === 1 ? 5 : undefined,
|
|
|
+ domain: 'paper',
|
|
|
+ generateType,
|
|
|
+ intro_count: form.value.long === 'short' ? undefined : form.value.num,
|
|
|
+ length: form.value.long,
|
|
|
+ query_type,
|
|
|
+ };
|
|
|
+ status.value.step++;
|
|
|
+ commit({
|
|
|
+ data: p,
|
|
|
+ noload: true,
|
|
|
+ })
|
|
|
+ .then(r => {
|
|
|
+ if (!r.data) return;
|
|
|
+ p.req = {
|
|
|
+ doc_id: r.data.doc_id,
|
|
|
+ };
|
|
|
+ get(p);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ load.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const get = p => {
|
|
|
+ generate_pc_get({
|
|
|
+ data: p,
|
|
|
+ noload: true,
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.errCode !== 0 && res.data.status === 'RUNNING') {
|
|
|
+ let t = setTimeout(() => {
|
|
|
+ clearTimeout(t);
|
|
|
+ get(p);
|
|
|
+ }, 800);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ load.value = false;
|
|
|
+ if (status.value.step === 1) {
|
|
|
+ const intro = res.data.result.introList.length
|
|
|
+ ? res.data.result.introList
|
|
|
+ : [res.data.result.intro || ''];
|
|
|
+ form.value.intro_list = intro;
|
|
|
+ }
|
|
|
+ if (status.value.step === 2) {
|
|
|
+ console.log(res.data.result.contents);
|
|
|
+ form.value.contents_list = res.data.result.contents || [];
|
|
|
+ }
|
|
|
+ if (status.value.step === 3) {
|
|
|
+ emits('setTitle', res.data.result.title);
|
|
|
+ emits('setHtml', res.data.result.intro);
|
|
|
+ emits('closeType');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ load.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.model-item-container {
|
|
|
+ text-align: center;
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -ms-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -ms-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 0;
|
|
|
+ width: 95%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.model-item-part {
|
|
|
+ -webkit-box-flex: 0;
|
|
|
+ -ms-flex: none;
|
|
|
+ flex: none;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.bar_item,
|
|
|
+.progress_bar {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: justify;
|
|
|
+ -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.progress_bar {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.bar_item {
|
|
|
+ width: 90px;
|
|
|
+}
|
|
|
+
|
|
|
+.item_child {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.c_right_grey {
|
|
|
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjE1NiAxLjAxYS41NDcuNTQ3IDAgMDAwIC43NjVMNS43MzYgNy41bC01LjU4IDUuNzI0YS41NDguNTQ4IDAgMDAuMTcuODgyLjUyLjUyIDAgMDAuNTc3LS4xMTdMNi44MzcgNy45YS41NzMuNTczIDAgMDAwLS43OTlMLjkwMyAxLjAxYS41MjEuNTIxIDAgMDAtLjc0NyAweiIgZmlsbD0iI0UxRTFFMSIvPjwvc3ZnPg==);
|
|
|
+}
|
|
|
+.c_right {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: 50%;
|
|
|
+ background-size: 29%;
|
|
|
+ width: 25px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.cricle {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ border-radius: 50%;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ color: #8e8e8e;
|
|
|
+ font-size: 16px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: 50%;
|
|
|
+ margin-right: 5px;
|
|
|
+ background-size: 40%;
|
|
|
+}
|
|
|
+
|
|
|
+.item-child-label.active {
|
|
|
+ color: #4b4b4b;
|
|
|
+}
|
|
|
+
|
|
|
+.item-child-label {
|
|
|
+ color: #8e8e8e;
|
|
|
+}
|
|
|
+
|
|
|
+.act {
|
|
|
+ color: var(--el-button-hover-text-color);
|
|
|
+ border-color: var(--el-button-hover-border-color);
|
|
|
+ background-color: var(--el-button-hover-bg-color);
|
|
|
+ outline: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.btn_group {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+ bottom: 0;
|
|
|
+ padding-right: 1em;
|
|
|
+}
|
|
|
+.bottom-content-safe-tip {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ padding: 15px 0;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -ms-flex-pack: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ zoom: 0.83;
|
|
|
+}
|
|
|
+.bottom-content-safe-tip .content-safe-tip-icon {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.bottom-content-safe-tip .content-safe-tip-text {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 15px;
|
|
|
+ color: #cacaca;
|
|
|
+}
|
|
|
+
|
|
|
+.dagang {
|
|
|
+ padding: 0 0 0 30px;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 1em;
|
|
|
+}
|
|
|
+
|
|
|
+.dagang .add {
|
|
|
+ position: absolute;
|
|
|
+ left: 2px;
|
|
|
+ top: 5px;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.dagang .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 3px;
|
|
|
+ z-index: 1;
|
|
|
+ top: 5px;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.no_border .el-input__wrapper {
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+.dagang:hover .add,
|
|
|
+.dagang:hover .close {
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.dagang:hover .no_border .el-input__wrapper {
|
|
|
+ box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
|
|
|
+ inset;
|
|
|
+}
|
|
|
+.select {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 1;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.step4 {
|
|
|
+ padding: 40px;
|
|
|
+ text-align: left;
|
|
|
+ color: #8e8e8e;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ line-height: 1.1em;
|
|
|
+}
|
|
|
+.step4 * {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.model-item-container .el-form-item__content {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.model-item-container .el-textarea__inner {
|
|
|
+ padding-top: 1em;
|
|
|
+}
|
|
|
+</style>
|
liyongli