diff --git a/package-lock.json b/package-lock.json
index 08caf20..e5a6f90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
+        "js-md5": "^0.7.3",
         "less": "^4.1.3",
         "less-loader": "^11.1.0",
         "style-resources-loader": "^1.5.0",
@@ -6767,6 +6768,12 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
+      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
+      "dev": true
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -16610,6 +16617,12 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
+      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
+      "dev": true
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
diff --git a/package.json b/package.json
index 73c6e00..25ceb00 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "js-md5": "^0.7.3",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "style-resources-loader": "^1.5.0",
diff --git a/src/assets/img/noPhoto.jpg b/src/assets/img/noPhoto.jpg
new file mode 100644
index 0000000..101d2fd
Binary files /dev/null and b/src/assets/img/noPhoto.jpg differ
diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
index ed334d1..170420d 100644
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@@ -9,9 +9,9 @@
     <v-sidebar></v-sidebar>
     <div class="header-right">
       <div class="header-user-con">
-        <el-select v-model="theme" value-key="value" @change="changeTheme">
+        <el-select v-model="colorValue" value-key="value" @change="changeTheme">
           <el-option
-            v-for="item in options"
+            v-for="item in colorList"
             :key="item.value"
             :label="item.label"
             :value="item.value"
@@ -62,7 +62,7 @@ export default {
   },
   data() {
     return {
-      options: [
+      colorList: [
         {
           value: "#20a0ff",
           label: "蓝色",
@@ -80,6 +80,7 @@ export default {
           label: "橙色",
         },
       ],
+      colorValue: "",
       theme: {},
 
       //collapse: false,
@@ -97,23 +98,32 @@ export default {
     //修改主题色
     changeTheme(e) {
       console.log(e);
-      //   const app = document.getElementById("app");
-      //   if (this.theme === "蓝色") {
-      //     this.color = "#20a0ff";
-      //     app.classList.remove("redStyle", "greenStyle", "orangeStyle");
-      //     app.classList.add("blueStyle");
-      //   } else if (this.theme === "红色") {
-      //     this.color = "#EE320C";
-      //     app.classList.remove("blueStyle", "greenStyle", "orangeStyle");
-      //     app.classList.add("redStyle");
-      //   } else if (this.theme === "绿色") {
-      //     this.color = "#25EE28";
-      //     app.classList.add("greenStyle");
-      //   } else if (this.theme === "橙色") {
-      //     this.color = "#f08200";
-      //     app.classList.remove("blueStyle", "greenStyle", "redStyle");
-      //     app.classList.add("orangeStyle");
-      //   }
+      this.theme = this.colorList.find(function (i) {
+        return i.value === e;
+      }); //在change中获取到整条对象数据
+      console.log(this.theme);
+      updateElementUiTheme({
+        theme: this.theme.value,
+        themeName: "--my-theme-name",
+      });
+      const app = document.getElementById("app");
+      console.log(app);
+      if (this.theme.label === "蓝色") {
+        this.theme.value = "#20a0ff";
+        app.classList.add("blueStyle");
+        app.classList.remove("redStyle", "greenStyle", "orangeStyle");
+      } else if (this.theme.label === "红色") {
+        this.theme.value = "#EE320C";
+        app.classList.remove("blueStyle", "greenStyle", "orangeStyle");
+        app.classList.add("redStyle");
+      } else if (this.theme.label === "绿色") {
+        this.theme.value = "#25EE28";
+        app.classList.add("greenStyle");
+      } else if (this.theme.label === "橙色") {
+        this.theme.value = "#f08200";
+        app.classList.remove("blueStyle", "greenStyle", "redStyle");
+        app.classList.add("orangeStyle");
+      }
     },
     // 用户名下拉菜单选择事件
     handleCommand(command) {
@@ -157,23 +167,9 @@ export default {
     },
   },
   created() {
-    this.theme = {
-      value: "#20a0ff",
-      label: "蓝色",
-    };
-  },
-  mounted() {
-    this.$watch(
-      "color",
-      (value) => {
-        updateElementUiTheme({
-          theme: value,
-          themeName: "--my-theme-name",
-        });
-      },
-      { immediate: true }
-    );
+    this.colorValue = this.colorList[0].label;
   },
+  mounted() {},
 };
 </script>
 <style lang="less">
diff --git a/src/main.js b/src/main.js
index 6caa141..1aeb757 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,7 +21,11 @@ Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */);
 
 import "./assets/css/reset.css"; //默认样式
 import "./assets/css/theme.less"; //修改主题颜色
-import "./assets/css/global.less";
+import "./assets/css/global.less"; //全局定义颜色
+
+//引入md5加密
+import md5 from "js-md5";
+Vue.prototype.$md5 = md5;
 
 Vue.config.productionTip = false;
 
@@ -35,6 +39,10 @@ new Vue({
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} | 可视化智能管控系统`;
   const role = localStorage.getItem("ms_username");
+  //const token = localStorage.getItem("token");
+  // if (token === null || token === "") {
+  //   next("/login");
+  // } else
   if (!role && to.path !== "/login") {
     next("/login");
   } else if (to.meta.permission) {
@@ -44,13 +52,5 @@ router.beforeEach((to, from, next) => {
     role === "admin" ? next() : next("/403");
   } else {
     next();
-    // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
-    // if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
-    //     Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
-    //         confirmButtonText: '确定'
-    //     });
-    // } else {
-    //     next();
-    // }
   }
 });
diff --git a/src/router/index.js b/src/router/index.js
index cdaf28a..9078826 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,132 +1,184 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Vue from "vue";
+import VueRouter from "vue-router";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    redirect: '/stritl'
-},
-{
-    path: '/',
-    component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
-    meta: { title: '首页' },
+    path: "/",
+    redirect: "/stritl",
+  },
+  {
+    path: "/",
+    component: () =>
+      import(/* webpackChunkName: "home" */ "../components/common/Home.vue"),
+    meta: { title: "首页" },
     children: [
-        {
-            path: '/stritl',
-            component: () => import(/* webpackChunkName: "dashboard" */ '../views/stritl/index.vue'),
-            meta: {
-                title: '系统首页',
-                icon: 'el-icon-s-home',
-            }
-        },
-        {
-            path: '/realTimeMonitor',
-            component: () => import(/* webpackChunkName: "icon" */ '../views/realTimeMonitor/index.vue'),
-            meta: {
-                title: '实时监控',
-                permission: true,
-                icon: 'el-icon-camera',
-            },
-        },
-        {
-            path: '/pictureRotation',
-            component: () => import(/* webpackChunkName: "table" */ '../views/pictureRotation/index.vue'),
-            meta: {
-                title: '图片轮巡',
-                permission: true,
-                icon: 'el-icon-film',
-            }
-        },
-        {
-            path: '/videoMonitor',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/index.vue'),
-            meta: { title: '监控视频', icon: 'el-icon-video-camera', }
-        },
-        {
-            path: '/videoHistory',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/videoHistory.vue'),
-            meta: { title: '视频回放', icon: 'el-icon-video-camera' }
-        },
-        {
-            path: '/photoAlarm',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/alarmHandling/index.vue'),
-            meta: { title: '告警处理', icon: 'el-icon-bell', }
-        },
-
-        {
-            path: '/lineInformation',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/lineInformation/index.vue'),
-            meta: { title: '线路信息管理', icon: '', }
-        },
-        {
-            path: '/groupInformation',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/groupInformation/index.vue'),
-            meta: { title: '分组信息管理', icon: '', }
-        },
-        {
-            path: '/towerInformation',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerInformation/index.vue'),
-            meta: { title: '杆塔信息管理', icon: '', }
-        },
-        {
-            path: '/towerTeam',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerTeam/index.vue'),
-            meta: { title: '杆塔班组用户', icon: '', }
-        },
+      {
+        path: "/stritl",
+        component: () =>
+          import(
+            /* webpackChunkName: "dashboard" */ "../views/stritl/index.vue"
+          ),
+        meta: {
+          title: "系统首页",
+          icon: "el-icon-s-home",
+        },
+      },
+      {
+        path: "/realTimeMonitor",
+        component: () =>
+          import(
+            /* webpackChunkName: "icon" */ "../views/realTimeMonitor/index.vue"
+          ),
+        meta: {
+          title: "实时监控",
+          permission: true,
+          icon: "el-icon-camera",
+        },
+      },
+      {
+        path: "/pictureRotation",
+        component: () =>
+          import(
+            /* webpackChunkName: "table" */ "../views/pictureRotation/index.vue"
+          ),
+        meta: {
+          title: "图片轮巡",
+          permission: true,
+          icon: "el-icon-film",
+        },
+      },
+      {
+        path: "/videoMonitor",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/videoMonitor/index.vue"
+          ),
+        meta: { title: "监控视频", icon: "el-icon-video-camera" },
+      },
+      {
+        path: "/videoHistory",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/videoMonitor/videoHistory.vue"
+          ),
+        meta: { title: "视频回放", icon: "el-icon-video-camera" },
+      },
+      {
+        path: "/photoAlarm",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/alarmHandling/index.vue"
+          ),
+        meta: { title: "告警处理", icon: "el-icon-bell" },
+      },
 
-        {
-            path: '/deviceVisualization',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/deviceVisualization/index.vue'),
-            meta: { title: '装置分布可视化', icon: '', }
-        },
-        {
-            path: '/photographicDevice',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/photographicDevice/index.vue'),
-            meta: { title: '拍照装置管理', icon: '', }
-        },
-        {
-            path: '/SIMCard',
-            component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/SIMCard/index.vue'),
-            meta: { title: 'SIM卡管理', icon: '', }
-        },
-
-        {
-            // 权限页面
-            path: '/permission',
-            component: () => import(/* webpackChunkName: "permission" */ '../views/Permission.vue'),
-            meta: { title: '权限测试', permission: true, icon: 'el-icon-setting', }
-        },
-        {
-            path: '/404',
-            component: () => import(/* webpackChunkName: "404" */ '../views/404.vue'),
-            meta: { title: '404' }
-        },
-        {
-            path: '/403',
-            component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'),
-            meta: { title: '403' }
-        },
+      {
+        path: "/lineInformation",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/userEquipment/lineInformation/index.vue"
+          ),
+        meta: { title: "线路信息管理", icon: "" },
+      },
+      {
+        path: "/groupInformation",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/userEquipment/groupInformation/index.vue"
+          ),
+        meta: { title: "分组信息管理", icon: "" },
+      },
+      {
+        path: "/towerInformation",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/userEquipment/towerInformation/index.vue"
+          ),
+        meta: { title: "杆塔信息管理", icon: "" },
+      },
+      {
+        path: "/towerTeam",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/userEquipment/towerTeam/index.vue"
+          ),
+        meta: { title: "杆塔班组用户", icon: "" },
+      },
 
+      {
+        path: "/deviceVisualization",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/deviceVisualization/index.vue"
+          ),
+        meta: { title: "装置分布可视化", icon: "" },
+      },
+      {
+        path: "/photographicDevice",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/photographicDevice/index.vue"
+          ),
+        meta: { title: "拍照装置管理", icon: "" },
+      },
+      {
+        path: "/SIMCard",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/SIMCard/index.vue"
+          ),
+        meta: { title: "SIM卡管理", icon: "" },
+      },
 
-    ]
-},
-{
-    path: '/login',
-    component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
-    meta: { title: '登录' }
-},
-{
-    path: '*',
-    redirect: '/404'
-}
-]
+      {
+        // 权限页面
+        path: "/permission",
+        component: () =>
+          import(
+            /* webpackChunkName: "permission" */ "../views/Permission.vue"
+          ),
+        meta: { title: "权限测试", permission: true, icon: "el-icon-setting" },
+      },
+      {
+        path: "/404",
+        component: () =>
+          import(/* webpackChunkName: "404" */ "../views/404.vue"),
+        meta: { title: "404" },
+      },
+      {
+        path: "/403",
+        component: () =>
+          import(/* webpackChunkName: "403" */ "../views/403.vue"),
+        meta: { title: "403" },
+      },
+    ],
+  },
+  {
+    path: "/login",
+    component: () =>
+      import(/* webpackChunkName: "login" */ "../views/Login.vue"),
+    meta: { title: "登录" },
+  },
+  {
+    path: "*",
+    redirect: "/404",
+  },
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes
-})
-
-export default router
+  routes,
+});
+/**
+ *	重写 router.prototype.push 避免同时跳转相同路径报错
+ */
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject)
+    return originalPush.call(this, location, onResolve, onReject);
+  return originalPush.call(this, location).catch((err) => err);
+};
+export default router;
diff --git a/src/store/index.js b/src/store/index.js
index ceffa8e..40806e9 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,17 +1,21 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue";
+import Vuex from "vuex";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
+    //用户登录token 存储
+    token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
   },
-  getters: {
-  },
+  getters: {},
   mutations: {
+    //修改token  并将token存入localstorage
+    setToken(state, user) {
+      state.token = user.token;
+      localStorage.setItem("token", user.token);
+    },
   },
-  actions: {
-  },
-  modules: {
-  }
-})
+  actions: {},
+  modules: {},
+});
diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 1a52811..f1793e1 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -1,149 +1,120 @@
-import request from '../request';
+import request from "../request";
 
 //登陆接口
+
 export function login(data) {
-    return request({
-        url: '/login',
-        method: 'post',
-        data
-    })
+  return request({
+    url: "/stritl/login",
+    method: "post",
+    data,
+  });
 }
 //首页数据接口
 export function getLineDataByVoltage(data) {
-    return request({
-        url: '/stritl/main/getLineDataByVoltage',
-        method: 'post',
-        data
-    })
+  return request({
+    url: "/stritl/main/getLineDataByVoltage",
+    method: "post",
+    data,
+  });
 }
 
 export function getCapturePointDataByDanger(params) {
-    return request({
-        url: '/stritl/main/getCapturePointDataByDanger',
-        method: 'post',
-        params
-    })
+  return request({
+    url: "/stritl/main/getCapturePointDataByDanger",
+    method: "post",
+    params,
+  });
 }
 
 export function getHostDeviceDataByVoltage(data) {
-    return request({
-        url: '/stritl/main/getHostDeviceDataByVoltage',
-        method: 'post',
-        data
-    })
+  return request({
+    url: "/stritl/main/getHostDeviceDataByVoltage",
+    method: "post",
+    data,
+  });
 }
 export function getCompanyDeviceInfo(params) {
-    return request({
-        url: '/stritl/main/getCompanyDeviceInfo',
-        method: 'get',
-        params
-    })
+  return request({
+    url: "/stritl/main/getCompanyDeviceInfo",
+    method: "get",
+    params,
+  });
 }
 
 export function getPhotoAlarmDataByAlarmType(params) {
-    return request({
-        url: '/stritl/main/getPhotoAlarmDataByAlarmType',
-        method: 'post',
-        params
-    })
+  return request({
+    url: "/stritl/main/getPhotoAlarmDataByAlarmType",
+    method: "post",
+    params,
+  });
 }
 export function getByName(data) {
-    return request({
-        url: '/stritl/inspectionOpinions/getByName',
-        method: 'post',
-        data
-    })
+  return request({
+    url: "/stritl/inspectionOpinions/getByName",
+    method: "post",
+    data,
+  });
 }
 
 //雷达图数据
 export function getLastYearAlarmReasons(params) {
-    return request({
-        url: '/stritl/main/getLastYearAlarmReasons',
-        method: 'get',
-        params
-    })
+  return request({
+    url: "/stritl/main/getLastYearAlarmReasons",
+    method: "get",
+    params,
+  });
 }
 
-
-
-
 export function get1(params) {
-    return request({
-        url: '/get1',
-        method: 'get',
-        params
-    });
-};
+  return request({
+    url: "/get1",
+    method: "get",
+    params,
+  });
+}
 export function get2(params) {
-    return request({
-        url: '/get2',
-        method: 'get',
-        params
-    });
-};
+  return request({
+    url: "/get2",
+    method: "get",
+    params,
+  });
+}
 //图片轮巡 Post请求：
 
 export function picLoop(data) {
-    return request({
-        url: '/stritl/realData/listCompanyScan',
-        method: 'post',
-        data
-    });
-};
+  return request({
+    url: "/stritl/realData/listCompanyScan",
+    method: "post",
+    data,
+  });
+}
 //预警
 export function list(params) {
-    return request({
-        url: '/stritl/photoAlarm/list',
-        method: 'get',
-        params
-    });
-};
+  return request({
+    url: "/stritl/photoAlarm/list",
+    method: "get",
+    params,
+  });
+}
 //获取左侧树状图 http://180.166.218.222:7200/stritl/line/getTreeLineCompany
 
-
 export function getListCompany(params) {
-    return request({
-        url: '/stritl/line/getTreeLine',
-        method: 'post',
-        params
-    });
-};
-//获取右侧表格  
+  return request({
+    url: "/stritl/line/getTreeLine",
+    method: "post",
+    params,
+  });
+}
+//获取右侧表格
 export function getTowerList(params) {
-    return request({
-        url: '/stritl/towerLogic/getTowerLogicList',
-        method: 'get',
-        params
-    });
-};
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+  return request({
+    url: "/stritl/towerLogic/getTowerLogicList",
+    method: "get",
+    params,
+  });
+}
 
- //公司服务器地址接口
+//公司服务器地址接口
 // export function get1() {
 //     return request({
 //         url: '/test/getBannerList',
@@ -157,4 +128,4 @@ export function getTowerList(params) {
 //         method: 'post',
 //         params: query
 //     });
-// };
\ No newline at end of file
+// };
diff --git a/src/utils/request.js b/src/utils/request.js
index f8650aa..91ad934 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios from "axios";
 // import { Loading } from 'element-ui'; //项目已经全局引入element的话可以不单独引入
 // let loading        //定义loading变量
 // function startLoading() {    //使用Element loading-start 方法
@@ -30,41 +30,39 @@ import axios from 'axios';
 //     }
 // }
 
-
 const service = axios.create({
-    // process.env.NODE_ENV === 'development' 来判断是否开发环境
-    // easy-mock服务挂了，暂时不使用了
-    // baseURL: '',
-    // timeout: 5000
-    baseURL: 'api',//把原来的项目地址，改成api，解决跨域问题
-    timeout: 3000,
+  // process.env.NODE_ENV === 'development' 来判断是否开发环境
+  // easy-mock服务挂了，暂时不使用了
+  // baseURL: '',
+  // timeout: 5000
+  baseURL: "api", //把原来的项目地址，改成api，解决跨域问题
+  timeout: 3000,
 });
 
-
 service.interceptors.request.use(
-    config => {
-        // showFullScreenLoading()
-        return config;
-    },
-    error => {
-        console.log(error);
-        return Promise.reject();
-    }
+  (config) => {
+    // showFullScreenLoading()
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    return Promise.reject();
+  }
 );
 
 service.interceptors.response.use(
-    response => {
-        if (response.status === 200) {
-            // tryHideFullScreenLoading()
-            return response.data;
-        } else {
-            Promise.reject();
-        }
-    },
-    error => {
-        console.log(error);
-        return Promise.reject();
+  (response) => {
+    if (response.status === 200) {
+      // tryHideFullScreenLoading()
+      return response.data;
+    } else {
+      Promise.reject();
     }
+  },
+  (error) => {
+    console.log(error);
+    return Promise.reject();
+  }
 );
 
 export default service;
diff --git a/src/views/Login.vue b/src/views/Login.vue
index dc7a6bd..6c00033 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -34,7 +34,8 @@
 </template>
 
 <script>
-import { get1, get2 } from "@/utils/api/index";
+import { mapMutations } from "vuex";
+import { login, get1, get2 } from "@/utils/api/index";
 export default {
   data: function () {
     return {
@@ -50,12 +51,37 @@ export default {
       },
     };
   },
+  computed: {
+    ...mapMutations(["setToken"]),
+  },
   methods: {
     submitForm() {
       this.$refs.login.validate((valid) => {
         if (valid) {
+          // login({
+          //   account: "xytest",
+          //   pwd: "2b4c6570bb613fb6b81589fbfa635edf",
+          //   captcha: "bgsq",
+          //   requestIp: "180.166.218.222",
+          //   requestPort: "7200",
+          // })
+          //   .then((res) => {
+          //     console.log(res);
+
+          //     this.$message.success("登录成功");
+
+          //     this.token = "asdadadadadasdasd" + res.statusCode;
+          //     this.setToken({ token: this.token });
+          //     this.$router.push("/");
+          //   })
+          //   .catch((error) => {
+          //     alert("账号或密码错误");
+          //     console.log(error);
+          //   });
           this.$message.success("登录成功");
           localStorage.setItem("ms_username", this.param.username);
+
+          console.log("加密密码：" + this.$md5(this.param.username));
           this.$router.push("/");
         } else {
           this.$message.error("请输入账号和密码");
@@ -64,6 +90,7 @@ export default {
         }
       });
     },
+    getLogin() {},
   },
   created() {
     get1().then((res) => {
diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index ade09cc..ae5c7f5 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -1,147 +1,171 @@
 <template>
-    <div class="thumb-example">
-        <!-- swiper1 -->
-        <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
-            <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
-                <img :src="item.url" style="width: 100%; height: 100%" alt="" />
-            </swiper-slide>
-            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
-            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
-        </swiper>
-        <!-- swiper2 Thumbs -->
-        <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
-            <swiper-slide class="slide" style="width: 30%; height: 100%" v-for="(item, index) in bigImg" :key="item.id">
-                <img style="width: 100%; height: 100%" :src="item.url" alt="" />
-                <p class="timeInfo">{{ 7 + index }}:00:12</p>
-            </swiper-slide>
-            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
-            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
-        </swiper>
-    </div>
+  <div class="thumb-example">
+    <!-- swiper1 -->
+    <swiper
+      class="swiper gallery-top"
+      :options="swiperOptionTop"
+      ref="swiperTop"
+    >
+      <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
+        <img :src="item.url" style="width: 100%; height: 100%" alt="" />
+      </swiper-slide>
+      <div
+        class="swiper-button-next swiper-button-white"
+        slot="button-next"
+      ></div>
+      <div
+        class="swiper-button-prev swiper-button-white"
+        slot="button-prev"
+      ></div>
+    </swiper>
+    <!-- swiper2 Thumbs -->
+    <swiper
+      class="swiper gallery-thumbs"
+      :options="swiperOptionThumbs"
+      ref="swiperThumbs"
+    >
+      <swiper-slide
+        class="slide"
+        style="width: 30%; height: 100%"
+        v-for="(item, index) in bigImg"
+        :key="item.id"
+      >
+        <img style="width: 100%; height: 100%" :src="item.url" alt="" />
+        <p class="timeInfo">{{ 7 + index }}:00:12</p>
+      </swiper-slide>
+      <div
+        class="swiper-button-next swiper-button-white"
+        slot="button-next"
+      ></div>
+      <div
+        class="swiper-button-prev swiper-button-white"
+        slot="button-prev"
+      ></div>
+    </swiper>
+  </div>
 </template>
 
 <script>
 export default {
-    mounted() {
-        // 实现swiper双向控制
-        this.$nextTick(() => {
-            const swiperTop = this.$refs.swiperTop.swiper;
-            const swiperThumbs = this.$refs.swiperThumbs.swiper;
-            swiperTop.controller.control = swiperThumbs;
-            swiperThumbs.controller.control = swiperTop;
-        });
-    },
-    data() {
-        return {
-            //轮播大图配置
-            bigImg: [
-                {
-                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg',
-                    id: 0
-                },
-                {
-                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg',
-                    id: 1
-                },
-                {
-                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg',
-                    id: 2
-                },
-                {
-                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg',
-                    id: 3
-                },
-                {
-                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg',
-                    id: 4
-                },
-                {
-                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg',
-                    id: 5
-                }
-            ],
-            swiperOptionTop: {
-                zoom: true,
-                loop: true,
-                loopedSlides: 5, // looped slides should be the same
-                spaceBetween: 10,
-                observer: true, //修改swiper自己或子元素时，自动初始化swiper
-                observeParents: true, //修改swiper的父元素时，自动初始化swiper
-                // autoplay: {  //自动轮播
-                //   delay: 2000,
-                //   disableOnInteraction: false
-                // },
-                navigation: {
-                    nextEl: '.swiper-button-next',
-                    prevEl: '.swiper-button-prev'
-                }
-            },
-            swiperOptionThumbs: {
-                loop: true,
-                loopedSlides: 5, // looped slides should be the same
-                spaceBetween: 10,
-                centeredSlides: true,
-                slidesPerView: 'auto',
-                touchRatio: 0.2,
-                slideToClickedSlide: true,
-                navigation: {
-                    nextEl: '.swiper-button-next',
-                    prevEl: '.swiper-button-prev'
-                }
-            }
-        };
-    },
+  mounted() {
+    // 实现swiper双向控制
+    this.$nextTick(() => {
+      const swiperTop = this.$refs.swiperTop.swiper;
+      const swiperThumbs = this.$refs.swiperThumbs.swiper;
+      swiperTop.controller.control = swiperThumbs;
+      swiperThumbs.controller.control = swiperTop;
+    });
+  },
+  data() {
+    return {
+      //轮播大图配置
+      bigImg: [
+        {
+          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg",
+          id: 0,
+        },
+        {
+          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg",
+          id: 1,
+        },
+        {
+          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg",
+          id: 2,
+        },
+        {
+          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg",
+          id: 3,
+        },
+        {
+          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg",
+          id: 4,
+        },
+        {
+          url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg",
+          id: 5,
+        },
+      ],
+      swiperOptionTop: {
+        zoom: true,
+        loop: true,
+        loopedSlides: 5, // looped slides should be the same
+        spaceBetween: 10,
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true, //修改swiper的父元素时，自动初始化swiper
+        // autoplay: {  //自动轮播
+        //   delay: 2000,
+        //   disableOnInteraction: false
+        // },
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+      swiperOptionThumbs: {
+        loop: true,
+        loopedSlides: 5, // looped slides should be the same
+        spaceBetween: 10,
+        centeredSlides: true,
+        slidesPerView: "auto",
+        touchRatio: 0.2,
+        slideToClickedSlide: true,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+    };
+  },
 
-    methods: {}
+  methods: {},
 };
 </script>
 <style lang="less" scoped>
 .thumb-example {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .gallery-top {
+    // height: 80% !important;
+    height: 80% !important;
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    .gallery-top {
-        // height: 80% !important;
-        height: 80% !important;
-        width: 100%;
+  }
+  .gallery-thumbs {
+    height: 20% !important;
+    box-sizing: border-box;
+    padding: 10px 0px;
+    width: auto;
+    margin-left: 2px;
+    .swiper-button-next {
+      right: 0px;
     }
-    .gallery-thumbs {
-        height: 20% !important;
-        box-sizing: border-box;
-        padding: 10px 0px;
-        width: auto;
-        margin-left: 2px;
-        .swiper-button-next {
-            right: 0px;
-        }
-        .swiper-button-prev {
-            left: 0px;
-        }
-        .timeInfo {
-            position: absolute;
-            bottom: 0;
-            width: 100%;
-            background: #f0f0f0;
-            padding: 4px 0px;
-            font-size: 14px;
-            text-align: center;
-        }
+    .swiper-button-prev {
+      left: 0px;
     }
+    .timeInfo {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: #f0f0f0;
+      padding: 4px 0px;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
 }
 
 .swiper-slide {
-    background-size: cover;
-    background-position: center;
+  background-size: cover;
+  background-position: center;
 }
 
 .gallery-thumbs .swiper-slide {
-    // width: 20%;
-    // height: 80px;
-    // opacity: 0.4;
+  // width: 20%;
+  // height: 80px;
+  // opacity: 0.4;
 }
 .gallery-thumbs .swiper-slide-active {
-    border: 3px solid @color-primary;
+  border: 3px solid @color-primary;
 }
 </style>
-
diff --git a/src/views/management/monitoringEquipment/SIMCard/index.vue b/src/views/management/monitoringEquipment/SIMCard/index.vue
index 526e9ed..d85e39e 100644
--- a/src/views/management/monitoringEquipment/SIMCard/index.vue
+++ b/src/views/management/monitoringEquipment/SIMCard/index.vue
@@ -1,12 +1,153 @@
 <template>
-    <div>SIM卡管理</div>
+  <div class="simCardcontain">
+    <div class="simBtnGroup">
+      <el-button type="primary">新增</el-button>
+      <el-button type="primary">修改</el-button>
+      <el-button type="primary">删除</el-button>
+      <el-button type="primary">查询</el-button>
+      <el-button type="primary">质保延期</el-button>
+      <el-button type="primary">导入</el-button>
+      <el-button type="primary">导入模板下载</el-button>
+      <el-button type="primary">导出</el-button>
+    </div>
+    <div class="searchForm">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="单位:">
+          <el-select v-model="formInline.region" placeholder="活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网络类型:">
+          <el-select v-model="formInline.region" placeholder="活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态:">
+          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
+        </el-form-item>
+        <el-form-item label="是否已使用">
+          <el-select v-model="formInline.region" placeholder="活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电话号码:">
+          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="simTable">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="index" width="55"> </el-table-column>
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column label="单位">
+          <template slot-scope="scope">{{ scope.row.date }}</template>
+        </el-table-column>
+        <el-table-column prop="name" label="电话号码"> </el-table-column>
+        <el-table-column prop="address" label="网络类型" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="name" label="质保到期日"> </el-table-column>
+        <el-table-column prop="name" label="流量包(M)"> </el-table-column>
+        <el-table-column prop="name" label="告警阀值(%)"> </el-table-column>
+        <el-table-column prop="name" label="状态"> </el-table-column>
+        <el-table-column prop="name" label="是否已使用"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {};
-    }
+  data() {
+    return {
+      formInline: {
+        user: "",
+        region: "",
+      },
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+      multipleSelection: [],
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+  },
 };
 </script>
 <style lang="less">
-</style>
\ No newline at end of file
+.simCardcontain {
+  width: 100%;
+  height: 100%;
+  background: @color-white;
+  .simBtnGroup {
+    padding: 16px 8px;
+  }
+  .searchForm {
+    padding: 0px 8px;
+    .el-form {
+      .el-form-item {
+        margin-bottom: 0px;
+      }
+    }
+  }
+  .simTable {
+    padding: 16px 8px 0 8px;
+  }
+}
+</style>
diff --git a/src/views/management/monitoringEquipment/photographicDevice/index.vue b/src/views/management/monitoringEquipment/photographicDevice/index.vue
index ff1bb20..803ca28 100644
--- a/src/views/management/monitoringEquipment/photographicDevice/index.vue
+++ b/src/views/management/monitoringEquipment/photographicDevice/index.vue
@@ -1,12 +1,153 @@
 <template>
-    <div>拍照装置管理</div>
+  <div class="photoGraphicDevice">
+    <div class="photoGraphicBtnGroup">
+      <el-button type="primary">新增</el-button>
+      <el-button type="primary">修改</el-button>
+      <el-button type="primary">删除</el-button>
+      <el-button type="primary">查询</el-button>
+      <el-button type="primary">质保延期</el-button>
+      <el-button type="primary">导入</el-button>
+      <el-button type="primary">导入模板下载</el-button>
+      <el-button type="primary">导出</el-button>
+    </div>
+    <div class="searchForm">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="单位:">
+          <el-select v-model="formInline.region" placeholder="活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网络类型:">
+          <el-select v-model="formInline.region" placeholder="活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态:">
+          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
+        </el-form-item>
+        <el-form-item label="是否已使用">
+          <el-select v-model="formInline.region" placeholder="活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电话号码:">
+          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="photoGraphicTable">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="index" width="55"> </el-table-column>
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column label="单位">
+          <template slot-scope="scope">{{ scope.row.date }}</template>
+        </el-table-column>
+        <el-table-column prop="name" label="电话号码"> </el-table-column>
+        <el-table-column prop="address" label="网络类型" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="name" label="质保到期日"> </el-table-column>
+        <el-table-column prop="name" label="流量包(M)"> </el-table-column>
+        <el-table-column prop="name" label="告警阀值(%)"> </el-table-column>
+        <el-table-column prop="name" label="状态"> </el-table-column>
+        <el-table-column prop="name" label="是否已使用"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {};
-    }
+  data() {
+    return {
+      formInline: {
+        user: "",
+        region: "",
+      },
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+      multipleSelection: [],
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+  },
 };
 </script>
 <style lang="less">
-</style>
\ No newline at end of file
+.photoGraphicDevice {
+  width: 100%;
+  height: 100%;
+  background: @color-white;
+  .photoGraphicBtnGroup {
+    padding: 16px 8px;
+  }
+  .searchForm {
+    padding: 0px 8px;
+    .el-form {
+      .el-form-item {
+        margin-bottom: 0px;
+      }
+    }
+  }
+  .photoGraphicTable {
+    padding: 16px 8px 0 8px;
+  }
+}
+</style>
diff --git a/src/views/stritl/index.vue b/src/views/stritl/index.vue
index b2f32db..ed5d86f 100644
--- a/src/views/stritl/index.vue
+++ b/src/views/stritl/index.vue
@@ -1,465 +1,499 @@
 <template>
-    <div class="stritlBox">
-        <div class="stritl_left">
-            <div class="strLeftTop">
-                <h3>{{ numberUnits.name }}</h3>
-                <bar v-if="flag.baizhang" :legendData="unitXData" :seriesData="unitYData" :boxStyle="numberUnits.boxStyle"></bar>
-            </div>
-            <div class="strLeftMid">
-                <h3>{{ hazardClass.name }}</h3>
-                <pie v-if="flag.baizhang" :pieData="hazardPieData" :boxStyle="hazardClass.boxStyle"></pie>
-            </div>
-            <div class="strLeftBottom">
-                <h3>{{ monitLine.name }}</h3>
-                <bar v-if="flag.baizhang" :legendData="lineXData" :seriesData="lineYData" :boxStyle="monitLine.boxStyle"></bar>
-            </div>
+  <div class="stritlBox">
+    <div class="stritl_left">
+      <div class="strLeftTop">
+        <h3>{{ numberUnits.name }}</h3>
+        <bar
+          v-if="flag.baizhang"
+          :legendData="unitXData"
+          :seriesData="unitYData"
+          :boxStyle="numberUnits.boxStyle"
+        ></bar>
+      </div>
+      <div class="strLeftMid">
+        <h3>{{ hazardClass.name }}</h3>
+        <pie
+          v-if="flag.baizhang"
+          :pieData="hazardPieData"
+          :boxStyle="hazardClass.boxStyle"
+        ></pie>
+      </div>
+      <div class="strLeftBottom">
+        <h3>{{ monitLine.name }}</h3>
+        <bar
+          v-if="flag.baizhang"
+          :legendData="lineXData"
+          :seriesData="lineYData"
+          :boxStyle="monitLine.boxStyle"
+        ></bar>
+      </div>
+    </div>
+    <div class="stritl_center">
+      <div class="strCenterTop">
+        <mapChart></mapChart>
+      </div>
+      <div class="strCenterbottom">
+        <div class="bottomL">
+          <h3>{{ hazardType.name }}</h3>
+          <horizontalBar
+            :legendData="hazardTypeXData"
+            :seriesData="hazardTypeYData"
+            :boxStyle="hazardType.boxStyle"
+          ></horizontalBar>
         </div>
-        <div class="stritl_center">
-            <div class="strCenterTop">
-                <mapChart></mapChart>
-            </div>
-            <div class="strCenterbottom">
-                <div class="bottomL">
-                    <h3>{{ hazardType.name }}</h3>
-                    <horizontalBar
-                        :legendData="hazardTypeXData"
-                        :seriesData="hazardTypeYData"
-                        :boxStyle="hazardType.boxStyle"
-                    ></horizontalBar>
-                </div>
-                <div class="bottomM">
-                    <h3>{{ deviceInfo.name }}</h3>
-                    <div class="infoBox">
-                        <p>
-                            <span>在运数</span>
-                            <span>{{ infoData.deviceCount }}</span>
-                        </p>
-                        <p>
-                            <span>在线数</span>
-                            <span>{{ infoData.hasPhotoCount }}</span>
-                        </p>
-                        <p>
-                            <span>杆塔覆盖率</span>
-                            <span>{{ infoData.deviceCoverage }}%</span>
-                        </p>
-                        <p>
-                            <span>在线率</span>
-                            <span>{{ infoData.hasPhotoRate }}%</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="bottomR">
-                    <h3>{{ deviceOnline.name }}</h3>
-                    <pie :pieData="deviceOnline.onlineData" :boxStyle="deviceOnline.boxStyle"></pie>
-                </div>
-            </div>
+        <div class="bottomM">
+          <h3>{{ deviceInfo.name }}</h3>
+          <div class="infoBox">
+            <p>
+              <span>在运数</span>
+              <span>{{ infoData.deviceCount }}</span>
+            </p>
+            <p>
+              <span>在线数</span>
+              <span>{{ infoData.hasPhotoCount }}</span>
+            </p>
+            <p>
+              <span>杆塔覆盖率</span>
+              <span>{{ infoData.deviceCoverage }}%</span>
+            </p>
+            <p>
+              <span>在线率</span>
+              <span>{{ infoData.hasPhotoRate }}%</span>
+            </p>
+          </div>
         </div>
-        <div class="stritl_right">
-            <div class="strRightTop">
-                <h3>线路分布(总计：5)</h3>
-                <div class="tableBox">
-                    <el-table :data="lineAllData" style="width: 100%">
-                        <el-table-column prop="voltageLevelStr" label="电压等级" align="center"> </el-table-column>
-                        <el-table-column prop="lineCount" label="线路数" align="center"> </el-table-column>
-                        <el-table-column prop="towerCount" label="安装数" align="center"> </el-table-column>
-                        <el-table-column prop="deviceCoverage" label="安装覆盖率" align="center"> </el-table-column>
-                    </el-table>
-                </div>
-            </div>
-            <!-- <div class="strRightMid">5</div> -->
-            <div class="strRightBottom">
-                <h3>{{ patrolOpinions.name }}</h3>
-                <div class="suggest">
-                    <p class="attention"><span>注意：</span>{{ patrolOpinions.month }}</p>
-                    <p class="info">
-                        <span>{{ patrolOpinions.info1 }}</span>
-                        <span>{{ patrolOpinions.info2 }}</span>
-                    </p>
-                </div>
-                <h4>往年同期隐患比例分布图</h4>
-                <radar :radarName="radarName" :radarValue="radarValue" :boxStyle="patrolOpinions.boxStyle" :radarTitle="radarTitle"></radar>
-            </div>
+        <div class="bottomR">
+          <h3>{{ deviceOnline.name }}</h3>
+          <pie
+            :pieData="deviceOnline.onlineData"
+            :boxStyle="deviceOnline.boxStyle"
+          ></pie>
         </div>
+      </div>
     </div>
+    <div class="stritl_right">
+      <div class="strRightTop">
+        <h3>线路分布(总计：5)</h3>
+        <div class="tableBox">
+          <el-table :data="lineAllData" style="width: 100%">
+            <el-table-column
+              prop="voltageLevelStr"
+              label="电压等级"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column prop="lineCount" label="线路数" align="center">
+            </el-table-column>
+            <el-table-column prop="towerCount" label="安装数" align="center">
+            </el-table-column>
+            <el-table-column
+              prop="deviceCoverage"
+              label="安装覆盖率"
+              align="center"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <!-- <div class="strRightMid">5</div> -->
+      <div class="strRightBottom">
+        <h3>{{ patrolOpinions.name }}</h3>
+        <div class="suggest">
+          <p class="attention"><span>注意：</span>{{ patrolOpinions.month }}</p>
+          <p class="info">
+            <span>{{ patrolOpinions.info1 }}</span>
+            <span>{{ patrolOpinions.info2 }}</span>
+          </p>
+        </div>
+        <h4>往年同期隐患比例分布图</h4>
+        <radar
+          :radarName="radarName"
+          :radarValue="radarValue"
+          :boxStyle="patrolOpinions.boxStyle"
+          :radarTitle="radarTitle"
+        ></radar>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import bar from './chartFiles/bar';
-import horizontalBar from './chartFiles/horizontalBar';
-import pie from './chartFiles/pie';
-import radar from './chartFiles/radar';
-import mapChart from './chartFiles/mapChart';
+import bar from "./chartFiles/bar";
+import horizontalBar from "./chartFiles/horizontalBar";
+import pie from "./chartFiles/pie";
+import radar from "./chartFiles/radar";
+import mapChart from "./chartFiles/mapChart";
 import {
-    getLineDataByVoltage,
-    getCapturePointDataByDanger,
-    getHostDeviceDataByVoltage,
-    getPhotoAlarmDataByAlarmType,
-    getCompanyDeviceInfo,
-    getByName,
-    getLastYearAlarmReasons
-} from '@/utils/api/index';
+  getLineDataByVoltage,
+  getCapturePointDataByDanger,
+  getHostDeviceDataByVoltage,
+  getPhotoAlarmDataByAlarmType,
+  getCompanyDeviceInfo,
+  getByName,
+  getLastYearAlarmReasons,
+} from "@/utils/api/index";
 export default {
-    data() {
-        return {
-            name: localStorage.getItem('ms_username'),
-            flag: {
-                baizhang: false //是否开始渲染子组件
-            },
-            //装置数量统计
-            unitAllData: [],
-            unitXData: [],
-            unitYData: [],
-            numberUnits: {
-                name: '装置数量统计',
-                boxStyle: {
-                    width: '100%',
-                    height: '200px'
-                }
-            },
-            //监控路线统计
-            lineAllData: [],
-            lineXData: [],
-            lineYData: [],
-            monitLine: {
-                name: '监控路线统计',
-                boxStyle: {
-                    width: '100%',
-                    height: '200px'
-                }
-            },
-            //隐患分类统计
-            hazardData: [],
-            hazardPieData: [],
-            hazardClass: {
-                name: '隐患分类统计',
-                boxStyle: {
-                    width: '100%',
-                    height: '200px'
-                }
-            },
-            //隐患类型统计
-            hazardTypeData: [],
-            hazardTypeXData: [],
-            hazardTypeYData: [],
-            hazardType: {
-                name: '隐患类型统计',
-                boxStyle: {
-                    width: '100%',
-                    height: '160px'
-                }
-            },
-            //装置信息统计
-            infoData: [],
-            deviceInfo: {
-                name: '装置信息统计',
-                infoData: [
-                    { value: 24, name: '在运数' },
-                    { value: 10, name: '在线数' },
-                    { value: '92.31%', name: '杆塔覆盖率' },
-                    { value: '41.67%', name: '在线率' }
-                ]
-            },
-            deviceOnline: {
-                name: '装置在线统计',
-                onlineData: [
-                    { value: 55, name: '离线' },
-                    { value: 45, name: '在线' }
-                ],
-                boxStyle: {
-                    width: '100%',
-                    height: '160px'
-                }
-            },
-            //隐患比例分布图
-            patrolData: [],
-            radarName: [],
-            radarValue: [],
-            radarTitle: '隐患比例分布图',
-            patrolOpinions: {
-                name: '巡查意见',
-                month: '三月份',
-                info1: '1.鸟类活动开展频繁，需注意鸟类筑巢，大型鸟类驻留。',
-                info2: '2.大风天气较多的季节，要注意对放风筝行为的监控，同时加强巡视对导线悬挂异物的观察。',
-                boxStyle: {
-                    width: '100%',
-                    height: '160px'
-                }
-            }
-        };
+  data() {
+    return {
+      name: localStorage.getItem("ms_username"),
+      flag: {
+        baizhang: false, //是否开始渲染子组件
+      },
+      //装置数量统计
+      unitAllData: [],
+      unitXData: [],
+      unitYData: [],
+      numberUnits: {
+        name: "装置数量统计",
+        boxStyle: {
+          width: "100%",
+          height: "200px",
+        },
+      },
+      //监控路线统计
+      lineAllData: [],
+      lineXData: [],
+      lineYData: [],
+      monitLine: {
+        name: "监控路线统计",
+        boxStyle: {
+          width: "100%",
+          height: "200px",
+        },
+      },
+      //隐患分类统计
+      hazardData: [],
+      hazardPieData: [],
+      hazardClass: {
+        name: "隐患分类统计",
+        boxStyle: {
+          width: "100%",
+          height: "200px",
+        },
+      },
+      //隐患类型统计
+      hazardTypeData: [],
+      hazardTypeXData: [],
+      hazardTypeYData: [],
+      hazardType: {
+        name: "隐患类型统计",
+        boxStyle: {
+          width: "100%",
+          height: "160px",
+        },
+      },
+      //装置信息统计
+      infoData: [],
+      deviceInfo: {
+        name: "装置信息统计",
+        infoData: [
+          { value: 24, name: "在运数" },
+          { value: 10, name: "在线数" },
+          { value: "92.31%", name: "杆塔覆盖率" },
+          { value: "41.67%", name: "在线率" },
+        ],
+      },
+      deviceOnline: {
+        name: "装置在线统计",
+        onlineData: [
+          { value: 55, name: "离线" },
+          { value: 45, name: "在线" },
+        ],
+        boxStyle: {
+          width: "100%",
+          height: "160px",
+        },
+      },
+      //隐患比例分布图
+      patrolData: [],
+      radarName: [],
+      radarValue: [],
+      radarTitle: "隐患比例分布图",
+      patrolOpinions: {
+        name: "巡查意见",
+        month: "三月份",
+        info1: "1.鸟类活动开展频繁，需注意鸟类筑巢，大型鸟类驻留。",
+        info2:
+          "2.大风天气较多的季节，要注意对放风筝行为的监控，同时加强巡视对导线悬挂异物的观察。",
+        boxStyle: {
+          width: "100%",
+          height: "160px",
+        },
+      },
+    };
+  },
+  components: {
+    bar,
+    horizontalBar,
+    pie,
+    radar,
+    mapChart,
+  },
+  computed: {
+    role() {
+      return this.name === "admin" ? "超级管理员" : "普通用户";
     },
-    components: {
-        bar,
-        horizontalBar,
-        pie,
-        radar,
-        mapChart
-    },
-    computed: {
-        role() {
-            return this.name === 'admin' ? '超级管理员' : '普通用户';
-        }
-    },
-    methods: {},
-    created() {
-        //装置数量统计
-        getHostDeviceDataByVoltage({
-            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
-        }).then((res) => {
-            this.unitAllData = res.data.data;
-            for (var i = 0; i < this.unitAllData.length; i++) {
-                this.unitXData.push(this.unitAllData[i].name);
-                this.unitYData.push(this.unitAllData[i].value);
-            }
-            this.flag.baizhang = true;
-        });
+  },
+  methods: {},
+  created() {
+    //装置数量统计
+    getHostDeviceDataByVoltage({
+      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
+    }).then((res) => {
+      this.unitAllData = res.data.data;
+      for (var i = 0; i < this.unitAllData.length; i++) {
+        this.unitXData.push(this.unitAllData[i].name);
+        this.unitYData.push(this.unitAllData[i].value);
+      }
+      this.flag.baizhang = true;
+    });
 
-        //装置信息统计
-        getCompanyDeviceInfo({
-            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
-        }).then((res) => {
-            this.infoData = res.data;
-        });
-        //线路分布
-        getLineDataByVoltage({
-            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
-        }).then((res) => {
-            this.lineAllData = res.data;
-            console.log(this.lineAllData);
-            for (var i = 0; i < this.lineAllData.length; i++) {
-                this.lineXData.push(this.lineAllData[i].voltageLevelStr);
-                this.lineYData.push(this.lineAllData[i].lineCount);
-            }
-            this.flag.baizhang = true;
-        });
-        //隐患分类统计
-        getCapturePointDataByDanger({
-            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
-        }).then((res) => {
-            this.hazardData = res.data;
+    //装置信息统计
+    getCompanyDeviceInfo({
+      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
+    }).then((res) => {
+      this.infoData = res.data;
+    });
+    //线路分布
+    getLineDataByVoltage({
+      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
+    }).then((res) => {
+      this.lineAllData = res.data;
+      console.log(this.lineAllData);
+      for (var i = 0; i < this.lineAllData.length; i++) {
+        this.lineXData.push(this.lineAllData[i].voltageLevelStr);
+        this.lineYData.push(this.lineAllData[i].lineCount);
+      }
+      this.flag.baizhang = true;
+    });
+    //隐患分类统计
+    getCapturePointDataByDanger({
+      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
+    }).then((res) => {
+      this.hazardData = res.data;
 
-            // let name1 = this.hazardData.nameList;
-            // let value1 = this.hazardData.valueList;
-            this.hazardPieData = res.data.list;
-            console.log(this.hazardPieData);
+      // let name1 = this.hazardData.nameList;
+      // let value1 = this.hazardData.valueList;
+      this.hazardPieData = res.data.list;
+      console.log(this.hazardPieData);
 
-            this.flag.baizhang = true;
-        });
+      this.flag.baizhang = true;
+    });
 
-        //隐患类型统计
-        getPhotoAlarmDataByAlarmType({
-            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
-        }).then((res) => {
-            this.hazardTypeData = res.data.dataList;
+    //隐患类型统计
+    getPhotoAlarmDataByAlarmType({
+      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
+    }).then((res) => {
+      this.hazardTypeData = res.data.dataList;
 
-            for (var i = 0; i < this.hazardTypeData.length; i++) {
-                this.hazardTypeXData.push(this.hazardTypeData[i].name);
-                this.hazardTypeYData.push(this.hazardTypeData[i].acount);
-            }
-            this.flag.baizhang = true;
-        });
+      for (var i = 0; i < this.hazardTypeData.length; i++) {
+        this.hazardTypeXData.push(this.hazardTypeData[i].name);
+        this.hazardTypeYData.push(this.hazardTypeData[i].acount);
+      }
+      this.flag.baizhang = true;
+    });
 
-        //巡视意见
-        getByName({
-            name: '三月'
-        }).then((res) => {
-            console.log(res);
-        });
-        //雷达图数据
-        getLastYearAlarmReasons({
-            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
-            month: '03'
-        }).then((res) => {
-            console.log(res);
-            this.patrolData = res.data;
-            console.log(this.patrolData);
-            let obj = {};
-            this.patrolData.forEach((item) => {
-                if (obj.hasOwnProperty(item.alarmInfo)) {
-                    obj[item.alarmInfo] += item.num;
-                } else {
-                    obj[item.alarmInfo] = item.num;
-                }
-            });
-            console.log(obj);
-            //对象转化成数组对象
-            for (let i in obj) {
-                console.log(i);
-                this.radarName.push({
-                    name: i
-                });
-            }
-            console.log(this.radarName);
-            this.radarValue = Object.values(obj);
-            console.log(this.radarValue);
+    //巡视意见
+    getByName({
+      name: "三月",
+    }).then((res) => {
+      console.log(res);
+    });
+    //雷达图数据
+    getLastYearAlarmReasons({
+      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
+      month: "04",
+    }).then((res) => {
+      console.log(res);
+      this.patrolData = res.data;
+      console.log(this.patrolData);
+      let obj = {};
+      this.patrolData.forEach((item) => {
+        if (obj.hasOwnProperty(item.alarmInfo)) {
+          obj[item.alarmInfo] += item.num;
+        } else {
+          obj[item.alarmInfo] = item.num;
+        }
+      });
+      console.log(obj);
+      //对象转化成数组对象
+      for (let i in obj) {
+        console.log(i);
+        this.radarName.push({
+          name: i,
         });
-    }
+      }
+      console.log(this.radarName);
+      this.radarValue = Object.values(obj);
+      console.log(this.radarValue);
+    });
+  },
 };
 </script>
 
-
-<style  lang="less">
+<style lang="less">
 .stritlBox {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .stritl_left,
+  .stritl_right {
+    width: 20%;
+    margin: 8px;
+  }
+  .stritl_left,
+  .stritl_right {
     display: flex;
-    .stritl_left,
-    .stritl_right {
-        width: 20%;
-        margin: 8px;
+    flex-direction: column;
+    justify-content: space-between;
+    .strLeftTop,
+    .strLeftMid,
+    .strLeftBottom {
+      height: 30%;
+      box-sizing: content-box;
+      box-shadow: @box-shadow-basic;
+      border: 1px solid @border-color-base;
+      background-color: @color-white;
+      border-radius: 4px;
+      padding: 8px;
+      h3 {
+        margin-bottom: 8px;
+        font-size: 15px;
+      }
     }
-    .stritl_left,
-    .stritl_right {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .strLeftTop,
-        .strLeftMid,
-        .strLeftBottom {
-            height: 30%;
-            box-sizing: content-box;
-            box-shadow:@box-shadow-basic;
-            border: 1px solid @border-color-base;
-            background-color: @color-white;
-            border-radius: 4px;
-            padding: 8px;
-            h3 {
-                margin-bottom: 8px;
-                font-size: 15px;
-            }
+    .strRightTop,
+    .strRightBottom {
+      height: 46%;
+      box-sizing: content-box;
+      box-shadow: @box-shadow-basic;
+      border: 1px solid @border-color-base;
+      background-color: @color-white;
+      border-radius: 4px;
+      padding: 8px;
+      h3 {
+        margin-bottom: 8px;
+        font-size: 15px;
+      }
+    }
+    .strRightTop {
+      position: relative;
+      .tableBox {
+        position: absolute;
+        width: calc(100% - 16px);
+        .el-table .cell {
+          white-space: normal;
+          word-break: break-all;
         }
-        .strRightTop,
-        .strRightBottom {
-            height: 46%;
-            box-sizing: content-box;
-            box-shadow:@box-shadow-basic;
-            border: 1px solid @border-color-base;
-            background-color: @color-white;
-            border-radius: 4px;
-            padding: 8px;
-            h3 {
-                margin-bottom: 8px;
-                font-size: 15px;
-            }
+        .el-table th.el-table__cell > .cell {
+          min-width: 58px;
+          padding-left: 0px;
+          padding-right: 0px;
         }
-        .strRightTop {
-            position: relative;
-            .tableBox {
-                position: absolute;
-                width: calc(100% - 16px);
-                .el-table .cell {
-                    white-space: normal;
-                    word-break: break-all;
-                }
-                .el-table th.el-table__cell > .cell {
-                    min-width: 58px;
-                    padding-left: 0px;
-                    padding-right: 0px;
-                }
-            }
+      }
+    }
+    .strRightBottom {
+      h3 {
+        margin-bottom: 8px;
+        font-size: 15px;
+      }
+      .suggest {
+        .attention {
+          font-size: 14px;
+          margin-bottom: 8px;
+          span {
+            font-size: 16px;
+            color: @color-red;
+          }
         }
-        .strRightBottom {
-            h3 {
-                margin-bottom: 8px;
-                font-size: 15px;
-            }
-            .suggest {
-                .attention {
-                    font-size: 14px;
-                    margin-bottom: 8px;
-                    span {
-                        font-size: 16px;
-                        color: @color-red;
-                    }
-                }
-                .info {
-                    display: flex;
-                    flex-direction: column;
-                    font-size: 14px;
-                    line-height: 22px;
-                }
-            }
-            h4 {
-                margin-top: 8px;
-                margin-bottom: 8px;
-            }
+        .info {
+          display: flex;
+          flex-direction: column;
+          font-size: 14px;
+          line-height: 22px;
         }
+      }
+      h4 {
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+    }
+  }
+  .stritl_center {
+    flex: 1;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    .strCenterTop {
+      flex: 1;
+      box-sizing: content-box;
+      box-shadow: @box-shadow-basic;
+      border: 1px solid @border-color-base;
+      background-color: @color-white;
+      border-radius: 4px;
+      //padding: 8px;
     }
-    .stritl_center {
-        flex: 1;
-        margin: 10px;
-        display: flex;
-        flex-direction: column;
-        .strCenterTop {
-            flex: 1;
-            box-sizing: content-box;
-            box-shadow:@box-shadow-basic;
-            border: 1px solid @border-color-base;
-            background-color: @color-white;
-            border-radius: 4px;
-            //padding: 8px;
+    .strCenterbottom {
+      margin-top: 24px;
+      height: 210px;
+      //border: 1px solid #000;
+      box-sizing: content-box;
+      display: flex;
+      justify-content: space-between;
+      .bottomL,
+      .bottomM,
+      .bottomR {
+        border: 1px solid #000;
+        box-sizing: content-box;
+        width: 30%;
+        box-shadow: @box-shadow-basic;
+        border: 1px solid @border-color-base;
+        background-color: @color-white;
+        border-radius: 4px;
+        padding: 8px;
+        h3 {
+          margin-bottom: 8px;
+          font-size: 15px;
         }
-        .strCenterbottom {
-            margin-top: 24px;
-            height: 210px;
-            //border: 1px solid #000;
-            box-sizing: content-box;
+      }
+      .bottomM {
+        .infoBox {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          p {
+            width: 40%;
+            height: 68px;
+            background: #fcc;
+            text-align: center;
+            margin: 6px;
             display: flex;
-            justify-content: space-between;
-            .bottomL,
-            .bottomM,
-            .bottomR {
-                border: 1px solid #000;
-                box-sizing: content-box;
-                width: 30%;
-                box-shadow:@box-shadow-basic;
-                border: 1px solid @border-color-base;
-                background-color: @color-white;
-                border-radius: 4px;
-                padding: 8px;
-                h3 {
-                    margin-bottom: 8px;
-                    font-size: 15px;
-                }
+            flex-direction: column;
+            justify-content: space-around;
+            span {
+              color: #333;
+              font-size: 14px;
+              &:last-child {
+                font-size: 20px;
+                margin-top: 5px;
+                font-weight: bold;
+              }
+            }
+            &:first-child {
+              background: url("../../assets/img/border-blue.png");
+            }
+            &:nth-child(2) {
+              background: url("../../assets/img/border-green.png");
+            }
+            &:nth-child(3) {
+              background: url("../../assets/img/border-yellow.png");
             }
-            .bottomM {
-                .infoBox {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-around;
-                    p {
-                        width: 40%;
-                        height: 68px;
-                        background: #fcc;
-                        text-align: center;
-                        margin: 6px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        span {
-                            color: #333;
-                            font-size: 14px;
-                            &:last-child {
-                                font-size: 20px;
-                                margin-top: 5px;
-                                font-weight: bold;
-                            }
-                        }
-                        &:first-child {
-                            background: url('../../assets/img/border-blue.png');
-                        }
-                        &:nth-child(2) {
-                            background: url('../../assets/img/border-green.png');
-                        }
-                        &:nth-child(3) {
-                            background: url('../../assets/img/border-yellow.png');
-                        }
-                        &:nth-child(4) {
-                            background: url('../../assets/img/border-gray.png');
-                        }
-                    }
-                }
+            &:nth-child(4) {
+              background: url("../../assets/img/border-gray.png");
             }
+          }
         }
+      }
     }
+  }
 }
 </style>