diff --git a/package.json b/package.json
index d1c027875..a97e5d68f 100644
--- a/package.json
+++ b/package.json
@@ -9,36 +9,35 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.24.0",
     "clipboard": "^2.0.8",
-    "core-js": "^3.15.1",
-    "echarts": "^5.1.2",
+    "core-js": "^3.20.2",
+    "echarts": "^5.2.2",
     "element-ui": "^2.15.2",
-    "highlight.js": "^11.2.0",
-    "insert-css": "^2.0.0",
-    "js-base64": "^3.6.1",
+    "highlight.js": "^11.4.0",
+    "js-base64": "^3.7.2",
     "js-cookie": "latest",
     "js-md5": "^0.7.3",
     "nprogress": "latest",
     "vue": "^2.6.14",
-    "vue-axios": "^3.2.4",
+    "vue-axios": "^3.4.0",
     "vue-baidu-map": "^0.21.22",
     "vue-gemini-scrollbar": "^2.0.1",
     "vue-highlightjs": "^1.3.3",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.3",
     "vue-sparklines": "^0.2.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-router": "^4.5.13",
-    "@vue/cli-plugin-vuex": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-vuex": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
     "node-sass": "^4.14.1 ",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^4.36.0"
+    "webpack": "^5.0.0"
   },
   "browserslist": [
     "> 1%",
diff --git a/src/components/card/skeleton-card.vue b/src/components/card/skeleton-card.vue
new file mode 100644
index 000000000..0f928b2e6
--- /dev/null
+++ b/src/components/card/skeleton-card.vue
@@ -0,0 +1,107 @@
+<template>
+    <el-skeleton :loading="loading" animated>
+        <template slot="template">
+            <div class="things-card">
+                <el-card shadow="hover">
+                    <div class="things-card-content">
+                        <div v-if="!header" class="things-card__header">
+                            <el-skeleton-item class="things-card-header-icon skeleton" variant="image"/>
+                            <el-skeleton-item class="things-card-header-name skeleton" variant="text"/>
+                        </div>
+                        <div class="things-card__body">
+                            <div class="things-card-body-content" v-bind:class="{'left':header,'center':!header}">
+                                <ul>
+                                    <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                    <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                    <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                    <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                    <div v-if="header">
+                                        <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                        <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                        <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                        <el-skeleton-item class="nowrap-item skeleton" variant="text"/>
+                                    </div>
+                                </ul>
+                            </div>
+                            <div v-if="!header" class="things-card-body-content">
+                                <el-skeleton-item class="nowrap-description skeleton" variant="text"/>
+                            </div>
+                        </div>
+                        <div v-if="!footer" class="things-card__footer">
+                            <div class="things-card-footer-operation">
+                                <el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
+                                <el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
+                                <el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
+                                <el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
+                                <el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
+                            </div>
+                        </div>
+                    </div>
+                </el-card>
+            </div>
+        </template>
+    </el-skeleton>
+</template>
+
+<script>
+    export default {
+        name: "skeleton-card",
+        props: {
+            loading: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                }
+            },
+            header: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                }
+            },
+            footer: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    @import "~@/components/card/styles/things-card.scss";
+
+    .things-card-header-icon.skeleton {
+        width: 55px !important;
+    }
+
+    .things-card-header-name.skeleton {
+        margin-top: 10px;
+        height: 28px !important;
+    }
+
+    .nowrap-item.skeleton {
+        margin-bottom: 12px;
+    }
+
+    .nowrap-description.skeleton {
+        margin-top: 10px;
+        margin-bottom: 17px;
+    }
+
+    .things-card-body-content.center {
+        justify-content: center !important;
+    }
+
+    .things-card-body-content.left {
+        margin-left: 30px;
+        justify-content: left !important;
+    }
+
+    .operation-tooltip.skeleton {
+        width: 28px;
+        height: 20px;
+        margin-top: 15px;
+    }
+</style>
diff --git a/src/components/card/styles/things-card.scss b/src/components/card/styles/things-card.scss
index 8239c7943..efc00abf4 100644
--- a/src/components/card/styles/things-card.scss
+++ b/src/components/card/styles/things-card.scss
@@ -210,3 +210,8 @@
 .header-disable {
   border-bottom: 1px solid #fbc4c4;
 }
