Merge remote-tracking branch 'origin/master' into master

lyfO_o

2022-05-23 08bf6da5e3164a1b3ee5c79bb5d666e6385b4653

 src/components/Tab/Marker.vue

@@ -1,290 +1,290 @@
<template>
  <div class="container">
    <div class="images">
      <img
        v-for="image in images"
        :key="image.url"
        :src="image.url"
        @click="clickCreateHandle(image.url)"
      />
    </div>
    <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="marker in markers" :key="marker.attr.id">
        <el-col :span="2">
          <img :src="marker.style.image" style="width:22px;height:22px;" />
        </el-col>
        <el-col :span="12">
          {{ marker.attr.name || ' ' }}
        </el-col>
        <el-col :span="10" style="textAlign:right">
          <el-button
            icon="el-icon-s-promotion"
            size="mini"
            circle
            @click="() => focusHandle(marker.attr.id)"
          />
          <el-button
            icon="el-icon-edit"
            size="mini"
            circle
            @click="() => editHandle(marker)"
          />
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
            @click="() => removeHandle(marker.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="marker.name" placeholder="请输入内容" />
      <div class="image-list">
        <ul>
          <li
            v-for="item in images"
            :key="item.url"
            @click="marker.image = item.url"
            :class="marker.image === item.url ? 'active' : ''"
          >
            <img :src="item.url" />
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
    <div class="container">
        <div class="images">
            <!--      <img-->
            <!--        v-for="image in images"-->
            <!--        :key="image.url"-->
            <!--        :src="image.url"-->
            <!--        @click="clickCreateHandle(image.url)"-->
            <!--      />-->
        </div>
        <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="marker in markers" :key="marker.attr.id">
                <el-col :span="2">
                    <img :src="marker.style.image" style="width:22px;height:22px;" />
                </el-col>
                <el-col :span="12">
                    {{ marker.attr.name || ' ' }}
                </el-col>
                <el-col :span="10" style="textAlign:right">
                    <el-button
                        icon="el-icon-s-promotion"
                        size="mini"
                        circle
                        @click="() => focusHandle(marker.attr.id)"
                    />
                    <el-button
                        icon="el-icon-edit"
                        size="mini"
                        circle
                        @click="() => editHandle(marker)"
                    />
                    <el-button
                        icon="el-icon-delete"
                        type="danger"
                        size="mini"
                        circle
                        @click="() => removeHandle(marker.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="marker.name" placeholder="请输入内容" />
            <div class="image-list">
                <ul>
                    <li
                        v-for="item in images"
                        :key="item.url"
                        @click="marker.image = item.url"
                        :class="marker.image === item.url ? 'active' : ''"
                    >
                        <img :src="item.url" />
                    </li>
                </ul>
            </div>
            <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';

export default {
  components: {},
  data() {
    return {
      images: [
        { url: '../../../public/images/icon/1.png', type: '消防预警' },
        { url: '../../../public/images/icon/2.png', type: '风险预警' },
        { url: '../../../public/images/icon/3.png', type: '监控' },
        { url: '../../../public/images/wet.png', type: '车辆1' },
        { url: '../../../public/images/dry.png', type: '车辆2' },
        { url: '../../../public/images/alarm1.png', type: '告警' },
        { url: '../../../public/images/police.png', type: '警察' },
      ],
      marker: {
        id: null,
        name: '',
        image: null,
        scale: 0.25,
      },
      showCreatePanel: false,
      showPlot: true,
    };
  },
  computed: {
    timestamp() {
      return this.$store.state.map.timestamp;
    },
    markers() {
      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 === 'billboard');
    },
  },
  methods: {
    editHandle(marker) {
      if (!global.map) return;
      this.marker = {
        id: marker.attr.id,
        name: marker.attr.name,
        image: marker.style.image,
        scale: 0.5,
      };
      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;
    },
    _initMarker() {
      this.marker = {
        id: null,
        name: '',
        image: '',
        scale: 0.25,
      };
    },
    createHandle() {
      if (!global.map) return;
      let map = global.map;
      const { id, image, scale, name } = this.marker;
      const entity = id && map.getPlotById(id);
      this.closeCreateHandle();
      if (entity) {
        map.updatePlotStyle(id, { image, scale });
        map.updatePlotAttribute(id, { name });
        this._initMarker();
        this.$store.dispatch('map/updateTimestamp');
      } else {
        map.startDraw(
          {
            type: 'billboard',
            style: {
              image,
              scale,
            },
            attr: {
              name,
            },
          },
          () => {
            this._initMarker();
          }
        );
      }
    },
    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 });
        }
      }
    },
    clickCreateHandle(url) {
      if (!global.map) return;
      global.map.startDraw(
        {
          type: 'billboard',
          style: {
            image: url,
            scale: 0.25,
          },
    export default {
        components: {},
        data() {
            return {
                images: [
                    { url: '../../../public/images/icon/1.png', type: '消防预警' },
                    { url: '../../../public/images/icon/2.png', type: '风险预警' },
                    { url: '../../../public/images/icon/3.png', type: '监控' },
                    { url: '../../../public/images/wet.png', type: '车辆1' },
                    { url: '../../../public/images/dry.png', type: '车辆2' },
                    { url: '../../../public/images/alarm1.png', type: '告警' },
                    { url: '../../../public/images/police.png', type: '警察' },
                ],
                marker: {
                    id: null,
                    name: '',
                    image: null,
                    scale: 0.25,
                },
                showCreatePanel: false,
                showPlot: true,
            };
        },
        () => {
          this.$store.dispatch('map/updateTimestamp');
        }
      );
    },
    clearHandle() {
      if (global.map) {
        this.entities.forEach(entity => {
          global.map.plotDrawTool.deleteEntity(entity);
        });
      }
      this.$store.dispatch('map/updateTimestamp');
    },
  },
};
        computed: {
            timestamp() {
                return this.$store.state.map.timestamp;
            },
            markers() {
                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 === 'billboard');
            },
        },
        methods: {
            editHandle(marker) {
                if (!global.map) return;
                this.marker = {
                    id: marker.attr.id,
                    name: marker.attr.name,
                    image: marker.style.image,
                    scale: 0.5,
                };
                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;
            },
            _initMarker() {
                this.marker = {
                    id: null,
                    name: '',
                    image: '',
                    scale: 0.25,
                };
            },
            createHandle() {
                if (!global.map) return;
                let map = global.map;
                const { id, image, scale, name } = this.marker;
                const entity = id && map.getPlotById(id);
                this.closeCreateHandle();
                if (entity) {
                    map.updatePlotStyle(id, { image, scale });
                    map.updatePlotAttribute(id, { name });
                    this._initMarker();
                    this.$store.dispatch('map/updateTimestamp');
                } else {
                    map.startDraw(
                        {
                            type: 'billboard',
                            style: {
                                image,
                                scale,
                            },
                            attr: {
                                name,
                            },
                        },
                        () => {
                            this._initMarker();
                        }
                    );
                }
            },
            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 });
                    }
                }
            },
            clickCreateHandle(url) {
                if (!global.map) return;
                global.map.startDraw(
                    {
                        type: 'billboard',
                        style: {
                            image: url,
                            scale: 0.25,
                        },
                    },
                    () => {
                        this.$store.dispatch('map/updateTimestamp');
                    }
                );
            },
            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>