样式调整问题修正

src/api/index.js

@@ -170,7 +170,7 @@ export function get24hTowerStatis() {
 }
 
 export function getTowerWarnings() {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/towercrane/warning/list',
         method: 'get',
     })
@@ -332,7 +332,7 @@ export function getFallWarningStatus() {
 
 }
 export function getFallWarningTableList(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/linbian/warning',
         method: 'get',
         params
@@ -378,7 +378,7 @@ export function getPlatformWarningStatus() {
     })
 }
 export function getPlatformWarningList(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/unload/warning',
         method: 'get',
         params
@@ -394,7 +394,7 @@ export function getElevatorList() {
     })
 }
 export function getElevatorWarningList(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/elevator/warning',
         method: 'get',
         params
@@ -426,7 +426,7 @@ export function getCurrentMonthCheckStats() {
     })
 }
 export function getBlackspotRankingList(params) {
-    return request({
+    return noLoadingrequest({
         url: '/pweb/s/check/item/sort',
         method: 'get',
         params

src/assets/common/element.less

@@ -6,6 +6,7 @@
 
     .el-dialog__title {
         color: #fff !important;
+        font-weight: bold;
     }
 
     .el-dialog__headerbtn {
@@ -45,6 +46,7 @@
 ::v-deep .el-table td.el-table__cell,
 ::v-deep .el-table th.el-table__cell.is-leaf {
     border-color: transparent;
+    font-weight: 400 !important;
 }
 
 ::v-deep .el-table__empty-text {

src/assets/iconfont/iconfont.css

+@font-face {
+  font-family: "iconfont";
+  /* Project id 4100703 */
+  src: url('iconfont.woff2?t=1685676784641') format('woff2'),
+    url('iconfont.woff?t=1685676784641') format('woff'),
+    url('iconfont.ttf?t=1685676784641') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-anquanmao:before {
+  content: "\e9cb";
+}
+
+.icon-you-21:before {
+  content: "\e7b7";
+}
+
+.icon-shanchu-2:before {
+  content: "\e7b8";
+}
+
+.icon-you-23:before {
+  content: "\e7c4";
+}
+
+.icon-you-22:before {
+  content: "\e7d3";
+}
+
+.icon-you-2-2:before {
+  content: "\e7d4";
+}
+
+.icon-shang-01:before {
+  content: "\e8e3";
+}
+
+.icon-shang-02:before {
+  content: "\e8e4";
+}
+
+.icon-shanghun-2:before {
+  content: "\e9d0";
+}
+
+.icon-shanghun-3:before {
+  content: "\e9d1";
+}
+
+.icon-shanghun-1:before {
+  content: "\e9d2";
+}
+
+.icon-linbianfanghu-liebiao-2:before {
+  content: "\e9c9";
+}
+
+.icon-anquanmao-dangqianshiyong:before {
+  content: "\e9c1";
+}
+
+.icon-icon_ss:before {
+  content: "\e9c2";
+}
+
+.icon-shipinjiankong-1:before {
+  content: "\e9c3";
+}
+
+.icon-anquanmao-lishiguiji:before {
+  content: "\e9c4";
+}
+
+.icon-bofang:before {
+  content: "\e9c5";
+}
+
+.icon-tadiao:before {
+  content: "\e9c6";
+}
+
+.icon-shigongshengjiangji:before {
+  content: "\e9c7";
+}
+
+.icon-shipinjiankong-2:before {
+  content: "\e9c8";
+}
+
+.icon-linbianfanghu-liebiao-1:before {
+  content: "\e9ca";
+}
+
+.icon-yangchenzaoyin:before {
+  content: "\e9cc";
+}
+
+.icon-linbianfanghu-dingwei:before {
+  content: "\e9cd";
+}
+
+.icon-xieliaopingtai:before {
+  content: "\e9ce";
+}
\ No newline at end of file

src/assets/iconfont/iconfont.json

+{
+  "id": "4100703",
+  "name": "智慧工地",
+  "font_family": "font_family",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "35798422",
+      "name": "安全帽",
+      "font_class": "anquanmao",
+      "unicode": "e9cb",
+      "unicode_decimal": 59851
+    },
+    {
+      "icon_id": "15937967",
+      "name": "ico_xiaj",
+      "font_class": "you-21",
+      "unicode": "e7b7",
+      "unicode_decimal": 59319
+    },
+    {
+      "icon_id": "15937969",
+      "name": "ico_guanbi",
+      "font_class": "shanchu-2",
+      "unicode": "e7b8",
+      "unicode_decimal": 59320
+    },
+    {
+      "icon_id": "16040674",
+      "name": "ico_shang",
+      "font_class": "you-23",
+      "unicode": "e7c4",
+      "unicode_decimal": 59332
+    },
+    {
+      "icon_id": "16111497",
+      "name": "ico_zuo",
+      "font_class": "you-22",
+      "unicode": "e7d3",
+      "unicode_decimal": 59347
+    },
+    {
+      "icon_id": "16111498",
+      "name": "ico_you",
+      "font_class": "you-2-2",
+      "unicode": "e7d4",
+      "unicode_decimal": 59348
+    },
+    {
+      "icon_id": "28202666",
+      "name": "shang-01",
+      "font_class": "shang-01",
+      "unicode": "e8e3",
+      "unicode_decimal": 59619
+    },
+    {
+      "icon_id": "28202667",
+      "name": "shang-02",
+      "font_class": "shang-02",
+      "unicode": "e8e4",
+      "unicode_decimal": 59620
+    },
+    {
+      "icon_id": "35798148",
+      "name": "商混-2",
+      "font_class": "shanghun-2",
+      "unicode": "e9d0",
+      "unicode_decimal": 59856
+    },
+    {
+      "icon_id": "35798149",
+      "name": "商混-3",
+      "font_class": "shanghun-3",
+      "unicode": "e9d1",
+      "unicode_decimal": 59857
+    },
+    {
+      "icon_id": "35798150",
+      "name": "商混-1",
+      "font_class": "shanghun-1",
+      "unicode": "e9d2",
+      "unicode_decimal": 59858
+    },
+    {
+      "icon_id": "35798104",
+      "name": "临边防护-列表-2",
+      "font_class": "linbianfanghu-liebiao-2",
+      "unicode": "e9c9",
+      "unicode_decimal": 59849
+    },
+    {
+      "icon_id": "35798047",
+      "name": "安全帽-当前使用",
+      "font_class": "anquanmao-dangqianshiyong",
+      "unicode": "e9c1",
+      "unicode_decimal": 59841
+    },
+    {
+      "icon_id": "35798048",
+      "name": "icon_ss",
+      "font_class": "icon_ss",
+      "unicode": "e9c2",
+      "unicode_decimal": 59842
+    },
+    {
+      "icon_id": "35798049",
+      "name": "视频监控-1",
+      "font_class": "shipinjiankong-1",
+      "unicode": "e9c3",
+      "unicode_decimal": 59843
+    },
+    {
+      "icon_id": "35798050",
+      "name": "安全帽-历史轨迹",
+      "font_class": "anquanmao-lishiguiji",
+      "unicode": "e9c4",
+      "unicode_decimal": 59844
+    },
+    {
+      "icon_id": "35798051",
+      "name": "播放",
+      "font_class": "bofang",
+      "unicode": "e9c5",
+      "unicode_decimal": 59845
+    },
+    {
+      "icon_id": "35798052",
+      "name": "塔吊",
+      "font_class": "tadiao",
+      "unicode": "e9c6",
+      "unicode_decimal": 59846
+    },
+    {
+      "icon_id": "35798053",
+      "name": "施工升降机",
+      "font_class": "shigongshengjiangji",
+      "unicode": "e9c7",
+      "unicode_decimal": 59847
+    },
+    {
+      "icon_id": "35798054",
+      "name": "视频监控-2",
+      "font_class": "shipinjiankong-2",
+      "unicode": "e9c8",
+      "unicode_decimal": 59848
+    },
+    {
+      "icon_id": "35798056",
+      "name": "临边防护-列表-1",
+      "font_class": "linbianfanghu-liebiao-1",
+      "unicode": "e9ca",
+      "unicode_decimal": 59850
+    },
+    {
+      "icon_id": "35798058",
+      "name": "扬尘噪音",
+      "font_class": "yangchenzaoyin",
+      "unicode": "e9cc",
+      "unicode_decimal": 59852
+    },
+    {
+      "icon_id": "35798059",
+      "name": "临边防护-定位",
+      "font_class": "linbianfanghu-dingwei",
+      "unicode": "e9cd",
+      "unicode_decimal": 59853
+    },
+    {
+      "icon_id": "35798060",
+      "name": "卸料平台",
+      "font_class": "xieliaopingtai",
+      "unicode": "e9ce",
+      "unicode_decimal": 59854
+    }
+  ]
+}

src/components/Index.vue

@@ -160,16 +160,28 @@ export default {
     },
     bodyScale() {
       var deviceHeight = window.screen.height;
-      var scale = deviceHeight / 1230;
+      // var deviceWidth = window.screen.width;
+      var scale = deviceHeight / 1250; // height:550=2100 height:720=1680   height:940=1250 height:2160=1080
+      // var canvasScale = deviceWidth / 1920;
+      // 1.777778 16:9 1080
+      //1.6 16:10 1100
+      // 1.547    1728:890 1350
+      console.log(window.screen.width / window.screen.height);
       document.body.style.zoom = scale;
       document.styleSheets[document.styleSheets.length - 1].insertRule(
-        "canvas {zoom: " + 1 / scale + "}"
+        "canvas:not(.amap-layer):not(.amap-labels) {zoom: " +
+          Number(1 / scale).toFixed(2) +
+          "!important}"
       );
+
       document.styleSheets[document.styleSheets.length - 1].insertRule(
-        "canvas {transform: scale(" + scale + ")}"
+        "canvas:not(.amap-layer):not(.amap-labels) {transform: scale(" +
+          scale +
+          ")!important}"
       );
+
       document.styleSheets[document.styleSheets.length - 1].insertRule(
-        "canvas {transform-origin: 0 0}"
+        "canvas:not(.amap-layer):not(.amap-labels) {transform-origin: 0 0}"
       );
     },
     jumpBack() {
@@ -260,6 +272,9 @@ export default {
     }
   }
 }
+.parent-router {
+  margin-right: 0 !important;
+}
 a,
 .parent-router {
   cursor: pointer;
@@ -267,7 +282,7 @@ a,
   text-align: center;
   display: inline-block;
   text-decoration: none;
-  margin-right: 16px;
+  margin-right: 8px;
   color: #80a1c6;
   padding: 9px 12px;
   border: 1px solid #0f5da6;
@@ -337,9 +352,13 @@ a,
   .weather-img {
     vertical-align: top;
     width: 50px;
+    height: 50px;
     margin-right: 6px;
   }
 }
+.el-dropdown {
+  margin-right: 8px;
+}
 .el-dropdown-menu {
   padding: 0;
   border: none;

src/components/construction/Index.vue

@@ -136,14 +136,22 @@
             <div class="count" style="color: rgba(254, 186, 1, 1)">
               {{ screenDetail.today_manage_attendance_rate }} <span>%</span>
             </div>
-            <img src="@/assets/icon-person.png" alt="" />
+            <img
+              style="width: 120px; transform: translateY(-30px)"
+              src="@/assets/icon-person.png"
+              alt=""
+            />
           </div>
           <div class="checks">
             <div class="title">普通工人/考勤率</div>
             <div class="count" style="color: rgba(24, 215, 185, 1)">
               {{ screenDetail.today_normal_attendance_rate }} <span>%</span>
             </div>
-            <img src="@/assets/icon-person.png" alt="" />
+            <img
+              style="width: 120px; transform: translateY(-30px)"
+              src="@/assets/icon-person.png"
+              alt=""
+            />
           </div>
         </div>
       </ShadowContainer>
@@ -235,7 +243,6 @@
       <Title text="AI预警"> </Title>
       <ShadowContainer>
         <div class="chart-container">
-          <img class="custom-chart" src="@/assets/chart.png" />
           <div ref="qualityChart" id="quality-chart"></div>
         </div>
       </ShadowContainer>
@@ -360,7 +367,7 @@ export default {
       const option = {
         title: {
           x: "49%", //X坐标
-          y: "30%",
+          y: "27%",
           text: total,
           subtext: "AI预警",
           textAlign: "center",
@@ -384,7 +391,7 @@ export default {
           itemHeight: 12,
           itemWidth: 12,
           icon: "rect",
-          bottom: "5%",
+          bottom: "0%",
           left: "center",
           itemGap: 40,
           textStyle: {
@@ -431,7 +438,14 @@ export default {
               position: "center",
             },
 
-            data: this.aiwarningData,
+            data: this.aiwarningData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.name == "已处理" ? "#AEE4F8" : "#FF754C",
+                },
+              };
+            }),
           },
         ],
       };
@@ -662,7 +676,7 @@ table {
   position: relative;
   .custom-chart {
     position: absolute;
-    width: 160px;
+    width: 20%;
     left: 50%;
     transform: translateX(-50%);
     top: 18%;
@@ -671,7 +685,7 @@ table {
 #security-chart,
 #quality-chart {
   width: 100%;
-  height: 370px;
+  height: 220px;
 }
 .steps {
   padding-top: 40px;
@@ -764,6 +778,8 @@ table {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  height: 528px;
+  overflow-y: auto;
   .status-count {
     width: calc(100% / 3);
     padding: 30px 0px;
@@ -809,7 +825,7 @@ table {
   }
 }
 .table-scroll {
-  max-height: 300px;
+  max-height: 366px;
   overflow-y: auto;
 }
 .check-in {

src/components/earlywarning/Index.vue

@@ -90,11 +90,9 @@
         <ShadowContainer>
           <div class="total-chart">
             <div class="chart-container">
-              <img class="custom-chart" src="@/assets/chart.png" />
               <div ref="todayChart" id="today-chart"></div>
             </div>
             <div class="chart-container">
-              <img class="custom-chart" src="@/assets/chart.png" />
               <div ref="historyChart" id="history-chart"></div>
             </div>
           </div>
@@ -301,7 +299,14 @@ export default {
               position: "center",
             },
 
-            data: chartData,
+            data: chartData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.name == "未处理" ? "#FFAF51" : "#0CDEE3",
+                },
+              };
+            }),
           },
         ],
       };
@@ -395,7 +400,14 @@ export default {
               position: "center",
             },
 
-            data: chartData,
+            data: chartData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.name == "未处理" ? "#FCFF11" : "#2980FF",
+                },
+              };
+            }),
           },
         ],
       };