+
+.el-popover.el-popper {
+  width: 300px;
+}
+
diff --git a/src/views/device/DeviceCard.vue b/src/views/device/DeviceCard.vue
index 261ab5a56..1f00cf862 100644
--- a/src/views/device/DeviceCard.vue
+++ b/src/views/device/DeviceCard.vue
@@ -37,7 +37,7 @@
                         <el-popconfirm title="是否确定启用该设备？" placement="top" icon="el-icon-remove-outline">
                             <el-button class="operation-tooltip" type="text" slot="reference" :disabled="data.enable">启用</el-button>
                         </el-popconfirm>
-                        <el-popconfirm title="是否确定删除该设备？" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
+                        <el-popconfirm title="是否确定删除该设备？该设备下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
                             <el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
                         </el-popconfirm>
                         <el-button type="text" @click="edit(data.id, data.driverId)">编辑</el-button>
diff --git a/src/views/device/DeviceDetail.vue b/src/views/device/DeviceDetail.vue
index 0fa313a48..eeb4866c3 100644
--- a/src/views/device/DeviceDetail.vue
+++ b/src/views/device/DeviceDetail.vue
@@ -16,6 +16,9 @@
                 </el-tab-pane>
                 <el-tab-pane label="包含模板" name="profile">
                     <el-row>
+                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="profileLoading" :footer="true"></skeleton-card>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listProfileData">
                             <profile-card
                                     :data="data"
@@ -27,6 +30,9 @@
                 </el-tab-pane>
                 <el-tab-pane label="包含位号" name="point">
                     <el-row>
+                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="pointLoading" :footer="true"></skeleton-card>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
                             <point-card
                                     :data="data"
@@ -35,9 +41,15 @@
                             ></point-card>
                         </el-col>
                     </el-row>
+                </el-tab-pane>
+                <el-tab-pane label="设备模型" name="deviceCModel">
+
                 </el-tab-pane>
                 <el-tab-pane label="设备数据" name="pointValue">
                     <el-row>
+                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="pointValueLoading" :footer="true"></skeleton-card>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-if="data" v-for="data in listPointValueData">
                             <point-value-card
                                     v-if="data"
@@ -51,6 +63,9 @@
                             ></point-value-card>
                         </el-col>
                     </el-row>
+                </el-tab-pane>
+                <el-tab-pane label="设备指令" name="deviceCommand">
+
                 </el-tab-pane>
                 <el-tab-pane label="设备事件" name="deviceEvent">
                     <el-timeline>
@@ -93,6 +108,7 @@
 <script>
     import baseCard from '@/components/card/base-card';
     import detailCard from '@/components/card/detail-card';
+    import skeletonCard from '@/components/card/skeleton-card';
     import deviceCard from './DeviceCard';
     import profileCard from '../profile/ProfileCard';
     import pointCard from '../point/PointCard';
@@ -106,7 +122,7 @@
     import {pointByDeviceId, pointValueByDeviceId} from "@/api/point";
 
     export default {
-        components: {baseCard, detailCard, deviceCard, profileCard, pointCard, pointValueCard, pointValueEditForm, pointValueDetail},
+        components: {baseCard, detailCard, skeletonCard, deviceCard, profileCard, pointCard, pointValueCard, pointValueEditForm, pointValueDetail},
         props: {
             name: String
         },
@@ -114,6 +130,9 @@
             return {
                 id: this.$route.query.id,
                 active: this.$route.query.active,
+                profileLoading: true,
+                pointLoading: true,
+                pointValueLoading: true,
                 data: {
                     profileIds: []
                 },
@@ -148,16 +167,23 @@
                 deviceById(this.id).then(res => {
                     this.data = res.data;
                     this.deviceTable[this.data.id] = this.data.name;
+                }).catch(() => {
                 });
             },
             profiles() {
                 profileByDeviceId(this.id).then(res => {
                     this.listProfileData = res.data;
+                }).catch(() => {
+                }).finally(() => {
+                    this.profileLoading = false;
                 });
             },
             points() {
                 pointByDeviceId(this.id).then(res => {
                     this.listPointData = res.data;
+                }).catch(() => {
+                }).finally(() => {
+                    this.pointLoading = false;
                 });
             },
             pointValues() {
@@ -173,6 +199,9 @@
                             this.listPointValueHistoryData[pointValue.pointId] = pointValue.children.reverse().map(pointValue => pointValue.value);
                         }
                     });
