styleFix

src/components/Index.vue

@@ -179,7 +179,7 @@ export default {
       // var documentHeight =
       //   document.getElementsByTagName("html")[0].offsetHeight;
       // console.log(windowHeight - documentHeight);
-      var deviceHeight = window.screen.height;
+      var deviceHeight = window.innerHeight;
       var scale = deviceHeight / 1080;
       document.body.style.zoom = scale;
       document.body.style.height = (1 / scale) * 100 + "vh";
@@ -369,6 +369,7 @@ a,
   line-height: 24px;
   vertical-align: top;
   margin-top: 8px;
+  margin-right: 50px;
   .weather-text {
     color: #fff;
     font-size: 18px;
@@ -391,7 +392,7 @@ a,
   background: none;
   a {
     margin-right: 0;
-    width: 80px;
+    width: 86px;
   }
   .el-dropdown-menu__item:focus,
   .el-dropdown-menu__item:not(.is-disabled):hover {

src/components/construction/Index.vue

@@ -35,7 +35,12 @@
             <div class="divider-text">·参建单位·</div>
             <div class="divider-line"></div>
           </div>
-          <div class="table-scroll" id="table-scroll">
+          <div
+            class="table-scroll"
+            id="table-scroll"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
+          >
             <table>
               <tr>
                 <td width="60">
@@ -182,43 +187,45 @@
       <Title text="工程进度" type="long"></Title>
       <ShadowContainer class="short-container">
         <div class="progress-contains">
-          <div class="progress">
-            <div class="progress-container">
-              <div class="progress-day">
-                <div class="progress-count">{{ progressDetail.zgq_num }}</div>
-                <div class="progress-text">总工期(天)</div>
-              </div>
-              <div class="progress-day">
-                <div class="progress-count" style="color: #ffaf51">
-                  {{ progressDetail.sg_num }}
+          <div style="width: 100%">
+            <div class="progress">
+              <div class="progress-container">
+                <div class="progress-day">
+                  <div class="progress-count">{{ progressDetail.zgq_num }}</div>
+                  <div class="progress-text">总工期(天)</div>
                 </div>
-                <div class="progress-text">已施工(天)</div>
-              </div>
-              <div class="progress-day">
-                <div class="progress-count" style="color: #ff5151">
-                  {{ progressDetail.current_progress_over_day }}
+                <div class="progress-day">
+                  <div class="progress-count" style="color: #ffaf51">
+                    {{ progressDetail.sg_num }}
+                  </div>
+                  <div class="progress-text">已施工(天)</div>
+                </div>
+                <div class="progress-day">
+                  <div class="progress-count" style="color: #ff5151">
+                    {{ progressDetail.current_progress_over_day }}
+                  </div>
+                  <div class="progress-text">距离当前工期结束(天)</div>
                 </div>
-                <div class="progress-text">距离当前工期结束(天)</div>
               </div>
             </div>
-          </div>
-          <div id="step-scroll">
-            <el-steps :active="progressDetail.step" finish-status="success">
-              <el-step
-                v-for="(progress, index) in progressDetail.progress_data"
-                :key="index"
-              >
-                <template #title>
-                  <div class="step-title">
-                    {{ progress.over_date }}
-                    <div class="step-status">{{ progress.status_text }}</div>
-                  </div>
-                </template>
-                <template #description>
-                  <div class="step-description">{{ progress.name }}</div>
-                </template>
-              </el-step>
-            </el-steps>
+            <div id="step-scroll">
+              <el-steps :active="progressDetail.step" finish-status="success">
+                <el-step
+                  v-for="(progress, index) in progressDetail.progress_data"
+                  :key="index"
+                >
+                  <template #title>
+                    <div class="step-title">
+                      {{ progress.over_date }}
+                      <div class="step-status">{{ progress.status_text }}</div>
+                    </div>
+                  </template>
+                  <template #description>
+                    <div class="step-description">{{ progress.name }}</div>
+                  </template>
+                </el-step>
+              </el-steps>
+            </div>
           </div>
         </div>
       </ShadowContainer>
@@ -315,6 +322,7 @@ export default {
       },
       aiwarningData: [],
       AIwarningTotal: 0,
+      interval1: null,
     };
   },
   methods: {
@@ -412,11 +420,11 @@ export default {
     mouseLeaveEvent() {},
     mouseOverEvent() {},
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
       //let step = 1
-      element.scrollTop = 0;
+      // element.scrollTop = 0;
+      var that = this;
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -428,7 +436,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           stepLength *= -1; // 转换方向
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -437,7 +445,17 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
   },
+
   mounted() {
     this.getBaseData();
   },
@@ -634,7 +652,6 @@ table {
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
   height: 100%;
 }
 .progress {

src/components/earlywarning/Index.vue

@@ -47,7 +47,12 @@
       <div class="today-warning">
         <Title type="long" text="今日预警"></Title>
         <ShadowContainer class="long-container">
-          <div class="warp" id="warning-list">
+          <div
+            class="warp"
+            id="warning-list"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
+          >
             <div
               class="person-check"
               v-for="(warns, index) in warningList"
@@ -88,9 +93,87 @@
       <div class="right-container">
         <Title type="long" text="整改统计"></Title>
         <ShadowContainer class="short-container">
-          <div class="total-chart">
-            <div ref="todayChart" id="today-chart"></div>
-            <div ref="historyChart" id="history-chart"></div>
+          <div
+            style="
+              display: flex;
+              height: 100%;
+              flex-wrap: wrap;
+              align-items: center;
+              justify-content: center;
+              flex-direction: column;
+            "
+          >
+            <div
+              style="
+                display: flex;
+                width: calc(50% - 2px);
+                justify-content: center;
+                border-right: 4px solid #114e70;
+              "
+            >
+              <div class="chart-container">
+                <div ref="todayChart" id="today-chart"></div>
+                <div class="title">
+                  <div class="main-title">
+                    {{ todayTotal }}
+                  </div>
+                  <div class="sub-title">今日整改</div>
+                </div>
+              </div>
+              <div class="chart-legends">
+                <div
+                  v-for="(legend, index) in todayPieChartData"
+                  :key="index"
+                  :style="{
+                    color: legend.name == '未处理' ? '#FFAF51' : '#0CDEE3',
+                  }"
+                >
+                  <span
+                    class="rect"
+                    :style="{
+                      background:
+                        legend.name == '未处理' ? '#FFAF51' : '#0CDEE3',
+                    }"
+                  ></span>
+                  {{ legend.name }} {{ legend.value }}
+                </div>
+              </div>
+            </div>
+            <div
+              style="
+                display: flex;
+                width: calc(50% - 2px);
+                justify-content: center;
+              "
+            >
+              <div class="chart-container">
+                <div ref="historyChart" id="history-chart"></div>
+                <div class="title">
+                  <div class="main-title">
+                    {{ historyTotal }}
+                  </div>
+                  <div class="sub-title">历史整改</div>
+                </div>
+              </div>
+              <div class="chart-legends">
+                <div
+                  v-for="(legend, index) in historyChartData"
+                  :key="index"
+                  :style="{
+                    color: legend.name == '未处理' ? '#FCFF11' : '#2980FF',
+                  }"
+                >
+                  <span
+                    class="rect"
+                    :style="{
+                      background:
+                        legend.name == '未处理' ? '#FCFF11' : '#2980FF',
+                    }"
+                  ></span>
+                  {{ legend.name }} {{ legend.value }}
+                </div>
+              </div>
+            </div>
           </div>
         </ShadowContainer>
         <Title type="long" text="本月报警趋势"></Title>
