index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  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="deleteCenote">删除竖井</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">
  23. <selectRadio
  24. :selectRadio="selectRadio"
  25. @changeRadio="changeRadio"
  26. />
  27. </div>
  28. <div class="content-point">
  29. <div class="content-point-left">
  30. <el-scrollbar style="height:100%;">
  31. <div>
  32. <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
  33. </div>
  34. </el-scrollbar>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- 竖井内的设备 -->
  40. <device-table v-if="activeTab=='device'" :params="params" :type="activeTab"></device-table>
  41. <!-- 连通的其他竖井 -->
  42. <cenote-table v-else-if="activeTab=='cenote'" :params="params" :type="activeTab"></cenote-table>
  43. <!-- 竖井内系统 -->
  44. <system-table v-else-if="activeTab=='system'" :params="params" :type="activeTab"></system-table>
  45. </div>
  46. </div>
  47. </template>
  48. <script>
  49. import {mapGetters} from "vuex"
  50. import {deleteCenoteTableData, getDataDictionary, queryCenoteTableData} from '@/api/scan/request'
  51. import cenoteTable from '@/components/ledger/cenote/table/cenoteTable'
  52. import deviceTable from '@/components/ledger/cenote/table/deviceTable'
  53. import systemTable from '@/components/ledger/cenote/table/systemTable'
  54. import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
  55. import selectRadio from "@/components/ledger/details/detail/selectRadio";
  56. import tools from "@/utils/scan/tools"
  57. export default {
  58. data() {
  59. return {
  60. params: {},
  61. tabsList: [
  62. {Code: 'detail', Name: '竖井详情'},
  63. {Code: 'device', Name: '竖井内的设备'},
  64. {Code: 'cenote', Name: '连通的其它竖井'},
  65. {Code: 'system', Name: '竖井内系统'},
  66. ], //tab页
  67. activeTab: 'detail', //当前选中的tab
  68. pointData: [], //信息点数据
  69. exampleData: {}, //实例数据
  70. exhibitionBaseInformation: {
  71. information: {}
  72. },
  73. selectRadio: {
  74. information: '设备信息点',
  75. initRadio: '1',
  76. radioList: [
  77. {
  78. value: '显示需采集信息点',
  79. label: '1'
  80. },
  81. {
  82. value: '显示有值信息点',
  83. label: '2'
  84. },
  85. {
  86. value: '显示全部信息点',
  87. label: '3'
  88. }
  89. ]
  90. },
  91. }
  92. },
  93. computed: {
  94. ...mapGetters("layout", ["projectId", "userId", "secret"])
  95. },
  96. components: {
  97. cenoteTable,
  98. deviceTable,
  99. systemTable,
  100. exhibitionBaseInformation,
  101. selectRadio
  102. },
  103. created() {
  104. this.params = this.$route.query;
  105. this.getData();
  106. },
  107. mounted() { },
  108. watch: {
  109. projectId() { }
  110. },
  111. methods: {
  112. deepCopy(obj) {
  113. return JSON.parse(JSON.stringify(obj))
  114. },
  115. // 返回
  116. goBack() {
  117. this.$router.push({name: "cenotelist"});
  118. },
  119. getData() {
  120. let params1 = {
  121. data: {
  122. Orders: "sort asc",
  123. PageNumber: 1,
  124. PageSize: 1000
  125. },
  126. type: 'Shaft'
  127. }, params2 = {
  128. Filters: `ShaftID='${this.params.ShaftID}'`
  129. };
  130. let promise1 = new Promise((resolve, reject) => {
  131. getDataDictionary(params1, res => {
  132. resolve(res)
  133. })
  134. })
  135. let promise2 = new Promise((resolve, reject) => {
  136. queryCenoteTableData(params2, res => {
  137. resolve(res)
  138. })
  139. })
  140. Promise.all([promise1, promise2]).then(values => {
  141. this.pointData = values[0].Content;
  142. this.exampleData = values[1].Content[0];
  143. let obj = this.deepCopy(values[1].Content[0]);
  144. obj = tools.flattenKeys(obj);
  145. this.instance = obj;
  146. this.handleRadios(1)
  147. })
  148. },
  149. handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
  150. let arr = []
  151. if (val == 1) { //需采集信息
  152. arr = this.pointData.filter(i => i.Visible)
  153. } else if (val == 2) { //有值信息点
  154. let list = this.pointData
  155. list.map(j => {
  156. if (this.instance.hasOwnProperty(j.Path)) {
  157. return {
  158. ...j,
  159. value: this.instance[j.Path]
  160. }
  161. }
  162. arr = list.filter(k => k.value)
  163. })
  164. } else { //全部信息点
  165. arr = this.pointData
  166. }
  167. this.displayData(arr)
  168. },
  169. changeRadio(val) { //1,需采集,2,有值,3,全部
  170. this.handleRadios(val)
  171. this.currentRadio = val
  172. },
  173. formatDate(str) {
  174. return str ? str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2) + ":" +str.substr(10,2) + ":"+str.substr(12,2) :'--'
  175. },
  176. displayData(arr) {//对数据进行处理传给组件展示
  177. const result = {}
  178. arr.forEach(i => {
  179. if (this.instance.hasOwnProperty(i.Path) && this.currentRadio != 2) {
  180. i.value = this.instance[i.Path]
  181. }
  182. if (i.InputMode == 'C5') {
  183. if (this.instance.hasOwnProperty(i.Path)) {
  184. let time = this.instance[i.Path]
  185. i.value = this.formatDate(time)
  186. }
  187. }
  188. if (i.DataSource && i.DataSource.length) {
  189. let source = JSON.parse(i.DataSource)
  190. //判断输入类型
  191. if (i.InputMode == 'D1L') {
  192. let d1l = tools.formatDataSource(i.DataSource)
  193. d1l.forEach(k => {
  194. if (k.Code == this.instance[i.Path]) {
  195. i.value = k.Name
  196. }
  197. })
  198. } else if (i.InputMode == 'D2' || i.InputMode == 'C6') {
  199. if (this.instance.hasOwnProperty(i.Path)) {
  200. if (!Array.isArray(this.instance[i.Path])) {
  201. let transArray = this.instance[i.Path].split(',')
  202. i.value = source.filter(item => transArray.includes(item.Code)).map(item => item.Name).join(',')
  203. }
  204. }
  205. }
  206. source.forEach(j => {
  207. if (j.Code == this.instance[i.Path]) {
  208. console.log(j.Name)
  209. i.value = j.Name
  210. }
  211. })
  212. }
  213. switch (i.InputMode) {
  214. case "L":
  215. case "L1":
  216. case "L2":
  217. case "M":
  218. break;
  219. default:
  220. if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
  221. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
  222. Path: i.Path,
  223. InfoPointName: i.InfoPointName,
  224. InfoPointCode: i.InfoPointCode,
  225. Value: i.value,
  226. Visible: i.Visible,
  227. KeyWord: i.KeyWord,
  228. InputMode:i.InputMode
  229. })
  230. } else {
  231. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
  232. paths: [{
  233. Path: i.Path,
  234. InfoPointName: i.InfoPointName,
  235. InfoPointCode: i.InfoPointCode,
  236. Value: i.value,
  237. Visible: i.Visible,
  238. KeyWord: i.KeyWord,
  239. InputMode:i.InputMode
  240. }]
  241. }
  242. }
  243. }
  244. })
  245. this.exhibitionBaseInformation.information = result
  246. },
  247. // 删除业务空间
  248. deleteCenote() {
  249. this.$confirm("此操作将删除竖井,是否继续?", "提示", {
  250. confirmButtonText: '确定',
  251. cancelButtonText: '取消',
  252. type: 'warning'
  253. }).then(() => {
  254. deleteCenoteTableData([{ShaftID: this.params.ShaftID}], res => {
  255. this.$message.success('删除成功')
  256. this.goBack()
  257. })
  258. }).catch(() => {
  259. this.$message("取消删除")
  260. })
  261. }
  262. }
  263. };
  264. </script>
  265. <style scoped lang='less'>
  266. .box {
  267. .condition {
  268. padding: 10px;
  269. display: flex;
  270. height: 100%;
  271. flex-direction: column;
  272. border: 1px solid #dfe6ec;
  273. box-sizing: border-box;
  274. background: #fff;
  275. .header {
  276. padding-bottom: 10px;
  277. span {
  278. line-height: 33px;
  279. margin-left: 15px;
  280. }
  281. }
  282. .spaceTypes {
  283. .types {
  284. float: left;
  285. width: calc(100% - 200px);
  286. /deep/ .el-tabs__item.is-top {
  287. border-top: 2px solid transparent;
  288. &.is-active {
  289. border-top: 2px solid #409eff;
  290. }
  291. }
  292. }
  293. .deleBtn {
  294. float: left;
  295. width: 200px;
  296. text-align: right;
  297. height: 40px;
  298. border-bottom: 1px solid #e4e7ed;
  299. }
  300. }
  301. .content {
  302. display: flex;
  303. flex-direction: row;
  304. box-sizing: border-box;
  305. height: calc(100% - 99px);
  306. .content-left {
  307. display: flex;
  308. flex-direction: column;
  309. flex: 1;
  310. .content-showType {
  311. height: 50px;
  312. border: 1px solid #ccc;
  313. border-bottom: none;
  314. box-sizing: border-box;
  315. }
  316. .content-point {
  317. display: flex;
  318. flex-direction: row;
  319. height: calc(100% - 50px);
  320. border: 1px solid #ccc;
  321. box-sizing: border-box;
  322. .content-point-left {
  323. flex: 1;
  324. }
  325. }
  326. }
  327. }
  328. .main {
  329. margin-top: 10px;
  330. height: calc(100% - 96px);
  331. }
  332. .footer {
  333. margin-bottom: 10px;
  334. }
  335. /deep/ .el-scrollbar__wrap {
  336. overflow-x: hidden;
  337. }
  338. }
  339. }
  340. </style>
  341. <style lang="less">
  342. .el-table th {
  343. background-color: #d9d9d9;
  344. color: #000;
  345. }
  346. </style>