配置管理、维护管理

.gitignore

@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 package-lock.json
 tests/**/coverage/
-
+.history
 # Editor directories and files
 .idea
 .vscode

src/router/index.js

@@ -68,13 +68,23 @@ export const constantRoutes = [
   {
     path: '/setting',
     component: Layout,
-    redirect: '/dashboard',
-    children: [{
-      path: 'setting',
-      name: 'Setting',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '配置管理', icon: 'dashboard' }
-    }]
+    redirect: '/setting/add',
+    name: 'Setting',
+    meta: { title: '配置管理', icon: 'example' },
+    children: [
+      {
+        path: 'add',
+        name: 'settingAdd',
+        component: () => import('@/views/setting/add/index'),
+        meta: { title: '手动添加配置', icon: 'table' }
+      },
+      {
+        path: 'statistics',
+        name: 'settingAtatistics',
+        component: () => import('@/views/setting/statistics/index'),
+        meta: { title: '配置信息统计', icon: 'tree' }
+      }
+    ]
   },
   {
     path: '/monitor',
@@ -100,13 +110,23 @@ export const constantRoutes = [
   {
     path: '/maintain',
     component: Layout,
-    redirect: '/dashboard',
-    children: [{
-      path: 'maintain',
-      name: 'Maintain',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '维护管理', icon: 'dashboard' }
-    }]
+    redirect: '/maintain/oneself',
+    name: 'Maintain',
+    meta: { title: '维护管理', icon: 'example' },
+    children: [
+      {
+        path: 'oneself',
+        name: 'MaintainOneself',
+        component: () => import('@/views/maintain/oneself/index'),
+        meta: { title: '设备本身维护', icon: 'table' }
+      },
+      {
+        path: 'parameter',
+        name: 'MaintainParameter',
+        component: () => import('@/views/maintain/parameter/index'),
+        meta: { title: '设备告警参数设置', icon: 'tree' }
+      }
+    ]
   },
   {
     path: '/history',

src/views/maintain/oneself/index.vue

+<template>
+  <div class="oneself">
+    <Breadcrumb />
+    <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 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 style="width: 120px" class="btn" type="primary" :loading="loading2" @click="sendData">发送数据</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="oneself-tips">当前未向服务器下发指令！</div>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@/components/Breadcrumb'
+export default {
+  components: { Breadcrumb },
+  data() {
+    return {
+      baseStationList: [],
+      fsuList: [],
+      typeList: [],
+      issueList: [],
+      formData1: {
+        ip: '',
+        baseStation: '',
+        fsu: '',
+        type: ''
+      },
+      rules1: {
+        ip: [
+          { required: true, message: '请输入服务器IP地址', trigger: 'blur' }
+        ],
+        baseStation: [
+          { required: true, message: '请选择基站名称', trigger: 'blur' }
+        ],
+        fsu: [
+          { required: true, message: '请选择FSU', trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: '请选择设备配置类型', trigger: 'blur' }
+        ]
+
+      },
+      formData2: {
+        type: 1,
+        routineNum: 0,
+        selfNum: 0
+      },
+      rules2: {
+        type: [
+          { required: true, message: '请选择', trigger: 'blur' }
+        ]
+      },
+      loading3: false,
+      formData3: {
+        issue: ''
+      },
+      rules3: {
+        issue: [
+          { required: true, message: '请选择配置下发类型', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    sendContent() {
+      this.$refs.form2.validate((valid) => {
+        if (valid) {
+          console.log(this.formData2)
+        }
+      })
+    },
+    sendData() {
+      this.$refs.form3.validate((valid) => {
+        if (valid) {
+          console.log(this.formData3)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<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;
+    }
+  }
+  .oneself-tips {
+    text-align: center;
+    padding-top: 50px;
+  }
+}
+</style>

src/views/maintain/parameter/index.vue

+<template>
+  <div class="parameter">
+    <Breadcrumb />
+    <div class="parameter-title">
+      温馨提示：告警门限参数设置，数据如无异常，请勿修改告警门限参数！
+    </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>
+    <div class="parameter-tips">当前未修改漏缆告警门限参数</div>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@/components/Breadcrumb'
+export default {
+  components: { Breadcrumb },
+  data() {
+    return {
+      loading: false,
+      formData: {
+        code: '',
+        one: '',
+        two: '',
+        three: ''
+      },
+      rules: {
+        code: [
+          { required: true, message: '请选择漏缆型号', trigger: 'blur' }
+          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        one: [
+          { required: true, message: '请输入一般告警门限', trigger: 'blur' }
+        ],
+        two: [
+          { required: true, message: '请输入重要告警门限', trigger: 'blur' }
+        ],
+        three: [
+          { required: true, message: '请输入紧急告警门限', trigger: 'blur' }
+        ]
+      },
+      codeList: []
+    }
+  },
+  methods: {
+    reset() {
+      this.$refs.form.resetFields()
+    },
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          console.log(this.formData)
+        }
+      })
+    }
+  }
+}
+</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;
+}
+</style>

src/views/setting/add/index.vue

+<template>
+  <div class="add">
+    <breadcrumb />
+    <div class="add-tab">
+      <el-tabs v-model="activeName" :stretc="true">
+        <el-tab-pane
+          v-for="item in tabs"
+          :key="item.key"
+          :label="item.label"
+          :name="item.key"
+        />
+      </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">
+          <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>
+        <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>
+      </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>
+</template>
+
+<script>
+import Breadcrumb from '@/components/Breadcrumb'
+export default {
+  components: { Breadcrumb },
+  data() {
+    return {
+      activeName: '0',
+      tabs: [
+        {
+          label: '铁路线',
+          key: '0'
+        },
+        {
+          label: '站点',
+          key: '1'
+        },
+        {
+          label: 'FSU',
+          key: '2'
+        },
+        {
+          label: '检测设备',
+          key: '3'
+        },
+        {
+          label: '漏缆',
+          key: '4'
+        },
+        {
+          label: '天馈线',
+          key: '5'
+        }
+      ],
+      formData: {
+        name: '',
+        start: '',
+        end: '',
+        long: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入铁路名', trigger: 'blur' }
+          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        start: [
+          { required: true, message: '请输入铁路线起点站名', trigger: 'blur' }
+        ],
+        end: [
+          { required: true, message: '请输入铁路线终点站名', trigger: 'blur' }
+        ],
+        long: [
+          { required: true, message: '请输入铁路全长公里数', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    reset() {
+      this.$refs.form.resetFields()
+    },
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          console.log(this.formData)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-tab {
+  // width: 600px;
+  margin: 0 auto;
+}
+::v-deep .el-tabs__nav {
+  display: flex;
+  width: 100%;
+  .el-tabs__item {
+    flex: 1;
+    text-align: center;
+      font-size: 18px;
+        color: #333;
+  }
+}
+.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-content-form {
+    padding-top: 20px;
+    width: 600px;
+  }
+}
+</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>
+      </div>
+      <div class="header-right">
+        <el-button
+          :type="multipleSelection.length ? 'primary' : 'info'"
+          :disabled="!multipleSelection.length"
+          @click="delData"
+        >删除</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>
+      </div>
+    </div>
+    <el-table
+      ref="multipleTable"
+      class="statistics-table"
+      :data="tableData"
+      tooltip-effect="dark"
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+      :row-style="{ 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" />
+      <el-table-column prop="name" label="铁路名称" align="center" />
+      <el-table-column prop="start" label="铁路起点站名" align="center" />
+      <el-table-column
+        prop="end"
+        label="铁路终点站名"
+        show-overflow-tooltip
+        align="center"
+      />
+      <el-table-column
+        prop="long"
+        label="铁路总长度（公里）"
+        show-overflow-tooltip
+        align="center"
+      />
+      <el-table-column
+        prop="action"
+        label="详细信息"
+        show-overflow-tooltip
+        align="center"
+      >
+        <template slot-scope="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            @click="handleView(row)"
+          >查看</el-link>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import Breadcrumb from '@/components/Breadcrumb'
+export default {
+  components: { Pagination, Breadcrumb },
+  data() {
+    return {
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 10,
+      activeName: '0',
+      tabs: [
+        {
+          label: '铁路线',
+          key: '0'
+        },
+        {
+          label: '站点',
+          key: '1'
+        },
+        {
+          label: 'FSU',
+          key: '2'
+        },
+        {
+          label: '检测设备',
+          key: '3'
+        },
+        {
+          label: '漏缆',
+          key: '4'
+        },
+        {
+          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
+        }
+      ],
+      multipleSelection: []
+    }
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      return rowIndex % 2 === 0 ? '' : 'single-row'
+    },
+    changeType(item) {
+      this.activeName = item.key
+    },
+    delData() {},
+    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
+    },
+    handleView() {},
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size
+      this.searchForm.pageNum = pageData.page
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+.el-table th.el-table__cell>.cell {
+      color: #747679;
+}
+.statistics-table {
+  padding-top: 50px;
+  .single-row {
+    background: #f1f6ff;
+  }
+}
+.statistics {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    .header-right {
+    }
+  }
+}
+</style>