batchlink.vue 10 KB

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