styleFix

public/index.html

@@ -14,7 +14,7 @@
     }
 
     .el-loading-text {
-      font-size: 24px !important;
+      font-size: 20px !important;
     }
 
     .amap-logo {
@@ -27,7 +27,6 @@
 
     .el-loading-mask {
       z-index: 99999 !important;
-      position: fixed !important;
     }
   </style>
 </head>

src/api/index.js

@@ -198,21 +198,21 @@ export function getCurrentTowerStatis(params) {
     })
 }
 export function getDeviceDetail(deviceId) {
-    return request({
+    return noLoadingrequest({
         url: `/pweb/s/towercrane/device/${deviceId}`,
         method: 'get',
     })
 }
 
 export function getDeviceTodayChart(deviceId) {
-    return request({
+    return noLoadingrequest({
         url: `/pweb/s/towercrane/device/realtime/statis/${deviceId}`,
         method: 'get',
     })
 }
 
 export function getTowerLiveUrl(cameraId) {
-    return request({
+    return noLoadingrequest({
         url: `/pweb/s/towercrane/camera/liveaddress/${cameraId}`,
         method: 'get',
     })
@@ -340,7 +340,7 @@ export function getFallWarningTableList(params) {
 
 }
 export function getDeviceCurrentStatus(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/linbian/device/realdata',
         method: 'get',
         params
@@ -358,14 +358,14 @@ export function getUnloadingPlatformList() {
     })
 }
 export function getPlatformCurrentStatus(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/unload/device/realdata',
         method: 'get',
         params
     })
 }
 export function getPlatformRunningAnalysis(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/unload/device/statistics',
         method: 'get',
         params
@@ -410,7 +410,7 @@ export function getElevatorWarningStatus() {
 
 
 export function getElevatorRealData(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/elevator/device/realdata',
         method: 'get',
         params

src/components/construction/Index.vue

@@ -254,7 +254,7 @@
       </ShadowContainer>
       <Title text="AI预警"> </Title>
       <ShadowContainer class="short-container">
-        <div style="display: flex">
+        <div style="display: flex; justify-content: center">
           <div class="chart-container">
             <div ref="qualityChart" id="quality-chart"></div>
             <div class="title">
@@ -472,11 +472,12 @@ export default {
   padding-bottom: 0;
 }
 .side-area {
-  width: 400px;
+  min-width: 400px;
+  width: 25%;
   height: 100%;
 }
 .mid-area {
-  width: calc(100% - 824px);
+  width: calc(50% - 24px);
   height: 100%;
 }
 .divider {
@@ -729,7 +730,7 @@ table {
     width: calc(100% / 3);
     padding: 30px 0px;
     .status-img {
-      width: 40%;
+      width: 50px;
     }
     .status-detail {
       display: inline-block;
@@ -827,7 +828,6 @@ table {
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  width: calc(100% - 200px);
   & > div {
     padding: 0 20px;
     font-size: 14px;

src/components/earlywarning/Index.vue

@@ -667,8 +667,8 @@ export default {
 
 .chart-container {
   position: relative;
-  width: 200px;
-  height: 200px;
+  width: 250px;
+  height: 250px;
   .title {
     position: absolute;
     top: 50%;

src/components/elevator/Index.vue

@@ -115,7 +115,11 @@
         </div>
       </ShadowContainer>
     </div>
-    <div class="elevator-container">
+    <div
+      class="elevator-container"
+      v-loading="elevatorLoading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
       <ShadowContainerRect class="long-container">
         <div id="elevator-detail">
           <div class="left-detail">
@@ -130,7 +134,14 @@
               <div class="tower-title">左侧运行情况</div>
               <div class="driver-info">
                 <div class="driver-icon">
-                  <img :src="leftElevator.person.head_img" alt="" />
+                  <img
+                    :src="
+                      leftElevator.person.head_img
+                        ? leftElevator.person.head_img
+                        : require('@/assets/elevator/portrait.png')
+                    "
+                    alt=""
+                  />
                 </div>
                 <div class="driver-description">
                   <div
@@ -219,7 +230,14 @@
               <div class="tower-title">右侧运行情况</div>
               <div class="driver-info">
                 <div class="driver-icon">
-                  <img :src="rightElevator.person.head_img" alt="" />
+                  <img
+                    :src="
+                      rightElevator.person.head_img
+                        ? rightElevator.person.head_img
+                        : require('@/assets/elevator/portrait.png')
+                    "
+                    alt=""
+                  />
                 </div>
                 <div class="driver-description">
                   <div
@@ -283,6 +301,7 @@ export default {
       leftBottom: 0,
       rightBottom: 0,
       interval1: null,
+      elevatorLoading: false,
     };
   },
   methods: {
@@ -344,6 +363,7 @@ export default {
       });
     },
     getCurrentElevatorStatus(tower) {
+      this.elevatorLoading = true;
       this.leftBottom = 0;
       this.rightBottom = 0;
       this.leftElevator = null;
@@ -357,6 +377,7 @@ export default {
       }
       getElevatorRealData({ device_ids: elevatorArray.join(",") }).then(
         (res) => {
+          this.elevatorLoading = false;
           this.leftElevator = tower.left_elevator
             ? {
                 ...tower.left_elevator,
@@ -562,6 +583,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
     display: flex;
     padding: 12px 0;
+    font-weight: bold;
   }
   .warning-table-column {
     padding: 12px 0;

src/components/fallprotection/Index.vue

@@ -37,7 +37,11 @@
         <div id="today-warning-chart" ref="today24hourWarningChart"></div>
       </ShadowContainer>
     </div>
-    <div class="mid-area">
+    <div
+      class="mid-area"
+      v-loading="mapLoading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
       <div class="cover-area"></div>
       <div class="buildingwindow" v-if="buildingWindowVisible">
         <div class="building-description">
@@ -198,6 +202,7 @@ export default {
       windowData: {},
       page: 1,
       interval1: null,
+      mapLoading: false,
     };
   },
   methods: {
@@ -218,7 +223,7 @@ export default {
             mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
           });
           this.$nextTick(() => {
-            var scale = window.screen.height / 1080;
+            var scale = window.innerHeight / 1080;
             console.log(document.getElementById("amap-container").style);
             document.getElementById("amap-container").style.zoom = 1 / scale;
           });
@@ -268,9 +273,11 @@ export default {
       this.$forceUpdate();
     },
     showDeviceInfo(device) {
+      this.mapLoading = true;
       this.buildingWindowVisible = false;
       this.map.setCenter([device.longitude, device.latitude]);
       getDeviceCurrentStatus({ device_id: device.id }).then((res) => {
+        this.mapLoading = false;
         this.windowData = { ...device, ...res.data };
         console.log(this.windowData);
         this.$nextTick(() => {
@@ -612,6 +619,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
     display: flex;
     padding: 12px 0;
+    font-weight: bold;
   }
   .warning-table-column {
     padding: 12px 0;

src/components/management/Index.vue

@@ -241,7 +241,7 @@ export default {
           });
           this.map.on("click", () => {});
           this.$nextTick(() => {
-            var scale = window.screen.height / 1080;
+            var scale = window.innerHeight / 1080;
             document.getElementById("amap-container").style.zoom = 1 / scale;
           });
         })

src/components/management/sampleDialog.vue

@@ -88,7 +88,7 @@ export default {
           mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
         });
         this.$nextTick(() => {
-          var scale = window.screen.height / 1080;
+          var scale = window.innerHeight / 1080;
           document.getElementById("sample-map-container").style.zoom =
             1 / scale;
         });

src/components/noise/Index.vue

@@ -101,12 +101,12 @@
     </div>
     <div class="mid-area">
       <Title text="实时监测" type="long"></Title>
-      <ShadowContainer class="long-container">
-        <div
-          id="stats-container"
+      <ShadowContainer
+        class="long-container"
         v-loading="loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
       >
+        <div id="stats-container">
           <div class="temp">
             <div class="text">温度/℃</div>
             <div class="value" style="color: #ff6151">
@@ -847,6 +847,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
     display: flex;
     padding: 12px 0;
+    font-weight: bold;
   }
   .warning-table-column {
     padding: 12px 0;

src/components/projectcheck/Index.vue

@@ -828,6 +828,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
     display: flex;
     padding: 12px 0;
+    font-weight: bold;
   }
   .warning-table-column {
     padding: 12px 0;
@@ -867,6 +868,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
     display: flex;
     padding: 12px 0;
+    font-weight: bold;
   }
   .warning-table-column {
     padding: 12px 0;
@@ -933,7 +935,7 @@ export default {
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  width: calc(100% - 260px);
+  width: calc(100% - 300px);
   & > div {
     padding: 0 20px;
     font-size: 14px;
@@ -952,8 +954,8 @@ export default {
 
 .chart-container {
   position: relative;
-  width: 260px;
-  height: 260px;
+  width: 300px;
+  height: 300px;
   .title {
     position: absolute;
     top: 50%;
@@ -983,12 +985,12 @@ export default {
     text-align: center;
     transform: translateX(-50%) translateY(-50%);
     .main-title {
-      font-size: 30px;
+      font-size: 18px;
       font-weight: bold;
       color: #00fcff;
     }
     .sub-title {
-      font-size: 16px;
+      font-size: 12px;
       font-weight: bold;
       color: rgba(255, 255, 255, 0.7);
     }

src/components/realname/Index.vue

@@ -1015,7 +1015,7 @@ export default {
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  width: calc(100% - 200px);
+  width: calc(100% - 300px);
   & > div {
     padding: 0 20px;
     font-size: 14px;
@@ -1033,8 +1033,8 @@ export default {
 
 .chart-container {
   position: relative;
-  width: 200px;
-  height: 200px;
+  width: 300px;
+  height: 300px;
   .title {
     position: absolute;
     top: 50%;

src/components/safecap/Index.vue

@@ -274,7 +274,7 @@ export default {
             this.capWindowVisible = false;
           });
           this.$nextTick(() => {
-            var scale = window.screen.height / 1080;
+            var scale = window.innerHeight / 1080;
             document.getElementById("amap-container").style.zoom = 1 / scale;
           });
           this.getSafeCapDeviceList();

src/components/safecap/mapDialog.vue

@@ -98,7 +98,7 @@ export default {
           mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
         });
         this.$nextTick(() => {
-          var scale = window.screen.height / 1080;
+          var scale = window.innerHeight / 1080;
           document.getElementById("route-map-container").style.zoom = 1 / scale;
         });
         this.search();

src/components/tower/Index.vue

@@ -53,7 +53,11 @@
         <div id="dip-chart" ref="dipChart"></div>
       </ShadowContainer>
     </div>
-    <div id="mid-area">
+    <div
+      id="mid-area"
+      v-loading="mapLoading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
       <div class="cover-area"></div>
       <div class="towerwindow" v-if="towerWindowVisible">
         <div class="tower-description" @click="openDetailDialog">
@@ -209,6 +213,7 @@ export default {
       page: 1,
       deviceTotal: 0,
       interval1: null,
+      mapLoading: false,
     };
   },
   methods: {
@@ -442,7 +447,7 @@ export default {
             mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
           });
           this.$nextTick(() => {
-            var scale = window.screen.height / 1080;
+            var scale = window.innerHeight / 1080;
             document.getElementById("amap-container").style.zoom = 1 / scale;
           });
           this.map.on("click", (e) => {
@@ -500,7 +505,9 @@ export default {
       this.towerWindowVisible = true;
     },
     openDetailDialog() {
+      this.mapLoading = true;
       getDeviceDetail(this.windowData.id).then((res) => {
+        this.mapLoading = false;
         this.deviceData = res.data;
         this.$nextTick(() => {
           this.deviceDialogVisible = true;
@@ -941,6 +948,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
     display: flex;
     padding: 12px 0;
+    font-weight: bold;
   }
   .warning-table-column {
     padding: 12px 0;
@@ -987,7 +995,7 @@ export default {
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  width: calc(100% - 200px);
+  width: calc(100% - 250px);
   & > div {
     padding: 0 20px;
     font-size: 14px;
@@ -1005,8 +1013,8 @@ export default {
 
 .chart-container {
   position: relative;
-  width: 200px;
-  height: 200px;
+  width: 250px;
+  height: 250px;
   .title {
     position: absolute;
     top: 50%;

src/components/tower/deviceDialog2.vue

@@ -57,7 +57,12 @@
             <div class="status-text">风速百分比/%</div>
           </div>
         </div>
-        <div id="video-container" v-if="deviceData.is_camera == 1"></div>
+        <div
+          id="video-container"
+          v-if="deviceData.is_camera == 1"
+          v-loading="videoLoading"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+        ></div>
         <div id="video-container-img" v-else>
           <img src="@/assets/tower/no_camera.png" alt="" />
           <div>暂无监控信息</div>
@@ -100,6 +105,7 @@ export default {
     return {
       todayData: [],
       player: null,
+      videoLoading: false,
     };
   },
   methods: {
@@ -183,6 +189,7 @@ export default {
     },
     openedEvents() {
       if (this.deviceData.is_camera == 1) {
+        this.videoLoading = true;
         getTowerLiveUrl(this.deviceData.camera_id).then((res) => {
           const myVideoDiv = document.getElementById(`video-container`);
           myVideoDiv.innerHTML = `<video
@@ -202,6 +209,7 @@ export default {
           });
           singlePlayer.play();
           this.player = singlePlayer;
+          this.videoLoading = false;
           getDeviceTodayChart(this.deviceId).then((result) => {
             this.todayData = result.data;
             this.$nextTick(() => {

src/components/unloadingplatform/Index.vue

@@ -22,7 +22,11 @@
         </div>
       </ShadowContainer>
       <Title text="各平台运行分析"></Title>
-      <ShadowContainer class="long-2-container">
+      <ShadowContainer
+        class="long-2-container"
+        v-loading="chartLoading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <div class="filters">
           <div
             :class="['filter', activeType == '0' ? 'active' : '']"
@@ -42,7 +46,11 @@
         <div id="weight-chart" ref="weightChart"></div>
       </ShadowContainer>
     </div>
-    <div class="mid-area">
+    <div
+      class="mid-area"
+      v-loading="mapLoading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
       <div class="cover-area"></div>
       <div class="buildingwindow" v-if="platformWindowVisible">
         <div class="building-description">
@@ -188,6 +196,8 @@ export default {
       weightChart: null,
       page: 1,
       interval1: null,
+      chartLoading: false,
+      mapLoading: false,
     };
   },
   methods: {
@@ -209,7 +219,7 @@ export default {
           });
 
           this.$nextTick(() => {
-            var scale = window.screen.height / 1080;
+            var scale = window.innerHeight / 1080;
             document.getElementById("amap-container").style.zoom = 1 / scale;
           });
           this.map.on("click", () => {
@@ -258,9 +268,11 @@ export default {
       this.$forceUpdate();
     },
     showDeviceInfo(device) {
+      this.mapLoading = true;
       this.platformWindowVisible = false;
       this.map.setCenter([device.longitude, device.latitude]);
       getPlatformCurrentStatus({ device_id: device.id }).then((res) => {
+        this.mapLoading = false;
         this.windowData = { ...device, ...res.data };
         console.log(this.windowData);
         this.$nextTick(() => {
@@ -419,7 +431,9 @@ export default {
       this.activeType = type;
       this.batteryChart.dispose();
       this.weightChart.dispose();
+      this.chartLoading = true;
       getPlatformRunningAnalysis({ date_type: type }).then((res) => {
+        this.chartLoading = false;
         this.platformRunningData = res.data;
         this.$nextTick(() => {
           this.renderBatteryChart();
@@ -687,6 +701,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
     display: flex;
     padding: 12px 0;
+    font-weight: bold;
   }
   .warning-table-column {
     padding: 12px 0;