添加本地矢量地图服务，初始化视角切换

suerprisePlus

2024-08-21 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468

 src/views/dataManager/equipMante/index.vue

@@ -11,7 +11,7 @@
                <div>
                    <el-button plain size="small" @click="getDataList()">查询</el-button>
                    <el-button plain size="small" type="primary" @click="addOrUpdateHandle()">新增</el-button>
                    <el-button plain size="small" type="danger"
                    <el-button plain size="small" @click="deleteHandleList" type="danger"
                        :disabled="dataListSelections.length <= 0">批量删除</el-button>
                </div>
            </div>
@@ -53,8 +53,9 @@
                    </el-table-column>
                    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small">修改</el-button>
                            <el-button type="text" size="small">删除</el-button>
                            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
                            <el-button type="text" size="small" @click="deleteHandleRow(scope.row)">删除</el-button>
                            <el-button type="text" size="small" @click="showHandleRow(scope.row)">预览</el-button>
                        </template>
                    </el-table-column>
                </el-table>
@@ -64,16 +65,23 @@
        </el-card>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        <el-dialog width="30%" :title="showTitle" :visible.sync="innerVisible" append-to-body>
            <div style="height: 540px">
                <olMap v-if="innerVisible" :parentData="parentData"></olMap>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { faultreport_list } from '@/api/mapView/peiwang.js';
import { faultreport_query, faultreport_delete } from '@/api/mapView/peiwang.js';
import AddOrUpdate from './AddOrUpdate.vue';
import olMap from '@/components/mapOl/index.vue';
export default {
    name: "equipMante",
    components: {
        AddOrUpdate
        AddOrUpdate,
        olMap
    },
    data() {
        return {
@@ -91,27 +99,43 @@
            dataList: [],
            total: 0,
            addOrUpdateVisible: false,
            showData: null,
            innerVisible: false,
            parentData: null,
            showTitle:null,
        }
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        showHandleRow(row) {
            this.showData = { ...row }
            const obj = {
                val: this.showData,
                type: 'line',
                isShow: false,
            }
            this.showTitle= row['c_name']
            this.parentData = JSON.stringify([obj])
            this.innerVisible = true;
        },
        addOrUpdateHandle(res) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                   this.$refs.addOrUpdate.init(res)
            })
        },

        selectionChangeHandle(res) {
            this.dataListSelections = res;
        },
        getDataList() {
            this.dataListLoading = true;
            faultreport_list({
            faultreport_query({
                page: this.queryParams.pageIndex,
                limit: this.queryParams.pageSize,
                key: this.queryParams.name,
                c_name: this.dataForm.key,
            }).then(response => {
                this.dataListLoading = false;
                if (response.status != 200) return
@@ -119,8 +143,39 @@
                this.total = obj.totalCount;
                this.dataList = obj.list;
            })
        },

        deleteHandleRow(res) {
            this.deleteHandle([res.id])
        },
        deleteHandleList() {
            var ids = this.dataListSelections.map(item => {
                return item.id
            })
            this.deleteHandle(ids)
        },
        deleteHandle(res) {
            faultreport_delete(res).then(response => {
                if (response.data.msg == 'success') {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1000,

                    })
                } else {
                    this.$message({
                        message: '操作失败',
                        type: 'warning',
                        duration: 1000,

                    })
        }
                this.getDataList();

            })
    }
    },

}
</script>