站点进度，首页进度

src/views/adweb/enquiry/modules/enquiryTrackRecord.vue

@@ -22,25 +22,17 @@
           <template v-for="(line, index) in enquiryRecordList" :key="index">
             <a-timeline-item>
               <p class="m-0">
-                <a-icon type="history"/>&nbsp;&nbsp;{{line.ctime}}&nbsp;&nbsp;&nbsp;&nbsp;<a-icon type="user"/>
-                {{line.realname}}
-              </p>
-              <p class="mt-5">
-                <a-icon type="form"/>&nbsp;&nbsp;{{line.content}}
+                <a-icon type="history" />&nbsp;&nbsp;{{ line.ctime }}&nbsp;&nbsp;&nbsp;&nbsp;<a-icon type="user" />
+                {{ line.realname }}
               </p>
+              <p class="mt-5"> <a-icon type="form" />&nbsp;&nbsp;{{ line.content }} </p>
             </a-timeline-item>
           </template>
         </a-timeline>
 
         <a-divider>添加跟踪记录</a-divider>
 
-        <a-form
-          ref="ruleForm"
-          :model="enquiryRecordForm"
-          :rules="enquiryRecordFormRules"
-          :label-col="{span:'3'}"
-          :wrapper-col="{span:'21'}"
-        >
+        <a-form ref="ruleForm" :model="enquiryRecordForm" :rules="enquiryRecordFormRules" :label-col="{ span: '3' }" :wrapper-col="{ span: '21' }">
           <a-form-item label="跟踪记录" name="record">
             <a-textarea
               :auto-size="{ minRows: 6, maxRows: 10 }"
@@ -57,134 +49,128 @@
 </template>
 
 <script>
