likang

src/config/componentsMap.js

@@ -53,7 +53,9 @@ export default {
     WorkBoxMap: () => import ('@/views/work_box_map/routeMap.vue'),    
     //设备管理
     hyd_equipment: () => import ('@/views/device/hyd_equipment'),
-    storage_equipment:()=>import ('@/views/device/storage_equipment'),
+    storage_equipment: () => import('@/views/device/storage_equipment'),
+    //特种吊具
+    hanger_equipment:() => import('@/views/device/hanger_equipment'),
     hydraulic: () => import ('@/views/device/hydraulic'),
     wrench: () => import ('@/views/device/wrench'),
     flange: () => import ('@/views/device/flange'),

src/views/device/hanger_equipment/alarm.scss

@@ -0,0 +1,150 @@
+.selected-operate {
+    // display: flex;
+    justify-content: space-between;
+}
+
+.pagination-container {
+    text-align: right;
+    margin-top: 0px !important;
+    margin-left: -10px;
+    margin-right: -10px;
+    float: right;
+}
+
+.dashboard-editor-container {
+    padding: 20px;
+    // background-color: rgb(240, 242, 245);
+    position: relative;
+    min-width: 1260px;
+    .chart-wrapper {
+        background: #fff;
+        padding: 16px 16px 0;
+        margin-bottom: 32px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .chart-wrapper {
+        padding: 8px;
+    }
+}
+
+.layout-1 {
+    margin-top: 20px;
+    margin-bottom: 5px;
+    .item {
+        color: #fff;
+        margin-left: 2.5%;
+        .gutter-box {
+            height: 140px;
+            overflow: hidden;
+            border-radius: 5px;
+            box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            .today-add {
+                .number {
+                    padding-left: 10px;
+                    font-size: 14px;
+                    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+                }
+                display: flex;
+                margin-left: 20px;
+                height: 36px;
+                line-height: 46px;
+            }
+        }
+        .level-text {
+            width: 100%;
+            margin-bottom: 0px;
+            height: 28px;
+            font-size: 14px;
+            line-height: 24px;
+            padding: 0 10px;
+            background-color: rgba(94, 94, 94, .18)!important;
+            span {
+                font-size: 12px;
+            }
+            .level-text-left {
+                margin-left: 5px;
+            }
+            .level-text-right {
+                float: right;
+                margin-right: 5px;
+            }
+        }
+    }
+    .item1 .gutter-box {
+        background: url("../../../assets/alarm/alarm_all.png") 20px 48px no-repeat;
+    }
+    .item2 .gutter-box {
+        background: url("../../../assets/alarm/alarm_1.png") 20px 48px no-repeat;
+    }
+    .item3 .gutter-box {
+        background: url("../../../assets/alarm/alarm_2.png") 20px 48px no-repeat;
+    }
+    .item4 .gutter-box {
+        background: url("../../../assets/alarm/alarm_3.png") 20px 48px no-repeat;
+    }
+    .item5 .gutter-box {
+        background: url("../../../assets/alarm/alarm_4.png") 20px 48px no-repeat;
+    }
+    .count {
+        position: relative;
+        right: 30px;
+        span {
+            display: block;
+            text-align: right;
+        }
+        .text {
+            display: block;
+            font-size: 14px;
+            height: 28px;
+            line-height: 28px;
+        }
+        .number {
+            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+            font-size: 28px;
+            height: 52px;
+            line-height: 52px;
+        }
+    }
+}
+
+.layout-2 {
+    margin-bottom: 25px;
+    .item {
+        margin-bottom: 25px;
+    }
+    .charts-icon {
+        float: right;
+        color: #000;
+    }
+    .charts-icon:hover {
+        cursor: pointer;
+    }
+}
+
+.layout-3 {
+    margin-top: 10px;
+}
+
+.selected-operate {
+    padding-top: 10px;
+}
+
+.layout-3 {
+    font-size: 14px;
+    color: #67c23a;
+    background-color: #f0f9eb;
+    border-radius: 5px;
+}
+
+.el-icon-question {
+    position: relative;
+    left: 5px;
+    top: 15px;
+}
+
+.el-tag {
+    border: 0px;
+}

src/views/device/hanger_equipment/alarm.vue

@@ -0,0 +1,131 @@
+<template>
+
+  <!-- 设备数量 -->
+  <div class="layout-1">
+    <el-row :gutter="8">
+      <el-col class="gutter-row item item1" :span="4" v-if="is_show">
+        <a href="javascript:void(0);" @click="search()">
+          <div class="gutter-box" :style="item1Style">
+            <div class="today-add">
+              <span>总设备数量</span>
+            </div>
+            <div class="count">
+              <div>
+                <span class="number">
+                  <i class="el-icon-loading" v-if="showLoading"></i>
+                  <countTo v-else :startVal="startVal" :endVal="total" :duration="duration"></countTo>
+                </span>
+              </div>
+              <span class="text">设备总数</span>
+            </div>
+          </div>
+        </a>
+      </el-col>
+      <el-col class="gutter-row item item1" :span="4" v-for="(item,index) in list" :key="index">
+        <a href="javascript:void(0);" @click="search(item.id)">
+          <div class="gutter-box" :style="item.style">
+            <div class="today-add">
+              <span>{{item.name}}设备数量</span>
+            </div>
+            <div class="count">
+              <div>
+                <span class="number">
+                  <i class="el-icon-loading" v-if="showLoading"></i>
+                  <countTo v-else :startVal="startVal" :endVal="item.total" :duration="duration"></countTo>
+                </span>
+              </div>
+              <span class="text">{{item.name}}总数</span>
+            </div>
+          </div>
+        </a>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import countTo from "vue-count-to";
+import { parseTime } from '@/utils'
+import viewDialog from "./component/viewDialog"
+import exportAlarm from "./component/exportAlarm"
+import exportDialog from "./component/exportDialog"
+import { action } from '@/directive/permission/index.js'
+export default {
+  name: "alarm_realtimeAlarm",
+  mixins: [exportAlarm],
+  directives: { action },
+  components: {
+    countTo,
+ 
+  },
+    props:[
+        'countList',
+    ],
+  data() {
+    return {
+      duration: 3000,
+      showLoading: true,
+      startVal: 0,
+      list:[],
+      is_show:false,
+    
+      item1Style: { "background-color": "#32c5d2" },
+      itemStyleList:[
+         { "background-color": "#4caf50" },
+         { "background-color": "#7ba7bd" },
+         { "background-color": "#e7505a" },
+         { "background-color": "#4cb563" },
+      ]
+      
+    };
+  },
+  computed: {
+
+    total: function() {
+        let list = this.list;
+        let total =0;
+        list.forEach((item) => {
+            
+            total = total+item.total;
+            
+        });
+      return total;
+    },
+    online: function() {
+      return this.statusCount.alarm + this.statusCount.normal;
+    }
+  },
+  created() {
+    this.getEquTotal();
+  },
+  mounted() {
+  },
+  methods: {
+    //获取设备类别
+    getEquTotal(){
+        this.$http.get("getTotalByEquipmentType",{params: {id:11}}).then(response => {
+            this.list =[];
+          let list =response.data;
+          list.forEach((item,index,array)=>{
+              item.style = this.itemStyleList[index];
+              this.list.push(item);
+          });
+           this.is_show=true;
+        }); 
+        this.showLoading=false;
+    },
+    search(name)
+    {
+       
+        this.$emit('eq_type',name)
+    }
+
+  },
+
+  
+};
+</script>
+
+<style lang='scss' scoped>
+@import "./alarm.scss";
+</style>

src/views/device/hanger_equipment/bmapModel.vue

@@ -0,0 +1,106 @@
+<template>
+  <ele-form-dialog
+    v-bind="formConfig"
+    v-model="formData"
+    :request-fn="handleRequest"
+    :visible.sync="DialogVisible"
+    @input='getChangeValue'
+    width="30%"
+  />
+</template>
+
+<script>
+export default {
+  props: ["bmapModelVisible","bmapModelData"],
+  data() {
+    return {
+      formData: {
+        lat: '121.480836',
+        lng: '31.236519',
+        address:'上海',
+        location:{'lng':121.480836,'lat':'31.236519','address':'上海'}
+      },
+      formConfig: {
+          isShowLabel: false,
+          inline: true,
+          submitBtnText: "确认",
+        formDesc: {
+          location: {
+            type: "bmap",
+            label: "坐标",
+            attrs: {
+              ak: "LDeyoWgKV2mO1b3MRkTlyzGcNjFUycLL",
+              zoom: 15,
+              isScrollWheelZoom:true,
+            },
+            layout: 24
+          },
+          lng: {
+              
+            type: "input",
+            label: "经度",
+            layout: 8
+          },
+          lat: {
+              
+            type: "input",
+            label: "纬度",
+            layout: 8,
+            
+          }
+        }
+      }
+    };
+  },
+  methods: {
+    handleRequest(data) {
+      
+      if(this.formData.location){
+          this.$parent.location=this.formData.location
+          this.$emit("sendVal", this.formData.location);
+      }else{
+          this.$emit("sendVal", '');
+          this.$parent.location=''
+      }
+    //    console.log(this.$parent.location);
+     
+    },
+    getChangeValue(res){
+        this.formData.lat=res.location.lat
+        this.formData.lng=res.location.lng
+         this.formData.address = res.location.address
+    }
+    
+
+  },
+  computed: {
+    DialogVisible: {
+      set(val) {
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+          if(this.bmapModelData.longitude){
+            console.log(this.bmapModelData);
+              let record=this.bmapModelData
+              let formData={'lat':record.longitude,'lng':record.latitude,address:record.address,'location':{'lat':record.latitude,'lng':record.longitude,'address':record.address}}
+              this.formData=formData
+          }
+        return this.bmapModelVisible; // 表示获取父组件的值
+      }
+    }
+  }
+};
+</script>
+<style>
+/*去除百度地图版权*/
+.anchorBL{
+    display:none;
+} 
+.ele-form-btns{
+    margin-top:0px !important;
+}
+/*特殊处理 暂时去除地图顶部搜索框*/
+/* .el-autocomplete{
+  display: none;
+} */
+</style>

src/views/device/hanger_equipment/component/analysisDialog.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-dialog
+    title="心跳历史曲线"
+    :visible.sync="dialogVisible"
+    width="800px"
+    custom-class="view-dialog"
+    :modal-append-to-body="false">
+     <el-row class="head-search"> 
+    <el-divider class="dialog-divider"></el-divider>
+     <dialogSearch
+      :url="url"
+      :assetNo="assetNo"
+      @dataChange="setChartData"
+    />
+      </el-row>
+    <el-row class="chart-box"> 
+      
+      <div v-for="(item, index) in chartList" :key="index" >
+            <base-line :options="item" width="100%" height="240px" theme="shine" />
+      </div>
+  
+    </el-row>
+   
+  
+    <el-divider class="dialog-divider"></el-divider>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">关 闭</el-button>
+      <!-- <el-button style="margin-left:20px" type="primary" @click="dialogVisible = false">确 定</el-button> -->
+    </span>
+ 
+  </el-dialog>
+
+</template>
+<script>
+
+import dialogSearch from '../search/dialogSearch';
+import BaseLine from "@/components/Charts/BaseLineChart";
+  export default {
+    props:['analysisVisible',"assetNo"],
+    components: {
+      dialogSearch,
+      BaseLine
+    },
+    data() {
+      return {
+        url: "alarm/getPassChartsData",
+        chartList:[],
+      };
+    },
+    methods: {
+        setChartData(data) {
+          
+           this.chartList=[];
+          let xAxis=data.times;
+          let seriesArr=data.series;
+           for(let i in seriesArr){
+             
+             let lineOptions=this.getLineOptions(xAxis,seriesArr[i]);
+             this.chartList.push(lineOptions);
+           }
+
+            // this.lineOptions = this.getLineOptions(xAxisData,seriesData);
+        },
+        getLineOptions(xAxisData,seriesData) {
+            return {
+                    title: {
+                        text: seriesData.title,
+                        left : 'center',
+                        textStyle: {
+                            fontWeight: "600",
+                            fontSize: "18",
+                            // color: "#3fd5f1"
+                        }
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: xAxisData
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    series: [{
+                        data: seriesData.yData,
+                        type: 'line',
+                        smooth: true,
+                        areaStyle: {}
+                    }]
+                
+            };
+        },
+        
+    },
+  
+    computed: {
+      dialogVisible: {
+      set (val) {
+        this.chartList=[];
+        this.$emit('sendVal', val) 
+      },
+      get () {
+        return this.analysisVisible
+      }
+    },
+    }
+  };
+</script>
+<style scoped>
+::v-deep .el-dialog{
+  min-width: 500px;
+}
+ .el-dialog__body{
+  padding: 0px!important;
+  
+  /* padding-bottom: 0px!important; */
+}
+.head-search{
+  /* position: absolute; */
+  width:100%;
+  /* top:0; */
+}
+.chart-box{
+  /* position: absolute; */
+  /* top:140px; */
+  min-height:200px;
+  max-height:490px;
+  overflow: hidden;
+   overflow-y: auto;
+   width:100%;
+}
+
+.dialog-divider{
+  margin:0px;
+}
+
+
+
+</style>

src/views/device/hanger_equipment/component/deviceDialog.vue

@@ -0,0 +1,64 @@
+<template>
+    <el-drawer
+      size="60%"
+      title="查看"
+      :visible.sync="innerVisible"
+      append-to-body>
+    <el-divider class="dialog-divider"></el-divider>
+        <!-- <device-tabs 
+            :deviceDetail="detail"
+            :assetNo="detail.asset_no"
+        />     -->
+    </el-drawer>
+</template>
+<script>
+// import deviceTabs from "@/views/devices/deviceTabs";
+export default {
+    props:['deviceVisible','assetNo'],
+    // components: { deviceTabs },
+    data() {
+      return {
+          detail:{},
+      };
+    },
+    methods: {
+
+    },
+    watch:{
+        assetNo(newVal){
+            console.log('deviceDialog',newVal)
+            var that = this;
+            var assetNo = newVal;
+            this.detail={}
+            this.$http.get("device/getDetailByassetNo/" + assetNo).then(res => {
+                that.detail = res.data;
+            });
+        }
+    }, 
+    computed: {
+        innerVisible: {
+            set (val) {
+                this.$emit('sendVal', val) 
+            },
+            get () {
+
+                return this.deviceVisible
+            }
+        },
+    }
+};
+</script>
+<style  scoped>
+.el-dialog__body{
+  padding: 0px!important;
+}
+.dialog-divider{
+  margin:0px;
+}
+.dialog-tabs{
+    padding:20px;
+}
+::v-deep .el-drawer span:focus {
+  outline: none;
+}
+</style>

src/views/device/hanger_equipment/component/exportAlarm.js

@@ -0,0 +1,100 @@
+
+export default {
+  data() {
+    return {
+      downloadLoading: false,
+    }
+  },
+  created() {
+
+  },
+
+  methods: {
+    //获取导出文件名称
+    getFileName() {
+      var tmpDate = new Date();
+      var year = tmpDate.getFullYear();
+      var month = ("0" + (tmpDate.getMonth() + 1)).slice(-2)
+      var date = ("0" + tmpDate.getDate()).slice(-2)
+      var h = ("0" + tmpDate.getHours()).slice(-2)
+      var m = ("0" + tmpDate.getMinutes()).slice(-2)
+      var s = ("0" + tmpDate.getSeconds()).slice(-2)
+
+      return '告警统计' + year + month + date + h + m + s
+    },
+    //导出告警设备
+    exportDeviceForAll(){
+      this.downloadLoading = true
+      const tHeader=['序号', '资产编号', '所属区域', '设备详细地址', '单位名称', '告警个数', '告警时间']
+      const filterVal=['id', 'asset_no', 'area_name', 'addr', 'depart_name', 'alarm_num', 'alarm_time']
+      const query =this.queryParam
+      this.$http.post('device/exportAlarmDevice', { params: query },{'timeout':120000}).then(response => {
+        let data = response.data
+        this.exportExcel(data,tHeader,filterVal);
+      })
+        
+    },
+    exportDeviceBySelectIds(selectedIds) {
+      this.downloadLoading = true
+      let list = []
+      const tHeader=['序号', '资产编号', '所属区域', '设备详细地址', '单位名称', '告警个数', '告警时间']
+      const filterVal=['id', 'asset_no', 'area_name', 'addr', 'depart_name', 'alarm_num', 'alarm_time']
+      this.data.forEach(item => {
+        if(selectedIds.indexOf(item.id) !='-1' ){
+          list.push(item);
+        }
+      })
+      this.exportExcel(list,tHeader,filterVal);
+    },
+
+    //告警心跳导出
+    exportExcelForAll(confirm_user_id){
+      this.downloadLoading = true
+      const query =this.queryParam
+      query.confirm_user_id=confirm_user_id;
+      const tHeader=['序号', '设备类型', '告警原因', '告警类型', '资产编号', '设备详细地址', '告警时间', '告警持续时间']
+      const filterVal=['id', 'device_type', 'alarm_reason', 'alarm_source', 'asset_no', 'addr', 'start_time', 'continue_time']
+ 
+      this.$http.post('alarm/exportAlarm', { params: query },{'timeout':120000}).then(response => {
+        let data = response.data
+        this.exportExcel(data,tHeader,filterVal);
+      })
+    },
+    exportExcelBySelectIds(selectedIds) {
+      this.downloadLoading = true
+      const tHeader=['序号', '设备类型', '告警原因', '告警类型', '资产编号', '设备详细地址', '告警时间', '告警持续时间']
+      const filterVal=['id', 'device_type', 'alarm_reason', 'alarm_source', 'asset_no', 'address', 'start_time', 'continue_time']
+      let list = []
+      this.data.forEach(item => {
+        if(selectedIds.indexOf(item.id) !='-1' ){
+          list.push(item);
+        }
+      })
+      this.exportExcel(list,tHeader,filterVal);
+    },
+
+    exportExcel(list,tHeader,filterVal) {
+  
+      import('@/vendor/Export2Excel').then(excel => {
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: this.getFileName(),
+          autoWidth: true,
+          bookType: 'xlsx',
+        })
+        this.downloadLoading = false
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'address') {
+          return v['device_info']['addr']
+        } else {
+          return v[j]
+        }
+      }))
+    }
+  }
+}

