Merge branch 'dev_yzr' into 'dev'

Dev yzr

See merge request !12

src/api/baseData.js

@@ -3,6 +3,9 @@ import request from '@/utils/request'
 const path = {
   deptList: '/dict/selectDeptItem',
   fsuList: '/dict/selectFsuItem',
+  OperateEnum: '/dict/selectOperationItem',
+  LeakyCablelEnum: '/dict/selectLeakyCablelItem',
+  MonitorEnum: '/dict/selectMonitorItem',
   getTree: '/home/getTree',
 }
 
@@ -14,6 +17,18 @@ export function fsuList() {
   return request.post(path.fsuList, ...arguments)
 }
 
+export function OperateEnum() {
+  return request.post(path.OperateEnum, ...arguments)
+}
+
+export function LeakyCablelEnum() {
+  return request.post(path.LeakyCablelEnum, ...arguments)
+}
+
+export function MonitorEnum() {
+  return request.post(path.MonitorEnum, ...arguments)
+}
+
 export function getTree() {
   return request.post(path.getTree, ...arguments)
 }

src/components/orgTree.vue

@@ -84,7 +84,7 @@ export default {
   },
   methods: {
     handleClick(data) {
-      console.log(data);
+      this.$emit('selectItem', data)
     },
     getInit() {
       getTree().then(res => {
@@ -97,13 +97,13 @@ export default {
         <div>
           <span style="padding-right:10px;">
             <span style={{ marginRight: "5px", fontSize: "16px" }}>
-              <svg-icon icon-class={data.iconName} />
             </span>
             <span style={{ marginRight: "5px", fontSize: "16px" }}>
               {node.label}
             </span>
           </span>
         </div>
+              // <svg-icon icon-class={data.iconName} />
       );
     },
   },

src/layout/index.vue

@@ -3,7 +3,7 @@
     <navbar />
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <div :class="{sidebarHide: sidebar.hide}" class="main-container">
-      <orgTree style="float:left" />
+      <!-- <orgTree style="float:left" /> -->
       <div class="flex_clo">
         <Breadcrumb />
         <app-main />

src/styles/common.scss

@@ -20,10 +20,18 @@
   margin-left: 20px;
 }
 
+.ml300 {
+  margin-left: 320px;
+}
+
+.flex {
+  display: flex;
+}
+
 .flex_clo {
   display: flex;
   flex-direction: column;
-  height: 880px;
+  // height: 880px;
 }
 .leakage-cable .leakage-top{
   padding-right: 10px;

src/utils/request.js

@@ -65,7 +65,7 @@ service.interceptors.response.use(
         location.href = location.href.replace(/#.+/, '') + '#/login'
         return
       }
-      if (code == '501') {
+      if (code == 501) {
         !config.silence && !errorShowing && Message.error(message)
         errorShowing = true
         setTimeout(() => { errorShowing = false }, 3000)

src/views/dashboard/api.js

+import request from '@/utils/request'
+
+const path = {
+  treeBaseInfo: '/home/treeBaseInfo',
+}
+
+export function treeBaseInfo() {
+  return request.post(path.treeBaseInfo, ...arguments)
+}

src/views/dashboard/components/index.vue

+<template>
+  <component :is="useEditComponent" :type="type" :curInfo="curInfo" @toUpdate="toUpdate" @cancel="cancel"></component>
+</template>
+
+<script>
+import Type1 from './type1.vue'
+import Type2 from './type2.vue'
+import Type3 from './type3.vue'
+import Type4 from './type4.vue'
+import Type5 from './type5.vue'
+
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  props: {
+    type: {
+      type: Number,
+      defualt: null
+    },
+    curInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    useEditComponent() {
+      return `Type${this.type}`
+    },
+  },
+  components: {
+    Type1,
+    Type2,
+    Type3,
+    Type4,
+    Type5,
+  },
+  methods: {
+    toUpdate() {
+      this.$emit('toUpdate')
+    },
+    cancel() {
+      this.$emit('cancel')
+    },
+  }
+}
+</script>
\ No newline at end of file

src/views/dashboard/components/mixins.js

+import { formInit } from '../const'
+
+export const DetailMixins = {
+  data() {
+    return {
+      form: {},
+      formFunc: null,
+    }
+  },
+  watch: {
+    type: {
+      immediate: true,
+      handler(newV) {
+        this.formFunc = formInit(newV)
+      },
+    },
+    curInfo: {
+      immediate: true,
+      handler(newV) {
+        this.form = this.formFunc(newV)
+      },
+    },
+  },
+  props: {
+    curInfo: {
+      type: Object,
+      default: () => {},
+    },
+    type: {
+      type: Number,
+      defualt: null,
+    },
+  },
+  methods: {
+  },
+}

src/views/dashboard/components/type1.vue

+<template>
+  <div class="dashboard-container">
+    <!-- 首页 -->
+    <header class="header_title">张呼铁路客运专线信息</header>
+    <el-row :gutter="24">
+      <el-col :span="12" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>服务器信息</span>
+          </div>
+          <div>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">服务器IP</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">192.168.1.110</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">操作系统</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">Red Hat EnterpiseLin...</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">系统软件版本</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">192.168.1.110</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>当前状态</span>
+          </div>
+          <div>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备状态</div>
+              </el-col>
+              <el-col :span="10">
+                <el-row :gutter="20">
+                  <el-col :span="10" class="value_handle">告警</el-col>
+                  <el-col :span="10"
+                    ><el-button class="alarmbtn" type="primary" size="mini"
+                      >处理告警</el-button
+                    ></el-col
+                  >
+                </el-row>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">漏缆状态</div>
+              </el-col>
+              <el-col :span="10">
+                <el-row :gutter="20">
+                  <el-col :span="10" class="value_handle">紧急告警</el-col>
+                  <el-col :span="10"
+                    ><el-button class="alarmbtn" type="primary" size="mini"
+                      >处理告警</el-button
+                    ></el-col
+                  >
+                </el-row>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>管理员(admin)管理范围</span>
+          </div>
+          <div>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">基站</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type2 }}个</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">FSU</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type3 }}台</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">监测设备</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type4 }}台</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">混缆</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type5 }}根</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>基本信息</span>
+            <el-button
+              style="float: right; padding: 3px 0; margin-right: 20px"
+              type="text"
+              class="savebtn"
+              >保存</el-button
+            >
+          </div>
+          <div>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">铁路名称</div>
+              </el-col>
+              <el-col :span="10">
+                <div>
+                  <el-input
+                    v-model="form.baseInfo.name"
+                    clearable
+                    placeholder="请输入内容"
+                    ></el-input
+                  >
+                </div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">铁路起点站名</div>
+              </el-col>
+              <el-col :span="10">
+                <div>
+                  <el-input
+                    v-model="form.baseInfo.startPointName"
+                    clearable
+                    placeholder="请输入内容"
+                    ></el-input
+                  >
+                </div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">铁路终点站名</div>
+              </el-col>
+              <el-col :span="10">
+                <div>
+                  <el-input
+                  v-model="form.baseInfo.endPointName"
+                    clearable
+                    placeholder="请输入内容"
+                    ></el-input
+                  >
+                </div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">铁路总长度(公里)</div>
+              </el-col>
+              <el-col :span="10">
+                <div>
+                  <el-input
+                    v-model="form.baseInfo.totalLong"
+                    clearable
+                    placeholder="请输入内容"
+                    >张呼铁路客运专线</el-input
+                  >
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { DetailMixins } from './mixins'
+export default {
+  name: 'Dashboard',
+  mixins: [DetailMixins],
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title {
+  font-size: 23px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  line-height: 40px;
+  text-align: center;
+  color: #0058ff;
+  letter-spacing: 10px;
+  opacity: 1;
+  margin-bottom: 20px;
+}
+::v-deep.el-card {
+  border: 1px solid #e3e3e3;
+  border-radius: 8px;
+  min-height: 243px;
+  .el-card__header {
+    font-size: 18px;
+    color: #333333;
+    font-weight: 500;
+    text-align: center;
+    background: rgba(226, 235, 255, 0.39);
+    opacity: 1;
+  }
+  .el-card__body {
+    padding: 0px;
+  }
+}
+.posa {
+  position: relative;
+}
+.savebtn {
+  position: absolute;
+  right: 2%;
+}
+// .el-col {
+//   margin-bottom: 20px;
+// }
+.text {
+  // display: flex;
+  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: 16px;
+    line-height: 16px;
+    color: #7e7e7e;
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  .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;
+  }
+
+  .value_handle {
+    color: red;
+    margin-right: 10px;
+    min-width: 52px;
+  }
+  .alarmbtn {
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+  .el-card:last-child .text {
+    border-bottom: none !important;
+  }
+}
+</style>

src/views/dashboard/components/type2.vue

+<template>
+  <div class="dashboard-container">
+    <!-- 首页 -->
+    <header class="header_title">张呼铁路客运专线信息</header>
+    <el-row :gutter="24">
+      <el-col :span="12" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>管理范围</span>
+          </div>
+          <div>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">FSU</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type3 }}台</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">监测设备</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type4 }}台</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">混缆</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type5 }}根</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>基础信息</span>
+          </div>
+          <div>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点编号</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteCode }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站名</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteName }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点地址</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteAddress }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">所在铁路线</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.wayId }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点所在局</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteArea }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点所在段号</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteSectionCode }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点所在铁路公里标</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteKmSign }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点经度</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteLongitude }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点纬度</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteLatitude }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点监控时间</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">Red Hat EnterpiseLin...</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">漏缆个数</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">Red Hat EnterpiseLin...</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">天馈线个数</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">Red Hat EnterpiseLin...</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">站点其他信息</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.siteOtherMessage }}</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="mb20 specialCard">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>当前状态</span>
+          </div>
+          <div>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备状态</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">正常</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">漏缆状态</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">正常</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { DetailMixins } from './mixins'
+export default {
+  name: 'Dashboard',
+  mixins: [DetailMixins],
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title {
+  font-size: 23px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  line-height: 40px;
+  text-align: center;
+  color: #0058ff;
+  letter-spacing: 10px;
+  opacity: 1;
+  margin-bottom: 20px;
+}
+::v-deep.el-card {
+  border: 1px solid #e3e3e3;
+  border-radius: 8px;
+  // min-height: 243px;
+  .el-card__header {
+    font-size: 18px;
+    color: #333333;
+    font-weight: 500;
+    text-align: center;
+    background: rgba(226, 235, 255, 0.39);
+    opacity: 1;
+  }
+  .el-card__body {
+    padding: 0px;
+  }
+}
+.posa {
+  position: relative;
+}
+
+.specialCard {
+  position: absolute;
+  top: 300px;
+}
+
+.text {
+  // display: flex;
+  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: 16px;
+    line-height: 16px;
+    color: #7e7e7e;
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  .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/dashboard/components/type3.vue

+<template>
+  <div class="dashboard-container">
+    <!-- 首页 -->
+    <header class="header_title">FSU</header>
+    <el-row :gutter="24">
+      <el-col :span="11" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>管理范围</span>
+          </div>
+          <div >
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">监测设备</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type4 }}台</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">混缆</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.type5 }}根</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="11" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>基础信息</span>
+          </div>
+          <div >
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">FSU身份编号</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.fsuCode }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">FSU端口数</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.fsuPort}}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备名称</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.equipName }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">IP地址</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.ip }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">所在铁路线</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">南昆客运专线</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">所在站点</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">81</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备厂商</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.equipFactory }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备备用方式</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.backupModeName }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">通信方式</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.connectModeName }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备类型</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.equipTypeName }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备子类型</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.equipSubTypeName }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">软件版本号</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.softVersion }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备生产序列号</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.equipSerialNumber }}</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">安装日期</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">南昆客运专线</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">维护日期</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">南昆客运专线</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">设备所铁路公里标</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">{{ form.baseInfo.kmSign }}</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="11" class="mb20 specialCard">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix posa">
+            <span>管理范围</span>
+          </div>
+          <div >
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">监测设备</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">81</div>
+              </el-col>
+            </el-row>
+            <el-row class="text" :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">混缆</div>
+              </el-col>
+              <el-col :span="10">
+                <div class="item_data">142根</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { DetailMixins } from './mixins'
+
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+    }
+  },
+  mixins: [DetailMixins],
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title {
+  font-size: 23px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  line-height: 40px;
+  text-align: center;
+  color: #0058ff;
+  letter-spacing: 10px;
+  opacity: 1;
+  margin-bottom: 20px;
+}
+::v-deep.el-card {
+  border: 1px solid #e3e3e3;
+  border-radius: 8px;
+  // min-height: 243px;
+  .el-card__header {
+    font-size: 18px;
+    color: #333333;
+    font-weight: 500;
+    text-align: center;
+    background: rgba(226, 235, 255, 0.39);
+    opacity: 1;
+  }
+  .el-card__body {
+    padding: 0px;
+  }
+}
+.specialCard {
+  position: absolute;
+  top: 240px;
+}
+.posa {
+  position: relative;
+}
+
+.text {
+  padding: 10px 20px 10px 20px;
+  border-bottom: 1px solid #e3e3e3;
+  &:last-child {
+    border-bottom: none;
+  }
+  .item_name,
+  .item_data {
+    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;
+  }
+
+  .el-card:last-child .text {
+    border-bottom: none !important;
+  }
+}
+
+</style>