src/components/fallprotection/Index.vue

@@ -10,7 +10,7 @@
             :key="index"
           >
             <div class="level-title" @click="showDeviceStatus(building)">
-              <img src="@/assets/fallprotection/building-2.png" alt="" />
+              <i class="iconfont icon-linbianfanghu-liebiao-1"></i>
               {{ building.area_name }}
               <span>{{ building.total }}</span>
             </div>
@@ -21,7 +21,7 @@
                 :key="i"
                 @click="showDeviceInfo(device)"
               >
-                <img src="@/assets/fallprotection/device.png" alt="" />
+                <i class="iconfont icon-linbianfanghu-liebiao-2"></i>
                 {{ device.device_no }}
                 <span
                   :style="{ color: device.is_online == 1 ? '#26D591' : '' }"
@@ -73,7 +73,6 @@
             v-for="(warn, index) in fallWarningList"
             :key="index"
           >
-            <img src="@/assets/fallprotection/rect.png" alt="" />
             <div class="warning-info">
               <div class="warning-num">{{ warn.num }}</div>
               <div class="warning-text">{{ warn.alarm_type_text }}</div>
@@ -124,6 +123,7 @@
             class="warning-table-list"
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
+            id="table-scroll"
           >
             <div
               class="warning-table-column"
@@ -213,6 +213,11 @@ export default {
             resizeEnable: true,
             mapStyle: "amap://styles/darkblue",
           });