-import {getAction, postAction, postActionForm} from '/@/api/manage/manage'
-import Qs from 'qs'
-import {useMessage} from "@/hooks/web/useMessage";
-const { createMessage } = useMessage();
-
-export default {
-  name: 'enquiryTrackRecord',
-  data(){
-    return {
-      modalVisible: false,
-      modalTitle: '',
-      confirmLoading:false,
-      modalEnquiryRecordStatus:false,
-      cancelText: "取消",
-      spinning:false,
-      enquiryRecordList: [],
-      tipTitle:'',
-      enquiryInfo:{},
-      enquiryRecordForm: {
-        record: ''
-      },
-      enquiryRecordFormRules: {
-        record: [
-          { required: true, message: '跟踪记录不能为空', trigger: 'blur' }
-        ]
-      },
-    }
-  },
-  mounted() {
-
-  },
-  methods:{
-    init(record){
-      this.modalVisible = true
-      this.modalTitle = '询盘跟踪记录：' + record.no
-      this.modalEnquiryRecordStatus = true;
-      this.enquiryInfo = record;
-      this.cancelText = "关闭"
-      this.getEnquiryRecord(record.id);
-    },
-
-    handleOk() {
-      let that = this
-      let modalEnquiryRecordStatus = that.modalEnquiryRecordStatus;
-
-      if (modalEnquiryRecordStatus) {
-        that.addEnquiryRecord();
-      }
+  import { getAction, postAction, postActionForm } from '/@/api/manage/manage';
+  import Qs from 'qs';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+
+  export default {
+    name: 'EnquiryTrackRecord',
+    data() {
+      return {
+        modalVisible: false,
+        modalTitle: '',
+        confirmLoading: false,
+        modalEnquiryRecordStatus: false,
+        cancelText: '取消',
+        spinning: false,
+        enquiryRecordList: [],
+        tipTitle: '',
+        enquiryInfo: {},
+        enquiryRecordForm: {
+          record: '',
+        },
+        enquiryRecordFormRules: {
+          record: [{ required: true, message: '跟踪记录不能为空', trigger: 'blur' }],
+        },
+      };
     },
+    mounted() {},
+    methods: {
+      init(record) {
+        this.modalVisible = true;
+        this.modalTitle = '询盘跟踪记录：' + record.no;
+        this.modalEnquiryRecordStatus = true;
+        this.enquiryInfo = record;
+        this.cancelText = '关闭';
+        this.getEnquiryRecord(record.id);
+      },
 
+      handleOk() {
+        let that = this;
+        let modalEnquiryRecordStatus = that.modalEnquiryRecordStatus;
 
-    addEnquiryRecord() {
-      let that = this;
-      that.spinning = true
-      that.tipTitle = '正在添加询盘跟踪记录'
-      let params = {
-        enquiryId: that.enquiryInfo.id,
-        content: that.enquiryRecordForm.record
-      }
-      postActionForm('/adweb/adwebEnquiryRecord/add', params, 1000 * 60 * 2).then(function(res) {
-        that.spinning = false
-        that.tipTitle = ''
-        if (res.code === 200) {
-          createMessage.success('添加成功！')
-          that.enquiryRecordForm = {
-            record: ''
-          }
-          that.getEnquiryRecord(that.enquiryInfo.id);
-        } else {
-          if (res.code === 403) {
-            createMessage.warning(res.message)
-          } else {
-            createMessage.error('添加失败！')
-          }
+        if (modalEnquiryRecordStatus) {
+          that.addEnquiryRecord();
         }
-      }).catch(function(err) {
-        createMessage.error('网络超时，请重试!')
-        that.cleanAllFormData();
-        that.loadData()
-      })
-    },
-
-    getEnquiryRecord(id) {
-      let that = this;
-      that.spinning = true
-      that.tipTitle = '正在获取询盘跟踪记录'
-      getAction('/adweb/adwebEnquiryRecord/enquiryRecordList?enquiryId=' + id).then(function(res) {
-        that.spinning = false
-        that.tipTitle = ''
-        if (res.code == 200) {
-          that.enquiryRecordList = res.result;
-        } else {
-          createMessage.error('询盘跟踪记录失败！')
-        }
-      }).catch(function(err) {
-        createMessage.error('网络超时，请重试!')
-        that.cleanAllFormData();
-      })
-    },
+      },
 
+      addEnquiryRecord() {
+        let that = this;
+        that.spinning = true;
+        that.tipTitle = '正在添加询盘跟踪记录';
+        let params = {
+          enquiryId: that.enquiryInfo.id,
+          content: that.enquiryRecordForm.record,
+        };
+        postActionForm('/adweb/adwebEnquiryRecord/add', params, 1000 * 60 * 2)
+          .then(function (res) {
+            that.spinning = false;
+            that.tipTitle = '';
+            if (res.code === 200) {
+              createMessage.success('添加成功！');
+              that.enquiryRecordForm = {
+                record: '',
+              };
+              that.getEnquiryRecord(that.enquiryInfo.id);
+            } else {
+              if (res.code === 403) {
+                createMessage.warning(res.message);
+              } else {
+                createMessage.error('添加失败！');
+              }
+            }
+          })
+          .catch(function (err) {
+            createMessage.error('网络超时，请重试!');
+            that.cleanAllFormData();
+            that.loadData();
+          });
+      },
 
-    handleCancel() {
-      let that = this
-      that.cleanAllFormData()
-    },
+      getEnquiryRecord(id) {
+        let that = this;
+        that.spinning = true;
+        that.tipTitle = '正在获取询盘跟踪记录';
+        getAction('/adweb/adwebEnquiryRecord/enquiryRecordList?enquiryId=' + id)
+          .then(function (res) {
+            that.spinning = false;
+            that.tipTitle = '';
+            if (res.code == 200) {
+              that.enquiryRecordList = res.result;
+            } else {
+              createMessage.error('询盘跟踪记录失败！');
+            }
+          })
+          .catch(function (err) {
+            createMessage.error('网络超时，请重试!');
+            that.cleanAllFormData();
+          });
+      },
 
+      handleCancel() {
+        let that = this;
+        that.cleanAllFormData();
+      },
 
-    cleanAllFormData() {
-      let that = this
-      that.translateStatus = false,
-        that.modalVisible = false,
-        that.modalTitle = '',
-        that.okBtnStatus = {},
-        that.cancelBtnStatus = {},
-        that.enquiryRecordForm = {
-          record: ''
-        },
-        that.spinning = false,
-        that.tipTitle = '',
-        that.confirmLoading = false,
-        that.enquiryInfo = {},
-        that.enquiryRecordList = []
+      cleanAllFormData() {
+        let that = this;
+        (that.translateStatus = false),
+          (that.modalVisible = false),
+          (that.modalTitle = ''),
+          (that.okBtnStatus = {}),
+          (that.cancelBtnStatus = {}),
+          (that.enquiryRecordForm = {
+            record: '',
+          }),
+          (that.spinning = false),
+          (that.tipTitle = ''),
+          (that.confirmLoading = false),
+          (that.enquiryInfo = {}),
+          (that.enquiryRecordList = []);
+      },
     },
-
-  }
-}
+  };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adweb/site/AdwebSite.data.ts

@@ -1,58 +1,84 @@
-import {BasicColumn} from '/src/components/Table';
-import {FormSchema} from '/src/components/Table';
-import {rules} from '/src/utils/helper/validator';
-import {render} from '/src/utils/common/renderUtils';
-import {getWeekMonthQuarterYear} from '/src/utils';
+import { BasicColumn } from '/src/components/Table';
 //列表数据
 export const columns: BasicColumn[] = [
   {
-    title: '用户名',
-    align: "left",
-    dataIndex: 'uid_dictText'
+    title: '站点code',
+    align: 'left',
+    dataIndex: 'code',
+    width: '130px',
   },
   {
-    title: '站点code',
-    align: "center",
-    dataIndex: 'code'
+    title: '客户名',
+    align: 'left',
+    dataIndex: 'uid_dictText',
+    width: '160px',
+  },
+  {
+    title: '渠道商',
+    align: 'left',
+    dataIndex: 'channelProviderName',
+    customRender: function ({ text }) {
+      if (text) {
+        return text;
+      } else {
+        return '--';
+      }
+    },
   },
   {
     title: '站点名称',
-    align: "center",
-    dataIndex: 'name'
+    align: 'left',
+    dataIndex: 'name',
   },
   {
     title: '站点域名',
-    align: "center",
-    dataIndex: 'domain'
+    align: 'left',
+    dataIndex: 'domain',
+    width: '360px',
   },
   {
-    title: '当前状态',
-    align: "center",
-    dataIndex: 'status'
+    title: '订阅套餐',
+    align: 'left',
+    dataIndex: 'subscribePlan',
   },
   {
     title: '到期时间',
-    align: "center",
-    dataIndex: 'etime'
+    align: 'left',
+    dataIndex: 'etime',
+  },
+  {
+    title: '当前状态',
+    align: 'left',
+    dataIndex: 'status_dictText',
+  },
+  {
+    title: '建站状态',
+    align: 'left',
+    dataIndex: 'siteCurrentStep',
+  },
+  {
+    title: '建站进度',
+    align: 'left',
+    dataIndex: 'completeProcess',
   },
 ];
 
 // 高级查询数据
 export const superQuerySchema = {
-  uid: {title: '用户ID,与用户表关联', order: 0, view: 'sel_user', type: 'string',},
+  uid: { title: '用户ID,与用户表关联', order: 0, view: 'sel_user', type: 'string' },
   code: {
     title: '站点code,生成6位长度随机码，取值范围[a-z0-9],保证系统唯一',
     order: 1,
     view: 'text',
     type: 'string',
   },
-  name: {title: '站点名称', order: 2, view: 'text', type: 'string',},
-  domain: {title: '站点域名', order: 3, view: 'text', type: 'string',},
+  name: { title: '站点名称', order: 2, view: 'text', type: 'string' },
+  domain: { title: '站点域名', order: 3, view: 'text', type: 'string' },
   status: {
     title: '当前状态：0：已删除；1：正常；2:未发布  3:拉取测试站点中 ；4：发布正式站点中 ;5:拉取异常',
     order: 4,
     view: 'number',
     type: 'number',
   },
-  etime: {title: '到期时间，默认为ctime+1年', order: 5, view: 'datetime', type: 'string',},
+  etime: { title: '到期时间，默认为ctime+1年', order: 5, view: 'datetime', type: 'string' },
 };

src/views/adweb/site/AdwebSiteList.vue

@@ -4,20 +4,48 @@
     <div class="jeecg-basic-table-form-container">
       <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-row :gutter="24">
-          <a-col :lg="6">
-            <a-form-item>
-               <template #label><span title="站点名称">站点名称</span></template>
-               <div style="display: flex">
-                 <a-form-item name="name_begin" style="margin-bottom: 0;">
-                   <a-input placeholder="请输入最小值" v-model:value="queryParam.name_begin" class="query-group-cust" allow-clear ></a-input>
-                 </a-form-item>
-                 <span class="query-group-left query-group-split-cust">~</span>
-                 <a-form-item name="name_end" style="margin-bottom: 0;">
-                  <a-input placeholder="请输入最大值" v-model:value="queryParam.name_end" class="query-group-cust" allow-clear ></a-input>
-                 </a-form-item>
-               </div>
+          <a-col :xxl="6" :xl="7">
+            <a-form-item name="name" label="站点名称">
+              <j-input placeholder="请输入站点名称" v-model:value="queryParam.name" allow-clear />
             </a-form-item>
           </a-col>
+
+          <a-col :xxl="6" :xl="7">
+            <a-form-item name="domain" label="站点域名">
+              <j-input placeholder="请输入站点域名" v-model:value="queryParam.domain" allow-clear />
+            </a-form-item>
+          </a-col>
+
+          <a-col :xxl="6" :xl="8">
+            <a-form-item label="发布状态">
+              <j-search-select placeholder="请选择发布状态" v-model:value="queryParam.status" dict="site_status" />
+            </a-form-item>
+          </a-col>
+
+          <template v-if="toggleSearchStatus">
+            <a-col :xxl="6" :xl="7">
+              <a-form-item label="渠道商">
+                <a-select placeholder="请选择渠道商" v-model:value="queryParam.channelProviderId" showSearch allowClear :filterOption="filterOption">
+                  <a-select-option v-for="data in channelProviderList" :key="data.username" :value="data.workNo">
+                    {{ data.username }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <!--            <a-col :xxl="12" :xl="10">-->
+            <!--              <a-form-item label="创建时间">-->
+            <!--                <j-range-date placeholder="请选择开始日期" class="query-group-cust" v-model:value="queryParam.ctime" />-->
+            <!--              </a-form-item>-->
+            <!--            </a-col>-->
+
+            <!--            <a-col :xl="10" :lg="11" :md="12" :sm="24">-->
+            <!--              <a-form-item label="到期时间">-->
+            <!--                <j-range-date placeholder="请选择开始日期" class="query-group-cust" v-model:value="queryParam.etime" />-->
+            <!--              </a-form-item>-->
+            <!--            </a-col>-->
+          </template>
+
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
               <a-col :lg="6">
@@ -38,19 +66,20 @@
       <!--插槽:table标题-->
       <template #tableTitle>
         <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-        <j-upload-button  type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
         <a-dropdown v-if="selectedRowKeys.length > 0">
           <template #overlay>
             <a-menu>
               <a-menu-item key="1" @click="batchHandleDelete">
-                <Icon icon="ant-design:delete-outlined"></Icon>
+                <Icon icon="ant-design:delete-outlined" />
                 删除
               </a-menu-item>
             </a-menu>
           </template>
-          <a-button>批量操作
-            <Icon icon="mdi:chevron-down"></Icon>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down" />
           </a-button>
         </a-dropdown>
         <!-- 高级查询 -->
@@ -58,40 +87,109 @@
       </template>
       <!--操作栏-->
       <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
       </template>
-      <template v-slot:bodyCell="{ column, record, index, text }">
+      <template #bodyCell="{ column, record, index, text }">
+        <div v-if="column.dataIndex == 'name'">
+          <a :href="record.domain" target="_blank">{{ text }}</a>
+        </div>
+        <div v-if="column.dataIndex == 'domain'">
+          <a :href="record.domain" target="_blank">{{ text }}</a>
+        </div>
+
+        <div v-if="column.dataIndex == 'subscribePlan'">
+          <template v-if="text === null || text === ''"> 无 </template>
+          <template v-else>
+            <a-popover>
+              <template #content>
+                <a-descriptions bordered :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }" title="SEO套餐详情" size="default">
+                  <a-descriptions-item label="套餐名">
+                    {{ text.planName }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="关键词"> {{ text.keywordCount }}个 </a-descriptions-item>
+                  <a-descriptions-item label="服务时间">
+                    <template v-if="text.serviceTime != 0"> {{ text.serviceTime }}个月 </template>
+                    <template v-else> 长期 </template>
+                  </a-descriptions-item>
+                  <a-descriptions-item label="价格"> {{ text.price }}元 </a-descriptions-item>
+                </a-descriptions>
+              </template>
+              <a-tag color="blue">
+                {{ text.planName }}
+              </a-tag>
+            </a-popover>
+          </template>
+        </div>
+
+        <div v-if="column.dataIndex == 'status_dictText'">
+          <template v-if="record.status == 1">
+            <a-tag color="blue">
+              {{ text }}
+            </a-tag>
+          </template>
+          <template v-else-if="record.status == 2">
+            <a-tag color="green">
+              {{ text }}
+            </a-tag>
+          </template>
+          <template v-else>
+            <a-tag color="red">
+              {{ text }}
+            </a-tag>
+          </template>
+        </div>
+
+        <div v-if="column.dataIndex == 'siteCurrentStep'">
+          <span v-if="text === null || text === undefined || text === ''"> - </span>
+          <template v-else>
+            <a @click="handleProcess(record, 'site')"> <span class="circle" style="background-color: #7194f8"></span>{{ text }} </a>
+          </template>
+        </div>
+
+        <div v-if="column.dataIndex == 'completeProcess'">
+          <a-progress :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }" :percent="record.completeProcess" />
+        </div>
       </template>
     </BasicTable>
     <!-- 表单区域 -->
-    <AdwebSiteModal ref="registerModal" @success="handleSuccess"></AdwebSiteModal>
+    <AdwebSiteModal ref="registerModal" @success="handleSuccess" />
+
+    <!--SEO流程-->
+    <seo-process ref="seoProcessRef" :visible="seoProcessVisible" :title="processTitle" @close="closeProcess" @reload="reload" />
   </div>
 </template>
 
 <script lang="ts" name="adweb-adwebSite" setup>
-  import { ref, reactive } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { onBeforeMount, reactive, ref } from 'vue';
+  import { getAction } from '/@/api/manage/manage';
+  import { BasicTable, TableAction } from '/src/components/Table';
   import { useListPage } from '/src/hooks/system/useListPage';
   import { columns, superQuerySchema } from './AdwebSite.data';
-  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './AdwebSite.api';
-  import { downloadFile } from '/src/utils/common/renderUtils';
-  import AdwebSiteModal from './components/AdwebSiteModal.vue'
+  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './AdwebSite.api';
+  import AdwebSiteModal from './components/AdwebSiteModal.vue';
   import { useUserStore } from '/src/store/modules/user';
-  import JSelectUser from '/src/components/Form/src/jeecg/components/JSelectUser.vue';
+  import SeoProcess from '@/views/adweb/site/components/seoProcess.vue';
+  import JInput from '@/components/Form/src/jeecg/components/JInput.vue';
+  import JSearchSelect from '@/components/Form/src/jeecg/components/JSearchSelect.vue';
 
   const formRef = ref();
   const queryParam = reactive<any>({});
   const toggleSearchStatus = ref<boolean>(false);
   const registerModal = ref();
   const userStore = useUserStore();
+  const processTitle = ref('');
+  const seoProcessVisible = ref(false);
+  const seoProcessRef = ref();
+  let channelProviderList = reactive([{ username: '', workNo: '' }]);
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     tableProps: {
       title: 'adweb站点配置表单',
       api: list,
       columns,
-      canResize:false,
-      useSearchForm: false,
+      canResize: false,
+      useSearchForm: true,
+      showTableSetting: true,
       actionColumn: {
         width: 120,
         fixed: 'right',
@@ -101,21 +199,22 @@
       },
     },
     exportConfig: {
-      name: "adweb站点配置表单",
+      name: 'adweb站点配置表单',
       url: getExportUrl,
       params: queryParam,
     },
-	  importConfig: {
-	    url: getImportUrl,
-	    success: handleSuccess
-	  },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
+    },
   });
