线站管理功能

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2962009 */
-  src: url('iconfont.woff2?t=1638406575427') format('woff2'),
-       url('iconfont.woff?t=1638406575427') format('woff'),
-       url('iconfont.ttf?t=1638406575427') format('truetype');
+  src: url('iconfont.woff2?t=1638758253530') format('woff2'),
+       url('iconfont.woff?t=1638758253530') format('woff'),
+       url('iconfont.ttf?t=1638758253530') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-ditie:before {
+  content: "\e60e";
+}
+
+.icon-guanlian:before {
+  content: "\e61f";
+}
+
+.icon-shebei:before {
+  content: "\e602";
+}
+
+.icon-shebei1:before {
+  content: "\e707";
+}
+
+.icon-sutpczhihuizhantai:before {
+  content: "\e657";
+}
+
+.icon-ditiezhaofang:before {
+  content: "\e608";
+}
+
+.icon-hefeiditie:before {
+  content: "\e60a";
+}
+
 .icon-qiyong:before {
   content: "\e7e5";
 }
@@ -81,10 +109,6 @@
   content: "\e604";
 }
 
-.icon-tielu:before {
-  content: "\e600";
-}
-
 .icon-fl-renshi:before {
   content: "\e62c";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,55 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "18667131",
+      "name": "地铁",
+      "font_class": "ditie",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "12694622",
+      "name": "关联",
+      "font_class": "guanlian",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "11369578",
+      "name": "设备",
+      "font_class": "shebei",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "14112071",
+      "name": "设备",
+      "font_class": "shebei1",
+      "unicode": "e707",
+      "unicode_decimal": 59143
+    },
+    {
+      "icon_id": "11665071",
+      "name": "sutpc智慧站台",
+      "font_class": "sutpczhihuizhantai",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "5529892",
+      "name": "地铁找房",
+      "font_class": "ditiezhaofang",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "5910518",
+      "name": "合肥地铁",
+      "font_class": "hefeiditie",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
       "icon_id": "752475",
       "name": "启用",
       "font_class": "qiyong",
@@ -125,13 +174,6 @@
       "unicode_decimal": 58884
     },
     {
-      "icon_id": "1426",
-      "name": "铁路",
-      "font_class": "tielu",
-      "unicode": "e600",
-      "unicode_decimal": 58880
-    },
-    {
       "icon_id": "2525720",
       "name": "人事",
       "font_class": "fl-renshi",

src/assets/styles/common.css

@@ -69,6 +69,7 @@ html,body{
 }
 .common-form .ivu-form-item {
   color: #F5F5F5;
+  margin-bottom: 20px;
 }
 .common-form .ivu-input {
   background: #06214D;
@@ -106,6 +107,11 @@ html,body{
 .common-form .ivu-input-number-focused {
   border: 1px solid #0185EA;
 }
+/*输入框样式*/
+.ivu-input-wrapper .ivu-input-icon {
+  height: 32px;
+  line-height: 32px;
+}
 /* 下拉框样式 */
 .ivu-select-selection {
   background: #06214D;
@@ -141,7 +147,8 @@ html,body{
   background: #0185ea;
   color: #f2f2f2;
 }
-.ivu-select-single .ivu-select-selection .ivu-select-placeholder {
+/* 修改下拉框的placeholder文字颜色*/
+.ivu-select-single .ivu-select-selection .ivu-select-placeholder { 
   color: #718EBD;
 }
 /* 滚动条 webkit内核 start  .ivu-cascader-menu 级联下拉列表里的滚动条 .ivu-select-dropdown 单个下拉列表里的滚动条 .common-modal-tabs .ivu-tabs-tabpane详情对话框里的滚动条*/
@@ -168,6 +175,39 @@ html,body{
   -moz-border-radius: 2em;
   border-radius: 2em;
 }
+/* ivu-table-body大多数表格里的滚动条 special-table个别表格里的滚动条*/
+.ivu-table-body::-webkit-scrollbar,
+.special-table .ivu-table-body::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+  opacity: 0.6;
+}
+
+/* 表格的定义滚动条的滑块部分 */
+.ivu-table-body::-webkit-scrollbar-track,
+.special-table .ivu-table-body::-webkit-scrollbar-track {
+  background-color: #1f2f69;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+
+.ivu-table-body::-webkit-scrollbar-thumb,
+.special-table .ivu-table-body::-webkit-scrollbar-thumb {
+  opacity: 1;
+  background-color: #435579;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+
+.ivu-table-body,
+.special-table .ivu-table-body {
+  scrollbar-arrow-color: #435579;
+  scrollbar-track-color: #435579;
+  scrollbar-highlight-color: #435579;
+  scrollbar-base-color: #435579;
+}
 /* tab页的通用样式 */
 .common-tabs {
   color: #fff;
@@ -229,8 +269,12 @@ html,body{
   background-color: #0185ea;
  }
  /* 表格的样式 */
+ .common-table {
+  overflow: inherit;
+ }
  .common-table .ivu-table{
   background-color: transparent;
+  position: relative;
  }
  .common-table .ivu-table:before {
   height: 0;
@@ -260,21 +304,25 @@ html,body{
   background-color: #072453;
  }
  /*表格暂无数据*/
- .common-table .ivu-table-tip {
-  display: flex;
-  align-items: center;
-  background: url('../../assets/images/noData.png') no-repeat center;
+ /* .ivu-table-tip {
   min-height: 300px;
-}
+} */
 .ivu-table-tip table {
   display: none;
 }
- .ivu-spin-fix {
+.ivu-spin-fix {
   background-color: #06214d;
+  /* background-color: yellow; */
+  /* height: auto; */
+  /* min-height: 580px; */
  }
  .ivu-spin-fix .ivu-spin-main {
    width: 100%;
- }
+   height: 100%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+ } 
  /* 分页的样式 */
 .common-page .ivu-page-next, .common-page .ivu-page-prev {
   background-color: #154086;
@@ -310,6 +358,7 @@ html,body{
 .common-page .ivu-page-options-elevator {
   color: #fff;
   height: 32px;
+  line-height: 32px;
 }
 .common-page .ivu-page-options-elevator input {
   background-color: #154086;
@@ -335,3 +384,13 @@ html,body{
 .ivu-tooltip-popper[x-placement^=top] .ivu-tooltip-arrow {
   border-top-color: #335493;
 }
+/* 日期选择范围的样式 */
+.common-date-picker .ivu-date-picker-header {
+  border-bottom: 1px solid #204384;
+}
+.common-date-picker .ivu-date-picker-cells-cell:hover em {
+  background:#2e4e89;
+}
+.common-date-picker .ivu-date-picker-cells-cell-range:before {
+  background:#2e4e89;
+}

src/components/common/LoadingAnimation.vue

@@ -81,7 +81,7 @@ export default {
   margin-top: 30px;
 }
 .loading-text {
-  font-size: 16px;
+  font-size: 16PX;
   color: #636b7f;
   line-height: 16px;
   text-align: center;

src/components/common/RollingDetailTable.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="rolling-loading">
+    <Table ref="table" no-data-text="" :row-class-name="rowClassName" :loading="loading" class="table" :columns="columns1" :data="detailTabData" @on-sort-change="changeSort">
+       <template slot="loading">
+        <Loading-animation></Loading-animation>
+      </template>
+    </Table>
+    <!-- <Table ref="table" v-show="!loading" class="table" :columns="columns1" :data="detailTabData" @on-sort-change="changeSort" :row-class-name="rowClassName"></Table> -->
+  </div>
+</template>
+<script>
+import _ from 'lodash'
+export default {
+  props: {
+    columns1: { // 表格表头
+      type: Array,
+      default: () => []
+    },
+    apiUrl: { // 请求地址 
+      type: String,
+      default: ""
+    },
+    requestMode: { // 请求方法 默认get请求
+      type: String,
+      default: "get"
+    },
+    detailDataCount: { //表格的总条数 为了防止后端不返回总数目
+      type:[String, Number],
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      detailTabData: [],
+      detailParams: {},
+      curPage: 1,
+      pageTotal: 0,
+      detailTotal: 0,
+      showLoading: false,
+      currentUrl:''
+    };
+  },
+  methods: {
+    rowClassName(row, index) {
+      if (index % 2 == 0) {
+        return "ivu-table-stripe-even";
+      } else {
+        return "ivu-table-stripe-odd";
+      }
+    },
+    // 排序
+    changeSort (params) {
+      document.querySelector(".common-modal-detail .ivu-table-body").scrollTo(0, 0);
+      this.detailParams.pageNum = 1
+       if (params.order == 'normal') { // iview封装的排序有三种状态 normal desc asc 现在处理成两种状态降序 正序
+         this.detailParams.order = !this.detailParams.order
+         if (this.detailParams.order) {
+          this.columns1[params.column.index].sortType = 'desc' //降序
+         } else {
+          this.columns1[params.column.index].sortType = 'asc' // 正序
+         }
+        this.getChartsDetail(this.detailParams)
+        return;
+      }
+      this.detailParams.order = params.order == 'asc' ? false : true
+      this.columns1[params.column.index].sortType = params.order
+      this.getChartsDetail(this.detailParams)
+    },
+    // handleFilterChange (params) {
+    //   document.querySelector(".common-modal-detail .ivu-table-body").scrollTo(0, 0);
+    //   this.detailParams.page = 1
+    //   console.log(params)
+    //   this.getChartsDetail(this.detailParams)
+    // },
+    // 获取数据详情
+    getChartsDetail(params,url) {
+      this.currentUrl = url
+      this.detailParams = {}
+      this.detailParams = params;
+      this.curPage = 1;
+      this.loading = true
+      this.getDetailData().then(res => {
+        this.loading = false
+        if (res.httpCode == 1) {
+          // res.data.data.count 真分页 res.data.data.dateCount 假分页 this.detailDataCount 真分页后端不返回数据总数
+          this.detailTotal = Number(res.data.count) || this.detailDataCount || Number(res.data.dateCount);
+          // res.data.data.data 有分页 // res.data.data 无分页
+          this.detailTabData = res.data.data;
+          if (res.data.offset) {
+            this.detailParams.index = res.data.offset
+          }
+          this.pageDataHandle();
+        } else {
+          this.detailTabData = [];
+          this.detailTotal = 0;
+        }
+      });
+    },
+    async getDetailData() {
+      let params = this.detailParams;
+      if (params.pageNum) {
+        params.pageNum= this.curPage;
+        params.pageSize = this.detailParams.pageSize;
+      }
+      let url = '' // 防止一个页面引用多个相同的子组件，apiUrl很相似无法更新的问题
+      if (this.currentUrl) {
+        url = this.currentUrl
+      } else {
+        url = this.apiUrl
+      }
+      if (this.requestMode == "get") {
+        return await this.$get(url,
+          params
+        );
+      } else if (this.requestMode == "post") {
+        return await this.$post(url, params);
+      }
+    },
+    scrollPannel: _.throttle(function(event) {
+      let nScrollTop = event.target.scrollTop; // 滚动条到顶部的距离
+      let nDivHight = event.target.offsetHeight; //滚动条可见元素的高度
+      let nScrollHight = event.target.scrollHeight; //包括当前不可见部分的元素的高度
+      if (nScrollTop + nDivHight >= nScrollHight - 5) {
+        if (this.curPage >= this.pageTotal || event.target.scrollTop == 0) { // event.target.scrollTop 防止表头做切换选择时，重新请求当前页为1
+          return;
+        }
+        event.target.onmousewheel = function(e){   
+          e = e || window.event;   
+          event.target.scrollTop += e.wheelDelta > 0 ? -60 : 60; 
+          return false;
+        };
+        this.curPage++;
+        this.getDetailData().then(res => {
+          if (res.httpCode == 1) {
+            this.detailTabData = this.detailTabData.concat(res.data.data);
+            this.detailTotal = Number(res.data.count) || this.detailDataCount || Number(res.data.dateCount);
+            if (res.data.data.offset) {
+             this.detailParams.index = res.data.offset // 为假分页准备
+            }
+            this.pageDataHandle();
+          }
+        });
+      }
+    }, 500),
+    scrollDetailPannel: _.throttle(function(event) {
+      let nScrollTop = event.target.scrollTop; // 滚动条到顶部的距离
+      let nDivHight = event.target.offsetHeight; //滚动条可见元素的高度
+      let nScrollHight = event.target.scrollHeight; //包括当前不可见部分的元素的高度
+      if (nScrollTop + nDivHight >= nScrollHight - 5) {
+        if (this.curPage >= this.pageTotal || event.target.scrollTop == 0) { // event.target.scrollTop 防止表头做切换选择时，重新请求当前页为1
+          return;
+        }
+        event.target.onmousewheel = function(e){   
+          e = e || window.event;   
+          event.target.scrollTop += e.wheelDelta > 0 ? -60 : 60; 
+          return false;
+        };
+        this.curPage++;
+        this.getDetailData().then(res => {
+          if (res.httpCode == 1) {
+            this.detailTabData = this.detailTabData.concat(res.data.data);
+            this.detailTotal = Number(res.data.count) || this.detailDataCount || Number(res.data.dateCount);
+            if (res.data.data.offset) {
+             this.detailParams.index = res.data.offset // 为假分页准备
+            }
+            this.pageDataHandle();
+          }
+        });
+      }
+    }, 500),
+    pageDataHandle() {
+      if (this.detailTotal >= this.detailParams.pageSize) {
+        if (this.detailTotal % this.detailParams.pageSize == 0) {
+          this.pageTotal = parseInt(this.detailTotal / this.detailParams.pageSize);
+        } else {
+          this.pageTotal = parseInt(this.detailTotal / this.detailParams.pageSize) + 1;
+        }
+      } else {
+        this.pageTotal = 1;
+      }
+    }
+  },
+  mounted() {
+    let dom = document.querySelector(".rolling-detail-table .ivu-table-body");
+    dom.addEventListener("scroll", this.scrollPannel);
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.rolling-loading {
+    height: 100%;
+    margin-top: 10px;
+}
+  /*对话框表格样式*/
+ >>> .ivu-table{
+  min-height: 180PX;
+  background-color: transparent;
+  position: relative;
+   height: 100%;
+ }
+ >>>  .ivu-table:before {
+  height: 0;
+ }
+ >>>  .ivu-table th {
+  background-color: #14316A;
+  color: #FFFFFF;
+  border-bottom: 1px solid #173B77;
+ }
+ >>>  .ivu-table td {
+  border-bottom: 1px solid #173B77;
+  color: #FFFFFF;
+ }
+ >>> .rolling-loading .ivu-table td {
+  background-color: transparent;
+ }
+ >>>  .ivu-table .ivu-table-cell {
+   padding-left: 10px;
+   padding-right: 10px;
+ }
+ >>>  .ivu-table-stripe-even td{
+  background-color: #081C43;
+ }
+ >>> .ivu-table-body {
+    max-height: 480PX;
+    overflow: hidden;
+    overflow-y: auto;
+ }
+ >>>  .ivu-table-stripe-odd td{
+  background-color: #072453;
+ }
+ /*暂无数据*/
+ >>> .ivu-table-tip {
+    display: flex;
+    align-items: center;
+    background: url('../../assets/images/noData.png') no-repeat center;
+    height: 100%;
+    min-height: 142PX;
+ }
+ >>> .ivu-table-tip table {
+   display: none;
+ }
+</style>
+<style lang="stylus">
+.rolling-loading .ivu-table th  {
+  height: 38PX !important;
+}
+.ivu-modal-wrap .rolling-loading .ivu-spin-fix {
+   top: 38PX !important;
+   min-height: 142PX;
+   height: calc(100% - 38PX);
+ }
+</style>

src/components/common/TreeList.vue

@@ -22,32 +22,46 @@ export default {
     clickAllNode: { // 是否能点击全部节点 （true可点击  false只能点击最后层级站点）
       type: Boolean,
       default: false
-    }
+    },
+    firstCalssName: {
+      type: String,
+      default: 'icon-hefeiditie'
+    },
+    secondCalssName: {
+      type: String,
+      default: 'icon-sutpczhihuizhantai'
+    },
+    thirdCalssName: {
+      type: String,
+      default: 'icon-ditiezhaofang'
+    },
   },
   data() {
     return {
       treeData: [],
-      parentSrc:require('../../assets/images/parentStation.png'),
-      secondSrc:require('../../assets/images/subStation.png'),
-      childSrc:require('../../assets/images/childStation.png'),
       selectVal: '合肥火车站',
     };
   },
-  watch: {},
+  watch: {
+    defaultData: {
+    　handler(newValue, oldValue) {
+        this.treeData = newValue;
+      },　
+   }
+  },
   mounted() {
     this.treeData = this.defaultData;
-    console.log('treelist',this.treeData)
   },
   methods: {
     renderContent(h, { root, node, data }) {
-      let src = "";
-      if (data.title == '合肥轨道交通') {
-        src = this.parentSrc;
-      } else if (data.parent) {
-        // src = this.secondSrc;
-        src = this.secondSrc;
+      let calssName = "", color="";
+      if (data.level == 1) {
+        calssName = 'iconfont '+ this.firstCalssName;
+        color = 'red'
+      } else if (data.level == 2) {
+        calssName = 'iconfont '+ this.secondCalssName;
       } else {
-        src = this.childSrc;
+        calssName = 'iconfont '+ this.thirdCalssName
       }
       return h(
         "span",
@@ -59,16 +73,26 @@ export default {
         },
         [
           h("span", [
-            h("img", {
-              attrs: {
-                src: src
-              },
+             h("i", {
               style: {
-                verticalAlign: "text-bottom",
+                verticalAlign: "sub",
                 display: "inline-block",
-                margin: "0px 5px"
-              }
+                margin: "0px 5px",
+                color: color,
+                fontSize:'24px'
+              },
+              class: calssName
             }),
+            // h("img", {
+            //   attrs: {
+            //     src: src
+            //   },
+            //   style: {
+            //     verticalAlign: "text-bottom",
+            //     display: "inline-block",
+            //     margin: "0px 5px"
+            //   }
+            // }),
             h(
               "span",data.title
             )
@@ -78,7 +102,7 @@ export default {
     },
     selectChange(option) {
       let newArr = []
-      let arr = []
+      let arr = [], level  = null
       if (option.length != 0) {
         if (option.length == 2) {
           var result = []; // 两组数组对象取不同属性的值
@@ -112,9 +136,10 @@ export default {
                 items.disabled = true; // disabled 是否禁止选中 
                 items.expand = true;
                 this.selectVal = items.title;
-                arr.push(items.title)
+                level = items.level
             }  
-            items.children.forEach((val, i,valArr) => {
+            if (items.children) {
+              items.children.forEach((val, i,valArr) => {
               val.expand = false; //expand 是否展开直子节点 
               val.disabled = false; // disabled 是否禁止选中
               val.selected = false;
@@ -124,8 +149,8 @@ export default {
                   val.expand = true;
                   this.selectVal = val.title;
                   items.expand = true
-                  arr.push(items.title)
-                  arr.push(val.title)
+                  arr.push(val.id)
+                  level = val.level
               }
               if (val.children && val.children.length>0) {
                 val.children.forEach((selectItem, j) => {
@@ -142,13 +167,14 @@ export default {
                     val.expand = true
                     items.expand = true
                     this.selectVal = selectItem.title;
-                    arr.push(items.title)
-                    arr.push(val.title)
-                    arr.push(selectItem.title)
+                    arr.push(val.id)
+                    arr.push(selectItem.nodeId)
+                    level = selectItem.level
                   }
                 })
               }
             });   
+            }        
           });
         } else {
            this.treeData.forEach((items, index) => {
@@ -161,14 +187,12 @@ export default {
                   val.disabled = true; // disabled 是否禁止选中 
                   items.expand = true;
                   this.selectVal = val.title;
-                  arr.push(items.title)
-                  arr.push(val.title)
                 }
               });
           });
         }
       }
-      this.$emit('treeChange',this.selectVal,arr)
+      this.$emit('treeChange',this.selectVal,arr,level)
     },
   }
 }
@@ -177,8 +201,8 @@ export default {
 <style scoped lang="stylus">
 >>> .ivu-tree-arrow {
   color: #00FFFF;
-  height: 30px;
-  line-height: 30px;
+  // height: 30px;
+  // line-height: 30px;
   width: 15px;
 }
 >>> .ivu-tree-children li {
@@ -188,6 +212,7 @@ export default {
   color: #fff;
   width: 94%;
   padding: 6px 4px;
+  vertical-align: middle;
 }
 >>> .ivu-tree-title:hover {
     background-color: transparent;

src/components/common/index.js

@@ -5,7 +5,7 @@ import LoadingAnimation from './LoadingAnimation.vue'
 import NoData from './NoData.vue'
 // import SlickCarousel from './SlickCarousel.vue'
 // import RollingTable from './RollingTable.vue'
-// import RollingDetailTable from './RollingDetailTable.vue'
+import RollingDetailTable from './RollingDetailTable.vue'
 // import SelectType from './SelectType.vue'
 import TreeList from './TreeList.vue'
 // import AsideList from './AsideList.vue'
@@ -30,7 +30,7 @@ const Global = {
     // // 表格滚动组件
     // Vue.component('RollingTable', RollingTable)
     // // 表格详情滚动组件
-    // Vue.component('RollingDetailTable', RollingDetailTable)
+    Vue.component('RollingDetailTable', RollingDetailTable)
     // // 下拉框组件
     // Vue.component('SelectType', SelectType)
     // 树形组件

src/views/MainPage.vue

@@ -59,19 +59,19 @@ export default {
   flex: 1;
   display: flex;
   width: 100%;
-  height: calc(100% - 90px);
+  height: calc(100vh - 90px);
   // height: 100%;
 }
 /deep/ .ivu-input::-webkit-input-placeholder{
-  color: #285EC7;
+  color: #718EBD;
 }
 /deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
-  color: #285EC7;
+  color: #718EBD;
 }
 /deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
-  color: #285EC7;
+  color: #718EBD;
 }
 /deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
-  color: #285EC7;
+  color: #718EBD;
 }
 </style>

src/views/homecomponents/BasicInfomation/ApplicationEquip.vue

@@ -2,32 +2,39 @@
   <div class="content-main common-scroll">
     <div class="content-body">
       <Row :gutter="8" style="width:100%;height:100%">
-        <i-col span="6" style="height:100%">
+        <i-col span="5" style="height:100%">
           <div class="station-tree">
             <div class="station-tree-body">
               <div class="station-tree-top">
-                <Input suffix="ios-search" placeholder="请输入地铁站台名" search v-model="currentStation" class="common-search"  @on-search="iconChange"/>
+                <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.length>0" @treeChange="treeChange" ref="tree"></tree-list>
+                  <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="true" secondCalssName="icon-shebei1" thirdCalssName="icon-shebei" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
                 </div>
                 <div class="station-tree-left-notree" v-show="!showTree">
-                  站点输入错误！
-                </div>
-                <div class="station-tree-right">
+                  关键字输入错误！
                 </div>
               </div>
             </div>
           </div>
         </i-col>
-        <i-col span="18" style="height:100%">
+        <i-col span="19" style="height:100%">
           <div class="right-main">
             <div class="manage-main-top">
               <Button icon="ios-add" class="common-add-btn" @click="addClick">新增关联</Button>
             </div>
             <div class="manage-main-center">
-              <Table :columns="columns" :data="data1" class="common-table" :row-class-name="rowClassName"></Table>
+              <Table :columns="columns" :data="tableData" class="common-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-guanlian" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="boundClick(row)"></i>
+                  </Tooltip>
+                </template>
+              </Table>
             </div>
             <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator class="common-page"/>
           </div>
@@ -40,24 +47,25 @@
       width="25"
       ref="modalGrag"
       draggable
+      reset-drag-position
       :mask-closable="false"
+      @on-visible-change="modalChange"
       class-name="common-modal">
-      <!-- :rules="ruleValidate"  -->
-      <Form class="common-form" ref="formOption" :model="formOption" :label-width="120">
-				<FormItem label="应用名称：" prop="lineName">
-           <Select v-model="formOption.lineName" placeholder="应用名称">
-              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
+				<FormItem label="应用名称：" prop="applicationId">
+           <Select v-model="formOption.applicationId" placeholder="应用名称">
+              <Option v-for="item in appNameList" :value="(item.id)" :key="item.value">{{ item.appName }}</Option>
           </Select>
 				</FormItem>
-				<FormItem label="设备类型：" prop="stationName">
-           <Select v-model="formOption.station" placeholder="设备类型">
-              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+				<FormItem label="设备类型：" prop="equipmentTypeId">
+           <Select v-model="formOption.equipmentTypeId" placeholder="设备类型">
+              <Option v-for="item in equipTypeData" :value="(item.id)" :key="item.id">{{ item.name }}</Option>
           </Select>
         </FormItem>
 			</Form>
       <div slot="footer">
           <Button @click="modalCancel">取消</Button>
-          <Button type="primary" @click="modalOk">确定</Button>
+          <Button type="primary" @click="modalOk('formOption')">确定</Button>
         </div>
     </Modal>
     <Modal
@@ -66,6 +74,7 @@
       width="25"
       ref="modalGrag"
       draggable
+      reset-drag-position
       :mask-closable="false"
       class-name="common-modal">
       <Icon type="ios-information-circle" class="modal-icon"  style="color:#E92E2E"></Icon>
@@ -85,201 +94,90 @@ export default {
   },
   data() {
     return {
-      currentStation: '合肥轨道交通',
+      currentStation: '',
       currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
-      treeName: ['合肥轨道交通'], // 当前选中的一级二级站台名
-      preTreeName:['合肥轨道交通'],
       showTree: true,// 是否显示树形组件
-		  stationData: [{disabled: true,
-        expand: true,
-        children: [],
-        id: 0,
-        parent: null,
-        selected: true,
-        stationId: null,}],
-        tableTotal: 100,
-        tableParams: {
-          pageNum: 1,
-          pageSize: 20
-        },
-        data1: [
-          {
-              name: 'John Brown',
-              age: 1,
-              address: 'New York No.',
-              date: '2016-10-03'
-          },
-          {
-              name: 'Jim Green',
-              age: 2,
-              address: 'London No.',
-              date: '2016-10-01'
-          },
-          {
-              name: 'Joe Black',
-              age: 3,
-              address: 'Sydney No.',
-              date: '2016-10-02'
-          },
-          {
-              name: 'Jon Snow',
-              age: 2,
-              address: 'Ottawa No.',
-              date: '2016-10-04'
-          },
-          {
-              name: 'John Brown',
-              age: 1,
-              address: 'New York No.',
-              date: '2016-10-03'
-          },
-          {
-              name: 'Jim Green',
-              age: 2,
-              address: 'London No.',
-              date: '2016-10-01'
-          },
-          {
-              name: 'Joe Black',
-              age: 3,
-              address: 'Sydney No.',
-              date: '2016-10-02'
-          },
-          {
-              name: 'Jon Snow',
-              age: 2,
-              address: 'Ottawa No.',
-              date: '2016-10-04'
-          },
-            {
-              name: 'Joe Black',
-              age: 3,
-              address: 'Sydney No',
-              date: '2016-10-02'
-          },
-          {
-              name: 'Jon Snow',
-              age: 2,
-              address: '合肥城市轨道交通有限公司',
-              date: '2016-10-04'
-          },
-      ],
+		  stationData: [],
+      tableTotal: 0,
+      tableParams: {
+        applicationId:'',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      loading: true,
+      tableData: [],
       columns: [
           {
-            title: '线路序号',
-            width: 100,
-            key: 'name',
+            title: '应用名称',
+            key: 'appName',
             align: 'center'
           },
           {
-            title: '线路名称',
-            key: 'age',
-            width: 100,
+            title: '设备类型',
+            key: 'equipmentName',
             align: 'center'
           },
           {
-            title: '当前线路长度(km)',
-            key: 'address',
+            title: '接入设备数量',
+            key: 'equipmentNum',
             align: 'center'
           },
           {
-            title: '站点数量',
-            key: 'name',
-           align: 'center'
-          },
-          {
-            title: '运营机构',
-            key: 'address',
+            title: '操作',
             align: 'center',
-            ellipsis: true,
-            tooltip: true
-          },
-          {
-            title: '线路类型',
-            key: 'address',
-            align: 'center'
-          },
-          { title: "操作", key: "action", align: 'center',
-            render: (h, params) => {
-              return h('div',[
-                h('Tooltip', {
-                  props: { placement: 'top' },
-                }, [
-                    h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } },'解绑'),
-                    h('i',{style: { cursor:'pointer',color:'#B8B532',fontSize:'20px',marginRight:'6px'},
-                      on: {
-                          click: () => {
-                            this.modalStatus = true
-                          }
-                        },
-                    class: 'iconfont icon-xiangqingmingxi'})]),       
-              ])
-            }
-          },
+            slot: 'action',
+          }
       ],
-      formOption: {lineName: '',stationName:''},
-      typeList: [
-        {
-            value: 'New York',
-            label: 'New York'
-        },
-        {
-            value: 'London',
-            label: 'London'
-        },
-        {
-            value: 'Sydney',
-            label: 'Sydney'
-        },
-        {
-            value: 'Ottawa',
-            label: 'Ottawa'
-        },
-        {
-            value: 'Paris',
-            label: 'Paris'
-        },
-        {
-            value: 'Canberra',
-            label: 'Canberra'
-        }
-    ],
+      rowObj: {},
+      formOption: {applicationId: '',equipmentTypeId:''},
+      ruleValidate: {
+        applicationId: [{
+          required: true,
+          type: 'number',
+          message: '请选择应用名称',
+          trigger: 'change'
+        }],
+        equipmentTypeId: [{
+          required: true,
+          type: 'number',
+          message: '请选择设备类型',
+          trigger: 'change'
+        }],
+      }, 
+    equipTypeData: [],
     showModal: false,
     title: '新增关联',
     modalStatus: false,
+    appNameObj: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appNameList: []
     };
   },
   mounted() {
-    this.$get('metroapi/equipment/energy/stationTree').then(res => {
-      if (res.httpCode == 1) {
-        this.stationData[0].children = this.getTree(res.data)
-        this.currentStaData = [{disabled: true,
-          expand: true,
-          children: [],
-          id: 0,
-          parent: null,
-          selected: true,
-          stationId: null,
-          title: "合肥轨道交通"}]
-      } else {
-        this.stationData = [{disabled: true,
-        expand: true,
-        children: [],
-        id: 0,
-        parent: true,
-        selected: true,
-        stationId: null,
-        title: "合肥轨道交通"}]
-      }
-		})
+    this.getMetroLevel()
   },
   methods: {
+    // 获取树形数据
+    getMetroLevel () {
+     this.$get('metroapi/application/appEquipmentTypeTree').then(res => {
+      if (res.httpCode == 1) {
+        this.stationData = res.data
+			}
+		 })
+    },
+    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
     getTree(arr) {
       return arr.map((v,index) => {
-        v.disabled = false
-        v.selected = false
-        v.expand = false
-        if (v.title == '1号线') {
+        if (index==0) {
           v.expand = true
         }
         if (v.children) v.children = this.getTree(v.children);
@@ -289,13 +187,27 @@ export default {
     iconChange: _.throttle(function() {
       this.currentStaData = []
       this.treeName = []
-      this.showTree = false		
+      this.$nextTick(()=> {
+        this.getTableData()
+      })
       if(this.currentStation != ''){
-        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = false
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
       } else {
-        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部   
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = true
+        this.stationData = this.getTree(this.stationData)
+        return 
       }
-      this.getPamData (this.currentStation)
+      this.getSelectedItem()
+		}, 500),
+    clearChange () {
+      this.getSelectedItem()
+      this.$nextTick(()=> {
+        this.getTableData()
+      })
+    },
+    getSelectedItem  () {
       this.stationData.forEach((item, index,itemArr) => {
         item.expand = false;
         item.disabled = false; 
@@ -304,11 +216,12 @@ export default {
             item.selected = true;
             item.disabled = true; // disabled 是否禁止选中 
             item.expand = true;
-            this.treeName.push(item.title)
             this.currentStaData.push(item)
-            this.preTreeName = this.treeName
             this.showTree = true
         }
+        if (this.currentStation == '' && index == 0) {
+          item.expand = true
+        }
         item.children.forEach((val, i,valArr) => {
           val.expand = false; //expand 是否展开直子节点 
           val.disabled = false; // disabled 是否禁止选中
@@ -318,58 +231,36 @@ export default {
             val.disabled = true; // disabled 是否禁止选中 
             val.expand = true;
             item.expand = true;
-            this.treeName.push(item.title)
-            this.treeName.push(val.title)
             this.currentStaData.push(val)
-            this.preTreeName = this.treeName
             this.showTree = true
           }
+          if (this.currentStation == '' && i==0) {
+            val.expand = true
+          }
           val.children.forEach ((lastVal,lastIndex) => {
             lastVal.selected = false; //expand 是否展开直子节点 
             lastVal.disabled = false; 
             lastVal.expand = false;
-            if (this.currentStation =='合肥轨道交通' || this.currentStation =='') {
-              itemArr[index].selected = true
-              itemArr[index].disabled = true
-              itemArr[index].expand = true
-              valArr[index].expand = true
-              this.showTree = true
-              this.currentStation = '合肥轨道交通'
-              this.treeName = ['合肥轨道交通']
-            }
             if (lastVal.title == this.currentStation) {
               lastVal.selected = true;
               lastVal.disabled = true; // disabled 是否禁止选中 
               lastVal.expand = true;
               val.expand = true
               item.expand = true
-              this.treeName.push(item.title)
-              this.treeName.push(val.title)
-              this.treeName.push(lastVal.title)
               this.currentStaData.push(lastVal)
-              this.preTreeName = this.treeName
               this.showTree = true
             } 
           })
         });
-      });		
-      if (!this.showTree) {
-        this.treeName = this.preTreeName
-      }
+      });
+    },
+    treeChange(val,arr,level) {
+      this.currentStation = val
       this.$nextTick(()=> {
-        if (this.initActive == 'year') {
-          this.$refs.longForecast.getTitle(this.pamData)
-        } else {
-          this.$refs.forecast.getTitle(this.pamData)
-        }
+        this.getTableData(arr,level)
       })
-		}, 500),
-    treeChange(val,arr) {
-      this.currentStation = val
-      this.treeName = arr
-      this.preTreeName = arr
 		},
-     rowClassName(row, index) {
+    rowClassName(row, index) {
       if (index % 2 == 0) {
         return "ivu-table-stripe-even";
       } else {
@@ -379,26 +270,113 @@ export default {
     // 分页
     changePage (val) {
       this.tableParams.pageNum = val
-      // this.getTableData()
+      this.getTableData()
     },
     //跳转
     sizeChange (val) {
       this.tableParams.pageSize = val
-      // this.getTableData()
+      this.getTableData()
+    },
+    getTableData (arr,level) {
+      if (level) {
+        this.tableParams.keywords = ''
+        if (level == 2) {
+          this.tableParams.applicationId = arr[arr.length-1]
+          this.tableParams.equipmentTypeId = ''
+        } else if (level == 3) {
+          this.tableParams.applicationId = arr[arr.length-2]
+          this.tableParams.equipmentTypeId = arr[arr.length-1]
+        } else {
+          this.tableParams.applicationId = ''
+          this.tableParams.applicationId = ''
+        }
+      } else {
+        this.tableParams.applicationId = ''
+        this.tableParams.equipmentTypeId = ''
+        if (this.currentStation == '合肥轨道交通' || this.currentStation == '') {
+          this.tableParams.keywords = ''
+        } else {
+          this.tableParams.keywords = this.currentStation
+        }
+      }
+      this.loading = true
+      this.$get('metroapi/application/equipmentTypeInfo', this.tableParams).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.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    getType  () {
+      // 获取设备类型
+      this.$get('metroapi/equipment/queryEquipmentType', {name:''}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeData = res.data
+        } else {
+          this.equipTypeData = []
+        }
+      })
+      // 获取应用名称
+      this.$get('metroapi/application/info/list', this.appNameObj).then(res=>{
+          if (res.httpCode == 1 ){
+            this.appNameList = res.data.data
+          } else {
+            this.appNameList = []
+          }
+        })
     },
     addClick () {
       this.showModal = true
-      this.$refs.modalGrag.dragData.x = null
-      this.$refs.modalGrag.dragData.y = null
     },
-    modalOk () {
-      this.showModal = false
+    boundClick (row) {
+      this.rowObj = row
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    modalOk (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$post('metroapi/application/addEquipmentType', this.formOption).then(res=>{
+            if (res.httpCode == 1 ){
+              this.showModal = false
+              this.$Message.info(res.msg)
+              this.getTableData()
+              this.getMetroLevel()
+            } else {
+              this.$Message.info(res.msg)
+            }
+          })
+        } else {
+          this.showModal = true
+        }
+      })
     },
     modalCancel () {
       this.showModal = false
     },
     commonOk () {
-      this.modalStatus = false
+      this.$post('metroapi/application/deleteEquipmentType',{appEquipmentTypeId:this.rowObj.appEquipmentTypeId}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.modalStatus = false
+          this.getTableData()
+          this.getMetroLevel()
+          this.$Message.info(res.msg)
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
     },
     commonCancel () {
       this.modalStatus = false
@@ -460,6 +438,7 @@ export default {
 .right-main {
   height: 100%;
   padding: 10px 0;
+  position: relative;
   // padding: 16px;
 }
 .manage-main-top {
@@ -480,9 +459,20 @@ export default {
  >>> .common-table .ivu-table td {
   height: 54px;
  }
+>>> .ivu-spin-fix {
+  top: 54px;
+  height: calc(100vh - 350px);
+}
+>>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+  height: calc(100vh - 350px);
+}
 .common-page {
   margin-top: 15px;
   display: flex;
   justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
 }
 </style>

src/views/homecomponents/BasicInfomation/ApplicationManage.vue

@@ -5,8 +5,8 @@
         <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>
-        <application-station v-show="currentTabs == '应用管理'"></application-station>
-        <application-equip v-show="currentTabs == '应用-设备类型关联'"></application-equip>
+        <application-station v-if="currentTabs == '应用管理'" ref="station" class="content-body-manage"></application-station>
+        <application-equip v-if="currentTabs == '应用-设备类型关联'" ref="equip" class="content-body-manage"></application-equip>
      </div>
     </div>
   </div>
@@ -26,10 +26,25 @@ export default {
     };
   },
   mounted() {
+    this.$nextTick(()=> {
+      this.$refs.station.getTableData()
+      this.$refs.station.getType()
+    })
   },
   methods: {
     tabsClick (name) {
       this.currentTabs = name
+      if (this.currentTabs == '应用管理') {
+         this.$nextTick(()=> {
+           this.$refs.station.getTableData()
+           this.$refs.station.getType()
+        })
+      } else {
+        this.$nextTick(()=> {
+          this.$refs.equip.getTableData(this.currentStation)
+          this.$refs.equip.getType()
+        })
+      }
     },
   }
 };
@@ -50,4 +65,7 @@ export default {
   height: 100%;
   padding: 10px;
 }
+.content-body-manage {
+  height: calc(100% - 50px);
+}
 </style>

src/views/homecomponents/BasicInfomation/ApplicationStation.vue

@@ -1,32 +1,64 @@
 <template>
-  <div>
+  <div class="content-main-manage">
     <div class="search-list">
       <div class="search-left">
-      <Select v-model="tableParams.level" placeholder="层级">
-          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-      <Select v-model="tableParams.lineName" placeholder="线路">
-          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-      <Select v-model="tableParams.stationName" placeholder="站点">
-          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-      <Select v-model="tableParams.equipmentCheck" placeholder="接入设备">
-          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-      <Select v-model="tableParams.instrumentCheck" placeholder="接入仪表">
-          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-      <Button type="primary" class="common-btn-search">
-        <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
-      </Button>  
+        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
+          <FormItem label="" prop="level">
+            <Select v-model="tableParams.level" placeholder="层级">
+                <Option v-for="item in levelData" :value="item.id" :key="item.id">{{ item.value }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="lineId">
+            <Select v-model="tableParams.lineId" placeholder="线路" @on-select="selectLine">
+              <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{ item.lineName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="stationId">
+            <Select v-model="tableParams.stationId" placeholder="站点">
+              <Option v-for="item in stationTypeData" :value="String(item.id)" :key="item.id">{{ item.stationName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentCheck">
+             <Select v-model="tableParams.equipmentCheck" placeholder="接入设备">
+                <Option v-for="item in equipmentCheckData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+              </Select>
+          </FormItem>
+          <FormItem label="" prop="instrumentCheck">
+            <Select v-model="tableParams.instrumentCheck" placeholder="接入仪表">
+              <Option v-for="item in instrumentData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </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 class="btn-container">
-        <Button icon="ios-add" class="common-add-btn" @click="addClick">新增线路</Button>
+        <Button icon="ios-add" class="common-add-btn" @click="addClick">新增应用</Button>
       </div>
     </div>
     <div class="manage-main-center">
-      <Table :columns="columns" :data="data1" class="common-table" :row-class-name="rowClassName"></Table>
+      <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-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
+           </Tooltip>
+           <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>
     <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator class="common-page"/>
     <Modal
@@ -35,42 +67,37 @@
       width="34"
       ref="modalGrag"
       draggable
+      reset-drag-position
+      @on-visible-change="modalChange"
       :mask-closable="false"
       class-name="common-modal">
-      <!-- :rules="ruleValidate"  -->
-      <Form class="common-form" ref="formOption" :model="formOption" :label-width="120">
-				<FormItem label="归属线路：" prop="lineName">
-           <Select v-model="formOption.lineName" placeholder="线路">
-              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
+				<FormItem label="归属线路：" prop="lineId">
+          <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="stationName">
-           <Select v-model="formOption.station" placeholder="线路">
-              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+				<FormItem label="归属站点：" prop="stationId">
+           <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="应用ID：" prop="station">
+        <FormItem label="应用ID：">
           <span v-show="title=='新增应用'">系统自动生成，唯一不重复</span>
-          <span v-show="title=='编辑应用'"></span>
+          <span v-show="title=='编辑应用'">{{formOption.appCode}}</span>
         </FormItem>
-        <FormItem label="应用名称：" prop="station">
-          <Input v-model="formOption.station" maxlength="100" show-word-limit />  
+        <FormItem label="应用名称：" prop="appName">
+          <Input v-model="formOption.appName" maxlength="100" show-word-limit />  
         </FormItem>
-        <FormItem label="层级：" prop="station">
-          <Select v-model="formOption.station" placeholder="线路">
-              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <FormItem label="层级：" prop="level">
+          <Select v-model="formOption.level" placeholder="层级" @on-change="selectModalLevel" label-in-value>
+             <Option v-for="item in levelModalData" :value="String(item.id)" :key="item.id">{{ item.value }}</Option>
           </Select>
         </FormItem>
-        <FormItem label="服务器名称：" prop="station">
-          <Input v-model="formOption.station" maxlength="20" show-word-limit />  
-        </FormItem>
-        <FormItem label="IP地址：" prop="station" v-show="title == '新增线路'">
-          <Input v-model="formOption.station" /> 
-        </FormItem>
 			</Form>
       <div slot="footer">
           <Button @click="modalCancel">取消</Button>
-          <Button type="primary" @click="modalOk">确定</Button>
+          <Button type="primary" @click="modalOk('formOption')">确定</Button>
         </div>
     </Modal>
     <Modal
@@ -79,6 +106,7 @@
       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>
@@ -94,313 +122,199 @@
       width="45"
       ref="modalGrag"
       draggable
+      reset-drag-position
       footer-hide
       :mask-closable="false"
-      class-name="common-modal">
+      class-name="common-modal common-modal-detail">
        <Tabs :value="currentModalTabs" @on-click="tabsClick" class="common-tabs">
         <TabPane v-for="tab in tabsModalData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
       </Tabs>
         <div v-if="currentModalTabs =='基础信息'" class="modal-tabs-item">
-          <div v-for="(item,index) in detailLabel" :key="index">
           <div class="common-modal-content">
-            <div class="modal-content-item" v-for="(val,i) in item.arr" :key="i" :class="{'modal-content-item-last': val.name == '说明'}">
+            <div class="modal-content-item" :class="{'item-especial': item.name == '层级'}" v-for="(item,index) in detailLabel" :key="index">
               <span class="modal-content-item-name">
-              {{val.name}}
+              {{item.name}}
               </span>
-              <span class="modal-content-item-value">4号线</span>
+              <span class="modal-content-item-value">{{item.value}}</span>
             </div>
           </div>
-        </div>
       </div>
-      <Table :columns="columns" :data="data1" class="common-table modal-tabs-item" :row-class-name="rowClassName" v-if="currentModalTabs =='关联设备类型'"></Table>
-      <Table :columns="columns" :data="data1" class="common-table modal-tabs-item" :row-class-name="rowClassName" v-if="currentModalTabs =='关联仪表类型'"></Table>
+      <rolling-detail-table :columns1="columnsEquip" apiUrl="metroapi/application/equipmentTypeInfo" ref="detailTable"
+			 class="rolling-detail-table" v-if="currentModalTabs =='关联设备类型'"></rolling-detail-table>
+      <!-- <Table :columns="columnsEquip" :data="equipTableData" class="common-table modal-tabs-item modal-table" no-data-text="" :row-class-name="rowClassName" v-if="currentModalTabs =='关联设备类型'" :loading="modalLoading">
+        <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+      </Table> -->
     </Modal>
   </div>
 </template>
 <script>
+const defaultFrom = {lineId: '',lineName: '',stationId: '',stationName: '',appName: '',level:''}
 export default {
   name: "ApplicationStation",
   components:{
   },
   data() {
     return {
-       tableParams: {
+      loading: true,
+      modalLoading: true,
+      // tableParams: {
+      //   level: '',
+      //   lineId: '-1',
+      //   stationId: '-1',
+      //   equipmentCheck: '-1',
+      //   instrumentCheck: '-1',
+      //   pageNum: 1,
+      //   pageSize: 10
+      // },
+      tableParams: {
         level: '',
-        lineName: '',
-        stationName: '',
+        lineId: '',
+        stationId: '',
         equipmentCheck: '',
         instrumentCheck: '',
-        pageSize: 1,
-        pageNum: 10
+        pageNum: 1,
+        pageSize: 10
       },
-      tableTotal: 100,
-      cityList: [
-          {
-              value: 'New York',
-              label: 'New York'
-          },
-          {
-              value: 'London',
-              label: 'London'
-          },
-          {
-              value: 'Sydney',
-              label: 'Sydney'
-          },
-          {
-              value: 'Ottawa',
-              label: 'Ottawa'
-          },
-          {
-              value: 'Paris',
-              label: 'Paris'
-          },
-          {
-              value: 'Canberra',
-              label: 'Canberra'
-          }
+      tableData: [],
+      tableTotal: 0,
+      rowObj: {},
+      levelData: [],
+      lineTypeData: [],
+      stationTypeData: [],
+      equipmentCheckData: [
+        {
+          value: '-1',
+          label: '接入设备'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
       ],
-       data1: [
-          {
-              name: 'John',
-              age: 1,
-              address: 'New York No.',
-              date: '2016-10-03'
-          },
-          {
-              name: 'Jim',
-              age: 2,
-              address: 'London No.',
-              date: '2016-10-01'
-          },
-          {
-              name: 'Joe',
-              age: 3,
-              address: 'Sydney No.',
-              date: '2016-10-02'
-          },
-          {
-              name: 'Jon',
-              age: 2,
-              address: 'Ottawa No.',
-              date: '2016-10-04'
-          },
-          {
-              name: 'John',
-              age: 1,
-              address: 'New York No.',
-              date: '2016-10-03'
-          },
-          {
-              name: 'Jim',
-              age: 2,
-              address: 'London No.',
-              date: '2016-10-01'
-          },
-          {
-              name: 'Joe',
-              age: 3,
-              address: 'Sydney No.',
-              date: '2016-10-02'
-          },
-          {
-              name: 'Jon',
-              age: 2,
-              address: 'Ottawa No.',
-              date: '2016-10-04'
-          },
-            {
-              name: 'Joe',
-              age: 3,
-              address: 'Sydney No',
-              date: '2016-10-02'
-          },
-          {
-              name: 'Jon',
-              age: 2,
-              address: '合肥城市轨道交通有限公司',
-              date: '2016-10-04'
-          },
+      instrumentData: [
+        {
+          value: '-1',
+          label: '接入仪表'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
       ],
       columns: [
           {
-            title: '线路序号',
-            width: 100,
-            key: 'name',
+            title: '应用ID',
+            key: 'appCode',
             align: 'center'
           },
           {
-            title: '线路名称',
-            key: 'age',
-            width: 100,
+            title: '应用名称',
+            key: 'appName',
             align: 'center'
           },
           {
-            title: '当前线路长度(km)',
-            key: 'address',
+            title: '层级',
+            key: 'levelDesc',
             align: 'center'
           },
           {
-            title: '站点数量',
-            key: 'name',
+            title: '归属线路',
+            key: 'lineName',
            align: 'center'
           },
           {
-            title: '运营机构',
-            key: 'address',
+            title: '归属站点',
+            key: 'stationName',
             align: 'center',
             ellipsis: true,
             tooltip: true
           },
           {
-            title: '线路类型',
-            key: 'address',
+            title: '接入设备数量',
+            key: 'equipmentNum',
             align: 'center'
           },
-           {
-            title: '启用状态',
-            key: 'age',
-            align: 'center',
-            width: 120,
-            render: (h, params) => {
-            const parisEnb = params.row.age == 1 ? true:false
-              return h('div', [                             
-                h('i-switch', {
-                  props: { value: parisEnb,'true-color': '#57C44F',
-                  },
-                  on: {
-                    input: function (event) { 
-                      console.log(event)
-                      params.row.isEnabled = event 
-                    },
-                    'on-change': (val)=> {
-                      console.log(params.row)
-                      console.log('click')
-                    }
-                  },
-                  nativeOn:{
-                      "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
-                       console.log(params.row)
-                       this.rowObj =  params.row
-                      if (!parisEnb) {
-                        this.commonTitle = '确认启用'
-                        this.activeColor = '#57C44F'
-                        this.activeClass = 'icon-qiyong'
-                        this.modalTitle = '启用后此线路统计数据将在各管理模块及前端显示页面生效。'
-                        this.modalStatus = true
-                      } else {
-                        this.commonTitle = '确认关闭'
-                        this.activeColor = '#E92E2E'
-                        this.activeClass = 'icon-guanbi'
-                        this.modalTitle = '关闭后线路下所有站点将同时关闭，线路及站点统计数据不可见。'
-                        this.modalStatus = true
-                      }
-                        // thatValue.switchOneInfo = {
-                        //   name:params.row.name,
-                        //   is_show:params.row.is_show
-                        // }
-                      },
-                    }
-                }),
-              ])
-            }
-          },
-          { title: "操作", key: "action", align: 'center',
-            render: (h, params) => {
-              return h('div',[
-                h('Tooltip', {
-                  props: { placement: 'top' },
-                }, [
-                    h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } },'详情'),
-                    h('i',{style: { cursor:'pointer',color:'#B8B532',fontSize:'20px',marginRight:'6px'},
-                      on: {
-                          click: () => {
-                            this.detailStatus = true
-                          }
-                        },
-                    class: 'iconfont icon-xiangqingmingxi'})]),
-                h('Tooltip', {
-                  props: { placement: 'top' },
-                }, [
-                h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } },'编辑'),
-                h('i',{style: { cursor:'pointer',color:'#64ACFE',fontSize:'20px',marginRight:'6px'},
-                  on: {
-                      click: () => {
-                        this.title = '编辑应用'
-                        this.showModal = true
-                      }
-                    },
-                class: 'iconfont icon-bianji'})]),
-                h('Tooltip', {
-                  props: { placement: 'top' },
-                }, [
-                h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } },'编辑'),
-                h('i',{style: { cursor:'pointer',color:'#E92E2E',fontSize:'20px',marginRight:'6px'},
-                  on: {
-                      click: () => {
-                        this.commonTitle = '确认删除'
-                        this.modalTitle = '只能删除没有关联设备类型和仪表类型的应用，删除不影响已产生的操作和记录。'
-                        this.modalStatus = true
-                      }
-                    },
-                class: 'iconfont icon-shanchu'}),                  
-                ])        
-              ])
-            }
-          },
-      ],
-      typeList: [
-          {
-              value: 'New York',
-              label: 'New York'
-          },
           {
-              value: 'London',
-              label: 'London'
-          },
-          {
-              value: 'Sydney',
-              label: 'Sydney'
-          },
-          {
-              value: 'Ottawa',
-              label: 'Ottawa'
-          },
-          {
-              value: 'Paris',
-              label: 'Paris'
+            title: '接入监测仪表',
+            key: 'instrumentNum',
+            align: 'center'
           },
           {
-              value: 'Canberra',
-              label: 'Canberra'
-          }
-      ],
-      tableTotal: 100,
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 120,
+        }
+      ],    
+      tableTotal: 0,
       showModal: false,
       detailStatus: false, 
       modalStatus: false,
-      title: '新增线路',
+      title: '新增应用',
       commonTitle: "确认删除",
       activeColor: '#E92E2E',
       activeClass: '',
       modalTitle: '',
-      formOption: {line: null,station: null,equipmentName: 1,type:'',switch:false},
+      formOption: {lineId: '',lineName: '',stationId: '',stationName: '',appName: '',level:''},
       ruleValidate: {
-        line: [{
-          type: 'number',
-          message: '请选择线路',
+        lineId: [{
+          required: true,
+          message: '请选择所属线路',
+          trigger: 'change'
+        }],
+        stationId: [{
+          required: true,
+          message: '请选择所属站点',
           trigger: 'change'
         }],
-        station: [{
+        appName: [{
           required: true,
-          type: 'number',
-          message: '请选择站点',
+          message: '请输入应用名称',
+          trigger: 'blur'
+        }],
+        level: [{
+          required: true,
+          message: '请选择层级',
           trigger: 'change'
         }]
       }, 
+      levelModalData: [],
       currentModalTabs:'基础信息',
-      tabsModalData: [{label:'基础信息'},{label:'关联设备类型'},{label:'关联仪表类型'}],
-      detailLabel: [{name:'基础信息',arr:[{name: '线路名称',value:0},{name: '线路序号',value:0},{name: '上级节点',value:0},{name: '启用状态',value:0},{name: '运营机构',value:0},{name: '线路类型',value:0},{name: '说明',value:0}]}]
+      tabsModalData: [{label:'基础信息'},{label:'关联设备类型'}],
+      detailLabel: [],
+      columnsEquip: [
+          {
+            title: '序号',
+            type: 'index',
+            align: 'center'
+          },
+          {
+            title: '设备类型名称',
+            key: 'equipmentName',
+            align: 'center'
+          },
+          {
+            title: '监测模型指标数',
+            key: 'equipmentNum',
+            align: 'center'
+          }
+      ],
+      // equipTableData: [],
+      detailParams: {
+					applicationId: "",
+					pageNum: 1,
+					pageSize: 10
+			},
     };
   },
   mounted() {
@@ -416,39 +330,265 @@ export default {
     // 分页
     changePage (val) {
       this.tableParams.pageNum = val
-      // this.getTableData()
+      this.getTableData()
     },
     //跳转
     sizeChange (val) {
       this.tableParams.pageSize = val
-      // this.getTableData()
+      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.levelData = res.data
+        } else {
+          this.levelData = []
+        }
+      })
+    },
+    selectLine (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 () {
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.lineId = params.lineId == '-1' ? '':params.lineId
+      params.stationId = params.stationId == '-1' ?'':params.stationId
+      params.equipmentCheck = params.equipmentCheck == '-1' ?'':params.equipmentCheck
+      params.instrumentCheck = params.instrumentCheck == '-1' ?'':params.instrumentCheck
+      this.loading = true
+      this.$get('metroapi/application/info/list', 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.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    selectModalLine (val) {
+      this.formOption.stationId = ''
+      this.formOption.level = ''
+      if (val) {
+        this.formOption.lineName = val.label
+        this.formOption.lineId =val.value
+        this.getStationData(val.value)
+      }
+      this.levelModalData = this.getCurrentLevel()
+    },
+    selectModalStation (val) {
+      if (val) {
+       this.formOption.stationName = val.label
+       this.formOption.stationId =val.value
+       this.levelModalData = this.getCurrentLevel()
+      }
+    },
+    selectModalLevel (val) {
+      if (val) {
+       this.formOption.levelDesc = val.label
+       this.formOption.level =val.value
+      }
     },
+    // 获取对话框层级数据
+    getCurrentLevel () {
+      let arr = []
+      if (this.formOption.lineId == '-1') {
+        if (this.formOption.stationId == '' || this.formOption.stationId == '-1') {
+          arr = [{value:'线网',id:'9'}]
+        }
+      } else {
+        if (this.formOption.stationId == '' || this.formOption.stationId == '-1') {
+          arr = [{value:'线路',id:'8'}]
+        } else {
+          arr = [{value:'站点',id:'7'}]
+        }
+      }
+      return arr
+    },
+    searchClick () {
+      this.getTableData()
+    },
+    resetClick (name) {
+     this.$refs[name].resetFields()
+     this.getTableData()
+    },   
     addClick () {
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
       this.title = '新增应用'
       this.showModal = true
-      this.$refs.modalGrag.dragData.x = null
-      this.$refs.modalGrag.dragData.y = null
     },
-    modalOk () {
-      this.showModal = false
+    detailClick (row) {
+      this.rowObj = row
+      this.currentModalTabs = '基础信息'   
+      this.detailStatus = true
+      this.$get('metroapi/application/info', {appCode:row.appCode}).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.formOption.level = String(this.formOption.level)
+      this.getStationData(this.formOption.lineId)
+      this.levelModalData = this.getCurrentLevel()
+      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();
+     }
+    },
+    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 == '新增应用') {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/application/addApp', 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) {
+            params.lineName = params.lineName == '/' ? null:params.lineName
+            params.stationName = params.stationName == '/' ? null:params.stationName
+            this.$post('metroapi/application/addApp', 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 () {
-      this.modalStatus = false
+      let params = {
+        applicationId: this.rowObj.id
+      }
+      this.delData(params)
     },
     commonCancel () {
       this.modalStatus = false
     },
+    // 删除 关闭/接口
+    delData (params) {
+      this.$post('metroapi/application/deleteApp',params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.modalStatus = false
+          this.$Message.info(res.msg)
+          this.getTableData()
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
     tabsClick (name) {
       this.currentModalTabs = name
-    }
-    
+      if (this.currentModalTabs == '关联设备类型') {
+        // this.equipDetail (this.rowObj)
+        this.detailParams.applicationId = this.rowObj.id
+        this.$nextTick(() => {
+           document.querySelector(".common-modal-detail .ivu-table-body").scrollTo(0, 0)
+          this.$refs.detailTable.getChartsDetail(this.detailParams)
+        });
+      }
+    },
+    // equipDetail (row) {
+    //   this.modalLoading = true
+    //   let params = {
+    //     pageNum: 1,
+    //     pageSize: 9999,
+    //     applicationId: row.id
+    //   }
+    //   this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+    //     this.modalLoading = false
+    //       if ( res.httpCode == 1 ){
+    //         this.equipTableData = res.data.data
+    //       } else {
+    //         this.equipTableData = []
+    //       }
+    //     })
+    // },
   }
 };
 </script>
 <style scoped lang="stylus">
+.content-main-manage {
+  position: relative;
+  overflow: hidden;
+}
 .search-list {
   display: flex;
   justify-content: space-between;
@@ -458,7 +598,7 @@ export default {
   display: flex;
   align-items: center;
    .ivu-select {
-     width: 160px;
+     width: 150px;
      padding-right: 10px;
      height: 32px;
    }
@@ -474,19 +614,46 @@ export default {
   max-height: 100%;
 }
 >>> .common-table .ivu-table th {
-  height: 56px;
+  height: 53px;
  }
  >>> .common-table .ivu-table td {
-  height: 55.5px;
+  height: 53px;
+ }
+  >>> .ivu-spin-fix {
+   top: 53px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 355px);
+ }
+ >>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .app-table .ivu-table-tip {
+   height: calc(100vh - 355px);
+ }
+ >>> .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;
   justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
 }
 >>> .modal-tabs-item {
   margin-top: 10px;
 }
+// >>> .common-modal .ivu-modal-body {
+//   min-height: 243px;
+// }
 >>> .common-modal-content {
   display: flex;
   width: 100%;
@@ -499,7 +666,7 @@ export default {
   width: 50%;
   display: flex;
 }
->>> .modal-content-item-last {
+>>> .item-especial {
   width: 100%;
 }
 >>> .modal-content-item-name {
@@ -526,7 +693,7 @@ export default {
   color: #F5F5F5;
   padding-left: 20px;
 }
->>> .modal-content-item-last .modal-content-item-name{
+>>> .item-especial .modal-content-item-name{
   width: 25%;
   height: auto;
   min-height: 45px;
@@ -534,7 +701,7 @@ export default {
   display: flex;
   align-items: center;
 }
->>> .modal-content-item-last .modal-content-item-value{
+>>> .item-especial .modal-content-item-value{
   width: 75%;
   height: auto;
   min-height: 45px;

src/views/homecomponents/BasicInfomation/DeviceManage.vue

@@ -2,31 +2,30 @@
  <div class="content-main common-scroll">
     <div class="content-body">
       <Row :gutter="8" style="width:100%;height:100%">
-        <i-col span="6" style="height:100%">
+        <i-col span="5" style="height:100%">
           <div class="station-tree">
             <div class="station-tree-body">
               <div class="station-tree-top">
-                <Input suffix="ios-search" placeholder="请输入地铁站台名" search v-model="currentStation" class="common-search"  @on-search="iconChange"/>
+                <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.length>0" @treeChange="treeChange" ref="tree"></tree-list>
+                  <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="true" secondCalssName="icon-shebei1" thirdCalssName="icon-shebei" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
                 </div>
                 <div class="station-tree-left-notree" v-show="!showTree">
-                  站点输入错误！
-                </div>
-                <div class="station-tree-right">
+                  关键字输入错误！
                 </div>
               </div>
             </div>
           </div>
         </i-col>
-        <i-col span="18" style="height:100%">
+        <i-col span="19" style="height:100%">
           <div class="right-main">
             <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>
-            <line-manage></line-manage>
+            <device-manage-index v-if="currentTabs=='设备管理'" ref="device"></device-manage-index>
+            <device-type-manage v-if="currentTabs=='设备类型管理'" ref="deviceType" @changeTree="changeTree"></device-type-manage>
           </div>
         </i-col>
       </Row>
@@ -36,63 +35,40 @@
 <script>
 import _ from 'lodash'
 import LineManage from './LineManage.vue'
+import DeviceManageIndex from './DeviceManageIndex.vue'
+import DeviceTypeManage from './DeviceTypeManage.vue'
 export default {
   name: "DeviceManage",
   components:{
-    LineManage
+    DeviceManageIndex,DeviceTypeManage
   },
   data() {
     return {
-      currentStation: '合肥轨道交通',
+      currentStation: '',
       currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
-      treeName: ['合肥轨道交通'], // 当前选中的一级二级站台名
-      preTreeName:['合肥轨道交通'],
       showTree: true,// 是否显示树形组件
-		  stationData: [{disabled: true,
-        expand: true,
-        children: [],
-        id: 0,
-        parent: null,
-        selected: true,
-        stationId: null,
-        title: "合肥轨道交通"}],
-      tabsData: [{label:'线路管理'},{label:'站点管理'}],
-      currentTabs: '线路管理'
+		  stationData: [],
+      tabsData: [{label:'设备管理'},{label:'设备类型管理'}],
+      //  tabsData: [{label:'设备管理'},{label:'设备类型管理'},{label:'设备监测模型'}],
+      currentTabs: '设备管理'
     };
   },
   mounted() {
-    this.$get('metroapi/lineStation/lineStationTree').then(res => {
+    this.getMetroLevel()
+  },
+  methods: {
+    // 获取树形数据
+    getMetroLevel () {
+      this.$get('metroapi/application/appEquipmentTypeTree').then(res => {
 				if (res.httpCode == 1) {
           this.stationData = res.data
-          console.log(this.stationData)
-				// 	this.stationData[0].children = this.getTree(res.data)
-				// 	this.currentStaData = [{disabled: true,
-				// 		expand: true,
-				// 		children: [],
-				// 		id: 0,
-				// 		parent: null,
-				// 		selected: true,
-				// 		stationId: null,
-				// 		title: "合肥轨道交通"}]
-				// } else {
-				// 	this.stationData = [{disabled: true,
-				// 	expand: true,
-				// 	children: [],
-				// 	id: 0,
-				// 	parent: true,
-				// 	selected: true,
-				// 	stationId: null,
-				// 	title: "合肥轨道交通"}]
 				}
-		})
-  },
-  methods: {
+		  })
+    },
+    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
     getTree(arr) {
       return arr.map((v,index) => {
-        v.disabled = false
-        v.selected = false
-        v.expand = false
-        if (v.title == '1号线') {
+        if (index==0) {
           v.expand = true
         }
         if (v.children) v.children = this.getTree(v.children);
@@ -102,13 +78,27 @@ export default {
     iconChange: _.throttle(function() {
       this.currentStaData = []
       this.treeName = []
-      this.showTree = false		
+      this.$nextTick(()=> {
+        // this.$refs.stationManage.getTableData(this.currentStation)
+      })
       if(this.currentStation != ''){
-        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = false
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
       } else {
-        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部   
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = true
+        this.stationData = this.getTree(this.stationData)
+        return 
       }
-      this.getPamData (this.currentStation)
+      this.getSelectedItem()
+		}, 500),
+    clearChange () {
+      this.getSelectedItem()
+      this.$nextTick(()=> {
+        // this.$refs.stationManage.getTableData(this.currentStation)
+      })
+    },
+    getSelectedItem  () {
       this.stationData.forEach((item, index,itemArr) => {
         item.expand = false;
         item.disabled = false; 
@@ -117,11 +107,12 @@ export default {
             item.selected = true;
             item.disabled = true; // disabled 是否禁止选中 
             item.expand = true;
-            this.treeName.push(item.title)
             this.currentStaData.push(item)
-            this.preTreeName = this.treeName
             this.showTree = true
         }
+        if (this.currentStation == '' && index == 0) {
+          item.expand = true
+        }
         item.children.forEach((val, i,valArr) => {
           val.expand = false; //expand 是否展开直子节点 
           val.disabled = false; // disabled 是否禁止选中
@@ -131,60 +122,73 @@ export default {
             val.disabled = true; // disabled 是否禁止选中 
             val.expand = true;
             item.expand = true;
-            this.treeName.push(item.title)
-            this.treeName.push(val.title)
             this.currentStaData.push(val)
-            this.preTreeName = this.treeName
             this.showTree = true
           }
+          if (this.currentStation == '' && i==0) {
+            val.expand = true
+          }
           val.children.forEach ((lastVal,lastIndex) => {
             lastVal.selected = false; //expand 是否展开直子节点 
             lastVal.disabled = false; 
             lastVal.expand = false;
-            if (this.currentStation =='合肥轨道交通' || this.currentStation =='') {
-              itemArr[index].selected = true
-              itemArr[index].disabled = true
-              itemArr[index].expand = true
-              valArr[index].expand = true
-              this.showTree = true
-              this.currentStation = '合肥轨道交通'
-              this.treeName = ['合肥轨道交通']
-            }
             if (lastVal.title == this.currentStation) {
               lastVal.selected = true;
               lastVal.disabled = true; // disabled 是否禁止选中 
               lastVal.expand = true;
               val.expand = true
               item.expand = true
-              this.treeName.push(item.title)
-              this.treeName.push(val.title)
-              this.treeName.push(lastVal.title)
               this.currentStaData.push(lastVal)
-              this.preTreeName = this.treeName
               this.showTree = true
             } 
           })
         });
-      });		
-      if (!this.showTree) {
-        this.treeName = this.preTreeName
-      }
-      this.$nextTick(()=> {
-        if (this.initActive == 'year') {
-          this.$refs.longForecast.getTitle(this.pamData)
-        } else {
-          this.$refs.forecast.getTitle(this.pamData)
-        }
-      })
-		}, 500),
-    treeChange(val,arr) {
+      });
+    },
+    treeChange(val,arr,level) {
       this.currentStation = val
-      this.treeName = arr
-      this.preTreeName = arr
+      if (this.currentTabs == '设备管理') {
+        
+      } else if(this.currentTabs == '设备类型管理'){
+        this.$nextTick(()=> {
+          this.$refs.deviceType.getTableData(this.currentStation,arr,level)
+        })
+      }
 		},
     tabsClick (name) {
       this.currentTabs = name
-    }
+      this.stationData = this.getElseTree(this.stationData) // 切换tab页时，清除tree选中情况
+      this.currentStation = ''
+      if (this.currentTabs == '设备管理') {
+         this.$nextTick(()=> {
+          //  this.getMetroLevel()
+           this.$refs.device.getType()
+           this.$refs.device.getTableData()
+        })
+      } else if(this.currentTabs == '设备类型管理'){
+        this.$nextTick(()=> {
+          this.$refs.deviceType.getTableData()
+        })
+      }
+    },
+    changeTree () {
+     this.getMetroLevel()
+    },
+    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
+    getElseTree(arr) {
+      return arr.map((v,index) => {
+        if (v.title==this.currentStation) {
+          v.selected = false
+        }
+        if (index == 0) {
+          v.expand = true
+        } else {
+          v.expand = false
+        }
+        if (v.children) v.children = this.getElseTree(v.children);
+        return v;
+      });
+    },
   }
 };
 </script>

src/views/homecomponents/BasicInfomation/DeviceManageIndex.vue

@@ -0,0 +1,704 @@
+<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="selectLine">
+              <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{ item.lineName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="stationId">
+            <Select v-model="tableParams.stationId" placeholder="站点">
+              <Option v-for="item in stationTypeData" :value="String(item.id)" :key="item.id">{{ item.stationName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentStatus">
+            <Select v-model="tableParams.equipmentStatus" placeholder="设备状态">
+                <Option v-for="item in equipStateData" :value="item.id" :key="item.id">{{ item.value }}</Option>
+            </Select>
+          </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" class="common-date-picker date-picker-main" placement="bottom-end" placeholder="启用日期范围" @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="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-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
+           </Tooltip>
+           <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>
+    <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator class="common-page"/>
+    <Modal
+      v-model="showModal"
+      :title="title"
+      width="34"
+      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="设备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="formOption.equipmentName" maxlength="100" show-word-limit />  
+        </FormItem>
+        <FormItem label="设备类型：" prop="equipmentType" style="width:48%">
+          <Select v-model="formOption.equipmentType" placeholder="设备类型">
+             <Option v-for="item in equipTypeModalData" :value="item.id" :key="item.id">{{ item.name }}</Option>
+          </Select>
+        </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">
+           <DatePicker type="date" :value="formOption.useDate" :clearable="false" class="common-date-picker" placement="bottom-end" 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 == '说明' && item.value.length%2!=0,'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}">
+            <span class="modal-content-item-name">
+            {{val.name}}
+            </span>
+            <span class="modal-content-item-value" v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+            <span class="modal-content-item-value" v-else>{{val.value}}</span>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {lineId: '',stationId: '',equipmentName: '',equipmentType:'',equipmentStatus: '',equipmentVersion: '',supplier: '',remark: ''}
+export default {
+  name: "DeviceManageIndex",
+  components:{
+  },
+  data() {
+    return {
+      loading: true,
+      dateRange: [],
+      tableParams: {
+        lineId: '',
+        stationId: '',
+        equipmentStatus: '',
+        equipmentType: '',
+        useDateBegin: '',
+        useDateEnd: '',
+        equipmentName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      rowObj: {},
+      lineTypeData: [],
+      stationTypeData: [],
+      equipStateData: [],
+      equipStateModalData: [],
+      equipTypeData: [],
+      equipTypeModalData: [],
+      columns: [
+          {
+            title: '设备ID',
+            key: 'equipmentId',
+            align: 'center'
+          },
+          {
+            title: '设备名称',
+            key: 'equipmentName',
+            align: 'center'
+          },
+          {
+            title: '设备类型',
+            key: 'equipmentTypeName',
+            align: 'center'
+          },
+          {
+            title: '归属应用',
+            key: 'appName',
+            align: 'center'
+          },
+          {
+            title: '归属线路',
+            slot: 'lineName',
+            align: 'center'
+          },
+          {
+            title: '归属站点',
+            align: 'center',
+            slot: 'stationName',
+            // ellipsis: true,
+            // tooltip: true
+          },
+          {
+            title: '设备状态',
+            key: 'equipmentStatusValue',
+            align: 'center'
+          },
+          {
+            title: '启用日期',
+            key: 'useDate',
+            align: 'center'
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 120,
+        }
+      ],
+      showModal: false,
+      detailStatus: false, 
+      modalStatus: false,
+      title: '新增设备',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {lineId: '',stationId: '',equipmentName: '',equipmentType:'',equipmentStatus: '',useDate:'',equipmentVersion: '',supplier: '',remark: ''},
+      ruleValidate: {
+        lineId: [{
+          required: true,
+          message: '请选择所属线路',
+          trigger: 'change'
+        }],
+        stationId: [{
+          required: true,
+          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.getTableData()
+  },
+  methods: {
+    changePicker (date) {
+      this.tableParams.useDateBegin = date[0]
+      this.tableParams.useDateEnd = 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/equipment/queryEquipmentType', {name:''}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeModalData = JSON.parse(JSON.stringify(res.data))
+          this.equipTypeData = res.data
+          this.equipTypeData.unshift({ id: '-1', name: '设备类型' })
+        } else {
+          this.equipTypeData = []
+          this.equipTypeModalData = []
+        }
+      })
+    },
+    selectLine (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 () {
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.lineId = params.lineId == '-1' ? '':params.lineId
+      params.stationId = params.stationId == '-1' ?'':params.stationId
+      params.equipmentCheck = params.equipmentCheck == '-1' ?'':params.equipmentCheck
+      params.instrumentCheck = params.instrumentCheck == '-1' ?'':params.instrumentCheck
+      this.loading = true
+      this.$get('metroapi/equipment/queryEquipmentPage', 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.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
+      }
+    },
+    searchClick () {
+      this.getTableData()
+    },
+    resetClick (name) {
+     this.dateRange = []
+     this.tableParams.useDateBegin = ''
+     this.tableParams.useDateEnd = ''
+     this.$refs[name].resetFields()
+     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/lineStation/lineDetail', {lineId: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.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();
+     }
+    },
+    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: calc(100% - 50px);
+}
+.search-list {
+  display: flex;
+  padding: 10px 0;
+}
+.search-left {
+  display: flex;
+  align-items: center;
+   .ivu-select {
+     width: 150px;
+     padding-right: 10px;
+     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;
+  justify-content: space-between;
+}
+>>> .common-form-list .ivu-form-item {
+  margin-bottom: 0;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 150px);
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 51px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 51px;
+ }
+  >>> .ivu-spin-fix {
+   top: 51px;
+ }
+  >>> .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);
+ }
+ >>> .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;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+>>> .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: auto;
+  min-height: 45px;
+  border-bottom: 1px solid #21437B;
+  display: flex;
+  align-items: center;
+}
+>>> .item-especial .modal-content-item-value{
+  width: 75%;
+  height: auto;
+  min-height: 45px;
+  border-bottom: 1px solid #21437B;
+  display: flex;
+  align-items: center;
+  line-height: 22px;
+}
+>>> .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;
+}
+</style>

src/views/homecomponents/BasicInfomation/DeviceTypeManage.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="content-main common-scroll">
+    <div class="content-body">
+      <Row :gutter="8" style="width:100%;height:100%">
+        <i-col span="24" style="height:100%">
+          <div class="right-main">
+            <div class="manage-main-top">
+              <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" 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-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
+                  </Tooltip>
+                  <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>
+            <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator class="common-page"/>
+          </div>
+        </i-col>
+      </Row>
+    </div>
+     <Modal
+      v-model="showModal"
+      :title="title"
+      width="25"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      @on-visible-change="modalChange"
+      class-name="common-modal">
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
+				<FormItem label="类型名称：" prop="name">
+          <Input v-model="formOption.name" maxlength="20" show-word-limit />  
+				</FormItem>
+				<FormItem label="说明：" prop="remark">
+           <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>
+</div>
+</template>
+<script>
+const defaultFrom = {name: '',remark: ''}
+import _ from 'lodash'
+export default {
+  name: "DeviceTypeManage",
+  components:{
+  },
+  data() {
+    return {
+      tableTotal: 0,
+       tableParams: {
+        name: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      loading: true,
+      tableData: [],
+      columns: [
+          {
+            title: '设备类型名称',
+            key: 'name',
+            align: 'center'
+          },
+          {
+            title: '关联应用数量',
+            key: 'appCount',
+            align: 'center'
+          },
+          {
+            title: '接入设备数量',
+            key: 'equipmentCount',
+            align: 'center'
+          },
+          {
+            title: '监测指标',
+            key: ' targetCount',
+            align: 'center'
+          },
+          {
+            title: '操作',
+            align: 'center',
+            slot: 'action',
+          }
+      ],
+      rowObj: {},
+      formOption: {name: '',remark:''},
+      ruleValidate: {
+        name: [{
+          required: true,
+          message: '请输入应用名称',
+          trigger: 'change'
+        }],
+      }, 
+    equipTypeData: [],
+    showModal: false,
+    detailStatus: false, 
+    modalStatus: false,
+    title: '新增设备',
+    commonTitle: "确认删除",
+    activeColor: '#E92E2E',
+    activeClass: '',
+    modalTitle: '',
+    appNameObj: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appNameList: []
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    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()
+    },
+    getTableData (keywords,arr,level) {
+      if (level) {
+        this.tableParams.keywords = ''
+        if (level == 2) {
+          this.tableParams.applicationId = arr[arr.length-1]
+          this.tableParams.equipmentTypeId = ''
+        } else if (level == 3) {
+          this.tableParams.applicationId = arr[arr.length-2]
+          this.tableParams.equipmentTypeId = arr[arr.length-1]
+        } else {
+          this.tableParams.applicationId = ''
+          this.tableParams.applicationId = ''
+        }
+      } else {
+        this.tableParams.applicationId = ''
+        this.tableParams.equipmentTypeId = ''
+        if (keywords == '合肥轨道交通' || keywords == '' || keywords == undefined) {
+          this.tableParams.keywords = ''
+        } else {
+          this.tableParams.keywords = keywords
+        }
+      }
+      this.loading = true
+      this.$get('metroapi/equipment/queryEquipmentTypePage', this.tableParams).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.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    getType  () {
+      // 获取设备类型
+      this.$get('metroapi/equipment/queryEquipmentType', {name:''}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeData = res.data
+        } else {
+          this.equipTypeData = []
+        }
+      })
+      // 获取应用名称
+      this.$get('metroapi/application/info/list', this.appNameObj).then(res=>{
+          if (res.httpCode == 1 ){
+            this.appNameList = res.data.data
+          } else {
+            this.appNameList = []
+          }
+        })
+    },
+    addClick () {
+      this.title = '新增设备类型'
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+      this.showModal = true
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailStatus = true
+      this.$get('metroapi/lineStation/lineDetail', {lineId: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.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();
+     }
+    },
+    modalOk (formName) {
+       if (this.title == '新增设备类型') {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/equipment/addEquipmentType', this.formOption).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/editEquipmentType', this.formOption).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/delEquipmentType',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 {
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: auto;
+}
+.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;
+}
+.content-body {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+}
+.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;
+  // display: flex;
+}
+.station-tree-left {
+  height: 100%;
+  overflow: hidden;
+  overflow-y: 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;
+  position: relative;
+  // padding: 16px;
+}
+.manage-main-top {
+  padding: 12px 0;
+  display: flex;
+  justify-content: flex-end;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 100px);
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 54px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 54px;
+ }
+>>> .ivu-spin-fix {
+  top: 54px;
+  height: calc(100vh - 350px);
+}
+>>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+  height: calc(100vh - 350px);
+}
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+</style>

src/views/homecomponents/BasicInfomation/LineManage.vue

@@ -4,12 +4,11 @@
       <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" :row-class-name="rowClassName" :loading="loading">
+      <Table :columns="columns" :data="tableData" class="common-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
         <template slot="loading">
             <Loading-animation></Loading-animation>
         </template>
          <template slot-scope="{ row }" slot="action">
-          <div>
            <Tooltip content="详情" placement="top">
               <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
            </Tooltip>
@@ -19,7 +18,6 @@
            <Tooltip content="删除" placement="top">
               <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
            </Tooltip>
-          </div>
         </template>
       </Table>
     </div>
@@ -27,9 +25,10 @@
     <Modal
       v-model="showModal"
       :title="title"
-      width="34"
+      width="40"
       ref="modalGrag"
       draggable
+      reset-drag-position
       @on-visible-change="modalChange"
       :mask-closable="false"
       class-name="common-modal">
@@ -40,7 +39,7 @@
 				<FormItem label="线路名称：" prop="lineName">
           <Input v-model="formOption.lineName" maxlength="20" show-word-limit />
         </FormItem>
-        	<FormItem label="线路序号：" prop="lineSerial">
+        <FormItem label="线路序号：" prop="lineSerial">
           <InputNumber :max="99" :min="1" v-model="formOption.lineSerial" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
         </FormItem>
         <FormItem label="线路类型：" prop="lineType">
@@ -49,7 +48,7 @@
           </Select>
         </FormItem>
         <FormItem label="线路长度(km)：" prop="lineLength">
-          <Input type="number" placeholder="保留小数点后2位" v-model="formOption.lineLength" @input.native="checkNumber" />
+          <InputNumber v-model="formOption.lineLength" placeholder="保留2位小数" :precision="2" :active-change="false"></InputNumber>
         </FormItem>
         <FormItem label="运营机构：" prop="operatingGroup">
           <Input v-model="formOption.operatingGroup" maxlength="20" show-word-limit />
@@ -57,8 +56,8 @@
         <FormItem label="说明：" prop="remark">
           <Input v-model="formOption.remark" type="textarea" :rows="6" maxlength="200" show-word-limit />
         </FormItem>
-        <FormItem label="启用状态：" prop="station" v-show="title == '新增线路'">
-          <i-switch true-color="#57C44F" v-model="formOption.switch" disabled></i-switch>
+        <FormItem label="启用状态：" prop="enabled" v-if="title == '新增线路'">
+          <i-switch true-color="#57C44F" v-model="formOption.enabled" disabled></i-switch>
           <span style="color: #718EBD;margin-left:6px">关</span>
           <span style="color: #718EBD;margin-left:12px">（所有新增线路均为关闭，需在列表打开）</span>
         </FormItem>
@@ -74,6 +73,7 @@
       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" v-show="commonTitle!='确认删除'"></i>
@@ -90,6 +90,7 @@
       width="45"
       ref="modalGrag"
       draggable
+      reset-drag-position
       footer-hide
       :mask-closable="false"
       class-name="common-modal">
@@ -98,11 +99,12 @@
         <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.arr" :key="i" :class="{'modal-content-item-last': val.name == '说明'}">
+          <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': 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}">
             <span class="modal-content-item-name">
             {{val.name}}
             </span>
-            <span class="modal-content-item-value">4号线</span>
+            <span class="modal-content-item-value" v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+            <span class="modal-content-item-value" v-else>{{val.value}}</span>
           </div>
         </div>
       </div>
@@ -110,18 +112,17 @@
   </div>
 </template>
 <script>
+const defaultFrom = {lineName: '',lineSerial: null,lineType:null, lineLength:null,operatingGroup:'',remark:'',enabled:0}
 export default {
   name: "LineManage",
-  components:{
-  },
   data() {
     return {
       rowObj: {},
-      loading: false,
+      loading: true,
       tableParams: {
         lineName: '',
         pageNum: 1,
-        pageSize: 20
+        pageSize: 10
       },
       tableTotal: 0,
       tableData: [],
@@ -133,7 +134,7 @@ export default {
       activeColor: '#E92E2E',
       activeClass: '',
       modalTitle: '',
-      formOption: {lineName: '',lineSerial: null,lineType:null, lineLength:'',operatingGroup:'',remark:''},
+      formOption: {lineName: '',lineSerial: null,lineType:null, lineLength:null,operatingGroup:'',remark:'',enabled:0},
       ruleValidate: {
         lineName: [{
           required: true,
@@ -212,7 +213,7 @@ export default {
               }),
             ])
             }
-          },
+        },
         {
           title: '操作',
           align: 'center',
@@ -220,17 +221,13 @@ export default {
           width: 120,
         }
       ],
-      detailLabel: [{name:'基础信息',arr:[{name: '线路名称',value:0},{name: '线路序号',value:0},{name: '上级节点',value:0},{name: '启用状态',value:0},{name: '运营机构',value:0},{name: '线路类型',value:0},{name: '说明',value:0}]}]
+      detailLabel: []
     };
   },
   mounted() {
     this.getLineType()
-    this.getTableData()
   },
   methods: {
-      checkNumber:function(withdrawAmount){
-        this.formOption.lineLength= (this.formOption.lineLength.match(/^\d*(\.?\d{0,2})/g)[0]) || null                  
-    },
     rowClassName(row, index) {
       if (index % 2 == 0) {
         return "ivu-table-stripe-even";
@@ -241,12 +238,12 @@ export default {
     // 分页
     changePage (val) {
       this.tableParams.pageNum = val
-      // this.getTableData()
+      this.getTableData()
     },
     //跳转
     sizeChange (val) {
       this.tableParams.pageSize = val
-      // this.getTableData()
+      this.getTableData()
     },
     // 获取线路类型
     getLineType  () {
@@ -254,23 +251,31 @@ export default {
         if (res.httpCode == 1 ){
           this.lineTypeData = res.data
         } else {
-          this.$Message.info(res.msg)
+          this.lineTypeData = []
         }
       })
     },
     addClick () {
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
       this.title = '新增线路'
       this.showModal = true
-      this.$refs.modalGrag.dragData.x = null
-      this.$refs.modalGrag.dragData.y = null
     },
-    detailClick (row) {   
+    detailClick (row) {
+      this.$get('metroapi/lineStation/lineDetail', {lineId:row.id}).then(res=>{
+        if ( res.httpCode == 1 ){
+          this.detailLabel = res.data
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })   
       this.rowObj = row
       this.detailStatus = true
     },
     editClick (row) {
       this.rowObj = row
       this.formOption = JSON.parse(JSON.stringify(row));
+      this.formOption.lineSerial = Number(this.formOption.lineSerial)
+      this.formOption.lineLength = this.formOption.lineLength ? Number(this.formOption.lineLength):null;
       this.title = '编辑线路'
       this.showModal = true
     },
@@ -282,20 +287,29 @@ export default {
       this.modalTitle = '只能删除没有站点的线路，删除不影响已产生的操作和记录。'
       this.modalStatus = true
     },
+    //获取表格数据
     getTableData () {
       this.loading = true
-      this.$get('metroapi/lineStation/queryLine', this.tableParams).then(res=>{
+      this.$get('metroapi/lineStation/queryLinePage', 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 && this.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
           } else {
+            this.tableData = []
+            this.tableTotal = 0
             this.$Message.info(res.msg)
           }
         })
     },
-    modalChange () {
-     this.$refs.formOption.resetFields(); 
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
     },
     modalOk (formName) {
       if (this.title == '新增线路') {
@@ -311,25 +325,25 @@ export default {
               }
             })
           } else {
-            this.addModal = true
+            this.showModal = true
           }
        })
       } else {
-      //   this.$refs[formName].validate((valid) => {
-      //     if (valid) {
-      //       this.$post('metroapi/lineStation/addLine', this.formOption).then(res=>{
-      //         if ( res.httpCode == 1 ){
-      //           this.showModal = false
-      //           this.$Message.info(res.msg)
-      //           // this.getTableData()
-      //         } else {
-      //           this.$Message.info(res.msg)
-      //         }
-      //       })
-      //     } else {
-      //       this.addModal = true
-      //     }
-      //  })
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/lineStation/editLine', this.formOption).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 () {
@@ -337,17 +351,15 @@ export default {
     },
     commonOk () {
       if (this.commonTitle == '确认启用') {
-        this.rowObj.enabled = 1
         let params = {
           lineId: this.rowObj.id,
-          enabled: this.rowObj.enabled
+          enabled: 0
         }
         this.getSwitchStatus(params)
       } else if (this.commonTitle == '确认关闭') {
-        this.rowObj.enabled = 0
         let params = {
           lineId: this.rowObj.id,
-          enabled: this.rowObj.enabled
+          enabled:1
         }
         this.getSwitchStatus(params)
       } else {
@@ -364,8 +376,14 @@ export default {
     getSwitchStatus (params) {
       this.$get('metroapi/lineStation/enableLine',params).then(res=>{
         if (res.httpCode == 1 ){
+          if (params.enabled == 0) {
+            this.rowObj.enabled = 1
+          } else {
+            this.rowObj.enabled = 0
+          }
           this.modalStatus = false
         } else {
+          this.rowObj.enabled = 0
           this.$Message.info(res.msg)
         }
       })
@@ -400,23 +418,32 @@ export default {
 .manage-main-center {
   width: 100%;
   height: calc(100% - 100px);
+  position: relative;
 }
 .common-table {
   max-height: 100%;
 }
 >>> .common-table .ivu-table th {
-  height: 50px;
+  height: 52px;
  }
  >>> .common-table .ivu-table td {
-  height: 50px;
+  height: 55px;
  }
  >>> .ivu-spin-fix {
-   top: 50px;
+   top: 52px;
+   height: calc(100vh - 338px);
  }
+ >>> .ivu-table-tip {
+  height: calc(100vh - 338px);
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
 .common-page {
   margin-top: 15px;
   display: flex;
   justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
 }
 /* 对话框里的input里的placeholder样式修改 */
 /deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
@@ -451,7 +478,7 @@ export default {
   width: 50%;
   display: flex;
 }
->>> .modal-content-item-last {
+>>> .item-especial {
   width: 100%;
 }
 >>> .modal-content-item-name {
@@ -459,9 +486,8 @@ export default {
   height: 45px;
   line-height: 45px;
   background: #13305F;
-  border: 1px solid #21437B;
-  border-bottom: none;
-  border-right: none;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
   font-size: 14px;
   color: #F5F5F5;
   padding-left: 20px;
@@ -471,14 +497,13 @@ export default {
   height: 45px;
   line-height: 45px;
   background: #06214D;
-  border: 1px solid #21437B;
-  border-bottom: none;
-  border-right: none;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
   font-size: 14px;
   color: #F5F5F5;
   padding-left: 20px;
 }
->>> .modal-content-item-last .modal-content-item-name{
+>>> .item-especial .modal-content-item-name{
   width: 25%;
   height: auto;
   min-height: 45px;
@@ -486,7 +511,7 @@ export default {
   display: flex;
   align-items: center;
 }
->>> .modal-content-item-last .modal-content-item-value{
+>>> .item-especial .modal-content-item-value{
   width: 75%;
   height: auto;
   min-height: 45px;
@@ -495,4 +520,10 @@ export default {
   align-items: center;
   line-height: 22px;
 }
+>>> .item-especial-bot .modal-content-item-name {
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-bot .modal-content-item-value {
+  border-bottom: 1px solid #21437B;
+}
 </style>

src/views/homecomponents/BasicInfomation/LineStationManage.vue

@@ -4,30 +4,28 @@
       <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>
-      <line-manage v-show="currentTabs=='线路管理'"></line-manage>
-      <Row :gutter="8" style="width:100%;height: calc(100% - 50px)" v-show="currentTabs=='站点管理'">
-        <i-col span="6" style="height:100%">
+      <line-manage v-if="currentTabs=='线路管理'" ref="lineManage"></line-manage>
+      <Row :gutter="8" style="width:100%;height: calc(100% - 50px)" v-if="currentTabs=='站点管理'">
+        <i-col span="5" style="height:100%">
           <div class="station-tree">
             <div class="station-tree-body">
               <div class="station-tree-top">
-                <Input suffix="ios-search" placeholder="请输入地铁站台名" search v-model="currentStation" class="common-search"  @on-search="iconChange"/>
+                <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.length>0" @treeChange="treeChange" ref="tree"></tree-list>
+                  <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 class="station-tree-right">
-                </div>
               </div>
             </div>
           </div>
         </i-col>
-        <i-col span="18" style="height:100%">
+        <i-col span="19" style="height:100%">
           <div class="right-main">
-            <station-manage></station-manage>
+            <station-manage @changeTree="changeTree" ref="stationManage"></station-manage>
           </div>
         </i-col>
       </Row>
@@ -47,47 +45,32 @@ export default {
     return {
       currentStation: '',
       currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
-      treeName: ['合肥轨道交通'], // 当前选中的一级二级站台名
-      preTreeName:['合肥轨道交通'],
       showTree: true,// 是否显示树形组件
 		  stationData: [],
+      // stationDefaultData: [],
       tabsData: [{label:'线路管理'},{label:'站点管理'}],
       currentTabs: '线路管理'
     };
   },
   mounted() {
-    this.$get('metroapi/lineStation/lineStationTree').then(res => {
+    this.getMetroLevel()
+    this.$nextTick(()=> {
+      this.$refs.lineManage.getTableData()
+    })
+  },
+  methods: {
+    // 获取树形数据
+    getMetroLevel () {
+      this.$get('metroapi/lineStation/lineStationTree').then(res => {
 				if (res.httpCode == 1) {
           this.stationData = res.data
-          console.log(this.stationData)
-				// 	this.stationData[0].children = this.getTree(res.data)
-				// 	this.currentStaData = [{disabled: true,
-				// 		expand: true,
-				// 		children: [],
-				// 		id: 0,
-				// 		parent: null,
-				// 		selected: true,
-				// 		stationId: null,
-				// 		title: "合肥轨道交通"}]
-				// } else {
-				// 	this.stationData = [{disabled: true,
-				// 	expand: true,
-				// 	children: [],
-				// 	id: 0,
-				// 	parent: true,
-				// 	selected: true,
-				// 	stationId: null,
-				// 	title: "合肥轨道交通"}]
 				}
-		})
-  },
-  methods: {
+		  })
+    },
+    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
     getTree(arr) {
       return arr.map((v,index) => {
-        v.disabled = false
-        v.selected = false
-        v.expand = false
-        if (v.title == '1号线') {
+        if (index==0) {
           v.expand = true
         }
         if (v.children) v.children = this.getTree(v.children);
@@ -97,13 +80,27 @@ export default {
     iconChange: _.throttle(function() {
       this.currentStaData = []
       this.treeName = []
-      this.showTree = false		
+      this.$nextTick(()=> {
+        this.$refs.stationManage.getTableData(this.currentStation)
+      })
       if(this.currentStation != ''){
-        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = false
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
       } else {
-        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部   
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = true
+        this.stationData = this.getTree(this.stationData)
+        return 
       }
-      this.getPamData (this.currentStation)
+      this.getSelectedItem()
+		}, 500),
+    clearChange () {
+      this.getSelectedItem()
+      this.$nextTick(()=> {
+        this.$refs.stationManage.getTableData(this.currentStation)
+      })
+    },
+    getSelectedItem  () {
       this.stationData.forEach((item, index,itemArr) => {
         item.expand = false;
         item.disabled = false; 
@@ -112,11 +109,12 @@ export default {
             item.selected = true;
             item.disabled = true; // disabled 是否禁止选中 
             item.expand = true;
-            this.treeName.push(item.title)
             this.currentStaData.push(item)
-            this.preTreeName = this.treeName
             this.showTree = true
         }
+        if (this.currentStation == '' && index == 0) {
+          item.expand = true
+        }
         item.children.forEach((val, i,valArr) => {
           val.expand = false; //expand 是否展开直子节点 
           val.disabled = false; // disabled 是否禁止选中
@@ -126,59 +124,52 @@ export default {
             val.disabled = true; // disabled 是否禁止选中 
             val.expand = true;
             item.expand = true;
-            this.treeName.push(item.title)
-            this.treeName.push(val.title)
             this.currentStaData.push(val)
-            this.preTreeName = this.treeName
             this.showTree = true
           }
+          if (this.currentStation == '' && i==0) {
+            val.expand = true
+          }
           val.children.forEach ((lastVal,lastIndex) => {
             lastVal.selected = false; //expand 是否展开直子节点 
             lastVal.disabled = false; 
             lastVal.expand = false;
-            if (this.currentStation =='合肥轨道交通' || this.currentStation =='') {
-              itemArr[index].selected = true
-              itemArr[index].disabled = true
-              itemArr[index].expand = true
-              valArr[index].expand = true
-              this.showTree = true
-              this.currentStation = '合肥轨道交通'
-              this.treeName = ['合肥轨道交通']
-            }
             if (lastVal.title == this.currentStation) {
               lastVal.selected = true;
               lastVal.disabled = true; // disabled 是否禁止选中 
               lastVal.expand = true;
               val.expand = true
               item.expand = true
-              this.treeName.push(item.title)
-              this.treeName.push(val.title)
-              this.treeName.push(lastVal.title)
               this.currentStaData.push(lastVal)
-              this.preTreeName = this.treeName
               this.showTree = true
             } 
           })
         });
-      });		
-      if (!this.showTree) {
-        this.treeName = this.preTreeName
-      }
-      this.$nextTick(()=> {
-        if (this.initActive == 'year') {
-          this.$refs.longForecast.getTitle(this.pamData)
-        } else {
-          this.$refs.forecast.getTitle(this.pamData)
-        }
-      })
-		}, 500),
+      });
+    },
     treeChange(val,arr) {
       this.currentStation = val
-      this.treeName = arr
-      this.preTreeName = arr
+      this.$nextTick(()=> {
+        this.$refs.stationManage.getTableData(this.currentStation)
+      })
 		},
     tabsClick (name) {
       this.currentTabs = name
+      if (this.currentTabs == '线路管理') {
+         this.$nextTick(()=> {
+           this.getMetroLevel()
+           this.$refs.lineManage.getTableData()
+        })
+      } else {
+        this.$nextTick(()=> {
+          this.currentStation = ''
+          this.$refs.stationManage.getTableData(this.currentStation)
+          this.$refs.stationManage.getType()
+        })
+      }
+    },
+    changeTree () {
+     this.getMetroLevel()
     }
   }
 };
@@ -188,6 +179,7 @@ export default {
   width: 100%;
   height: calc(100% - 50px);
   overflow: auto;
+  position: relative;
 }
 .content-body {
   width: 100%;

src/views/homecomponents/BasicInfomation/StationManage.vue

@@ -4,12 +4,14 @@
       <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" :row-class-name="rowClassName" :loading="loading">
+      <Table :columns="columns" :data="tableData" class="common-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
         <template slot="loading">
             <Loading-animation></Loading-animation>
         </template>
+        <template slot-scope="{ row }" slot="transfer">
+          <span>{{row.transfer==1 ? '是' : '否'}}</span>
+        </template>
          <template slot-scope="{ row }" slot="action">
-          <div>
            <Tooltip content="详情" placement="top">
               <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
            </Tooltip>
@@ -19,7 +21,6 @@
            <Tooltip content="删除" placement="top">
               <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
            </Tooltip>
-          </div>
         </template>
       </Table>
     </div>
@@ -27,35 +28,53 @@
     <Modal
       v-model="showModal"
       :title="title"
-      width="34"
+      width="40"
       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">
-				<FormItem label="上级节点：">
-          <span>合肥轨道交通</span>
-				</FormItem>
-				<FormItem label="站点名称：" prop="lineName">
-          <Input v-model="formOption.lineName" maxlength="20" show-word-limit />
+				<FormItem label="所属线路：" prop="lineId">
+           <Select v-model="formOption.lineId" placeholder="请选择所属线路">
+              <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{item.lineName}}</Option>
+          </Select>
+        </FormItem>
+				<FormItem label="站点名称：" prop="stationName">
+          <Input v-model="formOption.stationName" maxlength="20" show-word-limit />
         </FormItem>
-        	<FormItem label="站点序号：" prop="lineSerial">
-          <InputNumber :max="99" :min="1" v-model="formOption.lineSerial" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
+        <FormItem label="站点序号：" prop="stationOrder" class="es-form-item">
+            <span class="es-form-item-label">线路编号：{{formOption.lineId}}</span>
+          <InputNumber :max="99" :min="1" v-model="formOption.stationOrder" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
         </FormItem>
-        <FormItem label="站点类型：" prop="lineType">
-           <Select v-model="formOption.lineType" placeholder="请选择站点类型">
-              <Option v-for="item in lineTypeData" :value="item.id" :key="item.id">{{ item.value }}</Option>
+        <FormItem label="是否换乘站：" prop="transfer">
+          <RadioGroup v-model="formOption.transfer">
+              <Radio :label="1">是</Radio>
+              <Radio :label="0">否</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="层数：" prop="floor">
+           <Select v-model="formOption.floor" placeholder="层数">
+              <Option v-for="item in floorData" :value="item.id" :key="item.id">{{ item.value }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="站点类型：" prop="stationType">
+           <Select v-model="formOption.stationType" placeholder="站点类型">
+              <Option v-for="item in stationTypeData" :value="item.id" :key="item.id">{{ item.value }}</Option>
           </Select>
         </FormItem>
-        <FormItem label="运营机构：" prop="operatingGroup">
-          <Input v-model="formOption.operatingGroup" maxlength="20" show-word-limit />
+        <FormItem label="建筑面积(㎡)：" prop="area">
+           <InputNumber v-model="formOption.area" placeholder="保留2位小数" :precision="2" :active-change="false"></InputNumber>
+        </FormItem>
+        <FormItem label="经度：" prop="lat">
+           <InputNumber v-model="formOption.lat" placeholder="保留6位小数" :precision="6" :active-change="false"></InputNumber>
         </FormItem>
-        <FormItem label="说明：" prop="remark">
-          <Input v-model="formOption.remark" type="textarea" :rows="6" maxlength="200" show-word-limit />
+        <FormItem label="纬度：" prop="lon">
+           <InputNumber v-model="formOption.lon" placeholder="保留6位小数" :precision="6" :active-change="false"></InputNumber>
         </FormItem>
-        <FormItem label="启用状态：" prop="station" v-show="title == '新增站点'">
-          <i-switch true-color="#57C44F" v-model="formOption.switch" disabled></i-switch>
+        <FormItem label="启用状态：" prop="station" v-if="title == '新增站点'">
+          <i-switch true-color="#57C44F" v-model="formOption.enabled" disabled></i-switch>
           <span style="color: #718EBD;margin-left:6px">关</span>
           <span style="color: #718EBD;margin-left:12px">（所有新增站点均为关闭，需在列表打开）</span>
         </FormItem>
@@ -68,9 +87,10 @@
     <Modal
       v-model="modalStatus"
       :title="commonTitle"
-      width="25"
+      width="30"
       ref="modalGrag"
       draggable
+      reset-drag-position
       :mask-closable="false"
       class-name="common-modal">
       <i :class="'iconfont '+ activeClass" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle!='确认删除'"></i>
@@ -81,12 +101,13 @@
           <Button type="primary" @click="commonOk">确定</Button>
         </div>
     </Modal>
-    <Modal
+     <Modal
       v-model="detailStatus"
       title="站点详情"
       width="45"
       ref="modalGrag"
       draggable
+      reset-drag-position
       footer-hide
       :mask-closable="false"
       class-name="common-modal">
@@ -95,11 +116,13 @@
         <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.arr" :key="i" :class="{'modal-content-item-last': val.name == '说明'}">
+          <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '设备总量' && item.value.length%2!=0,'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2)}">
             <span class="modal-content-item-name">
             {{val.name}}
             </span>
-            <span class="modal-content-item-value">4号线</span>
+            <span class="modal-content-item-value" v-if="val.name == '是否换乘站'">{{val.value==1 ? '是' : '否'}}</span>
+            <span class="modal-content-item-value" v-else-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+            <span class="modal-content-item-value" v-else>{{val.value}}</span>
           </div>
         </div>
       </div>
@@ -107,6 +130,7 @@
   </div>
 </template>
 <script>
+const defaultFrom = {lineId: '',stationName: '',stationOrder:null,transfer:0,floor:'',stationType:null,area: null,lat:null, lon:null,enabled:0}
 export default {
   name: "StationManage",
   components:{
@@ -114,11 +138,11 @@ export default {
   data() {
     return {
       rowObj: {},
-      loading: false,
+      loading: true,
       tableParams: {
         stationName: '',
         pageNum: 1,
-        pageSize: 20
+        pageSize: 10
       },
       tableTotal: 0,
       tableData: [],
@@ -130,25 +154,35 @@ export default {
       activeColor: '#E92E2E',
       activeClass: '',
       modalTitle: '',
-      formOption: {lineName: '',lineSerial: null,lineType:null, operatingGroup:'',remark:''},
+      formOption: {lineId: '',stationName: '',stationOrder:null,transfer:0,floor:'',stationType:null,area: null,lat:null, lon:null,enabled:0},
       ruleValidate: {
-        lineName: [{
+        lineId: [{
+          required: true,
+          message: '请选择所属线路',
+          trigger: 'change'
+        }],
+        stationName: [{
           required: true,
           message: '请输入站点名称',
           trigger: 'blur'
         }],
-        lineSerial: [{
+        stationOrder: [{
           required: true,
           type:'number',
           message: '请输入站点序号',
           trigger: 'blur'
+        }],
+        transfer: [{
+          required: true,
         }]
       }, 
       lineTypeData: [],
+      stationTypeData: [],
+      floorData: [],
       columns: [
         {
           title: '站点序号',
-          key: 'lineSerial',
+          key: 'stationOrder',
           align: 'center',
           width: 100,
         },
@@ -165,23 +199,23 @@ export default {
         },
         {
           title: '是否换乘站',
-          key: 'transfer',
+          slot: 'transfer',
           align: 'center',
         },
         {
           title: '站点类型',
-          key: 'stationType',
+          key: 'stationTypeValue',
           align: 'center',
         },
         {
           title: '层数',
-          key: 'address',
-          align: 'floor',
+          key: 'floorValue',
+          align: 'center',
         },
         {
           title: '建筑面积',
-          key: 'address',
-          align: 'area',
+          key: 'area',
+          align: 'center',
         },
         {
           title: '启用状态',
@@ -206,7 +240,7 @@ export default {
                         this.commonTitle = '确认关闭'
                         this.activeColor = '#E92E2E'
                         this.activeClass = 'icon-guanbi'
-                        this.modalTitle = '关闭后站点下所有站点将同时关闭，站点及站点统计数据不可见。'
+                        this.modalTitle = '关闭后站点下所有设备、仪表、客流统计数据将同时关闭，相关管理模块不可见。'
                         this.modalStatus = true
                       }
                     },
@@ -222,12 +256,10 @@ export default {
           width: 120,
         }
       ],
-      detailLabel: [{name:'基础信息',arr:[{name: '站点名称',value:0},{name: '站点序号',value:0},{name: '上级节点',value:0},{name: '启用状态',value:0},{name: '运营机构',value:0},{name: '站点类型',value:0},{name: '说明',value:0}]}]
+      detailLabel: []
     };
   },
   mounted() {
-    this.getLineType()
-    this.getTableData()
   },
   methods: {
     rowClassName(row, index) {
@@ -240,36 +272,62 @@ export default {
     // 分页
     changePage (val) {
       this.tableParams.pageNum = val
-      // this.getTableData()
+      this.getTableData()
     },
     //跳转
     sizeChange (val) {
       this.tableParams.pageSize = val
-      // this.getTableData()
+      this.getTableData()
     },
-    // 获取站点类型
-    getLineType  () {
-      this.$get('metroapi/dic/queryDictionary', {name:'站点类型'}).then(res=>{
+    getType  () {
+      //获取所属线路
+      this.$get('metroapi/lineStation/queryLine', {lineName:''}).then(res=>{
         if (res.httpCode == 1 ){
           this.lineTypeData = res.data
         } else {
-          this.$Message.info(res.msg)
+          this.lineTypeData = []
+        }
+      })
+      //获取站点类型
+      this.$get('metroapi/dic/queryDictionary', {name:'站点类型'}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.stationTypeData = res.data
+        } else {
+          this.stationTypeData = []
+        }
+      })
+      // 获取层数
+      this.$get('metroapi/dic/queryDictionary', {name:'层数'}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.floorData = res.data
+        } else {
+          this.floorData = []
         }
       })
     },
     addClick () {
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
       this.title = '新增站点'
       this.showModal = true
-      this.$refs.modalGrag.dragData.x = null
-      this.$refs.modalGrag.dragData.y = null
     },
-    detailClick (row) {   
+    detailClick (row) {
+      this.$get('metroapi/lineStation/stationDetail', {stationId:row.id}).then(res=>{
+        if ( res.httpCode == 1 ){
+          this.detailLabel = res.data
+        } else {
+          this.$Message.info(res.msg)
+        }
+      }) 
       this.rowObj = row
       this.detailStatus = true
     },
     editClick (row) {
       this.rowObj = row
       this.formOption = JSON.parse(JSON.stringify(row));
+      this.formOption.lineId = String(this.formOption.lineId)
+      this.formOption.area = !this.formOption.area ? this.formOption.area : Number(this.formOption.area)
+      this.formOption.lat = !this.formOption.lat ? this.formOption.lat : Number(this.formOption.lat)
+      this.formOption.lon = !this.formOption.lon ? this.formOption.lon : Number(this.formOption.lon)
       this.title = '编辑站点'
       this.showModal = true
     },
@@ -278,57 +336,68 @@ export default {
       this.commonTitle = '确认删除'
       this.activeColor = '#E92E2E'
       this.activeClass = ''
-      this.modalTitle = '只能删除没有站点的站点，删除不影响已产生的操作和记录。'
+      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复。请慎重操作。'
       this.modalStatus = true
     },
-    getTableData () {
+    getTableData (stationName) {
+      this.tableParams.stationName = stationName ? stationName : ''
       this.loading = true
-      this.$get('metroapi/lineStation/queryStation', this.tableParams).then(res=>{
+      this.$get('metroapi/lineStation/queryStationPage', this.tableParams).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.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
           } else {
+            this.tableData = []
+            this.tableTotal = 0
             this.$Message.info(res.msg)
           }
         })
     },
-    modalChange () {
-     this.$refs.formOption.resetFields(); 
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
     },
     modalOk (formName) {
       if (this.title == '新增站点') {
         this.$refs[formName].validate((valid) => {
           if (valid) {
-            this.$post('metroapi/lineStation/addLine', this.formOption).then(res=>{
+            this.$post('metroapi/lineStation/addStation', this.formOption).then(res=>{
               if ( res.httpCode == 1 ){
                 this.showModal = false
                 this.$Message.info(res.msg)
+                this.$emit('changeTree')
                 this.getTableData()
               } else {
                 this.$Message.info(res.msg)
               }
             })
           } else {
-            this.addModal = true
+            this.showModal = true
           }
        })
       } else {
-      //   this.$refs[formName].validate((valid) => {
-      //     if (valid) {
-      //       this.$post('metroapi/lineStation/addLine', this.formOption).then(res=>{
-      //         if ( res.httpCode == 1 ){
-      //           this.showModal = false
-      //           this.$Message.info(res.msg)
-      //           // this.getTableData()
-      //         } else {
-      //           this.$Message.info(res.msg)
-      //         }
-      //       })
-      //     } else {
-      //       this.addModal = true
-      //     }
-      //  })
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/lineStation/editStation', this.formOption).then(res=>{
+              if ( res.httpCode == 1 ){
+                this.showModal = false
+                this.$Message.info(res.msg)
+                this.$emit('changeTree')
+                this.getTableData()
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
       }
     },
     modalCancel () {
@@ -336,22 +405,22 @@ export default {
     },
     commonOk () {
       if (this.commonTitle == '确认启用') {
-        this.rowObj.enabled = 1
+        // this.rowObj.enabled = 1
         let params = {
-          lineId: this.rowObj.id,
-          enabled: this.rowObj.enabled
+          stationId: this.rowObj.id,
+          enabled: 0
         }
         this.getSwitchStatus(params)
       } else if (this.commonTitle == '确认关闭') {
-        this.rowObj.enabled = 0
+        // this.rowObj.enabled = 0
         let params = {
-          lineId: this.rowObj.id,
-          enabled: this.rowObj.enabled
+          stationId: this.rowObj.id,
+          enabled: 1
         }
         this.getSwitchStatus(params)
       } else {
         let params = {
-          lineId: this.rowObj.id
+          stationId: this.rowObj.id
         }
         this.delData(params)
       }
@@ -361,8 +430,13 @@ export default {
     },
     // 启用 关闭/接口
     getSwitchStatus (params) {
-      this.$get('metroapi/lineStation/enableLine',params).then(res=>{
+      this.$get('metroapi/lineStation/enableStation',params).then(res=>{
         if (res.httpCode == 1 ){
+          if (params.enabled == 0) {
+            this.rowObj.enabled = 1
+          } else {
+            this.rowObj.enabled = 0
+          }
           this.modalStatus = false
         } else {
           this.$Message.info(res.msg)
@@ -371,22 +445,23 @@ export default {
     },
     // 删除 关闭/接口
     delData (params) {
-      this.$get('metroapi/lineStation/delLine',params).then(res=>{
+      this.$get('metroapi/lineStation/delStation',params).then(res=>{
         if (res.httpCode == 1 ){
           this.modalStatus = false
+          this.$emit('changeTree')
           this.getTableData()
         } else {
           this.$Message.info(res.msg)
         }
       })
-    },
+    }
   }
 };
 </script>
 <style scoped lang="stylus">
 .manage-main {
  width: 100%;
- height: calc(100% - 50px);
+ height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
@@ -404,18 +479,26 @@ export default {
   max-height: 100%;
 }
 >>> .common-table .ivu-table th {
-  height: 50px;
+  height: 52px;
  }
  >>> .common-table .ivu-table td {
-  height: 50px;
+  height: 52px;
  }
  >>> .ivu-spin-fix {
-   top: 50px;
+  top: 52px;
+  height: calc(100vh - 355px);
  }
+  >>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+  height: calc(100vh - 370px);
+}
 .common-page {
   margin-top: 15px;
   display: flex;
   justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
 }
 /* 对话框里的input里的placeholder样式修改 */
 /deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
@@ -430,6 +513,16 @@ export default {
 /deep/ .ivu-input::-ms-input-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{  /* Internet Explorer 10-11 */
   color: #718EBD;
 }
+>>> .es-form-item .ivu-form-item-content{
+  display: flex;
+  justify-content: space-between;
+}
+>>> .es-form-item .es-form-item-label {
+  margin-right: 15px;
+}
+>>> .es-form-item .ivu-input-number  {
+  flex: 1;
+}
 >>> .common-modal-top-text {
   font-size: 14px;
   font-weight: bold;
@@ -450,7 +543,7 @@ export default {
   width: 50%;
   display: flex;
 }
->>> .modal-content-item-last {
+>>> .item-especial {
   width: 100%;
 }
 >>> .modal-content-item-name {
@@ -458,9 +551,8 @@ export default {
   height: 45px;
   line-height: 45px;
   background: #13305F;
-  border: 1px solid #21437B;
-  border-bottom: none;
-  border-right: none;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
   font-size: 14px;
   color: #F5F5F5;
   padding-left: 20px;
@@ -470,28 +562,31 @@ export default {
   height: 45px;
   line-height: 45px;
   background: #06214D;
-  border: 1px solid #21437B;
-  border-bottom: none;
-  border-right: none;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
   font-size: 14px;
   color: #F5F5F5;
   padding-left: 20px;
 }
->>> .modal-content-item-last .modal-content-item-name{
+>>> .item-especial .modal-content-item-name{
   width: 25%;
   height: auto;
   min-height: 45px;
-  border-bottom: 1px solid #21437B;
   display: flex;
   align-items: center;
 }
->>> .modal-content-item-last .modal-content-item-value{
+>>> .item-especial .modal-content-item-value{
   width: 75%;
   height: auto;
   min-height: 45px;
-  border-bottom: 1px solid #21437B;
   display: flex;
   align-items: center;
   line-height: 22px;
 }
+>>> .item-especial-bot .modal-content-item-name {
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-bot .modal-content-item-value {
+  border-bottom: 1px solid #21437B;
+}
 </style>

src/views/homecomponents/Content.vue

@@ -24,13 +24,10 @@ export default {
   watch: {
       '$route' (to, from) {
         this.menuName = JSON.parse(sessionStorage.getItem('menuNameArr'))
-        console.log('watch',this.menuName.length)
-        console.log(this.menuName)
       }
     },
   mounted() {
     this.menuName = JSON.parse(sessionStorage.getItem('menuNameArr'))
-    console.log('mounted',this.menuName.length)
   },
   methods: {
    

src/views/homecomponents/EquipmentAnalysis/AlarmHandling.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="container">
-    侧边栏
-  </div>
+<div>
+ <!-- <div class="container" style="height:100%;overflow-x: hidden;overflow-y: auto;">
+    <div style="height: 2000px;background:yellow;position:relative;overflow:auto">
+     <span style="height: 500px;background:red;display:block">fggggggggggg</span>
+     <span style="height: 500px;background:blue;display:block">fggggggggggg</span>
+    </div>
+  </div> -->
+</div>
 </template>
 <script>
 export default {

src/views/homecomponents/Head.vue

@@ -32,6 +32,7 @@
       width="400"
       ref="modalGragSign"
       draggable
+      reset-drag-position
       :mask-closable="false"
       class-name="common-modal">
       <Icon type="ios-information-circle" class="modal-icon" style="color: #ff8432;"></Icon>
@@ -125,8 +126,6 @@ export default {
     },
     signOut () {
       this.signOutModal = true
-      this.$refs.modalGragSign.dragData.x = null
-      this.$refs.modalGragSign.dragData.y = null
     },
     signOutOk () {
       utils.removeSessionData();

vue.config.js

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