样式更新

src/api/index.js

@@ -231,7 +231,7 @@ export function getDeviceTotalStatus(params) {
 
 export function getNearMonthStatis(params) {
     return request({
-        url: '/pweb/s/env/statis',
+        url: '/pweb/s/env/noise/month',
         method: 'get',
         params
     })
@@ -244,10 +244,11 @@ export function getNoiseDeviceList(params) {
     })
 }
 
-export function getCurrentMonitorStatis() {
+export function getCurrentMonitorStatis(params) {
     return request({
         url: '/pweb/s/env/realtime/data',
         method: 'get',
+        params
     })
 }
 
@@ -330,10 +331,11 @@ export function getFallWarningStatus() {
     })
 
 }
-export function getFallWarningTableList() {
+export function getFallWarningTableList(params) {
     return request({
         url: '/pweb/s/linbian/warning',
         method: 'get',
+        params
     })
 
 }

src/components/construction/Index.vue

@@ -636,10 +636,10 @@ table {
   position: relative;
   .custom-chart {
     position: absolute;
-    width: 40%;
+    width: 160px;
     left: 50%;
     transform: translateX(-50%);
-    top: 17%;
+    top: 18%;
   }
 }
 #security-chart,

src/components/earlywarning/Index.vue

@@ -585,10 +585,10 @@ export default {
     position: relative;
     .custom-chart {
       position: absolute;
-      width: 30%;
+      width: 25%;
       top: 50%;
       transform: translateY(-50%);
-      left: 13%;
+      left: 15%;
     }
   }
   #today-chart,

src/components/elevator/Index.vue

+<template>
+  <div id="elevator">
+    <div class="side-area">
+      <Title text="设备列表"></Title>
+      <ShadowContainer></ShadowContainer>
+      <Title text="报警信息"></Title>
+      <ShadowContainer>
+        <div id="warning-info">
+          <div>
+            <div class="warning-info-text">今日报警</div>
+            <div class="warning-info-num">0</div>
+            <div class="warning-info-img">
+              <img src="@/assets/fallprotection/today.png" alt="" />
+            </div>
+          </div>
+          <div>
+            <div class="warning-info-text">累计未处理报警</div>
+            <div class="warning-info-num" style="color: #ffc74c">0</div>
+            <div class="warning-info-img">
+              <img src="@/assets/fallprotection/total-no.png" alt="" />
+            </div>
+          </div>
+          <div>
+            <div class="warning-info-text">累计履责率</div>
+            <div class="warning-info-num" style="color: #22c3ed">
+              0<span style="font-size: 14px; margin-left: 12px">%</span>
+            </div>
+            <div class="warning-info-img">
+              <img src="@/assets/fallprotection/percent.png" alt="" />
+            </div>
+          </div>
+        </div>
+        <div class="platform-list">
+          <div class="platform">
+            <div class="platform-title">
+              <img src="@/assets/management/sample.png" alt="" />
+              PT20220824340320
+              <span class="status">未处理</span>
+            </div>
+            <div class="platform-info">
+              <div>报警内容：</div>
+            </div>
+          </div>
+        </div>
+      </ShadowContainer>
+    </div>
+    <div class="elevator-container">
+      <ShadowContainer>
+        <div style="height: 980px"></div>
+      </ShadowContainer>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Elevator",
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+#elevator {
+  padding: 12px 20px;
+  display: flex;
+  justify-content: space-between;
+}
+.side-area {
+  width: 25%;
+}
+.elevator-container {
+  width: calc(75% - 20px);
+}
+.platform {
+  img {
+    width: 20px;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+  font-size: 14px;
+  color: #c6def9;
+  .platform-title {
+    background: rgba(44, 96, 162, 0.2);
+    border-bottom: 1px solid rgba(122, 143, 173, 0.4);
+    line-height: 40px;
+    padding: 0 12px;
+    .status {
+      float: right;
+    }
+  }
+  .platform-info {
+    background: rgba(44, 96, 162, 0.1);
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    & > div {
+      width: calc(50% - 48px);
+      padding: 6px 12px;
+    }
+  }
+  &:hover {
+    color: #27acfb;
+    .platform-title,
+    .platform-info {
+      background: rgba(44, 96, 162, 0.4);
+    }
+  }
+}
+#warning-info {
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  .warning-info-text {
+    padding-top: 20px;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 18px;
+  }
+  .warning-info-num {
+    font-size: 24px;
+    color: #ff6151;
+  }
+  .warning-info-img {
+    position: relative;
+    transform: translateY(-60px);
+    margin-bottom: -60px;
+    img {
+      width: 80%;
+      margin: 0 auto;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/fallprotection/Index.vue

@@ -119,7 +119,7 @@
             <div class="warning-table-info">告警信息</div>
             <div class="warning-table-status">处理状态</div>
           </div>
-          <div class="warning-table-list">
+          <div class="warning-table-list" v-infinite-scroll="load">
             <div
               class="warning-table-column"
               v-for="(column, index) in fallwarningTableData"
@@ -188,6 +188,7 @@ export default {
       fallwarningTableData: [],
       buildingWindowVisible: false,
       windowData: {},
+      page: 1,
     };
   },
   methods: {
@@ -253,6 +254,7 @@ export default {
       this.$forceUpdate();
     },
     showDeviceInfo(device) {
+      this.buildingWindowVisible = false;
       this.map.setCenter([device.longitude, device.latitude]);
       getDeviceCurrentStatus({ device_id: device.id }).then((res) => {
         this.windowData = { ...device, ...res.data };
@@ -335,6 +337,14 @@ export default {
         resizeOb.observe(document.getElementById("today-warning-chart"));
       });
     },
+    load() {
+      if (this.fallwarningTableData.length == this.page * 10) {
+        getFallWarningTableList({ page: this.page + 1 }).then((res) => {
+          this.page += 1;
+          this.fallwarningTableData += res.data.data;
+        });
+      }
+    },
   },
   mounted() {
     getBaseInfo().then((res) => {
@@ -355,7 +365,7 @@ export default {
     getFallWarningStatus().then((res) => {
       this.fallwarningStatus = res.data;
     });
-    getFallWarningTableList().then((res) => {
+    getFallWarningTableList({ page: 1 }).then((res) => {
       this.fallwarningTableData = res.data.data;
     });
   },

src/components/realname/Index.vue

@@ -724,10 +724,10 @@ export default {
   position: relative;
   .custom-chart {
     position: absolute;
-    width: 30%;
+    width: 140px;
     top: 50%;
     transform: translateY(-50%);
-    left: 13%;
+    left: 84px;
   }
 }
 #area-chart {

src/components/tower/Index.vue

@@ -63,7 +63,7 @@
             <img src="@/assets/no-message.png" alt="" />
             <div>暂无信息~</div>
           </div>
-          <div class="warp" v-else>
+          <div class="warp" v-else v-infinite-scroll="load">
             <div
               class="warn-title"
               v-for="(warn, index) in warnings"
@@ -155,6 +155,7 @@ export default {
       deviceDialogVisible: false,
       deviceData: {},
       markerArray: [],
+      page: 1,
     };
   },
   methods: {
@@ -396,8 +397,8 @@ export default {
         this.renderForceChart();
         this.renderDipChart();
       });
-      getTowerWarnings().then((res) => {
-        this.warnings = res.data;
+      getTowerWarnings({ page: 1, limit: 20 }).then((res) => {
+        this.warnings = res.data.data;
       });
 
       getBaseInfo().then((res) => {
@@ -624,19 +625,17 @@ export default {
       });
     },
 
-    resetMapSize() {
-      let screenWidth =
-        document.body.clientWidth || document.documentElement.clientWidth;
-      let defWidth = 1920;
-      let xScale = screenWidth / defWidth;
-      let mapContent = document.getElementById("container");
-      mapContent.style.zoom = 1 / xScale;
-      mapContent.style.height = xScale * 960 + "px";
+    load() {
+      if (this.warnings.length == this.page * 20) {
+        getTowerWarnings({ page: this.page + 1, limit: 20 }).then((res) => {
+          this.page += 1;
+          this.warnings += res.data.data;
+        });
+      }
     },
   },
   mounted() {
     this.getTowerData();
-    this.resetMapSize();
   },
   beforeDestroy() {
     clearInterval(this.timer);

src/router/index.js

@@ -11,7 +11,7 @@ import Safecap from "@/components/safecap/Index"
 import Management from "@/components/management/Index"
 import FallProtection from "@/components/fallprotection/Index"
 import UnloadingPlatform from "@/components/unloadingplatform/Index"
-
+import Elevator from "@/components/elevator/Index"
 
 Vue.use(VueRouter)
 
@@ -30,6 +30,8 @@ const router = new VueRouter({
                 { path: 'concrete', component: Management },
                 { path: 'fallprotection', component: FallProtection },
                 { path: 'unloadingplatform', component: UnloadingPlatform },
+                { path: 'elevator', component: Elevator },
+
             ]
 
         },