deviceTable.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <template>
  2. <div class="table-container">
  3. <div class="table-list" :style="tableData && tableData.length?'height:calc(100% - 50px);':'height:100%;'">
  4. <el-table :data="tableData" style="width: 100%;" height="100%" v-loading="loading" :header-cell-style="headerStyle" >
  5. <el-table-column label="所属建筑楼层" show-overflow-tooltip min-width="100">
  6. <template slot-scope="scope">
  7. <div>
  8. {{ scope.row.building ? scope.row.building.localName ? scope.row.building.localName : '' : '' }} -
  9. {{ scope.row.floor ? scope.row.floor.localName ? scope.row.floor.localName : '' : '' }}
  10. </div>
  11. </template>
  12. </el-table-column>
  13. <el-table-column :label="`${inSpaceType}本地名称`" show-overflow-tooltip min-width="100">
  14. <template slot-scope="scope">
  15. <div>
  16. {{scope.row.localName}}
  17. <el-badge v-if="scope.row.component&&scope.row.component.length?true:false"
  18. :value="scope.row.component&&scope.row.component.length?scope.row.component.length:0"
  19. class="item" type="warning">
  20. </el-badge>
  21. </div>
  22. </template>
  23. </el-table-column>
  24. <el-table-column prop="localId" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
  25. <el-table-column prop="equipCategory.name" :label="`${inSpaceType}类型`" show-overflow-tooltip min-width="100"></el-table-column>
  26. <el-table-column prop="installLocation" label="安装位置" show-overflow-tooltip min-width="100"></el-table-column>
  27. <el-table-column prop="taskState" label="任务执行情况" show-overflow-tooltip min-width="100"></el-table-column>
  28. <el-table-column prop="action" label="操作" min-width="100">
  29. <template slot-scope="scope">
  30. <i v-if="scope.row.taskState == '待验证' || scope.row.taskState == '未找到'" title="查看详情" class="iconfont icon-xiangqing table-button" @click="handleDetail(scope.$index, scope.row)"></i>
  31. <i v-if="scope.row.taskState == '未找到'" title="重新生成任务" class="iconfont icon-Update table-button" @click="handleRegenerate(scope.$index, scope.row)"></i>
  32. <i v-if="scope.row.taskState == '待验证'" title="删除任务" class="iconfont icon-delete table-button" @click="handleDelete(scope.$index, scope.row)"></i>
  33. <i v-if="scope.row.taskState == '未找到'" title="认可此任务执行情况" class="iconfont icon-lijiqueren table-button" @click="handleConfirm(scope.$index, scope.row)"></i>
  34. </template>
  35. </el-table-column>
  36. <template slot="empty">
  37. <div style="height: 60%;transform: translateY(50%);">
  38. <i class="icon-wushuju iconfont"></i>
  39. 暂无数据
  40. </div>
  41. </template>
  42. </el-table>
  43. </div>
  44. <el-pagination class="right" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNumber"
  45. :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
  46. </el-pagination>
  47. <el-drawer title="任务详情" :visible.sync="drawer" direction="rtl" size="600px">
  48. <device-detail :detail="detailDevice" ref="deviceDetail"></device-detail>
  49. </el-drawer>
  50. </div>
  51. </template>
  52. <script>
  53. import { createDeviceTask, deleteDeviceTask, queryDeviceTask, updateDeviceTask } from "@/api/data_admin/buildTaskApi"
  54. import tools from "@/utils/tools"
  55. import { mapGetters } from "vuex"
  56. import deviceDetail from '../detail/deviceDetail'
  57. export default {
  58. components: {
  59. deviceDetail
  60. },
  61. computed: {
  62. ...mapGetters("layout", ["projectId", "userInfo"])
  63. },
  64. props: {
  65. paramsData: Object,
  66. },
  67. data() {
  68. return {
  69. inSpaceType: '设备',
  70. loading: false, // loading
  71. drawer: false, // 详情侧弹窗
  72. detailDevice: {},
  73. tableData: [], //列表数据
  74. page: {
  75. pageSize: 50,
  76. pageSizes: [10, 20, 50, 100],
  77. pageNumber: 1,
  78. total: 0
  79. },
  80. taskStateMap: {
  81. '-1': '未找到',
  82. '0': '已完成',
  83. '1': '待验证'
  84. },
  85. headerStyle: {
  86. backgroundColor: '#e1e4e5',
  87. color: '#2b2b2b',
  88. lineHeight: '30px'
  89. }, // 列表样式
  90. };
  91. },
  92. methods: {
  93. // 获取列表数据
  94. getTableData() {
  95. this.loading = true
  96. let params = {
  97. filters: `projectId='${this.projectId}'`,
  98. cascade: [
  99. {
  100. name: 'component'
  101. }, {
  102. name: 'scanScheme'
  103. }, {
  104. name: 'building',
  105. }, {
  106. name: 'floor',
  107. }, {
  108. name: 'equipCategory'
  109. }
  110. ],
  111. // orders: "createTime desc, taskId asc",
  112. orders: "createTime desc, id asc",
  113. pageNumber: this.page.pageNumber,
  114. pageSize: this.page.pageSize
  115. }
  116. if (this.paramsData.buildfloor[0] == "noKnow") {
  117. params.filters += `;buildingId isNull`
  118. } else if (this.paramsData.buildfloor[0] && this.paramsData.buildfloor[0] != "all") {
  119. params.filters += `;buildingId='${this.paramsData.buildfloor[0]}'`
  120. if (this.paramsData.buildfloor[1] == "noKnow") {
  121. params.filters += `;floorId isNull`
  122. } else if (this.paramsData.buildfloor[1] && this.paramsData.buildfloor[1] != "all") {
  123. params.filters += `;floorId='${this.paramsData.buildfloor[1]}'`
  124. }
  125. }
  126. if(this.paramsData.taskState !== ''){
  127. params.filters += `;taskState=${this.paramsData.taskState}`
  128. }
  129. if(this.paramsData.deviceCategory){
  130. params.filters += `;classCode='${this.paramsData.deviceCategory}'`
  131. }
  132. queryDeviceTask(params, res => {
  133. this.loading = false
  134. this.page.total = res.total;
  135. this.tableData = res.content.map(item => {
  136. if(item.component && item.component.length){
  137. item.ComponentCount = []
  138. item.component.map(parts => {
  139. // if(parts.EquipCategory && parts.EquipCategory.EquipCode && parts.EquipCategory.EquipName){
  140. // let index = item.ComponentCount.findIndex(c => {return c.code == parts.EquipCategory.EquipCode})
  141. // if(index != -1){
  142. // item.ComponentCount[index].count++
  143. // } else {
  144. // item.ComponentCount.push({
  145. // name: parts.EquipCategory.EquipName,
  146. // code: parts.EquipCategory.EquipCode,
  147. // count: 1
  148. // })
  149. // }
  150. // }
  151. if(parts.equipCategory && parts.equipCategory.code && parts.equipCategory.name){
  152. let index = item.ComponentCount.findIndex(c => {return c.code == parts.equipCategory.code})
  153. if(index != -1){
  154. item.ComponentCount[index].count++
  155. } else {
  156. item.ComponentCount.push({
  157. name: parts.equipCategory.name,
  158. code: parts.equipCategory.code,
  159. count: 1
  160. })
  161. }
  162. }
  163. })
  164. }
  165. item.taskState = this.taskStateMap[item.taskState]
  166. return item
  167. })
  168. })
  169. },
  170. // 删除关系
  171. handleDelete(index, row) {
  172. this.$confirm("确认删除该任务?", "提示", {
  173. confirmButtonText: '确定',
  174. cancelButtonText: '取消',
  175. type: 'warning'
  176. }).then(() => {
  177. let params = [{id: row.id}]
  178. deleteDeviceTask(params, res => {
  179. this.$message.success('删除成功')
  180. this.getTableData()
  181. })
  182. }).catch(() => {
  183. this.$message("取消删除")
  184. })
  185. },
  186. //重新生成任务
  187. handleRegenerate(index, row){
  188. let params = {
  189. content: [{
  190. equipId: row.equipId,
  191. taskState: -1,
  192. schemeId: row.schemeId
  193. }]
  194. }
  195. createDeviceTask(params, res => {
  196. this.$message.success('重新生成任务成功!')
  197. this.getTableData()
  198. this.$emit('upData')
  199. })
  200. },
  201. //认可此任务执行情况
  202. handleConfirm(index, row){
  203. let params = {
  204. content: [{
  205. confirmingPersonId: this.userInfo.userId,
  206. confirmingPersonName: this.userInfo.userName,
  207. id: row.id,
  208. taskState: 0
  209. }]
  210. }
  211. updateDeviceTask(params, res => {
  212. this.$message.success('更新成功!')
  213. this.getTableData()
  214. this.$emit('upData')
  215. })
  216. },
  217. //查看任务详情
  218. handleDetail(index, row) {
  219. this.drawer = true
  220. this.$nextTick(() => {
  221. this.detailDevice = row
  222. this.$refs.deviceDetail.handleContent(row)
  223. })
  224. },
  225. // 改变pagesize
  226. handleSizeChange(pageSize) {
  227. this.page.pageNumber = 1
  228. this.page.pageSize = pageSize;
  229. this.getTableData()
  230. },
  231. // 改变pageno
  232. handleCurrentChange(pageNo) {
  233. this.page.pageNumber = pageNo;
  234. this.getTableData()
  235. }
  236. },
  237. watch: {
  238. paramsData: {
  239. handler(newName, oldName) {
  240. if(!tools.isSimilarly(newName, oldName)){
  241. this.page.pageNumber = 1
  242. this.getTableData()
  243. }
  244. },
  245. immediate: true,
  246. deep: true
  247. },
  248. projectId() {
  249. this.page.pageNumber = 1
  250. this.getTableData()
  251. }
  252. }
  253. };
  254. </script>
  255. <style lang="less" scoped>
  256. /deep/ .el-drawer__body {
  257. height: calc(100% - 80px);
  258. border-top: 1px solid #c9c9c9;
  259. }
  260. /deep/ .el-drawer__header {
  261. margin-bottom: 12px;
  262. }
  263. /deep/ .el-badge__content{
  264. width: 20px;
  265. }
  266. .table-container {
  267. height: 100%;
  268. background: #fff;
  269. .table-button{
  270. cursor: pointer;
  271. margin-right: 15px;
  272. }
  273. }
  274. </style>