Bläddra i källkod

添加竖井页面

zhangyu 5 år sedan
förälder
incheckning
ab650056f0

+ 7 - 1
src/api/scan/request.js

@@ -1,5 +1,5 @@
 import fetch from './fetch'
-import { api, physics, business, venders } from './config'
+import { api, physics, business, venders } from './config.js'
 import http from './httpUtil'
 let arithmetic = '/arithmetic'
 
@@ -728,6 +728,12 @@ export function delBatchList(param, success) {
     http.postJson(url, data, success)
 }
 
+//台账获取竖井类型
+export function getCenoteType(param, success) {
+    let url = `${api}/datacenter/shaft/queryShaftFuncType?projectId=${param.ProjId}&secret=${param.secret}`
+    let data = param.data
+    http.postJson(url, data, success)
+}
 
 //扫楼创建资产
 export function createFmList(param, success) {

+ 4 - 2
src/assets/css/chosen.css

@@ -41,7 +41,8 @@ This file is generated by `grunt build`, do not edit it by hand.
     background: #fff;
     -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
     box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-    display: none
+    display: none;
+    box-sizing: border-box;
 }
 
 .chosen-container.chosen-with-drop .chosen-drop {
@@ -166,7 +167,8 @@ This file is generated by `grunt build`, do not edit it by hand.
     font-size: 1em;
     font-family: sans-serif;
     line-height: normal;
-    border-radius: 0
+    border-radius: 0;
+    box-sizing: border-box;
 }
 
 .chosen-container-single .chosen-drop {

+ 3 - 4
src/components/ledger/handsontables/device.vue

@@ -1036,8 +1036,7 @@ export default {
       this.messKey = val
       this.systemId = infos.id
       if (val == "caozuo") {
-         window.open(`
-http://47.94.89.44:8058/spread?id=${infos.id}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
+         window.open(`http://47.94.89.44:8058/spread?id=${infos.id}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
         // this.iframeSrc =
         //   process.env.BASE_URL +
         //   ":8889/#/details?perjectId=" +
@@ -1072,9 +1071,9 @@ http://47.94.89.44:8058/spread?id=${infos.id}&pid=${this.projectId}&secret=${thi
       }
 
       if (val == "linkName" && this.onlyRead) {
-        this.$router.push({ name: 'partsLedger'});
+        this.$router.push({ name: 'partsLedger', params: { facilityId: infos.id }});
       } else if (val == "linkName" && !this.onlyRead) {
-        this.$router.push({ name: 'partsLedger'});
+        this.$router.push({ name: 'partsmanageLedger', params: { facilityId: infos.id }});
       }
 
       if (val == "infos.Pic") {

+ 145 - 0
src/components/ledger/lib/cenoteType.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="cascaderMap">
+    <span class="buildFloor" style="margin-right: 12px;">竖井类型</span>
+    <el-cascader
+      placeholder="请选择"
+      :options="options"
+      v-model="onlyRead"
+      :props="props"
+      filterable
+      :style="isWidth ? '' : 'width:160px;'"
+      size="small"
+      @change="changeVal"
+      change-on-select
+    ></el-cascader>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+import { getEqCode } from "@/api/scan/request";
+export default {
+  name: "getCode",
+  props: {
+    isWidth: {
+      type: Boolean,
+      default: true
+    },
+    isAll: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  data() {
+    return {
+      value: [""],
+      props: {
+        value: "code",
+        label: "facility"
+      },
+      falg: true,
+      content: []
+    };
+  },
+  created() {
+    this.getData();
+  },
+  watch: {
+    projectId() {
+      this.value = [""];
+    }
+  },
+  methods: {
+    setValue(val) {
+      this.value = val;
+    },
+    //修改val
+    changeVal(val) {
+      let value = {};
+      this.options.map(item => {
+        if (item.code == val) {
+          value = item;
+        }
+      });
+      this.value = val;
+      this.$emit("change", value);
+    },
+    async getData() {
+      await getEqCode().then(res => {
+        if (this.isAll) {
+          let data = this.changeArr(res.data.Content);
+          data.unshift({
+            code: "all",
+            facility: "全部"
+          });
+          this.options = data;
+          console.log(this.options, "options");
+          this.value = ["all"];
+        } else {
+          this.options = this.changeArr(res.data.Content);
+        }
+        if (!!this.value && this.value.length) {
+          let value = {};
+          this.options.map(item => {
+            if (item.code == this.value[0]) {
+              value = item;
+            }
+          });
+          this.$emit("change", value);
+        }
+        if (!this.falg) {
+          this.changeList();
+        }
+      });
+    },
+    changeArr(arr) {
+      let data = [];
+      arr.map(item => {
+        if (item.content && item.content.length) {
+          return item.content.map(children => {
+            if (children.content && children.content.length) {
+              return children.content.map(i => {
+                data.push(i);
+              });
+            }
+          });
+        }
+      });
+      return data;
+    },
+
+    pushData(content) {
+      this.content = content;
+      if (this.options.length) {
+        this.falg = true;
+        this.changeList();
+      } else {
+        this.falg = false;
+      }
+    },
+
+    changeList() {
+      this.options.map(item => {
+        item.disabled = true;
+        this.content.map(child => {
+          if (item.code == child) {
+            item.disabled = false;
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#cascaderMap {
+  float: left;
+  margin-left: 10px;
+  .buildFloor {
+    color: #999999;
+    font-size: 14px;
+  }
+}
+</style>

+ 16 - 5
src/router/system.js

@@ -33,11 +33,16 @@ import systemLedger from '@/views/ledger/system/index'
 import dialogAssets from '@/views/ledger/system/addsystem'
 import facilityLedger from '@/views/ledger/facility/index'
 import partsLedger from '@/views/ledger/facility/parts/index'
+import partsmanageLedger from '@/views/ledger/facility/partsmanage/index'
 import dialogDevice from '@/views/ledger/facility/addfacility'
 import propertyLedger from '@/views/ledger/property/index'
 import dialogSystem from '@/views/ledger/property/addproperty'
+import cenotelist from '@/views/ledger/cenotelist/index' //竖井清单
 import auth from '@/views/system/auth'
 
+/** 租户管理 */
+import rentlist from '@/views/rent/rentlist'
+
 
 export default [
     { path: '/', name: '', component: LayoutMain, children: [{ path: '', name: 'blank', component: Dasboard }] },
@@ -149,7 +154,13 @@ export default [
                 path: 'parts',
                 name: 'partsLedger',
                 component: partsLedger,
-                meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/parts' }, { label: '设备清单 / 包含的部件' }] }
+                meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/facility' }, { label: '设备清单 / 包含的部件' }] }
+            },
+            {
+                path: 'partsmanage',
+                name: 'partsmanageLedger',
+                component: partsmanageLedger,
+                meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/facility' }, { label: '设备清单 / 管理部件' }] }
             },
             {
                 path: 'facility/addfacility',
@@ -171,8 +182,8 @@ export default [
 
             {
                 path: 'cenotelist',
-                name: 'Dasboard',
-                component: Dasboard,
+                name: 'cenotelist',
+                component: cenotelist,
                 meta: { keepAlive: false, breadcrumbs: [{ label: '台账管理', path: '/ledger/facility' }, { label: '竖井清单' }] }
             },
             {
@@ -219,8 +230,8 @@ export default [
             { path: '', name: 'Dasboard', component: Dasboard },
             {
                 path: 'rentlist',
-                name: 'Dasboard',
-                component: Dasboard,
+                name: 'rentlist',
+                component: rentlist,
                 meta: { keepAlive: false, breadcrumbs: [{ label: '租户管理', path: '/rent/rentlist' }, { label: '租户清单' }] }
             }
         ]

+ 251 - 0
src/views/ledger/cenotelist/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div id="deviceList">
+    <div class="search-header">
+      <cenote-type @change="changeFloor"></cenote-type>
+    </div>
+    <el-row class="right">
+      <span style="float:left;">当前筛选条件下共{{page.total || '--'}}设备</span>
+      <el-checkbox v-show="onlyRead" v-model="allMess">只看要采集的信息</el-checkbox>
+      <el-checkbox v-show="!onlyRead" v-model="isWatch">隐藏自动填充的信息点</el-checkbox>
+      <el-select v-model="onlyRead">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-button>添加竖井</el-button>
+      <el-button>刷新</el-button>
+      <el-button v-show="!onlyRead">撤销</el-button>
+    </el-row>
+    <div class="tableBox">
+      <div class="tableLeft">
+        <handson-table ref="table"></handson-table>
+      </div>
+      <div class="tableRight">
+
+      </div>
+    </div>
+    <el-pagination
+      class="center"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="page.pageNumber"
+      :page-sizes="page.pageSizes"
+      :page-size="page.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="page.total">
+    </el-pagination>
+  </div>
+</template>
+<script>
+import cenoteType from "@/components/ledger/lib/cenoteType";
+import hansonTable from "@/components/common/handsontable";
+import { getCenoteType, getGraphyId, getEquipmentFamily } from "@/api/scan/request"
+import { mapGetters, mapActions } from "vuex";
+export default {
+  components: {
+    cenoteType,
+    hansonTable
+  },
+  data() {
+    return {
+      options: [{
+        value: true,
+        label: '只读模式'
+      }, {
+        value: false,
+        label: '编辑模式'
+      }],
+      onlyRead: true,
+      allMess: true,
+      isWatch:true,
+      page: {
+        pageSize: 20,
+        pageSizes: [10, 20, 50, 100],
+        pageNumber: 1,
+        total: 400
+      },
+      param: {
+        buildId: "",
+        floorId: "",
+        deviceId: "",
+        ProjId: "",
+        secret: ""
+      },
+      assetGroupList: [],
+      graphyId: null
+    };
+  },
+  computed: {
+    ...mapGetters("layout", [
+        "projectId",
+        "secret",
+        "userId"
+    ])
+  },
+  created() {
+    this.param.ProjId = this.projectId
+    this.param.secret = this.secret
+    this.handleGetCenoteType()
+    // this.getProjName()
+  },
+  watch: {
+      projectId() {
+          this.param.ProjId = this.projectId;
+          // this.getProjName()
+      }
+  },
+  methods: {
+    handleGetCenoteType() {
+      let param = {
+        ProjId: this.projectId,
+        secret: this.secret,
+        data: {}
+      }
+      getCenoteType(param).then(res => {
+        if (res.data.Result == "success") {
+          debugger;
+        } else {
+          this.$message.error("请求失败:" + res.data.ResultMsg)
+        }
+      }).catch(_ => {
+        this.$message.error("请求失败")
+      })
+    },
+    // getProjName() {
+    //   let param = {
+    //     list: [{ id: this.param.ProjId }],
+    //     perjectId: this.param.ProjId,
+    //     secret: this.param.secret,
+    //   }
+      // getSpaceName(param).then(res => {
+      //   if (res.data.Result == "success") {
+      //     this.mess.perjectName = res.data.Content[0].infos.ProjLocalName
+      //     this.getEqCode()
+      //   } else {
+      //     this.$message.error("请求失败:" + res.data.ResultMsg)
+      //   }
+      // }).catch(_ => {
+      //   this.$message.error("请求失败")
+      // })
+    // },
+    close(val) {
+      this.getEqCode()
+      console.log(val)
+      if(this.$refs.cascader)
+      this.$refs.cascader.changeVal([val.code])
+      //   this.$refs.tableMain.getHeaderData(this.param);
+    },
+    getEqCode() {
+      getEquipmentFamily(res => {
+        this.assetGroupList = res.Content
+        this.getGraphyId()
+      })
+    },
+    getFamilyList() {
+      let param = {
+        ProjId: this.param.ProjId,
+        secret: this.param.secret,
+        data: { type: "Eq" }
+      }
+      getFamilyList(param, res => {
+          if (this.$refs.cascader) {
+              this.$refs.cascader.pushData(res.Content)
+          }
+        
+      })
+    },
+    //获取header的list
+    // getNumber() {
+    //   let param = {
+    //     ProjId: this.param.ProjId,
+    //     secret: this.param.secret,
+    //     data: { type: "Eq" }
+    //   }
+    //   getNumber(param, res => {
+    //     console.log(res)
+    //     this.mess.name[0].num = res.content.count
+    //     this.mess.name[1].num = res.content.bindingCount
+    //     this.getFamilyList()
+    //   })
+    // },
+
+    getGraphyId() {
+      let param = {
+        ProjId: this.param.ProjId,
+        secret: this.param.secret,
+        type: "SystemEquip"
+      }
+      getGraphyId(param).then(res => {
+        if (res.data.Result == "success") {
+          this.graphyId = res.data.graph_id
+          if(this.$refs.tableMain)
+          this.$refs.tableMain.setGraphyId(this.graphyId, this.assetGroupList);
+          // this.getNumber()
+        } else {
+          this.$message.error("请求错误:" + res.data.ResultMsg)
+        }
+      }).catch(_ => {
+        this.$message.error("请求错误")
+      })
+    },
+    //修改楼层
+    changeFloor(value) {
+      if (value[0]) {
+        this.param.buildId = value[0]
+      }
+      if (value[1]) {
+        this.param.floorId = value[1]
+      } else {
+        this.param.floorId = null
+      }
+      if (!!this.param.deviceId) {
+          if(this.$refs.tableMain)
+        this.$refs.tableMain.getHeaderData(this.param);
+      } else {
+        return;
+      }
+    },
+
+    //修改设备族
+    changeDevice(value) {
+      this.param.deviceId = value.code
+      this.param.name = value.facility
+      if (!!value) {
+          if(this.$refs.tableMain)
+        this.$refs.tableMain.getHeaderData(this.param);
+      } else {
+        return;
+      }
+
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#deviceList {
+  overflow: hidden;
+  height: 100%;
+  background-color: #f6f6f6;
+  position: relative;
+  .search-header {
+    overflow: hidden;
+    padding:0 10px 10px 10px;
+    border-bottom: 1px solid #bcbcbc;
+  }
+  .tableBox {
+    display: flex;
+    height: calc(100% - 130px);
+    .tableLeft {
+      flex: 2;
+    }
+    .tableRight {
+      flex: 1;
+      // display: none;
+      border-left: 1px solid #dadada;
+    }
+  }
+}
+</style>

+ 438 - 4
src/views/ledger/facility/parts/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="parts-tab">
-      <el-tabs v-model="partsId" @tab-click="handleClick">
+      <el-tabs v-model="partsId" @tab-click="handleTabClick">
         <el-tab-pane
           :label="item.name + ' ( ' + item.num + ' ) '"
           v-for="item in partsTypeList"
@@ -12,15 +12,30 @@
     </div>
     <el-row class="right">
       <el-checkbox v-model="checked">只看采集的信息</el-checkbox>
-      <el-button plain>刷新</el-button>
+      <el-button>刷新</el-button>
     </el-row>
     <div class="tableBox">
       <handson-table ref="table"></handson-table>
     </div>
+    <el-pagination
+      class="center"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="page.pageNumber"
+      :page-sizes="page.pageSizes"
+      :page-size="page.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="page.total">
+    </el-pagination>
   </div>
 </template>
 
 <script>
+import tools from "@/utils/scan/tools";
+import handsonUtils from "@/utils/hasontableUtils"
+import showTools from "@/utils/handsontable/notShow"
+import text from "@/utils/handsontable/mainText"
+
 import handsonTable from "@/components/common/handsontable";
 import { mapGetters, mapActions } from "vuex";
 
@@ -28,10 +43,19 @@ export default {
   components: {
     handsonTable
   },
+  props: {
+
+  },
   data() {
     return {
       partsId: "",
       tableExample: null,
+      page: {
+        pageSize: 20,
+        pageSizes: [10, 20, 50, 100],
+        pageNumber: 1,
+        total: 400
+      },
       tableData: [
         {
           operation: "查看详情",
@@ -42,6 +66,178 @@ export default {
           info3: "王靖",
           info4: "文强",
           info5: "小白"
+        }, {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },
+        {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        }, {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
         }
       ],
       tableHeader: ["信息1", "信息2", "信息3", "信息4", "信息5"],
@@ -89,9 +285,31 @@ export default {
   },
   mounted() {
     this.createTable();
+    this.partsId = this.partsTypeList[0].id;
   },
   methods: {
+    //获取表头
+    getHeaderData() {
+      this.changeCader()
+      if(this.mess.deviceId){
+          getTableHeader({
+            code: this.mess.deviceId,
+            ProjId: this.projectId
+        }).then(res => {
+            this.headers = res.data.Content;
+            this.getMain()
+        });
+      }
+      
+    },
     createTable() {
+      const params = {
+        Filters: `id=${this.partsId}`,
+        Orders: "",
+        PageNumber: this.page.pageNumber,
+        PageSize: this.page.pageSize,
+        Projection: []
+      }
       let settings = {
         data: this.tableData,
         colHeaders: this.header,
@@ -99,18 +317,234 @@ export default {
         rowHeights: 30,
         maxRows: this.tableData.length,
         fixedRowsTop: 1,
+        fixedColumnsLeft: 4,
         contextMenu: {
           items: {
             remove_row: {
               name: "删除设备"
             }
           }
-        }
+        },
+        // 事件
+        afterChange: this.tdChange, //修改后
+        afterFilter: this.trimmedRows, //排序前
+        afterRemoveRow: this.romoveFm, //右键删除
+        afterOnCellMouseDown: this.handleTdClick //鼠标点击
       };
       this.$nextTick(() => {
         console.log(this.$refs.table);
         this.tableExample = this.$refs.table.init(settings);
       });
+    },
+    handleTdClick(el, rowArr) { //点击表格的操作
+      //点击的是表头
+      if (rowArr.row < 0) {
+        return;
+      }
+      //被筛选过后的数组
+      let trimmedArr = this.trimmedRows();
+      //是否启用了排序
+      let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
+      if (trimmedArr.length && isSort) {
+        let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
+          .__arrayMap;
+        let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
+        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
+      } else if (isSort) {
+        //排序后的数组
+        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
+        let infos = this.tableData[sortArr[rowArr.row]];
+        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
+      } else if (trimmedArr.length) {
+        let infos = this.tableData[trimmedArr[rowArr.row]];
+        this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
+      } else {
+        let infos = this.tableData[rowArr.row];
+        this.getInfors(infos, rowArr);
+      }
+    },
+    //获取到了正确的信息
+    getInfors(infos, row) {
+      //其他的开始判断
+      let val = this.tableExample.colToProp(row.col);
+      this.row = row.row
+      this.messKey = val
+      this.systemId = infos.id
+      debugger;
+      if (val == "operation") {
+         window.open(`http://47.94.89.44:8058/spread?id=${infos.id}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
+        // this.iframeSrc =
+        //   process.env.BASE_URL +
+        //   ":8889/#/details?perjectId=" +
+        //   this.projectId +
+        //   "&secret=" +
+        //   this.secret +
+        //   "&FmId=" +
+        //   infos.id +
+        //   "&type=1&code=" +
+        //   infos.category.substring(2, 6);
+        // this.dialog.details = true
+      }
+
+      //图片弹窗
+      if (
+        val == "infos.InstallPic" ||
+        val == "infos.InstallDrawing" ||
+        val == "infos.Nameplate" ||
+        val == "infos.Drawing"
+      ) {
+        if (this.onlyRead) {
+          this.dialog.lookPic = true
+          this.picsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+        } else {
+          this.imgsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+          this.dialog.uploadImgs = true
+        }
+      }
+
+      if (val == "linkSystem") {
+        this.dialog.systemType = true
+      }
+
+      if (val == "linkName" && this.onlyRead) {
+        this.$router.push({ name: 'partsLedger'});
+      } else if (val == "linkName" && !this.onlyRead) {
+        this.$router.push({ name: 'partsLedger'});
+      }
+
+      if (val == "infos.Pic") {
+        this.picsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+        if (this.onlyRead) {
+          this.dialog.lookPic = true
+        } else {
+          this.dialog.pic = true
+        }
+      }
+      if (val == "infos.InsuranceFile" || val == "infos.Archive" || val == "infos.CheckReport") {
+        this.filesArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+        this.dialog.uploadFiles = true
+      }
+      if (val == "linkName" && this.linkNameFalg) {
+        this.category = this.tableData[row.row]
+        this.dialog.changeRea = true
+      }
+      if (val == "infos.EquipQRCode") {
+        this.qrcodeUrl = this.tableData[row.row].infos.EquipQRCode
+        if (!!this.qrcodeUrl) {
+          this.dialog.qrcode = true;
+        } else {
+          this.$message("此设备没有设备二维码")
+        }
+      }
+
+      if (this.onlyRead) {
+        return
+      }
+
+      if (val == "infos.DPManufacturerID") {
+        this.dialog.firm = true;
+      }
+
+      if (val == "infos.SupplierContractID") {
+        let falg = null
+        if (!!this.tableData[row.row].infos) {
+          if (!!this.tableData[row.row].infos.DPSupplierID) {
+            falg = this.tableData[row.row].infos.DPSupplierID.split("-")[0]
+          }
+        }
+        if (!!falg) {
+          this.id = falg
+          this.dialog.supply = true;
+        } else {
+          this.$message("请先选择供应商")
+        }
+      }
+
+      if (val == "infos.InsuranceNum") {
+        //选择保单
+        let falg = null
+        if (!!this.tableData[row.row].infos) {
+          if (!!this.tableData[row.row].infos.DPInsurerID) {
+            falg = this.tableData[row.row].infos.DPInsurerID.split("-")[0]
+          }
+        }
+        if (!!falg) {
+          this.id = falg
+          this.dialog.guarantee = true;
+        } else {
+          this.$message("请先选择保险商")
+        }
+      }
+
+      if (
+        val == "infos.DPSupplierID"
+      ) {
+        if (!!infos.linkId) {
+          this.dialog.supplier = true;
+        } else {
+          this.$message("该设备无关联资产")
+        }
+      }
+
+      if (val == "infos.DPMaintainerID") {
+        if (!!infos.linkId) {
+          this.dialog.maintainer = true;
+        } else {
+          this.$message("该设备无关联资产")
+        }
+      }
+
+      if (
+        val == "infos.DPInsurerID") {
+        if (!!infos.linkId) {
+          this.dialog.insurer = true;
+        } else {
+          this.$message("该设备无关联资产")
+        }
+      }
+    },
+    //获取被筛选掉的行号
+    trimmedRows() {
+      // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
+      var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
+      let dataLength = this.tableData.length;
+      let dataArr = new Array();
+      for (let i = 0; i < dataLength; i++) {
+        dataArr.push(i);
+      }
+      if (plugin.length <= 0) {
+        dataArr = undefined;
+      } else {
+        dataArr = this.array_diff(dataArr, plugin);
+      }
+      return dataArr || [];
+      // var DataArray = new Array();
+
+      // for (var i = 0; i < plugin.length; i++) {
+      //     // 通过行号获取数据
+      //     DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
+      // }
+    },
+    //去除数组中相同的元素
+    array_diff(a, b) {
+      for (var i = 0; i < b.length; i++) {
+        for (var j = 0; j < a.length; j++) {
+          if (a[j] == b[i]) {
+            a.splice(j, 1);
+            j = j - 1;
+          }
+        }
+      }
+      return a;
+    },
+    handleTabClick() { //切换部件时回调
+
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
     }
   },
   computed: {
@@ -124,7 +558,7 @@ export default {
         ...[
           {
             data: "operation",
-            color: "#128eee",
+            renderer: tools.lookDetails,
             readOnly: true
           },
           {

+ 589 - 0
src/views/ledger/facility/partsmanage/index.vue

@@ -0,0 +1,589 @@
+<template>
+  <div>
+    <div class="parts-tab">
+      <el-tabs v-model="partsId" @tab-click="handleTabClick">
+        <el-tab-pane
+          :label="item.name + ' ( ' + item.num + ' ) '"
+          v-for="item in partsTypeList"
+          :key="item.id"
+          :name="item.id"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+    <el-row class="right">
+      <el-checkbox v-model="checked">隐藏自动填充的信息</el-checkbox>
+      <el-button>添加部件</el-button>
+      <el-button>刷新</el-button>
+      <el-button>撤销</el-button>
+    </el-row>
+    <div class="tableBox">
+      <handson-table ref="table"></handson-table>
+    </div>
+    <el-pagination
+      class="center"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="page.pageNumber"
+      :page-sizes="page.pageSizes"
+      :page-size="page.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="page.total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import tools from "@/utils/scan/tools";
+import handsonUtils from "@/utils/hasontableUtils"
+import showTools from "@/utils/handsontable/notShow"
+import text from "@/utils/handsontable/mainText"
+
+import handsonTable from "@/components/common/handsontable";
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  components: {
+    handsonTable
+  },
+  props: {
+
+  },
+  data() {
+    return {
+      partsId: "",
+      tableExample: null,
+      page: {
+        pageSize: 20,
+        pageSizes: [10, 20, 50, 100],
+        pageNumber: 1,
+        total: 400
+      },
+      tableData: [
+        {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        }, {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },
+        {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        }, {
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        },{
+          operation: "查看详情",
+          demo1: "小龙",
+          demo2: "三娘",
+          info1: "阿党",
+          info2: "阿腾",
+          info3: "王靖",
+          info4: "文强",
+          info5: "小白"
+        }
+      ],
+      tableHeader: ["信息1", "信息2", "信息3", "信息4", "信息5"],
+      tableHeaderName: [
+        {
+          data: "info1"
+        },
+        {
+          data: "info2"
+        },
+        {
+          data: "info3"
+        },
+        {
+          data: "info4"
+        },
+        {
+          data: "info5"
+        }
+      ],
+      checked: true,
+      partsTypeList: [
+        {
+          id: "011A",
+          name: "部件A",
+          num: 12
+        },
+        {
+          id: "011B",
+          name: "部件B",
+          num: 5
+        },
+        {
+          id: "011C",
+          name: "部件C",
+          num: 8
+        },
+        {
+          id: "011AD",
+          name: "部件D",
+          num: 7
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.createTable();
+    this.partsId = this.partsTypeList[0].id;
+  },
+  methods: {
+    //获取表头
+    getHeaderData() {
+      this.changeCader()
+      if(this.mess.deviceId){
+          getTableHeader({
+            code: this.mess.deviceId,
+            ProjId: this.projectId
+        }).then(res => {
+            this.headers = res.data.Content;
+            this.getMain()
+        });
+      }
+      
+    },
+    createTable() {
+      const params = {
+        Filters: `id=${this.partsId}`,
+        Orders: "",
+        PageNumber: this.page.pageNumber,
+        PageSize: this.page.pageSize,
+        Projection: []
+      }
+      let settings = {
+        data: this.tableData,
+        colHeaders: this.header,
+        columns: this.type,
+        rowHeights: 30,
+        maxRows: this.tableData.length,
+        fixedRowsTop: 1,
+        fixedColumnsLeft: 4,
+        contextMenu: {
+          items: {
+            remove_row: {
+              name: "删除设备"
+            }
+          }
+        },
+        // 事件
+        afterChange: this.tdChange, //修改后
+        afterFilter: this.trimmedRows, //排序前
+        afterRemoveRow: this.romoveFm, //右键删除
+        afterOnCellMouseDown: this.handleTdClick //鼠标点击
+      };
+      this.$nextTick(() => {
+        console.log(this.$refs.table);
+        this.tableExample = this.$refs.table.init(settings);
+      });
+    },
+    handleTdClick(el, rowArr) { //点击表格的操作
+      //点击的是表头
+      if (rowArr.row < 0) {
+        return;
+      }
+      //被筛选过后的数组
+      let trimmedArr = this.trimmedRows();
+      //是否启用了排序
+      let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
+      if (trimmedArr.length && isSort) {
+        let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
+          .__arrayMap;
+        let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
+        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
+      } else if (isSort) {
+        //排序后的数组
+        let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
+        let infos = this.tableData[sortArr[rowArr.row]];
+        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
+      } else if (trimmedArr.length) {
+        let infos = this.tableData[trimmedArr[rowArr.row]];
+        this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
+      } else {
+        let infos = this.tableData[rowArr.row];
+        this.getInfors(infos, rowArr);
+      }
+    },
+    //获取到了正确的信息
+    getInfors(infos, row) {
+      //其他的开始判断
+      let val = this.tableExample.colToProp(row.col);
+      this.row = row.row
+      this.messKey = val
+      this.systemId = infos.id
+      debugger;
+      if (val == "operation") {
+         window.open(`http://47.94.89.44:8058/spread?id=${infos.id}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
+        // this.iframeSrc =
+        //   process.env.BASE_URL +
+        //   ":8889/#/details?perjectId=" +
+        //   this.projectId +
+        //   "&secret=" +
+        //   this.secret +
+        //   "&FmId=" +
+        //   infos.id +
+        //   "&type=1&code=" +
+        //   infos.category.substring(2, 6);
+        // this.dialog.details = true
+      }
+
+      //图片弹窗
+      if (
+        val == "infos.InstallPic" ||
+        val == "infos.InstallDrawing" ||
+        val == "infos.Nameplate" ||
+        val == "infos.Drawing"
+      ) {
+        if (this.onlyRead) {
+          this.dialog.lookPic = true
+          this.picsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+        } else {
+          this.imgsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+          this.dialog.uploadImgs = true
+        }
+      }
+
+      if (val == "linkSystem") {
+        this.dialog.systemType = true
+      }
+
+      if (val == "linkName" && this.onlyRead) {
+        this.$router.push({ name: 'partsLedger'});
+      } else if (val == "linkName" && !this.onlyRead) {
+        this.$router.push({ name: 'partsLedger'});
+      }
+
+      if (val == "infos.Pic") {
+        this.picsArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+        if (this.onlyRead) {
+          this.dialog.lookPic = true
+        } else {
+          this.dialog.pic = true
+        }
+      }
+      if (val == "infos.InsuranceFile" || val == "infos.Archive" || val == "infos.CheckReport") {
+        this.filesArr = this.tableData[row.row].infos ? (this.tableData[row.row].infos[val.split(".")[1]] ? this.tableData[row.row].infos[val.split(".")[1]] : []) : []
+        this.dialog.uploadFiles = true
+      }
+      if (val == "linkName" && this.linkNameFalg) {
+        this.category = this.tableData[row.row]
+        this.dialog.changeRea = true
+      }
+      if (val == "infos.EquipQRCode") {
+        this.qrcodeUrl = this.tableData[row.row].infos.EquipQRCode
+        if (!!this.qrcodeUrl) {
+          this.dialog.qrcode = true;
+        } else {
+          this.$message("此设备没有设备二维码")
+        }
+      }
+
+      if (this.onlyRead) {
+        return
+      }
+
+      if (val == "infos.DPManufacturerID") {
+        this.dialog.firm = true;
+      }
+
+      if (val == "infos.SupplierContractID") {
+        let falg = null
+        if (!!this.tableData[row.row].infos) {
+          if (!!this.tableData[row.row].infos.DPSupplierID) {
+            falg = this.tableData[row.row].infos.DPSupplierID.split("-")[0]
+          }
+        }
+        if (!!falg) {
+          this.id = falg
+          this.dialog.supply = true;
+        } else {
+          this.$message("请先选择供应商")
+        }
+      }
+
+      if (val == "infos.InsuranceNum") {
+        //选择保单
+        let falg = null
+        if (!!this.tableData[row.row].infos) {
+          if (!!this.tableData[row.row].infos.DPInsurerID) {
+            falg = this.tableData[row.row].infos.DPInsurerID.split("-")[0]
+          }
+        }
+        if (!!falg) {
+          this.id = falg
+          this.dialog.guarantee = true;
+        } else {
+          this.$message("请先选择保险商")
+        }
+      }
+
+      if (
+        val == "infos.DPSupplierID"
+      ) {
+        if (!!infos.linkId) {
+          this.dialog.supplier = true;
+        } else {
+          this.$message("该设备无关联资产")
+        }
+      }
+
+      if (val == "infos.DPMaintainerID") {
+        if (!!infos.linkId) {
+          this.dialog.maintainer = true;
+        } else {
+          this.$message("该设备无关联资产")
+        }
+      }
+
+      if (
+        val == "infos.DPInsurerID") {
+        if (!!infos.linkId) {
+          this.dialog.insurer = true;
+        } else {
+          this.$message("该设备无关联资产")
+        }
+      }
+    },
+    //获取被筛选掉的行号
+    trimmedRows() {
+      // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
+      var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
+      let dataLength = this.tableData.length;
+      let dataArr = new Array();
+      for (let i = 0; i < dataLength; i++) {
+        dataArr.push(i);
+      }
+      if (plugin.length <= 0) {
+        dataArr = undefined;
+      } else {
+        dataArr = this.array_diff(dataArr, plugin);
+      }
+      return dataArr || [];
+      // var DataArray = new Array();
+
+      // for (var i = 0; i < plugin.length; i++) {
+      //     // 通过行号获取数据
+      //     DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
+      // }
+    },
+    //去除数组中相同的元素
+    array_diff(a, b) {
+      for (var i = 0; i < b.length; i++) {
+        for (var j = 0; j < a.length; j++) {
+          if (a[j] == b[i]) {
+            a.splice(j, 1);
+            j = j - 1;
+          }
+        }
+      }
+      return a;
+    },
+    handleTabClick() { //切换部件时回调
+
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    }
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId", "secret", "userId"]),
+    header() {
+      this.tableHeader.unshift(...["操作", "关联的资产", "部件本地名称"]);
+      return this.tableHeader;
+    },
+    type() {
+      this.tableHeaderName.unshift(
+        ...[
+          {
+            data: "operation",
+            renderer: tools.lookDetails,
+            readOnly: true
+          },
+          {
+            data: "demo1"
+          },
+          {
+            data: "demo2"
+          }
+        ]
+      );
+      return this.tableHeaderName;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.tableBox {
+  height: calc(100% - 150px);
+}
+.parts-tab {
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+}
+</style>