editer.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="editer">
  3. <div class="top-bar">
  4. <div class="left">
  5. <div class="project-name">{{ name }}</div>
  6. <div class="project-type">/ {{ floorLocalName }}({{ folderName }})</div>
  7. <div class="project-save">自动保存成功- v {{ version }}</div>
  8. </div>
  9. <div class="right">
  10. <el-tooltip class="item" effect="dark" content="下载" placement="bottom">
  11. <span @click="saveTopoImg" class="icon iconfont icon-xiazai"></span>
  12. </el-tooltip>
  13. <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
  14. <span @click="saveTopo" class="icon iconfont icon-baocun"></span>
  15. </el-tooltip>
  16. <el-tooltip class="item" effect="dark" content="发布" placement="bottom">
  17. <span @click="issueTopo" class="icon iconfont icon-fabu"></span>
  18. </el-tooltip>
  19. </div>
  20. </div>
  21. <plan-editer></plan-editer>
  22. </div>
  23. </template>
  24. <script>
  25. // import topoEditer from "@/components/editview/topoEditer.vue";
  26. import planEditer from "@/components/editview/planEditer.vue";
  27. import bus from "@/bus/bus";
  28. import { mapState, mapMutations } from "vuex";
  29. export default {
  30. components: { planEditer },
  31. data() {
  32. return {
  33. categoryName: "", //项目分类
  34. };
  35. },
  36. methods: {
  37. ...mapMutations(["SETPROJECT", "INITEQUIPMAP"]),
  38. // 保存图片
  39. saveTopo() {
  40. bus.$emit("saveTopo");
  41. },
  42. // 发布
  43. issueTopo() {
  44. bus.$emit("issueTopo");
  45. },
  46. // 下载图片
  47. saveTopoImg() {
  48. bus.$emit("saveTopoImg");
  49. },
  50. },
  51. computed: {
  52. ...mapState([
  53. "tupoName",
  54. "name",
  55. "folderId",
  56. "folderName",
  57. "buildingId",
  58. "floorId",
  59. "floorMap",
  60. "floorLocalName",
  61. "id",
  62. "graphId",
  63. "version",
  64. "state",
  65. ]),
  66. },
  67. created() {
  68. window.vm = this;
  69. this.INITEQUIPMAP();
  70. this.SETPROJECT(this.$route.query);
  71. },
  72. };
  73. </script>
  74. <style lang="less" scoped>
  75. .editer {
  76. width: 100%;
  77. height: calc(~"100% - 37px");
  78. .top-bar {
  79. width: 100%;
  80. height: 36px;
  81. border-bottom: 1px solid #e4e5e7;
  82. padding: 0 20px 0 20px;
  83. box-sizing: border-box;
  84. display: flex;
  85. align-items: center;
  86. justify-content: space-between;
  87. .left {
  88. display: flex;
  89. align-items: center;
  90. .project-name {
  91. font-size: 16px;
  92. color: #1f2429;
  93. font-weight: bold;
  94. }
  95. .project-type {
  96. color: #8d9399;
  97. font-size: 14px;
  98. margin: 0 4px;
  99. }
  100. .project-save {
  101. color: #8d9399;
  102. font-size: 12px;
  103. margin-left: 16px;
  104. }
  105. }
  106. .right {
  107. span {
  108. margin-left: 20px;
  109. cursor: pointer;
  110. }
  111. }
  112. }
  113. }
  114. </style>