index.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <template>
  2. <div id="deviceList">
  3. <saga-title :mess="mess"></saga-title>
  4. <div class="table-main">
  5. <div class="search-header">
  6. <floor-cascader @change="changeFloor"></floor-cascader>
  7. <my-cascader ref="cascader" @change="changeDevice"></my-cascader>
  8. <el-tooltip class="item" effect="dark" content="按照本地名称 | 本地编码 | 图纸编码 | 交付编码关键字搜索" placement="top-start">
  9. <el-input
  10. v-show="param.deviceId"
  11. v-model="param.keyWord"
  12. @keyup.enter.native="handleChangeKeyWord"
  13. @clear="handleChangeKeyWord"
  14. clearable
  15. placeholder="请输入关键字"
  16. prefix-icon="el-icon-search"
  17. style="width: 250px; margin-left: 10px"
  18. ></el-input>
  19. </el-tooltip>
  20. <!-- <el-button size="small" @click="handleLinkAssets" class="iconfont icon-batchassociation">批量关联资产</el-button> -->
  21. <!-- <el-tooltip class="item" effect="dark" content="请选择建筑楼层和设备类" placement="top-start"> -->
  22. <el-dropdown @command="handleCommand" class="deviceList-excel">
  23. <el-button type="primary"> 数据导入<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
  24. <el-dropdown-menu slot="dropdown">
  25. <el-dropdown-item command="dynamic">深化点表导入</el-dropdown-item>
  26. <el-dropdown-item command="static">台账信息导入</el-dropdown-item>
  27. </el-dropdown-menu>
  28. </el-dropdown>
  29. <!-- </el-tooltip> -->
  30. </div>
  31. <hanson-table @close="close" :graphyId="graphyId" ref="tableMain"></hanson-table>
  32. </div>
  33. <!-- <table-transfers></table-transfers> -->
  34. <linkassets-dialog :dialog="dialog"></linkassets-dialog>
  35. <!-- 深化点表导入 -->
  36. <dynamic-dialog ref="dynamicDialog" @upDataDevice="upDataDevice"></dynamic-dialog>
  37. <!-- 台账信息导入 -->
  38. <static-dialog ref="staticDialog" @upDataDevice="upDataDevice"></static-dialog>
  39. </div>
  40. </template>
  41. <script>
  42. import sagaTitle from "../components/lib/title";
  43. import floorCascader from "../components/lib/floorCascader";
  44. import myCascader from "../components/lib/equipCascader";
  45. import hansonTable from "../components/handsontables/device";
  46. import tableTransfers from "../components/tableTransfers";
  47. import linkassetsDialog from "../components/lib/linkassets";
  48. // import { countEquip } from "../api/object/equip";
  49. import Equip from "@/controller/equipController";
  50. import { Facility } from "@/controller/facilityController";
  51. import dynamicDialog from "../components/lib/dynamicDialog";
  52. import staticDialog from "../components/lib/staticDialog";
  53. import { mapGetters } from "vuex";
  54. export default {
  55. components: {
  56. sagaTitle,
  57. floorCascader,
  58. myCascader,
  59. hansonTable,
  60. tableTransfers,
  61. linkassetsDialog,
  62. staticDialog,
  63. dynamicDialog,
  64. },
  65. data() {
  66. return {
  67. currentBuilding: "", // 当前建筑楼层信息
  68. mess: {
  69. perjectName: "",
  70. name: [
  71. {
  72. key: "设备",
  73. num: 0,
  74. },
  75. {
  76. key: "资产",
  77. num: 0,
  78. },
  79. ],
  80. },
  81. param: {
  82. buildId: "",
  83. floorId: "",
  84. deviceId: "",
  85. keyWord: "", //检索关键字
  86. ProjId: "",
  87. secret: "",
  88. },
  89. assetGroupList: [],
  90. graphyId: null,
  91. dialog: {
  92. linkAssets: false,
  93. },
  94. };
  95. },
  96. computed: {
  97. ...mapGetters('layout', ["projectId", "projects", "secret", "userId"]),
  98. },
  99. created() {
  100. this.param.ProjId = this.projectId;
  101. this.param.secret = this.secret;
  102. this.getProjName();
  103. this.getCount();
  104. // let deviceId = this.$route.params.deviceId;
  105. // if (deviceId) {
  106. // this.$nextTick(() => {
  107. // this.$refs.cascader.setValue(deviceId);
  108. // });
  109. // }
  110. },
  111. activated() {
  112. if (!this.$route.meta.isBack) {
  113. this.param.ProjId = this.projectId;
  114. this.param.secret = this.secret;
  115. this.getProjName();
  116. this.getCount();
  117. let deviceId = this.$route.params.deviceId;
  118. if (deviceId) {
  119. this.$nextTick(() => {
  120. this.$refs.cascader.setValue(deviceId);
  121. this.changeDevice({ code: deviceId, facility: this.$route.params.facility });
  122. });
  123. } else {
  124. this.$nextTick(() => {
  125. this.$refs.cascader.setValue("");
  126. this.changeDevice({ code: "", facility: "" });
  127. });
  128. }
  129. }
  130. this.$route.meta.isBack = false;
  131. },
  132. /**
  133. * 路由守卫
  134. * 从部件和详情页返回,设置页面缓存
  135. */
  136. beforeRouteEnter(to, from, next) {
  137. const routerList = ["/ledger/parts", "/ledger/partsmanage", "/ledger/deviceDetails"]
  138. if (routerList.includes(from.path)) {
  139. to.meta.isBack = true;
  140. } else {
  141. to.meta.isBack = false;
  142. }
  143. next();
  144. },
  145. watch: {
  146. projectId() {
  147. this.param.ProjId = this.projectId;
  148. this.param.secret = this.secret;
  149. this.getProjName();
  150. this.getCount();
  151. },
  152. },
  153. methods: {
  154. getProjName() {
  155. this.projects.forEach((item) => {
  156. if (item.id == this.projectId) this.mess.perjectName = item.name;
  157. });
  158. },
  159. close(val) {
  160. this.getCount();
  161. // if (val && this.$refs.cascader) {
  162. // this.$refs.cascader.changeVal(val.code);
  163. // }
  164. // this.$refs.cascader.getData(this.currentBuilding);
  165. this.$refs.tableMain.getTableData();
  166. },
  167. // getEqCode() {
  168. // getEquipmentFamily(res => {
  169. // debugger
  170. // this.assetGroupList = res.Content
  171. // this.getGraphyId()
  172. // })
  173. // },
  174. //获取统计数量
  175. getCount() {
  176. let param = {
  177. filters: "not propertyId isnull",
  178. };
  179. Equip.countEquip({}, (res) => {
  180. this.mess.name[0].num = res.count;
  181. });
  182. Equip.countEquip(param, (res) => {
  183. this.mess.name[1].num = res.count;
  184. });
  185. },
  186. // getGraphyId() {
  187. // let param = {
  188. // ProjId: this.param.ProjId,
  189. // secret: this.param.secret,
  190. // type: "SystemEquip"
  191. // }
  192. // getGraphyId(param).then(res => {
  193. // if (res.data.Result == "success") {
  194. // debugger
  195. // this.graphyId = res.data.graph_id
  196. // if (this.$refs.tableMain)
  197. // this.$refs.tableMain.setGraphyId(this.graphyId, this.assetGroupList);
  198. // } else {
  199. // this.$message.error("请求错误:" + res.data.ResultMsg)
  200. // }
  201. // }).catch(_ => {
  202. // this.$message.error("请求错误")
  203. // })
  204. // },
  205. //修改楼层
  206. changeFloor(value) {
  207. if (value[0]) {
  208. this.param.buildId = value[0];
  209. }
  210. if (value[1]) {
  211. this.param.floorId = value[1];
  212. } else {
  213. this.param.floorId = null;
  214. }
  215. if (!!this.param.deviceId) {
  216. if (this.$refs.tableMain) this.$refs.tableMain.getHeaderData(this.param);
  217. }
  218. this.currentBuilding = value;
  219. this.$refs.cascader.getData(value);
  220. },
  221. //修改设备族
  222. changeDevice(value) {
  223. this.param.deviceId = value.code || "";
  224. this.param.name = value.facility || "";
  225. this.param.keyWord = "";
  226. if (this.$refs.tableMain) this.$refs.tableMain.getHeaderData(this.param);
  227. },
  228. // 修改检索关键字
  229. handleChangeKeyWord() {
  230. if (this.$refs.tableMain) this.$refs.tableMain.getTableData(this.param.keyWord);
  231. },
  232. // 刷新数据
  233. upDataDevice() {
  234. this.$refs.tableMain.getTableData();
  235. },
  236. // 批量关联资产
  237. handleLinkAssets() {
  238. this.dialog.linkAssets = true;
  239. },
  240. /**
  241. * 选择下拉菜单
  242. * @param command 下拉选项标识
  243. */
  244. handleCommand(command) {
  245. // 选择深化点表导入
  246. if (command === "dynamic") {
  247. this.$refs.dynamicDialog.openDialog();
  248. } else if (command === "static") {
  249. // 选择台账信息导入
  250. this.$refs.staticDialog.openDialog();
  251. }
  252. },
  253. },
  254. };
  255. </script>
  256. <style lang="less" scoped>
  257. #deviceList {
  258. overflow: hidden;
  259. height: 100%;
  260. background-color: #fff;
  261. position: relative;
  262. .table-main {
  263. position: absolute;
  264. top: 87px;
  265. bottom: 0;
  266. left: 0;
  267. right: 0;
  268. background-color: #fff;
  269. // border-radius: 5px;
  270. // padding: 10px 0;
  271. }
  272. .search-header {
  273. overflow: hidden;
  274. padding-bottom: 10px;
  275. margin: 0 10px;
  276. border-bottom: 1px solid #bcbcbc;
  277. .deviceList-excel {
  278. float: right;
  279. margin-right: 15px;
  280. }
  281. .icon-batchassociation {
  282. float: right;
  283. font-size: 12px;
  284. /deep/ span {
  285. margin-left: 5px;
  286. }
  287. }
  288. }
  289. }
  290. </style>