index.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <template>
  2. <div id="deviceList">
  3. <div class="search-header">
  4. <cenote-type @change="changeFloor"></cenote-type>
  5. </div>
  6. <el-row class="right">
  7. <span style="float:left;">当前筛选条件下共{{page.total || '--'}}设备</span>
  8. <el-checkbox v-show="onlyRead" v-model="allMess" @change="handleChangeAllMess">只看要采集的信息</el-checkbox>
  9. <el-select v-model="onlyRead">
  10. <el-option
  11. v-for="item in options"
  12. :key="item.value"
  13. :label="item.label"
  14. :value="item.value">
  15. </el-option>
  16. </el-select>
  17. <el-button>添加竖井</el-button>
  18. <el-button @click="getTableHeader">刷新</el-button>
  19. <el-button v-show="!onlyRead">撤销</el-button>
  20. </el-row>
  21. <div class="tableBox">
  22. <div class="center middle_sty" style="flex:1;" v-show="tableData && !tableData.length">
  23. <p>
  24. <i class="iconwushuju iconfont"></i>
  25. 暂无数据
  26. </p>
  27. </div>
  28. <div class="tableLeft" v-show="tableData && tableData.length">
  29. <handson-table ref="table"></handson-table>
  30. </div>
  31. <div class="tableRight" v-show="tableData && tableData.length">
  32. </div>
  33. </div>
  34. <el-pagination
  35. class="right"
  36. v-show="tableData && tableData.length"
  37. @size-change="handleSizeChange"
  38. @current-change="handleCurrentChange"
  39. :current-page="page.pageNumber"
  40. :page-sizes="page.pageSizes"
  41. :page-size="page.pageSize"
  42. layout="total, sizes, prev, pager, next, jumper"
  43. :total="page.total">
  44. </el-pagination>
  45. </div>
  46. </template>
  47. <script>
  48. import tools from "@/utils/scan/tools";
  49. import cenoteType from "@/components/ledger/lib/cenoteType";
  50. import handsonTable from "@/components/common/handsontable";
  51. import { getCenoteTableHeader, getCenoteTableData, getEquipmentFamily } from "@/api/scan/request"
  52. import { mapGetters, mapActions } from "vuex";
  53. export default {
  54. components: {
  55. cenoteType,
  56. handsonTable
  57. },
  58. data() {
  59. return {
  60. cenoteId: "",
  61. options: [{
  62. value: true,
  63. label: '只读模式'
  64. }, {
  65. value: false,
  66. label: '编辑模式'
  67. }],
  68. onlyRead: true,
  69. allMess: true,
  70. tableHeader: [],
  71. page: {
  72. pageSize: 20,
  73. pageSizes: [10, 20, 50, 100],
  74. pageNumber: 1,
  75. total: 0
  76. },
  77. tableData: [],
  78. param: {
  79. buildId: "",
  80. floorId: "",
  81. deviceId: "",
  82. ProjId: "",
  83. secret: ""
  84. },
  85. assetGroupList: [],
  86. graphyId: null
  87. };
  88. },
  89. computed: {
  90. ...mapGetters("layout", [
  91. "projectId",
  92. "secret",
  93. "userId"
  94. ])
  95. },
  96. created() {
  97. this.param.ProjId = this.projectId
  98. this.param.secret = this.secret
  99. this.getTableHeader()
  100. // this.getProjName()
  101. },
  102. watch: {
  103. projectId() {
  104. this.param.ProjId = this.projectId;
  105. // this.getProjName()
  106. }
  107. },
  108. methods: {
  109. async getTableHeader() {
  110. let param = {
  111. ProjId: this.projectId,
  112. secret: this.secret,
  113. data: {
  114. "CollectFlag": this.allMess
  115. }
  116. }
  117. await getCenoteTableHeader(param, res => {
  118. this.tableHeader = res.Content;
  119. this.getTableData()
  120. })
  121. },
  122. handleChangeAllMess() {
  123. this.getTableHeader()
  124. },
  125. formatHeaderData(list) {
  126. let arr = tools.copyArr(list)
  127. let data = arr.map((item) => {
  128. if (item.Field == "SpaceCount" || item.Field == "SpaceList"){
  129. return undefined
  130. } else {
  131. return item.Name
  132. }
  133. }).filter(d => d)
  134. data.unshift("关联的元空间");
  135. return data;
  136. },
  137. formatHeaderType(list) {
  138. let arr = tools.copyArr(list)
  139. let data = arr.map(item => {
  140. if (item.Field == "SpaceCount" || item.Field == "SpaceList") {
  141. return undefined
  142. } else {
  143. return {
  144. data: item.Field,
  145. readOnly: true
  146. }
  147. }
  148. }).filter(d => d)
  149. data.unshift({
  150. data: "SpaceCount",
  151. readOnly: true
  152. })
  153. return data;
  154. },
  155. async getTableData() {
  156. let data = {};
  157. if(this.cenoteId){
  158. data = {
  159. Filters: `ID=${this.cenoteId}`,
  160. PageNumber: this.page.pageNumber,
  161. PageSize: this.page.pageSize
  162. }
  163. } else {
  164. data = {
  165. PageNumber: this.page.pageNumber,
  166. PageSize: this.page.pageSize
  167. }
  168. }
  169. const params = {
  170. ProjId: this.projectId,
  171. secret: this.secret,
  172. data: data
  173. }
  174. await getCenoteTableData(params, (res) => {
  175. this.tableData = res.Content
  176. this.page.pageNumber = res.PageNumber
  177. this.page.total = res.Total
  178. if(this.tableData && this.tableData.length){
  179. this.initTable()
  180. }
  181. })
  182. },
  183. initTable() {
  184. let settings = {
  185. data: this.tableData,
  186. colHeaders: this.formatHeaderData(this.tableHeader),
  187. columns: this.formatHeaderType(this.tableHeader),
  188. rowHeights: 30,
  189. maxRows: this.tableData.length,
  190. contextMenu: {
  191. items: {
  192. remove_row: {
  193. name: "删除竖井"
  194. }
  195. }
  196. },
  197. // 事件
  198. afterChange: this.tdChange, //修改后
  199. afterFilter: this.trimmedRows, //排序前
  200. afterRemoveRow: this.romoveFm, //右键删除
  201. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  202. };
  203. this.$nextTick(() => {
  204. console.log(this.$refs.table);
  205. this.tableExample = this.$refs.table.init(settings);
  206. });
  207. },
  208. // getProjName() {
  209. // let param = {
  210. // list: [{ id: this.param.ProjId }],
  211. // perjectId: this.param.ProjId,
  212. // secret: this.param.secret,
  213. // }
  214. // getSpaceName(param).then(res => {
  215. // if (res.data.Result == "success") {
  216. // this.mess.perjectName = res.data.Content[0].infos.ProjLocalName
  217. // this.getEqCode()
  218. // } else {
  219. // this.$message.error("请求失败:" + res.data.ResultMsg)
  220. // }
  221. // }).catch(_ => {
  222. // this.$message.error("请求失败")
  223. // })
  224. // },
  225. close(val) {
  226. this.getEqCode()
  227. console.log(val)
  228. if(this.$refs.cascader)
  229. this.$refs.cascader.changeVal([val.code])
  230. // this.$refs.tableMain.getHeaderData(this.param);
  231. },
  232. getEqCode() {
  233. getEquipmentFamily(res => {
  234. this.assetGroupList = res.Content
  235. this.getGraphyId()
  236. })
  237. },
  238. getFamilyList() {
  239. let param = {
  240. ProjId: this.param.ProjId,
  241. secret: this.param.secret,
  242. data: { type: "Eq" }
  243. }
  244. getFamilyList(param, res => {
  245. if (this.$refs.cascader) {
  246. this.$refs.cascader.pushData(res.Content)
  247. }
  248. })
  249. },
  250. //获取header的list
  251. // getNumber() {
  252. // let param = {
  253. // ProjId: this.param.ProjId,
  254. // secret: this.param.secret,
  255. // data: { type: "Eq" }
  256. // }
  257. // getNumber(param, res => {
  258. // console.log(res)
  259. // this.mess.name[0].num = res.content.count
  260. // this.mess.name[1].num = res.content.bindingCount
  261. // this.getFamilyList()
  262. // })
  263. // },
  264. getGraphyId() {
  265. let param = {
  266. ProjId: this.param.ProjId,
  267. secret: this.param.secret,
  268. type: "SystemEquip"
  269. }
  270. getGraphyId(param).then(res => {
  271. if (res.data.Result == "success") {
  272. this.graphyId = res.data.graph_id
  273. if(this.$refs.tableMain)
  274. this.$refs.tableMain.setGraphyId(this.graphyId, this.assetGroupList);
  275. // this.getNumber()
  276. } else {
  277. this.$message.error("请求错误:" + res.data.ResultMsg)
  278. }
  279. }).catch(_ => {
  280. this.$message.error("请求错误")
  281. })
  282. },
  283. //切换竖井类型
  284. changeFloor(value) {
  285. this.cenoteId = value.ID
  286. this.getTableHeader()
  287. },
  288. //修改设备族
  289. changeDevice(value) {
  290. this.param.deviceId = value.code
  291. this.param.name = value.facility
  292. if (!!value) {
  293. if(this.$refs.tableMain)
  294. this.$refs.tableMain.getHeaderData(this.param);
  295. } else {
  296. return;
  297. }
  298. },
  299. handleSizeChange(val) {
  300. this.page.pageSize = val
  301. this.getTableHeader()
  302. },
  303. handleCurrentChange(val) {
  304. this.page.pageNumber = val
  305. this.getTableHeader()
  306. },
  307. }
  308. };
  309. </script>
  310. <style lang="less" scoped>
  311. #deviceList {
  312. overflow: hidden;
  313. height: 100%;
  314. background-color: #f6f6f6;
  315. position: relative;
  316. .search-header {
  317. overflow: hidden;
  318. padding:0 10px 10px 10px;
  319. border-bottom: 1px solid #bcbcbc;
  320. }
  321. .tableBox {
  322. display: flex;
  323. height: calc(100% - 140px);
  324. margin-top: 10px;
  325. .tableLeft {
  326. flex: 2;
  327. margin-right: 20px;
  328. }
  329. .tableRight {
  330. flex: 1;
  331. // display: none;
  332. border-left: 1px solid #dadada;
  333. margin-right: 5px;
  334. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  335. }
  336. }
  337. }
  338. </style>