样式修改

src/components/orgTree.vue

@@ -209,7 +209,7 @@ export default {
 .el-select-tree {
   width: 300px;
   height: calc(100vh - 10px);
-  background: rgba(238, 247, 254, 0.39);
+  background: rgba(255, 255, 255, 1);
   .tree_header {
     display: flex;
     justify-content: center;
@@ -224,4 +224,7 @@ export default {
   // border: 1px dotted;
   // display: inline-block;
 }
+.el-tree-node.is-current > .el-tree-node__content {
+  background-color: #deeaff !important;
+}
 </style>
\ No newline at end of file

src/layout/components/AppMain.vue

@@ -20,13 +20,13 @@ export default {
 
 <style scoped>
 .app-main {
-  margin: 0 20px 20px 20px;
-  padding: 20px;
+  margin: 0 0px 20px 20px;
+  padding: 20px 20px 20px 20px;
   background: #fff;
   border-radius: 8px;
   /*50 = navbar  */
   min-height: calc(100vh - 50px);
-  width: 100%;
+  width: 98%;
   position: relative;
   overflow: hidden;
 }

src/layout/components/Navbar.vue

@@ -11,8 +11,9 @@
         </span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出</span>
+            <span style="display:block;">退出登录</span>
           </el-dropdown-item>
+         
         </el-dropdown-menu>
       </el-dropdown>
       <span style="color: white; padding-right: 10px"> {{ dateTime }}</span>
@@ -115,7 +116,7 @@ export default {
     line-height: 50px;
     position: absolute;
     top: 5px;
-    right: 20px;
+    right: 30px;
 
     &:focus {
       outline: none;
@@ -163,4 +164,34 @@ export default {
     }
   }
 }
+.el-dropdown-menu__item{
+  color:#B2DDFF;
+}
+.el-popper[x-placement^=bottom] {
+    margin-top: 5px;
+}
+.el-dropdown-menu__item--divided{
+  border:none;
+  margin-top: 0;
+}
+.el-dropdown-menu__item--divided:before{
+  content: '';
+    height: 6px;
+    display: none;
+    margin: 0;
+    background-color: transparent;
+}
+</style>
+<style>
+  .el-popper .popper__arrow{
+    display: none !important;
+  }
+  .el-dropdown-menu{
+    padding:5px 0;
+    background: #2066f9;
+  }
+  .el-dropdown-menu__item:not(.is-disabled):hover{
+    background-color: #1a52c7;
+    color: #fff;
+  }
 </style>

src/router/index.js

@@ -188,7 +188,13 @@ export const constantRoutes = [
       name: 'UserList',
       component: () => import('@/views/user/userList'),
       meta: { title: '用户信息列表' }
-    }
+    },
+    {
+      path: 'userLog',
+      name: 'UserLog',
+      component: () => import('@/views/user/userLog'),
+      meta: { title: '用户操作日志' }
+    },
     ]
   },
   // 404 page must be placed at the end !!!

src/styles/common.scss

@@ -22,3 +22,6 @@
   display: flex;
   flex-direction: column;
 }
+.leakage-cable .leakage-top{
+  padding-right: 10px;
+}

src/styles/element-ui.scss

@@ -71,7 +71,7 @@
 // button 
 .el-button--primary {
   color: #fff;
-  background: rgba(11, 65, 177);
+  background: #2066F9 !important;
   opacity: 1;
   border-radius: 4px;
 }

src/styles/sidebar.scss

@@ -207,6 +207,7 @@
     &:hover {
       // you can use $subMenuHover
       background-color: $menuHover !important;
+      color:#fff !important;
     }
   }
 

src/styles/variables.scss

 // sidebar
-$menuText:#fff;
-$menuActiveText:#333;
-$subMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#B2DDFF;//标题未选中颜色
+$menuActiveText:#fff;//标题选中
+$subMenuActiveText:#fff; //子菜单选中颜色//https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#2066F9;
-$menuHover:#263445;
+$menuBg:#2066F9;//标题背景
+$menuHover:#1a52c7;//标题悬浮色
 
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg:#2066F9;
+$subMenuHover:#1a52c7;
 
 $sideBarWidth: 120px;
 

