From c92e37c192f79ac5a907c298144cc89e348a093b Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Tue, 29 Oct 2024 09:45:49 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E9=A6=96=E9=A1=B5=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=EF=BC=8C=E4=BA=A4=E5=AE=89=E4=BA=8B=E4=BB=B6=E8=81=94?=
 =?UTF-8?q?=E8=B0=83=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/xj/screen/index.js                    |  19 ++
 src/api/xj/screen/traffic-screen.js           |  47 +++
 src/components/map/fssm-map.vue               |   5 +
 src/layout/components/Navbar.vue              | 128 +++++---
 src/views/big-screen/index.vue                | 125 ++++---
 .../traffic-components/traffic-emergency.vue  |  57 +---
 .../traffic-components/traffic-rank.vue       |  33 +-
 .../traffic-components/traffic-safety.vue     |  34 +-
 .../traffic-components/traffic-statistic.vue  |  75 +++--
 .../traffic-components/traffic-trend.vue      | 308 ++++++------------
 src/views/index.vue                           |  44 +--
 src/views/login.vue                           | 163 ++++++---
 .../task-management/components/task-view.vue  | 120 ++++++-
 13 files changed, 692 insertions(+), 466 deletions(-)
 create mode 100644 src/api/xj/screen/traffic-screen.js

diff --git a/src/api/xj/screen/index.js b/src/api/xj/screen/index.js
index b3d75fc..0c12d6e 100644
--- a/src/api/xj/screen/index.js
+++ b/src/api/xj/screen/index.js
@@ -10,3 +10,22 @@ export function selectTypeList(query) {
   }
 
 
+// 获取地图打点数据接口
+export function mapPointList(query) {
+    return request({
+      url: "/bigscreen/getMapPoint",
+      method: "get",
+      params: query,
+    });
+  }
+
+
+// 获取地图绘制线段数据接口
+export function mapPciList(query) {
+    return request({
+      url: "/bigscreen/roadPci",
+      method: "get",
+      params: query,
+    });
+  }
+
diff --git a/src/api/xj/screen/traffic-screen.js b/src/api/xj/screen/traffic-screen.js
new file mode 100644
index 0000000..77af00b
--- /dev/null
+++ b/src/api/xj/screen/traffic-screen.js
@@ -0,0 +1,47 @@
+import request from "@/utils/request";
+
+// 交安事件接口
+export function safetyData(query) {
+  return request({
+    url: "/bigscreen/getEventInfo",
+    method: "get",
+    params: query,
+  });
+}
+
+//  交安事件趋势接口
+export function eventLog(query) {
+  return request({
+    url: "/bigscreen/getEventLog",
+    method: "get",
+    params: query,
+  });
+}
+
+//  交安事件统计接口
+export function statisticData(query) {
+  return request({
+    url: "/bigscreen/eventStatus",
+    method: "get",
+    params: query,
+  });
+}
+
+// 交安事件排名接口
+export function rankCount(query) {
+    return request({
+      url: "/bigscreen/getEventCountRanking",
+      method: "get",
+      params: query,
+    });
+  }
+
+
+// 交安突发事件
+export function emergencyData(query) {
+    return request({
+      url: "/bigscreen/getEmergencyEvent",
+      method: "get",
+      params: query,
+    });
+  }
\ No newline at end of file
diff --git a/src/components/map/fssm-map.vue b/src/components/map/fssm-map.vue
index 63b3d16..32c3d97 100644
--- a/src/components/map/fssm-map.vue
+++ b/src/components/map/fssm-map.vue
@@ -254,6 +254,11 @@ export default {
           map.getTargetElement().style.cursor = "auto";
         }
       });