src/views/device/hanger_equipment/component/exportDialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog
+    title="请选择导出内容"
+    :visible.sync="selectVisible"
+    width="30%"
+    custom-class="view-dialog"
+    :modal-append-to-body="false">
+     <el-row class="head-search"> 
+    <el-divider class="dialog-divider"></el-divider>
+
+      </el-row>
+    <el-row class="select-box"> 
+        <el-radio v-model="export_type" label="select">导出选中数据</el-radio>
+        <el-radio v-model="export_type" label="all">导出筛选数据</el-radio>
+    </el-row>
+   
+    <el-divider class="dialog-divider"></el-divider>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="selectVisible = false">取 消</el-button>
+      <el-button style="margin-left:20px" type="primary" @click="handleRequest">确 定</el-button>
+    </span>
+ 
+  </el-dialog>
+
+</template>
+<script>
+
+export default {
+    props:['exportVisible'],
+    data() {
+      return {
+          export_type: 'all'
+      };
+    },
+    methods: {
+        handleRequest(){
+            this.$emit('exportCallback', this.export_type) 
+        }
+    },
+
+    computed: {
+        selectVisible: {
+            set (val) {
+                this.$emit('sendVal', val) 
+            },
+            get () {
+                return this.exportVisible
+            }
+        },
+    }
+};
+</script>
+<style scoped>
+.el-dialog__body{
+  padding: 0px!important;
+}
+.dialog-divider{
+  margin:0px;
+}
+.dialog-tabs{
+    padding:20px;
+}
+.el-drawer span:focus {
+  outline: none;
+}
+.select-box{
+    padding:20px 30px;
+}
+</style>