src/views/alarm/cableTime/index.vue

 <template>
   <!-- 漏缆实时状态 -->
-  <div class="leakage-cable">
-    <div class="leakage-top">
-      <el-button-group>
+  <div class="leakage-cable"><el-button-group>
         <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
       </el-button-group>
+    <div class="leakage-top">
+       <div style="color: #666666">
+      共5条数据
+    </div>
       <div class="operate-btn">
         <el-button type="primary">刷新</el-button>
         <el-button type="primary">查询</el-button>
         <el-button type="primary">导出</el-button>
       </div>
     </div>
-    <div style="color: #666666">
-      共5条数据
-    </div>
+   
     <el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
       <el-table-column type="index" label="序列号" width="100" align="center" />
       <el-table-column prop="name" label="基站名称" width="180" align="center" />

src/views/alarm/device/index.vue

 <template>
   <!-- 漏缆实时状态 -->
-  <div class="leakage-cable">
-    <div class="leakage-top">
-      <el-button-group>
+  <div class="leakage-cable"> 
+     <el-button-group>
         <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
       </el-button-group>
-      
+    <div class="leakage-top">
+    
+       <div style="color: #666666">共6条数据</div>
       <div class="operate-btn">
         <el-button type="primary">刷新</el-button>
         <el-button type="primary">查询</el-button>
         <el-button type="primary">导出</el-button>
       </div>
     </div>
-    <div>
-      共6条数据
-    </div>
+   
     <el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
       <el-table-column prop="equipment1" label="网元设备" align="center" />
       <el-table-column prop="state1" label="连接状态" align="center" />

src/views/dashboard/index.vue

@@ -9,20 +9,20 @@
             <span>{{ item.title }}</span>
             <el-button v-if="item.option" style="float: right; padding: 3px 0;margin-right:20px" type="text">保存</el-button>
           </div>
-          <div v-for="k in item.list" :key="k.name" class="text">
+          <div v-for="k in item.list" :key="k.name" :class="item.list.length<=2? 'text2' : 'text'">
             <el-row :gutter="24">
               <el-col :span="10">
                 <div class="item_name">{{ k.name }}</div>
               </el-col>
-              <el-col :span="14">
-                <div v-if="item.option">
-                  <el-input v-model="k.value" size="mini" clearable placeholder="请输入内容">{{ k.value }}</el-input>
+              <el-col :span="10">
+                <div  v-if="item.option">
+                  <el-input v-model="k.value"  clearable placeholder="请输入内容">{{ k.value }}</el-input>
                 </div>
                 <el-row :gutter="20" v-else-if="k.handle">
                   <el-col :span="10" class="value_handle">{{ k.value }}</el-col>
-                  <el-col :span="10"><el-button type="primary" size="mini">处理告警</el-button></el-col>
+                  <el-col :span="10"><el-button class="alarmbtn" type="primary" size="mini">处理告警</el-button></el-col>
                 </el-row>
-                <div v-else>{{ k.value }}</div>
+                <div class="item_data" v-else>{{ k.value }}</div>
               </el-col>
             </el-row>
           </div>
