From 2d751cec5e22e06484141b25fe5305973cdaeae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Tue, 14 Jan 2025 17:55:13 +0800
Subject: [PATCH] =?UTF-8?q?online=20=E5=A2=9E=E5=8A=A0html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/articleListEditor_C.vue   |   20 +-
 src/components/page/articleListEditor_E.vue   |  117 +-
 src/components/page/components/html/index.vue | 1325 +++++++++++++++++
 3 files changed, 1407 insertions(+), 55 deletions(-)
 create mode 100644 src/components/page/components/html/index.vue

diff --git a/src/components/page/articleListEditor_C.vue b/src/components/page/articleListEditor_C.vue
index cf54a7d..6807820 100644
--- a/src/components/page/articleListEditor_C.vue
+++ b/src/components/page/articleListEditor_C.vue
@@ -55,6 +55,7 @@
                 <div v-for="(item, index) in item.articles" class="actList">
                     <span>{{ item.npp }}.</span>
                     <font @click="lookView(item)">{{ item.title }}</font>
+                    <el-button style="margin-left: 20px;padding: 4px 10px !important;" size="mini" type="primary" plain icon="el-icon-notebook-2" @click="htmlContet(item)"> Html</el-button>
                     <!-- <span style="margin-left: 30px;color: #aaa;">sort:</span>
 				<b class="sort">{{item.sort}}</b>
 				<i class="el-icon-edit ediCon" @click="changSort(item)"></i> -->
@@ -73,6 +74,8 @@
                     <div style="float: left; width: calc(100% - 140px)">
                         <span>{{ index + 1 }}.</span>
                         <font @click="lookView(item)">{{ item.title }}</font>
+                        <el-button style="margin-left: 20px;padding: 4px 10px !important;" size="mini" type="primary" plain icon="el-icon-notebook-2" @click="htmlContet(item)"> Html</el-button>
+                
                     </div>
 
                     <el-button @click="Chukan0(item)" type="warning" plain size="mini" style="float: right"> Issue in advance </el-button>
@@ -119,11 +122,16 @@
                 <p style="font-size: 16px; margin: 20px 0 50px 0">Successfully uploaded the database!</p>
             </div>
         </el-dialog>
+        <commonHtml ref="htmlRef"></commonHtml>
     </div>
 </template>
 <script>
 import { Loading, Select } from 'element-ui';
