index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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 style="color:#409EFF;">{{list.length}}</i>个数据源</span>
  5. <div style="float:right;height:34px;line-height:34px;padding-bottom: 1px;">
  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 v-if="!list.length" class="center" style="margin-top: 260px;">
  21. <i class="iconwushuju iconfont"></i>
  22. 暂无数据
  23. </div>
  24. <!-- <div class="disIne saga-list-item margin5 center pointer" @click="addItem">
  25. <i class="add-icon margin50">+</i>
  26. </div> -->
  27. <!-- </el-scrollbar> -->
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import "@/assets/scss/point/point_config/common.scss"
  33. import "@/assets/scss/point/point_config/reset.scss"
  34. import dataOrigin from "@/components/config_point/data_origin"
  35. import {
  36. mapGetters,
  37. mapActions
  38. } from "vuex";
  39. import { queryDataSourceCount,synchronizeProj } from "@/fetch/point_http"
  40. export default {
  41. components: {
  42. dataOrigin
  43. },
  44. data() {
  45. return {
  46. projectName: "项目名称",
  47. list: [],
  48. isLoading: false
  49. }
  50. },
  51. computed: {
  52. ...mapGetters("layout", [
  53. "projectId"
  54. ])
  55. },
  56. created() {},
  57. mounted() {
  58. console.log(this.projectId)
  59. this.getList()
  60. },
  61. methods: {
  62. //同步数据
  63. sameData(){
  64. this.$confirm("确定要同步数据?").then( _ => {
  65. synchronizeProj(res => {
  66. this.$message.success("同步成功")
  67. })
  68. }).catch(_ => {
  69. this.$message("取消同步")
  70. })
  71. },
  72. getList(){
  73. this.isLoading = true
  74. queryDataSourceCount({},res => {
  75. this.isLoading = false
  76. console.log(res)
  77. this.list = res.Content
  78. })
  79. },
  80. addItem() {
  81. this.$router.push({
  82. path: "editDataSouce"
  83. })
  84. },
  85. goEdit(item) {
  86. console.log(item)
  87. this.$router.push({
  88. path: "editDataSouce",
  89. query: {
  90. key: item.Id
  91. }
  92. })
  93. },
  94. maintenance(item) {
  95. console.log(item)
  96. this.$store.commit("project/set_datasource", item.Id);
  97. this.$store.commit("project/set_protocol_type", item.ProtocolType);
  98. this.$store.commit("project/set_datasource_name", item.Name);
  99. this.$router.push({
  100. path: "pointSteps",
  101. })
  102. }
  103. },
  104. watch: {
  105. projectId(){
  106. this.getList()
  107. }
  108. }
  109. }
  110. </script>
  111. <style lang="scss" scoped>
  112. .saga-config-point {
  113. display: flex;
  114. flex-flow: column;
  115. .add-icon {
  116. font-size: 40px;
  117. }
  118. .margin50 {
  119. display: block;
  120. height: 100%;
  121. line-height: 8;
  122. }
  123. .saga-origin-list {
  124. flex: 1;
  125. // display: flex;
  126. // flex-wrap: wrap;
  127. // justify-content: space-around;
  128. .saga-list-item {
  129. background-color: #fff;
  130. width: 345px;
  131. height: 294px;
  132. border-radius: 5px;
  133. border: 1px solid #ddd;
  134. }
  135. }
  136. }
  137. </style>