batchlink.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. <template>
  2. <div class="box">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <span class="statistics-title">发现未关联资产的设备:<b>{{unlinkNumber}}</b></span>
  7. <span class="statistics-title">可在此功能中批量关联的:<b>{{linkNumber}}</b></span>
  8. <el-button style="float:right;margin-top:1px;" @click="handleClickCreate">保存选定的设备资产关联关系</el-button>
  9. <el-button v-show="Object.keys(radio).length" style="float:right;margin-top:1px;margin-right:15px;" @click="handleClickReset">重置</el-button>
  10. </div>
  11. <div class="main">
  12. <el-table ref="multipleTable" :data="tableData" v-loading='loading' stripe height="100%" :span-method="objectSpanMethod">
  13. <el-table-column prop="EquipLocalName" label="设备本地名称" show-overflow-tooltip max-width="150">
  14. <!-- <template slot-scope="scope">{{ scope.row.EquipLocalName?scope.row.EquipLocalName:scope.row.EquipName }}</template> -->
  15. </el-table-column>
  16. <el-table-column prop="EquipLocalID" label="设备本地编码" show-overflow-tooltip max-width="150">
  17. <!-- <template slot-scope="scope">{{ scope.row.EquipLocalID?scope.row.EquipLocalID:scope.row.EquipID }}</template> -->
  18. </el-table-column>
  19. <el-table-column prop="Category" label="设备类" show-overflow-tooltip width="100"></el-table-column>
  20. <el-table-column prop="CADID" label="设计图纸中编码" show-overflow-tooltip max-width="150"></el-table-column>
  21. <el-table-column label="所属建筑楼层">
  22. <template slot-scope="scope">{{ scope.row.BuildingId }}-{{ scope.row.FloorId }}</template>
  23. </el-table-column>
  24. <el-table-column prop="PropertyItem.EquipLocalName" label="资产本地名称" show-overflow-tooltip max-width="150">
  25. <!-- <template slot-scope="scope">{{ scope.row.AssetsLocalName }}</template> -->
  26. </el-table-column>
  27. <el-table-column prop="PropertyItem.EquipLocalID" label="资产本地编码" show-overflow-tooltip max-width="150">
  28. <!-- <template slot-scope="scope">{{ scope.row.AssetsLocalId }}</template> -->
  29. </el-table-column>
  30. <el-table-column prop="PropertyItem.Family" label="设备族" show-overflow-tooltip width="100"></el-table-column>
  31. <el-table-column prop="PropertyItem.CADID" label="设计图纸中编码" show-overflow-tooltip max-width="150"></el-table-column>
  32. <el-table-column label="所属建筑楼层" show-overflow-tooltip width="200">
  33. <template slot-scope="scope">{{ scope.row.PropertyItem.BuildingId }}-{{ scope.row.PropertyItem.FloorId }}</template>
  34. </el-table-column>
  35. <el-table-column prop="address" label="操作" width="100">
  36. <template slot-scope="scope">
  37. <el-radio v-model="radio[scope.row.EquipID]" :label="scope.row.PropertyItem.EquipID" :disabled="scope.row.disabled" @change="handleChangeLink(scope.row)">&nbsp;</el-radio>
  38. </template>
  39. </el-table-column>
  40. </el-table>
  41. </div>
  42. <!-- <div class=footer>
  43. <el-pagination
  44. class="right"
  45. v-show="tableData && tableData.length"
  46. @size-change="handleSizeChange"
  47. @current-change="handleCurrentChange"
  48. :current-page="page.pageNumber"
  49. :page-sizes="page.pageSizes"
  50. :page-size="page.pageSize"
  51. layout="total, sizes, prev, pager, next, jumper"
  52. :total="page.total">
  53. </el-pagination>
  54. </div> -->
  55. </div>
  56. </div>
  57. </template>
  58. <script>
  59. import { mapGetters } from "vuex"
  60. //api
  61. import { countEquip, equipCategoryProperty, equipRproperty } from "@/api/scan/request";
  62. export default {
  63. components: {
  64. },
  65. computed: {
  66. ...mapGetters("layout", ["projectId", "userId", "secret"])
  67. },
  68. created() {
  69. this.params = this.$route.params
  70. this.getTableData()
  71. },
  72. data() {
  73. return {
  74. params: {},
  75. loading: false,
  76. unlinkNumber: 0,
  77. linkNumber: 0,
  78. page: {
  79. pageSize: 50,
  80. pageSizes: [10, 20, 50, 100],
  81. pageNumber: 1,
  82. total: 0
  83. },
  84. radio: {},
  85. tableData: [],
  86. mergeCol: []
  87. }
  88. },
  89. methods: {
  90. //获取表格数据
  91. getTableData() {
  92. this.loading = true
  93. this.tableData = []
  94. let param = this.formatFilter()
  95. equipCategoryProperty(param, res => {
  96. this.unlinkNumber = res.Total
  97. this.linkNumber = res.Content.length
  98. // this.page.total = res.Total
  99. res.Content.forEach(item =>{
  100. if(item.PropertyList && item.PropertyList.length){
  101. item.PropertyList.forEach((Assets, index) => {
  102. let obj = JSON.parse(JSON.stringify(Object.assign(item, {PropertyItem: Assets, disabled: false})))
  103. delete obj.PropertyList
  104. this.tableData.push(obj)
  105. if(index == 0){
  106. this.mergeCol.push(item.PropertyList.length)
  107. } else {
  108. this.mergeCol.push(false)
  109. }
  110. })
  111. }
  112. })
  113. this.loading = false
  114. })
  115. },
  116. //格式化条件
  117. formatFilter() {
  118. let param = {
  119. data: {
  120. // Cascade: [
  121. // {
  122. // Name: "equipCategory",
  123. // Projection: ["EquipCode", "EquipName"]
  124. // },
  125. // {
  126. // Name: "building",
  127. // Projection: [ "BuildLocalName", "BuildName", "BuildID" ]
  128. // },
  129. // {
  130. // Name: "floor",
  131. // Projection: [ "FloorLocalName", "FloorName", "FloorID" ]
  132. // }
  133. // ],
  134. Orders: "createTime desc, EquipID asc"
  135. // PageNumber: this.page.pageNumber,
  136. // PageSize: this.page.pageSize
  137. },
  138. category: this.params.deviceType
  139. }
  140. if (this.params.buildFloor[0] == "noKnow") {
  141. param.data.Filters = `buildingId isNull`
  142. } else if (this.params.buildFloor[0] && this.params.buildFloor[0] != "all") {
  143. param.data.Filters = `buildingId='${this.params.buildFloor[0]}'`
  144. if (this.params.buildFloor[1] == "noKnow") {
  145. param.data.Filters += `;floorId isNull`
  146. } else if (this.params.buildFloor[1] && this.params.buildFloor[1] != "all") {
  147. param.data.Filters += `;floorId='${this.params.buildFloor[1]}'`
  148. }
  149. }
  150. if(this.params.hasOwnProperty('spaceList')){
  151. if(typeof this.params.spaceList == 'string'){
  152. param.spaceIdList = `&spacrType=${this.params.spaceList}`
  153. } else {
  154. let spaceIdList = ''
  155. this.params.spaceList.forEach(item => {
  156. spaceIdList += `&spaceIdList=${item}`
  157. })
  158. param.spaceIdList = spaceIdList
  159. }
  160. }
  161. return param
  162. },
  163. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  164. if (columnIndex < 5) {
  165. if (this.mergeCol[rowIndex]) {
  166. return {
  167. rowspan: this.mergeCol[rowIndex],
  168. colspan: 1
  169. };
  170. } else {
  171. return {
  172. rowspan: 0,
  173. colspan: 1
  174. };
  175. }
  176. }
  177. },
  178. //切换关联
  179. handleChangeLink(row) {
  180. this.tableData.forEach(item => {
  181. item.disabled = false
  182. if(Object.keys(this.radio).length){
  183. for(let key in this.radio){
  184. if(item.EquipID != key && item.PropertyItem.EquipID == this.radio[key]){
  185. item.disabled = true
  186. }
  187. }
  188. }
  189. })
  190. },
  191. //重置关联选择
  192. handleClickReset() {
  193. this.tableData.forEach(item => {
  194. item.disabled = false
  195. })
  196. this.radio = {}
  197. },
  198. //创建已选
  199. handleClickCreate() {
  200. let params = {
  201. Content: []
  202. }
  203. if(Object.keys(this.radio).length){
  204. for(let key in this.radio){
  205. params.Content.push({
  206. EquipId: this.radio[key],
  207. EquipmentId: key
  208. })
  209. }
  210. equipRproperty(params, res => {
  211. this.radio = {}
  212. this.getTableData()
  213. this.$message.success('关联成功!')
  214. })
  215. } else {
  216. this.$message.info('请选择要关联的关系!')
  217. }
  218. },
  219. //切换每页显示多少条数据
  220. // handleSizeChange(val) {
  221. // this.page.pageSize = val
  222. // this.getTableData()
  223. // },
  224. //切换页数
  225. // handleCurrentChange(val) {
  226. // this.page.pageNumber = val
  227. // this.getTableData()
  228. // },
  229. //返回
  230. goBack() {
  231. this.$router.push({ name: "facilityLedger" })
  232. }
  233. },
  234. watch: {
  235. projectId() {
  236. this.$router.push({ name: "facilityLedger" })
  237. }
  238. }
  239. };
  240. </script>
  241. <style scoped lang='less'>
  242. .box {
  243. .condition {
  244. padding: 10px;
  245. display: flex;
  246. height: 100%;
  247. flex-direction: column;
  248. border: 1px solid #dfe6ec;
  249. background: #fff;
  250. margin-bottom: 10px;
  251. .header{
  252. padding-bottom: 10px;
  253. border-bottom: 1px solid #bcbcbc;
  254. .statistics-title{
  255. margin-left: 20px;
  256. line-height: 32px;
  257. }
  258. }
  259. .main{
  260. margin-top: 10px;
  261. height: calc(100% - 96px);
  262. }
  263. }
  264. }
  265. </style>
  266. <style lang="less">
  267. .el-table th {
  268. background-color: #d9d9d9;
  269. color: #000;
  270. }
  271. </style>