+      // 地图缩放级别事件
+      map.on("moveend",(e)=> {
+        const zoom = map.getView().getZoom().toFixed(); //获取当前地图的缩放级别
+        this.$emit("map-moveend", zoom);
+      });
       // 图层选择事件
       let selectSingClick = new Select({ style: null });
       map.addInteraction(selectSingClick);
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index e501a0b..355457f 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,12 +1,24 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <breadcrumb
+      id="breadcrumb-container"
+      class="breadcrumb-container"
+      v-if="!topNav"
+    />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
+        <div class="menu-return">
+          <i class="el-icon-data-analysis" @click="goBigScreen"></i>
+        </div>
         <search id="header-search" class="right-menu-item" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -14,12 +26,14 @@
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <img :src="avatar" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -39,15 +53,15 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
 
 export default {
   components: {
@@ -58,48 +72,50 @@ export default {
     SizeSelect,
     Search,
     RuoYiGit,
-    RuoYiDoc
+    RuoYiDoc,
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
+    ...mapGetters(["sidebar", "avatar", "device"]),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
-        })
-      }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "showSettings",
+          value: val,
+        });
+      },
     },
     topNav: {
       get() {
-        return this.$store.state.settings.topNav
-      }
-    }
+        return this.$store.state.settings.topNav;
+      },
+    },
   },
   methods: {
+    /* 点击跳转大屏页面 */
+    goBigScreen(){
+      this.$router.push("/screen")
+    },
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            location.href = "/index";
+          });
         })
