设备管理

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2962009 */
-  src: url('iconfont.woff2?t=1638758253530') format('woff2'),
-       url('iconfont.woff?t=1638758253530') format('woff'),
-       url('iconfont.ttf?t=1638758253530') format('truetype');
+  src: url('iconfont.woff2?t=1639983196379') format('woff2'),
+       url('iconfont.woff?t=1639983196379') format('woff'),
+       url('iconfont.ttf?t=1639983196379') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,46 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shebeijiance:before {
+  content: "\e6a7";
+}
+
+.icon-gaojing:before {
+  content: "\e613";
+}
+
+.icon-tishi:before {
+  content: "\e671";
+}
+
+.icon-xiazai:before {
+  content: "\e60b";
+}
+
+.icon-lajitong:before {
+  content: "\e716";
+}
+
+.icon-gaojing1:before {
+  content: "\ec35";
+}
+
+.icon-tianjia:before {
+  content: "\e606";
+}
+
+.icon-gengzhenggonggao:before {
+  content: "\e600";
+}
+
+.icon-queren:before {
+  content: "\e605";
+}
+
+.icon-zhuanfafenxiang:before {
+  content: "\e661";
+}
+
 .icon-ditie:before {
   content: "\e60e";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,76 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "6462688",
+      "name": "设备检测",
+      "font_class": "shebeijiance",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "9349165",
+      "name": "告警",
+      "font_class": "gaojing",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "10666915",
+      "name": "提示",
+      "font_class": "tishi",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "1049941",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "4266165",
+      "name": "垃圾桶",
+      "font_class": "lajitong",
+      "unicode": "e716",
+      "unicode_decimal": 59158
+    },
+    {
+      "icon_id": "5767878",
+      "name": "告警",
+      "font_class": "gaojing1",
+      "unicode": "ec35",
+      "unicode_decimal": 60469
+    },
+    {
+      "icon_id": "10392620",
+      "name": "添加",
+      "font_class": "tianjia",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "12787443",
+      "name": "更正公告",
+      "font_class": "gengzhenggonggao",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "16136923",
+      "name": "确认",
+      "font_class": "queren",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "18729666",
+      "name": "转发 分享",
+      "font_class": "zhuanfafenxiang",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
       "icon_id": "18667131",
       "name": "地铁",
       "font_class": "ditie",

src/assets/styles/common.css

@@ -154,14 +154,14 @@ html,body{
 /* 滚动条 webkit内核 start  .ivu-cascader-menu 级联下拉列表里的滚动条 .ivu-select-dropdown 单个下拉列表里的滚动条 .common-modal-tabs .ivu-tabs-tabpane详情对话框里的滚动条*/
 .common-scroll::-webkit-scrollbar,
 .ivu-select-dropdown::-webkit-scrollbar {
-  height: 5px;
-  width: 5px;
+  height: 8px;
+  width: 8px;
   opacity: 0.6;
 }
 
 .common-scroll::-webkit-scrollbar-track,
 .ivu-select-dropdown::-webkit-scrollbar-track {
-  background-color: rgba(39, 76, 136, 0.3);
+  background-color: rgba(39, 76, 136, 0.4);
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
@@ -325,7 +325,7 @@ html,body{
   height: 32px;
   line-height: 30px;
   margin-right: 4px;
-  font-size: 12px;
+  font-size: 14px;
 }
 .common-page .ivu-page-item {
   background-color: #154086;
@@ -334,7 +334,7 @@ html,body{
   height: 32px;
   line-height: 30px;
   margin-right: 4px;
-  font-size: 12px;
+  font-size: 14px;
 }
 .common-page .ivu-page-item a, .common-page .ivu-page-item:hover a {
   color: #fff;
@@ -352,13 +352,14 @@ html,body{
   color: #fff;
   height: 32px;
   line-height: 32px;
+  font-size: 14px;
 }
 .common-page .ivu-page-options-elevator input {
   background-color: #154086;
   border: none;
   color: #fff;
   padding: 4px 7px;
-  font-size: 12px;
+  font-size: 14px;
   min-width: 50px;
   height: 32px;
 }
@@ -370,6 +371,11 @@ html,body{
   height: 32px;
   line-height: 30px;
 }
+.common-page .ivu-page-total {
+  height: 32px;
+  line-height: 32px;
+  color: #fff;
+}
 /* Tooltip的样式 */
 .ivu-tooltip-inner {
   background-color: #335493;

src/components/common/TreeList.vue

@@ -206,11 +206,11 @@ export default {
   width: 15px;
 }
 >>> .ivu-tree-children li {
-  width: 100%;
+  // width: 100%;
 }
 >>> .ivu-tree-title {
   color: #fff;
-  width: 94%;
+  min-width: 90%;
   padding: 6px 4px;
   vertical-align: middle;
 }

src/login/Login.vue

@@ -6,12 +6,12 @@
           <div class="login-body-title">登录入口</div>
             <Form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm">
               <FormItem prop="userName">
-                <Input type="text" placeholder="输入用户名" v-model="loginForm.userName"  class="login-input">
+                <Input type="text" placeholder="输入用户名" v-model.trim="loginForm.userName"  class="login-input">
                   <i class="iconfont icon-people" slot="prefix"></i>
                 </Input>
               </FormItem>
               <FormItem prop="password">
-                <Input type="password" placeholder="输入密码" v-model="loginForm.password" class="login-input" @keyup.enter.native="handleLogin('loginForm')">
+                <Input type="password" placeholder="输入密码" v-model.trim="loginForm.password" class="login-input" @keyup.enter.native="handleLogin('loginForm')">
                   <i class="iconfont icon-suoding" slot="prefix"></i>
                 </Input>
               </FormItem>

src/router/index.js

@@ -8,6 +8,8 @@ const HomePage = ()=>import('@/views/homecomponents/HomePage.vue')
 const EquipmentMonitor = ()=>import('@/views/homecomponents/EquipmentAnalysis/EquipmentMonitor.vue')
 const AlarmMonitor = ()=>import('@/views/homecomponents/EquipmentAnalysis/AlarmMonitor.vue')
 const AlarmHandling = ()=>import('@/views/homecomponents/EquipmentAnalysis/AlarmHandling.vue')
+const PolicyConfigManage = ()=>import('@/views/homecomponents/EquipmentAnalysis/PolicyConfigManage.vue')
+const ComprehensiveQuery = ()=>import('@/views/homecomponents/EquipmentAnalysis/ComprehensiveQuery.vue')
 const LineStationManage = ()=>import('@/views/homecomponents/BasicInfomation/LineStationManage.vue')
 const ApplicationManage = ()=>import('@/views/homecomponents/BasicInfomation/ApplicationManage.vue')
 const DeviceManage = ()=>import('@/views/homecomponents/BasicInfomation/DeviceManage.vue')
@@ -55,6 +57,16 @@ const routes = [
         name: 'AlarmHandling', 
         component: AlarmHandling
       },
+      {
+        path: 'PolicyConfigManage', 
+        name: 'PolicyConfigManage', 
+        component: PolicyConfigManage
+      },
+      {
+        path: 'ComprehensiveQuery', 
+        name: 'ComprehensiveQuery', 
+        component: ComprehensiveQuery
+      },
       // 基础信息
       {
         path: 'LineStationManage', 
@@ -63,6 +75,7 @@ const routes = [
       },
       {
         path: 'ApplicationManage', 
+        // path: '/MainPage/ApplicationManage/:type?', 
         name: 'ApplicationManage', 
         component: ApplicationManage
       },

src/views/MainPage.vue

@@ -43,10 +43,10 @@ export default {
       // }
       sessionStorage.setItem('id', id);
     },
-    getMenuName (arr) {
-      console.log(arr)
-      // this.menuName = arr
-    }
+    // getMenuName (arr) {
+    //   // console.log(arr)
+    //   // this.menuName = arr
+    // }
   }
 };
 </script>

src/views/homecomponents/BasicInfomation/ApplicationEquip.vue

@@ -36,7 +36,13 @@
                 </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 class="common-page">
+              <div class="common-page-total">
+                共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+              </div>
+              <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+            </div>
+            <!-- <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>
@@ -99,6 +105,7 @@ export default {
       showTree: true,// 是否显示树形组件
 		  stationData: [],
       tableTotal: 0,
+      tablePage: 0,
       tableParams: {
         applicationId:'',
         equipmentTypeId: '',
@@ -163,6 +170,7 @@ export default {
     };
   },
   mounted() {
+    document.querySelector(".common-scroll").scrollTo(0, 0) 
     this.getMetroLevel()
   },
   methods: {
@@ -300,6 +308,9 @@ export default {
         } else {
           this.tableParams.keywords = this.currentStation
         }
+        // if (this.$route.params.type) {
+        //   this.currentStation = '合肥轨道交通'
+        // }
       }
       this.loading = true
       this.$get('metroapi/application/equipmentTypeInfo', this.tableParams).then(res=>{
@@ -307,6 +318,11 @@ export default {
           if ( res.httpCode == 1 ){
             this.tableData = res.data.data
             this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
             if (res.data.data.length==0 && this.tableParams.pageNum>1) {
               this.tableParams.pageNum--
               return this.getTableData()
@@ -426,8 +442,7 @@ export default {
 }
 .station-tree-left {
   height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
+  overflow: auto;
 }
 .station-tree-left-notree {
   height: 100%;
@@ -475,9 +490,18 @@ export default {
 .common-page {
   margin-top: 15px;
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
   right: 0;
 }
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
 </style>

src/views/homecomponents/BasicInfomation/ApplicationManage.vue

@@ -25,14 +25,47 @@ export default {
       currentTabs: '应用管理',
     };
   },
+  created () {
+  },
   mounted() {
-    this.$nextTick(()=> {
+    // if (this.$route.params.type) {
+    //   this.$nextTick(()=> {
+    //     sessionStorage.setItem("currentTabs",'应用-设备类型关联')
+    //       this.currentTabs = sessionStorage.getItem('currentTabs')
+    //       this.$refs.equip.getTableData()
+    //       this.$refs.equip.getType()
+    //     })
+    // } else {
+    //   if (sessionStorage.getItem('currentTabs') == '应用-设备类型关联') {
+    //     this.$nextTick(()=> {
+    //       this.currentTabs = sessionStorage.getItem('currentTabs')
+    //       this.$refs.equip.getTableData()
+    //       this.$refs.equip.getType()
+    //     })
+    //     } else {
+    //       this.$refs.station.getTableData()
+    //       this.$refs.station.getType()
+    //     }
+    // }
+    this.currentTabs = sessionStorage.getItem('currentTabs') || '应用管理'
+    if (sessionStorage.getItem('currentTabs') == '应用-设备类型关联') {
+      this.$nextTick(()=> {
+        this.$refs.equip.getTableData()
+        this.$refs.equip.getType()
+      })
+    } else {
       this.$refs.station.getTableData()
       this.$refs.station.getType()
-    })
+    }
+  },
+  // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
   },
   methods: {
     tabsClick (name) {
+      sessionStorage.setItem("currentTabs",name)
       this.currentTabs = name
       if (this.currentTabs == '应用管理') {
          this.$nextTick(()=> {
@@ -41,7 +74,7 @@ export default {
         })
       } else {
         this.$nextTick(()=> {
-          this.$refs.equip.getTableData(this.currentStation)
+          this.$refs.equip.getTableData()
           this.$refs.equip.getType()
         })
       }
@@ -53,7 +86,8 @@ export default {
 .content-main {
   width: 100%;
   height: calc(100% - 50px);
-  overflow: auto;
+  // overflow: auto;
+  overflow: hidden;
 }
 .content-body-wrap {
   width: 100%;

src/views/homecomponents/BasicInfomation/ApplicationStation.vue

@@ -28,6 +28,9 @@
               <Option v-for="item in instrumentData" :value="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>
           </FormItem>
+          <FormItem label="" prop="keywords">
+            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+          </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
               <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
@@ -60,11 +63,16 @@
         </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 class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
     <Modal
       v-model="showModal"
       :title="title"
-      width="34"
+      width="36"
       ref="modalGrag"
       draggable
       reset-drag-position
@@ -87,7 +95,8 @@
           <span v-show="title=='编辑应用'">{{formOption.appCode}}</span>
         </FormItem>
         <FormItem label="应用名称：" prop="appName">
-          <Input v-model="formOption.appName" maxlength="100" show-word-limit />  
+          <Input v-model="formOption.appName" type="textarea" :rows="3" maxlength="100" show-word-limit />
+          <!-- <Input v-model.trim="formOption.appName" maxlength="100" show-word-limit />   -->
         </FormItem>
         <!-- <FormItem label="层级：" prop="level">
           <Select v-model="formOption.level" placeholder="层级" @on-change="selectModalLevel" label-in-value>
@@ -132,10 +141,18 @@
         <div v-if="currentModalTabs =='基础信息'" class="modal-tabs-item">
           <div class="common-modal-content">
             <div class="modal-content-item" :class="{'item-especial': index == 1}" v-for="(item,index) in detailLabel" :key="index">
-              <span class="modal-content-item-name">
+              <div class="modal-content-item-name">
               {{item.name}}
-              </span>
-              <span class="modal-content-item-value">{{item.value}}</span>
+              </div>
+              <div class="modal-content-item-value"> 
+              <Tooltip placement="top-start" transfer max-width="350" v-if="item.value || item.value===0">
+                <span>{{item.value}}</span>
+                <div slot="content">
+                  <p>{{item.value}}</p>
+                </div>
+              </Tooltip>
+              <span v-else>{{item.value}}</span>
+            </div>             
             </div>
           </div>
       </div>
@@ -150,7 +167,7 @@
   </div>
 </template>
 <script>
-const defaultFrom = {appName: '',level:''}
+const defaultFrom = {appName: ''}
 export default {
   name: "ApplicationStation",
   components:{
@@ -174,11 +191,13 @@ export default {
         // stationId: '',
         equipmentCheck: '',
         instrumentCheck: '',
+        keywords: '',
         pageNum: 1,
         pageSize: 10
       },
       tableData: [],
       tableTotal: 0,
+      tablePage: 0,
       rowObj: {},
       // levelData: [],
       // lineTypeData: [],
@@ -268,7 +287,7 @@ export default {
       activeColor: '#E92E2E',
       activeClass: '',
       modalTitle: '',
-      formOption: {appName: '',level:''},
+      formOption: {appName: ''},
       ruleValidate: {
         // lineId: [{
         //   required: true,
@@ -394,6 +413,11 @@ export default {
           if (res.httpCode == 1 ){
             this.tableData = res.data.data
             this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
             if (res.data.data.length==0 && this.tableParams.pageNum>1) {
               this.tableParams.pageNum--
               return this.getTableData()
@@ -608,6 +632,10 @@ export default {
    .ivu-select-single .ivu-select-selection {
      height: 100%;
    }
+    >>> .ivu-input {
+     width: 150px;
+     height: 32px;
+   }
 }
 .manage-main-center {
   width: 100%;
@@ -649,11 +677,20 @@ export default {
 .common-page {
   margin-top: 15px;
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
   right: 0;
 }
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
 >>> .modal-tabs-item {
   margin-top: 10px;
 }
@@ -700,20 +737,17 @@ export default {
   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;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
 }
 </style>

src/views/homecomponents/BasicInfomation/DeviceManage.vue

@@ -55,6 +55,20 @@ export default {
   },
   mounted() {
     this.getMetroLevel()
+    this.currentTabs = sessionStorage.getItem('currentTabs') || '设备管理'
+    if (sessionStorage.getItem('currentTabs') == '设备类型管理') {
+       this.$nextTick(()=> {
+        this.$refs.deviceType.getTableData()
+      })
+    } else {
+      this.$refs.device.getType()
+      this.$refs.device.getTableData()
+    }
+  },
+  // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
   },
   methods: {
     // 获取树形数据
@@ -170,6 +184,8 @@ export default {
       }
 		},
     tabsClick (name) {
+      document.querySelector(".station-tree-left").scrollTo(0, 0) 
+      sessionStorage.setItem("currentTabs",name)
       this.currentTabs = name
       this.stationData = this.getElseTree(this.stationData) // 切换tab页时，清除tree选中情况
       this.currentStation = ''
@@ -193,6 +209,7 @@ export default {
       return arr.map((v,index) => {
         if (v.title==this.currentStation) {
           v.selected = false
+          v.disabled = false
         }
         if (index == 0) {
           v.expand = true
@@ -210,7 +227,7 @@ export default {
 .content-main {
   width: 100%;
   height: calc(100% - 50px);
-  overflow: auto;
+  overflow: hidden;
 }
 .common-search {
   width: 100%;
@@ -246,8 +263,7 @@ export default {
 }
 .station-tree-left {
   height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
+  overflow: auto;
 }
 .station-tree-left-notree {
   height: 100%;

src/views/homecomponents/BasicInfomation/DeviceManageIndex.vue

@@ -24,7 +24,7 @@
             </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>
+            <DatePicker type="daterange" :value="dateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-start" placeholder="启用日期范围" @on-change="changePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="equipmentName">
             <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.equipmentName" />
@@ -67,11 +67,16 @@
         </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 class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
     <Modal
       v-model="showModal"
       :title="title"
-      width="34"
+      width="36"
       ref="modalGrag"
       draggable
       reset-drag-position
@@ -91,7 +96,7 @@
         </FormItem>
         <FormItem label="归属应用：" prop="appId" style="width:48%">
            <Select v-model="formOption.appId" placeholder="归属应用" @on-change="selectModalApp">
-             <Option v-for="item in equipAppModalData" :value="String(item.id)" :key="item.id">{{ item.appName }}</Option>
+             <Option v-for="item in equipAppModalData" :value="item.id" :key="item.id">{{ item.appName }}</Option>
           </Select>
         </FormItem>
         <FormItem label="设备类型：" prop="equipmentType" style="width:48%">
@@ -104,7 +109,7 @@
           <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 />  
+          <Input v-model.trim="formOption.equipmentName" type="textarea" :rows="3" maxlength="100" show-word-limit />  
         </FormItem>
         <FormItem label="设备状态：" prop="equipmentStatus" style="width:48%">
           <Select v-model="formOption.equipmentStatus" placeholder="设备状态">
@@ -112,7 +117,7 @@
           </Select>
         </FormItem>
         <FormItem label="启用日期：" prop="useDate" style="width:48%">
-           <DatePicker type="date" :value="formOption.useDate" :clearable="false" class="common-date-picker" placement="bottom-end" placeholder="启用日期" style="width: 100%" @on-change="changeMoldaPicker"></DatePicker>
+          <DatePicker type="date" :value="formOption.useDate" :clearable="false" class="common-date-picker" placement="bottom-start" placeholder="启用日期" style="width: 100%" @on-change="changeMoldaPicker"></DatePicker>
         </FormItem>
          <FormItem label="设备型号：" prop="equipmentVersion" style="width:100%">
           <Input v-model="formOption.equipmentVersion" maxlength="20" show-word-limit />  
@@ -160,12 +165,21 @@
         <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">
+          <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '说明'||  val.name == '最后通讯时间' && item.value.length%2!=0,'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}">
+            <div class="modal-content-item-name">
             {{val.name}}
-            </span>
-            <span class="modal-content-item-value" v-if="val.name == '归属线路' || val.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
-            <span class="modal-content-item-value" v-else>{{val.value}}</span>
+            </div>
+            <div class="modal-content-item-value"> 
+              <Tooltip placement="top-start" transfer max-width="350" v-if="val.name == '归属线路' || val.name == '归属站点' || val.value || val.value===0">
+                <span v-if="val.name == '归属线路' || val.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+                <span v-else>{{val.value}}</span>
+                <div slot="content">
+                  <span v-if="val.name == '归属线路' || val.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+                  <span v-else>{{val.value}}</span>
+                </div>
+              </Tooltip>
+              <span v-else>{{val.value}}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -213,6 +227,7 @@ export default {
       },
       tableData: [],
       tableTotal: 0,
+      tablePage: 0,
       rowObj: {},
       lineTypeData: [],
       stationTypeData: [],
@@ -247,17 +262,23 @@ export default {
           {
             title: '归属应用',
             key: 'appName',
-            align: 'center'
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
           },
           {
             title: '归属线路',
             slot: 'lineName',
-            align: 'center'
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
           },
           {
             title: '归属站点',
             align: 'center',
             slot: 'stationName',
+            ellipsis: true,
+            tooltip: true
           },
           {
             title: '设备状态',
@@ -298,6 +319,7 @@ export default {
         }],
         appId: [{
           required: true,
+          type: 'number',
           message: '请选择归属应用',
           trigger: 'change'
         }],
@@ -329,9 +351,15 @@ export default {
   },
   mounted() {
     this.getType()
+    this.getAppApplicate()
     this.getTableData()
   },
   methods: {
+    go (){
+      // this.$router.push({path:'//ApplicationManage'})
+      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
+      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    },
     changePicker (date) {
       this.tableParams.useDateBegin = date[0]
       this.tableParams.useDateEnd = date[1]
@@ -376,24 +404,23 @@ export default {
         }
       })
       // 获取归属应用
-      this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+      // this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+      //   if (res.httpCode == 1 ){
+      //     this.equipAppModalData = res.data.data
+      //   } else {
+      //     this.equipAppModalData = []
+      //   }
+      // })
+    },
+    // 获取归属应用
+    getAppApplicate () {
+     this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
         if (res.httpCode == 1 ){
           this.equipAppModalData = res.data.data
         } else {
           this.equipAppModalData = []
         }
       })
-      //  // 获取设备类型
-      // 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) {
       // 获取站点类型
@@ -416,11 +443,11 @@ export default {
         })
       }
     },
-    selectChange (selection) {
-     console.log(selection)
-     let user = selection.map(item => item.id)
-     console.log(user)
-    },
+    // selectChange (selection) {
+    //  console.log(selection)
+    //  let user = selection.map(item => item.id)
+    //  console.log(user)
+    // },
     // 获取表格数据
     getTableData (keywords,arr,level) {
        if (level) {
@@ -447,12 +474,18 @@ export default {
       let params = JSON.parse(JSON.stringify(this.tableParams))
       params.lineId = params.lineId == '-1' ? '':params.lineId
       params.stationId = params.stationId == '-1' ?'':params.stationId
+      params.equipmentStatus = params.equipmentStatus == '-1' ?'':params.equipmentStatus
       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.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
             if (res.data.data.length==0 && this.tableParams.pageNum>1) {
               this.tableParams.pageNum--
               return this.getTableData()
@@ -493,12 +526,14 @@ export default {
     },
     searchClick () {
       this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
     },
     resetClick (name) {
      this.dateRange = []
      this.tableParams.useDateBegin = ''
      this.tableParams.useDateEnd = ''
      this.$refs[name].resetFields()
+     this.stationTypeData = [{ id: '-1', stationName: '站点' }]
      this.getTableData()
     },   
     changeMoldaPicker (val) {
@@ -513,7 +548,7 @@ export default {
       this.rowObj = row
       this.detailStatus = true
       this.$get('metroapi/equipment/equipmentDetail', {equipmentId:row.id}).then(res=>{
-        if ( res.httpCode == 1 ){
+        if (res.httpCode == 1 ){
           this.detailLabel = res.data
         } else {
           this.$Message.info(res.msg)
@@ -646,7 +681,7 @@ export default {
    }
    >>> .date-picker-main .ivu-date-picker-header {
     border-bottom: 0.0052083333rem solid #204384;
-}
+ }
 }
 .btn-container {
   display: flex;
@@ -701,11 +736,20 @@ export default {
 .common-page {
   margin-top: 15px;
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
   right: 0;
 }
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
 >>> .modal-tabs-item {
   margin-top: 10px;
 }
@@ -756,20 +800,15 @@ export default {
 }
 >>> .item-especial .modal-content-item-name{
   width: 25%;
-  height: auto;
-  min-height: 45px;
+  height: 45px;
+  line-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;
+  height: 45px;
+  line-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;
@@ -789,4 +828,12 @@ export default {
 /deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
   color: #718EBD;
 }
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
 </style>

src/views/homecomponents/BasicInfomation/DeviceTypeManage.vue

@@ -25,7 +25,12 @@
                 </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 class="common-page">
+              <div class="common-page-total">
+                共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+              </div>
+              <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+            </div>
           </div>
         </i-col>
       </Row>
@@ -33,7 +38,7 @@
      <Modal
       v-model="showModal"
       :title="title"
-      width="25"
+      width="36"
       ref="modalGrag"
       draggable
       reset-drag-position
@@ -42,7 +47,7 @@
       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 />  
+          <Input v-model.trim="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 /> 
@@ -88,8 +93,15 @@
           </div>
           <div class="common-modal-content" v-if="index==0">
             <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '说明' }">
-                <span class="modal-content-item-name">{{val.name}}</span>
-                <span class="modal-content-item-value">{{val.value}}</span>
+                <div class="modal-content-item-name">{{val.name}}</div>
+                <div class="modal-content-item-value">
+                  <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || (typeof(val.value)=='number' && val.value==0)">
+                  <span>{{val.value}}</span>
+                  <div slot="content">
+                    <span>{{val.value}}</span>
+                  </div>
+                </Tooltip>
+                </div>
             </div>
           </div>
       </div>
@@ -107,6 +119,7 @@ export default {
   data() {
     return {
       tableTotal: 0,
+      tablePage: 0,
       tableParams: {
         equipmentTypeId: '',
         applicationId: '',
@@ -120,7 +133,9 @@ export default {
           {
             title: '设备类型名称',
             key: 'name',
-            align: 'center'
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
           },
           {
             title: '关联应用数量',
@@ -230,7 +245,7 @@ export default {
 					pageSize: 10
 			},
       apiUrl: '',
-    appNameObj: {
+      appNameObj: {
         level: '',
         lineId: '',
         stationId: '',
@@ -290,6 +305,11 @@ export default {
           if ( res.httpCode == 1 ){
             this.tableData = res.data.data
             this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
             if (res.data.data.length==0 && this.tableParams.pageNum>1) {
               this.tableParams.pageNum--
               return this.getTableData()
@@ -442,7 +462,7 @@ export default {
 .content-main {
   width: 100%;
   height: calc(100% - 50px);
-  overflow: auto;
+  overflow: hidden;
 }
 .common-search {
   width: 100%;
@@ -478,8 +498,7 @@ export default {
 }
 .station-tree-left {
   height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
+  overflow: auto;
 }
 .station-tree-left-notree {
   height: 100%;
@@ -527,11 +546,20 @@ export default {
 .common-page {
   margin-top: 15px;
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
   right: 0;
 }
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
 >>> .common-modal-top-text {
   font-size: 14px;
   font-weight: bold;
@@ -603,4 +631,12 @@ export default {
 >>> .item-especial .modal-content-item-value {
   border-bottom: 1px solid #21437B;
 }
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
 </style>

src/views/homecomponents/BasicInfomation/LineManage.vue

@@ -21,7 +21,12 @@
         </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 class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
     <Modal
       v-model="showModal"
       :title="title"
@@ -37,7 +42,7 @@
           <span>合肥轨道交通</span>
 				</FormItem>
 				<FormItem label="线路名称：" prop="lineName">
-          <Input v-model="formOption.lineName" maxlength="20" show-word-limit />
+          <Input v-model.trim="formOption.lineName" maxlength="20" show-word-limit />
         </FormItem>
         <FormItem label="线路序号：" prop="lineSerial">
           <InputNumber :max="99" :min="1" v-model="formOption.lineSerial" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
@@ -100,11 +105,20 @@
         </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">
+            <div 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 class="modal-content-item-value"> 
+              <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                <span v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+                <span v-else>{{val.value}}</span>
+                <div slot="content">
+                  <span v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+                  <span v-else>{{val.value}}</span>
+                </div>
+              </Tooltip>
+              <span v-else>{{val.value}}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -125,6 +139,7 @@ export default {
         pageSize: 10
       },
       tableTotal: 0,
+      tablePage: 0,
       tableData: [],
       showModal: false,
       detailStatus: false, 
@@ -273,7 +288,6 @@ export default {
       this.$get('metroapi/lineStation/lineDetail', {lineId:row.id}).then(res=>{
         if ( res.httpCode == 1 ){
           this.detailLabel = res.data
-          console.log(this.detailLabel)
         } else {
           this.$Message.info(res.msg)
         }
@@ -305,6 +319,11 @@ export default {
           if (res.httpCode == 1 ){
             this.tableData = res.data.data
             this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
             if (res.data.data.length==0 && this.tableParams.pageNum>1) {
               this.tableParams.pageNum--
               return this.getTableData()
@@ -455,11 +474,20 @@ export default {
 .common-page {
   margin-top: 15px;
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
   right: 0;
 }
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
 /* 对话框里的input里的placeholder样式修改 */
 /deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
   color: #718EBD;
@@ -517,23 +545,15 @@ export default {
   font-size: 14px;
   color: #F5F5F5;
   padding-left: 20px;
+  overflow: hidden;
 }
 >>> .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;
@@ -541,4 +561,12 @@ export default {
 >>> .item-especial-bot .modal-content-item-value {
   border-bottom: 1px solid #21437B;
 }
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
 </style>

src/views/homecomponents/BasicInfomation/LineStationManage.vue

@@ -4,8 +4,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>
-      <line-manage v-if="currentTabs=='线路管理'" ref="lineManage"></line-manage>
-      <Row :gutter="8" style="width:100%;height: calc(100% - 50px)" v-if="currentTabs=='站点管理'">
+      <line-manage v-show="currentTabs=='线路管理'" ref="lineManage"></line-manage>
+      <Row :gutter="8" style="width:100%;height: calc(100% - 50px);" v-show="currentTabs=='站点管理'">
         <i-col span="5" style="height:100%">
           <div class="station-tree">
             <div class="station-tree-body">
@@ -47,16 +47,30 @@ export default {
       currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
       showTree: true,// 是否显示树形组件
 		  stationData: [],
-      // stationDefaultData: [],
       tabsData: [{label:'线路管理'},{label:'站点管理'}],
       currentTabs: '线路管理'
     };
   },
-  mounted() {
-    this.getMetroLevel()
-    this.$nextTick(()=> {
-      this.$refs.lineManage.getTableData()
-    })
+  created() {
+    if (sessionStorage.getItem('currentTabs') == '站点管理') {
+       this.$nextTick(()=> {
+        this.currentTabs = sessionStorage.getItem('currentTabs')
+        this.currentStation = ''
+        this.$refs.stationManage.getTableData()
+        this.$refs.stationManage.getType()
+        this.getMetroLevel()
+      })
+    } else {
+      this.getMetroLevel()
+      this.$nextTick(()=> {
+        this.$refs.lineManage.getTableData()
+      })
+    }
+  },
+  // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
   },
   methods: {
     // 获取树形数据
@@ -154,6 +168,7 @@ export default {
       })
 		},
     tabsClick (name) {
+      sessionStorage.setItem("currentTabs",name)
       this.currentTabs = name
       if (this.currentTabs == '线路管理') {
          this.$nextTick(()=> {
@@ -178,7 +193,7 @@ export default {
 .content-main {
   width: 100%;
   height: calc(100% - 50px);
-  overflow: auto;
+  overflow: hidden;
   position: relative;
 }
 .content-body {
@@ -212,12 +227,10 @@ export default {
 .station-tree-center {
   height: calc(100% - 32px);
   padding-top: 10px;
-  // display: flex;
 }
 .station-tree-left {
   height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
+  overflow: auto;
 }
 .station-tree-left-notree {
   height: 100%;

src/views/homecomponents/BasicInfomation/StationManage.vue

@@ -24,7 +24,13 @@
         </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 class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
+    <!-- <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"
@@ -42,7 +48,7 @@
           </Select>
         </FormItem>
 				<FormItem label="站点名称：" prop="stationName">
-          <Input v-model="formOption.stationName" maxlength="20" show-word-limit />
+          <Input v-model.trim="formOption.stationName" maxlength="20" show-word-limit />
         </FormItem>
         <FormItem label="站点序号：" prop="stationOrder" class="es-form-item">
             <span class="es-form-item-label">线路编号：{{formOption.lineId}}</span>
@@ -117,12 +123,22 @@
         </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)}">
-            <span class="modal-content-item-name">
+            <div 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-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
-            <span class="modal-content-item-value" v-else>{{val.value}}</span>
+            </div>
+             <div class="modal-content-item-value"> 
+              <Tooltip placement="top-start" transfer max-width="350" v-if="val.value ||val.value===0">
+               <span v-if="val.name == '是否换乘站'">{{val.value==1 ? '是' : '否'}}</span>
+               <span v-else-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+               <span v-else>{{val.value}}</span>
+                <div slot="content">
+                  <span v-if="val.name == '是否换乘站'">{{val.value==1 ? '是' : '否'}}</span>
+                  <span v-else-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+                  <span v-else>{{val.value}}</span>
+                </div>
+              </Tooltip>
+              <span v-else>{{val.value}}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -145,6 +161,7 @@ export default {
         pageSize: 10
       },
       tableTotal: 0,
+      tablePage: 0,
       tableData: [],
       showModal: false,
       detailStatus: false, 
@@ -197,6 +214,8 @@ export default {
           title: '所属线路',
           key: 'lineName',
           align: 'center',
+          ellipsis: true,
+          tooltip: true
         },
         {
           title: '是否换乘站',
@@ -348,6 +367,11 @@ export default {
           if ( res.httpCode == 1 ){
             this.tableData = res.data.data
             this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
             if (res.data.data.length==0 && this.tableParams.pageNum>1) {
               this.tableParams.pageNum--
               return this.getTableData()
@@ -367,8 +391,8 @@ export default {
     modalOk (formName) {
       let params = JSON.parse(JSON.stringify(this.formOption))
       params.area = params.area ? params.area.toFixed(2):params.area
-      params.lat = params.lat ? params.lat.toFixed(2):params.lat
-      params.lon = params.lon ? params.lon.toFixed(2):params.lon
+      params.lat = params.lat ? params.lat.toFixed(6):params.lat
+      params.lon = params.lon ? params.lon.toFixed(6):params.lon
       if (this.title == '新增站点') {
         this.$refs[formName].validate((valid) => {
           if (valid) {
@@ -491,7 +515,7 @@ export default {
  }
  >>> .common-table .ivu-spin-fix {
   top: 52px;
-  height: calc(100vh - 355px);
+  height: calc(100vh - 340px);
  }
   >>> .common-table .ivu-table-tip {
   background: url('../../../assets/images/noData.png') no-repeat center;
@@ -503,11 +527,20 @@ export default {
 .common-page {
   margin-top: 15px;
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
   right: 0;
 }
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
 /* 对话框里的input里的placeholder样式修改 */
 /deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
   color: #718EBD;
@@ -597,4 +630,12 @@ export default {
 >>> .item-especial-bot .modal-content-item-value {
   border-bottom: 1px solid #21437B;
 }
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
 </style>

src/views/homecomponents/Content.vue

@@ -71,6 +71,7 @@ export default {
 }
 .content-wrap {
   padding: 10px;
+  padding-right: 5px;
   // background: red;
 }
 </style>

src/views/homecomponents/EquipmentAnalysis/AlarmAcknowledgConfig.vue

@@ -0,0 +1,948 @@
+<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 indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</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="" 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="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="40"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      @on-visible-change="modalChange"
+      :mask-closable="false"
+      class-name="common-modal">
+      <div class="common-modal-top">
+        <span class="common-modal-top-text">基础信息</span>
+      </div>
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="95" label-position="left">
+        <FormItem label="策略名称" prop="name" style="width:100%">
+          <Input v-model.trim="formOption.name" maxlength="20" show-word-limit /> 
+        </FormItem>
+        <FormItem label="来源应用：" prop="equipmentType" style="width:100%">
+          <Select v-model="formOption.equipmentType" placeholder="来源应用">
+             <Option v-for="item in equipTypeModalData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="设备类型：" prop="equipmentType" style="width:100%">
+          <Select v-model="formOption.equipmentType" placeholder="设备类型">
+             <Option v-for="item in equipTypeModalData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
+          </Select>
+        </FormItem>
+			</Form>
+      <div class="common-modal-top">
+        <span class="common-modal-top-text">处理策略</span>
+      </div>
+      <Form ref="formDynamic" :model="formCustom" :label-width="0" class="strategy-form">
+        <Row v-for="(item, index) in formCustom.formDynamic" :key="index">
+          <Col span="4" :class="{'row-first': index == 0}" class="row-first-es">{{ item.name + (index + 1) }}</Col>
+          <Col span="4" :class="{'row-first': index == 0}" class="row-first-es row-second-es">告警等级</Col>
+          <Col span="5" :class="{'row-first': index == 0}" class="row-select">
+            <FormItem
+              :prop="'formDynamic.'+index+'.alarmType'" :rules="{required: true,message: '请选择告警等级',trigger: 'change'}">
+              <Select v-model="item.alarmType" style="width: 100%" placeholder="告警等级" :disabled="item.disabled">
+                <Option v-for="firstitem in indicatorsNum" :value="firstitem.value" :key="firstitem.value">{{ firstitem.label }}</Option>
+              </Select>
+            </FormItem>
+          </Col>
+          <Col span="5" :class="{'row-first': index == 0}" class="row-first-es">自动确认为</Col>
+          <Col span="5" :class="{'row-first': index == 0}" class="row-select row-es-last">
+            <FormItem
+              :prop="'formDynamic.'+index+'.alarmType'" :rules="{required: true,message: '请选择确认动作',trigger: 'change'}">
+              <Select v-model="item.alarmType" style="width: 100%" placeholder="确认动作" :disabled="item.disabled">
+                <Option v-for="firstitem in indicatorsNum" :value="firstitem.value" :key="firstitem.value">{{ firstitem.label }}</Option>
+              </Select>
+            </FormItem>
+          </Col>
+          <Col span="1" class="ivu-col-btn">
+          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#2DA0F8;padding-left:10px" @click="handleAdd('formDynamic')" v-if="index == formCustom.formDynamic.length - 1 &&title=='新增策略'"></i>
+          <i class="iconfont icon-shanchu ivu-col-del" style="cursor:pointer; color:#BC2020;padding-left:10px" v-if="title=='编辑策略'" @click="handleRemove(index)" disabled></i>
+          </Col>
+        </Row>
+        <!-- <div class="sub-add">
+          <span>新增一条子策略 子策略与现有子策略间为</span>
+           <FormItem prop="logical" :rules="{required: clickbtn==2 ? true: false,message: '请选择逻辑判断',trigger: 'change'}">
+            <Select v-model="formCustom.logical" placeholder="逻辑判断" style="width: 200px;padding: 0 6px">
+              <Option v-for="item in indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</Option> 
+            </Select>
+          </FormItem>
+          关系
+          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#43B843;padding-left:10px" @click="handleAddSub('formDynamic')"></i>
+        </div> -->
+      </Form>
+      <div slot="footer">
+          <Button @click="modalCancel">取消</Button>
+          <Button type="primary" @click="modalOk">确定</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.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+            <span class="modal-content-item-value" v-else>{{val.value}}</span>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',equipmentVersion: '',supplier: '',remark: ''}
+export default {
+  name: "AlarmAcknowledgConfig",
+  components:{
+  },
+  data() {
+    return {
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appParams: {
+        applicationId: '',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      loading: true,
+      dateRange: [],
+      tableParams: {
+        lineId: '',
+        stationId: '',
+        equipmentStatus: '',
+        keywords: '',
+        applicationId:'',
+        equipmentType: '',
+        useDateBegin: '',
+        useDateEnd: '',
+        equipmentName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      rowObj: {},
+      indicatorsNum: [
+         {
+          value: '-1',
+          label: '监测指标数量'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      lineTypeData: [],
+      stationTypeData: [],
+      equipStateData: [],
+      equipStateModalData: [],
+      equipTypeData: [],
+      equipTypeModalData: [],
+      equipAppModalData: [],
+      columns: [
+        //  {
+        //     type: 'selection',
+        //     width: 60,
+        //     align: 'center'
+        //   },
+          {
+            title: '来源应用',
+            key: 'equipmentName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '设备类型',
+            key: 'equipmentTypeName',
+            align: 'center'
+          },
+          {
+            title: '覆盖告警等级',
+            key: 'appName',
+            align: 'center'
+          },
+          {
+          title: '是否启用',
+          key: 'enabled',
+          align: 'center',
+          width: 120,
+          render: (h, params) => {
+            return h('div', [                             
+              h('i-switch', {
+                props: { value: params.row.enabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
+                },
+                nativeOn:{
+                    "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
+                      this.rowObj =  params.row
+                      if (params.row.enabled == 0) {
+                        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
+                      }
+                    },
+                  }
+                }),
+              ])
+            }
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 120,
+        }
+      ],
+      showModal: false,
+      detailStatus: false, 
+      modalStatus: false,
+      title: '新增策略',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',useDate:'',equipmentVersion: '',supplier: '',remark: ''},
+      ruleValidate: {
+        lineId: [{
+          required: true,
+          message: '请选择所属线路',
+          trigger: 'change'
+        }],
+        stationId: [{
+          required: true,
+          message: '请选择所属站点',
+          trigger: 'change'
+        }],
+        appId: [{
+          required: true,
+          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: [],
+      formCustom: {
+        formDynamic: [
+          {
+            name: "策略",
+            alarmType: "",
+          },
+        ],
+      },
+      clickbtn: 1, // 1点击策略增加按钮 2点击子策略增加按钮 3点击子策略删除按钮
+    };
+  },
+  mounted() {
+    this.getType()
+    this.getTableData()
+  },
+  methods: {
+    go (){
+      // this.$router.push({path:'//ApplicationManage'})
+      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
+      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    },
+    changePicker (date) {
+      this.tableParams.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/application/info/list', this.applicationParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipAppModalData = res.data.data
+        } else {
+          this.equipAppModalData = []
+        }
+      })
+      //  // 获取设备类型
+      // 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: '站点' })
+          }
+        })
+      }
+    },
+    // selectChange (selection) {
+    //  console.log(selection)
+    //  let user = selection.map(item => item.id)
+    //  console.log(user)
+    // },
+    // 获取表格数据
+    getTableData (keywords,arr,level) {
+       if (level) {
+        this.tableParams.keywords = ''
+        if (level == 2) {
+          this.tableParams.applicationId = arr[arr.length-1]
+          this.tableParams.equipmentType = ''
+        } else if (level == 3) {
+          this.tableParams.applicationId = arr[arr.length-2]
+          this.tableParams.equipmentType = arr[arr.length-1]
+        } else {
+          this.tableParams.applicationId = ''
+          this.tableParams.equipmentType = ''
+        }
+      } else {
+        this.tableParams.applicationId = ''
+        this.tableParams.equipmentType = ''
+        if (keywords == '合肥轨道交通' || keywords == '' || !keywords) {
+          this.tableParams.keywords = ''
+        } else {
+          this.tableParams.keywords = keywords
+        }
+      }
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.lineId = params.lineId == '-1' ? '':params.lineId
+      params.stationId = params.stationId == '-1' ?'':params.stationId
+      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
+      }
+    },
+    selectModalApp (val) {
+      this.appParams.applicationId = val
+      this.formOption.equipmentType = ''
+      if (val) {
+        this.getAddEquipType( this.appParams)
+      }
+    },
+    // 获取新增设备类型 
+    getAddEquipType (params) {
+      this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeModalData = res.data.data
+        } else {
+          this.equipTypeModalData = []
+        }
+      })
+    },
+    searchClick () {
+      this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
+    },
+    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.formCustom.formDynamic = [{
+            name: "策略",
+            alarmType: "",
+          }];
+      this.title = '新增策略'
+      this.showModal = true
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailStatus = true
+      this.$get('metroapi/equipment/equipmentDetail', {equipmentId:row.id}).then(res=>{
+        if ( res.httpCode == 1 ){
+          this.detailLabel = res.data
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    editClick (row) {
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row));
+      this.formOption.lineId = this.formOption.lineId ? String(this.formOption.lineId) : '-1'
+      this.formOption.stationId = this.formOption.stationId ? String(this.formOption.stationId) : '-1'
+      this.getStationData(this.formOption.lineId)
+      this.appParams.applicationId = this.formOption.appId
+      this.getAddEquipType(this.appParams)
+      this.title = '编辑策略'
+      this.showModal = true
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认删除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复，请慎重操作。'
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+      this.$refs.formDynamic.resetFields();
+     }
+    },
+    modalOk () {
+      var obj = Object.assign({}, this.formOption, this.formCustom); // 合并对象 注意目标对象自身也会改变。假设目标对象{}是之前里的对象，他的值跟obj一样
+      this.clickbtn = 1
+      this.$nextTick(()=> {
+        let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
+        params.lineId = params.lineId == '-1' ? '':params.lineId
+        params.stationId = params.stationId == '-1' ? '':params.stationId
+        // 多个form表单验证
+        const p1 = new Promise((resolve,reject)=>{
+        this.$refs['formOption'].validate(valid=>{
+                if(valid) resolve()
+            })
+        })
+        const p2 = new Promise((resolve,reject)=>{
+            this.$refs['formDynamic'].validate(valid=>{
+                if(valid) resolve()
+            })
+        })
+        if (this.title == '新增策略') {
+          Promise.all([p1,p2]).then(()=>{
+          console.log('验证通过,提交表单')      
+        })
+        //   this.$refs['formOption'].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['formOption'].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)
+        }
+      })
+    },
+    handleAdd(name) {
+      this.$nextTick(()=> {
+        this.$refs[name].validate((valid) => {
+        if (valid) { 
+          this.formCustom.formDynamic.push({
+            alarmType: "",
+            name: '策略'
+          });
+        }
+       });
+       console.log(this.formCustom.formDynamic)
+      }) 
+    },
+    handleRemove(i) {
+      if (this.formCustom.formDynamic.length == 1) {
+        this.$Message['error']({
+            background: true,
+            content: '请至少保留一条非空策略'
+        });
+      } else {
+        this.formCustom.formDynamic.splice(i,1)
+      }
+      // this.$nextTick(()=> {
+      //   this.formCustom.formDynamic[this.formCustom.formDynamic.length - 1].formItems.splice(i, 1) //因为删除选值的下拉框，没选值的下拉框的值会变成undefined 所以加个状态值（clickbtn=3）
+      // })
+      // this.formCustom.formDynamic[this.formCustom.formDynamic.length - 1].formItems[i].status = 0
+    },
+    // getTree(arr) {
+    //   return arr.map((v,index) => {
+    //     console.log(v)
+    //     if (v.baohan == undefined) {
+    //       console.log(34343)
+    //       v.baohan = ''
+    //     }
+    //     if (v.formItems) v.formItems = this.getTree(v.formItems);
+    //     return v;
+    //   });
+    // },
+  }
+};
+</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: 155px;
+     padding-right: 10px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 160px;
+     height: 32px;
+   }
+   >>> .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;
+ }
+  >>> .common-table .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);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  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;
+}
+>>> .strategy-form .ivu-col{
+  // position: initial;
+  color: #2B8EE2;
+  font-size: 14PX;
+}
+>>> .row-first-es {
+  border-left: 1px solid #21437B;
+  border-bottom: 1px solid #21437B;
+  border-right: 1px solid #21437B;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #13305F;
+}
+>>> .strategy-form .row-first{
+  border-top: 1px solid #21437B;
+}
+>>> .strategy-form .row-second-es {
+  border-left: none;
+}
+>>> .strategy-form .ivu-form-item{
+  height: 100%;
+  margin-bottom: 0;
+}
+
+>>> .strategy-form .row-es-text {
+  border-left: none;
+  border-bottom: 1px solid #21437B;
+  border-right: 1px solid #21437B;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #13305F;
+}
+>>> .row-select .ivu-form-item {
+  height: 100%;
+  border-bottom: 1px solid #21437B;
+   .ivu-form-item-content {
+   padding: 10px 5px;
+  }
+}
+>>> .strategy-form .row-es-last {
+
+  border-right: 1px solid #21437B;
+}
+>>> .ivu-col-del {
+  cursor:pointer;
+  color:#BC2020;
+  padding-left:10px;
+}
+>>> .strategy-form .ivu-col-btn {
+  display: flex;
+  align-items: center;
+  border-top: none;
+  border-bottom: none;
+}
+>>> .strategy-form .ivu-form-item-error-tip {
+ padding-left: 6px;
+}
+/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/EquipmentAnalysis/AlarmFilterConfig.vue

@@ -0,0 +1,754 @@
+<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="来源应用">
+              <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{ item.lineName }}</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="lineId">
+            <Select v-model="tableParams.lineId" placeholder="告警等级">
+              <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{ item.lineName }}</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="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="" 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="action">
+           <Tooltip content="编辑" placement="top">
+              <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
+           </Tooltip>
+           <Tooltip content="删除" placement="top">
+              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
+           </Tooltip>
+        </template>
+      </Table>
+    </div>
+    <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="supplier" style="width:100%">
+          <Input v-model="formOption.supplier" maxlength="20" show-word-limit />  
+        </FormItem>
+        <FormItem label="来源应用：" prop="appId" style="width:100%">
+           <Select v-model="formOption.appId" placeholder="来源应用" @on-change="selectModalApp">
+             <Option v-for="item in equipAppModalData" :value="String(item.id)" :key="item.id">{{ item.appName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="所属线路：" prop="lineId" style="width:48%">
+          <Select v-model="formOption.lineId" placeholder="线路" @on-change="selectModalLine" label-in-value>
+              <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{ item.lineName }}</Option>
+          </Select>
+				</FormItem>
+				<FormItem label="所属站点：" prop="stationId" style="width:48%">
+           <Select v-model="formOption.stationId" placeholder="站点" @on-change="selectModalStation" label-in-value>
+            <Option v-for="item in stationTypeData" :value="String(item.id)" :key="item.id">{{ item.stationName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="告警等级：" prop="equipmentType" style="width:100%">
+          <Select v-model="formOption.equipmentType" placeholder="告警等级">
+             <Option v-for="item in equipTypeModalData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
+          </Select>
+        </FormItem>
+         <FormItem label="过滤时间：" prop="dates" style="width:100%">
+          <DatePicker type="daterange" v-model="formOption.dates" style="width:100%" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-start" placeholder="过滤时间范围" @on-change="changeModalPicker"></DatePicker>
+        </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 = {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',equipmentVersion: '',supplier: '',remark: ''}
+export default {
+  name: "AlarmFilterConfig",
+  components:{
+  },
+  data() {
+    return {
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appParams: {
+        applicationId: '',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      loading: true,
+      dateRange: [],
+      tableParams: {
+        lineId: '',
+        stationId: '',
+        equipmentStatus: '',
+        keywords: '',
+        applicationId:'',
+        equipmentType: '',
+        useDateBegin: '',
+        useDateEnd: '',
+        equipmentName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      rowObj: {},
+      lineTypeData: [],
+      stationTypeData: [],
+      indicatorsNum: [
+         {
+          value: '-1',
+          label: '监测指标数量'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      strategyIndicNum: [
+         {
+          value: '-1',
+          label: '策略覆盖指标数量'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      strategyEquipNum: [
+         {
+          value: '-1',
+          label: '策略覆盖设备数量'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      lineTypeData: [],
+      stationTypeData: [],
+      equipStateData: [],
+      equipStateModalData: [],
+      equipTypeData: [],
+      equipTypeModalData: [],
+      equipAppModalData: [],
+      columns: [
+        //  {
+        //     type: 'selection',
+        //     width: 60,
+        //     align: 'center'
+        //   },
+          {
+            title: '等级判定策略名称',
+            key: 'equipmentId',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '来源应用',
+            key: 'equipmentName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '设备类型',
+            key: 'equipmentTypeName',
+            align: 'center'
+          },
+          {
+            title: '监测指标数量',
+            key: 'appName',
+            align: 'center'
+          },
+          {
+            title: '策略覆盖指标数量',
+            key: 'lineName',
+            align: 'center',
+            // width: 80,
+          },
+          {
+            title: '策略覆盖设备数量',
+            key: 'stationName',
+            align: 'center',
+            // width: 80,
+          },
+          {
+            title: '设备状态',
+            key: 'equipmentStatusValue',
+            align: 'center'
+          },
+          {
+          title: '是否启用',
+          key: 'enabled',
+          align: 'center',
+          width: 120,
+          render: (h, params) => {
+            return h('div', [                             
+              h('i-switch', {
+                props: { value: params.row.enabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
+                },
+                nativeOn:{
+                    "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
+                      this.rowObj =  params.row
+                      if (params.row.enabled == 0) {
+                        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
+                      }
+                    },
+                  }
+                }),
+              ])
+            }
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 120,
+        }
+      ],
+      showModal: false,
+      modalStatus: false,
+      title: '新增策略',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      dateModalRange: [],
+      formOption: {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',dates:[],equipmentVersion: '',supplier: '',remark: ''},
+      ruleValidate: {
+        appName: [{
+          required: true,
+          message: '请输入设备名称',
+          trigger: 'blur'
+        }],
+        dates: [{
+                  type: "array", required: true, message: '过滤时间',
+                  // fields: {
+                  //   0: {type: 'date', required: true, message: '过滤时间'},
+                  //   1: {type: 'date', required: true, message: '过滤时间'}
+                  // }
+              }]
+        //   required: true,
+        //   type: 'number',
+        //   message: '请选择',
+        //   trigger: 'change'
+        // }],
+        // useDate: [{
+        //   required: true,
+        //   type: 'date',
+        //    message: '请选择',
+        //   // validator: checkDate,
+        //   trigger: 'change'
+        // }],
+      },
+      formCustom: {
+        formDynamic: [
+          {
+            name: "策略",
+            formItems: [
+              {
+                logic: "",
+                baohan: "",
+                disabled: false,
+                sublogic: '',
+                status: 1
+              },
+            ],
+            text: "判定为",
+            alarmType: "",
+            disabled: false,
+          },
+        ],
+        logical : ''
+      },
+      clickbtn: 1, // 1点击策略增加按钮 2点击子策略增加按钮 3点击子策略删除按钮
+    };
+  },
+  mounted() {
+    this.getType()
+    this.getTableData()
+  },
+  methods: {
+    go (){
+      // this.$router.push({path:'//ApplicationManage'})
+      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
+      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    },
+    changePicker (date) {
+      this.tableParams.useDateBegin = date[0]
+      this.tableParams.useDateEnd = date[1]
+    },
+    changeModalPicker (date) {
+      this.formOption.dates = date
+      this.formOption.useDate = date[0]
+      this.formOption.endDate = date[1]
+    },
+    rowClassName(row, index) {
+      if (index % 2 == 0) {
+        return "ivu-table-stripe-even";
+      } else {
+        return "ivu-table-stripe-odd";
+      }
+    },
+    // 分页
+    changePage (val) {
+      this.tableParams.pageNum = val
+      this.getTableData()
+    },
+    //跳转
+    sizeChange (val) {
+      this.tableParams.pageSize = val
+      this.getTableData()
+    },
+    getType  () {
+      //获取所属线路
+      this.$get('metroapi/lineStation/queryLine', {lineName:''}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.lineTypeData = res.data
+          this.lineTypeData.unshift({ id: '-1', lineName: '线路' })
+          this.getStationData ('-1')
+        } else {
+          this.lineTypeData = []
+        }
+      })
+      // 获取设备状态
+      this.$get('metroapi/dic/queryDictionary', {name:'设备状态'}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipStateModalData = JSON.parse(JSON.stringify(res.data))
+          this.equipStateData = res.data
+          this.equipStateData.unshift({ id: '-1', value: '设备状态' })
+        } else {
+          this.equipStateData = []
+          this.equipStateModalData = []
+        }
+      })
+      // 获取归属应用
+      this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipAppModalData = res.data.data
+        } else {
+          this.equipAppModalData = []
+        }
+      })
+      //  // 获取设备类型
+      // 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: '站点' })
+          }
+        })
+      }
+    },
+    // selectChange (selection) {
+    //  console.log(selection)
+    //  let user = selection.map(item => item.id)
+    //  console.log(user)
+    // },
+    // 获取表格数据
+    getTableData (keywords,arr,level) {
+       if (level) {
+        this.tableParams.keywords = ''
+        if (level == 2) {
+          this.tableParams.applicationId = arr[arr.length-1]
+          this.tableParams.equipmentType = ''
+        } else if (level == 3) {
+          this.tableParams.applicationId = arr[arr.length-2]
+          this.tableParams.equipmentType = arr[arr.length-1]
+        } else {
+          this.tableParams.applicationId = ''
+          this.tableParams.equipmentType = ''
+        }
+      } else {
+        this.tableParams.applicationId = ''
+        this.tableParams.equipmentType = ''
+        if (keywords == '合肥轨道交通' || keywords == '' || !keywords) {
+          this.tableParams.keywords = ''
+        } else {
+          this.tableParams.keywords = keywords
+        }
+      }
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.lineId = params.lineId == '-1' ? '':params.lineId
+      params.stationId = params.stationId == '-1' ?'':params.stationId
+      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
+      }
+    },
+    selectModalApp (val) {
+      this.appParams.applicationId = val
+      this.formOption.equipmentType = ''
+      if (val) {
+        this.getAddEquipType( this.appParams)
+      }
+    },
+    // 获取新增设备类型 
+    getAddEquipType (params) {
+      this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeModalData = res.data.data
+        } else {
+          this.equipTypeModalData = []
+        }
+      })
+    },
+    searchClick () {
+      this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
+    },
+    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
+    },
+    editClick (row) {
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row));
+      this.formOption.lineId = this.formOption.lineId ? String(this.formOption.lineId) : '-1'
+      this.formOption.stationId = this.formOption.stationId ? String(this.formOption.stationId) : '-1'
+      this.getStationData(this.formOption.lineId)
+      this.appParams.applicationId = this.formOption.appId
+      this.getAddEquipType(this.appParams)
+      this.title = '编辑策略'
+      this.showModal = true
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认删除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复，请慎重操作。'
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    modalOk (formName) {
+      console.log(this.formOption.useDate)
+      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: 155px;
+     padding-right: 10px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 160px;
+     height: 32px;
+   }
+   >>> .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;
+ }
+  >>> .common-table .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);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+/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/EquipmentAnalysis/AlarmLevelConfig.vue

@@ -0,0 +1,620 @@
+<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="">
+            <DatePicker type="daterange" :value="dateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-start" placeholder="更新时间范围" @on-change="changePicker"></DatePicker>
+          </FormItem>
+          <FormItem label="" prop="keywords">
+            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+          </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>
+      </div>
+    </div>
+    <div class="manage-main-center">
+      <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
+        <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+        <template slot-scope="{ row }" slot="colorValue">
+          <i class="iconfont icon-gaojing1" style="vertical-align: middle" :style="'color:' + row.colorValue"></i>
+        </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>
+    <div class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
+    <Modal
+      v-model="showModal"
+      :title="title"
+      width="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">
+          <div class="common-form-item-tips" v-if="title == '编辑告警等级'">
+            <i class="iconfont icon-tishi" style="vertical-align: middle;color:#FFB31A;margin-right:12px"></i>
+            编辑提交后，系统所有历史警示信息将同时变动，可能造成统计数据混乱，请谨慎操作。
+          </div> 
+         <FormItem label="告警等级名称" prop="name">
+          <Input v-model.trim="formOption.name" maxlength="20" show-word-limit /> 
+          <div class="common-form-item-text">告警等级名称不可重复，范围包含现有等级名称、关闭状态等级名称</div> 
+        </FormItem>
+        <FormItem label="警示颜色：" prop="color">
+         <RadioGroup v-model="formOption.color">
+            <Radio :label="item.id"  v-for="(item,i) in alarmColor" :key="i">
+               <i class="iconfont icon-gaojing1" style="margin-right:12px" :style="'color:' + item.value"></i>
+            </Radio>
+        </RadioGroup>
+        </FormItem>
+         <FormItem label="说明：" prop="remark">
+          <Input v-model="formOption.remark" type="textarea" :rows="6" maxlength="200" show-word-limit />
+        </FormItem>
+         <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>
+			</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 common-modal-detail">
+      <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.arr" :key="i" :class="{'item-especial-bot':(i==item.arr.length-1 || i==item.arr.length-2) && item.arr.length%2==0}">
+            <span class="modal-content-item-name">
+            {{val.name}}
+            </span>
+            <!-- <div class="modal-content-item-value"> 
+              <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                <span v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+                <span v-else>{{val.value}}</span>
+                <div slot="content">
+                  <span v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
+                  <span v-else>{{val.value}}</span>
+                </div>
+              </Tooltip>
+              <span v-else>{{val.value}}</span>
+            </div> -->
+            <span class="modal-content-item-value"  v-if="val.name == '警示颜色'">
+              <i class="iconfont icon-gaojing1" style="vertical-align: middle" :style="'color:' + val.value"></i>
+            </span>
+            <span class="modal-content-item-value" v-else :class="{'item-especial-value': val.name == '已标注告警'}">
+              <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                {{val.name == '已标注告警' ?  val.value+'次' : val.value}}
+                <div slot="content">
+                 {{val.name == '已标注告警' ?  val.value+'次' : val.value}}
+                </div>
+              </Tooltip>
+              <span v-else>{{val.value}}</span>
+              <!-- {{val.name == '已标注告警' ?  val.value+'次' : val.value}} -->
+            </span>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {name: '',color:null,remark: '',enabled: 0}
+export default {
+  name: "AlarmLevelConfig",
+  components:{
+  },
+  data() {
+    return {
+      loading: true,
+      modalLoading: true,
+      tableParams: {
+        keywords: '',
+        beginDate: '',
+        endDate: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      tablePage: 0,
+      dateRange: [],
+      columns: [
+          {
+            title: '告警等级名称',
+            key: 'name',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '警示颜色',
+            align: 'center',
+            slot: 'colorValue',
+            width: 120,
+          },
+          {
+            title: '已配置策略',
+            key: 'confAlertRankNum',
+            align: 'center'
+          },
+          {
+            title: '已标注告警',
+            key: 'markedAlarmNum',
+            align: 'center'
+          },
+          {
+            title: '更新时间',
+            key: 'updateTime',
+            align: 'center'
+          },
+          {
+          title: '启用状态',
+          key: 'enabled',
+          align: 'center',
+          width: 120,
+          render: (h, params) => {
+            return h('div', [                             
+              h('i-switch', {
+                props: { value: params.row.enabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
+                },
+                nativeOn:{
+                    "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
+                      this.rowObj =  params.row
+                      if (params.row.enabled == 0) {
+                        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
+                      }
+                    },
+                  }
+                }),
+              ])
+            }
+          },
+          {
+            title: '操作',
+            align: 'center',
+            slot: 'action',
+            width: 120,
+          }
+      ],    
+      showModal: false,
+      detailStatus: false, 
+      modalStatus: false,
+      title: '新增告警等级',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {name: '',color:null,remark: '',enabled: 0},
+      alarmColor: [],
+      ruleValidate: {
+        name: [{
+          required: true,
+          message: '请输入告警等级名称',
+          trigger: 'blur'
+        }],
+        color: [{
+          required: true,
+          type: 'number',
+          message: '请选择警示颜色',
+          trigger: 'change'
+        }],
+      }, 
+      detailLabel: [],
+    };
+  },
+  mounted() {
+    this.getType()
+    this.getTableData()
+  },
+  methods: {
+    changePicker (date) {
+      this.tableParams.beginDate = date[0]
+      this.tableParams.endDate = 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/dic/queryDictionary', {name:'告警等级警示颜色'}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.alarmColor = res.data
+        } else {
+          this.alarmColor = []
+        }
+      })
+    },
+    // 获取表格数据
+    getTableData () {
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      this.loading = true
+      this.$get('metroapi/alert/rank/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.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
+            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    searchClick () {
+      this.getTableData()
+    },
+    resetClick (name) {
+     this.dateRange = []
+     this.tableParams.beginDate = ''
+     this.tableParams.endDate = ''
+     this.$refs[name].resetFields()
+     this.getTableData()
+    },   
+    addClick () {
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+      this.title = '新增告警等级'
+      this.showModal = true
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.currentModalTabs = '基础信息'   
+      this.detailStatus = true
+      this.$get('metroapi/alert/rank/info', {id: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) {
+      let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$post('metroapi/alert/rank/save', 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 () {
+      if (this.commonTitle == '确认启用') {
+        let params = JSON.parse(JSON.stringify(this.rowObj))
+        params.enabled = 1
+        this.getSwitchStatus(params)
+      } else if (this.commonTitle == '确认关闭') {
+        let params = JSON.parse(JSON.stringify(this.rowObj))
+        params.enabled = 0
+        this.getSwitchStatus(params)
+      } else {
+        let params = {
+          id: this.rowObj.id
+        }
+        this.delData(params)
+      }
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+    // 启用 关闭/接口
+    getSwitchStatus (params) {
+      this.$post('metroapi/alert/rank/save',params).then(res=>{
+        if (res.httpCode == 1 ){
+          if (params.enabled == 0) {
+            this.rowObj.enabled = 0
+          } else {
+            this.rowObj.enabled = 1
+          }
+          this.modalStatus = false
+        } else {
+          this.rowObj.enabled = 0
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    // 删除 关闭/接口
+    delData (params) {
+      this.$post('metroapi/alert/rank/delete',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;
+  overflow: hidden;
+  height: calc(100% - 50px);
+}
+.search-list {
+  display: flex;
+  justify-content: space-between;
+  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: 150px;
+     height: 32px;
+   }
+    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
+     height: 32px;
+     line-height: 32px;
+   }
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 150px);
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 53px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 53px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 53px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 355px);
+ }
+ >>> .common-table .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .common-table .ivu-table-tip table {
+ display: none;
+}
+>>> .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;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+>>> .modal-tabs-item {
+  margin-top: 10px;
+}
+// >>> .common-modal .ivu-modal-body {
+//   min-height: 243px;
+// }
+>>> .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-bot .modal-content-item-name {
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-bot .modal-content-item-value {
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-value {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.common-form-item-tips {
+  height: 37px;
+  background: #2D2515;
+  border: 1px solid #FFB31A;
+  border-radius: 4px;
+  color: #BD9952;
+  font-size: 14px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.common-form-item-text {
+  font-size: 11px;
+  color: #85A3D4;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+</style>

src/views/homecomponents/EquipmentAnalysis/AlarmMonitor.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="container">
+    <!-- <Input
+          prefix="ios-search"
+          v-model="searchName"
+          clearable
+          placeholder="请输入名称"
+          @on-enter="searchTree"
+        />
+        <Tree :data="treeData" @on-select-change="selectChange"></Tree> -->
     <!-- 简单模糊查询 -->
     <!-- <input type="text" placeholder="请输入..." v-model="searchVal" />
     <ul>
@@ -14,6 +22,7 @@
 </template>
 <script>
 import _ from "lodash";
+import { listToTree } from "./listToTree.js";
 export default {
   name: "AlarmMonitor",
   components: {},
@@ -46,9 +55,53 @@ export default {
           value: "jd",
         },
       ],
+       treeRawData:[{
+          id: 1,
+          title: '一级 1',
+          children: [{
+            id: 4,
+            title: '二级 1-1',
+            children: [{
+              id: 9,
+              title: '三级 1-1-1'
+            }, {
+              id: 10,
+              title: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          title: '一级 2',
+          children: [{
+            id: 5,
+            title: '二级 2-1'
+          }, {
+            id: 6,
+            title: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          title: '一级 3',
+          children: [{
+            id: 7,
+            title: '二级 3-1'
+          }, {
+            id: 8,
+            title: '二级 3-2'
+          }]
+        }],
+      treeData: [], //前端处理后的数据
+      searchName: "", //输入框绑定的数据
+      currentId: "", //需要选中的节点id
+      newList: []
     };
   },
-  mounted() {},
+  mounted() {
+    this.treeData = this.treeRawData
+    // this.treeData = listToTree(this.treeRawData); //将后端返回的list数据转化为树结构
+    // console.log(this.treeData)
+    // this.getMetroLevel()
+  },
   computed: {
     NewItems() {
       var _this = this;
@@ -61,7 +114,62 @@ export default {
       return NewItems;
     },
   },
-  methods: {},
+  methods: {
+    // 获取树形数据
+    getMetroLevel () {
+      this.$get('metroapi/application/appEquipmentTypeTree').then(res => {
+				if (res.httpCode == 1) {
+          this.treeData = res.data
+				}
+		  })
+    },
+     getTree(arr) {
+      return arr.map((v,index) => {
+         if (v.title.indexOf(this.searchName) !== -1) {
+            this.currentId = v.id
+            this.treeData = this.fineCurrentIdRecursive(v)
+          }
+          if (v.children) v.children = this.getTree(v.children);
+          return v;
+        });
+    },
+    getTree(arr) {},
+      //输入节点名称后按回车健搜索
+    searchTree() {
+      this.treeData = this.getTree(this.treeData)
+    },
+
+            //通过节点id选中树中节点并展开它的父节点-递归方式
+            fineCurrentIdRecursive(list) {
+                for (var i = 0; i < list.length; i++) {
+                    if (list[i].id === this.currentId) {
+                      this.newList.push(list[i])
+                        // list[i].selected = true; //如果节点id等于currentId，则选中该节点
+                        break;
+                    } else {
+                        if (list[i].children && list[i].children.length > 0) {
+                            list[i].children = this.fineCurrentIdRecursive(list[i].children); //找不到想要的节点则继续找孩子的（递归）
+                            for (var j = 0; j < list[i].children.length; j++) {
+                                if (list[i].children[j].selected || list[i].children[j].expand) {
+                                   this.newList.push(list[i])
+                                    // list[i].expand = true; //如果子节点（末端节点）选中或者子节点（非末端节点）展开，则展开该子节点的父节点
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                console.log(this.newList)
+                return this.newList
+                // console.log(list)
+                // return list;
+            },
+
+            // 点击节点文字展开收起
+            selectChange(data, selectedNode) {
+                // this.$set(selectedNode, "expand", !selectedNode.expand);
+            }
+  },
 };
 </script>
 <style scoped lang="stylus"></style>

src/views/homecomponents/EquipmentAnalysis/ComprehensiveQuery.vue

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

src/views/homecomponents/EquipmentAnalysis/EquipmentMonitor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <!-- :prop="`formDynamic[${index}].alarmType`" -->
-    <Button type="primary" @click="showModal">Display dialog box</Button>
+    <!-- <Button type="primary" @click="showModal">Display dialog box</Button>
     <Modal
       v-model="modal1"
       :title="title"
@@ -152,7 +152,7 @@
           >关系
         </FormItem>
       </Form>
-    </Modal>
+    </Modal> -->
   </div>
 </template>
 <script>

src/views/homecomponents/EquipmentAnalysis/LevelDeterConfig.vue

@@ -0,0 +1,1157 @@
+<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 indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentStatus">
+            <Select v-model="tableParams.equipmentStatus" placeholder="策略覆盖指标数量">
+                <Option v-for="item in strategyIndicNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentStatus">
+            <Select v-model="tableParams.equipmentStatus" placeholder="策略覆盖设备数量">
+                <Option v-for="item in strategyEquipNum" :value="item.value" :key="item.value">{{ item.label }}</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="" 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="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="65"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      @on-visible-change="modalChange"
+      :mask-closable="false"
+      class-name="common-modal">
+      <div class="common-modal-top">
+        <span class="common-modal-top-text">基础信息</span>
+      </div>
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="95" inline label-position="left">
+        <FormItem label="归属应用：" prop="appId" style="width:48%">
+           <Select v-model="formOption.appId" placeholder="归属应用" @on-change="selectModalApp">
+             <Option v-for="item in equipAppModalData" :value="String(item.id)" :key="item.id">{{ item.appName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="设备类型：" prop="equipmentType" style="width:48%">
+          <Select v-model="formOption.equipmentType" placeholder="设备类型">
+             <Option v-for="item in equipTypeModalData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
+          </Select>
+        </FormItem>
+         <FormItem label="策略名称：" prop="equipmentType" style="width:100%" >
+          <Input v-model="formOption.equipmentType" placeholder="默认回显【来源应用-设备类型】作为策略名称，可手动修改"/>  
+        </FormItem>
+			</Form>
+      <div class="common-modal-top">
+        <span class="common-modal-top-text">处理策略</span>
+      </div>
+      <Form ref="formDynamic" :model="formCustom" :label-width="0" class="strategy-form">
+        <Row v-for="(item, index) in formCustom.formDynamic" :key="index">
+          <Col span="2" :class="{'row-first': index == 0}" class="row-first-es">{{ item.name + (index + 1) }}</Col>
+          <Col span="16" :class="{'row-first': index == 0}">
+            <Row v-for="(val, i) in item.formItems" :key="i" style="width:100%" class="strategy-form-row">
+              <Col span="4">
+                <FormItem :prop="'formDynamic.' + index + '.formItems.' + i + '.logic'" :rules="{ required: clickbtn==3 ? false: true, message: '请选择告警等级', trigger: 'change',}" style="display:flex">
+                <span class="sub-first-text">{{val.sublogic}}</span>
+                  <Select v-model="val.logic" style="width: 75%" placeholder="告警等级" :disabled="val.disabled">
+                    <Option v-for="subItem in indicatorsNum" :value="subItem.value" :key="subItem.value">{{ subItem.label }}</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+              <Col span="4">
+                <FormItem :prop="'formDynamic.' + index + '.formItems.' + i + '.baohan'" :rules="{required: clickbtn==3 ? false: true, message: '请选择包含关系',trigger: 'change',}">
+                  <Select v-model="val.baohan" style="width: 100%" placeholder="告警等级" :disabled="val.disabled">
+                    <Option v-for="item in indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+              <Col span="4">
+                <FormItem :prop="'formDynamic.' + index + '.formItems.' + i + '.logic'" :rules="{ required: clickbtn==3 ? false: true,  message: '请选择告警等级', trigger: 'change',}" style="display:flex">
+                  <Select v-model="val.logic" style="width: 100%" placeholder="告警等级" :disabled="val.disabled">
+                    <Option v-for="subItem in indicatorsNum" :value="subItem.value" :key="subItem.value">{{ subItem.label }}</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+              <Col span="4">
+                <FormItem :prop="'formDynamic.' + index + '.formItems.' + i + '.baohan'" :rules="{required: clickbtn==3 ? false: true, message: '请选择包含关系',trigger: 'change',}">
+                  <Select v-model="val.baohan" style="width: 100%" placeholder="告警等级" :disabled="val.disabled">
+                    <Option v-for="item in indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+              <Col span="4">
+                <FormItem :prop="'formDynamic.' + index + '.formItems.' + i + '.logic'" :rules="{ required: clickbtn==3 ? false: true,  message: '请选择告警等级', trigger: 'change',}" style="display:flex">
+                  <Select v-model="val.logic" style="width: 100%" placeholder="告警等级" :disabled="val.disabled">
+                    <Option v-for="subItem in indicatorsNum" :value="subItem.value" :key="subItem.value">{{ subItem.label }}</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+              <Col span="4">
+                <FormItem :prop="'formDynamic.' + index + '.formItems.' + i + '.baohan'" :rules="{required: clickbtn==3 ? false: true, message: '请选择包含关系',trigger: 'change',}">
+                  <Select v-model="val.baohan" style="width: 100%" placeholder="告警等级" :disabled="val.disabled">
+                    <Option v-for="item in indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+              <i class="iconfont icon-shanchu ivu-col-del" v-if="i != 0" @click="handleRemove(i)"></i>
+            </Row>
+          </Col>
+          <Col span="2" :class="{'row-first': index == 0}" class="row-es-text">{{ item.text }}</Col>
+          <Col span="3" :class="{'row-first': index == 0}" class="row-es-last">
+            <FormItem
+              :prop="'formDynamic.'+index+'.alarmType'" :rules="{required: true,message: '请选择告警等级',trigger: 'change'}">
+              <Select v-model="item.alarmType" style="width: 100%" placeholder="告警等级" :disabled="item.disabled">
+                <Option v-for="firstitem in indicatorsNum" :value="firstitem.value" :key="firstitem.value">{{ firstitem.label }}</Option>
+              </Select>
+            </FormItem>
+          </Col>
+          <Col span="1" class="ivu-col-btn">
+          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#2DA0F8;padding-left:10px" @click="handleAdd('formDynamic')" v-if="index == formCustom.formDynamic.length - 1 &&title=='新增策略'"></i>
+            <!-- <Button type="dashed" @click="handleEdit('formDynamic')" icon="md-add" v-if="title == '编辑' && showEdit">编辑</Button> -->
+            <!-- <Button type="dashed" @click="handleSave('formDynamic')" icon="md-add" v-if="title == '编辑' && !showEdit">保存</Button> -->
+          </Col>
+        </Row>
+        <div class="sub-add">
+          <span>新增一条子策略 子策略与现有子策略间为</span>
+           <FormItem prop="logical" :rules="{required: clickbtn==2 ? true: false,message: '请选择逻辑判断',trigger: 'change'}">
+            <Select v-model="formCustom.logical" placeholder="逻辑判断" style="width: 200px;padding: 0 6px">
+              <Option v-for="item in indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</Option> 
+            </Select>
+          </FormItem>
+          关系
+          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#43B843;padding-left:10px" @click="handleAddSub('formDynamic')"></i>
+        </div>
+      </Form>
+      <div slot="footer">
+          <Button @click="modalCancel">取消</Button>
+          <Button type="primary" @click="modalOk">确定</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.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+            <span class="modal-content-item-value" v-else>{{val.value}}</span>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',equipmentVersion: '',supplier: '',remark: ''}
+export default {
+  name: "LevelDeterConfig",
+  components:{
+  },
+  data() {
+    return {
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appParams: {
+        applicationId: '',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      loading: true,
+      dateRange: [],
+      tableParams: {
+        lineId: '',
+        stationId: '',
+        equipmentStatus: '',
+        keywords: '',
+        applicationId:'',
+        equipmentType: '',
+        useDateBegin: '',
+        useDateEnd: '',
+        equipmentName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      rowObj: {},
+      indicatorsNum: [
+         {
+          value: '-1',
+          label: '监测指标数量'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      strategyIndicNum: [
+         {
+          value: '-1',
+          label: '策略覆盖指标数量'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      strategyEquipNum: [
+         {
+          value: '-1',
+          label: '策略覆盖设备数量'
+        },
+        {
+          value: '1',
+          label: '有'
+        },
+        {
+          value: '0',
+          label: '无'
+        },
+      ],
+      lineTypeData: [],
+      stationTypeData: [],
+      equipStateData: [],
+      equipStateModalData: [],
+      equipTypeData: [],
+      equipTypeModalData: [],
+      equipAppModalData: [],
+      columns: [
+        //  {
+        //     type: 'selection',
+        //     width: 60,
+        //     align: 'center'
+        //   },
+          {
+            title: '等级判定策略名称',
+            key: 'equipmentId',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '来源应用',
+            key: 'equipmentName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '设备类型',
+            key: 'equipmentTypeName',
+            align: 'center'
+          },
+          {
+            title: '监测指标数量',
+            key: 'appName',
+            align: 'center'
+          },
+          {
+            title: '策略覆盖指标数量',
+            key: 'lineName',
+            align: 'center',
+            // width: 80,
+          },
+          {
+            title: '策略覆盖设备数量',
+            key: 'stationName',
+            align: 'center',
+            // width: 80,
+          },
+          {
+            title: '设备状态',
+            key: 'equipmentStatusValue',
+            align: 'center'
+          },
+          {
+          title: '是否启用',
+          key: 'enabled',
+          align: 'center',
+          width: 120,
+          render: (h, params) => {
+            return h('div', [                             
+              h('i-switch', {
+                props: { value: params.row.enabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
+                },
+                nativeOn:{
+                    "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
+                      this.rowObj =  params.row
+                      if (params.row.enabled == 0) {
+                        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
+                      }
+                    },
+                  }
+                }),
+              ])
+            }
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 120,
+        }
+      ],
+      showModal: false,
+      detailStatus: false, 
+      modalStatus: false,
+      title: '新增策略',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {lineId: '',stationId: '',appId:'',equipmentName: '',equipmentType:'',equipmentStatus: '',useDate:'',equipmentVersion: '',supplier: '',remark: ''},
+      ruleValidate: {
+        lineId: [{
+          required: true,
+          message: '请选择所属线路',
+          trigger: 'change'
+        }],
+        stationId: [{
+          required: true,
+          message: '请选择所属站点',
+          trigger: 'change'
+        }],
+        appId: [{
+          required: true,
+          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: [],
+      formCustom: {
+        formDynamic: [
+          {
+            name: "策略",
+            formItems: [
+              {
+                logic: "",
+                baohan: "",
+                disabled: false,
+                sublogic: '',
+                status: 1
+              },
+            ],
+            text: "判定为",
+            alarmType: "",
+            disabled: false,
+          },
+        ],
+        logical : ''
+      },
+      clickbtn: 1, // 1点击策略增加按钮 2点击子策略增加按钮 3点击子策略删除按钮
+    };
+  },
+  mounted() {
+    this.getType()
+    this.getTableData()
+  },
+  methods: {
+    go (){
+      // this.$router.push({path:'//ApplicationManage'})
+      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
+      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    },
+    changePicker (date) {
+      this.tableParams.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/application/info/list', this.applicationParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipAppModalData = res.data.data
+        } else {
+          this.equipAppModalData = []
+        }
+      })
+      //  // 获取设备类型
+      // 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: '站点' })
+          }
+        })
+      }
+    },
+    // selectChange (selection) {
+    //  console.log(selection)
+    //  let user = selection.map(item => item.id)
+    //  console.log(user)
+    // },
+    // 获取表格数据
+    getTableData (keywords,arr,level) {
+       if (level) {
+        this.tableParams.keywords = ''
+        if (level == 2) {
+          this.tableParams.applicationId = arr[arr.length-1]
+          this.tableParams.equipmentType = ''
+        } else if (level == 3) {
+          this.tableParams.applicationId = arr[arr.length-2]
+          this.tableParams.equipmentType = arr[arr.length-1]
+        } else {
+          this.tableParams.applicationId = ''
+          this.tableParams.equipmentType = ''
+        }
+      } else {
+        this.tableParams.applicationId = ''
+        this.tableParams.equipmentType = ''
+        if (keywords == '合肥轨道交通' || keywords == '' || !keywords) {
+          this.tableParams.keywords = ''
+        } else {
+          this.tableParams.keywords = keywords
+        }
+      }
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.lineId = params.lineId == '-1' ? '':params.lineId
+      params.stationId = params.stationId == '-1' ?'':params.stationId
+      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
+      }
+    },
+    selectModalApp (val) {
+      this.appParams.applicationId = val
+      this.formOption.equipmentType = ''
+      if (val) {
+        this.getAddEquipType( this.appParams)
+      }
+    },
+    // 获取新增设备类型 
+    getAddEquipType (params) {
+      this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeModalData = res.data.data
+        } else {
+          this.equipTypeModalData = []
+        }
+      })
+    },
+    searchClick () {
+      this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
+    },
+    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.formCustom.formDynamic = [{
+            name: "策略",
+            formItems: [
+              {
+                logic: "",
+                baohan: "",
+                disabled: false,
+                sublogic: '',
+                status: 1
+              },
+            ],
+            text: "判定为",
+            alarmType: "",
+          }];
+      this.title = '新增策略'
+      this.showModal = true
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailStatus = true
+      this.$get('metroapi/equipment/equipmentDetail', {equipmentId:row.id}).then(res=>{
+        if ( res.httpCode == 1 ){
+          this.detailLabel = res.data
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    editClick (row) {
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row));
+      this.formOption.lineId = this.formOption.lineId ? String(this.formOption.lineId) : '-1'
+      this.formOption.stationId = this.formOption.stationId ? String(this.formOption.stationId) : '-1'
+      this.getStationData(this.formOption.lineId)
+      this.appParams.applicationId = this.formOption.appId
+      this.getAddEquipType(this.appParams)
+      this.title = '编辑策略'
+      this.showModal = true
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认删除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复，请慎重操作。'
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+      this.$refs.formDynamic.resetFields();
+     }
+    },
+    modalOk () {
+      var obj = Object.assign({}, this.formOption, this.formCustom); // 合并对象 注意目标对象自身也会改变。假设目标对象{}是之前里的对象，他的值跟obj一样
+      this.clickbtn = 1
+      this.$nextTick(()=> {
+        let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
+        params.lineId = params.lineId == '-1' ? '':params.lineId
+        params.stationId = params.stationId == '-1' ? '':params.stationId
+        // 多个form表单验证
+        const p1 = new Promise((resolve,reject)=>{
+        this.$refs['formOption'].validate(valid=>{
+                if(valid) resolve()
+            })
+        })
+        const p2 = new Promise((resolve,reject)=>{
+            this.$refs['formDynamic'].validate(valid=>{
+                if(valid) resolve()
+            })
+        })
+        if (this.title == '新增策略') {
+          Promise.all([p1,p2]).then(()=>{
+          console.log('验证通过,提交表单')      
+        })
+        //   this.$refs['formOption'].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['formOption'].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)
+        }
+      })
+    },
+    handleAdd(name) {
+      this.clickbtn = 1
+      this.$nextTick(()=> {
+        this.$refs[name].validate((valid) => {
+        if (valid) { 
+          this.formCustom.formDynamic.push({
+            name: "策略",
+            formItems: [
+              {
+                logic: "",
+                baohan: "",
+                disabled: false,
+                sublogic: '',
+                status: 1
+              },
+            ],
+            text: "判定为",
+            alarmType: "",
+          });
+          this.formCustom.logical = ''
+        }
+       });
+      }) 
+    },
+    handleAddSub(name) {
+      this.clickbtn = 2
+      this.$nextTick(()=> {
+      //    this.$refs[name].validateField('logical', (error) => {
+      //     if(!error){
+      //         this.$refs[name].validate((valid) => {
+      //         if (valid) {
+      //           this.formCustom.formDynamic[
+      //             this.formCustom.formDynamic.length - 1
+      //           ].formItems.push({
+      //             logic: "",
+      //             baohan: "",
+      //             disabled: false,
+      //             sublogic: this.formCustom.logical
+      //           });
+      //           this.formCustom.logical = ''
+      //         }
+      //       });
+      //     }
+      // })
+        this.$refs[name].validate((valid) => {
+            if (valid) {
+              this.formCustom.formDynamic[
+                this.formCustom.formDynamic.length - 1
+              ].formItems.push({
+                logic: "",
+                baohan: "",
+                disabled: false,
+                sublogic: this.formCustom.logical,
+                status: 1
+                // sublogic: this.formCustom.formDynamic[this.formCustom.formDynamic.length - 1]
+              });
+              console.log(this.formCustom.formDynamic)
+              // this.formCustom.logical = ''
+            }
+        })
+      })
+    },
+    handleRemove(i) {
+      this.clickbtn = 3
+      this.$nextTick(()=> {
+        this.formCustom.formDynamic[this.formCustom.formDynamic.length - 1].formItems.splice(i, 1) //因为删除选值的下拉框，没选值的下拉框的值会变成undefined 所以加个状态值（clickbtn=3）
+      })
+      // this.formCustom.formDynamic[this.formCustom.formDynamic.length - 1].formItems[i].status = 0
+    },
+    // getTree(arr) {
+    //   return arr.map((v,index) => {
+    //     console.log(v)
+    //     if (v.baohan == undefined) {
+    //       console.log(34343)
+    //       v.baohan = ''
+    //     }
+    //     if (v.formItems) v.formItems = this.getTree(v.formItems);
+    //     return v;
+    //   });
+    // },
+  }
+};
+</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: 155px;
+     padding-right: 10px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 160px;
+     height: 32px;
+   }
+   >>> .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;
+ }
+  >>> .common-table .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);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  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;
+}
+>>> .strategy-form .ivu-col{
+  position: initial;
+  color: #2B8EE2;
+  font-size: 14PX;
+}
+>>> .row-first-es {
+  border-left: 1px solid #21437B;
+  border-bottom: 1px solid #21437B;
+  border-right: 1px solid #21437B;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #13305F;
+}
+>>> .strategy-form .row-first{
+  border-top: 1px solid #21437B;
+}
+>>> .strategy-form .ivu-form-item{
+  height: 100%;
+  margin-bottom: 0;
+}
+>>> .strategy-form-row .ivu-form-item{
+  width: 100%;
+  height: 100%;
+  margin-bottom: 0;
+  .ivu-form-item-content {
+    width: 100%;
+    padding: 10px 5px;
+  }
+}
+>>> .strategy-form-row {
+//  height: 100%;
+}
+>>> .strategy-form-row .ivu-col {
+  height: 100%;
+  border: 1px solid #21437B;
+  border-top: none;
+  border-left: none;
+}
+>>> .strategy-form .row-es-text {
+  border-left: none;
+  border-bottom: 1px solid #21437B;
+  border-right: 1px solid #21437B;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #13305F;
+}
+>>> .strategy-form .row-es-last {
+  border-bottom: 1px solid #21437B;
+  border-right: 1px solid #21437B;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .ivu-form-item {
+    height: 100%;
+    width: 100%;
+    .ivu-form-item-content {
+      height: 100%;
+      width: 100%;
+      .ivu-select {
+        padding: 10px 5px;
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+}
+>>> .ivu-col-del {
+  cursor:pointer;
+  color:#BC2020;
+  padding-left:10px;
+  position: absolute; 
+  right: 3%;
+  margin-top: 10px;
+}
+>>> .strategy-form .ivu-col-btn {
+  border-top: none;
+  border-bottom: none;
+}
+>>> .sub-add {
+  display: flex;
+  align-items: center;
+  margin-top: 20PX;
+  padding-left: 10%;
+  font-size: 12PX;
+  color: #FFFFFF;
+  .ivu-form-item-content {
+   display: flex;
+  }
+}
+.sub-first-text {
+  font-size: 14PX;
+  font-weight: bold;
+  color: #EE823A;
+  margin-right: 5px;
+  display: inline-block;
+  min-width: 14px;
+}
+>>> .strategy-form .ivu-form-item-error-tip {
+ padding-left: 6px;
+}
+/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/EquipmentAnalysis/PolicyConfigManage.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="content-main">
+    <!-- <div class="content-body-wrap">
+     <div class="content-body">
+        <Tabs :value="currentTabs" @on-click="tabsClick" class="common-tabs">
+          <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
+        </Tabs>
+        <alarm-level-config v-if="currentTabs == '告警等级配置'" ref="alarmLevel" class="content-body-manage"></alarm-level-config>
+         <Row :gutter="8" style="width:100%;height: calc(100% - 50px)" v-else>
+          <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="请输入关键字查询" clearable search v-model="currentStation" class="common-search"  @on-search="iconChange" @on-clear="clearChange"/>
+                </div>
+                <div class="station-tree-center">
+                  <div class="station-tree-left common-scroll" v-show="showTree">
+                    <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="true" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
+                  </div>
+                  <div class="station-tree-left-notree" v-show="!showTree">
+                    站点输入错误！
+                  </div>
+                </div>
+              </div>
+            </div>
+          </i-col>
+          <i-col span="19" style="height:100%">
+            <div class="right-main">
+              <level-deter-config  ref="levelDeter" class="content-body-manage" v-if="currentTabs == '等级判定策略配置'"></level-deter-config>
+              <alarm-filter-config ref="alarmFilter" class="content-body-manage" v-if="currentTabs == '告警过滤策略配置'"></alarm-filter-config>
+              <alarm-acknowledg-config ref="alarmAcknowledg" class="content-body-manage" v-if="currentTabs == '告警自动确认策略'"></alarm-acknowledg-config>
+            </div>
+          </i-col>
+        </Row>
+     </div>
+    </div> -->
+  </div>
+</template>
+<script>
+import AlarmLevelConfig from './AlarmLevelConfig.vue'
+import LevelDeterConfig from './LevelDeterConfig.vue'
+import AlarmFilterConfig from './AlarmFilterConfig.vue'
+import AlarmAcknowledgConfig from './AlarmAcknowledgConfig.vue'
+export default {
+  name: "PolicyConfigManage",
+   components:{
+    AlarmLevelConfig,LevelDeterConfig,AlarmFilterConfig,AlarmAcknowledgConfig
+  },
+  data() {
+    return {
+      currentStation: '',
+      currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
+      showTree: true,// 是否显示树形组件
+		  stationData: [],
+      tabsData: [{label:'告警等级配置'},{label:'等级判定策略配置'},{label:'告警过滤策略配置'},{label:'告警自动确认策略'},{label:'连续性监测策略'}],
+      currentTabs: '告警等级配置',
+    };
+  },
+  mounted() {
+    // console.log(sessionStorage.getItem('currentTabs'))
+    this.getCurrentTab (sessionStorage.getItem('currentTabs'))
+    this.getMetroLevel()
+  },
+   // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
+  },
+  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) => {
+        if (index==0) {
+          v.expand = true
+        }
+        if (v.children) v.children = this.getTree(v.children);
+        return v;
+      });
+    },
+    iconChange: _.throttle(function() {
+      this.currentStaData = []
+      this.treeName = []
+      this.$nextTick(()=> {
+        this.$refs.stationManage.getTableData(this.currentStation)
+      })
+      if(this.currentStation != ''){
+        this.showTree = false
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+      } else {
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = true
+        this.stationData = this.getTree(this.stationData)
+        return 
+      }
+      this.getSelectedItem()
+		}, 500),
+    clearChange () {
+      this.getSelectedItem()
+      this.$nextTick(()=> {
+        this.$refs.stationManage.getTableData(this.currentStation)
+      })
+    },
+    getSelectedItem  () {
+      this.stationData.forEach((item, index,itemArr) => {
+        item.expand = false;
+        item.disabled = false; 
+        item.selected = false;
+        if (item.title == this.currentStation) {
+            item.selected = true;
+            item.disabled = true; // disabled 是否禁止选中 
+            item.expand = true;
+            this.currentStaData.push(item)
+            this.showTree = true
+        }
+        if (this.currentStation == '' && index == 0) {
+          item.expand = true
+        }
+        item.children.forEach((val, i,valArr) => {
+          val.expand = false; //expand 是否展开直子节点 
+          val.disabled = false; // disabled 是否禁止选中
+          val.selected = false;
+          if (val.title == this.currentStation) {
+            val.selected = true;
+            val.disabled = true; // disabled 是否禁止选中 
+            val.expand = true;
+            item.expand = true;
+            this.currentStaData.push(val)
+            this.showTree = true
+          }
+          if (this.currentStation == '' && i==0) {
+            val.expand = true
+          }
+          val.children.forEach ((lastVal,lastIndex) => {
+            lastVal.selected = false; //expand 是否展开直子节点 
+            lastVal.disabled = false; 
+            lastVal.expand = false;
+            if (lastVal.title == this.currentStation) {
+              lastVal.selected = true;
+              lastVal.disabled = true; // disabled 是否禁止选中 
+              lastVal.expand = true;
+              val.expand = true
+              item.expand = true
+              this.currentStaData.push(lastVal)
+              this.showTree = true
+            } 
+          })
+        });
+      });
+    },
+    treeChange(val,arr) {
+      this.currentStation = val
+      this.$nextTick(()=> {
+        this.$refs.stationManage.getTableData(this.currentStation)
+      })
+		},
+    tabsClick (name) {
+      this.stationData = this.getElseTree(this.stationData) // 切换tab页时，清除tree选中情况
+      this.currentStation = ''
+      sessionStorage.setItem("currentTabs",name)
+      this.getCurrentTab (name)
+      if (document.querySelector(".station-tree-left")) {
+        document.querySelector(".station-tree-left").scrollTo(0, 0) 
+      }
+      // if (this.currentTabs == '告警等级配置') {
+      //    this.$nextTick(()=> {
+      //      this.$refs.alarmLevel.getTableData()
+      //      this.$refs.alarmLevel.getType()
+      //   })
+      // } else if(this.currentTabs == '等级判定策略配置'){
+      //   this.$nextTick(()=> {
+      //     this.$refs.levelDeter.getTableData(this.currentStation)
+      //     this.$refs.levelDeter.getType()
+      //   })
+      // } else if(this.currentTabs == '等级判定策略配置'){
+      //   this.$nextTick(()=> {
+      //     this.$refs.levelDeter.getTableData(this.currentStation)
+      //     this.$refs.levelDeter.getType()
+      //   })
+      // } else if(this.currentTabs == '等级判定策略配置'){
+      //   this.$nextTick(()=> {
+      //     this.$refs.levelDeter.getTableData(this.currentStation)
+      //     this.$refs.levelDeter.getType()
+      //   })
+      // } else if(this.currentTabs == '等级判定策略配置'){
+      //   this.$nextTick(()=> {
+      //     this.$refs.levelDeter.getTableData(this.currentStation)
+      //     this.$refs.levelDeter.getType()
+      //   })
+      // }
+    },
+    getCurrentTab (currentTabs) {
+      this.currentTabs = currentTabs || '告警等级配置'
+      if (currentTabs == '告警等级配置' || !currentTabs) {
+         this.$nextTick(()=> {
+          //  this.$refs.alarmLevel.getTableData()
+          //  this.$refs.alarmLevel.getType()
+        })
+      } else if(currentTabs == '等级判定策略配置'){       
+        this.$nextTick(()=> {
+          // this.$refs.levelDeter.getTableData(this.currentStation)
+          // this.$refs.levelDeter.getType()
+        })
+      } else if(currentTabs == '等级判定策略配置'){
+        this.$nextTick(()=> {
+          // this.$refs.levelDeter.getTableData(this.currentStation)
+          // this.$refs.levelDeter.getType()
+        })
+      } else if(currentTabs == '等级判定策略配置'){
+        this.$nextTick(()=> {
+          // this.$refs.levelDeter.getTableData(this.currentStation)
+          // this.$refs.levelDeter.getType()
+        })
+      } else if(currentTabs == '等级判定策略配置'){
+        this.$nextTick(()=> {
+          // this.$refs.levelDeter.getTableData(this.currentStation)
+          // this.$refs.levelDeter.getType()
+        })
+      }
+    },
+    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
+    getElseTree(arr) {
+      return arr.map((v,index) => {
+        if (v.title==this.currentStation) {
+          v.selected = false
+          v.disabled = false
+        }
+        if (index == 0) {
+          v.expand = true
+        } else {
+          v.expand = false
+        }
+        if (v.children) v.children = this.getElseTree(v.children);
+        return v;
+      });
+    },
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main {
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+}
+.content-body-wrap {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+}
+.content-body {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+  padding: 10px;
+}
+.common-search {
+  width: 100%;
+}
+>>> .common-search .ivu-input {
+  background-color: #06214D;
+  border: 1px solid #2355A6;
+  border-radius: 15px;
+  color: #fff;
+  height: 32px;
+}
+>>> .common-search .ivu-input:focus {
+    border-color: #0185ea;
+}
+.station-tree {
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-body {
+  border: 1px solid #204384;
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-center {
+  height: calc(100% - 32px);
+  padding-top: 10px;
+}
+.station-tree-left {
+  height: 100%;
+  overflow: auto;
+}
+.station-tree-left-notree {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  fon-size: 14px;
+}
+.right-main {
+  height: 100%;
+  padding: 10px 0;
+}
+</style>

src/views/homecomponents/EquipmentAnalysis/listToTree.js

@@ -0,0 +1,35 @@
+//将后端返回的list数据转化为树结构
+export const listToTree = (list) => {
+  var arr = []
+  let items = {}
+  var idsStr = ''
+  // 获取每个节点的直属子节点（是直属，不是所有子节点）
+  for (let i = 0; i < list.length; i++) {
+      let key = list[i].parentId
+      if (items[key]) {
+          items[key].push(list[i])
+      } else {
+          items[key] = []
+          items[key].push(list[i])
+      }
+      idsStr += idsStr === '' ? list[i].id : ',' + list[i].id
+  }
+  for (var key in items) {
+      if (idsStr.indexOf(key) === -1) {//找到最大的父节点key
+          arr=formatTree(items, key)
+      }
+  }
+  delete arr[0].parentId
+  return arr
+}
+function formatTree(items, parentId) {
+  let result = []
+  if (!items[parentId]) {
+      return result
+  }
+  for (let t of items[parentId]) {
+      t.children = formatTree(items, t.id)//递归获取children
+      result.push(t)
+  }
+  return result
+}

src/views/homecomponents/Head.vue

@@ -62,6 +62,7 @@ export default {
   },
   watch: {
       '$route' (to, from) {
+        let menuNameArr = []
         // 菜单头部浏览器前进或后退
         let arr = utils.storage('sw_user').menus;
         arr.forEach((item,i) => {
@@ -70,7 +71,10 @@ export default {
               if (val.linkUrl == to.path) {
               this.activeId = val.parentMenuId
               this.$emit('listenMenuId', this.activeId);
+              menuNameArr[0] = item.menuName;
+              menuNameArr[1] = val.menuName;
               sessionStorage.setItem('routname', to.path);
+              sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr));
               this.$router.push( to.path );
               }
             })

vue.config.js

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