bonus
/
water-design-const-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模型管理功能开发。

This commit is contained in:
lSun 2025-11-13 16:44:21 +08:00
parent 6def9f51f2
commit 99f7f1ede0
16 changed files with 207 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/basic/project.js
View File

@ -9,6 +9,15 @@ export function listProject(query) {
}) })
} }
// 查询项目列表
export function listMain(query) {
return request({
url: '/project/listMain',
method: 'get',
params: query,
})
}
// 新增项目 // 新增项目
export function addProject(data) { export function addProject(data) {
return request({ return request({
@ -57,3 +66,11 @@ export function getProTypeListApi() {
method: 'get', method: 'get',
}) })
} }
//业主单位
export function getUnitListApi() {
return request({
url: '/owner/listSelect',
method: 'get',
})
}

9
src/assets/styles/index.scss
View File

@ -176,3 +176,12 @@ aside {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.map-overlay {
position: absolute;
top: 1%;
right: 1%;
width: 20%;
height: 5%;
z-index: 9999;
}

2
src/views/basic/class-org/addOrEditForm.vue
View File

@ -3,7 +3,7 @@
<div> <div>
<el-form :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef" label-width="100px"> <el-form :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef" label-width="100px">
<el-form-item label="分类名称" prop="deviceName"> <el-form-item label="分类名称" prop="deviceName">
<el-input v-model="addOrEditForm.deviceName" placeholder="请输入设备名称" /> <el-input v-model="addOrEditForm.deviceName" maxlength="26" placeholder="请输入设备名称" />
</el-form-item> </el-form-item>
<el-form-item label="上级节点" prop="deviceCode"> <el-form-item label="上级节点" prop="deviceCode">
<el-select <el-select

4
src/views/basic/dev-type/addOrEditForm.vue
View File

@ -11,7 +11,7 @@
<el-form-item label="设备类型名称" prop="typeName"> <el-form-item label="设备类型名称" prop="typeName">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.typeName" placeholder="请输入设备类型名称"/> <el-input v-model="addOrEditForm.typeName" maxlength="26" placeholder="请输入设备类型名称"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -19,7 +19,7 @@
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/> <el-input v-model="addOrEditForm.remark" maxlength="26" placeholder="请输入备注"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>

3
src/views/basic/device-manage/addOrEditForm.vue
View File

@ -15,7 +15,7 @@
</el-form-item> </el-form-item>
<el-form-item label="设备编码" prop="deviceCode"> <el-form-item label="设备编码" prop="deviceCode">
<el-input v-model="addOrEditForm.deviceCode" placeholder="请输入设备编码"/> <el-input maxlength="26" v-model="addOrEditForm.deviceCode" placeholder="请输入设备编码"/>
</el-form-item> </el-form-item>
<el-form-item label="设备保管人" prop="userId"> <el-form-item label="设备保管人" prop="userId">
<el-select <el-select
@ -30,6 +30,7 @@
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input <el-input
maxlength="26"
type="textarea" type="textarea"
v-model="addOrEditForm.remark" v-model="addOrEditForm.remark"
placeholder="请输入备注" placeholder="请输入备注"

8
src/views/basic/device-manage/useOrReturnForm.vue
View File

@ -28,6 +28,7 @@
placeholder="选择领用时间" placeholder="选择领用时间"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
v-model="useOrReturnForm.useTime" v-model="useOrReturnForm.useTime"
:picker-options="pickerOptionsToday"
/> />
</el-form-item> </el-form-item>
</template> </template>
@ -47,6 +48,7 @@
placeholder="选择归还时间" placeholder="选择归还时间"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
v-model="useOrReturnForm.returnTime" v-model="useOrReturnForm.returnTime"
:picker-options="pickerOptionsToday"
/> />
</el-form-item> </el-form-item>
</template> </template>
@ -76,6 +78,12 @@ export default {
returnTime: '', returnTime: '',
}, },
userList: [], userList: [],
pickerOptionsToday: {
disabledDate(time) {
// 禁用今天之前的日期（不含今天）
return time.getTime() < Date.now() - 8.64e7; // 8.64e7 = 24 * 60 * 60 * 1000
}
}
} }
}, },
computed: { computed: {

4
src/views/basic/level-manage/addOrEditForm.vue
View File

@ -11,7 +11,7 @@
<el-form-item label="层级配置名称" prop="levelSettingName"> <el-form-item label="层级配置名称" prop="levelSettingName">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.levelSettingName" placeholder="请输入层级配置名称" /> <el-input maxlength="26" v-model="addOrEditForm.levelSettingName" placeholder="请输入层级配置名称" />
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -31,7 +31,7 @@
> >
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="item.levelName" placeholder="请输入节点" /> <el-input maxlength="26" v-model="item.levelName" placeholder="请输入节点" />
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">

2
src/views/basic/model-manage/addOrEditForm.vue
View File

@ -6,7 +6,7 @@
<el-input v-model="addOrEditForm.deviceName" disabled /> <el-input v-model="addOrEditForm.deviceName" disabled />
</el-form-item> </el-form-item>
<el-form-item label="分类名称" prop="proName"> <el-form-item label="分类名称" prop="proName">
<el-input v-model="addOrEditForm.proName" placeholder="请输入分类名称" /> <el-input v-model="addOrEditForm.proName" maxlength="26" placeholder="请输入分类名称" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>

4
src/views/basic/model-manage/index.vue
View File

@ -132,7 +132,7 @@
<el-dialog :title="title" :visible.sync="open" width="550px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="项目名称" prop="proName"> <el-form-item label="项目名称" prop="proName">
<el-input v-model="form.proName" placeholder="请输入项目名称"/> <el-input maxlength="26" v-model="form.proName" placeholder="请输入项目名称"/>
</el-form-item> </el-form-item>
<el-form-item label="层级配置" prop="level"> <el-form-item label="层级配置" prop="level">
<el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%"> <el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%">
@ -145,7 +145,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/> <el-input maxlength="26" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">

2
src/views/basic/model-manage/useOrReturnForm.vue
View File

@ -9,7 +9,7 @@
v-show="!showLayerDialog" v-show="!showLayerDialog"
> >
<el-form-item label="所属项目" prop="projectId" v-show="false"> <el-form-item label="所属项目" prop="projectId" v-show="false">
<el-input v-model="useOrReturnForm.projectId" placeholder="请输入项目ID" /> <el-input maxlength="26" v-model="useOrReturnForm.projectId" placeholder="请输入项目ID" />
</el-form-item> </el-form-item>
<el-form-item label="模型URL" prop="modelUrl" v-show="false"> <el-form-item label="模型URL" prop="modelUrl" v-show="false">
<el-input v-model="useOrReturnForm.modelUrl" placeholder="上传后自动填充" /> <el-input v-model="useOrReturnForm.modelUrl" placeholder="上传后自动填充" />

6
src/views/basic/model-manage/useOrReturnFormNew.vue
View File

@ -32,7 +32,7 @@
<el-form-item label=" 模型版本" prop="version"> <el-form-item label=" 模型版本" prop="version">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="useOrReturnForm.version" placeholder="请输入模型版本"/> <el-input maxlength="26" v-model="useOrReturnForm.version" placeholder="请输入模型版本"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -40,7 +40,7 @@
<el-form-item label="设计人员" prop="designer"> <el-form-item label="设计人员" prop="designer">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="useOrReturnForm.designer" placeholder="请输入设计人员"/> <el-input maxlength="26" v-model="useOrReturnForm.designer" placeholder="请输入设计人员"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -48,7 +48,7 @@
<el-form-item label="版本描述" prop="remark"> <el-form-item label="版本描述" prop="remark">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input type="textarea" v-model="useOrReturnForm.remark" placeholder="请输入版本描述"/> <el-input maxlength="26" type="textarea" v-model="useOrReturnForm.remark" placeholder="请输入版本描述"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>

17
src/views/basic/owner-manage/addOrEditForm.vue
View File

@ -11,7 +11,7 @@
<el-form-item label="业主单位名称" prop="unitName"> <el-form-item label="业主单位名称" prop="unitName">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.unitName" placeholder="请输入业主单位名称"/> <el-input maxlength="26" v-model="addOrEditForm.unitName" placeholder="请输入业主单位名称"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -19,7 +19,7 @@
<el-form-item label="业主单位负责人" prop="unitMan"> <el-form-item label="业主单位负责人" prop="unitMan">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.unitMan" placeholder="请输入业主单位负责人"/> <el-input maxlength="26" v-model="addOrEditForm.unitMan" placeholder="请输入业主单位负责人"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -27,7 +27,7 @@
<el-form-item label="业主单位负责人电话" prop="phone"> <el-form-item label="业主单位负责人电话" prop="phone">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.phone" placeholder="请输入业主单位负责人电话"/> <el-input maxlength="11" v-model="addOrEditForm.phone" placeholder="请输入业主单位负责人电话"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -35,7 +35,7 @@
<el-form-item label="业主单位地址" prop="address"> <el-form-item label="业主单位地址" prop="address">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.address" placeholder="请输入业主单位地址"/> <el-input maxlength="26" v-model="addOrEditForm.address" placeholder="请输入业主单位地址"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -43,7 +43,7 @@
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/> <el-input maxlength="26" v-model="addOrEditForm.remark" placeholder="请输入备注"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -75,6 +75,13 @@ export default {
addOrEditFormRules: { addOrEditFormRules: {
unitName: [{required: true, message: '请输入业主单位名称', trigger: 'blur'}], unitName: [{required: true, message: '请输入业主单位名称', trigger: 'blur'}],
unitMan: [{required: true, message: '请输入业主单位负责人', trigger: 'blur'}], unitMan: [{required: true, message: '请输入业主单位负责人', trigger: 'blur'}],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}, },
} }
}, },

