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