drafts.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div id="drafts">
  3. <div class="tit">草稿箱</div>
  4. <div class="conent">
  5. <div class="left-nav">
  6. <Tree :data="treeData" @change="change"></Tree>
  7. </div>
  8. <div class="conent-right">
  9. <div class="conent-tit">
  10. <div class="tit-left">消防系统-4F</div>
  11. <div class="tit-right">
  12. <a-button>删除</a-button>
  13. <a-button>发布</a-button>
  14. <a-button type="primary">编辑</a-button>
  15. </div>
  16. </div>
  17. <div class="concent-bottom">
  18. <div class="map">
  19. <div class="legend-btn" @click="legend = !legend">
  20. <a-icon type="right" style="color: #8D9399;font-size: 10px"/>
  21. </div>
  22. </div>
  23. <div class="legend" v-if="legend">
  24. <div style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px">可能需要补充的图例</div>
  25. <a-table :columns="columns" :data-source="data" size="middle" :pagination="false">
  26. <img style="width:10px;heigth:10px" slot="img" slot-scope="text, record" :src="require('@/assets/images/'+record.img+'.png')" />
  27. <template v-slot:state>
  28. </template>
  29. </a-table>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. const dataArr = [
  38. {
  39. id: "0",
  40. name: "顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级",
  41. open: false,
  42. checked: "uncheck",
  43. children: [
  44. {
  45. id: "1",
  46. name: "一级1",
  47. open: false,
  48. checked: "uncheck",
  49. children: [
  50. { id: "12", name: "二级2", checked: "uncheck" },
  51. { id: "121", name: "二级3", checked: "uncheck" },
  52. { id: "122", name: "二级4", checked: "uncheck" },
  53. {
  54. id: "1321",
  55. name: "二级1",
  56. open: false,
  57. checked: "uncheck",
  58. children: [
  59. { id: "13", name: "三级2", checked: "uncheck" },
  60. { id: "131", name: "三级3", checked: "uncheck" },
  61. { id: "132", name: "三级4", checked: "uncheck" }
  62. ]
  63. }
  64. ]
  65. },
  66. {
  67. id: "2",
  68. name: "一级2",
  69. open: false,
  70. checked: "uncheck",
  71. children: [
  72. { id: "222", name: "二级2", checked: "uncheck" },
  73. { id: "2221", name: "二级1", checked: "uncheck" },
  74. { id: "2222", name: "二级3", checked: "uncheck" }
  75. ]
  76. },
  77. {
  78. id: "3",
  79. name: "一级3",
  80. open: false,
  81. checked: "uncheck",
  82. children: [
  83. { id: "322", name: "二级2", checked: "uncheck" },
  84. { id: "3220", name: "二级0", checked: "uncheck" },
  85. { id: "3221", name: "二级1", checked: "uncheck" }
  86. ]
  87. }
  88. ],
  89. }
  90. ];
  91. import Tree from "./../components/Tree/Tree.vue";
  92. export default {
  93. components: { Tree },
  94. data() {
  95. return {
  96. treeData:JSON.parse(JSON.stringify(dataArr)),
  97. columns:[
  98. {
  99. title: "名称", // 列的名称
  100. dataIndex: "name", // 列的标识
  101. scopedSlots: { customRender: 'name' }
  102. },{
  103. title: "图例", // 列的名称
  104. dataIndex: "img", // 列的标识
  105. scopedSlots: { customRender: 'img' }
  106. },
  107. ],
  108. data: [
  109. {
  110. key: "1",
  111. name: "客梯",
  112. img:'shubiao'
  113. },
  114. {
  115. key: "2",
  116. name: "防火分区",
  117. img:'shubiao'
  118. },
  119. {
  120. key: "3",
  121. name: "消防泵室",
  122. img:'shubiao'
  123. },
  124. ],
  125. legend:false
  126. };
  127. },
  128. methods: {
  129. change() {}
  130. }
  131. };
  132. </script>
  133. <style lang="less" scoped>
  134. #drafts {
  135. widows: 100%;
  136. height: 100%;
  137. background: #f7f9fa;
  138. position: relative;
  139. .tit {
  140. width: 100%;
  141. height: 48px;
  142. display: flex;
  143. justify-content: center;
  144. align-items: center;
  145. border-bottom: #e4e5e7 solid 1px;
  146. font-size: 16px;
  147. font-weight: bold;
  148. }
  149. .conent {
  150. width: 100%;
  151. height: calc(100% - 48px);
  152. display: flex;
  153. position: relative;
  154. .left-nav {
  155. width: 224px;
  156. height: 100%;
  157. padding: 0 12px;
  158. }
  159. .conent-right {
  160. flex: 1;
  161. height: 100%;
  162. background: #fff;
  163. .conent-tit {
  164. width: 100%;
  165. display: flex;
  166. height: 59px;
  167. border: 1px solid #eff0f1;
  168. align-items: center;
  169. justify-content: space-between;
  170. padding: 0 16px 0 16px;
  171. box-sizing: border-box;
  172. .tit-left {
  173. font-size: 16px;
  174. font-weight: bold;
  175. color: rgba(31, 35, 41, 1);
  176. }
  177. .tit-right {
  178. width: 246px;
  179. display: flex;
  180. justify-content: space-between;
  181. }
  182. }
  183. .concent-bottom{
  184. height: calc(100% - 61px);
  185. display: flex;
  186. .map {
  187. flex: 1;
  188. position: relative;
  189. /*height: calc(100% - 61px);*/
  190. /*background: red;*/
  191. .legend-btn{
  192. position: absolute;
  193. right: 0;
  194. top:9px;
  195. width:10px;
  196. height:24px;
  197. background:rgba(228,229,231,1);
  198. display: flex;
  199. justify-content: center;
  200. align-items: center;
  201. cursor: pointer;
  202. }
  203. }
  204. .legend{
  205. width: 200px;
  206. border-left: 1px solid #EFF0F1;
  207. height:100%;
  208. }
  209. }
  210. }
  211. }
  212. }
  213. </style>