src/views/device/hanger_equipment/component/handleAlarmDialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog
+    title="请选择导出内容"
+    :visible.sync="selectVisible"
+    width="30%"
+    custom-class="view-dialog"
+    :modal-append-to-body="false">
+     <el-row class="head-search"> 
+    <el-divider class="dialog-divider"></el-divider>
+
+      </el-row>
+    <el-row class="select-box"> 
+        <el-radio v-model="export_type" label="select">导出选中数据</el-radio>
+        <el-radio v-model="export_type" label="all">导出筛选数据</el-radio>
+    </el-row>
+   
+    <el-divider class="dialog-divider"></el-divider>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="selectVisible = false">取 消</el-button>
+      <el-button style="margin-left:20px" type="primary" @click="handleRequest">确 定</el-button>
+    </span>
+ 
+  </el-dialog>
+
+</template>
+<script>
+
+export default {
+    props:['exportVisible'],
+    data() {
+      return {
+          export_type: 'all'
+      };
+    },
+    methods: {
+        handleRequest(){
+            this.$emit('exportCallback', this.export_type) 
+        }
+    },
+
+    computed: {
+        selectVisible: {
+            set (val) {
+                this.$emit('sendVal', val) 
+            },
+            get () {
+                return this.exportVisible
+            }
+        },
+    }
+};
+</script>
+<style scoped>
+.el-dialog__body{
+  padding: 0px!important;
+}
+.dialog-divider{
+  margin:0px;
+}
+.dialog-tabs{
+    padding:20px;
+}
+.el-drawer span:focus {
+  outline: none;
+}
+.select-box{
+    padding:20px 30px;
+}
+</style>