+import commonHtml from '@/components/page/components/html/index.vue';
 export default {
+    components:{
+        commonHtml
+    },
     data() {
         return {
             baseUrl: this.Common.baseUrl,
@@ -178,8 +186,15 @@ export default {
         this.getDate();
     },
     methods: {
+        htmlContet(data){
+        console.log('data at line 189:', data)
+            this.$nextTick((e)=>{
+       this.$refs.htmlRef.htmlContet(data)         
+            })
+
+        },
         // 获取数据
-        getDate() {
+        getDate() {console.log('at line 189:',localStorage.getItem('U_pointJour') )
             this.$api
                 .post('api/Article/getJournal', {
                     // username: this.query.username
@@ -187,6 +202,7 @@ export default {
                 .then((res) => {
                     this.jourList = res;
                     if (localStorage.getItem('U_pointJour') == null) {
+                    
                         this.query.issn = this.jourList[0].issn;
 
                         this.currentJournal = this.jourList[0];
@@ -196,6 +212,8 @@ export default {
                             this.getNoralDate0();
                         }
                     } else {
+                        var info=this.jourList.find(e=>e.journal_id==localStorage.getItem('U_pointJour'))
+                        this.query.issn = info.issn;
                         if (this.currentJournal.cycle != 0) {
                             this.getNoralDate();
                         } else {
diff --git a/src/components/page/articleListEditor_E.vue b/src/components/page/articleListEditor_E.vue
index f960c52..7c0ae1c 100644
--- a/src/components/page/articleListEditor_E.vue
+++ b/src/components/page/articleListEditor_E.vue
@@ -270,24 +270,42 @@
                         <template slot="title">
                             Html Layout :
                             <span style="margin-left: 15px; color: #666" v-if="mains == ''">No Layout</span>
-                            <el-button type="primary" @click="htmlLayout2('creat')"   style="margin-left: 20px" class="import"  v-if="mains == ''"
-                                        >Create Html Proofread</el-button
-                                    >
-                            <span style="margin-left: 15px; color: #0b4b6a" v-if="mains != ''">Typesetting completed</span>
                             <el-button
-                                v-if="mains != ''"
                                 type="primary"
-                                plain
-                                icon="el-icon-document-copy"
-                                @click.stop
-                                @click="html_type == 2 ? htmlLayout2() : htmlLayout()"
+                                @click="htmlLayout2('creat')"
                                 style="margin-left: 20px"
+                                class="import"
+                                v-if="mains == ''"
+                                >Create Html Proofread</el-button
                             >
-                                <font>Edit Html Proofread</font>
-                            </el-button>
-                            <el-button
+                            <span style="margin-left: 15px; color: #0b4b6a" v-if="mains != ''">Typesetting completed</span>
+                            <template v-if="mains != ''">
+                                <el-button
+                                    v-if="html_type == 2&&tg_article_id!=0"
+                                    type="primary"
+                                    plain
+                                    icon="el-icon-document-copy"
+                                    @click.stop
+                                    @click=" htmlLayout2()"
+                                    style="margin-left: 20px"
+                                >
+                                    <font>Edit Html Proofread</font>
+                                </el-button>
+                                <el-button
+                                    v-if="html_type != 2"
+                                    type="primary"
+                                    plain
+                                    icon="el-icon-document-copy"
+                                    @click.stop
+                                    @click="htmlLayout()"
+                                    style="margin-left: 20px"
+                                >
+                                    <font>Edit Html Proofread</font>
+                                </el-button>
+                            </template>
 
-                                v-if="mains != ''&&html_type == 0"
+                            <el-button
+                                v-if="mains != '' && html_type == 0"
                                 type="danger"
                                 plain
                                 icon="el-icon-document-copy"
@@ -306,13 +324,13 @@
                                         >Create Html Proofread</el-button
                                     >
                                 </div> -->
-                                <!-- <el-radio v-model="createType" label="1">Use last manuscirpt version</el-radio>
+                            <!-- <el-radio v-model="createType" label="1">Use last manuscirpt version</el-radio>
                                 <el-radio v-model="createType" label="2">Use new file upload</el-radio> -->
 
-                                <!-- 使用默认最新稿件生成 -->
-                                
-                                <!-- 文件上传 -->
-                                <!-- <div class="up" style="margin: 20px 0 0 0" v-if="createType == '2'">
+                            <!-- 使用默认最新稿件生成 -->
+
+                            <!-- 文件上传 -->
+                            <!-- <div class="up" style="margin: 20px 0 0 0" v-if="createType == '2'">
                                     <el-upload
                                         ref="uploadFile"
                                         class="upload-demo up_newstyle"
@@ -334,11 +352,11 @@
                                     </el-upload>
                                     <el-button type="primary" @click="htmlLayout" class="import">Create Html Proofread</el-button>
                                 </div> -->
-                                <!-- end -->
+                            <!-- end -->
                             <!-- </div> -->
                             <!-- end -->
 
-                            <div class="titHtml" v-if="mains != '' && html_type != 2" style="height: 50vh;overflow-y: auto;">
+                            <div class="titHtml" v-if="mains != '' && html_type != 2" style="height: 50vh; overflow-y: auto">
                                 <div v-for="(item, index) in mains" :key="index">
                                     <p v-html="item.content" v-if="item.width == 0"></p>
                                     <p v-if="item.width != 0" class="MaxPicture">
@@ -427,6 +445,7 @@ import { watch } from 'vue';
 export default {
     data() {
         return {
+            tg_article_id: 0,
             html_type: null,
             htmlContent: '',
             wordStyle: `
@@ -986,7 +1005,7 @@ export default {
                     //批注
                     let contentHtml = '';
                     var isRemark = ``;
-                   
+
                     // 判断是否是图片
                     if (item.type == 1) {
                         var extension = item.image.url.split('.').pop().toLowerCase();
@@ -1084,21 +1103,19 @@ export default {
             this.$api
                 .post('api/Publish/getHtmlForType2', {
                     article_id: this.articleId
-                   
                 })
                 .then((res) => {
                     this.loadHtml = false;
                     if (res.code == 0) {
                         // console.log(res,'res')
-                        
+
                         this.mains = '';
-                        if( res.data.list.length>0){
+                        if (res.data.list.length > 0) {
                             this.mains = res.data.list;
                             this.getWord();
-                        }else{
+                        } else {
                             this.mains = '';
                         }
-                      
                     } else {
                         this.$message.error(res.msg);
                     }
@@ -1112,13 +1129,9 @@ export default {
             this.$api
                 .post('api/Publish/createHtmlForType2', {
                     article_id: this.articleId
-                    
-                })
-                .then((res) => {
-                   
                 })
+                .then((res) => {})
                 .catch((err) => {
-                    
                     this.$message.error(err);
                 });
         },
@@ -1141,8 +1154,8 @@ export default {
         },
         // 文章html弹出层
         async htmlContet(e) {
-       
             this.articleId = e.article_id;
+            this.tg_article_id = e.tg_article_id;
             // this.articleId = '3444';
             this.UpHtpFIle.article_id = e.article_id;
 
@@ -1156,24 +1169,20 @@ export default {
             this.UpLoadFile.article_id = e.article_id;
             this.html_type = e.html_type;
             // this.html_type = 2;
-           
-            if(this.html_type == 2){
-                 if (e.has_html == 1) {
-                
+
+            if (this.html_type == 2) {
+                if (e.has_html == 1) {
                     await this.getMainsInfo2();
 
                     this.HtmlVisible = true;
                 } else {
-                    this.mains=''
+                    this.mains = '';
                     this.HtmlVisible = true;
-                    
                 }
-            
-            }else{
+            } else {
                 await this.getMainsInfo(e);
-                    this.HtmlVisible = true;
+                this.HtmlVisible = true;
             }
-           
         },
 
         // 生成html
@@ -1197,23 +1206,23 @@ export default {
         // 		})
         // },
         // 修改文章html
-    async htmlLayout2(type) {
-       
+        async htmlLayout2(type) {
             if (type == 'creat') {
                 const loading = this.$loading({
-                lock: true,
-                text: 'Loading...',
-                spinner: 'el-icon-loading',
-                background: 'rgba(0, 0, 0, 0.7)'
-            });
-              await  this.creatMains();
-              await this.getMainsInfo2();
-              loading.close();
-            } else { this.HtmlVisible=false
+                    lock: true,
+                    text: 'Loading...',
+                    spinner: 'el-icon-loading',
+                    background: 'rgba(0, 0, 0, 0.7)'
+                });
+                await this.creatMains();
+                await this.getMainsInfo2();
+                loading.close();
+            } else {
+                this.HtmlVisible = false;
                 this.$router.push({
                     path: '/GenerateCharts',
                     query: {
-                        id: this.articleId
+                        id: this.tg_article_id
                     }
                 });
             }
diff --git a/src/components/page/components/html/index.vue b/src/components/page/components/html/index.vue
new file mode 100644
index 0000000..8d0cc99
--- /dev/null
+++ b/src/components/page/components/html/index.vue
@@ -0,0 +1,1325 @@
+<template>
+   
+        
+
+        <!-- Html排版 -->
+        <el-dialog title="HTML layout" :visible.sync="HtmlVisible" width="900px" :close-on-click-modal="false" @close="CancelHtml">
+            <div style="margin: 0 0 0 10px" class="htmlfile">
+                <h3
+                    style="font-size: 16px; margin-bottom: 25px; line-height: 22px; letter-spacing: -0.5px; word-break: break-word"
+                    v-html="UpHtpFIle.title"
+                ></h3>
+                <div target="_blank" v-if="UpHtpFIle.htmlfile == ''">
+                    <font style="font-size: 16px">Html File :</font>
+                    <span style="color: rgb(102, 102, 102); margin-left: 15px">No Manuscript</span>
+                </div>
+                <div target="_blank" v-if="UpHtpFIle.htmlfile != ''">
+                    <font style="font-size: 16px">Html File :</font>
+                    <a :href="'https://www.tmrjournals.com/public/articleHTML/' + UpHtpFIle.htmlfile" target="_blank">
+                        <img src="@/assets/img/icon_0.png" style="vertical-align: sub; margin: 0 15px" />
+                        <span style="color: #333">Html File</span>
+                        <i class="el-icon-view" style="color: #66b1ff; font-weight: bold; margin-left: 20px"></i>
+                    </a>
+                </div>
+                <!-- <div style="margin: 20px 0 0 88px">
+					<el-upload ref="uploadUpHt" class="upload-demo" :action="baseUrl + 'api/Production/up_pdf_file'"
+						accept=".pdf," name="pdf" :before-upload="beforeupload_UpHt" :on-error="uperr_UpHt"
+						:on-success="upSuccess_UpHt" :limit="1" :on-exceed="alertlimit" :on-remove="removefileUpHt"
+						style="display: inline-block;">
+						<div class="el-upload__text" style="padding:6px 10px;background-color: #006699;">
+							<font style="color: #fff;font-size: 12px;">
+								<b class="el-icon-upload2" style="font-weight: bold;margin-right: 5px;"></b>
+								Click Re upload
+							</font>
+						</div>
+						<div class="el-upload__tip" slot="tip" style="vertical-align: top;">Only pdf file
+							can be uploaded(.pdf)</div>
+					</el-upload>
+				</div> -->
+                <p style="border-top: 2px dashed #0066994d; margin: 20px 0 0 0; padding: 20px 0 0 0"></p>
+                <el-collapse v-model="collapseActiveNames">
+                    <el-collapse-item name="html" v-loading="loadHtml">
+                        <template slot="title">
+                            Html Layout :
+                            <span style="margin-left: 15px; color: #666" v-if="mains == ''">No Layout</span>
+                            <el-button
+                                type="primary"
+                                @click="htmlLayout2('creat')"
+                                style="margin-left: 20px"
+                                class="import"
+                                v-if="mains == ''"
+                                >Create Html Proofread</el-button
+                            >
+                            <span style="margin-left: 15px; color: #0b4b6a" v-if="mains != ''">Typesetting completed</span>
+                            <template v-if="mains != ''">
+                                <el-button
+                                    v-if="html_type == 2&&tg_article_id!=0"
+                                    type="primary"
+                                    plain
+                                    icon="el-icon-document-copy"
+                                    @click.stop
+                                    @click=" htmlLayout2()"
+                                    style="margin-left: 20px"
+                                >
+                                    <font>Edit Html Proofread</font>
+                                </el-button>
+                                <el-button
+                                    v-if="html_type != 2"
+                                    type="primary"
+                                    plain
+                                    icon="el-icon-document-copy"
+                                    @click.stop
+                                    @click="htmlLayout()"
+                                    style="margin-left: 20px"
+                                >
+                                    <font>Edit Html Proofread</font>
+                                </el-button>
+                            </template>
+
+                            <el-button
+                                v-if="mains != '' && html_type == 0"
+                                type="danger"
+                                plain
+                                icon="el-icon-document-copy"
+                                @click.stop
+                                @click="clearHtmlLayout()"
+                                style="margin-left: 20px"
+                            >
+                                <font>Remove Html Proofread</font>
+                            </el-button>
+                        </template>
+                        <div>
+                            <!-- 生成选项 -->
+                            <!-- <div v-if="mains == ''">
+                                <div style="margin: 20px 0 0 0" >
+                                    <el-button type="primary" @click="htmlLayout2('creat')" class="import"
+                                        >Create Html Proofread</el-button
+                                    >
+                                </div> -->
+                            <!-- <el-radio v-model="createType" label="1">Use last manuscirpt version</el-radio>
+                                <el-radio v-model="createType" label="2">Use new file upload</el-radio> -->
+
+                            <!-- 使用默认最新稿件生成 -->
+
+                            <!-- 文件上传 -->
+                            <!-- <div class="up" style="margin: 20px 0 0 0" v-if="createType == '2'">
+                                    <el-upload
+                                        ref="uploadFile"
+                                        class="upload-demo up_newstyle"
+                                        :action="upload_manuscirpt"
+                                        accept=".docx"
+                                        name="completedManuscirpt"
+                                        :before-upload="beforeupload_manuscirpt"
+                                        :on-error="uperr_coverLetter"
+                                        :on-success="upSuccess_manuscirpt"
+                                        :limit="1"
+                                        :on-exceed="alertlimit"
+                                        :on-remove="removefilemanuscirpt"
+                                        :file-list="fileL_manuscirpt"
+                                    >
+                                        <div class="el-upload__text" @click="clearUploadedFile">
+                                            <em>Upload File</em>
+                                        </div>
+                                     
+                                    </el-upload>
+                                    <el-button type="primary" @click="htmlLayout" class="import">Create Html Proofread</el-button>
+                                </div> -->
+                            <!-- end -->
+                            <!-- </div> -->
+                            <!-- end -->
+
+                            <div class="titHtml" v-if="mains != '' && html_type != 2" style="height: 50vh; overflow-y: auto">
+                                <div v-for="(item, index) in mains" :key="index">
+                                    <p v-html="item.content" v-if="item.width == 0"></p>
+                                    <p v-if="item.width != 0" class="MaxPicture">
+                                        <img :src="baseUrl + 'public/mainimg/' + item.content" :style="'width:' + item.width + 'px'" />
+                                        <font :style="'width:' + item.width + 'px'">{{ item.note }}</font>
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="titHtml titHtml1" v-if="htmlContent && html_type == 2">
+                                <common-word
+                                    :readonly="true"
+                                    v-if="htmlContent"
+                                    ref="commonWord"
+                                    :value="htmlContent"
+                                    :wordStyle="wordStyle"
+                                    style="width: calc(100%); height: 50vh"
+                                    :style="`100%`"
+                                ></common-word>
+                                <!-- <div v-html="htmlContent"></div> -->
+                            </div>
+                        </div>
+                    </el-collapse-item>
+                    <el-collapse-item name="references">
+                        <template slot="title">
+                            References :
+                            <span style="margin-left: 15px; color: #666" v-if="refersList.length == 0">Have no refernces</span>
+                            <span style="margin-left: 15px; color: #0b4b6a" v-if="refersList.length > 0"
+                                >There are {{ refersList.length }} pieces of data in total.</span
+                            >
+                            <el-button
+                                type="primary"
+                                plain
+                                icon="el-icon-document-copy"
+                                @click="goEditRefernces"
+                                @click.stop
+                                style="margin-left: 20px"
+                            >
+                                <font>Edit References</font>
+                            </el-button>
+                        </template>
+                        <div>
+                            <el-table
+                                class="table99"
+                                v-if="refersList.length > 0"
+                                height="400px"
+                                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+                                :data="refersList"
+                                stripe
+                                style="width: 100%"
+                            >
+                                <el-table-column type="index" align="center" width="50"> </el-table-column>
+                                <el-table-column label="CONTENT" align="center">
+                                    <template slot-scope="scope">
+                                        <div style="text-align: left" v-if="scope.row.refer_type == 'journal'">
+                                            <p>
+                                                {{ scope.row.author }},{{ scope.row.title }}, <em>{{ scope.row.joura }}</em> ,{{
+                                                    scope.row.dateno
+                                                }}<br />
+                                            </p>
+                                            <a class="doiLink" :href="scope.row.doilink" target="_blank">{{ scope.row.doilink }}</a>
+                                        </div>
+                                        <div style="text-align: left" v-if="scope.row.refer_type == 'book'">
+                                            <p>{{ scope.row.author }},{{ scope.row.title }},{{ scope.row.dateno }}<br /></p>
+                                            <a class="doiLink" :href="scope.row.isbn" target="_blank">{{ scope.row.isbn }}</a>
+                                        </div>
+                                        <p class="wrongLine" style="text-align: left" v-if="scope.row.refer_type == 'other'">
+                                            {{ scope.row.refer_frag }}
+                                        </p>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                    </el-collapse-item>
+                </el-collapse>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="CancelHtml" plain>Cancel</el-button>
+            </span>
+        </el-dialog>
+    
+</template>
+
+<script>
+import { Loading } from 'element-ui';
+import { watch } from 'vue';
+export default {
+    data() {
+        return {
+            tg_article_id: 0,
+            html_type: null,
+            htmlContent: '',
+            wordStyle: `
+            p {
+            position: relative;
+            padding: 8px 15px;
+            min-height: 22px;
+            border: 2px dashed #fff;
+            border-radius: 5px;
+            color: #606266;
+            }
+            p {
+            font-size: 14px;
+            line-height: 22px;
+            }
+
+            .imgBox .chNumer {
+            position: absolute;
+            top: -2px;
+            right: -1px;
+            border-radius: 3px;
+            font-size: 10px;
+            background-color: rgb(0 102 153 / 85%);
+            color: #fff;
+            padding: 0 6px;
+            }
+
+            .MaxPicture {
+            text-align: center;
+            }
+
+            .MaxPicture > img {
+            margin-bottom: 10px;
+            }
+
+            .font {
+            display: block;
+            margin: 0 auto;
+            font-size: 13px;
+            }
+            .tableTitle{
+                text-align:center!important;
+                font-weight: bold;
+            }
+            `,
+            articleId: null,
+            createType: '1', // html生成方式
+            collapseActiveNames: [], // 手风琴绑定值
+            // oldFile:false,   // 是否用新文件生成
+            fileL_manuscirpt: [],
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            username: localStorage.getItem('U_name'),
+            editor_id: localStorage.getItem('U_id'),
+            queryType: {
+                issn: '',
+                journal_stage_id: 0,
+                seach: '',
+                pageIndex: 1,
+                pageSize: 10
+            },
+            Total: 0,
+            dataTable: [],
+            stageList: [],
+            journalList: [],
+            guestList: [],
+            EditMes: {
+                journal_special_id: 0,
+                article_id: 0,
+                title: 0,
+                sort: 0
+            },
+            RelatMes: {
+                keyword: ''
+            },
+            UpHtpFIle: {
+                title: '',
+                article_id: '',
+                p_article_id: null,
+                htmlfile: '',
+                mains: []
+                // refers:[], //引用参数
+            },
+            refersList: [],
+            UpLoadFile: {
+                article_id: '',
+                file: ''
+            },
+            HtmlMes: {},
+            EditVisible: false,
+            RelatVisible: false,
+            topicVisible: false,
+            HtmlVisible: false,
+            topListName: [],
+            listopic: [],
+            title_header: '',
+            alljourData: [],
+            selectRelate: [],
+            chooseData: [],
+            loading: false,
+            steps_jour: 0,
+            loadHtml: false, // mains 加载动画
+            form: {
+                manuscirpt: ''
+            },
+            fileData: '', // 上传后返回的文件url
+            mains: [], // html 数据,
+            newMains: []
+        };
+    },
+    created() {
+       
+    },
+    computed: {
+       
+    },
+    methods: {
+        //跳转婴用列表
+        goCite(row) {
+            console.log('row at line 483:', row.article_id);
+            this.$router.push({
+                name: 'citeList',
+                query: {
+                    article_id: row.article_id,
+                    journal_id: row.journal_id
+                }
+            });
+        },
+        // 获取列表
+        getDate() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post('api/Publish/getPublicAiticles', this.queryType)
+                .then((res) => {
+                    this.dataTable = res.data.articleList;
+                    this.Total = res.data.count;
+                    loading.close();
+                })
+                .catch((err) => {
+                    console.log(err);
+                    loading.close();
+                });
+        },
+        // 清空html
+        clearHtmlLayout() {
+            this.$confirm('You are Removing Html Proofread, do you want to continue?', 'Tips', {
+                confirmButtonText: 'Sure',
+                cancelButtonText: 'Cancle',
+                type: 'warning'
+            })
+                .then(() => {
+                    this.$api
+                        .post('api/Production/clearWebMains', {
+                            article_id: this.articleId
+                        })
+                        .then((res) => {
+                            if (res.code == 0) {
+                                this.getDate();
+                            } else {
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            console.log(err);
+                        });
+                })
+                .catch(() => {});
+        },
+        // 跳转到引用编辑页面
+        goEditRefernces() {
+            // let pid = null
+            this.HtmlVisible = false;
+            //this.UpHtpFIle.refers.length > 0 ? pid = this.UpHtpFIle.refers[0].p_article_id : \
+            this.$router.push({
+                name: 'publishRefernceEditor',
+                query: {
+                    id: this.articleId,
+                    pid: this.UpHtpFIle.p_article_id
+                }
+            });
+        },
+        CancelHtml() {
+            this.HtmlVisible = false;
+            this.form.manuscirpt = '';
+            this.fileData = '';
+            this.fileL_manuscirpt = [];
+            this.createType = '1'; // html生成方式
+            this.collapseActiveNames = ['html'];
+        },
+        beforeupload_manuscirpt(file) {
+            let flieArr = file.name.split('.');
+            let fileSuffix = flieArr[flieArr.length - 1];
+            if (fileSuffix != 'docx') {
+                this.$message.error('Only word and compressed files can be uploaded(.docx)');
+                return false;
+            }
+        },
+        upSuccess_manuscirpt(res, file) {
+            if (res.code == 0) {
+                this.fileData = res.upurl;
+                this.form.manuscirpt = 'manuscirpt/' + res.upurl;
+                this.fileL_manuscirpt = [{}];
+                this.fileL_manuscirpt[0].name = 'Manuscirpt File';
+                this.fileL_manuscirpt[0].url = 'manuscirpt/' + res.upurl;
+            } else {
+                this.$message.error('service error: ' + res.msg);
+            }
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        removefilemanuscirpt(file, fileList) {
+            this.form.manuscirpt = '';
+            this.fileL_manuscirpt = [];
+        },
+        clearUploadedFile() {
+            this.$refs['uploadFile'].clearFiles();
+        },
+        uperr_coverLetter(err) {
+            this.$message.error('Upload error');
+        },
+
+        //初始化期刊分期
+        getJourDate() {
+            this.$api
+                .post('api/Article/getJournal', {
+                    username: this.username
+                })
+                .then((res) => {
+                    this.journalList = res;
+                    this.queryType.issn = res[0].issn;
+
+                    this.getStageDate();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+
+        //选择期刊
+        getJourChange() {
+            this.queryType.journal_stage_id = 0;
+            this.getStageDate();
+        },
+
+        //选择分期
+        getStageDate() {
+            this.$api
+                .post('api/Publish/getAllStages', this.queryType)
+                .then((res) => {
+                    this.stageList = res.data.stages;
+                    this.getDate();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+
+        // 稿件信息完善编辑
+        EditDetail(row) {
+            this.EditMes.article_id = row.article_id;
+            this.EditMes.title = row.title;
+            this.EditMes.sort = row.sort;
+            this.EditMes.journal_special_id = row.journal_special_id;
+
+            this.topListData(row.article_id);
+
+            this.$api
+                .post('api/Publish/getJournalSpecials', this.queryType)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.guestList = res.data.stages;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+
+            setTimeout(() => {
+                this.EditVisible = true;
+            }, 500);
+        },
+
+        // 话题列表
+        topListData(e) {
+            this.topListName = [];
+            this.$api
+                .post('api/Publish/getArticleTopics', {
+                    article_id: e
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        for (var r = 0; r < res.data.nowtopic.length; r++) {
+                            for (var v = 0; v < res.data.topics.length; v++) {
+                                if (res.data.nowtopic[r].topic_id == res.data.topics[v].journal_topic_id) {
+                                    res.data.topics[v].article_to_topic_id = res.data.nowtopic[r].article_to_topic_id;
+
+                                    this.topListName.push(res.data.topics[v].tname);
+                                }
+                            }
+                        }
+                        this.listopic = res.data.topics;
+
+                        let wzht_list = [];
+                        for (var i = 0; i < res.data.nowtopic.length; i++) {
+                            wzht_list.push(res.data.nowtopic[i].topic_id + '');
+                        }
+                        this.EditMes.topic = wzht_list;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+
+        // 选择客座
+        saveEdit() {
+            this.$api
+                .post('api/Publish/editArticleToSpecial', this.EditMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.$message.success('Edit the article successfully！');
+                        this.getDate();
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+
+            this.$api
+                .post('api/Publish/editArticle', this.EditMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+
+        // 选择话题
+        chan_topic($event, val) {
+            if ($event == true) {
+                this.$api
+                    .post('api/Publish/addArticleToTopic', {
+                        article_id: this.EditMes.article_id,
+                        topic_id: val.journal_topic_id
+                    })
+                    .then((res) => {
+                        if (res.code == 0) {
+                            this.topListData(this.EditMes.article_id);
+                            this.$message.success('Successfully added topic!');
+                        } else {
+                            this.$message.error(res.msg);
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err);
+                    });
+            } else {
+                this.$api
+                    .post('api/Publish/delArticleToTopic', {
+                        article_to_topic_id: val.article_to_topic_id
+                    })
+                    .then((res) => {
+                        if (res.code == 0) {
+                            this.topListData(this.EditMes.article_id);
+                            this.$message.success('Topic deleted successfully!');
+                        } else {
+                            this.$message.error(res.msg);
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err);
+                    });
+            }
+        },
+
+        // 关闭相关文章
+        RelatCancle() {
+            this.RelatMes.keyword = '';
+            this.alljourData = [];
+            this.selectRelate = [];
+        },
+
+        // 弹出相关文章
+        ChoseRelated(row) {
+            this.RelatMes.title = row.title;
+            this.RelatMes.article_id = row.article_id;
+            this.SelectedRelated();
+            setTimeout(() => {
+                this.RelatVisible = true;
+            }, 300);
+        },
+
+        // 获取已经选择的相关期刊
+        SelectedRelated() {
+            this.$api
+                .post('api/Publish/getArticleRelates', this.RelatMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.chooseData = res.data.articles;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+
+        // 获取全部的相关期刊
+        NoneRelated() {
+            this.steps_jour = 0;
+            if (this.RelatMes.keyword == '') {
+                this.$message.error('Keyword cannot be empty!');
+                return;
+            }
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post('api/Publish/getKeywordArticleOrderJournal', this.RelatMes)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.alljourData = res.data.journals;
+                        if (this.alljourData.length > 0) {
+                            this.selectRelate = this.alljourData[this.steps_jour].articles;
+                        } else {
+                            this.selectRelate = [];
+                        }
+
+                        loading.close();
+                    } else {
+                        this.$message.error(res.msg);
+                        loading.close();
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                    loading.close();
+                });
+        },
+
+        // 切换期刊-相关期刊
+        steps_title(e) {
+            this.steps_jour = e;
+            this.selectRelate = this.alljourData[e].articles;
+        },
+
+        // 鼠标状态-相关期刊
+        mouseover(item) {
+            // 移入
+            this.$set(item, 'dropdownShow', true);
+        },
+        mouseout(item) {
+            // 移除
+            this.$set(item, 'dropdownShow', false);
+        },
+
+        // 删除-相关期刊
+        deleteTree(e) {
+            // 二次确认删除
+            this.$confirm('Are you sure you want to delete ' + e.title + '?', 'Tips', {
+                type: 'warning',
+                confirmButtonText: 'OK',
+                cancelButtonText: 'Cancel'
+            })
+                .then(() => {
+                    this.$api
+                        .post('api/Publish/delArticleRelate', {
+                            article_id: this.RelatMes.article_id,
+                            del_article_id: e
+                        })
+                        .then((res) => {
+                            if (res.code == 0) {
+                                this.$message.success('Deletion succeeded!');
+                                this.SelectedRelated();
+                            } else {
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            this.$message.error(err);
+                        });
+                })
+                .catch(() => {});
+        },
+
+        // 添加-相关期刊
+        addTree(e) {
+            this.$api
+                .post('api/Publish/addArticleRelate', {
+                    article_id: this.RelatMes.article_id,
+                    add_article_id: e
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.$message.success('Successfully added related journal!');
+                        this.SelectedRelated();
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+
+        // 点击HTML查询数据
+        getMainsInfo(e) {
+            this.loadHtml = true;
+            this.$api
+                .post('api/Publish/getArticleMains', {
+                    article_id: e.article_id
+                })
+                .then((res) => {
+                    this.loadHtml = false;
+                    if (res.code == 0) {
+                        // console.log(res,'res')
+                        this.mains = res.data.mains;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.loadHtml = false;
+                    this.$message.error(err);
+                });
+        },
+        getWord() {
+            var htmlContent = ``;
+            htmlContent += this.mains
+                .map((item) => {
+                    //批注
+                    let contentHtml = '';
+                    var isRemark = ``;
+
+                    // 判断是否是图片
+                    if (item.type == 1) {
+                        var extension = item.image.url.split('.').pop().toLowerCase();
+                        if (extension == 'tif') {
+                            contentHtml = `
+                        <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
+                                item.am_id
+                            }">
+            <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
+            <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
+        </p>
+                            `;
+                        } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
+                            contentHtml = `
+                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
+                                item.ami_id
+                            }" main-id="${item.am_id}">
+                                    ${isRemark}
+                                    <img src="${this.mediaUrl + item.image.url}" style="width: ${
+                                item.width ? `${item.width}px` : '100%'
+                            }"  />
+                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
+                                item.image.note ? item.image.note : ''
+                            }</font>
+                                </p>
+                            `;
+                        } else {
+                            contentHtml = `
+                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
+                                item.ami_id
+                            }" main-id="${item.am_id}">
+                                   ${isRemark}
+                                    <span
+                                            style="
+                                                text-align: center;
+                                                font-size: 30px;
+                                                display: flex;
+                                                align-items: center;
+                                                justify-content: center;
+                                            "
+                                        >
+                                        Figures ( .${item.image.url.split('.').pop().toUpperCase()})
+                                              </span>
+
+                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
+                                item.image.note ? item.image.note : ''
+                            }</font>
+                                </p>
+                            `;
+                        }
+                    } else if (item.type == 2) {
+                        var tableList = JSON.parse(item.table.table_data);
+
+                        contentHtml = `
+    <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
+                            item.am_id
+                        }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
+        ${isRemark}
+        <font  class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
+                    <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
+            ${tableList
+                .map((row) => {
+                    return `
+                    <tr>
+                        ${row
+                            .map((cell) => {
+                                return `
+                                <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
+                                    <span>${cell.text || ''}</span>
+                                </td>
+                            `;
+                            })
+                            .join('')} <!-- join the cells in the row -->
+                    </tr>
+                `;
+                })
+                .join('')} <!-- join the rows -->
+        </table>
+        <font  class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
+    </div>
+`;
+                    } else {
+                        contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
+                    }
+
+                    // 判断是否是表格类型
+
+                    return contentHtml;
+                })
+                .join('');
+            this.htmlContent = htmlContent;
+        },
+        getMainsInfo2(e) {
+            this.loadHtml = true;
+            this.$api
+                .post('api/Publish/getHtmlForType2', {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    this.loadHtml = false;
+                    if (res.code == 0) {
+                        // console.log(res,'res')
+
+                        this.mains = '';
+                        if (res.data.list.length > 0) {
+                            this.mains = res.data.list;
+                            this.getWord();
+                        } else {
+                            this.mains = '';
+                        }
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.loadHtml = false;
+                    this.$message.error(err);
+                });
+        },
+        creatMains(e) {
+            this.$api
+                .post('api/Publish/createHtmlForType2', {
+                    article_id: this.articleId
+                })
+                .then((res) => {})
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
+        async getRefersList() {
+            var data;
+            await this.$api
+                .post('api/Publish/getArticleReferences', {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        data = res.data.list;
+                    } else {
+                        // this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {});
+
+            return data;
+        },
+        // 文章html弹出层
+        async htmlContet(e) {
+        console.log('e at line 923:', e)
+            this.articleId = e.article_id;
+            this.tg_article_id = e.tg_article_id;
+            // this.articleId = '3444';
+            this.UpHtpFIle.article_id = e.article_id;
+
+            this.refersList = await this.getRefersList();
+            // this.UpHtpFIle.refers = e.refers
+            this.UpHtpFIle.p_article_id = e.p_article_id;
+            this.UpHtpFIle.doi = e.doi;
+            this.UpHtpFIle.htmlfile = e.file_html;
+            this.UpHtpFIle.title = e.title;
+            this.UpHtpFIle.mains = e.mains;
+            this.UpLoadFile.article_id = e.article_id;
+            this.html_type = e.html_type;
+            // this.html_type = 2;
+
+            if (this.html_type == 2) {
+                if (e.has_html == 1) {
+                    await this.getMainsInfo2();
+
+                    this.HtmlVisible = true;
+                } else {
+                    this.mains = '';
+                    this.HtmlVisible = true;
+                }
+            } else {
+                await this.getMainsInfo(e);
+                this.HtmlVisible = true;
+            }
+        },
+
+        // 生成html
+        // CreateHtml(){
+        // 	const loading = this.$loading({
+        // 		lock: true,
+        // 		text: 'Loading...',
+        // 		spinner: 'el-icon-loading',
+        // 		background: 'rgba(0, 0, 0, 0.7)'
+        // 	});
+        // 	this.$api
+        // 		.post('api/Production/getProductionMainsByDoi', {
+        // 			doi: this.UpHtpFIle.doi,
+
+        // 		})
+        // 		.then(res => {
+        // 			if (res.code == 0) {
+        // 				loading.close()
+        // 				this.htmlLayout()
+        // 			}
+        // 		})
+        // },
+        // 修改文章html
+        async htmlLayout2(type) {
+            if (type == 'creat') {
+                const loading = this.$loading({
+                    lock: true,
+                    text: 'Loading...',
+                    spinner: 'el-icon-loading',
+                    background: 'rgba(0, 0, 0, 0.7)'
+                });
+                await this.creatMains();
+                await this.getMainsInfo2();
+                loading.close();
+            } else {
+                this.HtmlVisible = false;
+                this.$router.push({
+                    path: '/GenerateCharts',
+                    query: {
+                        id: this.tg_article_id
+                    }
+                });
+            }
+        },
+        htmlLayout() {
+            var that = this;
+
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            this.$api
+                .post('api/Production/getProductionMainsByDoi', {
+                    doi: this.UpHtpFIle.doi,
+                    file: this.fileData
+                })
+                .then((res) => {
+                    if (res.code == 0) {
+                        loading.close();
+                        this.HtmlVisible = false;
+
+                        if (this.mains == '') {
+                            this.$router.push({
+                                path: 'comArtHtmlCreat',
+                                query: {
+                                    doi: this.UpHtpFIle.doi,
+                                    artID: this.UpHtpFIle.article_id
+                                }
+                            });
+                        } else {
+                            this.$router.push({
+                                path: 'comArtHtmlEdit',
+                                query: {
+                                    artID: this.UpHtpFIle.article_id
+                                }
+                            });
+                        }
+                    } else {
+                        loading.close();
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    loading.close();
+                    this.$message.error(err);
+                });
+        },
+
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.queryType, 'pageIndex', val);
+            this.getDate();
+        },
+
+        // 跳转页面
+        lookView(e) {
+            let urlBlan = 'https://www.tmrjournals.cn/article.html?J_num=' + e.journal_id + '&a_id=' + e.article_id;
+            window.open(urlBlan, '_blank');
+        },
+
+        // 文件上传
+        beforeupload_UpHt(file) {},
+        uperr_UpHt(err) {
+            this.$message.error('upload error');
+        },
+        upSuccess_UpHt(res, file) {
+            return;
+            if (res.code == 0) {
+                this.UpLoadFile.file = 'pdf/' + res.upurl;
+                this.$api
+                    .post('api/Production/updateArticlePdf', this.UpLoadFile)
+                    .then((res) => {
+                        if (res.code == 0) {
+                            this.$message.success('Upload PDF succeeded!');
+                            this.$refs.uploadUpHt.clearFiles();
+                            this.UpLoadFile.file = '';
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err);
+                    });
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        removefileUpHt(file, fileList) {
+            this.UpLoadFile.file = '';
+        },
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        }
+    },
+    watch: {
+        HtmlVisible: {
+            handler(newVal, oldVal) {
+                if (this.UpHtpFIle.mains == 0 && newVal == true) {
+                    //打开赋值
+                    this.collapseActiveNames.push('html');
+                } else {
+                    // 关闭清空
+                    this.collapseActiveNames = [];
+                }
+            },
+            deep: true // 可以深度检测到 person 对象的属性值的变化
+        }
+        // 	collapseActiveNames : {
+        // 	handler(newVal, oldVal) {
+        // 		console.log(newVal, '新传入的值')
+        // 		this.$nextTick(()=>{
+        // 			this.oldFile = newVal.find((item)=>{item.name===''});
+        // 		})
+        // 	},
+        // // immediate: true,
+        // 	deep: true // 可以深度检测到 person 对象的属性值的变化
+        // 	}
+    }
+};
+</script>
+
+<style scoped>
+.doiLink {
+    color: #409eff;
+}
+.up_newstyle {
+    margin-left: 10px;
+}
+.up .up_newstyle {
+    margin-left: 0;
+    margin-bottom: 15px;
+}
+/deep/ .el-upload--text {
+    background-color: #ecf5ff;
+    border: 1px solid #b3d8ff !important;
+    padding: 0 7px;
+    /* margin-left: 10px; */
+}
+
+.up_newstyle .el-upload__text em {
+    color: #409eff !important;
+    font-size: 12px;
+}
+.handle-box {
+    margin-bottom: 18px;
+}
+
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+
+.journal_list {
+    border-right: 2px solid #e4e7ed;
+    margin: 0 8px 0 0;
+    padding: 10px 0;
+}
+
+.journal_list > div.Tab_col {
+    color: #006699;
+    font-weight: bold;
+    border-right: 2px solid #006699;
+    margin-right: -2px;
+    letter-spacing: -0.5px;
+}
+
+.journal_list > div > p {
+    margin-bottom: 10px;
+    padding: 8px 0;
+    cursor: pointer;
+    font-size: 15px;
+    line-height: 20px;
+}
+
+.reta_tit {
+    margin: 30px 0 30px 0;
+    font-weight: bold;
+    letter-spacing: -0.5px;
+    font-size: 15px;
+}
+
+.reta_riqi {
+    font-weight: bold;
+    font-size: 17px;
+    margin: 18px 0 20px 15px;
+}
+
+.choose_list {
+    padding: 14px 15px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ebf5ff;
+    background-color: #f8fbff;
+    -webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
+    box-shadow: inset 2px 30px 15px -20px #ebf5ff;
+    position: relative;
+}
+
+.selected_list {
+    padding: 15px 15px;
+    border-radius: 10px;
+    position: relative;
+}
+
+.selected_list:nth-child(2n + 1) {
+    background-color: #f8fbff;
+    /* 		-webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
+		box-shadow: inset 2px 30px 15px -20px #ebf5ff; */
+}
+
+.selected_list:hover {
+    background-color: #ebf5ff;
+}
+
+.choose_title,
+.selected_title {
+    font-size: 14px;
+    line-height: 22px;
+    margin-right: 80px;
+}
+
+.choose_title > span {
+    margin: 0 10px;
+}
+
+.choose_time {
+    font-size: 15px;
+    color: #888;
+    margin: 0 0 10px 0;
+}
+
+.choose_btn,
+.selected_btn {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+.titHtml {
+    border: 2px dotted #ccc;
+    background-color: #f7f7f7;
+    border-radius: 2px;
+    padding: 0px 20px 20px 20px;
+    margin: 15px 0 0 0;
+}
+
+.titHtml > div {
+    letter-spacing: 0.03em;
+    margin: 15px 0 0 0;
+}
+
+.titHtml > div > p {
+    font-size: 14px;
+    line-height: 1.4;
+    min-height: 19px;
+    color: #444;
+    word-break: break-word;
+    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
+}
+
+.titHtml .MaxPicture {
+    text-align: center;
+}
+
+.titHtml .MaxPicture > img {
+    margin-bottom: 10px;
+}
+
+.titHtml .MaxPicture > font {
+    display: block;
+    margin: 0 auto;
+    font-size: 13px;
+}
+
+/deep/.htmlfile .upload-demo {
+    overflow: auto;
+}
+
+/deep/.htmlfile .upload-demo .el-upload {
+    width: 55px;
+    float: left;
+    margin-left: 5px;
+    border: none;
+    text-align: left;
+    height: 35px;
+}
+
+/deep/.htmlfile .upload-demo .el-upload {
+    margin-left: 0 !important;
+    width: 150px !important;
+    height: auto !important;
+    text-align: center !important;
+}
+
+/deep/.htmlfile .upload-demo .el-upload__tip {
+    margin-left: 15px;
+    float: left;
+}
+
+/deep/.htmlfile .upload-demo .el-upload-list {
+    margin-top: -4px;
+    margin-left: 20px;
+    float: left;
+    width: 500px;
+    /* display: none; */
+}
+
+/* /deep/ .import.is-disabled{background: #ecf5ff !important; color: #8cc5ff !important; border-color: #d9ecff !important;} */
+
+/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item {
+		width: 30px !important;
+	} */
+
+/deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item:hover {
+    cursor: pointer;
+}
+
+/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item .el-upload-list__item-name {
+		width: 30px;
+	} */
+
+/* /deep/.htmlfile .upload-demo .el-upload-list .el-upload-list__item .el-upload-list__item-status-label {
+		display: none;
+	} */
+
+/* /deep/.htmlfile .upload-demo .el-upload-list__item:hover .el-icon-close {
+		display: none;
+	} */
+/deep/ .table99 th {
+    background: #e4e7ed !important;
+    color: #777 !important;
+}
+</style>