+          this.$nextTick(() => {
+            var scale = window.screen.height / 1250;
+            console.log(document.getElementById("amap-container").style);
+            document.getElementById("amap-container").style.zoom = 1 / scale;
+          });
           this.map.on("click", () => {
             this.buildingWindowVisible = false;
           });
@@ -355,9 +360,39 @@ export default {
         getFallWarningTableList({ page: 1 }).then((res) => {
           this.page = 1;
           this.fallwarningTableData = res.data.data;
+          this.$nextTick(() => {
+            const element = document.getElementById("table-scroll");
+            this.autoScroll(1, 50, 1500, element);
+          });
         });
       }
     },
+    autoScroll(stepLength, speed, delay, element) {
+      let interval;
+      //let step = 1
+      element.scrollTop = 0;
+      function start() {
+        interval = setInterval(scrolling, speed);
+        element.scrollTop += stepLength;
+      }
+      function scrolling() {
+        var sTop = element.scrollTop;
+        element.scrollTop += stepLength;
+        if (
+          sTop === element.scrollTop ||
+          sTop == 0 ||
+          element.scrollTop === element.scrollHeight - element.offsetHeight
+        ) {
+          element.scrollTop = 0;
+          clearInterval(interval);
+          setTimeout(start, delay);
+        }
+      }
+      if (element.offsetHeight !== element.scrollHeight) {
+        // 元素内容没有溢出时，不触发
+        setTimeout(start, delay);
+      }
+    },
   },
   mounted() {
     getBaseInfo().then((res) => {
@@ -445,6 +480,10 @@ export default {
     }
     .level-title {
       line-height: 22px;
+      &:hover {
+        color: #27acfb;
+        background: rgba(44, 96, 162, 0.5);
+      }
       img {
         width: 22px;
         vertical-align: top;
@@ -460,7 +499,10 @@ export default {
     }
     .level-info {
       line-height: 22px;
-
+      &:hover {
+        color: #27acfb;
+        background: rgba(44, 96, 162, 0.5);
+      }
       img {
         width: 22px;
         vertical-align: top;
@@ -468,7 +510,7 @@ export default {
       background: rgba(44, 96, 162, 0.1);
       font-size: 14px;
       color: #c6def9;
-      padding: 10px 12px;
+      padding: 10px 30px;
       border-top: 1px solid rgba(122, 143, 173, 0.2);
       cursor: pointer;
       span {
@@ -483,10 +525,13 @@ export default {
 .warning-count {
   display: inline-block;
   vertical-align: top;
-  width: 49%;
-  position: relative;
+  padding: 20px 0;
+  width: 32%;
   margin-right: 2%;
-  &:nth-child(2n) {
+  margin-bottom: 16px;
+  background: url("@/assets/fallprotection/rect.png") no-repeat;
+  background-size: 100% 100%;
+  &:nth-child(3n) {
     margin-right: 0;
   }
   img {
@@ -494,10 +539,6 @@ export default {
     width: 100%;
   }
   .warning-info {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
     text-align: center;
     .warning-num {
       font-size: 24px;
@@ -506,6 +547,7 @@ export default {
     .warning-text {
       font-size: 14px;
       color: #27acfb;
+      white-space: nowrap;
     }
   }
 }
@@ -569,7 +611,7 @@ export default {
   }
 }
 .warning-scroll {
-  height: 370px;
+  height: 346px;
   overflow-y: auto;
 }
 
@@ -586,9 +628,9 @@ export default {
 }
 .recent-open,
 .building-info-text {
-  font-size: 16px;
+  font-size: 14px;
   color: #c6def9;
-  line-height: 45px;
+  line-height: 36px;
 }
 .building-info {
   display: flex;

src/components/management/Index.vue

@@ -240,7 +240,12 @@ export default {
             mapStyle: "amap://styles/darkblue",
           });
           this.map.on("click", () => {});
+          this.$nextTick(() => {
+            var scale = window.screen.height / 1250;
+            document.getElementById("amap-container").style.zoom = 1 / scale;
+          });
         })
+
         .catch((e) => {
           console.log(e);
         });

src/components/management/sampleDialog.vue

@@ -87,6 +87,11 @@ export default {
           resizeEnable: true,
           mapStyle: "amap://styles/darkblue",
         });
+        this.$nextTick(() => {
+          var scale = window.screen.height / 1250;
+          document.getElementById("sample-map-container").style.zoom =
+            1 / scale;
+        });
       });
     },
     search() {

src/components/noise/Index.vue

@@ -10,7 +10,7 @@
             :key="index"
             @click="changeMonitor(monitor, index)"
           >
-            <img src="@/assets/noise/icon_device.png" alt="" />
+            <i class="iconfont icon-yangchenzaoyin"></i>
             {{ monitor.device_name }} / {{ monitor.device_no }}
           </div>
         </div>
@@ -18,14 +18,12 @@
       <Title text="设备总览"></Title>
       <ShadowContainer>
         <div class="chart-container">
-          <img class="custom-chart" src="@/assets/chart.png" />
           <div ref="deviceChart" id="device-chart"></div>
         </div>
       </ShadowContainer>
       <Title text="近30日噪音"></Title>
       <ShadowContainer>
         <div class="chart-container">
-          <img class="custom-chart" src="@/assets/chart.png" />
           <div ref="noiseChart" id="noise-chart"></div>
         </div>
       </ShadowContainer>
@@ -132,6 +130,7 @@
             class="warning-table-list"
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
+            id="table-scroll"
           >
             <div
               class="warning-table-column"
@@ -250,8 +249,8 @@ export default {
           itemHeight: 12,
           itemWidth: 12,
           icon: "rect",
-          right: "10%",
-          top: "20%",
+          right: "15%",
+          top: "35%",
           orient: "vertical",
           itemGap: 20,
           textStyle: {
@@ -283,7 +282,7 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["80%", "90%"],
+            radius: ["60%", "70%"],
             center: ["28%", "50%"],
             avoidLabelOverlap: false,
             itemStyle: {
@@ -295,7 +294,14 @@ export default {
               position: "center",
             },
 
-            data: pieData,
+            data: pieData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.name == "在线总数" ? "#18D7B9" : "#FEBA01",
+                },
+              };
+            }),
           },
         ],
       };
@@ -334,10 +340,10 @@ export default {
           itemHeight: 12,
           itemWidth: 12,
           icon: "rect",
-          right: "10%",
-          top: "30%",
+          right: "15%",
+          top: "35%",
           orient: "vertical",
-          itemGap: 40,
+          itemGap: 20,
           textStyle: {
             color: "inherit",
             rich: {
@@ -367,7 +373,7 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["80%", "90%"],
+            radius: ["60%", "70%"],
             center: ["28%", "50%"],
             avoidLabelOverlap: false,
             itemStyle: {
@@ -379,7 +385,14 @@ export default {
               position: "center",
             },
 
-            data: chartData,
+            data: chartData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.name == "达标" ? "#18D7B9" : "#FF754C",
+                },
+              };
+            }),
           },
         ],
       };
@@ -529,9 +542,39 @@ export default {
         }).then((res) => {
           this.page = 1;
           this.warnings = res.data.data;
+          this.$nextTick(() => {
+            const element = document.getElementById("table-scroll");
+            this.autoScroll(1, 50, 1500, element);
+          });
         });
       }
     },
