样式修改 、历史数据

src/router/index.js

@@ -80,19 +80,19 @@ export const constantRoutes = [
     component: Layout,
     redirect: '/setting/add',
     name: 'Setting',
-    meta: { title: '配置管理', icon: 'example' },
+    meta: { title: '配置管理' },
     children: [
       {
         path: 'add',
         name: 'settingAdd',
         component: () => import('@/views/setting/add/index'),
-        meta: { title: '手动添加配置', icon: 'table' }
+        meta: { title: '手动添加配置' }
       },
       {
         path: 'statistics',
         name: 'settingAtatistics',
         component: () => import('@/views/setting/statistics/index'),
-        meta: { title: '配置信息统计', icon: 'tree' }
+        meta: { title: '配置信息统计' }
       }
     ]
   },
@@ -122,34 +122,42 @@ export const constantRoutes = [
     component: Layout,
     redirect: '/maintain/oneself',
     name: 'Maintain',
-    meta: { title: '维护管理', icon: 'example' },
+    meta: { title: '维护管理' },
     children: [
       {
         path: 'oneself',
         name: 'MaintainOneself',
         component: () => import('@/views/maintain/oneself/index'),
-        meta: { title: '设备本身维护', icon: 'table' }
+        meta: { title: '设备本身维护' }
       },
       {
         path: 'parameter',
         name: 'MaintainParameter',
         component: () => import('@/views/maintain/parameter/index'),
-        meta: { title: '设备告警参数设置', icon: 'tree' }
+        meta: { title: '设备告警参数设置' }
       }
     ]
   },
   {
     path: '/history',
     component: Layout,
-    redirect: '/history/historyStatus/historyStatus',
+    redirect: '/history/leakyCableStatus',
     name: 'History',
-    meta: { title: 'History', icon: 'example' },
-    children: [{
-      path: 'historyStatus',
-      name: '历史数据状态',
-      component: () => import('@/views/history/historyStatus/historyStatus.vue'),
-      meta: { title: '历史数据状态' }
-    }]
+    meta: { title: '历史数据', icon: 'example' },
+    children: [
+      {
+        path: 'leakyCableStatus',
+        name: 'leakyCableStatus',
+        component: () => import('@/views/history/leakyCableStatus/index.vue'),
+        meta: { title: '漏缆监测历史状态' }
+      },
+      {
+        path: 'leakyCableRepair',
+        name: 'leakyCableRepair',
+        component: () => import('@/views/history/leakyCableRepair/index.vue'),
+        meta: { title: '漏缆监测维护状态' }
+      }
+    ]
   },
   {
     path: '/user',

src/views/history/historyStatus/historyStatus.vue

-<template>
-<div>
-  <h1>会搜发的随风</h1>
-
-</div>
-</template>
-<script>
-import {mapGetters,mapActions} from 'vuex';
-export default {
-props: [],
-components: {},
-data() {
-return {
-      beginItem: 1,
-      endItem: 10,
-      total: 0,
-      currentPage: 1,
-      pageSize: 10,
-      historyStatusList:[
-          {
-              stationName:'STATION2未开通',
-              alarmObj:'漏缆FSU2_R1下行方向',
-              alarmInfo:'距离：0米 驻波比：8.72',
-              alarmInfo2:'距离：18米 驻波比：1.07',
-              alarmInfo3:'距离：42米 驻波比：1.02',
-              firstTime:'2022/12/18 11:51:12'
-          },
-               {
-              stationName:'STATION2未开通',
-              alarmObj:'漏缆FSU2_R1下行方向',
-              alarmInfo:'距离：0米 驻波比：8.72',
-              alarmInfo2:'距离：18米 驻波比：1.07',
-              alarmInfo3:'距离：42米 驻波比：1.02',
-               firstTime:'2022/12/18 11:51:12'
-          },     {
-              stationName:'STATION2未开通',
-              alarmObj:'漏缆FSU2_R1下行方向',
-              alarmInfo:'距离：0米 驻波比：8.72',
-              alarmInfo2:'距离：18米 驻波比：1.07',
-              alarmInfo3:'距离：42米 驻波比：1.02',
-               firstTime:'2022/12/18 11:51:12'
-          },     {
-              stationName:'STATION2未开通',
-              alarmObj:'漏缆FSU2_R1下行方向',
-              alarmInfo:'距离：0米 驻波比：8.72',
-              alarmInfo2:'距离：18米 驻波比：1.07',
-              alarmInfo3:'距离：42米 驻波比：1.02',
-               firstTime:'2022/12/18 11:51:12'
-          },     {
-              stationName:'STATION2未开通',
-              alarmObj:'漏缆FSU2_R1下行方向',
-              alarmInfo:'距离：0米 驻波比：8.72',
-              alarmInfo2:'距离：18米 驻波比：1.07',
-              alarmInfo3:'距离：42米 驻波比：1.02',
-               firstTime:'2022/12/18 11:51:12'
-          },     {
-              stationName:'STATION2未开通',
-              alarmObj:'漏缆FSU2_R1下行方向',
-              alarmInfo:'距离：0米 驻波比：8.72',
-              alarmInfo2:'距离：18米 驻波比：1.07',
-              alarmInfo3:'距离：42米 驻波比：1.02',
-               firstTime:'2022/12/18 11:51:12'
-          },
-      ],
-};
-},
-computed: {
-...mapGetters({}),
-},
-methods: {
-...mapActions({}),
-getTableData() {
-      this.tableData = this.historyStatusList.slice(
-        (this.currentPage - 1) * this.pageSize,
-        this.currentPage * this.pageSize
-      );
-      this.total = this.historyStatusList.length;
-    },
-    currentChange(val) {
-      this.currentPage = val;
-      this.getTableData();
-    },
-    sizeChange(val) {
-      console.log("改变每页多少条，当前一页多少条数据", val);
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getTableData();
-    },
-},
-mounted() {},
-};
-</script>
-<style scoped>
-</style>
\ No newline at end of file

src/views/history/leakyCableStatus/index.vue

+<template>
+  <!-- 漏缆实时状态 -->
+  <div class="leakage-cable">
+    <breadcrumb />
+    <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>
+        <el-button type="primary">图形报表</el-button>
+      </div>
+    </div>
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      style="width: 100%"
+      :cell-class-name="cellClassFn"
+      :header-cell-style="{background:'#EAF1FE',color:'#666666'}"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column prop="name" label="基站名称" align="center" />
+      <el-table-column prop="object" label="告警对象" align="center" />
+      <el-table-column prop="message" label="告警信息" align="center">
+        <template slot-scope="scope">
+          <div v-for="(item, index) in scope.row.message.red" :key="index+'red'" class="red message">
+            {{ item }}
+          </div>
+          <div v-for="(item, index) in scope.row.message.green" :key="index+'green'" class="green message">
+            {{ item }}
+          </div>
+          <div v-for="(item, index) in scope.row.message.black" :key="index+'black'" class="black message">
+            {{ item }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="uploadDate" label="上传日期" align="center" />
+    </el-table>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@/components/Breadcrumb'
+import Pagination from '@/components/Pagination'
+
+export default {
+  components: { Pagination, Breadcrumb },
+  data() {
+    return {
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 10,
+      tableData: [
+        {
+          name: 'STATION2未开通',
+          object: '漏缆FSU2_R1下行方向',
+          level: '紧急',
+          message: {
+            red: ['距离：0米 驻波比：8.72'],
+            green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+            black: ['漏缆百米损耗：2.8']
+          },
+          uploadDate: '2022/12/18 11:51:12'
+        },
+        {
+          name: 'STATION2未开通',
+          object: '漏缆FSU2_R1下行方向',
+          level: '紧急',
+          message: {
+            red: ['距离：0米 驻波比：8.72'],
+            green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+            black: ['漏缆百米损耗：2.8']
+          },
+          uploadDate: '2022/12/18 11:51:12'
+        }, {
+          name: 'STATION2未开通',
+          object: '漏缆FSU2_R1下行方向',
+          level: '紧急',
+          message: {
+            red: ['距离：0米 驻波比：8.72'],
+            green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+            black: ['漏缆百米损耗：2.8']
+          },
+          uploadDate: '2022/12/18 11:51:12'
+        }, {
+          name: 'STATION2未开通',
+          object: '漏缆FSU2_R1下行方向',
+          level: '紧急',
+          message: {
+            red: ['距离：0米 驻波比：8.72'],
+            green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+            black: ['漏缆百米损耗：2.8']
+          },
+          uploadDate: '2022/12/18 11:51:12'
+        }, {
+          name: 'STATION2未开通',
+          object: '漏缆FSU2_R1下行方向',
+          level: '紧急',
+          message: {
+            red: ['距离：0米 驻波比：8.72'],
+            green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+            black: ['漏缆百米损耗：2.8']
+          },
+          uploadDate: '2022/12/18 11:51:12'
+        }, {
+          name: 'STATION2未开通',
+          object: '漏缆FSU2_R1下行方向',
+          level: '重要',
+          message: {
+            red: ['距离：0米 驻波比：8.72'],
+            green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+            black: ['漏缆百米损耗：2.8']
+          },
+          uploadDate: '2022/12/18 11:51:12'
+        }
+      ],
+      multipleSelection: []
+    }
+  },
+  methods: {
+    // 表格背景图颜色
+    cellClassFn({ row, column, rowIndex, columnIndex }) {
+      if (row.level === '紧急' && column.label === '告警级别') {
+        return 'emergency'
+      } else if (row.level === '重要' && column.label === '告警级别') {
+        return 'important'
+      }
+      if (rowIndex % 2 === 1) {
+        return 'stripe'
+      }
+    },
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size
+      this.searchForm.pageNum = pageData.page
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</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;
+  }
+  .message {
+    line-height: 32px;
+  }
+  .red {
+    color: red;
+  }
+  .green {
+    color: green;
+  }
+  .black {
+    color: black;
+  }
+  & ::v-deep .stripe {
+    background-color: #EAF1FE;
+  }
+  & ::v-deep .emergency {
+    background-color: #f00;
+  }
+  & ::v-deep .important {
+    background-color: #f89850;
+  }
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
+}
+</style>

src/views/maintain/oneself/index.vue

 <template>
   <div class="oneself">
-    <div class="oneself-title">温馨提示：系统如无异常，请勿操作此界面</div>
-    <el-form ref="form1" :model="formData1" :rules="rules1" label-width="200px" class="oneself-form">
-      <el-form-item label="服务器IP地址" prop="ip">
-        <el-input v-model="formData1.ip" style="width: 300px" placeholder="请输入服务器IP地址" />
-      </el-form-item>
-      <el-form-item label="基站名称" prop="baseStation">
-        <el-select v-model="formData1.baseStation" style="width: 300px" filterable placeholder="请选择基站">
-          <el-option
-            v-for="item in baseStationList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="FSU" prop="fsu">
-        <el-select v-model="formData1.fsu" style="width: 300px" filterable placeholder="请选择FSU">
-          <el-option
-            v-for="item in fsuList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备类型配置" prop="type">
-        <el-select v-model="formData1.type" style="width: 300px" filterable placeholder="请选择设备类型配置">
-          <el-option
-            v-for="item in typeList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <el-form ref="form2" :model="formData2" :rules="rules2" label-width="200px" class="oneself-form">
-      <el-form-item label="设备配置下发" prop="type">
-        <el-radio-group v-model="formData2.type">
-          <el-row style="margin-bottom: 10px">
-            <el-radio :label="1">复位重启FSU</el-radio>
-            <el-radio :label="2">常规测试>>
-              <el-input-number v-model="formData2.routineNum" size="small" :min="0" />
-            </el-radio>
-          </el-row>
-          <el-row>
-            <el-radio :label="3">请求实时连接</el-radio>
-            <el-radio :label="4">自检测试>>
-              <el-input-number v-model="formData2.selfNum" size="small" :min="0" />
-            </el-radio>
-          </el-row>
-        </el-radio-group>
-        <el-button size="mini" class="btn" style="width: 120px" type="primary" :loading="loading3" @click="sendContent">发送查询内容</el-button>
-      </el-form-item>
-    </el-form>
-    <el-form ref="form3" :model="formData3" :rules="rules3" label-width="200px" class="oneself-form">
-      <el-form-item label="设备运行参数配置下发" prop="issue">
-        <el-select v-model="formData3.issue" style="width: 300px" filterable placeholder="请选择配置下发类型">
-          <el-option
-            v-for="item in issueList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-button size="mini" style="width: 120px" class="btn" type="primary" :loading="loading2" @click="sendData">发送数据</el-button>
-      </el-form-item>
-    </el-form>
-    <div class="oneself-tips">当前未向服务器下发指令！</div>
+    <div class="content">
+      <div class="content-title">温馨提示：系统如无异常，请勿操作此界面</div>
+      <el-form ref="form1" :model="formData1" :rules="rules1" label-width="180px" class="content-form">
+        <el-form-item label="服务器IP地址：" prop="ip">
+          <el-input v-model="formData1.ip" style="width: 300px" placeholder="请输入服务器IP地址" />
+        </el-form-item>
+        <el-form-item label="基站名称：" prop="baseStation">
+          <el-select v-model="formData1.baseStation" style="width: 300px" filterable placeholder="请选择基站">
+            <el-option
+              v-for="item in baseStationList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="FSU：" prop="fsu">
+          <el-select v-model="formData1.fsu" style="width: 300px" filterable placeholder="请选择FSU">
+            <el-option
+              v-for="item in fsuList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备类型配置：" prop="type">
+          <el-select v-model="formData1.type" style="width: 300px" filterable placeholder="请选择设备类型配置">
+            <el-option
+              v-for="item in typeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <el-form ref="form2" :model="formData2" :rules="rules2" label-width="180px" class="content-form">
+        <el-form-item label="设备配置下发：" prop="type">
+          <div class="content-form-right">
+            <el-radio-group v-model="formData2.type">
+              <el-row style="margin-bottom: 10px">
+                <el-radio :label="1">复位重启FSU</el-radio>
+                <el-radio :label="2">常规测试>>次数
+                  <el-input-number v-model="formData2.routineNum" size="small" :min="1" />
+                </el-radio>
+              </el-row>
+              <el-row>
+                <el-radio :label="3">请求实时连接</el-radio>
+                <el-radio :label="4">自检测试>>次数
+                  <el-input-number v-model="formData2.selfNum" size="small" :min="1" />
+                </el-radio>
+              </el-row>
+            </el-radio-group>
+            <div class="btn">
+              <el-button style="width: 120px" type="primary" :loading="loading3" @click="sendContent">发送查询内容</el-button>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <el-form ref="form3" :model="formData3" :rules="rules3" label-width="180px" class="content-form">
+        <el-form-item label="设备运行参数配置下发：" prop="issue">
+          <div class="content-form-right">
+            <el-select v-model="formData3.issue" style="width: 300px" filterable placeholder="请选择配置下发类型">
+              <el-option
+                v-for="item in issueList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <div class="btn">
+              <el-button style="width: 120px" type="primary" :loading="loading2" @click="sendData">发送数据</el-button>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tips">当前未向服务器下发指令！</div>
   </div>
 </template>
 
@@ -143,26 +153,45 @@ export default {
 
 <style lang="scss" scoped>
 .oneself {
-  .oneself-title {
-    width: 100%;
-    height: 60px;
-    background: rgba(226, 235, 255, 0.39);
-    line-height: 60px;
-    font-size: 18px;
-    color: #333;
-    font-weight: 500;
-    text-align: center;
-  }
-    .oneself-form {
-    margin: 20px auto;
-    width: 750px;
-    .btn {
-      float: right;
+  margin: 10px;
+  .content {
+    border: 1px solid #e3e3e3;
+    border-radius: 10px;
+    .content-title {
+      width: 100%;
+      height: 60px;
+      background: rgba(226, 235, 255, 0.39);
+      line-height: 60px;
+      font-size: 18px;
+      color: #333;
+      font-weight: 500;
+      text-align: center;
+      border-bottom: 1px solid #e3e3e3;
+      margin-bottom: 20px;
+    }
+    .content-form {
+       margin: 0 auto;
+      // padding: 20px 0;
+      width: 800px;
+      .content-form-right {
+        border: 1px solid #DCDFE6;
+        padding: 20px;
+        border-radius: 10px;
+        display: flex;
+        justify-content: space-between;
+        .btn {
+          display: flex;
+          align-items: center;
+        }
+      }
     }
   }
-  .oneself-tips {
+  .tips {
     text-align: center;
     padding-top: 50px;
+    color: #1E64F6;
+    font-size: 18px;
+    font-weight: 500;
   }
 }
 </style>

src/views/maintain/parameter/index.vue

 <template>
   <div class="parameter">
-    <div class="parameter-title">
-      温馨提示：告警门限参数设置，数据如无异常，请勿修改告警门限参数！
+    <div class="content">
+      <div class="content-title">
+        温馨提示：告警门限参数设置，数据如无异常，请勿修改告警门限参数！
+      </div>
+      <el-form
+        ref="form"
+        :model="formData"
+        :rules="rules"
+        label-width="200px"
+        class="content-form"
+      >
+        <el-form-item label="漏缆型号：" prop="code">
+          <el-select
+            v-model="formData.code"
+            style="width: 100%"
+            filterable
+            placeholder="请选择漏缆型号"
+          >
+            <el-option
+              v-for="item in codeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="一般告警门限：" prop="one">
+          <el-input v-model="formData.one" placeholder="请输入一般告警门限" />
+        </el-form-item>
+        <el-form-item label="重要告警门限：" prop="two">
+          <el-input v-model="formData.two" placeholder="请输入重要告警门限" />
+        </el-form-item>
+        <el-form-item label="紧急告警门限：" prop="three">
+          <el-input v-model="formData.three" placeholder="请输入紧急告警门限" />
+        </el-form-item>
+      </el-form>
     </div>
-    <el-form
-      ref="form"
-      :model="formData"
-      :rules="rules"
-      label-width="200px"
-      class="parameter-form"
-    >
-      <el-form-item label="漏缆型号" prop="code">
-        <el-select
-          v-model="formData.code"
-          style="width: 100%"
-          filterable
-          placeholder="请选择漏缆型号"
-        >
-          <el-option
-            v-for="item in codeList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="一般告警门限" prop="one">
-        <el-input v-model="formData.one" placeholder="请输入一般告警门限" />
-      </el-form-item>
-      <el-form-item label="重要告警门限" prop="two">
-        <el-input v-model="formData.two" placeholder="请输入重要告警门限" />
-      </el-form-item>
-      <el-form-item label="紧急告警门限" prop="three">
-        <el-input v-model="formData.three" placeholder="请输入紧急告警门限" />
-      </el-form-item>
-    </el-form>
-    <div class="parameter-btn">
-      <el-button
-        type="primary"
-        :loading="loading"
-        @click="submit"
-      >确认修改</el-button>
+    <div class="footer">
+      <div class="footer-btn">
+        <el-button
+          type="primary"
+          :loading="loading"
+          @click="submit"
+        >确认修改</el-button>
+      </div>
+      <div class="footer-tips">当前未修改漏缆告警门限参数</div>
     </div>
-    <div class="parameter-tips">当前未修改漏缆告警门限参数</div>
   </div>
 </template>
 
@@ -91,25 +95,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.parameter-title {
-  width: 100%;
-  height: 60px;
-  background: rgba(226, 235, 255, 0.39);
-  line-height: 60px;
-  font-size: 18px;
-  color: #333;
-  font-weight: 500;
-  text-align: center;
-}
-.parameter-form {
-  margin: 20px auto;
-  width: 600px;
-}
-.parameter-btn {
-  text-align: center;
-}
-.parameter-tips {
-  text-align: center;
-  padding-top: 50px;
+.parameter {
+  padding: 10px;
+  .content {
+    border: 1px solid #e3e3e3;
+    border-radius: 10px;
+    .content-title {
+      width: 100%;
+      height: 60px;
+      background: rgba(226, 235, 255, 0.39);
+      line-height: 60px;
+      font-size: 18px;
+      color: #333;
+      font-weight: 500;
+      text-align: center;
+      border-bottom: 1px solid #e3e3e3;
+    }
+    .content-form {
+      margin: 0 auto;
+      padding: 20px 0;
+      width: 600px;
+    }
+  }
+  .footer {
+    text-align: center;
+    padding-top: 50px;
+    .footer-btn {
+      margin-bottom: 50px;
+    }
+    .footer-tips {
+      color: #1E64F6;
+      font-weight: 500;
+      font-size: 18px;
+    }
+  }
 }
+
 </style>

src/views/setting/add/index.vue

@@ -10,27 +10,38 @@
         />
       </el-tabs>
     </div>
-
-    <div class="add-content">
-      <div class="add-content-title">添加铁路信息</div>
-      <el-form ref="form" :model="formData" :rules="rules" label-width="200px" class="add-content-form">
-        <el-form-item label="铁路名" prop="name">
+    <div class="content">
+      <div class="content-title">添加铁路信息</div>
+      <el-form
+        ref="form"
+        :model="formData"
+        :rules="rules"
+        label-width="200px"
+        class="form"
+      >
+        <el-form-item label="铁路名：" prop="name">
           <el-input v-model="formData.name" placeholder="请输入铁路名" />
         </el-form-item>
-        <el-form-item label="铁路线起点站名" prop="start">
-          <el-input v-model="formData.start" placeholder="请输入铁路线起点站名" />
+        <el-form-item label="铁路线起点站名：" prop="start">
+          <el-input
+            v-model="formData.start"
+            placeholder="请输入铁路线起点站名："
+          />
         </el-form-item>
-        <el-form-item label="铁路线终点站名" prop="end">
+        <el-form-item label="铁路线终点站名：" prop="end">
           <el-input v-model="formData.end" placeholder="请输入铁路线终点站名" />
         </el-form-item>
-        <el-form-item label="铁路全长（公里）" prop="long">
-          <el-input v-model="formData.long" placeholder="请输入铁路全长公里数" />
+        <el-form-item label="铁路全长（公里）：" prop="long">
+          <el-input
+            v-model="formData.long"
+            placeholder="请输入铁路全长公里数"
+          />
         </el-form-item>
       </el-form>
-      <div class="add-content-btn">
-        <el-button type="primary" @click="reset">重置</el-button>
-        <el-button type="primary" @click="submit">确认提交</el-button>
-      </div>
+    </div>
+    <div class="btn">
+      <el-button type="primary" @click="reset">重置</el-button>
+      <el-button type="primary" @click="submit">确认提交</el-button>
     </div>
   </div>
 </template>
@@ -105,37 +116,55 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.add-tab {
-  // width: 600px;
-  margin: 0 auto;
-}
 ::v-deep .el-tabs__nav {
   display: flex;
   width: 100%;
+  padding-bottom: 10px;
   .el-tabs__item {
     flex: 1;
     text-align: center;
-      font-size: 18px;
-        color: #333;
+    font-size: 18px;
+    color: #666;
+  }
+  .el-tabs__item.is-active {
+    color: #1e64f6;
+  }
+  .el-tabs__active-bar {
+    background-color: #1e64f6;
   }
 }
-.add-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .add-content-title {
-    width: 100%;
-    height: 60px;
-    background: rgba(226, 235, 255, 0.39);
-    line-height: 60px;
-    font-size: 18px;
-    color: #333;
-    font-weight: 500;
-    text-align: center;
+.add {
+  padding: 10px;
+  .tab {
+    // width: 600px;
+    margin: 0 auto;
+  }
+  .content {
+    border: 1px solid #e3e3e3;
+    border-radius: 10px;
+    .content-title {
+      width: 100%;
+      height: 60px;
+      background: rgba(226, 235, 255, 0.39);
+      line-height: 60px;
+      font-size: 18px;
+      color: #333;
+      font-weight: 500;
+      text-align: center;
+      border-bottom: 1px solid #e3e3e3;
+    }
+    .form {
+      padding: 20px 0;
+      width: 600px;
+      margin: 0 auto;
+    }
   }
-  .add-content-form {
-    padding-top: 20px;
-    width: 600px;
+  .btn {
+    padding-top: 50px;
+    text-align: center;
+    button {
+      width: 120px;
+    }
   }
 }
 </style>

src/views/setting/statistics/index.vue

 <template>
   <div class="statistics">
+    <Breadcrumb />
     <div class="header">
       <div class="header-left">
-        <!-- <el-tabs v-model="activeName" type="border-card">
-          <el-tab-pane
-            v-for="item in tabs"
-            :key="item.key"
-            :label="item.label"
-            :name="item.key"
-          />
-        </el-tabs> -->
-        <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>
+          <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">
         <el-button
@@ -197,15 +186,6 @@ export default {
     refresh() {},
     query() {},
     exportData() {},
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach((row) => {
-          this.$refs.multipleTable.toggleRowSelection(row)
-        })
-      } else {
-        this.$refs.multipleTable.clearSelection()
-      }
-    },
     handleSelectionChange(val) {
       this.multipleSelection = val
     },
@@ -229,6 +209,7 @@ export default {
   }
 }
 .statistics {
+  padding: 10px;
   .header {
     display: flex;
     justify-content: space-between;