-      }).catch(() => {});
-    }
-  }
-}
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -108,18 +124,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -138,14 +154,26 @@ export default {
   }
 
   .right-menu {
-    float: right;
     height: 100%;
+    display: flex;
+    float: right;
     line-height: 50px;
 
     &:focus {
       outline: none;
     }
 
+    .menu-return {
+      height: 100%;
+      margin-right: 0.5rem;
+
+      i {
+        cursor: pointer;
+        font-size: 1.3rem;
+        font-weight: bold;
+      }
+    }
+
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;
@@ -156,10 +184,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue
index f5fcd64..70e4082 100644
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-28 09:50:01
+ * @LastEditTime: 2024-10-29 09:40:35
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -83,7 +83,7 @@
         <!-- 左侧控制 -->
         <div class="road-select">
           <!-- 左上角病害筛查 -->
-          <div class="road-div" v-if="mapClick === '2'" @click="clickImg">
+          <div class="road-div" v-if="mapClick === 'defect'" @click="clickImg">
             <span>病害筛查</span>
           </div>
           <!-- 返回图片底图 -->
@@ -119,9 +119,8 @@
               v-for="(item, index) in mapCareList"
               :key="`map-care-${index}`"
               :style="{ left: item.left, top: item.top }"
-              @click="changeMap(false, item)"
             >
-              <span>{{ item.name }}</span>
+              <span @click="changeMap(false, item)">{{ item.name }}</span>
             </div>
           </div>
         </div>
@@ -129,6 +128,7 @@
         <fssm-map
           v-if="!showImgBk"
           ref="roadMap"
+          @map-moveend="mapMoveend"
           @map-zoom="getZoom"
           @feature-select="featureSelect"
         ></fssm-map>
@@ -207,7 +207,11 @@ import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
 import ImgDialog from "./components/img-dialog.vue";
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
 // 接口
-import { selectTypeList } from "@/api/xj/screen/index";
+import {
+  selectTypeList,
+  mapPointList,
+  mapPciList,
+} from "@/api/xj/screen/index";
 export default {
   name: "BigScreen",
   components: {
@@ -306,9 +310,9 @@ export default {
       // 切换地图图标类别按钮
       changeMapBtn: [
         { name: "巡查车", click: "1" },
-        { name: "病害", click: "2" },
-        { name: "路产", click: "3" },
-        { name: "事件", click: "4" },
+        { name: "病害", click: "defect" },
+        { name: "路产", click: "equipment" },
+        { name: "事件", click: "event" },
       ],
       /* 具体icon类别 */
       iconTypeList: [],
@@ -441,23 +445,28 @@ export default {
     },
     /* 点击图片点位切换地图事件 */
     changeMap(boolen, value) {
-      this.mapZoom = "";
       this.showImgBk = boolen;
-      // 默认点击的图标是巡查车
-      this.changeIconType("1");
       if (!boolen) {
+        // 默认点击的图标是巡查车
+        this.changeIconType("defect");
+      } else {
+        this.mapClick = "";
         this.mapZoom = "";
-        this.getZoom("10");
       }
     },
     /* 获取地图点位信息 */
     getCenterPiont() {
-      this.centerPiont = [
-        [123.30297096718999, 41.87942945541742],
-        [123.08770760049077, 41.99409925522211],
-        [123.6210023341045, 41.94237193236056],
-      ];
-      this.drawPoint();
+      // 如果当前已经有打点坐标
+      if (!this.clusters) {
+        mapPointList({ type: this.mapClick }).then(({ code, data }) => {
+          if (code === 200) {
+            this.centerPiont = data.map((item) => {
+              return [item.geometry[0], item.geometry[1]];
+            });
+            this.drawPoint();
+          }
+        });
+      }
     },
     /* 绘制地图点位 */
     drawPoint() {
@@ -485,8 +494,8 @@ export default {
         features.push(feature);
       });
       const clusterSource = new Cluster({
-        distance: 200,
-        minDistance: 20,
+        distance: 30,
+        minDistance: 30,
         source: new VectorSource({
           features,
         }),
@@ -527,21 +536,18 @@ export default {
     },
     /* 获取地图线段点位信息 */
     getLinePoint() {
-      this.lineString = [
-        [
-          [123.32282646995006, 41.97498761493642],
-          [123.35200891450947, 41.973156567233836],
-          [123.37958916875502, 41.97956525514763],
-          [123.39286432222431, 42.0021101177337],
-          [123.40184182160729, 42.02952420024438],
-          [123.4845914544503, 42.03583748930991],
-        ],
-        [
-          [122.5518798295274, 42.19039770874923],
-          [123.7871925821671, 42.236903621119346],
-        ],
-      ];
-      this.drawLine();
+      if (!this.markLayerLines) {
+        mapPciList().then(({ code, data }) => {
+          if (code === 200) {
+            this.lineString = data.map((item) => {
+              return item.coordinates.split(";").map((it) => {
+                return it.split(",").map(Number);
+              });
+            });
+            this.drawLine();
+          }
+        });
+      }
     },
     /* 绘制地图线段 */
     drawLine() {
@@ -593,11 +599,17 @@ export default {
         this.mapClick = value;
         // 获取对应右上角icon类型
         this.getIconType(value);
+        // 请求地图打点/绘制线段接口
+        if (!this.mapZoom) {
+          this.getZoom("10");
+        } else {
+          this.getZoom(this.mapZoom);
+        }
       }
     },
     /* 获取icon多选数据 */
     getIconType(value) {
-      if (value === "2") {
+      if (value === "defect") {
         this.iconTypeList = [
           { name: "淤泥路面", value: "1" },
           { name: "沥青路面", value: "2" },
@@ -633,24 +645,30 @@ export default {
     getZoom(zoom) {
       if (zoom === "10") {
         // 绘制点位
-        if (this.mapZoom !== zoom) {
-          this.$nextTick(() => {
-            const map = this.$refs.roadMap.instance.get("map");
-            map.removeLayer(this.markLayerLines);
-          });
-          this.mapZoom = zoom;
-          this.getCenterPiont();
-        }
+        this.$nextTick(() => {
+          const map = this.$refs.roadMap.instance.get("map");
+          map.removeLayer(this.markLayerLines);
+          this.markLayerLines = null;
+        });
+        this.getCenterPiont();
+        this.mapZoom = zoom;
       } else if (zoom === "9") {
         // 绘制线段
-        if (this.mapZoom !== zoom) {
-          this.$nextTick(() => {
-            const map = this.$refs.roadMap.instance.get("map");
-            map.removeLayer(this.clusters);
-          });
-          this.getLinePoint();
-          this.mapZoom = zoom;
-        }
+        this.$nextTick(() => {
+          const map = this.$refs.roadMap.instance.get("map");
+          map.removeLayer(this.clusters);
+          this.clusters = null;
+        });
+        this.getLinePoint();
+        this.mapZoom = zoom;
+      }
+    },
+    /* 地图缩放完成事件 */
+    mapMoveend(zoom) {
+      if (this.clusters && zoom > 13) {
+        this.clusters.getSource().setDistance(1);
+      } else if (this.clusters && zoom <= 13) {
+        this.clusters.getSource().setDistance(30);
       }
     },
     /* 地图选中feature事件 */
@@ -1092,7 +1110,8 @@ export default {
           background-size: 100% 100%;
           background-position: 50%;
 
-          span{
+          span {
+            height: 1rem;
             cursor: pointer;
           }
         }
diff --git a/src/views/big-screen/traffic-components/traffic-emergency.vue b/src/views/big-screen/traffic-components/traffic-emergency.vue
index 6457dd2..30fa84e 100644
--- a/src/views/big-screen/traffic-components/traffic-emergency.vue
+++ b/src/views/big-screen/traffic-components/traffic-emergency.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:12:55
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-22 09:38:45
+ * @LastEditTime: 2024-10-28 13:35:47
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-emergency.vue
  * @Description: 交安事件大屏-交安突发事件
 -->
@@ -27,7 +27,7 @@
           :key="`emergency-${index}`"
         >
           <div class="emergency-type">{{ item.type }}</div>
-          <div class="emergency-name">{{ item.name }}</div>
+          <div class="emergency-name">{{ item.segmentName }}</div>
           <div class="emergency-status"><a></a>{{ item.status }}</div>
           <div class="emergency-operation">操作</div>
         </div>
@@ -38,7 +38,7 @@
   
   <script>
 import vueSeamlessScroll from "vue-seamless-scroll";
-
+import { emergencyData } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "TrafficEmergency",
   components: { vueSeamlessScroll },
@@ -56,45 +56,22 @@ export default {
         waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
       },
       // 事件列表
-      emergencyList: [
-        {
-          type: "中分率植物缺死",
-          name: "换成高速啊实打实的",
-          status: "待核验",
-        },
-        {
-          type: "中分率植物缺死",
-          name: "换成高速啊实打实的",
-          status: "待核验",
-        },
-        {
-          type: "中分率植物缺死",
-          name: "换成高速啊实打实的",
-          status: "待核验",
-        },
-        {
-          type: "中分率植物缺死",
-          name: "换成高速啊实打实的",
-          status: "待核验",
-        },
-        {
-          type: "中分率植物缺死",
-          name: "换成高速啊实打实的",
-          status: "待核验",
-        },
-        {
-          type: "中分率植物缺死",
-          name: "换成高速啊实打实的",
-          status: "待核验",
-        },
-        {
-          type: "中分率植物缺死",
-          name: "换成高速啊实打实的",
-          status: "待核验",
-        },
-      ],
+      emergencyList: [],
     };
   },
+  created() {
+    this.getData();
+  },
+  methods: {
+    /* 获取事件列表数据 */
+    getData() {
+      emergencyData().then(({ code, data }) => {
+        if (code === 200) {
+          this.emergencyList = data;
+        }
+      });
+    },
+  },
 };
 </script>
   
diff --git a/src/views/big-screen/traffic-components/traffic-rank.vue b/src/views/big-screen/traffic-components/traffic-rank.vue
index b00ad0d..aab6f82 100644
--- a/src/views/big-screen/traffic-components/traffic-rank.vue
+++ b/src/views/big-screen/traffic-components/traffic-rank.vue
@@ -31,32 +31,41 @@
 </template>
   
   <script>
+import { rankCount } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "TrafficRank",
+  props: {
+    select: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       // 排名数据
       rankList: [],
     };
   },
+  watch: {
+    select: {
+      handler(val) {
+        if (val) {
+          this.getData();
+        }
+      },
+    },
+  },
   created() {
     this.getData();
   },
   methods: {
     /* 获取排名数据 */
     getData() {
-      this.rankList = [
-        { name: "G4562(没开始快速打开看)", value: 556 },
-        { name: "G4562(没开始快速打开看)", value: 456 },
-        { name: "G4562(没开始快速打开看)", value: 356 },
-        { name: "G4562(没开始快速打开看)", value: 556 },
-        { name: "G4562(没开始快速打开看)", value: 556 },
-        { name: "G4562(没开始快速打开看)", value: 556 },
-        { name: "G4562(没开始快速打开看)", value: 556 },
-        { name: "G4562(没开始快速打开看)", value: 556 },
-        { name: "G4562(没开始快速打开看)", value: 556 },
-        { name: "G4562(没开始快速打开看)", value: 556 },
-      ];
+      rankCount({ type: this.select }).then(({ code, data }) => {
+        if (code === 200) {
+          this.rankList = data;
+        }
+      });
     },
   },
 };
diff --git a/src/views/big-screen/traffic-components/traffic-safety.vue b/src/views/big-screen/traffic-components/traffic-safety.vue
index 03df146..ae7c202 100644
--- a/src/views/big-screen/traffic-components/traffic-safety.vue
+++ b/src/views/big-screen/traffic-components/traffic-safety.vue
@@ -2,24 +2,46 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 09:59:32
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-22 09:29:30
+ * @LastEditTime: 2024-10-28 11:42:15
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
  * @Description: 交安事件大屏-交安事件
 -->
 
 <template>
   <div class="content">
-    <div class="traffic-left"><span>87</span></div>
+    <div class="traffic-left"><span>{{today}}</span></div>
     <div class="traffic-right">
-      <div class="right-sum"><span>261</span>个</div>
-      <div class="right-rate"><span> 37 </span>%</div>
+      <div class="right-sum"><span>{{all}}</span>个</div>
+      <div class="right-rate"><span> {{scale}} </span>%</div>
     </div>
   </div>
 </template>
 
 <script>
+import { safetyData } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "TrafficSafety",
+  data() {
+    return {
+      today: 0,
+      all: 0,
+      scale: 0,
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      safetyData().then(({ code, data }) => {
+        if (code === 200) {
+          this.today = data.today;
+          this.all = data.all;
+          this.scale = data.scale;
+        }
+      });
+    },
+  },
 };
 </script>
 
@@ -75,7 +97,7 @@ export default {
       background-repeat: no-repeat;
       background-size: 100%;
       background-position: 100% 50%;
-      color:#AAC6C7;
+      color: #aac6c7;
       font-size: 0.9rem;
 
       span {
@@ -104,7 +126,7 @@ export default {
       background-repeat: no-repeat;
       background-size: 100%;
       background-position: 100% 50%;
-      color:#AAC6C7;
+      color: #aac6c7;
       font-size: 0.9rem;
 
       span {
diff --git a/src/views/big-screen/traffic-components/traffic-statistic.vue b/src/views/big-screen/traffic-components/traffic-statistic.vue
index 70d4225..2d18fd9 100644
--- a/src/views/big-screen/traffic-components/traffic-statistic.vue
+++ b/src/views/big-screen/traffic-components/traffic-statistic.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:06:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-22 09:27:49
+ * @LastEditTime: 2024-10-28 13:17:29
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
  * @Description: 交安事件大屏-交安事件统计
 -->
@@ -40,35 +40,22 @@
   
   <script>
 import * as echarts from "echarts";
+import { getDropList } from "@/api/xj/screen/disease-screen";
+import { statisticData } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "TrafficStatistic",
+  props: {
+    select: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       // 下拉数据绑定
-      itemSelect: "1",
+      itemSelect: "",
       //   下拉框数据
-      currentList: [
-        {
-          label: "分公司",
-          value: "1",
-        },
-        {
-          label: "分公司2",
-          value: "2",
-        },
-        {
-          label: "分公3",
-          value: "3",
-        },
-        {
-          label: "分公司4",
-          value: "4",
-        },
-        {
-          label: "分公司5",
-          value: "5",
-        },
-      ],
+      currentList: [],
       // 取色盘
       colorList: [
         "#18F7FF",
@@ -115,14 +102,46 @@ export default {
       ],
     };
   },
+  watch: {
+    select: {
+      handler(val) {
+        if (val) {
+          this.getCurrentList();
+          this.getChartData();
+        }
+      },
+    },
+    itemSelect: {
+      handler() {
+        this.getChartData();
+      },
+    },
+  },
   created() {
     this.getChartData();
   },
   methods: {
+    /* 获取右上角下拉框数据 */
+    getCurrentList() {
+      getDropList({ type: this.select }).then(({ data, code }) => {
+        if (code === 200) {
+          this.currentList = data;
+        }
+      });
+    },
     /* 获取echart图数据 */
     getChartData() {
-      this.$nextTick(() => {
-        this.drawChart();
+      const data = {
+        itemName: this.itemSelect,
+        type: this.select,
+      };
+      statisticData(data).then(({ data, code }) => {
+        if (code === 200) {
+          this.echartList = data;
+          this.$nextTick(() => {
+            this.drawChart();
+          });
+        }
       });
     },
     /* 绘制echart图 */
@@ -179,12 +198,12 @@ export default {
               },
               rich: {
                 a: {
-                  fontFamily:"DouYu",
+                  fontFamily: "DouYu",
                   fontSize: 28,
                   color: "rgba(255, 183, 89, 0.8)",
                 },
                 b: {
-                  fontFamily:"DinBm",
+                  fontFamily: "DinBm",
                   fontSize: 12,
                   color: "#ffffff",
                 },
diff --git a/src/views/big-screen/traffic-components/traffic-trend.vue b/src/views/big-screen/traffic-components/traffic-trend.vue
index 0928bdf..d070b7b 100644
--- a/src/views/big-screen/traffic-components/traffic-trend.vue
+++ b/src/views/big-screen/traffic-components/traffic-trend.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:03:08
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-21 15:59:07
+ * @LastEditTime: 2024-10-28 13:47:21
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
  * @Description: 交安事件大屏-交安事件趋势
 -->
@@ -28,50 +28,128 @@
 </template>
   
 <script>
+import { getDropList } from "@/api/xj/screen/disease-screen";
+import { eventLog } from "@/api/xj/screen/traffic-screen";
 import * as echarts from "echarts";
 export default {
   name: "TrafficTrend",
+  props: {
+    select: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       // 下拉框选中绑定
-      itemSelect: "1",
+      itemSelect: "",
       // 下拉框数据
-      trafficList: [
-        {
-          label: "分公司",
-          value: "1",
-        },
-        {
-          label: "分公司2",
-          value: "2",
-        },
-        {
-          label: "分公3",
-          value: "3",
-        },
-        {
-          label: "分公司4",
-          value: "4",
-        },
-        {
-          label: "分公司5",
-          value: "5",
-        },
-      ],
+      trafficList: [],
+      // echart图表数据
+      echartData: [],
     };
   },
+  watch: {
+    select: {
+      handler(val) {
+        if (val) {
+          this.getCurrentList();
+          this.getChartData();
+        }
+      },
+    },
+    itemSelect: {
+      handler() {
+        this.getChartData();
+      },
+    },
+  },
   created() {
     this.getChartData();
   },
   methods: {
+    /* 获取右上角下拉框数据 */
+    getCurrentList() {
+      getDropList({ type: this.select }).then(({ data, code }) => {
+        if (code === 200) {
+          this.trafficList = data;
+        }
+      });
+    },
     /* 获取柱状图数据 */
     getChartData() {
-      this.$nextTick(() => {
-        this.drawChart();
+      const data = {
+        id: this.itemSelect,
+        type: this.select,
+      };
+      eventLog(data).then(({ data, code }) => {
+        if (code === 200) {
+          console.log(data, "ffff");
+          this.echartData = data;
+          this.$nextTick(() => {
+            this.drawChart();
+          });
+        }
       });
     },
     /* 绘制echart */
     drawChart() {
+      const xData = this.echartData.map((item) => {
+        return item.label;
+      });
+      const yData = this.echartData.map((item,index) => {
+        if (index % 2 == 0) {
+          return {
+            ...item,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: "linear",
+                global: false,
+                colorStops: [
+                  {
+                    //第一节下面
+                    offset: 0,
+                    color: "#033E43",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00FFEA",
+                  },
+                ],
+              },
+            },
+          };
+        } else {
+          return {
+            ...item,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: "linear",
+                global: false,
+                colorStops: [
+                  {
+                    //第一节下面
+                    offset: 0,
+                    color: "#034299",
+                  },
+                  {
+                    offset: 1,
+                    color: "#35F0FF",
+                  },
+                ],
+              },
+            },
+          };
+        }
+      });
       const chart = echarts.init(this.$refs.trafficChart);
       chart.setOption({
         // backgroundColor: "#041139",
@@ -95,7 +173,7 @@ export default {
         },
         xAxis: [
           {
-            data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
+            data: xData,
             axisLabel: {
               color: "#808C9F",
               fontSize: 12,
@@ -144,7 +222,7 @@ export default {
         series: [
           // 柱体
           {
-            name: "人数",
+            name: "数量",
             type: "bar",
             barWidth: 10,
             itemStyle: {
@@ -155,9 +233,6 @@ export default {
             backgroundStyle: {
               color: "rgba(105,160,231,0.1)",
             },
-            // itemStyle: {
-
-            // },
             label: {
               show: false, //每条柱状图是否显示数字
               formatter: "{c}",
@@ -165,176 +240,7 @@ export default {
               color: "#fff",
               fontSize: 14,
             },
-            data: [
-              {
-                value: 15,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 25,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#033E43",
-                      },
-                      {
-                        offset: 1,
-                        color: "#00FFEA",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 35,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 45,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#033E43",
-                      },
-                      {
-                        offset: 1,
-                        color: "#00FFEA",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 55,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 65,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#033E43",
-                      },
-                      {
-                        offset: 1,
-                        color: "#00FFEA",
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                value: 75,
-                itemStyle: {
-                  color: {
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    type: "linear",
-                    global: false,
-                    colorStops: [
-                      {
-                        //第一节下面
-                        offset: 0,
-                        color: "#034299",
-                      },
-                      {
-                        offset: 1,
-                        color: "#35F0FF",
-                      },
-                    ],
-                  },
-                },
-              },
-            ],
+            data: yData,
           },
         ],
       });
diff --git a/src/views/index.vue b/src/views/index.vue
index e8c112b..cdb4ece 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,18 +1,27 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-08 09:26:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-28 14:33:52
+ * @FilePath: \znxjxt-ui\src\views\index.vue
+ * @Description: 系统首页
+-->
 <template>
   <div class="app-container">
-  <div id="map" class="map">
-    <map-component></map-component>
-  </div>
+    <div>顶栏</div>
+    <div>
+      <div>日常巡查</div>
+      <div>病害识别</div>
+    </div>
+    <div>
+      <div>公路资产</div>
+      <div>路况评定</div>
+    </div>
   </div>
 </template>
-<!-- // 这里的tk为你在天地图的官网申请的tk -->
 <script>
 
 
-
-import MapComponent from '../components/MapComponent';
-
-
 export default {
   name: "Index",
   data() {
@@ -20,29 +29,10 @@ export default {
 
     };
   },
-  components: {
-    MapComponent
-  },
-  methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
-    },
-    initMap() {
-
-    }
-  },
-  mounted() {
-  },
-  created(){
-  }
 };
 </script>
 
 <style scoped lang="scss">
-  .map{
-    width: 100%;
-    height: 800px;
-  }
   .app-container{
     padding: 0px;
   }
diff --git a/src/views/login.vue b/src/views/login.vue
index 00793c6..c65a1d8 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,7 +1,28 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-08 09:26:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-28 14:19:03
+ * @FilePath: \znxjxt-ui\src\views\login.vue
+ * @Description: 系统登录页
+-->
+
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
+    <div class="login-title">
+      <div class="mini-title">辽宁交投</div>
+      <div class="middle-title">
+        <div>智能巡检系统</div>
+        <div><span>安全生产</span><span>可视化便捷</span></div>
+      </div>
+    </div>
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <h3 class="title">账号登陆</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -9,7 +30,11 @@
           auto-complete="off"
           placeholder="账号"
         >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -20,7 +45,11 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
@@ -31,40 +60,46 @@
           style="width: 63%"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
-    </div>
   </div>
 </template>
 
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -76,32 +111,32 @@ export default {
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
@@ -109,8 +144,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -120,53 +156,90 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: "/screen" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: "/screen" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   height: 100%;
+  padding: 0 10%;
   background-image: url("../assets/images/login-background.jpg");
   background-size: cover;
+
+  .login-title {
+    width: 14.5%;
+    height: 40%;
+    padding: 3% 0;
+
+    .mini-title{
+      width: 100%;
+      height: 20%;
+      font-weight: 600;
+    }
+
+    .middle-title{
+      width: 100%;
+
+      >div:nth-child(1){
+        font-size: 2rem;
+        font-weight: 600;
+      }
+
+      >div:nth-child(2){
+        display: flex;
+        justify-content: space-between;
+        font-size: 1.1rem;
+        font-weight: 600;
+      }
+    }
+  }
 }
 .title {
   margin: 0px auto 30px auto;
-  text-align: center;
+  font-weight: 800;
   color: #707070;
 }
 
diff --git a/src/views/xj/inspection/task-management/components/task-view.vue b/src/views/xj/inspection/task-management/components/task-view.vue
index 4dd7781..1c2b53d 100644
--- a/src/views/xj/inspection/task-management/components/task-view.vue
+++ b/src/views/xj/inspection/task-management/components/task-view.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:36:09
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 14:25:31
+ * @LastEditTime: 2024-10-28 11:29:03
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-view.vue
  * @Description: 巡检任务-查看路径
 -->
@@ -17,7 +17,41 @@
       ></fssm-map>
     </div>
     <div class="footer">
-      <el-slider v-model="timeTip" :show-tooltip="false"></el-slider>
+      <div class="slider">
+        <el-slider
+          v-model="timeTip"
+          :step="sliderStep"
+          :marks="sliderMarks"
+          :show-tooltip="true"
+        ></el-slider>
+      </div>
+      <div class="pause">
+        <i
+          class="el-icon-video-play"
+          v-if="!animationVisable"
+          @click="animation(true)"
+        ></i>
+        <i
+          class="el-icon-video-pause"
+          v-if="animationVisable"
+          @click="animation(false)"
+        ></i>
+      </div>
+      <div class="speed">
+        <el-select
+          v-model="spaadCode"
+          @change="changeTimeTip"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in speedOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
     </div>
   </div>
 </template>
@@ -37,16 +71,73 @@ export default {
   data() {
     return {
       // 进度条位置绑定值
-      timeTip: 26,
+      timeTip: "0",
+      // 进度条标记配置项
+      sliderMarks: {
+        0: "18",
+        100: "24",
+      },
+      // 进度条步长
+      sliderStep: 0.1,
+      // 暂停/开始绑定
+      animationVisable: false,
+      // 定时器绑定
+      timer: null,
+      // 倍速绑定
+      spaadCode: 1,
+      // 倍数下拉
+      speedOption: [
+        {
+          value: 1,
+          label: "1x",
+        },
+        {
+          value: 2,
+          label: "2x",
+        },
+        {
+          value: 5,
+          label: "5x",
+        },
+        {
+          value: 10,
+          label: "10x",
+        },
+      ],
     };
   },
+  watch: {
+    timeTip: {
+      handler(val) {},
+    },
+  },
   mounted() {},
   methods: {
+    /* 暂停/开始事件 */
+    animation(boolen) {
+      this.animationVisable = boolen;
+      if (boolen) {
+        this.timer = setInterval(() => {
+          this.timeTip = (this.timeTip + this.sliderStep).toFixed(1) * 1;
+        }, 500);
+      } else {
+        clearInterval(this.timer);
+      }
+    },
+    /* 进度条修改事件 */
+    changeTimeTip(value) {
+      this.sliderStep = value * 0.1;
+    },
+    /* 定时器事件 */
+    startTime(value) {},
     /* 地图点击事件 */
     mapClick(feature) {},
     /* 地图双击事件 */
     mapDbclick(feature) {},
   },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
 };
 </script>
 
@@ -65,6 +156,27 @@ export default {
 .footer {
   height: 5rem;
   width: 100%;
-  background-color: aqua;
+  padding: 1rem;
+  display: flex;
+  background-color: rgba(104, 128, 147, 0.3);
+
+  .slider {
+    width: calc(100% - 8rem);
+    padding: 0 2rem;
+
+    ::v-deep .el-slider__marks-text {
+      width: 3rem;
+    }
+  }
+
+  .pause {
+    width: 3rem;
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+  }
+
+  .speed {
+    width: 5rem;
+  }
 }
 </style>
\ No newline at end of file