+    autoScroll(stepLength, speed, delay, element) {
+      let interval;
+      //let step = 1
+      element.scrollTop = 0;
+      function start() {
+        interval = setInterval(scrolling, speed);
+        element.scrollTop += stepLength;
+      }
+      function scrolling() {
+        var sTop = element.scrollTop;
+        element.scrollTop += stepLength;
+        if (
+          sTop === element.scrollTop ||
+          sTop == 0 ||
+          element.scrollTop === element.scrollHeight - element.offsetHeight
+        ) {
+          element.scrollTop = 0;
+          clearInterval(interval);
+          setTimeout(start, delay);
+        }
+      }
+      if (element.offsetHeight !== element.scrollHeight) {
+        // 元素内容没有溢出时，不触发
+        setTimeout(start, delay);
+      }
+    },
   },
   mounted() {
     this.getNoiseData();
@@ -549,6 +592,7 @@ export default {
   .mid-area {
     width: calc(44% - 40px);
     margin: 0 20px;
+    min-width: 840px;
   }
 }
 .chart-container {
@@ -597,7 +641,7 @@ export default {
 }
 #aqi-chart {
   width: 100%;
-  height: 154px;
+  height: 200px;
 }
 .monitor {
   display: flex;
@@ -809,9 +853,12 @@ export default {
 }
 #stats-container {
   position: relative;
-  margin-bottom: 60px;
+  margin-bottom: 10px;
+
+  border-bottom: 4px solid #114e70;
   img {
     width: 100%;
+    vertical-align: top;
   }
   .text {
     color: #ffffff;

src/components/projectcheck/Index.vue

@@ -4,7 +4,6 @@
       <Title text="本月检查统计"></Title>
       <ShadowContainer>
         <div class="chart-container" id="current-chart">
-          <img class="custom-chart" src="@/assets/chart.png" />
           <div id="current-check-stats" ref="currentCheckStatsChart"></div>
         </div>
       </ShadowContainer>
@@ -20,6 +19,7 @@
             class="warning-table-list"
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
+            id="table-scroll"
           >
             <div
               class="warning-table-column"
@@ -70,28 +70,24 @@
             <div class="chart-angle">
               <div class="chart-title">项目自查</div>
               <div class="chart-container">
-                <img class="custom-chart" src="@/assets/chart.png" />
                 <div id="project-check-chart" ref="projectCheck"></div>
               </div>
             </div>
             <div class="chart-angle">
               <div class="chart-title">企业检查</div>
               <div class="chart-container">
-                <img class="custom-chart" src="@/assets/chart.png" />
                 <div id="enterprise-check" ref="enterpriseCheck"></div>
               </div>
             </div>
             <div class="chart-angle">
               <div class="chart-title">监督检测</div>
               <div class="chart-container">
-                <img class="custom-chart" src="@/assets/chart.png" />
                 <div id="supervise-check" ref="superviseCheck"></div>
               </div>
             </div>
             <div class="chart-angle">
               <div class="chart-title">移动巡查</div>
               <div class="chart-container">
-                <img class="custom-chart" src="@/assets/chart.png" />
                 <div id="move-check" ref="moveCheck"></div>
               </div>
             </div>
@@ -275,7 +271,23 @@ export default {
               position: "center",
             },
 
-            data: chartData,
+            data: chartData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color:
+                    item.name == "无问题"
+                      ? "#18D7B9"
+                      : item.name == "待整改"
+                      ? "#E39B36"
+                      : item.name == "复查中"
+                      ? "#5399F7"
+                      : item.name == "已整改"
+                      ? "#E25E80"
+                      : "",
+                },
+              };
+            }),
           },
         ],
       };
