From 0bbc5abeab6a1cb504b36bcd620fcb55e496d989 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期一, 21 三月 2022 10:32:50 +0800 Subject: [PATCH] '登录页' --- src/components/Tab/Plot.vue | 460 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 230 insertions(+), 230 deletions(-) diff --git a/src/components/Tab/Plot.vue b/src/components/Tab/Plot.vue index 798c15d..1082c5a 100644 --- a/src/components/Tab/Plot.vue +++ b/src/components/Tab/Plot.vue @@ -1,250 +1,250 @@ <template> - <div class="container"> - <div class="model-panel-list"> - <el-row :gutter="10"> - <el-col :span="6"> - <el-button - icon="el-icon-plus" - size="small" - type="primary" - @click="showCreateHandle" - > - 创建 - </el-button> - </el-col> - <el-col :span="6"> - <el-button - icon="el-icon-delete" - size="small" - type="danger" - @click="clearHandle" - > - 清空 - </el-button> - </el-col> - <el-col :span="6"> - <el-button - icon="el-icon-view" - size="small" - :type="showPlot ? 'success' : 'info'" - @click="toggleVisible" - > - {{ showPlot ? '隐藏' : '显示' }} - </el-button> - </el-col> - </el-row> - <el-row :gutter="10" v-for="label in labels" :key="label.attr.id"> - <el-col :span="14"> - {{ label.attr.name || ' ' }} - </el-col> - <el-col :span="10" style="textalign: right"> - <el-button - icon="el-icon-s-promotion" - size="mini" - circle - @click="() => focusHandle(label.attr.id)" - /> - <el-button - icon="el-icon-edit" - size="mini" - circle - @click="() => editHandle(label)" - /> - <el-button - icon="el-icon-delete" - type="danger" - size="mini" - circle - @click="() => removeHandle(label.attr.id)" - /> - </el-col> - </el-row> - </div> - <el-dialog - :visible="showCreatePanel" - width="380px" - title="创建标注" - :append-to-body="true" - :close-on-click-modal="false" - :before-close="closeCreateHandle" - > - <p>请输入内容:</p> - <el-input v-model="label.name" placeholder="请输入内容" /> - <span slot="footer" class="dialog-footer"> + <div class="container"> + <div class="model-panel-list"> + <el-row :gutter="10"> + <el-col :span="6"> + <el-button + icon="el-icon-plus" + size="small" + type="primary" + @click="showCreateHandle" + > + 创建 + </el-button> + </el-col> + <el-col :span="6"> + <el-button + icon="el-icon-delete" + size="small" + type="danger" + @click="clearHandle" + > + 清空 + </el-button> + </el-col> + <el-col :span="6"> + <el-button + icon="el-icon-view" + size="small" + :type="showPlot ? 'success' : 'info'" + @click="toggleVisible" + > + {{ showPlot ? '隐藏' : '显示' }} + </el-button> + </el-col> + </el-row> + <el-row :gutter="10" v-for="label in labels" :key="label.attr.id"> + <el-col :span="14"> + {{ label.attr.name || ' ' }} + </el-col> + <el-col :span="10" style="textalign: right"> + <el-button + icon="el-icon-s-promotion" + size="mini" + circle + @click="() => focusHandle(label.attr.id)" + /> + <el-button + icon="el-icon-edit" + size="mini" + circle + @click="() => editHandle(label)" + /> + <el-button + icon="el-icon-delete" + type="danger" + size="mini" + circle + @click="() => removeHandle(label.attr.id)" + /> + </el-col> + </el-row> + </div> + <el-dialog + :visible="showCreatePanel" + width="380px" + title="创建标注" + :append-to-body="true" + :close-on-click-modal="false" + :before-close="closeCreateHandle" + > + <p>请输入内容:</p> + <el-input v-model="label.name" placeholder="请输入内容" /> + <span slot="footer" class="dialog-footer"> <el-button @click="closeCreateHandle">取 消</el-button> <el-button type="primary" @click="createHandle">确 定</el-button> </span> - </el-dialog> - </div> + </el-dialog> + </div> </template> <script> -import { global } from '../../global'; + import { global } from '../../global'; -// 默认样式 -const LABEL_STYLE = { - opacity: 1, - color: '#FFFFFF', - font_family: '黑体', - font_size: 18, - font_style: 'normal', - font_weight: 'normal', - border: false, - border_color: '#ffffff', - border_width: 2, - background: true, - background_color: 'rgba(0, 0, 0, .8)', -}; - -export default { - components: {}, - data() { - return { - label: { - id: null, - name: '', - }, - showCreatePanel: false, - showPlot: true, + // 默认样式 + const LABEL_STYLE = { + opacity: 1, + color: '#FFFFFF', + font_family: '黑体', + font_size: 18, + font_style: 'normal', + font_weight: 'normal', + border: false, + border_color: '#ffffff', + border_width: 2, + background: true, + background_color: 'rgba(0, 0, 0, .8)', }; - }, - computed: { - timestamp() { - return this.$store.state.map.timestamp; - }, - labels() { - return this.entities.map(entity => entity.attribute); - }, - entities() { - let entities = - this.timestamp && global.map - ? global.map.plotDrawTool.getEntitys() - : []; - return entities.filter(entity => entity.attribute.type === 'polygon'); - }, - }, - methods: { - editHandle(label) { - if (!global.map) return; - this.label = { - id: label.attr.id, - name: label.attr.name, - }; - this.showCreatePanel = true; - }, - removeHandle(id) { - if (!global.map) return; - global.map.deletePlot(id); - this.$store.dispatch('map/updateTimestamp'); - }, - closeCreateHandle() { - this.showCreatePanel = false; - }, - showCreateHandle() { - this.showCreatePanel = true; - }, - _initLabel() { - this.label = { - id: null, - name: '', - }; - }, - createHandle() { - if (!global.map) return; - let map = global.map; - const { id, name } = this.label; - const entity = id && map.getPlotById(id); - this.closeCreateHandle(); - if (entity) { - map.updatePlotStyle(id, { text: name }); - map.updatePlotAttribute(id, { name }); - this._initLabel(); - this.$store.dispatch('map/updateTimestamp'); - } else { - map.startDraw( - { - type: 'polygon', - style: { text: name }, - attr: { - name, + + export default { + components: {}, + data() { + return { + label: { + id: null, + name: '', + }, + showCreatePanel: false, + showPlot: true, + }; + }, + computed: { + timestamp() { + return this.$store.state.map.timestamp; }, - }, - () => { - this._initLabel(); - this.$store.dispatch('map/updateTimestamp'); - } - ); - } - }, - toggleVisible() { - this.showPlot = !this.showPlot; - if (global.map) { - this.entities.forEach(entity => { - entity.show = this.showPlot; - }); - } - this.$store.dispatch('map/updateTimestamp'); - }, - focusHandle(markerId) { - if (global.map) { - const entity = global.map.getPlotById(markerId); - if (entity) { - global.map.viewer.flyTo(entity, { duration: 1 }); - } - } - }, - clearHandle() { - if (global.map) { - this.entities.forEach(entity => { - global.map.plotDrawTool.deleteEntity(entity); - }); - } - this.$store.dispatch('map/updateTimestamp'); - }, - }, -}; + labels() { + return this.entities.map(entity => entity.attribute); + }, + entities() { + let entities = + this.timestamp && global.map + ? global.map.plotDrawTool.getEntitys() + : []; + return entities.filter(entity => entity.attribute.type === 'polygon'); + }, + }, + methods: { + editHandle(label) { + if (!global.map) return; + this.label = { + id: label.attr.id, + name: label.attr.name, + }; + this.showCreatePanel = true; + }, + removeHandle(id) { + if (!global.map) return; + global.map.deletePlot(id); + this.$store.dispatch('map/updateTimestamp'); + }, + closeCreateHandle() { + this.showCreatePanel = false; + }, + showCreateHandle() { + this.showCreatePanel = true; + }, + _initLabel() { + this.label = { + id: null, + name: '', + }; + }, + createHandle() { + if (!global.map) return; + let map = global.map; + const { id, name } = this.label; + const entity = id && map.getPlotById(id); + this.closeCreateHandle(); + if (entity) { + map.updatePlotStyle(id, { text: name }); + map.updatePlotAttribute(id, { name }); + this._initLabel(); + this.$store.dispatch('map/updateTimestamp'); + } else { + map.startDraw( + { + type: 'polygon', + style: { text: name }, + attr: { + name, + }, + }, + () => { + this._initLabel(); + this.$store.dispatch('map/updateTimestamp'); + } + ); + } + }, + toggleVisible() { + this.showPlot = !this.showPlot; + if (global.map) { + this.entities.forEach(entity => { + entity.show = this.showPlot; + }); + } + this.$store.dispatch('map/updateTimestamp'); + }, + focusHandle(markerId) { + if (global.map) { + const entity = global.map.getPlotById(markerId); + if (entity) { + global.map.viewer.flyTo(entity, { duration: 1 }); + } + } + }, + clearHandle() { + if (global.map) { + this.entities.forEach(entity => { + global.map.plotDrawTool.deleteEntity(entity); + }); + } + this.$store.dispatch('map/updateTimestamp'); + }, + }, + }; </script> <style scoped> -.images img { - width: 36px; - height: auto; - margin: 0px 5px; - cursor: pointer; -} + .images img { + width: 36px; + height: auto; + margin: 0px 5px; + cursor: pointer; + } -.model-panel-list > div { - margin-bottom: 5px; - padding: 5px 0 5px 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} + .model-panel-list > div { + margin-bottom: 5px; + padding: 5px 0 5px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } -.image-list { - margin: 20px 0; -} + .image-list { + margin: 20px 0; + } -.image-list ul, -.image-list li { - margin: 0; - padding: 0; - list-style: none; -} + .image-list ul, + .image-list li { + margin: 0; + padding: 0; + list-style: none; + } -.image-list li { - display: inline-block; - margin: 0 5px 5px 5px; - cursor: pointer; - padding: 5px 8px; - border-radius: 3px; -} + .image-list li { + display: inline-block; + margin: 0 5px 5px 5px; + cursor: pointer; + padding: 5px 8px; + border-radius: 3px; + } -.image-list li img { - width: 32px; - height: 32px; -} + .image-list li img { + width: 32px; + height: 32px; + } -.image-list li:hover, -.image-list li.active { - box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15); -} + .image-list li:hover, + .image-list li.active { + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15); + } </style> -- Gitblit v1.9.2