@@ -69,7 +69,7 @@ export default {
 ::v-deep.el-card {
   border: 1px solid #E3E3E3;
   border-radius: 8px;
-  min-height: 300px;
+  min-height: 243px;
   .el-card__header {
     font-size: 18px;
     color: #333333;
@@ -78,25 +78,88 @@ export default {
     background: rgba(226, 235, 255, 0.39);
     opacity: 1;
   }
+  .el-card__body {
+    padding: 0px;
+}
 }
 // .el-col {
 //   margin-bottom: 20px;
 // }
 .text {
   // display: flex;
-  padding: 20px;
+  padding: 10px 20px 10px 20px;
   border-bottom: 1px solid #E3E3E3;
   &:last-child {
     border-bottom: none;
+  }
+   .item_name ,.item_data ,.value_handle {
+     height: 16px;
+    line-height: 16px;
+     margin-top: 12px;
+    margin-bottom: 12px;
   }
   .item_name {
     width: 262px;
-    height: 26px;
-    line-height: 1;
+    height: 16px;
+    line-height: 16px;
+    color:#7E7E7E;
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  .item_data{
+   
   }
   .value_handle {
     color:red;
     margin-right: 10px;
+   
+  }
+  .alarmbtn{
+     margin-top: 6px;
+    margin-bottom: 6px;
   }
+  .el-card:last-child .text {
+  
+    border-bottom: none !important;
 }
+}
+.text2 {
+  // display: flex;
+  padding: 10px 20px 10px 20px;
+  border-bottom: 1px solid #E3E3E3;
+  .item_name ,.item_data ,.value_handle {
+     height: 16px;
+    line-height: 16px;
+     margin-top: 12px;
+    margin-bottom: 12px;
+  }
+  .item_name {
+    width: 262px;
+    height: 16px;
+    line-height: 16px;
+    color:#7E7E7E;
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  .item_data{
+   
+  }
+  .value_handle {
+    color:red;
+    margin-right: 10px;
+   
+  }
+  .alarmbtn{
+     margin-top: 6px;
+    margin-bottom: 6px;
+  }
+  .el-card:last-child .text {
+  
+    border-bottom: none !important;
+}
+}
+ 
+
 </style>

src/views/history/deviceLinkRepair/index.vue

@@ -34,11 +34,11 @@
       </el-table-column>
       <el-table-column prop="netDevice2" label="网元设备" align="center">
       </el-table-column>
-      <el-table-column prop="repairPerson" label="网元设备" align="center">
+      <el-table-column prop="repairPerson" label="维修人员信息" align="center">
       </el-table-column>
       <el-table-column
         prop="linkRepairDate"
-        label="链接告警维修时间"
+        label="连接告警维修时间"
   
         align="center"
       />

src/views/setting/statistics/index.vue

 <template>
-  <div class="statistics">
-    <div class="header">
-      <div class="header-left">
-        <el-button-group>
-          <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
-        </el-button-group>
-      </div>
-      <div class="header-right">
+  <div class="leakage-cable">
+    <el-button-group>
+      <el-button
+        v-for="item in tabs"
+        :key="item.key"
+        :type="activeName === item.key ? 'primary' : ''"
+        @click="changeType(item)"
+        >{{ item.label }}</el-button
+      >
+    </el-button-group>
+    <div class="leakage-top">
+      <div style="color: #666666">共10条数据</div>
+
+      <div class="operate-btn">
         <el-button
           :type="multipleSelection.length ? 'primary' : 'info'"
           :disabled="!multipleSelection.length"
           @click="delData"
-        >删除</el-button>
+          >删除</el-button
+        >
         <el-button type="primary" @click="refresh">刷新</el-button>
         <el-button type="primary" @click="query">查询</el-button>
-        <el-button
-          type="primary"
-          @click="exportData"
-        >导出</el-button>
+        <el-button type="primary" @click="exportData">导出</el-button>
       </div>
     </div>
     <el-table
@@ -28,7 +32,12 @@
       style="width: 100%"
       :row-class-name="tableRowClassName"
       :row-style="{ height: '50px' }"
-      :header-cell-style="{background:'#eaf1fe',color:'#000', fontWeight: 700, height: '50px'}"
+      :header-cell-style="{
+        background: '#eaf1fe',
+        color: '#000',
+        fontWeight: 700,
+        height: '50px',
+      }"
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
@@ -53,11 +62,9 @@
         align="center"
       >
         <template slot-scope="{ row }">
-          <el-link
-            type="primary"
-            :underline="false"
-            @click="handleView(row)"
-          >查看</el-link>
+          <el-link type="primary" :underline="false" @click="handleView(row)"
+            >查看</el-link
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -72,148 +79,169 @@
 </template>
 
 <script>
-import Pagination from '@/components/Pagination'
+import Pagination from "@/components/Pagination";
 export default {
   components: { Pagination },
   data() {
     return {
       searchForm: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       total: 10,
-      activeName: '0',
+      activeName: "0",
       tabs: [
         {
-          label: '铁路线',
-          key: '0'
+          label: "铁路线",
+          key: "0",
         },
         {
-          label: '站点',
-          key: '1'
+          label: "站点",
+          key: "1",
         },
         {
-          label: 'FSU',
-          key: '2'
+          label: "FSU",
+          key: "2",
         },
         {
-          label: '检测设备',
-          key: '3'
+          label: "检测设备",
+          key: "3",
         },
         {
-          label: '漏缆',
-          key: '4'
+          label: "漏缆",
+          key: "4",
         },
         {
-          label: '天馈线',
-          key: '5'
-        }
+          label: "天馈线",
+          key: "5",
+        },
       ],
       tableData: [
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
         },
         {
-          name: '张呼铁路客运专线',
-          start: '张家口',
-          end: '呼和浩特',
-          long: 286.8
-        }
+          name: "张呼铁路客运专线",
+          start: "张家口",
+          end: "呼和浩特",
+          long: 286.8,
+        },
       ],
-      multipleSelection: []
-    }
+      multipleSelection: [],
+    };
   },
   methods: {
     tableRowClassName({ row, rowIndex }) {
-      return rowIndex % 2 === 0 ? '' : 'single-row'
+      return rowIndex % 2 === 0 ? "" : "single-row";
     },
     changeType(item) {
-      this.activeName = item.key
+      this.activeName = item.key;
     },
     delData() {},
     refresh() {},
     query() {},
     exportData() {},
     handleSelectionChange(val) {
-      this.multipleSelection = val
+      this.multipleSelection = val;
     },
     handleView() {},
     handlePageChange(pageData) {
-      this.searchForm.pageSize = pageData.size
-      this.searchForm.pageNum = pageData.page
-    }
-  }
-}
+      this.searchForm.pageSize = pageData.size;
+      this.searchForm.pageNum = pageData.page;
+    },
+  },
+};
 </script>
 