4
src/views/basic/pro-type/addOrEditForm.vue
View File

@ -11,7 +11,7 @@
<el-form-item label="项目类型名称" prop="typeName"> <el-form-item label="项目类型名称" prop="typeName">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.typeName" placeholder="请输入项目类型名称"/> <el-input maxlength="26" v-model="addOrEditForm.typeName" placeholder="请输入项目类型名称"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -19,7 +19,7 @@
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/> <el-input maxlength="26" v-model="addOrEditForm.remark" placeholder="请输入备注"/>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>

31
src/views/basic/project/index.vue
View File

@ -64,6 +64,7 @@
<el-table-column label="项目名称" align="center" prop="proName"/> <el-table-column label="项目名称" align="center" prop="proName"/>
<el-table-column label="层级配置" align="center" prop="level"/> <el-table-column label="层级配置" align="center" prop="level"/>
<el-table-column label="项目类型" align="center" prop="proType"/> <el-table-column label="项目类型" align="center" prop="proType"/>
<el-table-column label="业主单位" align="center" prop="unit"/>
<el-table-column label="负责人" align="center" prop="chargePerson"/> <el-table-column label="负责人" align="center" prop="chargePerson"/>
<el-table-column label="备注" align="center" prop="remark" width="180"/> <el-table-column label="备注" align="center" prop="remark" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@ -102,7 +103,7 @@
<el-dialog :title="title" :visible.sync="open" width="40%" append-to-body> <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
<el-form ref="form" :model="form" :rules="addOrEditRules" label-width="auto"> <el-form ref="form" :model="form" :rules="addOrEditRules" label-width="auto">
<el-form-item label="项目名称" prop="proName"> <el-form-item label="项目名称" prop="proName">
<el-input v-model="form.proName" placeholder="请输入项目名称"/> <el-input maxlength="26" v-model="form.proName" placeholder="请输入项目名称"/>
</el-form-item> </el-form-item>
<el-form-item label="层级配置" prop="level"> <el-form-item label="层级配置" prop="level">
<el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%"> <el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%">
@ -127,8 +128,19 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="业主单位" prop="unit">
<el-select v-model="form.unit" placeholder="请选择业主单位" style="width: 100%">
<el-option
:key="item.id"
:value="item.id"
:label="item.unitName"
v-for="item in unitList"
/>
</el-select>
</el-form-item>
<el-form-item label="负责人" prop="chargePerson"> <el-form-item label="负责人" prop="chargePerson">
<el-input v-model="form.chargePerson" placeholder="请输入负责人"/> <el-input maxlength="26" v-model="form.chargePerson" placeholder="请输入负责人"/>
</el-form-item> </el-form-item>
<el-form-item label="项目所在地" prop="location"> <el-form-item label="项目所在地" prop="location">
@ -156,7 +168,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/> <el-input maxlength="26" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -250,9 +262,8 @@
</template> </template>
<script> <script>
import {listProject, getProject, delProject, addProject, updateProject,getProTypeListApi} from '@/api/basic/project' import {listProject, getProject, delProject, addProject, updateProject,getProTypeListApi,getUnitListApi} from '@/api/basic/project'
import {getLevelListApi} from '@/api/basic/level-manage.js' import {getLevelListApi} from '@/api/basic/level-manage.js'
import {BaiduMap, BmNavigation, BmView, BmGeolocation, BmCityList, BmLocalSearch} from 'vue-baidu-map'
export default { export default {
name: 'Post', name: 'Post',
@ -296,17 +307,20 @@ export default {
proName: '', // 项目名称 proName: '', // 项目名称
level: '', // 层级配置 level: '', // 层级配置
proType:'', // 项目类型 proType:'', // 项目类型
unit:'', // 单位id
chargePerson: '', // 负责人 chargePerson: '', // 负责人
location: '', // 项目所在地 location: '', // 项目所在地
longitude: '', // 经度 longitude: '', // 经度
latitude: '', // 纬度 latitude: '', // 纬度
remark: '', // 备注 remark: '', // 备注
}, },
// 表单校验 // 表单校验
addOrEditRules: { addOrEditRules: {
proName: [{required: true, message: '项目名称不能为空', trigger: 'blur'}], proName: [{required: true, message: '项目名称不能为空', trigger: 'blur'}],
level: [{required: true, message: '请选择层级配置', trigger: 'change'}], level: [{required: true, message: '请选择层级配置', trigger: 'change'}],
proType: [{required: true, message: '请选择项目类型', trigger: 'change'}], proType: [{required: true, message: '请选择项目类型', trigger: 'change'}],
unit: [{required: true, message: '请选择业主单位', trigger: 'change'}],
chargePerson: [{required: true, message: '请输入负责人', trigger: 'blur'}], chargePerson: [{required: true, message: '请输入负责人', trigger: 'blur'}],
location: [{required: true, message: '请选择项目所在地', trigger: 'blur'}], location: [{required: true, message: '请选择项目所在地', trigger: 'blur'}],
longitude: [{required: true, message: '请选择项目所在地', trigger: 'blur'}], longitude: [{required: true, message: '请选择项目所在地', trigger: 'blur'}],
@ -315,6 +329,7 @@ export default {
levelList: [], levelList: [],
proTypeList: [], proTypeList: [],
unitList: [],
searchAddress: '', searchAddress: '',
marker: null, marker: null,
@ -324,6 +339,7 @@ export default {
this.getList() this.getList()
this.getLevelList() this.getLevelList()
this.getProTypeList() this.getProTypeList()
this.getUnitList()
}, },
methods: { methods: {
async getLevelList() { async getLevelList() {
@ -340,6 +356,11 @@ export default {
this.proTypeList = res.data this.proTypeList = res.data
}, },
async getUnitList() {
const res = await getUnitListApi()
this.unitList = res.data
},
/** 查询岗位列表 */ /** 查询岗位列表 */
getList() { getList() {
this.loading = true this.loading = true

2
src/views/basic/survey/index.vue
View File

@ -135,7 +135,7 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="勘查人" prop="surveyUser" style="width: 100%"> <el-form-item label="勘查人" prop="surveyUser" style="width: 100%">
<el-input v-model="form.surveyUser" placeholder="请输入勘查人"/> <el-input maxlength="26" v-model="form.surveyUser" placeholder="请输入勘查人"/>
</el-form-item> </el-form-item>
<!-- <el-form-item label="勘查内容" prop="surveyContent" style="width: 100%"> <!-- <el-form-item label="勘查内容" prop="surveyContent" style="width: 100%">
<el-input v-model="form.surveyContent" placeholder="请输入勘查内容" /> <el-input v-model="form.surveyContent" placeholder="请输入勘查内容" />

196
src/views/index.vue
View File

@ -1,82 +1,121 @@
<template> <template>
<div class="app-container home" id="map-content"> </div> <div>
<div class="app-container home" id="map-content"></div>
<div class="map-overlay">
<el-select v-model="queryParams.proId" placeholder="请选择工程" style="width: 100%" @change="getProjectList">
<el-option
:key="item.proId"
:value="item.proId"
:label="item.proName"
v-for="item in proList"
/>
</el-select>
</div>
</div>
</template> </template>
<script> <script>
import { listProject } from '@/api/basic/project' import {listProject, listMain} from '@/api/basic/project'
import {listUser} from "@/api/system/user";
export default { export default {
name: 'Index', name: 'Index',
data() { data() {
return { return {
map: null, map: null,
markers: [], markers: [],
queryParams: {
proId: undefined,
pageNum: 1,
pageSize: 1000,
},
proList: []
}
},
methods: {
async getList() {
this.loading = true
listMain(this.queryParams).then(response => {
this.proList = response.data
// 确保所有 proId 都是数字类型
this.proList.forEach(item => {
item.proId = Number(item.proId)
})
} }
)
}, },
methods: {
// 获取所有项目
async getProjectList() {
const { rows: res } = await listProject({
pageNum: 1,
pageSize: 1000,
})
this.$nextTick(() => {
if (!this.map) {
this.initMap()
}
if (res.length > 0) { // 获取所有项目
res.forEach((item) => { async getProjectList() {
this.addMarker(item) const {rows: res} = await listProject({
}) proId: this.queryParams.proId,
} pageNum: 1,
}) pageSize: 1000,
}, })
// 地图初始化 this.$nextTick(() => {
initMap() { if (!this.map) {
this.map = new BMapGL.Map('map-content') // 创建地图实例 this.initMap()
let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标 }else{
this.map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别 this.map.clearOverlays(); // 清除所有覆盖物
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小 }
},
// 添加标记点 if (res.length > 0) {
addMarker(item) { res.forEach((item) => {
const point = new BMapGL.Point(item.longitude, item.latitude) this.addMarker(item)
const icon = new BMapGL.Icon(require('@/assets/images/location.png'), new BMapGL.Size(36, 36), { })
anchor: new BMapGL.Size(12, 24), // 图标锚点，使图标底部中心点与坐标点重合 }
}) })
},
// 创建marker并应用自定义图标 // 地图初始化
const marker = new BMapGL.Marker(point, { initMap() {
icon: icon, this.map = new BMapGL.Map('map-content') // 创建地图实例
}) let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
this.map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
},
this.map.addOverlay(marker) // 添加标记点
addMarker(item) {
const point = new BMapGL.Point(item.longitude, item.latitude)
const icon = new BMapGL.Icon(require('@/assets/images/location.png'), new BMapGL.Size(36, 36), {
anchor: new BMapGL.Size(12, 24), // 图标锚点，使图标底部中心点与坐标点重合
})
// 创建自定义图标，设置为#002db6颜色 // 创建marker并应用自定义图标
const marker = new BMapGL.Marker(point, {
icon: icon,
})
// 添加label在标点下方并居中 this.map.addOverlay(marker)
const label = new BMapGL.Label(item.proName, {
position: point,
offset: new BMapGL.Size(0, 0), // 调整偏移量，使文字在marker正下方
})
// 设置label样式
label.setStyle({
color: '#002db6', // 文字颜色
backgroundColor: 'transparent', // 透明背景
border: 'none', // 无边框
textAlign: 'center', // 文字居中
padding: '5px',
whiteSpace: 'nowrap', // 防止文字换行
fontSize: '18px',
transform: 'translateX(-45%)',
})
this.map.addOverlay(label)
// 创建信息窗口内容 // 创建自定义图标，设置为#002db6颜色
const infoWindow = new BMapGL.InfoWindow(`
// 添加label在标点下方并居中
const label = new BMapGL.Label(item.proName, {
position: point,
offset: new BMapGL.Size(0, 0), // 调整偏移量，使文字在marker正下方
})
// 设置label样式
label.setStyle({
color: '#002db6', // 文字颜色
backgroundColor: 'transparent', // 透明背景
border: 'none', // 无边框
textAlign: 'center', // 文字居中
padding: '5px',
whiteSpace: 'nowrap', // 防止文字换行
fontSize: '18px',
transform: 'translateX(-45%)',
})
this.map.addOverlay(label)
// 创建信息窗口内容
const infoWindow = new BMapGL.InfoWindow(`
<div style="padding: 10px;"> <div style="padding: 10px;">
<h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${item.proName}</h3> <h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${item.proName}</h3>
<p>负责人: ${item.chargePerson}</p> <p>负责人: ${item.chargePerson}</p>
@ -84,29 +123,30 @@ export default {
</div> </div>
`) `)
// 为label也添加相同的鼠标事件，提升用户体验 // 为label也添加相同的鼠标事件，提升用户体验
label.addEventListener('mouseover', () => { label.addEventListener('mouseover', () => {
this.map.openInfoWindow(infoWindow, point) this.map.openInfoWindow(infoWindow, point)
}) })
label.addEventListener('mouseout', () => { label.addEventListener('mouseout', () => {
this.map.closeInfoWindow(infoWindow) this.map.closeInfoWindow(infoWindow)
}) })
},
}, },
},
created() { created() {
this.getProjectList() this.getProjectList()
}, this.getList()
},
updated() { updated() {
this.getProjectList() this.getProjectList()
}, },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.home { .home {
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
} }
</style> </style>