@@ -291,19 +303,15 @@ export default {
       });
     },
     load() {
-      if (this.blackspotRanking.length == this.blackSpotPage * 10) {
-        getBlackspotRankingList({
-          page: this.blackSpotPage + 1,
-        }).then((res) => {
-          this.blackSpotPage += 1;
-          this.blackspotRanking = [...this.blackspotRanking, ...res.data.data];
-          this.$forceUpdate();
-        });
-      } else if (this.blackspotRanking.length == 0) {
+      if (this.blackspotRanking.length == 0) {
         getBlackspotRankingList({ page: 1 }).then((res) => {
           this.blackSpotPage = 1;
           this.blackspotRanking = res.data.data;
           this.$forceUpdate();
+          this.$nextTick(() => {
+            const element = document.getElementById("table-scroll");
+            this.autoScroll(1, 50, 1500, element);
+          });
         });
       }
     },
@@ -334,23 +342,31 @@ export default {
         this.renderSmallChart(
           "project-check-chart",
           "projectCheck",
-          res.data.project_data
+          res.data.project_data,
+          "#FEBA01"
         );
         this.renderSmallChart(
           "enterprise-check",
           "enterpriseCheck",
-          res.data.company_data
+          res.data.company_data,
+          "#FC6E03"
         );
         this.renderSmallChart(
           "supervise-check",
           "superviseCheck",
-          res.data.supervise_data
+          res.data.supervise_data,
+          "#E86365"
+        );
+        this.renderSmallChart(
+          "move-check",
+          "moveCheck",
+          res.data.move_data,
+          "#CD4091"
         );
-        this.renderSmallChart("move-check", "moveCheck", res.data.move_data);
         this.renderQuestionBarChart(res.data);
       });
     },
