fixed:添加加载旋转图标以及性能优化

src/views/CEEnterprise/companydetail/index.vue

@@ -1,89 +1,89 @@
 <script setup>
 import {fieldMap, tableMap} from './map';
 import {getCompanyDetail} from '@/api/companyDetail';
-import {ref} from 'vue'
+import {onUnmounted, ref} from 'vue'
 import {useRoute} from "vue-router";
+import {ElMessage} from "element-plus";
 
 const activeNames = ref([])
-    const showList = ref([])
-  const route = useRoute();
-
-    const handleChange = (val) => {
-      console.log(val)
-    }
-    const getTableLength = (tableObj)=>{
-      if(!tableObj)return null;
-      let excludeList = ['id', 'update_time','create_time'];
-      let newObj = {};
-      for (let key in tableObj) {
-        if (!excludeList.includes(key)) {
-          newObj[key] = tableObj[key];
-        }
-      }
-      return Object.keys(newObj);
-    }
-    getCompanyDetail(route.query.unifiedSocialCreditCode).then(res=>{
-      if(res.code == 200){
-        for(let i=0;i<res.data.length;i++){
-          activeNames.value.push(i)
-        }
-        showList.value = res.data;
-        // console.log(showList.value);
-      }
-    })
-    // const test = (a)=>{
-    //   // console.log(a);
-    //   const r = a.map(item=>{
-    //     let entries = Object.entries(item);
-    //     const r = entries.filter(item=>{
-    //       return item[0] == 'unified_social_credit_code'
-    //     })
-    //     const index = entries.findIndex(item=>{
-    //       return item[0] == 'unified_social_credit_code'
-    //     })
-    //     const r1 = entries.filter(item=>{
-    //       return item[0] == 'id'
-    //     })
-    //     const index1 = entries.findIndex(item=>{
-    //       return item[0] == 'id'
-    //     })
-    //     entries.splice(index,1)
-    //     entries.splice(index1,1)
-    //     return [...r,...r1,...entries];
-    //   })
-    //   console.log(r);
-    // }
-  const specialHanle = (rowProp,index,label)=>{
-      if(typeof rowProp == 'string'){
-        if(rowProp.includes('script') || rowProp.includes("img")){
-          return "违禁词"
-        }
-      }
-    if(index == 0 || index == 1){
-      return '<span style="font-size: 14px;font-weight: bold">'+rowProp+'</span>'
+const showList = ref([])
+const route = useRoute();
+const detailContainer = ref(null);
+const loading = ref(true);
+const handleChange = (val) => {
+  console.log(val)
+}
+const getTableLength = (tableObj) => {
+  if (!tableObj) return null;
+  let excludeList = ['id', 'update_time', 'create_time'];
+  let newObj = {};
+  for (let key in tableObj) {
+    if (!excludeList.includes(key)) {
+      newObj[key] = tableObj[key];
     }
-    if(index == 8 && label == '商标图片'){
-      return `<img style="width: 100px;" src="${import.meta.env.VITE_APP_BASE_URL+rowProp}" />`
+  }
+  return Object.keys(newObj);
+}
+getCompanyDetail(route.query.unifiedSocialCreditCode).then(res => {
+  if (res.code == 200) {
+    for (let i = 0; i < res.data.length; i++) {
+      activeNames.value.push(i)
     }
-    if(index == 5 && label == '录入时间'){
-      return rowProp.split('T')[0];
+    showList.value = res.data;
+  }else {
+    ElMessage.error(res.msg);
+  }
+})
+const specialHanle = (rowProp, index, label) => {
+  if (!rowProp) return;
+  if (typeof rowProp == 'string') {
+    if (rowProp.includes('script') || rowProp.includes("img")) {
+      return "违禁词"
     }
-    return rowProp;
   }
+  if (index == 5 && label == '录入时间') {
+    return rowProp.split('T')[0];
+  }
+  return rowProp;
+}
+// 定义定时器
+let timer;
+let timeoutTimer;
+timer = setInterval(() => {
+  if (detailContainer.value.offsetHeight > 50) {
+    loading.value = false;
+    clearInterval(timer);
+    timer = null;
+  }
+}, 10);
+timeoutTimer = setTimeout(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}, 5000);
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+  clearTimeout(timeoutTimer);
+  timeoutTimer = null;
+});
 </script>
 
 <template>
-  <div>
-    <div>企业名称:{{route.query.enterpriseName}}</div>
-    <div>当前查询的统一信用代码是：{{route.query.unifiedSocialCreditCode}}</div>
-    <div class="demo-collapse">
+  <div ref="detailContainer">
+    <div style="font-size: 18px;font-weight: bold;">企业名称:{{ route.query.enterpriseName }}</div>
+    <div style="font-size: 18px;font-weight: bold;">当前查询的统一信用代码是：{{ route.query.unifiedSocialCreditCode }}
+    </div>
+    <div class="demo-collapse" v-loading.fullscreen.lock="loading" element-loading-text="加载数据中...">
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item v-for="(item,index) in showList" :title="tableMap[item.tableName]" :name="index">
           <el-table :data="item.data" max-height="250">
             <template v-for="(t,i) in getTableLength(item.data[0])" :key="i">
               <el-table-column :prop="t" :label="fieldMap[t]" width="300">
                 <template #default="scope">
-                  <div v-html="specialHanle(scope.row[t],i,fieldMap[t])" />
+                  <div v-html="specialHanle(scope.row[t],i,fieldMap[t])"/>
                 </template>
               </el-table-column>
             </template>
@@ -95,7 +95,7 @@ const activeNames = ref([])
 </template>
 
 <style lang="scss">
-.demo-collapse .el-collapse-item__header{
+.demo-collapse .el-collapse-item__header {
   font-size: 18px;
   font-weight: bold;
 }

src/views/visualization/index.vue

@@ -791,7 +791,7 @@ function obtaingetBusinessAdnormalities() {
     // console.log("查询经营异常:", res)
     res.forEach(item => {
       const ObjectValue = {
-        name: item.enterpriseName,
+        name: item.companyName,
         time: '经营异常',
         state: 0,
         img: gaojingkuang