@@ -121,6 +204,8 @@ export default {
       todayPieChartData: [],
       historyChartData: [],
       intervalTimer: null,
+      todayTotal: 0,
+      historyTotal: 0,
     };
   },
   methods: {
@@ -223,68 +308,15 @@ export default {
       chartData.map((item) => {
         total += item.value;
       });
+      this.todayTotal = total;
       const option = {
-        title: {
-          x: "27%", //X坐标
-          y: "34%",
-          text: total,
-          subtext: "今日整改",
-          textAlign: "center",
-          textStyle: {
-            //标题样式
-            fontSize: 30,
-            fontWeight: "bolder",
-            color: "#00fcff",
-          },
-          subtextStyle: {
-            //副标题样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          right: "0%",
-          top: "30%",
-          orient: "vertical",
-          itemGap: 40,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 14,
-                align: "left",
-              },
-              b: {
-                fontSize: 20,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = chartData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}} 条`];
-            return arr.join("   ");
-          },
-        },
         series: [
           {
             type: "pie",
             radius: ["60%", "70%"],
-            center: ["28%", "50%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -323,69 +355,17 @@ export default {
       chartData.map((item) => {
         total += item.value;
       });
+      this.historyTotal = total;
       const chart = this.$echarts.init(this.$refs.historyChart);
       const option = {
-        title: {
-          x: "27%", //X坐标
-          y: "34%",
-          text: total,
-          subtext: "历史整改",
-          textAlign: "center",
-          textStyle: {
-            //标题样式
-            fontSize: 30,
-            fontWeight: "bolder",
-            color: "#00fcff",
-          },
-          subtextStyle: {
-            //副标题样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          right: "0%",
-          top: "30%",
-          orient: "vertical",
-          itemGap: 40,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 14,
-                align: "left",
-              },
-              b: {
-                fontSize: 20,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = chartData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}} 条`];
-            return arr.join("   ");
-          },
-        },
+
         series: [
           {
             type: "pie",
             radius: ["60%", "70%"],
-            center: ["28%", "50%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -466,11 +446,11 @@ export default {
       });
     },
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
+      var that = this;
       //let step = 1
       element.scrollTop = 0;
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -482,7 +462,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -491,6 +471,15 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("warning-list");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
   },
 
   mounted() {
@@ -623,16 +612,15 @@ export default {
   width: 100%;
   height: 100%;
 }
-.total-chart {
+
+#today-chart,
+#history-chart {
   width: 100%;
   height: 100%;
-  display: flex;
-  justify-content: space-between;
-  #today-chart,
-  #history-chart {
-    width: calc(50% - 20px);
-    height: 100%;
-  }
+  margin: 0 auto;
+  background: url("@/assets/chart.png") no-repeat;
+  background-size: 50% 50%;
+  background-position: center center;
 }
 .no-data {
   position: absolute;
@@ -654,4 +642,48 @@ export default {
 .short-container {
   height: calc(50% - 106px);
 }
+.chart-legends {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  & > div {
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 36px;
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+  }
+  .rect {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    text-align: center;
+    transform: translateX(-50%) translateY(-50%);
+    .main-title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #00fcff;
+    }
+    .sub-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}
 </style>
\ No newline at end of file

src/components/elevator/Index.vue

@@ -84,6 +84,8 @@
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
             id="table-scroll"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
           >
             <div
               class="warning-table-column"
@@ -280,6 +282,7 @@ export default {
       currentElevatorTower: {},
       leftBottom: 0,
       rightBottom: 0,
+      interval1: null,
     };
   },
   methods: {
@@ -307,11 +310,9 @@ export default {
       }
     },
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
-      //let step = 1
-      element.scrollTop = 0;
+      var that = this;
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -323,7 +324,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -332,6 +333,15 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
     getCurrentElevatorStatus(tower) {
       this.leftBottom = 0;
       this.rightBottom = 0;
@@ -523,8 +533,8 @@ export default {
   }
   .warning-info-img {
     position: relative;
-    transform: translateY(-40px);
-    margin-bottom: -40px;
+    transform: translateY(-60px);
+    margin-bottom: -60px;
     img {
       width: 80%;
       margin: 0 auto;

src/components/fallprotection/Index.vue

@@ -125,6 +125,8 @@
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
             id="table-scroll"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
           >
             <div
               class="warning-table-column"
@@ -195,6 +197,7 @@ export default {
       buildingWindowVisible: false,
       windowData: {},
       page: 1,
+      interval1: null,
     };
   },
   methods: {
@@ -369,11 +372,11 @@ export default {
       }
     },
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
+      var that = this;
       //let step = 1
-      element.scrollTop = 0;
+
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -385,7 +388,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -394,6 +397,15 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
   },
   mounted() {
     getBaseInfo().then((res) => {
@@ -578,8 +590,8 @@ export default {
   }
   .warning-info-img {
     position: relative;
-    transform: translateY(-40px);
-    margin-bottom: -40px;
+    transform: translateY(-60px);
+    margin-bottom: -60px;
     img {
       width: 80%;
       margin: 0 auto;
@@ -610,6 +622,7 @@ export default {
   }
   .warning-table-run-time {
     width: 40%;
+    white-space: pre-wrap;
   }
   .warning-table-device,
   .warning-table-info {
@@ -652,6 +665,7 @@ export default {
   width: 50%;
 }
 .building-description {
+  margin-bottom: 20px;
   line-height: 32px;
   font-size: 18px;
   color: #c6def9;

src/components/noise/Index.vue

@@ -17,11 +17,86 @@
       </ShadowContainer>
       <Title text="设备总览"></Title>
       <ShadowContainer class="short-container">
-        <div ref="deviceChart" id="device-chart"></div>
+        <div
+          style="
+            display: flex;
+            height: 100%;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="display: flex">
+            <div class="chart-container">
+              <div ref="deviceChart" id="device-chart"></div>
+              <div class="title">
+                <div class="main-title">
+                  {{ deviceTotal }}
+                </div>
+                <div class="sub-title">总数</div>
+              </div>
+            </div>
+            <div class="chart-legends">
+              <div
+                v-for="(legend, index) in pieChartData"
+                :key="index"
+                :style="{
+                  color: legend.name == '在线总数' ? '#18D7B9' : '#FEBA01',
+                }"
+              >
+                <span
+                  class="rect"
+                  :style="{
+                    background:
+                      legend.name == '在线总数' ? '#18D7B9' : '#FEBA01',
+                  }"
+                ></span>
+                {{ legend.name }} {{ legend.value }}
+              </div>
+            </div>
+          </div>
+        </div>
       </ShadowContainer>
       <Title text="近30日噪音"></Title>
       <ShadowContainer class="short-container">
-        <div ref="noiseChart" id="noise-chart"></div>
+        <div
+          style="
+            display: flex;
+            height: 100%;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="display: flex">
+            <div class="chart-container">
+              <div ref="noiseChart" id="noise-chart"></div>
+              <div class="title">
+                <div class="sub-title">近30日</div>
+                <div class="sub-title">噪音情况</div>
+              </div>
+            </div>
+            <div class="chart-legends">
+              <div
+                v-for="(legend, index) in noiseData"
+                :key="index"
+                :style="{
+                  color: legend.name == '达标' ? '#18D7B9' : '#FF754C',
+                }"
+              >
+                <span
+                  class="rect"
+                  :style="{
+                    background: legend.name == '达标' ? '#18D7B9' : '#FF754C',
+                  }"
+                ></span>
+                {{ legend.name }} {{ legend.value }}天
+              </div>
+            </div>
+          </div>
+        </div>
       </ShadowContainer>
     </div>
     <div class="mid-area">
@@ -37,40 +112,71 @@
             <div class="value" style="color: #ff6151">
               {{ currentMonitorStatis.temperature }}
             </div>
+            <img class="smallcontainer" src="@/assets/noise/temp.png" alt="" />
           </div>
           <div class="humidity">
             <div class="text">湿度/℃</div>
             <div class="value" style="color: #22c3ed">
               {{ currentMonitorStatis.humidity }}
             </div>
+            <img
+              class="smallcontainer"
+              src="@/assets/noise/humidity.png"
+              alt=""
+            />
           </div>
           <div class="windangle">
             <div class="text">风向/°</div>
             <div class="value" style="color: #cc43b7">
               {{ currentMonitorStatis.wind_direction }}
             </div>
+            <img
+              class="smallcontainer"
+              src="@/assets/noise/windangle.png"
+              alt=""
+            />
           </div>
           <div class="windspeed">
             <div class="text">风速/m/s</div>
             <div class="value" style="color: #ffc74c">
               {{ currentMonitorStatis.wind_speed }}
             </div>
+            <img
+              class="smallcontainer"
+              src="@/assets/noise/windspeed.png"
+              alt=""
+            />
           </div>
-          <div class="mid-status">
-            <div>
-              噪音 <span class="value">{{ currentMonitorStatis.noise }}</span>
-              <span class="unit">dB</span>
-            </div>
-            <div>
-              PM2.5 <span class="value">{{ currentMonitorStatis.pm25 }}</span
-              ><span class="unit">ug/m³</span>
-            </div>
-            <div>
-              PM10 <span class="value">{{ currentMonitorStatis.pm10 }}</span
-              ><span class="unit">ug/m³</span>
+          <div style="text-align: center; height: 100%; position: relative">
+            <img
+              src="@/assets/noise/top.png"
+              style="height: 20%; vertical-align: top"
+              alt=""
+            />
+            <div class="mid-status">
+              <div class="mid-status-container">
+                <div>
+                  噪音
+                  <span class="value">{{ currentMonitorStatis.noise }}</span>
+                  <span class="unit">dB</span>
+                </div>
+                <div>
+                  PM2.5
+                  <span class="value">{{ currentMonitorStatis.pm25 }}</span
+                  ><span class="unit">ug/m³</span>
+                </div>
+                <div>
+                  PM10 <span class="value">{{ currentMonitorStatis.pm10 }}</span
+                  ><span class="unit">ug/m³</span>
+                </div>
+              </div>
             </div>
+            <img
+              src="@/assets/noise/bottom.png"
+              style="height: 40%; vertical-align: top"
+              alt=""
+            />
           </div>
-          <img src="@/assets/noise/stats-bg.png" alt="" />
         </div>
         <div class="filters">
           <div
@@ -131,6 +237,8 @@
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
             id="table-scroll"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
           >
             <div
               class="warning-table-column"
@@ -191,6 +299,8 @@ export default {
       lineChart: null,
       page: 1,
       loading: false,
+      deviceTotal: 0,
+      interval1: null,
     };
   },
   computed: {},
@@ -223,68 +333,15 @@ export default {
       pieData.map((item) => {
         total += item.value;
       });
+      this.deviceTotal = total;
       const option = {
-        title: {
-          x: "26%", //X坐标
-          y: "30%",
-          text: total,
-          subtext: "总数",
-          textAlign: "center",
-          textStyle: {
-            //标题样式
-            fontSize: 30,
-            fontWeight: "bolder",
-            color: "#00fcff",
-          },
-          subtextStyle: {
-            //副标题样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          left: "60%",
-          top: "30%",
-          orient: "vertical",
-          itemGap: 20,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 14,
-                align: "left",
-              },
-              b: {
-                fontSize: 20,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = pieData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}} 台`];
-            return arr.join("   ");
-          },
-        },
         series: [
           {
             type: "pie",
-            radius: ["60%", "70%"],
-            center: ["28%", "50%"],
+            radius: ["58%", "70%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -321,61 +378,14 @@ export default {
       const chartData = [...this.noiseData];
       const chart = this.$echarts.init(this.$refs.noiseChart);
       const option = {
-        title: {
-          top: "center", //X坐标
-          left: "27%",
-          text: "近30日\n噪音情况",
-          textAlign: "center",
-          textStyle: {
-            //副标题样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            lineHeight: 24,
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          left: "60%",
-          top: "30%",
-          orient: "vertical",
-          itemGap: 20,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 14,
-                align: "left",
-              },
-              b: {
-                fontSize: 20,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = chartData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}} 天`];
-            return arr.join("   ");
-          },
-        },
+
         series: [
           {
             type: "pie",
-            radius: ["60%", "70%"],
-            center: ["28%", "50%"],
+            radius: ["58%", "70%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -553,11 +563,9 @@ export default {
       }
     },
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
-      //let step = 1
-      element.scrollTop = 0;
+      var that = this;
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -569,7 +577,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -578,6 +586,15 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
   },
   mounted() {
     this.getNoiseData();
@@ -592,27 +609,23 @@ export default {
   padding-bottom: 0;
   height: calc(100% - 24px);
   .side-area {
-    width: 360px;
+    width: 25%;
+    min-width: 400px;
   }
   .mid-area {
-    width: calc(100% - 744px);
+    width: 50%;
     margin: 0 12px;
   }
 }
-.chart-container {
-  position: relative;
-  .custom-chart {
-    position: absolute;
-    width: 30%;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 13%;
-  }
-}
+
 #device-chart,
 #noise-chart {
   width: 100%;
   height: 100%;
+  margin: 0 auto;
+  background: url("@/assets/chart.png") no-repeat;
+  background-size: 50% 50%;
+  background-position: center center;
 }
 .i-type {
   display: flex;
@@ -861,11 +874,6 @@ export default {
   margin: 0 auto;
   max-width: 840px;
   height: 60%;
-  img {
-    width: 100%;
-    height: 100%;
-    vertical-align: top;
-  }
   .text {
     color: #ffffff;
     font-size: 16px;
@@ -878,36 +886,54 @@ export default {
   .temp {
     position: absolute;
     left: 11%;
-    top: 23%;
+    top: 20%;
     transform: translateX(-50%);
   }
   .humidity {
     position: absolute;
     left: 11%;
-    bottom: 34%;
+    bottom: 20%;
     transform: translateX(-50%);
   }
   .windangle {
     position: absolute;
     right: 11%;
-    top: 23%;
+    top: 20%;
     transform: translateX(50%);
   }
   .windspeed {
     position: absolute;
     right: 11%;
-    bottom: 34%;
+    bottom: 20%;
     transform: translateX(50%);
   }
   .mid-status {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    top: 49.5%;
-    line-height: 56px;
+    position: relative;
+    height: calc(40% - 28px);
     font-size: 20px;
     text-align: center;
     color: #c6def9;
+    border: 14px solid #888;
+    width: 50%;
+    margin: 0 auto;
+    background: #081f3b;
+    .mid-status-container {
+      position: absolute;
+      width: 95%;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      line-height: 56px;
+      white-space: nowrap;
+      & > div {
+        border-bottom: 2px solid #114e70;
+
+        margin: 0 auto;
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
     .unit {
       font-size: 14px;
       margin-left: 6px;
@@ -916,6 +942,9 @@ export default {
       font-size: 24px;
       margin-left: 12px;
     }
+    img {
+      vertical-align: top;
+    }
   }
 }
 .filters {
@@ -950,4 +979,55 @@ export default {
 .long-container {
   height: calc(100% - 108px);
 }
+
+.chart-legends {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: calc(100% - 250px);
+  & > div {
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 36px;
+    width: 100%;
+    text-align: left;
+  }
+  .rect {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 250px;
+  height: 250px;
+  .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    text-align: center;
+    transform: translateX(-50%) translateY(-50%);
+    .main-title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #00fcff;
+    }
+    .sub-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}
+.smallcontainer {
+  width: 100px !important;
+  height: inherit !important;
+  transform: translateY(-50%);
+  vertical-align: top;
+}
 </style>
\ No newline at end of file

src/components/projectcheck/Index.vue

@@ -2,8 +2,64 @@
   <div id="project-check">
     <div class="side-area">
       <Title text="本月检查统计"></Title>
-      <ShadowContainer class="long-container">
-        <div id="current-check-stats" ref="currentCheckStatsChart"></div>
+      <ShadowContainer class="short-container">
+        <div
+          style="
+            display: flex;
+            height: 100%;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="display: flex">
+            <div class="chart-container">
+              <div id="current-check-stats" ref="currentCheckStatsChart"></div>
+              <div class="title">
+                <div class="main-title">
+                  {{ monthCheckTotal }}
+                </div>
+                <div class="sub-title">累计检查</div>
+              </div>
+            </div>
+            <div class="chart-legends">
+              <div
+                v-for="(legend, index) in currentMonthCheckData"
+                :key="index"
+                :style="{
+                  color:
+                    legend.name == '无问题'
+                      ? '#18D7B9'
+                      : legend.name == '待整改'
+                      ? '#E39B36'
+                      : legend.name == '复查中'
+                      ? '#5399F7'
+                      : legend.name == '已整改'
+                      ? '#E25E80'
+                      : '',
+                }"
+              >
+                <span
+                  class="rect"
+                  :style="{
+                    background:
+                      legend.name == '无问题'
+                        ? '#18D7B9'
+                        : legend.name == '待整改'
+                        ? '#E39B36'
+                        : legend.name == '复查中'
+                        ? '#5399F7'
+                        : legend.name == '已整改'
+                        ? '#E25E80'
+                        : '',
+                  }"
+                ></span>
+                {{ legend.name }} {{ legend.value }}
+              </div>
+            </div>
+          </div>
+        </div>
       </ShadowContainer>
       <Title text="检查事项隐患排行"></Title>
       <ShadowContainer class="short-container">
@@ -18,6 +74,8 @@
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
             id="table-scroll"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
           >
             <div
               class="warning-table-column"
@@ -56,8 +114,8 @@
       </ShadowContainer>
     </div>
     <div class="right-area">
-      <Title text="月检测概况" type="long"></Title>
-      <ShadowContainer class="long-container">
+      <Title text="月检查概况" type="long"></Title>
+      <ShadowContainer class="short-container">
         <div class="time-selector">
           <i class="el-icon-arrow-left" @click="getPrevMonth"></i>
           <span>{{ year }}年{{ month }}月</span>
@@ -67,19 +125,200 @@
           <div class="left-pie-charts">
             <div class="chart-angle">
               <div class="chart-title">项目自查</div>
-              <div id="project-check-chart" ref="projectCheck"></div>
+              <div
+                style="
+                  display: flex;
+                  height: calc(100% - 30px);
+                  flex-wrap: wrap;
+                  align-items: center;
+                  justify-content: center;
+                  flex-direction: column;
+                  background: linear-gradient(
+                    90deg,
+                    rgba(39, 172, 251, 0.05) 0%,
+                    rgba(39, 172, 251, 0) 50%,
+                    rgba(39, 172, 251, 0.05) 100%
+                  );
+                "
+              >
+                <div style="display: flex">
+                  <div class="chart-small-container">
+                    <div id="project-check-chart" ref="projectCheck"></div>
+                    <div class="title">
+                      <div class="main-title">
+                        {{ projectTotal }}
+                      </div>
+                      <div class="sub-title">检查量</div>
+                    </div>
+                  </div>
+                  <div class="chart-legends">
+                    <div
+                      v-for="(legend, index) in monthCheckData.project_data"
+                      :key="index"
+                      :style="{
+                        color: legend.name == '有隐患' ? '#FEBA01' : '#18D7B9',
+                      }"
+                    >
+                      <span
+                        class="rect"
+                        :style="{
+                          background:
+                            legend.name == '有隐患' ? '#FEBA01' : '#18D7B9',
+                        }"
+                      ></span>
+                      {{ legend.name }} {{ legend.value }}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="chart-angle">
               <div class="chart-title">企业检查</div>
-              <div id="enterprise-check" ref="enterpriseCheck"></div>
+              <div
+                style="
+                  display: flex;
+                  height: calc(100% - 30px);
+                  flex-wrap: wrap;
+                  align-items: center;
+                  justify-content: center;
+                  flex-direction: column;
+                  background: linear-gradient(
+                    90deg,
+                    rgba(39, 172, 251, 0.05) 0%,
+                    rgba(39, 172, 251, 0) 50%,
+                    rgba(39, 172, 251, 0.05) 100%
+                  );
+                "
+              >
+                <div style="display: flex">
+                  <div class="chart-small-container">
+                    <div id="enterprise-check" ref="enterpriseCheck"></div>
+                    <div class="title">
+                      <div class="main-title">
+                        {{ enterpriseTotal }}
+                      </div>
+                      <div class="sub-title">检查量</div>
+                    </div>
+                  </div>
+                  <div class="chart-legends">
+                    <div
+                      v-for="(legend, index) in monthCheckData.company_data"
+                      :key="index"
+                      :style="{
+                        color: legend.name == '有隐患' ? '#FC6E03' : '#18D7B9',
+                      }"
+                    >
+                      <span
+                        class="rect"
+                        :style="{
+                          background:
+                            legend.name == '有隐患' ? '#FC6E03' : '#18D7B9',
+                        }"
+                      ></span>
+                      {{ legend.name }} {{ legend.value }}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="chart-angle">
               <div class="chart-title">监督检测</div>
-              <div id="supervise-check" ref="superviseCheck"></div>
+              <div
+                style="
+                  display: flex;
+                  height: calc(100% - 30px);
+                  flex-wrap: wrap;
+                  align-items: center;
+                  justify-content: center;
+                  flex-direction: column;
+                  background: linear-gradient(
+                    90deg,
+                    rgba(39, 172, 251, 0.05) 0%,
+                    rgba(39, 172, 251, 0) 50%,
+                    rgba(39, 172, 251, 0.05) 100%
+                  );
+                "
+              >
+                <div style="display: flex">
+                  <div class="chart-small-container">
+                    <div id="supervise-check" ref="superviseCheck"></div>
+                    <div class="title">
+                      <div class="main-title">
+                        {{ superviceTotal }}
+                      </div>
+                      <div class="sub-title">检查量</div>
+                    </div>
+                  </div>
+                  <div class="chart-legends">
+                    <div
+                      v-for="(legend, index) in monthCheckData.supervise_data"
+                      :key="index"
+                      :style="{
+                        color: legend.name == '有隐患' ? '#E86365' : '#18D7B9',
+                      }"
+                    >
+                      <span
+                        class="rect"
+                        :style="{
+                          background:
+                            legend.name == '有隐患' ? '#E86365' : '#18D7B9',
+                        }"
+                      ></span>
+                      {{ legend.name }} {{ legend.value }}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="chart-angle">
               <div class="chart-title">移动巡查</div>
-              <div id="move-check" ref="moveCheck"></div>
+
+              <div
+                style="
+                  display: flex;
+                  height: calc(100% - 30px);
+                  flex-wrap: wrap;
+                  align-items: center;
+                  justify-content: center;
+                  flex-direction: column;
+                  background: linear-gradient(
+                    90deg,
+                    rgba(39, 172, 251, 0.05) 0%,
+                    rgba(39, 172, 251, 0) 50%,
+                    rgba(39, 172, 251, 0.05) 100%
+                  );
+                "
+              >
+                <div style="display: flex">
+                  <div class="chart-small-container">
+                    <div id="move-check" ref="moveCheck"></div>
+                    <div class="title">
+                      <div class="main-title">
+                        {{ moveTotal }}
+                      </div>
+                      <div class="sub-title">检查量</div>
+                    </div>
+                  </div>
+                  <div class="chart-legends">
+                    <div
+                      v-for="(legend, index) in monthCheckData.move_data"
+                      :key="index"
+                      :style="{
+                        color: legend.name == '有隐患' ? '#CD4091' : '#18D7B9',
+                      }"
+                    >
+                      <span
+                        class="rect"
+                        :style="{
+                          background:
+                            legend.name == '有隐患' ? '#CD4091' : '#18D7B9',
+                        }"
+                      ></span>
+                      {{ legend.name }} {{ legend.value }}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div id="right-question-chart" ref="questionBarChart"></div>
@@ -154,12 +393,22 @@ export default {
       blackspotRanking: [],
       currentMonthCheckData: [],
       blackSpotPage: 1,
-      monthCheckData: {},
+      monthCheckData: {
+        project_data: [],
+        company_data: [],
+        supervise_data: [],
+        move_data: [],
+      },
       recordList: [],
       correctList: [],
       correctPage: 1,
       correctDialogVisible: false,
       correctDetail: {},
+      monthCheckTotal: 0,
+      projectTotal: 0,
+      enterpriseTotal: 0,
+      superviceTotal: 0,
+      moveTotal: 0,
     };
   },
   methods: {
@@ -188,69 +437,16 @@ export default {
       chartData.map((item) => {
         total += item.value;
       });
+      this.monthCheckTotal = total;
       const option = {
-        title: {
-          x: "27%", //X坐标
-          y: "40%",
-          text: total,
-          subtext: "累计检查",
-          textAlign: "center",
-          textStyle: {
-            //标题样式
-            fontSize: 30,
-            fontWeight: "bolder",
-            color: "#00fcff",
-          },
-          subtextStyle: {
-            //副标题样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            lineHeight: 24,
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          right: "10%",
-          top: "30%",
-          orient: "vertical",
-          itemGap: 20,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 14,
-                align: "left",
-              },
-              b: {
-                fontSize: 20,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = chartData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}}`];
-            return arr.join("   ");
-          },
-        },
+
         series: [
           {
             type: "pie",
-            radius: ["45%", "55%"],
-            center: ["28%", "50%"],
+            radius: ["58%", "70%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -328,6 +524,30 @@ export default {
           this.month < 10 ? "0" + this.month : this.month
         }`,
       }).then((res) => {
+        let projectTotal = 0;
+        res.data.project_data.map((item) => {
+          projectTotal += item.value;
+        });
+        this.projectTotal = projectTotal;
+
+        let enterpriseTotal = 0;
+        res.data.company_data.map((item) => {
+          enterpriseTotal += item.value;
+        });
+        this.enterpriseTotal = enterpriseTotal;
+
+        let superviceTotal = 0;
+        res.data.supervise_data.map((item) => {
+          superviceTotal += item.value;
+        });
+        this.superviceTotal = superviceTotal;
+
+        let moveTotal = 0;
+        res.data.move_data.map((item) => {
+          moveTotal += item.value;
+        });
+        this.moveTotal = moveTotal;
+
         this.monthCheckData = res.data;
         this.renderSmallChart(
           "project-check-chart",
@@ -359,71 +579,19 @@ export default {
     renderSmallChart(id, ref, data, pColor) {
       const chartData = [...data];
       const chart = this.$echarts.init(this.$refs[`${ref}`]);
-      let total = 0;
-      chartData.map((item) => {
-        total += item.value;
-      });
+      // let total = 0;
+      // chartData.map((item) => {
+      //   total += item.value;
+      // });
       const option = {
-        title: {
-          x: "26%", //X坐标
-          y: "30%",
-          text: total,
-          subtext: "检查量",
-          textAlign: "center",
-          textStyle: {
-            //标题样式
-            fontSize: 18,
-            fontWeight: "bolder",
-            color: "#00fcff",
-          },
-          subtextStyle: {
-            //副标题样式
-            fontSize: 13,
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          right: "5%",
-          top: "28%",
-          orient: "vertical",
-          itemGap: 20,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 12,
-                align: "left",
-              },
-              b: {
-                fontSize: 14,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = chartData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}}`];
-            return arr.join("   ");
-          },
-        },
+
         series: [
           {
             type: "pie",
-            radius: ["65%", "75%"],
-            center: ["28%", "50%"],
+            radius: ["58%", "70%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -543,11 +711,10 @@ export default {
       });
     },
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
-      //let step = 1
-      element.scrollTop = 0;
+      var that = this;
+
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -559,7 +726,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -568,6 +735,15 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
   },
   mounted() {
     getCurrentMonthCheckStats().then((res) => {
@@ -630,37 +806,12 @@ export default {
       #enterprise-check,
       #supervise-check,
       #move-check {
-        width: 100%;
-        height: calc(100% - 30px);
-        background: linear-gradient(
-          90deg,
-          rgba(39, 172, 251, 0.05) 0%,
-          rgba(39, 172, 251, 0) 50%,
-          rgba(39, 172, 251, 0.05) 100%
-        );
-      }
-    }
-    .chart-container {
-      width: 100%;
-      height: 130px;
-      background: linear-gradient(
-        90deg,
-        rgba(39, 172, 251, 0.05) 0%,
-        rgba(39, 172, 251, 0) 50%,
-        rgba(39, 172, 251, 0.05) 100%
-      );
-      margin-bottom: 12px;
-      position: relative;
-      div {
         width: 100%;
         height: 100%;
-      }
-      .custom-chart {
-        position: absolute;
-        width: 20%;
-        left: 18%;
-        transform: translateY(-50%);
-        top: 50%;
+        margin: 0 auto;
+        background: url("@/assets/chart.png") no-repeat;
+        background-size: 50% 50%;
+        background-position: center center;
       }
     }
   }
@@ -785,11 +936,81 @@ export default {
 #current-check-stats {
   width: 100%;
   height: 100%;
+  margin: 0 auto;
+  background: url("@/assets/chart.png") no-repeat;
+  background-size: 50% 50%;
+  background-position: center center;
 }
-.long-container {
-  height: calc(53% - 50px);
-}
+
 .short-container {
-  height: calc(32% - 50px);
+  height: calc(50% - 118px);
+}
+
+.chart-legends {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: calc(100% - 260px);
+  & > div {
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 36px;
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+  }
+  .rect {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 260px;
+  height: 260px;
+  .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    text-align: center;
+    transform: translateX(-50%) translateY(-50%);
+    .main-title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #00fcff;
+    }
+    .sub-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}
+.chart-small-container {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    text-align: center;
+    transform: translateX(-50%) translateY(-50%);
+    .main-title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #00fcff;
+    }
+    .sub-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
 }
 </style>
\ No newline at end of file

src/components/realname/Index.vue

@@ -85,7 +85,12 @@
     <div class="mid-area">
       <Title text="实时考勤"></Title>
       <ShadowContainer class="long-container">
-        <div class="warp" id="warp-list">
+        <div
+          class="warp"
+          id="warp-list"
+          @mouseenter="clearScroll1"
+          @mouseleave="reScroll1"
+        >
           <div
             class="person-check"
             v-for="(person, index) in checkList"
@@ -123,7 +128,55 @@
       </ShadowContainer>
       <Title text="人员地域分布"></Title>
       <ShadowContainer class="short-container">
-        <div ref="areaChart" id="area-chart"></div>
+        <div
+          style="
+            display: flex;
+            height: 100%;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="display: flex">
+            <div class="chart-container">
+              <div ref="areaChart" id="area-chart"></div>
+              <div class="title">
+                <div class="main-title">
+                  {{ areaTotal }}
+                </div>
+                <div class="sub-title">总人数</div>
+              </div>
+            </div>
+            <div class="chart-legends">
+              <div
+                v-for="(legend, index) in personAreaDetail"
+                :key="index"
+                :style="{
+                  color:
+                    legend.name == '绍兴市'
+                      ? '#FEBA01'
+                      : legend.name == '省内市外'
+                      ? '#03D2FF'
+                      : '#00FFDE',
+                }"
+              >
+                <span
+                  class="rect"
+                  :style="{
+                    background:
+                      legend.name == '绍兴市'
+                        ? '#FEBA01'
+                        : legend.name == '省内市外'
+                        ? '#03D2FF'
+                        : '#00FFDE',
+                  }"
+                ></span>
+                {{ legend.name }} {{ legend.value }}
+              </div>
+            </div>
+          </div>
+        </div>
       </ShadowContainer>
     </div>
     <div class="rt-area" id="reset-area1">
@@ -144,7 +197,12 @@
         <div>
           <Title text="工种分布"></Title>
           <ShadowContainer>
-            <div class="work-types" id="table-scroll">
+            <div
+              class="work-types"
+              id="table-scroll"
+              @mouseenter="clearScroll2"
+              @mouseleave="reScroll2"
+            >
               <div
                 v-for="(iType, index) in industryTypes"
                 :key="index"
@@ -209,6 +267,9 @@ export default {
       industryTypesTotal: 0,
       date: "",
       intervalTimer: null,
+      areaTotal: 0,
+      interval1: null,
+      interval2: null,
     };
   },
   methods: {
@@ -230,68 +291,16 @@ export default {
       areaData.map((item) => {
         total += item.value;
       });
+      this.areaTotal = total;
       const option = {
-        title: {
-          x: "26.5%", //X坐标
-          y: "36%",
-          text: total,
-          subtext: "总人数",
-          textAlign: "center",
-          textStyle: {
-            //标题样式
-            fontSize: 30,
-            fontWeight: "bolder",
-            color: "#00fcff",
-          },
-          subtextStyle: {
-            //副标题样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          right: "0%",
-          top: "20%",
-          orient: "vertical",
-          itemGap: 40,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 12,
-                align: "left",
-              },
-              b: {
-                fontSize: 12,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = areaData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}} 人`];
-            return arr.join("   ");
-          },
-        },
+
         series: [
           {
             type: "pie",
-            radius: ["50%", "60%"],
-            center: ["28%", "50%"],
+            radius: ["58%", "70%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -302,7 +311,19 @@ export default {
               position: "center",
             },
 
-            data: areaData,
+            data: areaData.map((item) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color:
+                    item.name == "绍兴市"
+                      ? "#FEBA01"
+                      : item.name == "省内市外"
+                      ? "#03D2FF"
+                      : "#00FFDE",
+                },
+              };
+            }),
           },
         ],
       };