-    renderSmallChart(id, ref, data) {
+    renderSmallChart(id, ref, data, pColor) {
       const chartData = [...data];
       const chart = this.$echarts.init(this.$refs[`${ref}`]);
       let total = 0;
@@ -428,7 +444,14 @@ export default {
               position: "center",
             },
 
-            data: chartData,
+            data: chartData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.name == "有隐患" ? pColor : "#18D7B9",
+                },
+              };
+            }),
           },
         ],
       };
@@ -458,6 +481,14 @@ export default {
             })[0].value;
           }),
           barWidth: 15,
+          itemStyle: {
+            color:
+              item.name == "质量问题"
+                ? "#B16400"
+                : item.name == "安全问题"
+                ? "#CF2C16"
+                : "",
+          },
         };
       });
       const option = {
@@ -521,6 +552,32 @@ export default {
         this.correctDialogVisible = true;
       });
     },
+    autoScroll(stepLength, speed, delay, element) {
+      let interval;
+      //let step = 1
+      element.scrollTop = 0;
+      function start() {
+        interval = setInterval(scrolling, speed);
+        element.scrollTop += stepLength;
+      }
+      function scrolling() {
+        var sTop = element.scrollTop;
+        element.scrollTop += stepLength;
+        if (
+          sTop === element.scrollTop ||
+          sTop == 0 ||
+          element.scrollTop === element.scrollHeight - element.offsetHeight
+        ) {
+          element.scrollTop = 0;
+          clearInterval(interval);
+          setTimeout(start, delay);
+        }
+      }
+      if (element.offsetHeight !== element.scrollHeight) {
+        // 元素内容没有溢出时，不触发
+        setTimeout(start, delay);
+      }
+    },
   },
   mounted() {
     getCurrentMonthCheckStats().then((res) => {
@@ -590,8 +647,8 @@ export default {
       }
       .custom-chart {
         position: absolute;
-        width: 25%;
-        left: 15.5%;
+        width: 20%;
+        left: 18%;
         transform: translateY(-50%);
         top: 50%;
       }

src/components/realname/Index.vue

@@ -124,7 +124,6 @@
       <Title text="人员地域分布"></Title>
       <ShadowContainer>
         <div class="chart-container" id="reset-area2">
-          <img class="custom-chart" src="@/assets/chart.png" />
           <div ref="areaChart" id="area-chart"></div>
         </div>
       </ShadowContainer>

src/components/safecap/Index.vue

@@ -27,7 +27,10 @@
               />
             </div>
             <div class="device-description">
-              <div>{{ device.person_type }} / {{ device.person_name }}</div>
+              <div>
+                {{ device.person_type ? device.person_type : "---" }} /
+                {{ device.person_name ? device.person_name : "---" }}
+              </div>
               <div>绑定设备：{{ device.name }}</div>
             </div>
             <div
@@ -65,7 +68,10 @@
               >{{ windowData.is_online_text }}</span
             >
             <span class="name"
-              >{{ windowData.person_type }} / {{ windowData.person_name }}</span
+              >{{ windowData.person_type ? windowData.person_type : "---" }} /
+              {{
+                windowData.person_name ? windowData.person_name : "---"
+              }}</span
             >
           </div>
           <div class="recent-open">最近使用:{{ windowData.last_use_time }}</div>
@@ -265,6 +271,10 @@ export default {
             console.log(e);
             this.capWindowVisible = false;
           });
+          this.$nextTick(() => {
+            var scale = window.screen.height / 1250;
+            document.getElementById("amap-container").style.zoom = 1 / scale;
+          });
           this.getSafeCapDeviceList();
           this.getSafeCapArea();
         })