+                }).catch(() => {
+                }).finally(() => {
+                    this.pointValueLoading = false;
                 });
             },
             status() {
diff --git a/src/views/device/DeviceEdit.vue b/src/views/device/DeviceEdit.vue
index fee2bea36..a6eba2072 100644
--- a/src/views/device/DeviceEdit.vue
+++ b/src/views/device/DeviceEdit.vue
@@ -170,6 +170,9 @@
                 </div>
                 <div class="content-edit-point">
                     <el-row>
+                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="loading" :footer="true"></skeleton-card>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-if="data" v-for="data in pointInfoData">
                             <point-info-card
                                     :data="data"
@@ -185,6 +188,7 @@
 </template>
 
 <script>
+    import skeletonCard from '@/components/card/skeleton-card';
     import {driverDictionary, profileDictionary} from "@/api/dictionary";
     import {deviceById, deviceUpdate} from "@/api/device";
     import {driverAttributeByDriverId, pointAttributeByDriverId} from "@/api/attribute";
@@ -193,12 +197,13 @@
     import pointInfoCard from "../point/info/PointInfoCard"
 
     export default {
-        components: {pointInfoCard},
+        components: {skeletonCard, pointInfoCard},
         data() {
             return {
                 id: this.$route.query.id,
                 driverId: this.$route.query.driverId,
                 active: +this.$route.query.active,
+                loading: true,
                 driverDictionary: [],
                 profileDictionary: [],
                 driverTable: {},
@@ -285,6 +290,7 @@
                     this.changeDriver(this.driverId);
                     this.changePoint();
                     this.oldDeviceFormData = {...res.data};
+                }).catch(() => {
                 });
             },
             driver() {
@@ -336,9 +342,12 @@
                             });
                             return pointInfo;
                         });
+                    }).catch(() => {
                     });
 
                 }).catch(() => {
+                }).finally(() => {
+                    this.loading = false;
                 });
             },
             profileName(profileId) {
@@ -375,6 +384,7 @@
                         this.oldDriverFormData = JSON.parse(JSON.stringify(formData));
                     }).catch(() => {
                     });
+                }).catch(() => {
                 });
             },
             changePoint() {
@@ -397,7 +407,9 @@
                                 return pointInfo;
                             });
                         });
+                    }).catch(() => {
                     });
+                }).catch(() => {
                 });
             },
             changePointInfo(row) {
@@ -425,6 +437,7 @@
                             this.changeDriver(this.driverId);
                             this.changePoint(this.id);
                             this.oldDeviceFormData = {...res.data};
+                        }).catch(() => {
                         });
                     }
                 });
@@ -441,7 +454,15 @@
                                 value: this.driverFormData[attribute.name].value
                             };
 