@@ -646,6 +667,10 @@ export default {
             this.checkList = [...res.data];
           });
         }, 60000);
+        this.$nextTick(() => {
+          const element = document.getElementById("warp-list");
+          this.autoScroll1(1, 50, 1500, element);
+        });
       });
 
       getPersonAreaStatus().then((res) => {
@@ -675,16 +700,38 @@ export default {
         );
         this.$nextTick(() => {
           const element = document.getElementById("table-scroll");
-          this.autoScroll(1, 50, 1500, element);
+          this.autoScroll2(1, 50, 1500, element);
         });
       });
     },
-    autoScroll(stepLength, speed, delay, element) {
-      let interval;
-      //let step = 1
-      element.scrollTop = 0;
+    autoScroll1(stepLength, speed, delay, element) {
+      var that = this;
+      function start() {
+        that.interval1 = 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(that.interval1);
+          setTimeout(start, delay);
+        }
+      }
+      if (element.offsetHeight !== element.scrollHeight) {
+        // 元素内容没有溢出时，不触发
+        setTimeout(start, delay);
+      }
+    },
+    autoScroll2(stepLength, speed, delay, element) {
+      var that = this;
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval2 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -696,7 +743,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval2);
           setTimeout(start, delay);
         }
       }
@@ -705,6 +752,24 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll1() {
+      clearInterval(this.interval1);
+    },
+    reScroll1() {
+      this.$nextTick(() => {
+        const element = document.getElementById("warp-list");
+        this.autoScroll1(1, 50, 1500, element);
+      });
+    },
+    clearScroll2() {
+      clearInterval(this.interval2);
+    },
+    reScroll2() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll2(1, 50, 1500, element);
+      });
+    },
   },
   mounted() {
     this.getTime();
@@ -832,6 +897,10 @@ export default {
 #area-chart {
   width: 100%;
   height: 100%;
+  margin: 0 auto;
+  background: url("@/assets/chart.png") no-repeat;
+  background-size: 50% 50%;
+  background-position: center center;
 }
 .chart-title {
   background: rgba(40, 137, 195, 0.2);
@@ -936,4 +1005,49 @@ export default {
   margin: 8px 0;
   background: #114e70;
 }
+
+.chart-legends {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: calc(100% - 200px);
+  & > div {
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 36px;
+    width: 100%;
+    text-align: left;
+  }
+  .rect {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    text-align: center;
+    transform: translateX(-50%) translateY(-50%);
+    .main-title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #00fcff;
+    }
+    .sub-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}
 </style>
\ No newline at end of file

src/components/safecap/mapDialog.vue

@@ -120,6 +120,33 @@ export default {
           strokeColor: "#3366bb",
           strokeWeight: 8,
         });
+
+        var startcircleMarker = new this.AMap.CircleMarker({
+          center: paths[0],
+          radius: 8, //3D视图下，CircleMarker半径不要超过64px
+          strokeColor: "green",
+          strokeWeight: 2,
+          strokeOpacity: 0.5,
+          fillColor: "green",
+          zIndex: 10,
+          bubble: true,
+          cursor: "pointer",
+          clickable: true,
+        });
+        startcircleMarker.setMap(this.map);
+        var endcircleMarker = new this.AMap.CircleMarker({
+          center: paths[paths.length - 1],
+          radius: 8, //3D视图下，CircleMarker半径不要超过64px
+          strokeColor: "red",
+          strokeWeight: 2,
+          strokeOpacity: 0.5,
+          fillColor: "red",
+          zIndex: 10,
+          bubble: true,
+          cursor: "pointer",
+          clickable: true,
+        });
+        endcircleMarker.setMap(this.map);
       });
     },
   },

