batchlink.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  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" :header-cell-style="headerStyle">
  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. headerStyle: {
  88. backgroundColor: '#e1e4e5',
  89. color: '#2b2b2b',
  90. lineHeight: '30px'
  91. }, // 列表样式
  92. }
  93. },
  94. methods: {
  95. //获取表格数据
  96. getTableData() {
  97. this.loading = true
  98. this.tableData = []
  99. let param = this.formatFilter()
  100. equipCategoryProperty(param, res => {
  101. this.unlinkNumber = res.Total
  102. this.linkNumber = res.Content.length
  103. // this.page.total = res.Total
  104. res.Content.forEach(item =>{
  105. if(item.PropertyList && item.PropertyList.length){
  106. item.PropertyList.forEach((Assets, index) => {
  107. let obj = JSON.parse(JSON.stringify(Object.assign(item, {PropertyItem: Assets, disabled: false})))
  108. delete obj.PropertyList
  109. this.tableData.push(obj)
  110. if(index == 0){
  111. this.mergeCol.push(item.PropertyList.length)
  112. } else {
  113. this.mergeCol.push(false)
  114. }
  115. })
  116. }
  117. })
  118. this.loading = false
  119. })
  120. },
  121. //格式化条件
  122. formatFilter() {
  123. let param = {
  124. data: {
  125. // Cascade: [
  126. // {
  127. // Name: "equipCategory",
  128. // Projection: ["EquipCode", "EquipName"]
  129. // },
  130. // {
  131. // Name: "building",
  132. // Projection: [ "BuildLocalName", "BuildName", "BuildID" ]
  133. // },
  134. // {
  135. // Name: "floor",
  136. // Projection: [ "FloorLocalName", "FloorName", "FloorID" ]
  137. // }
  138. // ],
  139. Orders: "createTime desc, EquipID asc",
  140. PageNumber: 1,
  141. PageSize: 1000
  142. },
  143. category: this.params.deviceType
  144. }
  145. if (this.params.buildFloor[0] == "noKnow") {
  146. param.data.Filters = `buildingId isNull`
  147. } else if (this.params.buildFloor[0] && this.params.buildFloor[0] != "all") {
  148. param.data.Filters = `buildingId='${this.params.buildFloor[0]}'`
  149. if (this.params.buildFloor[1] == "noKnow") {
  150. param.data.Filters += `;floorId isNull`
  151. } else if (this.params.buildFloor[1] && this.params.buildFloor[1] != "all") {
  152. param.data.Filters += `;floorId='${this.params.buildFloor[1]}'`
  153. }
  154. }
  155. if(this.params.hasOwnProperty('spaceList')){
  156. if(typeof this.params.spaceList == 'string'){
  157. param.spaceIdList = `&spacrType=${this.params.spaceList}`
  158. } else {
  159. let spaceIdList = ''
  160. this.params.spaceList.forEach(item => {
  161. spaceIdList += `&spaceIdList=${item}`
  162. })
  163. param.spaceIdList = spaceIdList
  164. }
  165. }
  166. return param
  167. },
  168. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  169. if (columnIndex < 5) {
  170. if (this.mergeCol[rowIndex]) {
  171. return {
  172. rowspan: this.mergeCol[rowIndex],
  173. colspan: 1
  174. };
  175. } else {
  176. return {
  177. rowspan: 0,
  178. colspan: 1
  179. };
  180. }
  181. }
  182. },
  183. //切换关联
  184. handleChangeLink(row) {
  185. this.tableData.forEach(item => {
  186. item.disabled = false
  187. if(Object.keys(this.radio).length){
  188. for(let key in this.radio){
  189. if(item.EquipID != key && item.PropertyItem.EquipID == this.radio[key]){
  190. item.disabled = true
  191. }
  192. }
  193. }
  194. })
  195. },
  196. //重置关联选择
  197. handleClickReset() {
  198. this.tableData.forEach(item => {
  199. item.disabled = false
  200. })
  201. this.radio = {}
  202. },
  203. //创建已选
  204. handleClickCreate() {
  205. let params = {
  206. Content: []
  207. }
  208. if(Object.keys(this.radio).length){
  209. for(let key in this.radio){
  210. params.Content.push({
  211. EquipId: this.radio[key],
  212. EquipmentId: key
  213. })
  214. }
  215. equipRproperty(params, res => {
  216. this.radio = {}
  217. this.getTableData()
  218. this.$message.success('关联成功!')
  219. })
  220. } else {
  221. this.$message.info('请选择要关联的关系!')
  222. }
  223. },
  224. //切换每页显示多少条数据
  225. // handleSizeChange(val) {
  226. // this.page.pageSize = val
  227. // this.getTableData()
  228. // },
  229. //切换页数
  230. // handleCurrentChange(val) {
  231. // this.page.pageNumber = val
  232. // this.getTableData()
  233. // },
  234. //返回
  235. goBack() {
  236. this.$router.push({ name: "facilityLedger" })
  237. }
  238. },
  239. watch: {
  240. projectId() {
  241. this.$router.push({ name: "facilityLedger" })
  242. }
  243. }
  244. };
  245. </script>
  246. <style scoped lang='less'>
  247. .box {
  248. .condition {
  249. padding: 10px;
  250. display: flex;
  251. height: 100%;
  252. flex-direction: column;
  253. border: 1px solid #dfe6ec;
  254. background: #fff;
  255. .header{
  256. padding-bottom: 10px;
  257. border-bottom: 1px solid #bcbcbc;
  258. .statistics-title{
  259. margin-left: 20px;
  260. line-height: 32px;
  261. }
  262. }
  263. .main{
  264. margin-top: 10px;
  265. height: calc(100% - 46px);
  266. }
  267. }
  268. }
  269. </style>
  270. <style lang="less">
  271. .el-table th {
  272. background-color: #d9d9d9;
  273. color: #000;
  274. }
  275. </style>