@@ -461,7 +471,6 @@ export default {
 }
 .cap-window {
   width: 460px;
-  height: 170px;
   position: absolute;
   left: 50%;
   top: 50%;

src/components/safecap/mapDialog.vue

@@ -2,7 +2,7 @@
   <el-dialog
     :visible.sync="dialogVisible"
     title="使用轨迹"
-    width="80vw"
+    width="1200px"
     top="10vh"
     append-to-body
   >
@@ -97,6 +97,10 @@ export default {
           resizeEnable: true,
           mapStyle: "amap://styles/darkblue",
         });
+        this.$nextTick(() => {
+          var scale = window.screen.height / 1250;
+          document.getElementById("route-map-container").style.zoom = 1 / scale;
+        });
         this.search();
       });
     },

src/components/supervisory/Index.vue

@@ -134,13 +134,14 @@ export default {
           on-click={() => this.selectNode(node, data)}
         >
           <span>
-            <img
-              src={
+            <span
+              class={
                 node.level == 1
-                  ? require("@/assets/visor.png")
-                  : require("@/assets/camera.png")
+                  ? "iconfont icon-shipinjiankong-1"
+                  : "iconfont icon-shipinjiankong-2"
               }
-            />
+              style="margin-right:6px"
+            ></span>
             {node.label}
           </span>
           {node.level == 1 && <span>{data.device_count}</span>}
@@ -308,6 +309,7 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "@/assets/common/element.less";
+
 #supervisory {
   padding: 12px 20px;
   display: flex;

src/components/tower/Index.vue

@@ -4,7 +4,6 @@
       <Title text="设备总览"></Title>
       <ShadowContainer>
         <div class="chart-container">
-          <img class="custom-chart" src="@/assets/chart.png" />
           <div ref="deviceChart" id="device-chart"></div>
         </div>
       </ShadowContainer>
@@ -96,6 +95,7 @@
             class="warning-table-list"
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
+            id="table-scroll"
           >
             <div
               class="warning-table-column"
@@ -212,8 +212,8 @@ export default {
           itemHeight: 12,
           itemWidth: 12,
           icon: "rect",
-          right: "10%",
-          top: "15%",
+          right: "15%",
+          top: "30%",
           orient: "vertical",
           itemGap: 40,
           textStyle: {
@@ -245,7 +245,7 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["80%", "90%"],
+            radius: ["60%", "70%"],
             center: ["28%", "50%"],
             avoidLabelOverlap: false,
             itemStyle: {
@@ -256,7 +256,14 @@ export default {
               show: false,
               position: "center",
             },
-            data: pieData,
+            data: pieData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.name == "在线总数" ? "#2980FF" : "#AEE4F8",
+                },
+              };
+            }),
           },
         ],
       };
@@ -453,6 +460,10 @@ export default {
             resizeEnable: true,
             mapStyle: "amap://styles/darkblue",
           });