src/components/tower/Index.vue

@@ -3,7 +3,46 @@
     <div class="side-area">
       <Title text="设备总览"></Title>
       <ShadowContainer class="short-container">
-        <div ref="deviceChart" id="device-chart"></div>
+        <div
+          style="
+            display: flex;
+            height: 100%;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="display: flex">
+            <div class="chart-container">
+              <div ref="deviceChart" id="device-chart"></div>
+              <div class="title">
+                <div class="main-title">
+                  {{ deviceTotal }}
+                </div>
+                <div class="sub-title">总数</div>
+              </div>
+            </div>
+            <div class="chart-legends">
+              <div
+                v-for="(legend, index) in pieChartData"
+                :key="index"
+                :style="{
+                  color: legend.name == '在线总数' ? '#2980FF' : '#AEE4F8',
+                }"
+              >
+                <span
+                  class="rect"
+                  :style="{
+                    background:
+                      legend.name == '在线总数' ? '#2980FF' : '#AEE4F8',
+                  }"
+                ></span>
+                {{ legend.name }} {{ legend.value }}
+              </div>
+            </div>
+          </div>
+        </div>
       </ShadowContainer>
       <Title text="各塔吊24h力矩百分比统计"></Title>
       <ShadowContainer class="short-container">
@@ -17,7 +56,7 @@
     <div id="mid-area">
       <div class="cover-area"></div>
       <div class="towerwindow" v-if="towerWindowVisible">
