From 4d65cc11e98caaeed5e8fd52a48160d2cb9aa425 Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Mon, 17 Oct 2022 10:19:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E7=94=B3=E8=AF=B7=201?=
 =?UTF-8?q?=E6=9D=A1=E6=B6=88=E6=81=AF=E6=97=B6=E9=9A=90=E8=97=8F=20=20?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=8C=89=E9=92=AE=EF=BC=8C=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=20=E6=B7=BB=E5=8A=A0=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/AbilityToApplyFor.vue    |   22 +-
 .../components/ApplyDetails.vue               |  505 +++---
 .../personalCenter/components/MyApply.vue     | 1518 +++++++++--------
 3 files changed, 1081 insertions(+), 964 deletions(-)

diff --git a/front/src/views/home/AbilityToApplyFor.vue b/front/src/views/home/AbilityToApplyFor.vue
index 0a6a6153..53e5c2ee 100644
--- a/front/src/views/home/AbilityToApplyFor.vue
+++ b/front/src/views/home/AbilityToApplyFor.vue
@@ -2,7 +2,11 @@
   <div class="ability-to-apply-for" :class="{ all: falg }">
     <div class="title">
       <span>申请能力</span>
-      <div class="btnBox" v-show="!falg">
+      <div
+        class="btnBox"
+        v-show="!falg"
+        v-if="dataForm[0].arr.length > 1 || dataForm.length > 1"
+      >
         <svg
           t="1659419933164"
           class="btn"
@@ -97,7 +101,10 @@
               {{
                 val.description ||
                 ((val.note1 || '') &&
-                  (JSON.parse(val.note1) && JSON.parse(val.note1)[0] && JSON.parse(val.note1)[0].channelName || '--') +
+                  ((JSON.parse(val.note1) &&
+                    JSON.parse(val.note1)[0] &&
+                    JSON.parse(val.note1)[0].channelName) ||
+                    '--') +
                     '等' +
                     JSON.parse(val.note1).length +
                     '个摄像头') ||
@@ -105,7 +112,11 @@
               }}
             </div>
           </div>
-          <div class="remove" v-if="item.arr.length>1" @click="removeFunction(val)"></div>
+          <div
+            class="remove"
+            v-if="item.arr.length > 1"
+            @click="removeFunction(val)"
+          ></div>
         </div>
       </template>
     </div>