src/views/dashboard/const.js

-export const listData = [
+export const listData2 = [
   {
-    title: '服务器信息',
+    title: '管理范围',
     list: [
       {
-        name: '服务器IP',
-        value: '192.168.1.110',
+        name: 'FSU',
+        value: '20台',
       },
       {
-        name: '操作系统',
-        value: 'Red Hat EnterpiseLin...',
+        name: '监测设备',
+        value: '81台',
       },
       {
-        name: '系统软件版本',
-        value: '192.168.1.110',
+        name: '混缆',
+        value: '142根',
       },
     ]
   },
   {
-    title: '当前状态',
+    title: '基础信息',
     list: [
       {
-        handle: true,
-        name: '设备状态',
-        value: '告警',
+        name: '站点编号',
+        value: '29',
       },
       {
-        handle: true,
-        name: '漏缆状态',
-        value: '紧急告警',
-      }
-    ]
-  },
-  {
-    title: '管理员(admin)管理范围',
-    list: [
+        name: '站名',
+        value: 'Red Hat EnterpiseLin...',
+      },
       {
-        name: '基站',
-        value: '20个',
+        name: '站点地址',
+        value: 'K556+614',
       },
       {
-        name: 'FSU',
-        value: '20台',
+        name: '所在铁路线',
+        value: '南昆客运专线',
       },
       {
-        name: '监测设备',
-        value: '81台',
+        name: '站点所在局',
+        value: '昆明铁路局.',
       },
       {
-        name: '混缆',
-        value: '142根',
+        name: '站点所在段号',
+        value: '通信段',
+      },
+      {
+        name: '站点所在铁路公里标',
+        value: '192.168.1.110',
+      },
+      {
+        name: '站点经度',
+        value: 'Red Hat EnterpiseLin...',
       },
-    ]
-  },
-  {
-    title: '基本信息',
-    option: true,
-    list: [
       {
-        name: '铁路名称',
-        value: '张呼铁路客运专线',
+        name: '站点维度',
+        value: '192.168.1.110',
+      },
+      {
+        name: '站点监控时间',
+        value: 'Red Hat EnterpiseLin...',
+      },
+      {
+        name: '漏缆个数',
+        value: '192.168.1.110',
       },
       {
-        name: '铁路起点站名',
-        value: '张家口',
+        name: '天馈线个数',
+        value: 'Red Hat EnterpiseLin...',
       },
       {
-        name: '铁路终点站名',
-        value: '呼和浩特',
+        name: '站点其他信息',
+        value: '192.168.1.110',
       },
+    ]
+  },
+  {
+    title: '当前状态',
+    list: [
       {
-        name: '铁路总长度(公里)',
-        value: '286.8',
+        name: '设备状态',
+        value: '正常',
       },
+      {
+        name: '漏缆状态',
+        value: '正常',
+      }
     ]
   },
+]
+
+export function formInit1(data = {}) {
+  return {
+    deviceStatus: null,
+    baseInfo: {
+      id: null,
+      name: "",
+      startPointName: "",
+      endPointName: "",
+      totalLong: null,
+    },
+    type2: 0,
+    type3: 0,
+    type4: 0,
+    type5: 0,
+    operateSystem: null,
+    ...data
+  }
+}
+export function formInit2(data = {}) {
+  return {
+    deviceStatus: null,
+    baseInfo: {
+      createdBy: "",
+      lastModifiedBy: null,
+      creationTime: "",
+      lastModifiedTime: null,
+      id: null,
+      siteCode: "",
+      siteName: "",
+      siteAddress: "",
+      parentId: 0,
+      siteArea: "",
+      siteSectionCode: "",
+      siteKmSign: "",
+      siteLongitude: "",
+      siteLatitude: "",
+      siteOtherMessage: "",
+      wayId: 4,
+    },
+    ...data
+  }
+}
+export function formInit3(data = {}) {
+  return {
+    deviceStatus: null,
+    baseInfo: {
+      fsuCode: "212",
+      fsuPort: 10,
+      equipName: "FSU4测试",
+      parentId: 17,
+      ip: "151511",
+      equipFactory: "测试",
+      backupModeName: null,
+      connectModeName: "整机备份",
+      equipTypeName: null,
+      equipSubTypeName: "以太网",
+      softVersion: "8451",
+      equipSerialNumber: "4651",
+      kmSign: "46511",
+    },
+    ...data
+  }
+}
+export function formInit4(data = {}) {
+  return {
+    deviceStatus: null,
+    baseInfo: {
+      equipCode: "001",
+      equipName: 监测1,
+      equipFactory: "厂商001",
+      equipTypeName: null,
+      equipModeName: null,
+      equipSerialNumber: "001",
+      kmSign: "001",
+      installDate: "2022-02-24 12:25:24",
+      repairDate: '2022-02-24 12:25:24',
+    },
+    controlLimit: [
+      {
+        "sum": 1,
+        "type": "5"
+      }
+    ],
+    ...data
+  }
+}
 
