加载效果优化

guanqb

2023-04-05 59ee4f570b4feab69e540b9641f674eda24d4736

加载效果优化

 src/styles/base/index.scss

@@ -333,6 +333,10 @@
            line-height: 60px;
        }

        .el-dialog__header {
            text-align: center;
        }

        .el-table .cell {
            height: 30px;
            line-height: 30px;

 src/styles/media/index.scss

@@ -2113,6 +2113,7 @@
                            height: countSizeVh(500);

                            .el-dialog__header {
                                text-align: center;
                                height: countSizeVh(40);
                                line-height: countSizeVh(40);


 src/views/home/components/dialog/keyPersonBox.vue

@@ -149,7 +149,6 @@

                return
            }
            console.log(row, 'row111111111')
            this.$store.commit('SET_MAPSEARCHPOPUP', true)

            this.$store.commit('SET_MAPSEARCHPOPUPDATA', {

 src/views/home/components/rightContainer.vue

@@ -10,14 +10,14 @@
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%;"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }" :row-class-name="tableRowClassName"
                        empty-text="暂无值班信息" v-loading="schedulingLoading" element-loading-text="拼命加载中"
                        :empty-text="schedulingNoDataText" v-loading="schedulingLoading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                        <el-table-column prop="dept" label="值班单位"></el-table-column>
                        <el-table-column prop="person" label="姓名"></el-table-column>
                        <el-table-column prop="contact" label="联系方式"></el-table-column>
                    </el-table>
                    <div class="pointList" v-if="schedulingList==[]">
                        <el-tooltip class="item" effect="dark" :content="item.dept" placement="top" 
                    <div class="pointList" v-if="schedulingList == []">
                        <el-tooltip class="item" effect="dark" :content="item.dept" placement="top"
                            v-for="(item, index) in schedulingDeptList" :key="index">
                            <div class="point" @click="getSchedlingList(item)"></div>
                        </el-tooltip>
@@ -25,8 +25,9 @@
                </div>

                <div class="table-box" v-show="showMJL">
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%" empty-text=" "
                        :show-header="false" :header-cell-style="{ 'text-align': 'center' }"
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                        :empty-text="schedulingNoDataText" :show-header="false"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }" :row-class-name="tableRowClassName"
                        v-loading="schedulingLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.2)">
@@ -164,6 +165,7 @@
            eventTime: [],
            equipmentEchartsLoading: false,
            eventChangeEchartsLoading: false,
            schedulingNoDataText: ' ',
            schedulingLoading: false,
            pickerOptions: {
                shortcuts: [
@@ -284,6 +286,7 @@
            console.log(this.userInfo, 4567)
            this.schedulingLoading = true
            if (this.userInfo.dept_id == "1596020515064381442") {
                this.schedulingNoDataText = '  '
                const data = [
                    {
                        person:
@@ -311,13 +314,13 @@
                })
                setTimeout(() => {
                    this.schedulingList = matrixData[0].map((col, i) => {
                    return [this.originTitle[i], ...matrixData.map((row) => {
                        return row[i]
                    })]
                })
                        return [this.originTitle[i], ...matrixData.map((row) => {
                            return row[i]
                        })]
                    })
                    this.schedulingLoading = false
                }, 1000)
                

                this.$nextTick(() => {
                    this.tableHeight =
                        this.$refs.Container.offsetHeight -
@@ -339,8 +342,16 @@


                setTimeout(() => {
                    this.schedulingNoDataText = '  '
                    this.schedulingLoading = false
                    if (!this.schedulingList.length) {
                        setTimeout(() => {
                            this.schedulingNoDataText = '暂无值班数据'
                        }, 200)
                    }
                }, 500)


            }

        },
@@ -1091,7 +1102,7 @@
                // white-space: pre-line;
                white-space: pre-wrap;
                height: 100% !important;
                line-height:3.4vh !important;
                line-height: 3.4vh !important;
            }

            :deep(.el-table .el-table__body-wrapper) {

 src/views/home/index.vue

@@ -1956,6 +1956,8 @@
            type: 'ClusterLayer'
        })

        this.$store.commit('SET_MAPSEARCHPOPUP', false)

        if (cylinderLayer != null) {
            cylinderLayer.remove()
            cylinderLayer = null

 src/views/house/index.vue

@@ -85,7 +85,7 @@
                            element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                            style="overflow:hidden;padding:0px;" class="build-item">

                            <div class="build-info" v-show="!BuildListLoading">
                            <div class="build-info" v-show="!BuildListLoading && buildingList.length">
                                <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow == true">
                                    <i class="el-icon-caret-left"></i>
                                </div>
@@ -106,6 +106,9 @@
                                <div class="nextBtn rightBtn" @click="nextBtn">
                                    <i v-show="buildingList.length > 10 && nextBtnShow" class="el-icon-caret-right"></i>
                                </div>
                            </div>
                            <div class="build-info" v-show="!BuildListLoading && !buildingList.length"
                                style="justify-content: center;">暂无楼栋数据
                            </div>
                        </el-main>
                        <div class="ridgepole-info">
@@ -154,7 +157,7 @@
                            <el-main v-loading="pictLoading" element-loading-background="rgba(0, 0, 0, 0.2)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                style="overflow:hidden;padding:0px;">
                                <div class="floor-outBox">
                                <div class="floor-outBox" v-show="!pictLoading && isHaveResidentData">
                                    <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                        <i class="el-icon-caret-left"></i>
                                    </div>
@@ -176,7 +179,7 @@
                                    </div>
                                </div>

                            <div class="floor-detail">
                                <div class="floor-detail" v-show="!pictLoading && isHaveResidentData">
                                    <div v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index">
                                        <div class="title">{{ item.floor_num }}层：</div>
@@ -184,14 +187,13 @@
                                            <div v-for="(value, index) in item.floor_house" :key="index"
                                                @click="residentDetailsClick(value)"
                                                :class="{ on: floorChoosed == value.properties.fojcu }">
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.properties.fojcu }}
                                                <!-- <div class="flow"></div>
                                                            <div class="warning"></div>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="floor-detail" v-show="!pictLoading && !isHaveResidentData"
                                    style="display: flex;justify-content: center;align-items: center;">暂无户室数据</div>
                            </el-main>
                        </div>
                    </div>
