index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <div class="saga-config-point">
  3. <div style="line-height:34px;padding-left:10px">
  4. <span style="display:inline-block;height: 35px;line-height:34px;">此项目包括<i
  5. style="color:#409EFF;">{{list.length}}</i>个数据源</span>
  6. <div style="float:right;height:34px;line-height:34px;padding-bottom: 1px;">
  7. <!-- <el-button @click="sameData">同步配置文件到云端</el-button> -->
  8. <el-button style="width:140px;" @click="addItem">添加数据源</el-button>
  9. </div>
  10. </div>
  11. <div class="saga-origin-list" v-loading="isLoading">
  12. <!-- <el-scrollbar> -->
  13. <div class="disIne border-hover saga-list-item margin5" v-for="(item,index) in list" :key="index">
  14. <data-origin :id="'origin' + index" :renderData="item">
  15. <div class="center">
  16. <el-button @click="maintenance(item)" type="text">编辑点位</el-button>
  17. <el-button @click="goEdit(item)" type="text">编辑数据源</el-button>
  18. <el-button @click="del(item)" type="text">删除</el-button>
  19. </div>
  20. </data-origin>
  21. </div>
  22. <div v-if="!list.length" class="center" style="margin-top: 260px;">
  23. <i class="icon-wushuju iconfont"></i>
  24. 暂无数据
  25. </div>
  26. <!-- <div class="disIne saga-list-item margin5 center pointer" @click="addItem">
  27. <i class="add-icon margin50">+</i>
  28. </div> -->
  29. <!-- </el-scrollbar> -->
  30. </div>
  31. <dataSourceDialog ref="dialog"></dataSourceDialog>
  32. </div>
  33. </template>
  34. <script>
  35. import "@/assets/scss/point/point_config/common.scss"
  36. import "@/assets/scss/point/point_config/reset.scss"
  37. import dataOrigin from "@/components/config_point/data_origin"
  38. import {mapGetters} from "vuex";
  39. import {queryDataSourceCount, synchronizeProj} from "@/fetch/point_http"
  40. import dataSourceDialog from "./edit_origin/dialog";
  41. export default {
  42. components: {
  43. dataOrigin, dataSourceDialog
  44. },
  45. data() {
  46. return {
  47. projectName: "项目名称",
  48. list: [],
  49. isLoading: false
  50. }
  51. },
  52. computed: {
  53. ...mapGetters("layout", [
  54. "projectId"
  55. ])
  56. },
  57. created() {
  58. },
  59. mounted() {
  60. console.log(this.projectId)
  61. this.getList()
  62. },
  63. methods: {
  64. //同步数据
  65. sameData(){
  66. this.$confirm("确定要同步数据?").then( _ => {
  67. synchronizeProj(res => {
  68. this.$message.success("同步成功")
  69. })
  70. }).catch(_ => {
  71. this.$message("取消同步")
  72. })
  73. },
  74. getList(){
  75. this.isLoading = true
  76. queryDataSourceCount({},res => {
  77. this.isLoading = false
  78. console.log(res)
  79. this.list = res.Content
  80. })
  81. },
  82. addItem() {
  83. this.$refs.dialog.openDialog()
  84. },
  85. goEdit(item) {
  86. this.$refs.dialog.openDialog(item)
  87. },
  88. del(item) {
  89. this.$confirm('删除后无法恢复,所有点位将丢失,是否需要删除', '提示', {
  90. confirmButtonText: '确定',
  91. cancelButtonText: '取消',
  92. type: 'warning'
  93. }).then(() => {
  94. this.$message.success('删除成功')
  95. }).catch(() => {
  96. this.$message.info('已取消删除')
  97. })
  98. },
  99. maintenance(item) {
  100. console.log(item)
  101. this.$store.commit("project/set_datasource", item.Id);
  102. this.$store.commit("project/set_protocol_type", item.ProtocolType);
  103. this.$store.commit("project/set_datasource_name", item.Name);
  104. this.$router.push({
  105. path: "pointSteps",
  106. })
  107. }
  108. },
  109. watch: {
  110. projectId(){
  111. this.getList()
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="scss" scoped>
  117. .saga-config-point {
  118. display: flex;
  119. flex-flow: column;
  120. .add-icon {
  121. font-size: 40px;
  122. }
  123. .margin50 {
  124. display: block;
  125. height: 100%;
  126. line-height: 8;
  127. }
  128. .saga-origin-list {
  129. flex: 1;
  130. // display: flex;
  131. // flex-wrap: wrap;
  132. // justify-content: space-around;
  133. .saga-list-item {
  134. background-color: #fff;
  135. width: 345px;
  136. height: 294px;
  137. border-radius: 5px;
  138. border: 1px solid #ddd;
  139. }
  140. }
  141. }
  142. </style>