组织机构

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2962009 */
-  src: url('iconfont.woff2?t=1639983196379') format('woff2'),
-       url('iconfont.woff?t=1639983196379') format('woff'),
-       url('iconfont.ttf?t=1639983196379') format('truetype');
+  src: url('iconfont.woff2?t=1644799418308') format('woff2'),
+       url('iconfont.woff?t=1644799418308') format('woff'),
+       url('iconfont.ttf?t=1644799418308') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,58 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-caidan:before {
+  content: "\e616";
+}
+
+.icon-quanxian:before {
+  content: "\e63f";
+}
+
+.icon-mima:before {
+  content: "\e614";
+}
+
+.icon-zuzhijigou:before {
+  content: "\e60c";
+}
+
+.icon-caozuorizhi:before {
+  content: "\e68f";
+}
+
+.icon-yonghu:before {
+  content: "\e603";
+}
+
+.icon-jigou:before {
+  content: "\e615";
+}
+
+.icon-ziyuan:before {
+  content: "\e87e";
+}
+
+.icon-jiaoseqiehuan:before {
+  content: "\e612";
+}
+
+.icon-map-site-full:before {
+  content: "\ea00";
+}
+
+.icon-jigou1:before {
+  content: "\e610";
+}
+
+.icon-baocun2:before {
+  content: "\e60f";
+}
+
+.icon-bianji1:before {
+  content: "\e625";
+}
+
 .icon-shebeijiance:before {
   content: "\e6a7";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,97 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "5458039",
+      "name": "菜单3",
+      "font_class": "caidan",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "1305474",
+      "name": "权限",
+      "font_class": "quanxian",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "6284047",
+      "name": "密码",
+      "font_class": "mima",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "22526028",
+      "name": "组织机构",
+      "font_class": "zuzhijigou",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "375428",
+      "name": "操作日志",
+      "font_class": "caozuorizhi",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "725731",
+      "name": "用户",
+      "font_class": "yonghu",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "4653216",
+      "name": "机构",
+      "font_class": "jigou",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "10169795",
+      "name": "资源 29",
+      "font_class": "ziyuan",
+      "unicode": "e87e",
+      "unicode_decimal": 59518
+    },
+    {
+      "icon_id": "12770946",
+      "name": "角色切换",
+      "font_class": "jiaoseqiehuan",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "18170994",
+      "name": "地图组织站点,层级,下级,组织架构布局",
+      "font_class": "map-site-full",
+      "unicode": "ea00",
+      "unicode_decimal": 59904
+    },
+    {
+      "icon_id": "24939034",
+      "name": "机构",
+      "font_class": "jigou1",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "12719934",
+      "name": "保存",
+      "font_class": "baocun2",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "15714213",
+      "name": "编辑",
+      "font_class": "bianji1",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
       "icon_id": "6462688",
       "name": "设备检测",
       "font_class": "shebeijiance",

src/assets/styles/common.css

@@ -27,8 +27,6 @@ html,body{
 .common-modal .ivu-modal-header {
   background: linear-gradient(90deg, #0B7FD8, #09398E);
   border-bottom: 1px solid #21437B;
-  /* height: 46px;
-  line-height: 46px; */
 }
 .common-modal .ivu-modal-header .ivu-modal-header-inner {
   font-size: 16px;
@@ -152,13 +150,13 @@ textarea.ivu-input {
   color: #F5F5F5;
   height: 32px;
   line-height: 32px;
-}.ivu-input-number-handler {
+}
+.ivu-input-number-handler {
   height: 16px;
 }
 .ivu-input-number-handler-wrap {
   background: #06214D;
   border-left: 1px solid #0185EA;
- 
 }
 .ivu-input-number-handler-down {
   border-top: 1px solid #0185EA;

src/components/common/TreeList.vue

@@ -19,9 +19,9 @@ export default {
         return [];
       }
     },
-    clickAllNode: { // 是否能点击全部节点 （true可点击  false只能点击最后层级站点）
+    clickAllNode: { // 是否能点击全部节点 （true可点击  false第一层节点不能点击）
       type: Boolean,
-      default: false
+      default: true
     },
     firstCalssName: {
       type: String,
@@ -102,9 +102,10 @@ export default {
         ]
       );
     },
+    // arr当前以及上级的id
     selectChange(option) {
       let newArr = []
-      let arr = [], level  = null
+      let arr = [], level  = null, currentNodeId = null
       if (option.length != 0) {
         if (option.length == 2) {
           var result = []; // 两组数组对象取不同属性的值
@@ -128,73 +129,114 @@ export default {
         } else {
           newArr = option
         }
-        if (this.clickAllNode) {
-          this.treeData.forEach((items, index,itemsArr) => {
-            items.expand = false; //expand 是否展开直子节点 
-            items.disabled = false; // disabled 是否禁止选中
-            items.selected = false;
-            if (items.title == newArr[0].title && items.id == newArr[0].id) {
-                items.selected = true;
-                items.disabled = true; // disabled 是否禁止选中 
-                items.expand = true;
-                this.selectVal = items.title;
-                level = items.level
+         this.treeData.forEach((first, firstIndex,firstArr) => {
+            first.expand = false; //expand 是否展开直子节点 
+            if (this.clickAllNode) {
+              first.disabled = false; // disabled 是否禁止选中
+            }
+            // first.disabled = false; // disabled 是否禁止选中
+            first.selected = false;
+            if (first.title == newArr[0].title && first.id == newArr[0].id) {
+                first.selected = true;
+                first.disabled = true; // disabled 是否禁止选中 
+                first.expand = true;
+                this.selectVal = first.title;
+                level = first.level
+                currentNodeId = first.nodeId
             }  
-            if (items.children) {
-              items.children.forEach((val, i,valArr) => {
-              val.expand = false; //expand 是否展开直子节点 
-              val.disabled = false; // disabled 是否禁止选中
-              val.selected = false;
-              if (val.title == newArr[0].title && val.id == newArr[0].id) {
-                  val.selected = true;
-                  val.disabled = true; // disabled 是否禁止选中 
-                  val.expand = true;
-                  this.selectVal = val.title;
-                  items.expand = true
-                  arr.push(val.id)
-                  level = val.level
+            if (first.children) {
+              first.children.forEach((second, secondIndex,secondArr) => {
+              second.expand = false; //expand 是否展开直子节点 
+              second.disabled = false; // disabled 是否禁止选中
+              second.selected = false;
+              if (newArr[0].level == 1) {
+                secondArr[firstIndex].expand = true
               }
-              if (val.children && val.children.length>0) {
-                val.children.forEach((selectItem, j) => {
-                  selectItem.expand = false; //expand 是否展开直子节点 
-                  selectItem.disabled = false; 
-                  selectItem.selected = false;
-                  if (newArr[0].title =='合肥轨道交通') {
-                    valArr[index].expand = true
+              if (second.title == newArr[0].title && second.id == newArr[0].id) {
+                  second.selected = true;
+                  second.disabled = true; // disabled 是否禁止选中 
+                  second.expand = true;
+                  this.selectVal = second.title;
+                  currentNodeId = second.nodeId
+                  first.expand = true
+                  arr.push(second.id)
+                  level = second.level
+              }
+              if (second.children && second.children.length>0) {
+                second.children.forEach((thrid,thridIndex,thridArr) => {
+                  thrid.expand = false; //expand 是否展开直子节点 
+                  thrid.disabled = false; 
+                  thrid.selected = false;
+                  // if (newArr[0].level == 1) {
+                  // }
+                  if (thrid.title == newArr[0].title && thrid.id == newArr[0].id) {
+                    thrid.selected = true;
+                    thrid.disabled = true; // disabled 是否禁止选中 
+                    thrid.expand = true;
+                    second.expand = true
+                    first.expand = true
+                    this.selectVal = thrid.title;
+                    currentNodeId = thrid.nodeId
+                    arr.push(second.id)
+                    arr.push(thrid.id)
+                    level = thrid.level
                   }
-                  if (selectItem.title == newArr[0].title && selectItem.id == newArr[0].id) {
-                    selectItem.selected = true;
-                    selectItem.disabled = true; // disabled 是否禁止选中 
-                    selectItem.expand = true;
-                    val.expand = true
-                    items.expand = true
-                    this.selectVal = selectItem.title;
-                    arr.push(val.id)
-                    arr.push(selectItem.nodeId)
-                    level = selectItem.level
+                  if (thrid.children && thrid.children.length>0) {
+                    thrid.children.forEach((forth) => {
+                      forth.expand = false; //expand 是否展开直子节点 
+                      forth.disabled = false; 
+                      forth.selected = false;
+                      // if (newArr[0].level == 1) {
+                      // }
+                      if (forth.title == newArr[0].title && forth.id == newArr[0].id) {
+                        forth.selected = true;
+                        forth.disabled = true; // disabled 是否禁止选中 
+                        forth.expand = true;
+                        second.expand = true
+                        first.expand = true
+                        thrid.expand = true;
+                        this.selectVal = forth.title;
+                        currentNodeId = forth.nodeId
+                        arr.push(second.id)
+                        arr.push(thrid.id)
+                        arr.push(forth.id)
+                        level = forth.level  
+                      }
+                      if (forth.children && forth.children.length>0) {
+                        forth.children.forEach((five) => {
+                          five.expand = false; //expand 是否展开直子节点 
+                          five.disabled = false; 
+                          five.selected = false;
+                          // if (newArr[0].level == 1) {
+                          //   console.log('level4')
+                          // }
+                          if (five.title == newArr[0].title && five.id == newArr[0].id) {
+                            five.selected = true;
+                            five.disabled = true; // disabled 是否禁止选中 
+                            five.expand = true;
+                            second.expand = true
+                            first.expand = true
+                            thrid.expand = true
+                            forth.expand = true
+                            this.selectVal = five.title;
+                            currentNodeId = five.nodeId
+                            arr.push(second.id)
+                            arr.push(thrid.id)
+                            arr.push(forth.id)
+                            arr.push(five.id)
+                            level = five.level
+                          }
+                        })
+                        }
+                    })
                   }
                 })
               }
-            });   
+            });
             }        
           });
-        } else {
-           this.treeData.forEach((items, index) => {
-              items.expand = false; //expand 是否展开直子节点 
-              items.children.forEach((val, i) => {
-                val.selected = false; // selected 是否选中子节点
-                val.disabled = false;
-                if (val.title == newArr[0].title && val.id == newArr[0].id) {
-                  val.selected = true;
-                  val.disabled = true; // disabled 是否禁止选中 
-                  items.expand = true;
-                  this.selectVal = val.title;
-                }
-              });
-          });
-        }
       }
-      this.$emit('treeChange',this.selectVal,arr,level)
+      this.$emit('treeChange',this.selectVal,arr,level,currentNodeId)
     },
   }
 }

src/components/common/TreeSelect.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <Tree :data="treeData" @on-select-change="selectChange" ref="tree" :render="renderContent"></Tree>
+  </div>
+</template>
+<script>
+export default {
+  name: "TreeSelect",
+  props: {
+    // currentStaData: {
+    //   type: Array,
+    //   default: () => {
+    //     return [];
+    //   }
+    // },
+    defaultData: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    firstCalssName: {
+      type: String,
+      default: 'icon-hefeiditie'
+    },
+    secondCalssName: {
+      type: String,
+      default: 'icon-sutpczhihuizhantai'
+    },
+    thirdCalssName: {
+      type: String,
+      default: 'icon-ditiezhaofang'
+    },
+  },
+  data() {
+    return {
+      treeData: [],
+      selectVal: '',
+    };
+  },
+  // watch: {
+  //   defaultData: {
+  //   　handler(newValue, oldValue) {
+  //       this.treeData = newValue;
+  //   },　
+  //  }
+  // },
+  mounted() {
+    this.treeData = this.defaultData;
+  },
+  methods: {
+    selectChange(option) { 
+      this.$emit('treeSelectChange',option)
+    },
+  }
+}
+
+</script>
+<style scoped lang="stylus">
+>>> .ivu-tree-arrow {
+  color: #41aeff;
+  // height: 30px;
+  // line-height: 30px;
+  width: 15px;
+}
+>>> .ivu-tree-children li {
+  // width: 100%;
+}
+>>> .ivu-tree-title {
+  color: #fff;
+  min-width: 90%;
+  padding: 6px 4px;
+  vertical-align: middle;
+}
+>>> .ivu-tree-title:hover {
+    background-color: transparent;
+}
+>>> .ivu-tree-title-selected, >>> .ivu-tree-title-selected:hover {
+  background-color: #3565BC;
+  // background-color: transparent;
+  color: #fff;
+}
+>>> .ivu-tree-title img {
+  width: 18px;
+  height: 18px;
+}
+// >>> .ivu-tree .ivu-icon {// 禁止旋转
+//   -webkit-transform: rotate(0deg);
+//   transform: rotate(0deg);
+// }
+// >>> .ivu-tree .ivu-icon-ios-arrow-forward:before { //改变tree默认折叠的三角箭头
+//     background: url('../../assets/images/yu.png') no-repeat 0 3px;
+//     content: '';
+//     display: block;
+//     width: 16px;
+//     height: 16px;
+//     font-size: 16px;
+//     background-size: 16px;
+// }
+// >>> .ivu-tree .ivu-tree-arrow-open .ivu-icon-ios-arrow-forward:before { //改变tree默认展开的三角箭头
+//     background: url('../../assets/images/warning.png') no-repeat 0 0px;
+//     content: '';
+//     display: block;
+//     width: 16px;
+//     height: 16px;
+//     font-size: 16px;
+//     background-size: 16px;
+// }
+</style>

src/components/common/index.js

@@ -8,6 +8,7 @@ import NoData from './NoData.vue'
 import RollingDetailTable from './RollingDetailTable.vue'
 // import SelectType from './SelectType.vue'
 import TreeList from './TreeList.vue'
+import TreeSelect from './TreeSelect.vue'
 // import AsideList from './AsideList.vue'
 // import TabsList from './TabsList.vue'
 // import SearchTable from './SearchTable.vue'
@@ -35,6 +36,8 @@ const Global = {
     // Vue.component('SelectType', SelectType)
     // 树形组件
     Vue.component('TreeList', TreeList)
+    // 树形下拉框组件
+    Vue.component('TreeSelect', TreeSelect)
     // // 表格搜索组件
     // // Vue.component('SearchTable', SearchTable)
     // Vue.component('AsideList', AsideList)

src/router/index.js

@@ -15,6 +15,11 @@ const ApplicationManage = ()=>import('@/views/homecomponents/BasicInfomation/App
 const DeviceManage = ()=>import('@/views/homecomponents/BasicInfomation/DeviceManage.vue')
 const InstruManage = ()=>import('@/views/homecomponents/BasicInfomation/InstruManage.vue')
 const OperaTimeManage = ()=>import('@/views/homecomponents/BasicInfomation/OperaTimeManage.vue')
+const Organization = ()=>import('@/views/homecomponents/SystemSettings/Organization.vue')
+const UserManagement = ()=>import('@/views/homecomponents/SystemSettings/UserManagement.vue')
+const RolePermissions = ()=>import('@/views/homecomponents/SystemSettings/RolePermissions.vue')
+const ResourceManagement = ()=>import('@/views/homecomponents/SystemSettings/ResourceManagement.vue')
+const OperationLog = ()=>import('@/views/homecomponents/SystemSettings/OperationLog.vue')
 Vue.use(VueRouter)
 
 const routes = [
@@ -94,6 +99,31 @@ const routes = [
         name: 'OperaTimeManage', 
         component: OperaTimeManage
       },
+      {
+        path: 'Organization', 
+        name: 'Organization', 
+        component: Organization
+      },
+      {
+        path: 'UserManagement', 
+        name: 'UserManagement', 
+        component: UserManagement
+      },
+      {
+        path: 'RolePermissions', 
+        name: 'RolePermissions', 
+        component: RolePermissions
+      },
+      {
+        path: 'ResourceManagement', 
+        name: 'ResourceManagement', 
+        component: ResourceManagement
+      },
+      {
+        path: 'OperationLog', 
+        name: 'OperationLog', 
+        component: OperationLog
+      },
       // {
       //   path: 'BasicInfomation',
       //   component: BasicInfomation,

src/views/homecomponents/BasicInfomation/ApplicationEquip.vue

@@ -312,7 +312,7 @@ export default {
       this.loading = true
       this.$get('metroapi/application/equipmentTypeInfo', this.tableParams).then(res=>{
         this.loading = false
-          if ( res.httpCode == 1 ){
+          if (res.httpCode == 1 ){
             this.tableData = res.data.data
             this.tableTotal = res.data.count
             if (res.data.data.length==0) {

src/views/homecomponents/BasicInfomation/ApplicationStation.vue

@@ -289,28 +289,12 @@ export default {
       modalTitle: '',
       formOption: {appName: ''},
       ruleValidate: {
-        // lineId: [{
-        //   required: true,
-        //   message: '请选择所属线路',
-        //   trigger: 'change'
-        // }],
-        // stationId: [{
-        //   required: true,
-        //   message: '请选择所属站点',
-        //   trigger: 'change'
-        // }],
         appName: [{
           required: true,
           message: '请输入应用名称',
           trigger: 'blur'
         }],
-        // level: [{
-        //   required: true,
-        //   message: '请选择层级',
-        //   trigger: 'change'
-        // }]
       }, 
-      // levelModalData: [],
       currentModalTabs:'基础信息',
       tabsModalData: [{label:'基础信息'},{label:'关联设备类型'}],
       detailLabel: [],
@@ -333,7 +317,6 @@ export default {
             align: 'center'
           }
       ],
-      // equipTableData: [],
       detailParams: {
 					applicationId: null,
 					pageNum: 1,
@@ -521,13 +504,14 @@ export default {
     modalDetailChange (val) {
      	if (!val) {
         this.detailParams.pageNum = 1
-        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+        if (this.currentModalTabs == '关联设备类型') {      
+          document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+        }
       }
     },
     modalOk (formName) {
       let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
       // params.lineId = params.lineId == '-1' ? null:params.lineId
-      // params.lineName = params.lineName == '线路' ? null:params.lineName
       // params.stationId = params.stationId == '-1' ? null:params.stationId
       // params.stationName = params.stationName == '站点' ? null:params.stationName
       if (this.title == '新增应用') {

src/views/homecomponents/BasicInfomation/LineStationManage.vue

@@ -48,7 +48,7 @@ export default {
       showTree: true,// 是否显示树形组件
 		  stationData: [],
       tabsData: [{label:'线路管理'},{label:'站点管理'}],
-      currentTabs: '线路管理'
+      currentTabs: '线路管理',
     };
   },
   created() {

src/views/homecomponents/BasicInfomation/StationManage.vue

@@ -277,10 +277,11 @@ export default {
           width: 120,
         }
       ],
-      detailLabel: []
+      detailLabel: [],
     };
   },
   mounted() {
+    // console.log(this.num)
   },
   methods: {
     rowClassName(row, index) {

src/views/homecomponents/EquipmentAnalysis/LevelDeterConfig.vue

@@ -385,7 +385,7 @@ export default {
         },
       ],
       strategyIndicNum: [
-         {
+        {
           value: '-1',
           label: '策略覆盖指标数量'
         },

src/views/homecomponents/SystemSettings/OperationLog.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    角色
+  </div>
+</template>
+<script>
+export default {
+  name: "OperationLog",
+  components:{
+  },
+  data() {
+    return {
+    };
+  },
+  mounted() {
+  },
+  methods: {
+   
+  }
+};
+</script>
+<style scoped lang="stylus">
+
+</style>

src/views/homecomponents/SystemSettings/Organization.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="content-main">
+    <div class="content-body-wrap">
+     <div class="content-body">
+         <Row :gutter="8" style="width:100%;height: 100%">
+          <i-col span="4" style="height:100%">
+            <div class="station-tree">
+              <div class="station-tree-body">
+                <div class="station-tree-top">
+                  <Input suffix="ios-search" placeholder="输入关键字查询" clearable search v-model="currentStation" class="common-search"  @on-search="iconChange"/>
+                </div>
+                <div class="station-tree-center">
+                  <div class="station-tree-left common-scroll" v-show="showTree">
+                    <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="false" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
+                  </div>
+                  <div class="station-tree-left-notree" v-show="!showTree">
+                    关键字输入错误！
+                  </div>
+                </div>
+              </div>
+            </div>
+          </i-col>
+          <i-col span="20" style="height:100%">
+            <div class="right-main">
+              <organization-index :stationData="stationData" :levelNum="levelNum" :currentOrgId="currentOrgId" @changeTree="changeTree" ref="treeManage"></organization-index>
+            </div>
+          </i-col>
+        </Row>
+     </div>
+    </div>
+  </div>
+</template>
+<script>
+import OrganizationIndex from './OrganizationIndex.vue'
+export default {
+  name: "Organization",
+   components:{
+    OrganizationIndex
+  },
+  data() {
+    return {
+      currentStation: '',
+      currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
+      showTree: true,// 是否显示树形组件
+		  stationData: [],
+      levelNum: 0,
+      currentOrgId: '',
+      // data: [],
+      //  value1: [],
+    };
+  },
+  // watch: {
+  //     currentStation(val) {
+  //         let arr=JSON.parse(JSON.stringify(this.stationData))
+  //         this.data=this.filterNode(val,arr)
+  //     }
+  // },
+  created () {
+    this.getMetroLevel('init')
+  },
+  mounted() {
+  },
+   // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
+  },
+  methods: {
+     // 获取树形数据
+    getMetroLevel (text,currentOrgId,editText) {
+      this.$get('metroapi/org/sysOrgTree').then(res => {
+				if (res.httpCode == 1) {
+          this.stationData = res.data
+          if (text == 'update') {
+            this.stationData = this.getChangeTree(this.stationData,currentOrgId,editText)
+          } else {
+            this.stationData = this.getTree(this.stationData)
+          }
+				}
+		  })
+    },
+    getTree(arr) {
+      return arr.map((v,index) => {
+        if (index==0) {
+          v.expand = true
+        } else {
+          v.expand = false
+        }
+        if (v.level== 1) {
+          v.disabled = true
+        }
+        if (index==0 && v.level== 2) {
+          this.levelNum = v.level
+          v.selected = true
+          v.disabled = true
+          this.currentStation = v.title
+          this.currentOrgId = v.nodeId
+          this.$refs.treeManage.getOrgData(v.nodeId)
+        }
+        if (v.children) v.children = this.getTree(v.children);
+        return v;
+      });
+    },
+    getChangeTree(arr,currentOrgId,editText) {
+      return arr.map((v,index) => {
+        if (v.level== 1) {
+          v.disabled = true
+        }
+        if (v.nodeId == currentOrgId) {
+          this.levelNum = v.level
+          v.selected = true
+          v.disabled = true
+          this.currentStation = v.title
+          this.currentOrgId = v.nodeId
+          this.$refs.treeManage.getOrgData(v.nodeId,editText)
+        }
+        if (v.children) v.children = this.getChangeTree(v.children,currentOrgId,editText);
+        return v;
+      });
+    },
+    iconChange: _.throttle(function() {
+      this.currentStaData = []
+      this.treeName = []
+      if(this.currentStation != ''){
+        this.showTree = false
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+      } else {
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = true
+        this.stationData = this.getTree(this.stationData)
+        return 
+      }
+      if (this.currentStation == this.stationData[0].title) {
+        this.showTree = true
+        return
+      }
+      // let currentNodeId = this.filterNodeId(this.stationData,this.currentStation)
+      // if (currentNodeId) {
+      //   this.stationData = this.getParentIdList(this.stationData,currentNodeId)
+      // }
+      this.getSelectedItem()
+		}, 500),
+    getSelectedItem  () {
+      let level  = null, currentNodeId = null
+      this.stationData.forEach((first, firstIndex,firstArr) => {
+            first.expand = false; //expand 是否展开直子节点 
+            if (this.clickAllNode) {
+              first.disabled = false; // disabled 是否禁止选中
+            }
+            first.selected = false;
+            if (first.title == this.currentStation) {
+                first.selected = true;
+                first.disabled = true; // disabled 是否禁止选中 
+                first.expand = true;
+                level = first.level
+                currentNodeId = first.nodeId
+                this.showTree = true
+            }  
+            if (first.children) {
+              first.children.forEach((second, secondIndex,secondArr) => {
+              second.expand = false; //expand 是否展开直子节点 
+              second.disabled = false; // disabled 是否禁止选中
+              second.selected = false;
+              if (second.title == this.currentStation) {
+                  second.selected = true;
+                  second.disabled = true; // disabled 是否禁止选中 
+                  second.expand = true;
+                  currentNodeId = second.nodeId
+                  first.expand = true
+                  level = second.level
+                  this.showTree = true
+              }
+              if (second.children && second.children.length>0) {
+                second.children.forEach((thrid,thridIndex,thridArr) => {
+                  thrid.expand = false; //expand 是否展开直子节点 
+                  thrid.disabled = false; 
+                  thrid.selected = false;
+                  if (thrid.title == this.currentStation) {
+                    thrid.selected = true;
+                    thrid.disabled = true; // disabled 是否禁止选中 
+                    thrid.expand = true;
+                    second.expand = true
+                    first.expand = true
+                    currentNodeId = thrid.nodeId
+                    level = thrid.level
+                    this.showTree = true
+                  }
+                  if (thrid.children && thrid.children.length>0) {
+                    thrid.children.forEach((forth) => {
+                      forth.expand = false; //expand 是否展开直子节点 
+                      forth.disabled = false; 
+                      forth.selected = false;
+                      if (forth.title == this.currentStation) {
+                        forth.selected = true;
+                        forth.disabled = true; // disabled 是否禁止选中
+                        forth.expand = true;
+                        second.expand = true
+                        first.expand = true
+                        thrid.expand = true;
+                        currentNodeId = forth.nodeId
+                        level = forth.level
+                        this.showTree = true
+                      }
+                      if (forth.children && forth.children.length>0) {
+                        forth.children.forEach((five) => {
+                          five.expand = false; //expand 是否展开直子节点 
+                          five.disabled = false; 
+                          five.selected = false;
+                          if (five.title == this.currentStation) {
+                            five.selected = true;
+                            five.disabled = true; // disabled 是否禁止选中 
+                            five.expand = true;
+                            second.expand = true
+                            first.expand = true
+                            thrid.expand = true
+                            forth.expand = true
+                            currentNodeId = five.nodeId
+                            level = five.level
+                            this.showTree = true
+                          }
+                        })
+                        }
+                    })
+                  }
+                })
+              }
+            });
+            }        
+          });
+      this.$refs.treeManage.getOrgData(currentNodeId)
+    },
+    // 根据搜索框的值查到当前nodeId
+    filterNodeId(list,val){
+      let _this=this
+      for (let i = 0; i < list.length; i++) {
+        let a=list[i]
+        if(a.title=== val){
+          return a.nodeId
+        }else{
+          if(a.children && a.children.length>0){
+            let res=_this.filterNodeId(a.children,val)
+            if(res){
+              return res
+            }
+          }
+        }
+      }
+    },
+    // 递归循环 根据当前id找到它的所有父节点
+    getParentIdList(list, id) {
+        if (!list || !id) {
+            return ''
+        }
+        let arr = [];
+        let findParent = (data, currentdId, nodeId) => {
+            for (var i = 0, length = data.length; i < length; i++) {
+                let node = data[i];
+                node.expand = false
+                node.selected = false
+                node.disabled = false
+                if (node.level== 1) {
+                  node.disabled = true
+                }
+                if (node.nodeId === currentdId) {
+                    node.expand = true
+                    if (node.title == this.currentStation) {
+                      node.expand = true   
+                      this.currentOrgId = node.nodeId
+                      node.selected = true
+                      node.disabled = true
+                      this.showTree = true
+                      this.$refs.treeManage.getOrgData(node.nodeId)        
+                    }
+                    if (!node.nodeId) {
+                        break
+                    }
+                    findParent(list, nodeId);
+                    // break
+                } else {
+                    if (node.children) {
+                      findParent(node.children, currentdId, node.nodeId);
+                    }
+                    continue
+                }
+            }
+            return list;
+        }
+        return findParent(list, id);
+    },
+    treeChange(val,arr,level,currentNodeId) {
+      this.levelNum = level
+      this.currentStation = val
+      this.$refs.treeManage.getOrgData(currentNodeId)
+		},
+    changeTree (currentOrgId,editText) {
+    this.getMetroLevel('update',currentOrgId,editText)
+    }
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main {
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+}
+.content-body-wrap {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+}
+.content-body {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+  // padding: 10px;
+}
+.common-search {
+  width: 100%;
+}
+>>> .common-search .ivu-input {
+  background-color: #06214D;
+  border: 1px solid #2355A6;
+  border-radius: 15px;
+  color: #fff;
+  height: 32px;
+}
+>>> .common-search .ivu-input:focus {
+    border-color: #0185ea;
+}
+.station-tree {
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-body {
+  border: 1px solid #204384;
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-center {
+  height: calc(100% - 32px);
+  padding-top: 10px;
+}
+.station-tree-left {
+  height: 100%;
+  overflow: auto;
+}
+.station-tree-left-notree {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  fon-size: 14px;
+}
+.right-main {
+  height: 100%;
+  padding: 10px 0;
+}
+</style>

src/views/homecomponents/SystemSettings/OrganizationIndex.vue

@@ -0,0 +1,876 @@
+<template>
+  <div class="content-main-manage">
+    <div class="content-top">
+      <div class="content-top-title">当前组织信息</div>
+      <div class="btn-container">
+        <Button icon="ios-add" class="common-add-btn common-add-btn-left" @click="addClick('平级')">新增平级组织</Button>
+        <Button icon="ios-add" class="common-add-btn" @click="addClick('下级')" :disabled="childDisabled">新增下级组织</Button>
+      </div>
+    </div>
+    <Form class="common-form common-form-list" ref="currentOrganList" :model="currentOrganList" :rules="ruleValidate" :label-width="120" inline>
+      <FormItem label="序号" prop="orgOrder" style="width:48%">
+        <div v-show="!isSaveNumber" class="form-item-save">
+          <div class="form-item-init">{{currentOrganList.orgOrder}}</div>
+          <i class='iconfont icon-bianji1' @click="editIconNumber('edit')"></i>
+        </div>
+        <div v-show="isSaveNumber" class="form-item-save">
+          <InputNumber placeholder="请输入1~99，序号越小显示越靠前" :max="99" :min="1" v-model.trim="currentOrganList.orgOrder"></InputNumber>
+          <i class='iconfont icon-baocun2' @click="editIconNumber('save')"></i>
+        </div>
+      </FormItem>
+      <FormItem label="组织名称" prop="orgName" style="width:48%">
+        <div v-show="!isSaveName" class="form-item-save">
+          <div class="form-item-init">{{currentOrganList.orgName}}</div>
+          <i class='iconfont icon-bianji1' @click="editIconName('edit')"></i>
+        </div>
+        <div v-show="isSaveName" class="form-item-save">
+          <Input placeholder="" v-model.trim="currentOrganList.orgName" maxlength="20" show-word-limit />
+          <i class='iconfont icon-baocun2' @click="editIconName('save')"></i>
+        </div>
+      </FormItem>
+      <FormItem label="负责人" prop="orgLeader" style="width:48%">
+         <div v-show="!isSaveLeader" class="form-item-save">
+          <div class="form-item-init">{{currentOrganList.orgLeader}}</div>
+          <i class='iconfont icon-bianji1' @click="editIconLeader('edit')"></i>
+        </div>
+        <div v-show="isSaveLeader" class="form-item-save">
+         <Input placeholder="" v-model.trim="currentOrganList.orgLeader" maxlength="10" show-word-limit/>
+          <i class='iconfont icon-baocun2' @click="editIconLeader('save')"></i>
+        </div>
+      </FormItem>
+      <FormItem label="启用状态" prop="enabled" style="width:48%;">
+        <div>
+           <i-switch true-color="#57C44F" :true-value="1" :false-value="0" v-model="currentOrganList.isEnabled" @mousedown.native="changeSwitch(currentOrganList)">
+        </i-switch>
+        </div>
+      </FormItem>
+      <FormItem label="当前组织用户数" prop="equipmentStatus" style="width:48%">
+        <span class="form-item-bot-left">{{currentOrganList.curOrgUserCount || 0}}</span>
+      </FormItem>
+      <FormItem label="次级组织总数" prop="equipmentStatus" style="width:48%">
+        <span class="form-item-bot-right">{{currentOrganList.childOrgCount || 0}}个</span>
+      </FormItem>
+    </Form>
+    <div class="content-top">
+      <div class="content-top-title">次级组织信息</div>
+    </div>
+    <div class="search-list">
+      <div class="search-left">
+        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
+          <FormItem label="" prop="isEnabled">
+            <Select v-model="tableParams.isEnabled" placeholder="启用状态">
+              <Option v-for="item in enabledData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="orgUserNum">
+            <Select v-model="tableParams.orgUserNum" placeholder="组织用户数">
+              <Option v-for="item in userData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="">
+            <DatePicker type="datetimerange" :value="dateRange" format="yyyy-MM-dd HH:mm:ss" placeholder="更新时间范围" class="common-date-picker date-picker-main" :clearable="false" :editable="false" @on-change="changePicker"></DatePicker>
+          </FormItem>
+          <FormItem label="" prop="equipmentName">
+            <Input placeholder="输入负责人关键字查询" clearable search v-model="tableParams.equipmentName" />
+          </FormItem>
+          <FormItem label="" >
+            <Button type="primary" class="common-btn-search" @click="searchClick">
+              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
+            </Button> 
+            <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
+              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
+            </Button>   
+          </FormItem>
+        </Form>
+      </div>
+    </div>
+    <div class="manage-main-center">
+      <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
+        <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+         <template slot-scope="{ row }" slot="action">
+           <Tooltip content="编辑" placement="top">
+              <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
+           </Tooltip>
+            <!-- <Tooltip content="删除" placement="top">
+              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
+           </Tooltip> -->
+        </template>
+      </Table>
+    </div>
+    <div class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
+    <Modal
+      v-model="showModal"
+      :title="title"
+      width="36"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      @on-visible-change="modalChange"
+      class-name="common-modal">
+      <Form class="common-form common-form-modal" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
+				<FormItem label="上级节点：" >
+          <span>{{orgTitle}}</span>
+				</FormItem>
+        <!-- <FormItem label="组织名称：" prop="orgName">
+          <Poptip v-model="visiblePoptip" placement="bottom-start">
+              <i-input clearable v-model="formOption.orgName" placeholder="请选择组织机构"></i-input>
+              <div slot="content">
+                <Tree :data="stationData" @on-select-change="handleCheckChange"></Tree>
+              </div>
+          </Poptip>
+				</FormItem> -->
+        <!-- <FormItem label="组织名称：" prop="orgTest">
+          <Cascader :data="data3" :render-format="format" change-on-select v-model="formOption.orgTest"></Cascader>
+        </FormItem> -->
+				<FormItem label="序号：" prop="orgOrder">
+          <InputNumber :max="99" :min="1" v-model="formOption.orgOrder" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
+        </FormItem>
+        <FormItem label="组织名称：" prop="orgName">
+          <Input v-model="formOption.orgName" maxlength="20" show-word-limit />
+        </FormItem>
+         <FormItem label="负责人：" prop="orgLeader">
+          <Input v-model="formOption.orgLeader" maxlength="10" show-word-limit />
+        </FormItem>
+         <FormItem label="启用状态：" prop="isEnabled" v-if="title == '新增组织'">
+          <i-switch true-color="#57C44F" v-model="formOption.isEnabled" disabled></i-switch>
+          <span style="color: #718EBD;margin-left:6px">关</span>
+          <span style="color: #718EBD;margin-left:12px">（所有新增状态均为关闭，需在列表打开）</span>
+        </FormItem>
+			</Form>
+      <div slot="footer">
+          <Button @click="modalCancel">取消</Button>
+          <Button type="primary" @click="modalOk('formOption')">确定</Button>
+        </div>
+    </Modal>
+    <Modal
+      v-model="modalStatus"
+      :title="commonTitle"
+      width="25"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      class-name="common-modal">
+      <i :class="'iconfont '+ activeClass" :style="{ color: activeColor}" class="modal-icon"></i>
+      <span class="modal-text">{{modalTitle}}</span>
+      <div slot="footer">
+          <Button @click="commonCancel">取消</Button>
+          <Button type="primary" @click="commonOk">确定</Button>
+        </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {parentOrgId: '',orgLevel:null,orgOrder:null,orgName: '',orgLeader: '',isEnabled:0}
+export default {
+  name: "OrganizationIndex",
+  components:{
+  },
+  props: {
+    stationData: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    levelNum: {
+      type: Number,
+    },
+    currentOrgId: [String,Number]
+  },
+  data() {
+    return {
+      currentOrganList: {},
+      currentParams: {},
+      ruleValidate: {
+        orgOrder: [{
+            required: true,
+            type: 'number',
+            message: '请输入序号',
+            trigger: 'blur'
+        }],
+        orgName: [{
+            required: true,
+            message: '请输入组织名称',
+            trigger: 'blur'
+        }],
+        // orgTest: [{
+        //     type: 'array',
+        //     required: true,
+        //     message: '请选择组织名称',
+        //     trigger: 'change'
+        // }],
+      },
+      formOption: {},
+      isSaveNumber: false,
+      numberTitle: 'edit',
+      isSaveName: false,
+      nameTitle: 'edit',
+      isSaveLeader: false,
+      showModal: false,
+      enabledData: [
+         {
+          value: '-1',
+          label: '启用状态'
+        },
+        {
+          value: '1',
+          label: '启用'
+        },
+        {
+          value: '0',
+          label: '关闭'
+        },
+      ],
+      userData: [
+         {
+          value: '-1',
+          label: '组织用户数'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      tableParams: {
+        parentOrgId: '',
+        isEnabled: '',
+        orgUserNum: '',
+        beginUpdateTime: '',
+        endUpdateTime: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 6
+      },
+      dateRange: [],
+      tableData: [],
+      tableTotal: 0,
+      tablePage: 0,
+      rowObj: {},
+      loading: true,
+      isClickOrg: true,
+      isClickOrgId: null,
+      columns: [
+          {
+            title: '序号',
+            key: 'orgOrder',
+            align: 'center'
+          },
+          {
+            title: '组织名称',
+            key: 'orgName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '负责人',
+            key: 'orgLeader',
+            align: 'center'
+          },
+          {
+            title: '当前组织用户数',
+            key: 'curOrgUserCount',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '次级组织总数',
+            key: 'childOrgCount',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '更新时间',
+            align: 'center',
+            key: 'updateTime',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '启用状态',
+            key: 'isEnabled',
+            align: 'center',
+            width: 120,
+            render: (h, params) => {
+              return h('div', [                             
+                h('i-switch', {
+                  props: { value: params.row.isEnabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
+                  },
+                  nativeOn:{
+                      "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
+                        this.rowObj =  params.row
+                        this.isClickOrg = false
+                        if (params.row.isEnabled == 1) {
+                          this.commonTitle = '确认关闭'
+                          this.activeColor = '#E92E2E'
+                          this.activeClass = 'icon-guanbi'
+                          this.modalTitle = '关闭后线路下所有站点将同时关闭，线路及站点统计数据不可见。'
+                          this.modalStatus = true         
+                        } else {
+                          this.commonTitle = '确认启用'
+                          this.activeColor = '#57C44F'
+                          this.activeClass = 'icon-qiyong'
+                          this.modalTitle = '启用后此线路统计数据将在各管理模块及前端显示页面生效。'
+                          this.modalStatus = true
+                        }
+                      },
+                    }
+                }),
+              ])
+            }
+        },
+        {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 80,
+        }
+      ],
+      modalStatus: false,
+      childDisabled: false,
+      title: '新增组织',
+      commonTitle: "",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {parentOrgId: '',orgLevel: null,orgOrder:null,orgName: '',orgLeader: '',isEnabled:0},
+      orgTitle: '',
+      isOrgAdd: '',// 判断是新增平级还是下级
+      disabledLevel: 0,
+      // visiblePoptip: false,
+      currentTreeId: null,
+      // data3: [
+      //             {
+      //               value: 'zhejiang',
+      //               label: '浙江',
+      //               children: [{
+      //                   value: 'hangzhou',
+      //                   label: '杭州',
+      //                   children: [{
+      //                       value: 'xihu',
+      //                       label: '西湖',
+      //                       code: 310000
+      //                   }]
+      //               }]
+      //           }, {
+      //               value: 'jiangsu',
+      //               label: '江苏',
+      //               children: [{
+      //                   value: 'nanjing',
+      //                   label: '南京',
+      //                   children: [{
+      //                       value: 'zhonghuamen',
+      //                       label: '中华门',
+      //                       code: 210000
+      //                   }]
+      //               }]
+      //           }]
+    };
+  },
+  watch: {
+    levelNum: {
+    　handler(newValue, oldValue) {
+        this.disabledLevel = newValue
+        if (this.disabledLevel>=5) {
+        this.childDisabled = true
+        } else {
+          this.childDisabled = false
+        }
+      },　
+      // immediate: true,
+   },
+  },
+  mounted() {
+  },
+  methods: {
+    // getTestTree(arr) {
+    //   return arr.map((v,index) => {
+    //     v.value = v.id
+    //     v.label = v.title
+    //     v.children = v.children ? v.children: []
+    //     if (v.children) v.children = this.getTestTree(v.children);
+    //     return v;
+    //   });
+    // },
+    //  format (labels, selectedData) {
+    //     const index = labels.length - 1;
+    //     return labels[index];
+    //   },
+    // handleCheckChange (val) {
+    //   this.formOption.orgName = val[0].title;
+    //   this.visiblePoptip = false;
+    // },
+    editIconNumber (title) {
+      this.numberTitle = title
+      if (title == 'edit') {
+        this.isSaveNumber = true
+      } else {
+        let params = this.currentOrganList
+        this.$nextTick(()=> {
+          this.$refs.currentOrganList.validateField('orgOrder',(valid)=> {
+            if (!valid) {
+               this.$post('metroapi/org/editSysOrg', params).then(res=>{
+                if (res.httpCode == 1 ){
+                  this.isSaveNumber = false
+                  this.$emit('changeTree',this.currentOrganList.orgId,'isTopEditOrg')
+                  this.$Message.info(res.msg)
+                } else {
+                  this.$Message.info(res.msg)
+                }
+              })
+            }
+          })
+        })
+     }
+    },
+    editIconName (title) {
+      this.nameTitle = title
+      if (title == 'edit') {
+        this.isSaveName = true
+      } else {
+          let params = this.currentOrganList
+          this.$nextTick(()=> {
+            this.$refs.currentOrganList.validateField('orgName',(valid)=> {
+              if (!valid) {
+                this.$post('metroapi/org/editSysOrg', params).then(res=>{
+                  if (res.httpCode == 1 ){
+                    this.isSaveName = false
+                    this.$emit('changeTree',this.currentOrganList.orgId,'isTopEditOrg')
+                    this.$Message.info(res.msg)
+                  } else {
+                    this.$Message.info(res.msg)
+                  }
+                })
+              }
+            })
+          })
+      }
+    },
+    editIconLeader (title) {
+      this.nameTitle = title
+      if (title == 'edit') {
+        this.isSaveLeader = true
+      } else {
+          let params = this.currentOrganList
+          this.$post('metroapi/org/editSysOrg', params).then(res=>{
+            if (res.httpCode == 1 ){
+              this.isSaveLeader = false
+              this.$emit('changeTree',this.currentOrganList.orgId,'isTopEditOrg')
+              this.$Message.info(res.msg)
+            } else {
+              this.$Message.info(res.msg)
+            }
+          })
+      }
+    },
+    changeSwitch (curObj) {
+      this.isClickOrgId = curObj.orgId
+      this.isClickOrg = true
+        if (curObj.isEnabled == 1) {
+          this.commonTitle = '确认关闭'
+          this.activeColor = '#E92E2E'
+          this.activeClass = 'icon-guanbi'
+          this.modalTitle = '关闭后，组织下所有子节点将同时关闭；组织及下属组织用户状态将全部关闭。请谨慎操作。'
+          this.modalStatus = true         
+        } else {
+          this.commonTitle = '确认启用'
+          this.activeColor = '#57C44F'
+          this.activeClass = 'icon-qiyong'
+          this.modalTitle = '启用组织后，组织下子节点仍为关闭状态，请在列表中手动开启。'
+          this.modalStatus = true
+        }
+    },
+    changePicker (date) {
+      this.tableParams.beginUpdateTime = date[0]
+      this.tableParams.endUpdateTime = date[1]
+    },
+    rowClassName(row, index) {
+      if (index % 2 == 0) {
+        return "ivu-table-stripe-even";
+      } else {
+        return "ivu-table-stripe-odd";
+      }
+    },
+    // 分页
+    changePage (val) {
+      this.tableParams.pageNum = val
+      this.getTableData()
+    },
+    //跳转
+    sizeChange (val) {
+      this.tableParams.pageSize = val
+      this.getTableData()
+    },
+    // 获取当前组织信息
+    getOrgData (currentOrgId,text) {
+      this.currentTreeId = currentOrgId
+      this.$get('metroapi/org/viewSysOrg', {sysOrgId:currentOrgId}).then(res=>{
+        if ( res.httpCode == 1 ){
+          this.currentOrganList = res.data
+          // 编辑当前信息(不是表格里的当前信息) 不走表格接口 text = = 'isTopEditOrg'
+          if (text != 'isTopEditOrg') {
+            this.getTableData(currentOrgId)
+          }
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })   
+    },
+     // 获取表格数据
+    getTableData (nodeId) {
+      this.tableParams.parentOrgId = nodeId ? nodeId : this.currentTreeId
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.orgUserNum = params.orgUserNum == '-1' ? '':params.orgUserNum
+      params.isEnabled = params.isEnabled == '-1'?'':params.isEnabled
+      this.loading = true
+      this.$get('metroapi/org/querySysOrgPage', params).then(res=>{
+        this.loading = false
+          if (res.httpCode == 1 ){
+            this.tableData = res.data.data
+            this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            } 
+            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    searchClick () {
+      this.tableParams.pageNum = 1
+      this.getTableData()
+    },
+    resetClick (name) {
+     this.dateRange = []
+     this.tableParams.beginUpdateTime = ''
+     this.tableParams.endUpdateTime = ''
+     this.$refs[name].resetFields()
+     this.tableParams.pageNum = 1
+     this.getTableData()
+    },
+    addClick (text) {
+      this.isOrgAdd = text
+      this.title = '新增组织'
+      this.orgTitle = this.currentOrganList.parentOrgName ? this.currentOrganList.parentOrgName : this.stationData[0].title
+      if(text == '平级') {
+        this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+        this.formOption.orgLevel = this.currentOrganList.orgLevel
+        this.formOption.parentOrgId = this.currentOrganList.parentOrgId ? this.currentOrganList.parentOrgId : ''
+        this.showModal = true
+      } else {
+        this.formOption.orgLevel = this.currentOrganList.orgLevel + 1
+        this.formOption.parentOrgId = this.currentOrganList.orgId
+      }
+      this.showModal = true
+    },
+    editClick (row) {
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row));
+      this.orgTitle = this.formOption.parentOrgName
+      this.title = '编辑组织'
+      this.showModal = true
+    },
+    // delClick (row) {
+    //   this.rowObj = row
+    //   let params = {
+    //     sysOrgId: row.orgId
+    //   }
+    //   this.$get('metroapi/org/delSysOrg',params).then(res=>{
+    //     if (res.httpCode == 1 ){
+    //       let orgId = row.parentOrgId 
+    //       this.$emit('changeTree',orgId)
+    //     } else {
+    //       this.$Message.info(res.msg)
+    //     }
+    //   })
+    // },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    modalOk (formName) {
+      let params = JSON.parse(JSON.stringify(this.formOption))
+      if (this.title == '新增组织') {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/org/addSysOrg', params).then(res=>{
+              if ( res.httpCode == 1 ){
+                let orgId = null 
+                if (this.isOrgAdd == '平级') {
+                  orgId = this.currentOrganList.orgId
+                } else {
+                  orgId = params.parentOrgId
+                }
+                this.showModal = false
+                this.$emit('changeTree',orgId)
+                this.$Message.info(res.msg)
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      } else {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/org/editSysOrg', params).then(res=>{
+              if (res.httpCode == 1 ){
+                this.showModal = false
+                this.$emit('changeTree',this.rowObj.parentOrgId)
+                this.$Message.info(res.msg)
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      }
+    },
+    modalCancel () {
+      this.showModal = false
+    }, 
+    commonOk () {
+      if (this.commonTitle == '确认启用') {
+        let params = {
+          enabled: 1
+        }
+        if (this.isClickOrg) {
+          params.sysOrgId = this.isClickOrgId
+        } else {
+          params.sysOrgId = this.rowObj.orgId
+        }
+        this.getEnabledStatus(params)
+      } else if (this.commonTitle == '确认关闭') {
+        let params = {
+          enabled:0
+        }
+         if (this.isClickOrg) {
+          params.sysOrgId = this.isClickOrgId
+        } else {
+          params.sysOrgId = this.rowObj.orgId
+        }
+        this.getEnabledStatus(params)
+      }
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+    // 启用 关闭/接口
+    getEnabledStatus (params) {
+      this.$get('metroapi/org/enableSysOrg',params).then(res=>{
+        if (res.httpCode == 1 ){
+          if (params.enabled == 0) {
+            if (this.isClickOrg) {
+             this.currentOrganList.isEnabled = 0
+            } else {
+              this.rowObj.isEnabled = 0
+            }
+          } else {
+            if (this.isClickOrg) {
+             this.currentOrganList.isEnabled = 1
+            } else {
+              this.rowObj.isEnabled = 1
+            }
+          }
+          this.modalStatus = false
+        } else {
+          if (this.isClickOrg) {
+            this.currentOrganList.isEnabled = 0
+          } else {
+            this.rowObj.isEnabled = 0
+          }
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main-manage {
+  position: relative;
+  height: 100%;
+}
+.content-top { 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #173B77;
+  padding-bottom: 10px;
+}
+.content-top-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #0185EA;
+  padding-left: 8px;
+  border-left: 3px solid #0185EA;
+  height: 18px;
+  line-height: 18px;
+}
+.common-add-btn-left {
+  margin-right: 26px;
+}
+>>> .common-form-list {
+  margin-top: 20px;
+}
+>>> .common-form-list .ivu-form-item{
+  margin-bottom: 24px;
+}
+>>> .common-form-list .ivu-form-item-content {
+  display: flex;
+}
+>>> .common-form-list .iconfont {
+  margin-left: 18px;
+  color: #259FF8;
+  cursor: pointer;
+}
+.form-item-bot-left {
+  color: #0180E1;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.form-item-bot-right {
+  color: #0180E1;
+}
+.form-item-save {
+  width: 100%;
+  display: flex;
+  height: 32px;
+}
+.form-item-init {
+  border: 1px solid #133263;
+  border-radius: 4px;
+  width: 100%;
+  padding-left: 7PX;
+}
+.search-list {
+  display: flex;
+}
+.search-left {
+  display: flex;
+  align-items: center;
+   .ivu-select {
+     width: 150px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 165px;
+     height: 32px;
+   }
+   >>> .ivu-date-picker-editor .ivu-input {
+     width: 330px;
+   }
+   >>> .ivu-input-prefix, >>> .ivu-input-suffix {
+     height: 32px;
+     line-height: 32px;
+   }
+   >>> .ivu-input-icon {
+     height: 32px;
+     line-height: 32px;
+   }
+   >>> .date-picker-main .ivu-date-picker-header {
+    border-bottom: 0.0052083333rem solid #204384;
+ }
+}
+.btn-container {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 10px;
+}
+.common-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+.common-form-modal {
+  display: flex;
+  flex-direction: column;
+}
+.manage-main-center {
+  width: 100%;
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 51px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 51px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 51px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 550px);
+ }
+ >>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .app-table .ivu-table-tip {
+  height: calc(100vh - 550px);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+.ivu-btn.disabled, .ivu-btn.disabled.active, .ivu-btn.disabled:active, .ivu-btn.disabled:focus, .ivu-btn.disabled:hover, .ivu-btn[disabled], .ivu-btn[disabled].active, .ivu-btn[disabled]:active, .ivu-btn[disabled]:focus, .ivu-btn[disabled]:hover, fieldset[disabled] .ivu-btn, fieldset[disabled] .ivu-btn.active, fieldset[disabled] .ivu-btn:active, fieldset[disabled] .ivu-btn:focus, fieldset[disabled] .ivu-btn:hover {
+  color: #e7e7e7;
+  background-color: #a3a3a3;
+  border-color: #a3a3a3;
+}
+</style>

src/views/homecomponents/SystemSettings/ResourceManagement.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    角色
+  </div>
+</template>
+<script>
+export default {
+  name: "ResourceManagement",
+  components:{
+  },
+  data() {
+    return {
+    };
+  },
+  mounted() {
+  },
+  methods: {
+   
+  }
+};
+</script>
+<style scoped lang="stylus">
+
+</style>

src/views/homecomponents/SystemSettings/RolePermissions.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    角色
+  </div>
+</template>
+<script>
+export default {
+  name: "RolePermissions",
+  components:{
+  },
+  data() {
+    return {
+    };
+  },
+  mounted() {
+  },
+  methods: {
+   
+  }
+};
+</script>
+<style scoped lang="stylus">
+
+</style>

src/views/homecomponents/SystemSettings/UserManagement.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="content-main">
+    <div class="content-body-wrap">
+     <div class="content-body">
+        <!-- <Tabs :value="currentTabs" @on-click="tabsClick" class="common-tabs">
+          <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
+        </Tabs> -->
+         <Row :gutter="8" style="width:100%;height: 100%">
+          <i-col span="4" style="height:100%">
+            <div class="station-tree">
+              <div class="station-tree-body">
+                <div class="station-tree-top">
+                  <Input suffix="ios-search" placeholder="输入关键字查询" clearable search v-model="currentStation" class="common-search"  @on-search="iconChange" @on-clear="clearChange"/>
+                </div>
+                <div class="station-tree-center">
+                  <div class="station-tree-left common-scroll" v-show="showTree">
+                    <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="true" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
+                  </div>
+                  <div class="station-tree-left-notree" v-show="!showTree">
+                    站点输入错误！
+                  </div>
+                </div>
+              </div>
+            </div>
+          </i-col>
+          <i-col span="20" style="height:100%">
+            <div class="right-main">
+              <user-management-index></user-management-index>
+            </div>
+          </i-col>
+        </Row>
+     </div>
+    </div>
+  </div>
+</template>
+<script>
+import UserManagementIndex from './UserManagementIndex.vue'
+export default {
+  name: "UserManagement",
+  components:{
+    UserManagementIndex
+  },
+  data() {
+    return {
+      currentStation: '',
+      currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
+      showTree: true,// 是否显示树形组件
+		  stationData: [],
+    };
+  },
+  mounted() {
+    // this.getCurrentTab (sessionStorage.getItem('currentTabs'))
+    this.getMetroLevel()
+  },
+   // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
+  },
+  methods: {
+     // 获取树形数据
+    getMetroLevel (text,currentOrgId,editText) {
+      this.$get('metroapi/org/sysOrgTree').then(res => {
+				if (res.httpCode == 1) {
+          this.stationData = res.data
+          if (text == 'update') {
+            this.stationData = this.getChangeTree(this.stationData,currentOrgId,editText)
+          } else {
+            this.stationData = this.getTree(this.stationData)
+          }
+				}
+		  })
+    },
+    getTree(arr) {
+      return arr.map((v,index) => {
+        if (index==0) {
+          v.expand = true
+        } else {
+          v.expand = false
+        }
+        if (v.level== 1) {
+          v.disabled = true
+        }
+        if (index==0 && v.level== 2) {
+          this.levelNum = v.level
+          v.selected = true
+          v.disabled = true
+          this.currentStation = v.title
+          this.currentOrgId = v.nodeId
+          this.$refs.treeManage.getOrgData(v.nodeId)
+        }
+        if (v.children) v.children = this.getTree(v.children);
+        return v;
+      });
+    },
+    getChangeTree(arr,currentOrgId,editText) {
+      return arr.map((v,index) => {
+        if (v.level== 1) {
+          v.disabled = true
+        }
+        if (v.nodeId == currentOrgId) {
+          this.levelNum = v.level
+          v.selected = true
+          v.disabled = true
+          this.currentStation = v.title
+          this.currentOrgId = v.nodeId
+          this.$refs.treeManage.getOrgData(v.nodeId,editText)
+        }
+        if (v.children) v.children = this.getChangeTree(v.children,currentOrgId,editText);
+        return v;
+      });
+    },
+    iconChange: _.throttle(function() {
+      this.currentStaData = []
+      this.treeName = []
+      this.$nextTick(()=> {
+       this.getCurrentTab(this.currentTabs,this.currentStation)
+      })
+      if(this.currentStation != ''){
+        this.showTree = false
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+      } else {
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = true
+        this.stationData = this.getTree(this.stationData)
+        return 
+      }
+      this.getSelectedItem()
+		}, 500),
+    clearChange () {
+      this.getSelectedItem()
+      this.getCurrentTab(this.currentTabs,this.currentStation)
+    },
+    getSelectedItem  () {
+      this.stationData.forEach((item, index,itemArr) => {
+        item.expand = false;
+        item.disabled = false; 
+        item.selected = false;
+        if (item.title == this.currentStation) {
+            item.selected = true;
+            item.disabled = true; // disabled 是否禁止选中 
+            item.expand = true;
+            this.currentStaData.push(item)
+            this.showTree = true
+        }
+        if (this.currentStation == '' && index == 0) {
+          item.expand = true
+        }
+        if (item.children) {
+          item.children.forEach((val, i,valArr) => {
+          val.expand = false; //expand 是否展开直子节点 
+          val.disabled = false; // disabled 是否禁止选中
+          val.selected = false;
+          if (val.title == this.currentStation) {
+            val.selected = true;
+            val.disabled = true; // disabled 是否禁止选中 
+            val.expand = true;
+            item.expand = true;
+            this.currentStaData.push(val)
+            this.showTree = true
+          }
+          if (this.currentStation == '' && i==0) {
+            val.expand = true
+          }
+          if (val.children) {
+            val.children.forEach ((lastVal,lastIndex) => {
+              lastVal.selected = false; //expand 是否展开直子节点 
+              lastVal.disabled = false; 
+              lastVal.expand = false;
+              if (lastVal.title == this.currentStation) {
+                lastVal.selected = true;
+                lastVal.disabled = true; // disabled 是否禁止选中 
+                lastVal.expand = true;
+                val.expand = true
+                item.expand = true
+                this.currentStaData.push(lastVal)
+                this.showTree = true
+              } 
+            })
+          } 
+        });
+        }    
+      });
+    },
+    treeChange(val,arr,level) {
+      this.currentStation = val
+      this.getCurrentTab(this.currentTabs,this.currentStation,arr,level)
+		},
+    // tabsClick (name) {
+    //   this.stationData = this.getElseTree(this.stationData) // 切换tab页时，清除tree选中情况
+    //   this.currentStation = ''
+    //   sessionStorage.setItem("currentTabs",name)
+    //   this.getCurrentTab (name)
+    //   if (document.querySelector(".station-tree-left")) {
+    //     document.querySelector(".station-tree-left").scrollTo(0, 0) 
+    //   }
+    // },
+    // getCurrentTab (currentTabs,currentStation,arr,level) {
+    //   this.currentTabs = currentTabs || '告警信息-无法判定等级'
+    //   if (currentTabs == '告警信息-无法判定等级' || !currentTabs) {
+    //      this.$nextTick(()=> {
+    //       this.$refs.unableDeter.tableParams.pageNum = 1
+    //       this.$refs.unableDeter.getTableData(currentStation,arr,level)
+    //     })
+    //   } else if(currentTabs == '告警信息-待确认'){       
+    //     this.$nextTick(()=> {
+    //       this.$refs.toConfirmed.tableParams.pageNum = 1
+    //       this.$refs.toConfirmed.getTableData(currentStation,arr,level)
+    //     })
+    //   } else if(currentTabs == '告警信息-已确认'){
+    //     this.$nextTick(()=> {
+    //       this.$refs.confirmed.tableParams.pageNum = 1
+    //       this.$refs.confirmed.getTableData(currentStation,arr,level)
+    //     })
+    //   } else if(currentTabs == '告警信息-已清除'){
+    //     this.$nextTick(()=> {
+    //       this.$refs.cleared.tableParams.pageNum = 1
+    //       this.$refs.cleared.getTableData(currentStation,arr,level)
+    //     })
+    //   } else if(currentTabs == '告警信息-已过滤'){
+    //     this.$nextTick(()=> {
+    //       this.$refs.filtered.tableParams.pageNum = 1
+    //       this.$refs.filtered.getTableData(currentStation,arr,level)
+    //     })
+    //   } else {
+    //      this.$nextTick(()=> {
+    //        this.$refs.comprehensive.tableParams.pageNum = 1
+    //       this.$refs.comprehensive.getTableData(currentStation,arr,level)
+    //     })
+    //   }
+    // },
+    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
+    getElseTree(arr) {
+      return arr.map((v,index) => {
+        if (v.title==this.currentStation) {
+          v.selected = false
+          v.disabled = false
+        }
+        if (index == 0) {
+          v.expand = true
+        } else {
+          v.expand = false
+        }
+        if (v.children) v.children = this.getElseTree(v.children);
+        return v;
+      });
+    },
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main {
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+}
+.content-body-wrap {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+}
+.content-body {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+  // padding: 10px;
+}
+.common-search {
+  width: 100%;
+}
+>>> .common-search .ivu-input {
+  background-color: #06214D;
+  border: 1px solid #2355A6;
+  border-radius: 15px;
+  color: #fff;
+  height: 32px;
+}
+>>> .common-search .ivu-input:focus {
+    border-color: #0185ea;
+}
+.station-tree {
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-body {
+  border: 1px solid #204384;
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-center {
+  height: calc(100% - 32px);
+  padding-top: 10px;
+}
+.station-tree-left {
+  height: 100%;
+  overflow: auto;
+}
+.station-tree-left-notree {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  fon-size: 14px;
+}
+.right-main {
+  height: 100%;
+  padding: 10px 0;
+}
+</style>

src/views/homecomponents/SystemSettings/UserManagementIndex.vue

@@ -0,0 +1,876 @@
+<template>
+  <div class="content-main-manage">
+    <div class="search-list">
+      <div class="search-left">
+        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
+          <FormItem label="" prop="lineId">
+            <Select v-model="tableParams.lineId" placeholder="线路" @on-select="changeLine" label-in-value>
+              <Option v-for="item in lineTypeData" :value="item.id" :key="item.id">{{ item.lineName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="roleId">
+            <Select v-model="tableParams.roleId" placeholder="角色名称">
+              <Option v-for="item in stationTypeData" :value="item.id" :key="item.id">{{ item.stationName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="isEnabled">
+            <Select v-model="tableParams.isEnabled" placeholder="启用状态">
+              <Option v-for="item in enabledData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="userCode">
+            <Input placeholder="输入用户号" clearable search v-model="tableParams.userCode" />
+          </FormItem>
+          <FormItem label="" prop="userName">
+            <Input placeholder="输入姓名关键词" clearable search v-model="tableParams.userName" />
+          </FormItem>
+          <!-- <FormItem label="" prop="equipmentType">
+             <Select v-model="tableParams.equipmentType" placeholder="用户类型">
+              <Option v-for="item in equipTypeData" :value="(item.id)" :key="item.id">{{ item.name }}</Option>
+            </Select>
+          </FormItem> -->
+          <FormItem label="">
+            <DatePicker type="daterange" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" placeholder="启用日期范围" @on-change="changePicker"></DatePicker>
+          </FormItem>
+          <FormItem label="" >
+            <Button type="primary" class="common-btn-search" @click="searchClick">
+              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
+            </Button> 
+            <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
+              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
+            </Button>   
+          </FormItem>
+        </Form>
+      </div>
+    </div>
+    <div class="btn-container">
+      <Button icon="ios-add" class="common-add-btn" @click="addClick">新增用户</Button>
+    </div>
+    <div class="manage-main-center">
+      <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
+        <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+        <!-- <template slot-scope="{ row }" slot="lineName">
+          <span>{{!row.lineName ? '/' : row.lineName}}</span>
+        </template>
+        <template slot-scope="{ row }" slot="stationName">
+          <span>{{!row.stationName ? '/' : row.stationName}}</span>
+        </template> -->
+         <template slot-scope="{ row }" slot="action">
+           <Tooltip content="重置密码" placement="top">
+              <i class="iconfont icon-mima" style="cursor:pointer;color:#858aea;fontSize:16px;marginRight:6px;vertical-align: middle;" @click="detailClick(row)"></i>
+           </Tooltip>
+           <Tooltip content="详情" placement="top">
+              <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px;vertical-align: middle;" @click="detailClick(row)"></i>
+           </Tooltip>
+           <Tooltip content="编辑" placement="top">
+              <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px;vertical-align: middle;" @click="editClick(row)"></i>
+           </Tooltip>
+           <Tooltip content="删除" placement="top">
+              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px;vertical-align: middle;" @click="delClick(row)"></i>
+           </Tooltip>
+        </template>
+      </Table>
+    </div>
+    <div class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
+    <Modal
+      v-model="showModal"
+      :title="title"
+      width="36"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      @on-visible-change="modalChange"
+      :mask-closable="false"
+      class-name="common-modal">
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120" inline>
+				<FormItem label="归属线路：" prop="lineId" style="width:48%">
+          <Select v-model="formOption.lineId" placeholder="线路" @on-change="selectModalLine" label-in-value>
+              <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{ item.lineName }}</Option>
+          </Select>
+				</FormItem>
+				<FormItem label="归属站点：" prop="stationId" style="width:48%">
+           <Select v-model="formOption.stationId" placeholder="站点" @on-change="selectModalStation" label-in-value>
+            <Option v-for="item in stationTypeData" :value="String(item.id)" :key="item.id">{{ item.stationName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="归属应用：" prop="appId" style="width:48%">
+           <Select v-model="formOption.appId" placeholder="归属应用" @on-change="selectModalApp">
+             <Option v-for="item in equipAppModalData" :value="item.id" :key="item.id">{{ item.appName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="用户类型：" prop="equipmentType" style="width:48%">
+          <Select v-model="formOption.equipmentType" placeholder="用户类型">
+             <Option v-for="item in equipTypeModalData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="用户ID：" style="width:100%">
+          <span v-show="title=='新增用户'">系统自动生成，唯一不重复</span>
+          <span v-show="title=='编辑用户'">{{formOption.equipmentId}}</span>
+        </FormItem>
+        <FormItem label="用户名称：" prop="equipmentName" style="width:100%">
+          <Input v-model.trim="formOption.equipmentName" type="textarea" :rows="3" maxlength="100" show-word-limit />  
+        </FormItem>
+        <FormItem label="用户状态：" prop="equipmentStatus" style="width:48%">
+          <Select v-model="formOption.equipmentStatus" placeholder="用户状态">
+            <Option v-for="item in equipStateModalData" :value="item.id" :key="item.id">{{ item.value }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="启用日期：" prop="useDate" style="width:48%">
+          <DatePicker type="date" :value="formOption.useDate" :editable="false" class="common-date-picker" placement="bottom-start" placeholder="启用日期" style="width: 100%" @on-change="changeMoldaPicker"></DatePicker>
+        </FormItem>
+         <FormItem label="用户型号：" prop="equipmentVersion" style="width:100%">
+          <Input v-model="formOption.equipmentVersion" maxlength="20" show-word-limit />  
+        </FormItem>
+         <FormItem label="供应商：" prop="supplier" style="width:100%">
+          <Input v-model="formOption.supplier" maxlength="20" show-word-limit />  
+        </FormItem>
+         <FormItem label="说明：" prop="remark" style="width:100%">
+          <Input v-model="formOption.remark" type="textarea" :rows="6" maxlength="200" show-word-limit /> 
+        </FormItem>
+			</Form>
+      <div slot="footer">
+          <Button @click="modalCancel">取消</Button>
+          <Button type="primary" @click="modalOk('formOption')">确定</Button>
+        </div>
+    </Modal>
+    <Modal
+      v-model="modalStatus"
+      :title="commonTitle"
+      width="30"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      class-name="common-modal">
+      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon"></Icon>
+      <span class="modal-text">{{modalTitle}}</span>
+      <div slot="footer">
+          <Button @click="commonCancel">取消</Button>
+          <Button type="primary" @click="commonOk">确定</Button>
+        </div>
+    </Modal>
+     <Modal
+      v-model="detailStatus"
+      title="用户详情"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      :mask-closable="false"
+      class-name="common-modal">
+      <div v-for="(item,index) in detailLabel" :key="index">
+        <div class="common-modal-top">
+        <span class="common-modal-top-text">{{item.name}}</span>
+        </div>
+        <div class="common-modal-content">
+          <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '说明'||  val.name == '最后通讯时间' && item.value.length%2!=0,'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}">
+            <div class="modal-content-item-name">
+            {{val.name}}
+            </div>
+            <div class="modal-content-item-value"> 
+              <Tooltip placement="top-start" transfer max-width="350" v-if="val.name == '归属线路' || val.name == '归属站点' || val.value || val.value===0">
+                <span v-if="val.name == '归属线路' || val.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+                <span v-else>{{val.value}}</span>
+                <div slot="content">
+                  <span v-if="val.name == '归属线路' || val.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+                  <span v-else>{{val.value}}</span>
+                </div>
+              </Tooltip>
+              <span v-else>{{val.value}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',equipmentVersion: '',supplier: '',remark: ''}
+export default {
+  name: "UserManagementIndex",
+  components:{
+  },
+  data() {
+    return {
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appParams: {
+        applicationId: '',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      loading: true,
+      dateRange: [],
+      tableParams: {
+        lineId: '',
+        roleId: '',
+        isEnabled: '',
+        userCode:'',
+        userName: '',
+        beginUpdateTime: '',
+        endUpdateTime: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      tablePage: 0,
+      rowObj: {},
+      enabledData: [
+         {
+          value: '-1',
+          label: '启用状态'
+        },
+        {
+          value: '1',
+          label: '启用'
+        },
+        {
+          value: '0',
+          label: '关闭'
+        },
+      ],
+      stationTypeData: [],
+      equipStateData: [],
+      equipStateModalData: [],
+      equipTypeData: [],
+      equipTypeModalData: [],
+      equipAppModalData: [],
+      columns: [
+         {
+            title: '序号',
+            type: 'index',
+            align: 'center'
+          },
+        //  {
+        //     type: 'selection',
+        //     width: 60,
+        //     align: 'center'
+        //   },
+          {
+            title: '用户ID',
+            key: 'userId',
+            align: 'center'
+          },
+          {
+            title: '用户名',
+            key: 'userName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '组织机构',
+            key: 'orgName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '角色名称',
+            key: 'roleName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '更新时间',
+            align: 'center',
+            key: 'updateTime',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '启用状态',
+            key: 'isEnabled',
+            align: 'center',
+            width: 120,
+            render: (h, params) => {
+              return h('div', [                             
+                h('i-switch', {
+                  props: { value: params.row.isEnabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
+                  },
+                  nativeOn:{
+                      "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
+                        this.rowObj =  params.row
+                        this.isClickOrg = false
+                        if (params.row.isEnabled == 1) {
+                          this.commonTitle = '确认关闭'
+                          this.activeColor = '#E92E2E'
+                          this.activeClass = 'icon-guanbi'
+                          this.modalTitle = '关闭后线路下所有站点将同时关闭，线路及站点统计数据不可见。'
+                          this.modalStatus = true         
+                        } else {
+                          this.commonTitle = '确认启用'
+                          this.activeColor = '#57C44F'
+                          this.activeClass = 'icon-qiyong'
+                          this.modalTitle = '启用后此线路统计数据将在各管理模块及前端显示页面生效。'
+                          this.modalStatus = true
+                        }
+                      },
+                    }
+                }),
+              ])
+            }
+        },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 160,
+        }
+      ],
+      showModal: false,
+      detailStatus: false, 
+      modalStatus: false,
+      title: '新增用户',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',useDate:'',equipmentVersion: '',supplier: '',remark: ''},
+      ruleValidate: {
+        lineId: [{
+          required: true,
+          message: '请选择所属线路',
+          trigger: 'change'
+        }],
+        stationId: [{
+          required: true,
+          message: '请选择所属站点',
+          trigger: 'change'
+        }],
+        appId: [{
+          required: true,
+          type: 'number',
+          message: '请选择归属应用',
+          trigger: 'change'
+        }],
+        equipmentName: [{
+          required: true,
+          message: '请输入用户名称',
+          trigger: 'change'
+        }],
+        appName: [{
+          required: true,
+          message: '请输入用户名称',
+          trigger: 'blur'
+        }],
+        equipmentType: [{
+          required: true,
+          type: 'number',
+          message: '请选择用户类型',
+          trigger: 'change'
+        }],
+        equipmentStatus: [{
+          required: true,
+          type: 'number',
+          message: '请选择用户状态',
+          trigger: 'change'
+        }]
+      }, 
+      detailLabel: [],
+    };
+  },
+  mounted() {
+    this.getType()
+    this.getAppApplicate()
+    this.getTableData()
+  },
+  methods: {
+    go (){
+      // this.$router.push({path:'//ApplicationManage'})
+      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
+      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    },
+    changePicker (date) {
+      this.tableParams.beginUpdateTime = date[0]
+      this.tableParams.endUpdateTime = date[1]
+    },
+    rowClassName(row, index) {
+      if (index % 2 == 0) {
+        return "ivu-table-stripe-even";
+      } else {
+        return "ivu-table-stripe-odd";
+      }
+    },
+    // 分页
+    changePage (val) {
+      this.tableParams.pageNum = val
+      this.getTableData()
+    },
+    //跳转
+    sizeChange (val) {
+      this.tableParams.pageSize = val
+      this.getTableData()
+    },
+    getType  () {
+      //获取所属线路
+      this.$get('metroapi/lineStation/queryLine', {lineName:''}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.lineTypeData = res.data
+          this.lineTypeData.unshift({ id: '-1', lineName: '线路' })
+          this.getStationData ('-1')
+        } else {
+          this.lineTypeData = []
+        }
+      })
+      // 获取用户状态
+      this.$get('metroapi/dic/queryDictionary', {name:'用户状态'}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipStateModalData = JSON.parse(JSON.stringify(res.data))
+          this.equipStateData = res.data
+          this.equipStateData.unshift({ id: '-1', value: '用户状态' })
+        } else {
+          this.equipStateData = []
+          this.equipStateModalData = []
+        }
+      })
+      // 获取归属应用
+      // this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+      //   if (res.httpCode == 1 ){
+      //     this.equipAppModalData = res.data.data
+      //   } else {
+      //     this.equipAppModalData = []
+      //   }
+      // })
+    },
+    // 获取归属应用
+    getAppApplicate () {
+     this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipAppModalData = res.data.data
+        } else {
+          this.equipAppModalData = []
+        }
+      })
+    },
+    changeLine (val) {
+      // 获取站点类型
+      this.tableParams.stationId = ''
+      this.tableParams.lineId = val.value
+      if (this.tableParams.lineId) {
+        this.getStationData(val.value)
+      }
+    },
+    // 获取所属站点
+    getStationData (lineId) {
+      if(lineId == '-1') {
+        this.stationTypeData = [{ id: '-1', stationName: '站点' }]
+      } else {
+        this.$get('metroapi/lineStation/queryStationByLineId', {lineId:lineId}).then(res=>{
+          if (res.httpCode == 1 ){
+            this.stationTypeData = res.data
+            this.stationTypeData.unshift({ id: '-1', stationName: '站点' })
+          }
+        })
+      }
+    },
+    // 获取表格数据
+    getTableData (keywords,arr,level) {
+      //  if (level) {
+      //   this.tableParams.keywords = ''
+      //   if (level == 2) {
+      //     this.tableParams.applicationId = arr[arr.length-1]
+      //     this.tableParams.equipmentType = ''
+      //   } else if (level == 3) {
+      //     this.tableParams.applicationId = arr[arr.length-2]
+      //     this.tableParams.equipmentType = arr[arr.length-1]
+      //   } else {
+      //     this.tableParams.applicationId = ''
+      //     this.tableParams.equipmentType = ''
+      //   }
+      // } else {
+      //   this.tableParams.applicationId = ''
+      //   this.tableParams.equipmentType = ''
+      //   if (keywords == '合肥轨道交通' || keywords == '' || !keywords) {
+      //     this.tableParams.keywords = ''
+      //   } else {
+      //     this.tableParams.keywords = keywords
+      //   }
+      // }
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      // params.lineId = params.lineId == '-1' || !params.lineId ? '':params.lineId
+      // params.stationId = params.stationId == '-1' || !params.stationId ?'':params.stationId
+      // params.equipmentStatus = params.equipmentStatus == '-1' || !params.equipmentStatus ?'':params.equipmentStatus
+      this.loading = true
+      this.$get('metroapi/user/querySysUserPage', params).then(res=>{
+        this.loading = false
+          if (res.httpCode == 1 ){
+            this.tableData = res.data.data
+            this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
+            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    selectModalLine (val) {
+      this.formOption.stationId = ''
+      if (val) {
+        this.getStationData(val.value)
+      }
+    },
+    selectModalStation (val) {
+      if (val) {
+       this.formOption.stationId =val.value
+      }
+    },
+    selectModalApp (val) {
+      this.appParams.applicationId = val
+      this.formOption.equipmentType = ''
+      if (val) {
+        this.getAddEquipType(this.appParams)
+      }
+    },
+    // 获取新增用户类型 
+    getAddEquipType (params) {
+      this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeModalData = res.data.data
+        } else {
+          this.equipTypeModalData = []
+        }
+      })
+    },
+    searchClick () {
+      this.tableParams.pageNum = 1
+      this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
+    },
+    resetClick (name) {
+     this.dateRange = []
+     this.tableParams.beginUpdateTime = ''
+     this.tableParams.endUpdateTime = ''
+     this.stationTypeData = [{ id: '-1', stationName: '站点' }]
+     this.$refs[name].resetFields()
+     this.tableParams.pageNum = 1
+     this.getTableData()
+    },   
+    changeMoldaPicker (val) {
+     this.formOption.useDate = val
+    },
+    addClick () {
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+      this.title = '新增用户'
+      this.showModal = true
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailStatus = true
+      this.$get('metroapi/equipment/equipmentDetail', {equipmentId:row.id}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.detailLabel = res.data
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    editClick (row) {
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row));
+      this.formOption.lineId = this.formOption.lineId ? String(this.formOption.lineId) : '-1'
+      this.formOption.stationId = this.formOption.stationId ? String(this.formOption.stationId) : '-1'
+      this.getStationData(this.formOption.lineId)
+      this.appParams.applicationId = this.formOption.appId
+      this.getAddEquipType(this.appParams)
+      this.title = '编辑用户'
+      this.showModal = true
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认删除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '删除不影响已产生的操作和记录。'
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+      this.stationTypeData = [{ id: '-1', stationName: '站点' }]
+      this.equipTypeModalData = []
+     }
+    },
+    modalOk (formName) {
+      let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
+      params.lineId = params.lineId == '-1' ? '':params.lineId
+      params.stationId = params.stationId == '-1' ? '':params.stationId
+      if (this.title == '新增用户') {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/equipment/addEquipment', params).then(res=>{
+              if ( res.httpCode == 1 ){
+                this.showModal = false
+                this.$Message.info(res.msg)
+                this.getTableData()
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      } else {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/equipment/editEquipment', params).then(res=>{
+              if (res.httpCode == 1 ){
+                this.showModal = false
+                this.$Message.info(res.msg)
+                this.getTableData()
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      }
+    },
+    modalCancel () {
+      this.showModal = false
+    },
+    commonOk () {
+      let params = {
+        id: this.rowObj.id
+      }
+      this.delData(params)
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+    // 删除接口
+    delData (params) {
+      this.$get('metroapi/equipment/delEquipment',params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.modalStatus = false
+          this.$Message.info(res.msg)
+          this.getTableData()
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    }
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main-manage {
+  position: relative;
+  height: 100%;
+}
+.search-list {
+  display: flex;
+  padding: 10px 0 0;
+}
+.search-left {
+  display: flex;
+  align-items: center;
+   .ivu-select {
+     width: 150px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 165px;
+     height: 32px;
+   }
+   >>> .ivu-date-picker-editor .ivu-input {
+     width: 210px;
+   }
+   >>> .ivu-input-prefix, >>> .ivu-input-suffix {
+     height: 32px;
+     line-height: 32px;
+   }
+   >>> .ivu-input-icon {
+     height: 32px;
+     line-height: 32px;
+   }
+   >>> .date-picker-main .ivu-date-picker-header {
+    border-bottom: 0.0052083333rem solid #204384;
+ }
+}
+.btn-container {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 10px;
+}
+.common-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+>>> .common-form-list .ivu-form-item {
+  margin-bottom: 10px;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 150px);
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 54px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 55px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 54px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 375px);
+ }
+ >>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .app-table .ivu-table-tip {
+  height: calc(100vh - 375px);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+>>> .modal-tabs-item {
+  margin-top: 10px;
+}
+>>> .common-modal-top-text {
+  font-size: 14px;
+  font-weight: bold;
+  color: #29A0FF;
+  line-height: 42px;
+  border-left: 3px solid #1590F1;
+  padding-left: 12px;
+}
+>>> .common-modal-content {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 15px;
+  border-right: 1px solid #21437B;
+}
+>>> .modal-content-item {
+  width: 50%;
+  display: flex;
+}
+>>> .item-especial {
+  width: 100%;
+}
+>>> .modal-content-item-name {
+  width: 50%;
+  height: 45px;
+  line-height: 45px;
+  background: #13305F;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
+  font-size: 14px;
+  color: #F5F5F5;
+  padding-left: 20px;
+}
+>>> .modal-content-item-value {
+  width: 50%;
+  height: 45px;
+  line-height: 45px;
+  background: #06214D;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
+  font-size: 14px;
+  color: #F5F5F5;
+  padding-left: 20px;
+}
+>>> .item-especial .modal-content-item-name{
+  width: 25%;
+  height: 45px;
+  line-height: 45px;
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial .modal-content-item-value{
+  width: 75%;
+  height: 45px;
+  line-height: 45px;
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-bot .modal-content-item-name {
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-bot .modal-content-item-value {
+  border-bottom: 1px solid #21437B;
+}
+/deep/ .ivu-input::-webkit-input-placeholder{
+  color: #718EBD;
+}
+/deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
+  color: #718EBD;
+}
+/deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+  color: #718EBD;
+}
+/deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
+  color: #718EBD;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+</style>

vue.config.js

@@ -7,7 +7,7 @@ module.exports = {
       open: false,//配置自动启动浏览器 
       proxy: { // 设置代理
       '/metroapi': {
-        target: 'http://192.168.20.58:8088',// http://192.168.20.58:8086 http://192.168.20.188:8088
+        target: 'http://192.168.20.188:8088',// http://192.168.20.58:8086 http://192.168.20.188:8088
         changeOrigin: true, //允许跨域
         pathRewrite: {
             '^/metroapi': ''