重大

Kxc0822a

2022-04-11 0993108a9566af0e912415f6ef4d37d9e3b65a6d

 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>