index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <template>
  2. <div class="adm-system">
  3. <statistics :statistics-msg="statisticsMsg"/>
  4. <div class="hr"></div>
  5. <div class="operation">
  6. <el-select
  7. v-model="systemType"
  8. class="adm-select"
  9. clearable
  10. filterable
  11. placeholder="请选择系统类别"
  12. @change="handleFilter"
  13. >
  14. <el-option
  15. v-for="item in list"
  16. :key="item.code"
  17. :label="item.name"
  18. :value="{ value: item.code,label: item.name }"
  19. />
  20. </el-select>
  21. <admSearch @SearchValue="SearchValue"/>
  22. <el-button class="adm-btn" type="default" @click="addDevice">添加系统</el-button>
  23. </div>
  24. <div class="content">
  25. <div v-loading="loading" class="table">
  26. <template v-if="systemType">
  27. <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage" :tableData="tableData"/>
  28. <Pagination :paginationList="paginationList" @handleCurrentChange="handleCurrentChange"
  29. v-if="tableData.length > 0"
  30. @handleSizeChange="handleSizeChange"/>
  31. </template>
  32. <div v-else class="void align">
  33. <svg-icon :height="String(123)" :width="String(120)" name="void"/>
  34. <p class="void-title">暂无内容</p>
  35. <p class="void-tips">可点击左上角选择系统类型</p>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- 添加/编辑 系统-->
  40. <el-dialog
  41. :title="deviceMsg"
  42. :visible.sync="dialogVisible"
  43. @close="close"
  44. >
  45. <template v-if="next">
  46. <div class="align" style="height: 400px">
  47. <span class="text ">系统类别</span>
  48. <el-select
  49. v-model="systemVal"
  50. clearable
  51. filterable
  52. placeholder="请选择系统类别"
  53. >
  54. <el-option
  55. v-for="item in list"
  56. :key="item.value"
  57. :label="item.label"
  58. :value="item.value"
  59. />
  60. </el-select>
  61. </div>
  62. <el-button class="fr" type="primary" @click="handleNext">下一步</el-button>
  63. </template>
  64. <template v-else>
  65. <dataForm/>
  66. <el-button class="fr ml-10" type="primary">确定</el-button>
  67. </template>
  68. </el-dialog>
  69. </div>
  70. </template>
  71. <script lang="ts">
  72. import { Component, Vue } from "vue-property-decorator";
  73. import { AdmMultiTable, AdmSearch, dataForm, Pagination, Statistics } from '../components/index'
  74. import { dictCategoryQuery, dictQuery, queryCountSystem, querySystem } from "@/api/datacenter";
  75. import tools from "@/utils/maintain"
  76. import { UserModule } from "@/store/modules/user";
  77. import { BeatchQueryParam } from "@/api/equipComponent";
  78. @Component({
  79. name: 'adm-device',
  80. components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
  81. })
  82. export default class extends Vue {
  83. // loading
  84. loading = false
  85. // 下拉数据
  86. list = []
  87. // 信息点集合(表头)
  88. all = []
  89. codeToDataSource = {}
  90. // 系统类值
  91. systemType = ''
  92. // 系统名称 label值
  93. systemLabel = ''
  94. systemVal = ''
  95. currentHeader = '运维阶段'
  96. tableData = []
  97. // 表头阶段信息结合
  98. headersStage = {}
  99. // 统计信息对象
  100. private statisticsMsg = {
  101. title: '全部系统',
  102. total: 0
  103. }
  104. // 分页
  105. private paginationList = {
  106. page: 1,
  107. size: 50,
  108. sizes: [10, 30, 50, 100, 150, 200],
  109. total: 0
  110. }
  111. // 下一步
  112. private next = true
  113. // 弹窗 title
  114. private deviceMsg = '添加系统'
  115. // 弹窗开关
  116. private dialogVisible = false
  117. // 搜索内容
  118. inputSearch = ''
  119. // 项目id
  120. private get projectId(): string {
  121. return UserModule.projectId
  122. }
  123. created() {
  124. this.systemList();
  125. this.dataCount()
  126. }
  127. //查询统计数量
  128. dataCount() {
  129. queryCountSystem({}).then(res => {
  130. this.statisticsMsg.total = res.count
  131. })
  132. }
  133. systemList() {
  134. let param = {
  135. type: 'system'
  136. }
  137. dictCategoryQuery(param).then(res => {
  138. this.list = res.content
  139. })
  140. }
  141. // 动态信息点
  142. getBatch(data) {
  143. let param = {
  144. groupCode: 'WD',
  145. appId: 'datacenter',
  146. projectId: this.projectId,
  147. data: []
  148. }
  149. this.all.forEach(head => {
  150. if (head.category != 'STATIC') {
  151. data.forEach(item => {
  152. let cur = tools.dataForKey(item, head.path)
  153. if (cur) {
  154. param.data.push({
  155. objectId: item.id,
  156. infoCode: head.code
  157. })
  158. }
  159. })
  160. }
  161. })
  162. if (param.data.length) {
  163. BeatchQueryParam(param).then(res => {
  164. this.tableData = data.map(item => {
  165. res.data.map(child => {
  166. if (item.id == child.objectId) {
  167. if (!!child.data || child.data == 0) {
  168. this.all.map(head => {
  169. if (head.code == child.infoCode) {
  170. let contentVal = child.data
  171. if (this.codeToDataSource[child.infoCode]) {
  172. contentVal = this.codeToDataSource[child.infoCode][child.data]
  173. }
  174. tools.setDataForKey(item, head.path, contentVal);
  175. }
  176. })
  177. } else {
  178. this.all.map(head => {
  179. if (head.code == child.infoCode) {
  180. tools.setDataForKey(
  181. item,
  182. head.path,
  183. child.error
  184. );
  185. }
  186. });
  187. }
  188. }
  189. })
  190. return item
  191. })
  192. })
  193. }
  194. }
  195. // 搜索
  196. SearchValue(val: string) {
  197. this.inputSearch = val
  198. this.handleFilter(this.systemType)
  199. }
  200. // 当前分页
  201. handleCurrentChange(val: number) {
  202. this.paginationList.page = val
  203. this.handleFilter(this.systemType)
  204. }
  205. handleSizeChange(val: number) {
  206. this.paginationList.size = val
  207. this.handleFilter(this.systemType)
  208. }
  209. // 添加设备
  210. addDevice() {
  211. this.dialogVisible = true
  212. }
  213. //下一步事件
  214. handleNext() {
  215. if (this.system) {
  216. this.next = false
  217. }
  218. }
  219. // close
  220. close() {
  221. this.next = true
  222. this.displayLocation = false
  223. }
  224. private handleFilter(val) {
  225. this.systemLabel = val.label
  226. if (val) {
  227. this.loading = true
  228. let param = {
  229. "type": val.value,
  230. "orders": "sort asc, name desc"
  231. }
  232. let param2 = {
  233. filters: val ? `classCode='${ val.value }'` : undefined,
  234. pageNumber: this.paginationList.page,
  235. pageSize: this.paginationList.size,
  236. orders: "createTime desc, id asc",
  237. projectId: this.projectId
  238. }
  239. if (this.inputSearch != '') {
  240. param2.filters = `localName contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
  241. }
  242. let promise = new Promise(resolve => {
  243. dictQuery(param).then(res => {
  244. resolve(res)
  245. })
  246. })
  247. let promise2 = new Promise(resolve => {
  248. querySystem(param2).then(res => {
  249. resolve(res)
  250. })
  251. })
  252. Promise.all([promise, promise2]).then(res => {
  253. let tableData = []
  254. this.loading = false
  255. // 类型下信息点,重组数据
  256. let basicInfos = [{ path: 'classification', name: '系统分类' }], dictStages = []
  257. this.all = res[0].content
  258. res[0].content.forEach(item => {
  259. let i = ["localName", "localId"]
  260. if (i.includes(item.path)) {
  261. basicInfos.push(item)
  262. } else {
  263. dictStages.push(item)
  264. }
  265. })
  266. this.headersStage = {
  267. basicInfos: {
  268. name: '基础信息台账',
  269. data: basicInfos
  270. },
  271. dictStages: {
  272. name: '运维阶段',
  273. data: dictStages
  274. }
  275. }
  276. this.paginationList.total = res[1].total
  277. tableData = res[1].content // 主体数据
  278. // 添加系统分类
  279. this.tableData = tableData.map(item => {
  280. item = { ...item, classification: this.systemLabel }
  281. return item
  282. })
  283. })
  284. // 动态信息点
  285. this.codeToDataSource = {}
  286. this.all.forEach(item => {
  287. if (item.dataSource) {
  288. try {
  289. this.codeToDataSource[item.code] = {}
  290. item.dataSource.forEach(dic => {
  291. this.codeToDataSource[item.code][dic.code] = dic.name;
  292. })
  293. } catch (e) {
  294. console.log(e);
  295. }
  296. }
  297. });
  298. this.getBatch(this.tableData)
  299. } else {
  300. console.log('void')
  301. }
  302. }
  303. }
  304. </script>
  305. <style lang="scss" scoped>
  306. $margin: 12px;
  307. $border: 1px solid #E1E7EA;
  308. .align {
  309. display: flex;
  310. align-items: center;
  311. justify-content: center;
  312. flex-direction: column;
  313. flex-wrap: wrap;
  314. }
  315. .adm-system {
  316. background: #fff;
  317. padding: 12px;
  318. height: 100%;
  319. .operation {
  320. margin: 12px 0;
  321. .adm-select {
  322. margin-right: $margin;
  323. }
  324. .adm-btn {
  325. float: right;
  326. }
  327. }
  328. .hr {
  329. background: #E1E7EA;
  330. color: #E1E7EA;
  331. width: 100%;
  332. height: 1px;
  333. margin: 15px 0;
  334. }
  335. .content {
  336. height: 100%;
  337. .table {
  338. //border-left: $border;
  339. //border-right: $border;
  340. //border-bottom: $border;
  341. //height: calc(100% - 180px);
  342. padding: 12px;
  343. .void {
  344. margin-top: 200px;
  345. }
  346. .void-title {
  347. color: #333333;
  348. line-height: 21px;
  349. font-size: 16px;
  350. }
  351. .void-tips {
  352. color: #9CA1A9;
  353. line-height: 22px;
  354. font-size: 14px;
  355. }
  356. }
  357. .adm-multi-table {
  358. }
  359. }
  360. .adm-pagination {
  361. right: 40px;
  362. position: absolute;
  363. bottom: 30px;
  364. }
  365. }
  366. </style>