src/views/device/hanger_equipment/component/tableDialog.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    title="推送记录"
+    :visible.sync="dialogVisible"
+    width="900px"
+    custom-class="view-dialog"
+    :modal-append-to-body="false"
+  >
+    
+    <el-row class="head-search">
+      <el-divider class="dialog-divider"></el-divider>
+    </el-row>
+    <el-row class="table-box">
+      <el-table
+        ref="multipleTable"
+        :data="data"
+        tooltip-effect="dark"
+        style="width: 100%"
+        border
+        fit
+        height="300"
+      >
+      <el-table-column prop="username" label="推送用户" align="center"/>
+      <!-- <el-table-column prop="active_rfid" label="学生卡号" align="center"/>
+      <el-table-column prop="alarm_type_name" label="告警类型" align="center"/> -->
+      <el-table-column prop="created_at" label="推送时间" align="center"/>
+      <el-table-column prop="result" label="推送结果" align="center"/>
+
+        
+      </el-table>
+      <!-- 单页隐藏分页  -->
+      <el-pagination
+        background
+        class="pagination-container"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="paginate.current"
+        :page-sizes="paginate.sizes"
+        :page-size="paginate.limit"
+        :layout="paginate.layout"
+        :total="paginate.total"
+      />
+    </el-row>
+
+    
+  </el-dialog>
+</template>
+<script>
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+export default {
+  mixins: [rlListOperate],
+  props: ["detailVisible", "alarmId"],
+  components: { },
+  data() {
+    return {
+      url: "wxPushResultLog",
+      data: [],
+      queryParam: {
+        alarm_id: ""
+      },
+      
+    };
+  },
+  methods: {
+    /**
+     * 监听搜索组件中查出的数据
+     */
+    setTableData(data, queryParam, paginate) {
+      this.data = data;
+      this.queryParam = queryParam;
+      this.paginate = paginate;
+    },
+
+   
+  },
+  mounted() {
+
+
+  },
+  watch: {},
+  computed: {
+    dialogVisible: {
+      set(val) {
+        this.$emit("sendVal", val);
+      },
+      get() {
+        if (this.detailVisible) {
+          if (!this.alarmId) {
+            return;
+          }
+          this.queryParam.page = 1;
+          this.queryParam.alarm_id = this.alarmId;
+          this.getList();
+        }
+        return this.detailVisible;
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+::v-deep .el-dialog{
+  min-width: 560px;
+}
+.el-dialog__body {
+  padding: 0px !important;
+
+  /* padding-bottom: 0px!important; */
+}
+.head-search {
+  /* position: absolute; */
+  width: 100%;
+}
+
+.dialog-divider {
+  margin: 0px;
+}
+.table-box {
+  padding: 10px 20px;
+}
+.view-btn {
+  color: #20a0ff;
+  font-size: 16px;
+}
+ .el-tag{
+    border:0px;
+  }
+</style>

src/views/device/hanger_equipment/component/viewAlarmDialog.vue

@@ -0,0 +1,159 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    width="460px"
+    custom-class="view-dialog"
+    :modal-append-to-body="false"
+    :append-to-body="true">
+    <el-divider class="dialog-divider"></el-divider>
+      <div class="dialog-content">
+        <el-row class="dialog-row">
+          <div class="dialog-row-title">
+            告警信息
+            <!-- <a href="javascript:void(0);" @click="showLocation()"> <el-button type="primary" class="primary-btn">查看定位</el-button></a> -->
+          </div>
+          <div class="dialog-row-content">
+            <!-- <span class="content-row"> <span class="name-item"> 学生班级: </span> <span>{{alarmInfo.school_name + '/' + alarmInfo.grade_name + '/' + alarmInfo.class_name}}</span> </span> -->
+            <span class="content-row"> <span class="name-item"> 用户姓名: </span> <span>{{alarmInfo.realname}}</span> </span>
+            <span class="content-row"> <span class="name-item"> 设备编号: </span> <span>{{alarmInfo.device_number}}</span> </span>
+            <span class="content-row"> <span class="name-item"> 告警类型: </span> <span>{{alarmInfo.alarm_type_name}}</span> </span>
+            <span class="content-row"> <span class="name-item"> 告警时间: </span> <span>{{alarmInfo.alarm_time}}</span> </span>
+            
+          </div>
+        </el-row>
+        <!-- <el-row class="dialog-row">
+          <div class="dialog-row-title">设备信息  
+           </div>
+          <div class="dialog-row-content">
+            <span class="content-row"> <span class="name-item"> 设备名字: </span> <span>{{alarmInfo.station_name}}</span> </span>
+            <span class="content-row"> <span class="name-item"> 设备编号: </span> <span>{{alarmInfo.station_code}}</span> </span>
+            <span class="content-row"> <span class="name-item"> 详细地址: </span> <span>{{alarmInfo.address}}</span> </span>
+          </div>
+        </el-row> -->
+        <!-- <el-row class="dialog-row" v-if="alarmInfo.end_time">
+          <div class="dialog-row-title">处理信息</div>
+          <div class="dialog-row-content">
+            <span class="content-row"> <span class="name-item"> 结束时间: </span> <span>{{alarmInfo.end_time}}</span> </span>
+          </div>
+        </el-row> -->
+      </div>
+    <el-divider class="dialog-divider"></el-divider>
+    <span slot="footer" class="dialog-footer">
+      <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
+      <el-button style="margin-left:20px" type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+    <device-dialog 
+    :deviceVisible="innerVisible" 
+    @sendVal="closeDeviceDialog" 
+    :assetNo="dialogAssetNo"
+    />
+  </el-dialog>
+
+</template>
+<script>
+import {  CodeToText } from "element-china-area-data";
+import deviceDialog from "./deviceDialog"
+  export default {
+    props:['detailVisible',"alarmInfo"],
+    components: {
+      deviceDialog
+    },
+    data() {
+      return {
+
+        deviceInfo:{},
+        dialogAssetNo:'',
+        path:"",
+        innerVisible: false,
+      };
+    },
+    methods: {
+      showLocation(){
+         this.$router.push({
+                // path: this.redirect || "/",
+                path:  "/map/routemap",
+               
+              });
+      },
+      handleDeviceInfo(){
+        // console.log(this.deviceInfo)
+        this.innerVisible=true
+        this.dialogAssetNo=this.deviceInfo.asset_no
+      },
+      closeDeviceDialog(){
+        this.innerVisible=false
+      }
+    },
+    watch:{
+      
+    }, 
+    computed: {
+      dialogVisible: {
+      set (val) {
+        console.log(this.alarmInfo)
+        this.$emit('sendVal', val) 
+      },
+      get () {
+
+        return this.detailVisible
+      }
+    },
+    }
+  };
+</script>
+<style scoped>
+::v-deep .el-dialog{
+  min-width: 360px;
+}
+ .el-dialog__body{
+  padding: 0px!important;
+  /* padding-bottom: 0px!important; */
+}
+
+
+.dialog-divider{
+  margin:0px;
+}
+.dialog-content{
+  padding: 5px;
+}
+
+.dialog-row{
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  font-size: 12px;
+}
+.dialog-row-title{
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: black;
+}
+.dialog-row-content{
+  margin-left: 50px;
+  display: flex;
+  flex-direction: column; 
+}
+.content-row{
+  margin-top: 5px;
+}
+.name-item{
+  width: 60px;
+  white-space:pre;
+  word-wrap: break-word;
+}
+.el-drawer__body{
+  max-height:100vh;
+  overflow: hidden;
+   overflow-y: auto;
+   width:100%;
+
+}
+.primary-btn{
+  color: #fff;
+  background-color: #409eff;
+  border-color: #98a9b9;
+  margin-left:5px;
+}
+</style>

src/views/device/hanger_equipment/component/viewDialog.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    width="460px"
+    custom-class="view-dialog"
+    :modal-append-to-body="false"
+    :append-to-body="true">
+    <el-divider class="dialog-divider"></el-divider>
+      <div class="dialog-content">
+        <el-row class="dialog-row">
+          <div class="dialog-row-title">告警信息</div>
+          <div class="dialog-row-content">
+            <!-- <span class="content-row"> <span class="name-item"> 设备名称: </span> <span>{{alarmInfo.realname}}</span> </span>
+            <span class="content-row"> <span class="name-item"> 设备编号: </span> <span>{{alarmInfo.device_number}}</span> </span>
+            <span class="content-row" style="color:red"> <span class="name-item"> 告警原因: </span> <span>{{alarmInfo.alarm_type_name}}</span> </span>
+            <span class="content-row"> <span class="name-item"> 告警时间: </span> <span>{{alarmInfo.alarm_time}}</span> </span> -->
+            <span class="content-row"> <span class="name-item"> 设备名称: </span> <span>测试设备1</span> </span>
+            <span class="content-row"> <span class="name-item"> 设备编号: </span> <span>10001</span> </span>
+            <span class="content-row" style="color:red"> <span class="name-item"> 告警原因: </span> <span>液压油偏低</span> </span>
+            <span class="content-row"> <span class="name-item"> 告警时间: </span> <span>2022-05-16 14:43:00</span> </span>
+          </div>
+        </el-row>
+
+
+      </div>
+    <el-divider class="dialog-divider"></el-divider>
+    <span slot="footer" class="dialog-footer">
+      <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
+      <el-button style="margin-left:20px" type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+    <device-dialog 
+    :deviceVisible="innerVisible" 
+    @sendVal="closeDeviceDialog" 
+    :assetNo="dialogAssetNo"
+    />
+  </el-dialog>
+
+</template>
+<script>
+import {  CodeToText } from "element-china-area-data";
+import deviceDialog from "./deviceDialog"
+  export default {
+    props:['detailVisible',"alarmId"],
+    components: {
+      deviceDialog
+    },
+    data() {
+      return {
+        alarmInfo:{},
+        deviceInfo:{},
+        dialogAssetNo:'',
+        path:"",
+        innerVisible: false,
+      };
+    },
+    methods: {
+      handleDeviceInfo(){
+        // console.log(this.deviceInfo)
+        this.innerVisible=true
+        this.dialogAssetNo=this.deviceInfo.asset_no
+      },
+      closeDeviceDialog(){
+        this.innerVisible=false
+      }
+    },
+    watch:{
+      alarmId(newVal){
+
+        this.$http.get('alarmReport/getDetail/'+newVal).then(response => {
+          if (response.code === 10000) {
+            this.alarmInfo = response.data || {}
+          }
+        })
+        
+      }
+    }, 
+    computed: {
+      dialogVisible: {
+      set (val) {
+
+        this.$emit('sendVal', val) 
+      },
+      get () {
+
+        return this.detailVisible
+      }
+    },
+    }
+  };
+</script>
+<style scoped>
+::v-deep .el-dialog{
+  min-width: 360px;
+}
+ .el-dialog__body{
+  padding: 0px!important;
+  /* padding-bottom: 0px!important; */
+}
+
+
+.dialog-divider{
+  margin:0px;
+}
+.dialog-content{
+  padding: 5px;
+}
+
+.dialog-row{
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  font-size: 12px;
+}
+.dialog-row-title{
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: black;
+}
+.dialog-row-content{
+  margin-left: 50px;
+  display: flex;
+  flex-direction: column; 
+}
+.content-row{
+  margin-top: 5px;
+}
+.name-item{
+  width: 60px;
+  white-space:pre;
+  word-wrap: break-word;
+}
+.el-drawer__body{
+  max-height:100vh;
+  overflow: hidden;
+   overflow-y: auto;
+   width:100%;
+
+}
+.primary-btn{
+  color: #fff;
+  background-color: #409eff;
+  border-color: #98a9b9;
+  margin-left:5px;
+}
+</style>

src/views/device/hanger_equipment/detail.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-drawer title="设备信息" :visible.sync="drawerVisible" :direction="direction" size="45%">
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="设备信息" name="first">
+        <el-divider content-position="left">基础信息</el-divider>
+        <el-row>
+          <div style="margin-bottom: 30px; margin-left: 50px">
+            <el-col :span="6" style="margin-top: 10px; font-size: 14px; color: #a0a0a0">
+              <div class="detail-item">
+                <pre style="display: inline">设备分类：</pre>
+                <span class="item">{{ record.classification }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">设备型号：</pre>
+                <span class="item">{{ record.equipment_model }}</span>
+              </div>
+              <div class="detail-item">
+                <span>名称：</span>
+                <span class="item">{{ record.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>序列号：</span>
+                <span class="item">{{ record.serial_number }}</span>
+              </div>
+              <div class="detail-item">
+                <span>检验状态：</span>
+                <span class="item">{{ record.check_status1}}</span>
+              </div>
+            </el-col>
+            <el-col :span="6" style="margin-top: 10px; font-size: 14px; color: #a0a0a0">
+              <div class="detail-item">
+                <pre style="display: inline">设备类别：</pre>
+                <span class="item">{{ record.equ_type_name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>发放单位：</span>
+                <span class="item">{{ record.issue_unit}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">固定资产编号：</pre>
+                <span class="item">{{ record.fixed_asset_number }}</span>
+              </div>
+              <div class="detail-item">
+                <span>上次校验时间：</span>
+                <span class="item">{{ record.check_last_time}}</span>
+              </div>
+              <div class="detail-item">
+                <span>设备状态：</span>
+                <span class="item">{{ record.status1}}</span>
+              </div>
+            </el-col>
+            <el-col :span="6" style="margin-top: 10px; font-size: 14px; color: #a0a0a0">
+              <div class="detail-item">
+                <pre style="display: inline">物料号：</pre>
+                <span class="item">{{ record.material_number}}</span>
+              </div>
+              <div class="detail-item">
+                <span>出厂编号：</span>
+                <span class="item">{{ record.factory_number}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">类固资产编号：</pre>
+                <span class="item">{{ record.fixed_asset_number2 }}</span>
+              </div>
+              <div class="detail-item">
+                <span>下次校验时间：</span>
+                <span class="item">{{ record.check_next_time}}</span>
+              </div>
+              <div class="detail-item" v-if="record.equipment_type==6">
+                <span>位置：</span>
+                <span class="item">{{ record.address}}</span>
+              </div>
+
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+      </el-tab-pane>
+
+    </el-tabs>
+  </el-drawer>
+</template>
+<script>
+//import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+export default {
+  props: ["detailVisible", "record"],
+ // mixins: [rlListOperate],
+  data() {
+    return {
+      drawer: false,
+      direction: "rtl",
+      activeName: "first",
+      nowData: [],
+      // queryParam: {
+      //   device_number: "",
+      // }
+    };
+  },
+  methods: {
+    handleClick(){
+
+    }
+  },
+  computed: {
+    drawerVisible: {
+      set(val) {
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+        return this.detailVisible; // 表示获取父组件的值
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+.detail-item {
+  width: 100%;
+  padding: 15px 0px;
+  list-style-type: none;
+}
+.item {
+  font-size: 14px;
+  color: #FFF;
+  margin-top: 5px;
+}
+.el-table .warning-row {
+  background: oldlace !important;
+}
+
+.el-table .success-row {
+  background: #f0f9eb !important;
+}
+.pagination-container{
+  padding-left:25px;
+  padding-right:25px;
+}
+</style>

src/views/device/hanger_equipment/formModel.vue

@@ -0,0 +1,247 @@
+<template>
+<div>
+  <ele-form-dialog
+    v-bind="formConfig"
+    v-model="formFieldsData"
+    v-dialogDrag
+    :title="title"
+    :request-fn="handleFormSubmit"
+    :visible.sync="DialogVisible"
+    custom-class="abow_dialog"
+    label-width="100px"
+    label-position="left"
+    :dialogAttrs="{ 'close-on-click-modal': false,'top':'8vh'}"
+     v-if="fresh"
+  >
+  </ele-form-dialog>
+  <bmapModel @sendVal="closeBmapDialog" :bmapModelVisible="bmapVisible" :bmapModelData="bmapModelData" />
+  </div>
+</template>
+
+<script>
+import bmapModel from './bmapModel.vue'
+export default {
+  props: ["formModelVisible", "title"],
+  components:{
+    bmapModel
+  },
+  data() {
+    return {
+      bmapVisible:false,
+      bmapModelData:{},
+      location:{},
+      formData: {},
+      fresh:true,
+      deviceTypes:[],
+      formFieldsData: {
+        id:'',
+        equipment_type:"",
+        equipment_model:"",
+        material_number: "",
+        name: "",
+        issue_unit:"",
+        fixed_asset_number:"",
+        fixed_asset_number2:'',
+        serial_number:"",
+        factory_number:"",
+        check_last_time:"",
+        check_next_time:"",
+        check_status:"",
+        status:"",
+        list:"",
+        address:'',
+        longitude:"",
+        latitude:''
+      },
+      url: "hydEquipment",
+      formConfig: {
+        formDesc: {
+          equipment_type:{
+            layout: 12,
+            type:"select",
+            label:'设备类型',
+            required:true,
+            options:[],
+            disabled (data) {
+             if(data.id)
+             {
+              return true;
+             }
+            return false;
+          }
+          },
+          equipment_model: {
+            layout: 12,
+            type: "input",
+            label: "型号",
+          },
+           name: {
+             layout: 12,
+            type: "input",
+            label: "名称",
+            required:true
+          },
+          material_number: {
+            layout: 12,
+            type: "input",
+            label: "物料号",
+            required:true,
+          },
+           issue_unit: {
+            layout: 12,
+            type: "input",
+            label: "发放单位",
+          },
+          fixed_asset_number:
+          {
+            layout: 12,
+            type: "input",
+            label: "固定资产编号",
+          },
+          fixed_asset_number2:
+          {
+            layout: 12,
+            type: "input",
+            label: "类固资产编号",
+          },
+          serial_number:{
+            layout: 12,
+            type: "input",
+            label: "序列号",
+
+          },
+          factory_number:{
+            layout: 12,
+            type: "input",
+            label: "出厂编号"
+          },
+          check_last_time:{
+            layout: 12,
+            type: "date",
+            label: "上次校验时间"
+          },
+          check_next_time:{
+            layout: 12,
+            type: "date",
+            label: "下次校验时间"
+          },
+          check_status:{
+            layout: 12,
+            type: "select",
+            label: "校验状态",
+            options:[],
+
+          },
+          status:{
+            layout: 12,
+            type: "select",
+            label: "状态",
+            options:[],
+
+          },
+          address:{
+             layout: 18,
+              type: "input",
+              label: "地址",
+               vif(data)
+                {
+                  if(data.equipment_type&&data.equipment_type==6)
+                  {
+                    return true;
+                  }
+                  return false;
+                }
+          },
+          btn: {
+            layout: 6,
+            type: 'button',
+            title: '选择地图', // 按钮文字内容
+            vif(data) {
+              if (data.equipment_type && data.equipment_type == 6) {
+                return true;
+              }
+              return false;
+            },
+            // 或者 title: '按钮文字'
+            on: {
+              // 按钮事件触发
+              click: () => {
+                this.openBmap();
+                console.log('clicked')
+              }
+            },
+            // 属性设置
+            attrs: {
+              type: 'primary'
+            }
+          }
+
+
+        },
+        order: ['equipment_type', 'equipment_model', "name", "material_number", 'issue_unit', 'fixed_asset_number', 'fixed_asset_number2', "serial_number", 'factory_number', 'check_last_time', 'check_next_time', 'check_status', 'status', 'address','btn']
+      }
+    };
+  },
+  created() {
+     this.$http.get("getHydEquipmentType",{ params: {code:'ToolStatus'} }).then(response => {
+      this.formConfig.formDesc.status.options = response.data;
+    });
+      this.$http.get("getHydEquipmentType",{ params: {code:'Check'} }).then(response => {
+      this.formConfig.formDesc.check_status.options = response.data;
+    });
+      this.$http.get("findAllByPid",{ params: {id:11} }).then(resp => {
+        let data= resp.data;
+        let ar=[];
+        data.forEach((item) => {
+            ar.push({text:item.name,value:item.id})
+        });
+        this.formConfig.formDesc.equipment_type.options = ar;
+     });
+  },
+  methods: {
+   openBmap()
+   {
+    if(this.formFieldsData.longitude)
+    {
+        this.bmapModelData={address:this.formFieldsData.address,longitude:this.formFieldsData.longitude,latitude:this.formFieldsData.latitude};
+    }
+     this.bmapVisible = true;
+   },
+  //关闭地图弹窗
+   closeBmapDialog()
+   {
+      if(this.location.lng)
+      {
+        this.formFieldsData.address=this.location.address;
+        this.formFieldsData.longitude = this.location.lng;
+        this.formFieldsData.latitude = this.location.lat;
+      }
+      this.bmapVisible = false;
+   },
+    //更新内容
+    handleFormSubmit(data) {
+      this.$parent.handleSubmit();
+    },
+    handleRequest(data) {
+      return Promise.resolve();
+    },
+    handleRequestSuccess() {
+      this.$message.success("发送成功");
+    }
+  },
+  computed: {
+    DialogVisible: {
+      set(val) {
+          this.fresh = false;
+            this.$nextTick(() => {
+            this.fresh = true
+            })
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+       return this.formModelVisible; // 表示获取父组件的值
+      }
+    }
+  }
+};
+</script>

src/views/device/hanger_equipment/index.scss

@@ -0,0 +1,120 @@
+.col-setting-popover {
+    min-width: 100px;
+    padding: 9px 16px;
+    .col-setting-title {
+      color: #7f8b93;
+      font-size: 12px;
+    }
+    .col-setting-group {
+      .el-checkbox {
+        display: block;
+        margin-top: 5px;
+      }
+    }
+  }
+  .icyuandianda {
+    font-size: 12px;
+  }
+  .search-box-area {
+    width: 60%;
+    height: 44px;
+    float: left;
+  }
+  .search-operate-area {
+    width: 20%;
+    height: 44px;
+    float: left;
+    
+  }
+  .search-operate-area1 {
+    width: 20%;
+    height: 44px;
+    float: right;
+    
+  }
+  .f2{
+    float: right;
+    margin-left:10px;
+  }
+  .search-item {
+    width: 25%;
+    height: 44px;
+    float: left;
+  }
+  #searchBox {
+    overflow: hidden;
+  }
+  .upload-dialog .el-dialog__body {
+    padding: 0px, 20px !important;
+  }
+  .columnOption {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: row-reverse;
+    .content {
+      width: 140px;
+      height: 100%;
+      background-color: rgb(255, 255, 255);
+      .head {
+        width: 100%;
+        height: 44px;
+        border-bottom: 1px solid #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+      }
+      .body {
+        width: 100%;
+        height: calc(100% - 88px);
+        box-sizing: border-box;
+        padding-top: 10px;
+        padding-left: 10px;
+        overflow-y: auto;
+        .items {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          .el-checkbox {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            margin-bottom: 14px;
+            display: inline-block;
+            font-family: PingFang SC;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            color: #000;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            box-sizing: border-box;
+            padding-left: 14px;
+          }
+          .el-checkbox:hover {
+            background-color: #f5f7fa;
+          }
+        }
+      }
+      .footer {
+        width: 100%;
+        height: 44px;
+        border-top: 1px solid #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+  .el-tag {
+    border: 0px;
+  }

src/views/device/hanger_equipment/index.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="min">
+    <alarm @eq_type="eqSelect"></alarm>
+
+    <div class="app-container">
+      <div class="filter-container" style="padding-bottom: 0px">
+        <div class="search-box-area" id="searchBox">
+          <div class="search-item">
+            <el-select class="filter-item form-search-input fl" v-model="queryParam.equipment_type"
+              placeholder="请选择设备类别" clearable @change="handleChange">
+              <el-option v-for="item in equ_types" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+
+            </el-select>
+          </div>
+          <div class="search-item">
+            <el-input v-model="queryParam.material_number" placeholder="请输入物料号" clearable
+              class="filter-item form-search-input fl" @keyup.enter.native="handleSearch" />
+          </div>
+          <div class="search-item">
+            <el-input v-model="queryParam.name" placeholder="请输入设备名称" clearable class="filter-item form-search-input fl"
+              @keyup.enter.native="handleSearch" />
+          </div>
+          <div class="search-item">
+            <el-input v-model="queryParam.number" placeholder="请输入固定资产/类固资产/序列" clearable
+              class="filter-item form-search-input fl" @keyup.enter.native="handleSearch" />
+          </div>
+
+        </div>
+        <div class="search-operate-area">
+          <!-- <el-input v-model="queryParam.code" placeholder="唯一编码" clearable class="filter-item form-search-input fl" /> -->
+          <el-button class="filter-item search fl" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+          <el-button class="filter-item fl" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
+        </div>
+        <div class="list-operate-area">
+          <!-- <el-button size="mini" class="filter-item search fl" icon="el-icon-plus" @click="handleCreate">添加</el-button> -->
+          <el-button class="filter-item search f2"  icon="el-icon-setting" @click="showColumnOption">列设置
+          </el-button>
+          <el-button class="filter-item search f2"  icon="el-icon-refresh-right" @click="refresh">刷新
+          </el-button>
+        </div>
+      </div>
+      <el-table :data="data" v-loading="loading" ref="multipleTable" @selection-change="hydraulicSelectMulti"
+        @sort-change="sortChange" :dynamicColumnSetting="true" tooltip-effect="dark" style="width: 100%" border fit>
+        <el-table-column type="selection" fixed="left" width="55"></el-table-column>
+        <el-table-column prop="material_number" label="物料号" align="center" v-if="showColumn.material_number"
+          width="120" />
+        <el-table-column prop="classification" label="设备分类" align="center" v-if="showColumn.classification" />
+        <el-table-column prop="equ_type_name" label="设备类别" align="center" v-if="showColumn.equ_type_name" width="120" />
+        <el-table-column prop="name" label="设备名称" align="center" v-if="showColumn.name" width="120" />
+        <el-table-column prop="equipment_model" label="设备型号" align="center" v-if="showColumn.equipment_model" />
+        <el-table-column prop="issue_unit" label="发放单位" align="center" v-if="showColumn.issue_unit" />
+        <el-table-column prop="fixed_asset_number" label="固定资产编号" align="center" v-if="showColumn.fixed_asset_number" />
+        <el-table-column prop="fixed_asset_number2" label="类固资产编号" align="center"
+          v-if="showColumn.fixed_asset_number" />
+
+        <el-table-column prop="serial_number" label="序列号" align="center" v-if="showColumn.serial_number" />
+        <el-table-column prop="factory_number" label="出厂编号" align="center" v-if="showColumn.factory_number" />
+        <el-table-column prop="check_last_time" label="上次校验时间" align="center" v-if="showColumn.check_last_time"
+          width="100" />
+        <el-table-column prop="check_next_time" label="下次校验时间" align="center" width="100"
+          v-if="showColumn.check_next_time" />
+        <el-table-column prop="check_status1" label="校验状态" align="center" v-if="showColumn.check_status1" />
+        <el-table-column prop="status1" label="状态" align="center" v-if="showColumn.status1" />
+        <el-table-column label="操作" width="180" align="center" fixed="right">
+          <template slot-scope="record">
+            <el-tooltip content="修改" placement="top" :enterable="false">
+              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(record.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="查看" placement="top" :enterable="false">
+              <el-button type="primary" size="mini" icon="el-icon-view" @click="handleDetail(record.row)"></el-button>
+            </el-tooltip>
+            <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(record.row.id)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <transition name="fade">
+        <div class="columnOption" v-show="isShowColumn">
+          <div class="content">
+            <div class="head">选择显示字段</div>
+            <div class="body">
+              <el-checkbox v-model="checkList.depart_name" disabled>所属部门</el-checkbox>
+              <!-- <el-checkbox v-model="checkList.alarm_state_text" disabled>告警状态</el-checkbox> -->
+              <el-checkbox v-model="checkList.material_number">物料号</el-checkbox>
+              <el-checkbox v-model="checkList.classification">设备分类</el-checkbox>
+              <el-checkbox v-model="checkList.equ_type_name">设备类别</el-checkbox>
+              <el-checkbox v-model="checkList.name">名称</el-checkbox>
+              <el-checkbox v-model="checkList.equipment_model">设备型号</el-checkbox>
+              <el-checkbox v-model="checkList.fixed_asset_number">固定资产编号</el-checkbox>
+              <el-checkbox v-model="checkList.fixed_asset_number2">类固定资产编号</el-checkbox>
+              <el-checkbox v-model="checkList.serial_number">序列号</el-checkbox>
+              <el-checkbox v-model="checkList.factory_number">出厂编号</el-checkbox>
+              <el-checkbox v-model="checkList.check_last_time">上次校验时间</el-checkbox>
+              <el-checkbox v-model="checkList.check_next_time">下次校验时间</el-checkbox>
+              <el-checkbox v-model="checkList.check_status1">校验状态</el-checkbox>
+              <el-checkbox v-model="checkList.status1">状态</el-checkbox>
+            </div>
+            <div class="footer">
+              <el-button size="small" type="primary" plain @click="saveColumn">保存列配置</el-button>
+            </div>
+          </div>
+        </div>
+      </transition>
+      <el-button type="primary" icon="el-icon-plus" :loading="downloadLoading" style="margin-top: 15px"
+        @click="handleCreate">添加</el-button>
+      <el-button type="danger" icon="el-icon-delete" v-if="selectedIds.length > 0" style="margin-top: 15px"
+        @click="handleMultiDelete()">删除</el-button>
+      <el-button type="warning" icon="el-icon-download" :loading="downloadLoading" style="margin-top: 15px"
+        @click="exportExcel">导出</el-button>
+      <el-button type="success" icon="el-icon-upload" :loading="downloadLoading" style="margin-top: 15px"
+        @click="importExcel">导入</el-button>
+      <el-pagination background class="pagination-container" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" :current-page="paginate.current" :page-sizes="paginate.sizes"
+        :page-size="paginate.limit" :layout="paginate.layout" :total="paginate.total" />
+      <form-model @sendVal="closeDialog" :formModelVisible="formVisible" :title="title" :ref="formName" />
+      <detail :detailVisible="detailVisible" @sendVal="closeDrawer" :record="detail" />
+
+
+      <!-- 导入弹框 -->
+      <el-dialog title="导入液压设备" append-to-body width="400px" :visible.sync="uploadDialogVisible"
+        custom-class="upload-dialog">
+
+        <el-upload class="upload-demo" drag :action="actionUrl" :headers="headers" :before-upload="beforeUpload"
+          :show-file-list="true" :on-change="onchange" :on-remove="onremove" :on-exceed="onexeced" :limit="1"
+          ref="upload">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">
+            将文件拖到此处，或
+            <em>点击上传</em>
+          </div>
+          <div class="el-upload__tip upload-tips" slot="tip">
+            只能上传xls/xlsx文件
+          </div>
+        </el-upload>
+        <el-link type="primary" href="https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/import_pump.xls"
+          style="margin-top: 10px">下载模板</el-link>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="uploadDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="importCards" :loading="loadings">{{
+            submitText
+            }}</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+import { action } from "@/directive/permission/index.js";
+import { getToken } from "../../../utils/auth";
+import detail from "./detail.vue"
+import formModel from './formModel.vue'
+import alarm from './alarm.vue'
+export default {
+  name: "hydraulic",
+  directives: { action },
+  mixins: [rlListOperate],
+  components: {
+    formModel,
+    detail,
+    alarm
+  },
+  data() {
+    return {
+      url: "hydEquipment",
+     defaultQueryParam:['pid'],  
+      queryParam: {
+        pid:11,
+        material_number: "",
+        name: "",
+        number: "",
+        equipment_type:'',
+      },
+      deviceTypes:[],
+      current_type: {
+        0: "success",
+        1: "danger",
+      },
+      formName:'sto_equ',
+      formVisible:false,
+      //搜索
+      searchDisplay: true,
+      equ_types: [],
+
+      //详情
+      detailVisible:false,
+      detail:{},
+      isShowColumn: false,
+      // 列的配置化对象，存储配置信息
+      checkList: {},
+      showColumn: {
+        material_number: true,
+        classification: true,
+        equ_type_name:true,
+        name:true,
+        equipment_model: true,
+        issue_unit: true,
+        fixed_asset_number:true,
+        fixed_asset_number2: true,
+        serial_number: true,
+        factory_number:true,
+        check_last_time:true,
+        check_next_time:true,
+        check_status1:true,
+        status1: true,
+      },
+      //导入请求url
+      actionUrl: process.env.VUE_APP_BASE_API + "/upload/file_excel",
+      headers: { authorization: "Bearer " + getToken() },
+      excel_url: "", //上传学生Excel返回的url
+      uploadDialogVisible: false, //下发配置显示与否
+      selectedDepartId: "",
+      loadings: false,
+      submitText: "确 定",
+    };
+  },
+  created() {
+     this.$http.get("findAllByPid",{ params: {id:11} }).then(resp => {
+        let data= resp.data;
+        let ar=[];
+        data.forEach((item) => {
+            ar.push({label:item.name,value:item.id})
+        });
+        this.equ_types = ar;
+     });
+
+    // // 0-液压泵
+    // this.$http.get("get_device_mold",{ params: {type:0} }).then(resp => {
+    //     this.deviceTypes = resp.data
+    //  });
+  },
+  methods: {
+   
+    handleChange(val) {
+      //  console.log(val)
+      this.queryParam.equipment_type= val;
+      this.handleSearch();
+    },
+    //设备类型
+    eqSelect(val)
+    {
+         this.queryParam.equipment_type =val;
+         this.handleSearch();
+    },
+    hydraulicSelectMulti(data) {
+      this.selectedIds = [];
+      data.forEach((item) => {
+        this.selectedIds.push(item.id);
+      });
+    },
+    refresh() {
+      this.queryParam.page = this.paginate.current;
+      this.getList();
+    },
+    searchDis() {
+      this.searchDisplay = !this.searchDisplay;
+      var searchBoxHeght = document.getElementById("searchBox");
+      if (this.searchDisplay == false) {
+        searchBoxHeght.style.height = 40 + "px";
+      } else {
+        searchBoxHeght.style.height = "auto";
+      }
+    },
+    showColumnOption() {
+      this.isShowColumn = true;
+    },
+    saveColumn() {
+      localStorage.setItem("hydEquSet", JSON.stringify(this.checkList));
+      this.isShowColumn = false;
+    },
+
+    handleDetail(row){
+     
+         this.detailVisible = true,
+         this.detail = row
+      
+    },
+    closeDrawer(){
+      this.detailVisible = false;
+    },
+    changeUsedEvent(row,value){
+
+      this.$http.put('hydraulic/' + row.id, { is_used: value }).then(resp => {
+          if (resp.code === 10000) {
+              this.$message.success('操作成功')
+              // row[field] = val
+              // this.$emit('rowClick', row)
+          }
+      })
+    },
+    importExcel() {
+      this.uploadDialogVisible = true;
+    },
+    changeCards(v) {
+      this.selectedDepartId = v[v.length - 1];
+    },
+    beforeUpload(file) {
+      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
+        this.$notify.error({
+          title: "错误",
+          message: "上传文件只能为excel文件，且为xlsx,xls格式",
+        });
+        return false;
+      }
+      return true;
+    },
+    onremove() {
+      //移除文件钩子
+      this.excel_url = "";
+    },
+    onexeced(files) {
+      if (files.length == 1) {
+        this.$message.error("只能上传一个文件");
+      }
+    },
+    onchange(file, fileList) {
+      if (file.response) {
+        this.$message.success(file.response.data.msg);
+        this.excel_url = file.response.data.excel_url;
+      } else {
+        // console.log(file);
+      }
+    },
+    importCards() {
+      // console.log(this.excel_url);
+      var url = this.excel_url,
+        depart_id = this.selectedDepartId;
+      if (depart_id == "") {
+        this.$message.error("请选择部门");
+        return;
+      }
+      if (url == "") {
+        this.$message.error("请上传文件");
+        return;
+      }
+      this.loadings = true;
+      this.submitText = "导入中";
+      this.$http
+        .post("cardDevice/import", { url: url, depart_id: depart_id })
+        .then((response) => {
+          if (response.data.error) {
+            this.$message.error(response.data.msg);
+          } else {
+            this.$message.success(response.data);
+          }
+          this.excel_url = "";
+          this.selectedDepartId = "";
+          this.$refs.upload.clearFiles();
+          this.loadings = false;
+          this.submitText = "确定";
+          this.uploadDialogVisible = false;
+          this.getList();
+        });
+    },
+  },
+  watch: {
+    // 监听复选框配置列所有的变化
+    checkList: {
+      handler: function (newnew, oldold) {
+        // console.log(newnew);
+        this.showColumn = newnew;
+        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
+        this.$nextTick(() => {
+          this.$refs.multipleTable.doLayout();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    word: function () {
+      if (this.searchDisplay == false) {
+        //对文字进行处理
+        return "展开";
+      } else {
+        return "收起";
+      }
+    },
+  },
+  mounted() {
+    // this.getIsUseVoice();
+    this.$nextTick(function () {
+      this.searchDis();
+    });
+    // 发请求得到checkListInitData的列的名字
+    if (localStorage.getItem("storageEquSet")) {
+      this.checkList = JSON.parse(localStorage.getItem("storageEquSet"));
+    } else {
+      this.checkList = {
+        material_number: true,
+        classification: true,
+        equ_type_name:true,
+        name:true,
+        equipment_model: true,
+        issue_unit: true,
+        fixed_asset_number:true,
+        fixed_asset_number2: true,
+        serial_number: true,
+        factory_number:true,
+        check_last_time:true,
+        check_next_time:true,
+        check_status1:true,
+        status1: true,
+      };
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+
+ @import "@/views/device/hyd_equipment/index.scss";
+ @import "@/views/device/hyd_equipment/alarm.scss";
+ 
+</style>

src/views/device/hyd_equipment/checkDetail.vue

@@ -105,19 +105,24 @@
   };
 </script>
 <style scoped>
-.table {
-  margin: 0 auto;
+
+.back-color {
+  background: black;
 }
+
 .detail-item {
   width: 100%;
   padding: 15px 0px;
   list-style-type: none;
+
 }
+
 .item {
   font-size: 14px;
-  color: black;
+  color: #FFF;
   margin-top: 5px;
 }
+
 .el-table .warning-row {
   background: oldlace !important;
 }
@@ -125,8 +130,9 @@
 .el-table .success-row {
   background: #f0f9eb !important;
 }
-.pagination-container{
-  padding-left:25px;
-  padding-right:25px;
+
+.pagination-container {
+  padding-left: 25px;
+  padding-right: 25px;
 }
 </style>

src/views/work_record/work_plan/detail.vue

@@ -375,16 +375,19 @@ export default {
 };
 </script>
 <style scoped>
+
 .detail-item {
   width: 100%;
   padding: 15px 0px;
   list-style-type: none;
 }
+
 .item {
   font-size: 14px;
-  color: black;
+  color: #FFF;
   margin-top: 5px;
 }
+
 .el-table .warning-row {
   background: oldlace !important;
 }
@@ -392,16 +395,10 @@ export default {
 .el-table .success-row {
   background: #f0f9eb !important;
 }
-::v-deep .el-drawer{
-  overflow: scroll !important;
-}
 
-.search_title {
-  font-size: 12px;
-  color: #6a6a6a;
-}
-.chart{
-  width: 500px;
+.pagination-container {
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 </style>

src/views/work_record/worklocation/detail.vue

@@ -426,16 +426,19 @@ export default {
 };
 </script>
 <style scoped>
+
 .detail-item {
   width: 100%;
   padding: 15px 0px;
   list-style-type: none;
 }
+
 .item {
   font-size: 14px;
-  color: black;
+  color: #FFF;
   margin-top: 5px;
 }
+
 .el-table .warning-row {
   background: oldlace !important;
 }
@@ -443,16 +446,10 @@ export default {
 .el-table .success-row {
   background: #f0f9eb !important;
 }
-::v-deep .el-drawer{
-  overflow: scroll !important;
-}
 
-.search_title {
-  font-size: 12px;
-  color: #6a6a6a;
-}
-.chart{
-  width: 500px;
+.pagination-container {
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 </style>