-  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
+    tableContext;
   const labelCol = reactive({
-    xs:24,
-    sm:4,
-    xl:6,
-    xxl:4
+    xs: 24,
+    sm: 4,
+    xl: 6,
+    xxl: 4,
   });
   const wrapperCol = reactive({
     xs: 24,
@@ -124,7 +223,21 @@
 
   // 高级查询配置
   const superQueryConfig = reactive(superQuerySchema);
+  //渠道商搜索
+  const filterOption = (input: string, option: any) => {
+    console.log(option, 'optionoption');
+    return option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  };
 
+  onBeforeMount(() => {
+    getChannelProvider();
+  });
+
+  function getChannelProvider() {
+    getAction('/adweb/system/getChannelProvider', null).then((res) => {
+      channelProviderList = res.result;
+    });
+  }
   /**
    * 高级查询事件
    */
@@ -186,7 +299,7 @@
   function getTableAction(record) {
     return [
       {
-        label: '编辑',
+        label: '编辑网站',
         onClick: handleEdit.bind(null, record),
       },
     ];
@@ -200,15 +313,16 @@
       {
         label: '详情',
         onClick: handleDetail.bind(null, record),
-      }, {
+      },
+      {
         label: '删除',
         popConfirm: {
           title: '是否确认删除',
           confirm: handleDelete.bind(null, record),
           placement: 'topLeft',
-        }
-      }
-    ]
+        },
+      },
+    ];
   }
 
   /**
@@ -228,19 +342,16 @@
     reload();
   }
 
-
-  /**
-   * form点击事件(以逗号分割)
-   * @param key
-   * @param value
-   */
-  function handleFormJoinChange(key, value) {
-    if (typeof value != 'string') {
-      queryParam[key] = value.join(',');
-    }
+  function handleProcess(record, type) {
+    seoProcessVisible.value = true;
+    processTitle.value = record.name;
+    seoProcessRef.value.init(record, type);
+    seoProcessRef.value.isCustomer = true;
   }
 
-
+  function closeProcess() {
+    seoProcessVisible.value = false;
+  }
 </script>
 
 <style lang="less" scoped>
@@ -251,19 +362,20 @@
       margin-bottom: 24px;
       white-space: nowrap;
     }
