123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <template>
- <div id="drafts">
- <div class="tit">草稿箱</div>
- <div class="conent">
- <div class="left-nav">
- <Tree :data="treeData" @change="change"></Tree>
- </div>
- <div class="conent-right">
- <div class="conent-tit">
- <div class="tit-left">消防系统-4F</div>
- <div class="tit-right">
- <a-button>删除</a-button>
- <a-button>发布</a-button>
- <a-button type="primary">编辑</a-button>
- </div>
- </div>
- <div class="concent-bottom">
- <div class="map">
- <div class="legend-btn" @click="legend = !legend">
- <a-icon type="right" style="color: #8D9399;font-size: 10px"/>
- </div>
- </div>
- <div class="legend" v-if="legend">
- <div style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px">可能需要补充的图例</div>
- <a-table :columns="columns" :data-source="data" size="middle" :pagination="false">
- <img style="width:10px;heigth:10px" slot="img" slot-scope="text, record" :src="require('@/assets/images/'+record.img+'.png')" />
- <template v-slot:state>
- </template>
- </a-table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- const dataArr = [
- {
- id: "0",
- name: "顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级",
- open: false,
- checked: "uncheck",
- children: [
- {
- id: "1",
- name: "一级1",
- open: false,
- checked: "uncheck",
- children: [
- { id: "12", name: "二级2", checked: "uncheck" },
- { id: "121", name: "二级3", checked: "uncheck" },
- { id: "122", name: "二级4", checked: "uncheck" },
- {
- id: "1321",
- name: "二级1",
- open: false,
- checked: "uncheck",
- children: [
- { id: "13", name: "三级2", checked: "uncheck" },
- { id: "131", name: "三级3", checked: "uncheck" },
- { id: "132", name: "三级4", checked: "uncheck" }
- ]
- }
- ]
- },
- {
- id: "2",
- name: "一级2",
- open: false,
- checked: "uncheck",
- children: [
- { id: "222", name: "二级2", checked: "uncheck" },
- { id: "2221", name: "二级1", checked: "uncheck" },
- { id: "2222", name: "二级3", checked: "uncheck" }
- ]
- },
- {
- id: "3",
- name: "一级3",
- open: false,
- checked: "uncheck",
- children: [
- { id: "322", name: "二级2", checked: "uncheck" },
- { id: "3220", name: "二级0", checked: "uncheck" },
- { id: "3221", name: "二级1", checked: "uncheck" }
- ]
- }
- ],
- }
- ];
- import Tree from "./../components/Tree/Tree.vue";
- export default {
- components: { Tree },
- data() {
- return {
- treeData:JSON.parse(JSON.stringify(dataArr)),
- columns:[
- {
- title: "名称", // 列的名称
- dataIndex: "name", // 列的标识
- scopedSlots: { customRender: 'name' }
- },{
- title: "图例", // 列的名称
- dataIndex: "img", // 列的标识
- scopedSlots: { customRender: 'img' }
- },
- ],
- data: [
- {
- key: "1",
- name: "客梯",
- img:'shubiao'
- },
- {
- key: "2",
- name: "防火分区",
- img:'shubiao'
- },
- {
- key: "3",
- name: "消防泵室",
- img:'shubiao'
- },
- ],
- legend:false
- };
- },
- methods: {
- change() {}
- }
- };
- </script>
- <style lang="less" scoped>
- #drafts {
- widows: 100%;
- height: 100%;
- background: #f7f9fa;
- position: relative;
- .tit {
- width: 100%;
- height: 48px;
- display: flex;
- justify-content: center;
- align-items: center;
- border-bottom: #e4e5e7 solid 1px;
- font-size: 16px;
- font-weight: bold;
- }
- .conent {
- width: 100%;
- height: calc(100% - 48px);
- display: flex;
- position: relative;
- .left-nav {
- width: 224px;
- height: 100%;
- padding: 0 12px;
- }
- .conent-right {
- flex: 1;
- height: 100%;
- background: #fff;
- .conent-tit {
- width: 100%;
- display: flex;
- height: 59px;
- border: 1px solid #eff0f1;
- align-items: center;
- justify-content: space-between;
- padding: 0 16px 0 16px;
- box-sizing: border-box;
- .tit-left {
- font-size: 16px;
- font-weight: bold;
- color: rgba(31, 35, 41, 1);
- }
- .tit-right {
- width: 246px;
- display: flex;
- justify-content: space-between;
- }
- }
- .concent-bottom{
- height: calc(100% - 61px);
- display: flex;
- .map {
- flex: 1;
- position: relative;
- /*height: calc(100% - 61px);*/
- /*background: red;*/
- .legend-btn{
- position: absolute;
- right: 0;
- top:9px;
- width:10px;
- height:24px;
- background:rgba(228,229,231,1);
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
- }
- .legend{
- width: 200px;
- border-left: 1px solid #EFF0F1;
- height:100%;
- }
- }
- }
- }
- }
- </style>
|