batchlink.vue 10.0 KB

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