-  
+let formFuncData = {
+  1: formInit1,
+  2: formInit2,
+  3: formInit3,
+  4: formInit4,
+};
 
-]
\ No newline at end of file
+export function formInit(type) {
+  return formFuncData[type];
+}
\ No newline at end of file

src/views/dashboard/index.vue

 <template>
   <div class="dashboard-container">
     <!-- 首页 -->
-    <header class="header_title">张呼铁路客运专线信息</header>
-    <el-row :gutter="24">
-      <el-col :span="12" v-for="item in listData" class="mb20">
-        <el-card shadow="never">
-          <div slot="header" class="clearfix posa">
-            <span>{{ item.title }}</span>
-            <el-button v-if="item.option" style="float: right; padding: 3px 0;margin-right:20px" type="text" class="savebtn">保存</el-button>
-          </div>
-          <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="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 class="alarmbtn" type="primary" size="mini">处理告警</el-button></el-col>
-                </el-row>
-                <div class="item_data" v-else>{{ k.value }}</div>
-              </el-col>
-            </el-row>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
     <div>
-      
+      <orgTree style="float:left" @selectItem="selectItem" />
+      <div class="ml300">
+        <type :type="type" :curInfo="curInfo" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { listData } from './const'
-
+import { treeBaseInfo } from './api'
+import orgTree from '@/components/orgTree.vue'
+import Type from './components/index.vue'
 export default {
   name: 'Dashboard',
   data() {
     return {
-      listData,
-      id:"",
+      type: 1,
+      curInfo: {}
     }
   },
+  components: {
+    orgTree,
+    Type
+  },
   computed: {
-    ...mapGetters([
-      'name'
-    ])
   },
- 
+  mounted() {
+    this.getDetailNode(4)
+  },
+  methods: {
+    selectItem(data) {
+      this.type = data.type
+      this.getDetailNode(data.id)
+    }, 
+    getDetailNode(data) {
+      let param = {
+        type: this.type,
+        id: data
+      }
+      treeBaseInfo(param).then(res => {
+        let controlLimit = res.controlLimit
+        controlLimit.map(item => {
+          res[`type${item.type}`]= item.sum
+        })
+        this.curInfo = res
+      })
+    },
+  }
 }
 
 </script>
