index.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. <template>
  2. <div class="tab-content">
  3. <div class="search">
  4. <el-cascader
  5. :options="deviceOptions"
  6. clearable
  7. v-model="deviceList"
  8. :props="optionProps"
  9. @change="handleChangeDevice"
  10. class="item"
  11. ></el-cascader>
  12. <admSearch @SearchValue="searchValue" class="item" />
  13. </div>
  14. <div v-loading="loading" style="height: calc(100% - 100px); padding: 0 12px; position: relative">
  15. <template style="height: 100%" v-if="tableData.length">
  16. <admMultiTable
  17. @handleCurrentEdit="handleCurrentEdit"
  18. :isDynamicMap="false"
  19. :currentHeader="currentHeader"
  20. :headersStage="headersStage"
  21. :tableData="tableData"
  22. />
  23. <Pagination
  24. v-if="tableData.length"
  25. :paginationList="paginationList"
  26. @handleCurrentChange="handleCurrentChange"
  27. @handleSizeChange="handleSizeChange"
  28. />
  29. </template>
  30. <div v-else class="void align">
  31. <svg-icon name="void" :width="String(120)" :height="String(123)" />
  32. <p class="void-title">暂无内容</p>
  33. <p class="void-tips">可点击左上角筛选</p>
  34. </div>
  35. </div>
  36. </div>
  37. </template>
  38. <script lang="ts">
  39. import { Vue, Component } from "vue-property-decorator";
  40. import { allDevice, dictInfo } from "@/api/equipComponent";
  41. import { queryEquip, updateEquip } from "@/api/datacenter";
  42. import { AdmMultiTable, AdmSearch, Pagination } from "@/views/maintain/components/index";
  43. import { UserModule } from "@/store/modules/user";
  44. @Component({
  45. name: "EquipTab",
  46. components: {
  47. AdmMultiTable,
  48. AdmSearch,
  49. Pagination,
  50. },
  51. })
  52. export default class EquipTab extends Vue {
  53. // 项目id
  54. private get projectId(): string {
  55. return UserModule.projectId;
  56. }
  57. // 设备类型
  58. private get deviceType(): string {
  59. const length = this.deviceList.length;
  60. return length ? this.deviceList[length - 1] : "";
  61. }
  62. // 设备关键字
  63. private keyWord = "";
  64. // 设备类下拉绑定值
  65. private deviceList: any = [];
  66. // 设备筛选
  67. private deviceOptions: any[] = [];
  68. // 下拉框映射
  69. private optionProps: any = {
  70. value: "code",
  71. label: "name",
  72. children: "children",
  73. };
  74. // 表格数据加载loading
  75. private loading = false;
  76. // 表格数据
  77. private tableData: any[] = [];
  78. // 阶段信息
  79. private currentHeader = "运维阶段维护";
  80. // 表头阶段信息结合
  81. private headersStage: any = {};
  82. // 信息点集合(表头)
  83. private all: any = [];
  84. // 输入类型选项
  85. private codeToDataSource: any = {};
  86. // 分页
  87. private paginationList = {
  88. page: 1,
  89. size: 50,
  90. sizes: [10, 30, 50, 100, 150, 200],
  91. total: 0,
  92. };
  93. // created钩子
  94. created() {
  95. this.getDeviceOptions();
  96. }
  97. /**
  98. * 设备类数据
  99. */
  100. private async getDeviceOptions() {
  101. const res = await allDevice({});
  102. if (res.result === "success") {
  103. this.deviceOptions = res.content;
  104. }
  105. }
  106. /**
  107. * 获取设备数据(信息点和实例数据)
  108. */
  109. private getEquipData() {
  110. if (this.deviceType) {
  111. this.loading = true;
  112. let param = {
  113. category: this.deviceType,
  114. };
  115. let param2 = {
  116. filters: `classCode='${this.deviceType}'`,
  117. pageNumber: this.paginationList.page,
  118. pageSize: this.paginationList.size,
  119. orders: "createTime desc, id asc",
  120. projectId: this.projectId,
  121. };
  122. if (this.keyWord != "") {
  123. param2.filters += `;codeName contain '${this.keyWord}' or systemCategory contain '${this.keyWord}' or bimTypeId contain '${this.keyWord}' or localId contain '${this.keyWord}'`;
  124. }
  125. let promise = new Promise((resolve) => {
  126. dictInfo(param).then((res: any) => {
  127. resolve(res);
  128. });
  129. });
  130. let promise2 = new Promise((resolve) => {
  131. queryEquip(param2).then((res: any) => {
  132. resolve(res);
  133. });
  134. });
  135. Promise.all([promise, promise2]).then((res: any[]) => {
  136. this.loading = false;
  137. // 获取运维阶段名称
  138. this.currentHeader = res[0]?.dictStages.find((item: any) => {
  139. return item.code === "moms";
  140. })?.name;
  141. this.headersStage = this.informationArrangement(res[0]); // 重组表头数据
  142. this.tableData = res[1]?.content ? res[1].content : []; // 主体数据
  143. this.paginationList.total = res[1]?.total ? res[1].total : 0;
  144. });
  145. } else {
  146. this.tableData = [];
  147. }
  148. }
  149. /**
  150. * 获取系统实例数据
  151. */
  152. private async getExampleData() {
  153. if (this.deviceType) {
  154. this.loading = true;
  155. let params = {
  156. filters: `classCode='${this.deviceType}'`,
  157. pageNumber: this.paginationList.page,
  158. pageSize: this.paginationList.size,
  159. orders: "createTime desc, id asc",
  160. projectId: this.projectId,
  161. };
  162. if (this.keyWord != "") {
  163. params.filters += `;codeName contain '${this.keyWord}' or systemCategory contain '${this.keyWord}' or bimTypeId contain '${this.keyWord}' or localId contain '${this.keyWord}'`;
  164. }
  165. const res = await queryEquip(params);
  166. if (res.result === "success") {
  167. this.tableData = res?.content ? res.content : []; // 主体数据
  168. this.paginationList.total = res?.total ? res.total : 0;
  169. this.loading = false;
  170. }
  171. } else {
  172. this.tableData = [];
  173. }
  174. }
  175. /**
  176. * 信息点重组
  177. */
  178. private informationArrangement(data: any): any {
  179. if (data?.basicInfos && data?.dictStages) {
  180. const base: any[] = [];
  181. data.dictStages.forEach((item: any) => {
  182. if (this.currentHeader === item.name) {
  183. item?.infos.forEach((val: any) => {
  184. base.push(val);
  185. });
  186. }
  187. });
  188. // 信息点集合
  189. this.all = [...data.basicInfos, ...base];
  190. this.codeToDataSource = {};
  191. this.all.forEach((item: any) => {
  192. if (item.dataSource) {
  193. try {
  194. this.codeToDataSource[item.code] = {};
  195. item.dataSource.forEach((dic: any) => {
  196. this.codeToDataSource[item.code][dic.code] = dic.name;
  197. });
  198. } catch (e) {
  199. console.log(e);
  200. }
  201. }
  202. });
  203. return {
  204. basicInfos: {
  205. name: "基础信息台账",
  206. data: data.basicInfos,
  207. },
  208. dictStages: {
  209. name: this.currentHeader,
  210. data: base,
  211. },
  212. };
  213. } else {
  214. return {};
  215. }
  216. }
  217. /**
  218. * 切换设备类型
  219. */
  220. private handleChangeDevice() {
  221. this.getEquipData();
  222. }
  223. /**
  224. * 检索设备关键字
  225. */
  226. private searchValue(val: string) {
  227. this.keyWord = val;
  228. this.getExampleData();
  229. }
  230. /**
  231. * 切换页码
  232. */
  233. private handleCurrentChange(val: number) {
  234. this.paginationList.page = val;
  235. this.getExampleData();
  236. }
  237. /**
  238. * 切换每页显示数量
  239. */
  240. private handleSizeChange(val: number) {
  241. this.paginationList.size = val;
  242. this.getExampleData();
  243. }
  244. }
  245. </script>
  246. <style lang="scss" scoped>
  247. .tab-content {
  248. height: 100%;
  249. border: 1px solid #e1e7ea;
  250. border-top: none;
  251. padding-bottom: 12px;
  252. .search {
  253. padding: 12px;
  254. & > .item {
  255. margin-right: 12px;
  256. }
  257. }
  258. }
  259. // 数据暂未
  260. .void {
  261. margin-top: 200px;
  262. }
  263. .align {
  264. display: flex;
  265. align-items: center;
  266. justify-content: center;
  267. flex-direction: column;
  268. flex-wrap: wrap;
  269. }
  270. </style>