@@ -542,6 +544,7 @@
            isShowPictArrow: "never",
            villageInfoLoading: false,
            BuildListLoading: false,
            isHaveResidentData: false,
        }
    },

@@ -631,14 +634,15 @@
            this.houseDeepNoDataText = ' '
            setTimeout(() => {
                this.houseDeepLoading = false
                // if (comeOutData.length && type == 2) {
                //     this.houseDeepNoDataText = '暂无出入口数据'
                // } else if (parkingLotData.length && type == 3) {
                //     this.houseDeepNoDataText = '暂无停车场数据'
                // } else if (businessData.length && type == 4) {
                //     this.houseDeepNoDataText = '暂无商场数据'
                // }
                if (!this.comeOutData.length && type == 2) {
                    this.houseDeepNoDataText = '暂无出入口数据'
                } else if (!this.parkingLotData.length && type == 3) {
                    this.houseDeepNoDataText = '暂无停车场数据'
                } else if (!this.businessData.length && type == 4) {
                    this.houseDeepNoDataText = '暂无商业数据'
                }
            }, 500)

        },

        /**
@@ -778,6 +782,7 @@
                this.policeInfoLoading = true
                this.jqNoDataText = '  '
                this.callPolicePage.currentPage = 1
                this.callPoliceData = []
                this.getAlarmList()
            } else {
                circleLayer.clear()
@@ -790,8 +795,10 @@
        getSearchExtensivelyBgAoiDeepdata (ak, region, ids, infos) {
            this.villageInfoLoading = true
            this.BuildListLoading = true
            this.pictLoading = true
            this.buildingList = []
            getSearchExtensivelyBgAoiDeepdata(ak, region, ids, infos).then((res) => {
                console.log(res, 'getSearchExtensivelyBgAoiDeepdata---then')
                let baseUrl
                if (process.env.NODE_ENV == "development") {
                    // 开发
@@ -801,7 +808,7 @@
                    baseUrl = "http://10.141.11.11/"
                }


                console.log(res.data.result[0], 'getSearchExtensivelyBgAoiDeepdata')
                // 小区名称类型地址
                let villageData = res.data.result[0]

@@ -877,14 +884,23 @@
                        siteGd: 240,
                        sitePitch: -45,
                    })

                    this.BuildListLoading = false
                    setTimeout(() => {
                        this.BuildListLoading = false
                    }, 500)

                    this.queryBuildings(this.buildingList[0])
                }

                this.callPolicePage.currentPage = 1
                this.getAlarmList()
            }).catch(res => {
                console.log(res, 'getSearchExtensivelyBgAoiDeepdata---catch')
                setTimeout(() => {
                    this.villageInfoLoading = false
                    this.BuildListLoading = false
                    this.pictLoading = false
                    this.isHaveResidentData = false
                }, 500)
            })
        },

@@ -892,7 +908,10 @@
        getHouses (build_id, adcode, aoiArr) {
            getHouses(build_id, adcode).then((res) => {
                if (res.data.data == null) {
                    this.pictLoading = false
                    setTimeout(() => {
                        this.pictLoading = false
                        console.log('getHouses---if-null--')
                    }, 3000)
                    this.isShowHouseBox = false
                } else {
                    this.pictLoading = true
@@ -961,6 +980,7 @@
                        this.allHouseFloorList.push(newArr)
                    })
                    this.unitHouseChoosed = this.allHouseFloorList[0]
                    this.isHaveResidentData = true
                    if (aoiArr) {
                        this.unitHouseChoosed.forEach((item, index) => {
                            let aoiHeight = aoiArr[1]
@@ -987,10 +1007,17 @@
                            }
                        })
                    }
                    this.pictLoading = false
                    setTimeout(() => {
                        this.pictLoading = false
                        console.log('getHouses---if-null--')
                    }, 3000)
                } else {
                    this.isShowHouseBox = false
                    this.pictLoading = false
                    this.isHaveResidentData = false
                    setTimeout(() => {
                        this.pictLoading = false
                        console.log('getHouses---if-null--')
                    }, 3000)
                }
            })

@@ -1038,6 +1065,7 @@

        buildingClick (item, aoiArr) {
            this.unitHouseChoosed = []
            console.log('buildingClick==============')
            this.pictLoading = true
            if (!aoiArr) {
                this.$EventBus.$emit("clearHouse3D")
@@ -1265,50 +1293,53 @@
            }).then((res) => {
                this.callPolicePage.count = res.data.data.pages

                this.callPoliceData = []

                if (res.data.data.records.length > 0) {
                    this.callPoliceData = res.data.data.records.map((item, index) => {
                        return {
                            ...item,
                            index: index + 1,
                            lng: item.ZDDWXZB,
                            lat: item.ZDDWYZB,
                        }
                    })
                    this.callPoliceData.forEach((item, index) => {
                        if (item.lng != "" && item.lat != "") {
                            let center = new global.DC.Position(item.lng, item.lat)
                            let point = new global.DC.PointPrimitive(center)
                    setTimeout(() => {
                        this.callPoliceData = res.data.data.records.map((item, index) => {
                            return {
                                ...item,
                                index: index + 1,
                                lng: item.ZDDWXZB,
                                lat: item.ZDDWYZB,
                            }
                        })
                        this.callPoliceData.forEach((item, index) => {
                            if (item.lng != "" && item.lat != "") {
                                let center = new global.DC.Position(item.lng, item.lat)
                                let point = new global.DC.PointPrimitive(center)

                            let num = 0
                                let num = 0

                            timer[index] = setInterval(() => {
                                num++
                                if (num >= 10) {
                                    num = 0
                                }
                                point.setStyle({
                                    outlineColor: global.DC.Color.RED.withAlpha(0.5), //边框颜色
                                    outlineWidth: num, //边框大小，
                                    color: global.DC.Color.RED,
                                })
                            }, 100)
                                timer[index] = setInterval(() => {
                                    num++
                                    if (num >= 10) {
                                        num = 0
                                    }
                                    point.setStyle({
                                        outlineColor: global.DC.Color.RED.withAlpha(0.5), //边框颜色
                                        outlineWidth: num, //边框大小，
                                        color: global.DC.Color.RED,
                                    })
                                }, 100)

                            point.attrParams = item
                            point.on(
                                global.DC.MouseEventType.CLICK,
                                this.housingPoliceSiteClick
                            )
                            circleLayer.addOverlay(point)
                        }
                    })
                                point.attrParams = item
                                point.on(
                                    global.DC.MouseEventType.CLICK,
                                    this.housingPoliceSiteClick
                                )
                                circleLayer.addOverlay(point)
                            }
                        })
                        setTimeout(() => {
                            this.policeInfoLoading = false
                        }, 500)

                    }, 3000)
                } else {
                    this.callPoliceData = []
                    setTimeout(() => {
                        this.jqNoDataText = '暂无报警信息'
                        this.policeInfoLoading = false
                    }, 500)
                    }, 3000)
                }

                this.setTableHeight()
@@ -1316,7 +1347,7 @@
                setTimeout(() => {
                    this.jqNoDataText = '暂无报警信息'
                    this.policeInfoLoading = false
                }, 500)
                }, 3000)
            })
        },


 src/views/police/index.vue

@@ -290,6 +290,7 @@
            this.emptyText = ""
            getEquipmentPaging({ page: this.equimentPage.currentPage, count: this.equimentPage.pageSize, ...params, query: this.searchValue, dwbh: this.userInfo.dept_id }).then(res => {
                var total = res.data.data.total
                console.log('getEquipmentPaging', total)
                if (total == 0) {
                    if (this.navType == 0) {
                        this.emptyText = "暂无警车数据"
@@ -303,6 +304,8 @@
                    if (this.navType == 3) {
                        this.emptyText = "暂无执法记录仪数据"
                    }
                    this.equimentLoading = false

                }
                if (res.data.data.list.length > 0) {
                    this.equimentTableData = res.data.data.list.map(item => {
@@ -388,6 +391,22 @@
                }

                this.equimentLoading = false
            }).catch(res => {
                setTimeout(() => {
                    if (this.navType == 0) {
                        this.emptyText = "暂无警车数据"
                    }
                    if (this.navType == 1) {
                        this.emptyText = "暂无摄像头数据"
                    }
                    if (this.navType == 2) {
                        this.emptyText = "暂无手台数据"
                    }
                    if (this.navType == 3) {
                        this.emptyText = "暂无执法记录仪数据"
                    }
                    this.equimentLoading = false
                }, 500)
            })
        },


 vue.config.js

@@ -161,8 +161,8 @@
        proxy: {
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                target: "http://localhost:82",
                // target: "http://192.168.0.100:82",
                // target: "http://localhost:82",
                target: "http://192.168.0.100:82",
                // target: "http://17.20.10.3:82",
                // target: "http://10.141.11.11:8081/api",
                // ws: true, //启用webSocket6566