-                            driverInfo.id ? driverInfoUpdate(driverInfo).then(res => loadFormData(formData, res, this)) : driverInfoAdd(driverInfo).then(res => loadFormData(formData, res, this));
+                            driverInfo.id ?
+                                driverInfoUpdate(driverInfo)
+                                    .then(res => loadFormData(formData, res, this))
+                                    .catch(() => {
+                                    }) :
+                                driverInfoAdd(driverInfo)
+                                    .then(res => loadFormData(formData, res, this))
+                                    .catch(() => {
+                                    });
 
                             function loadFormData(formData, res, that) {
                                 formData[attribute.name] = {
@@ -466,7 +487,15 @@
                                 value: this.pointFormData[attribute.name].value
                             };
 
-                            pointInfo.id ? pointInfoUpdate(pointInfo).then(res => loadTableData(res, attribute, this)) : pointInfoAdd(pointInfo).then(res => loadTableData(res, attribute, this));
+                            pointInfo.id ?
+                                pointInfoUpdate(pointInfo)
+                                    .then(res => loadTableData(res, attribute, this))
+                                    .catch(() => {
+                                    }) :
+                                pointInfoAdd(pointInfo)
+                                    .then(res => loadTableData(res, attribute, this))
+                                    .catch(() => {
+                                    });
 
                             function loadTableData(res, attribute, that) {
                                 that.pointInfoData = that.pointInfoData.map(tableData => {
diff --git a/src/views/device/DeviceList.vue b/src/views/device/DeviceList.vue
index 639c92bab..db6bf7e0b 100644
--- a/src/views/device/DeviceList.vue
+++ b/src/views/device/DeviceList.vue
@@ -16,6 +16,9 @@
 
         <blank-card>
             <el-row>
+                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                    <skeleton-card :loading="loading"></skeleton-card>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <device-card
                             :data="data"
@@ -38,6 +41,7 @@
 </template>
 <script>
     import blankCard from '@/components/card/blank-card';
+    import skeletonCard from '@/components/card/skeleton-card';
     import deviceTool from './DeviceTool'
     import deviceAddForm from './DeviceAddForm'
     import deviceCard from './DeviceCard'
@@ -45,9 +49,10 @@
     import {driverDictionary, profileDictionary} from "@/api/dictionary";
 
     export default {
-        components: {blankCard, deviceTool, deviceAddForm, deviceCard},
+        components: {blankCard, skeletonCard, deviceTool, deviceAddForm, deviceCard},
         data() {
             return {
+                loading: true,
                 driverDictionary: [],
                 profileDictionary: [],
                 driverTable: {},
@@ -78,6 +83,8 @@
                     this.page.total = data.total;
                     this.listData = data.records;
                 }).catch(() => {
+                }).finally(() => {
+                    this.loading = false;
                 });
 
                 deviceStatus({
diff --git a/src/views/driver/DriverDetail.vue b/src/views/driver/DriverDetail.vue
index b09e6d456..b97da14e2 100644
--- a/src/views/driver/DriverDetail.vue
+++ b/src/views/driver/DriverDetail.vue
@@ -14,6 +14,9 @@
                 </el-tab-pane>
                 <el-tab-pane label="关联设备" name="device">
                     <el-row>
+                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
                             <device-card
                                     :data="data"
@@ -25,6 +28,10 @@
                         </el-col>
                     </el-row>
                 </el-tab-pane>
+                <el-tab-pane label="驱动模型" name="model">
+                </el-tab-pane>
+                <el-tab-pane label="驱动事件" name="event">
+                </el-tab-pane>
             </el-tabs>
         </base-card>
     </div>
@@ -32,6 +39,7 @@
 <script>
     import baseCard from '@/components/card/base-card';
     import detailCard from '@/components/card/detail-card';
+    import skeletonCard from '@/components/card/skeleton-card';
     import deviceCard from '../device/DeviceCard';
     import pointCard from '../point/PointCard';
     import {dateFormat, setCopyContent} from "@/util/util";
@@ -40,11 +48,12 @@
     import {driverById} from "@/api/driver";
 
     export default {
-        components: {baseCard, detailCard, deviceCard, pointCard},
+        components: {baseCard, detailCard, skeletonCard, deviceCard, pointCard},
         data() {
             return {
                 id: this.$route.query.id,
                 active: this.$route.query.active,
+                deviceLoading: true,
                 driverTable: {},
                 profileTable: {},
                 statusTable: {},
@@ -62,12 +71,15 @@
             driver() {
                 driverById(this.id).then(res => {
                     this.data = res.data;
+                }).catch(() => {
                 });
             },
             device() {
                 deviceByDriverId(this.id).then(res => {
                     this.listDeviceData = res.data;
                 }).catch(() => {
+                }).finally(() => {
+                    this.deviceLoading = false;
                 });
 
                 deviceStatusByDriverId(this.id).then(res => {
diff --git a/src/views/driver/DriverList.vue b/src/views/driver/DriverList.vue
index 428e50f4f..3d3ffeb01 100644
--- a/src/views/driver/DriverList.vue
+++ b/src/views/driver/DriverList.vue
@@ -14,6 +14,9 @@
 
         <blank-card>
             <el-row>
+                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                    <skeleton-card :loading="loading"></skeleton-card>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <driver-card
                             :data="data"
@@ -26,14 +29,16 @@
 </template>
 <script>
     import blankCard from '@/components/card/blank-card';
+    import skeletonCard from '@/components/card/skeleton-card';
     import driverTool from './DriverTool'
     import driverCard from './DriverCard'
     import {driverList, driverStatus} from "@/api/driver";
 
     export default {
-        components: {blankCard, driverTool, driverCard},
+        components: {blankCard, skeletonCard, driverTool, driverCard},
         data() {
             return {
+                loading: true,
                 statusTable: {},
                 listData: [],
                 query: {
@@ -60,6 +65,8 @@
                     this.page.total = data.total;
                     this.listData = data.records;
                 }).catch(() => {
+                }).finally(() => {
+                    this.loading = false;
                 });
 
                 driverStatus({
diff --git a/src/views/gateway/GatewayDetail.vue b/src/views/gateway/GatewayDetail.vue
index 3896327d5..e4f333a7f 100644
--- a/src/views/gateway/GatewayDetail.vue
+++ b/src/views/gateway/GatewayDetail.vue
@@ -62,6 +62,7 @@
             driver() {
                 driverById(this.id).then(res => {
                     this.data = res.data;
+                }).catch(() => {
                 });
             },
             device() {
diff --git a/src/views/gateway/GatewayList.vue b/src/views/gateway/GatewayList.vue
index 791cea507..61c613590 100644
--- a/src/views/gateway/GatewayList.vue
+++ b/src/views/gateway/GatewayList.vue
@@ -13,6 +13,9 @@
         </el-row>
 
         <el-row>
+            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                <skeleton-card :loading="loading"></skeleton-card>
+            </el-col>
             <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                 <gateway-card
                         :data="data"
@@ -23,14 +26,16 @@
     </div>
 </template>
 <script>
+    import skeletonCard from '@/components/card/skeleton-card';
     import gatewayTool from './GatewayTool'
     import gatewayCard from './GatewayCard'
     import {driverList, driverStatus} from "@/api/driver";
 
     export default {
-        components: {gatewayTool, gatewayCard},
+        components: {skeletonCard, gatewayTool, gatewayCard},
         data() {
             return {
+                loading: true,
                 statusTable: {},
                 listData: [],
                 query: {
@@ -57,6 +62,8 @@
                     this.page.total = data.total;
                     this.listData = data.records;
                 }).catch(() => {
+                }).finally(() => {
+                    this.loading = false;
                 });
 
                 driverStatus({
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
index e2c36ac67..47b72ce0b 100644
--- a/src/views/home/Home.vue
+++ b/src/views/home/Home.vue
@@ -2,12 +2,12 @@
     <div>
         <title-card class="home-app" title="导航">
             <div class="app-item">
-                <application-card v-for="i in 12" :name="'应用 '+i"></application-card>
+                <application-card :key="i" v-for="i in 12" :name="'应用 '+i"></application-card>
             </div>
         </title-card>
         <title-card class="home-dashboard" title="看板">
             <div class="dashboard-item">
-                <dashboard-card v-for="i in 6" :name="'数据看板 '+i"></dashboard-card>
+                <dashboard-card :key="i" v-for="i in 6" :name="'数据看板 '+i"></dashboard-card>
             </div>
         </title-card>
         <title-card class="home-count" title="统计">
diff --git a/src/views/point/PointCard.vue b/src/views/point/PointCard.vue
index b8271dce5..475a00e2e 100644
--- a/src/views/point/PointCard.vue
+++ b/src/views/point/PointCard.vue
@@ -38,7 +38,7 @@
                         <el-popconfirm title="是否确定启用该位号？" placement="top" icon="el-icon-remove-outline">
                             <el-button class="operation-tooltip" type="text" slot="reference" :disabled="data.enable">启用</el-button>
                         </el-popconfirm>
-                        <el-popconfirm title="是否确定删除该位号？" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
+                        <el-popconfirm title="是否确定删除该位号？该位号下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
                             <el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
                         </el-popconfirm>
                         <el-button type="text" @click="edit(data.id)">编辑</el-button>
diff --git a/src/views/point/PointDetail.vue b/src/views/point/PointDetail.vue
index 187cbf375..c3f6a6e2e 100644
--- a/src/views/point/PointDetail.vue
+++ b/src/views/point/PointDetail.vue
@@ -62,6 +62,7 @@
             driver() {
                 driverById(this.id).then(res => {
                     this.data = res.data;
+                }).catch(() => {
                 });
             },
             device() {
diff --git a/src/views/point/PointEdit.vue b/src/views/point/PointEdit.vue
index 8a8467e1b..c4b5f028a 100644
--- a/src/views/point/PointEdit.vue
+++ b/src/views/point/PointEdit.vue
@@ -195,6 +195,7 @@
                 pointById(id).then(res => {
                     this.pointFormData = res.data;
                     this.oldPointFormData = {...res.data};
+                }).catch(() => {
                 });
             },
             pointUpdate() {
@@ -202,6 +203,7 @@
                     if (valid) {
                         pointUpdate(this.pointFormData).then(res => {
                             this.oldPointFormData = {...res.data};
+                        }).catch(() => {
                         });
                     }
                 });
diff --git a/src/views/point/PointList.vue b/src/views/point/PointList.vue
index 40f0f639e..98203ba33 100644
--- a/src/views/point/PointList.vue
+++ b/src/views/point/PointList.vue
@@ -18,6 +18,9 @@
         </el-row>
 
         <el-row>
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
+                <skeleton-card :loading="loading"></skeleton-card>
+            </el-col>
             <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listData">
                 <point-card
                         :data="data"
@@ -35,6 +38,7 @@
     </div>
 </template>
 <script>
+    import skeletonCard from '@/components/card/skeleton-card';
     import pointTool from './PointTool'
     import pointAddForm from './PointAddForm'
     import pointCard from './PointCard'
@@ -62,9 +66,10 @@
                 }
             }
         },
-        components: {pointTool, pointAddForm, pointCard},
+        components: {skeletonCard, pointTool, pointAddForm, pointCard},
         data() {
             return {
+                loading: true,
                 profileDictionary: [],
                 profileTable: {},
                 listData: [],
@@ -92,6 +97,8 @@
                     this.page.total = data.total;
                     this.listData = data.records;
                 }).catch(() => {
+                }).finally(() => {
+                    this.loading = false;
                 });
             },
             profile() {
diff --git a/src/views/point/value/PointValueCard.vue b/src/views/point/value/PointValueCard.vue
index ff4bfdd7a..b7fc274e9 100644
--- a/src/views/point/value/PointValueCard.vue
+++ b/src/views/point/value/PointValueCard.vue
@@ -37,7 +37,7 @@
                 </div>
                 <div v-if="!embedded" class="things-card__footer">
                     <div class="things-card-footer-operation">
-                        <el-popconfirm title="是否确定删除该数据？" placement="top" icon="el-icon-remove-outline">
+                        <el-popconfirm title="是否确定删除该数据？该数据下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-remove-outline">
                             <el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
                         </el-popconfirm>
                         <el-button type="text">编辑</el-button>
diff --git a/src/views/point/value/PointValueList.vue b/src/views/point/value/PointValueList.vue
index 27fe10a38..73d019a2d 100644
--- a/src/views/point/value/PointValueList.vue
+++ b/src/views/point/value/PointValueList.vue
@@ -15,6 +15,9 @@
 
         <blank-card>
             <el-row>
+                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                    <skeleton-card :loading="loading"></skeleton-card>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <point-value-card
                             :data="data"
@@ -30,15 +33,17 @@
 
 <script>
     import blankCard from '@/components/card/blank-card';
+    import skeletonCard from '@/components/card/skeleton-card';
     import pointValueTool from './PointValueTool';
     import pointValueCard from './PointValueCard';
     import {pointUnit, pointValueList} from "@/api/point";
     import {deviceDictionary, pointDictionary} from "@/api/dictionary";
 
     export default {
-        components: {blankCard, pointValueTool, pointValueCard},
+        components: {blankCard, skeletonCard, pointValueTool, pointValueCard},
         data() {
             return {
+                loading: true,
                 deviceDictionary: [],
                 pointDictionary: [],
                 deviceTable: {},
@@ -80,6 +85,8 @@
                         });
                     }
                 }).catch(() => {
+                }).finally(() => {
+                    this.loading = false;
                 });
             },
             device() {
diff --git a/src/views/profile/ProfileCard.vue b/src/views/profile/ProfileCard.vue
index fa2646377..3ae00b680 100644
--- a/src/views/profile/ProfileCard.vue
+++ b/src/views/profile/ProfileCard.vue
@@ -28,7 +28,7 @@
                         <el-popconfirm title="是否确定启用该模板？" placement="top" icon="el-icon-remove-outline">
                             <el-button class="operation-tooltip" type="text" slot="reference" :disabled="data.enable">启用</el-button>
                         </el-popconfirm>
-                        <el-popconfirm title="是否确定删除该模板？" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
+                        <el-popconfirm title="是否确定删除该模板？该模板下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
                             <el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
                         </el-popconfirm>
                         <el-button type="text" @click="edit(data.id)">编辑</el-button>
diff --git a/src/views/profile/ProfileDetail.vue b/src/views/profile/ProfileDetail.vue
index f13f6d355..fb2ca33db 100644
--- a/src/views/profile/ProfileDetail.vue
+++ b/src/views/profile/ProfileDetail.vue
@@ -15,6 +15,9 @@
                 </el-tab-pane>
                 <el-tab-pane label="包含位号" name="point">
                     <el-row>
+                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="pointLoading" :footer="true"></skeleton-card>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
                             <point-card
                                     :data="data"
@@ -26,6 +29,9 @@
                 </el-tab-pane>
                 <el-tab-pane label="关联设备" name="device">
                     <el-row>
+                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                            <skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
+                        </el-col>
                         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
                             <device-card
                                     :data="data"
@@ -37,6 +43,8 @@
                         </el-col>
                     </el-row>
                 </el-tab-pane>
+                <el-tab-pane label="模板模型" name="model">
+                </el-tab-pane>
             </el-tabs>
         </base-card>
     </div>
@@ -44,6 +52,7 @@
 <script>
     import baseCard from '@/components/card/base-card';
     import detailCard from '@/components/card/detail-card';
+    import skeletonCard from '@/components/card/skeleton-card';
     import deviceCard from '../device/DeviceCard';
     import pointCard from '../point/PointCard';
     import {dateFormat, setCopyContent} from "@/util/util";
@@ -53,11 +62,13 @@
     import {driverDictionary, profileDictionary} from "@/api/dictionary";
 
     export default {
-        components: {baseCard, detailCard, deviceCard, pointCard},
+        components: {baseCard, detailCard, skeletonCard, deviceCard, pointCard},
         data() {
             return {
                 id: this.$route.query.id,
                 active: this.$route.query.active,
+                deviceLoading: true,
+                pointLoading: true,
                 driverTable: {},
                 profileTable: {},
                 statusTable: {},
@@ -77,11 +88,15 @@
             profile() {
                 profileById(this.id).then(res => {
                     this.data = res.data;
+                }).catch(() => {
                 });
             },
             device() {
                 deviceByProfileId(this.id).then(res => {
                     this.listDeviceData = res.data;
+                }).catch(() => {
+                }).finally(() => {
+                    this.deviceLoading = false;
                 });
 
                 deviceStatusByProfileId(this.id).then(res => {
@@ -93,6 +108,8 @@
                 pointByProfileId(this.id).then(res => {
                     this.listPointData = res.data;
                 }).catch(() => {
+                }).finally(() => {
+                    this.pointLoading = false;
                 });
             },
             drivers() {
diff --git a/src/views/profile/ProfileEdit.vue b/src/views/profile/ProfileEdit.vue
index 8d577c40a..04da75e61 100644
--- a/src/views/profile/ProfileEdit.vue
+++ b/src/views/profile/ProfileEdit.vue
@@ -123,6 +123,7 @@
                 profileById(id).then(res => {
                     this.profileFormData = res.data;
                     this.oldProfileFormData = {...res.data};
+                }).catch(() => {
                 });
             },
             profileUpdate() {
@@ -130,6 +131,7 @@
                     if (valid) {
                         profileUpdate(this.profileFormData).then(res => {
                             this.oldProfileFormData = {...res.data};
+                        }).catch(() => {
                         });
                     }
                 });
diff --git a/src/views/profile/ProfileList.vue b/src/views/profile/ProfileList.vue
index 6807b23a8..811ff61e4 100644
--- a/src/views/profile/ProfileList.vue
+++ b/src/views/profile/ProfileList.vue
@@ -15,6 +15,9 @@
 
         <blank-card>
             <el-row>
+                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
+                    <skeleton-card :loading="loading"></skeleton-card>
+                </el-col>
                 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
                     <profile-card
                             :data="data"
@@ -33,6 +36,7 @@
 </template>
 <script>
     import blankCard from '@/components/card/blank-card';
+    import skeletonCard from '@/components/card/skeleton-card';
     import profileTool from './ProfileTool'
     import profileAddForm from './ProfileAddForm'
     import profileCard from './ProfileCard'
@@ -40,9 +44,10 @@
     import {pointDictionary} from "@/api/dictionary";
 
     export default {
-        components: {blankCard, profileTool, profileAddForm, profileCard},
+        components: {blankCard, skeletonCard, profileTool, profileAddForm, profileCard},
         data() {
             return {
+                loading: true,
                 pointDictionary: [],
                 pointTable: {},
                 listData: [],
@@ -69,6 +74,8 @@
                     this.page.total = data.total;
                     this.listData = data.records;
                 }).catch(() => {
+                }).finally(() => {
+                    this.loading = false;
                 });
             },
             point() {