-        <div class="tower-description">
+        <div class="tower-description" @click="openDetailDialog">
           <img
             :src="
               windowData.is_online == 1
@@ -34,14 +73,6 @@
             ]"
             >{{ windowData.is_online_text }}</span
           >
-          <span @click="openDetailDialog" class="name" style="cursor: pointer"
-            >详情
-            <img
-              style="width: 20px; vertical-align: top; margin-top: 4px"
-              src="@/assets/tower/arrow.png"
-              alt=""
-            />
-          </span>
         </div>
         <!-- <div class="recent-open">最近使用:{{ windowData.log_time }}</div> -->
       </div>
@@ -95,6 +126,8 @@
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
             id="table-scroll"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
           >
             <div
               class="warning-table-column"
@@ -174,6 +207,8 @@ export default {
       deviceData: {},
       markerArray: [],
       page: 1,
+      deviceTotal: 0,
+      interval1: null,
     };
   },
   methods: {
@@ -184,68 +219,15 @@ export default {
       pieData.map((item) => {
         total += item.value;
       });
+      this.deviceTotal = total;
       const option = {
-        title: {
-          x: "27%", //X坐标
-          y: "30%",
-          text: total,
-          subtext: "总数",
-          textAlign: "center",
-          textStyle: {
-            //标题样式
-            fontSize: 30,
-            fontWeight: "bolder",
-            color: "#00fcff",
-          },
-          subtextStyle: {
-            //副标题样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            color: "rgba(255,255,255,0.7)",
-          },
-        },
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          itemHeight: 12,
-          itemWidth: 12,
-          icon: "rect",
-          right: "10%",
-          top: "25%",
-          orient: "vertical",
-          itemGap: 40,
-          textStyle: {
-            color: "inherit",
-            rich: {
-              a: {
-                fontSize: 14,
-                align: "left",
-              },
-              b: {
-                fontSize: 20,
-                align: "left",
-                lineHeight: 25,
-              },
-            },
-          },
-          formatter: (name) => {
-            let data = pieData;
-            let target;
-            for (let i = 0, l = data.length; i < l; i++) {
-              if (data[i].name == name) {
-                target = data[i].value;
-              }
-            }
-            let arr = [`{a|${name}}`, `{b|${target}} 台`];
-            return arr.join("   ");
-          },
-        },
         series: [
           {
             type: "pie",
-            radius: ["60%", "70%"],
-            center: ["28%", "50%"],
+            radius: ["58%", "70%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 20,
@@ -682,11 +664,9 @@ export default {
       }
     },
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
-      //let step = 1
-      element.scrollTop = 0;
+      var that = this;
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -698,7 +678,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -707,6 +687,15 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
   },
   mounted() {
     this.getTowerData();
@@ -771,19 +760,13 @@ export default {
   width: 100%;
   height: 100%;
 }
-.chart-container {
-  position: relative;
-  .custom-chart {
-    position: absolute;
-    width: 25%;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 15.5%;
-  }
-}
 #device-chart {
   width: 100%;
   height: 100%;
+  margin: 0 auto;
+  background: url("@/assets/chart.png") no-repeat;
+  background-size: 50% 50%;
+  background-position: center center;
 }
 .tower-name {
   background: rgba(255, 175, 81, 0.1);
@@ -968,6 +951,7 @@ export default {
   }
   .warning-table-run-time {
     width: 40%;
+    white-space: pre-wrap;
   }
   .warning-table-device,
   .warning-table-info {
@@ -996,4 +980,48 @@ export default {
   box-shadow: #1f81ef 0px 0px 8px inset;
   pointer-events: none;
 }
+.chart-legends {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: calc(100% - 200px);
+  & > div {
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 36px;
+    width: 100%;
+    text-align: left;
+  }
+  .rect {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    text-align: center;
+    transform: translateX(-50%) translateY(-50%);
+    .main-title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #00fcff;
+    }
+    .sub-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}
 </style>
\ No newline at end of file

src/components/tower/deviceDialog.vue

@@ -488,7 +488,7 @@ export default {
   }
 }
 .base-info {
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 #video-container {
   width: 100%;

src/components/tower/deviceDialog2.vue

@@ -255,7 +255,7 @@ export default {
 .base-info {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 #video-container {
   width: calc(40% - 20px);

src/components/unloadingplatform/Index.vue

@@ -113,6 +113,8 @@
             v-infinite-scroll="load"
             :infinite-scroll-distance="1"
             id="table-scroll"
+            @mouseenter="clearScroll"
+            @mouseleave="reScroll"
           >
             <div
               class="warning-table-column"
@@ -185,6 +187,7 @@ export default {
       batteryChart: null,
       weightChart: null,
       page: 1,
+      interval1: null,
     };
   },
   methods: {
@@ -447,11 +450,9 @@ export default {
       }
     },
     autoScroll(stepLength, speed, delay, element) {
-      let interval;
-      //let step = 1
-      element.scrollTop = 0;
+      var that = this;
       function start() {
-        interval = setInterval(scrolling, speed);
+        that.interval1 = setInterval(scrolling, speed);
         element.scrollTop += stepLength;
       }
       function scrolling() {
@@ -463,7 +464,7 @@ export default {
           element.scrollTop === element.scrollHeight - element.offsetHeight
         ) {
           element.scrollTop = 0;
-          clearInterval(interval);
+          clearInterval(that.interval1);
           setTimeout(start, delay);
         }
       }
@@ -472,6 +473,15 @@ export default {
         setTimeout(start, delay);
       }
     },
+    clearScroll() {
+      clearInterval(this.interval1);
+    },
+    reScroll() {
+      this.$nextTick(() => {
+        const element = document.getElementById("table-scroll");
+        this.autoScroll(1, 50, 1500, element);
+      });
+    },
   },
 
   mounted() {
@@ -655,8 +665,8 @@ export default {
   }
   .warning-info-img {
     position: relative;
-    transform: translateY(-40px);
-    margin-bottom: -40px;
+    transform: translateY(-60px);
+    margin-bottom: -60px;
     img {
       width: 80%;
       margin: 0 auto;
@@ -686,11 +696,12 @@ export default {
     }
   }
   .warning-table-run-time {
-    width: 40%;
+    width: 30%;
+    white-space: pre-wrap;
   }
   .warning-table-device,
   .warning-table-info {
-    width: 20%;
+    width: 25%;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -733,6 +744,7 @@ export default {
   font-size: 18px;
   color: #c6def9;
   padding-bottom: 16px;
+  margin-bottom: 20px;
   border-bottom: 1px solid #7a8fad;
   img {
     width: 32px;