+          this.$nextTick(() => {
+            var scale = window.screen.height / 1250;
+            document.getElementById("amap-container").style.zoom = 1 / scale;
+          });
           this.map.on("click", (e) => {
             console.log(e);
             this.towerWindowVisible = false;
@@ -664,9 +675,39 @@ export default {
         getTowerWarnings({ page: 1, limit: 20 }).then((res) => {
           this.page = 1;
           this.warnings = res.data.data;
+          this.$nextTick(() => {
+            const element = document.getElementById("table-scroll");
+            this.autoScroll(1, 50, 1500, element);
+          });
         });
       }
     },
+    autoScroll(stepLength, speed, delay, element) {
+      let interval;
+      //let step = 1
+      element.scrollTop = 0;
+      function start() {
+        interval = setInterval(scrolling, speed);
+        element.scrollTop += stepLength;
+      }
+      function scrolling() {
+        var sTop = element.scrollTop;
+        element.scrollTop += stepLength;
+        if (
+          sTop === element.scrollTop ||
+          sTop == 0 ||
+          element.scrollTop === element.scrollHeight - element.offsetHeight
+        ) {
+          element.scrollTop = 0;
+          clearInterval(interval);
+          setTimeout(start, delay);
+        }
+      }
+      if (element.offsetHeight !== element.scrollHeight) {
+        // 元素内容没有溢出时，不触发
+        setTimeout(start, delay);
+      }
+    },
   },
   mounted() {
     this.getTowerData();
@@ -821,15 +862,15 @@ export default {
   }
 }
 .monitor-list {
-  height: 320px;
+  height: 210px;
   overflow-y: auto;
 }
 .noise-monitor {
   font-size: 14px;
   color: #c6def9;
-  line-height: 72px;
   background: rgba(44, 96, 162, 0.05);
-  padding: 0 12px;
+  padding: 10px 12px;
+  line-height: 22px;
   margin-bottom: 12px;
   cursor: pointer;
   &:last-child {
@@ -840,10 +881,7 @@ export default {
     background: rgba(44, 96, 162, 0.2);
   }
   img {
-    width: 30px;
-    height: 30px;
-    margin-top: 20px;
-    margin-right: 12px;
+    width: 20px;
     vertical-align: top;
   }
   .device-description {
@@ -909,7 +947,7 @@ export default {
   text-align: center;
   color: #c6def9;
   .warning-table-list {
-    height: 380px;
+    height: 500px;
     overflow-y: auto;
   }
   .warning-table-header {

src/components/unloadingplatform/Index.vue

@@ -11,7 +11,7 @@
             @click="showDeviceInfo(platform)"
           >
             <div class="platform-title">
-              <img src="@/assets/unloadingplatform/platform.png" alt="" />
+              <i class="iconfont icon-xieliaopingtai"></i>
               {{ platform.device_no }}
               <span
                 :style="{ color: platform.is_online == 1 ? '#66cab9' : '' }"
@@ -38,6 +38,7 @@
           </div>
         </div>
         <div id="battery-chart" ref="batteryChart"></div>
+        <div class="separate-chart-line"></div>
         <div id="weight-chart" ref="weightChart"></div>
       </ShadowContainer>
     </div>
@@ -110,6 +111,7 @@
             class="warning-table-list"
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
+            id="table-scroll"
           >
             <div
               class="warning-table-column"
@@ -201,6 +203,11 @@ export default {
             resizeEnable: true,
             mapStyle: "amap://styles/darkblue",
           });
+
+          this.$nextTick(() => {
+            var scale = window.screen.height / 1250;
+            document.getElementById("amap-container").style.zoom = 1 / scale;
+          });
           this.map.on("click", () => {
             this.platformWindowVisible = false;
           });
@@ -431,9 +438,39 @@ export default {
         getPlatformWarningList({ page: 1, limit: 20 }).then((res) => {
           this.page = 1;
           this.platformWarningList = res.data.data;
+          this.$nextTick(() => {
+            const element = document.getElementById("table-scroll");
+            this.autoScroll(1, 50, 1500, element);
+          });
         });
       }
     },
+    autoScroll(stepLength, speed, delay, element) {
+      let interval;
+      //let step = 1
+      element.scrollTop = 0;
+      function start() {
+        interval = setInterval(scrolling, speed);
+        element.scrollTop += stepLength;
+      }
+      function scrolling() {
+        var sTop = element.scrollTop;
+        element.scrollTop += stepLength;
+        if (
+          sTop === element.scrollTop ||
+          sTop == 0 ||
+          element.scrollTop === element.scrollHeight - element.offsetHeight
+        ) {
+          element.scrollTop = 0;
+          clearInterval(interval);
+          setTimeout(start, delay);
+        }
+      }
+      if (element.offsetHeight !== element.scrollHeight) {
+        // 元素内容没有溢出时，不触发
+        setTimeout(start, delay);
+      }
+    },
   },
 
   mounted() {
@@ -535,6 +572,7 @@ export default {
       }
       &:hover {
         background: rgba(44, 96, 162, 0.5);
+        color: #16c0ff;
       }
       &.active {
         background: rgba(44, 96, 162, 0.5);
@@ -561,7 +599,7 @@ export default {
 }
 #battery-chart,
 #weight-chart {
-  height: 250px;
+  height: 230px;
 }
 .warning-count {
   display: inline-block;
@@ -669,9 +707,9 @@ export default {
 }
 .recent-open,
 .building-info-text {
-  font-size: 16px;
+  font-size: 14px;
   color: #c6def9;
-  line-height: 45px;
+  line-height: 36px;
 }
 .building-info {
   display: flex;
@@ -742,8 +780,9 @@ export default {
 
 .filters {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   margin-bottom: 10px;
+
   .filter {
     font-size: 14px;
     color: rgba(198, 222, 249, 1);
@@ -751,6 +790,7 @@ export default {
     padding: 6px;
     text-align: center;
     cursor: pointer;
+    margin: 0 40px;
     background: linear-gradient(
       90deg,
       rgba(8, 36, 71, 0) 0%,
@@ -762,4 +802,10 @@ export default {
     }
   }
 }
+.separate-chart-line {
+  background: #114e70;
+  height: 4px;
+  width: 100%;
+  margin: 20px 0;
+}
 </style>
\ No newline at end of file

src/main.js

@@ -8,7 +8,7 @@ import Title from "@/components/Title"
 import ShadowContainer from "@/components/ShadowContainer"
 import * as echarts from "echarts"
 import scroll from 'vue-seamless-scroll'
-
+import "@/assets/iconfont/iconfont.css";
 
 Vue.use(scroll)
 

vue.config.js

@@ -7,11 +7,11 @@ module.exports = defineConfig({
       postcss: {
         postcssOptions: {
           plugins: [
-            // require('postcss-plugin-px2rem')({
-            //   rootValue: 100,
-            //   mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
-            //   minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
-            // }),
+            require('postcss-plugin-px2rem')({
+              rootValue: 54,
+              mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
+              minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
+            }),
           ]
         }