代码上传

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2962009 */
-  src: url('iconfont.woff2?t=1648434488364') format('woff2'),
-       url('iconfont.woff?t=1648434488364') format('woff'),
-       url('iconfont.ttf?t=1648434488364') format('truetype');
+  src: url('iconfont.woff2?t=1650247417513') format('woff2'),
+       url('iconfont.woff?t=1650247417513') format('woff'),
+       url('iconfont.ttf?t=1650247417513') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-fuzhi:before {
+  content: "\e64b";
+}
+
+.icon-shengtaixitongleixing:before {
+  content: "\e644";
+}
+
 .icon-_chakanxiazai:before {
   content: "\e619";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "3978314",
+      "name": "复制",
+      "font_class": "fuzhi",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "16156064",
+      "name": "生态系统类型",
+      "font_class": "shengtaixitongleixing",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
       "icon_id": "9231386",
       "name": "2_查看下载1",
       "font_class": "_chakanxiazai",

src/login/DownAllQualityReport.vue

@@ -2059,4 +2059,7 @@ export default {
 >>> .total-exceptions-table-cell span {
   color: #D70101;
 }
+/deep/ .ivu-form-item-label{
+    white-space:pre-line;
+}
 </style>

src/main.js

@@ -18,7 +18,7 @@ Vue.prototype.$axiosAll = axiosAll
 import Common from './components/common' //自定义通用全局组件
 // 注册自定义通用全局组件
 Vue.use(Common)
-Vue.config.productionTip = false
+Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
 Vue.use(ViewUI)
 // const bus = new Vue()
 // Vue.prototype.$bus = bus; //实现全局bus 兄弟组件

src/router/index.js

@@ -16,6 +16,7 @@ const LineStationManage = ()=>import('@/views/homecomponents/BasicInfomation/Lin
 const ApplicationManage = ()=>import('@/views/homecomponents/BasicInfomation/ApplicationManage.vue')
 const DeviceManage = ()=>import('@/views/homecomponents/BasicInfomation/DeviceManage.vue')
 const InstruManage = ()=>import('@/views/homecomponents/BasicInfomation/InstruManage.vue')
+const EnergyTypeManage = ()=>import('@/views/homecomponents/BasicInfomation/EnergyTypeManage.vue')
 const OperaTimeManage = ()=>import('@/views/homecomponents/BasicInfomation/OperaTimeManage.vue')
 const Organization = ()=>import('@/views/homecomponents/SystemSettings/Organization.vue')
 const UserManagement = ()=>import('@/views/homecomponents/SystemSettings/UserManagement.vue')
@@ -110,6 +111,11 @@ const routes = [
         component: InstruManage
       },
       {
+        path: 'EnergyTypeManage', 
+        name: 'EnergyTypeManage', 
+        component: EnergyTypeManage
+      },
+      {
         path: 'OperaTimeManage', 
         name: 'OperaTimeManage', 
         component: OperaTimeManage

src/store/modules/user.js

@@ -48,7 +48,7 @@ const actions = { // Action 类似于 mutation. Action 提交的是 mutation，
   },
 }
 const getters = {
-  getMenuList: state => state.userInfo.menus //store 中的 state 中派生出一些状态 通过属性访问this.$store.getters.getMenuList 也可以通过方法访问
+  // getMenuList: state => state.userInfo.menus //store 中的 state 中派生出一些状态 通过属性访问this.$store.getters.getMenuList 也可以通过方法访问
 }
 
 export default {

src/views/homecomponents/BasicInfomation/EnergyTypeManage.vue

@@ -0,0 +1,388 @@
+<template>
+  <div class="content-main-manage">
+    <div class="content-main">
+     <div class="content-body-wrap">
+       <div class="content-body">
+          <div class="search-list">
+            <div class="btn-container">
+              <Button icon="ios-add" class="common-add-btn" @click="addClick">新增新能耗类型</Button>
+            </div>
+            </div>
+            <div class="manage-main-center">
+              <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
+                <template slot="loading">
+                    <Loading-animation></Loading-animation>
+                </template>
+                <template slot-scope="{ row }" slot="action">
+                  <Tooltip content="编辑" placement="top">
+                      <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
+                  </Tooltip>
+                  <Tooltip content="删除" placement="top">
+                      <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
+                  </Tooltip>
+                </template>
+              </Table>
+            </div>
+            <div class="common-page">
+              <div class="common-page-total">
+                共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+              </div>
+              <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+            </div>
+       </div>      
+     </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      :title="title"
+      width="34"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      @on-visible-change="modalChange"
+      :mask-closable="false"
+      class-name="common-modal">
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="140">
+        <FormItem label="能耗类型名称：" prop="name">
+          <Input v-model.trim="formOption.name" maxlength="10" show-word-limit placeholder="请输入能耗名称"/>
+        </FormItem>
+        <FormItem label="能耗单位：" prop="unit">
+          <Input v-model="formOption.unit" maxlength="10" show-word-limit placeholder="请输入能耗单位"/>
+        </FormItem>
+        <FormItem prop="coalCoefficient" class="else-formitem">
+          <div slot="label">折标准煤系数<br>(kgce/unit)：</div>
+          <Input v-model="formOption.coalCoefficient" maxlength="10" show-word-limit placeholder="请输入折算系数"/>
+        </FormItem>
+          <FormItem prop="co2Coefficient" class="else-formitem">
+          <div slot="label">CO2当量排放因子<br>(kgCO2e/unit)：</div>
+          <Input v-model="formOption.co2Coefficient" maxlength="10" show-word-limit placeholder="请输入折算系数" />
+        </FormItem>
+      </Form>
+      <div slot="footer">
+          <Button @click="modalCancel">取消</Button>
+          <Button type="primary" @click="modalOk('formOption')">确定</Button>
+        </div>
+    </Modal>
+    <Modal
+      v-model="modalStatus"
+      :title="commonTitle"
+      width="30"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      class-name="common-modal">
+        <i :class="'iconfont '+ activeClass" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle!='确认删除'"></i>
+      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle=='确认删除'"></Icon>
+      <span class="modal-text">{{modalTitle}}</span>
+      <div slot="footer">
+          <Button @click="commonCancel">取消</Button>
+          <Button type="primary" @click="commonOk">确定</Button>
+       </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {name: '',unit: '',coalCoefficient: '',co2Coefficient: ''}
+export default {
+  name: "EnergyTypeManage",
+  components:{
+  },
+  data() {
+    return {
+      loading: true,
+      tableParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      tablePage: 0,
+      columns: [
+          {
+            title: '序号',
+            type: 'index',
+            align: 'center',
+          },
+          {
+            title: '能耗类型名称',
+            key: 'name',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '能耗单位',
+            key: 'unit',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '折标准煤系数\n(kgce/unit)',
+            key: 'coalCoefficient',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: 'CO2当量排放因子\n(kgCO2e/unit)',
+            key: 'co2Coefficient',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '创建时间',
+            key: 'createTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '修改日期',
+            key: 'updateTime',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '操作',
+            align: 'center',
+            slot: 'action',
+            width: 120,
+          }
+      ],   
+      showModal: false,
+      permissStatus: false, 
+      modalStatus: false,
+      title: '新增能耗类型',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {name: '',unit: '',coalCoefficient: '',co2Coefficient: ''},
+      ruleValidate: {
+        name: [{
+          required: true,
+          message: '请输入能耗类型名称',
+          trigger: 'blur'
+        }],
+      },
+    };
+  },
+  mounted() {
+    this.getTableData()
+  },
+  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 () {
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      this.loading = true
+      this.$get('metroapi/energyConsumption/queryEnergyConsumptionPage', params).then(res=>{
+        this.loading = false
+          if (res.httpCode == 1 ){
+            this.tableData = res.data.data
+            this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
+            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    searchClick () {
+      this.tableParams.pageNum = 1
+      this.getTableData()
+    },
+    resetClick (name) {
+     this.$refs[name].resetFields()
+     this.tableParams.pageNum = 1
+     this.getTableData()
+    },   
+    addClick () {
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+      this.title = '新增能耗类型'
+      this.showModal = true
+    },
+    editClick (row) {
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row));
+      this.title = '编辑能耗类型'
+      this.showModal = true
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认删除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复。请慎重操作。'
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    modalOk (formName) {
+      let url = ''
+      if (this.title == '新增能耗类型') {
+        url = 'metroapi/energyConsumption/addEnergyConsumption'
+      } else {
+        url = 'metroapi/energyConsumption/editEnergyConsumption'
+      }
+      let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$post(url, params).then(res=>{
+            if (res.httpCode == 1 ){
+              this.showModal = false
+              this.$Message.info(res.msg)
+              this.getTableData()
+            } else {
+              this.$Message.info(res.msg)
+            }
+          })
+        } else {
+          this.showModal = true
+        }
+      })
+    },
+    modalCancel () {
+      this.showModal = false
+    },
+    commonOk () {
+      let params = {
+        energyConsumptionId: this.rowObj.id
+      }
+      this.delData(params)
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+    // 删除 关闭/接口
+    delData (params) {
+      this.$get('metroapi/energyConsumption/delEnergyConsumption',params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.modalStatus = false
+          this.$Message.info(res.msg)
+          this.getTableData()
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main-manage {
+  overflow: hidden;
+  height: calc(100% - 50px);
+  width: 100%;
+}
+.content-main {
+  width: 100%;
+  height: 100%;
+}
+.content-body-wrap {
+  width: 100%;
+  height: 100%;
+  background: #06214d;
+  padding: 10px;
+}
+.content-body {
+  height: 100%;
+  position: relative;
+}
+.search-list {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 0;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 150px);
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table .ivu-table-header .ivu-table-cell {
+ white-space: pre;
+}
+>>> .common-table .ivu-table th {
+  height: 54px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 55px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 54px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 355px);
+ }
+ >>> .common-table .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .common-table .ivu-table-tip table {
+ display: none;
+}
+>>> .app-table .ivu-table-tip {
+   height: calc(100vh - 355px);
+ }
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+>>> .else-formitem .ivu-form-item-label{
+line-height: 16px;
+}
+</style>

src/views/homecomponents/BasicInfomation/InstruManage.vue

@@ -1,53 +1,190 @@
 <template>
-  <div class="container">
-    <!-- <div style="display:flex;align-items: center;height:100%">
-      <div style="flex:1;display:flex;align-items: center;" v-for="(item,index) in arr" :key="index">
-            <div :style="{flex:(index==0 ? 1:'1 1 0%')}" :class="{'item': index>0}"></div>
-            <div class="dot">{{item}}</div>
-            <div :style="{flex:(index==arr.length-1 ? 1:'1 1 0%')}" :class="{'item': index<arr.length-1}"></div>
-        </div>
-    </div> -->
+ <div class="content-main common-scroll">
+    <div class="content-body">
+      <Row :gutter="8" style="width:100%;height:100%">
+        <i-col span="5" style="height:100%">
+          <div class="station-tree">
+            <div class="station-tree-body">
+              <tree-filter :defaultData="stationData" :clickAllNode="true" secondCalssName="icon-shebei1" thirdCalssName="icon-shebei" v-if="stationData && stationData.length>0" @treeChange="treeChange"></tree-filter>
+            </div>
+          </div>
+        </i-col>
+        <i-col span="19" style="height:100%">
+          <div class="right-main">
+            <Tabs :value="currentTabs" @on-click="tabsClick" class="common-tabs">
+              <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
+            </Tabs>
+            <instru-manage-index v-if="currentTabs=='仪表管理'" ref="device"></instru-manage-index>
+            <instru-type-manage  v-if="currentTabs=='仪表类型管理'" ref="deviceType" @changeTree="changeTree"></instru-type-manage>
+          </div>
+        </i-col>
+      </Row>
     </div>
+  </div>
 </template>
 <script>
+import _ from 'lodash'
+import InstruManageIndex from './InstruManageIndex.vue'
+import InstruTypeManage from './InstruTypeManage.vue'
 export default {
   name: "InstruManage",
   components:{
+    InstruManageIndex,InstruTypeManage
   },
   data() {
     return {
-      arr:[1,2,3,4]
+		  stationData: [],
+      tabsData: [{label:'仪表管理'},{label:'仪表类型管理'}],
+      currentTabs: '仪表管理',
+      currentAppId: '',
+      currentEquTypeId: '',
+      level: '',
     };
   },
   mounted() {
+    this.getMetroLevel()
+    this.currentTabs = sessionStorage.getItem('currentTabs') || '仪表管理'
+    if(this.currentTabs == '仪表管理'){
+       this.$nextTick(()=> {
+        // this.$refs.device.getType()
+        // this.$refs.device.getTableData()
+      })
+    } else if (this.currentTabs == '仪表类型管理') {
+      this.$nextTick(()=> {
+        this.$refs.deviceType.getTableData()
+      })
+    }
+  },
+  // 离开当前路由之前的钩子函数 
+  beforeRouteLeave(to, form, next) {
+    sessionStorage.removeItem('currentTabs')
+    next()
   },
   methods: {
-   
+    // 获取树形数据
+    getMetroLevel () {
+      this.$get('metroapi/instrument/instrumentTree').then(res => {
+				if (res.httpCode == 1) {
+          this.stationData = res.data
+				}
+		  })
+    },
+    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
+    getTree(arr) {
+      return arr.map((v,index) => {
+        v.selected = false
+        v.disabled = false
+        if (index==0) {
+          v.expand = true
+        } else {
+          v.expand = false
+        }
+        if (v.children) v.children = this.getTree(v.children);
+        return v;
+      });
+    },
+    treeChange(arr,level) {
+      this.level = level
+      if (this.currentTabs == '仪表管理') {
+        this.$refs.device.tableParams.pageNum = 1
+        if (level == 2) {
+          this.$refs.device.tableParams.applicationId = arr[arr.length-1]
+          this.$refs.device.tableParams.equipmentType = ''
+        } else if (level == 3) {
+          this.$refs.device.tableParams.applicationId = arr[arr.length-2]
+          this.$refs.device.tableParams.equipmentType = arr[arr.length-1]
+        } else {
+          this.$refs.device.tableParams.applicationId = ''
+          this.$refs.device.tableParams.equipmentType = ''
+        }
+        // if (level == 2) {
+        //   this.currentAppId = arr[arr.length-1]
+        // } else if (level == 3) {
+        //   this.currentAppId = arr[arr.length-2]
+        //   this.currentEquTypeId = arr[arr.length-1]
+        // } else {
+        //   this.currentAppId = ''
+        //   this.currentEquTypeId = ''
+        // }
+        this.$refs.device.getTableData(arr,level)
+      } else if(this.currentTabs == '仪表类型管理'){
+        this.$nextTick(()=> {
+          this.getParams ('deviceType',arr,level)
+          this.$refs.deviceType.tableParams.pageNum = 1
+          this.$refs.deviceType.getTableData()
+        })
+      }
+		},
+    getParams (name,arr,level) {
+     if (level == 2) {
+        this.$refs[name].tableParams.applicationId = arr[arr.length-1]
+        this.$refs[name].tableParams.equipmentTypeId = ''
+      } else if (level == 3) {
+        this.$refs[name].tableParams.applicationId = arr[arr.length-2]
+        this.$refs[name].tableParams.equipmentTypeId = arr[arr.length-1]
+      } else {
+        this.$refs[name].tableParams.applicationId = ''
+        this.$refs[name].tableParams.equipmentTypeId = ''
+      }
+    },
+    tabsClick (name) {
+      document.querySelector(".station-tree-left").scrollTo(0, 0) 
+      sessionStorage.setItem("currentTabs",name)
+      this.currentTabs = name
+      this.stationData = this.getTree(this.stationData) // 切换tab页时，清除tree选中情况
+      if (this.currentTabs == '仪表管理') {
+         this.$nextTick(()=> {
+          //  this.getMetroLevel()
+           this.$refs.device.getType()
+           this.$refs.device.getTableData()
+        })
+      } else if(this.currentTabs == '仪表类型管理'){
+        this.$nextTick(()=> {
+          this.$refs.deviceType.getTableData()
+        })
+      }
+    },
+    changeTree () {
+     this.getMetroLevel()
+    },
   }
 };
 </script>
 <style scoped lang="stylus">
-.container{
-    width: 100%;
-    height: 200px;
-    // border:1px solid red;
-}
-.dot{
-    border:2px solid #007Aff;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    background: white;
-    margin: auto;
-    margin-bottom: -4px;
-}
-.item{
-    flex:1;
-    background: yellow;
-    height: 1px;
-    // border-bottom:1px solid #D84C29;
-}
-
+.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;
+}
+.right-main {
+  height: 100%;
+  padding: 10px 0;
+}
 </style>

src/views/homecomponents/BasicInfomation/InstruManageIndex.vue

@@ -0,0 +1,856 @@
+<template>
+  <div class="content-main-manage">
+    <div class="search-list">
+      <div class="search-left">
+        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
+          <!-- <FormItem label="" prop="lineId">
+            <Select v-model="tableParams.lineId" placeholder="能耗类型" @on-select="changeLine" label-in-value>
+              <Option v-for="item in instrumentTypeData" :value="item.id" :key="item.id">{{ item.lineName }}</Option>
+            </Select>
+          </FormItem> -->
+          <FormItem label="" prop="type">
+            <Select v-model="tableParams.type" placeholder="仪表类型">
+              <Option v-for="item in instrumentTypeData" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentStatus">
+            <Select v-model="tableParams.equipmentStatus" placeholder="关联用途类项">
+                <Option v-for="item in associatedUseData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentStatus">
+            <Select v-model="tableParams.equipmentStatus" placeholder="关联能耗分户">
+                <Option v-for="item in associatedEnergyData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentStatus">
+            <Select v-model="tableParams.equipmentStatus" placeholder="关联设备">
+                <Option v-for="item in associatedEquipData" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="" prop="equipmentName">
+            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.equipmentName" />
+          </FormItem>
+          <FormItem label="" >
+            <Button type="primary" class="common-btn-search" @click="searchClick">
+              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
+            </Button> 
+            <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
+              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
+            </Button>   
+          </FormItem>
+        </Form>
+      </div>
+    </div>
+     <div class="btn-container">
+      <Button icon="ios-add" class="common-add-btn" @click="addClick">新增仪表</Button>
+    </div>
+    <div class="manage-main-center">
+      <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
+        <template slot="loading">
+            <Loading-animation></Loading-animation>
+        </template>
+         <template slot-scope="{ row }" slot="action">
+           <Tooltip content="详情" placement="top">
+              <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
+           </Tooltip>
+           <Tooltip content="编辑" placement="top">
+              <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
+           </Tooltip>
+           <Tooltip content="删除" placement="top">
+              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
+           </Tooltip>
+        </template>
+      </Table>
+    </div>
+    <div class="common-page">
+      <div class="common-page-total">
+        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
+      </div>
+      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
+    </div>
+    <Modal
+      v-model="showModal"
+      :title="title"
+      width="36"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      @on-visible-change="modalChange"
+      :mask-closable="false"
+      class-name="common-modal">
+      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120" inline>
+				<FormItem label="仪表号：" prop="code" style="width:100%">
+          <Input v-show="title=='新增仪表'" v-model.trim="formOption.code" />  
+          <span v-show="title=='编辑仪表'">{{formOption.code}}</span>
+				</FormItem>
+				<FormItem label="仪表名称：" prop="name" style="width:100%">
+           <Input v-model.trim="formOption.name" type="textarea" :rows="3" maxlength="100" show-word-limit />
+        </FormItem>
+        <FormItem label="归属应用：" prop="applicationId" style="width:100%">
+           <Select v-model="formOption.applicationId" placeholder="归属应用" @on-change="selectModalApp">
+             <Option v-for="item in equipAppModalData" :value="item.id" :key="item.id">{{ item.appName }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="仪表类型：" prop="type" style="width:48%">
+          <Select v-model="formOption.type" placeholder="仪表类型" @on-change="selectInstruType">
+             <Option v-for="item in instrumentTypeModalData" :value="item.id" :key="item.id">{{ item.name }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="能耗类型：" prop="energyConsumptionName" style="width:48%">
+          <span>{{formOption.energyConsumptionName}}</span>
+				</FormItem>
+        <FormItem label="品牌名称：" prop="brandName" style="width:100%">
+          <Input v-model.trim="formOption.brandName" maxlength="20" show-word-limit />  
+        </FormItem>
+         <FormItem label="属性：" prop="attribute" style="width:100%">
+          <Input v-model="formOption.attribute" maxlength="20" show-word-limit />  
+        </FormItem>
+         <FormItem label="说明：" prop="remark" style="width:100%">
+          <Input v-model="formOption.remark" type="textarea" :rows="6" maxlength="200" show-word-limit /> 
+        </FormItem>
+			</Form>
+      <div slot="footer">
+          <Button @click="modalCancel">取消</Button>
+          <Button type="primary" @click="modalOk('formOption')">确定</Button>
+        </div>
+    </Modal>
+    <Modal
+      v-model="modalStatus"
+      :title="commonTitle"
+      width="30"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      class-name="common-modal">
+      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon"></Icon>
+      <span class="modal-text">{{modalTitle}}</span>
+      <div slot="footer">
+          <Button @click="commonCancel">取消</Button>
+          <Button type="primary" @click="commonOk">确定</Button>
+        </div>
+    </Modal>
+     <Modal
+      v-model="detailStatus"
+      title="仪表详情"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      :mask-closable="false"
+      class-name="common-modal">
+      <div v-for="(item,index) in detailLabel" :key="index">
+        <div class="common-modal-top">
+        <span class="common-modal-top-text">{{item.name}}</span>
+        </div>
+        <div class="common-modal-content">
+          <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '说明'||  val.name == '最后通讯时间' && item.value.length%2!=0,'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}">
+            <div class="modal-content-item-name">
+            {{val.name}}
+            </div>
+            <div class="modal-content-item-value"> 
+              <Tooltip placement="top-start" transfer max-width="350" v-if="val.name == '归属线路' || val.name == '归属站点' || val.value || val.value===0">
+                <span v-if="val.name == '归属线路' || val.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+                <span v-else>{{val.value}}</span>
+                <div slot="content">
+                  <span v-if="val.name == '归属线路' || val.name == '归属站点'">{{!val.value ? '/' : val.value}}</span>
+                  <span v-else>{{val.value}}</span>
+                </div>
+              </Tooltip>
+              <span v-else>{{val.value}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+const defaultFrom = {code: '',name: '',applicationId:'',type: '',energyConsumptionId:'',energyConsumptionName:'',brandName: '',attribute: '',remark: ''}
+export default {
+  name: "InstruManageIndex",
+  components:{
+  },
+  // props: {
+  //   currentAppId: [String,Number],
+  //   currentEquTypeId: [String,Number],
+  //   level: [String,Number],
+  // },
+  data() {
+    return {
+      applicationParams: {
+        level: '',
+        lineId: '',
+        stationId: '',
+        equipmentCheck: '',
+        instrumentCheck: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      appParams: {
+        applicationId: '',
+        equipmentTypeId: '',
+        keywords: '',
+        pageNum: 1,
+        pageSize: 9999
+      },
+      loading: true,
+      // dateRange: [],
+      tableParams: {
+        // lineId: '',
+        // stationId: '',
+        // equipmentStatus: '',
+        // keywords: '',
+        // applicationId:'', 
+        // equipmentType: '',
+        // useDateBegin: '',
+        // useDateEnd: '',
+        // equipmentName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      tableData: [],
+      tableTotal: 0,
+      tablePage: 0,
+      rowObj: {},
+      instrumentTypeData: [],
+      instrumentTypeModalData: [],
+      stationTypeData: [],
+      associatedUseData: [
+        {
+          value: '-1',
+          label: '关联用途类项'
+        },
+        {
+          label: '已关联',
+          value: '1'
+        },
+        {
+          label: '未关联',
+          value: '0'
+        }
+      ],
+      associatedEnergyData: [
+        {
+          value: '-1',
+          label: '关联能耗分户'
+        },
+        {
+          label: '已关联',
+          value: '1'
+        },
+        {
+          label: '未关联',
+          value: '0'
+        }
+      ],
+      associatedEquipData:[
+        {
+          value: '-1',
+          label: '关联设备'
+        },
+        {
+          label: '已关联',
+          value: '1'
+        },
+        {
+          label: '未关联',
+          value: '0'
+        }
+      ],
+      equipStateModalData: [],
+      equipTypeData: [],
+      equipTypeModalData: [],
+      equipAppModalData: [],
+      columns: [
+        //  {
+        //     type: 'selection',
+        //     width: 60,
+        //     align: 'center'
+        //   },
+          {
+            title: '仪表号',
+            key: 'code',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '仪表名称',
+            key: 'name',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '能耗类型',
+            key: 'energyConsumptionName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '仪表类型',
+            key: 'appName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '归属应用',
+            key: 'lineName',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '关联用途类项',
+            align: 'center',
+            key: 'stationName',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '关联能耗分户',
+            key: 'equipmentStatusValue',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '关联设备名称',
+            key: 'useDate',
+            align: 'center',
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+          title: '操作',
+          align: 'center',
+          slot: 'action',
+          width: 120,
+        }
+      ],
+      showModal: false,
+      detailStatus: false, 
+      modalStatus: false,
+      title: '新增仪表',
+      commonTitle: "确认删除",
+      activeColor: '#E92E2E',
+      activeClass: '',
+      modalTitle: '',
+      formOption: {code: '',name: '',applicationId:'',type: '',energyConsumptionId:'',energyConsumptionName:'',brandName: '',attribute: '',remark: ''},
+      ruleValidate: {
+        code: [{
+          required: true,
+          message: '请输入仪表号',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入仪表名称',
+          trigger: 'change'
+        }],
+        applicationId: [{
+          required: true,
+          type: 'number',
+          message: '请选择归属应用',
+          trigger: 'change'
+        }],
+        type: [{
+          required: true,
+          type: 'number',
+          message: '请选择仪表类型',
+          trigger: 'change'
+        }],
+      }, 
+      detailLabel: [],
+    };
+  },
+  // watch: {
+  //   currentAppId: {
+  //   　handler(newValue) {
+  //     console.log(newValue)
+  //       this.tableParams.applicationId = newValue
+  //       this.getTableData()
+  //     }
+  //  },
+  //  currentEquTypeId: {
+  //   　handler(newValue) {
+  //       this.tableParams.equipmentType = newValue
+  //       this.getTableData()
+  //     }
+  //  },
+  // },
+  mounted() {
+    this.getType()
+    this.getAppApplicate()
+    this.getTableData()
+  },
+  methods: {
+    go (){
+      // this.$router.push({path:'//ApplicationManage'})
+      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
+      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
+    },
+    // changePicker (date) {
+    //   this.tableParams.useDateBegin = date[0]
+    //   this.tableParams.useDateEnd = date[1]
+    // },
+    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/instrumentType/queryInstrumentType').then(res=>{
+        if (res.httpCode == 1 ){
+          this.instrumentTypeModalData = JSON.parse(JSON.stringify(res.data))
+          this.instrumentTypeData = res.data
+          this.instrumentTypeData.unshift({ id: '-1', name: '仪表类型' })
+          // this.getStationData ('-1')
+        } else {
+          this.instrumentTypeData = []
+        }
+      })
+      // 获取仪表状态
+      // this.$get('metroapi/dic/queryDictionary', {name:'仪表状态'}).then(res=>{
+      //   if (res.httpCode == 1 ){
+      //     this.equipStateModalData = JSON.parse(JSON.stringify(res.data))
+      //     this.associatedUseData = res.data
+      //     this.associatedUseData.unshift({ id: '-1', value: '仪表状态' })
+      //   } else {
+      //     this.associatedUseData = []
+      //     this.equipStateModalData = []
+      //   }
+      // })
+      // 获取归属应用
+      // this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+      //   if (res.httpCode == 1 ){
+      //     this.equipAppModalData = res.data.data
+      //   } else {
+      //     this.equipAppModalData = []
+      //   }
+      // })
+    },
+    // 获取归属应用
+    getAppApplicate () {
+     this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipAppModalData = res.data.data
+        } else {
+          this.equipAppModalData = []
+        }
+      })
+    },
+    selectInstruType (val) {
+     if (val) {
+        let results  = this.instrumentTypeModalData.find(item => item.id == val) //find 方法搜索的是使函数返回 true 的第一个（单个）元素
+        this.formOption.energyConsumptionName = results.energyConsumptionName
+        this.formOption.energyConsumptionId = results.energyConsumptionId
+     }
+    },
+    // changeLine (val) {
+    //   // 获取站点类型
+    //   this.tableParams.stationId = ''
+    //   this.tableParams.lineId = val.value
+    //   if (this.tableParams.lineId) {
+    //     this.getStationData(val.value)
+    //   }
+    // },
+    // // 获取所属站点
+    // getStationData (lineId) {
+    //   if(lineId == '-1') {
+    //     this.stationTypeData = [{ id: '-1', stationName: '站点' }]
+    //   } else {
+    //     this.$get('metroapi/lineStation/queryStationByLineId', {lineId:lineId}).then(res=>{
+    //       if (res.httpCode == 1 ){
+    //         this.stationTypeData = res.data
+    //         this.stationTypeData.unshift({ id: '-1', stationName: '站点' })
+    //       }
+    //     })
+    //   }
+    // },
+    // 获取表格数据
+    getTableData () {
+      let params = JSON.parse(JSON.stringify(this.tableParams))
+      // params.lineId = params.lineId == '-1' ? '':params.lineId
+      // params.stationId = params.stationId == '-1'?'':params.stationId
+      // params.equipmentStatus = params.equipmentStatus == '-1' ?'':params.equipmentStatus
+      this.loading = true
+      this.$get('metroapi/queryInstrumentPage', params).then(res=>{
+        this.loading = false
+          if (res.httpCode == 1 ){
+            this.tableData = res.data.data
+            this.tableTotal = res.data.count
+            if (res.data.data.length==0) {
+              this.tablePage = 0
+            } else {
+              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
+            }
+            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
+              this.tableParams.pageNum--
+              return this.getTableData()
+            }
+          } else {
+            this.tableData = []
+            this.tableTotal = 0
+          }
+        })
+    },
+    selectModalLine (val) {
+      this.formOption.stationId = ''
+      if (val) {
+        this.getStationData(val.value)
+      }
+    },
+    selectModalStation (val) {
+      if (val) {
+       this.formOption.stationId =val.value
+      }
+    },
+    selectModalApp (val) {
+      this.appParams.applicationId = val
+      this.formOption.equipmentType = ''
+      if (val) {
+        this.getAddEquipType(this.appParams)
+      }
+    },
+    // 获取新增仪表类型 
+    getAddEquipType (params) {
+      this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.equipTypeModalData = res.data.data
+        } else {
+          this.equipTypeModalData = []
+        }
+      })
+    },
+    searchClick () {
+      this.tableParams.pageNum = 1
+      this.getTableData()
+      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
+    },
+    resetClick (name) {
+    //  this.dateRange = []
+    //  this.tableParams.useDateBegin = ''
+    //  this.tableParams.useDateEnd = ''
+     this.stationTypeData = [{ id: '-1', stationName: '站点' }]
+     this.$refs[name].resetFields()
+     this.tableParams.pageNum = 1
+     this.getTableData()
+    },   
+    changeMoldaPicker (val) {
+     this.formOption.useDate = val
+    },
+    addClick () {
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+      this.title = '新增仪表'
+      this.showModal = true
+    },
+    detailClick (row) {
+      this.rowObj = row
+      this.detailStatus = true
+      this.$get('metroapi/equipment/equipmentDetail', {equipmentId:row.id}).then(res=>{
+        if (res.httpCode == 1 ){
+          this.detailLabel = res.data
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    editClick (row) {
+      this.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row));
+      this.formOption.lineId = this.formOption.lineId ? String(this.formOption.lineId) : '-1'
+      this.formOption.stationId = this.formOption.stationId ? String(this.formOption.stationId) : '-1'
+      this.getStationData(this.formOption.lineId)
+      this.appParams.applicationId = this.formOption.appId
+      this.getAddEquipType(this.appParams)
+      this.title = '编辑仪表'
+      this.showModal = true
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认删除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '删除不影响已产生的操作和记录。'
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+      this.stationTypeData = [{ id: '-1', stationName: '站点' }]
+      this.equipTypeModalData = []
+     }
+    },
+    modalOk (formName) {
+      let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
+      if (this.title == '新增仪表') {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/instrument/addInstrument', params).then(res=>{
+              if ( res.httpCode == 1 ){
+                this.showModal = false
+                this.$Message.info(res.msg)
+                this.getTableData()
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      } else {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/equipment/editEquipment', params).then(res=>{
+              if (res.httpCode == 1 ){
+                this.showModal = false
+                this.$Message.info(res.msg)
+                this.getTableData()
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      }
+    },
+    modalCancel () {
+      this.showModal = false
+    },
+    commonOk () {
+      let params = {
+        instrumentId: this.rowObj.id
+      }
+      this.delData(params)
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+    // 删除接口
+    delData (params) {
+      this.$get('metroapi/instrument/delInstrument',params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.modalStatus = false
+          this.$Message.info(res.msg)
+          this.getTableData()
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    }
+  }
+};
+</script>
+<style scoped lang="stylus">
+.content-main-manage {
+  position: relative;
+  height: calc(100% - 50px);
+}
+.search-list {
+  display: flex;
+  padding: 10px 0 0;
+}
+.search-left {
+  display: flex;
+  align-items: center;
+   .ivu-select {
+     width: 150px;
+     height: 32px;
+   }
+   .ivu-select-single .ivu-select-selection {
+     height: 100%;
+   }
+   >>> .ivu-input {
+     width: 165px;
+     height: 32px;
+   }
+   >>> .ivu-date-picker-editor .ivu-input {
+     width: 210px;
+   }
+   >>> .ivu-input-prefix, >>> .ivu-input-suffix {
+     height: 32px;
+     line-height: 32px;
+   }
+   >>> .ivu-input-icon {
+     height: 32px;
+     line-height: 32px;
+   }
+   >>> .date-picker-main .ivu-date-picker-header {
+    border-bottom: 0.0052083333rem solid #204384;
+ }
+}
+.btn-container {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 10px;
+}
+.common-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+>>> .common-form-list .ivu-form-item {
+  margin-bottom: 10px;
+}
+.manage-main-center {
+  width: 100%;
+  height: calc(100% - 150px);
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 51px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 51px;
+ }
+  >>> .common-table .ivu-spin-fix {
+   top: 51px;
+ }
+  >>> .app-table .ivu-spin-fix {
+   height: calc(100vh - 375px);
+ }
+ >>> .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+}
+>>> .app-table .ivu-table-tip {
+  height: calc(100vh - 375px);
+ }
+ >>> .common-table .ivu-table-tip table {
+ display: none;
+}
+ >>> .modal-table {
+   overflow: auto !important;
+ }
+ >>> .modal-table .ivu-spin-fix {
+   height: 200px;
+ }
+  >>> .modal-table .ivu-table-tip {
+   height: 200px;
+ }
+.common-page {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.common-page-total {
+  color: #fff;
+  padding-right: 10px;
+  font-size: 14px;
+  span {
+    color #409EFF;
+  }
+}
+>>> .modal-tabs-item {
+  margin-top: 10px;
+}
+>>> .common-modal-top-text {
+  font-size: 14px;
+  font-weight: bold;
+  color: #29A0FF;
+  line-height: 42px;
+  border-left: 3px solid #1590F1;
+  padding-left: 12px;
+}
+>>> .common-modal-content {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 15px;
+  border-right: 1px solid #21437B;
+}
+>>> .modal-content-item {
+  width: 50%;
+  display: flex;
+}
+>>> .item-especial {
+  width: 100%;
+}
+>>> .modal-content-item-name {
+  width: 50%;
+  height: 45px;
+  line-height: 45px;
+  background: #13305F;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
+  font-size: 14px;
+  color: #F5F5F5;
+  padding-left: 20px;
+}
+>>> .modal-content-item-value {
+  width: 50%;
+  height: 45px;
+  line-height: 45px;
+  background: #06214D;
+  border-top: 1px solid #21437B;
+  border-left: 1px solid #21437B;
+  font-size: 14px;
+  color: #F5F5F5;
+  padding-left: 20px;
+}
+>>> .item-especial .modal-content-item-name{
+  width: 25%;
+  height: 45px;
+  line-height: 45px;
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial .modal-content-item-value{
+  width: 75%;
+  height: 45px;
+  line-height: 45px;
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-bot .modal-content-item-name {
+  border-bottom: 1px solid #21437B;
+}
+>>> .item-especial-bot .modal-content-item-value {
+  border-bottom: 1px solid #21437B;
+}
+/deep/ .ivu-input::-webkit-input-placeholder{
+  color: #718EBD;
+}
+/deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
+  color: #718EBD;
+}
+/deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+  color: #718EBD;
+}
+/deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
+  color: #718EBD;
+}
+>>> .modal-content-item-value .ivu-tooltip {
+  width: 100%;
+}
+>>> .modal-content-item-value .ivu-tooltip-rel {
+  overflow: hidden;
+  text-overflow:ellipsis; 
+  white-space: nowrap;
+}
+</style>

src/views/homecomponents/BasicInfomation/InstruTypeManage.vue

@@ -0,0 +1,636 @@
+<template>
+  <div class="content-main common-scroll">
+    <div class="content-body">
+      <Row :gutter="8" style="width:100%;height:100%">
+        <i-col span="24" style="height:100%">
+          <div class="right-main">
+            <div class="manage-main-top">
+              <Button icon="ios-add" class="common-add-btn" @click="addClick">新增设备类型</Button>
+            </div>
+            <div class="manage-main-center">
+              <Table :columns="columns" :data="tableData" class="common-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
+                <template slot="loading">
+                    <Loading-animation></Loading-animation>
+                </template>
+                <template slot-scope="{ row }" slot="action">
+                  <Tooltip content="详情" placement="top">
+                      <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
+                  </Tooltip>
+                  <Tooltip content="编辑" placement="top">
+                      <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
+                  </Tooltip>
+                  <Tooltip content="删除" placement="top">
+                      <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
+                  </Tooltip>
+                </template>
+              </Table>
+            </div>
+            <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">
+      <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="modalStatus"
+      :title="commonTitle"
+      width="30"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      :mask-closable="false"
+      class-name="common-modal">
+      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon"></Icon>
+      <span class="modal-text">{{modalTitle}}</span>
+      <div slot="footer">
+          <Button @click="commonCancel">取消</Button>
+          <Button type="primary" @click="commonOk">确定</Button>
+        </div>
+    </Modal>
+    <Modal
+      v-model="detailStatus"
+      title="设备类型信息"
+      width="45"
+      ref="modalGrag"
+      draggable
+      reset-drag-position
+      footer-hide
+      :mask-closable="false"
+      @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>
+      </Tabs>
+       <div v-for="(item,index) in detailLabel" :key="index" v-show="currentModalTabs =='设备类型信息'">
+          <div class="common-modal-top" :class="{'common-modal-top-especial': index==1}">
+          <span class="common-modal-top-text">{{item.name}}</span>
+          </div>
+          <div class="common-modal-content" v-if="index==0">
+            <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '说明' }">
+                <div class="modal-content-item-name">{{val.name}}</div>
+                <div class="modal-content-item-value">
+                  <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || (typeof(val.value)=='number' && val.value==0)">
+                  <span>{{val.value}}</span>
+                  <div slot="content">
+                    <span>{{val.value}}</span>
+                  </div>
+                </Tooltip>
+                </div>
+            </div>
+          </div>
+      </div>
+      <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
+    </Modal>
+</div>
+</template>
+<script>
+const defaultFrom = {name: '',remark: ''}
+import _ from 'lodash'
+export default {
+  name: "InstruTypeManage",
+  components:{
+  },
+  data() {
+    return {
+      tableTotal: 0,
+      tablePage: 0,
+      tableParams: {
+        equipmentTypeId: '',
+        applicationId: '',
+        name: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      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: '操作',
+            align: 'center',
+            slot: 'action',
+            width: 120
+          }
+      ],
+      rowObj: {},
+      formOption: {name: '',remark:''},
+      ruleValidate: {
+        name: [{
+          required: true,
+          message: '请输入应用名称',
+          trigger: 'change'
+        }],
+      }, 
+    equipTypeData: [],
+    showModal: false,
+    detailStatus: false, 
+    modalStatus: false,
+    title: '新增设备',
+    commonTitle: "确认删除",
+    activeColor: '#E92E2E',
+    activeClass: '',
+    modalTitle: '',
+    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'
+        }
+      ],
+      columnsRelatedEquip: [
+          {
+            title: '序号',
+            type: 'index',
+            align: 'center'
+          },
+          {
+            title: '设备ID',
+            key: 'equipmentId',
+            align: 'center'
+         },
+         {
+            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 () {
+      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 = []
+          }
+        })
+    },
+    addClick () {
+      this.title = '新增设备类型'
+      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
+      this.showModal = true
+    },
+    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.rowObj = row
+      this.formOption = JSON.parse(JSON.stringify(row))
+      this.title = '编辑设备类型'
+      this.showModal = true
+    },
+    delClick (row) {
+      this.rowObj = row
+      this.commonTitle = '确认删除'
+      this.activeColor = '#E92E2E'
+      this.activeClass = ''
+      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复，请慎重操作。'
+      this.modalStatus = true
+    },
+    modalChange (modalStatus) {
+     if (!modalStatus) {
+      this.$refs.formOption.resetFields();
+     }
+    },
+    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) => {
+          if (valid) {
+            this.$post('metroapi/equipment/addEquipmentType', this.formOption).then(res=>{
+              if ( res.httpCode == 1 ){
+                this.showModal = false
+                this.$emit('changeTree')
+                this.$Message.info(res.msg)
+                this.getTableData()
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      } else {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$post('metroapi/equipment/editEquipmentType', this.formOption).then(res=>{
+              if (res.httpCode == 1 ){
+                this.showModal = false
+                this.$emit('changeTree')
+                this.$Message.info(res.msg)
+                this.getTableData()
+              } else {
+                this.$Message.info(res.msg)
+              }
+            })
+          } else {
+            this.showModal = true
+          }
+       })
+      }
+    },
+    modalCancel () {
+      this.showModal = false
+    },
+    commonOk () {
+      let params = {
+        id: this.rowObj.id
+      }
+      this.delData(params)
+    },
+    commonCancel () {
+      this.modalStatus = false
+    },
+    // 删除接口
+    delData (params) {
+      this.$get('metroapi/equipment/delEquipmentType',params).then(res=>{
+        if (res.httpCode == 1 ){
+          this.modalStatus = false
+          this.$Message.info(res.msg)
+          this.getTableData()
+        } else {
+          this.$Message.info(res.msg)
+        }
+      })
+    },
+    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
+      }
+      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);
+}
+.common-table {
+  max-height: 100%;
+}
+>>> .common-table .ivu-table th {
+  height: 54px;
+ }
+ >>> .common-table .ivu-table td {
+  height: 54px;
+ }
+>>> .common-table .ivu-spin-fix {
+  top: 54px;
+  height: calc(100vh - 350px);
+}
+>>> .common-table .ivu-table-tip {
+  background: url('../../../assets/images/noData.png') no-repeat center;
+  height: calc(100vh - 350px);
+}
+>>> .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;
+  }
+}
+>>> .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;
+}
+</style>