-<style lang="scss" >
-.el-table th.el-table__cell>.cell {
-      color: #747679;
+<style lang="scss" scoped>
+.leakage-cable {
+  .leakage-top {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+  & ::v-deep .cell {
+    color: #333333;
+  }
+  & ::v-deep .stripe {
+    background-color: #eaf1fe;
+  }
+  & ::v-deep .red {
+    background-color: #f00;
+  }
+  & ::v-deep .green {
+    background-color: green;
+  }
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
 }
+</style>
+<style lang="scss">
 .statistics-table {
-  padding-top: 50px;
   .single-row {
     background: #f1f6ff;
   }
-}
-.statistics {
-  padding: 10px;
-  .header {
-    display: flex;
-    justify-content: space-between;
-    .header-right {
-    }
+  td {
+    padding: 5px !important;
   }
 }
 </style>

src/views/user/userList/index.vue

 <template>
-  <div>
-    <el-row class="header">
-      <el-col :span="4">
-        <div class="message">共<span>5</span>条数据</div>
-      </el-col>
-      <el-col :span="2" :offset="18">
-        <el-button type="primary">添加新用户</el-button>
-      </el-col>
-    </el-row>
+  <div class="leakage-cable"> 
+     <div class="leakage-top">
+      <div style="color: #666666">共10条数据</div>
+
+      <div class="operate-btn">
+     
+        <el-button type="primary" >添加新用户</el-button>
+      </div>
+    </div>
     <el-table
       v-loading="loading"
       :data="tableData"
@@ -105,14 +105,34 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.message {
-  display: inline-block;
-  margin-top: 20px;
-  font-size: 16px;
-  color:#666666;
-}
-.header {
-  margin-bottom: 20px;
+.leakage-cable {
+  .leakage-top {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+  & ::v-deep .cell {
+    color: #333333;
+  }
+  & ::v-deep .stripe {
+    background-color: #eaf1fe;
+  }
+  & ::v-deep .red {
+    background-color: #f00;
+  }
+  & ::v-deep .green {
+    background-color: green;
+  }
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
 }
 </style>
 <style lang="scss">
@@ -124,4 +144,4 @@ export default {
     padding: 5px !important;
   }
 }
-</style>
+</style>
\ No newline at end of file

src/views/user/userLog/index.vue

+<template>
+  <!-- 用户操作日志 -->
+  <div class="leakage-cable">
+    <div class="leakage-top">
+      <div style="color: #666666">共6条数据</div>
+      <div class="operate-btn">
+        <!-- <el-button
+          :type="multipleSelection.length ? 'primary' : 'info'"
+          :disabled="!multipleSelection.length"
+          >删除</el-button
+        > -->
+        <el-button type="primary">刷新</el-button>
+        <el-button type="primary">查询</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+        style="width: 100%"
+      :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column prop="name" label="用户名" align="center" />
+      <el-table-column prop="operatingClass" label="操作类别" align="center" />
+      <el-table-column prop="operatingObject" label="操作对象" align="center" />
+      <el-table-column prop="objectName" label="对象名称" align="center" />
+      <el-table-column
+        prop="operatingContent"
+        label="操作内容"
+        align="center"
+      />
+      <el-table-column prop="operatingeRsult" label="操作结果" align="center" />
+      <el-table-column prop="operatingDate" label="操作时间" align="center" />
+    </el-table>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    />
+  </div>
+</template>
+<script>
+import Pagination from "@/components/Pagination";
+export default {
+  props: [],
+  components: {
+    Pagination,
+  },
+  data() {
+    return {
+          multipleSelection: [],
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 10,
+
+      tableData: [
+        {
+          name: "admin",
+          operatingClass: "修改",
+          operatingObject: "FSU",
+          objectName: "FSU_193.168.1.20",
+          operatingContent: "修改FSU现场管理单位",
+          operatingeRsult: "成功",
+          operatingDate: "2022/12/18 11:59:42",
+        },
+        {
+          name: "admin",
+          operatingClass: "告警确认",
+          operatingObject: "故障定位设备",
+          objectName: "故障定位单位_12",
+          operatingContent: "确认连接告警",
+          operatingeRsult: "失败",
+          operatingDate: "2022/12/18 12:24:15",
+        },
+        {
+          name: "admin",
+          operatingClass: "修改",
+          operatingObject: "FSU",
+          objectName: "FSU_193.168.1.20",
+          operatingContent: "修改FSU现场管理单位",
+          operatingeRsult: "成功",
+          operatingDate: "2022/12/18 11:59:42",
+        },
+        {
+          name: "admin",
+          operatingClass: "告警确认",
+          operatingObject: "故障定位设备",
+          objectName: "故障定位单位_12",
+          operatingContent: "确认连接告警",
+          operatingeRsult: "失败",
+          operatingDate: "2022/12/18 12:24:15",
+        },
+        {
+          name: "admin",
+          operatingClass: "修改",
+          operatingObject: "FSU",
+          objectName: "FSU_193.168.1.20",
+          operatingContent: "修改FSU现场管理单位",
+          operatingeRsult: "成功",
+          operatingDate: "2022/12/18 11:59:42",
+        },
+        {
+          name: "admin",
+          operatingClass: "告警确认",
+          operatingObject: "故障定位设备",
+          objectName: "故障定位单位_12",
+          operatingContent: "确认连接告警",
+          operatingeRsult: "失败",
+          operatingDate: "2022/12/18 12:24:15",
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size;
+      this.searchForm.pageNum = pageData.page;
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.leakage-cable {
+  .leakage-top {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+  & ::v-deep .cell {
+    color: #333333;
+  }
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
+}
+</style>
\ No newline at end of file