index.vue 8.6 KB

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