告警处理

src/assets/styles/common.css

@@ -473,6 +473,9 @@ textarea.ivu-input {
 .common-date-picker .ivu-date-picker-header {
   border-bottom: 1px solid #204384;
 }
+.common-date-picker .ivu-time-picker-header {
+  border-bottom: 1px solid #204384;
+}
 .common-date-picker .ivu-date-picker-cells-cell:hover em {
   background:#2e4e89;
 }
@@ -482,3 +485,59 @@ textarea.ivu-input {
 .common-date-picker .ivu-input-prefix i, .common-date-picker .ivu-input-suffix i {
   line-height: 32px;
 }
+.common-date-picker .ivu-picker-confirm {
+  border-top: 1px solid #204384;
+}
+.common-date-picker .ivu-btn-text.disabled, .common-date-picker .ivu-btn-text.disabled.active, .common-date-picker .ivu-btn-text.disabled:active, .common-date-picker .ivu-btn-text.disabled:focus, .common-date-picker .ivu-btn-text.disabled:hover, .common-date-picker .ivu-btn-text[disabled], .common-date-picker .ivu-btn-text[disabled].active, .common-date-picker .ivu-btn-text[disabled]:active, .ivu-btn-text[disabled]:focus, .common-date-picker .ivu-btn-text[disabled]:hover, .common-date-picker fieldset[disabled] .ivu-btn-text, .common-date-picker fieldset[disabled] .ivu-btn-text.active, fieldset[disabled] .ivu-btn-text:active, .common-date-picker fieldset[disabled] .ivu-btn-text:focus, .common-date-picker fieldset[disabled] .ivu-btn-text:hover {
+  background-color: #2e4e89;
+}
+.common-date-picker .ivu-btn-text {
+  color: #fff;
+}
+.common-date-picker .ivu-btn-text:hover {
+  background-color: transparent;
+}
+.common-date-picker .ivu-time-picker-cells-cell:hover {
+  background: #2e4e89;
+}
+.common-date-picker .ivu-time-picker-cells-cell-selected, .common-date-picker .ivu-time-picker-cells-cell-selected:hover {
+  background: #2d8cf0;
+  color: #fff;
+}
+.common-date-picker .ivu-picker-panel-content .ivu-picker-panel-content .ivu-time-picker-cells-list::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+  opacity: 0.6;
+}
+.common-date-picker .ivu-picker-panel-content .ivu-picker-panel-content .ivu-time-picker-cells-list::-webkit-scrollbar-track {
+  background-color: #1f2f69;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+.common-date-picker .ivu-picker-panel-content .ivu-picker-panel-content .ivu-time-picker-cells-list::-webkit-scrollbar-thumb {
+  opacity: 1;
+  background-color: #435579;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+.common-date-picker .ivu-picker-panel-content .ivu-picker-panel-content .ivu-time-picker-cells-list {
+  scrollbar-arrow-color: #435579;
+  scrollbar-track-color: #435579;
+  scrollbar-highlight-color: #435579;
+  scrollbar-base-color: #435579;
+}
+.common-date-picker .ivu-time-picker-with-range .ivu-picker-panel-content:after {
+  background: #5c7091;
+}
+.common-date-picker .ivu-btn-default {
+  background-color: #0E2F63;
+  border: 1px solid #5774A3;
+  border-radius: 5px;
+  color: #83A4D9;
+  /* font-size: 12px; */
+}
+.common-date-picker .ivu-time-picker-cells-list {
+  border-left: 1px solid #5c7091;
+}

src/components/TreeFilter.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="container">
+    <!-- tree过滤字节模糊查询 -->
+    <Input placeholder="输入关键字进行过滤" v-model="filterText"/>
+    <Tree :data="data" show-checkbox></Tree>
+  </div>
+</template>
+<script>
+import _ from "lodash";
+export default {
+  name: "TreeFilter",
+  components: {},
+  data() {
+    return {
+      filterText:null,
+      flag:0,
+      data:[],
+      data2:  [{
+      expand: true,
+      title: '一级 1',
+      children: [{
+          expand: true,
+          title: '二级 1-1',
+          children: [
+              {
+              expand: true,
+              title: '三级 1-1-2',
+              children: [
+                  {
+                  expand: true,
+                  title: '四级 1-1-3-4'
+                  }]
+              }, 
+              {
+              expand: true,
+              title: '三级 1-1-2'
+              }
+          ]
+      }]
+      }, {
+      expand: true,
+      title: '一级 2',
+      children: [{
+          expand: true,
+          title: '二级 2-1'
+      }, {
+          expand: true,
+          title: '二级 2-2'
+      }]
+      }, {
+      expand: true,
+      title: '一级 3',
+      children: [{
+          expand: true,
+          title: '二级 3-1'
+      }, {
+          expand: true,
+          title: '二级 3-2'
+      }]
+      }],
+    };
+  },
+  watch: {
+      filterText(val) {
+          let arr=JSON.parse(JSON.stringify(this.data2))
+          this.data=this.filterNode(val,arr)
+      }
+  },
+  mounted() {
+    this.data=this.data2
+  },
+  methods: {
+     //过滤树节点
+            filterNode(val,List){
+                //过滤出满足条件的数组
+                let List1=List.filter(item=>{
+                    //如果该元素有children，则优先处理children的
+                    if(item.children){
+                        //过滤children里面满足条件的
+                        item.children=this.filterNode(val,item.children)
+                        //如果children里面没有满足条件的，则进入，否则返回true
+                        if(!item.children.some(item1=>item1.title.indexOf(val) !== -1)){
+                            //判断children里面是否还有一层children,如果有则对内层children继续调用函数判断，否则返回title中含有关键字的元素
+                            if(item.children.some(item1=>item1.children)){
+                                item.children.forEach(item2 => {
+                                    item2.children&&this.filterNode(val,item2.children)
+                                });
+                            }else{
+                                return item.title.indexOf(val) > -1
+                            }
+                        }   
+                        return true
+                    }
+                    //返回title中含有关键字的元素
+                    return item.title.indexOf(val) > -1
+                })
+                return List1
+            }
+  },
+};
+</script>
+<style scoped lang="stylus"></style>

src/components/common/RollingDetailTable.vue

@@ -3,7 +3,11 @@
     <div class="common-modal-loading" v-show="loading">
       <loading-animation></loading-animation>
     </div>
-    <Table ref="table" v-show="!loading" class="table" :columns="columns1" :data="detailTabData" @on-sort-change="changeSort" :row-class-name="rowClassName"></Table>
+    <Table ref="table" v-show="!loading" class="table" :columns="columns1" :data="detailTabData" @on-sort-change="changeSort" :row-class-name="rowClassName">
+      <!-- <template  v-for="column in columns1"  :slot="column.slot?column.slot:''" slot-scope="params" >
+        <slot :name="column.slot?column.slot:''" v-bind="params" ></slot>
+      </template> -->
+    </Table>
     <!-- <Table ref="table" v-show="!loading" class="table" :columns="columns1" :data="detailTabData" @on-sort-change="changeSort" :row-class-name="rowClassName"></Table> -->
   </div>
 </template>
@@ -25,7 +29,11 @@ export default {
     },
     detailDataCount: { //表格的总条数 为了防止后端不返回总数目
       type:[String, Number],
-    }
+    },
+    dataIndex: { // 请求地址 
+      type:[String, Number],
+      default: 1
+    },
   },
   data() {
     return {
@@ -36,7 +44,7 @@ export default {
       pageTotal: 0,
       detailTotal: 0,
       showLoading: false,
-      currentUrl:''
+      currentUrl:'',
     };
   },
   methods: {
@@ -81,15 +89,16 @@ export default {
       this.getDetailData().then(res => {
         this.loading = false
         if (res.httpCode == 1) {
-          if (res.data.data && res.data.data.length==0) {
+          if (res.data.data && res.data.data.length==0 || (res.data[this.dataIndex] && res.data[this.dataIndex].value.data.length==0)) {
             this.detailTotal = 0
             this.detailTabData = []
           } else {
-            this.detailTabData = res.data.data
-            this.detailTotal = Number(res.data.count)
-            if (!this.detailTabData) {
-              this.detailTabData = res.data[1].value.data
-              this.detailTotal = res.data[1].value.count
+            if (res.data[this.dataIndex] && res.data[this.dataIndex].value.data) {
+              this.detailTabData = res.data[this.dataIndex].value.data
+              this.detailTotal = res.data[this.dataIndex].value.count
+            } else {
+              this.detailTabData = res.data.data
+              this.detailTotal = Number(res.data.count)
             }
           }
           if (res.data.offset) {
@@ -138,55 +147,17 @@ export default {
         this.curPage++;
         this.getDetailData().then(res => {
           if (res.httpCode == 1) {
-            if (res.data.data && res.data.data.length==0) {
-              this.detailTotal = 0
-            } else {
-              this.detailTabData = this.detailTabData.concat(res.data.data)
-              this.detailTotal = Number(res.data.count)
-              if (!this.detailTabData) {
-                this.detailTabData = this.detailTabData.concat(res.data[1].value.data)
-                this.detailTotal = res.data[1].value.count
-              }
-            }
-            // this.detailTabData = this.detailTabData.concat(res.data.data);
-            // this.detailTotal = Number(res.data.count);
-            if (res.data.data.offset) {
-             this.detailParams.index = res.data.offset // 为假分页准备
-            }
-            this.pageDataHandle();
-          }
-        });
-      }
-    }, 500),
-    scrollDetailPannel: _.throttle(function(event) {
-      let nScrollTop = event.target.scrollTop; // 滚动条到顶部的距离
-      let nDivHight = event.target.offsetHeight; //滚动条可见元素的高度
-      let nScrollHight = event.target.scrollHeight; //包括当前不可见部分的元素的高度
-      if (nScrollTop + nDivHight >= nScrollHight - 5) {
-        if (this.curPage >= this.pageTotal || event.target.scrollTop == 0) { // event.target.scrollTop 防止表头做切换选择时，重新请求当前页为1
-          return;
-        }
-        event.target.onmousewheel = function(e){   
-          e = e || window.event;   
-          event.target.scrollTop += e.wheelDelta > 0 ? -60 : 60; 
-          return false;
-        };
-        this.curPage++;
-        this.getDetailData().then(res => {
-          if (res.httpCode == 1) {
-            if (res.data.data && res.data.data.length==0) {
+            if (res.data.data && res.data.data.length==0 || (res.data[this.dataIndex] && res.data[this.dataIndex].value.data.length==0)) {
               this.detailTotal = 0
             } else {
-              this.detailTabData = this.detailTabData.concat(res.data.data)
-              this.detailTotal = Number(res.data.count)
-              if (!this.detailTabData) {
-                this.detailTabData = this.detailTabData.concat(res.data[1].value.data)
-                this.detailTotal = res.data[1].value.count
+              if (res.data[this.dataIndex] && res.data[this.dataIndex].value.data) {
+                this.detailTabData = this.detailTabData.concat(res.data[this.dataIndex].value.data)
+                this.detailTotal = res.data[this.dataIndex].value.count
+              } else {
+                this.detailTabData = this.detailTabData.concat(res.data.data)
+                this.detailTotal = Number(res.data.count)
               }
             }
-            if (res.data.data.offset) {
-             this.detailParams.index = res.data.offset // 为假分页准备
-            }
             this.pageDataHandle();
           }
         });

src/main.js

@@ -19,7 +19,8 @@ import Common from './components/common' //自定义通用全局组件
 Vue.use(Common)
 Vue.config.productionTip = false
 Vue.use(ViewUI)
-
+// const bus = new Vue()
+// Vue.prototype.$bus = bus; //实现全局bus 兄弟组件
 new Vue({
   router,
   store,

src/views/homecomponents/BasicInfomation/ApplicationEquip.vue

@@ -6,7 +6,7 @@
           <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"/>
+                <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">
@@ -361,7 +361,6 @@ export default {
     modalChange (modalStatus) {
      if (!modalStatus) {
       this.$refs.formOption.resetFields();
-      this.equipTypeData = []
      }
     },
     modalOk (formName) {

src/views/homecomponents/BasicInfomation/ApplicationStation.vue

@@ -134,6 +134,7 @@
       reset-drag-position
       footer-hide
       :mask-closable="false"
+      @on-visible-change="modalDetailChange"
       class-name="common-modal common-modal-detail">
        <Tabs :value="currentModalTabs" @on-click="tabsClick" class="common-tabs">
         <TabPane v-for="tab in tabsModalData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
@@ -516,6 +517,12 @@ export default {
       this.$refs.formOption.resetFields();
      }
     },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
     modalOk (formName) {
       let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
       // params.lineId = params.lineId == '-1' ? null:params.lineId
@@ -588,7 +595,8 @@ export default {
       if (this.currentModalTabs == '关联设备类型') {
         this.detailParams.applicationId = this.rowObj.id
         this.$nextTick(() => {
-           document.querySelector(".common-modal-detail .ivu-table-body").scrollTo(0, 0)
+           this.detailParams.pageNum = 1
+           document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
            this.$refs.detailTable.getChartsDetail(this.detailParams)
         });
       }
@@ -627,7 +635,6 @@ export default {
   align-items: center;
    .ivu-select {
      width: 150px;
-     padding-right: 10px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {

src/views/homecomponents/BasicInfomation/DeviceManage.vue

@@ -6,7 +6,7 @@
           <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"/>
+                <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">
@@ -25,7 +25,8 @@
               <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
             </Tabs>
             <device-manage-index v-if="currentTabs=='设备管理'" ref="device"></device-manage-index>
-            <device-type-manage v-if="currentTabs=='设备类型管理'" ref="deviceType" @changeTree="changeTree"></device-type-manage>
+            <device-type-manage  v-if="currentTabs=='设备类型管理'" ref="deviceType" @changeTree="changeTree"></device-type-manage>
+            <!-- <device-model-manage v-if="currentTabs=='设备监测模型'" ref="deviceModel" @changeTree="changeTree"></device-model-manage> -->
           </div>
         </i-col>
       </Row>
@@ -37,10 +38,11 @@ import _ from 'lodash'
 import LineManage from './LineManage.vue'
 import DeviceManageIndex from './DeviceManageIndex.vue'
 import DeviceTypeManage from './DeviceTypeManage.vue'
+import DeviceModelManage from './DeviceModelManage.vue'
 export default {
   name: "DeviceManage",
   components:{
-    DeviceManageIndex,DeviceTypeManage
+    DeviceManageIndex,DeviceTypeManage,DeviceModelManage
   },
   data() {
     return {
@@ -57,12 +59,16 @@ export default {
     this.getMetroLevel()
     this.currentTabs = sessionStorage.getItem('currentTabs') || '设备管理'
     if (sessionStorage.getItem('currentTabs') == '设备类型管理') {
-       this.$nextTick(()=> {
+      this.$nextTick(()=> {
         this.$refs.deviceType.getTableData()
       })
-    } else {
+    } else if(sessionStorage.getItem('currentTabs') == '设备管理'){
       this.$refs.device.getType()
       this.$refs.device.getTableData()
+    } else {
+       this.$nextTick(()=> {
+        this.$refs.deviceModel.getTableData()
+      })
     }
   },
   // 离开当前路由之前的钩子函数 
@@ -99,6 +105,10 @@ export default {
           this.$nextTick(()=> {
             this.$refs.deviceType.getTableData(this.currentStation)
           })
+        } else {
+          this.$nextTick(()=> {
+            this.$refs.deviceModel.getTableData(this.currentStation)
+          })
         }
       })
       if(this.currentStation != ''){
@@ -121,6 +131,10 @@ export default {
           this.$nextTick(()=> {
             this.$refs.deviceType.getTableData(this.currentStation)
           })
+        } else {
+          this.$nextTick(()=> {
+            this.$refs.deviceModel.getTableData(this.currentStation)
+          })
         }
       })
     },
@@ -181,7 +195,11 @@ export default {
         this.$nextTick(()=> {
           this.$refs.deviceType.getTableData(this.currentStation,arr,level)
         })
-      }
+      } else {
+          this.$nextTick(()=> {
+            this.$refs.deviceModel.getTableData(this.currentStation,arr,level)
+          })
+        }
 		},
     tabsClick (name) {
       document.querySelector(".station-tree-left").scrollTo(0, 0) 
@@ -199,7 +217,11 @@ export default {
         this.$nextTick(()=> {
           this.$refs.deviceType.getTableData()
         })
-      }
+      } else {
+          this.$nextTick(()=> {
+            this.$refs.deviceModel.getTableData()
+          })
+        }
     },
     changeTree () {
      this.getMetroLevel()

src/views/homecomponents/BasicInfomation/DeviceManageIndex.vue

@@ -24,10 +24,10 @@
             </Select>
           </FormItem> -->
           <FormItem label="">
-            <DatePicker type="daterange" :value="dateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-start" placeholder="启用日期范围" @on-change="changePicker"></DatePicker>
+            <DatePicker type="daterange" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placement="bottom-start" placeholder="启用日期范围" @on-change="changePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="equipmentName">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.equipmentName" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.equipmentName" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -117,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-start" placeholder="启用日期" style="width: 100%" @on-change="changeMoldaPicker"></DatePicker>
+          <DatePicker type="date" :value="formOption.useDate" :editable="false" class="common-date-picker" placement="bottom-start" placeholder="启用日期" style="width: 100%" @on-change="changeMoldaPicker"></DatePicker>
         </FormItem>
          <FormItem label="设备型号：" prop="equipmentVersion" style="width:100%">
           <Input v-model="formOption.equipmentVersion" maxlength="20" show-word-limit />  
@@ -658,7 +658,6 @@ export default {
   align-items: center;
    .ivu-select {
      width: 150px;
-     padding-right: 10px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {

src/views/homecomponents/BasicInfomation/DeviceModelManage.vue

@@ -0,0 +1,650 @@
+<template>
+  <div class="content-main common-scroll">
+    <div class="content-body">
+      <Row :gutter="8" style="width:100%;height:100%">
+        <i-col span="24" style="height:100%">
+          <div class="right-main">
+            <!-- <div class="manage-main-top">
+              <Button icon="ios-add" class="common-add-btn" @click="addClick">新增设备类型</Button>
+            </div> -->
+            <div class="manage-main-center">
+              <Table :columns="columns" :data="tableData" class="common-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
+                <template slot="loading">
+                    <Loading-animation></Loading-animation>
+                </template>
+                <template slot-scope="{ row }" slot="action">
+                  <Tooltip content="详情" placement="top">
+                      <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
+                  </Tooltip>
+                  <Tooltip content="编辑" placement="top">
+                      <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
+                  </Tooltip>
+                </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>
+          </div>
+        </i-col>
+      </Row>
+    </div>
+     <Modal
+      v-model="showModal"
+      :title="title"
+      width="36"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      @on-visible-change="modalChange"
+      class-name="common-modal">
+      <div class="common-form-item-tips">
+        <i class="iconfont icon-tishi" style="vertical-align: middle;color:#FFB31A;margin-right:12px"></i>
+        编辑提交后，系统所有历史警示信息将同时变动，可能造成统计数据混乱，请谨慎操作。
+      </div> 
+      <!-- <rolling-detail-table :columns1="editColumns" :apiUrl="apiUrl" ref="detailTable" class="rolling-detail-table">
+        <template slot-scope="params" slot="appName">{{params.row.id}}</template>
+      </rolling-detail-table> -->
+      <div class="common-modal-loading" v-show="editLoading">
+        <loading-animation></loading-animation>
+      </div>
+      <Table :columns="editColumns" :data="editTableData" class="common-table edit-table" :row-class-name="rowClassName" :loading="loading" v-show="!editLoading">
+        <template slot="appName" slot-scope="{ row }">
+            <Input v-model.trim="row.appName" style="width: 100%; padding: 6px"></Input>
+        </template>
+      </Table>
+      <!-- <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
+				<FormItem label="类型名称：" prop="name">
+          <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 /> 
+        </FormItem>
+			</Form> -->
+      <div slot="footer">
+          <Button @click="modalCancel">取消</Button>
+          <Button type="primary" @click="modalOk('formOption')">确定</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">
+       <Tabs :value="currentModalTabs" @on-click="tabsClick" class="common-tabs">
+        <TabPane v-for="tab in tabsModalData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
+      </Tabs>
+      <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
+</div>
+</template>
+<script>
+import _ from 'lodash'
+export default {
+  name: "DeviceModelManage",
+  components:{
+  },
+  data() {
+    return {
+      tableTotal: 0,
+      tablePage: 0,
+      tableParams: {
+        equipmentTypeId: '',
+        applicationId: '',
+        name: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      editLoading: true,
+      loading: true,
+      tableData: [],
+      columns: [
+          {
+            title: '设备类型名称',
+            key: 'name',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '模型监测指标',
+            key: 'appCount',
+            align: 'center'
+          },
+          {
+            title: '等级判定策略覆盖指标数量',
+            key: 'equipmentCount',
+            align: 'center'
+          },
+          {
+            title: '自动确认策略覆盖指标数量',
+            key: ' targetCount',
+            align: 'center'
+          },
+          {
+            title: '连续监测策略覆盖指标数量',
+            key: ' targetCount',
+            align: 'center'
+          },
+          {
+            title: '操作',
+            align: 'center',
+            slot: 'action',
+            width: 80
+          }
+      ],
+      rowObj: {},
+      formOption: {name: '',remark:''},
+      ruleValidate: {
+        name: [{
+          required: true,
+          message: '请输入应用名称',
+          trigger: 'change'
+        }],
+      }, 
+    equipTypeData: [],
+    showModal: false,
+    detailStatus: false, 
+    modalStatus: false,
+    title: '编辑监测模型',
+    editTableData: [],
+    editColumns: [
+       {
+          title: '序号',
+          type: 'index',
+          align: 'center'
+        },
+        {
+          title: '设备指标',
+          slot: 'appName',
+          align: 'center',
+        },
+        {
+          title: '对应数据库字段',
+          key: 'equipmentNum',
+          align: 'center',
+          ellipsis: true,
+          tooltip: true
+        },
+    ],
+    detailStatus: false,
+    currentModalTabs:'监测指标',
+    tabsModalData: [{label:'监测指标'},{label:'关联设备'}],
+    detailLabel: [],
+    columnsModal: [],
+    columnsEquipType: [
+        {
+          title: '序号',
+          type: 'index',
+          align: 'center'
+        },
+        {
+          title: '设备指标',
+          key: 'appName',
+          align: 'center',
+          ellipsis: true,
+          tooltip: true
+        },
+        {
+          title: '对应数据库字段',
+          key: 'equipmentNum',
+          align: 'center',
+          ellipsis: true,
+          tooltip: true
+        },
+        {
+          title: '等级判定策略',
+          key: 'equipmentNum',
+          align: 'center'
+        },
+        {
+          title: '自动确认策略',
+          key: 'equipmentNum',
+          align: 'center'
+        },
+        {
+          title: '连续监测策略',
+          key: 'equipmentNum',
+          align: 'center'
+        },
+      ],
+      columnsRelatedEquip: [
+          {
+            title: '序号',
+            type: 'index',
+            align: 'center'
+          },
+          {
+            title: '设备ID',
+            key: 'equipmentId',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+         },
+         {
+            title: '设备名称',
+            key: 'equipmentName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+         },
+         {
+            title: '归属线路',
+            key: 'lineName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+            // render:(h,params)=>{
+            //   return h('div', [ h('span',!params.row.lineName ? '/' : params.row.lineName) ])
+            // }
+         },
+         {
+            title: '归属站点',
+            key: 'stationName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+         },
+         {
+            title: '状态',
+            key: 'equipmentStatusValue',
+            align: 'center'
+         },
+      ],
+      // equipTypeModal: [],
+      // equipTypeCount: 0,
+      detailParams: {
+					equipmentTypeId: null,
+					pageNum: 1,
+					pageSize: 10
+			},
+      apiUrl: '',
+      appNameObj: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appNameList: []
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    rowClassName(row, index) {
+      if (index % 2 == 0) {
+        return "ivu-table-stripe-even";
+      } else {
+        return "ivu-table-stripe-odd";
+      }
+    },
+    // 分页
+    changePage (val) {
+      this.tableParams.pageNum = val
+      this.getTableData()
+    },
+    //跳转
+    sizeChange (val) {
+      this.tableParams.pageSize = val
+      this.getTableData()
+    },
+    getTableData (keywords,arr,level) {
+      if (level) {
+        this.tableParams.name = ''
+        if (level == 2) {
+          this.tableParams.applicationId = arr[arr.length-1]
+          this.tableParams.equipmentTypeId = ''
+        } else if (level == 3) {
+          this.tableParams.applicationId = arr[arr.length-2]
+          this.tableParams.equipmentTypeId = arr[arr.length-1]
+        } else {
+          this.tableParams.applicationId = ''
+          this.tableParams.equipmentTypeId = ''
+        }
+      } else {
+        this.tableParams.applicationId = ''
+        this.tableParams.equipmentTypeId = ''
+        if (keywords == '合肥轨道交通' || keywords == '' || keywords == undefined) {
+          this.tableParams.name = ''
+        } else {
+          this.tableParams.name = keywords
+        }
+      }
+      this.loading = true
+      this.$get('metroapi/equipment/queryEquipmentTypePage', this.tableParams).then(res=>{
+        this.loading = false
+          if ( res.httpCode == 1 ){
+            this.tableData = res.data.data
+            this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.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
+          }
+        })
+    },
+    getType  () {
+      // 获取设备类型
+      this.$get('metroapi/equipment/queryEquipmentType', {name:''}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeData = res.data
+        } else {
+          this.equipTypeData = []
+        }
+      })
+      // 获取应用名称
+      this.$get('metroapi/application/info/list', this.appNameObj).then(res=>{
+          if (res.httpCode == 1 ){
+            this.appNameList = res.data.data
+          } else {
+            this.appNameList = []
+          }
+        })
+    },
+    detailClick (row) {
+      this.detailParams.equipmentTypeId = Number(row.id)
+      this.rowObj = row
+      this.detailStatus = true
+      this.currentModalTabs = '监测指标'
+      this.$nextTick(() => {
+        this.apiUrl = 'metroapi/equipment/equipmentTypeDetail'
+        this.columnsModal = this.columnsEquipType
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0) 
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+      this.$get('metroapi/equipment/equipmentTypeDetail', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        // document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+    },
+    editClick (row) {
+      this.editLoading = false
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row))
+      this.title = '编辑监测模型'
+      this.showModal = true
+    },
+    modalChange (modalStatus) {
+
+    },
+    modalOk (formName) {  
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$post('metroapi/equipment/editEquipmentType', this.formOption).then(res=>{
+            if (res.httpCode == 1 ){
+              this.showModal = false
+              this.$Message.info(res.msg)
+              this.getTableData()
+            } else {
+              this.$Message.info(res.msg)
+            }
+          })
+        } else {
+          this.showModal = true
+        }
+      })
+    },
+    modalCancel () {
+      this.showModal = false
+    },
+    tabsClick (name) {
+      this.currentModalTabs = name
+      if (this.currentModalTabs == '监测指标') {
+        this.apiUrl = 'metroapi/equipment/equipmentTypeDetail'
+        this.columnsModal = this.columnsEquipType
+      } else if (this.currentModalTabs == '关联设备') {
+        this.apiUrl = 'metroapi/equipment/queryEquipmentByTypePage'
+        this.columnsModal = this.columnsRelatedEquip
+      }
+      this.$nextTick(() => {    
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0) 
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    }
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main {
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+}
+.common-search {
+  width: 100%;
+}
+>>> .common-search .ivu-input {
+  background-color: #06214D;
+  border: 1px solid #2355A6;
+  border-radius: 15px;
+  color: #fff;
+  height: 32px;
+}
+>>> .common-search .ivu-input:focus {
+    border-color: #0185ea;
+}
+.content-body {
+  width: 100%;
+  height: 100%;
+  background: #06214D;
+}
+.station-tree {
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-body {
+  border: 1px solid #204384;
+  height: 100%;
+  padding: 10px;
+}
+.station-tree-center {
+  height: calc(100% - 32px);
+  padding-top: 10px;
+  // display: flex;
+}
+.station-tree-left {
+  height: 100%;
+  overflow: auto;
+}
+.station-tree-left-notree {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  fon-size: 14px;
+}
+.right-main {
+  height: 100%;
+  padding: 10px 0;
+  position: relative;
+  // padding: 16px;
+}
+.manage-main-top {
+  padding: 12px 0;
+  display: flex;
+  justify-content: flex-end;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 100px);
+}
+.manage-main-center .common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 59px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 59px;
+ }
+>>> .common-table .ivu-spin-fix {
+  top: 59px;
+  height: calc(100vh - 280px);
+}
+>>> .common-table .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+  height: calc(100vh - 280px);
+}
+>>> .common-table .ivu-table-tip table {
+ display: none;
+}
+.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;
+  }
+}
+
+>>> .edit-table .ivu-table-body{
+  max-height: 475px;
+  overflow: hidden; 
+  overflow-y: auto;
+}
+>>> .edit-table .ivu-table th {
+  height: 48PX;
+ }
+ >>> .edit-table .ivu-table td {
+  height: 48PX;
+ }
+>>> .edit-table .ivu-spin-fix {
+  top: 0;
+  height: auto;
+}
+>>> .edit-table .ivu-table-tip {
+  background: none;
+  height: auto;
+}
+>>> .edit-table .ivu-table-tip table {
+ display: block;
+}
+>>> .edit-table .ivu-table-tip table td{
+ border-bottom: none;
+}
+// >>> .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-top-especial {
+//   margin-bottom: -10px;
+// }
+// >>> .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: 100%;
+//   display: flex;
+// }
+// >>> .item-especial {
+//   width: 100%;
+// }
+// >>> .modal-content-item-name {
+//   width: 25%;
+//   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: 75%;
+//   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 .modal-content-item-name {
+//   border-bottom: 1px solid #21437B;
+// }
+// >>> .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;
+// }
+.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;
+}
+</style>

src/views/homecomponents/BasicInfomation/DeviceTypeManage.vue

@@ -83,6 +83,7 @@
       reset-drag-position
       footer-hide
       :mask-closable="false"
+      @on-visible-change="modalDetailChange"
       class-name="common-modal common-modal-detail">
        <Tabs :value="currentModalTabs" @on-click="tabsClick" class="common-tabs">
         <TabPane v-for="tab in tabsModalData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
@@ -387,6 +388,12 @@ export default {
       this.$refs.formOption.resetFields();
      }
     },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
     modalOk (formName) {
        if (this.title == '新增设备类型') {
         this.$refs[formName].validate((valid) => {
@@ -449,9 +456,11 @@ export default {
     tabsClick (name) {
       this.currentModalTabs = name
       if (this.currentModalTabs == '设备类型信息') {
+        this.detailParams.pageNum = 1
         this.apiUrl = 'metroapi/equipment/equipmentTypeDetail'
         this.columnsModal = this.columnsEquipType
       } else if (this.currentModalTabs == '关联设备') {
+        this.detailParams.pageNum = 1
         this.apiUrl = 'metroapi/equipment/queryEquipmentByTypePage'
         this.columnsModal = this.columnsRelatedEquip
       }

src/views/homecomponents/BasicInfomation/LineStationManage.vue

@@ -10,7 +10,7 @@
           <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"/>
+                <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">

src/views/homecomponents/EquipmentAnalysis/AlarmAcknowledgConfig.vue

@@ -24,7 +24,7 @@
             </Select>
           </FormItem> -->
           <FormItem label="" prop="name">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.name" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.name" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -78,7 +78,7 @@
         <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="strategyName" style="width:100%">
+        <FormItem label="策略名称：" prop="strategyName" style="width:100%">
           <Input v-model.trim="formOption.strategyName" maxlength="20" show-word-limit /> 
         </FormItem>
         <FormItem label="来源应用：" prop="appId" style="width:100%">
@@ -103,7 +103,7 @@
           <Col span="5" :class="{'row-first': index == 0}" class="row-select">
             <FormItem
               :prop="'alertStrategyAutoConfirmDTOList.'+index+'.rankId'" :rules="{required: true,type: 'number',message: '请选择告警等级',trigger: 'change'}">
-              <Select v-model="item.rankId" style="width: 100%" placeholder="告警等级" transfer>
+              <Select v-model="item.rankId" style="width: 100%" placeholder="告警等级" transfer @on-change="selectRank(item.rankId,index)" ref="rank">
                 <Option v-for="firstitem in alarmLevelModalData" :value="firstitem.id" :key="firstitem.id">{{ firstitem.name }}</Option>
               </Select>
             </FormItem>
@@ -229,7 +229,7 @@
   </div>
 </template>
 <script>
-const defaultFrom = {strategyName:'',appId:'',equipmentTypeId: ''}
+const defaultFrom = {strategyName:'',appId:'',equipmentTypeId: '',enabled: 0}
 export default {
   name: "AlarmAcknowledgConfig",
   components:{
@@ -378,7 +378,7 @@ export default {
       activeColor: '#E92E2E',
       activeClass: '',
       modalTitle: '',
-      formOption: {strategyName:'',appId:'',equipmentTypeId: ''},
+      formOption: {strategyName:'',appId:'',equipmentTypeId: '',enabled: 0},
       ruleValidate: {
         strategyName: [{
           required: true,
@@ -595,7 +595,7 @@ export default {
           let arr = this.formCustom.alertStrategyAutoConfirmDTOList
           for (var i = 0; i < arr.length; i++) {
               for (var j = i + 1; j < arr.length; j++) {
-                  if (arr[i].rankId == arr[j].rankId && arr[i].autoStatus!=arr[j].autoStatus) 
+                  if (arr[i].rankId == arr[j].rankId) 
                   { 
                     canSave = false; 
                     break;
@@ -607,7 +607,7 @@ export default {
           } else {
             this.$Message['error']({
               background: true,
-              content: '同一个等级不能重复存在两种确认方式'
+              content: '同一个等级不能存在两条策略'
            });
           }
         })
@@ -706,6 +706,16 @@ export default {
         this.formCustom.alertStrategyAutoConfirmDTOList.splice(i,1)
       }
     },
+   selectRank (val,index) {
+      this.formCustom.alertStrategyAutoConfirmDTOList[index].rankId = val
+      let rankName = ''
+      this.alarmLevelModalData.forEach((item)=> {
+        if (val == item.id) {
+         rankName = item.name
+        }
+      })
+      this.formCustom.alertStrategyAutoConfirmDTOList[index].rankName = rankName
+    }
   }
 };
 </script>
@@ -722,8 +732,7 @@ export default {
   display: flex;
   align-items: center;
    .ivu-select {
-     width: 165px;
-     padding-right: 10px;
+     width: 200px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
@@ -762,16 +771,22 @@ export default {
   height: calc(100% - 150px);
 }
 .common-table {
-  max-height: 100%;
+  height: 100%;
+  // max-height: 100%;
+}
+>>> .common-table .ivu-table-body{
+  height: calc(100% - 49px);
+  overflow: hidden;
+  overflow-y: auto;
 }
 >>> .common-table .ivu-table th {
-  height: 50px;
+  height: 49px;
  }
  >>> .common-table .ivu-table td {
-  height: 49.5px;
+  height: 48.5px;
  }
   >>> .common-table .ivu-spin-fix {
-   top: 50px;
+   top: 49px;
  }
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);

src/views/homecomponents/EquipmentAnalysis/AlarmFilterConfig.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="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :editable="false" placeholder="过滤时间范围" class="common-date-picker date-picker-main" :clearable="false" @on-change="changePicker"></DatePicker>
           </FormItem>
           <!-- <FormItem label="" prop="equipmentType">
              <Select v-model="tableParams.equipmentType" placeholder="设备类型">
@@ -32,7 +32,7 @@
             </Select>
           </FormItem> -->
           <FormItem label="" prop="name">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.name" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.name" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -110,7 +110,7 @@
           </Select>
         </FormItem>
          <FormItem label="过滤时间：" prop="dates" style="width:100%">
-          <DatePicker type="daterange" :value="formOption.dates" style="width:100%" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-start" placeholder="过滤时间范围" @on-change="changeModalPicker"></DatePicker>
+          <DatePicker type="datetimerange" :value="formOption.dates" format="yyyy-MM-dd HH:mm:ss" placeholder="过滤时间范围" style="width:100%" class="common-date-picker date-picker-main" :clearable="false" :editable="false" @on-change="changeModalPicker"></DatePicker>
         </FormItem>
 			</Form>
       <div slot="footer">
@@ -137,7 +137,8 @@
   </div>
 </template>
 <script>
-const defaultFrom = {filterName: '',lineId: '',stationId: '',appId:'',rankId: '',filterBeginTime: '',filterEndTime: '',dates:[]}
+import moment from "moment"
+const defaultFrom = {filterName: '',lineId: '',stationId: '',appId:'',rankId: '',filterBeginTime: '',filterEndTime: '',dates:[],enabled: 0}
 export default {
   name: "AlarmFilterConfig",
   components:{
@@ -276,17 +277,21 @@ export default {
             title: '开始时间',
             key: 'filterBeginTime',
             align: 'center',
+            ellipsis: true,
+            tooltip: true
           },
           {
             title: '结束时间',
             key: 'filterEndTime',
             align: 'center',
+            ellipsis: true,
+            tooltip: true
           },
           {
           title: '是否启用',
           key: 'enabled',
           align: 'center',
-          width: 120,
+          width: 100,
           render: (h, params) => {
             return h('div', [                             
               h('i-switch', {
@@ -317,7 +322,7 @@ export default {
           title: '操作',
           align: 'center',
           slot: 'action',
-          width: 120,
+          width: 80,
         }
       ],
       showModal: false,
@@ -328,7 +333,7 @@ export default {
       activeClass: '',
       modalTitle: '',
       dateModalRange: [],
-      formOption: {filterName: '',lineId: '',stationId: '',appId:'',rankId: '',filterBeginTime: '',filterEndTime: '',dates:[]},
+      formOption: {filterName: '',lineId: '',stationId: '',appId:'',rankId: '',filterBeginTime: '',filterEndTime: '',dates:[],enabled: 0},
       ruleValidate: {
         filterName: [{
           required: true,
@@ -346,6 +351,8 @@ export default {
     };
   },
   mounted() {
+    //  this.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
+    //   this.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
     this.getType()
   },
   methods: {
@@ -660,14 +667,13 @@ export default {
 }
 .search-list {
   display: flex;
-  padding: 10px 0 0;
+  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 {
@@ -678,7 +684,7 @@ export default {
      height: 32px;
    }
     >>> .common-date-picker .ivu-input {
-    width: 210px;
+    width: 332px;
    }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;
@@ -702,23 +708,29 @@ export default {
   flex-wrap: wrap;
 }
 >>> .common-form-list .ivu-form-item {
-  margin-bottom: 1px;
+  margin-bottom: 10px;
 }
 .manage-main-center {
   width: 100%;
   height: calc(100% - 150px);
 }
 .common-table {
-  max-height: 100%;
+  height: 100%;
+  // max-height: 100%;
+}
+>>> .common-table .ivu-table-body{
+  height: calc(100% - 49px);
+  overflow: hidden;
+  overflow-y: auto;
 }
 >>> .common-table .ivu-table th {
-  height: 50px;
+  height: 49px;
  }
  >>> .common-table .ivu-table td {
-  height: 49.5px;
+  height: 48.5px;
  }
   >>> .common-table .ivu-spin-fix {
-   top: 50px;
+   top: 49px;
  }
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);

src/views/homecomponents/EquipmentAnalysis/AlarmHandling.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="content-main">
-    <!-- <div class="content-body-wrap">
+    <div class="content-body-wrap">
      <div class="content-body">
         <Tabs :value="currentTabs" @on-click="tabsClick" class="common-tabs">
           <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
         </Tabs>
          <Row :gutter="8" style="width:100%;height: calc(100% - 50px)">
-          <i-col span="5" style="height:100%">
+          <i-col span="4" style="height:100%">
             <div class="station-tree">
               <div class="station-tree-body">
                 <div class="station-tree-top">
-                  <Input suffix="ios-search" placeholder="请输入关键字查询" clearable search v-model="currentStation" class="common-search"  @on-search="iconChange" @on-clear="clearChange"/>
+                  <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">
@@ -23,7 +23,7 @@
               </div>
             </div>
           </i-col>
-          <i-col span="19" style="height:100%">
+          <i-col span="20" style="height:100%">
             <div class="right-main">
               <unable-deter-alarm  ref="unableDeter" class="content-body-manage" v-if="currentTabs == '告警信息-无法判定等级'"></unable-deter-alarm>
               <to-confirmed-alarm  ref="toConfirmed" class="content-body-manage" v-if="currentTabs == '告警信息-待确认'"></to-confirmed-alarm>
@@ -35,7 +35,7 @@
           </i-col>
         </Row>
      </div>
-    </div> -->
+    </div>
   </div>
 </template>
 <script>
@@ -178,32 +178,26 @@ export default {
       if (currentTabs == '告警信息-无法判定等级' || !currentTabs) {
          this.$nextTick(()=> {
           this.$refs.unableDeter.getTableData(currentStation,arr,level)
-          this.$refs.unableDeter.getType()
         })
       } else if(currentTabs == '告警信息-待确认'){       
         this.$nextTick(()=> {
           this.$refs.toConfirmed.getTableData(currentStation,arr,level)
-          this.$refs.toConfirmed.getType()
         })
       } else if(currentTabs == '告警信息-已确认'){
         this.$nextTick(()=> {
           this.$refs.confirmed.getTableData(currentStation,arr,level)
-          this.$refs.confirmed.getType()
         })
       } else if(currentTabs == '告警信息-已清除'){
         this.$nextTick(()=> {
           this.$refs.cleared.getTableData(currentStation,arr,level)
-          this.$refs.cleared.getType()
         })
       } else if(currentTabs == '告警信息-已过滤'){
         this.$nextTick(()=> {
           this.$refs.filtered.getTableData(currentStation,arr,level)
-          this.$refs.filtered.getType()
         })
       } else {
          this.$nextTick(()=> {
           this.$refs.comprehensive.getTableData(currentStation,arr,level)
-          this.$refs.comprehensive.getType()
         })
       }
     },

src/views/homecomponents/EquipmentAnalysis/AlarmLevelConfig.vue

@@ -4,10 +4,10 @@
       <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>
+            <DatePicker type="datetimerange" :value="dateRange" format="yyyy-MM-dd HH:mm:ss" placeholder="更新时间范围" class="common-date-picker date-picker-main" :clearable="false" :editable="false" @on-change="changePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="keywords">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -60,12 +60,12 @@
       @on-visible-change="modalChange"
       :mask-closable="false"
       class-name="common-modal">
-      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="130">
           <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">
+         <FormItem label="告警等级名称：" prop="name">
           <Input v-model.trim="formOption.name" maxlength="20" show-word-limit /> 
           <div class="common-form-item-text">告警等级名称不可重复，范围包含现有等级名称、关闭状态等级名称</div> 
         </FormItem>
@@ -475,7 +475,6 @@ export default {
   align-items: center;
    .ivu-select {
      width: 150px;
-     padding-right: 10px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
@@ -486,7 +485,7 @@ export default {
      height: 32px;
    }
    >>> .common-date-picker .ivu-input {
-    width: 210px;
+    width: 332px;
    }
     >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;

src/views/homecomponents/EquipmentAnalysis/AlarmMonitor.vue

@@ -1,151 +1,539 @@
 <template>
-  <div class="container">
-    <!-- 模糊查询 -->
-    <!-- <Input placeholder="输入关键字进行过滤" v-model="filterText"/>
-    <Tree :data="data" show-checkbox></Tree> -->
-    <!-- 简单模糊查询 -->
-    <!-- <input type="text" placeholder="请输入..." v-model="searchVal" />
-    <ul>
-      <li
-        v-for="(item, index) in NewItems"
-        :key="index"
-        :value="item.value"
-        v-text="item.name"
-      ></li>
-    </ul> -->
+  <div class="content-main">
+    <div class="content-body-wrap">
+     <div class="content-body">
+         <Row :gutter="8" style="width:100%;height: 100%">
+          <i-col span="5" style="height:100%">
+            <div v-if="currentTabs == '今日告警'" class="content-body-left">
+              <div class="content-body-sum">
+                <div class="content-body-sum-top">
+                  <div class="top-title">系统累计监测告警</div>
+                  <div class="sub-top-title">监测告警次数</div>
+                  <div class="sub-top-num sub-top-num-go" @click="go">{{todayAlertObj.alertNum}}次</div>
+                </div>
+                <div class="content-body-sum-bot">
+                  <div class="bot-title">
+                    <span class="bot-title-left">
+                      <span>已处理</span>
+                      <span class="bot-title-line">丨</span>
+                    </span>
+                    <span class="bot-title-right">未处理</span>
+                  </div>
+                  <div class="bot-num">
+                    <span class="bot-num-left">
+                      <span>{{todayAlertObj.processedNum}}条</span>
+                      <span class="bot-num-line">丨</span>
+                    </span>
+                    <span class="bot-num-right">{{todayAlertObj.unProcessedNum}}条</span>
+                  </div>
+                </div>
+                <div class="content-body-sum-bot">
+                  <div class="bot-title">
+                    <span class="bot-title-left">
+                      <span>自动处理</span>
+                      <span class="bot-title-line">丨</span>
+                    </span>
+                    <span class="bot-title-right">手动处理</span>
+                  </div>
+                  <div class="bot-num">
+                    <span class="bot-num-left">
+                      <span>{{todayAlertObj.autoProcessing}}条</span>
+                      <span class="bot-num-line">丨</span>
+                    </span>
+                    <span class="bot-num-right">{{todayAlertObj.manualProcessingNum}}条</span>
+                  </div>
+                </div>
+              </div>
+              <div class="content-body-sum content-body-item2">
+                <div class="top-title">系统覆盖监测设备</div>
+                 <div class="content-body-sum-bot">
+                  <div class="bot-title">
+                    <span class="bot-title-left">
+                      <span>设备总数</span>
+                      <span class="bot-title-line">丨</span>
+                    </span>
+                    <span class="bot-title-right">设备类型</span>
+                  </div>
+                  <div class="bot-num">
+                    <span class="bot-num-left">
+                      <span>{{todayAlertObj.equipmentNum}}台</span>
+                      <span class="bot-num-line">丨</span>
+                    </span>
+                    <span class="bot-num-right">{{todayAlertObj.equipmentTypeNum}}种</span>
+                  </div>
+                </div>
+              </div>
+              <div class="content-body-sum content-body-item3">
+                 <div class="top-title">系统覆盖监测内容</div>
+                 <div class="content-body-sum-bot">
+                  <div class="bot-title">
+                    <span class="bot-title-left">
+                      <span>自动监测指标</span>
+                      <span class="bot-title-line">丨</span>
+                    </span>
+                    <span class="bot-title-right">告警指标</span>
+                  </div>
+                  <div class="bot-num">
+                    <span class="bot-num-left">
+                      <span>{{todayAlertObj.autoDetectIndexNum }}条</span>
+                      <span class="bot-num-line">丨</span>
+                    </span>
+                    <span class="bot-num-right">{{todayAlertObj.alertIndexNum}}条</span>
+                  </div>
+                </div>
+              </div>
+              <div class="content-body-sum content-body-item3">
+                 <div class="top-title">系统累计监测运行</div>
+                 <div class="content-body-sum-bot">
+                  <div class="bot-title">
+                    <span class="bot-title-left">
+                      <span>监测站点</span>
+                      <span class="bot-title-line">丨</span>
+                    </span>
+                    <span class="bot-title-right">监测天数</span>
+                  </div>
+                  <div class="bot-num">
+                    <span class="bot-num-left">
+                      <span>{{todayAlertObj.detectStationNum}}个</span>
+                      <span class="bot-num-line">丨</span>
+                    </span>
+                    <span class="bot-num-right">{{todayAlertObj.detectDays}}天</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="station-tree" v-else>
+              <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%;position: relative">
+            <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>
+            <div class="time">
+              <div class="time-body">
+                <span class="time-min">数据更新时间  ：<span>{{timeDate}} {{todayMin}}</span></span>
+              </div>
+            </div>
+            <div class="right-main" :class="{'right-main-today': currentTabs ==  '今日告警'}">
+              <alarm-today  ref="alarmToday" class="content-body-manage" v-if="currentTabs == '今日告警'" @skipEquipTabs="skipEquipTabs"></alarm-today>
+              <alarm-real-line  ref="alarmRealLine" class="content-body-manage" v-if="currentTabs == '实时告警列表-线网视图'" @skipTabs="skipTabs"></alarm-real-line>
+              <alarm-real-station  ref="alarmRealStation" class="content-body-manage" v-if="currentTabs == '实时告警列表-设备视图'"></alarm-real-station>
+            </div>
+          </i-col>
+        </Row>
+     </div>
+    </div>
   </div>
 </template>
 <script>
-import _ from "lodash";
+import AlarmToday from './AlarmToday.vue'
+import AlarmRealLine from './AlarmRealLine.vue'
+import AlarmRealStation from './AlarmRealStation.vue'
 export default {
   name: "AlarmMonitor",
-  components: {},
+   components:{
+    AlarmToday,AlarmRealLine,AlarmRealStation
+  },
   data() {
     return {
-      searchVal: "",
-      items: [
-        {
-          name: "上海",
-          value: "sh",
-        },
-        {
-          name: "北京",
-          value: "bj",
-        },
-        {
-          name: "重庆",
-          value: "cq",
-        },
-        {
-          name: "嗨嗨嗨",
-          value: "hhh",
-        },
-        {
-          name: "海上",
-          value: "hs",
-        },
-        {
-          name: "京都",
-          value: "jd",
-        },
-      ],
-       filterText:null,
-                flag:0,
-                data:[],
-                data2:  [{
-                    expand: true,
-                    title: '一级 1',
-                    children: [{
-                        expand: true,
-                        title: '二级 1-1',
-                        children: [
-                            {
-                            expand: true,
-                            title: '三级 1-1-2',
-                            children: [
-                                {
-                                expand: true,
-                                title: '四级 1-1-3-4'
-                                }]
-                            }, 
-                            {
-                            expand: true,
-                            title: '三级 1-1-2'
-                            }
-                        ]
-                    }]
-                    }, {
-                    expand: true,
-                    title: '一级 2',
-                    children: [{
-                        expand: true,
-                        title: '二级 2-1'
-                    }, {
-                        expand: true,
-                        title: '二级 2-2'
-                    }]
-                    }, {
-                    expand: true,
-                    title: '一级 3',
-                    children: [{
-                        expand: true,
-                        title: '二级 3-1'
-                    }, {
-                        expand: true,
-                        title: '二级 3-2'
-                    }]
-                    }],
+      currentStation: '',
+      currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
+      showTree: true,// 是否显示树形组件
+		  stationData: [],
+      tabsData: [{label:'今日告警'},{label:'实时告警列表-线网视图'},{label:'实时告警列表-设备视图'}],
+      currentTabs: '今日告警',
+      timeDate: '',
+      todayMin: '',
+      treeUrl: 'metroapi/lineStation/lineStationTree',
+      equipmentId: null,
+      todayAlertObj: {}
     };
   },
-  watch: {
-      filterText(val) {
-          let arr=JSON.parse(JSON.stringify(this.data2))
-          this.data=this.filterNode(val,arr)
-      }
+  created () {
+    this.getTodayData()
+    this.getTreeList()
+    if (this.$route.params.equipmentId) {
+      sessionStorage.setItem("currentTabs",'实时告警列表-设备视图')
+    }
   },
   mounted() {
-    this.data=this.data2
+    this.formatDate()
+    this.currentTime(); 
+    this.getCurrentTab (sessionStorage.getItem('currentTabs'))
   },
-  computed: {
-    NewItems() {
-      var _this = this;
-      var NewItems = [];
-      this.items.map(function (item) {
-        if (item.name.search(_this.searchVal) != -1) {
-          NewItems.push(item);
+   // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
+  },
+  methods: {
+    go () {
+      let menuNameArr = []
+      menuNameArr = ['设备分析','告警分析','综合查询']
+      sessionStorage.setItem('routname', '/MainPage/ComprehensiveQuery')
+      sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+      this.$router.push({ name: 'ComprehensiveQuery'})
+    },
+    currentTime() {
+      setInterval(this.formatDate, 1000);
+    },
+    formatDate() {
+      let date = new Date();
+      let year = date.getFullYear(); // 年
+      let month = date.getMonth() + 1; // 月
+      let day = date.getDate(); // 日
+      let hour = date.getHours(); // 时
+      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+      let minute = date.getMinutes(); // 分
+      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+      let second = date.getSeconds(); // 秒
+      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
+      // this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
+      this.todayMin = `${hour}:${minute}:${second}`;
+      this.timeDate = `${year}/${month}/${day}`;
+		},
+    // 获取
+    getTodayData () {
+     this.$get('metroapi/alert/processing/todayAlert').then(res=>{
+        if (res.httpCode == 1 ){
+          this.todayAlertObj = res.data
         }
+      })
+    },
+     // 获取树形数据
+    getMetroLevel () {
+      if (sessionStorage.getItem('currentTabs') == '实时告警列表-设备视图') {
+        this.treeUrl = 'metroapi/application/appEquipmentTypeTree'
+      } else {
+        this.treeUrl = 'metroapi/lineStation/lineStationTree'
+      }
+      this.$get(this.treeUrl).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.getCurrentTab(this.currentTabs,this.currentStation)
+      })
+      if(this.currentStation != ''){
+        this.showTree = false
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+      } else {
+        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
+        this.showTree = true
+        this.stationData = this.getTree(this.stationData)
+        return 
+      }
+      this.getSelectedItem()
+		}, 500),
+    clearChange () {
+      this.getSelectedItem()
+      this.getCurrentTab(this.currentTabs,this.currentStation)
+    },
+    getSelectedItem  () {
+      this.stationData.forEach((item, index,itemArr) => {
+        item.expand = false;
+        item.disabled = false; 
+        item.selected = false;
+        if (item.title == this.currentStation) {
+            item.selected = true;
+            item.disabled = true; // disabled 是否禁止选中 
+            item.expand = true;
+            this.currentStaData.push(item)
+            this.showTree = true
+        }
+        if (this.currentStation == '' && index == 0) {
+          item.expand = true
+        }
+        if (item.children) {
+          item.children.forEach((val, i,valArr) => {
+          val.expand = false; //expand 是否展开直子节点 
+          val.disabled = false; // disabled 是否禁止选中
+          val.selected = false;
+          if (val.title == this.currentStation) {
+            val.selected = true;
+            val.disabled = true; // disabled 是否禁止选中 
+            val.expand = true;
+            item.expand = true;
+            this.currentStaData.push(val)
+            this.showTree = true
+          }
+          if (this.currentStation == '' && i==0) {
+            val.expand = true
+          }
+          if (val.children) {
+            val.children.forEach ((lastVal,lastIndex) => {
+              lastVal.selected = false; //expand 是否展开直子节点 
+              lastVal.disabled = false; 
+              lastVal.expand = false;
+              if (lastVal.title == this.currentStation) {
+                lastVal.selected = true;
+                lastVal.disabled = true; // disabled 是否禁止选中 
+                lastVal.expand = true;
+                val.expand = true
+                item.expand = true
+                this.currentStaData.push(lastVal)
+                this.showTree = true
+              } 
+            })
+          } 
+        });
+        }    
+      });
+    },
+    treeChange(val,arr,level) {
+      this.currentStation = val
+      this.getCurrentTab(this.currentTabs,this.currentStation,arr,level)
+		},
+    skipTabs (equipmentId) { //实时告警列表-线网视图 跳转到 实时告警列表-设备视图
+      this.getTreeList()
+      this.getCurrentTab(sessionStorage.getItem('currentTabs'),'',null,null,equipmentId)
+    },
+    skipEquipTabs (obj) {
+      this.getTreeList()
+      this.getCurrentTab(sessionStorage.getItem('currentTabs'),'',null,null,obj)
+    },
+    tabsClick (name) {
+      this.stationData = this.getElseTree(this.stationData) // 切换tab页时，清除tree选中情况
+      this.currentStation = ''
+      sessionStorage.setItem("currentTabs",name)
+      this.getCurrentTab (name)
+      this.getTreeList()
+      if (document.querySelector(".station-tree-left")) {
+        document.querySelector(".station-tree-left").scrollTo(0, 0) 
+      }
+    },
+    getCurrentTab (currentTabs,currentStation,arr,level,equipmentId) {
+      this.currentTabs = currentTabs || '今日告警'
+      if (currentTabs == '今日告警' || !currentTabs) {
+        this.$route.params.equipmentId = null //告警处理页面跳转点击tab页，清除跳转参数值 先不考虑 等测试提bug再放开
+      } else if(currentTabs == '实时告警列表-线网视图'){ 
+        this.$route.params.equipmentId = null //告警处理页面跳转点击tab页，清除跳转参数值 先不考虑 等测试提bug再放开
+        this.$nextTick(()=> {
+         this.$refs.alarmRealLine.getTableData(currentStation,arr,level,equipmentId)
+        })
+      } else if(currentTabs == '实时告警列表-设备视图'){
+        this.$nextTick(()=> {
+          this.$refs.alarmRealStation.getTableData(currentStation,arr,level,equipmentId)
+        })
+      }
+    },
+    getTreeList () {
+      if (sessionStorage.getItem('currentTabs')!= '今日告警') {
+        this.getMetroLevel()
+      }
+    },
+    // 递归函数 每层数组的第一个对象里的属性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;
       });
-      return NewItems;
     },
   },
-  methods: {
-     //过滤树节点
-            filterNode(val,List){
-                //过滤出满足条件的数组
-                let List1=List.filter(item=>{
-                    //如果该元素有children，则优先处理children的
-                    if(item.children){
-                        //过滤children里面满足条件的
-                        item.children=this.filterNode(val,item.children)
-                        //如果children里面没有满足条件的，则进入，否则返回true
-                        if(!item.children.some(item1=>item1.title.indexOf(val) !== -1)){
-                            //判断children里面是否还有一层children,如果有则对内层children继续调用函数判断，否则返回title中含有关键字的元素
-                            if(item.children.some(item1=>item1.children)){
-                                item.children.forEach(item2 => {
-                                    item2.children&&this.filterNode(val,item2.children)
-                                });
-                            }else{
-                                return item.title.indexOf(val) > -1
-                            }
-                        }   
-                        return true
-                    }
-                    //返回title中含有关键字的元素
-                    return item.title.indexOf(val) > -1
-                })
-                return List1
-            }
-  },
+  beforeDestroy() {
+    if (this.formatDate) {
+      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
+    }
+  }
 };
 </script>
-<style scoped lang="stylus"></style>
+<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;
+}
+.content-body-left {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.content-body-sum {
+  width: 100%;
+  height: 40%;
+  background: #0A2756;
+  border: 1px solid #1957A7;
+  border-radius: 6px;
+  box-shadow: 0 0 6px  6px rgba(23, 85, 163, 0.3) inset;
+}
+.content-body-sum-top {
+  text-align: center;
+  border-bottom: 1px solid #2D66B3;
+  margin: 0 20%;
+}
+.top-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #0185EA;
+  padding-top: 25px;
+  text-align: center;
+}
+.sub-top-title {
+  font-size: 14px;
+  color: #82ABEE;
+  padding-top: 10px;
+}
+.sub-top-num {
+  font-size: 20px;
+  font-weight: bold;
+  color: #F19430;
+  padding: 10px 0 8px;
+}
+.sub-top-num-go {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.content-body-sum-bot {
+  text-align: center;
+}
+.bot-title {
+  font-size: 14px;
+  color: #82ABEE;
+  padding-top: 25px;
+  display: flex;
+  justify-content: space-between;
+}
+.bot-title-left {
+  width: 50%;
+  text-align: right;
+}
+.bot-title-right {
+  width: 50%;
+  text-align: left;
+}
+.bot-num {
+  display: flex;
+  justify-content: space-between;
+  font-size: 16px;
+}
+.bot-num-left {
+  width: 50%;
+  text-align: right;
+  color: #3EC537;
+}
+.bot-num-line {
+  color: #3489DF;
+  display: inline-block;
+  width: 15px;
+}
+.bot-num-right {
+  width: 50%;
+  text-align: left;
+  color: #FBE847;
+}
+.content-body-item2 , .content-body-item3 ,.content-body-item4{
+  height: 20%;
+  margin-top: 10px;
+}
+.content-body-item2 .bot-title, .content-body-item3 .bot-title,.content-body-item4 .bot-title{
+  padding-top: 20px;
+}
+.content-body-item2 .bot-num, .content-body-item3 .bot-num,.content-body-item4 .bot-num{
+  padding-top: 8px;
+}
+.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: calc(100% - 50px);
+  padding: 10px 0;
+}
+.right-main-today {
+  padding-bottom: 0;
+}
+.time {
+  position: absolute;
+  top: 18px;
+  right: 10px;
+  .time-min {
+    color: #0185EA;
+    font-size: 14px;
+    span {
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/homecomponents/EquipmentAnalysis/AlarmRealLine.vue

@@ -0,0 +1,880 @@
+<template>
+  <div class="content-main-manage">
+    <div class="search-list bb">
+      <div class="search-left">
+        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
+           <FormItem label="" prop="alertRankId">
+            <Select v-model="tableParams.alertRankId" placeholder="告警等级">
+              <Option v-for="item in alarmLevelData" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="applicationId">
+            <Select v-model="tableParams.applicationId" placeholder="来源应用" @on-change="selectApp">
+              <Option v-for="item in appData" :value="item.id" :key="item.id">{{ item.appName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentTypeId">
+            <Select v-model="tableParams.equipmentTypeId" placeholder="设备类型">
+              <Option v-for="item in equipTypeData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
+            </Select>
+          </FormItem>
+           <FormItem label="" prop="processingStatus">
+            <Select v-model="tableParams.processingStatus" placeholder="处理状态">
+              <Option v-for="item in alarmStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="">
+              <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" 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>
+     <div class="btn-container">
+      <span class="btn-container-download" style="opacity: 0">
+        <i class="iconfont icon-xiazai" style="cursor:pointer;color:#0185EA;fontSize:20px;marginRight:6px"></i>下载列表筛选结果
+      </span>
+      <div>
+        <Button class="common-operate-btn common-corrections" @click="correctClick"> 
+          <i class="iconfont icon-gengzhenggonggao" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量手动修正
+        </Button>
+         <Button class="common-operate-btn common-eliminate" @click="delClick"> 
+          <i class="iconfont icon-shanchu" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量清除告警
+        </Button>
+         <Button class="common-operate-btn common-confirm" @click="queenClick"> 
+          <i class="iconfont icon-queren" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量确认告警
+        </Button>
+        <!-- <Button class="common-add-btn common-forward">
+          <i class="iconfont icon-zhuanfafenxiang" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量转发通知
+        </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" @on-selection-change="selectChange">
+        <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+        <template slot-scope="{ row }" slot="alertRankColor">
+          <i class="iconfont icon-gaojing1" style="vertical-align: middle" :style="'color:' + row.alertRankColor"></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-gengzhenggonggao" style="cursor:pointer;color:#0BB0DE;fontSize:20px;marginRight:6px" @click="correctClick(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>
+            <Tooltip content="确认" placement="top">
+              <i class="iconfont icon-queren" style="cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" @click="queenClick(row)"></i>
+           </Tooltip>
+           <!-- <Tooltip content="转发" placement="top">
+              <i class="iconfont icon-zhuanfafenxiang" style="cursor:pointer;color:#BCA507;fontSize:20px;marginRight:6px" @click="forwardClick(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="25"
+      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" :label-width="0">
+        <div class="common-form-item-text">
+          将选中的告警信息等级，修正为
+        </div>
+        <FormItem label="" prop="alertRankId" style="width:100%">
+          <Select v-model="formOption.alertRankId" placeholder="告警等级">
+            <Option v-for="item in alarmLevelModalData" :value="item.id" :key="item.id">{{ item.name }}</Option>
+          </Select> 
+        </FormItem>
+        <FormItem label="" prop="alertRankId" style="width:100%">
+          <Select v-model="formOption.processingStatus" placeholder="告警状态">
+            <Option v-for="item in alarmModalStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
+          </Select> 
+        </FormItem>
+			</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">
+      <div class="common-modal-select" :style="{ color: activeColor}">已选择：{{alertIdNum}}条数据</div>
+      <i class="iconfont icon-queren" style="vertical-align: middle;cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" v-show="commonTitle=='告警确认'"></i>
+      <i class="iconfont icon-shanchu" style="vertical-align: middle;cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" v-show="commonTitle=='确认清除'"></i>
+      <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
+      @on-visible-change="modalDetailChange"
+      :mask-closable="false"
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
+  </div>
+</template>
+<script>
+import utils from "@/libs/utils"
+import moment from "moment"
+const defaultFrom = {alertRankId: null,processingStatus: null}
+export default {
+  name: "AlarmRealLine",
+  components:{
+  },
+  data() {
+    return {
+       alarmParams: {
+        keywords: '',
+        enabled: 1,
+        beginDate: '',
+        endDate: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appParams: {
+        applicationId: '',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      loading: true,
+      dateRange: [],
+      dateOperateRange: [],
+      tableParams: {
+        processingStatus: '',
+        keywords: '',
+        applicationId:'',
+        equipmentTypeId: '',
+        oneKeywords: '',
+        alertRankId: '',
+        beginAlertTime: '',
+        endAlertTime: '',
+        beginUpdateTime: '',
+        endUpdateTime: '',
+        alertRankEnabled: 1,
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      tablePage: 0,
+      rowObj: {},
+      lineTypeData: [],
+      stationTypeData: [],
+      alarmLevelData: [],
+      alarmLevelModalData: [],
+      equipTypeData: [],
+      appData: [],
+      alarmStatus: [],
+      alarmModalStatus: [],
+      columns: [
+          {
+            type: 'selection',
+            width: 60,
+            align: 'center'
+          },
+          {
+            title: '告警等级',
+            key: 'alertRankName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '警示颜色',
+            slot: 'alertRankColor',
+            align: 'center',
+            width: 90,
+          },
+          {
+            title: '设备类型',
+            key: 'equipmentTypeName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '设备名称',
+            key: 'equipmentName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '来源应用',
+            key: 'appName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '告警时间',
+            key: 'alertTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '处理状态',
+            key: 'processingStatusDesc',
+            align: 'center',
+            width: 114,
+            render:(h,params)=>{
+              let color = params.row.processingStatusDesc == '已清除' ? '#E92E2E' : '#ffffff'
+              return h('span', {style:{color: color}},params.row.processingStatusDesc)
+            }
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 160,
+        }
+      ],
+      showModal: false,
+      modalStatus: false,
+      title: '告警信息修正',
+      commonTitle: "确认清除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      dateModalRange: [],
+      formOption: {alertRankId: null,processingStatus: null},
+      idArr: [],
+      alertIds: null,
+      alertIdNum: 1,
+      operationContent: '修正',
+       detailStatus: false,
+      detailParams: {
+        alertId: null,
+        pageNum: 1,
+        pageSize: 5
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
+    };
+  },
+  mounted() {
+    this.getType()
+  },
+  methods: {
+    // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        this.detailStatus = false
+        sessionStorage.setItem("currentTabs",'实时告警列表-设备视图')
+        this.$emit('skipTabs',this.rowObj.equipmentId)
+        // this.$bus.$emit('skipBusTabs',this.rowObj.equipmentId)
+        // let menuNameArr = []
+        // menuNameArr = ['设备分析','告警分析','告警监测']
+        // sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
+        // sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+        // this.$router.push({ name: 'AlarmMonitor', params: { alertRankId:this.rowObj.id }})
+      }
+    },
+    changePicker (date) {
+      this.tableParams.beginAlertTime = date[0]
+      this.tableParams.endAlertTime = 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/application/info/list', this.applicationParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.appData = res.data.data
+          this.appData.unshift({ id: '-1', appName: '来源应用' })
+        } else {
+          this.appData = []
+        }
+      })
+      // 告警等级
+      this.$get('metroapi/alert/rank/list', this.alarmParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.alarmLevelModalData = JSON.parse(JSON.stringify(res.data.data))
+          this.alarmLevelData = res.data.data
+          this.alarmLevelData.unshift({ id: '-1', name: '告警等级' })
+        } else {
+          this.alarmLevelData = []
+          this.alarmLevelModalData = []
+        }
+      })
+      // 告警状态
+      this.$get('metroapi/dic/queryDictionary', {name:'告警处理状态'}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.alarmModalStatus = JSON.parse(JSON.stringify(res.data))
+          this.alarmStatus = res.data
+          this.alarmStatus.unshift({ id: '-1', value: '处理状态' })
+        } else {
+          this.alarmModalStatus = []
+          this.alarmStatus = []
+        }
+      })
+    },
+    selectChange (selection) {
+      this.idArr = selection.map(item => item.id)
+    },
+    // 获取表格数据
+    getTableData (keywords,arr,level,skipval) {
+       if (level) {
+        this.tableParams.keywords = ''
+        if (level == 2) {
+          this.tableParams.lineId = arr[arr.length-1]
+          this.tableParams.stationId = ''
+        } else if (level == 3) {
+          this.tableParams.lineId = arr[arr.length-2]
+          this.tableParams.stationId = arr[arr.length-1]
+        } else {
+          this.tableParams.lineId = ''
+          this.tableParams.stationId = ''
+        }
+      } else {
+        this.tableParams.lineId = ''
+        this.tableParams.stationId = ''
+        if (keywords == '合肥轨道交通' || keywords == '' || !keywords) {
+          this.tableParams.oneKeywords = ''
+        } else {
+          this.tableParams.oneKeywords = keywords
+        }
+      }
+       if (skipval && skipval.todayText == '今日') {
+        this.tableParams.beginAlertTime = moment().format("YYYY-MM-DD") + ' 00:00:00'
+        this.tableParams.endAlertTime = moment().format("YYYY-MM-DD") + ' 23:59:59'
+        this.tableParams.equipmentTypeId = skipval.equipmentTypeId
+        this.tableParams.keywords = skipval.keywords
+        this.dateRange = [moment().format("YYYY-MM-DD") + ' 00:00:00',moment().format("YYYY-MM-DD") + ' 23:59:59']
+      }
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.alertRankId = params.alertRankId == '-1' ? '':params.alertRankId
+      params.applicationId = params.applicationId == '-1' ? '':params.applicationId
+      params.equipmentTypeId = params.equipmentTypeId == '-1' ? '':params.equipmentTypeId 
+      params.processingStatus = params.processingStatus == '-1' ? '':params.processingStatus
+      this.loading = true
+      this.$get('metroapi/alert/processing/details', 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
+          }
+        })
+    },
+    selectApp (val) {
+      this.appParams.applicationId = val
+      this.tableParams.equipmentTypeId = ''
+      if (val) {
+        this.getAddEquipType( this.appParams)
+      }
+    },
+    // 获取设备类型 
+    getAddEquipType (params) {
+      if (params.applicationId == '-1') {
+        this.equipTypeData = [{ equipmentTypeId: '-1', equipmentName: '设备类型' }]
+      } else {
+        this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+          if (res.httpCode == 1 ){
+            this.equipTypeData = res.data.data
+            this.equipTypeData.unshift({ equipmentTypeId: '-1', equipmentName: '设备类型' })
+          } else {
+            this.equipTypeData = []
+          }
+        })
+      }
+    },
+    searchClick () {
+      this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
+    },
+    resetClick (name) {
+     this.dateRange = []
+     this.tableParams.beginAlertTime = ''
+     this.tableParams.endAlertTime = ''
+     this.equipTypeData = [{ equipmentTypeId: '-1', equipmentName: '设备类型' }]
+     this.$refs[name].resetFields()
+     this.getTableData()
+    },
+    correctClick (row) {
+      this.rowObj = row
+      if (row.id || this.idArr.length>0) {
+        this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+        this.title = '告警信息修正'
+        this.operationContent = '修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
+        this.alertIdNum = row.id ? 1 : this.idArr.length
+        this.showModal = true
+      } else {
+        this.$Message.info('请至少选择一条数据')
+      }
+    },
+    changeStateData (params) {
+      this.$post('metroapi/alert/processing/update/status',params).then(res=>{
+        if (res.httpCode == 1 ){
+          if (this.showModal) {
+           this.showModal = false
+          } else if(this.modalStatus){
+            this.modalStatus = false
+          } 
+          this.$Message.info(res.msg)
+          this.getTableData()
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    queenClick (row) {
+      this.rowObj = row
+      this.commonTitle = '告警确认'
+      this.activeColor = '#08AF68'
+      this.activeClass = ''
+      this.modalTitle = '告警信息状态将被标注为【已确认】，告警将被确认为有效信息。'
+      this.operationContent = '确认'
+      this.formOption.alertRankId = null
+      this.formOption.processingStatus = 39
+      this.alertIds = row.id ? row.id : this.idArr.join()
+      this.alertIdNum = row.id ? 1 : this.idArr.length
+      this.modalStatus = true
+    },
+    forwardClick (row) {
+
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认清除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '告警信息状态将被标注为【已清除】，从系统有效数据中脱钩。'
+      this.operationContent = '清除'
+      this.formOption.alertRankId = null
+      this.formOption.processingStatus = 40
+      this.alertIds = row.id ? row.id : this.idArr.join()
+      this.alertIdNum = row.id ? 1 : this.idArr.length
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
+    modalOk () {
+      let params = {
+        alertIds: this.alertIds,
+        processingStatus: this.formOption.processingStatus,
+        alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
+      }
+      this.changeStateData(params)
+    },
+    modalCancel () {
+      this.showModal = false
+    },
+    commonOk () {
+      let params = {
+        alertIds: this.alertIds,
+        processingStatus: this.formOption.processingStatus,
+        alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
+      }
+      this.changeStateData(params)
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main-manage {
+  position: relative;
+  height: 100%;
+}
+.search-list {
+  display: flex;
+  padding: 10px 0 0;
+}
+.search-left {
+  display: flex;
+  align-items: center;
+   .ivu-select {
+     width: 125px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 152px;
+     height: 32px;
+   }
+    >>> .common-date-picker .ivu-input {
+    width: 234px;
+   }
+   >>> .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: space-between;
+  padding-bottom: 10px;
+  color: #0185EA;
+  font-size: 14px;
+  .btn-container-download {
+    cursor: pointer;
+  }
+  .common-corrections {
+    background: #053B4A;
+    border: 1px solid #0098C2;
+    color: #FFFFFF;
+    margin-right: 5px;
+  }
+  .common-eliminate {
+    background: #4C2215;
+    border: 1px solid #8E1919;
+    color: #FFFFFF;
+    margin-right: 5px;
+  }
+  .common-confirm {
+    background: #0C3423;
+    border: 1px solid #08AF68;
+    color: #FFFFFF;
+    margin-right: 5px;
+  }
+  .common-forward {
+    background: #413A09;
+    border: 1px solid #A69311;
+    color: #FFFFFF;
+  }
+}
+.common-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+>>> .common-form-list .ivu-form-item {
+  margin-bottom: 10px;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 150px);
+}
+.common-table {
+  max-height: 100%;
+}
+// >>> .common-table .table-state-clear .ivu-table-cell-tooltip-content{
+//  color:#E92E2E;
+// }
+>>> .common-table .ivu-table th {
+  height: 50px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 49.5px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 50px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 375px);
+ }
+ >>> .common-table .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .app-table .ivu-table-tip {
+  height: calc(100vh - 375px);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+.common-form-item-text {
+  font-size: 11px;
+  color: #85A3D4;
+  margin: 10px 0;
+}
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
+/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;
+}
+.common-modal-select {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 10px;
+  margin-left: 35PX;
+}
+</style>

src/views/homecomponents/EquipmentAnalysis/AlarmRealStation.vue

@@ -0,0 +1,933 @@
+<template>
+  <div class="content-main-manage">
+    <div class="search-list cc">
+      <div class="search-left">
+        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
+           <FormItem label="" prop="alertRankId">
+            <Select v-model="tableParams.alertRankId" placeholder="告警等级">
+              <Option v-for="item in alarmLevelData" :value="item.id" :key="item.id">{{ item.name }}</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="applicationId">
+            <Select v-model="tableParams.applicationId" placeholder="来源应用" @on-change="selectApp">
+              <Option v-for="item in appData" :value="item.id" :key="item.id">{{ item.appName }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentTypeId">
+            <Select v-model="tableParams.equipmentTypeId" placeholder="设备类型">
+              <Option v-for="item in equipTypeData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
+            </Select>
+          </FormItem> -->
+           <FormItem label="" prop="processingStatus">
+            <Select v-model="tableParams.processingStatus" placeholder="处理状态">
+              <Option v-for="item in alarmStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="">
+            <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" 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>
+     <div class="btn-container">
+      <span class="btn-container-download" style="opacity: 0">
+        <i class="iconfont icon-xiazai" style="cursor:pointer;color:#0185EA;fontSize:20px;marginRight:6px"></i>下载列表筛选结果
+      </span>
+      <div>
+        <Button class="common-operate-btn common-corrections" @click="correctClick"> 
+          <i class="iconfont icon-gengzhenggonggao" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量手动修正
+        </Button>
+         <Button class="common-operate-btn common-eliminate" @click="delClick"> 
+          <i class="iconfont icon-shanchu" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量清除告警
+        </Button>
+         <Button class="common-operate-btn common-confirm" @click="queenClick"> 
+          <i class="iconfont icon-queren" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量确认告警
+        </Button>
+        <!-- <Button class="common-add-btn common-forward">
+          <i class="iconfont icon-zhuanfafenxiang" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
+          批量转发通知
+        </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" @on-selection-change="selectChange">
+        <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+        <template slot-scope="{ row }" slot="alertRankColor">
+          <i class="iconfont icon-gaojing1" style="vertical-align: middle" :style="'color:' + row.alertRankColor"></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-gengzhenggonggao" style="cursor:pointer;color:#0BB0DE;fontSize:20px;marginRight:6px" @click="correctClick(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>
+            <Tooltip content="确认" placement="top">
+              <i class="iconfont icon-queren" style="cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" @click="queenClick(row)"></i>
+           </Tooltip>
+           <!-- <Tooltip content="转发" placement="top">
+              <i class="iconfont icon-zhuanfafenxiang" style="cursor:pointer;color:#BCA507;fontSize:20px;marginRight:6px" @click="forwardClick(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="25"
+      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" :label-width="0">
+        <div class="common-form-item-text">
+          将选中的告警信息等级，修正为
+        </div>
+        <FormItem label="" prop="alertRankId" style="width:100%">
+          <Select v-model="formOption.alertRankId" placeholder="告警等级">
+            <Option v-for="item in alarmLevelModalData" :value="item.id" :key="item.id">{{ item.name }}</Option>
+          </Select> 
+        </FormItem>
+        <FormItem label="" prop="alertRankId" style="width:100%">
+          <Select v-model="formOption.processingStatus" placeholder="告警状态">
+            <Option v-for="item in alarmModalStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
+          </Select> 
+        </FormItem>
+			</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">
+      <div class="common-modal-select" :style="{ color: activeColor}">已选择：{{alertIdNum}}条数据</div>
+      <i class="iconfont icon-queren" style="vertical-align: middle;cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" v-show="commonTitle=='告警确认'"></i>
+      <i class="iconfont icon-shanchu" style="vertical-align: middle;cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" v-show="commonTitle=='确认清除'"></i>
+      <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
+      @on-visible-change="modalDetailChange"
+      :mask-closable="false"
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value"  :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
+  </div>
+</template>
+<script>
+import utils from "@/libs/utils"
+import moment from "moment"
+const defaultFrom = {alertRankId: null,processingStatus: null}
+export default {
+  name: "AlarmRealStation",
+  components:{
+  },
+  data() {
+    return {
+       alarmParams: {
+        keywords: '',
+        enabled: 1,
+        beginDate: '',
+        endDate: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appParams: {
+        applicationId: '',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      loading: true,
+      dateRange: [],
+      dateOperateRange: [],
+      tableParams: {
+        equipmentId: null,
+        processingStatus: '',
+        keywords: '',
+        twoKeywords: '',
+        applicationId:'',
+        equipmentTypeId: '',
+        lineId: '',
+        stationId: '',
+        alertRankId: '',
+        beginAlertTime: '',
+        endAlertTime: '',
+        // beginUpdateTime: '',
+        // endUpdateTime: '',
+        alertRankEnabled: 1, // 告警等级的启用状态
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      tablePage: 0,
+      rowObj: {},
+      lineTypeData: [],
+      stationTypeData: [],
+      alarmLevelData: [],
+      alarmLevelModalData: [],
+      equipTypeData: [],
+      appData: [],
+      alarmStatus: [],
+      alarmModalStatus: [],
+      columns: [
+          {
+            type: 'selection',
+            width: 60,
+            align: 'center'
+          },
+          {
+            title: '告警等级',
+            key: 'alertRankName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '警示颜色',
+            slot: 'alertRankColor',
+            align: 'center',
+            width: 90,
+          },
+          {
+            title: '设备名称',
+            key: 'equipmentName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+           {
+            title: '告警内容',
+            key: 'alertContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '线路',
+            key: 'lineName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '站点',
+            key: 'stationName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '告警时间',
+            key: 'alertTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '处理状态',
+            key: 'processingStatusDesc',
+            align: 'center',
+            width: 114,
+            render:(h,params)=>{
+              let color = params.row.processingStatusDesc == '已清除' ? '#E92E2E' : '#ffffff'
+              return h('span', {style:{color: color}},params.row.processingStatusDesc)
+            }
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 160,
+        }
+      ],
+      showModal: false,
+      modalStatus: false,
+      title: '告警信息修正',
+      commonTitle: "确认清除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      dateModalRange: [],
+      formOption: {alertRankId: null,processingStatus: null},
+      idArr: [],
+      alertIds: null,
+      alertIdNum: 1,
+      operationContent: '修正',
+      detailStatus: false,
+      detailParams: {
+        alertId: null,
+        pageNum: 1,
+        pageSize: 5
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
+    };
+  },
+  // created() {
+  //     this.$bus.$off('skipBusTabs');
+  //     this.$bus.$on('skipBusTabs', (data) => {
+  //       this.tableParams.equipmentId = data
+  //       console.log(data, '上车成功');
+  //     })
+  //   },
+  mounted() {
+    this.getType()
+  },
+  methods: {
+     // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        this.tableParams.equipmentId = this.rowObj.equipmentId
+        this.getTableData()
+        this.detailStatus = false
+      }
+    },
+    changePicker (date) {
+      this.tableParams.beginAlertTime = date[0]
+      this.tableParams.endAlertTime = 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/alert/rank/list', this.alarmParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.alarmLevelModalData = JSON.parse(JSON.stringify(res.data.data))
+          this.alarmLevelData = res.data.data
+          this.alarmLevelData.unshift({ id: '-1', name: '告警等级' })
+        } else {
+          this.alarmLevelData = []
+          this.alarmLevelModalData = []
+        }
+      })
+      // 告警状态
+      this.$get('metroapi/dic/queryDictionary', {name:'告警处理状态'}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.alarmModalStatus = JSON.parse(JSON.stringify(res.data))
+          this.alarmStatus = res.data
+          this.alarmStatus.unshift({ id: '-1', value: '处理状态' })
+        } else {
+          this.alarmModalStatus = []
+          this.alarmStatus = []
+        }
+      })
+    },
+    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) {
+      this.idArr = selection.map(item => item.id)
+    },
+    // 获取表格数据
+    getTableData (keywords,arr,level,skipval) {
+      if (level) {
+        this.tableParams.keywords = ''
+        if (level == 2) {
+          this.tableParams.applicationId = arr[arr.length-1]
+          this.tableParams.equipmentTypeId = ''
+        } else if (level == 3) {
+          this.tableParams.applicationId = arr[arr.length-2]
+          this.tableParams.equipmentTypeId = arr[arr.length-1]
+        } else {
+          this.tableParams.applicationId = ''
+          this.tableParams.equipmentTypeId = ''
+        }
+      } else {
+        this.tableParams.applicationId = ''
+        this.tableParams.equipmentTypeId = ''
+        if (keywords == '合肥轨道交通' || keywords == '' || !keywords) {
+          this.tableParams.twoKeywords = ''
+        } else {
+          this.tableParams.twoKeywords = keywords
+        }
+      }
+       if (skipval && typeof(skipval) == 'number') { // 实时告警列表-线网视图详情跳转到这里
+        this.tableParams.equipmentId = skipval
+      }
+      if (skipval && skipval.todayText == '今日') { // 今日告警tab页跳转到这里
+        this.tableParams.beginAlertTime = moment().format("YYYY-MM-DD") + ' 00:00:00'
+        this.tableParams.endAlertTime = moment().format("YYYY-MM-DD") + ' 23:59:59'
+        this.tableParams.equipmentTypeId = skipval.equipmentTypeId
+        this.tableParams.keywords = skipval.keywords
+        this.dateRange = [moment().format("YYYY-MM-DD") + ' 00:00:00',moment().format("YYYY-MM-DD") + ' 23:59:59']
+      }
+      if (this.$route.params.equipmentId) { // 告警处理详情跳转到这里
+        this.tableParams.equipmentId = this.$route.params.equipmentId
+      }
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      params.alertRankId = params.alertRankId == '-1' ? '':params.alertRankId
+      params.applicationId = params.applicationId == '-1' ? '':params.applicationId
+      params.equipmentTypeId = params.equipmentTypeId == '-1' ? '':params.equipmentTypeId 
+      params.processingStatus = params.processingStatus == '-1' ? '':params.processingStatus
+      this.loading = true
+      this.$get('metroapi/alert/processing/details', 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
+          }
+        })
+    },
+    selectApp (val) {
+      this.appParams.applicationId = val
+      this.tableParams.equipmentTypeId = ''
+      if (val) {
+        this.getAddEquipType( this.appParams)
+      }
+    },
+    // 获取设备类型 
+    getAddEquipType (params) {
+      if (params.applicationId == '-1') {
+        this.equipTypeData = [{ equipmentTypeId: '-1', equipmentName: '设备类型' }]
+      } else {
+        this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+          if (res.httpCode == 1 ){
+            this.equipTypeData = res.data.data
+            this.equipTypeData.unshift({ equipmentTypeId: '-1', equipmentName: '设备类型' })
+          } else {
+            this.equipTypeData = []
+          }
+        })
+      }
+    },
+    searchClick () {
+      this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
+    },
+    resetClick (name) {
+     this.dateRange = []
+     this.tableParams.beginAlertTime = ''
+     this.tableParams.endAlertTime = ''
+     this.tableParams.equipmentId = null
+    //  this.dateOperateRange = []
+    //  this.tableParams.beginUpdateTime = ''
+    //  this.tableParams.endUpdateTime =  ''
+     this.stationTypeData = [{ id: '-1', stationName: '站点' }]
+     this.$refs[name].resetFields()
+     this.getTableData()
+    },
+    correctClick (row) {
+      this.rowObj = row
+      if (row.id || this.idArr.length>0) {
+        this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+        this.title = '告警信息修正'
+        this.operationContent = '修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
+        this.alertIdNum = row.id ? 1 : this.idArr.length
+        this.showModal = true
+      } else {
+        this.$Message.info('请至少选择一条数据')
+      }
+    },
+    changeStateData (params) {
+      this.$post('metroapi/alert/processing/update/status',params).then(res=>{
+        if (res.httpCode == 1 ){
+          if (this.showModal) {
+           this.showModal = false
+          } else if(this.modalStatus){
+            this.modalStatus = false
+          } 
+          this.$Message.info(res.msg)
+          this.getTableData()
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    queenClick (row) {
+      this.rowObj = row
+      this.commonTitle = '告警确认'
+      this.activeColor = '#08AF68'
+      this.activeClass = ''
+      this.modalTitle = '告警信息状态将被标注为【已确认】，告警将被确认为有效信息。'
+      this.operationContent = '确认'
+      this.formOption.alertRankId = null
+      this.formOption.processingStatus = 39
+      this.alertIds = row.id ? row.id : this.idArr.join()
+      this.alertIdNum = row.id ? 1 : this.idArr.length
+      this.modalStatus = true
+    },
+    forwardClick (row) {
+
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认清除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '告警信息状态将被标注为【已清除】，从系统有效数据中脱钩。'
+      this.operationContent = '清除'
+      this.formOption.alertRankId = null
+      this.formOption.processingStatus = 40
+      this.alertIds = row.id ? row.id : this.idArr.join()
+      this.alertIdNum = row.id ? 1 : this.idArr.length
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
+    modalOk () {
+      let params = {
+        alertIds: this.alertIds,
+        processingStatus: this.formOption.processingStatus,
+        alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
+      }
+      this.changeStateData(params)
+    },
+    modalCancel () {
+      this.showModal = false
+    },
+    commonOk () {
+      let params = {
+        alertIds: this.alertIds,
+        processingStatus: this.formOption.processingStatus,
+        alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
+      }
+      this.changeStateData(params)
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main-manage {
+  position: relative;
+  height: 100%;
+}
+.search-list {
+  display: flex;
+  padding: 10px 0 0;
+}
+.search-left {
+  display: flex;
+  align-items: center;
+   .ivu-select {
+     width: 145px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 145px;
+     height: 32px;
+   }
+    >>> .common-date-picker .ivu-input {
+    width: 332px;
+   }
+   >>> .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: space-between;
+  padding-bottom: 10px;
+  color: #0185EA;
+  font-size: 14px;
+  .btn-container-download {
+    cursor: pointer;
+  }
+  .common-corrections {
+    background: #053B4A;
+    border: 1px solid #0098C2;
+    color: #FFFFFF;
+    margin-right: 5px;
+  }
+  .common-eliminate {
+    background: #4C2215;
+    border: 1px solid #8E1919;
+    color: #FFFFFF;
+    margin-right: 5px;
+  }
+  .common-confirm {
+    background: #0C3423;
+    border: 1px solid #08AF68;
+    color: #FFFFFF;
+    margin-right: 5px;
+  }
+  .common-forward {
+    background: #413A09;
+    border: 1px solid #A69311;
+    color: #FFFFFF;
+  }
+}
+.common-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+>>> .common-form-list .ivu-form-item {
+  margin-bottom: 10px;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 150px);
+}
+.common-table {
+  max-height: 100%;
+}
+// >>> .common-table .table-state-clear .ivu-table-cell-tooltip-content{
+//  color:#E92E2E;
+// }
+>>> .common-table .ivu-table th {
+  height: 50px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 49.5px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 50px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 375px);
+ }
+ >>> .common-table .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .app-table .ivu-table-tip {
+  height: calc(100vh - 375px);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+.common-form-item-text {
+  font-size: 11px;
+  color: #85A3D4;
+  margin: 10px 0;
+}
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
+/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;
+}
+.common-modal-select {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 10px;
+  margin-left: 35PX;
+}
+</style>

src/views/homecomponents/EquipmentAnalysis/AlarmToday.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="content-main-manage">
+    <div class="manage-main-center">
+      <!-- <div style="display: flex;justify-content: space-between;">
+        <div v-for="(item,index) in columns1" :key="index"  style="display: flex;flex:1;align-items: center;justify-content: center;">
+       {{item.title}}<br>
+       告警数丨告警设备数
+      </div>
+      </div>
+       <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
+          <div v-for="(item,index) in data1" :key="index"  style="display: flex;flex:1;align-items: center;justify-content: center;">
+          <span>{{item.num1}} {{item.num2}}</span>
+        </div>
+      </div> -->
+       <!--今日告警表格 -->
+       <!-- <div>
+         <div v-for="(item,i) in testTableData" :key="i">
+          <div>{{item.name}} {{item.alarmNum}}{{item.alarmEquip}} {{item.alarm1}}{{item.alarmEquip1}}</div>
+         </div>
+       </div> -->
+    <Table :columns="columns1" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading" @on-cell-click="cellClick">
+       <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+        <!-- <template slot-scope="{ row,index }" v-for="(item,i) in testColumns" :slot="item.slot" >
+          <span v-if="i==0" style="text-decoration: underline;cursor: pointer;}">{{row.name}}</span>
+          <template v-else>
+            <span style="display:inline-block;width:49%;text-align:right;color:#F8952B;text-decoration: underline;cursor: pointer;}">
+              {{row.alarmNum}} {{row.alarm1}}
+            </span>
+            <span style="display:inline-block;width:2%;">丨</span>
+            <span style="display:inline-block;width:49%;text-align:left;padding-left:4px;text-decoration: underline;cursor: pointer;">
+              {{row.alarmEquip}}
+            </span>
+          </template>
+      </template> -->
+    </Table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "AlarmToday",
+  components:{
+  },
+  data() {
+    return {
+      loading: false,
+       columns1: [],
+      // testColumns: [{title:'设备',key:'name',align: 'center'},{title:'线网',key:'alarmNum',align: 'center'},{title:'1号线',key:'equipmentTypeName',align: 'center'}],
+      // testTableData: [{alarmNum:1,alarmEquip: 2,name:'UPS',alarm1:1111111111,alarmEquip1: 22222222,},{alarmNum:67,alarmEquip: 672,name:'UPS2'},{alarmNum:8,alarmEquip: 72,name:'UPS3'}],
+      tableParams: {
+        processingStatus: 38,
+        keywords: '',
+        applicationId:'',
+        equipmentTypeId: '',
+        alertRankId: '',
+        beginAlertTime: '',
+        endAlertTime: '',
+        alertRankEnabled: 1,
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      rowObj: {},
+      columns: [
+          {
+            type: 'selection',
+            width: 60,
+            align: 'center'
+          },
+          {
+            title: '告警等级',
+            key: 'alertRankName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '警示颜色',
+            slot: 'alertRankColor',
+            align: 'center',
+          },
+          {
+            title: '设备类型',
+            key: 'equipmentTypeName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '设备名称',
+            key: 'equipmentName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+           {
+            title: '告警内容',
+            key: 'alertContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '来源应用',
+            key: 'appName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '告警时间',
+            key: 'alertTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '处理状态',
+            key: 'processingStatusDesc',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 160,
+        }
+      ],
+    };
+  },
+  mounted() {
+    // this.initTableColumn('columns1');
+    this.getTableData()
+  },
+  methods: {
+    initTableColumn(columnName){
+      for(let i = 0; i < this[columnName].length; i++){
+        if(!this[columnName][i].renderHeader) {
+          // this.$set(this[columnName][i], 'ellipsis', true);
+          this.$set(this[columnName][i], 'renderHeader', (h, params) => {
+            let text = ''
+            let lineName = ''
+            if (this[columnName][i].title == '设备') {
+              text = this[columnName][i].title
+            } else {
+              if (this[columnName][i].title == '线网') {
+                text = `<span>${this[columnName][i].title}</span><br/> <span style="color:#82ABEE">告警数丨告警设备数</span>`
+              } else {
+                if (this[columnName][i].title.length > 10) {
+                  lineName = this[columnName][i].title.substring(0, 10) + "...";
+                } else {
+                  lineName = this[columnName][i].title
+                }
+                text = `<span style="text-decoration: underline;cursor: pointer;">${lineName}</span><br/> <span style="color:#82ABEE">告警数丨告警设备数</span>`
+              }
+             }
+              return h('div', [
+              　　　　h('Tooltip', {
+              　　　　props: { placement: 'bottom', transfer: true,disabled:this[columnName][i].title .length<=10,maxWidth:400}
+              　　　　}, [
+              　　　　h('span', {
+                     domProps:{
+                      innerHTML: text
+                    },
+                     on: {
+                        mousedown: (e) => {
+                          //自定义列头的右击事件
+                          this.headerClick(params.column);
+                        },
+                      },
+                    }),
+              　　　　　　h('span', {
+              　　　　　　　　slot: 'content',
+              　　　　　　　　style: { whiteSpace: 'normal', wordBreak: 'break-all' }
+              　　　　　　},this[columnName][i].title)
+              　　　　])
+              　　])
+            // return h('div', {
+            //     domProps:{
+            //       innerHTML: text
+            //     },
+            //     on: {
+            //       mousedown: (e) => {
+            //         //自定义列头的右击事件
+            //         this.headerClick(params.column);
+            //       },
+						//     },
+            // })
+          });
+          this.$set(this[columnName][i], 'render', (h, params) => {                  
+            let renderText = ''
+            if (this[columnName][i].title == '设备') {
+              let equipmentTypeName = ''
+              if (params.row.equipmentTypeName && params.row.equipmentTypeName.length > 10) {
+                equipmentTypeName = params.row.equipmentTypeName.substring(0, 10) + "...";
+              } else {
+                equipmentTypeName = params.row.equipmentTypeName
+              }
+              renderText = `<span style="text-decoration: underline;cursor: pointer;">${equipmentTypeName}</span>`
+            } else {
+              renderText =  `<span style="color:#F8952B;text-decoration: underline;cursor: pointer;">${params.row['alertNum'+i]}</span><span style="text-decoration: underline;cursor: pointer;">丨${params.row['equipmentNum'+i]}</span></span>`;
+            }
+            return h('div', [
+              　　　　h('Tooltip', {
+              　　　　props: { placement: 'bottom', transfer: true,disabled:params.row.equipmentTypeName.length<=10, maxWidth:400}
+              　　　　}, [
+              　　　　h('span', {
+                     domProps:{
+                      innerHTML: renderText
+                    },
+                    }),
+              　　　　　　h('span', {
+              　　　　　　　　slot: 'content',
+              　　　　　　　　style: { whiteSpace: 'normal', wordBreak: 'break-all' }
+              　　　　　　},params.row.equipmentTypeName)
+              　　　　])
+              　　])
+            // return h('div', {
+            //     domProps:{
+            //       innerHTML: renderText
+            //     },
+            // })
+          });
+        }
+      }
+    },
+    headerClick (column) {
+      let keywords = ''
+        if (column.title == '设备' || column.title == '线网') {
+          return
+        } else {
+          keywords = column.title
+          sessionStorage.setItem("currentTabs",'实时告警列表-线网视图')
+        }
+        let skipParams = {
+          keywords: keywords,
+          todayText: '今日',
+        }
+        this.$emit('skipEquipTabs',skipParams)
+    },
+    cellClick (row, column, data, event) {
+      let keywords = ''
+      if (column.title == '设备') {
+        keywords = ''
+        sessionStorage.setItem("currentTabs",'实时告警列表-设备视图')
+      } else {
+        if (column.title == '线网') {
+          keywords = ''
+        } else {
+          keywords = column.title
+        }
+       sessionStorage.setItem("currentTabs",'实时告警列表-线网视图')
+      }
+      let skipParams = {
+        keywords: keywords,
+        todayText: '今日',
+        equipmentTypeId: row.equipmentTypeId
+      }
+      this.$emit('skipEquipTabs',skipParams)
+    },
+    goEquip (){
+      console.log(12)
+      // this.$router.push({path:'//ApplicationManage'})
+      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
+      // this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    },
+    rowClassName(row, index) {
+      if (index % 2 == 0) {
+        return "ivu-table-stripe-even";
+      } else {
+        return "ivu-table-stripe-odd";
+      }
+    },
+    selectChange (selection) {
+      this.idArr = selection.map(item => item.id)
+    },
+    // 获取表格数据
+    getTableData () {
+      this.loading = true
+      this.$get('metroapi/alert/processing/todayAlert/list').then(res=>{
+        this.loading = false
+          if (res.httpCode == 1 ){
+            this.columns1 = res.data.category.map((item)=> {
+              let keyName = ''
+              if (item == '设备') {
+                keyName = 'equipmentTypeName'
+              }
+              return {title: item,key: keyName,align: 'center'}
+            })
+            // console.log(this.columns1)
+            // this.columns1 = res.data.category
+            this.initTableColumn('columns1')
+            this.tableData = res.data.data
+            this.tableTotal = res.data.count
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    }, 
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main-manage {
+  position: relative;
+  height: 100%;
+}
+.common-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+>>> .common-form-list .ivu-form-item {
+  margin-bottom: 10px;
+}
+.manage-main-center {
+  width: 100%;
+  height: 100%;
+}
+.common-table {
+  height: 100%;
+}
+>>> .common-table .ivu-table-body {
+  max-height: calc(100% - 50px);
+  overflow: hidden;
+  overflow-y: auto;
+}
+>>> .common-table .ivu-table th {
+  height: 50px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 49.5px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 50px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 375px);
+ }
+ >>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .app-table .ivu-table-tip {
+  height: calc(100vh - 375px);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+.common-form-item-text {
+  font-size: 11px;
+  color: #85A3D4;
+  margin: 10px 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;
+}
+.common-modal-select {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 10px;
+  margin-left: 35PX;
+}
+</style>

src/views/homecomponents/EquipmentAnalysis/ClearedAlarm.vue

@@ -19,19 +19,19 @@
             </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="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
           </FormItem>
           <FormItem label="">
-            <DatePicker type="daterange" :value="dateOperateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-end" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
+            <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateOperateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="keywords">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
           </FormItem>
           <FormItem label="" >
-            <Button type="primary" class="common-btn-search" @click="searchClick">
+            <Button type="primary" class="common-btn-search" @click="searchClick" style="width: 80px">
               <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')">
+            <Button type="primary" class="common-btn-search" style="margin-left:5px;width: 80px" @click="resetClick('tableParams')">
               <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
             </Button>   
           </FormItem>
@@ -96,8 +96,8 @@
             <Option v-for="item in alarmLevelModalData" :value="item.id" :key="item.id">{{ item.name }}</Option>
           </Select> 
         </FormItem>
-        <FormItem label="" prop="alertRankId" style="width:100%">
-          <Select v-model="formOption.alertRankId" placeholder="告警状态">
+        <FormItem label="" prop="processingStatus" style="width:100%">
+          <Select v-model="formOption.processingStatus" placeholder="告警状态">
             <Option v-for="item in alarmModalStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
           </Select> 
         </FormItem>
@@ -107,9 +107,55 @@
           <Button type="primary" @click="modalOk">确定</Button>
         </div>
     </Modal>
+     <Modal
+      v-model="detailStatus"
+      title="告警详情"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      @on-visible-change="modalDetailChange"
+      :mask-closable="false"
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
   </div>
 </template>
 <script>
+import utils from "@/libs/utils"
 const defaultFrom = {alertRankId: null,processingStatus:null}
 export default {
   name: "ClearedAlarm",
@@ -149,6 +195,7 @@ export default {
         keywords: '',
         applicationId:'',
         equipmentTypeId: '',
+        oneKeywords: '',
         alertRankId: '',
         beginAlertTime: '',
         endAlertTime: '',
@@ -238,7 +285,7 @@ export default {
           },
           {
             title: '操作人',
-            key: '',
+            key: 'operationUserName',
             align: 'center',
             ellipsis: true,
             tooltip: true
@@ -254,16 +301,61 @@ export default {
       title: '告警信息修正',
       dateModalRange: [],
       formOption: {alertRankId: null,processingStatus:null},
-      idArr: []
+      idArr: [],
+      alertIds: null,
+      detailStatus: false,
+      detailParams: {
+					alertId: null,
+					pageNum: 1,
+					pageSize: 10
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
     };
   },
   mounted() {
+    this.getType()
   },
   methods: {
-    go (){
-      // this.$router.push({path:'//ApplicationManage'})
-      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
-      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        let menuNameArr = []
+        menuNameArr = ['设备分析','告警分析','告警监测']
+        sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
+        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+        this.$router.push({ name: 'AlarmMonitor', params: { equipmentId:this.rowObj.equipmentId }})
+      }
     },
     changePicker (date) {
       this.tableParams.beginAlertTime = date[0]
@@ -413,12 +505,13 @@ export default {
       if (row.id || this.idArr.length>0) {
         this.formOption = JSON.parse(JSON.stringify(defaultFrom))
         this.title = '告警信息修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
         this.showModal = true
       } else {
         this.$Message.info('请至少选择一条数据')
       }
     },
-    correctData (params) {
+    changeStateData (params) {
       this.$post('metroapi/alert/processing/update/status',params).then(res=>{
         if (res.httpCode == 1 ){
           this.showModal = false
@@ -429,44 +522,51 @@ export default {
         }
       })
     },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
     modalChange (modalStatus) {
      if (!modalStatus) {
       this.$refs.formOption.resetFields();
-      this.idArr = []
      }
     },
     modalOk () {
       let params = {
-        alertIds: this.idArr.join() || Number(this.rowObj.id),
+        alertIds: this.alertIds,
         processingStatus: this.formOption.processingStatus,
         alertRankId: this.formOption.alertRankId,
+        operationContent: '修正',
+        userId: utils.storage('sw_user').userId
       }
-      this.correctData(params)
+      this.changeStateData(params)
     },
     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>
@@ -483,19 +583,18 @@ export default {
   display: flex;
   align-items: center;
    .ivu-select {
-     width: 155px;
-     padding-right: 10px;
+     width: 120px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
      height: 100%;
    }
    >>> .ivu-input {
-     width: 160px;
+     width: 140px;
      height: 32px;
    }
    >>> .common-date-picker .ivu-input {
-    width: 210px;
+    width: 332px;
    }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;
@@ -508,6 +607,9 @@ export default {
    >>> .date-picker-main .ivu-date-picker-header {
     border-bottom: 0.0052083333rem solid #204384;
  }
+  >>> .common-btn-search {
+   padding: 0 10PX;
+ }
 }
 .btn-container {
   display: flex;
@@ -548,6 +650,7 @@ export default {
 }
 >>> .common-form-list .ivu-form-item {
   margin-bottom: 10px;
+  margin-right: 6px;
 }
 .manage-main-center {
   width: 100%;
@@ -568,7 +671,7 @@ export default {
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);
  }
- >>> .ivu-table-tip {
+ >>> .common-table .ivu-table-tip {
   background: url('../../../assets/images/noData.png') no-repeat center;
 }
 >>> .app-table .ivu-table-tip {
@@ -608,6 +711,76 @@ export default {
   color: #85A3D4;
   margin: 10px 0;
 }
+
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
 /deep/ .ivu-input::-webkit-input-placeholder{
   color: #718EBD;
 }

src/views/homecomponents/EquipmentAnalysis/ComprehensiveInfor.vue

@@ -24,13 +24,17 @@
             </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>
+            <Tooltip :content="alertTimeContent" :max-width="300" transfer placement="top-start">
+              <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
+            </Tooltip>
           </FormItem>
            <FormItem label="">
-            <DatePicker type="daterange" :value="dateOperateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-end" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
+            <Tooltip :content="updateTimeContent" :max-width="300" transfer placement="top-start">
+              <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateOperateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
+            </Tooltip>
           </FormItem>
           <FormItem label="" prop="keywords">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -138,7 +142,7 @@
       reset-drag-position
       :mask-closable="false"
       class-name="common-modal">
-      <div class="common-modal-select" :style="{ color: activeColor}" v-if="idArr.length>1">已选择：{{idArr.length}}条数据</div>
+      <div class="common-modal-select" :style="{ color: activeColor}">已选择：{{alertIdNum}}条数据</div>
       <i class="iconfont icon-queren" style="vertical-align: middle;cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" v-show="commonTitle=='告警确认'"></i>
       <i class="iconfont icon-shanchu" style="vertical-align: middle;cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" v-show="commonTitle=='确认清除'"></i>
       <span class="modal-text">{{modalTitle}}</span>
@@ -147,9 +151,55 @@
           <Button type="primary" @click="commonOk">确定</Button>
         </div>
     </Modal>
+    <Modal
+      v-model="detailStatus"
+      title="告警详情"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      @on-visible-change="modalDetailChange"
+      :mask-closable="false"
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
   </div>
 </template>
 <script>
+import utils from "@/libs/utils"
 const defaultFrom = {alertRankId: null,processingStatus: null}
 export default {
   name: "ComprehensiveInfor",
@@ -183,12 +233,15 @@ export default {
       },
       loading: true,
       dateRange: [],
+      alertTimeContent: '告警时间范围',
+      updateTimeContent: '操作时间范围',
       dateOperateRange: [],
       tableParams: {
         processingStatus: '',
         keywords: '',
         applicationId:'',
         equipmentTypeId: '',
+        oneKeywords: '',
         alertRankId: '',
         beginAlertTime: '',
         endAlertTime: '',
@@ -297,24 +350,81 @@ export default {
       modalTitle: '',
       dateModalRange: [],
       formOption: {alertRankId: null,processingStatus: null},
-      idArr: []
+      idArr: [],
+      alertIds: null,
+      alertIdNum: 1,
+      operationContent: '修正',
+       detailStatus: false,
+      detailParams: {
+        alertId: null,
+        pageNum: 1,
+        pageSize: 5
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
     };
   },
   mounted() {
+    this.getType()
   },
   methods: {
-    go (){
-      // this.$router.push({path:'//ApplicationManage'})
-      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
-      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+      // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        let menuNameArr = []
+        menuNameArr = ['设备分析','告警分析','告警监测']
+        sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
+        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+        this.$router.push({ name: 'AlarmMonitor', params: { equipmentId:this.rowObj.equipmentId }})
+      }
     },
     changePicker (date) {
       this.tableParams.beginAlertTime = date[0]
       this.tableParams.endAlertTime = date[1]
+      if (!date[0] && !date[1]) {
+        this.alertTimeContent = '告警时间范围'
+      } else {
+        this.alertTimeContent = date[0] + ' - ' + date[1]
+      }
     },
     changeOperatePicker (date) {
       this.tableParams.beginUpdateTime = date[0]
       this.tableParams.endUpdateTime = date[1]
+      if (!date[0] && !date[1]) {
+        this.updateTimeContent = '操作时间范围'
+      } else {
+        this.updateTimeContent = date[0] + ' - ' + date[1]
+      }
     },
     rowClassName(row, index) {
       if (index % 2 == 0) {
@@ -448,9 +558,11 @@ export default {
      this.dateRange = []
      this.tableParams.beginAlertTime = ''
      this.tableParams.endAlertTime = ''
+     this.alertTimeContent = '告警时间范围'
      this.dateOperateRange = []
      this.tableParams.beginUpdateTime = ''
      this.tableParams.endUpdateTime =  ''
+     this.updateTimeContent = '操作时间范围'
      this.equipTypeData = [{ equipmentTypeId: '-1', equipmentName: '设备类型' }]
      this.$refs[name].resetFields()
      this.getTableData()
@@ -460,15 +572,22 @@ export default {
       if (row.id || this.idArr.length>0) {
         this.formOption = JSON.parse(JSON.stringify(defaultFrom))
         this.title = '告警信息修正'
+        this.operationContent = '修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
+        this.alertIdNum = row.id ? 1 : this.idArr.length
         this.showModal = true
       } else {
         this.$Message.info('请至少选择一条数据')
       }
     },
-    correctData (params) {
+    changeStateData (params) {
       this.$post('metroapi/alert/processing/update/status',params).then(res=>{
         if (res.httpCode == 1 ){
-          this.showModal = false
+          if (this.showModal) {
+           this.showModal = false
+          } else if(this.modalStatus){
+            this.modalStatus = false
+          } 
           this.$Message.info(res.msg)
           this.getTableData()
         } else {
@@ -482,68 +601,82 @@ export default {
       this.activeColor = '#08AF68'
       this.activeClass = ''
       this.modalTitle = '告警信息状态将被标注为【已确认】，告警将被确认为有效信息。'
+      this.operationContent = '确认'
+      this.formOption.alertRankId = null
+      this.formOption.processingStatus = 39
+      this.alertIds = row.id ? row.id : this.idArr.join()
+      this.alertIdNum = row.id ? 1 : this.idArr.length
       this.modalStatus = true
     },
     forwardClick (row) {
 
     },
-    // 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.operationContent = '清除'
+      this.formOption.alertRankId = null
+      this.formOption.processingStatus = 40
+      this.alertIds = row.id ? row.id : this.idArr.join()
+      this.alertIdNum = row.id ? 1 : this.idArr.length
       this.modalStatus = true
     },
     modalChange (modalStatus) {
      if (!modalStatus) {
       this.$refs.formOption.resetFields();
-      this.idArr = []
      }
     },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
     modalOk () {
       let params = {
-        alertIds: this.idArr.join() || Number(this.rowObj.id),
+        alertIds: this.alertIds,
         processingStatus: this.formOption.processingStatus,
         alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
       }
-      this.correctData(params)
+      this.changeStateData(params)
     },
     modalCancel () {
       this.showModal = false
     },
     commonOk () {
       let params = {
-        id: this.rowObj.id
+        alertIds: this.alertIds,
+        processingStatus: this.formOption.processingStatus,
+        alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
       }
-      this.delData(params)
+      this.changeStateData(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>
@@ -561,7 +694,6 @@ export default {
   align-items: center;
    .ivu-select {
      width: 125px;
-     padding-right: 10px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
@@ -572,7 +704,7 @@ export default {
      height: 32px;
    }
     >>> .common-date-picker .ivu-input {
-    width: 198px;
+    width: 234px;
    }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;
@@ -648,7 +780,7 @@ export default {
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);
  }
- >>> .ivu-table-tip {
+ >>> .common-table .ivu-table-tip {
   background: url('../../../assets/images/noData.png') no-repeat center;
 }
 >>> .app-table .ivu-table-tip {
@@ -688,6 +820,75 @@ export default {
   color: #85A3D4;
   margin: 10px 0;
 }
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
 /deep/ .ivu-input::-webkit-input-placeholder{
   color: #718EBD;
 }

src/views/homecomponents/EquipmentAnalysis/ComprehensiveQuery.vue

@@ -36,19 +36,19 @@
                     <Option v-for="item in alarmStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
                   </Select>
                 </FormItem>
-                 <FormItem label="" prop="processingStatus">
-                  <Select v-model="tableParams.processingStatus" placeholder="处理人">
-                    <Option v-for="item in alarmStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
+                 <FormItem label="" prop="operationUserId">
+                  <Select v-model="tableParams.operationUserId" placeholder="处理人">
+                    <Option v-for="item in operateData" :value="item.value" :key="item.value">{{ item.name }}</Option>
                   </Select>
                 </FormItem>
                 <FormItem label="">
-                  <DatePicker type="daterange" :value="dateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-end" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
+                  <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" placeholder="告警时间范围" class="common-date-picker date-picker-main" :clearable="false" :editable="false" @on-change="changePicker"></DatePicker>
                 </FormItem>
                 <FormItem label="">
-                  <DatePicker type="daterange" :value="dateOperateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-end" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
+                  <DatePicker type="datetimerange" :value="dateOperateRange" format="yyyy-MM-dd HH:mm:ss" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
                 </FormItem>
                 <FormItem label="" prop="keywords">
-                  <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+                  <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
                 </FormItem>
                 <FormItem label="" >
                   <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -74,7 +74,7 @@
                   <Loading-animation></Loading-animation>
               </template>
               <template slot-scope="{ row }" slot="alertRankColor">
-                <i class="iconfont icon-gaojing1" style="vertical-align: middle" :style="'color:' + row.alertRankColor"></i>
+                <i class="iconfont icon-gaojing1" style="vertical-align: middle" :style="'color:' + row.alertRankColor" v-show="row.alertRankColor"></i>
               </template>
             </Table>
           </div>
@@ -125,6 +125,7 @@ export default {
       dateOperateRange: [],
       tableParams: {
         processingStatus: '',
+        operationUserId: '',
         keywords: '',
         applicationId:'',
         equipmentTypeId: '',
@@ -149,6 +150,7 @@ export default {
       equipTypeData: [],
       appData: [],
       alarmStatus: [],
+      operateData: [],
       columns: [
            {
             title: '告警等级',
@@ -231,7 +233,7 @@ export default {
           },
            {
             title: '操作人',
-            key: '',
+            key: 'operationUserName',
             align: 'center',
             ellipsis: true,
             tooltip: true
@@ -305,6 +307,7 @@ export default {
         if (res.httpCode == 1 ){
           this.alarmLevelData = res.data.data
           this.alarmLevelData.unshift({ id: '-1', name: '告警等级' })
+          this.alarmLevelData.push({ id: 0, name: '无等级' })
         } else {
           this.alarmLevelData = []
         }
@@ -317,6 +320,14 @@ export default {
           this.alarmStatus = []
         }
       })
+      // 获取处理人数据
+      this.$get('metroapi/alert/processing/operationUser').then(res=>{
+        if (res.httpCode == 1 ){
+          this.operateData = res.data.data
+        } else {
+          this.operateData = []
+        }
+      })
     },
     selectLine (val) {
       // 获取站点类型
@@ -355,6 +366,7 @@ export default {
       params.applicationId = params.applicationId == '-1' ? '':params.applicationId
       params.equipmentTypeId = params.equipmentTypeId == '-1' ? '':params.equipmentTypeId 
       params.processingStatusDesc = params.processingStatusDesc == '-1' ? '':params.processingStatusDesc
+      params.operationUserId = params.operationUserId == '-1' ? '':params.operationUserId
       this.loading = true
       this.$get('metroapi/alert/processing/details', params).then(res=>{
         this.loading = false
@@ -465,7 +477,7 @@ export default {
      height: 32px;
    }
    >>> .common-date-picker .ivu-input {
-    width: 210px;
+    width: 332px;
    }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;

src/views/homecomponents/EquipmentAnalysis/ConfirmedAlarm.vue

@@ -19,19 +19,21 @@
             </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>
+             <!-- <Tooltip :content="alertTimeContent" :max-width="300" transfer placement="top-start"> -->
+                <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
+            <!-- </Tooltip> -->
           </FormItem>
            <FormItem label="">
-            <DatePicker type="daterange" :value="dateOperateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-end" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
+            <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateOperateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="keywords">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
           </FormItem>
           <FormItem label="" >
-            <Button type="primary" class="common-btn-search" @click="searchClick">
+            <Button type="primary" class="common-btn-search" @click="searchClick" style="width: 80px">
               <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')">
+            <Button type="primary" class="common-btn-search" style="margin-left:5px;width: 80px" @click="resetClick('tableParams')">
               <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
             </Button>   
           </FormItem>
@@ -107,9 +109,55 @@
           <Button type="primary" @click="modalOk">确定</Button>
         </div>
     </Modal>
+    <Modal
+      v-model="detailStatus"
+      title="告警详情"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      @on-visible-change="modalDetailChange"
+      :mask-closable="false"
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
   </div>
 </template>
 <script>
+import utils from "@/libs/utils"
 const defaultFrom = {alertRankId: null,processingStatus:null}
 export default {
   name: "ConfirmedAlarm",
@@ -143,12 +191,14 @@ export default {
       },
       loading: true,
       dateRange: [],
+      // alertTimeContent: '告警时间范围',
       dateOperateRange: [],
       tableParams: {
         processingStatus: 39,
         keywords: '',
         applicationId:'',
         equipmentTypeId: '',
+        oneKeywords: '',
         alertRankId: '',
         beginAlertTime: '',
         endAlertTime: '',
@@ -238,7 +288,7 @@ export default {
           },
           {
             title: '操作人',
-            key: '',
+            key: 'operationUserName',
             align: 'center',
             ellipsis: true,
             tooltip: true
@@ -254,20 +304,66 @@ export default {
       title: '告警信息修正',
       dateModalRange: [],
       formOption: {alertRankId: null,processingStatus:null},
-      idArr: []
+      idArr: [],
+      alertIds: null,
+      detailStatus: false,
+      detailParams: {
+					alertId: null,
+					pageNum: 1,
+					pageSize: 10
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
     };
   },
   mounted() {
+    this.getType()
   },
   methods: {
-    go (){
-      // this.$router.push({path:'//ApplicationManage'})
-      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
-      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        let menuNameArr = []
+        menuNameArr = ['设备分析','告警分析','告警监测']
+        sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
+        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+        this.$router.push({ name: 'AlarmMonitor', params: { equipmentId:this.rowObj.equipmentId }})
+      }
     },
     changePicker (date) {
       this.tableParams.beginAlertTime = date[0]
       this.tableParams.endAlertTime = date[1]
+      // this.alertTimeContent = date[0]+ '-'+ date[1]
     },
     changeOperatePicker (date) {
       this.tableParams.beginUpdateTime = date[0]
@@ -354,6 +450,7 @@ export default {
       this.$get('metroapi/alert/processing/details', params).then(res=>{
         this.loading = false
           if (res.httpCode == 1 ){
+            // this.tableData = [{},{},{},{},{},{},{},{},{},{}]
             this.tableData = res.data.data
             this.tableTotal = res.data.count
             if (res.data.data.length==0) {
@@ -401,6 +498,7 @@ export default {
      this.dateRange = []
      this.tableParams.beginAlertTime = ''
      this.tableParams.endAlertTime = ''
+    //  this.alertTimeContent = '告警时间范围'
      this.dateOperateRange = []
      this.tableParams.beginUpdateTime = ''
      this.tableParams.endUpdateTime =  ''
@@ -413,12 +511,13 @@ export default {
       if (row.id || this.idArr.length>0) {
         this.formOption = JSON.parse(JSON.stringify(defaultFrom))
         this.title = '告警信息修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
         this.showModal = true
       } else {
         this.$Message.info('请至少选择一条数据')
       }
     },
-    correctData (params) {
+    changeStateData (params) {
       this.$post('metroapi/alert/processing/update/status',params).then(res=>{
         if (res.httpCode == 1 ){
           this.showModal = false
@@ -429,44 +528,51 @@ export default {
         }
       })
     },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
     modalChange (modalStatus) {
      if (!modalStatus) {
       this.$refs.formOption.resetFields();
-      this.idArr = []
      }
     },
     modalOk () {
       let params = {
-        alertIds: this.idArr.join() || Number(this.rowObj.id),
+        alertIds: this.alertIds,
         processingStatus: this.formOption.processingStatus,
         alertRankId: this.formOption.alertRankId,
+        operationContent: '修正',
+        userId: utils.storage('sw_user').userId
       }
-      this.correctData(params)
+      this.changeStateData(params)
     },
     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>
@@ -483,19 +589,19 @@ export default {
   display: flex;
   align-items: center;
    .ivu-select {
-     width: 155px;
-     padding-right: 10px;
+     width: 120px;
+    //  padding-right: 10px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
      height: 100%;
    }
    >>> .ivu-input {
-     width: 160px;
+     width: 140px;
      height: 32px;
    }
    >>> .common-date-picker .ivu-input {
-    width: 210px;
+    width: 332px;
    }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;
@@ -508,6 +614,9 @@ export default {
    >>> .date-picker-main .ivu-date-picker-header {
     border-bottom: 0.0052083333rem solid #204384;
  }
+ >>> .common-btn-search {
+   padding: 0 10PX;
+ }
 }
 .btn-container {
   display: flex;
@@ -548,6 +657,7 @@ export default {
 }
 >>> .common-form-list .ivu-form-item {
   margin-bottom: 10px;
+  margin-right: 6px;
 }
 .manage-main-center {
   width: 100%;
@@ -568,7 +678,7 @@ export default {
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);
  }
- >>> .ivu-table-tip {
+ >>> .common-table .ivu-table-tip {
   background: url('../../../assets/images/noData.png') no-repeat center;
 }
 >>> .app-table .ivu-table-tip {
@@ -608,6 +718,76 @@ export default {
   color: #85A3D4;
   margin: 10px 0;
 }
+
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
 /deep/ .ivu-input::-webkit-input-placeholder{
   color: #718EBD;
 }

src/views/homecomponents/EquipmentAnalysis/ContinuityMonitorConfig.vue

@@ -1,16 +1,5 @@
 <template>
   <div class="content-main-manage">
-    <!--今日告警表格 -->
-    <!-- <Table :columns="testColumns" :data="testTableData">
-        <template slot-scope="{ row }" v-for="(item,i) in testColumns" :slot="item.slot" >
-          <span v-if="i==0" style="text-decoration: underline;cursor: pointer;}">{{row.name}}</span>
-          <template v-else>
-            <span style="display:inline-block;width:49%;text-align:right;color:#F8952B;text-decoration: underline;cursor: pointer;}">{{row.alarmNum}}</span>
-            <span style="display:inline-block;width:2%;">丨</span>
-            <span style="display:inline-block;width:49%;text-align:left;padding-left:4px;text-decoration: underline;cursor: pointer;">{{row.alarmEquip}}</span>
-          </template>
-      </template>
-    </Table> -->
     <div class="search-list">
       <div class="search-left">
         <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
@@ -20,7 +9,7 @@
             </Select>
           </FormItem>
           <FormItem label="" prop="name">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.name" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.name" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -74,7 +63,7 @@
         <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="strategyName" style="width:100%">
+        <FormItem label="策略名称：" prop="strategyName" style="width:100%">
           <Input v-model.trim="formOption.strategyName" maxlength="20" show-word-limit /> 
         </FormItem>
         <FormItem label="来源应用：" prop="appId" style="width:100%">
@@ -273,7 +262,7 @@
   </div>
 </template>
 <script>
-const defaultFrom = {strategyName: '',appId:'',equipmentTypeId:''}
+const defaultFrom = {strategyName: '',appId:'',equipmentTypeId:'',enabled: 0}
 export default {
   name: "ContinuityMonitorConfig",
   components:{
@@ -367,7 +356,7 @@ export default {
           },
           {
             title: '策略覆盖指标数量',
-            key: 'coverRankCount',
+            key: 'coverTargetCount',
             align: 'center'
           },
           {
@@ -417,7 +406,7 @@ export default {
       activeColor: '#E92E2E',
       activeClass: '',
       modalTitle: '',
-      formOption: {strategyName: '',appId:'',equipmentTypeId:''},
+      formOption: {strategyName: '',appId:'',equipmentTypeId:'',enabled: 0},
       ruleValidate: {
         strategyName: [{
           required: true,
@@ -807,15 +796,33 @@ export default {
     },
     selectTarget (val,index) {
       this.formCustom.alertStrategyDurativeDTOList[index].targetId = val
-      this.formCustom.alertStrategyDurativeDTOList[index].targetName = this.$refs.targetId[0].query
+      let targetName = ''
+      this.indicatorsModalData.forEach((item)=> {
+        if (val == item.id) {
+         targetName = item.value
+        }
+      })
+      this.formCustom.alertStrategyDurativeDTOList[index].targetName = targetName
     },
     selectExceptionRule (val,index) {
       this.formCustom.alertStrategyDurativeDTOList[index].exceptionRule = val
-      this.formCustom.alertStrategyDurativeDTOList[index].exceptionRuleValue = this.$refs.exceptionRule[0].query
+      let exceptionRuleValue = ''
+      this.exceptionRuleData.forEach((item)=> {
+        if (val == item.id) {
+         exceptionRuleValue = item.value
+        }
+      })
+      this.formCustom.alertStrategyDurativeDTOList[index].exceptionRuleValue = exceptionRuleValue
     },
     selectRank (val,index) {
       this.formCustom.alertStrategyDurativeDTOList[index].rankId = val
-      this.formCustom.alertStrategyDurativeDTOList[index].rankName = this.$refs.rank[0].query
+      let rankName = ''
+      this.alarmLevelModalData.forEach((item)=> {
+        if (val == item.id) {
+         rankName = item.name
+        }
+      })
+      this.formCustom.alertStrategyDurativeDTOList[index].rankName = rankName
     }
   }
 };
@@ -833,8 +840,7 @@ export default {
   display: flex;
   align-items: center;
    .ivu-select {
-     width: 155px;
-     padding-right: 10px;
+     width: 175px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
@@ -873,16 +879,22 @@ export default {
   height: calc(100% - 150px);
 }
 .common-table {
-  max-height: 100%;
+  height: 100%;
+  // max-height: 100%;
+}
+>>> .common-table .ivu-table-body{
+  height: calc(100% - 49px);
+  overflow: hidden;
+  overflow-y: auto;
 }
 >>> .common-table .ivu-table th {
-  height: 50px;
+  height: 49px;
  }
  >>> .common-table .ivu-table td {
-  height: 49.5px;
+  height: 48.5px;
  }
   >>> .common-table .ivu-spin-fix {
-   top: 50px;
+   top: 49px;
  }
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);

src/views/homecomponents/EquipmentAnalysis/FilteredAlarm.vue

@@ -19,19 +19,19 @@
             </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="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
           </FormItem>
            <FormItem label="">
-            <DatePicker type="daterange" :value="dateOperateRange" :clearable="false" class="common-date-picker date-picker-main" placement="bottom-end" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
+            <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateOperateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="keywords">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
           </FormItem>
           <FormItem label="" >
-            <Button type="primary" class="common-btn-search" @click="searchClick">
+            <Button type="primary" class="common-btn-search" @click="searchClick" style="width: 80px">
               <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')">
+            <Button type="primary" class="common-btn-search" style="margin-left:5px;width: 80px" @click="resetClick('tableParams')">
               <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
             </Button>   
           </FormItem>
@@ -107,9 +107,55 @@
           <Button type="primary" @click="modalOk">确定</Button>
         </div>
     </Modal>
+    <Modal
+      v-model="detailStatus"
+      title="告警详情"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      @on-visible-change="modalDetailChange"
+      :mask-closable="false"
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
   </div>
 </template>
 <script>
+import utils from "@/libs/utils"
 const defaultFrom = {alertRankId: null,processingStatus:null}
 export default {
   name: "FilteredAlarm",
@@ -149,6 +195,7 @@ export default {
         keywords: '',
         applicationId:'',
         equipmentTypeId: '',
+        oneKeywords: '',
         alertRankId: '',
         beginAlertTime: '',
         endAlertTime: '',
@@ -235,16 +282,61 @@ export default {
       title: '告警信息修正',
       dateModalRange: [],
       formOption: {alertRankId: null,processingStatus:null},
-      idArr: []
+      idArr: [],
+      alertIds: null,
+       detailStatus: false,
+      detailParams: {
+					alertId: null,
+					pageNum: 1,
+					pageSize: 10
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
     };
   },
   mounted() {
+    this.getType()
   },
   methods: {
-    go (){
-      // this.$router.push({path:'//ApplicationManage'})
-      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
-      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        let menuNameArr = []
+        menuNameArr = ['设备分析','告警分析','告警监测']
+        sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
+        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+        this.$router.push({ name: 'AlarmMonitor', params: { equipmentId:this.rowObj.equipmentId }})
+      }
     },
     changePicker (date) {
       this.tableParams.beginAlertTime = date[0]
@@ -394,12 +486,13 @@ export default {
       if (row.id || this.idArr.length>0) {
         this.formOption = JSON.parse(JSON.stringify(defaultFrom))
         this.title = '告警信息修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
         this.showModal = true
       } else {
         this.$Message.info('请至少选择一条数据')
       }
     },
-    correctData (params) {
+    changeStateData (params) {
       this.$post('metroapi/alert/processing/update/status',params).then(res=>{
         if (res.httpCode == 1 ){
           this.showModal = false
@@ -410,19 +503,42 @@ export default {
         }
       })
     },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
     modalChange (modalStatus) {
      if (!modalStatus) {
       this.$refs.formOption.resetFields();
-      this.idArr = []
      }
     },
     modalOk () {
       let params = {
-        alertIds: this.idArr.join() || Number(this.rowObj.id),
+        alertIds: this.alertIds,
         processingStatus: this.formOption.processingStatus,
         alertRankId: this.formOption.alertRankId,
+        operationContent: '修正',
+        userId: utils.storage('sw_user').userId
       }
-      this.correctData(params)
+      this.changeStateData(params)
     },
     modalCancel () {
       this.showModal = false
@@ -464,19 +580,18 @@ export default {
   display: flex;
   align-items: center;
    .ivu-select {
-     width: 155px;
-     padding-right: 10px;
+     width: 120px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
      height: 100%;
    }
    >>> .ivu-input {
-     width: 160px;
+     width: 140px;
      height: 32px;
    }
    >>> .common-date-picker .ivu-input {
-    width: 210px;
+    width: 332px;
    }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;
@@ -489,6 +604,9 @@ export default {
    >>> .date-picker-main .ivu-date-picker-header {
     border-bottom: 0.0052083333rem solid #204384;
  }
+  >>> .common-btn-search {
+   padding: 0 10PX;
+ }
 }
 .btn-container {
   display: flex;
@@ -529,6 +647,7 @@ export default {
 }
 >>> .common-form-list .ivu-form-item {
   margin-bottom: 10px;
+  margin-right: 6px;
 }
 .manage-main-center {
   width: 100%;
@@ -549,7 +668,7 @@ export default {
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);
  }
- >>> .ivu-table-tip {
+ >>> .common-table .ivu-table-tip {
   background: url('../../../assets/images/noData.png') no-repeat center;
 }
 >>> .app-table .ivu-table-tip {
@@ -589,6 +708,75 @@ export default {
   color: #85A3D4;
   margin: 10px 0;
 }
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
 /deep/ .ivu-input::-webkit-input-placeholder{
   color: #718EBD;
 }

src/views/homecomponents/EquipmentAnalysis/LevelDeterConfig.vue

@@ -29,7 +29,7 @@
             </Select>
           </FormItem>
           <FormItem label="" prop="name">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.name" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.name" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -94,7 +94,7 @@
           </Select>
         </FormItem>
          <FormItem label="策略名称：" prop="strategyName" style="width:100%" >
-          <Input v-model.trim="formOption.strategyName" placeholder="默认回显【来源应用-设备类型】作为策略名称，可手动修改"/>  
+          <Input v-model.trim="formOption.strategyName" placeholder="默认回显【来源应用-设备类型】作为策略名称，可手动修改" maxlength="100" show-word-limit />  
         </FormItem>
 			</Form>
       <div class="common-modal-top">
@@ -317,7 +317,7 @@
   </div>
 </template>
 <script>
-const defaultFrom = {appId:'',equipmentTypeId: '',strategyName: ''}
+const defaultFrom = {appId:'',equipmentTypeId: '',strategyName: '',enabled: 0}
 export default {
   name: "LevelDeterConfig",
   components:{
@@ -407,12 +407,8 @@ export default {
           label: '策略覆盖设备数量'
         },
         {
-          value: '0',
-          label: '0'
-        },
-        {
-          value: '1-10',
-          label: '1-10'
+          value: '0-10',
+          label: '0-10'
         },
         {
           value: '11-50',
@@ -511,7 +507,7 @@ export default {
       activeColor: '#E92E2E',
       activeClass: '',
       modalTitle: '',
-      formOption: {appId:'',equipmentTypeId: '',strategyName: ''},
+      formOption: {appId:'',equipmentTypeId: '',strategyName: '',enabled: 0},
       appModalName: '',
       ruleValidate: {
         appId: [{
@@ -529,7 +525,7 @@ export default {
         strategyName: [{
           required: true,
           message: '请输入策略名称',
-          trigger: 'blur'
+          trigger: 'change'
         }],
       }, 
       detailLabel: [],
@@ -808,10 +804,7 @@ export default {
       this.getstrategyData(row.id)
       this.clickbtn = 1
       this.rowObj = row
-      this.formOption.id = row.id
-      this.formOption.appId = row.appId
-      this.formOption.equipmentTypeId = row.equipmentTypeId
-      this.formOption.strategyName =  row.strategyName
+      this.formOption = JSON.parse(JSON.stringify(row));
       this.appParams.applicationId = this.formOption.appId
       this.getAddEquipType(this.appParams)
       this.title = '编辑策略'
@@ -1050,16 +1043,34 @@ export default {
     },
     selectTarget (val,index,i) {
       this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].targetId = val
-      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].targetName = this.$refs.targetId[0].query
+      let targetName = ''
+      this.indicatorsModalData.forEach((item)=> {
+        if (val == item.id) {
+          targetName = item.value
+        }
+      })
+      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].targetName = targetName
     },
     selectLogical1 (val,index,i) {
       this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logical1 = val
-      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName1 = this.$refs.logical1[0].query
+      let logicalName1 = ''
+      this.operatorModalData.forEach((item)=> {
+        if (val == item.id) {
+        logicalName1 = item.value
+        }
+      })
+      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName1 = logicalName1
     },
     selectConnectLogical (val,index,i) {
       if (val) {
         this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogical = val
-        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogicalName = this.$refs.connectLogical[0].query
+        let connectLogicalName = ''
+        this.logicJudgmentModalData.forEach((item)=> {
+          if (val == item.id) {
+           connectLogicalName = item.value
+          }
+        })
+        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogicalName = connectLogicalName
       } else {
         this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogical = ''
         this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogicalName = ''
@@ -1068,7 +1079,13 @@ export default {
     selectLogical2 (val,index,i) {
       if (val) {
         this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logical2 = val
-        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName2 = this.$refs.logical2[0].query
+        let logicalName2 = ''
+        this.operatorModalData.forEach((item)=> {
+          if (val == item.id) {
+          logicalName2 = item.value
+          }
+        })
+        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName2 = logicalName2
       } else {
         this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logical2 = ''
         this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName2 = ''
@@ -1076,7 +1093,13 @@ export default {
     },
     selectRank (val,index) {
       this.formCustom.alertStrategyRankDTOList[index].rankId = val
-      this.formCustom.alertStrategyRankDTOList[index].rankName = this.$refs.rank[0].query
+      let rankName = ''
+      this.alarmLevelModalData.forEach((item)=> {
+        if (val == item.id) {
+         rankName = item.name
+        }
+      })
+      this.formCustom.alertStrategyRankDTOList[index].rankName = rankName
       // this.alarmLevelModalData.forEach((item,index)=> {
       //   if (val == item.id) {
       //     item.disabled = true
@@ -1102,8 +1125,7 @@ export default {
   display: flex;
   align-items: center;
    .ivu-select {
-     width: 165px;
-     padding-right: 10px;
+     width: 175px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
@@ -1139,10 +1161,17 @@ export default {
 }
 .manage-main-center {
   width: 100%;
-  height: calc(100% - 150px);
+  // height: calc(100% - 150px);
+  height: calc(100% - 140px);
 }
 .common-table {
-  max-height: 100%;
+  height: 100%;
+  // max-height: 100%;
+}
+>>> .common-table .ivu-table-body{
+  height: calc(100% - 50px);
+  overflow: hidden;
+  overflow-y: auto;
 }
 >>> .common-table .ivu-table th {
   height: 50px;
@@ -1153,6 +1182,15 @@ export default {
   >>> .common-table .ivu-spin-fix {
    top: 50px;
  }
+// >>> .common-table .ivu-table th {
+//   height: 49px;
+//  }
+//  >>> .common-table .ivu-table td {
+//   height: 48.5px;
+//  }
+//   >>> .common-table .ivu-spin-fix {
+//    top: 49px;
+//  }
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);
  }

src/views/homecomponents/EquipmentAnalysis/PolicyConfigManage.vue

@@ -11,7 +11,7 @@
             <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"/>
+                  <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">

src/views/homecomponents/EquipmentAnalysis/ToConfirmedAlarm.vue

@@ -19,10 +19,10 @@
             </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="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="keywords">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -130,7 +130,7 @@
       reset-drag-position
       :mask-closable="false"
       class-name="common-modal">
-      <div class="common-modal-select" :style="{ color: activeColor}" v-if="idArr.length>1">已选择：{{idArr.length}}条数据</div>
+      <div class="common-modal-select" :style="{ color: activeColor}">已选择：{{alertIdNum}}条数据</div>
       <i class="iconfont icon-queren" style="vertical-align: middle;cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" v-show="commonTitle=='告警确认'"></i>
       <i class="iconfont icon-shanchu" style="vertical-align: middle;cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" v-show="commonTitle=='确认清除'"></i>
       <span class="modal-text">{{modalTitle}}</span>
@@ -139,9 +139,55 @@
           <Button type="primary" @click="commonOk">确定</Button>
         </div>
     </Modal>
+    <Modal
+      v-model="detailStatus"
+      title="告警详情"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      @on-visible-change="modalDetailChange"
+      :mask-closable="false"
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
   </div>
 </template>
 <script>
+import utils from "@/libs/utils"
 const defaultFrom = {alertRankId: null,processingStatus:null}
 export default {
   name: "ToConfirmedAlarm",
@@ -180,6 +226,7 @@ export default {
         keywords: '',
         applicationId:'',
         equipmentTypeId: '',
+        oneKeywords: '',
         alertRankId: '',
         beginAlertTime: '',
         endAlertTime: '',
@@ -274,26 +321,68 @@ export default {
       modalTitle: '',
       dateModalRange: [],
       formOption: {alertRankId: null,processingStatus: null},
-      idArr: []
+      idArr: [],
+      alertIds: null,
+      alertIdNum: 1,
+      operationContent: '修正',
+      detailStatus: false,
+      detailParams: {
+					alertId: null,
+					pageNum: 1,
+					pageSize: 10
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
     };
   },
   mounted() {
+    this.getType()
   },
   methods: {
-    go (){
-      // this.$router.push({path:'//ApplicationManage'})
-      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
-      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        let menuNameArr = []
+        menuNameArr = ['设备分析','告警分析','告警监测']
+        sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
+        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+        this.$router.push({ name: 'AlarmMonitor', params: { equipmentId:this.rowObj.equipmentId }})
+      }
     },
     changePicker (date) {
       this.tableParams.beginAlertTime = date[0]
       this.tableParams.endAlertTime = 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";
@@ -431,15 +520,22 @@ export default {
       if (row.id || this.idArr.length>0) {
         this.formOption = JSON.parse(JSON.stringify(defaultFrom))
         this.title = '告警信息修正'
+        this.operationContent = '修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
+        this.alertIdNum = row.id ? 1 : this.idArr.length
         this.showModal = true
       } else {
         this.$Message.info('请至少选择一条数据')
       }
     },
-    correctData (params) {
+    changeStateData (params) {
       this.$post('metroapi/alert/processing/update/status',params).then(res=>{
         if (res.httpCode == 1 ){
-          this.showModal = false
+          if (this.showModal) {
+           this.showModal = false
+          } else if(this.modalStatus){
+            this.modalStatus = false
+          } 
           this.$Message.info(res.msg)
           this.getTableData()
         } else {
@@ -449,11 +545,20 @@ export default {
     },
     queenClick (row) {
       this.rowObj = row
-      this.commonTitle = '告警确认'
-      this.activeColor = '#08AF68'
-      this.activeClass = ''
-      this.modalTitle = '告警信息状态将被标注为【已确认】，告警将被确认为有效信息。'
-      this.modalStatus = true
+      if (row.id || this.idArr.length>0) {
+        this.commonTitle = '告警确认'
+        this.activeColor = '#08AF68'
+        this.activeClass = ''
+        this.modalTitle = '告警信息状态将被标注为【已确认】，告警将被确认为有效信息。'
+        this.operationContent = '确认'
+        this.formOption.alertRankId = null
+        this.formOption.processingStatus = 39
+        this.alertIds = row.id ? row.id : this.idArr.join()
+        this.alertIdNum = row.id ? 1 : this.idArr.length
+        this.modalStatus = true
+      } else {
+        this.$Message.info('请至少选择一条数据')
+      }
     },
     forwardClick (row) {
 
@@ -471,50 +576,74 @@ export default {
     // },
     delClick (row) {
       this.rowObj = row
-      this.commonTitle = '确认清除'
-      this.activeColor = '#E92E2E'
-      this.activeClass = ''
-      this.modalTitle = '告警信息状态将被标注为【已清除】，从系统有效数据中脱钩。'
-      this.modalStatus = true
+      if (row.id || this.idArr.length>0) {
+        this.commonTitle = '确认清除'
+        this.activeColor = '#E92E2E'
+        this.activeClass = ''
+        this.modalTitle = '告警信息状态将被标注为【已清除】，从系统有效数据中脱钩。'
+        this.operationContent = '清除'
+        this.formOption.alertRankId = null
+        this.formOption.processingStatus = 40
+        this.alertIds = row.id ? row.id : this.idArr.join()
+        this.alertIdNum = row.id ? 1 : this.idArr.length
+        this.modalStatus = true
+      } else {
+        this.$Message.info('请至少选择一条数据')
+      }
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
+    },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
     },
     modalChange (modalStatus) {
      if (!modalStatus) {
       this.$refs.formOption.resetFields();
-      this.idArr = []
      }
     },
     modalOk () {
       let params = {
-        alertIds: this.idArr.join() || Number(this.rowObj.id),
+        alertIds: this.alertIds,
         processingStatus: this.formOption.processingStatus,
         alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
       }
-      this.correctData(params)
+      this.changeStateData(params)
     },
     modalCancel () {
       this.showModal = false
     },
     commonOk () {
-      let params = {
-        id: this.rowObj.id
+     let params = {
+        alertIds: this.alertIds,
+        processingStatus: this.formOption.processingStatus,
+        alertRankId: this.formOption.alertRankId,
+        operationContent: this.operationContent,
+        userId: utils.storage('sw_user').userId
       }
-      this.delData(params)
+      this.changeStateData(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>
@@ -532,7 +661,6 @@ export default {
   align-items: center;
    .ivu-select {
      width: 155px;
-     padding-right: 10px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
@@ -543,7 +671,7 @@ export default {
      height: 32px;
    }
     >>> .common-date-picker .ivu-input {
-    width: 210px;
+    width: 332px;
    }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;
@@ -616,7 +744,7 @@ export default {
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);
  }
- >>> .ivu-table-tip {
+ >>> .common-table .ivu-table-tip {
   background: url('../../../assets/images/noData.png') no-repeat center;
 }
 >>> .app-table .ivu-table-tip {
@@ -656,6 +784,76 @@ export default {
   color: #85A3D4;
   margin: 10px 0;
 }
+
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
 /deep/ .ivu-input::-webkit-input-placeholder{
   color: #718EBD;
 }

src/views/homecomponents/EquipmentAnalysis/UnableDeterAlarm.vue

@@ -19,10 +19,10 @@
             </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="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
           </FormItem>
           <FormItem label="" prop="keywords">
-            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
           </FormItem>
           <FormItem label="" >
             <Button type="primary" class="common-btn-search" @click="searchClick">
@@ -105,24 +105,54 @@
         </div>
     </Modal>
     <Modal
-      v-model="modalStatus"
-      :title="commonTitle"
-      width="30"
+      v-model="detailStatus"
+      title="告警详情"
+      width="45"
       ref="modalGrag"
       draggable
       reset-drag-position
+      footer-hide
+      @on-visible-change="modalDetailChange"
       :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>
+      class-name="common-modal common-modal-detail">
+      <template v-if="detailLabel && detailLabel.length>0">
+        <div v-for="(item,index) in detailLabel" :key="index" >
+            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
+            <span class="common-modal-top-text">{{item.name}}</span>
+            </div>
+            <div class="common-modal-content" v-if="index<2">
+              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
+                  <div class="modal-content-item-name">{{val.name}}</div>
+                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
+                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
+                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                      <span v-else-if="val.name == '同比'">
+                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                        {{val.value+'%'}}
+                      </span>
+                      <span v-else>{{val.value}}</span>
+                      <div slot="content">
+                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
+                        <span v-else-if="val.name == '同比'">
+                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
+                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
+                          {{val.value+'%'}}
+                        </span>
+                        <span v-else>{{val.value}}</span>
+                      </div>
+                  </Tooltip>
+                  </div>
+              </div>
+            </div>
+        </div>
+        </template>
+        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
     </Modal>
   </div>
 </template>
 <script>
+import utils from "@/libs/utils"
 const defaultFrom = {alertRankId: ''}
 export default {
   name: "UnableDeterAlarm",
@@ -157,7 +187,7 @@ export default {
       loading: true,
       dateRange: [],
       tableParams: {
-        processingStatus:'',
+        processingStatus:37,
         keywords: '',
         applicationId:'',
         equipmentTypeId: '',
@@ -249,13 +279,7 @@ export default {
         }
       ],
       showModal: false,
-      modalStatus: false,
       title: '告警信息修正',
-      commonTitle: "确认删除",
-      activeColor: '#E92E2E',
-      activeClass: '',
-      modalTitle: '',
-      dateModalRange: [],
       formOption: {alertRankId: ''},
       ruleValidate: {
         alertRankId: [{
@@ -265,26 +289,66 @@ export default {
           trigger: 'change'
         }],
       },
-      idArr: []
+      idArr: [],
+      alertIds: null,
+      detailStatus: false,
+      detailParams: {
+        alertId: null,
+        pageNum: 1,
+        pageSize: 5
+			},
+      apiUrl: '',
+      detailLabel: [],
+      columnsModal: [
+        {
+            title: '操作内容',
+            key: 'operationContent',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作人',
+            key: 'operationUserName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          }, 
+          {
+            title: '操作时间',
+            key: 'operationTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '备注',
+            key: 'operationNote',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+      ]
     };
   },
   mounted() {
+    this.getType()
   },
   methods: {
-    go (){
-      // this.$router.push({path:'//ApplicationManage'})
-      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
-      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    // 跳转到实时告警列表-设备视图
+    go (val) {
+      if (val.name == '设备今日告警') {
+        let menuNameArr = []
+        menuNameArr = ['设备分析','告警分析','告警监测']
+        sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
+        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
+        this.$router.push({ name: 'AlarmMonitor', params: { equipmentId:this.rowObj.equipmentId }})
+      }
     },
     changePicker (date) {
       this.tableParams.beginAlertTime = date[0]
       this.tableParams.endAlertTime = 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";
@@ -353,8 +417,7 @@ export default {
       let params = JSON.parse(JSON.stringify(this.tableParams))
       params.alertRankId = params.alertRankId == '-1' ? '':params.alertRankId
       params.applicationId = params.applicationId == '-1' ? '':params.applicationId
-      params.equipmentTypeId = params.equipmentTypeId == '-1' ? '':params.equipmentTypeId 
-      console.log(params)
+      params.equipmentTypeId = params.equipmentTypeId == '-1' ? '':params.equipmentTypeId
       this.loading = true
       this.$get('metroapi/alert/processing/details', params).then(res=>{
         this.loading = false
@@ -412,27 +475,32 @@ export default {
     },   
     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)
-      //   }
-      // }) 
+      this.detailParams.alertId = this.rowObj.id
+      this.detailStatus = true
+      this.$nextTick(() => {
+        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
+        if ( res.httpCode == 1 ){
+            this.detailLabel = res.data
+          } else {
+            this.$Message.info(res.msg)
+          }
+        })
+        this.apiUrl = 'metroapi/alert/processing/info'
+        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
+      });
     },
     correctClick (row) {
       this.rowObj = row
       if (row.id || this.idArr.length>0) {
         this.formOption = JSON.parse(JSON.stringify(defaultFrom))
         this.title = '告警信息修正'
+        this.alertIds = row.id ? row.id : this.idArr.join()
         this.showModal = true
       } else {
         this.$Message.info('请至少选择一条数据')
       }
     },
-    correctData (params) {
+    changeStateData (params) {
       this.$post('metroapi/alert/processing/update/status',params).then(res=>{
         if (res.httpCode == 1 ){
           this.showModal = false
@@ -443,39 +511,27 @@ export default {
         }
       })
     },
-    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.idArr = []
      }
     },
+    modalDetailChange (val) {
+     	if (!val) {
+        this.detailParams.pageNum = 1
+        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
+      }
+    },
     modalOk (formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
             let params = {
-            alertIds: this.idArr.join() || Number(this.rowObj.id),
+            alertIds: this.alertIds,
             alertRankId: this.formOption.alertRankId,
+            operationContent: '修正',
+            userId: utils.storage('sw_user').userId
           }
-          this.correctData(params)
+          this.changeStateData(params)
           } else {
             this.showModal = true
           }
@@ -484,27 +540,6 @@ export default {
     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>
@@ -522,7 +557,6 @@ export default {
   align-items: center;
    .ivu-select {
      width: 155px;
-     padding-right: 10px;
      height: 32px;
    }
    .ivu-select-single .ivu-select-selection {
@@ -532,6 +566,9 @@ export default {
      width: 160px;
      height: 32px;
    }
+    >>> .common-date-picker .ivu-input {
+    width: 332px;
+   }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
      height: 32px;
      line-height: 32px;
@@ -603,7 +640,7 @@ export default {
   >>> .app-table .ivu-spin-fix {
    height: calc(100vh - 375px);
  }
- >>> .ivu-table-tip {
+ >>> .common-table .ivu-table-tip {
   background: url('../../../assets/images/noData.png') no-repeat center;
 }
 >>> .app-table .ivu-table-tip {
@@ -643,6 +680,75 @@ export default {
   color: #85A3D4;
   margin: 10px 0;
 }
+>>> .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-top-especial {
+  margin-bottom: -10px;
+}
+>>> .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 .ivu-tooltip-rel{
+  cursor: pointer;
+  text-decoration: underline;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+>>> .common-modal-detail .ivu-table-body {
+ max-height: 238PX;
+}
 /deep/ .ivu-input::-webkit-input-placeholder{
   color: #718EBD;
 }

vue.config.js

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