@@ -181,7 +192,10 @@
       let arr = JSON.parse(note1)
       xVideoList.value = []
       arr.map((val) => {
-        xVideoList.value.push({ name: val.channelName || '', key: val.channelId })
+        xVideoList.value.push({
+          name: val.channelName || '',
+          key: val.channelId,
+        })
       })
       videoVisible.value = true
     } else {
diff --git a/front/src/views/personalCenter/components/ApplyDetails.vue b/front/src/views/personalCenter/components/ApplyDetails.vue
index 1b052ff4..f9cd16ae 100644
--- a/front/src/views/personalCenter/components/ApplyDetails.vue
+++ b/front/src/views/personalCenter/components/ApplyDetails.vue
@@ -1,9 +1,21 @@
 <template>
-  <DeviceApplyDetail v-if="showType === '设备申请'" :refObj="refObj"></DeviceApplyDetail>
+  <DeviceApplyDetail
+    v-if="showType === '设备申请'"
+    :refObj="refObj"
+  ></DeviceApplyDetail>
   <div class="form-container" v-else>
-    <AbilityApplication :refObj="refObj" v-if="showType === '能力申请'"></AbilityApplication>
-    <PutOnTheShelf :refObj="refObj" v-else-if="showType === '能力上架'"></PutOnTheShelf>
-    <OffTheShelf :refObj="refObj" v-else-if="showType === '能力下架'"></OffTheShelf>
+    <AbilityApplication
+      :refObj="refObj"
+      v-if="showType === '能力申请'"
+    ></AbilityApplication>
+    <PutOnTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力上架'"
+    ></PutOnTheShelf>
+    <OffTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力下架'"
+    ></OffTheShelf>
     <Demand :refObj="refObj" v-else-if="showType === '能力需求'"></Demand>
     <Comment :refObj="refObj" v-else-if="showType === '需求评论'"></Comment>
     <OtherApplications :refObj="refObj" v-else></OtherApplications>
@@ -23,258 +35,263 @@
   </div>
 </template>
 <script setup>
-import AbilityApplication from './AbilityApplication.vue'
-import PutOnTheShelf from './PutOnTheShelf .vue'
-import OffTheShelf from './OffTheShelf.vue'
-import Demand from './Demand.vue'
-import Comment from './Comment.vue'
-import DeviceApplyDetail from './DeviceApplyDetail.vue'
-import OtherApplications from '@/views/personalCenter/components/OtherApplications '
-import { onMounted, reactive, defineProps, ref } from 'vue'
-import Cookies from 'js-cookie'
-// import { baseURL } from '@/config'
-import qs from 'qs'
-import {
-  getApplyForm,
-  getTaskHandleDetailInfo,
-  getDemandForm,
-  nengliziyuanshangjiaapply,
-  getTaskVariables,
-} from '@/api/personalCenter'
-import { selectOneDel } from '@/api/home'
-const props = defineProps({
-  processDefinitionName: { type: String, default: null },
-  businessKey: { type: String, default: null },
-  processInstanceId: { type: String, default: null },
-  resourceId: { type: String, default: null },
-  refObj: { type: Object, default: null },
-  showType: { type: String, default: null },
-})
-const refObj = ref({})
-const showType = ref('')
-// eslint-disable-next-line vue/no-setup-props-destructure
-refObj.value = props.refObj
-// eslint-disable-next-line vue/no-setup-props-destructure
-showType.value = props.showType
-//流转详情
-const dataSource = reactive({ data: [] })
-console.log('refObj------------>', refObj);
-
-// console.log(props.refObj, '---------------------------------------')
-
-const downloadFile = (path, name) => {
-  const xhr = new XMLHttpRequest()
-  xhr.open('get', path)
-  xhr.responseType = 'blob'
-  xhr.send()
-  xhr.onload = function () {
-    if (this.status === 200 || this.status === 304) {
-      // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
-      if ('msSaveOrOpenBlob' in navigator) {
-        navigator.msSaveOrOpenBlob(this.response, name)
-        return
-      }
-      // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
-      // const url = URL.createObjectURL(blob);
-      const url = URL.createObjectURL(this.response)
-      const a = document.createElement('a')
-      a.style.display = 'none'
-      a.href = url
-      a.download = name
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-    }
-  }
-}
-//表单信息
-const formName = reactive({
-  user: '',
-  phone: '',
-  unit: '',
-  area: '',
-  system: '',
-  scene: '',
-  basis: '',
-  id: '',
-})
-let shifoushizujian = ref('')
-let nameNotShow = ref('')
-let algorithmShow = ref('')
-const dataForm = reactive({ data: {} })
-const columns = [
-  {
-    title: '任务名称',
-    dataIndex: 'activityName',
-    key: 'activityName',
-  },
-  {
-    title: '处理人',
-    dataIndex: 'assigneeName',
-    key: 'assigneeName',
-  },
-  {
-    title: '任务开始时间',
-    dataIndex: 'startTime',
-    key: 'startTime',
-  },
-  {
-    title: '任务结束时间',
-    dataIndex: 'endTime',
-    key: 'endTime',
-  },
-  {
-    title: '审核意见',
-    dataIndex: 'comment',
-    key: 'comment',
-  },
-  {
-    title: '任务时长',
-    dataIndex: 'duration',
-    key: 'duration',
-  },
-]
-const getInfo = () => {
-  console.log(props.processInstanceId, '============================')
-  if (props.processDefinitionName == '能力申请') {
-    // getTaskVariables({ taskId: props.processInstanceId }).then((res) => {
-    //   console.log('获取数据====================>', res.data.data)
-    // })
-  }
-  if (props.processDefinitionName == '能力申请流程') {
-    getApplyForm(props.businessKey).then((res) => {
-      const { data } = res.data
-      console.log(data)
-      formName.user = data.user
-      formName.phone = data.phone
-      formName.unit = data.unit
-      formName.area = data.area
-      formName.system = data.system
-      formName.scene = data.scene
-      formName.enclosure = data.enclosure
-      formName.basis = data.basis
-    })
-  }
-  if (props.processDefinitionName == '能力需求申请') {
-    getDemandForm(props.businessKey).then((res) => {
-      const { data } = res.data
-      console.log(data)
-      formName.applyUserName = data.applyUserName
-      formName.applyUserPhone = data.applyUserPhone
-      formName.applyUserDeptName = data.applyUserDeptName
-      formName.detailsField = data.detailsField
-      formName.demandDetails = data.demandDetails
-      formName.detailsType = data.detailsType
-      formName.demandSubject = data.demandSubject
-      formName.enclosure = data.enclosure
-    })
-  }
-  if (props.processDefinitionName == '能力资源上架') {
-    // debugger
-    nengliziyuanshangjiaapply(props.businessKey).then((res) => {
-      // const { data } = res.data
-      dataForm.data = res.data.data.resourceDTO
-      if (res.data.data.resourceDTO.type == '应用资源') {
-        shifoushizujian.value = true
-      } else {
-        shifoushizujian.value = false
-        console.log(res.data.data.resourceDTO)
-        res.data.data.resourceDTO.infoList.forEach((val) => {
-          console.log(val, '111111111111111111111111')
-          if (val.attrValue === '智能算法') {
-            nameNotShow.value = true
-            algorithmShow.value = false
-            console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
-          }
-        })
-      }
-      console.log('222222222222', dataForm.data)
-    })
-  }
-  if (props.processDefinitionName == '能力资源下架') {
-    // debugger
-    selectOneDel(props.resourceId).then((res) => {
-      // const { data } = res.data
-      dataForm.data = res.data.data
-    })
-  }
-}
-
-const getLiuZhuanInfo = () => {
-  const params = qs.stringify({
-    processInstanceId: props.processInstanceId,
+  import AbilityApplication from './AbilityApplication.vue'
+  import PutOnTheShelf from './PutOnTheShelf .vue'
+  import OffTheShelf from './OffTheShelf.vue'
+  import Demand from './Demand.vue'
+  import Comment from './Comment.vue'
+  import DeviceApplyDetail from './DeviceApplyDetail.vue'
+  import OtherApplications from '@/views/personalCenter/components/OtherApplications '
+  import { onMounted, reactive, defineProps, ref } from 'vue'
+  import Cookies from 'js-cookie'
+  // import { baseURL } from '@/config'
+  import qs from 'qs'
+  import {
+    getApplyForm,
+    getTaskHandleDetailInfo,
+    getDemandForm,
+    nengliziyuanshangjiaapply,
+    getTaskVariables,
+  } from '@/api/personalCenter'
+  import { selectOneDel } from '@/api/home'
+  const props = defineProps({
+    processDefinitionName: { type: String, default: null },
+    businessKey: { type: String, default: null },
+    processInstanceId: { type: String, default: null },
+    resourceId: { type: String, default: null },
+    refObj: { type: Object, default: null },
+    showType: { type: String, default: null },
   })
-  getTaskHandleDetailInfo(params).then((res) => {
-    let arr = []
-    res.data.data.forEach((item) => {
-      arr.push(item)
-    })
-    dataSource.data.push([props.processInstanceId, arr])
-  })
-}
+  const refObj = ref({})
+  const showType = ref('')
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  refObj.value = props.refObj
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  showType.value = props.showType
+  //流转详情
+  const dataSource = reactive({ data: [] })
+  console.log('refObj------------>', refObj)
 
-onMounted(() => {
-  // getInfo()
-  if (props.refObj.resourceApplication) {
-    dataSource.data = []
-    for (const key in props.refObj.resourceApplication) {
-      if (props.refObj.resourceApplication[key].length > 0) {
-        props.refObj.resourceApplication[key].map((item) => {
-          dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
-        })
+  // console.log(props.refObj, '---------------------------------------')
+
+  const downloadFile = (path, name) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('get', path)
+    xhr.responseType = 'blob'
+    xhr.send()
+    xhr.onload = function () {
+      if (this.status === 200 || this.status === 304) {
+        // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
+        if ('msSaveOrOpenBlob' in navigator) {
+          navigator.msSaveOrOpenBlob(this.response, name)
+          return
+        }
+        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
+        // const url = URL.createObjectURL(blob);
+        const url = URL.createObjectURL(this.response)
+        const a = document.createElement('a')
+        a.style.display = 'none'
+        a.href = url
+        a.download = name
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
       }
     }
-  } else {
-    getLiuZhuanInfo()
   }
-})
-
-const getResourceURL = () => {
-  console.log('111111111111111111111111111111', Cookies.get('token'))
-  const params = qs.stringify({
-    token: Cookies.get('token'),
-    // processInstanceId: this.dataForm.processInstanceId
-    processInstanceId: props.processInstanceId,
+  //表单信息
+  const formName = reactive({
+    user: '',
+    phone: '',
+    unit: '',
+    area: '',
+    system: '',
+    scene: '',
+    basis: '',
+    id: '',
   })
-  return `${window.SITE_CONFIG.apiURL}/act/his/getInstImage?${params}`
-}
+  let shifoushizujian = ref('')
+  let nameNotShow = ref('')
+  let algorithmShow = ref('')
+  const dataForm = reactive({ data: {} })
+  const columns = [
+    {
+      title: '任务名称',
+      dataIndex: 'activityName',
+      key: 'activityName',
+    },
+    {
+      title: '处理部门',
+      dataIndex: 'assigneeDeptName',
+      key: 'assigneeDeptName',
+    },
+    {
+      title: '处理人',
+      dataIndex: 'assigneeName',
+      key: 'assigneeName',
+    },
+    {
+      title: '任务开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+    },
+    {
+      title: '任务结束时间',
+      dataIndex: 'endTime',
+      key: 'endTime',
+    },
+    {
+      title: '审核意见',
+      dataIndex: 'comment',
+      key: 'comment',
+    },
+    {
+      title: '任务时长',
+      dataIndex: 'duration',
+      key: 'duration',
+    },
+  ]
+  const getInfo = () => {
+    console.log(props.processInstanceId, '============================')
+    if (props.processDefinitionName == '能力申请') {
+      // getTaskVariables({ taskId: props.processInstanceId }).then((res) => {
+      //   console.log('获取数据====================>', res.data.data)
+      // })
+    }
+    if (props.processDefinitionName == '能力申请流程') {
+      getApplyForm(props.businessKey).then((res) => {
+        const { data } = res.data
+        console.log(data)
+        formName.user = data.user
+        formName.phone = data.phone
+        formName.unit = data.unit
+        formName.area = data.area
+        formName.system = data.system
+        formName.scene = data.scene
+        formName.enclosure = data.enclosure
+        formName.basis = data.basis
+      })
+    }
+    if (props.processDefinitionName == '能力需求申请') {
+      getDemandForm(props.businessKey).then((res) => {
+        const { data } = res.data
+        console.log(data)
+        formName.applyUserName = data.applyUserName
+        formName.applyUserPhone = data.applyUserPhone
+        formName.applyUserDeptName = data.applyUserDeptName
+        formName.detailsField = data.detailsField
+        formName.demandDetails = data.demandDetails
+        formName.detailsType = data.detailsType
+        formName.demandSubject = data.demandSubject
+        formName.enclosure = data.enclosure
+      })
+    }
+    if (props.processDefinitionName == '能力资源上架') {
+      // debugger
+      nengliziyuanshangjiaapply(props.businessKey).then((res) => {
+        // const { data } = res.data
+        dataForm.data = res.data.data.resourceDTO
+        if (res.data.data.resourceDTO.type == '应用资源') {
+          shifoushizujian.value = true
+        } else {
+          shifoushizujian.value = false
+          console.log(res.data.data.resourceDTO)
+          res.data.data.resourceDTO.infoList.forEach((val) => {
+            console.log(val, '111111111111111111111111')
+            if (val.attrValue === '智能算法') {
+              nameNotShow.value = true
+              algorithmShow.value = false
+              console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
+            }
+          })
+        }
+        console.log('222222222222', dataForm.data)
+      })
+    }
+    if (props.processDefinitionName == '能力资源下架') {
+      // debugger
+      selectOneDel(props.resourceId).then((res) => {
+        // const { data } = res.data
+        dataForm.data = res.data.data
+      })
+    }
+  }
+
+  const getLiuZhuanInfo = () => {
+    const params = qs.stringify({
+      processInstanceId: props.processInstanceId,
+    })
+    getTaskHandleDetailInfo(params).then((res) => {
+      let arr = []
+      res.data.data.forEach((item) => {
+        arr.push(item)
+      })
+      dataSource.data.push([props.processInstanceId, arr])
+    })
+  }
+
+  onMounted(() => {
+    // getInfo()
+    if (props.refObj.resourceApplication) {
+      dataSource.data = []
+      for (const key in props.refObj.resourceApplication) {
+        if (props.refObj.resourceApplication[key].length > 0) {
+          props.refObj.resourceApplication[key].map((item) => {
+            dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
+          })
+        }
+      }
+    } else {
+      getLiuZhuanInfo()
+    }
+  })
+
+  const getResourceURL = () => {
+    console.log('111111111111111111111111111111', Cookies.get('token'))
+    const params = qs.stringify({
+      token: Cookies.get('token'),
+      // processInstanceId: this.dataForm.processInstanceId
+      processInstanceId: props.processInstanceId,
+    })
+    return `${window.SITE_CONFIG.apiURL}/act/his/getInstImage?${params}`
+  }
 </script>
 
 <style scoped lang="less">
-.form-container {
-  height: 6rem;
-  overflow-y: scroll;
-  padding: 20px 20px 30px 20px;
+  .form-container {
+    height: 6rem;
+    overflow-y: scroll;
+    padding: 20px 20px 30px 20px;
 
-  .title {
-    font-size: 18px;
-    color: #000;
-    font-weight: bold;
-    margin-bottom: 20px;
-    padding-left: 10px;
-    margin-top: 10px;
-    border-left: 6px #0058e1 solid;
+    .title {
+      font-size: 18px;
+      color: #000;
+      font-weight: bold;
+      margin-bottom: 20px;
+      padding-left: 10px;
+      margin-top: 10px;
+      border-left: 6px #0058e1 solid;
+    }
   }
-}
 
-:deep(.ant-table-thead)>tr>.ant-table-cell {
-  background: #0087ff;
-  color: #fff;
-  border: none;
-  text-align: center;
-  font-size: 16px;
-}
+  :deep(.ant-table-thead) > tr > .ant-table-cell {
+    background: #0087ff;
+    color: #fff;
+    border: none;
+    text-align: center;
+    font-size: 16px;
+  }
 
-:deep(.ant-table-tbody)>tr>.ant-table-cell:nth-child(5) {
-  // width: 110px;
-  // display: inline-block;
-  // white-space: nowrap;
-  // overflow: hidden;
-  // text-overflow: ellipsis;
-}
+  :deep(.ant-table-tbody) > tr > .ant-table-cell:nth-child(5) {
+    // width: 110px;
+    // display: inline-block;
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+  }
 
-.oddNumbers {
-  margin-bottom: 0.05rem;
-}
+  .oddNumbers {
+    margin-bottom: 0.05rem;
+  }
 </style>
diff --git a/front/src/views/personalCenter/components/MyApply.vue b/front/src/views/personalCenter/components/MyApply.vue
index 508e8bd2..9dd682c0 100644
--- a/front/src/views/personalCenter/components/MyApply.vue
+++ b/front/src/views/personalCenter/components/MyApply.vue
@@ -3,16 +3,27 @@
     <div class="title" style="margin-bottom: 0.2rem">我的申请</div>
     <div class="tab" style="margin-bottom: 0.1rem">
       <span>类型</span>
-      <div :class="typeIndex == index ? 'tabclass' : ' '" @click="changeType(item, index)"
-        v-for="(item, index) in typeList" :key="index">
+      <div
+        :class="typeIndex == index ? 'tabclass' : ' '"
+        @click="changeType(item, index)"
+        v-for="(item, index) in typeList"
+        :key="index"
+      >
         {{ item }}
       </div>
     </div>
     <div class="tab">
       <span>申请状态</span>
-      <div :class="tabIndex == index ? 'tabclass' : ' '" @click="changeApplyState(item, index)"
-        v-for="(item, index) in tabList" :key="index">
-        <a-badge :count="item === '审核中' ? num.unfinished : num.finished" v-if="item !== '全部'">
+      <div
+        :class="tabIndex == index ? 'tabclass' : ' '"
+        @click="changeApplyState(item, index)"
+        v-for="(item, index) in tabList"
+        :key="index"
+      >
+        <a-badge
+          :count="item === '审核中' ? num.unfinished : num.finished"
+          v-if="item !== '全部'"
+        >
           {{ item }}
         </a-badge>
         <template v-else>
@@ -22,7 +33,11 @@
     </div>
     <div v-if="contentList.data.length > 0">
       <div class="content">
-        <div class="content-body" v-for="item in contentList.data" :key="item.index">
+        <div
+          class="content-body"
+          v-for="item in contentList.data"
+          :key="item.index"
+        >
           <div class="content-body-title">
             <span>申请单号：{{ item.applyNumber || '--' }}</span>
             <div></div>
@@ -33,7 +48,9 @@
             </template>
             <div class="content-body-title">
               <span>
-                名称：{{ item.cameraList ? item.system : (item.title || item.name) }}
+                名称：{{
+                  item.cameraList ? item.system : item.title || item.name
+                }}
               </span>
               <div></div>
             </div>
@@ -52,54 +69,112 @@
             <div v-if="isXiHaiAn">过期时间：{{ item.expireDate || '' }}</div>
           </div>
           <div class="button-box">
-            <div class="button" v-if="typeName == '设备申请' && phoneSate.includes(item.state)"
-              @click="showPhoneModal(item)">
+            <div
+              class="button"
+              v-if="typeName == '设备申请' && phoneSate.includes(item.state)"
+              @click="showPhoneModal(item)"
+            >
               联系方式
             </div>
             <div class="button" @click="showDetail(item)">查看详情</div>
             <div class="button" @click="showAdd(item)" v-if="item.backToFirst">
               修改
             </div>
-            <svg t="1652233950228" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-              p-id="5970" data-spm-anchor-id="a313x.7781069.0.i8" width="80" height="80" v-if="
+            <svg
+              t="1652233950228"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="5970"
+              data-spm-anchor-id="a313x.7781069.0.i8"
+              width="80"
+              height="80"
+              v-if="
                 item.processDefinitionName != '能力资源下架' &&
                 (item.resourceStatus == 4 || item.resourceStatus == 5)
-              " style="position: absolute; top: 20px; left: -850px">
+              "
+              style="position: absolute; top: 20px; left: -850px"
+            >
               <path
                 d="M955.22053 256C813.82053 11.2 500.72053-72.6 255.92053 68.8S-72.67947 523.2 68.72053 768 523.22053 1096.6 768.02053 955.2c244.7-141.2 328.6-454.1 187.4-698.8 0-0.1-0.1-0.3-0.2-0.4zM762.02053 944.7c-239 138.1-544.8 56.2-682.9-182.8S22.92053 217.1 261.92053 79.1s544.8-56.2 682.9 182.8c137.9 239 56.1 544.6-182.8 682.8z"
-                fill="#515151" opacity=".5" p-id="5971"></path>
+                fill="#515151"
+                opacity=".5"
+                p-id="5971"
+              ></path>
               <path
                 d="M898.12053 289.2C775.02053 76 502.42053 2.9 289.22053 126 76.02053 249.1 3.02053 521.6 126.02053 734.8 249.12053 948 521.62053 1021.1 734.82053 898 947.92053 774.9 1021.02053 502.4 898.12053 289.2zM731.62053 892.8C521.32053 1014.3 252.42053 942.2 131.02053 731.9 9.52053 521.6 81.62053 252.7 291.92053 131.3 502.12053 9.9 771.02053 81.8 892.42053 292c121.5 210.3 49.5 479.3-160.8 600.8z"
-                fill="#515151" opacity=".5" p-id="5972"></path>
+                fill="#515151"
+                opacity=".5"
+                p-id="5972"
+              ></path>
               <path
                 d="M323.62053 176.8c3.6-2 6 0.8 8.8 2.8 6 4.4 12.4 8.8 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.4 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.6 0.6-2zM200.72053 289.2c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 14.8 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.4-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.4-1.2 0-1.6 0.8-2.4l0.2 0.4z m276.6-159.6c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.8-1.2-0.4-1.6 0.4-2.4l0.2 0.4z m141.9 29.6c3.6-2 6 0.8 8.8 2.8l18.8 12.8c7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4-7.7 0.4-15.2 0.8-22.4 0.8-4.4 6.8-8.4 13.2-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.5-1.2 0.2-1.6 0.6-2zM150.02053 430c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-4 14-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.5 0.6-2z m558.9 414.4c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.1 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-1.1 0.8-1.1 1.6-1.1h0.1z m-158.8 50c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.1-3.7-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2-1 4.2-1.7 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.4-0.8 0.8-0.8 1.7-0.7z m276.5-159.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8s-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.2 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0-0.8 0.8-1.2 1.6-1.2l0.1 0.1z m45.6-137.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.2-0.7 0.6-0.7 1.4-0.7h0.3zM402.72053 868c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-0.8 1-1.1 1.7-1.1z"
-                fill="#515151" opacity=".5" p-id="5973"></path>
+                fill="#515151"
+                opacity=".5"
+                p-id="5973"
+              ></path>
               <path
                 d="M386.42053 590.4l-43.8-75.9L207.02053 592.7l10.2 17.7L334.02053 543l23.4 40.4-90.5 52.2-13.5-23.4-18.7 10.8 53.1 92c9.1 15.8 21.2 19.5 36.4 10.7l98.8-57c6.2-3.6 11-9.3 13.4-16.1-1.4-15.9-6.2-31.2-14.2-45l-21.4 4.8c6.7 10.3 11 21.9 12.8 34-1 3.3-3.2 6-6.1 7.8l-88.3 51c-6.2 3.6-11.1 2.1-14.8-4.3l-27.3-47.4 109.3-63.1z m2.9-103.2l10.4 18.1 65.6-37.9 79.9 138.4 18.6-10.8-55.9-96.9c18.8-0.9 43.2-0.6 73 0.7l1.5-23.1c-29.8-0.3-58.4 0.4-86 2.6l-12.5-21.6 74.9-43.2-10.4-18.1-159.1 91.8zM669.52053 329l38.2 66.2 61.4-35.4-38.1-66.1-61.5 35.3z m72.4 24.2l-26.3 15.2-19-33 26.3-15.2 19 33zM599.02053 356.7l7.9 13.7-23.3 13.5 9.8 17 21.8-12.6c7.5 18.7 6.6 39.6-2.5 57.6l20.7 4.4c10.3-23.1 10.3-49.4 0-72.5l18.8-10.9c6 9.2 10.7 19.2 14.2 29.7 0.3 5-2.6 9.7-7.2 11.7-2.9 1.2-6.4 2.8-10.9 4.9l14.1 14.1c3.7-1.3 7.3-2.9 10.7-4.8 8.6-3.9 14.4-12.2 15.2-21.6-5.4-22.1-14.6-43-27.4-61.8l-36.1 20.8-7.9-13.7-17.9 10.5z m29.9 108.1l10 17.4 53.2-30.7c-7.8 23.7-20.6 45.4-37.5 63.6l20.6 11.1c18.6-24.2 30-53.1 33-83.4l29.8 51.5 18.4-10.7-29.8-51.5c27.4 11.5 57.2 16.3 86.9 14.1l3.5-23.5c-24.7 5.1-50.1 5-74.8-0.1l53.5-30.9-10-17.3-69.3 40-7.3-12.6-18.4 10.7L698.02053 425l-69.1 39.8z"
-                fill="#515151" opacity=".5" p-id="5974"></path>
+                fill="#515151"
+                opacity=".5"
+                p-id="5974"
+              ></path>
             </svg>
           </div>
         </div>
       </div>
       <div class="bottom">
-        <a-pagination size="small" pageSize="4" :total="total" :current="page" @change="handleCurrentChange"
-          @showSizeChange="handlePageSizeChange" :showSizeChanger="false" />
+        <a-pagination
+          size="small"
+          pageSize="4"
+          :total="total"
+          :current="page"
+          @change="handleCurrentChange"
+          @showSizeChange="handlePageSizeChange"
+          :showSizeChanger="false"
+        />
       </div>
     </div>
     <a-empty v-else />
     <!-- :title="detailModalTitle" -->
-    <a-modal bodyStyle="padding:0.1rem 0" v-model:visible="detailsVisible"
-      style="width: 900px" :footer="null" destroyOnClose="true" :maskClosable="false">
-      <template v-slot:title>{{detailModalTitle}}</template>
-      <apply-details :processDefinitionName="processDefinitionName" :businessKey="businessKey"
-        :processInstanceId="processInstanceId" :resourceId="resourceId" :refObj="refObj" :showType="showType">
-      </apply-details>
+    <a-modal
+      bodyStyle="padding:0.1rem 0"
+      v-model:visible="detailsVisible"
+      style="width: 1000px"
+      :footer="null"
+      destroyOnClose="true"
+      :maskClosable="false"
+    >
+      <template v-slot:title>{{ detailModalTitle }}</template>
+      <apply-details
+        :processDefinitionName="processDefinitionName"
+        :businessKey="businessKey"
+        :processInstanceId="processInstanceId"
+        :resourceId="resourceId"
+        :refObj="refObj"
+        :showType="showType"
+      ></apply-details>
     </a-modal>
-    <a-modal v-model:visible="visible" title="下架原因" @ok="del()" @cancel="reason = ''">
+    <a-modal
+      v-model:visible="visible"
+      title="下架原因"
+      @ok="del()"
+      @cancel="reason = ''"
+    >
       <a-input v-model:value="reason" placeholder="请输入下架原因" />
     </a-modal>
-    <a-modal v-model:visible="videoVisible" title="已申请摄像头列表" @ok="videoVisible = false">
-      <a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{ defaultPageSize: 6 }">
+    <a-modal
+      v-model:visible="videoVisible"
+      title="已申请摄像头列表"
+      @ok="videoVisible = false"
+    >
+      <a-table
+        :columns="columns"
+        :data-source="xVideoList"
+        bordered
+        :pagination="{ defaultPageSize: 6 }"
+      >
         <template #bodyCell="{ column, text }">
           <!-- <template>
         <a>{{ text }}</a>
@@ -110,753 +185,764 @@
   </div>
 
   <!-- 联系方式弹框 -->
-  <a-modal v-model:visible="phoneVisible" title="提示" @ok="phoneVisible = false">
+  <a-modal
+    v-model:visible="phoneVisible"
+    title="提示"
+    @ok="phoneVisible = false"
+  >
     <!-- 工业信息化局那个号，电话配这个号：199 6399 0996 -->
     <p>请联系工业信息化局，电话：199 6399 0996</p>
   </a-modal>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref, onBeforeUnmount, h, defineProps } from 'vue'
-import {
-  getMyProcessInstancePage,
-  getTabilityapplication,
-  getByApplyFlag,
-  nengliziyuanshangjiaapply,
-  getDemandForm,
-  demandComment,
-  deviceApplylist,
-  getDeviceDetail,
-} from '@/api/personalCenter'
-import {
-  updateRes,
-  relaunch,
-  selectOne,
-  getApplyCameraList,
-  selectOneDel,
-} from '@/api/home'
-import { useRouter } from 'vue-router'
-import { message } from 'ant-design-vue'
-import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
-import mybus from '@/myplugins/mybus'
-import * as moment from 'moment'
+  import {
+    onMounted,
+    reactive,
+    ref,
+    onBeforeUnmount,
+    h,
+    defineProps,
+  } from 'vue'
+  import {
+    getMyProcessInstancePage,
+    getTabilityapplication,
+    getByApplyFlag,
+    nengliziyuanshangjiaapply,
+    getDemandForm,
+    demandComment,
+    deviceApplylist,
+    getDeviceDetail,
+  } from '@/api/personalCenter'
+  import {
+    updateRes,
+    relaunch,
+    selectOne,
+    getApplyCameraList,
+    selectOneDel,
+  } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  import { message } from 'ant-design-vue'
+  import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
+  import mybus from '@/myplugins/mybus'
+  import * as moment from 'moment'
 
-const props = defineProps({
-  tabTypeName: { type: String, default: '' },
-})
-const router = useRouter()
-let typeList = ref([
-  '能力申请',
-  '能力上架',
-  '能力下架',
-  '能力需求',
-  '需求评论',
-  // '能力评价',
-])
-// 西海岸-设备申请
-let isXiHaiAn = whoShow.itShowXiHaiAn
-const phoneSate = ref([2, 3])
-if (isXiHaiAn) {
-  typeList.value.push('设备申请')
-}
-const typeStrObj = {
-  '能力上架': 'resourcemountapply',
-  '能力下架': 'resourcundercarriageapply',
-  '能力需求': 'abilitydemandapply',
-  '需求评论': 'comment_review',
-}
-let tabList = ref(['全部', '审核中', '审核完成'])
-const contentList = reactive({ data: [] })
-let tabIndex = ref(0)
-let typeIndex = ref(0)
-let typeName = ref(typeList.value[0])
-const videoVisible = ref(false)
-const numFlag = ref(true)
-const columns = ref([
-  {
-    title: '摄像头名称',
-    dataIndex: 'name',
-  },
-])
-const xVideoList = ref([])
-
-let name = ref('')
-const detailsVisible = ref(false)
-const detailsVisible2 = ref(false)
-const businessKey = ref('')
-const processInstanceId = ref('')
-const processDefinitionName = ref('')
-const resourceId = ref('')
-const reason = ref('')
-const visible = ref(false)
-const delObj = ref({})
-const taskId = ref('')
-const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
-const refObj = ref({})
-const num = ref({
-  finished: 0,
-  unfinished: 0,
-})
-const total = ref('')
-const showType = ref('')
-const page = ref('1')
-const ended = ref('')
-const processDefinitionKey = ref('')
-const phoneVisible = ref(false)
-
-// 选择类型
-const changeType = (item, index) => {
-  console.log('item, index-----选择类型------->', item, index)
-  numFlag.value = true
-  num.value = []
-  showType.value = ''
-  tabIndex.value = 0
-  ended.value = ''
-  page.value = 1
-  typeIndex.value = index
-  typeName.value = item
-  getApplyList()
-}
-
-// 申请状态切换
-function changeApplyState(item, index) {
-  tabIndex.value = index
-  switch (item) {
-    case '审核中':
-      page.value = 1
-      ended.value = false
-      getApplyList()
-      break
-    case '审核完成':
-      page.value = 1
-      ended.value = true
-      getApplyList()
-      break
-    case '全部':
-      page.value = 1
-      ended.value = ''
-      getApplyList()
-      break
-  }
-}
-
-const cilckRowData = ref({})
-let detailModalTitle = '申请详情';
-const showDetail = (item) => {
-  cilckRowData.value = item;
-  // 西海岸-申请时间过期，提示
+  const props = defineProps({
+    tabTypeName: { type: String, default: '' },
+  })
+  const router = useRouter()
+  let typeList = ref([
+    '能力申请',
+    '能力上架',
+    '能力下架',
+    '能力需求',
+    '需求评论',
+    // '能力评价',
+  ])
+  // 西海岸-设备申请
+  let isXiHaiAn = whoShow.itShowXiHaiAn
+  const phoneSate = ref([2, 3])
   if (isXiHaiAn) {
-    // 西海岸、单兵无人机设备
-    if (item.tbDeviceDTO) {
-      detailModalTitle = item.tbDeviceDTO.name ? item.tbDeviceDTO.name + '申请详情' : '申请详情'
-    }
-    console.log('detailModalTitle------------>', detailModalTitle);
-    if (item.expireDate) {
-      let diff = moment().diff(moment(item.expireDate), 'seconds')
-      if (diff > 0) {
-        return message.error('当前申请已过期！')
-      }
+    typeList.value.push('设备申请')
+  }
+  const typeStrObj = {
+    能力上架: 'resourcemountapply',
+    能力下架: 'resourcundercarriageapply',
+    能力需求: 'abilitydemandapply',
+    需求评论: 'comment_review',
+  }
+  let tabList = ref(['全部', '审核中', '审核完成'])
+  const contentList = reactive({ data: [] })
+  let tabIndex = ref(0)
+  let typeIndex = ref(0)
+  let typeName = ref(typeList.value[0])
+  const videoVisible = ref(false)
+  const numFlag = ref(true)
+  const columns = ref([
+    {
+      title: '摄像头名称',
+      dataIndex: 'name',
+    },
+  ])
+  const xVideoList = ref([])
+
+  let name = ref('')
+  const detailsVisible = ref(false)
+  const detailsVisible2 = ref(false)
+  const businessKey = ref('')
+  const processInstanceId = ref('')
+  const processDefinitionName = ref('')
+  const resourceId = ref('')
+  const reason = ref('')
+  const visible = ref(false)
+  const delObj = ref({})
+  const taskId = ref('')
+  const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
+  const refObj = ref({})
+  const num = ref({
+    finished: 0,
+    unfinished: 0,
+  })
+  const total = ref('')
+  const showType = ref('')
+  const page = ref('1')
+  const ended = ref('')
+  const processDefinitionKey = ref('')
+  const phoneVisible = ref(false)
+
+  // 选择类型
+  const changeType = (item, index) => {
+    console.log('item, index-----选择类型------->', item, index)
+    numFlag.value = true
+    num.value = []
+    showType.value = ''
+    tabIndex.value = 0
+    ended.value = ''
+    page.value = 1
+    typeIndex.value = index
+    typeName.value = item
+    getApplyList()
+  }
+
+  // 申请状态切换
+  function changeApplyState(item, index) {
+    tabIndex.value = index
+    switch (item) {
+      case '审核中':
+        page.value = 1
+        ended.value = false
+        getApplyList()
+        break
+      case '审核完成':
+        page.value = 1
+        ended.value = true
+        getApplyList()
+        break
+      case '全部':
+        page.value = 1
+        ended.value = ''
+        getApplyList()
+        break
     }
   }
-  if (typeName.value == '能力申请' && item.applyFlag) {
-    getByApplyFlag(item.applyFlag).then((res) => {
-      if (res.data.code == 0) {
-        refObj.value = res.data.data
-        detailsVisible.value = true
-        processDefinitionName.value = item.processDefinitionName
-        businessKey.value = item.businessKey
-        processInstanceId.value = item.instanceId
-        resourceId.value = item.resourceId
-      } else {
-        message.error('数据请求失败！')
+
+  const cilckRowData = ref({})
+  let detailModalTitle = '申请详情'
+  const showDetail = (item) => {
+    cilckRowData.value = item
+    // 西海岸-申请时间过期，提示
+    if (isXiHaiAn) {
+      // 西海岸、单兵无人机设备
+      if (item.tbDeviceDTO) {
+        detailModalTitle = item.tbDeviceDTO.name
+          ? item.tbDeviceDTO.name + '申请详情'
+          : '申请详情'
       }
-    })
-  } else if (typeName.value == '设备申请') {
-    getDeviceDetailInfo(item.deviceId)
-      .then((res) => {
+      console.log('detailModalTitle------------>', detailModalTitle)
+      if (item.expireDate) {
+        let diff = moment().diff(moment(item.expireDate), 'seconds')
+        if (diff > 0) {
+          return message.error('当前申请已过期！')
+        }
+      }
+    }
+    if (typeName.value == '能力申请' && item.applyFlag) {
+      getByApplyFlag(item.applyFlag).then((res) => {
         if (res.data.code == 0) {
           refObj.value = res.data.data
           detailsVisible.value = true
           processDefinitionName.value = item.processDefinitionName
+          businessKey.value = item.businessKey
+          processInstanceId.value = item.instanceId
+          resourceId.value = item.resourceId
+        } else {
+          message.error('数据请求失败！')
         }
       })
-      .catch((err) => { })
-  } else if (
-    Object.keys(typeStrObj).includes(typeName.value) ||
-    typeName.value == '能力评价'
-  ) {
-    refObj.value = item
-    detailsVisible.value = true
-    processDefinitionName.value = item.processDefinitionName
-    businessKey.value = item.businessKey
-    processInstanceId.value = item.processInstanceId
-    resourceId.value = item.resourceId
-  } else {
-    message.error('数据请求失败！')
-  }
-}
-const showVideoList = (item) => {
-  console.log('显示列表', item)
-  getApplyCameraList(item.processInstanceId).then((res) => {
-    console.log('res', res)
-    xVideoList.value = []
-    res.data.data.map((val) => {
-      xVideoList.value.push({ name: val.channelName, key: val.channelId })
-    })
-  })
-  videoVisible.value = true
-}
-const copyComment = (data) => {
-  let url = data
-  let oInput = document.createElement('input')
-  oInput.value = url
-  document.body.appendChild(oInput)
-  oInput.select() // 选择对象;
-  console.log(oInput.value)
-  document.execCommand('Copy') // 执行浏览器复制命令
-  message.success('复制成功')
-  oInput.remove()
-}
-const showAdd = (item) => {
-  if (item.processDefinitionKey == 'resourcemountapply') {
-    const data = {
-      id: item.resourceId,
-      taskId: item.currentTaskList[0].taskId,
-    }
-    if (item.dto.type == '组件服务') {
-      data.abilityToType = '组件服务'
-      data.componentTypeValue = item.dto.infoList.filter(
-        (val) => val.attrType == '组件类型'
-      )[0].attrValue
-    } else if (item.dto.type == '应用资源') {
-      data.abilityToType = '应用资源'
-    }
-    const newpage = router.resolve({
-      path: '/nenglishangjia', // 跳转的页面路由
-      query: data,
-    })
-    console.log('上架申请修改=================》', item)
-    window.open(newpage.href, '_blank')
-  } else if (item.processDefinitionKey == 'resourcundercarriageapply') {
-    selectOne(item.resourceId).then((res) => {
-      if (res.data.code == 0) {
-        delObj.value = res.data.data
-        reason.value = delObj.value.undercarriageReason
-        taskId.value = item.currentTaskList[0].taskId
-        visible.value = true
-        console.log('下架申请修改=================》', res.data.data)
-      }
-    })
-  } else if (item.processDefinitionKey == 'abilitydemandapply') {
-    const newpage = router.resolve({
-      path: '/addApplication', // 跳转的页面路由
-      query: {
-        id: item.businessKey,
-        taskId: item.currentTaskList[0].taskId,
-      },
-    })
-    console.log('需求申请修改=================》', item)
-    window.open(newpage.href, '_blank')
-  } else if (item.processDefinitionKey == 'abilityprocess') {
-    const newpage = router.resolve({
-      path: '/apply', // 跳转的页面路由
-      query: {
-        id: item.businessKey,
-        resourceId: item.resourceId,
-        name: item.name,
-        taskId: item.currentTaskList[0].taskId,
-      },
-    })
-    console.log('能力申请修改=================》', item)
-    window.open(newpage.href, '_self')
-  }
-}
-
-const initNum = () => {
-  if (numFlag.value) {
-    num.value = []
-    getMyProcessInstancePage({
-      page: 1,
-      limit: 4,
-      ended: 'false',
-      processDefinitionKey: processDefinitionKey.value,
-    }).then((res) => {
-      if (res.data.code == 0) {
-        num.value.unfinished = res.data.data.total
-        getMyProcessInstancePage({
-          page: 1,
-          limit: 4,
-          ended: 'true',
-          processDefinitionKey: processDefinitionKey.value,
-        }).then((res) => {
+    } else if (typeName.value == '设备申请') {
+      getDeviceDetailInfo(item.deviceId)
+        .then((res) => {
           if (res.data.code == 0) {
-            num.value.finished = res.data.data.total
-            numFlag.value = false
+            refObj.value = res.data.data
+            detailsVisible.value = true
+            processDefinitionName.value = item.processDefinitionName
           }
         })
-      }
-    })
+        .catch((err) => {})
+    } else if (
+      Object.keys(typeStrObj).includes(typeName.value) ||
+      typeName.value == '能力评价'
+    ) {
+      refObj.value = item
+      detailsVisible.value = true
+      processDefinitionName.value = item.processDefinitionName
+      businessKey.value = item.businessKey
+      processInstanceId.value = item.processInstanceId
+      resourceId.value = item.resourceId
+    } else {
+      message.error('数据请求失败！')
+    }
   }
-}
-const initNum2 = () => {
-  if (numFlag.value) {
-    num.value = []
-    getTabilityapplication({
-      page: 1,
-      limit: 4,
-      ended: 'false',
-    }).then((res) => {
-      if (res.data.code == 0) {
-        num.value.unfinished = res.data.data.total
-        getTabilityapplication({
-          page: 1,
-          limit: 4,
-          ended: 'true',
-        }).then((res) => {
-          if (res.data.code == 0) {
-            num.value.finished = res.data.data.total
-            numFlag.value = false
-          }
-        })
-      }
+  const showVideoList = (item) => {
+    console.log('显示列表', item)
+    getApplyCameraList(item.processInstanceId).then((res) => {
+      console.log('res', res)
+      xVideoList.value = []
+      res.data.data.map((val) => {
+        xVideoList.value.push({ name: val.channelName, key: val.channelId })
+      })
     })
+    videoVisible.value = true
+  }
+  const copyComment = (data) => {
+    let url = data
+    let oInput = document.createElement('input')
+    oInput.value = url
+    document.body.appendChild(oInput)
+    oInput.select() // 选择对象;
+    console.log(oInput.value)
+    document.execCommand('Copy') // 执行浏览器复制命令
+    message.success('复制成功')
+    oInput.remove()
+  }
+  const showAdd = (item) => {
+    if (item.processDefinitionKey == 'resourcemountapply') {
+      const data = {
+        id: item.resourceId,
+        taskId: item.currentTaskList[0].taskId,
+      }
+      if (item.dto.type == '组件服务') {
+        data.abilityToType = '组件服务'
+        data.componentTypeValue = item.dto.infoList.filter(
+          (val) => val.attrType == '组件类型'
+        )[0].attrValue
+      } else if (item.dto.type == '应用资源') {
+        data.abilityToType = '应用资源'
+      }
+      const newpage = router.resolve({
+        path: '/nenglishangjia', // 跳转的页面路由
+        query: data,
+      })
+      console.log('上架申请修改=================》', item)
+      window.open(newpage.href, '_blank')
+    } else if (item.processDefinitionKey == 'resourcundercarriageapply') {
+      selectOne(item.resourceId).then((res) => {
+        if (res.data.code == 0) {
+          delObj.value = res.data.data
+          reason.value = delObj.value.undercarriageReason
+          taskId.value = item.currentTaskList[0].taskId
+          visible.value = true
+          console.log('下架申请修改=================》', res.data.data)
+        }
+      })
+    } else if (item.processDefinitionKey == 'abilitydemandapply') {
+      const newpage = router.resolve({
+        path: '/addApplication', // 跳转的页面路由
+        query: {
+          id: item.businessKey,
+          taskId: item.currentTaskList[0].taskId,
+        },
+      })
+      console.log('需求申请修改=================》', item)
+      window.open(newpage.href, '_blank')
+    } else if (item.processDefinitionKey == 'abilityprocess') {
+      const newpage = router.resolve({
+        path: '/apply', // 跳转的页面路由
+        query: {
+          id: item.businessKey,
+          resourceId: item.resourceId,
+          name: item.name,
+          taskId: item.currentTaskList[0].taskId,
+        },
+      })
+      console.log('能力申请修改=================》', item)
+      window.open(newpage.href, '_self')
+    }
   }
-}
-// initNum()
 
-// 搜索框
-const onSearch = (name) => {
-  console.log(name.value)
-}
-//重置
-function replacement() {
-  name.value = ''
-  getApplyList(name.value)
-}
-const getApplyList = () => {
-  const params = {
-    page: page.value,
-    limit: 4,
-    ended: ended.value,
-    // name: name.value,
+  const initNum = () => {
+    if (numFlag.value) {
+      num.value = []
+      getMyProcessInstancePage({
+        page: 1,
+        limit: 4,
+        ended: 'false',
+        processDefinitionKey: processDefinitionKey.value,
+      }).then((res) => {
+        if (res.data.code == 0) {
+          num.value.unfinished = res.data.data.total
+          getMyProcessInstancePage({
+            page: 1,
+            limit: 4,
+            ended: 'true',
+            processDefinitionKey: processDefinitionKey.value,
+          }).then((res) => {
+            if (res.data.code == 0) {
+              num.value.finished = res.data.data.total
+              numFlag.value = false
+            }
+          })
+        }
+      })
+    }
   }
-  if (ended.value === '') {
-    delete params.ended
+  const initNum2 = () => {
+    if (numFlag.value) {
+      num.value = []
+      getTabilityapplication({
+        page: 1,
+        limit: 4,
+        ended: 'false',
+      }).then((res) => {
+        if (res.data.code == 0) {
+          num.value.unfinished = res.data.data.total
+          getTabilityapplication({
+            page: 1,
+            limit: 4,
+            ended: 'true',
+          }).then((res) => {
+            if (res.data.code == 0) {
+              num.value.finished = res.data.data.total
+              numFlag.value = false
+            }
+          })
+        }
+      })
+    }
   }
-  if (typeName.value == '能力申请') {
-    getTabilityapplication(params).then((res) => {
+  // initNum()
+
+  // 搜索框
+  const onSearch = (name) => {
+    console.log(name.value)
+  }
+  //重置
+  function replacement() {
+    name.value = ''
+    getApplyList(name.value)
+  }
+  const getApplyList = () => {
+    const params = {
+      page: page.value,
+      limit: 4,
+      ended: ended.value,
+      // name: name.value,
+    }
+    if (ended.value === '') {
+      delete params.ended
+    }
+    if (typeName.value == '能力申请') {
+      getTabilityapplication(params).then((res) => {
+        contentList.data = []
+        console.log('获取我的申请===============>', res.data.data)
+        contentList.data = res.data.data.list
+        total.value = res.data.data.total
+        showType.value = '能力申请'
+        initNum2()
+      })
+    } else if (typeName.value == '能力评价') {
       contentList.data = []
-      console.log('获取我的申请===============>', res.data.data)
-      contentList.data = res.data.data.list
-      total.value = res.data.data.total
-      showType.value = '能力申请'
-      initNum2()
-    })
-  } else if (typeName.value == '能力评价') {
-    contentList.data = []
-    num.value = []
-    showType.value = ''
-  } else if (typeName.value == '设备申请') {
-    let _state =
-      ended.value === ''
-        ? '全部'
-        : ended.value === true
+      num.value = []
+      showType.value = ''
+    } else if (typeName.value == '设备申请') {
+      let _state =
+        ended.value === ''
+          ? '全部'
+          : ended.value === true
           ? '审核完成'
           : '审核中'
-    getDeviceApply(_state)
-      .then((res) => {
-        if (res.data.code == 0) {
-          contentList.data = []
-          contentList.data = res.data.data.list || []
-          total.value = res.data.data.total
-          showType.value = '设备申请'
-          // 获取审核中，审核完成 数量
-          getDeviceNum()
-        }
-      })
-      .catch((err) => { })
-  } else if (Object.keys(typeStrObj).includes(typeName.value)) {
-    processDefinitionKey.value = typeStrObj[typeName.value]
-    params.processDefinitionKey = processDefinitionKey.value
-    getMyProcessInstancePage(params).then((res) => {
-      contentList.data = []
-      // initNum(name.value)
-      console.log(res.data.data.list)
-      contentList.data = res.data.data.list
-      total.value = res.data.data.total
-      initNum()
-      switch (typeIndex.value) {
-        case 2:
-          contentList.data.map((val) => {
-            nengliziyuanshangjiaapply(val.businessKey).then((res1) => {
-              console.log('上架===========>', res1.data.data)
-              val.title = res1.data.data.resourceDTO.name
-              val.dto = res1.data.data.resourceDTO
-              showType.value = '能力上架'
+      getDeviceApply(_state)
+        .then((res) => {
+          if (res.data.code == 0) {
+            contentList.data = []
+            contentList.data = res.data.data.list || []
+            total.value = res.data.data.total
+            showType.value = '设备申请'
+            // 获取审核中，审核完成 数量
+            getDeviceNum()
+          }
+        })
+        .catch((err) => {})
+    } else if (Object.keys(typeStrObj).includes(typeName.value)) {
+      processDefinitionKey.value = typeStrObj[typeName.value]
+      params.processDefinitionKey = processDefinitionKey.value
+      getMyProcessInstancePage(params).then((res) => {
+        contentList.data = []
+        // initNum(name.value)
+        console.log(res.data.data.list)
+        contentList.data = res.data.data.list
+        total.value = res.data.data.total
+        initNum()
+        switch (typeIndex.value) {
+          case 2:
+            contentList.data.map((val) => {
+              nengliziyuanshangjiaapply(val.businessKey).then((res1) => {
+                console.log('上架===========>', res1.data.data)
+                val.title = res1.data.data.resourceDTO.name
+                val.dto = res1.data.data.resourceDTO
+                showType.value = '能力上架'
+              })
             })
-          })
-          break
-        case 3:
-          contentList.data.map((val) => {
-            selectOneDel(val.businessKey).then((res1) => {
-              console.log('下架===========>', res1.data.data)
-              val.title = res1.data.data.name
-              val.dto = res1.data.data
-              showType.value = '能力下架'
+            break
+          case 3:
+            contentList.data.map((val) => {
+              selectOneDel(val.businessKey).then((res1) => {
+                console.log('下架===========>', res1.data.data)
+                val.title = res1.data.data.name
+                val.dto = res1.data.data
+                showType.value = '能力下架'
+              })
             })
-          })
-          break
-        case 4:
-          contentList.data.map((val) => {
-            getDemandForm(val.businessKey).then((res1) => {
-              console.log('需求===========>', res1.data.data)
-              val.title = res1.data.data.demandSubject
-              val.resourceStatusTip = res1.data.data.flagTip
-              val.dto = res1.data.data
-              showType.value = '能力需求'
+            break
+          case 4:
+            contentList.data.map((val) => {
+              getDemandForm(val.businessKey).then((res1) => {
+                console.log('需求===========>', res1.data.data)
+                val.title = res1.data.data.demandSubject
+                val.resourceStatusTip = res1.data.data.flagTip
+                val.dto = res1.data.data
+                showType.value = '能力需求'
+              })
             })
-          })
-          break
-        case 5:
-          contentList.data.map((val) => {
-            demandComment(val.businessKey).then((res1) => {
-              console.log('评论===========>', res1.data.data)
-              val.title = res1.data.data.comment
-              val.resourceStatusTip = res1.data.data.delFlagTip
-              val.dto = res1.data.data
-              showType.value = '需求评论'
+            break
+          case 5:
+            contentList.data.map((val) => {
+              demandComment(val.businessKey).then((res1) => {
+                console.log('评论===========>', res1.data.data)
+                val.title = res1.data.data.comment
+                val.resourceStatusTip = res1.data.data.delFlagTip
+                val.dto = res1.data.data
+                showType.value = '需求评论'
+              })
             })
-          })
-          break
-      }
-    })
-  } else {
-    contentList.data = []
-    num.value = []
-    showType.value = ''
-  }
-}
-const handleCurrentChange = (val) => {
-  page.value = val
-  getApplyList()
-}
-
-const handlePageSizeChange = (val) => {
-  page.value = val
-  getApplyList()
-}
-
-const viewDetail = (processDefinitionName, id, ended, businessKey) => {
-  if (processDefinitionName == '能力申请流程') {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-        ended: ended,
-      },
-    })
-  }
-  if (processDefinitionName == '能力资源上架') {
-    console.log('showDetail', id, businessKey, ended)
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
-  }
-  if (processDefinitionName == '能力需求申请') {
-    router.push({
-      path: '/demandDetails',
-      query: {
-        id: businessKey,
-      },
-    })
-  }
-}
-
-// 下架能力
-const del = () => {
-  console.log('下架================》', delObj.value, reason.value)
-  delObj.value.undercarriageReason = reason.value
-  updateRes(delObj.value).then((upres) => {
-    if (upres.data.code == 0) {
-      relaunch({
-        data: { undercarriageReason: reason.value },
-        taskId: taskId.value,
-      }).then((res) => {
-        console.log('驳回================>', res)
-        if (res.data.code == 0) {
-          message.success('重新发起流程成功！')
-          visible.value = false
-          reason.value = ''
-        } else {
-          message.error('重新发起流程失败！')
+            break
         }
       })
     } else {
-      message.error('数据更新失败！')
+      contentList.data = []
+      num.value = []
+      showType.value = ''
+    }
+  }
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getApplyList()
+  }
+
+  const handlePageSizeChange = (val) => {
+    page.value = val
+    getApplyList()
+  }
+
+  const viewDetail = (processDefinitionName, id, ended, businessKey) => {
+    if (processDefinitionName == '能力申请流程') {
+      router.push({
+        path: '/details',
+        query: {
+          id: id,
+          ended: ended,
+        },
+      })
+    }
+    if (processDefinitionName == '能力资源上架') {
+      console.log('showDetail', id, businessKey, ended)
+      router.push({
+        path: '/details',
+        query: {
+          id: id,
+        },
+      })
+    }
+    if (processDefinitionName == '能力需求申请') {
+      router.push({
+        path: '/demandDetails',
+        query: {
+          id: businessKey,
+        },
+      })
+    }
+  }
+
+  // 下架能力
+  const del = () => {
+    console.log('下架================》', delObj.value, reason.value)
+    delObj.value.undercarriageReason = reason.value
+    updateRes(delObj.value).then((upres) => {
+      if (upres.data.code == 0) {
+        relaunch({
+          data: { undercarriageReason: reason.value },
+          taskId: taskId.value,
+        }).then((res) => {
+          console.log('驳回================>', res)
+          if (res.data.code == 0) {
+            message.success('重新发起流程成功！')
+            visible.value = false
+            reason.value = ''
+          } else {
+            message.error('重新发起流程失败！')
+          }
+        })
+      } else {
+        message.error('数据更新失败！')
+      }
+    })
+  }
+
+  // 西海岸：设备申请列表 todo
+  const getDeviceApply = (state) => {
+    return new Promise((resolve, reject) => {
+      let _data = {
+        page: page.value,
+        limit: 4,
+        state,
+      }
+      deviceApplylist(_data)
+        .then((res) => {
+          resolve(res)
+          console.log('res----设备申请-------->', res)
+        })
+        .catch((err) => {
+          reject(err)
+          console.log('err------------>', err)
+        })
+    })
+  }
+
+  // 西海岸：设备申请--查询详情
+  const getDeviceDetailInfo = (deviceId) => {
+    return new Promise((resolve, reject) => {
+      getDeviceDetail(deviceId)
+        .then((res) => {
+          resolve(res)
+          console.log('res----查询详情-------->', res)
+        })
+        .catch((err) => {
+          reject(err)
+          console.log('err------------>', err)
+        })
+    })
+  }
+
+  // 西海岸：设备申请-审核中, 审核完成数量
+  const getDeviceNum = () => {
+    if (!numFlag.value) {
+      return
+    }
+    num.value = []
+    Promise.all([getDeviceApply('审核中'), getDeviceApply('审核完成')])
+      .then((res) => {
+        console.log('res-----数量------->', res)
+        let unfinished = res[0] && res[0].data && res[0].data.data
+        let finished = res[1] && res[1].data && res[1].data.data
+        num.value.unfinished = unfinished.total || ''
+        num.value.finished = finished.total || ''
+        numFlag.value = false
+      })
+      .catch((err) => {})
+  }
+
+  const showPhoneModal = () => {
+    phoneVisible.value = true
+  }
+
+  mybus.on('closeModal', (obj) => {
+    detailsVisible.value = false
+    changeType(obj.type, obj.index)
+  })
+  onBeforeUnmount(() => {
+    mybus.off('closeModal')
+  })
+  onMounted(() => {
+    getApplyList()
+
+    if (props.tabTypeName) {
+      let _index = typeList.value.findIndex((v) => v == props.tabTypeName)
+      changeType(props.tabTypeName, _index != -1 ? _index : 0)
     }
   })
-}
-
-// 西海岸：设备申请列表 todo
-const getDeviceApply = (state) => {
-  return new Promise((resolve, reject) => {
-    let _data = {
-      page: page.value,
-      limit: 4,
-      state,
-    }
-    deviceApplylist(_data)
-      .then((res) => {
-        resolve(res)
-        console.log('res----设备申请-------->', res)
-      })
-      .catch((err) => {
-        reject(err)
-        console.log('err------------>', err)
-      })
-  })
-}
-
-// 西海岸：设备申请--查询详情
-const getDeviceDetailInfo = (deviceId) => {
-  return new Promise((resolve, reject) => {
-    getDeviceDetail(deviceId)
-      .then((res) => {
-        resolve(res)
-        console.log('res----查询详情-------->', res)
-      })
-      .catch((err) => {
-        reject(err)
-        console.log('err------------>', err)
-      })
-  })
-}
-
-// 西海岸：设备申请-审核中, 审核完成数量
-const getDeviceNum = () => {
-  if (!numFlag.value) {
-    return
-  }
-  num.value = []
-  Promise.all([getDeviceApply('审核中'), getDeviceApply('审核完成')])
-    .then((res) => {
-      console.log('res-----数量------->', res)
-      let unfinished = res[0] && res[0].data && res[0].data.data
-      let finished = res[1] && res[1].data && res[1].data.data
-      num.value.unfinished = unfinished.total || ''
-      num.value.finished = finished.total || ''
-      numFlag.value = false
-    })
-    .catch((err) => {
-    })
-}
-
-
-const showPhoneModal = () => {
-  phoneVisible.value = true
-}
-
-mybus.on('closeModal', (obj) => {
-  detailsVisible.value = false
-  changeType(obj.type, obj.index)
-})
-onBeforeUnmount(() => {
-  mybus.off('closeModal')
-})
-onMounted(() => {
-  getApplyList()
-
-  if (props.tabTypeName) {
-    let _index = typeList.value.findIndex(v => v == props.tabTypeName)
-    changeType(props.tabTypeName, _index != -1 ? _index : 0)
-  }
-})
 </script>
 
 <style scoped lang="less">
-.on-the-right-side-of-the-list {
-  background: #ffffff;
-  padding: 20px 0px 30px 20px;
-  position: absolute;
-  width: 1087px;
-  height: 810px;
-  top: 0px;
-  display: flex;
-  margin-top: 20px;
-  flex-direction: column;
-  font-size: 16px;
-  justify-content: left;
+  .on-the-right-side-of-the-list {
+    background: #ffffff;
+    padding: 20px 0px 30px 20px;
+    position: absolute;
+    width: 1087px;
+    height: 810px;
+    top: 0px;
+    display: flex;
+    margin-top: 20px;
+    flex-direction: column;
+    font-size: 16px;
+    justify-content: left;
 
-  .title {
-    font-size: 20px;
-    color: #000000;
-    font-family: 'Alibaba PuHuiTi';
-    font-weight: 500;
-  }
-
-  .sousuokuang {
-    margin: 20px 0px 21px 0px;
-
-    .ant-input-search {
-      max-width: 490px;
+    .title {
+      font-size: 20px;
+      color: #000000;
+      font-family: 'Alibaba PuHuiTi';
+      font-weight: 500;
     }
 
-    :deep(.ant-input) {
-      width: 400px;
-      height: 36px;
-      font-size: 14px;
-      color: #b2b2b2;
-      background: #f5f5f5;
-    }
+    .sousuokuang {
+      margin: 20px 0px 21px 0px;
 
-    :deep(.ant-input-group-addon) {
-      display: inline-block;
-      margin-left: 10px;
+      .ant-input-search {
+        max-width: 490px;
+      }
 
-      .ant-input-search-button {
-        width: 80px;
+      :deep(.ant-input) {
+        width: 400px;
         height: 36px;
-        border-radius: 4px;
         font-size: 14px;
+        color: #b2b2b2;
+        background: #f5f5f5;
+      }
+
+      :deep(.ant-input-group-addon) {
+        display: inline-block;
+        margin-left: 10px;
+
+        .ant-input-search-button {
+          width: 80px;
+          height: 36px;
+          border-radius: 4px;
+          font-size: 14px;
+        }
       }
     }
-  }
 
-  .tab {
-    display: flex;
-    font-size: 14px;
-    color: #999999;
+    .tab {
+      display: flex;
+      font-size: 14px;
+      color: #999999;
 
-    div {
-      // width: 70px;
-      padding: 5px 10px;
-      height: 24px;
-      line-height: 14px;
-      border: 1px solid #cccccc;
-      border-radius: 12px;
-      margin-left: 10px;
+      div {
+        // width: 70px;
+        padding: 5px 10px;
+        height: 24px;
+        line-height: 14px;
+        border: 1px solid #cccccc;
+        border-radius: 12px;
+        margin-left: 10px;
+        text-align: center;
+        color: #666666;
+        cursor: pointer;
+      }
+
+      .tabclass {
+        border: 1px solid #0087ff;
+        color: #0087ff;
+      }
+    }
+
+    .content {
+      padding-right: 10px;
+      height: 510px;
+
+      .content-body {
+        padding-bottom: 20px;
+        padding-top: 20px;
+        margin-right: 10px;
+        height: 150px;
+        border-bottom: #cccccc 1px solid;
+        position: relative;
+
+        .content-body-title {
+          min-width: 100px;
+          max-width: 900px;
+          width: fit-content;
+          font-size: 14px;
+          color: #333333;
+          font-family: 'Alibaba PuHuiTi';
+          font-weight: 500;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .content-body-content {
+          margin-top: 10px;
+          margin-bottom: 10px;
+          margin-right: 40px;
+          /* width: 720px; */
+          display: inline-block;
+        }
+
+        .content-body-content-son {
+          line-height: 16px;
+          font-size: 12px;
+          width: 100%;
+          // text-overflow: -o-ellipsis-lastline;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          // display: -webkit-box;
+          // -webkit-line-clamp: 3;
+          // -webkit-box-orient: vertical;
+          display: flex;
+          color: #999999;
+
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            max-width: 8.1rem;
+            line-height: 24px;
+            word-break: break-all;
+          }
+        }
+
+        .content-body-bottom {
+          display: flex;
+          color: #cccccc;
+          font-size: 12px;
+
+          div:first-child {
+            margin-right: 30px;
+          }
+        }
+      }
+    }
+
+    .bottom {
+      position: absolute;
+      bottom: 30px;
+      right: 20px;
+    }
+
+    .button-box {
+      position: absolute;
+      right: 20px;
+      top: 10px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .button {
+      width: 96px;
+      height: 30px;
+      margin: 5px 0;
+      background: #0087ff;
+      font-size: 14px;
+      color: #fff;
+      border-radius: 4px;
       text-align: center;
-      color: #666666;
+      line-height: 30px;
       cursor: pointer;
     }
 
-    .tabclass {
-      border: 1px solid #0087ff;
-      color: #0087ff;
+    .buttonAgree {
+      background-color: #49c988;
+    }
+
+    .backToFirst {
+      background-color: rgb(214, 91, 91);
     }
   }
 
-  .content {
-    padding-right: 10px;
-    height: 510px;
-
-    .content-body {
-      padding-bottom: 20px;
-      padding-top: 20px;
-      margin-right: 10px;
-      height: 150px;
-      border-bottom: #cccccc 1px solid;
-      position: relative;
-
-      .content-body-title {
-        min-width: 100px;
-        max-width: 900px;
-        width: fit-content;
-        font-size: 14px;
-        color: #333333;
-        font-family: 'Alibaba PuHuiTi';
-        font-weight: 500;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .content-body-content {
-        margin-top: 10px;
-        margin-bottom: 10px;
-        margin-right: 40px;
-        /* width: 720px; */
-        display: inline-block;
-      }
-
-      .content-body-content-son {
-        line-height: 16px;
-        font-size: 12px;
-        width: 100%;
-        // text-overflow: -o-ellipsis-lastline;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-        // display: -webkit-box;
-        // -webkit-line-clamp: 3;
-        // -webkit-box-orient: vertical;
-        display: flex;
-        color: #999999;
-
-        span {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          max-width: 8.1rem;
-          line-height: 24px;
-          word-break: break-all;
-        }
-      }
-
-      .content-body-bottom {
-        display: flex;
-        color: #cccccc;
-        font-size: 12px;
-
-        div:first-child {
-          margin-right: 30px;
-        }
-      }
-    }
+  :deep(.ant-badge-count) {
+    top: -5px;
+    right: -10px;
   }
-
-  .bottom {
-    position: absolute;
-    bottom: 30px;
-    right: 20px;
-  }
-
-  .button-box {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .button {
-    width: 96px;
-    height: 30px;
-    margin: 5px 0;
-    background: #0087ff;
-    font-size: 14px;
-    color: #fff;
-    border-radius: 4px;
-    text-align: center;
-    line-height: 30px;
-    cursor: pointer;
-  }
-
-  .buttonAgree {
-    background-color: #49c988;
-  }
-
-  .backToFirst {
-    background-color: rgb(214, 91, 91);
-  }
-}
-
-:deep(.ant-badge-count) {
-  top: -5px;
-  right: -10px;
-}
 </style>