-    .query-group-cust{
+    .query-group-cust {
       min-width: 100px !important;
     }
-    .query-group-split-cust{
+    .query-group-split-cust {
       width: 30px;
       display: inline-block;
-      text-align: center
+      text-align: center;
     }
-    .ant-form-item:not(.ant-form-item-with-help){
+    .ant-form-item:not(.ant-form-item-with-help) {
       margin-bottom: 16px;
       height: 32px;
     }
-    :deep(.ant-picker),:deep(.ant-input-number){
+    :deep(.ant-picker),
+    :deep(.ant-input-number) {
       width: 100%;
     }
   }

src/views/adweb/site/components/seoProcess.vue

@@ -0,0 +1,214 @@
+<template>
+  <a-drawer :title="title" placement="right" :closable="true" v-model:open="props.visible" @close="onClose" destroyOnClose :width="600">
+    <a-steps :current="current" direction="vertical" class="self_step">
+      <a-step v-for="(item, index) in stepData" :key="index">
+        <template #title>
+          <div v-if="item.status == 1" style="width: 100%; line-height: 21px">
+            <span>{{ item.title }}</span>
+
+            <a-button style="margin-left: 16px" ghost v-if="index > 0" type="primary" size="small" @click="finishOrRollbackStep(item, index)">
+              撤销
+            </a-button>
+          </div>
+
+          <div style="width: 100%; line-height: 21px" v-else-if="index === current">
+            <span :style="{ color: 'blue' }">{{ item.title }}</span>
+            <a-button
+              style="margin-left: 16px"
+              v-if="showFinBtn && !isCustomer"
+              ghost
+              type="primary"
+              size="small"
+              @click="finishOrRollbackStep(item, index)"
+            >
+              完成
+            </a-button>
+          </div>
+
+          <div style="width: 100%; line-height: 21px" v-else>
+            <span :style="{ color: '#606266' }">{{ item.title }}</span>
+            <a-button
+              :style="{ marginLeft: '16px', color: '#606266' }"
+              style=""
+              v-if="showFinBtn && !isCustomer"
+              ghost
+              type="primary"
+              size="small"
+              @click="finishOrRollbackStep(item, index)"
+              >完成</a-button
+            >
+          </div>
+        </template>
+
+        <template #description>
+          <div style="margin: 2.5px 0" v-if="item.title !== null">{{ item.description }}</div>
+        </template>
+      </a-step>
+    </a-steps>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup name="seoProcess">
+  import '/@/assets/less/common.less';
+  import { getAction, postActionForm } from '/@/api/manage/manage';
+  import { reactive, ref } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+  const url = ref('');
+  const current = ref(0);
+  let stepData = ref([{ value: '', title: '', color: '', description: '', status: 0 }]);
+  let record = reactive({
+    code: undefined,
+    siteFlowStatus: '',
+  });
+  const showFinBtn = ref(false);
+  const isCustomer = ref(false);
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: 'SEO流程',
+    },
+  });
+
+  const emit = defineEmits(['ok', 'close', 'reload']);
+
+  function init(r, t) {
+    record = r;
+
+    if (t == 'seo') {
+      url.value = '/adweb/executeNode/querySEOFlow?siteCode=' + r.code + '&historyId=' + r.historyId;
+    } else {
+      url.value = '/sys/dict/getDictItems/build_website_status';
+    }
+
+    showStep();
+  }
+
+  function onClose() {
+    emit('close');
+    closeStep();
+  }
+
+  function showStep() {
+    stepData.value = [];
+
+    getAction(url.value, null)
+      .then((res) => {
+        if (res.code === 0) {
+          stepData.value = res.result;
+          // 当前步骤
+          for (let i = 0; i < res.result.length; i++) {
+            if (res.result[i].value == record.siteFlowStatus) {
+              current.value = i + 1;
+              showFinBtn.value = true;
+            }
+
+            if (res.result[i].value <= record.siteFlowStatus) {
+              stepData.value[i].status = 1;
+            } else {
+              stepData.value[i].status = 0;
+            }
+          }
+
+          if (current.value == 0) {
+            current.value = res.result.length;
+            showFinBtn.value = false;
+          }
+        }
+      })
+      .catch((e) => {
+        createMessage.warning('获取数据失败！' + e.message());
+      });
+  }
+
+  function closeStep() {
+    showFinBtn.value = false;
+    current.value = 0;
+    stepData.value = [];
+  }
+
+  function finishOrRollbackStep(item, index) {
+    let params;
+
+    if (item.status === 0) {
+      params = {
+        stepFlowId: item.value,
+        siteCode: record.code,
+        currentStep: item.label,
+      };
+
+      current.value++;
+      stepData.value[index].status = 1;
+    } else {
+      let currentItem = stepData.value[index - 1];
+
+      params = {
+        stepFlowId: currentItem.value,
+        siteCode: record.code,
+        currentStep: currentItem.label,
+      };
+
+      current.value--;
+      stepData.value[index].status = 0;
+    }
+
+    postActionForm('/adweb/adwebSite/finishOrRollbackStep', params, 120000).then((res) => {
+      if (res.code === 200) {
+        createMessage.success('操作成功！');
+        // showStep();
+        emit('reload');
+      }
+    });
+  }
+
+  defineExpose({ init });
+</script>
+
+<style lang="less" scoped>
+  .self_step {
+    /deep/ .ant-steps-item-content {
+      width: 410px;
+
+      .ant-steps-item-title {
+        width: 100%;
+
+        span {
+          font-size: 13px;
+          color: green;
+
+          &.fr {
+            float: right;
+          }
+        }
+      }
+
+      .ant-steps-item-description {
+        div {
+          padding-left: 20px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .doBtn {
+    position: absolute;
+    bottom: 15px;
+    width: 150px;
+    right: 150px;
+  }
+</style>
+
+<style lang="less">
+  .self_step {
+    .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+      background: green;
+    }
+  }
+</style>

src/views/dashboard/Analysis/homePage/adweb3Home.vue

@@ -20,6 +20,7 @@
               <p class="mb"
                 >交付状态：<span class="big">{{ filter_Null_format(baseInfo.deliveryProgress) }}</span>
               </p>
+              <a-progress :steps="6" :percent="baseInfo.percentage" />
               <p
                 >运行状态：<span v-if="baseInfo.runStatus == 0">创建失败</span><span v-if="baseInfo.runStatus == 1">正常运行</span
                 ><span v-if="baseInfo.runStatus == 2">运行异常</span>