|
@@ -2,29 +2,44 @@
|
|
|
<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="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)}"
|
|
|
+ :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
|
|
|
+ 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" :model="form" label-position="left">
|
|
|
+ <el-form
|
|
|
+ v-if="status.step === 0"
|
|
|
+ label-width="100px"
|
|
|
+ :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 plain :class="{ act: form.long === 'small' }">
|
|
|
+ <el-button plain :class="{ act: form.long === 'short' }">
|
|
|
短
|
|
|
</el-button>
|
|
|
- <el-button plain :class="{ act: form.long === 'middle' }">
|
|
|
+ <el-button plain :class="{ act: form.long === 'default' }">
|
|
|
中
|
|
|
</el-button>
|
|
|
<el-button plain :class="{ act: form.long === 'long' }">
|
|
@@ -44,56 +59,126 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <div class="btn_group">
|
|
|
- <el-button type="primary" @click="status.step++">下一步</el-button>
|
|
|
+ <div v-if="status.step === 0" class="btn_group">
|
|
|
+ <el-button type="primary" @click="nextFunc" :loading="load"
|
|
|
+ >下一步</el-button
|
|
|
+ >
|
|
|
<div class="bottom-content-safe-tip">
|
|
|
- <img
|
|
|
- :src="image_base64.tanhao"
|
|
|
- class="content-safe-tip-icon"
|
|
|
- />
|
|
|
+ <img :src="image_base64.tanhao" class="content-safe-tip-icon" />
|
|
|
<div class="content-safe-tip-text">
|
|
|
声明:内容为概率模型生成,可能会产生不正确的信息,不代表我司的观点和立场
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="step4" v-if="status.step === 3">
|
|
|
+ <b>标题:</b>
|
|
|
+ {{ form.title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
-import { image_base64 } from "./data.js";
|
|
|
-// import {commit} from "@/api/aleditor.js";
|
|
|
+import { ref, defineEmits } from 'vue';
|
|
|
+import { image_base64 } from './data.js';
|
|
|
+import { commit, generate_pc_get, textImageMatch } from '@/api/aleditor.js';
|
|
|
+const emits = defineEmits(['closeType', 'getHtml', 'getImage']);
|
|
|
const steps = [
|
|
|
- {
|
|
|
- text: '标题',
|
|
|
- },
|
|
|
- {
|
|
|
- text: '摘要',
|
|
|
- },
|
|
|
- {
|
|
|
- text: '大纲',
|
|
|
- },
|
|
|
- {
|
|
|
- text: '内容',
|
|
|
- }
|
|
|
-]
|
|
|
+ {
|
|
|
+ text: '标题',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '摘要',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '大纲',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '内容',
|
|
|
+ },
|
|
|
+];
|
|
|
const form = ref({
|
|
|
title: '',
|
|
|
num: 1,
|
|
|
isImg: false,
|
|
|
- long: 'small',
|
|
|
+ long: 'short',
|
|
|
});
|
|
|
|
|
|
const status = ref({
|
|
|
- step: 0,
|
|
|
- progress: 0,
|
|
|
-})
|
|
|
+ step: 0,
|
|
|
+ progress: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const load = ref(false);
|
|
|
|
|
|
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
|
|
|
-}
|
|
|
+ if (status.value.step == i) return 'url(' + image_base64.play + ')';
|
|
|
+ if (status.value.step > i) return 'url(' + image_base64.duigou + ')';
|
|
|
+ return undefined;
|
|
|
+};
|
|
|
+
|
|
|
+const nextFunc = () => {
|
|
|
+ if (!form.value.title) return;
|
|
|
+ load.value = true;
|
|
|
+ if (form.value.isImg)
|
|
|
+ return textImageMatch({
|
|
|
+ data: {
|
|
|
+ texts: [form.value.title],
|
|
|
+ },
|
|
|
+ noload: true,
|
|
|
+ })
|
|
|
+ .then(r => {
|
|
|
+ if(r.errCode !== 0) return
|
|
|
+ emits('getImage', r.data[form.value.num]);
|
|
|
+ createEdior();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ load.value = false;
|
|
|
+ });
|
|
|
+ createEdior();
|
|
|
+};
|
|
|
+
|
|
|
+const createEdior = () => {
|
|
|
+ const p = {
|
|
|
+ data: { title: form.value.title, contents: [] },
|
|
|
+ domain: '',
|
|
|
+ generateType: form.value.long === 'short' ? 11 : 9,
|
|
|
+ intro_count: form.value.long === 'short' ? undefined : form.value.num,
|
|
|
+ length: form.value.long,
|
|
|
+ query_type: form.value.long === 'short' ? 'all' : 'intro',
|
|
|
+ };
|
|
|
+ commit({
|
|
|
+ data: p,
|
|
|
+ noload: true,
|
|
|
+ })
|
|
|
+ .then(r => {
|
|
|
+ if (!r.data) return;
|
|
|
+ status.value.step = 3;
|
|
|
+ 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) return get(p);
|
|
|
+ emits('closeType');
|
|
|
+ emits('getHtml', res.data.result.intro);
|
|
|
+ load.value = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ load.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@@ -218,4 +303,15 @@ const getBG = i => {
|
|
|
line-height: 15px;
|
|
|
color: #cacaca;
|
|
|
}
|
|
|
+
|
|
|
+.step4 {
|
|
|
+ padding: 40px;
|
|
|
+ text-align: left;
|
|
|
+ color: #8e8e8e;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ line-height: 1.1em;
|
|
|
+}
|
|
|
+.step4 * {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
</style>
|