@@ -64,13 +61,13 @@ export default {
   font-weight: 500;
   line-height: 40px;
   text-align: center;
-  color: #0058FF;
+  color: #0058ff;
   letter-spacing: 10px;
   opacity: 1;
   margin-bottom: 20px;
 }
 ::v-deep.el-card {
-  border: 1px solid #E3E3E3;
+  border: 1px solid #e3e3e3;
   border-radius: 8px;
   min-height: 243px;
   .el-card__header {
@@ -83,14 +80,14 @@ export default {
   }
   .el-card__body {
     padding: 0px;
+  }
 }
-}
-.posa{
+.posa {
   position: relative;
 }
-.savebtn{
+.savebtn {
   position: absolute;
-  right:2%;
+  right: 2%;
 }
 // .el-col {
 //   margin-bottom: 20px;
@@ -98,79 +95,75 @@ export default {
 .text {
   // display: flex;
   padding: 10px 20px 10px 20px;
-  border-bottom: 1px solid #E3E3E3;
+  border-bottom: 1px solid #e3e3e3;
   &:last-child {
     border-bottom: none;
   }
-   .item_name ,.item_data ,.value_handle {
-     height: 16px;
+  .item_name,
+  .item_data,
+  .value_handle {
+    height: 16px;
     line-height: 16px;
-     margin-top: 12px;
+    margin-top: 12px;
     margin-bottom: 12px;
   }
   .item_name {
     width: 262px;
     height: 16px;
     line-height: 16px;
-    color:#7E7E7E;
+    color: #7e7e7e;
     margin-top: 12px;
     margin-bottom: 12px;
   }
 
-  .item_data{
-   
+  .item_data {
   }
   .value_handle {
-    color:red;
+    color: red;
     margin-right: 10px;
-   
   }
-  .alarmbtn{
-     margin-top: 6px;
+  .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;
+  border-bottom: 1px solid #e3e3e3;
+  .item_name,
+  .item_data,
+  .value_handle {
+    height: 16px;
     line-height: 16px;
-     margin-top: 12px;
+    margin-top: 12px;
     margin-bottom: 12px;
   }
   .item_name {
     width: 262px;
     height: 16px;
     line-height: 16px;
-    color:#7E7E7E;
+    color: #7e7e7e;
     margin-top: 12px;
     margin-bottom: 12px;
   }
 
-  .item_data{
-   
+  .item_data {
   }
   .value_handle {
-    color:red;
+    color: red;
     margin-right: 10px;
     min-width: 52px;
-   
   }
-  .alarmbtn{
-     margin-top: 6px;
+  .alarmbtn {
+    margin-top: 6px;
     margin-bottom: 6px;
   }
   .el-card:last-child .text {
-  
     border-bottom: none !important;
+  }
 }
-}
- 
-
 </style>

src/views/maintain/api.js

+import request from '@/utils/request'
+
+const path = {
+  cableTypeEnum: 'equipParam/selectItem',
+  saveParam: 'equipParam/saveParam',
+}
+
+export function cableTypeEnum() {
+  return request.post(path.cableTypeEnum, ...arguments)
+}
+
+export function saveParam() {
+  return request.post(path.saveParam, ...arguments)
+}

src/views/maintain/parameter/const.js

+export const rules = {
+  equipType: [
+    { required: true, message: '请选择漏缆型号', trigger: 'blur' }
+  ],
+  normalAlarmLimit: [
+    { required: true, message: '请输入一般告警门限', trigger: 'blur' }
+  ],
+  majorAlarmLimit: [
+    { required: true, message: '请输入重要告警门限', trigger: 'blur' }
+  ],
+  emergAlarmLimit: [
+    { required: true, message: '请输入紧急告警门限', trigger: 'blur' }
+  ]
+}
\ No newline at end of file

src/views/maintain/parameter/index.vue

@@ -6,34 +6,34 @@
       </div>
       <el-form
         ref="form"
-        :model="formData"
+        :model="form"
         :rules="rules"
         label-width="200px"
         class="content-form"
       >
-        <el-form-item label="漏缆型号：" prop="code">
+        <el-form-item label="漏缆型号：" prop="equipType">
           <el-select
-            v-model="formData.code"
+            v-model="form.equipType"
             style="width: 100%"
             filterable
             placeholder="请选择漏缆型号"
           >
             <el-option
-              v-for="item in codeList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="item in equipTypeList"
+              :key="item.leakyCableMode"
+              :label="item.leakyCableMode"
+              :value="item.leakyCableMode"
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="一般告警门限：" prop="one">
-          <el-input v-model="formData.one" placeholder="请输入一般告警门限" />
+        <el-form-item label="一般告警门限：" prop="normalAlarmLimit">
+          <el-input v-model="form.normalAlarmLimit" placeholder="请输入一般告警门限" />
         </el-form-item>
-        <el-form-item label="重要告警门限：" prop="two">
-          <el-input v-model="formData.two" placeholder="请输入重要告警门限" />
+        <el-form-item label="重要告警门限：" prop="majorAlarmLimit">
+          <el-input v-model="form.majorAlarmLimit" placeholder="请输入重要告警门限" />
         </el-form-item>
-        <el-form-item label="紧急告警门限：" prop="three">
-          <el-input v-model="formData.three" placeholder="请输入紧急告警门限" />
+        <el-form-item label="紧急告警门限：" prop="emergAlarmLimit">
+          <el-input v-model="form.emergAlarmLimit" placeholder="请输入紧急告警门限" />
         </el-form-item>
       </el-form>
     </div>
@@ -51,45 +51,41 @@
 </template>
 
 <script>
+import { rules } from './const'
+import { cableTypeEnum, saveParam } from '../api'
 export default {
   data() {
     return {
       loading: false,
-      formData: {
-        code: '',
-        one: '',
-        two: '',
-        three: ''
+      form: {
+        equipType: '',
+        normalAlarmLimit: '',
+        majorAlarmLimit: '',
+        emergAlarmLimit: ''
       },
-      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: []
+      rules,
+      equipTypeList: []
     }
   },
+  mounted() {
+    this.getLeakyCablel()
+  },
   methods: {
-    reset() {
-      this.$refs.form.resetFields()
-    },
     submit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          console.log(this.formData)
+          saveParam(this.form).then(res => {
+            this.$message.success('操作成功')
+          })
         }
       })
-    }
+    },
+    getLeakyCablel() {
+      cableTypeEnum().then(res => {
+        let list = res || []
+        this.equipTypeList = list
+      })
+    },
   }
 }
 </script>