index.vue 4.2 KB

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