addDeviceTask.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  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. <floor-cascader ref="floorCascader" @change="changeFloor"></floor-cascader>
  7. <my-cascader ref="cascader" @change="changeDevice"></my-cascader>
  8. <el-input placeholder="请输入安装位置" style="width: 200px;margin-left:20px;" v-model="keycode" clearable @keyup.enter.native="getTableData">
  9. <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;" @click="getTableData"></i>
  10. </el-input>
  11. <el-button style="float:right;margin-top:1px;" @click="handleClickCreate">创建已选</el-button>
  12. </div>
  13. <div class="main" :style="tableData && tableData.length?'height: calc(100% - 96px);':'height: calc(100% - 46px);'">
  14. <el-table ref="multipleTable" :data="tableData" v-loading='loading' stripe height="100%" @selection-change="handleSelectionChange" :header-cell-style="headerStyle">
  15. <el-table-column type="selection" width="55"></el-table-column>
  16. <el-table-column type="expand">
  17. <template slot-scope="props">
  18. <p v-if="props.row.ComponentCount && props.row.ComponentCount.length" style="color:#99a9bf;line-height:32px;font-size:14px;">包含的部件:</p>
  19. <el-form label-position="left" label-width="auto" inline class="demo-table-expand" v-if="props.row.ComponentCount && props.row.ComponentCount.length">
  20. <el-form-item v-for="item in props.row.ComponentCount?props.row.ComponentCount:[]" :key="item.code" :label="`${item.name}:`">
  21. <span>{{ item.count }}</span>
  22. </el-form-item>
  23. </el-form>
  24. </template>
  25. </el-table-column>
  26. <el-table-column label="所属建筑楼层" width="200">
  27. <template slot-scope="scope">
  28. <div>
  29. {{scope.row.Building?scope.row.Building.BuildLocalName?scope.row.Building.BuildLocalName:'':''}} -
  30. {{scope.row.Floor?scope.row.Floor.FloorLocalName?scope.row.Floor.FloorLocalName:'':''}}
  31. </div>
  32. </template>
  33. </el-table-column>
  34. <el-table-column prop="EquipLocalName" label="设备本地名称" show-overflow-tooltip>
  35. <template slot-scope="scope">
  36. <div>
  37. {{scope.row.EquipLocalName}}
  38. <el-badge v-if="scope.row.Component&&scope.row.Component.length?true:false"
  39. :value="scope.row.Component&&scope.row.Component.length?scope.row.Component.length:0" class="item" type="warning">
  40. </el-badge>
  41. </div>
  42. </template>
  43. </el-table-column>
  44. <el-table-column prop="EquipLocalID" label="设备本地编码" show-overflow-tooltip width="200"></el-table-column>
  45. <el-table-column prop="EquipCategory.EquipName" label="设备类"></el-table-column>
  46. <el-table-column prop="LedgerParam.Siteinstall.InstallLocation" label="安装位置"></el-table-column>
  47. <el-table-column prop="type" label="现场验证操作规定" width="200">
  48. <template slot-scope="scope">
  49. <el-select style="width:100px;" v-model="scope.row.SchemeId" placeholder="请选择">
  50. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  51. </el-select>
  52. </template>
  53. </el-table-column>
  54. <template slot="empty">
  55. <div style="height: 60%;transform: translateY(50%);">
  56. <i class="icon-wushuju iconfont"></i>
  57. 数据暂无
  58. </div>
  59. </template>
  60. </el-table>
  61. </div>
  62. <div class=footer>
  63. <el-pagination
  64. class="right"
  65. v-show="tableData && tableData.length"
  66. @size-change="handleSizeChange"
  67. @current-change="handleCurrentChange"
  68. :current-page="page.pageNumber"
  69. :page-sizes="page.pageSizes"
  70. :page-size="page.pageSize"
  71. layout="total, sizes, prev, pager, next, jumper"
  72. :total="page.total">
  73. </el-pagination>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script>
  79. import { mapGetters } from "vuex"
  80. //组件
  81. import floorCascader from "@/components/ledger/lib/floorCascader"
  82. import myCascader from "@/components/ledger/lib/cascader"
  83. //api
  84. import { queryEquip } from "@/api/scan/request"
  85. import { createDeviceTask } from "@/api/data_admin/buildTaskApi"
  86. export default {
  87. data() {
  88. return {
  89. params: {},
  90. loading: false,
  91. keycode: '',
  92. page: {
  93. pageSize: 50,
  94. pageSizes: [10, 20, 50, 100],
  95. pageNumber: 1,
  96. total: 0
  97. },
  98. options: [{//方案
  99. value: '1',
  100. label: '极简'
  101. }, {
  102. value: '2',
  103. label: '标准'
  104. }],
  105. tableData: [],
  106. multipleSelection:[],
  107. headerStyle: {
  108. backgroundColor: '#e1e4e5',
  109. color: '#2b2b2b',
  110. lineHeight: '30px'
  111. }, // 列表样式
  112. }
  113. },
  114. computed: {
  115. ...mapGetters("layout", ["projectId", "userId", "secret"])
  116. },
  117. components: {
  118. floorCascader,
  119. myCascader
  120. },
  121. created() {
  122. this.params = this.$route.query
  123. console.log(this.params)
  124. },
  125. mounted() {
  126. this.getTableData()
  127. },
  128. watch: {
  129. projectId() {
  130. this.page.pageNumber = 1
  131. this.multipleSelection = []
  132. this.getTableData()
  133. }
  134. },
  135. methods: {
  136. //返回
  137. goBack() {
  138. this.$router.push({ name: "buildTask" })
  139. },
  140. //选择设备或部件
  141. changeDevice(val) {
  142. if(val.code) {
  143. this.params.category = val.code
  144. } else {
  145. this.params.category = ''
  146. }
  147. this.page.pageNumber = 1
  148. this.getTableData()
  149. },
  150. //选择建筑楼层
  151. changeFloor(value) {
  152. if (value[0]) {
  153. this.params.buildId = value[0]
  154. }
  155. if (value[1]) {
  156. this.params.floorId = value[1]
  157. } else {
  158. this.params.floorId = ''
  159. }
  160. this.page.pageNumber = 1
  161. this.getTableData()
  162. },
  163. //获取表格数据
  164. getTableData() {
  165. this.loading = true
  166. let param = this.formatFilter()
  167. queryEquip(param, res => {
  168. this.tableData = res.Content.map(item => {
  169. if(item.Component && item.Component.length){
  170. item.ComponentCount = []
  171. item.Component.map(parts => {
  172. if(parts.EquipCategory && parts.EquipCategory.EquipCode && parts.EquipCategory.EquipName){
  173. let index = item.ComponentCount.findIndex(c => {return c.code == parts.EquipCategory.EquipCode})
  174. if(index != -1){
  175. item.ComponentCount[index].count++
  176. } else {
  177. item.ComponentCount.push({
  178. name: parts.EquipCategory.EquipName,
  179. code: parts.EquipCategory.EquipCode,
  180. count: 1
  181. })
  182. }
  183. }
  184. })
  185. }
  186. // 后端定义默认值(前端取消默认值设定)
  187. // item.SchemeId = "1"
  188. return item
  189. })
  190. this.page.total = res.Total
  191. this.loading = false
  192. })
  193. },
  194. //格式化条件
  195. formatFilter() {
  196. let params = {
  197. Cascade: [
  198. {
  199. Name: "equipCategory",
  200. Projection: ["EquipCode", "EquipName"]
  201. },
  202. {
  203. Name: "component",
  204. Cascade: [{Name: "equipCategory"}]
  205. },
  206. {
  207. Name: "building",
  208. Projection: [ "BuildLocalName", "BuildName", "BuildID" ]
  209. },
  210. {
  211. Name: "floor",
  212. Projection: [ "FloorLocalName", "FloorName", "FloorID" ]
  213. }
  214. ],
  215. Filters: `ProjectId='${this.projectId}'`,
  216. Orders: "CreateTime desc, EquipID asc",
  217. PageNumber: this.page.pageNumber,
  218. PageSize: this.page.pageSize
  219. }
  220. if(this.params.isVerification){
  221. params.Filters += `;TaskState isNull`
  222. }
  223. if(this.keycode){
  224. params.Filters += `;LedgerParam.Siteinstall.InstallLocation contain '${this.keycode}'`
  225. }
  226. if(this.params.category){
  227. params.Filters += `;Category='${this.params.category}'`
  228. }
  229. if (this.params.buildId == "noKnow") {
  230. params.Filters += `;BuildingId isNull`
  231. } else if (this.params.buildId && this.params.buildId != "all") {
  232. params.Filters += `;BuildingId='${this.params.buildId}'`
  233. }
  234. if (this.params.floorId == "noKnow") {
  235. params.Filters += `;FloorId isNull`
  236. } else if (this.params.floorId && this.params.floorId != "all") {
  237. params.Filters += `;FloorId='${this.params.floorId}'`
  238. }
  239. return params
  240. },
  241. //选择的设备或部件
  242. handleSelectionChange(val) {
  243. this.multipleSelection = val;
  244. },
  245. //切换每页显示多少条数据
  246. handleSizeChange(val) {
  247. this.page.pageSize = val
  248. this.getTableData()
  249. },
  250. //切换页数
  251. handleCurrentChange(val) {
  252. this.page.pageNumber = val
  253. this.getTableData()
  254. },
  255. //创建已选
  256. handleClickCreate() {
  257. if (this.multipleSelection.length) {
  258. let list = this.multipleSelection.map((item) => {
  259. if (item.SchemeId) {
  260. return {
  261. EquipId: item.EquipID,
  262. SchemeId: item.SchemeId
  263. }
  264. } else {
  265. return {
  266. EquipId: item.EquipID
  267. }
  268. }
  269. })
  270. let param = {
  271. Content: list
  272. }
  273. createDeviceTask(param, res => {
  274. this.$message.success("创建成功!")
  275. this.$router.push({ name: "buildTask",query:{ newTaskTypes:this.$route.query.newTaskTypes } })
  276. })
  277. } else {
  278. this.$message('请选择要创建的任务!')
  279. }
  280. }
  281. }
  282. };
  283. </script>
  284. <style scoped lang='less'>
  285. .box {
  286. .condition {
  287. padding: 10px;
  288. display: flex;
  289. height: 100%;
  290. flex-direction: column;
  291. border: 1px solid #dfe6ec;
  292. background: #fff;
  293. .header{
  294. padding-bottom: 10px;
  295. border-bottom: 1px solid #bcbcbc;
  296. }
  297. .main{
  298. margin-top: 10px;
  299. }
  300. }
  301. }
  302. </style>
  303. <style>
  304. .demo-table-expand {
  305. font-size: 0;
  306. }
  307. .demo-table-expand label {
  308. width: 90px;
  309. color: #99a9bf;
  310. }
  311. .demo-table-expand .el-form-item {
  312. margin-right: 0;
  313. margin-bottom: 0;
  314. margin-left: 120px;
  315. width: 100%;
  316. }
  317. </style>