src/views/homecomponents/BasicInfomation/OperaTimeManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    侧边栏
+    运营时间管理
   </div>
 </template>
 <script>

src/views/homecomponents/DataManagement/DataMonitor.vue

@@ -107,7 +107,7 @@
                   <div v-show="!showImg5" class="line-loading">
                     <div class="manage-title">
                       <span>及时性-数据入库</span>
-                      <span class="title-right" @click="showDetail('及时性-数据入库','及时性（数据）')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
+                      <span class="title-right" @click="showDetail('及时性-数据入库','及时性（数据入库）')">详情<Icon type="ios-arrow-forward" style="margin-left:6px"/></span>
                     </div>
                     <div id="line5" class="line-loading-echarts"></div>
                   </div>

src/views/homecomponents/SystemSettings/ResourceManagementIndex.vue

@@ -137,11 +137,11 @@
            </Select>
         </FormItem>
          <FormItem label="图标：" prop="imageUrl">
-          <Input v-model="formOption.imageUrl" maxlength="25" show-word-limit placeholder="请输入图标class名称"/>
+          <Input v-model="formOption.imageUrl" maxlength="30" show-word-limit placeholder="请输入图标class名称"/>
           <!-- <div class="common-form-item-text">新增系统中不存在的资源，图标默认名称为icon-caidan</div>  -->
         </FormItem>
         <FormItem label="URL：" prop="linkUrl">
-          <Input v-model="formOption.linkUrl" maxlength="25" show-word-limit placeholder="输入资源地址"/>
+          <Input v-model="formOption.linkUrl" maxlength="30" show-word-limit placeholder="输入资源地址"/>
         </FormItem>
          <FormItem label="启用状态：" prop="isEnable" v-if="title == '新增资源'">
           <i-switch true-color="#57C44F" v-model="formOption.isEnable" disabled></i-switch>

src/views/homecomponents/SystemSettings/RolePermissions.vue

@@ -252,10 +252,6 @@ export default {
     this.getTableData()
   },
   methods: {
-    changePicker (date) {
-      this.tableParams.beginDate = date[0]
-      this.tableParams.endDate = date[1]
-    },
     rowClassName(row, index) {
       if (index % 2 == 0) {
         return "ivu-table-stripe-even";