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