editer.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="editer">
  3. <div class="top-bar">
  4. <div class="left">
  5. <div class="project-name">{{ name }}-{{ floorLocalName }}</div>
  6. <div class="project-type">/ {{ 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. },
  34. computed: {
  35. ...mapState(["name", "folderName", "floorLocalName", "version"]),
  36. },
  37. created() {
  38. // window.vm = this;
  39. this.init();
  40. },
  41. methods: {
  42. ...mapMutations(["SETPROJECT", "INITEQUIPMAP", "INITSTYLE", "INITRULELIST", "INITOBJEXTINFO"]),
  43. init() {
  44. // 重新加载时初始化 vuex 数据
  45. this.INITEQUIPMAP();
  46. this.INITOBJEXTINFO({});
  47. this.INITSTYLE({});
  48. this.INITRULELIST([]);
  49. },
  50. // 保存图片
  51. saveTopo() {
  52. bus.$emit("saveTopo");
  53. },
  54. // 发布
  55. issueTopo() {
  56. bus.$emit("issueTopo");
  57. },
  58. // 下载图片
  59. saveTopoImg() {
  60. bus.$emit("saveTopoImg");
  61. },
  62. },
  63. watch: {
  64. "$route.query": {
  65. handler(newVal) {
  66. this.SETPROJECT(newVal);
  67. },
  68. immediate: true,
  69. deep: true,
  70. },
  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>