index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <template>
  2. <div class="box">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <span>{{params.Name}}</span>
  7. </div>
  8. <el-row class="spaceTypes">
  9. <div class="types">
  10. <el-tabs v-model="activeTab" type='card'>
  11. <template v-for="(item,index) in tabsList">
  12. <el-tab-pane :name="item.Code" :key="index" :label="item.Name"></el-tab-pane>
  13. </template>
  14. </el-tabs>
  15. </div>
  16. <div class="deleBtn">
  17. <el-button size="small" @click="deleteSystem">删除系统</el-button>
  18. </div>
  19. </el-row>
  20. <div v-if="activeTab=='detail'" class="content">
  21. <div class="content-left">
  22. <div class="content-showType"></div>
  23. <div class="content-point">
  24. <div class="content-point-left">
  25. <el-scrollbar style="height:100%;">
  26. <div style="height:1000px"></div>
  27. </el-scrollbar>
  28. </div>
  29. <div class="content-point-right">
  30. <el-scrollbar style="height:100%;">
  31. <div style="height:1000px"></div>
  32. </el-scrollbar>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="content-right">
  37. <div class="content-repair"></div>
  38. <div class="content-media">
  39. <el-scrollbar style="height:100%;">
  40. <div style="height:1000px"></div>
  41. </el-scrollbar>
  42. </div>
  43. </div>
  44. </div>
  45. <!-- 系统内设备 -->
  46. <deviceTable v-if="activeTab=='Equipment'" :params="params" :type="activeTab"></deviceTable>
  47. <!-- 系统所在竖井 -->
  48. <cenoteTable v-else-if="activeTab=='cenote'" :params="params" :type="activeTab"></cenoteTable>
  49. <!-- 系统所在业务空间 -->
  50. <spaceTable v-else-if="activeTab=='space'" :params="params" :type="activeTab" :spaceType="spaceType" :floorType="floorType"></spaceTable>
  51. </div>
  52. </div>
  53. </template>
  54. <script>
  55. import { mapGetters } from "vuex";
  56. import { getDataDictionary, queryLinkSys, deleteGeneralSys, queryDictionaryHead, buildingQuery } from '@/api/scan/request';
  57. import cenoteTable from '@/components/ledger/system/table/cenoteTable';
  58. import deviceTable from '@/components/ledger/system/table/deviceTable';
  59. import spaceTable from '@/components/ledger/system/table/spaceTable';
  60. import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
  61. import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
  62. import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
  63. import selectRadio from "@/components/ledger/details/detail/selectRadio";
  64. export default {
  65. data() {
  66. return {
  67. params: {}, //参数-包含系统id 分区类型
  68. tabsList: [
  69. { Code: 'detail', Name: '系统详情' },
  70. { Code: 'Equipment', Name: '系统内设备' },
  71. { Code: 'cenote', Name: '系统所在竖井' },
  72. { Code: 'space', Name: '系统所在业务空间' },
  73. ], //tab页
  74. activeTab: 'detail', //当前选中的tab
  75. pointData: [], //信息点数据
  76. exampleData: {}, //实例数据
  77. spaceType: {},//空间种类
  78. floorType: {}
  79. }
  80. },
  81. computed: {
  82. ...mapGetters("layout", ["projectId", "userId", "secret"])
  83. },
  84. components: {
  85. cenoteTable,
  86. deviceTable,
  87. spaceTable,
  88. exhibitionBaseInformation,
  89. exhibitionFile,
  90. exhibitionImage,
  91. selectRadio
  92. },
  93. created() {
  94. this.params = this.$route.query;
  95. this.getData();
  96. let pa = {
  97. Filters: `parentId='Space'`
  98. }
  99. queryDictionaryHead(pa, res => {
  100. res.Content.map(t => {
  101. if (t.Name != "元空间") {
  102. this.spaceType[t.Code] = t.Name;
  103. }
  104. })
  105. });
  106. let param = {
  107. Cascade: [
  108. { Name: "floor" }
  109. ]
  110. };
  111. buildingQuery(param, res => {
  112. res.Content.map(item => {
  113. if (item.BuildID && item.BuildLocalName) {
  114. this.floorType[item.BuildID] = item.BuildLocalName;
  115. if (item.Floor instanceof Array) {
  116. item.Floor.map(f => {
  117. if (f.FloorID && f.FloorLocalName) {
  118. this.floorType[f.FloorID] = f.FloorLocalName;
  119. }
  120. })
  121. }
  122. }
  123. });
  124. });
  125. },
  126. mounted() { },
  127. watch: {
  128. projectId() { }
  129. },
  130. methods: {
  131. // 返回
  132. goBack() {
  133. this.$router.push({
  134. name: "systemlist",
  135. params: this.params
  136. })
  137. },
  138. // 获取表头和实例数据
  139. getData () {
  140. let params1 = {
  141. data: {
  142. Orders: "sort asc",
  143. PageNumber: 1,
  144. PageSize: 1000
  145. },
  146. type: this.params.SysType
  147. }, params2 = {
  148. Filters: `SysID='${this.params.SysID}'`,
  149. };
  150. let promise1 = new Promise((resolve, reject) => {
  151. getDataDictionary(params1, res => {
  152. resolve(res)
  153. })
  154. })
  155. let promise2 = new Promise((resolve, reject) => {
  156. queryLinkSys(params2, res => {
  157. resolve(res)
  158. })
  159. })
  160. Promise.all([promise1, promise2]).then(values => {
  161. this.pointData = values[0].Content;
  162. this.exampleData = values[1].Content[0];
  163. })
  164. },
  165. // 删除系统
  166. deleteSystem() {
  167. this.$confirm("此操作将删除系统,是否继续?", "提示", {
  168. confirmButtonText: '确定',
  169. cancelButtonText: '取消',
  170. type: 'warning'
  171. }).then(() => {
  172. let pa = [{
  173. SysID: this.exampleData.SysID
  174. }]
  175. this.removeSys(pa)
  176. }).catch(() => {
  177. this.$message("取消删除")
  178. })
  179. },
  180. async removeSys(param) {
  181. await deleteGeneralSys(param, res => {
  182. this.$message.success("删除成功")
  183. this.goBack()
  184. })
  185. },
  186. }
  187. };
  188. </script>
  189. <style scoped lang='less'>
  190. .box {
  191. .condition {
  192. padding: 10px;
  193. display: flex;
  194. height: 100%;
  195. flex-direction: column;
  196. border: 1px solid #dfe6ec;
  197. background: #fff;
  198. box-sizing: border-box;
  199. .header {
  200. padding-bottom: 10px;
  201. span {
  202. line-height: 33px;
  203. margin-left: 15px;
  204. }
  205. }
  206. .spaceTypes {
  207. .types {
  208. float: left;
  209. width: calc(100% - 200px);
  210. /deep/ .el-tabs__item.is-top {
  211. border-top: 2px solid transparent;
  212. &.is-active {
  213. border-top: 2px solid #409eff;
  214. }
  215. }
  216. }
  217. .deleBtn {
  218. float: left;
  219. width: 200px;
  220. text-align: right;
  221. height: 40px;
  222. border-bottom: 1px solid #e4e7ed;
  223. }
  224. }
  225. .content {
  226. display: flex;
  227. flex-direction: row;
  228. box-sizing: border-box;
  229. height: calc(100% - 99px);
  230. .content-left {
  231. display: flex;
  232. flex-direction: column;
  233. flex: 1;
  234. .content-showType {
  235. height: 50px;
  236. border: 1px solid #ccc;
  237. border-bottom: none;
  238. box-sizing: border-box;
  239. }
  240. .content-point {
  241. display: flex;
  242. flex-direction: row;
  243. height: calc(100% - 50px);
  244. border: 1px solid #ccc;
  245. box-sizing: border-box;
  246. .content-point-left {
  247. flex: 1;
  248. }
  249. }
  250. }
  251. .content-right {
  252. width: 400px;
  253. margin-left: 10px;
  254. .content-repair {
  255. height: 50px;
  256. margin-bottom: 10px;
  257. border: 1px solid #ccc;
  258. box-sizing: border-box;
  259. }
  260. .content-media {
  261. height: calc(100% - 60px);
  262. border: 1px solid #ccc;
  263. box-sizing: border-box;
  264. }
  265. }
  266. }
  267. .main {
  268. margin-top: 10px;
  269. height: calc(100% - 96px);
  270. }
  271. .footer {
  272. margin-bottom: 10px;
  273. }
  274. /deep/ .el-scrollbar__wrap {
  275. overflow-x: hidden;
  276. }
  277. }
  278. }
  279. </style>
  280. <style lang="less">
  281. .el-table th {
  282. background-color: #d9d9d9;
  283. color: #000;
  284. }
  285. </style>